@antadesign/anta 0.2.2 → 0.3.1

package/dist/elements/a-button.js

@@ -1,27 +1,31 @@
 import { HTMLElementBase } from "../anta_helpers";
 import "./a-button.css";
+function installDocumentHandlers(doc) {
+  if (!doc || doc.hasKeyListenerForAButton) return;
+  doc.addEventListener("keydown", handleKeyDown, true);
+  doc.addEventListener("click", handleClick, true);
+  doc.hasKeyListenerForAButton = true;
+}
 class AButtonElement extends HTMLElementBase {
   connectedCallback() {
-    if (!document.hasKeyListenerForAButton) {
-      document.addEventListener("keydown", handleKeyDown, true);
-      document.addEventListener("click", handleClick, true);
-      document.hasKeyListenerForAButton = true;
-    }
+    installDocumentHandlers(this.doc);
   }
 }
 function findForm(el) {
   const formId = el.getAttribute("form");
   if (formId) {
-    return document.getElementById(formId);
+    return el.ownerDocument.getElementById(formId);
   }
   return el.closest("form");
 }
 function handleKeyDown(e) {
   if (e.key !== "Enter" && e.key !== " ") return;
+  if (e.repeat) return;
   const el = e.target.closest(
     "a-button"
   );
   if (!el) return;
+  if (el.hasAttribute("disabled") || el.hasAttribute("loading")) return;
   e.preventDefault();
   el.click();
 }
@@ -30,6 +34,7 @@ function handleClick(e) {
     "a-button"
   );
   if (!el) return;
+  if (el.hasAttribute("disabled") || el.hasAttribute("loading")) return;
   const customEvent = el.getAttribute("data-custom-event");
   if (customEvent) {
     el.dispatchEvent(
@@ -40,11 +45,7 @@ function handleClick(e) {
   const form = findForm(el);
   if (!form) return;
   if (type === "submit") {
-    if (form.requestSubmit) {
-      form.requestSubmit();
-    } else {
-      form.submit();
-    }
+    form.requestSubmit();
     const formData = new FormData(form);
     form.dispatchEvent(
       new CustomEvent("submitdetailed", {
@@ -67,6 +68,7 @@ function handleClick(e) {
 }
 function register_a_button() {
   if (typeof customElements === "undefined") return;
+  installDocumentHandlers(typeof document !== "undefined" ? document : void 0);
   if (!customElements.get("a-button")) {
     customElements.define("a-button", AButtonElement);
   }

package/dist/elements/a-checkbox.css

@@ -0,0 +1 @@
+@layer anta{a-checkbox{--checkbox-gap: 8px;--checkbox-bg: var(--bg-1);--checkbox-fill: #635b65;--checkbox-fill-hover: #534c57;--checkbox-fill-active: #49424c;--checkbox-border-neutral: #d4ced4;--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: #c1b9c1;--checkbox-border-active: #9f99a1;--checkbox-icon: #ffffff;--checkbox-icon-disabled: #c1b9c1;--checkbox-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #44374b 15%, transparent);--checkbox-mask-size: 12px;--checkbox-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");--checkbox-mask-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");--checkbox-label-color: var(--text-2);--checkbox-label-color-disabled: var(--text-4);--checkbox-hint-color: var(--text-4);--checkbox-label-fs: 15px;--checkbox-label-lh: 20px;--checkbox-hint-fs: 13px;--checkbox-hint-lh: 16px;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;column-gap:var(--checkbox-gap);vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--checkbox-label-color);font-family:var(--sans-serif);font-size:var(--checkbox-label-fs);line-height:var(--checkbox-label-lh);font-feature-settings:"ss02","ss05";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:center;box-sizing:border-box;inline-size:16px;block-size:16px;border-radius:4px;background:var(--checkbox-bg);border:1.5px solid var(--checkbox-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:center;inline-size:16px;block-size:16px;background-color:transparent;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:var(--checkbox-mask-size);mask-size:var(--checkbox-mask-size)}@media(hover:hover)and (pointer:fine){&:not(:disabled):hover:before{border-color:var(--checkbox-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not(:disabled):hover:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-fill-hover);border-color:var(--checkbox-fill-hover)}}&:not(:disabled):active:before{border-color:var(--checkbox-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not(:disabled):active:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-fill-active);border-color:var(--checkbox-fill-active)}&:is(:state(checked),:state(indeterminate)){&:before{background:var(--checkbox-fill);border-color:var(--checkbox-fill)}&:after{background-color:var(--checkbox-icon)}}&:state(checked):after{-webkit-mask-image:var(--checkbox-mask-check);mask-image:var(--checkbox-mask-check)}&:state(indeterminate):after{-webkit-mask-image:var(--checkbox-mask-indeterminate);mask-image:var(--checkbox-mask-indeterminate)}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--checkbox-label-color-disabled);&:before{background:var(--checkbox-bg-disabled);border-color:var(--checkbox-border-disabled);transition:none}&:is(:state(checked),:state(indeterminate)):after{background-color:var(--checkbox-icon-disabled)}a-checkbox-hint{color:var(--checkbox-label-color-disabled)}}&[size=small]{--checkbox-gap: 6px;--checkbox-label-fs: 13px;--checkbox-label-lh: 16px;--checkbox-hint-fs: 12px;--checkbox-hint-lh: 14px;--checkbox-mask-size: 10px;&:before,&:after{inline-size:14px;block-size:14px}}&[size=large]{--checkbox-label-fs: 17px;--checkbox-label-lh: 24px;--checkbox-hint-fs: 15px;--checkbox-hint-lh: 19px;--checkbox-mask-size: 14px;&:before,&:after{inline-size:18px;block-size:18px}}}a-checkbox[priority=secondary]{&:not(:disabled):is(:state(checked),:state(indeterminate)){&:before{background:var(--checkbox-bg);border-color:var(--checkbox-fill)}&:after{background-color:var(--checkbox-fill)}}@media(hover:hover)and (pointer:fine){&:not(:disabled):hover:is(:state(checked),:state(indeterminate)){&:before{background:var(--checkbox-bg);border-color:var(--checkbox-fill-hover)}&:after{background-color:var(--checkbox-fill-hover)}}}&:not(:disabled):active:is(:state(checked),:state(indeterminate)){&:before{background:var(--checkbox-bg);border-color:var(--checkbox-fill-active)}&:after{background-color:var(--checkbox-fill-active)}}}.dark a-checkbox{--checkbox-mask-size: 13px}.dark a-checkbox[size=small]{--checkbox-mask-size: 11px}.dark a-checkbox[size=large]{--checkbox-mask-size: 15px}.dark a-checkbox[priority=secondary]{--checkbox-mask-size: 14px;&[size=small]{--checkbox-mask-size: 12px}&[size=large]{--checkbox-mask-size: 16px}&:not(:disabled):is(:state(checked),:state(indeterminate)){&:before{border-color:var(--checkbox-fill-active)}&:after{background-color:var(--checkbox-fill-active)}}@media(hover:hover)and (pointer:fine){&:not(:disabled):hover:is(:state(checked),:state(indeterminate)){&:before{border-color:oklch(from var(--checkbox-fill-active) calc(l + .07) c h)}&:after{background-color:oklch(from var(--checkbox-fill-active) calc(l + .07) c h)}}}&:not(:disabled):active:is(:state(checked),:state(indeterminate)){&:before{border-color:oklch(from var(--checkbox-fill-active) calc(l + .12) c h)}&:after{background-color:oklch(from var(--checkbox-fill-active) calc(l + .12) c h)}}}a-checkbox-label,a-checkbox-hint{display:block;grid-column:2;min-width:0}a-checkbox-hint{color:var(--checkbox-hint-color);font-size:var(--checkbox-hint-fs);line-height:var(--checkbox-hint-lh);margin-block-start:2px}a-checkbox[tone=brand]{--checkbox-label-color: var(--text-2-brand);--checkbox-hint-color: var(--text-4-brand);--checkbox-fill: #5f4bc3;--checkbox-fill-hover: #503cb4;--checkbox-fill-active: #483493}a-checkbox[tone=neutral]{--checkbox-fill: #635b65;--checkbox-fill-hover: #534c57;--checkbox-fill-active: #49424c}a-checkbox[tone=info]{--checkbox-label-color: var(--text-2-info);--checkbox-hint-color: var(--text-4-info);--checkbox-fill: #1f6eb2;--checkbox-fill-hover: #1a5b93;--checkbox-fill-active: #175082}a-checkbox[tone=success]{--checkbox-label-color: var(--text-2-success);--checkbox-hint-color: var(--text-4-success);--checkbox-fill: #2a7e43;--checkbox-fill-hover: #226737;--checkbox-fill-active: #1f5c31}a-checkbox[tone=warning]{--checkbox-label-color: var(--text-2-warning);--checkbox-hint-color: var(--text-4-warning);--checkbox-fill: #c37416;--checkbox-fill-hover: #ae6613;--checkbox-fill-active: #995200}a-checkbox[tone=critical]{--checkbox-label-color: var(--text-2-critical);--checkbox-hint-color: var(--text-4-critical);--checkbox-fill: #c9302c;--checkbox-fill-hover: #b02120;--checkbox-fill-active: #a01c1c}a-checkbox[tone]:not([tone=""],[tone=neutral]){--_checkbox-border-base: color-mix(in oklch, var(--checkbox-fill) 70%, var(--checkbox-border-neutral));--checkbox-border: oklch(from var(--_checkbox-border-base) calc(l + .17) c h);--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: var(--_checkbox-border-base);.dark &{--checkbox-border: var(--_checkbox-border-base);--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: oklch(from var(--_checkbox-border-base) calc(l + .17) c h)}}a-checkbox[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-tone-source: attr(tone type(<color>), transparent);--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4;--checkbox-fill: oklch(from var(--checkbox-tone-source) var(--_tone-l-rest) c h);--checkbox-fill-hover: oklch(from var(--checkbox-tone-source) var(--_tone-l-hover) c h);--checkbox-fill-active: oklch(from var(--checkbox-tone-source) var(--_tone-l-active) c h);--checkbox-label-color: oklch(from var(--checkbox-tone-source) .5 c h);--checkbox-hint-color: oklch(from var(--checkbox-tone-source) .5 c h / .7);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57;--checkbox-label-color: oklch(from var(--checkbox-tone-source) .8 c h);--checkbox-hint-color: oklch(from var(--checkbox-tone-source) .8 c h / .7)}}.dark a-checkbox{--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-fill: #534c57;--checkbox-fill-hover: #635b65;--checkbox-fill-active: #938d96;--checkbox-icon-disabled: #635b65;--checkbox-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 15%, transparent)}.dark a-checkbox[tone=brand]{--checkbox-fill: #503cb4;--checkbox-fill-hover: #5f4bc3;--checkbox-fill-active: #7460d7}.dark a-checkbox[tone=neutral]{--checkbox-fill: #534c57;--checkbox-fill-hover: #635b65;--checkbox-fill-active: #938d96}.dark a-checkbox[tone=info]{--checkbox-fill: #1a5b93;--checkbox-fill-hover: #1f6eb2;--checkbox-fill-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-fill: #226737;--checkbox-fill-hover: #2a7e43;--checkbox-fill-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-fill: #7f410b;--checkbox-fill-hover: #995200;--checkbox-fill-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-fill: #b02120;--checkbox-fill-hover: #c9302c;--checkbox-fill-active: #de4545}}

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

@@ -0,0 +1,52 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-checkbox.css";
+/**
+ * `<a-checkbox>` — interactive light-DOM checkbox. Visual state lives on
+ * `ElementInternals` (CSS keys off `:state(checked)` / `:state(indeterminate)`),
+ * never on host attributes. The element **publishes `aria-checked` itself**, via
+ * `ElementInternals` (off the DOM), so it stays live as the element self-toggles
+ * uncontrolled — the wrapper does NOT set `aria-checked`. Other ARIA (`role`,
+ * `aria-label`) is still the wrapper's / consumer's job.
+ *
+ * One ternary state — `checked` / `unchecked` / `indeterminate` — carried by two
+ * attributes: `state` is the **controlled** live value (the element reflects
+ * changes to it), `default-state` is the **uncontrolled** seed (read at connect /
+ * form-reset, and re-applied if it changes while the checkbox is still uncontrolled
+ * and un-toggled — matching a native `<input>`, whose `checked` attribute reflects
+ * until the control is "dirtied" by interaction; once toggled, later `default-state`
+ * changes are ignored). No "controlled" flag — the attribute name carries the intent
+ * (`controlled ≡ hasAttribute('state')`).
+ *
+ * Follows the shared state contract (see `STATEFUL-COMPONENTS.md`): on
+ * interaction the element fires a cancelable `statechange` *before* applying.
+ * Controlled callers re-assert `state` from their store; uncontrolled callers
+ * can veto a transition synchronously with `event.preventDefault()`. No
+ * optimistic self-paint.
+ */
+export declare class ACheckboxElement extends HTMLElementBase {
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    private internals?;
+    private currentState;
+    private seeded;
+    private dirty;
+    private alive;
+    /** Current checked state as a boolean (native-`<input>`-like). `indeterminate`
+     *  reads false here; check `.indeterminate` for the mixed state. */
+    get checked(): boolean;
+    /** Whether the checkbox is in the indeterminate ("mixed") state. */
+    get indeterminate(): boolean;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private get isDisabled();
+    private get isControlled();
+    private seed;
+    private emitChange;
+    private toggle;
+    private paint;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    formDisabledCallback(): void;
+}
+export declare function register_a_checkbox(): void;

package/dist/elements/a-checkbox.js

@@ -0,0 +1,130 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-checkbox.css";
+const parseState = (v) => v === "checked" || v === "indeterminate" ? v : "unchecked";
+class ACheckboxElement extends HTMLElementBase {
+  static formAssociated = true;
+  static observedAttributes = ["state", "default-state", "value"];
+  internals;
+  currentState = "unchecked";
+  seeded = false;
+  // Set once the user toggles an uncontrolled checkbox — the native "dirty checked
+  // flag". After it's set, a changed `default-state` no longer re-seeds the display.
+  dirty = false;
+  // True after the first connect. Gates the native `change` event so it never
+  // fires for the initial attribute seed (only for real, post-connect transitions).
+  alive = false;
+  /** Current checked state as a boolean (native-`<input>`-like). `indeterminate`
+   *  reads false here; check `.indeterminate` for the mixed state. */
+  get checked() {
+    return this.currentState === "checked";
+  }
+  /** Whether the checkbox is in the indeterminate ("mixed") state. */
+  get indeterminate() {
+    return this.currentState === "indeterminate";
+  }
+  constructor() {
+    super();
+    this.internals = this.attachInternals?.();
+    this.addEventListener("click", (e) => this.toggle(e));
+    this.addEventListener("keydown", (e) => {
+      if (e.key === " ") {
+        e.preventDefault();
+        this.click();
+      }
+    });
+  }
+  connectedCallback() {
+    if (!this.seeded) {
+      this.seed();
+      this.seeded = true;
+    }
+    this.paint();
+    this.alive = true;
+  }
+  attributeChangedCallback(name) {
+    if (name === "state") {
+      const next = parseState(this.getAttribute("state"));
+      const changed = next !== this.currentState;
+      this.currentState = next;
+      this.paint();
+      if (changed && this.alive) this.emitChange();
+      return;
+    }
+    if (name === "default-state" && !this.isControlled && !this.dirty) this.seed();
+    this.paint();
+  }
+  // Matches the host `disabled` attribute and an ancestor `<fieldset disabled>`.
+  get isDisabled() {
+    return this.matches(":disabled");
+  }
+  // Controlled mode: the `state` attribute is present and owns the live value.
+  get isControlled() {
+    return this.hasAttribute("state");
+  }
+  seed() {
+    this.currentState = parseState(
+      this.getAttribute("state") ?? this.getAttribute("default-state")
+    );
+  }
+  // Native `change`, fired *after* a value transition applies (user toggle or a
+  // controlled `state` update) — the post-apply counterpart to the cancelable,
+  // pre-apply `statechange`. Bubbles like a native checkbox; not composed (the
+  // element is light-DOM, so it reaches a wrapping form / listener directly).
+  emitChange() {
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  toggle(_e) {
+    if (this.isDisabled) return;
+    const prev = this.currentState;
+    const next = prev === "checked" ? "unchecked" : "checked";
+    const ok = this.dispatchEvent(
+      new CustomEvent("statechange", {
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+        detail: { next, prev }
+      })
+    );
+    if (this.isControlled) return;
+    if (ok) {
+      this.currentState = next;
+      this.dirty = true;
+      this.paint();
+      this.emitChange();
+    }
+  }
+  paint() {
+    const i = this.internals;
+    if (!i) return;
+    i.states.delete("checked");
+    i.states.delete("indeterminate");
+    if (this.currentState === "indeterminate") i.states.add("indeterminate");
+    else if (this.currentState === "checked") i.states.add("checked");
+    i.ariaChecked = this.currentState === "indeterminate" ? "mixed" : this.currentState === "checked" ? "true" : "false";
+    i.setFormValue?.(
+      this.currentState === "checked" ? this.getAttribute("value") ?? "on" : null,
+      this.currentState
+    );
+  }
+  formResetCallback() {
+    this.seed();
+    this.paint();
+  }
+  formStateRestoreCallback(state) {
+    this.currentState = parseState(state);
+    this.paint();
+  }
+  formDisabledCallback() {
+    this.paint();
+  }
+}
+function register_a_checkbox() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-checkbox"))
+    customElements.define("a-checkbox", ACheckboxElement);
+}
+register_a_checkbox();
+export {
+  ACheckboxElement,
+  register_a_checkbox
+};

package/dist/elements/a-expander.css

@@ -0,0 +1 @@
+@layer anta{a-expander{--expander-text: var(--text-2);--expander-text-hover: var(--text-1);--expander-bg-secondary: var(--bg-2);--expander-border-secondary: var(--border-5);--expander-bg-primary: var(--bg-4);--expander-border-primary: var(--border-4);--expander-bg: var(--expander-bg-secondary);--expander-border: var(--expander-border-secondary);--expander-bg-hover-lift: .01;--expander-bg-hover: oklch(from var(--expander-bg) calc(l + var(--expander-bg-hover-lift)) c h);--expander-gutter: 24px;--_expander-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3e%3c/svg%3e");display:block;width:100%;box-sizing:border-box;border:1px solid var(--expander-border);border-radius:4px;color:var(--expander-text);background:var(--expander-bg);transition:background-color .1s ease}a-expander:not(:defined) a-expander-details{display:none}a-expander:not(:defined)[state=open] a-expander-details,a-expander:not(:defined)[default-state=open] a-expander-details{display:block}a-expander:not(:defined) a-expander-summary{position:relative;padding:6px 4px 6px var(--expander-gutter)}a-expander:not(:defined) a-expander-summary:before{content:"";position:absolute;left:calc(var(--expander-gutter) - 16px - 2px);top:50%;width:16px;height:16px;transform:translateY(-50%);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / contain no-repeat;mask:var(--_expander-chevron) center / contain no-repeat;opacity:.6}a-expander-summary{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration-line:var(--_summary-underline, none);text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s ease}a-expander-details{display:block;padding:2px 4px 6px var(--expander-gutter);line-height:20px}a-expander[priority=primary]{--expander-bg: var(--expander-bg-primary);--expander-border: var(--expander-border-primary)}a-expander[priority=tertiary]{--expander-bg: transparent;--expander-border: transparent}a-expander:not([disabled]):not(:state(open)):hover{background:var(--expander-bg-hover)}a-expander:not([disabled]):not(:state(open)):active{background:var(--expander-bg)}a-expander[priority=tertiary][outdent]{--expander-gutter: 0px}a-expander[tone=brand]{--expander-text: var(--text-2-brand);--expander-text-hover: var(--text-1-brand);--expander-bg-secondary: var(--bg-2-brand);--expander-border-secondary: var(--border-5-brand);--expander-bg-primary: var(--bg-4-brand);--expander-border-primary: var(--border-4-brand)}a-expander[tone=info]{--expander-text: var(--text-2-info);--expander-text-hover: var(--text-1-info);--expander-bg-secondary: var(--bg-2-info);--expander-border-secondary: var(--border-5-info);--expander-bg-primary: var(--bg-4-info);--expander-border-primary: var(--border-4-info)}a-expander[tone=success]{--expander-text: var(--text-2-success);--expander-text-hover: var(--text-1-success);--expander-bg-secondary: var(--bg-2-success);--expander-border-secondary: var(--border-5-success);--expander-bg-primary: var(--bg-4-success);--expander-border-primary: var(--border-4-success)}a-expander[tone=warning]{--expander-text: var(--text-2-warning);--expander-text-hover: var(--text-1-warning);--expander-bg-secondary: var(--bg-2-warning);--expander-border-secondary: var(--border-5-warning);--expander-bg-primary: var(--bg-4-warning);--expander-border-primary: var(--border-4-warning)}a-expander[tone=critical]{--expander-text: var(--text-2-critical);--expander-text-hover: var(--text-1-critical);--expander-bg-secondary: var(--bg-2-critical);--expander-border-secondary: var(--border-5-critical);--expander-bg-primary: var(--bg-4-critical);--expander-border-primary: var(--border-4-critical)}a-expander[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--expander-tone-source: attr(tone type(<color>), currentColor);--expander-text: oklch(from var(--expander-tone-source) .41 .15 h);--expander-text-hover: oklch(from var(--expander-tone-source) .33 .15 h);--expander-bg-secondary: oklch(from var(--expander-tone-source) .99 .006 h);--expander-border-secondary: oklch(from var(--expander-tone-source) .93 .03 h);--expander-bg-primary: oklch(from var(--expander-tone-source) .955 .02 h);--expander-border-primary: oklch(from var(--expander-tone-source) .895 .045 h)}.dark a-expander[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--expander-text: oklch(from var(--expander-tone-source) .75 .11 h);--expander-text-hover: oklch(from var(--expander-tone-source) .82 .1 h);--expander-bg-secondary: oklch(from var(--expander-tone-source) .13 .02 h);--expander-border-secondary: oklch(from var(--expander-tone-source) .22 .05 h);--expander-bg-primary: oklch(from var(--expander-tone-source) .19 .04 h);--expander-border-primary: oklch(from var(--expander-tone-source) .26 .07 h)}a-expander[disabled],a-expander[disabled][tone]{--expander-text: #afa9b1}.dark a-expander[disabled],.dark a-expander[disabled][tone]{--expander-text: #635b65}}

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

@@ -0,0 +1,28 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-expander.css';
+export declare class AExpanderElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    private summary;
+    private region;
+    private internals?;
+    constructor();
+    /** Controlled mode: the `state` attribute is present and owns the state. */
+    private get controlled();
+    /** The currently *applied* state (read from the shadow, the source of truth
+     *  for what's painted). */
+    private get current();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private syncDisabled;
+    /** Apply state to the shadow internals (idempotent; reads the host, writes
+     *  only the shadow). `aria-expanded` is both the a11y signal and the CSS
+     *  state hook; `inert` keeps collapsed content out of the tab order and the
+     *  accessibility tree. */
+    private applyState;
+    /** Compute the requested next state, announce it (cancelable, *before*
+     *  applying), then — uncontrolled only, and only if not vetoed — apply it.
+     *  Controlled: never self-apply; the consumer answers via the `state`
+     *  attribute. See STATEFUL-COMPONENTS.md. */
+    private onSummaryClick;
+}
+export declare function register_a_expander(): void;

package/dist/elements/a-expander.js

@@ -0,0 +1,237 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-expander.css";
+const ANIM_MS = 200;
+const SUMMARY_TYPE_SCALE = {
+  "1": [28, 32],
+  "2": [24, 28],
+  "3": [20, 24],
+  "4": [17, 20],
+  "5": [15, 20],
+  "6": [13, 16]
+};
+const SUMMARY_FONT_WEIGHT = 584.62;
+const SUMMARY_LEVEL_RULES = Object.entries(SUMMARY_TYPE_SCALE).map(
+  ([level, [size, line]]) => `:host([level="${level}"]) button { font-size: ${size}px; line-height: ${line}px; }`
+).join("\n  ");
+const SHADOW_STYLE = `
+  :host { display: block; }
+
+  .header {
+    display: flex;
+    /* Stretch so the trigger button (and the actions row) fill the full host
+       height \u2014 the title's hit area is the whole header, not just the text. */
+    align-items: stretch;
+  }
+
+  slot[name="actions"] { display: none; }
+  .header.has-actions slot[name="actions"] {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    flex-shrink: 0;
+    margin-inline-start: 8px;
+    /* Inset from the right edge (the host has no padding of its own). */
+    margin-inline-end: 4px;
+  }
+
+  button {
+    appearance: none;
+    -webkit-appearance: none;
+    background: none;
+    border: none;
+    margin: 0;
+    /* The button is the full-bleed header: it spans the host's width (flex: 1)
+       and height (.header stretch). The title is inset by --expander-gutter
+       (the chevron lives absolutely inside that gutter, below \u2014 it never pushes
+       the title), so the title + the body share one inset value; 6px block
+       gives the header a touch more height. Restyle it edge-to-edge via
+       ::part(summary). */
+    position: relative;
+    padding: 6px 4px 6px var(--expander-gutter);
+    flex: 1;
+    min-width: 0;
+    font: inherit;
+    color: inherit;
+    text-align: left;
+
+    display: flex;
+    align-items: center;
+    gap: 0;
+    cursor: pointer;
+    user-select: none;
+    border-radius: 2px;
+    outline-offset: 4px;
+    font-size: ${SUMMARY_TYPE_SCALE["5"][0]}px;
+    line-height: ${SUMMARY_TYPE_SCALE["5"][1]}px;
+    font-weight: ${SUMMARY_FONT_WEIGHT};
+    letter-spacing: 0;
+  }
+
+  ${SUMMARY_LEVEL_RULES}
+
+  /* The chevron sits absolutely INSIDE the gutter \u2014 out of flow, so it never
+     pushes the title. Its right edge lands 2px before the gutter (left = gutter
+     - 16px - 2px), leaving a 2px gap before the title; at the default 24px
+     gutter the chevron box is [6px, 22px], and on outdent (gutter 0) it
+     auto-hangs at -18px in the negative gutter. One var drives the title inset,
+     the body inset, and the chevron position. */
+  button::before {
+    content: '';
+    position: absolute;
+    left: calc(var(--expander-gutter) - 16px - 2px);
+    top: 50%;
+    width: 16px;
+    height: 16px;
+    background-color: currentColor;
+    -webkit-mask-image: var(--_expander-chevron);
+            mask-image: var(--_expander-chevron);
+    -webkit-mask-size: contain;
+            mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+            mask-position: center;
+    opacity: 0.6;
+    /* translateY centers it; the open state adds rotate (same transform so the
+       transition animates only the rotation). */
+    transform: translateY(-50%);
+    transition: transform 150ms ease, opacity 150ms ease, background-color 150ms ease;
+  }
+  button:enabled:hover::before { opacity: 1; }
+  button[aria-expanded="true"]::before { transform: translateY(-50%) rotate(90deg); opacity: 1; }
+
+  button:enabled:hover { color: var(--expander-text-hover); }
+  :host([priority="tertiary"]) button:enabled:hover { --_summary-underline: underline; }
+  button:enabled:active { color: var(--expander-text); }
+  button:disabled { cursor: default; }
+  button:enabled:not([aria-expanded="true"]):active::before {
+    opacity: 0.6;
+  }
+
+  .region {
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  .header:has(button[aria-expanded="true"]) + .region { grid-template-rows: 1fr; }
+
+  /* Outdent flush correction: the host keeps its 1px (transparent) border for
+     cross-priority box stability, which insets the content-box by 1px. Pull the
+     header + region back by that 1px so the title and body land exactly on the
+     surrounding content (the chevron, absolutely positioned inside the header,
+     rides along). Logical start so it follows RTL. */
+  :host([priority="tertiary"][outdent]) .header,
+  :host([priority="tertiary"][outdent]) .region {
+    margin-inline-start: -1px;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .region { transition: grid-template-rows ${ANIM_MS}ms ease; }
+  }
+
+  [part="content"] { display: block; min-height: 0; overflow: clip; }
+  .header:has(button[aria-expanded="true"]) + .region [part="content"] {
+    overflow: visible;
+    transition: overflow 0s ${ANIM_MS}ms;
+    transition-behavior: allow-discrete;
+  }
+`;
+const parseState = (v) => v === "open" ? "open" : "closed";
+class AExpanderElement extends HTMLElementBase {
+  static observedAttributes = ["state", "disabled"];
+  summary;
+  region;
+  // ElementInternals exposes the open/closed state as a custom state
+  // (`:state(open)`) for consumer styling — e.g. rotating a chevron that lives
+  // in `actions`, or matching an open header to a design. It's NOT a host
+  // attribute (declarative-DOM safe: no host mutation, no reconciliation
+  // churn), just element-internal state the browser exposes for CSS matching.
+  // Guarded for engines without attachInternals / CustomStateSet (no-op there).
+  internals;
+  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;
+    this.summary = document.createElement("button");
+    this.summary.type = "button";
+    this.summary.setAttribute("aria-expanded", "false");
+    this.summary.setAttribute("part", "summary");
+    const titleSlot = document.createElement("slot");
+    titleSlot.name = "title";
+    this.summary.append(titleSlot);
+    this.summary.addEventListener("click", this.onSummaryClick);
+    const header = document.createElement("div");
+    header.className = "header";
+    const actionsSlot = document.createElement("slot");
+    actionsSlot.name = "actions";
+    actionsSlot.setAttribute("part", "actions");
+    actionsSlot.addEventListener("slotchange", () => {
+      header.classList.toggle("has-actions", actionsSlot.assignedElements().length > 0);
+    });
+    header.append(this.summary, actionsSlot);
+    this.region = document.createElement("div");
+    this.region.className = "region";
+    const content = document.createElement("slot");
+    content.setAttribute("part", "content");
+    this.region.append(content);
+    shadow.append(style, header, this.region);
+  }
+  /** Controlled mode: the `state` attribute is present and owns the state. */
+  get controlled() {
+    return this.hasAttribute("state");
+  }
+  /** The currently *applied* state (read from the shadow, the source of truth
+   *  for what's painted). */
+  get current() {
+    return this.summary.getAttribute("aria-expanded") === "true" ? "open" : "closed";
+  }
+  connectedCallback() {
+    this.syncDisabled();
+    this.applyState(parseState(this.getAttribute(this.controlled ? "state" : "default-state")));
+  }
+  attributeChangedCallback(name) {
+    if (name === "disabled") this.syncDisabled();
+    else if (name === "state" && this.controlled) this.applyState(parseState(this.getAttribute("state")));
+  }
+  syncDisabled() {
+    this.summary.disabled = this.hasAttribute("disabled");
+  }
+  /** Apply state to the shadow internals (idempotent; reads the host, writes
+   *  only the shadow). `aria-expanded` is both the a11y signal and the CSS
+   *  state hook; `inert` keeps collapsed content out of the tab order and the
+   *  accessibility tree. */
+  applyState(state) {
+    const open = state === "open";
+    this.summary.setAttribute("aria-expanded", open ? "true" : "false");
+    this.region.inert = !open;
+    try {
+      if (open) this.internals?.states.add("open");
+      else this.internals?.states.delete("open");
+    } catch {
+    }
+  }
+  /** Compute the requested next state, announce it (cancelable, *before*
+   *  applying), then — uncontrolled only, and only if not vetoed — apply it.
+   *  Controlled: never self-apply; the consumer answers via the `state`
+   *  attribute. See STATEFUL-COMPONENTS.md. */
+  onSummaryClick = () => {
+    const prev = this.current;
+    const next = prev === "open" ? "closed" : "open";
+    const ok = this.dispatchEvent(
+      new CustomEvent("statechange", { cancelable: true, detail: { next, prev } })
+    );
+    if (this.controlled) return;
+    if (ok) this.applyState(next);
+  };
+}
+function register_a_expander() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-expander")) {
+    customElements.define("a-expander", AExpanderElement);
+  }
+}
+register_a_expander();
+export {
+  AExpanderElement,
+  register_a_expander
+};

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

@@ -8,6 +8,20 @@ import './a-icon.shapes.css';
  * CSS: the base rule (`a-icon.css`) sets up the mask compositing, and
  * the per-shape rules (`a-icon.shapes.css`, generated) supply the
  * `--icon` URL. Color follows `currentColor`.
+ *
+ * Sizing notes (`a-icon.css` ships comment-free):
+ * - The 16px default lives in a plain `--icon-size: 16px` declaration,
+ *   never inside `attr()` — Safari has no typed `attr()` for `<length>`,
+ *   so a default on the attr() path can't resolve there and the
+ *   var-substituted `width` would collapse to 0 on an empty inline-block.
+ * - `<a-icon size="N">` maps to `--icon-size` via CSS Values 5 typed
+ *   `attr()` (Chrome 133+ / Safari 18.2+) behind an `@supports` guard.
+ *   Custom properties parse permissively, so without the guard the invalid
+ *   `attr()` would only fail later, at `width: var(--icon-size)`
+ *   substitution — collapsing the icon to 0×0 on unsupported engines
+ *   instead of falling back to the 16px base. The `<Icon size={N}>` JSX
+ *   wrapper sets `--icon-size` inline as a plain length and is the
+ *   cross-browser path.
  */
 export declare class AIconElement extends HTMLElementBase {
 }