@antadesign/anta 0.2.0 → 0.2.1

package/dist/elements/a-progress.css

@@ -1,68 +1 @@
-@layer anta {
-  a-progress {
-    --progress-bg: var(--bg-4);
-    --progress-border-color: var(--border-4);
-    --progress-indicator-bg: var(--bg-5);
-    /* Right-edge fade: from the indicator's own bg to the border
-       colour, both opaque. Tone variants automatically re-tint because
-       both endpoint tokens (`--progress-indicator-bg`,
-       `--progress-border-color`) get re-aliased per tone. */
-    --progress-indicator-edge: linear-gradient(
-      90deg,
-      var(--progress-indicator-bg) 0%,
-      var(--progress-border-color) 100%
-    );
-    --progress-text-color: var(--text-2);
-    --progress-hint-color: var(--text-3);
-  
-    display: block;
-    container-type: inline-size;
-    padding: 4px 8px;
-    min-height: 8px;
-    background: var(--progress-bg);
-    /* Per-component reset, same spirit as Tailwind preflight: declare
-       width / style / colour at a known state so a consumer only has
-       to change ONE property to opt in. Writing `border-width: 4px`
-       in your own CSS (or via the Anta playground's CSS tab) gives a
-       4px solid themed border immediately — no need to also specify
-       `border-style: solid` or `border-color`. */
-    border: 0px solid var(--progress-border-color);
-    border-radius: 0;
-  }
-  
-  a-progress[tone="info"] {
-    --progress-bg: var(--bg-4-info);
-    --progress-border-color: var(--border-4-info);
-    --progress-indicator-bg: var(--bg-5-info);
-    --progress-text-color: var(--text-2-info);
-    --progress-hint-color: var(--text-3-info);
-  }
-  
-  a-progress-label {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5ch;
-    font-variant-numeric: tabular-nums;
-    font-feature-settings: 'ss02', 'ss05';
-    letter-spacing: 0.03em;
-    font-size: 13px;
-    line-height: 16px;
-  }
-  
-  a-progress-number {
-    flex-shrink: 0;
-    color: var(--progress-text-color);
-  }
-  
-  a-progress-text {
-    flex: 1 1 auto;
-    min-width: 0;
-    color: var(--progress-text-color);
-  }
-  
-  a-progress-hint {
-    flex-shrink: 0;
-    margin-left: auto;
-    color: var(--progress-hint-color);
-  }
-}
+@layer anta{a-progress{--progress-bg: var(--bg-4);--progress-border-color: var(--border-4);--progress-indicator-bg: var(--bg-5);--progress-indicator-edge: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-border-color) 100% );--progress-text-color: var(--text-2);--progress-hint-color: var(--text-3);display:block;container-type:inline-size;padding:4px 8px;min-height:8px;background:var(--progress-bg);border:0px solid var(--progress-border-color);border-radius:0}a-progress[tone=info]{--progress-bg: var(--bg-4-info);--progress-border-color: var(--border-4-info);--progress-indicator-bg: var(--bg-5-info);--progress-text-color: var(--text-2-info);--progress-hint-color: var(--text-3-info)}a-progress-label{display:flex;align-items:flex-start;gap:.5ch;font-variant-numeric:tabular-nums;font-feature-settings:"ss02","ss05";letter-spacing:.03em;font-size:13px;line-height:16px}a-progress-number{flex-shrink:0;color:var(--progress-text-color)}a-progress-text{flex:1 1 auto;min-width:0;color:var(--progress-text-color)}a-progress-hint{flex-shrink:0;margin-left:auto;color:var(--progress-hint-color)}}

package/dist/elements/a-tag.css

@@ -1,196 +1 @@
-@layer anta {
-  /* `<a-tag>` is intentionally CSS-only — no JS, no shadow DOM, no
-     `customElements.define`. It's a small uppercase pill / chip styled
-     purely from attributes; the `Tag` JSX wrapper composes its content
-     from `icon` / `label` / `value` / `iconTrailing` props (mirroring
-     `<a-button>`) into the light-DOM child elements styled below.
-
-     Sizing is intrinsic — no fixed height. Like `<a-button>`, the pill's
-     height falls out of `line-height` + `padding-block` + the border, so
-     the text is never clipped and a consumer can retune the padding
-     tokens without fighting a hard height.
-
-     Color comes from Anta's theme-aware semantic tokens (`--text-*`,
-     `--bg-*`), so the named tones need no `.dark` rules — the tokens
-     re-theme themselves. Only the custom-tone `oklch` knobs are re-tuned
-     for dark mode. The hairline border derives from `--tag-text`, so
-     every tone (named or custom) gets a matching edge. */
-
-  a-tag {
-    --tag-text: var(--text-3);
-    --tag-bg: var(--bg-4);
-    --tag-border: color-mix(in oklch, var(--tag-text) 9%, transparent);
-    --tag-separator: color-mix(in oklch, var(--tag-text) 30%, transparent);
-
-    /* 1.5px top/bottom — the extra 0.5px each side compensates for the
-       0.5px (vs 1px) border, keeping the pill at its original 20px height. */
-    --tag-padding-block: 1.5px;
-    --tag-padding-inline: 6.5px;
-    --tag-icon-size: 13px;
-    --tag-label-weight: 600;
-    --tag-gap: 0.6ch;
-
-    display: inline-flex;
-    align-items: center;
-    gap: var(--tag-gap);
-    box-sizing: border-box;
-    max-width: 100%;
-    vertical-align: middle;
-    overflow: hidden;
-    white-space: nowrap;
-    -webkit-user-drag: none;
-
-    color: var(--tag-text);
-    background: var(--tag-bg);
-    border: 0.5px solid var(--tag-border);
-    border-radius: 22px;
-
-    padding-block: var(--tag-padding-block);
-    padding-inline: var(--tag-padding-inline);
-
-    font-family: var(--sans-serif);
-    font-weight: 450;
-    font-size: 11px;
-    line-height: 16px;
-    text-transform: uppercase;
-    letter-spacing: 0.08ch;
-    /* Tabular figures are always on (so counts / versions / timers don't
-       reflow), plus `ss05` alternate numerals — both layered on top of
-       the default ss01 / case / calt set. */
-    font-feature-settings: 'tnum' 1, 'ss05' 1, 'ss01', 'case', 'calt';
-  }
-
-  /* Icons scale to the pill (the default 16px a-icon is too big here) and
-     don't shrink in the flex row. */
-  a-tag a-icon {
-    --icon-size: var(--tag-icon-size);
-    flex: none;
-  }
-
-  /* label / value segments. Each ellipsizes independently if the pill is
-     width-constrained. */
-  a-tag a-tag-label,
-  a-tag a-tag-value {
-    display: inline-block;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  /* `value` is the default, unmodified text — it just inherits the tag's
-     color and base weight. */
-  a-tag a-tag-value { font-weight: 450; }
-  /* `label` is the bold "key" placed before the value: same color, just
-     heavier (weight 600). It only renders as <a-tag-label> when paired
-     with a value — the JSX wrapper drops a lone label into <a-tag-value>
-     so a standalone tag keeps the default styling. No divider; the weight
-     contrast does the separating. */
-  a-tag a-tag-label { font-weight: var(--tag-label-weight); }
-
-  /* Optical edge padding: an icon at an edge needs less room than a text
-     edge, so trim ~2px on whichever side a leading / trailing icon sits.
-     `max(0px, …)` keeps it from going negative at small sizes. */
-  a-tag:has(> a-icon:first-child) { padding-inline-start: max(0px, var(--tag-padding-inline) - 2px); }
-  a-tag:has(> a-icon:last-child)  { padding-inline-end:   max(0px, var(--tag-padding-inline) - 2px); }
-
-  /* Segmented children — when raw children (not the structured label /
-     value) are passed, each segment after the first gets a hairline
-     divider, the legacy multi-part style. Icons and the label / value
-     elements are excluded, so `label` + `value` stay divider-less and a
-     leading / trailing icon sits flush. The flex `gap` sits to the left
-     of the border and `padding-left` balances it on the right. */
-  a-tag
-    > :not(a-icon, a-tag-label, a-tag-value)
-    ~ :not(a-icon, a-tag-label, a-tag-value) {
-    padding-left: var(--tag-gap);
-    border-left: 0.5px solid var(--tag-separator);
-  }
-
-  /* Named tones — re-point text + bg only; the border re-derives, and
-     dark mode falls out of the semantic tokens for free. */
-  a-tag[tone="brand"]    { --tag-text: var(--text-2-brand);    --tag-bg: var(--bg-4-brand);    }
-  a-tag[tone="info"]     { --tag-text: var(--text-2-info);     --tag-bg: var(--bg-4-info);     }
-  a-tag[tone="success"]  { --tag-text: var(--text-2-success);  --tag-bg: var(--bg-4-success);  }
-  a-tag[tone="warning"]  { --tag-text: var(--text-2-warning);  --tag-bg: var(--bg-4-warning);  }
-  a-tag[tone="critical"] { --tag-text: var(--text-2-critical); --tag-bg: var(--bg-4-critical); }
-
-  /* Custom tone — any non-named `tone` value. Keep the source hue;
-     pin lightness/chroma so any input reads like a sibling of the named
-     tones. Knobs are the only numbers to tune; the dark block re-tunes
-     them and the formulas resolve against whichever value computes.
-     The JSX wrapper writes `--tag-tone-source` inline; the typed
-     `attr()` fallback picks up raw `<a-tag tone="…">` on modern engines.
-     (oklch relative color: Chrome 119+, Safari 16.4+, Firefox 128+.) */
-  a-tag[tone]:not(
-      [tone="neutral"],
-      [tone="brand"],
-      [tone="info"],
-      [tone="success"],
-      [tone="warning"],
-      [tone="critical"]
-    ) {
-    --tag-tone-source: attr(tone type(<color>), currentColor);
-
-    --_tag-text-l: 0.46;   /* fg lightness */
-    --_tag-text-c: 0.17;   /* fg chroma */
-    --_tag-bg-l: 0.96;     /* tinted-bg lightness — a hair above the named --bg-4 so the tint reads light */
-    --_tag-bg-c: 0.04;     /* tinted-bg chroma — light pastel, like --bg-4-{tone} */
-
-    --tag-text: oklch(from var(--tag-tone-source) var(--_tag-text-l) var(--_tag-text-c) h);
-    --tag-bg:   oklch(from var(--tag-tone-source) var(--_tag-bg-l) var(--_tag-bg-c) h);
-  }
-
-  /* Custom tone, dark mode — lighter fg; the tint sits a touch above the
-     dark --bg-4-{tone} lightness so it doesn't read pitch-black. */
-  .dark a-tag[tone]:not(
-      [tone="neutral"],
-      [tone="brand"],
-      [tone="info"],
-      [tone="success"],
-      [tone="warning"],
-      [tone="critical"]
-    ) {
-    --_tag-text-l: 0.80;
-    --_tag-text-c: 0.11;
-    --_tag-bg-l: 0.21;
-    --_tag-bg-c: 0.05;
-  }
-
-  a-tag[size="small"] {
-    --tag-padding-block: 0.5px;
-    --tag-padding-inline: 4.5px;
-    --tag-icon-size: 11px;
-
-    font-size: 10px;
-    line-height: 14px;
-  }
-
-  /* Large — 24px tall (line-height 18 + 2×2.5 padding + 2×0.5 border),
-     on par with Button's large. */
-  a-tag[size="large"] {
-    --tag-padding-block: 2.5px;
-    --tag-padding-inline: 8.5px;
-    --tag-icon-size: 15px;
-
-    font-size: 12px;
-    line-height: 18px;
-  }
-
-  /* Normal-case opt-out: drop the uppercase transform for proportional,
-     mixed-case text. Keep a small body-text tracking (Anta's 0.02ch)
-     rather than zero — uppercase just needs more (0.08ch). Tabular
-     figures + `ss05` stay on (only the case / stylistic-set extras
-     change). */
-  a-tag[nocaps] {
-    font-size: 12px;
-    text-transform: none;
-    letter-spacing: 0.02ch;
-    font-feature-settings: 'tnum' 1, 'ss05' 1, 'lnum', 'ss01', 'ss04', 'case', 'calt';
-  }
-  /* Large + nocaps reads larger too — bump to 13px (one over the 12px
-     uppercase large), keeping the same +1px over-uppercase relationship
-     medium has. Height is unchanged (driven by line-height + padding). */
-  a-tag[size="large"][nocaps] {
-    font-size: 13px;
-  }
-}
+@layer anta{a-tag{--tag-text: var(--text-3);--tag-bg: var(--bg-4);--tag-border: color-mix(in oklch, var(--tag-text) 9%, transparent);--tag-separator: color-mix(in oklch, var(--tag-text) 30%, transparent);--tag-padding-block: 1.5px;--tag-padding-inline: 6.5px;--tag-icon-size: 13px;--tag-label-weight: 600;--tag-gap: .6ch;display:inline-flex;align-items:center;gap:var(--tag-gap);box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;white-space:nowrap;-webkit-user-drag:none;color:var(--tag-text);background:var(--tag-bg);border:.5px solid var(--tag-border);border-radius:22px;padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);font-family:var(--sans-serif);font-weight:450;font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.08ch;font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt"}a-tag a-icon{--icon-size: var(--tag-icon-size);flex:none}a-tag a-tag-label,a-tag a-tag-value{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a-tag a-tag-value{font-weight:450}a-tag a-tag-label{font-weight:var(--tag-label-weight)}a-tag:has(>a-icon:first-child){padding-inline-start:max(0px,var(--tag-padding-inline) - 2px)}a-tag:has(>a-icon:last-child){padding-inline-end:max(0px,var(--tag-padding-inline) - 2px)}a-tag>:not(a-icon,a-tag-label,a-tag-value)~:not(a-icon,a-tag-label,a-tag-value){padding-left:var(--tag-gap);border-left:.5px solid var(--tag-separator)}a-tag[tone=brand]{--tag-text: var(--text-2-brand);--tag-bg: var(--bg-4-brand)}a-tag[tone=info]{--tag-text: var(--text-2-info);--tag-bg: var(--bg-4-info)}a-tag[tone=success]{--tag-text: var(--text-2-success);--tag-bg: var(--bg-4-success)}a-tag[tone=warning]{--tag-text: var(--text-2-warning);--tag-bg: var(--bg-4-warning)}a-tag[tone=critical]{--tag-text: var(--text-2-critical);--tag-bg: var(--bg-4-critical)}a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-tone-source: attr(tone type(<color>), currentColor);--_tag-text-l: .46;--_tag-text-c: .17;--_tag-bg-l: .96;--_tag-bg-c: .04;--tag-text: oklch(from var(--tag-tone-source) var(--_tag-text-l) var(--_tag-text-c) h);--tag-bg: oklch(from var(--tag-tone-source) var(--_tag-bg-l) var(--_tag-bg-c) h)}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-text-l: .8;--_tag-text-c: .11;--_tag-bg-l: .21;--_tag-bg-c: .05}a-tag[size=small]{--tag-padding-block: .5px;--tag-padding-inline: 4.5px;--tag-icon-size: 11px;font-size:10px;line-height:14px}a-tag[size=large]{--tag-padding-block: 2.5px;--tag-padding-inline: 8.5px;--tag-icon-size: 15px;font-size:12px;line-height:18px}a-tag[nocaps]{font-size:12px;text-transform:none;letter-spacing:.02ch;font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt"}a-tag[size=large][nocaps]{font-size:13px}}

package/dist/elements/a-text.css

@@ -1,90 +1 @@
-@layer anta {
-  a-text {
-    /* Default (no `priority`) is the SECONDARY level — body text reads at
-       --text-2; `priority="primary"` opts into the strongest --text-1. */
-    --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;
-  }
-
-  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;
-  }
-  
-  /* Truncation, the expandable mask, the chevron button, and the
-     expanded-state toggle live in shadow DOM — see
-     src/elements/a-text.ts. The one external concern is `min-width: 0`:
-     the host needs it to shrink inside flex/grid parents so the inner
-     clamp can actually clip content. */
-  a-text[truncate] {
-    min-width: 0;
-  }
-  
-  /* Neutral priority overrides. The default (no `priority`) is the
-     secondary level (--text-2, on the base rule above); `primary` opts
-     into the strongest --text-1. Levels 1 & 2 keep the brand link color;
-     levels 3-5 mute the link to currentColor and step the hover up by one
-     level (3→2, 4→3, 5→4). */
-  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); }
-  
-  /* Tinted — text color uses --text-{N}-{tone} tokens; links are always
-     muted (currentColor) and hover steps up one level of the same tint.
-     Level 1 has no level above; hover keeps the color, only the underline
-     alpha changes. */
-  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); }
-  
-  /* Link colors layered on top of anta's global `a` defaults — only
-     overriding what the priority/tone cascade dictates (color and the
-     one-step-up hover color). Underline / thickness / offset / alpha
-     are inherited from the global rule in reset.css.
-     On hover the underline color is repeated so it tracks the priority
-     color rather than the global --link-color-hover. */
-  a-text a, a-text a:link, a-text a:visited { color: var(--text-link-color); }
-  /* Hover only on real-pointer devices — avoids sticky hover after a tap. */
-  @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}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)}}}

package/dist/elements/a-title.css

@@ -1,64 +1 @@
-@layer anta {
-  /* `<a-title>` is intentionally CSS-only — no JS, no shadow DOM, no
-     `customElements.define`. The browser treats it as a generic unknown
-     element; the rules below give it block layout, the demi-bold
-     variable-font weight, and a per-level type scale + vertical rhythm.
-     The matching `h1`-`h6` rules in `src/reset.css` are kept in lockstep
-     so raw markup looks the same as `<Title level={n}>`. */
-
-  a-title {
-    display: block;
-    color: var(--text-1);
-    font-weight: 584.62;
-    letter-spacing: 0;
-    text-wrap: balance;
-  }
-
-  a-title a-icon {
-    transform: translateY(-0.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;  }
-
-  /* Neutral priority overrides. */
-  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); }
-
-  /* Tinted — same shape as a-text's tone × priority matrix. */
-  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}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)}}

package/dist/elements/a-tooltip.css

@@ -1,62 +1 @@
-@layer anta {
-  /* Before the custom element upgrades on the client, <a-tooltip> is an
-     unknown inline element and its content would flash *inside the anchor*.
-     Hide it until defined; once defined this stops matching and the shadow
-     `:host { display: contents }` governs (content renders only in the
-     popover via the slot). */
-  a-tooltip:not(:defined) {
-    display: none;
-  }
-
-  /* On touch devices, an anchor that owns a tooltip suppresses the long-press
-     text-selection and the iOS callout, so press-and-hold cleanly reveals the
-     bubble (see the long-press handling in a-tooltip.ts) instead of selecting
-     text or popping the system menu. Scoped to coarse/no-hover pointers, so
-     fine-pointer devices keep normal text selection. The anchor is always
-     <a-tooltip>'s direct parent (set in connectedCallback), so `:has(> …)`
-     targets exactly it; `:where()` keeps specificity at 0 for easy override. */
-  @media (hover: none) and (pointer: coarse) {
-    :where(:has(> a-tooltip)) {
-      -webkit-touch-callout: none;
-      user-select: none;
-    }
-  }
-
-  /* Tooltip exposes only the box "chrome" that lives inside the shadow
-     popover and is therefore impossible to reach with plain consumer CSS.
-     The bubble's content is slotted light DOM, so its font / colour / size
-     are already styleable from the page — those are intentionally NOT
-     tokens. These custom properties inherit across the shadow boundary
-     into the popover container (see a-tooltip.ts). The host itself draws
-     nothing and stays out of layout (`:host { display: contents }` in the
-     shadow style). */
-  a-tooltip {
-    /* Frosted translucent surface (matches the legacy look): a mostly-
-       opaque white that, paired with the container's `backdrop-filter:
-       blur(8px)`, reads as a frosted bubble over the page. --bg-1 is
-       #ffffff in light / #000000 in dark, so this flips to a dark frost
-       automatically (alpha is dialed down in the .dark override). */
-    --tooltip-bg: color-mix(in oklch, var(--bg-1) 80%, transparent);
-    --tooltip-shadow:
-      0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent),
-      0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);
-    --tooltip-radius: 3px;
-    --tooltip-max-width: min(calc(100vw - 20px), 80ch);
-    /* No real border by default — the hairline edge comes from --tooltip-shadow.
-       Set e.g. `1px solid var(--border-5)` for an actual border. */
-    --tooltip-border: none;
-    /* The frost. Set to `none` (with --tooltip-bg: transparent) for a fully
-       see-through bubble. */
-    --tooltip-backdrop-filter: blur(8px);
-  }
-
-  /* Dark: a slightly more transparent black frost. A solid black cast shadow
-     for lift, plus an inset 1px white ring so the bubble's edge stays crisp
-     against dark page content. */
-  .dark a-tooltip {
-    --tooltip-bg: color-mix(in oklch, var(--bg-1) 70%, transparent);
-    --tooltip-shadow:
-      0 2px 16px color-mix(in oklch, black 70%, transparent),
-      inset 0 0 0 1px color-mix(in oklch, white 15%, transparent);
-  }
-}
+@layer anta{a-tooltip:not(:defined){display:none}@media(hover:none)and (pointer:coarse){:where(:has(>a-tooltip)){-webkit-touch-callout:none;user-select:none}}a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 80%, transparent);--tooltip-shadow: 0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent), 0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);--tooltip-radius: 3px;--tooltip-max-width: min( calc(100vw - 20px) , 80ch);--tooltip-border: none;--tooltip-backdrop-filter: blur(8px)}.dark a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 70%, transparent);--tooltip-shadow: 0 2px 16px color-mix(in oklch, black 70%, transparent), inset 0 0 0 1px color-mix(in oklch, white 15%, transparent)}}

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export { Tooltip } from './components/Tooltip';
 export type { TooltipProps } from './components/Tooltip';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
+export type { AntaIntrinsicElements } from './jsx-runtime';
 /**
  * Seed interface for the icon shape registry. The generated
  * `a-icon.shapes.d.ts` augments this interface with one key per

package/dist/jsx-runtime.d.ts

@@ -24,20 +24,22 @@ export declare function jsxs(type: ComponentType, props: Record<string, unknown>
 export { _Fragment as Fragment };
 import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AIconAttributes, AButtonAttributes, ATooltipAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
-    interface IntrinsicElements extends React.JSX.IntrinsicElements {
-        'a-progress': AProgressAttributes;
-        'a-progress-label': BaseAttributes;
-        'a-progress-number': BaseAttributes;
-        'a-progress-text': BaseAttributes;
-        'a-progress-hint': BaseAttributes;
-        'a-text': ATextAttributes;
-        'a-title': ATitleAttributes;
-        'a-tag': ATagAttributes;
-        'a-tag-label': BaseAttributes;
-        'a-tag-value': BaseAttributes;
-        'a-icon': AIconAttributes;
-        'a-button': AButtonAttributes;
-        'a-button-label': BaseAttributes;
-        'a-tooltip': ATooltipAttributes;
+    interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
 }
+export interface AntaIntrinsicElements {
+    'a-progress': AProgressAttributes;
+    'a-progress-label': BaseAttributes;
+    'a-progress-number': BaseAttributes;
+    'a-progress-text': BaseAttributes;
+    'a-progress-hint': BaseAttributes;
+    'a-text': ATextAttributes;
+    'a-title': ATitleAttributes;
+    'a-tag': ATagAttributes;
+    'a-tag-label': BaseAttributes;
+    'a-tag-value': BaseAttributes;
+    'a-icon': AIconAttributes;
+    'a-button': AButtonAttributes;
+    'a-button-label': BaseAttributes;
+    'a-tooltip': ATooltipAttributes;
+}