@tinybigui/react 0.5.0 → 0.7.0

package/dist/index.cjs

@@ -1710,232 +1710,273 @@ var FABHeadless = React.forwardRef(
     type,
     "aria-label": ariaLabel,
     title,
-    ...props
+    ...restProps
   }, forwardedRef) => {
     const internalRef = React.useRef(null);
     const ref = forwardedRef ?? internalRef;
     const { buttonProps } = reactAria.useButton(
       {
-        ...props,
+        ...restProps,
         elementType: "button"
       },
       ref
     );
-    const domProps = utils.filterDOMProps(props);
-    const mergedProps = utils.mergeProps(buttonProps, domProps, {
-      tabIndex,
-      className,
-      onMouseDown,
-      type: type ?? "button",
-      "aria-label": ariaLabel,
-      // Add aria-label
-      // Add title if provided
-      ...title && { title }
-    });
+    const {
+      isDisabled: _isDisabled,
+      onPress: _onPress,
+      onPressStart: _onPressStart,
+      onPressEnd: _onPressEnd,
+      onPressChange: _onPressChange,
+      onPressUp: _onPressUp,
+      ...htmlAttrs
+    } = restProps;
+    const mergedProps = utils.mergeProps(
+      buttonProps,
+      {
+        tabIndex,
+        className,
+        onMouseDown,
+        "aria-label": ariaLabel,
+        ...title !== void 0 && { title }
+      },
+      htmlAttrs
+    );
     return (
-      // eslint-disable-next-line react/button-has-type
-      /* @__PURE__ */ jsxRuntime.jsx("button", { ...mergedProps, ref, children })
+      // eslint-disable-next-line react/button-has-type -- type is dynamically passed from props
+      /* @__PURE__ */ jsxRuntime.jsx("button", { ...mergedProps, ref, type: type ?? "button", children })
     );
   }
 );
 FABHeadless.displayName = "FABHeadless";
 var fabVariants = classVarianceAuthority.cva(
   [
-    // Base classes (always applied)
-    "relative inline-flex items-center justify-center cursor-pointer",
-    "overflow-hidden",
-    "transition-all duration-200",
-    "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
+    // Layout — NO overflow-hidden here (focus ring must extend outside)
+    "relative inline-flex items-center justify-center cursor-pointer select-none",
     "shrink-0",
-    // Prevent shrinking in flex containers
-    // State layers (hover, focus, active)
-    "before:absolute before:inset-0 before:rounded-[inherit] before:transition-opacity before:duration-200",
-    "before:bg-current before:opacity-0",
-    "hover:before:opacity-8",
-    "focus-visible:before:opacity-12",
-    "active:before:opacity-12",
-    // Elevation (floating appearance)
-    "shadow-elevation-3",
-    // Default elevation
-    "hover:shadow-elevation-4"
-    // Hover elevation
+    // Effects transition: color / bg / shadow — standard spring, no overshoot
+    "transition-[color,background-color,box-shadow]",
+    "duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled — self-targeting data-[x]: selectors (not group-data — these target the root itself)
+    "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38",
+    "data-[disabled]:shadow-none data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
   ],
   {
     variants: {
       /**
-       * FAB size (controls dimensions and icon size)
+       * FAB size — controls container dimensions, corner radius, and icon slot size.
        */
       size: {
-        small: [
-          "h-10 w-10",
-          // 40×40px
-          "p-2",
-          // 8px padding for 24px icon
-          "rounded-xl",
-          // 12px corner radius (not fully rounded!)
-          "m-1"
-          // 4px margin for 48×48px touch target
-        ],
-        medium: [
+        /**
+         * fab (default) — 56×56dp, 16dp corner radius.
+         * MD3 standard FAB.
+         */
+        fab: [
           "h-14 w-14",
-          // 56×56px
-          "p-4",
-          // 16px padding for 24px icon
+          // 56dp
           "rounded-2xl"
-          // 16px corner radius
+          // 16dp corner
+        ],
+        /**
+         * medium — 80×80dp, 20dp corner radius.
+         * M3 Expressive Medium FAB. Previously this value mapped to 56dp;
+         * it is now remapped to the Expressive 80dp Medium FAB.
+         */
+        medium: [
+          "h-20 w-20",
+          // 80dp
+          "rounded-[20px]"
+          // 20dp corner (large-increased shape token)
         ],
+        /**
+         * large — 96×96dp, 28dp corner radius.
+         */
         large: [
           "h-24 w-24",
-          // 96×96px
-          "p-[30px]",
-          // 30px padding for 36px icon
+          // 96dp
           "rounded-[28px]"
-          // 28px corner radius (custom value)
+          // 28dp corner
         ],
+        /**
+         * extended — 56dp height, variable width, 16dp corner.
+         * Icon + text label side by side.
+         * Padding: 16dp leading (icon side), 20dp trailing (text side).
+         * Gap: 12dp between icon and label (MD3 spec).
+         */
         extended: [
           "h-14",
-          // 56px height (same as medium)
+          // 56dp height
           "rounded-2xl",
-          // 16px corner radius
+          // 16dp corner
           "pl-4 pr-5",
-          // Asymmetric padding: 16px leading, 20px trailing
-          "gap-2"
-          // 8px gap between icon and text
+          // 16dp leading, 20dp trailing
+          "gap-3"
+          // 12dp gap between icon and label
+        ],
+        /**
+         * @deprecated Use `fab` (56dp) instead.
+         * small — 40×40dp, 12dp corner radius. No longer recommended in M3 Expressive.
+         * Kept functional for backward compatibility.
+         */
+        small: [
+          "h-10 w-10",
+          // 40dp
+          "rounded-xl",
+          // 12dp corner
+          "m-1"
+          // 4dp margin for 48×48dp minimum touch target
         ]
       },
       /**
-       * Color scheme (MD3 color roles)
+       * FAB color — controls container + on-color.
+       * State-layer color in fabStateLayerVariants must match icon/on-color.
        */
       color: {
-        primary: "",
-        secondary: "",
-        tertiary: "",
-        surface: ""
-      },
-      /**
-       * Disabled state
-       */
-      isDisabled: {
-        true: "pointer-events-none cursor-not-allowed !bg-on-surface/12 !text-on-surface/38 !shadow-none",
-        false: ""
+        "primary-container": [
+          "bg-primary-container text-on-primary-container",
+          // Elevation base=3, hover=4 (state driven), disabled handled by root data-[disabled]
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab:shadow-elevation-4",
+          // Focus / pressed: return to elevation-3
+          // Doubled attribute selector gives higher specificity than single hover selector
+          "group-data-[focus-visible]/fab:shadow-elevation-3",
+          "group-data-[pressed]/fab:group-data-[pressed]/fab:shadow-elevation-3"
+        ],
+        "secondary-container": [
+          "bg-secondary-container text-on-secondary-container",
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab:shadow-elevation-4",
+          "group-data-[focus-visible]/fab:shadow-elevation-3",
+          "group-data-[pressed]/fab:group-data-[pressed]/fab:shadow-elevation-3"
+        ],
+        "tertiary-container": [
+          "bg-tertiary-container text-on-tertiary-container",
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab:shadow-elevation-4",
+          "group-data-[focus-visible]/fab:shadow-elevation-3",
+          "group-data-[pressed]/fab:group-data-[pressed]/fab:shadow-elevation-3"
+        ],
+        primary: [
+          "bg-primary text-on-primary",
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab:shadow-elevation-4",
+          "group-data-[focus-visible]/fab:shadow-elevation-3",
+          "group-data-[pressed]/fab:group-data-[pressed]/fab:shadow-elevation-3"
+        ],
+        secondary: [
+          "bg-secondary text-on-secondary",
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab:shadow-elevation-4",
+          "group-data-[focus-visible]/fab:shadow-elevation-3",
+          "group-data-[pressed]/fab:group-data-[pressed]/fab:shadow-elevation-3"
+        ],
+        tertiary: [
+          "bg-tertiary text-on-tertiary",
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab:shadow-elevation-4",
+          "group-data-[focus-visible]/fab:shadow-elevation-3",
+          "group-data-[pressed]/fab:group-data-[pressed]/fab:shadow-elevation-3"
+        ],
+        /** @deprecated Use `primary-container` instead. */
+        surface: [
+          "bg-surface-container-high text-primary",
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab:shadow-elevation-4",
+          "group-data-[focus-visible]/fab:shadow-elevation-3",
+          "group-data-[pressed]/fab:group-data-[pressed]/fab:shadow-elevation-3"
+        ]
       }
     },
-    /**
-     * Compound variants - combinations of size + color
-     */
-    compoundVariants: [
-      // ====================
-      // PRIMARY COLOR
-      // ====================
-      {
-        color: "primary",
-        size: "small",
-        className: "bg-primary-container text-on-primary-container"
-      },
-      {
-        color: "primary",
-        size: "medium",
-        className: "bg-primary-container text-on-primary-container"
-      },
-      {
-        color: "primary",
-        size: "large",
-        className: "bg-primary-container text-on-primary-container"
-      },
-      {
-        color: "primary",
-        size: "extended",
-        className: "bg-primary-container text-on-primary-container"
-      },
-      // ====================
-      // SECONDARY COLOR
-      // ====================
-      {
-        color: "secondary",
-        size: "small",
-        className: "bg-secondary-container text-on-secondary-container"
-      },
-      {
-        color: "secondary",
-        size: "medium",
-        className: "bg-secondary-container text-on-secondary-container"
-      },
-      {
-        color: "secondary",
-        size: "large",
-        className: "bg-secondary-container text-on-secondary-container"
-      },
-      {
-        color: "secondary",
-        size: "extended",
-        className: "bg-secondary-container text-on-secondary-container"
-      },
-      // ====================
-      // TERTIARY COLOR
-      // ====================
-      {
-        color: "tertiary",
-        size: "small",
-        className: "bg-tertiary-container text-on-tertiary-container"
-      },
-      {
-        color: "tertiary",
-        size: "medium",
-        className: "bg-tertiary-container text-on-tertiary-container"
-      },
-      {
-        color: "tertiary",
-        size: "large",
-        className: "bg-tertiary-container text-on-tertiary-container"
-      },
-      {
-        color: "tertiary",
-        size: "extended",
-        className: "bg-tertiary-container text-on-tertiary-container"
-      },
-      // ====================
-      // SURFACE COLOR
-      // ====================
-      {
-        color: "surface",
-        size: "small",
-        className: "bg-surface text-primary"
-      },
-      {
-        color: "surface",
-        size: "medium",
-        className: "bg-surface text-primary"
-      },
-      {
-        color: "surface",
-        size: "large",
-        className: "bg-surface text-primary"
+    defaultVariants: {
+      size: "fab",
+      color: "primary-container"
+    }
+  }
+);
+var fabStateLayerVariants = classVarianceAuthority.cva(
+  [
+    "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+    // Effects transition — opacity must not overshoot
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Hover: 8%
+    "group-data-[hovered]/fab:opacity-8",
+    // Focus: 10%
+    "group-data-[focus-visible]/fab:opacity-10",
+    // Pressed: 10% — doubled selector wins over hover's 8%
+    "group-data-[pressed]/fab:group-data-[pressed]/fab:opacity-10",
+    // No state layer when disabled
+    "group-data-[disabled]/fab:hidden"
+  ],
+  {
+    variants: {
+      color: {
+        "primary-container": "bg-on-primary-container",
+        "secondary-container": "bg-on-secondary-container",
+        "tertiary-container": "bg-on-tertiary-container",
+        primary: "bg-on-primary",
+        secondary: "bg-on-secondary",
+        tertiary: "bg-on-tertiary",
+        /** @deprecated */
+        surface: "bg-primary"
+      }
+    },
+    defaultVariants: { color: "primary-container" }
+  }
+);
+var fabFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-[-3px] rounded-[inherit]",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  // Effects transition — opacity change must not overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/fab:opacity-100"
+]);
+var fabIconVariants = classVarianceAuthority.cva(
+  [
+    "relative z-10 inline-flex shrink-0 items-center justify-center",
+    // Color transition uses effects token (no spatial overshoot on color)
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+  ],
+  {
+    variants: {
+      size: {
+        fab: "size-6",
+        // 24dp
+        medium: "size-7",
+        // 28dp
+        large: "size-9",
+        // 36dp
+        extended: "size-6",
+        // 24dp
+        small: "size-6"
+        // 24dp
       },
-      {
-        color: "surface",
-        size: "extended",
-        className: "bg-surface text-primary"
+      hidden: {
+        true: "invisible",
+        false: ""
       }
-    ],
-    /**
-     * Default variants
-     */
+    },
     defaultVariants: {
-      size: "medium",
-      color: "primary",
-      isDisabled: false
+      size: "fab",
+      hidden: false
     }
   }
 );
+var fabLabelVariants = classVarianceAuthority.cva([
+  "relative z-10 inline-flex items-center",
+  "text-label-large tracking-[0.1px]"
+]);
 var Spinner2 = () => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
     role: "progressbar",
     "aria-label": "Loading",
-    className: "h-6 w-6 animate-spin",
+    className: "relative z-10 animate-spin",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    style: { fontSize: "inherit" },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1951,80 +1992,98 @@ var Spinner2 = () => /* @__PURE__ */ jsxRuntime.jsxs(
 );
 var FAB = React.forwardRef(
   ({
-    // Variant props (CVA)
-    size = "medium",
-    color = "primary",
-    // FAB specific props
+    // Variant props
+    size = "fab",
+    color = "primary-container",
+    // Content
     icon,
     children,
-    "aria-label": ariaLabel,
+    // State
     loading = false,
     disableRipple = false,
+    isDisabled = false,
+    // Styling
     className,
-    // React Aria props
-    isDisabled: propIsDisabled = false,
-    onPress,
-    onMouseDown,
+    // Accessibility
+    "aria-label": ariaLabel,
     title,
+    // Passthrough — forwarded to FABHeadless
+    tabIndex = 0,
+    type = "button",
+    // Passed through to FABHeadless → useButton
     ...props
   }, ref) => {
+    const fabRef = React.useRef(null);
+    const resolvedRef = ref ?? fabRef;
+    const isFABDisabled = isDisabled || loading;
+    const [isPressed, setIsPressed] = React.useState(false);
+    const handlePressStart = React.useCallback(() => setIsPressed(true), []);
+    const handlePressEnd = React.useCallback(() => setIsPressed(false), []);
+    const { isHovered, hoverProps } = reactAria.useHover({ isDisabled: isFABDisabled });
+    const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+    const { onMouseDown: handleRipple, ripples } = useRipple({
+      disabled: isFABDisabled || disableRipple
+    });
     if (process.env.NODE_ENV === "development") {
       if (!icon) {
-        console.warn("[FAB] FAB must have an icon. Please provide the icon prop.");
+        console.warn("[FAB] FAB must have an icon. Please provide the `icon` prop.");
       }
       if (size === "extended" && !children) {
-        console.warn("[FAB] Extended FAB requires text label as children.");
+        console.warn("[FAB] Extended FAB requires a text label as `children`.");
       }
       if (size !== "extended" && children) {
         console.warn(
-          "[FAB] Children (text) is only used for extended FAB. For icon-only FAB, use icon prop only."
+          "[FAB] `children` (text label) is only rendered for `size='extended'`. For icon-only FABs, use the `icon` prop only."
+        );
+      }
+      if (size === "small") {
+        console.warn(
+          "[FAB] `size='small'` is deprecated in M3 Expressive. Use `size='fab'` (56dp) instead."
+        );
+      }
+      if (color === "surface") {
+        console.warn(
+          "[FAB] `color='surface'` is deprecated in M3 Expressive. Use `color='primary-container'` instead."
         );
       }
     }
-    const isDisabled = propIsDisabled || loading;
-    const { onMouseDown: handleRipple, ripples } = useRipple({
-      disabled: isDisabled || disableRipple
-    });
-    const mergedOnMouseDown = (e) => {
-      onMouseDown?.(e);
-      handleRipple(e);
-    };
-    const mergedPropsValue = utils.mergeProps(props, {
-      ...onPress && { onPress },
-      onMouseDown: mergedOnMouseDown,
-      isDisabled
-    });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       FABHeadless,
       {
-        ref,
+        ...reactAria.mergeProps(
+          hoverProps,
+          focusProps,
+          { onPressStart: handlePressStart, onPressEnd: handlePressEnd },
+          props
+        ),
+        ref: resolvedRef,
+        type,
+        isDisabled: isFABDisabled,
+        tabIndex,
+        onMouseDown: handleRipple,
+        "aria-label": ariaLabel,
+        ...title !== void 0 && { title },
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isDisabled: isFABDisabled
+        }),
+        "data-with-icon": icon ? "" : void 0,
+        "data-loading": loading ? "" : void 0,
         className: cn(
-          // Base classes
-          "relative inline-flex items-center justify-center",
-          "overflow-hidden transition-all duration-200",
-          "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
-          "shrink-0",
-          // State layers (hover, focus, active)
-          "before:absolute before:inset-0 before:rounded-[inherit] before:transition-opacity before:duration-200",
-          "before:bg-current before:opacity-0",
-          "hover:before:opacity-8",
-          "focus-visible:before:opacity-12",
-          "active:before:opacity-12",
-          // Elevation
-          "shadow-elevation-3 hover:shadow-elevation-4",
-          // CVA variants
-          fabVariants({ size, color, isDisabled }),
-          // User custom classes
+          fabVariants({ size, color }),
+          // group/fab: enables group-data-[x]/fab child selectors in all slots
+          "group/fab",
           className
         ),
-        "aria-label": ariaLabel,
-        ...title && { title },
-        ...mergedPropsValue,
         children: [
           ripples,
-          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("relative z-10 inline-flex shrink-0", loading && "invisible"), children: icon }),
-          loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner2, {}) }),
-          size === "extended" && children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 inline-flex items-center text-sm font-medium tracking-[0.1px]", children })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(fabStateLayerVariants({ color })), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(fabFocusRingVariants()), "aria-hidden": "true" }),
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(fabIconVariants({ size, hidden: loading })), children: icon }),
+          loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(fabIconVariants({ size })), children: /* @__PURE__ */ jsxRuntime.jsx(Spinner2, {}) }),
+          size === "extended" && children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(fabLabelVariants()), children })
         ]
       }
     );
@@ -9276,13 +9335,30 @@ var FABMenuHeadless = React.forwardRef(
   }
 );
 FABMenuHeadless.displayName = "FABMenuHeadless";
-var fabMenuVariants = classVarianceAuthority.cva(["relative", "inline-flex", "items-end"], {
+var fabMenuVariants = classVarianceAuthority.cva(["relative", "inline-flex"]);
+var fabMenuListVariants = classVarianceAuthority.cva(["absolute", "z-10", "flex", "gap-3"], {
   variants: {
     direction: {
-      up: ["flex-col-reverse", "gap-3"],
-      down: ["flex-col", "gap-3"],
-      left: ["flex-row-reverse", "gap-3", "items-center"],
-      right: ["flex-row", "gap-3", "items-center"]
+      up: ["bottom-full", "mb-3", "end-0", "flex-col-reverse", "items-end", "origin-bottom"],
+      down: ["top-full", "mt-3", "end-0", "flex-col", "items-end", "origin-top"],
+      left: [
+        "end-full",
+        "me-3",
+        "top-1/2",
+        "-translate-y-1/2",
+        "flex-row-reverse",
+        "items-center",
+        "origin-right"
+      ],
+      right: [
+        "start-full",
+        "ms-3",
+        "top-1/2",
+        "-translate-y-1/2",
+        "flex-row",
+        "items-center",
+        "origin-left"
+      ]
     }
   },
   defaultVariants: {
@@ -9290,19 +9366,129 @@ var fabMenuVariants = classVarianceAuthority.cva(["relative", "inline-flex", "it
   }
 });
 var fabMenuItemVariants = classVarianceAuthority.cva(
-  ["relative", "flex", "items-center", "gap-3", "cursor-pointer"],
+  [
+    // Layout — full-rounded pill, NO overflow-hidden (focus ring extends outside)
+    "relative inline-flex items-center cursor-pointer select-none",
+    "rounded-full",
+    "h-14 pl-4 pr-5 gap-3",
+    // 56dp height, 16dp leading, 20dp trailing, 12dp gap
+    // Effects transition for color/bg/shadow
+    "transition-[color,background-color,box-shadow]",
+    "duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled — self-targeting data-[x]: selectors
+    "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38",
+    "data-[disabled]:shadow-none data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
+  ],
   {
     variants: {
-      isOpen: {
-        true: ["pointer-events-auto", "opacity-100"],
-        false: ["pointer-events-none", "opacity-0"]
+      /**
+       * Color role — controls container background, text color, and elevation.
+       * State-layer color must equal the on-color (see fabMenuItemStateLayerVariants).
+       *
+       * Elevation per state:
+       *   base   → elevation-3
+       *   hover  → elevation-4 (group-data-[hovered]/fab-menu-item)
+       *   focus  → elevation-3 (doubled selector wins over hover)
+       *   pressed→ elevation-3 (doubled selector wins over hover)
+       *   disabled → shadow-none (self-targeting data-[disabled])
+       */
+      color: {
+        "primary-container": [
+          "bg-primary-container text-on-primary-container",
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab-menu-item:shadow-elevation-4",
+          "group-data-[focus-visible]/fab-menu-item:shadow-elevation-3",
+          "group-data-[pressed]/fab-menu-item:group-data-[pressed]/fab-menu-item:shadow-elevation-3"
+        ],
+        "secondary-container": [
+          "bg-secondary-container text-on-secondary-container",
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab-menu-item:shadow-elevation-4",
+          "group-data-[focus-visible]/fab-menu-item:shadow-elevation-3",
+          "group-data-[pressed]/fab-menu-item:group-data-[pressed]/fab-menu-item:shadow-elevation-3"
+        ],
+        "tertiary-container": [
+          "bg-tertiary-container text-on-tertiary-container",
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab-menu-item:shadow-elevation-4",
+          "group-data-[focus-visible]/fab-menu-item:shadow-elevation-3",
+          "group-data-[pressed]/fab-menu-item:group-data-[pressed]/fab-menu-item:shadow-elevation-3"
+        ],
+        primary: [
+          "bg-primary text-on-primary",
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab-menu-item:shadow-elevation-4",
+          "group-data-[focus-visible]/fab-menu-item:shadow-elevation-3",
+          "group-data-[pressed]/fab-menu-item:group-data-[pressed]/fab-menu-item:shadow-elevation-3"
+        ],
+        secondary: [
+          "bg-secondary text-on-secondary",
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab-menu-item:shadow-elevation-4",
+          "group-data-[focus-visible]/fab-menu-item:shadow-elevation-3",
+          "group-data-[pressed]/fab-menu-item:group-data-[pressed]/fab-menu-item:shadow-elevation-3"
+        ],
+        tertiary: [
+          "bg-tertiary text-on-tertiary",
+          "shadow-elevation-3",
+          "group-data-[hovered]/fab-menu-item:shadow-elevation-4",
+          "group-data-[focus-visible]/fab-menu-item:shadow-elevation-3",
+          "group-data-[pressed]/fab-menu-item:group-data-[pressed]/fab-menu-item:shadow-elevation-3"
+        ]
       }
     },
     defaultVariants: {
-      isOpen: false
+      color: "primary-container"
     }
   }
 );
+var fabMenuItemStateLayerVariants = classVarianceAuthority.cva(
+  [
+    "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+    // Effects transition — opacity must not overshoot
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Hover: 8%
+    "group-data-[hovered]/fab-menu-item:opacity-8",
+    // Focus: 10%
+    "group-data-[focus-visible]/fab-menu-item:opacity-10",
+    // Pressed: 10% — doubled selector wins over hover's 8%
+    "group-data-[pressed]/fab-menu-item:group-data-[pressed]/fab-menu-item:opacity-10",
+    // No state layer when disabled
+    "group-data-[disabled]/fab-menu-item:hidden"
+  ],
+  {
+    variants: {
+      color: {
+        "primary-container": "bg-on-primary-container",
+        "secondary-container": "bg-on-secondary-container",
+        "tertiary-container": "bg-on-tertiary-container",
+        primary: "bg-on-primary",
+        secondary: "bg-on-secondary",
+        tertiary: "bg-on-tertiary"
+      }
+    },
+    defaultVariants: { color: "primary-container" }
+  }
+);
+var fabMenuItemFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-[-3px] rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  // Effects transition — opacity change must not overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/fab-menu-item:opacity-100"
+]);
+var fabMenuItemIconVariants = classVarianceAuthority.cva([
+  "relative z-10 inline-flex shrink-0 items-center justify-center",
+  "size-6",
+  // 24dp per MD3 spec
+  // Color transition uses effects token (no spatial overshoot on color)
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+]);
+var fabMenuItemLabelVariants = classVarianceAuthority.cva([
+  "relative z-10 inline-flex items-center",
+  "text-title-medium"
+]);
 var FABMenu = React.forwardRef(
   ({
     open: controlledOpen,
@@ -9341,7 +9527,7 @@ var FABMenu = React.forwardRef(
       setIsOpen(false);
     }, [setIsOpen]);
     const prevIsOpenRef = React.useRef(void 0);
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       if (prevIsOpenRef.current === void 0) {
         prevIsOpenRef.current = isOpen;
         return;
@@ -9404,119 +9590,143 @@ var FABMenu = React.forwardRef(
       }
       return child;
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(FABMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: rootRef,
-        className: cn(fabMenuVariants({ direction }), className),
-        onKeyDown: handleKeyDown,
-        children: [
-          (isOpen || isExiting) && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+    return /* @__PURE__ */ jsxRuntime.jsx(FABMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: cn(fabMenuVariants(), className), onKeyDown: handleKeyDown, children: [
+      (isOpen || isExiting) && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(fabMenuListVariants({ direction })),
+          role: "group",
+          "aria-label": `${ariaLabel} actions`,
+          children: indexedChildren
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FAB,
+        {
+          ref: triggerRef,
+          onPress: toggle,
+          "aria-label": ariaLabel,
+          "aria-expanded": isOpen,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
             {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
               className: cn(
-                "inline-flex items-center gap-3",
-                direction === "up" && "flex-col-reverse",
-                direction === "down" && "flex-col",
-                direction === "left" && "flex-row-reverse",
-                direction === "right" && "flex-row"
+                // Expressive fast-spatial: FAB icon is small, high-emphasis — matches FAB enter motion
+                "h-6 w-6 transition-transform",
+                reducedMotion ? "" : "duration-expressive-fast-spatial ease-expressive-fast-spatial",
+                isOpen && "rotate-45"
               ),
-              role: "group",
-              "aria-label": `${ariaLabel} actions`,
-              children: indexedChildren
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FAB,
-            {
-              ref: triggerRef,
-              onPress: toggle,
-              "aria-label": ariaLabel,
-              "aria-expanded": isOpen,
-              icon: /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewBox: "0 0 24 24",
-                  fill: "currentColor",
-                  className: cn(
-                    "duration-short4 ease-standard h-6 w-6 transition-transform",
-                    isOpen && "rotate-45"
-                  ),
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })
-                }
-              ),
-              className: cn(isOpen && "shadow-elevation-4")
-            }
-          )
-        ]
-      }
-    ) });
+          className: cn(isOpen && "shadow-elevation-4")
+        }
+      )
+    ] }) });
   }
 );
 FABMenu.displayName = "FABMenu";
 var FABMenuItem = React.forwardRef(
-  ({ icon, label, onPress, "aria-label": ariaLabel, isDisabled = false, className, index = 0 }, forwardedRef) => {
+  ({
+    icon,
+    label,
+    "aria-label": ariaLabel,
+    onPress,
+    color = "primary-container",
+    isDisabled = false,
+    className,
+    index = 0
+  }, forwardedRef) => {
     const internalRef = React.useRef(null);
     const buttonRef = forwardedRef ?? internalRef;
-    const { isOpen, isExiting, direction, reducedMotion, itemCount } = useFABMenuContext();
+    const { isOpen, isExiting, reducedMotion, itemCount, direction } = useFABMenuContext();
+    if (process.env.NODE_ENV === "development") {
+      if (!label && !ariaLabel) {
+        console.warn(
+          "[FABMenuItem] Either `label` or `aria-label` must be provided for accessibility."
+        );
+      }
+    }
+    const [isPressed, setIsPressed] = React.useState(false);
+    const handlePressStart = React.useCallback(() => setIsPressed(true), []);
+    const handlePressEnd = React.useCallback(() => setIsPressed(false), []);
+    const { isHovered, hoverProps } = reactAria.useHover({ isDisabled });
+    const { isFocusVisible, focusProps } = reactAria.useFocusRing();
     const { buttonProps } = reactAria.useButton(
       {
-        ...onPress && { onPress },
-        "aria-label": ariaLabel,
-        isDisabled
+        ...onPress ? { onPress } : {},
+        isDisabled,
+        onPressStart: handlePressStart,
+        onPressEnd: handlePressEnd,
+        ...ariaLabel ? { "aria-label": ariaLabel } : {},
+        elementType: "button"
       },
       buttonRef
     );
-    const { onMouseDown: handleRipple, ripples } = useRipple({
-      disabled: isDisabled
-    });
-    const mergedProps = utils.mergeProps(buttonProps, {
-      type: "button",
-      onMouseDown: handleRipple
-    });
+    const { onMouseDown: handleRipple, ripples } = useRipple({ disabled: isDisabled });
     const staggerDelay = reducedMotion ? 0 : isExiting ? Math.max(0, itemCount - 1 - index) * 30 : index * 30;
+    const DIRECTION_ORIGIN = {
+      up: "origin-bottom",
+      down: "origin-top",
+      left: "origin-right",
+      right: "origin-left"
+    };
+    const originClass = reducedMotion ? void 0 : DIRECTION_ORIGIN[direction];
     const animationClass = reducedMotion ? void 0 : isOpen ? "animate-md-scale-in" : isExiting ? "animate-md-scale-out" : void 0;
-    const labelPosition = direction === "right" ? "after" : "before";
-    const labelChip = label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-surface-container text-label-large text-on-surface shadow-elevation-1 rounded-full px-3 py-1", children: label }) : null;
-    const isVisible = isOpen || isExiting;
+    const mergedButtonProps = reactAria.mergeProps(buttonProps, hoverProps, focusProps, {
+      onMouseDown: handleRipple
+    });
+    const {
+      isDisabled: _isDisabled,
+      onPress: _onPress,
+      onPressStart: _onPressStart,
+      onPressEnd: _onPressEnd,
+      onPressChange: _onPressChange,
+      onPressUp: _onPressUp,
+      ...htmlButtonProps
+    } = mergedButtonProps;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      "button",
       {
+        ...htmlButtonProps,
+        ref: buttonRef,
+        type: "button",
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isDisabled
+        }),
+        "data-with-icon": icon ? "" : void 0,
+        "data-with-label": label ? "" : void 0,
         className: cn(
-          "relative flex cursor-pointer items-center gap-3",
-          isVisible ? "opacity-100" : "opacity-0",
-          isOpen ? "pointer-events-auto" : "pointer-events-none",
+          fabMenuItemVariants({ color }),
+          // group/fab-menu-item: enables group-data-[x]/fab-menu-item child selectors in all slots
+          "group/fab-menu-item",
+          // Scale pivot toward the FAB so items appear to emanate from the trigger
+          originClass,
+          // Stagger animation class (animate-md-scale-in / animate-md-scale-out)
+          animationClass,
           className
         ),
+        style: staggerDelay > 0 ? { animationDelay: `${staggerDelay}ms` } : void 0,
         children: [
-          labelPosition === "before" && labelChip,
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+          ripples,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
             {
-              ...mergedProps,
-              ref: buttonRef,
-              className: cn(
-                "relative flex size-10 items-center justify-center overflow-hidden rounded-xl",
-                "bg-primary-container text-on-primary-container shadow-elevation-3",
-                animationClass
-              ),
-              style: staggerDelay > 0 ? { animationDelay: `${staggerDelay}ms` } : void 0,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    "data-state-layer": true,
-                    className: "bg-on-primary-container duration-spring-standard-fast-effects ease-spring-standard-fast-effects pointer-events-none absolute inset-0 rounded-xl opacity-0 transition-opacity hover:opacity-8"
-                  }
-                ),
-                ripples,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 inline-flex shrink-0", children: icon })
-              ]
+              className: cn(fabMenuItemStateLayerVariants({ color })),
+              "data-state-layer": true,
+              "aria-hidden": "true"
             }
           ),
-          labelPosition === "after" && labelChip
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(fabMenuItemFocusRingVariants()), "aria-hidden": "true" }),
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(fabMenuItemIconVariants()), "aria-hidden": "true", children: icon }),
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(fabMenuItemLabelVariants()), children: label })
         ]
       }
     );
@@ -15223,7 +15433,12 @@ exports.datePickerScrimVariants = datePickerScrimVariants;
 exports.datePickerSupportingTextVariants = datePickerSupportingTextVariants;
 exports.datePickerWeekdayVariants = datePickerWeekdayVariants;
 exports.dividerVariants = dividerVariants;
+exports.fabMenuItemFocusRingVariants = fabMenuItemFocusRingVariants;
+exports.fabMenuItemIconVariants = fabMenuItemIconVariants;
+exports.fabMenuItemLabelVariants = fabMenuItemLabelVariants;
+exports.fabMenuItemStateLayerVariants = fabMenuItemStateLayerVariants;
 exports.fabMenuItemVariants = fabMenuItemVariants;
+exports.fabMenuListVariants = fabMenuListVariants;
 exports.fabMenuVariants = fabMenuVariants;
 exports.generateMD3Theme = generateMD3Theme;
 exports.getColorValue = getColorValue;