@tinybigui/react 0.4.2 → 0.6.0

package/dist/index.js

@@ -1113,81 +1113,113 @@ var IconButtonHeadless = forwardRef(
     tabIndex = 0,
     onMouseDown,
     type,
-    selected,
+    isSelected,
+    isToggle = false,
+    isDisabled = false,
     "aria-label": ariaLabel,
     title,
     ...props
   }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
-    const { buttonProps } = useButton(
+    const { buttonProps, isPressed } = useButton(
       {
         ...props,
-        // Ensure element type is 'button' for proper semantics
         elementType: "button",
-        // Pass aria-label
-        "aria-label": ariaLabel
+        "aria-label": ariaLabel,
+        isDisabled
       },
       ref
     );
+    const { isHovered, hoverProps } = useHover({ isDisabled });
+    const { isFocusVisible, focusProps } = useFocusRing();
     const domProps = filterDOMProps(props);
-    const mergedProps = mergeProps(
-      buttonProps,
-      domProps,
+    const mergedProps = mergeProps(buttonProps, hoverProps, focusProps, domProps, {
+      tabIndex,
+      className,
+      onMouseDown,
+      type: type ?? "button",
+      ...title && { title },
+      // aria-pressed only when acting as a toggle button
+      ...isToggle && { "aria-pressed": isSelected ?? false }
+    });
+    return /* @__PURE__ */ jsx(
+      "button",
       {
-        tabIndex,
-        className,
-        onMouseDown,
-        type: type ?? "button",
-        // Add aria-pressed for toggle buttons (only if selected is defined)
-        ...selected !== void 0 && { "aria-pressed": selected },
-        // Add title if provided
-        ...title && { title }
+        ...mergedProps,
+        ref,
+        type: type === "submit" ? "submit" : type === "reset" ? "reset" : "button",
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          ...isToggle ? { isSelected: isSelected ?? false } : {},
+          isDisabled
+        }),
+        "data-toggle": isToggle ? "" : void 0,
+        children
       }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    );
-    return (
-      // eslint-disable-next-line react/button-has-type
-      /* @__PURE__ */ jsx("button", { ...mergedProps, ref, type: type ?? "button", children })
     );
   }
 );
 IconButtonHeadless.displayName = "IconButtonHeadless";
-var iconButtonVariants = cva(
+var iconButtonRootVariants = cva(
   [
-    // Base classes (always applied)
-    "relative inline-flex items-center justify-center cursor-pointer",
-    "overflow-hidden rounded-full",
-    // Circular shape
-    // Split MD3 transition: btn-transition handles spatial (border-radius) with asymmetric
-    // easing (decelerate by default, switched to expressive via btn-transition-selected when
-    // the button is group-selected) and effects (color/bg/shadow) with standard spring.
+    // Layout
+    "relative inline-flex items-center justify-center",
+    "cursor-pointer select-none",
+    "overflow-hidden",
+    // Corner radius driven by CSS variable — set per shape×size in compoundVariants.
+    // Fallback 9999px is only reached if both shape and size props are absent,
+    // which cannot happen in normal usage.
+    "rounded-[var(--ib-radius,9999px)]",
+    // Split MD3 transition via the existing btn-transition utility:
+    //   border-radius  → emphasized-decelerate (no overshoot, no sharp-corner flash)
+    //   color/bg/border/opacity → standard-fast-effects (no overshoot on effects)
+    // This is identical to the approach used by Button/connected ButtonGroup and is
+    // the standard fix for the 9999px overshoot problem documented in styles.css.
     "btn-transition",
-    "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
-    // State layers — effects token: opacity only, no overshoot (separate ::before pseudo-element)
-    "before:absolute before:inset-0 before:rounded-[inherit]",
-    "before:transition-opacity before:duration-spring-standard-fast-effects before:ease-spring-standard-fast-effects",
-    "before:bg-current before:opacity-0",
-    "hover:before:opacity-8",
-    "focus-visible:before:opacity-12",
-    "active:before:opacity-12"
+    // Background + border + text driven from CSS role variables
+    "bg-[var(--ib-bg,transparent)]",
+    "border border-[var(--ib-border,transparent)]",
+    "text-[var(--ib-fg,currentColor)]",
+    // Toggle: off state (data-toggle present but data-selected absent)
+    // Uses doubly-chained selector to beat single-chain specificity of defaults
+    "data-[toggle]:bg-[var(--ib-bg-off,var(--ib-bg,transparent))]",
+    "data-[toggle]:text-[var(--ib-fg-off,var(--ib-fg,currentColor))]",
+    // Selected state
+    "data-[selected]:bg-[var(--ib-bg-on,var(--ib-bg,transparent))]",
+    "data-[selected]:text-[var(--ib-fg-on,var(--ib-fg,currentColor))]",
+    "data-[selected]:border-transparent",
+    // Press shape-morph: radius collapses to --ib-radius-press on press
+    // (only has visual effect when --ib-radius-press differs from --ib-radius)
+    "data-[pressed]:rounded-[var(--ib-radius-press,var(--ib-radius,9999px))]",
+    // Focus ring (outline, not a state layer — stays outside overflow-hidden
+    // because it's drawn as outline on the root element itself)
+    "outline-none",
+    "group-data-[focus-visible]/icon-button:outline-2",
+    "group-data-[focus-visible]/icon-button:outline-offset-2",
+    "group-data-[focus-visible]/icon-button:outline-secondary",
+    // Disabled — content opacity 38%, container handled per variant via CSS vars
+    "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+    "data-[disabled]:text-on-surface/38"
+    // Filled/tonal/outlined-selected backgrounds collapse to on-surface/12 — set
+    // via compoundVariants on the root for variants that have a container.
+    // For variants with transparent bg (standard, outlined-unselected) we do nothing.
   ],
   {
     variants: {
       /**
-       * Button variant (MD3 specification)
+       * Visual style variant (MD3 icon button types)
        */
       variant: {
-        standard: "bg-transparent",
-        // No background
-        filled: "shadow-none",
-        // Solid background
-        tonal: "",
-        // Container background
-        outlined: "bg-transparent border border-outline"
+        standard: "",
+        filled: "data-[disabled]:bg-on-surface/12",
+        tonal: "data-[disabled]:bg-on-surface/12",
+        outlined: ""
       },
       /**
-       * Color scheme (MD3 color roles)
+       * Color scheme — sets CSS role variables via compoundVariants.
        */
       color: {
         primary: "",
@@ -1196,180 +1228,400 @@ var iconButtonVariants = cva(
         error: ""
       },
       /**
-       * Button size (square dimensions)
+       * Size tier (M3 Expressive 5-tier)
        */
       size: {
-        small: "h-8 w-8",
-        // 32×32px
-        medium: "h-10 w-10",
-        // 40×40px (default)
-        large: "h-12 w-12"
-        // 48×48px
+        xsmall: "h-8",
+        small: "h-10",
+        medium: "h-14",
+        large: "h-24",
+        xlarge: "h-[8.5rem]"
       },
       /**
-       * Selected state (for toggle buttons)
+       * Width variant — adjusts container width
        */
-      selected: {
-        true: "",
-        false: ""
+      width: {
+        narrow: "",
+        default: "",
+        wide: ""
       },
       /**
-       * Disabled state
+       * Shape — base values only; per-size radii set via compoundVariants below.
+       *
+       * round:  --ib-radius = half the container height (true circle), set per size.
+       *         --ib-radius-press = square corner for that size (set per size).
+       *         Morph distance is small (e.g. 28px → 16px for medium), so the
+       *         emphasized-decelerate curve from btn-transition produces a smooth,
+       *         non-overshooting transition. The old 9999px fallback caused the
+       *         spring to overshoot below 0 = sharp-corner flash.
+       * square: --ib-radius = size-tiered MD3 corner, set per size. No press morph.
        */
-      isDisabled: {
-        true: "pointer-events-none cursor-not-allowed opacity-38",
-        false: ""
+      shape: {
+        round: [],
+        square: []
       }
     },
-    /**
-     * Compound variants - combinations of variant + color + selected
-     */
     compoundVariants: [
-      // ====================
-      // STANDARD VARIANTS
-      // ====================
-      {
-        variant: "standard",
-        selected: false,
-        className: "text-on-surface-variant"
-      },
+      // ══════════════════════════════════════════════════════════════════════
+      // SIZE × WIDTH — container width
+      // ══════════════════════════════════════════════════════════════════════
+      { size: "xsmall", width: "narrow", className: "w-6" },
+      { size: "xsmall", width: "default", className: "w-8" },
+      { size: "xsmall", width: "wide", className: "w-10" },
+      { size: "small", width: "narrow", className: "w-8" },
+      { size: "small", width: "default", className: "w-10" },
+      { size: "small", width: "wide", className: "w-13" },
+      { size: "medium", width: "narrow", className: "w-12" },
+      { size: "medium", width: "default", className: "w-14" },
+      { size: "medium", width: "wide", className: "w-18" },
+      { size: "large", width: "narrow", className: "w-18" },
+      { size: "large", width: "default", className: "w-24" },
+      { size: "large", width: "wide", className: "w-32" },
+      { size: "xlarge", width: "narrow", className: "w-24" },
+      { size: "xlarge", width: "default", className: "w-[8.5rem]" },
+      { size: "xlarge", width: "wide", className: "w-42" },
+      // ══════════════════════════════════════════════════════════════════════
+      // SHAPE × SIZE — corner radii for both round and square shapes
+      // ══════════════════════════════════════════════════════════════════════
+      //
+      // Round rest radius = half container height (true circle).
+      // Using the exact half-height keeps the morph distance small, so the
+      // no-overshoot emphasized-decelerate curve in btn-transition produces a
+      // smooth animation. Using 9999px was the original cause of the sharp-
+      // corner flash (the spring overshoots below 0 before settling).
+      //
+      //   xsmall h-8  = 32px  → half = 16px = 1rem
+      //   small  h-10 = 40px  → half = 20px = 1.25rem
+      //   medium h-14 = 56px  → half = 28px = 1.75rem
+      //   large  h-24 = 96px  → half = 48px = 3rem
+      //   xlarge h-34 = 136px → half = 68px = 4.25rem
+      //
+      // Round press-morph target = MD3 square corner for that size tier.
+      // Square rest radius = same MD3 corner (no morph).
+      // ── round: rest radius (half height) ──────────────────────────────────
+      { shape: "round", size: "xsmall", className: "[--ib-radius:1rem]" },
+      { shape: "round", size: "small", className: "[--ib-radius:1.25rem]" },
+      { shape: "round", size: "medium", className: "[--ib-radius:1.75rem]" },
+      { shape: "round", size: "large", className: "[--ib-radius:3rem]" },
+      { shape: "round", size: "xlarge", className: "[--ib-radius:4.25rem]" },
+      // ── round: press-morph target (square corner for that size) ───────────
+      { shape: "round", size: "xsmall", className: "[--ib-radius-press:0.75rem]" },
+      { shape: "round", size: "small", className: "[--ib-radius-press:0.75rem]" },
+      { shape: "round", size: "medium", className: "[--ib-radius-press:1rem]" },
+      { shape: "round", size: "large", className: "[--ib-radius-press:1.75rem]" },
+      { shape: "round", size: "xlarge", className: "[--ib-radius-press:1.75rem]" },
+      // ── square: rest radius (MD3 shape scale) ─────────────────────────────
+      // xsmall / small → 12px (0.75rem), medium → 16px (1rem), large / xlarge → 28px (1.75rem)
+      { shape: "square", size: "xsmall", className: "[--ib-radius:0.75rem]" },
+      { shape: "square", size: "small", className: "[--ib-radius:0.75rem]" },
+      { shape: "square", size: "medium", className: "[--ib-radius:1rem]" },
+      { shape: "square", size: "large", className: "[--ib-radius:1.75rem]" },
+      { shape: "square", size: "xlarge", className: "[--ib-radius:1.75rem]" },
+      // ══════════════════════════════════════════════════════════════════════
+      // VARIANT × COLOR — CSS role variable assignments
+      // Only variant × color (design-time decisions); no state variants here.
+      // ══════════════════════════════════════════════════════════════════════
+      // ── STANDARD ──────────────────────────────────────────────────────────
+      // Non-toggle standard: transparent bg, on-surface-variant fg
+      // Selected: primary fg
+      // State layer: on-surface-variant (unselected) / primary (selected)
       {
         variant: "standard",
-        selected: true,
-        className: "text-primary"
-      },
-      // ====================
-      // FILLED VARIANTS (UNSELECTED)
-      // ====================
-      {
-        variant: "filled",
         color: "primary",
-        selected: false,
-        className: "bg-primary text-on-primary"
+        className: [
+          "[--ib-bg:transparent]",
+          "[--ib-fg:var(--color-on-surface-variant)]",
+          "[--ib-fg-on:var(--color-primary)]",
+          "[--ib-sl:var(--color-on-surface-variant)]",
+          // toggle-off same as non-toggle
+          "[--ib-bg-off:transparent]",
+          "[--ib-fg-off:var(--color-on-surface-variant)]",
+          // toggle-on: selected
+          "[--ib-bg-on:transparent]"
+        ]
       },
       {
-        variant: "filled",
+        variant: "standard",
         color: "secondary",
-        selected: false,
-        className: "bg-secondary text-on-secondary"
+        className: [
+          "[--ib-bg:transparent]",
+          "[--ib-fg:var(--color-on-surface-variant)]",
+          "[--ib-fg-on:var(--color-secondary)]",
+          "[--ib-sl:var(--color-on-surface-variant)]",
+          "[--ib-bg-off:transparent]",
+          "[--ib-fg-off:var(--color-on-surface-variant)]",
+          "[--ib-bg-on:transparent]"
+        ]
       },
       {
-        variant: "filled",
+        variant: "standard",
         color: "tertiary",
-        selected: false,
-        className: "bg-tertiary text-on-tertiary"
+        className: [
+          "[--ib-bg:transparent]",
+          "[--ib-fg:var(--color-on-surface-variant)]",
+          "[--ib-fg-on:var(--color-tertiary)]",
+          "[--ib-sl:var(--color-on-surface-variant)]",
+          "[--ib-bg-off:transparent]",
+          "[--ib-fg-off:var(--color-on-surface-variant)]",
+          "[--ib-bg-on:transparent]"
+        ]
       },
       {
-        variant: "filled",
+        variant: "standard",
         color: "error",
-        selected: false,
-        className: "bg-error text-on-error"
+        className: [
+          "[--ib-bg:transparent]",
+          "[--ib-fg:var(--color-on-surface-variant)]",
+          "[--ib-fg-on:var(--color-error)]",
+          "[--ib-sl:var(--color-on-surface-variant)]",
+          "[--ib-bg-off:transparent]",
+          "[--ib-fg-off:var(--color-on-surface-variant)]",
+          "[--ib-bg-on:transparent]"
+        ]
       },
-      // ====================
-      // FILLED VARIANTS (SELECTED - uses container colors)
-      // ====================
+      // ── FILLED ────────────────────────────────────────────────────────────
+      // Non-toggle: bg primary / fg on-primary
+      // Toggle off: bg surface-container-highest / fg primary
+      // Toggle on (selected): bg primary / fg on-primary
+      // State layer: on-primary (non-toggle / selected), primary (toggle-off)
       {
         variant: "filled",
         color: "primary",
-        selected: true,
-        className: "bg-primary-container text-on-primary-container"
+        className: [
+          "[--ib-bg:var(--color-primary)]",
+          "[--ib-fg:var(--color-on-primary)]",
+          "[--ib-sl:var(--color-on-primary)]",
+          "[--ib-bg-off:var(--color-surface-container-highest)]",
+          "[--ib-fg-off:var(--color-primary)]",
+          "[--ib-bg-on:var(--color-primary)]",
+          "[--ib-fg-on:var(--color-on-primary)]"
+        ]
       },
       {
         variant: "filled",
         color: "secondary",
-        selected: true,
-        className: "bg-secondary-container text-on-secondary-container"
+        className: [
+          "[--ib-bg:var(--color-secondary)]",
+          "[--ib-fg:var(--color-on-secondary)]",
+          "[--ib-sl:var(--color-on-secondary)]",
+          "[--ib-bg-off:var(--color-surface-container-highest)]",
+          "[--ib-fg-off:var(--color-secondary)]",
+          "[--ib-bg-on:var(--color-secondary)]",
+          "[--ib-fg-on:var(--color-on-secondary)]"
+        ]
       },
       {
         variant: "filled",
         color: "tertiary",
-        selected: true,
-        className: "bg-tertiary-container text-on-tertiary-container"
+        className: [
+          "[--ib-bg:var(--color-tertiary)]",
+          "[--ib-fg:var(--color-on-tertiary)]",
+          "[--ib-sl:var(--color-on-tertiary)]",
+          "[--ib-bg-off:var(--color-surface-container-highest)]",
+          "[--ib-fg-off:var(--color-tertiary)]",
+          "[--ib-bg-on:var(--color-tertiary)]",
+          "[--ib-fg-on:var(--color-on-tertiary)]"
+        ]
       },
       {
         variant: "filled",
         color: "error",
-        selected: true,
-        className: "bg-error-container text-on-error-container"
+        className: [
+          "[--ib-bg:var(--color-error)]",
+          "[--ib-fg:var(--color-on-error)]",
+          "[--ib-sl:var(--color-on-error)]",
+          "[--ib-bg-off:var(--color-surface-container-highest)]",
+          "[--ib-fg-off:var(--color-error)]",
+          "[--ib-bg-on:var(--color-error)]",
+          "[--ib-fg-on:var(--color-on-error)]"
+        ]
       },
-      // ====================
-      // TONAL VARIANTS (UNSELECTED)
-      // ====================
+      // ── TONAL ─────────────────────────────────────────────────────────────
+      // Non-toggle: bg secondary-container / fg on-secondary-container
+      // Toggle off: bg surface-container-highest / fg on-surface-variant
+      // Toggle on (selected): bg secondary-container / fg on-secondary-container
       {
         variant: "tonal",
         color: "primary",
-        selected: false,
-        className: "bg-secondary-container text-on-secondary-container"
+        className: [
+          "[--ib-bg:var(--color-secondary-container)]",
+          "[--ib-fg:var(--color-on-secondary-container)]",
+          "[--ib-sl:var(--color-on-secondary-container)]",
+          "[--ib-bg-off:var(--color-surface-container-highest)]",
+          "[--ib-fg-off:var(--color-on-surface-variant)]",
+          "[--ib-bg-on:var(--color-secondary-container)]",
+          "[--ib-fg-on:var(--color-on-secondary-container)]"
+        ]
       },
       {
         variant: "tonal",
         color: "secondary",
-        selected: false,
-        className: "bg-secondary-container text-on-secondary-container"
+        className: [
+          "[--ib-bg:var(--color-secondary-container)]",
+          "[--ib-fg:var(--color-on-secondary-container)]",
+          "[--ib-sl:var(--color-on-secondary-container)]",
+          "[--ib-bg-off:var(--color-surface-container-highest)]",
+          "[--ib-fg-off:var(--color-on-surface-variant)]",
+          "[--ib-bg-on:var(--color-secondary-container)]",
+          "[--ib-fg-on:var(--color-on-secondary-container)]"
+        ]
       },
       {
         variant: "tonal",
         color: "tertiary",
-        selected: false,
-        className: "bg-tertiary-container text-on-tertiary-container"
+        className: [
+          "[--ib-bg:var(--color-tertiary-container)]",
+          "[--ib-fg:var(--color-on-tertiary-container)]",
+          "[--ib-sl:var(--color-on-tertiary-container)]",
+          "[--ib-bg-off:var(--color-surface-container-highest)]",
+          "[--ib-fg-off:var(--color-on-surface-variant)]",
+          "[--ib-bg-on:var(--color-tertiary-container)]",
+          "[--ib-fg-on:var(--color-on-tertiary-container)]"
+        ]
       },
       {
         variant: "tonal",
         color: "error",
-        selected: false,
-        className: "bg-error-container text-on-error-container"
+        className: [
+          "[--ib-bg:var(--color-error-container)]",
+          "[--ib-fg:var(--color-on-error-container)]",
+          "[--ib-sl:var(--color-on-error-container)]",
+          "[--ib-bg-off:var(--color-surface-container-highest)]",
+          "[--ib-fg-off:var(--color-on-surface-variant)]",
+          "[--ib-bg-on:var(--color-error-container)]",
+          "[--ib-fg-on:var(--color-on-error-container)]"
+        ]
       },
-      // ====================
-      // TONAL VARIANTS (SELECTED - uses tertiary container)
-      // ====================
+      // ── OUTLINED ──────────────────────────────────────────────────────────
+      // Non-toggle: transparent bg, border-outline, on-surface-variant fg
+      // Toggle off: same as non-toggle
+      // Toggle on (selected): inverse-surface bg, inverse-on-surface fg, no border
+      // Disabled: border becomes on-surface/12 (set via Tailwind utility on root)
       {
-        variant: "tonal",
-        selected: true,
-        className: "bg-tertiary-container text-on-tertiary-container"
+        variant: "outlined",
+        color: "primary",
+        className: [
+          "[--ib-bg:transparent]",
+          "[--ib-fg:var(--color-on-surface-variant)]",
+          "[--ib-sl:var(--color-on-surface-variant)]",
+          "[--ib-border:var(--color-outline)]",
+          "[--ib-bg-off:transparent]",
+          "[--ib-fg-off:var(--color-on-surface-variant)]",
+          "[--ib-bg-on:var(--color-inverse-surface)]",
+          "[--ib-fg-on:var(--color-inverse-on-surface)]",
+          // Disabled outlined border
+          "data-[disabled]:border-on-surface/12"
+        ]
       },
-      // ====================
-      // OUTLINED VARIANTS (UNSELECTED)
-      // ====================
       {
         variant: "outlined",
-        selected: false,
-        className: "text-on-surface-variant"
+        color: "secondary",
+        className: [
+          "[--ib-bg:transparent]",
+          "[--ib-fg:var(--color-on-surface-variant)]",
+          "[--ib-sl:var(--color-on-surface-variant)]",
+          "[--ib-border:var(--color-outline)]",
+          "[--ib-bg-off:transparent]",
+          "[--ib-fg-off:var(--color-on-surface-variant)]",
+          "[--ib-bg-on:var(--color-inverse-surface)]",
+          "[--ib-fg-on:var(--color-inverse-on-surface)]",
+          "data-[disabled]:border-on-surface/12"
+        ]
       },
-      // ====================
-      // OUTLINED VARIANTS (SELECTED - uses inverse colors)
-      // ====================
       {
         variant: "outlined",
-        selected: true,
-        className: "bg-inverse-surface text-inverse-on-surface border-transparent"
+        color: "tertiary",
+        className: [
+          "[--ib-bg:transparent]",
+          "[--ib-fg:var(--color-on-surface-variant)]",
+          "[--ib-sl:var(--color-on-surface-variant)]",
+          "[--ib-border:var(--color-outline)]",
+          "[--ib-bg-off:transparent]",
+          "[--ib-fg-off:var(--color-on-surface-variant)]",
+          "[--ib-bg-on:var(--color-inverse-surface)]",
+          "[--ib-fg-on:var(--color-inverse-on-surface)]",
+          "data-[disabled]:border-on-surface/12"
+        ]
+      },
+      {
+        variant: "outlined",
+        color: "error",
+        className: [
+          "[--ib-bg:transparent]",
+          "[--ib-fg:var(--color-on-surface-variant)]",
+          "[--ib-sl:var(--color-on-surface-variant)]",
+          "[--ib-border:var(--color-outline)]",
+          "[--ib-bg-off:transparent]",
+          "[--ib-fg-off:var(--color-on-surface-variant)]",
+          "[--ib-bg-on:var(--color-inverse-surface)]",
+          "[--ib-fg-on:var(--color-inverse-on-surface)]",
+          "data-[disabled]:border-on-surface/12"
+        ]
       }
     ],
-    /**
-     * Default variants
-     */
     defaultVariants: {
       variant: "standard",
       color: "primary",
       size: "medium",
-      selected: false,
-      isDisabled: false
+      width: "default",
+      shape: "round"
+    }
+  }
+);
+var iconButtonStateLayerVariants = cva([
+  "absolute inset-0 rounded-[inherit] pointer-events-none opacity-0",
+  "bg-[var(--ib-sl,currentColor)]",
+  // Effects transition (opacity — no spatial overshoot)
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Interaction opacities (MD3: hover 8%, focus/pressed 10%)
+  "group-data-[hovered]/icon-button:opacity-8",
+  "group-data-[focus-visible]/icon-button:opacity-10",
+  "group-data-[pressed]/icon-button:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/icon-button:hidden"
+]);
+var iconButtonIconVariants = cva(
+  [
+    "relative z-10 inline-flex shrink-0 items-center justify-center",
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+  ],
+  {
+    variants: {
+      size: {
+        xsmall: "size-5",
+        // 20dp
+        small: "size-6",
+        // 24dp
+        medium: "size-6",
+        // 24dp
+        large: "size-8",
+        // 32dp
+        xlarge: "size-10"
+        // 40dp
+      }
+    },
+    defaultVariants: {
+      size: "medium"
     }
   }
 );
 var IconButton = forwardRef(
   ({
-    // Variant props (CVA)
+    // Variant props (CVA / design-time)
     variant = "standard",
     color = "primary",
     size = "medium",
+    width = "default",
+    shape = "round",
     // IconButton specific props
     children,
+    selectedIcon,
     value,
     selected,
     disableRipple = false,
     className,
     // React Aria props
-    isDisabled: propIsDisabled = false,
+    isDisabled = false,
     onPress,
     onMouseDown,
     "aria-label": ariaLabel,
@@ -1388,7 +1640,8 @@ var IconButton = forwardRef(
         console.warn("[IconButton] IconButton should have an icon as children.");
       }
     }
-    const isDisabled = propIsDisabled;
+    const isToggle = selected !== void 0;
+    const isSelected = isToggle ? selected ?? false : false;
     const { onMouseDown: handleRipple, ripples } = useRipple({
       disabled: isDisabled || disableRipple
     });
@@ -1406,32 +1659,37 @@ var IconButton = forwardRef(
       ...getConnectedRadiusClasses(groupCtx, value),
       groupCtx.enforceMinWidth ? "min-w-12" : ""
     ] : [];
+    const iconNode = isToggle && isSelected && selectedIcon ? selectedIcon : children;
     return /* @__PURE__ */ jsxs(
       IconButtonHeadless,
       {
         ref,
         className: cn(
-          // CVA variants — includes btn-transition for asymmetric border-radius easing
-          iconButtonVariants({ variant, color, size, selected: selected ?? false, isDisabled }),
-          // Asymmetric border-radius easing: expressive when selected, decelerate when not.
-          // btn-transition-selected overrides --_btn-radius-easing to the bouncy spring while
-          // the button is gaining the pill shape; removal restores decelerate for the return
-          // path, preventing the overshoot-to-0px sharp-corner flash.
+          // Root CVA — sets CSS role variables, dimensions, shape, transitions
+          iconButtonRootVariants({ variant, color, size, width, shape }),
+          // Group scope for child slot selectors
+          "group/icon-button",
+          // ButtonGroup asymmetric border-radius easing (connected selection morph)
           isGroupSelected ? "btn-transition-selected" : "",
           ...connectedClasses,
-          // User custom classes
+          // Consumer custom classes
           className
         ),
         "aria-label": ariaLabel,
+        isSelected,
+        isToggle,
         "data-variant": variant,
         "data-color": color,
+        "data-size": size,
+        "data-width": width,
+        "data-shape": shape,
         "data-group-selected": isGroupSelected ? "" : void 0,
-        ...selected !== void 0 && { selected },
         ...title && { title },
         ...mergedPropsValue,
         children: [
+          /* @__PURE__ */ jsx("span", { className: iconButtonStateLayerVariants(), "aria-hidden": "true", "data-state-layer": "" }),
           ripples,
-          /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex shrink-0", children })
+          /* @__PURE__ */ jsx("span", { className: iconButtonIconVariants({ size }), "data-icon-slot": "", "aria-hidden": "true", children: iconNode })
         ]
       }
     );
@@ -1447,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(
@@ -1688,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 })
         ]
       }
     );