@base-ui/react 1.0.0 → 1.1.0

package/esm/checkbox/root/CheckboxRoot.js

@@ -6,7 +6,7 @@ import { useControlled } from '@base-ui/utils/useControlled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
-import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
+import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
 import { NOOP } from "../../utils/noop.js";
 import { useStateAttributesMapping } from "../utils/useStateAttributesMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -170,11 +170,12 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     disabled,
     // parent checkboxes unset `name` to be excluded from form submission
     name: parent ? undefined : name,
-    // Set `id` to stop Chrome warning about an unassociated input
-    id: inputId ?? undefined,
+    // Set `id` to stop Chrome warning about an unassociated input.
+    // When using a native button, the `id` is applied to the button instead.
+    id: nativeButton ? undefined : inputId ?? undefined,
     required,
     ref: mergedInputRef,
-    style: visuallyHidden,
+    style: name ? visuallyHiddenInput : visuallyHidden,
     tabIndex: -1,
     type: 'checkbox',
     'aria-hidden': true,
@@ -225,7 +226,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     state,
     ref: [buttonRef, controlRef, forwardedRef, groupContext?.registerControlRef],
     props: [{
-      id,
+      id: nativeButton ? inputId ?? undefined : id,
       role: 'checkbox',
       'aria-checked': groupIndeterminate ? 'mixed' : checked,
       'aria-readonly': readOnly || undefined,

package/esm/checkbox/root/CheckboxRootDataAttributes.d.ts

@@ -7,6 +7,10 @@ export declare enum CheckboxRootDataAttributes {
    * Present when the checkbox is not checked.
    */
   unchecked = "data-unchecked",
+  /**
+   * Present when the checkbox is in an indeterminate state.
+   */
+  indeterminate = "data-indeterminate",
   /**
    * Present when the checkbox is disabled.
    */

package/esm/checkbox/root/CheckboxRootDataAttributes.js

@@ -7,6 +7,10 @@ export let CheckboxRootDataAttributes = /*#__PURE__*/function (CheckboxRootDataA
    * Present when the checkbox is not checked.
    */
   CheckboxRootDataAttributes["unchecked"] = "data-unchecked";
+  /**
+   * Present when the checkbox is in an indeterminate state.
+   */
+  CheckboxRootDataAttributes["indeterminate"] = "data-indeterminate";
   /**
    * Present when the checkbox is disabled.
    */

package/esm/checkbox-group/CheckboxGroup.d.ts

@@ -8,7 +8,7 @@ import { REASONS } from "../utils/reasons.js";
  *
  * Documentation: [Base UI Checkbox Group](https://base-ui.com/react/components/checkbox-group)
  */
-export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface CheckboxGroupState extends FieldRoot.State {
   /**
    * Whether the component should ignore user interaction.

package/esm/collapsible/panel/CollapsiblePanel.d.ts

@@ -8,7 +8,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
-export declare const CollapsiblePanel: React.ForwardRefExoticComponent<CollapsiblePanelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CollapsiblePanel: React.ForwardRefExoticComponent<Omit<CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface CollapsiblePanelState extends CollapsibleRoot.State {
   transitionStatus: TransitionStatus;
 }

package/esm/collapsible/root/CollapsibleRoot.d.ts

@@ -9,7 +9,7 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
-export declare const CollapsibleRoot: React.ForwardRefExoticComponent<CollapsibleRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface CollapsibleRootState extends Pick<useCollapsibleRoot.ReturnValue, 'open' | 'disabled'> {}
 export interface CollapsibleRootProps extends BaseUIComponentProps<'div', CollapsibleRoot.State> {
   /**

package/esm/collapsible/trigger/CollapsibleTrigger.d.ts

@@ -7,7 +7,7 @@ import { CollapsibleRoot } from "../root/CollapsibleRoot.js";
  *
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
-export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface CollapsibleTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', CollapsibleRoot.State> {}
 export declare namespace CollapsibleTrigger {
   type Props = CollapsibleTriggerProps;

package/esm/collapsible/trigger/CollapsibleTrigger.js

@@ -44,9 +44,8 @@ export const CollapsibleTrigger = /*#__PURE__*/React.forwardRef(function Collaps
   const props = React.useMemo(() => ({
     'aria-controls': open ? panelId : undefined,
     'aria-expanded': open,
-    disabled,
     onClick: handleTrigger
-  }), [panelId, disabled, open, handleTrigger]);
+  }), [panelId, open, handleTrigger]);
   const element = useRenderElement('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef],

package/esm/combobox/arrow/ComboboxArrow.d.ts

@@ -5,7 +5,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Displays an element positioned against the anchor.
  * Renders a `<div>` element.
  */
-export declare const ComboboxArrow: React.ForwardRefExoticComponent<ComboboxArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxArrow: React.ForwardRefExoticComponent<Omit<ComboboxArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxArrowState {
   /**
    * Whether the popup is currently open.

package/esm/combobox/backdrop/ComboboxBackdrop.d.ts

@@ -5,7 +5,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * An overlay displayed beneath the popup.
  * Renders a `<div>` element.
  */
-export declare const ComboboxBackdrop: React.ForwardRefExoticComponent<ComboboxBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxBackdrop: React.ForwardRefExoticComponent<Omit<ComboboxBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxBackdropProps extends BaseUIComponentProps<'div', ComboboxBackdrop.State> {}
 export interface ComboboxBackdropState {
   /**

package/esm/combobox/chip/ComboboxChip.d.ts

@@ -4,7 +4,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * An individual chip that represents a value in a multiselectable input.
  * Renders a `<div>` element.
  */
-export declare const ComboboxChip: React.ForwardRefExoticComponent<ComboboxChipProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxChip: React.ForwardRefExoticComponent<Omit<ComboboxChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxChipState {
   /**
    * Whether the component should ignore user interaction.

package/esm/combobox/chip-remove/ComboboxChipRemove.d.ts

@@ -4,7 +4,7 @@ import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
  * A button to remove a chip.
  * Renders a `<button>` element.
  */
-export declare const ComboboxChipRemove: React.ForwardRefExoticComponent<ComboboxChipRemoveProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxChipRemove: React.ForwardRefExoticComponent<Omit<ComboboxChipRemoveProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxChipRemoveState {
   /**
    * Whether the component should ignore user interaction.

package/esm/combobox/chip-remove/ComboboxChipRemove.js

@@ -20,6 +20,7 @@ export const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function Combobo
   const {
     render,
     className,
+    disabled: disabledProp = false,
     nativeButton = true,
     ...elementProps
   } = componentProps;
@@ -27,10 +28,11 @@ export const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function Combobo
   const {
     index
   } = useComboboxChipContext();
-  const disabled = useStore(store, selectors.disabled);
+  const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const selectedValue = useStore(store, selectors.selectedValue);
   const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
+  const disabled = comboboxDisabled || disabledProp;
   const {
     buttonRef,
     getButtonProps
@@ -47,7 +49,6 @@ export const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function Combobo
     state,
     props: [{
       tabIndex: -1,
-      disabled,
       'aria-readonly': readOnly || undefined,
       onClick(event) {
         if (disabled || readOnly) {

package/esm/combobox/chips/ComboboxChips.d.ts

@@ -4,7 +4,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * A container for the chips in a multiselectable input.
  * Renders a `<div>` element.
  */
-export declare const ComboboxChips: React.ForwardRefExoticComponent<ComboboxChipsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxChips: React.ForwardRefExoticComponent<Omit<ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxChipsState {}
 export interface ComboboxChipsProps extends BaseUIComponentProps<'div', ComboboxChips.State> {}
 export declare namespace ComboboxChips {

package/esm/combobox/chips/ComboboxChips.js

@@ -7,6 +7,7 @@ import { ComboboxChipsContext } from "./ComboboxChipsContext.js";
 import { CompositeList } from "../../composite/list/CompositeList.js";
 import { useComboboxRootContext } from "../root/ComboboxRootContext.js";
 import { selectors } from "../store.js";
+import { EMPTY_OBJECT } from "../../utils/constants.js";
 
 /**
  * A container for the chips in a multiselectable input.
@@ -21,6 +22,7 @@ export const ComboboxChips = /*#__PURE__*/React.forwardRef(function ComboboxChip
   } = componentProps;
   const store = useComboboxRootContext();
   const open = useStore(store, selectors.open);
+  const hasSelectionChips = useStore(store, selectors.hasSelectionChips);
   const [highlightedChipIndex, setHighlightedChipIndex] = React.useState(undefined);
   if (open && highlightedChipIndex !== undefined) {
     setHighlightedChipIndex(undefined);
@@ -28,7 +30,11 @@ export const ComboboxChips = /*#__PURE__*/React.forwardRef(function ComboboxChip
   const chipsRef = React.useRef([]);
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, store.state.chipsContainerRef],
-    props: elementProps
+    // 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'
+    } : EMPTY_OBJECT, elementProps]
   });
   const contextValue = React.useMemo(() => ({
     highlightedChipIndex,

package/esm/combobox/clear/ComboboxClear.d.ts

@@ -5,7 +5,7 @@ import { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Clears the value when clicked.
  * Renders a `<button>` element.
  */
-export declare const ComboboxClear: React.ForwardRefExoticComponent<ComboboxClearProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxClear: React.ForwardRefExoticComponent<Omit<ComboboxClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxClearState {
   /**
    * Whether the popup is open.

package/esm/combobox/clear/ComboboxClear.js

@@ -40,6 +40,7 @@ export const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClea
   const readOnly = useStore(store, selectors.readOnly);
   const open = useStore(store, selectors.open);
   const selectedValue = useStore(store, selectors.selectedValue);
+  const hasSelectionChips = useStore(store, selectors.hasSelectionChips);
   const inputValue = useComboboxInputValueContext();
   let visible = false;
   if (selectionMode === 'none') {
@@ -47,7 +48,7 @@ export const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClea
   } else if (selectionMode === 'single') {
     visible = selectedValue != null;
   } else {
-    visible = Array.isArray(selectedValue) && selectedValue.length > 0;
+    visible = hasSelectionChips;
   }
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
   const {
@@ -82,7 +83,6 @@ export const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClea
     props: [{
       tabIndex: -1,
       children: 'x',
-      disabled,
       'aria-readonly': readOnly || undefined,
       // Avoid stealing focus from the input.
       onMouseDown(event) {

package/esm/combobox/empty/ComboboxEmpty.d.ts

@@ -6,7 +6,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Announces changes politely to screen readers.
  * Renders a `<div>` element.
  */
-export declare const ComboboxEmpty: React.ForwardRefExoticComponent<ComboboxEmptyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxEmpty: React.ForwardRefExoticComponent<Omit<ComboboxEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxEmptyState {}
 export interface ComboboxEmptyProps extends BaseUIComponentProps<'div', ComboboxEmpty.State> {}
 export declare namespace ComboboxEmpty {

package/esm/combobox/group/ComboboxGroup.d.ts

@@ -4,7 +4,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Groups related items with the corresponding label.
  * Renders a `<div>` element.
  */
-export declare const ComboboxGroup: React.ForwardRefExoticComponent<ComboboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxGroup: React.ForwardRefExoticComponent<Omit<ComboboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxGroupState {}
 export interface ComboboxGroupProps extends BaseUIComponentProps<'div', ComboboxGroup.State> {
   /**

package/esm/combobox/group-label/ComboboxGroupLabel.d.ts

@@ -4,7 +4,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * An accessible label that is automatically associated with its parent group.
  * Renders a `<div>` element.
  */
-export declare const ComboboxGroupLabel: React.ForwardRefExoticComponent<ComboboxGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxGroupLabel: React.ForwardRefExoticComponent<Omit<ComboboxGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxGroupLabelState {}
 export interface ComboboxGroupLabelProps extends BaseUIComponentProps<'div', ComboboxGroupLabel.State> {}
 export declare namespace ComboboxGroupLabel {

package/esm/combobox/icon/ComboboxIcon.d.ts

@@ -4,7 +4,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * An icon that indicates that the trigger button opens the popup.
  * Renders a `<span>` element.
  */
-export declare const ComboboxIcon: React.ForwardRefExoticComponent<ComboboxIconProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxIcon: React.ForwardRefExoticComponent<Omit<ComboboxIconProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxIconState {}
 export interface ComboboxIconProps extends BaseUIComponentProps<'span', ComboboxIcon.State> {}
 export declare namespace ComboboxIcon {

package/esm/combobox/input/ComboboxInput.d.ts

@@ -6,7 +6,7 @@ import type { Side } from "../../utils/useAnchorPositioning.js";
  * A text input to search for items in the list.
  * Renders an `<input>` element.
  */
-export declare const ComboboxInput: React.ForwardRefExoticComponent<ComboboxInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<ComboboxInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export interface ComboboxInputState extends FieldRoot.State {
   /**
    * Whether the corresponding popup is open.

package/esm/combobox/input/ComboboxInput.js

@@ -7,10 +7,9 @@ import { isAndroid, isFirefox } from '@base-ui/utils/detectBrowser';
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useComboboxDerivedItemsContext, useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
+import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.js";
 import { selectors } from "../store.js";
-import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { fieldValidityMapping } from "../../field/utils/constants.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
 import { useComboboxChipsContext } from "../chips/ComboboxChipsContext.js";
 import { stopEvent } from "../../floating-ui-react/utils.js";
@@ -18,16 +17,6 @@ import { useComboboxPositionerContext } from "../positioner/ComboboxPositionerCo
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { useDirection } from "../../direction-provider/DirectionContext.js";
-const stateAttributesMapping = {
-  ...pressableTriggerOpenStateMapping,
-  ...fieldValidityMapping,
-  popupSide: side => side ? {
-    'data-popup-side': side
-  } : null,
-  listEmpty: empty => empty ? {
-    'data-list-empty': ''
-  } : null
-};
 
 /**
  * A text input to search for items in the list.
@@ -62,7 +51,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   // `inputValue` can't be placed in the store.
   // https://github.com/mui/base-ui/issues/2703
   const inputValue = useComboboxInputValueContext();
-  const id = useBaseUiId(idProp);
+  const required = useStore(store, selectors.required);
   const direction = useDirection();
   const comboboxDisabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
@@ -76,20 +65,24 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   const selectedValue = useStore(store, selectors.selectedValue);
   const popupSideValue = useStore(store, selectors.popupSide);
   const positionerElement = useStore(store, selectors.positionerElement);
+  const rootId = useStore(store, selectors.id);
+  const inline = useStore(store, selectors.inline);
   const autoHighlightEnabled = Boolean(autoHighlightMode);
   const popupSide = mounted && positionerElement ? popupSideValue : null;
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
   const listEmpty = filteredItems.length === 0;
+  const isInsidePopup = hasPositionerParent || inline;
+  const id = useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
   const [composingValue, setComposingValue] = React.useState(null);
   const isComposingRef = React.useRef(false);
   const setInputElement = useStableCallback(element => {
-    const isInsidePopup = hasPositionerParent || store.state.inline;
-    if (isInsidePopup && !store.state.hasInputValue) {
+    const nextIsInsidePopup = hasPositionerParent || store.state.inline;
+    if (nextIsInsidePopup && !store.state.hasInputValue) {
       store.state.setInputValue('', createChangeEventDetails(REASONS.none));
     }
     store.update({
       inputElement: element,
-      inputInsidePopup: isInsidePopup
+      inputInsidePopup: nextIsInsidePopup
     });
   });
   const state = React.useMemo(() => ({
@@ -160,9 +153,11 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
       type: 'text',
       value: componentProps.value ?? composingValue ?? inputValue,
       'aria-readonly': readOnly || undefined,
+      'aria-required': required || undefined,
       'aria-labelledby': labelId,
       disabled,
       readOnly,
+      required: selectionMode === 'none' ? required : undefined,
       ...(selectionMode === 'none' && name && {
         name
       }),
@@ -349,7 +344,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
         store.state.keyboardActiveRef.current = false;
       }
     }, validation ? validation.getValidationProps(elementProps) : elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: triggerStateAttributesMapping
   });
   return element;
 });

package/esm/combobox/item/ComboboxItem.d.ts

@@ -4,7 +4,7 @@ import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/typ
  * An individual item in the list.
  * Renders a `<div>` element.
  */
-export declare const ComboboxItem: React.NamedExoticComponent<ComboboxItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxItem: React.NamedExoticComponent<Omit<ComboboxItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxItemState {
   /**
    * Whether the item should ignore user interaction.

package/esm/combobox/item/ComboboxItem.js

@@ -131,7 +131,6 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
   const defaultProps = {
     id,
     role: isRow ? 'gridcell' : 'option',
-    'aria-disabled': disabled || undefined,
     '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>`,

package/esm/combobox/item-indicator/ComboboxItemIndicator.d.ts

@@ -5,7 +5,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Indicates whether the item is selected.
  * Renders a `<span>` element.
  */
-export declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<ComboboxItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<Omit<ComboboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span', ComboboxItemIndicator.State> {
   children?: React.ReactNode;
   /**

package/esm/combobox/list/ComboboxList.d.ts

@@ -4,7 +4,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * A list container for the items.
  * Renders a `<div>` element.
  */
-export declare const ComboboxList: React.ForwardRefExoticComponent<ComboboxListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxList: React.ForwardRefExoticComponent<Omit<ComboboxListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxListState {
   /**
    * Whether the list is empty.

package/esm/combobox/popup/ComboboxPopup.d.ts

@@ -7,7 +7,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * A container for the list.
  * Renders a `<div>` element.
  */
-export declare const ComboboxPopup: React.ForwardRefExoticComponent<ComboboxPopupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxPopup: React.ForwardRefExoticComponent<Omit<ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPopupState {
   open: boolean;
   side: Side;

package/esm/combobox/popup/ComboboxPopup.js

@@ -42,6 +42,7 @@ export const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopu
   const transitionStatus = useStore(store, selectors.transitionStatus);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
   const inputElement = useStore(store, selectors.inputElement);
+  const modal = useStore(store, selectors.modal);
   const empty = filteredItems.length === 0;
   useOpenChangeComplete({
     open,
@@ -90,7 +91,7 @@ export const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopu
   return /*#__PURE__*/_jsx(FloatingFocusManager, {
     context: floatingRootContext,
     disabled: !mounted,
-    modal: !inputInsidePopup,
+    modal: inputInsidePopup ? modal : false,
     openInteractionType: openMethod,
     initialFocus: resolvedInitialFocus,
     returnFocus: resolvedFinalFocus,

package/esm/combobox/portal/ComboboxPortal.d.ts

@@ -5,7 +5,7 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * By default, the portal element is appended to `<body>`.
  * Renders a `<div>` element.
  */
-export declare const ComboboxPortal: React.ForwardRefExoticComponent<ComboboxPortalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxPortal: React.ForwardRefExoticComponent<Omit<ComboboxPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace ComboboxPortal {
   interface State {}
 }

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

@@ -5,7 +5,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Positions the popup against the trigger.
  * Renders a `<div>` element.
  */
-export declare const ComboboxPositioner: React.ForwardRefExoticComponent<ComboboxPositionerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxPositioner: React.ForwardRefExoticComponent<Omit<ComboboxPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPositionerState {
   /**
    * Whether the popup is currently open.

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

@@ -81,6 +81,13 @@ interface ComboboxRootProps<ItemValue> {
    * @default true
    */
   highlightItemOnHover?: boolean;
+  /**
+   * Whether to loop keyboard focus back to the input when the end of the list is reached while using the arrow keys. The first item can then be reached by pressing <kbd>ArrowDown</kbd> again from the input, or the last item can be reached by pressing <kbd>ArrowUp</kbd> from the input.
+   * The input is always included in the focus loop per [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+   * When disabled, focus does not move when on the last element and the user presses <kbd>ArrowDown</kbd>, or when on the first element and the user presses <kbd>ArrowUp</kbd>.
+   * @default true
+   */
+  loopFocus?: boolean;
   /**
    * The input value of the combobox. Use when controlled.
    */
@@ -101,7 +108,7 @@ interface ComboboxRootProps<ItemValue> {
    * Instead, the `unmount` function must be called to unmount the combobox manually.
    * Useful when the combobox's animation is controlled by an external library.
    */
-  actionsRef?: React.RefObject<AriaCombobox.Actions>;
+  actionsRef?: React.RefObject<AriaCombobox.Actions | null>;
   /**
    * Callback fired when an item is highlighted or unhighlighted.
    * Receives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed.

package/esm/combobox/root/AriaCombobox.js

@@ -6,7 +6,7 @@ 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 { visuallyHidden } from '@base-ui/utils/visuallyHidden';
+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';
@@ -60,6 +60,7 @@ export function AriaCombobox(props) {
     autoHighlight = false,
     keepHighlight = false,
     highlightItemOnHover = true,
+    loopFocus = true,
     itemToStringLabel,
     itemToStringValue,
     isItemEqualToValue = defaultItemEquality,
@@ -82,6 +83,9 @@ export function AriaCombobox(props) {
     setFilled,
     name: fieldName,
     disabled: fieldDisabled,
+    setTouched,
+    setFocused,
+    validationMode,
     validation
   } = useFieldRootContext();
   const id = useLabelableId({
@@ -447,6 +451,14 @@ export function AriaCombobox(props) {
       }
     }
     setOpenUnwrapped(nextOpen);
+    if (!nextOpen && inputInsidePopup && (eventDetails.reason === REASONS.focusOut || eventDetails.reason === REASONS.outsidePress)) {
+      setTouched(true);
+      setFocused(false);
+      if (validationMode === 'onBlur') {
+        const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
+        validation.commit(valueToValidate);
+      }
+    }
   });
   const setSelectedValue = useStableCallback((nextValue, eventDetails) => {
     // Cast to `any` due to conditional value type (single vs. multiple).
@@ -673,11 +685,11 @@ export function AriaCombobox(props) {
       const current = Array.isArray(selectedValue) ? selectedValue : EMPTY_ARRAY;
       const next = current.filter(v => itemIncludes(registry, v, store.state.isItemEqualToValue));
       if (next.length !== current.length) {
-        setSelectedValueUnwrapped(next);
+        setSelectedValue(next, createChangeEventDetails(REASONS.none));
       }
       return;
     }
-    const isStillPresent = selectedValue == null ? true : itemIncludes(registry, selectedValue, store.state.isItemEqualToValue);
+    const isStillPresent = selectedValue == null || itemIncludes(registry, selectedValue, store.state.isItemEqualToValue);
     if (isStillPresent) {
       return;
     }
@@ -685,16 +697,8 @@ export function AriaCombobox(props) {
     if (defaultSelectedValue != null && itemIncludes(registry, defaultSelectedValue, store.state.isItemEqualToValue)) {
       fallback = defaultSelectedValue;
     }
-    setSelectedValueUnwrapped(fallback);
-
-    // Keep the input text in sync when the input is rendered outside the popup.
-    if (!store.state.inputInsidePopup) {
-      const stringVal = stringifyAsLabel(fallback, itemToStringLabel);
-      if (inputRef.current && inputRef.current.value !== stringVal) {
-        setInputValue(stringVal, createChangeEventDetails(REASONS.none));
-      }
-    }
-  }, [items, flatItems, multiple, selectionMode, selectedValue, defaultSelectedValue, setSelectedValueUnwrapped, itemToStringLabel, store, setInputValue]);
+    setSelectedValue(fallback, createChangeEventDetails(REASONS.none));
+  }, [items, flatItems, multiple, selectionMode, selectedValue, defaultSelectedValue, store, setSelectedValue]);
   useIsoLayoutEffect(() => {
     if (selectionMode === 'none') {
       setFilled(String(inputValue) !== '');
@@ -831,8 +835,8 @@ export function AriaCombobox(props) {
     activeIndex,
     selectedIndex,
     virtual: true,
-    loopFocus: true,
-    allowEscape: !autoHighlightMode,
+    loopFocus,
+    allowEscape: loopFocus && !autoHighlightMode,
     focusItemOnOpen: queryChangedAfterOpen || selectionMode === 'none' && !autoHighlightMode ? false : 'auto',
     focusItemOnHover: highlightItemOnHover,
     resetOnPointerLeave: !keepHighlight,
@@ -996,14 +1000,13 @@ export function AriaCombobox(props) {
           }
         }
       }),
-      id: id,
       name: multiple || selectionMode === 'none' ? undefined : name,
       disabled: disabled,
       required: required && !hasMultipleSelection,
       readOnly: readOnly,
       value: serializedValue,
       ref: hiddenInputRef,
-      style: visuallyHidden,
+      style: name ? visuallyHiddenInput : visuallyHidden,
       tabIndex: -1,
       "aria-hidden": true
     }), hiddenInputs]

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

@@ -53,7 +53,7 @@ export type ComboboxRootProps<Value, Multiple extends boolean | undefined = fals
    * Instead, the `unmount` function must be called to unmount the combobox manually.
    * Useful when the combobox's animation is controlled by an external library.
    */
-  actionsRef?: React.RefObject<ComboboxRoot.Actions>;
+  actionsRef?: React.RefObject<ComboboxRoot.Actions | null>;
   /**
    * Event handler called when the popup is opened or closed.
    */

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

@@ -5,7 +5,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Enable `grid` on the root component to turn the listbox into a grid.
  * Renders a `<div>` element.
  */
-export declare const ComboboxRow: React.ForwardRefExoticComponent<ComboboxRowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxRow: React.ForwardRefExoticComponent<Omit<ComboboxRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxRowState {}
 export interface ComboboxRowProps extends BaseUIComponentProps<'div', ComboboxRow.State> {}
 export declare namespace ComboboxRow {