@tinybigui/react 0.5.0 → 0.7.0

package/dist/index.js

@@ -1705,232 +1705,273 @@ var FABHeadless = forwardRef(
     type,
     "aria-label": ariaLabel,
     title,
-    ...props
+    ...restProps
   }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
     const { buttonProps } = useButton(
       {
-        ...props,
+        ...restProps,
         elementType: "button"
       },
       ref
     );
-    const domProps = filterDOMProps(props);
-    const mergedProps = 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 = mergeProps(
+      buttonProps,
+      {
+        tabIndex,
+        className,
+        onMouseDown,
+        "aria-label": ariaLabel,
+        ...title !== void 0 && { title }
+      },
+      htmlAttrs
+    );
     return (
-      // eslint-disable-next-line react/button-has-type
-      /* @__PURE__ */ jsx("button", { ...mergedProps, ref, children })
+      // eslint-disable-next-line react/button-has-type -- type is dynamically passed from props
+      /* @__PURE__ */ jsx("button", { ...mergedProps, ref, type: type ?? "button", children })
     );
   }
 );
 FABHeadless.displayName = "FABHeadless";
 var fabVariants = 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 = 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 = 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 = 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 = cva([
+  "relative z-10 inline-flex items-center",
+  "text-label-large tracking-[0.1px]"
+]);
 var Spinner2 = () => /* @__PURE__ */ 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__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
       /* @__PURE__ */ jsx(
@@ -1946,80 +1987,98 @@ var Spinner2 = () => /* @__PURE__ */ jsxs(
 );
 var FAB = 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 = useRef(null);
+    const resolvedRef = ref ?? fabRef;
+    const isFABDisabled = isDisabled || loading;
+    const [isPressed, setIsPressed] = useState(false);
+    const handlePressStart = useCallback(() => setIsPressed(true), []);
+    const handlePressEnd = useCallback(() => setIsPressed(false), []);
+    const { isHovered, hoverProps } = useHover({ isDisabled: isFABDisabled });
+    const { isFocusVisible, focusProps } = 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 = mergeProps(props, {
-      ...onPress && { onPress },
-      onMouseDown: mergedOnMouseDown,
-      isDisabled
-    });
     return /* @__PURE__ */ jsxs(
       FABHeadless,
       {
-        ref,
+        ...mergeProps$1(
+          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__ */ jsx("span", { className: cn("relative z-10 inline-flex shrink-0", loading && "invisible"), children: icon }),
-          loading && /* @__PURE__ */ jsx("span", { className: "relative z-10", children: /* @__PURE__ */ jsx(Spinner2, {}) }),
-          size === "extended" && children && /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex items-center text-sm font-medium tracking-[0.1px]", children })
+          /* @__PURE__ */ jsx("span", { className: cn(fabStateLayerVariants({ color })), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: cn(fabFocusRingVariants()), "aria-hidden": "true" }),
+          icon && /* @__PURE__ */ jsx("span", { className: cn(fabIconVariants({ size, hidden: loading })), children: icon }),
+          loading && /* @__PURE__ */ jsx("span", { className: cn(fabIconVariants({ size })), children: /* @__PURE__ */ jsx(Spinner2, {}) }),
+          size === "extended" && children && /* @__PURE__ */ jsx("span", { className: cn(fabLabelVariants()), children })
         ]
       }
     );
@@ -9271,13 +9330,30 @@ var FABMenuHeadless = forwardRef(
   }
 );
 FABMenuHeadless.displayName = "FABMenuHeadless";
-var fabMenuVariants = cva(["relative", "inline-flex", "items-end"], {
+var fabMenuVariants = cva(["relative", "inline-flex"]);
+var fabMenuListVariants = 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: {
@@ -9285,19 +9361,129 @@ var fabMenuVariants = cva(["relative", "inline-flex", "items-end"], {
   }
 });
 var fabMenuItemVariants = 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 = 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 = 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 = 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 = cva([
+  "relative z-10 inline-flex items-center",
+  "text-title-medium"
+]);
 var FABMenu = forwardRef(
   ({
     open: controlledOpen,
@@ -9336,7 +9522,7 @@ var FABMenu = forwardRef(
       setIsOpen(false);
     }, [setIsOpen]);
     const prevIsOpenRef = useRef(void 0);
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (prevIsOpenRef.current === void 0) {
         prevIsOpenRef.current = isOpen;
         return;
@@ -9399,119 +9585,143 @@ var FABMenu = forwardRef(
       }
       return child;
     });
-    return /* @__PURE__ */ jsx(FABMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: rootRef,
-        className: cn(fabMenuVariants({ direction }), className),
-        onKeyDown: handleKeyDown,
-        children: [
-          (isOpen || isExiting) && /* @__PURE__ */ jsx(
-            "div",
+    return /* @__PURE__ */ jsx(FABMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn(fabMenuVariants(), className), onKeyDown: handleKeyDown, children: [
+      (isOpen || isExiting) && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(fabMenuListVariants({ direction })),
+          role: "group",
+          "aria-label": `${ariaLabel} actions`,
+          children: indexedChildren
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FAB,
+        {
+          ref: triggerRef,
+          onPress: toggle,
+          "aria-label": ariaLabel,
+          "aria-expanded": isOpen,
+          icon: /* @__PURE__ */ 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__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })
             }
           ),
-          /* @__PURE__ */ jsx(
-            FAB,
-            {
-              ref: triggerRef,
-              onPress: toggle,
-              "aria-label": ariaLabel,
-              "aria-expanded": isOpen,
-              icon: /* @__PURE__ */ 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__ */ 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 = 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 = 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] = useState(false);
+    const handlePressStart = useCallback(() => setIsPressed(true), []);
+    const handlePressEnd = useCallback(() => setIsPressed(false), []);
+    const { isHovered, hoverProps } = useHover({ isDisabled });
+    const { isFocusVisible, focusProps } = useFocusRing();
     const { buttonProps } = 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 = 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__ */ 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 = mergeProps$1(buttonProps, hoverProps, focusProps, {
+      onMouseDown: handleRipple
+    });
+    const {
+      isDisabled: _isDisabled,
+      onPress: _onPress,
+      onPressStart: _onPressStart,
+      onPressEnd: _onPressEnd,
+      onPressChange: _onPressChange,
+      onPressUp: _onPressUp,
+      ...htmlButtonProps
+    } = mergedButtonProps;
     return /* @__PURE__ */ 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__ */ jsxs(
-            "button",
+          ripples,
+          /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("span", { className: cn(fabMenuItemFocusRingVariants()), "aria-hidden": "true" }),
+          icon && /* @__PURE__ */ jsx("span", { className: cn(fabMenuItemIconVariants()), "aria-hidden": "true", children: icon }),
+          label && /* @__PURE__ */ jsx("span", { className: cn(fabMenuItemLabelVariants()), children: label })
         ]
       }
     );
@@ -15067,6 +15277,6 @@ var DateField = forwardRef((props, forwardedRef) => {
 });
 DateField.displayName = "DateField";
 
-export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, datePickerActionButtonVariants, datePickerActionVariants, datePickerContainerVariants, datePickerDividerVariants, datePickerHeaderVariants, datePickerHeadlineVariants, datePickerNavVariants, datePickerRangeIndicatorVariants, datePickerScrimVariants, datePickerSupportingTextVariants, datePickerWeekdayVariants, dividerVariants, fabMenuItemVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, listItemVariants, listVariants, periodSelectorContainerVariants, periodSelectorItemVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, withOpacity, yearItemVariants };
+export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, datePickerActionButtonVariants, datePickerActionVariants, datePickerContainerVariants, datePickerDividerVariants, datePickerHeaderVariants, datePickerHeadlineVariants, datePickerNavVariants, datePickerRangeIndicatorVariants, datePickerScrimVariants, datePickerSupportingTextVariants, datePickerWeekdayVariants, dividerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, listItemVariants, listVariants, periodSelectorContainerVariants, periodSelectorItemVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, withOpacity, yearItemVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map