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/components/navigation-rail.blade.php

@@ -5,7 +5,7 @@
              <x-navigation-rail mode="collapsible">
                  <x-slot:brand><span class="type-title-lg">Mail</span></x-slot:brand>
                  <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="/inbox" active badge="12" />
@@ -36,22 +36,30 @@
        the same standard rail, expanded to begin with. A visitor who has used the menu button keeps
        that choice in both standard bands.
 
-     Slots: `brand` beside the menu button, only while expanded; `header` under it — a FAB, drawn
-     as an extended FAB when expanded (`rail-collapsed:` below); the destinations in the default
-     slot, which alone scroll when the window is too short; `footer`, pinned to the foot. Header and
-     footer never scroll, so nothing in them is cut off by the scroller's edge. A FAB in the header
-     rests flat: M3 puts a nested FAB at elevation 0, not the 3 a standalone one has.
+     Slots: `brand` beside the menu button, only while expanded; `header` under it — one
+     `<x-fab label="…" icon="…">`, which the rail morphs: the label's width springs open and shut
+     with the rail, so the FAB becomes an extended FAB and back rather than one being swapped for
+     the other, and its label names it at both widths. It also rests flat, because M3 puts a FAB
+     nested in another component at elevation 0, not the 3 a standalone one has. Then the
+     destinations in the default slot, which alone scroll when the window is too short, and
+     `footer`, pinned to the foot. Header and footer never scroll, so nothing in them is cut off by
+     the scroller's edge.
 
-     Anything inside can take both shapes with the `rail-collapsed:` variant, which applies while
-     the rail is drawn collapsed for whatever reason:
-     `<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>`.
+     Anything else inside can take both shapes with the `rail-collapsed:` variant, which applies
+     while the rail is drawn collapsed for whatever reason:
+     `<span class="rail-collapsed:hidden">…only while expanded…</span>`
+     `<span class="hidden rail-collapsed:inline-flex">…only while collapsed…</span>`.
      Nothing that shows while collapsed may be wider than 96px.
 
      Props: `label` names the landmark ("Main"); `width` is the expanded width (`16rem`, held
      between M3's 220 and 360dp); `menu` shows the menu button (by default for `collapsible`,
-     `modal` and `adaptive`). The rail does not scroll with the page: in a flex row it sticks to
-     the top of the viewport, as tall as the viewport at most.
+     `modal` and `adaptive`); `divider` draws M3's optional vertical divider on the edge the page
+     is on — which is also what M3 asks for when a page scrolls underneath a fixed rail; `fill`
+     (`false`) drops the container colour for a transparent rail over the page's own background,
+     which M3 allows as long as the items keep a 3:1 contrast against what is behind them. A rail
+     open over a scrim keeps its fill and drops the divider whatever those say: it is a surface
+     over the page then. The rail does not scroll with the page: in a flex row it sticks to the top
+     of the viewport, as tall as the viewport at most.
 
      Values from androidx Compose Material 3 (Apache-2.0), androidx-main
      27cf9a7d5788aa0f5f2d8b6699ce279560daf326: NavigationRailCollapsedTokens.kt,
@@ -67,6 +75,8 @@
     'label' => null,
     'width' => '16rem',
     'menu' => null,
+    'divider' => false,
+    'fill' => true,
 ])
 
 @php
@@ -79,6 +89,8 @@
 
 <div
     data-navigation-rail="{{ $mode }}"
+    @if ($divider) data-divider @endif
+    @unless ($fill) data-fill="false" @endunless
     @if ($interactive)
         x-data="materialNavigationRail('{{ $mode }}')"
         x-bind:data-open="open"