@wordpress/ui 0.10.0 → 0.11.1-next.v.202604091042.0

package/build-types/popover/root.d.ts

@@ -0,0 +1,37 @@
+import type { RootProps } from './types';
+/**
+ * An accessible popup anchored to a trigger element.
+ *
+ * Popover renders ARIA-compliant floating content that appears next to its
+ * trigger. It can contain interactive content such as form controls, menus,
+ * and rich descriptions.
+ *
+ * Compose the compound components to build a popover:
+ *
+ * - `Popover.Root` — provides open state and context to all sub-components.
+ * - `Popover.Trigger` — the button that toggles the popup.
+ * - `Popover.Popup` — the floating container (portal, positioning, collision
+ *   avoidance).
+ * - `Popover.Arrow` — an optional arrow pointing toward the anchor.
+ * - `Popover.Title` — **required** heading that labels the popover for
+ *   accessibility (can be visually hidden).
+ * - `Popover.Description` — optional paragraph linked via `aria-describedby`.
+ * - `Popover.Close` — a button that closes the popover when clicked.
+ *   **Required** when `modal` is `true` or `'trap-focus'` so that focus
+ *   can cycle correctly and the user can dismiss the popover.
+ *
+ * ```jsx
+ * <Popover.Root>
+ *   <Popover.Trigger>Open</Popover.Trigger>
+ *   <Popover.Popup>
+ *     <Popover.Arrow />
+ *     <Popover.Title>Popover title</Popover.Title>
+ *     <Popover.Description>Popover description</Popover.Description>
+ *     <Popover.Close>Close</Popover.Close>
+ *   </Popover.Popup>
+ * </Popover.Root>
+ * ```
+ */
+declare function Root(props: RootProps): import("react").JSX.Element;
+export { Root };
+//# sourceMappingURL=root.d.ts.map

package/build-types/popover/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/popover/root.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,iBAAS,IAAI,CAAE,KAAK,EAAE,SAAS,+BAE9B;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/build-types/popover/stories/index.story.d.ts

@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Popover } from '../..';
+declare const meta: Meta<typeof Popover.Root>;
+export default meta;
+type Story = StoryObj<typeof Popover.Root>;
+export declare const Default: Story;
+/**
+ * A popover without the arrow sub-component. Omit `Popover.Arrow`
+ * from the popup content when an arrow indicator is not desired.
+ */
+export declare const NoArrow: Story;
+/**
+ * All combinations of `side` and `align` props on `Popover.Popup`.
+ *
+ * Each row shows a side (`top`, `right`, `bottom`, `left`), and each column
+ * shows an alignment (`start`, `center`, `end`).
+ */
+export declare const Positioning: Story;
+/**
+ * A popover with a close icon button, title, and description. The
+ * `Popover.Close` component renders a button that closes the popover when
+ * clicked. Here it wraps an `IconButton` for a properly sized, accessible
+ * close action — matching the Dialog close-icon pattern.
+ */
+export declare const WithCloseButton: Story;
+/**
+ * Use the `open` and `onOpenChange` props on `Popover.Root` to control the
+ * popover's visibility programmatically.
+ *
+ * The checkbox drives the popover state externally. The popover's trigger
+ * and click-outside dismiss both sync back to the same state via
+ * `onOpenChange`, keeping everything in sync.
+ */
+export declare const Controlled: Story;
+/**
+ * Set `modal` to `true` to trap focus inside the popover when it is open.
+ * This is useful for complex popover content that requires user interaction,
+ * such as forms. Try tabbing through the fields — focus stays inside the
+ * popover until it is dismissed.
+ *
+ * **Note:** focus trapping requires a `Popover.Close` part inside the popup
+ * so that screen readers always have an escape route. It can be visually
+ * hidden if needed.
+ *
+ * Pass `backdrop` to `Popover.Popup` to display a semi-transparent overlay
+ * beneath the popover, signalling that the page is blocked.
+ */
+export declare const Modal: Story;
+/**
+ * The `variant="unstyled"` option strips all visual styling from the popup,
+ * making it a blank positioning container for fully custom content.
+ */
+export declare const Unstyled: Story;
+/**
+ * Overlay placement positions the popover centered on top of its trigger,
+ * effectively covering it. This is achieved by computing a negative
+ * `sideOffset` based on the measured sizes of the trigger and popup.
+ *
+ * This technique is useful when you want the popover to visually replace
+ * the trigger element in place.
+ */
+export declare const OverlayPlacement: Story;
+/**
+ * To render the popup inline (without a portal), create a local ref to a
+ * `<span>` with `display: contents` and pass it as the `container` prop.
+ * The popup will render inside the span rather than being portaled to
+ * `document.body`, while retaining all positioning behavior.
+ *
+ * **Note:** `backdrop` will not cover the full viewport in this mode.
+ */
+export declare const Inline: Story;
+/**
+ * Use the `collisionAvoidance` prop to control how the popover behaves when
+ * it collides with the edges of its collision boundary.
+ *
+ * Because the popup renders via a portal (outside the scrollable container),
+ * the container must be passed as `collisionBoundary` so Floating UI treats
+ * it as the clipping edge.
+ *
+ * - `side: 'flip'` flips to the opposite side (default).
+ * - `side: 'none'` disables collision handling.
+ *
+ * Scroll the container to see collision avoidance in action.
+ */
+export declare const CollisionAvoidance: Story;
+/**
+ * When the popover's trigger lives inside an iframe but the popover should
+ * render in the parent document, pass a parent-document element to the
+ * `container` prop on `Popover.Popup`.
+ *
+ * This technique is used in Gutenberg where the block editor canvas is an
+ * iframe but toolbars and menus must appear outside it.
+ *
+ * Scroll inside the iframe to verify that the popover tracks the trigger
+ * position across document boundaries.
+ */
+export declare const CrossIframe: Story;
+/**
+ * Same cross-iframe scenario, but using `SlotFillProvider` and `Slot` from
+ * `@wordpress/components` as the render target.
+ *
+ * The `Slot` renders a `div` in the parent document, and its forwarded ref
+ * is passed to `Popover.Popup`'s `container` prop so the popup portals into
+ * the slot element. This mirrors the legacy Popover's `WithSlotOutsideIframe`
+ * pattern.
+ */
+export declare const CrossIframeWithSlotFill: Story;
+/**
+ * Popovers in Gutenberg are managed with explicit z-index values, which can
+ * create situations where a popover renders below another popover, when you
+ * want it to be rendered above.
+ *
+ * The `--wp-ui-popover-z-index` CSS variable, available on the
+ * `Popover.Popup` component, is an escape hatch that can be used to override
+ * the z-index of a given popover on a case-by-case basis.
+ */
+export declare const WithCustomZIndex: Story;
+/**
+ * Use the `anchor` prop on `Popover.Popup` to position the popover against an
+ * arbitrary element instead of the built-in trigger. Base UI accepts four
+ * anchor types:
+ *
+ * 1. **Element** — a direct DOM element reference.
+ * 2. **VirtualElement** — an object with a `getBoundingClientRect()` method.
+ * 3. **RefObject** — a `React.RefObject` pointing to an element.
+ * 4. **Callback** — a function returning an Element or VirtualElement.
+ *
+ * This is the most-used pattern in Gutenberg: block popovers anchor to
+ * selected block elements, the link popover anchors to the text selection, and
+ * data views anchor to right-click positions.
+ */
+export declare const Anchor: Story;
+/**
+ * Use `variant="unstyled"` and custom inline styles to replicate a toolbar-like
+ * appearance: high-contrast border, no shadow, and a smaller border radius.
+ *
+ * A first-class `variant="toolbar"` may be added in the future if this pattern
+ * becomes widespread.
+ */
+export declare const ToolbarVariant: Story;
+/**
+ * Base UI's Positioner exposes `--available-height` and
+ * `--available-width` CSS variables representing the space
+ * between the anchor and the viewport edge. Apply them as `max-height` /
+ * `max-width` via the `style` prop (which targets the positioner) to
+ * constrain the popup size. Then add `overflow: auto` on an inner wrapper
+ * so scrolling happens inside the popup content area — this replaces the
+ * legacy Popover's `resize` prop.
+ *
+ * Open the popover and resize or scroll the container to see the popup shrink
+ * to fit.
+ */
+export declare const ViewportConstrainedSize: Story;
+/**
+ * The `onOpenChange` callback on `Popover.Root` receives an `eventDetails`
+ * object with a `reason` field that describes why the popover is
+ * opening/closing. This replaces the legacy Popover's separate `onClose` and
+ * `onFocusOutside` callbacks:
+ *
+ * - `reason === 'escape-key'` — user pressed Escape (was `onClose`)
+ * - `reason === 'outside-press'` — user clicked outside (was `onClose`)
+ * - `reason === 'focus-out'` — focus moved outside (was `onFocusOutside`)
+ *
+ * Open the popover, then dismiss it in different ways to see the logged reason.
+ */
+export declare const OnOpenChangeDetails: Story;
+/**
+ * Pass a ref to `initialFocus` on `Popover.Popup` to focus a specific element
+ * when the popover opens. This replaces the legacy Popover's `focusOnMount`
+ * prop.
+ *
+ * In this example, the Email field receives focus instead of the first
+ * focusable element (Name).
+ */
+export declare const InitialFocus: Story;
+/**
+ * Set `modal="trap-focus"` on `Popover.Root` to trap keyboard focus inside the
+ * popover without making it fully modal. Unlike `modal={true}`, this mode:
+ *
+ * - Traps Tab/Shift+Tab cycling within the popover
+ * - Does **not** lock page scroll
+ * - Does **not** block pointer interaction outside
+ *
+ * A `Popover.Close` part must be rendered inside the popup so that screen
+ * readers can escape. It can be visually hidden if not needed visually.
+ *
+ * This replaces the legacy Popover's `constrainTabbing` prop. Try tabbing
+ * through the fields — focus stays inside — then click the button outside
+ * to verify that pointer interaction still works.
+ */
+export declare const TrapFocus: Story;
+/**
+ * Set `openOnHover` on `Popover.Trigger` to open the popover when the trigger
+ * is hovered. The `delay` and `closeDelay` props control the timing (in ms).
+ *
+ * This is a capability the legacy Popover does not have natively — consumers
+ * would need to wire up `mouseenter`/`mouseleave` handlers manually.
+ */
+export declare const HoverTrigger: Story;
+/**
+ * Popups that open when hovering an info icon should use Popover with the
+ * `openOnHover` prop on the trigger instead of a tooltip. This way, touch
+ * users and screen reader users can access the content.
+ *
+ * To know when to reach for a popover instead of a tooltip, consider the
+ * purpose of the trigger element: If the trigger's purpose is to open the
+ * popup itself, it's a popover. If the trigger's purpose is unrelated to
+ * opening the popup, it's a tooltip.
+ */
+export declare const InfoTip: Story;
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/popover/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/popover/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAKhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAAC,IAAI,CAcpC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,OAAO,CAAC,IAAI,CAAE,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KA4CzB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,KAoC7B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,EAAE,KA4ExB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,EAAE,KAkFnB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,EAAE,KA+C9B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,EAAE,KA+BpB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAwEhC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,EAAE,KAyEzB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,EAAE,KA6ErC,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM,EAAE,KA0HpB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,KA4B5B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAkDrC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAoDjC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,EAAE,KAiE1B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS,EAAE,KAiDvB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,EAAE,KAyB1B,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,EAAE,KA6CrB,CAAC"}

package/build-types/popover/stories/utils.d.ts

@@ -0,0 +1,25 @@
+import type { RefCallback } from 'react';
+/**
+ * Tracks the dimensions of a DOM element via ResizeObserver.
+ * Returns a ref callback to attach to the element and its current size.
+ *
+ * The ref callback performs a synchronous `getBoundingClientRect` read so
+ * the first render already has accurate dimensions (avoids a 0×0 flash).
+ */
+export declare function useMeasure<TRef extends HTMLElement>(): readonly [RefCallback<TRef>, {
+    width: number;
+    height: number;
+}];
+/**
+ * Renders an iframe and portals its `children` into the iframe's body.
+ * Forwards a ref to the underlying `<iframe>` element.
+ *
+ * Waits for the iframe's `load` event before portaling to ensure
+ * compatibility with Firefox.
+ * See https://github.com/facebook/react/issues/22847#issuecomment-991394558
+ */
+export declare const GenericIframe: import("react").ForwardRefExoticComponent<Omit<GenericIframeProps, "ref"> & import("react").RefAttributes<HTMLIFrameElement>>;
+export type GenericIframeProps = React.ComponentProps<'iframe'> & {
+    children: React.ReactNode;
+};
+//# sourceMappingURL=utils.d.ts.map

package/build-types/popover/stories/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/popover/stories/utils.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,IAAI,SAAS,WAAW;;;GAgCnD;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,+HA0BvB,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAE,QAAQ,CAAE,GAAG;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC"}

package/build-types/popover/test/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/build-types/popover/test/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/popover/test/index.test.tsx"],"names":[],"mappings":""}

package/build-types/popover/title.d.ts

@@ -0,0 +1,20 @@
+import type { TitleProps } from './types';
+/**
+ * Renders a heading that labels the popover for accessibility.
+ *
+ * **Required** — every popover must include a `Popover.Title`, even if
+ * visually hidden. The rendered element is linked to the popup via
+ * `aria-labelledby`. Uses the `heading-xl` text variant, matching Dialog.
+ *
+ * To visually hide the title while keeping it accessible, wrap it with
+ * `VisuallyHidden` using the `render` prop:
+ *
+ * ```jsx
+ * <VisuallyHidden render={ <Popover.Title /> }>
+ *   Accessible title text
+ * </VisuallyHidden>
+ * ```
+ */
+declare const Title: import("react").ForwardRefExoticComponent<TitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export { Title };
+//# sourceMappingURL=title.d.ts.map

package/build-types/popover/title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/popover/title.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,KAAK,2GAwBV,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/build-types/popover/trigger.d.ts

@@ -0,0 +1,10 @@
+import type { TriggerProps } from './types';
+/**
+ * Renders a button that toggles the popover popup when clicked.
+ *
+ * Renders as a `<button>` by default. Also supports hover-triggered
+ * popovers via the `openOnHover`, `delay`, and `closeDelay` props.
+ */
+declare const Trigger: import("react").ForwardRefExoticComponent<TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { Trigger };
+//# sourceMappingURL=trigger.d.ts.map

package/build-types/popover/trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../src/popover/trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;GAKG;AACH,QAAA,MAAM,OAAO,4GAIZ,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/build-types/popover/types.d.ts

@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react';
+import type { Popover as _Popover } from '@base-ui/react/popover';
+import type { ComponentProps } from '../utils/types';
+export interface RootProps extends Pick<_Popover.Root.Props, 'open' | 'onOpenChange' | 'defaultOpen' | 'modal'> {
+    /**
+     * The popover sub-components (`Popover.Trigger`, `Popover.Popup`, etc.).
+     */
+    children?: ReactNode;
+}
+export interface TriggerProps extends ComponentProps<'button'>, Pick<_Popover.Trigger.Props, 'openOnHover' | 'delay' | 'closeDelay'> {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+}
+/**
+ * `Popover.Popup` maps to two Base UI elements internally: the
+ * **Positioner** (outer, handles fixed positioning and z-index) and the
+ * **Popup** (inner, holds content and visual styles).
+ *
+ * `style` and `className` are forwarded to the **Positioner** so that
+ * z-index overrides (`--wp-ui-popover-z-index`) and Base UI CSS variables
+ * (`--available-height`, `--available-width`) work correctly. All other
+ * HTML attributes are forwarded to the inner **Popup** element.
+ */
+export interface PopupProps extends ComponentProps<'div'>, Pick<_Popover.Positioner.Props, 'align' | 'alignOffset' | 'anchor' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'side' | 'sideOffset' | 'sticky'>, Pick<_Popover.Popup.Props, 'initialFocus' | 'finalFocus'> {
+    /**
+     * Whether to render a backdrop overlay behind the popover.
+     *
+     * Typically used with `modal` to signal that interaction with the rest
+     * of the page is blocked. The backdrop is a semi-transparent dark overlay.
+     *
+     * @default false
+     */
+    backdrop?: boolean;
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+    /**
+     * A parent element to render the portal into.
+     *
+     * Useful for cross-document rendering, such as rendering a popover
+     * in a parent document when the trigger is inside an iframe.
+     */
+    container?: _Popover.Portal.Props['container'];
+    /**
+     * The visual style variant of the popup.
+     *
+     * - `'default'` — standard surface styling with background, padding,
+     *    border radius, and shadow.
+     * - `'unstyled'` — no visual treatment; useful as a blank positioning
+     *    container for fully custom content.
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'unstyled';
+}
+export interface ArrowProps extends ComponentProps<'div'> {
+    /**
+     * Custom arrow visuals to render inside the positioned container.
+     */
+    children?: ReactNode;
+}
+export interface TitleProps extends ComponentProps<'h2'> {
+    /**
+     * The title content to be rendered.
+     */
+    children?: ReactNode;
+}
+export interface DescriptionProps extends ComponentProps<'p'> {
+    /**
+     * The description content to be rendered.
+     */
+    children?: ReactNode;
+}
+export interface CloseProps extends ComponentProps<'button'> {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/build-types/popover/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/popover/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,SAChB,SAAQ,IAAI,CACX,QAAQ,CAAC,IAAI,CAAC,KAAK,EACnB,MAAM,GAAG,cAAc,GAAG,aAAa,GAAG,OAAO,CACjD;IACD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAChB,SAAQ,cAAc,CAAE,QAAQ,CAAE,EACjC,IAAI,CAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,YAAY,CAAE;IACvE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,UAChB,SAAQ,cAAc,CAAE,KAAK,CAAE,EAC9B,IAAI,CACH,QAAQ,CAAC,UAAU,CAAC,KAAK,EACvB,OAAO,GACP,aAAa,GACb,QAAQ,GACR,cAAc,GACd,oBAAoB,GACpB,mBAAmB,GACnB,kBAAkB,GAClB,MAAM,GACN,YAAY,GACZ,QAAQ,CACV,EACD,IAAI,CAAE,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAAE;IAC5D;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAE,WAAW,CAAE,CAAC;IAEjD;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CACjC;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC1D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,IAAI,CAAE;IACzD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAE,GAAG,CAAE;IAC9D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,QAAQ,CAAE;IAC7D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB"}

package/build-types/text/stories/index.story.d.ts

@@ -4,6 +4,10 @@ declare const meta: Meta<typeof Text>;
 export default meta;
 type Story = StoryObj<typeof Text>;
 export declare const Default: Story;
+/**
+ * Important: Setting the `variant` prop to a `heading` variant will not automatically render a heading element.
+ * Use the `render` prop to render a heading element with the appropriate level.
+ */
 export declare const AllVariants: Story;
 export declare const WithRenderProp: Story;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/text/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/text/stories/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAG5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/text/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAG5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAC"}

package/build-types/text/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/text/text.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC;;;GAGG;AACH,eAAO,MAAM,IAAI,uGAcd,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/text/text.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC;;;GAGG;AACH,eAAO,MAAM,IAAI,uGAoBd,CAAC"}

package/build-types/utils/use-deprioritized-initial-focus.d.ts

@@ -1,9 +1,10 @@
-import type { Dialog as _Dialog } from '@base-ui/react/dialog';
+import type { Popover as _Popover } from '@base-ui/react/popover';
 /**
- * Derived from Base UI's `Dialog.Popup.Props['initialFocus']`.
- * The same type is shared by all Base UI overlay popups (Dialog, Popover, etc.).
+ * The `initialFocus` type shared by Base UI overlay popups (Dialog, Popover,
+ * AlertDialog, etc.). We derive it from `Popover.Popup.Props` here, but it
+ * is identical across all overlay components.
  */
-type InitialFocus = _Dialog.Popup.Props['initialFocus'];
+type InitialFocus = _Popover.Popup.Props['initialFocus'];
 /**
  * Returns a resolved `initialFocus` value that deprioritizes elements
  * marked with a given data attribute (e.g. a close icon), and an internal
@@ -28,7 +29,7 @@ export declare function useDeprioritizedInitialFocus({ initialFocus, deprioritiz
     initialFocus: InitialFocus;
     deprioritizedAttribute: string;
 }): {
-    resolvedInitialFocus: boolean | import("react").RefObject<HTMLElement | null> | ((openType: import("@base-ui/utils/useEnhancedClickHandler").InteractionType) => boolean | HTMLElement | null | void) | undefined;
+    resolvedInitialFocus: boolean | import("react").RefObject<HTMLElement | null> | ((openType: import("@base-ui/utils/useEnhancedClickHandler").InteractionType) => void | boolean | HTMLElement | null) | undefined;
     popupRef: import("react").RefObject<HTMLDivElement>;
 };
 export {};

package/build-types/utils/use-deprioritized-initial-focus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-deprioritized-initial-focus.d.ts","sourceRoot":"","sources":["../../src/utils/use-deprioritized-initial-focus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAI/D;;;GAGG;AACH,KAAK,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,CAAE,cAAc,CAAE,CAAC;AAe1D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,4BAA4B,CAAE,EAC7C,YAAY,EACZ,sBAAsB,GACtB,EAAE;IACF,YAAY,EAAE,YAAY,CAAC;IAC3B,sBAAsB,EAAE,MAAM,CAAC;CAC/B;;;EAiCA"}
+{"version":3,"file":"use-deprioritized-initial-focus.d.ts","sourceRoot":"","sources":["../../src/utils/use-deprioritized-initial-focus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAIlE;;;;GAIG;AACH,KAAK,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAE,cAAc,CAAE,CAAC;AAe3D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,4BAA4B,CAAE,EAC7C,YAAY,EACZ,sBAAsB,GACtB,EAAE;IACF,YAAY,EAAE,YAAY,CAAC;IAC3B,sBAAsB,EAAE,MAAM,CAAC;CAC/B;;;EAiCA"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/ui",
-	"version": "0.10.0",
+	"version": "0.11.1-next.v.202604091042.0+668146787",
 	"description": "Themeable React UI components for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,15 +44,15 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@base-ui/react": "^1.3.0",
-		"@wordpress/a11y": "^4.43.0",
-		"@wordpress/compose": "^7.43.0",
-		"@wordpress/element": "^6.43.0",
-		"@wordpress/i18n": "^6.16.0",
-		"@wordpress/icons": "^12.1.0",
-		"@wordpress/keycodes": "^4.43.0",
-		"@wordpress/primitives": "^4.43.0",
-		"@wordpress/private-apis": "^1.43.0",
-		"@wordpress/theme": "^0.10.0",
+		"@wordpress/a11y": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/compose": "^7.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/element": "^6.44.1-next.v.202604091042.0+668146787",
+		"@wordpress/i18n": "^6.17.1-next.v.202604091042.0+668146787",
+		"@wordpress/icons": "^12.1.1-next.v.202604091042.0+668146787",
+		"@wordpress/keycodes": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/primitives": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/private-apis": "^1.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/theme": "^0.10.1-next.v.202604091042.0+668146787",
 		"clsx": "^2.1.1",
 		"tabbable": "^6.4.0"
 	},
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
+	"gitHead": "73606df74f1c38a084bfa5db97205259ef817593"
 }

package/src/alert-dialog/context.tsx

@@ -1,14 +1,22 @@
 import { createContext } from '@wordpress/element';
-import type { RootProps } from './types';
 
-type Intent = NonNullable< RootProps[ 'intent' ] >;
+type Phase = 'idle' | 'pending' | 'closing';
 
 interface AlertDialogContextValue {
-	intent: Intent;
+	phase: Phase;
+	showSpinner: boolean;
+	errorMessage?: string;
+	confirm: () => Promise< void >;
 }
 
+const noop = async () => {};
+
 const AlertDialogContext = createContext< AlertDialogContextValue >( {
-	intent: 'default',
+	phase: 'idle',
+	showSpinner: false,
+	errorMessage: undefined,
+	confirm: noop,
 } );
 
 export { AlertDialogContext };
+export type { Phase };