@antadesign/anta 0.1.1-dev.8 → 0.2.1

package/dist/elements/a-icon.shapes.d.ts

@@ -1,5 +1,5 @@
 import type { IconShapes } from '@antadesign/anta';
-export declare const ICON_SHAPES: readonly ["arrow-left-to-line", "arrow-left", "arrow-narrow-down", "arrow-narrow-up-down", "arrow-narrow-up", "arrow-right", "arrow-top-right", "asterisk", "book-open", "braces", "bug", "calendar", "case-sensitive", "chat", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-right", "circle-check", "circle-large", "circle", "click", "clock", "cloud-upload", "copy", "corner-down-right", "cube", "dots-vertical", "download", "edit", "education-disk", "external-link", "file-down", "file", "filter", "folder-close", "folder-open", "folder-tree", "github-logo", "gitlab-logo", "hat-glasses", "heart-handshake", "help-disk", "history-tree", "history", "home", "hourglass", "info", "jira-logo", "linear-logo", "link", "list-detail-view", "maximize", "megaphone", "menu", "minimize", "minus", "moon", "more", "move-horizontal", "not-equal", "play", "plus", "pointer", "presentation", "refresh-ccw-dot", "refresh", "regex", "repeat", "rotate-ccw", "rss", "runs-history", "scroll-text", "search-check", "search", "send", "sparkles", "sun", "swatch-book", "table-2", "text-highlight", "text-initial", "timer", "trash", "trello-logo", "view", "warning-triangle", "webhook", "workflow", "x"];
+export declare const ICON_SHAPES: readonly ["arrow-left-to-line", "arrow-left", "arrow-narrow-down", "arrow-narrow-up-down", "arrow-narrow-up", "arrow-right", "arrow-top-right", "asterisk", "book-open", "braces", "bug", "calendar", "case-sensitive", "chat", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-right", "circle-check", "circle-large", "circle", "click", "clock", "cloud-upload", "copy", "corner-down-right", "cube", "dots-vertical", "download", "edit", "education-disk", "external-link", "file-down", "file", "filter", "folder-close", "folder-open", "folder-tree", "github-logo", "gitlab-logo", "hat-glasses", "heart-handshake", "help-disk", "history-tree", "history", "home", "hourglass", "info", "jira-logo", "linear-logo", "link", "list-detail-view", "maximize", "megaphone", "menu", "minimize", "minus", "moon", "more", "move-horizontal", "not-equal", "play", "plus", "pointer", "presentation", "refresh-ccw-dot", "refresh", "regex", "repeat", "rotate-ccw", "rss", "runs-history", "scroll-text", "search-check", "search", "send", "sparkles", "sun", "swatch-book", "table-2", "tag", "text-highlight", "text-initial", "timer", "trash", "trello-logo", "view", "warning-triangle", "webhook", "workflow", "x"];
 export declare const ICON_SYNONYMS: Readonly<Record<string, readonly string[]>>;
 declare module '@antadesign/anta' {
     interface IconShapes {
@@ -85,6 +85,7 @@ declare module '@antadesign/anta' {
         'sun': true;
         'swatch-book': true;
         'table-2': true;
+        'tag': true;
         'text-highlight': true;
         'text-initial': true;
         'timer': true;

package/dist/elements/a-icon.shapes.js

@@ -81,6 +81,7 @@ const ICON_SHAPES = [
   "sun",
   "swatch-book",
   "table-2",
+  "tag",
   "text-highlight",
   "text-initial",
   "timer",
@@ -178,7 +179,8 @@ const ICON_SYNONYMS = {
   "download": ["save", "import"],
   "cloud-upload": ["save", "sync", "upload", "send", "export"],
   "link": ["url", "href", "anchor"],
-  "more": ["options", "extra"]
+  "more": ["options", "extra"],
+  "tag": ["label", "badge", "chip"]
 };
 export {
   ICON_SHAPES,

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

@@ -0,0 +1 @@
+@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,86 +1 @@
-@layer anta {
-  a-text {
-    --text-color: var(--text-1);
-    --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. 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="secondary"]  { --text-color: var(--text-2); }
-  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-1-brand); --text-link-color: currentColor; --text-link-hover: var(--text-1-brand); }
-  a-text[tone="brand"][priority="secondary"]        { --text-color: var(--text-2-brand); --text-link-hover: 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-1-success); --text-link-color: currentColor; --text-link-hover: var(--text-1-success); }
-  a-text[tone="success"][priority="secondary"]      { --text-color: var(--text-2-success); --text-link-hover: 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-1-critical); --text-link-color: currentColor; --text-link-hover: var(--text-1-critical); }
-  a-text[tone="critical"][priority="secondary"]     { --text-color: var(--text-2-critical); --text-link-hover: 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-1-warning); --text-link-color: currentColor; --text-link-hover: var(--text-1-warning); }
-  a-text[tone="warning"][priority="secondary"]      { --text-color: var(--text-2-warning); --text-link-hover: 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-1-info); --text-link-color: currentColor; --text-link-hover: var(--text-1-info); }
-  a-text[tone="info"][priority="secondary"]         { --text-color: var(--text-2-info); --text-link-hover: 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,42 +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;
-  }
-
-  /* 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);
-  }
-
-  /* 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 25%, 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/elements/a-tooltip.d.ts

@@ -7,6 +7,10 @@ export declare class ATooltipElement extends HTMLElementBase {
     private anchor;
     listening: boolean;
     private shown;
+    /** True while the current open was triggered by a touch long-press. Such a
+     *  bubble is pinned (never cursor-follows) and biases above the anchor so the
+     *  fingertip doesn't cover it. */
+    private touchOpen;
     private lastMouse?;
     private debouncedShow?;
     private teardown?;
@@ -35,6 +39,9 @@ export declare class ATooltipElement extends HTMLElementBase {
     /** Pinned under the anchor (no cursor-following). Interactive implies this —
      *  you can't move into a bubble that's chasing the cursor. */
     private get isStatic();
+    /** Pinned to the anchor for any reason: the `static`/`interactive` attrs, or
+     *  a touch long-press (a finger can't track a following bubble). */
+    private get isPinned();
     private get prefersTop();
     private get delay();
     private positionToTarget;

package/dist/elements/a-tooltip.js

@@ -8,6 +8,9 @@ const DEFAULT_DELAY = 250;
 const FADE_MS = 150;
 const GRACE_MS = 300;
 const CLOSE_DELAY = 120;
+const ENTER_TOUCH_DELAY = 500;
+const LEAVE_TOUCH_DELAY = 1500;
+const TOUCH_SLOP = 10;
 let currentOpen = null;
 let graceTimer;
 function graceActive() {
@@ -58,6 +61,10 @@ class ATooltipElement extends HTMLElementBase {
   anchor = null;
   listening = false;
   shown = false;
+  /** True while the current open was triggered by a touch long-press. Such a
+   *  bubble is pinned (never cursor-follows) and biases above the anchor so the
+   *  fingertip doesn't cover it. */
+  touchOpen = false;
   lastMouse;
   debouncedShow;
   teardown;
@@ -88,17 +95,34 @@ class ATooltipElement extends HTMLElementBase {
         text-align: left;
 
         background: var(--tooltip-bg, Canvas);
-        color: var(--text-1, CanvasText);
+        color: var(--text-3, CanvasText);
         box-shadow: var(--tooltip-shadow, 0 1px 8px rgba(0, 0, 0, 0.2));
-        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: var(--tooltip-backdrop-filter, blur(8px));
+        backdrop-filter: var(--tooltip-backdrop-filter, blur(8px));
         padding: 5px 8px;
-        border: none;
+        border: var(--tooltip-border, none);
         border-radius: var(--tooltip-radius, 3px);
         outline: none;
 
+        /* The bubble establishes its own text baseline so inheritable text
+           properties from the anchor (e.g. a Button's condensed "wdth" 88
+           axis, its 0.05ch letter-spacing, an uppercase transform, a custom
+           font) don't bleed into the slotted content. The content is slotted
+           light DOM, so it inherits these *from this container* \u2014 making this
+           the single choke point. Values mirror Anta's body text. Consumers
+           still customise a single tooltip by styling their own content
+           element directly (a class on the content overrides what it inherits
+           \u2014 see the Tooltip docs). */
+        font-family: var(--sans-serif, system-ui, sans-serif);
         font-size: 14px;
-        line-height: 130%;
         font-weight: 400;
+        font-style: normal;
+        font-stretch: normal;
+        font-variation-settings: "wdth" 100, "slnt" 0, "ital" 0;
+        line-height: 1.5;
+        letter-spacing: 0.02ch;
+        word-spacing: normal;
+        text-transform: none;
         white-space: break-spaces;
         word-break: break-word;
         overflow-wrap: break-word;
@@ -196,6 +220,11 @@ class ATooltipElement extends HTMLElementBase {
   get isStatic() {
     return this.hasAttribute("static") || this.isInteractive;
   }
+  /** Pinned to the anchor for any reason: the `static`/`interactive` attrs, or
+   *  a touch long-press (a finger can't track a following bubble). */
+  get isPinned() {
+    return this.isStatic || this.touchOpen;
+  }
   get prefersTop() {
     return this.getAttribute("placement") === "top";
   }
@@ -218,7 +247,7 @@ class ATooltipElement extends HTMLElementBase {
       if (left + box.width > vw) left = vw - box.width - MARGIN;
       left = Math.max(MARGIN, left);
       let top;
-      if (this.prefersTop) {
+      if (this.prefersTop || this.touchOpen) {
         top = a.top - box.height - MARGIN;
         if (top < MARGIN) top = a.bottom + MARGIN;
       } else {
@@ -252,7 +281,7 @@ class ATooltipElement extends HTMLElementBase {
     });
   };
   position(e) {
-    if (!this.isStatic && e) this.positionToMouse(e);
+    if (!this.isPinned && e) this.positionToMouse(e);
     else this.positionToTarget();
   }
   // --- show / hide ---
@@ -284,6 +313,7 @@ class ATooltipElement extends HTMLElementBase {
     this.cancelHide();
     if (!this.shown) return;
     this.shown = false;
+    this.touchOpen = false;
     this.container.hidePopover();
     this.view.removeEventListener("scroll", this.hide, { capture: true });
     this.doc.removeEventListener("keydown", this.onKeyDown, true);
@@ -303,7 +333,7 @@ class ATooltipElement extends HTMLElementBase {
    *  the close delay). Cursor-following only — static/interactive bubbles
    *  stay pinned. */
   onDocMove = (e) => {
-    if ((this.shown || this.fading) && !this.isStatic) {
+    if ((this.shown || this.fading) && !this.isPinned) {
       this.lastMouse = e;
       this.positionToMouse(e);
     }
@@ -311,12 +341,12 @@ class ATooltipElement extends HTMLElementBase {
   /** Hide after CLOSE_DELAY unless something cancels it first (re-enter, or
    *  another tooltip claiming the slot). Lets the bubble bridge the gap to a
    *  neighbouring anchor — and survive the trip into an interactive bubble. */
-  scheduleHide = () => {
+  scheduleHide = (delay = CLOSE_DELAY) => {
     this.cancelHide();
     this.closeTimer = setTimeout(() => {
       this.closeTimer = void 0;
       this.hide();
-    }, CLOSE_DELAY);
+    }, delay);
   };
   cancelHide() {
     if (this.closeTimer !== void 0) {
@@ -347,46 +377,93 @@ class ATooltipElement extends HTMLElementBase {
     const view = this.view;
     const doc = this.doc;
     this.makeDebouncedShow();
-    const onMouseMove = (e) => {
+    const onPointerMove = (e) => {
+      if (e.pointerType !== "mouse") return;
       this.lastMouse = e;
       if (this.shown) {
-        if (!this.isStatic) this.positionToMouse(e);
+        if (!this.isPinned) this.positionToMouse(e);
       } else {
         this.trigger(e);
       }
     };
     const onLeave = () => {
       this.debouncedShow?.cancel();
-      anchor.removeEventListener("mousemove", onMouseMove);
-      anchor.removeEventListener("mouseleave", onLeave);
+      anchor.removeEventListener("pointermove", onPointerMove);
+      anchor.removeEventListener("pointerleave", onLeave);
       anchor.removeEventListener("blur", onLeave);
       view.removeEventListener("pagehide", onLeave);
       doc.removeEventListener("visibilitychange", onLeave);
       this.scheduleHide();
     };
     const onEnter = (e) => {
+      if (e.pointerType !== "mouse") return;
       this.lastMouse = e;
-      anchor.addEventListener("mousemove", onMouseMove);
-      anchor.addEventListener("mouseleave", onLeave);
+      anchor.addEventListener("pointermove", onPointerMove);
+      anchor.addEventListener("pointerleave", onLeave);
       view.addEventListener("pagehide", onLeave);
       doc.addEventListener("visibilitychange", onLeave);
       this.trigger(e);
     };
     const onFocus = () => {
+      if (!anchor.matches(":focus-visible")) return;
       anchor.addEventListener("blur", onLeave);
       view.addEventListener("pagehide", onLeave);
       doc.addEventListener("visibilitychange", onLeave);
       this.trigger();
     };
-    anchor.addEventListener("mouseenter", onEnter);
+    let pressTimer;
+    let pressStart;
+    const preventContext = (e) => e.preventDefault();
+    const clearPressTimer = () => {
+      if (pressTimer !== void 0) {
+        clearTimeout(pressTimer);
+        pressTimer = void 0;
+      }
+      pressStart = void 0;
+    };
+    const onPressMove = (e) => {
+      if (pressStart && Math.hypot(e.clientX - pressStart.x, e.clientY - pressStart.y) > TOUCH_SLOP) {
+        clearPressTimer();
+      }
+    };
+    const onPressEnd = () => {
+      clearPressTimer();
+      detachPress();
+      if (this.shown && this.touchOpen) this.scheduleHide(LEAVE_TOUCH_DELAY);
+    };
+    const detachPress = () => {
+      anchor.removeEventListener("pointermove", onPressMove);
+      anchor.removeEventListener("pointerup", onPressEnd);
+      anchor.removeEventListener("pointercancel", onPressEnd);
+      anchor.removeEventListener("contextmenu", preventContext);
+    };
+    const onPointerDown = (e) => {
+      if (e.pointerType === "mouse") return;
+      clearPressTimer();
+      pressStart = { x: e.clientX, y: e.clientY };
+      anchor.addEventListener("pointermove", onPressMove);
+      anchor.addEventListener("pointerup", onPressEnd);
+      anchor.addEventListener("pointercancel", onPressEnd);
+      anchor.addEventListener("contextmenu", preventContext);
+      pressTimer = setTimeout(() => {
+        pressTimer = void 0;
+        this.touchOpen = true;
+        this.show();
+      }, ENTER_TOUCH_DELAY);
+    };
+    anchor.addEventListener("pointerenter", onEnter);
     anchor.addEventListener("focus", onFocus);
+    anchor.addEventListener("pointerdown", onPointerDown);
     this.teardown = () => {
       this.debouncedShow?.cancel();
-      anchor.removeEventListener("mousemove", onMouseMove);
-      anchor.removeEventListener("mouseenter", onEnter);
-      anchor.removeEventListener("mouseleave", onLeave);
+      clearPressTimer();
+      detachPress();
+      anchor.removeEventListener("pointermove", onPointerMove);
+      anchor.removeEventListener("pointerenter", onEnter);
+      anchor.removeEventListener("pointerleave", onLeave);
       anchor.removeEventListener("focus", onFocus);
       anchor.removeEventListener("blur", onLeave);
+      anchor.removeEventListener("pointerdown", onPointerDown);
       view.removeEventListener("pagehide", onLeave);
       doc.removeEventListener("visibilitychange", onLeave);
       this.listening = false;

package/dist/elements/index.d.ts

@@ -8,8 +8,7 @@
  *
  * For a SMALLER footprint, import just the element(s) you use instead:
  *   import '@antadesign/anta/elements/a-tooltip'   // registers a-tooltip + its CSS, nothing else
- * That granular path pulls in only that element's code (e.g. it won't drag in
- * `lottie-web`, which only `a-sticker-animated` needs).
+ * That granular path pulls in only that element's code and CSS, nothing else.
  *
  * Must only be imported client-side — registration is guarded against missing
  * `customElements` (SSR), but there's no reason to load it server-side.
@@ -18,7 +17,6 @@ export { AProgressElement, register_a_progress } from './a-progress';
 export { ATextElement, register_a_text } from './a-text';
 export { AIconElement, register_a_icon } from './a-icon';
 export { AButtonElement, register_a_button } from './a-button';
-export { AStickerElement, register_a_sticker } from './a-sticker';
-export { AStickerAnimatedElement, register_a_sticker_animated } from './a-sticker-animated';
 export { ATooltipElement, register_a_tooltip } from './a-tooltip';
 import './a-title.css';
+import './a-tag.css';

package/dist/elements/index.js

@@ -2,23 +2,18 @@ import { AProgressElement, register_a_progress } from "./a-progress";
 import { ATextElement, register_a_text } from "./a-text";
 import { AIconElement, register_a_icon } from "./a-icon";
 import { AButtonElement, register_a_button } from "./a-button";
-import { AStickerElement, register_a_sticker } from "./a-sticker";
-import { AStickerAnimatedElement, register_a_sticker_animated } from "./a-sticker-animated";
 import { ATooltipElement, register_a_tooltip } from "./a-tooltip";
 import "./a-title.css";
+import "./a-tag.css";
 export {
   AButtonElement,
   AIconElement,
   AProgressElement,
-  AStickerAnimatedElement,
-  AStickerElement,
   ATextElement,
   ATooltipElement,
   register_a_button,
   register_a_icon,
   register_a_progress,
-  register_a_sticker,
-  register_a_sticker_animated,
   register_a_text,
   register_a_tooltip
 };