@antadesign/anta 0.2.2 → 0.3.1

package/dist/elements/a-progress.css

@@ -1 +1 @@
-@layer anta{a-progress{--progress-bg: var(--bg-4);--progress-border-color: var(--border-4);--progress-indicator-bg: var(--bg-5);--progress-indicator-edge: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-border-color) 100% );--progress-text-color: var(--text-2);--progress-hint-color: var(--text-3);display:block;container-type:inline-size;padding:4px 8px;min-height:8px;background:var(--progress-bg);border:0px solid var(--progress-border-color);border-radius:0}a-progress[tone=info]{--progress-bg: var(--bg-4-info);--progress-border-color: var(--border-4-info);--progress-indicator-bg: var(--bg-5-info);--progress-text-color: var(--text-2-info);--progress-hint-color: var(--text-3-info)}a-progress-label{display:flex;align-items:flex-start;gap:.5ch;font-variant-numeric:tabular-nums;font-feature-settings:"ss02","ss05";letter-spacing:.03em;font-size:13px;line-height:16px}a-progress-number{flex-shrink:0;color:var(--progress-text-color)}a-progress-text{flex:1 1 auto;min-width:0;color:var(--progress-text-color)}a-progress-hint{flex-shrink:0;margin-left:auto;color:var(--progress-hint-color)}}
+@layer anta{a-progress{--progress-bg: var(--bg-4);--progress-border-color: var(--border-4);--progress-indicator-bg: var(--bg-5);--progress-indicator-edge: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-border-color) 100% );--progress-text-color: var(--text-2);--progress-hint-color: var(--text-3);display:block;container-type:inline-size;padding:4px 8px;min-height:8px;background:var(--progress-bg);border:0px solid var(--progress-border-color);border-radius:0}a-progress[tone=brand]{--progress-bg: var(--bg-4-brand);--progress-border-color: var(--border-4-brand);--progress-indicator-bg: var(--bg-5-brand);--progress-text-color: var(--text-2-brand);--progress-hint-color: var(--text-3-brand)}a-progress[tone=info]{--progress-bg: var(--bg-4-info);--progress-border-color: var(--border-4-info);--progress-indicator-bg: var(--bg-5-info);--progress-text-color: var(--text-2-info);--progress-hint-color: var(--text-3-info)}a-progress[tone=success]{--progress-bg: var(--bg-4-success);--progress-border-color: var(--border-4-success);--progress-indicator-bg: var(--bg-5-success);--progress-text-color: var(--text-2-success);--progress-hint-color: var(--text-3-success)}a-progress[tone=warning]{--progress-bg: var(--bg-4-warning);--progress-border-color: var(--border-4-warning);--progress-indicator-bg: var(--bg-5-warning);--progress-text-color: var(--text-2-warning);--progress-hint-color: var(--text-3-warning)}a-progress[tone=critical]{--progress-bg: var(--bg-4-critical);--progress-border-color: var(--border-4-critical);--progress-indicator-bg: var(--bg-5-critical);--progress-text-color: var(--text-2-critical);--progress-hint-color: var(--text-3-critical)}a-progress[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--progress-tone-source: attr(tone type(<color>), transparent);--progress-bg: oklch(from var(--progress-tone-source) .95 calc(c*.4) h);--progress-border-color: oklch(from var(--progress-tone-source) .85 calc(c*.6) h);--progress-indicator-bg: oklch(from var(--progress-tone-source) .6 c h);--progress-text-color: oklch(from var(--progress-tone-source) .45 c h);--progress-hint-color: oklch(from var(--progress-tone-source) .55 c h);.dark &{--progress-bg: oklch(from var(--progress-tone-source) .28 calc(c/2) h);--progress-border-color: oklch(from var(--progress-tone-source) .4 calc(c*.6) h);--progress-indicator-bg: oklch(from var(--progress-tone-source) .6 c h);--progress-text-color: oklch(from var(--progress-tone-source) .85 c h);--progress-hint-color: oklch(from var(--progress-tone-source) .75 c h)}}a-progress-label{display:flex;align-items:flex-start;gap:.5ch;font-variant-numeric:tabular-nums;font-feature-settings:"ss02","ss05";letter-spacing:.03em;font-size:13px;line-height:16px}a-progress-number{flex-shrink:0;color:var(--progress-text-color)}a-progress-text{flex:1 1 auto;min-width:0;color:var(--progress-text-color)}a-progress-hint{flex-shrink:0;margin-left:auto;color:var(--progress-hint-color)}}

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

@@ -1,5 +1,17 @@
 import { HTMLElementBase } from '../anta_helpers';
 import './a-progress.css';
+/**
+ * `<a-progress>` — progress bar element.
+ *
+ * Styling notes (`a-progress.css` ships comment-free):
+ * - `--progress-indicator-edge` is a right-edge fade from the indicator's
+ *   own bg to the border color, both opaque; tone variants re-tint it
+ *   automatically because both endpoint tokens are re-aliased per tone.
+ * - `border: 0px solid var(--progress-border-color)` is a per-component
+ *   reset (same spirit as Tailwind preflight): style and color are declared
+ *   at a known state so a consumer opts into a themed border by changing
+ *   only `border-width`.
+ */
 export declare class AProgressElement extends HTMLElementBase {
     static observedAttributes: string[];
     indicator: HTMLDivElement;

package/dist/elements/a-progress.js

@@ -39,6 +39,7 @@ class AProgressElement extends HTMLElementBase {
     `;
     this.indicator = document.createElement("div");
     this.indicator.className = "indicator";
+    this.indicator.setAttribute("part", "indicator");
     const slot = document.createElement("slot");
     shadow.append(style, this.indicator, slot);
   }

package/dist/elements/a-radio-group.css

@@ -0,0 +1 @@
+@layer anta{a-radio-group{--radio-group-hint: var(--text-3);display:flex;flex-direction:column}a-radio-list{display:flex;flex-direction:column;gap:8px}a-radio-group[orientation=horizontal] a-radio-list{flex-direction:row;flex-wrap:wrap;gap:16px}a-radio-list:not(:first-child){margin-block-start:10px}a-radio-group-label{display:block;color:var(--text-3);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-radio-group-hint{display:block;color:var(--radio-group-hint);font-size:14px;line-height:17px;margin-block-start:2px}a-radio-group[status=critical]{--radio-group-hint: var(--text-2-critical)}a-radio-group[status=warning]{--radio-group-hint: var(--text-2-warning)}a-radio-group[status=success]{--radio-group-hint: var(--text-2-success)}a-radio-group[status=info]{--radio-group-hint: var(--text-2-info)}a-radio-group[status=brand]{--radio-group-hint: var(--text-2-brand)}a-radio-group[size=small] a-radio:not([size]){--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}a-radio-group[size=large] a-radio:not([size]){--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 24px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}a-radio-group[disabled]{--radio-group-hint: var(--text-5)}a-radio-group[disabled] a-radio{cursor:not-allowed;pointer-events:none;color:var(--radio-label-color-disabled);--radio-hint-color: var(--radio-label-color-disabled);--radio-bg: var(--radio-bg-disabled);--radio-border: var(--radio-border-disabled);--radio-border-hover: var(--radio-border-disabled);--radio-border-active: var(--radio-border-disabled);--radio-fill: var(--radio-bg-disabled);--radio-fill-hover: var(--radio-bg-disabled);--radio-fill-active: var(--radio-bg-disabled);--radio-dot: var(--radio-dot-disabled)}}

package/dist/elements/a-radio-group.d.ts

@@ -0,0 +1,33 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-radio-group.css";
+export declare class ARadioGroupElement extends HTMLElementBase {
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    private internals?;
+    private uncontrolledValue;
+    private seeded;
+    private observer?;
+    private alive;
+    /** The selected option's value, or `null` when nothing is selected. */
+    get value(): string | null;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    private get currentValue();
+    private get isDisabled();
+    private get radios();
+    private sync;
+    private requestSelect;
+    private emitChange;
+    /** Dispatch the shared `statechange` event. `reason` lets a controller tell a
+     *  user pick (cancelable) apart from a form `reset` / bfcache `restore` (not).
+     *  `next` is `null` when nothing is selected (no default / reset-to-none). */
+    private emitStateChange;
+    private onClick;
+    private onKeyDown;
+}
+export declare function register_a_radio_group(): void;

package/dist/elements/a-radio-group.js

@@ -0,0 +1,160 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-radio-group.css";
+class ARadioGroupElement extends HTMLElementBase {
+  static formAssociated = true;
+  static observedAttributes = ["state", "disabled"];
+  internals;
+  uncontrolledValue = null;
+  seeded = false;
+  observer;
+  // True after the first connect — gates the native `change` event so it never
+  // fires for the initial seed (only for real, post-connect selection changes).
+  alive = false;
+  /** The selected option's value, or `null` when nothing is selected. */
+  get value() {
+    return this.currentValue;
+  }
+  constructor() {
+    super();
+    this.internals = this.attachInternals?.();
+  }
+  connectedCallback() {
+    if (!this.seeded) {
+      this.uncontrolledValue = this.getAttribute("default-state");
+      this.seeded = true;
+    }
+    this.addEventListener("click", this.onClick);
+    this.addEventListener("keydown", this.onKeyDown);
+    this.observer ??= new this.view.MutationObserver((records) => {
+      const touchedOptions = records.some(
+        (rec) => [...rec.addedNodes, ...rec.removedNodes].some(
+          (n) => n.nodeName === "A-RADIO" || n.querySelector?.("a-radio") != null
+        )
+      );
+      if (touchedOptions) this.sync();
+    });
+    this.observer.observe(this, { childList: true, subtree: true });
+    this.sync();
+    this.alive = true;
+  }
+  disconnectedCallback() {
+    this.observer?.disconnect();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.sync();
+    if (name === "state" && this.alive && newValue !== oldValue) this.emitChange();
+  }
+  formDisabledCallback(disabled) {
+    if (disabled) this.internals?.states.add("disabled");
+    else this.internals?.states.delete("disabled");
+    this.sync();
+  }
+  formResetCallback() {
+    const next = this.getAttribute("default-state");
+    this.emitStateChange(next, this.currentValue, "reset", false);
+    this.uncontrolledValue = next;
+    this.sync();
+  }
+  formStateRestoreCallback(state) {
+    this.emitStateChange(state, this.currentValue, "restore", false);
+    this.uncontrolledValue = state;
+    this.sync();
+  }
+  // Controlled when `state` is present; otherwise the in-memory uncontrolled value.
+  get currentValue() {
+    return this.hasAttribute("state") ? this.getAttribute("state") : this.uncontrolledValue;
+  }
+  get isDisabled() {
+    return this.hasAttribute("disabled") || (this.internals?.states.has("disabled") ?? false);
+  }
+  get radios() {
+    return Array.from(this.querySelectorAll("a-radio"));
+  }
+  sync = () => {
+    const value = this.currentValue;
+    const radios = this.radios;
+    const selectedEl = radios.find((r) => r.value === value && value != null) ?? null;
+    const submitted = selectedEl ? selectedEl.value : null;
+    this.internals?.setFormValue(submitted, submitted);
+    for (const r of radios) r.selected = r === selectedEl;
+    if (this.internals && "ariaActiveDescendantElement" in this.internals) {
+      this.internals.ariaActiveDescendantElement = selectedEl;
+    }
+  };
+  // The shared state algorithm: fire the cancelable `statechange` *before*
+  // applying. Controlled never self-applies; uncontrolled applies unless vetoed.
+  requestSelect(next) {
+    const prev = this.currentValue;
+    if (next === prev) return;
+    const ok = this.emitStateChange(next, prev, "user", true);
+    if (this.hasAttribute("state")) return;
+    if (ok) {
+      this.uncontrolledValue = next;
+      this.sync();
+      this.emitChange();
+    }
+  }
+  // Native `change`, fired *after* a selection applies (user pick or a controlled
+  // `state` update) — the post-apply counterpart to the cancelable, pre-apply
+  // `statechange`. Bubbles like a native radio group.
+  emitChange() {
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  /** Dispatch the shared `statechange` event. `reason` lets a controller tell a
+   *  user pick (cancelable) apart from a form `reset` / bfcache `restore` (not).
+   *  `next` is `null` when nothing is selected (no default / reset-to-none). */
+  emitStateChange(next, prev, reason, cancelable) {
+    return this.dispatchEvent(
+      new CustomEvent("statechange", {
+        cancelable,
+        bubbles: true,
+        composed: true,
+        detail: { next, prev, reason }
+      })
+    );
+  }
+  onClick = (e) => {
+    if (this.isDisabled) return;
+    const radio = e.target?.closest(
+      "a-radio"
+    );
+    if (!radio || radio.hasAttribute("disabled")) return;
+    radio.focus();
+    this.requestSelect(radio.value);
+  };
+  onKeyDown = (e) => {
+    if (this.isDisabled) return;
+    const enabled = this.radios.filter((r) => !r.hasAttribute("disabled"));
+    if (enabled.length === 0) return;
+    const focused = e.target?.closest(
+      "a-radio"
+    );
+    if (e.key === " " || e.key === "Enter") {
+      if (focused && enabled.includes(focused)) {
+        e.preventDefault();
+        this.requestSelect(focused.value);
+      }
+      return;
+    }
+    const forward = e.key === "ArrowDown" || e.key === "ArrowRight";
+    const back = e.key === "ArrowUp" || e.key === "ArrowLeft";
+    if (!forward && !back) return;
+    e.preventDefault();
+    let i = focused ? enabled.indexOf(focused) : -1;
+    if (i === -1) i = enabled.findIndex((r) => r.value === this.currentValue);
+    if (i === -1) i = 0;
+    const next = enabled[(i + (forward ? 1 : -1) + enabled.length) % enabled.length];
+    next.focus();
+    this.requestSelect(next.value);
+  };
+}
+function register_a_radio_group() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-radio-group"))
+    customElements.define("a-radio-group", ARadioGroupElement);
+}
+register_a_radio_group();
+export {
+  ARadioGroupElement,
+  register_a_radio_group
+};

package/dist/elements/a-radio.css

@@ -0,0 +1 @@
+@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-fill: #635b65;--radio-fill-hover: #534c57;--radio-fill-active: #49424c;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-dot: #ffffff;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 15%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-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:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:center;justify-self:center;inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-fill-hover);border-color:var(--radio-fill-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-fill-active);border-color:var(--radio-fill-active)}&:state(selected){&:before{background:var(--radio-fill);border-color:var(--radio-fill)}&:after{transform:scale(1)}}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 24px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[priority=secondary],a-radio-group[priority=secondary] a-radio:not([priority]){&:not([disabled]):state(selected){&:before{background:var(--radio-bg);border-color:var(--radio-fill)}&:after{background:var(--radio-fill)}}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:state(selected){&:before{background:var(--radio-bg);border-color:var(--radio-fill-hover)}&:after{background:var(--radio-fill-hover)}}}&:not([disabled]):active:state(selected){&:before{background:var(--radio-bg);border-color:var(--radio-fill-active)}&:after{background:var(--radio-fill-active)}}}.dark a-radio[priority=secondary],.dark a-radio-group[priority=secondary] a-radio:not([priority]){&:not([disabled]):state(selected){&:before{border-color:var(--radio-fill-active)}&:after{background:var(--radio-fill-active)}}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:state(selected){&:before{border-color:oklch(from var(--radio-fill-active) calc(l + .07) c h)}&:after{background:oklch(from var(--radio-fill-active) calc(l + .07) c h)}}}&:not([disabled]):active:state(selected){&:before{border-color:oklch(from var(--radio-fill-active) calc(l + .12) c h)}&:after{background:oklch(from var(--radio-fill-active) calc(l + .12) c h)}}}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-label-color: var(--text-2-brand);--radio-hint-color: var(--text-3-brand);--radio-fill: #5f4bc3;--radio-fill-hover: #503cb4;--radio-fill-active: #483493}a-radio[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone]){--radio-fill: #635b65;--radio-fill-hover: #534c57;--radio-fill-active: #49424c}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-label-color: var(--text-2-info);--radio-hint-color: var(--text-3-info);--radio-fill: #1f6eb2;--radio-fill-hover: #1a5b93;--radio-fill-active: #175082}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-label-color: var(--text-2-success);--radio-hint-color: var(--text-3-success);--radio-fill: #2a7e43;--radio-fill-hover: #226737;--radio-fill-active: #1f5c31}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-label-color: var(--text-2-warning);--radio-hint-color: var(--text-3-warning);--radio-fill: #c37416;--radio-fill-hover: #ae6613;--radio-fill-active: #995200}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-label-color: var(--text-2-critical);--radio-hint-color: var(--text-3-critical);--radio-fill: #c9302c;--radio-fill-hover: #b02120;--radio-fill-active: #a01c1c}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]){--_radio-border-base: color-mix(in oklch, var(--radio-fill) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base);.dark &{--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-fill: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-fill-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-fill-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);--radio-label-color: oklch(from var(--radio-tone-source) .5 c h);--radio-hint-color: oklch(from var(--radio-tone-source) .5 c h / .8);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57;--radio-label-color: oklch(from var(--radio-tone-source) .8 c h);--radio-hint-color: oklch(from var(--radio-tone-source) .8 c h / .8)}}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px #000}--radio-border-neutral: #49424c;--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-fill: #534c57;--radio-fill-hover: #635b65;--radio-fill-active: #938d96;--radio-dot-disabled: #635b65;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 15%, transparent)}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-fill: #503cb4;--radio-fill-hover: #5f4bc3;--radio-fill-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]){--radio-fill: #534c57;--radio-fill-hover: #635b65;--radio-fill-active: #938d96}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-fill: #1a5b93;--radio-fill-hover: #1f6eb2;--radio-fill-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-fill: #226737;--radio-fill-hover: #2a7e43;--radio-fill-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-fill: #7f410b;--radio-fill-hover: #995200;--radio-fill-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-fill: #b02120;--radio-fill-hover: #c9302c;--radio-fill-active: #de4545}}

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

@@ -0,0 +1,14 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-radio.css";
+export declare class ARadioElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    private internals?;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get selected(): boolean;
+    set selected(on: boolean);
+    get value(): string;
+    private applyState;
+}
+export declare function register_a_radio(): void;

package/dist/elements/a-radio.js

@@ -0,0 +1,46 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-radio.css";
+class ARadioElement extends HTMLElementBase {
+  static observedAttributes = ["selected"];
+  internals;
+  constructor() {
+    super();
+    this.internals = this.attachInternals?.();
+  }
+  connectedCallback() {
+    this.applyState(this.hasAttribute("selected"));
+  }
+  attributeChangedCallback(name) {
+    if (name === "selected") this.applyState(this.hasAttribute("selected"));
+  }
+  get selected() {
+    return this.internals?.states.has("selected") ?? this.hasAttribute("selected");
+  }
+  set selected(on) {
+    this.applyState(!!on);
+  }
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  // `selected` is the single source: it drives the visual `:state(selected)` and
+  // publishes `aria-checked` through ElementInternals (the accessibility tree,
+  // not a DOM attribute). The group only sets `r.selected`; the radio owns how it
+  // reflects that. role="radio" comes from the wrapper, which gives ariaChecked
+  // something to attach to.
+  applyState(on) {
+    if (!this.internals) return;
+    if (on) this.internals.states.add("selected");
+    else this.internals.states.delete("selected");
+    this.internals.ariaChecked = on ? "true" : "false";
+  }
+}
+function register_a_radio() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-radio"))
+    customElements.define("a-radio", ARadioElement);
+}
+register_a_radio();
+export {
+  ARadioElement,
+  register_a_radio
+};

package/dist/elements/a-tag.css

@@ -1 +1 @@
-@layer anta{a-tag{--tag-text: var(--text-3);--tag-bg: var(--bg-4);--tag-border: color-mix(in oklch, var(--tag-text) 9%, transparent);--tag-separator: color-mix(in oklch, var(--tag-text) 30%, transparent);--tag-padding-block: 1.5px;--tag-padding-inline: 6.5px;--tag-icon-size: 13px;--tag-label-weight: 600;--tag-gap: .6ch;display:inline-flex;align-items:center;gap:var(--tag-gap);box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;white-space:nowrap;-webkit-user-drag:none;color:var(--tag-text);background:var(--tag-bg);border:.5px solid var(--tag-border);border-radius:22px;padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);font-family:var(--sans-serif);font-weight:450;font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.08ch;font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt"}a-tag a-icon{--icon-size: var(--tag-icon-size);flex:none}a-tag a-tag-label,a-tag a-tag-value{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a-tag a-tag-value{font-weight:450}a-tag a-tag-label{font-weight:var(--tag-label-weight)}a-tag:has(>a-icon:first-child){padding-inline-start:max(0px,var(--tag-padding-inline) - 2px)}a-tag:has(>a-icon:last-child){padding-inline-end:max(0px,var(--tag-padding-inline) - 2px)}a-tag>:not(a-icon,a-tag-label,a-tag-value)~:not(a-icon,a-tag-label,a-tag-value){padding-left:var(--tag-gap);border-left:.5px solid var(--tag-separator)}a-tag[tone=brand]{--tag-text: var(--text-2-brand);--tag-bg: var(--bg-4-brand)}a-tag[tone=info]{--tag-text: var(--text-2-info);--tag-bg: var(--bg-4-info)}a-tag[tone=success]{--tag-text: var(--text-2-success);--tag-bg: var(--bg-4-success)}a-tag[tone=warning]{--tag-text: var(--text-2-warning);--tag-bg: var(--bg-4-warning)}a-tag[tone=critical]{--tag-text: var(--text-2-critical);--tag-bg: var(--bg-4-critical)}a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-tone-source: attr(tone type(<color>), currentColor);--_tag-text-l: .46;--_tag-text-c: .17;--_tag-bg-l: .96;--_tag-bg-c: .04;--tag-text: oklch(from var(--tag-tone-source) var(--_tag-text-l) var(--_tag-text-c) h);--tag-bg: oklch(from var(--tag-tone-source) var(--_tag-bg-l) var(--_tag-bg-c) h)}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-text-l: .8;--_tag-text-c: .11;--_tag-bg-l: .21;--_tag-bg-c: .05}a-tag[size=small]{--tag-padding-block: .5px;--tag-padding-inline: 4.5px;--tag-icon-size: 11px;font-size:10px;line-height:14px}a-tag[size=large]{--tag-padding-block: 2.5px;--tag-padding-inline: 8.5px;--tag-icon-size: 15px;font-size:12px;line-height:18px}a-tag[nocaps]{font-size:12px;text-transform:none;letter-spacing:.02ch;font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt"}a-tag[size=large][nocaps]{font-size:13px}}
+@layer anta{a-tag{--tag-text: var(--text-3);--tag-tint: #44374b;--tag-fill: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%;--tag-bg: color-mix(in oklch, var(--tag-tint) var(--_tag-bg-alpha), transparent);--tag-border: color-mix(in oklch, var(--tag-tint) var(--_tag-border-alpha), transparent);--tag-separator: color-mix(in oklch, var(--tag-text) 30%, transparent);--tag-padding-block: 1.5px;--tag-padding-inline: 6.5px;--tag-icon-size: 13px;--tag-label-weight: 600;--tag-gap: .6ch;display:inline-flex;align-items:center;gap:var(--tag-gap);box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;white-space:nowrap;-webkit-user-drag:none;color:var(--tag-text);background:var(--tag-bg);border:.5px solid var(--tag-border);border-radius:22px;padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);font-family:var(--sans-serif);font-weight:450;font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.08ch;font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt"}a-tag a-icon{--icon-size: var(--tag-icon-size);flex:none}a-tag a-tag-label,a-tag a-tag-value{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a-tag a-tag-value{font-weight:450}a-tag a-tag-label{font-weight:var(--tag-label-weight)}a-tag:has(>a-icon:first-child){padding-inline-start:max(0px,var(--tag-padding-inline) - 2px)}a-tag:has(>a-icon:last-child){padding-inline-end:max(0px,var(--tag-padding-inline) - 2px)}a-tag>:not(a-icon,a-tag-label,a-tag-value)~:not(a-icon,a-tag-label,a-tag-value){padding-left:var(--tag-gap);border-left:.5px solid var(--tag-separator)}a-tag[tone=brand]{--tag-text: var(--text-3-brand);--tag-tint: #7460d7;--tag-fill: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-text: var(--text-3-info);--tag-tint: #2686d9;--tag-fill: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-text: var(--text-3-success);--tag-tint: #329550;--tag-fill: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-text: var(--text-3-warning);--tag-tint: #c37416;--tag-fill: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-text: var(--text-3-critical);--tag-tint: #de4545;--tag-fill: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-fill: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-fill: #5f4bc3}.dark a-tag[tone=info]{--tag-fill: #1f6eb2}.dark a-tag[tone=success]{--tag-fill: #2a7e43}.dark a-tag[tone=warning]{--tag-fill: #995200}.dark a-tag[tone=critical]{--tag-fill: #c9302c}a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-tone-source: attr(tone type(<color>), currentColor);--_tag-bg-alpha: 10%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 20%;--_tag-tint-l: .54;--_tag-tint-c: .16;--tag-tint: oklch(from var(--tag-tone-source) var(--_tag-tint-l) var(--_tag-tint-c) h);--_tag-fill-l: .5;--tag-fill: oklch(from var(--tag-tone-source) var(--_tag-fill-l) var(--_tag-tint-c) h);--_tag-text-l: .4;--_tag-text-c: .15;--tag-text: color-mix(in oklch, oklch(from var(--tag-tone-source) var(--_tag-text-l) var(--_tag-text-c) h) 80%, transparent);--tag-edge: oklch(from var(--tag-tone-source) var(--_tag-text-l) var(--_tag-text-c) h)}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%;--_tag-tint-l: .58;--_tag-fill-l: .45;--_tag-text-l: .75;--_tag-text-c: .11}a-tag[priority=primary]{--tag-bg: var(--tag-fill);--tag-text: #fff}a-tag[priority=primary][tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-text: #fff}a-tag[priority=tertiary]{--tag-bg: transparent;--tag-border: color-mix(in oklch, var(--tag-edge) var(--_tag-edge-alpha), transparent)}a-tag[size=small]{--tag-padding-block: .5px;--tag-padding-inline: 4.5px;--tag-icon-size: 11px;font-size:10px;line-height:14px}a-tag[size=large]{--tag-padding-block: 2.5px;--tag-padding-inline: 8.5px;--tag-icon-size: 15px;font-size:12px;line-height:18px}a-tag[nocaps]{font-size:12px;text-transform:none;letter-spacing:.02ch;font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt"}a-tag[size=large][nocaps]{font-size:13px}}

package/dist/elements/a-text.css

@@ -1 +1 @@
-@layer anta{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;color:var(--text-color);font-size:15px;line-height:20px;font-feature-settings:"ss02","ss05"}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[priority=quinary]{--text-color: var(--text-5);--text-link-color: currentColor;--text-link-hover: var(--text-4)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=brand][priority=quinary]{--text-color: var(--text-5-brand);--text-link-hover: var(--text-4-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=success][priority=quinary]{--text-color: var(--text-5-success);--text-link-hover: var(--text-4-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=critical][priority=quinary]{--text-color: var(--text-5-critical);--text-link-hover: var(--text-4-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=warning][priority=quinary]{--text-color: var(--text-5-warning);--text-link-hover: var(--text-4-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone=info][priority=quinary]{--text-color: var(--text-5-info);--text-link-hover: var(--text-4-info)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}
+@layer anta{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty;font-feature-settings:"ss02","ss05"}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[priority=quinary]{--text-color: var(--text-5);--text-link-color: currentColor;--text-link-hover: var(--text-4)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=brand][priority=quinary]{--text-color: var(--text-5-brand);--text-link-hover: var(--text-4-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=success][priority=quinary]{--text-color: var(--text-5-success);--text-link-hover: var(--text-4-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=critical][priority=quinary]{--text-color: var(--text-5-critical);--text-link-hover: var(--text-4-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=warning][priority=quinary]{--text-color: var(--text-5-warning);--text-link-hover: var(--text-4-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone=info][priority=quinary]{--text-color: var(--text-5-info);--text-link-hover: var(--text-4-info)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}

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

@@ -1,11 +1,50 @@
 import { HTMLElementBase } from '../anta_helpers';
 import './a-text.css';
+/**
+ * `<a-text>` — body text element with truncation / expansion.
+ *
+ * Styling notes (`a-text.css` ships comment-free):
+ * - `a-text[truncate] { min-width: 0 }` is the one external requirement of
+ *   the shadow clamp: the host must be allowed to shrink inside flex/grid
+ *   parents so the inner clamp can actually clip content.
+ * - The default (no `priority`) is the SECONDARY level — body text reads at
+ *   `--text-2` on the base rule; `priority="primary"` opts into the
+ *   strongest `--text-1`.
+ * - Priority/tone link colors: levels 1–2 keep the brand link color; levels
+ *   3–5 mute the link to `currentColor` and step the hover up one level
+ *   (3→2, 4→3, 5→4). Tinted variants do the same within their
+ *   `--text-{N}-{tone}` ramp (level 1 has nothing above it — hover keeps the
+ *   color and only the underline alpha changes).
+ * - The `a-text a` rules layer on anta's global `a` defaults from
+ *   `reset.css`, overriding only color and the one-step-up hover color
+ *   (underline thickness/offset/alpha are inherited); the hover repeats the
+ *   underline color so it tracks the priority color. Hover is gated to
+ *   `(hover: hover) and (pointer: fine)` to avoid sticky hover after a tap.
+ */
 export declare class ATextElement extends HTMLElementBase {
     static observedAttributes: string[];
     private slotEl;
-    private expandBtn;
+    /** The expand/collapse chevron — built lazily, only while the element is
+     *  expandable (a plain `<a-text>` never creates a button or a listener).
+     *  Removed when `expandable` is dropped, and when a one-way expand completes. */
+    private expandBtn?;
+    /** Expanded state lives here, on the element — a stateless wrapper can't hold
+     *  it and the app DOM may be reconciled off the UI thread. */
+    private expanded;
     constructor();
-    attributeChangedCallback(): void;
-    private handleExpand;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private get isExpandable();
+    private get isCollapsible();
+    /** Create or remove the chevron button to match `expandable`, then refresh
+     *  its label/visibility — the single place the button's lifecycle lives. */
+    private syncExpandButton;
+    private handleToggle;
+    private setExpanded;
+    /** Reflect the current state onto the button: label + `aria-expanded` + the
+     *  `.expanded` class (CSS keeps it visible and rotates the chevron up). A
+     *  one-way expand (no `collapsible`) removes the button once expanded — there
+     *  is nothing to collapse back to. */
+    private refreshButton;
 }
 export declare function register_a_text(): void;

package/dist/elements/a-text.js

@@ -9,9 +9,6 @@ const SHADOW_STYLE = `
     display: inline-block;
   }
 
-  /* Default: slot disappears from layout so slotted nodes flow as
-     direct children of the host. Truncation rules below give the slot
-     a real display so it becomes the wrapper that holds the clamp. */
   slot {
     display: contents;
   }
@@ -23,27 +20,22 @@ const SHADOW_STYLE = `
     overflow: hidden;
   }
 
-  /* Expandable \u2014 vertical fade for multi-line. */
   :host([truncate][expandable]) slot:not(.expanded) {
     -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 2em), transparent 97%);
             mask-image: linear-gradient(to bottom, black calc(100% - 2em), transparent 97%);
   }
 
-  /* Expandable \u2014 horizontal right-edge fade for single-line. */
   :host([truncate="1"][expandable]) slot:not(.expanded) {
     -webkit-mask-image: linear-gradient(to right, black calc(100% - 7ch), transparent 97%);
             mask-image: linear-gradient(to right, black calc(100% - 7ch), transparent 97%);
   }
 
-  /* Expanded \u2014 drop truncation entirely. */
   :host([truncate]) slot.expanded {
     display: block;
     -webkit-line-clamp: unset;
     overflow: visible;
   }
 
-  /* Expand button. The whole button is the click target; the chevron
-     icon is positioned absolutely in the button's bottom-right corner. */
   .expand-btn {
     appearance: none;
     background: transparent;
@@ -78,10 +70,10 @@ const SHADOW_STYLE = `
             mask-repeat: no-repeat;
     -webkit-mask-size: contain;
             mask-size: contain;
+    transition: transform 150ms ease-out;
   }
 
-  /* Multi-line \u2014 full-width strip pinned to the bottom of the host. */
-  :host([truncate][expandable]) .expand-btn:not(.hidden) {
+  :host([truncate][expandable]) .expand-btn {
     display: block;
     left: 0;
     right: 0;
@@ -89,48 +81,96 @@ const SHADOW_STYLE = `
     height: 1.5em;
   }
 
-  /* Single-line \u2014 narrow region pinned to the right side. */
-  :host([truncate="1"][expandable]) .expand-btn:not(.hidden) {
+  :host([truncate="1"][expandable]) .expand-btn {
     left: auto;
     top: 0;
     bottom: 0;
     width: 3em;
   }
 
-  :host([truncate][expandable]:hover) .expand-btn:not(.hidden),
-  :host([truncate][expandable]:focus-within) .expand-btn:not(.hidden) {
+  :host([truncate][expandable]:hover) .expand-btn,
+  :host([truncate][expandable]:focus-within) .expand-btn,
+  .expand-btn.expanded {
     opacity: 1;
   }
+
+  .expand-btn.expanded::before {
+    transform: rotate(180deg);
+  }
 `;
 class ATextElement extends HTMLElementBase {
-  static observedAttributes = ["expandable", "truncate"];
+  static observedAttributes = ["expandable", "truncate", "collapsible"];
   slotEl;
+  /** The expand/collapse chevron — built lazily, only while the element is
+   *  expandable (a plain `<a-text>` never creates a button or a listener).
+   *  Removed when `expandable` is dropped, and when a one-way expand completes. */
   expandBtn;
+  /** Expanded state lives here, on the element — a stateless wrapper can't hold
+   *  it and the app DOM may be reconciled off the UI thread. */
+  expanded = false;
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
     const style = document.createElement("style");
     style.textContent = SHADOW_STYLE;
     this.slotEl = document.createElement("slot");
-    this.expandBtn = document.createElement("button");
-    this.expandBtn.className = "expand-btn";
-    this.expandBtn.type = "button";
-    this.expandBtn.setAttribute("aria-label", "Show more");
-    this.expandBtn.setAttribute("aria-expanded", "false");
-    this.expandBtn.addEventListener("click", this.handleExpand);
-    shadow.append(style, this.slotEl, this.expandBtn);
-  }
-  attributeChangedCallback() {
-    this.slotEl.classList.remove("expanded");
-    this.expandBtn.classList.remove("hidden");
-    this.expandBtn.setAttribute("aria-expanded", "false");
-  }
-  handleExpand = () => {
-    if (this.slotEl.classList.contains("expanded")) return;
-    this.slotEl.classList.add("expanded");
-    this.expandBtn.classList.add("hidden");
-    this.expandBtn.setAttribute("aria-expanded", "true");
+    shadow.append(style, this.slotEl);
+  }
+  connectedCallback() {
+    this.syncExpandButton();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "truncate" || name === "expandable") this.setExpanded(false);
+    this.syncExpandButton();
+  }
+  get isExpandable() {
+    return this.hasAttribute("truncate") && this.hasAttribute("expandable");
+  }
+  get isCollapsible() {
+    return this.hasAttribute("collapsible");
+  }
+  /** Create or remove the chevron button to match `expandable`, then refresh
+   *  its label/visibility — the single place the button's lifecycle lives. */
+  syncExpandButton() {
+    if (this.isExpandable && !this.expandBtn) {
+      const btn = document.createElement("button");
+      btn.className = "expand-btn";
+      btn.type = "button";
+      btn.addEventListener("click", this.handleToggle);
+      this.shadowRoot.append(btn);
+      this.expandBtn = btn;
+    } else if (!this.isExpandable && this.expandBtn) {
+      this.expandBtn.remove();
+      this.expandBtn = void 0;
+    }
+    this.refreshButton();
+  }
+  handleToggle = () => {
+    this.setExpanded(!this.expanded);
   };
+  setExpanded(next) {
+    if (next === this.expanded) return;
+    this.expanded = next;
+    this.slotEl.classList.toggle("expanded", next);
+    this.refreshButton();
+  }
+  /** Reflect the current state onto the button: label + `aria-expanded` + the
+   *  `.expanded` class (CSS keeps it visible and rotates the chevron up). A
+   *  one-way expand (no `collapsible`) removes the button once expanded — there
+   *  is nothing to collapse back to. */
+  refreshButton() {
+    const btn = this.expandBtn;
+    if (!btn) return;
+    if (this.expanded && !this.isCollapsible) {
+      btn.remove();
+      this.expandBtn = void 0;
+      return;
+    }
+    btn.setAttribute("aria-expanded", this.expanded ? "true" : "false");
+    btn.setAttribute("aria-label", this.expanded ? "Show less" : "Show more");
+    btn.classList.toggle("expanded", this.expanded);
+  }
 }
 function register_a_text() {
   if (typeof customElements === "undefined") return;