@antadesign/anta 0.3.23 → 0.3.25

package/dist/components/Banner.d.ts

@@ -1,9 +1,8 @@
 import type { BaseProps } from "../general_types";
-/** Public props for the `<Banner>` message strip. `message` is the leading
- *  content, `children` sit between it and `actions`, all centered in one row. */
+/** Props for the `<Banner>` message strip. `message` leads, `children` precede
+ *  `actions`, and `align` places the row. */
 export interface BannerProps extends BaseProps {
-    /** Leading message — a string (rendered at the banner type scale) or any node.
-     *  Centered in the bar, followed by `children` and then `actions`. */
+    /** Leading message: a string at the banner type scale or any node. */
     message?: React.ReactNode;
     /** Trailing controls (buttons, links) rendered as a compact row after the
      *  message and `children`. */
@@ -16,6 +15,10 @@ export interface BannerProps extends BaseProps {
      *  lightness/chroma are pinned. `'neutral'` (the default) is the same as omitting it.
      *  @defaultValue 'neutral' */
     tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Positions the content row. `'start'` aligns it to the inline edge; `'center'`
+     *  centers it. Wrapped message text follows the selected alignment.
+     *  @defaultValue 'start' */
+    align?: "start" | "center";
     /** Rounded corners for a standalone, floating banner (`border-radius: 999px`,
      *  which clamps to a stadium) instead of the edge-to-edge strip. Still borderless
      *  by default. Pass a `number` (px) or a CSS length string for a custom radius. */
@@ -45,11 +48,8 @@ export interface BannerProps extends BaseProps {
     onDismiss?: () => void;
 }
 /**
- * `<Banner>` — a full-width, dismissible message strip with a bottom border.
- *
- * A close cousin of `<Card>` with a small, centered horizontal payload:
- * `message` leads, `children` sit in the middle, `actions` trail, and (when
- * `closable`) a 40px-wide, full-height ✕ fills the right edge without shifting the centered group.
+ * `<Banner>` — a full-width, dismissible message strip. `message`, `children`, and
+ * `actions` form a row at the inline start by default; `align="center"` centers it.
  *
  * A pure, stateless pass-through to `<a-banner>`: the element owns dismissal and
  * visibility, so the wrapper holds no state and grabs no ref — it maps props to
@@ -76,4 +76,4 @@ export interface BannerProps extends BaseProps {
  * <Banner message="Saved." dismissed={hidden} onDismiss={() => setHidden(true)} />
  * ```
  */
-export declare const Banner: ({ message, actions, tone, round, closable, role, dismissed, defaultDismissed, onDismiss, className, style, children, ...rest }: BannerProps) => any;
+export declare const Banner: ({ message, actions, tone, align, round, closable, role, dismissed, defaultDismissed, onDismiss, className, style, children, ...rest }: BannerProps) => any;

package/dist/components/Banner.js

@@ -5,6 +5,7 @@ const Banner = ({
   message,
   actions,
   tone,
+  align,
   round,
   closable,
   role = "status",
@@ -29,6 +30,7 @@ const Banner = ({
       state: controlled ? dismissed ? "closed" : "open" : void 0,
       "default-state": !controlled ? defaultDismissed ? "closed" : "open" : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
+      align: align === "center" ? "center" : void 0,
       round: roundAttr(round),
       role,
       onstatechange: onDismiss ? (e) => {
@@ -41,7 +43,7 @@ const Banner = ({
       children: [
         messageNode,
         children,
-        actions != null && /* @__PURE__ */ jsx("span", { slot: "actions", style: { display: "contents" }, children: actions }),
+        actions != null && /* @__PURE__ */ jsx("span", { "data-anta-banner-actions-wrapper": "", slot: "actions", style: { display: "contents" }, children: actions }),
         closable !== false && // A real <a-button> (light DOM → fully styled, keyboard-focusable) in the
         // element's `close` slot. It fires the bubbling `dismissrequest` event via
         // a-button's global listener, so dismissing works even without framework

package/dist/components/Breadcrumbs.css

@@ -0,0 +1 @@
+@layer anta.components{a-breadcrumbs{--breadcrumb-gap: 1px;--breadcrumb-separator-color: var(--text-5);--breadcrumb-separator-icon-size: 16px;--breadcrumb-separator-font-size: 15px;display:flex;align-items:center;gap:var(--breadcrumb-gap);width:max-content;min-width:100%;max-width:100%;overflow-x:auto}a-breadcrumbs[data-size=small]{--breadcrumb-separator-icon-size: 14px;--breadcrumb-separator-font-size: 13px}a-breadcrumbs[data-size=large]{--breadcrumb-separator-icon-size: 18px;--breadcrumb-separator-font-size: 17px}a-breadcrumbs[data-paddingless]{--breadcrumb-gap: .75ch}a-breadcrumbs[data-separator-icon]{--breadcrumb-gap: 0}a-breadcrumbs>*{flex:none}a-breadcrumb-separator{display:inline-flex;flex:none;align-items:center;justify-content:center;color:var(--breadcrumb-separator-color);font-family:var(--sans-serif);font-size:var(--breadcrumb-separator-font-size);line-height:1;user-select:none}a-breadcrumb-separator>a-icon{--icon-size: var(--breadcrumb-separator-icon-size)}}

package/dist/components/Breadcrumbs.d.ts

@@ -0,0 +1,127 @@
+import type { IconShape } from '../elements/a-icon.shapes';
+import type { BaseProps } from '../general_types';
+import type { BaseButtonProps } from './Button';
+import type { CopyTarget } from './copy-props';
+import './Breadcrumbs.css';
+/** The text separators built into `<Breadcrumbs>`. Pass an `IconShape` for a
+ *  graphic separator instead. */
+export type BreadcrumbTextSeparator = '→' | '/' | '•' | '▸';
+/** A built-in text separator or any registered Anta icon shape. */
+export type BreadcrumbSeparator = BreadcrumbTextSeparator | IconShape;
+/** Props shared by every breadcrumb item. They land on the visible `Button`
+ *  and, when the item is folded, on the corresponding `MenuItem`. */
+type BreadcrumbItemBase = Omit<BaseProps, 'children' | 'key' | 'slot' | 'tabIndex'> & {
+    /** Visible item content. It is reused as the folded menu row's label. */
+    label: React.ReactNode;
+    /** Leading icon shape. */
+    icon?: IconShape;
+    /** Trailing icon shape. Copy items reserve the trailing icon for their copy
+     *  feedback and therefore do not accept this prop. */
+    iconTrailing?: IconShape;
+    /** Semantic tone or a literal CSS color. */
+    tone?: BaseButtonProps['tone'];
+    /** Disable the item. */
+    disabled?: boolean;
+    /** Mark this item as the current page. The wrapper passes
+     *  `aria-current="page"` through to its button or link. */
+    current?: boolean;
+    /** Runs when an action item is activated. A folded item calls it from the
+     *  corresponding `MenuItem` selection. */
+    onClick?: (event: any) => void;
+};
+/** A breadcrumb that navigates to an href. */
+export type BreadcrumbLinkItem = BreadcrumbItemBase & {
+    /** Destination URL. */
+    href: string;
+    /** Where to open the destination. */
+    target?: string;
+    copy?: never;
+    copyNode?: never;
+    copyUrl?: never;
+};
+/** A non-navigating breadcrumb action. */
+export type BreadcrumbActionItem = BreadcrumbItemBase & {
+    href?: never;
+    target?: never;
+    copy?: never;
+    copyNode?: never;
+    copyUrl?: never;
+};
+/** A breadcrumb that copies a literal value, a marked DOM region, or the page
+ *  URL. It uses `ButtonCopy` when visible and `MenuItemCopy` when folded. */
+export type BreadcrumbCopyItem = Omit<BreadcrumbItemBase, 'iconTrailing'> & CopyTarget & {
+    href?: never;
+    target?: never;
+    iconTrailing?: never;
+    /** Where the copy glyph sits relative to the label — or `'none'` to omit it.
+     *  @defaultValue 'leading' */
+    iconPlacement?: 'leading' | 'trailing' | 'none';
+    /** Text in the successful no-icon confirmation.
+     *  @defaultValue Copied */
+    copiedLabel?: string;
+};
+/** One item in a `<Breadcrumbs>` trail. Link, action, and copy items share
+ *  presentation props while keeping incompatible behaviours type-safe. */
+export type BreadcrumbItem = BreadcrumbLinkItem | BreadcrumbActionItem | BreadcrumbCopyItem;
+/** Public props for `<Breadcrumbs>`. */
+export type BreadcrumbsProps = BaseProps & {
+    children?: never;
+} & {
+    /** Ordered breadcrumb entries. */
+    items: BreadcrumbItem[];
+    /** Button size applied to every visible item and the More control.
+     *  @defaultValue 'medium' */
+    size?: 'small' | 'medium' | 'large';
+    /** Separator between visible entries.
+     *  @defaultValue 'chevron-right' */
+    separator?: BreadcrumbSeparator;
+    /** Maximum number of original breadcrumb items left visible. The More
+     *  control does not count. Omit to keep every item visible. */
+    maxItems?: number;
+    /** Number of original items kept before the More control when `maxItems`
+     *  collapses the trail. The rest of the visible-item budget is kept from the
+     *  end, so `0` puts More first.
+     *  @defaultValue 0 */
+    itemsBeforeCollapse?: number;
+    /** Accessible name for the More control.
+     *  @defaultValue 'Show more breadcrumbs' */
+    moreLabel?: string;
+} & ({
+    /** Button priority applied to every visible item and the More control.
+     *  @defaultValue quaternary */
+    priority?: 'quaternary';
+    /** Remove horizontal padding from every visible breadcrumb control. */
+    paddingless?: boolean;
+} | {
+    /** Button priority applied to every visible item and the More control. */
+    priority: 'tertiary';
+    paddingless?: never;
+}) & ({
+    underline?: never;
+    underlineOnHover?: never;
+} | {
+    /** Underline style applied to every visible breadcrumb control. */
+    underline: 'solid' | 'dashed' | 'dotted';
+    /** Hide the underline at rest and reveal it on hover. */
+    underlineOnHover?: boolean;
+});
+/**
+ * Breadcrumbs — hierarchy navigation assembled from Anta Buttons. Entries can
+ * be links, actions, or copy controls; an optional `maxItems` replaces one
+ * contiguous range with a More menu without measuring the available width.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs
+ *   maxItems={3}
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Projects', href: '/projects' },
+ *     { label: 'Anta', href: '/projects/anta' },
+ *     { label: 'Button.tsx', current: true, copy: 'src/components/Button.tsx' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Breadcrumbs: ({ items, priority, size, separator, maxItems, itemsBeforeCollapse, moreLabel, underline, underlineOnHover, paddingless, className, style, "aria-label": ariaLabel, ...rest }: BreadcrumbsProps) => any;
+export {};

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,145 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import { Button } from "./Button";
+import { ButtonCopy } from "./ButtonCopy";
+import { Icon } from "./Icon";
+import { Menu } from "./Menu";
+import { MenuItem } from "./MenuItem";
+import { MenuItemCopy } from "./MenuItemCopy";
+import "./Breadcrumbs.css";
+const TEXT_SEPARATORS = /* @__PURE__ */ new Set(["\u2192", "/", "\u2022", "\u25B8"]);
+function isCopyItem(item) {
+  return "copy" in item || "copyNode" in item || "copyUrl" in item;
+}
+function buildEntries(items, maxItems, itemsBeforeCollapse) {
+  if (maxItems == null || !Number.isFinite(maxItems))
+    return items.map((item) => ({ kind: "item", item }));
+  const visibleCount = Math.max(1, Math.floor(maxItems));
+  if (items.length <= visibleCount) return items.map((item) => ({ kind: "item", item }));
+  const beforeCount = Math.min(
+    Math.max(0, Number.isFinite(itemsBeforeCollapse) ? Math.floor(itemsBeforeCollapse) : 0),
+    visibleCount - 1
+  );
+  const afterCount = visibleCount - beforeCount;
+  const hidden = items.slice(beforeCount, items.length - afterCount);
+  return [
+    ...items.slice(0, beforeCount).map((item) => ({ kind: "item", item })),
+    { kind: "overflow", items: hidden },
+    ...items.slice(items.length - afterCount).map((item) => ({ kind: "item", item }))
+  ];
+}
+function currentAttrs(item) {
+  return item.current ? { "aria-current": "page" } : {};
+}
+function renderButtonItem(item, priority, size, underline, underlineOnHover, paddingless, key) {
+  const { label, current, ...props } = item;
+  const a11y = currentAttrs(item);
+  if (isCopyItem(item)) {
+    const copyProps = {
+      ...props,
+      priority,
+      size,
+      underline,
+      underlineOnHover,
+      paddingless,
+      ...a11y
+    };
+    return /* @__PURE__ */ jsx(ButtonCopy, { ...copyProps, children: label }, key);
+  }
+  const buttonProps = {
+    ...props,
+    priority,
+    size,
+    underline,
+    underlineOnHover,
+    paddingless,
+    ...a11y
+  };
+  return /* @__PURE__ */ jsx(Button, { ...buttonProps, children: label }, key);
+}
+function renderMenuItem(item, key) {
+  const { label, current, onClick, ...props } = item;
+  const a11y = currentAttrs(item);
+  if (isCopyItem(item)) {
+    return /* @__PURE__ */ jsx(
+      MenuItemCopy,
+      {
+        ...props,
+        label,
+        onSelect: onClick,
+        ...a11y
+      },
+      key
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ...props,
+      label,
+      onSelect: onClick,
+      ...a11y
+    },
+    key
+  );
+}
+const Breadcrumbs = ({
+  items,
+  priority = "quaternary",
+  size = "medium",
+  separator = "chevron-right",
+  maxItems,
+  itemsBeforeCollapse = 0,
+  moreLabel = "Show more breadcrumbs",
+  underline,
+  underlineOnHover,
+  paddingless,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...rest
+}) => {
+  const entries = buildEntries(items, maxItems, itemsBeforeCollapse);
+  const textSeparator = TEXT_SEPARATORS.has(separator);
+  const separatorNode = textSeparator ? separator : /* @__PURE__ */ jsx(Icon, { shape: separator });
+  return /* @__PURE__ */ jsx(
+    "a-breadcrumbs",
+    {
+      role: "navigation",
+      "aria-label": ariaLabel ?? "Breadcrumb",
+      "data-size": size === "medium" ? void 0 : size,
+      "data-paddingless": paddingless ? "" : void 0,
+      "data-separator-icon": textSeparator ? void 0 : "",
+      class: className,
+      style,
+      ...rest,
+      children: entries.flatMap((entry, index) => {
+        const nodes = entry.kind === "overflow" ? [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...{
+                priority,
+                size,
+                paddingless,
+                icon: "more",
+                "aria-label": moreLabel,
+                "aria-haspopup": "menu"
+              }
+            },
+            `more-${index}`
+          ),
+          /* @__PURE__ */ jsx(Menu, { autoWidth: true, children: entry.items.map((item, hiddenIndex) => renderMenuItem(item, hiddenIndex)) }, `menu-${index}`)
+        ] : [renderButtonItem(entry.item, priority, size, underline, underlineOnHover, paddingless, index)];
+        if (index < entries.length - 1) {
+          nodes.push(
+            /* @__PURE__ */ jsx("a-breadcrumb-separator", { "aria-hidden": "true", children: separatorNode }, `separator-${index}`)
+          );
+        }
+        return nodes;
+      })
+    }
+  );
+};
+export {
+  Breadcrumbs
+};

package/dist/components/Button.d.ts

@@ -94,6 +94,16 @@ export type SubmitMode = {
     /** Form id when the button isn't a descendant of its form. */
     form?: string;
 };
+/** Underline options shared by tertiary and quaternary buttons. */
+export type UnderlineMode = {
+    underline?: never;
+    underlineOnHover?: never;
+} | {
+    /** Underline style. */
+    underline: 'solid' | 'dashed' | 'dotted';
+    /** Hide the underline at rest and reveal it on hover. */
+    underlineOnHover?: boolean;
+};
 /** Priority axis — `underline` only on `tertiary` / `quaternary`,
  *  `paddingless` only on `quaternary`. */
 export type PriorityMode = {
@@ -101,16 +111,13 @@ export type PriorityMode = {
      *  @defaultValue secondary */
     priority?: 'primary' | 'secondary';
     underline?: never;
+    underlineOnHover?: never;
     paddingless?: never;
-} | {
+} | UnderlineMode & {
     priority: 'tertiary';
-    /** Underline style. */
-    underline?: 'solid' | 'dashed' | 'dotted';
     paddingless?: never;
-} | {
+} | UnderlineMode & {
     priority: 'quaternary';
-    /** Underline style. */
-    underline?: 'solid' | 'dashed' | 'dotted';
     /** Drops outer padding to zero. */
     paddingless?: boolean;
 };
@@ -135,4 +142,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, onClick, href, target, rel, download, ping, type, form, className, style, children, ...rest }: ButtonProps) => any;
+export declare const Button: ({ priority, tone, underline, underlineOnHover, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, onClick, href, target, rel, download, ping, type, form, className, style, children, ...rest }: ButtonProps) => any;

package/dist/components/Button.js

@@ -4,6 +4,7 @@ const Button = ({
   priority,
   tone,
   underline,
+  underlineOnHover,
   icon,
   iconTrailing,
   paddingless,
@@ -40,6 +41,7 @@ const Button = ({
     priority,
     tone: toneAttr,
     underline,
+    "underline-on-hover": underlineOnHover ? "" : void 0,
     // 'medium' (and unset) is the implicit default — emit no DOM attr.
     size: size && size !== "medium" ? size : void 0,
     // Boolean attributes: emit a presence attribute (empty string) when on,

package/dist/components/ButtonCopy.d.ts

@@ -32,8 +32,8 @@ export type ButtonCopyProps = ButtonProps & {
 /**
  * Copy button — a `Button` preset for copy-to-clipboard. Set `copy` for a literal
  * string, `copyNode` to copy a DOM region, or `copyUrl` to copy the current page
- * URL. For content computed on demand, keep `copy` reactive and refresh it in
- * `onCopyRequest` (fired on pointerdown / keydown).
+ * URL. For dynamic text, pass a controlled `copy` string and set it in
+ * `onCopyRequest` before activation.
  *
  * It composes a plain `<Button>` with a slotted `<a-copy>` child that performs
  * the write — the button itself carries no copy behavior. This wrapper flips the

package/dist/components/Input.d.ts

@@ -88,6 +88,8 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     autoComplete?: 'off' | 'on' | 'name' | 'username' | 'email' | 'current-password' | 'new-password' | 'one-time-code' | 'tel' | 'url' | (string & {});
     /** Virtual-keyboard hint. Overrides the value derived from `type`. */
     inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Focus this field when its containing `Dialog` opens. */
+    autoFocus?: boolean;
     /** Form field name — submitted with the form via ElementInternals. */
     name?: string;
     /** Placeholder shown when empty. */
@@ -171,4 +173,4 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
  * <Input label="Email" type="email" placeholder="you@example.com" clearable />
  * ```
  */
-export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, truncate, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;
+export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, autoFocus, name, placeholder, truncate, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;

package/dist/components/Input.js

@@ -49,6 +49,7 @@ const Input = ({
   type,
   autoComplete,
   inputMode,
+  autoFocus,
   name,
   placeholder,
   truncate = true,
@@ -101,6 +102,7 @@ const Input = ({
       "dim-actions": presence(dimActions),
       autocomplete: autoComplete ?? (!multiline && rows == null && type ? AUTOCOMPLETE_BY_TYPE[type] : void 0),
       inputmode: inputMode ?? (!multiline && rows == null && type ? INPUTMODE_BY_TYPE[type] : void 0),
+      autofocus: autoFocus ? true : void 0,
       spellcheck: spellCheck != null ? spellCheck ? "true" : "false" : void 0,
       maxlength: maxLength != null ? String(maxLength) : void 0,
       minlength: minLength != null ? String(minLength) : void 0,

package/dist/components/InputDate.css

@@ -1 +1 @@
-@layer anta{a-input-date-time-container{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--border-3)}}
+@layer anta.components{a-input-date-time-container{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--border-3)}}

package/dist/components/InputTime.d.ts

@@ -70,6 +70,8 @@ export interface InputTimeProps extends BaseProps, DOMEventHandlers {
     trailing?: React.ReactNode;
     /** Fully-round the field, or a custom radius (`number` px / CSS length). */
     round?: boolean | number | string;
+    /** Focus this field when its containing `Dialog` opens. */
+    autoFocus?: boolean;
     /** Fires on every edit (`input`), with the native event + an `attrs` snapshot
      *  (`value`, `name`, `empty`, `valid`, `validationMessage`). Also fires on
      *  `change` (blur) and on clear. */
@@ -103,4 +105,4 @@ export interface InputTimeProps extends BaseProps, DOMEventHandlers {
  * <InputTime label="Start" defaultValue="09:30" onValueChange={(_, { value }) => save(value)} />
  * ```
  */
-export declare const InputTime: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, locale, hour12, min, max, name, disabled, required, icon, clearable, dimActions, trailing, onValueChange, onClearInput, children, className, style, ...rest }: InputTimeProps) => any;
+export declare const InputTime: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, locale, hour12, min, max, name, disabled, required, icon, clearable, dimActions, trailing, autoFocus, onValueChange, onClearInput, children, className, style, ...rest }: InputTimeProps) => any;

package/dist/components/InputTime.js

@@ -43,6 +43,7 @@ const InputTime = ({
   clearable,
   dimActions,
   trailing,
+  autoFocus,
   onValueChange,
   onClearInput,
   children,
@@ -69,6 +70,7 @@ const InputTime = ({
       disabled: presence(disabled),
       required: presence(required),
       "dim-actions": presence(dimActions),
+      autofocus: autoFocus ? true : void 0,
       "aria-invalid": status === "critical" ? "true" : void 0,
       oninput: onValueChange ? (e) => onValueChange(e, attrsOf(e)) : void 0,
       onchange: onValueChange ? (e) => onValueChange(e, attrsOf(e)) : void 0,

package/dist/components/MenuItem.d.ts

@@ -12,7 +12,11 @@ export interface MenuItemCommonProps extends BaseProps {
      *  option `hint`. Requires `label` (it stacks in a column beneath it). Muted
      *  (`--text-3`) and tracks the row's `tone`. A string, or any node. */
     hint?: React.ReactNode;
-    /** A trailing keyboard-shortcut hint, e.g. `"⌘E"`. */
+    /** Trailing shortcut hint, e.g. `"⌘E"`. Anta translates it to
+     *  `aria-keyshortcuts` and hides the visual glyphs from assistive technology.
+     *  Use `+` within a chord and spaces between shortcuts (`"⌘K ⌘S"` becomes
+     *  `"Meta+K Meta+S"`). Pass `aria-keyshortcuts` to override the translation.
+     *  This does not bind the shortcut. */
     kbd?: string;
     /** A trailing icon. On a `submenu` item this **overrides** the default
      *  chevron (omit it to keep the chevron); on a normal item it's the trailing

package/dist/components/MenuItem.js

@@ -1,5 +1,70 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { toneStyle } from "../anta_helpers";
+const SHORTCUT_KEYS = {
+  "\u2318": "Meta",
+  cmd: "Meta",
+  command: "Meta",
+  win: "Meta",
+  super: "Meta",
+  "\u2303": "Control",
+  ctrl: "Control",
+  control: "Control",
+  "\u2325": "Alt",
+  alt: "Alt",
+  opt: "Alt",
+  option: "Alt",
+  "\u21E7": "Shift",
+  shift: "Shift",
+  "\u21B5": "Enter",
+  "\u23CE": "Enter",
+  enter: "Enter",
+  return: "Enter",
+  "\u232B": "Backspace",
+  backspace: "Backspace",
+  "\u2326": "Delete",
+  del: "Delete",
+  delete: "Delete",
+  "\u238B": "Escape",
+  esc: "Escape",
+  escape: "Escape",
+  "\u21E5": "Tab",
+  tab: "Tab",
+  "\u2423": "Space",
+  space: "Space",
+  "\u2191": "ArrowUp",
+  "\u2193": "ArrowDown",
+  "\u2190": "ArrowLeft",
+  "\u2192": "ArrowRight",
+  "\u21DE": "PageUp",
+  "\u21DF": "PageDown",
+  "\u2196": "Home",
+  "\u2198": "End"
+};
+function shortcutChordLabel(kbd) {
+  const parts = [];
+  let word = "";
+  const flush = () => {
+    if (!word) return;
+    parts.push(SHORTCUT_KEYS[word.toLowerCase()] ?? (word.length === 1 ? word.toUpperCase() : word));
+    word = "";
+  };
+  for (const char of kbd) {
+    if (SHORTCUT_KEYS[char]) {
+      flush();
+      parts.push(SHORTCUT_KEYS[char]);
+    } else if (char === "+") {
+      flush();
+    } else {
+      word += char;
+    }
+  }
+  flush();
+  return parts.length ? parts.join("+") : void 0;
+}
+function shortcutLabel(kbd) {
+  const shortcuts = kbd.trim().replace(/\s*\+\s*/g, "+").split(/\s+/).map(shortcutChordLabel).filter((shortcut) => shortcut !== void 0);
+  return shortcuts.length ? shortcuts.join(" ") : void 0;
+}
 const MenuItem = ({
   icon,
   label,
@@ -34,6 +99,9 @@ const MenuItem = ({
   const keepTint = selected && (selectionIndicator === void 0 || selectionIndicator === "check");
   const effectiveTone = selected && toneSelected || tone;
   const toneAttr = effectiveTone && effectiveTone !== "neutral" ? effectiveTone : void 0;
+  const declaredShortcuts = rest["aria-keyshortcuts"];
+  const keyShortcuts = kbd ? shortcutLabel(kbd) : void 0;
+  const kbdNode = kbd ? /* @__PURE__ */ jsx("kbd", { "aria-hidden": declaredShortcuts ?? keyShortcuts ? "true" : void 0, children: kbd }) : null;
   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 })
@@ -50,6 +118,7 @@ const MenuItem = ({
       tabIndex: disabled ? -1 : 0,
       "aria-disabled": disabled ? "true" : void 0,
       "aria-current": selected ? "true" : void 0,
+      "aria-keyshortcuts": keyShortcuts,
       tone: toneAttr,
       style: toneStyle(effectiveTone, "--menu-item-tone-source", style),
       onClick: onSelect && !disabled ? (e) => onSelect(e, { value, label }) : void 0,
@@ -59,7 +128,7 @@ const MenuItem = ({
       icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
       labelNode,
       children,
-      kbd && /* @__PURE__ */ jsx("kbd", { children: kbd }),
+      kbdNode,
       iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" })
     ] });
   }
@@ -76,6 +145,7 @@ const MenuItem = ({
       submenu: submenu ? "" : void 0,
       "aria-haspopup": submenu ? "menu" : void 0,
       "aria-disabled": disabled ? "true" : void 0,
+      "aria-keyshortcuts": keyShortcuts,
       onmenuselect: onSelect ? (e) => onSelect(e, { value, label }) : void 0,
       class: className,
       ...rest,
@@ -120,7 +190,7 @@ const MenuItem = ({
         leadingIcon && /* @__PURE__ */ jsx("a-icon", { shape: leadingIcon, "aria-hidden": "true" }),
         labelNode,
         children,
-        kbd && /* @__PURE__ */ jsx("kbd", { children: kbd }),
+        kbdNode,
         (() => {
           let trailing = submenu ? iconTrailing ?? "chevron-right" : iconTrailing;
           if (!submenu && !iconTrailing && selectionIndicator === "check" && indicator == null)

package/dist/components/MenuItemCopy.d.ts

@@ -11,12 +11,22 @@ export type MenuItemCopyProps = MenuItemCommonProps & MenuItemActionMode & {
     selectionIndicator?: never;
     indeterminate?: never;
     indicator?: never;
-} & CopyTarget;
+    iconTrailing?: never;
+} & CopyTarget & {
+    /** Where the copy glyph sits relative to the label — or `'none'` to omit it.
+     *  Without a glyph, a successful copy shows a confirmation label near the
+     *  pointer and leaves the row unchanged.
+     *  @defaultValue 'leading' */
+    iconPlacement?: 'leading' | 'trailing' | 'none';
+    /** Text in the successful no-icon confirmation.
+     *  @defaultValue Copied */
+    copiedLabel?: string;
+};
 /**
  * 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
- * `copyUrl` to copy the current page URL. For content computed on demand, keep
- * `copy` reactive and refresh it in `onCopyRequest` (fired on pointerdown / keydown).
+ * `copyUrl` to copy the current page URL. For dynamic text, pass a controlled
+ * `copy` string and set it in `onCopyRequest` before activation.
  *
  * It composes a plain `<MenuItem>` with a slotted `<a-copy>` child that performs
  * the write when the row is chosen — the item itself carries no copy behavior.
@@ -24,7 +34,8 @@ export type MenuItemCopyProps = MenuItemCommonProps & MenuItemActionMode & {
  * flips the leading icon to a check / ✕ and retones for ~2s (see `useCopyFeedback`).
  *
  * Defaults `label` to "Copy" and the leading `icon` to `copy`; override either.
- * Other props pass through — `tone`, `kbd`, `onCopied`.
+ * `iconPlacement` moves that glyph to the trailing edge or omits it. Other props
+ * pass through — `tone`, `kbd`, `onCopied`.
  *
  * @example
  * ```tsx
@@ -34,4 +45,4 @@ export type MenuItemCopyProps = MenuItemCommonProps & MenuItemActionMode & {
  * </Menu>
  * ```
  */
-export declare const MenuItemCopy: ({ label, icon, tone, onCopied, onCopyRequest, copy, copyNode, copyUrl, copyWithUrl, children, ...rest }: MenuItemCopyProps) => any;
+export declare const MenuItemCopy: ({ label, icon, iconPlacement, copiedLabel, tone, onCopied, onCopyRequest, copy, copyNode, copyUrl, copyWithUrl, children, ...rest }: MenuItemCopyProps) => any;