@bug-on/m3-expressive 1.2.6 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bug-on/m3-expressive
 
+## 1.3.0
+
+### Minor Changes
+
+- dbcb09f: Add fading blur mask & API refinements
+
+## 1.2.7
+
+### Patch Changes
+
+- 81a5076: Fix issues Circular Indeterminate do not work.
+
 ## 1.2.6
 
 ### Patch Changes

package/dist/buttons.d.mts

@@ -1,7 +1,7 @@
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-DPJL3bO6.mjs';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-26qlZvKT.mjs';
 import { Transition } from 'motion/react';
-import { b as MD3Size } from './md3-Dty-Qcad.mjs';
-export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CSsDmuQC.mjs';
+import { c as MD3Size } from './md3-D0_Z7IXj.mjs';
+export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-USJo7AqO.mjs';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import 'react';
 import 'react/jsx-runtime';

package/dist/buttons.d.ts

@@ -1,7 +1,7 @@
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable--BhNTEJw.js';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-CXUVrH64.js';
 import { Transition } from 'motion/react';
-import { b as MD3Size } from './md3-Dty-Qcad.js';
-export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CSsDmuQC.js';
+import { c as MD3Size } from './md3-D0_Z7IXj.js';
+export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CqdQBsRe.js';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import 'react';
 import 'react/jsx-runtime';

package/dist/buttons.js

@@ -278,7 +278,7 @@ function generateWavyCircularPath(center, radius, amplitude, wavelength) {
     if (i === 0) d += `M ${xAt(t0).toFixed(2)} ${yAt(t0).toFixed(2)}`;
     d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${xAt(t1).toFixed(2)} ${yAt(t1).toFixed(2)}`;
   }
-  return d;
+  return `${d} Z`;
 }
 function getSinePath(startX, endX, phase, wl, amp) {
   if (startX >= endX) return "";
@@ -310,6 +310,14 @@ function getSinePath(startX, endX, phase, wl, amp) {
   }
   return d;
 }
+var GLOBAL_ROTATION_DURATION = 6e3;
+var GLOBAL_ROTATION_TARGET = 1080;
+var ADDITIONAL_ROTATION_CYCLE = 1500;
+var ADDITIONAL_ROTATION_STEP = 90;
+var ADDITIONAL_ROTATION_EASE_DURATION = 500;
+var DEFAULT_MIN_PROGRESS = 0.1;
+var DEFAULT_MAX_PROGRESS = 0.8;
+var PROGRESS_CYCLE_DURATION = 1500;
 var CircularProgress = React16__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -323,6 +331,10 @@ var CircularProgress = React16__namespace.forwardRef(
       crawlerSpeed = 1,
       color,
       trackColor,
+      showTrack = "auto",
+      minProgress = DEFAULT_MIN_PROGRESS,
+      maxProgress = DEFAULT_MAX_PROGRESS,
+      amplitudeRange,
       className,
       "aria-label": ariaLabel
     } = _b, restProps = __objRest(_b, [
@@ -336,6 +348,10 @@ var CircularProgress = React16__namespace.forwardRef(
       "crawlerSpeed",
       "color",
       "trackColor",
+      "showTrack",
+      "minProgress",
+      "maxProgress",
+      "amplitudeRange",
       "className",
       "aria-label"
     ]);
@@ -346,6 +362,7 @@ var CircularProgress = React16__namespace.forwardRef(
     const activeColor = color || "var(--md-sys-color-indicator-active)";
     const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
     const isWavy = shape === "wavy";
+    const shouldShowIndeterminateTrack = showTrack === "auto" ? isWavy : showTrack;
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
     const effectiveAmplitude = React16__namespace.useMemo(
@@ -356,6 +373,10 @@ var CircularProgress = React16__namespace.forwardRef(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
+    const resolvedAmplitudeRange = React16__namespace.useMemo(
+      () => amplitudeRange != null ? amplitudeRange : [0, effectiveAmplitude],
+      [amplitudeRange, effectiveAmplitude]
+    );
     const wavyActivePath = React16__namespace.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
@@ -375,6 +396,145 @@ var CircularProgress = React16__namespace.forwardRef(
     const trackLength = isDeterminate ? Math.max(1e-3, 1 - activeAngularFraction - 2 * gapForTrack) : 1;
     const ActiveCircleElem = react.m.circle;
     const ActivePathElem = react.m.path;
+    const indeterminateSvgRef = React16__namespace.useRef(null);
+    const indeterminateTrackRef = React16__namespace.useRef(null);
+    const indeterminateActiveRef = React16__namespace.useRef(null);
+    const indeterminateWavyTrackPathRef = React16__namespace.useRef(null);
+    const indeterminateWavyActivePathRef = React16__namespace.useRef(null);
+    const cachedPathLengthRef = React16__namespace.useRef(0);
+    React16__namespace.useLayoutEffect(() => {
+      if (!isWavy || !wavyActivePath) {
+        cachedPathLengthRef.current = circumference;
+        return;
+      }
+      const el = indeterminateActiveRef.current;
+      if (el && "getTotalLength" in el) {
+        try {
+          const len = el.getTotalLength();
+          if (len > 0) {
+            cachedPathLengthRef.current = len;
+            return;
+          }
+        } catch (e) {
+        }
+      }
+      cachedPathLengthRef.current = circumference;
+    }, [isWavy, circumference, wavyActivePath]);
+    react.useAnimationFrame((time) => {
+      if (isDeterminate) return;
+      const safeCrawlerSpeed = Math.max(0.1, crawlerSpeed);
+      const scaledTime = time * safeCrawlerSpeed;
+      const globalCycle = scaledTime % GLOBAL_ROTATION_DURATION;
+      const globalAngle = globalCycle / GLOBAL_ROTATION_DURATION * GLOBAL_ROTATION_TARGET;
+      const additionalFullCycles = Math.floor(
+        scaledTime / ADDITIONAL_ROTATION_CYCLE
+      );
+      const additionalCycleTime = scaledTime % ADDITIONAL_ROTATION_CYCLE;
+      const additionalEaseT = Math.min(
+        1,
+        additionalCycleTime / ADDITIONAL_ROTATION_EASE_DURATION
+      );
+      const additionalAngle = (additionalFullCycles + easeInOutCubic(additionalEaseT)) * ADDITIONAL_ROTATION_STEP;
+      const totalRotation = globalAngle + additionalAngle;
+      if (indeterminateSvgRef.current) {
+        indeterminateSvgRef.current.style.transform = `rotate(${totalRotation - 90}deg)`;
+      }
+      const progressFullCycle = PROGRESS_CYCLE_DURATION * 2;
+      const progressCycleTime = scaledTime % progressFullCycle;
+      let progress;
+      if (progressCycleTime < PROGRESS_CYCLE_DURATION) {
+        const t = progressCycleTime / PROGRESS_CYCLE_DURATION;
+        progress = minProgress + (maxProgress - minProgress) * easeInOutCubic(t);
+      } else {
+        const t = (progressCycleTime - PROGRESS_CYCLE_DURATION) / PROGRESS_CYCLE_DURATION;
+        progress = maxProgress - (maxProgress - minProgress) * easeInOutCubic(t);
+      }
+      if (isWavy) {
+        const amplitudeT = (progress - minProgress) / (maxProgress - minProgress);
+        const currentAmplitude = resolvedAmplitudeRange[0] + (resolvedAmplitudeRange[1] - resolvedAmplitudeRange[0]) * amplitudeT;
+        const dynamicPath = generateWavyCircularPath(
+          center,
+          radius,
+          currentAmplitude,
+          effectiveWavelength
+        );
+        if (indeterminateWavyActivePathRef.current) {
+          indeterminateWavyActivePathRef.current.setAttribute("d", dynamicPath);
+        }
+        if (indeterminateWavyTrackPathRef.current) {
+          indeterminateWavyTrackPathRef.current.setAttribute("d", dynamicPath);
+        }
+        const pathEl = indeterminateWavyActivePathRef.current;
+        let totalLen = cachedPathLengthRef.current || circumference;
+        if (pathEl) {
+          try {
+            const len = pathEl.getTotalLength();
+            if (len > 0) totalLen = len;
+          } catch (e) {
+          }
+        }
+        const gapFrac = (gapSize + trackHeight) / totalLen;
+        const activeLen = totalLen * progress;
+        const activeOff = 0;
+        if (indeterminateWavyActivePathRef.current) {
+          indeterminateWavyActivePathRef.current.setAttribute(
+            "stroke-dasharray",
+            `${activeLen} ${totalLen}`
+          );
+          indeterminateWavyActivePathRef.current.setAttribute(
+            "stroke-dashoffset",
+            `${activeOff}`
+          );
+        }
+        if (shouldShowIndeterminateTrack && indeterminateWavyTrackPathRef.current) {
+          const trackStartFrac = progress + gapFrac;
+          const trackLen = Math.max(
+            1e-3,
+            totalLen * (1 - progress - 2 * gapFrac)
+          );
+          const trackOff = -totalLen * trackStartFrac;
+          indeterminateWavyTrackPathRef.current.setAttribute(
+            "stroke-dasharray",
+            `${trackLen} ${totalLen}`
+          );
+          indeterminateWavyTrackPathRef.current.setAttribute(
+            "stroke-dashoffset",
+            `${trackOff}`
+          );
+        }
+      } else {
+        const totalLen = circumference;
+        const activeLen = totalLen * progress;
+        const activeOff = 0;
+        if (indeterminateActiveRef.current) {
+          indeterminateActiveRef.current.setAttribute(
+            "stroke-dasharray",
+            `${activeLen} ${totalLen}`
+          );
+          indeterminateActiveRef.current.setAttribute(
+            "stroke-dashoffset",
+            `${activeOff}`
+          );
+        }
+        if (shouldShowIndeterminateTrack && indeterminateTrackRef.current) {
+          const gapFrac = (gapSize + trackHeight) / totalLen;
+          const trackStartFrac = progress + gapFrac;
+          const trackLen = Math.max(
+            1e-3,
+            totalLen * (1 - progress - 2 * gapFrac)
+          );
+          const trackOff = -totalLen * trackStartFrac;
+          indeterminateTrackRef.current.setAttribute(
+            "stroke-dasharray",
+            `${trackLen} ${totalLen}`
+          );
+          indeterminateTrackRef.current.setAttribute(
+            "stroke-dashoffset",
+            `${trackOff}`
+          );
+        }
+      }
+    });
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -451,9 +611,10 @@ var CircularProgress = React16__namespace.forwardRef(
               ]
             }
           ),
-          !isDeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
-            react.m.svg,
+          !isDeterminate && /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
             {
+              ref: indeterminateSvgRef,
               width: size,
               height: size,
               viewBox: `0 0 ${size} ${size}`,
@@ -462,84 +623,60 @@ var CircularProgress = React16__namespace.forwardRef(
                 position: "absolute",
                 inset: 0,
                 overflow: "visible",
-                transformOrigin: "center"
+                transformOrigin: "center",
+                transform: "rotate(-90deg)"
               },
-              animate: { rotate: [0, 360] },
-              transition: {
-                duration: 2 / Math.max(0.1, crawlerSpeed),
-                repeat: Number.POSITIVE_INFINITY,
-                ease: "linear"
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  react.m.circle,
+              children: isWavy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                shouldShowIndeterminateTrack && /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
                   {
-                    cx: center,
-                    cy: center,
-                    r: radius,
+                    ref: indeterminateWavyTrackPathRef,
+                    d: wavyActivePath != null ? wavyActivePath : "",
                     fill: "none",
                     stroke: bgTrackColor,
                     strokeWidth: trackHeight,
-                    strokeLinecap: "round",
-                    animate: {
-                      pathLength: [
-                        Math.max(1e-3, 0.9 - 2 * gapForTrack),
-                        Math.max(1e-3, 0.25 - 2 * gapForTrack),
-                        Math.max(1e-3, 0.9 - 2 * gapForTrack)
-                      ],
-                      pathOffset: [
-                        0.1 + gapForTrack,
-                        0.75 + gapForTrack,
-                        0.1 + gapForTrack
-                      ]
-                    },
-                    transition: {
-                      duration: 2 / Math.max(0.1, crawlerSpeed),
-                      repeat: Number.POSITIVE_INFINITY,
-                      ease: [0.4, 0, 0.2, 1]
-                    }
+                    strokeLinecap: "round"
                   }
                 ),
-                isWavy ? /* @__PURE__ */ jsxRuntime.jsx(
-                  ActivePathElem,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
                   {
+                    ref: indeterminateWavyActivePathRef,
                     d: wavyActivePath != null ? wavyActivePath : "",
                     fill: "none",
                     stroke: activeColor,
                     strokeWidth: trackHeight,
-                    strokeLinecap: "round",
-                    animate: {
-                      pathLength: [0.1, 0.75, 0.1],
-                      pathOffset: [0, 0.65, 1]
-                    },
-                    transition: {
-                      duration: 2 / Math.max(0.1, crawlerSpeed),
-                      repeat: Number.POSITIVE_INFINITY,
-                      ease: [0.4, 0, 0.2, 1]
-                    }
+                    strokeLinecap: "round"
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
-                  ActiveCircleElem,
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                shouldShowIndeterminateTrack && /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
                   {
+                    ref: indeterminateTrackRef,
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    fill: "none",
+                    stroke: bgTrackColor,
+                    strokeWidth: trackHeight,
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    ref: indeterminateActiveRef,
                     cx: center,
                     cy: center,
                     r: radius,
                     fill: "none",
                     stroke: activeColor,
                     strokeWidth: trackHeight,
-                    strokeLinecap: "round",
-                    animate: {
-                      pathLength: [0.1, 0.75, 0.1],
-                      pathOffset: [0, 0.65, 1]
-                    },
-                    transition: {
-                      duration: 2 / Math.max(0.1, crawlerSpeed),
-                      repeat: Number.POSITIVE_INFINITY,
-                      ease: [0.4, 0, 0.2, 1]
-                    }
+                    strokeLinecap: "round"
                   }
                 )
-              ]
+              ] })
             }
           )
         ] })
@@ -745,7 +882,7 @@ var WavyLinearTrack = React16__namespace.memo(function WavyLinearTrack2({
           currentAmp
         );
       } else if (fraction === 0) {
-        activePathD = `M ${capWidth} 0 L ${capWidth + 0.01} 0`;
+        activePathD = "";
       }
       const trackStart = adjHead + totalGap;
       if (trackStart < width - capWidth) {
@@ -777,20 +914,20 @@ var WavyLinearTrack = React16__namespace.memo(function WavyLinearTrack2({
         activeLines.push({ tail: l1T, head: l1H });
         activeLines.push({ tail: l2T, head: l2H });
       }
-      const segments = activeLines.map((line) => {
-        const barTail = line.tail * width;
-        const barHead = line.head * width;
+      const activeSegments = activeLines.map((line) => {
+        const rawTail = line.tail * width;
+        const rawHead = line.head * width;
         const adjTail = Math.max(
           capWidth,
-          Math.min(width - capWidth, barTail)
+          Math.min(width - capWidth, rawTail)
         );
         const adjHead = Math.max(
           capWidth,
-          Math.min(width - capWidth, barHead)
+          Math.min(width - capWidth, rawHead)
         );
         return { adjTail, adjHead };
       }).filter((seg) => seg.adjHead - seg.adjTail > 0.1);
-      activePathD = segments.map(
+      activePathD = activeSegments.map(
         (seg) => getSinePath(
           seg.adjTail,
           seg.adjHead,
@@ -799,13 +936,24 @@ var WavyLinearTrack = React16__namespace.memo(function WavyLinearTrack2({
           currentAmp
         )
       ).join(" ");
+      const validActiveLines = activeLines.filter(
+        (line) => line.head > line.tail && line.head * width > 0 && line.tail * width < width
+      ).sort((a, b) => a.tail - b.tail);
       let currentTrackX = capWidth;
-      for (const seg of segments) {
-        const trackEnd = seg.adjTail - totalGap;
+      for (const line of validActiveLines) {
+        const blockStart = line.tail * width - totalGap;
+        const blockEnd = line.head * width + totalGap;
+        const trackEnd = Math.min(width - capWidth, blockStart);
         if (trackEnd > currentTrackX) {
-          trackD += `${getSinePath(currentTrackX, trackEnd, phase, activeWavelength, trackAmp)} `;
+          trackD += `${getSinePath(
+            currentTrackX,
+            trackEnd,
+            phase,
+            activeWavelength,
+            trackAmp
+          )} `;
         }
-        currentTrackX = Math.max(currentTrackX, seg.adjHead + totalGap);
+        currentTrackX = Math.max(currentTrackX, blockEnd);
       }
       if (currentTrackX < width - capWidth) {
         trackD += getSinePath(
@@ -818,9 +966,9 @@ var WavyLinearTrack = React16__namespace.memo(function WavyLinearTrack2({
       }
     }
     if (activePathRef.current)
-      activePathRef.current.setAttribute("d", activePathD);
+      activePathRef.current.setAttribute("d", activePathD || "");
     if (trackPathRef.current)
-      trackPathRef.current.setAttribute("d", trackD.trim());
+      trackPathRef.current.setAttribute("d", trackD.trim() || "");
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2942,9 +3090,9 @@ var TOGGLE_FAB_COLORS = {
   }
 };
 var TOGGLE_FAB_SIZES = {
-  baseline: { sizeClass: "h-14 w-14", initialRadius: 16, finalRadius: 28 },
-  medium: { sizeClass: "h-20 w-20", initialRadius: 20, finalRadius: 40 },
-  large: { sizeClass: "h-24 w-24", initialRadius: 28, finalRadius: 48 }
+  sm: { sizeClass: "h-14 w-14", initialRadius: 16, finalRadius: 28 },
+  md: { sizeClass: "h-20 w-20", initialRadius: 20, finalRadius: 40 },
+  lg: { sizeClass: "h-24 w-24", initialRadius: 28, finalRadius: 48 }
 };
 var MENU_ITEM_STYLES = {
   padding: "ps-4 pe-6",
@@ -3031,7 +3179,7 @@ var ToggleFABComponent = React16__namespace.forwardRef(
     onToggle,
     icon,
     colorVariant = "primary",
-    fabSize = "baseline",
+    size = "sm",
     className,
     id,
     "aria-label": ariaLabel,
@@ -3040,7 +3188,7 @@ var ToggleFABComponent = React16__namespace.forwardRef(
     var _a, _b;
     const prefersReduced = react.useReducedMotion();
     const colors = (_a = TOGGLE_FAB_COLORS[colorVariant]) != null ? _a : TOGGLE_FAB_COLORS.primary;
-    const sizeTokens = (_b = TOGGLE_FAB_SIZES[fabSize]) != null ? _b : TOGGLE_FAB_SIZES.baseline;
+    const sizeTokens = (_b = TOGGLE_FAB_SIZES[size]) != null ? _b : TOGGLE_FAB_SIZES.sm;
     const springConfig = prefersReduced ? SPRING_REDUCED : SPRING_NORMAL;
     const checkedProgress = react.useSpring(expanded ? 1 : 0, springConfig);
     React16__namespace.useEffect(() => {
@@ -3210,7 +3358,7 @@ function FABMenu({
   onToggle,
   items,
   colorVariant = "primary",
-  fabSize = "baseline",
+  size = "sm",
   alignment = "end",
   className,
   closeOnBackdropClick = true,
@@ -3361,7 +3509,7 @@ function FABMenu({
               expanded,
               onToggle,
               colorVariant,
-              fabSize,
+              size,
               "aria-label": ariaLabel != null ? ariaLabel : expanded ? "Close actions menu" : "Open actions menu",
               "aria-controls": menuId,
               icon: defaultFabIcon
@@ -3505,7 +3653,7 @@ var IconButtonComponent = React16__namespace.forwardRef(
       variant = "default",
       colorStyle = "standard",
       size = "sm",
-      widthVariant = "default",
+      width = "default",
       shape = "round",
       selected,
       selectedIcon,
@@ -3523,7 +3671,7 @@ var IconButtonComponent = React16__namespace.forwardRef(
       "variant",
       "colorStyle",
       "size",
-      "widthVariant",
+      "width",
       "shape",
       "selected",
       "selectedIcon",
@@ -3568,7 +3716,7 @@ var IconButtonComponent = React16__namespace.forwardRef(
     const iconPx = iconSize != null ? iconSize : defaultIconPx;
     const isCustomSize = iconSize != null && iconSize !== "inherit";
     const heightClass = (_c = SIZE_HEIGHT_STYLES[size]) != null ? _c : SIZE_HEIGHT_STYLES.sm;
-    const widthClass = (_e = ((_d = WIDTH_SIZE_STYLES[size]) != null ? _d : WIDTH_SIZE_STYLES.sm)[widthVariant]) != null ? _e : WIDTH_SIZE_STYLES.sm.default;
+    const widthClass = (_e = ((_d = WIDTH_SIZE_STYLES[size]) != null ? _d : WIDTH_SIZE_STYLES.sm)[width]) != null ? _e : WIDTH_SIZE_STYLES.sm.default;
     const needsTouchTarget = size === "xs" || size === "sm";
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading