@tinybigui/react 0.8.0 → 0.9.0

package/dist/index.js

@@ -2665,205 +2665,132 @@ var TextField = forwardRef(
   }
 );
 TextField.displayName = "TextField";
-var checkboxVariants = cva(
-  [
-    // Base classes (always applied to label wrapper)
-    "relative inline-flex items-center cursor-pointer select-none",
-    "transition-opacity duration-200"
-  ],
-  {
-    variants: {
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "opacity-38 cursor-not-allowed pointer-events-none",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: false
-    }
-  }
-);
-var checkboxContainerVariants = cva(
-  [
-    // Base classes for checkbox visual container
-    "relative inline-flex items-center justify-center m-1",
-    "w-10 h-10",
-    // 40x40dp touch target (MD3 spec)
-    "flex-shrink-0",
-    "transition-all duration-200",
-    // State layer (hover, focus, active) - MD3 spec: 8%/12%/12% opacity
-    "before:absolute before:inset-0 before:rounded-full before:transition-opacity before:duration-200",
-    "before:bg-current before:opacity-0",
-    "hover:before:opacity-8",
-    "active:before:opacity-12"
-  ],
-  {
-    variants: {
-      /**
-       * Checkbox state (determines visual appearance)
-       */
-      state: {
-        unchecked: "text-on-surface-variant",
-        checked: "text-primary",
-        indeterminate: "text-primary"
-      },
-      /**
-       * Error/invalid state
-       */
-      isInvalid: {
-        true: "text-error",
-        false: ""
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "text-on-surface pointer-events-none",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      // Error state overrides normal colors for all states
-      {
-        state: "unchecked",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      },
-      {
-        state: "checked",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      },
-      {
-        state: "indeterminate",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      }
-    ],
-    defaultVariants: {
-      state: "unchecked",
-      isInvalid: false,
-      disabled: false
-    }
-  }
-);
-var checkboxIconBoxVariants = cva(
-  [
-    // Base classes for the checkbox box
-    // Note: Border radius is applied via SVG rx/ry attributes (2dp) in the component
-    "transition-all duration-200"
-  ],
-  {
-    variants: {
-      /**
-       * Checkbox state
-       */
-      state: {
-        unchecked: [
-          "fill-transparent",
-          "stroke-outline",
-          // MD3: outline color for unchecked
-          "stroke-4"
-          // MD3: 2dp outline width
-        ],
-        checked: [
-          "fill-current",
-          // Uses parent text color (primary or error)
-          "stroke-none"
-        ],
-        indeterminate: [
-          "fill-current",
-          // Uses parent text color (primary or error)
-          "stroke-none"
-        ]
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: ["fill-transparent", "stroke-current", "stroke-2"],
-        false: ""
-      }
-    },
-    compoundVariants: [
-      // Disabled state overrides fill for checked/indeterminate
-      {
-        state: "checked",
-        disabled: true,
-        className: "fill-current stroke-none"
-      },
-      {
-        state: "indeterminate",
-        disabled: true,
-        className: "fill-current stroke-none"
-      }
-    ],
-    defaultVariants: {
-      state: "unchecked",
-      disabled: false
-    }
-  }
-);
-var checkboxIconVariants = cva(
-  [
-    "fill-current",
-    // Inherits color from parent
-    "transition-all duration-200"
-  ],
-  {
-    variants: {
-      /**
-       * Icon type
-       */
-      type: {
-        check: "",
-        // Checkmark icon
-        dash: ""
-        // Dash/minus icon
-      }
-    },
-    defaultVariants: {
-      type: "check"
+var checkboxRootVariants = cva([
+  "relative inline-flex items-center cursor-pointer select-none",
+  "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  "data-[disabled]:opacity-38"
+]);
+var checkboxControlVariants = cva([
+  "relative flex items-center justify-center flex-shrink-0",
+  "w-10 h-10 rounded-full",
+  "overflow-hidden"
+]);
+var checkboxStateLayerVariants = cva([
+  "absolute inset-0 rounded-full pointer-events-none opacity-0",
+  // Base state-layer color (unselected)
+  "bg-on-surface",
+  // Effects transition for opacity changes
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected / indeterminate → primary color
+  "group-data-[selected]/checkbox:bg-primary",
+  "group-data-[indeterminate]/checkbox:bg-primary",
+  // Invalid → error color (singly-chained)
+  "group-data-[invalid]/checkbox:bg-error",
+  // Invalid + selected → error wins (doubly-chained for specificity)
+  "group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-error",
+  // Interaction opacities (MD3: hover 8%, focus-visible 10%, pressed 10%)
+  "group-data-[hovered]/checkbox:opacity-8",
+  "group-data-[focus-visible]/checkbox:opacity-10",
+  "group-data-[pressed]/checkbox:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/checkbox:hidden"
+]);
+var checkboxFocusRingVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "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]/checkbox:opacity-100"
+]);
+var checkboxBoxVariants = cva([
+  // Base geometry
+  "relative flex items-center justify-center flex-shrink-0",
+  "w-[18px] h-[18px] rounded-[2px] border-2",
+  // Effects transition for color changes
+  "transition-[background-color,border-color] duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // ── Unselected base ───────────────────────────────────────────────────────
+  "bg-transparent border-outline",
+  // ── Selected ──────────────────────────────────────────────────────────────
+  "group-data-[selected]/checkbox:bg-primary group-data-[selected]/checkbox:border-primary",
+  // ── Indeterminate ─────────────────────────────────────────────────────────
+  "group-data-[indeterminate]/checkbox:bg-primary group-data-[indeterminate]/checkbox:border-primary",
+  // ── Invalid (unselected) — singly chained ─────────────────────────────────
+  "group-data-[invalid]/checkbox:border-error",
+  // ── Invalid + selected — doubly chained (higher specificity) ──────────────
+  "group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-error",
+  "group-data-[invalid]/checkbox:group-data-[selected]/checkbox:border-error",
+  // ── Invalid + indeterminate — doubly chained ───────────────────────────────
+  "group-data-[invalid]/checkbox:group-data-[indeterminate]/checkbox:bg-error",
+  "group-data-[invalid]/checkbox:group-data-[indeterminate]/checkbox:border-error",
+  // ── Disabled (placed last — cascade wins over interaction colors) ──────────
+  "group-data-[disabled]/checkbox:border-on-surface/38",
+  "group-data-[disabled]/checkbox:bg-transparent",
+  // ── Disabled + selected — doubly chained ──────────────────────────────────
+  "group-data-[selected]/checkbox:group-data-[disabled]/checkbox:bg-on-surface/38",
+  "group-data-[selected]/checkbox:group-data-[disabled]/checkbox:border-transparent",
+  // ── Disabled + indeterminate — doubly chained ─────────────────────────────
+  "group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:bg-on-surface/38",
+  "group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:border-transparent"
+]);
+var checkboxIconVariants = cva([
+  "absolute inset-0 flex items-center justify-center",
+  // Spatial transition for icon appearing (scale)
+  "transition-transform duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+  // Base icon color
+  "text-on-primary",
+  // Invalid → on-error (doubly-chained for both selected and indeterminate)
+  "group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-on-error",
+  "group-data-[invalid]/checkbox:group-data-[indeterminate]/checkbox:text-on-error",
+  // Disabled → surface (doubly-chained)
+  "group-data-[selected]/checkbox:group-data-[disabled]/checkbox:text-surface",
+  "group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:text-surface"
+]);
+var checkboxLabelVariants = cva(["text-body-large text-on-surface select-none ml-4"]);
+function CheckboxCheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4.5 9L7.2 11.7L13.5 5.4",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "square",
+          strokeLinejoin: "miter"
+        }
+      )
     }
-  }
-);
-var checkboxLabelVariants = cva(
-  [
-    "text-sm",
-    // MD3: Body Medium (14px)
-    "text-on-surface",
-    "select-none"
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: false
+  );
+}
+function CheckboxIndeterminateIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("rect", { x: "4", y: "8", width: "10", height: "2", rx: "1", fill: "currentColor" })
     }
-  }
-);
+  );
+}
 var Checkbox = forwardRef(
   ({
-    // Content props
     children,
-    // State props
     isIndeterminate = false,
     isInvalid = false,
     disableRipple = false,
     isDisabled = false,
-    // Styling
     className,
-    // Other props
     ...props
   }, forwardedRef) => {
     const internalRef = useRef(null);
@@ -2876,17 +2803,17 @@ var Checkbox = forwardRef(
       "data-testid": _dataTestId,
       id: _htmlId,
       title: _htmlTitle,
-      ...restPropsWithoutHtmlAttrs
+      ...ariaProps
     } = props;
-    const state = useToggleState(restPropsWithoutHtmlAttrs);
-    const { inputProps, labelProps } = useCheckbox(
-      restPropsWithoutHtmlAttrs,
+    const state = useToggleState(ariaProps);
+    const { inputProps, labelProps, isPressed } = useCheckbox(
+      ariaProps,
       state,
       ref
     );
     const { isFocusVisible, focusProps } = useFocusRing();
+    const { isHovered, hoverProps } = useHover({ isDisabled });
     const isSelected = state.isSelected;
-    const visualState = isIndeterminate ? "indeterminate" : isSelected ? "checked" : "unchecked";
     const { onMouseDown: handleRipple, ripples } = useRipple({
       disabled: isDisabled || disableRipple
     });
@@ -2896,8 +2823,8 @@ var Checkbox = forwardRef(
       }
     }, [isIndeterminate, ref]);
     if (process.env.NODE_ENV === "development") {
-      const ariaProps = restPropsWithoutHtmlAttrs;
-      if (!children && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
+      const a = ariaProps;
+      if (!children && !a["aria-label"] && !a["aria-labelledby"]) {
         console.warn(
           "[Checkbox] Checkbox should have a label (children) or aria-label for accessibility."
         );
@@ -2906,105 +2833,40 @@ var Checkbox = forwardRef(
     return /* @__PURE__ */ jsxs(
       "label",
       {
-        ...labelProps,
-        className: cn(
-          checkboxVariants({
-            disabled: isDisabled
-          }),
-          className
-        ),
+        ...mergeProps$1(labelProps, hoverProps),
+        className: cn(checkboxRootVariants(), "group/checkbox", className),
         "data-testid": dataTestId,
         title: htmlTitle,
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isSelected,
+          isDisabled,
+          isInvalid,
+          isIndeterminate,
+          isReadOnly: ariaProps.isReadOnly ?? false
+        }),
         children: [
           /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps$1(inputProps, focusProps), ref, id: htmlId }) }),
           /* @__PURE__ */ jsxs(
             "div",
             {
               role: "presentation",
-              className: cn(
-                checkboxContainerVariants({
-                  state: visualState,
-                  isInvalid,
-                  disabled: isDisabled
-                })
-              ),
+              className: cn(checkboxControlVariants()),
               onMouseDown: handleRipple,
               children: [
                 ripples,
-                /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    width: "18",
-                    height: "18",
-                    viewBox: "0 0 18 18",
-                    "aria-hidden": "true",
-                    className: "relative z-10",
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "rect",
-                        {
-                          x: "0",
-                          y: "0",
-                          width: "18",
-                          height: "18",
-                          rx: "2",
-                          ry: "2",
-                          className: cn(
-                            checkboxIconBoxVariants({
-                              state: visualState,
-                              disabled: isDisabled
-                            })
-                          )
-                        }
-                      ),
-                      isSelected && !isIndeterminate && /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          d: "M14.1 4.5L6.3 12.3l-3.4-3.4L1.5 10.3l4.8 4.8 9.2-9.2z",
-                          className: cn(checkboxIconVariants({ type: "check" }), "fill-on-primary")
-                        }
-                      ),
-                      isIndeterminate && /* @__PURE__ */ jsx(
-                        "rect",
-                        {
-                          x: "4",
-                          y: "8",
-                          width: "10",
-                          height: "2",
-                          className: cn(checkboxIconVariants({ type: "dash" }), "fill-on-primary")
-                        }
-                      ),
-                      isFocusVisible && /* @__PURE__ */ jsx(
-                        "rect",
-                        {
-                          x: "-3",
-                          y: "-3",
-                          width: "24",
-                          height: "24",
-                          rx: "12",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          className: "animate-pulse"
-                        }
-                      )
-                    ]
-                  }
-                )
+                /* @__PURE__ */ jsx("span", { className: cn(checkboxStateLayerVariants()), "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: cn(checkboxFocusRingVariants()), "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxs("div", { className: cn(checkboxBoxVariants()), "aria-hidden": "true", children: [
+                  isSelected && !isIndeterminate && /* @__PURE__ */ jsx("span", { className: cn(checkboxIconVariants()), children: /* @__PURE__ */ jsx(CheckboxCheckIcon, {}) }),
+                  isIndeterminate && /* @__PURE__ */ jsx("span", { className: cn(checkboxIconVariants()), children: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}) })
+                ] })
               ]
             }
           ),
-          children && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                checkboxLabelVariants({
-                  disabled: isDisabled
-                })
-              ),
-              children
-            }
-          )
+          children && /* @__PURE__ */ jsx("span", { className: cn(checkboxLabelVariants()), children })
         ]
       }
     );
@@ -6601,18 +6463,43 @@ function SnackbarProvider({ children, maxVisible = 5 }) {
     )
   ] });
 }
+function stripAriaProps(handlers) {
+  const {
+    isDisabled: _isDisabled,
+    onPress: _onPress,
+    onPressStart: _onPressStart,
+    onPressEnd: _onPressEnd,
+    onPressChange: _onPressChange,
+    onPressUp: _onPressUp,
+    ...html
+  } = handlers;
+  return html;
+}
+function buildPressCallbacks(onPressStart, onPressEnd) {
+  return {
+    ...onPressStart !== void 0 && { onPressStart },
+    ...onPressEnd !== void 0 && { onPressEnd }
+  };
+}
 var AssistChipImpl = forwardRef(
-  ({ label, onPress, isDisabled, className, onMouseDown, children }, forwardedRef) => {
+  ({ label, onPress, isDisabled, className, onMouseDown, children, bodyPassthrough }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
     const { buttonProps } = useButton(
       {
         ...onPress !== void 0 && { onPress },
-        ...isDisabled !== void 0 && { isDisabled }
+        ...isDisabled !== void 0 && { isDisabled },
+        ...buildPressCallbacks(bodyPassthrough?.onPressStart, bodyPassthrough?.onPressEnd)
       },
       ref
     );
-    const mergedProps = mergeProps(buttonProps, { onMouseDown });
+    const htmlPassthrough = stripAriaProps(bodyPassthrough?.eventHandlers ?? {});
+    const mergedProps = mergeProps(
+      buttonProps,
+      { onMouseDown },
+      bodyPassthrough?.dataAttributes ?? {},
+      htmlPassthrough
+    );
     return /* @__PURE__ */ jsx("button", { ...mergedProps, type: "button", ref, className, children: children ?? label });
   }
 );
@@ -6626,7 +6513,8 @@ var FilterChipImpl = forwardRef(
     isDisabled,
     className,
     onMouseDown,
-    children
+    children,
+    bodyPassthrough
   }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
@@ -6634,11 +6522,18 @@ var FilterChipImpl = forwardRef(
       ...selected !== void 0 && { isSelected: selected },
       ...defaultSelected !== void 0 && { defaultSelected },
       ...onSelectionChange !== void 0 && { onChange: onSelectionChange },
-      ...isDisabled !== void 0 && { isDisabled }
+      ...isDisabled !== void 0 && { isDisabled },
+      ...buildPressCallbacks(bodyPassthrough?.onPressStart, bodyPassthrough?.onPressEnd)
     };
     const state = useToggleState(toggleProps);
     const { buttonProps } = useToggleButton(toggleProps, state, ref);
-    const mergedProps = mergeProps(buttonProps, { onMouseDown });
+    const htmlPassthrough = stripAriaProps(bodyPassthrough?.eventHandlers ?? {});
+    const mergedProps = mergeProps(
+      buttonProps,
+      { onMouseDown },
+      bodyPassthrough?.dataAttributes ?? {},
+      htmlPassthrough
+    );
     return /* @__PURE__ */ jsx("button", { ...mergedProps, type: "button", ref, className, children: children ?? label });
   }
 );
@@ -6652,7 +6547,9 @@ var InputChipImpl = forwardRef(
     onMouseDown,
     removeIcon,
     removeButtonClassName,
-    children
+    children,
+    bodyPassthrough,
+    removePassthrough
   }, forwardedRef) => {
     const chipRef = useRef(null);
     const ref = forwardedRef ?? chipRef;
@@ -6660,7 +6557,8 @@ var InputChipImpl = forwardRef(
     const { buttonProps: chipButtonProps } = useButton(
       {
         "aria-label": label,
-        ...isDisabled !== void 0 && { isDisabled }
+        ...isDisabled !== void 0 && { isDisabled },
+        ...buildPressCallbacks(bodyPassthrough?.onPressStart, bodyPassthrough?.onPressEnd)
       },
       ref
     );
@@ -6668,7 +6566,8 @@ var InputChipImpl = forwardRef(
       {
         "aria-label": `Remove ${label}`,
         onPress: () => onRemove?.(),
-        ...isDisabled !== void 0 && { isDisabled }
+        ...isDisabled !== void 0 && { isDisabled },
+        ...buildPressCallbacks(removePassthrough?.onPressStart, removePassthrough?.onPressEnd)
       },
       removeRef
     );
@@ -6678,13 +6577,25 @@ var InputChipImpl = forwardRef(
         onRemove?.();
       }
     };
-    const mergedChipProps = mergeProps(chipButtonProps, { onKeyDown: handleKeyDown, onMouseDown });
+    const htmlBodyPassthrough = stripAriaProps(bodyPassthrough?.eventHandlers ?? {});
+    const htmlRemovePassthrough = stripAriaProps(removePassthrough?.eventHandlers ?? {});
+    const mergedChipProps = mergeProps(
+      chipButtonProps,
+      { onKeyDown: handleKeyDown, onMouseDown },
+      bodyPassthrough?.dataAttributes ?? {},
+      htmlBodyPassthrough
+    );
+    const mergedRemoveProps = mergeProps(
+      removeButtonProps,
+      removePassthrough?.dataAttributes ?? {},
+      htmlRemovePassthrough
+    );
     return /* @__PURE__ */ jsxs("span", { className, children: [
       /* @__PURE__ */ jsx("button", { ...mergedChipProps, type: "button", ref, children: children ?? label }),
       /* @__PURE__ */ jsx(
         "button",
         {
-          ...removeButtonProps,
+          ...mergedRemoveProps,
           type: "button",
           ref: removeRef,
           className: removeButtonClassName,
@@ -6696,17 +6607,24 @@ var InputChipImpl = forwardRef(
 );
 InputChipImpl.displayName = "InputChipImpl";
 var SuggestionChipImpl = forwardRef(
-  ({ label, onPress, isDisabled, className, onMouseDown, children }, forwardedRef) => {
+  ({ label, onPress, isDisabled, className, onMouseDown, children, bodyPassthrough }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
     const { buttonProps } = useButton(
       {
         ...onPress !== void 0 && { onPress },
-        ...isDisabled !== void 0 && { isDisabled }
+        ...isDisabled !== void 0 && { isDisabled },
+        ...buildPressCallbacks(bodyPassthrough?.onPressStart, bodyPassthrough?.onPressEnd)
       },
       ref
     );
-    const mergedProps = mergeProps(buttonProps, { onMouseDown });
+    const htmlPassthrough = stripAriaProps(bodyPassthrough?.eventHandlers ?? {});
+    const mergedProps = mergeProps(
+      buttonProps,
+      { onMouseDown },
+      bodyPassthrough?.dataAttributes ?? {},
+      htmlPassthrough
+    );
     return /* @__PURE__ */ jsx("button", { ...mergedProps, type: "button", ref, className, children: children ?? label });
   }
 );
@@ -6726,123 +6644,246 @@ var ChipHeadless = forwardRef((props, ref) => {
 ChipHeadless.displayName = "ChipHeadless";
 var chipVariants = cva(
   [
-    // Base layout — always applied
-    "relative inline-flex items-center overflow-hidden rounded-sm h-8",
-    "text-label-large cursor-pointer gap-1 group px-4",
-    // Focus ring
-    "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2"
+    // Layout + shape
+    "relative inline-flex items-center justify-center",
+    "h-8 rounded-sm cursor-pointer select-none",
+    "text-label-large gap-2",
+    // Base padding (no icons)
+    "px-4",
+    // Content-flag padding overrides (self-targeting)
+    "data-[with-leading]:pl-2 data-[with-leading]:pr-4",
+    "data-[with-trailing]:pr-2",
+    // Effects transition (color/bg/shadow/border)
+    "transition-[background-color,border-color,box-shadow,color]",
+    "duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled self-targeting
+    "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+    "data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12",
+    "data-[disabled]:bg-transparent data-[disabled]:shadow-none"
   ],
   {
     variants: {
       /**
-       * MD3 chip type — determines interaction model and default styling.
+       * MD3 chip type — determines base color tokens.
        */
       chipType: {
-        assist: "",
-        // Filter and Input chips have a fixed tonal surface style.
-        // The transition is on the base class so deselection also animates
-        // (adding it only in the selected compound variant would mean the
-        // transition property disappears at the same moment the color reverts,
-        // causing an instant jump back to the unselected color).
-        filter: "bg-surface-container-low text-on-surface border border-outline transition-[background-color,color] duration-short4 ease-standard",
-        input: "bg-surface-container-low text-on-surface border border-outline",
-        suggestion: ""
+        /**
+         * Assist — transparent + outline border; label on-surface; leading icon primary.
+         * State layer color: on-surface.
+         */
+        assist: ["bg-transparent border border-outline text-on-surface"],
+        /**
+         * Filter — transparent + outline border; label on-surface-variant.
+         * Selected state via group-data selectors (no CVA variant key).
+         * State layer color: on-surface-variant → on-secondary-container when selected.
+         */
+        filter: [
+          "bg-transparent border border-outline text-on-surface-variant",
+          // Selected: secondary-container fill, no border, on-secondary-container label
+          "group-data-[selected]/chip:bg-secondary-container",
+          "group-data-[selected]/chip:border-0",
+          "group-data-[selected]/chip:text-on-secondary-container",
+          // Disabled + selected overrides (self-targeting, doubled to win over singly-chained selected)
+          "data-[selected]:data-[disabled]:bg-on-surface/12",
+          "data-[selected]:data-[disabled]:border-0"
+        ],
+        /**
+         * Input — transparent + outline-variant border; label/icons on-surface-variant.
+         * State layer color: on-surface-variant.
+         */
+        input: ["bg-transparent border border-outline-variant text-on-surface-variant"],
+        /**
+         * Suggestion — transparent + outline border; label on-surface-variant.
+         * State layer color: on-surface-variant.
+         */
+        suggestion: ["bg-transparent border border-outline text-on-surface-variant"]
       },
       /**
-       * Surface style for Assist and Suggestion chips only.
-       * Applied via compound variants so it has no effect on Filter/Input.
+       * Surface style — elevated adds shadow and surface-container-low background.
+       * All four chip types support elevated.
+       * Note: "flat" and the deprecated "tonal" both resolve to the same base style
+       * (transparent + border from chipType). The elevated compound variant overrides.
        */
       surface: {
-        tonal: "",
-        elevated: ""
-      },
-      /**
-       * Selected state — only meaningful for Filter chips.
-       * Applied via compound variant.
-       */
-      selected: {
-        true: "",
-        false: ""
-      },
-      /**
-       * MD3 disabled state: content 38% opacity, border 12% opacity, no background.
-       * Kept here only for `pointer-events-none`; color/bg overrides live in the
-       * disabled compound variants at the bottom so they win over surface compounds.
-       */
-      isDisabled: {
-        true: "pointer-events-none",
-        false: ""
-      },
-      /**
-       * Adjusts leading padding when a leading icon is present.
-       * Overrides the base `px-4` → `pl-3 pr-4`.
-       */
-      hasLeadingIcon: {
-        true: "pl-3 pr-4",
-        false: ""
-      },
-      /**
-       * Adjusts trailing padding for Input chips with a remove button.
-       * Takes precedence over hasLeadingIcon via tailwind-merge: `pl-3 pr-3`.
-       */
-      hasRemoveButton: {
-        true: "pl-3 pr-3",
-        false: ""
+        flat: "",
+        elevated: "",
+        /** @deprecated Use `flat` instead. */
+        tonal: ""
       }
     },
     compoundVariants: [
-      // ── Assist chip surfaces ───────────────────────────────────────────────
+      // ── Elevated surface (all chip types) ─────────────────────────────────
+      // Shared elevated base: surface-container-low fill, no border, level-1 elevation
       {
+        surface: "elevated",
         chipType: "assist",
-        surface: "tonal",
-        className: "bg-surface-container-low text-on-surface border border-outline"
+        className: [
+          "bg-surface-container-low border-0 shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-2",
+          "data-[focus-visible]:shadow-elevation-1",
+          "data-[pressed]:data-[pressed]:shadow-elevation-1"
+        ]
       },
       {
-        chipType: "assist",
         surface: "elevated",
+        chipType: "filter",
         className: [
-          "bg-surface-container-low text-on-surface shadow-elevation-1",
-          "hover:shadow-elevation-2 transition-shadow duration-short2 ease-standard"
+          "bg-surface-container-low border-0 shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-2",
+          "data-[focus-visible]:shadow-elevation-1",
+          "data-[pressed]:data-[pressed]:shadow-elevation-1",
+          // Selected overrides bg; elevation stays
+          "group-data-[selected]/chip:bg-secondary-container"
         ]
       },
-      // ── Suggestion chip surfaces ───────────────────────────────────────────
       {
-        chipType: "suggestion",
-        surface: "tonal",
-        className: "bg-surface-container-low text-on-surface border border-outline"
+        surface: "elevated",
+        chipType: "input",
+        className: [
+          "bg-surface-container-low border-0 shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-2",
+          "data-[focus-visible]:shadow-elevation-1",
+          "data-[pressed]:data-[pressed]:shadow-elevation-1"
+        ]
       },
       {
-        chipType: "suggestion",
         surface: "elevated",
+        chipType: "suggestion",
         className: [
-          "bg-surface-container-low text-on-surface shadow-elevation-1",
-          "hover:shadow-elevation-2 transition-shadow duration-short2 ease-standard"
+          "bg-surface-container-low border-0 shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-2",
+          "data-[focus-visible]:shadow-elevation-1",
+          "data-[pressed]:data-[pressed]:shadow-elevation-1"
         ]
       },
-      // ── Filter chip selected state ─────────────────────────────────────────
+      // Deprecated tonal maps to flat (same as no override)
       {
+        surface: "tonal",
+        chipType: "assist",
+        className: ""
+      },
+      {
+        surface: "tonal",
         chipType: "filter",
-        selected: true,
-        className: "bg-secondary-container text-on-secondary-container border-0"
+        className: ""
       },
-      // ── Disabled overrides — placed last so they always win ────────────────
-      // These must follow all surface/selection compound variants to ensure
-      // tailwind-merge keeps the disabled classes over any surface classes.
       {
-        isDisabled: true,
-        className: "text-on-surface/38 border-on-surface/12 bg-transparent"
+        surface: "tonal",
+        chipType: "input",
+        className: ""
+      },
+      {
+        surface: "tonal",
+        chipType: "suggestion",
+        className: ""
       }
     ],
     defaultVariants: {
       chipType: "assist",
-      surface: "tonal",
-      selected: false,
-      isDisabled: false,
-      hasLeadingIcon: false,
-      hasRemoveButton: false
+      surface: "flat"
     }
   }
 );
+var chipStateLayerVariants = cva(
+  [
+    "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Hover: 8%
+    "group-data-[hovered]/chip:opacity-8",
+    // Focus: 10%
+    "group-data-[focus-visible]/chip:opacity-10",
+    // Pressed: 10%, doubled selector wins over hover
+    "group-data-[pressed]/chip:group-data-[pressed]/chip:opacity-10",
+    // No state layer when disabled
+    "group-data-[disabled]/chip:hidden"
+  ],
+  {
+    variants: {
+      chipType: {
+        assist: "bg-on-surface",
+        filter: [
+          "bg-on-surface-variant",
+          // Selected: switch to on-secondary-container color
+          "group-data-[selected]/chip:bg-on-secondary-container"
+        ],
+        input: "bg-on-surface-variant",
+        suggestion: "bg-on-surface-variant"
+      }
+    },
+    defaultVariants: { chipType: "assist" }
+  }
+);
+var chipFocusRingVariants = cva([
+  "pointer-events-none absolute inset-[-3px] rounded-sm",
+  "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]/chip:opacity-100"
+]);
+var chipLeadingIconVariants = cva(
+  [
+    "relative z-10 inline-flex shrink-0 items-center justify-center size-[18px]",
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    "group-data-[disabled]/chip:text-on-surface/38"
+  ],
+  {
+    variants: {
+      chipType: {
+        assist: "text-primary",
+        filter: [
+          "text-on-surface-variant",
+          "group-data-[selected]/chip:text-on-secondary-container"
+        ],
+        input: "text-on-surface-variant",
+        suggestion: "text-on-surface-variant"
+      }
+    },
+    defaultVariants: { chipType: "assist" }
+  }
+);
+var chipTrailingIconVariants = cva([
+  "relative z-10 inline-flex shrink-0 items-center justify-center size-[18px]",
+  "text-on-surface-variant",
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[disabled]/chip:text-on-surface/38"
+]);
+var chipCheckmarkVariants = cva([
+  "inline-flex overflow-hidden shrink-0",
+  // Spatial spring for width (moves adjacent text — this is a spatial animation)
+  "transition-[width] duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+  // Collapsed state
+  "w-0",
+  // Expanded state when selected
+  "group-data-[selected]/chip:w-[18px]"
+]);
+var chipCheckmarkIconVariants = cva([
+  "inline-flex items-center justify-center size-[18px] shrink-0",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[selected]/chip:opacity-100",
+  // Color: on-secondary-container when selected; inherits on-surface-variant at rest (invisible)
+  "text-on-secondary-container",
+  "group-data-[disabled]/chip:text-on-surface/38"
+]);
+var chipLabelVariants = cva(["relative z-10 inline-flex items-center"]);
+var chipRemoveButtonVariants = cva([
+  "relative z-10 inline-flex size-[18px] shrink-0 items-center justify-center",
+  "rounded-full cursor-pointer",
+  "text-on-surface-variant",
+  "group/chip-remove",
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
+]);
+var chipRemoveStateLayerVariants = cva([
+  // Slightly larger circle (32dp touch target centered on 18dp icon)
+  "absolute inset-[-7px] rounded-full pointer-events-none opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/chip-remove:opacity-8",
+  "group-data-[focus-visible]/chip-remove:opacity-10",
+  "group-data-[pressed]/chip-remove:group-data-[pressed]/chip-remove:opacity-10",
+  "group-data-[disabled]/chip-remove:hidden"
+]);
 var CloseIcon2 = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -6867,22 +6908,11 @@ var CheckIcon2 = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
   }
 );
-var StateLayer = () => /* @__PURE__ */ jsx(
-  "span",
-  {
-    "aria-hidden": "true",
-    className: cn(
-      "bg-on-surface pointer-events-none absolute inset-0 rounded-sm opacity-0",
-      "duration-spring-standard-fast-effects ease-spring-standard-fast-effects transition-opacity",
-      "group-focus-within:opacity-12 group-hover:opacity-8 group-active:opacity-12"
-    )
-  }
-);
 var Chip = forwardRef(
   ({
     type,
     label,
-    surface = "tonal",
+    surface: surfaceProp = "flat",
     selected,
     defaultSelected,
     onSelectionChange,
@@ -6893,6 +6923,17 @@ var Chip = forwardRef(
     isDisabled = false,
     className
   }, ref) => {
+    const surface = (() => {
+      if (surfaceProp === "tonal") {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            '[Chip] surface="tonal" is deprecated. Use surface="flat" instead. "tonal" will be removed in a future minor version.'
+          );
+        }
+        return "flat";
+      }
+      return surfaceProp;
+    })();
     const [localSelected, setLocalSelected] = useState(defaultSelected ?? false);
     const isControlled = selected !== void 0;
     const effectiveSelected = type === "filter" ? isControlled ? selected : localSelected : false;
@@ -6905,8 +6946,16 @@ var Chip = forwardRef(
       },
       [isControlled, onSelectionChange]
     );
+    const [isPressed, setIsPressed] = useState(false);
+    const handlePressStart = useCallback(() => setIsPressed(true), []);
+    const handlePressEnd = useCallback(() => setIsPressed(false), []);
+    const { isHovered, hoverProps } = useHover({ isDisabled });
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const [isRemovePressed, setIsRemovePressed] = useState(false);
+    const { isHovered: isRemoveHovered, hoverProps: removeHoverProps } = useHover({ isDisabled });
+    const { isFocusVisible: isRemoveFocusVisible, focusProps: removeFocusProps } = useFocusRing();
     const { onMouseDown: handleRipple, ripples } = useRipple({ disabled: isDisabled });
-    const hasLeadingIcon = Boolean(leadingIcon);
+    const hasLeadingIcon = Boolean(leadingIcon) || type === "filter";
     const [isRemoving, setIsRemoving] = useState(false);
     const handleRemove = useCallback(() => {
       setIsRemoving(true);
@@ -6916,35 +6965,38 @@ var Chip = forwardRef(
         onRemove?.();
       }
     }, [isRemoving, onRemove]);
-    const chipClass = () => cn(
-      chipVariants({
-        chipType: type,
-        surface: type === "assist" || type === "suggestion" ? surface : void 0,
-        selected: type === "filter" ? effectiveSelected : void 0,
-        isDisabled,
-        hasLeadingIcon,
-        hasRemoveButton: false
-      }),
-      className
-    );
+    const bodyDataAttrs = getInteractionDataAttributes({
+      isHovered,
+      isFocusVisible,
+      isPressed,
+      ...type === "filter" && { isSelected: effectiveSelected },
+      isDisabled
+    });
+    const rootClass = cn(chipVariants({ chipType: type, surface }), "group/chip", className);
     if (type === "input") {
+      const removeDataAttrs = getInteractionDataAttributes({
+        isHovered: isRemoveHovered,
+        isFocusVisible: isRemoveFocusVisible,
+        isPressed: isRemovePressed,
+        isDisabled
+      });
       return /* @__PURE__ */ jsxs(
         "span",
         {
           className: cn(
-            chipVariants({
-              chipType: "input",
-              isDisabled,
-              hasLeadingIcon,
-              hasRemoveButton: true
-            }),
+            chipVariants({ chipType: "input", surface }),
+            "group/chip",
             isRemoving && "animate-md-fade-out",
             className
           ),
+          ...bodyDataAttrs,
+          "data-with-leading": hasLeadingIcon ? "" : void 0,
+          "data-with-trailing": "",
           onAnimationEnd: handleAnimationEnd,
           children: [
             ripples,
-            /* @__PURE__ */ jsx(StateLayer, {}),
+            /* @__PURE__ */ jsx("span", { className: cn(chipStateLayerVariants({ chipType: "input" })), "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: cn(chipFocusRingVariants()), "aria-hidden": "true" }),
             /* @__PURE__ */ jsxs(
               ChipHeadless,
               {
@@ -6953,20 +7005,40 @@ var Chip = forwardRef(
                 isDisabled,
                 onRemove: handleRemove,
                 onMouseDown: handleRipple,
-                removeIcon: /* @__PURE__ */ jsx(CloseIcon2, {}),
-                removeButtonClassName: "relative z-10 inline-flex size-4.5 shrink-0 items-center text-on-surface-variant",
+                removeButtonClassName: cn(chipRemoveButtonVariants()),
+                removeIcon: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(chipRemoveStateLayerVariants()),
+                      "aria-hidden": "true",
+                      ...{ "data-remove-state-layer": "" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(CloseIcon2, {})
+                ] }),
                 ref,
                 className: "contents",
+                bodyPassthrough: {
+                  onPressStart: handlePressStart,
+                  onPressEnd: handlePressEnd
+                },
+                removePassthrough: {
+                  dataAttributes: removeDataAttrs,
+                  eventHandlers: mergeProps$1(removeHoverProps, removeFocusProps),
+                  onPressStart: () => setIsRemovePressed(true),
+                  onPressEnd: () => setIsRemovePressed(false)
+                },
                 children: [
                   leadingIcon && /* @__PURE__ */ jsx(
                     "span",
                     {
                       "aria-hidden": "true",
-                      className: "relative z-10 inline-flex size-4.5 shrink-0 items-center",
+                      className: cn(chipLeadingIconVariants({ chipType: "input" })),
                       children: leadingIcon
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "relative z-10", children: label })
+                  /* @__PURE__ */ jsx("span", { className: cn(chipLabelVariants()), children: label })
                 ]
               }
             )
@@ -6987,37 +7059,21 @@ var Chip = forwardRef(
         ...type !== "filter" && onPress !== void 0 && { onPress },
         isDisabled,
         onMouseDown: handleRipple,
-        className: chipClass(),
+        className: cn(rootClass),
+        bodyPassthrough: {
+          dataAttributes: bodyDataAttrs,
+          onPressStart: handlePressStart,
+          onPressEnd: handlePressEnd,
+          eventHandlers: mergeProps$1(hoverProps, focusProps)
+        },
         children: [
           ripples,
-          /* @__PURE__ */ jsx(StateLayer, {}),
-          type === "filter" && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "duration-short4 ease-emphasized-decelerate inline-flex overflow-hidden transition-[width,opacity]",
-                effectiveSelected ? "w-4.5 opacity-100" : "w-0 opacity-0"
-              ),
-              children: /* @__PURE__ */ jsx(CheckIcon2, {})
-            }
-          ),
-          leadingIcon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "relative z-10 inline-flex size-4.5 shrink-0 items-center",
-              children: leadingIcon
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "relative z-10", children: label }),
-          trailingIcon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "relative z-10 inline-flex size-4.5 shrink-0 items-center",
-              children: trailingIcon
-            }
-          )
+          /* @__PURE__ */ jsx("span", { className: cn(chipStateLayerVariants({ chipType: type })), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: cn(chipFocusRingVariants()), "aria-hidden": "true" }),
+          type === "filter" && /* @__PURE__ */ jsx("span", { className: cn(chipCheckmarkVariants()), "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: cn(chipCheckmarkIconVariants()), children: /* @__PURE__ */ jsx(CheckIcon2, {}) }) }),
+          leadingIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(chipLeadingIconVariants({ chipType: type })), children: leadingIcon }),
+          /* @__PURE__ */ jsx("span", { className: cn(chipLabelVariants()), children: label }),
+          trailingIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(chipTrailingIconVariants()), children: trailingIcon })
         ]
       }
     );