@antadesign/anta 0.3.5 → 0.3.7

package/dist/elements/a-card.js

@@ -0,0 +1,213 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-card.css";
+const SHADOW_STYLE = `
+  .container {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    color: inherit;
+    text-decoration: none;
+    cursor: default;
+    border-radius: var(--card-radius, 8px);
+    -webkit-user-drag: none;
+  }
+  :host([media-position="bottom"]) .container { flex-direction: column-reverse; }
+  :host([media-position="left"]) .container { flex-direction: row; }
+  :host([media-position="right"]) .container { flex-direction: row-reverse; }
+
+  :host([href]) .container { user-select: none; }
+  :host([href]:not([loading])) .container { cursor: pointer; }
+
+  .container:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px var(--focus-ring);
+  }
+
+  [part="media"] { display: none; }
+  [part="media"].has-content { display: block; }
+  :host([media-position="left"]) [part="media"].has-content,
+  :host([media-position="right"]) [part="media"].has-content { flex: none; }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+    padding: var(--card-padding, 16px);
+  }
+
+  .header-row { display: none; }
+  .header-row.has-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  slot[name="header"] { display: none; }
+  slot[name="header"].has-content {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: 17px;
+    line-height: 20px;
+    font-weight: 584.62;
+    letter-spacing: 0;
+    font-feature-settings: 'ss02', 'ss05', 'tnum';
+    color: var(--card-title, var(--text-1));
+  }
+
+  slot[name="actions"] { display: none; }
+  slot[name="actions"].has-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: none;
+  }
+
+  slot[part="body"] {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+    font-size: 15px;
+    line-height: 20px;
+    color: var(--card-text, var(--text-2));
+  }
+
+  slot[name="footer"] { display: none; }
+  slot[name="footer"].has-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding-block-start: var(--card-padding, 16px);
+  }
+
+  :host([selected]) .container { box-shadow: inset 0 0 0 2px var(--card-selected-ring, var(--focus-ring)); }
+  :host([selected]) .container:focus-visible { box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px var(--focus-ring); }
+
+  :host([loading]) .container { pointer-events: none; }
+  @media (prefers-reduced-motion: no-preference) {
+    :host([loading]) [part="content"] { animation: card-pulse 1.4s ease-in-out infinite; }
+  }
+  @keyframes card-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
+`;
+class ACardElement extends HTMLElementBase {
+  static observedAttributes = ["href", "target", "rel", "ping", "loading", "aria-label"];
+  #container;
+  #mediaSlot;
+  #headerRow;
+  #headerSlot;
+  #actionsSlot;
+  #bodySlot;
+  #footerSlot;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.#container = document.createElement("a");
+    this.#container.className = "container";
+    this.#container.setAttribute("part", "container");
+    this.#mediaSlot = document.createElement("slot");
+    this.#mediaSlot.name = "media";
+    this.#mediaSlot.setAttribute("part", "media");
+    const content = document.createElement("div");
+    content.className = "content";
+    content.setAttribute("part", "content");
+    this.#headerRow = document.createElement("div");
+    this.#headerRow.className = "header-row";
+    this.#headerSlot = document.createElement("slot");
+    this.#headerSlot.name = "header";
+    this.#headerSlot.setAttribute("part", "header");
+    this.#actionsSlot = document.createElement("slot");
+    this.#actionsSlot.name = "actions";
+    this.#actionsSlot.setAttribute("part", "actions");
+    this.#bodySlot = document.createElement("slot");
+    this.#bodySlot.setAttribute("part", "body");
+    this.#footerSlot = document.createElement("slot");
+    this.#footerSlot.name = "footer";
+    this.#footerSlot.setAttribute("part", "footer");
+    this.#headerRow.append(this.#headerSlot, this.#actionsSlot);
+    content.append(this.#headerRow, this.#bodySlot, this.#footerSlot);
+    this.#container.append(this.#mediaSlot, content);
+    shadow.append(style, this.#container);
+    this.#mediaSlot.addEventListener("slotchange", () => this.#syncHasContent());
+    this.#footerSlot.addEventListener("slotchange", () => this.#syncHasContent());
+    this.#actionsSlot.addEventListener("slotchange", () => this.#syncHasContent());
+    this.#headerSlot.addEventListener("slotchange", () => {
+      this.#syncHasContent();
+      this.#syncName();
+    });
+    this.#bodySlot.addEventListener("slotchange", () => this.#syncName());
+  }
+  connectedCallback() {
+    this.#syncHasContent();
+    this.#syncLink();
+  }
+  attributeChangedCallback() {
+    this.#syncLink();
+  }
+  /** Toggle the per-zone `has-content` classes (empty zones reserve no box). */
+  #syncHasContent() {
+    const set = (el, has) => el.classList.toggle("has-content", has);
+    set(this.#mediaSlot, this.#mediaSlot.assignedNodes().length > 0);
+    set(this.#footerSlot, this.#footerSlot.assignedNodes().length > 0);
+    const header = this.#headerSlot.assignedNodes().length > 0;
+    const actions = this.#actionsSlot.assignedNodes().length > 0;
+    set(this.#headerSlot, header);
+    set(this.#actionsSlot, actions);
+    set(this.#headerRow, header || actions);
+  }
+  /** Mirror the link attributes onto the shadow anchor — but drop `href` while
+   *  `loading` so a loading card can't navigate. Also reflects `aria-busy`. */
+  #syncLink() {
+    const href = this.getAttribute("href");
+    const loading = this.hasAttribute("loading");
+    if (href != null && !loading) {
+      this.#container.setAttribute("href", href);
+      for (const name of ["target", "rel", "ping"]) {
+        const v = this.getAttribute(name);
+        if (v != null) this.#container.setAttribute(name, v);
+        else this.#container.removeAttribute(name);
+      }
+    } else {
+      for (const name of ["href", "target", "rel", "ping"]) {
+        this.#container.removeAttribute(name);
+      }
+    }
+    if (loading) this.#container.setAttribute("aria-busy", "true");
+    else this.#container.removeAttribute("aria-busy");
+    this.#syncName();
+  }
+  /** Name the anchor (link mode only): explicit aria-label → header → body → href. */
+  #syncName() {
+    if (!this.#container.hasAttribute("href")) {
+      this.#container.removeAttribute("aria-label");
+      return;
+    }
+    const explicit = this.getAttribute("aria-label")?.trim();
+    const name = explicit || this.#slotText(this.#headerSlot) || this.#slotText(this.#bodySlot) || this.getAttribute("href") || "";
+    if (name) this.#container.setAttribute("aria-label", name);
+    else this.#container.removeAttribute("aria-label");
+  }
+  #slotText(slot) {
+    return slot.assignedNodes().map((n) => n.textContent ?? "").join(" ").replace(/\s+/g, " ").trim();
+  }
+}
+function register_a_card() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-card")) {
+    customElements.define("a-card", ACardElement);
+  }
+}
+register_a_card();
+export {
+  ACardElement,
+  register_a_card
+};

package/dist/elements/a-checkbox.css

@@ -1 +1 @@
-@layer anta{a-checkbox{--checkbox-gap: 8px;--checkbox-box-size: 16px;--checkbox-bg: var(--bg-1);--checkbox-fill: #878089;--checkbox-fill-hover: #776e77;--checkbox-fill-active: #635b65;--checkbox-border-neutral: #d4ced4;--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: #c1b9c1;--checkbox-border-active: #9f99a1;--checkbox-icon: #f1eff1;--checkbox-icon-disabled: #c1b9c1;--checkbox-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #44374b 10%, 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-3);--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:start;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:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);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:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);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-box-size: 14px;--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-box-size: 18px;--checkbox-label-fs: 17px;--checkbox-label-lh: 22px;--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: #878089;--checkbox-fill-hover: #776e77;--checkbox-fill-active: #635b65}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=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}a-checkbox[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-bg: oklch(from var(--checkbox-tone-source) .99 calc(c*.03) h);--_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-bg: oklch(from var(--checkbox-tone-source) .15 calc(c*.18) h);--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: #49424c;--checkbox-fill-hover: #534c57;--checkbox-fill-active: #635b65;--checkbox-icon: #d4ced4;--checkbox-icon-disabled: #534c57;--checkbox-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, 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: #49424c;--checkbox-fill-hover: #534c57;--checkbox-fill-active: #635b65}.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}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}}
+@layer anta{a-checkbox{--checkbox-gap: 8px;--checkbox-box-size: 16px;--checkbox-bg: var(--bg-1);--checkbox-fill: #878089;--checkbox-fill-hover: #776e77;--checkbox-fill-active: #635b65;--checkbox-border-neutral: #d4ced4;--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: #c1b9c1;--checkbox-border-active: #9f99a1;--checkbox-icon: #f6f4f6;--checkbox-icon-disabled: #c1b9c1;--checkbox-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #44374b 10%, 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-3);--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:start;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:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);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:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);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-box-size: 14px;--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-box-size: 18px;--checkbox-label-fs: 17px;--checkbox-label-lh: 22px;--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: #878089;--checkbox-fill-hover: #776e77;--checkbox-fill-active: #635b65}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=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}a-checkbox[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-bg: oklch(from var(--checkbox-tone-source) .99 calc(c*.03) h);--_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-bg: oklch(from var(--checkbox-tone-source) .15 calc(c*.18) h);--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: #49424c;--checkbox-fill-hover: #534c57;--checkbox-fill-active: #635b65;--checkbox-icon: #ece9ec;--checkbox-icon-disabled: #534c57;--checkbox-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, 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: #49424c;--checkbox-fill-hover: #534c57;--checkbox-fill-active: #635b65}.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}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}}

package/dist/elements/a-dialog.css

@@ -0,0 +1 @@
+@layer anta{a-dialog{--dialog-bg: var(--bg-1);--dialog-text: var(--text-2);--dialog-border: color-mix(in oklch, black 9%, 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: color-mix(in oklch, black 42%, transparent);display:contents}a-dialog[round]{--dialog-round: attr(round type(<length>), var(--dialog-radius, 10px))}a-dialog:not(:defined){display:none}.dark a-dialog{--dialog-border: color-mix(in oklch, white 14%, transparent);--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);--dialog-overlay: color-mix(in oklch, black 62%, transparent)}}

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

@@ -0,0 +1,26 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-dialog.css';
+export declare class ADialogElement extends HTMLElementBase {
+    #private;
+    static observedAttributes: string[];
+    private dialog;
+    private headerSlot;
+    private footerSlot;
+    private closeSlot;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** Public imperative API — mirrors `<dialog>`. `show()` requests open,
+     *  `close()` requests close; both honor the state contract. */
+    show(): void;
+    close(): void;
+    get open(): boolean;
+    /** Announce a requested OPEN (cancelable, before applying), then — uncontrolled
+     *  and un-vetoed — apply it. Controlled: never self-apply. */
+    requestOpen(): void;
+    /** Announce a requested CLOSE (cancelable, before applying), then — uncontrolled
+     *  and un-vetoed — apply it. Controlled: never self-apply. */
+    requestClose(): void;
+}
+export declare function register_a_dialog(): void;

package/dist/elements/a-dialog.js

@@ -0,0 +1,386 @@
+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: 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);
+    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;
+  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
+  // can't span a BURST (two re-parents in one tick queue two closes; the first
+  // event would clear the flag and the second would be misread as out-of-band).
+  // The counter lets the `close` handler tell our own closes (ignore) from an
+  // out-of-band one (`<form method="dialog">`, a consumer calling the shadow
+  // dialog's close(), bfcache), which it must reconcile.
+  #programmaticCloses = 0;
+  // The intended (uncontrolled) open state, held in JS so it survives a
+  // disconnect → reconnect (a DOM move / re-parent). disconnectedCallback
+  // force-closes the native dialog to free the top layer, but must not lose
+  // whether the user had it open — otherwise a re-parented open dialog would
+  // vanish (trigger-opened) or a re-parented closed one would pop back (a stale
+  // `default-state="open"` re-seeding). Only ever reflects genuine open/close
+  // intent, never the disconnect teardown.
+  #wantOpen = false;
+  // default-state is read ONCE (the first connect), never again — re-seeding on
+  // every connect would reopen a dialog the user has since closed.
+  #seeded = false;
+  // Whether the current pointer press began on the backdrop (the dialog element
+  // itself), so a press-inside → release-on-backdrop drag (text selection) is
+  // NOT read as a backdrop dismiss.
+  #pressedBackdrop = false;
+  // 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;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.dialog = document.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");
+    this.headerSlot.name = "header";
+    this.headerSlot.setAttribute("part", "header");
+    const bodySlot = document.createElement("slot");
+    bodySlot.setAttribute("part", "body");
+    this.footerSlot = document.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.dialog.addEventListener("cancel", (e) => {
+      e.preventDefault();
+      if (!this.#persistent) this.requestClose();
+    });
+    this.dialog.addEventListener("pointerdown", (e) => {
+      this.#pressedBackdrop = e.target === this.dialog;
+    });
+    this.dialog.addEventListener("click", (e) => {
+      if (this.#persistent) return;
+      if (this.#pressedBackdrop && e.target === this.dialog) this.requestClose();
+    });
+    this.dialog.addEventListener("close", () => {
+      if (this.#programmaticCloses > 0) {
+        this.#programmaticCloses--;
+        return;
+      }
+      if (this.#controlled) this.#reflect(parseOpenState(this.getAttribute("state")));
+      else this.#wantOpen = false;
+    });
+    this.addEventListener(CLOSE_TRIGGER, () => this.requestClose());
+  }
+  connectedCallback() {
+    if (this.#controlled) {
+      this.#reflect(parseOpenState(this.getAttribute("state")));
+    } else {
+      if (!this.#seeded) {
+        if (parseOpenState(this.getAttribute("default-state")) === "open") this.#wantOpen = true;
+        this.#seeded = true;
+      }
+      if (this.#wantOpen) this.#open();
+    }
+    this.#syncTriggerListener();
+    this.#syncAccessibleName();
+  }
+  disconnectedCallback() {
+    this.#teardownTriggerListener();
+    if (this.dialog.open) {
+      this.#programmaticCloses++;
+      this.dialog.close();
+    }
+  }
+  attributeChangedCallback(name) {
+    if (name === "state") {
+      if (this.#controlled) this.#reflect(parseOpenState(this.getAttribute("state")));
+      this.#syncTriggerListener();
+    } else if (name === "name") {
+      this.#syncTriggerListener();
+    }
+  }
+  /** Controlled mode: the `state` attribute is present and owns the open state. */
+  get #controlled() {
+    return this.hasAttribute("state");
+  }
+  /** Light-dismiss (Esc + backdrop) disabled — the dialog closes only via
+   *  explicit controls (close button / programmatic). */
+  get #persistent() {
+    return this.hasAttribute("persistent");
+  }
+  /** The currently *applied* open state (read from the native dialog — the
+   *  source of truth for what's painted). */
+  get #current() {
+    return this.dialog.open ? "open" : "closed";
+  }
+  /** Public imperative API — mirrors `<dialog>`. `show()` requests open,
+   *  `close()` requests close; both honor the state contract. */
+  show() {
+    this.requestOpen();
+  }
+  close() {
+    this.requestClose();
+  }
+  get open() {
+    return this.dialog.open;
+  }
+  /** Announce a requested OPEN (cancelable, before applying), then — uncontrolled
+   *  and un-vetoed — apply it. Controlled: never self-apply. */
+  requestOpen() {
+    if (this.#current === "open") return;
+    const ok = this.#announce("open");
+    if (this.#controlled) return;
+    if (ok) this.#open();
+  }
+  /** Announce a requested CLOSE (cancelable, before applying), then — uncontrolled
+   *  and un-vetoed — apply it. Controlled: never self-apply. */
+  requestClose() {
+    if (this.#current === "closed") return;
+    const ok = this.#announce("closed");
+    if (this.#controlled) return;
+    if (ok) this.#close();
+  }
+  /** Dispatch the cancelable `statechange` for a requested transition. Returns
+   *  false if a handler vetoed it. */
+  #announce(next) {
+    return this.dispatchEvent(
+      new CustomEvent("statechange", {
+        cancelable: true,
+        detail: { next, prev: this.#current }
+      })
+    );
+  }
+  /** Reflect a controlled `state` onto the native dialog (idempotent). No
+   *  `statechange` — this is the consumer's own command, not a user gesture. */
+  #reflect(state) {
+    if (state === "open") this.#open();
+    else this.#close();
+  }
+  /** Raw open: show the modal dialog. Records the open intent (survives a
+   *  disconnect). Guarded against a not-connected / already-open native element
+   *  (both throw / no-op). */
+  #open() {
+    this.#wantOpen = true;
+    if (this.dialog.open || !this.isConnected) return;
+    this.dialog.showModal();
+    if (!this.querySelector("[autofocus]")) this.dialog.focus();
+  }
+  /** Raw close. Records the closed intent and counts the pending `close` event as
+   *  ours so the listener doesn't reconcile it. (The disconnect teardown closes
+   *  the native dialog directly, NOT through here, to preserve `#wantOpen`.) */
+  #close() {
+    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();
+    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");
+    if (wanted && !this.#triggerListener) this.#wireTriggerListener();
+    else if (!wanted && this.#triggerListener) this.#teardownTriggerListener();
+  }
+  #wireTriggerListener() {
+    this.#triggerListener = (e) => {
+      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();
+    };
+    this.doc.addEventListener("click", this.#triggerListener);
+  }
+  #teardownTriggerListener() {
+    if (this.#triggerListener) {
+      this.doc.removeEventListener("click", this.#triggerListener);
+      this.#triggerListener = void 0;
+    }
+  }
+}
+function register_a_dialog() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-dialog")) {
+    customElements.define("a-dialog", ADialogElement);
+  }
+}
+register_a_dialog();
+export {
+  ADialogElement,
+  register_a_dialog
+};