@jobber/components 9.10.0 → 9.10.1

package/dist/{ComboboxChipRemove-cjs.js → ComboboxSeparator-cjs.js}

@@ -7,8 +7,8 @@ var useCompositeListItem = require('./useCompositeListItem-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var ReactDOM = require('react-dom');
 var stringifyLocale = require('./stringifyLocale-cjs.js');
+var scrollable = require('./scrollable-cjs.js');
 var useLabel = require('./useLabel-cjs.js');
-var floatingUi_utils = require('./floating-ui.utils-cjs.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -104,15 +104,15 @@ function useComboboxHasItemsContext() {
 }
 
 const selectors = {
-  id: useScrollLock.createSelector(state => state.id),
-  labelId: useScrollLock.createSelector(state => state.labelId),
-  items: useScrollLock.createSelector(state => state.items),
-  selectedValue: useScrollLock.createSelector(state => state.selectedValue),
-  hasSelectionChips: useScrollLock.createSelector(state => {
+  id: state => state.id,
+  labelId: state => state.labelId,
+  items: state => state.items,
+  selectedValue: state => state.selectedValue,
+  hasSelectionChips: state => {
     const selectedValue = state.selectedValue;
     return Array.isArray(selectedValue) && selectedValue.length > 0;
-  }),
-  hasSelectedValue: useScrollLock.createSelector(state => {
+  },
+  hasSelectedValue: state => {
     const {
       selectedValue,
       selectionMode
@@ -124,53 +124,53 @@ const selectors = {
       return selectedValue.length > 0;
     }
     return true;
-  }),
-  hasNullItemLabel: useScrollLock.createSelector((state, enabled) => {
+  },
+  hasNullItemLabel: (state, enabled) => {
     return enabled ? useCompositeListItem.hasNullItemLabel(state.items) : false;
-  }),
-  open: useScrollLock.createSelector(state => state.open),
-  mounted: useScrollLock.createSelector(state => state.mounted),
-  forceMounted: useScrollLock.createSelector(state => state.forceMounted),
-  inline: useScrollLock.createSelector(state => state.inline),
-  activeIndex: useScrollLock.createSelector(state => state.activeIndex),
-  selectedIndex: useScrollLock.createSelector(state => state.selectedIndex),
-  isActive: useScrollLock.createSelector((state, index) => state.activeIndex === index),
-  isSelected: useScrollLock.createSelector((state, itemValue) => {
+  },
+  open: state => state.open,
+  mounted: state => state.mounted,
+  forceMounted: state => state.forceMounted,
+  inline: state => state.inline,
+  activeIndex: state => state.activeIndex,
+  selectedIndex: state => state.selectedIndex,
+  isActive: (state, index) => state.activeIndex === index,
+  isSelected: (state, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const selectedValue = state.selectedValue;
     if (Array.isArray(selectedValue)) {
       return selectedValue.some(selectedItem => useCompositeListItem.compareItemEquality(itemValue, selectedItem, comparer));
     }
     return useCompositeListItem.compareItemEquality(itemValue, selectedValue, comparer);
-  }),
-  transitionStatus: useScrollLock.createSelector(state => state.transitionStatus),
-  popupProps: useScrollLock.createSelector(state => state.popupProps),
-  inputProps: useScrollLock.createSelector(state => state.inputProps),
-  triggerProps: useScrollLock.createSelector(state => state.triggerProps),
-  itemProps: useScrollLock.createSelector(state => state.itemProps),
-  positionerElement: useScrollLock.createSelector(state => state.positionerElement),
-  listElement: useScrollLock.createSelector(state => state.listElement),
-  popupId: useScrollLock.createSelector(state => state.popupId),
-  triggerElement: useScrollLock.createSelector(state => state.triggerElement),
-  inputElement: useScrollLock.createSelector(state => state.inputElement),
-  inputGroupElement: useScrollLock.createSelector(state => state.inputGroupElement),
-  popupSide: useScrollLock.createSelector(state => state.popupSide),
-  openMethod: useScrollLock.createSelector(state => state.openMethod),
-  inputInsidePopup: useScrollLock.createSelector(state => state.inputInsidePopup),
-  inputOwnsFormValue: useScrollLock.createSelector(state => state.inputOwnsFormValue),
-  selectionMode: useScrollLock.createSelector(state => state.selectionMode),
-  name: useScrollLock.createSelector(state => state.name),
-  form: useScrollLock.createSelector(state => state.form),
-  disabled: useScrollLock.createSelector(state => state.disabled),
-  readOnly: useScrollLock.createSelector(state => state.readOnly),
-  required: useScrollLock.createSelector(state => state.required),
-  grid: useScrollLock.createSelector(state => state.grid),
-  virtualized: useScrollLock.createSelector(state => state.virtualized),
-  itemToStringLabel: useScrollLock.createSelector(state => state.itemToStringLabel),
-  isItemEqualToValue: useScrollLock.createSelector(state => state.isItemEqualToValue),
-  modal: useScrollLock.createSelector(state => state.modal),
-  autoHighlight: useScrollLock.createSelector(state => state.autoHighlight),
-  submitOnItemClick: useScrollLock.createSelector(state => state.submitOnItemClick)
+  },
+  transitionStatus: state => state.transitionStatus,
+  popupProps: state => state.popupProps,
+  listProps: state => state.listProps,
+  inputProps: state => state.inputProps,
+  triggerProps: state => state.triggerProps,
+  itemProps: state => state.itemProps,
+  positionerElement: state => state.positionerElement,
+  listElement: state => state.listElement,
+  popupId: state => state.popupId,
+  triggerElement: state => state.triggerElement,
+  inputElement: state => state.inputElement,
+  inputGroupElement: state => state.inputGroupElement,
+  popupSide: state => state.popupSide,
+  openMethod: state => state.openMethod,
+  inputInsidePopup: state => state.inputInsidePopup,
+  inputOwnsFormValue: state => state.inputOwnsFormValue,
+  selectionMode: state => state.selectionMode,
+  name: state => state.name,
+  form: state => state.form,
+  disabled: state => state.disabled,
+  readOnly: state => state.readOnly,
+  required: state => state.required,
+  grid: state => state.grid,
+  virtualized: state => state.virtualized,
+  itemToStringLabel: state => state.itemToStringLabel,
+  isItemEqualToValue: state => state.isItemEqualToValue,
+  modal: state => state.modal,
+  autoHighlight: state => state.autoHighlight
 };
 
 /**
@@ -193,8 +193,7 @@ function createCollatorItemFilter(collatorFilter, itemToStringLabel) {
     if (item == null) {
       return false;
     }
-    const itemString = useCompositeListItem.stringifyAsLabel(item, itemToStringLabel);
-    return collatorFilter.contains(itemString, query);
+    return collatorFilter.contains(item, query, itemToStringLabel);
   };
 }
 
@@ -210,14 +209,13 @@ function createSingleSelectionCollatorFilter(collatorFilter, itemToStringLabel,
     if (!query) {
       return true;
     }
-    const itemString = useCompositeListItem.stringifyAsLabel(item, itemToStringLabel);
     const selectedString = selectedValue != null ? useCompositeListItem.stringifyAsLabel(selectedValue, itemToStringLabel) : '';
 
     // Handle case-insensitive matching consistently
     if (selectedString && collatorFilter.contains(selectedString, query) && selectedString.length === query.length) {
       return true;
     }
-    return collatorFilter.contains(itemString, query);
+    return collatorFilter.contains(item, query, itemToStringLabel);
   };
 }
 
@@ -289,9 +287,8 @@ function useComboboxFilter(options = {}) {
     return createSingleSelectionCollatorFilter(coreFilter, itemToString, value)(item, query);
   }, [coreFilter, value, multiple]);
   return React__namespace.useMemo(() => ({
-    contains,
-    startsWith: coreFilter.startsWith,
-    endsWith: coreFilter.endsWith
+    ...coreFilter,
+    contains
   }), [contains, coreFilter]);
 }
 
@@ -312,7 +309,7 @@ function AriaCombobox(props) {
     inputValue: inputValueProp,
     open: openProp,
     defaultOpen = false,
-    selectionMode = 'none',
+    selectionMode,
     onItemHighlighted: onItemHighlightedProp,
     name: nameProp,
     form,
@@ -385,12 +382,10 @@ function AriaCombobox(props) {
    */
   const valuesRef = React__namespace.useRef([]);
   /**
-   * Contains all item values in a stable, unfiltered order.
-   * This is only used when `items` prop is not provided.
-   * It accumulates values on first mount and does not remove them on unmount due to
-   * filtering, providing a stable index for selected value tracking.
+   * The item element that received the last `pointerdown`, used to detect whether a
+   * `mouseup` on an item belongs to a drag-select gesture that started elsewhere.
    */
-  const allValuesRef = React__namespace.useRef([]);
+  const pointerDownItemRef = React__namespace.useRef(null);
   const disabled = fieldDisabled || disabledProp;
   const name = fieldName ?? nameProp;
   const multiple = selectionMode === 'multiple';
@@ -417,11 +412,10 @@ function AriaCombobox(props) {
     if (filterProp !== undefined) {
       return filterProp;
     }
-    if (single && !queryChangedAfterOpen) {
-      return createSingleSelectionCollatorFilter(collatorFilter, itemToStringLabel, selectedValue);
-    }
+    // `shouldBypassFiltering` already empties the query whenever a single selection's label
+    // matches it exactly, so the filter never needs a selection-aware variant here.
     return createCollatorItemFilter(collatorFilter, itemToStringLabel);
-  }, [filterProp, single, selectedValue, queryChangedAfterOpen, collatorFilter, itemToStringLabel]);
+  }, [filterProp, collatorFilter, itemToStringLabel]);
 
   // If neither inputValue nor defaultInputValue are provided, derive it from the
   // selected value for single mode so the input reflects the selection on mount.
@@ -447,9 +441,9 @@ function AriaCombobox(props) {
     state: 'open'
   });
   const isGrouped = useCompositeListItem.isGroupedItems(items);
-  const query = closeQuery ?? (inputValue === '' ? '' : String(inputValue).trim());
+  const query = closeQuery ?? String(inputValue).trim();
   const selectedLabelString = single ? useCompositeListItem.stringifyAsLabel(selectedValue, itemToStringLabel) : '';
-  const shouldBypassFiltering = single && !queryChangedAfterOpen && query !== '' && selectedLabelString !== '' && selectedLabelString.length === query.length && collatorFilter.contains(selectedLabelString, query);
+  const shouldBypassFiltering = single && !queryChangedAfterOpen && query !== '' && selectedLabelString.length === query.length && collatorFilter.contains(selectedLabelString, query);
   const filterQuery = shouldBypassFiltering ? '' : query;
   const shouldIgnoreExternalFiltering = hasItems && hasFilteredItemsProp && shouldBypassFiltering;
   const flatItems = React__namespace.useMemo(() => {
@@ -476,12 +470,18 @@ function AriaCombobox(props) {
         if (limit > -1 && currentCount >= limit) {
           break;
         }
-        const candidateItems = filterQuery === '' ? group.items : group.items.filter(item => filter(item, filterQuery, itemToStringLabel));
-        if (candidateItems.length === 0) {
-          continue;
-        }
         const remainingLimit = limit > -1 ? limit - currentCount : Infinity;
-        const itemsToTake = candidateItems.slice(0, remainingLimit);
+        const itemsToTake = filterQuery === '' ? group.items.slice(0, remainingLimit) : [];
+        if (filterQuery !== '') {
+          for (const item of group.items) {
+            if (itemsToTake.length >= remainingLimit) {
+              break;
+            }
+            if (filter(item, filterQuery, itemToStringLabel)) {
+              itemsToTake.push(item);
+            }
+          }
+        }
         if (itemsToTake.length > 0) {
           const newGroup = {
             ...group,
@@ -521,76 +521,85 @@ function AriaCombobox(props) {
     }
     return filteredItems;
   }, [filteredItems, isGrouped]);
-  const store = useRenderElement.useRefWithInit(() => new useScrollLock.Store({
-    id,
-    labelId: undefined,
-    selectedValue,
-    open,
-    filter,
-    query,
-    items,
-    selectionMode,
-    listRef,
-    labelsRef,
-    popupRef,
-    emptyRef,
-    inputRef,
-    startDismissRef,
-    endDismissRef,
-    keyboardActiveRef,
-    chipsContainerRef,
-    clearRef,
-    valuesRef,
-    allValuesRef,
-    selectionEventRef,
-    name,
-    form,
-    disabled,
-    readOnly,
-    required,
-    grid,
-    isGrouped,
-    virtualized,
-    openOnInputClick,
-    itemToStringLabel,
-    isItemEqualToValue,
-    modal,
-    autoHighlight: autoHighlightMode,
-    submitOnItemClick,
-    hasInputValue,
-    mounted: false,
-    forceMounted: false,
-    transitionStatus: 'idle',
-    inline: inlineProp,
-    activeIndex: null,
-    selectedIndex: null,
-    popupProps: {},
-    inputProps: {},
-    triggerProps: {},
-    itemProps: useRenderElement.EMPTY_OBJECT,
-    positionerElement: null,
-    listElement: null,
-    popupId: undefined,
-    triggerElement: null,
-    inputElement: null,
-    inputGroupElement: null,
-    popupSide: null,
-    openMethod: null,
-    inputInsidePopup: true,
-    // Avoid duplicate names in the server HTML. Popup inputs aren't rendered
-    // until after hydration, so the hidden input takes over then if needed.
-    inputOwnsFormValue: selectionMode === 'none',
-    onOpenChangeComplete: onOpenChangeCompleteProp || useRenderElement.NOOP,
-    // Placeholder callbacks replaced on first render
-    setOpen: useRenderElement.NOOP,
-    setInputValue: useRenderElement.NOOP,
-    setSelectedValue: useRenderElement.NOOP,
-    setIndices: useRenderElement.NOOP,
-    onItemHighlighted: useRenderElement.NOOP,
-    handleSelection: useRenderElement.NOOP,
-    forceMount: useRenderElement.NOOP,
-    requestSubmit: useRenderElement.NOOP
-  })).current;
+  const store = useRenderElement.useRefWithInit(() => {
+    // An inline list open on the first render never gets a closed pass of the closed-state
+    // sync effect below, and `items`-prop lists don't self-register their index the way
+    // individually rendered `<Combobox.Item>`s do, so the selected item was never highlighted.
+    // Seeding the index here lets list navigation highlight and scroll to the selection on
+    // mount. Computed once by construction, so a selection or list that resolves after mount
+    // doesn't move an existing highlight or scroll the list away.
+    let initialSelectedIndex = null;
+    if (inlineProp && open && hasItems && selectionMode !== 'none') {
+      initialSelectedIndex = useCompositeListItem.findSelectionIndex(flatFilteredItems, selectedValue, isItemEqualToValue, multiple);
+    }
+    return new useScrollLock.Store({
+      id,
+      labelId: undefined,
+      selectedValue,
+      open,
+      items,
+      selectionMode,
+      listRef,
+      labelsRef,
+      popupRef,
+      emptyRef,
+      inputRef,
+      startDismissRef,
+      endDismissRef,
+      keyboardActiveRef,
+      chipsContainerRef,
+      clearRef,
+      valuesRef,
+      pointerDownItemRef,
+      selectionEventRef,
+      name,
+      form,
+      disabled,
+      readOnly,
+      required,
+      grid,
+      virtualized,
+      openOnInputClick,
+      itemToStringLabel,
+      isItemEqualToValue,
+      modal,
+      autoHighlight: autoHighlightMode,
+      submitOnItemClick,
+      hasInputValue,
+      mounted: false,
+      forceMounted: false,
+      transitionStatus: 'idle',
+      inline: inlineProp,
+      activeIndex: null,
+      selectedIndex: initialSelectedIndex,
+      popupProps: {},
+      listProps: {},
+      inputProps: {},
+      triggerProps: {},
+      itemProps: useRenderElement.EMPTY_OBJECT,
+      positionerElement: null,
+      listElement: null,
+      popupId: undefined,
+      triggerElement: null,
+      inputElement: null,
+      inputGroupElement: null,
+      popupSide: null,
+      openMethod: null,
+      inputInsidePopup: true,
+      // Avoid duplicate names in the server HTML. Popup inputs aren't rendered
+      // until after hydration, so the hidden input takes over then if needed.
+      inputOwnsFormValue: selectionMode === 'none',
+      // Placeholder callbacks replaced on first render
+      onOpenChangeComplete: useRenderElement.NOOP,
+      setOpen: useRenderElement.NOOP,
+      setInputValue: useRenderElement.NOOP,
+      setSelectedValue: useRenderElement.NOOP,
+      setIndices: useRenderElement.NOOP,
+      handleSelection: useRenderElement.NOOP,
+      forceMount: useRenderElement.NOOP,
+      requestSubmit: useRenderElement.NOOP
+    });
+  }).current;
   const fieldRawValue = selectionMode === 'none' ? inputValue : selectedValue;
   const fieldStringValue = React__namespace.useMemo(() => {
     if (selectionMode === 'none') {
@@ -633,35 +642,38 @@ function AriaCombobox(props) {
       store.set('forceMounted', true);
     }
   });
-  const initialSelectedValueRef = React__namespace.useRef(selectedValue);
-  useScrollLock.useIsoLayoutEffect(() => {
-    // Ensure the values and labels are registered for programmatic value changes.
-    if (selectedValue !== initialSelectedValueRef.current) {
-      forceMount();
+
+  /**
+   * Emits `onItemHighlighted` for the item at `index`, or clears the highlight when `index` is `-1`
+   * (a no-op if nothing was highlighted). Keeps `lastHighlightRef` in sync with what was emitted.
+   */
+  const emitHighlight = useScrollLock.useStableCallback((value, index, type) => {
+    if (index === -1) {
+      if (lastHighlightRef.current === INITIAL_LAST_HIGHLIGHT) {
+        return;
+      }
+      lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
+    } else {
+      lastHighlightRef.current = {
+        value,
+        index
+      };
     }
-  }, [forceMount, selectedValue]);
+    onItemHighlighted(value, useScrollLock.createGenericEventDetails(type, undefined, {
+      index
+    }));
+  });
   const setIndices = useScrollLock.useStableCallback(options => {
     store.update(options);
-    const type = options.type || 'none';
-    if (options.activeIndex === undefined) {
+    const activeIndexOption = options.activeIndex;
+    if (activeIndexOption === undefined) {
       return;
     }
-    if (options.activeIndex === null) {
-      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        onItemHighlighted(undefined, useScrollLock.createGenericEventDetails(type, undefined, {
-          index: -1
-        }));
-      }
+    const type = options.type || useScrollLock.none;
+    if (activeIndexOption === null) {
+      emitHighlight(undefined, -1, type);
     } else {
-      const activeValue = valuesRef.current[options.activeIndex];
-      lastHighlightRef.current = {
-        value: activeValue,
-        index: options.activeIndex
-      };
-      onItemHighlighted(activeValue, useScrollLock.createGenericEventDetails(type, undefined, {
-        index: options.activeIndex
-      }));
+      emitHighlight(valuesRef.current[activeIndexOption], activeIndexOption, type);
     }
   });
   const setInputValue = useScrollLock.useStableCallback((next, eventDetails) => {
@@ -674,6 +686,11 @@ function AriaCombobox(props) {
     // If user is typing, ensure we don't auto-highlight on open due to a race
     // with the post-open effect that sets this flag.
     if (eventDetails.reason === useScrollLock.inputChange) {
+      // A controlled popup may ignore a close request. Resuming input proves the popup
+      // is remaining open, so release the query captured for an exit animation.
+      if (open && closeQuery !== null) {
+        setCloseQuery(null);
+      }
       const event = eventDetails.event;
       const inputType = event.inputType;
       // Treat composition commits as typed input; autofill may omit `inputType` or
@@ -689,10 +706,34 @@ function AriaCombobox(props) {
         pendingQueryHighlightRef.current = {
           hasQuery
         };
-        if (hasQuery && autoHighlightMode && store.state.activeIndex == null) {
+
+        // Virtualized lists own their scroller. Reset regular lists directly so a stale
+        // composite registry cannot select a reordered item and scrolling cannot escape
+        // the popup.
+        const list = store.state.listElement;
+        if (!store.state.virtualized && list) {
+          const popup = popupRef.current;
+          for (const ancestor of useScrollLock.getOverflowAncestors(list.firstElementChild ?? list)) {
+            if (!useScrollLock.isHTMLElement(ancestor) || (popup ? !useScrollLock.contains(popup, ancestor) : ancestor.getAttribute('role') === 'dialog')) {
+              break;
+            }
+            if (scrollable.isScrollableY(ancestor)) {
+              ancestor.scrollTop = 0;
+              break;
+            }
+          }
+        }
+        if (hasQuery && autoHighlightMode && store.state.activeIndex == null && (open || inline)) {
           store.set('activeIndex', 0);
         }
       }
+    } else if (eventDetails.reason === useScrollLock.inputClear && next === '' && store.state.inputInsidePopup) {
+      // A programmatic clear of an active query (e.g. after selecting an item with the
+      // input inside the popup): restore the highlight to the selected item.
+      pendingQueryHighlightRef.current = {
+        hasQuery: false,
+        selection: true
+      };
     }
     setInputValueUnwrapped(next);
   });
@@ -704,7 +745,7 @@ function AriaCombobox(props) {
     // If the `Empty` component is not used, the positioner or popup should be hidden
     // with CSS. In this case, allow the Escape key to bubble to close a parent popup
     // if there are no items to show.
-    if (eventDetails.reason === 'escape-key' && hasItems && flatFilteredItems.length === 0 && !store.state.emptyRef.current) {
+    if (eventDetails.reason === useScrollLock.escapeKey && hasItems && flatFilteredItems.length === 0 && !emptyRef.current) {
       eventDetails.allowPropagation();
     }
     props.onOpenChange?.(nextOpen, eventDetails);
@@ -714,10 +755,10 @@ function AriaCombobox(props) {
 
     // If reopening interrupts the close animation, handleUnmount won't run to clear the
     // frozen closeQuery and pending popup input.
-    if (nextOpen && multiple && inputInsidePopup && !inline && closeQuery !== null) {
+    if (nextOpen && inputInsidePopup && !inline && closeQuery !== null) {
       setQueryChangedAfterOpen(false);
       setCloseQuery(null);
-      if (inputValue !== '') {
+      if (inputValue !== '' && eventDetails.reason !== useScrollLock.inputChange) {
         setInputValue('', useScrollLock.createChangeEventDetails(useScrollLock.inputClear, eventDetails.event));
       }
     }
@@ -771,18 +812,8 @@ function AriaCombobox(props) {
     if (shouldFillInput) {
       setInputValue(useCompositeListItem.stringifyAsLabel(nextValue, itemToStringLabel), useScrollLock.createChangeEventDetails(eventDetails.reason, eventDetails.event));
     }
-    if (single && nextValue != null && eventDetails.reason !== useScrollLock.inputChange && queryChangedAfterOpen && !inline) {
-      setCloseQuery(query);
-    }
   });
-  const handleSelection = useScrollLock.useStableCallback((event, passedValue) => {
-    let itemValue = passedValue;
-    if (itemValue === undefined) {
-      if (activeIndex === null) {
-        return;
-      }
-      itemValue = valuesRef.current[activeIndex];
-    }
+  const handleSelection = useScrollLock.useStableCallback((event, itemValue) => {
     const targetEl = useScrollLock.getTarget(event);
     const overrideEvent = selectionEventRef.current ?? event;
     selectionEventRef.current = null;
@@ -798,8 +829,8 @@ function AriaCombobox(props) {
     }
     if (multiple) {
       const currentSelectedValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const isCurrentlySelected = useCompositeListItem.selectedValueIncludes(currentSelectedValue, itemValue, store.state.isItemEqualToValue);
-      const nextValue = isCurrentlySelected ? useCompositeListItem.removeItem(currentSelectedValue, itemValue, store.state.isItemEqualToValue) : [...currentSelectedValue, itemValue];
+      const isCurrentlySelected = useCompositeListItem.selectedValueIncludes(currentSelectedValue, itemValue, isItemEqualToValue);
+      const nextValue = isCurrentlySelected ? useCompositeListItem.removeItem(currentSelectedValue, itemValue, isItemEqualToValue) : [...currentSelectedValue, itemValue];
       setSelectedValue(nextValue, eventDetails);
       if (eventDetails.isCanceled) {
         return;
@@ -822,9 +853,6 @@ function AriaCombobox(props) {
     }
   });
   const requestSubmit = useScrollLock.useStableCallback(() => {
-    if (!store.state.submitOnItemClick) {
-      return;
-    }
     const formElement = validation.inputRef.current?.form ?? store.state.inputElement?.form;
     if (formElement && typeof formElement.requestSubmit === 'function') {
       formElement.requestSubmit();
@@ -897,25 +925,29 @@ function AriaCombobox(props) {
   React__namespace.useImperativeHandle(props.actionsRef, () => ({
     unmount: handleUnmount
   }), [handleUnmount]);
-  useScrollLock.useIsoLayoutEffect(function syncSelectedIndex() {
-    if (open || selectionMode === 'none') {
+  useScrollLock.useIsoLayoutEffect(function syncClosedState() {
+    if (open) {
       return;
     }
-    const registry = items ? flatItems : allValuesRef.current;
-    if (multiple) {
-      const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const lastValue = currentValue[currentValue.length - 1];
-      const lastIndex = useCompositeListItem.findItemIndex(registry, lastValue, isItemEqualToValue);
-      setIndices({
-        selectedIndex: lastIndex === -1 ? null : lastIndex
-      });
-    } else {
-      const index = useCompositeListItem.findItemIndex(registry, selectedValue, isItemEqualToValue);
-      setIndices({
-        selectedIndex: index === -1 ? null : index
-      });
+
+    // State-driven (not tied to the internal event path) so controlled closes
+    // also clear a pointerdown that never received a matching item mouseup.
+    pointerDownItemRef.current = null;
+    if (selectionMode === 'none') {
+      return;
     }
-  }, [open, selectedValue, items, selectionMode, flatItems, multiple, isItemEqualToValue, setIndices]);
+
+    // Without `items`, look the selection up in the live registry of mounted item
+    // values (the list stays mounted while closed when closed-state features need
+    // it — trigger interaction and rendered-label autofill force-mount it). Mounted
+    // items re-assert the index themselves when their registration moves; when
+    // nothing is mounted the lookup resolves to `null` and each item re-registers
+    // the index on the next open.
+    const registry = hasItems ? flatItems : valuesRef.current;
+    setIndices({
+      selectedIndex: useCompositeListItem.findSelectionIndex(registry, selectedValue, isItemEqualToValue, multiple)
+    });
+  }, [open, selectedValue, selectionMode, multiple, hasItems, flatItems, isItemEqualToValue, setIndices]);
   useScrollLock.useIsoLayoutEffect(() => {
     if (items) {
       valuesRef.current = flatFilteredItems;
@@ -925,14 +957,52 @@ function AriaCombobox(props) {
   useScrollLock.useIsoLayoutEffect(() => {
     const pendingHighlight = pendingQueryHighlightRef.current;
     if (pendingHighlight) {
+      // A directly rendered list remains visible when the popup state is closed, while a
+      // kept-mounted Positioner is hidden and should stay inert.
+      const listIsNavigable = open || inline || store.state.positionerElement?.hidden === false;
       if (pendingHighlight.hasQuery) {
-        if (autoHighlightMode) {
+        if (autoHighlightMode && listIsNavigable) {
           store.set('activeIndex', 0);
         }
-      } else if (autoHighlightMode === 'always') {
-        store.set('activeIndex', 0);
+        pendingQueryHighlightRef.current = null;
+      } else if (String(inputValue).trim() === '') {
+        // Only handle the clear once it has committed (a controlled input may reject it),
+        // so a restore cannot fire while a query is still active.
+        pendingQueryHighlightRef.current = null;
+        if (listIsNavigable) {
+          const clearedBySelection = pendingHighlight.selection;
+          if (autoHighlightMode === 'always' && !clearedBySelection && store.state.selectionMode === 'none') {
+            // There is no selection to restore in Autocomplete. Keep the first-item reset
+            // synchronous so list navigation sees it before a directly rendered list closes.
+            store.set('activeIndex', 0);
+          }
+
+          // Items re-mounted by the clear publish their composite indices in a follow-up
+          // commit, so the item registries are mid-update here. Defer past React's cascade.
+          queueMicrotask(() => {
+            if (!store.state.open && !store.state.inline || inputRef.current && inputRef.current.value.trim() !== '') {
+              return;
+            }
+
+            // Return the highlight to the selected item, the same anchor the popup uses
+            // when it first opens. Read the selection through the store so consumers can
+            // pass an inline `isItemEqualToValue` or a fresh `selectedValue` array without
+            // re-running this effect on every render.
+            const currentSelectedValue = store.state.selectedValue;
+            const isMultiple = store.state.selectionMode === 'multiple';
+            const lastSelectedValue = isMultiple && Array.isArray(currentSelectedValue) ? currentSelectedValue[currentSelectedValue.length - 1] : currentSelectedValue;
+            const hasSelection = store.state.selectionMode !== 'none' && lastSelectedValue != null;
+            if (hasSelection || clearedBySelection) {
+              const registry = hasItems || hasFilteredItemsProp ? flatFilteredItems : valuesRef.current;
+              // A selection that is no longer in the list drops the highlight rather than
+              // leaving it on whichever item now occupies that index.
+              store.set('activeIndex', hasSelection ? useCompositeListItem.findSelectionIndex(registry, currentSelectedValue, store.state.isItemEqualToValue, isMultiple) : null);
+            } else if (autoHighlightMode === 'always') {
+              store.set('activeIndex', 0);
+            }
+          });
+        }
       }
-      pendingQueryHighlightRef.current = null;
     }
     if (!open && !inline) {
       return;
@@ -945,21 +1015,11 @@ function AriaCombobox(props) {
         store.set('activeIndex', 0);
         return;
       }
-      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        store.state.onItemHighlighted(undefined, useScrollLock.createGenericEventDetails(useScrollLock.none, undefined, {
-          index: -1
-        }));
-      }
+      emitHighlight(undefined, -1, useScrollLock.none);
       return;
     }
     if (storeActiveIndex >= candidateItems.length) {
-      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        store.state.onItemHighlighted(undefined, useScrollLock.createGenericEventDetails(useScrollLock.none, undefined, {
-          index: -1
-        }));
-      }
+      emitHighlight(undefined, -1, useScrollLock.none);
       store.set('activeIndex', null);
       return;
     }
@@ -967,15 +1027,12 @@ function AriaCombobox(props) {
     const previouslyHighlightedItemValue = lastHighlightRef.current.value;
     const isSameItem = previouslyHighlightedItemValue !== NO_ACTIVE_VALUE && useCompositeListItem.compareItemEquality(itemValue, previouslyHighlightedItemValue, store.state.isItemEqualToValue);
     if (lastHighlightRef.current.index !== storeActiveIndex || !isSameItem) {
-      lastHighlightRef.current = {
-        value: itemValue,
-        index: storeActiveIndex
-      };
-      store.state.onItemHighlighted(itemValue, useScrollLock.createGenericEventDetails(useScrollLock.none, undefined, {
-        index: storeActiveIndex
-      }));
+      emitHighlight(itemValue, storeActiveIndex, useScrollLock.none);
     }
-  }, [activeIndex, autoHighlightMode, hasFilteredItemsProp, hasItems, flatFilteredItems, inline, open, store]);
+  }, [activeIndex, autoHighlightMode, emitHighlight, hasFilteredItemsProp, hasItems, flatFilteredItems, inline, open, store,
+  // Reruns the effect when the query changes without affecting the deps above, such as
+  // clearing the input when no items are filtered out (individually rendered items).
+  inputValue]);
   useScrollLock.useIsoLayoutEffect(() => {
     if (selectionMode === 'none') {
       setFilled(String(inputValue) !== '');
@@ -1006,6 +1063,12 @@ function AriaCombobox(props) {
     }
     setQueryChangedAfterOpen(true);
   });
+  function syncInputToSelectedLabel() {
+    const nextInputValue = useCompositeListItem.stringifyAsLabel(selectedValue, itemToStringLabel);
+    if (inputValue !== nextInputValue) {
+      setInputValue(nextInputValue, useScrollLock.createChangeEventDetails(useScrollLock.none));
+    }
+  }
   useScrollLock.useValueChanged(selectedValue, () => {
     if (selectionMode === 'none') {
       return;
@@ -1014,10 +1077,7 @@ function AriaCombobox(props) {
     setDirty(isSelectedValueDirty(selectedValue));
     validation.change(selectedValue);
     if (single && !hasInputValue && !inputInsidePopup) {
-      const nextInputValue = useCompositeListItem.stringifyAsLabel(selectedValue, itemToStringLabel);
-      if (inputValue !== nextInputValue) {
-        setInputValue(nextInputValue, useScrollLock.createChangeEventDetails(useScrollLock.none));
-      }
+      syncInputToSelectedLabel();
     }
   });
   useScrollLock.useValueChanged(inputValue, () => {
@@ -1032,10 +1092,7 @@ function AriaCombobox(props) {
     if (!single || hasInputValue || inputInsidePopup || queryChangedAfterOpen) {
       return;
     }
-    const nextInputValue = useCompositeListItem.stringifyAsLabel(selectedValue, itemToStringLabel);
-    if (inputValue !== nextInputValue) {
-      setInputValue(nextInputValue, useScrollLock.createChangeEventDetails(useScrollLock.none));
-    }
+    syncInputToSelectedLabel();
   });
   const floatingRootContext = useCompositeListItem.useFloatingRootContext({
     open: inline ? true : open,
@@ -1045,18 +1102,19 @@ function AriaCombobox(props) {
       floating: positionerElement
     }
   });
-  let ariaHasPopup;
-  let ariaExpanded;
-  if (!inline) {
-    ariaHasPopup = grid ? 'grid' : 'listbox';
-    ariaExpanded = open ? 'true' : 'false';
-  }
+  const ariaHasPopup = grid ? 'grid' : 'listbox';
+  // An inline list isn't gated on `open`: it renders for as long as it's in the tree, so the
+  // combobox is permanently expanded even while the internal open state is `false`.
+  const expanded = open || inline;
+  const ariaExpanded = expanded ? 'true' : 'false';
   const role = React__namespace.useMemo(() => {
     const isPlainInput = inputElement?.tagName === 'INPUT';
     // During SSR and initial hydration, the input ref is not available yet.
     // Assume an input-like control so combobox ARIA attributes are present.
     const shouldTreatAsInput = inputElement == null || isPlainInput;
-    const shouldApplyAria = shouldTreatAsInput || open;
+    // A non-input control only takes on combobox semantics while the list is exposed, which for
+    // an inline list is the whole time.
+    const shouldApplyAria = shouldTreatAsInput || expanded;
     const reference = shouldTreatAsInput ? {
       autoComplete: 'off',
       spellCheck: 'false',
@@ -1067,7 +1125,7 @@ function AriaCombobox(props) {
       reference.role = 'combobox';
       reference['aria-expanded'] = ariaExpanded;
       reference['aria-haspopup'] = ariaHasPopup;
-      reference['aria-controls'] = open ? listElement?.id : undefined;
+      reference['aria-controls'] = expanded ? listElement?.id : undefined;
       reference['aria-autocomplete'] = autoComplete;
     }
     return {
@@ -1076,7 +1134,7 @@ function AriaCombobox(props) {
         role: 'presentation'
       }
     };
-  }, [inputElement, open, ariaExpanded, ariaHasPopup, listElement?.id, autoComplete]);
+  }, [inputElement, expanded, ariaExpanded, ariaHasPopup, listElement?.id, autoComplete]);
   const click = useScrollLock.useClick(floatingRootContext, {
     enabled: !readOnly && !disabled && openOnInputClick,
     event: 'mousedown-only',
@@ -1130,7 +1188,7 @@ function AriaCombobox(props) {
       } else {
         setIndices({
           activeIndex: nextActiveIndex,
-          type: keyboardActiveRef.current ? 'keyboard' : 'pointer'
+          type: keyboardActiveRef.current ? useScrollLock.keyboard : useScrollLock.pointer
         });
       }
     }
@@ -1145,7 +1203,8 @@ function AriaCombobox(props) {
       }
     }
   }, dismiss.reference, click.reference, role.reference), [listNavigation.reference, dismiss.reference, click.reference, role.reference, grid, store]);
-  const popupProps = React__namespace.useMemo(() => useRenderElement.mergeProps(useScrollLock.FOCUSABLE_POPUP_PROPS, listNavigation.floating, dismiss.floating, role.floating), [listNavigation.floating, dismiss.floating, role.floating]);
+  const popupProps = React__namespace.useMemo(() => useRenderElement.mergeProps(useScrollLock.FOCUSABLE_POPUP_PROPS, dismiss.floating), [dismiss.floating]);
+  const listProps = React__namespace.useMemo(() => useRenderElement.mergeProps(listNavigation.floating, role.floating), [listNavigation.floating, role.floating]);
   const itemProps = React__namespace.useMemo(() => {
     const listNavigationItemProps = listNavigation.item;
     if (!listNavigationItemProps) {
@@ -1159,10 +1218,11 @@ function AriaCombobox(props) {
       onFocus: undefined
     };
   }, [listNavigation.item]);
-  useScrollLock.useOnFirstRender(() => {
+  useCompositeListItem.useOnFirstRender(() => {
     store.update({
       inline: inlineProp,
       popupProps,
+      listProps,
       inputProps,
       triggerProps,
       itemProps,
@@ -1170,10 +1230,10 @@ function AriaCombobox(props) {
       setInputValue,
       setSelectedValue,
       setIndices,
-      onItemHighlighted,
       handleSelection,
       forceMount,
-      requestSubmit
+      requestSubmit,
+      onOpenChangeComplete
     });
   });
   useScrollLock.useIsoLayoutEffect(() => {
@@ -1186,6 +1246,7 @@ function AriaCombobox(props) {
       items,
       inline: inlineProp,
       popupProps,
+      listProps,
       inputProps,
       triggerProps,
       openMethod,
@@ -1197,9 +1258,7 @@ function AriaCombobox(props) {
       readOnly,
       required,
       grid,
-      isGrouped,
       virtualized,
-      onOpenChangeComplete,
       openOnInputClick,
       itemToStringLabel,
       modal,
@@ -1207,10 +1266,9 @@ function AriaCombobox(props) {
       isItemEqualToValue,
       submitOnItemClick,
       hasInputValue,
-      requestSubmit,
       inputOwnsFormValue: selectionMode === 'none' && (inlineProp || !store.state.inputInsidePopup)
     });
-  }, [store, id, selectedValue, open, mounted, transitionStatus, items, popupProps, inputProps, itemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode, form]);
+  }, [store, id, selectedValue, open, mounted, transitionStatus, items, popupProps, listProps, inputProps, itemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, grid, virtualized, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, autoHighlightMode, form]);
   const hiddenInputRef = useRenderElement.useMergedRefs(inputRefProp, validation.inputRef);
   const itemsContextValue = React__namespace.useMemo(() => ({
     query,
@@ -1254,7 +1312,7 @@ function AriaCombobox(props) {
         },
         // Handle browser autofill.
         onChange(event) {
-          // Workaround for https://github.com/facebook/react/issues/9023
+          // Workaround for https://github.com/react/react/issues/9023
           if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
             return;
           }
@@ -1349,7 +1407,51 @@ const triggerStateAttributesMapping = {
   } : null
 };
 
-const BOUNDARY_OFFSET = 2;
+/**
+ * The popup side is only meaningful while the positioner is mounted, as the store retains the
+ * last resolved side after the popup unmounts.
+ */
+function usePopupSide(store) {
+  const mounted = useScrollLock.useStore(store, selectors.mounted);
+  const popupSide = useScrollLock.useStore(store, selectors.popupSide);
+  const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
+  return mounted && positionerElement ? popupSide : null;
+}
+
+/**
+ * Whether the filtered list has no items to show.
+ */
+function useListEmpty() {
+  return useComboboxDerivedItemsContext().filteredItems.length === 0;
+}
+
+/**
+ * The arrow keys that move the chip highlight backwards and forwards, in that order.
+ */
+function getChipNavigationKeys(direction) {
+  return direction === 'rtl' ? ['ArrowRight', 'ArrowLeft'] : ['ArrowLeft', 'ArrowRight'];
+}
+
+/**
+ * Where the highlight lands once the chip at `index` is removed, or `undefined` for no highlight.
+ */
+function getIndexAfterChipRemoval(index, chipCount) {
+  const nextIndex = index >= chipCount - 1 ? chipCount - 2 : index;
+  return nextIndex >= 0 ? nextIndex : undefined;
+}
+
+/**
+ * Commits the highlighted item by clicking it, tagging the originating event so the item's
+ * handler can attribute the selection to it.
+ */
+function clickHighlightedItem(store, activeIndex, nativeEvent) {
+  const listItem = store.state.listRef.current[activeIndex];
+  if (listItem) {
+    store.state.selectionEventRef.current = nativeEvent;
+    listItem.click();
+    store.state.selectionEventRef.current = null;
+  }
+}
 
 /**
  * A button that opens the popup.
@@ -1379,20 +1481,14 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
     labelId: fieldLabelId
   } = useCompositeListItem.useLabelableContext();
   const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   const selectionMode = useScrollLock.useStore(store, selectors.selectionMode);
   const comboboxDisabled = useScrollLock.useStore(store, selectors.disabled);
   const readOnly = useScrollLock.useStore(store, selectors.readOnly);
   const required = useScrollLock.useStore(store, selectors.required);
-  const mounted = useScrollLock.useStore(store, selectors.mounted);
-  const popupSideValue = useScrollLock.useStore(store, selectors.popupSide);
   const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
   const listElement = useScrollLock.useStore(store, selectors.listElement);
   const storedPopupId = useScrollLock.useStore(store, selectors.popupId);
   const triggerProps = useScrollLock.useStore(store, selectors.triggerProps);
-  const triggerElement = useScrollLock.useStore(store, selectors.triggerElement);
   const inputInsidePopup = useScrollLock.useStore(store, selectors.inputInsidePopup);
   const rootId = useScrollLock.useStore(store, selectors.id);
   const comboboxLabelId = useScrollLock.useStore(store, selectors.labelId);
@@ -1405,8 +1501,8 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
   const inputValue = useComboboxInputValueContext();
   const focusTimeout = useScrollLock.useTimeout();
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
-  const listEmpty = filteredItems.length === 0;
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const listEmpty = useListEmpty();
+  const popupSide = usePopupSide(store);
   useCompositeListItem.useLabelableId({
     id: inputInsidePopup ? idProp : undefined
   });
@@ -1424,18 +1520,6 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
   function trackPointerType(event) {
     currentPointerTypeRef.current = event.pointerType;
   }
-  const domReference = floatingRootContext.useState('domReferenceElement');
-
-  // Update the floating root context to use the trigger element when it differs from the current reference.
-  // This ensures useClick and useTypeahead attach handlers to the correct element.
-  React__namespace.useEffect(() => {
-    if (!inputInsidePopup) {
-      return;
-    }
-    if (triggerElement && triggerElement !== domReference) {
-      floatingRootContext.set('domReferenceElement', triggerElement);
-    }
-  }, [triggerElement, domReference, floatingRootContext, inputInsidePopup]);
   const {
     reference: triggerTypeaheadProps
   } = useCompositeListItem.useTypeahead(floatingRootContext, {
@@ -1446,7 +1530,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
     onMatch(index) {
       const nextSelectedValue = store.state.valuesRef.current[index];
       if (nextSelectedValue !== undefined) {
-        store.state.setSelectedValue(nextSelectedValue, useScrollLock.createChangeEventDetails('none'));
+        store.state.setSelectedValue(nextSelectedValue, useScrollLock.createChangeEventDetails(useScrollLock.none));
       }
     }
   });
@@ -1481,7 +1565,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
       id,
       tabIndex: inputInsidePopup ? 0 : -1,
       role: inputInsidePopup ? 'combobox' : undefined,
-      'aria-expanded': open ? 'true' : 'false',
+      'aria-expanded': open,
       'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
       'aria-controls': ariaControls,
       'aria-required': inputInsidePopup ? required || undefined : undefined,
@@ -1528,22 +1612,20 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
         }
         const doc = useScrollLock.ownerDocument(event.currentTarget);
         function handleMouseUp(mouseEvent) {
-          if (!triggerElement) {
+          const currentTriggerElement = store.state.triggerElement;
+          if (!currentTriggerElement) {
             return;
           }
           const mouseUpTarget = useScrollLock.getTarget(mouseEvent);
           const positioner = store.state.positionerElement;
           const list = store.state.listElement;
-          if (useScrollLock.contains(triggerElement, mouseUpTarget) || useScrollLock.contains(positioner, mouseUpTarget) || useScrollLock.contains(list, mouseUpTarget) || mouseUpTarget === triggerElement) {
+          if (useScrollLock.contains(currentTriggerElement, mouseUpTarget) || useScrollLock.contains(positioner, mouseUpTarget) || useScrollLock.contains(list, mouseUpTarget)) {
             return;
           }
-          const bounds = useCompositeListItem.getPseudoElementBounds(triggerElement);
-          const withinHorizontal = mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET;
-          const withinVertical = mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET;
-          if (withinHorizontal && withinVertical) {
+          if (useCompositeListItem.isMouseWithinBounds(mouseEvent, currentTriggerElement)) {
             return;
           }
-          store.state.setOpen(false, useScrollLock.createChangeEventDetails('cancel-open', mouseEvent));
+          store.state.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.cancelOpen, mouseEvent));
         }
         if (inputInsidePopup) {
           doc.addEventListener('mouseup', handleMouseUp, {
@@ -1552,7 +1634,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
         }
       },
       onKeyDown(event) {
-        if (disabled || readOnly) {
+        if (readOnly) {
           return;
         }
         if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
@@ -1561,7 +1643,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
           store.state.inputRef.current?.focus();
         }
       }
-    }, validation ? validation.getValidationProps(disabled, elementProps) : elementProps, getButtonProps],
+    }, validation.getValidationProps(disabled, elementProps), getButtonProps],
     stateAttributesMapping: triggerStateAttributesMapping
   });
   return element;
@@ -1636,9 +1718,6 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const positioning = useComboboxPositionerContext(true);
   const hasPositionerParent = Boolean(positioning);
   const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   // `inputValue` can't be placed in the store.
   // https://github.com/mui/base-ui/issues/2703
   const inputValue = useComboboxInputValueContext();
@@ -1655,19 +1734,16 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const open = useScrollLock.useStore(store, selectors.open);
   const mounted = useScrollLock.useStore(store, selectors.mounted);
   const selectedValue = useScrollLock.useStore(store, selectors.selectedValue);
-  const popupSideValue = useScrollLock.useStore(store, selectors.popupSide);
-  const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
   const rootId = useScrollLock.useStore(store, selectors.id);
   const inline = useScrollLock.useStore(store, selectors.inline);
   const modal = useScrollLock.useStore(store, selectors.modal);
   const autoHighlightEnabled = Boolean(autoHighlightMode);
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const popupSide = usePopupSide(store);
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
-  const listEmpty = filteredItems.length === 0;
+  const listEmpty = useListEmpty();
   const isInsidePopup = hasPositionerParent || inline;
   const focusManagerModal = !isInsidePopup || modal;
   const id = useScrollLock.useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
-  const ariaLabelledBy = useCompositeListItem.resolveAriaLabelledBy(fieldLabelId, undefined);
   const fieldStateForInput = hasPositionerParent ? useCompositeListItem.DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
   const [composingValue, setComposingValue] = React__namespace.useState(null);
   const isComposingRef = React__namespace.useRef(false);
@@ -1685,7 +1761,17 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
       inputOwnsFormValue
     });
   });
-  const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(disabled, elementProps);
+  const validationProps = hasPositionerParent ? elementProps : validation.getValidationProps(disabled, elementProps);
+  function clearHighlight() {
+    store.state.setIndices({
+      activeIndex: null,
+      selectedIndex: null,
+      type: store.state.keyboardActiveRef.current ? useScrollLock.keyboard : useScrollLock.pointer
+    });
+  }
+  function markPointerActive() {
+    store.state.keyboardActiveRef.current = false;
+  }
   const state = {
     ...fieldStateForInput,
     open,
@@ -1703,9 +1789,7 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
       highlightedChipIndex
     } = comboboxChipsContext;
     const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
-    const isRtl = direction === 'rtl';
-    const previousChipKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
-    const nextChipKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+    const [previousChipKey, nextChipKey] = getChipNavigationKeys(direction);
     if (highlightedChipIndex !== undefined) {
       if (event.key === previousChipKey) {
         event.preventDefault();
@@ -1724,14 +1808,8 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
       } else if (event.key === 'Backspace' || event.key === 'Delete') {
         event.preventDefault();
         // Move highlight appropriately after removal.
-        const computedNextIndex = highlightedChipIndex >= selectedValue.length - 1 ? selectedValue.length - 2 : highlightedChipIndex;
-        // If the computed index is negative, treat it as no highlight.
-        nextIndex = computedNextIndex >= 0 ? computedNextIndex : undefined;
-        store.state.setIndices({
-          activeIndex: null,
-          selectedIndex: null,
-          type: 'keyboard'
-        });
+        nextIndex = getIndexAfterChipRemoval(highlightedChipIndex, selectedValue.length);
+        clearHighlight();
       }
       return nextIndex;
     }
@@ -1740,13 +1818,6 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     if (event.key === previousChipKey && (event.currentTarget.selectionStart ?? 0) === 0 && selectedValue.length > 0) {
       event.preventDefault();
       nextIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : undefined;
-    } else if (event.key === 'Backspace' && event.currentTarget.value === '' && selectedValue.length > 0) {
-      store.state.setIndices({
-        activeIndex: null,
-        selectedIndex: null,
-        type: 'keyboard'
-      });
-      event.preventDefault();
     }
     return nextIndex;
   }
@@ -1754,11 +1825,10 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     state,
     ref: [forwardedRef, store.state.inputRef, setInputElement],
     props: [inputProps, triggerProps, {
-      type: 'text',
-      value: componentProps.value ?? composingValue ?? inputValue,
+      value: composingValue ?? inputValue,
       'aria-readonly': readOnly || undefined,
       'aria-required': required || undefined,
-      'aria-labelledby': ariaLabelledBy,
+      'aria-labelledby': fieldLabelId,
       disabled,
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
@@ -1813,11 +1883,23 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
         store.state.setInputValue(next, useScrollLock.createChangeEventDetails(useScrollLock.inputChange, event.nativeEvent));
       },
       onChange(event) {
+        const nativeEvent = event.nativeEvent;
         // Autofill may not provide `inputType` (Chrome) or may report
         // `insertReplacementText` (Firefox).
-        const inputType = event.nativeEvent.inputType;
+        const inputType = nativeEvent.inputType;
         const autofillLikeInput = !inputType || inputType === 'insertReplacementText';
+        // During composition the input is always considered typed into.
         const shouldOpenOnInput = isComposingRef.current || !autofillLikeInput;
+        function maybeOpenOnInput(trimmed) {
+          if (readOnly || disabled || !trimmed || !shouldOpenOnInput) {
+            return;
+          }
+          store.state.setOpen(true, useScrollLock.createChangeEventDetails(useScrollLock.inputChange, nativeEvent));
+          // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
+          if (!autoHighlightEnabled) {
+            clearHighlight();
+          }
+        }
 
         // During IME composition, avoid propagating controlled updates to prevent
         // filtering the options prematurely so `Empty` won't show incorrectly.
@@ -1829,38 +1911,23 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
           const nextVal = event.currentTarget.value;
           setComposingValue(nextVal);
           if (nextVal === '' && !store.state.openOnInputClick && !store.state.inputInsidePopup) {
-            store.state.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.inputClear, event.nativeEvent));
+            store.state.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.inputClear, nativeEvent));
           }
           const trimmed = nextVal.trim();
           const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
-          if (!readOnly && !disabled && trimmed) {
-            if (shouldOpenOnInput) {
-              store.state.setOpen(true, useScrollLock.createChangeEventDetails(useScrollLock.inputChange, event.nativeEvent));
-              if (!autoHighlightEnabled) {
-                store.state.setIndices({
-                  activeIndex: null,
-                  selectedIndex: null,
-                  type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-                });
-              }
-            }
-          }
+          maybeOpenOnInput(trimmed);
           if (open && store.state.activeIndex !== null && !shouldMaintainHighlight) {
-            store.state.setIndices({
-              activeIndex: null,
-              selectedIndex: null,
-              type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-            });
+            clearHighlight();
           }
           return;
         }
-        const inputChangeDetails = useScrollLock.createChangeEventDetails(useScrollLock.inputChange, event.nativeEvent);
+        const inputChangeDetails = useScrollLock.createChangeEventDetails(useScrollLock.inputChange, nativeEvent);
         store.state.setInputValue(event.currentTarget.value, inputChangeDetails);
         if (inputChangeDetails.isCanceled) {
           return;
         }
         const empty = event.currentTarget.value === '';
-        const clearDetails = useScrollLock.createChangeEventDetails(useScrollLock.inputClear, event.nativeEvent);
+        const clearDetails = useScrollLock.createChangeEventDetails(useScrollLock.inputClear, nativeEvent);
         if (empty && !store.state.inputInsidePopup) {
           if (selectionMode === 'single') {
             store.state.setSelectedValue(null, clearDetails);
@@ -1869,30 +1936,13 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
             store.state.setOpen(false, clearDetails);
           }
         }
-        const trimmed = event.currentTarget.value.trim();
-        if (!readOnly && !disabled && trimmed) {
-          if (shouldOpenOnInput) {
-            store.state.setOpen(true, useScrollLock.createChangeEventDetails(useScrollLock.inputChange, event.nativeEvent));
-            // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
-            if (!autoHighlightEnabled) {
-              store.state.setIndices({
-                activeIndex: null,
-                selectedIndex: null,
-                type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-              });
-            }
-          }
-        }
+        maybeOpenOnInput(event.currentTarget.value.trim());
 
         // When the user types, ensure the list resets its highlight so that
         // virtual focus returns to the input (aria-activedescendant is
         // cleared).
         if (open && store.state.activeIndex !== null && !autoHighlightEnabled) {
-          store.state.setIndices({
-            activeIndex: null,
-            selectedIndex: null,
-            type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-          });
+          clearHighlight();
         }
       },
       onKeyDown(event) {
@@ -1938,11 +1988,7 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
           const removalIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : selectedValue.length - 1;
           const newValue = selectedValue.filter((_, index) => index !== removalIndex);
           // If the removed item was also the active (highlighted) item, clear highlight
-          store.state.setIndices({
-            activeIndex: null,
-            selectedIndex: null,
-            type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
-          });
+          clearHighlight();
           store.state.setSelectedValue(newValue, useScrollLock.createChangeEventDetails(useScrollLock.none, event.nativeEvent));
           return;
         }
@@ -1972,20 +2018,11 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
             return;
           }
           useScrollLock.stopEvent(event);
-          const listItem = store.state.listRef.current[activeIndex];
-          if (listItem) {
-            store.state.selectionEventRef.current = nativeEvent;
-            listItem.click();
-            store.state.selectionEventRef.current = null;
-          }
+          clickHighlightedItem(store, activeIndex, nativeEvent);
         }
       },
-      onPointerMove() {
-        store.state.keyboardActiveRef.current = false;
-      },
-      onPointerDown() {
-        store.state.keyboardActiveRef.current = false;
-      }
+      onPointerMove: markPointerActive,
+      onPointerDown: markPointerActive
     }, validationProps],
     stateAttributesMapping: triggerStateAttributesMapping
   });
@@ -2006,7 +2043,7 @@ function handleInputPress(event, store, disabled, readOnly, shouldIgnoreTarget)
     return;
   }
   const target = useScrollLock.getTarget(event.nativeEvent);
-  const targetElement = floatingUi_utils.isElement(target) ? target : null;
+  const targetElement = useScrollLock.isElement(target) ? target : null;
   if (targetElement !== event.currentTarget && (shouldIgnoreTarget?.(targetElement) || useScrollLock.isInteractiveElement(targetElement))) {
     return;
   }
@@ -2037,20 +2074,14 @@ const ComboboxInputGroup = /*#__PURE__*/React__namespace.forwardRef(function Com
     state: fieldState
   } = useCompositeListItem.useFieldRootContext();
   const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   const open = useScrollLock.useStore(store, selectors.open);
-  const mounted = useScrollLock.useStore(store, selectors.mounted);
-  const popupSideValue = useScrollLock.useStore(store, selectors.popupSide);
-  const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
   const comboboxDisabled = useScrollLock.useStore(store, selectors.disabled);
   const readOnly = useScrollLock.useStore(store, selectors.readOnly);
   const hasSelectedValue = useScrollLock.useStore(store, selectors.hasSelectedValue);
   const selectionMode = useScrollLock.useStore(store, selectors.selectionMode);
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const popupSide = usePopupSide(store);
   const disabled = comboboxDisabled;
-  const listEmpty = filteredItems.length === 0;
+  const listEmpty = useListEmpty();
   const placeholder = selectionMode === 'none' ? false : !hasSelectedValue;
   const state = {
     ...fieldState,
@@ -2186,19 +2217,21 @@ const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function Combobox
         if (disabled || readOnly) {
           return;
         }
-        const keyboardActiveRef = store.state.keyboardActiveRef;
+        const type = store.state.keyboardActiveRef.current ? useScrollLock.keyboard : useScrollLock.pointer;
         store.state.setInputValue('', useScrollLock.createChangeEventDetails(useScrollLock.clearPress, event.nativeEvent));
         if (selectionMode !== 'none') {
           store.state.setSelectedValue(Array.isArray(selectedValue) ? [] : null, useScrollLock.createChangeEventDetails(useScrollLock.clearPress, event.nativeEvent));
+          // A distinct object shape: `Store.update` iterates own keys, so passing an explicit
+          // `selectedIndex: undefined` would overwrite the state instead of leaving it alone.
           store.state.setIndices({
             activeIndex: null,
             selectedIndex: null,
-            type: keyboardActiveRef.current ? 'keyboard' : 'pointer'
+            type
           });
         } else {
           store.state.setIndices({
             activeIndex: null,
-            type: keyboardActiveRef.current ? 'keyboard' : 'pointer'
+            type
           });
         }
         store.state.inputRef.current?.focus();
@@ -2242,9 +2275,6 @@ function ComboboxCollection(props) {
   } = useComboboxDerivedItemsContext();
   const groupContext = useGroupCollectionContext();
   const itemsToRender = groupContext ? groupContext.items : filteredItems;
-  if (!itemsToRender) {
-    return null;
-  }
   return /*#__PURE__*/jsxRuntime.jsx(React__namespace.Fragment, {
     children: itemsToRender.map(children)
   });
@@ -2268,7 +2298,7 @@ const ComboboxList = /*#__PURE__*/React__namespace.forwardRef(function ComboboxL
   } = useComboboxDerivedItemsContext();
   const selectionMode = useScrollLock.useStore(store, selectors.selectionMode);
   const grid = useScrollLock.useStore(store, selectors.grid);
-  const popupProps = useScrollLock.useStore(store, selectors.popupProps);
+  const listProps = useScrollLock.useStore(store, selectors.listProps);
   const virtualized = useScrollLock.useStore(store, selectors.virtualized);
   const forceMounted = useScrollLock.useStore(store, selectors.forceMounted);
   const multiple = selectionMode === 'multiple';
@@ -2282,7 +2312,7 @@ const ComboboxList = /*#__PURE__*/React__namespace.forwardRef(function ComboboxL
 
   // Support "closed template" API: if children is a function, implicitly wrap it
   // with a Combobox.Collection that reads items from context/root.
-  // Ensures this component's `popupProps` subscription does not cause <Combobox.Item>
+  // Ensures this component's `listProps` subscription does not cause <Combobox.Item>
   // to re-render on every active index change.
   const resolvedChildren = React__namespace.useMemo(() => {
     if (typeof children === 'function') {
@@ -2299,7 +2329,7 @@ const ComboboxList = /*#__PURE__*/React__namespace.forwardRef(function ComboboxL
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, setListElement, hasPositionerContext ? null : setPositionerElement],
-    props: [popupProps, {
+    props: [listProps, {
       children: resolvedChildren,
       tabIndex: -1,
       id: floatingId,
@@ -2316,13 +2346,7 @@ const ComboboxList = /*#__PURE__*/React__namespace.forwardRef(function ComboboxL
             return;
           }
           useScrollLock.stopEvent(event);
-          const nativeEvent = event.nativeEvent;
-          const listItem = store.state.listRef.current[activeIndex];
-          if (listItem) {
-            store.state.selectionEventRef.current = nativeEvent;
-            listItem.click();
-            store.state.selectionEventRef.current = null;
-          }
+          clickHighlightedItem(store, activeIndex, event.nativeEvent);
         }
       },
       onKeyDownCapture() {
@@ -2381,7 +2405,7 @@ function useInitialLiveRegionTextMutation() {
     if (textNode == null) {
       return undefined;
     }
-    const originalValue = textNode.nodeValue ?? '';
+    const originalValue = textNode.data;
     const markedValue = `${originalValue}${LIVE_REGION_MARKER}`;
     textNode.nodeValue = markedValue;
     timeout.start(INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY, () => {
@@ -2510,24 +2534,23 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
     render,
     className,
     anchor,
-    positionMethod = 'absolute',
-    side = 'bottom',
-    align = 'center',
-    sideOffset = 0,
-    alignOffset = 0,
+    // `useAnchorPositioning` applies the same defaults to the undefined values; the names
+    // remain destructured to exclude the props from `elementProps`.
+    positionMethod,
+    side,
+    align,
+    sideOffset,
+    alignOffset,
     collisionBoundary = 'clipping-ancestors',
-    collisionPadding = 5,
-    arrowPadding = 5,
-    sticky = false,
+    collisionPadding,
+    arrowPadding,
+    sticky,
     disableAnchorTracking = false,
     collisionAvoidance = useScrollLock.DROPDOWN_COLLISION_AVOIDANCE,
     style: styleProp,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   const floatingRootContext = useComboboxFloatingContext();
   const keepMounted = useComboboxPortalContext();
   const modal = useScrollLock.useStore(store, selectors.modal);
@@ -2540,7 +2563,7 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
   const inputGroupElement = useScrollLock.useStore(store, selectors.inputGroupElement);
   const inputInsidePopup = useScrollLock.useStore(store, selectors.inputInsidePopup);
   const transitionStatus = useScrollLock.useStore(store, selectors.transitionStatus);
-  const empty = filteredItems.length === 0;
+  const empty = useListEmpty();
   const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputGroupElement ?? inputElement);
   const positioning = useCompositeListItem.useAnchorPositioning({
     anchor: resolvedAnchor,
@@ -2615,18 +2638,16 @@ const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const store = useComboboxRootContext();
   const positioning = useComboboxPositionerContext();
   const floatingRootContext = useComboboxFloatingContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   const mounted = useScrollLock.useStore(store, selectors.mounted);
   const open = useScrollLock.useStore(store, selectors.open);
   const openMethod = useScrollLock.useStore(store, selectors.openMethod);
+  const popupProps = useScrollLock.useStore(store, selectors.popupProps);
   const transitionStatus = useScrollLock.useStore(store, selectors.transitionStatus);
   const inputInsidePopup = useScrollLock.useStore(store, selectors.inputInsidePopup);
   const inputElement = useScrollLock.useStore(store, selectors.inputElement);
   const modal = useScrollLock.useStore(store, selectors.modal);
   const rootId = useScrollLock.useStore(store, selectors.id);
-  const empty = filteredItems.length === 0;
+  const empty = useListEmpty();
   const popupId = elementProps.id ?? (inputInsidePopup ? getComboboxPopupId(rootId) : undefined);
   useScrollLock.useIsoLayoutEffect(() => {
     // Prefer the rendered DOM id, which a `render` prop element or function may override.
@@ -2655,10 +2676,9 @@ const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.state.popupRef],
-    props: [{
+    props: [popupProps, {
       id: popupId,
       role: inputInsidePopup ? 'dialog' : 'presentation',
-      tabIndex: -1,
       onFocus(event) {
         const target = useScrollLock.getTarget(event.nativeEvent);
         if (openMethod !== 'touch' && (useScrollLock.contains(store.state.listElement, target) || target === event.currentTarget)) {
@@ -2805,7 +2825,7 @@ const ComboboxGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function Com
   useScrollLock.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
-      setLabelId(undefined);
+      setLabelId(currentId => currentId === id ? undefined : currentId);
     };
   }, [id, setLabelId]);
   const element = useRenderElement.useRenderElement('div', componentProps, {
@@ -2847,27 +2867,27 @@ function ComboboxItemInner(props) {
     style,
     value: itemValue = null,
     index: indexProp,
-    disabled = false,
+    disabled: disabledProp = false,
     nativeButton = false,
     ...elementProps
   } = componentProps;
-  const didPointerDownRef = React__namespace.useRef(false);
   const textRef = React__namespace.useRef(null);
   const listItem = useCompositeListItem.useCompositeListItem({
+    guess: true,
     index: indexProp,
-    textRef,
-    indexGuessBehavior: useCompositeListItem.IndexGuessBehavior.GuessFromOrder
+    textRef
   });
   const store = useComboboxRootContext();
   const isRow = useComboboxRowContext();
   const hasItems = useComboboxHasItemsContext();
-  const open = useScrollLock.useStore(store, selectors.open);
   const selectionMode = useScrollLock.useStore(store, selectors.selectionMode);
+  const rootDisabled = useScrollLock.useStore(store, selectors.disabled);
   const readOnly = useScrollLock.useStore(store, selectors.readOnly);
   const isItemEqualToValue = useScrollLock.useStore(store, selectors.isItemEqualToValue);
+  const disabled = rootDisabled || disabledProp;
   const selectable = selectionMode !== 'none';
-  const index = indexProp ?? (virtualized ? indexFromFilter ?? -1 : listItem.index);
-  const hasRegistered = listItem.index !== -1;
+  const index = indexProp ?? indexFromFilter ?? listItem.index;
+  const hasRegistered = index !== -1;
   const rootId = useScrollLock.useStore(store, selectors.id);
   const highlighted = useScrollLock.useStore(store, selectors.isActive, index);
   const matchesSelectedValue = useScrollLock.useStore(store, selectors.isSelected, itemValue);
@@ -2892,31 +2912,24 @@ function ComboboxItemInner(props) {
     }
     const visibleMap = store.state.valuesRef.current;
     visibleMap[index] = itemValue;
-
-    // Stable registry that doesn't depend on filtering. Assume that no
-    // filtering had occurred at this point; otherwise, an `items` prop is
-    // required.
-    if (selectionMode !== 'none') {
-      store.state.allValuesRef.current.push(itemValue);
-    }
     return () => {
       delete visibleMap[index];
     };
-  }, [hasRegistered, hasItems, index, itemValue, store, selectionMode]);
+  }, [hasRegistered, hasItems, index, itemValue, store]);
   useScrollLock.useIsoLayoutEffect(() => {
-    if (!open) {
-      didPointerDownRef.current = false;
-      return;
-    }
     if (!hasRegistered || hasItems) {
       return;
     }
+
+    // Runs while closed as well (the list can stay mounted via `keepMounted` or a
+    // force-mount) so the index tracks the item's composite position, keeping features
+    // like closed-trigger typeahead in sync when the rendered order changes.
     const selectedValue = store.state.selectedValue;
     const lastSelectedValue = Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue;
     if (useCompositeListItem.compareItemEquality(itemValue, lastSelectedValue, isItemEqualToValue)) {
       store.set('selectedIndex', index);
     }
-  }, [hasRegistered, hasItems, open, store, index, itemValue, isItemEqualToValue]);
+  }, [hasRegistered, hasItems, store, index, itemValue, isItemEqualToValue]);
   const {
     getButtonProps,
     buttonRef
@@ -2951,7 +2964,12 @@ function ComboboxItemInner(props) {
     // as it should be a `<div>` instead.
     tabIndex: undefined,
     onPointerDownCapture(event) {
-      didPointerDownRef.current = true;
+      // The compat `mouseup` only fires for the primary pointer, so a non-primary
+      // touch must not overwrite the shared ref — a mismatch would make the primary
+      // pointer's release read as a drag-select and commit a second time after `click`.
+      if (event.isPrimary) {
+        store.state.pointerDownItemRef.current = event.currentTarget;
+      }
       event.preventDefault();
     },
     onMouseDown(event) {
@@ -2966,8 +2984,8 @@ function ComboboxItemInner(props) {
       commitSelection(event.nativeEvent);
     },
     onMouseUp(event) {
-      const pointerStartedOnItem = didPointerDownRef.current;
-      didPointerDownRef.current = false;
+      const pointerStartedOnItem = store.state.pointerDownItemRef.current === event.currentTarget;
+      store.state.pointerDownItemRef.current = null;
       if (disabled || readOnly || event.button !== 0 || pointerStartedOnItem || !highlighted) {
         return;
       }
@@ -3103,6 +3121,33 @@ const ComboboxEmpty = /*#__PURE__*/React__namespace.forwardRef(function Combobox
 });
 if (process.env.NODE_ENV !== "production") ComboboxEmpty.displayName = "ComboboxEmpty";
 
+/**
+ * A visual separator between items.
+ * Renders a `<div>` element.
+ *
+ * @internal
+ */
+const ListboxSeparator = /*#__PURE__*/React__namespace.forwardRef(function ListboxSeparator(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    orientation = 'horizontal',
+    style,
+    ...elementProps
+  } = componentProps;
+  const state = {
+    orientation
+  };
+  return useRenderElement.useRenderElement('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      role: 'presentation'
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") ListboxSeparator.displayName = "ListboxSeparator";
+
 /**
  * Returns the internally filtered items.
  */
@@ -3169,7 +3214,8 @@ const ComboboxLabel = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     id: defaultLabelId,
     fallbackControlId: localControlId,
     setLabelId(nextLabelId) {
-      store.set('labelId', nextLabelId);
+      const resolvedLabelId = typeof nextLabelId === 'function' ? nextLabelId(store.state.labelId) : nextLabelId;
+      store.set('labelId', resolvedLabelId);
     }
   });
   return useRenderElement.useRenderElement('div', componentProps, {
@@ -3212,11 +3258,10 @@ function ComboboxValue(props) {
 }
 
 const ComboboxItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function ComboboxItemIndicator(componentProps, forwardedRef) {
-  const keepMounted = componentProps.keepMounted ?? false;
   const {
     selected
   } = useComboboxItemContext();
-  const shouldRender = keepMounted || selected;
+  const shouldRender = componentProps.keepMounted || selected;
   if (!shouldRender) {
     return null;
   }
@@ -3346,9 +3391,7 @@ const ComboboxChip = /*#__PURE__*/React__namespace.forwardRef(function ComboboxC
   } = useCompositeListItem.useCompositeListItem();
   function handleKeyDown(event) {
     let nextIndex = index;
-    const isRtl = direction === 'rtl';
-    const previousChipKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
-    const nextChipKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+    const [previousChipKey, nextChipKey] = getChipNavigationKeys(direction);
     if (event.key === previousChipKey) {
       event.preventDefault();
       if (index > 0) {
@@ -3364,13 +3407,12 @@ const ComboboxChip = /*#__PURE__*/React__namespace.forwardRef(function ComboboxC
         nextIndex = undefined;
       }
     } else if (event.key === 'Backspace' || event.key === 'Delete') {
-      const computedNextIndex = index >= selectedValue.length - 1 ? selectedValue.length - 2 : index;
-      nextIndex = computedNextIndex >= 0 ? computedNextIndex : undefined;
+      nextIndex = getIndexAfterChipRemoval(index, selectedValue.length);
       useScrollLock.stopEvent(event);
       store.state.setIndices({
         activeIndex: null,
         selectedIndex: null,
-        type: 'keyboard'
+        type: useScrollLock.keyboard
       });
       store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), useScrollLock.createChangeEventDetails(useScrollLock.none, event.nativeEvent));
     } else if (event.key === 'Enter' || event.key === ' ') {
@@ -3470,7 +3512,7 @@ const ComboboxChipRemove = /*#__PURE__*/React__namespace.forwardRef(function Com
     if (removedIndex !== -1 && activeIndex === removedIndex) {
       store.state.setIndices({
         activeIndex: null,
-        type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
+        type: store.state.keyboardActiveRef.current ? useScrollLock.keyboard : useScrollLock.pointer
       });
     }
   }
@@ -3491,18 +3533,12 @@ const ComboboxChipRemove = /*#__PURE__*/React__namespace.forwardRef(function Com
         event.preventDefault();
       },
       onClick(event) {
-        if (disabled || readOnly) {
-          return;
-        }
         const eventDetails = removeChip(event);
         if (!eventDetails.isPropagationAllowed) {
           event.stopPropagation();
         }
       },
       onKeyDown(event) {
-        if (disabled || readOnly) {
-          return;
-        }
         if (event.key === 'Enter' || event.key === ' ') {
           const eventDetails = removeChip(event);
           if (!eventDetails.isPropagationAllowed) {
@@ -3516,6 +3552,14 @@ const ComboboxChipRemove = /*#__PURE__*/React__namespace.forwardRef(function Com
 });
 if (process.env.NODE_ENV !== "production") ComboboxChipRemove.displayName = "ComboboxChipRemove";
 
+/**
+ * A visual separator between items or groups.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ */
+const ComboboxSeparator = ListboxSeparator;
+
 exports.AriaCombobox = AriaCombobox;
 exports.ComboboxArrow = ComboboxArrow;
 exports.ComboboxBackdrop = ComboboxBackdrop;
@@ -3539,9 +3583,11 @@ exports.ComboboxPortal = ComboboxPortal;
 exports.ComboboxPositioner = ComboboxPositioner;
 exports.ComboboxRoot = ComboboxRoot;
 exports.ComboboxRow = ComboboxRow;
+exports.ComboboxSeparator = ComboboxSeparator;
 exports.ComboboxStatus = ComboboxStatus;
 exports.ComboboxTrigger = ComboboxTrigger;
 exports.ComboboxValue = ComboboxValue;
+exports.ListboxSeparator = ListboxSeparator;
 exports.useComboboxFilter = useComboboxFilter;
 exports.useComboboxInputValueContext = useComboboxInputValueContext;
 exports.useCoreFilter = useCoreFilter;