Draw the FAB menu item without Tailwind

<x-fab-menu-item> renders data-md-fab-menu-item and data-md-color
with no class list; fab-menu-item.css draws FabMenuBaselineTokens'
56px pill, 24px sides, 24px icon, full corner and elevation 3, and
the entry/exit rise-and-sink transition (ACT-33) that fab-menu.css's
[data-md-fab-menu]:not(:popover-open) rule will drive once the FAB
menu itself is rewritten. Its tests move out of FabTest.php into a
new FabMenuTest.php (plan step 36, actions).

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

tests/Feature/Components/ActionStylesheetsTest.php

@@ -23,6 +23,7 @@ dataset('action components', [
     'menu-group',
     'menu-item',
     'menu',
+    'fab-menu-item',
 ]);
 
 it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {

tests/Feature/Components/FabMenuTest.php

@@ -0,0 +1,69 @@
+<?php
+
+use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
+
+it('opens a FAB menu of end-aligned actions above it', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-fab-menu label="New" color="secondary">
+            <x-fab-menu-item label="Upload files" icon="upload_file" color="secondary" wire:click="upload" />
+        </x-fab-menu>
+        BLADE);
+
+    expect($html)
+        ->toContain('x-data="materialMenu"')
+        ->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-color="secondary"')
+        ->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)',
+            'border-radius' => 'var(--md-sys-shape-corner-full)',
+        ]);
+});
+
+it('names the FAB menu even when the caller forgets to', function () {
+    expect((string) $this->blade('<x-fab-menu />'))
+        ->toContain('aria-label="Toggle menu"')
+        ->and(substr_count((string) $this->blade('<x-fab-menu />'), 'aria-label="Toggle menu"'))->toBe(2);
+});
+
+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');
+
+    expect($html)
+        ->toContain('data-md-fab-menu-item')
+        ->toContain('data-md-color="tertiary"')
+        ->toContain('role="menuitem"')
+        ->toContain('tabindex="-1"')
+        ->toContain('type="button"')
+        ->toContain('--md-icon-size: 24px')
+        ->toContain('Upload a folder')
+        ->and($css->declarations("[data-md-fab-menu-item][data-md-color='tertiary']"))->toBe([
+            '--md-fab-menu-item-container' => 'var(--md-sys-color-tertiary-container)',
+            '--md-fab-menu-item-on-container' => 'var(--md-sys-color-on-tertiary-container)',
+        ])
+        ->and($css->declarations('[data-md-fab-menu-item]', ['@starting-style']))->toBe([
+            'translate' => '0 var(--md-sys-measurement-space100)',
+            'opacity' => '0',
+        ]);
+});
+
+it('links a FAB menu item, with wire:navigate unless external', function () {
+    expect((string) $this->blade('<x-fab-menu-item label="Open" link="/open" />'))
+        ->toContain('href="/open"')
+        ->toContain('wire:navigate')
+        ->not->toContain('target="_blank"')
+        ->and((string) $this->blade('<x-fab-menu-item label="Open" link="/open" external />'))
+        ->toContain('target="_blank"')
+        ->toContain('rel="noopener"')
+        ->not->toContain('wire:navigate');
+});

tests/Feature/Components/FabTest.php

@@ -124,30 +124,4 @@ it('cannot be disabled, because M3 says to remove a FAB instead', function () {
         ->and(ComponentStylesheet::read('fab')->css)->not->toContain(':disabled');
 });
 
-it('opens a FAB menu of end-aligned actions above it', function () {
-    $html = (string) $this->blade(<<<'BLADE'
-        <x-fab-menu label="New" color="secondary">
-            <x-fab-menu-item label="Upload files" icon="upload_file" color="secondary" wire:click="upload" />
-        </x-fab-menu>
-        BLADE);
-
-    expect($html)
-        ->toContain('x-data="materialMenu"')
-        ->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('role="menuitem"')
-        ->toContain('wire:click="upload"')
-        ->toContain('h-14')
-        ->toContain('Upload files')
-        ->toContain('max-h-[calc(100dvh-8rem)] overflow-y-auto')
-        ->toContain('data-fab-menu');
-});
-
-it('names the FAB menu even when the caller forgets to', function () {
-    expect((string) $this->blade('<x-fab-menu />'))
-        ->toContain('aria-label="Toggle menu"')
-        ->and(substr_count((string) $this->blade('<x-fab-menu />'), 'aria-label="Toggle menu"'))->toBe(2);
-});
+// The FAB menu itself and its items: tests/Feature/Components/FabMenuTest.php.