@base-ui/react 1.4.0 → 1.5.0

package/esm/drawer/popup/DrawerPopup.js

@@ -5,21 +5,23 @@ import { error } from '@base-ui/utils/error';
 import { SafeReact } from '@base-ui/utils/safeReact';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { FloatingFocusManager } from "../../floating-ui-react/index.js";
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
 import { DrawerBackdropCssVars } from "../backdrop/DrawerBackdropCssVars.js";
 import { DrawerPopupCssVars } from "./DrawerPopupCssVars.js";
 import { DrawerPopupDataAttributes } from "./DrawerPopupDataAttributes.js";
 import { useDialogPortalContext } from "../../dialog/portal/DialogPortalContext.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { COMPOSITE_KEYS } from "../../composite/composite.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { COMPOSITE_KEYS } from "../../internals/composite/composite.js";
 import { useDrawerRootContext } from "../root/DrawerRootContext.js";
 import { useDrawerSnapPoints } from "../root/useDrawerSnapPoints.js";
 import { useDrawerViewportContext } from "../viewport/DrawerViewportContext.js";
-import { EMPTY_OBJECT } from "../../utils/constants.js";
+import { FOCUSABLE_POPUP_PROPS } from "../../utils/popups/index.js";
+
 // Module-level flag to ensure we only register the CSS properties once,
 // regardless of how many Drawer components are mounted.
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -28,7 +30,6 @@ let drawerSwipeVarsRegistered = false;
 /**
  * Removes inheritance of high-frequency drawer swipe CSS variables, which
  * reduces style recalculation cost in complex drawers with deep subtrees.
- * Child elements that need these values can still opt-in by using `inherit`.
  * See https://motion.dev/blog/web-animation-performance-tier-list
  * under the "Improving CSS variable performance" section.
  */
@@ -116,11 +117,11 @@ const stateAttributesMapping = {
  */
 export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(componentProps, forwardedRef) {
   const {
+    render,
     className,
+    style,
     finalFocus,
     initialFocus,
-    render,
-    style,
     ...elementProps
   } = componentProps;
   const {
@@ -149,16 +150,18 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
   const openMethod = store.useState('openMethod');
   const titleElementId = store.useState('titleElementId');
   const role = store.useState('role');
-  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
+  const floatingId = floatingRootContext.useState('floatingId');
+  const popupId = elementProps.id ?? floatingId;
   const swipe = useDrawerViewportContext(true);
-  const swiping = swipe?.swiping ?? false;
-  const swipeStrength = swipe?.swipeStrength ?? null;
+  useDialogPortalContext();
   const {
     snapPoints,
     activeSnapPoint,
     activeSnapPointOffset
   } = useDrawerSnapPoints();
-  useDialogPortalContext();
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
+  const swiping = swipe?.swiping ?? false;
+  const swipeStrength = swipe?.swipeStrength ?? null;
   const [popupHeight, setPopupHeight] = React.useState(0);
   const popupHeightRef = React.useRef(0);
   if (process.env.NODE_ENV !== 'production') {
@@ -273,6 +276,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
     }
   });
   const resolvedInitialFocus = initialFocus === undefined ? store.context.popupRef : initialFocus;
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     open,
     nested,
@@ -318,10 +322,11 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
   const element = useRenderElement('div', componentProps, {
     state,
     props: [rootPopupProps, {
+      id: popupId,
       'aria-labelledby': titleElementId,
       'aria-describedby': descriptionElementId,
       role,
-      tabIndex: -1,
+      ...FOCUSABLE_POPUP_PROPS,
       hidden: !mounted,
       onKeyDown(event) {
         if (COMPOSITE_KEYS.has(event.key)) {
@@ -338,7 +343,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
         [DrawerPopupCssVars.swipeStrength]: typeof swipeStrength === 'number' && Number.isFinite(swipeStrength) && swipeStrength > 0 ? `${swipeStrength}` : '1'
       }
     }, elementProps],
-    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    ref: [forwardedRef, store.context.popupRef, setPopupElement],
     stateAttributesMapping
   });
   return /*#__PURE__*/_jsx(FloatingFocusManager, {

package/esm/drawer/root/DrawerRoot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type DrawerSwipeDirection, type DrawerSnapPoint } from "./DrawerRootContext.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";
 import type { DialogHandle } from "../../dialog/store/DialogHandle.js";
 import type { PayloadChildRenderFunction } from "../../utils/popups/index.js";
 /**

package/esm/drawer/root/DrawerRoot.js

@@ -10,10 +10,9 @@ import { isAndroid } from '@base-ui/utils/detectBrowser';
 import { useId } from '@base-ui/utils/useId';
 import { DrawerRootContext, useDrawerRootContext } from "./DrawerRootContext.js";
 import { Dialog } from "../../dialog/index.js";
-import { IsDrawerContext } from "../../dialog/root/DialogRoot.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { IsDrawerContext, useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
 import { useDrawerProviderContext } from "../provider/DrawerProviderContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -40,9 +39,8 @@ export function DrawerRoot(props) {
     snapPoints,
     snapPoint: snapPointProp,
     defaultSnapPoint,
-    onSnapPointChange: onSnapPointChangeProp
+    onSnapPointChange
   } = props;
-  const onSnapPointChange = useStableCallback(onSnapPointChangeProp);
   const parentDrawerRootContext = useDrawerRootContext(true);
   const notifyParentSwipeProgressChange = parentDrawerRootContext?.onNestedSwipeProgressChange;
   const notifyParentFrontmostHeight = parentDrawerRootContext?.onNestedFrontmostHeightChange;
@@ -191,10 +189,12 @@ function createNestedSwipeProgressStore() {
 function DrawerProviderReporter() {
   const drawerId = useId();
   const providerContext = useDrawerProviderContext(true);
-  const dialogRootContext = useDialogRootContext(false);
-  const open = dialogRootContext.store.useState('open');
-  const nestedOpenDialogCount = dialogRootContext.store.useState('nestedOpenDialogCount');
-  const popupElement = dialogRootContext.store.useState('popupElement');
+  const {
+    store
+  } = useDialogRootContext(false);
+  const open = store.useState('open');
+  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const popupElement = store.useState('popupElement');
   const isTopmost = nestedOpenDialogCount === 0;
   React.useEffect(() => {
     if (!providerContext || drawerId == null) {
@@ -222,10 +222,10 @@ function DrawerProviderReporter() {
       return undefined;
     }
     function handleCloseWatcher(event) {
-      if (!dialogRootContext.store.select('open')) {
+      if (!store.select('open')) {
         return;
       }
-      dialogRootContext.store.setOpen(false, createChangeEventDetails(REASONS.closeWatcher, event));
+      store.setOpen(false, createChangeEventDetails(REASONS.closeWatcher, event));
     }
     const closeWatcher = new CloseWatcherCtor();
     const unsubscribe = addEventListener(closeWatcher, 'close', handleCloseWatcher);
@@ -233,6 +233,6 @@ function DrawerProviderReporter() {
       unsubscribe();
       closeWatcher.destroy();
     };
-  }, [dialogRootContext.store, isTopmost, open, popupElement]);
+  }, [store, isTopmost, open, popupElement]);
   return null;
 }

package/esm/drawer/root/DrawerRootContext.d.ts

@@ -10,7 +10,7 @@ export interface DrawerNestedSwipeProgressStore {
 export interface DrawerRootContext {
   swipeDirection: DrawerSwipeDirection;
   /**
-   * Whether snap points can be skipped based on swipe velocity.
+   * Whether to disable velocity-based snap skipping.
    */
   snapToSequentialPoints: boolean;
   /**

package/esm/drawer/root/useDrawerSnapPoints.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { clamp } from "../../utils/clamp.js";
+import { clamp } from "../../internals/clamp.js";
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
 import { useDrawerRootContext } from "./DrawerRootContext.js";
 function resolveSnapPointValue(snapPoint, viewportHeight, rootFontSize) {

package/esm/drawer/swipe-area/DrawerSwipeArea.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import { type SwipeDirection } from "../../utils/useSwipeDismiss.js";
 import { type DrawerSwipeDirection } from "../root/DrawerRootContext.js";
 /**

package/esm/drawer/swipe-area/DrawerSwipeArea.js

@@ -4,15 +4,15 @@ import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { getDisplacement, getElementTransform, useSwipeDismiss } from "../../utils/useSwipeDismiss.js";
 import { DrawerPopupCssVars } from "../popup/DrawerPopupCssVars.js";
 import { DrawerPopupDataAttributes } from "../popup/DrawerPopupDataAttributes.js";
 import { DrawerBackdropCssVars } from "../backdrop/DrawerBackdropCssVars.js";
 import { useDrawerRootContext } from "../root/DrawerRootContext.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { useTriggerRegistration } from "../../utils/popups/index.js";
 import { useDrawerProviderContext } from "../provider/DrawerProviderContext.js";
 import { DrawerSwipeAreaDataAttributes } from "./DrawerSwipeAreaDataAttributes.js";
@@ -66,11 +66,11 @@ function resolveTouchAction(direction) {
  */
 export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     disabled = false,
     swipeDirection: swipeDirectionProp,
-    style,
     ...elementProps
   } = componentProps;
   const {
@@ -96,13 +96,13 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
   const swipeAreaId = useBaseUiId(componentProps.id);
   const registerTrigger = useTriggerRegistration(swipeAreaId, store);
   const open = store.useState('open');
-  const resolvedSwipeDirection = swipeDirectionProp ?? oppositeSwipeDirection[swipeDirection];
-  const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
-  const enabled = !disabled && (!open || swipeActive);
   const resetDragDelta = useStableCallback(() => {
     dragDeltaRef.current.x = 0;
     dragDeltaRef.current.y = 0;
   });
+  const resolvedSwipeDirection = swipeDirectionProp ?? oppositeSwipeDirection[swipeDirection];
+  const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
+  const enabled = !disabled && (!open || swipeActive);
   function disableDismissForSwipe() {
     releaseDismissTimeout.clear();
     store.context.outsidePressEnabledRef.current = false;
@@ -355,6 +355,7 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
           return;
         }
         swipePointerProps.onPointerDown?.(event);
+
         // Prevent native text selection/drag gestures from competing with swipe-open dragging.
         if (event.cancelable) {
           event.preventDefault();

package/esm/drawer/title/DrawerTitle.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A heading that labels the drawer.
  * Renders an `<h2>` element.

package/esm/drawer/trigger/DrawerTrigger.d.ts

@@ -1,6 +1,6 @@
 import type * as React from 'react';
 import type { DialogHandle as DrawerHandle } from "../../dialog/store/DialogHandle.js";
-import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 /**
  * A button that opens the drawer.
  * Renders a `<button>` element.

package/esm/drawer/viewport/DrawerViewport.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A positioning container for the drawer popup that can be made scrollable.
  * Renders a `<div>` element.

package/esm/drawer/viewport/DrawerViewport.js

@@ -13,19 +13,19 @@ import { mergeProps } from "../../merge-props/index.js";
 import { useDrawerRootContext } from "../root/DrawerRootContext.js";
 import { useDrawerSnapPoints } from "../root/useDrawerSnapPoints.js";
 import { useDrawerProviderContext } from "../provider/DrawerProviderContext.js";
-import { clamp } from "../../utils/clamp.js";
+import { clamp } from "../../internals/clamp.js";
 import { useSwipeDismiss } from "../../utils/useSwipeDismiss.js";
 import { DrawerPopupCssVars } from "../popup/DrawerPopupCssVars.js";
 import { DrawerPopupDataAttributes } from "../popup/DrawerPopupDataAttributes.js";
 import { DrawerBackdropCssVars } from "../backdrop/DrawerBackdropCssVars.js";
 import { DRAWER_CONTENT_ATTRIBUTE } from "../content/DrawerContentDataAttributes.js";
-import { REASONS } from "../../utils/reasons.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { activeElement, contains, getTarget } from "../../floating-ui-react/utils.js";
 import { DrawerViewportContext } from "./DrawerViewportContext.js";
-import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.js";
 import { findScrollableTouchTarget } from "../../utils/scrollable.js";
-import { BASE_UI_SWIPE_IGNORE_SELECTOR } from "../../utils/constants.js";
+import { BASE_UI_SWIPE_IGNORE_SELECTOR } from "../../internals/constants.js";
 import { getElementAtPoint } from "../../utils/getElementAtPoint.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MIN_SWIPE_THRESHOLD = 10;
@@ -48,8 +48,8 @@ const DRAWER_CONTENT_SELECTOR = `[${DRAWER_CONTENT_ATTRIBUTE}]`;
  */
 export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(props, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     children,
     ...elementProps
@@ -65,25 +65,25 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     snapToSequentialPoints
   } = useDrawerRootContext();
   const providerContext = useDrawerProviderContext(true);
-  const visualStateStore = providerContext?.visualStateStore;
+  const {
+    snapPoints,
+    resolvedSnapPoints,
+    activeSnapPoint,
+    activeSnapPointOffset,
+    setActiveSnapPoint,
+    popupHeight
+  } = useDrawerSnapPoints();
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const nested = store.useState('nested');
   const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
   const viewportElement = store.useState('viewportElement');
   const popupElementState = store.useState('popupElement');
+  const visualStateStore = providerContext?.visualStateStore;
   const nestedDrawerOpen = nestedOpenDrawerCount > 0;
   const scrollAxis = swipeDirection === 'left' || swipeDirection === 'right' ? 'horizontal' : 'vertical';
   const isVerticalScrollAxis = scrollAxis === 'vertical';
   const crossScrollAxis = isVerticalScrollAxis ? 'horizontal' : 'vertical';
-  const {
-    snapPoints,
-    resolvedSnapPoints,
-    activeSnapPoint,
-    activeSnapPointOffset,
-    setActiveSnapPoint,
-    popupHeight
-  } = useDrawerSnapPoints();
   const [swipeRelease, setSwipeRelease] = React.useState(null);
   const pendingSwipeCloseSnapPointRef = React.useRef(undefined);
   const resetSwipeRef = React.useRef(null);
@@ -696,10 +696,8 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     swiping: swipe.swiping,
     getDragStyles: swipe.getDragStyles,
     swipeStrength: swipeRelease ?? null,
-    setSwipeDismissed(dismissed) {
-      setSwipeDismissedElements(store.context.popupRef.current, store.context.backdropRef.current, dismissed);
-    }
-  }), [store, swipe.getDragStyles, swipe.swiping, swipeRelease]);
+    setSwipeDismissed
+  }), [setSwipeDismissed, swipe.getDragStyles, swipe.swiping, swipeRelease]);
   function resetTouchTrackingState() {
     ignoreTouchSwipeRef.current = false;
     touchScrollStateRef.current = null;
@@ -709,6 +707,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   return /*#__PURE__*/_jsx(DialogViewport, {
     ref: forwardedRef,
     className: className,
+    style: style,
     render: render,
     ...mergeProps(elementProps, {
       onPointerDown(event) {

package/esm/field/control/FieldControl.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { type FieldRootState } from "../root/FieldRoot.js";
-import { BaseUIComponentProps } from "../../utils/types.js";
-import { REASONS } from "../../utils/reasons.js";
-import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
+import { REASONS } from "../../internals/reasons.js";
+import type { BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 /**
  * The form control to label and validate.
  * Renders an `<input>` element.

package/esm/field/control/FieldControl.js

@@ -5,14 +5,14 @@ import { useControlled } from '@base-ui/utils/useControlled';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useFieldRootContext } from "../root/FieldRootContext.js";
-import { useRegisterFieldControl } from "../root/useRegisterFieldControl.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
-import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
-import { fieldValidityMapping } from "../utils/constants.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { activeElement } from "../../floating-ui-react/utils.js";
 
 /**
@@ -85,12 +85,8 @@ export const FieldControl = /*#__PURE__*/React.forwardRef(function FieldControl(
   });
   const isControlled = valueProp !== undefined;
   const value = isControlled ? valueUnwrapped : undefined;
-  const getFieldValue = useStableCallback(() => validation.inputRef.current?.value);
-  useRegisterFieldControl(validation.inputRef, {
-    id,
-    value,
-    getValue: getFieldValue
-  });
+  const getValueFromInput = useStableCallback(() => validation.inputRef.current?.value);
+  useRegisterFieldControl(validation.inputRef, id, value, getValueFromInput);
   const element = useRenderElement('input', componentProps, {
     ref: [forwardedRef, inputRef],
     state,

package/esm/field/control/FieldControlDataAttributes.d.ts

@@ -4,11 +4,11 @@ export declare enum FieldControlDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   valid = "data-valid",
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   invalid = "data-invalid",
   /**

package/esm/field/control/FieldControlDataAttributes.js

@@ -4,11 +4,11 @@ export let FieldControlDataAttributes = /*#__PURE__*/function (FieldControlDataA
    */
   FieldControlDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   FieldControlDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   FieldControlDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/field/description/FieldDescription.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type FieldRootState } from "../root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A paragraph with additional information about the field.
  * Renders a `<p>` element.

package/esm/field/description/FieldDescription.js

@@ -2,11 +2,11 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useFieldRootContext } from "../root/FieldRootContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
-import { fieldValidityMapping } from "../utils/constants.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * A paragraph with additional information about the field.

package/esm/field/description/FieldDescriptionDataAttributes.d.ts

@@ -4,11 +4,11 @@ export declare enum FieldDescriptionDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   valid = "data-valid",
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   invalid = "data-invalid",
   /**

package/esm/field/description/FieldDescriptionDataAttributes.js

@@ -4,11 +4,11 @@ export let FieldDescriptionDataAttributes = /*#__PURE__*/function (FieldDescript
    */
   FieldDescriptionDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   FieldDescriptionDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   FieldDescriptionDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/field/error/FieldError.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type FieldRootState } from "../root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * An error message displayed if the field control fails validation.
  * Renders a `<div>` element.

package/esm/field/error/FieldError.js

@@ -2,15 +2,15 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useFieldRootContext } from "../root/FieldRootContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
-import { fieldValidityMapping } from "../utils/constants.js";
-import { useFormContext } from "../../form/FormContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useFormContext } from "../../internals/form-context/FormContext.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...fieldValidityMapping,

package/esm/field/error/FieldErrorDataAttributes.d.ts

@@ -4,11 +4,11 @@ export declare enum FieldErrorDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   valid = "data-valid",
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   invalid = "data-invalid",
   /**

package/esm/field/error/FieldErrorDataAttributes.js

@@ -1,15 +1,15 @@
-import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.js";
 export let FieldErrorDataAttributes = function (FieldErrorDataAttributes) {
   /**
    * Present when the field is disabled.
    */
   FieldErrorDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   FieldErrorDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   FieldErrorDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/field/item/FieldItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type FieldRootState } from "../root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Groups individual items in a checkbox group or radio group with a label and description.
  * Renders a `<div>` element.

package/esm/field/item/FieldItem.js

@@ -1,11 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { useFieldRootContext } from "../root/FieldRootContext.js";
-import { fieldValidityMapping } from "../utils/constants.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { FieldItemContext } from "./FieldItemContext.js";
-import { LabelableProvider } from "../../labelable-provider/index.js";
+import { LabelableProvider } from "../../internals/labelable-provider/index.js";
 import { useCheckboxGroupContext } from "../../checkbox-group/CheckboxGroupContext.js";
 
 /**
@@ -29,11 +29,8 @@ export const FieldItem = /*#__PURE__*/React.forwardRef(function FieldItem(compon
   } = useFieldRootContext(false);
   const disabled = rootDisabled || disabledProp;
   const checkboxGroupContext = useCheckboxGroupContext();
-  // checkboxGroupContext.parent is truthy even if no parent checkbox is involved
-  const parentId = checkboxGroupContext?.parent.id;
-  // this a more reliable check
   const hasParentCheckbox = checkboxGroupContext?.allValues !== undefined;
-  const controlId = hasParentCheckbox ? parentId : undefined;
+  const controlId = hasParentCheckbox ? checkboxGroupContext?.parent.id : undefined;
   const fieldItemContext = React.useMemo(() => ({
     disabled
   }), [disabled]);