Refine secondary rail icons and animations

test/web/responsive-layout-contract.test.js

@@ -147,25 +147,33 @@ test('secondary menus share one right rail and switch equal drawers as a vertica
   assert.match(disabledRulesLabel, /filter:\s*blur\(5px\)/);
   assert.match(styles, /\.client-local-rules-toggle:disabled:hover span\s*\{[\s\S]*opacity:\s*1/);
   assert.match(subscription, /client-rail-subscription-back[\s\S]*client-rail-subscription-front[\s\S]*client-rail-subscription-lines/);
-  assert.match(instructions, /client-rail-book-page is-left[\s\S]*client-rail-book-page is-right[\s\S]*client-rail-book-spine/);
+  assert.match(instructions, /client-rail-info-ring[\s\S]*client-rail-info-sweep[\s\S]*client-rail-info-mark/);
   assert.match(component, /<InstructionsToggle[\s\S]*<DevicesToggle[\s\S]*<DiagnosticsToggle[\s\S]*<RoutingToggle/);
   assert.match(diagnosticsFeature, /client-rail-diagnostics-base[\s\S]*client-rail-diagnostics-pulse/);
   assert.match(devices, /client-rail-device-primary[\s\S]*client-rail-device-secondary[\s\S]*client-rail-device-link[\s\S]*client-rail-device-bridge[\s\S]*client-rail-device-pulse/);
   assert.match(routing, /client-rail-rule-track[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob is-bottom/);
-  assert.match(styles, /\.client-rail-subscription-back \{[\s\S]*translate\(-1\.4px, 1\.4px\)/);
-  assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-front \{[\s\S]*translate\(-1px, 0\.6px\)/);
-  assert.match(styles, /\.client-rail-book-page\.is-left \{[\s\S]*scaleX\(0\.58\)/);
-  assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-book-page,[\s\S]*scale\(1\)/);
-  assert.match(styles, /\.client-rail-device-primary \{[\s\S]*translate\(-0\.9px, -1\.8px\)/);
+  assert.match(styles, /\.client-rail-subscription-lines \{[\s\S]*opacity:\s*0\.9/);
+  assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-front \{[\s\S]*translate\(-1\.5px, 1px\)/);
+  assert.match(styles, /\.client-rail-info-ring \{[\s\S]*stroke-dasharray:\s*1 0/);
+  assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-info-ring \{[\s\S]*stroke-dasharray:\s*0\.78 0\.22/);
+  assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-primary \{[\s\S]*translateX\(0\.6px\)/);
+  assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-secondary \{[\s\S]*translateX\(-0\.6px\)/);
   assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-bridge \{[\s\S]*scaleX\(1\)/);
-  assert.match(styles, /\.client-rail-diagnostics-base,[\s\S]*scaleY\(0\.22\)/);
+  assert.match(styles, /\.client-rail-diagnostics-base,[\s\S]*scaleY\(0\.8\)/);
   assert.match(styles, /\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-base,[\s\S]*scaleY\(1\)/);
-  assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob\.is-top \{[\s\S]*translateX\(3px\)/);
-  assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob\.is-bottom \{[\s\S]*translateX\(-3px\)/);
+  assert.match(routing, /client-rail-rule-knob is-top" cx="15"[\s\S]*client-rail-rule-knob is-bottom" cx="9"/);
+  assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob\.is-top \{[\s\S]*translateX\(2px\)/);
+  assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob\.is-bottom \{[\s\S]*translateX\(-2px\)/);
+  assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-lines \{[\s\S]*animation:\s*client-rail-detail-pulse 10s/);
+  assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-info-sweep \{[\s\S]*animation:\s*client-rail-info-scan 10s/);
+  assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-pulse \{[\s\S]*animation:\s*client-rail-device-signal 10s/);
+  assert.match(styles, /\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-pulse \{[\s\S]*animation:\s*client-rail-diagnostics-scan 10s/);
+  assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob \{[\s\S]*animation:\s*client-rail-rule-pulse 10s/);
+  assert.match(styles, /@keyframes client-rail-info-scan[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
   assert.match(styles, /@keyframes client-rail-device-signal[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
   assert.match(styles, /@keyframes client-rail-diagnostics-scan[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
   assert.match(styles, /transition: transform 620ms cubic-bezier\(0\.16, 1, 0\.3, 1\)/);
-  assert.doesNotMatch(styles, /client-rail-info-refill|client-rail-device-left|client-rail-rule-top/);
+  assert.doesNotMatch(styles, /client-rail-info-refill|client-rail-device-left|client-rail-rule-top|client-rail-book-page/);
   assert.doesNotMatch(styles, /client-secondary-icon-motion|\.client-local-rules-toggle\.is-open svg\s*\{[^}]*rotate/);
   assert.match(rule('.client-drawer'), /inset:\s*0 0 0 auto/);
   assert.match(rule('.client-drawer'), /width:\s*min\(580px, 100vw\)/);

test/web/style-boundaries.test.js

@@ -37,26 +37,26 @@ const expectedImports = [
 const sha256 = (value) => crypto.createHash('sha256').update(value).digest('hex');
 const acceptedLedger = {
   counts: {
-    cascadeEdges: 822,
+    cascadeEdges: 823,
     customProperties: 103,
-    declarations: 3325,
+    declarations: 3333,
     important: 0,
-    keyframes: 52,
+    keyframes: 55,
     media: 12,
-    rules: 953,
+    rules: 961,
     variableReferences: 811,
   },
   hashes: {
-    cascadeEdges: 'c9c0e3988cea68ecc1c5e06e12b3b12fe9bb4d20482a67abcf838296ccf9740f',
+    cascadeEdges: '20d8763bd907f8182994186e2c53e03885ecdcb8dda07c69ff7e64b5ac808625',
     customProperties: 'ef70fb1d9b61b177f1939f811babe1116bee631de26f5eac0aa0d0009ca5a1fb',
-    declarations: '856c8aa1395c435723a52d709a39c9d37e0ede48ddb59f4ce8eff91d695e605d',
+    declarations: '633264a595c8ade20cae3adb50bb484c61c22f430b7760155efb4ec4b15d30de',
     duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945',
     duplicateSelectors: '0fa66e370695261a2a5c6a189752c07d518d80d68d3e79a3ba4bb34407893c0e',
-    keyframes: 'd3050d026f6fba3975cf6bb07320d0c3f400c3b3b6eaa3cecbc53b0b137083a3',
-    ruleDeclarationSequences: 'e129c791ddbc3fa3f28fe4fb5565688a7e2e212eff2f8f8e85d76394f9628847',
-    selectors: '4ab0b3b0944d13512d5ea28255d031b4b2cb7469883057e8f16ab090580fbd51',
+    keyframes: '35e40cc917b4c0d5a99bb0a3a626736e134167d29cf303ec41d02bf713d18637',
+    ruleDeclarationSequences: 'b7643608ce8526684769dc22bf6641962e324093f9f20b6239e7d71dab031272',
+    selectors: '896dc29ad2ed823b0754d4c667c093c5733bc54af951cf2b9ed83e9c022836d5',
     variableReferences: '0ffb99792db35b451fb35d1ced24e1aeef3a6df769cb37bf3d61229b0c970eba',
-    witnesses: 'c502e252880f18c633b82d09bf349de134c52da4b67a8dfadd327ee01b464692',
+    witnesses: 'f9c177d5f967c116a1f8a79c05a6d1faf1231775045dbafbc1772d2f916e40e0',
   },
 };
 
@@ -405,8 +405,8 @@ test('main owns one public stylesheet and the regrouped production CSS is determ
   assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1);
 
   const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css'));
-  assert.deepEqual(assets, ['index-D5lRz6FV.css']);
+  assert.deepEqual(assets, ['index-Ceg2DPeq.css']);
   const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0]));
-  assert.equal(built.byteLength, 129198);
-  assert.equal(sha256(built), '1108b32f6d493f170b7683a1947c248c5d4e1295dd810bdc0f0935d133c28497');
+  assert.equal(built.byteLength, 129584);
+  assert.equal(sha256(built), '8ccbb067a01c28e729a1aa34908a96e508f07fb9e12c0d05ead10ddc959731bc');
 });