@tinybigui/react 0.8.1 → 0.10.0

package/dist/index.js

@@ -206,65 +206,111 @@ function useScrollElevation(options = {}) {
   };
 }
 var AppBarHeadless = forwardRef(
-  ({ className, children, scrolled: scrolledProp, onScrollStateChange }, ref) => {
+  ({ className, children, scrolled: scrolledProp, onScrollStateChange, ...htmlProps }, ref) => {
     const { isScrolled } = useScrollElevation({
       scrolled: scrolledProp,
       onScrollStateChange
     });
-    return /* @__PURE__ */ jsx("header", { ref, role: "banner", className, "data-scrolled": isScrolled, children });
+    return /* @__PURE__ */ jsx(
+      "header",
+      {
+        ...htmlProps,
+        ref,
+        role: "banner",
+        className,
+        "data-scrolled": isScrolled ? "" : void 0,
+        children
+      }
+    );
   }
 );
 AppBarHeadless.displayName = "AppBarHeadless";
 var appBarVariants = cva(
   [
-    // Base classes (always applied)
-    "w-full",
+    // Layout
+    "w-full flex flex-col",
+    // Color (base — at rest)
     "bg-surface text-on-surface",
-    "flex flex-col",
-    // Elevation transition using MD3 motion tokens
-    "transition-shadow duration-medium2 ease-standard"
+    // Elevation base
+    "shadow-elevation-0",
+    // Scroll state — effects properties animated with standard spring (no overshoot)
+    "transition-[background-color,box-shadow]",
+    "duration-spring-standard-default-effects",
+    "ease-spring-standard-default-effects",
+    // On scroll: surface-container background + elevation-2
+    "group-data-[scrolled]/appbar:bg-surface-container",
+    "group-data-[scrolled]/appbar:shadow-elevation-2"
   ],
   {
     variants: {
       /**
-       * Size variant (MD3 specification)
-       * Controls bar height, title placement, and type scale
+       * Size variant — controls bar height and which title row is shown.
+       * With-subtitle height growth is handled via group-data-[with-subtitle]/appbar below.
        */
       variant: {
-        /** 64dp, title left-aligned, title-large */
+        /** 64dp fixed — title left-aligned in top row */
         small: "h-appbar-small",
-        /** 64dp, title centered, title-large */
-        "center-aligned": "h-appbar-small variant-center-aligned",
-        /** min 112dp, title bottom-left, headline-medium (grows with subtitle) */
-        medium: "min-h-appbar-medium",
-        /** min 120dp, title bottom-left, display-small (grows with subtitle) */
-        large: "min-h-appbar-large"
-      },
-      /**
-       * Scroll state — controls surface elevation and background color
-       * MD3: flat surface at rest → surface-container background + elevation-2 on scroll
-       */
-      scrolled: {
-        false: "shadow-elevation-0",
-        true: "bg-surface-container shadow-elevation-2"
+        /** 64dp fixed — title centered in top row */
+        "center-aligned": "h-appbar-small",
+        /**
+         * 112dp no-subtitle / 136dp with-subtitle — title in expanded bottom row.
+         * group-data-[with-subtitle]/appbar switches to the taller token.
+         */
+        medium: [
+          "min-h-appbar-medium",
+          "group-data-[with-subtitle]/appbar:min-h-appbar-medium-subtitle"
+        ],
+        /**
+         * 120dp no-subtitle / 152dp with-subtitle — title in expanded bottom row.
+         * group-data-[with-subtitle]/appbar switches to the taller token.
+         */
+        large: [
+          "min-h-appbar-large",
+          "group-data-[with-subtitle]/appbar:min-h-appbar-large-subtitle"
+        ]
       }
     },
     defaultVariants: {
-      variant: "small",
-      scrolled: false
+      variant: "small"
+    }
+  }
+);
+var appBarTopRowVariants = cva(["flex items-center justify-between", "px-1"], {
+  variants: {
+    variant: {
+      small: "flex-1",
+      "center-aligned": "flex-1",
+      medium: "h-16 shrink-0",
+      large: "h-16 shrink-0"
+    }
+  },
+  defaultVariants: {
+    variant: "small"
+  }
+});
+var appBarLeadingVariants = cva(["flex shrink-0 items-center", "text-on-surface"]);
+var appBarHeadlineBlockVariants = cva(
+  ["flex min-w-0 flex-1 flex-col justify-center", "px-1"],
+  {
+    variants: {
+      variant: {
+        small: "",
+        "center-aligned": "items-center text-center",
+        medium: "",
+        large: ""
+      }
+    },
+    defaultVariants: {
+      variant: "small"
     }
   }
 );
 var appBarTitleVariants = cva("text-on-surface font-normal", {
   variants: {
     variant: {
-      /** title-large: 22px / 28px line-height */
       small: "text-title-large truncate",
-      /** title-large: 22px / 28px line-height, centered */
       "center-aligned": "text-title-large truncate",
-      /** headline-medium: 28px / 36px line-height */
       medium: "text-headline-medium",
-      /** display-small: 36px / 44px line-height */
       large: "text-display-small"
     }
   },
@@ -272,23 +318,27 @@ var appBarTitleVariants = cva("text-on-surface font-normal", {
     variant: "small"
   }
 });
-var appBarSubtitleVariants = cva("font-normal", {
+var appBarSubtitleVariants = cva("text-on-surface-variant font-normal", {
   variants: {
     variant: {
-      /** title-medium: 16px / 24px, on-surface-variant color */
-      small: "text-title-medium text-on-surface-variant truncate",
-      /** title-medium: 16px / 24px, centered, on-surface-variant color */
-      "center-aligned": "text-title-medium text-on-surface-variant truncate",
-      /** title-large: 22px / 28px, on-surface color */
-      medium: "text-title-large text-on-surface",
-      /** headline-small: 24px / 32px, on-surface color */
-      large: "text-headline-small text-on-surface"
+      small: "text-label-medium truncate",
+      "center-aligned": "text-label-medium truncate",
+      medium: "text-label-large",
+      large: "text-title-medium"
     }
   },
   defaultVariants: {
     variant: "small"
   }
 });
+var appBarTrailingVariants = cva([
+  "flex shrink-0 items-center gap-0.5",
+  "text-on-surface-variant"
+]);
+var appBarExpandedTitleVariants = cva([
+  "flex flex-1 flex-col justify-end",
+  "gap-0.5 px-4 pb-4"
+]);
 var AppBar = forwardRef(
   ({
     variant = "small",
@@ -305,76 +355,54 @@ var AppBar = forwardRef(
       onScrollStateChange
     });
     const isExpandedVariant = variant === "medium" || variant === "large";
+    const hasSubtitle = subtitle != null;
     return /* @__PURE__ */ jsxs(
       AppBarHeadless,
       {
         ref,
         scrolled: isScrolled,
-        className: cn(appBarVariants({ variant, scrolled: isScrolled }), className),
+        className: cn(
+          appBarVariants({ variant }),
+          // group/appbar: enables group-data-[scrolled]/appbar and
+          // group-data-[with-subtitle]/appbar child selectors in all slots
+          "group/appbar",
+          className
+        ),
+        "data-with-subtitle": hasSubtitle ? "" : void 0,
         children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "data-slot": "top-row",
-              className: cn(
-                "flex items-center justify-between",
-                "px-1",
-                // Small and center-aligned: fill the full bar height
-                !isExpandedVariant && "flex-1",
-                // Expanded variants: fixed height for the top row (64dp)
-                isExpandedVariant && "h-16 shrink-0"
-              ),
-              children: [
-                navigationIcon != null && /* @__PURE__ */ jsx("div", { "data-slot": "navigation", className: "flex shrink-0 items-center", children: navigationIcon }),
-                !isExpandedVariant && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "flex min-w-0 flex-1 flex-col justify-center px-1",
-                      variant === "center-aligned" && "text-center"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx("span", { "data-testid": "appbar-title", className: cn(appBarTitleVariants({ variant })), children: title }),
-                      subtitle != null && /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          "data-testid": "appbar-subtitle",
-                          className: cn(appBarSubtitleVariants({ variant })),
-                          children: subtitle
-                        }
-                      )
-                    ]
-                  }
-                ),
-                actions != null && /* @__PURE__ */ jsx("div", { "data-slot": "actions", className: "flex shrink-0 items-center gap-0.5", children: actions })
-              ]
-            }
-          ),
-          isExpandedVariant && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "data-slot": "expanded-title",
-              className: cn("flex flex-1 flex-col justify-end", "gap-0.5 px-4 pb-4"),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    "data-testid": "appbar-title",
-                    className: cn("min-w-0", appBarTitleVariants({ variant })),
-                    children: title
-                  }
-                ),
-                subtitle != null && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    "data-testid": "appbar-subtitle",
-                    className: cn("min-w-0", appBarSubtitleVariants({ variant })),
-                    children: subtitle
-                  }
-                )
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxs("div", { "data-slot": "top-row", className: cn(appBarTopRowVariants({ variant })), children: [
+            navigationIcon != null && /* @__PURE__ */ jsx("div", { "data-slot": "navigation", className: cn(appBarLeadingVariants()), children: navigationIcon }),
+            !isExpandedVariant && /* @__PURE__ */ jsxs("div", { className: cn(appBarHeadlineBlockVariants({ variant })), children: [
+              /* @__PURE__ */ jsx("span", { "data-testid": "appbar-title", className: cn(appBarTitleVariants({ variant })), children: title }),
+              hasSubtitle && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-testid": "appbar-subtitle",
+                  className: cn(appBarSubtitleVariants({ variant })),
+                  children: subtitle
+                }
+              )
+            ] }),
+            actions != null && /* @__PURE__ */ jsx("div", { "data-slot": "actions", className: cn(appBarTrailingVariants()), children: actions })
+          ] }),
+          isExpandedVariant && /* @__PURE__ */ jsxs("div", { "data-slot": "expanded-title", className: cn(appBarExpandedTitleVariants()), children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-testid": "appbar-title",
+                className: cn("min-w-0", appBarTitleVariants({ variant })),
+                children: title
+              }
+            ),
+            hasSubtitle && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-testid": "appbar-subtitle",
+                className: cn("min-w-0", appBarSubtitleVariants({ variant })),
+                children: subtitle
+              }
+            )
+          ] })
         ]
       }
     );
@@ -6463,18 +6491,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 });
   }
 );
@@ -6488,7 +6541,8 @@ var FilterChipImpl = forwardRef(
     isDisabled,
     className,
     onMouseDown,
-    children
+    children,
+    bodyPassthrough
   }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
@@ -6496,11 +6550,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 });
   }
 );
@@ -6514,7 +6575,9 @@ var InputChipImpl = forwardRef(
     onMouseDown,
     removeIcon,
     removeButtonClassName,
-    children
+    children,
+    bodyPassthrough,
+    removePassthrough
   }, forwardedRef) => {
     const chipRef = useRef(null);
     const ref = forwardedRef ?? chipRef;
@@ -6522,7 +6585,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
     );
@@ -6530,7 +6594,8 @@ var InputChipImpl = forwardRef(
       {
         "aria-label": `Remove ${label}`,
         onPress: () => onRemove?.(),
-        ...isDisabled !== void 0 && { isDisabled }
+        ...isDisabled !== void 0 && { isDisabled },
+        ...buildPressCallbacks(removePassthrough?.onPressStart, removePassthrough?.onPressEnd)
       },
       removeRef
     );
@@ -6540,13 +6605,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,
@@ -6558,17 +6635,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 });
   }
 );
@@ -6588,123 +6672,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",
   {
@@ -6729,22 +6936,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,
@@ -6755,6 +6951,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;
@@ -6767,8 +6974,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);
@@ -6778,35 +6993,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,
               {
@@ -6815,20 +7033,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 })
                 ]
               }
             )
@@ -6849,37 +7087,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 })
         ]
       }
     );