@antadesign/anta 0.3.33 → 0.3.35

package/dist/components/Tooltip.d.ts

@@ -1,10 +1,8 @@
 import type { BaseProps } from "../general_types";
 export interface TooltipProps extends BaseProps {
-    /** Tooltip content. Renders anything — text, markup, an icon + text.
-     *  Lives in the light DOM, so it's styleable with your own plain CSS. */
+    /** Supplementary text or markup. Content stays in light DOM for application CSS. */
     children?: React.ReactNode;
-    /** Show delay in milliseconds after hover / focus. Never use `0` — use
-     *  ~`50` for a near-instant tooltip (0 has caused issues in practice).
+    /** Wait in milliseconds after hover or keyboard focus. Use `50` for a short delay.
      *  @defaultValue 300 */
     delay?: number;
     /** Which side of the anchor the bubble prefers. Auto-flips to the other
@@ -18,10 +16,9 @@ export interface TooltipProps extends BaseProps {
      *  pinned (anchored beneath the target) by default; pass `follow` for the
      *  cursor-tracking behavior, which fades by distance as the cursor leaves. */
     follow?: boolean;
-    /** Make the bubble hoverable and clickable — enables pointer events and
-     *  keeps it open while the cursor is over it, so its content (links,
-     *  buttons) can be interacted with. Always pinned (an interactive bubble
-     *  can't follow the cursor, even with `follow`). */
+    /** Keep content available while the pointer or keyboard focus is inside it.
+     *  Enables pointer events and pins the bubble even with `follow`. Essential
+     *  actions belong in a Menu or Dialog with an explicit trigger. */
     interactive?: boolean;
     /** Only show when the target is actually truncated (its text overflows and is
      *  ellipsized); a label that fits gets no tooltip. The check is a UI-thread
@@ -49,13 +46,12 @@ export interface TooltipProps extends BaseProps {
  *
  * @example Basic usage
  * ```tsx
- * import { Tooltip } from '@antadesign/anta'
+ * import { Tooltip, Button } from '@antadesign/anta'
  * import '@antadesign/anta/elements'
  *
- * <button>
- *   Save
+ * <Button label="Save">
  *   <Tooltip>Saves your work</Tooltip>
- * </button>
+ * </Button>
  * ```
  *
  * @example Above the anchor, rich content
@@ -70,10 +66,9 @@ export interface TooltipProps extends BaseProps {
  *
  * @example Follow the cursor
  * ```tsx
- * <button>
- *   Hover me
+ * <Button label="Hover me">
  *   <Tooltip follow>Tracks the pointer</Tooltip>
- * </button>
+ * </Button>
  * ```
  */
 export declare const Tooltip: ({ delay, placement, round, follow, interactive, truncatedOnly, truncatedSelector, className, style, children, ...rest }: TooltipProps) => any;

package/dist/components/copy-props.d.ts

@@ -2,7 +2,7 @@
  * The copy target for a copy preset (`ButtonCopy` / `MenuItemCopy`) — exactly
  * one of a literal string, a DOM region, or the page URL. The write itself is
  * performed by the slotted `<a-copy>` element; these props map to its attributes
- * via `copyElementProps`. `copyWithUrl` / `onCopyRequest` are only meaningful for
+ * via `useCopyElementProps`. `copyWithUrl` / `onCopyRequest` are only meaningful for
  * the string target, so the union pins them `never` elsewhere.
  */
 export type CopyTarget = {
@@ -40,7 +40,7 @@ export type CopyTarget = {
     copyWithUrl?: never;
     onCopyRequest?: never;
 };
-/** Everything `copyElementProps` reads: the target plus the resolved `onCopied`
+/** Everything `useCopyElementProps` reads: the target plus the resolved `onCopied`
  *  (the preset passes its feedback-wrapped handler) and the `toast` opt-in. */
 type CopyElementInput = {
     copy?: string;
@@ -63,7 +63,18 @@ export declare function copyElementProps(p: CopyElementInput): {
     readonly toast: "" | undefined;
     readonly 'copied-label': string | undefined;
     readonly oncopydone: ((e: any) => void) | undefined;
-    readonly oncopyrequest: (() => void) | undefined;
+    readonly oncopyrequest: ((e: any) => void) | undefined;
+};
+/** @internal Apply the shared browser hydration option to copy event props. */
+export declare function useCopyElementProps(p: CopyElementInput): {
+    copy: string | undefined;
+    'copy-node': string | undefined;
+    'copy-url': "" | undefined;
+    'copy-with-url': "" | undefined;
+    toast: "" | undefined;
+    'copied-label': string | undefined;
+    oncopydone?: ((e: any) => void) | undefined;
+    oncopyrequest?: ((e: any) => void) | undefined;
 };
 /** True when these props copy a DOM node — the host control must then be marked
  *  `data-copy-node-button` so the serializer strips it from the copied region. */

package/dist/components/copy-props.js

@@ -1,4 +1,5 @@
 import { nativeStateChange } from "../anta_helpers";
+import { useNativeEventProps } from "../native-event-props";
 function copyElementProps(p) {
   const { copy, copyNode, copyUrl, copyWithUrl, onCopyRequest, onCopied, toast, copiedLabel } = p;
   return {
@@ -8,14 +9,24 @@ function copyElementProps(p) {
     "copy-with-url": copyWithUrl ? "" : void 0,
     toast: toast ? "" : void 0,
     "copied-label": copiedLabel,
-    oncopydone: onCopied ? (e) => onCopied(nativeStateChange(e).detail?.ok ?? false) : void 0,
-    oncopyrequest: onCopyRequest ? () => onCopyRequest() : void 0
+    oncopydone: onCopied ? (e) => {
+      const result = nativeStateChange(e);
+      if (result.isOwn) onCopied(result.detail?.ok ?? false);
+    } : void 0,
+    oncopyrequest: onCopyRequest ? (e) => {
+      if (nativeStateChange(e).isOwn) onCopyRequest();
+    } : void 0
   };
 }
+function useCopyElementProps(p) {
+  const { oncopydone, oncopyrequest, ...attributes } = copyElementProps(p);
+  return { ...attributes, ...useNativeEventProps({ oncopydone, oncopyrequest }) };
+}
 function isNodeCopy(p) {
   return p.copyNode != null && p.copyNode !== false;
 }
 export {
   copyElementProps,
-  isNodeCopy
+  isNodeCopy,
+  useCopyElementProps
 };

package/dist/components/select-tree.d.ts

@@ -0,0 +1,24 @@
+import type { OptionValue, SelectGroup, SelectItem, SelectOption, SelectSubmenu } from './Select';
+interface Leaf<V extends OptionValue> {
+    kind: 'option';
+    opt: SelectOption<V>;
+    disabled: boolean;
+    group?: string;
+}
+export type SelectNode<V extends OptionValue> = Leaf<V> | ({
+    key: string;
+    disabled: boolean;
+    children: SelectNode<V>[];
+} & ({
+    kind: 'group';
+    source: SelectGroup<V>;
+} | {
+    kind: 'submenu';
+    source: SelectSubmenu<V>;
+}));
+export declare function prepareSelectOptions<V extends OptionValue>(items: SelectItem<V>[], matches?: (option: SelectOption<V>) => boolean): {
+    tree: SelectNode<V>[];
+    allLeaves: Leaf<V>[];
+    visibleLeaves: Leaf<V>[];
+};
+export {};

package/dist/components/select-tree.js

@@ -0,0 +1,35 @@
+import { normalizeOpt } from "./select-options";
+function prepareSelectOptions(items, matches) {
+  const allLeaves = [];
+  const visibleLeaves = [];
+  const walk = (items2, group, disabled = false) => {
+    const nodes = [];
+    items2.forEach((raw, index) => {
+      if (typeof raw !== "string" && Array.isArray(raw.submenu)) {
+        const source = raw;
+        const effectiveDisabled = disabled || !!source.disabled;
+        const children = walk(source.submenu, source.label, effectiveDisabled);
+        if (children.length) nodes.push({ kind: "submenu", source, disabled: effectiveDisabled, children, key: `sub-${index}-${source.label}` });
+      } else if (typeof raw !== "string" && Array.isArray(raw.options)) {
+        const source = raw;
+        const effectiveDisabled = disabled || !!source.disabled;
+        const children = walk(source.options, source.label, effectiveDisabled);
+        if (children.length) nodes.push({ kind: "group", source, disabled: effectiveDisabled, children, key: `grp-${index}-${source.label}` });
+      } else {
+        const opt = normalizeOpt(raw);
+        const leaf = { kind: "option", opt, disabled: disabled || !!opt.disabled, group };
+        allLeaves.push(leaf);
+        if (!matches || matches(opt)) {
+          visibleLeaves.push(leaf);
+          nodes.push(leaf);
+        }
+      }
+    });
+    return nodes;
+  };
+  const tree = walk(items);
+  return { tree, allLeaves, visibleLeaves };
+}
+export {
+  prepareSelectOptions
+};

package/dist/element-base.d.ts

@@ -0,0 +1,10 @@
+/** Use a harmless base when importing element classes without a browser DOM. */
+declare const NativeHTMLElement: typeof HTMLElement;
+/** Base for custom elements that can live in a different document or iframe. */
+export declare class HTMLElementBase extends NativeHTMLElement {
+    /** This element's own window, including when rendered in an iframe. */
+    protected get view(): Window & typeof globalThis;
+    /** This element's own document. */
+    protected get doc(): Document;
+}
+export {};

package/dist/element-base.js

@@ -0,0 +1,15 @@
+const NativeHTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+class HTMLElementBase extends NativeHTMLElement {
+  /** This element's own window, including when rendered in an iframe. */
+  get view() {
+    return this.ownerDocument?.defaultView ?? window;
+  }
+  /** This element's own document. */
+  get doc() {
+    return this.ownerDocument ?? document;
+  }
+}
+export {
+  HTMLElementBase
+};

package/dist/elements/a-avatar.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-avatar{--avatar-size: 44px;--avatar-radius: 22%;--avatar-placeholder-bg: var(--bg-3);--avatar-badge-ratio: .24;--avatar-badge-size: calc(var(--avatar-size) * var(--avatar-badge-ratio));--avatar-badge-inset: 0px;--avatar-badge-gap: 2px;--avatar-badge-mask: none;--avatar-badge-tone-source: var(--anta-seed-neutral);--avatar-badge-chroma: .17;--avatar-badge-color: light-dark( oklch(from var(--avatar-badge-tone-source) .62 var(--avatar-badge-chroma) h), oklch(from var(--avatar-badge-tone-source) .68 var(--avatar-badge-chroma) h) );display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);vertical-align:middle}a-avatar[round]{--avatar-radius: var(--avatar-round, 50%);--avatar-badge-inset: calc(var(--avatar-size) * .03);@supports (border-radius: attr(probe type(<length>),1px)){--avatar-round: attr(round type(<length>))}}a-avatar[size=small]{--avatar-size: 32px;--avatar-badge-gap: 1.5px}a-avatar[size=large]{--avatar-size: 64px;--avatar-badge-gap: 2.5px}a-avatar[badge]:not([badge=""],[badge=none]){--avatar-badge-mask: radial-gradient( circle calc(var(--avatar-badge-size) / 2 + var(--avatar-badge-gap)) at calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2) calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2), transparent 99%, #000 100% )}a-avatar:not(:defined){display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:var(--avatar-radius);background:var(--avatar-placeholder-bg);vertical-align:middle}a-avatar[badge=neutral]{--avatar-badge-chroma: .005}a-avatar[badge=brand]{--avatar-badge-tone-source: var(--anta-seed-brand)}a-avatar[badge=info]{--avatar-badge-tone-source: var(--anta-seed-info)}a-avatar[badge=success]{--avatar-badge-tone-source: var(--anta-seed-success)}a-avatar[badge=warning]{--avatar-badge-tone-source: var(--anta-seed-warning)}a-avatar[badge=critical]{--avatar-badge-tone-source: var(--anta-seed-critical)}@supports (color: attr(badge type(<color>),transparent)){a-avatar[badge]:not([badge=""],[badge=neutral],[badge=brand],[badge=info],[badge=success],[badge=warning],[badge=critical]){--avatar-badge-tone-source: attr(badge type(<color>), transparent)}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-avatar{--avatar-size: 44px;--avatar-radius: 22%;--avatar-placeholder-bg: var(--bg-3);--avatar-badge-ratio: .24;--avatar-badge-size: calc(var(--avatar-size) * var(--avatar-badge-ratio));--avatar-badge-inset: 0px;--avatar-badge-gap: 2px;--avatar-badge-mask: none;--avatar-badge-tone-source: var(--anta-seed-neutral);--avatar-badge-chroma: .17;--avatar-badge-color: light-dark( oklch(from var(--avatar-badge-tone-source) .62 var(--avatar-badge-chroma) h), oklch(from var(--avatar-badge-tone-source) .68 var(--avatar-badge-chroma) h) );display:inline-block;position:relative;inline-size:var(--avatar-size);block-size:var(--avatar-size);vertical-align:middle}a-avatar::part(frame){display:block;inline-size:100%;block-size:100%;border-radius:var(--avatar-radius);background:var(--avatar-placeholder-bg);mask-image:var(--avatar-badge-mask)}a-avatar::part(image){object-fit:cover}a-avatar::part(badge){display:none;position:absolute;right:var(--avatar-badge-inset);bottom:var(--avatar-badge-inset);inline-size:var(--avatar-badge-size);block-size:var(--avatar-badge-size);border-radius:50%;background:var(--avatar-badge-color)}a-avatar[badge]:not([badge=""],[badge=none])::part(badge){display:block}a-avatar[round]{--avatar-radius: var(--avatar-round, 50%);--avatar-badge-inset: calc(var(--avatar-size) * .03);@supports (border-radius: attr(probe type(<length>),1px)){--avatar-round: attr(round type(<length>))}}a-avatar[size=small]{--avatar-size: 32px;--avatar-badge-gap: 1.5px}a-avatar[size=large]{--avatar-size: 64px;--avatar-badge-gap: 2.5px}a-avatar[badge]:not([badge=""],[badge=none]){--avatar-badge-mask: radial-gradient( circle calc(var(--avatar-badge-size) / 2 + var(--avatar-badge-gap)) at calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2) calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2), transparent 99%, #000 100% )}a-avatar:not(:defined){display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:var(--avatar-radius);background:var(--avatar-placeholder-bg);vertical-align:middle}a-avatar[badge=neutral]{--avatar-badge-chroma: .005}a-avatar[badge=brand]{--avatar-badge-tone-source: var(--anta-seed-brand)}a-avatar[badge=info]{--avatar-badge-tone-source: var(--anta-seed-info)}a-avatar[badge=success]{--avatar-badge-tone-source: var(--anta-seed-success)}a-avatar[badge=warning]{--avatar-badge-tone-source: var(--anta-seed-warning)}a-avatar[badge=critical]{--avatar-badge-tone-source: var(--anta-seed-critical)}@supports (color: attr(badge type(<color>),transparent)){a-avatar[badge]:not([badge=""],[badge=neutral],[badge=brand],[badge=info],[badge=success],[badge=warning],[badge=critical]){--avatar-badge-tone-source: attr(badge type(<color>), transparent)}}}

package/dist/elements/a-avatar.js

@@ -8,15 +8,12 @@ class AAvatarElement extends HTMLElementBase {
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
     this.#badge = document.createElement("span");
     this.#badge.className = "badge";
     this.#badge.setAttribute("part", "badge");
-    this.#badge.style.display = "none";
-    shadow.append(style, this.#badge);
+    shadow.append(this.#badge);
   }
-  /** Swap in the picture, keeping it between the style and the indicator. */
+  /** Swap in the picture, keeping it before the indicator. */
   #setPicture(node) {
     if (this.#picture) this.#picture.replaceWith(node);
     else this.#badge.before(node);
@@ -40,8 +37,6 @@ class AAvatarElement extends HTMLElementBase {
     }
   }
   #render() {
-    const badge = this.getAttribute("badge");
-    this.#badge.style.display = badge && badge !== "none" ? "" : "none";
     const name = this.getAttribute("name") ?? void 0;
     const src = this.getAttribute("src");
     if (src) {
@@ -64,27 +59,6 @@ class AAvatarElement extends HTMLElementBase {
     }
   }
 }
-const SHADOW_STYLE = `
-  :host { display: inline-block; position: relative; vertical-align: middle; }
-  svg, img {
-    display: block;
-    inline-size: 100%;
-    block-size: 100%;
-    border-radius: var(--avatar-radius);
-    background: var(--avatar-placeholder-bg);
-    mask-image: var(--avatar-badge-mask);
-  }
-  img { object-fit: cover; }
-  .badge {
-    position: absolute;
-    right: var(--avatar-badge-inset);
-    bottom: var(--avatar-badge-inset);
-    inline-size: var(--avatar-badge-size);
-    block-size: var(--avatar-badge-size);
-    border-radius: 50%;
-    background: var(--avatar-badge-color);
-  }
-`;
 function register_a_avatar() {
   if (typeof customElements === "undefined") return;
   if (!customElements.get("a-avatar")) {

package/dist/elements/a-banner.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding-block:6px;padding-inline:16px 48px;color:var(--banner-text);background:var(--banner-bg);border:0 solid var(--banner-border);border-radius:0;overflow:clip;overflow-clip-margin:3px;interpolate-size:allow-keywords;transition:opacity .16s ease,block-size .2s ease,padding-block .2s ease,border-block-width .2s ease,display .2s allow-discrete}a-banner[align=center]{justify-content:center;padding-inline:48px}a-banner[round]{border-radius:var(--banner-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--banner-round: attr(round type(<length>))}}a-banner [slot=close] a-button,a-banner a-button[slot=close]{height:100%;width:40px}a-banner-message{font-size:14px;line-height:20px;font-weight:475;text-align:start}a-banner[align=center] a-banner-message{text-align:center}a-banner[tone=brand]{--banner-bg: var(--bg-4-brand);--banner-border: var(--border-4-brand);--banner-text: var(--text-2-brand)}a-banner[tone=info]{--banner-bg: var(--bg-4-info);--banner-border: var(--border-4-info);--banner-text: var(--text-2-info)}a-banner[tone=success]{--banner-bg: var(--bg-4-success);--banner-border: var(--border-4-success);--banner-text: var(--text-2-success)}a-banner[tone=warning]{--banner-bg: var(--bg-4-warning);--banner-border: var(--border-4-warning);--banner-text: var(--text-2-warning)}a-banner[tone=critical]{--banner-bg: var(--bg-4-critical);--banner-border: var(--border-4-critical);--banner-text: var(--text-2-critical)}a-banner[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--banner-tone-source: currentColor;--banner-text: light-dark( oklch(from var(--banner-tone-source) .5 .125 h), oklch(from var(--banner-tone-source) .77 .11 h) );--banner-bg: light-dark( oklch(from var(--banner-tone-source) .955 .02 h), oklch(from var(--banner-tone-source) .185 .05 h) );--banner-border: light-dark( oklch(from var(--banner-tone-source) .9 .04 h), oklch(from var(--banner-tone-source) .26 .06 h) );@supports (color: attr(probe type(<color>),red)){--banner-tone-source: attr(tone type(<color>), currentColor)}}a-banner:not(:defined){opacity:0}a-banner[state=closed],a-banner[default-state=closed],a-banner:state(closed){display:none;block-size:0;min-block-size:0;padding-block:0;border-block-width:0;opacity:0}@media(forced-colors:active){a-banner{border-width:1px;border-color:CanvasText}}@media(prefers-reduced-motion:reduce){a-banner{transition:none}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);--banner-round: initial;--banner-tone-source: initial;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding-block:6px;padding-inline:16px 48px;color:var(--banner-text);background:var(--banner-bg);border:0 solid var(--banner-border);border-radius:0;overflow:clip;overflow-clip-margin:3px;interpolate-size:allow-keywords;transition:opacity .16s ease,block-size .2s ease,padding-block .2s ease,border-block-width .2s ease,display .2s allow-discrete}a-banner[align=center]{justify-content:center;padding-inline:48px}a-banner[round]{border-radius:var(--banner-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--banner-round: attr(round type(<length>))}}a-banner>a-banner-content{display:contents}a-banner>a-banner-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}a-banner>a-banner-actions:empty{display:none}a-banner>a-banner-message:empty,a-banner>:is(a-banner-message,a-banner-content,a-banner-actions,a-banner-close)[hidden]{display:none}a-banner>a-banner-close{position:absolute;inset-inline-end:0;inset-block:0;display:grid;place-items:center;opacity:.65;transition:opacity .15s ease}a-banner>a-banner-close:hover,a-banner>a-banner-close:focus-within{opacity:1}a-banner>a-banner-close>a-button{height:100%;width:40px}a-banner-message{font-size:14px;line-height:20px;font-weight:475;text-align:start}a-banner[align=center]>a-banner-message{text-align:center}a-banner[tone=brand]{--banner-bg: var(--bg-4-brand);--banner-border: var(--border-4-brand);--banner-text: var(--text-2-brand)}a-banner[tone=info]{--banner-bg: var(--bg-4-info);--banner-border: var(--border-4-info);--banner-text: var(--text-2-info)}a-banner[tone=success]{--banner-bg: var(--bg-4-success);--banner-border: var(--border-4-success);--banner-text: var(--text-2-success)}a-banner[tone=warning]{--banner-bg: var(--bg-4-warning);--banner-border: var(--border-4-warning);--banner-text: var(--text-2-warning)}a-banner[tone=critical]{--banner-bg: var(--bg-4-critical);--banner-border: var(--border-4-critical);--banner-text: var(--text-2-critical)}a-banner[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--banner-tone-source: currentColor;--banner-text: light-dark( oklch(from var(--banner-tone-source) .5 .125 h), oklch(from var(--banner-tone-source) .77 .11 h) );--banner-bg: light-dark( oklch(from var(--banner-tone-source) .955 .02 h), oklch(from var(--banner-tone-source) .185 .05 h) );--banner-border: light-dark( oklch(from var(--banner-tone-source) .9 .04 h), oklch(from var(--banner-tone-source) .26 .06 h) );@supports (color: attr(probe type(<color>),red)){--banner-tone-source: attr(tone type(<color>), currentColor)}}a-banner[state]:not([state=open]),a-banner:not([state])[default-state=closed]:not(:state(open)),a-banner:not([state]):state(closed){display:none;block-size:0;min-block-size:0;padding-block:0;border-block-width:0;opacity:0}@media(forced-colors:active){a-banner{border-width:1px;border-color:CanvasText}}@media(prefers-reduced-motion:reduce){a-banner,a-banner>a-banner-close{transition:none}}}

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

@@ -1,10 +1,13 @@
 import { HTMLElementBase } from '../anta_helpers';
 import './a-banner.css';
+/** Light-DOM notice with declarative regions and external styling. The element
+ * owns dismissal through ElementInternals, without changing
+ * application-owned markup, attributes, styles, or ARIA. */
 export declare class ABannerElement extends HTMLElementBase {
     #private;
     static observedAttributes: string[];
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(name: string): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
 export declare function register_a_banner(): void;

package/dist/elements/a-banner.js

@@ -1,145 +1,55 @@
 import { HTMLElementBase, installDismissTrigger, parseOpenState } from "../anta_helpers";
 import "./a-banner.css";
-const DISMISS_TRIGGER = "dismissrequest";
-const DISMISS_ATTR = "data-banner-dismiss";
-const SHADOW_STYLE = `
-  slot[name="message"], slot:not([name]) { display: contents; }
-
-  slot[name="actions"] {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex-shrink: 0;
-  }
-  slot[name="actions"][hidden] { display: none; }
-
-  slot[name="close"] {
-    position: absolute;
-    inset-inline-end: 0;
-    inset-block: 0;
-    display: grid;
-    place-items: center;
-    opacity: 0.65;
-    transition: opacity 150ms ease;
-  }
-  slot[name="close"]:hover,
-  slot[name="close"]:focus-within {
-    opacity: 1;
-  }
-`;
-const parseState = parseOpenState;
 class ABannerElement extends HTMLElementBase {
   static observedAttributes = ["state"];
-  // Visibility is held here as a custom state (`:state(open)` / `:state(closed)`),
-  // NOT a host attribute — declarative-DOM safe (no host mutation, no reconcile
-  // churn). This is the ONLY declarative-safe self-hide channel, so a runtime
-  // (uncontrolled) ✕ dismiss needs CustomStateSet + the CSS `:state()` selector
-  // (Chrome 90+, Safari 17.4+, Firefox 126+); below that the ✕ can't self-hide (an
-  // attribute fallback would violate the no-host-mutation rule). Controlled mode
-  // degrades everywhere — the `state="closed"` attribute the wrapper sets has the
-  // `[state="closed"]` CSS fallback, which needs no custom-state support.
   #internals;
-  // `default-state` seeds the uncontrolled intent ONCE, on the first connect; a
-  // re-parent (disconnect → reconnect) then keeps the applied state (which lives
-  // off-DOM in #internals and survives the move) instead of re-seeding `open` over a
-  // banner the user already dismissed. Mirrors a-dialog's #seeded.
   #seeded = false;
   constructor() {
     super();
-    this.#internals = typeof this.attachInternals === "function" ? this.attachInternals() : void 0;
-    const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
-    const messageSlot = document.createElement("slot");
-    messageSlot.name = "message";
-    messageSlot.setAttribute("part", "message");
-    const contentSlot = document.createElement("slot");
-    contentSlot.setAttribute("part", "content");
-    const actionsSlot = document.createElement("slot");
-    actionsSlot.name = "actions";
-    actionsSlot.setAttribute("part", "actions");
-    const syncActionsSlot = () => {
-      actionsSlot.hidden = !actionsSlot.assignedNodes({ flatten: true }).some((node) => {
-        if (node.nodeType === Node.TEXT_NODE) return node.textContent?.trim() !== "";
-        if (node.nodeType !== Node.ELEMENT_NODE) return false;
-        const element = node;
-        return !element.hasAttribute("data-anta-banner-actions-wrapper") || !element.matches(":empty");
-      });
-    };
-    actionsSlot.hidden = true;
-    actionsSlot.addEventListener("slotchange", syncActionsSlot);
-    const closeSlot = document.createElement("slot");
-    closeSlot.name = "close";
-    closeSlot.setAttribute("part", "close");
-    shadow.append(style, messageSlot, contentSlot, actionsSlot, closeSlot);
-    syncActionsSlot();
-    this.addEventListener(DISMISS_TRIGGER, (e) => {
-      e.stopPropagation();
+    this.#internals = this.attachInternals();
+    this.addEventListener("dismissrequest", (event) => {
+      const banner = event.composedPath().find((node) => node.nodeType === 1 && node.localName === "a-banner");
+      if (banner !== this) return;
+      event.stopPropagation();
       this.#requestDismiss();
     });
-    installDismissTrigger(this, DISMISS_ATTR, () => this.#requestDismiss());
+    installDismissTrigger(this, "data-banner-dismiss", () => this.#requestDismiss());
   }
-  /** Controlled mode: the `state` attribute is present and owns visibility. */
   get #controlled() {
     return this.hasAttribute("state");
   }
-  /** The currently *applied* state (read from the custom state — the source of
-   *  truth for what's painted). Reads open until the element has applied a state.
-   *  Both `?.` guard engines with ElementInternals but no CustomStateSet (`.states`
-   *  undefined), where reading it would otherwise throw inside the ✕ click. */
   get #current() {
-    return this.#internals?.states?.has("closed") ? "closed" : "open";
+    return this.#internals.states.has("closed") ? "closed" : "open";
   }
   connectedCallback() {
     if (this.#controlled) {
-      this.#applyState(parseState(this.getAttribute("state")));
+      this.#applyState(parseOpenState(this.getAttribute("state")));
     } else if (!this.#seeded) {
-      this.#applyState(this.#seedState());
-      this.#seeded = true;
+      this.#applyState(this.getAttribute("default-state") === "closed" ? "closed" : "open");
     }
+    this.#seeded = true;
   }
-  /** The uncontrolled initial state. A banner is shown by DEFAULT, so `open` unless
-   *  `default-state="closed"` is explicit. (Unlike a-dialog / a-expander, whose
-   *  absent default-state means closed — a banner is the inverse, so it can't share
-   *  `parseState` here. A hand-authored `<a-banner>` with no attributes shows.) */
-  #seedState() {
-    return this.getAttribute("default-state") === "closed" ? "closed" : "open";
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "state" && this.#controlled) this.#applyState(parseOpenState(newValue));
   }
-  attributeChangedCallback(name) {
-    if (name === "state" && this.#controlled) this.#applyState(parseState(this.getAttribute("state")));
-  }
-  /** Mirror the state to `:state(open)` / `:state(closed)` (idempotent). The
-   *  external sheet collapses the host on `:state(closed)`. Off-DOM only. */
   #applyState(state) {
-    if (!this.#internals) return;
-    try {
-      if (state === "closed") {
-        this.#internals?.states?.add("closed");
-        this.#internals?.states?.delete("open");
-      } else {
-        this.#internals?.states?.add("open");
-        this.#internals?.states?.delete("closed");
-      }
-    } catch {
-    }
+    this.#internals.states.delete(state === "closed" ? "open" : "closed");
+    this.#internals.states.add(state);
   }
-  /** Announce a requested dismiss (cancelable, before applying), then — uncontrolled
-   *  and un-vetoed — apply it. Controlled: never self-apply; the consumer answers
-   *  via `state`. See STATEFUL-COMPONENTS.md. */
   #requestDismiss() {
     if (this.#current === "closed") return;
-    const ok = this.dispatchEvent(
-      new CustomEvent("statechange", { cancelable: true, detail: { next: "closed", prev: "open" } })
-    );
-    if (this.#controlled) return;
-    if (ok) this.#applyState("closed");
+    const controlled = this.#controlled;
+    const accepted = this.dispatchEvent(new this.view.CustomEvent("statechange", {
+      cancelable: true,
+      detail: { next: "closed", prev: "open" }
+    }));
+    if (!controlled && !this.#controlled && accepted) this.#applyState("closed");
   }
 }
 function register_a_banner() {
   if (typeof customElements === "undefined") return;
-  if (!customElements.get("a-banner")) {
-    customElements.define("a-banner", ABannerElement);
-  }
+  if (!customElements.get("a-banner")) customElements.define("a-banner", ABannerElement);
 }
 register_a_banner();
 export {

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

@@ -0,0 +1 @@
+import '../components/Breadcrumbs.css';

package/dist/elements/a-breadcrumbs.js

@@ -0,0 +1 @@
+import "../components/Breadcrumbs.css";

package/dist/elements/a-button.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){--button-primary-fg: #ffffff;--bg-primary-disabled: light-dark(#ece9ec, #272329);--bg-secondary-disabled: light-dark(#f6f4f6, #1d1a1e);--fg-disabled-primary: light-dark(#afa9b1, #776e77);--fg-disabled: light-dark(#afa9b1, #635b65);--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: calc( var(--button-loading-stripe) + var(--button-loading-stripe-gap) );--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 5px;--_src: var(--anta-seed-neutral);--button-bg-primary-rest: light-dark(oklch(from var(--_src) .5 .02 h), oklch(from var(--_src) .4 .015 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .45 .02 h), oklch(from var(--_src) .44 .015 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .4 .02 h), oklch(from var(--_src) .48 .015 h));--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .008 h), oklch(from var(--_src) .86 .015 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .008 h), oklch(from var(--_src) .86 .015 h));--button-fg-tertiary-rest: var(--button-fg-secondary-rest);--button-fg-tertiary-hover: var(--button-fg-secondary-hover);--button-bg-tertiary-hover: light-dark(oklch(from var(--_src) .54 .03 h / .1), oklch(from var(--_src) .44 .01 h / .24));--button-bg-tertiary-active: light-dark(oklch(from var(--_src) .54 .03 h / .15), oklch(from var(--_src) .44 .01 h / .34));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .008 h / .85), oklch(from var(--_src) .86 .015 h / .85));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .008 h), oklch(from var(--_src) .9 .015 h));--button-bg-secondary-rest: light-dark(oklch(from var(--_src) .54 .03 h / .1), oklch(from var(--_src) .44 .01 h / .24));--button-bg-secondary-hover: light-dark(oklch(from var(--_src) .54 .03 h / .15), oklch(from var(--_src) .44 .01 h / .34));--button-bg-secondary-active: light-dark(oklch(from var(--_src) .54 .03 h / .2), oklch(from var(--_src) .44 .01 h / .44));--_fs: 15px;--_lh: 20px;--_pb: 1px;--_radius: 4px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round],button[data-anta][round],input[data-anta]:is([type=reset],[type=submit])[round]{--button-round: 999px;--_radius: var(--button-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--button-round: attr(round type(<length>), 999px)}}a-button[tone]:not([tone=""],[tone=neutral]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),button[data-anta][tone]:not([tone=""],[tone=neutral]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--button-bg-primary-rest: light-dark(oklch(from var(--_src) .51 .17 h), oklch(from var(--_src) .4 .16 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .44 .16 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .41 .17 h), oklch(from var(--_src) .48 .16 h));--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .86 .13 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .17 h), oklch(from var(--_src) .86 .13 h));--button-fg-tertiary-rest: var(--button-fg-secondary-rest);--button-fg-tertiary-hover: var(--button-fg-secondary-hover);--button-bg-tertiary-hover: light-dark(oklch(from var(--_src) .54 .17 h / .1), oklch(from var(--_src) .58 .16 h / .215));--button-bg-tertiary-active: light-dark(oklch(from var(--_src) .54 .17 h / .15), oklch(from var(--_src) .58 .16 h / .29));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .17 h / .85), oklch(from var(--_src) .86 .13 h / .85));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .17 h), oklch(from var(--_src) .9 .13 h));--button-bg-secondary-rest: light-dark(oklch(from var(--_src) .54 .17 h / .1), oklch(from var(--_src) .58 .16 h / .215));--button-bg-secondary-hover: light-dark(oklch(from var(--_src) .54 .17 h / .15), oklch(from var(--_src) .58 .16 h / .29));--button-bg-secondary-active: light-dark(oklch(from var(--_src) .54 .17 h / .2), oklch(from var(--_src) .58 .16 h / .34))}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--_src: var(--anta-seed-brand)}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--_src: var(--anta-seed-info)}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--_src: var(--anta-seed-success)}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--_src: var(--anta-seed-warning)}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--_src: var(--anta-seed-critical)}a-button[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),button[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_src: var(--button-tone-source, transparent);@supports (color: attr(probe type(<color>),red)){--_src: var(--button-tone-source, attr(tone type(<color>), transparent))}}button[data-anta],input[data-anta]:is([type=reset],[type=submit]){box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){user-select:none;display:inline-flex;align-items:center;gap:.5ch;cursor:pointer;&:has(>a-copy):not(:has(>a-icon)){cursor:copy}flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:var(--_radius);text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-stretch:normal;line-height:var(--_lh);letter-spacing:.025ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:100%;padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}&[underline][underline-on-hover]{text-decoration-color:transparent;&[selected]{text-decoration-color:transparent}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg)}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip):not(a-copy))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));width:calc(100% + var(--button-loading-x-period));pointer-events:none;clip-path:inset(0 0 0 var(--button-loading-x-period) round var(--_radius));background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:transform,clip-path;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}--button-fg: light-dark( oklch(from var(--button-fg-secondary-rest) calc(l - .05) c h), var(--button-fg-secondary-rest) );--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&:active{--button-fg: var(--button-fg-quaternary-rest)}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{box-shadow:inset 0 0 0 .5px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}@media(forced-colors:active){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--anta-forced-foreground: ButtonText;color:ButtonText;background-color:ButtonFace;border:1px solid ButtonText;box-shadow:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-button:is([priority=primary],[selected]){forced-color-adjust:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:0}@media(hover:hover)and (pointer:fine){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]:hover:not(:focus-visible){outline:1px solid ButtonText;outline-offset:0}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary]{--anta-forced-foreground: LinkText;color:LinkText;background-color:ButtonFace;border:0;text-decoration:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[selected]{--anta-forced-foreground: HighlightText;color:HighlightText;background-color:Highlight;border-color:Highlight}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[disabled]{--anta-forced-foreground: GrayText;color:GrayText;background-color:Canvas;border-color:GrayText;text-decoration-color:GrayText}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period));clip-path:inset(0 var(--button-loading-x-period) 0 0 round var(--_radius))}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){--button-primary-fg: #ffffff;--bg-primary-disabled: light-dark(#ece9ec, #272329);--bg-secondary-disabled: light-dark(#f6f4f6, #1d1a1e);--fg-disabled-primary: light-dark(#afa9b1, #776e77);--fg-disabled: light-dark(#afa9b1, #635b65);--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: calc( var(--button-loading-stripe) + var(--button-loading-stripe-gap) );--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 5px;--_src: var(--anta-seed-neutral);--button-bg-primary-rest: light-dark(oklch(from var(--_src) .5 .02 h), oklch(from var(--_src) .4 .015 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .45 .02 h), oklch(from var(--_src) .44 .015 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .4 .02 h), oklch(from var(--_src) .48 .015 h));--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .008 h), oklch(from var(--_src) .86 .015 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .008 h), oklch(from var(--_src) .86 .015 h));--button-fg-tertiary-rest: var(--button-fg-secondary-rest);--button-fg-tertiary-hover: var(--button-fg-secondary-hover);--button-bg-tertiary-hover: light-dark(oklch(from var(--_src) .54 .03 h / .1), oklch(from var(--_src) .44 .01 h / .24));--button-bg-tertiary-active: light-dark(oklch(from var(--_src) .54 .03 h / .15), oklch(from var(--_src) .44 .01 h / .34));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .008 h / .85), oklch(from var(--_src) .86 .015 h / .85));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .008 h), oklch(from var(--_src) .9 .015 h));--button-bg-secondary-rest: light-dark(oklch(from var(--_src) .54 .03 h / .1), oklch(from var(--_src) .44 .01 h / .24));--button-bg-secondary-hover: light-dark(oklch(from var(--_src) .54 .03 h / .15), oklch(from var(--_src) .44 .01 h / .34));--button-bg-secondary-active: light-dark(oklch(from var(--_src) .54 .03 h / .2), oklch(from var(--_src) .44 .01 h / .44));--_fs: 15px;--_lh: 20px;--_pb: 1px;--_radius: 4px;--_padding-x-text: round( calc(.8em - 2px) , 1px);--button-padding-x: var(--_padding-x-text);--button-padding-y: calc((8px - var(--_pb)) / 2);--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round],button[data-anta][round],input[data-anta]:is([type=reset],[type=submit])[round]{--button-round: 999px;--_radius: var(--button-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--button-round: attr(round type(<length>), 999px)}}a-button[tone]:not([tone=""],[tone=neutral]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),button[data-anta][tone]:not([tone=""],[tone=neutral]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--button-bg-primary-rest: light-dark(oklch(from var(--_src) .51 .17 h), oklch(from var(--_src) .4 .16 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .44 .16 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .41 .17 h), oklch(from var(--_src) .48 .16 h));--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .86 .13 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .17 h), oklch(from var(--_src) .86 .13 h));--button-fg-tertiary-rest: var(--button-fg-secondary-rest);--button-fg-tertiary-hover: var(--button-fg-secondary-hover);--button-bg-tertiary-hover: light-dark(oklch(from var(--_src) .54 .17 h / .1), oklch(from var(--_src) .58 .16 h / .215));--button-bg-tertiary-active: light-dark(oklch(from var(--_src) .54 .17 h / .15), oklch(from var(--_src) .58 .16 h / .29));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .17 h / .85), oklch(from var(--_src) .86 .13 h / .85));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .17 h), oklch(from var(--_src) .9 .13 h));--button-bg-secondary-rest: light-dark(oklch(from var(--_src) .54 .17 h / .1), oklch(from var(--_src) .58 .16 h / .215));--button-bg-secondary-hover: light-dark(oklch(from var(--_src) .54 .17 h / .15), oklch(from var(--_src) .58 .16 h / .29));--button-bg-secondary-active: light-dark(oklch(from var(--_src) .54 .17 h / .2), oklch(from var(--_src) .58 .16 h / .34))}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--_src: var(--anta-seed-brand)}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--_src: var(--anta-seed-info)}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--_src: var(--anta-seed-success)}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--_src: var(--anta-seed-warning)}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--_src: var(--anta-seed-critical)}a-button[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),button[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_src: var(--button-tone-source, transparent);@supports (color: attr(probe type(<color>),red)){--_src: var(--button-tone-source, attr(tone type(<color>), transparent))}}button[data-anta],input[data-anta]:is([type=reset],[type=submit]){box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){user-select:none;display:inline-flex;align-items:center;gap:.5ch;cursor:pointer;&:has(>a-copy):not(:has(>a-icon)){cursor:copy}flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:var(--_radius);text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-stretch:normal;line-height:var(--_lh);letter-spacing:.025ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:100%;padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}&[underline][underline-on-hover]{text-decoration-color:transparent;&[selected]{text-decoration-color:transparent}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg)}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;border-radius:min(var(--_radius),3px);min-height:0;&[loading]:before{clip-path:inset(0 0 0 var(--button-loading-x-period) round min(var(--_radius),3px));animation-name:btn-loading-slide-paddingless}}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip):not(a-copy))){--button-padding-y: calc(.5em - 1.5px) ;--button-padding-x: var(--button-padding-y);min-height:0;justify-content:center}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));width:calc(100% + var(--button-loading-x-period));pointer-events:none;clip-path:inset(0 0 0 var(--button-loading-x-period) round var(--_radius));background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:transform,clip-path;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}--button-fg: light-dark( oklch(from var(--button-fg-secondary-rest) calc(l - .05) c h), var(--button-fg-secondary-rest) );--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&:active{--button-fg: var(--button-fg-quaternary-rest)}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{box-shadow:inset 0 0 0 1px color-mix(in oklch,currentColor 50%,transparent);&[priority=quaternary][paddingless]{box-shadow:0 0 0 1px color-mix(in oklch,currentColor 50%,transparent)}}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}@media(forced-colors:active){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--anta-forced-foreground: ButtonText;color:ButtonText;background-color:ButtonFace;border:1px solid ButtonText;box-shadow:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-button:is([priority=primary],[selected]){forced-color-adjust:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:0}@media(hover:hover)and (pointer:fine){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]:hover:not(:focus-visible){outline:1px solid ButtonText;outline-offset:0}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary]{--anta-forced-foreground: LinkText;color:LinkText;background-color:ButtonFace;border:0;text-decoration:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[selected]{--anta-forced-foreground: HighlightText;color:HighlightText;background-color:Highlight;border-color:Highlight}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[disabled]{--anta-forced-foreground: GrayText;color:GrayText;background-color:Canvas;border-color:GrayText;text-decoration-color:GrayText}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period));clip-path:inset(0 var(--button-loading-x-period) 0 0 round var(--_radius))}}@keyframes btn-loading-slide-paddingless{to{transform:translate(var(--button-loading-x-period));clip-path:inset(0 var(--button-loading-x-period) 0 0 round min(var(--_radius),3px))}}

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

@@ -1,4 +1,4 @@
-import { HTMLElementBase, SYNC_POPUP_ARIA, type PopupAriaRelations } from "../anta_helpers";
+import { HTMLElementBase, SYNC_POPUP_ARIA, type PopupAriaRelations, SYNC_TEXT_TOGGLE, type TextToggleAria } from "../anta_helpers";
 import "./a-button.css";
 declare global {
     interface Document {
@@ -22,8 +22,9 @@ declare global {
  *   covers named and custom tones alike; secondary also carries a 1px
  *   hairline box-shadow in the current fg tone at 50% alpha, which the
  *   other priorities cancel in their own blocks. `[selected]` adds a 1px
- *   inset ring in `currentColor`, declared after the priority blocks so it
- *   survives their `box-shadow: none` cancels.
+ *   inset ring at 50% `currentColor`, declared after the priority blocks so it
+ *   survives their `box-shadow: none` cancels. Paddingless uses an outside ring
+ *   so the selection mark stays clear of the label.
  * - **Dark mode** re-tunes with heavier alphas (30/40% vs 10/15%) and flips
  *   neutral's anchor to a lilac — mixing dark gray into a dark bg yields no
  *   contrast.
@@ -43,10 +44,11 @@ declare global {
  * - **Layout gotchas:** `flex-shrink: 0` (shrinking + `overflow: hidden`
  *   would clip the label silently); the label uses a 17px line box + 1px
  *   bottom padding for optical vertical centering at an unchanged 18px box.
- * - **Icon-only** is purely structural — `:has(> a-icon:only-child)` gives
- *   square padding + a min-size pin (and centers when the host is sized
- *   bigger). A non-only edge icon trims ~2px off its side's padding
- *   (optical), `max(0px, …)` keeping paddingless at 0.
+ * - **Icon-only** is purely structural: one direct icon, with optional
+ *   tooltip or copy helpers, gets equal font-relative padding on both axes
+ *   and no size floor. The default icons produce 24/28/32px square boxes.
+ *   A non-only edge icon trims 2px off its side's padding; `max(0px, …)`
+ *   keeps paddingless at 0.
  * - **Underline** renders only on tertiary/quaternary: 0.5px hairline at 75%
  *   alpha at rest, 1px at full alpha on hover/`[selected]`, mirroring the
  *   prose-link rule in `<Text>`.
@@ -71,6 +73,7 @@ export declare class AButtonElement extends HTMLElementBase {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
+    [SYNC_TEXT_TOGGLE](state: TextToggleAria): void;
     [SYNC_POPUP_ARIA](relations: PopupAriaRelations): void;
 }
 export declare function register_a_button(): void;