@base-ui/react 1.2.0 → 1.4.0

package/combobox/index.parts.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "Input", {
     return _ComboboxInput.ComboboxInput;
   }
 });
+Object.defineProperty(exports, "InputGroup", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxInputGroup.ComboboxInputGroup;
+  }
+});
 Object.defineProperty(exports, "Item", {
   enumerable: true,
   get: function () {
@@ -87,6 +93,12 @@ Object.defineProperty(exports, "ItemIndicator", {
     return _ComboboxItemIndicator.ComboboxItemIndicator;
   }
 });
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxLabel.ComboboxLabel;
+  }
+});
 Object.defineProperty(exports, "List", {
   enumerable: true,
   get: function () {
@@ -160,8 +172,10 @@ Object.defineProperty(exports, "useFilteredItems", {
   }
 });
 var _ComboboxRoot = require("./root/ComboboxRoot");
+var _ComboboxLabel = require("./label/ComboboxLabel");
 var _ComboboxValue = require("./value/ComboboxValue");
 var _ComboboxInput = require("./input/ComboboxInput");
+var _ComboboxInputGroup = require("./input-group/ComboboxInputGroup");
 var _ComboboxTrigger = require("./trigger/ComboboxTrigger");
 var _ComboboxList = require("./list/ComboboxList");
 var _ComboboxStatus = require("./status/ComboboxStatus");

package/combobox/input/ComboboxInput.d.ts

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A text input to search for items in the list.
  * Renders an `<input>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<ComboboxInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export interface ComboboxInputState extends FieldRoot.State {
+export interface ComboboxInputState extends FieldRootState {
   /**
    * Whether the corresponding popup is open.
    */
@@ -25,7 +27,7 @@ export interface ComboboxInputState extends FieldRoot.State {
    */
   readOnly: boolean;
 }
-export interface ComboboxInputProps extends BaseUIComponentProps<'input', ComboboxInput.State> {
+export interface ComboboxInputProps extends BaseUIComponentProps<'input', ComboboxInputState> {
   /**
    * Whether the component should ignore user interaction.
    * @default false

package/combobox/input/ComboboxInput.js

@@ -16,6 +16,7 @@ var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _store2 = require("../store");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _constants = require("../../field/utils/constants");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _ComboboxChipsContext = require("../chips/ComboboxChipsContext");
 var _utils = require("../../floating-ui-react/utils");
@@ -23,9 +24,14 @@ var _ComboboxPositionerContext = require("../positioner/ComboboxPositionerContex
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
+var _ComboboxInternalDismissButton = require("../utils/ComboboxInternalDismissButton");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A text input to search for items in the list.
  * Renders an `<input>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(componentProps, forwardedRef) {
   const {
@@ -33,6 +39,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     className,
     disabled: disabledProp = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -44,7 +51,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     validation
   } = (0, _FieldRootContext.useFieldRootContext)();
   const {
-    labelId
+    labelId: fieldLabelId
   } = (0, _LabelableContext.useLabelableContext)();
   const comboboxChipsContext = (0, _ComboboxChipsContext.useComboboxChipsContext)();
   const positioning = (0, _ComboboxPositionerContext.useComboboxPositionerContext)(true);
@@ -61,6 +68,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const name = (0, _store.useStore)(store, _store2.selectors.name);
+  const form = (0, _store.useStore)(store, _store2.selectors.form);
   const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
   const autoHighlightMode = (0, _store.useStore)(store, _store2.selectors.autoHighlight);
   const inputProps = (0, _store.useStore)(store, _store2.selectors.inputProps);
@@ -72,12 +80,16 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
   const inline = (0, _store.useStore)(store, _store2.selectors.inline);
+  const modal = (0, _store.useStore)(store, _store2.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 = (0, _useBaseUiId.useBaseUiId)(idProp ?? (!isInsidePopup ? rootId : undefined));
+  const ariaLabelledBy = (0, _resolveAriaLabelledBy.resolveAriaLabelledBy)(fieldLabelId, undefined);
+  const fieldStateForInput = hasPositionerParent ? _constants.DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
   const [composingValue, setComposingValue] = React.useState(null);
   const isComposingRef = React.useRef(false);
   const lastActiveIndexRef = React.useRef(null);
@@ -92,8 +104,9 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       inputInsidePopup: nextIsInsidePopup
     });
   });
+  const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(elementProps);
   const state = {
-    ...fieldState,
+    ...fieldStateForInput,
     open,
     disabled,
     readOnly,
@@ -108,6 +121,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     const {
       highlightedChipIndex
     } = comboboxChipsContext;
+    const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
     if (highlightedChipIndex !== undefined) {
       if (event.key === 'ArrowLeft') {
         event.preventDefault();
@@ -118,7 +132,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         }
       } else if (event.key === 'ArrowRight') {
         event.preventDefault();
-        if (highlightedChipIndex < selectedValue.length - 1) {
+        if (highlightedChipIndex < renderedChipsCount - 1) {
           nextIndex = highlightedChipIndex + 1;
         } else {
           nextIndex = undefined;
@@ -141,8 +155,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     // 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;
+      nextIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : undefined;
     } else if (event.key === 'Backspace' && event.currentTarget.value === '' && selectedValue.length > 0) {
       store.state.setIndices({
         activeIndex: null,
@@ -161,10 +174,11 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       value: componentProps.value ?? composingValue ?? inputValue,
       'aria-readonly': readOnly || undefined,
       'aria-required': required || undefined,
-      'aria-labelledby': labelId,
+      'aria-labelledby': ariaLabelledBy,
       disabled,
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
+      form,
       ...(selectionMode === 'none' && name && {
         name
       }),
@@ -332,7 +346,9 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
 
         // Handle deletion when no chip is highlighted and the input is empty.
         if (comboboxChipsContext && event.key === 'Backspace' && input.value === '' && comboboxChipsContext.highlightedChipIndex === undefined && Array.isArray(selectedValue) && selectedValue.length > 0) {
-          const newValue = selectedValue.slice(0, -1);
+          const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
+          const removalIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : selectedValue.length - 1;
+          const newValue = selectedValue.filter((_, index) => index !== removalIndex);
           // If the removed item was also the active (highlighted) item, clear highlight
           store.state.setIndices({
             activeIndex: null,
@@ -359,6 +375,10 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           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, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, nativeEvent));
             return;
@@ -378,9 +398,13 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       onPointerDown() {
         store.state.keyboardActiveRef.current = false;
       }
-    }, validation ? validation.getValidationProps(elementProps) : elementProps],
+    }, validationProps],
     stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping
   });
-  return element;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [open && focusManagerModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxInternalDismissButton.ComboboxInternalDismissButton, {
+      ref: store.state.startDismissRef
+    }), element]
+  });
 });
 if (process.env.NODE_ENV !== "production") ComboboxInput.displayName = "ComboboxInput";

package/combobox/input-group/ComboboxInputGroup.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { Side } from "../../utils/useAnchorPositioning.js";
+/**
+ * A wrapper for the input and its associated controls.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ */
+export declare const ComboboxInputGroup: React.ForwardRefExoticComponent<Omit<ComboboxInputGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ComboboxInputGroupState extends FieldRoot.State {
+  /**
+   * Whether the corresponding popup is open.
+   */
+  open: boolean;
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the component should ignore user edits.
+   */
+  readOnly: boolean;
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   */
+  popupSide: Side | null;
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  listEmpty: boolean;
+  /**
+   * Whether the combobox doesn't have a value.
+   */
+  placeholder: boolean;
+}
+export interface ComboboxInputGroupProps extends BaseUIComponentProps<'div', ComboboxInputGroup.State> {}
+export declare namespace ComboboxInputGroup {
+  type State = ComboboxInputGroupState;
+  type Props = ComboboxInputGroupProps;
+}

package/combobox/input-group/ComboboxInputGroup.js

@@ -0,0 +1,77 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxInputGroup = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _store = require("@base-ui/utils/store");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _ComboboxRootContext = require("../root/ComboboxRootContext");
+var _store2 = require("../store");
+var _stateAttributesMapping = require("../utils/stateAttributesMapping");
+var _handleInputPress = require("../utils/handleInputPress");
+var _element = require("../../floating-ui-react/utils/element");
+/**
+ * A wrapper for the input and its associated controls.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ */
+const ComboboxInputGroup = exports.ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function ComboboxInputGroup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    state: fieldState
+  } = (0, _FieldRootContext.useFieldRootContext)();
+  const store = (0, _ComboboxRootContext.useComboboxRootContext)();
+  const {
+    filteredItems
+  } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
+  const open = (0, _store.useStore)(store, _store2.selectors.open);
+  const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
+  const popupSideValue = (0, _store.useStore)(store, _store2.selectors.popupSide);
+  const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
+  const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
+  const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
+  const hasSelectedValue = (0, _store.useStore)(store, _store2.selectors.hasSelectedValue);
+  const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
+  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const disabled = comboboxDisabled;
+  const listEmpty = filteredItems.length === 0;
+  const placeholder = selectionMode === 'none' ? false : !hasSelectedValue;
+  const state = {
+    ...fieldState,
+    open,
+    disabled,
+    readOnly,
+    popupSide,
+    listEmpty,
+    placeholder
+  };
+  const setInputGroupElement = (0, _useStableCallback.useStableCallback)(element => {
+    store.set('inputGroupElement', element);
+  });
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: [forwardedRef, setInputGroupElement],
+    props: [{
+      role: 'group',
+      onMouseDown(event) {
+        (0, _handleInputPress.handleInputPress)(event, store, disabled, readOnly, target => {
+          return (0, _element.contains)(store.state.chipsContainerRef.current, target);
+        });
+      }
+    }, elementProps],
+    state,
+    stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxInputGroup.displayName = "ComboboxInputGroup";

package/combobox/input-group/ComboboxInputGroupDataAttributes.d.ts

@@ -0,0 +1,55 @@
+export declare enum ComboboxInputGroupDataAttributes {
+  /**
+   * Present when the corresponding popup is open.
+   */
+  popupOpen = "data-popup-open",
+  /**
+   * Present when the input group is pressed.
+   */
+  pressed = "data-pressed",
+  /**
+   * Present when the component is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the component is readonly.
+   */
+  readonly = "data-readonly",
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  popupSide = "data-popup-side",
+  /**
+   * Present when the component is in valid state (when wrapped in Field.Root).
+   */
+  valid = "data-valid",
+  /**
+   * Present when the component is in invalid state (when wrapped in Field.Root).
+   */
+  invalid = "data-invalid",
+  /**
+   * Present when the component has been touched (when wrapped in Field.Root).
+   */
+  touched = "data-touched",
+  /**
+   * Present when the component's value has changed (when wrapped in Field.Root).
+   */
+  dirty = "data-dirty",
+  /**
+   * Present when the component has a value (when wrapped in Field.Root).
+   */
+  filled = "data-filled",
+  /**
+   * Present when the component is focused (when wrapped in Field.Root).
+   */
+  focused = "data-focused",
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  listEmpty = "data-list-empty",
+  /**
+   * Present when the combobox doesn't have a value.
+   */
+  placeholder = "data-placeholder",
+}

package/combobox/input-group/ComboboxInputGroupDataAttributes.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxInputGroupDataAttributes = void 0;
+let ComboboxInputGroupDataAttributes = exports.ComboboxInputGroupDataAttributes = /*#__PURE__*/function (ComboboxInputGroupDataAttributes) {
+  /**
+   * Present when the corresponding popup is open.
+   */
+  ComboboxInputGroupDataAttributes["popupOpen"] = "data-popup-open";
+  /**
+   * Present when the input group is pressed.
+   */
+  ComboboxInputGroupDataAttributes["pressed"] = "data-pressed";
+  /**
+   * Present when the component is disabled.
+   */
+  ComboboxInputGroupDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the component is readonly.
+   */
+  ComboboxInputGroupDataAttributes["readonly"] = "data-readonly";
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  ComboboxInputGroupDataAttributes["popupSide"] = "data-popup-side";
+  /**
+   * Present when the component is in valid state (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the component is in invalid state (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the component has been touched (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the component's value has changed (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the component has a value (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the component is focused (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["focused"] = "data-focused";
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  ComboboxInputGroupDataAttributes["listEmpty"] = "data-list-empty";
+  /**
+   * Present when the combobox doesn't have a value.
+   */
+  ComboboxInputGroupDataAttributes["placeholder"] = "data-placeholder";
+  return ComboboxInputGroupDataAttributes;
+}({});

package/combobox/item/ComboboxItem.d.ts

@@ -3,6 +3,8 @@ import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/typ
 /**
  * An individual item in the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxItem: React.NamedExoticComponent<Omit<ComboboxItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxItemState {
@@ -19,7 +21,7 @@ export interface ComboboxItemState {
    */
   highlighted: boolean;
 }
-export interface ComboboxItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', ComboboxItem.State>, 'id'> {
+export interface ComboboxItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', ComboboxItemState>, 'id'> {
   children?: React.ReactNode;
   /**
    * An optional click handler for the item when selected.

package/combobox/item/ComboboxItem.js

@@ -22,6 +22,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An individual item in the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function ComboboxItem(componentProps, forwardedRef) {
   const {
@@ -31,6 +33,7 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
     index: indexProp,
     disabled = false,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const didPointerDownRef = React.useRef(false);
@@ -120,7 +123,8 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   } = (0, _useButton.useButton)({
     disabled,
     focusableWhenDisabled: true,
-    native: nativeButton
+    native: nativeButton,
+    composite: true
   });
   function commitSelection(nativeEvent) {
     function selectItem() {
@@ -145,6 +149,11 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
       didPointerDownRef.current = true;
       event.preventDefault();
     },
+    onMouseDown(event) {
+      // iOS Safari can emit a synthetic mousedown for touch taps without a preceding
+      // pointerdown. Prevent default here too so tapping an item does not blur the input.
+      event.preventDefault();
+    },
     onClick(event) {
       if (disabled || readOnly) {
         return;

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

@@ -4,9 +4,11 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * Indicates whether the item is selected.
  * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<Omit<ComboboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span', ComboboxItemIndicator.State> {
+export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span', ComboboxItemIndicatorState> {
   children?: React.ReactNode;
   /**
    * Whether to keep the HTML element in the DOM when the item is not selected.
@@ -15,7 +17,13 @@ export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span',
   keepMounted?: boolean | undefined;
 }
 export interface ComboboxItemIndicatorState {
+  /**
+   * Whether the item is selected.
+   */
   selected: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace ComboboxItemIndicator {

package/combobox/item-indicator/ComboboxItemIndicator.js

@@ -16,6 +16,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Indicates whether the item is selected.
  * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxItemIndicator = exports.ComboboxItemIndicator = /*#__PURE__*/React.forwardRef(function ComboboxItemIndicator(componentProps, forwardedRef) {
   const keepMounted = componentProps.keepMounted ?? false;
@@ -41,6 +43,7 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
   const {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.d.ts

@@ -0,0 +1,10 @@
+export declare enum ComboboxItemIndicatorDataAttributes {
+  /**
+   * Present when the indicator is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the indicator is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxItemIndicatorDataAttributes = void 0;
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let ComboboxItemIndicatorDataAttributes = exports.ComboboxItemIndicatorDataAttributes = function (ComboboxItemIndicatorDataAttributes) {
+  /**
+   * Present when the indicator is animating in.
+   */
+  ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the indicator is animating out.
+   */
+  ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return ComboboxItemIndicatorDataAttributes;
+}({});

package/combobox/label/ComboboxLabel.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { FieldRoot } from "../../field/root/FieldRoot.js";
+/**
+ * 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)
+ */
+export declare const ComboboxLabel: React.ForwardRefExoticComponent<Omit<ComboboxLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ComboboxLabelState = FieldRoot.State;
+export interface ComboboxLabelProps extends Omit<BaseUIComponentProps<'div', ComboboxLabel.State>, 'id'> {}
+export declare namespace ComboboxLabel {
+  type State = ComboboxLabelState;
+  type Props = ComboboxLabelProps;
+}