@tinybigui/react 0.14.0 → 0.16.0

package/dist/index.css

@@ -49,5 +49,13 @@
     stroke-dashoffset: -124px;
   }
 }
-@theme { --animate-progress-linear-indeterminate-1: progress-linear-indeterminate-1 var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite; --animate-progress-linear-indeterminate-2: progress-linear-indeterminate-2 var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite; --animate-progress-circular-rotate: progress-circular-rotate var(--md-sys-motion-duration-long4) linear infinite; --animate-progress-circular-dash: progress-circular-dash var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard) infinite; }
+@keyframes progress-wave-translate {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(var(--progress-wave-wavelength, -40px));
+  }
+}
+@theme { --animate-progress-linear-indeterminate-1: progress-linear-indeterminate-1 var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite; --animate-progress-linear-indeterminate-2: progress-linear-indeterminate-2 var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite; --animate-progress-circular-rotate: progress-circular-rotate var(--md-sys-motion-duration-long4) linear infinite; --animate-progress-circular-dash: progress-circular-dash var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard) infinite; --animate-progress-wave-translate: progress-wave-translate var(--md-sys-motion-duration-extra-long4) linear infinite; }
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Progress/Progress.css"],"sourcesContent":["/*\n * Progress Indicator Animations\n * Material Design 3 motion tokens for indeterminate progress states.\n *\n * Keyframes are defined here (co-located with the component) per project\n * convention — they are NOT added to the global tokens.css.\n *\n * Motion tokens referenced (from packages/tokens/src/tokens.css):\n *   --md-sys-motion-duration-medium4 : 400ms  (determinate transitions — applied via Tailwind)\n *   --md-sys-motion-duration-long2   : 500ms  (linear indeterminate cycle)\n *   --md-sys-motion-duration-long4   : 600ms  (circular indeterminate rotation)\n *   --md-sys-motion-easing-standard  : cubic-bezier(0.2, 0, 0, 1)\n */\n\n/* ---------------------------------------------------------------------------\n   LINEAR INDETERMINATE\n   Two-segment bar animation per MD3 spec.\n   First segment: starts narrow at left, expands, then slides off right.\n   Second segment: follows the first with a short delay.\n   Duration: long2 = 500ms per cycle (repeating).\n   --------------------------------------------------------------------------- */\n\n@keyframes progress-linear-indeterminate-1 {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes progress-linear-indeterminate-2 {\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   CIRCULAR INDETERMINATE\n   Two-part animation per MD3 spec:\n   1. Container rotation: continuous 360° spin.\n   2. Dash animation: stroke-dasharray pulses between a short and long arc.\n   Rotation duration: long4 = 600ms per cycle (repeating).\n   --------------------------------------------------------------------------- */\n\n@keyframes progress-circular-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes progress-circular-dash {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   TAILWIND @theme INTEGRATION\n   Register animations so they can be used as Tailwind utilities:\n     animate-progress-linear-indeterminate-1\n     animate-progress-linear-indeterminate-2\n     animate-progress-circular-rotate\n     animate-progress-circular-dash\n   --------------------------------------------------------------------------- */\n\n@theme {\n  --animate-progress-linear-indeterminate-1: progress-linear-indeterminate-1\n    var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite;\n\n  --animate-progress-linear-indeterminate-2: progress-linear-indeterminate-2\n    var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite;\n\n  --animate-progress-circular-rotate: progress-circular-rotate var(--md-sys-motion-duration-long4)\n    linear infinite;\n\n  --animate-progress-circular-dash: progress-circular-dash var(--md-sys-motion-duration-long4)\n    var(--md-sys-motion-easing-standard) infinite;\n}\n"],"mappings":";AAsBA,WAAW;AACT;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACF;AAEA,WAAW;AACT;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACF;AAUA,WAAW;AACT;AACE,eAAW,OAAO;AACpB;AACA;AACE,eAAW,OAAO;AACpB;AACF;AAEA,WAAW;AACT;AACE,sBAAkB,CAAC,EAAE;AACrB,uBAAmB;AACrB;AACA;AACE,sBAAkB,EAAE,EAAE;AACtB,uBAAmB;AACrB;AACA;AACE,sBAAkB,EAAE,EAAE;AACtB,uBAAmB;AACrB;AACF;AAWA,OAAO,EACL,yCAAyC,EAAE,gCACzC,IAAI,gCAAgC,IAAI,iCAAiC,QAAQ,EAEnF,yCAAyC,EAAE,gCACzC,IAAI,gCAAgC,IAAI,iCAAiC,QAAQ,EAEnF,kCAAkC,EAAE,yBAAyB,IAAI,gCAC/D,OAAO,QAAQ,EAEjB,gCAAgC,EAAE,uBAAuB,IAAI,gCAC3D,IAAI,iCAAiC,QAAQ;","names":[]}
+{"version":3,"sources":["../src/components/Progress/Progress.css"],"sourcesContent":["/*\n * Progress Indicator Animations\n * Material Design 3 motion tokens for indeterminate and wavy progress states.\n *\n * Keyframes are defined here (co-located with the component) per project\n * convention — they are NOT added to the global tokens.css.\n *\n * All timing values reference MD3 motion token CSS custom properties.\n * Hardcoded durations are forbidden — use the token vars below.\n *\n * Motion tokens referenced (from packages/tokens/src/tokens.css):\n *   --md-sys-motion-duration-long2          : 500ms  (linear indeterminate cycle)\n *   --md-sys-motion-duration-long4          : 600ms  (circular indeterminate rotation)\n *   --md-sys-motion-duration-extra-long4    : 1000ms (wave horizontal translation)\n *   --md-sys-motion-easing-standard         : cubic-bezier(0.2, 0, 0, 1)\n */\n\n/* ---------------------------------------------------------------------------\n   LINEAR INDETERMINATE\n   Two-segment bar animation per MD3 spec.\n   First segment: starts narrow at left, expands, then slides off right.\n   Second segment: follows the first with a short delay.\n   Duration: long2 = 500ms per cycle (repeating).\n   --------------------------------------------------------------------------- */\n\n@keyframes progress-linear-indeterminate-1 {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes progress-linear-indeterminate-2 {\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   CIRCULAR INDETERMINATE\n   Two-part animation per MD3 spec:\n   1. Container rotation: continuous 360° spin.\n   2. Dash animation: stroke-dasharray pulses between a short and long arc.\n   Rotation duration: long4 = 600ms per cycle (repeating).\n   --------------------------------------------------------------------------- */\n\n@keyframes progress-circular-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes progress-circular-dash {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   WAVY TRANSLATION\n   Horizontal wave motion: the wavy path translates one full wavelength so\n   the wave appears to flow continuously.\n   Duration: extra-long4 = 1000ms per cycle (repeating).\n   --------------------------------------------------------------------------- */\n\n@keyframes progress-wave-translate {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    /* Translate exactly one wavelength. The wavelength is baked into the SVG\n       path so the visual loop is seamless. The actual translate distance is\n       set via --progress-wave-wavelength CSS custom property on the element. */\n    transform: translateX(var(--progress-wave-wavelength, -40px));\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   TAILWIND @theme INTEGRATION\n   Register animations so they can be used as Tailwind utilities.\n   --------------------------------------------------------------------------- */\n\n@theme {\n  --animate-progress-linear-indeterminate-1: progress-linear-indeterminate-1\n    var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite;\n\n  --animate-progress-linear-indeterminate-2: progress-linear-indeterminate-2\n    var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite;\n\n  --animate-progress-circular-rotate: progress-circular-rotate var(--md-sys-motion-duration-long4)\n    linear infinite;\n\n  --animate-progress-circular-dash: progress-circular-dash var(--md-sys-motion-duration-long4)\n    var(--md-sys-motion-easing-standard) infinite;\n\n  --animate-progress-wave-translate: progress-wave-translate\n    var(--md-sys-motion-duration-extra-long4) linear infinite;\n}\n"],"mappings":";AAyBA,WAAW;AACT;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACF;AAEA,WAAW;AACT;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACF;AAUA,WAAW;AACT;AACE,eAAW,OAAO;AACpB;AACA;AACE,eAAW,OAAO;AACpB;AACF;AAEA,WAAW;AACT;AACE,sBAAkB,CAAC,EAAE;AACrB,uBAAmB;AACrB;AACA;AACE,sBAAkB,EAAE,EAAE;AACtB,uBAAmB;AACrB;AACA;AACE,sBAAkB,EAAE,EAAE;AACtB,uBAAmB;AACrB;AACF;AASA,WAAW;AACT;AACE,eAAW,WAAW;AACxB;AACA;AAIE,eAAW,WAAW,IAAI,0BAA0B,EAAE;AACxD;AACF;AAOA,OAAO,EACL,yCAAyC,EAAE,gCACzC,IAAI,gCAAgC,IAAI,iCAAiC,QAAQ,EAEnF,yCAAyC,EAAE,gCACzC,IAAI,gCAAgC,IAAI,iCAAiC,QAAQ,EAEnF,kCAAkC,EAAE,yBAAyB,IAAI,gCAC/D,OAAO,QAAQ,EAEjB,gCAAgC,EAAE,uBAAuB,IAAI,gCAC3D,IAAI,iCAAiC,QAAQ,EAE/C,iCAAiC,EAAE,wBACjC,IAAI,sCAAsC,OAAO,QAAQ;","names":[]}

package/dist/index.d.cts

@@ -4150,7 +4150,9 @@ declare const HeadlessDrawerItem: React__default.ForwardRefExoticComponent<Headl
  * Built on React Aria for world-class accessibility.
  * Supports four variants: Linear Determinate, Linear Indeterminate,
  * Circular Determinate, and Circular Indeterminate.
- * Implementation uses CVA + Tailwind CSS classes mapped to MD3 tokens.
+ * Implements MD3 Expressive styling: colorful primary-container track,
+ * 4dp indicator-track gap, fully-rounded segments, thick track option,
+ * and optional wavy shape.
  *
  * @example
  * ```tsx
@@ -4169,6 +4171,9 @@ declare const HeadlessDrawerItem: React__default.ForwardRefExoticComponent<Headl
  * // Circular with size
  * <Progress type="circular" indeterminate size="small" aria-label="Loading" />
  *
+ * // Thick wavy linear (MD3 Expressive)
+ * <Progress type="linear" indeterminate shape="wavy" thickness="thick" aria-label="Loading" />
+ *
  * // Custom range
  * <Progress type="linear" minValue={0} maxValue={200} value={150} label="Progress" />
  * ```
@@ -4191,6 +4196,22 @@ interface ProgressProps extends AriaProgressBarProps {
      * @default "medium"
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Visual shape of the progress indicator.
+     * - `"flat"` — standard rounded rectangular/circular track.
+     * - `"wavy"` — MD3 Expressive sine-wave active indicator.
+     *   Increases linear container height to accommodate wave amplitude.
+     *   Reduced-motion users receive a flat fallback automatically.
+     * @default "flat"
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * Track thickness.
+     * - `"default"` — 4dp per MD3 baseline spec.
+     * - `"thick"` — 8dp MD3 Expressive variant (fully rounded, `trackCornerRadius` = 4dp).
+     * @default "default"
+     */
+    thickness?: "default" | "thick";
     /**
      * Additional CSS classes (Tailwind).
      */
@@ -4206,7 +4227,7 @@ interface ProgressProps extends AriaProgressBarProps {
  *   type="linear"
  *   value={50}
  *   label="Upload"
- *   renderProgress={({ percentage }) => (
+ *   renderProgress={({ percentage, shape, thickness }) => (
  *     <div style={{ width: `${percentage}%` }} />
  *   )}
  * />
@@ -4228,6 +4249,16 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
      * @default "medium"
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Visual shape of the progress indicator.
+     * @default "flat"
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * Track thickness.
+     * @default "default"
+     */
+    thickness?: "default" | "thick";
     /**
      * Additional CSS classes.
      */
@@ -4245,6 +4276,8 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
         isIndeterminate: boolean;
         type: "linear" | "circular";
         size: "small" | "medium" | "large";
+        shape: "flat" | "wavy";
+        thickness: "default" | "thick";
     }) => React__default.ReactNode;
 }
 
@@ -4252,23 +4285,20 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
  * Material Design 3 Progress Indicator (Layer 3: Styled)
  *
  * Built on React Aria for world-class accessibility.
- * Supports four variants driven by `type` + `indeterminate` props:
+ * Implements MD3 Expressive spec:
+ *   - Colorful track: primary-container (inactive), primary (active)
+ *   - 4dp indicator-track gap (linear + circular)
+ *   - Fully-rounded segments
+ *   - Optional thick (8dp) track
+ *   - Optional wavy shape with amplitude ramp
+ *   - useReducedMotion guard: wavy falls back to flat when reduced-motion is set
+ *
+ * Four variants driven by `type` × `indeterminate`:
  *   - Linear Determinate
  *   - Linear Indeterminate
  *   - Circular Determinate
  *   - Circular Indeterminate
  *
- * MD3 Specifications:
- * - Linear track height: 4dp (h-1)
- * - Linear track shape: rounded-full
- * - Circular default size: 48dp (medium)
- * - Circular stroke width: 4dp (SVG attribute)
- * - Active track: primary
- * - Inactive track: surface-container-highest
- * - Determinate transitions: duration-medium4 + ease-standard
- * - Indeterminate linear cycle: duration-long2
- * - Indeterminate circular rotation: duration-long4
- *
  * @example
  * ```tsx
  * // Linear determinate
@@ -4283,8 +4313,8 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
  * // Circular indeterminate
  * <Progress type="circular" indeterminate aria-label="Loading" />
  *
- * // Circular small spinner
- * <Progress type="circular" indeterminate size="small" aria-label="Loading" />
+ * // Thick wavy (MD3 Expressive)
+ * <Progress type="linear" indeterminate shape="wavy" thickness="thick" aria-label="Loading" />
  * ```
  */
 declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -4300,7 +4330,7 @@ declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps &
  * - Determinate and indeterminate progress support
  * - Internationalized value label formatting via React Aria
  * - Label linkage via aria-labelledby / aria-label
- * - Render prop for custom visual rendering
+ * - Render prop for custom visual rendering (receives shape + thickness)
  *
  * @example
  * ```tsx
@@ -4308,7 +4338,7 @@ declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps &
  * <ProgressHeadless
  *   value={50}
  *   label="Upload"
- *   renderProgress={({ percentage }) => (
+ *   renderProgress={({ percentage, shape, thickness }) => (
  *     <div style={{ width: `${percentage}%` }} />
  *   )}
  * />
@@ -7093,9 +7123,9 @@ type RichTooltipVariants = VariantProps<typeof richTooltipVariants>;
 /**
  * Visual density based on content lines (MD3 List)
  *
- * - `one-line`: headline only (48dp)
- * - `two-line`: headline + supporting text (64dp)
- * - `three-line`: overline + headline + supporting text (88dp)
+ * - `one-line`: headline only (56dp min-height)
+ * - `two-line`: headline + supporting text (72dp min-height)
+ * - `three-line`: overline + headline + supporting text (88dp min-height)
  */
 type ListDensity = "one-line" | "two-line" | "three-line";
 /**
@@ -7201,8 +7231,6 @@ interface ListItemProps {
     insetDivider?: boolean;
     /** Additional CSS classes */
     className?: string;
-    /** Item-specific action callback */
-    onAction?: (value: string | number) => void;
 }
 /**
  * Props for the ListItem leading slot
@@ -7276,24 +7304,44 @@ declare const List: React__default.ForwardRefExoticComponent<ListProps & React__
 /**
  * Material Design 3 List Item (Layer 3: Styled)
  *
- * Renders an accessible list item with MD3 visual treatment:
- * state layer, ripple, density-driven height, and slot-based layout.
+ * Architecture: Variants-vs-States
+ * - Design-time variant: `density` (auto-derived from content).
+ * - All interaction/selection states are expressed as data-* attributes on the root <li>
+ *   via `getInteractionDataAttributes`, consumed by each slot via group-data-[x]/list-item.
+ * - Content flags (`data-with-leading`, `data-with-trailing`) describe structure, set explicitly.
  *
- * - **Interactive mode** (inside a `List` with `selectionMode` or `onAction`):
- *   uses `useOption` for ARIA semantics, renders state layer + ripple.
- * - **Static mode**: renders `<li role="listitem">` without interactive
- *   affordances.
+ * Two operating modes:
+ * - **Interactive** (inside a `List` with `selectionMode` or `onAction`):
+ *   uses `useOption` for ARIA semantics, renders state layer + focus ring + ripple.
+ * - **Static**: renders `<li role="listitem">`, no interactive affordances.
  *
  * Density is auto-derived from content:
- * - one-line (56dp) — headline only
- * - two-line (72dp) — headline + supportingText
+ * - one-line (56dp)   — headline only
+ * - two-line (72dp)   — headline + supportingText
  * - three-line (88dp) — overline present
+ *
+ * @example
+ * ```tsx
+ * // Static
+ * <List aria-label="Settings">
+ *   <ListItem value="wifi" headline="Wi-Fi" supportingText="Connected" leadingType="icon" leadingSlot={<IconWifi />} />
+ * </List>
+ *
+ * // Interactive single-select
+ * <List aria-label="Alignment" selectionMode="single">
+ *   <ListItem value="left" headline="Left" />
+ *   <ListItem value="center" headline="Center" />
+ * </List>
+ * ```
  */
 declare const ListItem: React__default.ForwardRefExoticComponent<ListItemProps & React__default.RefAttributes<HTMLLIElement>>;
 
 /**
  * MD3 ListItem leading slot.
  *
+ * Uses `listItemLeadingVariants` CVA so icon/text colors automatically react to
+ * the parent `group/list-item` data-selected and data-disabled attributes.
+ *
  * For `checkbox` and `radio` types the children are wrapped with
  * `aria-hidden="true"` and `tabIndex={-1}` because the parent
  * `ListItem`'s `useOption` already conveys selection state to
@@ -7304,6 +7352,9 @@ declare const ListItemLeading: React$1.ForwardRefExoticComponent<ListItemLeading
 /**
  * MD3 ListItem trailing slot.
  *
+ * Uses `listItemTrailingVariants` CVA so icon/text colors automatically react to
+ * the parent `group/list-item` data-selected and data-disabled attributes.
+ *
  * For `checkbox` and `radio` types the children are wrapped with
  * `aria-hidden="true"` and `tabIndex={-1}` — selection semantics
  * come from the parent `ListItem`'s `useOption`.
@@ -7313,6 +7364,9 @@ declare const ListItemTrailing: React$1.ForwardRefExoticComponent<ListItemTraili
 /**
  * MD3 ListItem text block — overline + headline + supporting text.
  *
+ * Each text element uses its own slot CVA so colors automatically react to
+ * the parent `group/list-item` data-selected and data-disabled attributes.
+ *
  * Uses `min-w-0` to allow text truncation inside flex containers.
  */
 declare const ListItemText: React$1.ForwardRefExoticComponent<ListItemTextProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -7357,20 +7411,58 @@ declare const ListHeadless: React__default.ForwardRefExoticComponent<ListProps &
 declare const ListItemHeadless: React__default.ForwardRefExoticComponent<ListItemProps & React__default.RefAttributes<HTMLLIElement>>;
 
 /**
- * MD3 List container CVA variants.
+ * Material Design 3 List Variants
+ *
+ * Architecture: Variants vs States
+ * - CVA holds design-time structure only (density, slot type).
+ * - All interaction/selection states are driven by data-* attributes on the root <li>
+ *   via group-data-[x]/list-item Tailwind selectors in each slot's base classes.
+ * - Content flags (data-with-leading, data-with-trailing) are set explicitly by ListItem.
+ *
+ * Slot responsibilities:
+ *   listVariants               — container <ul>; bg-surface
+ *   listItemVariants           — root <li>; group/list-item; density height; cursor; disabled
+ *   listItemStateLayerVariants — absolute inset overlay; hover/focus/pressed opacity ring
+ *   listItemFocusRingVariants  — keyboard focus indicator outline
+ *   listItemLeadingVariants    — leading slot wrapper; type-specific size/shape + color states
+ *   listItemTrailingVariants   — trailing slot wrapper; type-specific size/shape + color states
+ *   listItemOverlineVariants   — overline text; color reacts to selected/disabled
+ *   listItemHeadlineVariants   — headline text; color reacts to selected/disabled
+ *   listItemSupportingTextVariants — supporting text; color reacts to selected/disabled
+ *
+ * MD3 Spec (lists/specs):
+ *   One-line:   56dp min-height
+ *   Two-line:   72dp min-height
+ *   Three-line: 88dp min-height (leading/trailing top-aligned)
+ *   Padding: 16dp horizontal, 8dp vertical
+ *   Leading icon: 24dp, text-on-surface-variant
+ *   Leading avatar: 40dp circle
+ *   State-layer opacities: hover 8% | focus 10% | pressed 10%
+ *   Disabled: content 38% opacity, pointer-events none
+ *   Selected: bg-secondary-container, text/icons on-secondary-container
+ */
+/**
+ * List container (<ul>).
+ * MD3: Lists use `surface` color role for their container.
  */
 declare const listVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 /**
- * MD3 ListItem CVA variants.
+ * Root <li> element — carries `group/list-item` and emits data-* interaction attributes.
+ *
+ * Design-time variant: `density` only.
+ * All interaction/selection states are driven via group-data-[x]/list-item selectors
+ * in the slot CVAs below — NOT as CVA variant keys here.
  *
- * Density is auto-derived from content (overline / supportingText), not a user prop.
- * Three-line items use `items-start` so leading/trailing slots top-align.
+ *   one-line:   56dp (min-h-14)
+ *   two-line:   72dp (min-h-18)
+ *   three-line: 88dp (min-h-22, items-start for top-aligned slots)
+ *
+ * Selected background: group-data-[selected]/list-item:bg-secondary-container
+ * Interactive cursor: data-[interactive]:cursor-pointer
+ * Disabled: self-targeting data-[disabled]: selectors (38% + no pointer)
  */
 declare const listItemVariants: (props?: ({
     density?: "one-line" | "two-line" | "three-line" | null | undefined;
-    isSelected?: boolean | null | undefined;
-    isDisabled?: boolean | null | undefined;
-    isInteractive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ListVariants = VariantProps<typeof listVariants>;
 type ListItemVariants = VariantProps<typeof listItemVariants>;

package/dist/index.d.ts

@@ -4150,7 +4150,9 @@ declare const HeadlessDrawerItem: React__default.ForwardRefExoticComponent<Headl
  * Built on React Aria for world-class accessibility.
  * Supports four variants: Linear Determinate, Linear Indeterminate,
  * Circular Determinate, and Circular Indeterminate.
- * Implementation uses CVA + Tailwind CSS classes mapped to MD3 tokens.
+ * Implements MD3 Expressive styling: colorful primary-container track,
+ * 4dp indicator-track gap, fully-rounded segments, thick track option,
+ * and optional wavy shape.
  *
  * @example
  * ```tsx
@@ -4169,6 +4171,9 @@ declare const HeadlessDrawerItem: React__default.ForwardRefExoticComponent<Headl
  * // Circular with size
  * <Progress type="circular" indeterminate size="small" aria-label="Loading" />
  *
+ * // Thick wavy linear (MD3 Expressive)
+ * <Progress type="linear" indeterminate shape="wavy" thickness="thick" aria-label="Loading" />
+ *
  * // Custom range
  * <Progress type="linear" minValue={0} maxValue={200} value={150} label="Progress" />
  * ```
@@ -4191,6 +4196,22 @@ interface ProgressProps extends AriaProgressBarProps {
      * @default "medium"
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Visual shape of the progress indicator.
+     * - `"flat"` — standard rounded rectangular/circular track.
+     * - `"wavy"` — MD3 Expressive sine-wave active indicator.
+     *   Increases linear container height to accommodate wave amplitude.
+     *   Reduced-motion users receive a flat fallback automatically.
+     * @default "flat"
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * Track thickness.
+     * - `"default"` — 4dp per MD3 baseline spec.
+     * - `"thick"` — 8dp MD3 Expressive variant (fully rounded, `trackCornerRadius` = 4dp).
+     * @default "default"
+     */
+    thickness?: "default" | "thick";
     /**
      * Additional CSS classes (Tailwind).
      */
@@ -4206,7 +4227,7 @@ interface ProgressProps extends AriaProgressBarProps {
  *   type="linear"
  *   value={50}
  *   label="Upload"
- *   renderProgress={({ percentage }) => (
+ *   renderProgress={({ percentage, shape, thickness }) => (
  *     <div style={{ width: `${percentage}%` }} />
  *   )}
  * />
@@ -4228,6 +4249,16 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
      * @default "medium"
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Visual shape of the progress indicator.
+     * @default "flat"
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * Track thickness.
+     * @default "default"
+     */
+    thickness?: "default" | "thick";
     /**
      * Additional CSS classes.
      */
@@ -4245,6 +4276,8 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
         isIndeterminate: boolean;
         type: "linear" | "circular";
         size: "small" | "medium" | "large";
+        shape: "flat" | "wavy";
+        thickness: "default" | "thick";
     }) => React__default.ReactNode;
 }
 
@@ -4252,23 +4285,20 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
  * Material Design 3 Progress Indicator (Layer 3: Styled)
  *
  * Built on React Aria for world-class accessibility.
- * Supports four variants driven by `type` + `indeterminate` props:
+ * Implements MD3 Expressive spec:
+ *   - Colorful track: primary-container (inactive), primary (active)
+ *   - 4dp indicator-track gap (linear + circular)
+ *   - Fully-rounded segments
+ *   - Optional thick (8dp) track
+ *   - Optional wavy shape with amplitude ramp
+ *   - useReducedMotion guard: wavy falls back to flat when reduced-motion is set
+ *
+ * Four variants driven by `type` × `indeterminate`:
  *   - Linear Determinate
  *   - Linear Indeterminate
  *   - Circular Determinate
  *   - Circular Indeterminate
  *
- * MD3 Specifications:
- * - Linear track height: 4dp (h-1)
- * - Linear track shape: rounded-full
- * - Circular default size: 48dp (medium)
- * - Circular stroke width: 4dp (SVG attribute)
- * - Active track: primary
- * - Inactive track: surface-container-highest
- * - Determinate transitions: duration-medium4 + ease-standard
- * - Indeterminate linear cycle: duration-long2
- * - Indeterminate circular rotation: duration-long4
- *
  * @example
  * ```tsx
  * // Linear determinate
@@ -4283,8 +4313,8 @@ interface ProgressHeadlessProps extends AriaProgressBarProps {
  * // Circular indeterminate
  * <Progress type="circular" indeterminate aria-label="Loading" />
  *
- * // Circular small spinner
- * <Progress type="circular" indeterminate size="small" aria-label="Loading" />
+ * // Thick wavy (MD3 Expressive)
+ * <Progress type="linear" indeterminate shape="wavy" thickness="thick" aria-label="Loading" />
  * ```
  */
 declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -4300,7 +4330,7 @@ declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps &
  * - Determinate and indeterminate progress support
  * - Internationalized value label formatting via React Aria
  * - Label linkage via aria-labelledby / aria-label
- * - Render prop for custom visual rendering
+ * - Render prop for custom visual rendering (receives shape + thickness)
  *
  * @example
  * ```tsx
@@ -4308,7 +4338,7 @@ declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps &
  * <ProgressHeadless
  *   value={50}
  *   label="Upload"
- *   renderProgress={({ percentage }) => (
+ *   renderProgress={({ percentage, shape, thickness }) => (
  *     <div style={{ width: `${percentage}%` }} />
  *   )}
  * />
@@ -7093,9 +7123,9 @@ type RichTooltipVariants = VariantProps<typeof richTooltipVariants>;
 /**
  * Visual density based on content lines (MD3 List)
  *
- * - `one-line`: headline only (48dp)
- * - `two-line`: headline + supporting text (64dp)
- * - `three-line`: overline + headline + supporting text (88dp)
+ * - `one-line`: headline only (56dp min-height)
+ * - `two-line`: headline + supporting text (72dp min-height)
+ * - `three-line`: overline + headline + supporting text (88dp min-height)
  */
 type ListDensity = "one-line" | "two-line" | "three-line";
 /**
@@ -7201,8 +7231,6 @@ interface ListItemProps {
     insetDivider?: boolean;
     /** Additional CSS classes */
     className?: string;
-    /** Item-specific action callback */
-    onAction?: (value: string | number) => void;
 }
 /**
  * Props for the ListItem leading slot
@@ -7276,24 +7304,44 @@ declare const List: React__default.ForwardRefExoticComponent<ListProps & React__
 /**
  * Material Design 3 List Item (Layer 3: Styled)
  *
- * Renders an accessible list item with MD3 visual treatment:
- * state layer, ripple, density-driven height, and slot-based layout.
+ * Architecture: Variants-vs-States
+ * - Design-time variant: `density` (auto-derived from content).
+ * - All interaction/selection states are expressed as data-* attributes on the root <li>
+ *   via `getInteractionDataAttributes`, consumed by each slot via group-data-[x]/list-item.
+ * - Content flags (`data-with-leading`, `data-with-trailing`) describe structure, set explicitly.
  *
- * - **Interactive mode** (inside a `List` with `selectionMode` or `onAction`):
- *   uses `useOption` for ARIA semantics, renders state layer + ripple.
- * - **Static mode**: renders `<li role="listitem">` without interactive
- *   affordances.
+ * Two operating modes:
+ * - **Interactive** (inside a `List` with `selectionMode` or `onAction`):
+ *   uses `useOption` for ARIA semantics, renders state layer + focus ring + ripple.
+ * - **Static**: renders `<li role="listitem">`, no interactive affordances.
  *
  * Density is auto-derived from content:
- * - one-line (56dp) — headline only
- * - two-line (72dp) — headline + supportingText
+ * - one-line (56dp)   — headline only
+ * - two-line (72dp)   — headline + supportingText
  * - three-line (88dp) — overline present
+ *
+ * @example
+ * ```tsx
+ * // Static
+ * <List aria-label="Settings">
+ *   <ListItem value="wifi" headline="Wi-Fi" supportingText="Connected" leadingType="icon" leadingSlot={<IconWifi />} />
+ * </List>
+ *
+ * // Interactive single-select
+ * <List aria-label="Alignment" selectionMode="single">
+ *   <ListItem value="left" headline="Left" />
+ *   <ListItem value="center" headline="Center" />
+ * </List>
+ * ```
  */
 declare const ListItem: React__default.ForwardRefExoticComponent<ListItemProps & React__default.RefAttributes<HTMLLIElement>>;
 
 /**
  * MD3 ListItem leading slot.
  *
+ * Uses `listItemLeadingVariants` CVA so icon/text colors automatically react to
+ * the parent `group/list-item` data-selected and data-disabled attributes.
+ *
  * For `checkbox` and `radio` types the children are wrapped with
  * `aria-hidden="true"` and `tabIndex={-1}` because the parent
  * `ListItem`'s `useOption` already conveys selection state to
@@ -7304,6 +7352,9 @@ declare const ListItemLeading: React$1.ForwardRefExoticComponent<ListItemLeading
 /**
  * MD3 ListItem trailing slot.
  *
+ * Uses `listItemTrailingVariants` CVA so icon/text colors automatically react to
+ * the parent `group/list-item` data-selected and data-disabled attributes.
+ *
  * For `checkbox` and `radio` types the children are wrapped with
  * `aria-hidden="true"` and `tabIndex={-1}` — selection semantics
  * come from the parent `ListItem`'s `useOption`.
@@ -7313,6 +7364,9 @@ declare const ListItemTrailing: React$1.ForwardRefExoticComponent<ListItemTraili
 /**
  * MD3 ListItem text block — overline + headline + supporting text.
  *
+ * Each text element uses its own slot CVA so colors automatically react to
+ * the parent `group/list-item` data-selected and data-disabled attributes.
+ *
  * Uses `min-w-0` to allow text truncation inside flex containers.
  */
 declare const ListItemText: React$1.ForwardRefExoticComponent<ListItemTextProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -7357,20 +7411,58 @@ declare const ListHeadless: React__default.ForwardRefExoticComponent<ListProps &
 declare const ListItemHeadless: React__default.ForwardRefExoticComponent<ListItemProps & React__default.RefAttributes<HTMLLIElement>>;
 
 /**
- * MD3 List container CVA variants.
+ * Material Design 3 List Variants
+ *
+ * Architecture: Variants vs States
+ * - CVA holds design-time structure only (density, slot type).
+ * - All interaction/selection states are driven by data-* attributes on the root <li>
+ *   via group-data-[x]/list-item Tailwind selectors in each slot's base classes.
+ * - Content flags (data-with-leading, data-with-trailing) are set explicitly by ListItem.
+ *
+ * Slot responsibilities:
+ *   listVariants               — container <ul>; bg-surface
+ *   listItemVariants           — root <li>; group/list-item; density height; cursor; disabled
+ *   listItemStateLayerVariants — absolute inset overlay; hover/focus/pressed opacity ring
+ *   listItemFocusRingVariants  — keyboard focus indicator outline
+ *   listItemLeadingVariants    — leading slot wrapper; type-specific size/shape + color states
+ *   listItemTrailingVariants   — trailing slot wrapper; type-specific size/shape + color states
+ *   listItemOverlineVariants   — overline text; color reacts to selected/disabled
+ *   listItemHeadlineVariants   — headline text; color reacts to selected/disabled
+ *   listItemSupportingTextVariants — supporting text; color reacts to selected/disabled
+ *
+ * MD3 Spec (lists/specs):
+ *   One-line:   56dp min-height
+ *   Two-line:   72dp min-height
+ *   Three-line: 88dp min-height (leading/trailing top-aligned)
+ *   Padding: 16dp horizontal, 8dp vertical
+ *   Leading icon: 24dp, text-on-surface-variant
+ *   Leading avatar: 40dp circle
+ *   State-layer opacities: hover 8% | focus 10% | pressed 10%
+ *   Disabled: content 38% opacity, pointer-events none
+ *   Selected: bg-secondary-container, text/icons on-secondary-container
+ */
+/**
+ * List container (<ul>).
+ * MD3: Lists use `surface` color role for their container.
  */
 declare const listVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 /**
- * MD3 ListItem CVA variants.
+ * Root <li> element — carries `group/list-item` and emits data-* interaction attributes.
+ *
+ * Design-time variant: `density` only.
+ * All interaction/selection states are driven via group-data-[x]/list-item selectors
+ * in the slot CVAs below — NOT as CVA variant keys here.
  *
- * Density is auto-derived from content (overline / supportingText), not a user prop.
- * Three-line items use `items-start` so leading/trailing slots top-align.
+ *   one-line:   56dp (min-h-14)
+ *   two-line:   72dp (min-h-18)
+ *   three-line: 88dp (min-h-22, items-start for top-aligned slots)
+ *
+ * Selected background: group-data-[selected]/list-item:bg-secondary-container
+ * Interactive cursor: data-[interactive]:cursor-pointer
+ * Disabled: self-targeting data-[disabled]: selectors (38% + no pointer)
  */
 declare const listItemVariants: (props?: ({
     density?: "one-line" | "two-line" | "three-line" | null | undefined;
-    isSelected?: boolean | null | undefined;
-    isDisabled?: boolean | null | undefined;
-    isInteractive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ListVariants = VariantProps<typeof listVariants>;
 type ListItemVariants = VariantProps<typeof listItemVariants>;