Draw the FAB menu item without Tailwind

<x-fab-menu-item> renders data-md-fab-menu-item and data-md-color
with no class list; fab-menu-item.css draws FabMenuBaselineTokens'
56px pill, 24px sides, 24px icon, full corner and elevation 3, and
the entry/exit rise-and-sink transition (ACT-33) that fab-menu.css's
[data-md-fab-menu]:not(:popover-open) rule will drive once the FAB
menu itself is rewritten. Its tests move out of FabTest.php into a
new FabMenuTest.php (plan step 36, actions).

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

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

@@ -1,6 +1,13 @@
 {{-- One action in an `<x-fab-menu>`: a 56px pill with an icon and a label, rising into place as
-     the menu opens. `link` makes it an anchor (with `wire:navigate` unless `external`); `color`
-     should match the menu's. --}}
+     the menu opens and sinking back as it closes (fab-menu.css drives the exit from the popover's
+     own open state). `link` makes it an anchor (with `wire:navigate` unless `external`); `color`
+     should match the menu's.
+
+     FabMenuBaselineTokens (androidx Compose Material 3, Apache-2.0): 56px tall, 24px either side,
+     8px between the icon and the label, 24px icons, full corner, elevation 3.
+
+     Drawn by resources/css/components/fab-menu-item.css from `data-md-fab-menu-item` and
+     `data-md-color`. --}}
 
 @props([
     'label' => null,
@@ -13,34 +20,24 @@
 @php
     $isLink = filled($link);
     $tag = $isLink ? 'a' : 'button';
+    $color = in_array($color, ['primary', 'secondary', 'tertiary'], true) ? $color : 'primary';
 
-    $colours = [
-        'primary' => 'bg-primary-container text-on-primary-container',
-        'secondary' => 'bg-secondary-container text-on-secondary-container',
-        'tertiary' => 'bg-tertiary-container text-on-tertiary-container',
-    ][in_array($color, ['primary', 'secondary', 'tertiary'], true) ? $color : 'primary'];
-
-    $attributes = $attributes
-        ->class([
-            'state-layer inline-flex h-14 shrink-0 cursor-pointer items-center gap-2 rounded-corner-full px-6 whitespace-nowrap type-title-md shadow-elevation-3 outline-none',
-            'focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-secondary',
-            'transition-[translate,opacity] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast starting:translate-y-2 starting:opacity-0',
-            $colours,
-        ])
-        ->merge(array_filter([
-            'role' => 'menuitem',
-            'tabindex' => '-1',
-            'type' => $isLink ? null : 'button',
-            'href' => $isLink ? $link : null,
-            'target' => $isLink && $external ? '_blank' : null,
-            'rel' => $isLink && $external ? 'noopener' : null,
-            'wire:navigate' => $isLink && ! $external && ! $attributes->has('wire:navigate') ? true : null,
-        ], fn ($value): bool => $value !== null));
+    $attributes = $attributes->merge(array_filter([
+        'data-md-fab-menu-item' => true,
+        'data-md-color' => $color,
+        'role' => 'menuitem',
+        'tabindex' => '-1',
+        'type' => $isLink ? null : 'button',
+        'href' => $isLink ? $link : null,
+        'target' => $isLink && $external ? '_blank' : null,
+        'rel' => $isLink && $external ? 'noopener' : null,
+        'wire:navigate' => $isLink && ! $external && ! $attributes->has('wire:navigate') ? true : null,
+    ], fn ($value): bool => $value !== null));
 @endphp
 
 <{{ $tag }} {{ $attributes }}>
     @if ($icon)
-        <x-livewire-material::icon :name="$icon" class="size-6" />
+        <x-livewire-material::icon :name="$icon" size="24" />
     @endif
 
     <span>{{ $label ?? $slot }}</span>