@tinybigui/react 0.9.0 → 0.11.0

package/README.md

@@ -12,7 +12,7 @@ A modern, accessible React component library implementing Google's Material Desi
 
 ## ✅ Status
 
-> **Latest Release: v0.9.0** (2026-06-09)
+> **Latest Release: v0.11.0** (2026-06-09)
 >
 > **29 MD3 components** published to npm with full TypeScript support and WCAG 2.1 AA accessibility.
 >
@@ -149,24 +149,24 @@ See [THEMING.md](./THEMING.md) for the full customization guide.
 
 ### Phase 2: Navigation ✅
 
-| Component          | Status | Description                          |
-| ------------------ | ------ | ------------------------------------ |
-| `AppBar`           | ✅     | Four size variants, scroll elevation |
-| `Tabs`             | ✅     | Primary and secondary tab variants   |
-| `NavigationDrawer` | ✅     | Modal and standard navigation drawer |
-| `NavigationBar`    | ✅     | Bottom navigation with badges        |
-| `Search`           | ✅     | SearchBar and SearchView overlay     |
+| Component          | Status | Description                                                         |
+| ------------------ | ------ | ------------------------------------------------------------------- |
+| `AppBar`           | ✅     | M3 expressive flexible slot architecture, subtitle growth (v0.10.0) |
+| `Tabs`             | ✅     | Primary and secondary tab variants                                  |
+| `NavigationDrawer` | ✅     | Modal and standard navigation drawer                                |
+| `NavigationBar`    | ✅     | Bottom navigation with badges                                       |
+| `Search`           | ✅     | SearchBar and SearchView overlay                                    |
 
 ### 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 ✅
 

package/dist/index.cjs

@@ -211,65 +211,111 @@ function useScrollElevation(options = {}) {
   };
 }
 var AppBarHeadless = React.forwardRef(
-  ({ className, children, scrolled: scrolledProp, onScrollStateChange }, ref) => {
+  ({ className, children, scrolled: scrolledProp, onScrollStateChange, ...htmlProps }, ref) => {
     const { isScrolled } = useScrollElevation({
       scrolled: scrolledProp,
       onScrollStateChange
     });
-    return /* @__PURE__ */ jsxRuntime.jsx("header", { ref, role: "banner", className, "data-scrolled": isScrolled, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "header",
+      {
+        ...htmlProps,
+        ref,
+        role: "banner",
+        className,
+        "data-scrolled": isScrolled ? "" : void 0,
+        children
+      }
+    );
   }
 );
 AppBarHeadless.displayName = "AppBarHeadless";
 var appBarVariants = classVarianceAuthority.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"
+    }
+  }
+);
+var appBarTopRowVariants = classVarianceAuthority.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 = classVarianceAuthority.cva(["flex shrink-0 items-center", "text-on-surface"]);
+var appBarHeadlineBlockVariants = classVarianceAuthority.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",
-      scrolled: false
+      variant: "small"
     }
   }
 );
 var appBarTitleVariants = classVarianceAuthority.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"
     }
   },
@@ -277,23 +323,27 @@ var appBarTitleVariants = classVarianceAuthority.cva("text-on-surface font-norma
     variant: "small"
   }
 });
-var appBarSubtitleVariants = classVarianceAuthority.cva("font-normal", {
+var appBarSubtitleVariants = classVarianceAuthority.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 = classVarianceAuthority.cva([
+  "flex shrink-0 items-center gap-0.5",
+  "text-on-surface-variant"
+]);
+var appBarExpandedTitleVariants = classVarianceAuthority.cva([
+  "flex flex-1 flex-col justify-end",
+  "gap-0.5 px-4 pb-4"
+]);
 var AppBar = React.forwardRef(
   ({
     variant = "small",
@@ -310,76 +360,54 @@ var AppBar = React.forwardRef(
       onScrollStateChange
     });
     const isExpandedVariant = variant === "medium" || variant === "large";
+    const hasSubtitle = subtitle != null;
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { "data-slot": "navigation", className: "flex shrink-0 items-center", children: navigationIcon }),
-                !isExpandedVariant && /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "flex min-w-0 flex-1 flex-col justify-center px-1",
-                      variant === "center-aligned" && "text-center"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "appbar-title", className: cn(appBarTitleVariants({ variant })), children: title }),
-                      subtitle != null && /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          "data-testid": "appbar-subtitle",
-                          className: cn(appBarSubtitleVariants({ variant })),
-                          children: subtitle
-                        }
-                      )
-                    ]
-                  }
-                ),
-                actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "actions", className: "flex shrink-0 items-center gap-0.5", children: actions })
-              ]
-            }
-          ),
-          isExpandedVariant && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              "data-slot": "expanded-title",
-              className: cn("flex flex-1 flex-col justify-end", "gap-0.5 px-4 pb-4"),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    "data-testid": "appbar-title",
-                    className: cn("min-w-0", appBarTitleVariants({ variant })),
-                    children: title
-                  }
-                ),
-                subtitle != null && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    "data-testid": "appbar-subtitle",
-                    className: cn("min-w-0", appBarSubtitleVariants({ variant })),
-                    children: subtitle
-                  }
-                )
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "top-row", className: cn(appBarTopRowVariants({ variant })), children: [
+            navigationIcon != null && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "navigation", className: cn(appBarLeadingVariants()), children: navigationIcon }),
+            !isExpandedVariant && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(appBarHeadlineBlockVariants({ variant })), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "appbar-title", className: cn(appBarTitleVariants({ variant })), children: title }),
+              hasSubtitle && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-testid": "appbar-subtitle",
+                  className: cn(appBarSubtitleVariants({ variant })),
+                  children: subtitle
+                }
+              )
+            ] }),
+            actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "actions", className: cn(appBarTrailingVariants()), children: actions })
+          ] }),
+          isExpandedVariant && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "expanded-title", className: cn(appBarExpandedTitleVariants()), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "data-testid": "appbar-title",
+                className: cn("min-w-0", appBarTitleVariants({ variant })),
+                children: title
+              }
+            ),
+            hasSubtitle && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "data-testid": "appbar-subtitle",
+                className: cn("min-w-0", appBarSubtitleVariants({ variant })),
+                children: subtitle
+              }
+            )
+          ] })
         ]
       }
     );
@@ -11132,7 +11160,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
@@ -11269,7 +11297,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
@@ -11284,7 +11312,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"],
@@ -11301,52 +11328,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"
@@ -11358,62 +11371,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" })
+      ]
     }
   );
 }