@antadesign/anta 0.3.8 → 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,6 +1,8 @@
 import type { BaseProps } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
-export interface MenuItemProps extends BaseProps {
+import type { CopyMode } from './Button';
+/** Props shared by every menu item, link or not. */
+export interface MenuItemCommonProps extends BaseProps {
     /** Leading icon shape. */
     icon?: IconShape;
     /** The item's text. Usually a string, but any node is accepted — e.g. a filtered
@@ -17,33 +19,15 @@ export interface MenuItemProps extends BaseProps {
      *  chevron (omit it to keep the chevron); on a normal item it's the trailing
      *  glyph (omit for none). */
     iconTrailing?: IconShape;
-    /** Disable the item: greyed out, not focusable for activation, no close. */
+    /** Disable the item: greyed out, not focusable for activation, no close. A
+     *  disabled link also drops its `href`, so it can't navigate. */
     disabled?: boolean;
     /** Mark the item as selected. On a plain row (no `selectionIndicator`) this is
-     *  a persistent background tint, the same resting fill a pressed row shows. On a
-     *  checkable row (`selectionIndicator` set) it instead drives the leading
-     *  `checkbox` / `radio` indicator and the row's `aria-checked`. */
+     *  a persistent background tint, the same resting fill a pressed row shows —
+     *  also the way to flag the current page on a link item. On a checkable row
+     *  (`selectionIndicator` set) it instead drives the leading `checkbox` / `radio`
+     *  indicator and the row's `aria-checked`. */
     selected?: boolean;
-    /** Turn the row into a checkable item, driven by `selected` (the row stays the
-     *  control and carries `aria-checked`):
-     *  - `'checkbox'` → `role="menuitemcheckbox"`, a leading passive `<a-checkbox>`
-     *    (before `icon`); the tint is dropped (the box carries state).
-     *  - `'radio'` → `role="menuitemradio"`, a leading passive `<a-radio>`; tint dropped.
-     *  - `'check'` → `role="menuitemradio"`, a trailing check glyph on the selected
-     *    row *and* the background tint (the canonical single-select look).
-     *  Omit for a plain row (the default). */
-    selectionIndicator?: 'checkbox' | 'radio' | 'check';
-    /** Only meaningful with `selectionIndicator="checkbox"`: render the box in the
-     *  mixed state (`aria-checked="mixed"`) — e.g. a "Select all" row when some but
-     *  not all of its options are selected. */
-    indeterminate?: boolean;
-    /** Replace the built-in selection-indicator *visual* with your own node,
-     *  rendered at the **leading** edge (where the checkbox / radio sit). Pair with
-     *  `selectionIndicator` to keep the semantics — the row stays the control and
-     *  carries `role` + `aria-checked`; only the drawn mark changes. Suppresses the
-     *  built-in checkbox / radio and the trailing `check` glyph. The node is made
-     *  passive (aria-hidden, no pointer events) so the row owns the click. */
-    indicator?: React.ReactNode;
     /** Semantic tone — colors the label, icon, and hover/selected tint (and the
      *  `checkbox`/`radio` indicator, which adopts it). A named tone, or any literal
      *  CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone whose
@@ -58,10 +42,6 @@ export interface MenuItemProps extends BaseProps {
      *  `toneSelected` wins over `tone` when both are set.
      *  @defaultValue neutral */
     toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Marks this item as a submenu parent: adds the trailing chevron,
-     *  `aria-haspopup="menu"`, and an `aria-expanded` baseline (kept in sync by
-     *  the nested menu). Nest the flyout as a `<Menu>` child. */
-    submenu?: boolean;
     /** An opaque value identifying this item, handed back in `onSelect`'s detail
      *  so a shared handler can tell which row was chosen without a per-item
      *  closure. */
@@ -69,8 +49,9 @@ export interface MenuItemProps extends BaseProps {
     /** Activation handler — fires when *this* item is chosen (click / Enter /
      *  Space), unless it's `disabled`. It does **not** fire for a submenu parent
      *  (clicking that opens the flyout, which isn't a selection) nor for a
-     *  selection bubbling up from a nested submenu. Receives the event plus a
-     *  `{ value, label }` detail. */
+     *  selection bubbling up from a nested submenu. On a link item it fires
+     *  alongside the navigation. Receives the event plus a `{ value, label }`
+     *  detail. */
     onSelect?: (event: any, detail: {
         value?: string | number;
         label?: React.ReactNode;
@@ -87,6 +68,59 @@ export interface MenuItemProps extends BaseProps {
      *  notably the nested `<Menu>` for a submenu parent. */
     children?: React.ReactNode;
 }
+export type MenuItemLinkMode = {
+    /** Renders the item as `<a role="menuitem" data-anta-menu-item href>`. */
+    href: string;
+    /** Anchor target, e.g. `'_blank'`. */
+    target?: string;
+    /** Anchor rel. */
+    rel?: string;
+    /** Download the resource instead of navigating: `true` / `''` uses the
+     *  resource's default filename, a string overrides it. */
+    download?: string | boolean;
+    /** Space-separated URLs the browser pings on navigation. */
+    ping?: string;
+    submenu?: never;
+    selectionIndicator?: never;
+    indeterminate?: never;
+    indicator?: never;
+    copy?: never;
+    copyNode?: never;
+    copyLazy?: never;
+    onCopied?: never;
+    onCopyRequest?: never;
+};
+export type MenuItemActionMode = {
+    href?: never;
+    target?: never;
+    rel?: never;
+    download?: never;
+    ping?: never;
+    /** Marks this item as a submenu parent: adds the trailing chevron and
+     *  `aria-haspopup="menu"`. Nest the flyout as a `<Menu>` child. */
+    submenu?: boolean;
+    /** Turn the row into a checkable item, driven by `selected` (the row stays the
+     *  control and carries `aria-checked`):
+     *  - `'checkbox'` → `role="menuitemcheckbox"`, a leading passive `<a-checkbox>`
+     *    (before `icon`); the tint is dropped (the box carries state).
+     *  - `'radio'` → `role="menuitemradio"`, a leading passive `<a-radio>`; tint dropped.
+     *  - `'check'` → `role="menuitemradio"`, a trailing check glyph on the selected
+     *    row *and* the background tint (the canonical single-select look).
+     *  Omit for a plain row (the default). */
+    selectionIndicator?: 'checkbox' | 'radio' | 'check';
+    /** Only meaningful with `selectionIndicator="checkbox"`: render the box in the
+     *  mixed state (`aria-checked="mixed"`) — e.g. a "Select all" row when some but
+     *  not all of its options are selected. */
+    indeterminate?: boolean;
+    /** Replace the built-in selection-indicator *visual* with your own node,
+     *  rendered at the **leading** edge (where the checkbox / radio sit). Pair with
+     *  `selectionIndicator` to keep the semantics — the row stays the control and
+     *  carries `role` + `aria-checked`; only the drawn mark changes. Suppresses the
+     *  built-in checkbox / radio and the trailing `check` glyph. The node is made
+     *  passive (aria-hidden, no pointer events) so the row owns the click. */
+    indicator?: React.ReactNode;
+};
+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
@@ -107,4 +141,4 @@ export interface MenuItemProps extends BaseProps {
  * </MenuItem>
  * ```
  */
-export declare const MenuItem: ({ icon, label, hint, kbd, iconTrailing, disabled, selected, selectionIndicator, indeterminate, indicator, tone, toneSelected, submenu, value, onSelect, 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,
@@ -16,18 +16,59 @@ const MenuItem = ({
   submenu,
   value,
   onSelect,
+  href,
+  target,
+  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";
   const keepTint = selected && (selectionIndicator === void 0 || selectionIndicator === "check");
   const effectiveTone = selected && toneSelected || tone;
   const toneAttr = effectiveTone && effectiveTone !== "neutral" ? effectiveTone : void 0;
+  const labelNode = label != null && (hint != null ? /* @__PURE__ */ jsxs("a-menu-item-text", { children: [
+    /* @__PURE__ */ jsx("a-menu-item-label", { children: label }),
+    /* @__PURE__ */ jsx("a-menu-item-hint", { children: hint })
+  ] }) : /* @__PURE__ */ jsx("a-menu-item-label", { children: label }));
+  if (href != null) {
+    const linkAttrs = {
+      "data-anta-menu-item": "",
+      role: roleOverride ?? "menuitem",
+      href: disabled ? void 0 : href,
+      target,
+      rel,
+      download: download === true ? "" : download || void 0,
+      ping,
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      "aria-current": selected ? "true" : void 0,
+      tone: toneAttr,
+      style: toneStyle(effectiveTone, "--menu-item-tone-source", style),
+      onClick: onSelect && !disabled ? (e) => onSelect(e, { value, label }) : void 0,
+      class: className
+    };
+    return /* @__PURE__ */ jsxs("a", { ...linkAttrs, ...rest, children: [
+      icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
+      labelNode,
+      children,
+      kbd && /* @__PURE__ */ jsx("kbd", { children: kbd }),
+      iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     "a-menu-item",
     {
@@ -42,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: [
@@ -82,16 +129,8 @@ const MenuItem = ({
             }
           )
         ) : null,
-        icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
-        label != null && (hint != null ? (
-          // A hint stacks under the label in a column; the icon / kbd / trailing
-          // icon stay in the row (the item's `align-items: center` centers them
-          // against the two-line block).
-          /* @__PURE__ */ jsxs("a-menu-item-text", { children: [
-            /* @__PURE__ */ jsx("a-menu-item-label", { children: label }),
-            /* @__PURE__ */ jsx("a-menu-item-hint", { children: hint })
-          ] })
-        ) : /* @__PURE__ */ jsx("a-menu-item-label", { children: label })),
+        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.css

@@ -1 +1 @@
-@layer anta{a-button,a[role=button][data-anta]{--button-primary-fg: #ffffff;--bg-primary-disabled: #ece9ec;--bg-secondary-disabled: #f6f4f6;--fg-disabled-primary: #afa9b1;--fg-disabled: #afa9b1;--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: 30px;--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 2.5px;--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c;--_fs: 15px;--_lh: 20px;--_pb: 1px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-max-width: 100%;--button-max-height: 100%;--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round]{--button-round: attr(round type(<length>), 999px);border-radius:var(--button-round, 999px)}a-button[tone=brand],a[role=button][data-anta][tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][data-anta][tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][data-anta][tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][data-anta][tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][data-anta][tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button,.dark a[role=button][data-anta]{--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-button,a[role=button][data-anta]{user-select:none;display:inline-flex;align-items:center;gap:.5ch;overflow:hidden;cursor:pointer;flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:4px;text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:var(--button-max-width);max-height:var(--button-max-height);padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));right:0;pointer-events:none;background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:transform;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}&[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--button-tone-source: attr(tone type(<color>), transparent);--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-bg-l: .54;--_tone-bg-c: .16;--_tone-bg-a-rest: .1;--_tone-bg-a-hover: .15;--_tone-bg-a-active: .2;--_tone-primary-l-rest: .5;--_tone-primary-l-hover: .45;--_tone-primary-l-active: .4;--button-bg-primary-rest: oklch(from var(--button-tone-source) var(--_tone-primary-l-rest) c h);--button-bg-primary-hover: oklch(from var(--button-tone-source) var(--_tone-primary-l-hover) c h);--button-bg-primary-active: oklch(from var(--button-tone-source) var(--_tone-primary-l-active) c h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-tertiary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-quaternary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-quaternary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover));--button-bg-secondary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-active));--button-bg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-tertiary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover))}.dark &[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--_tone-fg-l: .78;--_tone-fg-strong-l: .85;--_tone-fg-c: .11;--_tone-bg-l: .58;--_tone-bg-a-rest: .23;--_tone-bg-a-hover: .28;--_tone-bg-a-active: .33;--_tone-primary-l-rest: .45;--_tone-primary-l-hover: .5;--_tone-primary-l-active: .57}--button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;letter-spacing:.06ch;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}&:active{--button-fg: oklch(from var(--button-fg-quaternary-rest) calc(l + .05) c h)}.dark &:active{--button-fg: var(--button-fg-quaternary-rest)}}&[selected]{box-shadow:inset 0 0 0 .5px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period))}}
+@layer anta{a-button,a[role=button][data-anta],button[data-anta]{--button-primary-fg: #ffffff;--bg-primary-disabled: #ece9ec;--bg-secondary-disabled: #f6f4f6;--fg-disabled-primary: #afa9b1;--fg-disabled: #afa9b1;--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: 30px;--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 2.5px;--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c;--_fs: 15px;--_lh: 20px;--_pb: 1px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round],button[data-anta][round]{--button-round: attr(round type(<length>), 999px);border-radius:var(--button-round, 999px)}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button,.dark a[role=button][data-anta],.dark button[data-anta]{--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand],.dark button[data-anta][tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical],.dark button[data-anta][tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info],.dark button[data-anta][tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success],.dark button[data-anta][tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning],.dark button[data-anta][tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}button[data-anta]{box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta]{user-select:none;display:inline-flex;align-items:center;gap:.5ch;overflow:hidden;cursor:pointer;flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:4px;text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:100%;padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));right:0;pointer-events:none;background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:transform;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}&[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--button-tone-source: attr(tone type(<color>), transparent);--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-bg-l: .54;--_tone-bg-c: .16;--_tone-bg-a-rest: .1;--_tone-bg-a-hover: .15;--_tone-bg-a-active: .2;--_tone-primary-l-rest: .5;--_tone-primary-l-hover: .45;--_tone-primary-l-active: .4;--button-bg-primary-rest: oklch(from var(--button-tone-source) var(--_tone-primary-l-rest) c h);--button-bg-primary-hover: oklch(from var(--button-tone-source) var(--_tone-primary-l-hover) c h);--button-bg-primary-active: oklch(from var(--button-tone-source) var(--_tone-primary-l-active) c h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-tertiary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-quaternary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-quaternary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover));--button-bg-secondary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-active));--button-bg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-tertiary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover))}.dark &[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--_tone-fg-l: .78;--_tone-fg-strong-l: .85;--_tone-fg-c: .11;--_tone-bg-l: .58;--_tone-bg-a-rest: .23;--_tone-bg-a-hover: .28;--_tone-bg-a-active: .33;--_tone-primary-l-rest: .45;--_tone-primary-l-hover: .5;--_tone-primary-l-active: .57}--button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;letter-spacing:.06ch;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}&:active{--button-fg: oklch(from var(--button-fg-quaternary-rest) calc(l + .05) c h)}.dark &:active{--button-fg: var(--button-fg-quaternary-rest)}}&[selected]{box-shadow:inset 0 0 0 .5px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period))}}

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;