@jobber/components 9.5.3 → 9.6.0

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { bi as getGridNavigatedIndex, ag as isIndexOutOfListBounds, N as createSelector, a4 as useDirection, n as useControlled, V as Store, b as useStableCallback, P as useStore, q as useValueAsRef, m as useTransitionStatus, O as useOpenInteractionType, a as useIsoLayoutEffect, E as createGenericEventDetails, z as inputClear, y as inputChange, d as createChangeEventDetails, W as focusOut, X as outsidePress, g as getTarget, a9 as itemPress, f as useOpenChangeComplete, K as useValueChanged, v as none, Q as useClick, bj as inputPress, R as useDismiss, _ as contains, F as FOCUSABLE_POPUP_PROPS, U as useOnFirstRender, w as visuallyHiddenInput, x as visuallyHidden, Y as pressableTriggerOpenStateMapping, k as useTimeout, c as useButton, o as ownerDocument, L as stopEvent, aj as listNavigation, e as closePress, u as useBaseUiId, bd as android, bk as gecko, aF as escapeKey, aG as isInteractiveElement, bl as clearPress, t as transitionStatusMapping, b8 as triggerOpenStateMapping, r as ios, a0 as FloatingPortal, p as popupStateMapping, a1 as InternalBackdrop, a2 as inertValue, a3 as DROPDOWN_COLLISION_AVOIDANCE, i as FloatingFocusManager, S as SafeReact, l as error, bm as chipRemovePress } from './useScrollLock-es.js';
+import { bU as getGridNavigatedIndex, aO as isIndexOutOfListBounds, a7 as useDirection, v as useControlled, bV as Store, d as useStableCallback, U as useStore, w as useValueAsRef, s as useTransitionStatus, R as useOpenInteractionType, G as createGenericEventDetails, z as none, M as inputClear, O as inputChange, aE as getOverflowAncestors, i as isHTMLElement, a0 as contains, bu as escapeKey, h as createChangeEventDetails, Y as focusOut, Z as outsidePress, e as getTarget, ad as itemPress, l as useOpenChangeComplete, c as useIsoLayoutEffect, L as useValueChanged, V as useClick, bW as inputPress, W as useDismiss, F as FOCUSABLE_POPUP_PROPS, B as visuallyHiddenInput, C as visuallyHidden, P as keyboard, bX as pointer, _ as pressableTriggerOpenStateMapping, q as useTimeout, f as useButton, o as ownerDocument, aR as stopEvent, aS as listNavigation, a1 as cancelOpen, j as closePress, u as useBaseUiId, bg as android, bY as gecko, au as isElement, bv as isInteractiveElement, bZ as clearPress, t as transitionStatusMapping, be as triggerOpenStateMapping, x as ios, a2 as FloatingPortal, a6 as popupStateMapping, a3 as InternalBackdrop, a4 as inertValue, a5 as DROPDOWN_COLLISION_AVOIDANCE, n as FloatingFocusManager, S as SafeReact, r as error, b_ as chipRemovePress } from './useScrollLock-es.js';
 import { f as formatErrorMessage, c as EMPTY_ARRAY, a as useRefWithInit, E as EMPTY_OBJECT, N as NOOP, m as mergeProps, b as useMergedRefs, u as useRenderElement } from './useRenderElement-es.js';
-import { h as hasNullItemLabel, e as compareItemEquality, m as stringifyAsLabel, a as useFormContext, b as useFieldRootContext, c as useLabelableId, E as isGroupedItems, s as stringifyAsValue, d as useRegisterFieldControl, x as selectedValueIncludes, A as removeItem, g as findItemIndex, i as useFloatingRootContext, j as useListNavigation, l as defaultItemEquality, n as areArraysEqual, f as fieldValidityMapping, u as useLabelableContext, k as useTypeahead, r as resolveAriaLabelledBy, o as getPseudoElementBounds, F as FieldRootContext, G as DEFAULT_FIELD_ROOT_CONTEXT, H as DEFAULT_FIELD_STATE_ATTRIBUTES, C as CompositeList, v as useAnchorPositioning, t as useAnchoredPopupScrollLock, w as usePositioner, y as getDisabledMountTransitionStyles, z as useCompositeListItem, I as IndexGuessBehavior, J as getDefaultLabelId, p as resolveMultipleLabels, q as resolveSelectedLabel } from './useCompositeListItem-es.js';
+import { h as hasNullItemLabel, e as compareItemEquality, n as stringifyAsLabel, a as useFormContext, b as useFieldRootContext, c as useLabelableId, E as isGroupedItems, G as findSelectionIndex, s as stringifyAsValue, d as useRegisterFieldControl, H as selectedValueIncludes, B as removeItem, i as useFloatingRootContext, j as useListNavigation, l as useOnFirstRender, m as defaultItemEquality, o as areArraysEqual, f as fieldValidityMapping, u as useLabelableContext, k as useTypeahead, r as resolveAriaLabelledBy, p as isMouseWithinBounds, F as FieldRootContext, I as DEFAULT_FIELD_ROOT_CONTEXT, J as DEFAULT_FIELD_STATE_ATTRIBUTES, C as CompositeList, w as useAnchorPositioning, v as useAnchoredPopupScrollLock, x as usePositioner, z as getDisabledMountTransitionStyles, A as useCompositeListItem, g as findItemIndex, K as getDefaultLabelId, q as resolveMultipleLabels, t as resolveSelectedLabel } from './useCompositeListItem-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import { s as stringifyLocale } from './stringifyLocale-es.js';
+import { i as isScrollableY } from './scrollable-es.js';
 import { u as useLabel } from './useLabel-es.js';
-import { b as isElement } from './floating-ui.utils-es.js';
 
 /**
  * Positional arguments are deliberate: property names of an options object
@@ -82,15 +82,15 @@ function useComboboxHasItemsContext() {
 }
 
 const selectors = {
-  id: createSelector(state => state.id),
-  labelId: createSelector(state => state.labelId),
-  items: createSelector(state => state.items),
-  selectedValue: createSelector(state => state.selectedValue),
-  hasSelectionChips: 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: createSelector(state => {
+  },
+  hasSelectedValue: state => {
     const {
       selectedValue,
       selectionMode
@@ -102,53 +102,53 @@ const selectors = {
       return selectedValue.length > 0;
     }
     return true;
-  }),
-  hasNullItemLabel: createSelector((state, enabled) => {
+  },
+  hasNullItemLabel: (state, enabled) => {
     return enabled ? hasNullItemLabel(state.items) : false;
-  }),
-  open: createSelector(state => state.open),
-  mounted: createSelector(state => state.mounted),
-  forceMounted: createSelector(state => state.forceMounted),
-  inline: createSelector(state => state.inline),
-  activeIndex: createSelector(state => state.activeIndex),
-  selectedIndex: createSelector(state => state.selectedIndex),
-  isActive: createSelector((state, index) => state.activeIndex === index),
-  isSelected: 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 => compareItemEquality(itemValue, selectedItem, comparer));
     }
     return compareItemEquality(itemValue, selectedValue, comparer);
-  }),
-  transitionStatus: createSelector(state => state.transitionStatus),
-  popupProps: createSelector(state => state.popupProps),
-  inputProps: createSelector(state => state.inputProps),
-  triggerProps: createSelector(state => state.triggerProps),
-  itemProps: createSelector(state => state.itemProps),
-  positionerElement: createSelector(state => state.positionerElement),
-  listElement: createSelector(state => state.listElement),
-  popupId: createSelector(state => state.popupId),
-  triggerElement: createSelector(state => state.triggerElement),
-  inputElement: createSelector(state => state.inputElement),
-  inputGroupElement: createSelector(state => state.inputGroupElement),
-  popupSide: createSelector(state => state.popupSide),
-  openMethod: createSelector(state => state.openMethod),
-  inputInsidePopup: createSelector(state => state.inputInsidePopup),
-  inputOwnsFormValue: createSelector(state => state.inputOwnsFormValue),
-  selectionMode: createSelector(state => state.selectionMode),
-  name: createSelector(state => state.name),
-  form: createSelector(state => state.form),
-  disabled: createSelector(state => state.disabled),
-  readOnly: createSelector(state => state.readOnly),
-  required: createSelector(state => state.required),
-  grid: createSelector(state => state.grid),
-  virtualized: createSelector(state => state.virtualized),
-  itemToStringLabel: createSelector(state => state.itemToStringLabel),
-  isItemEqualToValue: createSelector(state => state.isItemEqualToValue),
-  modal: createSelector(state => state.modal),
-  autoHighlight: createSelector(state => state.autoHighlight),
-  submitOnItemClick: 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
 };
 
 /**
@@ -171,8 +171,7 @@ function createCollatorItemFilter(collatorFilter, itemToStringLabel) {
     if (item == null) {
       return false;
     }
-    const itemString = stringifyAsLabel(item, itemToStringLabel);
-    return collatorFilter.contains(itemString, query);
+    return collatorFilter.contains(item, query, itemToStringLabel);
   };
 }
 
@@ -188,14 +187,13 @@ function createSingleSelectionCollatorFilter(collatorFilter, itemToStringLabel,
     if (!query) {
       return true;
     }
-    const itemString = stringifyAsLabel(item, itemToStringLabel);
     const selectedString = selectedValue != null ? 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);
   };
 }
 
@@ -267,9 +265,8 @@ function useComboboxFilter(options = {}) {
     return createSingleSelectionCollatorFilter(coreFilter, itemToString, value)(item, query);
   }, [coreFilter, value, multiple]);
   return React.useMemo(() => ({
-    contains,
-    startsWith: coreFilter.startsWith,
-    endsWith: coreFilter.endsWith
+    ...coreFilter,
+    contains
   }), [contains, coreFilter]);
 }
 
@@ -290,7 +287,7 @@ function AriaCombobox(props) {
     inputValue: inputValueProp,
     open: openProp,
     defaultOpen = false,
-    selectionMode = 'none',
+    selectionMode,
     onItemHighlighted: onItemHighlightedProp,
     name: nameProp,
     form,
@@ -363,12 +360,10 @@ function AriaCombobox(props) {
    */
   const valuesRef = React.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.useRef([]);
+  const pointerDownItemRef = React.useRef(null);
   const disabled = fieldDisabled || disabledProp;
   const name = fieldName ?? nameProp;
   const multiple = selectionMode === 'multiple';
@@ -395,11 +390,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.
@@ -425,9 +419,9 @@ function AriaCombobox(props) {
     state: 'open'
   });
   const isGrouped = isGroupedItems(items);
-  const query = closeQuery ?? (inputValue === '' ? '' : String(inputValue).trim());
+  const query = closeQuery ?? String(inputValue).trim();
   const selectedLabelString = single ? 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.useMemo(() => {
@@ -454,12 +448,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,
@@ -499,76 +499,85 @@ function AriaCombobox(props) {
     }
     return filteredItems;
   }, [filteredItems, isGrouped]);
-  const store = useRefWithInit(() => new 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: 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 || NOOP,
-    // Placeholder callbacks replaced on first render
-    setOpen: NOOP,
-    setInputValue: NOOP,
-    setSelectedValue: NOOP,
-    setIndices: NOOP,
-    onItemHighlighted: NOOP,
-    handleSelection: NOOP,
-    forceMount: NOOP,
-    requestSubmit: NOOP
-  })).current;
+  const store = 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 = findSelectionIndex(flatFilteredItems, selectedValue, isItemEqualToValue, multiple);
+    }
+    return new 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: 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: NOOP,
+      setOpen: NOOP,
+      setInputValue: NOOP,
+      setSelectedValue: NOOP,
+      setIndices: NOOP,
+      handleSelection: NOOP,
+      forceMount: NOOP,
+      requestSubmit: NOOP
+    });
+  }).current;
   const fieldRawValue = selectionMode === 'none' ? inputValue : selectedValue;
   const fieldStringValue = React.useMemo(() => {
     if (selectionMode === 'none') {
@@ -611,35 +620,38 @@ function AriaCombobox(props) {
       store.set('forceMounted', true);
     }
   });
-  const initialSelectedValueRef = React.useRef(selectedValue);
-  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 = 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, createGenericEventDetails(type, undefined, {
+      index
+    }));
+  });
   const setIndices = 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, createGenericEventDetails(type, undefined, {
-          index: -1
-        }));
-      }
+    const type = options.type || none;
+    if (activeIndexOption === null) {
+      emitHighlight(undefined, -1, type);
     } else {
-      const activeValue = valuesRef.current[options.activeIndex];
-      lastHighlightRef.current = {
-        value: activeValue,
-        index: options.activeIndex
-      };
-      onItemHighlighted(activeValue, createGenericEventDetails(type, undefined, {
-        index: options.activeIndex
-      }));
+      emitHighlight(valuesRef.current[activeIndexOption], activeIndexOption, type);
     }
   });
   const setInputValue = useStableCallback((next, eventDetails) => {
@@ -652,6 +664,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 === 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
@@ -667,10 +684,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 getOverflowAncestors(list.firstElementChild ?? list)) {
+            if (!isHTMLElement(ancestor) || (popup ? !contains(popup, ancestor) : ancestor.getAttribute('role') === 'dialog')) {
+              break;
+            }
+            if (isScrollableY(ancestor)) {
+              ancestor.scrollTop = 0;
+              break;
+            }
+          }
+        }
+        if (hasQuery && autoHighlightMode && store.state.activeIndex == null && (open || inline)) {
           store.set('activeIndex', 0);
         }
       }
+    } else if (eventDetails.reason === 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);
   });
@@ -682,7 +723,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 === escapeKey && hasItems && flatFilteredItems.length === 0 && !emptyRef.current) {
       eventDetails.allowPropagation();
     }
     props.onOpenChange?.(nextOpen, eventDetails);
@@ -692,10 +733,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 !== inputChange) {
         setInputValue('', createChangeEventDetails(inputClear, eventDetails.event));
       }
     }
@@ -749,18 +790,8 @@ function AriaCombobox(props) {
     if (shouldFillInput) {
       setInputValue(stringifyAsLabel(nextValue, itemToStringLabel), createChangeEventDetails(eventDetails.reason, eventDetails.event));
     }
-    if (single && nextValue != null && eventDetails.reason !== inputChange && queryChangedAfterOpen && !inline) {
-      setCloseQuery(query);
-    }
   });
-  const handleSelection = useStableCallback((event, passedValue) => {
-    let itemValue = passedValue;
-    if (itemValue === undefined) {
-      if (activeIndex === null) {
-        return;
-      }
-      itemValue = valuesRef.current[activeIndex];
-    }
+  const handleSelection = useStableCallback((event, itemValue) => {
     const targetEl = getTarget(event);
     const overrideEvent = selectionEventRef.current ?? event;
     selectionEventRef.current = null;
@@ -776,8 +807,8 @@ function AriaCombobox(props) {
     }
     if (multiple) {
       const currentSelectedValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const isCurrentlySelected = selectedValueIncludes(currentSelectedValue, itemValue, store.state.isItemEqualToValue);
-      const nextValue = isCurrentlySelected ? removeItem(currentSelectedValue, itemValue, store.state.isItemEqualToValue) : [...currentSelectedValue, itemValue];
+      const isCurrentlySelected = selectedValueIncludes(currentSelectedValue, itemValue, isItemEqualToValue);
+      const nextValue = isCurrentlySelected ? removeItem(currentSelectedValue, itemValue, isItemEqualToValue) : [...currentSelectedValue, itemValue];
       setSelectedValue(nextValue, eventDetails);
       if (eventDetails.isCanceled) {
         return;
@@ -800,9 +831,6 @@ function AriaCombobox(props) {
     }
   });
   const requestSubmit = useStableCallback(() => {
-    if (!store.state.submitOnItemClick) {
-      return;
-    }
     const formElement = validation.inputRef.current?.form ?? store.state.inputElement?.form;
     if (formElement && typeof formElement.requestSubmit === 'function') {
       formElement.requestSubmit();
@@ -875,25 +903,29 @@ function AriaCombobox(props) {
   React.useImperativeHandle(props.actionsRef, () => ({
     unmount: handleUnmount
   }), [handleUnmount]);
-  useIsoLayoutEffect(function syncSelectedIndex() {
-    if (open || selectionMode === 'none') {
+  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 = findItemIndex(registry, lastValue, isItemEqualToValue);
-      setIndices({
-        selectedIndex: lastIndex === -1 ? null : lastIndex
-      });
-    } else {
-      const index = 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: findSelectionIndex(registry, selectedValue, isItemEqualToValue, multiple)
+    });
+  }, [open, selectedValue, selectionMode, multiple, hasItems, flatItems, isItemEqualToValue, setIndices]);
   useIsoLayoutEffect(() => {
     if (items) {
       valuesRef.current = flatFilteredItems;
@@ -903,14 +935,52 @@ function AriaCombobox(props) {
   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 ? findSelectionIndex(registry, currentSelectedValue, store.state.isItemEqualToValue, isMultiple) : null);
+            } else if (autoHighlightMode === 'always') {
+              store.set('activeIndex', 0);
+            }
+          });
+        }
       }
-      pendingQueryHighlightRef.current = null;
     }
     if (!open && !inline) {
       return;
@@ -923,21 +993,11 @@ function AriaCombobox(props) {
         store.set('activeIndex', 0);
         return;
       }
-      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        store.state.onItemHighlighted(undefined, createGenericEventDetails(none, undefined, {
-          index: -1
-        }));
-      }
+      emitHighlight(undefined, -1, none);
       return;
     }
     if (storeActiveIndex >= candidateItems.length) {
-      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        store.state.onItemHighlighted(undefined, createGenericEventDetails(none, undefined, {
-          index: -1
-        }));
-      }
+      emitHighlight(undefined, -1, none);
       store.set('activeIndex', null);
       return;
     }
@@ -945,15 +1005,12 @@ function AriaCombobox(props) {
     const previouslyHighlightedItemValue = lastHighlightRef.current.value;
     const isSameItem = previouslyHighlightedItemValue !== NO_ACTIVE_VALUE && compareItemEquality(itemValue, previouslyHighlightedItemValue, store.state.isItemEqualToValue);
     if (lastHighlightRef.current.index !== storeActiveIndex || !isSameItem) {
-      lastHighlightRef.current = {
-        value: itemValue,
-        index: storeActiveIndex
-      };
-      store.state.onItemHighlighted(itemValue, createGenericEventDetails(none, undefined, {
-        index: storeActiveIndex
-      }));
+      emitHighlight(itemValue, storeActiveIndex, 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]);
   useIsoLayoutEffect(() => {
     if (selectionMode === 'none') {
       setFilled(String(inputValue) !== '');
@@ -984,6 +1041,12 @@ function AriaCombobox(props) {
     }
     setQueryChangedAfterOpen(true);
   });
+  function syncInputToSelectedLabel() {
+    const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
+    if (inputValue !== nextInputValue) {
+      setInputValue(nextInputValue, createChangeEventDetails(none));
+    }
+  }
   useValueChanged(selectedValue, () => {
     if (selectionMode === 'none') {
       return;
@@ -992,10 +1055,7 @@ function AriaCombobox(props) {
     setDirty(isSelectedValueDirty(selectedValue));
     validation.change(selectedValue);
     if (single && !hasInputValue && !inputInsidePopup) {
-      const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
-      if (inputValue !== nextInputValue) {
-        setInputValue(nextInputValue, createChangeEventDetails(none));
-      }
+      syncInputToSelectedLabel();
     }
   });
   useValueChanged(inputValue, () => {
@@ -1010,10 +1070,7 @@ function AriaCombobox(props) {
     if (!single || hasInputValue || inputInsidePopup || queryChangedAfterOpen) {
       return;
     }
-    const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
-    if (inputValue !== nextInputValue) {
-      setInputValue(nextInputValue, createChangeEventDetails(none));
-    }
+    syncInputToSelectedLabel();
   });
   const floatingRootContext = useFloatingRootContext({
     open: inline ? true : open,
@@ -1023,18 +1080,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.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',
@@ -1045,7 +1103,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 {
@@ -1054,7 +1112,7 @@ function AriaCombobox(props) {
         role: 'presentation'
       }
     };
-  }, [inputElement, open, ariaExpanded, ariaHasPopup, listElement?.id, autoComplete]);
+  }, [inputElement, expanded, ariaExpanded, ariaHasPopup, listElement?.id, autoComplete]);
   const click = useClick(floatingRootContext, {
     enabled: !readOnly && !disabled && openOnInputClick,
     event: 'mousedown-only',
@@ -1108,7 +1166,7 @@ function AriaCombobox(props) {
       } else {
         setIndices({
           activeIndex: nextActiveIndex,
-          type: keyboardActiveRef.current ? 'keyboard' : 'pointer'
+          type: keyboardActiveRef.current ? keyboard : pointer
         });
       }
     }
@@ -1123,7 +1181,8 @@ function AriaCombobox(props) {
       }
     }
   }, dismiss.reference, click.reference, role.reference), [listNavigation.reference, dismiss.reference, click.reference, role.reference, grid, store]);
-  const popupProps = React.useMemo(() => mergeProps(FOCUSABLE_POPUP_PROPS, listNavigation.floating, dismiss.floating, role.floating), [listNavigation.floating, dismiss.floating, role.floating]);
+  const popupProps = React.useMemo(() => mergeProps(FOCUSABLE_POPUP_PROPS, dismiss.floating), [dismiss.floating]);
+  const listProps = React.useMemo(() => mergeProps(listNavigation.floating, role.floating), [listNavigation.floating, role.floating]);
   const itemProps = React.useMemo(() => {
     const listNavigationItemProps = listNavigation.item;
     if (!listNavigationItemProps) {
@@ -1141,6 +1200,7 @@ function AriaCombobox(props) {
     store.update({
       inline: inlineProp,
       popupProps,
+      listProps,
       inputProps,
       triggerProps,
       itemProps,
@@ -1148,10 +1208,10 @@ function AriaCombobox(props) {
       setInputValue,
       setSelectedValue,
       setIndices,
-      onItemHighlighted,
       handleSelection,
       forceMount,
-      requestSubmit
+      requestSubmit,
+      onOpenChangeComplete
     });
   });
   useIsoLayoutEffect(() => {
@@ -1164,6 +1224,7 @@ function AriaCombobox(props) {
       items,
       inline: inlineProp,
       popupProps,
+      listProps,
       inputProps,
       triggerProps,
       openMethod,
@@ -1175,9 +1236,7 @@ function AriaCombobox(props) {
       readOnly,
       required,
       grid,
-      isGrouped,
       virtualized,
-      onOpenChangeComplete,
       openOnInputClick,
       itemToStringLabel,
       modal,
@@ -1185,10 +1244,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 = useMergedRefs(inputRefProp, validation.inputRef);
   const itemsContextValue = React.useMemo(() => ({
     query,
@@ -1232,7 +1290,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;
           }
@@ -1327,7 +1385,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 = useStore(store, selectors.mounted);
+  const popupSide = useStore(store, selectors.popupSide);
+  const positionerElement = 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.
@@ -1357,20 +1459,14 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
     labelId: fieldLabelId
   } = useLabelableContext();
   const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   const selectionMode = useStore(store, selectors.selectionMode);
   const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const required = useStore(store, selectors.required);
-  const mounted = useStore(store, selectors.mounted);
-  const popupSideValue = useStore(store, selectors.popupSide);
   const positionerElement = useStore(store, selectors.positionerElement);
   const listElement = useStore(store, selectors.listElement);
   const storedPopupId = useStore(store, selectors.popupId);
   const triggerProps = useStore(store, selectors.triggerProps);
-  const triggerElement = useStore(store, selectors.triggerElement);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
   const rootId = useStore(store, selectors.id);
   const comboboxLabelId = useStore(store, selectors.labelId);
@@ -1383,8 +1479,8 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
   const inputValue = useComboboxInputValueContext();
   const focusTimeout = useTimeout();
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
-  const listEmpty = filteredItems.length === 0;
-  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const listEmpty = useListEmpty();
+  const popupSide = usePopupSide(store);
   useLabelableId({
     id: inputInsidePopup ? idProp : undefined
   });
@@ -1402,18 +1498,6 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
   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.useEffect(() => {
-    if (!inputInsidePopup) {
-      return;
-    }
-    if (triggerElement && triggerElement !== domReference) {
-      floatingRootContext.set('domReferenceElement', triggerElement);
-    }
-  }, [triggerElement, domReference, floatingRootContext, inputInsidePopup]);
   const {
     reference: triggerTypeaheadProps
   } = useTypeahead(floatingRootContext, {
@@ -1424,7 +1508,7 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
     onMatch(index) {
       const nextSelectedValue = store.state.valuesRef.current[index];
       if (nextSelectedValue !== undefined) {
-        store.state.setSelectedValue(nextSelectedValue, createChangeEventDetails('none'));
+        store.state.setSelectedValue(nextSelectedValue, createChangeEventDetails(none));
       }
     }
   });
@@ -1459,7 +1543,7 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
       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,
@@ -1506,22 +1590,20 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
         }
         const doc = ownerDocument(event.currentTarget);
         function handleMouseUp(mouseEvent) {
-          if (!triggerElement) {
+          const currentTriggerElement = store.state.triggerElement;
+          if (!currentTriggerElement) {
             return;
           }
           const mouseUpTarget = getTarget(mouseEvent);
           const positioner = store.state.positionerElement;
           const list = store.state.listElement;
-          if (contains(triggerElement, mouseUpTarget) || contains(positioner, mouseUpTarget) || contains(list, mouseUpTarget) || mouseUpTarget === triggerElement) {
+          if (contains(currentTriggerElement, mouseUpTarget) || contains(positioner, mouseUpTarget) || contains(list, mouseUpTarget)) {
             return;
           }
-          const bounds = 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 (isMouseWithinBounds(mouseEvent, currentTriggerElement)) {
             return;
           }
-          store.state.setOpen(false, createChangeEventDetails('cancel-open', mouseEvent));
+          store.state.setOpen(false, createChangeEventDetails(cancelOpen, mouseEvent));
         }
         if (inputInsidePopup) {
           doc.addEventListener('mouseup', handleMouseUp, {
@@ -1530,7 +1612,7 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
         }
       },
       onKeyDown(event) {
-        if (disabled || readOnly) {
+        if (readOnly) {
           return;
         }
         if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
@@ -1539,7 +1621,7 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
           store.state.inputRef.current?.focus();
         }
       }
-    }, validation ? validation.getValidationProps(disabled, elementProps) : elementProps, getButtonProps],
+    }, validation.getValidationProps(disabled, elementProps), getButtonProps],
     stateAttributesMapping: triggerStateAttributesMapping
   });
   return element;
@@ -1614,9 +1696,6 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
   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();
@@ -1633,19 +1712,16 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
   const open = useStore(store, selectors.open);
   const mounted = useStore(store, selectors.mounted);
   const selectedValue = useStore(store, selectors.selectedValue);
-  const popupSideValue = useStore(store, selectors.popupSide);
-  const positionerElement = useStore(store, selectors.positionerElement);
   const rootId = useStore(store, selectors.id);
   const inline = useStore(store, selectors.inline);
   const modal = 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 = useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
-  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, undefined);
   const fieldStateForInput = hasPositionerParent ? DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
   const [composingValue, setComposingValue] = React.useState(null);
   const isComposingRef = React.useRef(false);
@@ -1663,7 +1739,17 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
       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 ? keyboard : pointer
+    });
+  }
+  function markPointerActive() {
+    store.state.keyboardActiveRef.current = false;
+  }
   const state = {
     ...fieldStateForInput,
     open,
@@ -1681,9 +1767,7 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
       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();
@@ -1702,14 +1786,8 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
       } 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;
     }
@@ -1718,13 +1796,6 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
     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;
   }
@@ -1732,11 +1803,10 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
     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,
@@ -1791,11 +1861,23 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
         store.state.setInputValue(next, createChangeEventDetails(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, createChangeEventDetails(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.
@@ -1807,38 +1889,23 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
           const nextVal = event.currentTarget.value;
           setComposingValue(nextVal);
           if (nextVal === '' && !store.state.openOnInputClick && !store.state.inputInsidePopup) {
-            store.state.setOpen(false, createChangeEventDetails(inputClear, event.nativeEvent));
+            store.state.setOpen(false, createChangeEventDetails(inputClear, nativeEvent));
           }
           const trimmed = nextVal.trim();
           const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
-          if (!readOnly && !disabled && trimmed) {
-            if (shouldOpenOnInput) {
-              store.state.setOpen(true, createChangeEventDetails(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 = createChangeEventDetails(inputChange, event.nativeEvent);
+        const inputChangeDetails = createChangeEventDetails(inputChange, nativeEvent);
         store.state.setInputValue(event.currentTarget.value, inputChangeDetails);
         if (inputChangeDetails.isCanceled) {
           return;
         }
         const empty = event.currentTarget.value === '';
-        const clearDetails = createChangeEventDetails(inputClear, event.nativeEvent);
+        const clearDetails = createChangeEventDetails(inputClear, nativeEvent);
         if (empty && !store.state.inputInsidePopup) {
           if (selectionMode === 'single') {
             store.state.setSelectedValue(null, clearDetails);
@@ -1847,30 +1914,13 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
             store.state.setOpen(false, clearDetails);
           }
         }
-        const trimmed = event.currentTarget.value.trim();
-        if (!readOnly && !disabled && trimmed) {
-          if (shouldOpenOnInput) {
-            store.state.setOpen(true, createChangeEventDetails(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) {
@@ -1916,11 +1966,7 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
           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, createChangeEventDetails(none, event.nativeEvent));
           return;
         }
@@ -1950,20 +1996,11 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
             return;
           }
           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
   });
@@ -2015,20 +2052,14 @@ const ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function ComboboxInputG
     state: fieldState
   } = useFieldRootContext();
   const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   const open = useStore(store, selectors.open);
-  const mounted = useStore(store, selectors.mounted);
-  const popupSideValue = useStore(store, selectors.popupSide);
-  const positionerElement = useStore(store, selectors.positionerElement);
   const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
   const selectionMode = 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,
@@ -2164,19 +2195,21 @@ const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClear(compo
         if (disabled || readOnly) {
           return;
         }
-        const keyboardActiveRef = store.state.keyboardActiveRef;
+        const type = store.state.keyboardActiveRef.current ? keyboard : pointer;
         store.state.setInputValue('', createChangeEventDetails(clearPress, event.nativeEvent));
         if (selectionMode !== 'none') {
           store.state.setSelectedValue(Array.isArray(selectedValue) ? [] : null, createChangeEventDetails(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();
@@ -2220,9 +2253,6 @@ function ComboboxCollection(props) {
   } = useComboboxDerivedItemsContext();
   const groupContext = useGroupCollectionContext();
   const itemsToRender = groupContext ? groupContext.items : filteredItems;
-  if (!itemsToRender) {
-    return null;
-  }
   return /*#__PURE__*/jsx(React.Fragment, {
     children: itemsToRender.map(children)
   });
@@ -2246,7 +2276,7 @@ const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(compone
   } = useComboboxDerivedItemsContext();
   const selectionMode = useStore(store, selectors.selectionMode);
   const grid = useStore(store, selectors.grid);
-  const popupProps = useStore(store, selectors.popupProps);
+  const listProps = useStore(store, selectors.listProps);
   const virtualized = useStore(store, selectors.virtualized);
   const forceMounted = useStore(store, selectors.forceMounted);
   const multiple = selectionMode === 'multiple';
@@ -2260,7 +2290,7 @@ const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(compone
 
   // 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.useMemo(() => {
     if (typeof children === 'function') {
@@ -2277,7 +2307,7 @@ const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(compone
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, setListElement, hasPositionerContext ? null : setPositionerElement],
-    props: [popupProps, {
+    props: [listProps, {
       children: resolvedChildren,
       tabIndex: -1,
       id: floatingId,
@@ -2294,13 +2324,7 @@ const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(compone
             return;
           }
           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() {
@@ -2359,7 +2383,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, () => {
@@ -2488,24 +2512,23 @@ const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositi
     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 = DROPDOWN_COLLISION_AVOIDANCE,
     style: styleProp,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   const floatingRootContext = useComboboxFloatingContext();
   const keepMounted = useComboboxPortalContext();
   const modal = useStore(store, selectors.modal);
@@ -2518,7 +2541,7 @@ const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositi
   const inputGroupElement = useStore(store, selectors.inputGroupElement);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
   const transitionStatus = useStore(store, selectors.transitionStatus);
-  const empty = filteredItems.length === 0;
+  const empty = useListEmpty();
   const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputGroupElement ?? inputElement);
   const positioning = useAnchorPositioning({
     anchor: resolvedAnchor,
@@ -2593,18 +2616,16 @@ const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopup(compo
   const store = useComboboxRootContext();
   const positioning = useComboboxPositionerContext();
   const floatingRootContext = useComboboxFloatingContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   const mounted = useStore(store, selectors.mounted);
   const open = useStore(store, selectors.open);
   const openMethod = useStore(store, selectors.openMethod);
+  const popupProps = useStore(store, selectors.popupProps);
   const transitionStatus = useStore(store, selectors.transitionStatus);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
   const inputElement = useStore(store, selectors.inputElement);
   const modal = useStore(store, selectors.modal);
   const rootId = useStore(store, selectors.id);
-  const empty = filteredItems.length === 0;
+  const empty = useListEmpty();
   const popupId = elementProps.id ?? (inputInsidePopup ? getComboboxPopupId(rootId) : undefined);
   useIsoLayoutEffect(() => {
     // Prefer the rendered DOM id, which a `render` prop element or function may override.
@@ -2633,10 +2654,9 @@ const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopup(compo
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.state.popupRef],
-    props: [{
+    props: [popupProps, {
       id: popupId,
       role: inputInsidePopup ? 'dialog' : 'presentation',
-      tabIndex: -1,
       onFocus(event) {
         const target = getTarget(event.nativeEvent);
         if (openMethod !== 'touch' && (contains(store.state.listElement, target) || target === event.currentTarget)) {
@@ -2783,7 +2803,7 @@ const ComboboxGroupLabel = /*#__PURE__*/React.forwardRef(function ComboboxGroupL
   useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
-      setLabelId(undefined);
+      setLabelId(currentId => currentId === id ? undefined : currentId);
     };
   }, [id, setLabelId]);
   const element = useRenderElement('div', componentProps, {
@@ -2825,27 +2845,27 @@ function ComboboxItemInner(props) {
     style,
     value: itemValue = null,
     index: indexProp,
-    disabled = false,
+    disabled: disabledProp = false,
     nativeButton = false,
     ...elementProps
   } = componentProps;
-  const didPointerDownRef = React.useRef(false);
   const textRef = React.useRef(null);
   const listItem = useCompositeListItem({
+    guess: true,
     index: indexProp,
-    textRef,
-    indexGuessBehavior: IndexGuessBehavior.GuessFromOrder
+    textRef
   });
   const store = useComboboxRootContext();
   const isRow = useComboboxRowContext();
   const hasItems = useComboboxHasItemsContext();
-  const open = useStore(store, selectors.open);
   const selectionMode = useStore(store, selectors.selectionMode);
+  const rootDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const isItemEqualToValue = 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 = useStore(store, selectors.id);
   const highlighted = useStore(store, selectors.isActive, index);
   const matchesSelectedValue = useStore(store, selectors.isSelected, itemValue);
@@ -2870,31 +2890,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]);
   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 (compareItemEquality(itemValue, lastSelectedValue, isItemEqualToValue)) {
       store.set('selectedIndex', index);
     }
-  }, [hasRegistered, hasItems, open, store, index, itemValue, isItemEqualToValue]);
+  }, [hasRegistered, hasItems, store, index, itemValue, isItemEqualToValue]);
   const {
     getButtonProps,
     buttonRef
@@ -2929,7 +2942,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) {
@@ -2944,8 +2962,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;
       }
@@ -3081,6 +3099,33 @@ const ComboboxEmpty = /*#__PURE__*/React.forwardRef(function ComboboxEmpty(compo
 });
 if (process.env.NODE_ENV !== "production") ComboboxEmpty.displayName = "ComboboxEmpty";
 
+/**
+ * A visual separator between items.
+ * Renders a `<div>` element.
+ *
+ * @internal
+ */
+const ListboxSeparator = /*#__PURE__*/React.forwardRef(function ListboxSeparator(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    orientation = 'horizontal',
+    style,
+    ...elementProps
+  } = componentProps;
+  const state = {
+    orientation
+  };
+  return useRenderElement('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      role: 'presentation'
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") ListboxSeparator.displayName = "ListboxSeparator";
+
 /**
  * Returns the internally filtered items.
  */
@@ -3147,7 +3192,8 @@ const ComboboxLabel = /*#__PURE__*/React.forwardRef(function ComboboxLabel(compo
     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('div', componentProps, {
@@ -3190,11 +3236,10 @@ function ComboboxValue(props) {
 }
 
 const ComboboxItemIndicator = /*#__PURE__*/React.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;
   }
@@ -3324,9 +3369,7 @@ const ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(compone
   } = 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) {
@@ -3342,13 +3385,12 @@ const ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(compone
         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);
       stopEvent(event);
       store.state.setIndices({
         activeIndex: null,
         selectedIndex: null,
-        type: 'keyboard'
+        type: keyboard
       });
       store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), createChangeEventDetails(none, event.nativeEvent));
     } else if (event.key === 'Enter' || event.key === ' ') {
@@ -3448,7 +3490,7 @@ const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function ComboboxChipRe
     if (removedIndex !== -1 && activeIndex === removedIndex) {
       store.state.setIndices({
         activeIndex: null,
-        type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
+        type: store.state.keyboardActiveRef.current ? keyboard : pointer
       });
     }
   }
@@ -3469,18 +3511,12 @@ const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function ComboboxChipRe
         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) {
@@ -3494,4 +3530,12 @@ const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function ComboboxChipRe
 });
 if (process.env.NODE_ENV !== "production") ComboboxChipRemove.displayName = "ComboboxChipRemove";
 
-export { useCoreFilter as A, AriaCombobox as B, ComboboxRoot as C, useComboboxInputValueContext as D, ComboboxLabel as a, ComboboxValue as b, ComboboxInput as c, ComboboxInputGroup as d, ComboboxTrigger as e, ComboboxList as f, ComboboxStatus as g, ComboboxPortal as h, ComboboxBackdrop as i, ComboboxPositioner as j, ComboboxPopup as k, ComboboxArrow as l, ComboboxIcon as m, ComboboxGroup as n, ComboboxGroupLabel as o, ComboboxItem as p, ComboboxItemIndicator as q, ComboboxChips as r, ComboboxChip as s, ComboboxChipRemove as t, ComboboxRow as u, ComboboxCollection as v, ComboboxEmpty as w, ComboboxClear as x, useComboboxFilter as y, useFilteredItems as z };
+/**
+ * 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;
+
+export { useFilteredItems as A, useCoreFilter as B, ComboboxRoot as C, AriaCombobox as D, useComboboxInputValueContext as E, ListboxSeparator as L, ComboboxLabel as a, ComboboxValue as b, ComboboxInput as c, ComboboxInputGroup as d, ComboboxTrigger as e, ComboboxList as f, ComboboxStatus as g, ComboboxPortal as h, ComboboxBackdrop as i, ComboboxPositioner as j, ComboboxPopup as k, ComboboxArrow as l, ComboboxIcon as m, ComboboxGroup as n, ComboboxGroupLabel as o, ComboboxItem as p, ComboboxItemIndicator as q, ComboboxChips as r, ComboboxChip as s, ComboboxChipRemove as t, ComboboxRow as u, ComboboxCollection as v, ComboboxEmpty as w, ComboboxClear as x, ComboboxSeparator as y, useComboboxFilter as z };