@jobber/components 8.20.1 → 8.21.0

package/dist/ComboboxChipRemove-cjs.js

@@ -0,0 +1,3418 @@
+'use strict';
+
+var React = require('react');
+var useButton = require('./useButton-cjs.js');
+var useRenderElement = require('./useRenderElement-cjs.js');
+var useLabel = require('./useLabel-cjs.js');
+var useCompositeListItem = require('./useCompositeListItem-cjs.js');
+var InternalBackdrop = require('./InternalBackdrop-cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var ReactDOM = require('react-dom');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
+
+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);
+// `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";
+const ComboboxInputValueContext = /*#__PURE__*/React__namespace.createContext('');
+if (process.env.NODE_ENV !== "production") ComboboxInputValueContext.displayName = "ComboboxInputValueContext";
+function useComboboxRootContext() {
+  const context = React__namespace.useContext(ComboboxRootContext);
+  if (!context) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ComboboxRootContext is missing. Combobox parts must be placed within <Combobox.Root>.' : useRenderElement.formatErrorMessage(22));
+  }
+  return context;
+}
+function useComboboxFloatingContext() {
+  const context = React__namespace.useContext(ComboboxFloatingContext);
+  if (!context) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ComboboxFloatingContext is missing. Combobox parts must be placed within <Combobox.Root>.' : useRenderElement.formatErrorMessage(23));
+  }
+  return context;
+}
+function useComboboxDerivedItemsContext() {
+  const context = React__namespace.useContext(ComboboxDerivedItemsContext);
+  if (!context) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ComboboxItemsContext is missing. Combobox parts must be placed within <Combobox.Root>.' : useRenderElement.formatErrorMessage(24));
+  }
+  return context;
+}
+function useComboboxInputValueContext() {
+  return React__namespace.useContext(ComboboxInputValueContext);
+}
+
+const defaultItemEquality = (itemValue, selectedValue) => Object.is(itemValue, selectedValue);
+function compareItemEquality(itemValue, selectedValue, comparer) {
+  if (itemValue == null || selectedValue == null) {
+    return Object.is(itemValue, selectedValue);
+  }
+  return comparer(itemValue, selectedValue);
+}
+function selectedValueIncludes(selectedValues, itemValue, comparer) {
+  if (!selectedValues || selectedValues.length === 0) {
+    return false;
+  }
+  return selectedValues.some(selectedValue => {
+    if (selectedValue === undefined) {
+      return false;
+    }
+    return compareItemEquality(itemValue, selectedValue, comparer);
+  });
+}
+function findItemIndex(itemValues, selectedValue, comparer) {
+  if (!itemValues || itemValues.length === 0) {
+    return -1;
+  }
+  return itemValues.findIndex(itemValue => {
+    if (itemValue === undefined) {
+      return false;
+    }
+    return compareItemEquality(itemValue, selectedValue, comparer);
+  });
+}
+function removeItem(selectedValues, itemValue, comparer) {
+  return selectedValues.filter(selectedValue => !compareItemEquality(itemValue, selectedValue, comparer));
+}
+
+function serializeValue(value) {
+  if (value == null) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function isGroupedItems(items) {
+  return items != null && items.length > 0 && typeof items[0] === 'object' && items[0] != null && 'items' in items[0];
+}
+
+/**
+ * Checks if the items array contains an item with a null value that has a non-null label.
+ */
+function hasNullItemLabel(items) {
+  if (!Array.isArray(items)) {
+    return items != null && 'null' in items;
+  }
+  const arrayItems = items;
+  if (isGroupedItems(arrayItems)) {
+    for (const group of arrayItems) {
+      for (const item of group.items) {
+        if (item && item.value == null && item.label != null) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  for (const item of arrayItems) {
+    if (item && item.value == null && item.label != null) {
+      return true;
+    }
+  }
+  return false;
+}
+function stringifyAsLabel(item, itemToStringLabel) {
+  if (itemToStringLabel && item != null) {
+    return itemToStringLabel(item) ?? '';
+  }
+  if (item && typeof item === 'object') {
+    if ('label' in item && item.label != null) {
+      return String(item.label);
+    }
+    if ('value' in item) {
+      return String(item.value);
+    }
+  }
+  return serializeValue(item);
+}
+function stringifyAsValue(item, itemToStringValue) {
+  if (itemToStringValue && item != null) {
+    return itemToStringValue(item) ?? '';
+  }
+  if (item && typeof item === 'object' && 'value' in item && 'label' in item) {
+    return serializeValue(item.value);
+  }
+  return serializeValue(item);
+}
+function resolveSelectedLabel(value, items, itemToStringLabel) {
+  function fallback() {
+    return stringifyAsLabel(value, itemToStringLabel);
+  }
+  if (itemToStringLabel && value != null) {
+    return itemToStringLabel(value);
+  }
+
+  // Custom object with explicit label takes precedence
+  if (value && typeof value === 'object' && 'label' in value && value.label != null) {
+    return value.label;
+  }
+
+  // Items provided as plain record map
+  if (items && !Array.isArray(items)) {
+    return items[value] ?? fallback();
+  }
+
+  // Items provided as array (flat or grouped)
+  if (Array.isArray(items)) {
+    const arrayItems = items;
+    const flatItems = isGroupedItems(arrayItems) ? arrayItems.flatMap(group => group.items) : arrayItems;
+    if (value == null || typeof value !== 'object') {
+      const match = flatItems.find(item => item.value === value);
+      if (match && match.label != null) {
+        return match.label;
+      }
+      return fallback();
+    }
+
+    // Object without explicit label: try matching by its `value` property
+    if ('value' in value) {
+      const match = flatItems.find(item => item && item.value === value.value);
+      if (match && match.label != null) {
+        return match.label;
+      }
+    }
+  }
+  return fallback();
+}
+function resolveMultipleLabels(values, items, itemToStringLabel) {
+  return values.reduce((acc, value, index) => {
+    if (index > 0) {
+      acc.push(', ');
+    }
+    acc.push(/*#__PURE__*/jsxRuntime.jsx(React__namespace.Fragment, {
+      children: resolveSelectedLabel(value, items, itemToStringLabel)
+    }, index));
+    return acc;
+  }, []);
+}
+
+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 => {
+    const selectedValue = state.selectedValue;
+    return Array.isArray(selectedValue) && selectedValue.length > 0;
+  }),
+  hasSelectedValue: InternalBackdrop.createSelector(state => {
+    const {
+      selectedValue,
+      selectionMode
+    } = state;
+    if (selectedValue == null) {
+      return false;
+    }
+    if (selectionMode === 'multiple' && Array.isArray(selectedValue)) {
+      return selectedValue.length > 0;
+    }
+    return true;
+  }),
+  hasNullItemLabel: InternalBackdrop.createSelector((state, enabled) => {
+    return enabled ? 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) => {
+    const comparer = state.isItemEqualToValue;
+    const selectedValue = state.selectedValue;
+    if (Array.isArray(selectedValue)) {
+      return selectedValue.some(selectedItem => compareItemEquality(itemValue, selectedItem, comparer));
+    }
+    return compareItemEquality(itemValue, selectedValue, comparer);
+  }),
+  transitionStatus: 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)
+};
+
+/**
+ * Enhanced filter using Intl.Collator for more robust string matching.
+ * Uses the provided `itemToStringLabel` function if available, otherwise falls back to:
+ * • When `item` is an object with a `value` property, that property is used.
+ * • When `item` is a primitive (e.g. `string`), it is used directly.
+ */
+function createCollatorItemFilter(collatorFilter, itemToStringLabel) {
+  return (item, query) => {
+    if (item == null) {
+      return false;
+    }
+    const itemString = stringifyAsLabel(item, itemToStringLabel);
+    return collatorFilter.contains(itemString, query);
+  };
+}
+
+/**
+ * Enhanced filter for single selection mode using Intl.Collator that shows all items
+ * when query is empty or matches the current selection, making it easier to browse options.
+ */
+function createSingleSelectionCollatorFilter(collatorFilter, itemToStringLabel, selectedValue) {
+  return (item, query) => {
+    if (item == null) {
+      return false;
+    }
+    if (!query) {
+      return true;
+    }
+    const itemString = stringifyAsLabel(item, itemToStringLabel);
+    const selectedString = selectedValue != null ? stringifyAsLabel(selectedValue, itemToStringLabel) : '';
+
+    // Handle case-insensitive matching consistently
+    if (selectedString && collatorFilter.contains(selectedString, query) && selectedString.length === query.length) {
+      return true;
+    }
+    return collatorFilter.contains(itemString, query);
+  };
+}
+
+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',
+    sensitivity: 'base',
+    ignorePunctuation: true,
+    ...options
+  };
+  const cacheKey = `${stringifyLocale(options.locale)}|${JSON.stringify(mergedOptions)}`;
+  const cachedFilter = filterCache.get(cacheKey);
+  if (cachedFilter) {
+    return cachedFilter;
+  }
+  const collator = new Intl.Collator(options.locale, mergedOptions);
+  const filter = {
+    contains(item, query, itemToString) {
+      if (!query) {
+        return true;
+      }
+      const itemString = stringifyAsLabel(item, itemToString);
+      for (let i = 0; i <= itemString.length - query.length; i += 1) {
+        if (collator.compare(itemString.slice(i, i + query.length), query) === 0) {
+          return true;
+        }
+      }
+      return false;
+    },
+    startsWith(item, query, itemToString) {
+      if (!query) {
+        return true;
+      }
+      const itemString = stringifyAsLabel(item, itemToString);
+      return collator.compare(itemString.slice(0, query.length), query) === 0;
+    },
+    endsWith(item, query, itemToString) {
+      if (!query) {
+        return true;
+      }
+      const itemString = stringifyAsLabel(item, itemToString);
+      const queryLength = query.length;
+      return itemString.length >= queryLength && collator.compare(itemString.slice(itemString.length - queryLength), query) === 0;
+    }
+  };
+  filterCache.set(cacheKey, filter);
+  return filter;
+}
+
+/**
+ * Matches items against a query using `Intl.Collator` for robust string matching.
+ */
+const useCoreFilter = getFilter;
+/**
+ * Matches items against a query using `Intl.Collator` for robust string matching.
+ */
+function useComboboxFilter(options = {}) {
+  const {
+    multiple = false,
+    value,
+    ...collatorOptions
+  } = options;
+  const coreFilter = getFilter(collatorOptions);
+  const contains = React__namespace.useCallback((item, query, itemToString) => {
+    if (multiple) {
+      return createCollatorItemFilter(coreFilter, itemToString)(item, query);
+    }
+    return createSingleSelectionCollatorFilter(coreFilter, itemToString, value)(item, query);
+  }, [coreFilter, value, multiple]);
+  return React__namespace.useMemo(() => ({
+    contains,
+    startsWith: coreFilter.startsWith,
+    endsWith: coreFilter.endsWith
+  }), [contains, coreFilter]);
+}
+
+const NO_ACTIVE_VALUE = Symbol('none');
+const INITIAL_LAST_HIGHLIGHT = {
+  value: NO_ACTIVE_VALUE,
+  index: -1
+};
+
+function AriaCombobox(props) {
+  const {
+    id: idProp,
+    onOpenChangeComplete: onOpenChangeCompleteProp,
+    defaultSelectedValue = null,
+    selectedValue: selectedValueProp,
+    onSelectedValueChange,
+    defaultInputValue: defaultInputValueProp,
+    inputValue: inputValueProp,
+    selectionMode = 'none',
+    onItemHighlighted: onItemHighlightedProp,
+    name: nameProp,
+    disabled: disabledProp = false,
+    readOnly = false,
+    required = false,
+    inputRef: inputRefProp,
+    grid = false,
+    items,
+    filteredItems: filteredItemsProp,
+    filter: filterProp,
+    openOnInputClick = true,
+    autoHighlight = false,
+    keepHighlight = false,
+    highlightItemOnHover = true,
+    loopFocus = true,
+    itemToStringLabel,
+    itemToStringValue,
+    isItemEqualToValue = defaultItemEquality,
+    virtualized = false,
+    inline: inlineProp = false,
+    fillInputOnItemPress = true,
+    modal = false,
+    limit = -1,
+    autoComplete = 'list',
+    formAutoComplete,
+    locale,
+    submitOnItemClick = false
+  } = props;
+  const {
+    clearErrors
+  } = useLabel.useFormContext();
+  const {
+    setDirty,
+    validityData,
+    shouldValidateOnChange,
+    setFilled,
+    name: fieldName,
+    disabled: fieldDisabled,
+    setTouched,
+    setFocused,
+    validationMode,
+    validation
+  } = useLabel.useFieldRootContext();
+  const id = useLabel.useLabelableId({
+    id: idProp
+  });
+  const collatorFilter = useCoreFilter({
+    locale
+  });
+  const [queryChangedAfterOpen, setQueryChangedAfterOpen] = React__namespace.useState(false);
+  const [closeQuery, setCloseQuery] = React__namespace.useState(null);
+  const listRef = React__namespace.useRef([]);
+  const labelsRef = React__namespace.useRef([]);
+  const popupRef = React__namespace.useRef(null);
+  const inputRef = React__namespace.useRef(null);
+  const startDismissRef = React__namespace.useRef(null);
+  const endDismissRef = React__namespace.useRef(null);
+  const emptyRef = React__namespace.useRef(null);
+  const keyboardActiveRef = React__namespace.useRef(true);
+  const hadInputClearRef = React__namespace.useRef(false);
+  const chipsContainerRef = React__namespace.useRef(null);
+  const clearRef = React__namespace.useRef(null);
+  const selectionEventRef = React__namespace.useRef(null);
+  const lastHighlightRef = React__namespace.useRef(INITIAL_LAST_HIGHLIGHT);
+  const pendingQueryHighlightRef = React__namespace.useRef(null);
+
+  /**
+   * Contains the currently visible list of item values post-filtering.
+   */
+  const valuesRef = React__namespace.useRef([]);
+  /**
+   * Contains all item values in a stable, unfiltered order.
+   * This is only used when `items` prop is not provided.
+   * It accumulates values on first mount and does not remove them on unmount due to
+   * filtering, providing a stable index for selected value tracking.
+   */
+  const allValuesRef = React__namespace.useRef([]);
+  const disabled = fieldDisabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  const multiple = selectionMode === 'multiple';
+  const single = selectionMode === 'single';
+  const hasInputValue = inputValueProp !== undefined || defaultInputValueProp !== undefined;
+  const hasItems = items !== undefined;
+  const hasFilteredItemsProp = filteredItemsProp !== undefined;
+  let autoHighlightMode;
+  if (autoHighlight === 'always') {
+    autoHighlightMode = 'always';
+  } else {
+    autoHighlightMode = autoHighlight ? 'input-change' : false;
+  }
+  const [selectedValue, setSelectedValueUnwrapped] = useButton.useControlled({
+    controlled: selectedValueProp,
+    default: multiple ? defaultSelectedValue ?? useRenderElement.EMPTY_ARRAY : defaultSelectedValue,
+    name: 'Combobox',
+    state: 'selectedValue'
+  });
+  const filter = React__namespace.useMemo(() => {
+    if (filterProp === null) {
+      return () => true;
+    }
+    if (filterProp !== undefined) {
+      return filterProp;
+    }
+    if (single && !queryChangedAfterOpen) {
+      return createSingleSelectionCollatorFilter(collatorFilter, itemToStringLabel, selectedValue);
+    }
+    return createCollatorItemFilter(collatorFilter, itemToStringLabel);
+  }, [filterProp, single, selectedValue, queryChangedAfterOpen, collatorFilter, itemToStringLabel]);
+
+  // If neither inputValue nor defaultInputValue are provided, derive it from the
+  // selected value for single mode so the input reflects the selection on mount.
+  const initialDefaultInputValue = useRenderElement.useRefWithInit(() => {
+    if (hasInputValue) {
+      return defaultInputValueProp ?? '';
+    }
+    if (single) {
+      return stringifyAsLabel(selectedValue, itemToStringLabel);
+    }
+    return '';
+  }).current;
+  const [inputValue, setInputValueUnwrapped] = useButton.useControlled({
+    controlled: inputValueProp,
+    default: initialDefaultInputValue,
+    name: 'Combobox',
+    state: 'inputValue'
+  });
+  const [open, setOpenUnwrapped] = useButton.useControlled({
+    controlled: props.open,
+    default: props.defaultOpen,
+    name: 'Combobox',
+    state: 'open'
+  });
+  const isGrouped = isGroupedItems(items);
+  const query = closeQuery ?? (inputValue === '' ? '' : String(inputValue).trim());
+  const selectedLabelString = single ? stringifyAsLabel(selectedValue, itemToStringLabel) : '';
+  const shouldBypassFiltering = single && !queryChangedAfterOpen && query !== '' && selectedLabelString !== '' && selectedLabelString.length === query.length && collatorFilter.contains(selectedLabelString, query);
+  const filterQuery = shouldBypassFiltering ? '' : query;
+  const shouldIgnoreExternalFiltering = hasItems && hasFilteredItemsProp && shouldBypassFiltering;
+  const flatItems = React__namespace.useMemo(() => {
+    if (!items) {
+      return useRenderElement.EMPTY_ARRAY;
+    }
+    if (isGrouped) {
+      return items.flatMap(group => group.items);
+    }
+    return items;
+  }, [items, isGrouped]);
+  const filteredItems = React__namespace.useMemo(() => {
+    if (filteredItemsProp && !shouldIgnoreExternalFiltering) {
+      return filteredItemsProp;
+    }
+    if (!items) {
+      return useRenderElement.EMPTY_ARRAY;
+    }
+    if (isGrouped) {
+      const groupedItems = items;
+      const resultingGroups = [];
+      let currentCount = 0;
+      for (const group of groupedItems) {
+        if (limit > -1 && currentCount >= limit) {
+          break;
+        }
+        const candidateItems = filterQuery === '' ? group.items : group.items.filter(item => filter(item, filterQuery, itemToStringLabel));
+        if (candidateItems.length === 0) {
+          continue;
+        }
+        const remainingLimit = limit > -1 ? limit - currentCount : Infinity;
+        const itemsToTake = candidateItems.slice(0, remainingLimit);
+        if (itemsToTake.length > 0) {
+          const newGroup = {
+            ...group,
+            items: itemsToTake
+          };
+          resultingGroups.push(newGroup);
+          currentCount += itemsToTake.length;
+        }
+      }
+      return resultingGroups;
+    }
+    if (filterQuery === '') {
+      return limit > -1 ? flatItems.slice(0, limit) :
+      // The cast here is done as `flatItems` is readonly.
+      // valuesRef.current, a mutable ref, can be set to `flatFilteredItems`, which may
+      // reference this exact readonly value, creating a mutation risk.
+      // However, <Combobox.Item> can never mutate this value as the mutating effect
+      // bails early when `items` is provided, and this is only ever returned
+      // when `items` is provided due to the early return at the top of this hook.
+      flatItems;
+    }
+    const limitedItems = [];
+    for (const item of flatItems) {
+      if (limit > -1 && limitedItems.length >= limit) {
+        break;
+      }
+      if (filter(item, filterQuery, itemToStringLabel)) {
+        limitedItems.push(item);
+      }
+    }
+    return limitedItems;
+  }, [filteredItemsProp, shouldIgnoreExternalFiltering, items, isGrouped, filterQuery, limit, filter, itemToStringLabel, flatItems]);
+  const flatFilteredItems = React__namespace.useMemo(() => {
+    if (isGrouped) {
+      const groups = filteredItems;
+      return groups.flatMap(g => g.items);
+    }
+    return filteredItems;
+  }, [filteredItems, isGrouped]);
+  const store = useRenderElement.useRefWithInit(() => new InternalBackdrop.Store({
+    id,
+    labelId: undefined,
+    selectedValue,
+    open,
+    filter,
+    query,
+    items,
+    selectionMode,
+    listRef,
+    labelsRef,
+    popupRef,
+    emptyRef,
+    inputRef,
+    startDismissRef,
+    endDismissRef,
+    keyboardActiveRef,
+    chipsContainerRef,
+    clearRef,
+    valuesRef,
+    allValuesRef,
+    selectionEventRef,
+    name,
+    disabled,
+    readOnly,
+    required,
+    grid,
+    isGrouped,
+    virtualized,
+    openOnInputClick,
+    itemToStringLabel,
+    isItemEqualToValue,
+    modal,
+    autoHighlight: autoHighlightMode,
+    submitOnItemClick,
+    hasInputValue,
+    mounted: false,
+    forceMounted: false,
+    transitionStatus: 'idle',
+    inline: inlineProp,
+    activeIndex: null,
+    selectedIndex: null,
+    popupProps: {},
+    inputProps: {},
+    triggerProps: {},
+    positionerElement: null,
+    listElement: null,
+    triggerElement: null,
+    inputElement: null,
+    inputGroupElement: null,
+    popupSide: null,
+    openMethod: null,
+    inputInsidePopup: true,
+    onOpenChangeComplete: onOpenChangeCompleteProp || useRenderElement.NOOP,
+    // Placeholder callbacks replaced on first render
+    setOpen: useRenderElement.NOOP,
+    setInputValue: useRenderElement.NOOP,
+    setSelectedValue: useRenderElement.NOOP,
+    setIndices: useRenderElement.NOOP,
+    onItemHighlighted: useRenderElement.NOOP,
+    handleSelection: useRenderElement.NOOP,
+    getItemProps: () => useRenderElement.EMPTY_OBJECT,
+    forceMount: useRenderElement.NOOP,
+    requestSubmit: useRenderElement.NOOP
+  })).current;
+  const fieldRawValue = selectionMode === 'none' ? inputValue : selectedValue;
+  const fieldStringValue = React__namespace.useMemo(() => {
+    if (selectionMode === 'none') {
+      return fieldRawValue;
+    }
+    if (Array.isArray(selectedValue)) {
+      return selectedValue.map(value => stringifyAsValue(value, itemToStringValue));
+    }
+    return stringifyAsValue(selectedValue, itemToStringValue);
+  }, [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 triggerRef = useButton.useValueAsRef(triggerElement);
+  const {
+    mounted,
+    setMounted,
+    transitionStatus
+  } = useButton.useTransitionStatus(open);
+  const {
+    openMethod,
+    triggerProps
+  } = InternalBackdrop.useOpenInteractionType(open);
+  useLabel.useField({
+    id,
+    name,
+    commit: validation.commit,
+    value: fieldRawValue,
+    controlRef: inputInsidePopup ? triggerRef : inputRef,
+    getValue: () => fieldStringValue
+  });
+  const forceMount = useButton.useStableCallback(() => {
+    if (items) {
+      // Ensure typeahead works on a closed list.
+      labelsRef.current = flatFilteredItems.map(item => stringifyAsLabel(item, itemToStringLabel));
+    } else {
+      store.set('forceMounted', true);
+    }
+  });
+  const initialSelectedValueRef = React__namespace.useRef(selectedValue);
+  useButton.useIsoLayoutEffect(() => {
+    // Ensure the values and labels are registered for programmatic value changes.
+    if (selectedValue !== initialSelectedValueRef.current) {
+      forceMount();
+    }
+  }, [forceMount, selectedValue]);
+  const setIndices = useButton.useStableCallback(options => {
+    store.update(options);
+    const type = options.type || 'none';
+    if (options.activeIndex === undefined) {
+      return;
+    }
+    if (options.activeIndex === null) {
+      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
+        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
+        onItemHighlighted(undefined, useButton.createGenericEventDetails(type, undefined, {
+          index: -1
+        }));
+      }
+    } else {
+      const activeValue = valuesRef.current[options.activeIndex];
+      lastHighlightRef.current = {
+        value: activeValue,
+        index: options.activeIndex
+      };
+      onItemHighlighted(activeValue, useButton.createGenericEventDetails(type, undefined, {
+        index: options.activeIndex
+      }));
+    }
+  });
+  const setInputValue = useButton.useStableCallback((next, eventDetails) => {
+    hadInputClearRef.current = eventDetails.reason === useButton.inputClear;
+    props.onInputValueChange?.(next, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+
+    // If user is typing, ensure we don't auto-highlight on open due to a race
+    // with the post-open effect that sets this flag.
+    if (eventDetails.reason === useButton.inputChange) {
+      const event = eventDetails.event;
+      const inputType = event.inputType;
+      // Treat composition commits as typed input; autofill may omit `inputType` or
+      // report `insertReplacementText`.
+      const isTypedInput = event.type === 'compositionend' || inputType != null && inputType !== '' && inputType !== 'insertReplacementText';
+      if (isTypedInput) {
+        const hasQuery = next.trim() !== '';
+        if (hasQuery) {
+          setQueryChangedAfterOpen(true);
+        }
+        // Defer index updates until after the filtered items have been derived to ensure
+        // `onItemHighlighted` receives the latest item.
+        pendingQueryHighlightRef.current = {
+          hasQuery
+        };
+        if (hasQuery && autoHighlightMode && store.state.activeIndex == null) {
+          store.set('activeIndex', 0);
+        }
+      }
+    }
+    setInputValueUnwrapped(next);
+  });
+  const setOpen = useButton.useStableCallback((nextOpen, eventDetails) => {
+    if (open === nextOpen) {
+      return;
+    }
+
+    // If the `Empty` component is not used, the positioner or popup should be hidden
+    // with CSS. In this case, allow the Escape key to bubble to close a parent popup
+    // if there are no items to show.
+    if (eventDetails.reason === 'escape-key' && hasItems && flatFilteredItems.length === 0 && !store.state.emptyRef.current) {
+      eventDetails.allowPropagation();
+    }
+    props.onOpenChange?.(nextOpen, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    if (!nextOpen && queryChangedAfterOpen) {
+      if (single) {
+        if (!inline) {
+          setCloseQuery(query);
+        }
+        // Avoid a flicker when closing the popup with an empty query.
+        if (query === '') {
+          setQueryChangedAfterOpen(false);
+        }
+      } else if (multiple) {
+        if (inline || 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));
+      }
+    }
+    setOpenUnwrapped(nextOpen);
+    if (!nextOpen && inputInsidePopup && (eventDetails.reason === useButton.focusOut || eventDetails.reason === useButton.outsidePress)) {
+      setTouched(true);
+      setFocused(false);
+      if (validationMode === 'onBlur') {
+        const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
+        validation.commit(valueToValidate);
+      }
+    }
+  });
+  const setSelectedValue = useButton.useStableCallback((nextValue, eventDetails) => {
+    // Cast to `any` due to conditional value type (single vs. multiple).
+    // The runtime implementation already ensures the correct value shape.
+    onSelectedValueChange?.(nextValue, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    setSelectedValueUnwrapped(nextValue);
+    const shouldFillInput = selectionMode === 'none' && popupRef.current && fillInputOnItemPress || single && !store.state.inputInsidePopup;
+    if (shouldFillInput) {
+      setInputValue(stringifyAsLabel(nextValue, itemToStringLabel), useButton.createChangeEventDetails(eventDetails.reason, eventDetails.event));
+    }
+    if (single && nextValue != null && eventDetails.reason !== useButton.inputChange && queryChangedAfterOpen && !inline) {
+      setCloseQuery(query);
+    }
+  });
+  const handleSelection = useButton.useStableCallback((event, passedValue) => {
+    let itemValue = passedValue;
+    if (itemValue === undefined) {
+      if (activeIndex === null) {
+        return;
+      }
+      itemValue = valuesRef.current[activeIndex];
+    }
+    const targetEl = useButton.getTarget(event);
+    const overrideEvent = selectionEventRef.current ?? event;
+    selectionEventRef.current = null;
+    const eventDetails = useButton.createChangeEventDetails(useButton.itemPress, overrideEvent);
+
+    // Let the link handle the click.
+    const href = targetEl?.closest('a')?.getAttribute('href');
+    if (href) {
+      if (href.startsWith('#')) {
+        setOpen(false, eventDetails);
+      }
+      return;
+    }
+    if (multiple) {
+      const currentSelectedValue = Array.isArray(selectedValue) ? selectedValue : [];
+      const isCurrentlySelected = selectedValueIncludes(currentSelectedValue, itemValue, store.state.isItemEqualToValue);
+      const nextValue = isCurrentlySelected ? removeItem(currentSelectedValue, itemValue, store.state.isItemEqualToValue) : [...currentSelectedValue, itemValue];
+      setSelectedValue(nextValue, eventDetails);
+      const wasFiltering = inputRef.current ? inputRef.current.value.trim() !== '' : false;
+      if (!wasFiltering) {
+        return;
+      }
+      if (store.state.inputInsidePopup) {
+        setInputValue('', useButton.createChangeEventDetails(useButton.inputClear, eventDetails.event));
+      } else {
+        setOpen(false, eventDetails);
+      }
+    } else {
+      setSelectedValue(itemValue, eventDetails);
+      setOpen(false, eventDetails);
+    }
+  });
+  const requestSubmit = useButton.useStableCallback(() => {
+    if (!store.state.submitOnItemClick) {
+      return;
+    }
+    const form = store.state.inputElement?.form;
+    if (form && typeof form.requestSubmit === 'function') {
+      form.requestSubmit();
+    }
+  });
+  const handleUnmount = useButton.useStableCallback(() => {
+    setMounted(false);
+    onOpenChangeComplete?.(false);
+    setQueryChangedAfterOpen(false);
+    setCloseQuery(null);
+    if (selectionMode === 'none') {
+      setIndices({
+        activeIndex: null,
+        selectedIndex: null
+      });
+    } else {
+      setIndices({
+        activeIndex: null
+      });
+    }
+
+    // Multiple selection mode:
+    // If the user typed a filter and didn't select in multiple mode, clear the input
+    // after close completes to avoid mid-exit flicker and start fresh on next open.
+    if (multiple && inputRef.current && inputRef.current.value !== '' && !hadInputClearRef.current) {
+      setInputValue('', useButton.createChangeEventDetails(useButton.inputClear));
+    }
+
+    // Single selection mode:
+    // - If input is rendered inside the popup, clear it so the next open is blank
+    // - If input is outside the popup, sync it to the selected value
+    if (single) {
+      if (store.state.inputInsidePopup) {
+        if (inputRef.current && inputRef.current.value !== '') {
+          setInputValue('', useButton.createChangeEventDetails(useButton.inputClear));
+        }
+      } else {
+        const stringVal = stringifyAsLabel(selectedValue, itemToStringLabel);
+        if (inputRef.current && inputRef.current.value !== stringVal) {
+          // If no selection was made, treat this as clearing the typed filter.
+          const reason = stringVal === '' ? useButton.inputClear : useButton.none;
+          setInputValue(stringVal, useButton.createChangeEventDetails(reason));
+        }
+      }
+    }
+  });
+
+  // Support composing the Dialog component around an inline combobox.
+  // `[role="dialog"]` is more interoperable than using a context, e.g. it can work
+  // with third-party modal libraries, though the limitation is that the closest
+  // `role=dialog` part must be the animated element.
+  const resolvedPopupRef = React__namespace.useMemo(() => {
+    if (inline && positionerElement) {
+      return {
+        current: positionerElement.closest('[role="dialog"]')
+      };
+    }
+    return popupRef;
+  }, [inline, positionerElement]);
+  useButton.useOpenChangeComplete({
+    enabled: !props.actionsRef,
+    open,
+    ref: resolvedPopupRef,
+    onComplete() {
+      if (!open) {
+        handleUnmount();
+      }
+    }
+  });
+  React__namespace.useImperativeHandle(props.actionsRef, () => ({
+    unmount: handleUnmount
+  }), [handleUnmount]);
+  useButton.useIsoLayoutEffect(function syncSelectedIndex() {
+    if (open || selectionMode === 'none') {
+      return;
+    }
+    const registry = items ? flatItems : allValuesRef.current;
+    if (multiple) {
+      const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
+      const lastValue = currentValue[currentValue.length - 1];
+      const lastIndex = findItemIndex(registry, lastValue, isItemEqualToValue);
+      setIndices({
+        selectedIndex: lastIndex === -1 ? null : lastIndex
+      });
+    } else {
+      const index = findItemIndex(registry, selectedValue, isItemEqualToValue);
+      setIndices({
+        selectedIndex: index === -1 ? null : index
+      });
+    }
+  }, [open, selectedValue, items, selectionMode, flatItems, multiple, isItemEqualToValue, setIndices]);
+  useButton.useIsoLayoutEffect(() => {
+    if (items) {
+      valuesRef.current = flatFilteredItems;
+      listRef.current.length = flatFilteredItems.length;
+    }
+  }, [items, flatFilteredItems]);
+  useButton.useIsoLayoutEffect(() => {
+    const pendingHighlight = pendingQueryHighlightRef.current;
+    if (pendingHighlight) {
+      if (pendingHighlight.hasQuery) {
+        if (autoHighlightMode) {
+          store.set('activeIndex', 0);
+        }
+      } else if (autoHighlightMode === 'always') {
+        store.set('activeIndex', 0);
+      }
+      pendingQueryHighlightRef.current = null;
+    }
+    if (!open && !inline) {
+      return;
+    }
+    const shouldUseFlatFilteredItems = hasItems || hasFilteredItemsProp;
+    const candidateItems = shouldUseFlatFilteredItems ? flatFilteredItems : valuesRef.current;
+    const storeActiveIndex = store.state.activeIndex;
+    if (storeActiveIndex == null) {
+      if (autoHighlightMode === 'always' && candidateItems.length > 0) {
+        store.set('activeIndex', 0);
+        return;
+      }
+      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
+        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
+        store.state.onItemHighlighted(undefined, useButton.createGenericEventDetails(useButton.none, undefined, {
+          index: -1
+        }));
+      }
+      return;
+    }
+    if (storeActiveIndex >= candidateItems.length) {
+      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
+        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
+        store.state.onItemHighlighted(undefined, useButton.createGenericEventDetails(useButton.none, undefined, {
+          index: -1
+        }));
+      }
+      store.set('activeIndex', null);
+      return;
+    }
+    const itemValue = candidateItems[storeActiveIndex];
+    const previouslyHighlightedItemValue = lastHighlightRef.current.value;
+    const isSameItem = previouslyHighlightedItemValue !== NO_ACTIVE_VALUE && compareItemEquality(itemValue, previouslyHighlightedItemValue, store.state.isItemEqualToValue);
+    if (lastHighlightRef.current.index !== storeActiveIndex || !isSameItem) {
+      lastHighlightRef.current = {
+        value: itemValue,
+        index: storeActiveIndex
+      };
+      store.state.onItemHighlighted(itemValue, useButton.createGenericEventDetails(useButton.none, undefined, {
+        index: storeActiveIndex
+      }));
+    }
+  }, [activeIndex, autoHighlightMode, hasFilteredItemsProp, hasItems, flatFilteredItems, inline, open, store]);
+  useButton.useIsoLayoutEffect(() => {
+    if (selectionMode === 'none') {
+      setFilled(String(inputValue) !== '');
+      return;
+    }
+    setFilled(multiple ? Array.isArray(selectedValue) && selectedValue.length > 0 : selectedValue != null);
+  }, [setFilled, selectionMode, inputValue, selectedValue, multiple]);
+
+  // Ensures that the active index is not set to 0 when the list is empty.
+  // This avoids needing to press ArrowDown twice under certain conditions.
+  React__namespace.useEffect(() => {
+    if (hasItems && autoHighlightMode && flatFilteredItems.length === 0) {
+      setIndices({
+        activeIndex: null
+      });
+    }
+  }, [hasItems, autoHighlightMode, flatFilteredItems.length, setIndices]);
+  useButton.useValueChanged(query, () => {
+    if (!open || query === '' || query === String(initialDefaultInputValue)) {
+      return;
+    }
+    setQueryChangedAfterOpen(true);
+  });
+  useButton.useValueChanged(selectedValue, () => {
+    if (selectionMode === 'none') {
+      return;
+    }
+    clearErrors(name);
+    setDirty(selectedValue !== validityData.initialValue);
+    if (shouldValidateOnChange()) {
+      validation.commit(selectedValue);
+    } else {
+      validation.commit(selectedValue, true);
+    }
+    if (single && !hasInputValue && !inputInsidePopup) {
+      const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
+      if (inputValue !== nextInputValue) {
+        setInputValue(nextInputValue, useButton.createChangeEventDetails(useButton.none));
+      }
+    }
+  });
+  useButton.useValueChanged(inputValue, () => {
+    if (selectionMode !== 'none') {
+      return;
+    }
+    clearErrors(name);
+    setDirty(inputValue !== validityData.initialValue);
+    if (shouldValidateOnChange()) {
+      validation.commit(inputValue);
+    } else {
+      validation.commit(inputValue, true);
+    }
+  });
+  useButton.useValueChanged(items, () => {
+    if (!single || hasInputValue || inputInsidePopup || queryChangedAfterOpen) {
+      return;
+    }
+    const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
+    if (inputValue !== nextInputValue) {
+      setInputValue(nextInputValue, useButton.createChangeEventDetails(useButton.none));
+    }
+  });
+  const floatingRootContext = useCompositeListItem.useFloatingRootContext({
+    open: inline ? true : open,
+    onOpenChange: setOpen,
+    elements: {
+      reference: inputInsidePopup ? triggerElement : inputElement,
+      floating: positionerElement
+    }
+  });
+  let ariaHasPopup;
+  let ariaExpanded;
+  if (!inline) {
+    ariaHasPopup = grid ? 'grid' : 'listbox';
+    ariaExpanded = open ? 'true' : 'false';
+  }
+  const role = React__namespace.useMemo(() => {
+    const isPlainInput = inputElement?.tagName === 'INPUT';
+    // During SSR and initial hydration, the input ref is not available yet.
+    // Assume an input-like control so combobox ARIA attributes are present.
+    const shouldTreatAsInput = inputElement == null || isPlainInput;
+    const shouldApplyAria = shouldTreatAsInput || open;
+    const reference = shouldTreatAsInput ? {
+      autoComplete: 'off',
+      spellCheck: 'false',
+      autoCorrect: 'off',
+      autoCapitalize: 'none'
+    } : {};
+    if (shouldApplyAria) {
+      reference.role = 'combobox';
+      reference['aria-expanded'] = ariaExpanded;
+      reference['aria-haspopup'] = ariaHasPopup;
+      reference['aria-controls'] = open ? listElement?.id : undefined;
+      reference['aria-autocomplete'] = autoComplete;
+    }
+    return {
+      reference,
+      floating: {
+        role: 'presentation'
+      }
+    };
+  }, [inputElement, open, ariaExpanded, ariaHasPopup, listElement?.id, autoComplete]);
+  const click = InternalBackdrop.useClick(floatingRootContext, {
+    enabled: !readOnly && !disabled && openOnInputClick,
+    event: 'mousedown-only',
+    toggle: false,
+    // Apply a small delay for touch to let iOS viewport centering settle.
+    // This avoids top-bottom flip flickers if the preferred position is "top" when first tapping.
+    touchOpenDelay: inputInsidePopup ? 0 : 50,
+    reason: useButton.inputPress
+  });
+  const dismiss = InternalBackdrop.useDismiss(floatingRootContext, {
+    enabled: !readOnly && !disabled && !inline,
+    outsidePressEvent: {
+      mouse: 'sloppy',
+      // The visual viewport (affected by the mobile software keyboard) can be
+      // somewhat small. The user may want to scroll the screen to see more of
+      // the popup.
+      touch: 'intentional'
+    },
+    // Without a popup, let the Escape key bubble the event up to other popups' handlers.
+    bubbles: inline ? true : undefined,
+    outsidePress(event) {
+      const target = useButton.getTarget(event);
+      return !useButton.contains(triggerElement, target) && !useButton.contains(clearRef.current, target) && !useButton.contains(chipsContainerRef.current, target) && !useButton.contains(inputGroupElement, target);
+    }
+  });
+  const listNavigation = useCompositeListItem.useListNavigation(floatingRootContext, {
+    enabled: !readOnly && !disabled,
+    id,
+    listRef,
+    activeIndex,
+    selectedIndex,
+    virtual: true,
+    loopFocus,
+    allowEscape: loopFocus && !autoHighlightMode,
+    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,
+    disabledIndices: useRenderElement.EMPTY_ARRAY,
+    onNavigate(nextActiveIndex, event) {
+      // Retain the highlight only while actually transitioning out or closed.
+      if (!event && !open || transitionStatus === 'ending') {
+        return;
+      }
+      if (!event) {
+        setIndices({
+          activeIndex: nextActiveIndex
+        });
+      } else {
+        setIndices({
+          activeIndex: nextActiveIndex,
+          type: keyboardActiveRef.current ? 'keyboard' : 'pointer'
+        });
+      }
+    }
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps
+  } = InternalBackdrop.useInteractions([role, click, dismiss, listNavigation]);
+  InternalBackdrop.useOnFirstRender(() => {
+    store.update({
+      inline: inlineProp,
+      popupProps: getFloatingProps(),
+      inputProps: getReferenceProps(),
+      triggerProps,
+      getItemProps,
+      setOpen,
+      setInputValue,
+      setSelectedValue,
+      setIndices,
+      onItemHighlighted,
+      handleSelection,
+      forceMount,
+      requestSubmit
+    });
+  });
+  useButton.useIsoLayoutEffect(() => {
+    store.update({
+      id,
+      selectedValue,
+      open,
+      mounted,
+      transitionStatus,
+      items,
+      inline: inlineProp,
+      popupProps: getFloatingProps(),
+      inputProps: getReferenceProps(),
+      triggerProps,
+      openMethod,
+      getItemProps,
+      selectionMode,
+      name,
+      disabled,
+      readOnly,
+      required,
+      grid,
+      isGrouped,
+      virtualized,
+      onOpenChangeComplete,
+      openOnInputClick,
+      itemToStringLabel,
+      modal,
+      autoHighlight: autoHighlightMode,
+      isItemEqualToValue,
+      submitOnItemClick,
+      hasInputValue,
+      requestSubmit
+    });
+  }, [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]);
+  const hiddenInputRef = useRenderElement.useMergedRefs(inputRefProp, validation.inputRef);
+  const itemsContextValue = React__namespace.useMemo(() => ({
+    query,
+    hasItems,
+    filteredItems,
+    flatFilteredItems
+  }), [query, hasItems, filteredItems, flatFilteredItems]);
+  const serializedValue = React__namespace.useMemo(() => {
+    if (Array.isArray(fieldRawValue)) {
+      return '';
+    }
+    return stringifyAsValue(fieldRawValue, itemToStringValue);
+  }, [fieldRawValue, itemToStringValue]);
+  const hasMultipleSelection = multiple && Array.isArray(selectedValue) && selectedValue.length > 0;
+  const hiddenInputName = multiple || selectionMode === 'none' ? undefined : name;
+  const hiddenInputs = React__namespace.useMemo(() => {
+    if (!multiple || !Array.isArray(selectedValue) || !name) {
+      return null;
+    }
+    return selectedValue.map(value => {
+      const currentSerializedValue = stringifyAsValue(value, itemToStringValue);
+      return /*#__PURE__*/jsxRuntime.jsx("input", {
+        type: "hidden",
+        name: name,
+        value: currentSerializedValue
+      }, currentSerializedValue);
+    });
+  }, [multiple, selectedValue, name, itemToStringValue]);
+  const children = /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
+    children: [props.children, /*#__PURE__*/jsxRuntime.jsx("input", {
+      ...validation.getInputValidationProps({
+        // Move focus when the hidden input is focused.
+        onFocus() {
+          if (inputInsidePopup) {
+            triggerElement?.focus();
+            return;
+          }
+          (inputRef.current || triggerElement)?.focus();
+        },
+        // Handle browser autofill.
+        onChange(event) {
+          // Workaround for https://github.com/facebook/react/issues/9023
+          if (event.nativeEvent.defaultPrevented) {
+            return;
+          }
+          const nextValue = event.target.value;
+          const details = useButton.createChangeEventDetails(useButton.none, event.nativeEvent);
+          function handleChange() {
+            // Browser autofill only writes a single scalar value.
+            if (multiple) {
+              return;
+            }
+            if (selectionMode === 'none') {
+              setDirty(nextValue !== validityData.initialValue);
+              setInputValue(nextValue, details);
+              if (shouldValidateOnChange()) {
+                validation.commit(nextValue);
+              }
+              return;
+            }
+            const matchingValue = valuesRef.current.find(v => {
+              const candidate = stringifyAsValue(v, itemToStringValue);
+              if (candidate.toLowerCase() === nextValue.toLowerCase()) {
+                return true;
+              }
+              return false;
+            });
+            if (matchingValue != null) {
+              setDirty(matchingValue !== validityData.initialValue);
+              setSelectedValue?.(matchingValue, details);
+              if (shouldValidateOnChange()) {
+                validation.commit(matchingValue);
+              }
+            }
+          }
+          if (items) {
+            handleChange();
+          } else {
+            forceMount();
+            queueMicrotask(handleChange);
+          }
+        }
+      }),
+      id: id && hiddenInputName == null ? `${id}-hidden-input` : undefined,
+      name: hiddenInputName,
+      autoComplete: formAutoComplete,
+      disabled: disabled,
+      required: required && !hasMultipleSelection,
+      readOnly: readOnly,
+      value: serializedValue,
+      ref: hiddenInputRef,
+      style: hiddenInputName ? useButton.visuallyHiddenInput : useButton.visuallyHidden,
+      tabIndex: -1,
+      "aria-hidden": 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
+        })
+      })
+    })
+  });
+}
+
+const triggerStateAttributesMapping = {
+  ...InternalBackdrop.pressableTriggerOpenStateMapping,
+  ...useLabel.fieldValidityMapping,
+  popupSide: side => side ? {
+    'data-popup-side': side
+  } : null,
+  listEmpty: empty => empty ? {
+    'data-list-empty': ''
+  } : null
+};
+
+function getDefaultLabelId(id) {
+  return id == null ? undefined : `${id}-label`;
+}
+function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
+  return fieldLabelId ?? localLabelId;
+}
+
+const BOUNDARY_OFFSET = 2;
+
+/**
+ * A button that opens the popup.
+ * Renders a `<button>` element.
+ */
+const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function ComboboxTrigger(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    nativeButton = true,
+    disabled: disabledProp = false,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    state: fieldState,
+    disabled: fieldDisabled,
+    setTouched,
+    setFocused,
+    validationMode,
+    validation
+  } = useLabel.useFieldRootContext();
+  const {
+    labelId: fieldLabelId
+  } = useLabel.useLabelableContext();
+  const store = useComboboxRootContext();
+  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 floatingRootContext = useComboboxFloatingContext();
+  const inputValue = useComboboxInputValueContext();
+  const focusTimeout = useButton.useTimeout();
+  const disabled = fieldDisabled || comboboxDisabled || disabledProp;
+  const listEmpty = filteredItems.length === 0;
+  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  useLabel.useLabelableId({
+    id: inputInsidePopup ? idProp : undefined
+  });
+  const id = inputInsidePopup ? idProp ?? rootId : idProp;
+  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, comboboxLabelId);
+  const currentPointerTypeRef = React__namespace.useRef('');
+  function trackPointerType(event) {
+    currentPointerTypeRef.current = event.pointerType;
+  }
+  const domReference = floatingRootContext.useState('domReferenceElement');
+
+  // Update the floating root context to use the trigger element when it differs from the current reference.
+  // This ensures useClick and useTypeahead attach handlers to the correct element.
+  React__namespace.useEffect(() => {
+    if (!inputInsidePopup) {
+      return;
+    }
+    if (triggerElement && triggerElement !== domReference) {
+      floatingRootContext.set('domReferenceElement', triggerElement);
+    }
+  }, [triggerElement, domReference, floatingRootContext, inputInsidePopup]);
+  const {
+    reference: triggerTypeaheadProps
+  } = useCompositeListItem.useTypeahead(floatingRootContext, {
+    enabled: !open && !readOnly && !comboboxDisabled && selectionMode === 'single',
+    listRef: store.state.labelsRef,
+    activeIndex,
+    selectedIndex,
+    onMatch(index) {
+      const nextSelectedValue = store.state.valuesRef.current[index];
+      if (nextSelectedValue !== undefined) {
+        store.state.setSelectedValue(nextSelectedValue, useButton.createChangeEventDetails('none'));
+      }
+    }
+  });
+  const {
+    reference: triggerClickProps
+  } = InternalBackdrop.useClick(floatingRootContext, {
+    enabled: !readOnly && !comboboxDisabled,
+    event: 'mousedown'
+  });
+  const {
+    buttonRef,
+    getButtonProps
+  } = useButton.useButton({
+    native: nativeButton,
+    disabled
+  });
+  const state = {
+    ...fieldState,
+    open,
+    disabled,
+    popupSide,
+    listEmpty,
+    placeholder: !hasSelectedValue
+  };
+  const setTriggerElement = useButton.useStableCallback(element => {
+    store.set('triggerElement', element);
+  });
+  const element = useRenderElement.useRenderElement('button', componentProps, {
+    ref: [forwardedRef, buttonRef, setTriggerElement],
+    state,
+    props: [triggerProps, triggerClickProps, triggerTypeaheadProps, {
+      id,
+      tabIndex: inputInsidePopup ? 0 : -1,
+      role: inputInsidePopup ? 'combobox' : undefined,
+      'aria-expanded': open ? 'true' : 'false',
+      'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
+      'aria-controls': open ? listElement?.id : undefined,
+      'aria-required': inputInsidePopup ? required || undefined : undefined,
+      'aria-labelledby': ariaLabelledBy,
+      onPointerDown: trackPointerType,
+      onPointerEnter: trackPointerType,
+      onFocus() {
+        setFocused(true);
+        if (disabled || readOnly) {
+          return;
+        }
+        focusTimeout.start(0, store.state.forceMount);
+      },
+      onBlur(event) {
+        // If focus is moving into the popup, don't count it as a blur.
+        if (useButton.contains(positionerElement, event.relatedTarget)) {
+          return;
+        }
+        setTouched(true);
+        setFocused(false);
+        if (validationMode === 'onBlur') {
+          const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
+          validation.commit(valueToValidate);
+        }
+      },
+      onMouseDown(event) {
+        if (disabled || readOnly) {
+          return;
+        }
+        if (!inputInsidePopup) {
+          floatingRootContext.set('domReferenceElement', event.currentTarget);
+        }
+
+        // Ensure items are registered for initial selection highlight.
+        store.state.forceMount();
+        if (currentPointerTypeRef.current !== 'touch') {
+          store.state.inputRef.current?.focus();
+          if (!inputInsidePopup) {
+            event.preventDefault();
+          }
+        }
+        if (open) {
+          return;
+        }
+        const doc = useButton.ownerDocument(event.currentTarget);
+        function handleMouseUp(mouseEvent) {
+          if (!triggerElement) {
+            return;
+          }
+          const mouseUpTarget = useButton.getTarget(mouseEvent);
+          const positioner = store.state.positionerElement;
+          const list = store.state.listElement;
+          if (useButton.contains(triggerElement, mouseUpTarget) || useButton.contains(positioner, mouseUpTarget) || useButton.contains(list, mouseUpTarget) || mouseUpTarget === triggerElement) {
+            return;
+          }
+          const bounds = useCompositeListItem.getPseudoElementBounds(triggerElement);
+          const withinHorizontal = mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET;
+          const withinVertical = mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET;
+          if (withinHorizontal && withinVertical) {
+            return;
+          }
+          store.state.setOpen(false, useButton.createChangeEventDetails('cancel-open', mouseEvent));
+        }
+        if (inputInsidePopup) {
+          doc.addEventListener('mouseup', handleMouseUp, {
+            once: true
+          });
+        }
+      },
+      onKeyDown(event) {
+        if (disabled || readOnly) {
+          return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+          useButton.stopEvent(event);
+          store.state.setOpen(true, useButton.createChangeEventDetails(useButton.listNavigation, event.nativeEvent));
+          store.state.inputRef.current?.focus();
+        }
+      }
+    }, validation ? validation.getValidationProps(elementProps) : elementProps, getButtonProps],
+    stateAttributesMapping: triggerStateAttributesMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ComboboxTrigger.displayName = "ComboboxTrigger";
+
+const ComboboxChipsContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ComboboxChipsContext.displayName = "ComboboxChipsContext";
+function useComboboxChipsContext() {
+  return React__namespace.useContext(ComboboxChipsContext);
+}
+
+const ComboboxPositionerContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ComboboxPositionerContext.displayName = "ComboboxPositionerContext";
+function useComboboxPositionerContext(optional) {
+  const context = React__namespace.useContext(ComboboxPositionerContext);
+  if (context === undefined && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Combobox.Popup> and <Combobox.Arrow> must be used within the <Combobox.Positioner> component' : useRenderElement.formatErrorMessage(21));
+  }
+  return context;
+}
+
+/**
+ * @internal
+ */
+const ComboboxInternalDismissButton = /*#__PURE__*/React__namespace.forwardRef(function ComboboxInternalDismissButton(_, forwardedRef) {
+  const store = useComboboxRootContext();
+  const {
+    buttonRef,
+    getButtonProps
+  } = useButton.useButton({
+    native: false
+  });
+  const mergedRef = useRenderElement.useMergedRefs(forwardedRef, buttonRef);
+  const handleDismiss = useButton.useStableCallback(event => {
+    store.state.setOpen(false, useButton.createChangeEventDetails(useButton.closePress, event.nativeEvent, event.currentTarget));
+  });
+  const dismissProps = getButtonProps({
+    onClick: handleDismiss
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: mergedRef,
+    ...dismissProps,
+    "aria-label": "Dismiss",
+    tabIndex: undefined,
+    style: useButton.visuallyHiddenInput
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxInternalDismissButton.displayName = "ComboboxInternalDismissButton";
+
+const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function ComboboxInput(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled: disabledProp = false,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    state: fieldState,
+    disabled: fieldDisabled,
+    setTouched,
+    setFocused,
+    validationMode,
+    validation
+  } = useLabel.useFieldRootContext();
+  const {
+    labelId: fieldLabelId
+  } = useLabel.useLabelableContext();
+  const comboboxChipsContext = useComboboxChipsContext();
+  const positioning = useComboboxPositionerContext(true);
+  const hasPositionerParent = Boolean(positioning);
+  const store = useComboboxRootContext();
+  const {
+    filteredItems
+  } = useComboboxDerivedItemsContext();
+  // `inputValue` can't be placed in the store.
+  // https://github.com/mui/base-ui/issues/2703
+  const inputValue = useComboboxInputValueContext();
+  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 autoHighlightEnabled = Boolean(autoHighlightMode);
+  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const disabled = fieldDisabled || comboboxDisabled || disabledProp;
+  const listEmpty = filteredItems.length === 0;
+  const isInsidePopup = hasPositionerParent || inline;
+  const focusManagerModal = !isInsidePopup || modal;
+  const id = useButton.useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
+  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, undefined);
+  const fieldStateForInput = hasPositionerParent ? useLabel.DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
+  const [composingValue, setComposingValue] = React__namespace.useState(null);
+  const isComposingRef = React__namespace.useRef(false);
+  const lastActiveIndexRef = React__namespace.useRef(null);
+  const shouldRestoreActiveIndexRef = React__namespace.useRef(false);
+  const setInputElement = useButton.useStableCallback(element => {
+    const nextIsInsidePopup = hasPositionerParent || store.state.inline;
+    if (nextIsInsidePopup && !store.state.hasInputValue) {
+      store.state.setInputValue('', useButton.createChangeEventDetails(useButton.none));
+    }
+    store.update({
+      inputElement: element,
+      inputInsidePopup: nextIsInsidePopup
+    });
+  });
+  const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(elementProps);
+  const state = {
+    ...fieldStateForInput,
+    open,
+    disabled,
+    readOnly,
+    popupSide,
+    listEmpty
+  };
+  function handleKeyDown(event) {
+    if (!comboboxChipsContext) {
+      return undefined;
+    }
+    let nextIndex;
+    const {
+      highlightedChipIndex
+    } = comboboxChipsContext;
+    if (highlightedChipIndex !== undefined) {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        if (highlightedChipIndex > 0) {
+          nextIndex = highlightedChipIndex - 1;
+        } else {
+          nextIndex = undefined;
+        }
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        if (highlightedChipIndex < selectedValue.length - 1) {
+          nextIndex = highlightedChipIndex + 1;
+        } else {
+          nextIndex = undefined;
+        }
+      } else if (event.key === 'Backspace' || event.key === 'Delete') {
+        event.preventDefault();
+        // Move highlight appropriately after removal.
+        const computedNextIndex = highlightedChipIndex >= selectedValue.length - 1 ? selectedValue.length - 2 : highlightedChipIndex;
+        // If the computed index is negative, treat it as no highlight.
+        nextIndex = computedNextIndex >= 0 ? computedNextIndex : undefined;
+        store.state.setIndices({
+          activeIndex: null,
+          selectedIndex: null,
+          type: 'keyboard'
+        });
+      }
+      return nextIndex;
+    }
+
+    // Handle navigation when no chip is highlighted
+    if (event.key === 'ArrowLeft' && (event.currentTarget.selectionStart ?? 0) === 0 && selectedValue.length > 0) {
+      event.preventDefault();
+      const lastChipIndex = Math.max(selectedValue.length - 1, 0);
+      nextIndex = lastChipIndex;
+    } else if (event.key === 'Backspace' && event.currentTarget.value === '' && selectedValue.length > 0) {
+      store.state.setIndices({
+        activeIndex: null,
+        selectedIndex: null,
+        type: 'keyboard'
+      });
+      event.preventDefault();
+    }
+    return nextIndex;
+  }
+  const element = useRenderElement.useRenderElement('input', componentProps, {
+    state,
+    ref: [forwardedRef, store.state.inputRef, setInputElement],
+    props: [inputProps, triggerProps, {
+      type: 'text',
+      value: componentProps.value ?? composingValue ?? inputValue,
+      'aria-readonly': readOnly || undefined,
+      'aria-required': required || undefined,
+      'aria-labelledby': ariaLabelledBy,
+      disabled,
+      readOnly,
+      required: selectionMode === 'none' ? required : undefined,
+      ...(selectionMode === 'none' && name && {
+        name
+      }),
+      id,
+      onFocus() {
+        setFocused(true);
+        if (!inline || !shouldRestoreActiveIndexRef.current) {
+          return;
+        }
+        shouldRestoreActiveIndexRef.current = false;
+        const nextActiveIndex = lastActiveIndexRef.current;
+        if (nextActiveIndex == null ||
+        // `valuesRef` can be sparse, so guard against restoring a removed slot.
+        !Object.hasOwn(store.state.valuesRef.current, nextActiveIndex)) {
+          return;
+        }
+        store.state.setIndices({
+          activeIndex: nextActiveIndex
+        });
+      },
+      onBlur() {
+        setTouched(true);
+        setFocused(false);
+        const activeIndex = store.state.activeIndex;
+        if (inline && activeIndex !== null && autoHighlightMode !== 'always') {
+          lastActiveIndexRef.current = activeIndex;
+          shouldRestoreActiveIndexRef.current = true;
+          store.state.setIndices({
+            activeIndex: null
+          });
+        }
+        if (validationMode === 'onBlur') {
+          const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
+          validation.commit(valueToValidate);
+        }
+      },
+      onCompositionStart(event) {
+        if (useButton.isAndroid) {
+          return;
+        }
+        isComposingRef.current = true;
+        setComposingValue(event.currentTarget.value);
+      },
+      onCompositionEnd(event) {
+        isComposingRef.current = false;
+        const next = event.currentTarget.value;
+        setComposingValue(null);
+        store.state.setInputValue(next, useButton.createChangeEventDetails(useButton.inputChange, event.nativeEvent));
+      },
+      onChange(event) {
+        // Autofill may not provide `inputType` (Chrome) or may report
+        // `insertReplacementText` (Firefox).
+        const inputType = event.nativeEvent.inputType;
+        const autofillLikeInput = !inputType || inputType === 'insertReplacementText';
+        const shouldOpenOnInput = isComposingRef.current || !autofillLikeInput;
+
+        // During IME composition, avoid propagating controlled updates to prevent
+        // filtering the options prematurely so `Empty` won't show incorrectly.
+        // We can't rely on this check for Android due to how it handles composition
+        // events with some keyboards (e.g. Samsung keyboard with predictive text on
+        // treats all text as always-composing).
+        // https://github.com/mui/base-ui/issues/2942
+        if (isComposingRef.current) {
+          const nextVal = event.currentTarget.value;
+          setComposingValue(nextVal);
+          if (nextVal === '' && !store.state.openOnInputClick && !store.state.inputInsidePopup) {
+            store.state.setOpen(false, useButton.createChangeEventDetails(useButton.inputClear, event.nativeEvent));
+          }
+          const trimmed = nextVal.trim();
+          const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
+          if (!readOnly && !disabled && trimmed) {
+            if (shouldOpenOnInput) {
+              store.state.setOpen(true, useButton.createChangeEventDetails(useButton.inputChange, event.nativeEvent));
+              if (!autoHighlightEnabled) {
+                store.state.setIndices({
+                  activeIndex: null,
+                  selectedIndex: null,
+                  type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
+                });
+              }
+            }
+          }
+          if (open && store.state.activeIndex !== null && !shouldMaintainHighlight) {
+            store.state.setIndices({
+              activeIndex: null,
+              selectedIndex: null,
+              type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
+            });
+          }
+          return;
+        }
+        store.state.setInputValue(event.currentTarget.value, useButton.createChangeEventDetails(useButton.inputChange, event.nativeEvent));
+        const empty = event.currentTarget.value === '';
+        const clearDetails = useButton.createChangeEventDetails(useButton.inputClear, event.nativeEvent);
+        if (empty && !store.state.inputInsidePopup) {
+          if (selectionMode === 'single') {
+            store.state.setSelectedValue(null, clearDetails);
+          }
+          if (!store.state.openOnInputClick) {
+            store.state.setOpen(false, clearDetails);
+          }
+        }
+        const trimmed = event.currentTarget.value.trim();
+        if (!readOnly && !disabled && trimmed) {
+          if (shouldOpenOnInput) {
+            store.state.setOpen(true, useButton.createChangeEventDetails(useButton.inputChange, event.nativeEvent));
+            // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
+            if (!autoHighlightEnabled) {
+              store.state.setIndices({
+                activeIndex: null,
+                selectedIndex: null,
+                type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
+              });
+            }
+          }
+        }
+
+        // When the user types, ensure the list resets its highlight so that
+        // virtual focus returns to the input (aria-activedescendant is
+        // cleared).
+        if (open && store.state.activeIndex !== null && !autoHighlightEnabled) {
+          store.state.setIndices({
+            activeIndex: null,
+            selectedIndex: null,
+            type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
+          });
+        }
+      },
+      onKeyDown(event) {
+        if (disabled || readOnly) {
+          return;
+        }
+        if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+          return;
+        }
+        store.state.keyboardActiveRef.current = true;
+        const input = event.currentTarget;
+        const scrollAmount = input.scrollWidth - input.clientWidth;
+        const isRTL = direction === 'rtl';
+        if (event.key === 'Home') {
+          useButton.stopEvent(event);
+          const cursor = useButton.isFirefox && 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;
+          input.setSelectionRange(cursor, cursor);
+          input.scrollLeft = isRTL ? -scrollAmount : scrollAmount;
+          return;
+        }
+        if (!mounted && event.key === 'Escape') {
+          const isClear = selectionMode === 'multiple' && Array.isArray(selectedValue) ? selectedValue.length === 0 : selectedValue === null;
+          const details = useButton.createChangeEventDetails(useButton.escapeKey, event.nativeEvent);
+          const value = selectionMode === 'multiple' ? [] : null;
+          store.state.setInputValue('', details);
+          store.state.setSelectedValue(value, details);
+          if (!isClear && !store.state.inline && !details.isPropagationAllowed) {
+            event.stopPropagation();
+          }
+          return;
+        }
+
+        // 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);
+          // If the removed item was also the active (highlighted) item, clear highlight
+          store.state.setIndices({
+            activeIndex: null,
+            selectedIndex: null,
+            type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
+          });
+          store.state.setSelectedValue(newValue, useButton.createChangeEventDetails(useButton.none, event.nativeEvent));
+          return;
+        }
+        const hadHighlightedChip = comboboxChipsContext?.highlightedChipIndex !== undefined;
+        const nextIndex = handleKeyDown(event);
+        comboboxChipsContext?.setHighlightedChipIndex(nextIndex);
+        if (nextIndex !== undefined) {
+          comboboxChipsContext?.chipsRef.current[nextIndex]?.focus();
+        } else if (hadHighlightedChip) {
+          store.state.inputRef.current?.focus();
+        }
+
+        // event.isComposing
+        if (event.which === 229) {
+          return;
+        }
+        if (event.key === 'Enter' && open) {
+          const activeIndex = store.state.activeIndex;
+          const nativeEvent = event.nativeEvent;
+          if (activeIndex === null) {
+            if (inline) {
+              return;
+            }
+
+            // Allow form submission when no item is highlighted.
+            store.state.setOpen(false, useButton.createChangeEventDetails(useButton.none, nativeEvent));
+            return;
+          }
+          useButton.stopEvent(event);
+          const listItem = store.state.listRef.current[activeIndex];
+          if (listItem) {
+            store.state.selectionEventRef.current = nativeEvent;
+            listItem.click();
+            store.state.selectionEventRef.current = null;
+          }
+        }
+      },
+      onPointerMove() {
+        store.state.keyboardActiveRef.current = false;
+      },
+      onPointerDown() {
+        store.state.keyboardActiveRef.current = false;
+      }
+    }, validationProps],
+    stateAttributesMapping: triggerStateAttributesMapping
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
+    children: [open && focusManagerModal && /*#__PURE__*/jsxRuntime.jsx(ComboboxInternalDismissButton, {
+      ref: store.state.startDismissRef
+    }), element]
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxInput.displayName = "ComboboxInput";
+
+/**
+ * A wrapper for the input and its associated controls.
+ * Renders a `<div>` element.
+ */
+const ComboboxInputGroup = /*#__PURE__*/React__namespace.forwardRef(function ComboboxInputGroup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    state: fieldState,
+    disabled: fieldDisabled
+  } = useLabel.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 popupSide = mounted && positionerElement ? popupSideValue : null;
+  const disabled = fieldDisabled || comboboxDisabled;
+  const listEmpty = filteredItems.length === 0;
+  const placeholder = selectionMode === 'none' ? false : !hasSelectedValue;
+  const state = {
+    ...fieldState,
+    open,
+    disabled,
+    readOnly,
+    popupSide,
+    listEmpty,
+    placeholder
+  };
+  const setInputGroupElement = useButton.useStableCallback(element => {
+    store.set('inputGroupElement', element);
+  });
+  return useRenderElement.useRenderElement('div', componentProps, {
+    ref: [forwardedRef, setInputGroupElement],
+    props: [{
+      role: 'group'
+    }, elementProps],
+    state,
+    stateAttributesMapping: triggerStateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxInputGroup.displayName = "ComboboxInputGroup";
+
+/**
+ * An icon that indicates that the trigger button opens the popup.
+ * Renders a `<span>` element.
+ */
+const ComboboxIcon = /*#__PURE__*/React__namespace.forwardRef(function ComboboxIcon(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const element = useRenderElement.useRenderElement('span', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      'aria-hidden': true,
+      children: '▼'
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ComboboxIcon.displayName = "ComboboxIcon";
+
+const stateAttributesMapping$2 = {
+  ...useButton.transitionStatusMapping,
+  ...InternalBackdrop.triggerOpenStateMapping
+};
+
+/**
+ * Clears the value when clicked.
+ * Renders a `<button>` element.
+ */
+const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function ComboboxClear(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled: disabledProp = false,
+    nativeButton = true,
+    keepMounted = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    disabled: fieldDisabled
+  } = useLabel.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 inputValue = useComboboxInputValueContext();
+  let visible = false;
+  if (selectionMode === 'none') {
+    visible = inputValue !== '';
+  } else if (selectionMode === 'single') {
+    visible = selectedValue != null;
+  } else {
+    visible = hasSelectionChips;
+  }
+  const disabled = fieldDisabled || comboboxDisabled || disabledProp;
+  const {
+    buttonRef,
+    getButtonProps
+  } = useButton.useButton({
+    native: nativeButton,
+    disabled
+  });
+  const {
+    mounted,
+    transitionStatus,
+    setMounted
+  } = useButton.useTransitionStatus(visible);
+  const state = {
+    disabled,
+    open,
+    transitionStatus
+  };
+  useButton.useOpenChangeComplete({
+    open: visible,
+    ref: store.state.clearRef,
+    onComplete() {
+      if (!visible) {
+        setMounted(false);
+      }
+    }
+  });
+  const element = useRenderElement.useRenderElement('button', componentProps, {
+    state,
+    ref: [forwardedRef, buttonRef, store.state.clearRef],
+    props: [{
+      tabIndex: -1,
+      children: 'x',
+      // Avoid stealing focus from the input.
+      onMouseDown(event) {
+        event.preventDefault();
+      },
+      onClick(event) {
+        if (disabled || readOnly) {
+          return;
+        }
+        const keyboardActiveRef = store.state.keyboardActiveRef;
+        store.state.setInputValue('', useButton.createChangeEventDetails(useButton.clearPress, event.nativeEvent));
+        if (selectionMode !== 'none') {
+          store.state.setSelectedValue(Array.isArray(selectedValue) ? [] : null, useButton.createChangeEventDetails(useButton.clearPress, event.nativeEvent));
+          store.state.setIndices({
+            activeIndex: null,
+            selectedIndex: null,
+            type: keyboardActiveRef.current ? 'keyboard' : 'pointer'
+          });
+        } else {
+          store.state.setIndices({
+            activeIndex: null,
+            type: keyboardActiveRef.current ? 'keyboard' : 'pointer'
+          });
+        }
+        store.state.inputRef.current?.focus();
+      }
+    }, elementProps, getButtonProps],
+    stateAttributesMapping: stateAttributesMapping$2
+  });
+  const shouldRender = keepMounted || mounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ComboboxClear.displayName = "ComboboxClear";
+
+const GroupCollectionContext = /*#__PURE__*/React__namespace.createContext(null);
+if (process.env.NODE_ENV !== "production") GroupCollectionContext.displayName = "GroupCollectionContext";
+function useGroupCollectionContext() {
+  return React__namespace.useContext(GroupCollectionContext);
+}
+function GroupCollectionProvider(props) {
+  const {
+    children,
+    items
+  } = props;
+  const contextValue = React__namespace.useMemo(() => ({
+    items
+  }), [items]);
+  return /*#__PURE__*/jsxRuntime.jsx(GroupCollectionContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+
+function ComboboxCollection(props) {
+  const {
+    children
+  } = props;
+  const {
+    filteredItems
+  } = useComboboxDerivedItemsContext();
+  const groupContext = useGroupCollectionContext();
+  const itemsToRender = groupContext ? groupContext.items : filteredItems;
+  if (!itemsToRender) {
+    return null;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(React__namespace.Fragment, {
+    children: itemsToRender.map(children)
+  });
+}
+
+const ComboboxList = /*#__PURE__*/React__namespace.forwardRef(function ComboboxList(componentProps, forwardedRef) {
+  var _ComboboxCollection;
+  const {
+    render,
+    className,
+    children,
+    ...elementProps
+  } = componentProps;
+  const store = useComboboxRootContext();
+  const floatingRootContext = useComboboxFloatingContext();
+  const hasPositionerContext = Boolean(useComboboxPositionerContext(true));
+  const {
+    filteredItems
+  } = 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 multiple = selectionMode === 'multiple';
+  const empty = filteredItems.length === 0;
+  const setPositionerElement = useButton.useStableCallback(element => {
+    store.set('positionerElement', element);
+  });
+  const setListElement = useButton.useStableCallback(element => {
+    store.set('listElement', element);
+  });
+
+  // Support "closed template" API: if children is a function, implicitly wrap it
+  // with a Combobox.Collection that reads items from context/root.
+  // Ensures this component's `popupProps` subscription does not cause <Combobox.Item>
+  // to re-render on every active index change.
+  const resolvedChildren = React__namespace.useMemo(() => {
+    if (typeof children === 'function') {
+      return _ComboboxCollection || (_ComboboxCollection = /*#__PURE__*/jsxRuntime.jsx(ComboboxCollection, {
+        children: children
+      }));
+    }
+    return children;
+  }, [children]);
+  const state = {
+    empty
+  };
+  const floatingId = floatingRootContext.useState('floatingId');
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    state,
+    ref: [forwardedRef, setListElement, hasPositionerContext ? null : setPositionerElement],
+    props: [popupProps, {
+      children: resolvedChildren,
+      tabIndex: -1,
+      id: floatingId,
+      role: grid ? 'grid' : 'listbox',
+      'aria-multiselectable': multiple ? 'true' : undefined,
+      onKeyDown(event) {
+        if (disabled || readOnly) {
+          return;
+        }
+        if (event.key === 'Enter') {
+          const activeIndex = store.state.activeIndex;
+          if (activeIndex == null) {
+            // Allow form submission when no item is highlighted.
+            return;
+          }
+          useButton.stopEvent(event);
+          const nativeEvent = event.nativeEvent;
+          const listItem = store.state.listRef.current[activeIndex];
+          if (listItem) {
+            store.state.selectionEventRef.current = nativeEvent;
+            listItem.click();
+            store.state.selectionEventRef.current = null;
+          }
+        }
+      },
+      onKeyDownCapture() {
+        store.state.keyboardActiveRef.current = true;
+      },
+      onPointerMoveCapture() {
+        store.state.keyboardActiveRef.current = false;
+      }
+    }, elementProps]
+  });
+  if (virtualized) {
+    return element;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(useCompositeListItem.CompositeList, {
+    elementsRef: listRef,
+    labelsRef: items ? undefined : labelsRef,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxList.displayName = "ComboboxList";
+
+/**
+ * Displays a status message whose content changes are announced politely to screen readers.
+ * Useful for conveying the status of an asynchronously loaded list.
+ * Renders a `<div>` element.
+ */
+const ComboboxStatus = /*#__PURE__*/React__namespace.forwardRef(function ComboboxStatus(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  return useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      role: 'status',
+      'aria-live': 'polite',
+      'aria-atomic': true
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxStatus.displayName = "ComboboxStatus";
+
+const ComboboxPortalContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ComboboxPortalContext.displayName = "ComboboxPortalContext";
+function useComboboxPortalContext() {
+  const context = React__namespace.useContext(ComboboxPortalContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Combobox.Portal> is missing.' : useRenderElement.formatErrorMessage(20));
+  }
+  return context;
+}
+
+const ComboboxPortal = /*#__PURE__*/React__namespace.forwardRef(function ComboboxPortal(props, forwardedRef) {
+  const {
+    keepMounted = false,
+    ...portalProps
+  } = props;
+  const store = useComboboxRootContext();
+  const mounted = InternalBackdrop.useStore(store, selectors.mounted);
+  const forceMounted = InternalBackdrop.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, {
+      ref: forwardedRef,
+      ...portalProps
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxPortal.displayName = "ComboboxPortal";
+
+const stateAttributesMapping$1 = {
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.transitionStatusMapping
+};
+
+/**
+ * An overlay displayed beneath the popup.
+ * Renders a `<div>` element.
+ */
+const ComboboxBackdrop = /*#__PURE__*/React__namespace.forwardRef(function ComboboxBackdrop(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...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 state = {
+    open,
+    transitionStatus
+  };
+  return useRenderElement.useRenderElement('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    stateAttributesMapping: stateAttributesMapping$1,
+    props: [{
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        userSelect: 'none',
+        WebkitUserSelect: 'none'
+      }
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxBackdrop.displayName = "ComboboxBackdrop";
+
+const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function ComboboxPositioner(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    anchor,
+    positionMethod = 'absolute',
+    side = 'bottom',
+    align = 'center',
+    sideOffset = 0,
+    alignOffset = 0,
+    collisionBoundary = 'clipping-ancestors',
+    collisionPadding = 5,
+    arrowPadding = 5,
+    sticky = false,
+    disableAnchorTracking = false,
+    collisionAvoidance = InternalBackdrop.DROPDOWN_COLLISION_AVOIDANCE,
+    ...elementProps
+  } = componentProps;
+  const store = useComboboxRootContext();
+  const {
+    filteredItems
+  } = 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 empty = filteredItems.length === 0;
+  const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputGroupElement ?? inputElement);
+  const positioning = useCompositeListItem.useAnchorPositioning({
+    anchor: resolvedAnchor,
+    floatingRootContext,
+    positionMethod,
+    mounted,
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    arrowPadding,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    disableAnchorTracking,
+    keepMounted,
+    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]);
+  const state = {
+    open,
+    side: positioning.side,
+    align: positioning.align,
+    anchorHidden: positioning.anchorHidden,
+    empty
+  };
+  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
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(ComboboxPositionerContext.Provider, {
+    value: contextValue,
+    children: [mounted && modal && /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.InternalBackdrop, {
+      inert: InternalBackdrop.inertValue(!open),
+      cutout: inputGroupElement ?? inputElement ?? triggerElement
+    }), element]
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxPositioner.displayName = "ComboboxPositioner";
+
+const stateAttributesMapping = {
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.transitionStatusMapping
+};
+
+/**
+ * A container for the list.
+ * Renders a `<div>` element.
+ */
+const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function ComboboxPopup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    initialFocus,
+    finalFocus,
+    ...elementProps
+  } = componentProps;
+  const store = useComboboxRootContext();
+  const positioning = useComboboxPositionerContext();
+  const floatingRootContext = useComboboxFloatingContext();
+  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 empty = filteredItems.length === 0;
+  useButton.useOpenChangeComplete({
+    open,
+    ref: store.state.popupRef,
+    onComplete() {
+      if (open) {
+        store.state.onOpenChangeComplete(true);
+      }
+    }
+  });
+  const state = {
+    open,
+    side: positioning.side,
+    align: positioning.align,
+    anchorHidden: positioning.anchorHidden,
+    transitionStatus,
+    empty
+  };
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    state,
+    ref: [forwardedRef, store.state.popupRef],
+    props: [{
+      role: inputInsidePopup ? 'dialog' : 'presentation',
+      tabIndex: -1,
+      onFocus(event) {
+        const target = useButton.getTarget(event.nativeEvent);
+        if (openMethod !== 'touch' && (useButton.contains(store.state.listElement, target) || target === event.currentTarget)) {
+          store.state.inputRef.current?.focus();
+        }
+      }
+    }, useCompositeListItem.getDisabledMountTransitionStyles(transitionStatus), elementProps],
+    stateAttributesMapping
+  });
+
+  // Default initial focus logic:
+  // If opened by touch, focus the popup element to prevent the virtual keyboard from opening
+  // (this is required for Android specifically as iOS handles this automatically).
+  const computedDefaultInitialFocus = inputInsidePopup ? interactionType => interactionType === 'touch' ? store.state.popupRef.current : inputElement : false;
+  const resolvedInitialFocus = initialFocus === undefined ? computedDefaultInitialFocus : initialFocus;
+  let resolvedFinalFocus;
+  if (finalFocus != null) {
+    resolvedFinalFocus = finalFocus;
+  } else {
+    resolvedFinalFocus = inputInsidePopup ? undefined : false;
+  }
+  const focusManagerModal = !inputInsidePopup || modal;
+  return /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingFocusManager, {
+    context: floatingRootContext,
+    disabled: !mounted,
+    modal: focusManagerModal,
+    openInteractionType: openMethod,
+    initialFocus: resolvedInitialFocus,
+    returnFocus: resolvedFinalFocus,
+    getInsideElements: () => [store.state.startDismissRef.current, store.state.endDismissRef.current],
+    children: /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
+      children: [element, focusManagerModal && /*#__PURE__*/jsxRuntime.jsx(ComboboxInternalDismissButton, {
+        ref: store.state.endDismissRef
+      })]
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxPopup.displayName = "ComboboxPopup";
+
+/**
+ * Displays an element positioned against the anchor.
+ * Renders a `<div>` element.
+ */
+const ComboboxArrow = /*#__PURE__*/React__namespace.forwardRef(function ComboboxArrow(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const store = useComboboxRootContext();
+  const {
+    arrowRef,
+    side,
+    align,
+    arrowUncentered,
+    arrowStyles
+  } = useComboboxPositionerContext();
+  const open = InternalBackdrop.useStore(store, selectors.open);
+  const state = {
+    open,
+    side,
+    align,
+    uncentered: arrowUncentered
+  };
+  return useRenderElement.useRenderElement('div', componentProps, {
+    ref: [arrowRef, forwardedRef],
+    stateAttributesMapping: InternalBackdrop.popupStateMapping,
+    state,
+    props: {
+      style: arrowStyles,
+      'aria-hidden': true,
+      ...elementProps
+    }
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxArrow.displayName = "ComboboxArrow";
+
+const ComboboxGroupContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ComboboxGroupContext.displayName = "ComboboxGroupContext";
+function useComboboxGroupContext() {
+  const context = React__namespace.useContext(ComboboxGroupContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ComboboxGroupContext is missing. ComboboxGroup parts must be placed within <Combobox.Group>.' : useRenderElement.formatErrorMessage(18));
+  }
+  return context;
+}
+
+const ComboboxGroup = /*#__PURE__*/React__namespace.forwardRef(function ComboboxGroup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    items,
+    ...elementProps
+  } = componentProps;
+  const [labelId, setLabelId] = React__namespace.useState();
+  const contextValue = React__namespace.useMemo(() => ({
+    labelId,
+    setLabelId,
+    items
+  }), [labelId, setLabelId, items]);
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      role: 'group',
+      'aria-labelledby': labelId
+    }, elementProps]
+  });
+  const wrappedElement = /*#__PURE__*/jsxRuntime.jsx(ComboboxGroupContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+  if (items) {
+    return /*#__PURE__*/jsxRuntime.jsx(GroupCollectionProvider, {
+      items: items,
+      children: wrappedElement
+    });
+  }
+  return wrappedElement;
+});
+if (process.env.NODE_ENV !== "production") ComboboxGroup.displayName = "ComboboxGroup";
+
+/**
+ * An accessible label that is automatically associated with its parent group.
+ * Renders a `<div>` element.
+ */
+const ComboboxGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function ComboboxGroupLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    setLabelId
+  } = useComboboxGroupContext();
+  const id = useButton.useBaseUiId(idProp);
+  useButton.useIsoLayoutEffect(() => {
+    setLabelId(id);
+    return () => {
+      setLabelId(undefined);
+    };
+  }, [id, setLabelId]);
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      id
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ComboboxGroupLabel.displayName = "ComboboxGroupLabel";
+
+const ComboboxItemContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ComboboxItemContext.displayName = "ComboboxItemContext";
+function useComboboxItemContext() {
+  const context = React__namespace.useContext(ComboboxItemContext);
+  if (!context) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ComboboxItemContext is missing. ComboboxItem parts must be placed within <Combobox.Item>.' : useRenderElement.formatErrorMessage(19));
+  }
+  return context;
+}
+
+const ComboboxRowContext = /*#__PURE__*/React__namespace.createContext(false);
+if (process.env.NODE_ENV !== "production") ComboboxRowContext.displayName = "ComboboxRowContext";
+function useComboboxRowContext() {
+  return React__namespace.useContext(ComboboxRowContext);
+}
+
+const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function ComboboxItem(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    value: itemValue = null,
+    index: indexProp,
+    disabled = false,
+    nativeButton = false,
+    ...elementProps
+  } = componentProps;
+  const didPointerDownRef = React__namespace.useRef(false);
+  const textRef = React__namespace.useRef(null);
+  const listItem = useCompositeListItem.useCompositeListItem({
+    index: indexProp,
+    textRef,
+    indexGuessBehavior: useCompositeListItem.IndexGuessBehavior.GuessFromOrder
+  });
+  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 selectable = selectionMode !== 'none';
+  const index = indexProp ?? (virtualized ? findItemIndex(flatFilteredItems, itemValue, isItemEqualToValue) : 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 itemRef = React__namespace.useRef(null);
+  const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
+  const selected = matchesSelectedValue && selectable;
+  useButton.useIsoLayoutEffect(() => {
+    const shouldRun = hasRegistered && (virtualized || indexProp != null);
+    if (!shouldRun) {
+      return undefined;
+    }
+    const list = store.state.listRef.current;
+    list[index] = itemRef.current;
+    return () => {
+      delete list[index];
+    };
+  }, [hasRegistered, virtualized, index, indexProp, store]);
+  useButton.useIsoLayoutEffect(() => {
+    if (!hasRegistered || hasItems) {
+      return undefined;
+    }
+    const visibleMap = store.state.valuesRef.current;
+    visibleMap[index] = itemValue;
+
+    // Stable registry that doesn't depend on filtering. Assume that no
+    // filtering had occurred at this point; otherwise, an `items` prop is
+    // required.
+    if (selectionMode !== 'none') {
+      store.state.allValuesRef.current.push(itemValue);
+    }
+    return () => {
+      delete visibleMap[index];
+    };
+  }, [hasRegistered, hasItems, index, itemValue, store, selectionMode]);
+  useButton.useIsoLayoutEffect(() => {
+    if (!open) {
+      didPointerDownRef.current = false;
+      return;
+    }
+    if (!hasRegistered || hasItems) {
+      return;
+    }
+    const selectedValue = store.state.selectedValue;
+    const lastSelectedValue = Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue;
+    if (compareItemEquality(itemValue, lastSelectedValue, isItemEqualToValue)) {
+      store.set('selectedIndex', index);
+    }
+  }, [hasRegistered, hasItems, open, store, index, itemValue, isItemEqualToValue]);
+  const state = {
+    disabled,
+    selected,
+    highlighted
+  };
+  const rootProps = getItemProps({
+    active: highlighted,
+    selected
+  });
+  rootProps.id = undefined;
+  rootProps.onFocus = undefined;
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton.useButton({
+    disabled,
+    focusableWhenDisabled: true,
+    native: nativeButton,
+    composite: true
+  });
+  function commitSelection(nativeEvent) {
+    function selectItem() {
+      store.state.handleSelection(nativeEvent, itemValue);
+    }
+    if (store.state.submitOnItemClick) {
+      ReactDOM__namespace.flushSync(selectItem);
+      store.state.requestSubmit();
+    } else {
+      selectItem();
+    }
+  }
+  const defaultProps = {
+    id,
+    role: isRow ? 'gridcell' : 'option',
+    'aria-selected': selectable ? selected : undefined,
+    // Focusable items steal focus from the input upon mouseup.
+    // Warn if the user renders a natively focusable element like `<button>`,
+    // as it should be a `<div>` instead.
+    tabIndex: undefined,
+    onPointerDownCapture(event) {
+      didPointerDownRef.current = true;
+      event.preventDefault();
+    },
+    onClick(event) {
+      if (disabled || readOnly) {
+        return;
+      }
+      commitSelection(event.nativeEvent);
+    },
+    onMouseUp(event) {
+      const pointerStartedOnItem = didPointerDownRef.current;
+      didPointerDownRef.current = false;
+      if (disabled || readOnly || event.button !== 0 || pointerStartedOnItem || !highlighted) {
+        return;
+      }
+      commitSelection(event.nativeEvent);
+    }
+  };
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: [buttonRef, forwardedRef, listItem.ref, itemRef],
+    state,
+    props: [rootProps, defaultProps, elementProps, getButtonProps]
+  });
+  const contextValue = React__namespace.useMemo(() => ({
+    selected,
+    textRef
+  }), [selected, textRef]);
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxItemContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+}));
+if (process.env.NODE_ENV !== "production") ComboboxItem.displayName = "ComboboxItem";
+
+const ComboboxRow = /*#__PURE__*/React__namespace.forwardRef(function ComboboxRow(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      role: 'row'
+    }, elementProps]
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxRowContext.Provider, {
+    value: true,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxRow.displayName = "ComboboxRow";
+
+/**
+ * Renders its children only when the list is empty.
+ * Requires the `items` prop on the root component.
+ * Announces changes politely to screen readers.
+ * Renders a `<div>` element.
+ */
+const ComboboxEmpty = /*#__PURE__*/React__namespace.forwardRef(function ComboboxEmpty(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    children: childrenProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    filteredItems
+  } = useComboboxDerivedItemsContext();
+  const store = useComboboxRootContext();
+  const children = filteredItems.length === 0 ? childrenProp : null;
+  return useRenderElement.useRenderElement('div', componentProps, {
+    ref: [forwardedRef, store.state.emptyRef],
+    props: [{
+      children,
+      role: 'status',
+      'aria-live': 'polite',
+      'aria-atomic': true
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxEmpty.displayName = "ComboboxEmpty";
+
+/**
+ * Returns the internally filtered items.
+ */
+function useFilteredItems() {
+  const items = useComboboxDerivedItemsContext();
+  return items.filteredItems;
+}
+
+function ComboboxRoot(props) {
+  const {
+    multiple = false,
+    defaultValue,
+    value,
+    onValueChange,
+    autoComplete,
+    ...other
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(AriaCombobox, {
+    ...other,
+    selectionMode: multiple ? 'multiple' : 'single',
+    selectedValue: value,
+    defaultSelectedValue: defaultValue,
+    onSelectedValueChange: onValueChange,
+    formAutoComplete: autoComplete
+  });
+}
+
+/**
+ * An accessible label that is automatically associated with the combobox trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ */
+const ComboboxLabel = /*#__PURE__*/React__namespace.forwardRef(function ComboboxLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
+  const elementPropsWithoutId = elementProps;
+  delete elementPropsWithoutId.id;
+  const fieldRootContext = useLabel.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 defaultLabelId = getDefaultLabelId(rootId);
+  const localControlId = triggerElement?.id ?? (inputInsidePopup ? rootId : undefined);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React__namespace.useEffect(() => {
+      if (!inputElement || inputInsidePopup) {
+        return;
+      }
+      const ownerStackMessage = useButton.SafeReact.captureOwnerStack?.() || '';
+      const message = '<Combobox.Label> labels <Combobox.Trigger> only. ' + 'When <Combobox.Input> is the form control, use a native <label> or <Field.Label> instead.';
+      useButton.error(`${message}${ownerStackMessage}`);
+    }, [inputElement, inputInsidePopup]);
+  }
+  const labelProps = useLabel.useLabel({
+    id: defaultLabelId,
+    fallbackControlId: localControlId,
+    setLabelId(nextLabelId) {
+      store.set('labelId', nextLabelId);
+    }
+  });
+  return useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: useLabel.fieldValidityMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxLabel.displayName = "ComboboxLabel";
+
+function ComboboxValue(props) {
+  const {
+    children: childrenProp,
+    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 shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
+  const hasNullLabel = InternalBackdrop.useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
+  let children = null;
+  if (typeof childrenProp === 'function') {
+    children = childrenProp(selectedValue);
+  } else if (childrenProp != null) {
+    children = childrenProp;
+  } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
+    children = placeholder;
+  } else if (multiple && Array.isArray(selectedValue)) {
+    children = resolveMultipleLabels(selectedValue, items, itemToStringLabel);
+  } else {
+    children = resolveSelectedLabel(selectedValue, items, itemToStringLabel);
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(React__namespace.Fragment, {
+    children: children
+  });
+}
+
+const ComboboxItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function ComboboxItemIndicator(componentProps, forwardedRef) {
+  const keepMounted = componentProps.keepMounted ?? false;
+  const {
+    selected
+  } = useComboboxItemContext();
+  const shouldRender = keepMounted || selected;
+  if (!shouldRender) {
+    return null;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+  return /*#__PURE__*/jsxRuntime.jsx(Inner, {
+    ...componentProps,
+    ref: forwardedRef
+  });
+});
+
+/** The core implementation of the indicator is split here to avoid paying the hooks
+ * costs unless the element needs to be mounted. */
+if (process.env.NODE_ENV !== "production") ComboboxItemIndicator.displayName = "ComboboxItemIndicator";
+const Inner = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef((componentProps, forwardedRef) => {
+  const {
+    render,
+    className,
+    keepMounted,
+    ...elementProps
+  } = componentProps;
+  const {
+    selected
+  } = useComboboxItemContext();
+  const indicatorRef = React__namespace.useRef(null);
+  const {
+    transitionStatus,
+    setMounted
+  } = useButton.useTransitionStatus(selected);
+  const state = {
+    selected,
+    transitionStatus
+  };
+  const element = useRenderElement.useRenderElement('span', componentProps, {
+    ref: [forwardedRef, indicatorRef],
+    state,
+    props: [{
+      'aria-hidden': true,
+      children: '✔️'
+    }, elementProps],
+    stateAttributesMapping: useButton.transitionStatusMapping
+  });
+  useButton.useOpenChangeComplete({
+    open: selected,
+    ref: indicatorRef,
+    onComplete() {
+      if (!selected) {
+        setMounted(false);
+      }
+    }
+  });
+  return element;
+}));
+if (process.env.NODE_ENV !== "production") Inner.displayName = "Inner";
+
+const ComboboxChips = /*#__PURE__*/React__namespace.forwardRef(function ComboboxChips(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const store = useComboboxRootContext();
+  const open = InternalBackdrop.useStore(store, selectors.open);
+  const hasSelectionChips = InternalBackdrop.useStore(store, selectors.hasSelectionChips);
+  const [highlightedChipIndex, setHighlightedChipIndex] = React__namespace.useState(undefined);
+  if (open && highlightedChipIndex !== undefined) {
+    setHighlightedChipIndex(undefined);
+  }
+  const chipsRef = React__namespace.useRef([]);
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: [forwardedRef, store.state.chipsContainerRef],
+    // NVDA enters browse mode instead of staying in focus mode when navigating with
+    // arrow keys inside a container unless it has a toolbar role.
+    props: [hasSelectionChips ? {
+      role: 'toolbar'
+    } : useRenderElement.EMPTY_OBJECT, elementProps]
+  });
+  const contextValue = React__namespace.useMemo(() => ({
+    highlightedChipIndex,
+    setHighlightedChipIndex,
+    chipsRef
+  }), [highlightedChipIndex, setHighlightedChipIndex, chipsRef]);
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxChipsContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/jsxRuntime.jsx(useCompositeListItem.CompositeList, {
+      elementsRef: chipsRef,
+      children: element
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxChips.displayName = "ComboboxChips";
+
+const ComboboxChipContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ComboboxChipContext.displayName = "ComboboxChipContext";
+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));
+  }
+  return context;
+}
+
+const ComboboxChip = /*#__PURE__*/React__namespace.forwardRef(function ComboboxChip(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const store = useComboboxRootContext();
+  const {
+    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 {
+    ref,
+    index
+  } = useCompositeListItem.useCompositeListItem();
+  function handleKeyDown(event) {
+    let nextIndex = index;
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      if (index > 0) {
+        nextIndex = index - 1;
+      } else {
+        nextIndex = undefined;
+      }
+    } else if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      if (index < selectedValue.length - 1) {
+        nextIndex = index + 1;
+      } else {
+        nextIndex = undefined;
+      }
+    } else if (event.key === 'Backspace' || event.key === 'Delete') {
+      const computedNextIndex = index >= selectedValue.length - 1 ? selectedValue.length - 2 : index;
+      nextIndex = computedNextIndex >= 0 ? computedNextIndex : undefined;
+      useButton.stopEvent(event);
+      store.state.setIndices({
+        activeIndex: null,
+        selectedIndex: null,
+        type: 'keyboard'
+      });
+      store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), useButton.createChangeEventDetails(useButton.none, event.nativeEvent));
+    } else if (event.key === 'Enter' || event.key === ' ') {
+      useButton.stopEvent(event);
+      nextIndex = undefined;
+    } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      useButton.stopEvent(event);
+      store.state.setOpen(true, useButton.createChangeEventDetails(useButton.listNavigation, event.nativeEvent));
+      nextIndex = undefined;
+    } else if (
+    // Check for printable characters (letters, numbers, symbols)
+    event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      nextIndex = undefined;
+    }
+    return nextIndex;
+  }
+  const state = {
+    disabled
+  };
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: [forwardedRef, ref],
+    state,
+    props: [{
+      tabIndex: -1,
+      'aria-disabled': disabled || undefined,
+      'aria-readonly': readOnly || undefined,
+      onKeyDown(event) {
+        if (disabled || readOnly) {
+          return;
+        }
+        const nextIndex = handleKeyDown(event);
+        ReactDOM__namespace.flushSync(() => {
+          setHighlightedChipIndex(nextIndex);
+        });
+        if (nextIndex === undefined) {
+          store.state.inputRef.current?.focus();
+        } else {
+          chipsRef.current[nextIndex]?.focus();
+        }
+      },
+      onMouseDown(event) {
+        if (readOnly) {
+          return;
+        }
+        event.preventDefault();
+        if (disabled) {
+          return;
+        }
+        store.state.inputRef.current?.focus();
+      }
+    }, elementProps]
+  });
+  const contextValue = React__namespace.useMemo(() => ({
+    index
+  }), [index]);
+  return /*#__PURE__*/jsxRuntime.jsx(ComboboxChipContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxChip.displayName = "ComboboxChip";
+
+/**
+ * A button to remove a chip.
+ * Renders a `<button>` element.
+ */
+const ComboboxChipRemove = /*#__PURE__*/React__namespace.forwardRef(function ComboboxChipRemove(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled: disabledProp = false,
+    nativeButton = true,
+    ...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 disabled = comboboxDisabled || disabledProp;
+  const {
+    buttonRef,
+    getButtonProps
+  } = useButton.useButton({
+    native: nativeButton,
+    disabled: disabled || readOnly,
+    focusableWhenDisabled: true
+  });
+  const state = {
+    disabled
+  };
+  function clearActiveIndexForRemovedItem(removedItem) {
+    const activeIndex = store.state.activeIndex;
+    if (activeIndex == null) {
+      return;
+    }
+
+    // Try current visible list first; if not found, it's filtered out.
+    // No need to clear highlight in that case since it can't equal activeIndex.
+    const removedIndex = findItemIndex(store.state.valuesRef.current, removedItem, isItemEqualToValue);
+    if (removedIndex !== -1 && activeIndex === removedIndex) {
+      store.state.setIndices({
+        activeIndex: null,
+        type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
+      });
+    }
+  }
+  function removeChip(event) {
+    const eventDetails = useButton.createChangeEventDetails(useButton.chipRemovePress, event.nativeEvent);
+    const removedItem = selectedValue[index];
+    clearActiveIndexForRemovedItem(removedItem);
+    store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), eventDetails);
+    store.state.inputRef.current?.focus();
+    return eventDetails;
+  }
+  const element = useRenderElement.useRenderElement('button', componentProps, {
+    ref: [forwardedRef, buttonRef],
+    state,
+    props: [{
+      tabIndex: -1,
+      onClick(event) {
+        if (disabled || readOnly) {
+          return;
+        }
+        const eventDetails = removeChip(event);
+        if (!eventDetails.isPropagationAllowed) {
+          event.stopPropagation();
+        }
+      },
+      onKeyDown(event) {
+        if (disabled || readOnly) {
+          return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+          const eventDetails = removeChip(event);
+          if (!eventDetails.isPropagationAllowed) {
+            useButton.stopEvent(event);
+          }
+        }
+      }
+    }, elementProps, getButtonProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ComboboxChipRemove.displayName = "ComboboxChipRemove";
+
+exports.AriaCombobox = AriaCombobox;
+exports.ComboboxArrow = ComboboxArrow;
+exports.ComboboxBackdrop = ComboboxBackdrop;
+exports.ComboboxChip = ComboboxChip;
+exports.ComboboxChipRemove = ComboboxChipRemove;
+exports.ComboboxChips = ComboboxChips;
+exports.ComboboxClear = ComboboxClear;
+exports.ComboboxCollection = ComboboxCollection;
+exports.ComboboxEmpty = ComboboxEmpty;
+exports.ComboboxGroup = ComboboxGroup;
+exports.ComboboxGroupLabel = ComboboxGroupLabel;
+exports.ComboboxIcon = ComboboxIcon;
+exports.ComboboxInput = ComboboxInput;
+exports.ComboboxInputGroup = ComboboxInputGroup;
+exports.ComboboxItem = ComboboxItem;
+exports.ComboboxItemIndicator = ComboboxItemIndicator;
+exports.ComboboxLabel = ComboboxLabel;
+exports.ComboboxList = ComboboxList;
+exports.ComboboxPopup = ComboboxPopup;
+exports.ComboboxPortal = ComboboxPortal;
+exports.ComboboxPositioner = ComboboxPositioner;
+exports.ComboboxRoot = ComboboxRoot;
+exports.ComboboxRow = ComboboxRow;
+exports.ComboboxStatus = ComboboxStatus;
+exports.ComboboxTrigger = ComboboxTrigger;
+exports.ComboboxValue = ComboboxValue;
+exports.stringifyAsLabel = stringifyAsLabel;
+exports.useComboboxFilter = useComboboxFilter;
+exports.useComboboxInputValueContext = useComboboxInputValueContext;
+exports.useCoreFilter = useCoreFilter;
+exports.useFilteredItems = useFilteredItems;