@multiplatform.one/forms 6.6.0 → 7.0.0

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

@@ -26,9 +26,10 @@ __export(Combobox_exports, {
 });
 module.exports = __toCommonJS(Combobox_exports);
 var import_react = require("react");
-var import_react_i18next = require("react-i18next");
+var import_i18n = require("../../shared/i18n.cjs");
 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-web");
 var import_tamagui = require("tamagui");
 var import_Chip = require("../../Chip/index.cjs");
@@ -47,21 +48,15 @@ var import_jsx_runtime = require("react/jsx-runtime");
 const scrollArrowBuffer = 28;
 const 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: {
@@ -71,6 +66,12 @@ const ComboboxRow = (0, import_tamagui.styled)(import_tamagui.View, {
         backgroundColor: "transparent"
       }
     },
+    active: {
+      true: {
+        backgroundColor: import_colorRamps.formInputColors.background.focus
+      },
+      false: {}
+    },
     size: {
       "...size": val => ({
         height: val
@@ -78,6 +79,17 @@ const ComboboxRow = (0, import_tamagui.styled)(import_tamagui.View, {
     }
   }
 });
+function comboboxOptionId(baseId, index) {
+  return `${baseId ?? "combobox"}-opt-${index}`;
+}
+function comboboxListboxId(baseId) {
+  return `${baseId ?? "combobox"}-listbox`;
+}
+function listItemRingProps(keyboardRing) {
+  return keyboardRing ? import_theme.keyboardFocusRingProps : {
+    outlineWidth: 0
+  };
+}
 const GroupHeader = (0, import_tamagui.styled)(import_tamagui.Text, {
   name: "ComboboxGroupHeader",
   paddingHorizontal: "$3",
@@ -146,6 +158,8 @@ const ComboboxItem = (0, import_react.memo)(function ComboboxItem2({
   index,
   isSelected,
   isActive,
+  keyboardRing,
+  optionId,
   suppressHover,
   handlers
 }) {
@@ -161,6 +175,7 @@ const ComboboxItem = (0, import_react.memo)(function ComboboxItem2({
       ctx.listItemsRef.current[index] = node;
     },
     ...itemProps,
+    id: optionId,
     "data-combobox-index": index,
     "data-active": isActive,
     onKeyDown: e => {
@@ -176,9 +191,11 @@ const ComboboxItem = (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"
@@ -259,9 +276,10 @@ function FloatingComboboxCore({
   open: openProp,
   onOpenChange
 }) {
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   const [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
@@ -296,7 +314,7 @@ function FloatingComboboxCore({
   }, [multiple, value, onValueChange]);
   const filtered = (0, import_react.useMemo)(() => {
     if (onSearch || !filter) return options;
-    const query = filter.toLowerCase();
+    const query = filter.trim().toLowerCase();
     return options.filter(option => option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query) || option.keywords && option.keywords.toLowerCase().includes(query));
   }, [options, filter, onSearch]);
   const showCreateOption = (0, import_react.useMemo)(() => {
@@ -363,6 +381,11 @@ function FloatingComboboxCore({
   const searchInputRef = (0, import_react.useRef)(null);
   const listScrollRef = (0, import_react.useRef)(null);
   const keyboardNavRef = (0, import_react.useRef)(false);
+  const [listKeyboardRing, setListKeyboardRing] = (0, import_react.useState)(false);
+  const setKeyboardNav = (0, import_react.useCallback)(next => {
+    keyboardNavRef.current = next;
+    setListKeyboardRing(prev => prev === next ? prev : next);
+  }, []);
   const lastMousePosRef = (0, import_react.useRef)(null);
   const currentMousePosRef = (0, import_react.useRef)({
     x: 0,
@@ -419,6 +442,7 @@ function FloatingComboboxCore({
       lastMousePosRef.current = null;
       initialOrderRef.current = null;
       hasSearchedRef.current = false;
+      setKeyboardNav(false);
     }
   }, [open]);
   const activeIndexRef = (0, import_react.useRef)(activeIndex);
@@ -439,7 +463,7 @@ function FloatingComboboxCore({
     const triggerBounds = trigger.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
-    const minWidth = popoverWidth ?? triggerBounds.width + 8;
+    const minWidth = popoverWidth ?? triggerBounds.width;
     const maxWidth = viewportWidth - 20;
     dropdownElement.style.minWidth = `${minWidth}px`;
     dropdownElement.style.maxWidth = `${maxWidth}px`;
@@ -639,7 +663,6 @@ function FloatingComboboxCore({
     return () => document.removeEventListener("mousemove", onMove);
   }, [open, panel.refs]);
   (0, import_react.useLayoutEffect)(() => {
-    keyboardNavRef.current = false;
     const len = sortedFiltered.length + (showCreateOption ? 1 : 0);
     listItemsRef.current.length = len;
     justResetFromFilterRef.current = true;
@@ -672,7 +695,7 @@ function FloatingComboboxCore({
     activeIndex,
     onNavigate: index => {
       if (index !== null) {
-        keyboardNavRef.current = true;
+        setKeyboardNav(true);
         lastKeyboardNavTimeRef.current = Date.now();
         lastMousePosRef.current = {
           ...currentMousePosRef.current
@@ -742,8 +765,8 @@ function FloatingComboboxCore({
       x: clientX,
       y: clientY
     };
-    keyboardNavRef.current = false;
-  }, []);
+    setKeyboardNav(false);
+  }, [setKeyboardNav]);
   const handlersRef = (0, import_react.useRef)({});
   const handleSelectRef = (0, import_react.useRef)(handleSelect);
   handleSelectRef.current = handleSelect;
@@ -791,11 +814,14 @@ function FloatingComboboxCore({
     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);
       }
     }
   });
+  const listboxId = comboboxListboxId(id);
+  const activeDescendant = open && activeIndex != null && activeIndex >= 0 ? comboboxOptionId(id, activeIndex) : void 0;
   const boxEventProps = {};
   for (const [key, val] of Object.entries(referenceProps)) {
     if (key === "ref" || typeof val === "function") boxEventProps[key] = val;
@@ -805,8 +831,13 @@ function FloatingComboboxCore({
   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;
   const totalNavigableItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
   const createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
@@ -816,7 +847,7 @@ function FloatingComboboxCore({
     if (isDown || isUp) {
       e.preventDefault();
       e.stopPropagation();
-      keyboardNavRef.current = true;
+      setKeyboardNav(true);
       lastKeyboardNavTimeRef.current = Date.now();
       lastMousePosRef.current = {
         ...currentMousePosRef.current
@@ -826,7 +857,7 @@ function FloatingComboboxCore({
         return isDown ? next >= totalNavigableItems ? 0 : next : next < 0 ? totalNavigableItems - 1 : next;
       });
     }
-  }, [totalNavigableItems]);
+  }, [totalNavigableItems, setKeyboardNav]);
   handlersRef.current = {
     getItemProps,
     onSelect: handleSelect,
@@ -841,7 +872,7 @@ function FloatingComboboxCore({
     const isUp = event.key === "ArrowUp" || event.key === "k";
     if (isDown) {
       event.preventDefault();
-      keyboardNavRef.current = true;
+      setKeyboardNav(true);
       lastKeyboardNavTimeRef.current = Date.now();
       lastMousePosRef.current = {
         ...currentMousePosRef.current
@@ -852,7 +883,7 @@ function FloatingComboboxCore({
       });
     } else if (isUp) {
       event.preventDefault();
-      keyboardNavRef.current = true;
+      setKeyboardNav(true);
       lastKeyboardNavTimeRef.current = Date.now();
       lastMousePosRef.current = {
         ...currentMousePosRef.current
@@ -861,6 +892,16 @@ function FloatingComboboxCore({
         const 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) {
@@ -877,7 +918,7 @@ function FloatingComboboxCore({
       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)(() => {
     if (activeIndex == null) return;
     const scrollContainer = listScrollRef.current;
@@ -921,6 +962,10 @@ function FloatingComboboxCore({
     width: "100%",
     alignSelf: "stretch",
     flexShrink: 0,
+    outlineWidth: 0,
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2
+    }),
     style: {
       display: "flex",
       alignItems: "stretch",
@@ -933,6 +978,7 @@ function FloatingComboboxCore({
     cursor: disabled ? "not-allowed" : "pointer",
     disabled,
     size: knobProps.sizeToken,
+    suppressFocusRing: open,
     ...(inTableCell ?
     // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
     {
@@ -1019,7 +1065,8 @@ function FloatingComboboxCore({
         outlineWidth: 0,
         pointerEvents: panel.visible ? "auto" : "none",
         ...getFloatingProps({
-          ref: panel.refs.setFloating
+          ref: panel.refs.setFloating,
+          id: listboxId
         }),
         style: {
           position: "fixed",
@@ -1049,6 +1096,9 @@ function FloatingComboboxCore({
             borderBottomColor: import_colorRamps.formCommonColors.divider,
             borderRadius: 0,
             elevation: void 0,
+            ...(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",
@@ -1060,7 +1110,11 @@ function FloatingComboboxCore({
                 defaultValue: "",
                 onChangeText: text => 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, {
@@ -1106,8 +1160,10 @@ function FloatingComboboxCore({
             children: [multiple ? sortedFiltered.map((option, index) => /* @__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)) : groupedItems.map((item, _i) => item.type === "header" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
@@ -1116,17 +1172,22 @@ function FloatingComboboxCore({
             }, `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"
@@ -1147,14 +1208,16 @@ function FloatingComboboxCore({
                 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"
@@ -1282,9 +1345,10 @@ function NativeComboboxCore({
   open: openProp,
   onOpenChange
 }) {
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   const [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
@@ -1299,6 +1363,10 @@ function NativeComboboxCore({
   const [internalFilter, setInternalFilter] = (0, import_react.useState)("");
   const filter = searchValue !== void 0 ? searchValue : internalFilter;
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
+  const [listKeyboardRing, setListKeyboardRing] = (0, import_react.useState)(false);
+  const setKeyboardNav = (0, import_react.useCallback)(next => {
+    setListKeyboardRing(prev => prev === next ? prev : next);
+  }, []);
   const listRef = (0, import_react.useRef)(null);
   const fieldA11y = (0, import_fieldLayout.useFieldA11y)();
   const textColor = knobProps.textAccentColor;
@@ -1323,7 +1391,7 @@ function NativeComboboxCore({
   }, [multiple, value, onValueChange]);
   const filtered = (0, import_react.useMemo)(() => {
     if (onSearch || !filter) return options;
-    const query = filter.toLowerCase();
+    const query = filter.trim().toLowerCase();
     return options.filter(option => option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query) || option.keywords && option.keywords.toLowerCase().includes(query));
   }, [options, filter, onSearch]);
   const showCreateOption = (0, import_react.useMemo)(() => {
@@ -1379,6 +1447,8 @@ function NativeComboboxCore({
   }, [open]);
   const totalItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
   const createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  const listboxId = comboboxListboxId(id);
+  const activeDescendant = open && activeIndex != null && activeIndex >= 0 ? comboboxOptionId(id, activeIndex) : void 0;
   const handleSelect = (0, import_react.useCallback)(option => {
     if (multiple) {
       const current = Array.isArray(value) ? value : value ? [value] : [];
@@ -1394,6 +1464,7 @@ function NativeComboboxCore({
     const isUp = e.key === "ArrowUp" || e.key === "k";
     if (isDown) {
       e.preventDefault();
+      setKeyboardNav(true);
       listRef.current?.focus();
       setActiveIndex(prev => {
         const next = prev == null ? 0 : prev + 1;
@@ -1401,29 +1472,48 @@ function NativeComboboxCore({
       });
     } else if (isUp) {
       e.preventDefault();
+      setKeyboardNav(true);
       listRef.current?.focus();
       setActiveIndex(prev => {
         const 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]);
   const handleListKeyDown = (0, import_react.useCallback)(e => {
     if (totalItems === 0) return;
     const isDown = e.key === "ArrowDown" || e.key === "j";
     const isUp = e.key === "ArrowUp" || e.key === "k";
     if (isDown) {
       e.preventDefault();
+      setKeyboardNav(true);
       setActiveIndex(prev => {
         const next = prev == null ? 0 : prev + 1;
         return next >= totalItems ? 0 : next;
       });
     } else if (isUp) {
       e.preventDefault();
+      setKeyboardNav(true);
       setActiveIndex(prev => {
         const 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) {
@@ -1433,7 +1523,7 @@ function NativeComboboxCore({
         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)(() => {
     if (!open || typeof document === "undefined") return;
     const onKeyDown = e => {
@@ -1474,11 +1564,16 @@ function NativeComboboxCore({
   /* @__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: [searchError ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       ...knobProps.panelPadding,
       alignItems: "center",
@@ -1500,6 +1595,12 @@ function NativeComboboxCore({
           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"
@@ -1507,7 +1608,10 @@ function NativeComboboxCore({
             height: knobProps.sizeToken
           }),
           onPress: import_tamagui.isWeb ? () => handleSelect(option) : void 0,
-          onMouseEnter: () => setActiveIndex(i),
+          onMouseEnter: () => {
+            setKeyboardNav(false);
+            setActiveIndex(i);
+          },
           ...(!import_tamagui.isWeb ? {
             pointerEvents: "none"
           } : {}),
@@ -1567,8 +1671,16 @@ function NativeComboboxCore({
         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: () => setActiveIndex(createOptionIndex),
+        onMouseEnter: () => {
+          setKeyboardNav(false);
+          setActiveIndex(createOptionIndex);
+        },
         hoverStyle: activeIndex != null ? {
           backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
         } : {
@@ -1596,8 +1708,16 @@ function NativeComboboxCore({
       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: () => setActiveIndex(createOptionIndex),
+      onMouseEnter: () => {
+        setKeyboardNav(false);
+        setActiveIndex(createOptionIndex);
+      },
       hoverStyle: activeIndex != null ? {
         backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
       } : {
@@ -1651,6 +1771,10 @@ function NativeComboboxCore({
     width: "100%",
     alignSelf: "stretch",
     flexShrink: 0,
+    outlineWidth: 0,
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2
+    }),
     style: {
       display: "flex",
       alignItems: "stretch",
@@ -1662,6 +1786,7 @@ function NativeComboboxCore({
     cursor: disabled ? "not-allowed" : "pointer",
     disabled,
     size: knobProps.sizeToken,
+    suppressFocusRing: open,
     ...(inTableCell ?
     // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
     {
@@ -1675,9 +1800,13 @@ function NativeComboboxCore({
       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 ?? (!hasLabel ? placeholder : void 0),
-      "aria-labelledby": !ariaLabel && hasLabel && id ? `${id}-label` : void 0,
       "aria-describedby": describedBy,
       tabIndex: disabled ? -1 : 0
     } : {
@@ -1687,6 +1816,7 @@ function NativeComboboxCore({
     onKeyDown: e => {
       if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
         e.preventDefault();
+        setKeyboardNav(true);
         if (!open) handleOpenChange(true);
       }
     },
@@ -1829,7 +1959,7 @@ function Combobox({
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const placeholder = placeholderProp ?? t("Select...");
   const hasLabel = Boolean(label);
   const searchPlaceholder = searchPlaceholderProp ?? t("Search...");