@bug-on/m3-expressive 1.3.0 → 1.3.1

package/dist/forms.mjs

@@ -1212,26 +1212,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
   },
   /**
@@ -1276,9 +1276,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
   },
   /**
@@ -1312,14 +1312,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 = {
@@ -1338,11 +1338,11 @@ var ValueIndicator = React4.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__ */ jsx(AnimatePresence, { children: visible && /* @__PURE__ */ jsx(
     m.div,
@@ -1393,7 +1393,7 @@ var SliderThumb = React4.memo(function SliderThumb2({
   onValueChangeEnd,
   formatValue,
   thumbId,
-  trackSize,
+  size,
   variant,
   zIndex = 1,
   "aria-label": ariaLabel,
@@ -1402,10 +1402,7 @@ var SliderThumb = React4.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))`
@@ -1438,7 +1435,7 @@ var SliderThumb = React4.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;
@@ -1455,7 +1452,7 @@ var SliderThumb = React4.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 = React4.useCallback(
     (e) => {
@@ -1541,7 +1538,7 @@ var SliderThumb = React4.memo(function SliderThumb2({
             orientation,
             formatValue,
             prefersReduced,
-            trackSize
+            size
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1574,11 +1571,11 @@ var SliderThumb = React4.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"
             }), {
@@ -1593,7 +1590,7 @@ var SliderThumb = React4.memo(function SliderThumb2({
 var RangeTrack = React4.memo(function RangeTrack2({
   startPercent,
   endPercent,
-  trackSize,
+  size,
   orientation,
   variant,
   disabled,
@@ -1605,22 +1602,22 @@ var RangeTrack = React4.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`;
@@ -1651,7 +1648,7 @@ var RangeTrack = React4.memo(function RangeTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: leadingWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: inactiveTrack,
                 opacity: disabled ? 0.38 : 1,
                 borderTopLeftRadius: outerR,
@@ -1671,7 +1668,7 @@ var RangeTrack = React4.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,
@@ -1691,7 +1688,7 @@ var RangeTrack = React4.memo(function RangeTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: trailingWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: inactiveTrack,
                 opacity: disabled ? 0.38 : 1,
                 borderTopLeftRadius: innerR,
@@ -1713,7 +1710,7 @@ var RangeTrack = React4.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%",
@@ -1728,7 +1725,7 @@ var RangeTrack = React4.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`;
@@ -1759,7 +1756,7 @@ var RangeTrack = React4.memo(function RangeTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: leadingHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: inactiveTrack,
               opacity: disabled ? 0.38 : 1,
               borderBottomLeftRadius: outerR,
@@ -1779,7 +1776,7 @@ var RangeTrack = React4.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,
@@ -1799,7 +1796,7 @@ var RangeTrack = React4.memo(function RangeTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: trailingHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: inactiveTrack,
               opacity: disabled ? 0.38 : 1,
               borderTopLeftRadius: outerR,
@@ -1821,7 +1818,7 @@ var RangeTrack = React4.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%",
@@ -1845,7 +1842,7 @@ var RangeSliderComponent = React4.forwardRef(
     max = 100,
     step = 0,
     orientation = "horizontal",
-    trackSize = "m",
+    size = "md",
     trackShape = "md3",
     variant = "primary",
     disabled = false,
@@ -1917,7 +1914,7 @@ var RangeSliderComponent = React4.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) {
@@ -1949,7 +1946,7 @@ var RangeSliderComponent = React4.forwardRef(
         min,
         snap,
         startValue,
-        trackSize
+        size
       ]
     );
     const id = React4.useId();
@@ -1970,7 +1967,7 @@ var RangeSliderComponent = React4.forwardRef(
             {
               startPercent,
               endPercent,
-              trackSize,
+              size,
               trackShape,
               orientation,
               variant,
@@ -1992,7 +1989,7 @@ var RangeSliderComponent = React4.forwardRef(
               step,
               disabled,
               orientation,
-              trackSize,
+              size,
               variant,
               showValueIndicator,
               trackRef,
@@ -2014,7 +2011,7 @@ var RangeSliderComponent = React4.forwardRef(
               step,
               disabled,
               orientation,
-              trackSize,
+              size,
               variant,
               showValueIndicator,
               trackRef,
@@ -2077,13 +2074,13 @@ var InsetIcon = React4.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})`;
@@ -2144,7 +2141,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,
@@ -2167,7 +2164,7 @@ function Ticks({
 }
 var SliderTrack = React4.memo(function SliderTrack2({
   percent,
-  trackSize,
+  size,
   orientation,
   variant,
   isCentered,
@@ -2186,15 +2183,15 @@ var SliderTrack = React4.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`;
@@ -2212,8 +2209,8 @@ var SliderTrack = React4.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;
@@ -2248,7 +2245,7 @@ var SliderTrack = React4.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`;
@@ -2273,7 +2270,7 @@ var SliderTrack = React4.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))
@@ -2292,7 +2289,7 @@ var SliderTrack = React4.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))
@@ -2315,7 +2312,7 @@ var SliderTrack = React4.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))
@@ -2336,7 +2333,7 @@ var SliderTrack = React4.memo(function SliderTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: centerActiveWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: activeColor,
                 opacity: disabled ? 0.38 : 1
               }, allInnerRadius(innerR))
@@ -2357,7 +2354,7 @@ var SliderTrack = React4.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))
@@ -2378,7 +2375,7 @@ var SliderTrack = React4.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))
@@ -2399,7 +2396,7 @@ var SliderTrack = React4.memo(function SliderTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: centerActiveWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: activeColor,
                 opacity: disabled ? 0.38 : 1
               }, allInnerRadius(innerR))
@@ -2420,7 +2417,7 @@ var SliderTrack = React4.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))
@@ -2464,8 +2461,8 @@ var SliderTrack = React4.memo(function SliderTrack2({
               isOnActiveSegment: leadingOnActive,
               position: leadingOnActive ? leadingActiveLeft : leadingInactiveLeft,
               orientation,
-              trackSize: size,
-              trackSizeToken: trackSize,
+              trackSize: trackPixelSize,
+              sizeToken: size,
               disabled,
               variant,
               prefersReduced
@@ -2479,8 +2476,8 @@ var SliderTrack = React4.memo(function SliderTrack2({
               isOnActiveSegment: trailingOnActive,
               position: trailingOnActive ? trailingActiveLeft : trailingInactiveLeft,
               orientation,
-              trackSize: size,
-              trackSizeToken: trackSize,
+              trackSize: trackPixelSize,
+              sizeToken: size,
               disabled,
               variant,
               prefersReduced
@@ -2508,7 +2505,7 @@ var SliderTrack = React4.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))
@@ -2527,7 +2524,7 @@ var SliderTrack = React4.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))
@@ -2550,7 +2547,7 @@ var SliderTrack = React4.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))
@@ -2571,7 +2568,7 @@ var SliderTrack = React4.memo(function SliderTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: centerActiveHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: activeColor,
               opacity: disabled ? 0.38 : 1
             }, allInnerRadius(innerR))
@@ -2592,7 +2589,7 @@ var SliderTrack = React4.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))
@@ -2613,7 +2610,7 @@ var SliderTrack = React4.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))
@@ -2634,7 +2631,7 @@ var SliderTrack = React4.memo(function SliderTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: centerActiveHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: activeColor,
               opacity: disabled ? 0.38 : 1
             }, allInnerRadius(innerR))
@@ -2655,7 +2652,7 @@ var SliderTrack = React4.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))
@@ -2699,8 +2696,8 @@ var SliderTrack = React4.memo(function SliderTrack2({
             isOnActiveSegment: leadingOnActive,
             position: leadingOnActive ? leadingActiveLeft : leadingInactiveLeft,
             orientation,
-            trackSize: size,
-            trackSizeToken: trackSize,
+            trackSize: trackPixelSize,
+            sizeToken: size,
             disabled,
             variant,
             prefersReduced
@@ -2714,8 +2711,8 @@ var SliderTrack = React4.memo(function SliderTrack2({
             isOnActiveSegment: trailingOnActive,
             position: trailingOnActive ? trailingActiveLeft : trailingInactiveLeft,
             orientation,
-            trackSize: size,
-            trackSizeToken: trackSize,
+            trackSize: trackPixelSize,
+            sizeToken: size,
             disabled,
             variant,
             prefersReduced
@@ -2736,7 +2733,7 @@ var SliderComponent = React4.forwardRef(
     max = 100,
     step = 0,
     orientation = "horizontal",
-    trackSize = "m",
+    size = "md",
     trackShape = "md3",
     variant = "primary",
     isCentered = false,
@@ -2790,7 +2787,7 @@ var SliderComponent = React4.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) {
@@ -2805,20 +2802,11 @@ var SliderComponent = React4.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 = React4.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(
@@ -2841,7 +2829,7 @@ var SliderComponent = React4.forwardRef(
             SliderTrack,
             {
               percent,
-              trackSize,
+              size,
               trackShape,
               orientation,
               isCentered,
@@ -2869,7 +2857,7 @@ var SliderComponent = React4.forwardRef(
               step,
               disabled,
               orientation,
-              trackSize,
+              size,
               variant,
               showValueIndicator,
               trackRef,