@antadesign/anta 0.3.6 → 0.3.8

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

@@ -0,0 +1,100 @@
+import type { BaseProps } from "../general_types";
+import type { IconShape } from "../elements/a-icon.shapes";
+export interface CardProps extends BaseProps {
+    /** 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;
+    /** 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 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
+     *  color keeps its hue while lightness/chroma are pinned. `'neutral'` (the
+     *  default) is the same as omitting it.
+     *  @defaultValue 'neutral' */
+    tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Surface emphasis. `primary` (the default) is a clean sheet; `secondary` is a
+     *  subtle fill; `tertiary` is a frosted, semi-transparent panel with a backdrop
+     *  blur.
+     *  @defaultValue 'primary' */
+    priority?: "primary" | "secondary" | "tertiary";
+    /** Size variant — scales the padding.
+     *  @defaultValue 'medium' */
+    size?: "small" | "medium" | "large";
+    /** Selected / chosen state — draws an inset ring in the tone color, for
+     *  choice-card / plan-picker patterns. */
+    selected?: boolean;
+    /** Loading state — dims the card with a skeleton pulse, sets `aria-busy`, and (in
+     *  link mode) blocks navigation. */
+    loading?: boolean;
+    /** Fully-round corners (`border-radius: 999px`, clamped to the box). Pass a
+     *  `number` (px) or a CSS length string (`'1rem'`) for a custom radius. Omit for
+     *  the default `--card-radius`. */
+    round?: boolean | number | string;
+    /** Turn the whole card into a link. The card renders a focusable anchor and its
+     *  accessible name comes from `header` → body → this URL (override with
+     *  `aria-label`). A link card is display content — don't nest interactive
+     *  controls inside it. */
+    href?: string;
+    /** Anchor target (only with `href`). */
+    target?: string;
+    /** Anchor rel (only with `href`). */
+    rel?: string;
+    /** Space-separated URLs the browser pings on navigation (only with `href`). */
+    ping?: string;
+}
+/**
+ * A surface container: a bordered, toned box laying out an optional `media`
+ * region plus a `header` / body / `footer` stack. Pass `href` to turn the whole
+ * card into a link.
+ *
+ * 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.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Card header="Deployment ready" footer={<Button priority="primary" label="Deploy" />}>
+ *   Your build passed all checks and is ready to ship.
+ * </Card>
+ * ```
+ *
+ * @example Link card
+ * ```tsx
+ * <Card href="/docs/ci" header="CI integration guide">
+ *   Wire Antithesis into your pipeline in a few minutes.
+ * </Card>
+ * ```
+ */
+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

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+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,
+  media,
+  mediaPosition,
+  tone,
+  priority,
+  size,
+  selected,
+  loading,
+  round,
+  href,
+  target,
+  rel,
+  ping,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const toneAttr = tone || void 0;
+  const computedStyle = roundStyle(
+    round,
+    "--card-round",
+    toneStyle(toneAttr, "--card-tone-source", style)
+  );
+  const titleLevel = size === "small" ? 5 : size === "large" ? 3 : 4;
+  return /* @__PURE__ */ jsxs(
+    "a-card",
+    {
+      tone: toneAttr,
+      priority: priority && priority !== "primary" ? priority : void 0,
+      size: size && size !== "medium" ? size : void 0,
+      "media-position": mediaPosition && mediaPosition !== "top" ? mediaPosition : void 0,
+      selected: selected ? "" : void 0,
+      loading: loading ? "" : void 0,
+      round: roundAttr(round),
+      href,
+      target: href ? target : void 0,
+      rel: href ? rel : void 0,
+      ping: href ? ping : void 0,
+      class: className,
+      style: computedStyle,
+      ...rest,
+      children: [
+        media != null && /* @__PURE__ */ jsx("div", { slot: "media", children: media }),
+        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 })
+      ]
+    }
+  );
+};
+export {
+  Card
+};

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/InputDate.js

@@ -136,9 +136,8 @@ const InputDate = ({
         },
         onChange: (e) => resolve(e.currentTarget.value),
         onKeyDown: (e) => {
-          if (e.key === "ArrowDown" && !disabled) {
+          if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !disabled) {
             e.preventDefault();
-            if (!open) e.currentTarget.click();
             setFocusNonce((n) => n + 1);
           }
           if (e.key === "Enter" && !disabled) {

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/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,

package/dist/components/Select.js

@@ -254,12 +254,6 @@ const Select = (props) => {
         round,
         "aria-haspopup": "menu",
         "aria-expanded": open ? "true" : "false",
-        onKeyDown: (e) => {
-          if (!open && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown")) {
-            e.preventDefault();
-            e.currentTarget.click();
-          }
-        },
         trailing: (
           // Chevron rotates down → up when open (spacing + rotation in the CSS
           // module, matching the Input "Select dropdown" example).

package/dist/components/Tabs.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState } from "../jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, wrapLabel } from "../anta_helpers";
+import { nativeStateChange, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
 import { Tooltip } from "./Tooltip";
 const Tabs = ({
   children,
@@ -62,7 +62,7 @@ const Tabs = ({
       size: size && size !== "medium" ? size : void 0,
       orientation: vertical ? "vertical" : void 0,
       noslide: noslide ? "" : void 0,
-      round: round ? "" : void 0,
+      round: roundAttr(round),
       disabled: disabled ? "" : void 0,
       onstatechange,
       onchange,
@@ -85,7 +85,7 @@ const Tabs = ({
             "aria-disabled": tabDisabled ? "true" : void 0,
             tabIndex: tabDisabled && !isSelected ? -1 : 0,
             disabled: tabDisabled ? "" : void 0,
-            round: round || p.round ? "" : void 0,
+            round: roundAttr(round) ?? roundAttr(p.round),
             children: [
               p.icon && /* @__PURE__ */ jsx("a-icon", { shape: p.icon, "aria-hidden": "true" }),
               wrapLabel(p.label != null ? p.label : p.children, "a-tab-label"),

package/dist/components/Tag.js

@@ -15,13 +15,14 @@ const Tag = ({
   children,
   ...rest
 }) => {
-  const computedStyle = toneStyle(tone, "--tag-tone-source", style);
+  const toneAttr = tone || void 0;
+  const computedStyle = toneStyle(toneAttr, "--tag-tone-source", style);
   const hasValue = value != null;
   const isIconOnly = icon != null && label == null && value == null && children == null && iconTrailing == null;
   return /* @__PURE__ */ jsxs(
     "a-tag",
     {
-      tone,
+      tone: toneAttr,
       "aria-label": isIconOnly ? `${icon} tag` : void 0,
       priority: priority && priority !== "secondary" ? priority : void 0,
       size: size && size !== "medium" ? size : void 0,

package/dist/components/Text.d.ts

@@ -23,10 +23,12 @@ export type TextProps = BaseProps & {
      *  step softer than the strongest foreground; pass `primary` for emphasis.
      *  @defaultValue secondary */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-    /** Color tint. `neutral` (the default) is the untinted `--text-{N}` scale;
-     *  the others apply the matching `--text-{N}-{tone}` palette.
+    /** Color tint. `neutral` (the default) is the untinted `--text-{N}` scale; a
+     *  named tone applies the matching `--text-{N}-{tone}` palette. Any literal CSS
+     *  color (`'#ff1493'`, `'rebeccapurple'`) is a one-off custom tone — its hue is
+     *  kept while lightness/chroma are pinned per priority in oklch.
      *  @defaultValue neutral */
-    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Type scale. `small` = 13/16, `medium` = 15/20, `large` = 17/24.
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';

package/dist/components/Text.js

@@ -1,14 +1,20 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
+import { toneStyle } from "../anta_helpers";
 const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }) => {
   const n = typeof truncate === "number" ? truncate : truncate ? 1 : null;
   const lineCount = n != null && n >= 1 ? n : null;
-  const computedStyle = lineCount != null ? { ...style, ["--line-clamp"]: lineCount } : style;
+  const toneAttr = tone || void 0;
+  const computedStyle = toneStyle(
+    toneAttr,
+    "--text-tone-source",
+    lineCount != null ? { ...style, ["--line-clamp"]: lineCount } : style
+  );
   const canExpand = expandable && lineCount != null;
   return /* @__PURE__ */ jsx(
     "a-text",
     {
       priority,
-      tone,
+      tone: toneAttr,
       size,
       inline: inline ? "" : void 0,
       truncate: lineCount != null ? String(lineCount) : void 0,

package/dist/components/Title.d.ts

@@ -8,10 +8,12 @@ export interface TitleProps extends BaseProps {
     /** Visual priority. Maps to text-1..text-5 (`primary` = text-1).
      *  @defaultValue primary */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-    /** Color tint. `neutral` (the default) is the untinted `--text-{N}` scale;
-     *  the others apply the matching `--text-{N}-{tone}` palette.
+    /** Color tint. `neutral` (the default) is the untinted `--text-{N}` scale; a
+     *  named tone applies the matching `--text-{N}-{tone}` palette. Any literal CSS
+     *  color (`'#ff1493'`, `'rebeccapurple'`) is a one-off custom tone — its hue is
+     *  kept while lightness/chroma are pinned per priority in oklch.
      *  @defaultValue neutral */
-    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
 }
 /**
  * Block-level heading with level 1-6, priority, and tone.

package/dist/components/Title.js

@@ -1,15 +1,17 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
+import { toneStyle } from "../anta_helpers";
 const Title = ({ level = 2, priority, tone, className, style, children, ...rest }) => {
+  const toneAttr = tone || void 0;
   return /* @__PURE__ */ jsx(
     "a-title",
     {
       level: String(level),
       priority,
-      tone,
+      tone: toneAttr,
       role: "heading",
       "aria-level": level,
       class: className,
-      style,
+      style: toneStyle(toneAttr, "--title-tone-source", style),
       ...rest,
       children
     }

package/dist/components/Tooltip.js

@@ -1,5 +1,5 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-import { roundStyle } from "../anta_helpers";
+import { roundStyle, roundAttr } from "../anta_helpers";
 const Tooltip = ({
   delay,
   placement,
@@ -18,7 +18,7 @@ const Tooltip = ({
     {
       delay: delay != null ? String(delay) : void 0,
       placement: placement === "top" ? "top" : void 0,
-      round: round ? "" : void 0,
+      round: roundAttr(round),
       follow: follow ? "" : void 0,
       interactive: interactive ? "" : void 0,
       "truncated-only": truncatedOnly ? "" : void 0,