Draw the FAB menu without Tailwind

<x-fab-menu> renders data-md-fab-menu with its trigger
data-md-fab-menu-trigger, data-md-color and data-md-position; a
close icon swaps in on aria-expanded instead of Tailwind's group
variant. fab-menu.css draws FabMenuBaselineTokens' 56px trigger,
its round-to-full morph on the default springs (ACT-19), the 8px
list padding and its calc(100dvh-128px) scroll cap behind the fixed
close button (ACT-32), and the [data-md-fab-menu-popover]:not(:popover-open)
rule that drives fab-menu-item's exit (ACT-33) — actions.css's last
two rules, moved here, empty it, so it and its tailwind.css import
are deleted; fab.js's stale reference to it is corrected to fab.css
(plan step 36, actions — the group is now fully off Tailwind).

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

tests/Feature/Components/FabMenuTest.php

@@ -11,21 +11,25 @@ it('opens a FAB menu of end-aligned actions above it', function () {
 
     expect($html)
         ->toContain('x-data="materialMenu"')
+        ->toContain('data-md-fab-menu')
         ->toContain('aria-label="New"')
-        ->toContain('bg-secondary-container text-on-secondary-container aria-expanded:bg-secondary aria-expanded:text-on-secondary')
-        ->toContain('aria-expanded:rounded-corner-full')
-        ->toContain('role="menu"')
-        ->toContain('[position-area:top_span-left]')
-        ->toContain('data-md-fab-menu-item')
+        ->toContain('data-md-fab-menu-trigger')
         ->toContain('data-md-color="secondary"')
+        ->toContain('role="menu"')
+        ->toContain('data-md-fab-menu-popover')
+        ->toContain('data-md-position="top-end"')
+        ->toContain('data-md-fab-menu-item')
         ->toContain('role="menuitem"')
         ->toContain('wire:click="upload"')
         ->toContain('Upload files')
-        ->toContain('max-h-[calc(100dvh-8rem)] overflow-y-auto')
-        ->toContain('data-fab-menu')
-        ->and(ComponentStylesheet::read('fab-menu-item')->declarations('[data-md-fab-menu-item]'))->toMatchArray([
-            'block-size' => 'var(--md-sys-measurement-space700)',
+        ->and(ComponentStylesheet::read('fab-menu')->declarations('[data-md-fab-menu-popover]'))->toMatchArray([
+            'max-block-size' => 'calc(100dvh - 128px)',
+            'overflow-y' => 'auto',
+        ])
+        ->and(ComponentStylesheet::read('fab-menu')->declarations("[data-md-fab-menu-trigger][aria-expanded='true']"))->toBe([
             'border-radius' => 'var(--md-sys-shape-corner-full)',
+            'background-color' => 'var(--md-fab-menu-color)',
+            'color' => 'var(--md-fab-menu-on-color)',
         ]);
 });
 
@@ -35,6 +39,39 @@ it('names the FAB menu even when the caller forgets to', function () {
         ->and(substr_count((string) $this->blade('<x-fab-menu />'), 'aria-label="Toggle menu"'))->toBe(2);
 });
 
+it('swaps its open icon for a close icon while the menu is open', function () {
+    $html = (string) $this->blade('<x-fab-menu icon="add" />');
+    $css = ComponentStylesheet::read('fab-menu');
+
+    expect($html)
+        ->toContain('data-md-fab-menu-icon')
+        ->toContain('data-md-fab-menu-close-icon')
+        ->toContain('--md-icon-size: 20px')
+        ->and($css->declarations('[data-md-fab-menu-close-icon]'))->toBe(['display' => 'none'])
+        ->and($css->declarations("[data-md-fab-menu-trigger][aria-expanded='true'] [data-md-fab-menu-icon]"))->toBe(['display' => 'none'])
+        ->and($css->declarations("[data-md-fab-menu-trigger][aria-expanded='true'] [data-md-fab-menu-close-icon]"))->toBe(['display' => 'inline-flex']);
+});
+
+it('opens at the corner asked for, secondary and tertiary in their own colours', function () {
+    $css = ComponentStylesheet::read('fab-menu');
+
+    expect((string) $this->blade('<x-fab-menu position="bottom-start" />'))->toContain('data-md-position="bottom-start"')
+        ->and($css->declarations("[data-md-fab-menu-popover][data-md-position='bottom-start']"))->toMatchArray(['position-area' => 'bottom span-right'])
+        ->and($css->declarations("[data-md-fab-menu-trigger][data-md-color='tertiary']"))->toBe([
+            '--md-fab-menu-container' => 'var(--md-sys-color-tertiary-container)',
+            '--md-fab-menu-on-container' => 'var(--md-sys-color-on-tertiary-container)',
+            '--md-fab-menu-color' => 'var(--md-sys-color-tertiary)',
+            '--md-fab-menu-on-color' => 'var(--md-sys-color-on-tertiary)',
+        ]);
+});
+
+it('scrolls the list on a short window, behind the close button, which stays fixed', function () {
+    expect(ComponentStylesheet::read('fab-menu')->declarations('[data-md-fab-menu-popover]:not(:popover-open) > *'))->toBe([
+        'translate' => '0 var(--md-sys-measurement-space100)',
+        'opacity' => '0',
+    ]);
+});
+
 it('gives an item its icon, colour and the exit fab-menu.css drives from the popover', function () {
     $html = (string) $this->blade('<x-fab-menu-item label="Upload a folder" icon="drive_folder_upload" color="tertiary" />');
     $css = ComponentStylesheet::read('fab-menu-item');