@jobber/components 8.23.0 → 8.23.1

package/dist/ComboboxChipRemove-cjs.js

@@ -6,10 +6,11 @@ var useRenderElement = require('./useRenderElement-cjs.js');
 var useLabelableId = require('./useLabelableId-cjs.js');
 var useCompositeListItem = require('./useCompositeListItem-cjs.js');
 var resolveAriaLabelledBy = require('./resolveAriaLabelledBy-cjs.js');
-var InternalBackdrop = require('./InternalBackdrop-cjs.js');
+var useScrollLock = require('./useScrollLock-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var ReactDOM = require('react-dom');
 var useLabel = require('./useLabel-cjs.js');
+var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -31,14 +32,49 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 
+/**
+ * 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 = useScrollLock.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 useScrollLock.isIndexOutOfListBounds(listRef.current, nextIndex) ? undefined : nextIndex;
+}
+
 const ComboboxRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ComboboxRootContext.displayName = "ComboboxRootContext";
 const ComboboxFloatingContext = /*#__PURE__*/React__namespace.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ComboboxFloatingContext.displayName = "ComboboxFloatingContext";
 const ComboboxDerivedItemsContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ComboboxDerivedItemsContext.displayName = "ComboboxDerivedItemsContext";
+const ComboboxHasItemsContext = /*#__PURE__*/React__namespace.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__namespace.createContext('');
 if (process.env.NODE_ENV !== "production") ComboboxInputValueContext.displayName = "ComboboxInputValueContext";
 function useComboboxRootContext() {
@@ -65,18 +101,20 @@ function useComboboxDerivedItemsContext() {
 function useComboboxInputValueContext() {
   return React__namespace.useContext(ComboboxInputValueContext);
 }
+function useComboboxHasItemsContext() {
+  return React__namespace.useContext(ComboboxHasItemsContext);
+}
 
 const selectors = {
-  id: InternalBackdrop.createSelector(state => state.id),
-  labelId: InternalBackdrop.createSelector(state => state.labelId),
-  query: InternalBackdrop.createSelector(state => state.query),
-  items: InternalBackdrop.createSelector(state => state.items),
-  selectedValue: InternalBackdrop.createSelector(state => state.selectedValue),
-  hasSelectionChips: InternalBackdrop.createSelector(state => {
+  id: useScrollLock.createSelector(state => state.id),
+  labelId: useScrollLock.createSelector(state => state.labelId),
+  items: useScrollLock.createSelector(state => state.items),
+  selectedValue: useScrollLock.createSelector(state => state.selectedValue),
+  hasSelectionChips: useScrollLock.createSelector(state => {
     const selectedValue = state.selectedValue;
     return Array.isArray(selectedValue) && selectedValue.length > 0;
   }),
-  hasSelectedValue: InternalBackdrop.createSelector(state => {
+  hasSelectedValue: useScrollLock.createSelector(state => {
     const {
       selectedValue,
       selectionMode
@@ -89,17 +127,17 @@ const selectors = {
     }
     return true;
   }),
-  hasNullItemLabel: InternalBackdrop.createSelector((state, enabled) => {
+  hasNullItemLabel: useScrollLock.createSelector((state, enabled) => {
     return enabled ? resolveAriaLabelledBy.hasNullItemLabel(state.items) : false;
   }),
-  open: InternalBackdrop.createSelector(state => state.open),
-  mounted: InternalBackdrop.createSelector(state => state.mounted),
-  forceMounted: InternalBackdrop.createSelector(state => state.forceMounted),
-  inline: InternalBackdrop.createSelector(state => state.inline),
-  activeIndex: InternalBackdrop.createSelector(state => state.activeIndex),
-  selectedIndex: InternalBackdrop.createSelector(state => state.selectedIndex),
-  isActive: InternalBackdrop.createSelector((state, index) => state.activeIndex === index),
-  isSelected: InternalBackdrop.createSelector((state, itemValue) => {
+  open: useScrollLock.createSelector(state => state.open),
+  mounted: useScrollLock.createSelector(state => state.mounted),
+  forceMounted: useScrollLock.createSelector(state => state.forceMounted),
+  inline: useScrollLock.createSelector(state => state.inline),
+  activeIndex: useScrollLock.createSelector(state => state.activeIndex),
+  selectedIndex: useScrollLock.createSelector(state => state.selectedIndex),
+  isActive: useScrollLock.createSelector((state, index) => state.activeIndex === index),
+  isSelected: useScrollLock.createSelector((state, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const selectedValue = state.selectedValue;
     if (Array.isArray(selectedValue)) {
@@ -107,46 +145,45 @@ const selectors = {
     }
     return resolveAriaLabelledBy.compareItemEquality(itemValue, selectedValue, comparer);
   }),
-  transitionStatus: InternalBackdrop.createSelector(state => state.transitionStatus),
-  popupProps: InternalBackdrop.createSelector(state => state.popupProps),
-  inputProps: InternalBackdrop.createSelector(state => state.inputProps),
-  triggerProps: InternalBackdrop.createSelector(state => state.triggerProps),
-  getItemProps: InternalBackdrop.createSelector(state => state.getItemProps),
-  positionerElement: InternalBackdrop.createSelector(state => state.positionerElement),
-  listElement: InternalBackdrop.createSelector(state => state.listElement),
-  triggerElement: InternalBackdrop.createSelector(state => state.triggerElement),
-  inputElement: InternalBackdrop.createSelector(state => state.inputElement),
-  inputGroupElement: InternalBackdrop.createSelector(state => state.inputGroupElement),
-  popupSide: InternalBackdrop.createSelector(state => state.popupSide),
-  openMethod: InternalBackdrop.createSelector(state => state.openMethod),
-  inputInsidePopup: InternalBackdrop.createSelector(state => state.inputInsidePopup),
-  selectionMode: InternalBackdrop.createSelector(state => state.selectionMode),
-  listRef: InternalBackdrop.createSelector(state => state.listRef),
-  labelsRef: InternalBackdrop.createSelector(state => state.labelsRef),
-  popupRef: InternalBackdrop.createSelector(state => state.popupRef),
-  emptyRef: InternalBackdrop.createSelector(state => state.emptyRef),
-  inputRef: InternalBackdrop.createSelector(state => state.inputRef),
-  keyboardActiveRef: InternalBackdrop.createSelector(state => state.keyboardActiveRef),
-  chipsContainerRef: InternalBackdrop.createSelector(state => state.chipsContainerRef),
-  clearRef: InternalBackdrop.createSelector(state => state.clearRef),
-  valuesRef: InternalBackdrop.createSelector(state => state.valuesRef),
-  allValuesRef: InternalBackdrop.createSelector(state => state.allValuesRef),
-  name: InternalBackdrop.createSelector(state => state.name),
-  disabled: InternalBackdrop.createSelector(state => state.disabled),
-  readOnly: InternalBackdrop.createSelector(state => state.readOnly),
-  required: InternalBackdrop.createSelector(state => state.required),
-  grid: InternalBackdrop.createSelector(state => state.grid),
-  isGrouped: InternalBackdrop.createSelector(state => state.isGrouped),
-  virtualized: InternalBackdrop.createSelector(state => state.virtualized),
-  onOpenChangeComplete: InternalBackdrop.createSelector(state => state.onOpenChangeComplete),
-  openOnInputClick: InternalBackdrop.createSelector(state => state.openOnInputClick),
-  itemToStringLabel: InternalBackdrop.createSelector(state => state.itemToStringLabel),
-  isItemEqualToValue: InternalBackdrop.createSelector(state => state.isItemEqualToValue),
-  modal: InternalBackdrop.createSelector(state => state.modal),
-  autoHighlight: InternalBackdrop.createSelector(state => state.autoHighlight),
-  submitOnItemClick: InternalBackdrop.createSelector(state => state.submitOnItemClick)
+  transitionStatus: useScrollLock.createSelector(state => state.transitionStatus),
+  popupProps: useScrollLock.createSelector(state => state.popupProps),
+  inputProps: useScrollLock.createSelector(state => state.inputProps),
+  triggerProps: useScrollLock.createSelector(state => state.triggerProps),
+  itemProps: useScrollLock.createSelector(state => state.itemProps),
+  positionerElement: useScrollLock.createSelector(state => state.positionerElement),
+  listElement: useScrollLock.createSelector(state => state.listElement),
+  popupId: useScrollLock.createSelector(state => state.popupId),
+  triggerElement: useScrollLock.createSelector(state => state.triggerElement),
+  inputElement: useScrollLock.createSelector(state => state.inputElement),
+  inputGroupElement: useScrollLock.createSelector(state => state.inputGroupElement),
+  popupSide: useScrollLock.createSelector(state => state.popupSide),
+  openMethod: useScrollLock.createSelector(state => state.openMethod),
+  inputInsidePopup: useScrollLock.createSelector(state => state.inputInsidePopup),
+  inputOwnsFormValue: useScrollLock.createSelector(state => state.inputOwnsFormValue),
+  selectionMode: useScrollLock.createSelector(state => state.selectionMode),
+  name: useScrollLock.createSelector(state => state.name),
+  form: useScrollLock.createSelector(state => state.form),
+  disabled: useScrollLock.createSelector(state => state.disabled),
+  readOnly: useScrollLock.createSelector(state => state.readOnly),
+  required: useScrollLock.createSelector(state => state.required),
+  grid: useScrollLock.createSelector(state => state.grid),
+  virtualized: useScrollLock.createSelector(state => state.virtualized),
+  itemToStringLabel: useScrollLock.createSelector(state => state.itemToStringLabel),
+  isItemEqualToValue: useScrollLock.createSelector(state => state.isItemEqualToValue),
+  modal: useScrollLock.createSelector(state => state.modal),
+  autoHighlight: useScrollLock.createSelector(state => state.autoHighlight),
+  submitOnItemClick: useScrollLock.createSelector(state => state.submitOnItemClick)
 };
 
+/**
+ * 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:
@@ -187,15 +224,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',
@@ -203,7 +231,7 @@ function getFilter(options = {}) {
     ignorePunctuation: true,
     ...options
   };
-  const cacheKey = `${stringifyLocale(options.locale)}|${JSON.stringify(mergedOptions)}`;
+  const cacheKey = `${useLabel.stringifyLocale(options.locale)}|${JSON.stringify(mergedOptions)}`;
   const cachedFilter = filterCache.get(cacheKey);
   if (cachedFilter) {
     return cachedFilter;
@@ -284,9 +312,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,
@@ -319,7 +350,6 @@ function AriaCombobox(props) {
   const {
     setDirty,
     validityData,
-    shouldValidateOnChange,
     setFilled,
     name: fieldName,
     disabled: fieldDisabled,
@@ -328,6 +358,7 @@ function AriaCombobox(props) {
     validationMode,
     validation
   } = useLabelableId.useFieldRootContext();
+  const direction = useScrollLock.useDirection();
   const id = useLabelableId.useLabelableId({
     id: idProp
   });
@@ -412,8 +443,8 @@ function AriaCombobox(props) {
     state: 'inputValue'
   });
   const [open, setOpenUnwrapped] = useButton.useControlled({
-    controlled: props.open,
-    default: props.defaultOpen,
+    controlled: openProp,
+    default: defaultOpen,
     name: 'Combobox',
     state: 'open'
   });
@@ -492,7 +523,7 @@ function AriaCombobox(props) {
     }
     return filteredItems;
   }, [filteredItems, isGrouped]);
-  const store = useRenderElement.useRefWithInit(() => new InternalBackdrop.Store({
+  const store = useRenderElement.useRefWithInit(() => new useScrollLock.Store({
     id,
     labelId: undefined,
     selectedValue,
@@ -515,6 +546,7 @@ function AriaCombobox(props) {
     allValuesRef,
     selectionEventRef,
     name,
+    form,
     disabled,
     readOnly,
     required,
@@ -537,14 +569,19 @@ function AriaCombobox(props) {
     popupProps: {},
     inputProps: {},
     triggerProps: {},
+    itemProps: useRenderElement.EMPTY_OBJECT,
     positionerElement: null,
     listElement: null,
+    popupId: undefined,
     triggerElement: null,
     inputElement: null,
     inputGroupElement: null,
     popupSide: null,
     openMethod: null,
     inputInsidePopup: true,
+    // Avoid duplicate names in the server HTML. Popup inputs aren't rendered
+    // until after hydration, so the hidden input takes over then if needed.
+    inputOwnsFormValue: selectionMode === 'none',
     onOpenChangeComplete: onOpenChangeCompleteProp || useRenderElement.NOOP,
     // Placeholder callbacks replaced on first render
     setOpen: useRenderElement.NOOP,
@@ -553,7 +590,6 @@ function AriaCombobox(props) {
     setIndices: useRenderElement.NOOP,
     onItemHighlighted: useRenderElement.NOOP,
     handleSelection: useRenderElement.NOOP,
-    getItemProps: () => useRenderElement.EMPTY_OBJECT,
     forceMount: useRenderElement.NOOP,
     requestSubmit: useRenderElement.NOOP
   })).current;
@@ -569,15 +605,16 @@ function AriaCombobox(props) {
   }, [fieldRawValue, itemToStringValue, selectionMode, selectedValue]);
   const onItemHighlighted = useButton.useStableCallback(onItemHighlightedProp);
   const onOpenChangeComplete = useButton.useStableCallback(onOpenChangeCompleteProp);
-  const activeIndex = InternalBackdrop.useStore(store, selectors.activeIndex);
-  const selectedIndex = InternalBackdrop.useStore(store, selectors.selectedIndex);
-  const positionerElement = InternalBackdrop.useStore(store, selectors.positionerElement);
-  const listElement = InternalBackdrop.useStore(store, selectors.listElement);
-  const triggerElement = InternalBackdrop.useStore(store, selectors.triggerElement);
-  const inputElement = InternalBackdrop.useStore(store, selectors.inputElement);
-  const inputGroupElement = InternalBackdrop.useStore(store, selectors.inputGroupElement);
-  const inline = InternalBackdrop.useStore(store, selectors.inline);
-  const inputInsidePopup = InternalBackdrop.useStore(store, selectors.inputInsidePopup);
+  const activeIndex = useScrollLock.useStore(store, selectors.activeIndex);
+  const selectedIndex = useScrollLock.useStore(store, selectors.selectedIndex);
+  const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
+  const listElement = useScrollLock.useStore(store, selectors.listElement);
+  const triggerElement = useScrollLock.useStore(store, selectors.triggerElement);
+  const inputElement = useScrollLock.useStore(store, selectors.inputElement);
+  const inputGroupElement = useScrollLock.useStore(store, selectors.inputGroupElement);
+  const inline = useScrollLock.useStore(store, selectors.inline);
+  const inputInsidePopup = useScrollLock.useStore(store, selectors.inputInsidePopup);
+  const inputOwnsFormValue = useScrollLock.useStore(store, selectors.inputOwnsFormValue);
   const triggerRef = useButton.useValueAsRef(triggerElement);
   const {
     mounted,
@@ -587,15 +624,9 @@ function AriaCombobox(props) {
   const {
     openMethod,
     triggerProps
-  } = InternalBackdrop.useOpenInteractionType(open);
-  useLabelableId.useField({
-    id,
-    name,
-    commit: validation.commit,
-    value: fieldRawValue,
-    controlRef: inputInsidePopup ? triggerRef : inputRef,
-    getValue: () => fieldStringValue
-  });
+  } = useScrollLock.useOpenInteractionType(open);
+  const getStringifiedValueForForm = useButton.useStableCallback(() => fieldStringValue);
+  useLabelableId.useRegisterFieldControl(inputInsidePopup ? triggerRef : inputRef, id, fieldRawValue, getStringifiedValueForForm, !disabled, nameProp);
   const forceMount = useButton.useStableCallback(() => {
     if (items) {
       // Ensure typeahead works on a closed list.
@@ -682,6 +713,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('', useButton.createChangeEventDetails(useButton.inputClear, eventDetails.event));
+      }
+    }
     if (!nextOpen && queryChangedAfterOpen) {
       if (single) {
         if (!inline) {
@@ -692,17 +733,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('', useButton.createChangeEventDetails(useButton.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('', useButton.createChangeEventDetails(useButton.inputClear, eventDetails.event));
+        }
       }
     }
     setOpenUnwrapped(nextOpen);
@@ -757,6 +803,9 @@ function AriaCombobox(props) {
       const isCurrentlySelected = resolveAriaLabelledBy.selectedValueIncludes(currentSelectedValue, itemValue, store.state.isItemEqualToValue);
       const nextValue = isCurrentlySelected ? resolveAriaLabelledBy.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;
@@ -768,6 +817,9 @@ function AriaCombobox(props) {
       }
     } else {
       setSelectedValue(itemValue, eventDetails);
+      if (eventDetails.isCanceled) {
+        return;
+      }
       setOpen(false, eventDetails);
     }
   });
@@ -775,9 +827,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 = useButton.useStableCallback(() => {
@@ -943,6 +995,13 @@ function AriaCombobox(props) {
       });
     }
   }, [hasItems, autoHighlightMode, flatFilteredItems.length, setIndices]);
+  function isSelectedValueDirty(value) {
+    const initialValue = validityData.initialValue;
+    if (Array.isArray(value) && Array.isArray(initialValue)) {
+      return !resolveAriaLabelledBy.areArraysEqual(value, initialValue, (itemValue, initialItemValue) => resolveAriaLabelledBy.compareItemEquality(itemValue, initialItemValue, isItemEqualToValue));
+    }
+    return value !== initialValue;
+  }
   useButton.useValueChanged(query, () => {
     if (!open || query === '' || query === String(initialDefaultInputValue)) {
       return;
@@ -954,12 +1013,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 = resolveAriaLabelledBy.stringifyAsLabel(selectedValue, itemToStringLabel);
       if (inputValue !== nextInputValue) {
@@ -973,11 +1028,7 @@ function AriaCombobox(props) {
     }
     clearErrors(name);
     setDirty(inputValue !== validityData.initialValue);
-    if (shouldValidateOnChange()) {
-      validation.commit(inputValue);
-    } else {
-      validation.commit(inputValue, true);
-    }
+    validation.change(inputValue);
   });
   useButton.useValueChanged(items, () => {
     if (!single || hasInputValue || inputInsidePopup || queryChangedAfterOpen) {
@@ -1028,16 +1079,16 @@ function AriaCombobox(props) {
       }
     };
   }, [inputElement, open, ariaExpanded, ariaHasPopup, listElement?.id, autoComplete]);
-  const click = InternalBackdrop.useClick(floatingRootContext, {
+  const click = useScrollLock.useClick(floatingRootContext, {
     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: useButton.inputPress
   });
-  const dismiss = InternalBackdrop.useDismiss(floatingRootContext, {
+  const dismiss = useScrollLock.useDismiss(floatingRootContext, {
     enabled: !readOnly && !disabled && !inline,
     outsidePressEvent: {
       mouse: 'sloppy',
@@ -1065,13 +1116,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: useRenderElement.EMPTY_ARRAY,
+    grid: grid ? gridNavigation : undefined,
     onNavigate(nextActiveIndex, event) {
       // Retain the highlight only while actually transitioning out or closed.
       if (!event && !open || transitionStatus === 'ending') {
@@ -1089,18 +1137,37 @@ function AriaCombobox(props) {
       }
     }
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps
-  } = InternalBackdrop.useInteractions([role, click, dismiss, listNavigation]);
-  InternalBackdrop.useOnFirstRender(() => {
+  const inputProps = React__namespace.useMemo(() => useRenderElement.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__namespace.useMemo(() => useRenderElement.mergeProps(useScrollLock.FOCUSABLE_POPUP_PROPS, listNavigation.floating, dismiss.floating, role.floating), [listNavigation.floating, dismiss.floating, role.floating]);
+  const itemProps = React__namespace.useMemo(() => {
+    const listNavigationItemProps = listNavigation.item;
+    if (!listNavigationItemProps) {
+      return useRenderElement.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]);
+  useScrollLock.useOnFirstRender(() => {
     store.update({
       inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
+      popupProps,
+      inputProps,
       triggerProps,
-      getItemProps,
+      itemProps,
       setOpen,
       setInputValue,
       setSelectedValue,
@@ -1120,13 +1187,14 @@ function AriaCombobox(props) {
       transitionStatus,
       items,
       inline: inlineProp,
-      popupProps: getFloatingProps(),
-      inputProps: getReferenceProps(),
+      popupProps,
+      inputProps,
       triggerProps,
       openMethod,
-      getItemProps,
+      itemProps,
       selectionMode,
       name,
+      form,
       disabled,
       readOnly,
       required,
@@ -1141,9 +1209,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 = useRenderElement.useMergedRefs(inputRefProp, validation.inputRef);
   const itemsContextValue = React__namespace.useMemo(() => ({
     query,
@@ -1158,7 +1227,7 @@ function AriaCombobox(props) {
     return resolveAriaLabelledBy.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__namespace.useMemo(() => {
     if (!multiple || !Array.isArray(selectedValue) || !name) {
       return null;
@@ -1167,14 +1236,16 @@ function AriaCombobox(props) {
       const currentSerializedValue = resolveAriaLabelledBy.stringifyAsValue(value, itemToStringValue);
       return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(React__namespace.Fragment, {
     children: [props.children, /*#__PURE__*/jsxRuntime.jsx("input", {
-      ...validation.getInputValidationProps({
+      ...validation.getValidationProps(disabled, {
         // Move focus when the hidden input is focused.
         onFocus() {
           if (inputInsidePopup) {
@@ -1186,48 +1257,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 = useButton.createChangeEventDetails(useButton.none, event.nativeEvent);
+          const findSerializedMatchIndex = () => valuesRef.current.findIndex(candidate => resolveAriaLabelledBy.stringifyAsValue(candidate, itemToStringValue).toLowerCase() === nextValueLower || resolveAriaLabelledBy.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 = resolveAriaLabelledBy.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,
@@ -1237,18 +1318,22 @@ function AriaCombobox(props) {
       ref: hiddenInputRef,
       style: hiddenInputName ? useButton.visuallyHiddenInput : useButton.visuallyHidden,
       tabIndex: -1,
-      "aria-hidden": true
+      "aria-hidden": true,
+      suppressHydrationWarning: true
     }), hiddenInputs]
   });
   return /*#__PURE__*/jsxRuntime.jsx(ComboboxRootContext.Provider, {
     value: store,
     children: /*#__PURE__*/jsxRuntime.jsx(ComboboxFloatingContext.Provider, {
       value: floatingRootContext,
-      children: /*#__PURE__*/jsxRuntime.jsx(ComboboxDerivedItemsContext.Provider, {
-        value: itemsContextValue,
-        children: /*#__PURE__*/jsxRuntime.jsx(ComboboxInputValueContext.Provider, {
-          value: inputValue,
-          children: children
+      children: /*#__PURE__*/jsxRuntime.jsx(ComboboxHasItemsContext.Provider, {
+        value: hasItems,
+        children: /*#__PURE__*/jsxRuntime.jsx(ComboboxDerivedItemsContext.Provider, {
+          value: itemsContextValue,
+          children: /*#__PURE__*/jsxRuntime.jsx(ComboboxInputValueContext.Provider, {
+            value: inputValue,
+            children: children
+          })
         })
       })
     })
@@ -1256,7 +1341,7 @@ function AriaCombobox(props) {
 }
 
 const triggerStateAttributesMapping = {
-  ...InternalBackdrop.pressableTriggerOpenStateMapping,
+  ...useScrollLock.pressableTriggerOpenStateMapping,
   ...useLabelableId.fieldValidityMapping,
   popupSide: side => side ? {
     'data-popup-side': side
@@ -1271,6 +1356,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__namespace.forwardRef(function ComboboxTrigger(componentProps, forwardedRef) {
   const {
@@ -1279,6 +1366,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
     nativeButton = true,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1296,24 +1384,25 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
   const {
     filteredItems
   } = useComboboxDerivedItemsContext();
-  const selectionMode = InternalBackdrop.useStore(store, selectors.selectionMode);
-  const comboboxDisabled = InternalBackdrop.useStore(store, selectors.disabled);
-  const readOnly = InternalBackdrop.useStore(store, selectors.readOnly);
-  const required = InternalBackdrop.useStore(store, selectors.required);
-  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
-  const popupSideValue = InternalBackdrop.useStore(store, selectors.popupSide);
-  const positionerElement = InternalBackdrop.useStore(store, selectors.positionerElement);
-  const listElement = InternalBackdrop.useStore(store, selectors.listElement);
-  const triggerProps = InternalBackdrop.useStore(store, selectors.triggerProps);
-  const triggerElement = InternalBackdrop.useStore(store, selectors.triggerElement);
-  const inputInsidePopup = InternalBackdrop.useStore(store, selectors.inputInsidePopup);
-  const rootId = InternalBackdrop.useStore(store, selectors.id);
-  const comboboxLabelId = InternalBackdrop.useStore(store, selectors.labelId);
-  const open = InternalBackdrop.useStore(store, selectors.open);
-  const selectedValue = InternalBackdrop.useStore(store, selectors.selectedValue);
-  const activeIndex = InternalBackdrop.useStore(store, selectors.activeIndex);
-  const selectedIndex = InternalBackdrop.useStore(store, selectors.selectedIndex);
-  const hasSelectedValue = InternalBackdrop.useStore(store, selectors.hasSelectedValue);
+  const selectionMode = useScrollLock.useStore(store, selectors.selectionMode);
+  const comboboxDisabled = useScrollLock.useStore(store, selectors.disabled);
+  const readOnly = useScrollLock.useStore(store, selectors.readOnly);
+  const required = useScrollLock.useStore(store, selectors.required);
+  const mounted = useScrollLock.useStore(store, selectors.mounted);
+  const popupSideValue = useScrollLock.useStore(store, selectors.popupSide);
+  const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
+  const listElement = useScrollLock.useStore(store, selectors.listElement);
+  const storedPopupId = useScrollLock.useStore(store, selectors.popupId);
+  const triggerProps = useScrollLock.useStore(store, selectors.triggerProps);
+  const triggerElement = useScrollLock.useStore(store, selectors.triggerElement);
+  const inputInsidePopup = useScrollLock.useStore(store, selectors.inputInsidePopup);
+  const rootId = useScrollLock.useStore(store, selectors.id);
+  const comboboxLabelId = useScrollLock.useStore(store, selectors.labelId);
+  const open = useScrollLock.useStore(store, selectors.open);
+  const selectedValue = useScrollLock.useStore(store, selectors.selectedValue);
+  const activeIndex = useScrollLock.useStore(store, selectors.activeIndex);
+  const selectedIndex = useScrollLock.useStore(store, selectors.selectedIndex);
+  const hasSelectedValue = useScrollLock.useStore(store, selectors.hasSelectedValue);
   const floatingRootContext = useComboboxFloatingContext();
   const inputValue = useComboboxInputValueContext();
   const focusTimeout = useButton.useTimeout();
@@ -1325,6 +1414,14 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
   });
   const id = inputInsidePopup ? idProp ?? rootId : idProp;
   const ariaLabelledBy = resolveAriaLabelledBy.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__namespace.useRef('');
   function trackPointerType(event) {
     currentPointerTypeRef.current = event.pointerType;
@@ -1357,7 +1454,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
   });
   const {
     reference: triggerClickProps
-  } = InternalBackdrop.useClick(floatingRootContext, {
+  } = useScrollLock.useClick(floatingRootContext, {
     enabled: !readOnly && !comboboxDisabled,
     event: 'mousedown'
   });
@@ -1374,7 +1471,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
     disabled,
     popupSide,
     listEmpty,
-    placeholder: !hasSelectedValue
+    placeholder: selectionMode === 'none' ? false : !hasSelectedValue
   };
   const setTriggerElement = useButton.useStableCallback(element => {
     store.set('triggerElement', element);
@@ -1388,7 +1485,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
       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,
@@ -1466,7 +1563,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
           store.state.inputRef.current?.focus();
         }
       }
-    }, validation ? validation.getValidationProps(elementProps) : elementProps, getButtonProps],
+    }, validation ? validation.getValidationProps(disabled, elementProps) : elementProps, getButtonProps],
     stateAttributesMapping: triggerStateAttributesMapping
   });
   return element;
@@ -1501,9 +1598,9 @@ const ComboboxInternalDismissButton = /*#__PURE__*/React__namespace.forwardRef(f
     native: false
   });
   const mergedRef = useRenderElement.useMergedRefs(forwardedRef, buttonRef);
-  const handleDismiss = useButton.useStableCallback(event => {
+  function handleDismiss(event) {
     store.state.setOpen(false, useButton.createChangeEventDetails(useButton.closePress, event.nativeEvent, event.currentTarget));
-  });
+  }
   const dismissProps = getButtonProps({
     onClick: handleDismiss
   });
@@ -1523,6 +1620,7 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     className,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1546,23 +1644,24 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   // `inputValue` can't be placed in the store.
   // https://github.com/mui/base-ui/issues/2703
   const inputValue = useComboboxInputValueContext();
-  const direction = InternalBackdrop.useDirection();
-  const required = InternalBackdrop.useStore(store, selectors.required);
-  const comboboxDisabled = InternalBackdrop.useStore(store, selectors.disabled);
-  const readOnly = InternalBackdrop.useStore(store, selectors.readOnly);
-  const name = InternalBackdrop.useStore(store, selectors.name);
-  const selectionMode = InternalBackdrop.useStore(store, selectors.selectionMode);
-  const autoHighlightMode = InternalBackdrop.useStore(store, selectors.autoHighlight);
-  const inputProps = InternalBackdrop.useStore(store, selectors.inputProps);
-  const triggerProps = InternalBackdrop.useStore(store, selectors.triggerProps);
-  const open = InternalBackdrop.useStore(store, selectors.open);
-  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
-  const selectedValue = InternalBackdrop.useStore(store, selectors.selectedValue);
-  const popupSideValue = InternalBackdrop.useStore(store, selectors.popupSide);
-  const positionerElement = InternalBackdrop.useStore(store, selectors.positionerElement);
-  const rootId = InternalBackdrop.useStore(store, selectors.id);
-  const inline = InternalBackdrop.useStore(store, selectors.inline);
-  const modal = InternalBackdrop.useStore(store, selectors.modal);
+  const direction = useScrollLock.useDirection();
+  const required = useScrollLock.useStore(store, selectors.required);
+  const comboboxDisabled = useScrollLock.useStore(store, selectors.disabled);
+  const readOnly = useScrollLock.useStore(store, selectors.readOnly);
+  const name = useScrollLock.useStore(store, selectors.name);
+  const form = useScrollLock.useStore(store, selectors.form);
+  const selectionMode = useScrollLock.useStore(store, selectors.selectionMode);
+  const autoHighlightMode = useScrollLock.useStore(store, selectors.autoHighlight);
+  const inputProps = useScrollLock.useStore(store, selectors.inputProps);
+  const triggerProps = useScrollLock.useStore(store, selectors.triggerProps);
+  const open = useScrollLock.useStore(store, selectors.open);
+  const mounted = useScrollLock.useStore(store, selectors.mounted);
+  const selectedValue = useScrollLock.useStore(store, selectors.selectedValue);
+  const popupSideValue = useScrollLock.useStore(store, selectors.popupSide);
+  const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
+  const rootId = useScrollLock.useStore(store, selectors.id);
+  const inline = useScrollLock.useStore(store, selectors.inline);
+  const modal = useScrollLock.useStore(store, selectors.modal);
   const autoHighlightEnabled = Boolean(autoHighlightMode);
   const popupSide = mounted && positionerElement ? popupSideValue : null;
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
@@ -1576,6 +1675,7 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const isComposingRef = React__namespace.useRef(false);
   const lastActiveIndexRef = React__namespace.useRef(null);
   const shouldRestoreActiveIndexRef = React__namespace.useRef(false);
+  const inputOwnsFormValue = selectionMode === 'none' && !hasPositionerParent;
   const setInputElement = useButton.useStableCallback(element => {
     const nextIsInsidePopup = hasPositionerParent || store.state.inline;
     if (nextIsInsidePopup && !store.state.hasInputValue) {
@@ -1583,10 +1683,11 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     }
     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,
@@ -1603,17 +1704,21 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     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;
@@ -1634,10 +1739,9 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     }
 
     // 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,
@@ -1660,7 +1764,8 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
       disabled,
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
-      ...(selectionMode === 'none' && name && {
+      form,
+      ...(inputOwnsFormValue && name && {
         name
       }),
       id,
@@ -1697,7 +1802,7 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
         }
       },
       onCompositionStart(event) {
-        if (useButton.isAndroid) {
+        if (useButton.android) {
           return;
         }
         isComposingRef.current = true;
@@ -1751,7 +1856,11 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
           }
           return;
         }
-        store.state.setInputValue(event.currentTarget.value, useButton.createChangeEventDetails(useButton.inputChange, event.nativeEvent));
+        const inputChangeDetails = useButton.createChangeEventDetails(useButton.inputChange, event.nativeEvent);
+        store.state.setInputValue(event.currentTarget.value, inputChangeDetails);
+        if (inputChangeDetails.isCanceled) {
+          return;
+        }
         const empty = event.currentTarget.value === '';
         const clearDetails = useButton.createChangeEventDetails(useButton.inputClear, event.nativeEvent);
         if (empty && !store.state.inputInsidePopup) {
@@ -1801,14 +1910,14 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
         const isRTL = direction === 'rtl';
         if (event.key === 'Home') {
           useButton.stopEvent(event);
-          const cursor = useButton.isFirefox && isRTL ? input.value.length : 0;
+          const cursor = useScrollLock.gecko && isRTL ? input.value.length : 0;
           input.setSelectionRange(cursor, cursor);
           input.scrollLeft = 0;
           return;
         }
         if (event.key === 'End') {
           useButton.stopEvent(event);
-          const cursor = useButton.isFirefox && isRTL ? 0 : input.value.length;
+          const cursor = useScrollLock.gecko && isRTL ? 0 : input.value.length;
           input.setSelectionRange(cursor, cursor);
           input.scrollLeft = isRTL ? -scrollAmount : scrollAmount;
           return;
@@ -1827,7 +1936,9 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
 
         // 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,
@@ -1880,42 +1991,67 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     }, validationProps],
     stateAttributesMapping: triggerStateAttributesMapping
   });
+  const renderedInput = hasPositionerParent ? /*#__PURE__*/jsxRuntime.jsx(useLabelableId.FieldRootContext.Provider, {
+    value: useLabelableId.DEFAULT_FIELD_ROOT_CONTEXT,
+    children: element
+  }) : element;
   return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
     children: [open && focusManagerModal && /*#__PURE__*/jsxRuntime.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 = useButton.getTarget(event.nativeEvent);
+  const targetElement = floatingUi_utils_dom.isElement(target) ? target : null;
+  if (targetElement !== event.currentTarget && (shouldIgnoreTarget?.(targetElement) || useScrollLock.isInteractiveElement(targetElement))) {
+    return;
+  }
+  event.preventDefault();
+  if (disabled) {
+    return;
+  }
+  store.state.inputRef.current?.focus();
+  if (store.state.openOnInputClick) {
+    store.state.setOpen(true, useButton.createChangeEventDetails(useButton.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__namespace.forwardRef(function ComboboxInputGroup(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
-    state: fieldState,
-    disabled: fieldDisabled
+    state: fieldState
   } = useLabelableId.useFieldRootContext();
   const store = useComboboxRootContext();
   const {
     filteredItems
   } = useComboboxDerivedItemsContext();
-  const open = InternalBackdrop.useStore(store, selectors.open);
-  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
-  const popupSideValue = InternalBackdrop.useStore(store, selectors.popupSide);
-  const positionerElement = InternalBackdrop.useStore(store, selectors.positionerElement);
-  const comboboxDisabled = InternalBackdrop.useStore(store, selectors.disabled);
-  const readOnly = InternalBackdrop.useStore(store, selectors.readOnly);
-  const hasSelectedValue = InternalBackdrop.useStore(store, selectors.hasSelectedValue);
-  const selectionMode = InternalBackdrop.useStore(store, selectors.selectionMode);
+  const open = useScrollLock.useStore(store, selectors.open);
+  const mounted = useScrollLock.useStore(store, selectors.mounted);
+  const popupSideValue = useScrollLock.useStore(store, selectors.popupSide);
+  const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
+  const comboboxDisabled = useScrollLock.useStore(store, selectors.disabled);
+  const readOnly = useScrollLock.useStore(store, selectors.readOnly);
+  const hasSelectedValue = useScrollLock.useStore(store, selectors.hasSelectedValue);
+  const selectionMode = useScrollLock.useStore(store, selectors.selectionMode);
   const popupSide = mounted && positionerElement ? popupSideValue : null;
-  const disabled = fieldDisabled || comboboxDisabled;
+  const disabled = comboboxDisabled;
   const listEmpty = filteredItems.length === 0;
   const placeholder = selectionMode === 'none' ? false : !hasSelectedValue;
   const state = {
@@ -1933,7 +2069,12 @@ const ComboboxInputGroup = /*#__PURE__*/React__namespace.forwardRef(function Com
   return useRenderElement.useRenderElement('div', componentProps, {
     ref: [forwardedRef, setInputGroupElement],
     props: [{
-      role: 'group'
+      role: 'group',
+      onMouseDown(event) {
+        handleInputPress(event, store, disabled, readOnly, target => {
+          return useButton.contains(store.state.chipsContainerRef.current, target);
+        });
+      }
     }, elementProps],
     state,
     stateAttributesMapping: triggerStateAttributesMapping
@@ -1944,11 +2085,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__namespace.forwardRef(function ComboboxIcon(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const element = useRenderElement.useRenderElement('span', componentProps, {
@@ -1964,12 +2108,14 @@ if (process.env.NODE_ENV !== "production") ComboboxIcon.displayName = "ComboboxI
 
 const stateAttributesMapping$2 = {
   ...useButton.transitionStatusMapping,
-  ...InternalBackdrop.triggerOpenStateMapping
+  ...useScrollLock.triggerOpenStateMapping
 };
 
 /**
  * Clears the value when clicked.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function ComboboxClear(componentProps, forwardedRef) {
   const {
@@ -1978,18 +2124,19 @@ const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     disabled: disabledProp = false,
     nativeButton = true,
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
     disabled: fieldDisabled
   } = useLabelableId.useFieldRootContext();
   const store = useComboboxRootContext();
-  const selectionMode = InternalBackdrop.useStore(store, selectors.selectionMode);
-  const comboboxDisabled = InternalBackdrop.useStore(store, selectors.disabled);
-  const readOnly = InternalBackdrop.useStore(store, selectors.readOnly);
-  const open = InternalBackdrop.useStore(store, selectors.open);
-  const selectedValue = InternalBackdrop.useStore(store, selectors.selectedValue);
-  const hasSelectionChips = InternalBackdrop.useStore(store, selectors.hasSelectionChips);
+  const selectionMode = useScrollLock.useStore(store, selectors.selectionMode);
+  const comboboxDisabled = useScrollLock.useStore(store, selectors.disabled);
+  const readOnly = useScrollLock.useStore(store, selectors.readOnly);
+  const open = useScrollLock.useStore(store, selectors.open);
+  const selectedValue = useScrollLock.useStore(store, selectors.selectedValue);
+  const hasSelectionChips = useScrollLock.useStore(store, selectors.hasSelectionChips);
   const inputValue = useComboboxInputValueContext();
   let visible = false;
   if (selectionMode === 'none') {
@@ -2014,6 +2161,7 @@ const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   } = useButton.useTransitionStatus(visible);
   const state = {
     disabled,
+    visible,
     open,
     transitionStatus
   };
@@ -2109,6 +2257,7 @@ const ComboboxList = /*#__PURE__*/React__namespace.forwardRef(function ComboboxL
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -2116,17 +2265,14 @@ const ComboboxList = /*#__PURE__*/React__namespace.forwardRef(function ComboboxL
   const floatingRootContext = useComboboxFloatingContext();
   const hasPositionerContext = Boolean(useComboboxPositionerContext(true));
   const {
-    filteredItems
+    filteredItems,
+    hasItems
   } = useComboboxDerivedItemsContext();
-  const items = InternalBackdrop.useStore(store, selectors.items);
-  const labelsRef = InternalBackdrop.useStore(store, selectors.labelsRef);
-  const listRef = InternalBackdrop.useStore(store, selectors.listRef);
-  const selectionMode = InternalBackdrop.useStore(store, selectors.selectionMode);
-  const grid = InternalBackdrop.useStore(store, selectors.grid);
-  const popupProps = InternalBackdrop.useStore(store, selectors.popupProps);
-  const disabled = InternalBackdrop.useStore(store, selectors.disabled);
-  const readOnly = InternalBackdrop.useStore(store, selectors.readOnly);
-  const virtualized = InternalBackdrop.useStore(store, selectors.virtualized);
+  const selectionMode = useScrollLock.useStore(store, selectors.selectionMode);
+  const grid = useScrollLock.useStore(store, selectors.grid);
+  const popupProps = useScrollLock.useStore(store, selectors.popupProps);
+  const virtualized = useScrollLock.useStore(store, selectors.virtualized);
+  const forceMounted = useScrollLock.useStore(store, selectors.forceMounted);
   const multiple = selectionMode === 'multiple';
   const empty = filteredItems.length === 0;
   const setPositionerElement = useButton.useStableCallback(element => {
@@ -2162,7 +2308,7 @@ const ComboboxList = /*#__PURE__*/React__namespace.forwardRef(function ComboboxL
       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') {
@@ -2192,28 +2338,93 @@ const ComboboxList = /*#__PURE__*/React__namespace.forwardRef(function ComboboxL
   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__*/jsxRuntime.jsx(useCompositeListItem.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 = useButton.useTimeout();
+  const rootRef = React__namespace.useRef(null);
+
+  // Only the initial mounted announcement needs the marker; later text updates announce naturally.
+  React__namespace.useEffect(() => {
+    if (useButton.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__namespace.forwardRef(function ComboboxStatus(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
+    children: childrenProp,
     ...elementProps
   } = componentProps;
+  const statusRef = useInitialLiveRegionTextMutation();
   return useRenderElement.useRenderElement('div', componentProps, {
-    ref: forwardedRef,
+    ref: [forwardedRef, statusRef],
     props: [{
+      children: childrenProp,
       role: 'status',
       'aria-live': 'polite',
       'aria-atomic': true
@@ -2238,15 +2449,15 @@ const ComboboxPortal = /*#__PURE__*/React__namespace.forwardRef(function Combobo
     ...portalProps
   } = props;
   const store = useComboboxRootContext();
-  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
-  const forceMounted = InternalBackdrop.useStore(store, selectors.forceMounted);
+  const mounted = useScrollLock.useStore(store, selectors.mounted);
+  const forceMounted = useScrollLock.useStore(store, selectors.forceMounted);
   const shouldRender = mounted || keepMounted || forceMounted;
   if (!shouldRender) {
     return null;
   }
   return /*#__PURE__*/jsxRuntime.jsx(ComboboxPortalContext.Provider, {
     value: keepMounted,
-    children: /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingPortal, {
       ref: forwardedRef,
       ...portalProps
     })
@@ -2255,24 +2466,27 @@ const ComboboxPortal = /*#__PURE__*/React__namespace.forwardRef(function Combobo
 if (process.env.NODE_ENV !== "production") ComboboxPortal.displayName = "ComboboxPortal";
 
 const stateAttributesMapping$1 = {
-  ...InternalBackdrop.popupStateMapping,
+  ...useScrollLock.popupStateMapping,
   ...useButton.transitionStatusMapping
 };
 
 /**
  * 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__namespace.forwardRef(function ComboboxBackdrop(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
-  const open = InternalBackdrop.useStore(store, selectors.open);
-  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
-  const transitionStatus = InternalBackdrop.useStore(store, selectors.transitionStatus);
+  const open = useScrollLock.useStore(store, selectors.open);
+  const mounted = useScrollLock.useStore(store, selectors.mounted);
+  const transitionStatus = useScrollLock.useStore(store, selectors.transitionStatus);
   const state = {
     open,
     transitionStatus
@@ -2308,7 +2522,8 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
     arrowPadding = 5,
     sticky = false,
     disableAnchorTracking = false,
-    collisionAvoidance = InternalBackdrop.DROPDOWN_COLLISION_AVOIDANCE,
+    collisionAvoidance = useScrollLock.DROPDOWN_COLLISION_AVOIDANCE,
+    style: styleProp,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -2317,15 +2532,16 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
   } = useComboboxDerivedItemsContext();
   const floatingRootContext = useComboboxFloatingContext();
   const keepMounted = useComboboxPortalContext();
-  const modal = InternalBackdrop.useStore(store, selectors.modal);
-  const open = InternalBackdrop.useStore(store, selectors.open);
-  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
-  const openMethod = InternalBackdrop.useStore(store, selectors.openMethod);
-  const triggerElement = InternalBackdrop.useStore(store, selectors.triggerElement);
-  const inputElement = InternalBackdrop.useStore(store, selectors.inputElement);
-  const inputGroupElement = InternalBackdrop.useStore(store, selectors.inputGroupElement);
-  const inputInsidePopup = InternalBackdrop.useStore(store, selectors.inputInsidePopup);
-  const transitionStatus = InternalBackdrop.useStore(store, selectors.transitionStatus);
+  const modal = useScrollLock.useStore(store, selectors.modal);
+  const open = useScrollLock.useStore(store, selectors.open);
+  const mounted = useScrollLock.useStore(store, selectors.mounted);
+  const openMethod = useScrollLock.useStore(store, selectors.openMethod);
+  const positionerElement = useScrollLock.useStore(store, selectors.positionerElement);
+  const triggerElement = useScrollLock.useStore(store, selectors.triggerElement);
+  const inputElement = useScrollLock.useStore(store, selectors.inputElement);
+  const inputGroupElement = useScrollLock.useStore(store, selectors.inputGroupElement);
+  const inputInsidePopup = useScrollLock.useStore(store, selectors.inputInsidePopup);
+  const transitionStatus = useScrollLock.useStore(store, selectors.transitionStatus);
   const empty = filteredItems.length === 0;
   const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputGroupElement ?? inputElement);
   const positioning = useCompositeListItem.useAnchorPositioning({
@@ -2346,20 +2562,7 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
     collisionAvoidance,
     lazyFlip: true
   });
-  InternalBackdrop.useScrollLock(open && modal && openMethod !== 'touch', triggerElement);
-  const defaultProps = React__namespace.useMemo(() => {
-    const style = {
-      ...positioning.positionerStyles
-    };
-    if (!open) {
-      style.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style
-    };
-  }, [open, mounted, positioning.positionerStyles]);
+  useCompositeListItem.useAnchoredPopupScrollLock(open && modal, openMethod === 'touch', positionerElement, triggerElement);
   const state = {
     open,
     side: positioning.side,
@@ -2370,28 +2573,21 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
   useButton.useIsoLayoutEffect(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
-  const contextValue = React__namespace.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 = useButton.useStableCallback(element => {
     store.set('positionerElement', element);
   });
-  const element = useRenderElement.useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, setPositionerElement],
-    props: [defaultProps, useCompositeListItem.getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: InternalBackdrop.popupStateMapping
+  const element = useCompositeListItem.usePositioner(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/jsxRuntime.jsxs(ComboboxPositionerContext.Provider, {
-    value: contextValue,
-    children: [mounted && modal && /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.InternalBackdrop, {
-      inert: InternalBackdrop.inertValue(!open),
+    value: positioning,
+    children: [mounted && modal && /*#__PURE__*/jsxRuntime.jsx(useScrollLock.InternalBackdrop, {
+      inert: useScrollLock.inertValue(!open),
       cutout: inputGroupElement ?? inputElement ?? triggerElement
     }), element]
   });
@@ -2399,18 +2595,21 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
 if (process.env.NODE_ENV !== "production") ComboboxPositioner.displayName = "ComboboxPositioner";
 
 const stateAttributesMapping = {
-  ...InternalBackdrop.popupStateMapping,
+  ...useScrollLock.popupStateMapping,
   ...useButton.transitionStatusMapping
 };
 
 /**
  * A container for the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function ComboboxPopup(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     initialFocus,
     finalFocus,
     ...elementProps
@@ -2421,14 +2620,23 @@ const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const {
     filteredItems
   } = useComboboxDerivedItemsContext();
-  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
-  const open = InternalBackdrop.useStore(store, selectors.open);
-  const openMethod = InternalBackdrop.useStore(store, selectors.openMethod);
-  const transitionStatus = InternalBackdrop.useStore(store, selectors.transitionStatus);
-  const inputInsidePopup = InternalBackdrop.useStore(store, selectors.inputInsidePopup);
-  const inputElement = InternalBackdrop.useStore(store, selectors.inputElement);
-  const modal = InternalBackdrop.useStore(store, selectors.modal);
+  const mounted = useScrollLock.useStore(store, selectors.mounted);
+  const open = useScrollLock.useStore(store, selectors.open);
+  const openMethod = useScrollLock.useStore(store, selectors.openMethod);
+  const transitionStatus = useScrollLock.useStore(store, selectors.transitionStatus);
+  const inputInsidePopup = useScrollLock.useStore(store, selectors.inputInsidePopup);
+  const inputElement = useScrollLock.useStore(store, selectors.inputElement);
+  const modal = useScrollLock.useStore(store, selectors.modal);
+  const rootId = useScrollLock.useStore(store, selectors.id);
   const empty = filteredItems.length === 0;
+  const popupId = elementProps.id ?? (inputInsidePopup ? getComboboxPopupId(rootId) : undefined);
+  useButton.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]);
   useButton.useOpenChangeComplete({
     open,
     ref: store.state.popupRef,
@@ -2450,6 +2658,7 @@ const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     state,
     ref: [forwardedRef, store.state.popupRef],
     props: [{
+      id: popupId,
       role: inputInsidePopup ? 'dialog' : 'presentation',
       tabIndex: -1,
       onFocus(event) {
@@ -2474,7 +2683,7 @@ const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     resolvedFinalFocus = inputInsidePopup ? undefined : false;
   }
   const focusManagerModal = !inputInsidePopup || modal;
-  return /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingFocusManager, {
+  return /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingFocusManager, {
     context: floatingRootContext,
     disabled: !mounted,
     modal: focusManagerModal,
@@ -2494,11 +2703,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__namespace.forwardRef(function ComboboxArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -2509,7 +2721,7 @@ const ComboboxArrow = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     arrowUncentered,
     arrowStyles
   } = useComboboxPositionerContext();
-  const open = InternalBackdrop.useStore(store, selectors.open);
+  const open = useScrollLock.useStore(store, selectors.open);
   const state = {
     open,
     side,
@@ -2518,7 +2730,7 @@ const ComboboxArrow = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   };
   return useRenderElement.useRenderElement('div', componentProps, {
     ref: [arrowRef, forwardedRef],
-    stateAttributesMapping: InternalBackdrop.popupStateMapping,
+    stateAttributesMapping: useScrollLock.popupStateMapping,
     state,
     props: {
       style: arrowStyles,
@@ -2543,6 +2755,7 @@ const ComboboxGroup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const {
     render,
     className,
+    style,
     items,
     ...elementProps
   } = componentProps;
@@ -2576,11 +2789,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__namespace.forwardRef(function ComboboxGroupLabel(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;
@@ -2620,10 +2836,17 @@ function useComboboxRowContext() {
   return React__namespace.useContext(ComboboxRowContext);
 }
 
-const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.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,
@@ -2639,22 +2862,18 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
   });
   const store = useComboboxRootContext();
   const isRow = useComboboxRowContext();
-  const {
-    flatFilteredItems,
-    hasItems
-  } = useComboboxDerivedItemsContext();
-  const open = InternalBackdrop.useStore(store, selectors.open);
-  const selectionMode = InternalBackdrop.useStore(store, selectors.selectionMode);
-  const readOnly = InternalBackdrop.useStore(store, selectors.readOnly);
-  const virtualized = InternalBackdrop.useStore(store, selectors.virtualized);
-  const isItemEqualToValue = InternalBackdrop.useStore(store, selectors.isItemEqualToValue);
+  const hasItems = useComboboxHasItemsContext();
+  const open = useScrollLock.useStore(store, selectors.open);
+  const selectionMode = useScrollLock.useStore(store, selectors.selectionMode);
+  const readOnly = useScrollLock.useStore(store, selectors.readOnly);
+  const isItemEqualToValue = useScrollLock.useStore(store, selectors.isItemEqualToValue);
   const selectable = selectionMode !== 'none';
-  const index = indexProp ?? (virtualized ? resolveAriaLabelledBy.findItemIndex(flatFilteredItems, itemValue, isItemEqualToValue) : listItem.index);
+  const index = indexProp ?? (virtualized ? indexFromFilter ?? -1 : listItem.index);
   const hasRegistered = listItem.index !== -1;
-  const rootId = InternalBackdrop.useStore(store, selectors.id);
-  const highlighted = InternalBackdrop.useStore(store, selectors.isActive, index);
-  const matchesSelectedValue = InternalBackdrop.useStore(store, selectors.isSelected, itemValue);
-  const getItemProps = InternalBackdrop.useStore(store, selectors.getItemProps);
+  const rootId = useScrollLock.useStore(store, selectors.id);
+  const highlighted = useScrollLock.useStore(store, selectors.isActive, index);
+  const matchesSelectedValue = useScrollLock.useStore(store, selectors.isSelected, itemValue);
+  const itemProps = useScrollLock.useStore(store, selectors.itemProps);
   const itemRef = React__namespace.useRef(null);
   const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
   const selected = matchesSelectedValue && selectable;
@@ -2700,17 +2919,6 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
       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
@@ -2720,6 +2928,11 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
     native: nativeButton,
     composite: true
   });
+  const state = {
+    disabled,
+    selected,
+    highlighted
+  };
   function commitSelection(nativeEvent) {
     function selectItem() {
       store.state.handleSelection(nativeEvent, itemValue);
@@ -2743,6 +2956,11 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
       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;
@@ -2761,7 +2979,7 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
   const element = useRenderElement.useRenderElement('div', componentProps, {
     ref: [buttonRef, forwardedRef, listItem.ref, itemRef],
     state,
-    props: [rootProps, defaultProps, elementProps, getButtonProps]
+    props: [itemProps, defaultProps, elementProps, getButtonProps]
   });
   const contextValue = React__namespace.useMemo(() => ({
     selected,
@@ -2771,6 +2989,61 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
     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 = useScrollLock.useStore(store, selectors.isItemEqualToValue);
+  const {
+    flatFilteredItems
+  } = useComboboxDerivedItemsContext();
+  const indexFromFilter = resolveAriaLabelledBy.findItemIndex(flatFilteredItems, componentProps.value ?? null, isItemEqualToValue);
+
+  // Only reached when `virtualized` is true (see the wrapper below).
+  return /*#__PURE__*/jsxRuntime.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__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function ComboboxItem(componentProps, forwardedRef) {
+  const store = useComboboxRootContext();
+  const virtualized = useScrollLock.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__*/jsxRuntime.jsx(ComboboxItemVirtualizedIndex, {
+      componentProps: componentProps,
+      forwardedRef: forwardedRef
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxItemInner, {
+    componentProps: componentProps,
+    forwardedRef: forwardedRef,
+    virtualized: virtualized,
+    indexFromFilter: undefined
+  });
 }));
 if (process.env.NODE_ENV !== "production") ComboboxItem.displayName = "ComboboxItem";
 
@@ -2778,6 +3051,7 @@ const ComboboxRow = /*#__PURE__*/React__namespace.forwardRef(function ComboboxRo
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const element = useRenderElement.useRenderElement('div', componentProps, {
@@ -2797,12 +3071,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__namespace.forwardRef(function ComboboxEmpty(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     children: childrenProp,
     ...elementProps
   } = componentProps;
@@ -2810,9 +3091,10 @@ const ComboboxEmpty = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     filteredItems
   } = useComboboxDerivedItemsContext();
   const store = useComboboxRootContext();
+  const emptyRef = useInitialLiveRegionTextMutation();
   const children = filteredItems.length === 0 ? childrenProp : null;
   return useRenderElement.useRenderElement('div', componentProps, {
-    ref: [forwardedRef, store.state.emptyRef],
+    ref: [forwardedRef, store.state.emptyRef, emptyRef],
     props: [{
       children,
       role: 'status',
@@ -2860,6 +3142,7 @@ const ComboboxLabel = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
@@ -2867,10 +3150,10 @@ const ComboboxLabel = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   delete elementPropsWithoutId.id;
   const fieldRootContext = useLabelableId.useFieldRootContext();
   const store = useComboboxRootContext();
-  const inputInsidePopup = InternalBackdrop.useStore(store, selectors.inputInsidePopup);
-  const triggerElement = InternalBackdrop.useStore(store, selectors.triggerElement);
-  const inputElement = InternalBackdrop.useStore(store, selectors.inputElement);
-  const rootId = InternalBackdrop.useStore(store, selectors.id);
+  const inputInsidePopup = useScrollLock.useStore(store, selectors.inputInsidePopup);
+  const triggerElement = useScrollLock.useStore(store, selectors.triggerElement);
+  const inputElement = useScrollLock.useStore(store, selectors.inputElement);
+  const rootId = useScrollLock.useStore(store, selectors.id);
   const defaultLabelId = resolveAriaLabelledBy.getDefaultLabelId(rootId);
   const localControlId = triggerElement?.id ?? (inputInsidePopup ? rootId : undefined);
   if (process.env.NODE_ENV !== 'production') {
@@ -2906,13 +3189,13 @@ function ComboboxValue(props) {
     placeholder
   } = props;
   const store = useComboboxRootContext();
-  const itemToStringLabel = InternalBackdrop.useStore(store, selectors.itemToStringLabel);
-  const selectedValue = InternalBackdrop.useStore(store, selectors.selectedValue);
-  const items = InternalBackdrop.useStore(store, selectors.items);
-  const multiple = InternalBackdrop.useStore(store, selectors.selectionMode) === 'multiple';
-  const hasSelectedValue = InternalBackdrop.useStore(store, selectors.hasSelectedValue);
+  const itemToStringLabel = useScrollLock.useStore(store, selectors.itemToStringLabel);
+  const selectedValue = useScrollLock.useStore(store, selectors.selectedValue);
+  const items = useScrollLock.useStore(store, selectors.items);
+  const multiple = useScrollLock.useStore(store, selectors.selectionMode) === 'multiple';
+  const hasSelectedValue = useScrollLock.useStore(store, selectors.hasSelectedValue);
   const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
-  const hasNullLabel = InternalBackdrop.useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
+  const hasNullLabel = useScrollLock.useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
   let children = null;
   if (typeof childrenProp === 'function') {
     children = childrenProp(selectedValue);
@@ -2947,13 +3230,13 @@ const ComboboxItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function
   });
 });
 
-/** 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__namespace.memo(/*#__PURE__*/React__namespace.forwardRef((componentProps, forwardedRef) => {
   const {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;
@@ -2995,11 +3278,12 @@ const ComboboxChips = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
-  const open = InternalBackdrop.useStore(store, selectors.open);
-  const hasSelectionChips = InternalBackdrop.useStore(store, selectors.hasSelectionChips);
+  const open = useScrollLock.useStore(store, selectors.open);
+  const hasSelectionChips = useScrollLock.useStore(store, selectors.hasSelectionChips);
   const [highlightedChipIndex, setHighlightedChipIndex] = React__namespace.useState(undefined);
   if (open && highlightedChipIndex !== undefined) {
     setHighlightedChipIndex(undefined);
@@ -3011,7 +3295,11 @@ const ComboboxChips = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     // arrow keys inside a container unless it has a toolbar role.
     props: [hasSelectionChips ? {
       role: 'toolbar'
-    } : useRenderElement.EMPTY_OBJECT, elementProps]
+    } : useRenderElement.EMPTY_OBJECT, {
+      onMouseDown(event) {
+        handleInputPress(event, store, store.state.disabled, store.state.readOnly);
+      }
+    }, elementProps]
   });
   const contextValue = React__namespace.useMemo(() => ({
     highlightedChipIndex,
@@ -3033,7 +3321,7 @@ if (process.env.NODE_ENV !== "production") ComboboxChipContext.displayName = "Co
 function useComboboxChipContext() {
   const context = React__namespace.useContext(ComboboxChipContext);
   if (!context) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'useComboboxChipContext must be used within a ComboboxChip' : useRenderElement.formatErrorMessage(17));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ComboboxChipContext is missing. ComboboxChip parts must be placed within <Combobox.Chip>.' : useRenderElement.formatErrorMessage(17));
   }
   return context;
 }
@@ -3042,6 +3330,7 @@ const ComboboxChip = /*#__PURE__*/React__namespace.forwardRef(function ComboboxC
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -3049,25 +3338,29 @@ const ComboboxChip = /*#__PURE__*/React__namespace.forwardRef(function ComboboxC
     setHighlightedChipIndex,
     chipsRef
   } = useComboboxChipsContext();
-  const disabled = InternalBackdrop.useStore(store, selectors.disabled);
-  const readOnly = InternalBackdrop.useStore(store, selectors.readOnly);
-  const selectedValue = InternalBackdrop.useStore(store, selectors.selectedValue);
+  const direction = useScrollLock.useDirection();
+  const disabled = useScrollLock.useStore(store, selectors.disabled);
+  const readOnly = useScrollLock.useStore(store, selectors.readOnly);
+  const selectedValue = useScrollLock.useStore(store, selectors.selectedValue);
   const {
     ref,
     index
   } = useCompositeListItem.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;
@@ -3119,16 +3412,6 @@ const ComboboxChip = /*#__PURE__*/React__namespace.forwardRef(function ComboboxC
         } else {
           chipsRef.current[nextIndex]?.focus();
         }
-      },
-      onMouseDown(event) {
-        if (readOnly) {
-          return;
-        }
-        event.preventDefault();
-        if (disabled) {
-          return;
-        }
-        store.state.inputRef.current?.focus();
       }
     }, elementProps]
   });
@@ -3145,6 +3428,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__namespace.forwardRef(function ComboboxChipRemove(componentProps, forwardedRef) {
   const {
@@ -3152,16 +3437,17 @@ const ComboboxChipRemove = /*#__PURE__*/React__namespace.forwardRef(function Com
     className,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
   const {
     index
   } = useComboboxChipContext();
-  const comboboxDisabled = InternalBackdrop.useStore(store, selectors.disabled);
-  const readOnly = InternalBackdrop.useStore(store, selectors.readOnly);
-  const selectedValue = InternalBackdrop.useStore(store, selectors.selectedValue);
-  const isItemEqualToValue = InternalBackdrop.useStore(store, selectors.isItemEqualToValue);
+  const comboboxDisabled = useScrollLock.useStore(store, selectors.disabled);
+  const readOnly = useScrollLock.useStore(store, selectors.readOnly);
+  const selectedValue = useScrollLock.useStore(store, selectors.selectedValue);
+  const isItemEqualToValue = useScrollLock.useStore(store, selectors.isItemEqualToValue);
   const disabled = comboboxDisabled || disabledProp;
   const {
     buttonRef,
@@ -3203,6 +3489,9 @@ const ComboboxChipRemove = /*#__PURE__*/React__namespace.forwardRef(function Com
     state,
     props: [{
       tabIndex: -1,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
       onClick(event) {
         if (disabled || readOnly) {
           return;