@antadesign/anta 0.3.9 → 0.3.10

package/dist/anta_helpers.d.ts

@@ -1,3 +1,4 @@
+import type { IconShape } from "./elements/a-icon.shapes";
 export declare function hasChildren(children: React.ReactNode): boolean;
 /**
  * Normalize a wrapper's label content the way `Button` / `Tabs` do: a bare string
@@ -74,6 +75,23 @@ export declare function roundStyle(round: boolean | number | string | undefined,
  * `false` / `undefined` / `''`). Mirrors what `roundStyle` emits a variable for.
  */
 export declare function roundAttr(round: boolean | number | string | undefined): '' | undefined;
+/**
+ * Copy-feedback state for `ButtonCopy` / `MenuItemCopy` (and any future copy
+ * preset). The `<a-button>` / `<a-menu-item>` element performs the clipboard
+ * write and fires a `copydone` event; this hook holds the transient result and
+ * maps it to the icon + tone the wrapper renders: a `check` / `success` on
+ * success, an `x` / `critical` on failure, otherwise the caller's own values.
+ * Returns the `handleCopied` listener the wrapper wires to `onCopied`.
+ *
+ * Kept here (not duplicated per preset) so the timing, glyph choice, and timer
+ * cleanup live in one place. Hooks come through the `jsx-runtime` indirection, so
+ * a custom non-React runtime supplies its own via `configure()`.
+ */
+export declare function useCopyFeedback(icon: IconShape | undefined, tone: string | undefined, onCopied?: (ok: boolean) => void): {
+    shownIcon: IconShape | undefined;
+    shownTone: string | undefined;
+    handleCopied: (ok: boolean) => void;
+};
 /**
  * The rect a floating-element anchor advertises for positioning. Any element may
  * implement `getAnchorRect(): DOMRect` to point positioners (`a-menu`,

package/dist/anta_helpers.js

@@ -1,4 +1,4 @@
-import { jsx } from "./jsx-runtime";
+import { jsx, useState, useMemo } from "./jsx-runtime";
 function hasChildren(children) {
   return Array.isArray(children) ? children.length > 0 : children != null;
 }
@@ -40,6 +40,20 @@ function roundStyle(round, varName, base) {
 function roundAttr(round) {
   return round || round === 0 ? "" : void 0;
 }
+const COPY_FEEDBACK_MS = 2e3;
+function useCopyFeedback(icon, tone, onCopied) {
+  const [status, setStatus] = useState("idle");
+  const box = useMemo(() => ({ timer: void 0 }), []);
+  const handleCopied = (ok) => {
+    clearTimeout(box.timer);
+    setStatus(ok ? "ok" : "fail");
+    box.timer = setTimeout(() => setStatus("idle"), COPY_FEEDBACK_MS);
+    onCopied?.(ok);
+  };
+  const shownIcon = status === "ok" ? "check" : status === "fail" ? "x" : icon;
+  const shownTone = status === "ok" ? "success" : status === "fail" ? "critical" : tone;
+  return { shownIcon, shownTone, handleCopied };
+}
 function anchorRect(el) {
   const fn = el.getAnchorRect;
   return typeof fn === "function" ? fn.call(el) : el.getBoundingClientRect();
@@ -127,5 +141,6 @@ export {
   roundStyle,
   setMenuPresence,
   toneStyle,
+  useCopyFeedback,
   wrapLabel
 };

package/dist/components/Button.d.ts

@@ -100,7 +100,50 @@ export type PriorityMode = {
     /** Drops outer padding to zero. */
     paddingless?: boolean;
 };
-export type ButtonProps = BaseButtonProps & PriorityMode & ContentMode & SubmitMode & BaseProps;
+/** Copy axis — turns the button into a copy control that writes to the clipboard
+ *  on click and flashes a success / failure state (see `<a-button>`'s copy
+ *  behavior). **Exactly one** of `copy`, `copyNode`, or `copyLazy` may be set;
+ *  the union makes the others `never` in each mode. For the batteries-included
+ *  preset, use `ButtonCopy`. */
+export type CopyMode = {
+    copy?: never;
+    copyNode?: never;
+    copyLazy?: never;
+    onCopied?: never;
+    onCopyRequest?: never;
+} | {
+    /** Text copied to the clipboard on click. */
+    copy: string;
+    copyNode?: never;
+    copyLazy?: never;
+    onCopyRequest?: never;
+    /** Fires after the copy attempt with whether it succeeded. */
+    onCopied?: (ok: boolean) => void;
+} | {
+    /** Copy a DOM node as rich text instead of a string. `true` copies the
+     *  nearest ancestor marked `data-copy-source`; a string is a CSS selector
+     *  for an ancestor region (`closest`). The copy control is stripped from
+     *  the copied output. */
+    copyNode: boolean | string;
+    copy?: never;
+    copyLazy?: never;
+    onCopyRequest?: never;
+    /** Fires after the copy attempt with whether it succeeded. */
+    onCopied?: (ok: boolean) => void;
+} | {
+    /** Lazy copy: the content isn't computed or held in the DOM until the
+     *  click. The click fires `onCopyRequest(provide)`; call `provide(text)`
+     *  with the value — synchronously, or after an `await` (the browser's
+     *  transient-activation window still covers the write). */
+    copyLazy: true;
+    copy?: never;
+    copyNode?: never;
+    /** Supplies the lazily-computed content on click: call `provide(text)`. */
+    onCopyRequest: (provide: (text: string) => void) => void;
+    /** Fires after the copy attempt with whether it succeeded. */
+    onCopied?: (ok: boolean) => void;
+};
+export type ButtonProps = BaseButtonProps & PriorityMode & ContentMode & SubmitMode & CopyMode & BaseProps;
 /**
  * Action button.
  *
@@ -121,4 +164,4 @@ export type ButtonProps = BaseButtonProps & PriorityMode & ContentMode & SubmitM
  * <Button href="/docs" target="_blank" label="Read the docs" />
  * ```
  */
-export declare const Button: ({ priority, tone, underline, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, href, type, form, className, style, children, ...rest }: ButtonProps) => any;
+export declare const Button: ({ priority, tone, underline, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, href, type, form, copy, copyNode, copyLazy, onCopied, onCopyRequest, className, style, children, ...rest }: ButtonProps) => any;

package/dist/components/Button.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
+import { toneStyle, roundStyle, roundAttr, wrapLabel, nativeStateChange } from "../anta_helpers";
 const Button = ({
   priority,
   tone,
@@ -16,14 +16,21 @@ const Button = ({
   href,
   type,
   form,
+  copy,
+  copyNode,
+  copyLazy,
+  onCopied,
+  onCopyRequest,
   className,
   style,
   children,
   ...rest
 }) => {
+  const isCopy = copy != null || copyNode != null || copyLazy === true;
   const toneAttr = tone || void 0;
   const computedStyle = roundStyle(round, "--button-round", toneStyle(toneAttr, "--button-tone-source", style));
-  const isIconOnly = icon != null && label == null && children == null && iconTrailing == null;
+  const leadingIcon = icon ?? (isCopy ? "copy" : void 0);
+  const isIconOnly = leadingIcon != null && label == null && children == null && iconTrailing == null;
   const sharedAttrs = {
     // `<a-button>` is a custom element with no implicit ARIA role, so AT would
     // announce it as a generic clickable — and `aria-pressed` below is only
@@ -53,14 +60,26 @@ const Button = ({
     "aria-disabled": disabled || loading ? "true" : void 0,
     "aria-busy": loading ? "true" : void 0,
     "aria-pressed": selected ? "true" : void 0,
-    // Icon-only buttons get an accessible name from the icon shape;
-    // consumer's own `aria-label` (via ...rest) wins by spread order.
-    "aria-label": isIconOnly ? icon : void 0,
+    // Icon-only buttons get an accessible name: "Copy" for a copy control (its
+    // glyph carries no text), else the icon shape. Consumer's own `aria-label`
+    // (via ...rest) wins by spread order.
+    "aria-label": isIconOnly ? isCopy ? "Copy" : icon : void 0,
+    // Copy behavior — the element reads these and performs the write itself.
+    copy: copy != null ? copy : void 0,
+    "copy-node": copyNode === true ? "" : typeof copyNode === "string" ? copyNode : void 0,
+    "copy-lazy": copyLazy ? "" : void 0,
+    // Marks the control so `copy-node` serialization strips it from the copied
+    // node (a copy button inside the copied region shouldn't paste itself).
+    "data-copy-node-button": copyNode != null && copyNode !== false ? "" : void 0,
+    oncopydone: onCopied ? (e) => onCopied(nativeStateChange(e).detail?.ok ?? false) : void 0,
+    // The element hands `provide` on the request event; forward it so the
+    // consumer supplies the lazily-computed content.
+    oncopyrequest: onCopyRequest ? (e) => onCopyRequest(nativeStateChange(e).detail.provide) : void 0,
     class: className,
     style: computedStyle
   };
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
+    leadingIcon && /* @__PURE__ */ jsx("a-icon", { shape: leadingIcon, "aria-hidden": "true" }),
     label != null && /* @__PURE__ */ jsx("a-button-label", { children: label }),
     wrapLabel(children, "a-button-label"),
     iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" })

package/dist/components/ButtonCopy.d.ts

@@ -0,0 +1,32 @@
+import { type ButtonProps } from './Button';
+/** `ButtonProps` narrowed so a copy target is required — a copy button must copy
+ *  something. Intersecting with the target union drops the "no copy prop" member
+ *  of `CopyMode` (its `copy?: never` makes each combination `never`). */
+export type ButtonCopyProps = ButtonProps & ({
+    copy: string;
+} | {
+    copyNode: boolean | string;
+} | {
+    copyLazy: true;
+});
+/**
+ * Copy button — a `Button` preset for copy-to-clipboard. Set `copy` for a literal
+ * string, `copyNode` to copy a DOM region, or `copyLazy` + `onCopyRequest` to
+ * compute the content on click. The `<a-button>` element performs the write and
+ * reports the result; this wrapper flips the leading icon to a check (success) or
+ * ✕ (failure) and retones to `success` / `critical` for ~2s — a JSX re-render, no
+ * element state (see `useCopyFeedback`).
+ *
+ * With a `label` it's a labeled button; without one it's an icon-only copy button.
+ * Everything else is a normal `Button` prop — `tone`, `priority`, `size`, `icon`
+ * (the resting glyph), `onCopied`.
+ *
+ * @example
+ * ```tsx
+ * <ButtonCopy copy="npm i @antadesign/anta" label="Copy install" />
+ * <ButtonCopy copy="https://anta.design" />          // icon-only
+ * <ButtonCopy copyNode=".snippet" label="Copy block" priority="tertiary" />
+ * <ButtonCopy copyLazy label="Copy report" onCopyRequest={(p) => p(buildReport())} />
+ * ```
+ */
+export declare const ButtonCopy: ({ icon, tone, onCopied, ...rest }: ButtonCopyProps) => any;

package/dist/components/ButtonCopy.js

@@ -0,0 +1,10 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import { Button } from "./Button";
+import { useCopyFeedback } from "../anta_helpers";
+const ButtonCopy = ({ icon, tone, onCopied, ...rest }) => {
+  const { shownIcon, shownTone, handleCopied } = useCopyFeedback(icon, tone, onCopied);
+  return /* @__PURE__ */ jsx(Button, { icon: shownIcon, tone: shownTone, onCopied: handleCopied, ...rest });
+};
+export {
+  ButtonCopy
+};

package/dist/components/MenuItem.d.ts

@@ -1,5 +1,6 @@
 import type { BaseProps } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
+import type { CopyMode } from './Button';
 /** Props shared by every menu item, link or not. */
 export interface MenuItemCommonProps extends BaseProps {
     /** Leading icon shape. */
@@ -83,6 +84,11 @@ export type MenuItemLinkMode = {
     selectionIndicator?: never;
     indeterminate?: never;
     indicator?: never;
+    copy?: never;
+    copyNode?: never;
+    copyLazy?: never;
+    onCopied?: never;
+    onCopyRequest?: never;
 };
 export type MenuItemActionMode = {
     href?: never;
@@ -114,7 +120,7 @@ export type MenuItemActionMode = {
      *  passive (aria-hidden, no pointer events) so the row owns the click. */
     indicator?: React.ReactNode;
 };
-export type MenuItemProps = MenuItemCommonProps & (MenuItemLinkMode | MenuItemActionMode);
+export type MenuItemProps = MenuItemCommonProps & (MenuItemLinkMode | (MenuItemActionMode & CopyMode));
 /**
  * MenuItem — a single selectable row inside a `Menu`. Composes a leading
  * `icon`, a `label` (or `children`), an optional trailing `kbd` hint, and an
@@ -135,4 +141,4 @@ export type MenuItemProps = MenuItemCommonProps & (MenuItemLinkMode | MenuItemAc
  * </MenuItem>
  * ```
  */
-export declare const MenuItem: ({ icon, label, hint, kbd, iconTrailing, disabled, selected, selectionIndicator, indeterminate, indicator, tone, toneSelected, submenu, value, onSelect, href, target, rel, download, ping, role: roleOverride, className, style, children, ...rest }: MenuItemProps) => any;
+export declare const MenuItem: ({ icon, label, hint, kbd, iconTrailing, disabled, selected, selectionIndicator, indeterminate, indicator, tone, toneSelected, submenu, value, onSelect, href, target, rel, download, ping, copy, copyNode, copyLazy, onCopied, onCopyRequest, role: roleOverride, className, style, children, ...rest }: MenuItemProps) => any;

package/dist/components/MenuItem.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
+import { toneStyle, nativeStateChange } from "../anta_helpers";
 const MenuItem = ({
   icon,
   label,
@@ -21,12 +21,19 @@ const MenuItem = ({
   rel,
   download,
   ping,
+  copy,
+  copyNode,
+  copyLazy,
+  onCopied,
+  onCopyRequest,
   role: roleOverride,
   className,
   style,
   children,
   ...rest
 }) => {
+  const isCopy = copy != null || copyNode != null || copyLazy === true;
+  const leadingIcon = icon ?? (isCopy ? "copy" : void 0);
   const checkable = selectionIndicator === "checkbox" || selectionIndicator === "radio" || selectionIndicator === "check";
   const role = selectionIndicator === "checkbox" ? "menuitemcheckbox" : selectionIndicator === "radio" || selectionIndicator === "check" ? "menuitemradio" : "menuitem";
   const ariaChecked = !checkable ? void 0 : selectionIndicator === "checkbox" && indeterminate ? "mixed" : selected ? "true" : "false";
@@ -76,6 +83,12 @@ const MenuItem = ({
       "aria-haspopup": submenu ? "menu" : void 0,
       "aria-disabled": disabled ? "true" : void 0,
       onmenuselect: onSelect ? (e) => onSelect(e, { value, label }) : void 0,
+      copy: copy != null ? copy : void 0,
+      "copy-node": copyNode === true ? "" : typeof copyNode === "string" ? copyNode : void 0,
+      "copy-lazy": copyLazy ? "" : void 0,
+      "data-copy-node-button": copyNode != null && copyNode !== false ? "" : void 0,
+      oncopydone: onCopied ? (e) => onCopied(nativeStateChange(e).detail?.ok ?? false) : void 0,
+      oncopyrequest: onCopyRequest ? (e) => onCopyRequest(nativeStateChange(e).detail.provide) : void 0,
       class: className,
       ...rest,
       children: [
@@ -116,7 +129,7 @@ const MenuItem = ({
             }
           )
         ) : null,
-        icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
+        leadingIcon && /* @__PURE__ */ jsx("a-icon", { shape: leadingIcon, "aria-hidden": "true" }),
         labelNode,
         children,
         kbd && /* @__PURE__ */ jsx("kbd", { children: kbd }),

package/dist/components/MenuItemCopy.d.ts

@@ -0,0 +1,33 @@
+import { type MenuItemCommonProps, type MenuItemActionMode } from './MenuItem';
+import type { CopyMode } from './Button';
+/** The action-mode menu-item props plus a required copy target (a copying row
+ *  must copy something). The target intersection drops `CopyMode`'s "no copy
+ *  prop" member. */
+export type MenuItemCopyProps = MenuItemCommonProps & MenuItemActionMode & CopyMode & ({
+    copy: string;
+} | {
+    copyNode: boolean | string;
+} | {
+    copyLazy: true;
+});
+/**
+ * Copying menu item — a `MenuItem` preset for copy-to-clipboard rows inside a
+ * `Menu`. Set `copy` for a literal string, `copyNode` to copy a DOM region, or
+ * `copyLazy` + `onCopyRequest` to compute the content on select. The
+ * `<a-menu-item>` element performs the write when the row is chosen; this wrapper
+ * flips the leading icon to a check / ✕ and retones for ~2s (see `useCopyFeedback`).
+ *
+ * The menu closes on select by default, so the feedback shows only when the row
+ * is kept open (`data-menu-open`). Defaults `label` to "Copy" and the leading
+ * `icon` to `copy`; override either. Other props pass through — `tone`, `kbd`,
+ * `onCopied`.
+ *
+ * @example
+ * ```tsx
+ * <Menu>
+ *   <MenuItemCopy copy={shareUrl} label="Copy link" kbd="⌘C" />
+ *   <MenuItemCopy copyNode=".invoice" label="Copy invoice" data-menu-open />
+ * </Menu>
+ * ```
+ */
+export declare const MenuItemCopy: ({ label, icon, tone, onCopied, ...rest }: MenuItemCopyProps) => any;

package/dist/components/MenuItemCopy.js

@@ -0,0 +1,10 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import { MenuItem } from "./MenuItem";
+import { useCopyFeedback } from "../anta_helpers";
+const MenuItemCopy = ({ label = "Copy", icon = "copy", tone, onCopied, ...rest }) => {
+  const { shownIcon, shownTone, handleCopied } = useCopyFeedback(icon, tone, onCopied);
+  return /* @__PURE__ */ jsx(MenuItem, { label, icon: shownIcon, tone: shownTone, onCopied: handleCopied, ...rest });
+};
+export {
+  MenuItemCopy
+};

package/dist/components/Title.d.ts

@@ -24,18 +24,22 @@ export interface TitleProps extends BaseProps {
  * — so there are no `icon` / `iconTrailing` props; just compose
  * inside.
  *
- * Raw `<h1>`-`<h6>` get the same visual styling via `src/reset.css`,
- * so use a real heading tag if SEO matters and you don't need the
- * `tone` / `priority` props.
+ * `<Title>` carries no vertical margins: it's a spacing-neutral atom
+ * that drops into any container, and the parent owns spacing (a `gap`
+ * or padding). Raw `<h1>`-`<h6>` do keep per-level top/bottom margins
+ * (via `src/reset.css`) for document prose rhythm — so use a real
+ * heading tag if SEO matters or you want that built-in rhythm and don't
+ * need the `tone` / `priority` props.
  *
  * Styling notes (`a-title.css` ships comment-free): `<a-title>` is
  * intentionally CSS-only — no JS, no shadow DOM, not even
  * `customElements.define`; the browser treats it as a generic unknown
  * element and the CSS gives it block layout, the demi-bold variable-font
- * weight, and the per-level type scale + vertical rhythm. The matching
- * `h1`–`h6` rules in `src/reset.css` are kept in lockstep so raw markup
- * looks the same as `<Title level={n}>`. The tone × priority color matrix
- * has the same shape as `a-text`'s.
+ * weight, and the per-level type scale. The matching `h1`–`h6` rules in
+ * `src/reset.css` share that type scale and weight, so raw markup reads
+ * the same as `<Title level={n}>` — they diverge only on margins: raw
+ * headings carry the document vertical rhythm, `<a-title>` is margin-free.
+ * The tone × priority color matrix has the same shape as `a-text`'s.
  *
  * Requires `@antadesign/anta/elements` to be imported (client-side only)
  * so the CSS ships with the page.

package/dist/elements/a-button.d.ts

@@ -63,5 +63,9 @@ declare global {
  */
 export declare class AButtonElement extends HTMLElementBase {
     connectedCallback(): void;
+    /** Perform a copy if this button is a copy control (`copy` / `copy-node` /
+     *  `copy-lazy`). Called from the delegated click handler on activation. The
+     *  outcome is announced via a `copydone` event the wrapper reflects. */
+    performCopy(): boolean;
 }
 export declare function register_a_button(): void;

package/dist/elements/a-button.js

@@ -1,4 +1,5 @@
 import { HTMLElementBase } from "../anta_helpers";
+import { runCopy } from "./copy-behavior";
 import "./a-button.css";
 function installDocumentHandlers(doc) {
   if (!doc || doc.hasKeyListenerForAButton) return;
@@ -10,6 +11,12 @@ class AButtonElement extends HTMLElementBase {
   connectedCallback() {
     installDocumentHandlers(this.doc);
   }
+  /** Perform a copy if this button is a copy control (`copy` / `copy-node` /
+   *  `copy-lazy`). Called from the delegated click handler on activation. The
+   *  outcome is announced via a `copydone` event the wrapper reflects. */
+  performCopy() {
+    return runCopy(this);
+  }
 }
 function findForm(el) {
   const formId = el.getAttribute("form");
@@ -41,6 +48,7 @@ function handleClick(e) {
       new CustomEvent(customEvent, { bubbles: true, cancelable: true })
     );
   }
+  el.performCopy();
   const type = el.getAttribute("type") || "button";
   const form = findForm(el);
   if (!form) return;

package/dist/elements/a-menu-item.js

@@ -1,10 +1,12 @@
 import { HTMLElementBase } from "../anta_helpers";
+import { runCopy } from "./copy-behavior";
 import "./a-menu-item.css";
 class AMenuItemElement extends HTMLElementBase {
   internals;
   constructor() {
     super();
     this.internals = this.attachInternals?.();
+    this.addEventListener("menuselect", () => runCopy(this));
   }
   /** The active (combobox) cursor. `a-menu` sets this **property** (never an
    *  attribute — no DOM mutation, same rule as `a-radio.selected`) as ArrowUp/Down

package/dist/elements/a-text.css

@@ -1 +1 @@
-@layer anta{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty;font-feature-settings:"ss02","ss05","tnum"}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[priority=quinary]{--text-color: var(--text-5);--text-link-color: currentColor;--text-link-hover: var(--text-4)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=brand][priority=quinary]{--text-color: var(--text-5-brand);--text-link-hover: var(--text-4-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=success][priority=quinary]{--text-color: var(--text-5-success);--text-link-hover: var(--text-4-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=critical][priority=quinary]{--text-color: var(--text-5-critical);--text-link-hover: var(--text-4-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=warning][priority=quinary]{--text-color: var(--text-5-warning);--text-link-hover: var(--text-4-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone=info][priority=quinary]{--text-color: var(--text-5-info);--text-link-hover: var(--text-4-info)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--text-tone-source: attr(tone type(<color>), currentColor);--_text-tone: oklch(from var(--text-tone-source) .41 .15 h);--text-color: var(--_text-tone);--text-link-color: currentColor;--text-link-hover: oklch(from var(--text-tone-source) .33 .15 h)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: oklch(from var(--text-tone-source) .33 .15 h)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--text-color: color-mix(in oklch, var(--_text-tone) 80%, transparent);--text-link-hover: var(--_text-tone)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{--text-color: color-mix(in oklch, var(--_text-tone) 60%, transparent)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quinary]{--text-color: color-mix(in oklch, var(--_text-tone) 40%, transparent)}.dark a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_text-tone: oklch(from var(--text-tone-source) .75 .11 h);--text-link-hover: oklch(from var(--text-tone-source) .82 .1 h)}.dark a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: oklch(from var(--text-tone-source) .82 .1 h)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}
+@layer anta{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;font-family:var(--sans-serif);color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty;font-feature-settings:"ss02","ss05","tnum"}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[priority=quinary]{--text-color: var(--text-5);--text-link-color: currentColor;--text-link-hover: var(--text-4)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=brand][priority=quinary]{--text-color: var(--text-5-brand);--text-link-hover: var(--text-4-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=success][priority=quinary]{--text-color: var(--text-5-success);--text-link-hover: var(--text-4-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=critical][priority=quinary]{--text-color: var(--text-5-critical);--text-link-hover: var(--text-4-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=warning][priority=quinary]{--text-color: var(--text-5-warning);--text-link-hover: var(--text-4-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone=info][priority=quinary]{--text-color: var(--text-5-info);--text-link-hover: var(--text-4-info)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--text-tone-source: attr(tone type(<color>), currentColor);--_text-tone: oklch(from var(--text-tone-source) .41 .15 h);--text-color: var(--_text-tone);--text-link-color: currentColor;--text-link-hover: oklch(from var(--text-tone-source) .33 .15 h)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: oklch(from var(--text-tone-source) .33 .15 h)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--text-color: color-mix(in oklch, var(--_text-tone) 80%, transparent);--text-link-hover: var(--_text-tone)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{--text-color: color-mix(in oklch, var(--_text-tone) 60%, transparent)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quinary]{--text-color: color-mix(in oklch, var(--_text-tone) 40%, transparent)}.dark a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_text-tone: oklch(from var(--text-tone-source) .75 .11 h);--text-link-hover: oklch(from var(--text-tone-source) .82 .1 h)}.dark a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: oklch(from var(--text-tone-source) .82 .1 h)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}

package/dist/elements/a-title.css

@@ -1 +1 @@
-@layer anta{a-title{display:block;color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance;font-feature-settings:"ss02","ss05","tnum"}a-title a-icon{transform:translateY(-.05em)}a-title[level="1"]{font-size:28px;line-height:32px;margin-block-start:0;margin-block-end:16px}a-title[level="2"]{font-size:24px;line-height:28px;margin-block-start:32px;margin-block-end:12px}a-title[level="3"]{font-size:20px;line-height:24px;margin-block-start:24px;margin-block-end:12px}a-title[level="4"]{font-size:17px;line-height:20px;margin-block-start:20px;margin-block-end:8px}a-title[level="5"]{font-size:15px;line-height:20px;margin-block-start:16px;margin-block-end:8px}a-title[level="6"]{font-size:13px;line-height:16px;margin-block-start:16px;margin-block-end:4px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[priority=quinary]{color:var(--text-5)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=brand][priority=quinary]{color:var(--text-5-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=success][priority=quinary]{color:var(--text-5-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=critical][priority=quinary]{color:var(--text-5-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=warning][priority=quinary]{color:var(--text-5-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone=info][priority=quinary]{color:var(--text-5-info)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--title-tone-source: attr(tone type(<color>), currentColor);--_title-tone: oklch(from var(--title-tone-source) .41 .15 h);color:oklch(from var(--title-tone-source) .33 .15 h)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=secondary]{color:var(--_title-tone)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{color:color-mix(in oklch,var(--_title-tone) 80%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{color:color-mix(in oklch,var(--_title-tone) 60%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quinary]{color:color-mix(in oklch,var(--_title-tone) 40%,transparent)}.dark a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_title-tone: oklch(from var(--title-tone-source) .75 .11 h);color:oklch(from var(--title-tone-source) .82 .1 h)}}
+@layer anta{a-title{display:block;font-family:var(--sans-serif);color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance;font-feature-settings:"ss02","ss05","tnum"}a-title a-icon{transform:translateY(-.05em)}a-title[level="1"]{font-size:28px;line-height:32px}a-title[level="2"]{font-size:24px;line-height:28px}a-title[level="3"]{font-size:20px;line-height:24px}a-title[level="4"]{font-size:17px;line-height:20px}a-title[level="5"]{font-size:15px;line-height:20px}a-title[level="6"]{font-size:13px;line-height:16px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[priority=quinary]{color:var(--text-5)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=brand][priority=quinary]{color:var(--text-5-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=success][priority=quinary]{color:var(--text-5-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=critical][priority=quinary]{color:var(--text-5-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=warning][priority=quinary]{color:var(--text-5-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone=info][priority=quinary]{color:var(--text-5-info)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--title-tone-source: attr(tone type(<color>), currentColor);--_title-tone: oklch(from var(--title-tone-source) .41 .15 h);color:oklch(from var(--title-tone-source) .33 .15 h)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=secondary]{color:var(--_title-tone)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{color:color-mix(in oklch,var(--_title-tone) 80%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{color:color-mix(in oklch,var(--_title-tone) 60%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quinary]{color:color-mix(in oklch,var(--_title-tone) 40%,transparent)}.dark a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_title-tone: oklch(from var(--title-tone-source) .75 .11 h);color:oklch(from var(--title-tone-source) .82 .1 h)}}

package/dist/elements/copy-behavior.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Shared copy-to-clipboard behavior for `<a-button>` and `<a-menu-item>` — the
+ * write half of the productized "copy button" / "copying menu item". The element
+ * performs the clipboard write itself (rather than a UI-thread callback) and
+ * reports the outcome with a `copydone` event; the JSX wrapper listens and
+ * orchestrates the visual feedback (icon + tone swap). Nothing here touches the
+ * DOM — no light-DOM mutation, no host attributes, no ElementInternals.
+ *
+ * Events are dispatched non-bubbling (`bubbles: false`): the wrapper binds on the
+ * host itself, so it catches them in the target phase, and not bubbling keeps a
+ * nested copy row's `copydone` from flipping an ancestor copy row's feedback
+ * (the same point-to-point rule Anta's `statechange` follows).
+ *
+ * Three modes, chosen by attribute:
+ * - `copy="<text>"` — copy the literal string on activation.
+ * - `copy-node` / `copy-node="<selector>"` — copy a DOM node as rich text
+ *   (`text/html`) + plain text. Bare `copy-node` copies the nearest ancestor
+ *   marked `[data-copy-source]`; a value is a selector resolved with `closest()`
+ *   (an ancestor region). The copy control is stripped from the serialized
+ *   output (`[data-copy-node-button]`).
+ * - `copy-lazy` — the content isn't known until the click. Activation dispatches
+ *   `copyrequest` whose `detail.provide(text)` the consumer calls with the value
+ *   (synchronously, or after an `await` — the browser's transient-activation
+ *   window still covers the write). Nothing lands in the DOM, and there's no
+ *   attribute round-trip to reset. Takes precedence over any `copy` value.
+ *
+ * Precedence when several are set (the discriminated-union prop types make this
+ * unreachable from the wrappers, but hand-authored markup can): node → lazy →
+ * literal `copy`.
+ */
+/**
+ * Perform a copy on activation (click / Enter / Space / menu select). Returns
+ * `true` if the element is a copy control (so the caller knows the copy path
+ * ran); `false` for a plain, non-copy element.
+ */
+export declare function runCopy(el: HTMLElement): boolean;

package/dist/elements/copy-behavior.js

@@ -0,0 +1,68 @@
+async function writeText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function writeNode(node) {
+  const clone = node.cloneNode(true);
+  clone.querySelectorAll("[data-copy-node-button]").forEach((n) => n.remove());
+  const html = clone.outerHTML;
+  const text = clone.textContent ?? "";
+  try {
+    if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          "text/html": new Blob([html], { type: "text/html" }),
+          "text/plain": new Blob([text], { type: "text/plain" })
+        })
+      ]);
+      return true;
+    }
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function resolveNodeTarget(el) {
+  const sel = el.getAttribute("copy-node");
+  if (sel == null) return null;
+  return el.closest(sel === "" ? "[data-copy-source]" : sel);
+}
+function run(el, work) {
+  void work.then((ok) => {
+    el.dispatchEvent(new CustomEvent("copydone", { bubbles: false, detail: { ok } }));
+  });
+}
+function runCopy(el) {
+  if (el.hasAttribute("copy-node")) {
+    const target = resolveNodeTarget(el);
+    run(el, target ? writeNode(target) : Promise.resolve(false));
+    return true;
+  }
+  if (el.hasAttribute("copy-lazy")) {
+    let done = false;
+    el.dispatchEvent(
+      new CustomEvent("copyrequest", {
+        bubbles: false,
+        detail: {
+          provide(text) {
+            if (done) return;
+            done = true;
+            run(el, writeText(String(text ?? "")));
+          }
+        }
+      })
+    );
+    return true;
+  }
+  if (!el.hasAttribute("copy")) return false;
+  run(el, writeText(el.getAttribute("copy") ?? ""));
+  return true;
+}
+export {
+  runCopy
+};

package/dist/general_types.d.ts

@@ -727,6 +727,26 @@ export interface AMenuItemAttributes extends BaseAttributes {
      *  a `MouseEvent`, carrying the modifier keys (e.g. `altKey`). All-lowercase so
      *  React/Preact bind it to the CustomEvent. */
     onmenuselect?: (e: MouseEvent) => void;
+    /** Text copied to the clipboard when the row is chosen (a "copying menu item").
+     *  The element performs the write itself on `menuselect`. */
+    copy?: string;
+    /** Copy a DOM node instead of a string (rich `text/html` + plain text). Bare
+     *  `copy-node` copies the nearest ancestor marked `[data-copy-source]`; a value
+     *  is a CSS selector resolved with `closest()`. Presence-based for the boolean
+     *  form. */
+    'copy-node'?: boolean | string;
+    /** Lazy copy: with an empty `copy`, activation dispatches `copyrequest` and the
+     *  write completes once `copy` is set back (within the activation window).
+     *  Presence-based. */
+    'copy-lazy'?: boolean | '';
+    /** Fired after a copy attempt (bubbling `copydone`, `detail: { ok }`).
+     *  All-lowercase so it binds in React *and* Preact. */
+    oncopydone?: (e: CustomEvent<{
+        ok: boolean;
+    }>) => void;
+    /** Fired on a lazy copy activation to request the content (bubbling
+     *  `copyrequest`). Answer by setting the `copy` attribute. All-lowercase. */
+    oncopyrequest?: (e: CustomEvent) => void;
 }
 /**
  * Attributes for the `<a-menu-group>` styled element. For the typed JSX
@@ -770,6 +790,30 @@ export interface AButtonAttributes extends BaseAttributes {
     form?: string;
     /** Custom event name dispatched (bubbling) on click. */
     'data-custom-event'?: string;
+    /** Text copied to the clipboard on activation (the "copy button"). The element
+     *  performs the write itself and flashes a success / failure state. */
+    copy?: string;
+    /** Copy a DOM node instead of a string (rich `text/html` + plain text). Bare
+     *  `copy-node` copies the nearest ancestor marked `[data-copy-source]`; a value
+     *  is a CSS selector resolved with `closest()` (an ancestor region). Presence-
+     *  based for the boolean form. */
+    'copy-node'?: boolean | string;
+    /** Lazy copy: activation dispatches `copyrequest`; the consumer calls
+     *  `detail.provide(text)` with the content, which stays out of the DOM until
+     *  then. Takes precedence over `copy`. Presence-based. */
+    'copy-lazy'?: boolean | '';
+    /** Fired after a copy attempt (`copydone`, `detail: { ok }`, non-bubbling so a
+     *  nested copy row can't flip an ancestor's feedback). All-lowercase so it
+     *  binds in React *and* Preact. */
+    oncopydone?: (e: CustomEvent<{
+        ok: boolean;
+    }>) => void;
+    /** Fired on a lazy copy activation (`copyrequest`, non-bubbling). Supply the
+     *  content by calling `detail.provide(text)` — synchronously or within the
+     *  click's activation window. All-lowercase. */
+    oncopyrequest?: (e: CustomEvent<{
+        provide: (text: string) => void;
+    }>) => void;
     'aria-disabled'?: 'true' | 'false' | boolean;
     'aria-busy'?: 'true' | 'false' | boolean;
 }

package/dist/index.d.ts

@@ -27,7 +27,9 @@ export type { TagProps } from './components/Tag';
 export { Icon } from './components/Icon';
 export type { IconProps } from './components/Icon';
 export { Button } from './components/Button';
-export type { ButtonProps, BaseButtonProps, ContentMode, SubmitMode, PriorityMode, } from './components/Button';
+export type { ButtonProps, BaseButtonProps, ContentMode, SubmitMode, PriorityMode, CopyMode, } from './components/Button';
+export { ButtonCopy } from './components/ButtonCopy';
+export type { ButtonCopyProps } from './components/ButtonCopy';
 export { ICON_SHAPES, ICON_SYNONYMS } from './elements/a-icon.shapes';
 export { Tooltip } from './components/Tooltip';
 export type { TooltipProps } from './components/Tooltip';
@@ -37,6 +39,8 @@ export { Menu } from './components/Menu';
 export type { MenuProps } from './components/Menu';
 export { MenuItem } from './components/MenuItem';
 export type { MenuItemProps } from './components/MenuItem';
+export { MenuItemCopy } from './components/MenuItemCopy';
+export type { MenuItemCopyProps } from './components/MenuItemCopy';
 export { MenuSeparator } from './components/MenuSeparator';
 export type { MenuSeparatorProps } from './components/MenuSeparator';
 export { MenuGroup } from './components/MenuGroup';

package/dist/index.js

@@ -4,11 +4,13 @@ import { Title } from "./components/Title";
 import { Tag } from "./components/Tag";
 import { Icon } from "./components/Icon";
 import { Button } from "./components/Button";
+import { ButtonCopy } from "./components/ButtonCopy";
 import { ICON_SHAPES, ICON_SYNONYMS } from "./elements/a-icon.shapes";
 import { Tooltip } from "./components/Tooltip";
 import { Checkbox } from "./components/Checkbox";
 import { Menu } from "./components/Menu";
 import { MenuItem } from "./components/MenuItem";
+import { MenuItemCopy } from "./components/MenuItemCopy";
 import { MenuSeparator } from "./components/MenuSeparator";
 import { MenuGroup } from "./components/MenuGroup";
 import { Expander } from "./components/Expander";
@@ -43,6 +45,7 @@ import { Card } from "./components/Card";
 import { configure } from "./jsx-runtime";
 export {
   Button,
+  ButtonCopy,
   Calendar,
   Card,
   Checkbox,
@@ -58,6 +61,7 @@ export {
   Menu,
   MenuGroup,
   MenuItem,
+  MenuItemCopy,
   MenuSeparator,
   Progress,
   RadioGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",