Refine rail drawer switching and toggle animations

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: 821,
+    cascadeEdges: 822,
     customProperties: 103,
-    declarations: 3308,
+    declarations: 3325,
     important: 0,
-    keyframes: 56,
+    keyframes: 52,
     media: 12,
-    rules: 947,
-    variableReferences: 810,
+    rules: 953,
+    variableReferences: 811,
   },
   hashes: {
-    cascadeEdges: '54abf37aa617e90947c3e0cfd35f2358f8873bda512992c5628950d828ea7486',
+    cascadeEdges: 'c9c0e3988cea68ecc1c5e06e12b3b12fe9bb4d20482a67abcf838296ccf9740f',
     customProperties: 'ef70fb1d9b61b177f1939f811babe1116bee631de26f5eac0aa0d0009ca5a1fb',
-    declarations: '97e97ccb50010db1950b2a2ceeb3bdbcc8574aaee5a676724d3332a69fab537d',
+    declarations: '856c8aa1395c435723a52d709a39c9d37e0ede48ddb59f4ce8eff91d695e605d',
     duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945',
     duplicateSelectors: '0fa66e370695261a2a5c6a189752c07d518d80d68d3e79a3ba4bb34407893c0e',
-    keyframes: 'd4378751f36eccc87923c12540315462055032a5d34978a0f45ecada0a5cc1ce',
-    ruleDeclarationSequences: '14f4eceda4a1811799b7dc50491c9298c27c5796fa8fc8ce02104bdb268d7675',
-    selectors: '1420d737139ad3e03bbdcf5a4e1573443e500cda572b4461bdc578cd6b3c04de',
-    variableReferences: 'c8e01fce4a7f3a976040f20938ec8d70403bd003f66ef13b5637c77f9c4cef08',
-    witnesses: 'b47da99c00da77a5c9716796304fab2163fb21c6bc6753176f008f85a3420695',
+    keyframes: 'd3050d026f6fba3975cf6bb07320d0c3f400c3b3b6eaa3cecbc53b0b137083a3',
+    ruleDeclarationSequences: 'e129c791ddbc3fa3f28fe4fb5565688a7e2e212eff2f8f8e85d76394f9628847',
+    selectors: '4ab0b3b0944d13512d5ea28255d031b4b2cb7469883057e8f16ab090580fbd51',
+    variableReferences: '0ffb99792db35b451fb35d1ced24e1aeef3a6df769cb37bf3d61229b0c970eba',
+    witnesses: 'c502e252880f18c633b82d09bf349de134c52da4b67a8dfadd327ee01b464692',
   },
 };
 
@@ -209,7 +209,7 @@ test('client typography uses the shared semantic scale outside the token owner',
 
 test('accepted stylesheet has pinned declaration, selector, keyframe, variable, and cascade ledgers', () => {
   const witnesses = readStyleWitnesses(root);
-  assert.equal(witnesses.length, 811);
+  assert.equal(witnesses.length, 817);
   assert.equal(witnesses.filter((witness) => witness.unknown || witness.ancestorUnknown).length, 0);
   const ledger = createStyleLedger(readStyleSource(root), { witnesses });
   assert.deepEqual(ledger.counts, acceptedLedger.counts);
@@ -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-0HVoD6xZ.css']);
+  assert.deepEqual(assets, ['index-D5lRz6FV.css']);
   const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0]));
-  assert.equal(built.byteLength, 127874);
-  assert.equal(sha256(built), '97241721abba48f5a120e08c425fb67b8b3ab560e59b479351ea455837838805');
+  assert.equal(built.byteLength, 129198);
+  assert.equal(sha256(built), '1108b32f6d493f170b7683a1947c248c5d4e1295dd810bdc0f0935d133c28497');
 });