@antadesign/anta 0.3.34 → 0.3.35

package/dist/elements/a-dialog.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-dialog{--dialog-bg: var(--bg-1);--dialog-text: var(--text-2);--dialog-border: light-dark( color-mix(in oklch, black 9%, transparent), color-mix(in oklch, white 14%, transparent) );--dialog-radius: 10px;--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 10%, transparent), 0 12px 32px color-mix(in oklch, black 22%, transparent), 0 28px 64px color-mix(in oklch, black 14%, transparent);--dialog-overlay: light-dark( color-mix(in oklch, black 42%, transparent), color-mix(in oklch, black 62%, transparent) );display:contents}a-dialog[round]{--dialog-round: var(--dialog-radius, 10px);@supports (border-radius: attr(probe type(<length>),1px)){--dialog-round: attr(round type(<length>), var(--dialog-radius, 10px))}}a-dialog:not(:defined){display:none}.dark a-dialog{--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 40%, transparent), 0 12px 32px color-mix(in oklch, black 55%, transparent), 0 28px 64px color-mix(in oklch, black 40%, transparent)}@media(forced-colors:active){a-dialog{--dialog-outline: 1px solid CanvasText;--dialog-shadow: none}}}a-dialog>p:last-child,a-dialog>:not([slot])>p:last-child{margin-block-end:0}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-dialog{--dialog-bg: var(--bg-1);--dialog-text: var(--text-2);--dialog-border: light-dark( color-mix(in oklch, black 9%, transparent), color-mix(in oklch, white 14%, transparent) );--dialog-radius: 10px;--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 10%, transparent), 0 12px 32px color-mix(in oklch, black 22%, transparent), 0 28px 64px color-mix(in oklch, black 14%, transparent);--dialog-overlay: light-dark( color-mix(in oklch, black 42%, transparent), color-mix(in oklch, black 62%, transparent) );display:contents}a-dialog::part(dialog){--_dur: .2s;--_r: var(--dialog-round, var(--dialog-radius, 10px));position:fixed;box-sizing:border-box;padding:0;border:var(--dialog-outline, none);max-width:calc(100vw - 2 * var(--dialog-margin, 32px));max-height:calc(100dvh - 2 * var(--dialog-margin, 32px));width:var(--dialog-width, 480px);height:var(--dialog-height, fit-content);overflow:visible;color:var(--dialog-text, inherit);background:var(--dialog-bg, #fff);border-radius:var(--_r);box-shadow:var(--dialog-shadow, inset 0 0 0 1px color-mix(in oklch, black 8%, transparent), 0 10px 38px color-mix(in oklch, black 28%, transparent));flex-direction:column}a-dialog::part(dialog):modal{display:flex}a-dialog::part(dialog):open{display:flex}a-dialog::part(dialog):focus,a-dialog::part(dialog):focus-visible{outline:none}a-dialog::part(dialog)::backdrop{--_overlay: var(--dialog-overlay, color-mix(in oklch, black 40%, transparent));background:var(--_overlay)}a-dialog{--_enter-from: scale(.97)}a-dialog[position=left]{--_enter-from: translateX(-100%)}a-dialog[position=right]{--_enter-from: translateX(100%)}a-dialog[position=top]{--_enter-from: translateY(-100%)}a-dialog[position=bottom]{--_enter-from: translateY(100%)}@media(prefers-reduced-motion:no-preference){@supports selector(a-dialog::part(dialog):open){a-dialog::part(dialog){opacity:0;transform:var(--_enter-from);transition:opacity var(--_dur) ease,transform var(--_dur) ease,overlay var(--_dur) ease allow-discrete,display var(--_dur) ease allow-discrete}a-dialog::part(dialog):open{opacity:1;transform:none}@starting-style{a-dialog::part(dialog):open{opacity:0;transform:var(--_enter-from)}}}@supports selector(a-dialog::part(dialog):modal::backdrop){a-dialog::part(dialog)::backdrop{background:transparent;transition:background var(--_dur) ease,overlay var(--_dur) ease allow-discrete,display var(--_dur) ease allow-discrete}a-dialog::part(dialog):modal::backdrop{background:var(--_overlay)}@starting-style{a-dialog::part(dialog):modal::backdrop{background:transparent}}}}a-dialog[position=left]::part(dialog),a-dialog[position=right]::part(dialog){width:var(--dialog-width, 380px);max-width:calc(100vw - var(--dialog-margin, 32px));height:100dvh;max-height:100dvh;border-radius:0}a-dialog[position=left]::part(dialog){margin:0 auto 0 0}a-dialog[position=right]::part(dialog){margin:0 0 0 auto}a-dialog[position=top]::part(dialog),a-dialog[position=bottom]::part(dialog){width:100vw;max-width:100vw;height:var(--dialog-height, fit-content);max-height:calc(100dvh - var(--dialog-margin, 32px));border-radius:0}a-dialog[position=top]::part(dialog){margin:0 auto auto}a-dialog[position=bottom]::part(dialog){margin:auto auto 0}a-dialog[position=fullscreen]::part(dialog){width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}a-dialog[round]::part(dialog){border-radius:var(--_r)}a-dialog[round=top]::part(dialog){border-radius:var(--_r) var(--_r) 0 0}a-dialog[round=bottom]::part(dialog){border-radius:0 0 var(--_r) var(--_r)}a-dialog[round=left]::part(dialog){border-radius:var(--_r) 0 0 var(--_r)}a-dialog[round=right]::part(dialog){border-radius:0 var(--_r) var(--_r) 0}a-dialog::part(header){display:none;flex:0 0 auto;padding:var(--dialog-header-padding, 18px 20px 8px);overflow:clip;overflow-wrap:anywhere;font-size:17px;font-weight:560;line-height:24px}a-dialog:state(has-header)::part(header){display:block}a-dialog:has(>[slot=close])::part(header){padding-inline-end:52px}a-dialog::part(body){display:block;flex:1 1 auto;min-height:0;overflow:auto;padding:var(--dialog-body-padding, 8px 20px 12px)}a-dialog:has(>[slot=close]):not(:state(has-header))::part(body){padding-inline-end:52px}a-dialog::part(footer){display:none;flex:0 0 auto;padding:var(--dialog-footer-padding, 8px 20px 18px)}a-dialog:state(has-footer)::part(footer){display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}a-dialog::part(close){display:block;position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:1}a-dialog>a-dialog-close[slot=close],a-dialog>a-dialog-footer[slot=footer]{display:contents}a-dialog[round]{--dialog-round: var(--dialog-radius, 10px);@supports (border-radius: attr(probe type(<length>),1px)){--dialog-round: attr(round type(<length>), var(--dialog-radius, 10px))}}a-dialog:not(:defined){display:none}.dark a-dialog{--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 40%, transparent), 0 12px 32px color-mix(in oklch, black 55%, transparent), 0 28px 64px color-mix(in oklch, black 40%, transparent)}@media(forced-colors:active){a-dialog{--dialog-outline: 1px solid CanvasText;--dialog-shadow: none}}}a-dialog>p:last-child,a-dialog>:not([slot])>p:last-child{margin-block-end:0}

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

@@ -5,8 +5,8 @@ export declare class ADialogElement extends HTMLElementBase {
     static observedAttributes: string[];
     private dialog;
     private headerSlot;
+    private bodySlot;
     private footerSlot;
-    private closeSlot;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/elements/a-dialog.js

@@ -1,169 +1,12 @@
 import { HTMLElementBase, parseOpenState } from "../anta_helpers";
 import "./a-dialog.css";
 const CLOSE_TRIGGER = "closerequest";
-const ANIM_MS = 200;
-const SHADOW_STYLE = `
-  :host { display: contents; }
-
-  dialog {
-    --_dur: ${ANIM_MS}ms;
-    --_r: var(--dialog-round, var(--dialog-radius, 10px));
-
-    position: fixed;
-    box-sizing: border-box;
-    padding: 0;
-    border: var(--dialog-outline, none);
-    max-width: calc(100vw - 2 * var(--dialog-margin, 32px));
-    max-height: calc(100dvh - 2 * var(--dialog-margin, 32px));
-    width: var(--dialog-width, 480px);
-    height: var(--dialog-height, fit-content);
-    overflow: visible;
-    color: var(--dialog-text, inherit);
-    background: var(--dialog-bg, #fff);
-    border-radius: var(--_r);
-    box-shadow: var(--dialog-shadow, inset 0 0 0 1px color-mix(in oklch, black 8%, transparent), 0 10px 38px color-mix(in oklch, black 28%, transparent));
-
-    flex-direction: column;
-  }
-
-  dialog[open] {
-    display: flex;
-  }
-
-  dialog:focus, dialog:focus-visible { outline: none; }
-
-  dialog::backdrop {
-    background: var(--dialog-overlay, color-mix(in oklch, black 40%, transparent));
-  }
-
-  :host { --_enter-from: scale(0.97); }
-  :host([position="left"]) { --_enter-from: translateX(-100%); }
-  :host([position="right"]) { --_enter-from: translateX(100%); }
-  :host([position="top"]) { --_enter-from: translateY(-100%); }
-  :host([position="bottom"]) { --_enter-from: translateY(100%); }
-
-  @media (prefers-reduced-motion: no-preference) {
-    dialog {
-      opacity: 0;
-      transform: var(--_enter-from);
-      transition:
-        opacity var(--_dur) ease,
-        transform var(--_dur) ease,
-        overlay var(--_dur) ease allow-discrete,
-        display var(--_dur) ease allow-discrete;
-    }
-    dialog[open] {
-      opacity: 1;
-      transform: none;
-    }
-    @starting-style {
-      dialog[open] { opacity: 0; transform: var(--_enter-from); }
-    }
-
-    dialog::backdrop {
-      background: transparent;
-      transition:
-        background var(--_dur) ease,
-        overlay var(--_dur) ease allow-discrete,
-        display var(--_dur) ease allow-discrete;
-    }
-    dialog[open]::backdrop { background: var(--dialog-overlay, color-mix(in oklch, black 40%, transparent)); }
-    @starting-style {
-      dialog[open]::backdrop { background: transparent; }
-    }
-  }
-
-  :host([position="left"]) dialog,
-  :host([position="right"]) dialog {
-    width: var(--dialog-width, 380px);
-    max-width: calc(100vw - var(--dialog-margin, 32px));
-    height: 100dvh;
-    max-height: 100dvh;
-    border-radius: 0;
-  }
-  :host([position="left"]) dialog { margin: 0 auto 0 0; }
-  :host([position="right"]) dialog { margin: 0 0 0 auto; }
-
-  :host([position="top"]) dialog,
-  :host([position="bottom"]) dialog {
-    width: 100vw;
-    max-width: 100vw;
-    height: var(--dialog-height, fit-content);
-    max-height: calc(100dvh - var(--dialog-margin, 32px));
-    border-radius: 0;
-  }
-  :host([position="top"]) dialog { margin: 0 auto auto auto; }
-  :host([position="bottom"]) dialog { margin: auto auto 0 auto; }
-
-  :host([position="fullscreen"]) dialog {
-    width: 100vw;
-    max-width: 100vw;
-    height: 100dvh;
-    max-height: 100dvh;
-    margin: 0;
-    border-radius: 0;
-  }
-
-  :host([round]) dialog { border-radius: var(--_r); }
-  :host([round="top"]) dialog { border-radius: var(--_r) var(--_r) 0 0; }
-  :host([round="bottom"]) dialog { border-radius: 0 0 var(--_r) var(--_r); }
-  :host([round="left"]) dialog { border-radius: var(--_r) 0 0 var(--_r); }
-  :host([round="right"]) dialog { border-radius: 0 var(--_r) var(--_r) 0; }
-
-  slot[name="header"] {
-    display: none;
-    flex: 0 0 auto;
-    padding: var(--dialog-header-padding, 18px 20px 8px);
-    overflow: clip;
-    overflow-wrap: anywhere;
-    font-size: 17px;
-    font-weight: 560;
-    line-height: 24px;
-  }
-  slot[name="header"].has-content { display: block; }
-  dialog.has-close slot[name="header"] { padding-inline-end: 52px; }
-
-  slot[part="body"] {
-    display: block;
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: auto;
-    padding: var(--dialog-body-padding, 8px 20px 12px);
-  }
-  /* With a close button but no header, the body is the top zone, so it takes the
-     \u2715 clearance instead of the header (which is display:none when empty). */
-  dialog.has-close slot[name="header"]:not(.has-content) ~ slot[part="body"] {
-    padding-inline-end: 52px;
-  }
-
-  slot[name="footer"] {
-    display: none;
-    flex: 0 0 auto;
-    padding: var(--dialog-footer-padding, 8px 20px 18px);
-  }
-  slot[name="footer"].has-content {
-    display: flex;
-    gap: 8px;
-    justify-content: flex-end;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
-  slot[name="close"] { display: none; }
-  slot[name="close"].has-content {
-    display: block;
-    position: absolute;
-    inset-block-start: 10px;
-    inset-inline-end: 10px;
-    z-index: 1;
-  }
-`;
 class ADialogElement extends HTMLElementBase {
   static observedAttributes = ["state", "name"];
   dialog;
   headerSlot;
+  bodySlot;
   footerSlot;
-  closeSlot;
   // Counts `dialog.close()` calls WE initiate whose async `close` event is still
   // pending, and is decremented as each arrives. The native `close` event fires
   // from a queued task, so a synchronous guard can't span it, and a boolean
@@ -191,35 +34,31 @@ class ADialogElement extends HTMLElementBase {
   // The document click listener wired for the `name`-trigger convenience, kept so
   // it can be torn down (and re-wired when `name` / controlled-ness changes).
   #triggerListener;
+  #triggerDocument;
+  #internals;
+  #headerObserver;
   constructor() {
     super();
+    this.#internals = this.attachInternals();
     const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
-    this.dialog = document.createElement("dialog");
+    this.dialog = this.doc.createElement("dialog");
     this.dialog.setAttribute("part", "dialog");
     this.dialog.tabIndex = -1;
-    this.closeSlot = document.createElement("slot");
-    this.closeSlot.name = "close";
-    this.closeSlot.setAttribute("part", "close");
-    this.headerSlot = document.createElement("slot");
+    const closeSlot = this.doc.createElement("slot");
+    closeSlot.name = "close";
+    closeSlot.setAttribute("part", "close");
+    this.headerSlot = this.doc.createElement("slot");
     this.headerSlot.name = "header";
     this.headerSlot.setAttribute("part", "header");
-    const bodySlot = document.createElement("slot");
-    bodySlot.setAttribute("part", "body");
-    this.footerSlot = document.createElement("slot");
+    this.bodySlot = this.doc.createElement("slot");
+    this.bodySlot.setAttribute("part", "body");
+    this.footerSlot = this.doc.createElement("slot");
     this.footerSlot.name = "footer";
     this.footerSlot.setAttribute("part", "footer");
-    for (const slot of [this.headerSlot, this.footerSlot, this.closeSlot]) {
-      slot.addEventListener("slotchange", () => {
-        const has = slot.assignedNodes().length > 0;
-        slot.classList.toggle("has-content", has);
-        if (slot === this.closeSlot) this.dialog.classList.toggle("has-close", has);
-      });
-    }
-    this.headerSlot.addEventListener("slotchange", () => this.#syncAccessibleName());
-    this.dialog.append(this.headerSlot, bodySlot, this.footerSlot, this.closeSlot);
-    shadow.append(style, this.dialog);
+    this.headerSlot.addEventListener("slotchange", () => this.#syncHeader());
+    this.footerSlot.addEventListener("slotchange", () => this.#syncRegions());
+    this.dialog.append(this.headerSlot, this.bodySlot, this.footerSlot, closeSlot);
+    shadow.append(this.dialog);
     this.dialog.addEventListener("cancel", (e) => {
       e.preventDefault();
       if (!this.#persistent) this.requestClose();
@@ -227,23 +66,29 @@ class ADialogElement extends HTMLElementBase {
     this.dialog.addEventListener("pointerdown", (e) => {
       this.#pressedBackdrop = e.target === this.dialog;
     });
+    this.dialog.addEventListener("pointercancel", () => {
+      this.#pressedBackdrop = false;
+    });
     this.dialog.addEventListener("click", (e) => {
-      if (this.#persistent) return;
-      if (this.#pressedBackdrop && e.target === this.dialog) this.requestClose();
+      const pressed = this.#pressedBackdrop;
+      this.#pressedBackdrop = false;
+      if (!this.#persistent && pressed && e.target === this.dialog) this.requestClose();
     });
     this.dialog.addEventListener("close", () => {
       if (this.#programmaticCloses > 0) {
         this.#programmaticCloses--;
         return;
       }
+      this.#pressedBackdrop = false;
       if (this.#controlled) this.#reflect(parseOpenState(this.getAttribute("state")));
       else this.#wantOpen = false;
     });
     this.addEventListener(CLOSE_TRIGGER, (event) => {
-      if (event.target.closest("a-dialog") === this) this.requestClose();
+      if (event.composedPath().find((node) => node.localName === "a-dialog") === this) this.requestClose();
     });
   }
   connectedCallback() {
+    this.#syncHeader();
     if (this.#controlled) {
       this.#reflect(parseOpenState(this.getAttribute("state")));
     } else {
@@ -254,10 +99,12 @@ class ADialogElement extends HTMLElementBase {
       if (this.#wantOpen) this.#open();
     }
     this.#syncTriggerListener();
-    this.#syncAccessibleName();
   }
   disconnectedCallback() {
     this.#teardownTriggerListener();
+    this.#headerObserver?.disconnect();
+    this.#headerObserver = void 0;
+    this.#pressedBackdrop = false;
     if (this.dialog.open) {
       this.#programmaticCloses++;
       this.dialog.close();
@@ -316,7 +163,7 @@ class ADialogElement extends HTMLElementBase {
    *  false if a handler vetoed it. */
   #announce(next) {
     return this.dispatchEvent(
-      new CustomEvent("statechange", {
+      new this.view.CustomEvent("statechange", {
         cancelable: true,
         detail: { next, prev: this.#current }
       })
@@ -335,7 +182,7 @@ class ADialogElement extends HTMLElementBase {
     this.#wantOpen = true;
     if (this.dialog.open || !this.isConnected) return;
     this.dialog.showModal();
-    const autofocus = this.querySelector("[autofocus]");
+    const autofocus = Array.from(this.querySelectorAll("[autofocus]")).find((node) => node.closest("a-dialog") === this);
     if (autofocus) autofocus.focus({ preventScroll: true });
     else this.dialog.focus();
   }
@@ -343,21 +190,43 @@ class ADialogElement extends HTMLElementBase {
    *  ours so the listener doesn't reconcile it. (The disconnect teardown closes
    *  the native dialog directly, NOT through here, to preserve `#wantOpen`.) */
   #close() {
+    this.#pressedBackdrop = false;
     this.#wantOpen = false;
     if (!this.dialog.open) return;
     this.#programmaticCloses++;
     this.dialog.close();
   }
-  /** Publish the header text as the shadow dialog's accessible name (a-input's
-   *  label-mirror pattern). Shadow-internal — not a host / light-DOM write. */
-  #syncAccessibleName() {
-    const text = this.headerSlot.assignedNodes().map((n) => n.textContent ?? "").join(" ").trim();
+  #syncRegions(header = this.headerSlot.assignedNodes().length > 0) {
+    for (const [state, present] of [
+      ["has-header", header],
+      ["has-footer", this.footerSlot.assignedNodes().length > 0]
+    ]) {
+      if (present) this.#internals.states.add(state);
+      else this.#internals.states.delete(state);
+    }
+  }
+  #syncHeader() {
+    if (!this.isConnected) return;
+    const nodes = this.headerSlot.assignedNodes();
+    this.#syncRegions(nodes.length > 0);
+    this.#syncAccessibleName(nodes);
+    this.#headerObserver?.disconnect();
+    this.#headerObserver = void 0;
+    if (!nodes.length) return;
+    this.#headerObserver = new this.view.MutationObserver(() => this.#syncAccessibleName(nodes));
+    for (const node of nodes) {
+      this.#headerObserver.observe(node, { childList: true, characterData: true, subtree: true });
+    }
+  }
+  /** Keep the header-derived name on the owned native dialog. */
+  #syncAccessibleName(nodes) {
+    const text = nodes.map((n) => n.textContent ?? "").join(" ").trim();
     if (text) this.dialog.setAttribute("aria-label", text);
     else this.dialog.removeAttribute("aria-label");
   }
   // --- `name`-trigger convenience (uncontrolled only) ---
   #syncTriggerListener() {
-    const wanted = !this.#controlled && !!this.getAttribute("name");
+    const wanted = this.isConnected && !this.#controlled && !!this.getAttribute("name");
     if (wanted && !this.#triggerListener) this.#wireTriggerListener();
     else if (!wanted && this.#triggerListener) this.#teardownTriggerListener();
   }
@@ -366,15 +235,18 @@ class ADialogElement extends HTMLElementBase {
       const name = this.getAttribute("name");
       if (!name) return;
       const t = e.target;
-      if (!(t instanceof Element)) return;
-      if (t.closest(`[data-dialog-open="${CSS.escape(name)}"]`)) this.requestOpen();
-      else if (t.closest(`[data-dialog-close="${CSS.escape(name)}"]`)) this.requestClose();
+      if (!t || t.nodeType !== 1) return;
+      const target = t;
+      if (target.closest(`[data-dialog-open="${this.view.CSS.escape(name)}"]`)) this.requestOpen();
+      else if (target.closest(`[data-dialog-close="${this.view.CSS.escape(name)}"]`)) this.requestClose();
     };
-    this.doc.addEventListener("click", this.#triggerListener);
+    this.#triggerDocument = this.doc;
+    this.#triggerDocument.addEventListener("click", this.#triggerListener);
   }
   #teardownTriggerListener() {
     if (this.#triggerListener) {
-      this.doc.removeEventListener("click", this.#triggerListener);
+      this.#triggerDocument?.removeEventListener("click", this.#triggerListener);
+      this.#triggerDocument = void 0;
       this.#triggerListener = void 0;
     }
   }

package/dist/elements/a-expander.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-expander,details[data-anta]{--_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")}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-indicator-size: 16px;--_expander-indicator-edge: 6px;--_expander-indicator-gap: 2px;--_expander-indicator-stroke: 2px;--_expander-indicator-track: calc(var(--_expander-indicator-edge) + var(--_expander-indicator-size) + var(--_expander-indicator-gap));--_expander-indicator-start: calc(var(--expander-gutter) - var(--_expander-indicator-size) - var(--_expander-indicator-gap));--_expander-indicator-mask: var(--_expander-chevron);--_expander-skeleton-indicator-start: var(--_expander-indicator-start);--_expander-skeleton-indicator-end: auto;--_expander-skeleton-indicator-top: 50%;--_expander-skeleton-indicator-transform: translateY(-50%);--_expander-header-padding-block: 6px;--_expander-header-padding-end: 4px;--_expander-actions-gap: 2px;--_expander-actions-start: 8px;--_expander-actions-end: 4px;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[indicator-placement=end]{--expander-gutter: 12px;--_expander-skeleton-indicator-start: auto;--_expander-skeleton-indicator-end: var(--_expander-indicator-edge);--_expander-skeleton-indicator-top: 8px;--_expander-skeleton-indicator-transform: rotate(90deg);--_expander-actions-end: var(--_expander-actions-gap)}a-expander[indicator=triangle]{--_expander-indicator-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5 12 8l-7 5.5z'/%3E%3C/svg%3E")}a-expander[indicator=plus]{--_expander-indicator-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 2h2v12H7zM2 7h12v2H2z'/%3E%3C/svg%3E")}a-expander:not(:defined):has(>[slot=indicator]){--_expander-skeleton-indicator-display: none}a-expander[round]{border-radius:var(--expander-round, var(--_expander-round-radius, 999px));@supports (border-radius: attr(probe type(<length>),1px)){--expander-round: attr(round type(<length>))}}a-expander>span[slot=actions]{display:contents}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:var(--_expander-header-padding-block) var(--_expander-header-padding-end) var(--_expander-header-padding-block) var(--expander-gutter)}a-expander:not(:defined) a-expander-summary:before{content:"";display:var(--_expander-skeleton-indicator-display, block);position:absolute;inset-inline-start:var(--_expander-skeleton-indicator-start);inset-inline-end:var(--_expander-skeleton-indicator-end);top:var(--_expander-skeleton-indicator-top);width:var(--_expander-indicator-size);height:var(--_expander-indicator-size);transform:var(--_expander-skeleton-indicator-transform);background-color:currentColor;-webkit-mask:var(--_expander-indicator-mask) center / contain no-repeat;mask:var(--_expander-indicator-mask) center / contain no-repeat;opacity:.6;pointer-events:none}a-expander:not(:defined)[indicator-placement=end] a-expander-summary{position:static;grid-column:1;padding-inline-start:var(--expander-gutter);padding-inline-end:var(--_expander-header-padding-end)}a-expander:not(:defined)>[slot=indicator]{display:grid;place-items:center;position:absolute;inset-inline-start:var(--_expander-indicator-start);top:8px;width:var(--_expander-indicator-size);height:var(--_expander-indicator-size);pointer-events:none}a-expander:not(:defined)[indicator-placement=end]>[slot=indicator]{inset-inline-start:auto;inset-inline-end:var(--_expander-indicator-edge)}a-expander:not(:defined)>[slot=indicator][data-when=open]{display:none}a-expander:not(:defined):is([state=open],[default-state=open])>[slot=indicator][data-when=open]{display:grid}a-expander:not(:defined):is([state=open],[default-state=open])>[slot=indicator][data-when=closed]{display:none}a-expander:not(:defined):is([state=open],[default-state=open])>[slot=indicator]:not([data-when]){transform:rotate(90deg)}a-expander:not(:defined)[indicator-placement=end]:is([state=open],[default-state=open])>[slot=indicator]:not([data-when]){transform:rotate(180deg)}a-expander:not(:defined)[indicator-placement=end]{grid-template-columns:minmax(0,1fr) auto var(--_expander-indicator-track)}a-expander:not(:defined){display:grid;position:relative;grid-template-columns:minmax(0,1fr) auto;align-items:center}a-expander:not(:defined) a-expander-summary{grid-column:1}a-expander:not(:defined)>[slot=actions]{grid-column:2;display:flex;align-items:center;gap:var(--_expander-actions-gap);flex-shrink:0;margin-inline-start:var(--_expander-actions-start);margin-inline-end:var(--_expander-actions-end)}a-expander:not(:defined) a-expander-details{grid-column:1 / -1}a-expander-summary{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:20px;font-weight:584.62;letter-spacing:0;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[level="1"] a-expander-summary{font-size:28px;line-height:32px}a-expander[level="2"] a-expander-summary{font-size:24px;line-height:28px}a-expander[level="3"] a-expander-summary{font-size:20px;line-height:24px}a-expander[level="4"] a-expander-summary{font-size:17px;line-height:20px}a-expander[level="6"] a-expander-summary{font-size:13px;line-height:16px}a-expander-details{display:block;padding:2px 4px 6px var(--expander-gutter);line-height:20px;overflow:auto}a-expander[indicator-placement=end] a-expander-details{padding-inline-start:var(--expander-gutter)}a-expander[priority=tertiary][outdent] a-expander-details{padding-inline-start:4px;margin-inline-start:-4px}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: currentColor;--expander-text: light-dark(oklch(from var(--expander-tone-source) .5 .125 h), oklch(from var(--expander-tone-source) .77 .11 h));--expander-text-hover: light-dark(oklch(from var(--expander-tone-source) .4 .11 h), oklch(from var(--expander-tone-source) .85 .1 h));--expander-bg-secondary: light-dark(oklch(from var(--expander-tone-source) .99 .004 h), oklch(from var(--expander-tone-source) .13 .02 h));--expander-border-secondary: light-dark(oklch(from var(--expander-tone-source) .935 .028 h), oklch(from var(--expander-tone-source) .21 .045 h));--expander-bg-primary: light-dark(oklch(from var(--expander-tone-source) .955 .02 h), oklch(from var(--expander-tone-source) .185 .05 h));--expander-border-primary: light-dark(oklch(from var(--expander-tone-source) .9 .04 h), oklch(from var(--expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--expander-tone-source: attr(tone type(<color>), currentColor)}}a-expander[disabled],a-expander[disabled][tone]{--expander-text: light-dark(#afa9b1, #635b65)}details[data-anta]{--native-expander-gutter: 24px;--native-expander-summary-padding-block: 6px;--native-expander-summary-font-size: 15px;--native-expander-summary-line-height: 20px;--native-expander-chevron-size: 16px;--native-expander-text: var(--text-2);--native-expander-text-hover: var(--text-1);--native-expander-bg-secondary: var(--bg-2);--native-expander-border-secondary: var(--border-5);--native-expander-bg-primary: var(--bg-4);--native-expander-border-primary: var(--border-4);--native-expander-round-size: 16px;--native-expander-round: 4px;--native-expander-bg: transparent;--native-expander-border: transparent;display:block;inline-size:100%;box-sizing:border-box;border:0 solid var(--native-expander-border);border-radius:var(--native-expander-round);color:var(--native-expander-text);background:var(--native-expander-bg);font-family:var(--sans-serif);font-size:15px;line-height:var(--native-expander-summary-line-height);transition:background-color .1s ease}details[data-anta][priority=secondary]{--native-expander-bg: var(--native-expander-bg-secondary);--native-expander-border: var(--native-expander-border-secondary);border-width:1px}details[data-anta][priority=primary]{--native-expander-bg: var(--native-expander-bg-primary);--native-expander-border: var(--native-expander-border-primary);border-width:1px}details[data-anta][level="1"]{--native-expander-summary-font-size: 28px;--native-expander-summary-line-height: 32px;--native-expander-round-size: 22px}details[data-anta][level="2"]{--native-expander-summary-font-size: 24px;--native-expander-summary-line-height: 28px;--native-expander-round-size: 20px}details[data-anta][level="3"]{--native-expander-summary-font-size: 20px;--native-expander-summary-line-height: 24px;--native-expander-round-size: 18px}details[data-anta][level="4"]{--native-expander-summary-font-size: 17px;--native-expander-summary-line-height: 20px}details[data-anta][level="6"]{--native-expander-summary-font-size: 13px;--native-expander-summary-line-height: 16px;--native-expander-round-size: 14px}details[data-anta][round]{--native-expander-round: var(--native-expander-round-size)}details[data-anta][round]:not([round=""]){--native-expander-round: var(--native-expander-round-size);@supports (border-radius: attr(probe type(<length>),1px)){--native-expander-round: attr(round type(<length>), var(--native-expander-round-size))}}details[data-anta][priority=tertiary][outdent]{--native-expander-gutter: 0px}details[data-anta][tone=brand]{--native-expander-text: var(--text-2-brand);--native-expander-text-hover: var(--text-1-brand);--native-expander-bg-secondary: var(--bg-2-brand);--native-expander-border-secondary: var(--border-5-brand);--native-expander-bg-primary: var(--bg-4-brand);--native-expander-border-primary: var(--border-4-brand)}details[data-anta][tone=info]{--native-expander-text: var(--text-2-info);--native-expander-text-hover: var(--text-1-info);--native-expander-bg-secondary: var(--bg-2-info);--native-expander-border-secondary: var(--border-5-info);--native-expander-bg-primary: var(--bg-4-info);--native-expander-border-primary: var(--border-4-info)}details[data-anta][tone=success]{--native-expander-text: var(--text-2-success);--native-expander-text-hover: var(--text-1-success);--native-expander-bg-secondary: var(--bg-2-success);--native-expander-border-secondary: var(--border-5-success);--native-expander-bg-primary: var(--bg-4-success);--native-expander-border-primary: var(--border-4-success)}details[data-anta][tone=warning]{--native-expander-text: var(--text-2-warning);--native-expander-text-hover: var(--text-1-warning);--native-expander-bg-secondary: var(--bg-2-warning);--native-expander-border-secondary: var(--border-5-warning);--native-expander-bg-primary: var(--bg-4-warning);--native-expander-border-primary: var(--border-4-warning)}details[data-anta][tone=critical]{--native-expander-text: var(--text-2-critical);--native-expander-text-hover: var(--text-1-critical);--native-expander-bg-secondary: var(--bg-2-critical);--native-expander-border-secondary: var(--border-5-critical);--native-expander-bg-primary: var(--bg-4-critical);--native-expander-border-primary: var(--border-4-critical)}details[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-expander-tone-source: currentColor;--native-expander-text: light-dark(oklch(from var(--native-expander-tone-source) .5 .125 h), oklch(from var(--native-expander-tone-source) .77 .11 h));--native-expander-text-hover: light-dark(oklch(from var(--native-expander-tone-source) .4 .11 h), oklch(from var(--native-expander-tone-source) .85 .1 h));--native-expander-bg-secondary: light-dark(oklch(from var(--native-expander-tone-source) .99 .004 h), oklch(from var(--native-expander-tone-source) .13 .02 h));--native-expander-border-secondary: light-dark(oklch(from var(--native-expander-tone-source) .935 .028 h), oklch(from var(--native-expander-tone-source) .21 .045 h));--native-expander-bg-primary: light-dark(oklch(from var(--native-expander-tone-source) .955 .02 h), oklch(from var(--native-expander-tone-source) .185 .05 h));--native-expander-border-primary: light-dark(oklch(from var(--native-expander-tone-source) .9 .04 h), oklch(from var(--native-expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--native-expander-tone-source: attr(tone type(<color>), currentColor)}}details[data-anta]>summary{position:relative;box-sizing:border-box;display:block;min-width:0;padding:var(--native-expander-summary-padding-block) 4px var(--native-expander-summary-padding-block) var(--native-expander-gutter);color:inherit;cursor:pointer;font:inherit;font-variation-settings:inherit;font-size:var(--native-expander-summary-font-size);line-height:var(--native-expander-summary-line-height);font-weight:584.62;letter-spacing:0;list-style:none;text-decoration-line:none;transition:color .15s ease}details[data-anta]>summary::-webkit-details-marker{display:none}details[data-anta]>summary::marker{content:""}details[data-anta]>summary:before{content:"";position:absolute;left:calc(var(--native-expander-gutter) - var(--native-expander-chevron-size) - 2px);top:var(--native-expander-summary-padding-block);width:var(--native-expander-chevron-size);height:var(--native-expander-summary-line-height);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;opacity:.6;transform:rotate(0);transition:transform .15s ease,opacity .15s ease,background-color .15s ease}details[data-anta][open]>summary:before{opacity:1;transform:rotate(90deg)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):hover{background:oklch(from var(--native-expander-bg) calc(l + .01) c h)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):active{background:var(--native-expander-bg)}details[data-anta]>summary:hover{color:var(--native-expander-text-hover);text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px}details[data-anta]>summary:hover:before{opacity:1}details[data-anta]>summary:active{color:var(--native-expander-text)}details[data-anta]>summary:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}details[data-anta]>:not(summary){display:block;padding:2px 4px 6px var(--native-expander-gutter);line-height:20px}@media(forced-colors:active){:is(a-expander,details[data-anta]){border-color:CanvasText}:is(a-expander,details[data-anta]):not([priority=primary],[priority=tertiary]){border-style:dashed}:is(a-expander,details[data-anta])[priority=tertiary]{border-color:Canvas}a-expander::part(indicator){forced-color-adjust:none;color:CanvasText}a-expander[disabled]::part(indicator){color:GrayText}a-expander:not(:defined) a-expander-summary:before,details[data-anta]>summary:before{forced-color-adjust:none;background-color:CanvasText}a-expander:not(:defined)[disabled] a-expander-summary:before{background-color:GrayText}}}a-expander-details>p:last-child,a-expander-details>:not([slot])>p:last-child,details[data-anta]>p:last-child,details[data-anta]>:not(summary)>p:last-child{margin-block-end:0}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-expander::part(header){display:flex;align-items:stretch}a-expander:has(>:is(a-expander-summary,a-expander-title)~a-expander-indicator)::part(header){display:grid;grid-template-columns:minmax(0,1fr) auto var(--_expander-indicator-track)}a-expander::part(actions){display:none}a-expander:has(>a-expander-actions:not(:empty))::part(actions){display:flex;align-items:center;gap:var(--_expander-actions-gap);flex-shrink:0;margin-inline:var(--_expander-actions-start) var(--_expander-actions-end)}a-expander:has(>:is(a-expander-summary,a-expander-title)~a-expander-indicator)::part(actions){grid-column:2;grid-row:1;z-index:1}a-expander::part(summary){appearance:none;background:none;border:none;margin:0;position:relative;padding:var(--_expander-header-padding-block) var(--_expander-header-padding-end) var(--_expander-header-padding-block) var(--expander-gutter);flex:1;min-width:0;font:inherit;font-variation-settings:inherit;color:inherit;text-align:left;display:flex;align-items:center;gap:0;cursor:pointer;user-select:text;border-radius:2px;outline:none}a-expander:has(>:is(a-expander-summary,a-expander-title)~a-expander-indicator)::part(summary){grid-column:1 / -1;grid-row:1;display:grid;grid-template-columns:subgrid;padding:var(--_expander-header-padding-block) 0}a-expander:has(>:is(a-expander-summary,a-expander-title)~a-expander-indicator)::part(title){grid-column:1;display:block;min-width:0;margin-inline-start:var(--expander-gutter)}a-expander::part(summary):focus-visible{outline:1px solid var(--focus-ring);outline-offset:0}a-expander::part(summary):enabled:hover{color:var(--expander-text-hover);--_expander-indicator-opacity: 1}a-expander[priority=tertiary]::part(summary):enabled:hover{--_summary-underline: underline}a-expander::part(summary):enabled:active{color:var(--expander-text)}a-expander::part(summary):disabled{cursor:default}a-expander:not(:state(open))::part(summary):enabled:active{--_expander-indicator-opacity: .6}a-expander::part(indicator){position:absolute;inset-inline-start:var(--_expander-indicator-start);top:50%;width:var(--_expander-indicator-size);height:var(--_expander-indicator-size);pointer-events:none;opacity:var(--_expander-indicator-opacity, .6);transform:translateY(-50%) rotate(var(--_expander-indicator-angle));transition:transform .15s ease,opacity .15s ease}a-expander::part(indicator-content){display:grid;place-items:center;width:100%;height:100%}a-expander:has(>:is(a-expander-summary,a-expander-title)~a-expander-indicator)::part(indicator){position:static;grid-column:3;grid-row:1;justify-self:end;align-self:center;margin-inline-end:var(--_expander-indicator-edge);transform:rotate(var(--_expander-indicator-angle))}a-expander::part(region){display:grid;grid-template-rows:0fr;grid-template-columns:minmax(0,1fr)}a-expander:state(open)::part(region){grid-template-rows:1fr}a-expander[priority=tertiary][outdent]::part(header),a-expander[priority=tertiary][outdent]::part(region){margin-inline-start:-1px}a-expander:not(:defined)[priority=tertiary][outdent]>:is(a-expander-summary,a-expander-title){margin-inline-start:-1px}a-expander:not(:defined)[priority=tertiary][outdent]>a-expander-details{margin-inline-start:-5px}a-expander::part(content){display:block;min-height:0;overflow:var(--_expander-content-overflow)}@keyframes anta-expander-unclip{0%{--_expander-content-overflow: clip}to{--_expander-content-overflow: visible}}@media(prefers-reduced-motion:no-preference){a-expander::part(region){transition:grid-template-rows .2s ease}a-expander:state(open){animation:anta-expander-unclip .2s step-end}}a-expander,details[data-anta]{--_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")}a-expander{--_expander-content-overflow: clip;--_expander-indicator-opacity: .6;--_summary-underline: none;--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-indicator-size: 16px;--_expander-indicator-edge: 6px;--_expander-indicator-gap: 2px;--_expander-indicator-stroke: 2px;--_expander-indicator-track: calc(var(--_expander-indicator-edge) + var(--_expander-indicator-size) + var(--_expander-indicator-gap));--_expander-indicator-start: calc(var(--expander-gutter) - var(--_expander-indicator-size) - var(--_expander-indicator-gap));--_expander-open: 0;--_expander-indicator-closed-angle: 0deg;--_expander-indicator-open-angle: 90deg;--_expander-indicator-angle: calc(var(--_expander-indicator-closed-angle) + (var(--_expander-indicator-open-angle) - var(--_expander-indicator-closed-angle)) * var(--_expander-open));--_expander-header-padding-block: 6px;--_expander-header-padding-end: 4px;--_expander-actions-gap: 2px;--_expander-actions-start: 8px;--_expander-actions-end: 4px;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:has(>:is(a-expander-summary,a-expander-title)~a-expander-indicator){--expander-gutter: 12px;--_expander-actions-end: var(--_expander-actions-gap);--_expander-indicator-open-angle: 180deg}a-expander:has(>:is(a-expander-summary,a-expander-title)~a-expander-indicator:is([shape=chevron],[shape=triangle])){--_expander-indicator-closed-angle: 90deg;--_expander-indicator-open-angle: 270deg}a-expander:has(>a-expander-indicator:is([shape=plus],[data-when])){--_expander-indicator-closed-angle: 0deg;--_expander-indicator-open-angle: 0deg}a-expander:is(:state(open),:not(:defined)[state=open],:not(:defined):not([state])[default-state=open]){--_expander-content-overflow: visible;--_expander-open: 1;--_expander-indicator-opacity: 1}a-expander[round]{border-radius:var(--expander-round, 1rem);@supports (border-radius: attr(probe type(<length>),1px)){--expander-round: attr(round type(<length>))}}a-expander>a-expander-actions,a-expander>a-expander-title{display:contents}a-expander>a-expander-indicator{display:grid;place-items:center;position:relative;width:var(--_expander-indicator-size);height:var(--_expander-indicator-size);pointer-events:none}a-expander>a-expander-indicator[shape]:before{content:"";position:absolute;inset:0;background:currentColor;mask:var(--_expander-chevron) center / contain no-repeat}a-expander>a-expander-indicator[shape=triangle]:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5 12 8l-7 5.5z'/%3E%3C/svg%3E")}a-expander>a-expander-indicator[shape=plus]:before,a-expander>a-expander-indicator[shape=plus]:after{content:"";position:absolute;inset:auto;background:currentColor;mask:none;border-radius:calc(var(--_expander-indicator-stroke) / 2)}a-expander>a-expander-indicator[shape=plus]:before{width:calc(var(--_expander-indicator-size) - 2 * var(--_expander-indicator-stroke));height:var(--_expander-indicator-stroke);left:var(--_expander-indicator-stroke);top:calc((var(--_expander-indicator-size) - var(--_expander-indicator-stroke)) / 2)}a-expander>a-expander-indicator[shape=plus]:after{width:var(--_expander-indicator-stroke);height:calc(var(--_expander-indicator-size) - 2 * var(--_expander-indicator-stroke));left:calc((var(--_expander-indicator-size) - var(--_expander-indicator-stroke)) / 2);top:var(--_expander-indicator-stroke);transform:scaleY(calc(1 - var(--_expander-open)));transition:transform .15s ease}@media(prefers-reduced-motion:reduce){a-expander::part(indicator),a-expander>a-expander-indicator[shape=plus]:after{transition:none}}a-expander:not(:defined){display:grid;position:relative;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}a-expander:not(:defined):has(>:is(a-expander-summary,a-expander-title)~a-expander-indicator){grid-template-columns:minmax(0,1fr) auto var(--_expander-indicator-track)}a-expander:not(:defined)>:is(a-expander-summary,a-expander-title){position:relative;display:block;grid-column:1;grid-row:1;align-self:center;padding:var(--_expander-header-padding-block) var(--_expander-header-padding-end) var(--_expander-header-padding-block) var(--expander-gutter)}a-expander:not(:defined):has(>:is(a-expander-summary,a-expander-title)~a-expander-indicator)>:is(a-expander-summary,a-expander-title){padding-inline:var(--expander-gutter) 0;text-align:left}a-expander:not(:defined)>a-expander-actions{grid-column:2;grid-row:1;display:flex;align-items:center;gap:var(--_expander-actions-gap);margin-inline:var(--_expander-actions-start) var(--_expander-actions-end)}a-expander:not(:defined)>a-expander-actions:empty{display:none}a-expander:not(:defined)>a-expander-indicator{grid-column:1;grid-row:1;align-self:center;justify-self:start;margin-inline-start:var(--_expander-indicator-start);width:var(--_expander-indicator-size);height:var(--_expander-indicator-size);transform:rotate(var(--_expander-indicator-angle));opacity:var(--_expander-indicator-opacity)}a-expander:not(:defined):has(>:is(a-expander-summary,a-expander-title)~a-expander-indicator)>a-expander-indicator{grid-column:3;justify-self:end;margin-inline:0 var(--_expander-indicator-edge)}a-expander:not(:defined)>a-expander-details{grid-column:1 / -1;display:none}a-expander:not(:defined)[state=open]>a-expander-details,a-expander:not(:defined):not([state])[default-state=open]>a-expander-details{display:block}a-expander>a-expander-indicator[data-when=open]{display:none}a-expander:is(:state(open),:not(:defined)[state=open],:not(:defined):not([state])[default-state=open])>a-expander-indicator[data-when=open]{display:grid}a-expander:is(:state(open),:not(:defined)[state=open],:not(:defined):not([state])[default-state=open])>a-expander-indicator[data-when=closed]{display:none}a-expander-summary{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:20px;font-weight:584.62;letter-spacing:0;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-summary[level="1"]{font-size:28px;line-height:32px}a-expander-summary[level="2"]{font-size:24px;line-height:28px}a-expander-summary[level="3"]{font-size:20px;line-height:24px}a-expander-summary[level="4"]{font-size:17px;line-height:22px}a-expander-summary[level="6"]{font-size:13px;line-height:16px}a-expander-details{display:block;padding:2px 4px 6px var(--expander-gutter);line-height:20px;overflow:auto}a-expander:has(>:is(a-expander-summary,a-expander-title)~a-expander-indicator)>a-expander-details{padding-inline-start:var(--expander-gutter)}a-expander[priority=tertiary][outdent]>a-expander-details{padding-inline-start:4px;margin-inline-start:-4px}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: currentColor;--expander-text: light-dark(oklch(from var(--expander-tone-source) .5 .125 h), oklch(from var(--expander-tone-source) .77 .11 h));--expander-text-hover: light-dark(oklch(from var(--expander-tone-source) .4 .11 h), oklch(from var(--expander-tone-source) .85 .1 h));--expander-bg-secondary: light-dark(oklch(from var(--expander-tone-source) .99 .004 h), oklch(from var(--expander-tone-source) .13 .02 h));--expander-border-secondary: light-dark(oklch(from var(--expander-tone-source) .935 .028 h), oklch(from var(--expander-tone-source) .21 .045 h));--expander-bg-primary: light-dark(oklch(from var(--expander-tone-source) .955 .02 h), oklch(from var(--expander-tone-source) .185 .05 h));--expander-border-primary: light-dark(oklch(from var(--expander-tone-source) .9 .04 h), oklch(from var(--expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--expander-tone-source: attr(tone type(<color>), currentColor)}}a-expander[disabled],a-expander[disabled][tone]{--expander-text: light-dark(#afa9b1, #635b65)}details[data-anta]{--native-expander-gutter: 24px;--native-expander-summary-padding-block: 6px;--native-expander-summary-font-size: 15px;--native-expander-summary-line-height: 20px;--native-expander-chevron-size: 16px;--native-expander-text: var(--text-2);--native-expander-text-hover: var(--text-1);--native-expander-bg-secondary: var(--bg-2);--native-expander-border-secondary: var(--border-5);--native-expander-bg-primary: var(--bg-4);--native-expander-border-primary: var(--border-4);--native-expander-round-size: 1rem;--native-expander-round: 4px;--native-expander-bg: transparent;--native-expander-border: transparent;display:block;inline-size:100%;box-sizing:border-box;border:0 solid var(--native-expander-border);border-radius:var(--native-expander-round);color:var(--native-expander-text);background:var(--native-expander-bg);font-family:var(--sans-serif);font-size:15px;line-height:var(--native-expander-summary-line-height);transition:background-color .1s ease}details[data-anta][priority=secondary]{--native-expander-bg: var(--native-expander-bg-secondary);--native-expander-border: var(--native-expander-border-secondary);border-width:1px}details[data-anta][priority=primary]{--native-expander-bg: var(--native-expander-bg-primary);--native-expander-border: var(--native-expander-border-primary);border-width:1px}details[data-anta][level="1"]{--native-expander-summary-font-size: 28px;--native-expander-summary-line-height: 32px}details[data-anta][level="2"]{--native-expander-summary-font-size: 24px;--native-expander-summary-line-height: 28px}details[data-anta][level="3"]{--native-expander-summary-font-size: 20px;--native-expander-summary-line-height: 24px}details[data-anta][level="4"]{--native-expander-summary-font-size: 17px;--native-expander-summary-line-height: 20px}details[data-anta][level="6"]{--native-expander-summary-font-size: 13px;--native-expander-summary-line-height: 16px}details[data-anta][round]{--native-expander-round: var(--native-expander-round-size)}details[data-anta][round]:not([round=""]){--native-expander-round: var(--native-expander-round-size);@supports (border-radius: attr(probe type(<length>),1px)){--native-expander-round: attr(round type(<length>), var(--native-expander-round-size))}}details[data-anta][priority=tertiary][outdent]{--native-expander-gutter: 0px}details[data-anta][tone=brand]{--native-expander-text: var(--text-2-brand);--native-expander-text-hover: var(--text-1-brand);--native-expander-bg-secondary: var(--bg-2-brand);--native-expander-border-secondary: var(--border-5-brand);--native-expander-bg-primary: var(--bg-4-brand);--native-expander-border-primary: var(--border-4-brand)}details[data-anta][tone=info]{--native-expander-text: var(--text-2-info);--native-expander-text-hover: var(--text-1-info);--native-expander-bg-secondary: var(--bg-2-info);--native-expander-border-secondary: var(--border-5-info);--native-expander-bg-primary: var(--bg-4-info);--native-expander-border-primary: var(--border-4-info)}details[data-anta][tone=success]{--native-expander-text: var(--text-2-success);--native-expander-text-hover: var(--text-1-success);--native-expander-bg-secondary: var(--bg-2-success);--native-expander-border-secondary: var(--border-5-success);--native-expander-bg-primary: var(--bg-4-success);--native-expander-border-primary: var(--border-4-success)}details[data-anta][tone=warning]{--native-expander-text: var(--text-2-warning);--native-expander-text-hover: var(--text-1-warning);--native-expander-bg-secondary: var(--bg-2-warning);--native-expander-border-secondary: var(--border-5-warning);--native-expander-bg-primary: var(--bg-4-warning);--native-expander-border-primary: var(--border-4-warning)}details[data-anta][tone=critical]{--native-expander-text: var(--text-2-critical);--native-expander-text-hover: var(--text-1-critical);--native-expander-bg-secondary: var(--bg-2-critical);--native-expander-border-secondary: var(--border-5-critical);--native-expander-bg-primary: var(--bg-4-critical);--native-expander-border-primary: var(--border-4-critical)}details[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-expander-tone-source: currentColor;--native-expander-text: light-dark(oklch(from var(--native-expander-tone-source) .5 .125 h), oklch(from var(--native-expander-tone-source) .77 .11 h));--native-expander-text-hover: light-dark(oklch(from var(--native-expander-tone-source) .4 .11 h), oklch(from var(--native-expander-tone-source) .85 .1 h));--native-expander-bg-secondary: light-dark(oklch(from var(--native-expander-tone-source) .99 .004 h), oklch(from var(--native-expander-tone-source) .13 .02 h));--native-expander-border-secondary: light-dark(oklch(from var(--native-expander-tone-source) .935 .028 h), oklch(from var(--native-expander-tone-source) .21 .045 h));--native-expander-bg-primary: light-dark(oklch(from var(--native-expander-tone-source) .955 .02 h), oklch(from var(--native-expander-tone-source) .185 .05 h));--native-expander-border-primary: light-dark(oklch(from var(--native-expander-tone-source) .9 .04 h), oklch(from var(--native-expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--native-expander-tone-source: attr(tone type(<color>), currentColor)}}details[data-anta]>summary{position:relative;box-sizing:border-box;display:block;min-width:0;padding:var(--native-expander-summary-padding-block) 4px var(--native-expander-summary-padding-block) var(--native-expander-gutter);color:inherit;cursor:pointer;font:inherit;font-variation-settings:inherit;font-size:var(--native-expander-summary-font-size);line-height:var(--native-expander-summary-line-height);font-weight:584.62;letter-spacing:0;list-style:none;text-decoration-line:none;transition:color .15s ease}details[data-anta]>summary::-webkit-details-marker{display:none}details[data-anta]>summary::marker{content:""}details[data-anta]>summary:before{content:"";position:absolute;left:calc(var(--native-expander-gutter) - var(--native-expander-chevron-size) - 2px);top:var(--native-expander-summary-padding-block);width:var(--native-expander-chevron-size);height:var(--native-expander-summary-line-height);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;opacity:.6;transform:rotate(0);transition:transform .15s ease,opacity .15s ease,background-color .15s ease}details[data-anta][open]>summary:before{opacity:1;transform:rotate(90deg)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):hover{background:oklch(from var(--native-expander-bg) calc(l + .01) c h)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):active{background:var(--native-expander-bg)}details[data-anta]>summary:hover{color:var(--native-expander-text-hover);text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px}details[data-anta]>summary:hover:before{opacity:1}details[data-anta]>summary:active{color:var(--native-expander-text)}details[data-anta]>summary:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}details[data-anta]>:not(summary){display:block;padding:2px 4px 6px var(--native-expander-gutter);line-height:20px}@media(forced-colors:active){:is(a-expander,details[data-anta]){border-color:CanvasText}:is(a-expander,details[data-anta]):not([priority=primary],[priority=tertiary]){border-style:dashed}:is(a-expander,details[data-anta])[priority=tertiary]{border-color:Canvas}a-expander::part(indicator){forced-color-adjust:none;color:CanvasText}a-expander[disabled]::part(indicator){color:GrayText}a-expander>a-expander-indicator{forced-color-adjust:none;color:CanvasText}details[data-anta]>summary:before{forced-color-adjust:none;background-color:CanvasText}a-expander[disabled]>a-expander-indicator{color:GrayText}}}a-expander-details>p:last-child,a-expander-details>*>p:last-child,details[data-anta]>p:last-child,details[data-anta]>:not(summary)>p:last-child{margin-block-end:0}

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

@@ -1,40 +1,14 @@
 import { HTMLElementBase } from '../anta_helpers';
 import './a-expander.css';
+/** Disclosure with authored regions and an owned native button and inert body.
+ * Manual projection changes neither authored attributes nor children. All
+ * default styling is external; state requests remain cancelable. */
 export declare class AExpanderElement extends HTMLElementBase {
     #private;
     static observedAttributes: string[];
-    private summary;
-    private titleSlot;
-    private region;
-    private header;
-    private roundStyle;
-    private roundObserver?;
-    private internals?;
     constructor();
-    /** 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
-     *  only the shadow). `aria-expanded` is both the a11y signal and the CSS
-     *  state hook; `inert` keeps collapsed content out of the tab order and the
-     *  accessibility tree. */
-    private applyState;
-    /** Compute the requested next state, announce it (cancelable, *before*
-     *  applying), then — uncontrolled only, and only if not vetoed — apply it.
-     *  Controlled: never self-apply; the consumer answers via the `state`
-     *  attribute. See STATEFUL-COMPONENTS.md. */
-    private onSummaryClick;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
 export declare function register_a_expander(): void;