@jobber/components 8.23.0 → 8.23.1

package/dist/ComboboxChipRemove-es.js

@@ -1,22 +1,58 @@
 import * as React from 'react';
-import { E as useControlled, b as useStableCallback, n as useValueAsRef, k as useTransitionStatus, a as useIsoLayoutEffect, N as createGenericEventDetails, K as inputClear, J as inputChange, d as createChangeEventDetails, y as focusOut, U as outsidePress, g as getTarget, Z as itemPress, f as useOpenChangeComplete, Q as useValueChanged, G as none, ae as inputPress, r as contains, H as visuallyHiddenInput, I as visuallyHidden, h as useTimeout, c as useButton, o as ownerDocument, s as stopEvent, v as listNavigation, e as closePress, u as useBaseUiId, _ as isAndroid, af as isFirefox, a8 as escapeKey, ag as clearPress, t as transitionStatusMapping, S as SafeReact, j as error, ah as chipRemovePress } from './useButton-es.js';
-import { f as formatErrorMessage, c as EMPTY_ARRAY, a as useRefWithInit, N as NOOP, E as EMPTY_OBJECT, b as useMergedRefs, u as useRenderElement } from './useRenderElement-es.js';
-import { a as useFormContext, b as useFieldRootContext, c as useLabelableId, d as useField, f as fieldValidityMapping, u as useLabelableContext, e as DEFAULT_FIELD_STATE_ATTRIBUTES } from './useLabelableId-es.js';
-import { u as useFloatingRootContext, a as useListNavigation, b as useTypeahead, g as getPseudoElementBounds, C as CompositeList, c as useAnchorPositioning, d as getDisabledMountTransitionStyles, e as useCompositeListItem, I as IndexGuessBehavior } from './useCompositeListItem-es.js';
-import { h as hasNullItemLabel, c as compareItemEquality, i as stringifyAsLabel, j as isGroupedItems, s as stringifyAsValue, e as selectedValueIncludes, g as removeItem, f as findItemIndex, d as defaultItemEquality, r as resolveAriaLabelledBy, k as getDefaultLabelId, a as resolveMultipleLabels, b as resolveSelectedLabel } from './resolveAriaLabelledBy-es.js';
-import { o as createSelector, S as Store, r as useStore, q as useOpenInteractionType, s as useClick, t as useDismiss, v as useInteractions, w as useOnFirstRender, x as pressableTriggerOpenStateMapping, n as useDirection, G as triggerOpenStateMapping, y as FloatingPortal, p as popupStateMapping, z as useScrollLock, I as InternalBackdrop, A as inertValue, B as DROPDOWN_COLLISION_AVOIDANCE, F as FloatingFocusManager } from './InternalBackdrop-es.js';
+import { z as useControlled, b as useStableCallback, m as useValueAsRef, k as useTransitionStatus, a as useIsoLayoutEffect, J as createGenericEventDetails, G as inputClear, F as inputChange, d as createChangeEventDetails, v as focusOut, Q as outsidePress, g as getTarget, V as itemPress, f as useOpenChangeComplete, O as useValueChanged, C as none, a5 as inputPress, q as contains, D as visuallyHiddenInput, E as visuallyHidden, h as useTimeout, c as useButton, o as ownerDocument, s as stopEvent, r as listNavigation, e as closePress, u as useBaseUiId, W as android, a0 as escapeKey, a6 as clearPress, t as transitionStatusMapping, A as ios, S as SafeReact, j as error, a7 as chipRemovePress } from './useButton-es.js';
+import { f as formatErrorMessage, b as EMPTY_ARRAY, a as useRefWithInit, E as EMPTY_OBJECT, N as NOOP, m as mergeProps, c as useMergedRefs, u as useRenderElement } from './useRenderElement-es.js';
+import { a as useFormContext, b as useFieldRootContext, c as useLabelableId, d as useRegisterFieldControl, f as fieldValidityMapping, u as useLabelableContext, F as FieldRootContext, e as DEFAULT_FIELD_ROOT_CONTEXT, g as DEFAULT_FIELD_STATE_ATTRIBUTES } from './useLabelableId-es.js';
+import { u as useFloatingRootContext, a as useListNavigation, b as useTypeahead, g as getPseudoElementBounds, C as CompositeList, d as useAnchorPositioning, c as useAnchoredPopupScrollLock, e as usePositioner, f as getDisabledMountTransitionStyles, h as useCompositeListItem, I as IndexGuessBehavior } from './useCompositeListItem-es.js';
+import { h as hasNullItemLabel, c as compareItemEquality, a as stringifyAsLabel, k as isGroupedItems, s as stringifyAsValue, i as selectedValueIncludes, j as removeItem, f as findItemIndex, d as defaultItemEquality, b as areArraysEqual, r as resolveAriaLabelledBy, l as getDefaultLabelId, e as resolveMultipleLabels, g as resolveSelectedLabel } from './resolveAriaLabelledBy-es.js';
+import { ak as getGridNavigatedIndex, e as isIndexOutOfListBounds, t as createSelector, r as useDirection, S as Store, w as useStore, v as useOpenInteractionType, x as useClick, y as useDismiss, F as FOCUSABLE_POPUP_PROPS, z as useOnFirstRender, B as pressableTriggerOpenStateMapping, al as gecko, a0 as isInteractiveElement, W as triggerOpenStateMapping, E as FloatingPortal, p as popupStateMapping, I as InternalBackdrop, G as inertValue, H as DROPDOWN_COLLISION_AVOIDANCE, a as FloatingFocusManager } from './useScrollLock-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
-import { u as useLabel } from './useLabel-es.js';
+import { s as stringifyLocale, u as useLabel } from './useLabel-es.js';
+import { b as isElement } from './floating-ui.utils.dom-es.js';
+
+/**
+ * Positional arguments are deliberate: property names of an options object
+ * don't minify, and the signature is locked to the caller via `typeof` on the
+ * `grid` option of `useListNavigation`.
+ *
+ * The injected grid navigator only ever operates on a uniform 1x1 grid (sizes are
+ * always `1x1` and packing is never dense), so the cell-map machinery that supports
+ * multi-cell items collapses to an identity transform over the item list. Calling
+ * `getGridNavigatedIndex` directly keeps the cell-map helpers
+ * (`createGridCellMap`/`getGridCellIndexOfCorner`/`getGridCellIndices`) out of
+ * grid-combobox bundles.
+ */
+function gridNavigation(event, prevIndex, listRef, orientation, loopFocus, rtl, disabledIndices, minIndex, maxIndex, cols = 2) {
+  const nextIndex = getGridNavigatedIndex(listRef.current, {
+    event,
+    orientation,
+    loopFocus,
+    rtl,
+    cols,
+    disabledIndices,
+    minIndex,
+    maxIndex,
+    // An out-of-range previous index falls back to the first enabled item.
+    prevIndex: prevIndex > maxIndex ? minIndex : prevIndex,
+    stopEvent: true
+  });
+
+  // `getGridNavigatedIndex` can return an out-of-bounds sentinel (e.g. `-1` when there is no
+  // previous item to move from); surface that as `undefined` so the caller treats it as
+  // "no navigation" rather than highlighting index `-1`.
+  return isIndexOutOfListBounds(listRef.current, nextIndex) ? undefined : nextIndex;
+}
 
 const ComboboxRootContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ComboboxRootContext.displayName = "ComboboxRootContext";
 const ComboboxFloatingContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ComboboxFloatingContext.displayName = "ComboboxFloatingContext";
 const ComboboxDerivedItemsContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ComboboxDerivedItemsContext.displayName = "ComboboxDerivedItemsContext";
+const ComboboxHasItemsContext = /*#__PURE__*/React.createContext(false);
 // `inputValue` can't be placed in the store.
 // https://github.com/mui/base-ui/issues/2703
-if (process.env.NODE_ENV !== "production") ComboboxDerivedItemsContext.displayName = "ComboboxDerivedItemsContext";
+if (process.env.NODE_ENV !== "production") ComboboxHasItemsContext.displayName = "ComboboxHasItemsContext";
 const ComboboxInputValueContext = /*#__PURE__*/React.createContext('');
 if (process.env.NODE_ENV !== "production") ComboboxInputValueContext.displayName = "ComboboxInputValueContext";
 function useComboboxRootContext() {
@@ -43,11 +79,13 @@ function useComboboxDerivedItemsContext() {
 function useComboboxInputValueContext() {
   return React.useContext(ComboboxInputValueContext);
 }
+function useComboboxHasItemsContext() {
+  return React.useContext(ComboboxHasItemsContext);
+}
 
 const selectors = {
   id: createSelector(state => state.id),
   labelId: createSelector(state => state.labelId),
-  query: createSelector(state => state.query),
   items: createSelector(state => state.items),
   selectedValue: createSelector(state => state.selectedValue),
   hasSelectionChips: createSelector(state => {
@@ -89,35 +127,25 @@ const selectors = {
   popupProps: createSelector(state => state.popupProps),
   inputProps: createSelector(state => state.inputProps),
   triggerProps: createSelector(state => state.triggerProps),
-  getItemProps: createSelector(state => state.getItemProps),
+  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),
-  listRef: createSelector(state => state.listRef),
-  labelsRef: createSelector(state => state.labelsRef),
-  popupRef: createSelector(state => state.popupRef),
-  emptyRef: createSelector(state => state.emptyRef),
-  inputRef: createSelector(state => state.inputRef),
-  keyboardActiveRef: createSelector(state => state.keyboardActiveRef),
-  chipsContainerRef: createSelector(state => state.chipsContainerRef),
-  clearRef: createSelector(state => state.clearRef),
-  valuesRef: createSelector(state => state.valuesRef),
-  allValuesRef: createSelector(state => state.allValuesRef),
   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),
-  isGrouped: createSelector(state => state.isGrouped),
   virtualized: createSelector(state => state.virtualized),
-  onOpenChangeComplete: createSelector(state => state.onOpenChangeComplete),
-  openOnInputClick: createSelector(state => state.openOnInputClick),
   itemToStringLabel: createSelector(state => state.itemToStringLabel),
   isItemEqualToValue: createSelector(state => state.isItemEqualToValue),
   modal: createSelector(state => state.modal),
@@ -125,6 +153,15 @@ const selectors = {
   submitOnItemClick: createSelector(state => state.submitOnItemClick)
 };
 
+/**
+ * Derives the default id assigned to `Combobox.Popup` when the input is rendered inside it.
+ * Shared by the popup (which applies it) and the trigger (which references it via `aria-controls`)
+ * so the convention only lives in one place.
+ */
+function getComboboxPopupId(rootId) {
+  return rootId == null ? undefined : `${rootId}-popup`;
+}
+
 /**
  * Enhanced filter using Intl.Collator for more robust string matching.
  * Uses the provided `itemToStringLabel` function if available, otherwise falls back to:
@@ -165,15 +202,6 @@ function createSingleSelectionCollatorFilter(collatorFilter, itemToStringLabel,
 }
 
 const filterCache = new Map();
-function stringifyLocale(locale) {
-  if (Array.isArray(locale)) {
-    return locale.map(value => stringifyLocale(value)).join(',');
-  }
-  if (locale == null) {
-    return '';
-  }
-  return String(locale);
-}
 function getFilter(options = {}) {
   const mergedOptions = {
     usage: 'search',
@@ -262,9 +290,12 @@ function AriaCombobox(props) {
     onSelectedValueChange,
     defaultInputValue: defaultInputValueProp,
     inputValue: inputValueProp,
+    open: openProp,
+    defaultOpen = false,
     selectionMode = 'none',
     onItemHighlighted: onItemHighlightedProp,
     name: nameProp,
+    form,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -297,7 +328,6 @@ function AriaCombobox(props) {
   const {
     setDirty,
     validityData,
-    shouldValidateOnChange,
     setFilled,
     name: fieldName,
     disabled: fieldDisabled,
@@ -306,6 +336,7 @@ function AriaCombobox(props) {
     validationMode,
     validation
   } = useFieldRootContext();
+  const direction = useDirection();
   const id = useLabelableId({
     id: idProp
   });
@@ -390,8 +421,8 @@ function AriaCombobox(props) {
     state: 'inputValue'
   });
   const [open, setOpenUnwrapped] = useControlled({
-    controlled: props.open,
-    default: props.defaultOpen,
+    controlled: openProp,
+    default: defaultOpen,
     name: 'Combobox',
     state: 'open'
   });
@@ -493,6 +524,7 @@ function AriaCombobox(props) {
     allValuesRef,
     selectionEventRef,
     name,
+    form,
     disabled,
     readOnly,
     required,
@@ -515,14 +547,19 @@ function AriaCombobox(props) {
     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,
@@ -531,7 +568,6 @@ function AriaCombobox(props) {
     setIndices: NOOP,
     onItemHighlighted: NOOP,
     handleSelection: NOOP,
-    getItemProps: () => EMPTY_OBJECT,
     forceMount: NOOP,
     requestSubmit: NOOP
   })).current;
@@ -556,6 +592,7 @@ function AriaCombobox(props) {
   const inputGroupElement = useStore(store, selectors.inputGroupElement);
   const inline = useStore(store, selectors.inline);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
+  const inputOwnsFormValue = useStore(store, selectors.inputOwnsFormValue);
   const triggerRef = useValueAsRef(triggerElement);
   const {
     mounted,
@@ -566,14 +603,8 @@ function AriaCombobox(props) {
     openMethod,
     triggerProps
   } = useOpenInteractionType(open);
-  useField({
-    id,
-    name,
-    commit: validation.commit,
-    value: fieldRawValue,
-    controlRef: inputInsidePopup ? triggerRef : inputRef,
-    getValue: () => fieldStringValue
-  });
+  const getStringifiedValueForForm = useStableCallback(() => fieldStringValue);
+  useRegisterFieldControl(inputInsidePopup ? triggerRef : inputRef, id, fieldRawValue, getStringifiedValueForForm, !disabled, nameProp);
   const forceMount = useStableCallback(() => {
     if (items) {
       // Ensure typeahead works on a closed list.
@@ -660,6 +691,16 @@ function AriaCombobox(props) {
     if (eventDetails.isCanceled) {
       return;
     }
+
+    // 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) {
+      setQueryChangedAfterOpen(false);
+      setCloseQuery(null);
+      if (inputValue !== '') {
+        setInputValue('', createChangeEventDetails(inputClear, eventDetails.event));
+      }
+    }
     if (!nextOpen && queryChangedAfterOpen) {
       if (single) {
         if (!inline) {
@@ -670,17 +711,22 @@ function AriaCombobox(props) {
           setQueryChangedAfterOpen(false);
         }
       } else if (multiple) {
-        if (inline || inputInsidePopup) {
+        if (!inline) {
+          // Freeze the current query so filtering remains stable while exiting.
+          setCloseQuery(query);
+        }
+        if (inputInsidePopup) {
           setIndices({
             activeIndex: null
           });
-        } else {
-          // Freeze the current query so filtering remains stable while exiting.
-          setCloseQuery(query);
         }
+
         // Clear the input immediately on close while retaining filtering via closeQuery for exit animations
-        // if the input is outside the popup.
-        setInputValue('', createChangeEventDetails(inputClear, eventDetails.event));
+        // if the input is outside the popup. When the input is inside the popup, defer the clear until
+        // unmount so the filtered list doesn't flash to unfiltered during the exit animation.
+        if (!inputInsidePopup || inline) {
+          setInputValue('', createChangeEventDetails(inputClear, eventDetails.event));
+        }
       }
     }
     setOpenUnwrapped(nextOpen);
@@ -735,6 +781,9 @@ function AriaCombobox(props) {
       const isCurrentlySelected = selectedValueIncludes(currentSelectedValue, itemValue, store.state.isItemEqualToValue);
       const nextValue = isCurrentlySelected ? removeItem(currentSelectedValue, itemValue, store.state.isItemEqualToValue) : [...currentSelectedValue, itemValue];
       setSelectedValue(nextValue, eventDetails);
+      if (eventDetails.isCanceled) {
+        return;
+      }
       const wasFiltering = inputRef.current ? inputRef.current.value.trim() !== '' : false;
       if (!wasFiltering) {
         return;
@@ -746,6 +795,9 @@ function AriaCombobox(props) {
       }
     } else {
       setSelectedValue(itemValue, eventDetails);
+      if (eventDetails.isCanceled) {
+        return;
+      }
       setOpen(false, eventDetails);
     }
   });
@@ -753,9 +805,9 @@ function AriaCombobox(props) {
     if (!store.state.submitOnItemClick) {
       return;
     }
-    const form = store.state.inputElement?.form;
-    if (form && typeof form.requestSubmit === 'function') {
-      form.requestSubmit();
+    const formElement = validation.inputRef.current?.form ?? store.state.inputElement?.form;
+    if (formElement && typeof formElement.requestSubmit === 'function') {
+      formElement.requestSubmit();
     }
   });
   const handleUnmount = useStableCallback(() => {
@@ -921,6 +973,13 @@ function AriaCombobox(props) {
       });
     }
   }, [hasItems, autoHighlightMode, flatFilteredItems.length, setIndices]);
+  function isSelectedValueDirty(value) {
+    const initialValue = validityData.initialValue;
+    if (Array.isArray(value) && Array.isArray(initialValue)) {
+      return !areArraysEqual(value, initialValue, (itemValue, initialItemValue) => compareItemEquality(itemValue, initialItemValue, isItemEqualToValue));
+    }
+    return value !== initialValue;
+  }
   useValueChanged(query, () => {
     if (!open || query === '' || query === String(initialDefaultInputValue)) {
       return;
@@ -932,12 +991,8 @@ function AriaCombobox(props) {
       return;
     }
     clearErrors(name);
-    setDirty(selectedValue !== validityData.initialValue);
-    if (shouldValidateOnChange()) {
-      validation.commit(selectedValue);
-    } else {
-      validation.commit(selectedValue, true);
-    }
+    setDirty(isSelectedValueDirty(selectedValue));
+    validation.change(selectedValue);
     if (single && !hasInputValue && !inputInsidePopup) {
       const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
       if (inputValue !== nextInputValue) {
@@ -951,11 +1006,7 @@ function AriaCombobox(props) {
     }
     clearErrors(name);
     setDirty(inputValue !== validityData.initialValue);
-    if (shouldValidateOnChange()) {
-      validation.commit(inputValue);
-    } else {
-      validation.commit(inputValue, true);
-    }
+    validation.change(inputValue);
   });
   useValueChanged(items, () => {
     if (!single || hasInputValue || inputInsidePopup || queryChangedAfterOpen) {
@@ -1010,9 +1061,9 @@ function AriaCombobox(props) {
     enabled: !readOnly && !disabled && openOnInputClick,
     event: 'mousedown-only',
     toggle: false,
-    // Apply a small delay for touch to let iOS viewport centering settle.
+    // Apply a small delay for touch to let mobile viewport/keyboard positioning settle.
     // This avoids top-bottom flip flickers if the preferred position is "top" when first tapping.
-    touchOpenDelay: inputInsidePopup ? 0 : 50,
+    touchOpenDelay: inputInsidePopup ? 0 : 100,
     reason: inputPress
   });
   const dismiss = useDismiss(floatingRootContext, {
@@ -1043,13 +1094,10 @@ function AriaCombobox(props) {
     focusItemOnOpen: queryChangedAfterOpen || selectionMode === 'none' && !autoHighlightMode ? false : 'auto',
     focusItemOnHover: highlightItemOnHover,
     resetOnPointerLeave: !keepHighlight,
-    // `cols` > 1 enables grid navigation.
-    // Since <Combobox.Row> infers column sizes (and is required when building a grid),
-    // it works correctly even with a value of `2`.
-    // Floating UI tests don't require `role="row"` wrappers, so retains the number API.
-    cols: grid ? 2 : 1,
     orientation: grid ? 'horizontal' : undefined,
+    rtl: direction === 'rtl',
     disabledIndices: EMPTY_ARRAY,
+    grid: grid ? gridNavigation : undefined,
     onNavigate(nextActiveIndex, event) {
       // Retain the highlight only while actually transitioning out or closed.
       if (!event && !open || transitionStatus === 'ending') {
@@ -1067,18 +1115,37 @@ function AriaCombobox(props) {
       }
     }
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps
-  } = useInteractions([role, click, dismiss, listNavigation]);
+  const inputProps = React.useMemo(() => mergeProps(listNavigation.reference, {
+    onKeyDown(event) {
+      // In grid mode the navigation hook treats ArrowLeft/ArrowRight as horizontal
+      // grid movement. When the input has focus and no item is highlighted the user
+      // is still editing the query, so let the input keep its native caret behavior.
+      if (grid && store.state.activeIndex == null && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+        event.preventBaseUIHandler();
+      }
+    }
+  }, 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 itemProps = React.useMemo(() => {
+    const listNavigationItemProps = listNavigation.item;
+    if (!listNavigationItemProps) {
+      return EMPTY_OBJECT;
+    }
+
+    // Combobox keeps focus on the input; item focus would incorrectly sync
+    // list navigation state from DOM focus.
+    return {
+      ...listNavigationItemProps,
+      onFocus: undefined
+    };
+  }, [listNavigation.item]);
   useOnFirstRender(() => {
     store.update({
       inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
+      popupProps,
+      inputProps,
       triggerProps,
-      getItemProps,
+      itemProps,
       setOpen,
       setInputValue,
       setSelectedValue,
@@ -1098,13 +1165,14 @@ function AriaCombobox(props) {
       transitionStatus,
       items,
       inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
+      popupProps,
+      inputProps,
       triggerProps,
       openMethod,
-      getItemProps,
+      itemProps,
       selectionMode,
       name,
+      form,
       disabled,
       readOnly,
       required,
@@ -1119,9 +1187,10 @@ function AriaCombobox(props) {
       isItemEqualToValue,
       submitOnItemClick,
       hasInputValue,
-      requestSubmit
+      requestSubmit,
+      inputOwnsFormValue: selectionMode === 'none' && (inlineProp || !store.state.inputInsidePopup)
     });
-  }, [store, id, selectedValue, open, mounted, transitionStatus, items, getFloatingProps, getReferenceProps, getItemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode]);
+  }, [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]);
   const hiddenInputRef = useMergedRefs(inputRefProp, validation.inputRef);
   const itemsContextValue = React.useMemo(() => ({
     query,
@@ -1136,7 +1205,7 @@ function AriaCombobox(props) {
     return stringifyAsValue(fieldRawValue, itemToStringValue);
   }, [fieldRawValue, itemToStringValue]);
   const hasMultipleSelection = multiple && Array.isArray(selectedValue) && selectedValue.length > 0;
-  const hiddenInputName = multiple || selectionMode === 'none' ? undefined : name;
+  const hiddenInputName = multiple || selectionMode === 'none' && inputOwnsFormValue ? undefined : name;
   const hiddenInputs = React.useMemo(() => {
     if (!multiple || !Array.isArray(selectedValue) || !name) {
       return null;
@@ -1145,14 +1214,16 @@ function AriaCombobox(props) {
       const currentSerializedValue = stringifyAsValue(value, itemToStringValue);
       return /*#__PURE__*/jsx("input", {
         type: "hidden",
+        form: form,
         name: name,
-        value: currentSerializedValue
+        value: currentSerializedValue,
+        disabled: disabled
       }, currentSerializedValue);
     });
-  }, [multiple, selectedValue, name, itemToStringValue]);
+  }, [multiple, selectedValue, form, name, itemToStringValue, disabled]);
   const children = /*#__PURE__*/jsxs(React.Fragment, {
     children: [props.children, /*#__PURE__*/jsx("input", {
-      ...validation.getInputValidationProps({
+      ...validation.getValidationProps(disabled, {
         // Move focus when the hidden input is focused.
         onFocus() {
           if (inputInsidePopup) {
@@ -1164,48 +1235,58 @@ function AriaCombobox(props) {
         // Handle browser autofill.
         onChange(event) {
           // Workaround for https://github.com/facebook/react/issues/9023
-          if (event.nativeEvent.defaultPrevented) {
+          if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
             return;
           }
-          const nextValue = event.target.value;
+          const nextValue = event.currentTarget.value;
+          const nextValueLower = nextValue.toLowerCase();
           const details = createChangeEventDetails(none, event.nativeEvent);
+          const findSerializedMatchIndex = () => valuesRef.current.findIndex(candidate => stringifyAsValue(candidate, itemToStringValue).toLowerCase() === nextValueLower || stringifyAsLabel(candidate, itemToStringLabel).toLowerCase() === nextValueLower);
           function handleChange() {
             // Browser autofill only writes a single scalar value.
             if (multiple) {
               return;
             }
             if (selectionMode === 'none') {
-              setDirty(nextValue !== validityData.initialValue);
               setInputValue(nextValue, details);
-              if (shouldValidateOnChange()) {
-                validation.commit(nextValue);
-              }
               return;
             }
-            const matchingValue = valuesRef.current.find(v => {
-              const candidate = stringifyAsValue(v, itemToStringValue);
-              if (candidate.toLowerCase() === nextValue.toLowerCase()) {
-                return true;
-              }
-              return false;
-            });
+
+            // Preserve the original serialized matching, then fall back to rendered text,
+            // which browsers can autofill for primitive values like `value="US">United States`.
+            let matchingIndex = findSerializedMatchIndex();
+            if (matchingIndex === -1) {
+              matchingIndex = valuesRef.current.findIndex((_, index) => {
+                const renderedLabel = labelsRef.current[index];
+                return renderedLabel != null && renderedLabel.toLowerCase() === nextValueLower;
+              });
+            }
+            const matchingValue = matchingIndex === -1 ? undefined : valuesRef.current[matchingIndex];
             if (matchingValue != null) {
-              setDirty(matchingValue !== validityData.initialValue);
+              // `setSelectedValue` may be canceled by `onValueChange`; rely on
+              // `useValueChanged` to mark the field dirty and run validation only
+              // when the value actually changes.
               setSelectedValue?.(matchingValue, details);
-              if (shouldValidateOnChange()) {
-                validation.commit(matchingValue);
-              }
             }
           }
-          if (items) {
-            handleChange();
-          } else {
+
+          // Only single-selection autofill matches against the registered values/labels.
+          // `multiple` ignores autofill and `none` just writes the input value, so avoid the
+          // sticky `forceMounted` mount (which never resets) for those modes.
+          if (single) {
             forceMount();
-            queueMicrotask(handleChange);
+            if (items && findSerializedMatchIndex() === -1) {
+              // `forceMount` only refreshes the derived labels for the `items` prop. When
+              // serialized matching misses, also mount the list so rendered labels (which can
+              // differ from the serialized values) are registered for autofill matching.
+              store.set('forceMounted', true);
+            }
           }
+          queueMicrotask(handleChange);
         }
       }),
       id: id && hiddenInputName == null ? `${id}-hidden-input` : undefined,
+      form: form,
       name: hiddenInputName,
       autoComplete: formAutoComplete,
       disabled: disabled,
@@ -1215,18 +1296,22 @@ function AriaCombobox(props) {
       ref: hiddenInputRef,
       style: hiddenInputName ? visuallyHiddenInput : visuallyHidden,
       tabIndex: -1,
-      "aria-hidden": true
+      "aria-hidden": true,
+      suppressHydrationWarning: true
     }), hiddenInputs]
   });
   return /*#__PURE__*/jsx(ComboboxRootContext.Provider, {
     value: store,
     children: /*#__PURE__*/jsx(ComboboxFloatingContext.Provider, {
       value: floatingRootContext,
-      children: /*#__PURE__*/jsx(ComboboxDerivedItemsContext.Provider, {
-        value: itemsContextValue,
-        children: /*#__PURE__*/jsx(ComboboxInputValueContext.Provider, {
-          value: inputValue,
-          children: children
+      children: /*#__PURE__*/jsx(ComboboxHasItemsContext.Provider, {
+        value: hasItems,
+        children: /*#__PURE__*/jsx(ComboboxDerivedItemsContext.Provider, {
+          value: itemsContextValue,
+          children: /*#__PURE__*/jsx(ComboboxInputValueContext.Provider, {
+            value: inputValue,
+            children: children
+          })
         })
       })
     })
@@ -1249,6 +1334,8 @@ const BOUNDARY_OFFSET = 2;
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(componentProps, forwardedRef) {
   const {
@@ -1257,6 +1344,7 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
     nativeButton = true,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1282,6 +1370,7 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
   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);
@@ -1303,6 +1392,14 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
   });
   const id = inputInsidePopup ? idProp ?? rootId : idProp;
   const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, comboboxLabelId);
+  let ariaControls;
+  if (open && inputInsidePopup) {
+    // Fall back to the default id while the popup registers its own (custom ids are stored once the
+    // popup mounts), so `aria-controls` is set on the same commit `open` becomes `true`.
+    ariaControls = storedPopupId ?? getComboboxPopupId(rootId);
+  } else if (open) {
+    ariaControls = listElement?.id;
+  }
   const currentPointerTypeRef = React.useRef('');
   function trackPointerType(event) {
     currentPointerTypeRef.current = event.pointerType;
@@ -1352,7 +1449,7 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
     disabled,
     popupSide,
     listEmpty,
-    placeholder: !hasSelectedValue
+    placeholder: selectionMode === 'none' ? false : !hasSelectedValue
   };
   const setTriggerElement = useStableCallback(element => {
     store.set('triggerElement', element);
@@ -1366,7 +1463,7 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
       role: inputInsidePopup ? 'combobox' : undefined,
       'aria-expanded': open ? 'true' : 'false',
       'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
-      'aria-controls': open ? listElement?.id : undefined,
+      'aria-controls': ariaControls,
       'aria-required': inputInsidePopup ? required || undefined : undefined,
       'aria-labelledby': ariaLabelledBy,
       onPointerDown: trackPointerType,
@@ -1444,7 +1541,7 @@ const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(c
           store.state.inputRef.current?.focus();
         }
       }
-    }, validation ? validation.getValidationProps(elementProps) : elementProps, getButtonProps],
+    }, validation ? validation.getValidationProps(disabled, elementProps) : elementProps, getButtonProps],
     stateAttributesMapping: triggerStateAttributesMapping
   });
   return element;
@@ -1479,9 +1576,9 @@ const ComboboxInternalDismissButton = /*#__PURE__*/React.forwardRef(function Com
     native: false
   });
   const mergedRef = useMergedRefs(forwardedRef, buttonRef);
-  const handleDismiss = useStableCallback(event => {
+  function handleDismiss(event) {
     store.state.setOpen(false, createChangeEventDetails(closePress, event.nativeEvent, event.currentTarget));
-  });
+  }
   const dismissProps = getButtonProps({
     onClick: handleDismiss
   });
@@ -1501,6 +1598,7 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
     className,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1529,6 +1627,7 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
   const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const name = useStore(store, selectors.name);
+  const form = useStore(store, selectors.form);
   const selectionMode = useStore(store, selectors.selectionMode);
   const autoHighlightMode = useStore(store, selectors.autoHighlight);
   const inputProps = useStore(store, selectors.inputProps);
@@ -1554,6 +1653,7 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
   const isComposingRef = React.useRef(false);
   const lastActiveIndexRef = React.useRef(null);
   const shouldRestoreActiveIndexRef = React.useRef(false);
+  const inputOwnsFormValue = selectionMode === 'none' && !hasPositionerParent;
   const setInputElement = useStableCallback(element => {
     const nextIsInsidePopup = hasPositionerParent || store.state.inline;
     if (nextIsInsidePopup && !store.state.hasInputValue) {
@@ -1561,10 +1661,11 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
     }
     store.update({
       inputElement: element,
-      inputInsidePopup: nextIsInsidePopup
+      inputInsidePopup: nextIsInsidePopup,
+      inputOwnsFormValue
     });
   });
-  const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(elementProps);
+  const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(disabled, elementProps);
   const state = {
     ...fieldStateForInput,
     open,
@@ -1581,17 +1682,21 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
     const {
       highlightedChipIndex
     } = comboboxChipsContext;
+    const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
+    const isRtl = direction === 'rtl';
+    const previousChipKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
+    const nextChipKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
     if (highlightedChipIndex !== undefined) {
-      if (event.key === 'ArrowLeft') {
+      if (event.key === previousChipKey) {
         event.preventDefault();
         if (highlightedChipIndex > 0) {
           nextIndex = highlightedChipIndex - 1;
         } else {
           nextIndex = undefined;
         }
-      } else if (event.key === 'ArrowRight') {
+      } else if (event.key === nextChipKey) {
         event.preventDefault();
-        if (highlightedChipIndex < selectedValue.length - 1) {
+        if (highlightedChipIndex < renderedChipsCount - 1) {
           nextIndex = highlightedChipIndex + 1;
         } else {
           nextIndex = undefined;
@@ -1612,10 +1717,9 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
     }
 
     // Handle navigation when no chip is highlighted
-    if (event.key === 'ArrowLeft' && (event.currentTarget.selectionStart ?? 0) === 0 && selectedValue.length > 0) {
+    if (event.key === previousChipKey && (event.currentTarget.selectionStart ?? 0) === 0 && selectedValue.length > 0) {
       event.preventDefault();
-      const lastChipIndex = Math.max(selectedValue.length - 1, 0);
-      nextIndex = lastChipIndex;
+      nextIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : undefined;
     } else if (event.key === 'Backspace' && event.currentTarget.value === '' && selectedValue.length > 0) {
       store.state.setIndices({
         activeIndex: null,
@@ -1638,7 +1742,8 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
       disabled,
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
-      ...(selectionMode === 'none' && name && {
+      form,
+      ...(inputOwnsFormValue && name && {
         name
       }),
       id,
@@ -1675,7 +1780,7 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
         }
       },
       onCompositionStart(event) {
-        if (isAndroid) {
+        if (android) {
           return;
         }
         isComposingRef.current = true;
@@ -1729,7 +1834,11 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
           }
           return;
         }
-        store.state.setInputValue(event.currentTarget.value, createChangeEventDetails(inputChange, event.nativeEvent));
+        const inputChangeDetails = createChangeEventDetails(inputChange, event.nativeEvent);
+        store.state.setInputValue(event.currentTarget.value, inputChangeDetails);
+        if (inputChangeDetails.isCanceled) {
+          return;
+        }
         const empty = event.currentTarget.value === '';
         const clearDetails = createChangeEventDetails(inputClear, event.nativeEvent);
         if (empty && !store.state.inputInsidePopup) {
@@ -1779,14 +1888,14 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
         const isRTL = direction === 'rtl';
         if (event.key === 'Home') {
           stopEvent(event);
-          const cursor = isFirefox && isRTL ? input.value.length : 0;
+          const cursor = gecko && isRTL ? input.value.length : 0;
           input.setSelectionRange(cursor, cursor);
           input.scrollLeft = 0;
           return;
         }
         if (event.key === 'End') {
           stopEvent(event);
-          const cursor = isFirefox && isRTL ? 0 : input.value.length;
+          const cursor = gecko && isRTL ? 0 : input.value.length;
           input.setSelectionRange(cursor, cursor);
           input.scrollLeft = isRTL ? -scrollAmount : scrollAmount;
           return;
@@ -1805,7 +1914,9 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
 
         // Handle deletion when no chip is highlighted and the input is empty.
         if (comboboxChipsContext && event.key === 'Backspace' && input.value === '' && comboboxChipsContext.highlightedChipIndex === undefined && Array.isArray(selectedValue) && selectedValue.length > 0) {
-          const newValue = selectedValue.slice(0, -1);
+          const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
+          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,
@@ -1858,27 +1969,52 @@ const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(compo
     }, validationProps],
     stateAttributesMapping: triggerStateAttributesMapping
   });
+  const renderedInput = hasPositionerParent ? /*#__PURE__*/jsx(FieldRootContext.Provider, {
+    value: DEFAULT_FIELD_ROOT_CONTEXT,
+    children: element
+  }) : element;
   return /*#__PURE__*/jsxs(React.Fragment, {
     children: [open && focusManagerModal && /*#__PURE__*/jsx(ComboboxInternalDismissButton, {
       ref: store.state.startDismissRef
-    }), element]
+    }), renderedInput]
   });
 });
 if (process.env.NODE_ENV !== "production") ComboboxInput.displayName = "ComboboxInput";
 
+function handleInputPress(event, store, disabled, readOnly, shouldIgnoreTarget) {
+  if (event.baseUIHandlerPrevented || readOnly) {
+    return;
+  }
+  const target = getTarget(event.nativeEvent);
+  const targetElement = isElement(target) ? target : null;
+  if (targetElement !== event.currentTarget && (shouldIgnoreTarget?.(targetElement) || isInteractiveElement(targetElement))) {
+    return;
+  }
+  event.preventDefault();
+  if (disabled) {
+    return;
+  }
+  store.state.inputRef.current?.focus();
+  if (store.state.openOnInputClick) {
+    store.state.setOpen(true, createChangeEventDetails(inputPress, event.nativeEvent));
+  }
+}
+
 /**
  * A wrapper for the input and its associated controls.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function ComboboxInputGroup(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
-    state: fieldState,
-    disabled: fieldDisabled
+    state: fieldState
   } = useFieldRootContext();
   const store = useComboboxRootContext();
   const {
@@ -1893,7 +2029,7 @@ const ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function ComboboxInputG
   const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
   const selectionMode = useStore(store, selectors.selectionMode);
   const popupSide = mounted && positionerElement ? popupSideValue : null;
-  const disabled = fieldDisabled || comboboxDisabled;
+  const disabled = comboboxDisabled;
   const listEmpty = filteredItems.length === 0;
   const placeholder = selectionMode === 'none' ? false : !hasSelectedValue;
   const state = {
@@ -1911,7 +2047,12 @@ const ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function ComboboxInputG
   return useRenderElement('div', componentProps, {
     ref: [forwardedRef, setInputGroupElement],
     props: [{
-      role: 'group'
+      role: 'group',
+      onMouseDown(event) {
+        handleInputPress(event, store, disabled, readOnly, target => {
+          return contains(store.state.chipsContainerRef.current, target);
+        });
+      }
     }, elementProps],
     state,
     stateAttributesMapping: triggerStateAttributesMapping
@@ -1922,11 +2063,14 @@ if (process.env.NODE_ENV !== "production") ComboboxInputGroup.displayName = "Com
 /**
  * An icon that indicates that the trigger button opens the popup.
  * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxIcon = /*#__PURE__*/React.forwardRef(function ComboboxIcon(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const element = useRenderElement('span', componentProps, {
@@ -1948,6 +2092,8 @@ const stateAttributesMapping$2 = {
 /**
  * Clears the value when clicked.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClear(componentProps, forwardedRef) {
   const {
@@ -1956,6 +2102,7 @@ const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClear(compo
     disabled: disabledProp = false,
     nativeButton = true,
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1992,6 +2139,7 @@ const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClear(compo
   } = useTransitionStatus(visible);
   const state = {
     disabled,
+    visible,
     open,
     transitionStatus
   };
@@ -2087,6 +2235,7 @@ const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(compone
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -2094,17 +2243,14 @@ const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(compone
   const floatingRootContext = useComboboxFloatingContext();
   const hasPositionerContext = Boolean(useComboboxPositionerContext(true));
   const {
-    filteredItems
+    filteredItems,
+    hasItems
   } = useComboboxDerivedItemsContext();
-  const items = useStore(store, selectors.items);
-  const labelsRef = useStore(store, selectors.labelsRef);
-  const listRef = useStore(store, selectors.listRef);
   const selectionMode = useStore(store, selectors.selectionMode);
   const grid = useStore(store, selectors.grid);
   const popupProps = useStore(store, selectors.popupProps);
-  const disabled = useStore(store, selectors.disabled);
-  const readOnly = useStore(store, selectors.readOnly);
   const virtualized = useStore(store, selectors.virtualized);
+  const forceMounted = useStore(store, selectors.forceMounted);
   const multiple = selectionMode === 'multiple';
   const empty = filteredItems.length === 0;
   const setPositionerElement = useStableCallback(element => {
@@ -2140,7 +2286,7 @@ const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(compone
       role: grid ? 'grid' : 'listbox',
       'aria-multiselectable': multiple ? 'true' : undefined,
       onKeyDown(event) {
-        if (disabled || readOnly) {
+        if (store.state.disabled || store.state.readOnly) {
           return;
         }
         if (event.key === 'Enter') {
@@ -2170,28 +2316,93 @@ const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(compone
   if (virtualized) {
     return element;
   }
+
+  // With the `items` prop, typeahead labels are derived from the items so they survive the list
+  // unmounting (unmounting clears the registered labels). Rendered labels only need to be
+  // registered when the list is force-mounted to match browser autofill against rendered text.
+  const labelsRef = hasItems && !forceMounted ? undefined : store.state.labelsRef;
   return /*#__PURE__*/jsx(CompositeList, {
-    elementsRef: listRef,
-    labelsRef: items ? undefined : labelsRef,
+    elementsRef: store.state.listRef,
+    labelsRef: labelsRef,
     children: element
   });
 });
 if (process.env.NODE_ENV !== "production") ComboboxList.displayName = "ComboboxList";
 
+// Word Joiner is invisible and zero-width, so it forces a text mutation without shifting layout.
+const LIVE_REGION_MARKER = '\u2060';
+// Safari VoiceOver needed roughly 200ms to reliably notice the initial polite live-region change.
+const INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = 200;
+function findLastTextNode(root) {
+  const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let lastTextNode = null;
+  while (walker.nextNode()) {
+    const textNode = walker.currentNode;
+    if (textNode.nodeValue !== '') {
+      lastTextNode = textNode;
+    }
+  }
+  return lastTextNode;
+}
+function useInitialLiveRegionTextMutation() {
+  const timeout = useTimeout();
+  const rootRef = React.useRef(null);
+
+  // Only the initial mounted announcement needs the marker; later text updates announce naturally.
+  React.useEffect(() => {
+    if (ios) {
+      return undefined;
+    }
+    const root = rootRef.current;
+    if (root == null) {
+      return undefined;
+    }
+    const textNode = findLastTextNode(root);
+    if (textNode == null) {
+      return undefined;
+    }
+    const originalValue = textNode.nodeValue ?? '';
+    const markedValue = `${originalValue}${LIVE_REGION_MARKER}`;
+    textNode.nodeValue = markedValue;
+    timeout.start(INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY, () => {
+      if (textNode.nodeValue === markedValue) {
+        textNode.nodeValue = originalValue;
+      }
+    });
+    return () => {
+      timeout.clear();
+      if (textNode.nodeValue === markedValue) {
+        textNode.nodeValue = originalValue;
+      }
+    };
+  }, [rootRef, timeout]);
+  return rootRef;
+}
+
 /**
  * Displays a status message whose content changes are announced politely to screen readers.
  * Useful for conveying the status of an asynchronously loaded list.
+ * This component's root element must remain mounted in the DOM to announce
+ * changes consistently across screen readers. Avoid hiding or removing the
+ * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
+ * rendering. Prefer updating or conditionally rendering its children instead.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxStatus = /*#__PURE__*/React.forwardRef(function ComboboxStatus(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
+    children: childrenProp,
     ...elementProps
   } = componentProps;
+  const statusRef = useInitialLiveRegionTextMutation();
   return useRenderElement('div', componentProps, {
-    ref: forwardedRef,
+    ref: [forwardedRef, statusRef],
     props: [{
+      children: childrenProp,
       role: 'status',
       'aria-live': 'polite',
       'aria-atomic': true
@@ -2240,11 +2451,14 @@ const stateAttributesMapping$1 = {
 /**
  * An overlay displayed beneath the popup.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxBackdrop = /*#__PURE__*/React.forwardRef(function ComboboxBackdrop(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -2287,6 +2501,7 @@ const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositi
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = DROPDOWN_COLLISION_AVOIDANCE,
+    style: styleProp,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -2299,6 +2514,7 @@ const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositi
   const open = useStore(store, selectors.open);
   const mounted = useStore(store, selectors.mounted);
   const openMethod = useStore(store, selectors.openMethod);
+  const positionerElement = useStore(store, selectors.positionerElement);
   const triggerElement = useStore(store, selectors.triggerElement);
   const inputElement = useStore(store, selectors.inputElement);
   const inputGroupElement = useStore(store, selectors.inputGroupElement);
@@ -2324,20 +2540,7 @@ const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositi
     collisionAvoidance,
     lazyFlip: true
   });
-  useScrollLock(open && modal && openMethod !== 'touch', triggerElement);
-  const defaultProps = React.useMemo(() => {
-    const style = {
-      ...positioning.positionerStyles
-    };
-    if (!open) {
-      style.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style
-    };
-  }, [open, mounted, positioning.positionerStyles]);
+  useAnchoredPopupScrollLock(open && modal, openMethod === 'touch', positionerElement, triggerElement);
   const state = {
     open,
     side: positioning.side,
@@ -2348,26 +2551,19 @@ const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositi
   useIsoLayoutEffect(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
-  const contextValue = React.useMemo(() => ({
-    side: positioning.side,
-    align: positioning.align,
-    arrowRef: positioning.arrowRef,
-    arrowUncentered: positioning.arrowUncentered,
-    arrowStyles: positioning.arrowStyles,
-    anchorHidden: positioning.anchorHidden,
-    isPositioned: positioning.isPositioned
-  }), [positioning.side, positioning.align, positioning.arrowRef, positioning.arrowUncentered, positioning.arrowStyles, positioning.anchorHidden, positioning.isPositioned]);
   const setPositionerElement = useStableCallback(element => {
     store.set('positionerElement', element);
   });
-  const element = useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, setPositionerElement],
-    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: popupStateMapping
+  const element = usePositioner(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/jsxs(ComboboxPositionerContext.Provider, {
-    value: contextValue,
+    value: positioning,
     children: [mounted && modal && /*#__PURE__*/jsx(InternalBackdrop, {
       inert: inertValue(!open),
       cutout: inputGroupElement ?? inputElement ?? triggerElement
@@ -2384,11 +2580,14 @@ const stateAttributesMapping = {
 /**
  * A container for the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopup(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     initialFocus,
     finalFocus,
     ...elementProps
@@ -2406,7 +2605,16 @@ const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopup(compo
   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 popupId = elementProps.id ?? (inputInsidePopup ? getComboboxPopupId(rootId) : undefined);
+  useIsoLayoutEffect(() => {
+    // Prefer the rendered DOM id, which a `render` prop element or function may override.
+    store.set('popupId', store.state.popupRef.current?.id || popupId);
+    return () => {
+      store.set('popupId', undefined);
+    };
+  }, [store, popupId]);
   useOpenChangeComplete({
     open,
     ref: store.state.popupRef,
@@ -2428,6 +2636,7 @@ const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopup(compo
     state,
     ref: [forwardedRef, store.state.popupRef],
     props: [{
+      id: popupId,
       role: inputInsidePopup ? 'dialog' : 'presentation',
       tabIndex: -1,
       onFocus(event) {
@@ -2472,11 +2681,14 @@ if (process.env.NODE_ENV !== "production") ComboboxPopup.displayName = "Combobox
 /**
  * Displays an element positioned against the anchor.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxArrow = /*#__PURE__*/React.forwardRef(function ComboboxArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -2521,6 +2733,7 @@ const ComboboxGroup = /*#__PURE__*/React.forwardRef(function ComboboxGroup(compo
   const {
     render,
     className,
+    style,
     items,
     ...elementProps
   } = componentProps;
@@ -2554,11 +2767,14 @@ if (process.env.NODE_ENV !== "production") ComboboxGroup.displayName = "Combobox
 /**
  * An accessible label that is automatically associated with its parent group.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxGroupLabel = /*#__PURE__*/React.forwardRef(function ComboboxGroupLabel(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;
@@ -2598,10 +2814,17 @@ function useComboboxRowContext() {
   return React.useContext(ComboboxRowContext);
 }
 
-const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function ComboboxItem(componentProps, forwardedRef) {
+function ComboboxItemInner(props) {
+  const {
+    componentProps,
+    forwardedRef,
+    virtualized,
+    indexFromFilter
+  } = props;
   const {
     render,
     className,
+    style,
     value: itemValue = null,
     index: indexProp,
     disabled = false,
@@ -2617,22 +2840,18 @@ const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(funct
   });
   const store = useComboboxRootContext();
   const isRow = useComboboxRowContext();
-  const {
-    flatFilteredItems,
-    hasItems
-  } = useComboboxDerivedItemsContext();
+  const hasItems = useComboboxHasItemsContext();
   const open = useStore(store, selectors.open);
   const selectionMode = useStore(store, selectors.selectionMode);
   const readOnly = useStore(store, selectors.readOnly);
-  const virtualized = useStore(store, selectors.virtualized);
   const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
   const selectable = selectionMode !== 'none';
-  const index = indexProp ?? (virtualized ? findItemIndex(flatFilteredItems, itemValue, isItemEqualToValue) : listItem.index);
+  const index = indexProp ?? (virtualized ? indexFromFilter ?? -1 : listItem.index);
   const hasRegistered = listItem.index !== -1;
   const rootId = useStore(store, selectors.id);
   const highlighted = useStore(store, selectors.isActive, index);
   const matchesSelectedValue = useStore(store, selectors.isSelected, itemValue);
-  const getItemProps = useStore(store, selectors.getItemProps);
+  const itemProps = useStore(store, selectors.itemProps);
   const itemRef = React.useRef(null);
   const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
   const selected = matchesSelectedValue && selectable;
@@ -2678,17 +2897,6 @@ const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(funct
       store.set('selectedIndex', index);
     }
   }, [hasRegistered, hasItems, open, store, index, itemValue, isItemEqualToValue]);
-  const state = {
-    disabled,
-    selected,
-    highlighted
-  };
-  const rootProps = getItemProps({
-    active: highlighted,
-    selected
-  });
-  rootProps.id = undefined;
-  rootProps.onFocus = undefined;
   const {
     getButtonProps,
     buttonRef
@@ -2698,6 +2906,11 @@ const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(funct
     native: nativeButton,
     composite: true
   });
+  const state = {
+    disabled,
+    selected,
+    highlighted
+  };
   function commitSelection(nativeEvent) {
     function selectItem() {
       store.state.handleSelection(nativeEvent, itemValue);
@@ -2721,6 +2934,11 @@ const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(funct
       didPointerDownRef.current = true;
       event.preventDefault();
     },
+    onMouseDown(event) {
+      // iOS Safari can emit a synthetic mousedown for touch taps without a preceding
+      // pointerdown. Prevent default here too so tapping an item does not blur the input.
+      event.preventDefault();
+    },
     onClick(event) {
       if (disabled || readOnly) {
         return;
@@ -2739,7 +2957,7 @@ const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(funct
   const element = useRenderElement('div', componentProps, {
     ref: [buttonRef, forwardedRef, listItem.ref, itemRef],
     state,
-    props: [rootProps, defaultProps, elementProps, getButtonProps]
+    props: [itemProps, defaultProps, elementProps, getButtonProps]
   });
   const contextValue = React.useMemo(() => ({
     selected,
@@ -2749,6 +2967,61 @@ const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(funct
     value: contextValue,
     children: element
   });
+}
+
+/**
+ * Resolves the index from the filtered items for the virtualized fallback (no `index` prop).
+ * Isolated here so that this per-keystroke subscription to the derived-items context is only
+ * paid by virtualized items. Those re-render on every input change anyway — the parent
+ * virtualizer re-windows the list as the filtered set changes — so the extra subscription costs
+ * them nothing, while it keeps every non-virtualized item off that context.
+ */
+function ComboboxItemVirtualizedIndex(props) {
+  const {
+    componentProps,
+    forwardedRef
+  } = props;
+  const store = useComboboxRootContext();
+  const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
+  const {
+    flatFilteredItems
+  } = useComboboxDerivedItemsContext();
+  const indexFromFilter = findItemIndex(flatFilteredItems, componentProps.value ?? null, isItemEqualToValue);
+
+  // Only reached when `virtualized` is true (see the wrapper below).
+  return /*#__PURE__*/jsx(ComboboxItemInner, {
+    componentProps: componentProps,
+    forwardedRef: forwardedRef,
+    virtualized: true,
+    indexFromFilter: indexFromFilter
+  });
+}
+
+/**
+ * An individual item in the list.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ */
+const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function ComboboxItem(componentProps, forwardedRef) {
+  const store = useComboboxRootContext();
+  const virtualized = useStore(store, selectors.virtualized);
+
+  // `virtualized` (and whether an item provides an explicit `index`) must be stable for an
+  // item's lifetime: the two branches return different component types, so flipping it at
+  // runtime remounts the item and resets its refs and effects.
+  if (virtualized && componentProps.index == null) {
+    return /*#__PURE__*/jsx(ComboboxItemVirtualizedIndex, {
+      componentProps: componentProps,
+      forwardedRef: forwardedRef
+    });
+  }
+  return /*#__PURE__*/jsx(ComboboxItemInner, {
+    componentProps: componentProps,
+    forwardedRef: forwardedRef,
+    virtualized: virtualized,
+    indexFromFilter: undefined
+  });
 }));
 if (process.env.NODE_ENV !== "production") ComboboxItem.displayName = "ComboboxItem";
 
@@ -2756,6 +3029,7 @@ const ComboboxRow = /*#__PURE__*/React.forwardRef(function ComboboxRow(component
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const element = useRenderElement('div', componentProps, {
@@ -2775,12 +3049,19 @@ if (process.env.NODE_ENV !== "production") ComboboxRow.displayName = "ComboboxRo
  * Renders its children only when the list is empty.
  * Requires the `items` prop on the root component.
  * Announces changes politely to screen readers.
+ * This component's root element must remain mounted in the DOM to announce
+ * changes consistently across screen readers. Avoid hiding or removing the
+ * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
+ * rendering. Prefer updating or conditionally rendering its children instead.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxEmpty = /*#__PURE__*/React.forwardRef(function ComboboxEmpty(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     children: childrenProp,
     ...elementProps
   } = componentProps;
@@ -2788,9 +3069,10 @@ const ComboboxEmpty = /*#__PURE__*/React.forwardRef(function ComboboxEmpty(compo
     filteredItems
   } = useComboboxDerivedItemsContext();
   const store = useComboboxRootContext();
+  const emptyRef = useInitialLiveRegionTextMutation();
   const children = filteredItems.length === 0 ? childrenProp : null;
   return useRenderElement('div', componentProps, {
-    ref: [forwardedRef, store.state.emptyRef],
+    ref: [forwardedRef, store.state.emptyRef, emptyRef],
     props: [{
       children,
       role: 'status',
@@ -2838,6 +3120,7 @@ const ComboboxLabel = /*#__PURE__*/React.forwardRef(function ComboboxLabel(compo
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
@@ -2925,13 +3208,13 @@ const ComboboxItemIndicator = /*#__PURE__*/React.forwardRef(function ComboboxIte
   });
 });
 
-/** The core implementation of the indicator is split here to avoid paying the hooks
- * costs unless the element needs to be mounted. */
+// Split the core implementation to avoid paying the hook costs unless the element needs to mount.
 if (process.env.NODE_ENV !== "production") ComboboxItemIndicator.displayName = "ComboboxItemIndicator";
 const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentProps, forwardedRef) => {
   const {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;
@@ -2973,6 +3256,7 @@ const ComboboxChips = /*#__PURE__*/React.forwardRef(function ComboboxChips(compo
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -2989,7 +3273,11 @@ const ComboboxChips = /*#__PURE__*/React.forwardRef(function ComboboxChips(compo
     // arrow keys inside a container unless it has a toolbar role.
     props: [hasSelectionChips ? {
       role: 'toolbar'
-    } : EMPTY_OBJECT, elementProps]
+    } : EMPTY_OBJECT, {
+      onMouseDown(event) {
+        handleInputPress(event, store, store.state.disabled, store.state.readOnly);
+      }
+    }, elementProps]
   });
   const contextValue = React.useMemo(() => ({
     highlightedChipIndex,
@@ -3011,7 +3299,7 @@ if (process.env.NODE_ENV !== "production") ComboboxChipContext.displayName = "Co
 function useComboboxChipContext() {
   const context = React.useContext(ComboboxChipContext);
   if (!context) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'useComboboxChipContext must be used within a ComboboxChip' : formatErrorMessage(17));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ComboboxChipContext is missing. ComboboxChip parts must be placed within <Combobox.Chip>.' : formatErrorMessage(17));
   }
   return context;
 }
@@ -3020,6 +3308,7 @@ const ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(compone
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -3027,6 +3316,7 @@ const ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(compone
     setHighlightedChipIndex,
     chipsRef
   } = useComboboxChipsContext();
+  const direction = useDirection();
   const disabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const selectedValue = useStore(store, selectors.selectedValue);
@@ -3036,16 +3326,19 @@ const ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(compone
   } = useCompositeListItem();
   function handleKeyDown(event) {
     let nextIndex = index;
-    if (event.key === 'ArrowLeft') {
+    const isRtl = direction === 'rtl';
+    const previousChipKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
+    const nextChipKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+    if (event.key === previousChipKey) {
       event.preventDefault();
       if (index > 0) {
         nextIndex = index - 1;
       } else {
         nextIndex = undefined;
       }
-    } else if (event.key === 'ArrowRight') {
+    } else if (event.key === nextChipKey) {
       event.preventDefault();
-      if (index < selectedValue.length - 1) {
+      if (index < chipsRef.current.length - 1) {
         nextIndex = index + 1;
       } else {
         nextIndex = undefined;
@@ -3097,16 +3390,6 @@ const ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(compone
         } else {
           chipsRef.current[nextIndex]?.focus();
         }
-      },
-      onMouseDown(event) {
-        if (readOnly) {
-          return;
-        }
-        event.preventDefault();
-        if (disabled) {
-          return;
-        }
-        store.state.inputRef.current?.focus();
       }
     }, elementProps]
   });
@@ -3123,6 +3406,8 @@ if (process.env.NODE_ENV !== "production") ComboboxChip.displayName = "ComboboxC
 /**
  * A button to remove a chip.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function ComboboxChipRemove(componentProps, forwardedRef) {
   const {
@@ -3130,6 +3415,7 @@ const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function ComboboxChipRe
     className,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -3181,6 +3467,9 @@ const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function ComboboxChipRe
     state,
     props: [{
       tabIndex: -1,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
       onClick(event) {
         if (disabled || readOnly) {
           return;