@antadesign/anta 0.3.28 → 0.3.30

package/dist/elements/a-input.js

@@ -1,4 +1,10 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, SYNC_POPUP_ARIA } from "../anta_helpers";
+import {
+  applyShadowAria,
+  ariaAttributeProperty,
+  SHADOW_ARIA_ATTRIBUTES,
+  SHADOW_ARIA_ATTRIBUTE_SET
+} from "./shadow-aria";
 import "./a-input.css";
 const FORWARDED = [
   "placeholder",
@@ -14,12 +20,7 @@ const FORWARDED = [
   "required",
   "min",
   "max",
-  "step",
-  // `aria-label` on the host names the internal control (the actual textbox);
-  // without forwarding it, a bare `<a-input aria-label>` leaves the control
-  // unnamed. `applyLabelAria` already defers to a host `aria-label` over the
-  // label-slot text, so the two don't fight.
-  "aria-label"
+  "step"
 ];
 const BOOL_FORWARDED = /* @__PURE__ */ new Set(["readonly", "required"]);
 let focusFromKeyboard = false;
@@ -83,7 +84,7 @@ const SHADOW_STYLE = `
   @media (hover: hover) and (pointer: fine) {
     :host(:not(:disabled)) .field:hover { --_bw: 1px; }
   }
-  :host(:not([readonly])) .field:has(input:focus, textarea:focus),
+  :host(:not([readonly])) .field:has(input:focus, textarea:focus, button:focus-visible),
   :host([readonly]:state(kb-focus)) .field {
     --_bw: 1px;
     outline: 1px solid var(--focus-ring);
@@ -91,7 +92,7 @@ const SHADOW_STYLE = `
   }
   @media (forced-colors: active) { .field { border: 1px solid ButtonBorder; } }
 
-  input, textarea {
+  input, textarea, button {
     flex: 1 1 auto;
     min-width: 0;
     width: 100%;
@@ -118,11 +119,13 @@ const SHADOW_STYLE = `
     padding-block: var(--_pad-block);
     overflow-y: auto;
   }
+  button { text-align: start; white-space: nowrap; overflow: hidden; cursor: pointer; }
+  button.placeholder { color: var(--input-placeholder); }
   :host([maxrows]:not([rows])) textarea {
     max-height: calc(var(--_lh) * var(--_maxrows) + var(--_pad-block) * 2);
   }
   input::placeholder, textarea::placeholder { color: var(--input-placeholder); opacity: 1; }
-  input:disabled, textarea:disabled { cursor: not-allowed; }
+  input:disabled, textarea:disabled, button:disabled { cursor: not-allowed; }
   :host([readonly]:not([disabled])) .field,
   :host([readonly]:not([disabled])) input,
   :host([readonly]:not([disabled])) textarea { cursor: pointer; }
@@ -181,13 +184,17 @@ const SHADOW_STYLE = `
     line-height: calc(var(--_lh) - 2px);
   }
 `;
+const READ_DELEGATED_ARIA = /* @__PURE__ */ Symbol("readDelegatedAria");
+const WRITE_DELEGATED_ARIA = /* @__PURE__ */ Symbol("writeDelegatedAria");
 class AInputElement extends HTMLElementBase {
   static formAssociated = true;
   static observedAttributes = [
     ...FORWARDED,
+    ...SHADOW_ARIA_ATTRIBUTES,
     "value",
     "defaultvalue",
     "multiline",
+    "button",
     "rows",
     "maxrows",
     "status",
@@ -209,6 +216,18 @@ class AInputElement extends HTMLElementBase {
   // Set by formDisabledCallback when an ancestor <fieldset disabled> / disabled
   // form turns the field off (the host can't carry a [disabled] attribute itself).
   formDisabled = false;
+  // Standard role/aria attributes are consumed from the neutral host and
+  // applied to the native shadow control. The values live off-DOM so the host
+  // does not become a second control in the accessibility tree.
+  delegatedAria = /* @__PURE__ */ new Map();
+  consumingAria = /* @__PURE__ */ new Set();
+  ariaApplyQueued = false;
+  // Direct element relationships supplied by an adjacent a-menu. These avoid
+  // renderer-local IDs and apply only when the consumer has not authored the
+  // corresponding ARIA relationship explicitly.
+  popupAriaSource;
+  popupControls = null;
+  popupActiveDescendant = null;
   constructor() {
     super();
     try {
@@ -261,14 +280,6 @@ class AInputElement extends HTMLElementBase {
   }
   connectedCallback() {
     trackFocusModality(this.doc);
-    const type = this.getAttribute("type")?.toLowerCase();
-    if (this.internals && type !== "number" && type !== "search") {
-      this.internals.role = "textbox";
-    } else if (this.internals && type === "number") {
-      this.internals.role = "spinbutton";
-    } else if (this.internals && type === "search") {
-      this.internals.role = "searchbox";
-    }
     if (Object.prototype.hasOwnProperty.call(this, "value")) {
       const v = this.value;
       delete this.value;
@@ -277,13 +288,34 @@ class AInputElement extends HTMLElementBase {
     if (!this.control) this.buildControl();
     this.ready = true;
   }
+  [SYNC_POPUP_ARIA](relations) {
+    if (relations.clear) {
+      if (this.popupAriaSource !== relations.source) return;
+      this.popupAriaSource = void 0;
+      this.popupControls = null;
+      this.popupActiveDescendant = null;
+    } else {
+      this.popupAriaSource = relations.source;
+      if ("controls" in relations) this.popupControls = relations.controls ?? null;
+      if ("activeDescendant" in relations)
+        this.popupActiveDescendant = relations.activeDescendant ?? null;
+    }
+    this.applyPopupAria();
+  }
   attributeChangedCallback(name, _old, value) {
+    if (SHADOW_ARIA_ATTRIBUTE_SET.has(name)) {
+      if (this.consumingAria.has(name)) return;
+      this.consumeAria(name, value);
+      return;
+    }
     if (!this.ready && name !== "value" && name !== "defaultvalue") return;
-    if (name === "multiline" || name === "rows" || name === "maxrows") {
+    if (name === "multiline" || name === "button" || name === "rows" || name === "maxrows") {
       if (!this.control) return;
       const needTextarea = this.hasAttribute("multiline") || this.hasAttribute("rows");
       const isTextarea = this.control instanceof HTMLTextAreaElement;
-      if (needTextarea !== isTextarea) this.buildControl(this.value);
+      const needButton = !needTextarea && this.hasAttribute("button");
+      const isButton = this.control instanceof HTMLButtonElement;
+      if (needTextarea !== isTextarea || needButton !== isButton) this.buildControl(this.value);
       else if (this.control instanceof HTMLTextAreaElement) this.configureTextarea(this.control);
       return;
     }
@@ -303,22 +335,88 @@ class AInputElement extends HTMLElementBase {
     if (name === "defaultvalue") return;
     if (this.control) {
       this.forward(name, value);
+      this.syncButtonPresentation();
       this.updateValidity();
     }
   }
+  /** 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. */
+  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();
+  }
+  /** 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) {
+    if (SHADOW_ARIA_ATTRIBUTE_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 (SHADOW_ARIA_ATTRIBUTE_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 control = this.control;
+    if (!control) return;
+    applyShadowAria(this, control, name, this.delegatedAria.get(name) ?? null);
+    if (name === "aria-label" || name === "aria-labelledby") this.applyLabelAria();
+    if (name === "aria-description" || name === "aria-describedby") this.applyDescriptionAria();
+    if (name === "aria-invalid" && !this.delegatedAria.has(name)) this.syncStatus();
+    if (name === "aria-controls" || name === "aria-activedescendant") this.applyPopupAria();
+  }
+  queueDelegatedAria() {
+    if (this.ariaApplyQueued) return;
+    this.ariaApplyQueued = true;
+    queueMicrotask(() => {
+      this.ariaApplyQueued = false;
+      const control = this.control;
+      if (!control) return;
+      for (const [name, value] of this.delegatedAria) applyShadowAria(this, control, name, value);
+    });
+  }
   /** (Re)build the shadow control from the current attributes. */
   buildControl(initial) {
     const prev = this.control;
     const refocus = prev != null && this.shadowRoot?.activeElement === prev;
     let selStart = null;
     let selEnd = null;
-    if (prev) try {
-      selStart = prev.selectionStart;
-      selEnd = prev.selectionEnd;
-    } catch {
+    if (prev instanceof HTMLInputElement || prev instanceof HTMLTextAreaElement) {
+      try {
+        selStart = prev.selectionStart;
+        selEnd = prev.selectionEnd;
+      } catch {
+      }
     }
     const multiline = this.hasAttribute("multiline") || this.hasAttribute("rows");
-    const next = document.createElement(multiline ? "textarea" : "input");
+    const button = !multiline && this.hasAttribute("button");
+    const next = document.createElement(button ? "button" : multiline ? "textarea" : "input");
+    if (next instanceof HTMLButtonElement) next.type = "button";
     next.setAttribute("part", "input");
     if (this.control) this.control.replaceWith(next);
     else this.leadingSlot.after(next);
@@ -329,23 +427,29 @@ class AInputElement extends HTMLElementBase {
     }
     this.syncDisabled();
     this.syncStatus();
+    for (const [name, value2] of this.delegatedAria) applyShadowAria(this, next, name, value2);
+    this.queueDelegatedAria();
     this.applyLabelAria();
     this.applyDescriptionAria();
+    this.applyPopupAria();
     if (multiline) this.configureTextarea(next);
     const value = initial ?? this.pendingValue ?? this.getAttribute("value") ?? this.getAttribute("defaultvalue") ?? "";
     next.value = value;
+    this.syncButtonPresentation();
     next.addEventListener("input", this.onInput);
     next.addEventListener("change", this.onChange);
     next.addEventListener("focus", this.onFocus);
     next.addEventListener("blur", this.onBlur);
     if (refocus) {
       next.focus();
-      if (selStart != null) try {
-        next.setSelectionRange(selStart, selEnd ?? selStart);
-      } catch {
+      if (selStart != null && (next instanceof HTMLInputElement || next instanceof HTMLTextAreaElement)) {
+        try {
+          next.setSelectionRange(selStart, selEnd ?? selStart);
+        } catch {
+        }
       }
     }
-    this.internals?.setFormValue(value);
+    this.syncFormValue(value);
     this.updateValidity();
     this.updateFilled();
     this.syncAutoHeight();
@@ -385,6 +489,7 @@ class AInputElement extends HTMLElementBase {
   forward(name, value) {
     const c = this.control;
     if (!c) return;
+    if (c instanceof HTMLButtonElement) return;
     if (c instanceof HTMLTextAreaElement && name === "type") return;
     if (BOOL_FORWARDED.has(name)) c.toggleAttribute(name, value != null);
     else if (value == null) c.removeAttribute(name);
@@ -393,6 +498,16 @@ class AInputElement extends HTMLElementBase {
   syncDisabled() {
     if (this.control) this.control.disabled = this.hasAttribute("disabled") || this.formDisabled;
   }
+  syncButtonPresentation() {
+    const button = this.control;
+    if (!(button instanceof HTMLButtonElement)) return;
+    const value = button.value;
+    button.textContent = value || this.getAttribute("placeholder") || "";
+    button.classList.toggle("placeholder", !value);
+  }
+  syncFormValue(value) {
+    this.internals?.setFormValue(this.control instanceof HTMLButtonElement ? null : value);
+  }
   /** Reflect `status` into the control's `aria-invalid` and the `:state(invalid)`
    *  custom state. Called on `status` change AND from buildControl — so a field
    *  that mounts already `status="critical"` gets `:state(invalid)` on the FIRST
@@ -400,7 +515,8 @@ class AInputElement extends HTMLElementBase {
    *  `ready` is false and the early-return skips it). */
   syncStatus() {
     const critical = this.getAttribute("status") === "critical";
-    this.control?.setAttribute("aria-invalid", critical ? "true" : "false");
+    const explicit = this.delegatedAria.get("aria-invalid");
+    this.control?.setAttribute("aria-invalid", explicit ?? (critical ? "true" : "false"));
     try {
       critical ? this.internals?.states?.add("invalid") : this.internals?.states?.delete("invalid");
     } catch {
@@ -408,7 +524,7 @@ class AInputElement extends HTMLElementBase {
   }
   onInput = (event) => {
     const v = this.control?.value ?? "";
-    this.internals?.setFormValue(v);
+    this.syncFormValue(v);
     this.updateValidity();
     this.updateFilled();
     this.syncAutoHeight();
@@ -441,7 +557,7 @@ class AInputElement extends HTMLElementBase {
   applyLabelAria() {
     const c = this.control;
     if (!c) return;
-    if (this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) return;
+    if (this.delegatedAria.has("aria-label") || this.delegatedAria.has("aria-labelledby")) return;
     const text = this.labelSlot.assignedNodes().map((n) => n.textContent ?? "").join(" ").trim();
     if (text) c.setAttribute("aria-label", text);
     else c.removeAttribute("aria-label");
@@ -452,11 +568,22 @@ class AInputElement extends HTMLElementBase {
   applyDescriptionAria() {
     const c = this.control;
     if (!c) return;
-    if (this.hasAttribute("aria-description") || this.hasAttribute("aria-describedby")) return;
+    if (this.delegatedAria.has("aria-description") || this.delegatedAria.has("aria-describedby")) return;
     const text = this.hintSlot.assignedNodes().map((n) => n.textContent ?? "").join(" ").trim();
     if (text) c.setAttribute("aria-description", text);
     else c.removeAttribute("aria-description");
   }
+  applyPopupAria() {
+    const control = this.control;
+    if (!control) return;
+    try {
+      if (!this.delegatedAria.has("aria-controls") && "ariaControlsElements" in control)
+        control.ariaControlsElements = this.popupControls ? [this.popupControls] : null;
+      if (!this.delegatedAria.has("aria-activedescendant") && "ariaActiveDescendantElement" in control)
+        control.ariaActiveDescendantElement = this.popupActiveDescendant;
+    } catch {
+    }
+  }
   updateFilled() {
     if (this.value) this.internals?.states?.add("filled");
     else this.internals?.states?.delete("filled");
@@ -479,7 +606,8 @@ class AInputElement extends HTMLElementBase {
   set value(v) {
     this.pendingValue = v;
     if (this.control && this.control.value !== v) this.control.value = v;
-    this.internals?.setFormValue(v);
+    this.syncButtonPresentation();
+    this.syncFormValue(v);
     this.updateValidity();
     this.updateFilled();
     this.syncAutoHeight();
@@ -495,7 +623,8 @@ class AInputElement extends HTMLElementBase {
   clear() {
     if (!this.control) return;
     this.control.value = "";
-    this.internals?.setFormValue("");
+    this.syncButtonPresentation();
+    this.syncFormValue("");
     this.updateValidity();
     this.updateFilled();
     this.syncAutoHeight();
@@ -543,6 +672,18 @@ class AInputElement extends HTMLElementBase {
     this.value = state ?? "";
   }
 }
+for (const name of SHADOW_ARIA_ATTRIBUTES) {
+  Object.defineProperty(AInputElement.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() {
   if (typeof customElements === "undefined") return;
   if (!customElements.get("a-input")) {

package/dist/elements/a-loader.css

@@ -1 +1 @@
-@layer anta.components{a-loader{color:var(--text-3)}@media not (forced-colors:active){a-loader[tone=brand]{color:var(--text-2-brand)}a-loader[tone=info]{color:var(--text-2-info)}a-loader[tone=success]{color:var(--text-2-success)}a-loader[tone=warning]{color:var(--text-2-warning)}a-loader[tone=critical]{color:var(--text-2-critical)}}:where(a-loader,a-icon[shape=loader]){display:inline-block;inline-size:var(--loader-size, var(--icon-size, 16px));block-size:var(--loader-size, var(--icon-size, 16px));flex:none;vertical-align:middle;border-radius:50%;animation:loader-spin var(--loader-speed, .75s) linear infinite;animation-delay:-9999s}a-loader{background:conic-gradient(from 0deg,color-mix(in oklch,currentColor 6%,transparent),color-mix(in oklch,currentColor 70%,transparent))}a-icon[shape=loader]{-webkit-mask-image:conic-gradient(from 0deg,color-mix(in oklch,#000 6%,transparent),color-mix(in oklch,#000 70%,transparent));mask-image:conic-gradient(from 0deg,color-mix(in oklch,#000 6%,transparent),color-mix(in oklch,#000 75%,transparent))}a-loader[value]{background:conic-gradient(from 0deg,color-mix(in oklch,currentColor 60%,transparent) 0,color-mix(in oklch,currentColor 75%,transparent) var(--loader-value, 0%),color-mix(in oklch,currentColor 6%,transparent) var(--loader-value, 0%) 100%);animation:none}@keyframes loader-spin{to{transform:rotate(1turn)}}@media(forced-colors:active){a-loader{forced-color-adjust:none;color:CanvasText}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-loader{color:var(--text-3)}@media not (forced-colors:active){a-loader[tone=brand]{color:var(--text-2-brand)}a-loader[tone=info]{color:var(--text-2-info)}a-loader[tone=success]{color:var(--text-2-success)}a-loader[tone=warning]{color:var(--text-2-warning)}a-loader[tone=critical]{color:var(--text-2-critical)}}:where(a-loader,a-icon[shape=loader]){display:inline-block;inline-size:var(--loader-size, var(--icon-size, 16px));block-size:var(--loader-size, var(--icon-size, 16px));flex:none;vertical-align:middle;border-radius:50%;animation:loader-spin var(--loader-speed, .75s) linear infinite;animation-delay:-9999s}a-loader{background:conic-gradient(from 0deg,color-mix(in oklch,currentColor 6%,transparent),color-mix(in oklch,currentColor 70%,transparent))}a-icon[shape=loader]{-webkit-mask-image:conic-gradient(from 0deg,color-mix(in oklch,#000 6%,transparent),color-mix(in oklch,#000 70%,transparent));mask-image:conic-gradient(from 0deg,color-mix(in oklch,#000 6%,transparent),color-mix(in oklch,#000 75%,transparent))}a-loader[value]{background:conic-gradient(from 0deg,color-mix(in oklch,currentColor 60%,transparent) 0,color-mix(in oklch,currentColor 75%,transparent) var(--loader-value, 0%),color-mix(in oklch,currentColor 6%,transparent) var(--loader-value, 0%) 100%);animation:none}@keyframes loader-spin{to{transform:rotate(1turn)}}@media(forced-colors:active){a-loader{forced-color-adjust:none;color:CanvasText}}}

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

@@ -1 +1 @@
-@layer anta.components{a-menu-group:not(:defined){display:none}a-menu-group{display:flex;flex-direction:column;gap:1px}a-menu-group-label{display:block;padding:6px 8px 2px;color:var(--text-5);font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;user-select:none}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-menu-group:not(:defined){display:none}a-menu-group{display:flex;flex-direction:column;gap:1px}a-menu-group-label{display:block;padding:6px 8px 2px;color:var(--text-5);font-size:.75em;font-weight:600;letter-spacing:.03em;text-transform:uppercase;user-select:none}}

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

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

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

@@ -15,6 +15,7 @@ class AMenuItemElement extends HTMLElementBase {
     if (!this.internals) return;
     if (on) this.internals?.states?.add("active");
     else this.internals?.states?.delete("active");
+    this.internals.ariaSelected = this.getAttribute("role") === "option" ? on ? "true" : "false" : null;
   }
   get active() {
     return this.internals?.states?.has("active") ?? false;

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

@@ -1 +1 @@
-@layer anta.components{a-menu-separator:not(:defined){display:none}a-menu-separator{--menu-separator-label-size: 13px;display:block;flex-shrink:0;height:1px;margin:2px 4px;background:var(--border-5)}a-menu-separator:not(:empty){height:auto;margin:0;padding:6px 8px;background:none;color:var(--text-3);font-size:var(--menu-separator-label-size);line-height:1.3;user-select:none}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-menu-separator:not(:defined){display:none}a-menu-separator{--menu-separator-label-size: 13px;display:block;flex-shrink:0;height:1px;margin:2px 4px;background:var(--border-5)}a-menu-separator:not(:empty){height:auto;margin:0;padding:6px 8px;background:none;color:var(--text-3);font-size:var(--menu-separator-label-size);line-height:1.3;user-select:none}}

package/dist/elements/a-menu.css

@@ -1 +1 @@
-@layer anta.components{a-menu:not(:defined){display:none}a-menu{--menu-bg: light-dark( color-mix(in oklch, var(--bg-1) 90%, transparent), color-mix(in oklch, var(--bg-1) 78%, transparent) );--menu-radius: var(--radius-md, 8px);--menu-border: 1px solid var(--border-3);--menu-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);--menu-padding: 4px;--menu-min-width: 88px;--menu-backdrop-filter: blur(20px);--menu-width-duration: .16s}@media(prefers-reduced-motion:reduce){a-menu{--menu-width-duration: 0}}a-menu[round]{--menu-radius: 20px;@supports (border-radius: attr(probe type(<length>),1px)){--menu-radius: attr(round type(<length>), 20px)}}.dark a-menu{--menu-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)}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-menu:not(:defined){display:none}a-menu{--menu-bg: light-dark( color-mix(in oklch, var(--bg-1) 90%, transparent), color-mix(in oklch, var(--bg-1) 78%, transparent) );--menu-radius: var(--radius-md, 8px);--menu-border: 1px solid var(--border-3);--menu-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);--menu-padding: 4px;--menu-min-width: 88px;--menu-backdrop-filter: blur(20px);--menu-width-duration: .16s}@media(prefers-reduced-motion:reduce){a-menu{--menu-width-duration: 0}}a-menu[round]{--menu-radius: 20px;@supports (border-radius: attr(probe type(<length>),1px)){--menu-radius: attr(round type(<length>), 20px)}}.dark a-menu{--menu-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)}}

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

@@ -42,6 +42,7 @@ export declare class AMenuElement extends HTMLElementBase {
     private typeTimer?;
     private activeItem;
     private comboObserver?;
+    private accessibilityObserver?;
     private _flippedTop;
     private _flippedSide;
     constructor();
@@ -73,9 +74,7 @@ export declare class AMenuElement extends HTMLElementBase {
      *  `.focus()` on one silently fails). `getClientRects` is the fallback where
      *  `checkVisibility` isn't available. */
     private isVisible;
-    /** The subset of `focusables()` that are menu items (drives arrow / Home /
-     *  End / type-ahead navigation). Same visibility / disabled / ownership
-     *  filter — just narrowed to `a-menu-item`. */
+    /** Custom menu rows that support the combobox cursor and selection state. */
     private focusableItems;
     /** The rows the arrow keys / Home / End / initial-focus step between:
      *  `focusableItems()` PLUS native-anchor link items (`<a data-anta-menu-item>`),
@@ -83,10 +82,7 @@ export declare class AMenuElement extends HTMLElementBase {
      *  custom-element-only because the combobox cursor (`setActive`) and selection
      *  seating are `a-menu-item` affordances a plain link doesn't carry. */
     private navigableItems;
-    /** Every tabbable element belonging to THIS menu (items + nested controls
-     *  like inputs / sliders / buttons), in DOM order, visible and enabled —
-     *  used to trap Tab within the open menu. Submenu contents are excluded
-     *  (their nearest `a-menu` is the submenu). */
+    /** Tab stops in rendered order, excluding controls owned by nested menus. */
     private focusables;
     /** On open, seat initial focus like a native `<select>` / macOS menu: a menu
      *  carrying a current value opens *at* that value, not at the top. Brings the
@@ -107,10 +103,9 @@ export declare class AMenuElement extends HTMLElementBase {
      *  `.scroll` mask reads; runs on scroll and after every (re)position.
      *  Shadow-internal only. */
     private updateScrollFade;
-    /** Move the combobox cursor. Sets the item's `active` **property** (off-DOM
-     *  `:state(active)`, no attribute churn) for the highlight, and REPORTS the
-     *  active id via the `activedescendant` event so the reactive layer can set
-     *  `aria-activedescendant` on the light-DOM field. `null` clears the cursor. */
+    /** Move the combobox cursor. Sets the item's `active` property for its
+     *  off-DOM highlight/selected state, associates it directly with an Anta
+     *  Input, and reports it for raw/custom observers. `null` clears the cursor. */
     private setActive;
     /** Re-seat the cursor on the first option — but only once the filter has input.
      *  An empty filter (e.g. right after opening) shows NO active row, so the first
@@ -168,8 +163,8 @@ export declare class AMenuElement extends HTMLElementBase {
      *  mutates deep in its subtree, not this menu's direct children, so it won't
      *  spuriously reset the cursor. */
     private startComboObserver;
-    /** Apply CLOSE to the DOM (no event). Closes this menu and everything stacked
-     *  above it (its submenus). */
+    /** Apply CLOSE without notifying this menu's owner. Notify nested menus so
+     *  their controlled state follows the closing parent. */
     private hide;
     /** Shadow-only show: open the popover and position it. `instant` positions
      *  synchronously (no rAF), so a menu opening over an already-visible one is