@antadesign/anta 0.3.33 → 0.3.35

package/dist/elements/a-input.js

@@ -1,3 +1,6 @@
+import { CLEAR_TRIGGER, CLEAR_CLICK_EVENT, CLEAR_INPUT_EVENT, ownsInputClearRequest } from "../input-events";
+import { inputTrailingActions } from "./input-trailing-actions";
+import { MODALITY, trackFocusModality } from "./input-focus-modality";
 import { HTMLElementBase, SYNC_POPUP_ARIA } from "../anta_helpers";
 import {
   applyShadowAria,
@@ -23,170 +26,12 @@ const FORWARDED = [
   "step"
 ];
 const BOOL_FORWARDED = /* @__PURE__ */ new Set(["readonly", "required"]);
-let focusFromKeyboard = false;
-const modalityDocs = /* @__PURE__ */ new WeakSet();
-function trackFocusModality(doc) {
-  if (modalityDocs.has(doc)) return;
-  modalityDocs.add(doc);
-  doc.addEventListener("keydown", () => {
-    focusFromKeyboard = true;
-  }, true);
-  doc.addEventListener("pointerdown", () => {
-    focusFromKeyboard = false;
-  }, true);
-}
-const CLEAR_TRIGGER = "clearrequest";
-const CLEAR_CLICK_EVENT = "clearclick";
-const CLEAR_INPUT_EVENT = "clearinput";
-const SUPPORTS_FIELD_SIZING = typeof CSS !== "undefined" && !!CSS.supports?.("field-sizing", "content");
-const SHADOW_STYLE = `
-  :host {
-    --_fs: 15px;
-    --_lh: 20px;
-
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    row-gap: 4px;
-    outline: none;
-  }
-
-  .label {
-    display: none;
-    color: var(--input-label);
-    font-family: var(--sans-serif);
-    font-size: var(--_fs);
-    line-height: var(--_lh);
-    font-weight: 500;
-  }
-
-  .field {
-    --_bc: var(--input-rest-border);
-    --_bw: var(--input-border-width);
-    --_pad-block: 4px;
-
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    min-height: 28px;
-    background: var(--input-bg);
-    border-radius: 4px;
-    box-shadow: inset 0 0 0 var(--_bw) var(--_bc);
-    transition: box-shadow 120ms ease;
-  }
-  :host([multiline]) .field { align-items: stretch; }
-  :host([size="small"]) { --_fs: 13px; --_lh: 16px; }
-  :host([size="large"]) { --_fs: 17px; --_lh: 22px; }
-  :host([size="small"]) .field { min-height: 24px; }
-  :host([size="large"]) .field { min-height: 32px; }
-  :host([round]) .field { border-radius: var(--input-round, 999px); }
-
-  @media (hover: hover) and (pointer: fine) {
-    :host(:not(:disabled)) .field:hover { --_bw: 1px; --_bc: var(--input-border); }
-  }
-  :host(:not([readonly])) .field:has(input:focus, textarea:focus, button:focus-visible),
-  :host([readonly]:state(kb-focus)) .field {
-    --_bw: 1px;
-    --_bc: var(--input-border);
-    outline: 1px solid var(--focus-ring);
-    outline-offset: 1px;
-  }
-  @media (forced-colors: active) { .field { border: 1px solid ButtonBorder; } }
-
-  input, textarea, button {
-    flex: 1 1 auto;
-    min-width: 0;
-    width: 100%;
-    box-sizing: border-box;
-    border: 0;
-    margin: 0;
-    padding-block: 0;
-    padding-inline: 7px;
-    background: transparent;
-    outline: none;
-    color: var(--input-text);
-    font-family: var(--sans-serif);
-    font-stretch: normal;
-    font-style: normal;
-    font-variation-settings: inherit;
-    font-size: var(--_fs);
-    line-height: var(--_lh);
-    font-weight: 400;
-    -webkit-appearance: none;
-            appearance: none;
-  }
-  textarea {
-    resize: none;
-    padding-block: var(--_pad-block);
-    overflow-y: auto;
-  }
-  button { text-align: start; white-space: nowrap; overflow: hidden; cursor: pointer; }
-  button.placeholder { color: var(--input-placeholder); }
-  :host([maxrows]:not([rows])) textarea {
-    max-height: calc(var(--_lh) * var(--_maxrows) + var(--_pad-block) * 2);
-  }
-  input::placeholder, textarea::placeholder { color: var(--input-placeholder); opacity: 1; }
-  input:disabled, textarea:disabled, button:disabled { cursor: not-allowed; }
-  :host([readonly]:not([disabled])) .field,
-  :host([readonly]:not([disabled])) input,
-  :host([readonly]:not([disabled])) textarea { cursor: pointer; }
-  :host([readonly]:not([disabled])) input { text-overflow: ellipsis; }
-  input::-webkit-search-cancel-button,
-  input::-webkit-search-decoration,
-  input::-webkit-search-results-button,
-  input::-webkit-search-results-decoration,
-  input::-webkit-inner-spin-button,
-  input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; display: none; }
-  input::-ms-clear, input::-ms-reveal { display: none; }
-
-  slot[name="leading"], slot[name="trailing"] {
-    display: none;
-    color: var(--input-adornment);
-    font-size: var(--_fs);
-    line-height: var(--_lh);
-    font-stretch: var(--_input-adornment-font-stretch, normal);
-  }
-  :host([dim-actions]) slot[name="leading"],
-  :host([dim-actions]) slot[name="trailing"],
-  :host([dim-actions]) slot[name="clear"] {
-    opacity: 0.6;
-    transition: opacity 120ms ease;
-  }
-  :host([dim-actions]:not(:disabled)) .field:hover slot[name="leading"],
-  :host([dim-actions]:not(:disabled)) .field:hover slot[name="trailing"],
-  :host([dim-actions]:not(:disabled)) .field:hover slot[name="clear"],
-  :host([dim-actions]:not(:disabled)) .field:focus-within slot[name="leading"],
-  :host([dim-actions]:not(:disabled)) .field:focus-within slot[name="trailing"],
-  :host([dim-actions]:not(:disabled)) .field:focus-within slot[name="clear"] {
-    opacity: 1;
-  }
-
-  :host(:disabled) slot[name="leading"],
-  :host(:disabled) slot[name="trailing"] { opacity: 0.5; pointer-events: none; }
-
-  slot[name="clear"] {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    visibility: hidden;
-  }
-  :host(:state(filled):not(:disabled):not([readonly])) slot[name="clear"] { visibility: visible; }
-
-  :host([multiline]:state(filled)) slot[name="clear"] {
-    align-self: flex-start;
-    height: calc(var(--_lh) + var(--_pad-block) * 2);
-  }
-
-  .hint {
-    display: none;
-    gap: 4px;
-    align-items: flex-start;
-    padding-inline-start: 1px;
-    color: var(--input-hint);
-    font-family: var(--sans-serif);
-    font-size: calc(var(--_fs) - 1px);
-    line-height: calc(var(--_lh) - 2px);
-  }
-`;
+const USER_AGENT = typeof navigator !== "undefined" ? navigator.userAgent : "";
+const IS_WEBKIT = /AppleWebKit\//.test(USER_AGENT) && !/Chrom(?:e|ium)\//.test(USER_AGENT);
+const USE_NATIVE_FIELD_SIZING = !IS_WEBKIT && typeof CSS !== "undefined" && !!CSS.supports?.("field-sizing", "content");
+const isInput = (control) => control?.localName === "input";
+const isTextarea = (control) => control?.localName === "textarea";
+const isButton = (control) => control?.localName === "button";
 const READ_DELEGATED_ARIA = /* @__PURE__ */ Symbol("readDelegatedAria");
 const WRITE_DELEGATED_ARIA = /* @__PURE__ */ Symbol("writeDelegatedAria");
 class AInputElement extends HTMLElementBase {
@@ -208,11 +53,15 @@ class AInputElement extends HTMLElementBase {
   labelSlot;
   hintSlot;
   leadingSlot;
+  #trailingSlot;
+  #trailingActions;
   control;
+  #buttonText;
   // The intended value, captured even before the control exists (a framework
   // may set the `value` property before the element connects), so the initial
   // value isn't lost when the control is built.
   pendingValue;
+  #releaseModality;
   // True between connect and the first control build, so attribute changes for
   // forwarded props don't try to touch a control that doesn't exist yet.
   ready = false;
@@ -231,6 +80,8 @@ class AInputElement extends HTMLElementBase {
   popupAriaSource;
   popupControls = null;
   popupActiveDescendant = null;
+  #labelObserver;
+  #labelHasText = false;
   constructor() {
     super();
     try {
@@ -239,40 +90,43 @@ class AInputElement extends HTMLElementBase {
       console.warn("a-input: ElementInternals unavailable \u2014 form association disabled.", err);
     }
     const shadow = this.attachShadow({ mode: "open", delegatesFocus: true });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
-    this.labelSlot = document.createElement("slot");
+    this.labelSlot = this.doc.createElement("slot");
     this.labelSlot.className = "label";
     this.labelSlot.setAttribute("part", "label");
     this.labelSlot.name = "label";
     this.labelSlot.addEventListener("click", () => this.control?.focus());
     this.labelSlot.addEventListener("slotchange", this.onLabelSlotChange);
-    this.field = document.createElement("div");
+    this.field = this.doc.createElement("div");
     this.field.className = "field";
     this.field.setAttribute("part", "field");
-    this.leadingSlot = document.createElement("slot");
+    this.leadingSlot = this.doc.createElement("slot");
     this.leadingSlot.name = "leading";
     this.leadingSlot.setAttribute("part", "leading");
-    const trailingSlot = document.createElement("slot");
-    trailingSlot.name = "trailing";
-    trailingSlot.setAttribute("part", "trailing");
-    const clearSlot = document.createElement("slot");
+    this.#trailingSlot = this.doc.createElement("slot");
+    this.#trailingSlot.name = "trailing";
+    this.#trailingSlot.setAttribute("part", "trailing");
+    this.#trailingActions = inputTrailingActions(this, this.#trailingSlot, "a-input-trailing", (actions) => {
+      this.internals?.states?.[actions ? "add" : "delete"]("trailing-actions");
+    });
+    this.#trailingSlot.addEventListener("slotchange", this.#trailingActions.sync);
+    const clearSlot = this.doc.createElement("slot");
     clearSlot.name = "clear";
     clearSlot.setAttribute("part", "clear");
-    this.field.append(this.leadingSlot, clearSlot, trailingSlot);
-    this.addEventListener(CLEAR_TRIGGER, () => {
+    this.field.append(this.leadingSlot, clearSlot, this.#trailingSlot);
+    this.addEventListener(CLEAR_TRIGGER, (event) => {
+      if (!ownsInputClearRequest(this, event) || this.control?.disabled || this.hasAttribute("readonly")) return;
       const proceed = this.dispatchEvent(
         new CustomEvent(CLEAR_CLICK_EVENT, { bubbles: true, cancelable: true })
       );
       if (proceed) this.clear();
     });
-    this.hintSlot = document.createElement("slot");
+    this.hintSlot = this.doc.createElement("slot");
     this.hintSlot.className = "hint";
     this.hintSlot.setAttribute("part", "hint");
     this.hintSlot.name = "hint";
     this.hintSlot.addEventListener("slotchange", this.onHintSlotChange);
-    const extrasSlot = document.createElement("slot");
-    shadow.append(style, this.labelSlot, this.field, extrasSlot, this.hintSlot);
+    const extrasSlot = this.doc.createElement("slot");
+    shadow.append(this.labelSlot, this.field, extrasSlot, this.hintSlot);
   }
   /** Floating-element anchor protocol (see `anchorRect` in anta_helpers): point
    *  a menu / tooltip anchored to this input at the `.field` box, not the host —
@@ -282,14 +136,31 @@ class AInputElement extends HTMLElementBase {
     return this.field.getBoundingClientRect();
   }
   connectedCallback() {
-    trackFocusModality(this.doc);
+    this.#releaseModality?.();
+    this.#releaseModality = trackFocusModality(this.doc, this.syncButtonFocus);
     if (Object.prototype.hasOwnProperty.call(this, "value")) {
       const v = this.value;
       delete this.value;
       this.value = v;
     }
+    if (Object.prototype.hasOwnProperty.call(this, "name")) {
+      const name = this.name;
+      delete this.name;
+      this.name = name;
+    }
     if (!this.control) this.buildControl();
+    else this.syncAutoHeight();
     this.ready = true;
+    this.#trailingActions.sync();
+    this.applyLabelAria();
+    this.applyDescriptionAria();
+  }
+  disconnectedCallback() {
+    this.#labelObserver?.disconnect();
+    this.#trailingActions.disconnect();
+    this.#releaseModality?.();
+    this.#releaseModality = void 0;
+    this.onBlur();
   }
   [SYNC_POPUP_ARIA](relations) {
     if (relations.clear) {
@@ -315,11 +186,11 @@ class AInputElement extends HTMLElementBase {
     if (name === "multiline" || name === "button" || name === "rows" || name === "maxrows") {
       if (!this.control) return;
       const needTextarea = this.hasAttribute("multiline") || this.hasAttribute("rows");
-      const isTextarea = this.control instanceof HTMLTextAreaElement;
+      const hasTextarea = isTextarea(this.control);
       const needButton = !needTextarea && this.hasAttribute("button");
-      const isButton = this.control instanceof HTMLButtonElement;
-      if (needTextarea !== isTextarea || needButton !== isButton) this.buildControl(this.value);
-      else if (this.control instanceof HTMLTextAreaElement) this.configureTextarea(this.control);
+      const hasButton = isButton(this.control);
+      if (needTextarea !== hasTextarea || needButton !== hasButton) this.buildControl(this.value);
+      else if (isTextarea(this.control)) this.configureTextarea(this.control);
       return;
     }
     if (name === "status") {
@@ -338,6 +209,7 @@ class AInputElement extends HTMLElementBase {
     if (name === "defaultvalue") return;
     if (this.control) {
       this.forward(name, value);
+      if (name === "readonly" || name === "type") this.syncButtonFocus();
       this.syncButtonPresentation();
       this.updateValidity();
     }
@@ -388,7 +260,10 @@ class AInputElement extends HTMLElementBase {
     const control = this.control;
     if (!control) return;
     applyShadowAria(this, control, name, this.delegatedAria.get(name) ?? null);
-    if (name === "aria-label" || name === "aria-labelledby") this.applyLabelAria();
+    if (name === "aria-label" || name === "aria-labelledby") {
+      this.applyLabelAria();
+      this.applyDescriptionAria();
+    }
     if (name === "aria-description" || name === "aria-describedby") this.applyDescriptionAria();
     if (name === "aria-invalid" && !this.delegatedAria.has(name)) this.syncStatus();
     if (name === "aria-controls" || name === "aria-activedescendant") this.applyPopupAria();
@@ -401,6 +276,7 @@ class AInputElement extends HTMLElementBase {
       const control = this.control;
       if (!control) return;
       for (const [name, value] of this.delegatedAria) applyShadowAria(this, control, name, value);
+      this.applyDescriptionAria();
     });
   }
   /** (Re)build the shadow control from the current attributes. */
@@ -409,24 +285,34 @@ class AInputElement extends HTMLElementBase {
     const refocus = prev != null && this.shadowRoot?.activeElement === prev;
     let selStart = null;
     let selEnd = null;
-    if (prev instanceof HTMLInputElement || prev instanceof HTMLTextAreaElement) {
+    let selDirection = null;
+    if (isInput(prev) || isTextarea(prev)) {
       try {
         selStart = prev.selectionStart;
         selEnd = prev.selectionEnd;
+        selDirection = prev.selectionDirection;
       } catch {
       }
     }
     const multiline = this.hasAttribute("multiline") || this.hasAttribute("rows");
     const button = !multiline && this.hasAttribute("button");
-    const next = document.createElement(button ? "button" : multiline ? "textarea" : "input");
-    if (next instanceof HTMLButtonElement) next.type = "button";
+    const next = this.doc.createElement(button ? "button" : multiline ? "textarea" : "input");
+    this.#buttonText = void 0;
+    if (isButton(next)) {
+      next.type = "button";
+      this.#buttonText = this.doc.createElement("span");
+      this.#buttonText.setAttribute("part", "input-label");
+      next.append(this.#buttonText);
+    }
     next.setAttribute("part", "input");
     if (this.control) this.control.replaceWith(next);
     else this.leadingSlot.after(next);
     this.control = next;
+    this.internals?.states?.[multiline ? "add" : "delete"]("multiline");
+    this.internals?.states?.[button ? "add" : "delete"]("button");
     for (const attr of FORWARDED) {
-      if (next instanceof HTMLTextAreaElement && attr === "type") continue;
-      this.forward(attr, this.getAttribute(attr));
+      if (isTextarea(next) && attr === "type") continue;
+      this.forward(attr, attr === "name" ? this.name : this.getAttribute(attr));
     }
     this.syncDisabled();
     this.syncStatus();
@@ -445,9 +331,9 @@ class AInputElement extends HTMLElementBase {
     next.addEventListener("blur", this.onBlur);
     if (refocus) {
       next.focus();
-      if (selStart != null && (next instanceof HTMLInputElement || next instanceof HTMLTextAreaElement)) {
+      if (selStart != null && (isInput(next) || isTextarea(next))) {
         try {
-          next.setSelectionRange(selStart, selEnd ?? selStart);
+          next.setSelectionRange(selStart, selEnd ?? selStart, selDirection ?? void 0);
         } catch {
         }
       }
@@ -457,8 +343,8 @@ class AInputElement extends HTMLElementBase {
     this.updateFilled();
     this.syncAutoHeight();
   }
-  /** Autogrow (no `rows`) via `field-sizing: content` — or the JS fallback where
-   *  that's unsupported — capped by `maxrows`; a fixed `rows` count switches it
+  /** Autogrow (no `rows`) via `field-sizing: content` or the JS fallback,
+   *  capped by `maxrows`; a fixed `rows` count switches it
    *  off for a constant-height box. */
   configureTextarea(ta) {
     const rows = this.getAttribute("rows");
@@ -470,30 +356,35 @@ class AInputElement extends HTMLElementBase {
       ta.style.removeProperty("height");
     } else {
       ta.rows = 1;
-      if (SUPPORTS_FIELD_SIZING) ta.style.setProperty("field-sizing", "content");
-      else ta.style.removeProperty("field-sizing");
+      ta.style.setProperty("field-sizing", USE_NATIVE_FIELD_SIZING ? "content" : "fixed");
       if (maxrows != null) ta.style.setProperty("--_maxrows", String(parseInt(maxrows, 10) || 1));
       else ta.style.removeProperty("--_maxrows");
       this.syncAutoHeight();
     }
   }
-  /** Autogrow fallback for browsers without `field-sizing: content` (Firefox,
-   *  Safari < 26.2). Grows the shadow textarea to fit its content; the CSS
+  /** Autogrow fallback for WebKit and browsers without `field-sizing: content`.
+   *  Grows the shadow textarea to fit its content; the CSS
    *  `max-height` cap (when `maxrows` is set) still clamps it and scrolls past.
-   *  A no-op where `field-sizing` is supported, or when the field isn't
+   *  A no-op on the native sizing path, or when the field isn't
    *  autogrowing (fixed `rows`, or not a textarea) — those size via CSS. */
   syncAutoHeight = () => {
-    if (SUPPORTS_FIELD_SIZING) return;
+    if (USE_NATIVE_FIELD_SIZING) return;
     const ta = this.control;
-    if (!(ta instanceof HTMLTextAreaElement) || this.getAttribute("rows") != null) return;
-    ta.style.height = "auto";
+    if (!isTextarea(ta) || this.getAttribute("rows") != null) return;
+    const minHeight = this.field.style.getPropertyValue("--_input-measured-min-height");
+    const scrollTop = ta.scrollTop;
+    this.field.style.setProperty("--_input-measured-min-height", this.view.getComputedStyle(this.field).height);
+    ta.style.height = "0px";
     ta.style.height = `${ta.scrollHeight}px`;
+    if (minHeight) this.field.style.setProperty("--_input-measured-min-height", minHeight);
+    else this.field.style.removeProperty("--_input-measured-min-height");
+    ta.scrollTop = scrollTop;
   };
   forward(name, value) {
     const c = this.control;
     if (!c) return;
-    if (c instanceof HTMLButtonElement) return;
-    if (c instanceof HTMLTextAreaElement && name === "type") return;
+    if (isButton(c)) return;
+    if (isTextarea(c) && name === "type") return;
     if (BOOL_FORWARDED.has(name)) c.toggleAttribute(name, value != null);
     else if (value == null) c.removeAttribute(name);
     else c.setAttribute(name, value);
@@ -503,13 +394,17 @@ class AInputElement extends HTMLElementBase {
   }
   syncButtonPresentation() {
     const button = this.control;
-    if (!(button instanceof HTMLButtonElement)) return;
+    if (!isButton(button)) return;
     const value = button.value;
-    button.textContent = value || this.getAttribute("placeholder") || "";
-    button.classList.toggle("placeholder", !value);
+    if (this.#buttonText) this.#buttonText.textContent = value || this.getAttribute("placeholder") || "";
+    this.applyDescriptionAria();
   }
   syncFormValue(value) {
-    this.internals?.setFormValue(this.control instanceof HTMLButtonElement ? null : value);
+    if (isButton(this.control)) {
+      this.internals?.setFormValue(null);
+      return;
+    }
+    this.internals?.setFormValue(value);
   }
   /** Reflect `status` into the control's `aria-invalid` and the `:state(invalid)`
    *  custom state. Called on `status` change AND from buildControl — so a field
@@ -537,18 +432,28 @@ class AInputElement extends HTMLElementBase {
   onChange = () => {
     this.dispatchEvent(new Event("change", { bubbles: true }));
   };
-  // Stamp the off-DOM `:state(kb-focus)` when this focus arrived via the keyboard
-  // (see `trackFocusModality`), so the read-only field's ring can draw for keyboard
-  // focus but not a mouse click — the one distinction Chromium's `:focus-visible`
-  // won't make for an <input>. Editable fields ignore the state (ring on `:focus`).
+  syncButtonFocus = () => {
+    if (!isButton(this.control)) return;
+    const show = this.shadowRoot?.activeElement === this.control && this.control.matches(":focus-visible");
+    this.internals?.states?.[show ? "add" : "delete"]("button-focus");
+  };
   onFocus = () => {
+    if (isButton(this.control)) this.syncButtonFocus();
+    const modality = this.doc[MODALITY];
+    if (modality) {
+      modality.active = isButton(this.control) ? this.syncButtonFocus : void 0;
+      if (isButton(this.control)) modality.refresh();
+    }
     try {
-      if (focusFromKeyboard) this.internals?.states?.add("kb-focus");
+      if (this.doc[MODALITY]?.keyboard) this.internals?.states?.add("kb-focus");
       else this.internals?.states?.delete("kb-focus");
     } catch {
     }
   };
   onBlur = () => {
+    const modality = this.doc[MODALITY];
+    if (modality?.active === this.syncButtonFocus) modality.active = void 0;
+    if (isButton(this.control)) this.internals?.states?.delete("button-focus");
     try {
       this.internals?.states?.delete("kb-focus");
     } catch {
@@ -556,14 +461,28 @@ class AInputElement extends HTMLElementBase {
   };
   onLabelSlotChange = () => {
     this.applyLabelAria();
+    this.applyDescriptionAria();
   };
   applyLabelAria() {
     const c = this.control;
     if (!c) return;
-    if (this.delegatedAria.has("aria-label") || this.delegatedAria.has("aria-labelledby")) return;
-    const text = this.labelSlot.assignedNodes().map((n) => n.textContent ?? "").join(" ").trim();
-    if (text) c.setAttribute("aria-label", text);
-    else c.removeAttribute("aria-label");
+    this.#labelObserver?.disconnect();
+    if (this.delegatedAria.has("aria-labelledby")) return;
+    if (this.delegatedAria.has("aria-label")) {
+      c.ariaLabelledByElements = [];
+      return;
+    }
+    const labels = this.labelSlot.assignedElements();
+    c.ariaLabelledByElements = labels;
+    this.#labelHasText = labels.some((label) => !!label.textContent?.trim());
+    if (!isButton(c) || !this.isConnected || !labels.length) return;
+    this.#labelObserver ??= new this.view.MutationObserver(() => {
+      const hasText = this.labelSlot.assignedElements().some((label) => !!label.textContent?.trim());
+      if (hasText === this.#labelHasText) return;
+      this.#labelHasText = hasText;
+      this.applyDescriptionAria();
+    });
+    for (const label of labels) this.#labelObserver.observe(label, { childList: true, characterData: true, subtree: true });
   }
   onHintSlotChange = () => {
     this.applyDescriptionAria();
@@ -571,21 +490,22 @@ class AInputElement extends HTMLElementBase {
   applyDescriptionAria() {
     const c = this.control;
     if (!c) return;
-    if (this.delegatedAria.has("aria-description") || this.delegatedAria.has("aria-describedby")) return;
-    const text = this.hintSlot.assignedNodes().map((n) => n.textContent ?? "").join(" ").trim();
-    if (text) c.setAttribute("aria-description", text);
-    else c.removeAttribute("aria-description");
+    if (this.delegatedAria.has("aria-describedby")) return;
+    if (this.delegatedAria.has("aria-description")) {
+      c.ariaDescribedByElements = [];
+      return;
+    }
+    const named = c.getAttribute("aria-label")?.trim() || (this.delegatedAria.has("aria-labelledby") ? c.ariaLabelledByElements?.length : !this.delegatedAria.has("aria-label") && this.#labelHasText);
+    const value = isButton(c) && named && c.value.trim() ? this.#buttonText : null;
+    c.ariaDescribedByElements = [...value ? [value] : [], ...this.hintSlot.assignedElements()];
   }
   applyPopupAria() {
     const control = this.control;
     if (!control) return;
-    try {
-      if (!this.delegatedAria.has("aria-controls") && "ariaControlsElements" in control)
-        control.ariaControlsElements = this.popupControls ? [this.popupControls] : null;
-      if (!this.delegatedAria.has("aria-activedescendant") && "ariaActiveDescendantElement" in control)
-        control.ariaActiveDescendantElement = this.popupActiveDescendant;
-    } catch {
-    }
+    if (!this.delegatedAria.has("aria-controls"))
+      control.ariaControlsElements = this.popupControls ? [this.popupControls] : null;
+    if (!this.delegatedAria.has("aria-activedescendant"))
+      control.ariaActiveDescendantElement = this.popupActiveDescendant;
   }
   updateFilled() {
     if (this.value) this.internals?.states?.add("filled");
@@ -594,6 +514,10 @@ class AInputElement extends HTMLElementBase {
   updateValidity() {
     const c = this.control;
     if (!this.internals || !c) return;
+    if (isButton(c)) {
+      this.internals.setValidity({});
+      return;
+    }
     if (this.getAttribute("status") === "critical" && c.validity.valid) {
       this.internals.setValidity({ customError: true }, "Invalid value.", c);
     } else {
@@ -653,16 +577,17 @@ class AInputElement extends HTMLElementBase {
   reportValidity() {
     return this.internals?.reportValidity() ?? true;
   }
-  /** Form field name — mirrors the `name` attribute, like native `<input>.name`,
-   *  so `el.name` works (e.g. keying validation messages by field in a form loop). */
+  /** Form field name, reflected to the host attribute for native form lookup. */
   get name() {
     return this.getAttribute("name") ?? "";
   }
   set name(v) {
-    this.setAttribute("name", v);
+    if (v == null) this.removeAttribute("name");
+    else if (this.getAttribute("name") !== String(v)) this.setAttribute("name", String(v));
   }
   // --- Form-associated callbacks ---
   formResetCallback() {
+    if (isButton(this.control)) return;
     this.value = this.getAttribute("defaultvalue") ?? "";
     this.dispatchEvent(new Event("input", { bubbles: true }));
     this.dispatchEvent(new Event("change", { bubbles: true }));

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

@@ -1,12 +1,9 @@
-import { HTMLElementBase } from '../anta_helpers';
+import { HTMLElementBase } from '../element-base';
 import './a-loader.css';
-/**
- * `<a-loader>` — a declarative, icon-sized loading indicator.
- *
- * Its visual treatment is entirely external CSS. The wrapper supplies
- * `--loader-value` for a determinate ring; no shadow DOM or element state is
- * needed.
- */
+/** Compatibility class for applications that explicitly register `<a-loader>`.
+ * Loader renders through CSS and does not require registration. */
 export declare class ALoaderElement extends HTMLElementBase {
 }
+/** Register the compatibility class when an integration requires a defined tag.
+ * Ordinary Loader usage needs only its stylesheet. */
 export declare function register_a_loader(): void;

package/dist/elements/a-loader.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase } from "../element-base";
 import "./a-loader.css";
 class ALoaderElement extends HTMLElementBase {
 }
@@ -8,7 +8,6 @@ function register_a_loader() {
     customElements.define("a-loader", ALoaderElement);
   }
 }
-register_a_loader();
 export {
   ALoaderElement,
   register_a_loader

package/dist/elements/a-menu-item.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-menu-item:not(:defined){display:none}a[data-anta-menu-item]{text-decoration:none}a-menu-item,a[data-anta-menu-item]{--menu-item-color: var(--text-2);--menu-item-icon-color: var(--text-3);--menu-item-hint-color: var(--text-3);--menu-item-hover-bg: light-dark( color-mix(in oklch, currentColor 5%, transparent), color-mix(in oklch, currentColor 10%, transparent) );--menu-item-active-bg: light-dark( color-mix(in oklch, currentColor 8%, transparent), color-mix(in oklch, currentColor 14%, transparent) );--menu-item-selected-bg: var(--menu-item-active-bg);--menu-item-timing-in: 60ms ease-in-out;--menu-item-timing-out: .28s ease-out;--menu-item-padding-x: 8px;--menu-item-padding-y: 6px;display:flex;flex-shrink:0;align-items:center;gap:.6ch;box-sizing:border-box;width:100%;min-height:28px;padding-block:var(--menu-item-padding-y);padding-inline:var(--menu-item-padding-x);border-radius:var(--radius-sm, 4px);color:var(--menu-item-color);background:transparent;transition:background-color var(--menu-item-timing-out);font:inherit;font-variation-settings:inherit;font-size:14px;line-height:16px;text-align:left;white-space:nowrap;cursor:pointer;user-select:none;outline:none}a-menu[round] a-menu-item,a-menu[round] a[data-anta-menu-item]{border-radius:999px}a-menu-item:hover,a-menu-item:focus-visible,a[data-anta-menu-item]:hover,a[data-anta-menu-item]:focus-visible,a-menu-item:has(>a-menu:state(open)),a-menu-item:state(active){background:var(--menu-item-hover-bg);transition:background-color var(--menu-item-timing-in)}a-menu-item:active,a[data-anta-menu-item]:active{background:var(--menu-item-active-bg);transition:none}a-menu-item[selected],a[data-anta-menu-item][aria-current=true]{background:var(--menu-item-selected-bg)}a-menu-item:focus-visible,a[data-anta-menu-item]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}a-menu-item>a-menu-item-label,a-menu-item>a-menu-item-text,a[data-anta-menu-item]>a-menu-item-label,a[data-anta-menu-item]>a-menu-item-text{flex:1 1 auto;min-width:0}a-menu-item>a-menu-item-text,a[data-anta-menu-item]>a-menu-item-text{display:flex;flex-direction:column}a-menu-item:has(>a-menu-item-text),a[data-anta-menu-item]:has(>a-menu-item-text){align-items:flex-start}a-menu-item-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}a-menu-item-hint{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-block-start:1px;color:var(--menu-item-hint-color);font-size:12px;line-height:15px}a-menu-item>a-icon,a[data-anta-menu-item]>a-icon{flex:none;--icon-size: 16px;color:var(--menu-item-icon-color)}a-menu-item>a-checkbox,a-menu-item>a-radio{flex:none;--checkbox-gap: 0;--radio-gap: 0;pointer-events:none}a-menu-item>a-switch[data-menu-item-switch]{flex:none;margin-inline-start:auto;--switch-gap: 0;pointer-events:none}a-menu-item>kbd+a-switch[data-menu-item-switch]{margin-inline-start:0}a-menu-item>a-checkbox:before,a-menu-item>a-checkbox:after,a-menu-item>a-radio:before{margin-block-start:0}a-menu-item>a-radio:after{margin-block-start:calc((var(--radio-control-size) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2)}a-menu-item:has(>:is(a-icon,a-checkbox,a-radio,[data-indicator]):first-child:not(:only-child)),a[data-anta-menu-item]:has(>:is(a-icon,[data-indicator]):first-child:not(:only-child)){padding-inline-start:var(--menu-item-padding-y)}a-menu-item:not([submenu]):has(>a-icon:last-child:not(:only-child)),a[data-anta-menu-item]:has(>a-icon:last-child:not(:only-child)){padding-inline-end:max(0px,var(--menu-item-padding-x) - 2px)}a-menu-item>kbd,a[data-anta-menu-item]>kbd{flex:none;margin-left:auto;padding-left:12px;color:var(--text-5);font:inherit;font-variation-settings:inherit;font-size:1em;letter-spacing:.1ch;white-space:nowrap}a-menu-item[submenu]>a-icon:last-of-type{margin-left:auto}a-menu-item[submenu]>a-icon:last-of-type,a-menu-item>a-icon:last-child:not(:only-child),a[data-anta-menu-item]>a-icon:last-child:not(:only-child){position:relative;inset-inline-end:-2px}a-menu-item[tone=brand],a-menu-item[tone=info],a-menu-item[tone=success],a-menu-item[tone=warning],a-menu-item[tone=critical],a[data-anta-menu-item][tone=brand],a[data-anta-menu-item][tone=info],a[data-anta-menu-item][tone=success],a[data-anta-menu-item][tone=warning],a[data-anta-menu-item][tone=critical]{--menu-item-icon-color: var(--menu-item-color)}a-menu-item[tone=brand],a[data-anta-menu-item][tone=brand]{--menu-item-color: var(--text-2-brand);--menu-item-hint-color: var(--text-3-brand)}a-menu-item[tone=info],a[data-anta-menu-item][tone=info]{--menu-item-color: var(--text-2-info);--menu-item-hint-color: var(--text-3-info)}a-menu-item[tone=success],a[data-anta-menu-item][tone=success]{--menu-item-color: var(--text-2-success);--menu-item-hint-color: var(--text-3-success)}a-menu-item[tone=warning],a[data-anta-menu-item][tone=warning]{--menu-item-color: var(--text-2-warning);--menu-item-hint-color: var(--text-3-warning)}a-menu-item[tone=critical],a[data-anta-menu-item][tone=critical]{--menu-item-color: var(--text-2-critical);--menu-item-hint-color: var(--text-3-critical)}a-menu-item[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[data-anta-menu-item][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--menu-item-tone-source: var(--text-2);--menu-item-color: light-dark( oklch(from var(--menu-item-tone-source) .45 c h), oklch(from var(--menu-item-tone-source) .78 c h) );--menu-item-icon-color: var(--menu-item-color);--menu-item-hint-color: light-dark( oklch(from var(--menu-item-tone-source) .45 c h / .8), oklch(from var(--menu-item-tone-source) .78 c h / .8) );@supports (color: attr(probe type(<color>),red)){--menu-item-tone-source: attr(tone type(<color>), var(--text-2))}}a-menu-item[disabled],a[data-anta-menu-item][aria-disabled=true]{--menu-item-color: var(--text-5);--menu-item-icon-color: var(--text-5);--menu-item-hint-color: var(--text-5);cursor:default;pointer-events:none}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-menu-item:not(:defined){display:none}a[data-anta-menu-item]{text-decoration:none}a-menu-item,a[data-anta-menu-item]{--menu-item-color: var(--text-2);--menu-item-icon-color: var(--text-3);--menu-item-hint-color: var(--text-3);--menu-item-hover-bg: light-dark( color-mix(in oklch, currentColor 5%, transparent), color-mix(in oklch, currentColor 10%, transparent) );--menu-item-active-bg: light-dark( color-mix(in oklch, currentColor 8%, transparent), color-mix(in oklch, currentColor 14%, transparent) );--menu-item-selected-bg: var(--menu-item-active-bg);--menu-item-timing-in: 60ms ease-in-out;--menu-item-timing-out: .28s ease-out;--menu-item-padding-x: 8px;--menu-item-padding-y: 6px;display:flex;flex-shrink:0;align-items:center;gap:.6ch;box-sizing:border-box;width:100%;min-height:28px;padding-block:var(--menu-item-padding-y);padding-inline:var(--menu-item-padding-x);border-radius:var(--menu-item-radius, var(--radius-sm, 4px));color:var(--menu-item-color);background:transparent;transition:background-color var(--menu-item-timing-out);font:inherit;font-variation-settings:inherit;font-size:14px;line-height:16px;text-align:left;white-space:nowrap;cursor:pointer;user-select:none;outline:none}a-menu-item:hover,a-menu-item:focus-visible,a[data-anta-menu-item]:hover,a[data-anta-menu-item]:focus-visible,a-menu-item:has(>a-menu:state(open)),a-menu-item:state(active){background:var(--menu-item-hover-bg);transition:background-color var(--menu-item-timing-in)}a-menu-item:active,a[data-anta-menu-item]:active{background:var(--menu-item-active-bg);transition:none}a-menu-item[selected],a[data-anta-menu-item][aria-current=true]{background:var(--menu-item-selected-bg)}a-menu-item:focus-visible,a[data-anta-menu-item]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}a-menu-item>a-menu-item-label,a-menu-item>a-menu-item-text,a[data-anta-menu-item]>a-menu-item-label,a[data-anta-menu-item]>a-menu-item-text{flex:1 1 auto;min-width:0}a-menu-item>a-menu-item-text,a[data-anta-menu-item]>a-menu-item-text{display:flex;flex-direction:column}a-menu-item:has(>a-menu-item-text),a[data-anta-menu-item]:has(>a-menu-item-text){align-items:flex-start}a-menu-item-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}a-menu-item-hint{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-block-start:1px;color:var(--menu-item-hint-color);font-size:12px;line-height:15px}a-menu-item>a-icon,a[data-anta-menu-item]>a-icon{flex:none;--icon-size: 16px;color:var(--menu-item-icon-color)}a-menu-item>[data-indicator]{flex:none;display:inline-flex;align-items:center;min-height:1lh;pointer-events:none}a-menu-item>a-checkbox,a-menu-item>a-radio{flex:none;--checkbox-gap: 0;--radio-gap: 0;pointer-events:none}a-menu-item>a-switch[data-menu-item-switch]{flex:none;margin-inline-start:auto;--switch-gap: 0;pointer-events:none}a-menu-item>kbd+a-switch[data-menu-item-switch]{margin-inline-start:0}a-menu-item>a-checkbox:before,a-menu-item>a-checkbox:after,a-menu-item>a-radio:before{margin-block-start:0}a-menu-item>a-radio:after{margin-block-start:calc((var(--radio-control-size) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2)}a-menu-item:has(>:is(a-icon,a-checkbox,a-radio,[data-indicator]):first-child:not(:only-child)),a[data-anta-menu-item]:has(>:is(a-icon,[data-indicator]):first-child:not(:only-child)){padding-inline-start:var(--menu-item-padding-y)}a-menu-item:not([submenu]):has(>a-icon:last-child:not(:only-child)),a[data-anta-menu-item]:has(>a-icon:last-child:not(:only-child)){padding-inline-end:max(0px,var(--menu-item-padding-x) - 2px)}a-menu-item>kbd,a[data-anta-menu-item]>kbd{flex:none;margin-left:auto;padding-left:12px;color:var(--text-5);font:inherit;font-variation-settings:inherit;font-size:1em;letter-spacing:.1ch;white-space:nowrap}a-menu-item[submenu]>a-icon:last-of-type{margin-left:auto}a-menu-item[submenu]>a-icon:last-of-type,a-menu-item>a-icon:last-child:not(:only-child),a[data-anta-menu-item]>a-icon:last-child:not(:only-child){position:relative;inset-inline-end:-2px}a-menu-item[tone=brand],a-menu-item[tone=info],a-menu-item[tone=success],a-menu-item[tone=warning],a-menu-item[tone=critical],a[data-anta-menu-item][tone=brand],a[data-anta-menu-item][tone=info],a[data-anta-menu-item][tone=success],a[data-anta-menu-item][tone=warning],a[data-anta-menu-item][tone=critical]{--menu-item-icon-color: var(--menu-item-color)}a-menu-item[tone=brand],a[data-anta-menu-item][tone=brand]{--menu-item-color: var(--text-2-brand);--menu-item-hint-color: var(--text-3-brand)}a-menu-item[tone=info],a[data-anta-menu-item][tone=info]{--menu-item-color: var(--text-2-info);--menu-item-hint-color: var(--text-3-info)}a-menu-item[tone=success],a[data-anta-menu-item][tone=success]{--menu-item-color: var(--text-2-success);--menu-item-hint-color: var(--text-3-success)}a-menu-item[tone=warning],a[data-anta-menu-item][tone=warning]{--menu-item-color: var(--text-2-warning);--menu-item-hint-color: var(--text-3-warning)}a-menu-item[tone=critical],a[data-anta-menu-item][tone=critical]{--menu-item-color: var(--text-2-critical);--menu-item-hint-color: var(--text-3-critical)}a-menu-item[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[data-anta-menu-item][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--menu-item-tone-source: var(--text-2);--menu-item-color: light-dark( oklch(from var(--menu-item-tone-source) .45 c h), oklch(from var(--menu-item-tone-source) .78 c h) );--menu-item-icon-color: var(--menu-item-color);--menu-item-hint-color: light-dark( oklch(from var(--menu-item-tone-source) .45 c h / .8), oklch(from var(--menu-item-tone-source) .78 c h / .8) );@supports (color: attr(probe type(<color>),red)){--menu-item-tone-source: attr(tone type(<color>), var(--text-2))}}a-menu-item[disabled],a[data-anta-menu-item][aria-disabled=true]{--menu-item-color: var(--text-5);--menu-item-icon-color: var(--text-5);--menu-item-hint-color: var(--text-5);cursor:default;pointer-events:none}}