@antadesign/anta 0.1.1-dev.5 → 0.1.1-dev.7

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

@@ -0,0 +1,10 @@
+import { HTMLElementBase } from "../anta_helpers";
+declare global {
+    interface Document {
+        hasKeyListenerForAButton?: boolean;
+    }
+}
+export declare class AButtonElement extends HTMLElementBase {
+    connectedCallback(): void;
+}
+export declare function register_a_button(): void;

package/dist/elements/a-button.js

@@ -0,0 +1,76 @@
+import { HTMLElementBase } from "../anta_helpers";
+class AButtonElement extends HTMLElementBase {
+  connectedCallback() {
+    if (!document.hasKeyListenerForAButton) {
+      document.addEventListener("keydown", handleKeyDown, true);
+      document.addEventListener("click", handleClick, true);
+      document.hasKeyListenerForAButton = true;
+    }
+  }
+}
+function findForm(el) {
+  const formId = el.getAttribute("form");
+  if (formId) {
+    return document.getElementById(formId);
+  }
+  return el.closest("form");
+}
+function handleKeyDown(e) {
+  if (e.key !== "Enter" && e.key !== " ") return;
+  const el = e.target.closest(
+    "a-button"
+  );
+  if (!el) return;
+  e.preventDefault();
+  el.click();
+}
+function handleClick(e) {
+  const el = e.target.closest(
+    "a-button"
+  );
+  if (!el) return;
+  const customEvent = el.getAttribute("data-custom-event");
+  if (customEvent) {
+    el.dispatchEvent(
+      new CustomEvent(customEvent, { bubbles: true, cancelable: true })
+    );
+  }
+  const type = el.getAttribute("type") || "button";
+  const form = findForm(el);
+  if (!form) return;
+  if (type === "submit") {
+    if (form.requestSubmit) {
+      form.requestSubmit();
+    } else {
+      form.submit();
+    }
+    const formData = new FormData(form);
+    form.dispatchEvent(
+      new CustomEvent("submitdetailed", {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          formData: Object.fromEntries(formData.entries()),
+          submitter: {
+            tag: el.tagName.toLowerCase(),
+            attrs: Object.fromEntries(
+              Array.from(el.attributes).map((a) => [a.name, a.value])
+            )
+          }
+        }
+      })
+    );
+  } else if (type === "reset") {
+    form.reset();
+  }
+}
+function register_a_button() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-button")) {
+    customElements.define("a-button", AButtonElement);
+  }
+}
+export {
+  AButtonElement,
+  register_a_button
+};

package/dist/elements/a-icon.css

@@ -1,18 +1,43 @@
 @layer anta {
   a-icon {
+    /* Default lives in a plain declaration — never in `attr()`. Safari
+       doesn't support typed `attr()` for `<length>` (MDN: "No" across
+       all Safari versions), so an `attr(size px, …)` value can't
+       resolve there and the var-substituted `width` ends up invalid →
+       auto → 0 on an empty inline-block. Keeping the default off the
+       attr() path means every browser lands on 16px when no `size`
+       attribute is set. */
+    --icon-size: 16px;
+
     display: inline-block;
     vertical-align: middle;
-    width: var(--icon-size, 16px);
-    height: var(--icon-size, 16px);
+    width: var(--icon-size);
+    height: var(--icon-size);
     flex-shrink: 0;
     background-color: currentColor;
     -webkit-mask-image: var(--icon);
-            mask-image: var(--icon);
+    mask-image: var(--icon);
     -webkit-mask-position: center;
-            mask-position: center;
+    mask-position: center;
     -webkit-mask-repeat: no-repeat;
-            mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
     -webkit-mask-size: contain;
-            mask-size: contain;
+    mask-size: contain;
+  }
+
+  /* `<a-icon size="N">` only — typed `attr()` (CSS Values 5, Chrome
+     133+). Safari/Firefox don't support the typed form, but a custom
+     property parses permissively, so without the `@supports` guard the
+     invalid `attr()` would still land on `--icon-size` and only fail
+     later when `width: var(--icon-size)` substitutes it — collapsing the
+     icon to `auto` → 0×0. The guard keeps the override off unsupported
+     engines so the plain `--icon-size: 16px` base wins (visible 16px
+     icon, not 0). Consumers that need an exact custom size everywhere
+     should route through the `<Icon size={N}>` JSX wrapper, which sets
+     `--icon-size` inline as a plain length. */
+  @supports (width: attr(size px, 16px)) {
+    a-icon[size] {
+      --icon-size: attr(size px, 16px);
+    }
   }
 }

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

@@ -1,4 +1,4 @@
-/* Auto-generated by scripts/generate-icons.mjs. Do not edit by hand. */
+/* Auto-generated by @antadesign/anta. Do not edit by hand. */
 
 @layer anta {
 
@@ -262,6 +262,10 @@
     --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E%0A");
   }
 
+  a-icon[shape="pointer"] {
+    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-pointer-icon lucide-pointer'%3E%3Cpath d='M22 14a8 8 0 0 1-8 8'/%3E%3Cpath d='M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/%3E%3Cpath d='M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1'/%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/svg%3E");
+  }
+
   a-icon[shape="presentation"] {
     --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h20'/%3E%3Cpath d='M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3'/%3E%3Cpath d='m7 21 5-5 5 5'/%3E%3C/svg%3E%0A");
   }
@@ -282,6 +286,10 @@
     --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='scale(-1 1) translate(-24 0)'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/g%3E%3C/svg%3E%0A");
   }
 
+  a-icon[shape="rotate-ccw"] {
+    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E%0A");
+  }
+
   a-icon[shape="rss"] {
     --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%0A  %3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.33' d='M2.67 7.33a6 6 0 0 1 6 6m-6-10.66a10.67 10.67 0 0 1 10.66 10.66M4 12.67a.67.67 0 1 1-1.33 0 .67.67 0 0 1 1.33 0Z'/%3E%0A%3C/svg%3E%0A");
   }

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

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

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

@@ -64,11 +64,13 @@ const ICON_SHAPES = [
   "not-equal",
   "play",
   "plus",
+  "pointer",
   "presentation",
   "refresh-ccw-dot",
   "refresh",
   "regex",
   "repeat",
+  "rotate-ccw",
   "rss",
   "runs-history",
   "scroll-text",

package/dist/elements/a-progress.css

@@ -1,16 +1,14 @@
 @layer anta {
   a-progress {
-    --progress-bg: var(--bg-block);
+    --progress-bg: var(--bg-4);
     --progress-border-color: var(--border-4);
-    --progress-indicator-bg: var(--bg-spot);
+    --progress-indicator-bg: var(--bg-5);
     /* Right-edge fade: from the indicator's own bg to the border
-       colour, both opaque. Two opaque endpoints + `in oklch`
-       interpolation give a perceptually-uniform fade with no alpha
-       pre-multiplication artefacts. Tone variants automatically
-       re-tint because both endpoint tokens (`--progress-indicator-bg`,
+       colour, both opaque. Tone variants automatically re-tint because
+       both endpoint tokens (`--progress-indicator-bg`,
        `--progress-border-color`) get re-aliased per tone. */
     --progress-indicator-edge: linear-gradient(
-      90deg in oklch,
+      90deg,
       var(--progress-indicator-bg) 0%,
       var(--progress-border-color) 100%
     );
@@ -33,9 +31,9 @@
   }
   
   a-progress[tone="info"] {
-    --progress-bg: var(--bg-block-info);
+    --progress-bg: var(--bg-4-info);
     --progress-border-color: var(--border-4-info);
-    --progress-indicator-bg: var(--bg-spot-info);
+    --progress-indicator-bg: var(--bg-5-info);
     --progress-text-color: var(--text-2-info);
     --progress-hint-color: var(--text-3-info);
   }

package/dist/elements/a-sticker-animated.css

@@ -0,0 +1,9 @@
+@layer anta {
+  a-sticker-animated {
+    --sticker-size: 256px;
+
+    display: inline-block;
+    width: var(--sticker-size);
+    height: var(--sticker-size);
+  }
+}

package/dist/elements/a-sticker-animated.d.ts

@@ -0,0 +1,38 @@
+import { type AnimationItem } from 'lottie-web';
+import { HTMLElementBase } from '../anta_helpers';
+/**
+ * `<a-sticker-animated>` — Lottie-driven sticker carrier.
+ *
+ * Receives the Lottie payload as the `animation` attribute (a JSON
+ * string). On change, parses the JSON once and instantiates a
+ * `lottie-web` player against a shadow-DOM container. The renderer is
+ * SVG — `lottie-web` creates real `<svg>` elements in the shadow root
+ * and updates path / transform attributes each frame. Rasterisation
+ * goes through the browser's native SVG renderer (Skia / Core
+ * Graphics), giving the same crispness as static `<svg>` content.
+ *
+ * Observed attributes:
+ *  - `animation` — JSON string for `lottie-web`. Reset to null/missing
+ *    tears the player down.
+ *  - `paused` — present: freeze at current frame. Numeric value
+ *    (seconds): seek to that time, then freeze. Absent: play.
+ *
+ * Sizing comes from external CSS reading `--sticker-size` (set by the
+ * JSX wrapper or the consumer).
+ *
+ * The static counterpart is `<a-sticker>`.
+ */
+export declare class AStickerAnimatedElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    container: HTMLDivElement;
+    player: AnimationItem | null;
+    _animation: Record<string, unknown> | null;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    rebuild(): void;
+    applyPaused(): void;
+    teardown(): void;
+}
+export declare function register_a_sticker_animated(): void;

package/dist/elements/a-sticker-animated.js

@@ -0,0 +1,79 @@
+import lottie from "lottie-web";
+import { HTMLElementBase } from "../anta_helpers";
+class AStickerAnimatedElement extends HTMLElementBase {
+  static observedAttributes = ["animation", "paused"];
+  container;
+  player = null;
+  _animation = null;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = `
+      :host { display: inline-block; }
+      div { width: 100%; height: 100%; }
+      div > svg { display: block; width: 100%; height: 100%; }
+    `;
+    this.container = document.createElement("div");
+    shadow.append(style, this.container);
+  }
+  connectedCallback() {
+    if (this._animation != null && this.player == null) this.rebuild();
+  }
+  disconnectedCallback() {
+    this.teardown();
+  }
+  attributeChangedCallback(name) {
+    if (name === "animation") {
+      const value = this.getAttribute("animation");
+      this._animation = value ? JSON.parse(value) : null;
+      if (this.isConnected) this.rebuild();
+    } else if (name === "paused") {
+      this.applyPaused();
+    }
+  }
+  rebuild() {
+    this.teardown();
+    if (this._animation == null) return;
+    this.player = lottie.loadAnimation({
+      container: this.container,
+      renderer: "svg",
+      loop: true,
+      autoplay: !this.hasAttribute("paused"),
+      animationData: this._animation
+    });
+    this.applyPaused();
+  }
+  applyPaused() {
+    if (!this.player) return;
+    const attr = this.getAttribute("paused");
+    if (attr === null) {
+      this.player.play();
+      return;
+    }
+    const seconds = Number(attr);
+    if (Number.isFinite(seconds) && seconds > 0) {
+      const frame = seconds * this.player.frameRate;
+      const clamped = Math.min(this.player.totalFrames - 1, Math.max(0, frame));
+      this.player.goToAndStop(clamped, true);
+    } else {
+      this.player.pause();
+    }
+  }
+  teardown() {
+    if (this.player) {
+      this.player.destroy();
+      this.player = null;
+    }
+  }
+}
+function register_a_sticker_animated() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-sticker-animated")) {
+    customElements.define("a-sticker-animated", AStickerAnimatedElement);
+  }
+}
+export {
+  AStickerAnimatedElement,
+  register_a_sticker_animated
+};

package/dist/elements/a-sticker.css

@@ -0,0 +1,9 @@
+@layer anta {
+  a-sticker {
+    --sticker-size: 256px;
+
+    display: inline-block;
+    width: var(--sticker-size);
+    height: var(--sticker-size);
+  }
+}

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

@@ -0,0 +1,18 @@
+import { HTMLElementBase } from '../anta_helpers';
+/**
+ * `<a-sticker>` — static sticker carrier.
+ *
+ * Receives SVG markup as the `svg` attribute. On change, drops it into
+ * a shadow-DOM container so the host's light DOM stays untouched.
+ * Sizing comes from external CSS reading `--sticker-size` (set by the
+ * JSX wrapper, or by the consumer directly).
+ *
+ * The animated counterpart is `<a-sticker-animated>`.
+ */
+export declare class AStickerElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    container: HTMLDivElement;
+    constructor();
+    attributeChangedCallback(): void;
+}
+export declare function register_a_sticker(): void;

package/dist/elements/a-sticker.js

@@ -0,0 +1,30 @@
+import { HTMLElementBase } from "../anta_helpers";
+class AStickerElement extends HTMLElementBase {
+  static observedAttributes = ["svg"];
+  container;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = `
+      :host { display: inline-block; }
+      div { width: 100%; height: 100%; }
+      div > svg { display: block; width: 100%; height: 100%; }
+    `;
+    this.container = document.createElement("div");
+    shadow.append(style, this.container);
+  }
+  attributeChangedCallback() {
+    this.container.innerHTML = this.getAttribute("svg") ?? "";
+  }
+}
+function register_a_sticker() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-sticker")) {
+    customElements.define("a-sticker", AStickerElement);
+  }
+}
+export {
+  AStickerElement,
+  register_a_sticker
+};

package/dist/elements/a-text.css

@@ -3,11 +3,17 @@
     --text-color: var(--text-1);
     --text-link-color: var(--link-color);
     --text-link-hover: var(--link-color-hover);
-  
+
     display: block;
     color: var(--text-color);
+    font-size: 15px;
+    line-height: 20px;
   }
-  
+
+  a-text[size="small"]  { font-size: 13px; line-height: 16px; }
+  a-text[size="medium"] { font-size: 15px; line-height: 20px; }
+  a-text[size="large"]  { font-size: 17px; line-height: 24px; }
+
   a-text[inline] {
     display: inline-block;
   }
@@ -70,8 +76,11 @@
      On hover the underline color is repeated so it tracks the priority
      color rather than the global --link-color-hover. */
   a-text a, a-text a:link, a-text a:visited { color: var(--text-link-color); }
-  a-text a:hover {
-    color: var(--text-link-hover);
-    text-decoration-color: var(--text-link-hover);
+  /* Hover only on real-pointer devices — avoids sticky hover after a tap. */
+  @media (hover: hover) and (pointer: fine) {
+    a-text a:hover {
+      color: var(--text-link-hover);
+      text-decoration-color: var(--text-link-hover);
+    }
   }
 }

package/dist/elements/a-title.css

@@ -0,0 +1,64 @@
+@layer anta {
+  /* `<a-title>` is intentionally CSS-only — no JS, no shadow DOM, no
+     `customElements.define`. The browser treats it as a generic unknown
+     element; the rules below give it block layout, the demi-bold
+     variable-font weight, and a per-level type scale + vertical rhythm.
+     The matching `h1`-`h6` rules in `src/reset.css` are kept in lockstep
+     so raw markup looks the same as `<Title level={n}>`. */
+
+  a-title {
+    display: block;
+    color: var(--text-1);
+    font-weight: 584.62;
+    letter-spacing: 0;
+    text-wrap: balance;
+  }
+
+  a-title a-icon {
+    transform: translateY(-0.05em);
+  }
+
+  a-title[level="1"] { font-size: 28px; line-height: 32px; margin-block-start: 0;    margin-block-end: 16px; }
+  a-title[level="2"] { font-size: 24px; line-height: 28px; margin-block-start: 32px; margin-block-end: 12px; }
+  a-title[level="3"] { font-size: 20px; line-height: 24px; margin-block-start: 24px; margin-block-end: 12px; }
+  a-title[level="4"] { font-size: 17px; line-height: 20px; margin-block-start: 20px; margin-block-end: 8px;  }
+  a-title[level="5"] { font-size: 15px; line-height: 20px; margin-block-start: 16px; margin-block-end: 8px;  }
+  a-title[level="6"] { font-size: 13px; line-height: 16px; margin-block-start: 16px; margin-block-end: 4px;  }
+
+  /* Neutral priority overrides. */
+  a-title[priority="secondary"]  { color: var(--text-2); }
+  a-title[priority="tertiary"]   { color: var(--text-3); }
+  a-title[priority="quaternary"] { color: var(--text-4); }
+  a-title[priority="quinary"]    { color: var(--text-5); }
+
+  /* Tinted — same shape as a-text's tone × priority matrix. */
+  a-title[tone="brand"]                          { color: var(--text-1-brand);    }
+  a-title[tone="brand"][priority="secondary"]    { color: var(--text-2-brand);    }
+  a-title[tone="brand"][priority="tertiary"]     { color: var(--text-3-brand);    }
+  a-title[tone="brand"][priority="quaternary"]   { color: var(--text-4-brand);    }
+  a-title[tone="brand"][priority="quinary"]      { color: var(--text-5-brand);    }
+
+  a-title[tone="success"]                        { color: var(--text-1-success);  }
+  a-title[tone="success"][priority="secondary"]  { color: var(--text-2-success);  }
+  a-title[tone="success"][priority="tertiary"]   { color: var(--text-3-success);  }
+  a-title[tone="success"][priority="quaternary"] { color: var(--text-4-success);  }
+  a-title[tone="success"][priority="quinary"]    { color: var(--text-5-success);  }
+
+  a-title[tone="critical"]                          { color: var(--text-1-critical); }
+  a-title[tone="critical"][priority="secondary"]    { color: var(--text-2-critical); }
+  a-title[tone="critical"][priority="tertiary"]     { color: var(--text-3-critical); }
+  a-title[tone="critical"][priority="quaternary"]   { color: var(--text-4-critical); }
+  a-title[tone="critical"][priority="quinary"]      { color: var(--text-5-critical); }
+
+  a-title[tone="warning"]                           { color: var(--text-1-warning);  }
+  a-title[tone="warning"][priority="secondary"]     { color: var(--text-2-warning);  }
+  a-title[tone="warning"][priority="tertiary"]      { color: var(--text-3-warning);  }
+  a-title[tone="warning"][priority="quaternary"]    { color: var(--text-4-warning);  }
+  a-title[tone="warning"][priority="quinary"]       { color: var(--text-5-warning);  }
+
+  a-title[tone="info"]                              { color: var(--text-1-info);     }
+  a-title[tone="info"][priority="secondary"]        { color: var(--text-2-info);     }
+  a-title[tone="info"][priority="tertiary"]         { color: var(--text-3-info);     }
+  a-title[tone="info"][priority="quaternary"]       { color: var(--text-4-info);     }
+  a-title[tone="info"][priority="quinary"]          { color: var(--text-5-info);     }
+}

package/dist/elements/index.d.ts

@@ -1,7 +1,14 @@
 import './a-progress.css';
 import './a-text.css';
+import './a-title.css';
 import './a-icon.css';
 import './a-icon.shapes.css';
+import './a-button.css';
+import './a-sticker.css';
+import './a-sticker-animated.css';
 export { AProgressElement, register_a_progress } from './a-progress';
 export { ATextElement, register_a_text } from './a-text';
 export { AIconElement, register_a_icon } from './a-icon';
+export { AButtonElement, register_a_button } from './a-button';
+export { AStickerElement, register_a_sticker } from './a-sticker';
+export { AStickerAnimatedElement, register_a_sticker_animated } from './a-sticker-animated';

package/dist/elements/index.js

@@ -1,23 +1,42 @@
 import { register_a_progress } from "./a-progress";
 import { register_a_text } from "./a-text";
 import { register_a_icon } from "./a-icon";
+import { register_a_button } from "./a-button";
+import { register_a_sticker } from "./a-sticker";
+import { register_a_sticker_animated } from "./a-sticker-animated";
 import "./a-progress.css";
 import "./a-text.css";
+import "./a-title.css";
 import "./a-icon.css";
 import "./a-icon.shapes.css";
+import "./a-button.css";
+import "./a-sticker.css";
+import "./a-sticker-animated.css";
 import { AProgressElement, register_a_progress as register_a_progress2 } from "./a-progress";
 import { ATextElement, register_a_text as register_a_text2 } from "./a-text";
 import { AIconElement, register_a_icon as register_a_icon2 } from "./a-icon";
+import { AButtonElement, register_a_button as register_a_button2 } from "./a-button";
+import { AStickerElement, register_a_sticker as register_a_sticker2 } from "./a-sticker";
+import { AStickerAnimatedElement, register_a_sticker_animated as register_a_sticker_animated2 } from "./a-sticker-animated";
 if (typeof customElements !== "undefined") {
   register_a_progress();
   register_a_text();
   register_a_icon();
+  register_a_button();
+  register_a_sticker();
+  register_a_sticker_animated();
 }
 export {
+  AButtonElement,
   AIconElement,
   AProgressElement,
+  AStickerAnimatedElement,
+  AStickerElement,
   ATextElement,
+  register_a_button2 as register_a_button,
   register_a_icon2 as register_a_icon,
   register_a_progress2 as register_a_progress,
+  register_a_sticker2 as register_a_sticker,
+  register_a_sticker_animated2 as register_a_sticker_animated,
   register_a_text2 as register_a_text
 };