@antadesign/anta 0.3.33 → 0.3.35

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

@@ -1,5 +1,8 @@
+import { CLEAR_TRIGGER, CLEAR_CLICK_EVENT, CLEAR_INPUT_EVENT, ownsInputClearRequest } from "../input-events";
+import { inputTrailingActions } from "./input-trailing-actions";
 import { HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
 import { applyShadowAria, ariaAttributeProperty } from "./shadow-aria";
+import { MODALITY, trackFocusModality } from "./input-focus-modality";
 import "./a-input-time.css";
 const INPUT_TIME_ARIA = [
   "aria-label",
@@ -12,8 +15,6 @@ const INPUT_TIME_ARIA = [
 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");
 const inputColumns = (value) => Array.from(value).reduce((columns, char) => columns + (/[ᄀ-ᅟ⺀-꓏가-힣豈-﫿︐-﹯！-｠￠-￦]/u.test(char) ? 2 : 1), 0);
 const to24 = (h12, period) => period === "pm" ? h12 % 12 + 12 : h12 % 12;
@@ -21,148 +22,8 @@ const parseTime = (value) => {
   const match = /^(\d{1,2}):(\d{2})$/.exec((value ?? "").trim());
   return match ? { h: Math.min(23, Number(match[1])), min: Math.min(59, Number(match[2])) } : null;
 };
-const SHADOW_STYLE = `
-  :host {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    row-gap: 4px;
-    outline: none;
-  }
-
-  .label {
-    display: none;
-    color: var(--input-time-label);
-    font-family: var(--sans-serif);
-    font-size: var(--input-time-font-size);
-    line-height: var(--input-time-line-height);
-    font-weight: 500;
-  }
-
-  .field {
-    --_bc: var(--input-time-border);
-    --_bw: 0.5px;
-
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    min-height: var(--input-time-field-height);
-    background: var(--input-time-bg);
-    border-radius: var(--input-time-field-radius);
-    box-shadow: inset 0 0 0 var(--_bw) var(--_bc);
-    transition: box-shadow 120ms ease;
-  }
-  :host([status]:not([status="neutral"])) .field { --_bw: 1px; }
-
-  @media (hover: hover) and (pointer: fine) {
-    :host(:not(:disabled)) .field:hover {
-      --_bc: var(--input-time-border-hover);
-      --_bw: 1px;
-    }
-  }
-  .field:focus-within {
-    --_bc: var(--input-time-border-hover);
-    --_bw: 1px;
-    outline: 1px solid var(--focus-ring);
-    outline-offset: 1px;
-  }
-  @media (forced-colors: active) { .field { border: 1px solid ButtonBorder; } }
-
-  slot[name="leading"] {
-    display: none;
-    color: var(--input-time-adornment);
-    font-size: var(--input-time-font-size);
-    line-height: var(--input-time-line-height);
-  }
-  :host([dim-actions]) slot[name="leading"] { opacity: 0.6; transition: opacity 120ms ease; }
-  :host([dim-actions]:not(:disabled)) .field:hover slot[name="leading"],
-  :host([dim-actions]:not(:disabled)) .field:focus-within slot[name="leading"] { opacity: 1; }
-  :host(:disabled) slot[name="leading"] { opacity: 0.5; pointer-events: none; }
-
-  .segments {
-    display: flex;
-    align-items: center;
-    flex: 1 1 auto;
-    min-width: 0;
-    padding-inline: 7px;
-    color: var(--input-time-text);
-    font-family: var(--sans-serif);
-    font-stretch: normal;
-    font-style: normal;
-    font-size: var(--input-time-font-size);
-    line-height: var(--input-time-line-height);
-    font-weight: 400;
-  }
-
-  .seg {
-    appearance: none;
-    display: inline-block;
-    box-sizing: border-box;
-    min-width: 0;
-    padding-inline: 1px;
-    border: 0;
-    border-radius: 2px;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-variation-settings: inherit;
-    font-stretch: inherit;
-    font-style: inherit;
-    line-height: inherit;
-    text-align: center;
-    white-space: nowrap;
-    outline: none;
-    cursor: text;
-    font-variant-numeric: tabular-nums;
-  }
-  .seg--period {
-    field-sizing: content;
-    width: auto;
-    color: var(--input-time-period-color);
-  }
-  .seg::placeholder {
-    color: var(--input-time-placeholder);
-    opacity: 1;
-  }
-  .lit {
-    margin-inline: -1px;
-    white-space: pre;
-    color: var(--input-time-text);
-  }
-
-  :host(:disabled) .segments { cursor: not-allowed; }
-  :host(:disabled) .seg { cursor: not-allowed; }
-
-  slot[name="trailing"] { display: none; }
-  :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="trailing"],
-  :host([dim-actions]:not(:disabled)) .field:hover slot[name="clear"],
-  :host([dim-actions]:not(:disabled)) .field:focus-within slot[name="trailing"],
-  :host([dim-actions]:not(:disabled)) .field:focus-within slot[name="clear"] { opacity: 1; }
-
-  slot[name="clear"] {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    visibility: hidden;
-  }
-  :host(:state(filled):not(:disabled)) slot[name="clear"] { visibility: visible; }
-
-  .hint {
-    display: none;
-    gap: 4px;
-    align-items: flex-start;
-    padding-inline-start: 1px;
-    color: var(--input-time-hint);
-    font-family: var(--sans-serif);
-    font-size: calc(var(--input-time-font-size) - 1px);
-    line-height: calc(var(--input-time-line-height) - 2px);
-  }
-`;
 const INPUT_TIME_TEMPLATE = typeof document === "undefined" ? void 0 : (() => {
   const template = document.createElement("template");
-  const style = document.createElement("style");
-  style.textContent = SHADOW_STYLE;
   const label = document.createElement("slot");
   label.className = "label";
   label.part.add("label");
@@ -188,7 +49,7 @@ const INPUT_TIME_TEMPLATE = typeof document === "undefined" ? void 0 : (() => {
   hint.className = "hint";
   hint.part.add("hint");
   hint.name = "hint";
-  template.content.append(style, label, field, document.createElement("slot"), hint);
+  template.content.append(label, field, document.createElement("slot"), hint);
   return template;
 })();
 class AInputTimeElement extends HTMLElementBase {
@@ -200,6 +61,7 @@ class AInputTimeElement extends HTMLElementBase {
     "hour12",
     "status",
     "disabled",
+    "readonly",
     "min",
     "max",
     "required",
@@ -210,6 +72,9 @@ class AInputTimeElement extends HTMLElementBase {
   #labelSlot;
   #hintSlot;
   #segRow;
+  #trailingSlot;
+  #trailingActions;
+  #releaseModality;
   #ready = false;
   #formDisabled = false;
   // True once a value arrived via the `value` property setter — so connect
@@ -232,6 +97,7 @@ class AInputTimeElement extends HTMLElementBase {
   // Pointer-focused inputs keep the browser's caret placement. Keyboard focus
   // selects the segment so a new value can be typed immediately.
   #pointerSegment;
+  #editedSinceChange = false;
   constructor() {
     super();
     try {
@@ -249,27 +115,56 @@ class AInputTimeElement extends HTMLElementBase {
     this.#hintSlot.addEventListener("slotchange", this.#onHintSlotChange);
     this.#field = shadow.querySelector(".field");
     this.#segRow = shadow.querySelector(".segments");
+    this.#trailingSlot = shadow.querySelector("slot[name=trailing]");
+    this.#trailingActions = inputTrailingActions(this, this.#trailingSlot, "a-input-time-trailing", (actions) => {
+      this.#internals?.states?.[actions ? "add" : "delete"]("trailing-actions");
+    });
+    this.#trailingSlot.addEventListener("slotchange", this.#trailingActions.sync);
     this.#field.addEventListener("mousedown", this.#onFieldMouseDown);
+    this.#field.addEventListener("mouseup", this.#resetPointerSegment);
     this.#segRow.addEventListener("input", this.#onInput);
     this.#segRow.addEventListener("keydown", this.#onKeyDown);
     this.#segRow.addEventListener("focusin", this.#onFocusIn);
     this.#segRow.addEventListener("focusout", this.#onFocusOut);
     this.#segRow.addEventListener("paste", this.#onPaste);
-    this.addEventListener(CLEAR_TRIGGER, () => this.clear());
+    this.addEventListener(CLEAR_TRIGGER, (event) => {
+      if (!ownsInputClearRequest(this, event) || this.#disabled || this.hasAttribute("readonly")) return;
+      if (this.dispatchEvent(new CustomEvent(CLEAR_CLICK_EVENT, { bubbles: true, cancelable: true }))) this.clear();
+    });
   }
   getAnchorRect() {
     return this.#field.getBoundingClientRect();
   }
   connectedCallback() {
+    this.#releaseModality?.();
+    this.#releaseModality = trackFocusModality(this.doc, this.#syncFocus);
+    if (Object.prototype.hasOwnProperty.call(this, "name")) {
+      const name = this.name;
+      delete this.name;
+      this.name = name;
+    }
     if (Object.prototype.hasOwnProperty.call(this, "value")) {
       const v = this.value;
       delete this.value;
       this.#seed(v);
-    } else if (!this.#seeded) {
+    } else if (!this.#ready && !this.#seeded) {
       this.#seed(this.getAttribute("value") ?? this.getAttribute("defaultvalue") ?? "");
     }
-    this.#buildSegments();
-    this.#ready = true;
+    if (this.#ready) {
+      this.#applyGroupLabel();
+      this.#applyGroupDescription();
+    } else {
+      this.#buildSegments();
+      this.#ready = true;
+    }
+    this.#trailingActions.sync();
+  }
+  disconnectedCallback() {
+    this.#trailingActions.disconnect();
+    this.#releaseModality?.();
+    this.#releaseModality = void 0;
+    this.#pointerSegment = void 0;
+    this.#internals?.states?.delete("kb-focus");
   }
   /** Seed the value state + canonical cache before the segments exist. */
   #seed(v) {
@@ -294,10 +189,12 @@ class AInputTimeElement extends HTMLElementBase {
     }
     if (name === "status") {
       this.#syncStatus();
+      this.#updateValidity();
       return;
     }
-    if (name === "disabled") {
+    if (name === "disabled" || name === "readonly") {
       this.#syncDisabled();
+      this.#syncFocus();
       return;
     }
     if (name === "min" || name === "max") {
@@ -412,7 +309,7 @@ class AInputTimeElement extends HTMLElementBase {
     this.#literals = [];
     for (const part of parts) {
       if (part.type === "hour" || part.type === "minute" || part.type === "dayPeriod") {
-        const el = document.createElement("input");
+        const el = this.doc.createElement("input");
         const kind = part.type === "dayPeriod" ? "period" : part.type;
         el.className = `seg seg--${kind}`;
         el.type = "text";
@@ -436,7 +333,7 @@ class AInputTimeElement extends HTMLElementBase {
         this.#segs.push(seg);
       } else {
         if (!part.value.trim()) continue;
-        const lit = document.createElement("span");
+        const lit = this.doc.createElement("span");
         lit.className = "lit";
         lit.part.add("literal");
         lit.setAttribute("aria-hidden", "true");
@@ -459,15 +356,16 @@ class AInputTimeElement extends HTMLElementBase {
   #pmText = "PM";
   // --- Native segment editing + navigation ---
   #segFromTarget(target) {
-    if (!(target instanceof HTMLInputElement)) return void 0;
     return this.#segs.find((seg) => seg.el === target);
   }
   // Clicking the field's padding (rather than a native input) moves focus into
-  // the editor. A real pointer interaction leaves caret placement to the browser.
+  // the editor. Compatibility mousedown waits until a touch tap completes;
+  // native input targets keep the browser's caret placement.
   #onFieldMouseDown = (e) => {
+    if (e.button !== 0) return;
     const seg = this.#segFromTarget(e.target);
     if (seg) {
-      this.#pointerSegment = seg.el;
+      this.#pointerSegment = this.shadowRoot?.activeElement === seg.el ? void 0 : seg.el;
       return;
     }
     if (e.target === this.#field || e.target === this.#segRow) {
@@ -475,9 +373,13 @@ class AInputTimeElement extends HTMLElementBase {
       this.#focusSegment(this.#segs[0]);
     }
   };
+  #resetPointerSegment = () => {
+    this.#pointerSegment = void 0;
+  };
   #onFocusIn = (e) => {
     const seg = this.#segFromTarget(e.target);
     if (!seg) return;
+    this.#syncFocus();
     const pointerFocused = this.#pointerSegment === seg.el;
     this.#pointerSegment = void 0;
     if (!pointerFocused) {
@@ -486,20 +388,26 @@ class AInputTimeElement extends HTMLElementBase {
       });
     }
   };
-  #onFocusOut = (_e) => {
+  #onFocusOut = (e) => {
+    if (this.#pointerSegment === e.target) this.#resetPointerSegment();
     queueMicrotask(() => {
+      this.#syncFocus();
       const active = this.shadowRoot?.activeElement;
-      if (this.#segs.some((seg) => seg.el === active)) return;
-      if (this.#clampIfComplete()) this.#commitEdit();
+      if (this.isConnected && this.#segs.some((seg) => seg.el === active)) return;
+      const readonly = this.hasAttribute("readonly");
+      if (readonly && !this.#editedSinceChange) return;
+      if (!readonly && this.#clampIfComplete()) this.#commitEdit();
       this.#dispatch("change");
     });
   };
   #onKeyDown = (e) => {
+    this.#resetPointerSegment();
     if (isModifiedNavigationKey(e)) return;
     const seg = this.#segFromTarget(e.target);
     if (!seg) return;
     const { el } = seg;
     const key = e.key;
+    if ((this.#disabled || this.hasAttribute("readonly")) && ["ArrowUp", "ArrowDown", "PageUp", "PageDown"].includes(key)) return;
     if (key === "ArrowUp" || key === "ArrowDown") {
       e.preventDefault();
       this.#step(seg, key === "ArrowUp" ? 1 : -1);
@@ -533,6 +441,7 @@ class AInputTimeElement extends HTMLElementBase {
     }
   };
   #onPaste = (e) => {
+    if (this.#disabled || this.hasAttribute("readonly")) return;
     const text = e.clipboardData?.getData("text/plain").trim() ?? "";
     if (!/^(?:[01]?\d|2[0-3]):[0-5]\d$/.test(text)) return;
     e.preventDefault();
@@ -542,7 +451,8 @@ class AInputTimeElement extends HTMLElementBase {
   };
   #onInput = (e) => {
     const seg = this.#segFromTarget(e.target);
-    if (!seg || e.isComposing) return;
+    if (!seg || this.#disabled || this.hasAttribute("readonly") || e.isComposing) return;
+    this.#editedSinceChange = true;
     if (seg.kind === "period") this.#onPeriodInput(e, seg);
     else this.#onNumericInput(seg);
   };
@@ -615,6 +525,7 @@ class AInputTimeElement extends HTMLElementBase {
    *  from empty, ↑ lands on min and ↓ on max. Clamps the resulting complete value
    *  into the field's `min`/`max` range (so ↑ can't step past `max`). */
   #step(seg, delta) {
+    this.#editedSinceChange = true;
     if (seg.kind === "period") {
       this.#period = this.#period == null ? "am" : this.#period === "am" ? "pm" : "am";
       this.#clampIfComplete();
@@ -735,29 +646,49 @@ class AInputTimeElement extends HTMLElementBase {
     }
   }
   #dispatch(type) {
+    if (type === "change") this.#editedSinceChange = false;
     this.dispatchEvent(new Event(type, { bubbles: true, composed: type === "input" }));
   }
   #applyGroupLabel() {
-    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");
+    if (this.#delegatedAria.has("aria-labelledby")) return;
+    if (this.#delegatedAria.has("aria-label")) {
+      this.#segRow.ariaLabelledByElements = [];
+      return;
+    }
+    this.#segRow.ariaLabelledByElements = this.#labelSlot.assignedElements();
   }
   #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");
+    if (this.#delegatedAria.has("aria-describedby")) return;
+    if (this.#delegatedAria.has("aria-description")) {
+      this.#segRow.ariaDescribedByElements = [];
+      return;
+    }
+    this.#segRow.ariaDescribedByElements = this.#hintSlot.assignedElements();
   }
   #onHintSlotChange = () => {
     this.#applyGroupDescription();
   };
+  get #disabled() {
+    return this.hasAttribute("disabled") || this.#formDisabled;
+  }
+  #syncFocus = () => {
+    const modality = this.doc[MODALITY];
+    const focused = this.isConnected && !this.#disabled && this.#segs.some((seg) => seg.el === this.shadowRoot?.activeElement);
+    if (modality) {
+      if (focused && this.hasAttribute("readonly")) modality.active = this.#syncFocus;
+      else if (modality.active === this.#syncFocus) modality.active = void 0;
+    }
+    const keyboard = modality?.keyboard;
+    this.#internals?.states?.[keyboard && focused ? "add" : "delete"]("kb-focus");
+  };
   #syncDisabled() {
-    const off = this.hasAttribute("disabled") || this.#formDisabled;
-    for (const seg of this.#segs) seg.el.disabled = off;
+    for (const seg of this.#segs) {
+      seg.el.disabled = this.#disabled;
+      seg.el.readOnly = this.hasAttribute("readonly");
+    }
   }
   #syncStatus() {
     const critical = this.getAttribute("status") === "critical";
@@ -831,7 +762,8 @@ class AInputTimeElement extends HTMLElementBase {
     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));
   }
   // Constraint-validation API, proxied from ElementInternals (mirrors a-input) so
   // the host behaves like a native control and the `InputTime` wrapper can read
@@ -860,6 +792,7 @@ class AInputTimeElement extends HTMLElementBase {
   formDisabledCallback(disabled) {
     this.#formDisabled = disabled;
     this.#syncDisabled();
+    this.#syncFocus();
   }
   formStateRestoreCallback(state) {
     this.value = state ?? "";

package/dist/elements/a-input.css

@@ -1 +1 @@
-@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;background:var(--input-bg);box-shadow:inset 0 0 0 var(--input-border-width) var(--input-rest-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-rest-border: var(--input-border);--input-border-width: .5px;--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[priority=secondary],a-input[priority=tertiary]{--input-bg: transparent}a-input[priority=tertiary]{--input-rest-border: transparent}@media(hover:hover)and (pointer:fine){a-input:not(:defined):not(:disabled):hover:after{box-shadow:inset 0 0 0 1px var(--input-border)}}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-width: 1px;--input-rest-border: var(--input-border);--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[priority=secondary]:disabled,a-input[priority=tertiary]:disabled{--input-bg: transparent}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{--_fs: 15px;--_pad-block: 4px;--_lh: 20px;--_input-action-size: 24px;display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px;outline:none}a-input::part(label){display:none;color:var(--input-label);font-family:var(--sans-serif);font-size:var(--_fs);line-height:var(--_lh);font-weight:500}a-input::part(field){--_bc: var(--input-rest-border);--_bw: var(--input-border-width);display:flex;align-items:center;box-sizing:border-box;min-height:var(--_input-measured-min-height, 28px);background:var(--input-bg);border-radius:4px;box-shadow:inset 0 0 0 var(--_bw) var(--_bc);transition:box-shadow .12s ease}a-input:state(multiline)::part(field){align-items:stretch}a-input[size=small]{--_fs: 13px;--_lh: 16px;--_input-action-size: 20px}a-input[size=large]{--_fs: 17px;--_lh: 22px;--_input-action-size: 28px}a-input:state(multiline){--_input-action-size: calc(var(--_lh) + var(--_pad-block) * 2 - 4px)}a-input[size=small]::part(field){min-height:var(--_input-measured-min-height, 24px)}a-input[size=large]::part(field){min-height:var(--_input-measured-min-height, 32px)}a-input[round]::part(field){border-radius:var(--input-round, 999px)}@media(hover:hover)and (pointer:fine){a-input:not(:disabled)::part(field):hover{--_bw: 1px;--_bc: var(--input-border)}}a-input:not(:disabled):not([readonly]):not(:state(button)):focus::part(field),a-input:not(:disabled):not([readonly]):state(button):focus:state(button-focus)::part(field),a-input:not(:disabled)[readonly]:focus:state(kb-focus)::part(field){--_bw: 1px;--_bc: var(--input-border);outline:var(--_input-focus-width, 1px) solid var(--focus-ring);outline-offset:var(--_input-focus-offset, 1px)}@media(forced-colors:active){a-input::part(field){border:1px solid ButtonBorder}}a-input::part(input){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}a-input:state(multiline)::part(input){resize:none;padding-block:var(--_pad-block);overflow-y:auto}a-input:state(button)::part(input){align-self:stretch;text-align:start;white-space:nowrap;overflow:hidden;cursor:pointer}a-input:state(button):not(:state(filled))::part(input){color:var(--input-placeholder)}a-input[maxrows]:not([rows]):state(multiline)::part(input){max-height:calc(var(--_lh) * var(--_maxrows) + var(--_pad-block) * 2)}a-input:not(:state(button))::part(input)::placeholder{color:var(--input-placeholder);opacity:1}a-input::part(input):disabled{cursor:not-allowed}a-input[readonly]:not([disabled])::part(field),a-input[readonly]:not([disabled]):not(:state(multiline)):not(:state(button))::part(input),a-input[readonly]:not([disabled]):state(multiline)::part(input){cursor:pointer}a-input[readonly]:not([disabled]):not(:state(multiline)):not(:state(button))::part(input){text-overflow:ellipsis}a-input:not(:state(multiline)):not(:state(button))::part(input)::-webkit-search-cancel-button,a-input:not(:state(multiline)):not(:state(button))::part(input)::-webkit-search-decoration,a-input:not(:state(multiline)):not(:state(button))::part(input)::-webkit-search-results-button,a-input:not(:state(multiline)):not(:state(button))::part(input)::-webkit-search-results-decoration,a-input:not(:state(multiline)):not(:state(button))::part(input)::-webkit-inner-spin-button,a-input:not(:state(multiline)):not(:state(button))::part(input)::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;display:none}a-input:not(:state(multiline)):not(:state(button))::part(input)::-ms-clear,a-input:not(:state(multiline)):not(:state(button))::part(input)::-ms-reveal{display:none}a-input::part(leading),a-input::part(trailing){display:none;color:var(--input-adornment);font-size:var(--_fs);line-height:var(--_lh);font-stretch:var(--_input-adornment-font-stretch, normal)}a-input[dim-actions]::part(leading),a-input[dim-actions]::part(trailing),a-input[dim-actions]::part(clear){opacity:var(--_input-actions-opacity, .6);transition:opacity .12s ease}a-input[dim-actions]:not(:disabled)::part(field):hover,a-input[dim-actions]:not(:disabled)::part(field):focus-within{--_input-actions-opacity: 1}a-input:disabled::part(leading),a-input:disabled::part(trailing){opacity:.5;pointer-events:none}a-input::part(clear){display:flex;align-items:center;flex-shrink:0;visibility:hidden;box-sizing:border-box}a-input:has(>[slot=clear])::part(clear){padding:2px}a-input:state(filled):not(:disabled):not([readonly])::part(clear){visibility:visible}a-input:state(multiline):state(filled)::part(clear){align-self:flex-start;height:calc(var(--_lh) + var(--_pad-block) * 2)}a-input::part(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)}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;background:var(--input-bg);box-shadow:inset 0 0 0 var(--input-border-width) var(--input-rest-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-rest-border: var(--input-border);--input-border-width: .5px;--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-3);--input-status-text: var(--text-3);--input-hint: var(--text-3);width:100%}a-input[priority=secondary],a-input[priority=tertiary]{--input-bg: transparent}a-input[priority=tertiary]{--input-rest-border: transparent}@media(hover:hover)and (pointer:fine){a-input:not(:defined):not(:disabled):hover:after{box-shadow:inset 0 0 0 1px var(--input-border)}}a-input:defined>:is(a-input-label,a-input-leading,a-input-clear,a-input-trailing,a-input-hint){display:contents}a-input>a-input-leading>a-select-leading{display:contents;color:inherit}a-input>a-input-trailing>a-select-chevron{color:var(--input-status-text)}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(:state(multiline))::part(input){text-overflow:ellipsis}a-input:has(>[slot=hint])::part(hint){display:flex}a-input:state(multiline):has(>[slot=leading])::part(leading),a-input:state(multiline):has(>[slot=trailing])::part(trailing){align-self:flex-start;height:calc(var(--_lh) + var(--_pad-block) * 2)}a-input>:is([slot=clear],[slot=trailing]) :is(a-button,button[data-anta],a[role=button][data-anta]),a-input>:is(a-button,button[data-anta],a[role=button][data-anta]):is([slot=clear],[slot=trailing]){--_fs: inherit;--_lh: inherit;--_pb: 0px;box-sizing:border-box;width:auto;min-width:var(--_input-action-size);height:var(--_input-action-size);min-height:0;justify-content:center;&[data-anta-icon-only]{width:var(--_input-action-size)}}a-input:state(trailing-actions)::part(trailing){margin-inline-end:0;padding-inline-end:var(--input-trailing-inset, 2px)}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-status-text: var(--text-2-critical)}a-input[status=warning]{--input-status-source: var(--anta-seed-warning);--input-bg: var(--bg-2-warning);--input-status-text: var(--text-2-warning)}a-input[status=success]{--input-status-source: var(--anta-seed-success);--input-bg: var(--bg-2-success);--input-status-text: var(--text-2-success)}a-input[status=info]{--input-status-source: var(--anta-seed-info);--input-bg: var(--bg-2-info);--input-status-text: var(--text-2-info)}a-input[status=brand]{--input-status-source: var(--anta-seed-brand);--input-bg: var(--bg-2-brand);--input-status-text: var(--text-2-brand)}a-input[status]:not([status=neutral]){--input-hint: var(--input-status-text);--input-border-width: 1px;--input-rest-border: var(--input-border);--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[priority=secondary]:disabled,a-input[priority=tertiary]:disabled{--input-bg: transparent}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

@@ -4,6 +4,7 @@ import './a-input.css';
 declare const READ_DELEGATED_ARIA: unique symbol;
 declare const WRITE_DELEGATED_ARIA: unique symbol;
 export declare class AInputElement extends HTMLElementBase {
+    #private;
     static formAssociated: boolean;
     static observedAttributes: string[];
     private internals?;
@@ -28,6 +29,7 @@ export declare class AInputElement extends HTMLElementBase {
      *  below the hint or misalign a tooltip. */
     getAnchorRect(): DOMRect;
     connectedCallback(): void;
+    disconnectedCallback(): 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
@@ -44,14 +46,14 @@ export declare class AInputElement extends HTMLElementBase {
     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
-     *  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. */
     private configureTextarea;
-    /** 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. */
     private syncAutoHeight;
     private forward;
@@ -66,6 +68,7 @@ export declare class AInputElement extends HTMLElementBase {
     private syncStatus;
     private onInput;
     private onChange;
+    private syncButtonFocus;
     private onFocus;
     private onBlur;
     private onLabelSlotChange;
@@ -91,10 +94,9 @@ export declare class AInputElement extends HTMLElementBase {
     get willValidate(): boolean;
     checkValidity(): boolean;
     reportValidity(): boolean;
-    /** 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(): string;
-    set name(v: string);
+    set name(v: string | null | undefined);
     formResetCallback(): void;
     formDisabledCallback(disabled: boolean): void;
     formStateRestoreCallback(state: string): void;