@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/cjs/Chip/index.native.js

@@ -24,11 +24,380 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var Chip_exports = {};
 __export(Chip_exports, {
-  Chip: () => import_forms.Chip,
-  ChipFrame: () => import_forms.ChipFrame,
-  ChipText: () => import_forms.ChipText,
-  chipIconSize: () => import_forms.chipIconSize
+  Chip: () => Chip,
+  ChipFrame: () => ChipFrame,
+  ChipText: () => ChipText,
+  chipIconSize: () => chipIconSize,
+  chipTone: () => chipTone
 });
 module.exports = __toCommonJS(Chip_exports);
-var import_forms = require("@multiplatform.one/forms");
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_platform = require("@multiplatform.one/platform");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_tamagui = require("tamagui");
+var colorMap = {
+  gray: {
+    tint: "$color4",
+    hoverTint: "$color5",
+    fill: "$color11",
+    fillText: "$color1",
+    text: "$color12",
+    border: "$color7"
+  },
+  red: {
+    tint: "$red4",
+    hoverTint: "$red5",
+    fill: "$red11",
+    fillText: "$color1",
+    text: "$red12",
+    border: "$red7"
+  },
+  green: {
+    tint: "$green4",
+    hoverTint: "$green5",
+    fill: "$green11",
+    fillText: "$color1",
+    text: "$green12",
+    border: "$green7"
+  },
+  blue: {
+    tint: "$blue4",
+    hoverTint: "$blue5",
+    fill: "$blue11",
+    fillText: "$color1",
+    text: "$blue12",
+    border: "$blue7"
+  },
+  yellow: {
+    tint: "$yellow4",
+    hoverTint: "$yellow5",
+    fill: "$yellow11",
+    fillText: "$color1",
+    text: "$yellow12",
+    border: "$yellow7"
+  },
+  orange: {
+    tint: "$orange4",
+    hoverTint: "$orange5",
+    fill: "$orange11",
+    fillText: "$color1",
+    text: "$orange12",
+    border: "$orange7"
+  },
+  purple: {
+    tint: "$purple4",
+    hoverTint: "$purple5",
+    fill: "$purple11",
+    fillText: "$color1",
+    text: "$purple12",
+    border: "$purple7"
+  }
+};
+function chipTone(variant) {
+  switch (variant) {
+    case "filled":
+    case "solid":
+      return "filled";
+    case "outlined":
+    case "outline":
+      return "outlined";
+    default:
+      return "ghost";
+  }
+}
+var CHIP_RECIPE_FAMILY = "controlCompact";
+var CHIP_SIZE_TOKENS = ["$2", "$3", "$4", "$5"];
+function chipFrameGeometry(token) {
+  var recipe = (0, import_theme.sizeRecipeForToken)(token, {
+    family: CHIP_RECIPE_FAMILY
+  });
+  return {
+    paddingHorizontal: recipe.paddingHorizontal,
+    paddingVertical: Math.round(recipe.paddingHorizontal * 0.25),
+    gap: recipe.gap
+  };
+}
+var chipFrameVariants = Object.fromEntries(CHIP_SIZE_TOKENS.map(function (token) {
+  return [token, chipFrameGeometry(token)];
+}));
+var chipTextVariants = Object.fromEntries(CHIP_SIZE_TOKENS.map(function (token) {
+  return [token, {
+    fontSize: (0, import_theme.sizeRecipeForToken)(token, {
+      family: CHIP_RECIPE_FAMILY
+    }).fontSize
+  }];
+}));
+var ChipFrame = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "Chip",
+  flexDirection: "row",
+  alignItems: "center",
+  ...chipFrameVariants.$3,
+  outlineWidth: 0,
+  focusStyle: {
+    outlineWidth: 0
+  },
+  variants: {
+    size: {
+      ...chipFrameVariants,
+      "...size": function (val) {
+        return chipFrameGeometry(String(val !== null && val !== void 0 ? val : "$3"));
+      }
+    },
+    variant: {
+      solid: {},
+      filled: {},
+      subtle: {},
+      ghost: {},
+      outline: {
+        borderWidth: 1
+      },
+      outlined: {
+        borderWidth: 1
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "subtle",
+    size: "$3"
+  }
+});
+var ChipText = (0, import_tamagui.styled)(import_tamagui.Text, {
+  name: "ChipText",
+  fontWeight: "500",
+  numberOfLines: 1,
+  userSelect: "none",
+  flexShrink: 1,
+  minWidth: 0,
+  ...chipTextVariants.$3,
+  variants: {
+    size: {
+      ...chipTextVariants,
+      "...size": function (val) {
+        return {
+          fontSize: (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$3"), {
+            family: CHIP_RECIPE_FAMILY
+          }).fontSize
+        };
+      }
+    }
+  }
+});
+var IconSlot = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ChipIcon",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+});
+function chipIconSize(size) {
+  return (0, import_theme.sizeRecipeForToken)(size, {
+    family: CHIP_RECIPE_FAMILY
+  }).iconSize;
+}
+var DismissButton = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ChipDismiss",
+  cursor: "pointer",
+  opacity: 0.7,
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  outlineWidth: 0,
+  hoverStyle: {
+    opacity: 1
+  },
+  pressStyle: {
+    opacity: 0.9
+  },
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    opacity: 1,
+    outlineWidth: 0
+  }
+});
+var DismissRing = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ChipDismissRing",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "$0.5",
+  hoverStyle: {
+    backgroundColor: "$color5"
+  }
+});
+function normalizeIcon(icon, size) {
+  if (icon == null || icon === false) return null;
+  if (/* @__PURE__ */(0, import_react2.isValidElement)(icon)) {
+    var _props_size;
+    var props = icon.props;
+    return /* @__PURE__ */(0, import_react2.cloneElement)(icon, {
+      size: (_props_size = props.size) !== null && _props_size !== void 0 ? _props_size : size
+    });
+  }
+  if (typeof icon === "function") {
+    return /* @__PURE__ */(0, import_react2.createElement)(icon, {
+      size
+    });
+  }
+  return icon;
+}
+function Chip(param) {
+  var {
+    children,
+    size,
+    variant = "subtle",
+    color = "gray",
+    icon,
+    selected,
+    onPress,
+    onDismiss,
+    disabled,
+    maxWidth
+  } = param;
+  var _colorMap_color;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  var {
+    knobProps,
+    disabledState
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Chip"
+  });
+  var colors = (_colorMap_color = colorMap[color]) !== null && _colorMap_color !== void 0 ? _colorMap_color : colorMap.gray;
+  var tone = chipTone(variant);
+  var resolvedSize = size !== null && size !== void 0 ? size : knobProps.sizeToken;
+  var selectedTint = (0, import_theme.useAccentTintedSurface)();
+  var selectedFill = selectedTint !== null && selectedTint !== void 0 ? selectedTint : colors.tint;
+  var onSelectedLabel = (0, import_theme.useReadableTextOn)(selectedFill);
+  if (typeof document !== "undefined") (0, import_theme.ensureCompositeFocusRing)();
+  var isSelected = Boolean(selected);
+  var interactive = Boolean(onPress) && !disabled;
+  var showDismiss = Boolean(onDismiss) && !disabled;
+  var iconSize = chipIconSize(resolvedSize);
+  var RING_INSET = 2;
+  var dismissVisual = iconSize + RING_INSET * 2;
+  var dismissOutset = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - dismissVisual) / 2));
+  var backgroundColor = colors.tint;
+  var textColor = colors.text;
+  var borderColor = "transparent";
+  if (isSelected) {
+    backgroundColor = selectedFill;
+    textColor = onSelectedLabel !== null && onSelectedLabel !== void 0 ? onSelectedLabel : colors.text;
+    borderColor = "transparent";
+  } else if (tone === "filled") {
+    backgroundColor = colors.fill;
+    textColor = colors.fillText;
+    borderColor = "transparent";
+  } else if (tone === "outlined") {
+    backgroundColor = "transparent";
+    textColor = colors.text;
+    borderColor = colors.border;
+  }
+  var hoverBackground = interactive ? isSelected ? selectedFill : tone === "outlined" ? colors.tint : tone === "filled" ? colors.fill : colors.hoverTint : void 0;
+  var leading = icon != null ? normalizeIcon(icon, iconSize) : isSelected ? /* @__PURE__ */(0, import_react2.createElement)(import_react.CheckIcon, {
+    size: iconSize,
+    weight: "bold"
+  }) : null;
+  var activate = function activate2() {
+    if (!interactive) return;
+    onPress === null || onPress === void 0 ? void 0 : onPress();
+  };
+  var handleKeyDown = function handleKeyDown2(e) {
+    if (e.defaultPrevented || e.repeat) return;
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    activate();
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ChipFrame, {
+    size: resolvedSize,
+    variant,
+    backgroundColor,
+    ...knobProps.borderRadius,
+    // Icon↔label gap is control-INTERNAL (LC-79): it rides the recipe's gap
+    // channel via the size variants above, not the layout space knob.
+    borderColor,
+    borderWidth: isSelected ? 0 : tone === "outlined" ? Math.max(knobProps.borderRadius.borderWidth, 1) : 0,
+    transition: knobProps.transition,
+    maxWidth,
+    overflow: "visible",
+    cursor: disabled ? "not-allowed" : interactive ? "pointer" : "default",
+    "data-chip": "",
+    "data-selected": isSelected ? "true" : void 0,
+    ...(interactive ? {
+      role: "button",
+      tabIndex: 0,
+      ...(selected != null ? {
+        "aria-pressed": isSelected
+      } : void 0)
+    } : void 0),
+    ...(disabled ? {
+      "aria-disabled": true,
+      ...(isSelected ? disabledState.selectedSurfaceKnobProps : disabledState.surfaceKnobProps),
+      ...disabledState.assemblyKnobProps
+    } : void 0),
+    hoverStyle: hoverBackground != null ? {
+      backgroundColor: hoverBackground
+    } : void 0,
+    pressStyle: interactive ? {
+      backgroundColor: hoverBackground,
+      opacity: 0.92
+    } : void 0,
+    focusVisibleStyle: interactive ? (0, import_theme.ensureFocusVisibleRing)() : {
+      outlineWidth: 0
+    },
+    onPress: interactive ? activate : void 0,
+    ...(interactive && import_platform.isWeb ? {
+      onKeyDown: handleKeyDown
+    } : void 0),
+    children: [leading ?
+    // IconSlot (styled View) has no `color`; Tamagui forwards it to set the
+    // icon's inherited color at runtime (house Record cast).
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(IconSlot, {
+      ...{
+        color: textColor
+      },
+      children: leading
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChipText, {
+      size: resolvedSize,
+      ...knobProps.body,
+      fontWeight: "500",
+      color: textColor,
+      ...(disabled ? disabledState.textKnobProps : void 0),
+      children
+    }), showDismiss ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DismissButton, {
+      role: "button",
+      "aria-label": t("Remove"),
+      tabIndex: 0,
+      className: "mp-chip-dismiss",
+      borderRadius: knobProps.pointy ? 0 : 1e3,
+      ...(0, import_theme.pressTargetStyle)(),
+      marginVertical: -dismissOutset,
+      marginHorizontal: -dismissOutset,
+      hitSlop: (0, import_theme.pressTargetHitSlop)(dismissVisual),
+      onPress: function onPress2(e) {
+        var _e_stopPropagation;
+        (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+      },
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        }
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DismissRing, {
+        className: "mp-chip-dismiss-ring",
+        borderRadius: knobProps.pointy ? 0 : 1e3,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+          size: iconSize
+        })
+      })
+    }) : null]
+  });
+}
 //# sourceMappingURL=index.native.js.map

package/dist/cjs/Chip/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Chip_exports","__export","Chip","import_forms","ChipFrame","ChipText","chipIconSize","module","exports"],"sources":["../../../src/Chip/index.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,YAAA;AAAAC,QAAA,CAAAD,YAAA;EAAAE,IAAA,EAAAA,CAAA,KAAAC,YAAA,CAAAD,IAAA;EAAAE,SAAA,EAAAA,CAAA,KAAAD,YAAA,CAAAC,SAAA;EAAAC,QAAA,EAAAA,CAAA,KAAAF,YAAA,CAAAE,QAAA;EAAAC,YAAA,EAAAA,CAAA,KAAAH,YAAA,CAAAG;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAb,YAUO,CAAAK,YAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Chip_exports","__export","Chip","ChipFrame","ChipText","chipIconSize","chipTone","module","exports","import_jsx_runtime","require","import_platform","import_theme","import_react","import_react2","import_react_i18next","import_tamagui","colorMap","gray","tint","hoverTint","fill","fillText","text","border","red","green","blue","yellow","orange","purple","variant","CHIP_RECIPE_FAMILY","CHIP_SIZE_TOKENS","chipFrameGeometry","token","recipe","sizeRecipeForToken","family","paddingHorizontal","paddingVertical","Math","round","gap","chipFrameVariants","Object","fromEntries","map","chipTextVariants","fontSize","styled","View","name","flexDirection","alignItems","$3","outlineWidth","focusStyle","variants","size","...size","val","String","solid","filled","subtle","ghost","outline","borderWidth","outlined","defaultVariants","Text","fontWeight","numberOfLines","userSelect","flexShrink","minWidth","IconSlot","justifyContent","iconSize","DismissButton","cursor","opacity","hoverStyle","pressStyle","focusVisibleStyle","DismissRing","padding","backgroundColor","normalizeIcon","icon","isValidElement","_props_size","props","cloneElement","createElement","param","children","color","selected","onPress","onDismiss","disabled","maxWidth","_colorMap_color","t","useTranslation","knobProps","disabledState","useResolvedKnobs","component","colors","tone","resolvedSize","sizeToken","selectedTint","useAccentTintedSurface","selectedFill","onSelectedLabel","useReadableTextOn","document","ensureCompositeFocusRing","isSelected","Boolean","interactive","showDismiss","RING_INSET","dismissVisual","dismissOutset","max","ceil","MIN_PRESS_TARGET","textColor","borderColor","hoverBackground","leading","CheckIcon","weight","activate","activate2","handleKeyDown","handleKeyDown2","e","defaultPrevented","repeat","key","preventDefault","jsxs","borderRadius","transition","overflow","role","tabIndex","selectedSurfaceKnobProps","surfaceKnobProps","assemblyKnobProps","ensureFocusVisibleRing","isWeb","onKeyDown"],"sources":["../../../src/Chip/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/DotIndicator/index.cjs

@@ -27,7 +27,8 @@ __export(DotIndicator_exports, {
 module.exports = __toCommonJS(DotIndicator_exports);
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("@phosphor-icons/react");
-var import_react_i18next = require("react-i18next");
+var import_react2 = require("react");
+var import_i18n = require("../shared/i18n.cjs");
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.cjs");
 var import_t = require("../shared/t.cjs");
@@ -55,6 +56,7 @@ const dotGeometryMap = {
   }
 };
 const CHECK_MIN_DOT = 8;
+const WINDOW = 5;
 function sizePx(value, fallback) {
   if (typeof value === "number") return value;
   if (typeof value === "string") {
@@ -63,11 +65,52 @@ function sizePx(value, fallback) {
   }
   return fallback;
 }
+function idleMarkWidth(variant, itemSize, activeSize) {
+  if (variant === "pills") return Math.round(itemSize * 2.25);
+  if (variant === "bars") return Math.max(itemSize, Math.round(activeSize * 0.55));
+  return itemSize;
+}
+function activeMarkWidth(variant, itemSize, geometryActive) {
+  if (variant === "dots") return Math.round(itemSize * 2);
+  if (variant === "pills") return Math.round(itemSize * 3);
+  return geometryActive;
+}
+function windowRange(active, total) {
+  if (total <= WINDOW) return [0, Math.max(0, total - 1)];
+  const half = Math.floor(WINDOW / 2);
+  let start = active - half;
+  let end = active + half;
+  if (start < 0) {
+    end -= start;
+    start = 0;
+  }
+  if (end > total - 1) {
+    start -= end - (total - 1);
+    end = total - 1;
+  }
+  return [Math.max(0, start), end];
+}
+function windowScale(index, active, start, end, total) {
+  if (total <= WINDOW) return 1;
+  if (index < start || index > end) return 0;
+  const dist = Math.abs(index - active);
+  if (dist === 0) return 1;
+  if (dist === 1) return 0.72;
+  return 0.48;
+}
+function isRtl(node) {
+  if (typeof document === "undefined") return false;
+  const fromNode = node?.closest("[dir]")?.getAttribute("dir");
+  const dir = fromNode || document.documentElement.dir;
+  return dir === "rtl";
+}
 const DotsContainer = (0, import_tamagui.styled)(import_tamagui.XStack, {
   name: "DotIndicator",
   alignItems: "center",
   justifyContent: "center",
   gap: "$2",
+  // Outer +2px LC-71 ring on the painted mark must not clip at the strip edge.
+  overflow: "visible",
   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
@@ -90,11 +133,20 @@ const DotTarget = (0, import_tamagui.styled)(import_tamagui.View, {
   alignItems: "center",
   justifyContent: "center",
   backgroundColor: "transparent",
+  overflow: "visible",
+  borderRadius: 1e3,
+  // LC-71: the 44px hit box is not the perceived control (Chip ✕ rule). Rest,
+  // mouse-focus, and :focus-visible paint no ring here — the ring rides the
+  // painted mark via FOCUS_VISIBLE_RING when wasKeyboardFocus().
+  outlineWidth: 0,
+  outlineStyle: "none",
+  focusStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none"
+  },
   focusVisibleStyle: {
-    outlineColor: "$outlineColor",
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineOffset: 1
+    outlineWidth: 0,
+    outlineStyle: "none"
   }
 });
 const Dot = (0, import_tamagui.styled)(import_tamagui.View, {
@@ -148,15 +200,19 @@ function DotIndicator({
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const rootRef = (0, import_react2.useRef)(null);
+  const [kbFocusIndex, setKbFocusIndex] = (0, import_react2.useState)(null);
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
   const gap = gapProp ?? dotGapMap[knobProps.space] ?? "$2";
   const geometry = dotGeometryMap[knobProps.sizeToken] ?? dotGeometryMap.$4;
   const isTick = variant === "bars";
   const itemSize = sizePx(dotSize, isTick ? geometry.bar : geometry.dot);
-  const activeSize = sizePx(activeDotSize, geometry.active);
+  const activeSize = sizePx(activeDotSize, activeMarkWidth(variant, itemSize, geometry.active));
+  const idleWidth = idleMarkWidth(variant, itemSize, activeSize);
   const gapPx = typeof gap === "number" ? gap : (0, import_tamagui.getTokens)().space?.[gap]?.val ?? 7;
   const slopX = Math.max(0, Math.floor((gapPx - 1) / 2));
   const outsetY = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - itemSize) / 2));
@@ -164,12 +220,30 @@ function DotIndicator({
   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"
+  const motion = knobProps.transition ? transition ?? knobProps.transition : void 0;
+  const motionStyle = motion ? {
+    transition: "width var(--mp-transition, 200ms) ease, height var(--mp-transition, 200ms) ease, background-color var(--mp-transition, 200ms) ease, transform var(--mp-transition, 200ms) ease"
   } : void 0;
+  const clampedActive = Math.min(Math.max(0, activeIndex), Math.max(0, total - 1));
+  const [winStart, winEnd] = windowRange(clampedActive, total);
+  const focusMark = index => {
+    requestAnimationFrame(() => {
+      const el = rootRef.current?.querySelector?.(`[data-dot-index="${index}"]`);
+      el?.focus?.();
+    });
+  };
+  const moveTo = index => {
+    const next = Math.min(Math.max(0, index), total - 1);
+    onChange?.(next);
+    focusMark(next);
+  };
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DotsContainer, {
+    ref: rootRef,
     gap,
     rail,
+    ...(interactive ? {
+      role: "group"
+    } : void 0),
     ...(rail ? {
       paddingHorizontal: knobProps.panelPadding.padding,
       height: knobProps.sizeToken
@@ -179,31 +253,65 @@ function DotIndicator({
     }).map((_, index) => {
       const isActive = index === activeIndex;
       const isCompleted = !isActive && !!completedSteps?.has(index);
-      const dotWidth = isActive ? activeSize : itemSize;
+      const scale = windowScale(index, clampedActive, winStart, winEnd, total);
+      const hidden = scale === 0;
+      const baseWidth = isActive ? activeSize : idleWidth;
+      const dotWidth = Math.max(1, Math.round(baseWidth * scale));
+      const dotHeight = Math.max(1, Math.round(itemSize * scale));
       const 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;
+      const kbRing = kbFocusIndex === index;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DotTarget, {
+        display: hidden ? "none" : "flex",
         width: dotWidth + slopX * 2,
         minHeight: import_theme.MIN_PRESS_TARGET,
         marginHorizontal: -slopX,
         marginVertical: -outsetY,
+        zIndex: kbRing ? 1 : void 0,
         cursor: interactive ? "pointer" : disabled ? "not-allowed" : "default",
         onPress: interactive ? () => onChange?.(index) : void 0,
         "aria-label": (0, import_t.withInterp)(label, {
           number: index + 1
         }),
+        ...{
+          "data-dot-index": String(index)
+        },
+        ...(hidden ? {
+          "data-dot-hidden": "true"
+        } : void 0),
         ...(isActive ? {
           "aria-current": currentValue
         } : void 0),
         ...(interactive ? {
           role: "button",
           tabIndex: 0,
+          onFocus: () => {
+            if (!import_tamagui.isWeb || (0, import_theme.wasKeyboardFocus)()) setKbFocusIndex(index);
+          },
+          onBlur: () => {
+            setKbFocusIndex(prev => prev === index ? null : prev);
+          },
           onKeyDown: e => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
               onChange?.(index);
+              return;
+            }
+            const rtl = isRtl(e.currentTarget);
+            if (e.key === "ArrowRight") {
+              e.preventDefault();
+              moveTo(index + (rtl ? -1 : 1));
+            } else if (e.key === "ArrowLeft") {
+              e.preventDefault();
+              moveTo(index + (rtl ? 1 : -1));
+            } else if (e.key === "Home") {
+              e.preventDefault();
+              moveTo(0);
+            } else if (e.key === "End") {
+              e.preventDefault();
+              moveTo(total - 1);
             }
           }
         } : disabled ? {
@@ -223,13 +331,21 @@ function DotIndicator({
             } : void 0)
           }),
           width: dotWidth,
-          height: itemSize,
+          height: dotHeight,
           disabled,
-          transition,
+          transition: motion,
           style: motionStyle,
+          ...(kbRing ? import_theme.FOCUS_VISIBLE_RING : {
+            outlineWidth: 0
+          }),
           ...{
-            [dotStateAttribute]: isActive ? "active" : "idle"
+            [dotStateAttribute]: isActive ? "active" : "idle",
+            "data-mark-width": String(dotWidth),
+            "data-mark-height": String(dotHeight)
           },
+          ...(kbRing ? {
+            "data-dot-ring": "true"
+          } : void 0),
           children: isCompleted && !isTick && itemSize >= CHECK_MIN_DOT && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CheckIcon, {
             size: 8,
             color: "white",