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
2026-09-13 06:09:28 +02:00
parent b48e879254
commit cd64f4f371
46 changed files with 2968 additions and 36 deletions
@@ -0,0 +1,71 @@
+<?php
+
+it('opens a popover menu from its trigger', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-menu label="Share actions">
+            <x-slot:trigger><button>More</button></x-slot:trigger>
+            <x-menu-item label="Copy link" icon="content_copy" />
+        </x-menu>
+        BLADE);
+
+    preg_match('/anchor-name: (--material-menu-([a-z0-9]+))/', $html, $anchor);
+
+    expect($anchor)->not->toBeEmpty()
+        ->and($html)
+        ->toContain('x-data="materialMenu"')
+        ->toContain('<button>More</button>')
+        ->toContain('popover="auto"')
+        ->toContain('role="menu"')
+        ->toContain('aria-label="Share actions"')
+        ->toContain("id=\"material-menu-{$anchor[2]}\"")
+        ->toContain("position-anchor: {$anchor[1]}")
+        ->toContain('bg-surface-container-low')
+        ->toContain('[position-area:bottom_span-right]');
+});
+
+it('opens at the position asked for, in the vibrant colours on request', function () {
+    $html = (string) $this->blade('<x-menu position="top-end" vibrant><x-slot:trigger><button>x</button></x-slot:trigger></x-menu>');
+
+    expect($html)->toContain('[position-area:top_span-left]')->toContain('bg-tertiary-container text-on-tertiary-container');
+});
+
+it('draws an item as a menuitem button', function () {
+    $html = (string) $this->blade('<x-menu-item label="Download" icon="download" shortcut="⌘D" description="As a ZIP" wire:click="download" />');
+
+    expect($html)
+        ->toContain('role="menuitem"')
+        ->toContain('tabindex="-1"')
+        ->toContain('type="button"')
+        ->toContain('wire:click="download"')
+        ->toContain('Download')
+        ->toContain('⌘D')
+        ->toContain('As a ZIP')
+        ->toContain('size-5 text-on-surface-variant');
+});
+
+it('makes a selectable item a menuitemcheckbox', function () {
+    expect((string) $this->blade('<x-menu-item label="Newest" :selected="true" keep-open />'))
+        ->toContain('role="menuitemcheckbox"')
+        ->toContain('aria-checked="true"')
+        ->toContain('bg-tertiary-container')
+        ->toContain('data-keep-open')
+        ->and((string) $this->blade('<x-menu-item label="Largest" :selected="false" />'))
+        ->toContain('aria-checked="false"');
+});
+
+it('links an item, and keeps a disabled one out of reach', function () {
+    $this->blade('<x-menu-item label="Settings" link="/settings" />')
+        ->assertSee('href="/settings"', false)
+        ->assertSee('wire:navigate', false);
+
+    $this->blade('<x-menu-item label="Reset" disabled />')
+        ->assertSee('aria-disabled="true"', false)
+        ->assertSee('pointer-events-none', false);
+});
+
+it('separates and labels groups', function () {
+    $this->blade('<x-menu-separator />')->assertSee('role="separator"', false);
+
+    $this->blade('<x-menu-group label="Sort by"><x-menu-item label="Newest" /></x-menu-group>')
+        ->assertSee('role="group" aria-label="Sort by"', false);
+});