@base-ui/react 1.3.0 → 1.4.1

package/checkbox/indicator/CheckboxIndicatorDataAttributes.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CheckboxIndicatorDataAttributes = void 0;
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 let CheckboxIndicatorDataAttributes = exports.CheckboxIndicatorDataAttributes = function (CheckboxIndicatorDataAttributes) {
   /**
    * Present when the checkbox is checked.
@@ -39,11 +39,11 @@ let CheckboxIndicatorDataAttributes = exports.CheckboxIndicatorDataAttributes =
    */
   CheckboxIndicatorDataAttributes[CheckboxIndicatorDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   /**
-   * Present when the checkbox is in valid state (when wrapped in Field.Root).
+   * Present when the checkbox is in a valid state (when wrapped in Field.Root).
    */
   CheckboxIndicatorDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the checkbox is in invalid state (when wrapped in Field.Root).
+   * Present when the checkbox is in an invalid state (when wrapped in Field.Root).
    */
   CheckboxIndicatorDataAttributes["invalid"] = "data-invalid";
   /**

package/checkbox/root/CheckboxRoot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.js";
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
-import { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 export declare const PARENT_CHECKBOX = "data-parent";
 /**
  * Represents the checkbox itself.
@@ -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/checkbox/root/CheckboxRoot.js

@@ -14,23 +14,23 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
-var _noop = require("../../utils/noop");
+var _noop = require("../../internals/noop");
 var _useStateAttributesMapping = require("../utils/useStateAttributesMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 var _mergeProps = require("../../merge-props");
-var _useButton = require("../../use-button/useButton");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _useButton = require("../../internals/use-button/useButton");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _useRegisterFieldControl = require("../../internals/field-register-control/useRegisterFieldControl");
 var _FieldItemContext = require("../../field/item/FieldItemContext");
-var _useField = require("../../field/useField");
-var _FormContext = require("../../form/FormContext");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
-var _useAriaLabelledBy = require("../../labelable-provider/useAriaLabelledBy");
+var _FormContext = require("../../internals/form-context/FormContext");
+var _LabelableContext = require("../../internals/labelable-provider/LabelableContext");
+var _useAriaLabelledBy = require("../../internals/labelable-provider/useAriaLabelledBy");
 var _CheckboxGroupContext = require("../../checkbox-group/CheckboxGroupContext");
 var _CheckboxRootContext = require("./CheckboxRootContext");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
-var _useValueChanged = require("../../utils/useValueChanged");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+var _useValueChanged = require("../../internals/useValueChanged");
 var _jsxRuntime = require("react/jsx-runtime");
 const PARENT_CHECKBOX = exports.PARENT_CHECKBOX = 'data-parent';
 
@@ -47,6 +47,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
     defaultChecked = false,
     'aria-labelledby': ariaLabelledByProp,
     disabled: disabledProp = false,
+    form,
     id: idProp,
     indeterminate = false,
     inputRef: inputRefProp,
@@ -59,6 +60,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
     uncheckedValue,
     value: valueProp,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -153,14 +155,10 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
       registerControlId(controlSource, undefined);
     };
   }, [registerControlId, controlSourceRef]);
-  (0, _useField.useField)({
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
     enabled: !groupContext,
     id,
-    commit: validation.commit,
-    value: checked,
-    controlRef,
-    name,
-    getValue: () => checked
+    value: checked
   });
   const inputRef = React.useRef(null);
   const mergedInputRef = (0, _useMergedRefs.useMergedRefs)(inputRefProp, inputRef, validation.inputRef);
@@ -189,6 +187,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
   const inputProps = (0, _mergeProps.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.
@@ -205,7 +204,11 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
       if (event.nativeEvent.defaultPrevented) {
         return;
       }
-      const nextChecked = event.target.checked;
+      if (readOnly) {
+        event.preventDefault();
+        return;
+      }
+      const nextChecked = event.currentTarget.checked;
       const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
       groupOnChange?.(nextChecked, details);
       onCheckedChange(nextChecked, details);
@@ -213,7 +216,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
         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);
       }
@@ -293,10 +296,12 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
     value: state,
     children: [element, !checked && !groupContext && name && !parent && uncheckedValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "hidden",
+      form: form,
       name: name,
       value: uncheckedValue
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      ...inputProps
+      ...inputProps,
+      suppressHydrationWarning: true
     })]
   });
 });

package/checkbox/root/CheckboxRootDataAttributes.d.ts

@@ -24,11 +24,11 @@ export declare enum CheckboxRootDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the checkbox is in valid state (when wrapped in Field.Root).
+   * Present when the checkbox is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the checkbox is in invalid state (when wrapped in Field.Root).
+   * Present when the checkbox is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/checkbox/root/CheckboxRootDataAttributes.js

@@ -30,11 +30,11 @@ let CheckboxRootDataAttributes = exports.CheckboxRootDataAttributes = /*#__PURE_
    */
   CheckboxRootDataAttributes["required"] = "data-required";
   /**
-   * Present when the checkbox is in valid state (when wrapped in Field.Root).
+   * Present when the checkbox is in a valid state (when wrapped in Field.Root).
    */
   CheckboxRootDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the checkbox is in invalid state (when wrapped in Field.Root).
+   * Present when the checkbox is in an invalid state (when wrapped in Field.Root).
    */
   CheckboxRootDataAttributes["invalid"] = "data-invalid";
   /**

package/checkbox/utils/useStateAttributesMapping.d.ts

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

package/checkbox/utils/useStateAttributesMapping.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useStateAttributesMapping = useStateAttributesMapping;
 var React = _interopRequireWildcard(require("react"));
 var _CheckboxRootDataAttributes = require("../root/CheckboxRootDataAttributes");
-var _constants = require("../../field/utils/constants");
+var _constants = require("../../internals/field-constants/constants");
 function useStateAttributesMapping(state) {
   return React.useMemo(() => ({
     checked(value) {

package/checkbox-group/CheckboxGroup.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 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";
+import type { BaseUIComponentProps } from "../internals/types.js";
+import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../internals/reasons.js";
 /**
  * Provides a shared state to a series of checkboxes.
  *

package/checkbox-group/CheckboxGroup.js

@@ -9,19 +9,19 @@ exports.CheckboxGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useBaseUiId = require("../utils/useBaseUiId");
-var _useRenderElement = require("../utils/useRenderElement");
+var _empty = require("@base-ui/utils/empty");
+var _useBaseUiId = require("../internals/useBaseUiId");
+var _useRenderElement = require("../internals/useRenderElement");
 var _CheckboxGroupContext = require("./CheckboxGroupContext");
-var _FieldRootContext = require("../field/root/FieldRootContext");
-var _LabelableContext = require("../labelable-provider/LabelableContext");
-var _constants = require("../field/utils/constants");
-var _useField = require("../field/useField");
+var _FieldRootContext = require("../internals/field-root-context/FieldRootContext");
+var _useRegisterFieldControl = require("../internals/field-register-control/useRegisterFieldControl");
+var _LabelableContext = require("../internals/labelable-provider/LabelableContext");
+var _constants = require("../internals/field-constants/constants");
 var _CheckboxRoot = require("../checkbox/root/CheckboxRoot");
 var _useCheckboxGroupParent = require("./useCheckboxGroupParent");
-var _FormContext = require("../form/FormContext");
-var _useValueChanged = require("../utils/useValueChanged");
-var _areArraysEqual = require("../utils/areArraysEqual");
-var _constants2 = require("../utils/constants");
+var _FormContext = require("../internals/form-context/FormContext");
+var _useValueChanged = require("../internals/useValueChanged");
+var _areArraysEqual = require("../internals/areArraysEqual");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Provides a shared state to a series of checkboxes.
@@ -32,12 +32,13 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
   const {
     allValues,
     className,
-    defaultValue,
+    defaultValue: defaultValueProp,
     disabled: disabledProp = false,
     id: idProp,
     onValueChange,
     render,
     value: externalValue,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -58,6 +59,12 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
     clearErrors
   } = (0, _FormContext.useFormContext)();
   const disabled = fieldDisabled || disabledProp;
+  const defaultValue = React.useMemo(() => {
+    if (externalValue === undefined) {
+      return defaultValueProp ?? [];
+    }
+    return undefined;
+  }, [externalValue, defaultValueProp]);
   const [value, setValueUnwrapped] = (0, _useControlled.useControlled)({
     controlled: externalValue,
     default: defaultValue,
@@ -73,8 +80,8 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
   });
   const parent = (0, _useCheckboxGroupParent.useCheckboxGroupParent)({
     allValues,
-    value: externalValue,
-    onValueChange
+    value,
+    onValueChange: setValue
   });
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const controlRef = React.useRef(null);
@@ -83,21 +90,17 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
       controlRef.current = element;
     }
   }, []);
-  (0, _useField.useField)({
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
     enabled: !!fieldName,
     id,
-    commit: validation.commit,
-    value,
-    controlRef,
-    name: fieldName,
-    getValue: () => value
+    value
   });
-  const resolvedValue = value ?? _constants2.EMPTY_ARRAY;
+  const resolvedValue = value ?? _empty.EMPTY_ARRAY;
   (0, _useValueChanged.useValueChanged)(resolvedValue, () => {
     if (fieldName) {
       clearErrors(fieldName);
     }
-    const initialValue = Array.isArray(validityData.initialValue) ? validityData.initialValue : _constants2.EMPTY_ARRAY;
+    const initialValue = Array.isArray(validityData.initialValue) ? validityData.initialValue : _empty.EMPTY_ARRAY;
     setFilled(resolvedValue.length > 0);
     setDirty(!(0, _areArraysEqual.areArraysEqual)(resolvedValue, initialValue));
     if (shouldValidateOnChange()) {

package/checkbox-group/CheckboxGroupContext.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { UseFieldValidationReturnValue } from "../field/root/useFieldValidation.js";
 import type { UseCheckboxGroupParentReturnValue } from "./useCheckboxGroupParent.js";
-import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
-import type { BaseUIEventReasons } from "../utils/reasons.js";
+import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import type { BaseUIEventReasons } from "../internals/reasons.js";
 export interface CheckboxGroupContext {
   value: string[] | undefined;
   defaultValue: string[] | undefined;

package/checkbox-group/useCheckboxGroupParent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
-import type { BaseUIEventReasons } from "../utils/reasons.js";
+import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import type { BaseUIEventReasons } from "../internals/reasons.js";
 export declare function useCheckboxGroupParent(params: UseCheckboxGroupParentParameters): UseCheckboxGroupParentReturnValue;
 export interface UseCheckboxGroupParentParameters {
   allValues?: string[] | undefined;

package/checkbox-group/useCheckboxGroupParent.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useCheckboxGroupParent = useCheckboxGroupParent;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useBaseUiId = require("../utils/useBaseUiId");
+var _useBaseUiId = require("../internals/useBaseUiId");
 const EMPTY = [];
 function useCheckboxGroupParent(params) {
   const {

package/collapsible/panel/CollapsiblePanel.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 import type { CollapsibleRootState } from "../root/CollapsibleRoot.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A panel with the collapsible contents.
  * Renders a `<div>` element.
@@ -17,7 +17,7 @@ export interface CollapsiblePanelState extends CollapsibleRootState {
 }
 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/collapsible/panel/CollapsiblePanel.js

@@ -9,12 +9,12 @@ exports.CollapsiblePanel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _warn = require("@base-ui/utils/warn");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _CollapsibleRootContext = require("../root/CollapsibleRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
 var _useCollapsiblePanel = require("./useCollapsiblePanel");
 var _CollapsiblePanelCssVars = require("./CollapsiblePanelCssVars");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
 /**
  * A panel with the collapsible contents.
  * Renders a `<div>` element.
@@ -28,6 +28,7 @@ const CollapsiblePanel = exports.CollapsiblePanel = /*#__PURE__*/React.forwardRe
     keepMounted: keepMountedProp,
     render,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   if (process.env.NODE_ENV !== 'production') {
@@ -129,7 +130,7 @@ const CollapsiblePanel = exports.CollapsiblePanel = /*#__PURE__*/React.forwardRe
     }, elementProps],
     stateAttributesMapping: _stateAttributesMapping.collapsibleStateAttributesMapping
   });
-  const shouldRender = keepMounted || hiddenUntilFound || !keepMounted && mounted;
+  const shouldRender = keepMounted || hiddenUntilFound || mounted;
   if (!shouldRender) {
     return null;
   }

package/collapsible/panel/CollapsiblePanelDataAttributes.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CollapsiblePanelDataAttributes = void 0;
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 let CollapsiblePanelDataAttributes = exports.CollapsiblePanelDataAttributes = function (CollapsiblePanelDataAttributes) {
   /**
    * Present when the collapsible panel is open.

package/collapsible/panel/useCollapsiblePanel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLProps } from "../../utils/types.js";
+import { HTMLProps } from "../../internals/types.js";
 import type { AnimationType, Dimensions } from "../root/useCollapsibleRoot.js";
 import type { CollapsibleRoot } from "../root/CollapsibleRoot.js";
 export declare function useCollapsiblePanel(parameters: UseCollapsiblePanelParameters): UseCollapsiblePanelReturnValue;
@@ -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;

package/collapsible/panel/useCollapsiblePanel.js

@@ -7,14 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCollapsiblePanel = useCollapsiblePanel;
 var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useOnMount = require("@base-ui/utils/useOnMount");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _warn = require("@base-ui/utils/warn");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _CollapsiblePanelDataAttributes = require("./CollapsiblePanelDataAttributes");
 var _AccordionRootDataAttributes = require("../../accordion/root/AccordionRootDataAttributes");
 function useCollapsiblePanel(parameters) {
@@ -335,10 +336,7 @@ function useCollapsiblePanel(parameters) {
       setOpen(true);
       onOpenChange(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event));
     }
-    panel.addEventListener('beforematch', handleBeforeMatch);
-    return () => {
-      panel.removeEventListener('beforematch', handleBeforeMatch);
-    };
+    return (0, _addEventListener.addEventListener)(panel, 'beforematch', handleBeforeMatch);
   }, [onOpenChange, panelRef, setOpen]);
   return React.useMemo(() => ({
     props: {

package/collapsible/root/CollapsibleRoot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 import { type UseCollapsibleRootReturnValue } from "./useCollapsibleRoot.js";
-import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import type { BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 /**
  * Groups all parts of the collapsible.
  * Renders a `<div>` element.

package/collapsible/root/CollapsibleRoot.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CollapsibleRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _useCollapsibleRoot = require("./useCollapsibleRoot");
 var _CollapsibleRootContext = require("./CollapsibleRootContext");
 var _stateAttributesMapping = require("./stateAttributesMapping");
@@ -27,6 +27,7 @@ const CollapsibleRoot = exports.CollapsibleRoot = /*#__PURE__*/React.forwardRef(
     disabled = false,
     onOpenChange: onOpenChangeProp,
     open,
+    style,
     ...elementProps
   } = componentProps;
   const onOpenChange = (0, _useStableCallback.useStableCallback)(onOpenChangeProp);

package/collapsible/root/CollapsibleRootContext.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { UseCollapsibleRootReturnValue } from "./useCollapsibleRoot.js";
 import type { CollapsibleRoot, CollapsibleRootState } from "./CollapsibleRoot.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 export interface CollapsibleRootContext extends UseCollapsibleRootReturnValue {
   onOpenChange: (open: boolean, eventDetails: CollapsibleRoot.ChangeEventDetails) => void;
   state: CollapsibleRootState;

package/collapsible/root/stateAttributesMapping.d.ts

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

package/collapsible/root/stateAttributesMapping.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.collapsibleStateAttributesMapping = void 0;
 var _collapsibleOpenStateMapping = require("../../utils/collapsibleOpenStateMapping");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 const collapsibleStateAttributesMapping = exports.collapsibleStateAttributesMapping = {
   ..._collapsibleOpenStateMapping.collapsibleOpenStateMapping,
   ..._stateAttributesMapping.transitionStatusMapping

package/collapsible/root/useCollapsibleRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import { TransitionStatus } from "../../internals/useTransitionStatus.js";
 import type { CollapsibleRoot } from "./CollapsibleRoot.js";
 export type AnimationType = 'css-transition' | 'css-animation' | 'none' | null;
 export interface Dimensions {
@@ -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>>;

package/collapsible/root/useCollapsibleRoot.js

@@ -10,11 +10,11 @@ var React = _interopRequireWildcard(require("react"));
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useBaseUiId = require("../../utils/useBaseUiId");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
-var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
-var _useTransitionStatus = require("../../utils/useTransitionStatus");
+var _useBaseUiId = require("../../internals/useBaseUiId");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+var _useAnimationsFinished = require("../../internals/useAnimationsFinished");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
 function useCollapsibleRoot(parameters) {
   const {
     open: openParam,
@@ -85,13 +85,14 @@ function useCollapsibleRoot(parameters) {
   });
   (0, _useIsoLayoutEffect.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/collapsible/trigger/CollapsibleTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import { type CollapsibleRootState } from "../root/CollapsibleRoot.js";
 /**
  * A button that opens and closes the collapsible panel.

package/collapsible/trigger/CollapsibleTrigger.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.CollapsibleTrigger = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _collapsibleOpenStateMapping = require("../../utils/collapsibleOpenStateMapping");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useButton = require("../../use-button");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useButton = require("../../internals/use-button");
 var _CollapsibleRootContext = require("../root/CollapsibleRootContext");
 const stateAttributesMapping = {
   ..._collapsibleOpenStateMapping.triggerOpenStateMapping,
@@ -37,6 +37,7 @@ const CollapsibleTrigger = exports.CollapsibleTrigger = /*#__PURE__*/React.forwa
     id,
     render,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/combobox/arrow/ComboboxArrow.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/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 {