@antadesign/anta 0.1.1-dev.8 → 0.2.0

package/dist/elements/a-tag.css

@@ -0,0 +1,196 @@
+@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;
+  }
+}

package/dist/elements/a-text.css

@@ -1,6 +1,8 @@
 @layer anta {
   a-text {
-    --text-color: var(--text-1);
+    /* 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);
 
@@ -27,10 +29,12 @@
     min-width: 0;
   }
   
-  /* Neutral priority overrides. Levels 1 & 2 keep the brand link color;
+  /* 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="secondary"]  { --text-color: var(--text-2); }
+  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); }
@@ -39,32 +43,32 @@
      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"]                              { --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-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"]                            { --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-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"]                           { --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-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"]                            { --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-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"]                               { --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); }

package/dist/elements/a-tooltip.css

@@ -8,6 +8,20 @@
     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
@@ -28,6 +42,12 @@
       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
@@ -37,6 +57,6 @@
     --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);
+      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
 };

package/dist/general_types.d.ts

@@ -108,43 +108,23 @@ export interface ATitleAttributes extends BaseAttributes {
     'aria-level'?: number | string;
 }
 /**
- * Attributes for the `<a-sticker>` static sticker carrier.
+ * Attributes for the `<a-tag>` styled tag.
  *
- * The SVG payload is passed as the `svg` attribute — a markup string.
- * On change, the element writes it into its shadow DOM (no light-DOM
- * `<slot>`, so children aren't rendered). The JSX wrapper
- * (`Sticker{Name}`) sets it from the per-sticker module's inlined SVG.
- * Sizing comes from `--sticker-size`.
+ * `<a-tag>` has no JS — it's a CSS-only styled element. Low-level
+ * attributes; for the JSX wrapper use `Tag` from `@antadesign/anta`.
  */
-export interface AStickerAttributes extends BaseAttributes {
-    /** SVG markup string. On change the element drops it into its shadow
-     *  DOM (`innerHTML`). */
-    svg?: string;
-    role?: string;
-    'aria-label'?: string;
-    'aria-hidden'?: 'true' | 'false' | boolean;
-}
-/**
- * Attributes for the `<a-sticker-animated>` Lottie sticker carrier.
- *
- * The Lottie payload is passed as the `animation` attribute — a JSON
- * string. On change the element `JSON.parse`s it once and drives a
- * `lottie-web` player (SVG renderer) inside its shadow DOM. The JSX
- * wrapper (`Sticker{Name}Animated`) sets it from the per-sticker
- * module's inlined JSON. Sizing comes from the `--sticker-size` CSS
- * variable; `paused` controls playback.
- */
-export interface AStickerAnimatedAttributes extends BaseAttributes {
-    /** Lottie payload as a JSON string. The element parses it once on
-     *  change. */
-    animation?: string;
-    /** Present (any string value, including `""`) freezes the animation.
-     *  A numeric string is parsed as seconds and the player seeks to
-     *  that time before pausing. Omit to play. */
-    paused?: string | boolean | number;
-    role?: string;
-    'aria-label'?: string;
-    'aria-hidden'?: 'true' | 'false' | boolean;
+export interface ATagAttributes extends BaseAttributes {
+    /** Semantic tone, or any literal CSS color for a one-off custom tone.
+     *  Named tones map to the `--text-2-{tone}` / `--bg-4-{tone}` palette;
+     *  a custom color keeps its hue with lightness/chroma pinned.
+     *  `'neutral'` is the default gray (same as omitting it). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Size variant. `small` = 16px tall, `medium` (default) = 20px,
+     *  `large` = 24px. */
+    size?: 'small' | 'medium' | 'large';
+    /** Render in normal case instead of the default uppercase.
+     *  Presence-based (`''` on, omit off). */
+    nocaps?: boolean | '';
 }
 /**
  * Attributes for the `<a-icon>` custom element. `shape` is typed as