Collapse an extended FAB to a FAB while the page scrolls

Plan step 22, actions.md § Missing (FAB to extended FAB scroll collapse):
M3 has an extended FAB collapse to a FAB on scroll-down and re-extend on
scroll-up, and `<x-button fab>` only swapped on window width.

`<x-fab collapse-on-scroll>` (extended, with an icon) takes a
`materialFab` flag from the new resources/js/fab.js, which reads the
window's scroll once a frame, ignores moves under 8px and extends again
near the top. The morph is CSS in actions.css: the label sits in a grid
track that closes to zero, the gap and minimum width follow on the
default spatial spring, and the label fades on the effects one; reduced
motion swaps outright through the motion tokens. The label is clipped, not
removed, so the collapsed FAB keeps its accessible name.

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

resources/views/components/fab.blade.php

@@ -20,6 +20,14 @@
      `data-fab` marks the root, so a place a FAB sits in can draw it its own way: a navigation
      rail flattens a nested FAB to elevation 0.
 
+     `collapse-on-scroll` is M3's extended FAB that "can collapse to a FAB on scroll-down and
+     re-expand to extended on scroll-up": while the window scrolls down it shrinks to the FAB of
+     its size, and it extends again when the page scrolls back up or reaches the top. The label
+     closes and fades while the width follows it on the spatial spring (resources/css/components/
+     actions.css); under reduced motion the two swap outright. The label stays in the page,
+     clipped rather than removed, so the collapsed FAB keeps its accessible name. It needs an
+     `icon` — a FAB with no glyph is no FAB — and does nothing on a plain FAB.
+
      Sizes, corners and elevation from FabBaseline/Medium/LargeTokens and ExtendedFab*Tokens
      (androidx Compose Material 3, Apache-2.0). --}}
 
@@ -33,12 +41,14 @@
     'external' => false,
     'tooltip' => null,
     'type' => 'button',
+    'collapseOnScroll' => false,
 ])
 
 @php
     $size = in_array($size, ['sm', 'md', 'lg'], true) ? $size : 'sm';
     $color = in_array($color, ['primary', 'secondary', 'tertiary'], true) ? $color : 'primary';
     $extended = filled($label) || $slot->isNotEmpty();
+    $collapsing = $collapseOnScroll && $extended && filled($icon);
     $isLink = filled($link);
 
     $colours = $variant === 'filled'
@@ -68,6 +78,10 @@
             'type' => $isLink ? null : $type,
             // The hook a place uses to draw a nested FAB its own way: a rail flattens it to 0dp.
             'data-fab' => true,
+            'x-data' => $collapsing ? 'materialFab' : null,
+            'x-bind:data-collapsed' => $collapsing ? "collapsed ? '' : null" : null,
+            'data-fab-collapsible' => $collapsing ? true : null,
+            'data-fab-size' => $collapsing ? $size : null,
             'aria-label' => ! $extended && ! $attributes->has('aria-label') ? $tooltip : null,
             'style' => $anchor ? "anchor-name: {$anchor}" : null,
         ], fn ($value): bool => $value !== null));
@@ -78,7 +92,9 @@
         <x-livewire-material::icon :name="$icon" filled :class="$iconSize" />
     @endif
 
-    @if ($extended)
+    @if ($collapsing)
+        <span data-fab-label><span>{{ $label ?? $slot }}</span></span>
+    @elseif ($extended)
         <span>{{ $label ?? $slot }}</span>
     @endif