@antadesign/anta 0.3.7 → 0.3.8

package/dist/elements/a-card.css

@@ -1,211 +1 @@
-@layer anta {
-  /* Host + token definitions for <a-card>. The visible box lives here (not in the
-     shadow) so plain consumer CSS overrides it and it paints before the element
-     upgrades; the shadow <style> owns layout + region typography and only
-     REFERENCES these --card-* tokens with literal fallbacks. Named tones use
-     Anta's theme-aware role tokens, so dark mode is mostly free (same as
-     <a-expander> / <a-tag>); only the custom-tone branch needs a .dark re-tune. */
-
-  a-card {
-    /* Text roles: title = the strong foreground, text = the body (a step softer). */
-    --card-title: var(--text-1);
-    --card-text: var(--text-2);
-
-    /* Surface pairs per priority. `primary` (the default) is a clean sheet —
-       bg-1 in light, bg-4 in dark (see the `.dark` neutral rule), and
-       bg-4-{tone} for a toned card; `secondary` is a subtle fill (bg-2);
-       `tertiary` is a frosted panel (the primary surface, semi-transparent, +
-       a backdrop blur — see below). */
-    --card-bg-secondary: var(--bg-2);
-    --card-bg-primary: var(--bg-1);
-
-    /* `primary` is the default surface. */
-    --card-bg: var(--card-bg-primary);
-    /* Neutral edge hairline: text-2 at 10% (via --card-text). Toned cards override
-       this with their border-4-{tone} in the tone rules below. Flat across
-       priorities. */
-    --card-border: color-mix(in oklch, var(--card-text) 10%, transparent);
-
-    /* Selected ring (a 2px inset stroke) — the tone's strongest border. */
-    --card-selected-ring: var(--border-1);
-
-    /* Closed-surface hover lift for link cards: an oklch lightness bump that keeps
-       hue + chroma, so it works for every priority and tone in light and dark
-       (a transparent tertiary surface keeps zero alpha). Tune the amount here. */
-    --card-bg-hover-lift: 0.01;
-
-    --card-radius: 8px;
-    --card-padding: 16px;
-
-    display: block;
-    box-sizing: border-box;
-    /* Fill the container (grid cell / flex item / block) so width is always
-       definite. This is also what keeps `container-type` below from collapsing
-       the card to zero width in a shrink-to-fit context (a query container can't
-       size to its own content). Same as <a-expander>. */
-    width: 100%;
-    /* Establish the card as a query container so both the shadow layout and
-       consumer slotted content can `@container card (…)` on its width. */
-    container-type: inline-size;
-    container-name: card;
-
-    color: var(--card-text);
-    background: var(--card-bg);
-    /* The edge is a 1px OUTSET shadow ring (spread 1px, no blur), not a border:
-       it sits outside the box so full-bleed media reaches the very edge (no 1px
-       border inset) and it never adds to layout. `overflow: clip` doesn't clip an
-       element's own outset shadow, so the ring shows while the media still clips
-       to the rounded corners. */
-    box-shadow: 0 0 0 1px var(--card-border);
-    border-radius: var(--card-radius);
-    /* Clip full-bleed media to the rounded corners. */
-    overflow: clip;
-  }
-
-  a-card[priority="secondary"] {
-    --card-bg: var(--card-bg-secondary);
-  }
-
-  /* `round` re-points --card-radius, so both the host clip-radius and the shadow
-     container's ring follow. Bare `round` → 999px (fully round, clamped to the
-     box); a length (`round="16px"`, or the wrapper's `round={16}` → inline
-     --card-round) sets a custom radius. The typed attr() covers raw-HTML authors. */
-  a-card[round] {
-    --card-round: attr(round type(<length>));
-    --card-radius: var(--card-round, 999px);
-  }
-  a-card[priority="tertiary"] {
-    /* Frosted glass: the primary surface at 1% over a backdrop blur, so the card
-       reads over busy / colored / image backgrounds. It keeps the same hairline
-       ring as the other priorities (no --card-border override). The blur only
-       shows where there's detail behind it; the translucency reads everywhere. */
-    --card-bg: color-mix(in oklch, var(--card-bg-primary) 1%, transparent);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-  }
-
-  /* Neutral dark: bg-1 (primary's light surface) is pure black in dark mode, so
-     step neutral primary up to bg-4. Secondary stays bg-2 via its token, and a
-     toned card's --bg-*-{tone} tokens self-flip, so this is scoped to neutral. */
-  .dark a-card:not([tone]),
-  .dark a-card[tone="neutral"] {
-    --card-bg-primary: var(--bg-4);
-  }
-
-  /* Hover lift, link cards only — gated so it doesn't stick after a tap. */
-  @media (hover: hover) and (pointer: fine) {
-    a-card[href]:not([loading]):hover {
-      background: oklch(from var(--card-bg) calc(l + var(--card-bg-hover-lift)) c h);
-    }
-  }
-
-  /* Pre-upgrade skeleton: the host border / background / radius already paint
-     (they're defined here, not in the shadow), so only the content inset is
-     missing before the shadow's .content exists — supply it here, then the
-     shadow owns padding once :defined. */
-  a-card:not(:defined) {
-    padding: var(--card-padding);
-  }
-
-  /* A slotted heading node — <a-title> (any level) or a raw <h1>–<h6> — carries a
-     document TOP margin (Title level 4 is 20px) that would add a leading gap in the
-     header; zero it. The BOTTOM margin stays, so a heading header keeps its gap to
-     the body. (A plain-STRING header has no margin of its own, so the `<Card>`
-     wrapper wraps it in a div with the matching 8px bottom margin — CSS can't tell
-     a string from a styled node, so that split lives in the wrapper.) Specificity
-     is bumped past `a-title[level="N"]` (0,1,1) and the reset's `hN` (0,0,1);
-     `@layer anta` keeps it overridable by un-layered CSS. */
-  a-card :is(h1, h2, h3, h4, h5, h6),
-  a-card a-title[level] {
-    margin-block-start: 0;
-  }
-
-  /* Named tones — re-point the text roles + the per-priority surface pairs to the
-     matching theme tokens (which self-flip for dark mode). */
-  a-card[tone="brand"] {
-    --card-title: var(--text-1-brand);
-    --card-text: var(--text-2-brand);
-    --card-bg-secondary: var(--bg-2-brand);
-    --card-bg-primary: var(--bg-4-brand);
-    --card-border: var(--border-4-brand);
-    --card-selected-ring: var(--border-1-brand);
-  }
-  a-card[tone="info"] {
-    --card-title: var(--text-1-info);
-    --card-text: var(--text-2-info);
-    --card-bg-secondary: var(--bg-2-info);
-    --card-bg-primary: var(--bg-4-info);
-    --card-border: var(--border-4-info);
-    --card-selected-ring: var(--border-1-info);
-  }
-  a-card[tone="success"] {
-    --card-title: var(--text-1-success);
-    --card-text: var(--text-2-success);
-    --card-bg-secondary: var(--bg-2-success);
-    --card-bg-primary: var(--bg-4-success);
-    --card-border: var(--border-4-success);
-    --card-selected-ring: var(--border-1-success);
-  }
-  a-card[tone="warning"] {
-    --card-title: var(--text-1-warning);
-    --card-text: var(--text-2-warning);
-    --card-bg-secondary: var(--bg-2-warning);
-    --card-bg-primary: var(--bg-4-warning);
-    --card-border: var(--border-4-warning);
-    --card-selected-ring: var(--border-1-warning);
-  }
-  a-card[tone="critical"] {
-    --card-title: var(--text-1-critical);
-    --card-text: var(--text-2-critical);
-    --card-bg-secondary: var(--bg-2-critical);
-    --card-bg-primary: var(--bg-4-critical);
-    --card-border: var(--border-4-critical);
-    --card-selected-ring: var(--border-1-critical);
-  }
-
-  /* Custom tone — any non-named `tone` value keeps the source hue while
-     lightness/chroma are pinned per token in oklch, the <a-expander> mechanism.
-     The JSX wrapper writes --card-tone-source inline; the typed attr() fallback
-     picks up raw <a-card tone="…"> on engines that support it. */
-  a-card[tone]:not(
-      [tone="neutral"],
-      [tone="brand"],
-      [tone="info"],
-      [tone="success"],
-      [tone="warning"],
-      [tone="critical"]
-    ) {
-    --card-tone-source: attr(tone type(<color>), currentColor);
-
-    --card-text:               oklch(from var(--card-tone-source) 0.41 0.15 h);
-    --card-title:              oklch(from var(--card-tone-source) 0.33 0.15 h);
-    --card-bg-secondary:       oklch(from var(--card-tone-source) 0.99 0.006 h);
-    --card-bg-primary:         oklch(from var(--card-tone-source) 0.955 0.02 h);
-    --card-border:             oklch(from var(--card-tone-source) 0.895 0.045 h);
-    --card-selected-ring:      oklch(from var(--card-tone-source) 0.6 0.15 h);
-  }
-
-  .dark a-card[tone]:not(
-      [tone="neutral"],
-      [tone="brand"],
-      [tone="info"],
-      [tone="success"],
-      [tone="warning"],
-      [tone="critical"]
-    ) {
-    --card-text:               oklch(from var(--card-tone-source) 0.75 0.11 h);
-    --card-title:              oklch(from var(--card-tone-source) 0.82 0.10 h);
-    --card-bg-secondary:       oklch(from var(--card-tone-source) 0.13 0.02 h);
-    --card-bg-primary:         oklch(from var(--card-tone-source) 0.19 0.04 h);
-    --card-border:             oklch(from var(--card-tone-source) 0.26 0.07 h);
-    --card-selected-ring:      oklch(from var(--card-tone-source) 0.7 0.13 h);
-  }
-
-  /* Size — padding scale (medium is the default, set on the base rule). */
-  a-card[size="small"] {
-    --card-padding: 12px;
-  }
-  a-card[size="large"] {
-    --card-padding: 20px;
-  }
-}
+@layer anta{a-card{--card-text: var(--text-2);--card-bg-secondary: var(--bg-2);--card-bg-primary: var(--bg-1);--card-bg: var(--card-bg-primary);--card-border: var(--border-4);--card-border-hover: var(--border-3);--card-selected-ring: var(--border-1);--card-bg-hover-lift: .01;--card-radius: 8px;--card-padding: 12px;--card-content-fs: 15px;--card-content-lh: 20px;--card-icon-size: 40px;--card-icon-bg: var(--bg-4);--card-header-nudge: 2px;display:block;box-sizing:border-box;position:relative;width:100%;container-type:inline-size;container-name:card;color:var(--card-text);background:var(--card-bg);box-shadow:0 0 0 1px var(--card-border);border-radius:var(--card-radius);overflow:clip;transition:background-color .15s ease,box-shadow .15s ease,opacity .18s ease}a-card[priority=secondary]{--card-bg: var(--card-bg-secondary);--card-icon-blend: multiply}.dark a-card:not([priority=tertiary]){--card-icon-blend: exclusion}a-card[round]{--card-round: attr(round type(<length>));--card-radius: var(--card-round, 999px)}a-card[priority=tertiary]{--card-bg: color-mix(in oklch, var(--card-bg-primary) 1%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.dark a-card:not([tone]),.dark a-card[tone=neutral]{--card-bg-primary: var(--bg-4);--card-icon-bg: var(--bg-5)}@media(hover:hover)and (pointer:fine){a-card[href]:not([loading]):hover{background:oklch(from var(--card-bg) calc(l + var(--card-bg-hover-lift)) c h)}a-card:not([loading]):hover{box-shadow:0 0 0 1px var(--card-border-hover)}}a-card[href]:not([loading]):active{box-shadow:0 0 0 1px var(--card-border)}@media(prefers-reduced-motion:reduce){a-card{transition:none}}a-card:not(:defined){padding:var(--card-padding);opacity:0}a-card:not(:has(>[slot=media]))::part(media),a-card:not(:has(>[slot=header])):not(:has(>[slot=icon]))::part(header),a-card:not(:has(>[slot=icon]))::part(icon),a-card:not(:has(>[slot=footer]))::part(footer),a-card:not(:has(>:not([slot])))::part(body){display:none}a-card:is(:has(>[slot=header]),:has(>[slot=icon]))::part(body){padding-block-start:0}a-card:has(>[slot=footer])::part(body){padding-block-end:0}a-card :is(h1,h2,h3,h4,h5,h6),a-card a-title[level]{margin-block-start:0}a-card>:is(h1,h2,h3,h4,h5,h6)[slot=header],a-card>a-title[slot=header]{margin-block-end:0}a-card>a-title[slot=header]+a-text[slot=header],a-card>:is(h1,h2,h3,h4,h5,h6)[slot=header]+a-text[slot=header]{margin-block-start:1px}a-card[size=large]>a-title[slot=header]+a-text[slot=header],a-card[size=large]>:is(h1,h2,h3,h4,h5,h6)[slot=header]+a-text[slot=header]{margin-block-start:2px}a-card[tone=brand]{--card-text: var(--text-2-brand);--card-bg-secondary: var(--bg-4-brand);--card-bg-primary: var(--bg-2-brand);--card-border: var(--border-4-brand);--card-border-hover: var(--border-3-brand);--card-icon-bg: var(--bg-5-brand);--card-selected-ring: var(--border-1-brand)}a-card[tone=info]{--card-text: var(--text-2-info);--card-bg-secondary: var(--bg-4-info);--card-bg-primary: var(--bg-2-info);--card-border: var(--border-4-info);--card-border-hover: var(--border-3-info);--card-icon-bg: var(--bg-5-info);--card-selected-ring: var(--border-1-info)}a-card[tone=success]{--card-text: var(--text-2-success);--card-bg-secondary: var(--bg-4-success);--card-bg-primary: var(--bg-2-success);--card-border: var(--border-4-success);--card-border-hover: var(--border-3-success);--card-icon-bg: var(--bg-5-success);--card-selected-ring: var(--border-1-success)}a-card[tone=warning]{--card-text: var(--text-2-warning);--card-bg-secondary: var(--bg-4-warning);--card-bg-primary: var(--bg-2-warning);--card-border: var(--border-4-warning);--card-border-hover: var(--border-3-warning);--card-icon-bg: var(--bg-5-warning);--card-selected-ring: var(--border-1-warning)}a-card[tone=critical]{--card-text: var(--text-2-critical);--card-bg-secondary: var(--bg-4-critical);--card-bg-primary: var(--bg-2-critical);--card-border: var(--border-4-critical);--card-border-hover: var(--border-3-critical);--card-icon-bg: var(--bg-5-critical);--card-selected-ring: var(--border-1-critical)}.dark a-card[tone=brand]{--card-bg-primary: var(--bg-4-brand);--card-bg-secondary: var(--bg-2-brand)}.dark a-card[tone=info]{--card-bg-primary: var(--bg-4-info);--card-bg-secondary: var(--bg-2-info)}.dark a-card[tone=success]{--card-bg-primary: var(--bg-4-success);--card-bg-secondary: var(--bg-2-success)}.dark a-card[tone=warning]{--card-bg-primary: var(--bg-4-warning);--card-bg-secondary: var(--bg-2-warning)}.dark a-card[tone=critical]{--card-bg-primary: var(--bg-4-critical);--card-bg-secondary: var(--bg-2-critical)}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--card-tone-source: attr(tone type(<color>), currentColor);--card-text: oklch(from var(--card-tone-source) .41 .15 h);--card-bg-secondary: oklch(from var(--card-tone-source) .955 .02 h);--card-bg-primary: oklch(from var(--card-tone-source) .99 .006 h);--card-icon-bg: oklch(from var(--card-tone-source) .925 .03 h);--card-border: oklch(from var(--card-tone-source) .895 .045 h);--card-border-hover: oklch(from var(--card-tone-source) .85 .06 h);--card-selected-ring: oklch(from var(--card-tone-source) .6 .15 h)}.dark a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--card-text: oklch(from var(--card-tone-source) .75 .11 h);--card-bg-secondary: oklch(from var(--card-tone-source) .13 .02 h);--card-bg-primary: oklch(from var(--card-tone-source) .19 .04 h);--card-icon-bg: oklch(from var(--card-tone-source) .22 .05 h);--card-border: oklch(from var(--card-tone-source) .26 .07 h);--card-border-hover: oklch(from var(--card-tone-source) .32 .09 h);--card-selected-ring: oklch(from var(--card-tone-source) .7 .13 h)}a-card[priority=tertiary]{--card-icon-bg: var(--bg-3)}a-card[tone=brand][priority=tertiary]{--card-icon-bg: var(--bg-3-brand)}a-card[tone=info][priority=tertiary]{--card-icon-bg: var(--bg-3-info)}a-card[tone=success][priority=tertiary]{--card-icon-bg: var(--bg-3-success)}a-card[tone=warning][priority=tertiary]{--card-icon-bg: var(--bg-3-warning)}a-card[tone=critical][priority=tertiary]{--card-icon-bg: var(--bg-3-critical)}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--card-icon-bg: oklch(from var(--card-tone-source) .97 .014 h)}.dark a-card[tone=brand][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-brand), white 10%)}.dark a-card[tone=info][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-info), white 10%)}.dark a-card[tone=success][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-success), white 10%)}.dark a-card[tone=warning][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-warning), white 10%)}.dark a-card[tone=critical][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5-critical), white 10%)}.dark a-card:not([tone])[priority=tertiary],.dark a-card[tone=neutral][priority=tertiary]{--card-icon-bg: color-mix(in oklch, var(--bg-5), white 10%)}.dark a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--card-icon-bg: color-mix(in oklch, oklch(from var(--card-tone-source) .22 .05 h), white 10%)}a-card[size=small]{--card-padding: 8px;--card-header-nudge: 1px;--card-icon-size: 32px;--card-content-fs: 13px;--card-content-lh: 16px}a-card[size=large]{--card-padding: 16px;--card-header-nudge: 4px;--card-icon-size: 44px;--card-content-fs: 17px;--card-content-lh: 24px}}

package/dist/elements/a-card.js

@@ -26,10 +26,9 @@ const SHADOW_STYLE = `
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px var(--focus-ring);
   }
 
-  [part="media"] { display: none; }
-  [part="media"].has-content { display: block; }
-  :host([media-position="left"]) [part="media"].has-content,
-  :host([media-position="right"]) [part="media"].has-content { flex: none; }
+  [part="media"] { display: block; }
+  :host([media-position="left"]) [part="media"],
+  :host([media-position="right"]) [part="media"] { flex: none; }
 
   .content {
     display: flex;
@@ -37,55 +36,49 @@ const SHADOW_STYLE = `
     flex: 1 1 auto;
     min-width: 0;
     min-height: 0;
-    padding: var(--card-padding, 16px);
+    /* Base type for the content zone, matching the body <a-text> at this size. The
+       title / subtitle / body all set their own font, so this changes nothing
+       visible \u2014 it defines the em/ch base so the header gap (in ch) resolves against
+       the body's type size. */
+    font-size: var(--card-content-fs, 15px);
+    line-height: var(--card-content-lh, 20px);
   }
 
-  .header-row { display: none; }
-  .header-row.has-content {
+  .header {
     display: flex;
-    align-items: flex-start;
-    gap: 8px;
+    align-items: center;
+    gap: 1ch;
+    padding: var(--card-padding, 12px);
+    padding-block-start: calc(var(--card-padding, 12px) - var(--card-header-nudge, 1px));
+    padding-block-end: calc(var(--card-padding, 12px) / 2);
   }
-
-  slot[name="header"] { display: none; }
-  slot[name="header"].has-content {
+  slot[name="icon"] {
+    flex: none;
+    display: flex;
+    align-items: center;
+    /* Off by default; secondary cards in light multiply the chip into the deeper
+       surface (see --card-icon-blend in the external sheet). */
+    mix-blend-mode: var(--card-icon-blend, normal);
+  }
+  slot[name="header"] {
     display: block;
     flex: 1 1 auto;
     min-width: 0;
-    font-size: 17px;
-    line-height: 20px;
-    font-weight: 584.62;
-    letter-spacing: 0;
-    font-feature-settings: 'ss02', 'ss05', 'tnum';
-    color: var(--card-title, var(--text-1));
   }
-
-  slot[name="actions"] { display: none; }
-  slot[name="actions"].has-content {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex: none;
-  }
-
   slot[part="body"] {
     display: block;
     flex: 1 1 auto;
     min-width: 0;
     min-height: 0;
-    font-size: 15px;
-    line-height: 20px;
-    color: var(--card-text, var(--text-2));
+    padding: var(--card-padding, 12px);
   }
-
-  slot[name="footer"] { display: none; }
-  slot[name="footer"].has-content {
+  slot[name="footer"] {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
     justify-content: flex-start;
-    padding-block-start: var(--card-padding, 16px);
+    padding: var(--card-padding, 12px);
   }
 
   :host([selected]) .container { box-shadow: inset 0 0 0 2px var(--card-selected-ring, var(--focus-ring)); }
@@ -100,12 +93,8 @@ const SHADOW_STYLE = `
 class ACardElement extends HTMLElementBase {
   static observedAttributes = ["href", "target", "rel", "ping", "loading", "aria-label"];
   #container;
-  #mediaSlot;
-  #headerRow;
   #headerSlot;
-  #actionsSlot;
   #bodySlot;
-  #footerSlot;
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
@@ -114,56 +103,39 @@ class ACardElement extends HTMLElementBase {
     this.#container = document.createElement("a");
     this.#container.className = "container";
     this.#container.setAttribute("part", "container");
-    this.#mediaSlot = document.createElement("slot");
-    this.#mediaSlot.name = "media";
-    this.#mediaSlot.setAttribute("part", "media");
+    const mediaSlot = document.createElement("slot");
+    mediaSlot.name = "media";
+    mediaSlot.setAttribute("part", "media");
     const content = document.createElement("div");
     content.className = "content";
     content.setAttribute("part", "content");
-    this.#headerRow = document.createElement("div");
-    this.#headerRow.className = "header-row";
+    const headerSection = document.createElement("div");
+    headerSection.className = "header";
+    headerSection.setAttribute("part", "header");
+    const iconSlot = document.createElement("slot");
+    iconSlot.name = "icon";
+    iconSlot.setAttribute("part", "icon");
     this.#headerSlot = document.createElement("slot");
     this.#headerSlot.name = "header";
-    this.#headerSlot.setAttribute("part", "header");
-    this.#actionsSlot = document.createElement("slot");
-    this.#actionsSlot.name = "actions";
-    this.#actionsSlot.setAttribute("part", "actions");
+    this.#headerSlot.setAttribute("part", "title");
+    headerSection.append(iconSlot, this.#headerSlot);
     this.#bodySlot = document.createElement("slot");
     this.#bodySlot.setAttribute("part", "body");
-    this.#footerSlot = document.createElement("slot");
-    this.#footerSlot.name = "footer";
-    this.#footerSlot.setAttribute("part", "footer");
-    this.#headerRow.append(this.#headerSlot, this.#actionsSlot);
-    content.append(this.#headerRow, this.#bodySlot, this.#footerSlot);
-    this.#container.append(this.#mediaSlot, content);
+    const footerSlot = document.createElement("slot");
+    footerSlot.name = "footer";
+    footerSlot.setAttribute("part", "footer");
+    content.append(headerSection, this.#bodySlot, footerSlot);
+    this.#container.append(mediaSlot, content);
     shadow.append(style, this.#container);
-    this.#mediaSlot.addEventListener("slotchange", () => this.#syncHasContent());
-    this.#footerSlot.addEventListener("slotchange", () => this.#syncHasContent());
-    this.#actionsSlot.addEventListener("slotchange", () => this.#syncHasContent());
-    this.#headerSlot.addEventListener("slotchange", () => {
-      this.#syncHasContent();
-      this.#syncName();
-    });
+    this.#headerSlot.addEventListener("slotchange", () => this.#syncName());
     this.#bodySlot.addEventListener("slotchange", () => this.#syncName());
   }
   connectedCallback() {
-    this.#syncHasContent();
     this.#syncLink();
   }
   attributeChangedCallback() {
     this.#syncLink();
   }
-  /** Toggle the per-zone `has-content` classes (empty zones reserve no box). */
-  #syncHasContent() {
-    const set = (el, has) => el.classList.toggle("has-content", has);
-    set(this.#mediaSlot, this.#mediaSlot.assignedNodes().length > 0);
-    set(this.#footerSlot, this.#footerSlot.assignedNodes().length > 0);
-    const header = this.#headerSlot.assignedNodes().length > 0;
-    const actions = this.#actionsSlot.assignedNodes().length > 0;
-    set(this.#headerSlot, header);
-    set(this.#actionsSlot, actions);
-    set(this.#headerRow, header || actions);
-  }
   /** Mirror the link attributes onto the shadow anchor — but drop `href` while
    *  `loading` so a loading card can't navigate. Also reflects `aria-busy`. */
   #syncLink() {

package/dist/elements/a-checkbox.js

@@ -80,8 +80,6 @@ class ACheckboxElement extends HTMLElementBase {
     const ok = this.dispatchEvent(
       new CustomEvent("statechange", {
         cancelable: true,
-        bubbles: true,
-        composed: true,
         detail: { next, prev }
       })
     );

package/dist/elements/a-radio-group.d.ts

@@ -23,7 +23,9 @@ export declare class ARadioGroupElement extends HTMLElementBase {
     private emitChange;
     /** Dispatch the shared `statechange` event. `reason` lets a controller tell a
      *  user pick (cancelable) apart from a form `reset` / bfcache `restore` (not).
-     *  `next` is `null` when nothing is selected (no default / reset-to-none). */
+     *  `next` is `null` when nothing is selected (no default / reset-to-none).
+     *  Neither bubbles nor composed — a point-to-point request to this element's
+     *  own wrapper, not a notification (see STATEFUL-COMPONENTS.md). */
     private emitStateChange;
     private onClick;
     private onKeyDown;

package/dist/elements/a-radio-group.js

@@ -102,13 +102,13 @@ class ARadioGroupElement extends HTMLElementBase {
   }
   /** Dispatch the shared `statechange` event. `reason` lets a controller tell a
    *  user pick (cancelable) apart from a form `reset` / bfcache `restore` (not).
-   *  `next` is `null` when nothing is selected (no default / reset-to-none). */
+   *  `next` is `null` when nothing is selected (no default / reset-to-none).
+   *  Neither bubbles nor composed — a point-to-point request to this element's
+   *  own wrapper, not a notification (see STATEFUL-COMPONENTS.md). */
   emitStateChange(next, prev, reason, cancelable) {
     return this.dispatchEvent(
       new CustomEvent("statechange", {
         cancelable,
-        bubbles: true,
-        composed: true,
         detail: { next, prev, reason }
       })
     );

package/dist/elements/a-tabs.d.ts

@@ -20,7 +20,9 @@ export declare class ATabsElement extends HTMLElementBase {
     private requestSelect;
     private emitChange;
     /** Dispatch the shared cancelable `statechange`. `next`/`prev` are values
-     *  (`null` when nothing is selected). Returns false if a listener vetoed. */
+     *  (`null` when nothing is selected). Returns false if a listener vetoed.
+     *  Neither bubbles nor composed — a point-to-point request to this element's
+     *  own wrapper, not a notification (see STATEFUL-COMPONENTS.md). */
     private emitStateChange;
     private onClick;
     private onKeyDown;

package/dist/elements/a-tabs.js

@@ -96,13 +96,13 @@ class ATabsElement extends HTMLElementBase {
     this.dispatchEvent(new Event("change", { bubbles: true }));
   }
   /** Dispatch the shared cancelable `statechange`. `next`/`prev` are values
-   *  (`null` when nothing is selected). Returns false if a listener vetoed. */
+   *  (`null` when nothing is selected). Returns false if a listener vetoed.
+   *  Neither bubbles nor composed — a point-to-point request to this element's
+   *  own wrapper, not a notification (see STATEFUL-COMPONENTS.md). */
   emitStateChange(next, prev) {
     return this.dispatchEvent(
       new CustomEvent("statechange", {
         cancelable: true,
-        bubbles: true,
-        composed: true,
         detail: { next, prev }
       })
     );

package/dist/elements/a-text.css

@@ -1 +1 @@
-@layer anta{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty;font-feature-settings:"ss02","ss05","tnum"}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[priority=quinary]{--text-color: var(--text-5);--text-link-color: currentColor;--text-link-hover: var(--text-4)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=brand][priority=quinary]{--text-color: var(--text-5-brand);--text-link-hover: var(--text-4-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=success][priority=quinary]{--text-color: var(--text-5-success);--text-link-hover: var(--text-4-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=critical][priority=quinary]{--text-color: var(--text-5-critical);--text-link-hover: var(--text-4-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=warning][priority=quinary]{--text-color: var(--text-5-warning);--text-link-hover: var(--text-4-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone=info][priority=quinary]{--text-color: var(--text-5-info);--text-link-hover: var(--text-4-info)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}
+@layer anta{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty;font-feature-settings:"ss02","ss05","tnum"}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[priority=quinary]{--text-color: var(--text-5);--text-link-color: currentColor;--text-link-hover: var(--text-4)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=brand][priority=quinary]{--text-color: var(--text-5-brand);--text-link-hover: var(--text-4-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=success][priority=quinary]{--text-color: var(--text-5-success);--text-link-hover: var(--text-4-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=critical][priority=quinary]{--text-color: var(--text-5-critical);--text-link-hover: var(--text-4-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=warning][priority=quinary]{--text-color: var(--text-5-warning);--text-link-hover: var(--text-4-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone=info][priority=quinary]{--text-color: var(--text-5-info);--text-link-hover: var(--text-4-info)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--text-tone-source: attr(tone type(<color>), currentColor);--_text-tone: oklch(from var(--text-tone-source) .41 .15 h);--text-color: var(--_text-tone);--text-link-color: currentColor;--text-link-hover: oklch(from var(--text-tone-source) .33 .15 h)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: oklch(from var(--text-tone-source) .33 .15 h)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--text-color: color-mix(in oklch, var(--_text-tone) 80%, transparent);--text-link-hover: var(--_text-tone)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{--text-color: color-mix(in oklch, var(--_text-tone) 60%, transparent)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quinary]{--text-color: color-mix(in oklch, var(--_text-tone) 40%, transparent)}.dark a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_text-tone: oklch(from var(--text-tone-source) .75 .11 h);--text-link-hover: oklch(from var(--text-tone-source) .82 .1 h)}.dark a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: oklch(from var(--text-tone-source) .82 .1 h)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}

package/dist/elements/a-title.css

@@ -1 +1 @@
-@layer anta{a-title{display:block;color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance;font-feature-settings:"ss02","ss05","tnum"}a-title a-icon{transform:translateY(-.05em)}a-title[level="1"]{font-size:28px;line-height:32px;margin-block-start:0;margin-block-end:16px}a-title[level="2"]{font-size:24px;line-height:28px;margin-block-start:32px;margin-block-end:12px}a-title[level="3"]{font-size:20px;line-height:24px;margin-block-start:24px;margin-block-end:12px}a-title[level="4"]{font-size:17px;line-height:20px;margin-block-start:20px;margin-block-end:8px}a-title[level="5"]{font-size:15px;line-height:20px;margin-block-start:16px;margin-block-end:8px}a-title[level="6"]{font-size:13px;line-height:16px;margin-block-start:16px;margin-block-end:4px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[priority=quinary]{color:var(--text-5)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=brand][priority=quinary]{color:var(--text-5-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=success][priority=quinary]{color:var(--text-5-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=critical][priority=quinary]{color:var(--text-5-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=warning][priority=quinary]{color:var(--text-5-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone=info][priority=quinary]{color:var(--text-5-info)}}
+@layer anta{a-title{display:block;color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance;font-feature-settings:"ss02","ss05","tnum"}a-title a-icon{transform:translateY(-.05em)}a-title[level="1"]{font-size:28px;line-height:32px;margin-block-start:0;margin-block-end:16px}a-title[level="2"]{font-size:24px;line-height:28px;margin-block-start:32px;margin-block-end:12px}a-title[level="3"]{font-size:20px;line-height:24px;margin-block-start:24px;margin-block-end:12px}a-title[level="4"]{font-size:17px;line-height:20px;margin-block-start:20px;margin-block-end:8px}a-title[level="5"]{font-size:15px;line-height:20px;margin-block-start:16px;margin-block-end:8px}a-title[level="6"]{font-size:13px;line-height:16px;margin-block-start:16px;margin-block-end:4px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[priority=quinary]{color:var(--text-5)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=brand][priority=quinary]{color:var(--text-5-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=success][priority=quinary]{color:var(--text-5-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=critical][priority=quinary]{color:var(--text-5-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=warning][priority=quinary]{color:var(--text-5-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone=info][priority=quinary]{color:var(--text-5-info)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--title-tone-source: attr(tone type(<color>), currentColor);--_title-tone: oklch(from var(--title-tone-source) .41 .15 h);color:oklch(from var(--title-tone-source) .33 .15 h)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=secondary]{color:var(--_title-tone)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{color:color-mix(in oklch,var(--_title-tone) 80%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{color:color-mix(in oklch,var(--_title-tone) 60%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quinary]{color:color-mix(in oklch,var(--_title-tone) 40%,transparent)}.dark a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_title-tone: oklch(from var(--title-tone-source) .75 .11 h);color:oklch(from var(--title-tone-source) .82 .1 h)}}

package/dist/elements/index.d.ts

@@ -33,5 +33,6 @@ export { ATabElement, register_a_tab } from './a-tab';
 export { ATabsElement, register_a_tabs } from './a-tabs';
 export { ATabPanelElement, register_a_tabpanel } from './a-tabpanel';
 export { ADialogElement, register_a_dialog } from './a-dialog';
+export { ACardElement, register_a_card } from './a-card';
 import './a-title.css';
 import './a-tag.css';

package/dist/elements/index.js

@@ -18,11 +18,13 @@ import { ATabElement, register_a_tab } from "./a-tab";
 import { ATabsElement, register_a_tabs } from "./a-tabs";
 import { ATabPanelElement, register_a_tabpanel } from "./a-tabpanel";
 import { ADialogElement, register_a_dialog } from "./a-dialog";
+import { ACardElement, register_a_card } from "./a-card";
 import "./a-title.css";
 import "./a-tag.css";
 export {
   AButtonElement,
   ACalendarElement,
+  ACardElement,
   ACheckboxElement,
   ADialogElement,
   AExpanderElement,
@@ -43,6 +45,7 @@ export {
   ATooltipElement,
   register_a_button,
   register_a_calendar,
+  register_a_card,
   register_a_checkbox,
   register_a_dialog,
   register_a_expander,

package/dist/general_types.d.ts

@@ -11,6 +11,9 @@ export interface BaseProps {
     id?: string;
     /** HTML `title` attribute — native browser tooltip on hover. */
     title?: string;
+    /** Assigns the element to a named `<slot>` of a parent web component (e.g.
+     *  `slot="header"` inside a `<Card>`, `slot="footer"` inside a `<Dialog>`). */
+    slot?: string;
     /** Tab order. Set to `-1` to skip the element when tabbing. */
     tabIndex?: number;
     /** React/Preact reconciliation key when rendered inside a list. Consumed by the
@@ -171,9 +174,10 @@ export interface AProgressAttributes extends BaseAttributes {
 export interface ATextAttributes extends BaseAttributes {
     /** Visual priority. Maps to text-1..text-5. */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-    /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale;
-     *  the others apply the matching `--text-{N}-{tone}` palette. */
-    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale; a named
+     *  tone applies the matching `--text-{N}-{tone}` palette; any literal CSS color
+     *  is a custom tone (hue kept, lightness/chroma pinned per priority in oklch). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Type scale. `small` = 13/16, `medium` (default) = 15/20, `large` = 17/24. */
     size?: 'small' | 'medium' | 'large';
     /** Render as inline-block instead of the default block. */
@@ -205,9 +209,10 @@ export interface ATitleAttributes extends BaseAttributes {
     level?: string;
     /** Visual priority. Maps to text-1..text-5. */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-    /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale;
-     *  the others apply the matching `--text-{N}-{tone}` palette. */
-    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale; a named
+     *  tone applies the matching `--text-{N}-{tone}` palette; any literal CSS color
+     *  is a custom tone (hue kept, lightness/chroma pinned per priority in oklch). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** ARIA role — the JSX wrapper sets this to `'heading'`. */
     role?: string;
     /** ARIA heading level — the JSX wrapper sets this to match `level`. */
@@ -995,3 +1000,47 @@ export interface ATabpanelAttributes extends BaseAttributes {
      *  `internals.ariaLabelledByElements`. */
     role?: 'tabpanel';
 }
+/**
+ * Attributes for the `<a-card>` custom element — a surface container that lays out
+ * an optional `media` region plus a `header` / body / `footer` stack, and becomes a
+ * link when given `href`. Slots (light-DOM children): `media`, `icon`, `header`,
+ * `footer`, and the default slot for the body. The element exposes
+ * `::part(container | media | content | icon | header | body | footer)`. In link
+ * mode it names the shadow anchor from `aria-label` → header text → body text →
+ * `href`. Low-level attributes; for the typed JSX wrapper use `Card` from
+ * `@antadesign/anta`.
+ */
+export interface ACardAttributes extends BaseAttributes {
+    /** Semantic tone, or any literal CSS color for a one-off custom tone. Named tones
+     *  re-point the surface + text; a custom color keeps its hue with lightness/chroma
+     *  pinned. `'neutral'` is the default (same as omitting it). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Surface emphasis. `primary` (default) is a clean sheet; `secondary` a subtle
+     *  fill; `tertiary` a frosted, semi-transparent panel with a backdrop blur. */
+    priority?: 'primary' | 'secondary' | 'tertiary';
+    /** Size variant — scales the padding. `medium` is the default. */
+    size?: 'small' | 'medium' | 'large';
+    /** Which edge the full-bleed `media` slot sits on. `top` is the default. */
+    'media-position'?: 'top' | 'bottom' | 'left' | 'right';
+    /** Selected / chosen state — an inset ring in the tone colour. Presence-based
+     *  (`''` on, omit off). */
+    selected?: boolean | '';
+    /** Loading state — skeleton pulse, `aria-busy`, and (in link mode) navigation is
+     *  blocked (the anchor drops its `href`). Presence-based (`''` on, omit off). */
+    loading?: boolean | '';
+    /** Fully-round corners (`border-radius: 999px`), or a custom radius via a length
+     *  value (`round="16px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
+    /** Turn the whole card into a link — the shadow container becomes a focusable
+     *  anchor with this URL. */
+    href?: string;
+    /** Anchor target (only with `href`). */
+    target?: string;
+    /** Anchor rel (only with `href`). */
+    rel?: string;
+    /** Space-separated URLs pinged on navigation (only with `href`). */
+    ping?: string;
+    /** Explicit accessible name for the link — overrides the header → body → href
+     *  chain the element derives in link mode. */
+    'aria-label'?: string;
+}

package/dist/index.d.ts

@@ -67,6 +67,8 @@ export { TabPanel } from './components/TabPanel';
 export type { TabPanelProps } from './components/TabPanel';
 export { Dialog } from './components/Dialog';
 export type { DialogProps } from './components/Dialog';
+export { Card } from './components/Card';
+export type { CardProps } from './components/Card';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
 export type { AntaIntrinsicElements } from './jsx-runtime';