@multiplatform.one/forms 6.6.0 → 7.0.0

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../../shared/i18n.native.js";
 import { CaretDownIcon, CheckIcon, MagnifyingGlassIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 import { useClick, useDismiss, useInteractions, useListNavigation, useRole, FloatingFocusManager } from "@floating-ui/react";
+import { ensureFocusVisibleRing, ensureKeyboardModalityTracking, keyboardFocusRingProps, menuRowFrame } from "@multiplatform.one/theme";
 import { Pressable as RNPressable } from "react-native";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Chip } from "../../Chip/index.native.js";
@@ -20,21 +21,15 @@ import { useIsInTableCell } from "../../shared/tableCellContext.native.js";
 var scrollArrowBuffer = 28;
 var ComboboxRow = styled(View, {
   name: "ComboboxRow",
-  flexDirection: "row",
-  alignItems: "center",
+  ...menuRowFrame,
   gap: "$2",
-  paddingHorizontal: "$3",
   cursor: "default",
-  outlineStyle: "none",
   hoverStyle: {
     backgroundColor: formInputColors.background.focus
   },
-  focusStyle: {
-    outlineStyle: "none"
-  },
-  focusVisibleStyle: {
-    outlineStyle: "none"
-  },
+  focusVisibleStyle: ensureFocusVisibleRing({
+    outlineOffset: -2
+  }),
   variants: {
     selected: {
       true: {
@@ -44,6 +39,12 @@ var ComboboxRow = styled(View, {
         backgroundColor: "transparent"
       }
     },
+    active: {
+      true: {
+        backgroundColor: formInputColors.background.focus
+      },
+      false: {}
+    },
     size: {
       "...size": function (val) {
         return {
@@ -53,6 +54,17 @@ var ComboboxRow = styled(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 ? keyboardFocusRingProps : {
+    outlineWidth: 0
+  };
+}
 var GroupHeader = styled(Text, {
   name: "ComboboxGroupHeader",
   paddingHorizontal: "$3",
@@ -206,6 +218,8 @@ var ComboboxItem = /* @__PURE__ */memo(function ComboboxItem2(param) {
     index,
     isSelected,
     isActive,
+    keyboardRing,
+    optionId,
     suppressHover,
     handlers
   } = param;
@@ -221,6 +235,7 @@ var ComboboxItem = /* @__PURE__ */memo(function ComboboxItem2(param) {
       ctx.listItemsRef.current[index] = node;
     },
     ...itemProps,
+    id: optionId,
     "data-combobox-index": index,
     "data-active": isActive,
     onKeyDown: function onKeyDown(e) {
@@ -237,9 +252,11 @@ var ComboboxItem = /* @__PURE__ */memo(function ComboboxItem2(param) {
     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 ? formInputColors.background.focus : isSelected ? formInputColors.background.base : "transparent"
@@ -322,6 +339,7 @@ function FloatingComboboxCore(param) {
     onOpenChange
   } = param;
   var _ref;
+  if (isWeb) ensureKeyboardModalityTracking();
   var {
     t
   } = useTranslation();
@@ -397,7 +415,7 @@ function FloatingComboboxCore(param) {
   }, [multiple, value, onValueChange]);
   var filtered = 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);
     });
@@ -478,6 +496,13 @@ function FloatingComboboxCore(param) {
   var searchInputRef = useRef(null);
   var listScrollRef = useRef(null);
   var keyboardNavRef = useRef(false);
+  var [listKeyboardRing, setListKeyboardRing] = useState(false);
+  var setKeyboardNav = useCallback(function (next) {
+    keyboardNavRef.current = next;
+    setListKeyboardRing(function (prev) {
+      return prev === next ? prev : next;
+    });
+  }, []);
   var lastMousePosRef = useRef(null);
   var currentMousePosRef = useRef({
     x: 0,
@@ -534,6 +559,7 @@ function FloatingComboboxCore(param) {
       lastMousePosRef.current = null;
       initialOrderRef.current = null;
       hasSearchedRef.current = false;
+      setKeyboardNav(false);
     }
   }, [open]);
   var activeIndexRef = useRef(activeIndex);
@@ -555,7 +581,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`;
@@ -768,7 +794,6 @@ function FloatingComboboxCore(param) {
   }, [open, panel.refs]);
   useLayoutEffect(function () {
     var _currentMousePosRef_current;
-    keyboardNavRef.current = false;
     var len = sortedFiltered.length + (showCreateOption ? 1 : 0);
     listItemsRef.current.length = len;
     justResetFromFilterRef.current = true;
@@ -802,7 +827,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
@@ -876,8 +901,8 @@ function FloatingComboboxCore(param) {
       x: clientX,
       y: clientY
     };
-    keyboardNavRef.current = false;
-  }, []);
+    setKeyboardNav(false);
+  }, [setKeyboardNav]);
   var handlersRef = useRef({});
   var handleSelectRef = useRef(handleSelect);
   handleSelectRef.current = handleSelect;
@@ -927,11 +952,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,
@@ -960,8 +988,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;
@@ -971,7 +1004,7 @@ function FloatingComboboxCore(param) {
     if (isDown || isUp) {
       e.preventDefault();
       e.stopPropagation();
-      keyboardNavRef.current = true;
+      setKeyboardNav(true);
       lastKeyboardNavTimeRef.current = Date.now();
       lastMousePosRef.current = {
         ...currentMousePosRef.current
@@ -981,7 +1014,7 @@ function FloatingComboboxCore(param) {
         return isDown ? next >= totalNavigableItems ? 0 : next : next < 0 ? totalNavigableItems - 1 : next;
       });
     }
-  }, [totalNavigableItems]);
+  }, [totalNavigableItems, setKeyboardNav]);
   handlersRef.current = {
     getItemProps,
     onSelect: handleSelect,
@@ -996,7 +1029,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
@@ -1007,7 +1040,7 @@ function FloatingComboboxCore(param) {
       });
     } else if (isUp) {
       event.preventDefault();
-      keyboardNavRef.current = true;
+      setKeyboardNav(true);
       lastKeyboardNavTimeRef.current = Date.now();
       lastMousePosRef.current = {
         ...currentMousePosRef.current
@@ -1016,6 +1049,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) {
@@ -1032,7 +1075,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]);
   useEffect(function () {
     if (activeIndex == null) return;
     var scrollContainer = listScrollRef.current;
@@ -1078,6 +1121,10 @@ function FloatingComboboxCore(param) {
     width: "100%",
     alignSelf: "stretch",
     flexShrink: 0,
+    outlineWidth: 0,
+    focusVisibleStyle: ensureFocusVisibleRing({
+      outlineOffset: -2
+    }),
     style: {
       display: "flex",
       alignItems: "stretch",
@@ -1092,6 +1139,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).
     {
@@ -1186,7 +1237,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",
@@ -1216,6 +1268,10 @@ function FloatingComboboxCore(param) {
             borderBottomColor: formCommonColors.divider,
             borderRadius: 0,
             elevation: void 0,
+            // LC-71: search is text-entry — ring the whole row (magnifier included).
+            ...(isWeb ? {
+              className: "mp-composite-ring"
+            } : void 0),
             children: [/* @__PURE__ */_jsx(InputParts.Section, {
               children: /* @__PURE__ */_jsx(InputParts.Icon, {
                 adornment: "leading",
@@ -1229,7 +1285,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__ */_jsx(InputParts.Section, {
               children: /* @__PURE__ */_jsx(InputParts.Icon, {
@@ -1278,8 +1338,10 @@ function FloatingComboboxCore(param) {
               return /* @__PURE__ */_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);
@@ -1290,18 +1352,23 @@ function FloatingComboboxCore(param) {
               }, `header-${item.label}`) : /* @__PURE__ */_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__ */_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 ? formInputColors.background.focus : void 0,
               hoverStyle: activeIndex != null ? {
                 backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent"
@@ -1322,14 +1389,16 @@ function FloatingComboboxCore(param) {
                 children: createLabel.replace("{value}", filter.trim())
               })]
             })]
-          }, filter) : showCreateOption ? /* @__PURE__ */_jsxs(View, {
-            flexDirection: "row",
-            alignItems: "center",
-            gap: "$2",
-            paddingHorizontal: "$3",
-            height: knobProps.sizeToken,
+          }, filter) : showCreateOption ? /* @__PURE__ */_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 ? formInputColors.background.focus : "transparent"
@@ -1465,6 +1534,7 @@ function NativeComboboxCore(param) {
   } = param;
   var _ref, _knobProps_transition, _ref1, _ref2;
   var _theme_color7;
+  if (isWeb) ensureKeyboardModalityTracking();
   var {
     t
   } = useTranslation();
@@ -1482,6 +1552,12 @@ function NativeComboboxCore(param) {
   var [internalFilter, setInternalFilter] = useState("");
   var filter = searchValue !== void 0 ? searchValue : internalFilter;
   var [activeIndex, setActiveIndex] = useState(0);
+  var [listKeyboardRing, setListKeyboardRing] = useState(false);
+  var setKeyboardNav = useCallback(function (next) {
+    setListKeyboardRing(function (prev) {
+      return prev === next ? prev : next;
+    });
+  }, []);
   var listRef = useRef(null);
   var fieldA11y = useFieldA11y();
   var textColor = knobProps.textAccentColor;
@@ -1544,7 +1620,7 @@ function NativeComboboxCore(param) {
   }, [multiple, value, onValueChange]);
   var filtered = 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);
     });
@@ -1615,6 +1691,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 = useCallback(function (option) {
     if (multiple) {
       var current = Array.isArray(value) ? value : value ? [value] : [];
@@ -1633,6 +1711,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;
@@ -1641,29 +1720,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 = 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) {
@@ -1673,7 +1771,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]);
   useEffect(function () {
     if (!open || typeof document === "undefined") return;
     var onKeyDown = function onKeyDown2(e) {
@@ -1716,11 +1814,16 @@ function NativeComboboxCore(param) {
   /* @__PURE__ */
   _jsxs(View, {
     ref: listRef,
-    ...(isWeb ? {
+    ...(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__ */_jsx(View, {
@@ -1744,6 +1847,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"
@@ -1754,7 +1863,8 @@ function NativeComboboxCore(param) {
             return handleSelect(option);
           } : void 0,
           onMouseEnter: function onMouseEnter() {
-            return setActiveIndex(i);
+            setKeyboardNav(false);
+            setActiveIndex(i);
           },
           ...(!isWeb ? {
             pointerEvents: "none"
@@ -1817,9 +1927,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 ? formInputColors.background.focus : "transparent"
@@ -1848,9 +1964,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 ? formInputColors.background.focus : "transparent"
@@ -1905,6 +2027,10 @@ function NativeComboboxCore(param) {
     width: "100%",
     alignSelf: "stretch",
     flexShrink: 0,
+    outlineWidth: 0,
+    focusVisibleStyle: ensureFocusVisibleRing({
+      outlineOffset: -2
+    }),
     style: {
       display: "flex",
       alignItems: "stretch",
@@ -1918,6 +2044,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).
     {
@@ -1936,9 +2066,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
     } : {
@@ -1952,6 +2086,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);
       }
     },