@antadesign/anta 0.3.28 → 0.3.30

package/dist/elements/a-input-time.js

@@ -1,5 +1,17 @@
 import { HTMLElementBase } from "../anta_helpers";
+import { applyShadowAria, ariaAttributeProperty } from "./shadow-aria";
 import "./a-input-time.css";
+const INPUT_TIME_ARIA = [
+  "aria-label",
+  "aria-labelledby",
+  "aria-description",
+  "aria-describedby",
+  "aria-invalid",
+  "aria-errormessage"
+];
+const INPUT_TIME_ARIA_SET = new Set(INPUT_TIME_ARIA);
+const READ_DELEGATED_ARIA = /* @__PURE__ */ Symbol("readDelegatedAria");
+const WRITE_DELEGATED_ARIA = /* @__PURE__ */ Symbol("writeDelegatedAria");
 const CLEAR_TRIGGER = "clearrequest";
 const CLEAR_INPUT_EVENT = "clearinput";
 const pad2 = (n) => String(n).padStart(2, "0");
@@ -191,18 +203,22 @@ class AInputTimeElement extends HTMLElementBase {
     "disabled",
     "min",
     "max",
-    "aria-label",
-    "required"
+    "required",
+    ...INPUT_TIME_ARIA
   ];
   #internals;
   #field;
   #labelSlot;
+  #hintSlot;
   #segRow;
   #ready = false;
   #formDisabled = false;
   // True once a value arrived via the `value` property setter — so connect
   // doesn't re-seed from the (possibly empty) attribute and wipe it.
   #seeded = false;
+  #delegatedAria = /* @__PURE__ */ new Map();
+  #consumingAria = /* @__PURE__ */ new Set();
+  #ariaApplyQueued = false;
   // The canonical 24-hour "HH:mm" (or ''), kept in step with the segment state.
   // Mode-independent, so a locale / hour12 switch re-derives display from it
   // rather than from the now-stale display digits.
@@ -230,6 +246,8 @@ class AInputTimeElement extends HTMLElementBase {
     this.#labelSlot = shadow.querySelector(".label");
     this.#labelSlot.addEventListener("click", () => this.#segs[0]?.el.focus());
     this.#labelSlot.addEventListener("slotchange", this.#onLabelSlotChange);
+    this.#hintSlot = shadow.querySelector(".hint");
+    this.#hintSlot.addEventListener("slotchange", this.#onHintSlotChange);
     this.#field = shadow.querySelector(".field");
     this.#segRow = shadow.querySelector(".segments");
     this.#field.addEventListener("mousedown", this.#onFieldMouseDown);
@@ -260,6 +278,11 @@ class AInputTimeElement extends HTMLElementBase {
     this.#iso = this.value;
   }
   attributeChangedCallback(name, _old, value) {
+    if (INPUT_TIME_ARIA_SET.has(name)) {
+      if (this.#consumingAria.has(name)) return;
+      this.#consumeAria(name, value);
+      return;
+    }
     if (!this.#ready) return;
     if (name === "value") {
       if (value !== null) this.value = value;
@@ -282,15 +305,68 @@ class AInputTimeElement extends HTMLElementBase {
       this.#updateValidity();
       return;
     }
-    if (name === "aria-label") {
-      this.#applyGroupLabel();
-      return;
-    }
     if (name === "required") {
+      this.#syncRequired();
       this.#updateValidity();
       return;
     }
   }
+  #consumeAria(name, value) {
+    if (value == null) this.#delegatedAria.delete(name);
+    else this.#delegatedAria.set(name, value);
+    if (this.hasAttribute(name)) {
+      this.#consumingAria.add(name);
+      super.removeAttribute(name);
+      this.#consumingAria.delete(name);
+    }
+    this.#applyDelegatedAria(name);
+    this.#queueDelegatedAria();
+  }
+  removeAttribute(name) {
+    if (INPUT_TIME_ARIA_SET.has(name) && !this.#consumingAria.has(name) && !this.hasAttribute(name)) {
+      const ariaName = name;
+      if (this.#delegatedAria.delete(ariaName)) {
+        this.#applyDelegatedAria(ariaName);
+        this.#queueDelegatedAria();
+      }
+      return;
+    }
+    super.removeAttribute(name);
+  }
+  toggleAttribute(name, force) {
+    if (INPUT_TIME_ARIA_SET.has(name)) {
+      const ariaName = name;
+      const next = force ?? !this.#delegatedAria.has(ariaName);
+      this.#consumeAria(ariaName, next ? "" : null);
+      return next;
+    }
+    return super.toggleAttribute(name, force);
+  }
+  [READ_DELEGATED_ARIA](name) {
+    return this.#delegatedAria.get(name) ?? null;
+  }
+  [WRITE_DELEGATED_ARIA](name, value) {
+    this.#consumeAria(name, value == null ? null : String(value));
+  }
+  #applyDelegatedAria(name) {
+    const value = this.#delegatedAria.get(name) ?? null;
+    if (name === "aria-invalid" || name === "aria-errormessage") {
+      for (const seg of this.#segs) applyShadowAria(this, seg.el, name, value);
+      if (name === "aria-invalid" && value == null) this.#syncStatus();
+      return;
+    }
+    applyShadowAria(this, this.#segRow, name, value);
+    if (name === "aria-label" || name === "aria-labelledby") this.#applyGroupLabel();
+    if (name === "aria-description" || name === "aria-describedby") this.#applyGroupDescription();
+  }
+  #queueDelegatedAria() {
+    if (this.#ariaApplyQueued) return;
+    this.#ariaApplyQueued = true;
+    queueMicrotask(() => {
+      this.#ariaApplyQueued = false;
+      for (const name of this.#delegatedAria.keys()) this.#applyDelegatedAria(name);
+    });
+  }
   // --- Locale-driven segment construction ---
   get #locale() {
     return this.getAttribute("locale") || (typeof navigator !== "undefined" ? navigator.language : "en-US");
@@ -371,7 +447,11 @@ class AInputTimeElement extends HTMLElementBase {
       }
     }
     this.#applyValue(keep);
+    for (const name of this.#delegatedAria.keys()) this.#applyDelegatedAria(name);
+    this.#queueDelegatedAria();
     this.#applyGroupLabel();
+    this.#applyGroupDescription();
+    this.#syncRequired();
     this.#syncStatus();
     this.#syncDisabled();
     this.#commitEdit({ dispatch: false });
@@ -658,25 +738,40 @@ class AInputTimeElement extends HTMLElementBase {
     this.dispatchEvent(new Event(type, { bubbles: true, composed: type === "input" }));
   }
   #applyGroupLabel() {
-    const label = this.getAttribute("aria-label") || this.#labelSlot.assignedNodes().map((n) => n.textContent ?? "").join(" ").trim();
+    if (this.#delegatedAria.has("aria-label") || this.#delegatedAria.has("aria-labelledby")) return;
+    const label = this.#labelSlot.assignedNodes().map((n) => n.textContent ?? "").join(" ").trim();
     if (label) this.#segRow.setAttribute("aria-label", label);
     else this.#segRow.removeAttribute("aria-label");
   }
   #onLabelSlotChange = () => {
     this.#applyGroupLabel();
   };
+  #applyGroupDescription() {
+    if (this.#delegatedAria.has("aria-description") || this.#delegatedAria.has("aria-describedby")) return;
+    const description = this.#hintSlot.assignedNodes().map((n) => n.textContent ?? "").join(" ").trim();
+    if (description) this.#segRow.setAttribute("aria-description", description);
+    else this.#segRow.removeAttribute("aria-description");
+  }
+  #onHintSlotChange = () => {
+    this.#applyGroupDescription();
+  };
   #syncDisabled() {
     const off = this.hasAttribute("disabled") || this.#formDisabled;
     for (const seg of this.#segs) seg.el.disabled = off;
   }
   #syncStatus() {
     const critical = this.getAttribute("status") === "critical";
-    for (const seg of this.#segs) seg.el.setAttribute("aria-invalid", critical ? "true" : "false");
+    const explicit = this.#delegatedAria.get("aria-invalid");
+    for (const seg of this.#segs) seg.el.setAttribute("aria-invalid", explicit ?? (critical ? "true" : "false"));
     try {
       critical ? this.#internals?.states?.add("invalid") : this.#internals?.states?.delete("invalid");
     } catch {
     }
   }
+  #syncRequired() {
+    const required = this.hasAttribute("required");
+    for (const seg of this.#segs) seg.el.setAttribute("aria-required", required ? "true" : "false");
+  }
   #updateFilled() {
     if (this.value) this.#internals?.states?.add("filled");
     else this.#internals?.states?.delete("filled");
@@ -770,6 +865,18 @@ class AInputTimeElement extends HTMLElementBase {
     this.value = state ?? "";
   }
 }
+for (const name of INPUT_TIME_ARIA) {
+  Object.defineProperty(AInputTimeElement.prototype, ariaAttributeProperty(name), {
+    configurable: true,
+    enumerable: true,
+    get() {
+      return this[READ_DELEGATED_ARIA](name);
+    },
+    set(value) {
+      this[WRITE_DELEGATED_ARIA](name, value);
+    }
+  });
+}
 function register_a_input_time() {
   if (typeof customElements === "undefined") return;
   if (!customElements.get("a-input-time")) {

package/dist/elements/a-input.css

@@ -1 +1 @@
-@layer anta.components{a-input:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input:not(:defined)>[slot=leading],a-input:not(:defined)>[slot=trailing],a-input:not(:defined)>[slot=clear],a-input:not(:defined)>[slot=hint]{display:none!important}a-input:not(:defined)>[slot=label]{display:block;color:var(--input-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input:not(:defined):after{content:attr(placeholder);display:block;min-height:28px;line-height:28px;padding-inline:7px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-border);color:var(--input-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-stretch:normal;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a-input[value]:not([value=""]):not([type=password]):not(:defined):after{content:attr(value);color:var(--input-text)}a-input[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}@media(forced-colors:active){a-input:not(:defined):after{border:1px solid ButtonBorder}}a-input[round]:not(:defined):after{border-radius:var(--input-round, 999px)}a-input{transition:opacity .28s ease-out 40ms}a-input:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input{transition:none}}a-input{--input-bg: var(--bg-1);--input-border: var(--border-2);--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-3);--input-hint: var(--text-3);--input-trailing-inset: 7px;width:100%}a-input:has(>[slot=label])::part(label){display:block}a-input:has(>[slot=leading])::part(leading),a-input:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;flex-shrink:0}a-input:has(>[slot=leading])::part(leading){margin-inline-start:7px}a-input:has(>[slot=trailing])::part(trailing){gap:2px;margin-inline-end:var(--input-trailing-inset, 7px)}a-input:has(>[slot=leading])::part(input){padding-inline-start:5px}a-input[truncate]:not([multiline])::part(input){text-overflow:ellipsis}a-input:has(>[slot=hint])::part(hint){display:flex}a-input[multiline]:has(>[slot=leading])::part(leading),a-input[multiline]:has(>[slot=trailing])::part(trailing){align-self:flex-start;height:calc(var(--_lh) + var(--_pad-block) * 2)}a-input:has([slot=trailing] :is(a-button,button)),a-input:has([slot=trailing]:is(a-button,button)){--input-trailing-inset: 0}a-input[round]{--input-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--input-round: attr(round type(<length>), 999px)}}a-input[tone]:not([tone=""]):not([status]){--input-tone-source: var(--border-2);--input-border: light-dark( oklch(from var(--input-tone-source) .7 calc(c*.8) h), oklch(from var(--input-tone-source) .5 calc(c*.8) h) );@supports (color: attr(probe type(<color>),red)){--input-tone-source: attr(tone type(<color>), var(--border-2))}}a-input[status=critical]{--input-status-source: var(--anta-seed-critical);--input-bg: var(--bg-2-critical);--input-hint: var(--text-2-critical)}a-input[status=warning]{--input-status-source: var(--anta-seed-warning);--input-bg: var(--bg-2-warning);--input-hint: var(--text-2-warning)}a-input[status=success]{--input-status-source: var(--anta-seed-success);--input-bg: var(--bg-2-success);--input-hint: var(--text-2-success)}a-input[status=info]{--input-status-source: var(--anta-seed-info);--input-bg: var(--bg-2-info);--input-hint: var(--text-2-info)}a-input[status=brand]{--input-status-source: var(--anta-seed-brand);--input-bg: var(--bg-2-brand);--input-hint: var(--text-2-brand)}a-input[status]:not([status=neutral]){--input-border: light-dark( oklch(from var(--input-status-source) .58 c h), oklch(from var(--input-status-source) .52 c h) )}a-input:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input[size=small] a-icon{--icon-size: 14px}a-input[size=large] a-icon{--icon-size: 18px}a-input [slot=hint]>a-icon{margin-block-start:1px}a-input[size=small] [slot=hint]>a-icon{margin-block-start:.5px}a-input[size=large] [slot=hint]>a-icon{margin-block-start:1.5px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]),textarea[data-anta]{--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);caret-color:currentColor;color-scheme:inherit;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}textarea[data-anta]{block-size:auto;min-block-size:var(--native-field-block-size);resize:vertical;overflow-y:auto}input[data-anta][list]::-webkit-calendar-picker-indicator{opacity:0!important;pointer-events:none!important}@media(hover:hover)and (pointer:fine){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):not(:disabled):hover,textarea[data-anta]:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):focus,textarea[data-anta]:focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):disabled,textarea[data-anta]:disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}input[data-anta][type=number]{appearance:textfield;-moz-appearance:textfield}input[data-anta][type=number]::-webkit-inner-spin-button,input[data-anta][type=number]::-webkit-outer-spin-button{appearance:none;margin:0}input[data-anta][type=file]{--native-file-block-size: 28px;--native-file-padding-block: 4px;--native-file-font-size: 15px;--native-file-line-height: 20px;box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0;padding:0;border:0;color:var(--text-2);color-scheme:inherit;font-family:var(--sans-serif);font-size:var(--native-file-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-file-line-height)}input[data-anta][type=file]::file-selector-button{box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0 8px 0 0;padding:var(--native-file-padding-block) 9px;border:0;border-radius:4px;color:var(--text-2);background:color-mix(in oklch,var(--text-1) 10%,transparent);box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font:inherit;font-variation-settings:inherit;font-weight:450;letter-spacing:.05ch;line-height:var(--native-file-line-height);cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}@media(hover:hover)and (pointer:fine){input[data-anta][type=file]:not(:disabled):hover::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 15%,transparent)}}input[data-anta][type=file]:not(:disabled):active::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 20%,transparent)}input[data-anta][type=file]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=file]:disabled{color:var(--text-4);cursor:not-allowed}input[data-anta][type=file]:disabled::file-selector-button{color:var(--text-4);background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));cursor:not-allowed}select[data-anta]{--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);--native-select-picker-bg: light-dark( color-mix(in oklch, var(--bg-1) 90%, transparent), color-mix(in oklch, var(--bg-1) 78%, transparent) );--native-select-picker-radius: var(--radius-md, 8px);--native-select-picker-border: 1px solid var(--border-3);--native-select-picker-shadow: 0 2px 6px color-mix(in oklch, var(--text-1) 8%, transparent), 0 8px 24px color-mix(in oklch, var(--text-1) 10%, transparent);--native-select-option-color: var(--text-2);--native-select-option-hover: 5%;--native-select-option-active: 8%;--native-select-option-selected: 8%;--native-select-option-padding-x: 8px;--native-select-option-padding-y: 6px;box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);color-scheme:inherit;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}.dark select[data-anta]{--native-select-picker-shadow: 0 2px 8px color-mix(in oklch, black 50%, transparent), 0 12px 32px color-mix(in oklch, black 40%, transparent), inset 0 0 0 1px color-mix(in oklch, white 8%, transparent)}@media(hover:hover)and (pointer:fine){select[data-anta]:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}select[data-anta]:focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta]:disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}@media(forced-colors:active){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]),select[data-anta],textarea[data-anta]{border:1px solid ButtonBorder}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=small],select[data-anta][data-anta-size=small],textarea[data-anta][data-anta-size=small]{--native-field-block-size: 24px;--native-field-padding-block: 2px;--native-field-font-size: 13px;--native-field-line-height: 16px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=large],select[data-anta][data-anta-size=large],textarea[data-anta][data-anta-size=large]{--native-field-block-size: 32px;--native-field-padding-block: 5px;--native-field-font-size: 17px;--native-field-line-height: 22px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[round],select[data-anta][round],textarea[data-anta][round]{--native-field-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--native-field-round: attr(round type(<length>), 999px)}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[tone]:not([tone=""]),textarea[data-anta][tone]:not([tone=""]){--native-field-tone: var(--border-2);--native-field-border: light-dark( oklch(from var(--native-field-tone) .7 calc(c*.8) h), oklch(from var(--native-field-tone) .5 calc(c*.8) h) );@supports (color: attr(probe type(<color>),red)){--native-field-tone: attr(tone type(<color>), var(--border-2))}}@supports (appearance: base-select){select[data-anta],select[data-anta]::picker(select){appearance:base-select;-webkit-appearance:base-select}select[data-anta]{padding:0}select[data-anta]>button{box-sizing:border-box;display:flex;align-items:center;gap:4px;inline-size:100%;min-block-size:var(--native-field-block-size);padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;font-variation-settings:inherit;text-align:start}select[data-anta]>button>selectedcontent{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}select[data-anta]::picker-icon{display:none}select[data-anta]>button>a-icon{margin-inline-start:auto;color:var(--text-3);transition:transform .12s ease}select[data-anta]:open>button>a-icon{transform:rotate(180deg)}select[data-anta]::picker(select){box-sizing:border-box;display:flex;flex-direction:column;gap:1px;margin-block-start:4px;padding:4px;border:var(--native-select-picker-border);border-radius:var(--native-select-picker-radius);background:var(--native-select-picker-bg);box-shadow:var(--native-select-picker-shadow);color:var(--native-select-option-color);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}select[data-anta] option{box-sizing:border-box;min-block-size:28px;padding-block:var(--native-select-option-padding-y);padding-inline:var(--native-select-option-padding-x);border-radius:var(--radius-sm, 4px);background:transparent;color:var(--native-select-option-color);cursor:pointer;font-family:var(--sans-serif);font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;letter-spacing:normal;line-height:16px;text-transform:none;transition:background-color .28s ease-out}select[data-anta] option:is(:hover,:focus-visible){background:color-mix(in oklch,currentColor var(--native-select-option-hover),transparent);transition:background-color 60ms ease-in-out}select[data-anta] option:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta] option:active{background:color-mix(in oklch,currentColor var(--native-select-option-active),transparent);transition:none}select[data-anta] option:checked{background:color-mix(in oklch,currentColor var(--native-select-option-selected),transparent);transition:background-color .28s ease-out}select[data-anta] option:disabled{color:var(--text-5);cursor:default}select[data-anta] optgroup{display:flex;flex-direction:column;gap:1px;color:var(--text-5);font-family:var(--sans-serif);font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-input:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input:not(:defined)>[slot=leading],a-input:not(:defined)>[slot=trailing],a-input:not(:defined)>[slot=clear],a-input:not(:defined)>[slot=hint]{display:none!important}a-input:not(:defined)>[slot=label]{display:block;color:var(--input-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input:not(:defined):after{content:attr(placeholder);display:block;min-height:28px;line-height:28px;padding-inline:7px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-border);color:var(--input-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-stretch:normal;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a-input[value]:not([value=""]):not([type=password]):not(:defined):after{content:attr(value);color:var(--input-text)}a-input[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}@media(forced-colors:active){a-input:not(:defined):after{border:1px solid ButtonBorder}}a-input[round]:not(:defined):after{border-radius:var(--input-round, 999px)}a-input{transition:opacity .28s ease-out 40ms}a-input:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input{transition:none}}a-input{--input-bg: var(--bg-1);--input-border: var(--border-2);--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-3);--input-hint: var(--text-3);--input-trailing-inset: 7px;width:100%}a-input:has(>[slot=label])::part(label){display:block}a-input:has(>[slot=leading])::part(leading),a-input:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;flex-shrink:0}a-input:has(>[slot=leading])::part(leading){margin-inline-start:7px}a-input:has(>[slot=trailing])::part(trailing){gap:2px;margin-inline-end:var(--input-trailing-inset, 7px)}a-input:has(>[slot=leading])::part(input){padding-inline-start:5px}a-input[truncate]:not([multiline])::part(input){text-overflow:ellipsis}a-input:has(>[slot=hint])::part(hint){display:flex}a-input[multiline]:has(>[slot=leading])::part(leading),a-input[multiline]:has(>[slot=trailing])::part(trailing){align-self:flex-start;height:calc(var(--_lh) + var(--_pad-block) * 2)}a-input:has([slot=trailing] :is(a-button,button)),a-input:has([slot=trailing]:is(a-button,button)){--input-trailing-inset: 0}a-input[round]{--input-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--input-round: attr(round type(<length>), 999px)}}a-input[tone]:not([tone=""]):not([status]){--input-tone-source: var(--border-2);--input-border: light-dark( oklch(from var(--input-tone-source) .7 calc(c*.8) h), oklch(from var(--input-tone-source) .5 calc(c*.8) h) );@supports (color: attr(probe type(<color>),red)){--input-tone-source: attr(tone type(<color>), var(--border-2))}}a-input[status=critical]{--input-status-source: var(--anta-seed-critical);--input-bg: var(--bg-2-critical);--input-hint: var(--text-2-critical)}a-input[status=warning]{--input-status-source: var(--anta-seed-warning);--input-bg: var(--bg-2-warning);--input-hint: var(--text-2-warning)}a-input[status=success]{--input-status-source: var(--anta-seed-success);--input-bg: var(--bg-2-success);--input-hint: var(--text-2-success)}a-input[status=info]{--input-status-source: var(--anta-seed-info);--input-bg: var(--bg-2-info);--input-hint: var(--text-2-info)}a-input[status=brand]{--input-status-source: var(--anta-seed-brand);--input-bg: var(--bg-2-brand);--input-hint: var(--text-2-brand)}a-input[status]:not([status=neutral]){--input-border: light-dark( oklch(from var(--input-status-source) .58 c h), oklch(from var(--input-status-source) .52 c h) )}a-input:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input[size=small] a-icon{--icon-size: 14px}a-input[size=large] a-icon{--icon-size: 18px}a-input [slot=hint]>a-icon{margin-block-start:1px}a-input[size=small] [slot=hint]>a-icon{margin-block-start:.5px}a-input[size=large] [slot=hint]>a-icon{margin-block-start:1.5px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]),textarea[data-anta]{--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);caret-color:currentColor;color-scheme:inherit;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}textarea[data-anta]{block-size:auto;min-block-size:var(--native-field-block-size);resize:vertical;overflow-y:auto}input[data-anta][list]::-webkit-calendar-picker-indicator{opacity:0!important;pointer-events:none!important}@media(hover:hover)and (pointer:fine){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):not(:disabled):hover,textarea[data-anta]:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):focus,textarea[data-anta]:focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):disabled,textarea[data-anta]:disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}input[data-anta][type=number]{appearance:textfield;-moz-appearance:textfield}input[data-anta][type=number]::-webkit-inner-spin-button,input[data-anta][type=number]::-webkit-outer-spin-button{appearance:none;margin:0}input[data-anta][type=file]{--native-file-block-size: 28px;--native-file-padding-block: 4px;--native-file-font-size: 15px;--native-file-line-height: 20px;box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0;padding:0;border:0;color:var(--text-2);color-scheme:inherit;font-family:var(--sans-serif);font-size:var(--native-file-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-file-line-height)}input[data-anta][type=file]::file-selector-button{box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0 8px 0 0;padding:var(--native-file-padding-block) 9px;border:0;border-radius:4px;color:var(--text-2);background:color-mix(in oklch,var(--text-1) 10%,transparent);box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font:inherit;font-variation-settings:inherit;font-weight:450;letter-spacing:.05ch;line-height:var(--native-file-line-height);cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}@media(hover:hover)and (pointer:fine){input[data-anta][type=file]:not(:disabled):hover::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 15%,transparent)}}input[data-anta][type=file]:not(:disabled):active::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 20%,transparent)}input[data-anta][type=file]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=file]:disabled{color:var(--text-4);cursor:not-allowed}input[data-anta][type=file]:disabled::file-selector-button{color:var(--text-4);background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));cursor:not-allowed}select[data-anta]{--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);--native-select-picker-bg: light-dark( color-mix(in oklch, var(--bg-1) 90%, transparent), color-mix(in oklch, var(--bg-1) 78%, transparent) );--native-select-picker-radius: var(--radius-md, 8px);--native-select-picker-border: 1px solid var(--border-3);--native-select-picker-shadow: 0 2px 6px color-mix(in oklch, var(--text-1) 8%, transparent), 0 8px 24px color-mix(in oklch, var(--text-1) 10%, transparent);--native-select-option-color: var(--text-2);--native-select-option-hover: 5%;--native-select-option-active: 8%;--native-select-option-selected: 8%;--native-select-option-padding-x: 8px;--native-select-option-padding-y: 6px;box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);color-scheme:inherit;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}.dark select[data-anta]{--native-select-picker-shadow: 0 2px 8px color-mix(in oklch, black 50%, transparent), 0 12px 32px color-mix(in oklch, black 40%, transparent), inset 0 0 0 1px color-mix(in oklch, white 8%, transparent)}@media(hover:hover)and (pointer:fine){select[data-anta]:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}select[data-anta]:focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta]:disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}@media(forced-colors:active){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]),select[data-anta],textarea[data-anta]{border:1px solid ButtonBorder}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=small],select[data-anta][data-anta-size=small],textarea[data-anta][data-anta-size=small]{--native-field-block-size: 24px;--native-field-padding-block: 2px;--native-field-font-size: 13px;--native-field-line-height: 16px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=large],select[data-anta][data-anta-size=large],textarea[data-anta][data-anta-size=large]{--native-field-block-size: 32px;--native-field-padding-block: 5px;--native-field-font-size: 17px;--native-field-line-height: 22px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[round],select[data-anta][round],textarea[data-anta][round]{--native-field-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--native-field-round: attr(round type(<length>), 999px)}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[tone]:not([tone=""]),textarea[data-anta][tone]:not([tone=""]){--native-field-tone: var(--border-2);--native-field-border: light-dark( oklch(from var(--native-field-tone) .7 calc(c*.8) h), oklch(from var(--native-field-tone) .5 calc(c*.8) h) );@supports (color: attr(probe type(<color>),red)){--native-field-tone: attr(tone type(<color>), var(--border-2))}}@supports (appearance: base-select){select[data-anta],select[data-anta]::picker(select){appearance:base-select;-webkit-appearance:base-select}select[data-anta]{padding:0}select[data-anta]>button{box-sizing:border-box;display:flex;align-items:center;gap:4px;inline-size:100%;min-block-size:var(--native-field-block-size);padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;font-variation-settings:inherit;text-align:start}select[data-anta]>button>selectedcontent{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}select[data-anta]::picker-icon{display:none}select[data-anta]>button>a-icon{margin-inline-start:auto;color:var(--text-3);transition:transform .12s ease}select[data-anta]:open>button>a-icon{transform:rotate(180deg)}select[data-anta]::picker(select){box-sizing:border-box;display:flex;flex-direction:column;gap:1px;margin-block-start:4px;padding:4px;border:var(--native-select-picker-border);border-radius:var(--native-select-picker-radius);background:var(--native-select-picker-bg);box-shadow:var(--native-select-picker-shadow);color:var(--native-select-option-color);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}select[data-anta] option{box-sizing:border-box;min-block-size:28px;padding-block:var(--native-select-option-padding-y);padding-inline:var(--native-select-option-padding-x);border-radius:var(--radius-sm, 4px);background:transparent;color:var(--native-select-option-color);cursor:pointer;font-family:var(--sans-serif);font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;letter-spacing:normal;line-height:16px;text-transform:none;transition:background-color .28s ease-out}select[data-anta] option:is(:hover,:focus-visible){background:color-mix(in oklch,currentColor var(--native-select-option-hover),transparent);transition:background-color 60ms ease-in-out}select[data-anta] option:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta] option:active{background:color-mix(in oklch,currentColor var(--native-select-option-active),transparent);transition:none}select[data-anta] option:checked{background:color-mix(in oklch,currentColor var(--native-select-option-selected),transparent);transition:background-color .28s ease-out}select[data-anta] option:disabled{color:var(--text-5);cursor:default}select[data-anta] optgroup{display:flex;flex-direction:column;gap:1px;color:var(--text-5);font-family:var(--sans-serif);font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase}}}

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

@@ -1,5 +1,8 @@
-import { HTMLElementBase } from '../anta_helpers';
+import { HTMLElementBase, SYNC_POPUP_ARIA, type PopupAriaRelations } from '../anta_helpers';
+import { type ShadowAriaAttribute } from './shadow-aria';
 import './a-input.css';
+declare const READ_DELEGATED_ARIA: unique symbol;
+declare const WRITE_DELEGATED_ARIA: unique symbol;
 export declare class AInputElement extends HTMLElementBase {
     static formAssociated: boolean;
     static observedAttributes: string[];
@@ -12,6 +15,12 @@ export declare class AInputElement extends HTMLElementBase {
     private pendingValue?;
     private ready;
     private formDisabled;
+    private delegatedAria;
+    private consumingAria;
+    private ariaApplyQueued;
+    private popupAriaSource?;
+    private popupControls;
+    private popupActiveDescendant;
     constructor();
     /** Floating-element anchor protocol (see `anchorRect` in anta_helpers): point
      *  a menu / tooltip anchored to this input at the `.field` box, not the host —
@@ -19,7 +28,20 @@ export declare class AInputElement extends HTMLElementBase {
      *  below the hint or misalign a tooltip. */
     getAnchorRect(): DOMRect;
     connectedCallback(): void;
+    [SYNC_POPUP_ARIA](relations: PopupAriaRelations): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    /** Standard ARIA is the raw custom-element API, but its semantic target is the
+     * native shadow field. Consume it synchronously so the host never remains a
+     * duplicate control after upgrade. */
+    private consumeAria;
+    /** React/Preact may remove a prop after Anta has already consumed its host
+     * attribute. Catch that no-op DOM removal so the shadow control still updates. */
+    removeAttribute(name: string): void;
+    toggleAttribute(name: string, force?: boolean): boolean;
+    [READ_DELEGATED_ARIA](name: ShadowAriaAttribute): string | null;
+    [WRITE_DELEGATED_ARIA](name: ShadowAriaAttribute, value: unknown): void;
+    private applyDelegatedAria;
+    private queueDelegatedAria;
     /** (Re)build the shadow control from the current attributes. */
     private buildControl;
     /** Autogrow (no `rows`) via `field-sizing: content` — or the JS fallback where
@@ -34,6 +56,8 @@ export declare class AInputElement extends HTMLElementBase {
     private syncAutoHeight;
     private forward;
     private syncDisabled;
+    private syncButtonPresentation;
+    private syncFormValue;
     /** Reflect `status` into the control's `aria-invalid` and the `:state(invalid)`
      *  custom state. Called on `status` change AND from buildControl — so a field
      *  that mounts already `status="critical"` gets `:state(invalid)` on the FIRST
@@ -48,6 +72,7 @@ export declare class AInputElement extends HTMLElementBase {
     private applyLabelAria;
     private onHintSlotChange;
     private applyDescriptionAria;
+    private applyPopupAria;
     private updateFilled;
     private updateValidity;
     /** The current text value. Reading prefers the live control; before it's
@@ -75,3 +100,4 @@ export declare class AInputElement extends HTMLElementBase {
     formStateRestoreCallback(state: string): void;
 }
 export declare function register_a_input(): void;
+export {};