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/showcase/sections/icons.blade.php

@@ -2,16 +2,19 @@
     id="icons"
     class="scroll-mt-24 space-y-6"
     x-data="{
-        names: {{ json_encode(\NoNameWeb\LivewireMaterial\Support\SvgFile::symbolNames()) }},
-        base: '{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols',
+        names: [],
         query: '',
         filled: false,
+        async load() {
+            this.names = await (await fetch('{{ route('livewire-material.symbols', [], false) }}')).json();
+        },
         get matches() {
             const query = this.query.trim().toLowerCase().replaceAll(' ', '_');
 
             return (query === '' ? this.names : this.names.filter((name) => name.includes(query))).slice(0, 120);
         },
     }"
+    x-intersect.once="load()"
 >
     <h2 class="type-headline-md">Icons</h2>
 
@@ -37,7 +40,7 @@
                 <span
                     class="size-6 bg-current"
                     x-bind:style="{
-                        mask: `url('${base}/${filled ? 'filled' : 'outlined'}/${name}.svg') center / contain no-repeat`,
+                        mask: `url('{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols/${filled ? 'filled' : 'outlined'}/${name}.svg') center / contain no-repeat`,
                     }"
                 ></span>
                 <code class="w-full break-all type-label-sm text-on-surface-variant" x-text="name"></code>