@antadesign/anta 0.1.1-dev.7 → 0.2.0

package/dist/elements/a-sticker.js

@@ -1,4 +1,5 @@
 import { HTMLElementBase } from "../anta_helpers";
+import "./a-sticker.css";
 class AStickerElement extends HTMLElementBase {
   static observedAttributes = ["svg"];
   container;
@@ -24,6 +25,7 @@ function register_a_sticker() {
     customElements.define("a-sticker", AStickerElement);
   }
 }
+register_a_sticker();
 export {
   AStickerElement,
   register_a_sticker

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-text.d.ts

@@ -1,4 +1,5 @@
 import { HTMLElementBase } from '../anta_helpers';
+import './a-text.css';
 export declare class ATextElement extends HTMLElementBase {
     static observedAttributes: string[];
     private slotEl;

package/dist/elements/a-text.js

@@ -1,4 +1,5 @@
 import { HTMLElementBase } from "../anta_helpers";
+import "./a-text.css";
 const SHADOW_STYLE = `
   :host {
     display: block;
@@ -137,6 +138,7 @@ function register_a_text() {
     customElements.define("a-text", ATextElement);
   }
 }
+register_a_text();
 export {
   ATextElement,
   register_a_text

package/dist/elements/a-tooltip.css

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

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

@@ -0,0 +1,68 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-tooltip.css';
+export declare class ATooltipElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    /** Shadow-internal popover surface — the only thing we ever mutate. */
+    private container;
+    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?;
+    private closeTimer?;
+    private fading;
+    private fadeTimer?;
+    private docMoveBound;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** (Re)build the show debounce with the CURRENT `delay` (rebuilt when the
+     *  `delay` attribute changes). Re-armed on each hover move (trailing), and
+     *  fed the latest cursor event, so it shows at the cursor and so moving back
+     *  onto an anchor after the tooltip was dismissed re-arms it. */
+    private makeDebouncedShow;
+    /** The element's OWN window / document. The class may be defined in a
+     *  different realm than the element lives in (e.g. the docs playground
+     *  renders into an iframe but reuses the parent page's element class), so
+     *  the module-global `window`/`document` can point at the wrong frame.
+     *  Everything viewport- or document-scoped (clamping, scroll/key/move
+     *  listeners) must go through these so it's correct in any frame. */
+    private get view();
+    private get doc();
+    private get isInteractive();
+    /** 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;
+    private positionToMouse;
+    private position;
+    show: (e?: MouseEvent) => void;
+    hide: () => void;
+    /** While shown, track the cursor even after it has left the anchor (during
+     *  the close delay). Cursor-following only — static/interactive bubbles
+     *  stay pinned. */
+    private onDocMove;
+    /** 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. */
+    private scheduleHide;
+    private cancelHide;
+    private onKeyDown;
+    /** Open now if another tooltip is hot (skip delay), else (re)arm the delayed
+     *  show with the latest cursor event. */
+    private trigger;
+    setupListeners(): void;
+    teardownListeners(): void;
+}
+export declare function register_a_tooltip(): void;