@wordpress/ui 0.9.1-next.v.202603102151.0 → 0.10.0

package/build-module/card/title.mjs

@@ -1,27 +1,30 @@
 // packages/ui/src/card/title.tsx
-import { mergeProps, useRender } from "@base-ui/react";
 import { forwardRef } from "@wordpress/element";
+import clsx from "clsx";
+import { Text } from "../text/index.mjs";
 
 // packages/ui/src/card/style.module.css
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='f377a3cf09']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='d641b7e3ed']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "f377a3cf09");
-  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._02872bf298eadc43__root{--wp-ui-card-padding:var(--wpds-dimension-padding-xl,20px);--wp-ui-card-header-content-gap:var(--wpds-dimension-gap-lg,16px);background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-lg,8px);display:flex;flex-direction:column}._5dffdaf2a6e669ac__content,.bbccc92e6ba5662d__header{padding:var(--wp-ui-card-padding);&:not(:first-child):not(:last-child){padding-block-end:0}}.bbccc92e6ba5662d__header+._5dffdaf2a6e669ac__content{margin-block-start:calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));padding-block-start:0}.c1fa192587e1b4a6__fullbleed{margin-inline:calc(var(--wp-ui-card-padding)*-1);width:calc(100% + var(--wp-ui-card-padding)*2)}._3c83b3f0225d6364__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-lg,15px);font-weight:var(--wpds-font-weight-medium,499);line-height:var(--wpds-font-line-height-sm,20px);margin:0}}'));
+  style.setAttribute("data-wp-hash", "d641b7e3ed");
+  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._02872bf298eadc43__root{--wp-ui-card-padding:var(--wpds-dimension-padding-2xl,24px);--wp-ui-card-header-content-gap:var(--wpds-dimension-gap-xl,24px);--wp-ui-card-header-content-margin:calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-lg,8px);display:flex;flex-direction:column;overflow:clip}._5dffdaf2a6e669ac__content,.bbccc92e6ba5662d__header{padding:var(--wp-ui-card-padding);&:not(:first-child):not(:last-child){padding-block-end:0}}.bbccc92e6ba5662d__header+._5dffdaf2a6e669ac__content{margin-block-start:var(--wp-ui-card-header-content-margin);padding-block-start:0}.c1fa192587e1b4a6__fullbleed{margin-inline:calc(var(--wp-ui-card-padding)*-1);width:calc(100% + var(--wp-ui-card-padding)*2)}._3c83b3f0225d6364__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin:0}}"));
   document.head.appendChild(style);
 }
 var style_default = { "root": "_02872bf298eadc43__root", "header": "bbccc92e6ba5662d__header", "content": "_5dffdaf2a6e669ac__content", "fullbleed": "c1fa192587e1b4a6__fullbleed", "title": "_3c83b3f0225d6364__title" };
 
 // packages/ui/src/card/title.tsx
+import { jsx } from "react/jsx-runtime";
 var Title = forwardRef(
-  function CardTitle({ render, ...props }, ref) {
-    const element = useRender({
-      defaultTagName: "div",
-      render,
-      ref,
-      // TODO: use `Text` component instead, when ready
-      props: mergeProps({ className: style_default.title }, props)
-    });
-    return element;
+  function CardTitle({ className, render, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "heading-lg",
+        render: render ?? /* @__PURE__ */ jsx("div", { ref, ...props }),
+        className: clsx(style_default.title, className),
+        children
+      }
+    );
   }
 );
 export {

package/build-module/card/title.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/card/title.tsx", "../../src/card/style.module.css"],
-  "sourcesContent": ["import { mergeProps, useRender } from '@base-ui/react';\nimport { forwardRef } from '@wordpress/element';\nimport styles from './style.module.css';\nimport type { TitleProps } from './types';\n\n/**\n * The title for a card. Renders as a `<div>` by default \u2014 use the `render`\n * prop to swap in a semantic heading element when appropriate.\n */\nexport const Title = forwardRef< HTMLDivElement, TitleProps >(\n\tfunction CardTitle( { render, ...props }, ref ) {\n\t\tconst element = useRender( {\n\t\t\tdefaultTagName: 'div',\n\t\t\trender,\n\t\t\tref,\n\t\t\t// TODO: use `Text` component instead, when ready\n\t\t\tprops: mergeProps< 'div' >( { className: styles.title }, props ),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='f377a3cf09']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"f377a3cf09\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._02872bf298eadc43__root{--wp-ui-card-padding:var(--wpds-dimension-padding-xl,20px);--wp-ui-card-header-content-gap:var(--wpds-dimension-gap-lg,16px);background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-lg,8px);display:flex;flex-direction:column}._5dffdaf2a6e669ac__content,.bbccc92e6ba5662d__header{padding:var(--wp-ui-card-padding);&:not(:first-child):not(:last-child){padding-block-end:0}}.bbccc92e6ba5662d__header+._5dffdaf2a6e669ac__content{margin-block-start:calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));padding-block-start:0}.c1fa192587e1b4a6__fullbleed{margin-inline:calc(var(--wp-ui-card-padding)*-1);width:calc(100% + var(--wp-ui-card-padding)*2)}._3c83b3f0225d6364__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-font-family-heading,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-font-size-lg,15px);font-weight:var(--wpds-font-weight-medium,499);line-height:var(--wpds-font-line-height-sm,20px);margin:0}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"root\":\"_02872bf298eadc43__root\",\"header\":\"bbccc92e6ba5662d__header\",\"content\":\"_5dffdaf2a6e669ac__content\",\"fullbleed\":\"c1fa192587e1b4a6__fullbleed\",\"title\":\"_3c83b3f0225d6364__title\"};\n"],
-  "mappings": ";AAAA,SAAS,YAAY,iBAAiB;AACtC,SAAS,kBAAkB;;;ACD3B,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,owCAAgxC,CAAC;AAC3zC,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,2BAA0B,UAAS,4BAA2B,WAAU,8BAA6B,aAAY,+BAA8B,SAAQ,2BAA0B;;;ADGjM,IAAM,QAAQ;AAAA,EACpB,SAAS,UAAW,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAM;AAC/C,UAAM,UAAU,UAAW;AAAA,MAC1B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA;AAAA,MAEA,OAAO,WAAqB,EAAE,WAAW,cAAO,MAAM,GAAG,KAAM;AAAA,IAChE,CAAE;AAEF,WAAO;AAAA,EACR;AACD;",
+  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport clsx from 'clsx';\nimport { Text } from '../text';\nimport styles from './style.module.css';\nimport type { TitleProps } from './types';\n\n/**\n * The title for a card. Renders as a `<div>` by default \u2014 use the `render`\n * prop to swap in a semantic heading element when appropriate.\n */\nexport const Title = forwardRef< HTMLDivElement, TitleProps >(\n\tfunction CardTitle( { className, render, children, ...props }, ref ) {\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tvariant=\"heading-lg\"\n\t\t\t\trender={ render ?? <div ref={ ref } { ...props } /> }\n\t\t\t\tclassName={ clsx( styles.title, className ) }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Text>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='d641b7e3ed']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"d641b7e3ed\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._02872bf298eadc43__root{--wp-ui-card-padding:var(--wpds-dimension-padding-2xl,24px);--wp-ui-card-header-content-gap:var(--wpds-dimension-gap-xl,24px);--wp-ui-card-header-content-margin:calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-lg,8px);display:flex;flex-direction:column;overflow:clip}._5dffdaf2a6e669ac__content,.bbccc92e6ba5662d__header{padding:var(--wp-ui-card-padding);&:not(:first-child):not(:last-child){padding-block-end:0}}.bbccc92e6ba5662d__header+._5dffdaf2a6e669ac__content{margin-block-start:var(--wp-ui-card-header-content-margin);padding-block-start:0}.c1fa192587e1b4a6__fullbleed{margin-inline:calc(var(--wp-ui-card-padding)*-1);width:calc(100% + var(--wp-ui-card-padding)*2)}._3c83b3f0225d6364__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin:0}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"root\":\"_02872bf298eadc43__root\",\"header\":\"bbccc92e6ba5662d__header\",\"content\":\"_5dffdaf2a6e669ac__content\",\"fullbleed\":\"c1fa192587e1b4a6__fullbleed\",\"title\":\"_3c83b3f0225d6364__title\"};\n"],
+  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,SAAS,YAAY;;;ACFrB,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,+jCAA+jC,CAAC;AAC1mC,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,2BAA0B,UAAS,4BAA2B,WAAU,8BAA6B,aAAY,+BAA8B,SAAQ,2BAA0B;;;ADSjL;AALhB,IAAM,QAAQ;AAAA,EACpB,SAAS,UAAW,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAM,GAAG,KAAM;AACpE,WACC;AAAA,MAAC;AAAA;AAAA,QACA,SAAQ;AAAA,QACR,QAAS,UAAU,oBAAC,SAAI,KAAc,GAAG,OAAQ;AAAA,QACjD,WAAY,KAAM,cAAO,OAAO,SAAU;AAAA,QAExC;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
   "names": []
 }

package/build-module/collapsible/index.mjs

@@ -0,0 +1,10 @@
+// packages/ui/src/collapsible/index.ts
+import { Panel } from "./panel.mjs";
+import { Root } from "./root.mjs";
+import { Trigger } from "./trigger.mjs";
+export {
+  Panel,
+  Root,
+  Trigger
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/collapsible/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/collapsible/index.ts"],
+  "sourcesContent": ["import { Panel } from './panel';\nimport { Root } from './root';\nimport { Trigger } from './trigger';\n\nexport { Root, Trigger, Panel };\n"],
+  "mappings": ";AAAA,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,eAAe;",
+  "names": []
+}

package/build-module/collapsible/panel.mjs

@@ -0,0 +1,13 @@
+// packages/ui/src/collapsible/panel.tsx
+import { Collapsible as _Collapsible } from "@base-ui/react/collapsible";
+import { forwardRef } from "@wordpress/element";
+import { jsx } from "react/jsx-runtime";
+var Panel = forwardRef(
+  function CollapsiblePanel(props, forwardedRef) {
+    return /* @__PURE__ */ jsx(_Collapsible.Panel, { ref: forwardedRef, ...props });
+  }
+);
+export {
+  Panel
+};
+//# sourceMappingURL=panel.mjs.map

package/build-module/collapsible/panel.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/collapsible/panel.tsx"],
+  "sourcesContent": ["import { Collapsible as _Collapsible } from '@base-ui/react/collapsible';\nimport { forwardRef } from '@wordpress/element';\nimport type { PanelProps } from './types';\n\n/**\n * A panel with the collapsible contents. Hidden when collapsed, visible\n * when expanded.\n *\n * `Collapsible` is a collection of React components that combine to render\n * a collapsible panel controlled by a button.\n */\nexport const Panel = forwardRef< HTMLDivElement, PanelProps >(\n\tfunction CollapsiblePanel( props, forwardedRef ) {\n\t\treturn <_Collapsible.Panel ref={ forwardedRef } { ...props } />;\n\t}\n);\n"],
+  "mappings": ";AAAA,SAAS,eAAe,oBAAoB;AAC5C,SAAS,kBAAkB;AAYlB;AAFF,IAAM,QAAQ;AAAA,EACpB,SAAS,iBAAkB,OAAO,cAAe;AAChD,WAAO,oBAAC,aAAa,OAAb,EAAmB,KAAM,cAAiB,GAAG,OAAQ;AAAA,EAC9D;AACD;",
+  "names": []
+}

package/build-module/collapsible/root.mjs

@@ -0,0 +1,13 @@
+// packages/ui/src/collapsible/root.tsx
+import { Collapsible as _Collapsible } from "@base-ui/react/collapsible";
+import { forwardRef } from "@wordpress/element";
+import { jsx } from "react/jsx-runtime";
+var Root = forwardRef(
+  function CollapsibleRoot(props, forwardedRef) {
+    return /* @__PURE__ */ jsx(_Collapsible.Root, { ref: forwardedRef, ...props });
+  }
+);
+export {
+  Root
+};
+//# sourceMappingURL=root.mjs.map

package/build-module/collapsible/root.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/collapsible/root.tsx"],
+  "sourcesContent": ["import { Collapsible as _Collapsible } from '@base-ui/react/collapsible';\nimport { forwardRef } from '@wordpress/element';\nimport type { RootProps } from './types';\n\n/**\n * Groups all parts of the collapsible.\n *\n * `Collapsible` is a collection of React components that combine to render\n * a collapsible panel controlled by a button.\n */\nexport const Root = forwardRef< HTMLDivElement, RootProps >(\n\tfunction CollapsibleRoot( props, forwardedRef ) {\n\t\treturn <_Collapsible.Root ref={ forwardedRef } { ...props } />;\n\t}\n);\n"],
+  "mappings": ";AAAA,SAAS,eAAe,oBAAoB;AAC5C,SAAS,kBAAkB;AAWlB;AAFF,IAAM,OAAO;AAAA,EACnB,SAAS,gBAAiB,OAAO,cAAe;AAC/C,WAAO,oBAAC,aAAa,MAAb,EAAkB,KAAM,cAAiB,GAAG,OAAQ;AAAA,EAC7D;AACD;",
+  "names": []
+}

package/build-module/collapsible/trigger.mjs

@@ -0,0 +1,13 @@
+// packages/ui/src/collapsible/trigger.tsx
+import { Collapsible as _Collapsible } from "@base-ui/react/collapsible";
+import { forwardRef } from "@wordpress/element";
+import { jsx } from "react/jsx-runtime";
+var Trigger = forwardRef(
+  function CollapsibleTrigger(props, forwardedRef) {
+    return /* @__PURE__ */ jsx(_Collapsible.Trigger, { ref: forwardedRef, ...props });
+  }
+);
+export {
+  Trigger
+};
+//# sourceMappingURL=trigger.mjs.map

package/build-module/collapsible/trigger.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/collapsible/trigger.tsx"],
+  "sourcesContent": ["import { Collapsible as _Collapsible } from '@base-ui/react/collapsible';\nimport { forwardRef } from '@wordpress/element';\nimport type { TriggerProps } from './types';\n\n/**\n * A button that opens and closes the collapsible panel.\n *\n * `Collapsible` is a collection of React components that combine to render\n * a collapsible panel controlled by a button.\n */\nexport const Trigger = forwardRef< HTMLButtonElement, TriggerProps >(\n\tfunction CollapsibleTrigger( props, forwardedRef ) {\n\t\treturn <_Collapsible.Trigger ref={ forwardedRef } { ...props } />;\n\t}\n);\n"],
+  "mappings": ";AAAA,SAAS,eAAe,oBAAoB;AAC5C,SAAS,kBAAkB;AAWlB;AAFF,IAAM,UAAU;AAAA,EACtB,SAAS,mBAAoB,OAAO,cAAe;AAClD,WAAO,oBAAC,aAAa,SAAb,EAAqB,KAAM,cAAiB,GAAG,OAAQ;AAAA,EAChE;AACD;",
+  "names": []
+}

package/build-module/collapsible/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/collapsible/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/collapsible-card/content.mjs

@@ -1,16 +1,37 @@
 // packages/ui/src/collapsible-card/content.tsx
-import { Collapsible } from "@base-ui/react/collapsible";
 import { forwardRef } from "@wordpress/element";
+import clsx from "clsx";
 import * as Card from "../card/index.mjs";
+import * as Collapsible from "../collapsible/index.mjs";
+
+// packages/ui/src/collapsible-card/style.module.css
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='23250ec980']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "23250ec980");
+  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cab17c7a373cb60d__header-content{flex:1;min-width:0}.dd89d27c4f15912d__header-trigger-positioner{align-self:center;flex-shrink:0;max-height:0;overflow:visible}.bcfab5f2448bafef__header-trigger-wrapper{border-radius:var(--wpds-border-radius-sm,2px);display:flex;translate:0 -50%}._3106f8d2b0330faa__header-trigger{@media not (prefers-reduced-motion){transition:rotate .15s ease-out}}._5d2dfcb4085c6d0f__header[data-panel-open] ._3106f8d2b0330faa__header-trigger{rotate:180deg}._5d2dfcb4085c6d0f__header[data-disabled] ._3106f8d2b0330faa__header-trigger{color:var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a)}.e34cf37ccd0d81e0__content{height:var(--collapsible-panel-height);margin-block-start:var(--wp-ui-card-header-content-margin);overflow:hidden;&[hidden]:not([hidden=until-found]){display:none}&[data-ending-style],&[data-starting-style]{height:0}@media not (prefers-reduced-motion){transition:all .15s ease-out}}}@layer wp-ui-compositions{._41bfdbf7b6c087c2__content-inner{padding-block-start:0}._5d2dfcb4085c6d0f__header{align-items:stretch;display:flex;flex-direction:row;gap:var(--wpds-dimension-gap-sm,8px);outline:none;&:not([data-disabled]){cursor:var(--wpds-cursor-control,pointer)}}}"));
+  document.head.appendChild(style);
+}
+var style_default = { "header-content": "cab17c7a373cb60d__header-content", "header-trigger-positioner": "dd89d27c4f15912d__header-trigger-positioner", "header-trigger-wrapper": "bcfab5f2448bafef__header-trigger-wrapper", "header-trigger": "_3106f8d2b0330faa__header-trigger", "header": "_5d2dfcb4085c6d0f__header", "content": "e34cf37ccd0d81e0__content", "content-inner": "_41bfdbf7b6c087c2__content-inner" };
+
+// packages/ui/src/collapsible-card/content.tsx
 import { jsx } from "react/jsx-runtime";
 var Content2 = forwardRef(
-  function CollapsibleCardContent({ render, ...restProps }, ref) {
+  function CollapsibleCardContent({ className, render, children, hiddenUntilFound = true, ...restProps }, ref) {
     return /* @__PURE__ */ jsx(
       Collapsible.Panel,
       {
         ref,
-        render: /* @__PURE__ */ jsx(Card.Content, { render }),
-        ...restProps
+        className: clsx(style_default.content, className),
+        hiddenUntilFound,
+        ...restProps,
+        children: /* @__PURE__ */ jsx(
+          Card.Content,
+          {
+            className: style_default["content-inner"],
+            render,
+            children
+          }
+        )
       }
     );
   }

package/build-module/collapsible-card/content.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/collapsible-card/content.tsx"],
-  "sourcesContent": ["import { Collapsible } from '@base-ui/react/collapsible';\nimport { forwardRef } from '@wordpress/element';\nimport * as Card from '../card';\nimport type { ContentProps } from './types';\n\n/**\n * The collapsible content area of the card. Hidden when collapsed,\n * visible when expanded.\n */\nexport const Content = forwardRef< HTMLDivElement, ContentProps >(\n\tfunction CollapsibleCardContent( { render, ...restProps }, ref ) {\n\t\treturn (\n\t\t\t<Collapsible.Panel\n\t\t\t\tref={ ref }\n\t\t\t\trender={ <Card.Content render={ render } /> }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t);\n\t}\n);\n"],
-  "mappings": ";AAAA,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,YAAY,UAAU;AAYT;AALN,IAAMA,WAAU;AAAA,EACtB,SAAS,uBAAwB,EAAE,QAAQ,GAAG,UAAU,GAAG,KAAM;AAChE,WACC;AAAA,MAAC,YAAY;AAAA,MAAZ;AAAA,QACA;AAAA,QACA,QAAS,oBAAM,cAAL,EAAa,QAAkB;AAAA,QACvC,GAAG;AAAA;AAAA,IACN;AAAA,EAEF;AACD;",
+  "sources": ["../../src/collapsible-card/content.tsx", "../../src/collapsible-card/style.module.css"],
+  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport clsx from 'clsx';\nimport * as Card from '../card';\nimport * as Collapsible from '../collapsible';\nimport styles from './style.module.css';\nimport type { ContentProps } from './types';\n\n/**\n * The collapsible content area of the card. Hidden when collapsed,\n * visible when expanded.\n */\nexport const Content = forwardRef< HTMLDivElement, ContentProps >(\n\tfunction CollapsibleCardContent(\n\t\t{ className, render, children, hiddenUntilFound = true, ...restProps },\n\t\tref\n\t) {\n\t\treturn (\n\t\t\t<Collapsible.Panel\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( styles.content, className ) }\n\t\t\t\thiddenUntilFound={ hiddenUntilFound }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t<Card.Content\n\t\t\t\t\tclassName={ styles[ 'content-inner' ] }\n\t\t\t\t\trender={ render }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</Card.Content>\n\t\t\t</Collapsible.Panel>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='23250ec980']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"23250ec980\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cab17c7a373cb60d__header-content{flex:1;min-width:0}.dd89d27c4f15912d__header-trigger-positioner{align-self:center;flex-shrink:0;max-height:0;overflow:visible}.bcfab5f2448bafef__header-trigger-wrapper{border-radius:var(--wpds-border-radius-sm,2px);display:flex;translate:0 -50%}._3106f8d2b0330faa__header-trigger{@media not (prefers-reduced-motion){transition:rotate .15s ease-out}}._5d2dfcb4085c6d0f__header[data-panel-open] ._3106f8d2b0330faa__header-trigger{rotate:180deg}._5d2dfcb4085c6d0f__header[data-disabled] ._3106f8d2b0330faa__header-trigger{color:var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a)}.e34cf37ccd0d81e0__content{height:var(--collapsible-panel-height);margin-block-start:var(--wp-ui-card-header-content-margin);overflow:hidden;&[hidden]:not([hidden=until-found]){display:none}&[data-ending-style],&[data-starting-style]{height:0}@media not (prefers-reduced-motion){transition:all .15s ease-out}}}@layer wp-ui-compositions{._41bfdbf7b6c087c2__content-inner{padding-block-start:0}._5d2dfcb4085c6d0f__header{align-items:stretch;display:flex;flex-direction:row;gap:var(--wpds-dimension-gap-sm,8px);outline:none;&:not([data-disabled]){cursor:var(--wpds-cursor-control,pointer)}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"header-content\":\"cab17c7a373cb60d__header-content\",\"header-trigger-positioner\":\"dd89d27c4f15912d__header-trigger-positioner\",\"header-trigger-wrapper\":\"bcfab5f2448bafef__header-trigger-wrapper\",\"header-trigger\":\"_3106f8d2b0330faa__header-trigger\",\"header\":\"_5d2dfcb4085c6d0f__header\",\"content\":\"e34cf37ccd0d81e0__content\",\"content-inner\":\"_41bfdbf7b6c087c2__content-inner\"};\n"],
+  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,YAAY,UAAU;AACtB,YAAY,iBAAiB;;;ACH7B,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,6xCAA6xC,CAAC;AACx0C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,kBAAiB,oCAAmC,6BAA4B,+CAA8C,0BAAyB,4CAA2C,kBAAiB,qCAAoC,UAAS,6BAA4B,WAAU,6BAA4B,iBAAgB,mCAAkC;;;ADiBhY;AAZG,IAAMA,WAAU;AAAA,EACtB,SAAS,uBACR,EAAE,WAAW,QAAQ,UAAU,mBAAmB,MAAM,GAAG,UAAU,GACrE,KACC;AACD,WACC;AAAA,MAAa;AAAA,MAAZ;AAAA,QACA;AAAA,QACA,WAAY,KAAM,cAAO,SAAS,SAAU;AAAA,QAC5C;AAAA,QACE,GAAG;AAAA,QAEL;AAAA,UAAM;AAAA,UAAL;AAAA,YACA,WAAY,cAAQ,eAAgB;AAAA,YACpC;AAAA,YAEE;AAAA;AAAA,QACH;AAAA;AAAA,IACD;AAAA,EAEF;AACD;",
   "names": ["Content"]
 }

package/build-module/collapsible-card/context.mjs

@@ -0,0 +1,10 @@
+// packages/ui/src/collapsible-card/context.ts
+import { createContext } from "@wordpress/element";
+var HeaderDescriptionIdContext = createContext({
+  setDescriptionId: () => {
+  }
+});
+export {
+  HeaderDescriptionIdContext
+};
+//# sourceMappingURL=context.mjs.map

package/build-module/collapsible-card/context.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/collapsible-card/context.ts"],
+  "sourcesContent": ["import { createContext } from '@wordpress/element';\n\nexport const HeaderDescriptionIdContext = createContext< {\n\tsetDescriptionId: ( id: string | undefined ) => void;\n} >( {\n\tsetDescriptionId: () => {},\n} );\n"],
+  "mappings": ";AAAA,SAAS,qBAAqB;AAEvB,IAAM,6BAA6B,cAErC;AAAA,EACJ,kBAAkB,MAAM;AAAA,EAAC;AAC1B,CAAE;",
+  "names": []
+}

package/build-module/collapsible-card/header-description.mjs

@@ -0,0 +1,27 @@
+// packages/ui/src/collapsible-card/header-description.tsx
+import { forwardRef, useContext, useEffect, useId } from "@wordpress/element";
+import { HeaderDescriptionIdContext } from "./context.mjs";
+import { jsx } from "react/jsx-runtime";
+var HeaderDescription = forwardRef(function CollapsibleCardHeaderDescription({ children, className, ...restProps }, ref) {
+  const descriptionId = useId();
+  const { setDescriptionId } = useContext(HeaderDescriptionIdContext);
+  useEffect(() => {
+    setDescriptionId(descriptionId);
+    return () => setDescriptionId(void 0);
+  }, [descriptionId, setDescriptionId]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      id: descriptionId,
+      "aria-hidden": "true",
+      className,
+      ...restProps,
+      children
+    }
+  );
+});
+export {
+  HeaderDescription
+};
+//# sourceMappingURL=header-description.mjs.map

package/build-module/collapsible-card/header-description.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/collapsible-card/header-description.tsx"],
+  "sourcesContent": ["import { forwardRef, useContext, useEffect, useId } from '@wordpress/element';\nimport { HeaderDescriptionIdContext } from './context';\nimport type { HeaderDescriptionProps } from './types';\n\n/**\n * Secondary content placed in the collapsible card header that describes\n * the trigger button via `aria-describedby`. Use it for supplementary\n * information such as status badges or summary values.\n *\n * The content is visually rendered but marked `aria-hidden` so that\n * assistive technologies consume it only through the `aria-describedby`\n * relationship on the trigger, avoiding double announcements.\n *\n * Avoid interactive elements (buttons, links, inputs) inside this\n * component \u2014 the entire header is the toggle trigger.\n */\nexport const HeaderDescription = forwardRef<\n\tHTMLDivElement,\n\tHeaderDescriptionProps\n>( function CollapsibleCardHeaderDescription(\n\t{ children, className, ...restProps },\n\tref\n) {\n\tconst descriptionId = useId();\n\tconst { setDescriptionId } = useContext( HeaderDescriptionIdContext );\n\n\tuseEffect( () => {\n\t\tsetDescriptionId( descriptionId );\n\t\treturn () => setDescriptionId( undefined );\n\t}, [ descriptionId, setDescriptionId ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tid={ descriptionId }\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={ className }\n\t\t\t{ ...restProps }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n} );\n"],
+  "mappings": ";AAAA,SAAS,YAAY,YAAY,WAAW,aAAa;AACzD,SAAS,kCAAkC;AA+BzC;AAhBK,IAAM,oBAAoB,WAG9B,SAAS,iCACX,EAAE,UAAU,WAAW,GAAG,UAAU,GACpC,KACC;AACD,QAAM,gBAAgB,MAAM;AAC5B,QAAM,EAAE,iBAAiB,IAAI,WAAY,0BAA2B;AAEpE,YAAW,MAAM;AAChB,qBAAkB,aAAc;AAChC,WAAO,MAAM,iBAAkB,MAAU;AAAA,EAC1C,GAAG,CAAE,eAAe,gBAAiB,CAAE;AAEvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,IAAK;AAAA,MACL,eAAY;AAAA,MACZ;AAAA,MACE,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEF,CAAE;",
+  "names": []
+}

package/build-module/collapsible-card/header.mjs

@@ -1,66 +1,85 @@
 // packages/ui/src/collapsible-card/header.tsx
-import { Collapsible } from "@base-ui/react/collapsible";
 import clsx from "clsx";
-import { forwardRef, useCallback, useRef } from "@wordpress/element";
-import { __ } from "@wordpress/i18n";
-import { chevronDown, chevronUp } from "@wordpress/icons";
+import { forwardRef, useMemo, useState } from "@wordpress/element";
+import { chevronDown } from "@wordpress/icons";
 import * as Card from "../card/index.mjs";
-import { IconButton } from "../icon-button/index.mjs";
+import * as Collapsible from "../collapsible/index.mjs";
+import { Icon } from "../icon/index.mjs";
 
 // packages/ui/src/collapsible-card/style.module.css
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='369efd7a16']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='23250ec980']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "369efd7a16");
-  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cab17c7a373cb60d__header-content{flex:1;min-width:0}.bcfab5f2448bafef__header-trigger-wrapper{align-self:center;flex-shrink:0;max-height:0;overflow:visible}._3106f8d2b0330faa__header-trigger{transform:translateY(-50%)}}@layer wp-ui-compositions{._5d2dfcb4085c6d0f__header{align-items:stretch;display:flex;flex-direction:row;gap:var(--wpds-dimension-gap-sm,8px);&:has(._3106f8d2b0330faa__header-trigger:not([data-disabled])){cursor:var(--wpds-cursor-control,default)}}}"));
+  style.setAttribute("data-wp-hash", "23250ec980");
+  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cab17c7a373cb60d__header-content{flex:1;min-width:0}.dd89d27c4f15912d__header-trigger-positioner{align-self:center;flex-shrink:0;max-height:0;overflow:visible}.bcfab5f2448bafef__header-trigger-wrapper{border-radius:var(--wpds-border-radius-sm,2px);display:flex;translate:0 -50%}._3106f8d2b0330faa__header-trigger{@media not (prefers-reduced-motion){transition:rotate .15s ease-out}}._5d2dfcb4085c6d0f__header[data-panel-open] ._3106f8d2b0330faa__header-trigger{rotate:180deg}._5d2dfcb4085c6d0f__header[data-disabled] ._3106f8d2b0330faa__header-trigger{color:var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a)}.e34cf37ccd0d81e0__content{height:var(--collapsible-panel-height);margin-block-start:var(--wp-ui-card-header-content-margin);overflow:hidden;&[hidden]:not([hidden=until-found]){display:none}&[data-ending-style],&[data-starting-style]{height:0}@media not (prefers-reduced-motion){transition:all .15s ease-out}}}@layer wp-ui-compositions{._41bfdbf7b6c087c2__content-inner{padding-block-start:0}._5d2dfcb4085c6d0f__header{align-items:stretch;display:flex;flex-direction:row;gap:var(--wpds-dimension-gap-sm,8px);outline:none;&:not([data-disabled]){cursor:var(--wpds-cursor-control,pointer)}}}"));
   document.head.appendChild(style);
 }
-var style_default = { "header-content": "cab17c7a373cb60d__header-content", "header-trigger-wrapper": "bcfab5f2448bafef__header-trigger-wrapper", "header-trigger": "_3106f8d2b0330faa__header-trigger", "header": "_5d2dfcb4085c6d0f__header" };
+var style_default = { "header-content": "cab17c7a373cb60d__header-content", "header-trigger-positioner": "dd89d27c4f15912d__header-trigger-positioner", "header-trigger-wrapper": "bcfab5f2448bafef__header-trigger-wrapper", "header-trigger": "_3106f8d2b0330faa__header-trigger", "header": "_5d2dfcb4085c6d0f__header", "content": "e34cf37ccd0d81e0__content", "content-inner": "_41bfdbf7b6c087c2__content-inner" };
+
+// 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']")) {
+  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))}}"));
+  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/collapsible-card/header.tsx
+import { HeaderDescriptionIdContext } from "./context.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Header2 = forwardRef(
-  function CollapsibleCardHeader({ children, className, onClick, ...restProps }, ref) {
-    const triggerRef = useRef(null);
-    const handleHeaderClick = useCallback(
-      (event) => {
-        const trigger = triggerRef.current;
-        if (trigger && event.target instanceof Node && !trigger.contains(event.target)) {
-          trigger.click();
-        }
-        onClick?.(event);
-      },
-      [onClick]
+  function CollapsibleCardHeader({ children, className, render, ...restProps }, ref) {
+    const [descriptionId, setDescriptionId] = useState();
+    const contextValue = useMemo(
+      () => ({ setDescriptionId }),
+      [setDescriptionId]
     );
-    return /* @__PURE__ */ jsxs(
-      Card.Header,
+    return /* @__PURE__ */ jsx(HeaderDescriptionIdContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      Collapsible.Trigger,
       {
-        ref,
         className: clsx(style_default.header, className),
-        onClick: handleHeaderClick,
-        ...restProps,
+        render: /* @__PURE__ */ jsx(
+          Card.Header,
+          {
+            ref,
+            render,
+            ...restProps
+          }
+        ),
+        nativeButton: false,
+        "aria-describedby": descriptionId,
         children: [
           /* @__PURE__ */ jsx("div", { className: style_default["header-content"], children }),
-          /* @__PURE__ */ jsx("div", { className: style_default["header-trigger-wrapper"], children: /* @__PURE__ */ jsx(
-            Collapsible.Trigger,
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              ref: triggerRef,
-              render: (props, state) => /* @__PURE__ */ jsx(
-                IconButton,
+              className: clsx(
+                style_default["header-trigger-positioner"]
+              ),
+              children: /* @__PURE__ */ jsx(
+                "div",
                 {
-                  ...props,
-                  label: __("Expand or collapse card"),
-                  icon: state.open ? chevronUp : chevronDown,
-                  variant: "minimal",
-                  tone: "neutral",
-                  size: "compact"
+                  className: clsx(
+                    style_default["header-trigger-wrapper"],
+                    // While the interactive trigger element is the whole header,
+                    // the focus ring will be displayed only on the icon to visually
+                    // emulate it being the button.
+                    focus_default["outset-ring--focus-parent-visible"]
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      icon: chevronDown,
+                      className: style_default["header-trigger"]
+                    }
+                  )
                 }
-              ),
-              className: style_default["header-trigger"]
+              )
             }
-          ) })
+          )
         ]
       }
-    );
+    ) });
   }
 );
 export {

package/build-module/collapsible-card/header.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/collapsible-card/header.tsx", "../../src/collapsible-card/style.module.css"],
-  "sourcesContent": ["import { Collapsible } from '@base-ui/react/collapsible';\nimport clsx from 'clsx';\nimport type { MouseEvent } from 'react';\nimport { forwardRef, useCallback, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\nimport * as Card from '../card';\nimport { IconButton } from '../icon-button';\nimport styles from './style.module.css';\nimport type { HeaderProps } from './types';\n\n/**\n * The header of a collapsible card. Always visible, and acts as the\n * toggle trigger \u2014 clicking anywhere on it expands or collapses the\n * card's content.\n *\n * Avoid placing interactive elements (buttons, links, inputs) inside the\n * header, since the entire area is clickable and their events will bubble\n * to trigger the collapse toggle.\n */\nexport const Header = forwardRef< HTMLDivElement, HeaderProps >(\n\tfunction CollapsibleCardHeader(\n\t\t{ children, className, onClick, ...restProps },\n\t\tref\n\t) {\n\t\tconst triggerRef = useRef< HTMLButtonElement >( null );\n\n\t\tconst handleHeaderClick = useCallback(\n\t\t\t( event: MouseEvent< HTMLDivElement > ) => {\n\t\t\t\tconst trigger = triggerRef.current;\n\t\t\t\tif (\n\t\t\t\t\ttrigger &&\n\t\t\t\t\tevent.target instanceof Node &&\n\t\t\t\t\t! trigger.contains( event.target )\n\t\t\t\t) {\n\t\t\t\t\ttrigger.click();\n\t\t\t\t}\n\n\t\t\t\tonClick?.( event );\n\t\t\t},\n\t\t\t[ onClick ]\n\t\t);\n\n\t\treturn (\n\t\t\t<Card.Header\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( styles.header, className ) }\n\t\t\t\tonClick={ handleHeaderClick }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t<div className={ styles[ 'header-content' ] }>{ children }</div>\n\t\t\t\t<div className={ styles[ 'header-trigger-wrapper' ] }>\n\t\t\t\t\t<Collapsible.Trigger\n\t\t\t\t\t\tref={ triggerRef }\n\t\t\t\t\t\trender={ ( props, state ) => (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\tlabel={ __( 'Expand or collapse card' ) }\n\t\t\t\t\t\t\t\ticon={ state.open ? chevronUp : chevronDown }\n\t\t\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t\t\t\ttone=\"neutral\"\n\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tclassName={ styles[ 'header-trigger' ] }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</Card.Header>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='369efd7a16']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"369efd7a16\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cab17c7a373cb60d__header-content{flex:1;min-width:0}.bcfab5f2448bafef__header-trigger-wrapper{align-self:center;flex-shrink:0;max-height:0;overflow:visible}._3106f8d2b0330faa__header-trigger{transform:translateY(-50%)}}@layer wp-ui-compositions{._5d2dfcb4085c6d0f__header{align-items:stretch;display:flex;flex-direction:row;gap:var(--wpds-dimension-gap-sm,8px);&:has(._3106f8d2b0330faa__header-trigger:not([data-disabled])){cursor:var(--wpds-cursor-control,default)}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"header-content\":\"cab17c7a373cb60d__header-content\",\"header-trigger-wrapper\":\"bcfab5f2448bafef__header-trigger-wrapper\",\"header-trigger\":\"_3106f8d2b0330faa__header-trigger\",\"header\":\"_5d2dfcb4085c6d0f__header\"};\n"],
-  "mappings": ";AAAA,SAAS,mBAAmB;AAC5B,OAAO,UAAU;AAEjB,SAAS,YAAY,aAAa,cAAc;AAChD,SAAS,UAAU;AACnB,SAAS,aAAa,iBAAiB;AACvC,YAAY,UAAU;AACtB,SAAS,kBAAkB;;;ACP3B,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,6jBAA6jB,CAAC;AACxmB,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,kBAAiB,oCAAmC,0BAAyB,4CAA2C,kBAAiB,qCAAoC,UAAS,4BAA2B;;;ADsC9N,SAMC,KAND;AAxBI,IAAMA,UAAS;AAAA,EACrB,SAAS,sBACR,EAAE,UAAU,WAAW,SAAS,GAAG,UAAU,GAC7C,KACC;AACD,UAAM,aAAa,OAA6B,IAAK;AAErD,UAAM,oBAAoB;AAAA,MACzB,CAAE,UAAyC;AAC1C,cAAM,UAAU,WAAW;AAC3B,YACC,WACA,MAAM,kBAAkB,QACxB,CAAE,QAAQ,SAAU,MAAM,MAAO,GAChC;AACD,kBAAQ,MAAM;AAAA,QACf;AAEA,kBAAW,KAAM;AAAA,MAClB;AAAA,MACA,CAAE,OAAQ;AAAA,IACX;AAEA,WACC;AAAA,MAAM;AAAA,MAAL;AAAA,QACA;AAAA,QACA,WAAY,KAAM,cAAO,QAAQ,SAAU;AAAA,QAC3C,SAAU;AAAA,QACR,GAAG;AAAA,QAEL;AAAA,8BAAC,SAAI,WAAY,cAAQ,gBAAiB,GAAM,UAAU;AAAA,UAC1D,oBAAC,SAAI,WAAY,cAAQ,wBAAyB,GACjD;AAAA,YAAC,YAAY;AAAA,YAAZ;AAAA,cACA,KAAM;AAAA,cACN,QAAS,CAAE,OAAO,UACjB;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACL,OAAQ,GAAI,yBAA0B;AAAA,kBACtC,MAAO,MAAM,OAAO,YAAY;AAAA,kBAChC,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,MAAK;AAAA;AAAA,cACN;AAAA,cAED,WAAY,cAAQ,gBAAiB;AAAA;AAAA,UACtC,GACD;AAAA;AAAA;AAAA,IACD;AAAA,EAEF;AACD;",
+  "sources": ["../../src/collapsible-card/header.tsx", "../../src/collapsible-card/style.module.css", "../../src/utils/css/focus.module.css"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useMemo, useState } from '@wordpress/element';\nimport { chevronDown } from '@wordpress/icons';\nimport * as Card from '../card';\nimport * as Collapsible from '../collapsible';\nimport { Icon } from '../icon';\nimport styles from './style.module.css';\nimport focusStyles from '../utils/css/focus.module.css';\nimport { HeaderDescriptionIdContext } from './context';\nimport type { HeaderProps } from './types';\n\n/**\n * The header of a collapsible card. Always visible, and acts as the\n * toggle trigger \u2014 clicking anywhere on it expands or collapses the\n * card's content.\n *\n * Avoid placing interactive elements (buttons, links, inputs) inside the\n * header, since the entire area is clickable and their events will bubble\n * to trigger the collapse toggle.\n */\nexport const Header = forwardRef< HTMLDivElement, HeaderProps >(\n\tfunction CollapsibleCardHeader(\n\t\t{ children, className, render, ...restProps },\n\t\tref\n\t) {\n\t\tconst [ descriptionId, setDescriptionId ] = useState< string >();\n\n\t\tconst contextValue = useMemo(\n\t\t\t() => ( { setDescriptionId } ),\n\t\t\t[ setDescriptionId ]\n\t\t);\n\n\t\treturn (\n\t\t\t<HeaderDescriptionIdContext.Provider value={ contextValue }>\n\t\t\t\t<Collapsible.Trigger\n\t\t\t\t\tclassName={ clsx( styles.header, className ) }\n\t\t\t\t\trender={\n\t\t\t\t\t\t<Card.Header\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\trender={ render }\n\t\t\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tnativeButton={ false }\n\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t>\n\t\t\t\t\t<div className={ styles[ 'header-content' ] }>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\tstyles[ 'header-trigger-positioner' ]\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\tstyles[ 'header-trigger-wrapper' ],\n\t\t\t\t\t\t\t\t// While the interactive trigger element is the whole header,\n\t\t\t\t\t\t\t\t// the focus ring will be displayed only on the icon to visually\n\t\t\t\t\t\t\t\t// emulate it being the button.\n\t\t\t\t\t\t\t\tfocusStyles[\n\t\t\t\t\t\t\t\t\t'outset-ring--focus-parent-visible'\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\t\t\t\tclassName={ styles[ 'header-trigger' ] }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Collapsible.Trigger>\n\t\t\t</HeaderDescriptionIdContext.Provider>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='23250ec980']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"23250ec980\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cab17c7a373cb60d__header-content{flex:1;min-width:0}.dd89d27c4f15912d__header-trigger-positioner{align-self:center;flex-shrink:0;max-height:0;overflow:visible}.bcfab5f2448bafef__header-trigger-wrapper{border-radius:var(--wpds-border-radius-sm,2px);display:flex;translate:0 -50%}._3106f8d2b0330faa__header-trigger{@media not (prefers-reduced-motion){transition:rotate .15s ease-out}}._5d2dfcb4085c6d0f__header[data-panel-open] ._3106f8d2b0330faa__header-trigger{rotate:180deg}._5d2dfcb4085c6d0f__header[data-disabled] ._3106f8d2b0330faa__header-trigger{color:var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a)}.e34cf37ccd0d81e0__content{height:var(--collapsible-panel-height);margin-block-start:var(--wp-ui-card-header-content-margin);overflow:hidden;&[hidden]:not([hidden=until-found]){display:none}&[data-ending-style],&[data-starting-style]{height:0}@media not (prefers-reduced-motion){transition:all .15s ease-out}}}@layer wp-ui-compositions{._41bfdbf7b6c087c2__content-inner{padding-block-start:0}._5d2dfcb4085c6d0f__header{align-items:stretch;display:flex;flex-direction:row;gap:var(--wpds-dimension-gap-sm,8px);outline:none;&:not([data-disabled]){cursor:var(--wpds-cursor-control,pointer)}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"header-content\":\"cab17c7a373cb60d__header-content\",\"header-trigger-positioner\":\"dd89d27c4f15912d__header-trigger-positioner\",\"header-trigger-wrapper\":\"bcfab5f2448bafef__header-trigger-wrapper\",\"header-trigger\":\"_3106f8d2b0330faa__header-trigger\",\"header\":\"_5d2dfcb4085c6d0f__header\",\"content\":\"e34cf37ccd0d81e0__content\",\"content-inner\":\"_41bfdbf7b6c087c2__content-inner\"};\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='4acd2b57a1']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"4acd2b57a1\");\n\tstyle.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))}}\"));\n\tdocument.head.appendChild(style);\n}\nexport 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\"};\n"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,YAAY,SAAS,gBAAgB;AAC9C,SAAS,mBAAmB;AAC5B,YAAY,UAAU;AACtB,YAAY,iBAAiB;AAC7B,SAAS,YAAY;;;ACLrB,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,6xCAA6xC,CAAC;AACx0C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,kBAAiB,oCAAmC,6BAA4B,+CAA8C,0BAAyB,4CAA2C,kBAAiB,qCAAoC,UAAS,6BAA4B,WAAU,6BAA4B,iBAAgB,mCAAkC;;;ACNpY,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,8tCAA8tC,CAAC;AACzwC,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,sBAAqB,yCAAwC,oCAAmC,sDAAqD,8BAA6B,gDAA+C,6BAA4B,+CAA8C,2CAA0C,8DAA6D,qCAAoC,uDAAsD,qCAAoC,sDAAqD;;;AFErlB,SAAS,kCAAkC;AA0BvC,SAGE,KAHF;AAdG,IAAMA,UAAS;AAAA,EACrB,SAAS,sBACR,EAAE,UAAU,WAAW,QAAQ,GAAG,UAAU,GAC5C,KACC;AACD,UAAM,CAAE,eAAe,gBAAiB,IAAI,SAAmB;AAE/D,UAAM,eAAe;AAAA,MACpB,OAAQ,EAAE,iBAAiB;AAAA,MAC3B,CAAE,gBAAiB;AAAA,IACpB;AAEA,WACC,oBAAC,2BAA2B,UAA3B,EAAoC,OAAQ,cAC5C;AAAA,MAAa;AAAA,MAAZ;AAAA,QACA,WAAY,KAAM,cAAO,QAAQ,SAAU;AAAA,QAC3C,QACC;AAAA,UAAM;AAAA,UAAL;AAAA,YACA;AAAA,YACA;AAAA,YACE,GAAG;AAAA;AAAA,QACN;AAAA,QAED,cAAe;AAAA,QACf,oBAAmB;AAAA,QAEnB;AAAA,8BAAC,SAAI,WAAY,cAAQ,gBAAiB,GACvC,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,WAAY;AAAA,gBACX,cAAQ,2BAA4B;AAAA,cACrC;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACA,WAAY;AAAA,oBACX,cAAQ,wBAAyB;AAAA;AAAA;AAAA;AAAA,oBAIjC,cACC,mCACD;AAAA,kBACD;AAAA,kBAEA;AAAA,oBAAC;AAAA;AAAA,sBACA,MAAO;AAAA,sBACP,WAAY,cAAQ,gBAAiB;AAAA;AAAA,kBACtC;AAAA;AAAA,cACD;AAAA;AAAA,UACD;AAAA;AAAA;AAAA,IACD,GACD;AAAA,EAEF;AACD;",
   "names": ["Header"]
 }

package/build-module/collapsible-card/index.mjs

@@ -1,10 +1,12 @@
 // packages/ui/src/collapsible-card/index.ts
 import { Root } from "./root.mjs";
 import { Header } from "./header.mjs";
+import { HeaderDescription } from "./header-description.mjs";
 import { Content } from "./content.mjs";
 export {
   Content,
   Header,
+  HeaderDescription,
   Root
 };
 //# sourceMappingURL=index.mjs.map

package/build-module/collapsible-card/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/collapsible-card/index.ts"],
-  "sourcesContent": ["import { Root } from './root';\nimport { Header } from './header';\nimport { Content } from './content';\n\nexport { Root, Header, Content };\n"],
-  "mappings": ";AAAA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,eAAe;",
+  "sourcesContent": ["import { Root } from './root';\nimport { Header } from './header';\nimport { HeaderDescription } from './header-description';\nimport { Content } from './content';\n\nexport { Root, Header, HeaderDescription, Content };\n"],
+  "mappings": ";AAAA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,yBAAyB;AAClC,SAAS,eAAe;",
   "names": []
 }

package/build-module/collapsible-card/root.mjs

@@ -1,9 +1,9 @@
 // packages/ui/src/collapsible-card/root.tsx
-import { Collapsible } from "@base-ui/react/collapsible";
 import { forwardRef } from "@wordpress/element";
 import * as Card from "../card/index.mjs";
+import * as Collapsible from "../collapsible/index.mjs";
 import { jsx } from "react/jsx-runtime";
-var Root2 = forwardRef(
+var Root3 = forwardRef(
   function CollapsibleCardRoot({ render, ...restProps }, ref) {
     return /* @__PURE__ */ jsx(
       Collapsible.Root,
@@ -16,6 +16,6 @@ var Root2 = forwardRef(
   }
 );
 export {
-  Root2 as Root
+  Root3 as Root
 };
 //# sourceMappingURL=root.mjs.map

package/build-module/collapsible-card/root.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/collapsible-card/root.tsx"],
-  "sourcesContent": ["import { Collapsible } from '@base-ui/react/collapsible';\nimport { forwardRef } from '@wordpress/element';\nimport * as Card from '../card';\nimport type { RootProps } from './types';\n\n/**\n * A card that can be expanded and collapsed. When collapsed, only the\n * header is visible.\n *\n * ```jsx\n * import { CollapsibleCard, Card } from '@wordpress/ui';\n *\n * function MyComponent() {\n * \treturn (\n * \t\t<CollapsibleCard.Root defaultOpen>\n * \t\t\t<CollapsibleCard.Header>\n * \t\t\t\t<Card.Title>Heading</Card.Title>\n * \t\t\t</CollapsibleCard.Header>\n * \t\t\t<CollapsibleCard.Content>\n * \t\t\t\t<p>Collapsible content here.</p>\n * \t\t\t</CollapsibleCard.Content>\n * \t\t</CollapsibleCard.Root>\n * \t);\n * }\n * ```\n */\nexport const Root = forwardRef< HTMLDivElement, RootProps >(\n\tfunction CollapsibleCardRoot( { render, ...restProps }, ref ) {\n\t\treturn (\n\t\t\t<Collapsible.Root\n\t\t\t\tref={ ref }\n\t\t\t\trender={ <Card.Root render={ render } /> }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t);\n\t}\n);\n"],
-  "mappings": ";AAAA,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,YAAY,UAAU;AA6BT;AALN,IAAMA,QAAO;AAAA,EACnB,SAAS,oBAAqB,EAAE,QAAQ,GAAG,UAAU,GAAG,KAAM;AAC7D,WACC;AAAA,MAAC,YAAY;AAAA,MAAZ;AAAA,QACA;AAAA,QACA,QAAS,oBAAM,WAAL,EAAU,QAAkB;AAAA,QACpC,GAAG;AAAA;AAAA,IACN;AAAA,EAEF;AACD;",
+  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport * as Card from '../card';\nimport * as Collapsible from '../collapsible';\nimport type { RootProps } from './types';\n\n/**\n * A card that can be expanded and collapsed. When collapsed, only the\n * header is visible.\n *\n * ```jsx\n * import { CollapsibleCard, Card } from '@wordpress/ui';\n *\n * function MyComponent() {\n * \treturn (\n * \t\t<CollapsibleCard.Root defaultOpen>\n * \t\t\t<CollapsibleCard.Header>\n * \t\t\t\t<Card.Title>Heading</Card.Title>\n * \t\t\t</CollapsibleCard.Header>\n * \t\t\t<CollapsibleCard.Content>\n * \t\t\t\t<p>Collapsible content here.</p>\n * \t\t\t</CollapsibleCard.Content>\n * \t\t</CollapsibleCard.Root>\n * \t);\n * }\n * ```\n */\nexport const Root = forwardRef< HTMLDivElement, RootProps >(\n\tfunction CollapsibleCardRoot( { render, ...restProps }, ref ) {\n\t\treturn (\n\t\t\t<Collapsible.Root\n\t\t\t\tref={ ref }\n\t\t\t\trender={ <Card.Root render={ render } /> }\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t);\n\t}\n);\n"],
+  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,YAAY,UAAU;AACtB,YAAY,iBAAiB;AA6BhB;AALN,IAAMA,QAAO;AAAA,EACnB,SAAS,oBAAqB,EAAE,QAAQ,GAAG,UAAU,GAAG,KAAM;AAC7D,WACC;AAAA,MAAa;AAAA,MAAZ;AAAA,QACA;AAAA,QACA,QAAS,oBAAM,WAAL,EAAU,QAAkB;AAAA,QACpC,GAAG;AAAA;AAAA,IACN;AAAA,EAEF;AACD;",
   "names": ["Root"]
 }

package/build-module/dialog/action.mjs

@@ -4,12 +4,14 @@ import { forwardRef } from "@wordpress/element";
 import { Button } from "../button/index.mjs";
 import { jsx } from "react/jsx-runtime";
 var Action = forwardRef(
-  function DialogAction({ render, ...props }, ref) {
+  function DialogAction({ render, disabled, loading, ...props }, ref) {
+    const resolvedDisabled = disabled ?? loading;
     return /* @__PURE__ */ jsx(
       _Dialog.Close,
       {
         ref,
-        render: /* @__PURE__ */ jsx(Button, { render }),
+        render: /* @__PURE__ */ jsx(Button, { render, loading }),
+        disabled: resolvedDisabled,
         ...props
       }
     );

package/build-module/dialog/action.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dialog/action.tsx"],
-  "sourcesContent": ["import { Dialog as _Dialog } from '@base-ui/react/dialog';\nimport { forwardRef } from '@wordpress/element';\nimport { Button } from '../button';\nimport type { ActionProps } from './types';\n\n/**\n * Renders a button that closes the dialog when clicked.\n * Accepts all Button component props for styling.\n */\nconst Action = forwardRef< HTMLButtonElement, ActionProps >(\n\tfunction DialogAction( { render, ...props }, ref ) {\n\t\treturn (\n\t\t\t<_Dialog.Close\n\t\t\t\tref={ ref }\n\t\t\t\trender={ <Button render={ render } /> }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport { Action };\n"],
-  "mappings": ";AAAA,SAAS,UAAU,eAAe;AAClC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAYV;AALb,IAAM,SAAS;AAAA,EACd,SAAS,aAAc,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAM;AAClD,WACC;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACA;AAAA,QACA,QAAS,oBAAC,UAAO,QAAkB;AAAA,QACjC,GAAG;AAAA;AAAA,IACN;AAAA,EAEF;AACD;",
+  "sourcesContent": ["import { Dialog as _Dialog } from '@base-ui/react/dialog';\nimport { forwardRef } from '@wordpress/element';\nimport { Button } from '../button';\nimport type { ActionProps } from './types';\n\n/**\n * Renders a button that closes the dialog when clicked.\n * Accepts all Button component props for styling.\n */\nconst Action = forwardRef< HTMLButtonElement, ActionProps >(\n\tfunction DialogAction( { render, disabled, loading, ...props }, ref ) {\n\t\t// Resolve `disabled` the same way Button does so that\n\t\t// _Dialog.Close's internal useButton (which controls\n\t\t// aria-disabled) stays in sync with the rendered Button.\n\t\tconst resolvedDisabled = disabled ?? loading;\n\n\t\treturn (\n\t\t\t<_Dialog.Close\n\t\t\t\tref={ ref }\n\t\t\t\trender={ <Button render={ render } loading={ loading } /> }\n\t\t\t\tdisabled={ resolvedDisabled }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport { Action };\n"],
+  "mappings": ";AAAA,SAAS,UAAU,eAAe;AAClC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAiBV;AAVb,IAAM,SAAS;AAAA,EACd,SAAS,aAAc,EAAE,QAAQ,UAAU,SAAS,GAAG,MAAM,GAAG,KAAM;AAIrE,UAAM,mBAAmB,YAAY;AAErC,WACC;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACA;AAAA,QACA,QAAS,oBAAC,UAAO,QAAkB,SAAoB;AAAA,QACvD,UAAW;AAAA,QACT,GAAG;AAAA;AAAA,IACN;AAAA,EAEF;AACD;",
   "names": []
 }

package/build-module/dialog/close-icon.mjs

@@ -19,7 +19,8 @@ var CloseIcon = forwardRef(
             tone: "neutral",
             ...props,
             icon: icon ?? close,
-            label: label ?? __("Close")
+            label: label ?? __("Close"),
+            "data-wp-ui-dialog-close-icon": ""
           }
         )
       }