Square the rail's collapsed FAB whatever size it is

The actions stream has since given the small extended FAB an 80px minimum width,
which the morph would have kept once the label closed. Dropping that minimum and
squaring the box against the height its size already sets gives back the 56, 80
or 96px FAB without this file naming any of those numbers.
Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-23).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/components/navigation.css

@@ -659,11 +659,13 @@
 /* "Rail transitions from collapsed to expanded should animate the FAB into and out of an extended
  * FAB" — so the header takes one <x-fab label icon> and morphs it, rather than swapping two by
  * `display`, which showed the collapsed one at once while the rail's width was still springing.
- * The label's width springs on the rail's own spatial spring; with the gap closed, what is left is
+ * The label's width springs on the rail's own spatial spring; with the gap closed and the extended
- * 16px of padding, the 24px icon and 16px again — the 56px square a collapsed FAB is. The label
+ * FAB's own minimum width off, `aspect-ratio` squares what is left against the height its size
+ * already sets — 56, 80 or 96px, the three FAB sizes — so no number is repeated here. The label
  * stays in the accessibility tree at both widths, so the FAB keeps its name. Unlayered for the
- * same reason as the rule above: `gap-2` is a utility, and a layer would lose to it. The cap is a
+ * same reason as the rule above: `gap-2` and `min-w-20` are utilities, and a layer would lose to
- * transition needs a length to travel to; a rail FAB's label is a word or two. */
+ * them. The cap is there because a transition needs a length to travel to; a rail FAB's label is a
+ * word or two. */
 [data-navigation-rail-header] [data-fab] > span {
     max-width: 16rem;
     overflow: hidden;
@@ -680,6 +682,8 @@
 
 [data-navigation-rail-header] [data-fab] {
     @variant rail-collapsed {
+        min-width: 0;
+        aspect-ratio: 1;
         gap: 0;
     }
 }

tests/Feature/Components/NavigationRailTest.php

@@ -67,21 +67,16 @@ it('takes M3\'s optional divider and turns the container fill off', function ()
         ->toMatch("/\\[data-navigation-rail='collapsible'\\] \\{\\s+width: 6rem;/");
 });
 
-it('flattens a FAB nested in the rail header to elevation 0', function () {
+it('flattens a FAB nested in the rail header and morphs its label', function () {
-    $html = (string) $this->blade(<<<'BLADE'
+    // Both rules hang off `data-fab` on <x-fab>'s root, and both are unlayered, because what they
-        <x-navigation-rail mode="expanded">
+    // beat — the FAB's shadow, its gap, an extended FAB's minimum width — are utilities.
-            <x-slot:header><x-fab icon="edit" tooltip-right="Compose" /></x-slot:header>
-        </x-navigation-rail>
-        BLADE);
-
-    // The hook the unlayered rules in navigation.css need (N-03).
-    expect($html)->toContain('data-fab');
-
     expect(file_get_contents(__DIR__.'/../../../resources/css/components/navigation.css'))
+        // A nested FAB rests at elevation 0, not the 3 a standalone one has (N-03).
         ->toContain('[data-navigation-rail-header] [data-fab],')
         ->toContain('[data-navigation-rail-header] [data-fab]:hover {')
         // One FAB whose label springs shut, not two swapped by display (N-23).
-        ->toContain('[data-navigation-rail-header] [data-fab] > span {');
+        ->toContain('[data-navigation-rail-header] [data-fab] > span {')
+        ->toMatch('/@variant rail-collapsed \{\s+min-width: 0;\s+aspect-ratio: 1;\s+gap: 0;/');
 });
 
 it('draws a destination in both shapes, with its count on the icon and at the end', function () {