@jobber/components 8.21.1 → 8.22.0

package/dist/ScrollAreaViewport-es.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { E as EMPTY_OBJECT, a as useRefWithInit, f as formatErrorMessage, u as useRenderElement } from './useRenderElement-es.js';
-import { F as FloatingRootStore, P as PopupTriggerMap, n as createSelector, u as useFloatingParentNodeId, p as popupStateMapping, C as CommonPopupDataAttributes, o as FloatingFocusManager, q as FloatingPortal, I as InternalBackdrop, r as inertValue, s as useOpenInteractionType, t as useDismiss, v as useScrollLock, w as useInteractions, R as ReactStore, x as useOnFirstRender, y as useClick, z as CLICK_TRIGGER_IDENTIFIER, A as triggerOpenStateMapping, m as useDirection } from './InternalBackdrop-es.js';
-import { a as useStableCallback, d as useIsoLayoutEffect, c as useTransitionStatus, f as useOpenChangeComplete, h as useId, i as getFloatingFocusElement, t as transitionStatusMapping, o as ownerDocument, n as createChangeEventDetails, Q as imperativeAction, g as getTarget, m as contains, u as useBaseUiId, N as useButton, B as useControlled, D as none, R as isAndroid, U as closeWatcher, b as useTimeout, V as isWebKit } from './useButton-es.js';
+import { a as FloatingRootStore, P as PopupTriggerMap, x as createSelector, u as useFloatingParentNodeId, r as FloatingPortal, I as InternalBackdrop, t as inertValue, E as useOpenInteractionType, H as useDismiss, G as useScrollLock, J as useInteractions, R as ReactStore, A as useOnFirstRender, M as useClick, Z as CLICK_TRIGGER_IDENTIFIER, X as triggerOpenStateMapping, p as popupStateMapping, C as CommonPopupDataAttributes, F as FloatingFocusManager, n as useDirection } from './InternalBackdrop-es.js';
+import { e as useStableCallback, j as useIsoLayoutEffect, h as useTransitionStatus, d as useOpenChangeComplete, l as useId, m as getFloatingFocusElement, c as createChangeEventDetails, i as imperativeAction, k as getTarget, r as contains, b as useBaseUiId, u as useButton, t as transitionStatusMapping, o as ownerDocument, E as useControlled, G as none, ag as isAndroid, ah as closeWatcher, f as useTimeout, af as isWebKit } from './useButton-es.js';
 import { c as clamp } from './clamp-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { b as isElement, k as getWindow } from './floating-ui.utils.dom-es.js';
@@ -393,179 +393,6 @@ function useDialogRootContext(optional) {
   return dialogRootContext;
 }
 
-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 = {
-  ...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'
-      }
-    }, 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 DialogPortalContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DialogPortalContext.displayName = "DialogPortalContext";
 function useDialogPortalContext() {
@@ -588,852 +415,1025 @@ 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 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 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 useDialogRoot(params) {
   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);
-    }
-    if (!viewportElement) {
-      setViewportHeight(html.clientHeight);
-    }
-    const fontSize = parseFloat(getComputedStyle(html).fontSize);
-    if (Number.isFinite(fontSize)) {
-      setRootFontSize(fontSize);
-    }
-  });
-  useIsoLayoutEffect(() => {
-    measureViewportHeight();
-    if (!viewportElement || typeof ResizeObserver !== 'function') {
-      return undefined;
-    }
-    const resizeObserver = new ResizeObserver(measureViewportHeight);
-    resizeObserver.observe(viewportElement);
-    return () => {
-      resizeObserver.disconnect();
+    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);
     };
-  }, [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;
+    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';
       }
-      const clampedHeight = clamp(resolvedHeight, 0, maxHeight);
+      // Ensure `aria-hidden` on outside elements is removed immediately
+      // on outside press when trapping focus.
       return {
-        value,
-        height: clampedHeight,
-        offset: Math.max(0, popupHeight - clampedHeight)
+        mouse: modal === 'trap-focus' ? 'sloppy' : 'intentional',
+        touch: 'sloppy'
       };
-    }).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;
+    },
+    outsidePress(event) {
+      if (!store.context.outsidePressEnabledRef.current) {
+        return false;
       }
-      seenHeights.push(point.height);
-      deduped.push(point);
+
+      // 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);
     }
-    deduped.reverse();
-    return deduped;
-  }, [popupHeight, rootFontSize, snapPoints, viewportHeight]);
-  const resolvedActiveSnapPoint = React.useMemo(() => {
-    if (activeSnapPoint === undefined) {
-      return resolvedSnapPoints[0];
+    if (parentContext?.onNestedDialogClose && !open) {
+      parentContext.onNestedDialogClose();
     }
-    if (activeSnapPoint === null) {
-      return undefined;
+    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;
     }
-    const exactMatch = resolvedSnapPoints.find(point => Object.is(point.value, activeSnapPoint));
-    if (exactMatch) {
-      return exactMatch;
+    this.context.onOpenChange?.(nextOpen, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
     }
-    const maxHeight = Math.min(popupHeight, viewportHeight);
-    const resolvedHeight = resolveSnapPointValue(activeSnapPoint, viewportHeight, rootFontSize);
-    if (resolvedHeight === null || !Number.isFinite(resolvedHeight)) {
-      return undefined;
+    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 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
+    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
   };
 }
-
-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.
+ * 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 removeCSSVariableInheritance$1() {
-  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 */
-      }
+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
     });
-  }
-  drawerSwipeVarsRegistered = true;
+  }).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
+  });
 }
-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.
+ * A button that opens the dialog.
+ * Renders a `<button>` element.
  *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
-const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(componentProps, forwardedRef) {
+const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigger(componentProps, forwardedRef) {
   const {
-    className,
-    finalFocus,
-    initialFocus,
     render,
+    className,
+    disabled = false,
+    nativeButton = true,
+    id: idProp,
+    payload,
+    handle,
     ...elementProps
   } = componentProps;
+  const dialogRootContext = useDialogRootContext(true);
+  const store = handle?.store ?? dialogRootContext?.store;
+  if (!store) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.' : formatErrorMessage(79));
+  }
+  const thisTriggerId = useBaseUiId(idProp);
+  const floatingContext = store.useState('floatingRootContext');
+  const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const triggerElementRef = React.useRef(null);
   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);
+    registerTrigger,
+    isMountedByThisTrigger
+  } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
+    payload
   });
-  useIsoLayoutEffect(() => {
-    if (!mounted) {
-      popupHeightRef.current = 0;
-      setPopupHeight(0);
-      onPopupHeightChange(0);
-      return undefined;
-    }
-    const popupElement = store.context.popupRef.current;
-    if (!popupElement) {
-      return undefined;
-    }
-    removeCSSVariableInheritance$1();
-    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;
-      }
-      const progress = nestedSwipeProgressStore.getSnapshot();
-      if (progress > 0) {
-        popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, `${progress}`);
-      } else {
-        popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
-      }
-    };
-    syncNestedSwipeProgress();
-    const unsubscribe = nestedSwipeProgressStore.subscribe(syncNestedSwipeProgress);
-    return () => {
-      unsubscribe();
-      const popupElement = popupRef.current;
-      if (popupElement) {
-        popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
-      }
-    };
-  }, [nestedSwipeProgressStore, store.context.popupRef]);
-  React.useEffect(() => {
-    if (!open) {
-      return undefined;
-    }
-    notifyParentFrontmostHeight?.(frontmostHeight);
-    return () => {
-      notifyParentFrontmostHeight?.(0);
-    };
-  }, [frontmostHeight, open, notifyParentFrontmostHeight]);
-  React.useEffect(() => {
-    if (!notifyParentHasNestedDrawer) {
-      return undefined;
-    }
-    const present = open || transitionStatus === 'ending';
-    notifyParentHasNestedDrawer(present);
-    return () => {
-      notifyParentHasNestedDrawer(false);
-    };
-  }, [notifyParentHasNestedDrawer, open, transitionStatus]);
-  useOpenChangeComplete({
-    open,
-    ref: store.context.popupRef,
-    onComplete() {
-      if (open) {
-        store.context.onOpenChangeComplete?.(true);
-      }
-    }
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton
   });
-  const resolvedInitialFocus = initialFocus === undefined ? store.context.popupRef : initialFocus;
+  const click = useClick(floatingContext, {
+    enabled: floatingContext != null
+  });
+  const localInteractionProps = useInteractions([click]);
   const state = {
-    open,
-    nested,
-    transitionStatus,
-    expanded: activeSnapPoint === 1,
-    nestedDrawerOpen,
-    nestedDrawerSwiping: nestedSwiping,
-    swipeDirection,
-    swiping
+    disabled,
+    open: isOpenedByThisTrigger
   };
-  let popupHeightCssVarValue;
-  const shouldUseAutoHeight = !hasNestedDrawer && transitionStatus !== 'ending';
-  if (popupHeight && !shouldUseAutoHeight) {
-    popupHeightCssVarValue = `${popupHeight}px`;
-  }
-  const shouldApplySnapPoints = snapPoints && snapPoints.length > 0 && (swipeDirection === 'down' || swipeDirection === 'up');
-  let snapPointOffsetValue = null;
-  if (shouldApplySnapPoints && activeSnapPointOffset !== null) {
-    snapPointOffsetValue = swipeDirection === 'up' ? -activeSnapPointOffset : activeSnapPointOffset;
-  }
-  let dragStyles = swipe ? swipe.getDragStyles() : EMPTY_OBJECT;
-  if (shouldApplySnapPoints && swipeDirection === 'down') {
-    const baseOffset = activeSnapPointOffset ?? 0;
-    const movementValue = Number.parseFloat(String(dragStyles[DrawerPopupCssVars.swipeMovementY] ?? 0));
-    const nextOffset = Number.isFinite(movementValue) ? baseOffset + movementValue : baseOffset;
-    const shouldDamp = nextOffset < 0;
-    if (swiping && shouldDamp && Number.isFinite(movementValue)) {
-      const overshoot = Math.abs(nextOffset);
-      const dampedOffset = -Math.sqrt(overshoot);
-      const dampedMovement = dampedOffset - baseOffset;
-      dragStyles = {
-        ...dragStyles,
-        transform: undefined,
-        [DrawerPopupCssVars.swipeMovementY]: `${dampedMovement}px`
-      };
-    } else {
-      dragStyles = {
-        ...dragStyles,
-        transform: undefined
-      };
-    }
-  }
-  const element = useRenderElement('div', componentProps, {
+  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  return useRenderElement('button', componentProps, {
     state,
-    props: [rootPopupProps, {
-      'aria-labelledby': titleElementId,
-      'aria-describedby': descriptionElementId,
-      role,
-      tabIndex: -1,
-      hidden: !mounted,
-      onKeyDown(event) {
-        if (COMPOSITE_KEYS.has(event.key)) {
-          event.stopPropagation();
-        }
-      },
-      style: {
-        ...dragStyles,
-        [DrawerBackdropCssVars.swipeProgress]: '0',
-        [DrawerPopupCssVars.nestedDrawers]: nestedOpenDialogCount,
-        [DrawerPopupCssVars.height]: popupHeightCssVarValue,
-        [DrawerPopupCssVars.snapPointOffset]: typeof snapPointOffsetValue === 'number' ? `${snapPointOffsetValue}px` : '0px',
-        [DrawerPopupCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined,
-        [DrawerPopupCssVars.swipeStrength]: typeof swipeStrength === 'number' && Number.isFinite(swipeStrength) && swipeStrength > 0 ? `${swipeStrength}` : '1'
-      }
-    }, elementProps],
-    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
-    stateAttributesMapping
-  });
-  return /*#__PURE__*/jsx(FloatingFocusManager, {
-    context: floatingRootContext,
-    openInteractionType: openMethod,
-    disabled: !mounted,
-    closeOnFocusOut: !disablePointerDismissal,
-    initialFocus: resolvedInitialFocus,
-    returnFocus: finalFocus,
-    modal: modal !== false,
-    restoreFocus: "popup",
-    children: element
+    ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
+    props: [localInteractionProps.getReferenceProps(), rootTriggerProps, {
+      [CLICK_TRIGGER_IDENTIFIER]: '',
+      id: thisTriggerId
+    }, elementProps, getButtonProps],
+    stateAttributesMapping: triggerOpenStateMapping
   });
 });
-if (process.env.NODE_ENV !== "production") DrawerPopup.displayName = "DrawerPopup";
+if (process.env.NODE_ENV !== "production") DialogTrigger.displayName = "DialogTrigger";
 
-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";
+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 = {
+  ...popupStateMapping,
+  ...transitionStatusMapping
+};
 
 /**
- * A portal element that moves the popup to a different part of the DOM.
- * By default, the portal element is appended to `<body>`.
+ * An overlay displayed beneath the popup.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
-const DrawerPortal = DialogPortal;
-
-function useDialogRoot(params) {
+const DrawerBackdrop = /*#__PURE__*/React.forwardRef(function DrawerBackdrop(componentProps, forwardedRef) {
   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);
+    render,
+    className,
+    forceRender = false,
+    ...elementProps
+  } = componentProps;
   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;
+    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'
       }
-      return false;
-    },
-    escapeKey: isTopmost
+    }, elementProps],
+    enabled: forceRender || !nested
   });
-  useScrollLock(open && modal === true, popupElement);
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getTriggerProps
-  } = useInteractions([role, dismiss]);
+});
+if (process.env.NODE_ENV !== "production") DrawerBackdrop.displayName = "DrawerBackdrop";
 
-  // 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);
+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";
 
-  // Notify parent of our open/close state using parent callbacks, if any
-  React.useEffect(() => {
-    if (parentContext?.onNestedDialogOpen && open) {
-      parentContext.onNestedDialogOpen(ownNestedOpenDialogs);
+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 resolveSnapPointValue(snapPoint, viewportHeight, rootFontSize) {
+  if (!Number.isFinite(viewportHeight) || viewportHeight <= 0) {
+    return null;
+  }
+  if (typeof snapPoint === 'number') {
+    if (!Number.isFinite(snapPoint)) {
+      return null;
     }
-    if (parentContext?.onNestedDialogClose && !open) {
-      parentContext.onNestedDialogClose();
+    if (snapPoint <= 1) {
+      return clamp(snapPoint, 0, 1) * viewportHeight;
     }
-    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
-  });
+    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;
 }
-
-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);
+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;
+    }
   }
-  setOpen = (nextOpen, eventDetails) => {
-    eventDetails.preventUnmountOnClose = () => {
-      this.set('preventUnmountingOnClose', true);
+  return closest;
+}
+function useDrawerSnapPoints() {
+  const {
+    store
+  } = useDialogRootContext();
+  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);
+    }
+    if (!viewportElement) {
+      setViewportHeight(html.clientHeight);
+    }
+    const fontSize = parseFloat(getComputedStyle(html).fontSize);
+    if (Number.isFinite(fontSize)) {
+      setRootFontSize(fontSize);
+    }
+  });
+  useIsoLayoutEffect(() => {
+    measureViewportHeight();
+    if (!viewportElement || typeof ResizeObserver !== 'function') {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(measureViewportHeight);
+    resizeObserver.observe(viewportElement);
+    return () => {
+      resizeObserver.disconnect();
     };
-    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;
+  }, [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 [];
     }
-    this.context.onOpenChange?.(nextOpen, eventDetails);
-    if (eventDetails.isCanceled) {
-      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 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 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);
     }
-    this.update(updatedState);
-  };
-}
-function createInitialState(initialState = {}) {
+    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 {
-    ...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
   };
 }
 
+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;
+
 /**
- * Groups all parts of the dialog.
- * Doesn’t render its own HTML element.
- *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ * 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 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;
+function removeCSSVariableInheritance$1() {
+  if (drawerSwipeVarsRegistered) {
+    return;
+  }
 
-  // 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
-  });
+  // 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 button that opens the dialog.
- * Renders a `<button>` element.
+ * A container for the drawer contents.
+ * Renders a `<div>` element.
  *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
-const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigger(componentProps, forwardedRef) {
+const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(componentProps, forwardedRef) {
   const {
-    render,
     className,
-    disabled = false,
-    nativeButton = true,
-    id: idProp,
-    payload,
-    handle,
+    finalFocus,
+    initialFocus,
+    render,
     ...elementProps
   } = componentProps;
-  const dialogRootContext = useDialogRootContext(true);
-  const store = handle?.store ?? dialogRootContext?.store;
-  if (!store) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.' : formatErrorMessage(79));
-  }
-  const thisTriggerId = useBaseUiId(idProp);
-  const floatingContext = store.useState('floatingRootContext');
-  const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
-  const triggerElementRef = React.useRef(null);
   const {
-    registerTrigger,
-    isMountedByThisTrigger
-  } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
-    payload
-  });
+    store
+  } = useDialogRootContext();
   const {
-    getButtonProps,
-    buttonRef
-  } = useButton({
-    disabled,
-    native: nativeButton
+    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);
   });
-  const click = useClick(floatingContext, {
-    enabled: floatingContext != null
+  useIsoLayoutEffect(() => {
+    if (!mounted) {
+      popupHeightRef.current = 0;
+      setPopupHeight(0);
+      onPopupHeightChange(0);
+      return undefined;
+    }
+    const popupElement = store.context.popupRef.current;
+    if (!popupElement) {
+      return undefined;
+    }
+    removeCSSVariableInheritance$1();
+    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;
+      }
+      const progress = nestedSwipeProgressStore.getSnapshot();
+      if (progress > 0) {
+        popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, `${progress}`);
+      } else {
+        popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
+      }
+    };
+    syncNestedSwipeProgress();
+    const unsubscribe = nestedSwipeProgressStore.subscribe(syncNestedSwipeProgress);
+    return () => {
+      unsubscribe();
+      const popupElement = popupRef.current;
+      if (popupElement) {
+        popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
+      }
+    };
+  }, [nestedSwipeProgressStore, store.context.popupRef]);
+  React.useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    notifyParentFrontmostHeight?.(frontmostHeight);
+    return () => {
+      notifyParentFrontmostHeight?.(0);
+    };
+  }, [frontmostHeight, open, notifyParentFrontmostHeight]);
+  React.useEffect(() => {
+    if (!notifyParentHasNestedDrawer) {
+      return undefined;
+    }
+    const present = open || transitionStatus === 'ending';
+    notifyParentHasNestedDrawer(present);
+    return () => {
+      notifyParentHasNestedDrawer(false);
+    };
+  }, [notifyParentHasNestedDrawer, open, transitionStatus]);
+  useOpenChangeComplete({
+    open,
+    ref: store.context.popupRef,
+    onComplete() {
+      if (open) {
+        store.context.onOpenChangeComplete?.(true);
+      }
+    }
   });
-  const localInteractionProps = useInteractions([click]);
+  const resolvedInitialFocus = initialFocus === undefined ? store.context.popupRef : initialFocus;
   const state = {
-    disabled,
-    open: isOpenedByThisTrigger
+    open,
+    nested,
+    transitionStatus,
+    expanded: activeSnapPoint === 1,
+    nestedDrawerOpen,
+    nestedDrawerSwiping: nestedSwiping,
+    swipeDirection,
+    swiping
   };
-  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
-  return useRenderElement('button', componentProps, {
+  let popupHeightCssVarValue;
+  const shouldUseAutoHeight = !hasNestedDrawer && transitionStatus !== 'ending';
+  if (popupHeight && !shouldUseAutoHeight) {
+    popupHeightCssVarValue = `${popupHeight}px`;
+  }
+  const shouldApplySnapPoints = snapPoints && snapPoints.length > 0 && (swipeDirection === 'down' || swipeDirection === 'up');
+  let snapPointOffsetValue = null;
+  if (shouldApplySnapPoints && activeSnapPointOffset !== null) {
+    snapPointOffsetValue = swipeDirection === 'up' ? -activeSnapPointOffset : activeSnapPointOffset;
+  }
+  let dragStyles = swipe ? swipe.getDragStyles() : EMPTY_OBJECT;
+  if (shouldApplySnapPoints && swipeDirection === 'down') {
+    const baseOffset = activeSnapPointOffset ?? 0;
+    const movementValue = Number.parseFloat(String(dragStyles[DrawerPopupCssVars.swipeMovementY] ?? 0));
+    const nextOffset = Number.isFinite(movementValue) ? baseOffset + movementValue : baseOffset;
+    const shouldDamp = nextOffset < 0;
+    if (swiping && shouldDamp && Number.isFinite(movementValue)) {
+      const overshoot = Math.abs(nextOffset);
+      const dampedOffset = -Math.sqrt(overshoot);
+      const dampedMovement = dampedOffset - baseOffset;
+      dragStyles = {
+        ...dragStyles,
+        transform: undefined,
+        [DrawerPopupCssVars.swipeMovementY]: `${dampedMovement}px`
+      };
+    } else {
+      dragStyles = {
+        ...dragStyles,
+        transform: undefined
+      };
+    }
+  }
+  const element = useRenderElement('div', componentProps, {
     state,
-    ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
-    props: [localInteractionProps.getReferenceProps(), rootTriggerProps, {
-      [CLICK_TRIGGER_IDENTIFIER]: '',
-      id: thisTriggerId
-    }, elementProps, getButtonProps],
-    stateAttributesMapping: triggerOpenStateMapping
+    props: [rootPopupProps, {
+      'aria-labelledby': titleElementId,
+      'aria-describedby': descriptionElementId,
+      role,
+      tabIndex: -1,
+      hidden: !mounted,
+      onKeyDown(event) {
+        if (COMPOSITE_KEYS.has(event.key)) {
+          event.stopPropagation();
+        }
+      },
+      style: {
+        ...dragStyles,
+        [DrawerBackdropCssVars.swipeProgress]: '0',
+        [DrawerPopupCssVars.nestedDrawers]: nestedOpenDialogCount,
+        [DrawerPopupCssVars.height]: popupHeightCssVarValue,
+        [DrawerPopupCssVars.snapPointOffset]: typeof snapPointOffsetValue === 'number' ? `${snapPointOffsetValue}px` : '0px',
+        [DrawerPopupCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined,
+        [DrawerPopupCssVars.swipeStrength]: typeof swipeStrength === 'number' && Number.isFinite(swipeStrength) && swipeStrength > 0 ? `${swipeStrength}` : '1'
+      }
+    }, elementProps],
+    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    stateAttributesMapping
+  });
+  return /*#__PURE__*/jsx(FloatingFocusManager, {
+    context: floatingRootContext,
+    openInteractionType: openMethod,
+    disabled: !mounted,
+    closeOnFocusOut: !disablePointerDismissal,
+    initialFocus: resolvedInitialFocus,
+    returnFocus: finalFocus,
+    modal: modal !== false,
+    restoreFocus: "popup",
+    children: element
   });
 });
-if (process.env.NODE_ENV !== "production") DialogTrigger.displayName = "DialogTrigger";
+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;
 
 var _DrawerProviderReport, _DrawerProviderReport2;
 /**
@@ -2511,4 +2511,4 @@ function mergeHiddenState(prevState, nextState) {
   return nextState;
 }
 
-export { useScrollAreaRootContext as A, getOffset as B, COMPOSITE_KEYS as C, DrawerTrigger as D, ScrollAreaRootCssVars as E, scrollAreaStateAttributesMapping as F, useScrollAreaViewportContext as G, ScrollAreaRoot as S, DrawerRoot as a, DrawerPortal as b, DrawerBackdrop as c, DrawerPopup as d, ScrollAreaViewport as e, DrawerContent as f, createInitialPopupStoreState as g, useImplicitActiveTrigger as h, useOpenStateTransitions as i, useSyncedFloatingRootContext as j, useRole as k, useTriggerDataForwarding as l, useTriggerRegistration as m, useDrawerProviderContext as n, DrawerBackdropCssVars as o, popupStoreSelectors as p, DrawerPopupCssVars as q, DrawerProviderContext as r, useDialogPortalContext as s, DialogStore as t, useDialogRootContext as u, useDrawerRootContext as v, DrawerPopupDataAttributes as w, useDrawerSnapPoints as x, DrawerViewportContext as y, DRAWER_CONTENT_ATTRIBUTE as z };
+export { useDrawerSnapPoints as A, DrawerViewportContext as B, COMPOSITE_KEYS as C, DrawerTrigger as D, DRAWER_CONTENT_ATTRIBUTE as E, useScrollAreaRootContext as F, getOffset as G, ScrollAreaRootCssVars as H, scrollAreaStateAttributesMapping as I, useScrollAreaViewportContext as J, ScrollAreaRoot as S, DrawerRoot as a, DrawerPortal as b, DrawerBackdrop as c, DrawerPopup as d, ScrollAreaViewport as e, DrawerContent as f, DialogRoot as g, DialogTrigger as h, DialogPortal as i, useDialogPortalContext as j, DialogStore as k, createInitialPopupStoreState as l, useImplicitActiveTrigger as m, useOpenStateTransitions as n, useSyncedFloatingRootContext as o, popupStoreSelectors as p, useRole as q, useTriggerDataForwarding as r, useTriggerRegistration as s, useDrawerProviderContext as t, useDialogRootContext as u, DrawerBackdropCssVars as v, DrawerPopupCssVars as w, DrawerProviderContext as x, useDrawerRootContext as y, DrawerPopupDataAttributes as z };