@tinybigui/react 0.4.1 → 0.5.0

package/dist/index.js

@@ -2,10 +2,10 @@ import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';
 export { argbFromHex, hexFromArgb } from '@material/material-color-utilities';
-import React, { forwardRef, useRef, createContext, useId, useState, useCallback, useEffect, useContext, useMemo, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
+import React, { forwardRef, useRef, createContext, useState, useCallback, useId, useMemo, useEffect, useContext, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { useButton, useTextField, useFocusRing, useCheckbox, VisuallyHidden, mergeProps as mergeProps$1, useSwitch, useHover, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, usePreventScroll, useDialog, useOverlay, useLink, useSeparator, useProgressBar, useToggleButton, useListBox, useOption, useSearchField, useSlider, useDatePicker, useLocale, useDateField, useSliderThumb, useRangeCalendar, useCalendar, usePopover, DismissButton, useDateSegment, useCalendarGrid, useCalendarCell, useTooltipTrigger, useTooltip, useOverlayPosition } from 'react-aria';
+import { useButton, useHover, useFocusRing, mergeProps as mergeProps$1, useTextField, useCheckbox, VisuallyHidden, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, usePreventScroll, useDialog, useOverlay, useLink, useSeparator, useProgressBar, useToggleButton, useListBox, useOption, useSearchField, useSlider, useDatePicker, useLocale, useDateField, useSliderThumb, useRangeCalendar, useCalendar, usePopover, DismissButton, useDateSegment, useCalendarGrid, useCalendarCell, useTooltipTrigger, useTooltip, useOverlayPosition } from 'react-aria';
 import { mergeProps, filterDOMProps } from '@react-aria/utils';
 import { useToggleState, useRadioGroupState, useTabListState, Item, useOverlayTriggerState, useListState, useSearchFieldState, useMenuTriggerState, useSliderState, useDatePickerState, useDateFieldState, useRangeCalendarState, useCalendarState, useTooltipTriggerState } from 'react-stately';
 import { MenuItem as MenuItem$1, Menu as Menu$1, MenuTrigger as MenuTrigger$1, Popover, MenuSection as MenuSection$1, Separator, Header, useSlottedContext, ButtonContext } from 'react-aria-components';
@@ -421,218 +421,206 @@ var ButtonHeadless = forwardRef(
 ButtonHeadless.displayName = "ButtonHeadless";
 var buttonVariants = cva(
   [
-    // Base classes (always applied)
-    "relative inline-flex items-center justify-center cursor-pointer",
-    "overflow-hidden rounded-full font-medium",
-    // Split MD3 transition: spatial (border-radius) uses expressive spring with overshoot;
-    // effects (color/bg/shadow) use standard effects spring — no overshoot allowed on color.
+    // Layout + shape — NO overflow-hidden here (see note above)
+    "relative inline-flex items-center justify-center",
+    "rounded-full cursor-pointer select-none",
+    // Split MD3 transition: spatial (border-radius) → expressive spring;
+    // effects (color/bg/shadow) → standard effects spring.
     "btn-transition",
-    "tracking-[0.1px]",
-    // MD3 spec: +0.1px letter-spacing for label-large
-    "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2"
+    // Disabled — self-targeting data-[x]: selectors
+    "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
   ],
   {
     variants: {
       /**
-       * Button variant (MD3 specification)
+       * Button variant (MD3 specification — strict, no color override)
+       *
+       * Elevation per state follows _md-comp-*-button.scss tokens:
+       *   Filled/Tonal  hover→level-1, focus/pressed→level-0
+       *   Elevated      base→level-1, hover→level-2, focus/pressed→level-1
+       *   Outlined/Text no elevation
        */
       variant: {
-        filled: "shadow-none hover:shadow-elevation-1",
-        // MD3: gains elevation on hover
-        outlined: "bg-transparent border border-outline-variant",
-        tonal: "",
-        elevated: "shadow-elevation-1 hover:shadow-elevation-2",
-        // MD3: level 1 → level 2 on hover
-        text: "bg-transparent"
-      },
-      /**
-       * Color scheme (MD3 color roles)
-       */
-      color: {
-        primary: "",
-        secondary: "",
-        tertiary: "",
-        error: ""
+        /**
+         * Filled — highest emphasis.
+         * MD3: container=primary, label=on-primary, state-layer=on-primary
+         * Elevation: 0 base → 1 hover → 0 focus → 0 pressed
+         */
+        filled: [
+          "bg-primary text-on-primary shadow-none",
+          // Hover: gains level-1 elevation
+          "group-data-[hovered]/button:shadow-elevation-1",
+          // Focus/pressed: shadow must explicitly return to level-0
+          // (doubled attribute selector → higher specificity than hover)
+          "group-data-[focus-visible]/button:shadow-none",
+          "group-data-[pressed]/button:group-data-[pressed]/button:shadow-none",
+          // Disabled overrides
+          "group-data-[disabled]/button:bg-on-surface/12",
+          "group-data-[disabled]/button:text-on-surface/38",
+          "group-data-[disabled]/button:shadow-none"
+        ],
+        /**
+         * Outlined — medium emphasis. Transparent with border.
+         * MD3: container=transparent, outline=outline, label=primary, state-layer=primary
+         * Elevation: always 0
+         */
+        outlined: [
+          "bg-transparent border border-outline text-primary",
+          // Disabled overrides
+          "group-data-[disabled]/button:border-on-surface/12",
+          "group-data-[disabled]/button:text-on-surface/38"
+        ],
+        /**
+         * Tonal — secondary emphasis.
+         * MD3 name: "Filled tonal". container=secondary-container, label=on-secondary-container
+         * Elevation: 0 base → 1 hover → 0 focus → 0 pressed
+         */
+        tonal: [
+          "bg-secondary-container text-on-secondary-container shadow-none",
+          // Hover: gains level-1 elevation (same as filled)
+          "group-data-[hovered]/button:shadow-elevation-1",
+          // Focus/pressed: return to level-0
+          "group-data-[focus-visible]/button:shadow-none",
+          "group-data-[pressed]/button:group-data-[pressed]/button:shadow-none",
+          // Disabled overrides
+          "group-data-[disabled]/button:bg-on-surface/12",
+          "group-data-[disabled]/button:text-on-surface/38",
+          "group-data-[disabled]/button:shadow-none"
+        ],
+        /**
+         * Elevated — separation via shadow.
+         * MD3: container=surface-container-low, label=primary
+         * Elevation: 1 base → 2 hover → 1 focus → 1 pressed
+         */
+        elevated: [
+          "bg-surface-container-low text-primary shadow-elevation-1",
+          // Hover: gains extra elevation
+          "group-data-[hovered]/button:shadow-elevation-2",
+          // Focus/pressed: return to base level-1
+          // (doubled selector wins over single hover selector at same cascade position)
+          "group-data-[focus-visible]/button:shadow-elevation-1",
+          "group-data-[pressed]/button:group-data-[pressed]/button:shadow-elevation-1",
+          // Disabled overrides
+          "group-data-[disabled]/button:bg-on-surface/12",
+          "group-data-[disabled]/button:text-on-surface/38",
+          "group-data-[disabled]/button:shadow-none"
+        ],
+        /**
+         * Text — lowest emphasis.
+         * MD3: container=transparent, label=primary, state-layer=primary
+         * Elevation: always 0
+         */
+        text: [
+          "bg-transparent text-primary",
+          // Disabled overrides
+          "group-data-[disabled]/button:text-on-surface/38"
+        ]
       },
       /**
        * Button size
+       * MD3 spec: small=32dp, medium=40dp, large=56dp
+       * Padding: small=16dp, medium=24dp, large=32dp
+       * Text variant uses reduced padding: small=12dp, medium=12dp
        */
       size: {
-        small: "h-8 px-4 text-sm gap-2",
-        medium: "h-10 px-6 text-sm gap-2",
-        large: "h-12 px-8 text-base gap-3"
+        small: "h-8 px-4 gap-1 text-label-medium tracking-[0.1px]",
+        medium: "h-10 px-6 gap-2 text-label-large tracking-[0.1px]",
+        large: "h-14 px-8 gap-2 text-title-medium"
       },
       /**
-       * Full width variant
+       * Full width button (spans container)
        */
       fullWidth: {
         true: "w-full",
         false: ""
-      },
-      /**
-       * Disabled state (MD3 spec: container 12% opacity, content 38% opacity)
-       */
-      disabled: {
-        true: [
-          "pointer-events-none cursor-not-allowed",
-          "bg-on-surface/12",
-          // MD3: disabled container uses on-surface at 12%
-          "text-on-surface/38",
-          // MD3: disabled text/icons use on-surface at 38%
-          "border-on-surface/12",
-          // For outlined variant
-          "shadow-none"
-          // Remove elevation when disabled
-        ],
-        false: ""
-      },
-      /**
-       * Loading state
-       */
-      loading: {
-        true: "cursor-wait",
-        false: ""
       }
     },
     /**
-     * Compound variants - combinations of variant + color
+     * Compound variants for text variant reduced padding per size
+     * MD3: text buttons use 12dp padding (px-3) instead of standard padding
      */
     compoundVariants: [
-      // ====================
-      // FILLED VARIANTS
-      // ====================
-      {
-        variant: "filled",
-        color: "primary",
-        className: "bg-primary text-on-primary"
-      },
-      {
-        variant: "filled",
-        color: "secondary",
-        className: "bg-secondary text-on-secondary"
-      },
-      {
-        variant: "filled",
-        color: "tertiary",
-        className: "bg-tertiary text-on-tertiary"
-      },
-      {
-        variant: "filled",
-        color: "error",
-        className: "bg-error text-on-error"
-      },
-      // ====================
-      // OUTLINED VARIANTS
-      // ====================
-      {
-        variant: "outlined",
-        color: "primary",
-        className: "text-primary"
-      },
-      {
-        variant: "outlined",
-        color: "secondary",
-        className: "text-secondary"
-      },
-      {
-        variant: "outlined",
-        color: "tertiary",
-        className: "text-tertiary"
-      },
-      {
-        variant: "outlined",
-        color: "error",
-        className: "text-error"
-      },
-      // ====================
-      // TONAL VARIANTS
-      // ====================
-      {
-        variant: "tonal",
-        color: "primary",
-        className: "bg-primary-container text-on-primary-container"
-      },
-      {
-        variant: "tonal",
-        color: "secondary",
-        className: "bg-secondary-container text-on-secondary-container"
-      },
-      {
-        variant: "tonal",
-        color: "tertiary",
-        className: "bg-tertiary-container text-on-tertiary-container"
-      },
-      {
-        variant: "tonal",
-        color: "error",
-        className: "bg-error-container text-on-error-container"
-      },
-      // ====================
-      // ELEVATED VARIANTS
-      // ====================
-      {
-        variant: "elevated",
-        color: "primary",
-        className: "bg-surface-container-low text-primary"
-      },
-      {
-        variant: "elevated",
-        color: "secondary",
-        className: "bg-surface-container-low text-secondary"
-      },
-      {
-        variant: "elevated",
-        color: "tertiary",
-        className: "bg-surface-container-low text-tertiary"
-      },
-      {
-        variant: "elevated",
-        color: "error",
-        className: "bg-surface-container-low text-error"
-      },
-      // ====================
-      // TEXT VARIANTS
-      // ====================
-      {
-        variant: "text",
-        color: "primary",
-        className: "text-primary hover:bg-primary/[0.08]"
-        // MD3: text buttons gain primary color at 8% opacity on hover
-      },
-      {
-        variant: "text",
-        color: "secondary",
-        className: "text-secondary hover:bg-secondary/[0.08]"
-        // MD3: text buttons gain secondary color at 8% opacity on hover
-      },
-      {
-        variant: "text",
-        color: "tertiary",
-        className: "text-tertiary hover:bg-tertiary/[0.08]"
-        // MD3: text buttons gain tertiary color at 8% opacity on hover
-      },
-      {
-        variant: "text",
-        color: "error",
-        className: "text-error hover:bg-error/[0.08]"
-        // MD3: text buttons gain error color at 8% opacity on hover
-      }
+      { variant: "text", size: "small", className: "px-3" },
+      { variant: "text", size: "medium", className: "px-3" },
+      { variant: "text", size: "large", className: "px-4" }
     ],
-    /**
-     * Default variants
-     */
     defaultVariants: {
       variant: "filled",
-      color: "primary",
       size: "medium",
-      fullWidth: false,
-      disabled: false,
-      loading: false
+      fullWidth: false
     }
   }
 );
+var buttonStateLayerVariants = cva(
+  [
+    "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+    // Effects transition for opacity — standard spring, no overshoot
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Hover: 8%
+    "group-data-[hovered]/button:opacity-8",
+    // Focus: 10%
+    "group-data-[focus-visible]/button:opacity-10",
+    // Pressed: 10%, doubled selector wins over hover
+    "group-data-[pressed]/button:group-data-[pressed]/button:opacity-10",
+    // No state layer when disabled
+    "group-data-[disabled]/button:hidden"
+  ],
+  {
+    variants: {
+      variant: {
+        filled: "bg-on-primary",
+        outlined: "bg-primary",
+        tonal: "bg-on-secondary-container",
+        elevated: "bg-primary",
+        text: "bg-primary"
+      }
+    },
+    defaultVariants: { variant: "filled" }
+  }
+);
+var buttonFocusRingVariants = 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]/button:opacity-100"
+]);
+var buttonIconVariants = cva(
+  [
+    "relative z-10 inline-flex shrink-0 items-center justify-center",
+    "size-[18px]",
+    // Color transition uses effects token (no spatial overshoot on color)
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+  ],
+  {
+    variants: {
+      hidden: {
+        true: "invisible",
+        false: ""
+      }
+    },
+    defaultVariants: { hidden: false }
+  }
+);
+var buttonLabelVariants = cva(["relative z-10 inline-flex items-center"]);
+var QUERY = "(prefers-reduced-motion: reduce)";
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(QUERY).matches;
+  });
+  useEffect(() => {
+    const mql = window.matchMedia(QUERY);
+    const handler = (e) => setReduced(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return reduced;
+}
 function useRipple(options = {}) {
   const { disabled = false, color = "currentColor", duration = 450 } = options;
+  const prefersReducedMotion = useReducedMotion();
   const [ripples, setRipples] = useState([]);
   const rippleKeyCounter = useRef(0);
   const timersRef = useRef([]);
@@ -643,7 +631,7 @@ function useRipple(options = {}) {
   }, []);
   const onMouseDown = useCallback(
     (event) => {
-      if (disabled) return;
+      if (disabled || prefersReducedMotion) return;
       const element = event.currentTarget;
       const rect = element.getBoundingClientRect();
       const x = event.clientX - rect.left;
@@ -659,9 +647,9 @@ function useRipple(options = {}) {
       }, duration);
       timersRef.current.push(timer);
     },
-    [disabled, duration]
+    [disabled, duration, prefersReducedMotion]
   );
-  const rippleElements = disabled ? null : /* @__PURE__ */ jsx(
+  const rippleElements = disabled || prefersReducedMotion ? null : /* @__PURE__ */ jsx(
     "span",
     {
       "data-ripple-container": true,
@@ -669,7 +657,7 @@ function useRipple(options = {}) {
       children: ripples.map((ripple) => /* @__PURE__ */ jsx(
         "span",
         {
-          className: "animate-ripple absolute rounded-full opacity-12",
+          className: "animate-md-ripple absolute rounded-full opacity-12",
           style: {
             left: ripple.x,
             top: ripple.y,
@@ -761,7 +749,7 @@ var Spinner = () => /* @__PURE__ */ jsxs(
   {
     role: "progressbar",
     "aria-label": "Loading",
-    className: "h-4 w-4 animate-spin",
+    className: "relative z-10 h-[18px] w-[18px] animate-spin",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -782,7 +770,6 @@ var Button = forwardRef(
   ({
     // Variant props (CVA)
     variant = "filled",
-    color = "primary",
     size = "medium",
     fullWidth = false,
     // Content props
@@ -795,64 +782,84 @@ var Button = forwardRef(
     isDisabled = false,
     // Styling
     className,
-    // Other props
+    // Other button props
     tabIndex = 0,
     type = "button",
-    onPress,
+    // Passed through to ButtonHeadless → useButton
     ...props
   }, ref) => {
+    const buttonRef = useRef(null);
+    const resolvedRef = ref ?? buttonRef;
     const groupCtx = useOptionalButtonGroup();
     const isConnected = groupCtx?.variant === "connected";
-    if (process.env.NODE_ENV === "development") {
-      if (!children) {
-        console.warn(
-          "[Button] Button should have text content. Use IconButton for icon-only buttons."
-        );
-      }
-      if (icon && trailingIcon) {
-        console.warn("[Button] Button should have either icon or trailingIcon, not both.");
-      }
-    }
     const isButtonDisabled = isDisabled || loading;
+    const [isPressed, setIsPressed] = useState(false);
+    const handlePressStart = useCallback(() => setIsPressed(true), []);
+    const handlePressEnd = useCallback(() => setIsPressed(false), []);
+    const { isHovered, hoverProps } = useHover({ isDisabled: isButtonDisabled });
+    const { isFocusVisible, focusProps } = useFocusRing();
     const { onMouseDown: handleRipple, ripples } = useRipple({
       disabled: isButtonDisabled || disableRipple
     });
+    const buttonValue = props.value;
+    const isGroupSelected = isConnected && groupCtx && buttonValue ? groupCtx.selectedValues.has(buttonValue) : false;
     const connectedClasses = isConnected && groupCtx ? [
-      ...getConnectedRadiusClasses(groupCtx, props?.value),
+      ...getConnectedRadiusClasses(groupCtx, buttonValue),
       groupCtx.enforceMinWidth ? "min-w-12" : ""
     ] : [];
+    const hasIcon = !!icon || !!trailingIcon;
+    if (process.env.NODE_ENV === "development") {
+      if (!children) {
+        console.warn(
+          "[Button] Button should have text content. Use IconButton for icon-only buttons."
+        );
+      }
+    }
     return /* @__PURE__ */ jsxs(
       ButtonHeadless,
       {
-        ...props,
-        ref,
+        ...mergeProps$1(
+          hoverProps,
+          focusProps,
+          // Track pressed state via useButton's press lifecycle callbacks,
+          // rather than a separate usePress hook, to avoid event handler conflicts.
+          { onPressStart: handlePressStart, onPressEnd: handlePressEnd },
+          props
+        ),
+        ref: resolvedRef,
         type,
         isDisabled: isButtonDisabled,
-        ...onPress && { onPress },
         tabIndex,
         onMouseDown: handleRipple,
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isDisabled: isButtonDisabled
+        }),
         "data-variant": variant,
-        "data-color": color,
+        "data-with-icon": hasIcon ? "" : void 0,
+        "data-loading": loading ? "" : void 0,
+        "data-group-selected": isGroupSelected ? "" : void 0,
         className: cn(
-          // Apply CVA variants (includes rounded-full base)
-          buttonVariants({
-            variant,
-            color,
-            size,
-            fullWidth,
-            disabled: isButtonDisabled,
-            loading
-          }),
+          buttonVariants({ variant, size, fullWidth }),
+          // group/button: enables group-data-[x]/button child selectors in all slots
+          // (added here, not in CVA, following the Switch pattern)
+          "group/button",
+          // Asymmetric border-radius easing: expressive when selected, decelerate when not
+          isGroupSelected ? "btn-transition-selected" : "",
           ...connectedClasses,
           // User custom classes
           className
         ),
         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(Spinner, {}) }),
-          /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex items-center", children }),
-          trailingIcon && /* @__PURE__ */ jsx("span", { className: cn("relative z-10 inline-flex shrink-0", loading && "invisible"), children: trailingIcon })
+          /* @__PURE__ */ jsx("span", { className: cn(buttonStateLayerVariants({ variant })), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: cn(buttonFocusRingVariants()), "aria-hidden": "true" }),
+          icon && /* @__PURE__ */ jsx("span", { className: cn(buttonIconVariants({ hidden: loading })), children: icon }),
+          loading && /* @__PURE__ */ jsx(Spinner, {}),
+          /* @__PURE__ */ jsx("span", { className: cn(buttonLabelVariants()), children }),
+          trailingIcon && /* @__PURE__ */ jsx("span", { className: cn(buttonIconVariants({ hidden: loading })), children: trailingIcon })
         ]
       }
     );
@@ -866,6 +873,7 @@ var ButtonGroupHeadless = forwardRef(
     size = "medium",
     shape = "round",
     selectionMode,
+    isDisabled = false,
     // Selection — controlled
     selectedValues: controlledValues,
     onSelectionChange: onControlledChange,
@@ -887,7 +895,7 @@ var ButtonGroupHeadless = forwardRef(
     const isControlled = controlledValues !== void 0;
     const selectedValues = isControlled ? controlledValues : uncontrolledValues;
     const handleSelectionChange = (value) => {
-      if (!selectionMode) return;
+      if (!selectionMode || isDisabled) return;
       let nextValues;
       if (selectionMode === "multi") {
         nextValues = new Set(selectedValues);
@@ -928,6 +936,7 @@ var ButtonGroupHeadless = forwardRef(
               selectionMode,
               selectedValues,
               onSelectionChange: handleSelectionChange,
+              isDisabled,
               connectedInnerRadius: getInnerRadius(size),
               connectedOuterRadius: getOuterRadius(shape, size),
               enforceMinWidth: variant === "connected" && (size === "extra-small" || size === "small")
@@ -940,9 +949,15 @@ var ButtonGroupHeadless = forwardRef(
   }
 );
 ButtonGroupHeadless.displayName = "ButtonGroupHeadless";
-var buttonGroupVariants = cva(
-  // Base classes applied to every ButtonGroup container
-  ["items-center"],
+var buttonGroupRootVariants = cva(
+  [
+    // Layout
+    "items-center",
+    // Spatial motion for gap changes — standard spring (calm, utility UI)
+    "transition-[gap] duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+    // Disabled state — self-targeting data-[x]: selector on root
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-38"
+  ],
   {
     variants: {
       /**
@@ -990,6 +1005,14 @@ var buttonGroupVariants = cva(
     }
   }
 );
+var buttonGroupFocusRingVariants = cva([
+  "pointer-events-none absolute inset-[-3px] rounded-[inherit]",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/button-group:opacity-100"
+]);
+var buttonGroupVariants = buttonGroupRootVariants;
 var ButtonGroup = forwardRef(
   ({
     variant = "standard",
@@ -999,6 +1022,7 @@ var ButtonGroup = forwardRef(
     selectedValues,
     onSelectionChange,
     defaultValue,
+    isDisabled = false,
     children,
     className,
     ...htmlProps
@@ -1015,6 +1039,13 @@ var ButtonGroup = forwardRef(
       },
       [ref]
     );
+    const hasSelection = useMemo(() => {
+      if (selectedValues) return selectedValues.size > 0;
+      if (defaultValue) {
+        return Array.isArray(defaultValue) ? defaultValue.length > 0 : true;
+      }
+      return false;
+    }, [selectedValues, defaultValue]);
     if (process.env.NODE_ENV === "development") {
       const childArray = Array.isArray(children) ? children : [children];
       for (const child of childArray) {
@@ -1063,7 +1094,12 @@ var ButtonGroup = forwardRef(
         selectedValues,
         onSelectionChange,
         defaultValue,
-        className: cn(buttonGroupVariants({ variant, size }), className),
+        isDisabled,
+        className: cn(buttonGroupRootVariants({ variant, size }), "group/button-group", className),
+        ...getInteractionDataAttributes({ isDisabled }),
+        "data-connected": variant === "connected" ? "" : void 0,
+        "data-has-selection": hasSelection ? "" : void 0,
+        "data-selection-mode": selectionMode ?? void 0,
         children
       }
     );
@@ -1077,79 +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
-    // Spatial (border-radius, transform): expressive fast spring — 350ms, visible overshoot
-    "transition-all duration-expressive-fast-spatial ease-expressive-fast-spatial",
-    "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
-    // State layers — effects token: opacity only, no overshoot
-    "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"
+    // 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",
+    // 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: "",
@@ -1158,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,
@@ -1350,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
     });
@@ -1363,44 +1654,42 @@ var IconButton = forwardRef(
       onMouseDown: mergedOnMouseDown,
       isDisabled
     });
+    const isGroupSelected = isConnected && groupCtx && value ? groupCtx.selectedValues.has(value) : false;
     const connectedClasses = isConnected && groupCtx ? [
       ...getConnectedRadiusClasses(groupCtx, value),
       groupCtx.enforceMinWidth ? "min-w-12" : ""
     ] : [];
+    const iconNode = isToggle && isSelected && selectedIcon ? selectedIcon : children;
     return /* @__PURE__ */ jsxs(
       IconButtonHeadless,
       {
         ref,
         className: cn(
-          // Base classes
-          "relative inline-flex items-center justify-center",
-          "overflow-hidden rounded-full",
-          // Circular shape (overridden by connected group classes)
-          // Spatial (border-radius, transform): expressive fast spring — 350ms, visible overshoot
-          "duration-expressive-fast-spatial ease-expressive-fast-spatial transition-all",
-          "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
-          // State layers (hover, focus, active) — effects token: opacity, no overshoot
-          "before:absolute before:inset-0 before:rounded-[inherit]",
-          "before:duration-spring-standard-fast-effects before:ease-spring-standard-fast-effects before:transition-opacity",
-          "before:bg-current before:opacity-0",
-          "hover:before:opacity-8",
-          "focus-visible:before:opacity-12",
-          "active:before:opacity-12",
-          // CVA variants
-          iconButtonVariants({ variant, color, size, selected: selected ?? false, isDisabled }),
+          // 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,
-        ...selected !== void 0 && { selected },
+        "data-size": size,
+        "data-width": width,
+        "data-shape": shape,
+        "data-group-selected": isGroupSelected ? "" : void 0,
         ...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 })
         ]
       }
     );
@@ -4786,20 +5075,6 @@ var BadgeContent = forwardRef(
   }
 );
 BadgeContent.displayName = "BadgeContent";
-var QUERY = "(prefers-reduced-motion: reduce)";
-function useReducedMotion() {
-  const [reduced, setReduced] = useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.matchMedia(QUERY).matches;
-  });
-  useEffect(() => {
-    const mql = window.matchMedia(QUERY);
-    const handler = (e) => setReduced(e.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return reduced;
-}
 var Badge = forwardRef(
   ({
     count,
@@ -14792,6 +15067,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, 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, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map