@antadesign/anta 0.3.3 → 0.3.4

package/dist/elements/a-menu.js

@@ -134,6 +134,10 @@ class AMenuElement extends HTMLElementBase {
    *  but stays visible until the consumer flips `state`. The flag lets the
    *  `closeAll` backstop skip a duplicate emit. Cleared on every show. */
   _dismissNotified = false;
+  // Custom-state carrier — exposes the menu's own open state as `:state(open)`
+  // (off-DOM, like `a-menu-item`'s `:state(active)`). Never used to mutate light
+  // DOM; see `reflectOpen`.
+  internals;
   // Submenu hover-intent timers.
   openTimer;
   closeTimer;
@@ -142,7 +146,8 @@ class AMenuElement extends HTMLElementBase {
   typeTimer;
   // Combobox (filter) state — engaged when a `[data-menu-search]` field is slotted
   // in (e.g. `Select` with `filter`). Focus stays in that field; ArrowUp/Down move
-  // `activeItem` (a cursor, not DOM focus) and reflect `aria-activedescendant`.
+  // `activeItem` (a cursor, not DOM focus) and REPORT it via the `activedescendant`
+  // event, which the reactive layer reflects onto the field's `aria-activedescendant`.
   activeItem = null;
   comboObserver;
   // The vertical side chosen at open (true = flipped above the anchor). A re-anchor
@@ -151,6 +156,10 @@ class AMenuElement extends HTMLElementBase {
   _flippedTop = null;
   constructor() {
     super();
+    try {
+      this.internals = this.attachInternals?.();
+    } catch {
+    }
     const shadow = this.attachShadow({ mode: "open" });
     const style = document.createElement("style");
     style.textContent = `
@@ -449,9 +458,9 @@ class AMenuElement extends HTMLElementBase {
     return el && el.closest("a-menu") === this ? el : null;
   }
   /** Move the combobox cursor. Sets the item's `active` **property** (off-DOM
-   *  `:state(active)`, no attribute churn) and reflects `aria-activedescendant`
-   *  onto the search field — the same ARIA-state-reflection latitude as
-   *  `aria-expanded` on the anchor. `null` clears the cursor. */
+   *  `: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. */
   setActive(item) {
     if (this.activeItem && this.activeItem !== item) this.activeItem.active = false;
     this.activeItem = item;
@@ -459,10 +468,9 @@ class AMenuElement extends HTMLElementBase {
       item.active = true;
       item.scrollIntoView?.({ block: "nearest" });
     }
-    const s = this.#searchField;
-    if (!s) return;
-    if (item?.id) s.setAttribute("aria-activedescendant", item.id);
-    else s.removeAttribute("aria-activedescendant");
+    this.dispatchEvent(
+      new CustomEvent("activedescendant", { detail: { id: item?.id ?? null } })
+    );
   }
   /** 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
@@ -661,7 +669,7 @@ class AMenuElement extends HTMLElementBase {
     if (this.surface.isConnected && !this._shown) this.surface.showPopover();
     this._shown = true;
     this._dismissNotified = false;
-    this.reflectExpanded(true);
+    this.reflectOpen(true);
     this.hideAnchorTooltip();
     this.position(coord, instant);
   }
@@ -677,24 +685,24 @@ class AMenuElement extends HTMLElementBase {
   _doHide() {
     if (this.surface.isConnected && this._shown) this.surface.hidePopover();
     this._shown = false;
-    this.reflectExpanded(false);
+    this.reflectOpen(false);
     this.cancelOpenTimer();
     this.cancelCloseTimer();
   }
-  /** Mirror the open state onto a SUBMENU parent's `aria-expanded`. This is the
-   *  one sanctioned light-DOM ARIA mutation (like `el.focus()`): the anchor is
-   *  an `<a-menu-item>` the `MenuItem` wrapper renders WITH a resting
-   *  `aria-expanded="false"` baseline, so a reactive re-render resets it to a
-   *  valid value and the next open/close re-syncs.
-   *
-   *  A ROOT menu's trigger is a consumer-owned sibling we don't render and have
-   *  no baseline for — writing to it would mutate foreign DOM (and couldn't
-   *  self-heal), so we leave its `aria-expanded` to the consumer. The menu is
-   *  still announced and Esc-dismissable; consumers add `aria-haspopup="menu"`
-   *  to their trigger themselves. (`context` menus aren't triggers either.) */
-  reflectExpanded(open) {
-    if (!this.isSubmenu) return;
-    this.triggerAnchor?.setAttribute("aria-expanded", open ? "true" : "false");
+  /** Expose the menu's OWN open state as an off-DOM custom state (`:state(open)`),
+   *  never a light-DOM attribute. A web component must not mutate light DOM — it
+   *  desyncs the worker-thread reactive model, which owns the light tree. A
+   *  submenu parent lights its open branch purely in CSS via
+   *  `a-menu-item:has(> a-menu:state(open))`; the state is element-owned (like
+   *  `a-menu-item`'s `:state(active)`) and, being off-DOM, survives a reactive
+   *  re-render without the element ever writing an attribute. Set on every menu
+   *  (harmless on roots — no `a-menu-item` parent matches the selector). */
+  reflectOpen(open) {
+    try {
+      if (open) this.internals?.states.add("open");
+      else this.internals?.states.delete("open");
+    } catch {
+    }
   }
   /* ============================ positioning ============================ */
   position(coord, sync = false, reanchor = false) {
@@ -779,6 +787,23 @@ class AMenuElement extends HTMLElementBase {
    *   - nothing → keep open (plain custom content doesn't dismiss).
    */
   onSurfaceClick = (e) => {
+    for (const node of e.composedPath()) {
+      if (node === this.surface) break;
+      if (node instanceof AMenuItemElement) {
+        if (!node.hasAttribute("disabled") && !node.querySelector("a-menu") && node.closest("a-menu") === this) {
+          node.dispatchEvent(
+            new MouseEvent("menuselect", {
+              bubbles: false,
+              altKey: e.altKey,
+              ctrlKey: e.ctrlKey,
+              metaKey: e.metaKey,
+              shiftKey: e.shiftKey
+            })
+          );
+        }
+        break;
+      }
+    }
     for (const node of e.composedPath()) {
       if (node === this.surface) break;
       if (!(node instanceof Element)) continue;
@@ -974,12 +999,23 @@ class AMenuElement extends HTMLElementBase {
   scheduleClose() {
     this.cancelOpenTimer();
     if (!this._shown) return;
+    if (this.#hasKeyboardFocusInside) return;
     this.cancelCloseTimer();
     this.closeTimer = setTimeout(() => {
       this.closeTimer = void 0;
       this.requestClose();
     }, SUBMENU_CLOSE_DELAY);
   }
+  /** True when the document's focused element is inside this menu AND is
+   *  keyboard-focused (`:focus-visible`). Distinguishes "arrowed into the flyout"
+   *  (keep it open on hover-out) from a mouse-click focus (close as usual).
+   *  `activeElement` retargets to the shadow host at the document level, so a
+   *  focused menu item (or its delegated inner control) reads as a light-DOM
+   *  descendant here. */
+  get #hasKeyboardFocusInside() {
+    const active = this.doc.activeElement;
+    return !!active && this.contains(active) && active.matches(":focus-visible");
+  }
   cancelOpenTimer() {
     if (this.openTimer !== void 0) {
       clearTimeout(this.openTimer);

package/dist/elements/a-radio.css

@@ -1 +1 @@
-@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-fill: #635b65;--radio-fill-hover: #534c57;--radio-fill-active: #49424c;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-dot: #ffffff;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 15%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:center;box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:center;justify-self:center;inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-fill-hover);border-color:var(--radio-fill-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-fill-active);border-color:var(--radio-fill-active)}&:state(selected){&:before{background:var(--radio-fill);border-color:var(--radio-fill)}&:after{transform:scale(1)}}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 24px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #5f4bc3;--radio-fill-hover: #503cb4;--radio-fill-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #635b65;--radio-fill-hover: #534c57;--radio-fill-active: #49424c}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1f6eb2;--radio-fill-hover: #1a5b93;--radio-fill-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #2a7e43;--radio-fill-hover: #226737;--radio-fill-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #c37416;--radio-fill-hover: #ae6613;--radio-fill-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #c9302c;--radio-fill-hover: #b02120;--radio-fill-active: #a01c1c}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]){--_radio-border-base: color-mix(in oklch, var(--radio-fill) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base);.dark &{--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent)}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]),a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone-selected]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-fill: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-fill-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-fill-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px #000}--radio-border-neutral: #49424c;--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-fill: #534c57;--radio-fill-hover: #635b65;--radio-fill-active: #938d96;--radio-dot-disabled: #635b65;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 15%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #503cb4;--radio-fill-hover: #5f4bc3;--radio-fill-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #534c57;--radio-fill-hover: #635b65;--radio-fill-active: #938d96}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1a5b93;--radio-fill-hover: #1f6eb2;--radio-fill-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #226737;--radio-fill-hover: #2a7e43;--radio-fill-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #7f410b;--radio-fill-hover: #995200;--radio-fill-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #b02120;--radio-fill-hover: #c9302c;--radio-fill-active: #de4545}}
+@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-fill: #878089;--radio-fill-hover: #776e77;--radio-fill-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-dot: #f1eff1;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--radio-label-lh) - var(--radio-control-size)) / 2);box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-block-start:calc((var(--radio-label-lh) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2);inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-fill-hover);border-color:var(--radio-fill-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-fill-active);border-color:var(--radio-fill-active)}&:state(selected){&:before{background:var(--radio-fill);border-color:var(--radio-fill)}&:after{transform:scale(1)}}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 22px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #5f4bc3;--radio-fill-hover: #503cb4;--radio-fill-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #878089;--radio-fill-hover: #776e77;--radio-fill-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1f6eb2;--radio-fill-hover: #1a5b93;--radio-fill-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #2a7e43;--radio-fill-hover: #226737;--radio-fill-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #c37416;--radio-fill-hover: #ae6613;--radio-fill-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #c9302c;--radio-fill-hover: #b02120;--radio-fill-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}a-radio[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]){--radio-bg: oklch(from var(--radio-tone-source) .99 calc(c*.03) h);--_radio-border-base: color-mix(in oklch, var(--radio-fill) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base);.dark &{--radio-bg: oklch(from var(--radio-tone-source) .15 calc(c*.18) h);--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent)}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]),a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone-selected]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-fill: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-fill-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-fill-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px color-mix(in oklch,black 40%,transparent)}--radio-border-neutral: #49424c;--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-fill: #49424c;--radio-fill-hover: #534c57;--radio-fill-active: #635b65;--radio-dot: #d4ced4;--radio-dot-disabled: #534c57;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #503cb4;--radio-fill-hover: #5f4bc3;--radio-fill-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #49424c;--radio-fill-hover: #534c57;--radio-fill-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1a5b93;--radio-fill-hover: #1f6eb2;--radio-fill-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #226737;--radio-fill-hover: #2a7e43;--radio-fill-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #7f410b;--radio-fill-hover: #995200;--radio-fill-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #b02120;--radio-fill-hover: #c9302c;--radio-fill-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}}

package/dist/elements/a-tabpanel.css

@@ -1 +1 @@
-@layer anta{a-tabpanel{display:block}a-tabpanel[hidden]{display:none}a-tabpanel[data-hide=visibility]{visibility:hidden}}
+@layer anta{a-tabpanel{display:block}a-tabpanel:not(:state(active)):not([hide-mode=visibility]){display:none}a-tabpanel[hide-mode=visibility]:not(:state(active)){visibility:hidden}}

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

@@ -0,0 +1,17 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-tabpanel.css";
+export declare class ATabPanelElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    private internals?;
+    private tabs;
+    private onTabsChange;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** Locate the sibling <a-tabs> (the strip and panels are flat siblings under one
+     *  parent — `Tabs` renders no wrapper) and subscribe to its `change`. */
+    private bindTabs;
+    private sync;
+}
+export declare function register_a_tabpanel(): void;

package/dist/elements/a-tabpanel.js

@@ -0,0 +1,66 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-tabpanel.css";
+class ATabPanelElement extends HTMLElementBase {
+  static observedAttributes = ["value"];
+  internals;
+  // The tablist this panel belongs to (its flat sibling under the same parent).
+  tabs = null;
+  onTabsChange = () => this.sync();
+  constructor() {
+    super();
+    try {
+      this.internals = this.attachInternals?.();
+    } catch {
+    }
+  }
+  connectedCallback() {
+    this.bindTabs();
+    this.sync();
+    requestAnimationFrame(() => {
+      if (!this.tabs) this.bindTabs();
+      this.sync();
+    });
+  }
+  disconnectedCallback() {
+    this.tabs?.removeEventListener("change", this.onTabsChange);
+    this.tabs = null;
+  }
+  attributeChangedCallback() {
+    this.sync();
+  }
+  /** Locate the sibling <a-tabs> (the strip and panels are flat siblings under one
+   *  parent — `Tabs` renders no wrapper) and subscribe to its `change`. */
+  bindTabs() {
+    const tabs = this.parentElement?.querySelector(":scope > a-tabs") ?? null;
+    if (tabs === this.tabs) return;
+    this.tabs?.removeEventListener("change", this.onTabsChange);
+    this.tabs = tabs;
+    this.tabs?.addEventListener("change", this.onTabsChange);
+  }
+  sync() {
+    const value = this.getAttribute("value");
+    const active = !!this.tabs && value === (this.tabs.value ?? null);
+    try {
+      if (active) this.internals?.states.add("active");
+      else this.internals?.states.delete("active");
+    } catch {
+    }
+    if (this.internals && "ariaLabelledByElements" in this.internals) {
+      const tab = value != null ? this.tabs?.querySelector(`a-tab[value="${cssEscape(value)}"]`) : null;
+      this.internals.ariaLabelledByElements = tab ? [tab] : [];
+    }
+  }
+}
+function cssEscape(v) {
+  return typeof CSS !== "undefined" && CSS.escape ? CSS.escape(v) : v;
+}
+function register_a_tabpanel() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-tabpanel"))
+    customElements.define("a-tabpanel", ATabPanelElement);
+}
+register_a_tabpanel();
+export {
+  ATabPanelElement,
+  register_a_tabpanel
+};

package/dist/elements/index.d.ts

@@ -30,6 +30,6 @@ export { AMenuSeparatorElement, register_a_menu_separator } from './a-menu-separ
 export { AMenuGroupElement, register_a_menu_group } from './a-menu-group';
 export { ATabElement, register_a_tab } from './a-tab';
 export { ATabsElement, register_a_tabs } from './a-tabs';
+export { ATabPanelElement, register_a_tabpanel } from './a-tabpanel';
 import './a-title.css';
 import './a-tag.css';
-import './a-tabpanel.css';

package/dist/elements/index.js

@@ -15,9 +15,9 @@ import { AMenuSeparatorElement, register_a_menu_separator } from "./a-menu-separ
 import { AMenuGroupElement, register_a_menu_group } from "./a-menu-group";
 import { ATabElement, register_a_tab } from "./a-tab";
 import { ATabsElement, register_a_tabs } from "./a-tabs";
+import { ATabPanelElement, register_a_tabpanel } from "./a-tabpanel";
 import "./a-title.css";
 import "./a-tag.css";
-import "./a-tabpanel.css";
 export {
   AButtonElement,
   ACalendarElement,
@@ -33,6 +33,7 @@ export {
   ARadioElement,
   ARadioGroupElement,
   ATabElement,
+  ATabPanelElement,
   ATabsElement,
   ATextElement,
   ATooltipElement,
@@ -50,6 +51,7 @@ export {
   register_a_radio,
   register_a_radio_group,
   register_a_tab,
+  register_a_tabpanel,
   register_a_tabs,
   register_a_text,
   register_a_tooltip

package/dist/general_types.d.ts

@@ -572,6 +572,15 @@ export interface AMenuAttributes extends BaseAttributes {
         next: 'open' | 'closed';
         prev: 'open' | 'closed';
     }>) => void;
+    /** Combobox-mode cursor report — fired when the active option changes (arrow
+     *  keys, or the list re-filtering), with `detail.id` the active option's `id`
+     *  (`null` when none). The element owns the keyboard cursor but must NOT write
+     *  `aria-activedescendant` on the (light-DOM) filter field itself; the reactive
+     *  layer that owns the field (e.g. `Select`) listens here and reflects it.
+     *  All-lowercase so React/Preact bind it to the CustomEvent. */
+    onactivedescendant?: (e: CustomEvent<{
+        id: string | null;
+    }>) => void;
     /** ARIA role — the JSX wrapper sets this to `'menu'`. */
     role?: string;
     'aria-orientation'?: 'vertical' | 'horizontal';
@@ -602,10 +611,20 @@ export interface AMenuItemAttributes extends BaseAttributes {
     /** ARIA role — `'menuitem'`. */
     role?: string;
     'aria-haspopup'?: 'menu' | 'true' | 'false' | boolean;
-    /** Submenu-parent expanded state. Render `'false'` as the resting baseline;
-     *  the nested `<a-menu>` element reflects the live open state. */
+    /** Available for hand-authored markup, but the `MenuItem` wrapper does NOT set
+     *  it: keeping it in sync would need a light-DOM mutation (desyncs the
+     *  worker-thread reactive model) or reactive state for one attribute, and a
+     *  static value would lie once the submenu opens. `aria-haspopup` announces the
+     *  submenu; the open branch's visual rides the nested `<a-menu>`'s `:state(open)`. */
     'aria-expanded'?: 'true' | 'false' | boolean;
     'aria-disabled'?: 'true' | 'false' | boolean;
+    /** Fired when this row is genuinely activated (click / Enter / Space). The
+     *  parent `<a-menu>` owns click delegation and dispatches this — already
+     *  filtered so it never fires on a submenu parent or from a bubbled child
+     *  click — so the `MenuItem` wrapper's `onSelect` needs no DOM traversal. It's
+     *  a `MouseEvent`, carrying the modifier keys (e.g. `altKey`). All-lowercase so
+     *  React/Preact bind it to the CustomEvent. */
+    onmenuselect?: (e: MouseEvent) => void;
 }
 /**
  * Attributes for the `<a-menu-group>` styled element. For the typed JSX
@@ -867,14 +886,15 @@ export interface ATabsAttributes extends BaseAttributes {
  * from `@antadesign/anta`.
  */
 export interface ATabpanelAttributes extends BaseAttributes {
-    /** Hidden via `display:none`. Presence-based (`''` on, omit off). */
-    hidden?: boolean | '';
-    /** Hidden via `visibility:hidden` (keeps the layout box). The `Tabs` wrapper sets
-     *  this for `mounting="visibility"`. */
-    'data-hide'?: 'visibility';
-    /** Removes the hidden panel from focus + the a11y tree. Presence-based. */
-    inert?: boolean | '';
-    /** ARIA — set by the `Tabs` wrapper. */
+    /** Pairs the panel with the tab of the same value. The element reads its
+     *  `<a-tabs>` and shows itself when this is the active value. */
+    value?: string;
+    /** How the panel hides while inactive: omit for `display:none` (removed from
+     *  layout + the a11y tree), or `'visibility'` to keep its layout box. The
+     *  element toggles its own `:state(active)`; this only picks the hide style. */
+    'hide-mode'?: 'display' | 'visibility';
+    /** ARIA — set statically by the `TabPanel` wrapper. `aria-labelledby` is NOT an
+     *  attribute here: the element points at its tab off-DOM via
+     *  `internals.ariaLabelledByElements`. */
     role?: 'tabpanel';
-    'aria-labelledby'?: string;
 }

package/dist/index.d.ts

@@ -53,12 +53,10 @@ export { buildMonth, getWeekdays, firstDayOfWeek, clampDate, isOutOfRange, parse
 export type { CalendarDay, CalendarWeekday, CalendarMonth, BuildMonthOptions, ParseDateOptions, } from './calendar-core';
 export { RadioGroup } from './components/RadioGroup';
 export type { RadioGroupProps, RadioOption } from './components/RadioGroup';
-export { Select } from './components/Select';
-export type { SelectProps, SelectCommonProps, SelectOption, SelectGroup, SelectSubmenu, SelectItem, SelectChangeAttrs, OptionState, TriggerState, EmptyState, } from './components/Select';
+export { Select, optionsWithSelection } from './components/Select';
+export type { SelectProps, SelectCommonProps, SelectOption, SelectGroup, SelectSubmenu, SelectItem, SelectChangeAttrs, OptionState, TriggerState, EmptyState, SelectionState, SelectedOption, SelectedGroup, SelectedSubmenu, SelectedItem, } from './components/Select';
 export { Tabs } from './components/Tabs';
-export type { TabsProps, TabsMounting, TabsChangeAttrs } from './components/Tabs';
-export { Tab } from './components/Tab';
-export type { TabProps } from './components/Tab';
+export type { TabsProps, TabOption, TabsChangeAttrs } from './components/Tabs';
 export { TabPanel } from './components/TabPanel';
 export type { TabPanelProps } from './components/TabPanel';
 export type { BaseProps, BaseAttributes } from './general_types';

package/dist/index.js

@@ -32,9 +32,8 @@ import {
   usesHour12
 } from "./calendar-core";
 import { RadioGroup } from "./components/RadioGroup";
-import { Select } from "./components/Select";
+import { Select, optionsWithSelection } from "./components/Select";
 import { Tabs } from "./components/Tabs";
-import { Tab } from "./components/Tab";
 import { TabPanel } from "./components/TabPanel";
 import { configure } from "./jsx-runtime";
 export {
@@ -54,7 +53,6 @@ export {
   Progress,
   RadioGroup,
   Select,
-  Tab,
   TabPanel,
   Tabs,
   Tag,
@@ -71,6 +69,7 @@ export {
   formatDateTimeInput,
   getWeekdays,
   isOutOfRange,
+  optionsWithSelection,
   parseDateInput,
   parseDateTimeInput,
   parseISODate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",