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

package/build/utils/use-deprioritized-initial-focus.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/use-deprioritized-initial-focus.ts"],
-  "sourcesContent": ["import type { Dialog as _Dialog } from '@base-ui/react/dialog';\nimport { useMemo, useRef } from '@wordpress/element';\nimport { tabbable } from 'tabbable';\n\n/**\n * Derived from Base UI's `Dialog.Popup.Props['initialFocus']`.\n * The same type is shared by all Base UI overlay popups (Dialog, Popover, etc.).\n */\ntype InitialFocus = _Dialog.Popup.Props[ 'initialFocus' ];\n\n/**\n * Options matching Base UI's internal tabbable configuration.\n * @see https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/utils/tabbable.ts\n */\nconst getTabbableOptions = () => ( {\n\tgetShadowRoot: true,\n\tdisplayCheck:\n\t\ttypeof ResizeObserver === 'function' &&\n\t\tResizeObserver.toString().includes( '[native code]' )\n\t\t\t? ( 'full' as const )\n\t\t\t: ( 'none' as const ),\n} );\n\n/**\n * Returns a resolved `initialFocus` value that deprioritizes elements\n * marked with a given data attribute (e.g. a close icon), and an internal\n * ref that must be merged onto the popup element.\n *\n * When `initialFocus` is `undefined` or `true` (the default behavior),\n * the hook replaces it with a callback that:\n * 1. On touch interactions \u2014 focuses the popup element itself (preventing\n *    the virtual keyboard on Android), matching Base UI's default.\n * 2. On other interactions \u2014 returns the first tabbable element that does\n *    *not* carry `deprioritizedAttribute`. Falls back to Base UI's default\n *    when the deprioritized element is the only tabbable element.\n *\n * All other `initialFocus` values (`false`, `RefObject`, callback) pass\n * through unchanged.\n *\n * @param props\n * @param props.initialFocus           The consumer-provided `initialFocus` value.\n * @param props.deprioritizedAttribute The data attribute whose elements should be deprioritized.\n */\nexport function useDeprioritizedInitialFocus( {\n\tinitialFocus,\n\tdeprioritizedAttribute,\n}: {\n\tinitialFocus: InitialFocus;\n\tdeprioritizedAttribute: string;\n} ) {\n\tconst popupRef = useRef< HTMLDivElement >( null );\n\n\tconst resolvedInitialFocus = useMemo( (): InitialFocus => {\n\t\tif ( initialFocus !== undefined && initialFocus !== true ) {\n\t\t\treturn initialFocus;\n\t\t}\n\n\t\treturn ( interactionType ): HTMLElement | boolean | null => {\n\t\t\tif ( interactionType === 'touch' ) {\n\t\t\t\treturn popupRef.current ?? true;\n\t\t\t}\n\n\t\t\tconst popup = popupRef.current;\n\t\t\tif ( ! popup ) {\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\tconst tabbables = tabbable( popup, getTabbableOptions() );\n\t\t\tfor ( const el of tabbables ) {\n\t\t\t\tif (\n\t\t\t\t\tel instanceof HTMLElement &&\n\t\t\t\t\t! el.hasAttribute( deprioritizedAttribute )\n\t\t\t\t) {\n\t\t\t\t\treturn el;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn true;\n\t\t};\n\t}, [ initialFocus, deprioritizedAttribute ] );\n\n\treturn { resolvedInitialFocus, popupRef };\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,qBAAgC;AAChC,sBAAyB;AAYzB,IAAM,qBAAqB,OAAQ;AAAA,EAClC,eAAe;AAAA,EACf,cACC,OAAO,mBAAmB,cAC1B,eAAe,SAAS,EAAE,SAAU,eAAgB,IAC/C,SACA;AACP;AAsBO,SAAS,6BAA8B;AAAA,EAC7C;AAAA,EACA;AACD,GAGI;AACH,QAAM,eAAW,uBAA0B,IAAK;AAEhD,QAAM,2BAAuB,wBAAS,MAAoB;AACzD,QAAK,iBAAiB,UAAa,iBAAiB,MAAO;AAC1D,aAAO;AAAA,IACR;AAEA,WAAO,CAAE,oBAAmD;AAC3D,UAAK,oBAAoB,SAAU;AAClC,eAAO,SAAS,WAAW;AAAA,MAC5B;AAEA,YAAM,QAAQ,SAAS;AACvB,UAAK,CAAE,OAAQ;AACd,eAAO;AAAA,MACR;AAEA,YAAM,gBAAY,0BAAU,OAAO,mBAAmB,CAAE;AACxD,iBAAY,MAAM,WAAY;AAC7B,YACC,cAAc,eACd,CAAE,GAAG,aAAc,sBAAuB,GACzC;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,EACD,GAAG,CAAE,cAAc,sBAAuB,CAAE;AAE5C,SAAO,EAAE,sBAAsB,SAAS;AACzC;",
+  "sourcesContent": ["import type { Popover as _Popover } from '@base-ui/react/popover';\nimport { useMemo, useRef } from '@wordpress/element';\nimport { tabbable } from 'tabbable';\n\n/**\n * The `initialFocus` type shared by Base UI overlay popups (Dialog, Popover,\n * AlertDialog, etc.). We derive it from `Popover.Popup.Props` here, but it\n * is identical across all overlay components.\n */\ntype InitialFocus = _Popover.Popup.Props[ 'initialFocus' ];\n\n/**\n * Options matching Base UI's internal tabbable configuration.\n * @see https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/utils/tabbable.ts\n */\nconst getTabbableOptions = () => ( {\n\tgetShadowRoot: true,\n\tdisplayCheck:\n\t\ttypeof ResizeObserver === 'function' &&\n\t\tResizeObserver.toString().includes( '[native code]' )\n\t\t\t? ( 'full' as const )\n\t\t\t: ( 'none' as const ),\n} );\n\n/**\n * Returns a resolved `initialFocus` value that deprioritizes elements\n * marked with a given data attribute (e.g. a close icon), and an internal\n * ref that must be merged onto the popup element.\n *\n * When `initialFocus` is `undefined` or `true` (the default behavior),\n * the hook replaces it with a callback that:\n * 1. On touch interactions \u2014 focuses the popup element itself (preventing\n *    the virtual keyboard on Android), matching Base UI's default.\n * 2. On other interactions \u2014 returns the first tabbable element that does\n *    *not* carry `deprioritizedAttribute`. Falls back to Base UI's default\n *    when the deprioritized element is the only tabbable element.\n *\n * All other `initialFocus` values (`false`, `RefObject`, callback) pass\n * through unchanged.\n *\n * @param props\n * @param props.initialFocus           The consumer-provided `initialFocus` value.\n * @param props.deprioritizedAttribute The data attribute whose elements should be deprioritized.\n */\nexport function useDeprioritizedInitialFocus( {\n\tinitialFocus,\n\tdeprioritizedAttribute,\n}: {\n\tinitialFocus: InitialFocus;\n\tdeprioritizedAttribute: string;\n} ) {\n\tconst popupRef = useRef< HTMLDivElement >( null );\n\n\tconst resolvedInitialFocus = useMemo( (): InitialFocus => {\n\t\tif ( initialFocus !== undefined && initialFocus !== true ) {\n\t\t\treturn initialFocus;\n\t\t}\n\n\t\treturn ( interactionType ): HTMLElement | boolean | null => {\n\t\t\tif ( interactionType === 'touch' ) {\n\t\t\t\treturn popupRef.current ?? true;\n\t\t\t}\n\n\t\t\tconst popup = popupRef.current;\n\t\t\tif ( ! popup ) {\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\tconst tabbables = tabbable( popup, getTabbableOptions() );\n\t\t\tfor ( const el of tabbables ) {\n\t\t\t\tif (\n\t\t\t\t\tel instanceof HTMLElement &&\n\t\t\t\t\t! el.hasAttribute( deprioritizedAttribute )\n\t\t\t\t) {\n\t\t\t\t\treturn el;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn true;\n\t\t};\n\t}, [ initialFocus, deprioritizedAttribute ] );\n\n\treturn { resolvedInitialFocus, popupRef };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,qBAAgC;AAChC,sBAAyB;AAazB,IAAM,qBAAqB,OAAQ;AAAA,EAClC,eAAe;AAAA,EACf,cACC,OAAO,mBAAmB,cAC1B,eAAe,SAAS,EAAE,SAAU,eAAgB,IAC/C,SACA;AACP;AAsBO,SAAS,6BAA8B;AAAA,EAC7C;AAAA,EACA;AACD,GAGI;AACH,QAAM,eAAW,uBAA0B,IAAK;AAEhD,QAAM,2BAAuB,wBAAS,MAAoB;AACzD,QAAK,iBAAiB,UAAa,iBAAiB,MAAO;AAC1D,aAAO;AAAA,IACR;AAEA,WAAO,CAAE,oBAAmD;AAC3D,UAAK,oBAAoB,SAAU;AAClC,eAAO,SAAS,WAAW;AAAA,MAC5B;AAEA,YAAM,QAAQ,SAAS;AACvB,UAAK,CAAE,OAAQ;AACd,eAAO;AAAA,MACR;AAEA,YAAM,gBAAY,0BAAU,OAAO,mBAAmB,CAAE;AACxD,iBAAY,MAAM,WAAY;AAC7B,YACC,cAAc,eACd,CAAE,GAAG,aAAc,sBAAuB,GACzC;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,EACD,GAAG,CAAE,cAAc,sBAAuB,CAAE;AAE5C,SAAO,EAAE,sBAAsB,SAAS;AACzC;",
   "names": []
 }

package/build-module/alert-dialog/context.mjs

@@ -1,7 +1,12 @@
 // packages/ui/src/alert-dialog/context.tsx
 import { createContext } from "@wordpress/element";
+var noop = async () => {
+};
 var AlertDialogContext = createContext({
-  intent: "default"
+  phase: "idle",
+  showSpinner: false,
+  errorMessage: void 0,
+  confirm: noop
 });
 export {
   AlertDialogContext

package/build-module/alert-dialog/context.mjs.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,SAAS,qBAAqB;AAS9B,IAAM,qBAAqB,cAA0C;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,SAAS,qBAAqB;AAW9B,IAAM,OAAO,YAAY;AAAC;AAE1B,IAAM,qBAAqB,cAA0C;AAAA,EACpE,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAAS;AACV,CAAE;",
   "names": []
 }

package/build-module/alert-dialog/popup.mjs

@@ -1,58 +1,132 @@
 // packages/ui/src/alert-dialog/popup.tsx
+import { AlertDialog as _AlertDialog } from "@base-ui/react/alert-dialog";
+import clsx from "clsx";
 import { forwardRef, useContext } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
+import {
+  privateApis as themePrivateApis
+} from "@wordpress/theme";
 import { Button } from "../button/index.mjs";
-import * as Dialog from "../dialog/index.mjs";
+
+// 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
+import { unlock } from "../lock-unlock.mjs";
+import { Stack } from "../stack/index.mjs";
+import { Text } from "../text/index.mjs";
 import { AlertDialogContext } from "./context.mjs";
 
 // 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
 import { jsx, jsxs } from "react/jsx-runtime";
-var Popup2 = forwardRef(
+var ThemeProvider = unlock(themePrivateApis).ThemeProvider;
+var Popup = forwardRef(
   function AlertDialogPopup({
+    className,
+    intent = "default",
     title,
+    description,
     children,
-    onConfirm,
     confirmButtonText = __("OK"),
     cancelButtonText = __("Cancel"),
-    loading
+    ...props
   }, ref) {
-    const { intent } = useContext(AlertDialogContext);
-    const ConfirmButton = loading !== void 0 ? Button : Dialog.Action;
-    return /* @__PURE__ */ jsxs(Dialog.Popup, { ref, children: [
-      /* @__PURE__ */ jsx(Dialog.Header, { children: /* @__PURE__ */ jsx(Dialog.Title, { children: title }) }),
-      children,
-      /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
-        /* @__PURE__ */ jsx(
-          Dialog.Action,
-          {
-            variant: "minimal",
-            disabled: loading || void 0,
-            children: cancelButtonText
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ConfirmButton,
-          {
-            className: intent === "irreversible" ? style_default["irreversible-action"] : void 0,
-            onClick: onConfirm,
-            loading,
-            children: confirmButtonText
-          }
-        )
-      ] })
+    const { phase, showSpinner, errorMessage, confirm } = useContext(AlertDialogContext);
+    const confirmClassName = intent === "irreversible" ? style_default2["irreversible-action"] : void 0;
+    const buttonsDisabled = phase !== "idle" || void 0;
+    return /* @__PURE__ */ jsxs(_AlertDialog.Portal, { children: [
+      /* @__PURE__ */ jsx(_AlertDialog.Backdrop, { className: style_default.backdrop }),
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(
+        _AlertDialog.Popup,
+        {
+          ref,
+          className: clsx(
+            style_default.popup,
+            className,
+            style_default["is-medium"]
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "column",
+                gap: "sm",
+                className: style_default2.header,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      variant: "heading-xl",
+                      render: /* @__PURE__ */ jsx(_AlertDialog.Title, {}),
+                      className: style_default.title,
+                      children: title
+                    }
+                  ),
+                  description && /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      variant: "body-md",
+                      render: /* @__PURE__ */ jsx(_AlertDialog.Description, {}),
+                      children: description
+                    }
+                  )
+                ]
+              }
+            ),
+            children,
+            /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "md", children: [
+              /* @__PURE__ */ jsxs("div", { className: style_default.footer, children: [
+                /* @__PURE__ */ jsx(
+                  _AlertDialog.Close,
+                  {
+                    render: /* @__PURE__ */ jsx(Button, { variant: "minimal" }),
+                    disabled: buttonsDisabled,
+                    children: cancelButtonText
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: confirmClassName,
+                    onClick: confirm,
+                    loading: showSpinner || void 0,
+                    disabled: buttonsDisabled,
+                    children: confirmButtonText
+                  }
+                )
+              ] }),
+              errorMessage && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  variant: "body-sm",
+                  className: style_default2["error-message"],
+                  children: errorMessage
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
     ] });
   }
 );
 export {
-  Popup2 as Popup
+  Popup
 };
 //# sourceMappingURL=popup.mjs.map

package/build-module/alert-dialog/popup.mjs.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,SAAS,YAAY,kBAAkB;AACvC,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,YAAY,YAAY;AACxB,SAAS,0BAA0B;;;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,cAGD,YAHC;AAtBL,IAAMA,SAAQ;AAAA,EACb,SAAS,iBACR;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,GAAI,IAAK;AAAA,IAC7B,mBAAmB,GAAI,QAAS;AAAA,IAChC;AAAA,EACD,GACA,KACC;AACD,UAAM,EAAE,OAAO,IAAI,WAAY,kBAAmB;AAKlD,UAAM,gBAAgB,YAAY,SAAY,SAAgB;AAE9D,WACC,qBAAQ,cAAP,EAAa,KACb;AAAA,0BAAQ,eAAP,EACA,8BAAQ,cAAP,EAAe,iBAAO,GACxB;AAAA,MACE;AAAA,MACF,qBAAQ,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"]
+  "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": ";AAAA,SAAS,eAAe,oBAAoB;AAC5C,OAAO,UAAU;AACjB,SAAS,YAAY,kBAAkB;AACvC,SAAS,UAAU;AACnB;AAAA,EAEC,eAAe;AAAA,OACT;AAEP,SAAS,cAAc;;;ACTvB,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,0jFAAskF,CAAC;AACjnF,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,YAAW,+BAA8B,SAAQ,4BAA2B,YAAW,+BAA8B,aAAY,gCAA+B,YAAW,+BAA8B,cAAa,gCAA+B,WAAU,6BAA4B,UAAS,6BAA4B,SAAQ,2BAA0B,UAAS,4BAA2B;;;ADKtZ,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,0BAA0B;;;AEdnC,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,itBAAitB,CAAC;AAC5vB,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAOA,iBAAQ,EAAC,UAAS,6BAA4B,iBAAgB,mCAAkC,uBAAsB,yCAAwC;;;AFyCjK,cAWE,YAXF;AA7BJ,IAAM,gBACL,OAAQ,gBAAiB,EAAE;AAE5B,IAAM,QAAQ;AAAA,EACb,SAAS,iBACR;AAAA,IACC;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,GAAI,IAAK;AAAA,IAC7B,mBAAmB,GAAI,QAAS;AAAA,IAChC,GAAG;AAAA,EACJ,GACA,KACC;AACD,UAAM,EAAE,OAAO,aAAa,cAAc,QAAQ,IACjD,WAAY,kBAAmB;AAEhC,UAAM,mBACL,WAAW,iBACRC,eAAmB,qBAAsB,IACzC;AAEJ,UAAM,kBAAkB,UAAU,UAAU;AAE5C,WACC,qBAAC,aAAa,QAAb,EACA;AAAA,0BAAC,aAAa,UAAb,EAAsB,WAAY,cAAa,UAAW;AAAA,MAC3D,oBAAC,iBACA;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACA;AAAA,UACA,WAAY;AAAA,YACX,cAAa;AAAA,YACb;AAAA,YACA,cAAc,WAAY;AAAA,UAC3B;AAAA,UACE,GAAG;AAAA,UAEL;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,KAAI;AAAA,gBACJ,WAAYA,eAAkB;AAAA,gBAE9B;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACA,SAAQ;AAAA,sBACR,QAAS,oBAAC,aAAa,OAAb,EAAmB;AAAA,sBAC7B,WAAY,cAAa;AAAA,sBAEvB;AAAA;AAAA,kBACH;AAAA,kBACE,eACD;AAAA,oBAAC;AAAA;AAAA,sBACA,SAAQ;AAAA,sBACR,QAAS,oBAAC,aAAa,aAAb,EAAyB;AAAA,sBAEjC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YAEF;AAAA,YACE;AAAA,YACF,qBAAC,SAAM,WAAU,UAAS,KAAI,MAC7B;AAAA,mCAAC,SAAI,WAAY,cAAa,QAC7B;AAAA;AAAA,kBAAC,aAAa;AAAA,kBAAb;AAAA,oBACA,QAAS,oBAAC,UAAO,SAAQ,WAAU;AAAA,oBACnC,UAAW;AAAA,oBAET;AAAA;AAAA,gBACH;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACA,WAAY;AAAA,oBACZ,SAAU;AAAA,oBACV,SAAU,eAAe;AAAA,oBACzB,UAAW;AAAA,oBAET;AAAA;AAAA,gBACH;AAAA,iBACD;AAAA,cACE,gBACD;AAAA,gBAAC;AAAA;AAAA,kBACA,SAAQ;AAAA,kBACR,WACCA,eAAmB,eAAgB;AAAA,kBAGlC;AAAA;AAAA,cACH;AAAA,eAEF;AAAA;AAAA;AAAA,MACD,GACD;AAAA,OACD;AAAA,EAEF;AACD;",
+  "names": ["style_default", "style_default"]
 }

package/build-module/alert-dialog/root.mjs

@@ -1,22 +1,128 @@
 // packages/ui/src/alert-dialog/root.tsx
 import { AlertDialog as _AlertDialog } from "@base-ui/react/alert-dialog";
-import { useMemo } from "@wordpress/element";
+import { speak } from "@wordpress/a11y";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "@wordpress/element";
 import { AlertDialogContext } from "./context.mjs";
 import { jsx } from "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 = useMemo(() => ({ intent }), [intent]);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+  const [phase, setPhase] = useState("idle");
+  const [showSpinner, setShowSpinner] = useState(false);
+  const [errorMessage, setErrorMessage] = useState();
+  const actionsRef = useRef(null);
+  const onConfirmRef = useRef(onConfirm);
+  onConfirmRef.current = onConfirm;
+  const phaseRef = useRef(phase);
+  phaseRef.current = phase;
+  const confirmIdRef = useRef(0);
+  const effectiveOpen = openProp ?? internalOpen;
+  useEffect(() => {
+    if (effectiveOpen && phase === "closing") {
+      phaseRef.current = "idle";
+      setPhase("idle");
+      setShowSpinner(false);
+    }
+  }, [effectiveOpen, phase]);
+  const handleOpenChange = 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 = 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);
+        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 = useCallback((open) => {
+    if (!open) {
+      confirmIdRef.current++;
+      phaseRef.current = "idle";
+      setPhase("idle");
+      setShowSpinner(false);
+      setErrorMessage(void 0);
+    }
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      phase,
+      showSpinner,
+      errorMessage,
+      confirm
+    }),
+    [phase, showSpinner, errorMessage, confirm]
+  );
   return /* @__PURE__ */ jsx(
     _AlertDialog.Root,
     {
-      open,
-      onOpenChange,
+      open: effectiveOpen,
       defaultOpen,
+      onOpenChange: handleOpenChange,
+      onOpenChangeComplete: handleOpenChangeComplete,
+      actionsRef,
       children: /* @__PURE__ */ jsx(AlertDialogContext.Provider, { value: contextValue, children })
     }
   );

package/build-module/alert-dialog/root.mjs.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,SAAS,eAAe,oBAAoB;AAC5C,SAAS,eAAe;AACxB,SAAS,0BAA0B;AAsChC;AAfH,SAAS,KAAM;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAe;AACd,QAAM,eAAe,QAAS,OAAQ,EAAE,OAAO,IAAK,CAAE,MAAO,CAAE;AAE/D,SACC;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,mBAAmB,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": []
 }

package/build-module/alert-dialog/trigger.mjs

@@ -1,13 +1,13 @@
 // packages/ui/src/alert-dialog/trigger.tsx
+import { AlertDialog as _AlertDialog } from "@base-ui/react/alert-dialog";
 import { forwardRef } from "@wordpress/element";
-import * as Dialog from "../dialog/index.mjs";
 import { jsx } from "react/jsx-runtime";
-var Trigger2 = forwardRef(
+var Trigger = forwardRef(
   function AlertDialogTrigger(props, ref) {
-    return /* @__PURE__ */ jsx(Dialog.Trigger, { ref, ...props });
+    return /* @__PURE__ */ jsx(_AlertDialog.Trigger, { ref, ...props });
   }
 );
 export {
-  Trigger2 as Trigger
+  Trigger
 };
 //# sourceMappingURL=trigger.mjs.map

package/build-module/alert-dialog/trigger.mjs.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,SAAS,kBAAkB;AAE3B,YAAY,YAAY;AAQf;AAFT,IAAMA,WAAU;AAAA,EACf,SAAS,mBAAoB,OAAO,KAAM;AACzC,WAAO,oBAAQ,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,SAAS,eAAe,oBAAoB;AAC5C,SAAS,kBAAkB;AASlB;AAFT,IAAM,UAAU;AAAA,EACf,SAAS,mBAAoB,OAAO,KAAM;AACzC,WAAO,oBAAC,aAAa,SAAb,EAAqB,KAAc,GAAG,OAAQ;AAAA,EACvD;AACD;",
+  "names": []
 }

package/build-module/button/button.mjs

@@ -6,10 +6,10 @@ import { forwardRef, useEffect } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 
 // packages/ui/src/button/style.module.css
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='5ffeec2cd6']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='0606ead380']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "5ffeec2cd6");
-  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 93%,#000));--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled,#e2e2e2);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong,#fff);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active,#fff);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled,#8a8a8a);--wp-ui-button-padding-inline:var(--wpds-dimension-padding-md,12px);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md,13px);--wp-ui-button-min-width:calc(4ch + var(--wp-ui-button-padding-inline)*2);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm,2px);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);cursor:var(--wpds-cursor-control,pointer);display:inline-flex;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(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:var(--wpds-dimension-gap-sm,8px);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm,20px);min-width:var(--wp-ui-button-min-width);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([data-disabled]):is(:hover,:active,:focus){background-color:var(--wp-ui-button-background-color-active);border-color:var(--wp-ui-button-border-color-active);color:var(--wp-ui-button-foreground-color-active)}&[data-disabled]:not(._914b42f315c0e580__is-loading){background-color:var(--wp-ui-button-background-color-disabled);border-color:var(--wp-ui-button-border-color-disabled);color:var(--wp-ui-button-foreground-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:"";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:var(--wpds-dimension-padding-sm,8px);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 12%,#fff));--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled,#0000);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 85%,#000));--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled,#d8d8d8)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 12%,#fff));--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled,#0000)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong,#2d2d2d);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active,#1e1e1e);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled,#e2e2e2);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong,#f0f0f0);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active,#f0f0f0);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled,#8a8a8a)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral,#1e1e1e);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active,#1e1e1e);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active,#eaeaea);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled,#0000);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral,#8a8a8a);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active,#6c6c6c);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled,#d8d8d8)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active,#eaeaea);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled,#0000)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none;min-width:unset}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;&:not([data-disabled]):is(:hover,:active,:focus){color:#0000}*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong,#2d2d2d);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong,#2d2d2d);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong,#f0f0f0);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong,#f0f0f0)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}'));
+  style.setAttribute("data-wp-hash", "0606ead380");
+  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 93%,#000));--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled,#e2e2e2);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong,#fff);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active,#fff);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled,#8a8a8a);--wp-ui-button-padding-inline:var(--wpds-dimension-padding-md,12px);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md,13px);--wp-ui-button-min-width:calc(4ch + var(--wp-ui-button-padding-inline)*2);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);--_gcd-button-font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);--_gcd-button-font-size:var(--wp-ui-button-font-size);--_gcd-button-font-weight:var(--wp-ui-button-font-weight);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm,2px);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);cursor:var(--wpds-cursor-control,pointer);display:inline-flex;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(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:var(--wpds-dimension-gap-sm,8px);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm,20px);min-width:var(--wp-ui-button-min-width);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([data-disabled]):is(:hover,:active,:focus){background-color:var(--wp-ui-button-background-color-active);border-color:var(--wp-ui-button-border-color-active);color:var(--wp-ui-button-foreground-color-active)}&[data-disabled]:not(._914b42f315c0e580__is-loading){background-color:var(--wp-ui-button-background-color-disabled);border-color:var(--wp-ui-button-border-color-disabled);color:var(--wp-ui-button-foreground-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:"";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:var(--wpds-dimension-padding-sm,8px);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 12%,#fff));--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled,#0000);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand,var(--wp-admin-theme-color,#3858e9));--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 85%,#000));--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled,#d8d8d8)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 12%,#fff));--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled,#0000)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong,#2d2d2d);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active,#1e1e1e);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled,#e2e2e2);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong,#f0f0f0);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active,#f0f0f0);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled,#8a8a8a)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral,#1e1e1e);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active,#1e1e1e);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active,#eaeaea);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled,#0000);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral,#8a8a8a);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active,#6c6c6c);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled,#d8d8d8)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak,#0000);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active,#eaeaea);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled,#0000)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none;min-width:unset}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;&:not([data-disabled]):is(:hover,:active,:focus){color:#0000}*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong,#2d2d2d);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong,#2d2d2d);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong,#f0f0f0);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong,#f0f0f0)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}'));
   document.head.appendChild(style);
 }
 var style_default = { "button": "_97b0fc33c028be1a__button", "is-unstyled": "abbb272e2ce49bd6__is-unstyled", "is-loading": "_914b42f315c0e580__is-loading", "is-small": "_908205475f9f2a92__is-small", "is-brand": "dd460c965226cc77__is-brand", "is-outline": "_62d5a778b7b258ee__is-outline", "is-minimal": "ad0619a3217c6a5b__is-minimal", "is-neutral": "e722a8f96726aa99__is-neutral", "is-solid": "b50b3358c5fb4d0b__is-solid", "is-compact": "cf59cf1b69629838__is-compact", "loading-animation": "_5a1d53da6f830c8d__loading-animation" };
@@ -24,14 +24,23 @@ if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !docum
 var resets_default = { "box-sizing": "_336cd3e4e743482f__box-sizing" };
 
 // packages/ui/src/utils/css/focus.module.css
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='4acd2b57a1']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='2a5ab8f3a7']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "4acd2b57a1");
-  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._08e8a2e44959f892__outset-ring--focus,._970d04df7376df67__outset-ring--focus-within-except-active,.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible,.cd83dfc2126a0846__outset-ring--focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active,.ecadb9e080e2dfa5__outset-ring--focus-parent-visible{@media not (prefers-reduced-motion){transition:outline .1s ease-out}outline-color:#0000;outline-offset:1px;outline-style:solid;outline-width:0}._08e8a2e44959f892__outset-ring--focus:focus,._970d04df7376df67__outset-ring--focus-within-except-active:focus-within:not(:has(:active)),.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible:focus-within:has(:focus-visible),.cd83dfc2126a0846__outset-ring--focus-within:focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible:focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active:focus:not(:active),:focus-visible .ecadb9e080e2dfa5__outset-ring--focus-parent-visible{outline-color:var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));outline-width:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}}"));
+  style.setAttribute("data-wp-hash", "2a5ab8f3a7");
+  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._08e8a2e44959f892__outset-ring--focus,._970d04df7376df67__outset-ring--focus-within-except-active,.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible,.cd83dfc2126a0846__outset-ring--focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active,.ecadb9e080e2dfa5__outset-ring--focus-parent-visible{@media not (prefers-reduced-motion){--_gcd-a-transition:outline 0.1s ease-out;transition:outline .1s ease-out}outline:0 solid #0000;outline-offset:1px}._08e8a2e44959f892__outset-ring--focus:focus,._970d04df7376df67__outset-ring--focus-within-except-active:focus-within:not(:has(:active)),.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible:focus-within:has(:focus-visible),.cd83dfc2126a0846__outset-ring--focus-within:focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible:focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active:focus:not(:active),:focus-visible .ecadb9e080e2dfa5__outset-ring--focus-parent-visible{--_gcd-a-outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));--_gcd-div-outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9))}}"));
   document.head.appendChild(style);
 }
 var focus_default = { "outset-ring--focus": "_08e8a2e44959f892__outset-ring--focus", "outset-ring--focus-except-active": "e25b2bdd7aa21721__outset-ring--focus-except-active", "outset-ring--focus-visible": "d0541bc9dd9dc7b6__outset-ring--focus-visible", "outset-ring--focus-within": "cd83dfc2126a0846__outset-ring--focus-within", "outset-ring--focus-within-except-active": "_970d04df7376df67__outset-ring--focus-within-except-active", "outset-ring--focus-within-visible": "c5cb3ee4bddaa8e4__outset-ring--focus-within-visible", "outset-ring--focus-parent-visible": "ecadb9e080e2dfa5__outset-ring--focus-parent-visible" };
 
+// packages/ui/src/utils/css/global-css-defense.module.css
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='3bd1d35622']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "3bd1d35622");
+  style.appendChild(document.createTextNode("._6defc79820e382c6__button{box-sizing:var(--_gcd-button-box-sizing,border-box);font-family:var(--_gcd-button-font-family,inherit);font-size:var(--_gcd-button-font-size,inherit);font-weight:var(--_gcd-button-font-weight,inherit)}.d2cff2e5dea83bd1__input{box-sizing:var(--_gcd-input-box-sizing,border-box);font-family:var(--_gcd-input-font-family,inherit);font-size:var(--_gcd-input-font-size,inherit);font-weight:var(--_gcd-input-font-weight,inherit);margin:var(--_gcd-input-margin,0);&:is(textarea,[type=text],[type=password],[type=color],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){background-color:var(--_gcd-input-background-color,#0000);border:var(--_gcd-input-border,none);border-radius:var(--_gcd-input-border-radius,0);box-shadow:var(--_gcd-input-box-shadow,0 0 0 #0000);color:var(--_gcd-input-color,var(--wpds-color-fg-interactive-neutral,#1e1e1e));&:focus{border-color:var(--_gcd-input-border-color-focus,var(--wp-admin-theme-color));box-shadow:var(--_gcd-input-box-shadow-focus,none);outline:var(--_gcd-input-outline-focus,none)}&:disabled{background:var(--_gcd-input-background-disabled,#0000);border-color:var(--_gcd-input-border-color-disabled,#0000);box-shadow:var(--_gcd-input-box-shadow-disabled,none);color:var(--_gcd-input-color-disabled,var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a))}&::placeholder{color:var(--_gcd-input-placeholder-color,var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a))}}&:is(textarea,[type=text],[type=password],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){line-height:var(--_gcd-input-line-height,inherit);min-height:var(--_gcd-input-min-height,auto);padding:var(--_gcd-input-padding,0)}}._547d86373d02e108__textarea{box-sizing:var(--_gcd-textarea-box-sizing,border-box);overflow:var(--_gcd-textarea-overflow,auto);resize:var(--_gcd-textarea-resize,block)}._8c15fd0ed9f28ba4__div{outline:var(--_gcd-div-outline,0 solid #0000)}p._43cec3e1eec1066d__p{font-size:var(--_gcd-p-font-size,13px);line-height:var(--_gcd-p-line-height,1.5);margin:var(--_gcd-p-margin,0)}:is(h1,h2,h3,h4,h5,h6).e97669c6d9a38497__heading{color:var(--_gcd-heading-color,var(--wpds-color-fg-content-neutral,#1e1e1e));font-size:var(--_gcd-heading-font-size,inherit);font-weight:var(--_gcd-heading-font-weight,var(--wpds-font-weight-medium,499));margin:var(--_gcd-heading-margin,0)}._2c0831b0499dbd6e__a,._2c0831b0499dbd6e__a:is(:hover,:focus,:active){border-radius:var(--_gcd-a-border-radius,0);box-shadow:var(--_gcd-a-box-shadow,none);color:var(--_gcd-a-color,inherit);outline:var(--_gcd-a-outline,0 solid #0000);transition:var(--_gcd-a-transition,none)}"));
+  document.head.appendChild(style);
+}
+var global_css_defense_default = { "button": "_6defc79820e382c6__button", "input": "d2cff2e5dea83bd1__input", "textarea": "_547d86373d02e108__textarea", "div": "_8c15fd0ed9f28ba4__div", "p": "_43cec3e1eec1066d__p", "heading": "e97669c6d9a38497__heading", "a": "_2c0831b0499dbd6e__a" };
+
 // packages/ui/src/button/button.tsx
 import { jsx } from "react/jsx-runtime";
 var Button = forwardRef(
@@ -48,6 +57,7 @@ var Button = forwardRef(
     ...props
   }, ref) {
     const mergedClassName = clsx(
+      global_css_defense_default.button,
       resets_default["box-sizing"],
       focus_default["outset-ring--focus-except-active"],
       variant !== "unstyled" && style_default.button,