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

tests/Browser/ActionsTest.php

@@ -0,0 +1,125 @@
+<?php
+
+const MORE = '#menus [aria-label="More"]';
+
+function showcase()
+{
+    return visit('/material')->waitForEvent('networkidle');
+}
+
+function focused(string $expression): string
+{
+    return "document.activeElement.{$expression}";
+}
+
+it('opens a menu on the first item and walks it with the keyboard', function () {
+    $page = showcase()
+        ->assertNoJavaScriptErrors()
+        ->click(MORE)
+        ->assertAttribute(MORE, 'aria-expanded', 'true')
+        ->assertScript(focused("textContent.trim().startsWith('Copy link')"));
+
+    $page->keys(':focus', ['ArrowDown', 'ArrowDown'])
+        ->assertScript(focused("textContent.trim().startsWith('Rename')"));
+
+    $page->keys(':focus', 'End')
+        ->assertScript(focused("textContent.trim().startsWith('Delete')"));
+
+    $page->keys(':focus', 'ArrowDown')
+        ->assertScript(focused("textContent.trim().startsWith('Copy link')"));
+
+    $page->keys(':focus', 'd')
+        ->assertScript(focused("textContent.trim().startsWith('Download')"));
+
+    $page->keys(':focus', 'Escape')
+        ->assertAttribute(MORE, 'aria-expanded', 'false')
+        ->assertScript(focused("getAttribute('aria-label') === 'More'"));
+});
+
+it('opens a menu from the keyboard, on the last item with ArrowUp', function () {
+    $page = showcase();
+
+    $page->script("document.querySelector('".MORE."').focus()");
+
+    $page->keys(':focus', 'ArrowUp')
+        ->assertAttribute(MORE, 'aria-expanded', 'true')
+        ->assertScript(focused("textContent.trim().startsWith('Delete')"));
+});
+
+it('opens a menu the moment the page can be used', function () {
+    // The guard against a light-dismiss press reopening the menu once measured from the page's
+    // time origin, and swallowed every click in the first quarter second.
+    visit('/material')
+        ->click(MORE)
+        ->assertAttribute(MORE, 'aria-expanded', 'true');
+});
+
+it('closes a menu when an item is chosen, but not one that keeps it open', function () {
+    $page = showcase();
+
+    $page->click(MORE)
+        ->click('#menus [role="menuitem"]:has-text("Download")')
+        ->assertAttribute(MORE, 'aria-expanded', 'false');
+
+    $page->click('#menus button:has-text("Sort")')
+        ->click('#menus [role="menuitemcheckbox"]:has-text("Largest")')
+        ->assertScript("document.querySelector('#menus [role=\"menu\"][aria-label=\"Sort\"]').matches(':popover-open')");
+});
+
+it('shows a tooltip on keyboard focus and hides it on Escape', function () {
+    $tooltip = "document.querySelector('#buttons [aria-label=\"Tonal\"] [popover]')";
+
+    $page = showcase();
+
+    // A key press first, so the browser is in keyboard modality, as a keyboard user would be —
+    // Firefox only counts a scripted focus as :focus-visible after one. Then focused directly
+    // rather than tabbed to: WebKit, like Safari on macOS, leaves buttons out of the Tab order
+    // unless full keyboard access is on.
+    $page->keys('body', 'Tab');
+    $page->script("document.querySelector('#buttons [aria-label=\"Tonal\"]').focus()");
+    $page->assertScript(focused("getAttribute('aria-label') === 'Tonal'"))
+        ->assertScript("{$tooltip}.matches(':popover-open')");
+
+    $page->keys(':focus', 'Escape')
+        ->assertScript("! {$tooltip}.matches(':popover-open')");
+});
+
+it('moves a connected group\'s choice with the arrow keys', function () {
+    $checked = fn (string $value): string => "document.querySelector('#buttons input[name=\"showcase-theme\"][value=\"{$value}\"]').checked";
+
+    $page = showcase();
+
+    $page->script("document.querySelector('#buttons input[name=\"showcase-theme\"][value=\"system\"]').focus()");
+
+    $page->keys(':focus', 'ArrowLeft')
+        ->assertScript($checked('dark'))
+        ->assertScript("getComputedStyle(document.querySelector('#buttons input[value=\"dark\"]').parentElement).borderTopLeftRadius === '9999px'");
+});
+
+it('rounds a split button\'s trailing half while its menu is open', function () {
+    $trailing = "document.querySelector('[data-split=\"trailing\"]')";
+
+    showcase()
+        ->click('[data-split="trailing"] >> nth=0')
+        ->assertScript("{$trailing}.getAttribute('aria-expanded') === 'true'")
+        ->assertScript("getComputedStyle({$trailing}).borderTopLeftRadius === '9999px'");
+});
+
+it('turns the FAB into a close button while its menu is open', function () {
+    $fab = "document.querySelector('button[aria-label=\"New\"]')";
+
+    $page = showcase()
+        ->click('button[aria-label="New"]')
+        ->assertScript("{$fab}.getAttribute('aria-expanded') === 'true'")
+        ->assertScript(focused("textContent.trim() === 'Upload files'"));
+
+    $page->keys(':focus', 'Escape')
+        ->assertScript("{$fab}.getAttribute('aria-expanded') === 'false'")
+        ->assertScript(focused("getAttribute('aria-label') === 'New'"));
+});
+
+it('animates the loading indicator in the browser', function () {
+    $clock = "document.querySelector('#buttons [role=\"progressbar\"] svg').getCurrentTime()";
+
+    showcase()->assertScript("{$clock} > 0.1");
+});

tests/Browser/ThemeTest.php

@@ -20,6 +20,7 @@ it('follows the operating system while the visitor has not chosen', function ()
 
 it('keeps the visitor\'s choice over the operating system', function () {
     $page = visit('/material')->inDarkMode()
+        ->waitForEvent('networkidle')
         ->assertScript(theme('data-theme', 'dark'));
 
     $page->click('@theme-light')