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

resources/views/showcase/sections/navigation.blade.php

@@ -138,6 +138,24 @@
                 </div>
             </div>
             BLADE,
+        'Rail that hides when collapsed' => <<<'BLADE'
+            <div class="flex h-[30rem] w-full overflow-hidden rounded-corner-lg border border-outline-variant">
+                <x-navigation-rail label="Immersive example" hide-when-collapsed>
+                    <x-slot:brand>
+                        <span class="block truncate type-title-lg">Studio</span>
+                    </x-slot:brand>
+
+                    <x-navigation-rail-item label="Canvas" icon="brush" link="#navigation" no-wire-navigate active />
+                    <x-navigation-rail-item label="Layers" icon="layers" link="#navigation" no-wire-navigate />
+                    <x-navigation-rail-item label="Exports" icon="download" link="#navigation" no-wire-navigate />
+                </x-navigation-rail>
+
+                <div class="min-w-0 flex-1 space-y-4 bg-surface-container-low p-6 type-body-md text-on-surface-variant">
+                    <p>M3's other expanded behaviour: collapsing this rail takes it out of the layout instead of narrowing it to 96px, so an immersive page gets the whole window. The only way back is a menu button of the application's own — its own button then docks it again.</p>
+                    <x-button icon="menu" label="Open navigation" x-on:click="$store.rail.show()" />
+                </div>
+            </div>
+            BLADE,
     ];
 @endphp