@bug-on/m3-expressive 1.2.7 → 1.3.1

package/dist/index.js

@@ -6,8 +6,8 @@ var materialColorUtilities = require('@material/material-color-utilities');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var RxContextMenu = require('@radix-ui/react-context-menu');
 var react = require('motion/react');
+var RxContextMenu = require('@radix-ui/react-context-menu');
 var m3Tokens = require('@bug-on/m3-tokens');
 var DropdownMenu = require('@radix-ui/react-dropdown-menu');
 var reactSlot = require('@radix-ui/react-slot');
@@ -2855,6 +2855,52 @@ function interpolatePath(morph, progress, width, height) {
 function fmt(v) {
   return Number(v.toFixed(4)).toString();
 }
+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 = react.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__ */ jsxRuntime.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 = {
@@ -4615,7 +4661,10 @@ function BottomAppBar({
   floatingActionButton,
   scrollBehavior = "visible",
   scrollElement,
-  className
+  className,
+  enableFadingBlur,
+  blurIntensity,
+  blurHeight
 }) {
   const shouldReduceMotion = react.useReducedMotion();
   const { isHidden } = useAppBarScroll({
@@ -4630,9 +4679,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",
@@ -4645,8 +4694,19 @@ function BottomAppBar({
       animate: { y: translateY },
       transition: hideTransition,
       children: [
-        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center flex-1", children: actions }),
-        floatingActionButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 ml-auto mr-2", children: floatingActionButton })
+        enableFadingBlur && /* @__PURE__ */ jsxRuntime.jsx(
+          FadingBlurMask,
+          {
+            direction: "bottom",
+            blurIntensity,
+            blurHeight,
+            color: "var(--md-sys-color-surface-container)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex items-center w-full h-full", children: [
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center flex-1", children: actions }),
+          floatingActionButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 ml-auto mr-2", children: floatingActionButton })
+        ] })
       ]
     }
   );
@@ -4754,7 +4814,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;
@@ -4784,15 +4847,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__ */ jsxRuntime.jsx(
+          FadingBlurMask,
+          {
+            direction: "top",
+            blurIntensity,
+            blurHeight,
+            color: currentBg
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -4834,7 +4910,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: [
@@ -4887,7 +4963,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;
@@ -4917,15 +4996,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__ */ jsxRuntime.jsx(
+          FadingBlurMask,
+          {
+            direction: "top",
+            blurIntensity,
+            blurHeight,
+            color: currentBg
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -4967,7 +5059,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: [
@@ -5014,7 +5106,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",
@@ -5034,7 +5126,12 @@ function SearchAppBar({
   scrollBehavior = "pinned",
   scrollElement,
   searchBarId = "search-bar",
-  className
+  searchBarVariant = "filled",
+  searchBarHeight = 56,
+  className,
+  enableFadingBlur,
+  blurIntensity,
+  blurHeight
 }) {
   var _a, _b;
   const shouldReduceMotion = react.useReducedMotion();
@@ -5057,65 +5154,92 @@ function SearchAppBar({
       handleSearchClick();
     }
   };
+  const searchBarBg = isScrolled ? "var(--md-sys-color-surface-container-highest)" : APP_BAR_COLORS.searchBarBg;
+  const isOutlined = searchBarVariant === "outlined";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react.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__ */ jsxRuntime.jsx(
-          "div",
+        enableFadingBlur && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-          react.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-m3-surface-container-high -z-10" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "shrink-0",
-                  style: { color: APP_BAR_COLORS.searchBarContent },
-                  children: leadingSearchIcon != null ? leadingSearchIcon : /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {})
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "flex-1 text-[16px] leading-6 truncate select-none",
-                  style: { color: APP_BAR_COLORS.searchBarContent },
-                  children: searchValue != null ? searchValue : searchPlaceholder
-                }
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex items-center gap-2 w-full h-full", children: [
+          navigationIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "shrink-0 flex items-center justify-center",
+              style: {
+                width: AppBarTokens.iconButtonTouchTarget,
+                height: AppBarTokens.iconButtonTouchTarget
+              },
+              children: navigationIcon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            react.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__ */ jsxRuntime.jsx("div", { className: "flex items-center shrink-0", children: trailingSearchActions })
-            ]
-          }
-        ),
-        externalActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center shrink-0", children: externalActions })
+              style: { height: searchBarHeight },
+              onClick: handleSearchClick,
+              onKeyDown: handleKeyDown,
+              children: [
+                !isOutlined && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "absolute inset-0 rounded-full -z-10 transition-colors",
+                    style: {
+                      backgroundColor: searchBarBg,
+                      transition: cssTransition
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "shrink-0 flex items-center justify-center h-full",
+                    style: { color: APP_BAR_COLORS.searchBarContent },
+                    children: leadingSearchIcon != null ? leadingSearchIcon : /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center shrink-0", children: trailingSearchActions })
+              ]
+            }
+          ),
+          externalActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center shrink-0", children: externalActions })
+        ] })
       ]
     }
   );
@@ -5288,9 +5412,11 @@ function SmallAppBarInner({
   navigationIcon,
   actions,
   colors,
-  className,
   currentBg,
-  cssTransition
+  cssTransition,
+  enableFadingBlur,
+  blurIntensity,
+  blurHeight
 }) {
   var _a, _b;
   const isCentered = titleAlignment === "center";
@@ -5298,57 +5424,81 @@ function SmallAppBarInner({
     react.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__ */ jsxRuntime.jsx(
-          "div",
+        enableFadingBlur && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "flex-1 flex flex-col justify-center min-w-0",
-              isCentered ? "items-center" : "items-start",
-              !navigationIcon && "pl-4"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex items-center w-full h-full", children: [
+          navigationIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "shrink-0 flex items-center justify-center",
+              style: {
+                width: AppBarTokens.iconButtonTouchTarget,
+                height: AppBarTokens.iconButtonTouchTarget
+              },
+              children: navigationIcon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center shrink-0", children: actions })
+              children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: { width: AppBarTokens.iconButtonTouchTarget },
+              className: "shrink-0"
+            }
+          ),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center shrink-0", children: actions })
+        ] })
       ]
     }
   );
@@ -5362,7 +5512,10 @@ function SmallAppBar({
   colors,
   scrollBehavior = "pinned",
   scrollElement,
-  className
+  className,
+  enableFadingBlur,
+  blurIntensity,
+  blurHeight
 }) {
   var _a, _b;
   const shouldReduceMotion = react.useReducedMotion();
@@ -5382,14 +5535,17 @@ function SmallAppBar({
     actions,
     colors,
     currentBg,
-    cssTransition
+    cssTransition,
+    enableFadingBlur,
+    blurIntensity,
+    blurHeight
   };
   const barHeight = AppBarTokens.heights.small;
   if (scrollBehavior !== "enterAlways") {
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SmallAppBarInner, __spreadValues({}, innerProps))
       }
@@ -5402,7 +5558,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__ */ jsxRuntime.jsx(SmallAppBarInner, __spreadValues({}, innerProps))
     },
@@ -5484,9 +5643,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__ */ jsxRuntime.jsxs("span", { className: cn("relative inline-flex", className), children: [
     children,
@@ -5687,7 +5846,7 @@ LoadingIndicator.displayName = "LoadingIndicator";
 function easeInOutCubic(x) {
   return x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2;
 }
-function generateWavyCircularPath(center, radius, amplitude, wavelength) {
+function generateWavyCircularPath(center, radius, amplitude, wavelength, phase = 0) {
   const circumference = 2 * Math.PI * radius;
   const numWaves = Math.max(
     3,
@@ -5695,8 +5854,8 @@ function generateWavyCircularPath(center, radius, amplitude, wavelength) {
   );
   const steps = numWaves * 4;
   const dt = 2 * Math.PI / steps;
-  const rAt = (t) => radius + amplitude * Math.sin(numWaves * t);
-  const drAt = (t) => amplitude * numWaves * Math.cos(numWaves * t);
+  const rAt = (t) => radius + amplitude * Math.sin(numWaves * t + phase);
+  const drAt = (t) => amplitude * numWaves * Math.cos(numWaves * t + phase);
   const xAt = (t) => center + rAt(t) * Math.cos(t);
   const yAt = (t) => center + rAt(t) * Math.sin(t);
   const dxAt = (t) => drAt(t) * Math.cos(t) - rAt(t) * Math.sin(t);
@@ -5761,15 +5920,18 @@ var CircularProgress = React62__namespace.forwardRef(
       size = 48,
       trackHeight = 4,
       shape = "flat",
+      trackShape = "flat",
       amplitude,
       wavelength,
       gapSize = 4,
+      waveSpeed = 1,
       crawlerSpeed = 1,
       color,
       trackColor,
       showTrack = "auto",
       minProgress = DEFAULT_MIN_PROGRESS,
       maxProgress = DEFAULT_MAX_PROGRESS,
+      determinateAnimation = "md3",
       amplitudeRange,
       className,
       "aria-label": ariaLabel
@@ -5778,15 +5940,18 @@ var CircularProgress = React62__namespace.forwardRef(
       "size",
       "trackHeight",
       "shape",
+      "trackShape",
       "amplitude",
       "wavelength",
       "gapSize",
+      "waveSpeed",
       "crawlerSpeed",
       "color",
       "trackColor",
       "showTrack",
       "minProgress",
       "maxProgress",
+      "determinateAnimation",
       "amplitudeRange",
       "className",
       "aria-label"
@@ -5799,6 +5964,7 @@ var CircularProgress = React62__namespace.forwardRef(
     const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
     const isWavy = shape === "wavy";
     const shouldShowIndeterminateTrack = showTrack === "auto" ? isWavy : showTrack;
+    const shouldShowDeterminateTrack = showTrack === "auto" ? true : showTrack;
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
     const effectiveAmplitude = React62__namespace.useMemo(
@@ -5831,19 +5997,50 @@ var CircularProgress = React62__namespace.forwardRef(
     const trackOffset = isDeterminate ? activeAngularFraction + gapForTrack : 0;
     const trackLength = isDeterminate ? Math.max(1e-3, 1 - activeAngularFraction - 2 * gapForTrack) : 1;
     const ActiveCircleElem = react.m.circle;
-    const ActivePathElem = react.m.path;
     const indeterminateSvgRef = React62__namespace.useRef(null);
     const indeterminateTrackRef = React62__namespace.useRef(null);
     const indeterminateActiveRef = React62__namespace.useRef(null);
     const indeterminateWavyTrackPathRef = React62__namespace.useRef(null);
     const indeterminateWavyActivePathRef = React62__namespace.useRef(null);
+    const determinateWavyActivePathRef = React62__namespace.useRef(null);
+    const determinateWavyTrackPathRef = React62__namespace.useRef(null);
     const cachedPathLengthRef = React62__namespace.useRef(0);
+    const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 0);
+    const amplitudeMV = react.useMotionValue(isWavy ? effectiveAmplitude : 0);
+    React62__namespace.useEffect(() => {
+      if (isDeterminate) {
+        react.animate(fractionMV, clampedValue / 100, {
+          duration: 0.4,
+          ease: [0.2, 0, 0, 1]
+        });
+      }
+    }, [clampedValue, isDeterminate, fractionMV]);
+    React62__namespace.useEffect(() => {
+      if (!isDeterminate || !isWavy) return;
+      const fraction = clampedValue / 100;
+      let targetAmp = effectiveAmplitude;
+      if (determinateAnimation === "md3") {
+        targetAmp = fraction <= 0.1 || fraction >= 0.95 ? 0 : effectiveAmplitude;
+      }
+      react.animate(amplitudeMV, targetAmp, {
+        type: "spring",
+        bounce: 0,
+        duration: 0.5
+      });
+    }, [
+      clampedValue,
+      isDeterminate,
+      isWavy,
+      effectiveAmplitude,
+      amplitudeMV,
+      determinateAnimation
+    ]);
     React62__namespace.useLayoutEffect(() => {
       if (!isWavy || !wavyActivePath) {
         cachedPathLengthRef.current = circumference;
         return;
       }
-      const el = indeterminateActiveRef.current;
+      const el = indeterminateActiveRef.current || determinateWavyActivePathRef.current;
       if (el && "getTotalLength" in el) {
         try {
           const len = el.getTotalLength();
@@ -5857,7 +6054,65 @@ var CircularProgress = React62__namespace.forwardRef(
       cachedPathLengthRef.current = circumference;
     }, [isWavy, circumference, wavyActivePath]);
     react.useAnimationFrame((time) => {
-      if (isDeterminate) return;
+      const safeWaveSpeed = Math.max(0.1, waveSpeed);
+      const wavePhase = time / 1e3 * safeWaveSpeed * 2 * Math.PI;
+      if (isDeterminate) {
+        if (isWavy) {
+          const currentAmp = amplitudeMV.get();
+          const dynamicPath = generateWavyCircularPath(
+            center,
+            radius,
+            currentAmp,
+            effectiveWavelength,
+            wavePhase
+          );
+          if (determinateWavyActivePathRef.current) {
+            determinateWavyActivePathRef.current.setAttribute("d", dynamicPath);
+          }
+          if (trackShape === "wavy" && determinateWavyTrackPathRef.current) {
+            determinateWavyTrackPathRef.current.setAttribute("d", dynamicPath);
+          }
+          const pathEl = determinateWavyActivePathRef.current;
+          let totalLen = cachedPathLengthRef.current || circumference;
+          if (pathEl) {
+            try {
+              const len = pathEl.getTotalLength();
+              if (len > 0) totalLen = len;
+            } catch (e) {
+            }
+          }
+          const activeFrac = Math.max(0, Math.min(1, fractionMV.get()));
+          const activeLen = totalLen * activeFrac;
+          if (determinateWavyActivePathRef.current) {
+            determinateWavyActivePathRef.current.setAttribute(
+              "stroke-dasharray",
+              `${activeLen} ${totalLen}`
+            );
+            determinateWavyActivePathRef.current.setAttribute(
+              "stroke-dashoffset",
+              "0"
+            );
+          }
+          if (shouldShowDeterminateTrack && trackShape === "wavy" && determinateWavyTrackPathRef.current) {
+            const gapFrac = (gapSize + trackHeight) / totalLen;
+            const trackStartFrac = activeFrac + gapFrac;
+            const trackLen = Math.max(
+              1e-3,
+              totalLen * (1 - activeFrac - 2 * gapFrac)
+            );
+            const trackOff = -totalLen * trackStartFrac;
+            determinateWavyTrackPathRef.current.setAttribute(
+              "stroke-dasharray",
+              `${trackLen} ${totalLen}`
+            );
+            determinateWavyTrackPathRef.current.setAttribute(
+              "stroke-dashoffset",
+              `${trackOff}`
+            );
+          }
+        }
+        return;
+      }
       const safeCrawlerSpeed = Math.max(0.1, crawlerSpeed);
       const scaledTime = time * safeCrawlerSpeed;
       const globalCycle = scaledTime % GLOBAL_ROTATION_DURATION;
@@ -5892,7 +6147,8 @@ var CircularProgress = React62__namespace.forwardRef(
           center,
           radius,
           currentAmplitude,
-          effectiveWavelength
+          effectiveWavelength,
+          wavePhase
         );
         if (indeterminateWavyActivePathRef.current) {
           indeterminateWavyActivePathRef.current.setAttribute("d", dynamicPath);
@@ -5987,7 +6243,7 @@ var CircularProgress = React62__namespace.forwardRef(
         style: { width: size, height: size }
       }, restProps), {
         children: /* @__PURE__ */ jsxRuntime.jsxs(react.LazyMotion, { features: react.domMax, strict: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
               width: size,
@@ -5995,8 +6251,18 @@ var CircularProgress = React62__namespace.forwardRef(
               viewBox: `0 0 ${size} ${size}`,
               "aria-hidden": "true",
               style: { transform: "rotate(-90deg)", overflow: "visible" },
-              children: [
-                isDeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
+              children: isDeterminate ? isWavy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                shouldShowDeterminateTrack && (trackShape === "wavy" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    ref: determinateWavyTrackPathRef,
+                    d: wavyActivePath != null ? wavyActivePath : "",
+                    fill: "none",
+                    stroke: bgTrackColor,
+                    strokeWidth: trackHeight,
+                    strokeLinecap: "round"
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
                   react.m.circle,
                   {
                     cx: center,
@@ -6005,28 +6271,52 @@ var CircularProgress = React62__namespace.forwardRef(
                     fill: "none",
                     stroke: bgTrackColor,
                     strokeWidth: trackHeight,
-                    initial: { pathLength: trackLength, pathOffset: trackOffset },
-                    animate: { pathLength: trackLength, pathOffset: trackOffset },
+                    initial: {
+                      pathLength: trackLength,
+                      pathOffset: trackOffset
+                    },
+                    animate: {
+                      pathLength: trackLength,
+                      pathOffset: trackOffset
+                    },
                     transition: { duration: 0.4, ease: [0.2, 0, 0, 1] },
                     strokeLinecap: "round"
                   }
-                ) : null,
-                isDeterminate && (isWavy ? /* @__PURE__ */ jsxRuntime.jsx(
-                  ActivePathElem,
+                )),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
                   {
+                    ref: determinateWavyActivePathRef,
                     d: wavyActivePath != null ? wavyActivePath : "",
                     fill: "none",
                     stroke: activeColor,
                     strokeWidth: trackHeight,
-                    strokeLinecap: "round",
-                    initial: { pathLength: 0 },
-                    animate: { pathLength: clampedValue / 100 },
-                    transition: {
-                      duration: 0.4,
-                      ease: [0.2, 0, 0, 1]
-                    }
+                    strokeLinecap: "round"
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.m.circle,
+                  {
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    fill: "none",
+                    stroke: bgTrackColor,
+                    strokeWidth: trackHeight,
+                    initial: {
+                      pathLength: trackLength,
+                      pathOffset: trackOffset
+                    },
+                    animate: {
+                      pathLength: trackLength,
+                      pathOffset: trackOffset
+                    },
+                    transition: { duration: 0.4, ease: [0.2, 0, 0, 1] },
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
                   ActiveCircleElem,
                   {
                     cx: center,
@@ -6043,8 +6333,8 @@ var CircularProgress = React62__namespace.forwardRef(
                       ease: [0.2, 0, 0, 1]
                     }
                   }
-                ))
-              ]
+                )
+              ] }) : null
             }
           ),
           !isDeterminate && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8412,9 +8702,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",
@@ -8501,7 +8791,7 @@ var ToggleFABComponent = React62__namespace.forwardRef(
     onToggle,
     icon,
     colorVariant = "primary",
-    fabSize = "baseline",
+    size = "sm",
     className,
     id,
     "aria-label": ariaLabel,
@@ -8510,7 +8800,7 @@ var ToggleFABComponent = React62__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);
     React62__namespace.useEffect(() => {
@@ -8680,7 +8970,7 @@ function FABMenu({
   onToggle,
   items,
   colorVariant = "primary",
-  fabSize = "baseline",
+  size = "sm",
   alignment = "end",
   className,
   closeOnBackdropClick = true,
@@ -8831,7 +9121,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
@@ -8975,7 +9265,7 @@ var IconButtonComponent = React62__namespace.forwardRef(
       variant = "default",
       colorStyle = "standard",
       size = "sm",
-      widthVariant = "default",
+      width = "default",
       shape = "round",
       selected,
       selectedIcon,
@@ -8993,7 +9283,7 @@ var IconButtonComponent = React62__namespace.forwardRef(
       "variant",
       "colorStyle",
       "size",
-      "widthVariant",
+      "width",
       "shape",
       "selected",
       "selectedIcon",
@@ -9038,7 +9328,7 @@ var IconButtonComponent = React62__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
@@ -9207,11 +9497,12 @@ var SplitButtonLayoutComponent = React62__namespace.forwardRef(
       "div",
       __spreadProps(__spreadValues({
         ref,
+        role: "group",
         className: cn(
           "inline-flex flex-row items-stretch justify-center w-fit shrink-0 relative",
           className
         ),
-        style: { gap: `${spacing}px` }
+        style: __spreadValues({ gap: `${spacing}px` }, restProps.style)
       }, restProps), {
         children: [
           leadingButton,
@@ -9424,11 +9715,11 @@ var LEADING_ICON_SIZE_FOR_SIZE = {
   xl: 40
 };
 var splitButtonSizeVariants = {
-  xs: "min-h-[32px]",
-  sm: "min-h-[40px]",
-  md: "min-h-[56px]",
-  lg: "min-h-[96px]",
-  xl: "min-h-[136px]"
+  xs: "h-[32px] min-h-[32px]",
+  sm: "h-[40px] min-h-[40px]",
+  md: "h-[56px] min-h-[56px]",
+  lg: "h-[96px] min-h-[96px]",
+  xl: "h-[136px] min-h-[136px]"
 };
 var splitButtonVariants = classVarianceAuthority.cva(
   "group relative w-fit shrink-0 inline-flex flex-row items-center justify-center whitespace-nowrap select-none cursor-pointer transition-[background-color,color,border-color,box-shadow,opacity,filter] duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-m3-primary z-10 overflow-hidden",
@@ -9612,7 +9903,7 @@ var SplitButtonLeadingComponent = React62__namespace.forwardRef(
           children: icon
         }
       ),
-      labelContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center h-full gap-[inherit]", children: labelContent })
+      labelContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center gap-[inherit]", children: labelContent })
     ] });
     const containerClassName = cn(
       splitButtonVariants({
@@ -9620,19 +9911,20 @@ var SplitButtonLeadingComponent = React62__namespace.forwardRef(
         size: actualSize,
         disabled
       }),
+      "gap-2",
       typographyClass,
       className
     );
     const mergedStyle = __spreadValues({
       paddingInlineStart: tokens.leadingPadding.start,
       paddingInlineEnd: tokens.leadingPadding.end,
-      gap: "8px",
       borderRadius
     }, style);
     return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: asChild ? /* @__PURE__ */ jsxRuntime.jsx(
       reactSlot.Slot,
       __spreadProps(__spreadValues({
         ref,
+        "data-split-button-part": "leading",
         "aria-disabled": disabled || void 0,
         onClick: handleClick,
         onPointerDown: handlePointerDown,
@@ -9655,6 +9947,7 @@ var SplitButtonLeadingComponent = React62__namespace.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         type: "button",
+        "data-split-button-part": "leading",
         disabled,
         onClick: handleClick,
         onPointerDown: handlePointerDown,
@@ -9668,8 +9961,7 @@ var SplitButtonLeadingComponent = React62__namespace.forwardRef(
         transition: SPLIT_BUTTON_RADIUS_SPRING,
         style: __spreadValues({
           paddingInlineStart: tokens.leadingPadding.start,
-          paddingInlineEnd: tokens.leadingPadding.end,
-          gap: "8px"
+          paddingInlineEnd: tokens.leadingPadding.end
         }, style),
         className: containerClassName
       }, restProps), {
@@ -9707,7 +9999,8 @@ var SplitButtonTrailingComponent = React62__namespace.forwardRef(
       onBlur,
       asChild = false,
       children,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      "aria-haspopup": ariaHaspopup = "menu"
     } = _b, restProps = __objRest(_b, [
       "className",
       "style",
@@ -9725,7 +10018,8 @@ var SplitButtonTrailingComponent = React62__namespace.forwardRef(
       "onBlur",
       "asChild",
       "children",
-      "aria-label"
+      "aria-label",
+      "aria-haspopup"
     ]);
     var _a2, _b2;
     const context = useSplitButtonContext();
@@ -9818,7 +10112,11 @@ var SplitButtonTrailingComponent = React62__namespace.forwardRef(
             x: checked ? 0 : tokens.opticalCenterOffset
           },
           transition: prefersReducedMotion2 ? { duration: 0 } : SPLIT_BUTTON_CHEVRON_SPRING,
-          className: "flex items-center justify-center shrink-0",
+          className: "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full",
+          style: {
+            width: tokens.trailingIconSize,
+            height: tokens.trailingIconSize
+          },
           children: icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(
             Icon,
             {
@@ -9847,8 +10145,10 @@ var SplitButtonTrailingComponent = React62__namespace.forwardRef(
       reactSlot.Slot,
       __spreadProps(__spreadValues({
         ref,
+        "data-split-button-part": "trailing",
         "aria-label": ariaLabel,
         "aria-expanded": checked,
+        "aria-haspopup": ariaHaspopup,
         "aria-disabled": disabled,
         onClick: handleToggle,
         onPointerDown: handlePointerDown,
@@ -9871,8 +10171,10 @@ var SplitButtonTrailingComponent = React62__namespace.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         type: "button",
+        "data-split-button-part": "trailing",
         "aria-label": ariaLabel,
         "aria-expanded": checked,
+        "aria-haspopup": ariaHaspopup,
         "aria-disabled": disabled,
         disabled,
         onClick: handleToggle,
@@ -9947,6 +10249,7 @@ var SplitButtonTrailingUncheckableComponent = React62__namespace.forwardRef(
     const [isFocused, setIsFocused] = React62__namespace.useState(false);
     const [isPressed, setIsPressed] = React62__namespace.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
+    const prefersReducedMotion2 = react.useReducedMotion();
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
     const {
       ripples,
@@ -10010,6 +10313,7 @@ var SplitButtonTrailingUncheckableComponent = React62__namespace.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         type: "button",
+        "data-split-button-part": "trailing",
         "aria-label": ariaLabel,
         disabled,
         onClick,
@@ -10021,7 +10325,7 @@ var SplitButtonTrailingUncheckableComponent = React62__namespace.forwardRef(
         onFocus: handleFocus,
         onBlur: handleBlur,
         animate: { borderRadius },
-        transition: SPLIT_BUTTON_RADIUS_SPRING,
+        transition: prefersReducedMotion2 ? { duration: 0 } : SPLIT_BUTTON_RADIUS_SPRING,
         style: __spreadValues({
           paddingInlineStart: tokens.trailingPadding.start,
           paddingInlineEnd: tokens.trailingPadding.end
@@ -10050,7 +10354,7 @@ var SplitButtonTrailingUncheckableComponent = React62__namespace.forwardRef(
             react.m.div,
             {
               animate: { x: tokens.opticalCenterOffset },
-              transition: SPLIT_BUTTON_RADIUS_SPRING,
+              transition: prefersReducedMotion2 ? { duration: 0 } : SPLIT_BUTTON_RADIUS_SPRING,
               className: "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full",
               style: {
                 width: tokens.trailingIconSize,
@@ -13967,7 +14271,7 @@ var DividerImpl = React62__namespace.forwardRef(
       insetStart = "standard",
       waveConfig,
       decorative = false,
-      animate: animate4 = true,
+      animate: animate5 = true,
       className,
       style
     } = _b, props = __objRest(_b, [
@@ -13983,7 +14287,7 @@ var DividerImpl = React62__namespace.forwardRef(
     ]);
     var _a2, _b2, _c;
     const reducedMotion = react.useReducedMotion();
-    const shouldAnimate = animate4 && !reducedMotion;
+    const shouldAnimate = animate5 && !reducedMotion;
     const effectiveShape = shape === "wavy" && orientation === "vertical" ? "flat" : shape;
     if (shape === "wavy" && orientation === "vertical") {
       console.warn(
@@ -19089,7 +19393,7 @@ function useShapeMorph({
     currentProgressRef.current = p;
     setClipPath(interpolatePath(morph, p, width, height));
   }, [scrollProgress, morphOn, morph, width, height]);
-  const animate4 = React62.useCallback(
+  const animate5 = React62.useCallback(
     (timestamp) => {
       if (!morph) return;
       const elapsed = timestamp - startTimeRef.current;
@@ -19100,7 +19404,7 @@ function useShapeMorph({
       currentProgressRef.current = progress;
       setClipPath(interpolatePath(morph, progress, width, height));
       if (rawT < 1) {
-        animRef.current = requestAnimationFrame(animate4);
+        animRef.current = requestAnimationFrame(animate5);
       } else {
         animRef.current = null;
       }
@@ -19119,9 +19423,9 @@ function useShapeMorph({
       startProgressRef.current = currentProgressRef.current;
       targetProgressRef.current = toProgress;
       startTimeRef.current = performance.now();
-      animRef.current = requestAnimationFrame(animate4);
+      animRef.current = requestAnimationFrame(animate5);
     },
-    [morph, animate4, width, height]
+    [morph, animate5, width, height]
   );
   React62.useEffect(() => {
     return () => {
@@ -20478,26 +20782,26 @@ var SliderTokens = {
   // ── Track sizes (height for horizontal, width for vertical) ────────────────
   trackSizes: {
     xs: 16,
-    s: 24,
-    m: 40,
-    l: 56,
+    sm: 24,
+    md: 40,
+    lg: 56,
     xl: 96
   },
   // ── Track shapes (border radius) ──────────────────────────────────────────
   trackShapes: {
     xs: 8,
-    s: 8,
-    m: 12,
-    l: 16,
+    sm: 8,
+    md: 12,
+    lg: 16,
     xl: 28
   },
   // ── Thumb (handle) ────────────────────────────────────────────────────────
   /** Thumb height grows with track size */
   thumbHeights: {
     xs: 44,
-    s: 44,
-    m: 52,
-    l: 68,
+    sm: 44,
+    md: 52,
+    lg: 68,
     xl: 108
   },
   /**
@@ -20542,9 +20846,9 @@ var SliderTokens = {
   /** Standard icon size map for inset icons inside the track. */
   insetIconSizes: {
     xs: 0,
-    s: 0,
-    m: 24,
-    l: 24,
+    sm: 0,
+    md: 24,
+    lg: 24,
     xl: 32
   },
   /**
@@ -20578,14 +20882,14 @@ var SliderColors = {
   // ── Ticks ────────────────────────────────────────────────────────────────
   /**
    * Tick on the INACTIVE portion of the track.
-   * Maps to TickMarkActiveContainerColor (in spec: primary color stands out).
+   * Maps to TickMarkInactiveContainerColor (in spec: primary color stands out).
    */
   tickOnInactive: "var(--md-sys-color-primary)",
   /**
    * Tick on the ACTIVE portion of the track.
-   * Maps to TickMarkInactiveContainerColor (secondary-container blends in).
+   * Maps to TickMarkActiveContainerColor (in spec: on-primary contrasts with filled track).
    */
-  tickOnActive: "var(--md-sys-color-secondary-container)",
+  tickOnActive: "var(--md-sys-color-on-primary)",
   disabledTick: "var(--md-sys-color-on-surface)"
 };
 var SLIDER_THUMB_SPRING = {
@@ -20604,11 +20908,11 @@ var ValueIndicator = React62__namespace.memo(function ValueIndicator2({
   orientation,
   formatValue,
   prefersReduced,
-  trackSize
+  size
 }) {
   const label = formatValue ? formatValue(value) : String(Math.round(value));
   const isHorizontal = orientation === "horizontal";
-  const thumbHeight = SliderTokens.thumbHeights[trackSize];
+  const thumbHeight = SliderTokens.thumbHeights[size];
   const offsetFromCenter = thumbHeight / 2 + 8;
   return /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: visible && /* @__PURE__ */ jsxRuntime.jsx(
     react.m.div,
@@ -20659,7 +20963,7 @@ var SliderThumb = React62__namespace.memo(function SliderThumb2({
   onValueChangeEnd,
   formatValue,
   thumbId,
-  trackSize,
+  size,
   variant,
   zIndex = 1,
   "aria-label": ariaLabel,
@@ -20668,10 +20972,7 @@ var SliderThumb = React62__namespace.memo(function SliderThumb2({
   var _a;
   const isHorizontal = orientation === "horizontal";
   const insetLimit = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
-  const trackInset = Math.min(
-    SliderTokens.trackSizes[trackSize] / 2,
-    insetLimit
-  );
+  const trackInset = Math.min(SliderTokens.trackSizes[size] / 2, insetLimit);
   const posTarget = isHorizontal ? "left" : "bottom";
   const motionStyle = {
     [posTarget]: `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`
@@ -20704,7 +21005,7 @@ var SliderThumb = React62__namespace.memo(function SliderThumb2({
       const space = isHorizontal ? rect.width : rect.height;
       const insetLimit2 = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
       const trackInset2 = Math.min(
-        SliderTokens.trackSizes[trackSize] / 2,
+        SliderTokens.trackSizes[size] / 2,
         insetLimit2
       );
       const safeSpace = space - trackInset2 * 2;
@@ -20721,7 +21022,7 @@ var SliderThumb = React62__namespace.memo(function SliderThumb2({
       const snapped = step > 0 ? Math.round((rawValue - min) / step) * step + min : rawValue;
       return Math.max(min, Math.min(max, snapped));
     },
-    [isHorizontal, max, min, percent, step, trackRef, trackSize]
+    [isHorizontal, max, min, percent, step, trackRef, size]
   );
   const handlePointerDown = React62__namespace.useCallback(
     (e) => {
@@ -20807,7 +21108,7 @@ var SliderThumb = React62__namespace.memo(function SliderThumb2({
             orientation,
             formatValue,
             prefersReduced,
-            trackSize
+            size
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -20840,11 +21141,11 @@ var SliderThumb = React62__namespace.memo(function SliderThumb2({
               "focus-visible:outline-(--md-sys-color-secondary)"
             ),
             style: __spreadProps(__spreadValues({}, isHorizontal ? {
-              height: SliderTokens.thumbHeights[trackSize],
+              height: SliderTokens.thumbHeights[size],
               width: SliderTokens.thumbWidthDefault,
               willChange: "width"
             } : {
-              width: SliderTokens.thumbHeights[trackSize],
+              width: SliderTokens.thumbHeights[size],
               height: SliderTokens.thumbWidthDefault,
               willChange: "height"
             }), {
@@ -20859,7 +21160,7 @@ var SliderThumb = React62__namespace.memo(function SliderThumb2({
 var RangeTrack = React62__namespace.memo(function RangeTrack2({
   startPercent,
   endPercent,
-  trackSize,
+  size,
   orientation,
   variant,
   disabled,
@@ -20871,22 +21172,22 @@ var RangeTrack = React62__namespace.memo(function RangeTrack2({
   onTrackPointerDown
 }) {
   const isHorizontal = orientation === "horizontal";
-  const size = SliderTokens.trackSizes[trackSize];
-  const thumbHeight = SliderTokens.thumbHeights[trackSize];
+  const trackPixelSize = SliderTokens.trackSizes[size];
+  const thumbHeight = SliderTokens.thumbHeights[size];
   const { thumbGap, thumbWidthDefault, tickSize } = SliderTokens;
   const thumbHalfWidth = thumbWidthDefault / 2;
   const activeTrack = disabled ? SliderColors.disabledActiveTrack : `var(--md-sys-color-${variant})`;
   const inactiveTrack = disabled ? SliderColors.disabledInactiveTrack : `var(--md-sys-color-${variant}-container)`;
   const innerR = SliderTokens.trackInnerRadius;
-  let outerR = size / 2;
+  let outerR = trackPixelSize / 2;
   if (trackShape === "md3") {
-    outerR = Math.min(SliderTokens.trackShapes[trackSize], size / 2);
+    outerR = Math.min(SliderTokens.trackShapes[size], trackPixelSize / 2);
   } else if (typeof trackShape === "number") {
-    outerR = Math.min(trackShape, size / 2);
+    outerR = Math.min(trackShape, trackPixelSize / 2);
   }
   if (isHorizontal) {
     const insetLimit2 = thumbGap + thumbWidthDefault / 2;
-    const trackInset2 = Math.min(size / 2, insetLimit2);
+    const trackInset2 = Math.min(trackPixelSize / 2, insetLimit2);
     const cxStart = `calc(${trackInset2}px + ${startPercent} * (100% - ${trackInset2 * 2}px))`;
     const cxEnd = `calc(${trackInset2}px + ${endPercent} * (100% - ${trackInset2 * 2}px))`;
     const gapWithThumbStr2 = `${thumbGap + thumbHalfWidth}px`;
@@ -20917,7 +21218,7 @@ var RangeTrack = React62__namespace.memo(function RangeTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: leadingWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: inactiveTrack,
                 opacity: disabled ? 0.38 : 1,
                 borderTopLeftRadius: outerR,
@@ -20937,7 +21238,7 @@ var RangeTrack = React62__namespace.memo(function RangeTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: activeWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: activeTrack,
                 opacity: disabled ? 0.38 : 1,
                 borderTopLeftRadius: startPercent <= 0 ? outerR : innerR,
@@ -20957,7 +21258,7 @@ var RangeTrack = React62__namespace.memo(function RangeTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: trailingWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: inactiveTrack,
                 opacity: disabled ? 0.38 : 1,
                 borderTopLeftRadius: innerR,
@@ -20979,7 +21280,7 @@ var RangeTrack = React62__namespace.memo(function RangeTrack2({
                   width: tickSize,
                   height: tickSize,
                   borderRadius: "50%",
-                  backgroundColor: disabled ? SliderColors.disabledTick : isActive ? `var(--md-sys-color-${variant}-container)` : `var(--md-sys-color-${variant})`,
+                  backgroundColor: disabled ? SliderColors.disabledTick : isActive ? `var(--md-sys-color-on-${variant})` : `var(--md-sys-color-${variant})`,
                   opacity: disabled ? 0.38 : 1,
                   left: `calc(${trackInset2}px + ${tickPct} * (100% - ${trackInset2 * 2}px) - ${tickSize / 2}px)`,
                   top: "50%",
@@ -20994,7 +21295,7 @@ var RangeTrack = React62__namespace.memo(function RangeTrack2({
     );
   }
   const insetLimit = thumbGap + thumbWidthDefault / 2;
-  const trackInset = Math.min(size / 2, insetLimit);
+  const trackInset = Math.min(trackPixelSize / 2, insetLimit);
   const cyStart = `calc(${trackInset}px + ${startPercent} * (100% - ${trackInset * 2}px))`;
   const cyEnd = `calc(${trackInset}px + ${endPercent} * (100% - ${trackInset * 2}px))`;
   const gapWithThumbStr = `${thumbGap + thumbHalfWidth}px`;
@@ -21025,7 +21326,7 @@ var RangeTrack = React62__namespace.memo(function RangeTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: leadingHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: inactiveTrack,
               opacity: disabled ? 0.38 : 1,
               borderBottomLeftRadius: outerR,
@@ -21045,7 +21346,7 @@ var RangeTrack = React62__namespace.memo(function RangeTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: activeHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: activeTrack,
               opacity: disabled ? 0.38 : 1,
               borderBottomLeftRadius: startPercent <= 0 ? outerR : innerR,
@@ -21065,7 +21366,7 @@ var RangeTrack = React62__namespace.memo(function RangeTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: trailingHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: inactiveTrack,
               opacity: disabled ? 0.38 : 1,
               borderTopLeftRadius: outerR,
@@ -21087,7 +21388,7 @@ var RangeTrack = React62__namespace.memo(function RangeTrack2({
                 width: tickSize,
                 height: tickSize,
                 borderRadius: "50%",
-                backgroundColor: disabled ? SliderColors.disabledTick : isActive ? `var(--md-sys-color-${variant}-container)` : `var(--md-sys-color-${variant})`,
+                backgroundColor: disabled ? SliderColors.disabledTick : isActive ? `var(--md-sys-color-on-${variant})` : `var(--md-sys-color-${variant})`,
                 opacity: disabled ? 0.38 : 1,
                 bottom: `calc(${trackInset}px + ${tickPct} * (100% - ${trackInset * 2}px) - ${tickSize / 2}px)`,
                 left: "50%",
@@ -21111,7 +21412,7 @@ var RangeSliderComponent = React62__namespace.forwardRef(
     max = 100,
     step = 0,
     orientation = "horizontal",
-    trackSize = "m",
+    size = "md",
     trackShape = "md3",
     variant = "primary",
     disabled = false,
@@ -21183,7 +21484,7 @@ var RangeSliderComponent = React62__namespace.forwardRef(
         let clickPercent;
         const insetLimit = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
         const trackInset = Math.min(
-          SliderTokens.trackSizes[trackSize] / 2,
+          SliderTokens.trackSizes[size] / 2,
           insetLimit
         );
         if (isHorizontal) {
@@ -21215,7 +21516,7 @@ var RangeSliderComponent = React62__namespace.forwardRef(
         min,
         snap,
         startValue,
-        trackSize
+        size
       ]
     );
     const id = React62__namespace.useId();
@@ -21236,7 +21537,7 @@ var RangeSliderComponent = React62__namespace.forwardRef(
             {
               startPercent,
               endPercent,
-              trackSize,
+              size,
               trackShape,
               orientation,
               variant,
@@ -21258,7 +21559,7 @@ var RangeSliderComponent = React62__namespace.forwardRef(
               step,
               disabled,
               orientation,
-              trackSize,
+              size,
               variant,
               showValueIndicator,
               trackRef,
@@ -21280,7 +21581,7 @@ var RangeSliderComponent = React62__namespace.forwardRef(
               step,
               disabled,
               orientation,
-              trackSize,
+              size,
               variant,
               showValueIndicator,
               trackRef,
@@ -21343,13 +21644,13 @@ var InsetIcon = React62__namespace.memo(function InsetIcon2({
   position,
   orientation,
   trackSize,
-  trackSizeToken,
+  sizeToken,
   disabled,
   variant,
   prefersReduced
 }) {
   const iconSize = Math.min(
-    SliderTokens.insetIconSizes[trackSizeToken],
+    SliderTokens.insetIconSizes[sizeToken],
     Math.max(4, trackSize - SliderTokens.insetIconPadding * 2)
   );
   const activeColor = `var(--md-sys-color-on-${variant})`;
@@ -21410,7 +21711,7 @@ function Ticks({
     const thumbStart = percent - (thumbGap + thumbWidthDefault / 2) / 100;
     const thumbEnd = percent + (thumbGap + thumbWidthDefault / 2) / 100;
     if (tickPercent > thumbStart && tickPercent < thumbEnd) return null;
-    const color = disabled ? SliderColors.disabledTick : isOnActive ? `var(--md-sys-color-${variant}-container)` : `var(--md-sys-color-${variant})`;
+    const color = disabled ? SliderColors.disabledTick : isOnActive ? `var(--md-sys-color-on-${variant})` : `var(--md-sys-color-${variant})`;
     const style = __spreadValues({
       position: "absolute",
       width: tickSize,
@@ -21433,7 +21734,7 @@ function Ticks({
 }
 var SliderTrack = React62__namespace.memo(function SliderTrack2({
   percent,
-  trackSize,
+  size,
   orientation,
   variant,
   isCentered,
@@ -21452,15 +21753,15 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
 }) {
   var _a;
   const isHorizontal = orientation === "horizontal";
-  const size = SliderTokens.trackSizes[trackSize];
-  const thumbHeight = SliderTokens.thumbHeights[trackSize];
+  const trackPixelSize = SliderTokens.trackSizes[size];
+  const thumbHeight = SliderTokens.thumbHeights[size];
   const { thumbGap, thumbWidthDefault, trackInnerRadius } = SliderTokens;
   const innerR = trackInnerRadius;
-  let outerR = size / 2;
+  let outerR = trackPixelSize / 2;
   if (trackShape === "md3") {
-    outerR = Math.min(SliderTokens.trackShapes[trackSize], size / 2);
+    outerR = Math.min(SliderTokens.trackShapes[size], trackPixelSize / 2);
   } else if (typeof trackShape === "number") {
-    outerR = Math.min(trackShape, size / 2);
+    outerR = Math.min(trackShape, trackPixelSize / 2);
   }
   const thumbHalfWidth = thumbWidthDefault / 2;
   const gapWithThumbStr = `${thumbGap + thumbHalfWidth}px`;
@@ -21478,8 +21779,8 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
     return () => ro.disconnect();
   }, [hasAnyInsetIcon, isHorizontal, trackRef]);
   const activeIconSize = Math.min(
-    SliderTokens.insetIconSizes[trackSize],
-    Math.max(4, size - SliderTokens.insetIconPadding * 2)
+    SliderTokens.insetIconSizes[size],
+    Math.max(4, trackPixelSize - SliderTokens.insetIconPadding * 2)
   );
   const iconTotalWidth = activeIconSize + SliderTokens.insetIconPadding * 2 + thumbGap + thumbHalfWidth;
   const iconThreshold = trackWidth > 0 ? iconTotalWidth / trackWidth : 0.15;
@@ -21514,7 +21815,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
   const activeColor = disabled ? SliderColors.disabledActiveTrack : `var(--md-sys-color-${variant})`;
   const inactiveColor = disabled ? SliderColors.disabledInactiveTrack : `var(--md-sys-color-${variant}-container)`;
   const insetLimit = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
-  const trackInset = Math.min(size / 2, insetLimit);
+  const trackInset = Math.min(trackPixelSize / 2, insetLimit);
   const gapTotal = thumbGap + thumbHalfWidth;
   const thumbCenter = `calc(${trackInset}px + ${percent} * (100% - ${trackInset * 2}px))`;
   const leadingActiveLeft = `${trackInset + SliderTokens.insetIconPadding}px`;
@@ -21539,7 +21840,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
               top: "50%",
               transform: "translateY(-50%)",
               width: leftSegmentWidth,
-              height: size,
+              height: trackPixelSize,
               backgroundColor: activeColor,
               opacity: disabled ? 0.38 : 1
             }, getHorizontalRadius(true, innerR, outerR))
@@ -21558,7 +21859,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
               top: "50%",
               transform: "translateY(-50%)",
               width: rightSegmentWidth,
-              height: size,
+              height: trackPixelSize,
               backgroundColor: inactiveColor,
               opacity: disabled ? 0.38 : 1
             }, getHorizontalRadius(false, innerR, outerR))
@@ -21581,7 +21882,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: leftBaseWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: inactiveColor,
                 opacity: disabled ? 0.38 : 1
               }, getHorizontalRadius(true, innerR, outerR))
@@ -21602,7 +21903,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: centerActiveWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: activeColor,
                 opacity: disabled ? 0.38 : 1
               }, allInnerRadius(innerR))
@@ -21623,7 +21924,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: rightBaseWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: inactiveColor,
                 opacity: disabled ? 0.38 : 1
               }, getHorizontalRadius(false, innerR, outerR))
@@ -21644,7 +21945,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: leftBaseWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: inactiveColor,
                 opacity: disabled ? 0.38 : 1
               }, getHorizontalRadius(true, innerR, outerR))
@@ -21665,7 +21966,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: centerActiveWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: activeColor,
                 opacity: disabled ? 0.38 : 1
               }, allInnerRadius(innerR))
@@ -21686,7 +21987,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: rightBaseWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: inactiveColor,
                 opacity: disabled ? 0.38 : 1
               }, getHorizontalRadius(false, innerR, outerR))
@@ -21730,8 +22031,8 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
               isOnActiveSegment: leadingOnActive,
               position: leadingOnActive ? leadingActiveLeft : leadingInactiveLeft,
               orientation,
-              trackSize: size,
-              trackSizeToken: trackSize,
+              trackSize: trackPixelSize,
+              sizeToken: size,
               disabled,
               variant,
               prefersReduced
@@ -21745,8 +22046,8 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
               isOnActiveSegment: trailingOnActive,
               position: trailingOnActive ? trailingActiveLeft : trailingInactiveLeft,
               orientation,
-              trackSize: size,
-              trackSizeToken: trackSize,
+              trackSize: trackPixelSize,
+              sizeToken: size,
               disabled,
               variant,
               prefersReduced
@@ -21774,7 +22075,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
             left: "50%",
             transform: "translateX(-50%)",
             height: bottomSegmentHeight,
-            width: size,
+            width: trackPixelSize,
             backgroundColor: activeColor,
             opacity: disabled ? 0.38 : 1
           }, getVerticalRadius(true, innerR, outerR))
@@ -21793,7 +22094,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
             left: "50%",
             transform: "translateX(-50%)",
             height: topSegmentHeight,
-            width: size,
+            width: trackPixelSize,
             backgroundColor: inactiveColor,
             opacity: disabled ? 0.38 : 1
           }, getVerticalRadius(false, innerR, outerR))
@@ -21816,7 +22117,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: bottomBaseHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: inactiveColor,
               opacity: disabled ? 0.38 : 1
             }, getVerticalRadius(true, innerR, outerR))
@@ -21837,7 +22138,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: centerActiveHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: activeColor,
               opacity: disabled ? 0.38 : 1
             }, allInnerRadius(innerR))
@@ -21858,7 +22159,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: topBaseHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: inactiveColor,
               opacity: disabled ? 0.38 : 1
             }, getVerticalRadius(false, innerR, outerR))
@@ -21879,7 +22180,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: bottomBaseHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: inactiveColor,
               opacity: disabled ? 0.38 : 1
             }, getVerticalRadius(true, innerR, outerR))
@@ -21900,7 +22201,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: centerActiveHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: activeColor,
               opacity: disabled ? 0.38 : 1
             }, allInnerRadius(innerR))
@@ -21921,7 +22222,7 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: topBaseHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: inactiveColor,
               opacity: disabled ? 0.38 : 1
             }, getVerticalRadius(false, innerR, outerR))
@@ -21965,8 +22266,8 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
             isOnActiveSegment: leadingOnActive,
             position: leadingOnActive ? leadingActiveLeft : leadingInactiveLeft,
             orientation,
-            trackSize: size,
-            trackSizeToken: trackSize,
+            trackSize: trackPixelSize,
+            sizeToken: size,
             disabled,
             variant,
             prefersReduced
@@ -21980,8 +22281,8 @@ var SliderTrack = React62__namespace.memo(function SliderTrack2({
             isOnActiveSegment: trailingOnActive,
             position: trailingOnActive ? trailingActiveLeft : trailingInactiveLeft,
             orientation,
-            trackSize: size,
-            trackSizeToken: trackSize,
+            trackSize: trackPixelSize,
+            sizeToken: size,
             disabled,
             variant,
             prefersReduced
@@ -22002,7 +22303,7 @@ var SliderComponent = React62__namespace.forwardRef(
     max = 100,
     step = 0,
     orientation = "horizontal",
-    trackSize = "m",
+    size = "md",
     trackShape = "md3",
     variant = "primary",
     isCentered = false,
@@ -22056,7 +22357,7 @@ var SliderComponent = React62__namespace.forwardRef(
         let clickPercent;
         const insetLimit = SliderTokens.thumbGap + SliderTokens.thumbWidthDefault / 2;
         const trackInset = Math.min(
-          SliderTokens.trackSizes[trackSize] / 2,
+          SliderTokens.trackSizes[size] / 2,
           insetLimit
         );
         if (isHorizontal) {
@@ -22071,20 +22372,11 @@ var SliderComponent = React62__namespace.forwardRef(
         const newValue = snap(coerce(rawValue));
         handleValueChange(newValue);
       },
-      [
-        coerce,
-        disabled,
-        handleValueChange,
-        isHorizontal,
-        max,
-        min,
-        snap,
-        trackSize
-      ]
+      [coerce, disabled, handleValueChange, isHorizontal, max, min, snap, size]
     );
     const id = React62__namespace.useId();
     const thumbId = `slider-thumb-${id}`;
-    const supportsInsetIcon = !isCentered && SliderTokens.trackSizes[trackSize] >= 40;
+    const supportsInsetIcon = !isCentered && SliderTokens.trackSizes[size] >= 40;
     const hasAnyInsetIcon = !!(insetIcon || insetIconTrailing);
     if (hasAnyInsetIcon && !supportsInsetIcon) {
       console.warn(
@@ -22107,7 +22399,7 @@ var SliderComponent = React62__namespace.forwardRef(
             SliderTrack,
             {
               percent,
-              trackSize,
+              size,
               trackShape,
               orientation,
               isCentered,
@@ -22135,7 +22427,7 @@ var SliderComponent = React62__namespace.forwardRef(
               step,
               disabled,
               orientation,
-              trackSize,
+              size,
               variant,
               showValueIndicator,
               trackRef,
@@ -22924,39 +23216,7 @@ var typographyVariants = classVarianceAuthority.cva("m-0 p-0 text-m3-on-surface"
       "label-sm": "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
       "body-lg": "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
       "body-md": "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
-      "body-sm": "text-[12px] leading-[16px] font-normal tracking-[0.4px]",
-      // Full hyphenated aliases
-      "display-large": "text-[57px] leading-[64px] font-normal tracking-[-0.25px]",
-      "display-medium": "text-[45px] leading-[52px] font-normal tracking-[0px]",
-      "display-small": "text-[36px] leading-[44px] font-normal tracking-[0px]",
-      "headline-large": "text-[32px] leading-[40px] font-normal tracking-[0px]",
-      "headline-medium": "text-[28px] leading-[36px] font-normal tracking-[0px]",
-      "headline-small": "text-[24px] leading-[32px] font-normal tracking-[0px]",
-      "title-large": "text-[22px] leading-[28px] font-normal tracking-[0px]",
-      "title-medium": "text-[16px] leading-[24px] font-medium tracking-[0.15px]",
-      "title-small": "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
-      "label-large": "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
-      "label-medium": "text-[12px] leading-[16px] font-medium tracking-[0.5px]",
-      "label-small": "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
-      "body-large": "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
-      "body-medium": "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
-      "body-small": "text-[12px] leading-[16px] font-normal tracking-[0.4px]",
-      // CamelCase aliases
-      displayLarge: "text-[57px] leading-[64px] font-normal tracking-[-0.25px]",
-      displayMedium: "text-[45px] leading-[52px] font-normal tracking-[0px]",
-      displaySmall: "text-[36px] leading-[44px] font-normal tracking-[0px]",
-      headlineLarge: "text-[32px] leading-[40px] font-normal tracking-[0px]",
-      headlineMedium: "text-[28px] leading-[36px] font-normal tracking-[0px]",
-      headlineSmall: "text-[24px] leading-[32px] font-normal tracking-[0px]",
-      titleLarge: "text-[22px] leading-[28px] font-normal tracking-[0px]",
-      titleMedium: "text-[16px] leading-[24px] font-medium tracking-[0.15px]",
-      titleSmall: "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
-      labelLarge: "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
-      labelMedium: "text-[12px] leading-[16px] font-medium tracking-[0.5px]",
-      labelSmall: "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
-      bodyLarge: "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
-      bodyMedium: "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
-      bodySmall: "text-[12px] leading-[16px] font-normal tracking-[0.4px]"
+      "body-sm": "text-[12px] leading-[16px] font-normal tracking-[0.4px]"
     }
   },
   defaultVariants: {
@@ -24334,7 +24594,7 @@ var FloatingToolbarWithFabBase = React62__namespace.forwardRef(
       fabPosition = orientation === "horizontal" ? "end" : "bottom",
       animationDuration = 0.3,
       scrollBehavior,
-      fabSize = "default",
+      fabSize = "sm",
       className,
       style
     } = _b, props = __objRest(_b, [
@@ -24354,7 +24614,7 @@ var FloatingToolbarWithFabBase = React62__namespace.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
     });
@@ -24493,7 +24753,7 @@ var ToolbarIconButton = React62__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       emphasis = "standard",
-      toolbarSize = "default",
+      width = "default",
       selected,
       asChild,
       className,
@@ -24501,7 +24761,7 @@ var ToolbarIconButton = React62__namespace.forwardRef(
       whileTap
     } = _b, props = __objRest(_b, [
       "emphasis",
-      "toolbarSize",
+      "width",
       "selected",
       "asChild",
       "className",
@@ -24509,7 +24769,7 @@ var ToolbarIconButton = React62__namespace.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",
@@ -25495,6 +25755,7 @@ exports.FABPosition = FABPosition;
 exports.FAST_EFFECTS_TRANSITION = FAST_EFFECTS_TRANSITION;
 exports.FAST_SPATIAL_SPRING = FAST_SPATIAL_SPRING;
 exports.FLOAT_PI = FLOAT_PI;
+exports.FadingBlurMask = FadingBlurMask;
 exports.FilledSplitButtonLeading = FilledSplitButtonLeading;
 exports.FilledSplitButtonTrailing = FilledSplitButtonTrailing;
 exports.FilledSplitButtonTrailingUncheckable = FilledSplitButtonTrailingUncheckable;