@base-ui/react 1.2.0 → 1.4.0

package/esm/calendar/viewport/CalendarViewportDataAttributes.d.ts

@@ -0,0 +1,23 @@
+export declare enum CalendarViewportDataAttributes {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  current = "data-current",
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  previous = "data-previous",
+  /**
+   * Indicates the direction of the navigation (based on the month navigating to).
+   * @type {'previous' | 'next' | 'none'}
+   */
+  navigationDirection = "data-navigation-direction",
+  /**
+   * Present when the day grid body is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the day grid body is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/esm/calendar/viewport/CalendarViewportDataAttributes.js

@@ -0,0 +1,25 @@
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+export let CalendarViewportDataAttributes = function (CalendarViewportDataAttributes) {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  CalendarViewportDataAttributes["current"] = "data-current";
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  CalendarViewportDataAttributes["previous"] = "data-previous";
+  /**
+   * Indicates the direction of the navigation (based on the month navigating to).
+   * @type {'previous' | 'next' | 'none'}
+   */
+  CalendarViewportDataAttributes["navigationDirection"] = "data-navigation-direction";
+  /**
+   * Present when the day grid body is animating in.
+   */
+  CalendarViewportDataAttributes[CalendarViewportDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the day grid body is animating out.
+   */
+  CalendarViewportDataAttributes[CalendarViewportDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return CalendarViewportDataAttributes;
+}({});

package/esm/checkbox/indicator/CheckboxIndicator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CheckboxRoot } from "../root/CheckboxRoot.js";
+import type { CheckboxRootState } from "../root/CheckboxRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
@@ -9,10 +9,13 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
  */
 export declare const CheckboxIndicator: React.ForwardRefExoticComponent<Omit<CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface CheckboxIndicatorState extends CheckboxRoot.State {
+export interface CheckboxIndicatorState extends CheckboxRootState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface CheckboxIndicatorProps extends BaseUIComponentProps<'span', CheckboxIndicator.State> {
+export interface CheckboxIndicatorProps extends BaseUIComponentProps<'span', CheckboxIndicatorState> {
   /**
    * Whether to keep the element in the DOM when the checkbox is not checked.
    * @default false

package/esm/checkbox/indicator/CheckboxIndicator.js

@@ -19,6 +19,7 @@ export const CheckboxIndicator = /*#__PURE__*/React.forwardRef(function Checkbox
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 export declare const PARENT_CHECKBOX = "data-parent";
@@ -11,7 +11,7 @@ export declare const PARENT_CHECKBOX = "data-parent";
  * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
  */
 export declare const CheckboxRoot: React.ForwardRefExoticComponent<Omit<CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export interface CheckboxRootState extends FieldRoot.State {
+export interface CheckboxRootState extends FieldRootState {
   /**
    * Whether the checkbox is currently ticked.
    */
@@ -33,7 +33,7 @@ export interface CheckboxRootState extends FieldRoot.State {
    */
   indeterminate: boolean;
 }
-export interface CheckboxRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', CheckboxRoot.State>, 'onChange' | 'value'> {
+export interface CheckboxRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', CheckboxRootState>, 'onChange' | 'value'> {
   /**
    * The id of the input element.
    */
@@ -43,6 +43,11 @@ export interface CheckboxRootProps extends NonNativeButtonProps, Omit<BaseUIComp
    * @default undefined
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the hidden input.
+   * Useful when the checkbox is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * Whether the checkbox is currently ticked.
    *

package/esm/checkbox/root/CheckboxRoot.js

@@ -15,10 +15,11 @@ import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { mergeProps } from "../../merge-props/index.js";
 import { useButton } from "../../use-button/useButton.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../field/root/useRegisterFieldControl.js";
 import { useFieldItemContext } from "../../field/item/FieldItemContext.js";
-import { useField } from "../../field/useField.js";
 import { useFormContext } from "../../form/FormContext.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useAriaLabelledBy } from "../../labelable-provider/useAriaLabelledBy.js";
 import { useCheckboxGroupContext } from "../../checkbox-group/CheckboxGroupContext.js";
 import { CheckboxRootContext } from "./CheckboxRootContext.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
@@ -38,7 +39,9 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     checked: checkedProp,
     className,
     defaultChecked = false,
+    'aria-labelledby': ariaLabelledByProp,
     disabled: disabledProp = false,
+    form,
     id: idProp,
     indeterminate = false,
     inputRef: inputRefProp,
@@ -51,6 +54,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     uncheckedValue,
     value: valueProp,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -145,17 +149,14 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
       registerControlId(controlSource, undefined);
     };
   }, [registerControlId, controlSourceRef]);
-  useField({
+  useRegisterFieldControl(controlRef, {
     enabled: !groupContext,
     id,
-    commit: validation.commit,
-    value: checked,
-    controlRef,
-    name,
-    getValue: () => checked
+    value: checked
   });
   const inputRef = React.useRef(null);
   const mergedInputRef = useMergedRefs(inputRefProp, inputRef, validation.inputRef);
+  const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, inputId ?? undefined);
   useIsoLayoutEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = groupIndeterminate;
@@ -180,6 +181,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
   const inputProps = mergeProps({
     checked,
     disabled,
+    form,
     // parent checkboxes unset `name` to be excluded from form submission
     name: parent ? undefined : name,
     // Set `id` to stop Chrome warning about an unassociated input.
@@ -196,7 +198,11 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
       if (event.nativeEvent.defaultPrevented) {
         return;
       }
-      const nextChecked = event.target.checked;
+      if (readOnly) {
+        event.preventDefault();
+        return;
+      }
+      const nextChecked = event.currentTarget.checked;
       const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
       groupOnChange?.(nextChecked, details);
       onCheckedChange(nextChecked, details);
@@ -204,7 +210,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
         return;
       }
       setCheckedState(nextChecked);
-      if (value && groupValue && setGroupValue && !parent) {
+      if (value && groupValue && setGroupValue && !parent && !isGroupedWithParent) {
         const nextGroupValue = nextChecked ? [...groupValue, value] : groupValue.filter(item => item !== value);
         setGroupValue(nextGroupValue, details);
       }
@@ -248,7 +254,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
       'aria-checked': groupIndeterminate ? 'mixed' : checked,
       'aria-readonly': readOnly || undefined,
       'aria-required': required || undefined,
-      'aria-labelledby': labelId,
+      'aria-labelledby': ariaLabelledBy,
       [PARENT_CHECKBOX]: parent ? '' : undefined,
       onFocus() {
         setFocused(true);
@@ -284,10 +290,12 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     value: state,
     children: [element, !checked && !groupContext && name && !parent && uncheckedValue !== undefined && /*#__PURE__*/_jsx("input", {
       type: "hidden",
+      form: form,
       name: name,
       value: uncheckedValue
     }), /*#__PURE__*/_jsx("input", {
-      ...inputProps
+      ...inputProps,
+      suppressHydrationWarning: true
     })]
   });
 });

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CheckboxRoot } from "./CheckboxRoot.js";
-export type CheckboxRootContext = CheckboxRoot.State;
-export declare const CheckboxRootContext: React.Context<import("./CheckboxRoot.js").CheckboxRootState | undefined>;
-export declare function useCheckboxRootContext(): import("./CheckboxRoot.js").CheckboxRootState;
+import type { CheckboxRootState } from "./CheckboxRoot.js";
+export type CheckboxRootContext = CheckboxRootState;
+export declare const CheckboxRootContext: React.Context<CheckboxRootState | undefined>;
+export declare function useCheckboxRootContext(): CheckboxRootState;

package/esm/checkbox/utils/useStateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { CheckboxRoot } from "../root/CheckboxRoot.js";
-export declare function useStateAttributesMapping(state: CheckboxRoot.State): StateAttributesMapping<import("../index.js").CheckboxRootState>;
+import type { CheckboxRootState } from "../root/CheckboxRoot.js";
+export declare function useStateAttributesMapping(state: CheckboxRootState): StateAttributesMapping<CheckboxRootState>;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FieldRoot } from "../field/root/FieldRoot.js";
+import type { FieldRootState } from "../field/root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../utils/types.js";
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../utils/reasons.js";
@@ -9,13 +9,13 @@ 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<Omit<CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface CheckboxGroupState extends FieldRoot.State {
+export interface CheckboxGroupState extends FieldRootState {
   /**
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
 }
-export interface CheckboxGroupProps extends BaseUIComponentProps<'div', CheckboxGroup.State> {
+export interface CheckboxGroupProps extends BaseUIComponentProps<'div', CheckboxGroupState> {
   /**
    * Names of the checkboxes in the group that should be ticked.
    *

package/esm/checkbox-group/CheckboxGroup.js

@@ -7,9 +7,9 @@ import { useBaseUiId } from "../utils/useBaseUiId.js";
 import { useRenderElement } from "../utils/useRenderElement.js";
 import { CheckboxGroupContext } from "./CheckboxGroupContext.js";
 import { useFieldRootContext } from "../field/root/FieldRootContext.js";
+import { useRegisterFieldControl } from "../field/root/useRegisterFieldControl.js";
 import { useLabelableContext } from "../labelable-provider/LabelableContext.js";
 import { fieldValidityMapping } from "../field/utils/constants.js";
-import { useField } from "../field/useField.js";
 import { PARENT_CHECKBOX } from "../checkbox/root/CheckboxRoot.js";
 import { useCheckboxGroupParent } from "./useCheckboxGroupParent.js";
 import { useFormContext } from "../form/FormContext.js";
@@ -27,12 +27,13 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
   const {
     allValues,
     className,
-    defaultValue,
+    defaultValue: defaultValueProp,
     disabled: disabledProp = false,
     id: idProp,
     onValueChange,
     render,
     value: externalValue,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -53,6 +54,12 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
     clearErrors
   } = useFormContext();
   const disabled = fieldDisabled || disabledProp;
+  const defaultValue = React.useMemo(() => {
+    if (externalValue === undefined) {
+      return defaultValueProp ?? [];
+    }
+    return undefined;
+  }, [externalValue, defaultValueProp]);
   const [value, setValueUnwrapped] = useControlled({
     controlled: externalValue,
     default: defaultValue,
@@ -68,8 +75,8 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
   });
   const parent = useCheckboxGroupParent({
     allValues,
-    value: externalValue,
-    onValueChange
+    value,
+    onValueChange: setValue
   });
   const id = useBaseUiId(idProp);
   const controlRef = React.useRef(null);
@@ -78,14 +85,10 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
       controlRef.current = element;
     }
   }, []);
-  useField({
+  useRegisterFieldControl(controlRef, {
     enabled: !!fieldName,
     id,
-    commit: validation.commit,
-    value,
-    controlRef,
-    name: fieldName,
-    getValue: () => value
+    value
   });
   const resolvedValue = value ?? EMPTY_ARRAY;
   useValueChanged(resolvedValue, () => {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { UseFieldValidationReturnValue } from "../field/root/useFieldValidation.js";
-import { useCheckboxGroupParent } from "./useCheckboxGroupParent.js";
+import type { UseCheckboxGroupParentReturnValue } from "./useCheckboxGroupParent.js";
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import type { BaseUIEventReasons } from "../utils/reasons.js";
 export interface CheckboxGroupContext {
@@ -8,7 +8,7 @@ export interface CheckboxGroupContext {
   defaultValue: string[] | undefined;
   setValue: (value: string[], eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   allValues: string[] | undefined;
-  parent: useCheckboxGroupParent.ReturnValue;
+  parent: UseCheckboxGroupParentReturnValue;
   disabled: boolean;
   validation: UseFieldValidationReturnValue;
   registerControlRef: (element: HTMLButtonElement | null) => void;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import type { BaseUIEventReasons } from "../utils/reasons.js";
-export declare function useCheckboxGroupParent(params: useCheckboxGroupParent.Parameters): useCheckboxGroupParent.ReturnValue;
+export declare function useCheckboxGroupParent(params: UseCheckboxGroupParentParameters): UseCheckboxGroupParentReturnValue;
 export interface UseCheckboxGroupParentParameters {
   allValues?: string[] | undefined;
   value?: string[] | undefined;
@@ -23,7 +23,4 @@ export interface UseCheckboxGroupParentReturnValue {
     onCheckedChange: (checked: boolean, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   };
 }
-export declare namespace useCheckboxGroupParent {
-  type Parameters = UseCheckboxGroupParentParameters;
-  type ReturnValue = UseCheckboxGroupParentReturnValue;
-}
+export interface UseCheckboxGroupParentState {}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { CollapsibleRoot } from "../root/CollapsibleRoot.js";
+import type { CollapsibleRootState } from "../root/CollapsibleRoot.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * A panel with the collapsible contents.
@@ -9,12 +9,15 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
 export declare const CollapsiblePanel: React.ForwardRefExoticComponent<Omit<CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface CollapsiblePanelState extends CollapsibleRoot.State {
+export interface CollapsiblePanelState extends CollapsibleRootState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface CollapsiblePanelProps extends BaseUIComponentProps<'div', CollapsiblePanel.State> {
+export interface CollapsiblePanelProps extends BaseUIComponentProps<'div', CollapsiblePanelState> {
   /**
-   * Allows the browser’s built-in page search to find and expand the panel contents.
+   * Allows the browser's built-in page search to find and expand the panel contents.
    *
    * Overrides the `keepMounted` prop and uses `hidden="until-found"`
    * to hide the element without removing it from the DOM.

package/esm/collapsible/panel/CollapsiblePanel.js

@@ -22,6 +22,7 @@ export const CollapsiblePanel = /*#__PURE__*/React.forwardRef(function Collapsib
     keepMounted: keepMountedProp,
     render,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   if (process.env.NODE_ENV !== 'production') {
@@ -123,7 +124,7 @@ export const CollapsiblePanel = /*#__PURE__*/React.forwardRef(function Collapsib
     }, elementProps],
     stateAttributesMapping: collapsibleStateAttributesMapping
   });
-  const shouldRender = keepMounted || hiddenUntilFound || !keepMounted && mounted;
+  const shouldRender = keepMounted || hiddenUntilFound || mounted;
   if (!shouldRender) {
     return null;
   }

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { HTMLProps } from "../../utils/types.js";
 import type { AnimationType, Dimensions } from "../root/useCollapsibleRoot.js";
 import type { CollapsibleRoot } from "../root/CollapsibleRoot.js";
-export declare function useCollapsiblePanel(parameters: useCollapsiblePanel.Parameters): useCollapsiblePanel.ReturnValue;
+export declare function useCollapsiblePanel(parameters: UseCollapsiblePanelParameters): UseCollapsiblePanelReturnValue;
 export interface UseCollapsiblePanelParameters {
   abortControllerRef: React.RefObject<AbortController | null>;
   animationTypeRef: React.RefObject<AnimationType>;
@@ -12,7 +12,7 @@ export interface UseCollapsiblePanelParameters {
    */
   height: number | undefined;
   /**
-   * Allows the browser’s built-in page search to find and expand the panel contents.
+   * Allows the browser's built-in page search to find and expand the panel contents.
    *
    * Overrides the `keepMounted` prop and uses `hidden="until-found"`
    * to hide the element without removing it from the DOM.
@@ -28,7 +28,9 @@ export interface UseCollapsiblePanelParameters {
    */
   keepMounted: boolean;
   /**
-   * Whether the collapsible panel is currently mounted.
+   * Whether the collapsible panel is mounted for transition and hidden-state
+   * purposes. This can be `false` while the element remains in the DOM when
+   * `keepMounted` or `hiddenUntilFound` is enabled.
    */
   mounted: boolean;
   onOpenChange: (open: boolean, eventDetails: CollapsibleRoot.ChangeEventDetails) => void;
@@ -56,7 +58,4 @@ export interface UseCollapsiblePanelParameters {
 export interface UseCollapsiblePanelReturnValue {
   props: HTMLProps;
 }
-export declare namespace useCollapsiblePanel {
-  type Parameters = UseCollapsiblePanelParameters;
-  type ReturnValue = UseCollapsiblePanelReturnValue;
-}
+export interface UseCollapsiblePanelState {}

package/esm/collapsible/panel/useCollapsiblePanel.js

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
@@ -329,10 +330,7 @@ export function useCollapsiblePanel(parameters) {
       setOpen(true);
       onOpenChange(true, createChangeEventDetails(REASONS.none, event));
     }
-    panel.addEventListener('beforematch', handleBeforeMatch);
-    return () => {
-      panel.removeEventListener('beforematch', handleBeforeMatch);
-    };
+    return addEventListener(panel, 'beforematch', handleBeforeMatch);
   }, [onOpenChange, panelRef, setOpen]);
   return React.useMemo(() => ({
     props: {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import { useCollapsibleRoot } from "./useCollapsibleRoot.js";
+import { type UseCollapsibleRootReturnValue } from "./useCollapsibleRoot.js";
 import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 /**
@@ -10,8 +10,8 @@ import { REASONS } from "../../utils/reasons.js";
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
 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> {
+export interface CollapsibleRootState extends Pick<UseCollapsibleRootReturnValue, 'open' | 'disabled'> {}
+export interface CollapsibleRootProps extends BaseUIComponentProps<'div', CollapsibleRootState> {
   /**
    * Whether the collapsible panel is currently open.
    *

package/esm/collapsible/root/CollapsibleRoot.js

@@ -21,6 +21,7 @@ export const CollapsibleRoot = /*#__PURE__*/React.forwardRef(function Collapsibl
     disabled = false,
     onOpenChange: onOpenChangeProp,
     open,
+    style,
     ...elementProps
   } = componentProps;
   const onOpenChange = useStableCallback(onOpenChangeProp);

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import type { useCollapsibleRoot } from "./useCollapsibleRoot.js";
-import type { CollapsibleRoot } from "./CollapsibleRoot.js";
+import type { UseCollapsibleRootReturnValue } from "./useCollapsibleRoot.js";
+import type { CollapsibleRoot, CollapsibleRootState } from "./CollapsibleRoot.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
-export interface CollapsibleRootContext extends useCollapsibleRoot.ReturnValue {
+export interface CollapsibleRootContext extends UseCollapsibleRootReturnValue {
   onOpenChange: (open: boolean, eventDetails: CollapsibleRoot.ChangeEventDetails) => void;
-  state: CollapsibleRoot.State;
+  state: CollapsibleRootState;
   transitionStatus: TransitionStatus;
 }
 export declare const CollapsibleRootContext: React.Context<CollapsibleRootContext | undefined>;

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

@@ -1,3 +1,3 @@
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { CollapsibleRoot } from "./CollapsibleRoot.js";
-export declare const collapsibleStateAttributesMapping: StateAttributesMapping<CollapsibleRoot.State>;
+import type { CollapsibleRootState } from "./CollapsibleRoot.js";
+export declare const collapsibleStateAttributesMapping: StateAttributesMapping<CollapsibleRootState>;

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

@@ -6,7 +6,7 @@ export interface Dimensions {
   height: number | undefined;
   width: number | undefined;
 }
-export declare function useCollapsibleRoot(parameters: useCollapsibleRoot.Parameters): useCollapsibleRoot.ReturnValue;
+export declare function useCollapsibleRoot(parameters: UseCollapsibleRootParameters): UseCollapsibleRootReturnValue;
 export interface UseCollapsibleRootParameters {
   /**
    * Whether the collapsible panel is currently open.
@@ -44,7 +44,9 @@ export interface UseCollapsibleRootReturnValue {
    */
   height: number | undefined;
   /**
-   * Whether the collapsible panel is currently mounted.
+   * Whether the collapsible panel is mounted for transition and hidden-state
+   * purposes. This can be `false` while the element remains in the DOM when
+   * `keepMounted` or `hiddenUntilFound` is enabled.
    */
   mounted: boolean;
   /**
@@ -57,7 +59,7 @@ export interface UseCollapsibleRootReturnValue {
   setDimensions: React.Dispatch<React.SetStateAction<Dimensions>>;
   setHiddenUntilFound: React.Dispatch<React.SetStateAction<boolean>>;
   setKeepMounted: React.Dispatch<React.SetStateAction<boolean>>;
-  setMounted: (open: boolean) => void;
+  setMounted: (nextMounted: boolean) => void;
   setOpen: (open: boolean) => void;
   setPanelIdState: (id: string | undefined) => void;
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
@@ -73,7 +75,4 @@ export interface UseCollapsibleRootReturnValue {
    */
   width: number | undefined;
 }
-export declare namespace useCollapsibleRoot {
-  type Parameters = UseCollapsibleRootParameters;
-  type ReturnValue = UseCollapsibleRootReturnValue;
-}
+export interface UseCollapsibleRootState {}

package/esm/collapsible/root/useCollapsibleRoot.js

@@ -79,13 +79,14 @@ export function useCollapsibleRoot(parameters) {
   });
   useIsoLayoutEffect(() => {
     /**
-     * Unmount immediately when closing in controlled mode and keepMounted={false}
-     * and no CSS animations or transitions are applied
+     * Close immediately in controlled mode when no CSS animations or
+     * transitions are applied. `keepMounted` only keeps the element in the
+     * DOM; `mounted` must still become `false` so the panel regains `hidden`.
      */
-    if (isControlled && animationTypeRef.current === 'none' && !keepMounted && !open) {
+    if (isControlled && animationTypeRef.current === 'none' && !open) {
       setMounted(false);
     }
-  }, [isControlled, keepMounted, open, openParam, setMounted]);
+  }, [isControlled, open, openParam, setMounted]);
   return React.useMemo(() => ({
     abortControllerRef,
     animationTypeRef,

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-import { CollapsibleRoot } from "../root/CollapsibleRoot.js";
+import { type CollapsibleRootState } from "../root/CollapsibleRoot.js";
 /**
  * A button that opens and closes the collapsible panel.
  * Renders a `<button>` element.
@@ -8,7 +8,9 @@ import { CollapsibleRoot } from "../root/CollapsibleRoot.js";
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
 export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface CollapsibleTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', CollapsibleRoot.State> {}
+export interface CollapsibleTriggerState extends CollapsibleRootState {}
+export interface CollapsibleTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', CollapsibleTriggerState> {}
 export declare namespace CollapsibleTrigger {
+  type State = CollapsibleTriggerState;
   type Props = CollapsibleTriggerProps;
 }

package/esm/collapsible/trigger/CollapsibleTrigger.js

@@ -31,6 +31,7 @@ export const CollapsibleTrigger = /*#__PURE__*/React.forwardRef(function Collaps
     id,
     render,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {

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

@@ -4,6 +4,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Displays an element positioned against the anchor.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxArrow: React.ForwardRefExoticComponent<Omit<ComboboxArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxArrowState {
@@ -11,11 +13,20 @@ export interface ComboboxArrowState {
    * Whether the popup is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface ComboboxArrowProps extends BaseUIComponentProps<'div', ComboboxArrow.State> {}
+export interface ComboboxArrowProps extends BaseUIComponentProps<'div', ComboboxArrowState> {}
 export declare namespace ComboboxArrow {
   type State = ComboboxArrowState;
   type Props = ComboboxArrowProps;