@base-ui/react 1.2.0 → 1.3.0

package/popover/backdrop/PopoverBackdrop.d.ts

@@ -13,9 +13,12 @@ export interface PopoverBackdropState {
    * Whether the popover is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface PopoverBackdropProps extends BaseUIComponentProps<'div', PopoverBackdrop.State> {}
+export interface PopoverBackdropProps extends BaseUIComponentProps<'div', PopoverBackdropState> {}
 export declare namespace PopoverBackdrop {
   type State = PopoverBackdropState;
   type Props = PopoverBackdropProps;

package/popover/close/PopoverClose.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  */
 export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface PopoverCloseState {}
-export interface PopoverCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', PopoverClose.State> {}
+export interface PopoverCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', PopoverCloseState> {}
 export declare namespace PopoverClose {
   type State = PopoverCloseState;
   type Props = PopoverCloseProps;

package/popover/close/PopoverClose.js

@@ -12,20 +12,21 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _useButton = require("../../use-button");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
+var _closePart = require("../../utils/closePart");
 /**
  * A button that closes the popover.
  * Renders a `<button>` element.
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-const PopoverClose = exports.PopoverClose = /*#__PURE__*/React.forwardRef(function PopoverClose(props, forwardedRef) {
+const PopoverClose = exports.PopoverClose = /*#__PURE__*/React.forwardRef(function PopoverClose(componentProps, forwardedRef) {
   const {
     render,
     className,
     disabled = false,
     nativeButton = true,
     ...elementProps
-  } = props;
+  } = componentProps;
   const {
     buttonRef,
     getButtonProps
@@ -37,7 +38,8 @@ const PopoverClose = exports.PopoverClose = /*#__PURE__*/React.forwardRef(functi
   const {
     store
   } = (0, _PopoverRootContext.usePopoverRootContext)();
-  const element = (0, _useRenderElement.useRenderElement)('button', props, {
+  (0, _closePart.useClosePartRegistration)();
+  const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     props: [{
       onClick(event) {

package/popover/description/PopoverDescription.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export interface PopoverDescriptionState {}
-export interface PopoverDescriptionProps extends BaseUIComponentProps<'p', PopoverDescription.State> {}
+export interface PopoverDescriptionProps extends BaseUIComponentProps<'p', PopoverDescriptionState> {}
 export declare namespace PopoverDescription {
   type State = PopoverDescriptionState;
   type Props = PopoverDescriptionProps;

package/popover/popup/PopoverPopup.d.ts

@@ -15,12 +15,24 @@ export interface PopoverPopupState {
    * Whether the popover is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
+  /**
+   * Whether transitions should be skipped.
+   */
   instant: 'dismiss' | 'click' | undefined;
 }
-export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPopup.State> {
+export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPopupState> {
   /**
    * Determines the element to focus when the popover is opened.
    *
@@ -30,7 +42,7 @@ export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPo
    * - `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) => void | boolean | HTMLElement | null)) | undefined;
+  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null) | undefined;
   /**
    * Determines the element to focus when the popover is closed.
    *
@@ -40,7 +52,7 @@ export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPo
    * - `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) => void | boolean | HTMLElement | null)) | undefined;
+  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null) | undefined;
 }
 export declare namespace PopoverPopup {
   type State = PopoverPopupState;

package/popover/popup/PopoverPopup.js

@@ -19,6 +19,7 @@ var _reasons = require("../../utils/reasons");
 var _composite = require("../../composite/composite");
 var _ToolbarRootContext = require("../../toolbar/root/ToolbarRootContext");
 var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _closePart = require("../../utils/closePart");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -44,6 +45,10 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
   } = (0, _PopoverRootContext.usePopoverRootContext)();
   const positioner = (0, _PopoverPositionerContext.usePopoverPositionerContext)();
   const insideToolbar = (0, _ToolbarRootContext.useToolbarRootContext)(true) != null;
+  const {
+    context: closePartContext,
+    hasClosePart
+  } = (0, _closePart.useClosePartCount)();
   const open = store.useState('open');
   const openMethod = store.useState('openMethod');
   const instantType = store.useState('instantType');
@@ -90,6 +95,7 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
     instant: instantType,
     transitionStatus
   };
+  const focusManagerModal = modal !== false && hasClosePart;
   const setPopupElement = React.useCallback(element => {
     store.set('popupElement', element);
   }, [store]);
@@ -110,7 +116,7 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingFocusManager, {
     context: floatingContext,
     openInteractionType: openMethod,
-    modal: modal === 'trap-focus',
+    modal: focusManagerModal,
     disabled: !mounted || openReason === _reasons.REASONS.triggerHover,
     initialFocus: resolvedInitialFocus,
     returnFocus: finalFocus,
@@ -118,7 +124,10 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
     previousFocusableElement: (0, _dom.isHTMLElement)(activeTriggerElement) ? activeTriggerElement : undefined,
     nextFocusableElement: store.context.triggerFocusTargetRef,
     beforeContentFocusGuardRef: store.context.beforeContentFocusGuardRef,
-    children: element
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_closePart.ClosePartProvider, {
+      value: closePartContext,
+      children: element
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") PopoverPopup.displayName = "PopoverPopup";

package/popover/portal/PopoverPortal.d.ts

@@ -8,10 +8,8 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
 export declare const PopoverPortal: React.ForwardRefExoticComponent<Omit<PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace PopoverPortal {
-  interface State {}
-}
-export interface PopoverPortalProps extends FloatingPortal.Props<PopoverPortal.State> {
+export interface PopoverPortalState {}
+export interface PopoverPortalProps extends FloatingPortal.Props<PopoverPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -19,5 +17,6 @@ export interface PopoverPortalProps extends FloatingPortal.Props<PopoverPortal.S
   keepMounted?: boolean | undefined;
 }
 export declare namespace PopoverPortal {
+  type State = PopoverPortalState;
   type Props = PopoverPortalProps;
 }

package/popover/positioner/PopoverPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAnchorPositioning, type Side, type Align } from "../../utils/useAnchorPositioning.js";
+import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Positions the popover against the trigger.
@@ -13,15 +13,24 @@ export interface PopoverPositionerState {
    * Whether the popover is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
   /**
    * Whether CSS transitions should be disabled.
    */
   instant: string | undefined;
 }
-export interface PopoverPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', PopoverPositioner.State> {}
+export interface PopoverPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', PopoverPositionerState> {}
 export declare namespace PopoverPositioner {
   type State = PopoverPositionerState;
   type Props = PopoverPositionerProps;

package/popover/root/PopoverRoot.d.ts

@@ -44,20 +44,27 @@ export interface PopoverRootProps<Payload = unknown> {
    * - `true`: user interaction is limited to the popover: 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 popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.
+   *
+   * When `modal` is `true`, focus trapping is enabled only if `<Popover.Close>` is rendered
+   * inside `<Popover.Popup>`. It can be visually hidden with your own CSS if needed, such as
+   * Tailwind's `sr-only` utility.
+   *
+   * When `modal` is `'trap-focus'`, render `<Popover.Close>` inside `<Popover.Popup>` so touch
+   * screen readers can escape the popup.
    * @default false
    */
-  modal?: (boolean | 'trap-focus') | undefined;
+  modal?: boolean | 'trap-focus' | undefined;
   /**
    * ID of the trigger that the popover is associated with.
    * This is useful in conjunction with the `open` prop to create a controlled popover.
    * 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 popover is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
   /**
    * A handle to associate the popover with a trigger.
    * If specified, allows external triggers to control the popover's open state.

package/popover/root/PopoverRoot.js

@@ -58,8 +58,7 @@ function PopoverRootComponent({
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
   const {
     openMethod,
-    triggerProps: interactionTypeTriggerProps,
-    reset: resetOpenInteractionType
+    triggerProps: interactionTypeTriggerProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   (0, _popups.useImplicitActiveTrigger)(store);
   const {
@@ -69,7 +68,6 @@ function PopoverRootComponent({
       stickIfOpen: true,
       openChangeReason: null
     });
-    resetOpenInteractionType();
   });
   (0, _useScrollLock.useScrollLock)(open && modal === true && openReason !== _reasons.REASONS.triggerHover && openMethod !== 'touch', positionerElement);
   React.useEffect(() => {

package/popover/title/PopoverTitle.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export interface PopoverTitleState {}
-export interface PopoverTitleProps extends BaseUIComponentProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', PopoverTitle.State> {}
+export interface PopoverTitleProps extends BaseUIComponentProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', PopoverTitleState> {}
 export declare namespace PopoverTitle {
   type State = PopoverTitleState;
   type Props = PopoverTitleProps;

package/popover/viewport/PopoverViewport.d.ts

@@ -9,22 +9,26 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
 export declare const PopoverViewport: React.ForwardRefExoticComponent<Omit<PopoverViewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverViewportState {
+  /**
+   * The activation direction of the transitioned content.
+   */
+  activationDirection: string | undefined;
+  /**
+   * Whether the viewport is currently transitioning between contents.
+   */
+  transitioning: boolean;
+  /**
+   * Present if animations should be instant.
+   */
+  instant: 'dismiss' | 'click' | undefined;
+}
 export declare namespace PopoverViewport {
-  interface Props extends BaseUIComponentProps<'div', State> {
+  interface Props extends BaseUIComponentProps<'div', PopoverViewportState> {
     /**
      * The content to render inside the transition container.
      */
     children?: React.ReactNode;
   }
-  interface State {
-    activationDirection: string | undefined;
-    /**
-     * Whether the viewport is currently transitioning between contents.
-     */
-    transitioning: boolean;
-    /**
-     * Present if animations should be instant.
-     */
-    instant: 'dismiss' | 'click' | undefined;
-  }
+  type State = PopoverViewportState;
 }

package/preview-card/arrow/PreviewCardArrow.d.ts

@@ -13,11 +13,20 @@ export interface PreviewCardArrowState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface PreviewCardArrowProps extends BaseUIComponentProps<'div', PreviewCardArrow.State> {}
+export interface PreviewCardArrowProps extends BaseUIComponentProps<'div', PreviewCardArrowState> {}
 export declare namespace PreviewCardArrow {
   type State = PreviewCardArrowState;
   type Props = PreviewCardArrowProps;

package/preview-card/backdrop/PreviewCardBackdrop.d.ts

@@ -13,9 +13,12 @@ export interface PreviewCardBackdropState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface PreviewCardBackdropProps extends BaseUIComponentProps<'div', PreviewCardBackdrop.State> {}
+export interface PreviewCardBackdropProps extends BaseUIComponentProps<'div', PreviewCardBackdropState> {}
 export declare namespace PreviewCardBackdrop {
   type State = PreviewCardBackdropState;
   type Props = PreviewCardBackdropProps;

package/preview-card/popup/PreviewCardPopup.d.ts

@@ -14,12 +14,24 @@ export interface PreviewCardPopupState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether transitions should be skipped.
+   */
   instant: 'dismiss' | 'focus' | undefined;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface PreviewCardPopupProps extends BaseUIComponentProps<'div', PreviewCardPopup.State> {}
+export interface PreviewCardPopupProps extends BaseUIComponentProps<'div', PreviewCardPopupState> {}
 export declare namespace PreviewCardPopup {
   type State = PreviewCardPopupState;
   type Props = PreviewCardPopupProps;

package/preview-card/portal/PreviewCardPortal.d.ts

@@ -8,10 +8,8 @@ import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
 export declare const PreviewCardPortal: React.ForwardRefExoticComponent<Omit<PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace PreviewCardPortal {
-  interface State {}
-}
-export interface PreviewCardPortalProps extends FloatingPortalLite.Props<PreviewCardPortal.State> {
+export interface PreviewCardPortalState {}
+export interface PreviewCardPortalProps extends FloatingPortalLite.Props<PreviewCardPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -19,5 +17,6 @@ export interface PreviewCardPortalProps extends FloatingPortalLite.Props<Preview
   keepMounted?: boolean | undefined;
 }
 export declare namespace PreviewCardPortal {
+  type State = PreviewCardPortalState;
   type Props = PreviewCardPortalProps;
 }

package/preview-card/positioner/PreviewCardPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Side, type Align, useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
+import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Positions the popup against the trigger.
@@ -13,12 +13,24 @@ export interface PreviewCardPositionerState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
+  /**
+   * Whether transitions should be skipped.
+   */
   instant: 'dismiss' | 'focus' | undefined;
 }
-export interface PreviewCardPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', PreviewCardPositioner.State> {}
+export interface PreviewCardPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', PreviewCardPositionerState> {}
 export declare namespace PreviewCardPositioner {
   type State = PreviewCardPositionerState;
   type Props = PreviewCardPositionerProps;

package/preview-card/positioner/PreviewCardPositioner.js

@@ -9,6 +9,7 @@ exports.PreviewCardPositioner = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _PreviewCardContext = require("../root/PreviewCardContext");
 var _PreviewCardPositionerContext = require("./PreviewCardPositionerContext");
+var _floatingUiReact = require("../../floating-ui-react");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _PreviewCardPortalContext = require("../portal/PreviewCardPortalContext");
@@ -43,6 +44,7 @@ const PreviewCardPositioner = exports.PreviewCardPositioner = /*#__PURE__*/React
   } = componentProps;
   const store = (0, _PreviewCardContext.usePreviewCardRootContext)();
   const keepMounted = (0, _PreviewCardPortalContext.usePreviewCardPortalContext)();
+  const nodeId = (0, _floatingUiReact.useFloatingNodeId)();
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const floatingRootContext = store.useState('floatingRootContext');
@@ -64,6 +66,7 @@ const PreviewCardPositioner = exports.PreviewCardPositioner = /*#__PURE__*/React
     sticky,
     disableAnchorTracking,
     keepMounted,
+    nodeId,
     collisionAvoidance,
     adaptiveOrigin: hasViewport ? _adaptiveOriginMiddleware.adaptiveOrigin : undefined
   });
@@ -103,7 +106,10 @@ const PreviewCardPositioner = exports.PreviewCardPositioner = /*#__PURE__*/React
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PreviewCardPositionerContext.PreviewCardPositionerContext.Provider, {
     value: contextValue,
-    children: element
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingNode, {
+      id: nodeId,
+      children: element
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") PreviewCardPositioner.displayName = "PreviewCardPositioner";

package/preview-card/root/PreviewCardRoot.d.ts

@@ -50,15 +50,15 @@ export interface PreviewCardRootProps<Payload = unknown> {
   children?: React.ReactNode | PayloadChildRenderFunction<Payload>;
   /**
    * ID of the trigger that the preview card is associated with.
-   * This is useful in conjuntion with the `open` prop to create a controlled preview card.
+   * This is useful in conjunction with the `open` prop to create a controlled preview card.
    * There's no need to specify this prop when the preview card 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 preview card is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open preview card.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
 }
 export interface PreviewCardRootActions {
   unmount: () => void;

package/preview-card/root/PreviewCardRoot.js

@@ -16,13 +16,7 @@ var _reasons = require("../../utils/reasons");
 var _PreviewCardStore = require("../store/PreviewCardStore");
 var _popups = require("../../utils/popups");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Groups all parts of the preview card.
- * Doesn’t render its own HTML element.
- *
- * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
- */
-function PreviewCardRoot(props) {
+function PreviewCardRootComponent(props) {
   const {
     open: openProp,
     defaultOpen = false,
@@ -97,6 +91,25 @@ function PreviewCardRoot(props) {
     }) : children
   });
 }
+
+/**
+ * Groups all parts of the preview card.
+ * Doesn’t render its own HTML element.
+ *
+ * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+function PreviewCardRoot(props) {
+  if ((0, _PreviewCardContext.usePreviewCardRootContext)(true)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewCardRootComponent, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingTree, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewCardRootComponent, {
+      ...props
+    })
+  });
+}
 function createPreviewCardEventDetails(store, reason) {
   const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason);
   details.preventUnmountOnClose = () => {

package/preview-card/trigger/PreviewCardTrigger.d.ts

@@ -17,7 +17,7 @@ export interface PreviewCardTriggerState {
    */
   open: boolean;
 }
-export interface PreviewCardTriggerProps<Payload = unknown> extends BaseUIComponentProps<'a', PreviewCardTrigger.State> {
+export interface PreviewCardTriggerProps<Payload = unknown> extends BaseUIComponentProps<'a', PreviewCardTriggerState> {
   /**
    * A handle to associate the trigger with a preview card.
    */

package/preview-card/viewport/PreviewCardViewport.d.ts

@@ -9,19 +9,26 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
 export declare const PreviewCardViewport: React.ForwardRefExoticComponent<Omit<PreviewCardViewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PreviewCardViewportState {
+  /**
+   * The activation direction of the transitioned content.
+   */
+  activationDirection: string | undefined;
+  /**
+   * Whether the viewport is currently transitioning between contents.
+   */
+  transitioning: boolean;
+  /**
+   * Present if animations should be instant.
+   */
+  instant: 'dismiss' | 'focus' | undefined;
+}
 export declare namespace PreviewCardViewport {
-  interface Props extends BaseUIComponentProps<'div', State> {
+  interface Props extends BaseUIComponentProps<'div', PreviewCardViewportState> {
     /**
      * The content to render inside the transition container.
      */
     children?: React.ReactNode;
   }
-  interface State {
-    activationDirection: string | undefined;
-    /**
-     * Whether the viewport is currently transitioning between contents.
-     */
-    transitioning: boolean;
-    instant: 'dismiss' | 'focus' | undefined;
-  }
+  type State = PreviewCardViewportState;
 }

package/progress/indicator/ProgressIndicator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ProgressRoot } from "../root/ProgressRoot.js";
+import type { ProgressRootState } from "../root/ProgressRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Visualizes the completion status of the task.
@@ -8,7 +8,9 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
 export declare const ProgressIndicator: React.ForwardRefExoticComponent<Omit<ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ProgressIndicatorProps extends BaseUIComponentProps<'div', ProgressRoot.State> {}
+export interface ProgressIndicatorState extends ProgressRootState {}
+export interface ProgressIndicatorProps extends BaseUIComponentProps<'div', ProgressIndicatorState> {}
 export declare namespace ProgressIndicator {
+  type State = ProgressIndicatorState;
   type Props = ProgressIndicatorProps;
 }

package/progress/label/ProgressLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ProgressRoot } from "../root/ProgressRoot.js";
+import type { ProgressRootState } from "../root/ProgressRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * An accessible label for the progress bar.
@@ -8,7 +8,9 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
 export declare const ProgressLabel: React.ForwardRefExoticComponent<Omit<ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface ProgressLabelProps extends BaseUIComponentProps<'span', ProgressRoot.State> {}
+export interface ProgressLabelState extends ProgressRootState {}
+export interface ProgressLabelProps extends BaseUIComponentProps<'span', ProgressLabelState> {}
 export declare namespace ProgressLabel {
+  type State = ProgressLabelState;
   type Props = ProgressLabelProps;
 }

package/progress/label/ProgressLabel.js

@@ -7,9 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProgressLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useBaseUiId = require("../../utils/useBaseUiId");
 var _useRenderElement = require("../../utils/useRenderElement");
+var _useRegisteredLabelId = require("../../utils/useRegisteredLabelId");
 var _ProgressRootContext = require("../root/ProgressRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
 /**
@@ -25,20 +24,17 @@ const ProgressLabel = exports.ProgressLabel = /*#__PURE__*/React.forwardRef(func
     id: idProp,
     ...elementProps
   } = componentProps;
-  const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const {
     setLabelId,
     state
   } = (0, _ProgressRootContext.useProgressRootContext)();
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    setLabelId(id);
-    return () => setLabelId(undefined);
-  }, [id, setLabelId]);
+  const id = (0, _useRegisteredLabelId.useRegisteredLabelId)(idProp, setLabelId);
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     state,
     ref: forwardedRef,
     props: [{
-      id
+      id,
+      role: 'presentation'
     }, elementProps],
     stateAttributesMapping: _stateAttributesMapping.progressStateAttributesMapping
   });