@camunda/design-system 0.33.0 → 0.34.0

package/dist/carbon-compat/button.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import type { ButtonProps as CarbonButtonProps } from "@carbon/react";
-export type ButtonProps<T extends React.ElementType = "button"> = CarbonButtonProps<T>;
+export type ButtonProps<T extends React.ElementType = "button"> = CarbonButtonProps<T> & {
+    loading?: boolean;
+};
 declare function Button(props: ButtonProps<"button">): React.JSX.Element;
 export { Button };
 //# sourceMappingURL=button.d.ts.map

package/dist/carbon-compat/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../carbon-compat/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEtE,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAC5D,iBAAiB,CAAC,CAAC,CAAC,CAAC;AAoCvB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,qBAmD3C;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../carbon-compat/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGtE,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAC5D,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAoC/C,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,qBAmD3C;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/carbon-compat/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../carbon-compat/button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAqBpD,MAAM,eAAe,GAAsC;IACzD,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,aAAa;IACrB,kBAAkB,EAAE,aAAa;IACjC,eAAe,EAAE,aAAa;CAC/B,CAAC;AAGF,MAAM,YAAY,GAAmC;IACnD,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,SAAS,MAAM,CAAC,KAA4B;IAC1C,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,UAAU,EAAE,UAAU,EACtB,eAAe,EACf,WAAW,EACX,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,eAAe,EACf,EAAE,EACF,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,GAAG,KAaH,CAAC;IACF,gBAAgB,CAAC,QAAQ,EAAE;QACzB,eAAe;QACf,WAAW;QACX,YAAY;QACZ,UAAU;QACV,gBAAgB;QAChB,eAAe;QACf,EAAE;KACH,CAAC,CAAC;IACH,MAAM,OAAO,GAAkB,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACxE,MAAM,UAAU,GAAe,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACrE,OAAO,CACL,MAAC,YAAY,IACX,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,SAAS,KACf,IAAkD,aAEtD,UAAU,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,CAAC,CAAC,CAAC,IAAI,EAClC,QAAQ,IACI,CAChB,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../carbon-compat/button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAsBpD,MAAM,eAAe,GAAsC;IACzD,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,aAAa;IACrB,kBAAkB,EAAE,aAAa;IACjC,eAAe,EAAE,aAAa;CAC/B,CAAC;AAGF,MAAM,YAAY,GAAmC;IACnD,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,SAAS,MAAM,CAAC,KAA4B;IAC1C,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,UAAU,EAAE,UAAU,EACtB,eAAe,EACf,WAAW,EACX,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,eAAe,EACf,EAAE,EACF,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,GAAG,KAaH,CAAC;IACF,gBAAgB,CAAC,QAAQ,EAAE;QACzB,eAAe;QACf,WAAW;QACX,YAAY;QACZ,UAAU;QACV,gBAAgB;QAChB,eAAe;QACf,EAAE;KACH,CAAC,CAAC;IACH,MAAM,OAAO,GAAkB,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACxE,MAAM,UAAU,GAAe,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACrE,OAAO,CACL,MAAC,YAAY,IACX,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,SAAS,KACf,IAAkD,aAEtD,UAAU,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,CAAC,CAAC,CAAC,IAAI,EAClC,QAAQ,IACI,CAChB,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/carbon-compat/code-snippet.d.ts

@@ -1,28 +1,33 @@
-import type * as React from "react";
+import * as React from "react";
 import type { CodeSnippetProps as CarbonCodeSnippetProps } from "@carbon/react";
 export type CodeSnippetProps = CarbonCodeSnippetProps & {
     children?: React.ReactNode;
 };
 /**
  * CodeSnippet — Carbon-shaped adapter that renders code with Tailwind
- * + mono font.
+ * + mono font and a copy affordance.
  *
  * Maps:
  *   type: 'inline' → inline `<code>` with subtle background
  *   type: 'single' | 'multi' → block `<pre><code>` with horizontal/
  *     vertical overflow as appropriate
  *   children → rendered as the code text
+ *   copy button (block form) → composes a small DS `<Button>`:
+ *     - copies `copyText ?? <rendered code text>` to the clipboard
+ *       (matches Carbon's `handleCopyClick`),
+ *     - then calls `onClick`,
+ *     - swaps to a checkmark and announces `feedback` (default
+ *       "Copied!") for `feedbackTimeout` ms (default 2000),
+ *     - suppressed by `hideCopyButton`,
+ *     - labelled by `copyButtonDescription` / `aria-label`
+ *       (default "Copy to clipboard").
  *
- * Drops (with dev warning) — Carbon affordances we don't model here:
- *   align, autoAlign, copyButtonDescription, copyText, feedback,
- *   feedbackTimeout, hideCopyButton, maxCollapsedNumberOfRows,
- *   maxExpandedNumberOfRows, minCollapsedNumberOfRows,
- *   minExpandedNumberOfRows, onClick, showLessText, showMoreText,
- *   wrapText, light, decorator, slug
- *
- * The copy-button affordance is a meaningful piece consumers may rely
- * on; if needed, we add it as a follow-up that composes a small
- * `<Button>` next to the code block.
+ * Drops (with dev warning) — Carbon affordances not modelled here:
+ *   align, autoAlign, maxCollapsedNumberOfRows, maxExpandedNumberOfRows,
+ *   minCollapsedNumberOfRows, minExpandedNumberOfRows, showLessText,
+ *   showMoreText, wrapText, light, decorator, slug. Inline snippets are
+ *   static (no copy button) — Carbon's click-to-copy inline behaviour is
+ *   not modelled.
  */
 declare function CodeSnippet({ type, disabled, className, children, ...rest }: CodeSnippetProps): React.JSX.Element;
 export { CodeSnippet };

package/dist/carbon-compat/code-snippet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-snippet.d.ts","sourceRoot":"","sources":["../../carbon-compat/code-snippet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,gBAAgB,IAAI,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAQhF,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAiFlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"code-snippet.d.ts","sourceRoot":"","sources":["../../carbon-compat/code-snippet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,IAAI,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAShF,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAgKlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/carbon-compat/code-snippet.js

@@ -1,43 +1,46 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Copy } from "lucide-react";
+import { Button } from "../src/components/ui/button.js";
 import { cn, warnDroppedProps } from "../src/lib/utils.js";
+const DEFAULT_FEEDBACK = "Copied!";
+const DEFAULT_FEEDBACK_TIMEOUT = 2000;
+const DEFAULT_COPY_LABEL = "Copy to clipboard";
 /**
  * CodeSnippet — Carbon-shaped adapter that renders code with Tailwind
- * + mono font.
+ * + mono font and a copy affordance.
  *
  * Maps:
  *   type: 'inline' → inline `<code>` with subtle background
  *   type: 'single' | 'multi' → block `<pre><code>` with horizontal/
  *     vertical overflow as appropriate
  *   children → rendered as the code text
+ *   copy button (block form) → composes a small DS `<Button>`:
+ *     - copies `copyText ?? <rendered code text>` to the clipboard
+ *       (matches Carbon's `handleCopyClick`),
+ *     - then calls `onClick`,
+ *     - swaps to a checkmark and announces `feedback` (default
+ *       "Copied!") for `feedbackTimeout` ms (default 2000),
+ *     - suppressed by `hideCopyButton`,
+ *     - labelled by `copyButtonDescription` / `aria-label`
+ *       (default "Copy to clipboard").
  *
- * Drops (with dev warning) — Carbon affordances we don't model here:
- *   align, autoAlign, copyButtonDescription, copyText, feedback,
- *   feedbackTimeout, hideCopyButton, maxCollapsedNumberOfRows,
- *   maxExpandedNumberOfRows, minCollapsedNumberOfRows,
- *   minExpandedNumberOfRows, onClick, showLessText, showMoreText,
- *   wrapText, light, decorator, slug
- *
- * The copy-button affordance is a meaningful piece consumers may rely
- * on; if needed, we add it as a follow-up that composes a small
- * `<Button>` next to the code block.
+ * Drops (with dev warning) — Carbon affordances not modelled here:
+ *   align, autoAlign, maxCollapsedNumberOfRows, maxExpandedNumberOfRows,
+ *   minCollapsedNumberOfRows, minExpandedNumberOfRows, showLessText,
+ *   showMoreText, wrapText, light, decorator, slug. Inline snippets are
+ *   static (no copy button) — Carbon's click-to-copy inline behaviour is
+ *   not modelled.
  */
 function CodeSnippet({ type = "single", disabled, className, children, ...rest }) {
-    // Pull out Carbon-only props the adapter doesn't model so they don't
-    // flow onto the DOM as unknown attributes.
-    const { align, autoAlign, copyButtonDescription, copyText, feedback, feedbackTimeout, hideCopyButton, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, minCollapsedNumberOfRows, minExpandedNumberOfRows, onClick, showLessText, showMoreText, wrapText, light, decorator, slug, ariaLabel, ...domRest } = rest;
+    const { align, autoAlign, copyButtonDescription, copyText, feedback, feedbackTimeout, hideCopyButton, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, minCollapsedNumberOfRows, minExpandedNumberOfRows, onClick, showLessText, showMoreText, wrapText, light, decorator, slug, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, ...domRest } = rest;
     warnDroppedProps("CodeSnippet", {
         align,
         autoAlign,
-        copyButtonDescription,
-        copyText,
-        feedback,
-        feedbackTimeout,
-        hideCopyButton,
         maxCollapsedNumberOfRows,
         maxExpandedNumberOfRows,
         minCollapsedNumberOfRows,
         minExpandedNumberOfRows,
-        onClick,
         showLessText,
         showMoreText,
         wrapText,
@@ -45,11 +48,56 @@ function CodeSnippet({ type = "single", disabled, className, children, ...rest }
         decorator,
         slug,
     });
+    const codeRef = React.useRef(null);
+    const [copied, setCopied] = React.useState(false);
+    const resetTimerRef = React.useRef(undefined);
+    React.useEffect(() => () => clearTimeout(resetTimerRef.current), []);
+    const copyLabel = typeof copyButtonDescription === "string"
+        ? copyButtonDescription
+        : typeof ariaLabel === "string"
+            ? ariaLabel
+            : typeof deprecatedAriaLabel === "string"
+                ? deprecatedAriaLabel
+                : DEFAULT_COPY_LABEL;
+    const feedbackLabel = typeof feedback === "string" ? feedback : DEFAULT_FEEDBACK;
+    const timeout = typeof feedbackTimeout === "number"
+        ? feedbackTimeout
+        : DEFAULT_FEEDBACK_TIMEOUT;
+    const handleCopy = (event) => {
+        const text = typeof copyText === "string"
+            ? copyText
+            : (codeRef.current?.textContent ?? "");
+        if (text) {
+            // Swallow rejections (writeText rejects when the document isn't focused or
+            // permission is denied); onClick + feedback still fire regardless.
+            void navigator.clipboard?.writeText(text)?.catch(() => { });
+        }
+        onClick?.(event);
+        setCopied(true);
+        clearTimeout(resetTimerRef.current);
+        resetTimerRef.current = setTimeout(() => setCopied(false), timeout);
+    };
     if (type === "inline") {
-        return (_jsx("code", { "data-slot": "carbon-compat-code-snippet", "data-type": "inline", "aria-label": typeof ariaLabel === "string" ? ariaLabel : undefined, className: cn("rounded bg-neutral-background-strong px-1.5 py-0.5 font-mono text-xs", disabled && "opacity-50", className), ...domRest, children: children }));
+        // Inline snippets are static — Carbon's click-to-copy inline behaviour is not
+        // modelled, so surface the copy-related props as dropped (they're only honoured
+        // in the block form above).
+        warnDroppedProps("CodeSnippet (inline)", {
+            onClick,
+            copyText,
+            feedback,
+            feedbackTimeout,
+            hideCopyButton,
+            copyButtonDescription,
+        });
+        return (_jsx("code", { ref: codeRef, "data-slot": "carbon-compat-code-snippet", "data-type": "inline", "aria-label": typeof ariaLabel === "string" ? ariaLabel : undefined, className: cn("rounded bg-neutral-background-strong px-1.5 py-0.5 font-mono text-xs", disabled && "opacity-50", className), ...domRest, children: children }));
     }
-    // block form (`single` or `multi`)
-    return (_jsx("pre", { "data-slot": "carbon-compat-code-snippet", "data-type": type, "aria-label": typeof ariaLabel === "string" ? ariaLabel : undefined, className: cn("overflow-x-auto rounded bg-neutral-background-strong p-3 font-mono text-xs", type === "multi" && "whitespace-pre", disabled && "opacity-50", className), ...domRest, children: _jsx("code", { children: children }) }));
+    // block form (`single` or `multi`). The bare wrapper is a non-scrolling
+    // positioning context for the copy button — identity (`data-slot`/`data-type`),
+    // consumer `className`, and pass-through DOM props stay on the `<pre>` (the
+    // scroll container) so the adapter's DOM contract matches the pre-copy-button
+    // version. The button lives on the wrapper (not inside the `<pre>`) so it stays
+    // fixed while long code scrolls horizontally.
+    return (_jsxs("div", { className: "relative", children: [_jsx("pre", { "data-slot": "carbon-compat-code-snippet", "data-type": type, className: cn("overflow-x-auto rounded bg-neutral-background-strong p-3 font-mono text-xs", type === "multi" && "whitespace-pre", !hideCopyButton && "pr-10", disabled && "opacity-50", className), ...domRest, children: _jsx("code", { ref: codeRef, children: children }) }), !hideCopyButton && (_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", disabled: disabled, onClick: handleCopy, "aria-label": copied ? feedbackLabel : copyLabel, title: copied ? feedbackLabel : copyLabel, className: "absolute top-1.5 right-1.5", children: copied ? (_jsx(Check, { className: "size-3.5 text-success-action-default", "aria-hidden": "true" })) : (_jsx(Copy, { className: "size-3.5", "aria-hidden": "true" })) })), _jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: copied ? feedbackLabel : "" })] }));
 }
 export { CodeSnippet };
 //# sourceMappingURL=code-snippet.js.map

package/dist/carbon-compat/code-snippet.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-snippet.js","sourceRoot":"","sources":["../../carbon-compat/code-snippet.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,EAAE,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAUxD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,WAAW,CAAC,EACnB,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACU;IACjB,qEAAqE;IACrE,2CAA2C;IAC3C,MAAM,EACJ,KAAK,EACL,SAAS,EACT,qBAAqB,EACrB,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,cAAc,EACd,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,EACxB,uBAAuB,EACvB,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,IAAI,EACJ,SAAS,EACT,GAAG,OAAO,EACX,GAAG,IAA+B,CAAC;IACpC,gBAAgB,CAAC,aAAa,EAAE;QAC9B,KAAK;QACL,SAAS;QACT,qBAAqB;QACrB,QAAQ;QACR,QAAQ;QACR,eAAe;QACf,cAAc;QACd,wBAAwB;QACxB,uBAAuB;QACvB,wBAAwB;QACxB,uBAAuB;QACvB,OAAO;QACP,YAAY;QACZ,YAAY;QACZ,QAAQ;QACR,KAAK;QACL,SAAS;QACT,IAAI;KACL,CAAC,CAAC;IAEH,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;QACtB,OAAO,CACL,4BACY,4BAA4B,eAC5B,QAAQ,gBACN,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjE,SAAS,EAAE,EAAE,CACX,sEAAsE,EACtE,QAAQ,IAAI,YAAY,EACxB,SAAS,CACV,KACI,OAA6C,YAEjD,QAAQ,GACJ,CACR,CAAC;IACJ,CAAC;IAED,mCAAmC;IACnC,OAAO,CACL,2BACY,4BAA4B,eAC3B,IAAI,gBACH,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjE,SAAS,EAAE,EAAE,CACX,4EAA4E,EAC5E,IAAI,KAAK,OAAO,IAAI,gBAAgB,EACpC,QAAQ,IAAI,YAAY,EACxB,SAAS,CACV,KACI,OAAgD,YAErD,yBAAO,QAAQ,GAAQ,GACnB,CACP,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"code-snippet.js","sourceRoot":"","sources":["../../carbon-compat/code-snippet.tsx"],"names":[],"mappings":"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"}

package/dist/carbon-compat/text-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../carbon-compat/text-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG,mBAAmB,CAAC;AAEhD,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAqIrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../carbon-compat/text-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG,mBAAmB,CAAC;AAEhD,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,qBA4IrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/carbon-compat/text-area.js

@@ -6,15 +6,13 @@ import { cn, warnDroppedProps } from "../src/lib/utils.js";
 function TextArea(props) {
     const { id, labelText, helperText, invalid, invalidText, warn, warnText, enableCounter, maxCount, counterMode, hideLabel, light, className, disabled, placeholder, value, defaultValue, onChange, onBlur, onFocus, rows, cols, readOnly, ...rest } = props;
     warnDroppedProps("TextArea", {
-        helperText,
-        invalid,
-        invalidText,
         warn,
         warnText,
         hideLabel,
         light,
     });
     const showCounter = enableCounter && maxCount !== undefined;
+    const message = invalid && invalidText !== undefined ? (_jsx("span", { className: "text-xs text-danger-action-default", children: invalidText })) : !invalid && helperText !== undefined ? (_jsx("span", { className: "text-xs text-neutral-foreground-subtle", children: helperText })) : null;
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = React.useState(() => String(defaultValue ?? ""));
     const liveValue = isControlled ? String(value) : uncontrolledValue;
@@ -23,18 +21,18 @@ function TextArea(props) {
             setUncontrolledValue(event.target.value);
         onChange?.(event);
     };
-    const wrapped = labelText !== undefined || showCounter;
+    const wrapped = labelText !== undefined || showCounter || message !== null;
     const counterId = showCounter && id ? `${id}-counter` : undefined;
     // Carbon auto-caps character-mode counters via native `maxLength`; word mode
     // has no native equivalent and is left uncapped, matching Carbon's own behavior.
     const nativeMaxLength = showCounter && counterMode !== "word" ? maxCount : undefined;
-    const textarea = (_jsx(Textarea, { id: id, className: wrapped ? undefined : className, disabled: disabled, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onBlur: onBlur, onFocus: onFocus, rows: rows, cols: cols, readOnly: readOnly, maxLength: nativeMaxLength, "aria-describedby": counterId, ...rest }));
+    const textarea = (_jsx(Textarea, { id: id, className: wrapped ? undefined : className, disabled: disabled, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onBlur: onBlur, onFocus: onFocus, rows: rows, cols: cols, readOnly: readOnly, maxLength: nativeMaxLength, "aria-invalid": invalid || undefined, "aria-describedby": counterId, ...rest }));
     const counter = showCounter ? (_jsx(CharacterCount, { id: counterId, value: liveValue, max: maxCount, mode: counterMode === "word" ? "word" : "character", className: "self-end" })) : null;
     if (labelText !== undefined) {
-        return (_jsxs("label", { htmlFor: id, className: cn("flex flex-col gap-2 text-sm", className), children: [_jsx("span", { children: labelText }), textarea, counter] }));
+        return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [_jsxs("label", { htmlFor: id, className: "flex flex-col gap-2 text-sm", children: [_jsx("span", { children: labelText }), textarea] }), message, counter] }));
     }
-    if (counter) {
-        return (_jsxs("div", { className: cn("flex flex-col gap-1", className), children: [textarea, counter] }));
+    if (counter || message) {
+        return (_jsxs("div", { className: cn("flex flex-col gap-1", className), children: [textarea, message, counter] }));
     }
     return textarea;
 }

package/dist/carbon-compat/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../carbon-compat/text-area.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,EAAE,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAKxD,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,EACJ,EAAE,EACF,SAAS,EACT,UAAU,EACV,OAAO,EACP,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,WAAW,EACX,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAwBH,CAAC;IACF,gBAAgB,CAAC,UAAU,EAAE;QAC3B,UAAU;QACV,OAAO;QACP,WAAW;QACX,IAAI;QACJ,QAAQ;QACR,SAAS;QACT,KAAK;KACN,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,aAAa,IAAI,QAAQ,KAAK,SAAS,CAAC;IAC5D,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,CAAC;IACzC,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CACpE,MAAM,CAAC,YAAY,IAAI,EAAE,CAAC,CAC3B,CAAC;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAEnE,MAAM,YAAY,GAAkD,CAClE,KAAK,EACL,EAAE;QACF,IAAI,WAAW,IAAI,CAAC,YAAY;YAAE,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3E,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,SAAS,KAAK,SAAS,IAAI,WAAW,CAAC;IACvD,MAAM,SAAS,GAAG,WAAW,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAClE,6EAA6E;IAC7E,iFAAiF;IACjF,MAAM,eAAe,GACnB,WAAW,IAAI,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/D,MAAM,QAAQ,GAAG,CACf,KAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,sBACR,SAAS,KACtB,IAA8C,GACnD,CACH,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,CAC5B,KAAC,cAAc,IACb,EAAE,EAAE,SAAS,EACb,KAAK,EAAE,SAAS,EAChB,GAAG,EAAE,QAAkB,EACvB,IAAI,EAAE,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EACnD,SAAS,EAAC,UAAU,GACpB,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAC5B,OAAO,CACL,iBACE,OAAO,EAAE,EAAE,EACX,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC,aAEvD,yBAAO,SAAS,GAAQ,EACvB,QAAQ,EACR,OAAO,IACF,CACT,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,aACjD,QAAQ,EACR,OAAO,IACJ,CACP,CAAC;IACJ,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../carbon-compat/text-area.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,EAAE,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAKxD,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,EACJ,EAAE,EACF,SAAS,EACT,UAAU,EACV,OAAO,EACP,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,WAAW,EACX,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAwBH,CAAC;IACF,gBAAgB,CAAC,UAAU,EAAE;QAC3B,IAAI;QACJ,QAAQ;QACR,SAAS;QACT,KAAK;KACN,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,aAAa,IAAI,QAAQ,KAAK,SAAS,CAAC;IAC5D,MAAM,OAAO,GACX,OAAO,IAAI,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,CACrC,eAAM,SAAS,EAAC,oCAAoC,YAAE,WAAW,GAAQ,CAC1E,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,CACzC,eAAM,SAAS,EAAC,wCAAwC,YACrD,UAAU,GACN,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,CAAC;IACzC,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CACpE,MAAM,CAAC,YAAY,IAAI,EAAE,CAAC,CAC3B,CAAC;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAEnE,MAAM,YAAY,GAAkD,CAClE,KAAK,EACL,EAAE;QACF,IAAI,WAAW,IAAI,CAAC,YAAY;YAAE,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3E,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,SAAS,KAAK,SAAS,IAAI,WAAW,IAAI,OAAO,KAAK,IAAI,CAAC;IAC3E,MAAM,SAAS,GAAG,WAAW,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAClE,6EAA6E;IAC7E,iFAAiF;IACjF,MAAM,eAAe,GACnB,WAAW,IAAI,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/D,MAAM,QAAQ,GAAG,CACf,KAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,kBACZ,OAAO,IAAI,SAAS,sBAChB,SAAS,KACtB,IAA8C,GACnD,CACH,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,CAC5B,KAAC,cAAc,IACb,EAAE,EAAE,SAAS,EACb,KAAK,EAAE,SAAS,EAChB,GAAG,EAAE,QAAkB,EACvB,IAAI,EAAE,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EACnD,SAAS,EAAC,UAAU,GACpB,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAC5B,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,aAClD,iBAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAC,6BAA6B,aACzD,yBAAO,SAAS,GAAQ,EACvB,QAAQ,IACH,EACP,OAAO,EACP,OAAO,IACJ,CACP,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,IAAI,OAAO,EAAE,CAAC;QACvB,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,aACjD,QAAQ,EACR,OAAO,EACP,OAAO,IACJ,CACP,CAAC;IACJ,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/src/components/ui/button.d.ts

@@ -6,6 +6,16 @@ declare const buttonVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
+    /**
+     * Shows an animated spinner in place of the leading icon (or before the
+     * label when there is no icon), sets `aria-busy="true"` and
+     * `aria-disabled="true"`, and ignores clicks so the action can't be
+     * double-submitted. Uses `aria-disabled` rather than the native
+     * `disabled` attribute so the button stays focusable and reachable by
+     * screen readers while busy. The label and the accessible name stay
+     * unchanged.
+     */
+    loading?: boolean;
 };
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

package/dist/src/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAMlE,QAAA,MAAM,cAAc;;;8EAiCnB,CAAC;AAEF,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgCJ,QAAA,MAAM,MAAM,oGAAsD,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAOlE,QAAA,MAAM,cAAc;;;8EAiCnB,CAAC;AAEF,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAmFJ,QAAA,MAAM,MAAM,oGAAsD,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/src/components/ui/button.js

@@ -1,16 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
 import { Slot } from "radix-ui";
 import { cn } from "../../lib/utils.js";
 import { withRef } from "../../lib/with-ref.js";
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 focus-visible:ring-ring data-[focus-visible-restore]:ring-3 data-[focus-visible-restore]:ring-ring active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-danger-action-default aria-invalid:ring-3 aria-invalid:ring-danger-action-default/20 dark:aria-invalid:border-danger-action-default/50 dark:aria-invalid:ring-danger-action-default/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 focus-visible:ring-ring data-[focus-visible-restore]:ring-3 data-[focus-visible-restore]:ring-ring active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-danger-action-default aria-invalid:ring-3 aria-invalid:ring-danger-action-default/20 dark:aria-invalid:border-danger-action-default/50 dark:aria-invalid:ring-danger-action-default/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
-            default: "bg-primary-action-default text-primary-action-foreground hover:bg-primary-action-hover active:bg-primary-action-active disabled:bg-primary-action-disabled",
+            default: "bg-primary-action-default text-primary-action-foreground hover:bg-primary-action-hover active:bg-primary-action-active disabled:bg-primary-action-disabled aria-disabled:bg-primary-action-disabled",
             secondary: "border-input bg-neutral-background-subtle text-neutral-foreground-strong hover:bg-neutral-background-medium active:bg-neutral-background-strong aria-expanded:bg-neutral-background-medium aria-expanded:text-neutral-foreground-strong dark:hover:bg-neutral-background-medium dark:active:bg-neutral-background-strong dark:aria-expanded:bg-neutral-background-medium",
             ghost: "text-neutral-foreground-subtle hover:bg-neutral-background-medium hover:text-neutral-foreground-strong active:bg-neutral-background-strong aria-expanded:bg-neutral-background-medium aria-expanded:text-neutral-foreground-strong dark:hover:bg-neutral-background-medium dark:active:bg-neutral-background-strong dark:aria-expanded:bg-neutral-background-medium",
-            destructive: "bg-danger-action-default text-danger-action-foreground hover:bg-danger-action-hover active:bg-danger-action-active disabled:bg-danger-action-disabled focus-visible:border-danger-border-subtle focus-visible:ring-danger-action-default/20 dark:focus-visible:ring-danger-action-default/40",
+            destructive: "bg-danger-action-default text-danger-action-foreground hover:bg-danger-action-hover active:bg-danger-action-active disabled:bg-danger-action-disabled aria-disabled:bg-danger-action-disabled focus-visible:border-danger-border-subtle focus-visible:ring-danger-action-default/20 dark:focus-visible:ring-danger-action-default/40",
             link: "text-info-action-default underline-offset-4 hover:underline",
         },
         size: {
@@ -29,7 +30,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
         size: "default",
     },
 });
-function ButtonImpl({ ref, className, variant = "default", size = "default", asChild = false, type, ...props }) {
+function ButtonImpl({ ref, className, variant = "default", size = "default", asChild = false, loading = false, disabled, type, children, onClick, "aria-busy": ariaBusy, "aria-disabled": ariaDisabled, ...props }) {
     const Comp = asChild ? Slot.Root : "button";
     // Default native <button> to type="button" so it never triggers an
     // accidental form submit when placed inside a <form> (Dialog, Popover,
@@ -37,7 +38,33 @@ function ButtonImpl({ ref, className, variant = "default", size = "default", asC
     // element may not be a <button>, and forcing `type` on a non-button would
     // be invalid HTML.
     const resolvedType = asChild ? type : (type ?? "button");
-    return (_jsx(Comp, { ref: ref, type: resolvedType, "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
+    // Loading semantics apply to the native <button> only. `asChild` renders a
+    // Radix Slot, which requires exactly one child — injecting a spinner sibling
+    // would break `React.Children.only` — and may forward to a non-button
+    // element (e.g. <a>) that cannot be `disabled`.
+    const isLoading = loading && !asChild;
+    // Keep a single child so `asChild` (Radix Slot → React.Children.only) never
+    // sees an array. When loading, wrap the spinner + label in one fragment;
+    // display:contents keeps the button's flex/gap intact while
+    // `[&>svg:first-child]:hidden` hides the original leading icon (already
+    // aria-hidden, so the accessible name is untouched). No-op for text-only
+    // children; collapses an icon-only button to just the spinner.
+    const content = isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { "aria-hidden": "true", "data-icon": "inline-start", className: "animate-spin" }), _jsx("span", { className: "contents [&>svg:first-child]:hidden", children: children })] })) : (children);
+    // `aria-disabled` (not native `disabled`) while loading: native `disabled`
+    // pulls the button out of the tab order and, in some browsers, the
+    // accessibility tree — a screen reader user could lose focus entirely and
+    // never hear the busy state. Staying focusable means the click itself must
+    // be blocked in JS instead of by the browser; `preventDefault` also covers
+    // `type="submit"` buttons, which would otherwise submit the form with no
+    // handler involved at all.
+    const handleClick = (event) => {
+        if (isLoading) {
+            event.preventDefault();
+            return;
+        }
+        onClick?.(event);
+    };
+    return (_jsx(Comp, { ref: ref, type: resolvedType, "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props, disabled: disabled, "aria-busy": isLoading || ariaBusy, "aria-disabled": isLoading || ariaDisabled, onClick: handleClick, children: content }));
 }
 const Button = withRef(ButtonImpl);
 export { Button, buttonVariants };

package/dist/src/components/ui/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/ui/button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,cAAc,GAAG,GAAG,CACxB,krBAAkrB,EAClrB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EACL,4JAA4J;YAC9J,SAAS,EACP,0WAA0W;YAC5W,KAAK,EACH,qWAAqW;YACvW,WAAW,EACT,8RAA8R;YAChS,IAAI,EAAE,6DAA6D;SACpE;QACD,IAAI,EAAE;YACJ,OAAO,EACL,sFAAsF;YACxF,EAAE,EAAE,0KAA0K;YAC9K,EAAE,EAAE,0KAA0K;YAC9K,EAAE,EAAE,uFAAuF;YAC3F,IAAI,EAAE,QAAQ;YACd,SAAS,EACP,oFAAoF;YACtF,SAAS,EAAE,+CAA+C;YAC1D,SAAS,EAAE,SAAS;SACrB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAC;AAOF,SAAS,UAAU,CAAC,EAClB,GAAG,EACH,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,KAAK,EACf,IAAI,EACJ,GAAG,KAAK,EACI;IACZ,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC5C,mEAAmE;IACnE,uEAAuE;IACvE,yEAAyE;IACzE,0EAA0E;IAC1E,mBAAmB;IACnB,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC;IAEzD,OAAO,CACL,KAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,YAAY,eACR,QAAQ,kBACJ,OAAO,eACV,IAAI,EACf,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,KACvD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,OAAO,CAAiC,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/ui/button.tsx"],"names":[],"mappings":"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"}

package/dist/styles.css

@@ -185,6 +185,9 @@
 .top-0 {
   top: 0px;
 }
+.top-1\.5 {
+  top: calc(var(--spacing) * 1.5);
+}
 .top-1\/2 {
   top: calc(1 / 2 * 100%);
 }
@@ -203,6 +206,9 @@
 .right-0 {
   right: 0px;
 }
+.right-1\.5 {
+  right: calc(var(--spacing) * 1.5);
+}
 .right-2 {
   right: calc(var(--spacing) * 2);
 }
@@ -1795,6 +1801,9 @@
 .pr-9 {
   padding-right: calc(var(--spacing) * 9);
 }
+.pr-10 {
+  padding-right: calc(var(--spacing) * 10);
+}
 .pb-0 {
   padding-bottom: 0px;
 }
@@ -2812,6 +2821,15 @@
 .aria-disabled\:cursor-default[aria-disabled="true"] {
   cursor: default;
 }
+.aria-disabled\:bg-danger-action-disabled[aria-disabled="true"] {
+  background-color: var(--danger-action-disabled);
+}
+.aria-disabled\:bg-primary-action-disabled[aria-disabled="true"] {
+  background-color: var(--primary-action-disabled);
+}
+.aria-disabled\:opacity-50[aria-disabled="true"] {
+  opacity: 50%;
+}
 .aria-expanded\:bg-neutral-background-medium[aria-expanded="true"] {
   background-color: var(--neutral-background-medium);
 }
@@ -3476,6 +3494,9 @@
 .\[\&\>svg\]\:text-neutral-foreground-subtle > svg {
   color: var(--neutral-foreground-subtle);
 }
+.\[\&\>svg\:first-child\]\:hidden > svg:first-child {
+  display: none;
+}
 .\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 0px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/design-system",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "Camunda's AI-first design system. shadcn + Tailwind components, design tokens aligned to Camunda's identity, and AI tooling for component authoring + migration.",
   "license": "Apache-2.0",
   "repository": {