Morph the rail's FAB, and offer a divider, no fill and a width floor

M3 asks the rail to animate its FAB into an extended FAB as it expands; the
documented pattern was two FABs swapped by `display`, so the collapsed one
appeared at once while the rail's width was still springing. The header now takes
one <x-fab label icon> whose label springs open and shut on the rail's own
spring — and names it at both widths, where the collapsed FAB had needed a
tooltip to have a name at all.

M3 also lists two container treatments as optional that the library had neither
of: `divider` draws the vertical divider on the page's edge, which is its own
answer to a page scrolling under a fixed rail, and `fill="false"` drops the
container colour. Neither reaches a rail open over a scrim. And a `collapsible`
rail, whose width is the visitor's choice rather than the window's, is held to
the collapsed 96px below `medium`, where M3 asks for a navigation bar instead.
Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-22, N-23, N-24).

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

@@ -34,9 +34,9 @@
         'Collapsed and expanded rails' => <<<'BLADE'
             <div class="flex w-full flex-wrap items-start gap-6">
                 <div class="flex h-[36rem] overflow-hidden rounded-corner-lg border border-outline-variant">
-                    <x-navigation-rail mode="collapsed" label="Collapsed example">
+                    <x-navigation-rail mode="collapsed" label="Collapsed example" divider>
                         <x-slot:header>
-                            <x-fab icon="edit" tooltip-right="Compose" />
+                            <x-fab label="Compose" icon="edit" />
                         </x-slot:header>
 
                         <x-navigation-rail-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate active badge="12" />
@@ -82,8 +82,7 @@
                     </x-slot:brand>
 
                     <x-slot:header>
-                        <span class="rail-collapsed:hidden"><x-fab label="Compose" icon="edit" /></span>
-                        <span class="hidden rail-collapsed:inline-flex"><x-fab icon="edit" tooltip-right="Compose" /></span>
+                        <x-fab label="Compose" icon="edit" />
                     </x-slot:header>
 
                     <x-navigation-rail-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate active badge="12" />
@@ -92,7 +91,7 @@
                 </x-navigation-rail>
 
                 <div class="min-w-0 flex-1 bg-surface-container-low p-6 type-body-md text-on-surface-variant">
-                    The menu button collapses and expands the rail. The choice is remembered and applied before the next page paints — every collapsible rail follows it, <code>&lt;x-app-shell&gt;</code>'s from <code>lg</code> too.
+                    The menu button collapses and expands the rail, and the FAB morphs into an extended FAB with it. The choice is remembered and applied before the next page paints — every collapsible rail follows it, <code>&lt;x-app-shell&gt;</code>'s from <code>expanded</code> (840px) too.
                 </div>
             </div>
             BLADE,
@@ -104,7 +103,7 @@
 
     <p class="max-w-3xl type-body-md text-on-surface-variant">
         <code>&lt;x-navigation-bar&gt;</code> and <code>&lt;x-navigation-bar-item&gt;</code>, <code>&lt;x-navigation-rail&gt;</code>, <code>&lt;x-navigation-rail-item&gt;</code> and <code>&lt;x-navigation-rail-section&gt;</code>,
-        and <code>&lt;x-app-shell&gt;</code>, which puts them together: a bar below <code>sm</code>, a collapsed rail that opens as a modal to <code>lg</code>, a collapsible rail from there.
+        and <code>&lt;x-app-shell&gt;</code>, which puts them together on M3's window size classes: a bar below <code>medium</code> (600px), a collapsed rail that opens as a modal through <code>medium</code>, a standard rail from <code>expanded</code> (840px) and an expanded one from <code>large</code> (1200px).
         <a href="{{ route('livewire-material.shell') }}" class="link text-primary">Open the app shell</a> and change the window's width.
     </p>
 

resources/views/showcase/shell.blade.php

@@ -45,8 +45,7 @@
             </x-slot:brand>
 
             <x-slot:rail-header>
-                <span class="rail-collapsed:hidden"><x-livewire-material::fab label="Compose" icon="edit" x-on:click="materialToast('Compose opens here')" /></span>
-                <span class="hidden rail-collapsed:inline-flex"><x-livewire-material::fab icon="edit" tooltip-right="Compose" x-on:click="materialToast('Compose opens here')" /></span>
+                <x-livewire-material::fab label="Compose" icon="edit" x-on:click="materialToast('Compose opens here')" />
             </x-slot:rail-header>
 
             <x-slot:rail-footer>