Let the rail centre its destinations

Plan step 25 (navigation Missing): M3's "alignment: top or center; on tablets
prefer center alignment for reach" had no implementation — the rail was
top-aligned only. `<x-navigation-rail align="center">` centres the destinations
between the header and the footer, which stay at their ends because M3 keeps the
menu icon and the FAB top-aligned. `safe center` gives the top back the moment
there are more destinations than fit, where centring would push the first one
out of reach above the scroller.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/navigation-rail.blade.php

@@ -56,7 +56,11 @@
      (NavigationRailCollapsedTokens.NarrowContainerWidth, 80px against the default 96), where the
      items are their icons alone because no label fits under a 56px indicator at that width; the
      labels stay in the accessibility tree, since they are what name the destinations, and a
-     narrow rail expands to the default 16rem; `menu` shows the menu button (by default for `collapsible`,
+     narrow rail expands to the default 16rem; `align` is `top` (the default) or `center`, which
+     puts the destinations at the rail's vertical centre — M3 prefers that on a tablet, for reach —
+     while the menu button, the brand and the FAB stay at the top and the footer at the foot, as M3
+     asks; more destinations than fit go back to the top rather than out of reach above the
+     scroller; `menu` shows the menu button (by default for `collapsible`,
      `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,
@@ -78,6 +82,7 @@
     'mode' => 'collapsible',
     'label' => null,
     'width' => '16rem',
+    'align' => 'top',
     'menu' => null,
     'divider' => false,
     'fill' => true,
@@ -91,11 +96,13 @@
     $collapsedAtFirst = in_array($mode, ['collapsed', 'modal'], true);
     $narrow = $width === 'narrow';
     $width = $narrow ? '16rem' : $width;
+    $centred = $align === 'center';
 @endphp
 
 <div
     data-navigation-rail="{{ $mode }}"
     @if ($narrow) data-width="narrow" @endif
+    @if ($centred) data-align="center" @endif
     @if ($divider) data-divider @endif
     @unless ($fill) data-fill="false" @endunless
     @if ($interactive)

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

@@ -58,7 +58,7 @@
                 </div>
             </div>
             BLADE,
-        'Collapsed, narrow and expanded rails' => <<<'BLADE'
+        'Collapsed, narrow (centred) 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" divider>
@@ -81,7 +81,7 @@
                 </div>
 
                 <div class="flex h-[36rem] overflow-hidden rounded-corner-lg border border-outline-variant">
-                    <x-navigation-rail mode="collapsed" width="narrow" label="Narrow example" divider>
+                    <x-navigation-rail mode="collapsed" width="narrow" align="center" label="Narrow example" divider>
                         <x-slot:header>
                             <x-fab label="Compose" icon="edit" />
                         </x-slot:header>