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

package/dist/elements/a-tooltip.js

@@ -0,0 +1,411 @@
+import { HTMLElementBase } from "../anta_helpers";
+import { debounce } from "es-toolkit";
+import "./a-tooltip.css";
+const MARGIN = 4;
+const CURSOR_SIZE = 16;
+const PADDING_X = 8;
+const DEFAULT_DELAY = 250;
+const FADE_MS = 150;
+const GRACE_MS = 300;
+const CLOSE_DELAY = 120;
+let currentOpen = null;
+let graceTimer;
+function graceActive() {
+  return graceTimer !== void 0;
+}
+function isHot() {
+  return currentOpen !== null || graceActive();
+}
+function clearGrace() {
+  if (graceTimer !== void 0) {
+    clearTimeout(graceTimer);
+    graceTimer = void 0;
+  }
+}
+function claimOpen(el) {
+  if (currentOpen && currentOpen !== el) currentOpen.hide();
+  currentOpen = el;
+  clearGrace();
+}
+function releaseOpen(el) {
+  if (currentOpen !== el) return;
+  currentOpen = null;
+  clearGrace();
+  graceTimer = setTimeout(() => {
+    graceTimer = void 0;
+  }, GRACE_MS);
+}
+const anchorToTooltip = /* @__PURE__ */ new WeakMap();
+function handleIntersection(entries) {
+  for (const entry of entries) {
+    const tooltip = anchorToTooltip.get(entry.target);
+    if (!tooltip) continue;
+    if (!tooltip.listening && entry.isIntersecting) {
+      requestAnimationFrame(() => tooltip.setupListeners());
+    } else if (tooltip.listening && !entry.isIntersecting) {
+      requestAnimationFrame(() => tooltip.teardownListeners());
+    }
+  }
+}
+const lazyObserver = typeof IntersectionObserver !== "undefined" ? new IntersectionObserver(handleIntersection, { root: null, rootMargin: "0px", threshold: 0 }) : null;
+class ATooltipElement extends HTMLElementBase {
+  // Observe `delay` so changing it at runtime — e.g. the docs playground
+  // patches the attribute on the live element — rebuilds the show debounce
+  // with the new value instead of keeping the one captured at setup.
+  static observedAttributes = ["delay"];
+  /** Shadow-internal popover surface — the only thing we ever mutate. */
+  container;
+  anchor = null;
+  listening = false;
+  shown = false;
+  lastMouse;
+  debouncedShow;
+  teardown;
+  closeTimer;
+  fading = false;
+  fadeTimer;
+  docMoveBound = false;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = `
+      :host { display: contents; }
+
+      .container {
+        --_dur: ${FADE_MS}ms;
+
+        position: fixed;
+        left: 0;
+        top: 0;
+        margin: 0;
+        box-sizing: border-box;
+        width: fit-content;
+        max-width: var(--tooltip-max-width, min(calc(100vw - 20px), 80ch));
+        max-height: calc(100vh - 20px);
+        overflow: clip;
+        pointer-events: none;
+        text-align: left;
+
+        background: var(--tooltip-bg, Canvas);
+        color: var(--text-1, CanvasText);
+        box-shadow: var(--tooltip-shadow, 0 1px 8px rgba(0, 0, 0, 0.2));
+        backdrop-filter: blur(8px);
+        padding: 5px 8px;
+        border: none;
+        border-radius: var(--tooltip-radius, 3px);
+        outline: none;
+
+        font-size: 14px;
+        line-height: 130%;
+        font-weight: 400;
+        white-space: break-spaces;
+        word-break: break-word;
+        overflow-wrap: break-word;
+
+        /* Clean enter/exit fade. allow-discrete keeps the bubble rendered
+           through its fade-out after hidePopover(), and @starting-style
+           gives every open a from-opacity:0 \u2014 so the first paint at a
+           not-yet-computed transform is invisible (no flash at a stale
+           spot), and re-appearing is always clean. */
+        opacity: 0;
+        transition:
+          opacity var(--_dur) ease,
+          overlay var(--_dur) ease allow-discrete,
+          display var(--_dur) ease allow-discrete;
+      }
+
+      .container:popover-open { opacity: 1; }
+
+      @starting-style {
+        .container:popover-open { opacity: 0; }
+      }
+
+      /* Interactive tooltips accept pointer events so their content (links,
+         buttons) is clickable; the default click-through bubble does not. */
+      :host([interactive]) .container { pointer-events: auto; }
+    `;
+    this.container = document.createElement("div");
+    this.container.className = "container";
+    this.container.setAttribute("popover", "manual");
+    this.container.setAttribute("role", "tooltip");
+    this.container.append(document.createElement("slot"));
+    this.container.addEventListener("mouseenter", () => {
+      if (this.isInteractive) this.cancelHide();
+    });
+    this.container.addEventListener("mouseleave", () => {
+      if (this.isInteractive && this.shown) this.scheduleHide();
+    });
+    shadow.append(style, this.container);
+  }
+  connectedCallback() {
+    const parent = this.parentElement;
+    if (!parent) return;
+    this.anchor = parent;
+    anchorToTooltip.set(parent, this);
+    lazyObserver?.observe(parent);
+  }
+  disconnectedCallback() {
+    this.hide();
+    if (this.fadeTimer !== void 0) {
+      clearTimeout(this.fadeTimer);
+      this.fadeTimer = void 0;
+    }
+    this.fading = false;
+    if (this.docMoveBound) {
+      this.doc.removeEventListener("mousemove", this.onDocMove);
+      this.docMoveBound = false;
+    }
+    this.teardownListeners();
+    if (this.anchor) {
+      if (anchorToTooltip.get(this.anchor) === this) {
+        anchorToTooltip.delete(this.anchor);
+        lazyObserver?.unobserve(this.anchor);
+      }
+      this.anchor = null;
+    }
+  }
+  attributeChangedCallback(name) {
+    if (name === "delay" && this.listening) this.makeDebouncedShow();
+  }
+  /** (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. */
+  makeDebouncedShow() {
+    this.debouncedShow?.cancel();
+    this.debouncedShow = debounce((e) => this.show(e), this.delay);
+  }
+  /** 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. */
+  get view() {
+    return this.ownerDocument?.defaultView ?? window;
+  }
+  get doc() {
+    return this.ownerDocument ?? document;
+  }
+  get isInteractive() {
+    return this.hasAttribute("interactive");
+  }
+  /** Pinned under the anchor (no cursor-following). Interactive implies this —
+   *  you can't move into a bubble that's chasing the cursor. */
+  get isStatic() {
+    return this.hasAttribute("static") || this.isInteractive;
+  }
+  get prefersTop() {
+    return this.getAttribute("placement") === "top";
+  }
+  get delay() {
+    const attr = this.getAttribute("delay");
+    if (attr == null) return DEFAULT_DELAY;
+    const n = parseInt(attr, 10);
+    return Number.isFinite(n) ? n : DEFAULT_DELAY;
+  }
+  // --- positioning (sets only the shadow container's own transform) ---
+  positionToTarget = () => {
+    requestAnimationFrame(() => {
+      if (!this.anchor || !this.shown) return;
+      const a = this.anchor.getBoundingClientRect();
+      const box = this.container.getBoundingClientRect();
+      const view = this.view;
+      const vw = view.innerWidth;
+      const vh = view.innerHeight;
+      let left = a.left;
+      if (left + box.width > vw) left = vw - box.width - MARGIN;
+      left = Math.max(MARGIN, left);
+      let top;
+      if (this.prefersTop) {
+        top = a.top - box.height - MARGIN;
+        if (top < MARGIN) top = a.bottom + MARGIN;
+      } else {
+        top = a.bottom + MARGIN;
+        if (top + box.height > vh) top = a.top - box.height - MARGIN;
+      }
+      top = Math.max(MARGIN, top);
+      this.container.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+    });
+  };
+  positionToMouse = (e) => {
+    requestAnimationFrame(() => {
+      if (!this.shown && !this.fading) return;
+      const box = this.container.getBoundingClientRect();
+      const view = this.view;
+      const vw = view.innerWidth;
+      const vh = view.innerHeight;
+      let left = e.clientX - PADDING_X;
+      if (left + box.width > vw) left = vw - box.width - MARGIN;
+      left = Math.max(MARGIN, left);
+      let top;
+      if (this.prefersTop) {
+        top = e.clientY - box.height - MARGIN * 2;
+        if (top < MARGIN) top = e.clientY + CURSOR_SIZE;
+      } else {
+        top = e.clientY + CURSOR_SIZE;
+        if (top + box.height > vh) top = e.clientY - box.height - MARGIN * 2;
+      }
+      top = Math.max(MARGIN, top);
+      this.container.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+    });
+  };
+  position(e) {
+    if (!this.isStatic && e) this.positionToMouse(e);
+    else this.positionToTarget();
+  }
+  // --- show / hide ---
+  show = (e) => {
+    if (!this.anchor) return;
+    this.cancelHide();
+    if (currentOpen && currentOpen !== this && this.anchor.contains(currentOpen.anchor)) {
+      return;
+    }
+    claimOpen(this);
+    if (!this.shown) {
+      this.shown = true;
+      this.fading = false;
+      if (this.fadeTimer !== void 0) {
+        clearTimeout(this.fadeTimer);
+        this.fadeTimer = void 0;
+      }
+      this.container.showPopover();
+      this.view.addEventListener("scroll", this.hide, { capture: true, passive: true });
+      this.doc.addEventListener("keydown", this.onKeyDown, true);
+      if (!this.docMoveBound) {
+        this.doc.addEventListener("mousemove", this.onDocMove);
+        this.docMoveBound = true;
+      }
+    }
+    this.position(e);
+  };
+  hide = () => {
+    this.cancelHide();
+    if (!this.shown) return;
+    this.shown = false;
+    this.container.hidePopover();
+    this.view.removeEventListener("scroll", this.hide, { capture: true });
+    this.doc.removeEventListener("keydown", this.onKeyDown, true);
+    this.fading = true;
+    if (this.fadeTimer !== void 0) clearTimeout(this.fadeTimer);
+    this.fadeTimer = setTimeout(() => {
+      this.fading = false;
+      this.fadeTimer = void 0;
+      if (this.docMoveBound) {
+        this.doc.removeEventListener("mousemove", this.onDocMove);
+        this.docMoveBound = false;
+      }
+    }, FADE_MS);
+    releaseOpen(this);
+  };
+  /** While shown, track the cursor even after it has left the anchor (during
+   *  the close delay). Cursor-following only — static/interactive bubbles
+   *  stay pinned. */
+  onDocMove = (e) => {
+    if ((this.shown || this.fading) && !this.isStatic) {
+      this.lastMouse = e;
+      this.positionToMouse(e);
+    }
+  };
+  /** 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. */
+  scheduleHide = () => {
+    this.cancelHide();
+    this.closeTimer = setTimeout(() => {
+      this.closeTimer = void 0;
+      this.hide();
+    }, CLOSE_DELAY);
+  };
+  cancelHide() {
+    if (this.closeTimer !== void 0) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = void 0;
+    }
+  }
+  onKeyDown = (e) => {
+    if (e.key === "Escape") this.hide();
+  };
+  /** Open now if another tooltip is hot (skip delay), else (re)arm the delayed
+   *  show with the latest cursor event. */
+  trigger(e) {
+    if (isHot()) {
+      this.debouncedShow?.cancel();
+      this.show(e);
+    } else {
+      this.debouncedShow?.(e);
+    }
+  }
+  // --- lazy listener wiring (called by the intersection observer) ---
+  setupListeners() {
+    if (this.listening || !this.anchor) {
+      this.listening = true;
+      return;
+    }
+    const anchor = this.anchor;
+    const view = this.view;
+    const doc = this.doc;
+    this.makeDebouncedShow();
+    const onMouseMove = (e) => {
+      this.lastMouse = e;
+      if (this.shown) {
+        if (!this.isStatic) this.positionToMouse(e);
+      } else {
+        this.trigger(e);
+      }
+    };
+    const onLeave = () => {
+      this.debouncedShow?.cancel();
+      anchor.removeEventListener("mousemove", onMouseMove);
+      anchor.removeEventListener("mouseleave", onLeave);
+      anchor.removeEventListener("blur", onLeave);
+      view.removeEventListener("pagehide", onLeave);
+      doc.removeEventListener("visibilitychange", onLeave);
+      this.scheduleHide();
+    };
+    const onEnter = (e) => {
+      this.lastMouse = e;
+      anchor.addEventListener("mousemove", onMouseMove);
+      anchor.addEventListener("mouseleave", onLeave);
+      view.addEventListener("pagehide", onLeave);
+      doc.addEventListener("visibilitychange", onLeave);
+      this.trigger(e);
+    };
+    const onFocus = () => {
+      anchor.addEventListener("blur", onLeave);
+      view.addEventListener("pagehide", onLeave);
+      doc.addEventListener("visibilitychange", onLeave);
+      this.trigger();
+    };
+    anchor.addEventListener("mouseenter", onEnter);
+    anchor.addEventListener("focus", onFocus);
+    this.teardown = () => {
+      this.debouncedShow?.cancel();
+      anchor.removeEventListener("mousemove", onMouseMove);
+      anchor.removeEventListener("mouseenter", onEnter);
+      anchor.removeEventListener("mouseleave", onLeave);
+      anchor.removeEventListener("focus", onFocus);
+      anchor.removeEventListener("blur", onLeave);
+      view.removeEventListener("pagehide", onLeave);
+      doc.removeEventListener("visibilitychange", onLeave);
+      this.listening = false;
+    };
+    this.listening = true;
+  }
+  teardownListeners() {
+    this.teardown?.();
+    this.teardown = void 0;
+  }
+}
+function register_a_tooltip() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-tooltip")) {
+    customElements.define("a-tooltip", ATooltipElement);
+  }
+}
+register_a_tooltip();
+export {
+  ATooltipElement,
+  register_a_tooltip
+};

package/dist/elements/index.d.ts

@@ -1,8 +1,24 @@
-import './a-progress.css';
-import './a-text.css';
-import './a-title.css';
-import './a-icon.css';
-import './a-icon.shapes.css';
+/**
+ * Barrel: registers ALL Anta custom elements (the convenience path).
+ *
+ * Each `a-{name}` module self-registers and imports its own CSS when loaded,
+ * so re-exporting them here (which evaluates each module) registers the whole
+ * set + injects every element's CSS. Importing this barrel for side effects —
+ * `import '@antadesign/anta/elements'` — gives you everything.
+ *
+ * For a SMALLER footprint, import just the element(s) you use instead:
+ *   import '@antadesign/anta/elements/a-tooltip'   // registers a-tooltip + its CSS, nothing else
+ * That granular path pulls in only that element's code (e.g. it won't drag in
+ * `lottie-web`, which only `a-sticker-animated` needs).
+ *
+ * Must only be imported client-side — registration is guarded against missing
+ * `customElements` (SSR), but there's no reason to load it server-side.
+ */
 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';
+export { ATooltipElement, register_a_tooltip } from './a-tooltip';
+import './a-title.css';

package/dist/elements/index.js

@@ -1,24 +1,24 @@
-import { register_a_progress } from "./a-progress";
-import { register_a_text } from "./a-text";
-import { register_a_icon } from "./a-icon";
-import "./a-progress.css";
-import "./a-text.css";
+import { AProgressElement, register_a_progress } from "./a-progress";
+import { ATextElement, register_a_text } from "./a-text";
+import { AIconElement, register_a_icon } from "./a-icon";
+import { AButtonElement, register_a_button } from "./a-button";
+import { AStickerElement, register_a_sticker } from "./a-sticker";
+import { AStickerAnimatedElement, register_a_sticker_animated } from "./a-sticker-animated";
+import { ATooltipElement, register_a_tooltip } from "./a-tooltip";
 import "./a-title.css";
-import "./a-icon.css";
-import "./a-icon.shapes.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";
-if (typeof customElements !== "undefined") {
-  register_a_progress();
-  register_a_text();
-  register_a_icon();
-}
 export {
+  AButtonElement,
   AIconElement,
   AProgressElement,
+  AStickerAnimatedElement,
+  AStickerElement,
   ATextElement,
-  register_a_icon2 as register_a_icon,
-  register_a_progress2 as register_a_progress,
-  register_a_text2 as register_a_text
+  ATooltipElement,
+  register_a_button,
+  register_a_icon,
+  register_a_progress,
+  register_a_sticker,
+  register_a_sticker_animated,
+  register_a_text,
+  register_a_tooltip
 };

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`. */
@@ -63,7 +76,7 @@ export interface ATextAttributes extends BaseAttributes {
     /** Type scale. `small` = 13/16, `medium` (default) = 15/20, `large` = 17/24. */
     size?: 'small' | 'medium' | 'large';
     /** Render as inline-block instead of the default block. */
-    inline?: boolean | string;
+    inline?: boolean | '';
     /** Truncate to N lines with a trailing ellipsis. The attribute value
      *  carries the line count (e.g. `"1"`, `"3"`); the count is also
      *  available via the `--line-clamp` CSS custom property set inline. */
@@ -71,7 +84,7 @@ export interface ATextAttributes extends BaseAttributes {
     /** Marks the host as expandable when paired with `truncate`. Adds
      *  the fade-out mask; the JSX wrapper renders the chevron and owns
      *  the click/keyboard expansion logic. */
-    expandable?: boolean | string;
+    expandable?: boolean | '';
     /** ARIA disclosure state, mirrors the JSX wrapper's `expanded` flag. */
     'aria-expanded'?: boolean | 'true' | 'false';
 }
@@ -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,53 @@ export interface AIconAttributes extends BaseAttributes {
     /** Hides decorative icons from screen readers. */
     'aria-hidden'?: 'true' | 'false' | boolean;
 }
+/**
+ * Attributes for the `<a-tooltip>` custom element. Placed as a child of the
+ * element it annotates (content as children). For the typed JSX wrapper use
+ * `Tooltip` from `@antadesign/anta`.
+ */
+export interface ATooltipAttributes extends BaseAttributes {
+    /** Show delay in milliseconds. Never use `0` — use ~`50`. Defaults to 250. */
+    delay?: number | string;
+    /** Preferred side; auto-flips when there's no room. Defaults to `'bottom'`. */
+    placement?: 'top' | 'bottom';
+    /** Pin under the anchor instead of following the cursor. Presence-based
+     *  (`''` on, omit off). */
+    static?: boolean | '';
+    /** Make the bubble hoverable/clickable (pointer events on, stays open while
+     *  hovered). Implies `static`. Presence-based (`''` on, omit off). */
+    interactive?: boolean | '';
+    /** HTML `id`. */
+    id?: string;
+}
+/**
+ * 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?: boolean | '';
+    /** Loading state. Presence-based (`''` on, omit off). */
+    loading?: boolean | '';
+    /** Disabled state. Presence-based (`''` on, omit off). */
+    disabled?: boolean | '';
+    /** Toggled-on / pressed state. Presence-based (`''` on, omit off). */
+    selected?: 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;
+}