@base-ui/react 1.2.0 → 1.3.0

package/dialog/root/DialogRoot.d.ts

@@ -10,6 +10,7 @@ import { type PayloadChildRenderFunction } from "../../utils/popups/index.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare function DialogRoot<Payload>(props: DialogRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export interface DialogRootState {}
 export interface DialogRootProps<Payload = unknown> {
   /**
    * Whether the dialog is currently open.
@@ -27,9 +28,12 @@ export interface DialogRootProps<Payload = unknown> {
    * - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
    * - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.
+   *
+   * When `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so
+   * touch screen readers can escape the popup.
    * @default true
    */
-  modal?: (boolean | 'trap-focus') | undefined;
+  modal?: boolean | 'trap-focus' | undefined;
   /**
    * Event handler called when the dialog is opened or closed.
    */
@@ -67,12 +71,12 @@ export interface DialogRootProps<Payload = unknown> {
    * This is useful in conjunction with the `open` prop to create a controlled dialog.
    * There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
    */
-  triggerId?: (string | null) | undefined;
+  triggerId?: string | null | undefined;
   /**
    * ID of the trigger that the dialog is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
 }
 export interface DialogRootActions {
   unmount: () => void;
@@ -83,6 +87,7 @@ export type DialogRootChangeEventDetails = BaseUIChangeEventDetails<DialogRoot.C
   preventUnmountOnClose(): void;
 };
 export declare namespace DialogRoot {
+  type State = DialogRootState;
   type Props<Payload = unknown> = DialogRootProps<Payload>;
   type Actions = DialogRootActions;
   type ChangeEventReason = DialogRootChangeEventReason;

package/dialog/root/useDialogRoot.d.ts

@@ -1,17 +1,13 @@
 import { type DialogRoot } from "./DialogRoot.js";
 import { DialogStore } from "../store/DialogStore.js";
-export declare function useDialogRoot(params: useDialogRoot.Parameters): useDialogRoot.ReturnValue;
+export declare function useDialogRoot(params: UseDialogRootParameters): UseDialogRootReturnValue;
 export interface UseDialogRootSharedParameters {}
 export interface UseDialogRootParameters {
   store: DialogStore<any>;
   actionsRef?: DialogRoot.Props['actionsRef'] | undefined;
   parentContext?: DialogStore<unknown>['context'] | undefined;
   onOpenChange: DialogRoot.Props['onOpenChange'];
-  triggerIdProp?: (string | null) | undefined;
+  triggerIdProp?: string | null | undefined;
 }
 export type UseDialogRootReturnValue = void;
-export declare namespace useDialogRoot {
-  type SharedParameters = UseDialogRootSharedParameters;
-  type Parameters = UseDialogRootParameters;
-  type ReturnValue = UseDialogRootReturnValue;
-}
+export interface UseDialogRootState {}

package/dialog/root/useDialogRoot.js

@@ -27,15 +27,12 @@ function useDialogRoot(params) {
   const popupElement = store.useState('popupElement');
   const {
     openMethod,
-    triggerProps,
-    reset: resetOpenInteractionType
+    triggerProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   (0, _popups.useImplicitActiveTrigger)(store);
   const {
     forceUnmount
-  } = (0, _popups.useOpenStateTransitions)(open, store, () => {
-    resetOpenInteractionType();
-  });
+  } = (0, _popups.useOpenStateTransitions)(open, store);
   const createDialogEventDetails = (0, _useStableCallback.useStableCallback)(reason => {
     const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason);
     details.preventUnmountOnClose = () => {

package/dialog/title/DialogTitle.d.ts

@@ -7,7 +7,7 @@ import { type BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-export interface DialogTitleProps extends BaseUIComponentProps<'h2', DialogTitle.State> {}
+export interface DialogTitleProps extends BaseUIComponentProps<'h2', DialogTitleState> {}
 export interface DialogTitleState {}
 export declare namespace DialogTitle {
   type Props = DialogTitleProps;

package/dialog/trigger/DialogTrigger.d.ts

@@ -11,7 +11,7 @@ export declare const DialogTrigger: DialogTrigger;
 export interface DialogTrigger {
   <Payload>(componentProps: DialogTriggerProps<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
 }
-export interface DialogTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', DialogTrigger.State> {
+export interface DialogTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', DialogTriggerState> {
   /**
    * A handle to associate the trigger with a dialog.
    * Can be created with the Dialog.createHandle() method.

package/dialog/viewport/DialogViewport.d.ts

@@ -13,6 +13,9 @@ export interface DialogViewportState {
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the dialog is nested within another dialog.

package/direction-provider/DirectionProvider.d.ts

@@ -6,6 +6,7 @@ import { type TextDirection } from "./DirectionContext.js";
  * Documentation: [Base UI Direction Provider](https://base-ui.com/react/utils/direction-provider)
  */
 export declare const DirectionProvider: React.FC<DirectionProvider.Props>;
+export interface DirectionProviderState {}
 export interface DirectionProviderProps {
   children?: React.ReactNode;
   /**
@@ -15,5 +16,6 @@ export interface DirectionProviderProps {
   direction?: TextDirection | undefined;
 }
 export declare namespace DirectionProvider {
+  type State = DirectionProviderState;
   type Props = DirectionProviderProps;
 }

package/drawer/backdrop/DrawerBackdrop.d.ts

@@ -8,7 +8,7 @@ import { type BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerBackdrop: React.ForwardRefExoticComponent<Omit<DrawerBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerBackdropProps extends BaseUIComponentProps<'div', DrawerBackdrop.State> {
+export interface DrawerBackdropProps extends BaseUIComponentProps<'div', DrawerBackdropState> {
   /**
    * Whether the backdrop is forced to render even when nested.
    * @default false
@@ -20,6 +20,9 @@ export interface DrawerBackdropState {
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace DrawerBackdrop {

package/drawer/backdrop/DrawerBackdropDataAttributes.d.ts

@@ -0,0 +1,18 @@
+export declare enum DrawerBackdropDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the drawer is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the drawer is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/drawer/backdrop/DrawerBackdropDataAttributes.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerBackdropDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let DrawerBackdropDataAttributes = exports.DrawerBackdropDataAttributes = function (DrawerBackdropDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["open"] = _popupStateMapping.CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["endingStyle"] = _popupStateMapping.CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  return DrawerBackdropDataAttributes;
+}({});

package/drawer/close/DrawerClose.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerClose: DrawerClose;
-export interface DrawerCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DrawerClose.State> {}
+export interface DrawerCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DrawerCloseState> {}
 export interface DrawerCloseState {
   /**
    * Whether the button is currently disabled.

package/drawer/content/DrawerContent.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerContentProps extends BaseUIComponentProps<'div', DrawerContent.State> {}
+export interface DrawerContentProps extends BaseUIComponentProps<'div', DrawerContentState> {}
 export interface DrawerContentState {}
 export declare namespace DrawerContent {
   type Props = DrawerContentProps;

package/drawer/content/DrawerContent.js

@@ -9,6 +9,7 @@ exports.DrawerContent = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
 var _useRenderElement = require("../../utils/useRenderElement");
+var _DrawerContentDataAttributes = require("./DrawerContentDataAttributes");
 /**
  * A container for the drawer contents.
  * Renders a `<div>` element.
@@ -25,7 +26,7 @@ const DrawerContent = exports.DrawerContent = /*#__PURE__*/React.forwardRef(func
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: forwardedRef,
     props: [{
-      ['data-swipe-ignore']: ''
+      [_DrawerContentDataAttributes.DRAWER_CONTENT_ATTRIBUTE]: ''
     }, elementProps]
   });
 });

package/drawer/content/DrawerContentDataAttributes.d.ts

@@ -0,0 +1 @@
+export declare const DRAWER_CONTENT_ATTRIBUTE = "data-drawer-content";

package/drawer/content/DrawerContentDataAttributes.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DRAWER_CONTENT_ATTRIBUTE = void 0;
+const DRAWER_CONTENT_ATTRIBUTE = exports.DRAWER_CONTENT_ATTRIBUTE = 'data-drawer-content';

package/drawer/description/DrawerDescription.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerDescription: DrawerDescription;
-export interface DrawerDescriptionProps extends BaseUIComponentProps<'p', DrawerDescription.State> {}
+export interface DrawerDescriptionProps extends BaseUIComponentProps<'p', DrawerDescriptionState> {}
 export interface DrawerDescriptionState {}
 export interface DrawerDescription {
   (componentProps: DrawerDescriptionProps): React.JSX.Element;

package/drawer/indent/DrawerIndent.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * A wrapper element intended to contain your app's main UI.
- * Applies `data-active` when any drawer within the nearest <Drawer.Provider> is open.
+ * Applies `data-active` when any drawer within the nearest `<Drawer.Provider>` is open.
+ * Renders a `<div>` element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
@@ -13,7 +14,7 @@ export interface DrawerIndentState {
    */
   active: boolean;
 }
-export interface DrawerIndentProps extends BaseUIComponentProps<'div', DrawerIndent.State> {}
+export interface DrawerIndentProps extends BaseUIComponentProps<'div', DrawerIndentState> {}
 export declare namespace DrawerIndent {
   type State = DrawerIndentState;
   type Props = DrawerIndentProps;

package/drawer/indent/DrawerIndent.js

@@ -27,7 +27,8 @@ const stateAttributesMapping = {
 
 /**
  * A wrapper element intended to contain your app's main UI.
- * Applies `data-active` when any drawer within the nearest <Drawer.Provider> is open.
+ * Applies `data-active` when any drawer within the nearest `<Drawer.Provider>` is open.
+ * Renders a `<div>` element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */

package/drawer/indent-background/DrawerIndentBackground.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
- * An element placed before <Drawer.Indent> to render a background layer
- * that can be styled based on whether any drawer is open.
+ * An element placed before `<Drawer.Indent>` to render a background layer that can be styled based on whether any drawer is open.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerIndentBackground: React.ForwardRefExoticComponent<Omit<DrawerIndentBackgroundProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface DrawerIndentBackgroundState {
@@ -11,7 +13,7 @@ export interface DrawerIndentBackgroundState {
    */
   active: boolean;
 }
-export interface DrawerIndentBackgroundProps extends BaseUIComponentProps<'div', DrawerIndentBackground.State> {}
+export interface DrawerIndentBackgroundProps extends BaseUIComponentProps<'div', DrawerIndentBackgroundState> {}
 export declare namespace DrawerIndentBackground {
   type State = DrawerIndentBackgroundState;
   type Props = DrawerIndentBackgroundProps;

package/drawer/indent-background/DrawerIndentBackground.js

@@ -23,8 +23,10 @@ const stateAttributesMapping = {
 };
 
 /**
- * An element placed before <Drawer.Indent> to render a background layer
- * that can be styled based on whether any drawer is open.
+ * An element placed before `<Drawer.Indent>` to render a background layer that can be styled based on whether any drawer is open.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 const DrawerIndentBackground = exports.DrawerIndentBackground = /*#__PURE__*/React.forwardRef(function DrawerIndentBackground(componentProps, forwardedRef) {
   const {

package/drawer/index.d.ts

@@ -1,4 +1,4 @@
-export * as DrawerPreview from "./index.parts.js";
+export * as Drawer from "./index.parts.js";
 export type * from "./root/DrawerRoot.js";
 export type * from "./provider/DrawerProvider.js";
 export type * from "./indent/DrawerIndent.js";
@@ -6,6 +6,7 @@ export type * from "./indent-background/DrawerIndentBackground.js";
 export type * from "./trigger/DrawerTrigger.js";
 export type * from "./portal/DrawerPortal.js";
 export type * from "./popup/DrawerPopup.js";
+export type * from "./swipe-area/DrawerSwipeArea.js";
 export type * from "./content/DrawerContent.js";
 export type * from "./backdrop/DrawerBackdrop.js";
 export type * from "./viewport/DrawerViewport.js";

package/drawer/index.js

@@ -4,6 +4,6 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DrawerPreview = void 0;
-var _DrawerPreview = _interopRequireWildcard(require("./index.parts"));
-exports.DrawerPreview = _DrawerPreview;
+exports.Drawer = void 0;
+var _Drawer = _interopRequireWildcard(require("./index.parts"));
+exports.Drawer = _Drawer;

package/drawer/index.parts.d.ts

@@ -8,6 +8,7 @@ export { DrawerPopup as Popup } from "./popup/DrawerPopup.js";
 export { DrawerPortal as Portal } from "./portal/DrawerPortal.js";
 export { DrawerProvider as Provider } from "./provider/DrawerProvider.js";
 export { DrawerRoot as Root } from "./root/DrawerRoot.js";
+export { DrawerSwipeArea as SwipeArea } from "./swipe-area/DrawerSwipeArea.js";
 export { DrawerTitle as Title } from "./title/DrawerTitle.js";
 export { DrawerTrigger as Trigger } from "./trigger/DrawerTrigger.js";
 export { DrawerViewport as Viewport } from "./viewport/DrawerViewport.js";

package/drawer/index.parts.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "Root", {
     return _DrawerRoot.DrawerRoot;
   }
 });
+Object.defineProperty(exports, "SwipeArea", {
+  enumerable: true,
+  get: function () {
+    return _DrawerSwipeArea.DrawerSwipeArea;
+  }
+});
 Object.defineProperty(exports, "Title", {
   enumerable: true,
   get: function () {
@@ -103,6 +109,7 @@ var _DrawerPopup = require("./popup/DrawerPopup");
 var _DrawerPortal = require("./portal/DrawerPortal");
 var _DrawerProvider = require("./provider/DrawerProvider");
 var _DrawerRoot = require("./root/DrawerRoot");
+var _DrawerSwipeArea = require("./swipe-area/DrawerSwipeArea");
 var _DrawerTitle = require("./title/DrawerTitle");
 var _DrawerTrigger = require("./trigger/DrawerTrigger");
 var _DrawerViewport = require("./viewport/DrawerViewport");

package/drawer/popup/DrawerPopup.d.ts

@@ -10,7 +10,7 @@ import { type DrawerSwipeDirection } from "../root/DrawerRootContext.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerPopup: React.ForwardRefExoticComponent<Omit<DrawerPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopup.State> {
+export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopupState> {
   /**
    * Determines the element to focus when the drawer is opened.
    *
@@ -20,7 +20,7 @@ export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopu
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
+  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
   /**
    * Determines the element to focus when the drawer is closed.
    *
@@ -30,13 +30,16 @@ export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopu
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
+  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
 }
 export interface DrawerPopupState {
   /**
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the active snap point is the full-height expanded state.

package/drawer/popup/DrawerPopup.js

@@ -25,6 +25,63 @@ var _useDrawerSnapPoints = require("../root/useDrawerSnapPoints");
 var _DrawerViewportContext = require("../viewport/DrawerViewportContext");
 var _constants = require("../../utils/constants");
 var _jsxRuntime = require("react/jsx-runtime");
+// Module-level flag to ensure we only register the CSS properties once,
+// regardless of how many Drawer components are mounted.
+let drawerSwipeVarsRegistered = false;
+
+/**
+ * Removes inheritance of high-frequency drawer swipe CSS variables, which
+ * reduces style recalculation cost in complex drawers with deep subtrees.
+ * Child elements that need these values can still opt-in by using `inherit`.
+ * See https://motion.dev/blog/web-animation-performance-tier-list
+ * under the "Improving CSS variable performance" section.
+ */
+function removeCSSVariableInheritance() {
+  if (drawerSwipeVarsRegistered) {
+    return;
+  }
+
+  // Intentionally keep inheritance disabled on WebKit as well. Safari doesn't support
+  // opting descendants back in via `--var: inherit` for custom properties registered
+  // with `inherits: false`, but Drawer does not rely on descendant access to these vars
+  // (unlike ScrollArea), so we keep the performance optimization enabled.
+  if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
+    [_DrawerPopupCssVars.DrawerPopupCssVars.swipeMovementX, _DrawerPopupCssVars.DrawerPopupCssVars.swipeMovementY, _DrawerPopupCssVars.DrawerPopupCssVars.snapPointOffset].forEach(name => {
+      try {
+        CSS.registerProperty({
+          name,
+          syntax: '<length>',
+          inherits: false,
+          initialValue: '0px'
+        });
+      } catch {
+        /* ignore already-registered */
+      }
+    });
+    [{
+      name: _DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress,
+      initialValue: '0'
+    }, {
+      name: _DrawerPopupCssVars.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.popupStateMapping,
   ..._stateAttributesMapping.transitionStatusMapping,
@@ -125,8 +182,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
       onPopupHeightChange(oldHeight);
       return;
     }
-    const scrollHeight = popupElement.scrollHeight;
-    const nextHeight = scrollHeight > 0 ? Math.min(offsetHeight, scrollHeight) : offsetHeight;
+    const nextHeight = offsetHeight;
     if (nextHeight === popupHeightRef.current) {
       return;
     }
@@ -145,6 +201,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
     if (!popupElement) {
       return undefined;
     }
+    removeCSSVariableInheritance();
     measureHeight();
     if (typeof ResizeObserver !== 'function') {
       return undefined;

package/drawer/popup/DrawerPopupDataAttributes.d.ts

@@ -1,4 +1,20 @@
 export declare enum DrawerPopupDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the drawer is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the drawer is animating out.
+   */
+  endingStyle = "data-ending-style",
   /**
    * Present when the drawer is at the expanded (full-height) snap point.
    */

package/drawer/popup/DrawerPopupDataAttributes.js

@@ -4,7 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DrawerPopupDataAttributes = void 0;
-let DrawerPopupDataAttributes = exports.DrawerPopupDataAttributes = /*#__PURE__*/function (DrawerPopupDataAttributes) {
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let DrawerPopupDataAttributes = exports.DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = _popupStateMapping.CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = _popupStateMapping.CommonPopupDataAttributes.endingStyle] = "endingStyle";
   /**
    * Present when the drawer is at the expanded (full-height) snap point.
    */

package/drawer/portal/DrawerPortal.d.ts

@@ -9,7 +9,7 @@ import type { FloatingPortal } from "../../floating-ui-react/index.js";
  */
 export declare const DrawerPortal: DrawerPortal;
 export interface DrawerPortalState {}
-export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortal.State> {
+export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -18,7 +18,7 @@ export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortal.Sta
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<DrawerPortal.State>['container'] | undefined;
+  container?: FloatingPortal.Props<DrawerPortalState>['container'] | undefined;
 }
 export interface DrawerPortal {
   (componentProps: DrawerPortalProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element | null;

package/drawer/provider/DrawerProvider.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 /**
- * Provides a shared context for coordinating global Drawer UI,
- * such as indent/background effects based on whether any Drawer is open.
+ * Provides a shared context for coordinating global Drawer UI, such as indent/background effects based on whether any Drawer is open.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */

package/drawer/provider/DrawerProvider.js

@@ -11,8 +11,8 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _DrawerProviderContext = require("./DrawerProviderContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
- * Provides a shared context for coordinating global Drawer UI,
- * such as indent/background effects based on whether any Drawer is open.
+ * Provides a shared context for coordinating global Drawer UI, such as indent/background effects based on whether any Drawer is open.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */

package/drawer/root/DrawerRoot.d.ts

@@ -11,6 +11,7 @@ import type { PayloadChildRenderFunction } from "../../utils/popups/index.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare function DrawerRoot<Payload = unknown>(props: DrawerRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export interface DrawerRootState {}
 export interface DrawerRootProps<Payload = unknown> {
   /**
    * Whether the drawer is currently open.
@@ -30,7 +31,7 @@ export interface DrawerRootProps<Payload = unknown> {
    * - `'trap-focus'`: focus is trapped inside the drawer, but document page scroll is not locked and pointer interactions outside of it remain enabled.
    * @default true
    */
-  modal?: (boolean | 'trap-focus') | undefined;
+  modal?: boolean | 'trap-focus' | undefined;
   /**
    * Event handler called when the drawer is opened or closed.
    */
@@ -63,12 +64,12 @@ export interface DrawerRootProps<Payload = unknown> {
    * This is useful in conjunction with the `open` prop to create a controlled drawer.
    * There's no need to specify this prop when the drawer is uncontrolled (i.e. when the `open` prop is not set).
    */
-  triggerId?: (string | null) | undefined;
+  triggerId?: string | null | undefined;
   /**
    * ID of the trigger that the drawer is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open drawer.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
   /**
    * The content of the drawer.
    */
@@ -114,6 +115,7 @@ export type DrawerRootChangeEventDetails = BaseUIChangeEventDetails<DrawerRoot.C
 export type DrawerRootSnapPointChangeEventReason = DrawerRootChangeEventReason;
 export type DrawerRootSnapPointChangeEventDetails = BaseUIChangeEventDetails<DrawerRootSnapPointChangeEventReason>;
 export declare namespace DrawerRoot {
+  type State = DrawerRootState;
   type Props<Payload = unknown> = DrawerRootProps<Payload>;
   type Actions = DrawerRootActions;
   type ChangeEventReason = DrawerRootChangeEventReason;