@antadesign/anta 0.3.28 → 0.3.30

package/dist/elements/a-menu.js

@@ -1,5 +1,12 @@
-import { HTMLElementBase, anchorRect, setMenuPresence } from "../anta_helpers";
-import { AMenuItemElement, isMenuItemEl, ensureMenuItemKeyListener } from "./a-menu-item";
+import {
+  HTMLElementBase,
+  SYNC_POPUP_ARIA,
+  anchorRect,
+  isPopupAriaReceiver,
+  setMenuPresence
+} from "../anta_helpers";
+import { AMenuItemElement, MENU_ITEM_SELECTOR, isMenuItemEl, ensureMenuItemKeyListener } from "./a-menu-item";
+import { activeFocus, cycleFocus, focusParent, tabStops } from "./focus";
 import { emitCopyRequest } from "./copy-behavior";
 import "./a-menu.css";
 const MARGIN = 4;
@@ -7,7 +14,7 @@ const MIN_HEIGHT = 96;
 const SUBMENU_OPEN_DELAY = 130;
 const SUBMENU_CLOSE_DELAY = 130;
 const TYPEAHEAD_RESET = 500;
-const SELF_ACTIVATING = 'a-button, button, a[href], input[type="button"], input[type="submit"], input[type="reset"], [role="button"]';
+const SELF_ACTIVATING = 'a-button, a-input[button], button, a[href], input[type="button"], input[type="submit"], input[type="reset"], [role="button"]';
 const EDITABLE_FIELD = "input:not([readonly]), textarea:not([readonly]), a-input:not([readonly]), a-input-time:not([readonly])";
 const DECLARATIVE_TRIGGER = "[data-dialog-open], [data-dialog-close], [data-toast-dismiss], [data-banner-dismiss]";
 const openStack = [];
@@ -36,16 +43,17 @@ function unbindDocListeners() {
   boundView = null;
   docBound = false;
 }
-function pathHitsMenus(e, primaryClick = false) {
+function menuIndexForEvent(e, primaryClick = false) {
   const path = e.composedPath();
-  for (const m of openStack) {
-    if (path.includes(m.surface)) return true;
+  for (let i = openStack.length - 1; i >= 0; i--) {
+    const m = openStack[i];
+    if (path.includes(m.surface)) return i;
     const anchor = m.triggerAnchor;
     if (!anchor) continue;
     if (primaryClick && m.hasAttribute("context")) continue;
-    if (path.includes(anchor)) return true;
+    if (path.includes(anchor)) return i;
   }
-  return false;
+  return -1;
 }
 function pathCrossesTopLayerBeforeAnchor(e, anchor) {
   for (const node of e.composedPath()) {
@@ -67,11 +75,12 @@ setMenuPresence({
 });
 function onDocPointerDown(e) {
   if (!openStack.length) return;
-  if (!pathHitsMenus(e, e.button === 0)) dismiss(e);
+  const index = menuIndexForEvent(e, e.button === 0);
+  openStack[index + 1]?.requestClose(e);
 }
 function onDocContextMenu(e) {
   if (!openStack.length) return;
-  if (!pathHitsMenus(e)) dismiss(e);
+  if (menuIndexForEvent(e) === -1) dismiss(e);
 }
 function onResize() {
   if (!openStack.length) return;
@@ -116,7 +125,7 @@ function handleIntersection(entries) {
 }
 const lazyObserver = typeof IntersectionObserver !== "undefined" ? new IntersectionObserver(handleIntersection, { root: null, rootMargin: "0px", threshold: 0 }) : null;
 class AMenuElement extends HTMLElementBase {
-  static observedAttributes = ["placement", "context", "coord", "offset", "nohover", "state", "stop-propagation"];
+  static observedAttributes = ["placement", "context", "coord", "offset", "nohover", "state", "stop-propagation", "role"];
   /** Shadow-internal popover surface — the only thing we ever mutate. */
   surface;
   /** The scrolling body inside the surface (holds the items). */
@@ -140,10 +149,18 @@ 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 REPORT it via the `activedescendant`
-  // event, which the reactive layer reflects onto the field's `aria-activedescendant`.
+  // `activeItem` (a cursor, not DOM focus) and associates it directly with an
+  // Anta Input's native field. The public `activedescendant` event remains an
+  // observation hook for raw/custom compositions.
   activeItem = null;
   comboObserver;
+  // A dialog-style filtered popup keeps its text field outside the menu role.
+  // The existing shadow scroll region becomes the menu that owns the option
+  // rows; this observer only tracks whether that region currently has items.
+  accessibilityObserver;
+  // Anta-owned trigger/search fields associated with this popup through direct
+  // ARIA element reflection. No renderer-local IDs are involved.
+  #ariaRelationTargets = /* @__PURE__ */ new Set();
   // An open menu follows its anchor vertically through scrolling, transforms, and
   // layout shifts. Those movements do not all produce a DOM observer callback, so
   // this frame is active only while the menu is visible.
@@ -301,18 +318,26 @@ class AMenuElement extends HTMLElementBase {
   connectedCallback() {
     ensureMenuItemKeyListener(this.doc);
     this.#syncStopPropagation();
+    this.#syncAccessibilityRegions();
     const anchor = this.triggerAnchor;
     if (anchor) {
       anchorToMenu.set(anchor, this);
       lazyObserver?.observe(anchor);
     }
+    this.#syncPopupAriaRelations();
+    queueMicrotask(() => {
+      if (this.isConnected) this.#syncPopupAriaRelations();
+    });
     if (this.hasAttribute("state")) requestAnimationFrame(() => this.syncState());
   }
   disconnectedCallback() {
-    this.hide();
+    this.hide(false);
     this.teardownListeners();
     this.cancelOpenTimer();
     this.cancelCloseTimer();
+    this.accessibilityObserver?.disconnect();
+    this.accessibilityObserver = void 0;
+    this.#clearPopupAriaRelations();
     const anchor = this.triggerAnchor;
     if (anchor && anchorToMenu.get(anchor) === this) {
       anchorToMenu.delete(anchor);
@@ -328,6 +353,10 @@ class AMenuElement extends HTMLElementBase {
       this.#syncStopPropagation();
       return;
     }
+    if (name === "role") {
+      this.#syncAccessibilityRegions();
+      return;
+    }
     if (this.listening) {
       this.teardownListeners();
       this.setupListeners();
@@ -427,11 +456,9 @@ class AMenuElement extends HTMLElementBase {
     }
     return el.getClientRects().length > 0;
   }
-  /** 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. */
   focusableItems() {
-    return this.focusables().filter(
+    return this.navigableItems().filter(
       (el) => el instanceof AMenuItemElement
     );
   }
@@ -441,18 +468,22 @@ 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. */
   navigableItems() {
-    return this.focusables().filter((el) => isMenuItemEl(el));
-  }
-  /** 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). */
-  focusables() {
-    const sel = 'a-menu-item, a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), a-input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [data-menu-search]';
-    return Array.from(this.querySelectorAll(sel)).filter(
+    return [...this.querySelectorAll(MENU_ITEM_SELECTOR)].filter(
       (el) => el.closest("a-menu") === this && !el.hasAttribute("disabled") && this.isVisible(el)
     );
   }
+  /** Tab stops in rendered order, excluding controls owned by nested menus. */
+  focusables() {
+    return tabStops(this.surface).filter((el) => {
+      if (el.hasAttribute("disabled")) return false;
+      let node = el;
+      while (node) {
+        if (node.nodeType === 1 && node.localName === "a-menu") return node === this;
+        node = focusParent(node);
+      }
+      return false;
+    });
+  }
   /** 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
    *  first selected row into view and, when opened via keyboard, focuses it;
@@ -513,10 +544,79 @@ class AMenuElement extends HTMLElementBase {
     if (el && el.closest("a-menu") === this) return el;
     return this.#comboAnchor;
   }
-  /** 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. */
+  /** Give a dialog's scrolling body menu semantics when it contains menu items.
+   *  Headers and footers stay outside the menu. Empty bodies and plain editors
+   *  have no inner menu role. All mutations stay in shadow DOM. */
+  #syncAccessibilityRegions() {
+    if (!this.scrollEl) return;
+    const dialog = this.getAttribute("role") === "dialog";
+    if (dialog && this.isConnected && !this.accessibilityObserver) {
+      this.accessibilityObserver = new this.view.MutationObserver(() => this.#syncAccessibilityRegions());
+      this.accessibilityObserver.observe(this, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["data-menu-search", "slot"]
+      });
+    } else if (!dialog && this.accessibilityObserver) {
+      this.accessibilityObserver.disconnect();
+      this.accessibilityObserver = void 0;
+    }
+    const hasBodyItem = dialog && [...this.querySelectorAll(MENU_ITEM_SELECTOR)].some((item) => {
+      if (item.closest("a-menu") !== this) return false;
+      let region = item;
+      while (region.parentElement && region.parentElement !== this) region = region.parentElement;
+      const slot = region.getAttribute("slot");
+      return slot !== "header" && slot !== "footer";
+    });
+    if (hasBodyItem) {
+      this.scrollEl.setAttribute("role", "menu");
+      this.scrollEl.setAttribute("aria-label", "Options");
+      this.scrollEl.setAttribute("aria-orientation", "vertical");
+    } else {
+      this.scrollEl.removeAttribute("role");
+      this.scrollEl.removeAttribute("aria-label");
+      this.scrollEl.removeAttribute("aria-orientation");
+    }
+    this.#syncPopupAriaRelations();
+  }
+  /** Associate the popup with its Anta-owned trigger and filter field. Both
+   * control the popup host; the active option is a direct element reference.
+   * The host target also works when the options region lives in another shadow
+   * root, which ARIA element reflection does not expose through its getter. */
+  #syncPopupAriaRelations() {
+    if (!this.isConnected) return;
+    const next = /* @__PURE__ */ new Map();
+    const anchor = this.triggerAnchor;
+    const search = this.#searchField;
+    if (isPopupAriaReceiver(anchor)) {
+      next.set(anchor, {
+        controls: this,
+        activeDescendant: search === anchor ? this.activeItem : null
+      });
+    }
+    if (search !== anchor && isPopupAriaReceiver(search)) {
+      next.set(search, {
+        controls: this,
+        activeDescendant: this.activeItem
+      });
+    }
+    for (const target of this.#ariaRelationTargets) {
+      if (!next.has(target)) target[SYNC_POPUP_ARIA]({ source: this, clear: true });
+    }
+    for (const [target, relations] of next) {
+      target[SYNC_POPUP_ARIA]({ source: this, ...relations });
+    }
+    this.#ariaRelationTargets = new Set(next.keys());
+  }
+  #clearPopupAriaRelations() {
+    for (const target of this.#ariaRelationTargets)
+      target[SYNC_POPUP_ARIA]({ source: this, clear: true });
+    this.#ariaRelationTargets.clear();
+  }
+  /** 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. */
   setActive(item) {
     if (this.activeItem && this.activeItem !== item) this.activeItem.active = false;
     this.activeItem = item;
@@ -524,6 +624,7 @@ class AMenuElement extends HTMLElementBase {
       item.active = true;
       item.scrollIntoView?.({ block: "nearest" });
     }
+    this.#syncPopupAriaRelations();
     this.dispatchEvent(
       new CustomEvent("activedescendant", { detail: { id: item?.id ?? null } })
     );
@@ -719,9 +820,9 @@ class AMenuElement extends HTMLElementBase {
     });
     this.comboObserver.observe(this, { childList: true });
   }
-  /** Apply CLOSE to the DOM (no event). Closes this menu and everything stacked
-   *  above it (its submenus). */
-  hide() {
+  /** Apply CLOSE without notifying this menu's owner. Notify nested menus so
+   *  their controlled state follows the closing parent. */
+  hide(notifyDescendants = true) {
     this.comboObserver?.disconnect();
     this.comboObserver = void 0;
     this.setActive(null);
@@ -732,7 +833,11 @@ class AMenuElement extends HTMLElementBase {
       if (this._shown) this._doHide();
       return;
     }
-    for (let i = openStack.length - 1; i >= idx; i--) openStack[i]._doHide();
+    for (let i = openStack.length - 1; i >= idx; i--) {
+      const menu = openStack[i];
+      if (notifyDescendants && i > idx && menu.isOpen && !menu._dismissNotified) menu.emitChange("closed");
+      menu._doHide();
+    }
     openStack.length = idx;
     if (openStack.length === 0) unbindDocListeners();
   }
@@ -1038,16 +1143,10 @@ class AMenuElement extends HTMLElementBase {
         this.requestClose(e);
         return;
       }
-      const f = this.focusables();
-      if (!f.length) return;
+      const targets = this.focusables();
+      if (!targets.length) return;
       e.preventDefault();
-      const i = active ? f.indexOf(active) : -1;
-      if (i === -1) {
-        f[0]?.focus();
-        return;
-      }
-      const next = e.shiftKey ? i === 0 ? f.length - 1 : i - 1 : i === f.length - 1 ? 0 : i + 1;
-      f[next]?.focus();
+      cycleFocus(targets, activeFocus(this.doc), e.shiftKey);
       return;
     }
     const search = this.#searchField;
@@ -1181,7 +1280,9 @@ class AMenuElement extends HTMLElementBase {
       };
       const onKey = (e) => {
         if (this._shown) return;
-        if (anchor.matches(SELF_ACTIVATING) || anchor.hasAttribute("disabled")) return;
+        if (anchor.hasAttribute("disabled") || anchor.hasAttribute("loading")) return;
+        const arrow = e.key === "ArrowDown" || e.key === "ArrowUp";
+        if (!arrow && anchor.matches(SELF_ACTIVATING)) return;
         const editable = anchor.matches(EDITABLE_FIELD);
         const opens = e.key === "ArrowDown" || e.key === "ArrowUp" || !editable && (e.key === "Enter" || e.key === " ");
         if (!opens) return;

package/dist/elements/a-panel.css

@@ -0,0 +1 @@
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-panel{display:block;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;overflow:scroll}}

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

@@ -0,0 +1,16 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-panel.css';
+/** A persistent container whose slotted surface can occupy the viewport. */
+export declare class APanelElement extends HTMLElementBase {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** Request viewport maximization. Controlled panels wait for `state`. */
+    requestMaximize(): void;
+    /** Request a return to normal layout, keeping the content mounted. */
+    requestRestore(): void;
+}
+export declare function register_a_panel(): void;

package/dist/elements/a-panel.js

@@ -0,0 +1,153 @@
+import { HTMLElementBase } from "../anta_helpers";
+import { activeFocus, PanelFocusScope } from "./panel-focus";
+import "./a-panel.css";
+const SHADOW_STYLE = `
+  slot:not([popover]) { display: contents; }
+  slot:popover-open {
+    display: block;
+    position: fixed;
+    inset: 0;
+    width: auto;
+    height: auto;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    box-sizing: border-box;
+    overflow: scroll;
+    overscroll-behavior: contain;
+    color: inherit;
+    background: inherit;
+  }
+  slot::backdrop { background: transparent; pointer-events: none; }
+  .placeholder { display: none; }
+  .placeholder.active {
+    display: block;
+    flex: 0 0 auto;
+    max-width: 100%;
+    pointer-events: none;
+  }
+`;
+const parseState = (value) => value === "maximized" ? "maximized" : "normal";
+class APanelElement extends HTMLElementBase {
+  static observedAttributes = ["state"];
+  #surface;
+  #placeholder;
+  #internals;
+  #wanted = "normal";
+  #seeded = false;
+  #ready = false;
+  #focus;
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+    const shadow = this.attachShadow({ mode: "open" });
+    const doc = this.ownerDocument;
+    const style = doc.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.#surface = doc.createElement("slot");
+    this.#surface.setAttribute("part", "content");
+    this.#focus = new PanelFocusScope(this.#surface);
+    this.#placeholder = doc.createElement("div");
+    this.#placeholder.className = "placeholder";
+    this.#placeholder.setAttribute("aria-hidden", "true");
+    shadow.append(style, this.#placeholder, this.#surface);
+    this.#surface.addEventListener("toggle", () => {
+      if (this.#ready && this.isConnected) this.#apply();
+    });
+    this.addEventListener("panelmaximizerequest", this.#onRequest);
+    this.addEventListener("panelrestorerequest", this.#onRequest);
+    this.addEventListener("paneltoggle", this.#onRequest);
+  }
+  get #current() {
+    return typeof this.#surface.showPopover === "function" && this.#surface.matches(":popover-open") ? "maximized" : "normal";
+  }
+  connectedCallback() {
+    if (this.hasAttribute("state")) this.#wanted = parseState(this.getAttribute("state"));
+    else if (!this.#seeded) this.#wanted = parseState(this.getAttribute("default-state"));
+    this.#seeded = true;
+    queueMicrotask(() => {
+      if (!this.isConnected) return;
+      this.#ready = true;
+      this.#apply();
+    });
+  }
+  disconnectedCallback() {
+    this.#ready = false;
+    this.#restoreSurface(false);
+  }
+  attributeChangedCallback() {
+    if (!this.hasAttribute("state")) return;
+    this.#wanted = parseState(this.getAttribute("state"));
+    if (this.#ready && this.isConnected) this.#apply();
+  }
+  /** Request viewport maximization. Controlled panels wait for `state`. */
+  requestMaximize() {
+    this.#request("maximized");
+  }
+  /** Request a return to normal layout, keeping the content mounted. */
+  requestRestore() {
+    this.#request("normal");
+  }
+  #onRequest = (event) => {
+    const owner = event.composedPath().find((node) => node instanceof Element && node.localName === "a-panel");
+    if (owner !== this || event.defaultPrevented) return;
+    this.#request(event.type === "paneltoggle" ? this.#current === "maximized" ? "normal" : "maximized" : event.type === "panelmaximizerequest" ? "maximized" : "normal");
+  };
+  #request(next) {
+    const prev = this.#current;
+    if (next === prev) return;
+    const accepted = this.dispatchEvent(new CustomEvent("statechange", {
+      cancelable: true,
+      detail: { next, prev }
+    }));
+    if (!accepted || this.hasAttribute("state")) return;
+    this.#wanted = next;
+    if (this.#ready && this.isConnected) this.#apply();
+  }
+  #apply() {
+    if (this.#current === this.#wanted && (this.#wanted === "maximized" || !this.#surface.hasAttribute("popover"))) return;
+    if (this.#wanted === "maximized") {
+      if (typeof this.#surface.showPopover !== "function") return;
+      const focused = activeFocus(this.ownerDocument);
+      const styles = this.ownerDocument.defaultView.getComputedStyle(this);
+      const borderBox = styles.boxSizing === "border-box";
+      const borderWidth = parseFloat(styles.borderLeftWidth) + parseFloat(styles.borderRightWidth);
+      const borderHeight = parseFloat(styles.borderTopWidth) + parseFloat(styles.borderBottomWidth);
+      const scrollbarWidth = Math.max(0, this.offsetWidth - this.clientWidth - Math.round(borderWidth));
+      const scrollbarHeight = Math.max(0, this.offsetHeight - this.clientHeight - Math.round(borderHeight));
+      const width = parseFloat(styles.width) - (borderBox ? parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight) + borderWidth : 0) - scrollbarWidth;
+      const height = parseFloat(styles.height) - (borderBox ? parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom) + borderHeight : 0) - scrollbarHeight;
+      this.#placeholder.style.width = `${Math.max(0, width || 0)}px`;
+      this.#placeholder.style.height = `${Math.max(0, height || 0)}px`;
+      this.#placeholder.classList.add("active");
+      this.#surface.tabIndex = -1;
+      this.#surface.setAttribute("popover", "manual");
+      this.#focus.activate(focused);
+      this.#surface.showPopover();
+      this.#internals.states?.add("maximized");
+      this.#focus.focusInside(focused);
+    } else {
+      this.#restoreSurface();
+    }
+  }
+  #restoreSurface(restoreFocus = true) {
+    const returnFocus = this.#focus.deactivate();
+    if (this.#current === "maximized") this.#surface.hidePopover();
+    this.#surface.removeAttribute("popover");
+    this.#surface.removeAttribute("tabindex");
+    this.#placeholder.classList.remove("active");
+    this.#internals.states?.delete("maximized");
+    if (restoreFocus) returnFocus();
+  }
+}
+function register_a_panel() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-panel")) customElements.define("a-panel", APanelElement);
+}
+register_a_panel();
+export {
+  APanelElement,
+  register_a_panel
+};

package/dist/elements/a-progress.css

@@ -1 +1 @@
-@layer anta.components{:where(a-progress,progress[data-anta]){--progress-bg: var(--bg-4);--progress-border-color: var(--border-4);--progress-indicator-bg: var(--bg-5);--progress-indicator-edge: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-border-color) 100% );--progress-text-color: var(--text-2);--progress-hint-color: var(--text-3);--progress-loading-angle: 125deg;--progress-loading-x-period: calc(40px + 5cqi) ;--progress-loading-period: calc( var(--progress-loading-x-period) * cos(var(--progress-loading-angle) - 90deg) );--progress-loading-stripe: calc(var(--progress-loading-period) * 2 / 5);--progress-loading-stripe-gap: calc(var(--progress-loading-period) * 3 / 5);--progress-loading-opacity: .15;--progress-loading-blur: clamp(8px, 2cqi, 16px);--progress-loading-duration: .5s;--progress-padding-block: 4px;--progress-padding-inline: 8px;--progress-min-height: 8px;--progress-label-size: 13px;--progress-label-line-height: 16px}a-progress{display:block;container-type:inline-size;padding:var(--progress-padding-block) var(--progress-padding-inline);min-height:var(--progress-min-height);background:var(--progress-bg);border:0px solid var(--progress-border-color);border-radius:0}:where(a-progress,progress[data-anta])[size=small]{--progress-padding-block: 2px;--progress-padding-inline: 6px;--progress-label-size: 12px;--progress-label-line-height: 14px}:where(a-progress,progress[data-anta])[size=large]{--progress-padding-block: 6px;--progress-padding-inline: 10px;--progress-label-size: 15px;--progress-label-line-height: 20px}a-progress[round]{--progress-round: 999px;border-radius:var(--progress-round)}@supports (border-radius: attr(round type(<length>),999px)){a-progress[round]{--progress-round: attr(round type(<length>), 999px)}}:where(a-progress,progress[data-anta])[tone=brand]{--progress-bg: var(--bg-4-brand);--progress-border-color: var(--border-4-brand);--progress-indicator-bg: var(--bg-5-brand);--progress-text-color: var(--text-2-brand);--progress-hint-color: var(--text-3-brand)}:where(a-progress,progress[data-anta])[tone=info]{--progress-bg: var(--bg-4-info);--progress-border-color: var(--border-4-info);--progress-indicator-bg: var(--bg-5-info);--progress-text-color: var(--text-2-info);--progress-hint-color: var(--text-3-info)}:where(a-progress,progress[data-anta])[tone=success]{--progress-bg: var(--bg-4-success);--progress-border-color: var(--border-4-success);--progress-indicator-bg: var(--bg-5-success);--progress-text-color: var(--text-2-success);--progress-hint-color: var(--text-3-success)}:where(a-progress,progress[data-anta])[tone=warning]{--progress-bg: var(--bg-4-warning);--progress-border-color: var(--border-4-warning);--progress-indicator-bg: var(--bg-5-warning);--progress-text-color: var(--text-2-warning);--progress-hint-color: var(--text-3-warning)}:where(a-progress,progress[data-anta])[tone=critical]{--progress-bg: var(--bg-4-critical);--progress-border-color: var(--border-4-critical);--progress-indicator-bg: var(--bg-5-critical);--progress-text-color: var(--text-2-critical);--progress-hint-color: var(--text-3-critical)}@supports (color: attr(tone type(<color>),transparent)){:where(a-progress,progress[data-anta])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--progress-tone-source: attr(tone type(<color>), transparent);--progress-bg: light-dark(oklch(from var(--progress-tone-source) .955 .02 h), oklch(from var(--progress-tone-source) .185 .05 h));--progress-border-color: light-dark(oklch(from var(--progress-tone-source) .9 .04 h), oklch(from var(--progress-tone-source) .26 .06 h));--progress-indicator-bg: light-dark(oklch(from var(--progress-tone-source) .935 .03 h), oklch(from var(--progress-tone-source) .205 .055 h));--progress-text-color: light-dark(oklch(from var(--progress-tone-source) .43 .15 h), oklch(from var(--progress-tone-source) .77 .11 h));--progress-hint-color: light-dark( color-mix(in oklch, var(--progress-text-color) 82%, transparent), color-mix(in oklch, var(--progress-text-color) 80%, transparent) )}}a-progress-label{display:flex;align-items:flex-start;gap:.5ch;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.03em;font-size:var(--progress-label-size);line-height:var(--progress-label-line-height)}a-progress-number{flex-shrink:0;color:var(--progress-text-color)}a-progress-text{flex:1 1 auto;min-width:0;color:var(--progress-text-color)}a-progress-hint{flex-shrink:0;margin-left:auto;color:var(--progress-hint-color)}progress[data-anta]{--anta-native-progress-height: calc( var(--progress-min-height) + var(--progress-padding-block) + var(--progress-padding-block) );--anta-native-progress-radius: 0px;--anta-native-progress-fill: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-indicator-bg) calc(100% - 90px) , var(--progress-border-color) 100% );box-sizing:border-box;display:block;position:relative;container-type:inline-size;inline-size:100%;block-size:var(--anta-native-progress-height);margin:0;padding:0;border:0;border-radius:var(--anta-native-progress-radius);appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--progress-bg);overflow:hidden;vertical-align:middle}progress[data-anta][round]{--anta-native-progress-radius: 999px}@supports (border-radius: attr(round type(<length>),999px)){progress[data-anta][round]{--anta-native-progress-radius: attr(round type(<length>), 999px)}}progress[data-anta]::-webkit-progress-bar{border-radius:var(--anta-native-progress-radius);background:var(--progress-bg)}progress[data-anta]::-webkit-progress-value{border-radius:var(--anta-native-progress-radius);background:var(--anta-native-progress-fill)}progress[data-anta]::-moz-progress-bar{border:0;border-radius:var(--anta-native-progress-radius);background:var(--anta-native-progress-fill)}progress[data-anta]:not([value]):before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--progress-loading-x-period));width:calc(100% + var(--progress-loading-x-period));pointer-events:none;background:repeating-linear-gradient(var(--progress-loading-angle),transparent 0,transparent var(--progress-loading-stripe-gap),var(--progress-text-color) var(--progress-loading-stripe-gap),var(--progress-text-color) calc(var(--progress-loading-stripe-gap) + var(--progress-loading-stripe)));filter:blur(var(--progress-loading-blur));opacity:var(--progress-loading-opacity);will-change:transform}@media(prefers-reduced-motion:no-preference){progress[data-anta]:not([value]):before{animation:progress-native-loading-slide var(--progress-loading-duration) linear infinite;animation-delay:-9999s}}@keyframes progress-native-loading-slide{to{transform:translate(var(--progress-loading-x-period))}}@media(forced-colors:active){:where(a-progress,progress[data-anta]){forced-color-adjust:none;--progress-bg: Canvas !important;--progress-border-color: CanvasText !important;--progress-indicator-bg: light-dark(SelectedItem, Highlight) !important;--progress-indicator-edge: light-dark(SelectedItem, Highlight) !important;--progress-indicator-edge-border: 1px solid light-dark(SelectedItemText, HighlightText) !important;--progress-text-color: CanvasText !important;--progress-hint-color: CanvasText !important;border:1px dotted CanvasText!important}}}a-progress>p:last-child,a-progress>:not([slot])>p:last-child{margin-block-end:0}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{:where(a-progress,progress[data-anta]){--progress-bg: var(--bg-4);--progress-border-color: var(--border-4);--progress-indicator-bg: var(--bg-5);--progress-indicator-edge: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-border-color) 100% );--progress-text-color: var(--text-2);--progress-hint-color: var(--text-3);--progress-loading-angle: 125deg;--progress-loading-x-period: calc(40px + 5cqi) ;--progress-loading-period: calc( var(--progress-loading-x-period) * cos(var(--progress-loading-angle) - 90deg) );--progress-loading-stripe: calc(var(--progress-loading-period) * 2 / 5);--progress-loading-stripe-gap: calc(var(--progress-loading-period) * 3 / 5);--progress-loading-opacity: .15;--progress-loading-blur: clamp(8px, 2cqi, 16px);--progress-loading-duration: .5s;--progress-padding-block: 4px;--progress-padding-inline: 8px;--progress-min-height: 8px;--progress-label-size: 13px;--progress-label-line-height: 16px}a-progress{display:block;container-type:inline-size;padding:var(--progress-padding-block) var(--progress-padding-inline);min-height:var(--progress-min-height);background:var(--progress-bg);border:0px solid var(--progress-border-color);border-radius:0}:where(a-progress,progress[data-anta])[size=small]{--progress-padding-block: 2px;--progress-padding-inline: 6px;--progress-label-size: 12px;--progress-label-line-height: 14px}:where(a-progress,progress[data-anta])[size=large]{--progress-padding-block: 6px;--progress-padding-inline: 10px;--progress-label-size: 15px;--progress-label-line-height: 20px}a-progress[round]{--progress-round: 999px;border-radius:var(--progress-round)}@supports (border-radius: attr(round type(<length>),999px)){a-progress[round]{--progress-round: attr(round type(<length>), 999px)}}:where(a-progress,progress[data-anta])[tone=brand]{--progress-bg: var(--bg-4-brand);--progress-border-color: var(--border-4-brand);--progress-indicator-bg: var(--bg-5-brand);--progress-text-color: var(--text-2-brand);--progress-hint-color: var(--text-3-brand)}:where(a-progress,progress[data-anta])[tone=info]{--progress-bg: var(--bg-4-info);--progress-border-color: var(--border-4-info);--progress-indicator-bg: var(--bg-5-info);--progress-text-color: var(--text-2-info);--progress-hint-color: var(--text-3-info)}:where(a-progress,progress[data-anta])[tone=success]{--progress-bg: var(--bg-4-success);--progress-border-color: var(--border-4-success);--progress-indicator-bg: var(--bg-5-success);--progress-text-color: var(--text-2-success);--progress-hint-color: var(--text-3-success)}:where(a-progress,progress[data-anta])[tone=warning]{--progress-bg: var(--bg-4-warning);--progress-border-color: var(--border-4-warning);--progress-indicator-bg: var(--bg-5-warning);--progress-text-color: var(--text-2-warning);--progress-hint-color: var(--text-3-warning)}:where(a-progress,progress[data-anta])[tone=critical]{--progress-bg: var(--bg-4-critical);--progress-border-color: var(--border-4-critical);--progress-indicator-bg: var(--bg-5-critical);--progress-text-color: var(--text-2-critical);--progress-hint-color: var(--text-3-critical)}@supports (color: attr(tone type(<color>),transparent)){:where(a-progress,progress[data-anta])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--progress-tone-source: attr(tone type(<color>), transparent);--progress-bg: light-dark(oklch(from var(--progress-tone-source) .955 .02 h), oklch(from var(--progress-tone-source) .185 .05 h));--progress-border-color: light-dark(oklch(from var(--progress-tone-source) .9 .04 h), oklch(from var(--progress-tone-source) .26 .06 h));--progress-indicator-bg: light-dark(oklch(from var(--progress-tone-source) .935 .03 h), oklch(from var(--progress-tone-source) .205 .055 h));--progress-text-color: light-dark(oklch(from var(--progress-tone-source) .43 .15 h), oklch(from var(--progress-tone-source) .77 .11 h));--progress-hint-color: light-dark( color-mix(in oklch, var(--progress-text-color) 82%, transparent), color-mix(in oklch, var(--progress-text-color) 80%, transparent) )}}a-progress-label{display:flex;align-items:flex-start;gap:.5ch;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em;font-size:var(--progress-label-size);line-height:var(--progress-label-line-height)}a-progress-number{flex-shrink:0;color:var(--progress-text-color)}a-progress-text{flex:1 1 auto;min-width:0;color:var(--progress-text-color)}a-progress-hint{flex-shrink:0;margin-left:auto;color:var(--progress-hint-color)}progress[data-anta]{--anta-native-progress-height: calc( var(--progress-min-height) + var(--progress-padding-block) + var(--progress-padding-block) );--anta-native-progress-radius: 0px;--anta-native-progress-fill: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-indicator-bg) calc(100% - 90px) , var(--progress-border-color) 100% );box-sizing:border-box;display:block;position:relative;container-type:inline-size;inline-size:100%;block-size:var(--anta-native-progress-height);margin:0;padding:0;border:0;border-radius:var(--anta-native-progress-radius);appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--progress-bg);overflow:hidden;vertical-align:middle}progress[data-anta][round]{--anta-native-progress-radius: 999px}@supports (border-radius: attr(round type(<length>),999px)){progress[data-anta][round]{--anta-native-progress-radius: attr(round type(<length>), 999px)}}progress[data-anta]::-webkit-progress-bar{border-radius:var(--anta-native-progress-radius);background:var(--progress-bg)}progress[data-anta]::-webkit-progress-value{border-radius:var(--anta-native-progress-radius);background:var(--anta-native-progress-fill)}progress[data-anta]::-moz-progress-bar{border:0;border-radius:var(--anta-native-progress-radius);background:var(--anta-native-progress-fill)}progress[data-anta]:not([value]):before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--progress-loading-x-period));width:calc(100% + var(--progress-loading-x-period));pointer-events:none;background:repeating-linear-gradient(var(--progress-loading-angle),transparent 0,transparent var(--progress-loading-stripe-gap),var(--progress-text-color) var(--progress-loading-stripe-gap),var(--progress-text-color) calc(var(--progress-loading-stripe-gap) + var(--progress-loading-stripe)));filter:blur(var(--progress-loading-blur));opacity:var(--progress-loading-opacity);will-change:transform}@media(prefers-reduced-motion:no-preference){progress[data-anta]:not([value]):before{animation:progress-native-loading-slide var(--progress-loading-duration) linear infinite;animation-delay:-9999s}}@keyframes progress-native-loading-slide{to{transform:translate(var(--progress-loading-x-period))}}@media(forced-colors:active){:where(a-progress,progress[data-anta]){forced-color-adjust:none;--progress-bg: Canvas !important;--progress-border-color: CanvasText !important;--progress-indicator-bg: light-dark(SelectedItem, Highlight) !important;--progress-indicator-edge: light-dark(SelectedItem, Highlight) !important;--progress-indicator-edge-border: 1px solid light-dark(SelectedItemText, HighlightText) !important;--progress-text-color: CanvasText !important;--progress-hint-color: CanvasText !important;border:1px dotted CanvasText!important}}}a-progress>p:last-child,a-progress>:not([slot])>p:last-child{margin-block-end:0}

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

@@ -1 +1 @@
-@layer anta.components{a-radio-group{--radio-group-hint: var(--text-3);display:flex;flex-direction:column}a-radio-list{display:flex;flex-direction:column;gap:8px}a-radio-group[orientation=horizontal] a-radio-list{flex-direction:row;flex-wrap:wrap;gap:16px}a-radio-list:not(:first-child){margin-block-start:10px}a-radio-group-label{display:block;color:var(--text-3);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-radio-group-hint{display:block;color:var(--radio-group-hint);font-size:14px;line-height:17px;margin-block-start:2px}a-radio-group[status=critical]{--radio-group-hint: var(--text-2-critical)}a-radio-group[status=warning]{--radio-group-hint: var(--text-2-warning)}a-radio-group[status=success]{--radio-group-hint: var(--text-2-success)}a-radio-group[status=info]{--radio-group-hint: var(--text-2-info)}a-radio-group[status=brand]{--radio-group-hint: var(--text-2-brand)}a-radio-group[size=small] a-radio:not([size]){--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}a-radio-group[size=large] a-radio:not([size]){--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-group[disabled]{--radio-group-hint: var(--text-5)}a-radio-group[disabled] a-radio{cursor:not-allowed;pointer-events:none;color:var(--radio-label-color-disabled);--radio-hint-color: var(--radio-label-color-disabled);--radio-bg: var(--radio-bg-disabled);--radio-border: var(--radio-border-disabled);--radio-border-hover: var(--radio-border-disabled);--radio-border-active: var(--radio-border-disabled);--radio-bg-selected: var(--radio-bg-disabled);--radio-bg-selected-hover: var(--radio-bg-disabled);--radio-bg-selected-active: var(--radio-bg-disabled);--radio-dot: var(--radio-dot-disabled)}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-radio-group{--radio-group-hint: var(--text-3);display:flex;flex-direction:column}a-radio-list{display:flex;flex-direction:column;gap:8px}a-radio-group[orientation=horizontal] a-radio-list{flex-direction:row;flex-wrap:wrap;gap:16px}a-radio-list:not(:first-child){margin-block-start:10px}a-radio-group-label{display:block;color:var(--text-3);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-radio-group-hint{display:block;color:var(--radio-group-hint);font-size:14px;line-height:17px;margin-block-start:2px}a-radio-group[status=critical]{--radio-group-hint: var(--text-2-critical)}a-radio-group[status=warning]{--radio-group-hint: var(--text-2-warning)}a-radio-group[status=success]{--radio-group-hint: var(--text-2-success)}a-radio-group[status=info]{--radio-group-hint: var(--text-2-info)}a-radio-group[status=brand]{--radio-group-hint: var(--text-2-brand)}a-radio-group[size=small] a-radio:not([size]){--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}a-radio-group[size=large] a-radio:not([size]){--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-group[disabled]{--radio-group-hint: var(--text-5)}a-radio-group[disabled] a-radio{cursor:not-allowed;pointer-events:none;color:var(--radio-label-color-disabled);--radio-hint-color: var(--radio-label-color-disabled);--radio-bg: var(--radio-bg-disabled);--radio-border: var(--radio-border-disabled);--radio-border-hover: var(--radio-border-disabled);--radio-border-active: var(--radio-border-disabled);--radio-bg-selected: var(--radio-bg-disabled);--radio-bg-selected-hover: var(--radio-bg-disabled);--radio-bg-selected-active: var(--radio-bg-disabled);--radio-dot: var(--radio-dot-disabled)}}

package/dist/elements/a-radio.css

@@ -1 +1 @@
-@layer anta.components{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-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .6 c h), oklch(from var(--radio-tone-source) .42 c h));--radio-bg-selected-hover: oklch(from var(--radio-tone-source) .45 c h);--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-border-neutral: var(--border-3);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: light-dark(#f6f4f6, #ece9ec);--radio-dot-disabled: light-dark(#c1b9c1, #534c57);--radio-bg-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent));--radio-border-disabled: var(--radio-bg-disabled);--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);&: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);box-shadow:0 0 1px 1px light-dark(transparent,color-mix(in oklch,black 40%,transparent));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-bg-selected-hover);border-color:var(--radio-bg-selected-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-bg-selected-active);border-color:var(--radio-bg-selected-active)}&:state(selected){&:before{background:var(--radio-bg-selected);border-color:var(--radio-bg-selected)}&:after{transform:scale(1)}}&:focus-visible{outline:none}&: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]:not([tone=""],[tone=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]){--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .5 c h), oklch(from var(--radio-tone-source) .45 c h));--radio-bg-selected-hover: light-dark(oklch(from var(--radio-tone-source) .45 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .57 c h))}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-brand);--radio-off-tone-source: var(--anta-seed-brand)}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-info);--radio-off-tone-source: var(--anta-seed-info)}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-success);--radio-off-tone-source: var(--anta-seed-success)}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-warning);--radio-off-tone-source: var(--anta-seed-warning)}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-critical);--radio-off-tone-source: var(--anta-seed-critical)}a-radio[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral)}a-radio[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone]:not([tone=""],[tone=neutral])[tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h), oklch(from var(--radio-off-tone-source) .15 calc(c*.18) h));--_radio-off-bg-selected: var(--radio-bg-selected);--_radio-border-base: color-mix(in oklch, var(--_radio-off-bg-selected) 70%, var(--radio-border-neutral));--radio-border: light-dark(oklch(from var(--_radio-border-base) calc(l + .17) c h), var(--_radio-border-base));--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: light-dark(var(--_radio-border-base), 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: transparent;--radio-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone type(<color>), transparent);--radio-off-tone-source: attr(tone type(<color>), transparent)}}a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: transparent;--radio-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone type(<color>), transparent);--radio-off-tone-source: attr(tone type(<color>), transparent)}}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) a-radio:not([tone]){--radio-tone-source: inherit;--radio-off-tone-source: inherit}.dark a-radio{--_radio-dot-adjust: 1px}label:has(>input[data-anta][type=radio]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-size:15px;line-height:20px}input[data-anta][type=radio]{--radio-control-size: 16px;--radio-dot-core: 3px;--radio-dot-edge: 3.5px;--radio-bg: var(--bg-1);--radio-border-neutral: var(--border-3);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .6 c h), oklch(from var(--radio-tone-source) .42 c h));--radio-bg-selected-hover: oklch(from var(--radio-tone-source) .45 c h);--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-dot: light-dark(#f6f4f6, #ece9ec);box-sizing:border-box;flex:0 0 var(--radio-control-size);inline-size:var(--radio-control-size);block-size:var(--radio-control-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--radio-border);border-radius:50%;background-color:var(--radio-bg);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=radio][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=radio][size=large]){font-size:17px;line-height:22px}input[data-anta][type=radio][size=small]{--radio-control-size: 14px;--radio-dot-core: 2.5px;--radio-dot-edge: 3px}input[data-anta][type=radio][size=large]{--radio-control-size: 18px;--radio-dot-core: 3.5px;--radio-dot-edge: 4px}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .5 c h), oklch(from var(--radio-tone-source) .45 c h));--radio-bg-selected-hover: light-dark(oklch(from var(--radio-tone-source) .45 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .57 c h))}input[data-anta][type=radio][tone=brand]{--radio-tone-source: var(--anta-seed-brand);--radio-off-tone-source: var(--anta-seed-brand)}input[data-anta][type=radio][tone=info]{--radio-tone-source: var(--anta-seed-info);--radio-off-tone-source: var(--anta-seed-info)}input[data-anta][type=radio][tone=success]{--radio-tone-source: var(--anta-seed-success);--radio-off-tone-source: var(--anta-seed-success)}input[data-anta][type=radio][tone=warning]{--radio-tone-source: var(--anta-seed-warning);--radio-off-tone-source: var(--anta-seed-warning)}input[data-anta][type=radio][tone=critical]{--radio-tone-source: var(--anta-seed-critical);--radio-off-tone-source: var(--anta-seed-critical)}input[data-anta][type=radio][tone=neutral]{--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral)}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--radio-bg: light-dark(oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h), oklch(from var(--radio-off-tone-source) .15 calc(c*.18) h));--_radio-off-bg-selected: var(--radio-bg-selected);--_radio-border-base: color-mix(in oklch, var(--_radio-off-bg-selected) 70%, var(--radio-border-neutral));--radio-border: light-dark(oklch(from var(--_radio-border-base) calc(l + .17) c h), var(--_radio-border-base));--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: light-dark(var(--_radio-border-base), oklch(from var(--_radio-border-base) calc(l + .17) c h))}input[data-anta][type=radio][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone type(<color>), var(--anta-seed-neutral));--radio-off-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}}@media(hover:hover)and (pointer:fine){input[data-anta][type=radio]:not(:disabled):hover{border-color:var(--radio-border-hover)}input[data-anta][type=radio]:not(:disabled):hover:checked{border-color:var(--radio-bg-selected-hover);background:radial-gradient(circle,var(--radio-dot) 0 var(--radio-dot-core),var(--radio-bg-selected-hover) var(--radio-dot-edge))}}input[data-anta][type=radio]:not(:disabled):active{border-color:var(--radio-border-active)}input[data-anta][type=radio]:not(:disabled):active:checked{border-color:var(--radio-bg-selected-active);background:radial-gradient(circle,var(--radio-dot) 0 var(--radio-dot-core),var(--radio-bg-selected-active) var(--radio-dot-edge))}input[data-anta][type=radio]:checked{border-color:var(--radio-bg-selected);background:radial-gradient(circle,var(--radio-dot) 0 var(--radio-dot-core),var(--radio-bg-selected) var(--radio-dot-edge))}input[data-anta][type=radio]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=radio]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=radio]:disabled:checked{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background:radial-gradient(circle,var(--text-4) 0 var(--radio-dot-core),color-mix(in oklch,var(--text-1) 10%,transparent) var(--radio-dot-edge))}@media(forced-colors:active){a-radio:state(selected):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-radio:state(selected):after{forced-color-adjust:none;background-color:HighlightText;box-shadow:none}a-radio[disabled]:before{background-color:Canvas;border-color:GrayText}a-radio[disabled]:state(selected):after{background-color:GrayText}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{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-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .6 c h), oklch(from var(--radio-tone-source) .42 c h));--radio-bg-selected-hover: oklch(from var(--radio-tone-source) .45 c h);--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-border-neutral: var(--border-3);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: light-dark(#f6f4f6, #ece9ec);--radio-dot-disabled: light-dark(#c1b9c1, #534c57);--radio-bg-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent));--radio-border-disabled: var(--radio-bg-disabled);--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);&: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);box-shadow:0 0 1px 1px light-dark(transparent,color-mix(in oklch,black 40%,transparent));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-bg-selected-hover);border-color:var(--radio-bg-selected-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-bg-selected-active);border-color:var(--radio-bg-selected-active)}&:state(selected){&:before{background:var(--radio-bg-selected);border-color:var(--radio-bg-selected)}&:after{transform:scale(1)}}&:focus-visible{outline:none}&: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]:not([tone=""],[tone=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]){--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .5 c h), oklch(from var(--radio-tone-source) .45 c h));--radio-bg-selected-hover: light-dark(oklch(from var(--radio-tone-source) .45 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .57 c h))}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-brand);--radio-off-tone-source: var(--anta-seed-brand)}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-info);--radio-off-tone-source: var(--anta-seed-info)}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-success);--radio-off-tone-source: var(--anta-seed-success)}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-warning);--radio-off-tone-source: var(--anta-seed-warning)}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-critical);--radio-off-tone-source: var(--anta-seed-critical)}a-radio[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral)}a-radio[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone]:not([tone=""],[tone=neutral])[tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h), oklch(from var(--radio-off-tone-source) .15 calc(c*.18) h));--_radio-off-bg-selected: var(--radio-bg-selected);--_radio-border-base: color-mix(in oklch, var(--_radio-off-bg-selected) 70%, var(--radio-border-neutral));--radio-border: light-dark(oklch(from var(--_radio-border-base) calc(l + .17) c h), var(--_radio-border-base));--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: light-dark(var(--_radio-border-base), 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: transparent;--radio-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone type(<color>), transparent);--radio-off-tone-source: attr(tone type(<color>), transparent)}}a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: transparent;--radio-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone type(<color>), transparent);--radio-off-tone-source: attr(tone type(<color>), transparent)}}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) a-radio:not([tone]){--radio-tone-source: inherit;--radio-off-tone-source: inherit}.dark a-radio{--_radio-dot-adjust: 1px}label:has(>input[data-anta][type=radio]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-size:15px;line-height:20px}input[data-anta][type=radio]{--radio-control-size: 16px;--radio-dot-core: 3px;--radio-dot-edge: 3.5px;--radio-bg: var(--bg-1);--radio-border-neutral: var(--border-3);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .6 c h), oklch(from var(--radio-tone-source) .42 c h));--radio-bg-selected-hover: oklch(from var(--radio-tone-source) .45 c h);--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-dot: light-dark(#f6f4f6, #ece9ec);box-sizing:border-box;flex:0 0 var(--radio-control-size);inline-size:var(--radio-control-size);block-size:var(--radio-control-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--radio-border);border-radius:50%;background-color:var(--radio-bg);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=radio][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=radio][size=large]){font-size:17px;line-height:22px}input[data-anta][type=radio][size=small]{--radio-control-size: 14px;--radio-dot-core: 2.5px;--radio-dot-edge: 3px}input[data-anta][type=radio][size=large]{--radio-control-size: 18px;--radio-dot-core: 3.5px;--radio-dot-edge: 4px}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .5 c h), oklch(from var(--radio-tone-source) .45 c h));--radio-bg-selected-hover: light-dark(oklch(from var(--radio-tone-source) .45 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .57 c h))}input[data-anta][type=radio][tone=brand]{--radio-tone-source: var(--anta-seed-brand);--radio-off-tone-source: var(--anta-seed-brand)}input[data-anta][type=radio][tone=info]{--radio-tone-source: var(--anta-seed-info);--radio-off-tone-source: var(--anta-seed-info)}input[data-anta][type=radio][tone=success]{--radio-tone-source: var(--anta-seed-success);--radio-off-tone-source: var(--anta-seed-success)}input[data-anta][type=radio][tone=warning]{--radio-tone-source: var(--anta-seed-warning);--radio-off-tone-source: var(--anta-seed-warning)}input[data-anta][type=radio][tone=critical]{--radio-tone-source: var(--anta-seed-critical);--radio-off-tone-source: var(--anta-seed-critical)}input[data-anta][type=radio][tone=neutral]{--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral)}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--radio-bg: light-dark(oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h), oklch(from var(--radio-off-tone-source) .15 calc(c*.18) h));--_radio-off-bg-selected: var(--radio-bg-selected);--_radio-border-base: color-mix(in oklch, var(--_radio-off-bg-selected) 70%, var(--radio-border-neutral));--radio-border: light-dark(oklch(from var(--_radio-border-base) calc(l + .17) c h), var(--_radio-border-base));--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: light-dark(var(--_radio-border-base), oklch(from var(--_radio-border-base) calc(l + .17) c h))}input[data-anta][type=radio][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone type(<color>), var(--anta-seed-neutral));--radio-off-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}}@media(hover:hover)and (pointer:fine){input[data-anta][type=radio]:not(:disabled):hover{border-color:var(--radio-border-hover)}input[data-anta][type=radio]:not(:disabled):hover:checked{border-color:var(--radio-bg-selected-hover);background:radial-gradient(circle,var(--radio-dot) 0 var(--radio-dot-core),var(--radio-bg-selected-hover) var(--radio-dot-edge))}}input[data-anta][type=radio]:not(:disabled):active{border-color:var(--radio-border-active)}input[data-anta][type=radio]:not(:disabled):active:checked{border-color:var(--radio-bg-selected-active);background:radial-gradient(circle,var(--radio-dot) 0 var(--radio-dot-core),var(--radio-bg-selected-active) var(--radio-dot-edge))}input[data-anta][type=radio]:checked{border-color:var(--radio-bg-selected);background:radial-gradient(circle,var(--radio-dot) 0 var(--radio-dot-core),var(--radio-bg-selected) var(--radio-dot-edge))}input[data-anta][type=radio]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=radio]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=radio]:disabled:checked{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background:radial-gradient(circle,var(--text-4) 0 var(--radio-dot-core),color-mix(in oklch,var(--text-1) 10%,transparent) var(--radio-dot-edge))}@media(forced-colors:active){a-radio:state(selected):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-radio:state(selected):after{forced-color-adjust:none;background-color:HighlightText;box-shadow:none}a-radio[disabled]:before{background-color:Canvas;border-color:GrayText}a-radio[disabled]:state(selected):after{background-color:GrayText}}}

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

@@ -2,5 +2,9 @@ import { SelectableChildElement } from "../anta_helpers";
 import "./a-radio.css";
 export declare class ARadioElement extends SelectableChildElement {
     protected ariaProp: "ariaChecked";
+    private accessibilityObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncAccessibilityRelations;
 }
 export declare function register_a_radio(): void;

package/dist/elements/a-radio.js

@@ -2,6 +2,24 @@ import { SelectableChildElement } from "../anta_helpers";
 import "./a-radio.css";
 class ARadioElement extends SelectableChildElement {
   ariaProp = "ariaChecked";
+  accessibilityObserver;
+  connectedCallback() {
+    super.connectedCallback();
+    this.syncAccessibilityRelations();
+    this.accessibilityObserver ??= new this.view.MutationObserver(
+      () => this.syncAccessibilityRelations()
+    );
+    this.accessibilityObserver.observe(this, { childList: true });
+  }
+  disconnectedCallback() {
+    this.accessibilityObserver?.disconnect();
+  }
+  syncAccessibilityRelations() {
+    this.applyAccessibilityRelations(
+      Array.from(this.querySelectorAll(":scope > a-radio-label")),
+      Array.from(this.querySelectorAll(":scope > a-radio-hint"))
+    );
+  }
 }
 function register_a_radio() {
   if (typeof customElements === "undefined") return;