Add buttons, menus and the rest of M3 Expressive's actions

<x-button> (label buttons, icon buttons and toggles in five sizes, with
filled, tonal, outlined, elevated and text variants in any colour role),
<x-tooltip>, <x-menu> with items, groups and separators, <x-button-group>,
<x-group> as a connected button group, <x-split-button>, <x-fab>,
<x-fab-menu> and <x-loading>. Sizes, colours and shapes come from
androidx Compose Material 3's tokens; the loading indicator ports its
Morph into SVG + SMIL.

Menus follow WAI-ARIA's menu button pattern on popovers placed by CSS
anchor positioning. Browser tests run in Chromium, Firefox and WebKit.
The showcase fetches the icon names on demand: inlined, they tripped
Pest's test server into HTTP 431s under Firefox.

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

resources/views/components/fab.blade.php

@@ -0,0 +1,78 @@
+{{-- An M3 Expressive floating action button: the screen's primary action.
+
+     With only an `icon` it is a FAB — `size` `sm` 56px (the default; M3's deprecated small FAB is
+     gone, so this is the baseline FAB), `md` 80px, `lg` 96px. With a `label` it is an extended
+     FAB at the same three heights. `color` is `primary` (the default), `secondary` or `tertiary`,
+     drawn in its container, or in the colour itself with `variant="filled"`.
+
+     It does not place itself: put it where the layout wants it, e.g.
+     `<div class="fixed end-4 bottom-4"><x-fab icon="add" tooltip="New share" /></div>`. For a
+     create action that is a FAB on a phone and a header button above, use `<x-button fab>`.
+
+     Sizes, corners and elevation from FabBaseline/Medium/LargeTokens and ExtendedFab*Tokens
+     (androidx Compose Material 3, Apache-2.0). --}}
+
+@props([
+    'icon' => null,
+    'label' => null,
+    'size' => 'sm',
+    'color' => 'primary',
+    'variant' => 'container',
+    'link' => null,
+    'external' => false,
+    'tooltip' => null,
+    'disabled' => false,
+    'type' => 'button',
+])
+
+@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();
+    $isLink = filled($link);
+
+    $colours = $variant === 'filled'
+        ? ['primary' => 'bg-primary text-on-primary', 'secondary' => 'bg-secondary text-on-secondary', 'tertiary' => 'bg-tertiary text-on-tertiary'][$color]
+        : ['primary' => 'bg-primary-container text-on-primary-container', 'secondary' => 'bg-secondary-container text-on-secondary-container', 'tertiary' => 'bg-tertiary-container text-on-tertiary-container'][$color];
+
+    $dimensions = $extended
+        ? ['sm' => 'h-14 min-w-14 gap-2 px-4 rounded-corner-lg type-title-md', 'md' => 'h-20 min-w-20 gap-3 px-[26px] rounded-corner-lg-increased type-title-lg', 'lg' => 'h-24 min-w-24 gap-4 px-7 rounded-corner-xl type-headline-sm'][$size]
+        : ['sm' => 'size-14 rounded-corner-lg', 'md' => 'size-20 rounded-corner-lg-increased', 'lg' => 'size-24 rounded-corner-xl'][$size];
+
+    $iconSize = ['sm' => 'size-6', 'md' => 'size-7', 'lg' => 'size-8'][$size];
+    $anchor = $tooltip !== null ? '--material-fab-'.\Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10)) : null;
+    $tag = $isLink ? 'a' : 'button';
+
+    $attributes = $attributes
+        ->class([
+            'state-layer focus-ring inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap',
+            'shadow-elevation-3 hover:shadow-elevation-4 transition-[box-shadow,background-color,color] duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast',
+            $dimensions,
+            $colours,
+            'disabled:cursor-not-allowed disabled:bg-on-surface/10 disabled:text-on-surface/38 disabled:shadow-none',
+        ])
+        ->merge(array_filter([
+            'href' => $isLink ? $link : null,
+            'target' => $isLink && $external ? '_blank' : null,
+            'rel' => $isLink && $external ? 'noopener' : null,
+            'wire:navigate' => $isLink && ! $external && ! $attributes->has('wire:navigate') ? true : null,
+            'type' => $isLink ? null : $type,
+            'disabled' => ! $isLink && $disabled ? true : null,
+            'aria-label' => ! $extended && ! $attributes->has('aria-label') ? $tooltip : null,
+            'style' => $anchor ? "anchor-name: {$anchor}" : null,
+        ], fn ($value): bool => $value !== null));
+@endphp
+
+<{{ $tag }} {{ $attributes }}>
+    @if ($icon)
+        <x-icon :name="$icon" :class="$iconSize" />
+    @endif
+
+    @if ($extended)
+        <span>{{ $label ?? $slot }}</span>
+    @endif
+
+    @if ($tooltip !== null)
+        <x-tooltip :text="$tooltip" :anchor="$anchor" />
+    @endif
+</{{ $tag }}>