@base-ui/react 1.2.0 → 1.3.0

package/esm/combobox/store.js

@@ -3,6 +3,7 @@ import { compareItemEquality } from "../utils/itemEquality.js";
 import { hasNullItemLabel } from "../utils/resolveValueLabel.js";
 export const selectors = {
   id: createSelector(state => state.id),
+  labelId: createSelector(state => state.labelId),
   query: createSelector(state => state.query),
   items: createSelector(state => state.items),
   selectedValue: createSelector(state => state.selectedValue),
@@ -50,6 +51,7 @@ export const selectors = {
   listElement: createSelector(state => state.listElement),
   triggerElement: createSelector(state => state.triggerElement),
   inputElement: createSelector(state => state.inputElement),
+  inputGroupElement: createSelector(state => state.inputGroupElement),
   popupSide: createSelector(state => state.popupSide),
   openMethod: createSelector(state => state.openMethod),
   inputInsidePopup: createSelector(state => state.inputInsidePopup),

package/esm/combobox/trigger/ComboboxTrigger.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A button that opens the popup.
  * Renders a `<button>` element.
  */
 export declare const ComboboxTrigger: React.ForwardRefExoticComponent<Omit<ComboboxTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface ComboboxTriggerState extends FieldRoot.State {
+export interface ComboboxTriggerState extends FieldRootState {
   /**
    * Whether the popup is open.
    */
@@ -29,7 +29,7 @@ export interface ComboboxTriggerState extends FieldRoot.State {
    */
   placeholder: boolean;
 }
-export interface ComboboxTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxTrigger.State> {
+export interface ComboboxTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxTriggerState> {
   /**
    * Whether the component should ignore user interaction.
    * @default false

package/esm/combobox/trigger/ComboboxTrigger.js

@@ -18,6 +18,7 @@ import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.j
 import { REASONS } from "../../utils/reasons.js";
 import { useClick, useTypeahead } from "../../floating-ui-react/index.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
+import { resolveAriaLabelledBy } from "../../utils/resolveAriaLabelledBy.js";
 const BOUNDARY_OFFSET = 2;
 
 /**
@@ -42,7 +43,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     validation
   } = useFieldRootContext();
   const {
-    labelId
+    labelId: fieldLabelId
   } = useLabelableContext();
   const store = useComboboxRootContext();
   const {
@@ -60,6 +61,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
   const triggerElement = useStore(store, selectors.triggerElement);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
   const rootId = useStore(store, selectors.id);
+  const comboboxLabelId = useStore(store, selectors.labelId);
   const open = useStore(store, selectors.open);
   const selectedValue = useStore(store, selectors.selectedValue);
   const activeIndex = useStore(store, selectors.activeIndex);
@@ -75,6 +77,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     id: inputInsidePopup ? idProp : undefined
   });
   const id = inputInsidePopup ? idProp ?? rootId : idProp;
+  const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, comboboxLabelId);
   const currentPointerTypeRef = React.useRef('');
   function trackPointerType(event) {
     currentPointerTypeRef.current = event.pointerType;
@@ -140,7 +143,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
       'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
       'aria-controls': open ? listElement?.id : undefined,
       'aria-required': inputInsidePopup ? required || undefined : undefined,
-      'aria-labelledby': labelId,
+      'aria-labelledby': ariaLabelledBy,
       onPointerDown: trackPointerType,
       onPointerEnter: trackPointerType,
       onFocus() {

package/esm/combobox/utils/ComboboxInternalDismissButton.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * @internal
+ */
+export declare const ComboboxInternalDismissButton: React.ForwardRefExoticComponent<React.RefAttributes<HTMLSpanElement>>;

package/esm/combobox/utils/ComboboxInternalDismissButton.js

@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from 'react';
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
+import { useButton } from "../../use-button/index.js";
+import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+import { useComboboxRootContext } from "../root/ComboboxRootContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @internal
+ */
+export const ComboboxInternalDismissButton = /*#__PURE__*/React.forwardRef(function ComboboxInternalDismissButton(_, forwardedRef) {
+  const store = useComboboxRootContext();
+  const {
+    buttonRef,
+    getButtonProps
+  } = useButton({
+    native: false
+  });
+  const mergedRef = useMergedRefs(forwardedRef, buttonRef);
+  const handleDismiss = useStableCallback(event => {
+    store.state.setOpen(false, createChangeEventDetails(REASONS.closePress, event.nativeEvent, event.currentTarget));
+  });
+  const dismissProps = getButtonProps({
+    onClick: handleDismiss
+  });
+  return /*#__PURE__*/_jsx("span", {
+    ref: mergedRef,
+    ...dismissProps,
+    "aria-label": "Dismiss",
+    tabIndex: undefined,
+    style: visuallyHiddenInput
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxInternalDismissButton.displayName = "ComboboxInternalDismissButton";

package/esm/composite/item/CompositeItem.d.ts

@@ -5,6 +5,7 @@ import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
  * @internal
  */
 export declare function CompositeItem<Metadata, State extends Record<string, any>>(componentProps: CompositeItem.Props<Metadata, State>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export interface CompositeItemState {}
 export interface CompositeItemProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<any, State>, 'render' | 'className'> {
   children?: React.ReactNode;
   metadata?: Metadata | undefined;
@@ -15,5 +16,6 @@ export interface CompositeItemProps<Metadata, State extends Record<string, any>>
   tag?: keyof React.JSX.IntrinsicElements | undefined;
 }
 export declare namespace CompositeItem {
-  type Props<Metadata, State extends Record<string, any>> = CompositeItemProps<Metadata, State>;
+  type State = CompositeItemState;
+  type Props<Metadata, TState extends Record<string, any>> = CompositeItemProps<Metadata, TState>;
 }

package/esm/composite/list/CompositeList.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
 export type CompositeMetadata<CustomMetadata> = {
-  index?: (number | null) | undefined;
+  index?: number | null | undefined;
 } & CustomMetadata;
 /**
  * Provides context for a list of items in a composite component.
  * @internal
  */
 export declare function CompositeList<Metadata>(props: CompositeList.Props<Metadata>): import("react/jsx-runtime").JSX.Element;
+export interface CompositeListState {}
 export interface CompositeListProps<Metadata> {
   children: React.ReactNode;
   /**
@@ -22,5 +23,6 @@ export interface CompositeListProps<Metadata> {
   onMapChange?: ((newMap: Map<Element, CompositeMetadata<Metadata> | null>) => void) | undefined;
 }
 export declare namespace CompositeList {
+  type State = CompositeListState;
   type Props<Metadata> = CompositeListProps<Metadata>;
 }

package/esm/composite/list/useCompositeListItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface UseCompositeListItemParameters<Metadata> {
   index?: number | undefined;
-  label?: (string | null) | undefined;
+  label?: string | null | undefined;
   metadata?: Metadata | undefined;
   textRef?: React.RefObject<HTMLElement | null> | undefined;
   /** Enables guessing the indexes. This avoids a re-render after mount, which is useful for

package/esm/composite/root/CompositeRoot.d.ts

@@ -7,13 +7,14 @@ import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
  * @internal
  */
 export declare function CompositeRoot<Metadata extends {}, State extends Record<string, any>>(componentProps: CompositeRoot.Props<Metadata, State>): import("react/jsx-runtime").JSX.Element;
+export interface CompositeRootState {}
 export interface CompositeRootProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<'div', State>, 'render' | 'className' | 'children'> {
   props?: Array<Record<string, any> | (() => Record<string, any>)> | undefined;
   state?: State | undefined;
   stateAttributesMapping?: StateAttributesMapping<State> | undefined;
   refs?: React.Ref<HTMLElement | null>[] | undefined;
   tag?: keyof React.JSX.IntrinsicElements | undefined;
-  orientation?: ('horizontal' | 'vertical' | 'both') | undefined;
+  orientation?: 'horizontal' | 'vertical' | 'both' | undefined;
   cols?: number | undefined;
   loopFocus?: boolean | undefined;
   highlightedIndex?: number | undefined;
@@ -29,5 +30,6 @@ export interface CompositeRootProps<Metadata, State extends Record<string, any>>
   highlightItemOnHover?: boolean | undefined;
 }
 export declare namespace CompositeRoot {
-  type Props<Metadata, State extends Record<string, any>> = CompositeRootProps<Metadata, State>;
+  type State = CompositeRootState;
+  type Props<Metadata, TState extends Record<string, any>> = CompositeRootProps<Metadata, TState>;
 }

package/esm/composite/root/useCompositeRoot.d.ts

@@ -4,7 +4,7 @@ import { type Dimensions, type ModifierKey } from "../composite.js";
 import { CompositeMetadata } from "../list/CompositeList.js";
 import { HTMLProps } from "../../utils/types.js";
 export interface UseCompositeRootParameters {
-  orientation?: ('horizontal' | 'vertical' | 'both') | undefined;
+  orientation?: 'horizontal' | 'vertical' | 'both' | undefined;
   cols?: number | undefined;
   loopFocus?: boolean | undefined;
   highlightedIndex?: number | undefined;

package/esm/context-menu/trigger/ContextMenuTrigger.d.ts

@@ -7,13 +7,13 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Context Menu](https://base-ui.com/react/components/context-menu)
  */
 export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export type ContextMenuTriggerState = {
+export interface ContextMenuTriggerState {
   /**
    * Whether the context menu is currently open.
    */
   open: boolean;
-};
-export interface ContextMenuTriggerProps extends BaseUIComponentProps<'div', ContextMenuTrigger.State> {}
+}
+export interface ContextMenuTriggerProps extends BaseUIComponentProps<'div', ContextMenuTriggerState> {}
 export declare namespace ContextMenuTrigger {
   type State = ContextMenuTriggerState;
   type Props = ContextMenuTriggerProps;

package/esm/dialog/backdrop/DialogBackdrop.d.ts

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

package/esm/dialog/close/DialogClose.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface DialogCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DialogClose.State> {}
+export interface DialogCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DialogCloseState> {}
 export interface DialogCloseState {
   /**
    * Whether the button is currently disabled.

package/esm/dialog/description/DialogDescription.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 DialogDescription: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export interface DialogDescriptionProps extends BaseUIComponentProps<'p', DialogDescription.State> {}
+export interface DialogDescriptionProps extends BaseUIComponentProps<'p', DialogDescriptionState> {}
 export interface DialogDescriptionState {}
 export declare namespace DialogDescription {
   type Props = DialogDescriptionProps;

package/esm/dialog/popup/DialogPopup.d.ts

@@ -9,7 +9,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogPopup: React.ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopup.State> {
+export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopupState> {
   /**
    * Determines the element to focus when the dialog is opened.
    *
@@ -19,7 +19,7 @@ export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopu
    * - `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 dialog is closed.
    *
@@ -29,13 +29,16 @@ export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopu
    * - `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 DialogPopupState {
   /**
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the dialog is nested within a parent dialog.

package/esm/dialog/portal/DialogPortal.d.ts

@@ -8,10 +8,8 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogPortal: React.ForwardRefExoticComponent<Omit<DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace DialogPortal {
-  interface State {}
-}
-export interface DialogPortalProps extends FloatingPortal.Props<DialogPortal.State> {
+export interface DialogPortalState {}
+export interface DialogPortalProps extends FloatingPortal.Props<DialogPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -20,8 +18,9 @@ export interface DialogPortalProps extends FloatingPortal.Props<DialogPortal.Sta
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<DialogPortal.State>['container'] | undefined;
+  container?: FloatingPortal.Props<DialogPortalState>['container'] | undefined;
 }
 export declare namespace DialogPortal {
+  type State = DialogPortalState;
   type Props = DialogPortalProps;
 }

package/esm/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/esm/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/esm/dialog/root/useDialogRoot.js

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

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/drawer/backdrop/DrawerBackdropDataAttributes.js

@@ -0,0 +1,20 @@
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+export let DrawerBackdropDataAttributes = function (DrawerBackdropDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  return DrawerBackdropDataAttributes;
+}({});

package/esm/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/esm/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/esm/drawer/content/DrawerContent.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
+import { DRAWER_CONTENT_ATTRIBUTE } from "./DrawerContentDataAttributes.js";
 
 /**
  * A container for the drawer contents.
@@ -20,7 +21,7 @@ export const DrawerContent = /*#__PURE__*/React.forwardRef(function DrawerConten
   return useRenderElement('div', componentProps, {
     ref: forwardedRef,
     props: [{
-      ['data-swipe-ignore']: ''
+      [DRAWER_CONTENT_ATTRIBUTE]: ''
     }, elementProps]
   });
 });

package/esm/drawer/content/DrawerContentDataAttributes.d.ts

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

package/esm/drawer/content/DrawerContentDataAttributes.js

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

package/esm/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/esm/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/esm/drawer/indent/DrawerIndent.js

@@ -21,7 +21,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)
  */