@antadesign/anta 0.3.33 → 0.3.35

package/dist/components/Banner.d.ts

@@ -7,13 +7,12 @@ export interface BannerProps extends BaseProps {
     /** Trailing controls (buttons, links) rendered as a compact row after the
      *  message and `children`. */
     actions?: React.ReactNode;
-    /** Free content placed BETWEEN the message and the actions. */
+    /** Supporting content between the message and actions. */
     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, and border
-     *  color (used if you opt into a border); a custom color keeps its hue while
-     *  lightness/chroma are pinned. `'neutral'` (the default) is the same as omitting it.
-     *  @defaultValue 'neutral' */
+    /** Semantic tone or a CSS color. Colors the surface, text, border, and dismiss
+     * control. Custom colors use an inline CSS variable; under a CSP that blocks
+     * style attributes, provide that variable through external CSS instead.
+     * @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.
@@ -23,47 +22,33 @@ export interface BannerProps extends BaseProps {
      *  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. */
     round?: boolean | number | string;
-    /** Whether the trailing ✕ dismiss button is present. `false` removes it — drive
-     *  dismissal yourself (a controlled `dismissed`, or your own control) instead.
-     *  It removes the built-in ✕ without making the banner un-dismissible.
-     *  @defaultValue true */
+    /** Show the built-in Dismiss control. Set false when the notice is permanent
+     * or another action requests dismissal through `data-banner-dismiss`.
+     * @defaultValue true */
     closable?: boolean;
-    /** ARIA role for the strip host. `'status'` (a polite live region, so the notice
-     *  reaches assistive tech) by default; pass `'alert'` for an urgent notice that
-     *  should interrupt, or a landmark role.
-     *  @defaultValue 'status' */
+    /** Host role. Use 'status' for polite announcements or 'alert' for urgent ones.
+     * @defaultValue 'status' */
     role?: string;
-    /** Controlled dismissed state. When provided, the consumer owns visibility: the
-     *  banner follows this prop only, and clicking ✕ *requests* dismissal (reject by
-     *  not updating). **Requires `onDismiss`** — controlled mode never self-hides, so
-     *  without a handler to set `dismissed` the ✕ can't close the banner. Leave
-     *  undefined for uncontrolled. */
+    /** Controlled visibility. Set true in `onDismiss` to accept a request, or keep
+     * false to reject it. Set false to show the notice again. Dismissal hides the
+     * host and retains its children; it does not unmount them. */
     dismissed?: boolean;
     /** Initial dismissed state for the uncontrolled case (read once on mount). */
     defaultDismissed?: boolean;
-    /** Fired when the user dismisses the banner (clicks ✕). Uncontrolled, the banner
-     *  hides itself and this notifies. Controlled, use it to accept the
-     *  request — set `dismissed` to `true` (or ignore to reject); pair it with
-     *  `dismissed`, or the banner can't be closed. */
+    /** Dismissal request from the close control or a `data-banner-dismiss` action.
+     * Controlled Banner stays visible until `dismissed` changes. Uncontrolled
+     * Banner applies an uncanceled request itself. */
     onDismiss?: () => void;
 }
 /**
- * `<Banner>` — a full-width, dismissible message strip. `message`, `children`, and
- * `actions` form a row at the inline start by default; `align="center"` centers it.
+ * Full-width notice with a message, supporting content, actions, and dismissal.
+ * JSX owns the light-DOM regions and ARIA. External CSS renders the layout before
+ * registration; the browser element owns visibility through ElementInternals.
  *
- * 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
- * attributes (safe wherever the host DOM is reconciled, incl. off the UI thread).
- *
- * Uncontrolled (`defaultDismissed`): the element owns visibility and the ✕
- * self-dismisses. Controlled (`dismissed` + `onDismiss`): the wrapper emits
- * `state="open"|"closed"`; the element treats the attribute as the source of
- * truth and the ✕ only *requests* dismissal. The element uses Anta's shared
- * open/closed state contract under the hood — the wrapper presents it as the
- * banner-natural `dismissed` (closed = dismissed). See STATEFUL-COMPONENTS.md.
- *
- * Requires `@antadesign/anta/elements` to be imported (client-side only) to
- * register the underlying custom element.
+ * `dismissed` controls visibility. `onDismiss` requests dismissal without applying
+ * it in controlled mode. `defaultDismissed` seeds uncontrolled visibility once.
+ * Granular dismissal also requires `@antadesign/anta/elements/a-button` and the
+ * close icon requires `@antadesign/anta/elements/a-icon`.
  *
  * @example Basic usage
  * ```tsx
@@ -72,8 +57,8 @@ export interface BannerProps extends BaseProps {
  *
  * @example Controlled
  * ```tsx
- * const [hidden, setHidden] = useState(false)
- * <Banner message="Saved." dismissed={hidden} onDismiss={() => setHidden(true)} />
+ * const [dismissed, setDismissed] = useState(false)
+ * <Banner message="Saved." dismissed={dismissed} onDismiss={() => setDismissed(true)} />
  * ```
  */
 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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr, hasChildren } from "../anta_helpers";
 import { Button } from "./Button";
+import { useNativeEventProps } from "../native-event-props";
 const Banner = ({
   message,
   actions,
@@ -18,12 +19,20 @@ const Banner = ({
   ...rest
 }) => {
   const controlled = dismissed != null;
+  const eventProps = useNativeEventProps({
+    onstatechange: onDismiss ? (e) => {
+      const { detail, isOwn } = nativeStateChange(e);
+      if (isOwn && detail?.next === "closed") onDismiss();
+    } : void 0
+  });
   const computedStyle = roundStyle(
     round,
     "--banner-round",
     toneStyle(tone, "--banner-tone-source", style)
   );
-  const messageNode = message == null ? null : typeof message === "string" || typeof message === "number" ? /* @__PURE__ */ jsx("a-banner-message", { slot: "message", children: message }) : /* @__PURE__ */ jsx("span", { slot: "message", style: { display: "contents" }, children: message });
+  const hasMessage = hasChildren(message) && typeof message !== "boolean" && (typeof message !== "string" || Boolean(message.trim()));
+  const hasActions = hasChildren(actions) && typeof actions !== "boolean" && (typeof actions !== "string" || Boolean(actions.trim()));
+  const messageNode = !hasMessage ? null : typeof message === "string" || typeof message === "number" ? /* @__PURE__ */ jsx("a-banner-message", { children: message }) : /* @__PURE__ */ jsx("a-banner-content", { children: message });
   return /* @__PURE__ */ jsxs(
     "a-banner",
     {
@@ -33,26 +42,15 @@ const Banner = ({
       align: align === "center" ? "center" : void 0,
       round: roundAttr(round),
       role,
-      onstatechange: onDismiss ? (e) => {
-        const { detail, isOwn } = nativeStateChange(e);
-        if (isOwn && detail?.next === "closed") onDismiss();
-      } : void 0,
+      ...eventProps,
       class: className,
       style: computedStyle,
       ...rest,
       children: [
         messageNode,
-        children,
-        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
-        // hydration; the element turns that into a dismiss request.
-        // CONTRACT: `data-custom-event` below MUST match `DISMISS_TRIGGER` in the
-        // element (src/elements/a-banner.ts). Duplicated, not shared — importing
-        // the element module here would self-register it and break the
-        // wrapper/element decoupling. Rename in both places.
-        /* @__PURE__ */ jsx("span", { slot: "close", style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+        hasChildren(children) && typeof children !== "boolean" && /* @__PURE__ */ jsx("a-banner-content", { children }),
+        hasActions && /* @__PURE__ */ jsx("a-banner-actions", { children: actions }),
+        closable !== false && /* @__PURE__ */ jsx("a-banner-close", { children: /* @__PURE__ */ jsx(
           Button,
           {
             priority: "quaternary",

package/dist/components/Breadcrumbs.d.ts

@@ -2,7 +2,6 @@ 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 = '→' | '/' | '•' | '▸';

package/dist/components/Breadcrumbs.js

@@ -5,7 +5,6 @@ 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;

package/dist/components/Button.d.ts

@@ -40,9 +40,8 @@ export type BaseButtonProps = {
 };
 /** Content axis — slots render in this order inside the button:
  *  `icon` → `label` → `children` → `iconTrailing`. Pass `icon` alone
- *  for an icon-only button (the CSS detects this structurally via
- *  `:has(> a-icon:only-child)` and gives the host square padding +
- *  min-size pin). */
+ *  for an icon-only button (the CSS detects a lone icon, allowing tooltip
+ *  and copy helpers, and gives the host equal padding on both axes). */
 export type ContentMode = {
     /** Label text. Renders between the leading icon and `children`. */
     label?: string;

package/dist/components/Button.js

@@ -65,6 +65,7 @@ const Button = ({
     // own `aria-label` (via ...rest) wins by spread order — that's the channel
     // ButtonCopy uses to name an icon-only copy button "Copy".
     "aria-label": isIconOnly ? icon : void 0,
+    "data-anta-icon-only": isIconOnly ? "" : void 0,
     class: className,
     style: computedStyle,
     onClick: unavailable ? void 0 : onClick

package/dist/components/ButtonCopy.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { Button } from "./Button";
 import { useCopyFeedback } from "../anta_helpers";
-import { copyElementProps, isNodeCopy } from "./copy-props";
+import { useCopyElementProps, isNodeCopy } from "./copy-props";
 const ButtonCopy = ({
   icon,
   iconPlacement = "leading",
@@ -22,7 +22,7 @@ const ButtonCopy = ({
   const { shownIcon, shownTone, handleCopied } = useCopyFeedback(restingIcon, tone, onCopied);
   const iconSlot = iconPlacement === "trailing" ? { iconTrailing: shownIcon } : iconPlacement === "none" ? {} : { icon: shownIcon };
   const hasText = label != null || children != null;
-  const copyAttrs = copyElementProps({
+  const copyAttrs = useCopyElementProps({
     copy,
     copyNode,
     copyUrl,
@@ -40,6 +40,7 @@ const ButtonCopy = ({
       label,
       tone: iconPlacement === "none" ? tone : shownTone,
       "aria-label": ariaLabel ?? (hasText ? void 0 : "Copy"),
+      "data-anta-icon-only": !hasText && shownIcon != null ? "" : void 0,
       "data-copy-node-button": isNodeCopy({ copyNode }) ? "" : void 0,
       ...rest,
       children: [

package/dist/components/Calendar.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import cn from "clsx";
+import { useNativeEventProps } from "../native-event-props";
 import { Temporal } from "temporal-polyfill";
 import { useMemo, useState } from "../jsx-runtime";
-import { nativeStateChange } from "../anta_helpers";
+import { valueAttributes, nativeStateChange } from "../anta_helpers";
 import { Button } from "./Button";
 import { Menu } from "./Menu";
 import { MenuItem } from "./MenuItem";
@@ -32,7 +33,7 @@ const Calendar = ({
   const maxD = parseISODate(max);
   const today = Temporal.Now.plainDateISO();
   const [internalSelected, setInternalSelected] = useState(
-    () => parseISODate(defaultValue)
+    () => parseISODate(value ?? defaultValue)
   );
   const selected = controlled ? parseISODate(value) : internalSelected;
   const [cursor, setCursor] = useState(
@@ -43,6 +44,7 @@ const Calendar = ({
   if (value !== lastSyncedValue) {
     setLastSyncedValue(value);
     const d = parseISODate(value);
+    if (controlled) setInternalSelected(d);
     if (d) {
       effectiveCursor = clampDate(d, minD, maxD);
       setCursor(effectiveCursor);
@@ -57,8 +59,8 @@ const Calendar = ({
     setLastFocusSignal(focusSignal);
     if (focusSignal !== void 0) setFocusReq({ iso: cursorIso, n: focusSignal });
   }
-  const minYear = minD ? minD.year : today.year - 3;
-  const maxYear = maxD ? maxD.year : today.year + 3;
+  const minYear = minD ? minD.year : Math.min(effectiveCursor.year - 3, maxD?.year ?? Infinity);
+  const maxYear = maxD ? maxD.year : Math.max(effectiveCursor.year + 3, minD?.year ?? -Infinity);
   const years = [];
   for (let y = minYear; y <= maxYear; y++) years.push(y);
   const monthNames = useMemo(
@@ -82,7 +84,7 @@ const Calendar = ({
   const jumpItems = useMemo(() => {
     const monthItem = (y, i) => {
       const m = i + 1;
-      const isCurrent = y === cursor.year && m === cursor.month;
+      const isCurrent = y === effectiveCursor.year && m === effectiveCursor.month;
       return /* @__PURE__ */ jsx(
         MenuItem,
         {
@@ -99,11 +101,11 @@ const Calendar = ({
         `${y}-${m}`
       );
     };
-    return years.length === 1 ? monthNames.map((_, i) => monthItem(years[0], i)) : years.map((y) => /* @__PURE__ */ jsxs(MenuItem, { submenu: true, label: String(y), selected: y === cursor.year, children: [
-      y === cursor.year && /* @__PURE__ */ jsx("span", { className: "jump-dot", "aria-hidden": "true" }),
+    return years.length === 1 ? monthNames.map((_, i) => monthItem(years[0], i)) : years.map((y) => /* @__PURE__ */ jsxs(MenuItem, { submenu: true, label: String(y), selected: y === effectiveCursor.year, children: [
+      y === effectiveCursor.year && /* @__PURE__ */ jsx("span", { className: "jump-dot", "aria-hidden": "true" }),
       /* @__PURE__ */ jsx(Menu, { children: monthNames.map((_, i) => monthItem(y, i)) })
     ] }, y));
-  }, [monthNames, cursor.year, cursor.month, minYear, maxYear, min, max, disabled]);
+  }, [monthNames, effectiveCursor.year, effectiveCursor.month, minYear, maxYear, min, max, disabled]);
   const onElementStateChange = (raw) => {
     const { event, detail } = nativeStateChange(raw);
     if (!detail) return;
@@ -129,6 +131,7 @@ const Calendar = ({
   };
   const prevDisabled = disabled || minD != null && Temporal.PlainDate.compare(cursor.with({ day: 1 }).subtract({ days: 1 }), minD) < 0;
   const nextDisabled = disabled || maxD != null && Temporal.PlainDate.compare(cursor.with({ day: 1 }).add({ months: 1 }), maxD) > 0;
+  const events = useNativeEventProps({ onstatechange: onElementStateChange, onchange: onElementChange, onnavigate: onNavigate });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -181,13 +184,10 @@ const Calendar = ({
             role: "group",
             "aria-label": ariaLabel ?? month.heading,
             name,
-            value: controlled ? value : void 0,
-            defaultvalue: !controlled ? defaultValue : void 0,
+            ...valueAttributes(value, defaultValue),
             disabled: disabled ? "" : void 0,
             "data-focus": focusReq ? `${focusReq.iso}#${focusReq.n}` : void 0,
-            onstatechange: onElementStateChange,
-            onchange: onElementChange,
-            onnavigate: onNavigate,
+            ...events,
             children: [
               month.weekdays.map((w, i) => /* @__PURE__ */ jsx(
                 "span",

package/dist/components/Card.d.ts

@@ -53,10 +53,10 @@ export interface CardProps extends BaseProps {
      *  `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. */
+    /** Turn the whole card into a native link. ARIA props and `tabIndex` apply to
+     *  that anchor. A text header or body supplies its default name; custom content
+     *  uses the native content name. Override with `aria-label` or `aria-labelledby`.
+     *  Linked cards must not contain interactive controls. */
     href?: string;
     /** Anchor target (only with `href`). */
     target?: string;
@@ -70,18 +70,10 @@ 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 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.
+ * Renders CSS-only `a-card-*` structural tags in light DOM. The wrapper owns
+ * structure, link attributes, and ARIA. Raw HTML authors write the same markup.
+ * Card needs no element registration; load its external CSS through the bundle
+ * or the granular `@antadesign/anta/elements/a-card` entry.
  *
  * @example Basic usage
  * ```tsx
@@ -97,4 +89,4 @@ export interface CardProps extends BaseProps {
  * </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;
+export declare const Card: ({ header, subtitle, icon, footer, media, mediaPosition, tone, priority, size, selected, loading, round, href, target, rel, ping, className, style, children, tabIndex, ...rest }: CardProps) => any;

package/dist/components/Card.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { neutralToneAttr, toneStyle, roundStyle, roundAttr, hasChildren } from "../anta_helpers";
 import { Title } from "./Title";
 import { Text } from "./Text";
 import { Icon } from "./Icon";
@@ -23,16 +23,39 @@ const Card = ({
   className,
   style,
   children,
+  tabIndex,
   ...rest
 }) => {
   const toneAttr = neutralToneAttr(tone);
-  const computedStyle = roundStyle(
-    round,
-    "--card-round",
-    toneStyle(toneAttr, "--card-tone-source", style)
-  );
+  const computedStyle = roundStyle(round, "--card-round", toneStyle(toneAttr, "--card-tone-source", style));
   const titleLevel = size === "small" ? 5 : size === "large" ? 3 : 4;
-  return /* @__PURE__ */ jsxs(
+  const linked = href != null;
+  const aria = {};
+  const host = {};
+  for (const [name, value] of Object.entries(rest)) {
+    if (name.startsWith("aria-")) aria[name] = value;
+    else host[name] = value;
+  }
+  const textValue = (node) => typeof node === "string" || typeof node === "number" ? String(node).replace(/\s+/g, " ").trim() || void 0 : void 0;
+  const textName = textValue(header) ?? textValue(children);
+  const present = (node) => typeof node !== "boolean" && hasChildren(node);
+  const busy = aria["aria-busy"];
+  const label = aria["aria-label"];
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    present(media) && /* @__PURE__ */ jsx("a-card-media", { children: media }),
+    /* @__PURE__ */ jsxs("a-card-content", { children: [
+      (present(header) || present(subtitle) || present(icon)) && /* @__PURE__ */ jsxs("a-card-header", { children: [
+        present(icon) && /* @__PURE__ */ jsx("a-card-icon", { children: typeof icon === "string" ? /* @__PURE__ */ jsx("a-card-icon-chip", { children: /* @__PURE__ */ jsx(Icon, { shape: icon }) }) : icon }),
+        (present(header) || present(subtitle)) && /* @__PURE__ */ jsxs("a-card-title", { children: [
+          typeof header === "string" || typeof header === "number" ? /* @__PURE__ */ jsx(Title, { level: titleLevel, tone: toneAttr, font: "sans-serif", children: header }) : header,
+          present(subtitle) && /* @__PURE__ */ jsx(Text, { size: "small", priority: "tertiary", tone: toneAttr, children: subtitle })
+        ] })
+      ] }),
+      present(children) && /* @__PURE__ */ jsx("a-card-body", { children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { priority: "secondary", tone: toneAttr, size, children }) : children }),
+      present(footer) && /* @__PURE__ */ jsx("a-card-footer", { children: footer })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(
     "a-card",
     {
       tone: toneAttr,
@@ -42,46 +65,27 @@ const Card = ({
       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("a-card-icon-chip", { slot: "icon", 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 color) — 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 })
-      ]
+      tabIndex: linked ? void 0 : tabIndex,
+      ...host,
+      ...linked ? {} : aria,
+      "aria-busy": linked ? void 0 : busy ?? (loading ? "true" : void 0),
+      children: linked ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          "data-anta-card-link": "",
+          href: loading ? void 0 : href,
+          target: loading ? void 0 : target,
+          rel: loading ? void 0 : rel,
+          ping: loading ? void 0 : ping,
+          tabIndex,
+          ...aria,
+          "aria-label": label ?? (loading ? void 0 : textName),
+          "aria-busy": busy ?? (loading ? "true" : void 0),
+          children: /* @__PURE__ */ jsx("a-card-layout", { children: content })
+        }
+      ) : content
     }
   );
 };

package/dist/components/Dialog.d.ts

@@ -74,6 +74,7 @@ export interface DialogProps extends Omit<BaseProps, "title"> {
  *
  * Requires `@antadesign/anta/elements` to be imported (client-side only) to
  * register the underlying custom element.
+ * Inside another shadow root, load `@antadesign/anta/elements/a-dialog.css` there with a stylesheet `<link>` because document CSS cannot reach it.
  *
  * @example Controlled
  * ```tsx

package/dist/components/Dialog.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { nativeStateChange, roundStyle, roundAttr } from "../anta_helpers";
+import { useNativeEventProps } from "../native-event-props";
 import { Button } from "./Button";
 const ROUND_SIDES = /* @__PURE__ */ new Set(["top", "right", "bottom", "left"]);
 const Dialog = ({
@@ -20,6 +21,18 @@ const Dialog = ({
 }) => {
   const controlled = open !== void 0;
   const roundSide = typeof round === "string" && ROUND_SIDES.has(round) ? round : void 0;
+  const events = useNativeEventProps({
+    // React 19 keeps the event name's case after `on`; Preact lowercases it.
+    // Both bind `statechange` with this spelling, whereas `onStateChange` does not.
+    onstatechange: onStateChange ? (e) => {
+      const { event, detail, isOwn } = nativeStateChange(e);
+      if (isOwn && detail)
+        onStateChange(event, {
+          next: detail.next === "open",
+          prev: detail.prev === "open"
+        });
+    } : void 0
+  });
   return /* @__PURE__ */ jsxs(
     "a-dialog",
     {
@@ -29,14 +42,7 @@ const Dialog = ({
       persistent: persistent ? "" : void 0,
       round: roundSide ?? roundAttr(round),
       name: !controlled ? name : void 0,
-      onstatechange: onStateChange ? (e) => {
-        const { event, detail, isOwn } = nativeStateChange(e);
-        if (isOwn && detail)
-          onStateChange(event, {
-            next: detail.next === "open",
-            prev: detail.prev === "open"
-          });
-      } : void 0,
+      ...events,
       class: className,
       style: roundStyle(roundSide ? void 0 : round, "--dialog-round", style),
       ...rest,
@@ -49,7 +55,7 @@ const Dialog = ({
         // element (src/elements/a-dialog.ts). Duplicated, not shared — importing
         // the element module here would self-register it and break the
         // wrapper/element decoupling. Rename in both places.
-        /* @__PURE__ */ jsx("span", { slot: "close", style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("a-dialog-close", { slot: "close", children: /* @__PURE__ */ jsx(
           Button,
           {
             priority: "tertiary",
@@ -61,7 +67,7 @@ const Dialog = ({
         ) }),
         header != null && /* @__PURE__ */ jsx("div", { slot: "header", children: header }),
         children,
-        footer != null && /* @__PURE__ */ jsx("span", { slot: "footer", style: { display: "contents" }, children: footer })
+        footer != null && /* @__PURE__ */ jsx("a-dialog-footer", { slot: "footer", children: footer })
       ]
     }
   );

package/dist/components/Expander.d.ts

@@ -46,11 +46,9 @@ export interface ExpanderProps extends Omit<BaseProps, "title"> {
      *  expander keeps it open. `actions` stay live; disable them
      *  separately if needed. */
     disabled?: boolean;
-    /** Round corners sized to half the folded (header) height: a pill when folded,
-     *  and — when expanded — the same corner radius rather than a bigger stadium.
-     *  The element measures the header, so it tracks custom header content. Pass a
-     *  `number` (px) or CSS length string for a *fixed* radius that overrides the
-     *  measurement (and skips it) in both states. */
+    /** Use a `1rem` corner radius in both folded and expanded states, independent
+     *  of title level or header height. Pass a number (px) or CSS length string
+     *  for a custom radius. */
     round?: boolean | number | string;
     /** Controlled open state. When provided, the consumer owns open/close. Selecting
      *  the summary requests a change through `onStateChange`; omit `open` for
@@ -68,20 +66,7 @@ export interface ExpanderProps extends Omit<BaseProps, "title"> {
         prev: boolean;
     }) => void;
 }
-/**
- * `<Expander>` — a collapsible disclosure section.
- *
- * A pure, stateless pass-through to `<a-expander>`: the element handles all
- * interaction (toggle, keyboard, ARIA, animation), so the wrapper holds
- * no state and grabs no ref — it only maps props to attributes (safe
- * wherever the host DOM is reconciled, incl. off the UI thread).
- *
- * Uncontrolled (`defaultOpen`): the element updates its open state. The wrapper
- * emits `default-state="open"` — never `state` — so the DOM carries no stale
- * controlled attribute. Controlled (`open` + `onStateChange`): the wrapper
- * emits `state="open" | "closed"`; the element treats the attribute as the
- * source of truth and clicks only dispatch the cancelable `statechange` event,
- * giving real controlled semantics (a consumer can reject a toggle). See
- * STATEFUL-COMPONENTS.md.
- */
+/** Disclosure with named light-DOM regions and external styling. The element
+ * owns its native summary button, applied state, and collapsed accessibility.
+ * JSX owns region markup, attributes, and styles without DOM refs. */
 export declare const Expander: ({ title, level, tone, priority, outdent, actions, indicator, indicatorPlacement, disabled, round, open, defaultOpen, onStateChange, className, style, children, ...rest }: ExpanderProps) => any;