@antadesign/anta 0.1.1-dev.6 → 0.1.1-dev.8

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

@@ -0,0 +1,11 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-button.css";
+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,78 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-button.css";
+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);
+  }
+}
+register_a_button();
+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.d.ts

@@ -1,4 +1,6 @@
 import { HTMLElementBase } from '../anta_helpers';
+import './a-icon.css';
+import './a-icon.shapes.css';
 /**
  * `<a-icon shape="…">` — pure declarative icon element.
  *

package/dist/elements/a-icon.js

@@ -1,4 +1,6 @@
 import { HTMLElementBase } from "../anta_helpers";
+import "./a-icon.css";
+import "./a-icon.shapes.css";
 class AIconElement extends HTMLElementBase {
 }
 function register_a_icon() {
@@ -7,6 +9,7 @@ function register_a_icon() {
     customElements.define("a-icon", AIconElement);
   }
 }
+register_a_icon();
 export {
   AIconElement,
   register_a_icon

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

@@ -1,4 +1,5 @@
 import { HTMLElementBase } from '../anta_helpers';
+import './a-progress.css';
 export declare class AProgressElement extends HTMLElementBase {
     static observedAttributes: string[];
     indicator: HTMLDivElement;

package/dist/elements/a-progress.js

@@ -1,4 +1,5 @@
 import { HTMLElementBase } from "../anta_helpers";
+import "./a-progress.css";
 class AProgressElement extends HTMLElementBase {
   static observedAttributes = ["value", "max", "tone"];
   indicator;
@@ -60,6 +61,7 @@ function register_a_progress() {
     customElements.define("a-progress", AProgressElement);
   }
 }
+register_a_progress();
 export {
   AProgressElement,
   register_a_progress

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,39 @@
+import { type AnimationItem } from 'lottie-web';
+import { HTMLElementBase } from '../anta_helpers';
+import './a-sticker-animated.css';
+/**
+ * `<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,81 @@
+import lottie from "lottie-web";
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-sticker-animated.css";
+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);
+  }
+}
+register_a_sticker_animated();
+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,19 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-sticker.css';
+/**
+ * `<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,32 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-sticker.css";
+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);
+  }
+}
+register_a_sticker();
+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/a-text.d.ts

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

package/dist/elements/a-text.js

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

package/dist/elements/a-tooltip.css

@@ -0,0 +1,42 @@
+@layer anta {
+  /* Before the custom element upgrades on the client, <a-tooltip> is an
+     unknown inline element and its content would flash *inside the anchor*.
+     Hide it until defined; once defined this stops matching and the shadow
+     `:host { display: contents }` governs (content renders only in the
+     popover via the slot). */
+  a-tooltip:not(:defined) {
+    display: none;
+  }
+
+  /* Tooltip exposes only the box "chrome" that lives inside the shadow
+     popover and is therefore impossible to reach with plain consumer CSS.
+     The bubble's content is slotted light DOM, so its font / colour / size
+     are already styleable from the page — those are intentionally NOT
+     tokens. These custom properties inherit across the shadow boundary
+     into the popover container (see a-tooltip.ts). The host itself draws
+     nothing and stays out of layout (`:host { display: contents }` in the
+     shadow style). */
+  a-tooltip {
+    /* Frosted translucent surface (matches the legacy look): a mostly-
+       opaque white that, paired with the container's `backdrop-filter:
+       blur(8px)`, reads as a frosted bubble over the page. --bg-1 is
+       #ffffff in light / #000000 in dark, so this flips to a dark frost
+       automatically (alpha is dialed down in the .dark override). */
+    --tooltip-bg: color-mix(in oklch, var(--bg-1) 80%, transparent);
+    --tooltip-shadow:
+      0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent),
+      0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);
+    --tooltip-radius: 3px;
+    --tooltip-max-width: min(calc(100vw - 20px), 80ch);
+  }
+
+  /* Dark: a slightly more transparent black frost. A solid black cast shadow
+     for lift, plus an inset 1px white ring so the bubble's edge stays crisp
+     against dark page content. */
+  .dark a-tooltip {
+    --tooltip-bg: color-mix(in oklch, var(--bg-1) 70%, transparent);
+    --tooltip-shadow:
+      0 2px 16px color-mix(in oklch, black 70%, transparent),
+      inset 0 0 0 1px color-mix(in oklch, white 25%, transparent);
+  }
+}

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

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