@wordpress/ui 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -2,6 +2,44 @@
 
 ## Unreleased
 
+## 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

package/CONTRIBUTING.md

@@ -57,6 +57,130 @@ Why?
 -   `.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
@@ -132,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

@@ -24,8 +24,13 @@ __export(context_exports, {
 });
 module.exports = __toCommonJS(context_exports);
 var import_element = require("@wordpress/element");
+var noop = async () => {
+};
 var AlertDialogContext = (0, import_element.createContext)({
-  intent: "default"
+  phase: "idle",
+  showSpinner: false,
+  errorMessage: void 0,
+  confirm: noop
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alert-dialog/context.tsx"],
-  "sourcesContent": ["import { createContext } from '@wordpress/element';\nimport type { RootProps } from './types';\n\ntype Intent = NonNullable< RootProps[ 'intent' ] >;\n\ninterface AlertDialogContextValue {\n\tintent: Intent;\n}\n\nconst AlertDialogContext = createContext< AlertDialogContextValue >( {\n\tintent: 'default',\n} );\n\nexport { AlertDialogContext };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8B;AAS9B,IAAM,yBAAqB,8BAA0C;AAAA,EACpE,QAAQ;AACT,CAAE;",
+  "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/popup.cjs

@@ -30,59 +30,131 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/ui/src/alert-dialog/popup.tsx
 var popup_exports = {};
 __export(popup_exports, {
-  Popup: () => Popup2
+  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");
-var Dialog = __toESM(require("../dialog/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='35295c8521']")) {
+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", "35295c8521");
-  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@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)}}"));
+  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_default = { "irreversible-action": "_2ddc2fc9155a1dad__irreversible-action" };
+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 Popup2 = (0, import_element.forwardRef)(
+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,
-    onConfirm,
     confirmButtonText = (0, import_i18n.__)("OK"),
     cancelButtonText = (0, import_i18n.__)("Cancel"),
-    loading
+    ...props
   }, ref) {
-    const { intent } = (0, import_element.useContext)(import_context.AlertDialogContext);
-    const ConfirmButton = loading !== void 0 ? import_button.Button : Dialog.Action;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Popup, { ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Title, { children: title }) }),
-      children,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Footer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          Dialog.Action,
-          {
-            variant: "minimal",
-            disabled: loading || void 0,
-            children: cancelButtonText
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          ConfirmButton,
-          {
-            className: intent === "irreversible" ? style_default["irreversible-action"] : void 0,
-            onClick: onConfirm,
-            loading,
-            children: confirmButtonText
-          }
-        )
-      ] })
+    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
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
     ] });
   }
 );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/alert-dialog/popup.tsx", "../../src/alert-dialog/style.module.css"],
-  "sourcesContent": ["import { forwardRef, useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Button } from '../button';\nimport * as Dialog from '../dialog';\nimport { AlertDialogContext } from './context';\nimport styles from './style.module.css';\nimport type { PopupProps } from './types';\n\nconst Popup = forwardRef< HTMLDivElement, PopupProps >(\n\tfunction AlertDialogPopup(\n\t\t{\n\t\t\ttitle,\n\t\t\tchildren,\n\t\t\tonConfirm,\n\t\t\tconfirmButtonText = __( 'OK' ),\n\t\t\tcancelButtonText = __( 'Cancel' ),\n\t\t\tloading,\n\t\t},\n\t\tref\n\t) {\n\t\tconst { intent } = useContext( AlertDialogContext );\n\n\t\t// When `loading` is provided, the consumer controls when the dialog\n\t\t// closes (async flow). Use a plain Button so clicking confirm doesn't\n\t\t// auto-close \u2014 the consumer sets `open={false}` after their operation.\n\t\tconst ConfirmButton = loading !== undefined ? Button : Dialog.Action;\n\n\t\treturn (\n\t\t\t<Dialog.Popup ref={ ref }>\n\t\t\t\t<Dialog.Header>\n\t\t\t\t\t<Dialog.Title>{ title }</Dialog.Title>\n\t\t\t\t</Dialog.Header>\n\t\t\t\t{ children }\n\t\t\t\t<Dialog.Footer>\n\t\t\t\t\t<Dialog.Action\n\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t\tdisabled={ loading || undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ cancelButtonText }\n\t\t\t\t\t</Dialog.Action>\n\t\t\t\t\t<ConfirmButton\n\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\tintent === 'irreversible'\n\t\t\t\t\t\t\t\t? styles[ 'irreversible-action' ]\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={ onConfirm }\n\t\t\t\t\t\tloading={ loading }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ confirmButtonText }\n\t\t\t\t\t</ConfirmButton>\n\t\t\t\t</Dialog.Footer>\n\t\t\t</Dialog.Popup>\n\t\t);\n\t}\n);\n\nexport { Popup };\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='35295c8521']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"35295c8521\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@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)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"irreversible-action\":\"_2ddc2fc9155a1dad__irreversible-action\"};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,eAAAA;AAAA;AAAA;AAAA,qBAAuC;AACvC,kBAAmB;AACnB,oBAAuB;AACvB,aAAwB;AACxB,qBAAmC;;;ACJnC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,ugBAAugB,CAAC;AACljB,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,uBAAsB,yCAAwC;;;ADwBzE;AAtBL,IAAMC,aAAQ;AAAA,EACb,SAAS,iBACR;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAoB,gBAAI,IAAK;AAAA,IAC7B,uBAAmB,gBAAI,QAAS;AAAA,IAChC;AAAA,EACD,GACA,KACC;AACD,UAAM,EAAE,OAAO,QAAI,2BAAY,iCAAmB;AAKlD,UAAM,gBAAgB,YAAY,SAAY,uBAAgB;AAE9D,WACC,6CAAQ,cAAP,EAAa,KACb;AAAA,kDAAQ,eAAP,EACA,sDAAQ,cAAP,EAAe,iBAAO,GACxB;AAAA,MACE;AAAA,MACF,6CAAQ,eAAP,EACA;AAAA;AAAA,UAAQ;AAAA,UAAP;AAAA,YACA,SAAQ;AAAA,YACR,UAAW,WAAW;AAAA,YAEpB;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WACC,WAAW,iBACR,cAAQ,qBAAsB,IAC9B;AAAA,YAEJ,SAAU;AAAA,YACV;AAAA,YAEE;AAAA;AAAA,QACH;AAAA,SACD;AAAA,OACD;AAAA,EAEF;AACD;",
-  "names": ["Popup", "Popup"]
+  "sources": ["../../src/alert-dialog/popup.tsx", "../../src/dialog/style.module.css", "../../src/alert-dialog/style.module.css"],
+  "sourcesContent": ["import { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';\nimport clsx from 'clsx';\nimport { forwardRef, useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\ttype ThemeProvider as ThemeProviderType,\n\tprivateApis as themePrivateApis,\n} from '@wordpress/theme';\n\nimport { Button } from '../button';\nimport dialogStyles from '../dialog/style.module.css';\nimport { unlock } from '../lock-unlock';\nimport { Stack } from '../stack';\nimport { Text } from '../text';\nimport { AlertDialogContext } from './context';\nimport alertDialogStyles from './style.module.css';\nimport type { PopupProps } from './types';\n\nconst ThemeProvider: typeof ThemeProviderType =\n\tunlock( themePrivateApis ).ThemeProvider;\n\nconst Popup = forwardRef< HTMLDivElement, PopupProps >(\n\tfunction AlertDialogPopup(\n\t\t{\n\t\t\tclassName,\n\t\t\tcontainer,\n\t\t\tintent = 'default',\n\t\t\ttitle,\n\t\t\tdescription,\n\t\t\tchildren,\n\t\t\tconfirmButtonText = __( 'OK' ),\n\t\t\tcancelButtonText = __( 'Cancel' ),\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\tconst { phase, showSpinner, errorMessage, confirm } =\n\t\t\tuseContext( AlertDialogContext );\n\n\t\tconst confirmClassName =\n\t\t\tintent === 'irreversible'\n\t\t\t\t? alertDialogStyles[ 'irreversible-action' ]\n\t\t\t\t: undefined;\n\n\t\tconst buttonsDisabled = phase !== 'idle' || undefined;\n\n\t\treturn (\n\t\t\t<_AlertDialog.Portal container={ container }>\n\t\t\t\t<_AlertDialog.Backdrop className={ dialogStyles.backdrop } />\n\t\t\t\t<ThemeProvider>\n\t\t\t\t\t<_AlertDialog.Popup\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\tdialogStyles.popup,\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\tdialogStyles[ 'is-medium' ]\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\t\tclassName={ alertDialogStyles.header }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tvariant=\"heading-xl\"\n\t\t\t\t\t\t\t\trender={ <_AlertDialog.Title /> }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t{ description && (\n\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\tvariant=\"body-md\"\n\t\t\t\t\t\t\t\t\trender={ <_AlertDialog.Description /> }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t<Stack direction=\"column\" gap=\"md\">\n\t\t\t\t\t\t\t<div className={ dialogStyles.footer }>\n\t\t\t\t\t\t\t\t<_AlertDialog.Close\n\t\t\t\t\t\t\t\t\trender={ <Button variant=\"minimal\" /> }\n\t\t\t\t\t\t\t\t\tdisabled={ buttonsDisabled }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ cancelButtonText }\n\t\t\t\t\t\t\t\t</_AlertDialog.Close>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName={ confirmClassName }\n\t\t\t\t\t\t\t\t\tonClick={ confirm }\n\t\t\t\t\t\t\t\t\tloading={ showSpinner || undefined }\n\t\t\t\t\t\t\t\t\tdisabled={ buttonsDisabled }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ confirmButtonText }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ errorMessage && (\n\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\tvariant=\"body-sm\"\n\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\talertDialogStyles[ 'error-message' ]\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ errorMessage }\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</_AlertDialog.Popup>\n\t\t\t\t</ThemeProvider>\n\t\t\t</_AlertDialog.Portal>\n\t\t);\n\t}\n);\n\nexport { Popup };\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='0289d42d13']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"0289d42d13\");\n\tstyle.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)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport 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\"};\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='113a8b8edd']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"113a8b8edd\");\n\tstyle.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)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"header\":\"_837a6eb481252f50__header\",\"error-message\":\"dbff6618234a2a93__error-message\",\"irreversible-action\":\"_2ddc2fc9155a1dad__irreversible-action\"};\n"],
+  "mappings": "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",
+  "names": ["style_default", "themePrivateApis", "style_default", "_AlertDialog", "clsx"]
 }