@jobber/components 7.8.0 → 7.9.0

package/dist/DrawerRoot-es.js

@@ -1,90 +1,22 @@
 import * as React from 'react';
 import React__default from 'react';
-import { a as useRefWithInit, E as EMPTY_OBJECT, N as NOOP, u as useRenderElement, b as useMergedRefs, f as formatErrorMessage, i as isReactVersionAtLeast } from './useRenderElement-es.js';
+import { f as formatErrorMessage, u as useRenderElement, b as useRefWithInit, E as EMPTY_OBJECT, c as useMergedRefs, i as isReactVersionAtLeast, N as NOOP } from './useRenderElement-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { i as isShadowRoot, a as isHTMLElement, l as getComputedStyle$1, f as floor, t as tabbable, I as getWindow, N as isOverflowElement, d as getNodeName, c as isNode, e as isTabbable, h as focusable, m as isWebKit$1, b as isElement, j as isLastTraversableNode, k as getParentNode } from './index.esm-es.js';
+import { i as isShadowRoot, b as isElement, a as isHTMLElement, k as getComputedStyle$1, f as floor, t as tabbable, g as getNodeName, c as isNode, I as getWindow, d as isTabbable, e as focusable, m as isWebKit$1, h as isLastTraversableNode, j as getParentNode, N as isOverflowElement } from './index.esm-es.js';
 import * as ReactDOM from 'react-dom';
-import { s as shimExports } from './index-es.js';
 
-function useControlled({
-  controlled,
-  default: defaultProp,
-  name,
-  state = 'value'
-}) {
-  // isControlled is ignored in the hook dependency lists as it should never change.
-  const {
-    current: isControlled
-  } = React.useRef(controlled !== undefined);
-  const [valueState, setValue] = React.useState(defaultProp);
-  const value = isControlled ? controlled : valueState;
-  if (process.env.NODE_ENV !== 'production') {
-    React.useEffect(() => {
-      if (isControlled !== (controlled !== undefined)) {
-        console.error([`Base UI: A component is changing the ${isControlled ? '' : 'un'}controlled ${state} state of ${name} to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${name} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
-      }
-    }, [state, name, controlled]);
-    const {
-      current: defaultValue
-    } = React.useRef(defaultProp);
-    React.useEffect(() => {
-      // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is for more details.
-      if (!isControlled && JSON.stringify(defaultValue) !== JSON.stringify(defaultProp)) {
-        console.error([`Base UI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
-      }
-    }, [JSON.stringify(defaultProp)]);
-  }
-  const setValueIfUncontrolled = React.useCallback(newValue => {
-    if (!isControlled) {
-      setValue(newValue);
-    }
-  }, []);
-  return [value, setValueIfUncontrolled];
-}
-
-// https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
-const useInsertionEffect = React[`useInsertionEffect${Math.random().toFixed(1)}`.slice(0, -3)];
-const useSafeInsertionEffect =
-// React 17 doesn't have useInsertionEffect.
-useInsertionEffect &&
-// Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
-useInsertionEffect !== React.useLayoutEffect ? useInsertionEffect : fn => fn();
-/**
- * Stabilizes the function passed so it's always the same between renders.
- *
- * The function becomes non-reactive to any values it captures.
- * It can safely be passed as a dependency of `React.useMemo` and `React.useEffect` without re-triggering them if its captured values change.
- *
- * The function must only be called inside effects and event handlers, never during render (which throws an error).
- *
- * This hook is a more permissive version of React 19.2's `React.useEffectEvent` in that it can be passed through contexts and called in event handler props, not just effects.
- */
-function useStableCallback(callback) {
-  const stable = useRefWithInit(createStableCallback).current;
-  stable.next = callback;
-  useSafeInsertionEffect(stable.effect);
-  return stable.trampoline;
-}
-function createStableCallback() {
-  const stable = {
-    next: undefined,
-    callback: assertNotCalled,
-    trampoline: (...args) => stable.callback?.(...args),
-    effect: () => {
-      stable.callback = stable.next;
-    }
-  };
-  return stable;
-}
-function assertNotCalled() {
-  if (process.env.NODE_ENV !== 'production') {
-    throw /* minify-error-disabled */new Error('Base UI: Cannot call an event handler while rendering.');
+const DialogRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") DialogRootContext.displayName = "DialogRootContext";
+function useDialogRootContext(optional) {
+  const dialogRootContext = React.useContext(DialogRootContext);
+  if (optional === false && dialogRootContext === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>.' : formatErrorMessage(27));
   }
+  return dialogRootContext;
 }
 
-const noop = () => {};
-const useIsoLayoutEffect = typeof document !== 'undefined' ? React.useLayoutEffect : noop;
-
+const TYPEAHEAD_RESET_MS = 500;
+const PATIENT_CLICK_THRESHOLD = 500;
 const DISABLED_TRANSITIONS_STYLE = {
   style: {
     transition: 'none'
@@ -102,6 +34,14 @@ const DROPDOWN_COLLISION_AVOIDANCE = {
   fallbackAxisSide: 'none'
 };
 
+/**
+ * Used by regular popups that usually aren't scrollable and are allowed to
+ * freely flip to any axis of placement.
+ */
+const POPUP_COLLISION_AVOIDANCE = {
+  fallbackAxisSide: 'end'
+};
+
 /**
  * Special visually hidden styles for the aria-owns owner element to ensure owned element
  * accessibility in iOS/Safari/VoiceControl.
@@ -115,618 +55,691 @@ const ownerVisuallyHidden = {
   left: 0
 };
 
-const none = 'none';
-const triggerPress = 'trigger-press';
-const triggerHover = 'trigger-hover';
-const outsidePress = 'outside-press';
-const itemPress = 'item-press';
-const closePress = 'close-press';
-const clearPress = 'clear-press';
-const chipRemovePress = 'chip-remove-press';
-const incrementPress = 'increment-press';
-const decrementPress = 'decrement-press';
-const inputChange = 'input-change';
-const inputClear = 'input-clear';
-const inputBlur = 'input-blur';
-const inputPaste = 'input-paste';
-const inputPress = 'input-press';
-const focusOut = 'focus-out';
-const escapeKey = 'escape-key';
-const closeWatcher = 'close-watcher';
-const listNavigation = 'list-navigation';
-const keyboard = 'keyboard';
-const scrub = 'scrub';
-const imperativeAction = 'imperative-action';
-const swipe = 'swipe';
-
-/**
- * Maps a change `reason` string to the corresponding native event type.
- */
-
-/**
- * Details of custom change events emitted by Base UI components.
- */
-
-/**
- * Details of custom generic events emitted by Base UI components.
- */
-
-/**
- * Creates a Base UI event details object with the given reason and utilities
- * for preventing Base UI's internal event handling.
- */
-function createChangeEventDetails(reason, event, trigger, customProperties) {
-  let canceled = false;
-  let allowPropagation = false;
-  const custom = customProperties ?? EMPTY_OBJECT;
-  const details = {
-    reason,
-    event: event ?? new Event('base-ui'),
-    cancel() {
-      canceled = true;
-    },
-    allowPropagation() {
-      allowPropagation = true;
-    },
-    get isCanceled() {
-      return canceled;
-    },
-    get isPropagationAllowed() {
-      return allowPropagation;
-    },
-    trigger,
-    ...custom
-  };
-  return details;
-}
-function createGenericEventDetails(reason, event, customProperties) {
-  const custom = customProperties ?? EMPTY_OBJECT;
-  const details = {
-    reason,
-    event: event ?? new Event('base-ui'),
-    ...custom
-  };
-  return details;
-}
-
-// https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
-const SafeReact = {
-  ...React
+let TransitionStatusDataAttributes = /*#__PURE__*/function (TransitionStatusDataAttributes) {
+  /**
+   * Present when the component is animating in.
+   */
+  TransitionStatusDataAttributes["startingStyle"] = "data-starting-style";
+  /**
+   * Present when the component is animating out.
+   */
+  TransitionStatusDataAttributes["endingStyle"] = "data-ending-style";
+  return TransitionStatusDataAttributes;
+}({});
+const STARTING_HOOK = {
+  [TransitionStatusDataAttributes.startingStyle]: ''
 };
-
-let globalId = 0;
-
-// TODO React 17: Remove `useGlobalId` once React 17 support is removed
-function useGlobalId(idOverride, prefix = 'mui') {
-  const [defaultId, setDefaultId] = React.useState(idOverride);
-  const id = idOverride || defaultId;
-  React.useEffect(() => {
-    if (defaultId == null) {
-      // Fallback to this default id when possible.
-      // Use the incrementing value for client-side rendering only.
-      // We can't use it server-side.
-      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
-      globalId += 1;
-      setDefaultId(`${prefix}-${globalId}`);
+const ENDING_HOOK = {
+  [TransitionStatusDataAttributes.endingStyle]: ''
+};
+const transitionStatusMapping = {
+  transitionStatus(value) {
+    if (value === 'starting') {
+      return STARTING_HOOK;
     }
-  }, [defaultId, prefix]);
-  return id;
-}
-const maybeReactUseId = SafeReact.useId;
-
-/**
- *
- * @example <div id={useId()} />
- * @param idOverride
- * @returns {string}
- */
-function useId(idOverride, prefix) {
-  // React.useId() is only available from React 17.0.0.
-  if (maybeReactUseId !== undefined) {
-    const reactId = maybeReactUseId();
-    return idOverride ?? (prefix ? `${prefix}-${reactId}` : reactId);
+    if (value === 'ending') {
+      return ENDING_HOOK;
+    }
+    return null;
   }
+};
 
-  // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
-  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
-  return useGlobalId(idOverride, prefix);
-}
-
-const EMPTY$2 = [];
-
-/**
- * A React.useEffect equivalent that runs once, when the component is mounted.
- */
-function useOnMount(fn) {
-  // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- no need to put `fn` in the dependency array
-  /* eslint-disable react-hooks/exhaustive-deps */
-  React.useEffect(fn, EMPTY$2);
-  /* eslint-enable react-hooks/exhaustive-deps */
-}
-
-/** Unlike `setTimeout`, rAF doesn't guarantee a positive integer return value, so we can't have
- * a monomorphic `uint` type with `0` meaning empty.
- * See warning note at:
- * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame#return_value */
-const EMPTY$1 = null;
-let LAST_RAF = globalThis.requestAnimationFrame;
-class Scheduler {
-  /* This implementation uses an array as a backing data-structure for frame callbacks.
-   * It allows `O(1)` callback cancelling by inserting a `null` in the array, though it
-   * never calls the native `cancelAnimationFrame` if there are no frames left. This can
-   * be much more efficient if there is a call pattern that alterns as
-   * "request-cancel-request-cancel-…".
-   * But in the case of "request-request-…-cancel-cancel-…", it leaves the final animation
-   * frame to run anyway. We turn that frame into a `O(1)` no-op via `callbacksCount`. */
-
-  callbacks = [];
-  callbacksCount = 0;
-  nextId = 1;
-  startId = 1;
-  isScheduled = false;
-  tick = timestamp => {
-    this.isScheduled = false;
-    const currentCallbacks = this.callbacks;
-    const currentCallbacksCount = this.callbacksCount;
-
-    // Update these before iterating, callbacks could call `requestAnimationFrame` again.
-    this.callbacks = [];
-    this.callbacksCount = 0;
-    this.startId = this.nextId;
-    if (currentCallbacksCount > 0) {
-      for (let i = 0; i < currentCallbacks.length; i += 1) {
-        currentCallbacks[i]?.(timestamp);
-      }
-    }
-  };
-  request(fn) {
-    const id = this.nextId;
-    this.nextId += 1;
-    this.callbacks.push(fn);
-    this.callbacksCount += 1;
-
-    /* In a test environment with fake timers, a fake `requestAnimationFrame` can be called
-     * but there's no guarantee that the animation frame will actually run before the fake
-     * timers are teared, which leaves `isScheduled` set, but won't run our `tick()`. */
-    const didRAFChange = process.env.NODE_ENV !== 'production' && LAST_RAF !== requestAnimationFrame && (LAST_RAF = requestAnimationFrame, true);
-    if (!this.isScheduled || didRAFChange) {
-      requestAnimationFrame(this.tick);
-      this.isScheduled = true;
-    }
-    return id;
-  }
-  cancel(id) {
-    const index = id - this.startId;
-    if (index < 0 || index >= this.callbacks.length) {
-      return;
-    }
-    this.callbacks[index] = null;
-    this.callbacksCount -= 1;
-  }
-}
-const scheduler = new Scheduler();
-class AnimationFrame {
-  static create() {
-    return new AnimationFrame();
-  }
-  static request(fn) {
-    return scheduler.request(fn);
-  }
-  static cancel(id) {
-    return scheduler.cancel(id);
-  }
-  currentId = EMPTY$1;
-
+let CommonPopupDataAttributes = function (CommonPopupDataAttributes) {
   /**
-   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   * Present when the popup is open.
    */
-  request(fn) {
-    this.cancel();
-    this.currentId = scheduler.request(() => {
-      this.currentId = EMPTY$1;
-      fn();
-    });
-  }
-  cancel = () => {
-    if (this.currentId !== EMPTY$1) {
-      scheduler.cancel(this.currentId);
-      this.currentId = EMPTY$1;
-    }
-  };
-  disposeEffect = () => {
-    return this.cancel;
-  };
-}
-
-/**
- * A `requestAnimationFrame` with automatic cleanup and guard.
- */
-function useAnimationFrame() {
-  const timeout = useRefWithInit(AnimationFrame.create).current;
-  useOnMount(timeout.disposeEffect);
-  return timeout;
-}
-
-/**
- * If the provided argument is a ref object, returns its `current` value.
- * Otherwise, returns the argument itself.
- */
-function resolveRef(maybeRef) {
-  if (maybeRef == null) {
-    return maybeRef;
-  }
-  return 'current' in maybeRef ? maybeRef.current : maybeRef;
-}
-
-let TransitionStatusDataAttributes = /*#__PURE__*/function (TransitionStatusDataAttributes) {
+  CommonPopupDataAttributes["open"] = "data-open";
   /**
-   * Present when the component is animating in.
+   * Present when the popup is closed.
    */
-  TransitionStatusDataAttributes["startingStyle"] = "data-starting-style";
+  CommonPopupDataAttributes["closed"] = "data-closed";
   /**
-   * Present when the component is animating out.
+   * Present when the popup is animating in.
    */
-  TransitionStatusDataAttributes["endingStyle"] = "data-ending-style";
-  return TransitionStatusDataAttributes;
+  CommonPopupDataAttributes[CommonPopupDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the popup is animating out.
+   */
+  CommonPopupDataAttributes[CommonPopupDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Present when the anchor is hidden.
+   */
+  CommonPopupDataAttributes["anchorHidden"] = "data-anchor-hidden";
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type { 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  CommonPopupDataAttributes["side"] = "data-side";
+  /**
+   * Indicates how the popup is aligned relative to specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  CommonPopupDataAttributes["align"] = "data-align";
+  return CommonPopupDataAttributes;
 }({});
-const STARTING_HOOK = {
-  [TransitionStatusDataAttributes.startingStyle]: ''
+let CommonTriggerDataAttributes = /*#__PURE__*/function (CommonTriggerDataAttributes) {
+  /**
+   * Present when the popup is open.
+   */
+  CommonTriggerDataAttributes["popupOpen"] = "data-popup-open";
+  /**
+   * Present when a pressable trigger is pressed.
+   */
+  CommonTriggerDataAttributes["pressed"] = "data-pressed";
+  return CommonTriggerDataAttributes;
+}({});
+const TRIGGER_HOOK = {
+  [CommonTriggerDataAttributes.popupOpen]: ''
 };
-const ENDING_HOOK = {
-  [TransitionStatusDataAttributes.endingStyle]: ''
+const PRESSABLE_TRIGGER_HOOK = {
+  [CommonTriggerDataAttributes.popupOpen]: '',
+  [CommonTriggerDataAttributes.pressed]: ''
 };
-const transitionStatusMapping = {
-  transitionStatus(value) {
-    if (value === 'starting') {
-      return STARTING_HOOK;
+const POPUP_OPEN_HOOK = {
+  [CommonPopupDataAttributes.open]: ''
+};
+const POPUP_CLOSED_HOOK = {
+  [CommonPopupDataAttributes.closed]: ''
+};
+const ANCHOR_HIDDEN_HOOK = {
+  [CommonPopupDataAttributes.anchorHidden]: ''
+};
+const triggerOpenStateMapping = {
+  open(value) {
+    if (value) {
+      return TRIGGER_HOOK;
     }
-    if (value === 'ending') {
-      return ENDING_HOOK;
+    return null;
+  }
+};
+const pressableTriggerOpenStateMapping = {
+  open(value) {
+    if (value) {
+      return PRESSABLE_TRIGGER_HOOK;
+    }
+    return null;
+  }
+};
+const popupStateMapping = {
+  open(value) {
+    if (value) {
+      return POPUP_OPEN_HOOK;
+    }
+    return POPUP_CLOSED_HOOK;
+  },
+  anchorHidden(value) {
+    if (value) {
+      return ANCHOR_HIDDEN_HOOK;
     }
     return null;
   }
 };
 
-/**
- * Executes a function once all animations have finished on the provided element.
- * @param elementOrRef - The element to watch for animations.
- * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
- * @param treatAbortedAsFinished - Whether to treat aborted animations as finished. If `false`, and there are aborted animations,
- *   the function will check again if any new animations have started and wait for them to finish.
- * @returns A function that takes a callback to execute once all animations have finished, and an optional AbortSignal to abort the callback
- */
-function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) {
-  const frame = useAnimationFrame();
-  return useStableCallback((fnToExecute,
+let DrawerPopupCssVars = /*#__PURE__*/function (DrawerPopupCssVars) {
   /**
-   * An optional [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that
-   * can be used to abort `fnToExecute` before all the animations have finished.
-   * @default null
+   * The number of nested drawers that are currently open.
+   * @type {number}
    */
-  signal = null) => {
-    frame.cancel();
-    function done() {
-      // Synchronously flush the unmounting of the component so that the browser doesn't
-      // paint: https://github.com/mui/base-ui/issues/979
-      ReactDOM.flushSync(fnToExecute);
-    }
-    const element = resolveRef(elementOrRef);
-    if (element == null) {
-      return;
-    }
-    const resolvedElement = element;
-    if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
-      fnToExecute();
-    } else {
-      function execWaitForStartingStyleRemoved() {
-        const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle;
+  DrawerPopupCssVars["nestedDrawers"] = "--nested-drawers";
+  /**
+   * The height of the drawer popup.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["height"] = "--drawer-height";
+  /**
+   * The height of the frontmost open drawer in the current nested drawer stack.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["frontmostHeight"] = "--drawer-frontmost-height";
+  /**
+   * The swipe movement on the X axis.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["swipeMovementX"] = "--drawer-swipe-movement-x";
+  /**
+   * The swipe movement on the Y axis.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["swipeMovementY"] = "--drawer-swipe-movement-y";
+  /**
+   * The snap point offset used for translating the drawer.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["snapPointOffset"] = "--drawer-snap-point-offset";
+  /**
+   * A scalar (0.1-1) used to scale the swipe release transition duration in CSS.
+   * @type {number}
+   */
+  DrawerPopupCssVars["swipeStrength"] = "--drawer-swipe-strength";
+  return DrawerPopupCssVars;
+}({});
 
-        // If `[data-starting-style]` isn't present, fall back to waiting one more frame
-        // to give "open" animations a chance to be registered.
-        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
-          frame.request(exec);
-          return;
-        }
+let DrawerBackdropCssVars = /*#__PURE__*/function (DrawerBackdropCssVars) {
+  /**
+   * The swipe progress of the drawer gesture.
+   * @type {number}
+   */
+  DrawerBackdropCssVars["swipeProgress"] = "--drawer-swipe-progress";
+  return DrawerBackdropCssVars;
+}({});
 
-        // Wait for `[data-starting-style]` to have been removed.
-        const attributeObserver = new MutationObserver(() => {
-          if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
-            attributeObserver.disconnect();
-            exec();
-          }
-        });
-        attributeObserver.observe(resolvedElement, {
-          attributes: true,
-          attributeFilter: [startingStyleAttribute]
-        });
-        signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
-          once: true
-        });
-      }
-      function exec() {
-        Promise.all(resolvedElement.getAnimations().map(anim => anim.finished)).then(() => {
-          if (signal?.aborted) {
-            return;
-          }
-          done();
-        }).catch(() => {
-          const currentAnimations = resolvedElement.getAnimations();
-          if (treatAbortedAsFinished) {
-            if (signal?.aborted) {
-              return;
-            }
-            done();
-          } else if (currentAnimations.length > 0 && currentAnimations.some(anim => anim.pending || anim.playState !== 'finished')) {
-            // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
-            // In such cases, we need to re-check if any new animations have started.
-            exec();
-          }
-        });
-      }
-      if (waitForStartingStyleRemoved) {
-        execWaitForStartingStyleRemoved();
-        return;
+const stateAttributesMapping$1 = {
+  ...popupStateMapping,
+  ...transitionStatusMapping
+};
+
+/**
+ * An overlay displayed beneath the popup.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerBackdrop = /*#__PURE__*/React.forwardRef(function DrawerBackdrop(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    forceRender = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const open = store.useState('open');
+  const nested = store.useState('nested');
+  const mounted = store.useState('mounted');
+  const transitionStatus = store.useState('transitionStatus');
+  const state = {
+    open,
+    transitionStatus
+  };
+  return useRenderElement('div', componentProps, {
+    state,
+    ref: [store.context.backdropRef, forwardedRef],
+    stateAttributesMapping: stateAttributesMapping$1,
+    props: [{
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        pointerEvents: !open ? 'none' : undefined,
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+        [DrawerBackdropCssVars.swipeProgress]: '0',
+        [DrawerPopupCssVars.swipeStrength]: '1'
       }
-      frame.request(exec);
-    }
+    }, elementProps],
+    enabled: forceRender || !nested
   });
-}
+});
+if (process.env.NODE_ENV !== "production") DrawerBackdrop.displayName = "DrawerBackdrop";
 
+// https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
+const useInsertionEffect = React[`useInsertionEffect${Math.random().toFixed(1)}`.slice(0, -3)];
+const useSafeInsertionEffect =
+// React 17 doesn't have useInsertionEffect.
+useInsertionEffect &&
+// Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
+useInsertionEffect !== React.useLayoutEffect ? useInsertionEffect : fn => fn();
 /**
- * Provides a status string for CSS animations.
- * @param open - a boolean that determines if the element is open.
- * @param enableIdleState - a boolean that enables the `'idle'` state between `'starting'` and `'ending'`
+ * Stabilizes the function passed so it's always the same between renders.
+ *
+ * The function becomes non-reactive to any values it captures.
+ * It can safely be passed as a dependency of `React.useMemo` and `React.useEffect` without re-triggering them if its captured values change.
+ *
+ * The function must only be called inside effects and event handlers, never during render (which throws an error).
+ *
+ * This hook is a more permissive version of React 19.2's `React.useEffectEvent` in that it can be passed through contexts and called in event handler props, not just effects.
  */
-function useTransitionStatus(open, enableIdleState = false, deferEndingState = false) {
-  const [transitionStatus, setTransitionStatus] = React.useState(open && enableIdleState ? 'idle' : undefined);
-  const [mounted, setMounted] = React.useState(open);
-  if (open && !mounted) {
-    setMounted(true);
-    setTransitionStatus('starting');
-  }
-  if (!open && mounted && transitionStatus !== 'ending' && !deferEndingState) {
-    setTransitionStatus('ending');
-  }
-  if (!open && !mounted && transitionStatus === 'ending') {
-    setTransitionStatus(undefined);
-  }
-  useIsoLayoutEffect(() => {
-    if (!open && mounted && transitionStatus !== 'ending' && deferEndingState) {
-      const frame = AnimationFrame.request(() => {
-        setTransitionStatus('ending');
-      });
-      return () => {
-        AnimationFrame.cancel(frame);
-      };
-    }
-    return undefined;
-  }, [open, mounted, transitionStatus, deferEndingState]);
-  useIsoLayoutEffect(() => {
-    if (!open || enableIdleState) {
-      return undefined;
-    }
-    const frame = AnimationFrame.request(() => {
-      // Avoid `flushSync` here due to Firefox.
-      // See https://github.com/mui/base-ui/pull/3424
-      setTransitionStatus(undefined);
-    });
-    return () => {
-      AnimationFrame.cancel(frame);
-    };
-  }, [enableIdleState, open]);
-  useIsoLayoutEffect(() => {
-    if (!open || !enableIdleState) {
-      return undefined;
-    }
-    if (open && mounted && transitionStatus !== 'idle') {
-      setTransitionStatus('starting');
-    }
-    const frame = AnimationFrame.request(() => {
-      setTransitionStatus('idle');
-    });
-    return () => {
-      AnimationFrame.cancel(frame);
-    };
-  }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]);
-  return React.useMemo(() => ({
-    mounted,
-    setMounted,
-    transitionStatus
-  }), [mounted, transitionStatus]);
+function useStableCallback(callback) {
+  const stable = useRefWithInit(createStableCallback).current;
+  stable.next = callback;
+  useSafeInsertionEffect(stable.effect);
+  return stable.trampoline;
 }
-
-const hasNavigator = typeof navigator !== 'undefined';
-const nav = getNavigatorData();
-const platform = getPlatform();
-const userAgent = getUserAgent();
-const isWebKit = typeof CSS === 'undefined' || !CSS.supports ? false : CSS.supports('-webkit-backdrop-filter:none');
-const isIOS =
-// iPads can claim to be MacIntel
-nav.platform === 'MacIntel' && nav.maxTouchPoints > 1 ? true : /iP(hone|ad|od)|iOS/.test(nav.platform);
-const isFirefox = hasNavigator && /firefox/i.test(userAgent);
-const isSafari = hasNavigator && /apple/i.test(navigator.vendor);
-const isAndroid = hasNavigator && /android/i.test(platform) || /android/i.test(userAgent);
-hasNavigator && platform.toLowerCase().startsWith('mac') && !navigator.maxTouchPoints;
-const isJSDOM = userAgent.includes('jsdom/');
-
-// Avoid Chrome DevTools blue warning.
-function getNavigatorData() {
-  if (!hasNavigator) {
-    return {
-      platform: '',
-      maxTouchPoints: -1
-    };
-  }
-  const uaData = navigator.userAgentData;
-  if (uaData?.platform) {
-    return {
-      platform: uaData.platform,
-      maxTouchPoints: navigator.maxTouchPoints
-    };
-  }
-  return {
-    platform: navigator.platform ?? '',
-    maxTouchPoints: navigator.maxTouchPoints ?? -1
+function createStableCallback() {
+  const stable = {
+    next: undefined,
+    callback: assertNotCalled,
+    trampoline: (...args) => stable.callback?.(...args),
+    effect: () => {
+      stable.callback = stable.next;
+    }
   };
+  return stable;
 }
-function getUserAgent() {
-  if (!hasNavigator) {
-    return '';
-  }
-  const uaData = navigator.userAgentData;
-  if (uaData && Array.isArray(uaData.brands)) {
-    return uaData.brands.map(({
-      brand,
-      version
-    }) => `${brand}/${version}`).join(' ');
-  }
-  return navigator.userAgent;
-}
-function getPlatform() {
-  if (!hasNavigator) {
-    return '';
-  }
-  const uaData = navigator.userAgentData;
-  if (uaData?.platform) {
-    return uaData.platform;
+function assertNotCalled() {
+  if (process.env.NODE_ENV !== 'production') {
+    throw /* minify-error-disabled */new Error('Base UI: Cannot call an event handler while rendering.');
   }
-  return navigator.platform ?? '';
 }
 
-const FOCUSABLE_ATTRIBUTE = 'data-base-ui-focusable';
-const ACTIVE_KEY = 'active';
-const SELECTED_KEY = 'selected';
-const TYPEABLE_SELECTOR = "input:not([type='hidden']):not([disabled])," + "[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
-const ARROW_LEFT$1 = 'ArrowLeft';
-const ARROW_RIGHT$1 = 'ArrowRight';
-const ARROW_UP$1 = 'ArrowUp';
-const ARROW_DOWN$1 = 'ArrowDown';
+// https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
+const SafeReact = {
+  ...React
+};
 
-function activeElement(doc) {
-  let element = doc.activeElement;
-  while (element?.shadowRoot?.activeElement != null) {
-    element = element.shadowRoot.activeElement;
-  }
-  return element;
-}
-function contains(parent, child) {
-  if (!parent || !child) {
-    return false;
-  }
-  const rootNode = child.getRootNode?.();
+const noop = () => {};
+const useIsoLayoutEffect = typeof document !== 'undefined' ? React.useLayoutEffect : noop;
 
-  // First, attempt with faster native method
-  if (parent.contains(child)) {
-    return true;
-  }
+const none = 'none';
+const triggerPress = 'trigger-press';
+const triggerHover = 'trigger-hover';
+const triggerFocus = 'trigger-focus';
+const outsidePress = 'outside-press';
+const itemPress = 'item-press';
+const closePress = 'close-press';
+const clearPress = 'clear-press';
+const chipRemovePress = 'chip-remove-press';
+const incrementPress = 'increment-press';
+const decrementPress = 'decrement-press';
+const inputChange = 'input-change';
+const inputClear = 'input-clear';
+const inputBlur = 'input-blur';
+const inputPaste = 'input-paste';
+const inputPress = 'input-press';
+const focusOut = 'focus-out';
+const escapeKey = 'escape-key';
+const closeWatcher = 'close-watcher';
+const listNavigation = 'list-navigation';
+const keyboard = 'keyboard';
+const scrub = 'scrub';
+const cancelOpen = 'cancel-open';
+const siblingOpen = 'sibling-open';
+const imperativeAction = 'imperative-action';
+const swipe = 'swipe';
 
-  // then fallback to custom implementation with Shadow DOM support
-  if (rootNode && isShadowRoot(rootNode)) {
-    let next = child;
-    while (next) {
-      if (parent === next) {
-        return true;
-      }
-      next = next.parentNode || next.host;
-    }
-  }
+/**
+ * Maps a change `reason` string to the corresponding native event type.
+ */
 
-  // Give up, the result is false
-  return false;
-}
-function getTarget(event) {
-  if ('composedPath' in event) {
-    return event.composedPath()[0];
-  }
+/**
+ * Details of custom change events emitted by Base UI components.
+ */
 
-  // TS thinks `event` is of type never as it assumes all browsers support
-  // `composedPath()`, but browsers without shadow DOM don't.
-  return event.target;
-}
-function isEventTargetWithin(event, node) {
-  if (node == null) {
-    return false;
-  }
-  if ('composedPath' in event) {
-    return event.composedPath().includes(node);
-  }
+/**
+ * Details of custom generic events emitted by Base UI components.
+ */
 
-  // TS thinks `event` is of type never as it assumes all browsers support composedPath, but browsers without shadow dom don't
-  const eventAgain = event;
-  return eventAgain.target != null && node.contains(eventAgain.target);
-}
-function isRootElement(element) {
-  return element.matches('html,body');
-}
-function isTypeableElement(element) {
-  return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
-}
-function isTypeableCombobox(element) {
-  if (!element) {
-    return false;
-  }
-  return element.getAttribute('role') === 'combobox' && isTypeableElement(element);
+/**
+ * Creates a Base UI event details object with the given reason and utilities
+ * for preventing Base UI's internal event handling.
+ */
+function createChangeEventDetails(reason, event, trigger, customProperties) {
+  let canceled = false;
+  let allowPropagation = false;
+  const custom = customProperties ?? EMPTY_OBJECT;
+  const details = {
+    reason,
+    event: event ?? new Event('base-ui'),
+    cancel() {
+      canceled = true;
+    },
+    allowPropagation() {
+      allowPropagation = true;
+    },
+    get isCanceled() {
+      return canceled;
+    },
+    get isPropagationAllowed() {
+      return allowPropagation;
+    },
+    trigger,
+    ...custom
+  };
+  return details;
 }
-function getFloatingFocusElement(floatingElement) {
-  if (!floatingElement) {
-    return null;
-  }
-  // Try to find the element that has `{...getFloatingProps()}` spread on it.
-  // This indicates the floating element is acting as a positioning wrapper, and
-  // so focus should be managed on the child element with the event handlers and
-  // aria props.
-  return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE) ? floatingElement : floatingElement.querySelector(`[${FOCUSABLE_ATTRIBUTE}]`) || floatingElement;
+function createGenericEventDetails(reason, event, customProperties) {
+  const custom = customProperties ?? EMPTY_OBJECT;
+  const details = {
+    reason,
+    event: event ?? new Event('base-ui'),
+    ...custom
+  };
+  return details;
 }
 
-/* eslint-disable @typescript-eslint/no-loop-func */
+const DRAWER_CONTENT_ATTRIBUTE = 'data-drawer-content';
 
-function getNodeChildren(nodes, id, onlyOpenChildren = true) {
-  const directChildren = nodes.filter(node => node.parentId === id && (!onlyOpenChildren || node.context?.open));
-  return directChildren.flatMap(child => [child, ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
-}
-function getNodeAncestors(nodes, id) {
-  let allAncestors = [];
-  let currentParentId = nodes.find(node => node.id === id)?.parentId;
-  while (currentParentId) {
-    const currentNode = nodes.find(node => node.id === currentParentId);
-    currentParentId = currentNode?.parentId;
-    if (currentNode) {
-      allAncestors = allAncestors.concat(currentNode);
+/**
+ * A container for the drawer contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerContent = /*#__PURE__*/React.forwardRef(function DrawerContent(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  useDialogRootContext();
+  return useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      [DRAWER_CONTENT_ATTRIBUTE]: ''
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerContent";
+
+let globalId = 0;
+
+// TODO React 17: Remove `useGlobalId` once React 17 support is removed
+function useGlobalId(idOverride, prefix = 'mui') {
+  const [defaultId, setDefaultId] = React.useState(idOverride);
+  const id = idOverride || defaultId;
+  React.useEffect(() => {
+    if (defaultId == null) {
+      // Fallback to this default id when possible.
+      // Use the incrementing value for client-side rendering only.
+      // We can't use it server-side.
+      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+      globalId += 1;
+      setDefaultId(`${prefix}-${globalId}`);
     }
+  }, [defaultId, prefix]);
+  return id;
+}
+const maybeReactUseId = SafeReact.useId;
+
+/**
+ *
+ * @example <div id={useId()} />
+ * @param idOverride
+ * @returns {string}
+ */
+function useId(idOverride, prefix) {
+  // React.useId() is only available from React 17.0.0.
+  if (maybeReactUseId !== undefined) {
+    const reactId = maybeReactUseId();
+    return idOverride ?? (prefix ? `${prefix}-${reactId}` : reactId);
   }
-  return allAncestors;
+
+  // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
+  return useGlobalId(idOverride, prefix);
 }
 
-function stopEvent(event) {
-  event.preventDefault();
-  event.stopPropagation();
+const DrawerProviderContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") DrawerProviderContext.displayName = "DrawerProviderContext";
+function useDrawerProviderContext(optional) {
+  const context = React.useContext(DrawerProviderContext);
+  return context;
 }
-function isReactEvent(event) {
-  return 'nativeEvent' in event;
+
+const EMPTY$2 = [];
+
+/**
+ * A React.useEffect equivalent that runs once, when the component is mounted.
+ */
+function useOnMount(fn) {
+  // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- no need to put `fn` in the dependency array
+  /* eslint-disable react-hooks/exhaustive-deps */
+  React.useEffect(fn, EMPTY$2);
+  /* eslint-enable react-hooks/exhaustive-deps */
 }
 
-// License: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/isVirtualEvent.ts
-function isVirtualClick(event) {
-  if (event.pointerType === '' && event.isTrusted) {
-    return true;
+const EMPTY$1 = 0;
+class Timeout {
+  static create() {
+    return new Timeout();
   }
-  if (isAndroid && event.pointerType) {
-    return event.type === 'click' && event.buttons === 1;
+  currentId = EMPTY$1;
+
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay, fn) {
+    this.clear();
+    this.currentId = setTimeout(() => {
+      this.currentId = EMPTY$1;
+      fn();
+    }, delay); /* Node.js types are enabled in development */
   }
-  return event.detail === 0 && !event.pointerType;
-}
-function isVirtualPointerEvent(event) {
-  if (isJSDOM) {
-    return false;
+  isStarted() {
+    return this.currentId !== EMPTY$1;
   }
-  return !isAndroid && event.width === 0 && event.height === 0 || isAndroid && event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'mouse' ||
-  // iOS VoiceOver returns 0.333• for width/height.
-  event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'touch';
-}
-function isMouseLikePointerType(pointerType, strict) {
+  clear = () => {
+    if (this.currentId !== EMPTY$1) {
+      clearTimeout(this.currentId);
+      this.currentId = EMPTY$1;
+    }
+  };
+  disposeEffect = () => {
+    return this.clear;
+  };
+}
+
+/**
+ * A `setTimeout` with automatic cleanup and guard.
+ */
+function useTimeout() {
+  const timeout = useRefWithInit(Timeout.create).current;
+  useOnMount(timeout.disposeEffect);
+  return timeout;
+}
+
+const hasNavigator = typeof navigator !== 'undefined';
+const nav = getNavigatorData();
+const platform = getPlatform();
+const userAgent = getUserAgent();
+const isWebKit = typeof CSS === 'undefined' || !CSS.supports ? false : CSS.supports('-webkit-backdrop-filter:none');
+const isIOS =
+// iPads can claim to be MacIntel
+nav.platform === 'MacIntel' && nav.maxTouchPoints > 1 ? true : /iP(hone|ad|od)|iOS/.test(nav.platform);
+const isFirefox = hasNavigator && /firefox/i.test(userAgent);
+const isSafari = hasNavigator && /apple/i.test(navigator.vendor);
+const isAndroid = hasNavigator && /android/i.test(platform) || /android/i.test(userAgent);
+const isMac = hasNavigator && platform.toLowerCase().startsWith('mac') && !navigator.maxTouchPoints;
+const isJSDOM = userAgent.includes('jsdom/');
+
+// Avoid Chrome DevTools blue warning.
+function getNavigatorData() {
+  if (!hasNavigator) {
+    return {
+      platform: '',
+      maxTouchPoints: -1
+    };
+  }
+  const uaData = navigator.userAgentData;
+  if (uaData?.platform) {
+    return {
+      platform: uaData.platform,
+      maxTouchPoints: navigator.maxTouchPoints
+    };
+  }
+  return {
+    platform: navigator.platform ?? '',
+    maxTouchPoints: navigator.maxTouchPoints ?? -1
+  };
+}
+function getUserAgent() {
+  if (!hasNavigator) {
+    return '';
+  }
+  const uaData = navigator.userAgentData;
+  if (uaData && Array.isArray(uaData.brands)) {
+    return uaData.brands.map(({
+      brand,
+      version
+    }) => `${brand}/${version}`).join(' ');
+  }
+  return navigator.userAgent;
+}
+function getPlatform() {
+  if (!hasNavigator) {
+    return '';
+  }
+  const uaData = navigator.userAgentData;
+  if (uaData?.platform) {
+    return uaData.platform;
+  }
+  return navigator.platform ?? '';
+}
+
+const FOCUSABLE_ATTRIBUTE = 'data-base-ui-focusable';
+const ACTIVE_KEY = 'active';
+const SELECTED_KEY = 'selected';
+const TYPEABLE_SELECTOR = "input:not([type='hidden']):not([disabled])," + "[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
+const ARROW_LEFT$1 = 'ArrowLeft';
+const ARROW_RIGHT$1 = 'ArrowRight';
+const ARROW_UP$1 = 'ArrowUp';
+const ARROW_DOWN$1 = 'ArrowDown';
+
+function activeElement(doc) {
+  let element = doc.activeElement;
+  while (element?.shadowRoot?.activeElement != null) {
+    element = element.shadowRoot.activeElement;
+  }
+  return element;
+}
+function contains(parent, child) {
+  if (!parent || !child) {
+    return false;
+  }
+  const rootNode = child.getRootNode?.();
+
+  // First, attempt with faster native method
+  if (parent.contains(child)) {
+    return true;
+  }
+
+  // then fallback to custom implementation with Shadow DOM support
+  if (rootNode && isShadowRoot(rootNode)) {
+    let next = child;
+    while (next) {
+      if (parent === next) {
+        return true;
+      }
+      next = next.parentNode || next.host;
+    }
+  }
+
+  // Give up, the result is false
+  return false;
+}
+function isTargetInsideEnabledTrigger(target, triggerElements) {
+  if (!isElement(target)) {
+    return false;
+  }
+  const targetElement = target;
+  if (triggerElements.hasElement(targetElement)) {
+    return !targetElement.hasAttribute('data-trigger-disabled');
+  }
+  for (const [, trigger] of triggerElements.entries()) {
+    if (contains(trigger, targetElement)) {
+      return !trigger.hasAttribute('data-trigger-disabled');
+    }
+  }
+  return false;
+}
+function getTarget(event) {
+  if ('composedPath' in event) {
+    return event.composedPath()[0];
+  }
+
+  // TS thinks `event` is of type never as it assumes all browsers support
+  // `composedPath()`, but browsers without shadow DOM don't.
+  return event.target;
+}
+function isEventTargetWithin(event, node) {
+  if (node == null) {
+    return false;
+  }
+  if ('composedPath' in event) {
+    return event.composedPath().includes(node);
+  }
+
+  // TS thinks `event` is of type never as it assumes all browsers support composedPath, but browsers without shadow dom don't
+  const eventAgain = event;
+  return eventAgain.target != null && node.contains(eventAgain.target);
+}
+function isRootElement(element) {
+  return element.matches('html,body');
+}
+function isTypeableElement(element) {
+  return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
+}
+function isTypeableCombobox(element) {
+  if (!element) {
+    return false;
+  }
+  return element.getAttribute('role') === 'combobox' && isTypeableElement(element);
+}
+function matchesFocusVisible(element) {
+  // We don't want to block focus from working with `visibleOnly`
+  // (JSDOM doesn't match `:focus-visible` when the element has `:focus`)
+  if (!element || isJSDOM) {
+    return true;
+  }
+  try {
+    return element.matches(':focus-visible');
+  } catch (_e) {
+    return true;
+  }
+}
+function getFloatingFocusElement(floatingElement) {
+  if (!floatingElement) {
+    return null;
+  }
+  // Try to find the element that has `{...getFloatingProps()}` spread on it.
+  // This indicates the floating element is acting as a positioning wrapper, and
+  // so focus should be managed on the child element with the event handlers and
+  // aria props.
+  return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE) ? floatingElement : floatingElement.querySelector(`[${FOCUSABLE_ATTRIBUTE}]`) || floatingElement;
+}
+
+/* eslint-disable @typescript-eslint/no-loop-func */
+
+function getNodeChildren(nodes, id, onlyOpenChildren = true) {
+  const directChildren = nodes.filter(node => node.parentId === id && (!onlyOpenChildren || node.context?.open));
+  return directChildren.flatMap(child => [child, ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
+}
+function getNodeAncestors(nodes, id) {
+  let allAncestors = [];
+  let currentParentId = nodes.find(node => node.id === id)?.parentId;
+  while (currentParentId) {
+    const currentNode = nodes.find(node => node.id === currentParentId);
+    currentParentId = currentNode?.parentId;
+    if (currentNode) {
+      allAncestors = allAncestors.concat(currentNode);
+    }
+  }
+  return allAncestors;
+}
+
+function stopEvent(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+function isReactEvent(event) {
+  return 'nativeEvent' in event;
+}
+
+// License: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/isVirtualEvent.ts
+function isVirtualClick(event) {
+  if (event.pointerType === '' && event.isTrusted) {
+    return true;
+  }
+  if (isAndroid && event.pointerType) {
+    return event.type === 'click' && event.buttons === 1;
+  }
+  return event.detail === 0 && !event.pointerType;
+}
+function isVirtualPointerEvent(event) {
+  if (isJSDOM) {
+    return false;
+  }
+  return !isAndroid && event.width === 0 && event.height === 0 || isAndroid && event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'mouse' ||
+  // iOS VoiceOver returns 0.333• for width/height.
+  event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'touch';
+}
+function isMouseLikePointerType(pointerType, strict) {
   // On some Linux machines with Chromium, mouse inputs return a `pointerType`
   // of "pen": https://github.com/floating-ui/floating-ui/issues/2015
   const values = ['mouse', 'pen'];
+  if (!strict) {
+    values.push('', undefined);
+  }
   return values.includes(pointerType);
 }
 function isClickLikeEvent(event) {
@@ -1105,6 +1118,28 @@ function getNextTabbable(referenceElement) {
 function getPreviousTabbable(referenceElement) {
   return getTabbableIn(ownerDocument(referenceElement).body, -1) || referenceElement;
 }
+function getTabbableNearElement(referenceElement, dir) {
+  if (!referenceElement) {
+    return null;
+  }
+  const list = tabbable(ownerDocument(referenceElement).body, getTabbableOptions());
+  const elementCount = list.length;
+  if (elementCount === 0) {
+    return null;
+  }
+  const index = list.indexOf(referenceElement);
+  if (index === -1) {
+    return null;
+  }
+  const nextIndex = (index + dir + elementCount) % elementCount;
+  return list[nextIndex];
+}
+function getTabbableAfterElement(referenceElement) {
+  return getTabbableNearElement(referenceElement, 1);
+}
+function getTabbableBeforeElement(referenceElement) {
+  return getTabbableNearElement(referenceElement, -1);
+}
 function isOutsideEvent(event, container) {
   const containerElement = container || event.currentTarget;
   const relatedTarget = event.relatedTarget;
@@ -1130,412 +1165,203 @@ function enableFocusInside(container) {
   });
 }
 
-const ARROW_UP = 'ArrowUp';
-const ARROW_DOWN = 'ArrowDown';
-const ARROW_LEFT = 'ArrowLeft';
-const ARROW_RIGHT = 'ArrowRight';
-const HOME = 'Home';
-const END = 'End';
-const HORIZONTAL_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT]);
-const VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN]);
-const ARROW_KEYS = new Set([...HORIZONTAL_KEYS, ...VERTICAL_KEYS]);
-new Set([...ARROW_KEYS, HOME, END]);
-const COMPOSITE_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END]);
-
 /**
- * Calls the provided function when the CSS open/close animation or transition completes.
+ * Untracks the provided value by turning it into a ref to remove its reactivity.
+ *
+ * Used to access the passed value inside `React.useEffect` without causing the effect to re-run when the value changes.
  */
-function useOpenChangeComplete(parameters) {
-  const {
-    enabled = true,
-    open,
-    ref,
-    onComplete: onCompleteParam
-  } = parameters;
-  const onComplete = useStableCallback(onCompleteParam);
-  const runOnceAnimationsFinish = useAnimationsFinished(ref, open, false);
-  React.useEffect(() => {
-    if (!enabled) {
-      return undefined;
+function useValueAsRef(value) {
+  const latest = useRefWithInit(createLatestRef, value).current;
+  latest.next = value;
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useIsoLayoutEffect(latest.effect);
+  return latest;
+}
+function createLatestRef(value) {
+  const latest = {
+    current: value,
+    next: value,
+    effect: () => {
+      latest.current = latest.next;
     }
-    const abortController = new AbortController();
-    runOnceAnimationsFinish(onComplete, abortController.signal);
-    return () => {
-      abortController.abort();
-    };
-  }, [enabled, open, onComplete, runOnceAnimationsFinish]);
+  };
+  return latest;
 }
 
-const EMPTY = 0;
-class Timeout {
+/** Unlike `setTimeout`, rAF doesn't guarantee a positive integer return value, so we can't have
+ * a monomorphic `uint` type with `0` meaning empty.
+ * See warning note at:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame#return_value */
+const EMPTY = null;
+let LAST_RAF = globalThis.requestAnimationFrame;
+class Scheduler {
+  /* This implementation uses an array as a backing data-structure for frame callbacks.
+   * It allows `O(1)` callback cancelling by inserting a `null` in the array, though it
+   * never calls the native `cancelAnimationFrame` if there are no frames left. This can
+   * be much more efficient if there is a call pattern that alterns as
+   * "request-cancel-request-cancel-…".
+   * But in the case of "request-request-…-cancel-cancel-…", it leaves the final animation
+   * frame to run anyway. We turn that frame into a `O(1)` no-op via `callbacksCount`. */
+
+  callbacks = [];
+  callbacksCount = 0;
+  nextId = 1;
+  startId = 1;
+  isScheduled = false;
+  tick = timestamp => {
+    this.isScheduled = false;
+    const currentCallbacks = this.callbacks;
+    const currentCallbacksCount = this.callbacksCount;
+
+    // Update these before iterating, callbacks could call `requestAnimationFrame` again.
+    this.callbacks = [];
+    this.callbacksCount = 0;
+    this.startId = this.nextId;
+    if (currentCallbacksCount > 0) {
+      for (let i = 0; i < currentCallbacks.length; i += 1) {
+        currentCallbacks[i]?.(timestamp);
+      }
+    }
+  };
+  request(fn) {
+    const id = this.nextId;
+    this.nextId += 1;
+    this.callbacks.push(fn);
+    this.callbacksCount += 1;
+
+    /* In a test environment with fake timers, a fake `requestAnimationFrame` can be called
+     * but there's no guarantee that the animation frame will actually run before the fake
+     * timers are teared, which leaves `isScheduled` set, but won't run our `tick()`. */
+    const didRAFChange = process.env.NODE_ENV !== 'production' && LAST_RAF !== requestAnimationFrame && (LAST_RAF = requestAnimationFrame, true);
+    if (!this.isScheduled || didRAFChange) {
+      requestAnimationFrame(this.tick);
+      this.isScheduled = true;
+    }
+    return id;
+  }
+  cancel(id) {
+    const index = id - this.startId;
+    if (index < 0 || index >= this.callbacks.length) {
+      return;
+    }
+    this.callbacks[index] = null;
+    this.callbacksCount -= 1;
+  }
+}
+const scheduler = new Scheduler();
+class AnimationFrame {
   static create() {
-    return new Timeout();
+    return new AnimationFrame();
+  }
+  static request(fn) {
+    return scheduler.request(fn);
+  }
+  static cancel(id) {
+    return scheduler.cancel(id);
   }
   currentId = EMPTY;
 
   /**
    * Executes `fn` after `delay`, clearing any previously scheduled call.
    */
-  start(delay, fn) {
-    this.clear();
-    this.currentId = setTimeout(() => {
+  request(fn) {
+    this.cancel();
+    this.currentId = scheduler.request(() => {
       this.currentId = EMPTY;
       fn();
-    }, delay); /* Node.js types are enabled in development */
-  }
-  isStarted() {
-    return this.currentId !== EMPTY;
+    });
   }
-  clear = () => {
+  cancel = () => {
     if (this.currentId !== EMPTY) {
-      clearTimeout(this.currentId);
+      scheduler.cancel(this.currentId);
       this.currentId = EMPTY;
     }
   };
   disposeEffect = () => {
-    return this.clear;
+    return this.cancel;
   };
 }
 
 /**
- * A `setTimeout` with automatic cleanup and guard.
+ * A `requestAnimationFrame` with automatic cleanup and guard.
  */
-function useTimeout() {
-  const timeout = useRefWithInit(Timeout.create).current;
+function useAnimationFrame() {
+  const timeout = useRefWithInit(AnimationFrame.create).current;
   useOnMount(timeout.disposeEffect);
   return timeout;
 }
 
-let originalHtmlStyles = {};
-let originalBodyStyles = {};
-let originalHtmlScrollBehavior = '';
-function hasInsetScrollbars(referenceElement) {
-  if (typeof document === 'undefined') {
-    return false;
-  }
-  const doc = ownerDocument(referenceElement);
-  const win = getWindow(doc);
-  return win.innerWidth - doc.documentElement.clientWidth > 0;
-}
-function supportsStableScrollbarGutter(referenceElement) {
-  const supported = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('scrollbar-gutter', 'stable');
-  if (!supported || typeof document === 'undefined') {
-    return false;
-  }
-  const doc = ownerDocument(referenceElement);
-  const html = doc.documentElement;
-  const body = doc.body;
-  const scrollContainer = isOverflowElement(html) ? html : body;
-  const originalScrollContainerOverflowY = scrollContainer.style.overflowY;
-  const originalHtmlStyleGutter = html.style.scrollbarGutter;
-  html.style.scrollbarGutter = 'stable';
-  scrollContainer.style.overflowY = 'scroll';
-  const before = scrollContainer.offsetWidth;
-  scrollContainer.style.overflowY = 'hidden';
-  const after = scrollContainer.offsetWidth;
-  scrollContainer.style.overflowY = originalScrollContainerOverflowY;
-  html.style.scrollbarGutter = originalHtmlStyleGutter;
-  return before === after;
-}
-function preventScrollOverlayScrollbars(referenceElement) {
-  const doc = ownerDocument(referenceElement);
-  const html = doc.documentElement;
-  const body = doc.body;
+const visuallyHiddenBase = {
+  clipPath: 'inset(50%)',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  border: 0,
+  padding: 0,
+  width: 1,
+  height: 1,
+  margin: -1
+};
+const visuallyHidden = {
+  ...visuallyHiddenBase,
+  position: 'fixed',
+  top: 0,
+  left: 0
+};
+const visuallyHiddenInput = {
+  ...visuallyHiddenBase,
+  position: 'absolute'
+};
 
-  // If an `overflow` style is present on <html>, we need to lock it, because a lock on <body>
-  // won't have any effect.
-  // But if <body> has an `overflow` style (like `overflow-x: hidden`), we need to lock it
-  // instead, as sticky elements shift otherwise.
-  const elementToLock = isOverflowElement(html) ? html : body;
-  const originalElementToLockStyles = {
-    overflowY: elementToLock.style.overflowY,
-    overflowX: elementToLock.style.overflowX
+const FocusGuard = /*#__PURE__*/React.forwardRef(function FocusGuard(props, ref) {
+  const [role, setRole] = React.useState();
+  useIsoLayoutEffect(() => {
+    if (isSafari) {
+      // Unlike other screen readers such as NVDA and JAWS, the virtual cursor
+      // on VoiceOver does trigger the onFocus event, so we can use the focus
+      // trap element. On Safari, only buttons trigger the onFocus event.
+      setRole('button');
+    }
+  }, []);
+  const restProps = {
+    tabIndex: 0,
+    // Role is only for VoiceOver
+    role
   };
-  Object.assign(elementToLock.style, {
-    overflowY: 'hidden',
-    overflowX: 'hidden'
+  return /*#__PURE__*/jsx("span", {
+    ...props,
+    ref: ref,
+    style: visuallyHidden,
+    "aria-hidden": role ? undefined : true,
+    ...restProps,
+    "data-base-ui-focus-guard": ""
   });
-  return () => {
-    Object.assign(elementToLock.style, originalElementToLockStyles);
-  };
+});
+if (process.env.NODE_ENV !== "production") FocusGuard.displayName = "FocusGuard";
+
+function createAttribute(name) {
+  return `data-base-ui-${name}`;
 }
-function preventScrollInsetScrollbars(referenceElement) {
-  const doc = ownerDocument(referenceElement);
-  const html = doc.documentElement;
-  const body = doc.body;
-  const win = getWindow(html);
-  let scrollTop = 0;
-  let scrollLeft = 0;
-  let updateGutterOnly = false;
-  const resizeFrame = AnimationFrame.create();
 
-  // Pinch-zoom in Safari causes a shift. Just don't lock scroll if there's any pinch-zoom.
-  if (isWebKit && (win.visualViewport?.scale ?? 1) !== 1) {
-    return () => {};
+let rafId = 0;
+function enqueueFocus(el, options = {}) {
+  const {
+    preventScroll = false,
+    cancelPrevious = true,
+    sync = false
+  } = options;
+  if (cancelPrevious) {
+    cancelAnimationFrame(rafId);
   }
-  function lockScroll() {
-    /* DOM reads: */
-
-    const htmlStyles = win.getComputedStyle(html);
-    const bodyStyles = win.getComputedStyle(body);
-    const htmlScrollbarGutterValue = htmlStyles.scrollbarGutter || '';
-    const hasBothEdges = htmlScrollbarGutterValue.includes('both-edges');
-    const scrollbarGutterValue = hasBothEdges ? 'stable both-edges' : 'stable';
-    scrollTop = html.scrollTop;
-    scrollLeft = html.scrollLeft;
-    originalHtmlStyles = {
-      scrollbarGutter: html.style.scrollbarGutter,
-      overflowY: html.style.overflowY,
-      overflowX: html.style.overflowX
-    };
-    originalHtmlScrollBehavior = html.style.scrollBehavior;
-    originalBodyStyles = {
-      position: body.style.position,
-      height: body.style.height,
-      width: body.style.width,
-      boxSizing: body.style.boxSizing,
-      overflowY: body.style.overflowY,
-      overflowX: body.style.overflowX,
-      scrollBehavior: body.style.scrollBehavior
-    };
-    const isScrollableY = html.scrollHeight > html.clientHeight;
-    const isScrollableX = html.scrollWidth > html.clientWidth;
-    const hasConstantOverflowY = htmlStyles.overflowY === 'scroll' || bodyStyles.overflowY === 'scroll';
-    const hasConstantOverflowX = htmlStyles.overflowX === 'scroll' || bodyStyles.overflowX === 'scroll';
-
-    // Values can be negative in Firefox
-    const scrollbarWidth = Math.max(0, win.innerWidth - body.clientWidth);
-    const scrollbarHeight = Math.max(0, win.innerHeight - body.clientHeight);
-
-    // Avoid shift due to the default <body> margin. This does cause elements to be clipped
-    // with whitespace. Warn if <body> has margins?
-    const marginY = parseFloat(bodyStyles.marginTop) + parseFloat(bodyStyles.marginBottom);
-    const marginX = parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight);
-    const elementToLock = isOverflowElement(html) ? html : body;
-    updateGutterOnly = supportsStableScrollbarGutter(referenceElement);
-
-    /*
-     * DOM writes:
-     * Do not read the DOM past this point!
-     */
-
-    if (updateGutterOnly) {
-      html.style.scrollbarGutter = scrollbarGutterValue;
-      elementToLock.style.overflowY = 'hidden';
-      elementToLock.style.overflowX = 'hidden';
-      return;
-    }
-    Object.assign(html.style, {
-      scrollbarGutter: scrollbarGutterValue,
-      overflowY: 'hidden',
-      overflowX: 'hidden'
-    });
-    if (isScrollableY || hasConstantOverflowY) {
-      html.style.overflowY = 'scroll';
-    }
-    if (isScrollableX || hasConstantOverflowX) {
-      html.style.overflowX = 'scroll';
-    }
-    Object.assign(body.style, {
-      position: 'relative',
-      height: marginY || scrollbarHeight ? `calc(100dvh - ${marginY + scrollbarHeight}px)` : '100dvh',
-      width: marginX || scrollbarWidth ? `calc(100vw - ${marginX + scrollbarWidth}px)` : '100vw',
-      boxSizing: 'border-box',
-      overflow: 'hidden',
-      scrollBehavior: 'unset'
-    });
-    body.scrollTop = scrollTop;
-    body.scrollLeft = scrollLeft;
-    html.setAttribute('data-base-ui-scroll-locked', '');
-    html.style.scrollBehavior = 'unset';
-  }
-  function cleanup() {
-    Object.assign(html.style, originalHtmlStyles);
-    Object.assign(body.style, originalBodyStyles);
-    if (!updateGutterOnly) {
-      html.scrollTop = scrollTop;
-      html.scrollLeft = scrollLeft;
-      html.removeAttribute('data-base-ui-scroll-locked');
-      html.style.scrollBehavior = originalHtmlScrollBehavior;
-    }
-  }
-  function handleResize() {
-    cleanup();
-    resizeFrame.request(lockScroll);
-  }
-  lockScroll();
-  win.addEventListener('resize', handleResize);
-  return () => {
-    resizeFrame.cancel();
-    cleanup();
-    // Sometimes this cleanup can be run after test teardown
-    // because it is called in a `setTimeout(fn, 0)`,
-    // in which case `removeEventListener` wouldn't be available,
-    // so we check for it to avoid test failures.
-    if (typeof win.removeEventListener === 'function') {
-      win.removeEventListener('resize', handleResize);
-    }
-  };
-}
-class ScrollLocker {
-  lockCount = 0;
-  restore = null;
-  timeoutLock = Timeout.create();
-  timeoutUnlock = Timeout.create();
-  acquire(referenceElement) {
-    this.lockCount += 1;
-    if (this.lockCount === 1 && this.restore === null) {
-      this.timeoutLock.start(0, () => this.lock(referenceElement));
-    }
-    return this.release;
-  }
-  release = () => {
-    this.lockCount -= 1;
-    if (this.lockCount === 0 && this.restore) {
-      this.timeoutUnlock.start(0, this.unlock);
-    }
-  };
-  unlock = () => {
-    if (this.lockCount === 0 && this.restore) {
-      this.restore?.();
-      this.restore = null;
-    }
-  };
-  lock(referenceElement) {
-    if (this.lockCount === 0 || this.restore !== null) {
-      return;
-    }
-    const doc = ownerDocument(referenceElement);
-    const html = doc.documentElement;
-    const htmlOverflowY = getWindow(html).getComputedStyle(html).overflowY;
-
-    // If the site author already hid overflow on <html>, respect it and bail out.
-    if (htmlOverflowY === 'hidden' || htmlOverflowY === 'clip') {
-      this.restore = NOOP;
-      return;
-    }
-    const hasOverlayScrollbars = isIOS || !hasInsetScrollbars(referenceElement);
-
-    // On iOS, scroll locking does not work if the navbar is collapsed. Due to numerous
-    // side effects and bugs that arise on iOS, it must be researched extensively before
-    // being enabled to ensure it doesn't cause the following issues:
-    // - Textboxes must scroll into view when focused, nor cause a glitchy scroll animation.
-    // - The navbar must not force itself into view and cause layout shift.
-    // - Scroll containers must not flicker upon closing a popup when it has an exit animation.
-    this.restore = hasOverlayScrollbars ? preventScrollOverlayScrollbars(referenceElement) : preventScrollInsetScrollbars(referenceElement);
-  }
-}
-const SCROLL_LOCKER = new ScrollLocker();
-
-/**
- * Locks the scroll of the document when enabled.
- *
- * @param enabled - Whether to enable the scroll lock.
- * @param referenceElement - Element to use as a reference for lock calculations.
- */
-function useScrollLock(enabled = true, referenceElement = null) {
-  useIsoLayoutEffect(() => {
-    if (!enabled) {
-      return undefined;
-    }
-    return SCROLL_LOCKER.acquire(referenceElement);
-  }, [enabled, referenceElement]);
-}
-
-/**
- * Untracks the provided value by turning it into a ref to remove its reactivity.
- *
- * Used to access the passed value inside `React.useEffect` without causing the effect to re-run when the value changes.
- */
-function useValueAsRef(value) {
-  const latest = useRefWithInit(createLatestRef, value).current;
-  latest.next = value;
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useIsoLayoutEffect(latest.effect);
-  return latest;
-}
-function createLatestRef(value) {
-  const latest = {
-    current: value,
-    next: value,
-    effect: () => {
-      latest.current = latest.next;
-    }
-  };
-  return latest;
-}
-
-const visuallyHiddenBase = {
-  clipPath: 'inset(50%)',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  border: 0,
-  padding: 0,
-  width: 1,
-  height: 1,
-  margin: -1
-};
-const visuallyHidden = {
-  ...visuallyHiddenBase,
-  position: 'fixed',
-  top: 0,
-  left: 0
-};
-const visuallyHiddenInput = {
-  ...visuallyHiddenBase,
-  position: 'absolute'
-};
-
-const FocusGuard = /*#__PURE__*/React.forwardRef(function FocusGuard(props, ref) {
-  const [role, setRole] = React.useState();
-  useIsoLayoutEffect(() => {
-    if (isSafari) {
-      // Unlike other screen readers such as NVDA and JAWS, the virtual cursor
-      // on VoiceOver does trigger the onFocus event, so we can use the focus
-      // trap element. On Safari, only buttons trigger the onFocus event.
-      setRole('button');
-    }
-  }, []);
-  const restProps = {
-    tabIndex: 0,
-    // Role is only for VoiceOver
-    role
-  };
-  return /*#__PURE__*/jsx("span", {
-    ...props,
-    ref: ref,
-    style: visuallyHidden,
-    "aria-hidden": role ? undefined : true,
-    ...restProps,
-    "data-base-ui-focus-guard": ""
-  });
-});
-if (process.env.NODE_ENV !== "production") FocusGuard.displayName = "FocusGuard";
-
-function createAttribute(name) {
-  return `data-base-ui-${name}`;
-}
-
-let rafId = 0;
-function enqueueFocus(el, options = {}) {
-  const {
-    preventScroll = false,
-    cancelPrevious = true,
-    sync = false
-  } = options;
-  if (cancelPrevious) {
-    cancelAnimationFrame(rafId);
-  }
-  const exec = () => el?.focus({
-    preventScroll
-  });
-  if (sync) {
-    exec();
-  } else {
-    rafId = requestAnimationFrame(exec);
-  }
-}
+  const exec = () => el?.focus({
+    preventScroll
+  });
+  if (sync) {
+    exec();
+  } else {
+    rafId = requestAnimationFrame(exec);
+  }
+}
 
 // Modified to add conditional `aria-hidden` support:
 // https://github.com/theKashey/aria-hidden/blob/9220c8f4a4fd35f63bee5510a9f41a37264382d4/src/index.ts
@@ -1899,13 +1725,33 @@ function createEventEmitter() {
   };
 }
 
-const FloatingNodeContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") FloatingNodeContext.displayName = "FloatingNodeContext";
-const FloatingTreeContext = /*#__PURE__*/React.createContext(null);
-
 /**
- * Returns the parent node id for nested floating elements, if available.
- * Returns `null` for top-level floating elements.
+ * Stores and manages floating elements in a tree structure.
+ * This is a backing store for the `FloatingTree` component.
+ */
+class FloatingTreeStore {
+  nodesRef = {
+    current: []
+  };
+  events = createEventEmitter();
+  addNode(node) {
+    this.nodesRef.current.push(node);
+  }
+  removeNode(node) {
+    const index = this.nodesRef.current.findIndex(n => n === node);
+    if (index !== -1) {
+      this.nodesRef.current.splice(index, 1);
+    }
+  }
+}
+
+const FloatingNodeContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") FloatingNodeContext.displayName = "FloatingNodeContext";
+const FloatingTreeContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Returns the parent node id for nested floating elements, if available.
+ * Returns `null` for top-level floating elements.
  */
 if (process.env.NODE_ENV !== "production") FloatingTreeContext.displayName = "FloatingTreeContext";
 const useFloatingParentNodeId = () => React.useContext(FloatingNodeContext)?.id || null;
@@ -1918,6 +1764,82 @@ const useFloatingTree = externalTree => {
   return externalTree ?? contextTree;
 };
 
+/**
+ * Registers a node into the `FloatingTree`, returning its id.
+ * @see https://floating-ui.com/docs/FloatingTree
+ */
+function useFloatingNodeId(externalTree) {
+  const id = useId();
+  const tree = useFloatingTree(externalTree);
+  const parentId = useFloatingParentNodeId();
+  useIsoLayoutEffect(() => {
+    if (!id) {
+      return undefined;
+    }
+    const node = {
+      id,
+      parentId
+    };
+    tree?.addNode(node);
+    return () => {
+      tree?.removeNode(node);
+    };
+  }, [tree, id, parentId]);
+  return id;
+}
+/**
+ * Provides parent node context for nested floating elements.
+ * @see https://floating-ui.com/docs/FloatingTree
+ * @internal
+ */
+function FloatingNode(props) {
+  const {
+    children,
+    id
+  } = props;
+  const parentId = useFloatingParentNodeId();
+  return /*#__PURE__*/jsx(FloatingNodeContext.Provider, {
+    value: React.useMemo(() => ({
+      id,
+      parentId
+    }), [id, parentId]),
+    children: children
+  });
+}
+/**
+ * Provides context for nested floating elements when they are not children of
+ * each other on the DOM.
+ * This is not necessary in all cases, except when there must be explicit communication between parent and child floating elements. It is necessary for:
+ * - The `bubbles` option in the `useDismiss()` Hook
+ * - Nested virtual list navigation
+ * - Nested floating elements that each open on hover
+ * - Custom communication between parent and child floating elements
+ * @see https://floating-ui.com/docs/FloatingTree
+ * @internal
+ */
+function FloatingTree(props) {
+  const {
+    children,
+    externalTree
+  } = props;
+  const tree = useRefWithInit(() => externalTree ?? new FloatingTreeStore()).current;
+  return /*#__PURE__*/jsx(FloatingTreeContext.Provider, {
+    value: tree,
+    children: children
+  });
+}
+
+/**
+ * If the provided argument is a ref object, returns its `current` value.
+ * Otherwise, returns the argument itself.
+ */
+function resolveRef(maybeRef) {
+  if (maybeRef == null) {
+    return maybeRef;
+  }
+  return 'current' in maybeRef ? maybeRef.current : maybeRef;
+}
+
 function getEventType(event, lastInteractionType) {
   const win = getWindow(event.target);
   if (event instanceof win.KeyboardEvent) {
@@ -3476,6 +3398,195 @@ const createSelector = (a, b, c, d, e, f, ...other) => {
   return selector;
 };
 
+var shim = {exports: {}};
+
+var useSyncExternalStoreShim_production = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_production;
+
+function requireUseSyncExternalStoreShim_production () {
+	if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
+	hasRequiredUseSyncExternalStoreShim_production = 1;
+	var React = React__default;
+	function is(x, y) {
+	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+	}
+	var objectIs = "function" === typeof Object.is ? Object.is : is,
+	  useState = React.useState,
+	  useEffect = React.useEffect,
+	  useLayoutEffect = React.useLayoutEffect,
+	  useDebugValue = React.useDebugValue;
+	function useSyncExternalStore$2(subscribe, getSnapshot) {
+	  var value = getSnapshot(),
+	    _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
+	    inst = _useState[0].inst,
+	    forceUpdate = _useState[1];
+	  useLayoutEffect(
+	    function () {
+	      inst.value = value;
+	      inst.getSnapshot = getSnapshot;
+	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	    },
+	    [subscribe, value, getSnapshot]
+	  );
+	  useEffect(
+	    function () {
+	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	      return subscribe(function () {
+	        checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	      });
+	    },
+	    [subscribe]
+	  );
+	  useDebugValue(value);
+	  return value;
+	}
+	function checkIfSnapshotChanged(inst) {
+	  var latestGetSnapshot = inst.getSnapshot;
+	  inst = inst.value;
+	  try {
+	    var nextValue = latestGetSnapshot();
+	    return !objectIs(inst, nextValue);
+	  } catch (error) {
+	    return !0;
+	  }
+	}
+	function useSyncExternalStore$1(subscribe, getSnapshot) {
+	  return getSnapshot();
+	}
+	var shim =
+	  "undefined" === typeof window ||
+	  "undefined" === typeof window.document ||
+	  "undefined" === typeof window.document.createElement
+	    ? useSyncExternalStore$1
+	    : useSyncExternalStore$2;
+	useSyncExternalStoreShim_production.useSyncExternalStore =
+	  void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+	return useSyncExternalStoreShim_production;
+}
+
+var useSyncExternalStoreShim_development = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_development;
+
+function requireUseSyncExternalStoreShim_development () {
+	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
+	hasRequiredUseSyncExternalStoreShim_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function is(x, y) {
+	      return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+	    }
+	    function useSyncExternalStore$2(subscribe, getSnapshot) {
+	      didWarnOld18Alpha ||
+	        void 0 === React.startTransition ||
+	        ((didWarnOld18Alpha = !0),
+	        console.error(
+	          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+	        ));
+	      var value = getSnapshot();
+	      if (!didWarnUncachedGetSnapshot) {
+	        var cachedValue = getSnapshot();
+	        objectIs(value, cachedValue) ||
+	          (console.error(
+	            "The result of getSnapshot should be cached to avoid an infinite loop"
+	          ),
+	          (didWarnUncachedGetSnapshot = !0));
+	      }
+	      cachedValue = useState({
+	        inst: { value: value, getSnapshot: getSnapshot }
+	      });
+	      var inst = cachedValue[0].inst,
+	        forceUpdate = cachedValue[1];
+	      useLayoutEffect(
+	        function () {
+	          inst.value = value;
+	          inst.getSnapshot = getSnapshot;
+	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	        },
+	        [subscribe, value, getSnapshot]
+	      );
+	      useEffect(
+	        function () {
+	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	          return subscribe(function () {
+	            checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	          });
+	        },
+	        [subscribe]
+	      );
+	      useDebugValue(value);
+	      return value;
+	    }
+	    function checkIfSnapshotChanged(inst) {
+	      var latestGetSnapshot = inst.getSnapshot;
+	      inst = inst.value;
+	      try {
+	        var nextValue = latestGetSnapshot();
+	        return !objectIs(inst, nextValue);
+	      } catch (error) {
+	        return !0;
+	      }
+	    }
+	    function useSyncExternalStore$1(subscribe, getSnapshot) {
+	      return getSnapshot();
+	    }
+	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+	      "function" ===
+	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
+	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+	    var React = React__default,
+	      objectIs = "function" === typeof Object.is ? Object.is : is,
+	      useState = React.useState,
+	      useEffect = React.useEffect,
+	      useLayoutEffect = React.useLayoutEffect,
+	      useDebugValue = React.useDebugValue,
+	      didWarnOld18Alpha = !1,
+	      didWarnUncachedGetSnapshot = !1,
+	      shim =
+	        "undefined" === typeof window ||
+	        "undefined" === typeof window.document ||
+	        "undefined" === typeof window.document.createElement
+	          ? useSyncExternalStore$1
+	          : useSyncExternalStore$2;
+	    useSyncExternalStoreShim_development.useSyncExternalStore =
+	      void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+	      "function" ===
+	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
+	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+	  })();
+	return useSyncExternalStoreShim_development;
+}
+
+if (process.env.NODE_ENV === 'production') {
+  shim.exports = requireUseSyncExternalStoreShim_production();
+} else {
+  shim.exports = requireUseSyncExternalStoreShim_development();
+}
+
+var shimExports = shim.exports;
+
 var withSelector = {exports: {}};
 
 var withSelector_production = {};
@@ -3686,6 +3797,45 @@ if (process.env.NODE_ENV === 'production') {
 
 var withSelectorExports = withSelector.exports;
 
+const hooks = [];
+let currentInstance = undefined;
+function getInstance() {
+  return currentInstance;
+}
+function register(hook) {
+  hooks.push(hook);
+}
+function fastComponent(fn) {
+  const FastComponent = (props, forwardedRef) => {
+    const instance = useRefWithInit(createInstance).current;
+    let result;
+    try {
+      currentInstance = instance;
+      for (const hook of hooks) {
+        hook.before(instance);
+      }
+      result = fn(props, forwardedRef);
+      for (const hook of hooks) {
+        hook.after(instance);
+      }
+      instance.didInitialize = true;
+    } finally {
+      currentInstance = undefined;
+    }
+    return result;
+  };
+  FastComponent.displayName = fn.displayName || fn.name;
+  return FastComponent;
+}
+function fastComponentRef(fn) {
+  return /*#__PURE__*/React.forwardRef(fastComponent(fn));
+}
+function createInstance() {
+  return {
+    didInitialize: false
+  };
+}
+
 /* Some tests fail in R18 with the raw useSyncExternalStore. It may be possible to make it work
  * but for now we only enable it for R19+. */
 const canUseRawUseSyncExternalStore = isReactVersionAtLeast(19);
@@ -3697,11 +3847,91 @@ function useStoreR19(store, selector, a1, a2, a3) {
   const getSelection = React.useCallback(() => selector(store.getSnapshot(), a1, a2, a3), [store, selector, a1, a2, a3]);
   return shimExports.useSyncExternalStore(store.subscribe, getSelection, getSelection);
 }
+register({
+  before(instance) {
+    instance.syncIndex = 0;
+    if (!instance.didInitialize) {
+      instance.syncTick = 1;
+      instance.syncHooks = [];
+      instance.didChangeStore = true;
+      instance.getSnapshot = () => {
+        let didChange = false;
+        for (let i = 0; i < instance.syncHooks.length; i += 1) {
+          const hook = instance.syncHooks[i];
+          const value = hook.selector(hook.store.state, hook.a1, hook.a2, hook.a3);
+          if (hook.didChange || !Object.is(hook.value, value)) {
+            didChange = true;
+            hook.value = value;
+            hook.didChange = false;
+          }
+        }
+        if (didChange) {
+          instance.syncTick += 1;
+        }
+        return instance.syncTick;
+      };
+    }
+  },
+  after(instance) {
+    if (instance.syncHooks.length > 0) {
+      if (instance.didChangeStore) {
+        instance.didChangeStore = false;
+        instance.subscribe = onStoreChange => {
+          const stores = new Set();
+          for (const hook of instance.syncHooks) {
+            stores.add(hook.store);
+          }
+          const unsubscribes = [];
+          for (const store of stores) {
+            unsubscribes.push(store.subscribe(onStoreChange));
+          }
+          return () => {
+            for (const unsubscribe of unsubscribes) {
+              unsubscribe();
+            }
+          };
+        };
+      }
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      shimExports.useSyncExternalStore(instance.subscribe, instance.getSnapshot, instance.getSnapshot);
+    }
+  }
+});
 function useStoreFast(store, selector, a1, a2, a3) {
-  {
+  const instance = getInstance();
+  if (!instance) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     return useStoreR19(store, selector, a1, a2, a3);
   }
+  const index = instance.syncIndex;
+  instance.syncIndex += 1;
+  let hook;
+  if (!instance.didInitialize) {
+    hook = {
+      store,
+      selector,
+      a1,
+      a2,
+      a3,
+      value: selector(store.getSnapshot(), a1, a2, a3),
+      didChange: false
+    };
+    instance.syncHooks.push(hook);
+  } else {
+    hook = instance.syncHooks[index];
+    if (hook.store !== store || hook.selector !== selector || !Object.is(hook.a1, a1) || !Object.is(hook.a2, a2) || !Object.is(hook.a3, a3)) {
+      if (hook.store !== store) {
+        instance.didChangeStore = true;
+      }
+      hook.store = store;
+      hook.selector = selector;
+      hook.a1 = a1;
+      hook.a2 = a2;
+      hook.a3 = a3;
+      hook.didChange = true;
+    }
+  }
+  return hook.value;
 }
 function useStoreLegacy(store, selector, a1, a2, a3) {
   return withSelectorExports.useSyncExternalStoreWithSelector(store.subscribe, store.getSnapshot, store.getSnapshot, state => selector(state, a1, a2, a3));
@@ -4070,40 +4300,212 @@ class FloatingRootStore extends ReactStore {
 }
 
 /**
- * Returns a callback ref that registers/unregisters the trigger element in the store.
- *
- * @param store The Store instance where the trigger should be registered.
+ * Provides a status string for CSS animations.
+ * @param open - a boolean that determines if the element is open.
+ * @param enableIdleState - a boolean that enables the `'idle'` state between `'starting'` and `'ending'`
  */
-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;
+function useTransitionStatus(open, enableIdleState = false, deferEndingState = false) {
+  const [transitionStatus, setTransitionStatus] = React.useState(open && enableIdleState ? 'idle' : undefined);
+  const [mounted, setMounted] = React.useState(open);
+  if (open && !mounted) {
+    setMounted(true);
+    setTransitionStatus('starting');
+  }
+  if (!open && mounted && transitionStatus !== 'ending' && !deferEndingState) {
+    setTransitionStatus('ending');
+  }
+  if (!open && !mounted && transitionStatus === 'ending') {
+    setTransitionStatus(undefined);
+  }
+  useIsoLayoutEffect(() => {
+    if (!open && mounted && transitionStatus !== 'ending' && deferEndingState) {
+      const frame = AnimationFrame.request(() => {
+        setTransitionStatus('ending');
+      });
+      return () => {
+        AnimationFrame.cancel(frame);
+      };
     }
-    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;
+    return undefined;
+  }, [open, mounted, transitionStatus, deferEndingState]);
+  useIsoLayoutEffect(() => {
+    if (!open || enableIdleState) {
+      return undefined;
     }
-    if (element !== null) {
-      registeredElementIdRef.current = id;
-      registeredElementRef.current = element;
-      store.context.triggerElements.add(id, element);
+    const frame = AnimationFrame.request(() => {
+      // Avoid `flushSync` here due to Firefox.
+      // See https://github.com/mui/base-ui/pull/3424
+      setTransitionStatus(undefined);
+    });
+    return () => {
+      AnimationFrame.cancel(frame);
+    };
+  }, [enableIdleState, open]);
+  useIsoLayoutEffect(() => {
+    if (!open || !enableIdleState) {
+      return undefined;
     }
-  }, [store, id]);
+    if (open && mounted && transitionStatus !== 'idle') {
+      setTransitionStatus('starting');
+    }
+    const frame = AnimationFrame.request(() => {
+      setTransitionStatus('idle');
+    });
+    return () => {
+      AnimationFrame.cancel(frame);
+    };
+  }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]);
+  return React.useMemo(() => ({
+    mounted,
+    setMounted,
+    transitionStatus
+  }), [mounted, transitionStatus]);
 }
 
 /**
- * Sets up trigger data forwarding to the store.
- *
- * @param triggerId Id of the trigger.
+ * Executes a function once all animations have finished on the provided element.
+ * @param elementOrRef - The element to watch for animations.
+ * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
+ * @param treatAbortedAsFinished - Whether to treat aborted animations as finished. If `false`, and there are aborted animations,
+ *   the function will check again if any new animations have started and wait for them to finish.
+ * @returns A function that takes a callback to execute once all animations have finished, and an optional AbortSignal to abort the callback
+ */
+function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) {
+  const frame = useAnimationFrame();
+  return useStableCallback((fnToExecute,
+  /**
+   * An optional [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that
+   * can be used to abort `fnToExecute` before all the animations have finished.
+   * @default null
+   */
+  signal = null) => {
+    frame.cancel();
+    function done() {
+      // Synchronously flush the unmounting of the component so that the browser doesn't
+      // paint: https://github.com/mui/base-ui/issues/979
+      ReactDOM.flushSync(fnToExecute);
+    }
+    const element = resolveRef(elementOrRef);
+    if (element == null) {
+      return;
+    }
+    const resolvedElement = element;
+    if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
+      fnToExecute();
+    } else {
+      function execWaitForStartingStyleRemoved() {
+        const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle;
+
+        // If `[data-starting-style]` isn't present, fall back to waiting one more frame
+        // to give "open" animations a chance to be registered.
+        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+          frame.request(exec);
+          return;
+        }
+
+        // Wait for `[data-starting-style]` to have been removed.
+        const attributeObserver = new MutationObserver(() => {
+          if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+            attributeObserver.disconnect();
+            exec();
+          }
+        });
+        attributeObserver.observe(resolvedElement, {
+          attributes: true,
+          attributeFilter: [startingStyleAttribute]
+        });
+        signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
+          once: true
+        });
+      }
+      function exec() {
+        Promise.all(resolvedElement.getAnimations().map(anim => anim.finished)).then(() => {
+          if (signal?.aborted) {
+            return;
+          }
+          done();
+        }).catch(() => {
+          const currentAnimations = resolvedElement.getAnimations();
+          if (treatAbortedAsFinished) {
+            if (signal?.aborted) {
+              return;
+            }
+            done();
+          } else if (currentAnimations.length > 0 && currentAnimations.some(anim => anim.pending || anim.playState !== 'finished')) {
+            // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
+            // In such cases, we need to re-check if any new animations have started.
+            exec();
+          }
+        });
+      }
+      if (waitForStartingStyleRemoved) {
+        execWaitForStartingStyleRemoved();
+        return;
+      }
+      frame.request(exec);
+    }
+  });
+}
+
+/**
+ * Calls the provided function when the CSS open/close animation or transition completes.
+ */
+function useOpenChangeComplete(parameters) {
+  const {
+    enabled = true,
+    open,
+    ref,
+    onComplete: onCompleteParam
+  } = parameters;
+  const onComplete = useStableCallback(onCompleteParam);
+  const runOnceAnimationsFinish = useAnimationsFinished(ref, open, false);
+  React.useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    const abortController = new AbortController();
+    runOnceAnimationsFinish(onComplete, abortController.signal);
+    return () => {
+      abortController.abort();
+    };
+  }, [enabled, open, onComplete, runOnceAnimationsFinish]);
+}
+
+/**
+ * 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.
@@ -4204,6 +4606,7 @@ function useOpenStateTransitions(open, store, onUnmount) {
       activeTriggerElement: null,
       mounted: false
     });
+    onUnmount?.();
     store.context.onOpenChangeComplete?.(false);
   });
   const preventUnmountingOnClose = store.useState('preventUnmountingOnClose');
@@ -4625,1083 +5028,426 @@ function useRole(context, props = {}) {
   }), [reference, floating, trigger, item]);
 }
 
-/**
- * Provides a cross-browser way to determine the type of the pointer used to click.
- * Safari and Firefox do not provide the PointerEvent to the click handler (they use MouseEvent) yet.
- * Additionally, this implementation detects if the click was triggered by the keyboard.
- *
- * @param handler The function to be called when the button is clicked. The first parameter is the original event and the second parameter is the pointer type.
- */
-function useEnhancedClickHandler(handler) {
-  const lastClickInteractionTypeRef = React.useRef('');
-  const handlePointerDown = React.useCallback(event => {
-    if (event.defaultPrevented) {
-      return;
-    }
-    lastClickInteractionTypeRef.current = event.pointerType;
-    handler(event, event.pointerType);
-  }, [handler]);
-  const handleClick = React.useCallback(event => {
-    // event.detail has the number of clicks performed on the element. 0 means it was triggered by the keyboard.
-    if (event.detail === 0) {
-      handler(event, 'keyboard');
-      return;
-    }
-    if ('pointerType' in event) {
-      // Chrome and Edge correctly use PointerEvent
-      handler(event, event.pointerType);
-    } else {
-      handler(event, lastClickInteractionTypeRef.current);
-    }
-    lastClickInteractionTypeRef.current = '';
-  }, [handler]);
-  return {
-    onClick: handleClick,
-    onPointerDown: handlePointerDown
-  };
-}
+let DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Present when the drawer is at the expanded (full-height) snap point.
+   */
+  DrawerPopupDataAttributes["expanded"] = "data-expanded";
+  /**
+   * Present when a nested drawer is open.
+   */
+  DrawerPopupDataAttributes["nestedDrawerOpen"] = "data-nested-drawer-open";
+  /**
+   * Present when a nested drawer is being swiped.
+   */
+  DrawerPopupDataAttributes["nestedDrawerSwiping"] = "data-nested-drawer-swiping";
+  /**
+   * Present when the drawer is dismissed by swiping.
+   */
+  DrawerPopupDataAttributes["swipeDismiss"] = "data-swipe-dismiss";
+  /**
+   * Indicates the swipe direction.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  DrawerPopupDataAttributes["swipeDirection"] = "data-swipe-direction";
+  /**
+   * Present when the drawer is being swiped.
+   */
+  DrawerPopupDataAttributes["swiping"] = "data-swiping";
+  return DrawerPopupDataAttributes;
+}({});
 
-function useValueChanged(value, onChange) {
-  const valueRef = React.useRef(value);
-  const onChangeCallback = useStableCallback(onChange);
-  useIsoLayoutEffect(() => {
-    if (valueRef.current === value) {
-      return;
-    }
-    onChangeCallback(valueRef.current);
-  }, [value, onChangeCallback]);
-  useIsoLayoutEffect(() => {
-    valueRef.current = value;
-  }, [value]);
+const DialogPortalContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") DialogPortalContext.displayName = "DialogPortalContext";
+function useDialogPortalContext() {
+  const value = React.useContext(DialogPortalContext);
+  if (value === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Portal> is missing.' : formatErrorMessage(26));
+  }
+  return value;
 }
 
-/**
- * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
- *
- * @param open The open state of the component.
- */
-function useOpenInteractionType(open) {
-  const [openMethod, setOpenMethod] = React.useState(null);
-  const handleTriggerClick = useStableCallback((_, interactionType) => {
-    if (!open) {
-      setOpenMethod(interactionType || (
-      // On iOS Safari, the hitslop around touch targets means tapping outside an element's
-      // bounds does not fire `pointerdown` but does fire `mousedown`. The `interactionType`
-      // will be "" in that case.
-      isIOS ? 'touch' : ''));
+const ARROW_UP = 'ArrowUp';
+const ARROW_DOWN = 'ArrowDown';
+const ARROW_LEFT = 'ArrowLeft';
+const ARROW_RIGHT = 'ArrowRight';
+const HOME = 'Home';
+const END = 'End';
+const HORIZONTAL_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT]);
+const VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN]);
+const ARROW_KEYS = new Set([...HORIZONTAL_KEYS, ...VERTICAL_KEYS]);
+new Set([...ARROW_KEYS, HOME, END]);
+const COMPOSITE_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END]);
+
+const DrawerRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") DrawerRootContext.displayName = "DrawerRootContext";
+function useDrawerRootContext(optional) {
+  const drawerRootContext = React.useContext(DrawerRootContext);
+  if (optional === false && drawerRootContext === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DrawerRootContext is missing. Drawer parts must be placed within <Drawer.Root>.' : formatErrorMessage(90));
+  }
+  return drawerRootContext;
+}
+
+function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
+  return Math.max(min, Math.min(val, max));
+}
+
+function resolveSnapPointValue(snapPoint, viewportHeight, rootFontSize) {
+  if (!Number.isFinite(viewportHeight) || viewportHeight <= 0) {
+    return null;
+  }
+  if (typeof snapPoint === 'number') {
+    if (!Number.isFinite(snapPoint)) {
+      return null;
     }
-  });
-  useValueChanged(open, previousOpen => {
-    if (previousOpen && !open) {
-      setOpenMethod(null);
+    if (snapPoint <= 1) {
+      return clamp(snapPoint, 0, 1) * viewportHeight;
     }
-  });
-  const {
-    onClick,
-    onPointerDown
-  } = useEnhancedClickHandler(handleTriggerClick);
-  return React.useMemo(() => ({
-    openMethod,
-    triggerProps: {
-      onClick,
-      onPointerDown
+    return snapPoint;
+  }
+  const trimmed = snapPoint.trim();
+  if (trimmed.endsWith('px')) {
+    const value = Number.parseFloat(trimmed);
+    return Number.isFinite(value) ? value : null;
+  }
+  if (trimmed.endsWith('rem')) {
+    const value = Number.parseFloat(trimmed);
+    return Number.isFinite(value) ? value * rootFontSize : null;
+  }
+  return null;
+}
+function findClosestSnapPoint(height, points) {
+  let closest = null;
+  let closestDistance = Infinity;
+  for (const point of points) {
+    const distance = Math.abs(point.height - height);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closest = point;
     }
-  }), [openMethod, onClick, onPointerDown]);
+  }
+  return closest;
 }
-
-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');
+function useDrawerSnapPoints() {
   const {
-    openMethod,
-    triggerProps
-  } = useOpenInteractionType(open);
-  useImplicitActiveTrigger(store);
+    store
+  } = useDialogRootContext();
   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]);
-  React.useImperativeHandle(actionsRef, () => ({
-    unmount: forceUnmount,
-    close: handleImperativeClose
-  }), [forceUnmount, handleImperativeClose]);
-  const floatingRootContext = useSyncedFloatingRootContext({
-    popupStore: store,
-    onOpenChange: store.setOpen,
-    treatPopupAsFloatingElement: true,
-    noEmit: true
+    snapPoints,
+    activeSnapPoint,
+    setActiveSnapPoint,
+    popupHeight
+  } = useDrawerRootContext();
+  const viewportElement = store.useState('viewportElement');
+  const [viewportHeight, setViewportHeight] = React.useState(0);
+  const [rootFontSize, setRootFontSize] = React.useState(16);
+  const measureViewportHeight = useStableCallback(() => {
+    const doc = ownerDocument(viewportElement);
+    const html = doc.documentElement;
+    if (viewportElement) {
+      setViewportHeight(viewportElement.offsetHeight);
+    }
+    if (!viewportElement) {
+      setViewportHeight(html.clientHeight);
+    }
+    const fontSize = parseFloat(getComputedStyle(html).fontSize);
+    if (Number.isFinite(fontSize)) {
+      setRootFontSize(fontSize);
+    }
   });
-  const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = 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) {
-        return 'intentional';
+  useIsoLayoutEffect(() => {
+    measureViewportHeight();
+    if (!viewportElement || typeof ResizeObserver !== 'function') {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(measureViewportHeight);
+    resizeObserver.observe(viewportElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [measureViewportHeight, viewportElement]);
+  const resolvedSnapPoints = React.useMemo(() => {
+    if (!snapPoints || snapPoints.length === 0 || viewportHeight <= 0 || popupHeight <= 0) {
+      return [];
+    }
+    const maxHeight = Math.min(popupHeight, viewportHeight);
+    if (!Number.isFinite(maxHeight) || maxHeight <= 0) {
+      return [];
+    }
+    const resolved = snapPoints.map(value => {
+      const resolvedHeight = resolveSnapPointValue(value, viewportHeight, rootFontSize);
+      if (resolvedHeight === null || !Number.isFinite(resolvedHeight)) {
+        return null;
       }
-      // Ensure `aria-hidden` on outside elements is removed immediately
-      // on outside press when trapping focus.
+      const clampedHeight = clamp(resolvedHeight, 0, maxHeight);
       return {
-        mouse: modal === 'trap-focus' ? 'sloppy' : 'intentional',
-        touch: 'sloppy'
+        value,
+        height: clampedHeight,
+        offset: Math.max(0, popupHeight - clampedHeight)
       };
-    },
-    outsidePress(event) {
-      if (!store.context.outsidePressEnabledRef.current) {
-        return false;
-      }
-
-      // For mouse events, only accept left button (button 0)
-      // For touch events, a single touch is equivalent to left button
-      if ('button' in event && event.button !== 0) {
-        return false;
-      }
-      if ('touches' in event && event.touches.length !== 1) {
-        return false;
-      }
-      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 true;
+    }).filter(point => Boolean(point));
+    if (resolved.length <= 1) {
+      return resolved;
+    }
+    const deduped = [];
+    const seenHeights = [];
+    for (let index = resolved.length - 1; index >= 0; index -= 1) {
+      const point = resolved[index];
+      const isDuplicate = seenHeights.some(height => Math.abs(height - point.height) <= 1);
+      if (isDuplicate) {
+        continue;
       }
-      return false;
-    },
-    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);
-  });
-  store.useContextCallback('onNestedDialogClose', () => {
-    setOwnNestedOpenDialogs(0);
-  });
-
-  // Notify parent of our open/close state using parent callbacks, if any
-  React.useEffect(() => {
-    if (parentContext?.onNestedDialogOpen && open) {
-      parentContext.onNestedDialogOpen(ownNestedOpenDialogs);
+      seenHeights.push(point.height);
+      deduped.push(point);
     }
-    if (parentContext?.onNestedDialogClose && !open) {
-      parentContext.onNestedDialogClose();
+    deduped.reverse();
+    return deduped;
+  }, [popupHeight, rootFontSize, snapPoints, viewportHeight]);
+  const resolvedActiveSnapPoint = React.useMemo(() => {
+    if (activeSnapPoint === undefined) {
+      return resolvedSnapPoints[0];
     }
-    return () => {
-      if (parentContext?.onNestedDialogClose && open) {
-        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,
-    activeTriggerProps,
-    inactiveTriggerProps,
-    popupProps,
-    floatingRootContext,
-    nestedOpenDialogCount: ownNestedOpenDialogs
-  });
-}
-
-const DialogRootContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") DialogRootContext.displayName = "DialogRootContext";
-function useDialogRootContext(optional) {
-  const dialogRootContext = React.useContext(DialogRootContext);
-  if (optional === false && dialogRootContext === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>.' : formatErrorMessage(27));
-  }
-  return dialogRootContext;
-}
-
-const selectors = {
-  ...popupStoreSelectors,
-  modal: createSelector(state => state.modal),
-  nested: createSelector(state => state.nested),
-  nestedOpenDialogCount: createSelector(state => state.nestedOpenDialogCount),
-  disablePointerDismissal: createSelector(state => state.disablePointerDismissal),
-  openMethod: createSelector(state => state.openMethod),
-  descriptionElementId: createSelector(state => state.descriptionElementId),
-  titleElementId: createSelector(state => state.titleElementId),
-  viewportElement: createSelector(state => state.viewportElement),
-  role: createSelector(state => state.role)
-};
-class DialogStore extends ReactStore {
-  constructor(initialState) {
-    super(createInitialState(initialState), {
-      popupRef: /*#__PURE__*/React.createRef(),
-      backdropRef: /*#__PURE__*/React.createRef(),
-      internalBackdropRef: /*#__PURE__*/React.createRef(),
-      outsidePressEnabledRef: {
-        current: true
-      },
-      triggerElements: new PopupTriggerMap(),
-      onOpenChange: undefined,
-      onOpenChangeComplete: undefined
-    }, selectors);
-  }
-  setOpen = (nextOpen, eventDetails) => {
-    eventDetails.preventUnmountOnClose = () => {
-      this.set('preventUnmountingOnClose', true);
-    };
-    if (!nextOpen && eventDetails.trigger == null && this.state.activeTriggerId != null) {
-      // When closing the dialog, pass the old trigger to the onOpenChange event
-      // so it's not reset too early (potentially causing focus issues in controlled scenarios).
-      eventDetails.trigger = this.state.activeTriggerElement ?? undefined;
+    if (activeSnapPoint === null) {
+      return undefined;
     }
-    this.context.onOpenChange?.(nextOpen, eventDetails);
-    if (eventDetails.isCanceled) {
-      return;
+    const exactMatch = resolvedSnapPoints.find(point => Object.is(point.value, activeSnapPoint));
+    if (exactMatch) {
+      return exactMatch;
     }
-    const details = {
-      open: nextOpen,
-      nativeEvent: eventDetails.event,
-      reason: eventDetails.reason,
-      nested: this.state.nested
-    };
-    this.state.floatingRootContext.context.events?.emit('openchange', details);
-    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;
+    const maxHeight = Math.min(popupHeight, viewportHeight);
+    const resolvedHeight = resolveSnapPointValue(activeSnapPoint, viewportHeight, rootFontSize);
+    if (resolvedHeight === null || !Number.isFinite(resolvedHeight)) {
+      return undefined;
     }
-    this.update(updatedState);
-  };
-}
-function createInitialState(initialState = {}) {
+    const clampedHeight = clamp(resolvedHeight, 0, maxHeight);
+    return findClosestSnapPoint(clampedHeight, resolvedSnapPoints) ?? undefined;
+  }, [activeSnapPoint, popupHeight, resolvedSnapPoints, rootFontSize, viewportHeight]);
   return {
-    ...createInitialPopupStoreState(),
-    modal: true,
-    disablePointerDismissal: false,
-    popupElement: null,
-    viewportElement: null,
-    descriptionElementId: undefined,
-    titleElementId: undefined,
-    openMethod: null,
-    nested: false,
-    nestedOpenDialogCount: 0,
-    role: 'dialog',
-    ...initialState
+    snapPoints,
+    activeSnapPoint,
+    setActiveSnapPoint,
+    popupHeight,
+    viewportHeight,
+    resolvedSnapPoints,
+    activeSnapPointOffset: resolvedActiveSnapPoint?.offset ?? null
   };
 }
 
-let CommonPopupDataAttributes = function (CommonPopupDataAttributes) {
-  /**
-   * Present when the popup is open.
-   */
-  CommonPopupDataAttributes["open"] = "data-open";
-  /**
-   * Present when the popup is closed.
-   */
-  CommonPopupDataAttributes["closed"] = "data-closed";
-  /**
-   * Present when the popup is animating in.
-   */
-  CommonPopupDataAttributes[CommonPopupDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the popup is animating out.
-   */
-  CommonPopupDataAttributes[CommonPopupDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
-  /**
-   * Present when the anchor is hidden.
-   */
-  CommonPopupDataAttributes["anchorHidden"] = "data-anchor-hidden";
-  /**
-   * Indicates which side the popup is positioned relative to the trigger.
-   * @type { 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  CommonPopupDataAttributes["side"] = "data-side";
-  /**
-   * Indicates how the popup is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  CommonPopupDataAttributes["align"] = "data-align";
-  return CommonPopupDataAttributes;
-}({});
-let CommonTriggerDataAttributes = /*#__PURE__*/function (CommonTriggerDataAttributes) {
-  /**
-   * Present when the popup is open.
-   */
-  CommonTriggerDataAttributes["popupOpen"] = "data-popup-open";
-  /**
-   * Present when a pressable trigger is pressed.
-   */
-  CommonTriggerDataAttributes["pressed"] = "data-pressed";
-  return CommonTriggerDataAttributes;
-}({});
-const TRIGGER_HOOK = {
-  [CommonTriggerDataAttributes.popupOpen]: ''
-};
-const PRESSABLE_TRIGGER_HOOK = {
-  [CommonTriggerDataAttributes.popupOpen]: '',
-  [CommonTriggerDataAttributes.pressed]: ''
-};
-const POPUP_OPEN_HOOK = {
-  [CommonPopupDataAttributes.open]: ''
-};
-const POPUP_CLOSED_HOOK = {
-  [CommonPopupDataAttributes.closed]: ''
-};
-const ANCHOR_HIDDEN_HOOK = {
-  [CommonPopupDataAttributes.anchorHidden]: ''
-};
-const triggerOpenStateMapping = {
-  open(value) {
-    if (value) {
-      return TRIGGER_HOOK;
-    }
-    return null;
-  }
-};
-const pressableTriggerOpenStateMapping = {
-  open(value) {
-    if (value) {
-      return PRESSABLE_TRIGGER_HOOK;
-    }
-    return null;
-  }
-};
-const popupStateMapping = {
-  open(value) {
-    if (value) {
-      return POPUP_OPEN_HOOK;
-    }
-    return POPUP_CLOSED_HOOK;
-  },
-  anchorHidden(value) {
-    if (value) {
-      return ANCHOR_HIDDEN_HOOK;
-    }
-    return null;
-  }
-};
-
-const DialogPortalContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") DialogPortalContext.displayName = "DialogPortalContext";
-function useDialogPortalContext() {
-  const value = React.useContext(DialogPortalContext);
-  if (value === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Portal> is missing.' : formatErrorMessage(26));
-  }
-  return value;
+const DrawerViewportContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") DrawerViewportContext.displayName = "DrawerViewportContext";
+function useDrawerViewportContext(optional) {
+  const context = React.useContext(DrawerViewportContext);
+  return context;
 }
 
-function inertValue(value) {
-  if (isReactVersionAtLeast(19)) {
-    return value;
-  }
-  // compatibility with React < 19
-  return value ? 'true' : undefined;
-}
+let drawerSwipeVarsRegistered = false;
 
-const InternalBackdrop = /*#__PURE__*/React.forwardRef(function InternalBackdrop(props, ref) {
-  const {
-    cutout,
-    ...otherProps
-  } = props;
-  let clipPath;
-  if (cutout) {
-    const rect = cutout?.getBoundingClientRect();
-    clipPath = `polygon(
-      0% 0%,
-      100% 0%,
-      100% 100%,
-      0% 100%,
-      0% 0%,
-      ${rect.left}px ${rect.top}px,
-      ${rect.left}px ${rect.bottom}px,
-      ${rect.right}px ${rect.bottom}px,
-      ${rect.right}px ${rect.top}px,
-      ${rect.left}px ${rect.top}px
-    )`;
+/**
+ * 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.
+ */
+function removeCSSVariableInheritance() {
+  if (drawerSwipeVarsRegistered) {
+    return;
   }
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    role: "presentation"
-    // Ensures Floating UI's outside press detection runs, as it considers
-    // it an element that existed when the popup rendered.
-    ,
-    "data-base-ui-inert": "",
-    ...otherProps,
-    style: {
-      position: 'fixed',
-      inset: 0,
-      userSelect: 'none',
-      WebkitUserSelect: 'none',
-      clipPath
-    }
-  });
-});
-if (process.env.NODE_ENV !== "production") InternalBackdrop.displayName = "InternalBackdrop";
-
-const DialogPortal = /*#__PURE__*/React.forwardRef(function DialogPortal(props, forwardedRef) {
-  const {
-    keepMounted = false,
-    ...portalProps
-  } = props;
-  const {
-    store
-  } = useDialogRootContext();
-  const mounted = store.useState('mounted');
-  const modal = store.useState('modal');
-  const open = store.useState('open');
-  const shouldRender = mounted || keepMounted;
-  if (!shouldRender) {
-    return null;
-  }
-  return /*#__PURE__*/jsx(DialogPortalContext.Provider, {
-    value: keepMounted,
-    children: /*#__PURE__*/jsxs(FloatingPortal, {
-      ref: forwardedRef,
-      ...portalProps,
-      children: [mounted && modal === true && /*#__PURE__*/jsx(InternalBackdrop, {
-        ref: store.context.internalBackdropRef,
-        inert: inertValue(!open)
-      }), props.children]
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogPortal.displayName = "DialogPortal";
-
-function useOnFirstRender(fn) {
-  const ref = React.useRef(true);
-  if (ref.current) {
-    ref.current = false;
-    fn();
-  }
-}
 
-/**
- * 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 {
-    children,
-    open: openProp,
-    defaultOpen = false,
-    onOpenChange,
-    onOpenChangeComplete,
-    disablePointerDismissal = false,
-    modal = true,
-    actionsRef,
-    handle,
-    triggerId: triggerIdProp,
-    defaultTriggerId: defaultTriggerIdProp = null
-  } = props;
-  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
+  // Intentionally keep inheritance disabled on WebKit as well. Safari doesn't support
+  // opting descendants back in via `--var: inherit` for custom properties registered
+  // with `inherits: false`, but Drawer does not rely on descendant access to these vars
+  // (unlike ScrollArea), so we keep the performance optimization enabled.
+  if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
+    [DrawerPopupCssVars.swipeMovementX, DrawerPopupCssVars.swipeMovementY, DrawerPopupCssVars.snapPointOffset].forEach(name => {
+      try {
+        CSS.registerProperty({
+          name,
+          syntax: '<length>',
+          inherits: false,
+          initialValue: '0px'
+        });
+      } catch {
+        /* ignore already-registered */
+      }
     });
-  }).current;
-
-  // Support initially open state when uncontrolled
-  useOnFirstRender(() => {
-    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
-      store.update({
-        open: true,
-        activeTriggerId: defaultTriggerIdProp
-      });
-    }
-  });
-  store.useControlledProp('openProp', openProp);
-  store.useControlledProp('triggerIdProp', triggerIdProp);
-  store.useSyncedValues({
-    disablePointerDismissal,
-    nested,
-    modal
-  });
-  store.useContextCallback('onOpenChange', onOpenChange);
-  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
-  const payload = store.useState('payload');
-  useDialogRoot({
-    store,
-    actionsRef,
-    parentContext: parentDialogRootContext?.store.context,
-    onOpenChange,
-    triggerIdProp
-  });
-  const contextValue = React.useMemo(() => ({
-    store
-  }), [store]);
-  return /*#__PURE__*/jsx(DialogRootContext.Provider, {
-    value: contextValue,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
-  });
+    [{
+      name: DrawerBackdropCssVars.swipeProgress,
+      initialValue: '0'
+    }, {
+      name: DrawerPopupCssVars.swipeStrength,
+      initialValue: '1'
+    }].forEach(({
+      name,
+      initialValue
+    }) => {
+      try {
+        CSS.registerProperty({
+          name,
+          syntax: '<number>',
+          inherits: false,
+          initialValue
+        });
+      } catch {
+        /* ignore already-registered */
+      }
+    });
+  }
+  drawerSwipeVarsRegistered = true;
 }
-
-let DrawerPopupCssVars = /*#__PURE__*/function (DrawerPopupCssVars) {
-  /**
-   * The number of nested drawers that are currently open.
-   * @type {number}
-   */
-  DrawerPopupCssVars["nestedDrawers"] = "--nested-drawers";
-  /**
-   * The height of the drawer popup.
-   * @type {CSS length}
-   */
-  DrawerPopupCssVars["height"] = "--drawer-height";
-  /**
-   * The height of the frontmost open drawer in the current nested drawer stack.
-   * @type {CSS length}
-   */
-  DrawerPopupCssVars["frontmostHeight"] = "--drawer-frontmost-height";
-  /**
-   * The swipe movement on the X axis.
-   * @type {CSS length}
-   */
-  DrawerPopupCssVars["swipeMovementX"] = "--drawer-swipe-movement-x";
-  /**
-   * The swipe movement on the Y axis.
-   * @type {CSS length}
-   */
-  DrawerPopupCssVars["swipeMovementY"] = "--drawer-swipe-movement-y";
-  /**
-   * The snap point offset used for translating the drawer.
-   * @type {CSS length}
-   */
-  DrawerPopupCssVars["snapPointOffset"] = "--drawer-snap-point-offset";
-  /**
-   * A scalar (0.1-1) used to scale the swipe release transition duration in CSS.
-   * @type {number}
-   */
-  DrawerPopupCssVars["swipeStrength"] = "--drawer-swipe-strength";
-  return DrawerPopupCssVars;
-}({});
-
-let DrawerBackdropCssVars = /*#__PURE__*/function (DrawerBackdropCssVars) {
-  /**
-   * The swipe progress of the drawer gesture.
-   * @type {number}
-   */
-  DrawerBackdropCssVars["swipeProgress"] = "--drawer-swipe-progress";
-  return DrawerBackdropCssVars;
-}({});
-
-const stateAttributesMapping$1 = {
+const stateAttributesMapping = {
   ...popupStateMapping,
-  ...transitionStatusMapping
+  ...transitionStatusMapping,
+  expanded(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.expanded]: ''
+    } : null;
+  },
+  nestedDrawerOpen(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.nestedDrawerOpen]: ''
+    } : null;
+  },
+  nestedDrawerSwiping(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.nestedDrawerSwiping]: ''
+    } : null;
+  },
+  swipeDirection(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.swipeDirection]: value
+    } : null;
+  },
+  swiping(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.swiping]: ''
+    } : null;
+  }
 };
 
 /**
- * An overlay displayed beneath the popup.
+ * A container for the drawer contents.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
-const DrawerBackdrop = /*#__PURE__*/React.forwardRef(function DrawerBackdrop(componentProps, forwardedRef) {
+const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(componentProps, forwardedRef) {
   const {
-    render,
     className,
-    forceRender = false,
+    finalFocus,
+    initialFocus,
+    render,
     ...elementProps
   } = componentProps;
   const {
     store
   } = useDialogRootContext();
-  const open = store.useState('open');
-  const nested = store.useState('nested');
+  const {
+    swipeDirection,
+    frontmostHeight,
+    hasNestedDrawer,
+    nestedSwiping,
+    nestedSwipeProgressStore,
+    onPopupHeightChange,
+    notifyParentFrontmostHeight,
+    notifyParentHasNestedDrawer
+  } = useDrawerRootContext();
+  const descriptionElementId = store.useState('descriptionElementId');
+  const disablePointerDismissal = store.useState('disablePointerDismissal');
+  const floatingRootContext = store.useState('floatingRootContext');
+  const rootPopupProps = store.useState('popupProps');
+  const modal = store.useState('modal');
   const mounted = store.useState('mounted');
+  const nested = store.useState('nested');
+  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
   const transitionStatus = store.useState('transitionStatus');
-  const state = {
-    open,
-    transitionStatus
-  };
-  return useRenderElement('div', componentProps, {
-    state,
-    ref: [store.context.backdropRef, forwardedRef],
-    stateAttributesMapping: stateAttributesMapping$1,
-    props: [{
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        pointerEvents: !open ? 'none' : undefined,
-        userSelect: 'none',
-        WebkitUserSelect: 'none',
-        [DrawerBackdropCssVars.swipeProgress]: '0',
-        [DrawerPopupCssVars.swipeStrength]: '1'
-      }
-    }, elementProps],
-    enabled: forceRender || !nested
-  });
-});
-if (process.env.NODE_ENV !== "production") DrawerBackdrop.displayName = "DrawerBackdrop";
-
-const DRAWER_CONTENT_ATTRIBUTE = 'data-drawer-content';
-
-/**
- * A container for the drawer contents.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
- */
-const DrawerContent = /*#__PURE__*/React.forwardRef(function DrawerContent(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  useDialogRootContext();
-  return useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      [DRAWER_CONTENT_ATTRIBUTE]: ''
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerContent";
-
-const DrawerProviderContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") DrawerProviderContext.displayName = "DrawerProviderContext";
-function useDrawerProviderContext(optional) {
-  const context = React.useContext(DrawerProviderContext);
-  return context;
-}
-
-let DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
-  /**
-   * Present when the drawer is open.
-   */
-  DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
-  /**
-   * Present when the drawer is closed.
-   */
-  DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
-  /**
-   * Present when the drawer is animating in.
-   */
-  DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the drawer is animating out.
-   */
-  DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
-  /**
-   * Present when the drawer is at the expanded (full-height) snap point.
-   */
-  DrawerPopupDataAttributes["expanded"] = "data-expanded";
-  /**
-   * Present when a nested drawer is open.
-   */
-  DrawerPopupDataAttributes["nestedDrawerOpen"] = "data-nested-drawer-open";
-  /**
-   * Present when a nested drawer is being swiped.
-   */
-  DrawerPopupDataAttributes["nestedDrawerSwiping"] = "data-nested-drawer-swiping";
-  /**
-   * Present when the drawer is dismissed by swiping.
-   */
-  DrawerPopupDataAttributes["swipeDismiss"] = "data-swipe-dismiss";
-  /**
-   * Indicates the swipe direction.
-   * @type {'up' | 'down' | 'left' | 'right'}
-   */
-  DrawerPopupDataAttributes["swipeDirection"] = "data-swipe-direction";
-  /**
-   * Present when the drawer is being swiped.
-   */
-  DrawerPopupDataAttributes["swiping"] = "data-swiping";
-  return DrawerPopupDataAttributes;
-}({});
-
-const DrawerRootContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") DrawerRootContext.displayName = "DrawerRootContext";
-function useDrawerRootContext(optional) {
-  const drawerRootContext = React.useContext(DrawerRootContext);
-  if (optional === false && drawerRootContext === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DrawerRootContext is missing. Drawer parts must be placed within <Drawer.Root>.' : formatErrorMessage(90));
-  }
-  return drawerRootContext;
-}
-
-function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
-  return Math.max(min, Math.min(val, max));
-}
-
-function resolveSnapPointValue(snapPoint, viewportHeight, rootFontSize) {
-  if (!Number.isFinite(viewportHeight) || viewportHeight <= 0) {
-    return null;
-  }
-  if (typeof snapPoint === 'number') {
-    if (!Number.isFinite(snapPoint)) {
-      return null;
-    }
-    if (snapPoint <= 1) {
-      return clamp(snapPoint, 0, 1) * viewportHeight;
-    }
-    return snapPoint;
-  }
-  const trimmed = snapPoint.trim();
-  if (trimmed.endsWith('px')) {
-    const value = Number.parseFloat(trimmed);
-    return Number.isFinite(value) ? value : null;
-  }
-  if (trimmed.endsWith('rem')) {
-    const value = Number.parseFloat(trimmed);
-    return Number.isFinite(value) ? value * rootFontSize : null;
-  }
-  return null;
-}
-function findClosestSnapPoint(height, points) {
-  let closest = null;
-  let closestDistance = Infinity;
-  for (const point of points) {
-    const distance = Math.abs(point.height - height);
-    if (distance < closestDistance) {
-      closestDistance = distance;
-      closest = point;
-    }
-  }
-  return closest;
-}
-function useDrawerSnapPoints() {
-  const {
-    store
-  } = useDialogRootContext();
+  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 swipe = useDrawerViewportContext();
+  const swiping = swipe?.swiping ?? false;
+  const swipeStrength = swipe?.swipeStrength ?? null;
   const {
     snapPoints,
     activeSnapPoint,
-    setActiveSnapPoint,
-    popupHeight
-  } = useDrawerRootContext();
-  const viewportElement = store.useState('viewportElement');
-  const [viewportHeight, setViewportHeight] = React.useState(0);
-  const [rootFontSize, setRootFontSize] = React.useState(16);
-  const measureViewportHeight = useStableCallback(() => {
-    const doc = ownerDocument(viewportElement);
-    const html = doc.documentElement;
-    if (viewportElement) {
-      setViewportHeight(viewportElement.offsetHeight);
+    activeSnapPointOffset
+  } = useDrawerSnapPoints();
+  useDialogPortalContext();
+  const [popupHeight, setPopupHeight] = React.useState(0);
+  const popupHeightRef = React.useRef(0);
+  const measureHeight = useStableCallback(() => {
+    const popupElement = store.context.popupRef.current;
+    if (!popupElement) {
+      return;
     }
-    if (!viewportElement) {
-      setViewportHeight(html.clientHeight);
+    const offsetHeight = popupElement.offsetHeight;
+
+    // Only skip while the element is still actually stretched beyond its last measured height.
+    if (popupHeightRef.current > 0 && frontmostHeight > popupHeightRef.current && offsetHeight > popupHeightRef.current) {
+      return;
     }
-    const fontSize = parseFloat(getComputedStyle(html).fontSize);
-    if (Number.isFinite(fontSize)) {
-      setRootFontSize(fontSize);
+    const keepHeightWhileNested = popupHeightRef.current > 0 && hasNestedDrawer;
+    if (keepHeightWhileNested) {
+      const oldHeight = popupHeightRef.current;
+      setPopupHeight(oldHeight);
+      onPopupHeightChange(oldHeight);
+      return;
+    }
+    const nextHeight = offsetHeight;
+    if (nextHeight === popupHeightRef.current) {
+      return;
     }
+    popupHeightRef.current = nextHeight;
+    setPopupHeight(nextHeight);
+    onPopupHeightChange(nextHeight);
   });
   useIsoLayoutEffect(() => {
-    measureViewportHeight();
-    if (!viewportElement || typeof ResizeObserver !== 'function') {
+    if (!mounted) {
+      popupHeightRef.current = 0;
+      setPopupHeight(0);
+      onPopupHeightChange(0);
       return undefined;
     }
-    const resizeObserver = new ResizeObserver(measureViewportHeight);
-    resizeObserver.observe(viewportElement);
+    const popupElement = store.context.popupRef.current;
+    if (!popupElement) {
+      return undefined;
+    }
+    removeCSSVariableInheritance();
+    measureHeight();
+    if (typeof ResizeObserver !== 'function') {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(measureHeight);
+    resizeObserver.observe(popupElement);
     return () => {
       resizeObserver.disconnect();
     };
-  }, [measureViewportHeight, viewportElement]);
-  const resolvedSnapPoints = React.useMemo(() => {
-    if (!snapPoints || snapPoints.length === 0 || viewportHeight <= 0 || popupHeight <= 0) {
-      return [];
-    }
-    const maxHeight = Math.min(popupHeight, viewportHeight);
-    if (!Number.isFinite(maxHeight) || maxHeight <= 0) {
-      return [];
-    }
-    const resolved = snapPoints.map(value => {
-      const resolvedHeight = resolveSnapPointValue(value, viewportHeight, rootFontSize);
-      if (resolvedHeight === null || !Number.isFinite(resolvedHeight)) {
-        return null;
-      }
-      const clampedHeight = clamp(resolvedHeight, 0, maxHeight);
-      return {
-        value,
-        height: clampedHeight,
-        offset: Math.max(0, popupHeight - clampedHeight)
-      };
-    }).filter(point => Boolean(point));
-    if (resolved.length <= 1) {
-      return resolved;
-    }
-    const deduped = [];
-    const seenHeights = [];
-    for (let index = resolved.length - 1; index >= 0; index -= 1) {
-      const point = resolved[index];
-      const isDuplicate = seenHeights.some(height => Math.abs(height - point.height) <= 1);
-      if (isDuplicate) {
-        continue;
-      }
-      seenHeights.push(point.height);
-      deduped.push(point);
-    }
-    deduped.reverse();
-    return deduped;
-  }, [popupHeight, rootFontSize, snapPoints, viewportHeight]);
-  const resolvedActiveSnapPoint = React.useMemo(() => {
-    if (activeSnapPoint === undefined) {
-      return resolvedSnapPoints[0];
-    }
-    if (activeSnapPoint === null) {
-      return undefined;
-    }
-    const exactMatch = resolvedSnapPoints.find(point => Object.is(point.value, activeSnapPoint));
-    if (exactMatch) {
-      return exactMatch;
-    }
-    const maxHeight = Math.min(popupHeight, viewportHeight);
-    const resolvedHeight = resolveSnapPointValue(activeSnapPoint, viewportHeight, rootFontSize);
-    if (resolvedHeight === null || !Number.isFinite(resolvedHeight)) {
-      return undefined;
-    }
-    const clampedHeight = clamp(resolvedHeight, 0, maxHeight);
-    return findClosestSnapPoint(clampedHeight, resolvedSnapPoints) ?? undefined;
-  }, [activeSnapPoint, popupHeight, resolvedSnapPoints, rootFontSize, viewportHeight]);
-  return {
-    snapPoints,
-    activeSnapPoint,
-    setActiveSnapPoint,
-    popupHeight,
-    viewportHeight,
-    resolvedSnapPoints,
-    activeSnapPointOffset: resolvedActiveSnapPoint?.offset ?? null
-  };
-}
-
-const DrawerViewportContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") DrawerViewportContext.displayName = "DrawerViewportContext";
-function useDrawerViewportContext(optional) {
-  const context = React.useContext(DrawerViewportContext);
-  return context;
-}
-
-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.
- */
-function removeCSSVariableInheritance() {
-  if (drawerSwipeVarsRegistered) {
-    return;
-  }
-
-  // Intentionally keep inheritance disabled on WebKit as well. Safari doesn't support
-  // opting descendants back in via `--var: inherit` for custom properties registered
-  // with `inherits: false`, but Drawer does not rely on descendant access to these vars
-  // (unlike ScrollArea), so we keep the performance optimization enabled.
-  if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
-    [DrawerPopupCssVars.swipeMovementX, DrawerPopupCssVars.swipeMovementY, DrawerPopupCssVars.snapPointOffset].forEach(name => {
-      try {
-        CSS.registerProperty({
-          name,
-          syntax: '<length>',
-          inherits: false,
-          initialValue: '0px'
-        });
-      } catch {
-        /* ignore already-registered */
-      }
-    });
-    [{
-      name: DrawerBackdropCssVars.swipeProgress,
-      initialValue: '0'
-    }, {
-      name: DrawerPopupCssVars.swipeStrength,
-      initialValue: '1'
-    }].forEach(({
-      name,
-      initialValue
-    }) => {
-      try {
-        CSS.registerProperty({
-          name,
-          syntax: '<number>',
-          inherits: false,
-          initialValue
-        });
-      } catch {
-        /* ignore already-registered */
-      }
-    });
-  }
-  drawerSwipeVarsRegistered = true;
-}
-const stateAttributesMapping = {
-  ...popupStateMapping,
-  ...transitionStatusMapping,
-  expanded(value) {
-    return value ? {
-      [DrawerPopupDataAttributes.expanded]: ''
-    } : null;
-  },
-  nestedDrawerOpen(value) {
-    return value ? {
-      [DrawerPopupDataAttributes.nestedDrawerOpen]: ''
-    } : null;
-  },
-  nestedDrawerSwiping(value) {
-    return value ? {
-      [DrawerPopupDataAttributes.nestedDrawerSwiping]: ''
-    } : null;
-  },
-  swipeDirection(value) {
-    return value ? {
-      [DrawerPopupDataAttributes.swipeDirection]: value
-    } : null;
-  },
-  swiping(value) {
-    return value ? {
-      [DrawerPopupDataAttributes.swiping]: ''
-    } : null;
-  }
-};
-
-/**
- * A container for the drawer contents.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
- */
-const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(componentProps, forwardedRef) {
-  const {
-    className,
-    finalFocus,
-    initialFocus,
-    render,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
-  const {
-    swipeDirection,
-    frontmostHeight,
-    hasNestedDrawer,
-    nestedSwiping,
-    nestedSwipeProgressStore,
-    onPopupHeightChange,
-    notifyParentFrontmostHeight,
-    notifyParentHasNestedDrawer
-  } = useDrawerRootContext();
-  const descriptionElementId = store.useState('descriptionElementId');
-  const disablePointerDismissal = store.useState('disablePointerDismissal');
-  const floatingRootContext = store.useState('floatingRootContext');
-  const rootPopupProps = store.useState('popupProps');
-  const modal = store.useState('modal');
-  const mounted = store.useState('mounted');
-  const nested = store.useState('nested');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
-  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 swipe = useDrawerViewportContext();
-  const swiping = swipe?.swiping ?? false;
-  const swipeStrength = swipe?.swipeStrength ?? null;
-  const {
-    snapPoints,
-    activeSnapPoint,
-    activeSnapPointOffset
-  } = useDrawerSnapPoints();
-  useDialogPortalContext();
-  const [popupHeight, setPopupHeight] = React.useState(0);
-  const popupHeightRef = React.useRef(0);
-  const measureHeight = useStableCallback(() => {
-    const popupElement = store.context.popupRef.current;
-    if (!popupElement) {
-      return;
-    }
-    const offsetHeight = popupElement.offsetHeight;
-
-    // Only skip while the element is still actually stretched beyond its last measured height.
-    if (popupHeightRef.current > 0 && frontmostHeight > popupHeightRef.current && offsetHeight > popupHeightRef.current) {
-      return;
-    }
-    const keepHeightWhileNested = popupHeightRef.current > 0 && hasNestedDrawer;
-    if (keepHeightWhileNested) {
-      const oldHeight = popupHeightRef.current;
-      setPopupHeight(oldHeight);
-      onPopupHeightChange(oldHeight);
-      return;
-    }
-    const nextHeight = offsetHeight;
-    if (nextHeight === popupHeightRef.current) {
-      return;
-    }
-    popupHeightRef.current = nextHeight;
-    setPopupHeight(nextHeight);
-    onPopupHeightChange(nextHeight);
-  });
-  useIsoLayoutEffect(() => {
-    if (!mounted) {
-      popupHeightRef.current = 0;
-      setPopupHeight(0);
-      onPopupHeightChange(0);
-      return undefined;
-    }
-    const popupElement = store.context.popupRef.current;
-    if (!popupElement) {
-      return undefined;
-    }
-    removeCSSVariableInheritance();
-    measureHeight();
-    if (typeof ResizeObserver !== 'function') {
-      return undefined;
-    }
-    const resizeObserver = new ResizeObserver(measureHeight);
-    resizeObserver.observe(popupElement);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [measureHeight, mounted, nestedDrawerOpen, onPopupHeightChange, store.context.popupRef]);
-  useIsoLayoutEffect(() => {
-    const popupRef = store.context.popupRef;
-    const syncNestedSwipeProgress = () => {
-      const popupElement = popupRef.current;
-      if (!popupElement) {
-        return;
+  }, [measureHeight, mounted, nestedDrawerOpen, onPopupHeightChange, store.context.popupRef]);
+  useIsoLayoutEffect(() => {
+    const popupRef = store.context.popupRef;
+    const syncNestedSwipeProgress = () => {
+      const popupElement = popupRef.current;
+      if (!popupElement) {
+        return;
       }
       const progress = nestedSwipeProgressStore.getSnapshot();
       if (progress > 0) {
@@ -5831,14 +5577,726 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
 });
 if (process.env.NODE_ENV !== "production") DrawerPopup.displayName = "DrawerPopup";
 
-/**
- * A portal element that moves the popup to a different part of the DOM.
- * By default, the portal element is appended to `<body>`.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
- */
-const DrawerPortal = DialogPortal;
+function inertValue(value) {
+  if (isReactVersionAtLeast(19)) {
+    return value;
+  }
+  // compatibility with React < 19
+  return value ? 'true' : undefined;
+}
+
+const InternalBackdrop = /*#__PURE__*/React.forwardRef(function InternalBackdrop(props, ref) {
+  const {
+    cutout,
+    ...otherProps
+  } = props;
+  let clipPath;
+  if (cutout) {
+    const rect = cutout?.getBoundingClientRect();
+    clipPath = `polygon(
+      0% 0%,
+      100% 0%,
+      100% 100%,
+      0% 100%,
+      0% 0%,
+      ${rect.left}px ${rect.top}px,
+      ${rect.left}px ${rect.bottom}px,
+      ${rect.right}px ${rect.bottom}px,
+      ${rect.right}px ${rect.top}px,
+      ${rect.left}px ${rect.top}px
+    )`;
+  }
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    role: "presentation"
+    // Ensures Floating UI's outside press detection runs, as it considers
+    // it an element that existed when the popup rendered.
+    ,
+    "data-base-ui-inert": "",
+    ...otherProps,
+    style: {
+      position: 'fixed',
+      inset: 0,
+      userSelect: 'none',
+      WebkitUserSelect: 'none',
+      clipPath
+    }
+  });
+});
+if (process.env.NODE_ENV !== "production") InternalBackdrop.displayName = "InternalBackdrop";
+
+const DialogPortal = /*#__PURE__*/React.forwardRef(function DialogPortal(props, forwardedRef) {
+  const {
+    keepMounted = false,
+    ...portalProps
+  } = props;
+  const {
+    store
+  } = useDialogRootContext();
+  const mounted = store.useState('mounted');
+  const modal = store.useState('modal');
+  const open = store.useState('open');
+  const shouldRender = mounted || keepMounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return /*#__PURE__*/jsx(DialogPortalContext.Provider, {
+    value: keepMounted,
+    children: /*#__PURE__*/jsxs(FloatingPortal, {
+      ref: forwardedRef,
+      ...portalProps,
+      children: [mounted && modal === true && /*#__PURE__*/jsx(InternalBackdrop, {
+        ref: store.context.internalBackdropRef,
+        inert: inertValue(!open)
+      }), props.children]
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogPortal.displayName = "DialogPortal";
+
+/**
+ * A portal element that moves the popup to a different part of the DOM.
+ * By default, the portal element is appended to `<body>`.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerPortal = DialogPortal;
+
+function useControlled({
+  controlled,
+  default: defaultProp,
+  name,
+  state = 'value'
+}) {
+  // isControlled is ignored in the hook dependency lists as it should never change.
+  const {
+    current: isControlled
+  } = React.useRef(controlled !== undefined);
+  const [valueState, setValue] = React.useState(defaultProp);
+  const value = isControlled ? controlled : valueState;
+  if (process.env.NODE_ENV !== 'production') {
+    React.useEffect(() => {
+      if (isControlled !== (controlled !== undefined)) {
+        console.error([`Base UI: A component is changing the ${isControlled ? '' : 'un'}controlled ${state} state of ${name} to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${name} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+      }
+    }, [state, name, controlled]);
+    const {
+      current: defaultValue
+    } = React.useRef(defaultProp);
+    React.useEffect(() => {
+      // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is for more details.
+      if (!isControlled && JSON.stringify(defaultValue) !== JSON.stringify(defaultProp)) {
+        console.error([`Base UI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
+      }
+    }, [JSON.stringify(defaultProp)]);
+  }
+  const setValueIfUncontrolled = React.useCallback(newValue => {
+    if (!isControlled) {
+      setValue(newValue);
+    }
+  }, []);
+  return [value, setValueIfUncontrolled];
+}
+
+function useOnFirstRender(fn) {
+  const ref = React.useRef(true);
+  if (ref.current) {
+    ref.current = false;
+    fn();
+  }
+}
+
+let originalHtmlStyles = {};
+let originalBodyStyles = {};
+let originalHtmlScrollBehavior = '';
+function hasInsetScrollbars(referenceElement) {
+  if (typeof document === 'undefined') {
+    return false;
+  }
+  const doc = ownerDocument(referenceElement);
+  const win = getWindow(doc);
+  return win.innerWidth - doc.documentElement.clientWidth > 0;
+}
+function supportsStableScrollbarGutter(referenceElement) {
+  const supported = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('scrollbar-gutter', 'stable');
+  if (!supported || typeof document === 'undefined') {
+    return false;
+  }
+  const doc = ownerDocument(referenceElement);
+  const html = doc.documentElement;
+  const body = doc.body;
+  const scrollContainer = isOverflowElement(html) ? html : body;
+  const originalScrollContainerOverflowY = scrollContainer.style.overflowY;
+  const originalHtmlStyleGutter = html.style.scrollbarGutter;
+  html.style.scrollbarGutter = 'stable';
+  scrollContainer.style.overflowY = 'scroll';
+  const before = scrollContainer.offsetWidth;
+  scrollContainer.style.overflowY = 'hidden';
+  const after = scrollContainer.offsetWidth;
+  scrollContainer.style.overflowY = originalScrollContainerOverflowY;
+  html.style.scrollbarGutter = originalHtmlStyleGutter;
+  return before === after;
+}
+function preventScrollOverlayScrollbars(referenceElement) {
+  const doc = ownerDocument(referenceElement);
+  const html = doc.documentElement;
+  const body = doc.body;
+
+  // If an `overflow` style is present on <html>, we need to lock it, because a lock on <body>
+  // won't have any effect.
+  // But if <body> has an `overflow` style (like `overflow-x: hidden`), we need to lock it
+  // instead, as sticky elements shift otherwise.
+  const elementToLock = isOverflowElement(html) ? html : body;
+  const originalElementToLockStyles = {
+    overflowY: elementToLock.style.overflowY,
+    overflowX: elementToLock.style.overflowX
+  };
+  Object.assign(elementToLock.style, {
+    overflowY: 'hidden',
+    overflowX: 'hidden'
+  });
+  return () => {
+    Object.assign(elementToLock.style, originalElementToLockStyles);
+  };
+}
+function preventScrollInsetScrollbars(referenceElement) {
+  const doc = ownerDocument(referenceElement);
+  const html = doc.documentElement;
+  const body = doc.body;
+  const win = getWindow(html);
+  let scrollTop = 0;
+  let scrollLeft = 0;
+  let updateGutterOnly = false;
+  const resizeFrame = AnimationFrame.create();
+
+  // Pinch-zoom in Safari causes a shift. Just don't lock scroll if there's any pinch-zoom.
+  if (isWebKit && (win.visualViewport?.scale ?? 1) !== 1) {
+    return () => {};
+  }
+  function lockScroll() {
+    /* DOM reads: */
+
+    const htmlStyles = win.getComputedStyle(html);
+    const bodyStyles = win.getComputedStyle(body);
+    const htmlScrollbarGutterValue = htmlStyles.scrollbarGutter || '';
+    const hasBothEdges = htmlScrollbarGutterValue.includes('both-edges');
+    const scrollbarGutterValue = hasBothEdges ? 'stable both-edges' : 'stable';
+    scrollTop = html.scrollTop;
+    scrollLeft = html.scrollLeft;
+    originalHtmlStyles = {
+      scrollbarGutter: html.style.scrollbarGutter,
+      overflowY: html.style.overflowY,
+      overflowX: html.style.overflowX
+    };
+    originalHtmlScrollBehavior = html.style.scrollBehavior;
+    originalBodyStyles = {
+      position: body.style.position,
+      height: body.style.height,
+      width: body.style.width,
+      boxSizing: body.style.boxSizing,
+      overflowY: body.style.overflowY,
+      overflowX: body.style.overflowX,
+      scrollBehavior: body.style.scrollBehavior
+    };
+    const isScrollableY = html.scrollHeight > html.clientHeight;
+    const isScrollableX = html.scrollWidth > html.clientWidth;
+    const hasConstantOverflowY = htmlStyles.overflowY === 'scroll' || bodyStyles.overflowY === 'scroll';
+    const hasConstantOverflowX = htmlStyles.overflowX === 'scroll' || bodyStyles.overflowX === 'scroll';
+
+    // Values can be negative in Firefox
+    const scrollbarWidth = Math.max(0, win.innerWidth - body.clientWidth);
+    const scrollbarHeight = Math.max(0, win.innerHeight - body.clientHeight);
+
+    // Avoid shift due to the default <body> margin. This does cause elements to be clipped
+    // with whitespace. Warn if <body> has margins?
+    const marginY = parseFloat(bodyStyles.marginTop) + parseFloat(bodyStyles.marginBottom);
+    const marginX = parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight);
+    const elementToLock = isOverflowElement(html) ? html : body;
+    updateGutterOnly = supportsStableScrollbarGutter(referenceElement);
+
+    /*
+     * DOM writes:
+     * Do not read the DOM past this point!
+     */
+
+    if (updateGutterOnly) {
+      html.style.scrollbarGutter = scrollbarGutterValue;
+      elementToLock.style.overflowY = 'hidden';
+      elementToLock.style.overflowX = 'hidden';
+      return;
+    }
+    Object.assign(html.style, {
+      scrollbarGutter: scrollbarGutterValue,
+      overflowY: 'hidden',
+      overflowX: 'hidden'
+    });
+    if (isScrollableY || hasConstantOverflowY) {
+      html.style.overflowY = 'scroll';
+    }
+    if (isScrollableX || hasConstantOverflowX) {
+      html.style.overflowX = 'scroll';
+    }
+    Object.assign(body.style, {
+      position: 'relative',
+      height: marginY || scrollbarHeight ? `calc(100dvh - ${marginY + scrollbarHeight}px)` : '100dvh',
+      width: marginX || scrollbarWidth ? `calc(100vw - ${marginX + scrollbarWidth}px)` : '100vw',
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      scrollBehavior: 'unset'
+    });
+    body.scrollTop = scrollTop;
+    body.scrollLeft = scrollLeft;
+    html.setAttribute('data-base-ui-scroll-locked', '');
+    html.style.scrollBehavior = 'unset';
+  }
+  function cleanup() {
+    Object.assign(html.style, originalHtmlStyles);
+    Object.assign(body.style, originalBodyStyles);
+    if (!updateGutterOnly) {
+      html.scrollTop = scrollTop;
+      html.scrollLeft = scrollLeft;
+      html.removeAttribute('data-base-ui-scroll-locked');
+      html.style.scrollBehavior = originalHtmlScrollBehavior;
+    }
+  }
+  function handleResize() {
+    cleanup();
+    resizeFrame.request(lockScroll);
+  }
+  lockScroll();
+  win.addEventListener('resize', handleResize);
+  return () => {
+    resizeFrame.cancel();
+    cleanup();
+    // Sometimes this cleanup can be run after test teardown
+    // because it is called in a `setTimeout(fn, 0)`,
+    // in which case `removeEventListener` wouldn't be available,
+    // so we check for it to avoid test failures.
+    if (typeof win.removeEventListener === 'function') {
+      win.removeEventListener('resize', handleResize);
+    }
+  };
+}
+class ScrollLocker {
+  lockCount = 0;
+  restore = null;
+  timeoutLock = Timeout.create();
+  timeoutUnlock = Timeout.create();
+  acquire(referenceElement) {
+    this.lockCount += 1;
+    if (this.lockCount === 1 && this.restore === null) {
+      this.timeoutLock.start(0, () => this.lock(referenceElement));
+    }
+    return this.release;
+  }
+  release = () => {
+    this.lockCount -= 1;
+    if (this.lockCount === 0 && this.restore) {
+      this.timeoutUnlock.start(0, this.unlock);
+    }
+  };
+  unlock = () => {
+    if (this.lockCount === 0 && this.restore) {
+      this.restore?.();
+      this.restore = null;
+    }
+  };
+  lock(referenceElement) {
+    if (this.lockCount === 0 || this.restore !== null) {
+      return;
+    }
+    const doc = ownerDocument(referenceElement);
+    const html = doc.documentElement;
+    const htmlOverflowY = getWindow(html).getComputedStyle(html).overflowY;
+
+    // If the site author already hid overflow on <html>, respect it and bail out.
+    if (htmlOverflowY === 'hidden' || htmlOverflowY === 'clip') {
+      this.restore = NOOP;
+      return;
+    }
+    const hasOverlayScrollbars = isIOS || !hasInsetScrollbars(referenceElement);
+
+    // On iOS, scroll locking does not work if the navbar is collapsed. Due to numerous
+    // side effects and bugs that arise on iOS, it must be researched extensively before
+    // being enabled to ensure it doesn't cause the following issues:
+    // - Textboxes must scroll into view when focused, nor cause a glitchy scroll animation.
+    // - The navbar must not force itself into view and cause layout shift.
+    // - Scroll containers must not flicker upon closing a popup when it has an exit animation.
+    this.restore = hasOverlayScrollbars ? preventScrollOverlayScrollbars(referenceElement) : preventScrollInsetScrollbars(referenceElement);
+  }
+}
+const SCROLL_LOCKER = new ScrollLocker();
+
+/**
+ * Locks the scroll of the document when enabled.
+ *
+ * @param enabled - Whether to enable the scroll lock.
+ * @param referenceElement - Element to use as a reference for lock calculations.
+ */
+function useScrollLock(enabled = true, referenceElement = null) {
+  useIsoLayoutEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    return SCROLL_LOCKER.acquire(referenceElement);
+  }, [enabled, referenceElement]);
+}
+
+/**
+ * Provides a cross-browser way to determine the type of the pointer used to click.
+ * Safari and Firefox do not provide the PointerEvent to the click handler (they use MouseEvent) yet.
+ * Additionally, this implementation detects if the click was triggered by the keyboard.
+ *
+ * @param handler The function to be called when the button is clicked. The first parameter is the original event and the second parameter is the pointer type.
+ */
+function useEnhancedClickHandler(handler) {
+  const lastClickInteractionTypeRef = React.useRef('');
+  const handlePointerDown = React.useCallback(event => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    lastClickInteractionTypeRef.current = event.pointerType;
+    handler(event, event.pointerType);
+  }, [handler]);
+  const handleClick = React.useCallback(event => {
+    // event.detail has the number of clicks performed on the element. 0 means it was triggered by the keyboard.
+    if (event.detail === 0) {
+      handler(event, 'keyboard');
+      return;
+    }
+    if ('pointerType' in event) {
+      // Chrome and Edge correctly use PointerEvent
+      handler(event, event.pointerType);
+    } else {
+      handler(event, lastClickInteractionTypeRef.current);
+    }
+    lastClickInteractionTypeRef.current = '';
+  }, [handler]);
+  return {
+    onClick: handleClick,
+    onPointerDown: handlePointerDown
+  };
+}
+
+function useValueChanged(value, onChange) {
+  const valueRef = React.useRef(value);
+  const onChangeCallback = useStableCallback(onChange);
+  useIsoLayoutEffect(() => {
+    if (valueRef.current === value) {
+      return;
+    }
+    onChangeCallback(valueRef.current);
+  }, [value, onChangeCallback]);
+  useIsoLayoutEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+}
+
+/**
+ * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
+ *
+ * @param open The open state of the component.
+ */
+function useOpenInteractionType(open) {
+  const [openMethod, setOpenMethod] = React.useState(null);
+  const handleTriggerClick = useStableCallback((_, interactionType) => {
+    if (!open) {
+      setOpenMethod(interactionType || (
+      // On iOS Safari, the hitslop around touch targets means tapping outside an element's
+      // bounds does not fire `pointerdown` but does fire `mousedown`. The `interactionType`
+      // will be "" in that case.
+      isIOS ? 'touch' : ''));
+    }
+  });
+  useValueChanged(open, previousOpen => {
+    if (previousOpen && !open) {
+      setOpenMethod(null);
+    }
+  });
+  const {
+    onClick,
+    onPointerDown
+  } = useEnhancedClickHandler(handleTriggerClick);
+  return React.useMemo(() => ({
+    openMethod,
+    triggerProps: {
+      onClick,
+      onPointerDown
+    }
+  }), [openMethod, onClick, onPointerDown]);
+}
+
+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);
+  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]);
+  React.useImperativeHandle(actionsRef, () => ({
+    unmount: forceUnmount,
+    close: handleImperativeClose
+  }), [forceUnmount, handleImperativeClose]);
+  const floatingRootContext = useSyncedFloatingRootContext({
+    popupStore: store,
+    onOpenChange: store.setOpen,
+    treatPopupAsFloatingElement: true,
+    noEmit: true
+  });
+  const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = 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) {
+        return 'intentional';
+      }
+      // Ensure `aria-hidden` on outside elements is removed immediately
+      // on outside press when trapping focus.
+      return {
+        mouse: modal === 'trap-focus' ? 'sloppy' : 'intentional',
+        touch: 'sloppy'
+      };
+    },
+    outsidePress(event) {
+      if (!store.context.outsidePressEnabledRef.current) {
+        return false;
+      }
+
+      // For mouse events, only accept left button (button 0)
+      // For touch events, a single touch is equivalent to left button
+      if ('button' in event && event.button !== 0) {
+        return false;
+      }
+      if ('touches' in event && event.touches.length !== 1) {
+        return false;
+      }
+      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 true;
+      }
+      return false;
+    },
+    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);
+  });
+  store.useContextCallback('onNestedDialogClose', () => {
+    setOwnNestedOpenDialogs(0);
+  });
+
+  // Notify parent of our open/close state using parent callbacks, if any
+  React.useEffect(() => {
+    if (parentContext?.onNestedDialogOpen && open) {
+      parentContext.onNestedDialogOpen(ownNestedOpenDialogs);
+    }
+    if (parentContext?.onNestedDialogClose && !open) {
+      parentContext.onNestedDialogClose();
+    }
+    return () => {
+      if (parentContext?.onNestedDialogClose && open) {
+        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,
+    activeTriggerProps,
+    inactiveTriggerProps,
+    popupProps,
+    floatingRootContext,
+    nestedOpenDialogCount: ownNestedOpenDialogs
+  });
+}
+
+const selectors = {
+  ...popupStoreSelectors,
+  modal: createSelector(state => state.modal),
+  nested: createSelector(state => state.nested),
+  nestedOpenDialogCount: createSelector(state => state.nestedOpenDialogCount),
+  disablePointerDismissal: createSelector(state => state.disablePointerDismissal),
+  openMethod: createSelector(state => state.openMethod),
+  descriptionElementId: createSelector(state => state.descriptionElementId),
+  titleElementId: createSelector(state => state.titleElementId),
+  viewportElement: createSelector(state => state.viewportElement),
+  role: createSelector(state => state.role)
+};
+class DialogStore extends ReactStore {
+  constructor(initialState) {
+    super(createInitialState(initialState), {
+      popupRef: /*#__PURE__*/React.createRef(),
+      backdropRef: /*#__PURE__*/React.createRef(),
+      internalBackdropRef: /*#__PURE__*/React.createRef(),
+      outsidePressEnabledRef: {
+        current: true
+      },
+      triggerElements: new PopupTriggerMap(),
+      onOpenChange: undefined,
+      onOpenChangeComplete: undefined
+    }, selectors);
+  }
+  setOpen = (nextOpen, eventDetails) => {
+    eventDetails.preventUnmountOnClose = () => {
+      this.set('preventUnmountingOnClose', true);
+    };
+    if (!nextOpen && eventDetails.trigger == null && this.state.activeTriggerId != null) {
+      // When closing the dialog, pass the old trigger to the onOpenChange event
+      // so it's not reset too early (potentially causing focus issues in controlled scenarios).
+      eventDetails.trigger = this.state.activeTriggerElement ?? undefined;
+    }
+    this.context.onOpenChange?.(nextOpen, eventDetails);
+    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);
+    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;
+    }
+    this.update(updatedState);
+  };
+}
+function createInitialState(initialState = {}) {
+  return {
+    ...createInitialPopupStoreState(),
+    modal: true,
+    disablePointerDismissal: false,
+    popupElement: null,
+    viewportElement: null,
+    descriptionElementId: undefined,
+    titleElementId: undefined,
+    openMethod: null,
+    nested: false,
+    nestedOpenDialogCount: 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) {
+  const {
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    onOpenChangeComplete,
+    disablePointerDismissal = false,
+    modal = true,
+    actionsRef,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp = null
+  } = props;
+  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;
+
+  // Support initially open state when uncontrolled
+  useOnFirstRender(() => {
+    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
+      store.update({
+        open: true,
+        activeTriggerId: defaultTriggerIdProp
+      });
+    }
+  });
+  store.useControlledProp('openProp', openProp);
+  store.useControlledProp('triggerIdProp', triggerIdProp);
+  store.useSyncedValues({
+    disablePointerDismissal,
+    nested,
+    modal
+  });
+  store.useContextCallback('onOpenChange', onOpenChange);
+  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+  const payload = store.useState('payload');
+  useDialogRoot({
+    store,
+    actionsRef,
+    parentContext: parentDialogRootContext?.store.context,
+    onOpenChange,
+    triggerIdProp
+  });
+  const contextValue = React.useMemo(() => ({
+    store
+  }), [store]);
+  return /*#__PURE__*/jsx(DialogRootContext.Provider, {
+    value: contextValue,
+    children: typeof children === 'function' ? children({
+      payload
+    }) : children
+  });
+}
 
 var _DrawerProviderReport, _DrawerProviderReport2;
 /**
@@ -6059,4 +6517,4 @@ function DrawerProviderReporter() {
   return null;
 }
 
-export { CommonPopupDataAttributes as $, listNavigation as A, createGridCellMap as B, isListIndexDisabled as C, DrawerPortal as D, getGridNavigatedIndex as E, FloatingRootStore as F, getGridCellIndices as G, getGridCellIndexOfCorner as H, ARROW_DOWN$1 as I, ARROW_LEFT$1 as J, ARROW_RIGHT$1 as K, findNonDisabledListIndex as L, getTarget as M, focusOut as N, enqueueFocus as O, PopupTriggerMap as P, isVirtualClick as Q, isVirtualPointerEvent as R, SafeReact as S, ARROW_UP$1 as T, isElementVisible as U, useDialogRootContext as V, closePress as W, useTriggerDataForwarding as X, useInteractions as Y, CLICK_TRIGGER_IDENTIFIER as Z, triggerOpenStateMapping as _, DrawerBackdrop as a, popupStateMapping as a0, transitionStatusMapping as a1, useDialogPortalContext as a2, DialogStore as a3, imperativeAction as a4, createSelector as a5, useControlled as a6, useStore as a7, useTransitionStatus as a8, useOpenInteractionType as a9, chipRemovePress as aA, useDrawerProviderContext as aB, DrawerBackdropCssVars as aC, DrawerPopupCssVars as aD, DrawerProviderContext as aE, clamp as aF, useDrawerRootContext as aG, useTriggerRegistration as aH, DrawerPopupDataAttributes as aI, swipe as aJ, useDrawerSnapPoints as aK, DrawerViewportContext as aL, BASE_UI_SWIPE_IGNORE_SELECTOR as aM, TransitionStatusDataAttributes as aN, DRAWER_CONTENT_ATTRIBUTE as aO, useOnMount as aP, Timeout as aQ, isIOS as aR, inputBlur as aS, inputPaste as aT, incrementPress as aU, decrementPress as aV, keyboard as aW, scrub as aX, isWebKit as aY, createGenericEventDetails as aa, inputClear as ab, inputChange as ac, outsidePress as ad, itemPress as ae, useOpenChangeComplete as af, useValueChanged as ag, none as ah, inputPress as ai, useDismiss as aj, useOnFirstRender as ak, visuallyHiddenInput as al, visuallyHidden as am, Store as an, pressableTriggerOpenStateMapping as ao, isAndroid as ap, isFirefox as aq, escapeKey as ar, clearPress as as, FloatingPortal as at, DISABLED_TRANSITIONS_STYLE as au, useScrollLock as av, InternalBackdrop as aw, inertValue as ax, DROPDOWN_COLLISION_AVOIDANCE as ay, FloatingFocusManager as az, DrawerPopup as b, DrawerContent as c, DrawerRoot as d, useIsoLayoutEffect as e, useId as f, useAnimationFrame as g, useTimeout as h, isMouseLikePointerType as i, isTypeableElement as j, createChangeEventDetails as k, isClickLikeEvent as l, useFloatingParentNodeId as m, useFloatingTree as n, getFloatingFocusElement as o, useValueAsRef as p, isTypeableCombobox as q, isIndexOutOfListBounds as r, getMinListIndex as s, triggerPress as t, useStableCallback as u, getMaxListIndex as v, activeElement as w, ownerDocument as x, contains as y, stopEvent as z };
+export { ARROW_RIGHT$1 as $, isSafari as A, ownerDocument as B, escapeKey as C, DrawerPortal as D, useOnMount as E, FloatingRootStore as F, Timeout as G, triggerHover as H, getNodeChildren as I, useValueAsRef as J, getFloatingFocusElement as K, isTypeableCombobox as L, isIndexOutOfListBounds as M, getMinListIndex as N, getMaxListIndex as O, PopupTriggerMap as P, stopEvent as Q, listNavigation as R, SafeReact as S, TYPEABLE_SELECTOR as T, createGridCellMap as U, isListIndexDisabled as V, getGridNavigatedIndex as W, getGridCellIndices as X, getGridCellIndexOfCorner as Y, ARROW_DOWN$1 as Z, ARROW_LEFT$1 as _, DrawerBackdrop as a, DialogStore as a$, findNonDisabledListIndex as a0, focusOut as a1, enqueueFocus as a2, isVirtualClick as a3, isVirtualPointerEvent as a4, ARROW_UP$1 as a5, isElementVisible as a6, useTriggerDataForwarding as a7, useInteractions as a8, CLICK_TRIGGER_IDENTIFIER as a9, useFloatingNodeId as aA, useOpenInteractionType as aB, useImplicitActiveTrigger as aC, useOpenStateTransitions as aD, useScrollLock as aE, imperativeAction as aF, useSyncedFloatingRootContext as aG, useDismiss as aH, useRole as aI, TYPEAHEAD_RESET_MS as aJ, FloatingTree as aK, fastComponentRef as aL, cancelOpen as aM, getTabbableBeforeElement as aN, isOutsideEvent as aO, getTabbableAfterElement as aP, getNextTabbable as aQ, pressableTriggerOpenStateMapping as aR, FocusGuard as aS, PATIENT_CLICK_THRESHOLD as aT, useTriggerRegistration as aU, useDrawerProviderContext as aV, DrawerBackdropCssVars as aW, DrawerPopupCssVars as aX, DrawerProviderContext as aY, CommonPopupDataAttributes as aZ, useDialogPortalContext as a_, triggerOpenStateMapping as aa, itemPress as ab, transitionStatusMapping as ac, DISABLED_TRANSITIONS_STYLE as ad, popupStateMapping as ae, useOpenChangeComplete as af, COMPOSITE_KEYS as ag, outsidePress as ah, FloatingFocusManager as ai, FloatingPortal as aj, useAnimationsFinished as ak, POPUP_COLLISION_AVOIDANCE as al, InternalBackdrop as am, inertValue as an, FloatingNode as ao, DROPDOWN_COLLISION_AVOIDANCE as ap, siblingOpen as aq, useControlled as ar, useTransitionStatus as as, popupStoreSelectors as at, createSelector as au, ReactStore as av, createInitialPopupStoreState as aw, FloatingTreeStore as ax, fastComponent as ay, useOnFirstRender as az, DrawerPopup as b, clamp as b0, useDrawerRootContext as b1, DrawerPopupDataAttributes as b2, swipe as b3, useDrawerSnapPoints as b4, DrawerViewportContext as b5, BASE_UI_SWIPE_IGNORE_SELECTOR as b6, TransitionStatusDataAttributes as b7, DRAWER_CONTENT_ATTRIBUTE as b8, useStore as b9, createGenericEventDetails as ba, inputClear as bb, inputChange as bc, useValueChanged as bd, none as be, inputPress as bf, visuallyHiddenInput as bg, visuallyHidden as bh, Store as bi, isAndroid as bj, isFirefox as bk, clearPress as bl, chipRemovePress as bm, isIOS as bn, inputBlur as bo, inputPaste as bp, incrementPress as bq, decrementPress as br, keyboard as bs, scrub as bt, isWebKit as bu, DrawerContent as c, DrawerRoot as d, useStableCallback as e, useDialogRootContext as f, createChangeEventDetails as g, closePress as h, useId as i, isMouseLikePointerType as j, useAnimationFrame as k, useTimeout as l, isTypeableElement as m, isClickLikeEvent as n, useFloatingParentNodeId as o, useFloatingTree as p, getTarget as q, matchesFocusVisible as r, isTargetInsideEnabledTrigger as s, triggerPress as t, useIsoLayoutEffect as u, triggerFocus as v, createAttribute as w, activeElement as x, contains as y, isMac as z };