@base-ui/react 1.3.0 → 1.4.1

package/esm/drawer/popup/DrawerPopup.js

@@ -1,23 +1,25 @@
 'use client';
 
 import * as React from 'react';
+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";
 // 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";
@@ -118,6 +120,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
     finalFocus,
     initialFocus,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -140,13 +143,13 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
   const modal = store.useState('modal');
   const mounted = store.useState('mounted');
   const nested = store.useState('nested');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
   const transitionStatus = store.useState('transitionStatus');
   const open = store.useState('open');
   const openMethod = store.useState('openMethod');
   const titleElementId = store.useState('titleElementId');
   const role = store.useState('role');
-  const nestedDrawerOpen = nestedOpenDialogCount > 0;
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
   const swipe = useDrawerViewportContext(true);
   const swiping = swipe?.swiping ?? false;
   const swipeStrength = swipe?.swipeStrength ?? null;
@@ -158,6 +161,17 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
   useDialogPortalContext();
   const [popupHeight, setPopupHeight] = React.useState(0);
   const popupHeightRef = React.useRef(0);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (swipe) {
+        return;
+      }
+      const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+      const message = '<Drawer.Popup> expected to be rendered within <Drawer.Viewport>. Omitting the ' + 'viewport disables drawer swipe handling and touch scroll locking. Wrap ' + '<Drawer.Popup> in <Drawer.Viewport>.';
+      error(`${message}${ownerStackMessage}`);
+    }, [swipe]);
+  }
   const measureHeight = useStableCallback(() => {
     const popupElement = store.context.popupRef.current;
     if (!popupElement) {
@@ -317,7 +331,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
       style: {
         ...dragStyles,
         [DrawerBackdropCssVars.swipeProgress]: '0',
-        [DrawerPopupCssVars.nestedDrawers]: nestedOpenDialogCount,
+        [DrawerPopupCssVars.nestedDrawers]: nestedOpenDrawerCount,
         [DrawerPopupCssVars.height]: popupHeightCssVarValue,
         [DrawerPopupCssVars.snapPointOffset]: typeof snapPointOffsetValue === 'number' ? `${snapPointOffsetValue}px` : '0px',
         [DrawerPopupCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined,

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";
 /**
@@ -62,7 +62,7 @@ export interface DrawerRootProps<Payload = unknown> {
   /**
    * ID of the trigger that the drawer is associated with.
    * This is useful in conjunction with the `open` prop to create a controlled drawer.
-   * There's no need to specify this prop when the drawer is uncontrolled (i.e. when the `open` prop is not set).
+   * There's no need to specify this prop when the drawer is uncontrolled (that is, when the `open` prop is not set).
    */
   triggerId?: string | null | undefined;
   /**

package/esm/drawer/root/DrawerRoot.js

@@ -2,6 +2,7 @@
 
 var _DrawerProviderReport, _DrawerProviderReport2;
 import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerWindow } from '@base-ui/utils/owner';
@@ -9,8 +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 { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { IsDrawerContext } from "../../dialog/root/DialogRoot.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
 import { useDrawerProviderContext } from "../provider/DrawerProviderContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -145,18 +147,21 @@ export function DrawerRoot(props) {
   });
   return /*#__PURE__*/_jsx(DrawerRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(Dialog.Root, {
-      open: openProp,
-      defaultOpen: defaultOpen,
-      onOpenChange: handleOpenChange,
-      onOpenChangeComplete: onOpenChangeComplete,
-      disablePointerDismissal: disablePointerDismissal,
-      modal: modal,
-      actionsRef: actionsRef,
-      handle: handle,
-      triggerId: triggerIdProp,
-      defaultTriggerId: defaultTriggerIdProp,
-      children: resolvedChildren
+    children: /*#__PURE__*/_jsx(IsDrawerContext.Provider, {
+      value: true,
+      children: /*#__PURE__*/_jsx(Dialog.Root, {
+        open: openProp,
+        defaultOpen: defaultOpen,
+        onOpenChange: handleOpenChange,
+        onOpenChangeComplete: onOpenChangeComplete,
+        disablePointerDismissal: disablePointerDismissal,
+        modal: modal,
+        actionsRef: actionsRef,
+        handle: handle,
+        triggerId: triggerIdProp,
+        defaultTriggerId: defaultTriggerIdProp,
+        children: resolvedChildren
+      })
     })
   });
 }
@@ -223,9 +228,9 @@ function DrawerProviderReporter() {
       dialogRootContext.store.setOpen(false, createChangeEventDetails(REASONS.closeWatcher, event));
     }
     const closeWatcher = new CloseWatcherCtor();
-    closeWatcher.addEventListener('close', handleCloseWatcher);
+    const unsubscribe = addEventListener(closeWatcher, 'close', handleCloseWatcher);
     return () => {
-      closeWatcher.removeEventListener('close', handleCloseWatcher);
+      unsubscribe();
       closeWatcher.destroy();
     };
   }, [dialogRootContext.store, isTopmost, open, popupElement]);

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

@@ -38,6 +38,10 @@ export interface DrawerRootContext {
    * transitioning out).
    */
   hasNestedDrawer: boolean;
+  /**
+   * Called by the drawer popup to report its own measured height.
+   */
+  onPopupHeightChange: (height: number) => void;
   /**
    * Whether a nested drawer is currently being swiped.
    */
@@ -50,10 +54,6 @@ export interface DrawerRootContext {
    * Called by a nested drawer to report whether it is still present (open or transitioning out).
    */
   onNestedDrawerPresenceChange: (present: boolean) => void;
-  /**
-   * Called by the drawer popup to report its own measured height.
-   */
-  onPopupHeightChange: (height: number) => void;
   /**
    * Called by a nested drawer to report the frontmost height of its own stack.
    */

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";
@@ -70,6 +70,7 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
     render,
     disabled = false,
     swipeDirection: swipeDirectionProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -241,6 +242,18 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
     }
     store.setOpen(false, createChangeEventDetails(REASONS.swipe, event, swipeAreaRef.current ?? undefined));
   }
+  function resetSwipeInteractionState() {
+    swipeStartEventRef.current = null;
+    openedBySwipeRef.current = false;
+    closedOffsetRef.current = null;
+    setSwipeActive(false);
+  }
+  function finishSwipeInteraction() {
+    resetSwipeInteractionState();
+    enableDismissAfterRelease();
+    resetDragDelta();
+    clearSwipeStyles();
+  }
   const swipe = useSwipeDismiss({
     enabled,
     directions: [resolvedSwipeDirection],
@@ -299,15 +312,10 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
       } else if (openedBySwipeRef.current) {
         closeDrawer(event);
       }
-      swipeStartEventRef.current = null;
-      openedBySwipeRef.current = false;
-      setSwipeActive(false);
-      closedOffsetRef.current = null;
-      enableDismissAfterRelease();
-      resetDragDelta();
-      clearSwipeStyles();
+      finishSwipeInteraction();
       return false;
-    }
+    },
+    onCancel: finishSwipeInteraction
   });
   const swipePointerProps = swipe.getPointerProps();
   const swipeTouchProps = swipe.getTouchProps();
@@ -317,10 +325,7 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
       resetSwipe();
       resetDragDelta();
       clearSwipeStyles();
-      setSwipeActive(false);
-      openedBySwipeRef.current = false;
-      swipeStartEventRef.current = null;
-      closedOffsetRef.current = null;
+      resetSwipeInteractionState();
     }
   }, [clearSwipeStyles, enabled, resetDragDelta, resetSwipe]);
   React.useEffect(() => {

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

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { isElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
@@ -12,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 { contains } from "../../floating-ui-react/utils.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;
@@ -49,6 +50,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   const {
     className,
     render,
+    style,
     children,
     ...elementProps
   } = props;
@@ -67,10 +69,10 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const nested = store.useState('nested');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
   const viewportElement = store.useState('viewportElement');
   const popupElementState = store.useState('popupElement');
-  const nestedDrawerOpen = nestedOpenDialogCount > 0;
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
   const scrollAxis = swipeDirection === 'left' || swipeDirection === 'right' ? 'horizontal' : 'vertical';
   const isVerticalScrollAxis = scrollAxis === 'vertical';
   const crossScrollAxis = isVerticalScrollAxis ? 'horizontal' : 'vertical';
@@ -141,6 +143,13 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     store.context.popupRef.current?.removeAttribute(TransitionStatusDataAttributes.endingStyle);
     setSwipeRelease(null);
   });
+  const finishNestedSwipe = useStableCallback(() => {
+    if (!nestedSwipeActiveRef.current) {
+      return;
+    }
+    nestedSwipeActiveRef.current = false;
+    notifyParentSwipingChange?.(false);
+  });
   const applySwipeProgress = useStableCallback(({
     resolvedProgress,
     shouldTrackProgress,
@@ -148,9 +157,12 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   }) => {
     const isActive = open && !nested && shouldTrackProgress;
     const swipeProgress = isActive ? resolvedProgress : 0;
+    const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
     if (notifyParent && notifyParentSwipeProgressChange) {
-      const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
       notifyParentSwipeProgressChange(nestedSwipeProgress);
+      if (nestedSwipeProgress <= 0) {
+        finishNestedSwipe();
+      }
     }
     visualStateStore?.set({
       swipeProgress,
@@ -269,9 +281,8 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     },
     onSwipingChange(swiping) {
       setBackdropSwipingAttribute(store.context.backdropRef.current, swiping);
-      if (!swiping) {
-        nestedSwipeActiveRef.current = false;
-        notifyParentSwipingChange?.(false);
+      if (!swiping && !notifyParentSwipeProgressChange) {
+        finishNestedSwipe();
       }
     },
     swipeThreshold({
@@ -353,7 +364,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         if (!popupElement) {
           return;
         }
-        notifyParentSwipingChange?.(false);
+        finishNestedSwipe();
         setSwipeDismissed(true);
         popupElement.style.removeProperty('transition');
         popupElement.setAttribute(TransitionStatusDataAttributes.endingStyle, '');
@@ -638,15 +649,10 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
       }
       updateTouchScrollPosition(touchState, touch);
     }
-    doc.addEventListener('touchmove', handleNativeTouchMove, {
+    return addEventListener(doc, 'touchmove', handleNativeTouchMove, {
       passive: false,
       capture: true
     });
-    return () => {
-      doc.removeEventListener('touchmove', handleNativeTouchMove, {
-        capture: true
-      });
-    };
   }, [mounted, nestedDrawerOpen, open, popupElementState, isVerticalScrollAxis, scrollAxis, swipeDirection, viewportElement]);
   React.useEffect(() => {
     if (!snapPointRange || swipe.swiping) {
@@ -683,9 +689,9 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         frontmostHeight: 0
       });
       setBackdropSwipingAttribute(store.context.backdropRef.current, false);
-      notifyParentSwipingChange?.(false);
+      finishNestedSwipe();
     };
-  }, [notifyParentSwipingChange, store, visualStateStore]);
+  }, [finishNestedSwipe, store, visualStateStore]);
   const swipeProviderValue = React.useMemo(() => ({
     swiping: swipe.swiping,
     getDragStyles: swipe.getDragStyles,
@@ -775,10 +781,16 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
           return;
         }
         const rootElement = viewportElement ?? popupElementState;
-        const target = isElement(event.target) ? event.target : null;
+        const eventTarget = getTarget(event.nativeEvent);
+        const target = isElement(eventTarget) ? eventTarget : null;
+        if (rootElement && target && !contains(rootElement, target)) {
+          ignoreTouchSwipeRef.current = true;
+          touchScrollStateRef.current = null;
+          return;
+        }
         let scrollTarget = null;
         let hasCrossAxisScrollableContent = false;
-        if (rootElement && target && contains(rootElement, target)) {
+        if (rootElement && target) {
           scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
           hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
         }
@@ -878,13 +890,13 @@ function hasExpandedSelectionWithinTarget(selection, target) {
   return selection.containsNode(target, true) || contains(target, anchorElement) || contains(target, focusElement);
 }
 function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
-  const activeElement = doc.activeElement;
-  const activeElementWithinRoot = Boolean(activeElement && contains(rootElement, activeElement));
-  if (activeElementWithinRoot && isTextSelectionControl(activeElement)) {
+  const activeEl = activeElement(doc);
+  const activeElementWithinRoot = Boolean(activeEl && contains(rootElement, activeEl));
+  if (activeElementWithinRoot && isTextSelectionControl(activeEl)) {
     const {
       selectionStart,
       selectionEnd
-    } = activeElement;
+    } = activeEl;
     if (selectionStart != null && selectionEnd != null && selectionStart < selectionEnd) {
       return true;
     }
@@ -900,7 +912,7 @@ function isEventOnRangeInput(event, win) {
   if (composedPath) {
     return composedPath.some(pathTarget => isRangeInput(pathTarget, win));
   }
-  return isRangeInput(event.target, win);
+  return isRangeInput(getTarget(event), win);
 }
 function isReactTouchEventOnRangeInput(event) {
   return isEventOnRangeInput(event.nativeEvent, ownerWindow(event.currentTarget));

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

@@ -4,14 +4,15 @@ import * as React from 'react';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { useFieldRootContext } from "../root/FieldRootContext.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 { useField } from "../useField.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+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";
 
 /**
@@ -35,6 +36,7 @@ export const FieldControl = /*#__PURE__*/React.forwardRef(function FieldControl(
     onValueChange,
     defaultValue,
     autoFocus = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -83,13 +85,11 @@ export const FieldControl = /*#__PURE__*/React.forwardRef(function FieldControl(
   });
   const isControlled = valueProp !== undefined;
   const value = isControlled ? valueUnwrapped : undefined;
-  useField({
+  const getFieldValue = useStableCallback(() => validation.inputRef.current?.value);
+  useRegisterFieldControl(validation.inputRef, {
     id,
-    name,
-    commit: validation.commit,
     value,
-    getValue: () => validation.inputRef.current?.value,
-    controlRef: validation.inputRef
+    getValue: getFieldValue
   });
   const element = useRenderElement('input', componentProps, {
     ref: [forwardedRef, inputRef],

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.
@@ -19,6 +19,7 @@ export const FieldDescription = /*#__PURE__*/React.forwardRef(function FieldDesc
     render,
     id: idProp,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const id = useBaseUiId(idProp);

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",
   /**