@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/cjs/fields/Combobox/index.native.js

@@ -29,9 +29,10 @@ __export(Combobox_exports, {
 module.exports = __toCommonJS(Combobox_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_react_i18next = require("react-i18next");
+var import_i18n = require("../../shared/i18n.native.js");
 var import_react2 = require("@phosphor-icons/react");
 var import_react3 = require("@floating-ui/react");
+var import_theme = require("@multiplatform.one/theme");
 var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
 var import_Chip = require("../../Chip/index.native.js");
@@ -49,21 +50,15 @@ var import_tableCellContext = require("../../shared/tableCellContext.native.js")
 var scrollArrowBuffer = 28;
 var ComboboxRow = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "ComboboxRow",
-  flexDirection: "row",
-  alignItems: "center",
+  ...import_theme.menuRowFrame,
   gap: "$2",
-  paddingHorizontal: "$3",
   cursor: "default",
-  outlineStyle: "none",
   hoverStyle: {
     backgroundColor: import_colorRamps.formInputColors.background.focus
   },
-  focusStyle: {
-    outlineStyle: "none"
-  },
-  focusVisibleStyle: {
-    outlineStyle: "none"
-  },
+  focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+    outlineOffset: -2
+  }),
   variants: {
     selected: {
       true: {
@@ -73,6 +68,12 @@ var ComboboxRow = (0, import_tamagui.styled)(import_tamagui.View, {
         backgroundColor: "transparent"
       }
     },
+    active: {
+      true: {
+        backgroundColor: import_colorRamps.formInputColors.background.focus
+      },
+      false: {}
+    },
     size: {
       "...size": function (val) {
         return {
@@ -82,6 +83,17 @@ var ComboboxRow = (0, import_tamagui.styled)(import_tamagui.View, {
     }
   }
 });
+function comboboxOptionId(baseId, index) {
+  return `${baseId !== null && baseId !== void 0 ? baseId : "combobox"}-opt-${index}`;
+}
+function comboboxListboxId(baseId) {
+  return `${baseId !== null && baseId !== void 0 ? baseId : "combobox"}-listbox`;
+}
+function listItemRingProps(keyboardRing) {
+  return keyboardRing ? import_theme.keyboardFocusRingProps : {
+    outlineWidth: 0
+  };
+}
 var GroupHeader = (0, import_tamagui.styled)(import_tamagui.Text, {
   name: "ComboboxGroupHeader",
   paddingHorizontal: "$3",
@@ -235,6 +247,8 @@ var ComboboxItem = /* @__PURE__ */(0, import_react.memo)(function ComboboxItem2(
     index,
     isSelected,
     isActive,
+    keyboardRing,
+    optionId,
     suppressHover,
     handlers
   } = param;
@@ -250,6 +264,7 @@ var ComboboxItem = /* @__PURE__ */(0, import_react.memo)(function ComboboxItem2(
       ctx.listItemsRef.current[index] = node;
     },
     ...itemProps,
+    id: optionId,
     "data-combobox-index": index,
     "data-active": isActive,
     onKeyDown: function onKeyDown(e) {
@@ -266,9 +281,11 @@ var ComboboxItem = /* @__PURE__ */(0, import_react.memo)(function ComboboxItem2(
     role: "option",
     tabIndex: -1,
     selected: isSelected,
+    active: isActive,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
     size: ctx.knobProps.sizeToken,
+    ...listItemRingProps(Boolean(keyboardRing)),
     ...(suppressHover ? {
       hoverStyle: {
         backgroundColor: isActive ? import_colorRamps.formInputColors.background.focus : isSelected ? import_colorRamps.formInputColors.background.base : "transparent"
@@ -351,9 +368,10 @@ function FloatingComboboxCore(param) {
     onOpenChange
   } = param;
   var _ref;
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
   var {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
@@ -426,7 +444,7 @@ function FloatingComboboxCore(param) {
   }, [multiple, value, onValueChange]);
   var filtered = (0, import_react.useMemo)(function () {
     if (onSearch || !filter) return options;
-    var query = filter.toLowerCase();
+    var query = filter.trim().toLowerCase();
     return options.filter(function (option) {
       return option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query) || option.keywords && option.keywords.toLowerCase().includes(query);
     });
@@ -507,6 +525,13 @@ function FloatingComboboxCore(param) {
   var searchInputRef = (0, import_react.useRef)(null);
   var listScrollRef = (0, import_react.useRef)(null);
   var keyboardNavRef = (0, import_react.useRef)(false);
+  var [listKeyboardRing, setListKeyboardRing] = (0, import_react.useState)(false);
+  var setKeyboardNav = (0, import_react.useCallback)(function (next) {
+    keyboardNavRef.current = next;
+    setListKeyboardRing(function (prev) {
+      return prev === next ? prev : next;
+    });
+  }, []);
   var lastMousePosRef = (0, import_react.useRef)(null);
   var currentMousePosRef = (0, import_react.useRef)({
     x: 0,
@@ -563,6 +588,7 @@ function FloatingComboboxCore(param) {
       lastMousePosRef.current = null;
       initialOrderRef.current = null;
       hasSearchedRef.current = false;
+      setKeyboardNav(false);
     }
   }, [open]);
   var activeIndexRef = (0, import_react.useRef)(activeIndex);
@@ -584,7 +610,7 @@ function FloatingComboboxCore(param) {
     var triggerBounds = trigger.getBoundingClientRect();
     var viewportHeight = window.innerHeight;
     var viewportWidth = window.innerWidth;
-    var minWidth = popoverWidth !== null && popoverWidth !== void 0 ? popoverWidth : triggerBounds.width + 8;
+    var minWidth = popoverWidth !== null && popoverWidth !== void 0 ? popoverWidth : triggerBounds.width;
     var maxWidth = viewportWidth - 20;
     dropdownElement.style.minWidth = `${minWidth}px`;
     dropdownElement.style.maxWidth = `${maxWidth}px`;
@@ -797,7 +823,6 @@ function FloatingComboboxCore(param) {
   }, [open, panel.refs]);
   (0, import_react.useLayoutEffect)(function () {
     var _currentMousePosRef_current;
-    keyboardNavRef.current = false;
     var len = sortedFiltered.length + (showCreateOption ? 1 : 0);
     listItemsRef.current.length = len;
     justResetFromFilterRef.current = true;
@@ -831,7 +856,7 @@ function FloatingComboboxCore(param) {
     activeIndex,
     onNavigate: function onNavigate(index) {
       if (index !== null) {
-        keyboardNavRef.current = true;
+        setKeyboardNav(true);
         lastKeyboardNavTimeRef.current = Date.now();
         lastMousePosRef.current = {
           ...currentMousePosRef.current
@@ -905,8 +930,8 @@ function FloatingComboboxCore(param) {
       x: clientX,
       y: clientY
     };
-    keyboardNavRef.current = false;
-  }, []);
+    setKeyboardNav(false);
+  }, [setKeyboardNav]);
   var handlersRef = (0, import_react.useRef)({});
   var handleSelectRef = (0, import_react.useRef)(handleSelect);
   handleSelectRef.current = handleSelect;
@@ -956,11 +981,14 @@ function FloatingComboboxCore(param) {
     onKeyDown(event) {
       if (event.key === "Enter" || event.code === "Space" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "j" || event.key === "k") {
         event.preventDefault();
+        setKeyboardNav(true);
         setOpen(true);
         setActiveIndex(0);
       }
     }
   });
+  var listboxId = comboboxListboxId(id);
+  var activeDescendant = open && activeIndex != null && activeIndex >= 0 ? comboboxOptionId(id, activeIndex) : void 0;
   var boxEventProps = {};
   var _iteratorNormalCompletion1 = true,
     _didIteratorError1 = false,
@@ -989,8 +1017,13 @@ function FloatingComboboxCore(param) {
   boxEventProps.role = "combobox";
   boxEventProps["aria-haspopup"] = "listbox";
   boxEventProps["aria-expanded"] = open;
+  boxEventProps["aria-controls"] = listboxId;
+  if (hideSearch) {
+    boxEventProps["aria-autocomplete"] = "list";
+    if (activeDescendant) boxEventProps["aria-activedescendant"] = activeDescendant;
+  }
   if (id) boxEventProps.id = id;
-  if (ariaLabel) boxEventProps["aria-label"] = ariaLabel;else if (hasLabel && id) boxEventProps["aria-labelledby"] = `${id}-label`;else if (placeholder) boxEventProps["aria-label"] = placeholder;
+  if (ariaLabel) boxEventProps["aria-label"] = ariaLabel;else if (!(hasLabel && id) && placeholder) boxEventProps["aria-label"] = placeholder;
   if (describedBy) boxEventProps["aria-describedby"] = describedBy;
   var totalNavigableItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
   var createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
@@ -1000,7 +1033,7 @@ function FloatingComboboxCore(param) {
     if (isDown || isUp) {
       e.preventDefault();
       e.stopPropagation();
-      keyboardNavRef.current = true;
+      setKeyboardNav(true);
       lastKeyboardNavTimeRef.current = Date.now();
       lastMousePosRef.current = {
         ...currentMousePosRef.current
@@ -1010,7 +1043,7 @@ function FloatingComboboxCore(param) {
         return isDown ? next >= totalNavigableItems ? 0 : next : next < 0 ? totalNavigableItems - 1 : next;
       });
     }
-  }, [totalNavigableItems]);
+  }, [totalNavigableItems, setKeyboardNav]);
   handlersRef.current = {
     getItemProps,
     onSelect: handleSelect,
@@ -1025,7 +1058,7 @@ function FloatingComboboxCore(param) {
     var isUp = event.key === "ArrowUp" || event.key === "k";
     if (isDown) {
       event.preventDefault();
-      keyboardNavRef.current = true;
+      setKeyboardNav(true);
       lastKeyboardNavTimeRef.current = Date.now();
       lastMousePosRef.current = {
         ...currentMousePosRef.current
@@ -1036,7 +1069,7 @@ function FloatingComboboxCore(param) {
       });
     } else if (isUp) {
       event.preventDefault();
-      keyboardNavRef.current = true;
+      setKeyboardNav(true);
       lastKeyboardNavTimeRef.current = Date.now();
       lastMousePosRef.current = {
         ...currentMousePosRef.current
@@ -1045,6 +1078,16 @@ function FloatingComboboxCore(param) {
         var next = prev == null ? totalNavigableItems - 1 : prev - 1;
         return next < 0 ? totalNavigableItems - 1 : next;
       });
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      setKeyboardNav(true);
+      lastKeyboardNavTimeRef.current = Date.now();
+      setActiveIndex(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      setKeyboardNav(true);
+      lastKeyboardNavTimeRef.current = Date.now();
+      setActiveIndex(Math.max(0, totalNavigableItems - 1));
     } else if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       if (activeIndex === createOptionIndex && showCreateOption) {
@@ -1061,7 +1104,7 @@ function FloatingComboboxCore(param) {
       event.preventDefault();
       setOpen(false);
     }
-  }, [sortedFiltered, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple]);
+  }, [sortedFiltered, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple, setKeyboardNav]);
   (0, import_react.useEffect)(function () {
     if (activeIndex == null) return;
     var scrollContainer = listScrollRef.current;
@@ -1107,6 +1150,10 @@ function FloatingComboboxCore(param) {
     width: "100%",
     alignSelf: "stretch",
     flexShrink: 0,
+    outlineWidth: 0,
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2
+    }),
     style: {
       display: "flex",
       alignItems: "stretch",
@@ -1121,6 +1168,10 @@ function FloatingComboboxCore(param) {
     cursor: disabled ? "not-allowed" : "pointer",
     disabled,
     size: knobProps.sizeToken,
+    // One surface owner (OVERLAY_ANCHOR_GAP rule): the open panel covers
+    // this trigger (panel top = trigger top), so the trigger's outer focus
+    // ring must not paint — it would ghost around the panel's corners.
+    suppressFocusRing: open,
     ...(inTableCell ?
     // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
     {
@@ -1215,7 +1266,8 @@ function FloatingComboboxCore(param) {
         outlineWidth: 0,
         pointerEvents: panel.visible ? "auto" : "none",
         ...getFloatingProps({
-          ref: panel.refs.setFloating
+          ref: panel.refs.setFloating,
+          id: listboxId
         }),
         style: {
           position: "fixed",
@@ -1245,6 +1297,10 @@ function FloatingComboboxCore(param) {
             borderBottomColor: import_colorRamps.formCommonColors.divider,
             borderRadius: 0,
             elevation: void 0,
+            // LC-71: search is text-entry — ring the whole row (magnifier included).
+            ...(import_tamagui.isWeb ? {
+              className: "mp-composite-ring"
+            } : void 0),
             children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
               children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
                 adornment: "leading",
@@ -1258,7 +1314,11 @@ function FloatingComboboxCore(param) {
                   return setInternalFilter(text);
                 },
                 placeholder: searchPlaceholder,
-                onKeyDown: handleSearchKeyDown
+                onKeyDown: handleSearchKeyDown,
+                "aria-autocomplete": "list",
+                "aria-controls": listboxId,
+                "aria-activedescendant": activeDescendant,
+                "aria-expanded": open
               })
             }), loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
               children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
@@ -1307,8 +1367,10 @@ function FloatingComboboxCore(param) {
               return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComboboxItem, {
                 option,
                 index,
+                optionId: comboboxOptionId(id, index),
                 isSelected: isSelected(option.value),
                 isActive: index === activeIndex,
+                keyboardRing: index === activeIndex && listKeyboardRing,
                 suppressHover: activeIndex != null,
                 handlers: handlersRef
               }, option.value);
@@ -1319,18 +1381,23 @@ function FloatingComboboxCore(param) {
               }, `header-${item.label}`) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComboboxItem, {
                 option: item.option,
                 index: item.flatIndex,
+                optionId: comboboxOptionId(id, item.flatIndex),
                 isSelected: isSelected(item.option.value),
                 isActive: item.flatIndex === activeIndex,
+                keyboardRing: item.flatIndex === activeIndex && listKeyboardRing,
                 suppressHover: activeIndex != null,
                 handlers: handlersRef
               }, item.option.value);
             }), showCreateOption && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ComboboxRow, {
               role: "option",
               tabIndex: -1,
+              id: comboboxOptionId(id, createOptionIndex),
               selected: false,
+              active: createOptionIndex === activeIndex,
               size: knobProps.sizeToken,
               "data-combobox-index": createOptionIndex,
               "data-active": createOptionIndex === activeIndex,
+              ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
               backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : void 0,
               hoverStyle: activeIndex != null ? {
                 backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
@@ -1351,14 +1418,16 @@ function FloatingComboboxCore(param) {
                 children: createLabel.replace("{value}", filter.trim())
               })]
             })]
-          }, filter) : showCreateOption ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-            flexDirection: "row",
-            alignItems: "center",
-            gap: "$2",
-            paddingHorizontal: "$3",
-            height: knobProps.sizeToken,
+          }, filter) : showCreateOption ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ComboboxRow, {
+            role: "option",
+            tabIndex: -1,
+            id: comboboxOptionId(id, createOptionIndex),
+            selected: false,
+            active: createOptionIndex === activeIndex,
+            size: knobProps.sizeToken,
             "data-combobox-index": createOptionIndex,
             "data-active": createOptionIndex === activeIndex,
+            ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
             onPress: handleCreate,
             hoverStyle: activeIndex != null ? {
               backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
@@ -1494,9 +1563,10 @@ function NativeComboboxCore(param) {
   } = param;
   var _ref, _knobProps_transition, _ref1, _ref2;
   var _theme_color7;
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
   var {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
@@ -1511,6 +1581,12 @@ function NativeComboboxCore(param) {
   var [internalFilter, setInternalFilter] = (0, import_react.useState)("");
   var filter = searchValue !== void 0 ? searchValue : internalFilter;
   var [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
+  var [listKeyboardRing, setListKeyboardRing] = (0, import_react.useState)(false);
+  var setKeyboardNav = (0, import_react.useCallback)(function (next) {
+    setListKeyboardRing(function (prev) {
+      return prev === next ? prev : next;
+    });
+  }, []);
   var listRef = (0, import_react.useRef)(null);
   var fieldA11y = (0, import_fieldLayout.useFieldA11y)();
   var textColor = knobProps.textAccentColor;
@@ -1573,7 +1649,7 @@ function NativeComboboxCore(param) {
   }, [multiple, value, onValueChange]);
   var filtered = (0, import_react.useMemo)(function () {
     if (onSearch || !filter) return options;
-    var query = filter.toLowerCase();
+    var query = filter.trim().toLowerCase();
     return options.filter(function (option) {
       return option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query) || option.keywords && option.keywords.toLowerCase().includes(query);
     });
@@ -1644,6 +1720,8 @@ function NativeComboboxCore(param) {
   }, [open]);
   var totalItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
   var createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  var listboxId = comboboxListboxId(id);
+  var activeDescendant = open && activeIndex != null && activeIndex >= 0 ? comboboxOptionId(id, activeIndex) : void 0;
   var handleSelect = (0, import_react.useCallback)(function (option) {
     if (multiple) {
       var current = Array.isArray(value) ? value : value ? [value] : [];
@@ -1662,6 +1740,7 @@ function NativeComboboxCore(param) {
     if (isDown) {
       var _listRef_current;
       e.preventDefault();
+      setKeyboardNav(true);
       (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.focus();
       setActiveIndex(function (prev) {
         var next = prev == null ? 0 : prev + 1;
@@ -1670,29 +1749,48 @@ function NativeComboboxCore(param) {
     } else if (isUp) {
       var _listRef_current1;
       e.preventDefault();
+      setKeyboardNav(true);
       (_listRef_current1 = listRef.current) === null || _listRef_current1 === void 0 ? void 0 : _listRef_current1.focus();
       setActiveIndex(function (prev) {
         var next = prev == null ? totalItems - 1 : prev - 1;
         return next < 0 ? totalItems - 1 : next;
       });
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setKeyboardNav(true);
+      setActiveIndex(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setKeyboardNav(true);
+      setActiveIndex(Math.max(0, totalItems - 1));
     }
-  }, [totalItems]);
+  }, [totalItems, setKeyboardNav]);
   var handleListKeyDown = (0, import_react.useCallback)(function (e) {
     if (totalItems === 0) return;
     var isDown = e.key === "ArrowDown" || e.key === "j";
     var isUp = e.key === "ArrowUp" || e.key === "k";
     if (isDown) {
       e.preventDefault();
+      setKeyboardNav(true);
       setActiveIndex(function (prev) {
         var next = prev == null ? 0 : prev + 1;
         return next >= totalItems ? 0 : next;
       });
     } else if (isUp) {
       e.preventDefault();
+      setKeyboardNav(true);
       setActiveIndex(function (prev) {
         var next = prev == null ? totalItems - 1 : prev - 1;
         return next < 0 ? totalItems - 1 : next;
       });
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setKeyboardNav(true);
+      setActiveIndex(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setKeyboardNav(true);
+      setActiveIndex(Math.max(0, totalItems - 1));
     } else if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       if (activeIndex === createOptionIndex && showCreateOption) {
@@ -1702,7 +1800,7 @@ function NativeComboboxCore(param) {
         if (e.key === "Enter" || !multiple) setOpen(false);
       }
     }
-  }, [totalItems, createOptionIndex, showCreateOption, activeIndex, sortedFiltered, handleCreate, handleSelect, multiple]);
+  }, [totalItems, createOptionIndex, showCreateOption, activeIndex, sortedFiltered, handleCreate, handleSelect, multiple, setKeyboardNav]);
   (0, import_react.useEffect)(function () {
     if (!open || typeof document === "undefined") return;
     var onKeyDown = function onKeyDown2(e) {
@@ -1745,11 +1843,16 @@ function NativeComboboxCore(param) {
   /* @__PURE__ */
   (0, import_jsx_runtime.jsxs)(import_tamagui.View, {
     ref: listRef,
-    ...(import_tamagui.isWeb ? {
+    ...(import_tamagui.isWeb ?
+    // role="listbox" is a valid ARIA role but outside RN's `Role` union;
+    // this web-only bag forwards it to the DOM node (house Record cast).
+    {
       tabIndex: 0,
-      onKeyDown: handleListKeyDown
+      onKeyDown: handleListKeyDown,
+      role: "listbox",
+      id: listboxId
     } : void 0),
-    outlineStyle: "none",
+    outlineWidth: 0,
     children: [
     // Native sheet: flex={1} inside FloatingPanel ScrollView collapses rows.
     searchError ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
@@ -1773,6 +1876,12 @@ function NativeComboboxCore(param) {
           alignItems: "center",
           gap: "$2",
           paddingHorizontal: "$3",
+          id: comboboxOptionId(id, i),
+          role: "option",
+          "aria-selected": selected,
+          "data-combobox-index": i,
+          "data-active": active,
+          ...listItemRingProps(active && listKeyboardRing),
           ...(option.description ? {
             minHeight: knobProps.sizeToken,
             paddingVertical: "$2"
@@ -1783,7 +1892,8 @@ function NativeComboboxCore(param) {
             return handleSelect(option);
           } : void 0,
           onMouseEnter: function onMouseEnter() {
-            return setActiveIndex(i);
+            setKeyboardNav(false);
+            setActiveIndex(i);
           },
           ...(!import_tamagui.isWeb ? {
             pointerEvents: "none"
@@ -1846,9 +1956,15 @@ function NativeComboboxCore(param) {
         gap: "$2",
         paddingHorizontal: "$3",
         height: knobProps.sizeToken,
+        role: "option",
+        id: comboboxOptionId(id, createOptionIndex),
+        "data-combobox-index": createOptionIndex,
+        "data-active": createOptionIndex === activeIndex,
+        ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
         onPress: handleCreate,
         onMouseEnter: function onMouseEnter() {
-          return setActiveIndex(createOptionIndex);
+          setKeyboardNav(false);
+          setActiveIndex(createOptionIndex);
         },
         hoverStyle: activeIndex != null ? {
           backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
@@ -1877,9 +1993,15 @@ function NativeComboboxCore(param) {
       gap: "$2",
       paddingHorizontal: "$3",
       height: knobProps.sizeToken,
+      role: "option",
+      id: comboboxOptionId(id, createOptionIndex),
+      "data-combobox-index": createOptionIndex,
+      "data-active": createOptionIndex === activeIndex,
+      ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
       onPress: handleCreate,
       onMouseEnter: function onMouseEnter() {
-        return setActiveIndex(createOptionIndex);
+        setKeyboardNav(false);
+        setActiveIndex(createOptionIndex);
       },
       hoverStyle: activeIndex != null ? {
         backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
@@ -1934,6 +2056,10 @@ function NativeComboboxCore(param) {
     width: "100%",
     alignSelf: "stretch",
     flexShrink: 0,
+    outlineWidth: 0,
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2
+    }),
     style: {
       display: "flex",
       alignItems: "stretch",
@@ -1947,6 +2073,10 @@ function NativeComboboxCore(param) {
     cursor: disabled ? "not-allowed" : "pointer",
     disabled,
     size: knobProps.sizeToken,
+    // One surface owner (OVERLAY_ANCHOR_GAP rule): the open FloatingPanel
+    // covers this trigger (panel top = trigger top), so the trigger's outer
+    // focus ring must not paint — it would ghost around the panel's corners.
+    suppressFocusRing: open,
     ...(inTableCell ?
     // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
     {
@@ -1965,9 +2095,13 @@ function NativeComboboxCore(param) {
       role: "combobox",
       "aria-haspopup": "listbox",
       "aria-expanded": open,
-      // Standalone (no label): fall back to placeholder for the name
+      "aria-controls": listboxId,
+      "aria-activedescendant": hideSearch ? activeDescendant : void 0,
+      "aria-autocomplete": hideSearch ? "list" : void 0,
+      // Standalone (no label): fall back to placeholder for the name.
+      // Labelled: the sibling Label wires `aria-labelledby` onto this id
+      // itself — naming it here too doubles the spoken name.
       "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : !hasLabel ? placeholder : void 0,
-      "aria-labelledby": !ariaLabel && hasLabel && id ? `${id}-label` : void 0,
       "aria-describedby": describedBy,
       tabIndex: disabled ? -1 : 0
     } : {
@@ -1981,6 +2115,7 @@ function NativeComboboxCore(param) {
     onKeyDown: function onKeyDown(e) {
       if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
         e.preventDefault();
+        setKeyboardNav(true);
         if (!open) handleOpenChange(true);
       }
     },
@@ -2132,7 +2267,7 @@ function Combobox(param) {
   } = param;
   var {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   var placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : t("Select...");
   var hasLabel = Boolean(label);
   var searchPlaceholder = searchPlaceholderProp !== null && searchPlaceholderProp !== void 0 ? searchPlaceholderProp : t("Search...");