@bug-on/m3-expressive 1.2.6 → 1.3.0

package/dist/navigation.mjs

@@ -1,11 +1,11 @@
 "use client";
-import * as React37 from 'react';
-import { useRef, useEffect, useState } from 'react';
+import { AnimatePresence, m, LazyMotion, domMax, useAnimationFrame, useMotionValue, animate, useReducedMotion, LayoutGroup, useScroll, useMotionValueEvent, useTransform } from 'motion/react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React37 from 'react';
+import { useRef, useEffect, useState } from 'react';
 import * as RxContextMenu from '@radix-ui/react-context-menu';
-import { AnimatePresence, m, LazyMotion, domMax, useMotionValue, animate, useAnimationFrame, useReducedMotion, LayoutGroup, useScroll, useMotionValueEvent, useTransform } from 'motion/react';
 import { cornerRadius } from '@bug-on/m3-tokens';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Slot } from '@radix-ui/react-slot';
@@ -43,6 +43,55 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function getMaskGradient(direction) {
+  switch (direction) {
+    case "bottom":
+      return "linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0) 100%)";
+    case "both":
+      return "linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.7) 80%, rgba(0, 0, 0, 0) 100%)";
+    default:
+      return "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0) 100%)";
+  }
+}
+function FadingBlurMask({
+  direction = "top",
+  blurIntensity = 12,
+  blurHeight = "100%",
+  color = "var(--md-sys-color-surface)",
+  className,
+  style,
+  children
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  const activeBlur = shouldReduceMotion ? 0 : blurIntensity;
+  const maskGradient = getMaskGradient(direction);
+  const maskStyle = __spreadValues({
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    height: typeof blurHeight === "number" ? `${blurHeight}px` : blurHeight,
+    backdropFilter: activeBlur > 0 ? `blur(${activeBlur}px)` : void 0,
+    WebkitBackdropFilter: activeBlur > 0 ? `blur(${activeBlur}px)` : void 0,
+    maskImage: maskGradient,
+    WebkitMaskImage: maskGradient,
+    backgroundColor: color
+  }, style);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "absolute inset-0 pointer-events-none z-0 rounded-[inherit]",
+        className
+      ),
+      style: maskStyle,
+      children
+    }
+  );
+}
 
 // src/ui/shared/motion-tokens.ts
 var FAST_SPATIAL_SPRING = {
@@ -197,9 +246,6 @@ var APP_BAR_TITLE_FADE = {
   duration: 0.15,
   ease: "easeInOut"
 };
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function AppBarItemButton({ item }) {
   const isDisabled = item.enabled === false;
   if (item.type === "custom" && item.appBarContent) {
@@ -1726,7 +1772,10 @@ function BottomAppBar({
   floatingActionButton,
   scrollBehavior = "visible",
   scrollElement,
-  className
+  className,
+  enableFadingBlur,
+  blurIntensity,
+  blurHeight
 }) {
   const shouldReduceMotion = useReducedMotion();
   const { isHidden } = useAppBarScroll({
@@ -1741,9 +1790,9 @@ function BottomAppBar({
       role: "navigation",
       "aria-label": "Bottom app bar",
       className: cn(
-        "fixed bottom-0 inset-x-0 z-50",
+        "fixed bottom-0 inset-x-0 z-50 overflow-hidden rounded-[inherit]",
         "flex items-center",
-        "bg-m3-surface-container",
+        !enableFadingBlur && "bg-m3-surface-container",
         "px-2",
         // minimal horizontal padding, icon buttons provide spacing
         "elevation-2",
@@ -1756,8 +1805,19 @@ function BottomAppBar({
       animate: { y: translateY },
       transition: hideTransition,
       children: [
-        actions && /* @__PURE__ */ jsx("div", { className: "flex items-center flex-1", children: actions }),
-        floatingActionButton && /* @__PURE__ */ jsx("div", { className: "shrink-0 ml-auto mr-2", children: floatingActionButton })
+        enableFadingBlur && /* @__PURE__ */ jsx(
+          FadingBlurMask,
+          {
+            direction: "bottom",
+            blurIntensity,
+            blurHeight,
+            color: "var(--md-sys-color-surface-container)"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex items-center w-full h-full", children: [
+          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center flex-1", children: actions }),
+          floatingActionButton && /* @__PURE__ */ jsx("div", { className: "shrink-0 ml-auto mr-2", children: floatingActionButton })
+        ] })
       ]
     }
   );
@@ -1865,7 +1925,10 @@ function LargeFlexibleAppBar({
   headerContent,
   collapsedHeight = AppBarTokens.heights.flexibleCollapsed,
   expandedHeight,
-  className
+  className,
+  enableFadingBlur,
+  blurIntensity,
+  blurHeight
 }) {
   var _a, _b, _c;
   const resolvedExpandedHeight = expandedHeight != null ? expandedHeight : subtitle ? AppBarTokens.heights.largeFlexWithSubtitleExpanded : AppBarTokens.heights.largeFlexExpanded;
@@ -1895,15 +1958,28 @@ function LargeFlexibleAppBar({
     {
       role: "banner",
       className: cn(
-        "fixed top-0 inset-x-0 z-50 flex flex-col overflow-hidden",
+        "fixed top-0 inset-x-0 z-50 flex flex-col overflow-hidden rounded-[inherit]",
         className
       ),
-      style: { height, backgroundColor: currentBg, transition: cssTransition },
+      style: {
+        height,
+        backgroundColor: enableFadingBlur ? "transparent" : currentBg,
+        transition: cssTransition
+      },
       children: [
+        enableFadingBlur && /* @__PURE__ */ jsx(
+          FadingBlurMask,
+          {
+            direction: "top",
+            blurIntensity,
+            blurHeight,
+            color: currentBg
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex items-center px-1 shrink-0",
+            className: "relative z-10 flex items-center px-1 shrink-0",
             style: { height: collapsedHeight },
             children: [
               navigationIcon && /* @__PURE__ */ jsx(
@@ -1945,7 +2021,7 @@ function LargeFlexibleAppBar({
           "div",
           {
             className: cn(
-              "flex flex-col flex-1 px-4 pb-4 justify-end",
+              "relative z-10 flex flex-col flex-1 px-4 pb-3 justify-end",
               isCentered ? "items-center" : "items-start"
             ),
             children: [
@@ -1998,7 +2074,10 @@ function MediumFlexibleAppBar({
   headerContent,
   collapsedHeight = AppBarTokens.heights.flexibleCollapsed,
   expandedHeight,
-  className
+  className,
+  enableFadingBlur,
+  blurIntensity,
+  blurHeight
 }) {
   var _a, _b, _c;
   const resolvedExpandedHeight = expandedHeight != null ? expandedHeight : subtitle ? AppBarTokens.heights.mediumFlexWithSubtitleExpanded : AppBarTokens.heights.mediumFlexExpanded;
@@ -2028,15 +2107,28 @@ function MediumFlexibleAppBar({
     {
       role: "banner",
       className: cn(
-        "fixed top-0 inset-x-0 z-50 flex flex-col overflow-hidden",
+        "fixed top-0 inset-x-0 z-50 flex flex-col overflow-hidden rounded-[inherit]",
         className
       ),
-      style: { height, backgroundColor: currentBg, transition: cssTransition },
+      style: {
+        height,
+        backgroundColor: enableFadingBlur ? "transparent" : currentBg,
+        transition: cssTransition
+      },
       children: [
+        enableFadingBlur && /* @__PURE__ */ jsx(
+          FadingBlurMask,
+          {
+            direction: "top",
+            blurIntensity,
+            blurHeight,
+            color: currentBg
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex items-center px-1 shrink-0",
+            className: "relative z-10 flex items-center px-1 shrink-0",
             style: { height: collapsedHeight },
             children: [
               navigationIcon && /* @__PURE__ */ jsx(
@@ -2078,7 +2170,7 @@ function MediumFlexibleAppBar({
           "div",
           {
             className: cn(
-              "flex flex-col flex-1 px-4 pb-3 justify-end",
+              "relative z-10 flex flex-col flex-1 px-4 pb-3 justify-end",
               isCentered ? "items-center" : "items-start"
             ),
             children: [
@@ -2125,7 +2217,7 @@ function SearchIcon({ className }) {
     "span",
     {
       className: cn(
-        "material-symbols-rounded text-[20px] leading-none select-none",
+        "material-symbols-rounded text-[20px] leading-none select-none flex items-center justify-center",
         className
       ),
       "aria-hidden": "true",
@@ -2145,7 +2237,12 @@ function SearchAppBar({
   scrollBehavior = "pinned",
   scrollElement,
   searchBarId = "search-bar",
-  className
+  searchBarVariant = "filled",
+  searchBarHeight = 56,
+  className,
+  enableFadingBlur,
+  blurIntensity,
+  blurHeight
 }) {
   var _a, _b;
   const shouldReduceMotion = useReducedMotion();
@@ -2168,65 +2265,92 @@ function SearchAppBar({
       handleSearchClick();
     }
   };
+  const searchBarBg = isScrolled ? "var(--md-sys-color-surface-container-highest)" : APP_BAR_COLORS.searchBarBg;
+  const isOutlined = searchBarVariant === "outlined";
   return /* @__PURE__ */ jsxs(
     m.header,
     {
       role: "banner",
       className: cn(
-        "fixed top-0 inset-x-0 z-50 flex items-center gap-2 px-4",
+        "fixed top-0 inset-x-0 z-50 flex items-center gap-2 px-4 overflow-hidden rounded-[inherit]",
         className
       ),
       style: {
         height: AppBarTokens.heights.small,
-        backgroundColor: currentBg,
+        backgroundColor: enableFadingBlur ? "transparent" : currentBg,
         transition: cssTransition
       },
       children: [
-        navigationIcon && /* @__PURE__ */ jsx(
-          "div",
+        enableFadingBlur && /* @__PURE__ */ jsx(
+          FadingBlurMask,
           {
-            className: "shrink-0 flex items-center justify-center",
-            style: {
-              width: AppBarTokens.iconButtonTouchTarget,
-              height: AppBarTokens.iconButtonTouchTarget
-            },
-            children: navigationIcon
+            direction: "top",
+            blurIntensity,
+            blurHeight,
+            color: currentBg
           }
         ),
-        /* @__PURE__ */ jsxs(
-          m.div,
-          {
-            layoutId: shouldReduceMotion ? void 0 : searchBarId,
-            role: "search",
-            "aria-label": searchPlaceholder,
-            "aria-expanded": isSearchOpen,
-            tabIndex: 0,
-            className: "relative flex flex-1 items-center gap-2 rounded-full cursor-text h-10 px-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-            onClick: handleSearchClick,
-            onKeyDown: handleKeyDown,
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-m3-surface-container-high -z-10" }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "shrink-0",
-                  style: { color: APP_BAR_COLORS.searchBarContent },
-                  children: leadingSearchIcon != null ? leadingSearchIcon : /* @__PURE__ */ jsx(SearchIcon, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "flex-1 text-[16px] leading-6 truncate select-none",
-                  style: { color: APP_BAR_COLORS.searchBarContent },
-                  children: searchValue != null ? searchValue : searchPlaceholder
-                }
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex items-center gap-2 w-full h-full", children: [
+          navigationIcon && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "shrink-0 flex items-center justify-center",
+              style: {
+                width: AppBarTokens.iconButtonTouchTarget,
+                height: AppBarTokens.iconButtonTouchTarget
+              },
+              children: navigationIcon
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            m.div,
+            {
+              layoutId: shouldReduceMotion ? void 0 : searchBarId,
+              role: "search",
+              "aria-label": searchPlaceholder,
+              "aria-expanded": isSearchOpen,
+              tabIndex: 0,
+              className: cn(
+                "relative flex flex-1 items-center gap-2 rounded-full cursor-text px-4",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                isOutlined && "border border-(--md-sys-color-outline)"
               ),
-              trailingSearchActions && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: trailingSearchActions })
-            ]
-          }
-        ),
-        externalActions && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: externalActions })
+              style: { height: searchBarHeight },
+              onClick: handleSearchClick,
+              onKeyDown: handleKeyDown,
+              children: [
+                !isOutlined && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute inset-0 rounded-full -z-10 transition-colors",
+                    style: {
+                      backgroundColor: searchBarBg,
+                      transition: cssTransition
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "shrink-0 flex items-center justify-center h-full",
+                    style: { color: APP_BAR_COLORS.searchBarContent },
+                    children: leadingSearchIcon != null ? leadingSearchIcon : /* @__PURE__ */ jsx(SearchIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "flex-1 text-[16px] leading-6 truncate select-none",
+                    style: { color: APP_BAR_COLORS.searchBarContent },
+                    children: searchValue != null ? searchValue : searchPlaceholder
+                  }
+                ),
+                trailingSearchActions && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: trailingSearchActions })
+              ]
+            }
+          ),
+          externalActions && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: externalActions })
+        ] })
       ]
     }
   );
@@ -2399,9 +2523,11 @@ function SmallAppBarInner({
   navigationIcon,
   actions,
   colors,
-  className,
   currentBg,
-  cssTransition
+  cssTransition,
+  enableFadingBlur,
+  blurIntensity,
+  blurHeight
 }) {
   var _a, _b;
   const isCentered = titleAlignment === "center";
@@ -2409,57 +2535,81 @@ function SmallAppBarInner({
     m.header,
     {
       role: "banner",
-      className: cn("flex items-center px-1 h-full w-full", className),
-      style: { backgroundColor: currentBg, transition: cssTransition },
+      className: "relative flex items-center px-1 h-full w-full overflow-hidden rounded-[inherit]",
+      style: {
+        backgroundColor: enableFadingBlur ? "transparent" : currentBg,
+        transition: cssTransition
+      },
       children: [
-        navigationIcon && /* @__PURE__ */ jsx(
-          "div",
+        enableFadingBlur && /* @__PURE__ */ jsx(
+          FadingBlurMask,
           {
-            className: "shrink-0 flex items-center justify-center",
-            style: {
-              width: AppBarTokens.iconButtonTouchTarget,
-              height: AppBarTokens.iconButtonTouchTarget
-            },
-            children: navigationIcon
+            direction: "top",
+            blurIntensity,
+            blurHeight,
+            color: currentBg
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex-1 flex flex-col justify-center min-w-0",
-              isCentered ? "items-center" : "items-start",
-              !navigationIcon && "pl-4"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    appBarTypography.titleLarge,
-                    "truncate w-full",
-                    isCentered && "text-center"
-                  ),
-                  style: { color: (_a = colors == null ? void 0 : colors.titleColor) != null ? _a : APP_BAR_COLORS.title },
-                  children: title
-                }
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex items-center w-full h-full", children: [
+          navigationIcon && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "shrink-0 flex items-center justify-center",
+              style: {
+                width: AppBarTokens.iconButtonTouchTarget,
+                height: AppBarTokens.iconButtonTouchTarget
+              },
+              children: navigationIcon
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex-1 flex flex-col justify-center min-w-0",
+                isCentered ? "items-center" : "items-start",
+                !navigationIcon && !isCentered && "pl-4"
               ),
-              subtitle && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    appBarTypography.labelMedium,
-                    "truncate w-full",
-                    isCentered && "text-center"
-                  ),
-                  style: { color: (_b = colors == null ? void 0 : colors.subtitleColor) != null ? _b : APP_BAR_COLORS.subtitle },
-                  children: subtitle
-                }
-              )
-            ]
-          }
-        ),
-        actions && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: actions })
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      appBarTypography.titleLarge,
+                      "truncate w-full",
+                      isCentered && "text-center"
+                    ),
+                    style: { color: (_a = colors == null ? void 0 : colors.titleColor) != null ? _a : APP_BAR_COLORS.title },
+                    children: title
+                  }
+                ),
+                subtitle && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      appBarTypography.labelMedium,
+                      "truncate w-full",
+                      isCentered && "text-center"
+                    ),
+                    style: {
+                      color: (_b = colors == null ? void 0 : colors.subtitleColor) != null ? _b : APP_BAR_COLORS.subtitle
+                    },
+                    children: subtitle
+                  }
+                )
+              ]
+            }
+          ),
+          isCentered && !actions && navigationIcon && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: { width: AppBarTokens.iconButtonTouchTarget },
+              className: "shrink-0"
+            }
+          ),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: actions })
+        ] })
       ]
     }
   );
@@ -2473,7 +2623,10 @@ function SmallAppBar({
   colors,
   scrollBehavior = "pinned",
   scrollElement,
-  className
+  className,
+  enableFadingBlur,
+  blurIntensity,
+  blurHeight
 }) {
   var _a, _b;
   const shouldReduceMotion = useReducedMotion();
@@ -2493,14 +2646,17 @@ function SmallAppBar({
     actions,
     colors,
     currentBg,
-    cssTransition
+    cssTransition,
+    enableFadingBlur,
+    blurIntensity,
+    blurHeight
   };
   const barHeight = AppBarTokens.heights.small;
   if (scrollBehavior !== "enterAlways") {
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn("fixed top-0 inset-x-0 z-50", className),
+        className: cn("fixed top-0 inset-x-0 z-50 overflow-hidden", className),
         style: { height: barHeight },
         children: /* @__PURE__ */ jsx(SmallAppBarInner, __spreadValues({}, innerProps))
       }
@@ -2513,7 +2669,10 @@ function SmallAppBar({
       animate: { y: 0 },
       exit: { y: "-100%" },
       transition: shouldReduceMotion ? { duration: 0 } : APP_BAR_ENTER_ALWAYS_SPRING,
-      className: cn("fixed top-0 inset-x-0 z-50", className),
+      className: cn(
+        "fixed top-0 inset-x-0 z-50 overflow-hidden",
+        className
+      ),
       style: { height: barHeight },
       children: /* @__PURE__ */ jsx(SmallAppBarInner, __spreadValues({}, innerProps))
     },
@@ -6315,7 +6474,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 "";
@@ -6347,6 +6506,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 = React37.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -6360,6 +6527,10 @@ var CircularProgress = React37.forwardRef(
       crawlerSpeed = 1,
       color,
       trackColor,
+      showTrack = "auto",
+      minProgress = DEFAULT_MIN_PROGRESS,
+      maxProgress = DEFAULT_MAX_PROGRESS,
+      amplitudeRange,
       className,
       "aria-label": ariaLabel
     } = _b, restProps = __objRest(_b, [
@@ -6373,6 +6544,10 @@ var CircularProgress = React37.forwardRef(
       "crawlerSpeed",
       "color",
       "trackColor",
+      "showTrack",
+      "minProgress",
+      "maxProgress",
+      "amplitudeRange",
       "className",
       "aria-label"
     ]);
@@ -6383,6 +6558,7 @@ var CircularProgress = React37.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 = React37.useMemo(
@@ -6393,6 +6569,10 @@ var CircularProgress = React37.forwardRef(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
+    const resolvedAmplitudeRange = React37.useMemo(
+      () => amplitudeRange != null ? amplitudeRange : [0, effectiveAmplitude],
+      [amplitudeRange, effectiveAmplitude]
+    );
     const wavyActivePath = React37.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
@@ -6412,6 +6592,145 @@ var CircularProgress = React37.forwardRef(
     const trackLength = isDeterminate ? Math.max(1e-3, 1 - activeAngularFraction - 2 * gapForTrack) : 1;
     const ActiveCircleElem = m.circle;
     const ActivePathElem = m.path;
+    const indeterminateSvgRef = React37.useRef(null);
+    const indeterminateTrackRef = React37.useRef(null);
+    const indeterminateActiveRef = React37.useRef(null);
+    const indeterminateWavyTrackPathRef = React37.useRef(null);
+    const indeterminateWavyActivePathRef = React37.useRef(null);
+    const cachedPathLengthRef = React37.useRef(0);
+    React37.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]);
+    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__ */ jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -6488,9 +6807,10 @@ var CircularProgress = React37.forwardRef(
               ]
             }
           ),
-          !isDeterminate && /* @__PURE__ */ jsxs(
-            m.svg,
+          !isDeterminate && /* @__PURE__ */ jsx(
+            "svg",
             {
+              ref: indeterminateSvgRef,
               width: size,
               height: size,
               viewBox: `0 0 ${size} ${size}`,
@@ -6499,84 +6819,60 @@ var CircularProgress = React37.forwardRef(
                 position: "absolute",
                 inset: 0,
                 overflow: "visible",
-                transformOrigin: "center"
-              },
-              animate: { rotate: [0, 360] },
-              transition: {
-                duration: 2 / Math.max(0.1, crawlerSpeed),
-                repeat: Number.POSITIVE_INFINITY,
-                ease: "linear"
+                transformOrigin: "center",
+                transform: "rotate(-90deg)"
               },
-              children: [
-                /* @__PURE__ */ jsx(
-                  m.circle,
+              children: isWavy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                shouldShowIndeterminateTrack && /* @__PURE__ */ 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__ */ jsx(
-                  ActivePathElem,
+                /* @__PURE__ */ 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__ */ jsx(
-                  ActiveCircleElem,
+                )
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                shouldShowIndeterminateTrack && /* @__PURE__ */ jsx(
+                  "circle",
                   {
+                    ref: indeterminateTrackRef,
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    fill: "none",
+                    stroke: bgTrackColor,
+                    strokeWidth: trackHeight,
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ 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"
                   }
                 )
-              ]
+              ] })
             }
           )
         ] })
@@ -6782,7 +7078,7 @@ var WavyLinearTrack = React37.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) {
@@ -6814,20 +7110,20 @@ var WavyLinearTrack = React37.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,
@@ -6836,13 +7132,24 @@ var WavyLinearTrack = React37.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(
@@ -6855,9 +7162,9 @@ var WavyLinearTrack = React37.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__ */ jsx(
     "div",
@@ -7180,7 +7487,7 @@ var IconButtonComponent = React37.forwardRef(
       variant = "default",
       colorStyle = "standard",
       size = "sm",
-      widthVariant = "default",
+      width = "default",
       shape = "round",
       selected,
       selectedIcon,
@@ -7198,7 +7505,7 @@ var IconButtonComponent = React37.forwardRef(
       "variant",
       "colorStyle",
       "size",
-      "widthVariant",
+      "width",
       "shape",
       "selected",
       "selectedIcon",
@@ -7243,7 +7550,7 @@ var IconButtonComponent = React37.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
@@ -7866,9 +8173,9 @@ function BadgedBox({
   badge,
   children,
   className,
-  badgeSize
+  size
 }) {
-  const isLarge = badgeSize ? badgeSize === "large" : detectBadgeHasContent(badge);
+  const isLarge = size ? size === "lg" : detectBadgeHasContent(badge);
   const badgePositionClass = isLarge ? "translate-x-[35%] -translate-y-[35%]" : "translate-x-[50%] -translate-y-[50%]";
   return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex", className), children: [
     children,
@@ -8879,7 +9186,7 @@ var FloatingToolbarWithFabBase = React37.forwardRef(
       fabPosition = orientation === "horizontal" ? "end" : "bottom",
       animationDuration = 0.3,
       scrollBehavior,
-      fabSize = "default",
+      fabSize = "sm",
       className,
       style
     } = _b, props = __objRest(_b, [
@@ -8899,7 +9206,7 @@ var FloatingToolbarWithFabBase = React37.forwardRef(
     const isHorizontal = orientation === "horizontal";
     const effectiveExpanded = expanded && (!scrollBehavior || scrollBehavior.isExpanded);
     const isFabBefore = fabPosition === "start" || fabPosition === "top";
-    const resolvedFabSize = fabSize === "medium" ? FabBaselineTokens.MediumContainerHeight : FabBaselineTokens.ContainerHeight;
+    const resolvedFabSize = fabSize === "md" ? FabBaselineTokens.MediumContainerHeight : FabBaselineTokens.ContainerHeight;
     const transitionSpec = __spreadProps(__spreadValues({}, SPRING_TRANSITION), {
       duration: animationDuration
     });
@@ -9038,7 +9345,7 @@ var ToolbarIconButton = React37.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       emphasis = "standard",
-      toolbarSize = "default",
+      width = "default",
       selected,
       asChild,
       className,
@@ -9046,7 +9353,7 @@ var ToolbarIconButton = React37.forwardRef(
       whileTap
     } = _b, props = __objRest(_b, [
       "emphasis",
-      "toolbarSize",
+      "width",
       "selected",
       "asChild",
       "className",
@@ -9054,7 +9361,7 @@ var ToolbarIconButton = React37.forwardRef(
       "whileTap"
     ]);
     const context = useToolbarContext();
-    const widthClass = TOOLBAR_ICON_BUTTON_WIDTH[toolbarSize];
+    const widthClass = TOOLBAR_ICON_BUTTON_WIDTH[width];
     const colorStyle = VARIANT_TO_COLOR_STYLE[emphasis];
     const iconButtonProps = selected !== void 0 ? {
       variant: "toggle",
@@ -9389,6 +9696,6 @@ var ToolbarToggleButton = React37.forwardRef(
 );
 ToolbarToggleButton.displayName = "ToolbarToggleButton";
 
-export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, BottomAppBar, BottomDockedToolbar, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuTrigger, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, NavigationBar, NavigationBarComponent, NavigationBarItem, NavigationRail, NavigationRailItem, SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, SmallAppBar, SubMenu, Tab, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, ToolbarDivider, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonTokens, ToolbarToggleButton, ToolbarToggleButtonTokens, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, appBarTypography, getNavigationShapeStyle, getToolbarColors, isSquareShape, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
+export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, BottomAppBar, BottomDockedToolbar, CHECK_ICON_VARIANTS, ContextMenu, ContextMenuContent, ContextMenuTrigger, DIVIDER_COLOR, DIVIDER_PADDING, DockedToolbar, FAST_EFFECTS_TRANSITION, FAST_SPATIAL_SPRING, FadingBlurMask, GROUP_SHAPES, HorizontalFloatingToolbar, HorizontalFloatingToolbarWithFab, ITEM_SHAPE_CLASSES, LargeFlexibleAppBar, MENU_CHECK_ICON_SIZE, MENU_CONTAINER_VARIANTS, MENU_GROUP_GAP, MENU_ICON_SIZE, MENU_ITEM_MIN_HEIGHT, MENU_MAX_WIDTH, MENU_MIN_WIDTH, MediumFlexibleAppBar, Menu, MenuContent, MenuDivider, MenuGroup, MenuItem, MenuProvider, MenuTrigger, NavigationBar, NavigationBarComponent, NavigationBarItem, NavigationRail, NavigationRailItem, SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, STANDARD_COLORS, SUBMENU_CONTAINER_VARIANTS, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, SmallAppBar, SubMenu, Tab, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, ToolbarDivider, ToolbarDividerTokens, ToolbarIconButton, ToolbarIconButtonTokens, ToolbarToggleButton, ToolbarToggleButtonTokens, VIBRANT_COLORS, VerticalFloatingToolbar, VerticalFloatingToolbarWithFab, VerticalMenu, VerticalMenuContent, VerticalMenuDivider, VerticalMenuGroup, appBarTypography, getNavigationShapeStyle, getToolbarColors, isSquareShape, standardFloatingToolbarColors, surfaceContainerHighFloatingToolbarColors, surfaceContainerHighestFloatingToolbarColors, tertiaryContainerFloatingToolbarColors, useAppBarScroll, useFloatingToolbarScrollBehavior, useMenuContext, useSearch, useSearchKeyboard, vibrantFloatingToolbarColors, xrFloatingToolbarColors };
 //# sourceMappingURL=navigation.mjs.map
 //# sourceMappingURL=navigation.mjs.map