@multiplatform.one/components 6.4.3 → 6.7.0

package/dist/esm/Carousel/index.native.js

@@ -49,7 +49,6 @@ var ArrowButton = styled(View, {
 });
 var ArrowVisual = styled(View, {
   name: "CarouselArrowVisual",
-  borderRadius: 1e3,
   backgroundColor: "$background",
   alignItems: "center",
   justifyContent: "center",
@@ -73,8 +72,8 @@ function Carousel(param) {
     onSlideChange,
     initialSlide = 0
   } = param;
-  var _ref;
-  var _getTokens_size_knobProps_sizeToken, _getTokens_size;
+  var _ref, _ref1;
+  var _getTokens_space_gap, _getTokens_space, _getTokens_size_knobProps_sizeToken, _getTokens_size;
   var {
     t
   } = useTranslation();
@@ -83,24 +82,26 @@ function Carousel(param) {
     control
   } = useResolvedKnobs();
   var gap = gapProp !== null && gapProp !== void 0 ? gapProp : knobProps.gap.gap;
-  var arrowSize = (_ref = (_getTokens_size = getTokens().size) === null || _getTokens_size === void 0 ? void 0 : (_getTokens_size_knobProps_sizeToken = _getTokens_size[knobProps.sizeToken]) === null || _getTokens_size_knobProps_sizeToken === void 0 ? void 0 : _getTokens_size_knobProps_sizeToken.val) !== null && _ref !== void 0 ? _ref : 40;
+  var gapPx = typeof gap === "number" ? gap : (_ref = (_getTokens_space = getTokens().space) === null || _getTokens_space === void 0 ? void 0 : (_getTokens_space_gap = _getTokens_space[gap]) === null || _getTokens_space_gap === void 0 ? void 0 : _getTokens_space_gap.val) !== null && _ref !== void 0 ? _ref : 0;
+  var arrowSize = (_ref1 = (_getTokens_size = getTokens().size) === null || _getTokens_size === void 0 ? void 0 : (_getTokens_size_knobProps_sizeToken = _getTokens_size[knobProps.sizeToken]) === null || _getTokens_size_knobProps_sizeToken === void 0 ? void 0 : _getTokens_size_knobProps_sizeToken.val) !== null && _ref1 !== void 0 ? _ref1 : 40;
   var arrowGlyphSize = Math.round(arrowSize / 2);
+  var arrowRadius = knobProps.pointy ? 0 : 1e3;
   var arrowTargetSize = Math.max(arrowSize, MIN_PRESS_TARGET);
   var arrowEdgeInset = Math.max(0, 8 - Math.round((arrowTargetSize - arrowSize) / 2));
   var [activeIndex, setActiveIndex] = useState(initialSlide);
   var trackRef = useRef(null);
   var slideCount = Children.count(children);
-  var slideWidthRef = useRef(0);
+  var [slideWidth, setSlideWidth] = useState(0);
   var autoPlayRef = useRef(null);
   var scrollToSlide = useCallback(function (index) {
     if (!trackRef.current) return;
     if (index < 0 || index >= slideCount) return;
-    var offset = index * slideWidthRef.current;
+    var offset = index * (slideWidth + gapPx);
     trackRef.current.scrollTo({
       x: offset,
       animated: true
     });
-  }, [slideCount]);
+  }, [slideCount, slideWidth, gapPx]);
   var goToSlide = useCallback(function (index) {
     var targetIndex = index;
     if (loop) {
@@ -121,14 +122,13 @@ function Carousel(param) {
   }, [activeIndex, goToSlide]);
   var handleScroll = useCallback(function (event) {
     var scrollX = event.nativeEvent.contentOffset.x;
-    var width = slideWidthRef.current;
-    if (!width) return;
-    var newIndex = Math.round(scrollX / width);
+    if (!slideWidth) return;
+    var newIndex = Math.round(scrollX / (slideWidth + gapPx));
     if (newIndex !== activeIndex && newIndex >= 0 && newIndex < slideCount) {
       setActiveIndex(newIndex);
       onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(newIndex);
     }
-  }, [activeIndex, slideCount, onSlideChange]);
+  }, [activeIndex, slideCount, onSlideChange, slideWidth, gapPx]);
   useEffect(function () {
     if (autoPlay > 0) {
       autoPlayRef.current = setInterval(function () {
@@ -141,11 +141,16 @@ function Carousel(param) {
       };
     }
   }, [autoPlay, goNext]);
+  var activeIndexRef = useRef(activeIndex);
+  activeIndexRef.current = activeIndex;
   useEffect(function () {
-    if (initialSlide > 0) {
-      scrollToSlide(initialSlide);
-    }
-  }, [initialSlide, scrollToSlide]);
+    if (!slideWidth || slideCount === 0 || !trackRef.current) return;
+    var index = Math.max(0, Math.min(activeIndexRef.current, slideCount - 1));
+    trackRef.current.scrollTo({
+      x: index * (slideWidth + gapPx),
+      animated: false
+    });
+  }, [slideWidth, gapPx, slideCount]);
   var canGoPrev = loop || activeIndex > 0;
   var canGoNext = loop || activeIndex < slideCount - 1;
   var isRTL = useDirection() === "rtl";
@@ -166,16 +171,26 @@ function Carousel(param) {
         onScroll: handleScroll,
         scrollEventThrottle: 16,
         onLayout: function onLayout(e) {
-          slideWidthRef.current = e.nativeEvent.layout.width;
+          return setSlideWidth(e.nativeEvent.layout.width);
+        },
+        ...{
+          dataSet: {
+            carouselTrack: "true"
+          }
         },
         children: /* @__PURE__ */_jsx(XStack, {
           gap,
           children: Children.map(children, function (child, index) {
             return /* @__PURE__ */_jsx(CarouselSlide, {
-              width: "100%",
+              // Measured-viewport width (LC-62), never a percentage; slides
+              // stay content-sized only for the pre-measure frame.
+              width: slideWidth > 0 ? slideWidth : void 0,
               style: {
                 scrollSnapAlign: "start"
               },
+              ...{
+                "data-carousel-slide": index
+              },
               children: child
             }, index);
           })
@@ -208,6 +223,7 @@ function Carousel(param) {
           children: /* @__PURE__ */_jsx(ArrowVisual, {
             width: arrowSize,
             height: arrowSize,
+            borderRadius: arrowRadius,
             children: /* @__PURE__ */_jsx(PrevGlyph, {
               size: arrowGlyphSize
             })
@@ -237,6 +253,7 @@ function Carousel(param) {
           children: /* @__PURE__ */_jsx(ArrowVisual, {
             width: arrowSize,
             height: arrowSize,
+            borderRadius: arrowRadius,
             children: /* @__PURE__ */_jsx(NextGlyph, {
               size: arrowGlyphSize
             })

package/dist/esm/Carousel/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useState","useRef","useCallback","useEffect","Children","useTranslation","CaretLeftIcon","CaretRightIcon","zIndex","MIN_PRESS_TARGET","useResolvedKnobs","View","XStack","ScrollView","getTokens","styled","DotIndicator","useDirection","CarouselContainer","name","position","width","overflow","CarouselSlide","flexShrink","ArrowButton","top","transform","translateY","localTop","alignItems","justifyContent","backgroundColor","cursor","opacity","hoverStyle","scale","pressStyle","variants","disabled","true","ArrowVisual","borderRadius","shadowColor","shadowRadius","shadowOpacity","DotsWrapper","paddingVertical","Carousel","param","children","showArrows","showDots","autoPlay","loop","gap","gapProp","onSlideChange","initialSlide","_ref","_getTokens_size_knobProps_sizeToken","_getTokens_size","t","knobProps","control","arrowSize","size","sizeToken","val","arrowGlyphSize","Math","round","arrowTargetSize","max","arrowEdgeInset","activeIndex","setActiveIndex","trackRef","slideCount","count","slideWidthRef","autoPlayRef","scrollToSlide","index","current","offset","scrollTo","x","animated","goToSlide","targetIndex","min","goNext","goPrev","handleScroll","event","scrollX","nativeEvent","contentOffset","newIndex","setInterval","clearInterval","canGoPrev","canGoNext","isRTL","prevSide","nextSide","PrevGlyph","NextGlyph","containerRadius","ref","horizontal","showsHorizontalScrollIndicator","style","scrollSnapType","onScroll","scrollEventThrottle","onLayout","e","layout","map","child","scrollSnapAlign","height","transition","onPress","role","tabIndex","focusVisibleStyle","focusVisibleKnobProps","onKeyDown"],"sources":["../../../src/Carousel/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useState","useRef","useCallback","useEffect","Children","useTranslation","CaretLeftIcon","CaretRightIcon","zIndex","MIN_PRESS_TARGET","useResolvedKnobs","View","XStack","ScrollView","getTokens","styled","DotIndicator","useDirection","CarouselContainer","name","position","width","overflow","CarouselSlide","flexShrink","ArrowButton","top","transform","translateY","localTop","alignItems","justifyContent","backgroundColor","cursor","opacity","hoverStyle","scale","pressStyle","variants","disabled","true","ArrowVisual","shadowColor","shadowRadius","shadowOpacity","DotsWrapper","paddingVertical","Carousel","param","children","showArrows","showDots","autoPlay","loop","gap","gapProp","onSlideChange","initialSlide","_ref","_ref1","_getTokens_space_gap","_getTokens_space","_getTokens_size_knobProps_sizeToken","_getTokens_size","t","knobProps","control","gapPx","space","val","arrowSize","size","sizeToken","arrowGlyphSize","Math","round","arrowRadius","pointy","arrowTargetSize","max","arrowEdgeInset","activeIndex","setActiveIndex","trackRef","slideCount","count","slideWidth","setSlideWidth","autoPlayRef","scrollToSlide","index","current","offset","scrollTo","x","animated","goToSlide","targetIndex","min","goNext","goPrev","handleScroll","event","scrollX","nativeEvent","contentOffset","newIndex","setInterval","clearInterval","activeIndexRef","canGoPrev","canGoNext","isRTL","prevSide","nextSide","PrevGlyph","NextGlyph","containerRadius","ref","horizontal","showsHorizontalScrollIndicator","style","scrollSnapType","onScroll","scrollEventThrottle","onLayout","e","layout","dataSet","carouselTrack","map","child","scrollSnapAlign","height","transition","onPress"],"sources":["../../../src/Carousel/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/DotIndicator/index.mjs

@@ -1,4 +1,5 @@
-import { MIN_PRESS_TARGET, useResolvedKnobs } from "@multiplatform.one/theme";
+import { MIN_PRESS_TARGET, radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import { CheckIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { View, XStack, getTokens, styled } from "tamagui";
 import { componentColors } from "../componentColors.mjs";
@@ -26,11 +27,36 @@ const dotGeometryMap = {
     active: 30
   }
 };
+const CHECK_MIN_DOT = 8;
+function sizePx(value, fallback) {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const token = getTokens().size?.[value]?.val;
+    if (typeof token === "number") return token;
+  }
+  return fallback;
+}
 const DotsContainer = styled(XStack, {
   name: "DotIndicator",
   alignItems: "center",
   justifyContent: "center",
-  gap: "$2"
+  gap: "$2",
+  variants: {
+    // A rail seats the strip on a filled capsule instead of the page. It is a
+    // variant of the strip rather than host chrome because the rail and the
+    // idle dot color are ONE decision: idle dots have to step up the ramp to
+    // stay visible on the rail's fill, and split across two files that pairing
+    // drifts (LC-16).
+    rail: {
+      true: {
+        backgroundColor: componentColors.interactive.background,
+        // R-PILL (D-09 / LC-60): the rail is a capsule at every radius value,
+        // like the dots it holds.
+        ...radiusClassProps("R-PILL", "DotIndicator rail"),
+        borderRadius: "$10"
+      }
+    }
+  }
 });
 const DotTarget = styled(View, {
   name: "DotTarget",
@@ -46,6 +72,13 @@ const DotTarget = styled(View, {
 });
 const Dot = styled(View, {
   name: "Dot",
+  // R-PILL (D-09 / LC-60): an ornamental dot is a circle at every radius
+  // value — the knob moves its size, never its shape — so it declares the
+  // class the `radius:none` sweep licenses it under.
+  ...radiusClassProps("R-PILL", "DotIndicator dot"),
+  // Centers the completion checkmark; inert for the empty dots.
+  alignItems: "center",
+  justifyContent: "center",
   borderRadius: 1e3,
   backgroundColor: componentColors.indicator.inactive,
   hoverStyle: {
@@ -59,31 +92,11 @@ const Dot = styled(View, {
         backgroundColor: componentColors.indicator.selected
       }
     },
-    variant: {
-      dots: {
-        width: 8,
-        height: 8
-      },
-      bars: {
-        width: 6,
-        height: 6
-      },
-      pills: {
-        width: 8,
-        height: 8
-      }
-    },
-    activeVariant: {
-      dots: {
-        width: 24
-      },
-      bars: {
-        width: 24
-      },
-      pills: {
-        width: 24
-      }
-    },
+    // No `variant` geometry here: the mark's width/height are always passed
+    // explicitly from the one size channel below, so a per-variant pixel table
+    // on the styled component could only ever be a second, silently-losing
+    // definition of the same thing (it already disagreed with the scale at
+    // size knob `$3`, where a tick is 5px, not 6).
     disabled: {
       true: {
         opacity: 0.5
@@ -97,7 +110,14 @@ function DotIndicator({
   onChange,
   variant = "dots",
   gap: gapProp,
-  disabled = false
+  disabled = false,
+  completedSteps,
+  idiom = "item",
+  rail = false,
+  dotSize,
+  activeDotSize,
+  transition,
+  dotStateAttribute = "data-dot-state"
 }) {
   const {
     t
@@ -107,18 +127,36 @@ function DotIndicator({
   } = useResolvedKnobs();
   const gap = gapProp ?? dotGapMap[knobProps.space] ?? "$2";
   const geometry = dotGeometryMap[knobProps.sizeToken] ?? dotGeometryMap.$4;
-  const itemSize = variant === "bars" ? geometry.bar : geometry.dot;
+  const isTick = variant === "bars";
+  const itemSize = sizePx(dotSize, isTick ? geometry.bar : geometry.dot);
+  const activeSize = sizePx(activeDotSize, geometry.active);
   const gapPx = typeof gap === "number" ? gap : getTokens().space?.[gap]?.val ?? 7;
   const slopX = Math.max(0, Math.floor((gapPx - 1) / 2));
-  const outsetY = Math.ceil((MIN_PRESS_TARGET - itemSize) / 2);
+  const outsetY = Math.max(0, Math.ceil((MIN_PRESS_TARGET - itemSize) / 2));
   const interactive = !disabled && !!onChange;
+  const isStep = idiom === "step";
+  const label = isStep ? t("Go to step {{number}}") : t("Go to item {{number}}");
+  const currentValue = isStep ? "step" : "true";
+  const motionStyle = transition ? {
+    transition: "width var(--mp-transition, 100ms) ease, height var(--mp-transition, 100ms) ease, background-color var(--mp-transition, 100ms) ease"
+  } : void 0;
   return /* @__PURE__ */jsx(DotsContainer, {
     gap,
+    rail,
+    ...(rail ? {
+      paddingHorizontal: knobProps.panelPadding.padding,
+      height: knobProps.sizeToken
+    } : void 0),
     children: Array.from({
       length: total
     }).map((_, index) => {
       const isActive = index === activeIndex;
-      const dotWidth = isActive ? geometry.active : itemSize;
+      const isCompleted = !isActive && !!completedSteps?.has(index);
+      const dotWidth = isActive ? activeSize : itemSize;
+      const restingFill = isCompleted ? componentColors.indicator.completed : rail ?
+      // Idle chrome steps up the ramp on a rail so the dot still
+      // separates from the capsule fill it sits on.
+      componentColors.indicator.track : componentColors.indicator.inactive;
       return /* @__PURE__ */jsx(DotTarget, {
         width: dotWidth + slopX * 2,
         minHeight: MIN_PRESS_TARGET,
@@ -126,11 +164,11 @@ function DotIndicator({
         marginVertical: -outsetY,
         cursor: interactive ? "pointer" : disabled ? "not-allowed" : "default",
         onPress: interactive ? () => onChange?.(index) : void 0,
-        "aria-label": withInterp(t("Go to item {{number}}"), {
+        "aria-label": withInterp(label, {
           number: index + 1
         }),
         ...(isActive ? {
-          "aria-current": "true"
+          "aria-current": currentValue
         } : void 0),
         ...(interactive ? {
           role: "button",
@@ -145,12 +183,31 @@ function DotIndicator({
           role: "button"
         } : void 0),
         children: /* @__PURE__ */jsx(Dot, {
-          variant,
           active: isActive,
-          activeVariant: isActive ? variant : void 0,
+          ...(isActive ? void 0 : {
+            backgroundColor: restingFill,
+            // A completed dot and a rail dot both hold their fill on
+            // hover: the neutral hover step is PALER than either, so
+            // the page-level hover would read as a dim.
+            ...(isCompleted || rail ? {
+              hoverStyle: {
+                backgroundColor: restingFill
+              }
+            } : void 0)
+          }),
           width: dotWidth,
           height: itemSize,
-          disabled
+          disabled,
+          transition,
+          style: motionStyle,
+          ...{
+            [dotStateAttribute]: isActive ? "active" : "idle"
+          },
+          children: isCompleted && !isTick && itemSize >= CHECK_MIN_DOT && /* @__PURE__ */jsx(CheckIcon, {
+            size: 8,
+            color: "white",
+            weight: "bold"
+          })
         })
       }, index);
     })

package/dist/esm/DotIndicator/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["MIN_PRESS_TARGET","useResolvedKnobs","useTranslation","View","XStack","getTokens","styled","componentColors","withInterp","jsx","dotGapMap","small","medium","large","dotGeometryMap","$3","dot","bar","active","$4","$5","DotsContainer","name","alignItems","justifyContent","gap","DotTarget","backgroundColor","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","Dot","borderRadius","indicator","inactive","hoverStyle","hover","variants","true","selected","variant","dots","width","height","bars","pills","activeVariant","disabled","opacity","DotIndicator","total","activeIndex","onChange","gapProp","t","knobProps","space","geometry","sizeToken","itemSize","gapPx","val","slopX","Math","max","floor","outsetY","ceil","interactive","children","Array","from","length","map","_","index","isActive","dotWidth","minHeight","marginHorizontal","marginVertical","cursor","onPress","number","role","tabIndex","onKeyDown","e","key","preventDefault"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["MIN_PRESS_TARGET","radiusClassProps","useResolvedKnobs","CheckIcon","useTranslation","View","XStack","getTokens","styled","componentColors","withInterp","jsx","dotGapMap","small","medium","large","dotGeometryMap","$3","dot","bar","active","$4","$5","CHECK_MIN_DOT","sizePx","value","fallback","token","size","val","DotsContainer","name","alignItems","justifyContent","gap","variants","rail","true","backgroundColor","interactive","background","borderRadius","DotTarget","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","Dot","indicator","inactive","hoverStyle","hover","selected","disabled","opacity","DotIndicator","total","activeIndex","onChange","variant","gapProp","completedSteps","idiom","dotSize","activeDotSize","transition","dotStateAttribute","t","knobProps","space","geometry","sizeToken","isTick","itemSize","activeSize","gapPx","slopX","Math","max","floor","outsetY","ceil","isStep","label","currentValue","motionStyle","paddingHorizontal","panelPadding","padding","height","children","Array","from","length","map","_","index","isActive","isCompleted","has","dotWidth","restingFill","completed","track","width","minHeight","marginHorizontal","marginVertical","cursor","onPress","number","role","tabIndex","onKeyDown","e","key","preventDefault","style","color","weight"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/DotIndicator/index.native.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MIN_PRESS_TARGET, useResolvedKnobs } from "@multiplatform.one/theme";
+import { MIN_PRESS_TARGET, radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import { CheckIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { View, XStack, getTokens, styled } from "tamagui";
 import { componentColors } from "../componentColors.native.js";
@@ -26,11 +27,37 @@ var dotGeometryMap = {
     active: 30
   }
 };
+var CHECK_MIN_DOT = 8;
+function sizePx(value, fallback) {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    var _getTokens_size_value, _getTokens_size;
+    var token = (_getTokens_size = getTokens().size) === null || _getTokens_size === void 0 ? void 0 : (_getTokens_size_value = _getTokens_size[value]) === null || _getTokens_size_value === void 0 ? void 0 : _getTokens_size_value.val;
+    if (typeof token === "number") return token;
+  }
+  return fallback;
+}
 var DotsContainer = styled(XStack, {
   name: "DotIndicator",
   alignItems: "center",
   justifyContent: "center",
-  gap: "$2"
+  gap: "$2",
+  variants: {
+    // A rail seats the strip on a filled capsule instead of the page. It is a
+    // variant of the strip rather than host chrome because the rail and the
+    // idle dot color are ONE decision: idle dots have to step up the ramp to
+    // stay visible on the rail's fill, and split across two files that pairing
+    // drifts (LC-16).
+    rail: {
+      true: {
+        backgroundColor: componentColors.interactive.background,
+        // R-PILL (D-09 / LC-60): the rail is a capsule at every radius value,
+        // like the dots it holds.
+        ...radiusClassProps("R-PILL", "DotIndicator rail"),
+        borderRadius: "$10"
+      }
+    }
+  }
 });
 var DotTarget = styled(View, {
   name: "DotTarget",
@@ -46,6 +73,13 @@ var DotTarget = styled(View, {
 });
 var Dot = styled(View, {
   name: "Dot",
+  // R-PILL (D-09 / LC-60): an ornamental dot is a circle at every radius
+  // value — the knob moves its size, never its shape — so it declares the
+  // class the `radius:none` sweep licenses it under.
+  ...radiusClassProps("R-PILL", "DotIndicator dot"),
+  // Centers the completion checkmark; inert for the empty dots.
+  alignItems: "center",
+  justifyContent: "center",
   borderRadius: 1e3,
   backgroundColor: componentColors.indicator.inactive,
   hoverStyle: {
@@ -59,31 +93,11 @@ var Dot = styled(View, {
         backgroundColor: componentColors.indicator.selected
       }
     },
-    variant: {
-      dots: {
-        width: 8,
-        height: 8
-      },
-      bars: {
-        width: 6,
-        height: 6
-      },
-      pills: {
-        width: 8,
-        height: 8
-      }
-    },
-    activeVariant: {
-      dots: {
-        width: 24
-      },
-      bars: {
-        width: 24
-      },
-      pills: {
-        width: 24
-      }
-    },
+    // No `variant` geometry here: the mark's width/height are always passed
+    // explicitly from the one size channel below, so a per-variant pixel table
+    // on the styled component could only ever be a second, silently-losing
+    // definition of the same thing (it already disagreed with the scale at
+    // size knob `$3`, where a tick is 5px, not 6).
     disabled: {
       true: {
         opacity: 0.5
@@ -98,7 +112,14 @@ function DotIndicator(param) {
     onChange,
     variant = "dots",
     gap: gapProp,
-    disabled = false
+    disabled = false,
+    completedSteps,
+    idiom = "item",
+    rail = false,
+    dotSize,
+    activeDotSize,
+    transition,
+    dotStateAttribute = "data-dot-state"
   } = param;
   var _ref, _dotGeometryMap_knobProps_sizeToken, _ref1;
   var _getTokens_space_gap, _getTokens_space;
@@ -110,18 +131,36 @@ function DotIndicator(param) {
   } = useResolvedKnobs();
   var gap = (_ref = gapProp !== null && gapProp !== void 0 ? gapProp : dotGapMap[knobProps.space]) !== null && _ref !== void 0 ? _ref : "$2";
   var geometry = (_dotGeometryMap_knobProps_sizeToken = dotGeometryMap[knobProps.sizeToken]) !== null && _dotGeometryMap_knobProps_sizeToken !== void 0 ? _dotGeometryMap_knobProps_sizeToken : dotGeometryMap.$4;
-  var itemSize = variant === "bars" ? geometry.bar : geometry.dot;
+  var isTick = variant === "bars";
+  var itemSize = sizePx(dotSize, isTick ? geometry.bar : geometry.dot);
+  var activeSize = sizePx(activeDotSize, geometry.active);
   var gapPx = typeof gap === "number" ? gap : (_ref1 = (_getTokens_space = getTokens().space) === null || _getTokens_space === void 0 ? void 0 : (_getTokens_space_gap = _getTokens_space[gap]) === null || _getTokens_space_gap === void 0 ? void 0 : _getTokens_space_gap.val) !== null && _ref1 !== void 0 ? _ref1 : 7;
   var slopX = Math.max(0, Math.floor((gapPx - 1) / 2));
-  var outsetY = Math.ceil((MIN_PRESS_TARGET - itemSize) / 2);
+  var outsetY = Math.max(0, Math.ceil((MIN_PRESS_TARGET - itemSize) / 2));
   var interactive = !disabled && !!onChange;
+  var isStep = idiom === "step";
+  var label = isStep ? t("Go to step {{number}}") : t("Go to item {{number}}");
+  var currentValue = isStep ? "step" : "true";
+  var motionStyle = transition ? {
+    transition: "width var(--mp-transition, 100ms) ease, height var(--mp-transition, 100ms) ease, background-color var(--mp-transition, 100ms) ease"
+  } : void 0;
   return /* @__PURE__ */_jsx(DotsContainer, {
     gap,
+    rail,
+    ...(rail ? {
+      paddingHorizontal: knobProps.panelPadding.padding,
+      height: knobProps.sizeToken
+    } : void 0),
     children: Array.from({
       length: total
     }).map(function (_, index) {
       var isActive = index === activeIndex;
-      var dotWidth = isActive ? geometry.active : itemSize;
+      var isCompleted = !isActive && !!(completedSteps === null || completedSteps === void 0 ? void 0 : completedSteps.has(index));
+      var dotWidth = isActive ? activeSize : itemSize;
+      var restingFill = isCompleted ? componentColors.indicator.completed : rail ?
+      // Idle chrome steps up the ramp on a rail so the dot still
+      // separates from the capsule fill it sits on.
+      componentColors.indicator.track : componentColors.indicator.inactive;
       return /* @__PURE__ */_jsx(DotTarget, {
         width: dotWidth + slopX * 2,
         minHeight: MIN_PRESS_TARGET,
@@ -131,11 +170,11 @@ function DotIndicator(param) {
         onPress: interactive ? function () {
           return onChange === null || onChange === void 0 ? void 0 : onChange(index);
         } : void 0,
-        "aria-label": withInterp(t("Go to item {{number}}"), {
+        "aria-label": withInterp(label, {
           number: index + 1
         }),
         ...(isActive ? {
-          "aria-current": "true"
+          "aria-current": currentValue
         } : void 0),
         ...(interactive ? {
           role: "button",
@@ -150,12 +189,31 @@ function DotIndicator(param) {
           role: "button"
         } : void 0),
         children: /* @__PURE__ */_jsx(Dot, {
-          variant,
           active: isActive,
-          activeVariant: isActive ? variant : void 0,
+          ...(isActive ? void 0 : {
+            backgroundColor: restingFill,
+            // A completed dot and a rail dot both hold their fill on
+            // hover: the neutral hover step is PALER than either, so
+            // the page-level hover would read as a dim.
+            ...(isCompleted || rail ? {
+              hoverStyle: {
+                backgroundColor: restingFill
+              }
+            } : void 0)
+          }),
           width: dotWidth,
           height: itemSize,
-          disabled
+          disabled,
+          transition,
+          style: motionStyle,
+          ...{
+            [dotStateAttribute]: isActive ? "active" : "idle"
+          },
+          children: isCompleted && !isTick && itemSize >= CHECK_MIN_DOT && /* @__PURE__ */_jsx(CheckIcon, {
+            size: 8,
+            color: "white",
+            weight: "bold"
+          })
         })
       }, index);
     })