@base-ui/react 1.2.0 → 1.3.0

package/esm/drawer/viewport/DrawerViewport.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { isElement } from '@floating-ui/utils/dom';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
+import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
 import { DialogViewport } from "../../dialog/viewport/DialogViewport.js";
@@ -16,12 +17,15 @@ 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 { DrawerViewportContext } from "./DrawerViewportContext.js";
 import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
 import { findScrollableTouchTarget } from "../../utils/scrollable.js";
+import { BASE_UI_SWIPE_IGNORE_SELECTOR } from "../../utils/constants.js";
+import { getElementAtPoint } from "../../utils/getElementAtPoint.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MIN_SWIPE_THRESHOLD = 10;
 const FAST_SWIPE_VELOCITY = 0.5;
@@ -34,7 +38,7 @@ const MIN_SWIPE_RELEASE_DURATION_MS = 80;
 const MAX_SWIPE_RELEASE_DURATION_MS = 360;
 const MIN_SWIPE_RELEASE_SCALAR = 0.1;
 const MAX_SWIPE_RELEASE_SCALAR = 1;
-
+const DRAWER_CONTENT_SELECTOR = `[${DRAWER_CONTENT_ATTRIBUTE}]`;
 /**
  * A positioning container for the drawer popup that can be made scrollable.
  * Renders a `<div>` element.
@@ -68,6 +72,8 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   const popupElementState = store.useState('popupElement');
   const nestedDrawerOpen = nestedOpenDialogCount > 0;
   const scrollAxis = swipeDirection === 'left' || swipeDirection === 'right' ? 'horizontal' : 'vertical';
+  const isVerticalScrollAxis = scrollAxis === 'vertical';
+  const crossScrollAxis = isVerticalScrollAxis ? 'horizontal' : 'vertical';
   const {
     snapPoints,
     resolvedSnapPoints,
@@ -79,9 +85,11 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   const [swipeRelease, setSwipeRelease] = React.useState(null);
   const pendingSwipeCloseSnapPointRef = React.useRef(undefined);
   const resetSwipeRef = React.useRef(null);
+  const controlledDismissFrame = useAnimationFrame();
   const nestedSwipeActiveRef = React.useRef(false);
   const lastPointerTypeRef = React.useRef('');
   const ignoreNextTouchStartFromPenRef = React.useRef(false);
+  const ignoreTouchSwipeRef = React.useRef(false);
   const touchScrollStateRef = React.useRef(null);
   const snapPointRange = React.useMemo(() => {
     if (!snapPoints || snapPoints.length < 2) {
@@ -272,14 +280,25 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     }) {
       return getBaseSwipeThreshold(element, direction);
     },
-    canStart(position) {
+    canStart(position, details) {
       const popupElement = store.context.popupRef.current;
       if (!popupElement) {
         return false;
       }
       const doc = popupElement.ownerDocument;
-      const elementAtPoint = typeof doc.elementFromPoint === 'function' ? doc.elementFromPoint(position.x, position.y) : null;
-      return !!(elementAtPoint && contains(popupElement, elementAtPoint));
+      const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
+      if (!elementAtPoint || !contains(popupElement, elementAtPoint)) {
+        return false;
+      }
+      const nativeEvent = details.nativeEvent;
+      const touchLike = 'touches' in nativeEvent || 'pointerType' in nativeEvent && nativeEvent.pointerType === 'touch';
+      if (touchLike && shouldIgnoreSwipeForTextSelection(doc, popupElement)) {
+        return false;
+      }
+      if (nativeEvent.type === 'touchstart' && isSwipeIgnoredTarget(elementAtPoint)) {
+        return false;
+      }
+      return true;
     },
     onProgress(progress, details) {
       updateNestedSwipeActive(details);
@@ -508,6 +527,33 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         clearSwipeRelease();
         return;
       }
+
+      // In controlled mode, the effective open state may not have changed yet
+      // (openProp takes precedence over state.open). Proceed optimistically with the
+      // dismiss animation — React's Scheduler flushes before the next rAF, so we can
+      // reliably check whether the parent accepted or rejected the close.
+      // Note: if onOpenChange is asynchronous (e.g., closes the drawer after a network
+      // call), the rAF check will see open === true, revert the animation, and the
+      // drawer will close without animation when the parent eventually sets open={false}.
+      if (store.select('open')) {
+        const savedEvent = event;
+        controlledDismissFrame.request(() => {
+          if (store.select('open')) {
+            // Parent rejected: revert animation and restore snap point.
+            const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
+            if (pendingSnapPoint !== undefined) {
+              setActiveSnapPoint?.(pendingSnapPoint, createChangeEventDetails(REASONS.swipe, savedEvent));
+            }
+            pendingSwipeCloseSnapPointRef.current = undefined;
+            clearSwipeRelease();
+            resetSwipeRef.current?.();
+          } else {
+            // Parent accepted: clean up the ref.
+            pendingSwipeCloseSnapPointRef.current = undefined;
+          }
+        });
+        return;
+      }
       pendingSwipeCloseSnapPointRef.current = undefined;
       setSwipeDismissed(true);
     }
@@ -521,51 +567,39 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     if (!rootElement) {
       return undefined;
     }
-    const doc = ownerDocument(rootElement);
+    const resolvedRootElement = rootElement;
+    const doc = ownerDocument(resolvedRootElement);
     const win = ownerWindow(doc);
     function handleNativeTouchMove(event) {
+      if (ignoreTouchSwipeRef.current) {
+        return;
+      }
       const touchState = touchScrollStateRef.current;
       const touch = event.touches[0];
       if (!touch || !touchState) {
         return;
       }
-      const target = isElement(event.target) ? event.target : null;
-      const updateTouchPosition = () => {
-        touchState.lastX = touch.clientX;
-        touchState.lastY = touch.clientY;
-      };
+      const drawerAxisDelta = isVerticalScrollAxis ? touch.clientY - touchState.lastY : touch.clientX - touchState.lastX;
 
       // Preserve native range interaction by never locking touchmove for range inputs.
       if (isEventOnRangeInput(event, win)) {
         touchState.allowSwipe = false;
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
 
       // Avoid blocking pinch zoom or text selection adjustments on iOS Safari.
       if (event.touches.length === 2) {
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
-      let allowTouchMove = false;
-
-      // Allow the ability to adjust text selection.
-      if (target) {
-        const selection = target.ownerDocument.defaultView?.getSelection();
-        if (selection && !selection.isCollapsed && selection.containsNode(target, true)) {
-          allowTouchMove = true;
-        }
-      }
-
-      // Allow user to drag the selection handles in an input element.
-      if (target instanceof win.HTMLInputElement) {
-        const input = target;
-        if (input.selectionStart != null && input.selectionEnd != null && input.selectionStart < input.selectionEnd && doc.activeElement === input) {
-          allowTouchMove = true;
-        }
-      }
+      const allowTouchMove = shouldIgnoreSwipeForTextSelection(doc, resolvedRootElement);
       if (allowTouchMove || !open || !mounted || nestedDrawerOpen) {
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
+        return;
+      }
+      if (preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis)) {
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
       const scrollTarget = touchState.scrollTarget;
@@ -573,7 +607,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         if (event.cancelable) {
           event.preventDefault();
         }
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
       const hasScrollableContent = hasScrollableContentOnAxis(scrollTarget, scrollAxis);
@@ -583,13 +617,13 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         if (event.cancelable) {
           event.preventDefault();
         }
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
-      const delta = scrollAxis === 'vertical' ? touch.clientY - touchState.lastY : touch.clientX - touchState.lastX;
+      const delta = drawerAxisDelta;
       if (delta !== 0) {
         const canSwipeFromScrollEdge = canSwipeFromScrollEdgeOnMove(scrollTarget, scrollAxis, swipeDirection, delta);
-        if (touchState.allowSwipe !== true) {
+        if (!touchState.allowSwipe) {
           if (!event.cancelable) {
             touchState.allowSwipe = false;
           } else if (canSwipeFromScrollEdge) {
@@ -602,7 +636,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
           event.preventDefault();
         }
       }
-      updateTouchPosition();
+      updateTouchScrollPosition(touchState, touch);
     }
     doc.addEventListener('touchmove', handleNativeTouchMove, {
       passive: false,
@@ -613,7 +647,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         capture: true
       });
     };
-  }, [mounted, nestedDrawerOpen, open, popupElementState, scrollAxis, swipeDirection, viewportElement]);
+  }, [mounted, nestedDrawerOpen, open, popupElementState, isVerticalScrollAxis, scrollAxis, swipeDirection, viewportElement]);
   React.useEffect(() => {
     if (!snapPointRange || swipe.swiping) {
       return;
@@ -661,6 +695,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     }
   }), [store, swipe.getDragStyles, swipe.swiping, swipeRelease]);
   function resetTouchTrackingState() {
+    ignoreTouchSwipeRef.current = false;
     touchScrollStateRef.current = null;
     lastPointerTypeRef.current = '';
     ignoreNextTouchStartFromPenRef.current = false;
@@ -673,12 +708,15 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
       onPointerDown(event) {
         lastPointerTypeRef.current = event.pointerType;
         ignoreNextTouchStartFromPenRef.current = event.pointerType === 'pen';
-        if (!open || !mounted || nestedDrawerOpen || event.pointerType === 'touch') {
+        if (!open || !mounted || nestedDrawerOpen) {
           return;
         }
         const doc = ownerDocument(event.currentTarget);
-        const elementAtPoint = typeof doc.elementFromPoint === 'function' ? doc.elementFromPoint(event.clientX, event.clientY) : null;
-        if (elementAtPoint?.closest('[data-swipe-ignore]')) {
+        const elementAtPoint = getElementAtPoint(doc, event.clientX, event.clientY);
+        if (isSwipeIgnoredTarget(elementAtPoint) || isDrawerContentTarget(elementAtPoint)) {
+          return;
+        }
+        if (event.pointerType === 'touch') {
           return;
         }
         swipePointerProps.onPointerDown?.(event);
@@ -711,10 +749,12 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         const startedFromPenPointerDown = lastPointerTypeRef.current === 'pen' && ignoreNextTouchStartFromPenRef.current;
         if (startedFromPenPointerDown) {
           ignoreNextTouchStartFromPenRef.current = false;
+          ignoreTouchSwipeRef.current = false;
           touchScrollStateRef.current = null;
           return;
         }
         if (!open || !mounted || nestedDrawerOpen) {
+          ignoreTouchSwipeRef.current = false;
           touchScrollStateRef.current = null;
           return;
         }
@@ -723,31 +763,54 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
           return;
         }
         if (isReactTouchEventOnRangeInput(event)) {
+          ignoreTouchSwipeRef.current = false;
+          touchScrollStateRef.current = null;
+          return;
+        }
+        const doc = ownerDocument(event.currentTarget);
+        const elementAtPoint = getElementAtPoint(doc, touch.clientX, touch.clientY);
+        ignoreTouchSwipeRef.current = isSwipeIgnoredTarget(elementAtPoint);
+        if (ignoreTouchSwipeRef.current) {
           touchScrollStateRef.current = null;
           return;
         }
         const rootElement = viewportElement ?? popupElementState;
         const target = isElement(event.target) ? event.target : null;
-        const scrollTarget = rootElement && target && contains(rootElement, target) ? findScrollableTouchTarget(target, rootElement, scrollAxis) : null;
+        let scrollTarget = null;
+        let hasCrossAxisScrollableContent = false;
+        if (rootElement && target && contains(rootElement, target)) {
+          scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
+          hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
+        }
         let allowSwipe = null;
         if (scrollTarget) {
           const canSwipeFromEdge = isAtSwipeStartEdge(scrollTarget, scrollAxis, swipeDirection);
           allowSwipe = canSwipeFromEdge ? null : false;
         }
         touchScrollStateRef.current = {
+          startX: touch.clientX,
+          startY: touch.clientY,
           lastX: touch.clientX,
           lastY: touch.clientY,
           scrollTarget,
-          allowSwipe
+          hasCrossAxisScrollableContent,
+          allowSwipe,
+          preserveNativeCrossAxisScroll: false
         };
         swipeTouchProps.onTouchStart?.(event);
       },
       onTouchMove(event) {
+        if (ignoreTouchSwipeRef.current) {
+          return;
+        }
         if (isReactTouchEventOnRangeInput(event)) {
           return;
         }
         const touchState = touchScrollStateRef.current;
-        if (touchState?.scrollTarget && touchState.allowSwipe !== true) {
+        if (touchState?.preserveNativeCrossAxisScroll) {
+          return;
+        }
+        if (touchState?.allowSwipe === false || touchState?.scrollTarget != null && !touchState.allowSwipe) {
           return;
         }
         swipeTouchProps.onTouchMove?.(event);
@@ -759,7 +822,10 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
       onTouchCancel(event) {
         resetTouchTrackingState();
         swipeTouchProps.onTouchCancel?.(event);
-      }
+      },
+      // Drawer popups use drawer-specific nested state attributes.
+      // Suppress DialogViewport's generic nested dialog attribute.
+      ['data-nested-dialog-open']: undefined
     }),
     children: /*#__PURE__*/_jsx(DrawerViewportContext.Provider, {
       value: swipeProviderValue,
@@ -787,6 +853,12 @@ function setBackdropSwipingAttribute(backdropElement, swiping) {
   }
   backdropElement.removeAttribute(DrawerPopupDataAttributes.swiping);
 }
+function isSwipeIgnoredTarget(target) {
+  return Boolean(target?.closest(BASE_UI_SWIPE_IGNORE_SELECTOR));
+}
+function isDrawerContentTarget(target) {
+  return Boolean(target?.closest(DRAWER_CONTENT_SELECTOR));
+}
 function getBaseSwipeThreshold(element, direction) {
   const size = direction === 'left' || direction === 'right' ? element.offsetWidth : element.offsetHeight;
   return Math.max(size * 0.5, MIN_SWIPE_THRESHOLD);
@@ -794,6 +866,35 @@ function getBaseSwipeThreshold(element, direction) {
 function isRangeInput(target, win) {
   return target instanceof win.HTMLInputElement && target.type === 'range';
 }
+function isTextSelectionControl(target) {
+  if (!isElement(target)) {
+    return false;
+  }
+  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
+}
+function hasExpandedSelectionWithinTarget(selection, target) {
+  const anchorElement = isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
+  const focusElement = isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
+  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 {
+      selectionStart,
+      selectionEnd
+    } = activeElement;
+    if (selectionStart != null && selectionEnd != null && selectionStart < selectionEnd) {
+      return true;
+    }
+  }
+  const selection = doc.getSelection?.();
+  if (!selection || selection.isCollapsed) {
+    return false;
+  }
+  return hasExpandedSelectionWithinTarget(selection, rootElement);
+}
 function isEventOnRangeInput(event, win) {
   const composedPath = event.composedPath();
   if (composedPath) {
@@ -804,6 +905,27 @@ function isEventOnRangeInput(event, win) {
 function isReactTouchEventOnRangeInput(event) {
   return isEventOnRangeInput(event.nativeEvent, ownerWindow(event.currentTarget));
 }
+function updateTouchScrollPosition(touchState, touch) {
+  touchState.lastX = touch.clientX;
+  touchState.lastY = touch.clientY;
+}
+function preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis) {
+  if (touchState.preserveNativeCrossAxisScroll) {
+    return true;
+  }
+  if (touchState.allowSwipe === true || !touchState.hasCrossAxisScrollableContent) {
+    return false;
+  }
+  const drawerAxisGestureDelta = isVerticalScrollAxis ? touch.clientY - touchState.startY : touch.clientX - touchState.startX;
+  const crossAxisGestureDelta = isVerticalScrollAxis ? touch.clientX - touchState.startX : touch.clientY - touchState.startY;
+  const absDrawerAxisGestureDelta = Math.abs(drawerAxisGestureDelta);
+  const absCrossAxisGestureDelta = Math.abs(crossAxisGestureDelta);
+  if (absCrossAxisGestureDelta < 6 || absCrossAxisGestureDelta <= absDrawerAxisGestureDelta + 2) {
+    return false;
+  }
+  touchState.preserveNativeCrossAxisScroll = true;
+  return true;
+}
 function hasScrollableContentOnAxis(scrollTarget, axis) {
   return axis === 'vertical' ? scrollTarget.scrollHeight > scrollTarget.clientHeight : scrollTarget.scrollWidth > scrollTarget.clientWidth;
 }

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

@@ -0,0 +1,22 @@
+export declare enum DrawerViewportDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the drawer is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the drawer is animating out.
+   */
+  endingStyle = "data-ending-style",
+  /**
+   * Present when the drawer is nested within another drawer.
+   */
+  nested = "data-nested",
+}

package/esm/drawer/viewport/DrawerViewportDataAttributes.js

@@ -0,0 +1,24 @@
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+export let DrawerViewportDataAttributes = function (DrawerViewportDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Present when the drawer is nested within another drawer.
+   */
+  DrawerViewportDataAttributes["nested"] = "data-nested";
+  return DrawerViewportDataAttributes;
+}({});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+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";
@@ -14,8 +14,8 @@ import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDeta
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldControl: React.ForwardRefExoticComponent<Omit<FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export type FieldControlState = FieldRoot.State;
-export interface FieldControlProps extends BaseUIComponentProps<'input', FieldControl.State> {
+export interface FieldControlState extends FieldRootState {}
+export interface FieldControlProps extends BaseUIComponentProps<'input', FieldControlState> {
   /**
    * Callback fired when the `value` changes. Use when controlled.
    */

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import { type FieldRootState } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * A paragraph with additional information about the field.
@@ -8,8 +8,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldDescription: React.ForwardRefExoticComponent<Omit<FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export type FieldDescriptionState = FieldRoot.State;
-export interface FieldDescriptionProps extends BaseUIComponentProps<'p', FieldDescription.State> {}
+export interface FieldDescriptionState extends FieldRootState {}
+export interface FieldDescriptionProps extends BaseUIComponentProps<'p', FieldDescriptionState> {}
 export declare namespace FieldDescription {
   type State = FieldDescriptionState;
   type Props = FieldDescriptionProps;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import { type FieldRootState } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
@@ -9,17 +9,20 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldError: React.ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface FieldErrorState extends FieldRoot.State {
+export interface FieldErrorState extends FieldRootState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldError.State> {
+export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldErrorState> {
   /**
    * Determines whether to show the error message according to the field’s
    * [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
    * Specifying `true` will always show the error message, and lets external libraries
    * control the visibility.
    */
-  match?: (boolean | keyof ValidityState) | undefined;
+  match?: boolean | keyof ValidityState | undefined;
 }
 export declare namespace FieldError {
   type State = FieldErrorState;

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

@@ -27,4 +27,12 @@ export declare enum FieldErrorDataAttributes {
    * Present when the field control is focused.
    */
   focused = "data-focused",
+  /**
+   * Present when the error message is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the error message is animating out.
+   */
+  endingStyle = "data-ending-style",
 }

package/esm/field/error/FieldErrorDataAttributes.js

@@ -1,4 +1,5 @@
-export let FieldErrorDataAttributes = /*#__PURE__*/function (FieldErrorDataAttributes) {
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+export let FieldErrorDataAttributes = function (FieldErrorDataAttributes) {
   /**
    * Present when the field is disabled.
    */
@@ -27,5 +28,13 @@ export let FieldErrorDataAttributes = /*#__PURE__*/function (FieldErrorDataAttri
    * Present when the field control is focused.
    */
   FieldErrorDataAttributes["focused"] = "data-focused";
+  /**
+   * Present when the error message is animating in.
+   */
+  FieldErrorDataAttributes[FieldErrorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the error message is animating out.
+   */
+  FieldErrorDataAttributes[FieldErrorDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   return FieldErrorDataAttributes;
 }({});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import { type FieldRootState } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Groups individual items in a checkbox group or radio group with a label and description.
@@ -8,7 +8,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldItem: React.ForwardRefExoticComponent<Omit<FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface FieldItemProps extends BaseUIComponentProps<'div', FieldItem.State> {
+export interface FieldItemState extends FieldRootState {}
+export interface FieldItemProps extends BaseUIComponentProps<'div', FieldItemState> {
   /**
    * Whether the wrapped control should ignore user interaction.
    * The `disabled` prop on `<Field.Root>` takes precedence over this.
@@ -17,6 +18,6 @@ export interface FieldItemProps extends BaseUIComponentProps<'div', FieldItem.St
   disabled?: boolean | undefined;
 }
 export declare namespace FieldItem {
-  type State = FieldRoot.State;
+  type State = FieldItemState;
   type Props = FieldItemProps;
 }

package/esm/field/item/FieldItem.js

@@ -32,7 +32,7 @@ export const FieldItem = /*#__PURE__*/React.forwardRef(function FieldItem(compon
   const parentId = checkboxGroupContext?.parent.id;
   // this a more reliable check
   const hasParentCheckbox = checkboxGroupContext?.allValues !== undefined;
-  const initialControlId = hasParentCheckbox ? parentId : undefined;
+  const controlId = hasParentCheckbox ? parentId : undefined;
   const fieldItemContext = React.useMemo(() => ({
     disabled
   }), [disabled]);
@@ -43,7 +43,7 @@ export const FieldItem = /*#__PURE__*/React.forwardRef(function FieldItem(compon
     stateAttributesMapping: fieldValidityMapping
   });
   return /*#__PURE__*/_jsx(LabelableProvider, {
-    initialControlId: initialControlId,
+    controlId: controlId,
     children: /*#__PURE__*/_jsx(FieldItemContext.Provider, {
       value: fieldItemContext,
       children: element

package/esm/field/label/FieldLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldRoot } from "../root/FieldRoot.js";
+import type { FieldRootState } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * An accessible label that is automatically associated with the field control.
@@ -8,8 +8,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldLabel: React.ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export type FieldLabelState = FieldRoot.State;
-export interface FieldLabelProps extends BaseUIComponentProps<'label', FieldLabel.State> {
+export interface FieldLabelState extends FieldRootState {}
+export interface FieldLabelProps extends BaseUIComponentProps<'label', FieldLabelState> {
   /**
    * Whether the component renders a native `<label>` element when replacing it via the `render` prop.
    * Set to `false` if the rendered element is not a label (e.g. `<div>`).