@tinybigui/react 0.10.0 → 0.11.1

package/README.md

@@ -12,7 +12,7 @@ A modern, accessible React component library implementing Google's Material Desi
 
 ## ✅ Status
 
-> **Latest Release: v0.10.0** (2026-06-09)
+> **Latest Release: v0.11.1** (2026-06-09)
 >
 > **29 MD3 components** published to npm with full TypeScript support and WCAG 2.1 AA accessibility.
 >
@@ -159,26 +159,26 @@ See [THEMING.md](./THEMING.md) for the full customization guide.
 
 ### Phase 3: Feedback ✅
 
-| Component     | Status | Description                             |
-| ------------- | ------ | --------------------------------------- |
-| `Dialog`      | ✅     | Basic and fullscreen modal dialogs      |
-| `Snackbar`    | ✅     | Provider, stacking, imperative API      |
-| `Menu`        | ✅     | Dropdown, context menu, submenus        |
-| `Progress`    | ✅     | Linear and circular indicators          |
-| `BottomSheet` | ✅     | Standard and modal with snap points     |
-| `Tooltip`     | ✅     | Plain and rich tooltip with positioning |
+| Component     | Status | Description                                                      |
+| ------------- | ------ | ---------------------------------------------------------------- |
+| `Dialog`      | ✅     | Basic and fullscreen modal dialogs                               |
+| `Snackbar`    | ✅     | Provider, stacking, imperative API                               |
+| `Menu`        | ✅     | Dropdown, context menu, submenus                                 |
+| `Progress`    | ✅     | Linear and circular indicators                                   |
+| `BottomSheet` | ✅     | MD3 expressive handle, variants-vs-states architecture (v0.11.0) |
+| `Tooltip`     | ✅     | Plain and rich tooltip with positioning                          |
 
 ### Phase 4: Data Display ✅
 
-| Component    | Status | Description                                                     |
-| ------------ | ------ | --------------------------------------------------------------- |
-| `Card`       | ✅     | Elevated, filled, outlined variants                             |
-| `List`       | ✅     | Static and interactive list items                               |
-| `Chip`       | ✅     | MD3 expressive slot architecture, elevated surface (v0.9.0)     |
-| `Badge`      | ✅     | MD3 expressive dot/count badges, icon-corner anchoring (v0.8.0) |
-| `Divider`    | ✅     | Horizontal/vertical, inset variants                             |
-| `DatePicker` | ✅     | Docked, modal, and input variants                               |
-| `TimePicker` | ✅     | 12h/24h clock dial, range selection                             |
+| Component    | Status | Description                                                          |
+| ------------ | ------ | -------------------------------------------------------------------- |
+| `Card`       | ✅     | MD3 motion tier, media aspect-ratio fix, CVA export parity (v0.11.1) |
+| `List`       | ✅     | Static and interactive list items                                    |
+| `Chip`       | ✅     | MD3 expressive slot architecture, elevated surface (v0.9.0)          |
+| `Badge`      | ✅     | MD3 expressive dot/count badges, icon-corner anchoring (v0.8.0)      |
+| `Divider`    | ✅     | Horizontal/vertical, inset variants                                  |
+| `DatePicker` | ✅     | Docked, modal, and input variants                                    |
+| `TimePicker` | ✅     | 12h/24h clock dial, range selection                                  |
 
 ### Planned
 

package/dist/index.cjs

@@ -5403,28 +5403,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 +5446,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 +5524,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 +5546,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 +5590,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 +5614,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 })
   ] });
 });
@@ -11160,7 +11161,7 @@ var BottomSheetModalPanel = ({
       "aria-modal": "true",
       className: cn(className, getAnimationClassName?.(animationState)),
       "data-animation-state": animationState,
-      "data-dragging": isDragging || void 0,
+      "data-dragging": isDragging ? "" : void 0,
       style: panelStyle,
       onTransitionEnd,
       children
@@ -11297,7 +11298,7 @@ var BottomSheetHeadless = React.forwardRef(
           ref,
           className: cn(className, getAnimationClassName?.(animationState)),
           "data-animation-state": animationState,
-          "data-dragging": isDragging || void 0,
+          "data-dragging": isDragging ? "" : void 0,
           style: panelStyle,
           onTransitionEnd: handleTransitionEnd,
           children
@@ -11312,7 +11313,6 @@ var bottomSheetAnimationVariants = classVarianceAuthority.cva("", {
   variants: {
     animationState: {
       // entering: initial mount frame — sheet starts below viewport (translateY(100%))
-      // The CSS is handled inside animate-md-slide-in-bottom keyframes
       entering: ["opacity-0"],
       // visible: entry animation active — animate-md-slide-in-bottom runs once
       visible: ["animate-md-slide-in-bottom"],
@@ -11329,52 +11329,38 @@ var bottomSheetAnimationVariants = classVarianceAuthority.cva("", {
 var bottomSheetVariants = classVarianceAuthority.cva(
   [
     // Position: fixed to bottom edge, full width
-    "fixed",
-    "bottom-0",
-    "left-0",
-    "right-0",
+    "fixed bottom-0 left-0 right-0",
     // Surface token
     "bg-surface-container-low",
     // Elevation level 1 per MD3 spec
     "shadow-elevation-1",
-    // Shape: extra-large top corners (28dp), bottom corners are 0 (attached to screen edge)
+    // Shape: extra-large top corners (28dp), square bottom (screen-attached)
+    // NOTE: measurement-derived value from MD3 spec; permitted exception per component-variants rule
     "rounded-t-xl",
     // Layout
-    "flex",
-    "flex-col",
-    // Max width constraint (full width up to 640dp)
+    "flex flex-col",
+    // Width constraint (full width up to 640dp)
     "mx-auto",
     // NOTE: measurement-derived value from MD3 spec; permitted exception
     "w-[640px] max-w-full",
-    // Clip content during height transitions (sheet shrinks/grows from bottom edge)
+    // Clip content during height transitions
     "overflow-hidden",
-    // Transition: height for snap spring (MD3 spec — sheet "resizes" between heights)
-    // Standard personality, default speed tier, spatial: no overshoot.
-    // During drag, data-[dragging=true]:transition-none suppresses this so the
-    // sheet height follows the pointer 1:1 without transition lag.
-    // After drag release, the spring transition animates height to the new snap position.
+    // Snap spring: spatial property (height), standard personality, default tier
     "transition-[height]",
     "duration-spring-standard-default-spatial",
     "ease-spring-standard-default-spatial",
-    "data-[dragging=true]:transition-none",
+    // Suppress spring while dragging so the sheet follows the pointer 1:1
+    "data-[dragging]:transition-none",
     "will-change-[height]",
-    // Responsive layout: when viewport > 640dp, apply wider top margin per MD3 spec.
-    // The sheet remains bottom-anchored at all sizes. Side centering is handled by
-    // mx-auto + max-w-[640px] — at 752dp viewport this naturally produces 56dp side
-    // margins on each side (exactly matching MD3 measurements).
-    // Top margin is expressed as max-height so the sheet cannot overlap the top edge:
-    // - Default: 72dp top margin (max-h-[calc(100vh-72px)])
-    // - Wide viewport (> 640dp): 56dp top margin (sm:max-h-[calc(100vh-56px)])
+    // Responsive layout: top margin expressed as max-height
     // NOTE: measurement-derived values from MD3 spec; permitted exception
     "max-h-[calc(100vh-72px)]",
-    "sm:max-h-[calc(100vh-56px)]",
-    // Top corners rounded at wide layout (sheet floats away from screen edge)
-    "rounded-t-xl"
+    "sm:max-h-[calc(100vh-56px)]"
   ],
   {
     variants: {
       variant: {
-        // Modal: above scrim (z-50)
+        // Modal: rendered above the scrim (z-50)
         modal: "z-50",
         // Standard: sits above normal content but below overlays
         standard: "z-10"
@@ -11386,62 +11372,96 @@ var bottomSheetVariants = classVarianceAuthority.cva(
   }
 );
 var bottomSheetScrimVariants = classVarianceAuthority.cva([
-  "fixed",
-  "inset-0",
-  "z-40",
-  "bg-scrim",
-  "opacity-32",
-  "transition-opacity",
-  "duration-short4",
-  "ease-standard"
+  "fixed inset-0 z-40",
+  "bg-scrim opacity-32",
+  // Screen-level effects transition (scrim enters/exits the screen, not an on-screen state change)
+  "transition-opacity duration-short4 ease-standard"
 ]);
 var bottomSheetHandleWrapperVariants = classVarianceAuthority.cva([
-  // Center the handle pill horizontally
-  "flex",
-  "items-center",
-  "justify-center",
-  // Top/bottom padding creates the 48dp touch target area
-  // 22dp top + 4dp handle + 22dp bottom ≈ 48dp interaction zone (per MD3 measurements)
+  // Center the pill horizontally; provide positioning context for overlays
+  "relative flex items-center justify-center w-full",
+  // 48dp touch target (22dp top + 4dp pill + 22dp bottom)
   // NOTE: measurement-derived value from MD3 spec; permitted exception
   "py-[22px]",
-  // Full width so the touch target spans the sheet
-  "w-full",
-  // Focus ring styling for keyboard/switch navigation
-  // MD3 spec: focus indicator color = secondary, thickness = 3dp, offset = 2dp
+  // Suppress browser default focus outline — the focus-ring overlay slot handles it
   "focus-visible:outline-none",
-  "focus-visible:ring-3",
-  "focus-visible:ring-secondary",
-  "focus-visible:ring-offset-2",
-  "focus-visible:rounded-sm",
-  // Cursor affordance
+  // Cursor affordance for drag interaction
   "cursor-ns-resize"
 ]);
+var bottomSheetHandleStateLayerVariants = classVarianceAuthority.cva([
+  // Overlay positioned centrally — sits behind the pill
+  "absolute pointer-events-none",
+  // Pill-shaped to complement the handle's form
+  "rounded-full",
+  // Sized wider than the pill to provide a visible state layer halo
+  // 48dp wide × 16dp tall — centred by the flex wrapper
+  "w-12 h-4",
+  // State-layer color (same role as the pill)
+  "bg-on-surface-variant",
+  // Effects transition — opacity must NOT overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Opacity at rest
+  "opacity-0",
+  // Hover: 8%
+  "group-data-[hovered]/handle:opacity-8",
+  // Focus-visible: 10%
+  "group-data-[focus-visible]/handle:opacity-10",
+  // Pressed: 10% (doubled selector wins over hover at same cascade position)
+  "group-data-[pressed]/handle:group-data-[pressed]/handle:opacity-10",
+  // Dragging: 16% (MD3 dragged state — highest on-screen opacity)
+  // Doubled selector wins over hover + pressed
+  "group-data-[dragging]/handle:group-data-[dragging]/handle:opacity-16"
+]);
+var bottomSheetHandleFocusRingVariants = classVarianceAuthority.cva([
+  "absolute pointer-events-none",
+  "rounded-full",
+  // Sized to sit around the state layer halo
+  "w-14 h-5",
+  // MD3 focus indicator: secondary color, 2dp weight
+  "outline outline-2 outline-offset-0 outline-secondary",
+  // Effects transition — opacity change must NOT overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hidden at rest; shown on keyboard/programmatic focus
+  "opacity-0",
+  "group-data-[focus-visible]/handle:opacity-100"
+]);
 var bottomSheetHandlePillVariants = classVarianceAuthority.cva([
+  "relative z-10 pointer-events-none",
   "bg-on-surface-variant",
-  "opacity-40",
   "rounded-full",
   // Dimensions: 32dp × 4dp per MD3 spec (measurement-derived; permitted exception)
   "w-8",
-  // 32dp = 2rem = w-8
-  "h-1",
-  // 4dp = 0.25rem = h-1
-  // Pill itself is decorative; the wrapper handles interaction
-  "pointer-events-none"
+  // 32dp = 2rem
+  "h-1"
+  // 4dp  = 0.25rem
 ]);
 function BottomSheetHandle({
   className,
   "aria-label": ariaLabelOverride
 }) {
   const { handleProps, isDragging } = useBottomSheetContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const { isHovered, hoverProps } = reactAria.useHover({});
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const mergedHandleProps = reactAria.mergeProps(handleProps, hoverProps, focusProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ...handleProps,
+      ...mergedHandleProps,
       ...ariaLabelOverride !== void 0 ? { "aria-label": ariaLabelOverride } : {},
-      className: cn(bottomSheetHandleWrapperVariants(), className),
+      className: cn(bottomSheetHandleWrapperVariants(), "group/handle", className),
       "data-testid": "bottom-sheet-handle",
-      "data-dragging": isDragging || void 0,
-      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: bottomSheetHandlePillVariants(), "aria-hidden": "true" })
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        // Treat active drag as pressed — drives the state layer to 10% opacity
+        isPressed: isDragging
+      }),
+      "data-dragging": isDragging ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(bottomSheetHandleStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(bottomSheetHandleFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(bottomSheetHandlePillVariants()), "aria-hidden": "true" })
+      ]
     }
   );
 }