@base-ui/react 1.2.0 → 1.4.0

package/drawer/viewport/DrawerViewport.d.ts

@@ -13,6 +13,9 @@ export interface DrawerViewportState {
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the drawer is nested within another drawer.
@@ -23,7 +26,7 @@ export interface DrawerViewportState {
    */
   nestedDialogOpen: boolean;
 }
-export interface DrawerViewportProps extends BaseUIComponentProps<'div', DrawerViewport.State> {}
+export interface DrawerViewportProps extends BaseUIComponentProps<'div', DrawerViewportState> {}
 export declare namespace DrawerViewport {
   type Props = DrawerViewportProps;
   type State = DrawerViewportState;

package/drawer/viewport/DrawerViewport.js

@@ -9,7 +9,9 @@ exports.DrawerViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _owner = require("@base-ui/utils/owner");
+var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
 var _DialogViewport = require("../../dialog/viewport/DialogViewport");
@@ -22,12 +24,15 @@ var _useSwipeDismiss = require("../../utils/useSwipeDismiss");
 var _DrawerPopupCssVars = require("../popup/DrawerPopupCssVars");
 var _DrawerPopupDataAttributes = require("../popup/DrawerPopupDataAttributes");
 var _DrawerBackdropCssVars = require("../backdrop/DrawerBackdropCssVars");
+var _DrawerContentDataAttributes = require("../content/DrawerContentDataAttributes");
 var _reasons = require("../../utils/reasons");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _utils = require("../../floating-ui-react/utils");
 var _DrawerViewportContext = require("./DrawerViewportContext");
 var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
 var _scrollable = require("../../utils/scrollable");
+var _constants = require("../../utils/constants");
+var _getElementAtPoint = require("../../utils/getElementAtPoint");
 var _jsxRuntime = require("react/jsx-runtime");
 const MIN_SWIPE_THRESHOLD = 10;
 const FAST_SWIPE_VELOCITY = 0.5;
@@ -40,7 +45,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 = `[${_DrawerContentDataAttributes.DRAWER_CONTENT_ATTRIBUTE}]`;
 /**
  * A positioning container for the drawer popup that can be made scrollable.
  * Renders a `<div>` element.
@@ -51,6 +56,7 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
   const {
     className,
     render,
+    style,
     children,
     ...elementProps
   } = props;
@@ -69,11 +75,13 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
   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';
   const {
     snapPoints,
     resolvedSnapPoints,
@@ -85,9 +93,11 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
   const [swipeRelease, setSwipeRelease] = React.useState(null);
   const pendingSwipeCloseSnapPointRef = React.useRef(undefined);
   const resetSwipeRef = React.useRef(null);
+  const controlledDismissFrame = (0, _useAnimationFrame.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) {
@@ -139,6 +149,13 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
     store.context.popupRef.current?.removeAttribute(_stateAttributesMapping.TransitionStatusDataAttributes.endingStyle);
     setSwipeRelease(null);
   });
+  const finishNestedSwipe = (0, _useStableCallback.useStableCallback)(() => {
+    if (!nestedSwipeActiveRef.current) {
+      return;
+    }
+    nestedSwipeActiveRef.current = false;
+    notifyParentSwipingChange?.(false);
+  });
   const applySwipeProgress = (0, _useStableCallback.useStableCallback)(({
     resolvedProgress,
     shouldTrackProgress,
@@ -146,9 +163,12 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
   }) => {
     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,
@@ -267,9 +287,8 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
     },
     onSwipingChange(swiping) {
       setBackdropSwipingAttribute(store.context.backdropRef.current, swiping);
-      if (!swiping) {
-        nestedSwipeActiveRef.current = false;
-        notifyParentSwipingChange?.(false);
+      if (!swiping && !notifyParentSwipeProgressChange) {
+        finishNestedSwipe();
       }
     },
     swipeThreshold({
@@ -278,14 +297,25 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
     }) {
       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 && (0, _utils.contains)(popupElement, elementAtPoint));
+      const elementAtPoint = (0, _getElementAtPoint.getElementAtPoint)(doc, position.x, position.y);
+      if (!elementAtPoint || !(0, _utils.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);
@@ -340,7 +370,7 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         if (!popupElement) {
           return;
         }
-        notifyParentSwipingChange?.(false);
+        finishNestedSwipe();
         setSwipeDismissed(true);
         popupElement.style.removeProperty('transition');
         popupElement.setAttribute(_stateAttributesMapping.TransitionStatusDataAttributes.endingStyle, '');
@@ -514,6 +544,33 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         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, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.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);
     }
@@ -527,51 +584,39 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
     if (!rootElement) {
       return undefined;
     }
-    const doc = (0, _owner.ownerDocument)(rootElement);
+    const resolvedRootElement = rootElement;
+    const doc = (0, _owner.ownerDocument)(resolvedRootElement);
     const win = (0, _owner.ownerWindow)(doc);
     function handleNativeTouchMove(event) {
+      if (ignoreTouchSwipeRef.current) {
+        return;
+      }
       const touchState = touchScrollStateRef.current;
       const touch = event.touches[0];
       if (!touch || !touchState) {
         return;
       }
-      const target = (0, _dom.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;
@@ -579,7 +624,7 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         if (event.cancelable) {
           event.preventDefault();
         }
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
       const hasScrollableContent = hasScrollableContentOnAxis(scrollTarget, scrollAxis);
@@ -589,13 +634,13 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         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) {
@@ -608,18 +653,13 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
           event.preventDefault();
         }
       }
-      updateTouchPosition();
+      updateTouchScrollPosition(touchState, touch);
     }
-    doc.addEventListener('touchmove', handleNativeTouchMove, {
+    return (0, _addEventListener.addEventListener)(doc, 'touchmove', handleNativeTouchMove, {
       passive: false,
       capture: true
     });
-    return () => {
-      doc.removeEventListener('touchmove', handleNativeTouchMove, {
-        capture: true
-      });
-    };
-  }, [mounted, nestedDrawerOpen, open, popupElementState, scrollAxis, swipeDirection, viewportElement]);
+  }, [mounted, nestedDrawerOpen, open, popupElementState, isVerticalScrollAxis, scrollAxis, swipeDirection, viewportElement]);
   React.useEffect(() => {
     if (!snapPointRange || swipe.swiping) {
       return;
@@ -655,9 +695,9 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         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,
@@ -667,6 +707,7 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
     }
   }), [store, swipe.getDragStyles, swipe.swiping, swipeRelease]);
   function resetTouchTrackingState() {
+    ignoreTouchSwipeRef.current = false;
     touchScrollStateRef.current = null;
     lastPointerTypeRef.current = '';
     ignoreNextTouchStartFromPenRef.current = false;
@@ -679,12 +720,15 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
       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 = (0, _owner.ownerDocument)(event.currentTarget);
-        const elementAtPoint = typeof doc.elementFromPoint === 'function' ? doc.elementFromPoint(event.clientX, event.clientY) : null;
-        if (elementAtPoint?.closest('[data-swipe-ignore]')) {
+        const elementAtPoint = (0, _getElementAtPoint.getElementAtPoint)(doc, event.clientX, event.clientY);
+        if (isSwipeIgnoredTarget(elementAtPoint) || isDrawerContentTarget(elementAtPoint)) {
+          return;
+        }
+        if (event.pointerType === 'touch') {
           return;
         }
         swipePointerProps.onPointerDown?.(event);
@@ -717,10 +761,12 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         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;
         }
@@ -729,31 +775,60 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
           return;
         }
         if (isReactTouchEventOnRangeInput(event)) {
+          ignoreTouchSwipeRef.current = false;
+          touchScrollStateRef.current = null;
+          return;
+        }
+        const doc = (0, _owner.ownerDocument)(event.currentTarget);
+        const elementAtPoint = (0, _getElementAtPoint.getElementAtPoint)(doc, touch.clientX, touch.clientY);
+        ignoreTouchSwipeRef.current = isSwipeIgnoredTarget(elementAtPoint);
+        if (ignoreTouchSwipeRef.current) {
           touchScrollStateRef.current = null;
           return;
         }
         const rootElement = viewportElement ?? popupElementState;
-        const target = (0, _dom.isElement)(event.target) ? event.target : null;
-        const scrollTarget = rootElement && target && (0, _utils.contains)(rootElement, target) ? (0, _scrollable.findScrollableTouchTarget)(target, rootElement, scrollAxis) : null;
+        const eventTarget = (0, _utils.getTarget)(event.nativeEvent);
+        const target = (0, _dom.isElement)(eventTarget) ? eventTarget : null;
+        if (rootElement && target && !(0, _utils.contains)(rootElement, target)) {
+          ignoreTouchSwipeRef.current = true;
+          touchScrollStateRef.current = null;
+          return;
+        }
+        let scrollTarget = null;
+        let hasCrossAxisScrollableContent = false;
+        if (rootElement && target) {
+          scrollTarget = (0, _scrollable.findScrollableTouchTarget)(target, rootElement, scrollAxis);
+          hasCrossAxisScrollableContent = (0, _scrollable.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);
@@ -765,7 +840,10 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
       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__*/(0, _jsxRuntime.jsx)(_DrawerViewportContext.DrawerViewportContext.Provider, {
       value: swipeProviderValue,
@@ -793,6 +871,12 @@ function setBackdropSwipingAttribute(backdropElement, swiping) {
   }
   backdropElement.removeAttribute(_DrawerPopupDataAttributes.DrawerPopupDataAttributes.swiping);
 }
+function isSwipeIgnoredTarget(target) {
+  return Boolean(target?.closest(_constants.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);
@@ -800,16 +884,66 @@ function getBaseSwipeThreshold(element, direction) {
 function isRangeInput(target, win) {
   return target instanceof win.HTMLInputElement && target.type === 'range';
 }
+function isTextSelectionControl(target) {
+  if (!(0, _dom.isElement)(target)) {
+    return false;
+  }
+  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
+}
+function hasExpandedSelectionWithinTarget(selection, target) {
+  const anchorElement = (0, _dom.isElement)(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
+  const focusElement = (0, _dom.isElement)(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
+  return selection.containsNode(target, true) || (0, _utils.contains)(target, anchorElement) || (0, _utils.contains)(target, focusElement);
+}
+function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
+  const activeEl = (0, _utils.activeElement)(doc);
+  const activeElementWithinRoot = Boolean(activeEl && (0, _utils.contains)(rootElement, activeEl));
+  if (activeElementWithinRoot && isTextSelectionControl(activeEl)) {
+    const {
+      selectionStart,
+      selectionEnd
+    } = activeEl;
+    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) {
     return composedPath.some(pathTarget => isRangeInput(pathTarget, win));
   }
-  return isRangeInput(event.target, win);
+  return isRangeInput((0, _utils.getTarget)(event), win);
 }
 function isReactTouchEventOnRangeInput(event) {
   return isEventOnRangeInput(event.nativeEvent, (0, _owner.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/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/drawer/viewport/DrawerViewportDataAttributes.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerViewportDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let DrawerViewportDataAttributes = exports.DrawerViewportDataAttributes = function (DrawerViewportDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["open"] = _popupStateMapping.CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["endingStyle"] = _popupStateMapping.CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Present when the drawer is nested within another drawer.
+   */
+  DrawerViewportDataAttributes["nested"] = "data-nested";
+  return DrawerViewportDataAttributes;
+}({});

package/esm/accordion/header/AccordionHeader.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { AccordionItem } from "../item/AccordionItem.js";
+import type { AccordionItemState } from "../item/AccordionItem.js";
 /**
  * A heading that labels the corresponding panel.
  * Renders an `<h3>` element.
@@ -8,7 +8,9 @@ import type { AccordionItem } from "../item/AccordionItem.js";
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
 export declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-export interface AccordionHeaderProps extends BaseUIComponentProps<'h3', AccordionItem.State> {}
+export interface AccordionHeaderState extends AccordionItemState {}
+export interface AccordionHeaderProps extends BaseUIComponentProps<'h3', AccordionHeaderState> {}
 export declare namespace AccordionHeader {
+  type State = AccordionHeaderState;
   type Props = AccordionHeaderProps;
 }

package/esm/accordion/header/AccordionHeader.js

@@ -15,6 +15,7 @@ export const AccordionHeader = /*#__PURE__*/React.forwardRef(function AccordionH
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/accordion/item/AccordionItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import { useCollapsibleRoot } from "../../collapsible/root/useCollapsibleRoot.js";
-import type { AccordionRoot } from "../root/AccordionRoot.js";
+import { type UseCollapsibleRootParameters } from "../../collapsible/root/useCollapsibleRoot.js";
+import type { AccordionRootState } from "../root/AccordionRoot.js";
 import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 /**
@@ -11,11 +11,17 @@ import { REASONS } from "../../utils/reasons.js";
  * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
  */
 export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface AccordionItemState extends AccordionRoot.State {
+export interface AccordionItemState extends AccordionRootState {
+  /**
+   * The item index.
+   */
   index: number;
+  /**
+   * Whether the component is open.
+   */
   open: boolean;
 }
-export interface AccordionItemProps extends BaseUIComponentProps<'div', AccordionItem.State>, Partial<Pick<useCollapsibleRoot.Parameters, 'disabled'>> {
+export interface AccordionItemProps extends BaseUIComponentProps<'div', AccordionItemState>, Partial<Pick<UseCollapsibleRootParameters, 'disabled'>> {
   /**
    * A unique value that identifies this accordion item.
    * If no value is provided, a unique ID will be generated automatically.

package/esm/accordion/item/AccordionItem.js

@@ -25,6 +25,7 @@ export const AccordionItem = /*#__PURE__*/React.forwardRef(function AccordionIte
     onOpenChange: onOpenChangeProp,
     render,
     value: valueProp,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/accordion/item/AccordionItemContext.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { AccordionItem } from "./AccordionItem.js";
+import type { AccordionItemState } from "./AccordionItem.js";
 export interface AccordionItemContext {
   open: boolean;
-  state: AccordionItem.State;
+  state: AccordionItemState;
   setTriggerId: (id: string | undefined) => void;
   triggerId?: string | undefined;
 }

package/esm/accordion/item/stateAttributesMapping.d.ts

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