@wordpress/ui 0.9.1-next.v.202603161435.0 → 0.11.0

package/CHANGELOG.md

@@ -2,7 +2,73 @@
 
 ## Unreleased
 
-## 0.9.0-next.0 (2026-03-16)
+## 0.11.0 (2026-04-15)
+
+### Breaking Changes
+
+-   `Text`: Apply `margin: 0`, removing user-agent margins when the component renders as block-level elements (for example `p` or `h1`–`h6` via `render` prop) ([#76970](https://github.com/WordPress/gutenberg/pull/76970)).
+-   `AlertDialog`: Revise component API ([#76937](https://github.com/WordPress/gutenberg/pull/76937)):
+    -   `AlertDialog.Root`: moved `intent` prop to `AlertDialog.Popup`;
+    -   `AlertDialog.Popup`: moved `onConfirm` prop to `AlertDialog.Root` (now optional; supports async handlers, `{ close: false }` to keep the dialog open, and `{ error: '...' }` to display a built-in error message);
+    -   `AlertDialog.Popup`: removed `loading` prop (async flows are now handled internally via `Promise`-returning `onConfirm`);
+    -   `AlertDialog.Popup`: made `children` optional in favor of a new `description` prop, which describes the alert dialog semantically.
+
+### New Features
+
+-   Add `Popover` primitive ([#76438](https://github.com/WordPress/gutenberg/pull/76438)).
+
+### Bug Fixes
+
+-   `Card.Title`, `EmptyState.Title`, `EmptyState.Description`: Fix ref and props being lost when a custom `render` element is provided ([#77160](https://github.com/WordPress/gutenberg/pull/77160)).
+-   `Tabs.List`: Fix `render` prop being silently discarded ([#77160](https://github.com/WordPress/gutenberg/pull/77160)).
+-   `Card`: Set default foreground color on `Card.Root` so content and `currentColor` icons (for example the `CollapsibleCard` chevron) are themeable by default ([#77013](https://github.com/WordPress/gutenberg/pull/77013)).
+
+### Enhancements
+
+-   `Dialog`: Update `Header` layout to support multiple trailing elements alongside the title ([#77161](https://github.com/WordPress/gutenberg/pull/77161), [#77334](https://github.com/WordPress/gutenberg/pull/77334)).
+-   `Dialog`: Use `Text` internally for `Dialog.Title`, adopting the `heading-xl` variant for consistent typography ([#77161](https://github.com/WordPress/gutenberg/pull/77161)).
+-   `Dialog`, `AlertDialog`, `Tooltip`, `Select`: Add `container` prop to `Popup` for custom portal targets ([#77163](https://github.com/WordPress/gutenberg/pull/77163)).
+-   Add defensive styles against global WordPress stylesheets like common.css and forms.css ([#76783](https://github.com/WordPress/gutenberg/pull/76783)).
+-   `VisuallyHidden`: Improve Storybook stories and documentation for the `render` prop composition pattern.
+
+### Internal
+
+-   `Card`: Remove redundant `margin: 0` from `Card.Title` now that `Text` applies it by default ([#77187](https://github.com/WordPress/gutenberg/pull/77187)).
+-   Normalize `render` prop handling across components and document conventions in `CONTRIBUTING.md` ([#77160](https://github.com/WordPress/gutenberg/pull/77160)).
+-   `AlertDialog`: Rewrite internals to use Base UI's `AlertDialog` primitives directly instead of `Dialog` wrappers. Introduces an internal state machine for async confirm flows ([#76937](https://github.com/WordPress/gutenberg/pull/76937)).
+-   `Field.Label`, `Fieldset.Legend`, `Field.Details`: Refactor `VisuallyHidden` composition to preserve semantic HTML elements when visually hiding content.
+-   `Badge`: Use `Text` component for typography ([#77295](https://github.com/WordPress/gutenberg/pull/77295)).
+-   Update `@base-ui/react` from `1.3.0` to `1.4.0` ([#77308](https://github.com/WordPress/gutenberg/pull/77308)).
+
+## 0.10.0 (2026-04-01)
+
+### New Features
+
+-   Add `AlertDialog` primitive ([#76847](https://github.com/WordPress/gutenberg/pull/76847)).
+-   Add `InputControl` component ([#76653](https://github.com/WordPress/gutenberg/pull/76653)).
+-   `Dialog`: Expose `initialFocus` and `finalFocus` props on `Dialog.Popup` for custom focus management ([#76860](https://github.com/WordPress/gutenberg/pull/76860)).
+-   `CollapsibleCard`: Add `HeaderDescription` subcomponent for supplementary header content with `aria-describedby` relationship ([#76867](https://github.com/WordPress/gutenberg/pull/76867)).
+
+### Bug Fixes
+
+-   `Card`: Add `overflow: clip` to `Card.Root` to prevent child content from overflowing rounded corners ([#76678](https://github.com/WordPress/gutenberg/pull/76678)).
+-   `CollapsibleCard`: do not animate the focus ring when expanding/collapsing the card ([#76459](https://github.com/WordPress/gutenberg/pull/76459)).
+
+### Enhancements
+
+-   `Dialog.Root`: expose `disablePointerDismissal` prop ([#76847](https://github.com/WordPress/gutenberg/pull/76847)).
+-   `Dialog.Popup`: Default `initialFocus` now deprioritizes the close icon, focusing the first tabbable content element instead (following WAI-ARIA APG guidance) ([#76910](https://github.com/WordPress/gutenberg/pull/76910)).
+
+### Internal
+
+-   Extract `useDeprioritizedInitialFocus` shared hook for reuse across overlay components ([#76910](https://github.com/WordPress/gutenberg/pull/76910)).
+-   `Tabs`: Add development-mode validation for Tab/Panel count matching ([#75170](https://github.com/WordPress/gutenberg/pull/75170)).
+
+### TypeScript
+
+-   Remove `NoticeIntent` type from package exports ([#76791](https://github.com/WordPress/gutenberg/pull/76791)).
+
+## 0.9.0 (2026-03-18)
 
 ### New Features
 
@@ -13,15 +79,24 @@
 
 ### Bug Fixes
 
+-   `InputLayout.Slot`: Forward the incoming `className` prop instead of letting it be silently overwritten by the rest spread ([#76459](https://github.com/WordPress/gutenberg/pull/76459)).
 -   `VisuallyHidden`: Add `word-break: normal` to prevent text wrapping issues in screen reader content ([#75539](https://github.com/WordPress/gutenberg/pull/75539)).
 
 ### Enhancements
 
 -   `Badge`: Add border, update text color, and apply `neutral-strong` background to `none` intent for better contrast against neutral surfaces ([#76356](https://github.com/WordPress/gutenberg/pull/76356)).
+-   `Dialog`: Use `--wpds-dimension-surface-width-*` design tokens for width constraints ([#76494](https://github.com/WordPress/gutenberg/pull/76494)).
 -   `Notice`: Improve narrow layout by letting description and actions span the icon column when a title is present ([#76202](https://github.com/WordPress/gutenberg/pull/76202)).
 -   `Notice`: Use `Text` component for `Title` and `Description` typography ([#75870](https://github.com/WordPress/gutenberg/pull/75870)).
+-   `Card`: Use `Text` component for `Title` typography ([#76642](https://github.com/WordPress/gutenberg/pull/76642)).
 -   `Card`, `CollapsibleCard`: update padding to match legacy `Card` component ([#76368](https://github.com/WordPress/gutenberg/pull/76368)).
 -   `CollapsibleCard`: move trigger to the header ([#76265](https://github.com/WordPress/gutenberg/pull/76265)).
+-   `CollapsibleCard`: add animations ([#76378](https://github.com/WordPress/gutenberg/pull/76378)).
+-   `CollapsibleCard`: allows the browser page search to find and expand the panel contents via the `hiddenUntilFound` prop. ([#76498](https://github.com/WordPress/gutenberg/pull/76498)).
+
+### Internal
+
+-   Update `@base-ui/react` from 1.2.0 to [1.3.0](https://github.com/mui/base-ui/blob/master/CHANGELOG.md#v130) ([#76603](https://github.com/WordPress/gutenberg/pull/76603)).
 
 ## 0.8.0 (2026-03-04)
 

package/CONTRIBUTING.md

@@ -26,6 +26,161 @@ src/
 -   The folder name should match the primary component name
 -   The `index.ts` file should contain only the public API exports for the component(s)
 
+## Public APIs
+
+The package has a single entrypoint which exports all of the components of the package, and nothing else.
+
+Specifically:
+
+-   Components are implemented as [compound components](#compound-components). Exported components will define their own subcomponents as properties of the top-level export.
+    -   Example: `import { Button } from '@wordpress/ui'; // Button, Button.Icon, etc.`
+-   TypeScript types are not exported. If you need access to a component's prop types, use `React.ComponentProps`.
+    -   Example: `type ButtonProps = React.ComponentProps< typeof Button >;`
+-   Styles are defined in the built JavaScript files and are not loaded separately.
+
+The package follows [semantic versioning](https://semver.org/), and the following are considered to be "the public API" for consideration of backwards-incompatible changes:
+
+-   Component definitions (e.g. removing a component)
+-   Component props (e.g. renaming, removing, or changing a props supported types such that existing usage would break in an update)
+-   CSS properties prefixed with `--wp-ui-` (e.g. changing a CSS property such that it would negatively impact a user's experience)
+
+## Compound Components
+
+This package follows the [compound component approach outlined in the `@wordpress/components` contributing guidelines](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/CONTRIBUTING.md#compound-components).
+
+Some components will use a bare name (e.g. `Button`), while others will have a "root" component with modular children (e.g. `Tooltip.Root`). Use the base component name when it works standalone and any subcomponents are optional enhancements. Only introduce `.Root` when the component is modular and consumers are expected to compose multiple parts.
+
+Why?
+
+-   `.Root` primarily coordinates, and isn't useful on its own
+    -   For example, a `Button` is useful on its own (renders an interactive element), unlike `Tabs.Root`
+-   `.Root` has required subparts, signalling an expectation that it must be composed
+    -   A non-root component can still have _optional_ sub-parts, like a `Button.Icon`
+
+## `render` Prop and Ref Forwarding
+
+All `@wordpress/ui` components support a `render` prop (via the `ComponentProps` utility type) that lets consumers swap the underlying HTML element. This section codifies the two canonical implementation patterns, the rules for handling `render`, and common anti-patterns to avoid.
+
+### Canonical Patterns
+
+The correct approach depends on whether the component wraps a Base UI primitive or renders its own element.
+
+#### Pattern A: Custom components — `useRender` + `mergeProps`
+
+For components that do **not** wrap a Base UI primitive, use `useRender` and `mergeProps` from `@base-ui/react`. Destructure `render` from props (required by the `useRender` API), and pass it together with `ref` and merged props:
+
+```tsx
+import { useRender, mergeProps } from '@base-ui/react';
+import { forwardRef } from '@wordpress/element';
+
+export const Root = forwardRef( function MyComponent( { render, className, ...restProps }, ref ) {
+    const element = useRender( {
+        render,
+        defaultTagName: 'div',
+        ref,
+        props: mergeProps( { className: styles.root }, restProps ),
+    } );
+
+    return element;
+} );
+```
+
+`useRender` handles element creation, ref composition, and prop merging.
+
+#### Pattern B: Wrapper components — pass `ref` explicitly, spread `...props`
+
+For components that wrap a Base UI primitive or another `@wordpress/ui` component, pass the forwarded `ref` explicitly and spread `...props` (which carries `render` through implicitly):
+
+```tsx
+import { Collapsible as _Collapsible } from '@base-ui/react/collapsible';
+import { forwardRef } from '@wordpress/element';
+
+export const Trigger = forwardRef( function MyTrigger( props, ref ) {
+    return <_Collapsible.Trigger ref={ ref } { ...props } />;
+} );
+```
+
+The inner component (Base UI or `@wordpress/ui`) handles `render` and ref composition internally.
+
+### Explicit vs Implicit `render` Handling
+
+**Prefer implicit handling (via `...props` rest spread) unless the component needs to interact with `render`.**
+
+"Interact" means one of:
+
+1. **Assign a default** — the component overrides the default element (e.g., `render = DEFAULT_TAG`).
+2. **Transform** — the component wraps or modifies the value before passing it.
+3. **Discard** — the component intentionally prevents element customization. In this case, destructure `render` to remove it from rest props, **and** `Omit` it from the type so consumers get a TypeScript error instead of silent no-op behavior.
+4. **Pass to `useRender`** — Pattern A components where the hook API requires it as a named argument.
+
+In all other cases, let `render` flow through `...props`. Destructuring `render` only to write `render={ render }` is ceremony with no behavioral effect.
+
+### Overriding the Default Element
+
+When a component needs to render a different element than its inner component's default (e.g., a `<div>` instead of `<span>`), hoist the default to a **module-level constant** and assign it as a destructuring default.
+
+The default can be a **JSX element** or a **render function**, depending on what the component needs:
+
+```tsx
+// JSX element — suitable when you only need to swap the tag.
+const DEFAULT_TAG = <div />;
+
+export const Title = forwardRef( function MyTitle(
+    { render = DEFAULT_TAG, className, children, ...props },
+    ref
+) {
+    return (
+        <Text ref={ ref } render={ render } className={ className } { ...props }>
+            { children }
+        </Text>
+    );
+} );
+```
+
+```tsx
+// Render function — useful when the default needs to compose
+// other components or add additional props.
+const DEFAULT_RENDER = ( props: React.ComponentProps< typeof Stack > ) => (
+    <Stack { ...props } direction="column" gap="sm" />
+);
+
+export const Root = forwardRef( function MyRoot(
+    { className, render = DEFAULT_RENDER, ...restProps },
+    ref
+) {
+    return (
+        <_Field.Root ref={ ref } className={ className } render={ render } { ...restProps } />
+    );
+} );
+```
+
+When using a JSX element, React elements are immutable descriptors — `useRender` calls `cloneElement` on them (creating a new element), never mutating the original. In both cases, a hoisted constant avoids allocating a fresh object every render and gives React/Base UI a stable reference for equality checks.
+
+### Anti-patterns
+
+#### Bundling `ref` and `props` into a render fallback
+
+```tsx
+// BAD: ref and props are lost when consumer provides render
+render={ render ?? <div ref={ ref } { ...props } /> }
+```
+
+When `render` is provided by the consumer, `ref` and `...props` remain on the unused fallback element and never reach the actual rendered element. Always pass `ref` and `...props` separately to the inner component.
+
+#### Unnecessary explicit destructure
+
+```tsx
+// BAD: destructure-and-pass-through with no interaction
+function MyComponent( { render, ...props }, ref ) {
+    return <Inner ref={ ref } render={ render } { ...props } />;
+}
+
+// GOOD: let render flow through ...props
+function MyComponent( props, ref ) {
+    return <Inner ref={ ref } { ...props } />;
+}
+```
+
 ## CSS Architecture
 
 ### CSS Layers
@@ -101,3 +256,28 @@ If a higher layer sets `.special-button { --button-bg: red; }`, that override wi
 ### Disabled State Styling
 
 For components built on Base UI, use the `data-disabled` attribute when styling disabled states rather than targeting `disabled` or `aria-disabled` directly. Base UI applies `data-disabled` consistently regardless of whether the underlying implementation uses the native `disabled` attribute or `aria-disabled` (which depends on the `focusableWhenDisabled` prop). This keeps styles decoupled from the specific HTML attribute and avoids verbose selectors that would need to target both.
+
+### Global CSS defense (wp-admin)
+
+WordPress loads broad, **unlayered** global styles in the admin (`common.css`, `forms.css`) that target bare elements (`input`, `button`, `a`, `p`, headings, and so on). In the cascade, **unlayered rules always win over layered rules**, no matter how specific the layered selector is. That means normal `@wordpress/ui` styles, which live in `@layer wp-ui-*`, can be overridden by admin CSS and components may look wrong in wp-admin (borders, focus rings, typography, colors, and more).
+
+**What it is:** [`global-css-defense.module.css`](src/utils/css/global-css-defense.module.css) is a shared, **unlayered** stylesheet that defines small, class-scoped rules (for example `.input`, `.textarea`, `.button`, `.a`, `p.p`, `:is(h1,…,h6).heading`, `.div`). Those classes are applied on the actual DOM nodes that need protection. Because the declarations are unlayered and use classes, they compete with admin styles on similar footing and can win by specificity.
+
+**How it works (custom property bridge):** Each defended property is expressed with an internal custom property and a fallback, for example:
+
+```css
+.input {
+	font-size: var( --_gcd-input-font-size, inherit );
+}
+```
+
+-   The **fallback** encodes the default that `@wordpress/ui` wants when nothing else is set, so many components need no extra declarations.
+-   A component’s **layered** module can set `--_gcd-*` on a wrapper or the element itself. Custom property resolution is not blocked by cascade layers the same way longhand properties are, so the layered stylesheet can still supply the real token values while the unlayered rule applies them in a context where admin CSS would otherwise win.
+
+Use the `--_gcd-*` prefix only inside this package; treat these variables as implementation details, not public theming API.
+
+**When to use it:** Whenever you introduce or change a primitive that renders a native element commonly styled by wp-admin globals, wire in the matching defense class from `global-css-defense.module.css` (see existing usages in `Button`, `Input`, `Textarea`, `Link`, `Text`, field descriptions, and related form primitives). If admin styles affect a new element type, extend the defense module with a new class and the same bridge pattern rather than duplicating unlayered overrides inside individual components.
+
+**Testing:** In Storybook, enable **WordPress global CSS** from the toolbar and compare stories with that mode on and off; appearance should match aside from intentional differences.
+
+Long term, Core may reduce the need for this by [scoping](https://core.trac.wordpress.org/ticket/64939). Until then, this module is the supported way to keep components predictable inside wp-admin.

package/README.md

@@ -24,16 +24,44 @@ Install using NPM:
 npm install @wordpress/ui
 ```
 
-As an implementation of the design system and companion to the `@wordpress/theme` package, these components depend on CSS custom properties defined by the theme package. This is managed on your behalf in a WordPress admin page context, but you will need to install and include the base theme stylesheet yourself if you're using the components in an application outside WordPress:
+## Setup
+
+As an implementation of the design system and companion to the `@wordpress/theme` package, these components depend on CSS custom properties defined by the theme package. What you need to set up depends on whether you're building for a WordPress context, and how much of the theming features you want to use.
+
+### Within WordPress
+
+Stylesheets are managed on your behalf in a WordPress context, so you don't need to worry about loading them yourself.
+
+### Outside WordPress
+
+While the components ship with basic fallbacks for every CSS custom property, it's recommended that you install and load the design tokens stylesheet to support the full range of theming capabilities:
 
 ```
 npm install @wordpress/theme
 ```
 
-```tsx
+```js
 import '@wordpress/theme/design-tokens.css';
 ```
 
+This stylesheet is universal and does not have a separate RTL version.
+
+Also, to ensure that portaled popovers appear correctly, add these isolation styles to your application's layout root element:
+
+```css
+.root {
+	isolation: isolate;
+}
+```
+
+Finally, in order to support overlay elements such as backdrops to correctly cover the whole browser viewport even when scrolled, add the following style to your global styles:
+
+```css
+body {
+	position: relative;
+}
+```
+
 ## Usage
 
 ### Basic Component Usage
@@ -104,10 +132,10 @@ Interactive components that manage internal state (such as open/closed, selected
 
 For a given state `x`, the convention is:
 
-| Prop | Purpose |
-| --- | --- |
-| `defaultX` | Sets the initial value in **uncontrolled** mode. The component manages subsequent state changes internally. |
-| `x` | Sets the current value in **controlled** mode. The consumer is responsible for updating the value in response to changes. |
+| Prop        | Purpose                                                                                                                                 |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `defaultX`  | Sets the initial value in **uncontrolled** mode. The component manages subsequent state changes internally.                             |
+| `x`         | Sets the current value in **controlled** mode. The consumer is responsible for updating the value in response to changes.               |
 | `onXChange` | Callback invoked when the state changes. Receives the new value as its first argument. Works in both controlled and uncontrolled modes. |
 
 For example, a component with an open/closed state would expose:

package/build/alert-dialog/context.cjs

@@ -0,0 +1,39 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/alert-dialog/context.tsx
+var context_exports = {};
+__export(context_exports, {
+  AlertDialogContext: () => AlertDialogContext
+});
+module.exports = __toCommonJS(context_exports);
+var import_element = require("@wordpress/element");
+var noop = async () => {
+};
+var AlertDialogContext = (0, import_element.createContext)({
+  phase: "idle",
+  showSpinner: false,
+  errorMessage: void 0,
+  confirm: noop
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlertDialogContext
+});
+//# sourceMappingURL=context.cjs.map

package/build/alert-dialog/context.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/alert-dialog/context.tsx"],
+  "sourcesContent": ["import { createContext } from '@wordpress/element';\n\ntype Phase = 'idle' | 'pending' | 'closing';\n\ninterface AlertDialogContextValue {\n\tphase: Phase;\n\tshowSpinner: boolean;\n\terrorMessage?: string;\n\tconfirm: () => Promise< void >;\n}\n\nconst noop = async () => {};\n\nconst AlertDialogContext = createContext< AlertDialogContextValue >( {\n\tphase: 'idle',\n\tshowSpinner: false,\n\terrorMessage: undefined,\n\tconfirm: noop,\n} );\n\nexport { AlertDialogContext };\nexport type { Phase };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8B;AAW9B,IAAM,OAAO,YAAY;AAAC;AAE1B,IAAM,yBAAqB,8BAA0C;AAAA,EACpE,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAAS;AACV,CAAE;",
+  "names": []
+}

package/build/alert-dialog/index.cjs

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/alert-dialog/index.ts
+var alert_dialog_exports = {};
+__export(alert_dialog_exports, {
+  Popup: () => import_popup.Popup,
+  Root: () => import_root.Root,
+  Trigger: () => import_trigger.Trigger
+});
+module.exports = __toCommonJS(alert_dialog_exports);
+var import_root = require("./root.cjs");
+var import_trigger = require("./trigger.cjs");
+var import_popup = require("./popup.cjs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popup,
+  Root,
+  Trigger
+});
+//# sourceMappingURL=index.cjs.map

package/build/alert-dialog/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/alert-dialog/index.ts"],
+  "sourcesContent": ["export { Root } from './root';\nexport { Trigger } from './trigger';\nexport { Popup } from './popup';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAqB;AACrB,qBAAwB;AACxB,mBAAsB;",
+  "names": []
+}

package/build/alert-dialog/popup.cjs

@@ -0,0 +1,165 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/alert-dialog/popup.tsx
+var popup_exports = {};
+__export(popup_exports, {
+  Popup: () => Popup
+});
+module.exports = __toCommonJS(popup_exports);
+var import_alert_dialog = require("@base-ui/react/alert-dialog");
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_theme = require("@wordpress/theme");
+var import_button = require("../button/index.cjs");
+
+// packages/ui/src/dialog/style.module.css
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='0289d42d13']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "0289d42d13");
+  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._074affe4c56b4f2f__backdrop{background-color:#00000059;inset:0;position:fixed;z-index:var(--wp-ui-dialog-z-index,initial);&[data-ending-style],&[data-starting-style]{opacity:0}&[data-open]{opacity:1}@media not (prefers-reduced-motion){transition:opacity .2s ease-out}}._8acaa98861620d4d__popup{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border-radius:var(--wpds-border-radius-lg,8px);box-shadow:var(--wpds-elevation-lg,0 5px 15px 0 #00000014,0 15px 27px 0 #00000012,0 30px 36px 0 #0000000a,0 50px 43px 0 #00000005);box-sizing:border-box;color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);left:50%;line-height:var(--wpds-typography-line-height-md,24px);max-height:calc(100vh - var(--wpds-dimension-padding-2xl, 24px)*2);min-width:var(--wpds-dimension-surface-width-sm,320px);overflow:auto;padding:var(--wpds-dimension-padding-2xl,24px);position:fixed;top:50%;transform:translate(-50%,-50%);width:calc(100vw - var(--wpds-dimension-padding-2xl, 24px)*2);z-index:var(--wp-ui-dialog-z-index,initial);&[data-ending-style],&[data-starting-style]{opacity:0;transform:translate(-50%,-50%) scale(.9)}@media not (prefers-reduced-motion){transition:opacity .2s cubic-bezier(1,0,.2,1),transform .2s cubic-bezier(1,0,.2,1);&[data-open]{transition:opacity .2s cubic-bezier(.29,0,0,1),transform .2s cubic-bezier(.29,0,0,1)}}@media (min-width:480px){min-width:var(--wpds-dimension-surface-width-md,400px)}&._7acfa67ebf092988__is-small{max-width:var(--wpds-dimension-surface-width-md,400px)}&._1eeeed880cb5769d__is-medium{max-width:var(--wpds-dimension-surface-width-lg,560px)}&._99f900b2267e22d0__is-large{max-width:var(--wpds-dimension-surface-width-2xl,960px)}&.b49f7ff9c06fe387__is-stretch{max-width:none}&.dcd4c2f5036cbf1a__is-full{height:100vh}}._76fb3b28fcbd45fc__header{align-items:center;display:flex;gap:var(--wpds-dimension-gap-sm,8px);margin-bottom:var(--wpds-dimension-gap-lg,16px)}.f636832002af749e__title{--_gcd-heading-margin:0 auto 0 0;margin-inline-end:auto;&:dir(rtl){--_gcd-heading-margin:0 0 0 auto}}._00eeb4f220cddae3__footer{align-items:center;display:flex;gap:var(--wpds-dimension-gap-sm,8px);justify-content:flex-end;margin-top:var(--wpds-dimension-gap-lg,16px);padding-top:var(--wpds-dimension-padding-lg,16px)}}'));
+  document.head.appendChild(style);
+}
+var style_default = { "backdrop": "_074affe4c56b4f2f__backdrop", "popup": "_8acaa98861620d4d__popup", "is-small": "_7acfa67ebf092988__is-small", "is-medium": "_1eeeed880cb5769d__is-medium", "is-large": "_99f900b2267e22d0__is-large", "is-stretch": "b49f7ff9c06fe387__is-stretch", "is-full": "dcd4c2f5036cbf1a__is-full", "header": "_76fb3b28fcbd45fc__header", "title": "f636832002af749e__title", "footer": "_00eeb4f220cddae3__footer" };
+
+// packages/ui/src/alert-dialog/popup.tsx
+var import_lock_unlock = require("../lock-unlock.cjs");
+var import_stack = require("../stack/index.cjs");
+var import_text = require("../text/index.cjs");
+var import_context = require("./context.cjs");
+
+// packages/ui/src/alert-dialog/style.module.css
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='113a8b8edd']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "113a8b8edd");
+  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._837a6eb481252f50__header{margin-bottom:var(--wpds-dimension-gap-lg,16px)}.dbff6618234a2a93__error-message{align-self:flex-end;color:var(--wpds-color-fg-content-error,#470000)}}@layer wp-ui-compositions{._2ddc2fc9155a1dad__irreversible-action{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-error-strong,#cc1818);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-error-strong-active,#b90000);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-error-strong,#f2efef);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-error-strong-active,#f2efef)}}"));
+  document.head.appendChild(style);
+}
+var style_default2 = { "header": "_837a6eb481252f50__header", "error-message": "dbff6618234a2a93__error-message", "irreversible-action": "_2ddc2fc9155a1dad__irreversible-action" };
+
+// packages/ui/src/alert-dialog/popup.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeProvider = (0, import_lock_unlock.unlock)(import_theme.privateApis).ThemeProvider;
+var Popup = (0, import_element.forwardRef)(
+  function AlertDialogPopup({
+    className,
+    container,
+    intent = "default",
+    title,
+    description,
+    children,
+    confirmButtonText = (0, import_i18n.__)("OK"),
+    cancelButtonText = (0, import_i18n.__)("Cancel"),
+    ...props
+  }, ref) {
+    const { phase, showSpinner, errorMessage, confirm } = (0, import_element.useContext)(import_context.AlertDialogContext);
+    const confirmClassName = intent === "irreversible" ? style_default2["irreversible-action"] : void 0;
+    const buttonsDisabled = phase !== "idle" || void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_alert_dialog.AlertDialog.Portal, { container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert_dialog.AlertDialog.Backdrop, { className: style_default.backdrop }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_alert_dialog.AlertDialog.Popup,
+        {
+          ref,
+          className: (0, import_clsx.default)(
+            style_default.popup,
+            className,
+            style_default["is-medium"]
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_stack.Stack,
+              {
+                direction: "column",
+                gap: "sm",
+                className: style_default2.header,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_text.Text,
+                    {
+                      variant: "heading-xl",
+                      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert_dialog.AlertDialog.Title, {}),
+                      children: title
+                    }
+                  ),
+                  description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_text.Text,
+                    {
+                      variant: "body-md",
+                      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert_dialog.AlertDialog.Description, {}),
+                      children: description
+                    }
+                  )
+                ]
+              }
+            ),
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack.Stack, { direction: "column", gap: "md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: style_default.footer, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_alert_dialog.AlertDialog.Close,
+                  {
+                    render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "minimal" }),
+                    disabled: buttonsDisabled,
+                    children: cancelButtonText
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_button.Button,
+                  {
+                    className: confirmClassName,
+                    onClick: confirm,
+                    loading: showSpinner || void 0,
+                    disabled: buttonsDisabled,
+                    children: confirmButtonText
+                  }
+                )
+              ] }),
+              errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_text.Text,
+                {
+                  variant: "body-sm",
+                  className: style_default2["error-message"],
+                  children: errorMessage
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    ] });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popup
+});
+//# sourceMappingURL=popup.cjs.map