@multiplatform.one/components 6.4.3 → 6.7.0

package/dist/jsx/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/jsx/DotIndicator/index.native.js

@@ -29,6 +29,7 @@ __export(DotIndicator_exports, {
 module.exports = __toCommonJS(DotIndicator_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
 var import_react_i18next = require("react-i18next");
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.native.js");
@@ -55,11 +56,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 = (0, import_tamagui.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 = (0, import_tamagui.styled)(import_tamagui.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: import_componentColors.componentColors.interactive.background,
+        // R-PILL (D-09 / LC-60): the rail is a capsule at every radius value,
+        // like the dots it holds.
+        ...(0, import_theme.radiusClassProps)("R-PILL", "DotIndicator rail"),
+        borderRadius: "$10"
+      }
+    }
+  }
 });
 var DotTarget = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "DotTarget",
@@ -75,6 +102,13 @@ var DotTarget = (0, import_tamagui.styled)(import_tamagui.View, {
 });
 var Dot = (0, import_tamagui.styled)(import_tamagui.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.
+  ...(0, import_theme.radiusClassProps)("R-PILL", "DotIndicator dot"),
+  // Centers the completion checkmark; inert for the empty dots.
+  alignItems: "center",
+  justifyContent: "center",
   borderRadius: 1e3,
   backgroundColor: import_componentColors.componentColors.indicator.inactive,
   hoverStyle: {
@@ -88,31 +122,11 @@ var Dot = (0, import_tamagui.styled)(import_tamagui.View, {
         backgroundColor: import_componentColors.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
@@ -127,7 +141,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;
@@ -139,18 +160,36 @@ function DotIndicator(param) {
   } = (0, import_theme.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 = (0, import_tamagui.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((import_theme.MIN_PRESS_TARGET - itemSize) / 2);
+  var outsetY = Math.max(0, Math.ceil((import_theme.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__ */(0, import_jsx_runtime.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 ? import_componentColors.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.
+      import_componentColors.componentColors.indicator.track : import_componentColors.componentColors.indicator.inactive;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DotTarget, {
         width: dotWidth + slopX * 2,
         minHeight: import_theme.MIN_PRESS_TARGET,
@@ -160,11 +199,11 @@ function DotIndicator(param) {
         onPress: interactive ? function () {
           return onChange === null || onChange === void 0 ? void 0 : onChange(index);
         } : void 0,
-        "aria-label": (0, import_t.withInterp)(t("Go to item {{number}}"), {
+        "aria-label": (0, import_t.withInterp)(label, {
           number: index + 1
         }),
         ...(isActive ? {
-          "aria-current": "true"
+          "aria-current": currentValue
         } : void 0),
         ...(interactive ? {
           role: "button",
@@ -179,12 +218,31 @@ function DotIndicator(param) {
           role: "button"
         } : void 0),
         children: /* @__PURE__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
+            size: 8,
+            color: "white",
+            weight: "bold"
+          })
         })
       }, index);
     })

package/dist/jsx/DotIndicator/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","DotIndicator_exports","DotIndicator","module","exports","import_jsx_runtime","require","import_theme","import_react_i18next","import_tamagui","import_componentColors","import_t","dotGapMap","small","medium","large","dotGeometryMap","$3","dot","bar","active","$4","$5","DotsContainer","styled","XStack","alignItems","justifyContent","gap","DotTarget","View","backgroundColor","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","Dot","borderRadius","componentColors","indicator","inactive","hoverStyle","hover","variants","true","selected","variant","dots","width","height","bars","pills","activeVariant","disabled","opacity","param","total","activeIndex","onChange","gapProp","_ref","_dotGeometryMap_knobProps_sizeToken","_ref1","_getTokens_space_gap","_getTokens_space","t","useTranslation","knobProps","useResolvedKnobs","space","geometry","sizeToken","itemSize","gapPx","getTokens","val","slopX","Math","max","floor","outsetY","ceil","MIN_PRESS_TARGET","interactive","jsx","children","Array","length","map","_","index","isActive","dotWidth"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","DotIndicator_exports","DotIndicator","module","exports","import_jsx_runtime","require","import_theme","import_react","import_react_i18next","import_tamagui","import_componentColors","import_t","dotGapMap","small","medium","large","dotGeometryMap","$3","dot","bar","active","$4","$5","CHECK_MIN_DOT","sizePx","fallback","_getTokens_size_value","_getTokens_size","token","getTokens","size","val","DotsContainer","styled","XStack","alignItems","justifyContent","gap","variants","rail","true","backgroundColor","componentColors","interactive","background","radiusClassProps","borderRadius","DotTarget","View","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","outlineOffset","Dot","indicator","inactive","hoverStyle","hover","selected","disabled","opacity","param","total","activeIndex","onChange","variant","gapProp","completedSteps","idiom","dotSize","activeDotSize","transition","dotStateAttribute","_ref","_dotGeometryMap_knobProps_sizeToken","_ref1","_getTokens_space_gap","_getTokens_space","t","useTranslation","knobProps","useResolvedKnobs","space","geometry","sizeToken","isTick","itemSize","activeSize","gapPx","slopX","Math","max","floor","outsetY","ceil","MIN_PRESS_TARGET","isStep","label","currentValue","motionStyle","jsx","paddingHorizontal","panelPadding","padding","height","children","Array","length","map","_","index","isActive","isCompleted","has","dotWidth","restingFill","completed","track","width","minHeight","marginHorizontal","marginVertical","cursor","onPress","withInterp","number","role","tabIndex","onKeyDown","e"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/Pagination.mjs

@@ -3,7 +3,8 @@ import { ArrowLeftIcon, ArrowRightIcon, CaretDoubleLeftIcon, CaretDoubleRightIco
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@multiplatform.one/forms";
-import { Text, View, XStack } from "tamagui";
+import { Text, XStack } from "tamagui";
+import { DotIndicator } from "./DotIndicator/index.mjs";
 import { componentColors } from "./componentColors.mjs";
 import { useDirection } from "./hooks/useDirection.mjs";
 import { bidiIsolate, withInterp } from "./shared/t.mjs";
@@ -32,6 +33,16 @@ function getPaginationItems(total, page, siblingCount = 1, boundaryCount = 1) {
   items.push(...endPages);
   return items;
 }
+const stripSteps = {
+  base: {
+    mark: "$0.75",
+    active: "$2"
+  },
+  large: {
+    mark: "$1.5",
+    active: "$3"
+  }
+};
 function Pagination({
   total,
   activeIndex,
@@ -93,185 +104,119 @@ function Pagination({
       if (enabled) fn();
     }
   };
-  if (variant === "numbered") {
-    const items = getPaginationItems(total, currentPage, siblingCount, boundaryCount);
-    const canPrev = !disabled && currentPage > 1;
-    const canNext = !disabled && currentPage < total;
-    const summary = showSummary && totalItems != null && pageSize != null ? bidiIsolate(totalItems === 0 ? t("0 of 0") : withInterp(t("{{start}}\u2013{{end}} of {{total}}"), {
-      start: (currentPage - 1) * pageSize + 1,
-      end: Math.min(currentPage * pageSize, totalItems),
-      total: totalItems
-    })) : void 0;
-    return /* @__PURE__ */jsxs(XStack, {
-      alignItems: "center",
-      justifyContent: "center",
-      role: "navigation",
-      "aria-label": t("Pagination"),
-      ...knobProps.gap,
-      ...stackProps,
-      children: [showFirstLast && /* @__PURE__ */jsx(Button, {
-        size: knobProps.sizeToken,
-        variant: "outlined",
-        icon: FirstIcon,
-        onPress: () => goTo(0),
-        disabled: !canPrev,
-        "aria-label": t("Go to first page"),
-        onKeyDown: activateOnEnterSpace(() => goTo(0), canPrev)
-      }), /* @__PURE__ */jsx(Button, {
-        size: knobProps.sizeToken,
-        variant: "outlined",
-        icon: PrevIcon,
-        onPress: handlePrev,
-        disabled: !canPrev,
-        "aria-label": t("Go to previous page"),
-        onKeyDown: activateOnEnterSpace(handlePrev, canPrev)
-      }), /* @__PURE__ */jsx(XStack, {
-        alignItems: "center",
-        gap: "$1",
-        children: items.map(item => {
-          if (typeof item !== "number") {
-            return /* @__PURE__ */jsx(Text, {
-              "aria-hidden": true,
-              userSelect: "none",
-              textAlign: "center",
-              minWidth: "$2",
-              ...knobProps.body,
-              color: componentColors.text.muted,
-              children: "\u2026"
-            }, item);
-          }
-          const isCurrent = item === currentPage;
-          return /* @__PURE__ */jsx(Button, {
-            size: knobProps.sizeToken,
-            minWidth: knobProps.sizeToken,
-            paddingHorizontal: "$2",
-            accent: isCurrent,
-            chromeless: !isCurrent,
-            disabled,
-            onPress: () => goTo(item - 1),
-            "aria-label": withInterp(t("Page {{number}}"), {
-              number: item
-            }),
-            "aria-current": isCurrent ? "page" : void 0,
-            onKeyDown: activateOnEnterSpace(() => goTo(item - 1), !disabled),
-            children: String(item)
-          }, item);
-        })
-      }), /* @__PURE__ */jsx(Button, {
-        size: knobProps.sizeToken,
-        variant: "outlined",
-        icon: NextIcon,
-        onPress: handleNext,
-        disabled: !canNext,
-        "aria-label": t("Go to next page"),
-        onKeyDown: activateOnEnterSpace(handleNext, canNext)
-      }), showFirstLast && /* @__PURE__ */jsx(Button, {
-        size: knobProps.sizeToken,
-        variant: "outlined",
-        icon: LastIcon,
-        onPress: () => goTo(total - 1),
-        disabled: !canNext,
-        "aria-label": t("Go to last page"),
-        onKeyDown: activateOnEnterSpace(() => goTo(total - 1), canNext)
-      }), summary && /* @__PURE__ */jsx(Text, {
-        ...knobProps.body,
-        color: componentColors.text.muted,
-        "aria-live": "polite",
-        userSelect: "none",
-        children: summary
-      })]
-    });
-  }
-  const dotSize = variant === "bars" ? "$1.5" : "$0.75";
-  const activeDotSize = variant === "bars" ? "$3" : "$2";
+  const isNumbered = variant === "numbered";
+  const canPrev = !disabled && index > 0;
+  const canNext = isNumbered ? !disabled && currentPage < total :
+  // dots/bars: an onSubmit makes the last step actionable, so the forward
+  // control is not dead there.
+  !(disabled || !isLastStep && index >= total - 1 && !onSubmit);
+  const submits = !isNumbered && isLastStep;
+  const items = isNumbered ? getPaginationItems(total, currentPage, siblingCount, boundaryCount) : [];
+  const summary = isNumbered && showSummary && totalItems != null && pageSize != null ? bidiIsolate(totalItems === 0 ? t("0 of 0") : withInterp(t("{{start}}\u2013{{end}} of {{total}}"), {
+    start: (currentPage - 1) * pageSize + 1,
+    end: Math.min(currentPage * pageSize, totalItems),
+    total: totalItems
+  })) : void 0;
+  const step = variant === "bars" ? stripSteps.large : stripSteps.base;
   return /* @__PURE__ */jsxs(XStack, {
     alignItems: "center",
     justifyContent: "center",
+    role: "navigation",
+    "aria-label": t("Pagination"),
     ...knobProps.gap,
     ...stackProps,
-    children: [/* @__PURE__ */jsx(Button, {
+    children: [isNumbered && showFirstLast && /* @__PURE__ */jsx(Button, {
       size: knobProps.sizeToken,
-      circular: true,
-      icon: PrevArrowIcon,
-      onPress: handlePrev,
-      disabled: disabled || index === 0,
       variant: "outlined",
-      "aria-label": t("Previous page"),
-      onKeyDown: activateOnEnterSpace(handlePrev, !(disabled || index === 0))
-    }), /* @__PURE__ */jsx(XStack, {
+      icon: FirstIcon,
+      onPress: () => goTo(0),
+      disabled: !canPrev,
+      "aria-label": t("Go to first page"),
+      onKeyDown: activateOnEnterSpace(() => goTo(0), canPrev)
+    }), /* @__PURE__ */jsx(Button, {
+      size: knobProps.sizeToken,
+      circular: !isNumbered,
+      variant: "outlined",
+      icon: isNumbered ? PrevIcon : PrevArrowIcon,
+      onPress: handlePrev,
+      disabled: !canPrev,
+      "aria-label": isNumbered ? t("Go to previous page") : t("Previous page"),
+      onKeyDown: activateOnEnterSpace(handlePrev, canPrev)
+    }), isNumbered ? /* @__PURE__ */jsx(XStack, {
       alignItems: "center",
-      justifyContent: "center",
-      gap: "$2",
-      backgroundColor: componentColors.interactive.background,
-      paddingHorizontal: knobProps.panelPadding.padding,
-      height: knobProps.sizeToken,
-      borderRadius: "$10",
-      children: Array.from({
-        length: total
-      }).map((_, dotIndex) => {
-        const isActive = dotIndex === index;
-        const isCompleted = completedSteps?.has(dotIndex);
-        const canJump = allowJumpTo && !disabled;
-        const dotProps = {
-          width: isActive ? activeDotSize : dotSize,
-          height: dotSize,
-          borderRadius: "$10",
-          // LC-05 / D-01 rider (a): the current dot speaks the SAME selected
-          // language as this component's numbered body (accent) — it used to
-          // paint ink while the numbered page button painted accent, so one
-          // component taught two meanings for "current".
-          backgroundColor: isCompleted && !isActive ? componentColors.indicator.completed : isActive ? componentColors.indicator.selected : componentColors.indicator.track,
-          transition: motionTransition,
-          cursor: canJump ? "pointer" : void 0,
-          alignItems: "center",
-          justifyContent: "center",
-          "aria-current": isActive ? "step" : void 0,
-          "data-pagination-dot": isActive ? "active" : "idle",
-          // Belt-and-suspenders for the CSS driver: named `transition` covers
-          // Tamagui layout props; explicit width/bg ensures measurable intermediates.
-          style: {
-            transition: `width var(--mp-transition, 100ms) ease, height var(--mp-transition, 100ms) ease, background-color var(--mp-transition, 100ms) ease`
-          },
-          ...(canJump ? {
-            onPress: () => goTo(dotIndex),
-            role: "button",
-            "aria-label": withInterp(t("Go to step {{number}}"), {
-              number: dotIndex + 1
-            }),
-            tabIndex: 0,
-            focusVisibleStyle: {
-              outlineColor: "$outlineColor",
-              outlineWidth: 2,
-              outlineStyle: "solid",
-              outlineOffset: 1
-            },
-            onKeyDown: e => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                goTo(dotIndex);
-              }
-            }
-          } : {})
-        };
-        return /* @__PURE__ */jsx(View, {
-          ...dotProps,
-          children: isCompleted && !isActive && variant === "dots" && /* @__PURE__ */jsx(CheckIcon, {
-            size: 8,
-            color: "white",
-            weight: "bold"
-          })
-        }, dotIndex);
+      gap: "$1",
+      children: items.map(item => {
+        if (typeof item !== "number") {
+          return /* @__PURE__ */jsx(Text, {
+            "aria-hidden": true,
+            userSelect: "none",
+            textAlign: "center",
+            minWidth: "$2",
+            ...knobProps.body,
+            color: componentColors.text.muted,
+            children: "\u2026"
+          }, item);
+        }
+        const isCurrent = item === currentPage;
+        return /* @__PURE__ */jsx(Button, {
+          size: knobProps.sizeToken,
+          minWidth: knobProps.sizeToken,
+          paddingHorizontal: "$2",
+          accent: isCurrent,
+          chromeless: !isCurrent,
+          disabled,
+          onPress: () => goTo(item - 1),
+          "aria-label": withInterp(t("Page {{number}}"), {
+            number: item
+          }),
+          "aria-current": isCurrent ? "page" : void 0,
+          onKeyDown: activateOnEnterSpace(() => goTo(item - 1), !disabled),
+          children: String(item)
+        }, item);
       })
+    }) :
+    // LC-16: the dot strip IS `DotIndicator` — this component owns the
+    // pager frame around it, not a second strip. `completedSteps`, the
+    // wizard a11y idiom and the rail all ride the primitive, so the two
+    // strips in the catalog cannot drift apart again.
+    /* @__PURE__ */
+    jsx(DotIndicator, {
+      total,
+      activeIndex: index,
+      variant,
+      idiom: "step",
+      rail: true,
+      completedSteps,
+      dotSize: step.mark,
+      activeDotSize: step.active,
+      transition: motionTransition,
+      dotStateAttribute: "data-pagination-dot",
+      onChange: allowJumpTo && !disabled ? goTo : void 0,
+      disabled: allowJumpTo && disabled
     }), /* @__PURE__ */jsx(Button, {
       size: knobProps.sizeToken,
-      circular: true,
-      icon: isLastStep ? CheckIcon : NextArrowIcon,
+      circular: !isNumbered,
+      variant: submits ? void 0 : "outlined",
+      theme: submits ? "active" : void 0,
+      icon: isNumbered ? NextIcon : submits ? CheckIcon : NextArrowIcon,
       onPress: handleNext,
-      disabled: disabled || !isLastStep && index >= total - 1 && !onSubmit,
-      variant: isLastStep ? void 0 : "outlined",
-      theme: isLastStep ? "active" : void 0,
-      "aria-label": isLastStep ? t("Submit") : t("Next page"),
-      onKeyDown: activateOnEnterSpace(handleNext, !(disabled || !isLastStep && index >= total - 1 && !onSubmit))
+      disabled: !canNext,
+      "aria-label": isNumbered ? t("Go to next page") : submits ? t("Submit") : t("Next page"),
+      onKeyDown: activateOnEnterSpace(handleNext, canNext)
+    }), isNumbered && showFirstLast && /* @__PURE__ */jsx(Button, {
+      size: knobProps.sizeToken,
+      variant: "outlined",
+      icon: LastIcon,
+      onPress: () => goTo(total - 1),
+      disabled: !canNext,
+      "aria-label": t("Go to last page"),
+      onKeyDown: activateOnEnterSpace(() => goTo(total - 1), canNext)
+    }), summary && /* @__PURE__ */jsx(Text, {
+      ...knobProps.body,
+      color: componentColors.text.muted,
+      "aria-live": "polite",
+      userSelect: "none",
+      children: summary
     })]
   });
 }