@jobber/components 8.23.0 → 8.23.1

package/dist/ScrollAreaViewport-cjs.js

@@ -2,9 +2,9 @@
 
 var React = require('react');
 var useRenderElement = require('./useRenderElement-cjs.js');
-var InternalBackdrop = require('./InternalBackdrop-cjs.js');
+var useScrollLock = require('./useScrollLock-cjs.js');
 var useButton = require('./useButton-cjs.js');
-var CSPContext = require('./CSPContext-cjs.js');
+var scrollEdges = require('./scrollEdges-cjs.js');
 var clamp = require('./clamp-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
@@ -28,170 +28,16 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-/**
- * Returns a callback ref that registers/unregisters the trigger element in the store.
- *
- * @param store The Store instance where the trigger should be registered.
- */
-function useTriggerRegistration(id, store) {
-  // Keep track of the currently registered element to unregister it on unmount or id change.
-  const registeredElementIdRef = React__namespace.useRef(null);
-  const registeredElementRef = React__namespace.useRef(null);
-  return React__namespace.useCallback(element => {
-    if (id === undefined) {
-      return;
-    }
-    if (registeredElementIdRef.current !== null) {
-      const registeredId = registeredElementIdRef.current;
-      const registeredElement = registeredElementRef.current;
-      const currentElement = store.context.triggerElements.getById(registeredId);
-      if (registeredElement && currentElement === registeredElement) {
-        store.context.triggerElements.delete(registeredId);
-      }
-      registeredElementIdRef.current = null;
-      registeredElementRef.current = null;
-    }
-    if (element !== null) {
-      registeredElementIdRef.current = id;
-      registeredElementRef.current = element;
-      store.context.triggerElements.add(id, element);
-    }
-  }, [store, id]);
-}
-
-/**
- * Sets up trigger data forwarding to the store.
- *
- * @param triggerId Id of the trigger.
- * @param triggerElement The trigger DOM element.
- * @param store The Store instance managing the popup state.
- * @param stateUpdates An object with state updates to apply when the trigger is active.
- */
-function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpdates) {
-  const isMountedByThisTrigger = store.useState('isMountedByTrigger', triggerId);
-  const baseRegisterTrigger = useTriggerRegistration(triggerId, store);
-  const registerTrigger = useButton.useStableCallback(element => {
-    baseRegisterTrigger(element);
-    if (!element || !store.select('open')) {
-      return;
-    }
-    const activeTriggerId = store.select('activeTriggerId');
-    if (activeTriggerId === triggerId) {
-      store.update({
-        activeTriggerElement: element,
-        ...stateUpdates
-      });
-      return;
-    }
-    if (activeTriggerId == null) {
-      // This runs when popup is open, but no active trigger is set.
-      // It can happen when using controlled mode and the trigger is mounted after opening or if `triggerId` prop is not set explicitly.
-      // In such cases the first trigger to run this code becomes the active trigger (store.select('activeTriggerId') should not return null after that).
-      // This is mostly for compatibility with contained triggers where no explicit `triggerId` was required in controlled mode.
-      store.update({
-        activeTriggerId: triggerId,
-        activeTriggerElement: element,
-        ...stateUpdates
-      });
-    }
-  });
-  useButton.useIsoLayoutEffect(() => {
-    if (isMountedByThisTrigger) {
-      store.update({
-        activeTriggerElement: triggerElementRef.current,
-        ...stateUpdates
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isMountedByThisTrigger, store, triggerElementRef, ...Object.values(stateUpdates)]);
-  return {
-    registerTrigger,
-    isMountedByThisTrigger
-  };
-}
-/**
- * Ensures that when there's only one trigger element registered, it is set as the active trigger.
- * This allows controlled popups to work correctly without an explicit triggerId, maintaining compatibility
- * with the contained triggers.
- *
- * This should be called on the Root part.
- *
- * @param open Whether the popup is open.
- * @param store The Store instance managing the popup state.
- */
-function useImplicitActiveTrigger(store) {
-  const open = store.useState('open');
-  useButton.useIsoLayoutEffect(() => {
-    if (open && !store.select('activeTriggerId') && store.context.triggerElements.size === 1) {
-      const iteratorResult = store.context.triggerElements.entries().next();
-      if (!iteratorResult.done) {
-        const [implicitTriggerId, implicitTriggerElement] = iteratorResult.value;
-        store.update({
-          activeTriggerId: implicitTriggerId,
-          activeTriggerElement: implicitTriggerElement
-        });
-      }
-    }
-  }, [open, store]);
-}
-
-/**
- * Mangages the mounted state of the popup.
- * Sets up the transition status listeners and handles unmounting when needed.
- * Updates the `mounted` and `transitionStatus` states in the store.
- *
- * @param open Whether the popup is open.
- * @param store The Store instance managing the popup state.
- * @param onUnmount Optional callback to be called when the popup is unmounted.
- *
- * @returns A function to forcibly unmount the popup.
- */
-function useOpenStateTransitions(open, store, onUnmount) {
-  const {
-    mounted,
-    setMounted,
-    transitionStatus
-  } = useButton.useTransitionStatus(open);
-  store.useSyncedValues({
-    mounted,
-    transitionStatus
-  });
-  const forceUnmount = useButton.useStableCallback(() => {
-    setMounted(false);
-    store.update({
-      activeTriggerId: null,
-      activeTriggerElement: null,
-      mounted: false
-    });
-    onUnmount?.();
-    store.context.onOpenChangeComplete?.(false);
-  });
-  const preventUnmountingOnClose = store.useState('preventUnmountingOnClose');
-  useButton.useOpenChangeComplete({
-    enabled: !preventUnmountingOnClose,
-    open,
-    ref: store.context.popupRef,
-    onComplete() {
-      if (!open) {
-        forceUnmount();
-      }
-    }
-  });
-  return {
-    forceUnmount,
-    transitionStatus
-  };
-}
-
 function getEmptyRootContext() {
-  return new InternalBackdrop.FloatingRootStore({
+  return new useScrollLock.FloatingRootStore({
     open: false,
+    transitionStatus: undefined,
     floatingElement: null,
     referenceElement: null,
-    triggerElements: new InternalBackdrop.PopupTriggerMap(),
-    floatingId: '',
+    triggerElements: new useScrollLock.PopupTriggerMap(),
+    floatingId: undefined,
+    syncOnly: false,
     nested: false,
-    noEmit: false,
     onOpenChange: undefined
   });
 }
@@ -205,8 +51,10 @@ function createInitialPopupStoreState() {
     open: false,
     openProp: undefined,
     mounted: false,
-    transitionStatus: 'idle',
+    transitionStatus: undefined,
     floatingRootContext: getEmptyRootContext(),
+    floatingId: undefined,
+    triggerCount: 0,
     preventUnmountingOnClose: false,
     payload: undefined,
     activeTriggerId: null,
@@ -219,192 +67,69 @@ function createInitialPopupStoreState() {
     popupProps: useRenderElement.EMPTY_OBJECT
   };
 }
-const activeTriggerIdSelector = InternalBackdrop.createSelector(state => state.triggerIdProp ?? state.activeTriggerId);
+function createPopupFloatingRootContext(triggerElements, floatingId, nested = false) {
+  return new useScrollLock.FloatingRootStore({
+    open: false,
+    transitionStatus: undefined,
+    floatingElement: null,
+    referenceElement: null,
+    triggerElements,
+    floatingId,
+    syncOnly: true,
+    nested,
+    onOpenChange: undefined
+  });
+}
+const activeTriggerIdSelector = useScrollLock.createSelector(state => state.triggerIdProp ?? state.activeTriggerId);
+const openSelector = useScrollLock.createSelector(state => state.openProp ?? state.open);
+const popupIdSelector = useScrollLock.createSelector(state => {
+  const popupId = state.popupElement?.id ?? state.floatingId;
+  return popupId || undefined;
+});
+function triggerOwnsOpenPopup(state, triggerId) {
+  return triggerId !== undefined && openSelector(state) && activeTriggerIdSelector(state) === triggerId;
+}
+function triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) {
+  if (triggerOwnsOpenPopup(state, triggerId)) {
+    return true;
+  }
+  return triggerId !== undefined && openSelector(state) && activeTriggerIdSelector(state) == null && state.triggerCount === 1;
+}
 const popupStoreSelectors = {
-  open: InternalBackdrop.createSelector(state => state.openProp ?? state.open),
-  mounted: InternalBackdrop.createSelector(state => state.mounted),
-  transitionStatus: InternalBackdrop.createSelector(state => state.transitionStatus),
-  floatingRootContext: InternalBackdrop.createSelector(state => state.floatingRootContext),
-  preventUnmountingOnClose: InternalBackdrop.createSelector(state => state.preventUnmountingOnClose),
-  payload: InternalBackdrop.createSelector(state => state.payload),
+  open: openSelector,
+  mounted: useScrollLock.createSelector(state => state.mounted),
+  transitionStatus: useScrollLock.createSelector(state => state.transitionStatus),
+  floatingRootContext: useScrollLock.createSelector(state => state.floatingRootContext),
+  triggerCount: useScrollLock.createSelector(state => state.triggerCount),
+  preventUnmountingOnClose: useScrollLock.createSelector(state => state.preventUnmountingOnClose),
+  payload: useScrollLock.createSelector(state => state.payload),
   activeTriggerId: activeTriggerIdSelector,
-  activeTriggerElement: InternalBackdrop.createSelector(state => state.mounted ? state.activeTriggerElement : null),
+  activeTriggerElement: useScrollLock.createSelector(state => state.mounted ? state.activeTriggerElement : null),
+  popupId: popupIdSelector,
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
-  isTriggerActive: InternalBackdrop.createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId),
+  isTriggerActive: useScrollLock.createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId),
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: InternalBackdrop.createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.open),
+  isOpenedByTrigger: useScrollLock.createSelector((state, triggerId) => triggerOwnsOpenPopup(state, triggerId)),
   /**
    * Whether the popup is mounted and was activated by a trigger with the given ID.
    */
-  isMountedByTrigger: InternalBackdrop.createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
-  triggerProps: InternalBackdrop.createSelector((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
-  popupProps: InternalBackdrop.createSelector(state => state.popupProps),
-  popupElement: InternalBackdrop.createSelector(state => state.popupElement),
-  positionerElement: InternalBackdrop.createSelector(state => state.positionerElement)
+  isMountedByTrigger: useScrollLock.createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
+  triggerProps: useScrollLock.createSelector((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
+  /**
+   * Popup id for the trigger that currently owns the open popup.
+   */
+  triggerPopupId: useScrollLock.createSelector((state, triggerId) => triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) ? popupIdSelector(state) : undefined),
+  popupProps: useScrollLock.createSelector(state => state.popupProps),
+  popupElement: useScrollLock.createSelector(state => state.popupElement),
+  positionerElement: useScrollLock.createSelector(state => state.positionerElement)
 };
 
-/**
- * Initializes a FloatingRootStore that is kept in sync with the provided PopupStore.
- * The new instance is created only once and updated on every render.
- */
-function useSyncedFloatingRootContext(options) {
-  const {
-    popupStore,
-    noEmit = false,
-    treatPopupAsFloatingElement = false,
-    onOpenChange
-  } = options;
-  const floatingId = useButton.useId();
-  const nested = InternalBackdrop.useFloatingParentNodeId() != null;
-  const open = popupStore.useState('open');
-  const referenceElement = popupStore.useState('activeTriggerElement');
-  const floatingElement = popupStore.useState(treatPopupAsFloatingElement ? 'popupElement' : 'positionerElement');
-  const triggerElements = popupStore.context.triggerElements;
-  const store = useRenderElement.useRefWithInit(() => new InternalBackdrop.FloatingRootStore({
-    open,
-    referenceElement,
-    floatingElement,
-    triggerElements,
-    onOpenChange,
-    floatingId,
-    nested,
-    noEmit
-  })).current;
-  useButton.useIsoLayoutEffect(() => {
-    const valuesToSync = {
-      open,
-      floatingId,
-      referenceElement,
-      floatingElement
-    };
-    if (floatingUi_utils_dom.isElement(referenceElement)) {
-      valuesToSync.domReferenceElement = referenceElement;
-    }
-    if (store.state.positionReference === store.state.referenceElement) {
-      valuesToSync.positionReference = referenceElement;
-    }
-    store.update(valuesToSync);
-  }, [open, floatingId, referenceElement, floatingElement, store]);
-
-  // TODO: When `setOpen` is a part of the PopupStore API, we don't need to sync it.
-  store.context.onOpenChange = onOpenChange;
-  store.context.nested = nested;
-  store.context.noEmit = noEmit;
-  return store;
-}
-
-const componentRoleToAriaRoleMap = new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
-
-/**
- * Adds base screen reader props to the reference and floating elements for a
- * given floating element `role`.
- * @see https://floating-ui.com/docs/useRole
- */
-function useRole(context, props = {}) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const open = store.useState('open');
-  const defaultFloatingId = store.useState('floatingId');
-  const domReference = store.useState('domReferenceElement');
-  const floatingElement = store.useState('floatingElement');
-  const {
-    role = 'dialog'
-  } = props;
-  const defaultReferenceId = useButton.useId();
-  const referenceId = domReference?.id || defaultReferenceId;
-  const floatingId = React__namespace.useMemo(() => useButton.getFloatingFocusElement(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
-  const ariaRole = componentRoleToAriaRoleMap.get(role) ?? role;
-  const parentId = InternalBackdrop.useFloatingParentNodeId();
-  const isNested = parentId != null;
-  const trigger = React__namespace.useMemo(() => {
-    if (ariaRole === 'tooltip' || role === 'label') {
-      return useRenderElement.EMPTY_OBJECT;
-    }
-    return {
-      'aria-haspopup': ariaRole === 'alertdialog' ? 'dialog' : ariaRole,
-      'aria-expanded': 'false',
-      ...(ariaRole === 'listbox' && {
-        role: 'combobox'
-      }),
-      ...(ariaRole === 'menu' && isNested && {
-        role: 'menuitem'
-      }),
-      ...(role === 'select' && {
-        'aria-autocomplete': 'none'
-      }),
-      ...(role === 'combobox' && {
-        'aria-autocomplete': 'list'
-      })
-    };
-  }, [ariaRole, isNested, role]);
-  const reference = React__namespace.useMemo(() => {
-    if (ariaRole === 'tooltip' || role === 'label') {
-      return {
-        [`aria-${role === 'label' ? 'labelledby' : 'describedby'}`]: open ? floatingId : undefined
-      };
-    }
-    const triggerProps = trigger;
-    return {
-      ...triggerProps,
-      'aria-expanded': open ? 'true' : 'false',
-      'aria-controls': open ? floatingId : undefined,
-      ...(ariaRole === 'menu' && {
-        id: referenceId
-      })
-    };
-  }, [ariaRole, floatingId, open, referenceId, role, trigger]);
-  const floating = React__namespace.useMemo(() => {
-    const floatingProps = {
-      id: floatingId,
-      ...(ariaRole && {
-        role: ariaRole
-      })
-    };
-    if (ariaRole === 'tooltip' || role === 'label') {
-      return floatingProps;
-    }
-    return {
-      ...floatingProps,
-      ...(ariaRole === 'menu' && {
-        'aria-labelledby': referenceId
-      })
-    };
-  }, [ariaRole, floatingId, referenceId, role]);
-  const item = React__namespace.useCallback(({
-    active,
-    selected
-  }) => {
-    const commonProps = {
-      role: 'option',
-      ...(active && {
-        id: `${floatingId}-fui-option`
-      })
-    };
-
-    // For `menu`, we are unable to tell if the item is a `menuitemradio`
-    // or `menuitemcheckbox`. For backwards-compatibility reasons, also
-    // avoid defaulting to `menuitem` as it may overwrite custom role props.
-    switch (role) {
-      case 'select':
-      case 'combobox':
-        return {
-          ...commonProps,
-          'aria-selected': selected
-        };
-    }
-    return {};
-  }, [floatingId, role]);
-  return React__namespace.useMemo(() => ({
-    reference,
-    floating,
-    item,
-    trigger
-  }), [reference, floating, trigger, item]);
-}
-
+const IsDrawerContext = /*#__PURE__*/React__namespace.createContext(false);
+if (process.env.NODE_ENV !== "production") IsDrawerContext.displayName = "IsDrawerContext";
 const DialogRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DialogRootContext.displayName = "DialogRootContext";
 function useDialogRootContext(optional) {
@@ -442,12 +167,12 @@ const DialogPortal = /*#__PURE__*/React__namespace.forwardRef(function DialogPor
   }
   return /*#__PURE__*/jsxRuntime.jsx(DialogPortalContext.Provider, {
     value: keepMounted,
-    children: /*#__PURE__*/jsxRuntime.jsxs(InternalBackdrop.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(useScrollLock.FloatingPortal, {
       ref: forwardedRef,
       ...portalProps,
-      children: [mounted && modal === true && /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.InternalBackdrop, {
+      children: [mounted && modal === true && /*#__PURE__*/jsxRuntime.jsx(useScrollLock.InternalBackdrop, {
         ref: store.context.internalBackdropRef,
-        inert: InternalBackdrop.inertValue(!open)
+        inert: useScrollLock.inertValue(!open)
       }), props.children]
     })
   });
@@ -457,45 +182,36 @@ if (process.env.NODE_ENV !== "production") DialogPortal.displayName = "DialogPor
 function useDialogRoot(params) {
   const {
     store,
-    parentContext,
     actionsRef
   } = params;
   const open = store.useState('open');
-  const disablePointerDismissal = store.useState('disablePointerDismissal');
-  const modal = store.useState('modal');
-  const popupElement = store.useState('popupElement');
-  const {
-    openMethod,
-    triggerProps
-  } = InternalBackdrop.useOpenInteractionType(open);
-  useImplicitActiveTrigger(store);
+  useScrollLock.usePopupRootSync(store, open);
+  useScrollLock.useImplicitActiveTrigger(store);
   const {
     forceUnmount
-  } = useOpenStateTransitions(open, store);
-  const createDialogEventDetails = useButton.useStableCallback(reason => {
-    const details = useButton.createChangeEventDetails(reason);
-    details.preventUnmountOnClose = () => {
-      store.set('preventUnmountingOnClose', true);
-    };
-    return details;
-  });
+  } = useScrollLock.useOpenStateTransitions(open, store);
   const handleImperativeClose = React__namespace.useCallback(() => {
-    store.setOpen(false, createDialogEventDetails(useButton.imperativeAction));
-  }, [store, createDialogEventDetails]);
+    store.setOpen(false, useButton.createChangeEventDetails(useButton.imperativeAction));
+  }, [store]);
   React__namespace.useImperativeHandle(actionsRef, () => ({
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
-  const floatingRootContext = useSyncedFloatingRootContext({
-    popupStore: store,
-    onOpenChange: store.setOpen,
-    treatPopupAsFloatingElement: true,
-    noEmit: true
-  });
+}
+function DialogInteractions({
+  store,
+  parentContext,
+  isDrawer
+}) {
+  const open = store.useState('open');
+  const disablePointerDismissal = store.useState('disablePointerDismissal');
+  const modal = store.useState('modal');
+  const popupElement = store.useState('popupElement');
+  const floatingRootContext = store.useState('floatingRootContext');
   const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = React__namespace.useState(0);
+  const [ownNestedOpenDrawers, setOwnNestedOpenDrawers] = React__namespace.useState(0);
   const isTopmost = ownNestedOpenDialogs === 0;
-  const role = useRole(floatingRootContext);
-  const dismiss = InternalBackdrop.useDismiss(floatingRootContext, {
+  const dismiss = useScrollLock.useDismiss(floatingRootContext, {
     outsidePressEvent() {
       if (store.context.internalBackdropRef.current || store.context.backdropRef.current) {
         return 'intentional';
@@ -522,12 +238,11 @@ function useDialogRoot(params) {
       }
       const target = useButton.getTarget(event);
       if (isTopmost && !disablePointerDismissal) {
-        const eventTarget = target;
         // Only close if the click occurred on the dialog's owning backdrop.
         // 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 === eventTarget || store.context.backdropRef.current === eventTarget || useButton.contains(eventTarget, popupElement) && !eventTarget?.hasAttribute('data-base-ui-portal') : true;
+          return store.context.internalBackdropRef.current || store.context.backdropRef.current ? store.context.internalBackdropRef.current === target || store.context.backdropRef.current === target || useButton.contains(target, popupElement) && !target?.hasAttribute('data-base-ui-portal') : true;
         }
         return true;
       }
@@ -535,25 +250,22 @@ function useDialogRoot(params) {
     },
     escapeKey: isTopmost
   });
-  InternalBackdrop.useScrollLock(open && modal === true, popupElement);
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getTriggerProps
-  } = InternalBackdrop.useInteractions([role, dismiss]);
+  useScrollLock.useScrollLock(open && modal === true, popupElement);
 
-  // Listen for nested open/close events on this store to maintain the count
-  store.useContextCallback('onNestedDialogOpen', ownChildrenCount => {
-    setOwnNestedOpenDialogs(ownChildrenCount + 1);
+  // Listen for nested open/close events on this store to maintain the 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__namespace.useEffect(() => {
     if (parentContext?.onNestedDialogOpen && open) {
-      parentContext.onNestedDialogOpen(ownNestedOpenDialogs);
+      parentContext.onNestedDialogOpen(ownNestedOpenDialogs + 1, ownNestedOpenDrawers + (isDrawer ? 1 : 0));
     }
     if (parentContext?.onNestedDialogClose && !open) {
       parentContext.onNestedDialogClose();
@@ -563,42 +275,48 @@ function useDialogRoot(params) {
         parentContext.onNestedDialogClose();
       }
     };
-  }, [open, parentContext, ownNestedOpenDialogs]);
-  const activeTriggerProps = React__namespace.useMemo(() => getReferenceProps(triggerProps), [getReferenceProps, triggerProps]);
-  const inactiveTriggerProps = React__namespace.useMemo(() => getTriggerProps(triggerProps), [getTriggerProps, triggerProps]);
-  const popupProps = React__namespace.useMemo(() => getFloatingProps(), [getFloatingProps]);
-  store.useSyncedValues({
-    openMethod,
+  }, [isDrawer, open, ownNestedOpenDialogs, ownNestedOpenDrawers, parentContext]);
+  const activeTriggerProps = dismiss.reference ?? useRenderElement.EMPTY_OBJECT;
+  const inactiveTriggerProps = dismiss.trigger ?? useRenderElement.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 ?? useRenderElement.EMPTY_OBJECT;
+  useScrollLock.usePopupInteractionProps(store, {
     activeTriggerProps,
     inactiveTriggerProps,
     popupProps,
-    floatingRootContext,
-    nestedOpenDialogCount: ownNestedOpenDialogs
+    nestedOpenDialogCount: ownNestedOpenDialogs,
+    nestedOpenDrawerCount: ownNestedOpenDrawers
   });
+  return null;
 }
 
 const selectors = {
   ...popupStoreSelectors,
-  modal: InternalBackdrop.createSelector(state => state.modal),
-  nested: InternalBackdrop.createSelector(state => state.nested),
-  nestedOpenDialogCount: InternalBackdrop.createSelector(state => state.nestedOpenDialogCount),
-  disablePointerDismissal: InternalBackdrop.createSelector(state => state.disablePointerDismissal),
-  openMethod: InternalBackdrop.createSelector(state => state.openMethod),
-  descriptionElementId: InternalBackdrop.createSelector(state => state.descriptionElementId),
-  titleElementId: InternalBackdrop.createSelector(state => state.titleElementId),
-  viewportElement: InternalBackdrop.createSelector(state => state.viewportElement),
-  role: InternalBackdrop.createSelector(state => state.role)
+  modal: useScrollLock.createSelector(state => state.modal),
+  nested: useScrollLock.createSelector(state => state.nested),
+  nestedOpenDialogCount: useScrollLock.createSelector(state => state.nestedOpenDialogCount),
+  nestedOpenDrawerCount: useScrollLock.createSelector(state => state.nestedOpenDrawerCount),
+  disablePointerDismissal: useScrollLock.createSelector(state => state.disablePointerDismissal),
+  openMethod: useScrollLock.createSelector(state => state.openMethod),
+  descriptionElementId: useScrollLock.createSelector(state => state.descriptionElementId),
+  titleElementId: useScrollLock.createSelector(state => state.titleElementId),
+  viewportElement: useScrollLock.createSelector(state => state.viewportElement),
+  role: useScrollLock.createSelector(state => state.role)
 };
-class DialogStore extends InternalBackdrop.ReactStore {
-  constructor(initialState) {
-    super(createInitialState(initialState), {
+class DialogStore extends useScrollLock.ReactStore {
+  constructor(initialState, floatingId, nested = false) {
+    const triggerElements = new useScrollLock.PopupTriggerMap();
+    const state = createInitialState(initialState);
+    state.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
+    super(state, {
       popupRef: /*#__PURE__*/React__namespace.createRef(),
       backdropRef: /*#__PURE__*/React__namespace.createRef(),
       internalBackdropRef: /*#__PURE__*/React__namespace.createRef(),
       outsidePressEnabledRef: {
         current: true
       },
-      triggerElements: new InternalBackdrop.PopupTriggerMap(),
+      triggerElements,
       onOpenChange: undefined,
       onOpenChangeComplete: undefined
     }, selectors);
@@ -616,26 +334,20 @@ class DialogStore extends InternalBackdrop.ReactStore {
     if (eventDetails.isCanceled) {
       return;
     }
-    const details = {
-      open: nextOpen,
-      nativeEvent: eventDetails.event,
-      reason: eventDetails.reason,
-      nested: this.state.nested
-    };
-    this.state.floatingRootContext.context.events?.emit('openchange', details);
+    this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const updatedState = {
       open: nextOpen
     };
-
-    // If a popup is closing, the `trigger` may be null.
-    // We want to keep the previous value so that exit animations are played and focus is returned correctly.
-    const newTriggerId = eventDetails.trigger?.id ?? null;
-    if (newTriggerId || nextOpen) {
-      updatedState.activeTriggerId = newTriggerId;
-      updatedState.activeTriggerElement = eventDetails.trigger ?? null;
-    }
+    useScrollLock.setPopupOpenState(updatedState, nextOpen, eventDetails.trigger);
     this.update(updatedState);
   };
+  static useStore(externalStore, initialState) {
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const store = useScrollLock.usePopupStore(externalStore, (floatingId, nested) => new DialogStore(initialState, floatingId, nested), true).store;
+    /* eslint-enable react-hooks/rules-of-hooks */
+
+    return store;
+  }
 }
 function createInitialState(initialState = {}) {
   return {
@@ -649,82 +361,105 @@ function createInitialState(initialState = {}) {
     openMethod: null,
     nested: false,
     nestedOpenDialogCount: 0,
+    nestedOpenDrawerCount: 0,
     role: 'dialog',
     ...initialState
   };
 }
 
-/**
- * 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) {
+function useRenderDialogRoot(props, mode = 'dialog') {
   const {
     children,
     open: openProp,
     defaultOpen = false,
     onOpenChange,
     onOpenChangeComplete,
-    disablePointerDismissal = false,
-    modal = true,
+    disablePointerDismissal: disablePointerDismissalProp = false,
+    modal: modalProp = true,
     actionsRef,
     handle,
     triggerId: triggerIdProp,
     defaultTriggerId: defaultTriggerIdProp = null
   } = props;
+  const isDrawer = mode === 'drawer';
+  const isAlertDialog = mode === 'alert-dialog';
+  const modal = isAlertDialog ? true : modalProp;
+  const disablePointerDismissal = isAlertDialog || disablePointerDismissalProp;
+  const role = isAlertDialog ? 'alertdialog' : 'dialog';
   const parentDialogRootContext = useDialogRootContext(true);
   const nested = Boolean(parentDialogRootContext);
-  const store = useRenderElement.useRefWithInit(() => {
-    return handle?.store ?? new DialogStore({
-      open: defaultOpen,
-      openProp,
-      activeTriggerId: defaultTriggerIdProp,
-      triggerIdProp,
-      modal,
-      disablePointerDismissal,
-      nested
-    });
-  }).current;
+  const rootState = {
+    modal,
+    disablePointerDismissal,
+    nested,
+    role
+  };
+  const store = DialogStore.useStore(handle?.store, {
+    open: defaultOpen,
+    openProp,
+    activeTriggerId: defaultTriggerIdProp,
+    triggerIdProp,
+    ...rootState
+  });
 
   // Support initially open state when uncontrolled
-  InternalBackdrop.useOnFirstRender(() => {
-    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
-      store.update({
-        open: true,
-        activeTriggerId: defaultTriggerIdProp
-      });
+  useScrollLock.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);
     }
   });
   store.useControlledProp('openProp', openProp);
   store.useControlledProp('triggerIdProp', triggerIdProp);
-  store.useSyncedValues({
-    disablePointerDismissal,
-    nested,
-    modal
-  });
+  store.useSyncedValues(rootState);
   store.useContextCallback('onOpenChange', onOpenChange);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+  const open = store.useState('open');
+  const mounted = store.useState('mounted');
   const payload = store.useState('payload');
   useDialogRoot({
     store,
-    actionsRef,
-    parentContext: parentDialogRootContext?.store.context,
-    onOpenChange,
-    triggerIdProp
+    actionsRef
   });
+  const shouldRenderInteractions = open || mounted;
   const contextValue = React__namespace.useMemo(() => ({
     store
   }), [store]);
-  return /*#__PURE__*/jsxRuntime.jsx(DialogRootContext.Provider, {
-    value: contextValue,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
+  return /*#__PURE__*/jsxRuntime.jsx(IsDrawerContext.Provider, {
+    value: false,
+    children: /*#__PURE__*/jsxRuntime.jsxs(DialogRootContext.Provider, {
+      value: contextValue,
+      children: [shouldRenderInteractions && /*#__PURE__*/jsxRuntime.jsx(DialogInteractions, {
+        store: store,
+        parentContext: parentDialogRootContext?.store.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__namespace.useContext(IsDrawerContext) ? 'drawer' : 'dialog';
+  return useRenderDialogRoot(props, mode);
+}
+
 /**
  * A button that opens the dialog.
  * Renders a `<button>` element.
@@ -735,6 +470,7 @@ const DialogTrigger = /*#__PURE__*/React__namespace.forwardRef(function DialogTr
   const {
     render,
     className,
+    style,
     disabled = false,
     nativeButton = true,
     id: idProp,
@@ -750,11 +486,12 @@ const DialogTrigger = /*#__PURE__*/React__namespace.forwardRef(function DialogTr
   const thisTriggerId = useButton.useBaseUiId(idProp);
   const floatingContext = store.useState('floatingRootContext');
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const popupId = store.useState('triggerPopupId', thisTriggerId);
   const triggerElementRef = React__namespace.useRef(null);
   const {
     registerTrigger,
     isMountedByThisTrigger
-  } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
+  } = useScrollLock.useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
     payload
   });
   const {
@@ -764,10 +501,12 @@ const DialogTrigger = /*#__PURE__*/React__namespace.forwardRef(function DialogTr
     disabled,
     native: nativeButton
   });
-  const click = InternalBackdrop.useClick(floatingContext, {
+  const click = useScrollLock.useClick(floatingContext, {
     enabled: floatingContext != null
   });
-  const localInteractionProps = InternalBackdrop.useInteractions([click]);
+  const interactionTypeProps = useScrollLock.useOpenMethodTriggerProps(() => store.select('open'), interactionType => {
+    store.set('openMethod', interactionType);
+  });
   const state = {
     disabled,
     open: isOpenedByThisTrigger
@@ -776,11 +515,14 @@ const DialogTrigger = /*#__PURE__*/React__namespace.forwardRef(function DialogTr
   return useRenderElement.useRenderElement('button', componentProps, {
     state,
     ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
-    props: [localInteractionProps.getReferenceProps(), rootTriggerProps, {
-      [InternalBackdrop.CLICK_TRIGGER_IDENTIFIER]: '',
-      id: thisTriggerId
+    props: [click.reference, rootTriggerProps, interactionTypeProps, {
+      [useScrollLock.CLICK_TRIGGER_IDENTIFIER]: '',
+      id: thisTriggerId,
+      'aria-haspopup': 'dialog',
+      'aria-expanded': isOpenedByThisTrigger,
+      'aria-controls': popupId
     }, elementProps, getButtonProps],
-    stateAttributesMapping: InternalBackdrop.triggerOpenStateMapping
+    stateAttributesMapping: useScrollLock.triggerOpenStateMapping
   });
 });
 if (process.env.NODE_ENV !== "production") DialogTrigger.displayName = "DialogTrigger";
@@ -834,7 +576,7 @@ let DrawerBackdropCssVars = /*#__PURE__*/function (DrawerBackdropCssVars) {
 }({});
 
 const stateAttributesMapping$1 = {
-  ...InternalBackdrop.popupStateMapping,
+  ...useScrollLock.popupStateMapping,
   ...useButton.transitionStatusMapping
 };
 
@@ -848,6 +590,7 @@ const DrawerBackdrop = /*#__PURE__*/React__namespace.forwardRef(function DrawerB
   const {
     render,
     className,
+    style,
     forceRender = false,
     ...elementProps
   } = componentProps;
@@ -894,6 +637,7 @@ const DrawerContent = /*#__PURE__*/React__namespace.forwardRef(function DrawerCo
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   useDialogRootContext();
@@ -917,19 +661,19 @@ let DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
   /**
    * Present when the drawer is open.
    */
-  DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = InternalBackdrop.CommonPopupDataAttributes.open] = "open";
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = useScrollLock.CommonPopupDataAttributes.open] = "open";
   /**
    * Present when the drawer is closed.
    */
-  DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = InternalBackdrop.CommonPopupDataAttributes.closed] = "closed";
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = useScrollLock.CommonPopupDataAttributes.closed] = "closed";
   /**
    * Present when the drawer is animating in.
    */
-  DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = InternalBackdrop.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = useScrollLock.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**
    * Present when the drawer is animating out.
    */
-  DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = InternalBackdrop.CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = useScrollLock.CommonPopupDataAttributes.endingStyle] = "endingStyle";
   /**
    * Present when the drawer is at the expanded (full-height) snap point.
    */
@@ -968,6 +712,17 @@ function useDrawerRootContext(optional) {
   return drawerRootContext;
 }
 
+/**
+ * Resolves the vertical swipe movement for a snap point, applying square-root damping once the drag
+ * overshoots the fully-open edge (`nextOffset < 0`) so the popup resists travelling past it.
+ */
+function getSnapPointSwipeMovement(baseOffset, movementValue) {
+  const nextOffset = baseOffset + movementValue;
+  if (nextOffset >= 0) {
+    return movementValue;
+  }
+  return -Math.sqrt(-nextOffset) - baseOffset;
+}
 function resolveSnapPointValue(snapPoint, viewportHeight, rootFontSize) {
   if (!Number.isFinite(viewportHeight) || viewportHeight <= 0) {
     return null;
@@ -1121,7 +876,6 @@ let drawerSwipeVarsRegistered = false;
 /**
  * Removes inheritance of high-frequency drawer swipe CSS variables, which
  * reduces style recalculation cost in complex drawers with deep subtrees.
- * Child elements that need these values can still opt-in by using `inherit`.
  * See https://motion.dev/blog/web-animation-performance-tier-list
  * under the "Improving CSS variable performance" section.
  */
@@ -1172,7 +926,7 @@ function removeCSSVariableInheritance$1() {
   drawerSwipeVarsRegistered = true;
 }
 const stateAttributesMapping = {
-  ...InternalBackdrop.popupStateMapping,
+  ...useScrollLock.popupStateMapping,
   ...useButton.transitionStatusMapping,
   expanded(value) {
     return value ? {
@@ -1209,15 +963,17 @@ const stateAttributesMapping = {
  */
 const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopup(componentProps, forwardedRef) {
   const {
+    render,
     className,
+    style,
     finalFocus,
     initialFocus,
-    render,
     ...elementProps
   } = componentProps;
   const {
     store
   } = useDialogRootContext();
+  const popupRef = store.context.popupRef;
   const {
     swipeDirection,
     frontmostHeight,
@@ -1235,26 +991,39 @@ const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopu
   const modal = store.useState('modal');
   const mounted = store.useState('mounted');
   const nested = store.useState('nested');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
   const transitionStatus = store.useState('transitionStatus');
   const open = store.useState('open');
   const openMethod = store.useState('openMethod');
   const titleElementId = store.useState('titleElementId');
   const role = store.useState('role');
-  const nestedDrawerOpen = nestedOpenDialogCount > 0;
+  const floatingId = floatingRootContext.useState('floatingId');
+  const popupId = elementProps.id ?? floatingId;
   const swipe = useDrawerViewportContext();
-  const swiping = swipe?.swiping ?? false;
-  const swipeStrength = swipe?.swipeStrength ?? null;
+  useDialogPortalContext();
   const {
     snapPoints,
     activeSnapPoint,
     activeSnapPointOffset
   } = useDrawerSnapPoints();
-  useDialogPortalContext();
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
+  const swiping = swipe?.swiping ?? false;
+  const swipeStrength = swipe?.swipeStrength ?? null;
   const [popupHeight, setPopupHeight] = React__namespace.useState(0);
   const popupHeightRef = React__namespace.useRef(0);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React__namespace.useEffect(() => {
+      if (swipe) {
+        return;
+      }
+      const ownerStackMessage = useButton.SafeReact.captureOwnerStack?.() || '';
+      const message = '<Drawer.Popup> expected to be rendered within <Drawer.Viewport>. Omitting the ' + 'viewport disables drawer swipe handling and touch scroll locking. Wrap ' + '<Drawer.Popup> in <Drawer.Viewport>.';
+      useButton.error(`${message}${ownerStackMessage}`);
+    }, [swipe]);
+  }
   const measureHeight = useButton.useStableCallback(() => {
-    const popupElement = store.context.popupRef.current;
+    const popupElement = popupRef.current;
     if (!popupElement) {
       return;
     }
@@ -1286,7 +1055,7 @@ const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopu
       onPopupHeightChange(0);
       return undefined;
     }
-    const popupElement = store.context.popupRef.current;
+    const popupElement = popupRef.current;
     if (!popupElement) {
       return undefined;
     }
@@ -1300,9 +1069,8 @@ const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopu
     return () => {
       resizeObserver.disconnect();
     };
-  }, [measureHeight, mounted, nestedDrawerOpen, onPopupHeightChange, store.context.popupRef]);
+  }, [measureHeight, mounted, nestedDrawerOpen, onPopupHeightChange, popupRef]);
   useButton.useIsoLayoutEffect(() => {
-    const popupRef = store.context.popupRef;
     const syncNestedSwipeProgress = () => {
       const popupElement = popupRef.current;
       if (!popupElement) {
@@ -1317,14 +1085,14 @@ const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopu
     };
     syncNestedSwipeProgress();
     const unsubscribe = nestedSwipeProgressStore.subscribe(syncNestedSwipeProgress);
+    const popupElement = popupRef.current;
     return () => {
       unsubscribe();
-      const popupElement = popupRef.current;
       if (popupElement) {
         popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
       }
     };
-  }, [nestedSwipeProgressStore, store.context.popupRef]);
+  }, [nestedSwipeProgressStore, popupRef]);
   React__namespace.useEffect(() => {
     if (!open) {
       return undefined;
@@ -1346,14 +1114,15 @@ const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopu
   }, [notifyParentHasNestedDrawer, open, transitionStatus]);
   useButton.useOpenChangeComplete({
     open,
-    ref: store.context.popupRef,
+    ref: popupRef,
     onComplete() {
       if (open) {
         store.context.onOpenChangeComplete?.(true);
       }
     }
   });
-  const resolvedInitialFocus = initialFocus === undefined ? store.context.popupRef : initialFocus;
+  const resolvedInitialFocus = initialFocus === undefined ? popupRef : initialFocus;
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     open,
     nested,
@@ -1378,16 +1147,11 @@ const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopu
   if (shouldApplySnapPoints && swipeDirection === 'down') {
     const baseOffset = activeSnapPointOffset ?? 0;
     const movementValue = Number.parseFloat(String(dragStyles[DrawerPopupCssVars.swipeMovementY] ?? 0));
-    const nextOffset = Number.isFinite(movementValue) ? baseOffset + movementValue : baseOffset;
-    const shouldDamp = nextOffset < 0;
-    if (swiping && shouldDamp && Number.isFinite(movementValue)) {
-      const overshoot = Math.abs(nextOffset);
-      const dampedOffset = -Math.sqrt(overshoot);
-      const dampedMovement = dampedOffset - baseOffset;
+    if (swiping && Number.isFinite(movementValue)) {
       dragStyles = {
         ...dragStyles,
         transform: undefined,
-        [DrawerPopupCssVars.swipeMovementY]: `${dampedMovement}px`
+        [DrawerPopupCssVars.swipeMovementY]: `${getSnapPointSwipeMovement(baseOffset, movementValue)}px`
       };
     } else {
       dragStyles = {
@@ -1399,30 +1163,31 @@ const DrawerPopup = /*#__PURE__*/React__namespace.forwardRef(function DrawerPopu
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
     props: [rootPopupProps, {
+      id: popupId,
       'aria-labelledby': titleElementId,
       'aria-describedby': descriptionElementId,
       role,
-      tabIndex: -1,
+      ...useScrollLock.FOCUSABLE_POPUP_PROPS,
       hidden: !mounted,
       onKeyDown(event) {
-        if (CSPContext.COMPOSITE_KEYS.has(event.key)) {
+        if (scrollEdges.COMPOSITE_KEYS.has(event.key)) {
           event.stopPropagation();
         }
       },
       style: {
         ...dragStyles,
         [DrawerBackdropCssVars.swipeProgress]: '0',
-        [DrawerPopupCssVars.nestedDrawers]: nestedOpenDialogCount,
+        [DrawerPopupCssVars.nestedDrawers]: nestedOpenDrawerCount,
         [DrawerPopupCssVars.height]: popupHeightCssVarValue,
         [DrawerPopupCssVars.snapPointOffset]: typeof snapPointOffsetValue === 'number' ? `${snapPointOffsetValue}px` : '0px',
         [DrawerPopupCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined,
         [DrawerPopupCssVars.swipeStrength]: typeof swipeStrength === 'number' && Number.isFinite(swipeStrength) && swipeStrength > 0 ? `${swipeStrength}` : '1'
       }
     }, elementProps],
-    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    ref: [forwardedRef, popupRef, setPopupElement],
     stateAttributesMapping
   });
-  return /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingFocusManager, {
+  return /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingFocusManager, {
     context: floatingRootContext,
     openInteractionType: openMethod,
     disabled: !mounted,
@@ -1470,9 +1235,8 @@ function DrawerRoot(props) {
     snapPoints,
     snapPoint: snapPointProp,
     defaultSnapPoint,
-    onSnapPointChange: onSnapPointChangeProp
+    onSnapPointChange
   } = props;
-  const onSnapPointChange = useButton.useStableCallback(onSnapPointChangeProp);
   const parentDrawerRootContext = useDrawerRootContext(true);
   const notifyParentSwipeProgressChange = parentDrawerRootContext?.onNestedSwipeProgressChange;
   const notifyParentFrontmostHeight = parentDrawerRootContext?.onNestedFrontmostHeightChange;
@@ -1577,18 +1341,21 @@ function DrawerRoot(props) {
   });
   return /*#__PURE__*/jsxRuntime.jsx(DrawerRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/jsxRuntime.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: /*#__PURE__*/jsxRuntime.jsx(IsDrawerContext.Provider, {
+      value: true,
+      children: /*#__PURE__*/jsxRuntime.jsx(DialogRoot, {
+        open: openProp,
+        defaultOpen: defaultOpen,
+        onOpenChange: handleOpenChange,
+        onOpenChangeComplete: onOpenChangeComplete,
+        disablePointerDismissal: disablePointerDismissal,
+        modal: modal,
+        actionsRef: actionsRef,
+        handle: handle,
+        triggerId: triggerIdProp,
+        defaultTriggerId: defaultTriggerIdProp,
+        children: resolvedChildren
+      })
     })
   });
 }
@@ -1618,10 +1385,12 @@ function createNestedSwipeProgressStore() {
 function DrawerProviderReporter() {
   const drawerId = useButton.useId();
   const providerContext = useDrawerProviderContext();
-  const dialogRootContext = useDialogRootContext(false);
-  const open = dialogRootContext.store.useState('open');
-  const nestedOpenDialogCount = dialogRootContext.store.useState('nestedOpenDialogCount');
-  const popupElement = dialogRootContext.store.useState('popupElement');
+  const {
+    store
+  } = useDialogRootContext(false);
+  const open = store.useState('open');
+  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const popupElement = store.useState('popupElement');
   const isTopmost = nestedOpenDialogCount === 0;
   React__namespace.useEffect(() => {
     if (!providerContext || drawerId == null) {
@@ -1640,7 +1409,7 @@ function DrawerProviderReporter() {
   React__namespace.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`.
-    if (!open || !isTopmost || !useButton.isAndroid) {
+    if (!open || !isTopmost || !useButton.android) {
       return undefined;
     }
     const win = floatingUi_utils_dom.getWindow(popupElement);
@@ -1649,18 +1418,18 @@ function DrawerProviderReporter() {
       return undefined;
     }
     function handleCloseWatcher(event) {
-      if (!dialogRootContext.store.select('open')) {
+      if (!store.select('open')) {
         return;
       }
-      dialogRootContext.store.setOpen(false, useButton.createChangeEventDetails(useButton.closeWatcher, event));
+      store.setOpen(false, useButton.createChangeEventDetails(useButton.closeWatcher, event));
     }
     const closeWatcher = new CloseWatcherCtor();
-    closeWatcher.addEventListener('close', handleCloseWatcher);
+    const unsubscribe = useButton.addEventListener(closeWatcher, 'close', handleCloseWatcher);
     return () => {
-      closeWatcher.removeEventListener('close', handleCloseWatcher);
+      unsubscribe();
       closeWatcher.destroy();
     };
-  }, [dialogRootContext.store, isTopmost, open, popupElement]);
+  }, [store, isTopmost, open, popupElement]);
   return null;
 }
 
@@ -1839,16 +1608,22 @@ const ScrollAreaRoot = /*#__PURE__*/React__namespace.forwardRef(function ScrollA
     render,
     className,
     overflowEdgeThreshold: overflowEdgeThresholdProp,
+    style,
     ...elementProps
   } = componentProps;
-  const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
+  const {
+    xStart,
+    xEnd,
+    yStart,
+    yEnd
+  } = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
   const rootId = useButton.useBaseUiId();
   const scrollYTimeout = useButton.useTimeout();
   const scrollXTimeout = useButton.useTimeout();
   const {
     nonce,
     disableStyleElements
-  } = CSPContext.useCSPContext();
+  } = scrollEdges.useCSPContext();
   const [hovering, setHovering] = React__namespace.useState(false);
   const [scrollingX, setScrollingX] = React__namespace.useState(false);
   const [scrollingY, setScrollingY] = React__namespace.useState(false);
@@ -1949,10 +1724,13 @@ const ScrollAreaRoot = /*#__PURE__*/React__namespace.forwardRef(function ScrollA
   });
   const handlePointerUp = useButton.useStableCallback(event => {
     thumbDraggingRef.current = false;
-    if (thumbYRef.current && currentOrientationRef.current === 'vertical') {
+
+    // `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 (thumbXRef.current && currentOrientationRef.current === 'horizontal') {
+    if (thumbXRef.current && currentOrientationRef.current === 'horizontal' && thumbXRef.current.hasPointerCapture(event.pointerId)) {
       thumbXRef.current.releasePointerCapture(event.pointerId);
     }
   });
@@ -2027,11 +1805,16 @@ const ScrollAreaRoot = /*#__PURE__*/React__namespace.forwardRef(function ScrollA
     overflowEdges,
     setOverflowEdges,
     viewportState: state,
-    overflowEdgeThreshold
-  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
+    overflowEdgeThreshold: {
+      xStart,
+      xEnd,
+      yStart,
+      yEnd
+    }
+  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, xStart, xEnd, yStart, yEnd]);
   return /*#__PURE__*/jsxRuntime.jsxs(ScrollAreaRootContext.Provider, {
     value: contextValue,
-    children: [!disableStyleElements && CSPContext.styleDisableScrollbar.getElement(nonce), element]
+    children: [!disableStyleElements && scrollEdges.styleDisableScrollbar.getElement(nonce), element]
   });
 });
 if (process.env.NODE_ENV !== "production") ScrollAreaRoot.displayName = "ScrollAreaRoot";
@@ -2063,27 +1846,6 @@ function useScrollAreaViewportContext() {
   return context;
 }
 
-/**
- * Executes a callback when an element becomes visible.
- */
-function onVisible(element, callback) {
-  if (typeof IntersectionObserver === 'undefined') {
-    return () => {};
-  }
-  const observer = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      if (entry.intersectionRatio > 0) {
-        callback();
-        observer.disconnect();
-      }
-    });
-  });
-  observer.observe(element);
-  return () => {
-    observer.disconnect();
-  };
-}
-
 let ScrollAreaViewportCssVars = /*#__PURE__*/function (ScrollAreaViewportCssVars) {
   /**
    * The distance from the horizontal start edge in pixels.
@@ -2108,30 +1870,7 @@ let ScrollAreaViewportCssVars = /*#__PURE__*/function (ScrollAreaViewportCssVars
   return ScrollAreaViewportCssVars;
 }({});
 
-const SCROLL_EDGE_TOLERANCE_PX = 1;
-function normalizeScrollOffset(value, max) {
-  if (max <= 0) {
-    return 0;
-  }
-  const clamped = clamp.clamp(value, 0, max);
-  const startDistance = clamped;
-  const endDistance = max - clamped;
-  const withinStartTolerance = startDistance <= SCROLL_EDGE_TOLERANCE_PX;
-  const withinEndTolerance = endDistance <= SCROLL_EDGE_TOLERANCE_PX;
-  if (withinStartTolerance && withinEndTolerance) {
-    return startDistance <= endDistance ? 0 : max;
-  }
-  if (withinStartTolerance) {
-    return 0;
-  }
-  if (withinEndTolerance) {
-    return max;
-  }
-  return clamped;
-}
-
 let scrollAreaOverflowVarsRegistered = false;
-const HAS_RESIZE_OBSERVER = typeof ResizeObserver !== 'undefined';
 
 /**
  * Removes inheritance of the scroll area overflow CSS variables, which
@@ -2145,7 +1884,7 @@ function removeCSSVariableInheritance() {
   if (scrollAreaOverflowVarsRegistered ||
   // When `inherits: false`, specifying `inherit` on child elements doesn't work
   // in Safari. To let CSS features work correctly, this optimization must be skipped.
-  useButton.isWebKit) {
+  useScrollLock.webkit) {
     return;
   }
   if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
@@ -2175,6 +1914,7 @@ const ScrollAreaViewport = /*#__PURE__*/React__namespace.forwardRef(function Scr
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -2199,7 +1939,7 @@ const ScrollAreaViewport = /*#__PURE__*/React__namespace.forwardRef(function Scr
     scrollingX,
     scrollingY
   } = useScrollAreaRootContext();
-  const direction = InternalBackdrop.useDirection();
+  const direction = useScrollLock.useDirection();
   const programmaticScrollRef = React__namespace.useRef(true);
   const lastMeasuredViewportMetricsRef = React__namespace.useRef([NaN, NaN, NaN, NaN]);
   const scrollEndTimeout = useButton.useTimeout();
@@ -2248,11 +1988,11 @@ const ScrollAreaViewport = /*#__PURE__*/React__namespace.forwardRef(function Scr
       } else {
         rawScrollLeftFromStart = clamp.clamp(scrollLeft, 0, maxScrollLeft);
       }
-      scrollLeftFromStart = normalizeScrollOffset(rawScrollLeftFromStart, maxScrollLeft);
+      scrollLeftFromStart = scrollEdges.normalizeScrollOffset(rawScrollLeftFromStart, maxScrollLeft);
       scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart;
     }
     const rawScrollTopFromStart = !scrollbarYHidden ? clamp.clamp(scrollTop, 0, maxScrollTop) : 0;
-    const scrollTopFromStart = !scrollbarYHidden ? normalizeScrollOffset(rawScrollTopFromStart, maxScrollTop) : 0;
+    const scrollTopFromStart = !scrollbarYHidden ? scrollEdges.normalizeScrollOffset(rawScrollTopFromStart, maxScrollTop) : 0;
     const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0;
     const nextWidth = scrollbarXHidden ? 0 : viewportWidth;
     const nextHeight = scrollbarYHidden ? 0 : viewportHeight;
@@ -2344,20 +2084,15 @@ const ScrollAreaViewport = /*#__PURE__*/React__namespace.forwardRef(function Scr
   });
   useButton.useIsoLayoutEffect(() => {
     if (!viewportRef.current) {
-      return undefined;
+      return;
     }
     removeCSSVariableInheritance();
-    if (HAS_RESIZE_OBSERVER) {
-      return undefined;
-    }
-    return onVisible(viewportRef.current, () => {
-      computeThumbPosition();
-    });
-  }, [computeThumbPosition, viewportRef]);
+  }, [viewportRef]);
   useButton.useIsoLayoutEffect(() => {
-    // Wait for scrollbar and thumb refs after hidden-state toggles, and refresh math on direction flips.
+    // Wait for scrollbar and thumb refs after hidden-state toggles, refresh math on direction
+    // flips, and re-evaluate overflow edges when the threshold changes.
     queueMicrotask(computeThumbPosition);
-  }, [computeThumbPosition, hiddenState, direction]);
+  }, [computeThumbPosition, hiddenState, direction, overflowEdgeThreshold.xStart, overflowEdgeThreshold.xEnd, overflowEdgeThreshold.yStart, overflowEdgeThreshold.yEnd]);
   useButton.useIsoLayoutEffect(() => {
     // `onMouseEnter` doesn't fire upon load, so we need to check if the viewport is already
     // being hovered.
@@ -2365,13 +2100,13 @@ const ScrollAreaViewport = /*#__PURE__*/React__namespace.forwardRef(function Scr
       setHovering(true);
     }
   }, [viewportRef, setHovering]);
-  React__namespace.useEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     const viewport = viewportRef.current;
-    if (!HAS_RESIZE_OBSERVER || !viewport) {
+    if (typeof ResizeObserver === 'undefined' || !viewport) {
       return undefined;
     }
     let hasInitialized = false;
-    const ro = new ResizeObserver(() => {
+    const resizeObserver = new ResizeObserver(() => {
       // Avoid duplicate mount-time recompute when observer data matches what the mount
       // scheduling pass already measured. If dimensions changed before the first observer
       // delivery, keep the recompute so overflow transitions stay in sync.
@@ -2384,15 +2119,10 @@ const ScrollAreaViewport = /*#__PURE__*/React__namespace.forwardRef(function Scr
       }
       computeThumbPosition();
     });
-    ro.observe(viewport);
+    resizeObserver.observe(viewport);
 
-    // If there are animations in the viewport, wait for them to finish and then recompute the thumb position.
-    // This is necessary when the viewport contains a Dialog that is animating its popup on open
-    // and the popup is using a transform for the animation, which affects the size of the viewport.
-    // Without this, the thumb position will be incorrect until scrolling (i.e. if the scrollbar shows
-    // on hover, the thumb has an incorrect size).
-    // We assume the user is using `onOpenChangeComplete` to hide the scrollbar
-    // until animations complete because otherwise the scrollbar would show the thumb resizing mid-animation.
+    // Wait for subtree animations to finish, then recompute thumb geometry that
+    // may have been affected by transform-based animations.
     waitForAnimationsTimeout.start(0, () => {
       const animations = viewport.getAnimations({
         subtree: true
@@ -2403,7 +2133,7 @@ const ScrollAreaViewport = /*#__PURE__*/React__namespace.forwardRef(function Scr
       Promise.allSettled(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
     });
     return () => {
-      ro.disconnect();
+      resizeObserver.disconnect();
       waitForAnimationsTimeout.clear();
     };
   }, [computeThumbPosition, viewportRef, waitForAnimationsTimeout]);
@@ -2418,7 +2148,7 @@ const ScrollAreaViewport = /*#__PURE__*/React__namespace.forwardRef(function Scr
     // https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable/
     // Keep non-scrollable viewports out of tab order.
     tabIndex: hiddenState.x && hiddenState.y ? -1 : 0,
-    className: CSPContext.styleDisableScrollbar.className,
+    className: scrollEdges.styleDisableScrollbar.className,
     style: {
       overflow: 'scroll'
     },
@@ -2512,6 +2242,7 @@ exports.ScrollAreaRootCssVars = ScrollAreaRootCssVars;
 exports.ScrollAreaViewport = ScrollAreaViewport;
 exports.createInitialPopupStoreState = createInitialPopupStoreState;
 exports.getOffset = getOffset;
+exports.getSnapPointSwipeMovement = getSnapPointSwipeMovement;
 exports.popupStoreSelectors = popupStoreSelectors;
 exports.scrollAreaStateAttributesMapping = scrollAreaStateAttributesMapping;
 exports.useDialogPortalContext = useDialogPortalContext;
@@ -2519,11 +2250,5 @@ exports.useDialogRootContext = useDialogRootContext;
 exports.useDrawerProviderContext = useDrawerProviderContext;
 exports.useDrawerRootContext = useDrawerRootContext;
 exports.useDrawerSnapPoints = useDrawerSnapPoints;
-exports.useImplicitActiveTrigger = useImplicitActiveTrigger;
-exports.useOpenStateTransitions = useOpenStateTransitions;
-exports.useRole = useRole;
 exports.useScrollAreaRootContext = useScrollAreaRootContext;
 exports.useScrollAreaViewportContext = useScrollAreaViewportContext;
-exports.useSyncedFloatingRootContext = useSyncedFloatingRootContext;
-exports.useTriggerDataForwarding = useTriggerDataForwarding;
-exports.useTriggerRegistration = useTriggerRegistration;