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/button-group.blade.php

@@ -0,0 +1,42 @@
+{{-- An M3 Expressive button group: related `<x-button>`s in a row.
+
+         <x-button-group size="md" label="Text formatting">
+             <x-button icon="format_bold" aria-label="Bold" variant="tonal" :selected="$bold" wire:click="toggleBold" />
+             …
+         </x-button-group>
+
+     Standard (the default): the buttons stand apart, and pressing a label button widens it while
+     its neighbours give way. `connected`: 2px apart with small inner corners, the shape that
+     replaced M3's segmented button; a selected (aria-pressed) button rounds fully. Give `size`
+     the size of the buttons inside, so the spacing and corners match. For a choice bound to a
+     property, `<x-group>` draws a connected group of radios.
+
+     Spacing from the M3 Expressive spec (ButtonGroupSmallTokens: 12px at the small size). The
+     shapes are resources/css/components/groups.css. --}}
+
+@props([
+    'connected' => false,
+    'size' => 'sm',
+    'label' => null,
+])
+
+@php
+    $size = in_array($size, ['xs', 'sm', 'md', 'lg', 'xl'], true) ? $size : 'sm';
+@endphp
+
+<div
+    role="group"
+    @if ($label) aria-label="{{ $label }}" @endif
+    data-button-group="{{ $connected ? 'connected' : 'standard' }}"
+    data-size="{{ $size }}"
+    {{ $attributes->class([
+        'inline-flex items-center',
+        'gap-0.5' => $connected,
+        'flex-wrap' => ! $connected,
+        'gap-[18px]' => ! $connected && $size === 'xs',
+        'gap-3' => ! $connected && $size === 'sm',
+        'gap-2' => ! $connected && in_array($size, ['md', 'lg', 'xl'], true),
+    ]) }}
+>
+    {{ $slot }}
+</div>