@tinybigui/react 0.14.0 → 0.16.0

package/dist/index.js

@@ -5159,9 +5159,6 @@ var DrawerItem = forwardRef(
 DrawerItem.displayName = "DrawerItem";
 var progressContainerVariants = cva(["inline-flex", "flex-col", "gap-1"], {
   variants: {
-    /**
-     * The visual type of the indicator.
-     */
     type: {
       linear: "w-full",
       circular: "items-center justify-center w-auto"
@@ -5171,41 +5168,60 @@ var progressContainerVariants = cva(["inline-flex", "flex-col", "gap-1"], {
     type: "linear"
   }
 });
-var progressTrackVariants = cva([
-  "relative",
-  "w-full",
-  "h-1",
-  // MD3: 4dp track height
-  "rounded-full",
-  // MD3: full corner radius
-  "overflow-hidden",
-  "bg-surface-container-highest"
-  // MD3: inactive track color
-]);
-var progressIndicatorVariants = cva([
+var progressLabelVariants = cva(["text-body-small", "text-on-surface", "select-none"]);
+var progressTrackVariants = cva(
+  [
+    "relative",
+    "w-full",
+    "overflow-visible",
+    // gap segments extend beyond clipping bounds
+    "rounded-full"
+  ],
+  {
+    variants: {
+      thickness: {
+        default: "h-1",
+        thick: "h-2"
+      }
+    },
+    defaultVariants: {
+      thickness: "default"
+    }
+  }
+);
+var progressActiveIndicatorVariants = cva([
   "absolute",
   "left-0",
   "top-0",
   "h-full",
   "rounded-full",
   "bg-primary",
-  // MD3: active track color
+  // Spatial spring — width changes are spatial (bar growing)
   "transition-[width]",
-  "duration-medium4",
-  // MD3: 400ms for value transitions
-  "ease-standard"
-  // MD3: cubic-bezier(0.2, 0, 0, 1)
+  "duration-spring-standard-default-spatial",
+  "ease-spring-standard-default-spatial"
+]);
+var progressInactiveSegmentVariants = cva([
+  "absolute",
+  "top-0",
+  "right-0",
+  "h-full",
+  "rounded-full",
+  "bg-primary-container",
+  // Spatial spring on left position (gap moves as progress moves)
+  "transition-[left]",
+  "duration-spring-standard-default-spatial",
+  "ease-spring-standard-default-spatial"
 ]);
 var progressStopIndicatorVariants = cva([
   "absolute",
   "right-0",
   "top-1/2",
   "-translate-y-1/2",
-  "w-1",
-  "h-1",
+  "size-1",
+  // 4dp
   "rounded-full",
   "bg-primary"
-  // MD3: stop indicator uses primary color
 ]);
 var progressCircularSizeVariants = cva(
   ["relative", "flex", "items-center", "justify-center", "flex-shrink-0"],
@@ -5213,11 +5229,8 @@ var progressCircularSizeVariants = cva(
     variants: {
       size: {
         small: "h-6 w-6",
-        // MD3: 24dp
         medium: "h-12 w-12",
-        // MD3: 48dp (default)
         large: "h-16 w-16"
-        // MD3: 64dp
       }
     },
     defaultVariants: {
@@ -5225,33 +5238,85 @@ var progressCircularSizeVariants = cva(
     }
   }
 );
-var progressLabelVariants = cva([
-  "text-body-small",
-  // MD3: body-small type scale (12px)
-  "text-on-surface",
-  // MD3: on-surface color role
-  "select-none"
-]);
-var STROKE_WIDTH = 4;
+function useReducedMotion2() {
+  const [reduced, setReduced] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = (e) => setReduced(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return reduced;
+}
+var STROKE_WIDTH_DEFAULT = 4;
+var STROKE_WIDTH_THICK = 8;
+var INDICATOR_TRACK_GAP = 4;
 var CIRCULAR_SIZE_PX = {
   small: 24,
   medium: 48,
   large: 64
 };
-function getCircularGeometry(size) {
+var WAVE_AMPLITUDE_DEFAULT = 3;
+var WAVE_AMPLITUDE_THICK = 5;
+var LINEAR_WAVE_COUNT = 14;
+var VB_W = 100;
+var WAVE_WAVELENGTH_CIRCULAR = 30;
+function getStrokeWidth(thickness) {
+  return thickness === "thick" ? STROKE_WIDTH_THICK : STROKE_WIDTH_DEFAULT;
+}
+function getCircularGeometry(size, thickness) {
+  const strokeWidth = getStrokeWidth(thickness);
   const diameter = CIRCULAR_SIZE_PX[size];
-  const radius = (diameter - STROKE_WIDTH) / 2;
+  const radius = (diameter - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const viewBox = `0 0 ${diameter} ${diameter}`;
   const cx = diameter / 2;
   const cy = diameter / 2;
-  return { diameter, radius, circumference, viewBox, cx, cy };
+  return { diameter, radius, circumference, viewBox, cx, cy, strokeWidth };
+}
+function buildLinearWavePath(vbWidth, waveCount, amplitude, midY, padCycles = 0) {
+  const wavelength = vbWidth / waveCount;
+  const totalCycles = waveCount + padCycles;
+  const cp = wavelength / 4;
+  const segments = [`M 0 ${midY}`];
+  for (let i = 0; i < totalCycles; i++) {
+    const x = i * wavelength;
+    segments.push(
+      `C ${x + cp} ${midY - amplitude} ${x + wavelength / 2 - cp} ${midY - amplitude} ${x + wavelength / 2} ${midY}`
+    );
+    segments.push(
+      `C ${x + wavelength / 2 + cp} ${midY + amplitude} ${x + wavelength - cp} ${midY + amplitude} ${x + wavelength} ${midY}`
+    );
+  }
+  return segments.join(" ");
+}
+function buildCircularWavePath(cx, cy, radius, amplitude, waveCount, steps) {
+  const actualSteps = waveCount * 12;
+  const points = [];
+  for (let i = 0; i <= actualSteps; i++) {
+    const t = i / actualSteps;
+    const angle = t * 2 * Math.PI;
+    const radialOffset = amplitude * Math.sin(2 * Math.PI * waveCount * t);
+    const r = radius + radialOffset;
+    const x = cx + r * Math.cos(angle);
+    const y = cy + r * Math.sin(angle);
+    points.push(
+      i === 0 ? `M ${x.toFixed(2)} ${y.toFixed(2)}` : `L ${x.toFixed(2)} ${y.toFixed(2)}`
+    );
+  }
+  return points.join(" ") + " Z";
 }
 var Progress = forwardRef(
   ({
     type = "linear",
     indeterminate = false,
     size = "medium",
+    shape = "flat",
+    thickness = "default",
     className,
     label,
     value = 0,
@@ -5261,6 +5326,7 @@ var Progress = forwardRef(
   }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
+    const reducedMotion = useReducedMotion2();
     const { progressBarProps, labelProps } = useProgressBar({
       label,
       value,
@@ -5270,6 +5336,7 @@ var Progress = forwardRef(
       ...restProps
     });
     const percentage = indeterminate ? 0 : Math.min(100, Math.max(0, (value - minValue) / (maxValue - minValue) * 100));
+    const effectiveShape = reducedMotion ? "flat" : shape;
     if (process.env.NODE_ENV !== "production") {
       const ariaProps = restProps;
       if (!label && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
@@ -5286,52 +5353,72 @@ var Progress = forwardRef(
         className: cn(progressContainerVariants({ type }), className),
         children: [
           label && /* @__PURE__ */ jsx("span", { ...labelProps, className: cn(progressLabelVariants()), children: label }),
-          type === "linear" ? /* @__PURE__ */ jsx(LinearProgress, { percentage, indeterminate }) : /* @__PURE__ */ jsx(CircularProgress, { percentage, indeterminate, size })
-        ]
-      }
-    );
-  }
-);
-Progress.displayName = "Progress";
-function LinearProgress({ percentage, indeterminate }) {
-  if (indeterminate) {
-    return /* @__PURE__ */ jsx("div", { "data-progress-track": "", className: cn(progressTrackVariants()), children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-progress-indeterminate": "",
-        className: "absolute inset-0 overflow-hidden rounded-full",
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
+          type === "linear" ? /* @__PURE__ */ jsx(
+            LinearProgress,
             {
-              className: cn(
-                "bg-primary absolute top-0 h-full rounded-full",
-                "animate-progress-linear-indeterminate-1"
-              )
+              percentage,
+              indeterminate,
+              shape: effectiveShape,
+              thickness,
+              reducedMotion
             }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
+          ) : /* @__PURE__ */ jsx(
+            CircularProgress,
             {
-              className: cn(
-                "bg-primary absolute top-0 h-full rounded-full",
-                "animate-progress-linear-indeterminate-2"
-              )
+              percentage,
+              indeterminate,
+              size,
+              shape: effectiveShape,
+              thickness,
+              reducedMotion
             }
           )
         ]
       }
-    ) });
+    );
   }
-  return /* @__PURE__ */ jsxs("div", { "data-progress-track": "", className: cn(progressTrackVariants()), children: [
+);
+Progress.displayName = "Progress";
+function LinearProgress({
+  percentage,
+  indeterminate,
+  shape,
+  thickness,
+  reducedMotion
+}) {
+  if (indeterminate) {
+    return shape === "wavy" ? /* @__PURE__ */ jsx(LinearWavyIndeterminate, { thickness }) : /* @__PURE__ */ jsx(LinearFlatIndeterminate, { thickness });
+  }
+  return shape === "wavy" ? /* @__PURE__ */ jsx(
+    LinearWavyDeterminate,
+    {
+      percentage,
+      thickness,
+      reducedMotion
+    }
+  ) : /* @__PURE__ */ jsx(LinearFlatDeterminate, { percentage, thickness });
+}
+function LinearFlatDeterminate({
+  percentage,
+  thickness
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-progress-track": "", className: cn(progressTrackVariants({ thickness })), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         "data-progress-indicator": "",
-        className: cn(progressIndicatorVariants()),
+        className: cn(progressActiveIndicatorVariants()),
         style: { width: `${percentage}%` }
       }
     ),
+    percentage < 100 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-progress-inactive-segment": "",
+        className: cn(progressInactiveSegmentVariants()),
+        style: { left: `calc(${percentage}% + ${INDICATOR_TRACK_GAP}px)` }
+      }
+    ),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -5342,14 +5429,211 @@ function LinearProgress({ percentage, indeterminate }) {
     )
   ] });
 }
+function LinearFlatIndeterminate({
+  thickness
+}) {
+  return /* @__PURE__ */ jsx("div", { "data-progress-track": "", className: cn(progressTrackVariants({ thickness })), children: /* @__PURE__ */ jsxs("div", { "data-progress-indeterminate": "", className: "absolute inset-0 overflow-hidden rounded-full", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "bg-primary absolute top-0 h-full rounded-full",
+          "animate-progress-linear-indeterminate-1"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "bg-primary absolute top-0 h-full rounded-full",
+          "animate-progress-linear-indeterminate-2"
+        )
+      }
+    )
+  ] }) });
+}
+function LinearWavyDeterminate({
+  percentage,
+  thickness,
+  reducedMotion
+}) {
+  const amplitude = thickness === "thick" ? WAVE_AMPLITUDE_THICK : WAVE_AMPLITUDE_DEFAULT;
+  const containerHeight = (thickness === "thick" ? 8 : 4) + 2 * amplitude + 4;
+  const midY = amplitude + 2;
+  const trackHeightClass = thickness === "thick" ? "h-2" : "h-1";
+  const trackPx = getStrokeWidth(thickness);
+  const rampedAmplitude = reducedMotion || percentage <= 0 || percentage >= 100 ? 0 : amplitude * Math.min(
+    (percentage - 10) / 10,
+    // ramp up  10%→20%
+    (90 - percentage) / 10,
+    // ramp down 80%→90%
+    1
+  );
+  const wavePath = buildLinearWavePath(VB_W, LINEAR_WAVE_COUNT, rampedAmplitude, midY);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-progress-track": "",
+      className: cn("relative w-full overflow-hidden", trackHeightClass),
+      style: { height: containerHeight },
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: `0 0 ${VB_W} ${containerHeight}`,
+            preserveAspectRatio: "none",
+            className: cn(
+              "absolute inset-0 w-full",
+              "transition-[clip-path]",
+              "duration-spring-standard-default-spatial",
+              "ease-spring-standard-default-spatial"
+            ),
+            style: {
+              height: containerHeight,
+              // clip-path applied in rendered-element space: keeps left `percentage`%
+              clipPath: `inset(0 ${100 - percentage}% 0 0)`
+            },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                "data-progress-indicator": "",
+                d: wavePath,
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: getStrokeWidth(thickness),
+                strokeLinecap: "round",
+                vectorEffect: "non-scaling-stroke",
+                className: "text-primary"
+              }
+            )
+          }
+        ),
+        percentage < 100 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-progress-inactive-segment": "",
+            className: cn(progressInactiveSegmentVariants()),
+            style: {
+              left: `calc(${percentage}% + ${INDICATOR_TRACK_GAP}px)`,
+              height: trackPx,
+              top: midY - trackPx / 2
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-stop-indicator": "",
+            className: cn(progressStopIndicatorVariants()),
+            style: { top: midY },
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function LinearWavyIndeterminate({
+  thickness
+}) {
+  const amplitude = thickness === "thick" ? WAVE_AMPLITUDE_THICK : WAVE_AMPLITUDE_DEFAULT;
+  const containerHeight = (thickness === "thick" ? 8 : 4) + 2 * amplitude + 4;
+  const midY = amplitude + 2;
+  const trackHeightClass = thickness === "thick" ? "h-2" : "h-1";
+  const trackPx = getStrokeWidth(thickness);
+  const wavePath = buildLinearWavePath(VB_W, LINEAR_WAVE_COUNT, amplitude, midY);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-progress-track": "",
+      className: cn("relative w-full overflow-hidden", trackHeightClass),
+      style: { height: containerHeight },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bg-primary-container absolute right-0 left-0 rounded-full",
+            style: { height: trackPx, top: midY - trackPx / 2 }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { "data-progress-indeterminate": "", className: "absolute inset-0", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: `0 0 ${VB_W} ${containerHeight}`,
+              preserveAspectRatio: "none",
+              className: "animate-progress-linear-indeterminate-1 absolute top-0 h-full",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: wavePath,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: getStrokeWidth(thickness),
+                  strokeLinecap: "round",
+                  vectorEffect: "non-scaling-stroke",
+                  className: "text-primary"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: `0 0 ${VB_W} ${containerHeight}`,
+              preserveAspectRatio: "none",
+              className: "animate-progress-linear-indeterminate-2 absolute top-0 h-full",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: wavePath,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: getStrokeWidth(thickness),
+                  strokeLinecap: "round",
+                  vectorEffect: "non-scaling-stroke",
+                  className: "text-primary"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function CircularProgress({
   percentage,
   indeterminate,
-  size
+  size,
+  shape,
+  thickness,
+  reducedMotion
 }) {
-  const { radius, circumference, viewBox, cx, cy } = getCircularGeometry(size);
-  const strokeDashoffset = (1 - percentage / 100) * circumference;
+  const { radius, circumference, viewBox, cx, cy, strokeWidth, diameter } = getCircularGeometry(
+    size,
+    thickness
+  );
   if (indeterminate) {
+    if (shape === "wavy") {
+      return /* @__PURE__ */ jsx(
+        CircularWavyIndeterminate,
+        {
+          size,
+          cx,
+          cy,
+          radius,
+          circumference,
+          viewBox,
+          strokeWidth,
+          diameter
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -5371,8 +5655,8 @@ function CircularProgress({
                   r: radius,
                   fill: "none",
                   stroke: "currentColor",
-                  strokeWidth: STROKE_WIDTH,
-                  className: "text-surface-container-highest"
+                  strokeWidth,
+                  className: "text-primary-container"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -5383,7 +5667,7 @@ function CircularProgress({
                   r: radius,
                   fill: "none",
                   stroke: "currentColor",
-                  strokeWidth: STROKE_WIDTH,
+                  strokeWidth,
                   className: "animate-progress-circular-dash text-primary",
                   strokeLinecap: "round"
                 }
@@ -5394,41 +5678,211 @@ function CircularProgress({
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { "data-progress-size": size, className: cn(progressCircularSizeVariants({ size })), children: /* @__PURE__ */ jsxs("svg", { viewBox, className: "h-full w-full -rotate-90", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx(
-      "circle",
-      {
-        cx,
-        cy,
-        r: radius,
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: STROKE_WIDTH,
-        className: "text-surface-container-highest"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "circle",
+  if (shape === "wavy") {
+    return /* @__PURE__ */ jsx(
+      CircularWavyDeterminate,
       {
+        size,
+        percentage,
         cx,
         cy,
-        r: radius,
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: STROKE_WIDTH,
-        strokeLinecap: "round",
-        className: "text-primary duration-medium4 ease-standard transition-[stroke-dashoffset]",
-        strokeDasharray: circumference,
-        strokeDashoffset
+        radius,
+        circumference,
+        viewBox,
+        strokeWidth,
+        diameter,
+        reducedMotion
       }
-    )
-  ] }) });
+    );
+  }
+  const activeArc = percentage / 100 * circumference;
+  const activeArcGapped = Math.max(0, activeArc - INDICATOR_TRACK_GAP);
+  const inactiveArcGapped = Math.max(0, circumference - activeArc - INDICATOR_TRACK_GAP);
+  const activeOffset = 0;
+  const inactiveOffset = -(activeArcGapped + INDICATOR_TRACK_GAP);
+  return /* @__PURE__ */ jsxs("div", { "data-progress-size": size, className: cn(progressCircularSizeVariants({ size })), children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox, className: "h-full w-full -rotate-90", "aria-hidden": "true", children: [
+      percentage < 100 && /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy,
+          r: radius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeDasharray: `${inactiveArcGapped} ${circumference - inactiveArcGapped}`,
+          strokeDashoffset: inactiveOffset,
+          className: "text-primary-container duration-spring-standard-default-spatial ease-spring-standard-default-spatial transition-[stroke-dasharray,stroke-dashoffset]"
+        }
+      ),
+      percentage > 0 && /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy,
+          r: radius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeDasharray: `${activeArcGapped} ${circumference - activeArcGapped}`,
+          strokeDashoffset: activeOffset,
+          className: "text-primary duration-spring-standard-default-spatial ease-spring-standard-default-spatial transition-[stroke-dasharray,stroke-dashoffset]"
+        }
+      ),
+      percentage === 0 && /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy,
+          r: radius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          className: "text-primary-container"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", "data-progress-diameter": diameter })
+  ] });
+}
+function CircularWavyIndeterminate({
+  size,
+  cx,
+  cy,
+  radius,
+  circumference: _circumference,
+  viewBox,
+  strokeWidth
+}) {
+  const circAmp = Math.min(WAVE_AMPLITUDE_DEFAULT, radius * 0.35);
+  const meanRadius = radius - circAmp;
+  const meanCircumference = 2 * Math.PI * meanRadius;
+  const waveCount = Math.max(4, Math.round(meanCircumference / WAVE_WAVELENGTH_CIRCULAR));
+  const wavePath = buildCircularWavePath(cx, cy, meanRadius, circAmp, waveCount);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-progress-size": size,
+      "data-progress-indeterminate": "",
+      className: cn(progressCircularSizeVariants({ size })),
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox,
+          className: "animate-progress-circular-rotate h-full w-full",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx,
+                cy,
+                r: meanRadius,
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth,
+                className: "text-primary-container"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: wavePath,
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth,
+                strokeLinecap: "round",
+                pathLength: 100,
+                strokeDasharray: "28 72",
+                className: "text-primary"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function CircularWavyDeterminate({
+  size,
+  percentage,
+  cx,
+  cy,
+  radius,
+  circumference: _circumference,
+  viewBox,
+  strokeWidth,
+  diameter,
+  reducedMotion
+}) {
+  const circAmp = reducedMotion ? 0 : Math.min(WAVE_AMPLITUDE_DEFAULT, radius * 0.35);
+  const meanRadius = radius - circAmp;
+  const meanCircumference = 2 * Math.PI * meanRadius;
+  const waveCount = Math.max(4, Math.round(meanCircumference / WAVE_WAVELENGTH_CIRCULAR));
+  const wavePath = buildCircularWavePath(cx, cy, meanRadius, circAmp, waveCount);
+  const gapPct = INDICATOR_TRACK_GAP / meanCircumference * 100;
+  const activeLen = Math.max(0, percentage - gapPct);
+  const inactiveLen = Math.max(0, 100 - percentage - gapPct);
+  const inactiveOffset = -(activeLen + gapPct);
+  return /* @__PURE__ */ jsxs("div", { "data-progress-size": size, className: cn(progressCircularSizeVariants({ size })), children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox, className: "h-full w-full -rotate-90", "aria-hidden": "true", children: [
+      percentage === 0 && /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy,
+          r: meanRadius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          className: "text-primary-container"
+        }
+      ),
+      percentage > 0 && percentage < 100 && /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy,
+          r: meanRadius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          pathLength: 100,
+          strokeDasharray: `${inactiveLen} ${100 - inactiveLen}`,
+          strokeDashoffset: inactiveOffset,
+          className: "text-primary-container duration-spring-standard-default-spatial ease-spring-standard-default-spatial transition-[stroke-dasharray,stroke-dashoffset]"
+        }
+      ),
+      percentage > 0 && /* @__PURE__ */ jsx(
+        "path",
+        {
+          "data-progress-indicator": "",
+          d: wavePath,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          pathLength: 100,
+          strokeDasharray: percentage < 100 ? `${activeLen} ${100 - activeLen}` : void 0,
+          strokeDashoffset: 0,
+          className: "text-primary duration-spring-standard-default-spatial ease-spring-standard-default-spatial transition-[stroke-dasharray]"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", "data-progress-diameter": diameter })
+  ] });
 }
 var ProgressHeadless = forwardRef(
   ({
     type = "linear",
     indeterminate = false,
     size = "medium",
+    shape = "flat",
+    thickness = "default",
     className,
     children,
     renderProgress,
@@ -5455,7 +5909,9 @@ var ProgressHeadless = forwardRef(
         percentage,
         isIndeterminate: indeterminate,
         type,
-        size
+        size,
+        shape,
+        thickness
       }),
       children
     ] });
@@ -7983,37 +8439,150 @@ InteractiveListItem.displayName = "InteractiveListItem";
 var listVariants = cva("w-full bg-surface");
 var listItemVariants = cva(
   [
-    "group relative flex items-center overflow-hidden px-4 py-2 cursor-pointer",
-    "transition-[background-color] duration-short4 ease-standard"
+    // Layout
+    "relative flex items-center overflow-hidden px-4 py-2 select-none",
+    // Color transition — effects spring (no spatial overshoot on color)
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Cursor: non-interactive base; data-[interactive] overrides
+    "cursor-default",
+    "data-[interactive]:cursor-pointer",
+    // Selected: secondary-container background
+    "group-data-[selected]/list-item:bg-secondary-container",
+    // Disabled: self-targeting selectors (not group, since root is the group)
+    "data-[disabled]:opacity-38 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed"
   ],
   {
     variants: {
+      /**
+       * Visual density — derived from content, not a user prop.
+       * one-line:   headline only (56dp)
+       * two-line:   headline + supportingText (72dp)
+       * three-line: overline + headline + supportingText (88dp)
+       */
       density: {
         "one-line": "min-h-14",
         "two-line": "min-h-18",
         "three-line": "min-h-22 items-start"
-      },
-      isSelected: {
-        true: "bg-secondary-container text-on-secondary-container",
-        false: ""
-      },
-      isDisabled: {
-        true: "opacity-38 pointer-events-none",
-        false: ""
-      },
-      isInteractive: {
-        true: "",
-        false: "cursor-default"
       }
     },
     defaultVariants: {
-      density: "one-line",
-      isSelected: false,
-      isDisabled: false,
-      isInteractive: true
+      density: "one-line"
+    }
+  }
+);
+var listItemStateLayerVariants = cva([
+  "absolute inset-0 pointer-events-none opacity-0",
+  "bg-on-surface",
+  // Effects transition for opacity — no spatial overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover: 8%
+  "group-data-[hovered]/list-item:opacity-8",
+  // Focus: 10%
+  "group-data-[focus-visible]/list-item:opacity-10",
+  // Pressed: 10%, doubled selector beats hover
+  "group-data-[pressed]/list-item:group-data-[pressed]/list-item:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/list-item:hidden"
+]);
+var listItemFocusRingVariants = cva([
+  "pointer-events-none absolute inset-0",
+  "outline outline-2 -outline-offset-2 outline-secondary",
+  // Effects transition — opacity must NOT overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/list-item:opacity-100"
+]);
+var listItemLeadingVariants = cva(
+  [
+    "mr-4 flex shrink-0 items-center",
+    // Effects transition for icon color changes
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+  ],
+  {
+    variants: {
+      type: {
+        icon: [
+          "size-6",
+          "text-on-surface-variant",
+          // Selected: icon color changes to on-secondary-container
+          "group-data-[selected]/list-item:text-on-secondary-container",
+          // Disabled: 38% (inherited from root opacity-38, but also explicit for color accuracy)
+          "group-data-[disabled]/list-item:text-on-surface/38"
+        ],
+        avatar: [
+          "size-10 overflow-hidden rounded-full"
+          // Avatar color provided by content; no token overrides needed
+        ],
+        checkbox: [],
+        radio: []
+      }
+    },
+    defaultVariants: {
+      type: "icon"
     }
   }
 );
+var listItemTrailingVariants = cva(
+  [
+    "ml-auto flex shrink-0 items-center",
+    // Effects transition for color changes
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+  ],
+  {
+    variants: {
+      type: {
+        icon: [
+          "size-6",
+          "text-on-surface-variant",
+          "group-data-[selected]/list-item:text-on-secondary-container",
+          "group-data-[disabled]/list-item:text-on-surface/38"
+        ],
+        text: [
+          "text-label-small",
+          "text-on-surface-variant",
+          "group-data-[selected]/list-item:text-on-secondary-container",
+          "group-data-[disabled]/list-item:text-on-surface/38"
+        ],
+        checkbox: [],
+        radio: []
+      }
+    },
+    defaultVariants: {
+      type: "icon"
+    }
+  }
+);
+var listItemOverlineVariants = cva([
+  "text-label-small",
+  "text-on-surface-variant",
+  // Effects transition for color
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected: on-secondary-container
+  "group-data-[selected]/list-item:text-on-secondary-container",
+  // Disabled: opacity inherited from root; explicit for color
+  "group-data-[disabled]/list-item:text-on-surface/38"
+]);
+var listItemHeadlineVariants = cva([
+  "text-body-large",
+  "text-on-surface",
+  // Effects transition for color
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected: on-secondary-container
+  "group-data-[selected]/list-item:text-on-secondary-container",
+  // Disabled: 38% color via CSS (opacity-38 on root handles all descendants, but
+  // explicit token ensures predictable rendering when color is specified).
+  "group-data-[disabled]/list-item:text-on-surface/38"
+]);
+var listItemSupportingTextVariants = cva([
+  "text-body-medium",
+  "text-on-surface-variant",
+  // Effects transition for color
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected: on-secondary-container
+  "group-data-[selected]/list-item:text-on-secondary-container",
+  // Disabled: 38% color
+  "group-data-[disabled]/list-item:text-on-surface/38"
+]);
 function interleaveWithDividers(children) {
   const items = Children.toArray(children);
   return items.reduce((acc, child, index) => {
@@ -8038,51 +8607,25 @@ var List = forwardRef(function List2({ className, showDividers = false, children
   return /* @__PURE__ */ jsx(ListHeadless, { ref, className: cn(listVariants(), className), ...props, children: renderedChildren });
 });
 List.displayName = "List";
-var typeClasses = {
-  icon: "size-6 text-on-surface-variant",
-  avatar: "size-10 overflow-hidden rounded-full",
-  checkbox: "",
-  radio: ""
-};
 var ListItemLeading = forwardRef(
   function ListItemLeading2({ type, children, className }, ref) {
     const isControl = type === "checkbox" || type === "radio";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("mr-4 flex shrink-0 items-center", typeClasses[type], className),
-        children: isControl ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", tabIndex: -1, children }) : children
-      }
-    );
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(listItemLeadingVariants({ type }), className), children: isControl ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", tabIndex: -1, children }) : children });
   }
 );
 ListItemLeading.displayName = "ListItemLeading";
-var typeClasses2 = {
-  icon: "size-6 text-on-surface-variant",
-  text: "text-on-surface-variant text-label-small",
-  checkbox: "",
-  radio: ""
-};
 var ListItemTrailing = forwardRef(
   function ListItemTrailing2({ type, children, className }, ref) {
     const isControl = type === "checkbox" || type === "radio";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("ml-auto flex shrink-0 items-center", typeClasses2[type], className),
-        children: isControl ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", tabIndex: -1, children }) : children
-      }
-    );
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(listItemTrailingVariants({ type }), className), children: isControl ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", tabIndex: -1, children }) : children });
   }
 );
 ListItemTrailing.displayName = "ListItemTrailing";
 var ListItemText = forwardRef(function ListItemText2({ headline, supportingText, overline, className }, ref) {
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("min-w-0 flex-1", className), children: [
-    overline && /* @__PURE__ */ jsx("p", { className: "text-on-surface-variant text-label-small", children: overline }),
-    /* @__PURE__ */ jsx("p", { className: "text-on-surface text-body-large", children: headline }),
-    supportingText && /* @__PURE__ */ jsx("p", { className: "text-on-surface-variant text-body-medium", children: supportingText })
+    overline && /* @__PURE__ */ jsx("p", { className: cn(listItemOverlineVariants()), children: overline }),
+    /* @__PURE__ */ jsx("p", { className: cn(listItemHeadlineVariants()), children: headline }),
+    supportingText && /* @__PURE__ */ jsx("p", { className: cn(listItemSupportingTextVariants()), children: supportingText })
   ] });
 });
 ListItemText.displayName = "ListItemText";
@@ -8126,44 +8669,72 @@ var ListItem = forwardRef(function ListItem2({
       }
     );
   }
-  return /* @__PURE__ */ jsxs(
-    "li",
+  return /* @__PURE__ */ jsx(
+    StaticStyledListItem,
     {
       ref: forwardedRef,
-      role: "listitem",
-      className: cn(
-        listItemVariants({
-          density,
-          isSelected: false,
-          isDisabled,
-          isInteractive: false
-        }),
-        className
-      ),
-      children: [
-        leadingSlot && /* @__PURE__ */ jsx(ListItemLeading, { type: leadingType ?? "icon", children: leadingSlot }),
-        /* @__PURE__ */ jsx(
-          ListItemText,
-          {
-            headline,
-            ...supportingText !== void 0 ? { supportingText } : {},
-            ...overline !== void 0 ? { overline } : {}
-          }
-        ),
-        trailingSlot && /* @__PURE__ */ jsx(ListItemTrailing, { type: trailingType ?? "icon", children: trailingSlot }),
-        insetDivider && /* @__PURE__ */ jsx(
-          Divider,
-          {
-            orientation: "horizontal",
-            inset: "start",
-            className: "absolute right-0 bottom-0 left-0"
-          }
-        )
-      ]
+      value,
+      headline,
+      ...supportingText !== void 0 ? { supportingText } : {},
+      ...overline !== void 0 ? { overline } : {},
+      ...leadingSlot !== void 0 ? { leadingSlot } : {},
+      ...leadingType !== void 0 ? { leadingType } : {},
+      ...trailingSlot !== void 0 ? { trailingSlot } : {},
+      ...trailingType !== void 0 ? { trailingType } : {},
+      density,
+      isDisabled,
+      insetDivider,
+      ...className !== void 0 ? { className } : {}
     }
   );
 });
 ListItem.displayName = "ListItem";
+var StaticStyledListItem = forwardRef(
+  function StaticStyledListItem2({
+    headline,
+    supportingText,
+    overline,
+    leadingSlot,
+    leadingType,
+    trailingSlot,
+    trailingType,
+    density,
+    isDisabled,
+    insetDivider,
+    className
+  }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref,
+        role: "listitem",
+        className: cn(listItemVariants({ density }), "group/list-item", className),
+        ...getInteractionDataAttributes({ isDisabled }),
+        children: [
+          leadingSlot && /* @__PURE__ */ jsx(ListItemLeading, { type: leadingType ?? "icon", children: leadingSlot }),
+          /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              headline,
+              ...supportingText !== void 0 ? { supportingText } : {},
+              ...overline !== void 0 ? { overline } : {}
+            }
+          ),
+          trailingSlot && /* @__PURE__ */ jsx(ListItemTrailing, { type: trailingType ?? "icon", children: trailingSlot }),
+          insetDivider && /* @__PURE__ */ jsx(
+            Divider,
+            {
+              orientation: "horizontal",
+              inset: "start",
+              className: "absolute right-0 bottom-0 left-0"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StaticStyledListItem.displayName = "StaticStyledListItem";
 var InteractiveStyledListItem = forwardRef(
   function InteractiveStyledListItem2({
     value,
@@ -8181,36 +8752,36 @@ var InteractiveStyledListItem = forwardRef(
   }, forwardedRef) {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
-    const { optionProps, isSelected, isDisabled } = useOption({ key: value }, state, ref);
-    const { onMouseDown: handleRipple, ripples } = useRipple({
-      disabled: isDisabled
-    });
-    const mergedProps = mergeProps(optionProps, { onMouseDown: handleRipple });
+    const { optionProps, isSelected, isDisabled, isPressed, isFocusVisible } = useOption(
+      { key: value },
+      state,
+      ref
+    );
+    const { isHovered, hoverProps } = useHover({ isDisabled });
+    const { onMouseDown: handleRipple, ripples } = useRipple({ disabled: isDisabled });
+    const mergedProps = mergeProps(optionProps, hoverProps, { onMouseDown: handleRipple });
+    const hasLeading = !!leadingSlot;
+    const hasTrailing = !!trailingSlot;
     return /* @__PURE__ */ jsxs(
       "li",
       {
         ...mergedProps,
         ref,
-        className: cn(
-          listItemVariants({
-            density,
-            isSelected,
-            isDisabled,
-            isInteractive: true
-          }),
-          className
-        ),
-        "data-selected": isSelected || void 0,
-        "data-disabled": isDisabled || void 0,
+        className: cn(listItemVariants({ density }), "group/list-item", className),
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isSelected,
+          isDisabled
+        }),
+        "data-interactive": "",
+        "data-with-leading": hasLeading ? "" : void 0,
+        "data-with-trailing": hasTrailing ? "" : void 0,
         children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "aria-hidden": "true",
-              className: "bg-on-surface duration-short2 ease-standard pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-8 group-active:opacity-12"
-            }
-          ),
           ripples,
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(listItemStateLayerVariants()) }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(listItemFocusRingVariants()) }),
           leadingSlot && /* @__PURE__ */ jsx(ListItemLeading, { type: leadingType ?? "icon", children: leadingSlot }),
           /* @__PURE__ */ jsx(
             ListItemText,