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
2026-09-14 16:18:18 +02:00
parent 5cdeec26e8
commit 330b835043
6 changed files with 194 additions and 52 deletions
@@ -0,0 +1,100 @@
+/*
+ * <x-fab-menu-item>: one action in an `<x-fab-menu>`, a pill that rises into place as the menu
+ * opens and sinks back as it closes.
+ *
+ * FabMenuBaselineTokens (androidx Compose Material 3, Apache-2.0): 56px tall, 24px either side,
+ * 8px between the icon and the label, 24px icons, full corner, elevation 3, `data-md-color`'s
+ * container.
+ *
+ * The entry is `@starting-style` on the item itself; the exit needs the state to be readable
+ * while the popover is on its way out, which `[data-md-fab-menu]:not(:popover-open) > *`
+ * (fab-menu.css) drives from the popover's own open state — the popover keeps `display: flex` for
+ * the length of its own discrete transition, so the item has somewhere to animate to (ACT-33).
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './icon.css';
+
+@layer material.components {
+    [data-md-fab-menu-item] {
+        --md-fab-menu-item-container: var(--md-sys-color-primary-container);
+        --md-fab-menu-item-on-container: var(--md-sys-color-on-primary-container);
+
+        position: relative;
+        isolation: isolate;
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        gap: var(--md-sys-measurement-space100);
+        block-size: var(--md-sys-measurement-space700);
+        padding-inline: var(--md-sys-measurement-space300);
+        border-radius: var(--md-sys-shape-corner-full);
+        background-color: var(--md-fab-menu-item-container);
+        color: var(--md-fab-menu-item-on-container);
+        box-shadow: var(--md-sys-elevation-3);
+        white-space: nowrap;
+        font: var(--md-sys-typescale-title-md);
+        letter-spacing: var(--md-sys-typescale-title-md-tracking);
+        font-variation-settings: normal;
+        cursor: pointer;
+        outline: none;
+        -webkit-user-select: none;
+        user-select: none;
+        translate: 0 0;
+        opacity: 1;
+        transition-property: translate, opacity, display, overlay;
+        transition-duration:
+            var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-effects-default-duration),
+            var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration);
+        transition-timing-function:
+            var(--md-sys-motion-spatial-fast), var(--md-sys-motion-effects-default), linear, linear;
+        transition-behavior: allow-discrete;
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            z-index: -1;
+            border-radius: inherit;
+            background-color: currentColor;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
+        }
+
+        @media (hover: hover) {
+            &:hover::before {
+                opacity: var(--md-sys-state-hover-state-layer-opacity);
+            }
+        }
+
+        &:focus-visible {
+            outline: 3px solid var(--md-sys-color-secondary);
+            outline-offset: 2px;
+        }
+
+        &:focus-visible::before {
+            opacity: var(--md-sys-state-focus-state-layer-opacity);
+        }
+
+        &:active::before {
+            opacity: var(--md-sys-state-pressed-state-layer-opacity);
+        }
+
+        @starting-style {
+            translate: 0 var(--md-sys-measurement-space100);
+            opacity: 0;
+        }
+    }
+
+    [data-md-fab-menu-item][data-md-color='secondary'] {
+        --md-fab-menu-item-container: var(--md-sys-color-secondary-container);
+        --md-fab-menu-item-on-container: var(--md-sys-color-on-secondary-container);
+    }
+
+    [data-md-fab-menu-item][data-md-color='tertiary'] {
+        --md-fab-menu-item-container: var(--md-sys-color-tertiary-container);
+        --md-fab-menu-item-on-container: var(--md-sys-color-on-tertiary-container);
+    }
+}