@jobber/components 8.23.0 → 8.23.1

package/dist/ScrollAreaViewport-es.js

@@ -1,176 +1,22 @@
 import * as React from 'react';
-import { E as EMPTY_OBJECT, a as useRefWithInit, f as formatErrorMessage, u as useRenderElement } from './useRenderElement-es.js';
-import { a as FloatingRootStore, P as PopupTriggerMap, o as createSelector, u as useFloatingParentNodeId, y as FloatingPortal, I as InternalBackdrop, A as inertValue, q as useOpenInteractionType, t as useDismiss, z as useScrollLock, v as useInteractions, R as ReactStore, w as useOnFirstRender, s as useClick, E as CLICK_TRIGGER_IDENTIFIER, G as triggerOpenStateMapping, p as popupStateMapping, C as CommonPopupDataAttributes, F as FloatingFocusManager, n as useDirection } from './InternalBackdrop-es.js';
-import { b as useStableCallback, a as useIsoLayoutEffect, k as useTransitionStatus, f as useOpenChangeComplete, l as useId, m as getFloatingFocusElement, d as createChangeEventDetails, i as imperativeAction, g as getTarget, r as contains, u as useBaseUiId, c as useButton, t as transitionStatusMapping, o as ownerDocument, E as useControlled, G as none, _ as isAndroid, $ as closeWatcher, h as useTimeout, X as isWebKit } from './useButton-es.js';
-import { C as COMPOSITE_KEYS, u as useCSPContext, s as styleDisableScrollbar } from './CSPContext-es.js';
+import { E as EMPTY_OBJECT, f as formatErrorMessage, u as useRenderElement } from './useRenderElement-es.js';
+import { b as FloatingRootStore, P as PopupTriggerMap, t as createSelector, E as FloatingPortal, I as InternalBackdrop, G as inertValue, K as usePopupRootSync, L as useImplicitActiveTrigger, M as useOpenStateTransitions, y as useDismiss, s as useScrollLock, N as usePopupInteractionProps, R as ReactStore, O as setPopupOpenState, Q as usePopupStore, z as useOnFirstRender, T as useTriggerDataForwarding, x as useClick, U as useOpenMethodTriggerProps, V as CLICK_TRIGGER_IDENTIFIER, W as triggerOpenStateMapping, p as popupStateMapping, C as CommonPopupDataAttributes, F as FOCUSABLE_POPUP_PROPS, a as FloatingFocusManager, r as useDirection, J as webkit } from './useScrollLock-es.js';
+import { d as createChangeEventDetails, i as imperativeAction, g as getTarget, q as contains, u as useBaseUiId, c as useButton, t as transitionStatusMapping, b as useStableCallback, o as ownerDocument, a as useIsoLayoutEffect, S as SafeReact, j as error, f as useOpenChangeComplete, z as useControlled, C as none, l as useId, W as android, B as addEventListener, X as closeWatcher, h as useTimeout } from './useButton-es.js';
+import { C as COMPOSITE_KEYS, u as useCSPContext, s as styleDisableScrollbar, n as normalizeScrollOffset } from './scrollEdges-es.js';
 import { c as clamp } from './clamp-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { b as isElement, o as getWindow } from './floating-ui.utils.dom-es.js';
-
-/**
- * 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.useRef(null);
-  const registeredElementRef = React.useRef(null);
-  return React.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 = 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
-      });
-    }
-  });
-  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');
-  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
-  } = useTransitionStatus(open);
-  store.useSyncedValues({
-    mounted,
-    transitionStatus
-  });
-  const forceUnmount = useStableCallback(() => {
-    setMounted(false);
-    store.update({
-      activeTriggerId: null,
-      activeTriggerElement: null,
-      mounted: false
-    });
-    onUnmount?.();
-    store.context.onOpenChangeComplete?.(false);
-  });
-  const preventUnmountingOnClose = store.useState('preventUnmountingOnClose');
-  useOpenChangeComplete({
-    enabled: !preventUnmountingOnClose,
-    open,
-    ref: store.context.popupRef,
-    onComplete() {
-      if (!open) {
-        forceUnmount();
-      }
-    }
-  });
-  return {
-    forceUnmount,
-    transitionStatus
-  };
-}
+import { o as getWindow } from './floating-ui.utils.dom-es.js';
 
 function getEmptyRootContext() {
   return new FloatingRootStore({
     open: false,
+    transitionStatus: undefined,
     floatingElement: null,
     referenceElement: null,
     triggerElements: new PopupTriggerMap(),
-    floatingId: '',
+    floatingId: undefined,
+    syncOnly: false,
     nested: false,
-    noEmit: false,
     onOpenChange: undefined
   });
 }
@@ -184,8 +30,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,
@@ -198,16 +46,45 @@ function createInitialPopupStoreState() {
     popupProps: EMPTY_OBJECT
   };
 }
+function createPopupFloatingRootContext(triggerElements, floatingId, nested = false) {
+  return new FloatingRootStore({
+    open: false,
+    transitionStatus: undefined,
+    floatingElement: null,
+    referenceElement: null,
+    triggerElements,
+    floatingId,
+    syncOnly: true,
+    nested,
+    onOpenChange: undefined
+  });
+}
 const activeTriggerIdSelector = createSelector(state => state.triggerIdProp ?? state.activeTriggerId);
+const openSelector = createSelector(state => state.openProp ?? state.open);
+const popupIdSelector = 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: createSelector(state => state.openProp ?? state.open),
+  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),
   activeTriggerId: activeTriggerIdSelector,
   activeTriggerElement: createSelector(state => state.mounted ? state.activeTriggerElement : null),
+  popupId: popupIdSelector,
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
@@ -215,175 +92,23 @@ const popupStoreSelectors = {
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.open),
+  isOpenedByTrigger: createSelector((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),
+  /**
+   * 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)
 };
 
-/**
- * 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 = useId();
-  const nested = 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 = useRefWithInit(() => new FloatingRootStore({
-    open,
-    referenceElement,
-    floatingElement,
-    triggerElements,
-    onOpenChange,
-    floatingId,
-    nested,
-    noEmit
-  })).current;
-  useIsoLayoutEffect(() => {
-    const valuesToSync = {
-      open,
-      floatingId,
-      referenceElement,
-      floatingElement
-    };
-    if (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 = useId();
-  const referenceId = domReference?.id || defaultReferenceId;
-  const floatingId = React.useMemo(() => getFloatingFocusElement(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
-  const ariaRole = componentRoleToAriaRoleMap.get(role) ?? role;
-  const parentId = useFloatingParentNodeId();
-  const isNested = parentId != null;
-  const trigger = React.useMemo(() => {
-    if (ariaRole === 'tooltip' || role === 'label') {
-      return 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.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.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.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.useMemo(() => ({
-    reference,
-    floating,
-    item,
-    trigger
-  }), [reference, floating, trigger, item]);
-}
-
+const IsDrawerContext = /*#__PURE__*/React.createContext(false);
+if (process.env.NODE_ENV !== "production") IsDrawerContext.displayName = "IsDrawerContext";
 const DialogRootContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DialogRootContext.displayName = "DialogRootContext";
 function useDialogRootContext(optional) {
@@ -436,44 +161,35 @@ 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
-  } = useOpenInteractionType(open);
+  usePopupRootSync(store, open);
   useImplicitActiveTrigger(store);
   const {
     forceUnmount
   } = useOpenStateTransitions(open, store);
-  const createDialogEventDetails = useStableCallback(reason => {
-    const details = createChangeEventDetails(reason);
-    details.preventUnmountOnClose = () => {
-      store.set('preventUnmountingOnClose', true);
-    };
-    return details;
-  });
   const handleImperativeClose = React.useCallback(() => {
-    store.setOpen(false, createDialogEventDetails(imperativeAction));
-  }, [store, createDialogEventDetails]);
+    store.setOpen(false, createChangeEventDetails(imperativeAction));
+  }, [store]);
   React.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.useState(0);
+  const [ownNestedOpenDrawers, setOwnNestedOpenDrawers] = React.useState(0);
   const isTopmost = ownNestedOpenDialogs === 0;
-  const role = useRole(floatingRootContext);
   const dismiss = useDismiss(floatingRootContext, {
     outsidePressEvent() {
       if (store.context.internalBackdropRef.current || store.context.backdropRef.current) {
@@ -501,12 +217,11 @@ function useDialogRoot(params) {
       }
       const target = 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 || 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 || contains(target, popupElement) && !target?.hasAttribute('data-base-ui-portal') : true;
         }
         return true;
       }
@@ -515,24 +230,21 @@ function useDialogRoot(params) {
     escapeKey: isTopmost
   });
   useScrollLock(open && modal === true, popupElement);
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getTriggerProps
-  } = useInteractions([role, dismiss]);
 
-  // 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.useEffect(() => {
     if (parentContext?.onNestedDialogOpen && open) {
-      parentContext.onNestedDialogOpen(ownNestedOpenDialogs);
+      parentContext.onNestedDialogOpen(ownNestedOpenDialogs + 1, ownNestedOpenDrawers + (isDrawer ? 1 : 0));
     }
     if (parentContext?.onNestedDialogClose && !open) {
       parentContext.onNestedDialogClose();
@@ -542,18 +254,20 @@ function useDialogRoot(params) {
         parentContext.onNestedDialogClose();
       }
     };
-  }, [open, parentContext, ownNestedOpenDialogs]);
-  const activeTriggerProps = React.useMemo(() => getReferenceProps(triggerProps), [getReferenceProps, triggerProps]);
-  const inactiveTriggerProps = React.useMemo(() => getTriggerProps(triggerProps), [getTriggerProps, triggerProps]);
-  const popupProps = React.useMemo(() => getFloatingProps(), [getFloatingProps]);
-  store.useSyncedValues({
-    openMethod,
+  }, [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,
-    floatingRootContext,
-    nestedOpenDialogCount: ownNestedOpenDialogs
+    nestedOpenDialogCount: ownNestedOpenDialogs,
+    nestedOpenDrawerCount: ownNestedOpenDrawers
   });
+  return null;
 }
 
 const selectors = {
@@ -561,6 +275,7 @@ const selectors = {
   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),
@@ -569,15 +284,18 @@ const selectors = {
   role: createSelector(state => state.role)
 };
 class DialogStore extends ReactStore {
-  constructor(initialState) {
-    super(createInitialState(initialState), {
+  constructor(initialState, floatingId, nested = false) {
+    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: new PopupTriggerMap(),
+      triggerElements,
       onOpenChange: undefined,
       onOpenChangeComplete: undefined
     }, selectors);
@@ -595,26 +313,20 @@ class DialogStore extends 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;
-    }
+    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;
+  }
 }
 function createInitialState(initialState = {}) {
   return {
@@ -628,82 +340,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 = 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
   useOnFirstRender(() => {
-    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
-      store.update({
-        open: true,
-        activeTriggerId: defaultTriggerIdProp
-      });
+    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.useMemo(() => ({
     store
   }), [store]);
-  return /*#__PURE__*/jsx(DialogRootContext.Provider, {
-    value: contextValue,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
+  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]
+    })
   });
 }
 
+/**
+ * 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);
+}
+
 /**
  * A button that opens the dialog.
  * Renders a `<button>` element.
@@ -714,6 +449,7 @@ const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigger(compo
   const {
     render,
     className,
+    style,
     disabled = false,
     nativeButton = true,
     id: idProp,
@@ -729,6 +465,7 @@ const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigger(compo
   const thisTriggerId = useBaseUiId(idProp);
   const floatingContext = store.useState('floatingRootContext');
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const popupId = store.useState('triggerPopupId', thisTriggerId);
   const triggerElementRef = React.useRef(null);
   const {
     registerTrigger,
@@ -746,7 +483,9 @@ const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigger(compo
   const click = useClick(floatingContext, {
     enabled: floatingContext != null
   });
-  const localInteractionProps = useInteractions([click]);
+  const interactionTypeProps = useOpenMethodTriggerProps(() => store.select('open'), interactionType => {
+    store.set('openMethod', interactionType);
+  });
   const state = {
     disabled,
     open: isOpenedByThisTrigger
@@ -755,9 +494,12 @@ const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigger(compo
   return useRenderElement('button', componentProps, {
     state,
     ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
-    props: [localInteractionProps.getReferenceProps(), rootTriggerProps, {
+    props: [click.reference, rootTriggerProps, interactionTypeProps, {
       [CLICK_TRIGGER_IDENTIFIER]: '',
-      id: thisTriggerId
+      id: thisTriggerId,
+      'aria-haspopup': 'dialog',
+      'aria-expanded': isOpenedByThisTrigger,
+      'aria-controls': popupId
     }, elementProps, getButtonProps],
     stateAttributesMapping: triggerOpenStateMapping
   });
@@ -827,6 +569,7 @@ const DrawerBackdrop = /*#__PURE__*/React.forwardRef(function DrawerBackdrop(com
   const {
     render,
     className,
+    style,
     forceRender = false,
     ...elementProps
   } = componentProps;
@@ -873,6 +616,7 @@ const DrawerContent = /*#__PURE__*/React.forwardRef(function DrawerContent(compo
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   useDialogRootContext();
@@ -947,6 +691,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;
@@ -1100,7 +855,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.
  */
@@ -1188,15 +942,17 @@ const stateAttributesMapping = {
  */
 const DrawerPopup = /*#__PURE__*/React.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,
@@ -1214,26 +970,39 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
   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.useState(0);
   const popupHeightRef = React.useRef(0);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (swipe) {
+        return;
+      }
+      const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+      const message = '<Drawer.Popup> expected to be rendered within <Drawer.Viewport>. Omitting the ' + 'viewport disables drawer swipe handling and touch scroll locking. Wrap ' + '<Drawer.Popup> in <Drawer.Viewport>.';
+      error(`${message}${ownerStackMessage}`);
+    }, [swipe]);
+  }
   const measureHeight = useStableCallback(() => {
-    const popupElement = store.context.popupRef.current;
+    const popupElement = popupRef.current;
     if (!popupElement) {
       return;
     }
@@ -1265,7 +1034,7 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
       onPopupHeightChange(0);
       return undefined;
     }
-    const popupElement = store.context.popupRef.current;
+    const popupElement = popupRef.current;
     if (!popupElement) {
       return undefined;
     }
@@ -1279,9 +1048,8 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
     return () => {
       resizeObserver.disconnect();
     };
-  }, [measureHeight, mounted, nestedDrawerOpen, onPopupHeightChange, store.context.popupRef]);
+  }, [measureHeight, mounted, nestedDrawerOpen, onPopupHeightChange, popupRef]);
   useIsoLayoutEffect(() => {
-    const popupRef = store.context.popupRef;
     const syncNestedSwipeProgress = () => {
       const popupElement = popupRef.current;
       if (!popupElement) {
@@ -1296,14 +1064,14 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
     };
     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.useEffect(() => {
     if (!open) {
       return undefined;
@@ -1325,14 +1093,15 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
   }, [notifyParentHasNestedDrawer, open, transitionStatus]);
   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,
@@ -1357,16 +1126,11 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
   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 = {
@@ -1378,10 +1142,11 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
   const element = useRenderElement('div', componentProps, {
     state,
     props: [rootPopupProps, {
+      id: popupId,
       'aria-labelledby': titleElementId,
       'aria-describedby': descriptionElementId,
       role,
-      tabIndex: -1,
+      ...FOCUSABLE_POPUP_PROPS,
       hidden: !mounted,
       onKeyDown(event) {
         if (COMPOSITE_KEYS.has(event.key)) {
@@ -1391,14 +1156,14 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
       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__*/jsx(FloatingFocusManager, {
@@ -1449,9 +1214,8 @@ function DrawerRoot(props) {
     snapPoints,
     snapPoint: snapPointProp,
     defaultSnapPoint,
-    onSnapPointChange: onSnapPointChangeProp
+    onSnapPointChange
   } = props;
-  const onSnapPointChange = useStableCallback(onSnapPointChangeProp);
   const parentDrawerRootContext = useDrawerRootContext(true);
   const notifyParentSwipeProgressChange = parentDrawerRootContext?.onNestedSwipeProgressChange;
   const notifyParentFrontmostHeight = parentDrawerRootContext?.onNestedFrontmostHeightChange;
@@ -1556,18 +1320,21 @@ function DrawerRoot(props) {
   });
   return /*#__PURE__*/jsx(DrawerRootContext.Provider, {
     value: contextValue,
-    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: /*#__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
+      })
     })
   });
 }
@@ -1597,10 +1364,12 @@ function createNestedSwipeProgressStore() {
 function DrawerProviderReporter() {
   const drawerId = 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.useEffect(() => {
     if (!providerContext || drawerId == null) {
@@ -1619,7 +1388,7 @@ function DrawerProviderReporter() {
   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`.
-    if (!open || !isTopmost || !isAndroid) {
+    if (!open || !isTopmost || !android) {
       return undefined;
     }
     const win = getWindow(popupElement);
@@ -1628,18 +1397,18 @@ function DrawerProviderReporter() {
       return undefined;
     }
     function handleCloseWatcher(event) {
-      if (!dialogRootContext.store.select('open')) {
+      if (!store.select('open')) {
         return;
       }
-      dialogRootContext.store.setOpen(false, createChangeEventDetails(closeWatcher, event));
+      store.setOpen(false, createChangeEventDetails(closeWatcher, event));
     }
     const closeWatcher$1 = new CloseWatcherCtor();
-    closeWatcher$1.addEventListener('close', handleCloseWatcher);
+    const unsubscribe = addEventListener(closeWatcher$1, 'close', handleCloseWatcher);
     return () => {
-      closeWatcher$1.removeEventListener('close', handleCloseWatcher);
+      unsubscribe();
       closeWatcher$1.destroy();
     };
-  }, [dialogRootContext.store, isTopmost, open, popupElement]);
+  }, [store, isTopmost, open, popupElement]);
   return null;
 }
 
@@ -1818,9 +1587,15 @@ const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaRoot(com
     render,
     className,
     overflowEdgeThreshold: overflowEdgeThresholdProp,
+    style,
     ...elementProps
   } = componentProps;
-  const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
+  const {
+    xStart,
+    xEnd,
+    yStart,
+    yEnd
+  } = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
   const rootId = useBaseUiId();
   const scrollYTimeout = useTimeout();
   const scrollXTimeout = useTimeout();
@@ -1928,10 +1703,13 @@ const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaRoot(com
   });
   const handlePointerUp = 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);
     }
   });
@@ -2006,8 +1784,13 @@ const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaRoot(com
     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__*/jsxs(ScrollAreaRootContext.Provider, {
     value: contextValue,
     children: [!disableStyleElements && styleDisableScrollbar.getElement(nonce), element]
@@ -2042,27 +1825,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.
@@ -2087,30 +1849,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(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
@@ -2124,7 +1863,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.
-  isWebKit) {
+  webkit) {
     return;
   }
   if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
@@ -2154,6 +1893,7 @@ const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollAreaView
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -2323,20 +2063,15 @@ const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollAreaView
   });
   useIsoLayoutEffect(() => {
     if (!viewportRef.current) {
-      return undefined;
+      return;
     }
     removeCSSVariableInheritance();
-    if (HAS_RESIZE_OBSERVER) {
-      return undefined;
-    }
-    return onVisible(viewportRef.current, () => {
-      computeThumbPosition();
-    });
-  }, [computeThumbPosition, viewportRef]);
+  }, [viewportRef]);
   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]);
   useIsoLayoutEffect(() => {
     // `onMouseEnter` doesn't fire upon load, so we need to check if the viewport is already
     // being hovered.
@@ -2344,13 +2079,13 @@ const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollAreaView
       setHovering(true);
     }
   }, [viewportRef, setHovering]);
-  React.useEffect(() => {
+  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.
@@ -2363,15 +2098,10 @@ const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollAreaView
       }
       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
@@ -2382,7 +2112,7 @@ const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollAreaView
       Promise.allSettled(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
     });
     return () => {
-      ro.disconnect();
+      resizeObserver.disconnect();
       waitForAnimationsTimeout.clear();
     };
   }, [computeThumbPosition, viewportRef, waitForAnimationsTimeout]);
@@ -2470,4 +2200,4 @@ function mergeHiddenState(prevState, nextState) {
   return nextState;
 }
 
-export { useDrawerSnapPoints as A, DrawerViewportContext as B, DRAWER_CONTENT_ATTRIBUTE as C, DrawerTrigger as D, useScrollAreaRootContext as E, getOffset as F, ScrollAreaRootCssVars as G, scrollAreaStateAttributesMapping as H, useScrollAreaViewportContext as I, ScrollAreaRoot as S, DrawerRoot as a, DrawerPortal as b, DrawerBackdrop as c, DrawerPopup as d, ScrollAreaViewport as e, DrawerContent as f, DialogRoot as g, DialogTrigger as h, DialogPortal as i, useDialogPortalContext as j, DialogStore as k, createInitialPopupStoreState as l, useImplicitActiveTrigger as m, useOpenStateTransitions as n, useSyncedFloatingRootContext as o, popupStoreSelectors as p, useRole as q, useTriggerDataForwarding as r, useTriggerRegistration as s, useDrawerProviderContext as t, useDialogRootContext as u, DrawerBackdropCssVars as v, DrawerPopupCssVars as w, DrawerProviderContext as x, useDrawerRootContext as y, DrawerPopupDataAttributes as z };
+export { ScrollAreaRootCssVars as A, scrollAreaStateAttributesMapping as B, useScrollAreaViewportContext as C, DrawerTrigger as D, ScrollAreaRoot as S, DrawerRoot as a, DrawerPortal as b, DrawerBackdrop as c, DrawerPopup as d, ScrollAreaViewport as e, DrawerContent as f, DialogRoot as g, DialogTrigger as h, DialogPortal as i, useDialogPortalContext as j, DialogStore as k, createInitialPopupStoreState as l, useDrawerProviderContext as m, DrawerBackdropCssVars as n, DrawerPopupCssVars as o, popupStoreSelectors as p, DrawerProviderContext as q, useDrawerRootContext as r, DrawerPopupDataAttributes as s, useDrawerSnapPoints as t, useDialogRootContext as u, getSnapPointSwipeMovement as v, DrawerViewportContext as w, DRAWER_CONTENT_ATTRIBUTE as x, useScrollAreaRootContext as y, getOffset as z };