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

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 ## Unreleased
 
+## 0.11.0-next.0 (2026-04-09)
+
+### 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`: 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
+
+-   Add defensive styles against global WordPress stylesheets like common.css and forms.css ([#76783](https://github.com/WordPress/gutenberg/pull/76783)).
+
+### Internal
+
+-   `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)).
+
 ## 0.10.0 (2026-04-01)
 
 ### New Features

package/CONTRIBUTING.md

@@ -132,3 +132,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,36 @@ 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;
+}
+```
+
 ## Usage
 
 ### Basic Component Usage

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='6520ba3376']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "6520ba3376");
+  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-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-md,13px);left:50%;line-height:var(--wpds-font-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;justify-content:space-between;margin-bottom:var(--wpds-dimension-gap-lg,16px)}.f636832002af749e__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-size:var(--wpds-font-size-xl,20px);font-weight:var(--wpds-font-weight-medium,499);line-height:var(--wpds-font-line-height-xl,32px);margin:0}._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,
+    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, { 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, {}),
+                      className: style_default.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\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>\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\tclassName={ dialogStyles.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='6520ba3376']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"6520ba3376\");\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-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-font-size-md,13px);left:50%;line-height:var(--wpds-font-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;justify-content:space-between;margin-bottom:var(--wpds-dimension-gap-lg,16px)}.f636832002af749e__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-size:var(--wpds-font-size-xl,20px);font-weight:var(--wpds-font-weight-medium,499);line-height:var(--wpds-font-line-height-xl,32px);margin:0}._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"]
 }

package/build/alert-dialog/root.cjs

@@ -24,23 +24,123 @@ __export(root_exports, {
 });
 module.exports = __toCommonJS(root_exports);
 var import_alert_dialog = require("@base-ui/react/alert-dialog");
+var import_a11y = require("@wordpress/a11y");
 var import_element = require("@wordpress/element");
 var import_context = require("./context.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+function isThenable(value) {
+  return value !== null && value !== void 0 && typeof value.then === "function";
+}
 function Root({
-  intent = "default",
   children,
-  open,
+  open: openProp,
   onOpenChange,
-  defaultOpen
+  defaultOpen,
+  onConfirm
 }) {
-  const contextValue = (0, import_element.useMemo)(() => ({ intent }), [intent]);
+  const [internalOpen, setInternalOpen] = (0, import_element.useState)(defaultOpen ?? false);
+  const [phase, setPhase] = (0, import_element.useState)("idle");
+  const [showSpinner, setShowSpinner] = (0, import_element.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, import_element.useState)();
+  const actionsRef = (0, import_element.useRef)(null);
+  const onConfirmRef = (0, import_element.useRef)(onConfirm);
+  onConfirmRef.current = onConfirm;
+  const phaseRef = (0, import_element.useRef)(phase);
+  phaseRef.current = phase;
+  const confirmIdRef = (0, import_element.useRef)(0);
+  const effectiveOpen = openProp ?? internalOpen;
+  (0, import_element.useEffect)(() => {
+    if (effectiveOpen && phase === "closing") {
+      phaseRef.current = "idle";
+      setPhase("idle");
+      setShowSpinner(false);
+    }
+  }, [effectiveOpen, phase]);
+  const handleOpenChange = (0, import_element.useCallback)(
+    (nextOpen, eventDetails) => {
+      if (!nextOpen && phaseRef.current === "pending") {
+        return;
+      }
+      if (!nextOpen && phaseRef.current === "idle") {
+        phaseRef.current = "closing";
+        setPhase("closing");
+      }
+      setInternalOpen(nextOpen);
+      onOpenChange?.(nextOpen, eventDetails);
+    },
+    [onOpenChange]
+  );
+  const confirm = (0, import_element.useCallback)(async () => {
+    if (phaseRef.current !== "idle") {
+      return;
+    }
+    phaseRef.current = "pending";
+    setPhase("pending");
+    setErrorMessage(void 0);
+    const id = ++confirmIdRef.current;
+    try {
+      const rawResult = onConfirmRef.current?.();
+      if (isThenable(rawResult)) {
+        setShowSpinner(true);
+      }
+      const result = await Promise.resolve(rawResult);
+      if (confirmIdRef.current !== id) {
+        return;
+      }
+      if (result?.error) {
+        phaseRef.current = "idle";
+        setPhase("idle");
+        setShowSpinner(false);
+        setErrorMessage(result.error);
+        (0, import_a11y.speak)(result.error, "assertive");
+        return;
+      }
+      const shouldClose = result?.close !== false;
+      if (shouldClose) {
+        phaseRef.current = "closing";
+        setPhase("closing");
+        actionsRef.current?.close();
+      } else {
+        phaseRef.current = "idle";
+        setPhase("idle");
+        setShowSpinner(false);
+      }
+    } catch (error) {
+      if (confirmIdRef.current !== id) {
+        return;
+      }
+      phaseRef.current = "idle";
+      setPhase("idle");
+      setShowSpinner(false);
+      console.error(error);
+    }
+  }, []);
+  const handleOpenChangeComplete = (0, import_element.useCallback)((open) => {
+    if (!open) {
+      confirmIdRef.current++;
+      phaseRef.current = "idle";
+      setPhase("idle");
+      setShowSpinner(false);
+      setErrorMessage(void 0);
+    }
+  }, []);
+  const contextValue = (0, import_element.useMemo)(
+    () => ({
+      phase,
+      showSpinner,
+      errorMessage,
+      confirm
+    }),
+    [phase, showSpinner, errorMessage, confirm]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_alert_dialog.AlertDialog.Root,
     {
-      open,
-      onOpenChange,
+      open: effectiveOpen,
       defaultOpen,
+      onOpenChange: handleOpenChange,
+      onOpenChangeComplete: handleOpenChangeComplete,
+      actionsRef,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.AlertDialogContext.Provider, { value: contextValue, children })
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alert-dialog/root.tsx"],
-  "sourcesContent": ["import { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';\nimport { useMemo } from '@wordpress/element';\nimport { AlertDialogContext } from './context';\nimport type { RootProps } from './types';\n\n/**\n * A dialog that requires a user response to proceed.\n *\n * Use `AlertDialog.Trigger` to render a button that opens the dialog.\n * Use `AlertDialog.Popup` to render the dialog content.\n * The `AlertDialog.Trigger` is optional \u2014 the dialog can also be controlled\n * via `open` / `onOpenChange` props.\n *\n * ## Use cases\n *\n * - **Default intent**: Standard confirmation dialog for reversible actions.\n * - **Irreversible intent**: Confirmation dialog for irreversible actions that\n *   cannot be undone. The confirm button uses error/danger coloring.\n *\n * For use cases outside the standard confirm/cancel pattern, use the lower-level\n * `Dialog` component directly.\n *\n * See the [Destructive Actions guidelines](?path=/docs/design-system-patterns-destructive-actions--docs)\n * for more details on when to use each pattern.\n */\nfunction Root( {\n\tintent = 'default',\n\tchildren,\n\topen,\n\tonOpenChange,\n\tdefaultOpen,\n}: RootProps ) {\n\tconst contextValue = useMemo( () => ( { intent } ), [ intent ] );\n\n\treturn (\n\t\t<_AlertDialog.Root\n\t\t\topen={ open }\n\t\t\tonOpenChange={ onOpenChange }\n\t\t\tdefaultOpen={ defaultOpen }\n\t\t>\n\t\t\t<AlertDialogContext.Provider value={ contextValue }>\n\t\t\t\t{ children }\n\t\t\t</AlertDialogContext.Provider>\n\t\t</_AlertDialog.Root>\n\t);\n}\n\nexport { Root };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4C;AAC5C,qBAAwB;AACxB,qBAAmC;AAsChC;AAfH,SAAS,KAAM;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAe;AACd,QAAM,mBAAe,wBAAS,OAAQ,EAAE,OAAO,IAAK,CAAE,MAAO,CAAE;AAE/D,SACC;AAAA,IAAC,oBAAAA,YAAa;AAAA,IAAb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC,kCAAmB,UAAnB,EAA4B,OAAQ,cAClC,UACH;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';\nimport { speak } from '@wordpress/a11y';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n\nimport { AlertDialogContext } from './context';\nimport type { Phase } from './context';\nimport type { RootProps } from './types';\n\nfunction isThenable( value: unknown ): value is PromiseLike< unknown > {\n\treturn (\n\t\tvalue !== null &&\n\t\tvalue !== undefined &&\n\t\ttypeof ( value as PromiseLike< unknown > ).then === 'function'\n\t);\n}\n\n/**\n * A dialog that requires a user response to proceed.\n *\n * Use `AlertDialog.Trigger` to render a button that opens the dialog.\n * Use `AlertDialog.Popup` to render the dialog content.\n * The `AlertDialog.Trigger` is optional \u2014 the dialog can also be controlled\n * via `open` / `onOpenChange` props.\n *\n * For use cases outside the standard confirm/cancel pattern, use the lower-level\n * `Dialog` component directly.\n *\n * See the [Destructive Actions guidelines](https://wordpress.github.io/gutenberg/?path=/docs/design-system-patterns-destructive-actions--docs)\n * for more details on when to use each pattern.\n */\nfunction Root( {\n\tchildren,\n\topen: openProp,\n\tonOpenChange,\n\tdefaultOpen,\n\tonConfirm,\n}: RootProps ) {\n\tconst [ internalOpen, setInternalOpen ] = useState( defaultOpen ?? false );\n\n\t// Internal state machine for the confirm-and-close lifecycle.\n\t//\n\t// Phase transitions:\n\t//\n\t//   idle \u2500\u2500> pending \u2500\u2500> closing \u2500\u2500> idle\n\t//           (confirm     (success,   (animation\n\t//            clicked)     close)      complete)\n\t//\n\t//   idle \u2500\u2500> pending \u2500\u2500> idle\n\t//           (confirm     (error, or\n\t//            clicked)     {close:false})\n\t//\n\t//   idle \u2500\u2500> closing \u2500\u2500> idle\n\t//           (cancel/     (animation\n\t//            escape)      complete)\n\t//\n\t// `showSpinner` tracks whether the confirm button shows a loading\n\t// indicator. It is orthogonal to `phase`:\n\t//\n\t//   Scenario                  | pending | closing\n\t//   --------------------------+---------+---------\n\t//   Sync onConfirm            | false   | false\n\t//   Async onConfirm (success) | true    | true\n\t//   Async onConfirm (error)   | true    | n/a (-> idle)\n\t//   Cancel / Escape           | n/a     | false\n\t//\n\t// Buttons are disabled whenever phase !== 'idle'.\n\t// Dismiss (Escape / Cancel) is blocked during 'pending'.\n\tconst [ phase, setPhase ] = useState< Phase >( 'idle' );\n\tconst [ showSpinner, setShowSpinner ] = useState( false );\n\tconst [ errorMessage, setErrorMessage ] = useState< string >();\n\n\tconst actionsRef = useRef< _AlertDialog.Root.Actions | null >( null );\n\n\tconst onConfirmRef = useRef( onConfirm );\n\tonConfirmRef.current = onConfirm;\n\n\t// Ref keeps phase accessible synchronously from callbacks that may\n\t// run between a setState call and the subsequent React re-render.\n\tconst phaseRef = useRef( phase );\n\tphaseRef.current = phase;\n\n\t// Generation counter \u2014 safety net for the edge case where the component\n\t// unmounts while an async confirm is in flight. Also incremented when\n\t// the dialog finishes closing, so a stale promise settling after a\n\t// dismiss+reopen cycle is silently discarded.\n\tconst confirmIdRef = useRef( 0 );\n\n\tconst effectiveOpen = openProp ?? internalOpen;\n\n\t// Safety net: if the consumer keeps `open={true}` after a confirm\n\t// (i.e. does not react to `onOpenChange`), the phase would be stuck\n\t// at 'closing'. Detect the contradiction and reset to idle.\n\tuseEffect( () => {\n\t\tif ( effectiveOpen && phase === 'closing' ) {\n\t\t\tphaseRef.current = 'idle';\n\t\t\tsetPhase( 'idle' );\n\t\t\tsetShowSpinner( false );\n\t\t}\n\t}, [ effectiveOpen, phase ] );\n\n\tconst handleOpenChange = useCallback(\n\t\t(\n\t\t\tnextOpen: boolean,\n\t\t\teventDetails: _AlertDialog.Root.ChangeEventDetails\n\t\t) => {\n\t\t\t// Block dismiss while a confirm action is pending.\n\t\t\tif ( ! nextOpen && phaseRef.current === 'pending' ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( ! nextOpen && phaseRef.current === 'idle' ) {\n\t\t\t\tphaseRef.current = 'closing';\n\t\t\t\tsetPhase( 'closing' );\n\t\t\t}\n\n\t\t\tsetInternalOpen( nextOpen );\n\t\t\tonOpenChange?.( nextOpen, eventDetails );\n\t\t},\n\t\t[ onOpenChange ]\n\t);\n\n\tconst confirm = useCallback( async () => {\n\t\tif ( phaseRef.current !== 'idle' ) {\n\t\t\treturn;\n\t\t}\n\n\t\tphaseRef.current = 'pending';\n\t\tsetPhase( 'pending' );\n\t\tsetErrorMessage( undefined );\n\n\t\tconst id = ++confirmIdRef.current;\n\n\t\ttry {\n\t\t\tconst rawResult = onConfirmRef.current?.();\n\n\t\t\t// Show spinner only for async handlers (Promises).\n\t\t\t// Sync handlers resolve in the same tick \u2014 no spinner needed.\n\t\t\tif ( isThenable( rawResult ) ) {\n\t\t\t\tsetShowSpinner( true );\n\t\t\t}\n\n\t\t\tconst result = await Promise.resolve( rawResult );\n\n\t\t\t// Discard if the component unmounted or the dialog was\n\t\t\t// dismissed and reopened while the promise was in flight.\n\t\t\tif ( confirmIdRef.current !== id ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// An error message implies the dialog should stay open.\n\t\t\tif ( result?.error ) {\n\t\t\t\tphaseRef.current = 'idle';\n\t\t\t\tsetPhase( 'idle' );\n\t\t\t\tsetShowSpinner( false );\n\t\t\t\tsetErrorMessage( result.error );\n\t\t\t\tspeak( result.error, 'assertive' );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst shouldClose = result?.close !== false;\n\n\t\t\tif ( shouldClose ) {\n\t\t\t\tphaseRef.current = 'closing';\n\t\t\t\tsetPhase( 'closing' );\n\t\t\t\tactionsRef.current?.close();\n\t\t\t} else {\n\t\t\t\tphaseRef.current = 'idle';\n\t\t\t\tsetPhase( 'idle' );\n\t\t\t\tsetShowSpinner( false );\n\t\t\t}\n\t\t} catch ( error ) {\n\t\t\tif ( confirmIdRef.current !== id ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tphaseRef.current = 'idle';\n\t\t\tsetPhase( 'idle' );\n\t\t\tsetShowSpinner( false );\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error( error );\n\t\t}\n\t}, [] );\n\n\tconst handleOpenChangeComplete = useCallback( ( open: boolean ) => {\n\t\tif ( ! open ) {\n\t\t\t// Invalidate any in-flight async so a stale promise settling\n\t\t\t// after dismiss+reopen doesn't close the new session.\n\t\t\tconfirmIdRef.current++;\n\t\t\tphaseRef.current = 'idle';\n\t\t\tsetPhase( 'idle' );\n\t\t\tsetShowSpinner( false );\n\t\t\tsetErrorMessage( undefined );\n\t\t}\n\t}, [] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tphase,\n\t\t\tshowSpinner,\n\t\t\terrorMessage,\n\t\t\tconfirm,\n\t\t} ),\n\t\t[ phase, showSpinner, errorMessage, confirm ]\n\t);\n\n\treturn (\n\t\t<_AlertDialog.Root\n\t\t\topen={ effectiveOpen }\n\t\t\tdefaultOpen={ defaultOpen }\n\t\t\tonOpenChange={ handleOpenChange }\n\t\t\tonOpenChangeComplete={ handleOpenChangeComplete }\n\t\t\tactionsRef={ actionsRef }\n\t\t>\n\t\t\t<AlertDialogContext.Provider value={ contextValue }>\n\t\t\t\t{ children }\n\t\t\t</AlertDialogContext.Provider>\n\t\t</_AlertDialog.Root>\n\t);\n}\n\nexport { Root };\n"],
+  "mappings": "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",
   "names": ["_AlertDialog"]
 }

package/build/alert-dialog/trigger.cjs

@@ -1,9 +1,7 @@
 "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)
@@ -17,28 +15,20 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/trigger.tsx
 var trigger_exports = {};
 __export(trigger_exports, {
-  Trigger: () => Trigger2
+  Trigger: () => Trigger
 });
 module.exports = __toCommonJS(trigger_exports);
+var import_alert_dialog = require("@base-ui/react/alert-dialog");
 var import_element = require("@wordpress/element");
-var Dialog = __toESM(require("../dialog/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var Trigger2 = (0, import_element.forwardRef)(
+var Trigger = (0, import_element.forwardRef)(
   function AlertDialogTrigger(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Trigger, { ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert_dialog.AlertDialog.Trigger, { ref, ...props });
   }
 );
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alert-dialog/trigger.tsx"],
-  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\n\nimport * as Dialog from '../dialog';\nimport type { TriggerProps } from './types';\n\n/**\n * Renders a button that opens the alert dialog when clicked.\n */\nconst Trigger = forwardRef< HTMLButtonElement, TriggerProps >(\n\tfunction AlertDialogTrigger( props, ref ) {\n\t\treturn <Dialog.Trigger ref={ ref } { ...props } />;\n\t}\n);\n\nexport { Trigger };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,iBAAAA;AAAA;AAAA;AAAA,qBAA2B;AAE3B,aAAwB;AAQf;AAFT,IAAMA,eAAU;AAAA,EACf,SAAS,mBAAoB,OAAO,KAAM;AACzC,WAAO,4CAAQ,gBAAP,EAAe,KAAc,GAAG,OAAQ;AAAA,EACjD;AACD;",
-  "names": ["Trigger"]
+  "sourcesContent": ["import { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';\nimport { forwardRef } from '@wordpress/element';\n\nimport type { TriggerProps } from './types';\n\n/**\n * Renders a button that opens the alert dialog when clicked.\n */\nconst Trigger = forwardRef< HTMLButtonElement, TriggerProps >(\n\tfunction AlertDialogTrigger( props, ref ) {\n\t\treturn <_AlertDialog.Trigger ref={ ref } { ...props } />;\n\t}\n);\n\nexport { Trigger };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4C;AAC5C,qBAA2B;AASlB;AAFT,IAAM,cAAU;AAAA,EACf,SAAS,mBAAoB,OAAO,KAAM;AACzC,WAAO,4CAAC,oBAAAA,YAAa,SAAb,EAAqB,KAAc,GAAG,OAAQ;AAAA,EACvD;AACD;",
+  "names": ["_AlertDialog"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alert-dialog/types.ts"],
-  "sourcesContent": ["import type { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';\nimport type { ReactNode } from 'react';\n\nimport type { TriggerProps as DialogTriggerProps } from '../dialog/types';\n\nexport interface RootProps\n\textends Pick<\n\t\t_AlertDialog.Root.Props,\n\t\t'open' | 'onOpenChange' | 'defaultOpen'\n\t> {\n\t/**\n\t * The content to be rendered inside the component. Typically includes\n\t * `AlertDialog.Trigger` and `AlertDialog.Popup`.\n\t */\n\tchildren: ReactNode;\n\n\t/**\n\t * The semantic intent of the dialog, which determines its styling.\n\t *\n\t * All intents use `role=\"alertdialog\"`, are always modal, and block\n\t * backdrop click dismissal. Escape key and the cancel/confirm buttons\n\t * still dismiss the dialog.\n\t *\n\t * - `'default'`: Standard confirmation dialog for reversible actions.\n\t * - `'irreversible'`: Confirmation dialog for irreversible actions that\n\t *   cannot be undone. The confirm button uses error/danger coloring.\n\t *\n\t * @default 'default'\n\t */\n\tintent?: 'default' | 'irreversible';\n}\n\nexport type TriggerProps = DialogTriggerProps;\n\nexport interface PopupProps {\n\t/**\n\t * The title displayed in the dialog header. This serves as both the\n\t * visible heading and the accessible label for the dialog.\n\t */\n\ttitle: string;\n\n\t/**\n\t * The message content displayed in the dialog body.\n\t */\n\tchildren: ReactNode;\n\n\t/**\n\t * Callback fired when the user confirms the action.\n\t */\n\tonConfirm: () => void;\n\n\t/**\n\t * Custom text for the confirm button.\n\t *\n\t * @default 'OK'\n\t */\n\tconfirmButtonText?: string;\n\n\t/**\n\t * Custom text for the cancel button.\n\t *\n\t * @default 'Cancel'\n\t */\n\tcancelButtonText?: string;\n\n\t/**\n\t * Whether the confirm action is in a loading state (e.g. an async\n\t * operation is in progress). When `true`, the confirm button shows a\n\t * spinner and the cancel button is disabled.\n\t *\n\t * **Important:** Passing this prop \u2014 even as `false` \u2014 opts into\n\t * manual-close mode: the confirm button will no longer auto-close the\n\t * dialog. The consumer is responsible for setting `open={false}` when\n\t * the operation completes. Omit the prop entirely for the default\n\t * auto-close-on-confirm behavior.\n\t *\n\t * To implement an async confirm flow, use controlled mode\n\t * (`open` / `onOpenChange`) and manage the loading state externally:\n\t * prevent closing in `onOpenChange` while loading, and set\n\t * `open={false}` once the operation completes.\n\t */\n\tloading?: boolean;\n}\n"],
+  "sourcesContent": ["import type { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';\nimport type { ReactNode } from 'react';\n\nimport type { ComponentProps } from '../utils/types';\n\n/**\n * The return type of `onConfirm`. Return `void` (or nothing) to auto-close\n * the dialog after the confirm handler completes. Return `{ close: false }`\n * to keep the dialog open (e.g. for validation errors).\n *\n * Return `{ error: '...' }` to display a built-in error message below the\n * action buttons. When `error` is provided, the dialog stays open\n * regardless of the `close` value.\n */\nexport type ConfirmResult = void | { close?: boolean; error?: string };\n\nexport interface RootProps\n\textends Pick<\n\t\t_AlertDialog.Root.Props,\n\t\t'open' | 'onOpenChange' | 'defaultOpen'\n\t> {\n\t/**\n\t * The content to be rendered inside the component. Typically includes\n\t * `AlertDialog.Trigger` and `AlertDialog.Popup`.\n\t */\n\tchildren: ReactNode;\n\n\t/**\n\t * Callback fired when the user confirms the action.\n\t *\n\t * - Synchronous handlers: the dialog closes immediately after the\n\t *   handler returns.\n\t * - Async handlers: the dialog enters a \"pending\" state (buttons\n\t *   disabled, spinner shown on the confirm button) until the promise\n\t *   settles.\n\t *\n\t * Return `{ close: false }` to keep the dialog open after the handler\n\t * completes (e.g. for server-side validation). Return `void` or\n\t * `{ close: true }` to close the dialog (the default).\n\t *\n\t * Return `{ error: '...' }` to show a built-in error message below\n\t * the action buttons. The dialog stays open regardless of the `close`\n\t * value. The error is announced to screen readers and is automatically\n\t * cleared on the next confirm attempt or when the dialog reopens.\n\t *\n\t * If the promise rejects (or the handler throws) without returning an\n\t * `error`, the dialog stays open and returns to idle without showing\n\t * a visible error message. The error is logged to the console.\n\t * To show a user-facing message on failure, catch the error and\n\t * return `{ close: false, error: '...' }`.\n\t */\n\tonConfirm?: () => ConfirmResult | Promise< ConfirmResult >;\n}\n\nexport interface TriggerProps extends ComponentProps< 'button' > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface PopupProps\n\textends ComponentProps< 'div' >,\n\t\tPick< _AlertDialog.Popup.Props, 'initialFocus' | 'finalFocus' > {\n\t/**\n\t * The semantic intent of the dialog, which determines its styling.\n\t *\n\t * All intents use `role=\"alertdialog\"`, are always modal, and block\n\t * backdrop click dismissal. Escape key and the cancel/confirm buttons\n\t * still dismiss the dialog.\n\t *\n\t * - `'default'`: Standard confirmation dialog for reversible actions.\n\t * - `'irreversible'`: Confirmation dialog for irreversible actions that\n\t *   cannot be undone. The confirm button uses error/danger coloring.\n\t *\n\t * @default 'default'\n\t */\n\tintent?: 'default' | 'irreversible';\n\n\t/**\n\t * The title displayed in the dialog header. This serves as both the\n\t * visible heading and the accessible label (`aria-labelledby`) for the\n\t * dialog. Must be a plain string to ensure a predictable accessible name.\n\t */\n\ttitle: string;\n\n\t/**\n\t * An optional description displayed below the title. Rendered using\n\t * Base UI's `AlertDialog.Description` for proper `aria-describedby`\n\t * association with the dialog. Must be a plain string to ensure a\n\t * predictable accessible description.\n\t */\n\tdescription?: string;\n\n\t/**\n\t * Optional body content displayed between the description and the\n\t * action buttons. Use for supplementary details or form fields.\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * Custom text for the confirm button.\n\t *\n\t * @default 'OK'\n\t */\n\tconfirmButtonText?: string;\n\n\t/**\n\t * Custom text for the cancel button.\n\t *\n\t * @default 'Cancel'\n\t */\n\tcancelButtonText?: string;\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }