@base-ui/react 1.3.0 → 1.4.0

package/esm/combobox/positioner/ComboboxPositioner.js

@@ -5,21 +5,21 @@ import { useStore } from '@base-ui/utils/store';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { inertValue } from '@base-ui/utils/inertValue';
-import { useScrollLock } from '@base-ui/utils/useScrollLock';
 import { useComboboxFloatingContext, useComboboxRootContext, useComboboxDerivedItemsContext } from "../root/ComboboxRootContext.js";
 import { ComboboxPositionerContext } from "./ComboboxPositionerContext.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
-import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useComboboxPortalContext } from "../portal/ComboboxPortalContext.js";
 import { DROPDOWN_COLLISION_AVOIDANCE } from "../../utils/constants.js";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
 import { selectors } from "../store.js";
 import { InternalBackdrop } from "../../utils/InternalBackdrop.js";
+import { usePositioner } from "../../utils/usePositioner.js";
+import { useAnchoredPopupScrollLock } from "../../utils/useAnchoredPopupScrollLock.js";
 
 /**
  * Positions the popup against the trigger.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositioner(componentProps, forwardedRef) {
@@ -38,6 +38,7 @@ export const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function Combobo
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = DROPDOWN_COLLISION_AVOIDANCE,
+    style: styleProp,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -50,6 +51,7 @@ export const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function Combobo
   const open = useStore(store, selectors.open);
   const mounted = useStore(store, selectors.mounted);
   const openMethod = useStore(store, selectors.openMethod);
+  const positionerElement = useStore(store, selectors.positionerElement);
   const triggerElement = useStore(store, selectors.triggerElement);
   const inputElement = useStore(store, selectors.inputElement);
   const inputGroupElement = useStore(store, selectors.inputGroupElement);
@@ -75,20 +77,7 @@ export const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function Combobo
     collisionAvoidance,
     lazyFlip: true
   });
-  useScrollLock(open && modal && openMethod !== 'touch', triggerElement);
-  const defaultProps = React.useMemo(() => {
-    const style = {
-      ...positioning.positionerStyles
-    };
-    if (!open) {
-      style.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style
-    };
-  }, [open, mounted, positioning.positionerStyles]);
+  useAnchoredPopupScrollLock(open && modal, openMethod === 'touch', positionerElement, triggerElement);
   const state = {
     open,
     side: positioning.side,
@@ -99,26 +88,19 @@ export const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function Combobo
   useIsoLayoutEffect(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
-  const contextValue = React.useMemo(() => ({
-    side: positioning.side,
-    align: positioning.align,
-    arrowRef: positioning.arrowRef,
-    arrowUncentered: positioning.arrowUncentered,
-    arrowStyles: positioning.arrowStyles,
-    anchorHidden: positioning.anchorHidden,
-    isPositioned: positioning.isPositioned
-  }), [positioning.side, positioning.align, positioning.arrowRef, positioning.arrowUncentered, positioning.arrowStyles, positioning.anchorHidden, positioning.isPositioned]);
   const setPositionerElement = useStableCallback(element => {
     store.set('positionerElement', element);
   });
-  const element = useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, setPositionerElement],
-    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: popupStateMapping
+  const element = usePositioner(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/_jsxs(ComboboxPositionerContext.Provider, {
-    value: contextValue,
+    value: positioning,
     children: [mounted && modal && /*#__PURE__*/_jsx(InternalBackdrop, {
       inert: inertValue(!open),
       cutout: inputGroupElement ?? inputElement ?? triggerElement

package/esm/combobox/positioner/ComboboxPositionerContext.d.ts

@@ -1,14 +1,6 @@
 import * as React from 'react';
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-export interface ComboboxPositionerContext {
-  side: Side;
-  align: Align;
-  arrowRef: React.RefObject<Element | null>;
-  arrowUncentered: boolean;
-  arrowStyles: React.CSSProperties;
-  anchorHidden: boolean;
-  isPositioned: boolean;
-}
+import type { UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.js";
+export type ComboboxPositionerContext = Pick<UseAnchorPositioningReturnValue, 'side' | 'align' | 'arrowRef' | 'arrowUncentered' | 'arrowStyles' | 'anchorHidden' | 'isPositioned'>;
 export declare const ComboboxPositionerContext: React.Context<ComboboxPositionerContext | undefined>;
 export declare function useComboboxPositionerContext(optional?: false): ComboboxPositionerContext;
 export declare function useComboboxPositionerContext(optional: true): ComboboxPositionerContext | undefined;

package/esm/combobox/root/AriaCombobox.d.ts

@@ -19,6 +19,11 @@ interface ComboboxRootProps<ItemValue> {
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the internal input.
+   * Useful when the combobox is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * The id of the component.
    */

package/esm/combobox/root/AriaCombobox.js

@@ -6,10 +6,10 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
+import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { Store, useStore } from '@base-ui/utils/store';
-import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useDismiss, useFloatingRootContext, useInteractions, useListNavigation, useClick } from "../../floating-ui-react/index.js";
 import { contains, getTarget } from "../../floating-ui-react/utils.js";
 import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
@@ -18,7 +18,7 @@ import { ComboboxFloatingContext, ComboboxDerivedItemsContext, ComboboxRootConte
 import { selectors } from "../store.js";
 import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { useField } from "../../field/useField.js";
+import { useRegisterFieldControl } from "../../field/root/useRegisterFieldControl.js";
 import { useFormContext } from "../../form/FormContext.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 import { createCollatorItemFilter, createSingleSelectionCollatorFilter } from "./utils/index.js";
@@ -45,9 +45,12 @@ export function AriaCombobox(props) {
     onSelectedValueChange,
     defaultInputValue: defaultInputValueProp,
     inputValue: inputValueProp,
+    open: openProp,
+    defaultOpen = false,
     selectionMode = 'none',
     onItemHighlighted: onItemHighlightedProp,
     name: nameProp,
+    form,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -173,8 +176,8 @@ export function AriaCombobox(props) {
     state: 'inputValue'
   });
   const [open, setOpenUnwrapped] = useControlled({
-    controlled: props.open,
-    default: props.defaultOpen,
+    controlled: openProp,
+    default: defaultOpen,
     name: 'Combobox',
     state: 'open'
   });
@@ -276,6 +279,7 @@ export function AriaCombobox(props) {
     allValuesRef,
     selectionEventRef,
     name,
+    form,
     disabled,
     readOnly,
     required,
@@ -349,13 +353,11 @@ export function AriaCombobox(props) {
     openMethod,
     triggerProps
   } = useOpenInteractionType(open);
-  useField({
+  const getFieldValue = useStableCallback(() => fieldStringValue);
+  useRegisterFieldControl(inputInsidePopup ? triggerRef : inputRef, {
     id,
-    name,
-    commit: validation.commit,
     value: fieldRawValue,
-    controlRef: inputInsidePopup ? triggerRef : inputRef,
-    getValue: () => fieldStringValue
+    getValue: getFieldValue
   });
   const forceMount = useStableCallback(() => {
     if (items) {
@@ -536,9 +538,9 @@ export function AriaCombobox(props) {
     if (!store.state.submitOnItemClick) {
       return;
     }
-    const form = store.state.inputElement?.form;
-    if (form && typeof form.requestSubmit === 'function') {
-      form.requestSubmit();
+    const formElement = validation.inputRef.current?.form ?? store.state.inputElement?.form;
+    if (formElement && typeof formElement.requestSubmit === 'function') {
+      formElement.requestSubmit();
     }
   });
   const handleUnmount = useStableCallback(() => {
@@ -793,9 +795,9 @@ export function AriaCombobox(props) {
     enabled: !readOnly && !disabled && openOnInputClick,
     event: 'mousedown-only',
     toggle: false,
-    // Apply a small delay for touch to let iOS viewport centering settle.
+    // Apply a small delay for touch to let mobile viewport/keyboard positioning settle.
     // This avoids top-bottom flip flickers if the preferred position is "top" when first tapping.
-    touchOpenDelay: inputInsidePopup ? 0 : 50,
+    touchOpenDelay: inputInsidePopup ? 0 : 100,
     reason: REASONS.inputPress
   });
   const dismiss = useDismiss(floatingRootContext, {
@@ -888,6 +890,7 @@ export function AriaCombobox(props) {
       getItemProps,
       selectionMode,
       name,
+      form,
       disabled,
       readOnly,
       required,
@@ -904,7 +907,7 @@ export function AriaCombobox(props) {
       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]);
+  }, [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, form]);
   const hiddenInputRef = useMergedRefs(inputRefProp, validation.inputRef);
   const itemsContextValue = React.useMemo(() => ({
     query,
@@ -928,11 +931,12 @@ export function AriaCombobox(props) {
       const currentSerializedValue = stringifyAsValue(value, itemToStringValue);
       return /*#__PURE__*/_jsx("input", {
         type: "hidden",
+        form: form,
         name: name,
         value: currentSerializedValue
       }, currentSerializedValue);
     });
-  }, [multiple, selectedValue, name, itemToStringValue]);
+  }, [multiple, selectedValue, form, name, itemToStringValue]);
   const children = /*#__PURE__*/_jsxs(React.Fragment, {
     children: [props.children, /*#__PURE__*/_jsx("input", {
       ...validation.getInputValidationProps({
@@ -950,7 +954,7 @@ export function AriaCombobox(props) {
           if (event.nativeEvent.defaultPrevented) {
             return;
           }
-          const nextValue = event.target.value;
+          const nextValue = event.currentTarget.value;
           const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
           function handleChange() {
             // Browser autofill only writes a single scalar value.
@@ -966,8 +970,15 @@ export function AriaCombobox(props) {
               return;
             }
             const matchingValue = valuesRef.current.find(v => {
-              const candidate = stringifyAsValue(v, itemToStringValue);
-              if (candidate.toLowerCase() === nextValue.toLowerCase()) {
+              // Try matching by value first (e.g., "US" for country code)
+              const candidateValue = stringifyAsValue(v, itemToStringValue);
+              if (candidateValue.toLowerCase() === nextValue.toLowerCase()) {
+                return true;
+              }
+              // Also try matching by label for browser autofill compatibility
+              // (browsers autofill with displayed text like "United States", not the underlying value)
+              const candidateLabel = stringifyAsLabel(v, itemToStringLabel);
+              if (candidateLabel.toLowerCase() === nextValue.toLowerCase()) {
                 return true;
               }
               return false;
@@ -989,6 +1000,7 @@ export function AriaCombobox(props) {
         }
       }),
       id: id && hiddenInputName == null ? `${id}-hidden-input` : undefined,
+      form: form,
       name: hiddenInputName,
       autoComplete: formAutoComplete,
       disabled: disabled,
@@ -998,7 +1010,8 @@ export function AriaCombobox(props) {
       ref: hiddenInputRef,
       style: hiddenInputName ? visuallyHiddenInput : visuallyHidden,
       tabIndex: -1,
-      "aria-hidden": true
+      "aria-hidden": true,
+      suppressHydrationWarning: true
     }), hiddenInputs]
   });
   return /*#__PURE__*/_jsx(ComboboxRootContext.Provider, {

package/esm/combobox/root/utils/useFilter.d.ts

@@ -6,8 +6,17 @@ export interface UseFilterOptions extends Intl.CollatorOptions {
   locale?: Intl.LocalesArgument | undefined;
 }
 export interface Filter {
+  /**
+   * Returns whether the item matches the query anywhere.
+   */
   contains: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
+  /**
+   * Returns whether the item starts with the query.
+   */
   startsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
+  /**
+   * Returns whether the item ends with the query.
+   */
   endsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
 }
 declare function getFilter(options?: UseFilterOptions): Filter;

package/esm/combobox/row/ComboboxRow.d.ts

@@ -4,6 +4,8 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Displays a single row of items in a grid list.
  * Enable `grid` on the root component to turn the listbox into a grid.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxRow: React.ForwardRefExoticComponent<Omit<ComboboxRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxRowState {}

package/esm/combobox/row/ComboboxRow.js

@@ -8,12 +8,15 @@ import { ComboboxRowContext } from "./ComboboxRowContext.js";
  * Displays a single row of items in a grid list.
  * Enable `grid` on the root component to turn the listbox into a grid.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ComboboxRow = /*#__PURE__*/React.forwardRef(function ComboboxRow(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const element = useRenderElement('div', componentProps, {

package/esm/combobox/status/ComboboxStatus.d.ts

@@ -3,7 +3,13 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Displays a status message whose content changes are announced politely to screen readers.
  * Useful for conveying the status of an asynchronously loaded list.
+ * This component's root element must remain mounted in the DOM to announce
+ * changes consistently across screen readers. Avoid hiding or removing the
+ * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
+ * rendering. Prefer updating or conditionally rendering its children instead.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxStatus: React.ForwardRefExoticComponent<Omit<ComboboxStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxStatusState {}

package/esm/combobox/status/ComboboxStatus.js

@@ -2,21 +2,32 @@
 
 import * as React from 'react';
 import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useInitialLiveRegionTextMutation } from "../utils/useInitialLiveRegionTextMutation.js";
 
 /**
  * Displays a status message whose content changes are announced politely to screen readers.
  * Useful for conveying the status of an asynchronously loaded list.
+ * This component's root element must remain mounted in the DOM to announce
+ * changes consistently across screen readers. Avoid hiding or removing the
+ * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
+ * rendering. Prefer updating or conditionally rendering its children instead.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export const ComboboxStatus = /*#__PURE__*/React.forwardRef(function ComboboxStatus(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
+    children: childrenProp,
     ...elementProps
   } = componentProps;
+  const statusRef = useInitialLiveRegionTextMutation();
   return useRenderElement('div', componentProps, {
-    ref: forwardedRef,
+    ref: [forwardedRef, statusRef],
     props: [{
+      children: childrenProp,
       role: 'status',
       'aria-live': 'polite',
       'aria-atomic': true

package/esm/combobox/store.d.ts

@@ -60,6 +60,7 @@ export type State = {
   }) => Record<string, unknown>;
   requestSubmit: () => void;
   name: string | undefined;
+  form: string | undefined;
   disabled: boolean;
   readOnly: boolean;
   required: boolean;
@@ -79,7 +80,6 @@ export type ComboboxStore = Store<State>;
 export declare const selectors: {
   id: (state: State) => string | undefined;
   labelId: (state: State) => string | undefined;
-  query: (state: State) => string;
   items: (state: State) => readonly any[] | undefined;
   selectedValue: (state: State) => any;
   hasSelectionChips: (state: State) => boolean;
@@ -110,25 +110,13 @@ export declare const selectors: {
   openMethod: (state: State) => InteractionType | null;
   inputInsidePopup: (state: State) => boolean;
   selectionMode: (state: State) => "none" | "multiple" | "single";
-  listRef: (state: State) => import("react").RefObject<(HTMLElement | null)[]>;
-  labelsRef: (state: State) => import("react").RefObject<(string | null)[]>;
-  popupRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
-  emptyRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
-  inputRef: (state: State) => import("react").RefObject<HTMLInputElement | null>;
-  keyboardActiveRef: (state: State) => import("react").RefObject<boolean>;
-  chipsContainerRef: (state: State) => import("react").RefObject<HTMLDivElement | null>;
-  clearRef: (state: State) => import("react").RefObject<HTMLButtonElement | null>;
-  valuesRef: (state: State) => import("react").RefObject<any[]>;
-  allValuesRef: (state: State) => import("react").RefObject<any[]>;
   name: (state: State) => string | undefined;
+  form: (state: State) => string | undefined;
   disabled: (state: State) => boolean;
   readOnly: (state: State) => boolean;
   required: (state: State) => boolean;
   grid: (state: State) => boolean;
-  isGrouped: (state: State) => boolean;
   virtualized: (state: State) => boolean;
-  onOpenChangeComplete: (state: State) => (open: boolean) => void;
-  openOnInputClick: (state: State) => boolean;
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
   isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
   modal: (state: State) => boolean;

package/esm/combobox/store.js

@@ -4,7 +4,6 @@ import { hasNullItemLabel } from "../utils/resolveValueLabel.js";
 export const selectors = {
   id: createSelector(state => state.id),
   labelId: createSelector(state => state.labelId),
-  query: createSelector(state => state.query),
   items: createSelector(state => state.items),
   selectedValue: createSelector(state => state.selectedValue),
   hasSelectionChips: createSelector(state => {
@@ -56,25 +55,13 @@ export const selectors = {
   openMethod: createSelector(state => state.openMethod),
   inputInsidePopup: createSelector(state => state.inputInsidePopup),
   selectionMode: createSelector(state => state.selectionMode),
-  listRef: createSelector(state => state.listRef),
-  labelsRef: createSelector(state => state.labelsRef),
-  popupRef: createSelector(state => state.popupRef),
-  emptyRef: createSelector(state => state.emptyRef),
-  inputRef: createSelector(state => state.inputRef),
-  keyboardActiveRef: createSelector(state => state.keyboardActiveRef),
-  chipsContainerRef: createSelector(state => state.chipsContainerRef),
-  clearRef: createSelector(state => state.clearRef),
-  valuesRef: createSelector(state => state.valuesRef),
-  allValuesRef: createSelector(state => state.allValuesRef),
   name: createSelector(state => state.name),
+  form: createSelector(state => state.form),
   disabled: createSelector(state => state.disabled),
   readOnly: createSelector(state => state.readOnly),
   required: createSelector(state => state.required),
   grid: createSelector(state => state.grid),
-  isGrouped: createSelector(state => state.isGrouped),
   virtualized: createSelector(state => state.virtualized),
-  onOpenChangeComplete: createSelector(state => state.onOpenChangeComplete),
-  openOnInputClick: createSelector(state => state.openOnInputClick),
   itemToStringLabel: createSelector(state => state.itemToStringLabel),
   isItemEqualToValue: createSelector(state => state.isItemEqualToValue),
   modal: createSelector(state => state.modal),

package/esm/combobox/trigger/ComboboxTrigger.d.ts

@@ -5,6 +5,8 @@ import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxTrigger: React.ForwardRefExoticComponent<Omit<ComboboxTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxTriggerState extends FieldRootState {

package/esm/combobox/trigger/ComboboxTrigger.js

@@ -24,6 +24,8 @@ const BOUNDARY_OFFSET = 2;
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTrigger(componentProps, forwardedRef) {
   const {
@@ -32,6 +34,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     nativeButton = true,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -127,7 +130,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     disabled,
     popupSide,
     listEmpty,
-    placeholder: !hasSelectedValue
+    placeholder: selectionMode === 'none' ? false : !hasSelectedValue
   };
   const setTriggerElement = useStableCallback(element => {
     store.set('triggerElement', element);

package/esm/combobox/utils/handleInputPress.d.ts

@@ -0,0 +1,5 @@
+import type * as React from 'react';
+import type { ComboboxStore } from "../store.js";
+export declare function handleInputPress(event: React.MouseEvent<HTMLElement> & {
+  baseUIHandlerPrevented?: boolean | undefined;
+}, store: ComboboxStore, disabled: boolean, readOnly: boolean, shouldIgnoreTarget?: ((target: Element | null) => boolean) | undefined): void;

package/esm/combobox/utils/handleInputPress.js

@@ -0,0 +1,22 @@
+import { isElement } from '@floating-ui/utils/dom';
+import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+import { getTarget, isInteractiveElement } from "../../floating-ui-react/utils/element.js";
+export function handleInputPress(event, store, disabled, readOnly, shouldIgnoreTarget) {
+  if (event.baseUIHandlerPrevented || readOnly) {
+    return;
+  }
+  const target = getTarget(event.nativeEvent);
+  const targetElement = isElement(target) ? target : null;
+  if (targetElement !== event.currentTarget && (shouldIgnoreTarget?.(targetElement) || isInteractiveElement(targetElement))) {
+    return;
+  }
+  event.preventDefault();
+  if (disabled) {
+    return;
+  }
+  store.state.inputRef.current?.focus();
+  if (store.state.openOnInputClick) {
+    store.state.setOpen(true, createChangeEventDetails(REASONS.inputPress, event.nativeEvent));
+  }
+}

package/esm/combobox/utils/useInitialLiveRegionTextMutation.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = 200;
+export declare function useInitialLiveRegionTextMutation<T extends HTMLElement>(): React.RefObject<T | null>;

package/esm/combobox/utils/useInitialLiveRegionTextMutation.js

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import { isIOS } from '@base-ui/utils/detectBrowser';
+import { useTimeout } from '@base-ui/utils/useTimeout';
+
+// Word Joiner is invisible and zero-width, so it forces a text mutation without shifting layout.
+const LIVE_REGION_MARKER = '\u2060';
+// Safari VoiceOver needed roughly 200ms to reliably notice the initial polite live-region change.
+export const INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY = 200;
+function findLastTextNode(root) {
+  const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let lastTextNode = null;
+  while (walker.nextNode()) {
+    const textNode = walker.currentNode;
+    if (textNode.nodeValue !== '') {
+      lastTextNode = textNode;
+    }
+  }
+  return lastTextNode;
+}
+export function useInitialLiveRegionTextMutation() {
+  const timeout = useTimeout();
+  const rootRef = React.useRef(null);
+
+  // Only the initial mounted announcement needs the marker; later text updates announce naturally.
+  React.useEffect(() => {
+    if (isIOS) {
+      return undefined;
+    }
+    const root = rootRef.current;
+    if (root == null) {
+      return undefined;
+    }
+    const textNode = findLastTextNode(root);
+    if (textNode == null) {
+      return undefined;
+    }
+    const originalValue = textNode.nodeValue ?? '';
+    const markedValue = `${originalValue}${LIVE_REGION_MARKER}`;
+    textNode.nodeValue = markedValue;
+    timeout.start(INITIAL_LIVE_REGION_TEXT_MUTATION_RESET_DELAY, () => {
+      if (textNode.nodeValue === markedValue) {
+        textNode.nodeValue = originalValue;
+      }
+    });
+    return () => {
+      timeout.clear();
+      if (textNode.nodeValue === markedValue) {
+        textNode.nodeValue = originalValue;
+      }
+    };
+  }, [rootRef, timeout]);
+  return rootRef;
+}

package/esm/composite/composite.d.ts

@@ -10,6 +10,8 @@ export declare const ARROW_LEFT = "ArrowLeft";
 export declare const ARROW_RIGHT = "ArrowRight";
 export declare const HOME = "Home";
 export declare const END = "End";
+export declare const PAGE_UP = "PageUp";
+export declare const PAGE_DOWN = "PageDown";
 export declare const HORIZONTAL_KEYS: Set<string>;
 export declare const HORIZONTAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
 export declare const VERTICAL_KEYS: Set<string>;

package/esm/composite/composite.js

@@ -6,6 +6,8 @@ export const ARROW_LEFT = 'ArrowLeft';
 export const ARROW_RIGHT = 'ArrowRight';
 export const HOME = 'Home';
 export const END = 'End';
+export const PAGE_UP = 'PageUp';
+export const PAGE_DOWN = 'PageDown';
 export const HORIZONTAL_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT]);
 export const HORIZONTAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT, HOME, END]);
 export const VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN]);

package/esm/composite/item/CompositeItem.d.ts

@@ -6,7 +6,7 @@ import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
  */
 export declare function CompositeItem<Metadata, State extends Record<string, any>>(componentProps: CompositeItem.Props<Metadata, State>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export interface CompositeItemState {}
-export interface CompositeItemProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<any, State>, 'render' | 'className'> {
+export interface CompositeItemProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<any, State>, 'render' | 'className' | 'style'> {
   children?: React.ReactNode;
   metadata?: Metadata | undefined;
   refs?: React.Ref<HTMLElement | null>[] | undefined;

package/esm/composite/item/CompositeItem.js

@@ -10,6 +10,7 @@ export function CompositeItem(componentProps) {
   const {
     render,
     className,
+    style,
     state = EMPTY_OBJECT,
     props = EMPTY_ARRAY,
     refs = EMPTY_ARRAY,