@antadesign/anta 0.3.7 → 0.3.9

package/dist/anta_helpers.d.ts

@@ -15,12 +15,25 @@ export declare function wrapLabel(kids: React.ReactNode, tag: string): React.Rea
  * the native event directly. Returns the native event and its `detail`. Shared by
  * every stateful wrapper (`Menu`, `Expander`, `Checkbox`, `RadioGroup`) — don't
  * re-implement it per component.
+ *
+ * `isOwn` is `true` when the event was dispatched on the element the listener is
+ * bound to (`target === currentTarget`), `false` when it bubbled up from a
+ * descendant. `statechange` is a shared event name with a per-component `detail`
+ * vocabulary, so a container wrapper (`Dialog`, `Menu`, `Expander`) that projects
+ * arbitrary children must gate on `isOwn` before acting: a foreign bubbling
+ * `statechange` from a nested control would otherwise be read in the wrong
+ * vocabulary (a checkbox toggle looking like a dialog close). Anta's own controls
+ * no longer bubble `statechange`, so this is defense-in-depth against consumer /
+ * third-party elements that do. Read synchronously during dispatch, so
+ * `currentTarget` is still live. (Read as `true` for the falsy-event guard so a
+ * missing event never spuriously reads as bubbled.)
  */
 export declare function nativeStateChange<D>(e: CustomEvent<D> | {
     nativeEvent: CustomEvent<D>;
 }): {
     event: CustomEvent<D>;
     detail?: D;
+    isOwn: boolean;
 };
 export declare const IS_MAC: boolean;
 /** Default row hint teaching the Alt/⌥-click "select only this" accelerator on
@@ -54,6 +67,13 @@ export declare function toneStyle(tone: string | undefined, varName: string, bas
  * element's default full-round). Returns `base` unchanged when there's no value.
  */
 export declare function roundStyle(round: boolean | number | string | undefined, varName: string, base?: React.CSSProperties): React.CSSProperties | undefined;
+/**
+ * Presence flag for a `round` attribute: `''` when a radius applies, else
+ * `undefined`. A bare `round ? '' : undefined` wrongly drops `round={0}` — the
+ * caller asking for square corners — since `0` is falsy; this keeps it (and drops
+ * `false` / `undefined` / `''`). Mirrors what `roundStyle` emits a variable for.
+ */
+export declare function roundAttr(round: boolean | number | string | undefined): '' | undefined;
 /**
  * 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

@@ -14,7 +14,7 @@ function wrapLabel(kids, tag) {
 }
 function nativeStateChange(e) {
   const event = "nativeEvent" in e ? e.nativeEvent : e;
-  return { event, detail: event?.detail };
+  return { event, detail: event?.detail, isOwn: !event || event.target === event.currentTarget };
 }
 const IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/i.test(navigator.userAgent || "");
 const ISOLATE_HINT = IS_MAC ? "\u2325+Click to select only this" : "Alt+Click to select only this";
@@ -37,6 +37,9 @@ function roundStyle(round, varName, base) {
   if (typeof round === "string" && round !== "") return { ...base, [varName]: round };
   return base;
 }
+function roundAttr(round) {
+  return round || round === 0 ? "" : void 0;
+}
 function anchorRect(el) {
   const fn = el.getAnchorRect;
   return typeof fn === "function" ? fn.call(el) : el.getBoundingClientRect();
@@ -120,6 +123,7 @@ export {
   isMenuOpen,
   nativeStateChange,
   parseOpenState,
+  roundAttr,
   roundStyle,
   setMenuPresence,
   toneStyle,

package/dist/components/Button.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle, roundStyle, wrapLabel } from "../anta_helpers";
+import { toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
 const Button = ({
   priority,
   tone,
@@ -42,7 +42,7 @@ const Button = ({
     // presence (`[disabled]`, not `[disabled="true"]`), so any present form
     // works. (ARIA attributes below stay string-valued — ARIA needs "true".)
     paddingless: paddingless ? "" : void 0,
-    round: round ? "" : void 0,
+    round: roundAttr(round),
     loading: loading ? "" : void 0,
     disabled: disabled ? "" : void 0,
     selected: selected ? "" : void 0,

package/dist/components/Card.d.ts

@@ -1,23 +1,33 @@
 import type { BaseProps } from "../general_types";
+import type { IconShape } from "../elements/a-icon.shapes";
 export interface CardProps extends BaseProps {
-    /** Header content, rendered in the top zone with the default title
-     *  typography. A string is respected as-is; pass a `<Title>` (or `<h2>`–`<h6>`)
-     *  for real heading semantics in the document outline. Omit for no header. */
+    /** Header content, in the top zone. A string is wrapped in a `<Title>` — a real
+     *  heading in the document outline, tinted to match `tone`, at a level that
+     *  tracks `size` (small → 5, medium → 4, large → 3). Pass your own node
+     *  (`<Title level={2}>`, an `<h2>`) for a different level or styling. Omit for
+     *  no header. */
     header?: React.ReactNode;
+    /** A secondary line under the header title, rendered as smaller text
+     *  (`<Text size="small">`) in the heading section. Tinted to match `tone`, like
+     *  the title. Omit for no subtitle. */
+    subtitle?: React.ReactNode;
+    /** Leading visual for the header, laid out to the left of the `header` /
+     *  `subtitle` as one aligned row (so it doesn't sit inline in the title, where it
+     *  mis-aligns). A **string** is an icon shape, rendered as an `<Icon>` inside a
+     *  circular chip (sized per the card via `--card-icon-size`); pass an `<img>`,
+     *  initials (`<Text>`), or any node to use it as-is. Omit for none. */
+    icon?: IconShape | (string & {}) | React.ReactNode;
     /** Footer content, usually action buttons. Rendered as a **left-aligned** row
      *  (wraps under pressure) — the opposite of `Dialog`'s right-aligned footer. */
     footer?: React.ReactNode;
-    /** Controls rendered at the top-right of the header row, OUTSIDE the header
-     *  (e.g. a "more" button, a tag) — the same slot as `Expander`'s `actions`. */
-    actions?: React.ReactNode;
     /** Media (image, illustration) rendered full-bleed to the card edge, clipped to
      *  its corners. Position it with `mediaPosition`. */
     media?: React.ReactNode;
     /** Which edge the `media` bleeds to.
      *  @defaultValue 'top' */
     mediaPosition?: "top" | "bottom" | "left" | "right";
-    /** The card body. A string renders with the default `<Text>`-like typography;
-     *  scopes the color hierarchy for any nested content. */
+    /** The card body. A string is wrapped in a `<Text>` at secondary priority,
+     *  following the card's `tone` and `size`; pass your own nodes to take over. */
     children?: React.ReactNode;
     /** Semantic tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for
      *  a one-off custom tone. Named tones re-point the surface + text; a custom
@@ -60,11 +70,15 @@ export interface CardProps extends BaseProps {
  * region plus a `header` / body / `footer` stack. Pass `href` to turn the whole
  * card into a link.
  *
- * Renders an `<a-card>` web component. A pure, stateless pass-through — the
- * element owns layout, the link, and the accessible name — so the wrapper only
- * maps props to attributes and projects content into the `media` / `header` /
- * `actions` / body / `footer` slots. Header / body / footer are respected as
- * passed; the element supplies their default typography.
+ * Renders an `<a-card>` web component. A stateless projection — the element owns
+ * layout, the link, and the accessible name, and stylizes only its own surface
+ * (never its children's typography). The wrapper maps props to attributes,
+ * projects content into the `media` / `icon` / `header` / body / `footer`
+ * sections, and supplies typography for the two text zones by wrapping a string
+ * `header` in `<Title>` and a string body in `<Text>`. A leading `icon` (a shape
+ * string, or any node) is laid out beside the title / subtitle by the element.
+ * There is no actions slot — lay out any header controls (buttons, tags) inside
+ * the `header` yourself.
  *
  * Requires `@antadesign/anta/elements` to be imported (client-side only) to
  * register the underlying custom element.
@@ -83,4 +97,4 @@ export interface CardProps extends BaseProps {
  * </Card>
  * ```
  */
-export declare const Card: ({ header, footer, actions, media, mediaPosition, tone, priority, size, selected, loading, round, href, target, rel, ping, className, style, children, ...rest }: CardProps) => any;
+export declare const Card: ({ header, subtitle, icon, footer, media, mediaPosition, tone, priority, size, selected, loading, round, href, target, rel, ping, className, style, children, ...rest }: CardProps) => any;

package/dist/components/Card.js

@@ -1,9 +1,13 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle, roundStyle } from "../anta_helpers";
+import { toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { Title } from "./Title";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
 const Card = ({
   header,
+  subtitle,
+  icon,
   footer,
-  actions,
   media,
   mediaPosition,
   tone,
@@ -27,6 +31,7 @@ const Card = ({
     "--card-round",
     toneStyle(toneAttr, "--card-tone-source", style)
   );
+  const titleLevel = size === "small" ? 5 : size === "large" ? 3 : 4;
   return /* @__PURE__ */ jsxs(
     "a-card",
     {
@@ -36,7 +41,7 @@ const Card = ({
       "media-position": mediaPosition && mediaPosition !== "top" ? mediaPosition : void 0,
       selected: selected ? "" : void 0,
       loading: loading ? "" : void 0,
-      round: round ? "" : void 0,
+      round: roundAttr(round),
       href,
       target: href ? target : void 0,
       rel: href ? rel : void 0,
@@ -46,22 +51,49 @@ const Card = ({
       ...rest,
       children: [
         media != null && /* @__PURE__ */ jsx("div", { slot: "media", children: media }),
-        header != null && // A plain-string (or number) header imitates a `<Title>`: the element's
-        // header slot supplies the level-4 type scale, and this div adds the
-        // matching 8px bottom padding (inside the box — no margin-collapse). A
-        // *node* header brings its own margin (a slotted `<Title>` keeps its
-        // bottom margin; the element zeroes only the top), so it gets no wrapper
-        // padding — otherwise the gap would double.
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            slot: "header",
-            style: typeof header === "string" || typeof header === "number" ? { paddingBlockEnd: "8px" } : void 0,
-            children: header
-          }
-        ),
-        actions != null && /* @__PURE__ */ jsx("span", { slot: "actions", style: { display: "contents" }, children: actions }),
-        children,
+        icon != null && // Leading visual for the header — carried in a slot div (like `media` /
+        // `header`); the element lays it out beside the title / subtitle (see the
+        // `icon` slot in a-card.ts).
+        (typeof icon === "string" ? (
+          // A shape string → the icon centered in a circular chip, sized per the
+          // card via --card-icon-size (32 / 40 / 44 for small / medium / large).
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              slot: "icon",
+              style: {
+                width: "var(--card-icon-size, 40px)",
+                height: "var(--card-icon-size, 40px)",
+                borderRadius: "50%",
+                background: "var(--card-icon-bg)",
+                display: "grid",
+                placeItems: "center"
+              },
+              children: /* @__PURE__ */ jsx(Icon, { shape: icon })
+            }
+          )
+        ) : (
+          // Any node → used as-is (no chip).
+          /* @__PURE__ */ jsx("div", { slot: "icon", children: icon })
+        )),
+        header != null && (typeof header === "string" || typeof header === "number" ? (
+          // A string header becomes a real <Title> at the size-mapped level (see
+          // titleLevel). The header section's padding is the header→body gap; the
+          // element zeroes the slotted title's own margins so it doesn't double it.
+          // Pass a node (a `<Title level={n}>`, an `<h2>`) for a different level.
+          /* @__PURE__ */ jsx(Title, { slot: "header", level: titleLevel, tone: toneAttr, children: header })
+        ) : /* @__PURE__ */ jsx("div", { slot: "header", children: header })),
+        subtitle != null && // A subtitle sits in the header section too, right under the title, as
+        // smaller text. Last header child, so its (absent) bottom margin leaves
+        // the header→body gap to the section padding, like the title above it.
+        /* @__PURE__ */ jsx(Text, { slot: "header", size: "small", priority: "tertiary", tone: toneAttr, children: subtitle }),
+        typeof children === "string" || typeof children === "number" ? (
+          // A string / number body becomes a <Text> at secondary priority (text-2,
+          // the body colour) — stated explicitly rather than leaning on the default —
+          // following the card's tone and size. Anything else is a node the caller
+          // owns, passed through untouched.
+          /* @__PURE__ */ jsx(Text, { priority: "secondary", tone: toneAttr, size, children })
+        ) : children,
         footer != null && /* @__PURE__ */ jsx("span", { slot: "footer", style: { display: "contents" }, children: footer })
       ]
     }

package/dist/components/Card.module.css

@@ -0,0 +1,35 @@
+/* Header with a leading avatar. When an `avatar` is passed, the wrapper unites it
+   with the title + subtitle as one flex row, so a leading icon / image / initials
+   aligns as a unit with the heading instead of sitting inline inside the title
+   (where it's baseline-misaligned and has no clean vertical-centering escape).
+   The element stays neutral — this layout lives in the light-DOM header node the
+   wrapper slots in. */
+.header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.avatar {
+  flex: none;
+  display: flex;
+  align-items: center;
+}
+
+/* Title + subtitle column. min-width:0 lets a long title truncate rather than
+   push the avatar. */
+.text {
+  min-width: 0;
+}
+
+/* The title / subtitle are nested here (not direct <a-card> slot children), so the
+   element's header-margin rules don't reach them — neutralize the title's own
+   document margins and give the subtitle the same 2px gap it gets elsewhere. The
+   [level] / tag specificity clears a-title's per-level margins. */
+.text > :is(h1, h2, h3, h4, h5, h6),
+.text > a-title[level] {
+  margin-block: 0;
+}
+.text > a-text {
+  margin-block-start: 2px;
+}

package/dist/components/Checkbox.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle } from "../anta_helpers";
+import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 const valueToState = (v) => v === "indeterminate" ? "indeterminate" : v ? "checked" : "unchecked";
 const stateToValue = (s) => s === "indeterminate" ? "indeterminate" : s === "checked";
 const checkboxAttrsOf = (el) => ({
@@ -66,7 +66,7 @@ const Checkbox = ({
       tone: tone && tone !== "neutral" ? tone : void 0,
       "tone-selected": toneSelected && toneSelected !== "neutral" ? toneSelected : void 0,
       size: size && size !== "medium" ? size : void 0,
-      round: round ? "" : void 0,
+      round: roundAttr(round),
       tabIndex: disabled ? -1 : tabIndex ?? 0,
       onstatechange,
       onchange,

package/dist/components/Dialog.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, roundStyle } from "../anta_helpers";
+import { nativeStateChange, roundStyle, roundAttr } from "../anta_helpers";
 import { Button } from "./Button";
 const ROUND_SIDES = /* @__PURE__ */ new Set(["top", "right", "bottom", "left"]);
 const Dialog = ({
@@ -27,11 +27,11 @@ const Dialog = ({
       "default-state": !controlled && defaultOpen ? "open" : void 0,
       position: position && position !== "center" ? position : void 0,
       persistent: persistent ? "" : void 0,
-      round: roundSide ?? (round ? "" : void 0),
+      round: roundSide ?? roundAttr(round),
       name: !controlled ? name : void 0,
       onstatechange: onStateChange ? (e) => {
-        const { event, detail } = nativeStateChange(e);
-        if (detail)
+        const { event, detail, isOwn } = nativeStateChange(e);
+        if (isOwn && detail)
           onStateChange(event, {
             next: detail.next === "open",
             prev: detail.prev === "open"

package/dist/components/Expander.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle } from "../anta_helpers";
+import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 const Expander = ({
   title,
   level,
@@ -29,11 +29,11 @@ const Expander = ({
       tone: tone && tone !== "neutral" ? tone : void 0,
       priority: priority && priority !== "secondary" ? priority : void 0,
       outdent: outdent ? "" : void 0,
-      round: round ? "" : void 0,
+      round: roundAttr(round),
       disabled: disabled ? "" : void 0,
       onstatechange: onStateChange ? (e) => {
-        const { event, detail } = nativeStateChange(e);
-        if (detail)
+        const { event, detail, isOwn } = nativeStateChange(e);
+        if (isOwn && detail)
           onStateChange(event, {
             next: detail.next === "open",
             prev: detail.prev === "open"

package/dist/components/Input.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle } from "../anta_helpers";
+import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 const presence = (on) => on ? "" : void 0;
@@ -82,7 +82,7 @@ const Input = ({
     "a-input",
     {
       size: size && size !== "medium" ? size : void 0,
-      round: round ? "" : void 0,
+      round: roundAttr(round),
       value,
       defaultvalue: defaultValue,
       multiline: presence(multiline || rows != null),

package/dist/components/InputTime.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle } from "../anta_helpers";
+import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 const presence = (on) => on ? "" : void 0;
@@ -56,7 +56,7 @@ const InputTime = ({
     "a-input-time",
     {
       size: size && size !== "medium" ? size : void 0,
-      round: round ? "" : void 0,
+      round: roundAttr(round),
       value,
       defaultvalue: defaultValue,
       locale,

package/dist/components/Menu.js

@@ -1,5 +1,5 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, roundStyle } from "../anta_helpers";
+import { nativeStateChange, roundStyle, roundAttr } from "../anta_helpers";
 const Menu = ({
   placement,
   context,
@@ -27,14 +27,14 @@ const Menu = ({
       autowidth: autoWidth ? "" : void 0,
       state: open === void 0 ? void 0 : open ? "open" : "closed",
       onstatechange: onStateChange ? (e) => {
-        const { event, detail } = nativeStateChange(e);
-        if (detail && (detail.next === "open" || detail.next === "closed"))
+        const { event, detail, isOwn } = nativeStateChange(e);
+        if (isOwn && detail)
           onStateChange(event, {
             next: detail.next === "open",
             prev: detail.prev === "open"
           });
       } : void 0,
-      round: round ? "" : void 0,
+      round: roundAttr(round),
       role,
       "aria-orientation": "vertical",
       class: className,

package/dist/components/MenuItem.d.ts

@@ -1,6 +1,7 @@
 import type { BaseProps } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
-export interface MenuItemProps extends BaseProps {
+/** 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 +18,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 +41,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 +48,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 +67,54 @@ 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;
+};
+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);
 /**
  * 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 +135,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, role: roleOverride, className, style, children, ...rest }: MenuItemProps) => any;

package/dist/components/MenuItem.js

@@ -16,6 +16,11 @@ const MenuItem = ({
   submenu,
   value,
   onSelect,
+  href,
+  target,
+  rel,
+  download,
+  ping,
   role: roleOverride,
   className,
   style,
@@ -28,6 +33,35 @@ const MenuItem = ({
   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",
     {
@@ -83,15 +117,7 @@ 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 })),
+        labelNode,
         children,
         kbd && /* @__PURE__ */ jsx("kbd", { children: kbd }),
         (() => {

package/dist/components/Progress.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { hasChildren, toneStyle, roundStyle } from "../anta_helpers";
+import { hasChildren, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 const Progress = ({ value, max = 100, tone, round, label, hint, className, style, children, ...rest }) => {
   const percent = max > 0 ? Math.round(Math.min(100, Math.max(0, value / max * 100))) : 0;
   const clampedValue = max > 0 ? Math.min(max, Math.max(0, value)) : 0;
@@ -10,7 +10,7 @@ const Progress = ({ value, max = 100, tone, round, label, hint, className, style
       value,
       max,
       tone: tone && tone !== "neutral" ? tone : void 0,
-      round: round ? "" : void 0,
+      round: roundAttr(round),
       role: "progressbar",
       "aria-valuenow": clampedValue,
       "aria-valuemin": 0,