@jobber/components 9.5.3 → 9.6.0

package/dist/ScrollAreaViewport-es.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { E as EMPTY_OBJECT, f as formatErrorMessage, u as useRenderElement, m as mergeProps } from './useRenderElement-es.js';
-import { ac as FloatingRootStore, ad as PopupTriggerMap, N as createSelector, a0 as FloatingPortal, a1 as InternalBackdrop, a2 as inertValue, b9 as usePopupRootSync, aS as useImplicitActiveTrigger, aT as useOpenStateTransitions, d as createChangeEventDetails, j as imperativeAction, R as useDismiss, g as getTarget, _ as contains, av as useScrollLock, aY as usePopupInteractionProps, aN as ReactStore, aV as setPopupOpenState, ba as usePopupStore, U as useOnFirstRender, C as CommonPopupDataAttributes, p as popupStateMapping, t as transitionStatusMapping, u as useBaseUiId, b4 as useTriggerDataForwarding, c as useButton, Q as useClick, bb as useOpenMethodTriggerProps, bc as CLICK_TRIGGER_IDENTIFIER, b8 as triggerOpenStateMapping, b as useStableCallback, o as ownerDocument, a as useIsoLayoutEffect, S as SafeReact, l as error, f as useOpenChangeComplete, F as FOCUSABLE_POPUP_PROPS, i as FloatingFocusManager, n as useControlled, v as none, aa as useId, bd as android, s as addEventListener, be as closeWatcher, a5 as useAnimationFrame, bf as BASE_UI_SWIPE_IGNORE_SELECTOR, D as activeElement, bg as TransitionStatusDataAttributes, bh as swipe, k as useTimeout, a4 as useDirection, a6 as webkit } from './useScrollLock-es.js';
+import { E as EMPTY_OBJECT, N as NOOP, f as formatErrorMessage, u as useRenderElement, m as mergeProps } from './useRenderElement-es.js';
+import { aK as FloatingRootStore, aL as PopupTriggerMap, b3 as shimExports, a6 as popupStateMapping, t as transitionStatusMapping, a2 as FloatingPortal, a3 as InternalBackdrop, a4 as inertValue, W as useDismiss, e as getTarget, a0 as contains, b2 as useScrollLock, c as useIsoLayoutEffect, b4 as usePopupInteractionProps, X as ReactStore, b5 as setPopupOpenState, b6 as usePopupRootStore, b7 as usePopupRootSync, b8 as useImplicitActiveTrigger, b9 as useOpenStateTransitions, h as createChangeEventDetails, k as imperativeAction, ba as PopupHandleAttachment, u as useBaseUiId, bb as useTriggerDataForwarding, f as useButton, V as useClick, bc as useOpenMethodTriggerProps, bd as CLICK_TRIGGER_IDENTIFIER, be as triggerOpenStateMapping, p as popupTransitionStateMapping, bf as CommonPopupDataAttributes, d as useStableCallback, o as ownerDocument, S as SafeReact, r as error, l as useOpenChangeComplete, F as FOCUSABLE_POPUP_PROPS, n as FloatingFocusManager, v as useControlled, z as none, bg as android, I as getWindow, y as addEventListener, bh as closeWatcher, a8 as useAnimationFrame, au as isElement, D as activeElement, bi as TransitionStatusDataAttributes, bj as swipe, bk as BASE_UI_SWIPE_IGNORE_SELECTOR, q as useTimeout, a7 as useDirection, a9 as webkit } from './useScrollLock-es.js';
 import { c as clamp, C as COMPOSITE_KEYS, u as useCSPContext, s as styleDisableScrollbar, n as normalizeScrollOffset } from './scrollEdges-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { K as getWindow, i as isHTMLElement, d as isLastTraversableNode, e as getParentNode, h as getComputedStyle$1, b as isElement } from './floating-ui.utils-es.js';
 import * as ReactDOM from 'react-dom';
+import { f as findScrollableTouchTarget, h as hasScrollableAncestor } from './scrollable-es.js';
 
 function getEmptyRootContext() {
   return new FloatingRootStore({
@@ -58,12 +58,12 @@ function createPopupFloatingRootContext(triggerElements, floatingId, nested = fa
     onOpenChange: undefined
   });
 }
-const activeTriggerIdSelector = createSelector(state => state.triggerIdProp ?? state.activeTriggerId);
-const openSelector = createSelector(state => state.openProp ?? state.open);
-const popupIdSelector = createSelector(state => {
+const activeTriggerIdSelector = state => state.triggerIdProp ?? state.activeTriggerId;
+const openSelector = state => state.openProp ?? state.open;
+const popupIdSelector = state => {
   const popupId = state.popupElement?.id ?? state.floatingId;
   return popupId || undefined;
-});
+};
 function triggerOwnsOpenPopup(state, triggerId) {
   return triggerId !== undefined && openSelector(state) && activeTriggerIdSelector(state) === triggerId;
 }
@@ -75,47 +75,81 @@ function triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) {
 }
 const popupStoreSelectors = {
   open: openSelector,
-  mounted: createSelector(state => state.mounted),
-  transitionStatus: createSelector(state => state.transitionStatus),
-  floatingRootContext: createSelector(state => state.floatingRootContext),
-  triggerCount: createSelector(state => state.triggerCount),
-  preventUnmountingOnClose: createSelector(state => state.preventUnmountingOnClose),
-  payload: createSelector(state => state.payload),
+  mounted: state => state.mounted,
+  transitionStatus: state => state.transitionStatus,
+  floatingRootContext: state => state.floatingRootContext,
+  triggerCount: state => state.triggerCount,
+  preventUnmountingOnClose: state => state.preventUnmountingOnClose,
+  payload: state => state.payload,
   activeTriggerId: activeTriggerIdSelector,
-  activeTriggerElement: createSelector(state => state.mounted ? state.activeTriggerElement : null),
+  activeTriggerElement: state => state.mounted ? state.activeTriggerElement : null,
   popupId: popupIdSelector,
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
-  isTriggerActive: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId),
+  isTriggerActive: (state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId,
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: createSelector((state, triggerId) => triggerOwnsOpenPopup(state, triggerId)),
+  isOpenedByTrigger: (state, triggerId) => triggerOwnsOpenPopup(state, triggerId),
   /**
    * Whether the popup is mounted and was activated by a trigger with the given ID.
    */
-  isMountedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
-  triggerProps: createSelector((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
+  isMountedByTrigger: (state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted,
+  triggerProps: (state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps,
   /**
    * Popup id for the trigger that currently owns the open popup.
    */
-  triggerPopupId: createSelector((state, triggerId) => triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) ? popupIdSelector(state) : undefined),
-  popupProps: createSelector(state => state.popupProps),
-  popupElement: createSelector(state => state.popupElement),
-  positionerElement: createSelector(state => state.positionerElement)
+  triggerPopupId: (state, triggerId) => triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) ? popupIdSelector(state) : undefined,
+  popupProps: state => state.popupProps,
+  popupElement: state => state.popupElement,
+  positionerElement: state => state.positionerElement
 };
 
-const IsDrawerContext = /*#__PURE__*/React.createContext(false);
-if (process.env.NODE_ENV !== "production") IsDrawerContext.displayName = "IsDrawerContext";
+/**
+ * Store members a detached handle-backed trigger reads or invokes for trigger registration and data
+ * forwarding. `set`/`update` are included only for trigger-count and trigger-data bookkeeping; on a
+ * detached (inert) store they are intentionally no-ops, so a write through them is not guaranteed to
+ * be durable. Component handle-store views Pick these from their concrete store (preserving its
+ * context and selectors) and add any component-specific trigger-invoked members such as `setOpen`.
+ */
+
+/**
+ * The subset of a popup store that trigger registration and data forwarding rely on. Narrow enough
+ * that an inert store can be passed while detached.
+ */
+
+/**
+ * Reads the store currently exposed by a popup handle and subscribes to store-pointer changes.
+ * Detached triggers use this to follow a handle as a root attaches or detaches: while no root is
+ * attached, the handle exposes its fallback store; once a root attaches, subscribers re-render and
+ * read from the live root store.
+ *
+ * Returns `undefined` when no handle is provided so callers can fall back to their root context.
+ *
+ * @param handle The popup handle to read from, or `undefined` when the trigger is not handle-bound.
+ */
+function usePopupHandleStore(handle) {
+  const subscribe = React.useCallback(listener => {
+    if (handle === undefined) {
+      return NOOP;
+    }
+    return handle.subscribeStore(listener);
+  }, [handle]);
+  const getSnapshot = React.useCallback(() => {
+    return handle === undefined ? undefined : handle.store;
+  }, [handle]);
+  return shimExports.useSyncExternalStore(subscribe, getSnapshot, () => handle?.serverStore);
+}
+
 const DialogRootContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DialogRootContext.displayName = "DialogRootContext";
 function useDialogRootContext(optional) {
-  const dialogRootContext = React.useContext(DialogRootContext);
-  if (optional === false && dialogRootContext === undefined) {
+  const store = React.useContext(DialogRootContext);
+  if (!optional && store === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>.' : formatErrorMessage(27));
   }
-  return dialogRootContext;
+  return store;
 }
 
 const DialogPortalContext = /*#__PURE__*/React.createContext(undefined);
@@ -128,14 +162,26 @@ function useDialogPortalContext() {
   return value;
 }
 
+/**
+ * Shared by `Dialog.Popup` and `Dialog.Viewport`, whose states have the same shape.
+ * `nested` is not mapped: unmapped `true` booleans already render as `data-nested`.
+ */
+const dialogStateAttributesMapping = {
+  ...popupStateMapping,
+  ...transitionStatusMapping,
+  nestedDialogOpen(value) {
+    return value ? {
+      'data-nested-dialog-open': ''
+    } : null;
+  }
+};
+
 const DialogPortal = /*#__PURE__*/React.forwardRef(function DialogPortal(props, forwardedRef) {
   const {
     keepMounted = false,
     ...portalProps
   } = props;
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const mounted = store.useState('mounted');
   const modal = store.useState('modal');
   const open = store.useState('open');
@@ -157,25 +203,6 @@ const DialogPortal = /*#__PURE__*/React.forwardRef(function DialogPortal(props,
 });
 if (process.env.NODE_ENV !== "production") DialogPortal.displayName = "DialogPortal";
 
-function useDialogRoot(params) {
-  const {
-    store,
-    actionsRef
-  } = params;
-  const open = store.useState('open');
-  usePopupRootSync(store, open);
-  useImplicitActiveTrigger(store);
-  const {
-    forceUnmount
-  } = useOpenStateTransitions(open, store);
-  const handleImperativeClose = React.useCallback(() => {
-    store.setOpen(false, createChangeEventDetails(imperativeAction));
-  }, [store]);
-  React.useImperativeHandle(actionsRef, () => ({
-    unmount: forceUnmount,
-    close: handleImperativeClose
-  }), [forceUnmount, handleImperativeClose]);
-}
 function DialogInteractions({
   store,
   parentContext,
@@ -211,8 +238,18 @@ function DialogInteractions({
       if ('button' in event && event.button !== 0) {
         return false;
       }
-      if ('touches' in event && event.touches.length !== 1) {
-        return false;
+      if ('touches' in event) {
+        // Outside press can be handled on `touchend`, where the lifted point is
+        // reported in `changedTouches` and `touches` contains any remaining
+        // active points. Treat it as a single-finger tap only when exactly one
+        // touch ended and no other fingers are still down.
+        if (event.type === 'touchend') {
+          if (event.changedTouches.length !== 1 || event.touches.length !== 0) {
+            return false;
+          }
+        } else if (event.touches.length !== 1) {
+          return false;
+        }
       }
       const target = getTarget(event);
       if (isTopmost && !disablePointerDismissal) {
@@ -220,7 +257,9 @@ function DialogInteractions({
         // This supports multiple modal dialogs that aren't nested in the React tree:
         // https://github.com/mui/base-ui/issues/1320
         if (modal) {
-          return store.context.internalBackdropRef.current || store.context.backdropRef.current ? store.context.internalBackdropRef.current === target || store.context.backdropRef.current === target || contains(target, popupElement) && !target?.hasAttribute('data-base-ui-portal') : true;
+          const internalBackdrop = store.context.internalBackdropRef.current;
+          const backdrop = store.context.backdropRef.current;
+          return internalBackdrop || backdrop ? internalBackdrop === target || backdrop === target || contains(target, popupElement) && !target?.hasAttribute('data-base-ui-portal') : true;
         }
         return true;
       }
@@ -231,73 +270,82 @@ function DialogInteractions({
   useScrollLock(open && modal === true, popupElement);
 
   // Listen for nested open/close events on this store to maintain the counts.
+  // A close notification is an open notification with zeroed counts.
   store.useContextCallback('onNestedDialogOpen', (dialogCount, drawerCount) => {
     setOwnNestedOpenDialogs(dialogCount);
     setOwnNestedOpenDrawers(drawerCount);
   });
-  store.useContextCallback('onNestedDialogClose', () => {
-    setOwnNestedOpenDialogs(0);
-    setOwnNestedOpenDrawers(0);
-  });
 
   // Notify parent of our open/close state using parent callbacks, if any
-  React.useEffect(() => {
-    if (parentContext?.onNestedDialogOpen && open) {
-      parentContext.onNestedDialogOpen(ownNestedOpenDialogs + 1, ownNestedOpenDrawers + (isDrawer ? 1 : 0));
-    }
-    if (parentContext?.onNestedDialogClose && !open) {
-      parentContext.onNestedDialogClose();
+  useIsoLayoutEffect(() => {
+    if (parentContext?.onNestedDialogOpen) {
+      if (open) {
+        parentContext.onNestedDialogOpen(ownNestedOpenDialogs + 1, ownNestedOpenDrawers + (isDrawer ? 1 : 0));
+      } else {
+        parentContext.onNestedDialogOpen(0, 0);
+      }
     }
     return () => {
-      if (parentContext?.onNestedDialogClose && open) {
-        parentContext.onNestedDialogClose();
+      if (parentContext?.onNestedDialogOpen && open) {
+        parentContext.onNestedDialogOpen(0, 0);
       }
     };
   }, [isDrawer, open, ownNestedOpenDialogs, ownNestedOpenDrawers, parentContext]);
-  const activeTriggerProps = dismiss.reference ?? EMPTY_OBJECT;
-  const inactiveTriggerProps = dismiss.trigger ?? EMPTY_OBJECT;
-  // Consumers (DialogPopup/DrawerPopup) already spread `FOCUSABLE_POPUP_PROPS`
-  // directly, so the popup props only need to carry the dismiss handlers.
-  const popupProps = dismiss.floating ?? EMPTY_OBJECT;
   usePopupInteractionProps(store, {
-    activeTriggerProps,
-    inactiveTriggerProps,
-    popupProps,
+    // `enabled` is not passed to `useDismiss`, so its props are always defined,
+    // and `trigger` is the same object as `reference`.
+    activeTriggerProps: dismiss.reference,
+    inactiveTriggerProps: dismiss.trigger,
+    // DialogPopup and DrawerPopup spread `FOCUSABLE_POPUP_PROPS` directly, so
+    // this only needs to carry the dismiss handlers.
+    popupProps: dismiss.floating,
     nestedOpenDialogCount: ownNestedOpenDialogs,
     nestedOpenDrawerCount: ownNestedOpenDrawers
   });
   return null;
 }
 
+/**
+ * A `ReactStore` whose state never changes.
+ *
+ * Useful for fallback stores that need to support normal store reads while detached from the
+ * component that owns real state. Context values may still contain mutable refs or maps.
+ */
+class NullStore extends ReactStore {
+  // `update`/`set`/`notifyAll` funnel through `setState` in the base `Store`, so overriding
+  // `setState` alone would neutralize them today. They are overridden explicitly so the store stays
+  // inert even if a future base-class change stops routing a mutator through `setState`.
+  setState(_newState) {}
+  update(_changes) {}
+  set(_key, _value) {}
+  notifyAll() {}
+}
+
 const selectors = {
   ...popupStoreSelectors,
-  modal: createSelector(state => state.modal),
-  nested: createSelector(state => state.nested),
-  nestedOpenDialogCount: createSelector(state => state.nestedOpenDialogCount),
-  nestedOpenDrawerCount: createSelector(state => state.nestedOpenDrawerCount),
-  disablePointerDismissal: createSelector(state => state.disablePointerDismissal),
-  openMethod: createSelector(state => state.openMethod),
-  descriptionElementId: createSelector(state => state.descriptionElementId),
-  titleElementId: createSelector(state => state.titleElementId),
-  viewportElement: createSelector(state => state.viewportElement),
-  role: createSelector(state => state.role)
+  modal: state => state.modal,
+  nested: state => state.nested,
+  nestedOpenDialogCount: state => state.nestedOpenDialogCount,
+  nestedOpenDrawerCount: state => state.nestedOpenDrawerCount,
+  disablePointerDismissal: state => state.disablePointerDismissal,
+  openMethod: state => state.openMethod,
+  descriptionElementId: state => state.descriptionElementId,
+  titleElementId: state => state.titleElementId,
+  viewportElement: state => state.viewportElement,
+  role: state => state.role
 };
+
+/**
+ * The subset of `DialogStore` that detached handle-backed triggers rely on. Both the real
+ * `DialogStore` and the inert fallback store satisfy it, so a trigger can read from whichever
+ * store the handle currently exposes.
+ */
+
 class DialogStore extends ReactStore {
-  constructor(initialState, floatingId, nested = false) {
+  constructor(initialState, floatingId, nested) {
     const triggerElements = new PopupTriggerMap();
-    const state = createInitialState(initialState);
-    state.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
-    super(state, {
-      popupRef: /*#__PURE__*/React.createRef(),
-      backdropRef: /*#__PURE__*/React.createRef(),
-      internalBackdropRef: /*#__PURE__*/React.createRef(),
-      outsidePressEnabledRef: {
-        current: true
-      },
-      triggerElements,
-      onOpenChange: undefined,
-      onOpenChangeComplete: undefined
-    }, selectors);
+    const state = createInitialState(initialState, triggerElements, floatingId, nested);
+    super(state, createInitialContext(triggerElements), selectors);
   }
   setOpen = (nextOpen, eventDetails) => {
     eventDetails.preventUnmountOnClose = () => {
@@ -319,20 +367,22 @@ class DialogStore extends ReactStore {
     setPopupOpenState(updatedState, nextOpen, eventDetails.trigger);
     this.update(updatedState);
   };
-  static useStore(externalStore, initialState) {
-    /* eslint-disable react-hooks/rules-of-hooks */
-    const store = usePopupStore(externalStore, (floatingId, nested) => new DialogStore(initialState, floatingId, nested), true).store;
-    /* eslint-enable react-hooks/rules-of-hooks */
+}
 
-    return store;
-  }
+/**
+ * Creates the inert fallback store used by detached handle-backed triggers while no
+ * `Dialog.Root` is attached. It preserves a dialog-specific trigger registry in context so
+ * detached triggers can register before migrating to the live root store.
+ */
+function createNullDialogStore() {
+  const triggerElements = new PopupTriggerMap();
+  return new NullStore(Object.freeze(createInitialState(undefined, triggerElements)), Object.freeze(createInitialContext(triggerElements)), selectors);
 }
-function createInitialState(initialState = {}) {
-  return {
+function createInitialState(initialState, triggerElements, floatingId, nested = false) {
+  const state = {
     ...createInitialPopupStoreState(),
     modal: true,
     disablePointerDismissal: false,
-    popupElement: null,
     viewportElement: null,
     descriptionElementId: undefined,
     titleElementId: undefined,
@@ -343,9 +393,24 @@ function createInitialState(initialState = {}) {
     role: 'dialog',
     ...initialState
   };
+  state.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
+  return state;
+}
+function createInitialContext(triggerElements) {
+  return {
+    popupRef: /*#__PURE__*/React.createRef(),
+    backdropRef: /*#__PURE__*/React.createRef(),
+    internalBackdropRef: /*#__PURE__*/React.createRef(),
+    outsidePressEnabledRef: {
+      current: true
+    },
+    triggerElements,
+    onOpenChange: undefined,
+    onOpenChangeComplete: undefined
+  };
 }
 
-function useRenderDialogRoot(props, mode = 'dialog') {
+function useRenderDialogRoot(mode, props) {
   const {
     children,
     open: openProp,
@@ -364,38 +429,26 @@ function useRenderDialogRoot(props, mode = 'dialog') {
   const modal = isAlertDialog ? true : modalProp;
   const disablePointerDismissal = isAlertDialog || disablePointerDismissalProp;
   const role = isAlertDialog ? 'alertdialog' : 'dialog';
-  const parentDialogRootContext = useDialogRootContext(true);
-  const nested = Boolean(parentDialogRootContext);
+  const parentStore = useDialogRootContext(true);
+  const nested = parentStore != null;
   const rootState = {
     modal,
     disablePointerDismissal,
     nested,
     role
   };
-  const store = DialogStore.useStore(handle?.store, {
+
+  // The store is owned by this Root instance and created exactly once. It is not tied to the handle:
+  // the handle attaches to it, so swapping the handle re-attaches rather than recreating state.
+  // Default values are only initial values; controlled values and root state are synced after creation.
+  // Dialogs pass the popup element to Floating UI as the floating element (`treatPopupAsFloatingElement`).
+  const store = usePopupRootStore((floatingId, floatingNested) => new DialogStore({
     open: defaultOpen,
     openProp,
     activeTriggerId: defaultTriggerIdProp,
     triggerIdProp,
     ...rootState
-  });
-
-  // Support initially open state when uncontrolled
-  useOnFirstRender(() => {
-    const nextState = openProp === undefined && store.state.open === false && defaultOpen === true ? {
-      open: true,
-      activeTriggerId: defaultTriggerIdProp
-    } : null;
-    if (isAlertDialog) {
-      // Handles can reuse plain Dialog stores; alert dialog invariants must exist immediately.
-      store.update(nextState ? {
-        ...rootState,
-        ...nextState
-      } : rootState);
-    } else if (nextState) {
-      store.update(nextState);
-    }
-  });
+  }, floatingId, floatingNested), true);
   store.useControlledProp('openProp', openProp);
   store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useSyncedValues(rootState);
@@ -404,83 +457,31 @@ function useRenderDialogRoot(props, mode = 'dialog') {
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const payload = store.useState('payload');
-  useDialogRoot({
-    store,
-    actionsRef
-  });
+  usePopupRootSync(store, open);
+  useImplicitActiveTrigger(store);
+  const {
+    forceUnmount
+  } = useOpenStateTransitions(open, store);
+  React.useImperativeHandle(actionsRef, () => ({
+    unmount: forceUnmount,
+    close: () => store.setOpen(false, createChangeEventDetails(imperativeAction))
+  }), [forceUnmount, store]);
   const shouldRenderInteractions = open || mounted;
-  const contextValue = React.useMemo(() => ({
-    store
-  }), [store]);
-  return /*#__PURE__*/jsx(IsDrawerContext.Provider, {
-    value: false,
-    children: /*#__PURE__*/jsxs(DialogRootContext.Provider, {
-      value: contextValue,
-      children: [shouldRenderInteractions && /*#__PURE__*/jsx(DialogInteractions, {
-        store: store,
-        parentContext: parentDialogRootContext?.store.context,
-        isDrawer: isDrawer
-      }), typeof children === 'function' ? children({
-        payload
-      }) : children]
-    })
+  return /*#__PURE__*/jsxs(DialogRootContext.Provider, {
+    value: store,
+    children: [handle && /*#__PURE__*/jsx(PopupHandleAttachment, {
+      handle: handle,
+      store: store
+    }), shouldRenderInteractions && /*#__PURE__*/jsx(DialogInteractions, {
+      store: store,
+      parentContext: parentStore?.context,
+      isDrawer: isDrawer
+    }), typeof children === 'function' ? children({
+      payload
+    }) : children]
   });
 }
 
-/**
- * Groups all parts of the dialog.
- * Doesn't render its own HTML element.
- *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
- */
-function DialogRoot(props) {
-  const mode = React.useContext(IsDrawerContext) ? 'drawer' : 'dialog';
-  return useRenderDialogRoot(props, mode);
-}
-
-let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
-  /**
-   * Present when the dialog is open.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
-  /**
-   * Present when the dialog is closed.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
-  /**
-   * Present when the dialog is animating in.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the dialog is animating out.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
-  /**
-   * Present when the dialog is nested within another dialog.
-   */
-  DialogViewportDataAttributes["nested"] = "data-nested";
-  /**
-   * Present when the dialog has other open dialogs nested within it.
-   */
-  DialogViewportDataAttributes["nestedDialogOpen"] = "data-nested-dialog-open";
-  return DialogViewportDataAttributes;
-}({});
-
-const stateAttributesMapping$2 = {
-  ...popupStateMapping,
-  ...transitionStatusMapping,
-  nested(value) {
-    return value ? {
-      [DialogViewportDataAttributes.nested]: ''
-    } : null;
-  },
-  nestedDialogOpen(value) {
-    return value ? {
-      [DialogViewportDataAttributes.nestedDialogOpen]: ''
-    } : null;
-  }
-};
-
 /**
  * A positioning container for the dialog popup that can be made scrollable.
  * Renders a `<div>` element.
@@ -496,9 +497,7 @@ const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewport(com
     ...elementProps
   } = componentProps;
   const keepMounted = useDialogPortalContext();
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const open = store.useState('open');
   const nested = store.useState('nested');
   const transitionStatus = store.useState('transitionStatus');
@@ -517,7 +516,7 @@ const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewport(com
     enabled: shouldRender,
     state,
     ref: [forwardedRef, setViewportElement],
-    stateAttributesMapping: stateAttributesMapping$2,
+    stateAttributesMapping: dialogStateAttributesMapping,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -548,8 +547,9 @@ const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigger(compo
     handle,
     ...elementProps
   } = componentProps;
-  const dialogRootContext = useDialogRootContext(true);
-  const store = handle?.store ?? dialogRootContext?.store;
+  const dialogRootStore = useDialogRootContext(true);
+  const handleStore = usePopupHandleStore(handle);
+  const store = handleStore ?? dialogRootStore;
   if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.' : formatErrorMessage(79));
   }
@@ -571,9 +571,7 @@ const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigger(compo
     disabled,
     native: nativeButton
   });
-  const click = useClick(floatingContext, {
-    enabled: floatingContext != null
-  });
+  const click = useClick(floatingContext);
   const interactionTypeProps = useOpenMethodTriggerProps(() => store.select('open'), interactionType => {
     store.set('openMethod', interactionType);
   });
@@ -645,11 +643,6 @@ let DrawerBackdropCssVars = /*#__PURE__*/function (DrawerBackdropCssVars) {
   return DrawerBackdropCssVars;
 }({});
 
-const stateAttributesMapping$1 = {
-  ...popupStateMapping,
-  ...transitionStatusMapping
-};
-
 /**
  * An overlay displayed beneath the popup.
  * Renders a `<div>` element.
@@ -664,9 +657,7 @@ const DrawerBackdrop = /*#__PURE__*/React.forwardRef(function DrawerBackdrop(com
     forceRender = false,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const open = store.useState('open');
   const nested = store.useState('nested');
   const mounted = store.useState('mounted');
@@ -678,7 +669,7 @@ const DrawerBackdrop = /*#__PURE__*/React.forwardRef(function DrawerBackdrop(com
   return useRenderElement('div', componentProps, {
     state,
     ref: [store.context.backdropRef, forwardedRef],
-    stateAttributesMapping: stateAttributesMapping$1,
+    stateAttributesMapping: popupTransitionStateMapping,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -722,9 +713,8 @@ if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerCo
 
 const DrawerProviderContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DrawerProviderContext.displayName = "DrawerProviderContext";
-function useDrawerProviderContext(optional) {
-  const context = React.useContext(DrawerProviderContext);
-  return context;
+function useDrawerProviderContext() {
+  return React.useContext(DrawerProviderContext);
 }
 
 let DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
@@ -737,7 +727,7 @@ let DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
    */
   DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the drawer is animating in.
+   * Present when the drawer begins animating in.
    */
   DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**
@@ -776,7 +766,7 @@ const DrawerRootContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DrawerRootContext.displayName = "DrawerRootContext";
 function useDrawerRootContext(optional) {
   const drawerRootContext = React.useContext(DrawerRootContext);
-  if (optional === false && drawerRootContext === undefined) {
+  if (optional !== true && drawerRootContext === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DrawerRootContext is missing. Drawer parts must be placed within <Drawer.Root>.' : formatErrorMessage(90));
   }
   return drawerRootContext;
@@ -817,22 +807,24 @@ function resolveSnapPointValue(snapPoint, viewportHeight, rootFontSize) {
   }
   return null;
 }
-function findClosestSnapPoint(height, points) {
-  let closest = null;
+
+/**
+ * Returns the index of the value closest to `target`, or `-1` if `values` is empty.
+ */
+function closestSnapPointIndex(values, target) {
+  let closestIndex = -1;
   let closestDistance = Infinity;
-  for (const point of points) {
-    const distance = Math.abs(point.height - height);
+  for (let index = 0; index < values.length; index += 1) {
+    const distance = Math.abs(values[index] - target);
     if (distance < closestDistance) {
       closestDistance = distance;
-      closest = point;
+      closestIndex = index;
     }
   }
-  return closest;
+  return closestIndex;
 }
 function useDrawerSnapPoints() {
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const {
     snapPoints,
     activeSnapPoint,
@@ -845,12 +837,7 @@ function useDrawerSnapPoints() {
   const measureViewportHeight = useStableCallback(() => {
     const doc = ownerDocument(viewportElement);
     const html = doc.documentElement;
-    if (viewportElement) {
-      setViewportHeight(viewportElement.offsetHeight);
-    }
-    if (!viewportElement) {
-      setViewportHeight(html.clientHeight);
-    }
+    setViewportHeight(viewportElement ? viewportElement.offsetHeight : html.clientHeight);
     const fontSize = parseFloat(getComputedStyle(html).fontSize);
     if (Number.isFinite(fontSize)) {
       setRootFontSize(fontSize);
@@ -872,12 +859,9 @@ function useDrawerSnapPoints() {
       return [];
     }
     const maxHeight = Math.min(popupHeight, viewportHeight);
-    if (!Number.isFinite(maxHeight) || maxHeight <= 0) {
-      return [];
-    }
     const resolved = snapPoints.map(value => {
       const resolvedHeight = resolveSnapPointValue(value, viewportHeight, rootFontSize);
-      if (resolvedHeight === null || !Number.isFinite(resolvedHeight)) {
+      if (resolvedHeight === null) {
         return null;
       }
       const clampedHeight = clamp(resolvedHeight, 0, maxHeight);
@@ -905,9 +889,6 @@ function useDrawerSnapPoints() {
     return deduped;
   }, [popupHeight, rootFontSize, snapPoints, viewportHeight]);
   const resolvedActiveSnapPoint = React.useMemo(() => {
-    if (activeSnapPoint === undefined) {
-      return resolvedSnapPoints[0];
-    }
     if (activeSnapPoint === null) {
       return undefined;
     }
@@ -917,11 +898,11 @@ function useDrawerSnapPoints() {
     }
     const maxHeight = Math.min(popupHeight, viewportHeight);
     const resolvedHeight = resolveSnapPointValue(activeSnapPoint, viewportHeight, rootFontSize);
-    if (resolvedHeight === null || !Number.isFinite(resolvedHeight)) {
+    if (resolvedHeight === null) {
       return undefined;
     }
     const clampedHeight = clamp(resolvedHeight, 0, maxHeight);
-    return findClosestSnapPoint(clampedHeight, resolvedSnapPoints) ?? undefined;
+    return resolvedSnapPoints[closestSnapPointIndex(resolvedSnapPoints.map(point => point.height), clampedHeight)];
   }, [activeSnapPoint, popupHeight, resolvedSnapPoints, rootFontSize, viewportHeight]);
   return {
     snapPoints,
@@ -936,9 +917,8 @@ function useDrawerSnapPoints() {
 
 const DrawerViewportContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") DrawerViewportContext.displayName = "DrawerViewportContext";
-function useDrawerViewportContext(optional) {
-  const context = React.useContext(DrawerViewportContext);
-  return context;
+function useDrawerViewportContext() {
+  return React.useContext(DrawerViewportContext);
 }
 
 let drawerSwipeVarsRegistered = false;
@@ -996,8 +976,7 @@ function removeCSSVariableInheritance$1() {
   drawerSwipeVarsRegistered = true;
 }
 const stateAttributesMapping = {
-  ...popupStateMapping,
-  ...transitionStatusMapping,
+  ...popupTransitionStateMapping,
   expanded(value) {
     return value ? {
       [DrawerPopupDataAttributes.expanded]: ''
@@ -1014,9 +993,9 @@ const stateAttributesMapping = {
     } : null;
   },
   swipeDirection(value) {
-    return value ? {
+    return {
       [DrawerPopupDataAttributes.swipeDirection]: value
-    } : null;
+    };
   },
   swiping(value) {
     return value ? {
@@ -1040,9 +1019,7 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
     initialFocus,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const popupRef = store.context.popupRef;
   const {
     swipeDirection,
@@ -1081,6 +1058,8 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
   const swipeStrength = swipe?.swipeStrength ?? null;
   const [popupHeight, setPopupHeight] = React.useState(0);
   const popupHeightRef = React.useRef(0);
+
+  /* istanbul ignore else -- process.env.NODE_ENV is a build-time constant. */
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
@@ -1163,7 +1142,7 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
       }
     };
   }, [nestedSwipeProgressStore, popupRef]);
-  React.useEffect(() => {
+  useIsoLayoutEffect(() => {
     if (!open) {
       return undefined;
     }
@@ -1172,7 +1151,7 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
       notifyParentFrontmostHeight?.(0);
     };
   }, [frontmostHeight, open, notifyParentFrontmostHeight]);
-  React.useEffect(() => {
+  useIsoLayoutEffect(() => {
     if (!notifyParentHasNestedDrawer) {
       return undefined;
     }
@@ -1216,7 +1195,7 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
   let dragStyles = swipe ? swipe.getDragStyles() : EMPTY_OBJECT;
   if (shouldApplySnapPoints && swipeDirection === 'down') {
     const baseOffset = activeSnapPointOffset ?? 0;
-    const movementValue = Number.parseFloat(String(dragStyles[DrawerPopupCssVars.swipeMovementY] ?? 0));
+    const movementValue = Number.parseFloat(String(dragStyles[DrawerPopupCssVars.swipeMovementY]));
     if (swiping && Number.isFinite(movementValue)) {
       dragStyles = {
         ...dragStyles,
@@ -1326,6 +1305,7 @@ function DrawerRoot(props) {
     state: 'snapPoint'
   });
   const isNestedDrawerOpenRef = React.useRef(false);
+  const swipeAreaActiveRef = React.useRef(false);
   const setActiveSnapPoint = useStableCallback((nextSnapPoint, eventDetails) => {
     const resolvedEventDetails = eventDetails ?? createChangeEventDetails(none);
     onSnapPointChange?.(nextSnapPoint, resolvedEventDetails);
@@ -1385,6 +1365,7 @@ function DrawerRoot(props) {
   });
   const contextValue = React.useMemo(() => ({
     swipeDirection,
+    swipeAreaActiveRef,
     snapToSequentialPoints,
     snapPoints,
     activeSnapPoint: resolvedActiveSnapPoint,
@@ -1403,30 +1384,28 @@ function DrawerRoot(props) {
     notifyParentSwipingChange,
     notifyParentSwipeProgressChange,
     notifyParentHasNestedDrawer
-  }), [resolvedActiveSnapPoint, frontmostHeight, hasNestedDrawer, nestedSwiping, nestedSwipeProgressStore, notifyParentHasNestedDrawer, notifyParentSwipeProgressChange, notifyParentSwipingChange, notifyParentFrontmostHeight, onNestedDrawerPresenceChange, onNestedFrontmostHeightChange, onNestedSwipeProgressChange, onNestedSwipingChange, onPopupHeightChange, popupHeight, setActiveSnapPoint, snapPoints, snapToSequentialPoints, swipeDirection]);
+  }), [resolvedActiveSnapPoint, frontmostHeight, hasNestedDrawer, nestedSwiping, nestedSwipeProgressStore, notifyParentHasNestedDrawer, notifyParentSwipeProgressChange, notifyParentSwipingChange, notifyParentFrontmostHeight, onNestedDrawerPresenceChange, onNestedFrontmostHeightChange, onNestedSwipeProgressChange, onNestedSwipingChange, onPopupHeightChange, popupHeight, setActiveSnapPoint, snapPoints, snapToSequentialPoints, swipeAreaActiveRef, swipeDirection]);
   const resolvedChildren = typeof children === 'function' ? payload => /*#__PURE__*/jsxs(React.Fragment, {
     children: [_DrawerProviderReport || (_DrawerProviderReport = /*#__PURE__*/jsx(DrawerProviderReporter, {})), children(payload)]
   }) : /*#__PURE__*/jsxs(React.Fragment, {
     children: [_DrawerProviderReport2 || (_DrawerProviderReport2 = /*#__PURE__*/jsx(DrawerProviderReporter, {})), children]
   });
+  const dialog = useRenderDialogRoot('drawer', {
+    open: openProp,
+    defaultOpen,
+    onOpenChange: handleOpenChange,
+    onOpenChangeComplete,
+    disablePointerDismissal,
+    modal,
+    actionsRef,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp,
+    children: resolvedChildren
+  });
   return /*#__PURE__*/jsx(DrawerRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/jsx(IsDrawerContext.Provider, {
-      value: true,
-      children: /*#__PURE__*/jsx(DialogRoot, {
-        open: openProp,
-        defaultOpen: defaultOpen,
-        onOpenChange: handleOpenChange,
-        onOpenChangeComplete: onOpenChangeComplete,
-        disablePointerDismissal: disablePointerDismissal,
-        modal: modal,
-        actionsRef: actionsRef,
-        handle: handle,
-        triggerId: triggerIdProp,
-        defaultTriggerId: defaultTriggerIdProp,
-        children: resolvedChildren
-      })
-    })
+    children: dialog
   });
 }
 function createNestedSwipeProgressStore() {
@@ -1453,29 +1432,25 @@ function createNestedSwipeProgressStore() {
   };
 }
 function DrawerProviderReporter() {
-  const drawerId = useId();
   const providerContext = useDrawerProviderContext();
-  const {
-    store
-  } = useDialogRootContext(false);
+  const store = useDialogRootContext(false);
+  const setDrawerOpen = providerContext?.setDrawerOpen;
+  const removeDrawer = providerContext?.removeDrawer;
   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) {
+  useIsoLayoutEffect(() => {
+    if (!removeDrawer) {
       return undefined;
     }
     return () => {
-      providerContext.removeDrawer(drawerId);
+      removeDrawer(store);
     };
-  }, [drawerId, providerContext]);
-  React.useEffect(() => {
-    if (drawerId == null) {
-      return;
-    }
-    providerContext?.setDrawerOpen(drawerId, open);
-  }, [drawerId, open, providerContext]);
+  }, [removeDrawer, store]);
+  useIsoLayoutEffect(() => {
+    setDrawerOpen?.(store, open);
+  }, [open, setDrawerOpen, store]);
   React.useEffect(() => {
     // CloseWatcher enables the Android back gesture (Chromium-only).
     // Keep this Android-only for now to avoid interfering with Escape/nesting semantics on desktop due to `useDismiss`.
@@ -1503,53 +1478,11 @@ function DrawerProviderReporter() {
   return null;
 }
 
-function isScrollable(element, axis,
-// When true, a container that overflows only once extra space is added (e.g. drawer
-// keyboard scroll slack) still counts, as long as it has layout size on the axis.
-allowOverflowIntent = false) {
-  const style = getComputedStyle$1(element);
-  if (axis === 'vertical') {
-    const overflowY = style.overflowY;
-    if (overflowY !== 'auto' && overflowY !== 'scroll') {
-      return false;
-    }
-    return allowOverflowIntent ? element.clientHeight > 0 : element.scrollHeight > element.clientHeight;
-  }
-  const overflowX = style.overflowX;
-  if (overflowX !== 'auto' && overflowX !== 'scroll') {
-    return false;
-  }
-  return allowOverflowIntent ? element.clientWidth > 0 : element.scrollWidth > element.clientWidth;
-}
-function hasScrollableAncestor(target, root, axes) {
-  // `getParentNode` crosses shadow boundaries (and slots), so a target inside a shadow root
-  // still walks up to scrollable ancestors in the light DOM.
-  let node = target;
-  while (isHTMLElement(node) && node !== root && !isLastTraversableNode(node)) {
-    for (const axis of axes) {
-      if (isScrollable(node, axis)) {
-        return true;
-      }
-    }
-    node = getParentNode(node);
-  }
-  return false;
-}
-function findScrollableTouchTarget(target, root, axis = 'vertical', allowOverflowIntent = false) {
-  // `getParentNode` crosses shadow boundaries (and slots), so a target inside a shadow root
-  // still reaches a scrollable ancestor in the light DOM.
-  let node = isHTMLElement(target) ? target : null;
-  while (isHTMLElement(node) && node !== root && !isLastTraversableNode(node)) {
-    if (isScrollable(node, axis, allowOverflowIntent)) {
-      return node;
-    }
-    node = getParentNode(node);
-  }
-  return isScrollable(root, axis, allowOverflowIntent) ? root : null;
-}
-
-function getElementAtPoint(doc, x, y) {
-  return typeof doc?.elementFromPoint === 'function' ? doc.elementFromPoint(x, y) : null;
+// `Document.elementFromPoint` retargets shadow content to the shadow host, which then fails
+// `contains()` checks against a popup inside that shadow root, so callers pass `getRootNode()`
+// (a document or a shadow root) rather than `ownerDocument()`.
+function getElementAtPoint(root, x, y) {
+  return typeof root?.elementFromPoint === 'function' ? root.elementFromPoint(x, y) : null;
 }
 
 const DEFAULT_SWIPE_THRESHOLD = 40;
@@ -1696,6 +1629,7 @@ function useSwipeDismiss(options) {
   });
   const swipeProgressRef = React.useRef(0);
   const swipeThresholdRef = React.useRef(swipeThresholdDefault);
+  const swipeThresholdFunctionRef = React.useRef(null);
   const swipeStartTimeRef = React.useRef(null);
   const lastDragSampleRef = React.useRef(null);
   const lastDragVelocityRef = React.useRef({
@@ -1717,15 +1651,12 @@ function useSwipeDismiss(options) {
     if (!direction) {
       return;
     }
-    if (typeof swipeThresholdProp !== 'function') {
-      swipeThresholdRef.current = swipeThresholdDefault;
-      return;
-    }
     const element = elementRef.current;
-    if (!element) {
+    const thresholdFunction = swipeThresholdFunctionRef.current;
+    if (!element || !thresholdFunction) {
       return;
     }
-    const value = swipeThresholdProp({
+    const value = thresholdFunction({
       element,
       direction
     });
@@ -1803,6 +1734,7 @@ function useSwipeDismiss(options) {
     setDragDismissed(false);
     updateSwipeProgress(0);
     swipeThresholdRef.current = swipeThresholdDefault;
+    swipeThresholdFunctionRef.current = null;
     dragStartPosRef.current = {
       x: 0,
       y: 0
@@ -1843,11 +1775,6 @@ function useSwipeDismiss(options) {
     lastProgressDetailsRef.current = null;
     syncDragStyles(false);
   }, [setSwiping, swipeThresholdDefault, syncDragStyles, updateSwipeProgress]);
-  React.useEffect(() => {
-    if (typeof swipeThresholdProp !== 'function') {
-      swipeThresholdRef.current = swipeThresholdDefault;
-    }
-  }, [swipeThresholdDefault, swipeThresholdProp]);
   function getPrimaryPointerPosition(event) {
     if ('touches' in event) {
       const touch = event.touches[0];
@@ -1868,8 +1795,8 @@ function useSwipeDismiss(options) {
     return event.pointerType === 'touch';
   }
   function getTargetAtPoint(position, nativeEvent) {
-    const doc = ownerDocument(elementRef.current);
-    const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
+    const root = elementRef.current?.getRootNode();
+    const elementAtPoint = getElementAtPoint(root, position.x, position.y);
     const target = elementAtPoint ?? getTarget(nativeEvent);
     return target;
   }
@@ -1912,6 +1839,8 @@ function useSwipeDismiss(options) {
     swipeStartTimeRef.current = getValidTimeStamp(event.timeStamp);
     swipeCancelBaselineRef.current = position;
     lastMovePosRef.current = position;
+    swipeThresholdRef.current = swipeThresholdDefault;
+    swipeThresholdFunctionRef.current = typeof swipeThresholdProp === 'function' ? swipeThresholdProp : null;
     if (element) {
       elementSizeRef.current = {
         width: element.offsetWidth,
@@ -1976,12 +1905,9 @@ function useSwipeDismiss(options) {
     onCancel?.(event.nativeEvent);
   }
   function applyDirectionalDamping(deltaX, deltaY) {
-    const exponent = value => value >= 0 ? value ** 0.5 : -(Math.abs(value) ** 0.5);
+    const exponent = value => Math.sign(value) * Math.abs(value) ** 0.5;
     const dampAxis = (delta, allowNegative, allowPositive) => {
-      if (!allowNegative && delta < 0) {
-        return exponent(delta);
-      }
-      if (!allowPositive && delta > 0) {
+      if (!allowNegative && delta < 0 || !allowPositive && delta > 0) {
         return exponent(delta);
       }
       return delta;
@@ -1994,29 +1920,16 @@ function useSwipeDismiss(options) {
     };
   }
   function canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY) {
+    // Swiping toward the axis start edge (down/right) is allowed when scrolled to the start;
+    // toward the end edge (up/left) when scrolled to the end.
+    const canSwipeOnAxis = (delta, scrollOffset, maxScrollOffset, allowTowardStart, allowTowardEnd) => delta > 0 && scrollOffset <= 0 && allowTowardStart || delta < 0 && scrollOffset >= Math.max(0, maxScrollOffset) && allowTowardEnd;
     const absDeltaX = Math.abs(deltaX);
     const absDeltaY = Math.abs(deltaY);
-    const useVerticalAxis = hasVertical && deltaY !== 0 && (!hasHorizontal || absDeltaY >= absDeltaX);
-    if (useVerticalAxis) {
-      const maxScrollTop = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
-      const atTop = scrollTarget.scrollTop <= 0;
-      const atBottom = scrollTarget.scrollTop >= maxScrollTop;
-      const movingDown = deltaY > 0;
-      const movingUp = deltaY < 0;
-      const canSwipeDown = movingDown && atTop && allowDown;
-      const canSwipeUp = movingUp && atBottom && allowUp;
-      return canSwipeDown || canSwipeUp;
-    }
-    const useHorizontalAxis = hasHorizontal && deltaX !== 0 && (!hasVertical || absDeltaX > absDeltaY);
-    if (useHorizontalAxis) {
-      const maxScrollLeft = Math.max(0, scrollTarget.scrollWidth - scrollTarget.clientWidth);
-      const atLeft = scrollTarget.scrollLeft <= 0;
-      const atRight = scrollTarget.scrollLeft >= maxScrollLeft;
-      const movingRight = deltaX > 0;
-      const movingLeft = deltaX < 0;
-      const canSwipeRight = movingRight && atLeft && allowRight;
-      const canSwipeLeft = movingLeft && atRight && allowLeft;
-      return canSwipeRight || canSwipeLeft;
+    if (hasVertical && deltaY !== 0 && (!hasHorizontal || absDeltaY >= absDeltaX)) {
+      return canSwipeOnAxis(deltaY, scrollTarget.scrollTop, scrollTarget.scrollHeight - scrollTarget.clientHeight, allowDown, allowUp);
+    }
+    if (hasHorizontal && deltaX !== 0 && (!hasVertical || absDeltaX > absDeltaY)) {
+      return canSwipeOnAxis(deltaX, scrollTarget.scrollLeft, scrollTarget.scrollWidth - scrollTarget.clientWidth, allowRight, allowLeft);
     }
     return null;
   }
@@ -2037,7 +1950,7 @@ function useSwipeDismiss(options) {
     pendingSwipeRef.current = true;
     pendingSwipeStartPosRef.current = startPos;
     swipeFromScrollableRef.current = false;
-    sawPrimaryButtonsOnMoveRef.current = false;
+    sawPrimaryButtonsOnMoveRef.current = !('touches' in event);
     const allowedToStart = canStart ? canStart(startPos, {
       nativeEvent: event.nativeEvent,
       direction: primaryDirection
@@ -2065,14 +1978,21 @@ function useSwipeDismiss(options) {
       event.preventDefault();
     }
     if (isFirstPointerMoveRef.current) {
-      // Adjust the starting position to the current position on the first move
-      // to account for the delay between pointerdown and the first pointermove on iOS.
-      dragStartPosRef.current = position;
-      const moveTime = getValidTimeStamp(event.timeStamp);
-      if (moveTime !== null) {
-        swipeStartTimeRef.current = moveTime;
-      }
       isFirstPointerMoveRef.current = false;
+      // Reset the drag origin to the first move's position to absorb the gap between the press and
+      // the first move event — notably on iOS touch, where the first `touchmove` arrives already
+      // offset from the `touchstart` — which would otherwise make the dragged element jump. This
+      // only matters when an element follows the pointer; when `trackDrag` is false (e.g. the
+      // swipe-area, which only opens the drawer) keep the original press position so a quick flick
+      // still registers: on a low-refresh-rate display the whole travel can land in this single
+      // first move, and discarding it would drop the gesture.
+      if (trackDrag) {
+        dragStartPosRef.current = position;
+        const moveTime = getValidTimeStamp(event.timeStamp);
+        if (moveTime !== null) {
+          swipeStartTimeRef.current = moveTime;
+        }
+      }
     }
     const clientX = position.x;
     const clientY = position.y;
@@ -2160,51 +2080,45 @@ function useSwipeDismiss(options) {
         newOffsetY += dampedDelta.y;
       }
     }
+
+    // Only rewrite drag styles when the drag offset actually changed. `syncDragStyles` writes the
+    // raw (undamped) frozen transform and movement vars, relying on the consumer's `onProgress`
+    // to overwrite them with damped styles — but `updateSwipeProgress` dedupes unchanged
+    // deltas and skips `onProgress`. A move that doesn't change the offset (e.g. the cursor
+    // pinned at a screen edge during an off-screen drag, jittering only on the ignored axis)
+    // would otherwise reinstate the raw styles with no correction, jumping the element to the
+    // undamped position.
+    const previousOffset = dragOffsetRef.current;
+    const offsetChanged = newOffsetX !== previousOffset.x || newOffsetY !== previousOffset.y;
     dragOffsetRef.current = {
       x: newOffsetX,
       y: newOffsetY
     };
-    syncDragStyles(true);
+    if (offsetChanged) {
+      syncDragStyles(true);
+    }
     recordDragSample({
       x: newOffsetX,
       y: newOffsetY
     }, getValidTimeStamp(event.timeStamp));
     const dragDeltaX = newOffsetX - initialTransformRef.current.x;
     const dragDeltaY = newOffsetY - initialTransformRef.current.y;
-    const swipeDirectionDetails = intendedSwipeDirectionRef.current;
-    const progressDirection = primaryDirection ?? intendedSwipeDirectionRef.current;
-    if (!progressDirection) {
-      updateSwipeProgress(0, {
-        deltaX: dragDeltaX,
-        deltaY: dragDeltaY,
-        direction: swipeDirectionDetails
-      });
-      return;
-    }
-    const size = progressDirection === 'left' || progressDirection === 'right' ? elementSizeRef.current.width : elementSizeRef.current.height;
-    const scale = initialTransformRef.current.scale || 1;
-    if (size <= 0 || scale <= 0) {
-      updateSwipeProgress(0, {
-        deltaX: dragDeltaX,
-        deltaY: dragDeltaY,
-        direction: swipeDirectionDetails
-      });
-      return;
-    }
-    const progressDisplacement = getDisplacement(progressDirection, newOffsetX - initialTransformRef.current.x, newOffsetY - initialTransformRef.current.y);
-    if (progressDisplacement <= 0) {
-      updateSwipeProgress(0, {
-        deltaX: dragDeltaX,
-        deltaY: dragDeltaY,
-        direction: swipeDirectionDetails
-      });
-      return;
-    }
-    updateSwipeProgress(progressDisplacement / (size * scale), {
+    const progressDetails = {
       deltaX: dragDeltaX,
       deltaY: dragDeltaY,
-      direction: swipeDirectionDetails
-    });
+      direction: intendedSwipeDirectionRef.current
+    };
+    let progress = 0;
+    const progressDirection = primaryDirection ?? intendedSwipeDirectionRef.current;
+    if (progressDirection) {
+      const size = progressDirection === 'left' || progressDirection === 'right' ? elementSizeRef.current.width : elementSizeRef.current.height;
+      const scale = initialTransformRef.current.scale || 1;
+      const progressDisplacement = getDisplacement(progressDirection, dragDeltaX, dragDeltaY);
+      if (size > 0 && scale > 0 && progressDisplacement > 0) {
+        progress = progressDisplacement / (size * scale);
+      }
+    }
+    updateSwipeProgress(progress, progressDetails);
   }
   const handleEnd = useStableCallback(event => {
     if (!enabled) {
@@ -2292,33 +2206,9 @@ function useSwipeDismiss(options) {
       dismissDirection = intendedSwipeDirectionRef.current ?? primaryDirection;
     } else {
       for (const direction of directions) {
-        switch (direction) {
-          case 'right':
-            if (deltaX > swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'right';
-            }
-            break;
-          case 'left':
-            if (deltaX < -swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'left';
-            }
-            break;
-          case 'down':
-            if (deltaY > swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'down';
-            }
-            break;
-          case 'up':
-            if (deltaY < -swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'up';
-            }
-            break;
-        }
-        if (shouldClose) {
+        if (getDisplacement(direction, deltaX, deltaY) > swipeThresholdRef.current) {
+          shouldClose = true;
+          dismissDirection = direction;
           break;
         }
       }
@@ -2460,25 +2350,29 @@ function useSwipeDismiss(options) {
     });
   });
   const getDragStyles = React.useCallback(() => {
+    // Read `isSwipingRef`, not the lagging `isSwiping` state, to match the imperative writer
+    // `syncDragStyles`. Otherwise a render that commits before `setSwiping(true)` flushes strips the
+    // transform it just wrote, flashing the popup to its resting position for a frame.
+    const swiping = isSwipingRef.current;
     const dragOffset = dragOffsetRef.current;
     const initialTransform = initialTransformRef.current;
     const deltaX = dragOffset.x - initialTransform.x;
     const deltaY = dragOffset.y - initialTransform.y;
-    if (!isSwiping && deltaX === 0 && deltaY === 0 && !dragDismissed) {
+    if (!swiping && deltaX === 0 && deltaY === 0 && !dragDismissed) {
       return {
         [movementCssVars.x]: '0px',
         [movementCssVars.y]: '0px'
       };
     }
     return {
-      transition: isSwiping ? 'none' : undefined,
+      transition: swiping ? 'none' : undefined,
       // While swiping, freeze the element at its current visual transform so it doesn't snap to the
       // end position.
-      transform: isSwiping ? getDragTransform(dragOffset, initialTransform.scale) : undefined,
+      transform: swiping ? getDragTransform(dragOffset, initialTransform.scale) : undefined,
       [movementCssVars.x]: `${deltaX}px`,
       [movementCssVars.y]: `${deltaY}px`
     };
-  }, [dragDismissed, isSwiping, movementCssVars]);
+  }, [dragDismissed, movementCssVars]);
   const getPointerProps = React.useCallback(() => {
     if (!enabled) {
       return {};
@@ -2538,6 +2432,8 @@ 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 AXIS_LOCK_SLOP = 6;
+const AXIS_LOCK_BIAS = 2;
 const DRAWER_CONTENT_SELECTOR = `[${DRAWER_CONTENT_ATTRIBUTE}]`;
 /**
  * A positioning container for the drawer popup that can be made scrollable.
@@ -2553,9 +2449,7 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     children,
     ...elementProps
   } = props;
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const popupRef = store.context.popupRef;
   const backdropRef = store.context.backdropRef;
   const {
@@ -2563,7 +2457,8 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     notifyParentSwipingChange,
     notifyParentSwipeProgressChange,
     frontmostHeight,
-    snapToSequentialPoints
+    snapToSequentialPoints,
+    swipeAreaActiveRef
   } = useDrawerRootContext();
   const providerContext = useDrawerProviderContext();
   const {
@@ -2597,30 +2492,13 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
   const touchScrollStateRef = React.useRef(null);
   const virtualKeyboard = useDrawerVirtualKeyboardContext();
   const snapPointRange = React.useMemo(() => {
-    if (!snapPoints || snapPoints.length < 2) {
-      return null;
-    }
-    if (swipeDirection !== 'down' && swipeDirection !== 'up') {
-      return null;
-    }
-    if (resolvedSnapPoints.length < 2) {
-      return null;
-    }
-    const offsets = resolvedSnapPoints.map(point => point.offset).filter(offset => Number.isFinite(offset)).sort((a, b) => a - b);
-    if (offsets.length < 2) {
+    if (!snapPoints || snapPoints.length < 2 || resolvedSnapPoints.length < 2 || swipeDirection !== 'down' && swipeDirection !== 'up') {
       return null;
     }
+    const offsets = resolvedSnapPoints.map(point => point.offset).sort((a, b) => a - b);
     const minOffset = offsets[0];
     const nextOffset = offsets[1];
-    const maxOffset = offsets[offsets.length - 1];
-    let range = nextOffset - minOffset;
-    if (!Number.isFinite(range) || range <= 0) {
-      const fallbackRange = maxOffset - minOffset;
-      if (!Number.isFinite(fallbackRange) || fallbackRange <= 0) {
-        return null;
-      }
-      range = fallbackRange;
-    }
+    const range = nextOffset - minOffset;
     return {
       minOffset,
       range
@@ -2639,7 +2517,8 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     return [swipeDirection];
   }, [snapPoints, swipeDirection]);
   const setSwipeDismissed = useStableCallback(dismissed => {
-    setSwipeDismissedElements(popupRef.current, backdropRef.current, dismissed);
+    popupRef.current?.toggleAttribute(DrawerPopupDataAttributes.swipeDismiss, dismissed);
+    backdropRef.current?.toggleAttribute(DrawerPopupDataAttributes.swipeDismiss, dismissed);
   });
   const clearSwipeRelease = useStableCallback(() => {
     setSwipeDismissed(false);
@@ -2653,11 +2532,7 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     nestedSwipeActiveRef.current = false;
     notifyParentSwipingChange?.(false);
   });
-  const applySwipeProgress = useStableCallback(({
-    resolvedProgress,
-    shouldTrackProgress,
-    notifyParent
-  }) => {
+  const applySwipeProgress = useStableCallback((resolvedProgress, shouldTrackProgress, notifyParent) => {
     const isActive = open && !nested && shouldTrackProgress;
     const swipeProgress = isActive ? resolvedProgress : 0;
     const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
@@ -2675,78 +2550,48 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     if (!backdropElement) {
       return;
     }
-    if (!isActive || swipeProgress <= 0) {
-      backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
-      backdropElement.style.removeProperty(DrawerPopupCssVars.height);
-      return;
-    }
-    backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, `${swipeProgress}`);
-    if (frontmostHeight > 0) {
+    const showProgress = isActive && swipeProgress > 0;
+    backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, showProgress ? `${swipeProgress}` : '0');
+    if (showProgress && frontmostHeight > 0) {
       backdropElement.style.setProperty(DrawerPopupCssVars.height, `${frontmostHeight}px`);
     } else {
       backdropElement.style.removeProperty(DrawerPopupCssVars.height);
     }
   });
-  function resolveSwipeRelease({
-    direction,
-    deltaX,
-    deltaY,
-    velocityX,
-    velocityY,
-    releaseVelocityX,
-    releaseVelocityY
-  }) {
-    if (!direction) {
-      return null;
-    }
-    const popupElement = store.context.popupRef.current;
-    if (!popupElement) {
-      return null;
-    }
-    const size = direction === 'left' || direction === 'right' ? popupElement.offsetWidth : popupElement.offsetHeight;
-    if (!Number.isFinite(size) || size <= 0) {
+  function resolveSwipeRelease(popupElement, direction, deltaX, deltaY, velocityX, velocityY, releaseVelocityX, releaseVelocityY) {
+    const size = getBaseSwipeSize(popupElement, direction);
+    if (size <= 0) {
       return null;
     }
-    const axisDelta = direction === 'left' || direction === 'right' ? deltaX : deltaY;
-    const snapPointBaseOffset = snapPoints && snapPoints.length > 0 ? activeSnapPointOffset ?? 0 : 0;
-    let baseOffset = 0;
-    if (direction === 'down') {
-      baseOffset = snapPointBaseOffset;
-    } else if (direction === 'up') {
-      baseOffset = -snapPointBaseOffset;
-    }
-    const translation = baseOffset + axisDelta;
-    const translationAlongDirection = direction === 'left' || direction === 'up' ? -translation : translation;
+
+    // The snap point base offset shifts the popup along the dismiss direction for both
+    // `down` (+offset) and `up` (-offset), so it always adds to the directional translation.
+    const snapPointBaseOffset = (direction === 'down' || direction === 'up') && snapPoints && snapPoints.length > 0 ? activeSnapPointOffset ?? 0 : 0;
+    const translationAlongDirection = snapPointBaseOffset + getDisplacement(direction, deltaX, deltaY);
     const remainingDistance = Math.max(0, size - translationAlongDirection);
-    if (!Number.isFinite(remainingDistance) || remainingDistance <= 0) {
+    if (remainingDistance <= 0) {
       return null;
     }
-    const axisVelocity = direction === 'left' || direction === 'right' ? releaseVelocityX : releaseVelocityY;
-    const fallbackVelocity = direction === 'left' || direction === 'right' ? velocityX : velocityY;
-    const resolvedVelocity = Math.abs(axisVelocity) > 0 && Number.isFinite(axisVelocity) ? axisVelocity : fallbackVelocity;
-    const directionalVelocity = direction === 'left' || direction === 'up' ? -resolvedVelocity : resolvedVelocity;
-    if (!Number.isFinite(directionalVelocity) || directionalVelocity <= MIN_SWIPE_RELEASE_VELOCITY) {
+    const releaseVelocity = getDisplacement(direction, releaseVelocityX, releaseVelocityY);
+    const directionalVelocity = Math.abs(releaseVelocity) > 0 ? releaseVelocity : getDisplacement(direction, velocityX, velocityY);
+    if (directionalVelocity <= MIN_SWIPE_RELEASE_VELOCITY) {
       return null;
     }
     const clampedVelocity = clamp(directionalVelocity, MIN_SWIPE_RELEASE_VELOCITY, MAX_SWIPE_RELEASE_VELOCITY);
+    // The gesture hook supplies finite deltas and velocities. The guards above keep the remaining
+    // distance and divisor positive, so the duration stays within [MIN, MAX] and the resulting
+    // scalar within (0, 1].
     const durationMs = clamp(remainingDistance / clampedVelocity, MIN_SWIPE_RELEASE_DURATION_MS, MAX_SWIPE_RELEASE_DURATION_MS);
-    if (!Number.isFinite(durationMs)) {
-      return null;
-    }
     const normalizedDuration = (durationMs - MIN_SWIPE_RELEASE_DURATION_MS) / (MAX_SWIPE_RELEASE_DURATION_MS - MIN_SWIPE_RELEASE_DURATION_MS);
-    const durationScalar = clamp(MIN_SWIPE_RELEASE_SCALAR + normalizedDuration * (MAX_SWIPE_RELEASE_SCALAR - MIN_SWIPE_RELEASE_SCALAR), MIN_SWIPE_RELEASE_SCALAR, MAX_SWIPE_RELEASE_SCALAR);
-    if (!Number.isFinite(durationScalar) || durationScalar <= 0) {
-      return null;
-    }
-    return durationScalar;
+    return MIN_SWIPE_RELEASE_SCALAR + normalizedDuration * (MAX_SWIPE_RELEASE_SCALAR - MIN_SWIPE_RELEASE_SCALAR);
   }
   function updateNestedSwipeActive(details) {
     if (nestedSwipeActiveRef.current || !details) {
       return;
     }
     const direction = details.direction ?? swipeDirection;
-    const delta = direction === 'left' || direction === 'right' ? details.deltaX : details.deltaY;
-    if (!Number.isFinite(delta) || Math.abs(delta) < MIN_SWIPE_THRESHOLD) {
+    const delta = getDisplacement(direction, details.deltaX, details.deltaY);
+    if (Math.abs(delta) < MIN_SWIPE_THRESHOLD) {
       return;
     }
     nestedSwipeActiveRef.current = true;
@@ -2763,13 +2608,10 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
       y: DrawerPopupCssVars.swipeMovementY
     },
     onSwipeStart(event) {
-      if ('touches' in event || 'pointerType' in event && event.pointerType === 'touch') {
+      if ('touches' in event || event.pointerType === 'touch') {
         return;
       }
       const popupElement = popupRef.current;
-      if (!popupElement) {
-        return;
-      }
       const doc = ownerDocument(popupElement);
       const selection = doc.getSelection?.();
       if (!selection || selection.isCollapsed) {
@@ -2801,54 +2643,38 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
         return false;
       }
       const doc = popupElement.ownerDocument;
-      const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
+      const elementAtPoint = getElementAtPoint(popupElement.getRootNode(), 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';
+      const touchLike = 'touches' 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);
       const hasSnapPoints = Boolean(snapPoints && snapPoints.length > 0);
-      if (swipingRef.current && swipeDirection === 'down' && hasSnapPoints && details && Number.isFinite(details.deltaY)) {
+      if (swipingRef.current && swipeDirection === 'down' && hasSnapPoints && details) {
         const popupElement = store.context.popupRef.current;
         if (popupElement) {
           popupElement.style.removeProperty('transform');
           popupElement.style.setProperty(DrawerPopupCssVars.swipeMovementY, `${getSnapPointSwipeMovement(activeSnapPointOffset ?? 0, details.deltaY)}px`);
         }
       }
-      const currentDirection = details?.direction ?? swipe$1.swipeDirection;
-      const isDismissSwipe = currentDirection === undefined || currentDirection === swipeDirection;
-      const isVerticalSwipe = swipeDirection === 'down' || swipeDirection === 'up';
-      const shouldTrackProgress = hasSnapPoints && isVerticalSwipe || !hasSnapPoints || swipeDirection === 'left' || swipeDirection === 'right' || isDismissSwipe;
       let resolvedProgress = progress;
       if (snapPointRange && popupHeight > 0) {
+        const baseOffset = activeSnapPointOffset ?? snapPointRange.minOffset;
+        const offsetToProgress = nextOffset => clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
         if (details && Number.isFinite(details.deltaY)) {
-          const baseOffset = activeSnapPointOffset ?? snapPointRange.minOffset;
-          const nextOffset = clamp(baseOffset + details.deltaY, 0, popupHeight);
-          resolvedProgress = clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
+          resolvedProgress = offsetToProgress(clamp(baseOffset + details.deltaY, 0, popupHeight));
         } else if (snapPointProgress !== null) {
           resolvedProgress = snapPointProgress;
-        } else if (currentDirection === 'down' || currentDirection === 'up') {
-          const displacement = progress * popupHeight;
-          const baseOffset = activeSnapPointOffset ?? snapPointRange.minOffset;
-          const nextOffset = currentDirection === 'down' ? baseOffset + displacement : baseOffset - displacement;
-          resolvedProgress = clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
         }
       }
-      applySwipeProgress({
-        resolvedProgress,
-        shouldTrackProgress,
-        notifyParent: true
-      });
+      applySwipeProgress(resolvedProgress, true, true);
     },
     onRelease({
       event,
@@ -2860,30 +2686,21 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
       releaseVelocityX,
       releaseVelocityY
     }) {
-      const swipeReleasePayload = {
-        deltaX,
-        deltaY,
-        velocityX,
-        velocityY,
-        releaseVelocityX,
-        releaseVelocityY
-      };
+      const popupElement = store.context.popupRef.current;
+      if (!popupElement) {
+        clearSwipeRelease();
+        return undefined;
+      }
+      const releasePopupElement = popupElement;
       function startSwipeRelease(resolvedDirection) {
         // Start ending transition styles earlier and synchronously to prevent a period where
         // the popup appears stuck on release before the actual closing animation starts.
-        const popupElement = store.context.popupRef.current;
-        if (!popupElement) {
-          return;
-        }
         finishNestedSwipe();
         setSwipeDismissed(true);
-        popupElement.style.removeProperty('transition');
-        popupElement.setAttribute(TransitionStatusDataAttributes.endingStyle, '');
+        releasePopupElement.style.removeProperty('transition');
+        releasePopupElement.setAttribute(TransitionStatusDataAttributes.endingStyle, '');
         ReactDOM.flushSync(() => {
-          setSwipeRelease(resolveSwipeRelease({
-            direction: resolvedDirection,
-            ...swipeReleasePayload
-          }));
+          setSwipeRelease(resolveSwipeRelease(releasePopupElement, resolvedDirection, deltaX, deltaY, velocityX, velocityY, releaseVelocityX, releaseVelocityY));
         });
       }
       if (!snapPoints || snapPoints.length === 0) {
@@ -2891,29 +2708,16 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
           clearSwipeRelease();
           return undefined;
         }
-        const element = store.context.popupRef.current;
-        if (!element) {
-          clearSwipeRelease();
-          return undefined;
-        }
-        const baseThreshold = getBaseSwipeThreshold(element, direction);
-        const delta = direction === 'left' || direction === 'right' ? deltaX : deltaY;
-        if (!Number.isFinite(delta)) {
-          clearSwipeRelease();
-          return undefined;
-        }
-        const directionalDelta = direction === 'left' || direction === 'up' ? -delta : delta;
+        const directionalDelta = getDisplacement(direction, deltaX, deltaY);
         if (directionalDelta <= 0) {
           clearSwipeRelease();
           return false;
         }
-        const velocity = direction === 'left' || direction === 'right' ? velocityX : velocityY;
-        const directionalVelocity = direction === 'left' || direction === 'up' ? -velocity : velocity;
-        if (directionalVelocity >= FAST_SWIPE_VELOCITY && directionalDelta > 0) {
+        if (getDisplacement(direction, velocityX, velocityY) >= FAST_SWIPE_VELOCITY) {
           startSwipeRelease(direction);
           return true;
         }
-        const shouldClose = directionalDelta > baseThreshold;
+        const shouldClose = directionalDelta > getBaseSwipeThreshold(releasePopupElement, direction);
         if (shouldClose) {
           startSwipeRelease(direction);
         } else {
@@ -2925,20 +2729,20 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
         clearSwipeRelease();
         return undefined;
       }
-      if (!popupHeight || resolvedSnapPoints.length === 0) {
+      if (!popupHeight) {
         clearSwipeRelease();
-        return undefined;
+        return false;
       }
-      const dragDelta = swipeDirection === 'down' ? deltaY : -deltaY;
-      if (!Number.isFinite(dragDelta)) {
+      if (resolvedSnapPoints.length === 0) {
         clearSwipeRelease();
         return undefined;
       }
+      const dragDelta = swipeDirection === 'down' ? deltaY : -deltaY;
       const dragDirection = Math.sign(dragDelta);
       const releaseDirectionalVelocity = swipeDirection === 'down' ? releaseVelocityY : -releaseVelocityY;
       const fallbackDirectionalVelocity = swipeDirection === 'down' ? velocityY : -velocityY;
-      let resolvedDirectionalVelocity = Number.isFinite(releaseDirectionalVelocity) ? releaseDirectionalVelocity : fallbackDirectionalVelocity;
-      if (dragDirection !== 0 && Math.abs(dragDelta) >= MIN_SWIPE_THRESHOLD && Number.isFinite(resolvedDirectionalVelocity)) {
+      let resolvedDirectionalVelocity = releaseDirectionalVelocity;
+      if (dragDirection !== 0 && Math.abs(dragDelta) >= MIN_SWIPE_THRESHOLD) {
         const velocityDirection = Math.sign(resolvedDirectionalVelocity);
         if (velocityDirection !== 0 && velocityDirection !== dragDirection) {
           // Ignore touch reversals that would otherwise flip the snap decision.
@@ -2947,39 +2751,20 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
       }
       const currentOffset = activeSnapPointOffset ?? 0;
       const dragTargetOffset = clamp(currentOffset + dragDelta, 0, popupHeight);
-      const velocityOffset = Number.isFinite(resolvedDirectionalVelocity) && Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD ? clamp(resolvedDirectionalVelocity, -MAX_SNAP_VELOCITY, MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0;
+      const velocityOffset = Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD ? clamp(resolvedDirectionalVelocity, -MAX_SNAP_VELOCITY, MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0;
       const targetOffset = snapToSequentialPoints ? dragTargetOffset : clamp(dragTargetOffset + velocityOffset, 0, popupHeight);
       const snapPointEventDetails = createChangeEventDetails(swipe, event);
       const closeFromSnapPoints = () => {
         pendingSwipeCloseSnapPointRef.current = activeSnapPoint;
-        setActiveSnapPoint?.(null, snapPointEventDetails);
+        setActiveSnapPoint(null, snapPointEventDetails);
         startSwipeRelease(swipeDirection);
         return true;
       };
       if (snapToSequentialPoints) {
         const orderedSnapPoints = [...resolvedSnapPoints].sort((first, second) => first.offset - second.offset);
-        if (orderedSnapPoints.length === 0) {
-          clearSwipeRelease();
-          return false;
-        }
-        let currentIndex = 0;
-        let closestDistance = Math.abs(currentOffset - orderedSnapPoints[0].offset);
-        for (let index = 1; index < orderedSnapPoints.length; index += 1) {
-          const distance = Math.abs(currentOffset - orderedSnapPoints[index].offset);
-          if (distance < closestDistance) {
-            closestDistance = distance;
-            currentIndex = index;
-          }
-        }
-        let targetSnapPoint = orderedSnapPoints[0];
-        closestDistance = Math.abs(targetOffset - targetSnapPoint.offset);
-        for (const snapPoint of orderedSnapPoints) {
-          const distance = Math.abs(targetOffset - snapPoint.offset);
-          if (distance < closestDistance) {
-            closestDistance = distance;
-            targetSnapPoint = snapPoint;
-          }
-        }
+        const orderedOffsets = orderedSnapPoints.map(point => point.offset);
+        const currentIndex = closestSnapPointIndex(orderedOffsets, currentOffset);
+        let targetSnapPoint = orderedSnapPoints[closestSnapPointIndex(orderedOffsets, targetOffset)];
         const velocityDirection = Math.sign(resolvedDirectionalVelocity);
         const shouldAdvance = dragDirection !== 0 && velocityDirection !== 0 && velocityDirection === dragDirection && Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD;
         let effectiveTargetOffset = targetOffset;
@@ -2996,34 +2781,24 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
             return closeFromSnapPoints();
           }
         }
-        const closeOffset = popupHeight;
-        const closeDistance = Math.abs(effectiveTargetOffset - closeOffset);
+        const closeDistance = Math.abs(effectiveTargetOffset - popupHeight);
         const snapDistance = Math.abs(effectiveTargetOffset - targetSnapPoint.offset);
         if (closeDistance < snapDistance) {
           return closeFromSnapPoints();
         }
-        setActiveSnapPoint?.(targetSnapPoint.value, snapPointEventDetails);
+        setActiveSnapPoint(targetSnapPoint.value, snapPointEventDetails);
         clearSwipeRelease();
         return false;
       }
       if (resolvedDirectionalVelocity >= FAST_SWIPE_VELOCITY && dragDelta > 0) {
         return closeFromSnapPoints();
       }
-      let closestSnapPoint = resolvedSnapPoints[0];
-      let closestDistance = Math.abs(targetOffset - closestSnapPoint.offset);
-      for (const snapPoint of resolvedSnapPoints) {
-        const distance = Math.abs(targetOffset - snapPoint.offset);
-        if (distance < closestDistance) {
-          closestDistance = distance;
-          closestSnapPoint = snapPoint;
-        }
-      }
-      const closeOffset = popupHeight;
-      const closeDistance = Math.abs(targetOffset - closeOffset);
-      if (closeDistance < closestDistance) {
+      const closestSnapPoint = resolvedSnapPoints[closestSnapPointIndex(resolvedSnapPoints.map(point => point.offset), targetOffset)];
+      const closeDistance = Math.abs(targetOffset - popupHeight);
+      if (closeDistance < Math.abs(targetOffset - closestSnapPoint.offset)) {
         return closeFromSnapPoints();
       }
-      setActiveSnapPoint?.(closestSnapPoint.value, snapPointEventDetails);
+      setActiveSnapPoint(closestSnapPoint.value, snapPointEventDetails);
       clearSwipeRelease();
       return false;
     },
@@ -3042,7 +2817,7 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
       if (dismissEventDetails.isCanceled) {
         const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
         if (pendingSnapPoint !== undefined) {
-          setActiveSnapPoint?.(pendingSnapPoint, createChangeEventDetails(swipe, event));
+          setActiveSnapPoint(pendingSnapPoint, createChangeEventDetails(swipe, event));
         }
         pendingSwipeCloseSnapPointRef.current = undefined;
         resetSwipeRef.current?.();
@@ -3064,7 +2839,7 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
             // Parent rejected: revert animation and restore snap point.
             const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
             if (pendingSnapPoint !== undefined) {
-              setActiveSnapPoint?.(pendingSnapPoint, createChangeEventDetails(swipe, savedEvent));
+              setActiveSnapPoint(pendingSnapPoint, createChangeEventDetails(swipe, savedEvent));
             }
             pendingSwipeCloseSnapPointRef.current = undefined;
             clearSwipeRelease();
@@ -3094,42 +2869,18 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     }
     const resolvedRootElement = rootElement;
     const doc = ownerDocument(resolvedRootElement);
-    const win = getWindow(doc);
-    function handleNativeTouchMove(event) {
-      // The virtual keyboard provider observes the move to tell a tap apart from a drag.
-      // It must run even when the swipe gesture below claims the event with
-      // `stopPropagation()`, which would otherwise prevent React's delegated handlers
-      // (and the provider) from ever seeing the move.
-      virtualKeyboard?.onTouchMove(event);
-      if (ignoreTouchSwipeRef.current) {
-        return;
-      }
-      const touchState = touchScrollStateRef.current;
-      const touch = event.touches[0];
-      if (!touch || !touchState) {
-        return;
-      }
+    function processTouchMove(event, touchState, touch) {
       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;
-        updateTouchScrollPosition(touchState, touch);
-        return;
-      }
-
       // Avoid blocking pinch zoom or text selection adjustments on iOS Safari.
       if (event.touches.length === 2) {
-        updateTouchScrollPosition(touchState, touch);
         return;
       }
       const allowTouchMove = shouldIgnoreSwipeForTextSelection(doc, resolvedRootElement);
       if (allowTouchMove || !open || !mounted || nestedDrawerOpen) {
-        updateTouchScrollPosition(touchState, touch);
         return;
       }
-      if (preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis)) {
-        updateTouchScrollPosition(touchState, touch);
+      if (shouldYieldTouchMove(touchState, event, touch, isVerticalScrollAxis)) {
         return;
       }
       const scrollTarget = touchState.scrollTarget;
@@ -3141,27 +2892,21 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
         // move through React re-rasterizes the popup content on every frame.
         event.stopPropagation();
         moveSwipeNative(event, resolvedRootElement);
-        updateTouchScrollPosition(touchState, touch);
         return;
       }
-      const hasScrollableContent = hasScrollableContentOnAxis(scrollTarget, scrollAxis);
-      if (!hasScrollableContent) {
+      if (!hasScrollableContentOnAxis(scrollTarget, scrollAxis)) {
         // If the scroll container doesn't overflow on the drawer axis, prevent the window from
         // scrolling instead.
         if (event.cancelable) {
           event.preventDefault();
         }
         event.stopPropagation();
-        updateTouchScrollPosition(touchState, touch);
         return;
       }
-      const delta = drawerAxisDelta;
-      if (delta !== 0) {
-        const canSwipeFromScrollEdge = canSwipeFromScrollEdgeOnMove(scrollTarget, scrollAxis, swipeDirection, delta);
+      if (drawerAxisDelta !== 0) {
+        const canSwipeFromScrollEdge = canSwipeFromScrollEdgeOnMove(scrollTarget, scrollAxis, swipeDirection, drawerAxisDelta);
         if (!touchState.allowSwipe) {
-          if (!event.cancelable) {
-            touchState.allowSwipe = false;
-          } else if (canSwipeFromScrollEdge) {
+          if (event.cancelable && canSwipeFromScrollEdge) {
             touchState.allowSwipe = true;
             event.preventDefault();
           } else {
@@ -3175,6 +2920,22 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
         event.stopPropagation();
         moveSwipeNative(event, resolvedRootElement);
       }
+    }
+    function handleNativeTouchMove(event) {
+      // The virtual keyboard provider observes the move to tell a tap apart from a drag.
+      // It must run even when the swipe gesture below claims the event with
+      // `stopPropagation()`, which would otherwise prevent React's delegated handlers
+      // (and the provider) from ever seeing the move.
+      virtualKeyboard?.onTouchMove(event);
+      if (ignoreTouchSwipeRef.current) {
+        return;
+      }
+      const touchState = touchScrollStateRef.current;
+      const touch = event.touches[0];
+      if (!touch || !touchState) {
+        return;
+      }
+      processTouchMove(event, touchState, touch);
       updateTouchScrollPosition(touchState, touch);
     }
     return addEventListener(doc, 'touchmove', handleNativeTouchMove, {
@@ -3182,18 +2943,13 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
       capture: true
     });
   }, [mounted, nestedDrawerOpen, open, popupElementState, isVerticalScrollAxis, scrollAxis, swipeDirection, moveSwipeNative, viewportElement, virtualKeyboard]);
-  React.useEffect(() => {
+  useIsoLayoutEffect(() => {
     if (!snapPointRange || swipe$1.swiping) {
       return;
     }
-    const resolvedProgress = !open || nested ? 0 : snapPointProgress ?? 0;
-    applySwipeProgress({
-      resolvedProgress,
-      shouldTrackProgress: true,
-      notifyParent: false
-    });
+    applySwipeProgress(!open || nested ? 0 : snapPointProgress ?? 0, true, false);
   }, [applySwipeProgress, frontmostHeight, nested, notifyParentSwipeProgressChange, open, snapPointProgress, snapPointRange, swipe$1.swiping, store, visualStateStore]);
-  React.useEffect(() => {
+  useIsoLayoutEffect(() => {
     if (!notifyParentSwipeProgressChange) {
       return undefined;
     }
@@ -3204,13 +2960,19 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
       notifyParentSwipeProgressChange(0);
     };
   }, [notifyParentSwipeProgressChange, open]);
-  React.useEffect(() => {
+  useIsoLayoutEffect(() => {
     if (open) {
-      resetSwipe();
+      // Skip `resetSwipe` while `Drawer.SwipeArea` is driving the open: it zeroes the popup's
+      // `--swipe-movement-*` (via `syncDragStyles(false)`), flashing it fully open for a frame.
+      // `clearSwipeRelease` doesn't touch those vars, so always run it to clear any leftover
+      // release state from a prior dismiss (e.g. when the popup is kept mounted).
+      if (!swipeAreaActiveRef.current) {
+        resetSwipe();
+      }
       clearSwipeRelease();
     }
-  }, [clearSwipeRelease, open, resetSwipe]);
-  React.useEffect(() => {
+  }, [clearSwipeRelease, open, resetSwipe, swipeAreaActiveRef]);
+  useIsoLayoutEffect(() => {
     const backdropElement = backdropRef.current;
     return () => {
       visualStateStore?.set({
@@ -3235,12 +2997,19 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     swipeStrength: swipeRelease ?? null,
     setSwipeDismissed
   }), [setSwipeDismissed, swipe$1.getDragStyles, swipe$1.swiping, swipeRelease]);
-  function resetTouchTrackingState() {
-    ignoreTouchSwipeRef.current = false;
+  function resetTouchSwipeState(ignoreSwipe) {
+    ignoreTouchSwipeRef.current = ignoreSwipe;
     touchScrollStateRef.current = null;
+  }
+  function resetTouchTrackingState() {
+    resetTouchSwipeState(false);
     lastPointerTypeRef.current = '';
     ignoreNextTouchStartFromPenRef.current = false;
   }
+  function handlePointerEnd(event) {
+    lastPointerTypeRef.current = '';
+    return event.pointerType !== 'touch';
+  }
   return /*#__PURE__*/jsx(DialogViewport, {
     ref: forwardedRef,
     className: className,
@@ -3253,8 +3022,7 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
         if (!open || !mounted || nestedDrawerOpen) {
           return;
         }
-        const doc = ownerDocument(event.currentTarget);
-        const elementAtPoint = getElementAtPoint(doc, event.clientX, event.clientY);
+        const elementAtPoint = getElementAtPoint(event.currentTarget.getRootNode(), event.clientX, event.clientY);
         if (isSwipeIgnoredTarget(elementAtPoint) || isDrawerContentTarget(elementAtPoint)) {
           return;
         }
@@ -3270,34 +3038,24 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
         swipePointerProps.onPointerMove?.(event);
       },
       onPointerUp(event) {
-        if (lastPointerTypeRef.current === event.pointerType) {
-          lastPointerTypeRef.current = '';
-        }
-        if (event.pointerType === 'touch') {
-          return;
+        if (handlePointerEnd(event)) {
+          swipePointerProps.onPointerUp?.(event);
         }
-        swipePointerProps.onPointerUp?.(event);
       },
       onPointerCancel(event) {
-        if (lastPointerTypeRef.current === event.pointerType) {
-          lastPointerTypeRef.current = '';
-        }
-        if (event.pointerType === 'touch') {
-          return;
+        if (handlePointerEnd(event)) {
+          swipePointerProps.onPointerCancel?.(event);
         }
-        swipePointerProps.onPointerCancel?.(event);
       },
       onTouchStart(event) {
         const startedFromPenPointerDown = lastPointerTypeRef.current === 'pen' && ignoreNextTouchStartFromPenRef.current;
         if (startedFromPenPointerDown) {
           ignoreNextTouchStartFromPenRef.current = false;
-          ignoreTouchSwipeRef.current = false;
-          touchScrollStateRef.current = null;
+          resetTouchSwipeState(false);
           return;
         }
         if (!open || !mounted || nestedDrawerOpen) {
-          ignoreTouchSwipeRef.current = false;
-          touchScrollStateRef.current = null;
+          resetTouchSwipeState(false);
           return;
         }
         const touch = event.touches[0];
@@ -3305,32 +3063,25 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
           return;
         }
         if (isReactTouchEventOnRangeInput(event)) {
-          ignoreTouchSwipeRef.current = false;
-          touchScrollStateRef.current = null;
+          resetTouchSwipeState(false);
           return;
         }
-        const doc = ownerDocument(event.currentTarget);
-        const elementAtPoint = getElementAtPoint(doc, touch.clientX, touch.clientY);
-        const rootElement = viewportElement ?? popupElementState;
+        const rootElement = event.currentTarget;
+        const elementAtPoint = getElementAtPoint(rootElement.getRootNode(), touch.clientX, touch.clientY);
         const eventTarget = getTarget(event.nativeEvent);
-        const target = isElement(eventTarget) ? eventTarget : null;
-        if (rootElement && target && !contains(rootElement, target)) {
-          ignoreTouchSwipeRef.current = true;
-          touchScrollStateRef.current = null;
+        const target = isElement(eventTarget) ? eventTarget : rootElement;
+        if (!contains(rootElement, target)) {
+          resetTouchSwipeState(true);
           return;
         }
         virtualKeyboard?.onTouchStart(event);
-        ignoreTouchSwipeRef.current = isSwipeIgnoredTarget(elementAtPoint);
-        if (ignoreTouchSwipeRef.current) {
-          touchScrollStateRef.current = null;
+        if (isSwipeIgnoredTarget(elementAtPoint)) {
+          resetTouchSwipeState(true);
           return;
         }
-        let scrollTarget = null;
-        let hasCrossAxisScrollableContent = false;
-        if (rootElement && target) {
-          scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
-          hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
-        }
+        ignoreTouchSwipeRef.current = false;
+        const scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
+        const hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
         let allowSwipe = null;
         if (scrollTarget) {
           const canSwipeFromEdge = isAtSwipeStartEdge(scrollTarget, scrollAxis, swipeDirection);
@@ -3344,7 +3095,8 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
           scrollTarget,
           hasCrossAxisScrollableContent,
           allowSwipe,
-          preserveNativeCrossAxisScroll: false
+          preserveNativeCrossAxisScroll: false,
+          drawerAxisAttributed: false
         };
         swipeTouchProps.onTouchStart?.(event);
       },
@@ -3369,24 +3121,8 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
   });
 });
 if (process.env.NODE_ENV !== "production") DrawerViewport.displayName = "DrawerViewport";
-function setSwipeDismissedElements(popupElement, backdropElement, dismissed) {
-  if (dismissed) {
-    popupElement?.setAttribute(DrawerPopupDataAttributes.swipeDismiss, '');
-    backdropElement?.setAttribute(DrawerPopupDataAttributes.swipeDismiss, '');
-    return;
-  }
-  popupElement?.removeAttribute(DrawerPopupDataAttributes.swipeDismiss);
-  backdropElement?.removeAttribute(DrawerPopupDataAttributes.swipeDismiss);
-}
 function setBackdropSwipingAttribute(backdropElement, swiping) {
-  if (!backdropElement) {
-    return;
-  }
-  if (swiping) {
-    backdropElement.setAttribute(DrawerPopupDataAttributes.swiping, '');
-    return;
-  }
-  backdropElement.removeAttribute(DrawerPopupDataAttributes.swiping);
+  backdropElement?.toggleAttribute(DrawerPopupDataAttributes.swiping, swiping);
 }
 function isSwipeIgnoredTarget(target) {
   return Boolean(target?.closest(BASE_UI_SWIPE_IGNORE_SELECTOR));
@@ -3394,17 +3130,16 @@ function isSwipeIgnoredTarget(target) {
 function isDrawerContentTarget(target) {
   return Boolean(target?.closest(DRAWER_CONTENT_SELECTOR));
 }
+function getBaseSwipeSize(element, direction) {
+  return direction === 'left' || direction === 'right' ? element.offsetWidth : element.offsetHeight;
+}
 function getBaseSwipeThreshold(element, direction) {
-  const size = direction === 'left' || direction === 'right' ? element.offsetWidth : element.offsetHeight;
-  return Math.max(size * 0.5, MIN_SWIPE_THRESHOLD);
+  return Math.max(getBaseSwipeSize(element, direction) * 0.5, MIN_SWIPE_THRESHOLD);
 }
 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) {
@@ -3414,8 +3149,7 @@ function hasExpandedSelectionWithinTarget(selection, target) {
 }
 function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
   const activeEl = activeElement(doc);
-  const activeElementWithinRoot = Boolean(activeEl && contains(rootElement, activeEl));
-  if (activeElementWithinRoot && isTextSelectionControl(activeEl)) {
+  if (activeEl && contains(rootElement, activeEl) && isTextSelectionControl(activeEl)) {
     const {
       selectionStart,
       selectionEnd
@@ -3431,11 +3165,7 @@ function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
   return hasExpandedSelectionWithinTarget(selection, rootElement);
 }
 function isEventOnRangeInput(event, win) {
-  const composedPath = event.composedPath();
-  if (composedPath) {
-    return composedPath.some(pathTarget => isRangeInput(pathTarget, win));
-  }
-  return isRangeInput(getTarget(event), win);
+  return event.composedPath().some(pathTarget => isRangeInput(pathTarget, win));
 }
 function isReactTouchEventOnRangeInput(event) {
   return isEventOnRangeInput(event.nativeEvent, getWindow(event.currentTarget));
@@ -3444,25 +3174,51 @@ function updateTouchScrollPosition(touchState, touch) {
   touchState.lastX = touch.clientX;
   touchState.lastY = touch.clientY;
 }
-function preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis) {
+
+/**
+ * Arbitrates a touchmove between the drawer swipe and a native cross-axis scroll.
+ * Returns `true` when the move must be left alone — either because the cross axis already won the
+ * gesture, or because neither axis has passed the slop yet and the gesture cannot be attributed.
+ */
+function shouldYieldTouchMove(touchState, event, touch, isVerticalScrollAxis) {
   if (touchState.preserveNativeCrossAxisScroll) {
     return true;
   }
-  if (touchState.allowSwipe === true || !touchState.hasCrossAxisScrollableContent) {
+
+  // Attribution happens once per gesture. Re-arbitrating after the drawer axis has won would let
+  // the pre-attribution branches below fire mid-drag (the slop is measured from the touch origin,
+  // which is never re-baselined), freezing the popup and dropping `preventDefault()`.
+  if (touchState.drawerAxisAttributed || touchState.allowSwipe === true || !touchState.hasCrossAxisScrollableContent) {
     return false;
   }
+
+  // A non-cancelable touchmove means the browser has already committed the gesture to a native
+  // scroll; claiming it for the swipe would drag the popup alongside the scrolling content.
+  if (!event.cancelable) {
+    touchState.preserveNativeCrossAxisScroll = true;
+    return true;
+  }
   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) {
+  if (absCrossAxisGestureDelta >= AXIS_LOCK_SLOP && absCrossAxisGestureDelta > absDrawerAxisGestureDelta + AXIS_LOCK_BIAS) {
+    touchState.preserveNativeCrossAxisScroll = true;
+    return true;
+  }
+  if (absDrawerAxisGestureDelta >= AXIS_LOCK_SLOP) {
+    touchState.drawerAxisAttributed = true;
     return false;
   }
-  touchState.preserveNativeCrossAxisScroll = true;
+
+  // Neither axis has traveled past the slop yet, so the gesture cannot be attributed. Leave the
+  // event alone: on iOS, `preventDefault()` on the first cancelable touchmove cancels native
+  // scrolling for the entire gesture, which would lock a cross-axis scroll that only passes the
+  // slop on a later move.
   return true;
 }
 function hasScrollableContentOnAxis(scrollTarget, axis) {
-  return axis === 'vertical' ? scrollTarget.scrollHeight > scrollTarget.clientHeight : scrollTarget.scrollWidth > scrollTarget.clientWidth;
+  return getScrollMetrics(scrollTarget, axis).max > 0;
 }
 function getScrollMetrics(scrollTarget, axis) {
   if (axis === 'vertical') {
@@ -3479,48 +3235,23 @@ function getScrollMetrics(scrollTarget, axis) {
   };
 }
 function isAtSwipeStartEdge(scrollTarget, axis, direction) {
+  const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
   const {
     offset,
     max
   } = getScrollMetrics(scrollTarget, axis);
-  const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
-  if (dismissFromStartEdge === null) {
-    return false;
-  }
   return dismissFromStartEdge ? offset <= 0 : offset >= max;
 }
 function canSwipeFromScrollEdgeOnMove(scrollTarget, axis, direction, delta) {
-  const {
-    offset,
-    max
-  } = getScrollMetrics(scrollTarget, axis);
   const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
-  if (dismissFromStartEdge === null) {
-    return false;
-  }
   const movingTowardDismiss = dismissFromStartEdge ? delta > 0 : delta < 0;
   if (!movingTowardDismiss) {
     return false;
   }
-  return dismissFromStartEdge ? offset <= 0 : offset >= max;
+  return isAtSwipeStartEdge(scrollTarget, axis, direction);
 }
 function shouldDismissFromStartEdge(direction, axis) {
-  if (axis === 'vertical') {
-    if (direction === 'down') {
-      return true;
-    }
-    if (direction === 'up') {
-      return false;
-    }
-    return null;
-  }
-  if (direction === 'right') {
-    return true;
-  }
-  if (direction === 'left') {
-    return false;
-  }
-  return null;
+  return axis === 'vertical' ? direction === 'down' : direction === 'right';
 }
 
 const ScrollAreaRootContext = /*#__PURE__*/React.createContext(undefined);
@@ -3533,20 +3264,6 @@ function useScrollAreaRootContext() {
   return context;
 }
 
-let ScrollAreaRootCssVars = /*#__PURE__*/function (ScrollAreaRootCssVars) {
-  /**
-   * The scroll area's corner height.
-   * @type {number}
-   */
-  ScrollAreaRootCssVars["scrollAreaCornerHeight"] = "--scroll-area-corner-height";
-  /**
-   * The scroll area's corner width.
-   * @type {number}
-   */
-  ScrollAreaRootCssVars["scrollAreaCornerWidth"] = "--scroll-area-corner-width";
-  return ScrollAreaRootCssVars;
-}({});
-
 const SCROLL_TIMEOUT = 500;
 const MIN_THUMB_SIZE = 16;
 
@@ -3555,108 +3272,28 @@ function getOffset(element, prop, axis) {
     return 0;
   }
   const styles = getComputedStyle(element);
-  const propAxis = axis === 'x' ? 'Inline' : 'Block';
+  const key = `${prop}${axis === 'x' ? 'Inline' : 'Block'}`;
+  const start = parseFloat(styles[`${key}Start`]);
 
   // Safari misreports `marginInlineEnd` in RTL.
   // We have to assume the start/end values are symmetrical, which is likely.
   if (axis === 'x' && prop === 'margin') {
-    return parseFloat(styles[`${prop}InlineStart`]) * 2;
+    return start * 2;
   }
-  return parseFloat(styles[`${prop}${propAxis}Start`]) + parseFloat(styles[`${prop}${propAxis}End`]);
+  return start + parseFloat(styles[`${key}End`]);
 }
 
-let ScrollAreaScrollbarDataAttributes = /*#__PURE__*/function (ScrollAreaScrollbarDataAttributes) {
-  /**
-   * Indicates the orientation of the scrollbar.
-   * @type {'horizontal' | 'vertical'}
-   */
-  ScrollAreaScrollbarDataAttributes["orientation"] = "data-orientation";
-  /**
-   * Present when the pointer is over the scroll area.
-   */
-  ScrollAreaScrollbarDataAttributes["hovering"] = "data-hovering";
-  /**
-   * Present when the user scrolls inside the scroll area.
-   */
-  ScrollAreaScrollbarDataAttributes["scrolling"] = "data-scrolling";
-  /**
-   * Present when the scroll area content is wider than the viewport.
-   */
-  ScrollAreaScrollbarDataAttributes["hasOverflowX"] = "data-has-overflow-x";
-  /**
-   * Present when the scroll area content is taller than the viewport.
-   */
-  ScrollAreaScrollbarDataAttributes["hasOverflowY"] = "data-has-overflow-y";
-  /**
-   * Present when there is overflow on the horizontal start side.
-   */
-  ScrollAreaScrollbarDataAttributes["overflowXStart"] = "data-overflow-x-start";
-  /**
-   * Present when there is overflow on the horizontal end side.
-   */
-  ScrollAreaScrollbarDataAttributes["overflowXEnd"] = "data-overflow-x-end";
-  /**
-   * Present when there is overflow on the vertical start side.
-   */
-  ScrollAreaScrollbarDataAttributes["overflowYStart"] = "data-overflow-y-start";
-  /**
-   * Present when there is overflow on the vertical end side.
-   */
-  ScrollAreaScrollbarDataAttributes["overflowYEnd"] = "data-overflow-y-end";
-  return ScrollAreaScrollbarDataAttributes;
-}({});
-
-let ScrollAreaRootDataAttributes = /*#__PURE__*/function (ScrollAreaRootDataAttributes) {
-  /**
-   * Present when the user scrolls inside the scroll area.
-   */
-  ScrollAreaRootDataAttributes["scrolling"] = "data-scrolling";
-  /**
-   * Present when the scroll area content is wider than the viewport.
-   */
-  ScrollAreaRootDataAttributes["hasOverflowX"] = "data-has-overflow-x";
-  /**
-   * Present when the scroll area content is taller than the viewport.
-   */
-  ScrollAreaRootDataAttributes["hasOverflowY"] = "data-has-overflow-y";
-  /**
-   * Present when there is overflow on the horizontal start side.
-   */
-  ScrollAreaRootDataAttributes["overflowXStart"] = "data-overflow-x-start";
-  /**
-   * Present when there is overflow on the horizontal end side.
-   */
-  ScrollAreaRootDataAttributes["overflowXEnd"] = "data-overflow-x-end";
-  /**
-   * Present when there is overflow on the vertical start side.
-   */
-  ScrollAreaRootDataAttributes["overflowYStart"] = "data-overflow-y-start";
-  /**
-   * Present when there is overflow on the vertical end side.
-   */
-  ScrollAreaRootDataAttributes["overflowYEnd"] = "data-overflow-y-end";
-  return ScrollAreaRootDataAttributes;
-}({});
-
+// Data-attribute strings inlined so `ScrollAreaRootDataAttributes` tree-shakes out.
+const attr = name => value => value ? {
+  [name]: ''
+} : null;
 const scrollAreaStateAttributesMapping = {
-  hasOverflowX: value => value ? {
-    [ScrollAreaRootDataAttributes.hasOverflowX]: ''
-  } : null,
-  hasOverflowY: value => value ? {
-    [ScrollAreaRootDataAttributes.hasOverflowY]: ''
-  } : null,
-  overflowXStart: value => value ? {
-    [ScrollAreaRootDataAttributes.overflowXStart]: ''
-  } : null,
-  overflowXEnd: value => value ? {
-    [ScrollAreaRootDataAttributes.overflowXEnd]: ''
-  } : null,
-  overflowYStart: value => value ? {
-    [ScrollAreaRootDataAttributes.overflowYStart]: ''
-  } : null,
-  overflowYEnd: value => value ? {
-    [ScrollAreaRootDataAttributes.overflowYEnd]: ''
-  } : null,
+  hasOverflowX: attr('data-has-overflow-x'),
+  hasOverflowY: attr('data-has-overflow-y'),
+  overflowXStart: attr('data-overflow-x-start'),
+  overflowXEnd: attr('data-overflow-x-end'),
+  overflowYStart: attr('data-overflow-y-start'),
+  overflowYEnd: attr('data-overflow-y-end'),
   cornerHidden: () => null
 };
 
@@ -3722,99 +3359,145 @@ const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaRoot(com
   const thumbYRef = React.useRef(null);
   const thumbXRef = React.useRef(null);
   const cornerRef = React.useRef(null);
-  const thumbDraggingRef = React.useRef(false);
+  const activePointerIdRef = React.useRef(null);
   const startYRef = React.useRef(0);
   const startXRef = React.useRef(0);
   const startScrollTopRef = React.useRef(0);
   const startScrollLeftRef = React.useRef(0);
   const currentOrientationRef = React.useRef('vertical');
   const scrollPositionRef = React.useRef(DEFAULT_COORDS);
+  const savedSnapTypeRef = React.useRef(null);
+  function startScrolling(vertical) {
+    const setScrolling = vertical ? setScrollingY : setScrollingX;
+    const timeout = vertical ? scrollYTimeout : scrollXTimeout;
+    setScrolling(true);
+    timeout.start(SCROLL_TIMEOUT, () => {
+      setScrolling(false);
+    });
+  }
   const handleScroll = useStableCallback(scrollPosition => {
     const offsetX = scrollPosition.x - scrollPositionRef.current.x;
     const offsetY = scrollPosition.y - scrollPositionRef.current.y;
     scrollPositionRef.current = scrollPosition;
     if (offsetY !== 0) {
-      setScrollingY(true);
-      scrollYTimeout.start(SCROLL_TIMEOUT, () => {
-        setScrollingY(false);
-      });
+      startScrolling(true);
     }
     if (offsetX !== 0) {
-      setScrollingX(true);
-      scrollXTimeout.start(SCROLL_TIMEOUT, () => {
-        setScrollingX(false);
-      });
+      startScrolling(false);
+    }
+  });
+
+  // CSS scroll snap forces every programmatic scroll to land on a snap
+  // point, making thumb dragging jump between snap points. Native
+  // scrollbars suppress snapping while dragging, so disable it until the
+  // pointer is released; restoring the value re-snaps the viewport. The
+  // save is guarded so a second pointer during an active drag can't
+  // clobber the saved value with `none`.
+  const disableViewportSnap = useStableCallback(() => {
+    const viewportEl = viewportRef.current;
+    if (viewportEl && savedSnapTypeRef.current === null) {
+      savedSnapTypeRef.current = viewportEl.style.scrollSnapType;
+      viewportEl.style.scrollSnapType = 'none';
     }
   });
   const handlePointerDown = useStableCallback(event => {
     if (event.button !== 0) {
       return;
     }
-    thumbDraggingRef.current = true;
+    if (activePointerIdRef.current !== null) {
+      const activeThumb = currentOrientationRef.current === 'vertical' ? thumbYRef.current : thumbXRef.current;
+      // A live drag holds capture for the active pointer — ignore other pointers.
+      // No capture means the release went missing entirely (silent capture drop
+      // with an id that never reappears, e.g. a lost touch contact), so let the
+      // new pointer take over the latch instead of leaving dragging dead.
+      if (activeThumb?.hasPointerCapture(activePointerIdRef.current)) {
+        return;
+      }
+    }
+    activePointerIdRef.current = event.pointerId;
     startYRef.current = event.clientY;
     startXRef.current = event.clientX;
-    currentOrientationRef.current = event.currentTarget.getAttribute(ScrollAreaScrollbarDataAttributes.orientation);
-    if (viewportRef.current) {
-      startScrollTopRef.current = viewportRef.current.scrollTop;
-      startScrollLeftRef.current = viewportRef.current.scrollLeft;
-    }
-    if (thumbYRef.current && currentOrientationRef.current === 'vertical') {
-      thumbYRef.current.setPointerCapture(event.pointerId);
-    }
-    if (thumbXRef.current && currentOrientationRef.current === 'horizontal') {
-      thumbXRef.current.setPointerCapture(event.pointerId);
+    // Literal instead of `ScrollAreaScrollbarDataAttributes.orientation`: referencing an
+    // enum member retains its whole object in the bundle, so the strings are inlined and
+    // the enums kept for docs only.
+    currentOrientationRef.current = event.currentTarget.getAttribute('data-orientation');
+    const viewportEl = viewportRef.current;
+    if (viewportEl) {
+      startScrollTopRef.current = viewportEl.scrollTop;
+      startScrollLeftRef.current = viewportEl.scrollLeft;
+      disableViewportSnap();
     }
+    const thumb = currentOrientationRef.current === 'vertical' ? thumbYRef.current : thumbXRef.current;
+    thumb?.setPointerCapture(event.pointerId);
   });
-  const handlePointerMove = useStableCallback(event => {
-    if (!thumbDraggingRef.current) {
+  const handlePointerUp = useStableCallback(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
       return;
     }
-    const deltaY = event.clientY - startYRef.current;
-    const deltaX = event.clientX - startXRef.current;
-    if (viewportRef.current) {
-      const scrollableContentHeight = viewportRef.current.scrollHeight;
-      const viewportHeight = viewportRef.current.clientHeight;
-      const scrollableContentWidth = viewportRef.current.scrollWidth;
-      const viewportWidth = viewportRef.current.clientWidth;
-      if (thumbYRef.current && scrollbarYRef.current && currentOrientationRef.current === 'vertical') {
-        const scrollbarYOffset = getOffset(scrollbarYRef.current, 'padding', 'y');
-        const thumbYOffset = getOffset(thumbYRef.current, 'margin', 'y');
-        const thumbHeight = thumbYRef.current.offsetHeight;
-        const maxThumbOffsetY = scrollbarYRef.current.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
-        const scrollRatioY = deltaY / maxThumbOffsetY;
-        viewportRef.current.scrollTop = startScrollTopRef.current + scrollRatioY * (scrollableContentHeight - viewportHeight);
-        event.preventDefault();
-        setScrollingY(true);
-        scrollYTimeout.start(SCROLL_TIMEOUT, () => {
-          setScrollingY(false);
-        });
-      }
-      if (thumbXRef.current && scrollbarXRef.current && currentOrientationRef.current === 'horizontal') {
-        const scrollbarXOffset = getOffset(scrollbarXRef.current, 'padding', 'x');
-        const thumbXOffset = getOffset(thumbXRef.current, 'margin', 'x');
-        const thumbWidth = thumbXRef.current.offsetWidth;
-        const maxThumbOffsetX = scrollbarXRef.current.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
-        const scrollRatioX = deltaX / maxThumbOffsetX;
-        viewportRef.current.scrollLeft = startScrollLeftRef.current + scrollRatioX * (scrollableContentWidth - viewportWidth);
-        event.preventDefault();
-        setScrollingX(true);
-        scrollXTimeout.start(SCROLL_TIMEOUT, () => {
-          setScrollingX(false);
-        });
+    activePointerIdRef.current = null;
+    // Clear the drag's scrolling state immediately rather than waiting for the
+    // `SCROLL_TIMEOUT` timer armed by the last drag move, so every release path
+    // (real, `pointercancel`, or the missed-release fallback) behaves the same.
+    (currentOrientationRef.current === 'vertical' ? setScrollingY : setScrollingX)(false);
+    if (savedSnapTypeRef.current !== null) {
+      if (viewportRef.current) {
+        viewportRef.current.style.scrollSnapType = savedSnapTypeRef.current;
       }
+      savedSnapTypeRef.current = null;
     }
-  });
-  const handlePointerUp = useStableCallback(event => {
-    thumbDraggingRef.current = false;
-
+    const thumb = currentOrientationRef.current === 'vertical' ? thumbYRef.current : thumbXRef.current;
     // `pointercancel` releases capture implicitly, so guard against releasing a
     // capture we no longer hold (which would throw).
-    if (thumbYRef.current && currentOrientationRef.current === 'vertical' && thumbYRef.current.hasPointerCapture(event.pointerId)) {
-      thumbYRef.current.releasePointerCapture(event.pointerId);
+    if (thumb?.hasPointerCapture(event.pointerId)) {
+      thumb.releasePointerCapture(event.pointerId);
     }
-    if (thumbXRef.current && currentOrientationRef.current === 'horizontal' && thumbXRef.current.hasPointerCapture(event.pointerId)) {
-      thumbXRef.current.releasePointerCapture(event.pointerId);
+  });
+  const handlePointerMove = useStableCallback(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
+      return;
+    }
+
+    // The release can go missing entirely (e.g. the browser drops pointer
+    // capture while the scrollbar is hidden mid-drag), leaving the drag
+    // latched so a buttonless hover over the thumb scrolls the viewport.
+    // Treat a move without the primary button held (`buttons` bit 1 unset)
+    // as the missed release.
+    if (event.buttons % 2 === 0) {
+      handlePointerUp(event);
+      return;
     }
+    const viewportEl = viewportRef.current;
+    if (!viewportEl) {
+      return;
+    }
+    const vertical = currentOrientationRef.current === 'vertical';
+    const thumbEl = vertical ? thumbYRef.current : thumbXRef.current;
+    const scrollbarEl = vertical ? scrollbarYRef.current : scrollbarXRef.current;
+    if (!thumbEl || !scrollbarEl) {
+      return;
+    }
+    const axis = vertical ? 'y' : 'x';
+    const scrollbarOffset = getOffset(scrollbarEl, 'padding', axis);
+    const thumbOffset = getOffset(thumbEl, 'margin', axis);
+    const thumbSizePx = vertical ? thumbEl.offsetHeight : thumbEl.offsetWidth;
+    const trackSize = vertical ? scrollbarEl.offsetHeight : scrollbarEl.offsetWidth;
+    const maxThumbOffset = trackSize - thumbSizePx - scrollbarOffset - thumbOffset;
+    // A short or heavily padded track can drive `maxThumbOffset` to zero or
+    // negative once the thumb hits its `MIN_THUMB_SIZE` floor. Dividing by it
+    // would yield a non-finite (`Infinity`/`NaN`) or inverted scroll position.
+    const delta = vertical ? event.clientY - startYRef.current : event.clientX - startXRef.current;
+    const scrollRatio = maxThumbOffset <= 0 ? 0 : delta / maxThumbOffset;
+    const scrollableSize = vertical ? viewportEl.scrollHeight : viewportEl.scrollWidth;
+    const viewportSize = vertical ? viewportEl.clientHeight : viewportEl.clientWidth;
+    const startScroll = vertical ? startScrollTopRef.current : startScrollLeftRef.current;
+    const nextScroll = startScroll + scrollRatio * (scrollableSize - viewportSize);
+    if (vertical) {
+      viewportEl.scrollTop = nextScroll;
+    } else {
+      viewportEl.scrollLeft = nextScroll;
+    }
+    event.preventDefault();
+    startScrolling(vertical);
   });
   function handleTouchModalityChange(event) {
     setTouchModality(event.pointerType === 'touch');
@@ -3846,8 +3529,8 @@ const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaRoot(com
     },
     style: {
       position: 'relative',
-      [ScrollAreaRootCssVars.scrollAreaCornerHeight]: `${cornerSize.height}px`,
-      [ScrollAreaRootCssVars.scrollAreaCornerWidth]: `${cornerSize.width}px`
+      ['--scroll-area-corner-height']: `${cornerSize.height}px`,
+      ['--scroll-area-corner-width']: `${cornerSize.width}px`
     }
   };
   const element = useRenderElement('div', componentProps, {
@@ -3861,6 +3544,7 @@ const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaRoot(com
     handlePointerMove,
     handlePointerUp,
     handleScroll,
+    disableViewportSnap,
     cornerSize,
     setCornerSize,
     thumbSize,
@@ -3870,13 +3554,10 @@ const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaRoot(com
     touchModality,
     cornerRef,
     scrollingX,
-    setScrollingX,
     scrollingY,
-    setScrollingY,
     hovering,
     setHovering,
     viewportRef,
-    rootRef,
     scrollbarYRef,
     scrollbarXRef,
     thumbYRef,
@@ -3893,7 +3574,7 @@ const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaRoot(com
       yStart,
       yEnd
     }
-  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, xStart, xEnd, yStart, yEnd]);
+  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, disableViewportSnap, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, scrollingY, hovering, rootId, hiddenState, overflowEdges, state, xStart, xEnd, yStart, yEnd]);
   return /*#__PURE__*/jsxs(ScrollAreaRootContext.Provider, {
     value: contextValue,
     children: [!disableStyleElements && styleDisableScrollbar.getElement(nonce), element]
@@ -3901,20 +3582,17 @@ const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaRoot(com
 });
 if (process.env.NODE_ENV !== "production") ScrollAreaRoot.displayName = "ScrollAreaRoot";
 function normalizeOverflowEdgeThreshold(threshold) {
-  if (typeof threshold === 'number') {
-    const value = Math.max(0, threshold);
-    return {
-      xStart: value,
-      xEnd: value,
-      yStart: value,
-      yEnd: value
-    };
-  }
+  const thresholds = typeof threshold === 'number' ? {
+    xStart: threshold,
+    xEnd: threshold,
+    yStart: threshold,
+    yEnd: threshold
+  } : threshold;
   return {
-    xStart: Math.max(0, threshold?.xStart || 0),
-    xEnd: Math.max(0, threshold?.xEnd || 0),
-    yStart: Math.max(0, threshold?.yStart || 0),
-    yEnd: Math.max(0, threshold?.yEnd || 0)
+    xStart: Math.max(0, thresholds?.xStart || 0),
+    xEnd: Math.max(0, thresholds?.xEnd || 0),
+    yStart: Math.max(0, thresholds?.yStart || 0),
+    yEnd: Math.max(0, thresholds?.yEnd || 0)
   };
 }
 
@@ -3928,30 +3606,10 @@ function useScrollAreaViewportContext() {
   return context;
 }
 
-let ScrollAreaViewportCssVars = /*#__PURE__*/function (ScrollAreaViewportCssVars) {
-  /**
-   * The distance from the horizontal start edge in pixels.
-   * @type {number}
-   */
-  ScrollAreaViewportCssVars["scrollAreaOverflowXStart"] = "--scroll-area-overflow-x-start";
-  /**
-   * The distance from the horizontal end edge in pixels.
-   * @type {number}
-   */
-  ScrollAreaViewportCssVars["scrollAreaOverflowXEnd"] = "--scroll-area-overflow-x-end";
-  /**
-   * The distance from the vertical start edge in pixels.
-   * @type {number}
-   */
-  ScrollAreaViewportCssVars["scrollAreaOverflowYStart"] = "--scroll-area-overflow-y-start";
-  /**
-   * The distance from the vertical end edge in pixels.
-   * @type {number}
-   */
-  ScrollAreaViewportCssVars["scrollAreaOverflowYEnd"] = "--scroll-area-overflow-y-end";
-  return ScrollAreaViewportCssVars;
-}({});
+const OVERFLOW_EDGE_VARS = ['--scroll-area-overflow-x-start', '--scroll-area-overflow-x-end', '--scroll-area-overflow-y-start', '--scroll-area-overflow-y-end'];
 
+// Module-level flag to ensure we only register the CSS properties once,
+// regardless of how many Scroll Area components are mounted.
 let scrollAreaOverflowVarsRegistered = false;
 
 /**
@@ -3970,7 +3628,7 @@ function removeCSSVariableInheritance() {
     return;
   }
   if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
-    [ScrollAreaViewportCssVars.scrollAreaOverflowXStart, ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, ScrollAreaViewportCssVars.scrollAreaOverflowYStart, ScrollAreaViewportCssVars.scrollAreaOverflowYEnd].forEach(name => {
+    OVERFLOW_EDGE_VARS.forEach(name => {
       try {
         CSS.registerProperty({
           name,
@@ -4014,12 +3672,11 @@ const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollAreaView
     hiddenState,
     setHasMeasuredScrollbar,
     handleScroll,
+    touchModality,
     setHovering,
     setOverflowEdges,
-    overflowEdges,
     overflowEdgeThreshold,
-    scrollingX,
-    scrollingY
+    viewportState
   } = useScrollAreaRootContext();
   const direction = useDirection();
   const programmaticScrollRef = React.useRef(true);
@@ -4064,18 +3721,12 @@ const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollAreaView
     let scrollLeftFromStart = 0;
     let scrollLeftFromEnd = 0;
     if (!scrollbarXHidden) {
-      let rawScrollLeftFromStart = 0;
-      if (direction === 'rtl') {
-        rawScrollLeftFromStart = clamp(-scrollLeft, 0, maxScrollLeft);
-      } else {
-        rawScrollLeftFromStart = clamp(scrollLeft, 0, maxScrollLeft);
-      }
-      scrollLeftFromStart = normalizeScrollOffset(rawScrollLeftFromStart, maxScrollLeft);
+      // `normalizeScrollOffset` clamps internally.
+      scrollLeftFromStart = normalizeScrollOffset(direction === 'rtl' ? -scrollLeft : scrollLeft, maxScrollLeft);
       scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart;
     }
-    const rawScrollTopFromStart = !scrollbarYHidden ? clamp(scrollTop, 0, maxScrollTop) : 0;
-    const scrollTopFromStart = !scrollbarYHidden ? normalizeScrollOffset(rawScrollTopFromStart, maxScrollTop) : 0;
-    const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0;
+    const scrollTopFromStart = scrollbarYHidden ? 0 : normalizeScrollOffset(scrollTop, maxScrollTop);
+    const scrollTopFromEnd = scrollbarYHidden ? 0 : maxScrollTop - scrollTopFromStart;
     const nextWidth = scrollbarXHidden ? 0 : viewportWidth;
     const nextHeight = scrollbarYHidden ? 0 : viewportHeight;
     let nextCornerWidth = 0;
@@ -4100,76 +3751,53 @@ const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollAreaView
     const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight) : idealNextHeight;
     const clampedNextWidth = Math.max(MIN_THUMB_SIZE, maxNextWidth * ratioX);
     const clampedNextHeight = Math.max(MIN_THUMB_SIZE, maxNextHeight * ratioY);
-    setThumbSize(prevSize => {
-      if (prevSize.height === clampedNextHeight && prevSize.width === clampedNextWidth) {
-        return prevSize;
-      }
-      return {
-        width: clampedNextWidth,
-        height: clampedNextHeight
-      };
-    });
+    setThumbSize(prevSize => pickState(prevSize, {
+      width: clampedNextWidth,
+      height: clampedNextHeight
+    }));
 
     // Handle Y (vertical) scroll
     if (scrollbarYEl && thumbYEl) {
       const maxThumbOffsetY = scrollbarYEl.offsetHeight - clampedNextHeight - scrollbarYOffset - thumbYOffset;
-      const scrollRangeY = scrollableContentHeight - viewportHeight;
-      const scrollRatioY = scrollRangeY === 0 ? 0 : scrollTop / scrollRangeY;
-
-      // In Safari, don't allow it to go negative or too far as `scrollTop` considers the rubber
-      // band effect.
-      const thumbOffsetY = Math.min(maxThumbOffsetY, Math.max(0, scrollRatioY * maxThumbOffsetY));
+      const thumbOffsetY = applyOverscrollThumb(thumbYEl, '--scroll-area-thumb-height', scrollTop, maxScrollTop, scrollableContentHeight, clampedNextHeight, maxThumbOffsetY);
       thumbYEl.style.transform = `translate3d(0,${thumbOffsetY}px,0)`;
     }
 
     // Handle X (horizontal) scroll
     if (scrollbarXEl && thumbXEl) {
       const maxThumbOffsetX = scrollbarXEl.offsetWidth - clampedNextWidth - scrollbarXOffset - thumbXOffset;
-      const scrollRangeX = scrollableContentWidth - viewportWidth;
-      const scrollRatioX = scrollRangeX === 0 ? 0 : scrollLeft / scrollRangeX;
-
-      // In Safari, don't allow it to go negative or too far as `scrollLeft` considers the rubber
-      // band effect.
-      const thumbOffsetX = direction === 'rtl' ? clamp(scrollRatioX * maxThumbOffsetX, -maxThumbOffsetX, 0) : clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX);
-      thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`;
-    }
-    const overflowMetricsPx = [[ScrollAreaViewportCssVars.scrollAreaOverflowXStart, scrollLeftFromStart], [ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, scrollLeftFromEnd], [ScrollAreaViewportCssVars.scrollAreaOverflowYStart, scrollTopFromStart], [ScrollAreaViewportCssVars.scrollAreaOverflowYEnd, scrollTopFromEnd]];
-    for (const [cssVar, value] of overflowMetricsPx) {
-      viewportEl.style.setProperty(cssVar, `${value}px`);
-    }
+      // RTL scrolls from 0 down to `-maxScrollLeft`; measure from the inline start edge so the
+      // overscroll math is direction-agnostic, then flip the resulting offset back below.
+      const scrollFromStart = direction === 'rtl' ? -scrollLeft : scrollLeft;
+      const offsetX = applyOverscrollThumb(thumbXEl, '--scroll-area-thumb-width', scrollFromStart, maxScrollLeft, scrollableContentWidth, clampedNextWidth, maxThumbOffsetX);
+      thumbXEl.style.transform = `translate3d(${direction === 'rtl' ? -offsetX : offsetX}px,0,0)`;
+    }
+    const overflowMetricsPx = [scrollLeftFromStart, scrollLeftFromEnd, scrollTopFromStart, scrollTopFromEnd];
+    OVERFLOW_EDGE_VARS.forEach((cssVar, index) => {
+      viewportEl.style.setProperty(cssVar, `${overflowMetricsPx[index]}px`);
+    });
     if (cornerEl) {
-      if (scrollbarXHidden || scrollbarYHidden) {
-        setCornerSize({
-          width: 0,
-          height: 0
-        });
-      } else if (!scrollbarXHidden && !scrollbarYHidden) {
-        setCornerSize({
-          width: nextCornerWidth,
-          height: nextCornerHeight
-        });
-      }
-    }
-    setHiddenState(prevState => mergeHiddenState(prevState, nextHiddenState));
+      // Bail when the size is unchanged (like `setThumbSize` above); otherwise a
+      // fresh object literal on every scroll frame rebuilds the root context and
+      // re-renders every scroll-area part.
+      // `nextCornerWidth`/`nextCornerHeight` stay 0 when either scrollbar is hidden.
+      setCornerSize(prevSize => pickState(prevSize, {
+        width: nextCornerWidth,
+        height: nextCornerHeight
+      }));
+    }
+    setHiddenState(prevState => pickState(prevState, nextHiddenState));
     const nextOverflowEdges = {
       xStart: !scrollbarXHidden && scrollLeftFromStart > overflowEdgeThreshold.xStart,
       xEnd: !scrollbarXHidden && scrollLeftFromEnd > overflowEdgeThreshold.xEnd,
       yStart: !scrollbarYHidden && scrollTopFromStart > overflowEdgeThreshold.yStart,
       yEnd: !scrollbarYHidden && scrollTopFromEnd > overflowEdgeThreshold.yEnd
     };
-    setOverflowEdges(prev => {
-      if (prev.xStart === nextOverflowEdges.xStart && prev.xEnd === nextOverflowEdges.xEnd && prev.yStart === nextOverflowEdges.yStart && prev.yEnd === nextOverflowEdges.yEnd) {
-        return prev;
-      }
-      return nextOverflowEdges;
-    });
+    setOverflowEdges(prev => pickState(prev, nextOverflowEdges));
   });
   useIsoLayoutEffect(() => {
-    if (!viewportRef.current) {
-      return;
-    }
     removeCSSVariableInheritance();
-  }, [viewportRef]);
+  }, []);
   useIsoLayoutEffect(() => {
     // Wait for scrollbar and thumb refs after hidden-state toggles, refresh math on direction
     // flips, and re-evaluate overflow edges when the threshold changes.
@@ -4212,6 +3840,10 @@ const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollAreaView
       if (animations.length === 0) {
         return;
       }
+
+      // `allSettled` never rejects, but `computeThumbPosition` can still run against a
+      // torn-down tree once the animations resolve. Swallow instead of leaking an unhandled
+      // rejection; `void` alone would only silence the floating-promise lint.
       Promise.allSettled(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
     });
     return () => {
@@ -4239,7 +3871,13 @@ const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollAreaView
         return;
       }
       computeThumbPosition();
-      if (!programmaticScrollRef.current) {
+
+      // WebKit consumes a touch that catches an in-flight momentum scroll or
+      // rubber-band bounce without dispatching any DOM events for the whole
+      // gesture (not even `touchstart`), so scrolls cannot be attributed to
+      // the user through events. Treat every scroll in touch modality as
+      // user-driven instead.
+      if (touchModality || !programmaticScrollRef.current) {
         handleScroll({
           x: viewportRef.current.scrollLeft,
           y: viewportRef.current.scrollTop
@@ -4257,21 +3895,10 @@ const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollAreaView
       });
     },
     onWheel: handleUserInteraction,
-    onTouchMove: handleUserInteraction,
     onPointerMove: handleUserInteraction,
     onPointerEnter: handleUserInteraction,
     onKeyDown: handleUserInteraction
   };
-  const viewportState = React.useMemo(() => ({
-    scrolling: scrollingX || scrollingY,
-    hasOverflowX: !hiddenState.x,
-    hasOverflowY: !hiddenState.y,
-    overflowXStart: overflowEdges.xStart,
-    overflowXEnd: overflowEdges.xEnd,
-    overflowYStart: overflowEdges.yStart,
-    overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.corner
-  }), [scrollingX, scrollingY, hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, viewportRef],
     state: viewportState,
@@ -4296,11 +3923,37 @@ function getHiddenState(viewport) {
     corner: y || x
   };
 }
-function mergeHiddenState(prevState, nextState) {
-  if (prevState.y === nextState.y && prevState.x === nextState.x && prevState.corner === nextState.corner) {
-    return prevState;
+
+/**
+ * Returns `prev` when `next` is shallow-equal to it so setState bails out and
+ * scroll-frame updates don't rebuild the root context.
+ */
+function pickState(prev, next) {
+  for (const key in next) {
+    if (prev[key] !== next[key]) {
+      return next;
+    }
   }
-  return nextState;
+  return prev;
+}
+
+/**
+ * Sizes the thumb and returns its axis offset. On overscroll (Safari rubber-band only) it shrinks
+ * against the pinned edge, damped by `content / (content + overscroll)` to match native feedback;
+ * the size flows through the thumb-size variable so the resting `var(...)` still applies.
+ */
+function applyOverscrollThumb(thumbEl, sizeVar, scrollFromStart, maxScroll, content, size, maxThumbOffset) {
+  const clamped = clamp(scrollFromStart, 0, maxScroll);
+  const overscroll = scrollFromStart - clamped;
+  const nextSize = Math.max(MIN_THUMB_SIZE, size * content / (content + Math.abs(overscroll)));
+
+  // Passing an empty string removes the override, restoring the resting `var(...)` size.
+  thumbEl.style.setProperty(sizeVar, overscroll ? `${nextSize}px` : '');
+
+  // Slide proportionally; at the end edge push down by the shrink so the thumb stays pinned to
+  // it, while a start overscroll pins to offset 0.
+  const offset = maxScroll ? clamped / maxScroll * maxThumbOffset : 0;
+  return offset + (overscroll > 0 ? size - nextSize : 0);
 }
 
-export { getElementAtPoint as A, findScrollableTouchTarget as B, useScrollAreaRootContext as C, DrawerTrigger as D, getOffset as E, ScrollAreaRootCssVars as F, scrollAreaStateAttributesMapping as G, useScrollAreaViewportContext as H, ScrollAreaRoot as S, DrawerRoot as a, DrawerPortal as b, DrawerBackdrop as c, DrawerViewport as d, DrawerPopup as e, ScrollAreaViewport as f, DrawerContent as g, DialogRoot as h, DialogTrigger as i, DialogPortal as j, DialogViewport as k, useDialogPortalContext as l, DialogStore as m, createInitialPopupStoreState as n, useDrawerProviderContext as o, popupStoreSelectors as p, DrawerBackdropCssVars as q, DrawerPopupCssVars as r, DrawerProviderContext as s, useDrawerRootContext as t, useDialogRootContext as u, useSwipeDismiss as v, getDisplacement as w, DrawerPopupDataAttributes as x, getElementTransform as y, DrawerVirtualKeyboardContext as z };
+export { getElementTransform as A, DrawerVirtualKeyboardContext as B, getElementAtPoint as C, DrawerTrigger as D, useScrollAreaRootContext as E, getOffset as F, scrollAreaStateAttributesMapping as G, useScrollAreaViewportContext as H, NullStore as N, ScrollAreaRoot as S, DrawerRoot as a, DrawerPortal as b, DrawerBackdrop as c, DrawerViewport as d, DrawerPopup as e, ScrollAreaViewport as f, DrawerContent as g, DialogTrigger as h, DialogPortal as i, DialogViewport as j, useDialogPortalContext as k, dialogStateAttributesMapping as l, useRenderDialogRoot as m, createNullDialogStore as n, createInitialPopupStoreState as o, popupStoreSelectors as p, usePopupHandleStore as q, useDrawerProviderContext as r, DrawerBackdropCssVars as s, DrawerPopupCssVars as t, useDialogRootContext as u, DrawerProviderContext as v, useDrawerRootContext as w, useSwipeDismiss as x, getDisplacement as y, DrawerPopupDataAttributes as z };