@antadesign/anta 0.3.1 → 0.3.2

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
 };

package/dist/general_types.d.ts

@@ -321,6 +321,14 @@ export interface ATooltipAttributes extends BaseAttributes {
     /** Make the bubble hoverable/clickable (pointer events on, stays open while
      *  hovered). Always pinned. Presence-based (`''` on, omit off). */
     interactive?: boolean | '';
+    /** Only show when the measured target is actually truncated/clipped (its text
+     *  overflows). UI-thread layout read, re-measured per show. Defaults to the
+     *  nearest Anta ellipsizing label part (`a-tab-label` / `a-button-label`) in the
+     *  anchor, then the anchor itself. Presence-based (`''` on, omit off). */
+    'truncated-only'?: boolean | '';
+    /** CSS selector (resolved within the anchor) for the element whose overflow a
+     *  `truncated-only` tooltip measures. */
+    'truncated-selector'?: string;
     /** HTML `id`. */
     id?: string;
 }
@@ -335,16 +343,17 @@ export interface ATooltipAttributes extends BaseAttributes {
  * `@antadesign/anta`.
  */
 export interface ACheckboxAttributes extends BaseAttributes {
-    /** Colour variant, or any literal CSS color for a one-off custom tone.
-     *  Named tones track light/dark mode automatically via the theme-aware role
-     *  tokens. `'neutral'` is the default (same as omitting it). */
+    /** Mark colour (checked fill + unselected box border), or any literal CSS color
+     *  for a one-off custom tone. Named tones track light/dark mode automatically via
+     *  the theme-aware role tokens. `'neutral'` is the default (same as omitting it).
+     *  The label + hint stay neutral — use `tone-text` for those. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Text colour (label + hint), independent of `tone`. A named tone or any literal
+     *  CSS color; named tones track light/dark via the `--text-*` role tokens. Omit
+     *  (or `'neutral'`) to leave the text neutral. */
+    'tone-text'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. `small` = 14px, `medium` (default) = 16px, `large` = 18px box. */
     size?: 'small' | 'medium' | 'large';
-    /** Visual priority. `primary` (default) fills the checked box with the tone
-     *  colour and draws a white checkmark; `secondary` keeps the box unfilled and
-     *  draws the border + checkmark in the tone colour (an outlined look). */
-    priority?: 'primary' | 'secondary';
     /** Controlled state — the element reflects changes to this attribute. Use this
      *  (driven from your store) for a controlled checkbox; use `default-state` for
      *  an uncontrolled one. */
@@ -565,16 +574,17 @@ export interface AButtonAttributes extends BaseAttributes {
 export interface ARadioAttributes extends BaseAttributes {
     /** This option's identity / submitted value. */
     value?: string;
-    /** Colour variant, or any literal CSS color for a one-off custom tone.
-     *  Named tones track light/dark mode automatically via the theme-aware role
-     *  tokens. `'neutral'` is the default (same as omitting it). */
+    /** Mark colour (selected ring fill + dot, unselected ring border), or any literal
+     *  CSS color for a one-off custom tone. Named tones track light/dark mode via the
+     *  theme-aware role tokens. `'neutral'` is the default. The label + hint stay
+     *  neutral — use `tone-text` for those. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Text colour (label + hint), independent of `tone`. A named tone or any literal
+     *  CSS color; named tones track light/dark via the `--text-*` role tokens. Omit
+     *  (or `'neutral'`) to leave the text neutral. */
+    'tone-text'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. small=14px, medium=16px, large=18px control. */
     size?: 'small' | 'medium' | 'large';
-    /** Visual priority. `primary` (default) fills the selected ring with the tone
-     *  colour and draws a white dot; `secondary` keeps the ring unfilled and draws
-     *  the border + dot in the tone colour (an outlined look). */
-    priority?: 'primary' | 'secondary';
     /** Disabled state. Presence-based (`''` on, omit off). */
     disabled?: boolean | '';
     /** Selected state — connect-time seed for the standalone render path (no
@@ -614,16 +624,16 @@ export interface ARadioGroupAttributes extends BaseAttributes {
     'default-state'?: string;
     /** Form field name — the group submits `name=value`. */
     name?: string;
-    /** Tone cascaded to children that don't set their own, or any literal CSS
+    /** Mark tone cascaded to children that don't set their own, or any literal CSS
      *  color for a one-off custom tone. Inherits through CSS so every child
-     *  `<a-radio>` picks up the same fill curve. */
+     *  `<a-radio>` picks up the same fill curve. The option text stays neutral —
+     *  use `tone-text`. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Text tone cascaded to children's label + hint, independent of `tone`. A named
+     *  tone or any literal CSS color. Omit (or `'neutral'`) to leave the text neutral. */
+    'tone-text'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size cascaded to children that don't set their own. */
     size?: 'small' | 'medium' | 'large';
-    /** Visual priority cascaded to children that don't set their own. `primary`
-     *  (default) fills the selected ring with the tone colour; `secondary` keeps it
-     *  unfilled and draws the border + dot in the tone colour (an outlined look). */
-    priority?: 'primary' | 'secondary';
     /** Validation/feedback tone for the group hint — same set as `<a-input>`'s
      *  `status`. Recolours `<a-radio-group-hint>`; omit for the neutral default. */
     status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
@@ -656,3 +666,119 @@ export interface ARadioGroupAttributes extends BaseAttributes {
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }
+/**
+ * Attributes for the `<a-tab>` custom element — one tab in a tablist. Presentational,
+ * the sibling of `<a-radio>`: the parent `<a-tabs>` owns selection, keyboard, and
+ * scrolling. The selected look comes from the element's `:state(selected)` (set by the
+ * tablist via the `selected` property), not a host attribute. There is no `Tab` web
+ * component to render directly — `Tabs` renders these from its `<Tab>` children, and
+ * hand-authors write `<a-tab>` directly inside an `<a-tabs>`. Wrap the visible label in
+ * `<a-tab-label>` (as `Tabs` does) so it carries the optical baseline nudge, truncates
+ * with an ellipsis when constrained, and keeps a sibling `<a-icon>` centered — exactly
+ * like `<a-button-label>`.
+ */
+export interface ATabAttributes extends BaseAttributes {
+    /** This tab's identity / the value reported when it's selected. */
+    value?: string;
+    /** Per-tab tone override (same vocabulary as `<a-tabs tone>`): colours this tab's
+     *  label + icons and, when selected, its indicator. Named tones tone the sliding
+     *  indicator too; a custom literal colour tones the indicator only in `noslide`.
+     *  Custom tones also set `--tabs-tone-source` on the tab (via the wrapper's style). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Selected state — connect-time seed for the standalone render path (no tablist).
+     *  In an `<a-tabs>`, the tablist drives `:state(selected)` directly and this
+     *  attribute is ignored. Presence-based (`''` on, omit off). */
+    selected?: boolean | '';
+    /** Disabled state. Presence-based (`''` on, omit off). */
+    disabled?: boolean | '';
+    /** ARIA — `role="tab"` is set by the consumer (`Tabs` on each tab, or a hand-author),
+     *  and `aria-controls` points at the paired panel. `aria-selected` is published by
+     *  the element through `ElementInternals` (off the DOM), driven by the `selected`
+     *  property the tablist sets — not a DOM attribute. `tabindex` (inherited from
+     *  `BaseAttributes`) is set by `Tabs` — every enabled tab is its own tab stop
+     *  (`tabindex="0"`) — not by the element. */
+    role?: 'tab';
+    'aria-controls'?: string;
+    'aria-disabled'?: 'true' | 'false';
+}
+/**
+ * Attributes for the `<a-tabs>` custom element — the tablist + single-select
+ * coordinator. No shadow DOM: `<a-tab>` children are plain light-DOM, laid out by
+ * `a-tabs.css`, so the strip is restylable with ordinary CSS and usable hand-assembled.
+ * Unlike `<a-radio-group>` it is NOT form-associated (a tablist submits nothing), and
+ * the panels live outside it (siblings the `Tabs` wrapper shows/hides). The element
+ * coordinates **off-DOM only** — selection via each tab's `selected` property, focus via
+ * `internals.ariaActiveDescendantElement`, scroll via `scrollIntoView`. Roving
+ * `tabindex` (the JSX path) is rendered by the `Tabs` wrapper, not the element. For the
+ * typed JSX wrapper use `Tabs` from `@antadesign/anta`.
+ */
+export interface ATabsAttributes extends BaseAttributes {
+    /** Controlled selected value (the active tab's `value`). Present → controlled: the
+     *  element reflects changes to this attribute and a pick only dispatches
+     *  `statechange`. Absent → uncontrolled (seed with `default-state`). */
+    state?: string;
+    /** Uncontrolled initial selected value — read once on connect. */
+    'default-state'?: string;
+    /** Visual priority. `primary` (default) is the raised pill on a recessed track; `secondary`
+     *  keeps that sizing but drops the track (selected = subtle active background fill, no
+     *  border); `tertiary` is a bottom-underline under the selected tab only (no track, no rest
+     *  line). `tone` tints secondary + tertiary; primary stays neutral. */
+    priority?: 'primary' | 'secondary' | 'tertiary';
+    /** Tone applied to the selected indicator/label, or any literal CSS color for a
+     *  one-off custom tone (derived in oklch). `'neutral'` is the default. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Size variant. small=24px, medium (default)=28px, large=32px tall — matching Button's
+     *  scale (the label leading runs a touch tighter, offset by 1px more block padding per side). */
+    size?: 'small' | 'medium' | 'large';
+    /** Layout + arrow-key axis. `'horizontal'` (default) ellipsizes labels when tabs
+     *  overflow (scrolling is opt-in via CSS); `'vertical'` stacks them. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Disable the sliding indicator. By default the selected-tab indicator is a single
+     *  rectangle that animates between tabs via CSS anchor positioning; with `noslide` the
+     *  highlight is painted on each tab and snaps with no movement (also the automatic
+     *  fallback where anchor positioning isn't supported). Presence-based (`''` on, omit off). */
+    noslide?: boolean | '';
+    /** Disable the whole strip. Presence-based (`''` on, omit off). */
+    disabled?: boolean | '';
+    /** Fires whenever the active tab changes. `detail` carries `{ next, prev }` (values;
+     *  `null` = none). Cancelable: a synchronous `preventDefault()` vetoes the pick in
+     *  uncontrolled mode. All-lowercase to bind across both renderers (like
+     *  `<a-radio-group>`). */
+    onstatechange?: (e: CustomEvent<{
+        next: string | null;
+        prev: string | null;
+    }>) => void;
+    /** Native `change`, fired *after* a selection applies (post-apply counterpart to
+     *  `onstatechange`). Lowercase so both renderers bind the native event. */
+    onchange?: (e: Event) => void;
+    /** Strip focus enter / leave — wired from the bubbling `focusin` / `focusout` (focus
+     *  lands on a tab, not the tablist). The `Tabs` wrapper maps its `onFocus`/`onBlur`. */
+    onfocusin?: (e: FocusEvent) => void;
+    onfocusout?: (e: FocusEvent) => void;
+    /** ARIA — set by the `Tabs` wrapper (the element never touches these). */
+    role?: 'tablist';
+    'aria-orientation'?: 'horizontal' | 'vertical';
+    'aria-disabled'?: 'true' | 'false';
+    'aria-label'?: string;
+}
+/**
+ * Attributes for the `<a-tabpanel>` styled tag.
+ *
+ * `<a-tabpanel>` has no JS — it's a CSS-only styled element. The `Tabs` wrapper renders
+ * it, pairs it to its tab via id, and toggles visibility declaratively: `hidden`
+ * (display:none) or `data-hide="visibility"` (keeps the layout box), plus `inert` while
+ * hidden. Low-level attributes; for the typed JSX wrapper use `TabPanel` (inside `Tabs`)
+ * from `@antadesign/anta`.
+ */
+export interface ATabpanelAttributes extends BaseAttributes {
+    /** Hidden via `display:none`. Presence-based (`''` on, omit off). */
+    hidden?: boolean | '';
+    /** Hidden via `visibility:hidden` (keeps the layout box). The `Tabs` wrapper sets
+     *  this for `mounting="visibility"`. */
+    'data-hide'?: 'visibility';
+    /** Removes the hidden panel from focus + the a11y tree. Presence-based. */
+    inert?: boolean | '';
+    /** ARIA — set by the `Tabs` wrapper. */
+    role?: 'tabpanel';
+    'aria-labelledby'?: string;
+}

package/dist/index.d.ts

@@ -47,6 +47,12 @@ export { Input } from './components/Input';
 export type { InputProps, InputChangeAttrs } from './components/Input';
 export { RadioGroup } from './components/RadioGroup';
 export type { RadioGroupProps, RadioOption } from './components/RadioGroup';
+export { Tabs } from './components/Tabs';
+export type { TabsProps, TabsMounting, TabsChangeAttrs } from './components/Tabs';
+export { Tab } from './components/Tab';
+export type { TabProps } from './components/Tab';
+export { TabPanel } from './components/TabPanel';
+export type { TabPanelProps } from './components/TabPanel';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
 export type { AntaIntrinsicElements } from './jsx-runtime';

package/dist/index.js

@@ -14,6 +14,9 @@ import { MenuGroup } from "./components/MenuGroup";
 import { Expander } from "./components/Expander";
 import { Input } from "./components/Input";
 import { RadioGroup } from "./components/RadioGroup";
+import { Tabs } from "./components/Tabs";
+import { Tab } from "./components/Tab";
+import { TabPanel } from "./components/TabPanel";
 import { configure } from "./jsx-runtime";
 export {
   Button,
@@ -29,6 +32,9 @@ export {
   MenuSeparator,
   Progress,
   RadioGroup,
+  Tab,
+  TabPanel,
+  Tabs,
   Tag,
   Text,
   Title,

package/dist/jsx-runtime.d.ts

@@ -37,7 +37,7 @@ export declare function useId(): string;
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -77,4 +77,8 @@ export interface AntaIntrinsicElements {
     'a-menu-separator': BaseAttributes;
     'a-menu-group': AMenuGroupAttributes;
     'a-menu-group-label': BaseAttributes;
+    'a-tabs': ATabsAttributes;
+    'a-tab': ATabAttributes;
+    'a-tab-label': BaseAttributes;
+    'a-tabpanel': ATabpanelAttributes;
 }

package/dist/tokens.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;:root,.light{--sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;font-size:15px;font-weight:400;font-feature-settings:"ss02" on,"ss05" on;--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa;--link-color: #1466d4;--link-color-hover: #2674e6;--focus-ring: oklch(.55 .2 284.15)}.dark{font-weight:400;--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 13%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--link-color: #7baee9;--link-color-hover: #90bdee;--focus-ring: #a897fc}
+@layer base,anta,components,utilities;:root,.light{--sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;font-size:15px;font-weight:400;font-feature-settings:"ss02" on,"ss05" on,"tnum" on;--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa;--link-color: #1466d4;--link-color-hover: #2674e6;--focus-ring: oklch(.55 .2 284.15)}.dark{font-weight:400;--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 13%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--link-color: #7baee9;--link-color-hover: #90bdee;--focus-ring: #a897fc}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",