Let a rail hide when collapsed instead of narrowing

Plan step 25 (navigation Missing): M3's "Expanded behavior | Hide when
collapsed" was only implicit below `medium` in the adaptive rail.
`<x-navigation-rail hide-when-collapsed>` (collapsible and adaptive rails) takes
the rail out of the layout when it is collapsed; `$store.rail.show()` from an
app-bar menu button brings it back expanded over a scrim, sliding in, and its
own menu button docks it again. It does not reach the bands where the window,
not the visitor, collapses a rail (below `medium` for collapsible, `medium` for
adaptive), since M3's collapsed rail may never hide. Every `rail-collapsed`
branch now stops while the rail is open. `<x-app-shell hide-rail-when-collapsed>`
exposes it.

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

tests/Feature/Components/AppShellTest.php

@@ -115,6 +115,15 @@ it('lets the bar leave the window while the page scrolls down', function () {
         ->not->toContain('data-hide-on-scroll');
 });
 
+it('exposes the rail that hides when collapsed', function () {
+    expect((string) $this->blade('<x-app-shell :destinations="$destinations" hide-rail-when-collapsed />', ['destinations' => shellDestinations()]))
+        ->toContain('data-hide-when-collapsed')
+        ->toContain("materialNavigationRail('adaptive', true)")
+        ->and((string) $this->blade('<x-app-shell :destinations="$destinations" />', ['destinations' => shellDestinations()]))
+        ->not->toContain('data-hide-when-collapsed')
+        ->toContain("materialNavigationRail('adaptive', false)");
+});
+
 it('reads the safe area and anything docked on the bar through variables an application can set', function () {
     $html = (string) $this->blade('<x-app-shell :destinations="$destinations" />', ['destinations' => shellDestinations()]);
 

tests/Feature/Components/NavigationRailTest.php

@@ -18,7 +18,7 @@ it('gives the collapsible, modal and adaptive rails a menu button and the store'
     $collapsible = (string) $this->blade('<x-navigation-rail />');
 
     expect($collapsible)
-        ->toContain('x-data="materialNavigationRail(\'collapsible\')"')
+        ->toContain('x-data="materialNavigationRail(\'collapsible\', false)"')
         ->toContain('data-navigation-rail-menu')
         ->toContain('aria-label="Collapse navigation"')
         ->toContain('aria-expanded="true"')
@@ -102,6 +102,35 @@ it('centres the destinations on request, leaving the header and footer at their
         ->toMatch("/\\[data-navigation-rail\\]\\[data-align='center'\\] \\[data-navigation-rail-destinations\\] \\{\\s+justify-content: safe center;/");
 });
 
+it('hides a collapsible or adaptive rail entirely when told to, and only those', function () {
+    $hiding = (string) $this->blade('<x-navigation-rail hide-when-collapsed />');
+
+    expect($hiding)
+        ->toContain('data-hide-when-collapsed')
+        ->toContain("x-data=\"materialNavigationRail('collapsible', true)\"")
+        // It needs the scrim and the focus trap a modal rail has: it comes back over the page.
+        ->toContain('data-navigation-rail-scrim')
+        ->toContain('x-trap.inert.noscroll="open"')
+        ->and((string) $this->blade('<x-navigation-rail mode="adaptive" hide-when-collapsed />'))
+        ->toContain("x-data=\"materialNavigationRail('adaptive', true)\"")
+        // A modal rail is already over the page; the two fixed modes mean what they say.
+        ->and((string) $this->blade('<x-navigation-rail mode="modal" hide-when-collapsed />'))
+        ->not->toContain('data-hide-when-collapsed')
+        ->toContain("materialNavigationRail('modal', false)")
+        ->and((string) $this->blade('<x-navigation-rail mode="expanded" hide-when-collapsed />'))
+        ->not->toContain('data-hide-when-collapsed')
+        ->and((string) $this->blade('<x-navigation-rail />'))->not->toContain('data-hide-when-collapsed');
+
+    expect(file_get_contents(__DIR__.'/../../../resources/css/components/navigation.css'))
+        ->toMatch('/\[data-navigation-rail\]\[data-hide-when-collapsed\] \{\s+@variant rail-collapsed \{\s+width: 0;/')
+        // The two bands where the window, not the visitor, collapses a rail keep theirs.
+        ->toMatch("/@media \\(width < 37\\.5rem\\) \\{\\s+\\[data-navigation-rail='collapsible'\\]\\[data-hide-when-collapsed\\]/")
+        ->toMatch("/@media \\(37\\.5rem <= width < 52\\.5rem\\) \\{\\s+\\[data-navigation-rail='adaptive'\\]\\[data-hide-when-collapsed\\]/")
+        // Every collapsed branch stops while the rail is open, or what comes back would be narrow.
+        ->and(substr_count(file_get_contents(__DIR__.'/../../../resources/css/components/navigation.css'), ':not([data-open])'))
+        ->toBeGreaterThanOrEqual(12);
+});
+
 it('flattens a FAB nested in the rail header and morphs its label', function () {
     // Both rules hang off `data-fab` on <x-fab>'s root, and both are unlayered, because what they
     // beat — the FAB's shadow, its gap, an extended FAB's minimum width — are utilities.