@tinybigui/react 0.11.0 → 0.11.2

package/dist/index.cjs

@@ -3672,10 +3672,9 @@ var Tabs = React.forwardRef(
 Tabs.displayName = "Tabs";
 var tabListVariants = classVarianceAuthority.cva(
   [
-    // Base classes
     "relative flex",
     "bg-surface",
-    // Bottom divider line (MD3 spec)
+    // MD3: 1dp bottom divider in outline-variant color
     "border-b border-outline-variant"
   ],
   {
@@ -3692,108 +3691,110 @@ var tabListVariants = classVarianceAuthority.cva(
 );
 var tabVariants = classVarianceAuthority.cva(
   [
-    // Base layout
+    // Layout
     "relative flex flex-col items-center justify-center",
     "min-h-12 px-4",
     "cursor-pointer select-none",
+    // Clip state layer to tab boundary
     "overflow-hidden",
-    // Typography: MD3 Title Small
-    "text-sm font-medium tracking-[0.1px]",
-    // Transition
-    "transition-colors duration-200",
-    // Focus visible
+    // MD3 Title Small typography
+    "text-title-small font-medium tracking-[0.1px]",
+    // Effects transition for color changes (not spatial)
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Remove default button focus outline — handled via group-data-[focus-visible]/tab
     "focus-visible:outline-none",
-    // State layer via before pseudo-element
-    "before:absolute before:inset-0 before:transition-opacity before:duration-200",
-    "before:bg-current before:opacity-0",
-    "hover:before:opacity-8",
-    "active:before:opacity-12",
-    "focus-visible:before:opacity-12"
+    // Disabled — self-targeting data-[x]: selectors (not group)
+    "data-[disabled]:opacity-38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+    // Icon+label stacked: 64dp height
+    "data-[with-icon]:data-[with-label]:min-h-16"
   ],
   {
     variants: {
       /**
-       * Tab variant (Primary or Secondary)
+       * Design-time variant: affects active label/icon color and state-layer color.
+       * primary: active → text-primary
+       * secondary: active → text-on-surface
        */
       variant: {
-        primary: "",
-        secondary: ""
-      },
-      /**
-       * Selected state
-       */
-      selected: {
-        true: "",
-        false: ""
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "opacity-38 cursor-not-allowed pointer-events-none",
-        false: ""
+        primary: [
+          // Inactive: on-surface-variant (base)
+          "text-on-surface-variant",
+          // Active: text-primary
+          "group-data-[selected]/tab:text-primary"
+          // Disabled active: on-surface/38 inherits from opacity-38 on root
+        ],
+        secondary: [
+          // Inactive: on-surface-variant (base)
+          "text-on-surface-variant",
+          // Active: on-surface
+          "group-data-[selected]/tab:text-on-surface"
+        ]
       },
       /**
-       * Layout determines min-width behavior
+       * Design-time variant: affects flex sizing in the tab row.
        */
       layout: {
         fixed: "flex-1",
         scrollable: "min-w-[90px] shrink-0"
       }
     },
-    compoundVariants: [
-      // Primary + selected
-      {
-        variant: "primary",
-        selected: true,
-        disabled: false,
-        className: "text-primary"
-      },
-      // Primary + unselected
-      {
-        variant: "primary",
-        selected: false,
-        disabled: false,
-        className: "text-on-surface-variant"
-      },
-      // Secondary + selected
-      {
-        variant: "secondary",
-        selected: true,
-        disabled: false,
-        className: "text-on-surface"
-      },
-      // Secondary + unselected
-      {
-        variant: "secondary",
-        selected: false,
-        disabled: false,
-        className: "text-on-surface-variant"
-      }
-    ],
+    // compoundVariants intentionally empty — state combinations are handled
+    // via group-data-[selected]/tab:group-data-[...]/tab: in state slot
+    compoundVariants: [],
     defaultVariants: {
       variant: "primary",
-      selected: false,
-      disabled: false,
       layout: "fixed"
     }
   }
 );
+var tabStateLayerVariants = classVarianceAuthority.cva(
+  [
+    "absolute inset-0 pointer-events-none opacity-0",
+    // Effects transition for opacity — no spatial overshoot
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Hover: 8%
+    "group-data-[hovered]/tab:opacity-8",
+    // Focus: 10%
+    "group-data-[focus-visible]/tab:opacity-10",
+    // Pressed: 10%, doubled selector beats hover at equal cascade position
+    "group-data-[pressed]/tab:group-data-[pressed]/tab:opacity-10",
+    // No state layer when disabled
+    "group-data-[disabled]/tab:hidden"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          // Inactive state-layer color
+          "bg-on-surface",
+          // Active state-layer color (higher cascade position wins over base bg-on-surface)
+          "group-data-[selected]/tab:bg-primary"
+        ],
+        secondary: [
+          // Secondary: always on-surface
+          "bg-on-surface"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
 var tabIndicatorVariants = classVarianceAuthority.cva(
   [
-    // Base: absolutely positioned at bottom
     "absolute bottom-0 left-0",
     "pointer-events-none",
-    // Transition using MD3 motion tokens (medium2 duration, emphasized easing)
+    // Spatial spring — indicator position/width are spatial (not effects)
     "transition-[left,width]",
-    "duration-medium2",
-    "ease-emphasized"
+    "duration-spring-standard-default-spatial",
+    "ease-spring-standard-default-spatial"
   ],
   {
     variants: {
       variant: {
-        primary: ["h-[3px]", "bg-primary", "rounded-t-sm"],
-        secondary: ["h-[2px]", "bg-on-surface-variant"]
+        primary: ["h-[3px]", "bg-primary", "rounded-tl-sm rounded-tr-sm"],
+        secondary: ["h-[2px]", "bg-primary"]
       }
     },
     defaultVariants: {
@@ -3801,20 +3802,28 @@ var tabIndicatorVariants = classVarianceAuthority.cva(
     }
   }
 );
-var tabPanelVariants = classVarianceAuthority.cva(
+var tabIconVariants = classVarianceAuthority.cva(
   [
-    // Base panel styles
-    "outline-none",
-    "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+    "relative inline-flex items-center justify-center",
+    // MD3 tab icon size: 24dp
+    "size-6",
+    // Effects transition for color (inherited from parent, guard here too)
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
   ],
   {
-    variants: {},
-    defaultVariants: {}
+    variants: {
+      hasLabel: {
+        true: "mb-1",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      hasLabel: false
+    }
   }
 );
 var tabBadgeVariants = classVarianceAuthority.cva(
   [
-    // Base badge
     "absolute",
     "inline-flex items-center justify-center",
     "bg-error text-on-error",
@@ -3824,7 +3833,7 @@ var tabBadgeVariants = classVarianceAuthority.cva(
   {
     variants: {
       type: {
-        dot: ["top-1 right-1", "w-1.5 h-1.5", "rounded-full"],
+        dot: ["top-0 right-0", "w-1.5 h-1.5", "rounded-full"],
         count: ["-top-1 -right-1", "min-w-[16px] h-4", "px-1", "rounded-full", "text-[11px]"]
       }
     },
@@ -3833,20 +3842,10 @@ var tabBadgeVariants = classVarianceAuthority.cva(
     }
   }
 );
-var tabIconVariants = classVarianceAuthority.cva(
-  ["relative", "inline-flex items-center justify-center", "w-6 h-6"],
-  {
-    variants: {
-      hasLabel: {
-        true: "mb-1",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      hasLabel: false
-    }
-  }
-);
+var tabPanelVariants = classVarianceAuthority.cva([
+  "outline-none",
+  "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+]);
 var TabList = React.forwardRef(
   ({ children, className }, forwardedRef) => {
     const { state } = useHeadlessTabsContext("TabList");
@@ -3925,18 +3924,41 @@ var TabList = React.forwardRef(
       const selectedTab = container.querySelector('[aria-selected="true"]');
       if (!selectedTab) return;
       const containerRect = container.getBoundingClientRect();
-      const tabRect = selectedTab.getBoundingClientRect();
-      const newLeft = tabRect.left - containerRect.left + container.scrollLeft;
-      const newWidth = tabRect.width;
-      setIndicatorStyle((prev) => {
-        if (prev.left === newLeft && prev.width === newWidth) return prev;
-        return { left: newLeft, width: newWidth };
-      });
+      if (variant === "primary") {
+        const contentEl = selectedTab.querySelector("[data-tab-content]");
+        if (!contentEl) return;
+        const contentRect = contentEl.getBoundingClientRect();
+        const newLeft = contentRect.left - containerRect.left + container.scrollLeft;
+        const newWidth = contentRect.width;
+        setIndicatorStyle((prev) => {
+          if (prev.left === newLeft && prev.width === newWidth) return prev;
+          return { left: newLeft, width: newWidth };
+        });
+      } else {
+        const tabRect = selectedTab.getBoundingClientRect();
+        const newLeft = tabRect.left - containerRect.left + container.scrollLeft;
+        const newWidth = tabRect.width;
+        setIndicatorStyle((prev) => {
+          if (prev.left === newLeft && prev.width === newWidth) return prev;
+          return { left: newLeft, width: newWidth };
+        });
+      }
       setIndicatorReady(true);
-    }, [ref]);
+    }, [ref, variant]);
     React.useLayoutEffect(() => {
       updateIndicator();
     }, [state.selectedKey, updateIndicator]);
+    React.useEffect(() => {
+      const container = ref.current;
+      if (!container || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => {
+        updateIndicator();
+      });
+      observer.observe(container);
+      return () => {
+        observer.disconnect();
+      };
+    }, [ref, updateIndicator]);
     const mergedTabListProps = { ...tabListProps, onKeyDown: handleKeyDown };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...mergedTabListProps, ref, className: cn(tabListVariants({ layout }), className), children: [
       children,
@@ -3951,7 +3973,6 @@ var TabList = React.forwardRef(
             !indicatorReady && "opacity-0"
           ),
           style: {
-            // Dynamic left/width values from DOM measurements
             left: `${indicatorStyle.left}px`,
             width: `${indicatorStyle.width}px`
           }
@@ -3979,10 +4000,12 @@ var Tab = React.forwardRef(
     const {
       tabProps,
       isSelected,
-      isDisabled: ariaIsDisabled
+      isDisabled: ariaIsDisabled,
+      isPressed
     } = reactAria.useTab({ key: id, isDisabled }, state, ref);
     const { isFocusVisible, focusProps } = reactAria.useFocusRing();
     const finalIsDisabled = isDisabled || ariaIsDisabled;
+    const { isHovered, hoverProps } = reactAria.useHover({ isDisabled: finalIsDisabled });
     const { onMouseDown: handleRipple, ripples } = useRipple({
       disabled: finalIsDisabled || disableRipple
     });
@@ -3996,7 +4019,7 @@ var Tab = React.forwardRef(
         state.selectionManager.setFocusedKey(id);
       }
     }, [state.selectionManager, id, finalIsDisabled]);
-    const mergedProps = utils.mergeProps(tabProps, focusProps, {
+    const mergedProps = utils.mergeProps(tabProps, focusProps, hoverProps, {
       onMouseDown: disableRipple ? void 0 : handleRipple,
       onClick: handleClick,
       onFocus: handleFocus
@@ -4013,47 +4036,56 @@ var Tab = React.forwardRef(
         type: "button",
         "data-key": String(id),
         tabIndex: finalIsDisabled ? -1 : isSelected ? 0 : -1,
-        className: cn(
-          tabVariants({
-            variant,
-            selected: isSelected,
-            disabled: finalIsDisabled,
-            layout
-          }),
-          isFocusVisible && "outline-primary outline-2 outline-offset-2",
-          hasLabel && hasIcon && "min-h-16",
-          className
-        ),
+        className: cn(tabVariants({ variant, layout }), className),
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isSelected,
+          isDisabled: finalIsDisabled
+        }),
+        "data-with-icon": hasIcon ? "" : void 0,
+        "data-with-label": hasLabel ? "" : void 0,
         ...htmlProps,
         children: [
           !disableRipple && ripples,
-          hasIcon && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(tabIconVariants({ hasLabel })), children: [
-            icon,
-            badgeDisplay && /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                "data-badge-type": isDotBadge ? "dot" : "count",
-                "aria-hidden": "true",
-                className: cn(tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })),
-                children: !isDotBadge && badgeDisplay
-              }
-            )
-          ] }),
-          hasLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative z-10 truncate", children: [
-            label,
-            !hasIcon && badgeDisplay && /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                "data-badge-type": isDotBadge ? "dot" : "count",
-                "aria-hidden": "true",
-                className: cn(
-                  "relative ml-1",
-                  tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })
-                ),
-                children: !isDotBadge && badgeDisplay
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(tabStateLayerVariants({ variant })), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              "data-tab-content": true,
+              className: "relative z-10 inline-flex flex-col items-center justify-center",
+              children: [
+                hasIcon && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(tabIconVariants({ hasLabel })), children: [
+                  icon,
+                  badgeDisplay && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "data-badge-type": isDotBadge ? "dot" : "count",
+                      "aria-hidden": "true",
+                      className: cn(tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })),
+                      children: !isDotBadge && badgeDisplay
+                    }
+                  )
+                ] }),
+                hasLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
+                  label,
+                  !hasIcon && badgeDisplay && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "data-badge-type": isDotBadge ? "dot" : "count",
+                      "aria-hidden": "true",
+                      className: cn(
+                        "relative ml-1",
+                        tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })
+                      ),
+                      children: !isDotBadge && badgeDisplay
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
         ]
       }
     );
@@ -5403,28 +5435,42 @@ var ProgressHeadless = React.forwardRef(
   }
 );
 ProgressHeadless.displayName = "ProgressHeadless";
-var CardHeadless = React.forwardRef(function CardHeadless2({ className, children, ...ariaButtonProps }, forwardedRef) {
+var CardHeadless = React.forwardRef(function CardHeadless2({ className, children, onMouseDown, onMouseUp, onMouseLeave, ...rest }, forwardedRef) {
   const internalRef = React.useRef(null);
   const ref = forwardedRef ?? internalRef;
-  const isInteractive = !!(ariaButtonProps.onPress ?? ariaButtonProps.href);
-  const { buttonProps } = reactAria.useButton({ elementType: "div", ...ariaButtonProps }, ref);
-  const { focusProps, isFocusVisible } = reactAria.useFocusRing();
+  const isInteractive = !!(rest.onPress ?? rest.href);
+  const { buttonProps } = reactAria.useButton({ elementType: "div", ...rest }, ref);
+  const {
+    isDisabled: _isDisabled,
+    onPress: _onPress,
+    onPressStart: _onPressStart,
+    onPressEnd: _onPressEnd,
+    onPressChange: _onPressChange,
+    onPressUp: _onPressUp,
+    href: _href,
+    target: _target,
+    rel: _rel,
+    ...htmlAttrs
+  } = rest;
+  const mouseHandlers = { onMouseDown, onMouseUp, onMouseLeave };
   if (isInteractive) {
-    const interactiveProps = utils.mergeProps(buttonProps, focusProps, {
-      className,
-      "data-focus-visible": isFocusVisible ? "true" : void 0
-    });
+    const interactiveProps = utils.mergeProps(buttonProps, mouseHandlers, htmlAttrs, { className });
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ...interactiveProps, ref, children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "article", className, ref, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "article", className, ref, ...mouseHandlers, ...htmlAttrs, children });
 });
 CardHeadless.displayName = "CardHeadless";
 var cardVariants = classVarianceAuthority.cva(
   [
     // Shape: MD3 medium corner = 12dp
-    "relative overflow-hidden rounded-md",
-    // Shadow transition (effects property — use spring standard fast effects)
-    "transition-shadow duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+    "relative overflow-hidden rounded-md text-on-surface",
+    // Transition: effects properties — standard default tier (cards are standard-size, not <48dp)
+    // Covers shadow (elevation), opacity (disabled fade), border-color (outlined state)
+    "transition-[box-shadow,opacity,border-color] duration-spring-standard-default-effects ease-spring-standard-default-effects",
+    // Interactive affordance (content flag set by the component)
+    "data-[interactive]:cursor-pointer",
+    // Disabled — self-targeting selectors (38% container, no interaction)
+    "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-38"
   ],
   {
     variants: {
@@ -5432,92 +5478,74 @@ var cardVariants = classVarianceAuthority.cva(
        * Card visual variant per MD3 specification.
        */
       variant: {
-        elevated: ["shadow-elevation-1", "hover:shadow-elevation-2"],
-        filled: ["shadow-elevation-0"],
-        outlined: ["border", "border-outline-variant", "shadow-elevation-0"]
-      },
-      /**
-       * Whether the card is interactive (has onPress or href).
-       * Interactive cards gain a cursor, keyboard focus ring, and state layer.
-       */
-      isInteractive: {
-        true: [
-          "cursor-pointer",
-          "focus-visible:outline-2",
-          "focus-visible:outline-primary",
-          "focus-visible:outline-offset-2"
+        /**
+         * Elevated — separation via shadow.
+         * MD3: container=surface-container-low.
+         * Elevation: 1 base → 2 hover → 1 focus → 1 pressed → 4 dragged.
+         */
+        elevated: [
+          "bg-surface-container-low",
+          "shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-2",
+          "data-[focus-visible]:shadow-elevation-1",
+          "data-[pressed]:data-[pressed]:shadow-elevation-1",
+          "data-[dragged]:data-[dragged]:data-[dragged]:shadow-elevation-4",
+          "data-[disabled]:shadow-none"
         ],
-        false: "cursor-default"
-      },
-      /**
-       * Whether the card is currently being dragged.
-       * Applies elevated shadow level 4 with a slower, more intentional transition
-       * to communicate physical lift per MD3 motion spec.
-       */
-      isDragged: {
-        true: [
-          "shadow-elevation-4",
-          // Override base transition to use a slower, decelerate curve for drag onset
-          "duration-medium2",
-          "ease-emphasized-decelerate"
+        /**
+         * Filled — subtle container fill, no resting shadow.
+         * MD3: container=surface-container-highest.
+         * Elevation: 0 base → 1 hover → 0 focus → 0 pressed → 3 dragged.
+         */
+        filled: [
+          "bg-surface-container-highest",
+          "shadow-none",
+          "data-[hovered]:shadow-elevation-1",
+          "data-[focus-visible]:shadow-none",
+          "data-[pressed]:data-[pressed]:shadow-none",
+          "data-[dragged]:data-[dragged]:data-[dragged]:shadow-elevation-3",
+          "data-[disabled]:shadow-none"
         ],
-        false: ""
-      },
-      /**
-       * Whether the card is disabled.
-       * MD3 spec: 38% opacity, no pointer events.
-       */
-      isDisabled: {
-        true: ["opacity-38", "pointer-events-none"],
-        false: ""
+        /**
+         * Outlined — visual boundary via border, no resting shadow.
+         * MD3: container=surface, outline=outline-variant.
+         * Elevation: 0 base → 1 hover → 0 focus → 0 pressed → 3 dragged.
+         */
+        outlined: [
+          "bg-surface border border-outline-variant",
+          "shadow-none",
+          "data-[hovered]:shadow-elevation-1",
+          "data-[focus-visible]:shadow-none",
+          "data-[pressed]:data-[pressed]:shadow-none",
+          "data-[dragged]:data-[dragged]:data-[dragged]:shadow-elevation-3",
+          "data-[disabled]:shadow-none"
+        ]
       }
     },
-    compoundVariants: [
-      // Filled + enabled
-      {
-        variant: "filled",
-        isDisabled: false,
-        class: "bg-surface-container-highest"
-      },
-      // Filled + disabled
-      {
-        variant: "filled",
-        isDisabled: true,
-        class: "bg-surface-container-variant"
-      },
-      // Elevated + enabled
-      {
-        variant: "elevated",
-        isDisabled: true,
-        class: "bg-surface"
-      },
-      // Elevated + disabled
-      {
-        variant: "elevated",
-        isDisabled: false,
-        class: "bg-surface-container-low"
-      },
-      // Outlined + enabled
-      {
-        variant: "outlined",
-        isDisabled: true,
-        class: "bg-surface"
-      },
-      // Outlined + disabled
-      {
-        variant: "outlined",
-        isDisabled: false,
-        class: "bg-surface"
-      }
-    ],
     defaultVariants: {
-      variant: "elevated",
-      isInteractive: false,
-      isDragged: false,
-      isDisabled: false
+      variant: "elevated"
     }
   }
 );
+var cardStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0",
+  "bg-on-surface",
+  // Effects transition for opacity — standard default tier (200ms, no overshoot)
+  "transition-opacity duration-spring-standard-default-effects ease-spring-standard-default-effects",
+  "group-data-[hovered]/card:opacity-8",
+  "group-data-[focus-visible]/card:opacity-10",
+  "group-data-[pressed]/card:group-data-[pressed]/card:opacity-10",
+  "group-data-[dragged]/card:group-data-[dragged]/card:group-data-[dragged]/card:opacity-16",
+  "group-data-[disabled]/card:hidden"
+]);
+var cardFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 z-20 rounded-[inherit]",
+  "outline outline-2 -outline-offset-2 outline-secondary",
+  // Effects transition — standard default tier, opacity must not overshoot
+  "transition-opacity duration-spring-standard-default-effects ease-spring-standard-default-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/card:opacity-100"
+]);
 var Card = React.forwardRef(function Card2({
   variant = "elevated",
   onPress,
@@ -5528,9 +5556,15 @@ var Card = React.forwardRef(function Card2({
   children,
   "aria-label": ariaLabel
 }, ref) {
+  const internalRef = React.useRef(null);
+  const resolvedRef = ref ?? internalRef;
   const isInteractive = !!(onPress ?? href);
   const [isDragged, setIsDragged] = React.useState(false);
   const [isPressed, setIsPressed] = React.useState(false);
+  const { isHovered, hoverProps } = reactAria.useHover({ isDisabled: !isInteractive || isDisabled });
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const handlePressStart = React.useCallback(() => setIsPressed(true), []);
+  const handlePressEnd = React.useCallback(() => setIsPressed(false), []);
   const { onMouseDown: handleRipple, ripples } = useRipple({
     disabled: !isInteractive || isDisabled
   });
@@ -5544,42 +5578,41 @@ var Card = React.forwardRef(function Card2({
   const handleMouseLeave = () => {
     if (isDraggable) setIsDragged(false);
   };
-  const handlePressStart = () => setIsPressed(true);
-  const handlePressEnd = () => setIsPressed(false);
+  const interactionAttrs = isInteractive ? getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed, isDisabled }) : {};
+  const interactiveHandlers = isInteractive ? reactAria.mergeProps(hoverProps, focusProps, {
+    onPressStart: handlePressStart,
+    onPressEnd: handlePressEnd
+  }) : {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
     CardHeadless,
     {
-      ref,
+      ref: resolvedRef,
       ...onPress !== void 0 && { onPress },
       ...href !== void 0 && { href },
       isDisabled,
       ...ariaLabel !== void 0 && { "aria-label": ariaLabel },
-      onPressStart: handlePressStart,
-      onPressEnd: handlePressEnd,
-      onMouseDown: handleMouseDown,
-      onMouseUp: handleMouseUp,
-      onMouseLeave: handleMouseLeave,
-      className: cn(
-        cardVariants({ variant, isInteractive, isDragged, isDisabled }),
-        "group",
-        className
-      ),
+      ...interactiveHandlers,
+      ...isInteractive && { onMouseDown: handleMouseDown },
+      ...isInteractive && isDraggable && {
+        onMouseUp: handleMouseUp,
+        onMouseLeave: handleMouseLeave
+      },
+      ...interactionAttrs,
+      "data-interactive": isInteractive ? "" : void 0,
+      "data-dragged": isInteractive && isDragged ? "" : void 0,
+      className: cn(cardVariants({ variant }), "group/card", className),
       children: [
         isInteractive && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          "span",
           {
             "data-testid": "card-state-layer",
-            "data-pressed": isPressed ? "" : void 0,
             "aria-hidden": "true",
-            className: cn(
-              "bg-on-surface pointer-events-none absolute inset-0 rounded-md",
-              "opacity-0 group-hover:opacity-8 data-[pressed]:opacity-12",
-              "duration-spring-standard-fast-effects ease-spring-standard-fast-effects transition-opacity"
-            )
+            className: cn(cardStateLayerVariants())
           }
         ),
         isInteractive && ripples,
-        children
+        isInteractive && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: cn(cardFocusRingVariants()) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children })
       ]
     }
   );
@@ -5589,7 +5622,7 @@ var cardMediaVariants = classVarianceAuthority.cva("w-full object-cover", {
   variants: {
     aspectRatio: {
       "16/9": "aspect-video",
-      "4/3": "aspect-video",
+      "4/3": "aspect-[4/3]",
       "1/1": "aspect-square",
       auto: ""
     }
@@ -5613,7 +5646,7 @@ var CardMedia = React.forwardRef(function CardMedia2({ src, alt, aspectRatio = "
 CardMedia.displayName = "CardMedia";
 var CardHeader = React.forwardRef(function CardHeader2({ headline, subheader, className }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("p-4", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-on-surface text-title-large", children: headline }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-on-surface text-title-medium", children: headline }),
     subheader !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-on-surface-variant text-body-medium mt-1", children: subheader })
   ] });
 });