@jobber/components 8.21.1 → 8.22.0

package/dist/ScrollAreaViewport-cjs.js

@@ -414,179 +414,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 = {
-  ...InternalBackdrop.popupStateMapping,
-  ...useButton.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__namespace.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.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__namespace.forwardRef(function DrawerContent(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  useDialogRootContext();
-  return useRenderElement.useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      [DRAWER_CONTENT_ATTRIBUTE]: ''
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerContent";
-
-const DrawerProviderContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") DrawerProviderContext.displayName = "DrawerProviderContext";
-function useDrawerProviderContext(optional) {
-  const context = React__namespace.useContext(DrawerProviderContext);
-  return context;
-}
-
-let DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
-  /**
-   * Present when the drawer is open.
-   */
-  DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = InternalBackdrop.CommonPopupDataAttributes.open] = "open";
-  /**
-   * Present when the drawer is closed.
-   */
-  DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = InternalBackdrop.CommonPopupDataAttributes.closed] = "closed";
-  /**
-   * Present when the drawer is animating in.
-   */
-  DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = InternalBackdrop.CommonPopupDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the drawer is animating out.
-   */
-  DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = InternalBackdrop.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__namespace.createContext(undefined);
 if (process.env.NODE_ENV !== "production") DialogPortalContext.displayName = "DialogPortalContext";
 function useDialogPortalContext() {
@@ -609,852 +436,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__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") DrawerRootContext.displayName = "DrawerRootContext";
-function useDrawerRootContext(optional) {
-  const drawerRootContext = React__namespace.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>.' : useRenderElement.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.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__namespace.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__*/jsxRuntime.jsx(DialogPortalContext.Provider, {
+    value: keepMounted,
+    children: /*#__PURE__*/jsxRuntime.jsxs(InternalBackdrop.FloatingPortal, {
+      ref: forwardedRef,
+      ...portalProps,
+      children: [mounted && modal === true && /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.InternalBackdrop, {
+        ref: store.context.internalBackdropRef,
+        inert: InternalBackdrop.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__namespace.useState(0);
-  const [rootFontSize, setRootFontSize] = React__namespace.useState(16);
-  const measureViewportHeight = useButton.useStableCallback(() => {
-    const doc = useButton.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);
-    }
-  });
-  useButton.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
+  } = InternalBackdrop.useOpenInteractionType(open);
+  useImplicitActiveTrigger(store);
+  const {
+    forceUnmount
+  } = useOpenStateTransitions(open, store);
+  const createDialogEventDetails = useButton.useStableCallback(reason => {
+    const details = useButton.createChangeEventDetails(reason);
+    details.preventUnmountOnClose = () => {
+      store.set('preventUnmountingOnClose', true);
     };
-  }, [measureViewportHeight, viewportElement]);
-  const resolvedSnapPoints = React__namespace.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__namespace.useCallback(() => {
+    store.setOpen(false, createDialogEventDetails(useButton.imperativeAction));
+  }, [store, createDialogEventDetails]);
+  React__namespace.useImperativeHandle(actionsRef, () => ({
+    unmount: forceUnmount,
+    close: handleImperativeClose
+  }), [forceUnmount, handleImperativeClose]);
+  const floatingRootContext = useSyncedFloatingRootContext({
+    popupStore: store,
+    onOpenChange: store.setOpen,
+    treatPopupAsFloatingElement: true,
+    noEmit: true
+  });
+  const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = React__namespace.useState(0);
+  const isTopmost = ownNestedOpenDialogs === 0;
+  const role = useRole(floatingRootContext);
+  const dismiss = InternalBackdrop.useDismiss(floatingRootContext, {
+    outsidePressEvent() {
+      if (store.context.internalBackdropRef.current || store.context.backdropRef.current) {
+        return 'intentional';
       }
-      const clampedHeight = clamp.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 = useButton.getTarget(event);
+      if (isTopmost && !disablePointerDismissal) {
+        const eventTarget = target;
+        // Only close if the click occurred on the dialog's owning backdrop.
+        // This supports multiple modal dialogs that aren't nested in the React tree:
+        // https://github.com/mui/base-ui/issues/1320
+        if (modal) {
+          return store.context.internalBackdropRef.current || store.context.backdropRef.current ? store.context.internalBackdropRef.current === eventTarget || store.context.backdropRef.current === eventTarget || useButton.contains(eventTarget, popupElement) && !eventTarget?.hasAttribute('data-base-ui-portal') : true;
+        }
+        return true;
+      }
+      return false;
+    },
+    escapeKey: isTopmost
+  });
+  InternalBackdrop.useScrollLock(open && modal === true, popupElement);
+  const {
+    getReferenceProps,
+    getFloatingProps,
+    getTriggerProps
+  } = InternalBackdrop.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__namespace.useEffect(() => {
+    if (parentContext?.onNestedDialogOpen && open) {
+      parentContext.onNestedDialogOpen(ownNestedOpenDialogs);
     }
-    deduped.reverse();
-    return deduped;
-  }, [popupHeight, rootFontSize, snapPoints, viewportHeight]);
-  const resolvedActiveSnapPoint = React__namespace.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__namespace.useMemo(() => getReferenceProps(triggerProps), [getReferenceProps, triggerProps]);
+  const inactiveTriggerProps = React__namespace.useMemo(() => getTriggerProps(triggerProps), [getTriggerProps, triggerProps]);
+  const popupProps = React__namespace.useMemo(() => getFloatingProps(), [getFloatingProps]);
+  store.useSyncedValues({
+    openMethod,
+    activeTriggerProps,
+    inactiveTriggerProps,
+    popupProps,
+    floatingRootContext,
+    nestedOpenDialogCount: ownNestedOpenDialogs
+  });
+}
+
+const selectors = {
+  ...popupStoreSelectors,
+  modal: InternalBackdrop.createSelector(state => state.modal),
+  nested: InternalBackdrop.createSelector(state => state.nested),
+  nestedOpenDialogCount: InternalBackdrop.createSelector(state => state.nestedOpenDialogCount),
+  disablePointerDismissal: InternalBackdrop.createSelector(state => state.disablePointerDismissal),
+  openMethod: InternalBackdrop.createSelector(state => state.openMethod),
+  descriptionElementId: InternalBackdrop.createSelector(state => state.descriptionElementId),
+  titleElementId: InternalBackdrop.createSelector(state => state.titleElementId),
+  viewportElement: InternalBackdrop.createSelector(state => state.viewportElement),
+  role: InternalBackdrop.createSelector(state => state.role)
+};
+class DialogStore extends InternalBackdrop.ReactStore {
+  constructor(initialState) {
+    super(createInitialState(initialState), {
+      popupRef: /*#__PURE__*/React__namespace.createRef(),
+      backdropRef: /*#__PURE__*/React__namespace.createRef(),
+      internalBackdropRef: /*#__PURE__*/React__namespace.createRef(),
+      outsidePressEnabledRef: {
+        current: true
+      },
+      triggerElements: new InternalBackdrop.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.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__namespace.createContext(null);
-if (process.env.NODE_ENV !== "production") DrawerViewportContext.displayName = "DrawerViewportContext";
-function useDrawerViewportContext(optional) {
-  const context = React__namespace.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 = useRenderElement.useRefWithInit(() => {
+    return handle?.store ?? new DialogStore({
+      open: defaultOpen,
+      openProp,
+      activeTriggerId: defaultTriggerIdProp,
+      triggerIdProp,
+      modal,
+      disablePointerDismissal,
+      nested
     });
-  }
-  drawerSwipeVarsRegistered = true;
+  }).current;
+
+  // Support initially open state when uncontrolled
+  InternalBackdrop.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__namespace.useMemo(() => ({
+    store
+  }), [store]);
+  return /*#__PURE__*/jsxRuntime.jsx(DialogRootContext.Provider, {
+    value: contextValue,
+    children: typeof children === 'function' ? children({
+      payload
+    }) : children
+  });
 }
-const stateAttributesMapping = {
-  ...InternalBackdrop.popupStateMapping,
-  ...useButton.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__namespace.forwardRef(function DrawerPopup(componentProps, forwardedRef) {
+const DialogTrigger = /*#__PURE__*/React__namespace.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.' : useRenderElement.formatErrorMessage(79));
+  }
+  const thisTriggerId = useButton.useBaseUiId(idProp);
+  const floatingContext = store.useState('floatingRootContext');
+  const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const triggerElementRef = React__namespace.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__namespace.useState(0);
-  const popupHeightRef = React__namespace.useRef(0);
-  const measureHeight = useButton.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
   });
-  useButton.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]);
-  useButton.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__namespace.useEffect(() => {
-    if (!open) {
-      return undefined;
-    }
-    notifyParentFrontmostHeight?.(frontmostHeight);
-    return () => {
-      notifyParentFrontmostHeight?.(0);
-    };
-  }, [frontmostHeight, open, notifyParentFrontmostHeight]);
-  React__namespace.useEffect(() => {
-    if (!notifyParentHasNestedDrawer) {
-      return undefined;
-    }
-    const present = open || transitionStatus === 'ending';
-    notifyParentHasNestedDrawer(present);
-    return () => {
-      notifyParentHasNestedDrawer(false);
-    };
-  }, [notifyParentHasNestedDrawer, open, transitionStatus]);
-  useButton.useOpenChangeComplete({
-    open,
-    ref: store.context.popupRef,
-    onComplete() {
-      if (open) {
-        store.context.onOpenChangeComplete?.(true);
-      }
-    }
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton.useButton({
+    disabled,
+    native: nativeButton
   });
-  const resolvedInitialFocus = initialFocus === undefined ? store.context.popupRef : initialFocus;
+  const click = InternalBackdrop.useClick(floatingContext, {
+    enabled: floatingContext != null
+  });
+  const localInteractionProps = InternalBackdrop.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() : useRenderElement.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.useRenderElement('div', componentProps, {
+  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  return useRenderElement.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__*/jsxRuntime.jsx(InternalBackdrop.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, {
+      [InternalBackdrop.CLICK_TRIGGER_IDENTIFIER]: '',
+      id: thisTriggerId
+    }, elementProps, getButtonProps],
+    stateAttributesMapping: InternalBackdrop.triggerOpenStateMapping
   });
 });
-if (process.env.NODE_ENV !== "production") DrawerPopup.displayName = "DrawerPopup";
+if (process.env.NODE_ENV !== "production") DialogTrigger.displayName = "DialogTrigger";
 
-const DialogPortal = /*#__PURE__*/React__namespace.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__*/jsxRuntime.jsx(DialogPortalContext.Provider, {
-    value: keepMounted,
-    children: /*#__PURE__*/jsxRuntime.jsxs(InternalBackdrop.FloatingPortal, {
-      ref: forwardedRef,
-      ...portalProps,
-      children: [mounted && modal === true && /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.InternalBackdrop, {
-        ref: store.context.internalBackdropRef,
-        inert: InternalBackdrop.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 = {
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.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__namespace.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
-  } = InternalBackdrop.useOpenInteractionType(open);
-  useImplicitActiveTrigger(store);
+    render,
+    className,
+    forceRender = false,
+    ...elementProps
+  } = componentProps;
   const {
-    forceUnmount
-  } = useOpenStateTransitions(open, store);
-  const createDialogEventDetails = useButton.useStableCallback(reason => {
-    const details = useButton.createChangeEventDetails(reason);
-    details.preventUnmountOnClose = () => {
-      store.set('preventUnmountingOnClose', true);
-    };
-    return details;
-  });
-  const handleImperativeClose = React__namespace.useCallback(() => {
-    store.setOpen(false, createDialogEventDetails(useButton.imperativeAction));
-  }, [store, createDialogEventDetails]);
-  React__namespace.useImperativeHandle(actionsRef, () => ({
-    unmount: forceUnmount,
-    close: handleImperativeClose
-  }), [forceUnmount, handleImperativeClose]);
-  const floatingRootContext = useSyncedFloatingRootContext({
-    popupStore: store,
-    onOpenChange: store.setOpen,
-    treatPopupAsFloatingElement: true,
-    noEmit: true
-  });
-  const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = React__namespace.useState(0);
-  const isTopmost = ownNestedOpenDialogs === 0;
-  const role = useRole(floatingRootContext);
-  const dismiss = InternalBackdrop.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 = useButton.getTarget(event);
-      if (isTopmost && !disablePointerDismissal) {
-        const eventTarget = target;
-        // Only close if the click occurred on the dialog's owning backdrop.
-        // This supports multiple modal dialogs that aren't nested in the React tree:
-        // https://github.com/mui/base-ui/issues/1320
-        if (modal) {
-          return store.context.internalBackdropRef.current || store.context.backdropRef.current ? store.context.internalBackdropRef.current === eventTarget || store.context.backdropRef.current === eventTarget || useButton.contains(eventTarget, popupElement) && !eventTarget?.hasAttribute('data-base-ui-portal') : true;
-        }
-        return 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.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
   });
-  InternalBackdrop.useScrollLock(open && modal === true, popupElement);
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getTriggerProps
-  } = InternalBackdrop.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__namespace.forwardRef(function DrawerContent(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  useDialogRootContext();
+  return useRenderElement.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__namespace.useEffect(() => {
-    if (parentContext?.onNestedDialogOpen && open) {
-      parentContext.onNestedDialogOpen(ownNestedOpenDialogs);
+const DrawerProviderContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") DrawerProviderContext.displayName = "DrawerProviderContext";
+function useDrawerProviderContext(optional) {
+  const context = React__namespace.useContext(DrawerProviderContext);
+  return context;
+}
+
+let DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = InternalBackdrop.CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = InternalBackdrop.CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = InternalBackdrop.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = InternalBackdrop.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__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") DrawerRootContext.displayName = "DrawerRootContext";
+function useDrawerRootContext(optional) {
+  const drawerRootContext = React__namespace.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>.' : useRenderElement.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.clamp(snapPoint, 0, 1) * viewportHeight;
     }
-    return () => {
-      if (parentContext?.onNestedDialogClose && open) {
-        parentContext.onNestedDialogClose();
-      }
-    };
-  }, [open, parentContext, ownNestedOpenDialogs]);
-  const activeTriggerProps = React__namespace.useMemo(() => getReferenceProps(triggerProps), [getReferenceProps, triggerProps]);
-  const inactiveTriggerProps = React__namespace.useMemo(() => getTriggerProps(triggerProps), [getTriggerProps, triggerProps]);
-  const popupProps = React__namespace.useMemo(() => getFloatingProps(), [getFloatingProps]);
-  store.useSyncedValues({
-    openMethod,
-    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: InternalBackdrop.createSelector(state => state.modal),
-  nested: InternalBackdrop.createSelector(state => state.nested),
-  nestedOpenDialogCount: InternalBackdrop.createSelector(state => state.nestedOpenDialogCount),
-  disablePointerDismissal: InternalBackdrop.createSelector(state => state.disablePointerDismissal),
-  openMethod: InternalBackdrop.createSelector(state => state.openMethod),
-  descriptionElementId: InternalBackdrop.createSelector(state => state.descriptionElementId),
-  titleElementId: InternalBackdrop.createSelector(state => state.titleElementId),
-  viewportElement: InternalBackdrop.createSelector(state => state.viewportElement),
-  role: InternalBackdrop.createSelector(state => state.role)
-};
-class DialogStore extends InternalBackdrop.ReactStore {
-  constructor(initialState) {
-    super(createInitialState(initialState), {
-      popupRef: /*#__PURE__*/React__namespace.createRef(),
-      backdropRef: /*#__PURE__*/React__namespace.createRef(),
-      internalBackdropRef: /*#__PURE__*/React__namespace.createRef(),
-      outsidePressEnabledRef: {
-        current: true
-      },
-      triggerElements: new InternalBackdrop.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__namespace.useState(0);
+  const [rootFontSize, setRootFontSize] = React__namespace.useState(16);
+  const measureViewportHeight = useButton.useStableCallback(() => {
+    const doc = useButton.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);
+    }
+  });
+  useButton.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__namespace.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.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__namespace.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.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__namespace.createContext(null);
+if (process.env.NODE_ENV !== "production") DrawerViewportContext.displayName = "DrawerViewportContext";
+function useDrawerViewportContext(optional) {
+  const context = React__namespace.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 = useRenderElement.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
-  InternalBackdrop.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__namespace.useMemo(() => ({
-    store
-  }), [store]);
-  return /*#__PURE__*/jsxRuntime.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 = {
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.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__namespace.forwardRef(function DialogTrigger(componentProps, forwardedRef) {
+const DrawerPopup = /*#__PURE__*/React__namespace.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.' : useRenderElement.formatErrorMessage(79));
-  }
-  const thisTriggerId = useButton.useBaseUiId(idProp);
-  const floatingContext = store.useState('floatingRootContext');
-  const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
-  const triggerElementRef = React__namespace.useRef(null);
   const {
-    registerTrigger,
-    isMountedByThisTrigger
-  } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
-    payload
-  });
+    store
+  } = useDialogRootContext();
   const {
-    getButtonProps,
-    buttonRef
-  } = useButton.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__namespace.useState(0);
+  const popupHeightRef = React__namespace.useRef(0);
+  const measureHeight = useButton.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 = InternalBackdrop.useClick(floatingContext, {
-    enabled: floatingContext != null
+  useButton.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]);
+  useButton.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__namespace.useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    notifyParentFrontmostHeight?.(frontmostHeight);
+    return () => {
+      notifyParentFrontmostHeight?.(0);
+    };
+  }, [frontmostHeight, open, notifyParentFrontmostHeight]);
+  React__namespace.useEffect(() => {
+    if (!notifyParentHasNestedDrawer) {
+      return undefined;
+    }
+    const present = open || transitionStatus === 'ending';
+    notifyParentHasNestedDrawer(present);
+    return () => {
+      notifyParentHasNestedDrawer(false);
+    };
+  }, [notifyParentHasNestedDrawer, open, transitionStatus]);
+  useButton.useOpenChangeComplete({
+    open,
+    ref: store.context.popupRef,
+    onComplete() {
+      if (open) {
+        store.context.onOpenChangeComplete?.(true);
+      }
+    }
   });
-  const localInteractionProps = InternalBackdrop.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.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() : useRenderElement.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.useRenderElement('div', componentProps, {
     state,
-    ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
-    props: [localInteractionProps.getReferenceProps(), rootTriggerProps, {
-      [InternalBackdrop.CLICK_TRIGGER_IDENTIFIER]: '',
-      id: thisTriggerId
-    }, elementProps, getButtonProps],
-    stateAttributesMapping: InternalBackdrop.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__*/jsxRuntime.jsx(InternalBackdrop.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;
 /**
@@ -2534,7 +2534,10 @@ function mergeHiddenState(prevState, nextState) {
 
 exports.COMPOSITE_KEYS = COMPOSITE_KEYS;
 exports.DRAWER_CONTENT_ATTRIBUTE = DRAWER_CONTENT_ATTRIBUTE;
+exports.DialogPortal = DialogPortal;
+exports.DialogRoot = DialogRoot;
 exports.DialogStore = DialogStore;
+exports.DialogTrigger = DialogTrigger;
 exports.DrawerBackdrop = DrawerBackdrop;
 exports.DrawerBackdropCssVars = DrawerBackdropCssVars;
 exports.DrawerContent = DrawerContent;