Name the FAB menu, scroll it, and let its items leave

Its trigger holds two aria-hidden icons and wrote aria-label only when a caller
passed `label`, so an unnamed button was the default; `label` now falls back to
"Toggle menu" and is always written. The list had no ceiling, so six items ran
off a landscape phone — it now scrolls under the FAB, which stays put — and its
items rose into place but vanished on close, because the popover took its
display away before they could move. Plan step 18, actions.md ACT-21, ACT-32,
ACT-33.

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

resources/views/components/fab-menu.blade.php

@@ -1,6 +1,6 @@
 {{-- An M3 Expressive FAB menu: a FAB that opens into a short list of related actions.
 
-         <div class="fixed end-4 bottom-4">
+         <div class="fixed end-4 bottom-4 large:end-6 large:bottom-6">
              <x-fab-menu label="New">
                  <x-fab-menu-item label="Upload files" icon="upload_file" wire:click="uploadFiles" />
                  <x-fab-menu-item label="Upload a folder" icon="drive_folder_upload" wire:click="uploadFolder" />
@@ -10,8 +10,14 @@
      Two to six items. The FAB (`icon`, `add` by default, in `color`'s container) turns into a
      round close button in the colour itself while the list is open above it, end-aligned; the
      list is a `popover="auto"` menu with the menu keyboard of `<x-menu>`. `label` names the FAB
-     for screen readers. Give the items the same `color`. Like `<x-menu>`'s, the list is keyed for
-     Livewire, so it stays open through a render of the component around it.
+     and the menu for screen readers, and defaults to "Toggle menu" — the icons inside the button
+     are aria-hidden, so without it the trigger has no name at all. Give the items the same
+     `color`. Like `<x-menu>`'s, the list is keyed for Livewire, so it stays open through a render
+     of the component around it.
+
+     It does not place itself. M3's margin from the edge of the window is 16dp, and 24dp from the
+     `large` class up: `fixed end-4 bottom-4 large:end-6 large:bottom-6`. A window too short for
+     the list scrolls it; the items rise into place as it opens and sink back as it closes.
 
      FabMenuBaselineTokens (androidx Compose Material 3, Apache-2.0): 56px items, 4px apart, 8px
      above the close button. The FAB's corner and colours morph on the two default springs at once
@@ -25,6 +31,10 @@
 ])
 
 @php
+    // The trigger's only content is two icons, which are aria-hidden, so without a name it is an
+    // unnamed button. M3 asks the FAB's label to say what menu it opens; "Toggle menu" is its own
+    // fallback wording for the close button.
+    $label = filled($label) ? $label : __('Toggle menu');
     $color = in_array($color, ['primary', 'secondary', 'tertiary'], true) ? $color : 'primary';
     $key = \Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
     $anchor = "--material-fab-menu-{$key}";
@@ -44,7 +54,7 @@
     >
         <button
             type="button"
-            @if ($label) aria-label="{{ $label }}" @endif
+            aria-label="{{ $label }}"
             @class([
                 'group/fab state-layer focus-ring inline-flex size-14 shrink-0 cursor-pointer items-center justify-center rounded-corner-lg shadow-elevation-3 hover:shadow-elevation-4',
                 'state-transition-default aria-expanded:rounded-corner-full',
@@ -62,17 +72,23 @@
         id="material-fab-menu-{{ $key }}"
         popover="auto"
         role="menu"
-        @if ($label) aria-label="{{ $label }}" @endif
+        data-fab-menu
+        aria-label="{{ $label }}"
         tabindex="-1"
         style="position-anchor: {{ $anchor }}"
         x-on:keydown="navigate($event)"
         x-on:click="activate($event)"
         @class([
-            'm-0 flex-col gap-1 overflow-visible border-0 bg-transparent p-0 open:flex [inset:auto]',
-            'mb-2 items-end [position-area:top_span-left]' => $position === 'top-end',
-            'mb-2 items-start [position-area:top_span-right]' => $position === 'top-start',
-            'mt-2 items-end [position-area:bottom_span-left]' => $position === 'bottom-end',
-            'mt-2 items-start [position-area:bottom_span-right]' => $position === 'bottom-start',
+            'm-0 flex-col gap-1 border-0 bg-transparent p-2 open:flex [inset:auto]',
+            // A landscape phone has no room for six 56px items: the list scrolls, the FAB below it
+            // does not. The 8px padding is the gap M3 leaves above the FAB and the room the items'
+            // elevation needs inside the scroll box; the negative margins put it back where it was.
+            'max-h-[calc(100dvh-8rem)] overflow-y-auto',
+            'transition-[display,overlay] transition-discrete duration-(--md-sys-motion-spatial-fast-duration)',
+            '-mx-2 -mt-2 items-end [position-area:top_span-left]' => $position === 'top-end',
+            '-mx-2 -mt-2 items-start [position-area:top_span-right]' => $position === 'top-start',
+            '-mx-2 -mb-2 items-end [position-area:bottom_span-left]' => $position === 'bottom-end',
+            '-mx-2 -mb-2 items-start [position-area:bottom_span-right]' => $position === 'bottom-start',
         ])
     >
         {{ $slot }}