@multiplatform.one/components 6.6.0 → 7.0.0

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-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.native.js";
+import { View, XStack, getTokens, isWeb, styled } from "tamagui";
 import { componentColors } from "../componentColors.native.js";
 import { withInterp } from "../shared/t.native.js";
 var dotGapMap = {
@@ -28,6 +29,7 @@ var dotGeometryMap = {
   }
 };
 var CHECK_MIN_DOT = 8;
+var WINDOW = 5;
 function sizePx(value, fallback) {
   if (typeof value === "number") return value;
   if (typeof value === "string") {
@@ -37,11 +39,53 @@ 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)];
+  var half = Math.floor(WINDOW / 2);
+  var start = active - half;
+  var 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;
+  var dist = Math.abs(index - active);
+  if (dist === 0) return 1;
+  if (dist === 1) return 0.72;
+  return 0.48;
+}
+function isRtl(node) {
+  var _node_closest;
+  if (typeof document === "undefined") return false;
+  var fromNode = node === null || node === void 0 ? void 0 : (_node_closest = node.closest("[dir]")) === null || _node_closest === void 0 ? void 0 : _node_closest.getAttribute("dir");
+  var dir = fromNode || document.documentElement.dir;
+  return dir === "rtl";
+}
 var 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
@@ -64,11 +108,20 @@ var 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"
   }
 });
 var Dot = styled(View, {
@@ -129,11 +182,15 @@ function DotIndicator(param) {
   var {
     knobProps
   } = useResolvedKnobs();
+  var rootRef = useRef(null);
+  var [kbFocusIndex, setKbFocusIndex] = useState(null);
+  if (isWeb) ensureKeyboardModalityTracking();
   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 isTick = variant === "bars";
   var itemSize = sizePx(dotSize, isTick ? geometry.bar : geometry.dot);
-  var activeSize = sizePx(activeDotSize, geometry.active);
+  var activeSize = sizePx(activeDotSize, activeMarkWidth(variant, itemSize, geometry.active));
+  var idleWidth = idleMarkWidth(variant, itemSize, activeSize);
   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.max(0, Math.ceil((MIN_PRESS_TARGET - itemSize) / 2));
@@ -141,12 +198,31 @@ function DotIndicator(param) {
   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"
+  var motion = knobProps.transition ? transition !== null && transition !== void 0 ? transition : knobProps.transition : void 0;
+  var 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;
+  var clampedActive = Math.min(Math.max(0, activeIndex), Math.max(0, total - 1));
+  var [winStart, winEnd] = windowRange(clampedActive, total);
+  var focusMark = function focusMark2(index) {
+    requestAnimationFrame(function () {
+      var _rootRef_current_querySelector, _rootRef_current, _el_focus;
+      var el = (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : (_rootRef_current_querySelector = _rootRef_current.querySelector) === null || _rootRef_current_querySelector === void 0 ? void 0 : _rootRef_current_querySelector.call(_rootRef_current, `[data-dot-index="${index}"]`);
+      el === null || el === void 0 ? void 0 : (_el_focus = el.focus) === null || _el_focus === void 0 ? void 0 : _el_focus.call(el);
+    });
+  };
+  var moveTo = function moveTo2(index) {
+    var next = Math.min(Math.max(0, index), total - 1);
+    onChange === null || onChange === void 0 ? void 0 : 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
@@ -156,16 +232,23 @@ function DotIndicator(param) {
     }).map(function (_, index) {
       var isActive = index === activeIndex;
       var isCompleted = !isActive && !!(completedSteps === null || completedSteps === void 0 ? void 0 : completedSteps.has(index));
-      var dotWidth = isActive ? activeSize : itemSize;
+      var scale = windowScale(index, clampedActive, winStart, winEnd, total);
+      var hidden = scale === 0;
+      var baseWidth = isActive ? activeSize : idleWidth;
+      var dotWidth = Math.max(1, Math.round(baseWidth * scale));
+      var dotHeight = Math.max(1, Math.round(itemSize * scale));
       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;
+      var 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 ? function () {
           return onChange === null || onChange === void 0 ? void 0 : onChange(index);
@@ -173,16 +256,45 @@ function DotIndicator(param) {
         "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: function onFocus() {
+            if (!isWeb || wasKeyboardFocus()) setKbFocusIndex(index);
+          },
+          onBlur: function onBlur() {
+            setKbFocusIndex(function (prev) {
+              return prev === index ? null : prev;
+            });
+          },
           onKeyDown: function onKeyDown(e) {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
               onChange === null || onChange === void 0 ? void 0 : onChange(index);
+              return;
+            }
+            var 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 ? {
@@ -202,13 +314,21 @@ function DotIndicator(param) {
             } : 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",

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","MIN_PRESS_TARGET","radiusClassProps","useResolvedKnobs","CheckIcon","useTranslation","View","XStack","getTokens","styled","componentColors","withInterp","dotGapMap","small","medium","large","dotGeometryMap","$3","dot","bar","active","$4","$5","CHECK_MIN_DOT","sizePx","value","fallback","_getTokens_size_value","_getTokens_size","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","param","total","activeIndex","onChange","variant","gapProp","completedSteps","idiom","dotSize","activeDotSize","transition","dotStateAttribute","_ref","_dotGeometryMap_knobProps_sizeToken","_ref1","_getTokens_space_gap","_getTokens_space","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"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","FOCUS_VISIBLE_RING","MIN_PRESS_TARGET","ensureKeyboardModalityTracking","radiusClassProps","useResolvedKnobs","wasKeyboardFocus","CheckIcon","useRef","useState","useTranslation","View","XStack","getTokens","isWeb","styled","componentColors","withInterp","dotGapMap","small","medium","large","dotGeometryMap","$3","dot","bar","active","$4","$5","CHECK_MIN_DOT","WINDOW","sizePx","value","fallback","_getTokens_size_value","_getTokens_size","token","size","val","idleMarkWidth","variant","itemSize","activeSize","Math","round","max","activeMarkWidth","geometryActive","windowRange","total","half","floor","start","end","windowScale","index","dist","abs","isRtl","node","_node_closest","document","fromNode","closest","getAttribute","dir","documentElement","DotsContainer","name","alignItems","justifyContent","gap","overflow","variants","rail","true","backgroundColor","interactive","background","borderRadius","DotTarget","outlineWidth","outlineStyle","focusStyle","focusVisibleStyle","Dot","indicator","inactive","hoverStyle","hover","selected","disabled","opacity","DotIndicator","param","activeIndex","onChange","gapProp","completedSteps","idiom","dotSize","activeDotSize","transition","dotStateAttribute","_ref","_dotGeometryMap_knobProps_sizeToken","_ref1","_getTokens_space_gap","_getTokens_space","t","knobProps","rootRef","kbFocusIndex","setKbFocusIndex","space","geometry","sizeToken","isTick","idleWidth","gapPx","slopX","outsetY","ceil","isStep","label","currentValue","motion","motionStyle","clampedActive","min","winStart","winEnd","focusMark","focusMark2","requestAnimationFrame","_rootRef_current_querySelector","_rootRef_current","_el_focus","el","current","querySelector","call","focus","moveTo","moveTo2","next","ref","role","paddingHorizontal","panelPadding","padding","height","children","Array","from","length","map","_","isActive","isCompleted","has","scale","hidden","baseWidth","dotWidth","dotHeight","restingFill","completed","track","kbRing","display","width","minHeight","marginHorizontal","marginVertical","zIndex","cursor","onPress","number","String","tabIndex","onFocus","onBlur","prev","onKeyDown","e","key","preventDefault","rtl","currentTarget"],"sources":["../../../src/DotIndicator/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/DropdownMenu/index.mjs

@@ -1,5 +1,5 @@
-import { createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useMemo, useRef } from "react";
-import { Intent, hairline, menuRowFrame, useResolvedKnobs, warnBareDisabled } from "@multiplatform.one/theme";
+import { createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { OVERLAY_ANCHOR_GAP, hairline, keyboardFocusRingProps, menuRowFrame, ensureKeyboardModalityTracking, useResolvedKnobs, warnBareDisabled, wasKeyboardFocus } from "@multiplatform.one/theme";
 import { CheckIcon } from "@phosphor-icons/react";
 import { Popover, Text, View, XStack, YStack, isWeb, styled, useComposedRefs, useControllableState, useTheme, withStaticProperties } from "tamagui";
 import { componentColors } from "../componentColors.mjs";
@@ -15,20 +15,24 @@ const ItemRow = styled(XStack, {
   ...menuRowFrame,
   gap: "$2.5",
   cursor: "pointer",
+  // LC-72 CONTAINER-CLIP: rows stay square; the overlay clips outer corners.
+  // LC-71: rest and pointer-origin focus paint no ring. Keyboard ring is
+  // applied per-row via keyboardFocusRingProps (inset so overflow:hidden
+  // does not sever it) when wasKeyboardFocus().
+  outlineWidth: 0,
   hoverStyle: {
     backgroundColor: componentColors.interactive.hover
   },
   pressStyle: {
     backgroundColor: componentColors.interactive.active
   },
-  // Focus highlight doubles as the roving-focus indicator (full-width row).
   focusStyle: {
     backgroundColor: componentColors.interactive.hover,
-    outlineStyle: "none"
+    outlineWidth: 0
   },
   focusVisibleStyle: {
     backgroundColor: componentColors.interactive.hover,
-    outlineStyle: "none"
+    outlineWidth: 0
   },
   variants: {
     disabled: {
@@ -63,7 +67,8 @@ function DropdownMenuRoot({
   defaultOpen = false,
   onOpenChange,
   placement = "bottom-start",
-  maxHeight
+  maxHeight,
+  closeOnSelect
 }) {
   const [open, setOpen] = useControllableState({
     prop: openProp,
@@ -71,6 +76,7 @@ function DropdownMenuRoot({
     onChange: onOpenChange
   });
   const triggerRef = useRef(null);
+  const pendingFocusRef = useRef("first");
   const close = useCallback(() => {
     setOpen(false);
     if (isWeb) {
@@ -82,15 +88,17 @@ function DropdownMenuRoot({
     open,
     setOpen,
     triggerRef,
-    close
-  }), [open, setOpen, close]);
+    close,
+    closeOnSelect,
+    pendingFocusRef
+  }), [open, setOpen, close, closeOnSelect]);
   return /* @__PURE__ */jsx(DropdownMenuContext.Provider, {
     value: ctx,
     children: /* @__PURE__ */jsx(Popover, {
       open,
       onOpenChange: setOpen,
       placement,
-      offset: 4,
+      offset: OVERLAY_ANCHOR_GAP,
       stayInFrame: true,
       allowFlip: true,
       children: items ? /* @__PURE__ */jsxs(Fragment, {
@@ -102,6 +110,8 @@ function DropdownMenuRoot({
           children: items.map((entry, index) => "separator" in entry && entry.separator ? /* @__PURE__ */jsx(DropdownMenuSeparator, {}, `separator-${index}`) : "checked" in entry && entry.checked !== void 0 ? /* @__PURE__ */jsx(DropdownMenuCheckboxItem, {
             checked: entry.checked,
             onCheckedChange: entry.onCheckedChange,
+            onSelect: entry.onSelect,
+            closeOnSelect: entry.closeOnSelect,
             disabled: entry.disabled,
             disabledReason: entry.disabledReason,
             shortcut: entry.shortcut,
@@ -112,6 +122,7 @@ function DropdownMenuRoot({
             disabled: entry.disabled,
             disabledReason: entry.disabledReason,
             destructive: entry.destructive,
+            closeOnSelect: entry.closeOnSelect,
             onSelect: entry.onSelect,
             children: entry.label
           }, entry.key ?? index))
@@ -139,13 +150,18 @@ const DropdownMenuTrigger = forwardRef(function DropdownMenuTrigger2({
   const handleKeyDown = e => {
     onKeyDown?.(e);
     if (e.repeat) return;
-    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
       swallowNextKeyUp(e.key);
       if (e.defaultPrevented) return;
       e.preventDefault();
       if (e.key === "ArrowDown") {
+        ctx.pendingFocusRef.current = "first";
+        if (!ctx.open) ctx.setOpen(true);
+      } else if (e.key === "ArrowUp") {
+        ctx.pendingFocusRef.current = "last";
         if (!ctx.open) ctx.setOpen(true);
       } else {
+        ctx.pendingFocusRef.current = "first";
         ctx.setOpen(!ctx.open);
       }
     }
@@ -163,7 +179,7 @@ const DropdownMenuTrigger = forwardRef(function DropdownMenuTrigger2({
 const DropdownMenuContent = forwardRef(function DropdownMenuContent2({
   children,
   maxHeight,
-  minWidth = 200,
+  minWidth,
   ...props
 }, forwardedRef) {
   const ctx = useDropdownMenuContext("Content");
@@ -171,11 +187,21 @@ const DropdownMenuContent = forwardRef(function DropdownMenuContent2({
     knobProps
   } = useResolvedKnobs();
   const innerRef = useRef(null);
+  const [triggerWidth, setTriggerWidth] = useState(void 0);
+  useLayoutEffect(() => {
+    if (!isWeb || !ctx.open) return;
+    const node = ctx.triggerRef.current;
+    if (node && typeof node.getBoundingClientRect === "function") {
+      setTriggerWidth(Math.ceil(node.getBoundingClientRect().width));
+    }
+  }, [ctx.open, ctx.triggerRef]);
+  const resolvedMinWidth = minWidth ?? triggerWidth;
   const composedRef = useComposedRefs(innerRef, forwardedRef);
   const typeahead = useRef({
     buffer: "",
     at: 0
   });
+  if (isWeb) ensureKeyboardModalityTracking();
   const getItems = useCallback(() => {
     const node = innerRef.current;
     if (!node) return [];
@@ -186,8 +212,13 @@ const DropdownMenuContent = forwardRef(function DropdownMenuContent2({
   }, []);
   const handleOpenAutoFocus = useCallback(event => {
     event.preventDefault();
-    requestAnimationFrame(() => focusItem(getItems()[0]));
-  }, [focusItem, getItems]);
+    const prefer = ctx.pendingFocusRef.current;
+    ctx.pendingFocusRef.current = "first";
+    requestAnimationFrame(() => {
+      const items = getItems();
+      focusItem(prefer === "last" ? items[items.length - 1] : items[0]);
+    });
+  }, [ctx, focusItem, getItems]);
   const handleCloseAutoFocus = useCallback(event => {
     event.preventDefault();
     const node = ctx.triggerRef.current;
@@ -258,7 +289,7 @@ const DropdownMenuContent = forwardRef(function DropdownMenuContent2({
     ...knobProps.elevatedSurface,
     padding: 0,
     overflow: "hidden",
-    minWidth,
+    minWidth: resolvedMinWidth,
     transition: knobProps.transition,
     enterStyle: {
       opacity: 0,
@@ -296,7 +327,8 @@ const DropdownMenuItemBody = forwardRef(function DropdownMenuItemBody2({
   disabledReason,
   destructive = false,
   onSelect,
-  closeOnSelect = true,
+  closeOnSelect,
+  closeOnSelectDefault = true,
   role = "menuitem",
   leading,
   ...props
@@ -306,6 +338,9 @@ const DropdownMenuItemBody = forwardRef(function DropdownMenuItemBody2({
     knobProps
   } = useResolvedKnobs();
   const theme = useTheme();
+  const [kbRing, setKbRing] = useState(false);
+  const [highlighted, setHighlighted] = useState(false);
+  const pointerIntentRef = useRef(false);
   warnBareDisabled({
     component: "DropdownMenu.Item",
     id: typeof children === "string" ? children : void 0,
@@ -314,12 +349,29 @@ const DropdownMenuItemBody = forwardRef(function DropdownMenuItemBody2({
   });
   const explainedDisable = disabled && Boolean(disabledReason?.trim());
   const iconColor = destructive ? theme.red11?.get() : theme.color12?.get();
+  const shouldCloseOnSelect = closeOnSelect ?? ctx.closeOnSelect ?? closeOnSelectDefault;
   const handleSelect = () => {
     if (disabled) return;
     onSelect?.();
-    if (closeOnSelect) ctx.close();
+    if (shouldCloseOnSelect) ctx.close();
   };
   const textColor = destructive ? "$red11" : componentColors.text.primary;
+  const highlightFill = destructive && !disabled ? {
+    hoverStyle: {
+      backgroundColor: "$red3"
+    },
+    pressStyle: {
+      backgroundColor: "$red4"
+    }
+  } : void 0;
+  const focusFill = destructive && !disabled ? {
+    backgroundColor: "$red3"
+  } : {
+    backgroundColor: componentColors.interactive.hover
+  };
+  const ring = kbRing ? keyboardFocusRingProps : {
+    outlineWidth: 0
+  };
   return /* @__PURE__ */jsxs(ItemRow, {
     ref: forwardedRef,
     role,
@@ -328,30 +380,50 @@ const DropdownMenuItemBody = forwardRef(function DropdownMenuItemBody2({
     minHeight: knobProps.sizeToken,
     transition: knobProps.transition,
     onPress: handleSelect,
+    ...highlightFill,
+    ...(explainedDisable ? {
+      paddingVertical: "$1.5"
+    } : {}),
+    ...props,
     ...(isWeb ? {
       tabIndex: -1,
-      [MENU_ITEM_ATTR]: ""
-      // Enter/Space activation is handled by the menu-level native
-      // keydown listener in Content (single source, no double-fire).
-    } : {}),
-    ...(destructive && !disabled ? {
-      hoverStyle: {
-        backgroundColor: "$red3"
+      [MENU_ITEM_ATTR]: "",
+      // Radix: pointer-move moves highlight so hover and keyboard
+      // never paint two rows at once. LC-71: ring only when the
+      // focus is keyboard-origin — pointer-move sets a local flag
+      // so wasKeyboardFocus() (still true until pointerdown) does
+      // not keep the ring after the mouse takes over.
+      onFocus: () => {
+        setHighlighted(true);
+        setKbRing(wasKeyboardFocus() && !pointerIntentRef.current);
+        pointerIntentRef.current = false;
       },
-      pressStyle: {
-        backgroundColor: "$red4"
+      onBlur: () => {
+        setHighlighted(false);
+        setKbRing(false);
       },
-      focusStyle: {
-        backgroundColor: "$red3"
+      onPointerMove: e => {
+        if (disabled) return;
+        if (e.pointerType && e.pointerType !== "mouse") return;
+        const node = e.currentTarget;
+        if (document.activeElement === node) return;
+        pointerIntentRef.current = true;
+        node.focus();
       },
-      focusVisibleStyle: {
-        backgroundColor: "$red3"
-      }
-    } : {}),
-    ...(explainedDisable ? {
-      paddingVertical: "$1.5"
+      "data-highlighted": highlighted ? "true" : void 0,
+      "data-mp-kb-ring": kbRing ? "true" : void 0
     } : {}),
-    ...props,
+    ...(kbRing ? keyboardFocusRingProps : {
+      outlineWidth: 0
+    }),
+    focusStyle: {
+      ...focusFill,
+      ...ring
+    },
+    focusVisibleStyle: {
+      ...focusFill,
+      ...ring
+    },
     children: [leading, icon ? /* @__PURE__ */jsx(View, {
       flexShrink: 0,
       alignItems: "center",
@@ -404,15 +476,6 @@ const DropdownMenuItemBody = forwardRef(function DropdownMenuItemBody2({
   });
 });
 const DropdownMenuItem = forwardRef(function DropdownMenuItem2(props, ref) {
-  if (props.destructive) {
-    return /* @__PURE__ */jsx(Intent, {
-      name: "error",
-      children: /* @__PURE__ */jsx(DropdownMenuItemBody, {
-        ref,
-        ...props
-      })
-    });
-  }
   return /* @__PURE__ */jsx(DropdownMenuItemBody, {
     ref,
     ...props
@@ -421,15 +484,18 @@ const DropdownMenuItem = forwardRef(function DropdownMenuItem2(props, ref) {
 const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({
   checked,
   onCheckedChange,
-  closeOnSelect = false,
+  onSelect,
   ...props
 }, ref) {
   return /* @__PURE__ */jsx(DropdownMenuItemBody, {
     ref,
     role: "menuitemcheckbox",
     "aria-checked": checked,
-    closeOnSelect,
-    onSelect: () => onCheckedChange?.(!checked),
+    closeOnSelectDefault: false,
+    onSelect: () => {
+      onCheckedChange?.(!checked);
+      onSelect?.();
+    },
     leading: /* @__PURE__ */jsx(View, {
       width: 18,
       flexShrink: 0,