@multiplatform.one/components 6.6.0 → 7.0.0

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

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all"],"sources":["../../../src/Chip/index.tsx"],"sourcesContent":[null],"mappings":"AAAA;;AAAA,IACEA,SAAA,GAAAC,MAAA,CAAAC,cAAA;AAAA,IACAC,gBAAA,GAAAF,MAAA,CAAAG,wBAAA;AAAA,IACAC,iBAAA,GAAAJ,MAAA,CAAAK,mBAAA;AAAA,IACAC,YAAA,GAAAN,MAAA,CAAAO,SAAA,CAAAC,cAAA;AAAA,IAAAC,QAMK,GAAAA,CAAAC,MAAA,EAAAC,GAAA","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","Chip_exports","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","fromEntries","map","chipTextVariants","fontSize","styled","View","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","preventDefault","jsxs","borderRadius","transition","overflow","role","tabIndex","selectedSurfaceKnobProps","surfaceKnobProps","assemblyKnobProps"],"sources":["../../../src/Chip/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/DotIndicator/index.mjs

@@ -1,7 +1,8 @@
-import { MIN_PRESS_TARGET, radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import { FOCUS_VISIBLE_RING, MIN_PRESS_TARGET, ensureKeyboardModalityTracking, radiusClassProps, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
 import { CheckIcon } from "@phosphor-icons/react";
-import { useTranslation } from "react-i18next";
-import { View, XStack, getTokens, styled } from "tamagui";
+import { useRef, useState } from "react";
+import { useTranslation } from "../shared/i18n.mjs";
+import { View, XStack, getTokens, isWeb, styled } from "tamagui";
 import { componentColors } from "../componentColors.mjs";
 import { withInterp } from "../shared/t.mjs";
 import { jsx } from "react/jsx-runtime";
@@ -28,6 +29,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") {
@@ -36,11 +38,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 = styled(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
@@ -63,11 +106,20 @@ const DotTarget = styled(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 = styled(View, {
@@ -125,11 +177,15 @@ function DotIndicator({
   const {
     knobProps
   } = useResolvedKnobs();
+  const rootRef = useRef(null);
+  const [kbFocusIndex, setKbFocusIndex] = useState(null);
+  if (isWeb) 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 : getTokens().space?.[gap]?.val ?? 7;
   const slopX = Math.max(0, Math.floor((gapPx - 1) / 2));
   const outsetY = Math.max(0, Math.ceil((MIN_PRESS_TARGET - itemSize) / 2));
@@ -137,12 +193,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__ */jsx(DotsContainer, {
+    ref: rootRef,
     gap,
     rail,
+    ...(interactive ? {
+      role: "group"
+    } : void 0),
     ...(rail ? {
       paddingHorizontal: knobProps.panelPadding.padding,
       height: knobProps.sizeToken
@@ -152,31 +226,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 ? 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;
+      const kbRing = kbFocusIndex === index;
       return /* @__PURE__ */jsx(DotTarget, {
+        display: hidden ? "none" : "flex",
         width: dotWidth + slopX * 2,
         minHeight: 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": 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 (!isWeb || 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 ? {
@@ -196,13 +304,21 @@ function DotIndicator({
             } : void 0)
           }),
           width: dotWidth,
-          height: itemSize,
+          height: dotHeight,
           disabled,
-          transition,
+          transition: motion,
           style: motionStyle,
+          ...(kbRing ? 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__ */jsx(CheckIcon, {
             size: 8,
             color: "white",