@antadesign/anta 0.3.2 → 0.3.3

package/dist/elements/a-calendar.css

@@ -0,0 +1 @@
+@layer anta{.anta-calendar{--calendar-cell-width: 32px;--calendar-cell-height: 28px;display:inline-flex;flex-direction:column;gap:6px}.anta-calendar [data-part=header]{display:flex;align-items:center;gap:0}.anta-calendar [data-part=heading]{flex:1 1 auto;justify-content:center;white-space:nowrap}.anta-calendar .year-dot{flex:none;inline-size:6px;block-size:6px;border-radius:999px;background:currentColor}.anta-calendar[data-size=small]{--calendar-cell-width: 28px;--calendar-cell-height: 24px}.anta-calendar[data-size=large]{--calendar-cell-width: 36px;--calendar-cell-height: 32px}.anta-calendar[data-size=small] [data-part=weekday]{font-size:13px;line-height:16px}.anta-calendar[data-size=large] [data-part=weekday]{font-size:17px;line-height:24px}a-calendar{display:inline-grid;grid-template-columns:repeat(7,var(--calendar-cell-width, 32px));gap:1px;font-family:var(--sans-serif)}a-calendar [data-part=weekday]{display:flex;align-items:center;justify-content:center;height:24px;font-size:15px;line-height:20px;font-weight:400;color:var(--text-4);user-select:none}a-calendar [data-part=weekday][data-weekend]{color:var(--text-5)}a-calendar a-button[data-part=day-cell]{padding-inline:0;min-width:var(--calendar-cell-width, 32px);min-height:var(--calendar-cell-height, 28px);justify-content:center}a-calendar a-button[data-part=day-cell] a-button-label{padding-bottom:0}a-calendar a-button[data-part=day-cell]:focus-visible{outline-offset:0}a-calendar a-button[data-part=day-cell][data-today]:not([selected]){font-weight:600}a-calendar a-button[data-part=day-cell][data-outside]:not([selected]){opacity:.5}}

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

@@ -0,0 +1,76 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-calendar.css';
+/**
+ * `<a-calendar>` — a **light-DOM, form-associated** month grid, and the
+ * **interaction authority** for it. It is the grid itself (`a-calendar.css` gives
+ * it a flat 7-column CSS grid), owns the form value, and **dispatches the
+ * selection and navigation events** — so it works for a vanilla consumer, not
+ * only through the JSX wrapper.
+ *
+ * It does **not** build or mutate its own contents — that would break the
+ * no-UI-thread-DOM-mutation rule (app DOM may render off a worker). Whoever
+ * renders into it (the `Calendar` JSX wrapper, or a vanilla consumer using the
+ * exported `buildMonth` engine) fills it with `<a-button>` day cells + weekday
+ * headers and *re-renders* on the element's events. The element confines itself
+ * to off-DOM work (form value, `ElementInternals` state), event dispatch, and
+ * imperative focus of cells that already exist — the `<a-radio-group>` model.
+ *
+ * ## Events (all bubble; lowercase so React + Preact bind them)
+ *
+ * - `statechange` — cancelable, fired BEFORE a pick applies. `detail` is
+ *   `{ next, prev, reason }`: ISO-string dates (or `null`), `reason` ∈
+ *   `'user' | 'reset' | 'restore'`. `preventDefault()` vetoes a `'user'` pick in
+ *   uncontrolled mode.
+ * - `change` — fired AFTER a selection applies (uncontrolled), and on
+ *   reset/restore.
+ * - `navigate` — `detail: { date }` (ISO). Fired on keyboard navigation (and
+ *   when the target month isn't rendered) so the renderer can move the roving tab
+ *   stop and flip the displayed month.
+ *
+ * ## Controlled vs uncontrolled (like `<a-radio-group>`)
+ *
+ * Presence of the **`value`** attribute = controlled: a pick only *requests* a
+ * change (fires `statechange`); the consumer answers by updating `value`. With
+ * **`defaultvalue`** instead, the element owns selection — a pick self-applies
+ * (form value + `change`) unless vetoed.
+ *
+ * ## Selection & keyboard
+ *
+ * Day cells are `<a-button>`s, so a click (and Enter/Space, which `<a-button>`
+ * turns into a click) bubbles here; the element delegates off `data-part="day-cell"`.
+ * Arrow / Home / End / PageUp / PageDown move focus among rendered cells directly,
+ * and emit `navigate` for month changes. `data-focus` (`"<iso>#<nonce>"`, set by
+ * the renderer) focuses a cell after a re-render lands a new month.
+ */
+export declare class ACalendarElement extends HTMLElementBase {
+    #private;
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    private internals?;
+    /** Selection in uncontrolled mode (controlled reads the `value` attribute). */
+    private selectedIso;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    private currentIso;
+    private applyFormValue;
+    private onClick;
+    /** Request selecting `iso`: fire cancelable `statechange`; in uncontrolled mode,
+     *  if not vetoed, apply the form value and fire `change`. The renderer mirrors
+     *  the new selection visually off `statechange`. */
+    private requestSelect;
+    private onKeydown;
+    /** Focus the day cell whose `data-date` matches the signal's ISO. Deferred to a
+     *  microtask so a just-rendered new month has committed. Signal: `"<iso>#<nonce>"`. */
+    private focusCell;
+    private emitState;
+    /** The selected date as an ISO string (`''` when empty). */
+    get value(): string;
+    set value(v: string);
+    /** Form field name — mirrors the `name` attribute, like native `<input>.name`. */
+    get name(): string;
+    set name(v: string);
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+}
+export declare function register_a_calendar(): void;

package/dist/elements/a-calendar.js

@@ -0,0 +1,190 @@
+import { HTMLElementBase } from "../anta_helpers";
+import { Temporal } from "temporal-polyfill";
+import "./a-calendar.css";
+class ACalendarElement extends HTMLElementBase {
+  static formAssociated = true;
+  static observedAttributes = ["value", "data-focus"];
+  internals;
+  /** Selection in uncontrolled mode (controlled reads the `value` attribute). */
+  selectedIso = null;
+  constructor() {
+    super();
+    try {
+      this.internals = this.attachInternals?.();
+    } catch (err) {
+      console.warn("a-calendar: ElementInternals unavailable \u2014 form association disabled.", err);
+    }
+    this.addEventListener("click", this.onClick);
+    this.addEventListener("keydown", this.onKeydown);
+  }
+  connectedCallback() {
+    if (Object.prototype.hasOwnProperty.call(this, "value")) {
+      const v = this.value;
+      delete this.value;
+      this.value = v;
+    }
+    this.selectedIso = this.getAttribute("value") || this.getAttribute("defaultvalue") || null;
+    this.applyFormValue(this.currentIso());
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (name === "value") {
+      this.applyFormValue(value);
+      return;
+    }
+    if (name === "data-focus") {
+      this.focusCell(value);
+    }
+  }
+  /** Controlled when the `value` attribute is present (the renderer sets it only
+   *  in controlled mode); otherwise the element owns selection. */
+  get #controlled() {
+    return this.hasAttribute("value");
+  }
+  currentIso() {
+    return this.#controlled ? this.getAttribute("value") || null : this.selectedIso;
+  }
+  applyFormValue(value) {
+    this.internals?.setFormValue(value || null);
+    try {
+      if (value) this.internals?.states.add("filled");
+      else this.internals?.states.delete("filled");
+    } catch {
+    }
+  }
+  // --- Selection ----------------------------------------------------------
+  onClick = (e) => {
+    if (this.hasAttribute("disabled")) return;
+    const cell = e.target?.closest('[data-part="day-cell"]');
+    if (!cell || cell.hasAttribute("disabled")) return;
+    const iso = cell.dataset.date;
+    if (iso) this.requestSelect(iso);
+  };
+  /** Request selecting `iso`: fire cancelable `statechange`; in uncontrolled mode,
+   *  if not vetoed, apply the form value and fire `change`. The renderer mirrors
+   *  the new selection visually off `statechange`. */
+  requestSelect(iso) {
+    const prev = this.currentIso();
+    if (iso === prev) return;
+    const proceed = this.dispatchEvent(
+      new CustomEvent("statechange", {
+        bubbles: false,
+        cancelable: true,
+        detail: { next: iso, prev, reason: "user" }
+      })
+    );
+    if (this.#controlled || !proceed) return;
+    this.selectedIso = iso;
+    this.applyFormValue(iso);
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  // --- Keyboard navigation ------------------------------------------------
+  get #dayCells() {
+    return Array.from(this.querySelectorAll('[data-part="day-cell"]'));
+  }
+  onKeydown = (e) => {
+    if (this.hasAttribute("disabled")) return;
+    const cells = this.#dayCells;
+    if (cells.length === 0) return;
+    const focused = e.target?.closest('[data-part="day-cell"]') ?? cells.find((c) => c.tabIndex === 0) ?? null;
+    if (!focused?.dataset.date) return;
+    let targetIso = null;
+    switch (e.key) {
+      case "Home":
+      case "End": {
+        const idx = cells.indexOf(focused);
+        if (idx < 0) return;
+        const rowStart = idx - idx % 7;
+        targetIso = cells[e.key === "Home" ? rowStart : rowStart + 6]?.dataset.date ?? null;
+        break;
+      }
+      default: {
+        const cur = Temporal.PlainDate.from(focused.dataset.date);
+        let next;
+        switch (e.key) {
+          case "ArrowLeft":
+            next = cur.subtract({ days: 1 });
+            break;
+          case "ArrowRight":
+            next = cur.add({ days: 1 });
+            break;
+          case "ArrowUp":
+            next = cur.subtract({ days: 7 });
+            break;
+          case "ArrowDown":
+            next = cur.add({ days: 7 });
+            break;
+          case "PageUp":
+            next = cur.add({ [e.shiftKey ? "years" : "months"]: -1 });
+            break;
+          case "PageDown":
+            next = cur.add({ [e.shiftKey ? "years" : "months"]: 1 });
+            break;
+          default:
+            return;
+        }
+        targetIso = next.toString();
+      }
+    }
+    if (!targetIso) return;
+    e.preventDefault();
+    const cell = cells.find((c) => c.dataset.date === targetIso);
+    if (cell && !cell.hasAttribute("disabled")) cell.focus();
+    this.dispatchEvent(new CustomEvent("navigate", { bubbles: true, detail: { date: targetIso } }));
+  };
+  // --- Focus signal -------------------------------------------------------
+  /** Focus the day cell whose `data-date` matches the signal's ISO. Deferred to a
+   *  microtask so a just-rendered new month has committed. Signal: `"<iso>#<nonce>"`. */
+  focusCell(signal) {
+    if (!signal) return;
+    const iso = signal.split("#")[0];
+    queueMicrotask(() => {
+      this.querySelector(`[data-date="${iso}"]`)?.focus();
+    });
+  }
+  // --- Public value API + form callbacks ----------------------------------
+  emitState(next, prev, reason) {
+    this.dispatchEvent(
+      new CustomEvent("statechange", { bubbles: false, detail: { next, prev, reason } })
+    );
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  /** The selected date as an ISO string (`''` when empty). */
+  get value() {
+    return this.currentIso() ?? "";
+  }
+  set value(v) {
+    this.selectedIso = v || null;
+    this.applyFormValue(v || null);
+  }
+  /** Form field name — mirrors the `name` attribute, like native `<input>.name`. */
+  get name() {
+    return this.getAttribute("name") ?? "";
+  }
+  set name(v) {
+    this.setAttribute("name", v);
+  }
+  formResetCallback() {
+    const def = this.getAttribute("defaultvalue") || null;
+    const prev = this.currentIso();
+    this.selectedIso = def;
+    this.applyFormValue(def);
+    this.emitState(def, prev, "reset");
+  }
+  formStateRestoreCallback(state) {
+    const prev = this.currentIso();
+    this.selectedIso = state || null;
+    this.applyFormValue(state || null);
+    this.emitState(state || null, prev, "restore");
+  }
+}
+function register_a_calendar() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-calendar")) {
+    customElements.define("a-calendar", ACalendarElement);
+  }
+}
+register_a_calendar();
+export {
+  ACalendarElement,
+  register_a_calendar
+};

package/dist/elements/a-checkbox.css

@@ -1 +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","tnum";&: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}}}.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}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-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-fill: #1f6eb2;--checkbox-fill-hover: #1a5b93;--checkbox-fill-active: #175082}a-checkbox[tone=success]{--checkbox-fill: #2a7e43;--checkbox-fill-hover: #226737;--checkbox-fill-active: #1f5c31}a-checkbox[tone=warning]{--checkbox-fill: #c37416;--checkbox-fill-hover: #ae6613;--checkbox-fill-active: #995200}a-checkbox[tone=critical]{--checkbox-fill: #c9302c;--checkbox-fill-hover: #b02120;--checkbox-fill-active: #a01c1c}a-checkbox[tone-text=brand]{--checkbox-label-color: var(--text-2-brand);--checkbox-hint-color: var(--text-4-brand)}a-checkbox[tone-text=info]{--checkbox-label-color: var(--text-2-info);--checkbox-hint-color: var(--text-4-info)}a-checkbox[tone-text=success]{--checkbox-label-color: var(--text-2-success);--checkbox-hint-color: var(--text-4-success)}a-checkbox[tone-text=warning]{--checkbox-label-color: var(--text-2-warning);--checkbox-hint-color: var(--text-4-warning)}a-checkbox[tone-text=critical]{--checkbox-label-color: var(--text-2-critical);--checkbox-hint-color: var(--text-4-critical)}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);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}}a-checkbox[tone-text]:not([tone-text=""],[tone-text=brand],[tone-text=neutral],[tone-text=info],[tone-text=success],[tone-text=warning],[tone-text=critical]){--checkbox-tone-text-source: attr(tone-text type(<color>), transparent);--checkbox-label-color: oklch(from var(--checkbox-tone-text-source) .5 c h);--checkbox-hint-color: oklch(from var(--checkbox-tone-text-source) .5 c h / .7);.dark &{--checkbox-label-color: oklch(from var(--checkbox-tone-text-source) .8 c h);--checkbox-hint-color: oklch(from var(--checkbox-tone-text-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}}
+@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","tnum";&: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}&[round]{--checkbox-round: attr(round type(<length>), 999px)}&[round]:before{border-radius:var(--checkbox-round, 999px)}&: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}}}.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}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],a-checkbox[tone-selected=brand]{--checkbox-fill: #5f4bc3;--checkbox-fill-hover: #503cb4;--checkbox-fill-active: #483493}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-fill: #635b65;--checkbox-fill-hover: #534c57;--checkbox-fill-active: #49424c}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-fill: #1f6eb2;--checkbox-fill-hover: #1a5b93;--checkbox-fill-active: #175082}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-fill: #2a7e43;--checkbox-fill-hover: #226737;--checkbox-fill-active: #1f5c31}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-fill: #c37416;--checkbox-fill-hover: #ae6613;--checkbox-fill-active: #995200}a-checkbox[tone=critical],a-checkbox[tone-selected=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)}a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--checkbox-tone-source: attr(tone-selected type(<color>), transparent)}a-checkbox[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--_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);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}}.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],.dark a-checkbox[tone-selected=brand]{--checkbox-fill: #503cb4;--checkbox-fill-hover: #5f4bc3;--checkbox-fill-active: #7460d7}.dark a-checkbox[tone=neutral],.dark a-checkbox[tone-selected=neutral]{--checkbox-fill: #534c57;--checkbox-fill-hover: #635b65;--checkbox-fill-active: #938d96}.dark a-checkbox[tone=info],.dark a-checkbox[tone-selected=info]{--checkbox-fill: #1a5b93;--checkbox-fill-hover: #1f6eb2;--checkbox-fill-active: #2686d9}.dark a-checkbox[tone=success],.dark a-checkbox[tone-selected=success]{--checkbox-fill: #226737;--checkbox-fill-hover: #2a7e43;--checkbox-fill-active: #329550}.dark a-checkbox[tone=warning],.dark a-checkbox[tone-selected=warning]{--checkbox-fill: #7f410b;--checkbox-fill-hover: #995200;--checkbox-fill-active: #ae6613}.dark a-checkbox[tone=critical],.dark a-checkbox[tone-selected=critical]{--checkbox-fill: #b02120;--checkbox-fill-hover: #c9302c;--checkbox-fill-active: #de4545}}

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

@@ -24,6 +24,7 @@ import "./a-checkbox.css";
  * optimistic self-paint.
  */
 export declare class ACheckboxElement extends HTMLElementBase {
+    #private;
     static formAssociated: boolean;
     static observedAttributes: string[];
     private internals?;
@@ -39,8 +40,6 @@ export declare class ACheckboxElement extends HTMLElementBase {
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string): void;
-    private get isDisabled();
-    private get isControlled();
     private seed;
     private emitChange;
     private toggle;

package/dist/elements/a-checkbox.js

@@ -50,15 +50,15 @@ class ACheckboxElement extends HTMLElementBase {
       if (changed && this.alive) this.emitChange();
       return;
     }
-    if (name === "default-state" && !this.isControlled && !this.dirty) this.seed();
+    if (name === "default-state" && !this.#isControlled && !this.dirty) this.seed();
     this.paint();
   }
   // Matches the host `disabled` attribute and an ancestor `<fieldset disabled>`.
-  get isDisabled() {
+  get #isDisabled() {
     return this.matches(":disabled");
   }
   // Controlled mode: the `state` attribute is present and owns the live value.
-  get isControlled() {
+  get #isControlled() {
     return this.hasAttribute("state");
   }
   seed() {
@@ -74,7 +74,7 @@ class ACheckboxElement extends HTMLElementBase {
     this.dispatchEvent(new Event("change", { bubbles: true }));
   }
   toggle(_e) {
-    if (this.isDisabled) return;
+    if (this.#isDisabled) return;
     const prev = this.currentState;
     const next = prev === "checked" ? "unchecked" : "checked";
     const ok = this.dispatchEvent(
@@ -85,7 +85,7 @@ class ACheckboxElement extends HTMLElementBase {
         detail: { next, prev }
       })
     );
-    if (this.isControlled) return;
+    if (this.#isControlled) return;
     if (ok) {
       this.currentState = next;
       this.dirty = true;

package/dist/elements/a-expander.css

@@ -1 +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}}
+@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[round]{--expander-round: attr(round type(<length>));border-radius:var(--expander-round, var(--_expander-round-radius, 999px))}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

@@ -1,17 +1,28 @@
 import { HTMLElementBase } from '../anta_helpers';
 import './a-expander.css';
 export declare class AExpanderElement extends HTMLElementBase {
+    #private;
     static observedAttributes: string[];
     private summary;
     private region;
+    private header;
+    private roundStyle;
+    private roundObserver?;
     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();
+    /** Publish HALF the folded (header + host borders) height as
+     *  `--_expander-round-radius` on `:host`, for `a-expander[round]` to consume.
+     *  Reads layout only; writes only the shadow sheet — no host mutation. */
+    /** A `round` attribute carrying a length (`round="12px"`) is a fixed radius —
+     *  the CSS uses it directly and the measured pill is unused, so skip measuring.
+     *  (The wrapper's `round={12}` path sets an inline var + a bare `round=""`, so
+     *  it isn't caught here; the measurement runs but its var is simply overridden.) */
+    private hasFixedRound;
+    private measureRoundRadius;
+    private startRoundObserver;
+    private stopRoundObserver;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
     private syncDisabled;
     /** Apply state to the shadow internals (idempotent; reads the host, writes

package/dist/elements/a-expander.js

@@ -141,9 +141,18 @@ const SHADOW_STYLE = `
 `;
 const parseState = (v) => v === "open" ? "open" : "closed";
 class AExpanderElement extends HTMLElementBase {
-  static observedAttributes = ["state", "disabled"];
+  static observedAttributes = ["state", "disabled", "round"];
   summary;
   region;
+  header;
+  // A dedicated shadow <style> the element rewrites to publish the measured
+  // `round` radius as a `:host` custom property (see `measureRoundRadius`). Kept
+  // separate from the static SHADOW_STYLE so updating it is a cheap textContent
+  // swap on one small sheet, and it's shadow-internal (no host mutation).
+  roundStyle;
+  // Observes the header (folded) box so the `round` radius tracks its height —
+  // including custom header content. Guarded for engines without ResizeObserver.
+  roundObserver;
   // 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
@@ -167,6 +176,7 @@ class AExpanderElement extends HTMLElementBase {
     this.summary.addEventListener("click", this.onSummaryClick);
     const header = document.createElement("div");
     header.className = "header";
+    this.header = header;
     const actionsSlot = document.createElement("slot");
     actionsSlot.name = "actions";
     actionsSlot.setAttribute("part", "actions");
@@ -179,24 +189,65 @@ class AExpanderElement extends HTMLElementBase {
     const content = document.createElement("slot");
     content.setAttribute("part", "content");
     this.region.append(content);
-    shadow.append(style, header, this.region);
+    this.roundStyle = document.createElement("style");
+    if (typeof ResizeObserver !== "undefined") {
+      this.roundObserver = new ResizeObserver(() => this.measureRoundRadius());
+    }
+    shadow.append(style, this.roundStyle, header, this.region);
+  }
+  /** Publish HALF the folded (header + host borders) height as
+   *  `--_expander-round-radius` on `:host`, for `a-expander[round]` to consume.
+   *  Reads layout only; writes only the shadow sheet — no host mutation. */
+  /** A `round` attribute carrying a length (`round="12px"`) is a fixed radius —
+   *  the CSS uses it directly and the measured pill is unused, so skip measuring.
+   *  (The wrapper's `round={12}` path sets an inline var + a bare `round=""`, so
+   *  it isn't caught here; the measurement runs but its var is simply overridden.) */
+  hasFixedRound() {
+    const v = this.getAttribute("round");
+    return v != null && v.trim() !== "";
+  }
+  measureRoundRadius() {
+    if (!this.hasAttribute("round") || this.hasFixedRound()) return;
+    const h = this.header.getBoundingClientRect().height;
+    if (h <= 0) return;
+    const cs = getComputedStyle(this);
+    const borders = (parseFloat(cs.borderTopWidth) || 0) + (parseFloat(cs.borderBottomWidth) || 0);
+    const radius = (h + borders) / 2;
+    this.roundStyle.textContent = `:host{--_expander-round-radius:${radius}px}`;
+  }
+  startRoundObserver() {
+    if (!this.roundObserver || this.hasFixedRound()) return;
+    this.roundObserver.observe(this.header);
+    this.measureRoundRadius();
+  }
+  stopRoundObserver() {
+    this.roundObserver?.disconnect();
+    this.roundStyle.textContent = "";
   }
   /** Controlled mode: the `state` attribute is present and owns the state. */
-  get controlled() {
+  get #controlled() {
     return this.hasAttribute("state");
   }
   /** The currently *applied* state (read from the shadow, the source of truth
    *  for what's painted). */
-  get current() {
+  get #current() {
     return this.summary.getAttribute("aria-expanded") === "true" ? "open" : "closed";
   }
   connectedCallback() {
     this.syncDisabled();
-    this.applyState(parseState(this.getAttribute(this.controlled ? "state" : "default-state")));
+    this.applyState(parseState(this.getAttribute(this.#controlled ? "state" : "default-state")));
+    if (this.hasAttribute("round")) this.startRoundObserver();
+  }
+  disconnectedCallback() {
+    this.roundObserver?.disconnect();
   }
   attributeChangedCallback(name) {
     if (name === "disabled") this.syncDisabled();
-    else if (name === "state" && this.controlled) this.applyState(parseState(this.getAttribute("state")));
+    else if (name === "state" && this.#controlled) this.applyState(parseState(this.getAttribute("state")));
+    else if (name === "round") {
+      if (this.hasAttribute("round")) this.startRoundObserver();
+      else this.stopRoundObserver();
+    }
   }
   syncDisabled() {
     this.summary.disabled = this.hasAttribute("disabled");
@@ -220,12 +271,12 @@ class AExpanderElement extends HTMLElementBase {
    *  Controlled: never self-apply; the consumer answers via the `state`
    *  attribute. See STATEFUL-COMPONENTS.md. */
   onSummaryClick = () => {
-    const prev = this.current;
+    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 (this.#controlled) return;
     if (ok) this.applyState(next);
   };
 }