@antadesign/anta 0.3.0 → 0.3.2

package/dist/elements/a-tab.css

@@ -0,0 +1 @@
+@layer anta{a-tab{user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:.5ch;flex-shrink:1;min-width:0;cursor:pointer;color:var(--tab-fg, var(--text-3));background-color:var(--tab-bg, transparent);border:none;border-radius:var(--tab-radius);box-shadow:0 0 0 0 transparent;font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;white-space:nowrap;text-wrap:nowrap;padding-block:var(--tab-padding-y);padding-inline:var(--tab-padding-x);transition:background-color var(--tab-timing),box-shadow var(--tab-timing);>a-tab-label{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;line-height:calc(var(--_lh) - 2px);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}&:has(>a-icon:first-child):has(>a-tab-label){padding-inline-start:max(0px,var(--tab-padding-x) - 2px)}&:has(>a-icon:last-child):has(>a-tab-label){padding-inline-end:max(0px,var(--tab-padding-x) - 2px)}}a-tab:focus-visible{outline:1px solid var(--focus-ring);outline-offset:-1px}a-tab[disabled]{pointer-events:none;cursor:not-allowed;opacity:.45}}

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

@@ -0,0 +1,14 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-tab.css";
+export declare class ATabElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    private internals?;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get selected(): boolean;
+    set selected(on: boolean);
+    get value(): string;
+    private applyState;
+}
+export declare function register_a_tab(): void;

package/dist/elements/a-tab.js

@@ -0,0 +1,46 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-tab.css";
+class ATabElement extends HTMLElementBase {
+  static observedAttributes = ["selected"];
+  internals;
+  constructor() {
+    super();
+    this.internals = this.attachInternals?.();
+  }
+  connectedCallback() {
+    if (this.hasAttribute("selected")) this.applyState(true);
+  }
+  attributeChangedCallback(name) {
+    if (name === "selected") this.applyState(this.hasAttribute("selected"));
+  }
+  get selected() {
+    return this.internals?.states.has("selected") ?? false;
+  }
+  set selected(on) {
+    this.applyState(!!on);
+  }
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  // `selected` is the single source: it drives the visual `:state(selected)` and
+  // publishes `aria-selected` through ElementInternals (the accessibility tree,
+  // not a DOM attribute). <a-tabs> only sets `t.selected`; the tab owns how it
+  // reflects that. role="tab" comes from the wrapper, which gives ariaSelected
+  // something to attach to.
+  applyState(on) {
+    if (!this.internals) return;
+    if (on) this.internals.states.add("selected");
+    else this.internals.states.delete("selected");
+    this.internals.ariaSelected = on ? "true" : "false";
+  }
+}
+function register_a_tab() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-tab"))
+    customElements.define("a-tab", ATabElement);
+}
+register_a_tab();
+export {
+  ATabElement,
+  register_a_tab
+};

package/dist/elements/a-tabpanel.css

@@ -0,0 +1 @@
+@layer anta{a-tabpanel{display:block}a-tabpanel[hidden]{display:none}a-tabpanel[data-hide=visibility]{visibility:hidden}}

package/dist/elements/a-tabs.css

@@ -0,0 +1 @@
+@layer anta{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-padding-y: calc((10px - var(--_pb)) / 2);--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: #635b65;--tab-fg-rest: var(--text-3);--tab-fg-hover: var(--text-1);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tabs-track-bg: color-mix(in oklch, #44374b 6%, transparent);--tabs-track-border: var(--border-4);--tab-pill-bg: var(--bg-1);--tab-pill-shadow: 0 0 3px 0 var(--border-3);--tab-secondary-bg: color-mix(in oklch, #44374b 3%, transparent);--tab-secondary-border: var(--border-3);--tab-secondary-shadow: 0 0 0px 1px var(--tab-secondary-border);display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);width:fit-content;align-self:flex-start;min-width:0;max-width:100%;overflow:hidden;scroll-behavior:smooth}a-tabs[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;--tab-padding-x: 7px}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px}a-tabs a-tab a-icon{--icon-size: 16px}a-tabs[size=small] a-tab a-icon{--icon-size: 14px}a-tabs[size=large] a-tab a-icon{--icon-size: 18px}a-tabs[tone=brand],a-tab[tone=brand]{--tabs-tone-source: #5f4bc3;--tab-selected-text: var(--text-1-brand);--tab-text-2: var(--text-2-brand);--tab-rest-tone: var(--text-3-brand);--tabs-track-border: var(--border-4-brand);--tab-secondary-border: var(--border-3-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: #1f6eb2;--tab-selected-text: var(--text-1-info);--tab-text-2: var(--text-2-info);--tab-rest-tone: var(--text-3-info);--tabs-track-border: var(--border-4-info);--tab-secondary-border: var(--border-3-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: #2a7e43;--tab-selected-text: var(--text-1-success);--tab-text-2: var(--text-2-success);--tab-rest-tone: var(--text-3-success);--tabs-track-border: var(--border-4-success);--tab-secondary-border: var(--border-3-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: #c37416;--tab-selected-text: var(--text-1-warning);--tab-text-2: var(--text-2-warning);--tab-rest-tone: var(--text-3-warning);--tabs-track-border: var(--border-4-warning);--tab-secondary-border: var(--border-3-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: #c9302c;--tab-selected-text: var(--text-1-critical);--tab-text-2: var(--text-2-critical);--tab-rest-tone: var(--text-3-critical);--tabs-track-border: var(--border-4-critical);--tab-secondary-border: var(--border-3-critical)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .08);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .03);--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .62 .12 h / .5)}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-tone-source: #5f4bc3;--tab-selected-text: var(--text-1-brand);--tab-secondary-border: var(--border-3-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-tone-source: #1f6eb2;--tab-selected-text: var(--text-1-info);--tab-secondary-border: var(--border-3-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-tone-source: #2a7e43;--tab-selected-text: var(--text-1-success);--tab-secondary-border: var(--border-3-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-tone-source: #c37416;--tab-selected-text: var(--text-1-warning);--tab-secondary-border: var(--border-3-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-tone-source: #c9302c;--tab-selected-text: var(--text-1-critical);--tab-secondary-border: var(--border-3-critical)}a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .62 .12 h / .5);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .03)}a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tabs-tone-source: attr(tone type(<color>), #635b65);--tab-selected-text: oklch(from var(--tabs-tone-source) .38 .13 h);--tab-text-2: oklch(from var(--tabs-tone-source) .45 .13 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .45 .13 h);--tabs-track-border: oklch(from var(--tabs-tone-source) .9 .047 h);--tab-secondary-border: oklch(from var(--tabs-tone-source) .87 .065 h)}a-tabs a-tab{--tab-fg: var(--tab-fg-rest);--tab-bg: transparent}a-tabs:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:max-content}@media(hover:hover)and (pointer:fine){a-tabs a-tab:hover{--tab-fg: var(--tab-fg-hover)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);border:.5px solid var(--tabs-track-border);border-radius:6px;padding:1.5px}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-pill-bg);box-shadow:var(--tab-pill-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone);--tab-fg-hover: var(--tab-selected-text)}a-tabs[priority=secondary]{border:.5px solid transparent;padding:1.5px}@media(hover:hover)and (pointer:fine){a-tabs[priority=secondary] a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs[priority=secondary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-secondary-bg);box-shadow:var(--tab-secondary-shadow)}a-tabs[priority=tertiary]{padding-inline:2px}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary]:not([orientation=vertical]) a-tab{padding-block:calc(var(--tab-padding-y) + 2px)}a-tabs[priority=tertiary] a-tab:after{content:"";position:absolute;inset:0;box-sizing:border-box;pointer-events:none;border-bottom:var(--tab-underline-size) solid var(--tab-underline-color);transition:border-width var(--tab-timing),border-color var(--tab-timing)}a-tabs[orientation=vertical][priority=tertiary] a-tab:after{border-bottom:0;border-inline-end:var(--tab-underline-size) solid var(--tab-underline-color)}@media(hover:hover)and (pointer:fine){a-tabs[priority=tertiary] a-tab:hover{--tab-fg: var(--tab-text-2)}}a-tabs[priority=tertiary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-underline-size: 1px;--tab-underline-color: var(--tab-selected-text)}a-tabs[orientation=vertical]{flex-direction:column;align-items:stretch;max-width:none;overflow-x:hidden;overflow-y:auto;flex-shrink:0}a-tabs[orientation=vertical] a-tab{justify-content:flex-start;flex-shrink:0}@supports (anchor-scope: all){a-tabs:not([noslide]){position:relative;anchor-scope:all}a-tabs:not([noslide]) a-tab{position:relative;z-index:1}a-tabs:not([noslide]) a-tab:state(selected){anchor-name:--tabs-active}a-tabs:not([noslide]):before{content:"";position:absolute;z-index:0;box-sizing:border-box;position-anchor:--tabs-active;top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);transition:top var(--tab-timing),right var(--tab-timing),bottom var(--tab-timing),left var(--tab-timing)}a-tabs:not([noslide]):not(:has(a-tab:state(selected))):before{display:none}@media(prefers-reduced-motion:reduce){a-tabs:not([noslide]):before{transition:none}}a-tabs:not([noslide]) a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{background:var(--tab-pill-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-pill-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-secondary-shadow)}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 1px;--tab-underline-color: transparent}a-tabs:not([noslide])[priority=tertiary]:before{z-index:2;border-bottom:1px solid var(--tab-selected-text)}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-bottom:0;border-inline-end:1px solid var(--tab-selected-text)}}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 10%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 6%, transparent)}.dark a-tabs[tone]:not([tone=""],[tone=neutral]),.dark a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .12);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .06);--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .8 .1 h / .45)}.dark a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--tab-secondary-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .06);--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .8 .1 h / .45)}.dark a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),.dark a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tab-selected-text: oklch(from var(--tabs-tone-source) .83 .1 h);--tab-text-2: oklch(from var(--tabs-tone-source) .76 .11 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .76 .11 h);--tabs-track-border: oklch(from var(--tabs-tone-source) .25 .057 h);--tab-secondary-border: oklch(from var(--tabs-tone-source) .33 .087 h)}}

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

@@ -0,0 +1,31 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-tabs.css";
+export declare class ATabsElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    private internals?;
+    private uncontrolledValue;
+    private seeded;
+    private observer?;
+    private lastSelected;
+    private alive;
+    /** The selected tab's value, or `null` when nothing is selected. */
+    get value(): string | null;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    formDisabledCallback(disabled: boolean): void;
+    private get currentValue();
+    private get isDisabled();
+    private get isVertical();
+    private get tabs();
+    private sync;
+    private requestSelect;
+    private emitChange;
+    /** Dispatch the shared cancelable `statechange`. `next`/`prev` are values
+     *  (`null` when nothing is selected). Returns false if a listener vetoed. */
+    private emitStateChange;
+    private onClick;
+    private onKeyDown;
+}
+export declare function register_a_tabs(): void;

package/dist/elements/a-tabs.js

@@ -0,0 +1,157 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-tabs.css";
+class ATabsElement extends HTMLElementBase {
+  static observedAttributes = ["state", "disabled", "orientation"];
+  internals;
+  uncontrolledValue = null;
+  seeded = false;
+  observer;
+  // The tab last scrolled into view — so scroll-into-view fires only when the SELECTION
+  // changes, not on every sync() (orientation / disabled changes call sync() too).
+  lastSelected = null;
+  // True after the first connect — gates the native `change` event so it never fires
+  // for the initial seed, and gates scroll-into-view so mounting doesn't jump the page.
+  alive = false;
+  /** The selected tab's value, or `null` when nothing is selected. */
+  get value() {
+    return this.currentValue;
+  }
+  constructor() {
+    super();
+    this.internals = this.attachInternals?.();
+  }
+  connectedCallback() {
+    if (!this.seeded) {
+      this.uncontrolledValue = this.getAttribute("default-state");
+      this.seeded = true;
+    }
+    this.addEventListener("click", this.onClick);
+    this.addEventListener("keydown", this.onKeyDown);
+    this.observer ??= new this.view.MutationObserver((records) => {
+      const touchedTabs = records.some(
+        (rec) => [...rec.addedNodes, ...rec.removedNodes].some(
+          (n) => n.nodeName === "A-TAB" || n.querySelector?.("a-tab") != null
+        )
+      );
+      if (touchedTabs) this.sync();
+    });
+    this.observer.observe(this, { childList: true, subtree: true });
+    this.sync();
+    this.alive = true;
+  }
+  disconnectedCallback() {
+    this.observer?.disconnect();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.sync();
+    if (name === "state" && this.alive && newValue !== oldValue) this.emitChange();
+  }
+  formDisabledCallback(disabled) {
+    if (disabled) this.internals?.states.add("disabled");
+    else this.internals?.states.delete("disabled");
+    this.sync();
+  }
+  // Controlled when `state` is present; otherwise the in-memory uncontrolled value.
+  get currentValue() {
+    return this.hasAttribute("state") ? this.getAttribute("state") : this.uncontrolledValue;
+  }
+  get isDisabled() {
+    return this.hasAttribute("disabled") || (this.internals?.states.has("disabled") ?? false);
+  }
+  get isVertical() {
+    return this.getAttribute("orientation") === "vertical";
+  }
+  get tabs() {
+    return Array.from(this.querySelectorAll("a-tab"));
+  }
+  sync = () => {
+    const value = this.currentValue;
+    const tabs = this.tabs;
+    const selectedEl = tabs.find((t) => t.value === value && value != null) ?? null;
+    for (const t of tabs) t.selected = t === selectedEl;
+    if (this.internals && "ariaActiveDescendantElement" in this.internals) {
+      this.internals.ariaActiveDescendantElement = selectedEl;
+    }
+    if (this.alive && selectedEl && selectedEl !== this.lastSelected) {
+      selectedEl.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+    this.lastSelected = selectedEl;
+  };
+  // The shared state algorithm: fire the cancelable `statechange` *before* applying.
+  // Controlled never self-applies; uncontrolled applies unless vetoed.
+  requestSelect(next) {
+    const prev = this.currentValue;
+    if (next === prev) return;
+    const ok = this.emitStateChange(next, prev);
+    if (this.hasAttribute("state")) return;
+    if (ok) {
+      this.uncontrolledValue = next;
+      this.sync();
+      this.emitChange();
+    }
+  }
+  // Native `change`, fired *after* a selection applies (user pick or a controlled
+  // `state` update) — the post-apply counterpart to the cancelable `statechange`.
+  emitChange() {
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  /** Dispatch the shared cancelable `statechange`. `next`/`prev` are values
+   *  (`null` when nothing is selected). Returns false if a listener vetoed. */
+  emitStateChange(next, prev) {
+    return this.dispatchEvent(
+      new CustomEvent("statechange", {
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+        detail: { next, prev }
+      })
+    );
+  }
+  onClick = (e) => {
+    if (this.isDisabled) return;
+    const tab = e.target?.closest("a-tab");
+    if (!tab || tab.hasAttribute("disabled")) return;
+    tab.focus();
+    this.requestSelect(tab.value);
+  };
+  onKeyDown = (e) => {
+    if (this.isDisabled) return;
+    const enabled = this.tabs.filter((t) => !t.hasAttribute("disabled"));
+    if (enabled.length === 0) return;
+    const focused = e.target?.closest("a-tab");
+    if (e.key === " " || e.key === "Enter") {
+      if (focused && enabled.includes(focused)) {
+        e.preventDefault();
+        this.requestSelect(focused.value);
+      }
+      return;
+    }
+    if (e.key === "Home" || e.key === "End") {
+      e.preventDefault();
+      const target = e.key === "Home" ? enabled[0] : enabled[enabled.length - 1];
+      target.focus();
+      this.requestSelect(target.value);
+      return;
+    }
+    const forward = e.key === (this.isVertical ? "ArrowDown" : "ArrowRight");
+    const back = e.key === (this.isVertical ? "ArrowUp" : "ArrowLeft");
+    if (!forward && !back) return;
+    e.preventDefault();
+    let i = focused ? enabled.indexOf(focused) : -1;
+    if (i === -1) i = enabled.findIndex((t) => t.value === this.currentValue);
+    if (i === -1) i = 0;
+    const next = enabled[(i + (forward ? 1 : -1) + enabled.length) % enabled.length];
+    next.focus();
+    this.requestSelect(next.value);
+  };
+}
+function register_a_tabs() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-tabs"))
+    customElements.define("a-tabs", ATabsElement);
+}
+register_a_tabs();
+export {
+  ATabsElement,
+  register_a_tabs
+};

package/dist/elements/a-text.css

@@ -1 +1 @@
-@layer anta{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty;font-feature-settings:"ss02","ss05"}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[priority=quinary]{--text-color: var(--text-5);--text-link-color: currentColor;--text-link-hover: var(--text-4)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=brand][priority=quinary]{--text-color: var(--text-5-brand);--text-link-hover: var(--text-4-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=success][priority=quinary]{--text-color: var(--text-5-success);--text-link-hover: var(--text-4-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=critical][priority=quinary]{--text-color: var(--text-5-critical);--text-link-hover: var(--text-4-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=warning][priority=quinary]{--text-color: var(--text-5-warning);--text-link-hover: var(--text-4-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone=info][priority=quinary]{--text-color: var(--text-5-info);--text-link-hover: var(--text-4-info)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}
+@layer anta{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty;font-feature-settings:"ss02","ss05","tnum"}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[priority=quinary]{--text-color: var(--text-5);--text-link-color: currentColor;--text-link-hover: var(--text-4)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=brand][priority=quinary]{--text-color: var(--text-5-brand);--text-link-hover: var(--text-4-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=success][priority=quinary]{--text-color: var(--text-5-success);--text-link-hover: var(--text-4-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=critical][priority=quinary]{--text-color: var(--text-5-critical);--text-link-hover: var(--text-4-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=warning][priority=quinary]{--text-color: var(--text-5-warning);--text-link-hover: var(--text-4-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone=info][priority=quinary]{--text-color: var(--text-5-info);--text-link-hover: var(--text-4-info)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}

package/dist/elements/a-title.css

@@ -1 +1 @@
-@layer anta{a-title{display:block;color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance;font-feature-settings:"ss02","ss05"}a-title a-icon{transform:translateY(-.05em)}a-title[level="1"]{font-size:28px;line-height:32px;margin-block-start:0;margin-block-end:16px}a-title[level="2"]{font-size:24px;line-height:28px;margin-block-start:32px;margin-block-end:12px}a-title[level="3"]{font-size:20px;line-height:24px;margin-block-start:24px;margin-block-end:12px}a-title[level="4"]{font-size:17px;line-height:20px;margin-block-start:20px;margin-block-end:8px}a-title[level="5"]{font-size:15px;line-height:20px;margin-block-start:16px;margin-block-end:8px}a-title[level="6"]{font-size:13px;line-height:16px;margin-block-start:16px;margin-block-end:4px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[priority=quinary]{color:var(--text-5)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=brand][priority=quinary]{color:var(--text-5-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=success][priority=quinary]{color:var(--text-5-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=critical][priority=quinary]{color:var(--text-5-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=warning][priority=quinary]{color:var(--text-5-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone=info][priority=quinary]{color:var(--text-5-info)}}
+@layer anta{a-title{display:block;color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance;font-feature-settings:"ss02","ss05","tnum"}a-title a-icon{transform:translateY(-.05em)}a-title[level="1"]{font-size:28px;line-height:32px;margin-block-start:0;margin-block-end:16px}a-title[level="2"]{font-size:24px;line-height:28px;margin-block-start:32px;margin-block-end:12px}a-title[level="3"]{font-size:20px;line-height:24px;margin-block-start:24px;margin-block-end:12px}a-title[level="4"]{font-size:17px;line-height:20px;margin-block-start:20px;margin-block-end:8px}a-title[level="5"]{font-size:15px;line-height:20px;margin-block-start:16px;margin-block-end:8px}a-title[level="6"]{font-size:13px;line-height:16px;margin-block-start:16px;margin-block-end:4px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[priority=quinary]{color:var(--text-5)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=brand][priority=quinary]{color:var(--text-5-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=success][priority=quinary]{color:var(--text-5-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=critical][priority=quinary]{color:var(--text-5-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=warning][priority=quinary]{color:var(--text-5-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone=info][priority=quinary]{color:var(--text-5-info)}}

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

@@ -68,6 +68,24 @@ export declare class ATooltipElement extends HTMLElementBase {
     private get isPinned();
     private get prefersTop();
     private get delay();
+    /** When set, the tooltip only shows if its resolved target is actually
+     *  truncated/clipped; a fitting label gets no tooltip. */
+    private get truncatedOnly();
+    /** The element whose overflow decides whether the tooltip shows: a
+     *  `truncated-selector` resolved within the anchor wins; else the first of
+     *  Anta's ellipsizing label parts inside the anchor; else the anchor itself
+     *  (which may be the clipping box for a hand-authored target). */
+    private resolveTruncationTarget;
+    /** True when the resolved target overflows its box (horizontal ellipsis or
+     *  vertical clamp). A 1px threshold absorbs sub-pixel rounding; a zero-size
+     *  (hidden / detached) target counts as not truncated. Measured fresh on each
+     *  show attempt, so late fonts / resizes self-correct with no observer. */
+    private isTargetTruncated;
+    /** True when there's nothing worth showing: no element children (so an
+     *  icon/image-only bubble still counts as content) and no non-whitespace text
+     *  (so formatting whitespace / an empty conditional doesn't open a blank bubble).
+     *  Re-checked on every show(), so a tooltip populated later self-corrects. */
+    private isEmpty;
     private positionFrame?;
     private pendingPosition?;
     private schedulePosition;

package/dist/elements/a-tooltip.js

@@ -12,6 +12,7 @@ const PROX_NEAR = 10;
 const PROX_FAR = 100;
 const PROX_FADE_MS = 60;
 const ENTER_TOUCH_DELAY = 500;
+const TRUNCATING_PARTS = "a-tab-label, a-button-label";
 const LEAVE_TOUCH_DELAY = 1500;
 const TOUCH_SLOP = 10;
 let currentOpen = null;
@@ -218,6 +219,46 @@ class ATooltipElement extends HTMLElementBase {
     const n = parseInt(attr, 10);
     return Number.isFinite(n) ? n : DEFAULT_DELAY;
   }
+  // --- truncated-only gating (UI-thread layout READS — no mutation) ---
+  /** When set, the tooltip only shows if its resolved target is actually
+   *  truncated/clipped; a fitting label gets no tooltip. */
+  get truncatedOnly() {
+    return this.hasAttribute("truncated-only");
+  }
+  /** The element whose overflow decides whether the tooltip shows: a
+   *  `truncated-selector` resolved within the anchor wins; else the first of
+   *  Anta's ellipsizing label parts inside the anchor; else the anchor itself
+   *  (which may be the clipping box for a hand-authored target). */
+  resolveTruncationTarget() {
+    const anchor = this.anchor;
+    if (!anchor) return null;
+    const sel = this.getAttribute("truncated-selector");
+    if (sel) {
+      try {
+        const found = anchor.querySelector(sel);
+        if (found) return found;
+      } catch {
+      }
+    }
+    return anchor.querySelector(TRUNCATING_PARTS) ?? anchor;
+  }
+  /** True when the resolved target overflows its box (horizontal ellipsis or
+   *  vertical clamp). A 1px threshold absorbs sub-pixel rounding; a zero-size
+   *  (hidden / detached) target counts as not truncated. Measured fresh on each
+   *  show attempt, so late fonts / resizes self-correct with no observer. */
+  isTargetTruncated() {
+    const t = this.resolveTruncationTarget();
+    if (!t) return false;
+    if (t.clientWidth === 0 && t.clientHeight === 0) return false;
+    return t.scrollWidth - t.clientWidth > 1 || t.scrollHeight - t.clientHeight > 1;
+  }
+  /** True when there's nothing worth showing: no element children (so an
+   *  icon/image-only bubble still counts as content) and no non-whitespace text
+   *  (so formatting whitespace / an empty conditional doesn't open a blank bubble).
+   *  Re-checked on every show(), so a tooltip populated later self-corrects. */
+  isEmpty() {
+    return this.children.length === 0 && (this.textContent ?? "").trim() === "";
+  }
   // --- positioning (sets only the shadow container's own transform) ---
   // Single pending position frame: a burst of mousemoves within one frame
   // coalesces to ONE layout read + transform write, using the LATEST geometry
@@ -289,6 +330,8 @@ class ATooltipElement extends HTMLElementBase {
   // --- show / hide ---
   show = (e) => {
     if (!this.anchor) return;
+    if (this.isEmpty()) return;
+    if (this.truncatedOnly && !this.isTargetTruncated()) return;
     this.cancelHide();
     if (currentOpen && currentOpen !== this && this.anchor.contains(currentOpen.anchor)) {
       return;
@@ -400,6 +443,8 @@ class ATooltipElement extends HTMLElementBase {
   /** Open now if another tooltip is hot (skip delay), else (re)arm the delayed
    *  show with the latest cursor event. */
   trigger(e) {
+    if (this.isEmpty()) return;
+    if (this.truncatedOnly && !this.isTargetTruncated()) return;
     if (isHot()) {
       this.debouncedShow?.cancel();
       this.show(e);

package/dist/elements/index.d.ts

@@ -27,5 +27,8 @@ export { AMenuElement, register_a_menu } from './a-menu';
 export { AMenuItemElement, register_a_menu_item } from './a-menu-item';
 export { AMenuSeparatorElement, register_a_menu_separator } from './a-menu-separator';
 export { AMenuGroupElement, register_a_menu_group } from './a-menu-group';
+export { ATabElement, register_a_tab } from './a-tab';
+export { ATabsElement, register_a_tabs } from './a-tabs';
 import './a-title.css';
 import './a-tag.css';
+import './a-tabpanel.css';

package/dist/elements/index.js

@@ -12,8 +12,11 @@ import { AMenuElement, register_a_menu } from "./a-menu";
 import { AMenuItemElement, register_a_menu_item } from "./a-menu-item";
 import { AMenuSeparatorElement, register_a_menu_separator } from "./a-menu-separator";
 import { AMenuGroupElement, register_a_menu_group } from "./a-menu-group";
+import { ATabElement, register_a_tab } from "./a-tab";
+import { ATabsElement, register_a_tabs } from "./a-tabs";
 import "./a-title.css";
 import "./a-tag.css";
+import "./a-tabpanel.css";
 export {
   AButtonElement,
   ACheckboxElement,
@@ -27,6 +30,8 @@ export {
   AProgressElement,
   ARadioElement,
   ARadioGroupElement,
+  ATabElement,
+  ATabsElement,
   ATextElement,
   ATooltipElement,
   register_a_button,
@@ -41,6 +46,8 @@ export {
   register_a_progress,
   register_a_radio,
   register_a_radio_group,
+  register_a_tab,
+  register_a_tabs,
   register_a_text,
   register_a_tooltip
 };