@antadesign/anta 0.1.1-dev.6 → 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,23 +1,43 @@
 @layer anta {
   a-icon {
-    /* `<a-icon size="N">` maps to `--icon-size` via typed `attr()`
-       (CSS Values 5) — Chrome 133+, Safari 18.2+. Firefox not yet:
-       in raw HTML usage there, set `style="--icon-size: Npx"`. */
-    --icon-size: attr(size px);
+    /* 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,5 +1,5 @@
 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", "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"];
+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 {
@@ -68,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;

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

@@ -76,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/index.d.ts

@@ -3,6 +3,12 @@ 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,24 +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
 };

package/dist/general_types.d.ts

@@ -1,3 +1,4 @@
+import type { IconShape } from './elements/a-icon.shapes';
 /** Common props for JSX component wrappers. */
 export interface BaseProps {
     /** CSS class name. Merged with any internal classes by the component. */
@@ -6,9 +7,21 @@ export interface BaseProps {
     style?: React.CSSProperties;
     /** Child elements. When provided, replaces the component's default label/content. */
     children?: React.ReactNode;
+    /** HTML `id` attribute. */
+    id?: string;
+    /** HTML `title` attribute — native browser tooltip on hover. */
+    title?: string;
+    /** Tab order. Set to `-1` to skip the element when tabbing. */
+    tabIndex?: number;
+    /** Any `data-*` attribute is forwarded to the rendered element. */
+    [key: `data-${string}`]: unknown;
+    /** Any `aria-*` attribute is forwarded to the rendered element. */
+    [key: `aria-${string}`]: unknown;
 }
 /** Attributes for intrinsic custom elements (`<a-*>` tags) in JSX. */
 export interface BaseAttributes {
+    /** React/Preact reconciliation key when rendered inside a list. */
+    key?: string | number | null;
     /** HTML `class` attribute (standard DOM). */
     class?: string;
     /** React/Preact-style class name. Alias for `class`. */
@@ -95,13 +108,54 @@ export interface ATitleAttributes extends BaseAttributes {
     'aria-level'?: number | string;
 }
 /**
- * Attributes for the `<a-icon>` custom element. The `shape` attribute
- * value is typed as `string` here so the element accepts any consumer's
- * generated shapes. The JSX wrapper (`Icon`) narrows it to `IconShape`.
+ * Attributes for the `<a-sticker>` static sticker carrier.
+ *
+ * The SVG payload is passed as the `svg` attribute — a markup string.
+ * On change, the element writes it into its shadow DOM (no light-DOM
+ * `<slot>`, so children aren't rendered). The JSX wrapper
+ * (`Sticker{Name}`) sets it from the per-sticker module's inlined SVG.
+ * Sizing comes from `--sticker-size`.
+ */
+export interface AStickerAttributes extends BaseAttributes {
+    /** SVG markup string. On change the element drops it into its shadow
+     *  DOM (`innerHTML`). */
+    svg?: string;
+    role?: string;
+    'aria-label'?: string;
+    'aria-hidden'?: 'true' | 'false' | boolean;
+}
+/**
+ * Attributes for the `<a-sticker-animated>` Lottie sticker carrier.
+ *
+ * The Lottie payload is passed as the `animation` attribute — a JSON
+ * string. On change the element `JSON.parse`s it once and drives a
+ * `lottie-web` player (SVG renderer) inside its shadow DOM. The JSX
+ * wrapper (`Sticker{Name}Animated`) sets it from the per-sticker
+ * module's inlined JSON. Sizing comes from the `--sticker-size` CSS
+ * variable; `paused` controls playback.
+ */
+export interface AStickerAnimatedAttributes extends BaseAttributes {
+    /** Lottie payload as a JSON string. The element parses it once on
+     *  change. */
+    animation?: string;
+    /** Present (any string value, including `""`) freezes the animation.
+     *  A numeric string is parsed as seconds and the player seeks to
+     *  that time before pausing. Omit to play. */
+    paused?: string | boolean | number;
+    role?: string;
+    'aria-label'?: string;
+    'aria-hidden'?: 'true' | 'false' | boolean;
+}
+/**
+ * Attributes for the `<a-icon>` custom element. `shape` is typed as
+ * `IconShape` (`keyof IconShapes`); the `IconShapes` interface is
+ * module-augmentable, so consumers who generate their own shape sets
+ * via `declare module '@antadesign/anta' { interface IconShapes { … } }`
+ * get those keys accepted automatically.
  */
 export interface AIconAttributes extends BaseAttributes {
     /** Which icon to render. */
-    shape?: string;
+    shape?: IconShape;
     /** Width and height in pixels. Mapped to the `--icon-size` custom
      *  property via the CSS Values 5 typed `attr()` function — Chrome
      *  133+ and Safari 18.2+ only. Firefox hasn't shipped typed
@@ -119,3 +173,34 @@ export interface AIconAttributes extends BaseAttributes {
     /** Hides decorative icons from screen readers. */
     'aria-hidden'?: 'true' | 'false' | boolean;
 }
+/**
+ * Attributes for the `<a-button>` custom element. For the typed JSX
+ * wrapper use `Button` from `@antadesign/anta`.
+ */
+export interface AButtonAttributes extends BaseAttributes {
+    /** Visual emphasis. */
+    priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+    /** Semantic tone, or any literal CSS color for a one-off custom tone. */
+    tone?: 'neutral' | 'brand' | 'critical' | 'info' | 'success' | 'warning' | (string & {});
+    /** Underline style. Only renders on `priority="tertiary" | "quaternary"`. */
+    underline?: 'solid' | 'dashed' | 'dotted';
+    /** Size variant. small=22px, medium=26px, large=30px. */
+    size?: 'small' | 'medium' | 'large';
+    /** Drop outer padding to zero. Only takes effect on `priority="quaternary"`.
+     *  Presence-based: `''` (or any value) turns it on; omit to turn off. */
+    paddingless?: '' | 'true' | 'false' | boolean;
+    /** Loading state. Presence-based (`''` on, omit off). */
+    loading?: '' | 'true' | 'false' | boolean;
+    /** Disabled state. Presence-based (`''` on, omit off). */
+    disabled?: '' | 'true' | 'false' | boolean;
+    /** Toggled-on / pressed state. Presence-based (`''` on, omit off). */
+    selected?: '' | 'true' | 'false' | boolean;
+    /** Submit/reset semantics. */
+    type?: 'button' | 'submit' | 'reset';
+    /** Associate with a form by id when not nested inside it. */
+    form?: string;
+    /** Custom event name dispatched (bubbling) on click. */
+    'data-custom-event'?: string;
+    'aria-disabled'?: 'true' | 'false' | boolean;
+    'aria-busy'?: 'true' | 'false' | boolean;
+}