@bug-on/m3-expressive 1.2.7 → 1.3.1

package/dist/forms.d.mts

@@ -1,8 +1,9 @@
-import { S as SliderThumbProps } from './text-field-DWC7qOvp.mjs';
-export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, k as Slider, l as SliderColors, m as SliderOrientation, n as SliderProps, o as SliderTokens, p as SliderTrackSize, q as SliderVariant, r as Switch, s as SwitchColors, t as SwitchProps, u as SwitchTokens, T as TextField, v as TextFieldHandle, w as TextFieldInputType, x as TextFieldProps, y as TextFieldTrailingIconMode, z as TextFieldVariant, A as TriStateCheckbox, B as TriStateCheckboxProps } from './text-field-DWC7qOvp.mjs';
+import { S as SliderThumbProps } from './text-field-Ear3hCSq.mjs';
+export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, k as Slider, l as SliderColors, m as SliderOrientation, n as SliderProps, o as SliderTokens, p as SliderTrackSize, q as SliderVariant, r as Switch, s as SwitchColors, t as SwitchProps, u as SwitchTokens, T as TextField, v as TextFieldHandle, w as TextFieldInputType, x as TextFieldProps, y as TextFieldTrailingIconMode, z as TextFieldVariant, A as TriStateCheckbox, B as TriStateCheckboxProps } from './text-field-Ear3hCSq.mjs';
 import * as React from 'react';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
+import './md3-D0_Z7IXj.mjs';
 
 /**
  * @file slider-thumb.tsx

package/dist/forms.d.ts

@@ -1,8 +1,9 @@
-import { S as SliderThumbProps } from './text-field-DWC7qOvp.js';
-export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, k as Slider, l as SliderColors, m as SliderOrientation, n as SliderProps, o as SliderTokens, p as SliderTrackSize, q as SliderVariant, r as Switch, s as SwitchColors, t as SwitchProps, u as SwitchTokens, T as TextField, v as TextFieldHandle, w as TextFieldInputType, x as TextFieldProps, y as TextFieldTrailingIconMode, z as TextFieldVariant, A as TriStateCheckbox, B as TriStateCheckboxProps } from './text-field-DWC7qOvp.js';
+import { S as SliderThumbProps } from './text-field-CiOmDM_8.js';
+export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, k as Slider, l as SliderColors, m as SliderOrientation, n as SliderProps, o as SliderTokens, p as SliderTrackSize, q as SliderVariant, r as Switch, s as SwitchColors, t as SwitchProps, u as SwitchTokens, T as TextField, v as TextFieldHandle, w as TextFieldInputType, x as TextFieldProps, y as TextFieldTrailingIconMode, z as TextFieldVariant, A as TriStateCheckbox, B as TriStateCheckboxProps } from './text-field-CiOmDM_8.js';
 import * as React from 'react';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
+import './md3-D0_Z7IXj.js';
 
 /**
  * @file slider-thumb.tsx

package/dist/forms.js

@@ -1234,26 +1234,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
   },
   /**
@@ -1298,9 +1298,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
   },
   /**
@@ -1334,14 +1334,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 = {
@@ -1360,11 +1360,11 @@ var ValueIndicator = React4__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,
@@ -1415,7 +1415,7 @@ var SliderThumb = React4__namespace.memo(function SliderThumb2({
   onValueChangeEnd,
   formatValue,
   thumbId,
-  trackSize,
+  size,
   variant,
   zIndex = 1,
   "aria-label": ariaLabel,
@@ -1424,10 +1424,7 @@ var SliderThumb = React4__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))`
@@ -1460,7 +1457,7 @@ var SliderThumb = React4__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;
@@ -1477,7 +1474,7 @@ var SliderThumb = React4__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 = React4__namespace.useCallback(
     (e) => {
@@ -1563,7 +1560,7 @@ var SliderThumb = React4__namespace.memo(function SliderThumb2({
             orientation,
             formatValue,
             prefersReduced,
-            trackSize
+            size
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1596,11 +1593,11 @@ var SliderThumb = React4__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"
             }), {
@@ -1615,7 +1612,7 @@ var SliderThumb = React4__namespace.memo(function SliderThumb2({
 var RangeTrack = React4__namespace.memo(function RangeTrack2({
   startPercent,
   endPercent,
-  trackSize,
+  size,
   orientation,
   variant,
   disabled,
@@ -1627,22 +1624,22 @@ var RangeTrack = React4__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`;
@@ -1673,7 +1670,7 @@ var RangeTrack = React4__namespace.memo(function RangeTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: leadingWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: inactiveTrack,
                 opacity: disabled ? 0.38 : 1,
                 borderTopLeftRadius: outerR,
@@ -1693,7 +1690,7 @@ var RangeTrack = React4__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,
@@ -1713,7 +1710,7 @@ var RangeTrack = React4__namespace.memo(function RangeTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: trailingWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: inactiveTrack,
                 opacity: disabled ? 0.38 : 1,
                 borderTopLeftRadius: innerR,
@@ -1735,7 +1732,7 @@ var RangeTrack = React4__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%",
@@ -1750,7 +1747,7 @@ var RangeTrack = React4__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`;
@@ -1781,7 +1778,7 @@ var RangeTrack = React4__namespace.memo(function RangeTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: leadingHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: inactiveTrack,
               opacity: disabled ? 0.38 : 1,
               borderBottomLeftRadius: outerR,
@@ -1801,7 +1798,7 @@ var RangeTrack = React4__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,
@@ -1821,7 +1818,7 @@ var RangeTrack = React4__namespace.memo(function RangeTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: trailingHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: inactiveTrack,
               opacity: disabled ? 0.38 : 1,
               borderTopLeftRadius: outerR,
@@ -1843,7 +1840,7 @@ var RangeTrack = React4__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%",
@@ -1867,7 +1864,7 @@ var RangeSliderComponent = React4__namespace.forwardRef(
     max = 100,
     step = 0,
     orientation = "horizontal",
-    trackSize = "m",
+    size = "md",
     trackShape = "md3",
     variant = "primary",
     disabled = false,
@@ -1939,7 +1936,7 @@ var RangeSliderComponent = React4__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) {
@@ -1971,7 +1968,7 @@ var RangeSliderComponent = React4__namespace.forwardRef(
         min,
         snap,
         startValue,
-        trackSize
+        size
       ]
     );
     const id = React4__namespace.useId();
@@ -1992,7 +1989,7 @@ var RangeSliderComponent = React4__namespace.forwardRef(
             {
               startPercent,
               endPercent,
-              trackSize,
+              size,
               trackShape,
               orientation,
               variant,
@@ -2014,7 +2011,7 @@ var RangeSliderComponent = React4__namespace.forwardRef(
               step,
               disabled,
               orientation,
-              trackSize,
+              size,
               variant,
               showValueIndicator,
               trackRef,
@@ -2036,7 +2033,7 @@ var RangeSliderComponent = React4__namespace.forwardRef(
               step,
               disabled,
               orientation,
-              trackSize,
+              size,
               variant,
               showValueIndicator,
               trackRef,
@@ -2099,13 +2096,13 @@ var InsetIcon = React4__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})`;
@@ -2166,7 +2163,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,
@@ -2189,7 +2186,7 @@ function Ticks({
 }
 var SliderTrack = React4__namespace.memo(function SliderTrack2({
   percent,
-  trackSize,
+  size,
   orientation,
   variant,
   isCentered,
@@ -2208,15 +2205,15 @@ var SliderTrack = React4__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`;
@@ -2234,8 +2231,8 @@ var SliderTrack = React4__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;
@@ -2270,7 +2267,7 @@ var SliderTrack = React4__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`;
@@ -2295,7 +2292,7 @@ var SliderTrack = React4__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))
@@ -2314,7 +2311,7 @@ var SliderTrack = React4__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))
@@ -2337,7 +2334,7 @@ var SliderTrack = React4__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))
@@ -2358,7 +2355,7 @@ var SliderTrack = React4__namespace.memo(function SliderTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: centerActiveWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: activeColor,
                 opacity: disabled ? 0.38 : 1
               }, allInnerRadius(innerR))
@@ -2379,7 +2376,7 @@ var SliderTrack = React4__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))
@@ -2400,7 +2397,7 @@ var SliderTrack = React4__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))
@@ -2421,7 +2418,7 @@ var SliderTrack = React4__namespace.memo(function SliderTrack2({
                 top: "50%",
                 transform: "translateY(-50%)",
                 width: centerActiveWidth,
-                height: size,
+                height: trackPixelSize,
                 backgroundColor: activeColor,
                 opacity: disabled ? 0.38 : 1
               }, allInnerRadius(innerR))
@@ -2442,7 +2439,7 @@ var SliderTrack = React4__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))
@@ -2486,8 +2483,8 @@ var SliderTrack = React4__namespace.memo(function SliderTrack2({
               isOnActiveSegment: leadingOnActive,
               position: leadingOnActive ? leadingActiveLeft : leadingInactiveLeft,
               orientation,
-              trackSize: size,
-              trackSizeToken: trackSize,
+              trackSize: trackPixelSize,
+              sizeToken: size,
               disabled,
               variant,
               prefersReduced
@@ -2501,8 +2498,8 @@ var SliderTrack = React4__namespace.memo(function SliderTrack2({
               isOnActiveSegment: trailingOnActive,
               position: trailingOnActive ? trailingActiveLeft : trailingInactiveLeft,
               orientation,
-              trackSize: size,
-              trackSizeToken: trackSize,
+              trackSize: trackPixelSize,
+              sizeToken: size,
               disabled,
               variant,
               prefersReduced
@@ -2530,7 +2527,7 @@ var SliderTrack = React4__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))
@@ -2549,7 +2546,7 @@ var SliderTrack = React4__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))
@@ -2572,7 +2569,7 @@ var SliderTrack = React4__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))
@@ -2593,7 +2590,7 @@ var SliderTrack = React4__namespace.memo(function SliderTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: centerActiveHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: activeColor,
               opacity: disabled ? 0.38 : 1
             }, allInnerRadius(innerR))
@@ -2614,7 +2611,7 @@ var SliderTrack = React4__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))
@@ -2635,7 +2632,7 @@ var SliderTrack = React4__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))
@@ -2656,7 +2653,7 @@ var SliderTrack = React4__namespace.memo(function SliderTrack2({
               left: "50%",
               transform: "translateX(-50%)",
               height: centerActiveHeight,
-              width: size,
+              width: trackPixelSize,
               backgroundColor: activeColor,
               opacity: disabled ? 0.38 : 1
             }, allInnerRadius(innerR))
@@ -2677,7 +2674,7 @@ var SliderTrack = React4__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))
@@ -2721,8 +2718,8 @@ var SliderTrack = React4__namespace.memo(function SliderTrack2({
             isOnActiveSegment: leadingOnActive,
             position: leadingOnActive ? leadingActiveLeft : leadingInactiveLeft,
             orientation,
-            trackSize: size,
-            trackSizeToken: trackSize,
+            trackSize: trackPixelSize,
+            sizeToken: size,
             disabled,
             variant,
             prefersReduced
@@ -2736,8 +2733,8 @@ var SliderTrack = React4__namespace.memo(function SliderTrack2({
             isOnActiveSegment: trailingOnActive,
             position: trailingOnActive ? trailingActiveLeft : trailingInactiveLeft,
             orientation,
-            trackSize: size,
-            trackSizeToken: trackSize,
+            trackSize: trackPixelSize,
+            sizeToken: size,
             disabled,
             variant,
             prefersReduced
@@ -2758,7 +2755,7 @@ var SliderComponent = React4__namespace.forwardRef(
     max = 100,
     step = 0,
     orientation = "horizontal",
-    trackSize = "m",
+    size = "md",
     trackShape = "md3",
     variant = "primary",
     isCentered = false,
@@ -2812,7 +2809,7 @@ var SliderComponent = React4__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) {
@@ -2827,20 +2824,11 @@ var SliderComponent = React4__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 = React4__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(
@@ -2863,7 +2851,7 @@ var SliderComponent = React4__namespace.forwardRef(
             SliderTrack,
             {
               percent,
-              trackSize,
+              size,
               trackShape,
               orientation,
               isCentered,
@@ -2891,7 +2879,7 @@ var SliderComponent = React4__namespace.forwardRef(
               step,
               disabled,
               orientation,
-              trackSize,
+              size,
               variant,
               showValueIndicator,
               trackRef,