@antadesign/anta 0.3.30 → 0.3.32

package/dist/elements/a-menu.js

@@ -3,6 +3,7 @@ import {
   SYNC_POPUP_ARIA,
   anchorRect,
   isPopupAriaReceiver,
+  isModifiedNavigationKey,
   setMenuPresence
 } from "../anta_helpers";
 import { AMenuItemElement, MENU_ITEM_SELECTOR, isMenuItemEl, ensureMenuItemKeyListener } from "./a-menu-item";
@@ -21,9 +22,20 @@ const openStack = [];
 let docBound = false;
 let boundDoc = null;
 let boundView = null;
+let mouseX = null;
+let mouseY = 0;
+function trackMouse(e) {
+  mouseX = e.pointerType === "mouse" ? e.clientX : null;
+  if (mouseX !== null) mouseY = e.clientY;
+}
+function mouseInside(rect) {
+  return mouseX !== null && mouseX >= rect.left && mouseX < rect.right && mouseY >= rect.top && mouseY < rect.bottom;
+}
 function bindDocListeners(doc, view) {
   if (docBound) return;
   doc.addEventListener("pointerdown", onDocPointerDown, true);
+  doc.addEventListener("pointermove", trackMouse, { capture: true, passive: true });
+  doc.addEventListener("pointerleave", clearMouse);
   doc.addEventListener("keydown", onDocKeyDown, true);
   doc.addEventListener("keyup", onDocKeyUp, true);
   doc.addEventListener("contextmenu", onDocContextMenu, true);
@@ -35,6 +47,8 @@ function bindDocListeners(doc, view) {
 function unbindDocListeners() {
   if (!docBound) return;
   boundDoc?.removeEventListener("pointerdown", onDocPointerDown, true);
+  boundDoc?.removeEventListener("pointermove", trackMouse, true);
+  boundDoc?.removeEventListener("pointerleave", clearMouse);
   boundDoc?.removeEventListener("keydown", onDocKeyDown, true);
   boundDoc?.removeEventListener("keyup", onDocKeyUp, true);
   boundDoc?.removeEventListener("contextmenu", onDocContextMenu, true);
@@ -42,6 +56,10 @@ function unbindDocListeners() {
   boundDoc = null;
   boundView = null;
   docBound = false;
+  mouseX = null;
+}
+function clearMouse() {
+  mouseX = null;
 }
 function menuIndexForEvent(e, primaryClick = false) {
   const path = e.composedPath();
@@ -74,6 +92,7 @@ setMenuPresence({
   contains: nodeHitsMenus
 });
 function onDocPointerDown(e) {
+  trackMouse(e);
   if (!openStack.length) return;
   const index = menuIndexForEvent(e, e.button === 0);
   openStack[index + 1]?.requestClose(e);
@@ -144,6 +163,7 @@ class AMenuElement extends HTMLElementBase {
   // Submenu hover-intent timers.
   openTimer;
   closeTimer;
+  #holdHoverClose = false;
   // Typeahead state (root navigation).
   typeBuffer = "";
   typeTimer;
@@ -306,7 +326,10 @@ class AMenuElement extends HTMLElementBase {
     this.surface.append(header, scroll, footer);
     this.surface.addEventListener("pointerenter", (e) => {
       if (e.pointerType !== "mouse") return;
-      if (this.isSubmenu) this.cancelCloseTimer();
+      if (this.isSubmenu) {
+        this.#holdHoverClose = false;
+        this.cancelCloseTimer();
+      }
     });
     this.surface.addEventListener("pointerleave", (e) => {
       if (e.pointerType !== "mouse") return;
@@ -849,6 +872,7 @@ class AMenuElement extends HTMLElementBase {
   _doShow(coord, instant = false) {
     if (this.surface.isConnected && !this._shown) this.surface.showPopover();
     this._shown = true;
+    this.#holdHoverClose = false;
     this._dismissNotified = false;
     this.reflectOpen(true);
     this.hideAnchorTooltip();
@@ -865,9 +889,18 @@ class AMenuElement extends HTMLElementBase {
   }
   /** Shadow-only hide. */
   _doHide() {
+    const parent = this.parentElement?.closest("a-menu");
+    if (this._shown && parent && mouseX !== null && mouseInside(this.surface.getBoundingClientRect())) {
+      for (let ancestor = parent; ancestor; ancestor = ancestor.parentElement?.closest("a-menu")) {
+        if (!ancestor.isSubmenu || !ancestor.#isHover || !ancestor._shown || ancestor.surface.matches(":hover")) continue;
+        ancestor.#holdHoverClose = true;
+        ancestor.cancelCloseTimer();
+      }
+    }
     this.#stopAnchorTracking();
     if (this.surface.isConnected && this._shown) this.surface.hidePopover();
     this._shown = false;
+    this.#holdHoverClose = false;
     this.reflectOpen(false);
     this.cancelOpenTimer();
     this.cancelCloseTimer();
@@ -1130,6 +1163,7 @@ class AMenuElement extends HTMLElementBase {
    *  (synthesizes a click → routed through onSurfaceClick). Combobox Enter (focus
    *  in the filter field) is handled here via handleComboKey / handleKeyUp. */
   handleKey(e) {
+    if (isModifiedNavigationKey(e)) return;
     const active = this.doc.activeElement;
     if (e.key === "Escape") {
       e.preventDefault();
@@ -1240,7 +1274,9 @@ class AMenuElement extends HTMLElementBase {
       let onLeave;
       if (this.#isHover) {
         onEnter = (e) => {
-          if (e.pointerType === "mouse") this.scheduleOpen();
+          if (e.pointerType !== "mouse") return;
+          this.#holdHoverClose = false;
+          this.scheduleOpen();
         };
         onLeave = (e) => {
           if (e.pointerType === "mouse") this.scheduleClose();
@@ -1279,6 +1315,7 @@ class AMenuElement extends HTMLElementBase {
         else this.requestOpen({ coord, viaKeyboard, originEvent: e });
       };
       const onKey = (e) => {
+        if (isModifiedNavigationKey(e)) return;
         if (this._shown) return;
         if (anchor.hasAttribute("disabled") || anchor.hasAttribute("loading")) return;
         const arrow = e.key === "ArrowDown" || e.key === "ArrowUp";
@@ -1317,9 +1354,12 @@ class AMenuElement extends HTMLElementBase {
   scheduleClose() {
     this.cancelOpenTimer();
     if (!this._shown) return;
+    if (this.#holdHoverClose) return;
     if (this.#hasKeyboardFocusInside) return;
-    if (openStack.some((m) => m !== this && (this.contains(m) || m.triggerAnchor != null && this.contains(m.triggerAnchor))))
+    if (openStack.some((m) => m !== this && (this.contains(m) || m.triggerAnchor != null && this.contains(m.triggerAnchor)))) {
+      this.cancelCloseTimer();
       return;
+    }
     this.cancelCloseTimer();
     this.closeTimer = setTimeout(() => {
       this.closeTimer = void 0;

package/dist/elements/a-panel.css

@@ -1 +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}}
+@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:auto}}

package/dist/elements/a-panel.js

@@ -15,7 +15,7 @@ const SHADOW_STYLE = `
     padding: 0;
     border: 0;
     box-sizing: border-box;
-    overflow: scroll;
+    overflow: auto;
     overscroll-behavior: contain;
     color: inherit;
     background: inherit;

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

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
 import "./a-radio-group.css";
 class ARadioGroupElement extends HTMLElementBase {
   static formAssociated = true;
@@ -132,7 +132,7 @@ class ARadioGroupElement extends HTMLElementBase {
     this.requestSelect(radio.value);
   };
   onKeyDown = (e) => {
-    if (this.#isDisabled) return;
+    if (this.#isDisabled || isModifiedNavigationKey(e)) return;
     const enabled = this.#radios.filter((r) => !r.hasAttribute("disabled"));
     if (enabled.length === 0) return;
     const focused = e.target?.closest(

package/dist/elements/a-slider.js

@@ -1,4 +1,4 @@
-import { finiteNumber, HTMLElementBase } from "../anta_helpers";
+import { finiteNumber, HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
 import "./a-slider.css";
 const precisionOf = (value) => {
   const exponent = value.toString().match(/(?:\.(\d+))?(?:e([+-]?\d+))?$/i);
@@ -433,7 +433,7 @@ class ASliderElement extends HTMLElementBase {
     if (this.#value !== drag.startValue) this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
   }
   #handleKeydown(event) {
-    if (event.target !== this || this.#isDisabled) return;
+    if (event.target !== this || this.#isDisabled || isModifiedNavigationKey(event)) return;
     delete this.#control.dataset.pointerFocus;
     const page = Math.max(this.#step, (this.#max - this.#min) / 10);
     let next;

package/dist/elements/a-tabs.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
 import "./a-tabs.css";
 class ATabsElement extends HTMLElementBase {
   static observedAttributes = ["state", "disabled", "orientation", "noslide"];
@@ -183,7 +183,7 @@ class ATabsElement extends HTMLElementBase {
     this.requestSelect(tab.value);
   };
   onKeyDown = (e) => {
-    if (this.#isDisabled) return;
+    if (this.#isDisabled || isModifiedNavigationKey(e)) return;
     const enabled = this.#tabs.filter((t) => !t.hasAttribute("disabled"));
     if (enabled.length === 0) return;
     const focused = e.target?.closest("a-tab");

package/dist/elements/a-title.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-title{display:block;font-family:var(--sans-serif);color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance}a-title a-icon{transform:translateY(-.05em)}a-title[level="1"]{font-size:28px;line-height:32px}a-title[level="2"]{font-size:24px;line-height:28px}a-title[level="3"]{font-size:20px;line-height:24px}a-title[level="4"]{font-size:17px;line-height:20px}a-title[level="5"]{font-size:15px;line-height:20px}a-title[level="6"]{font-size:13px;line-height:16px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--title-tone-source: currentColor;--_title-tone: light-dark(oklch(from var(--title-tone-source) .41 .15 h), oklch(from var(--title-tone-source) .75 .11 h));color:light-dark(oklch(from var(--title-tone-source) .33 .15 h),oklch(from var(--title-tone-source) .82 .1 h));@supports (color: attr(probe type(<color>),red)){--title-tone-source: attr(tone type(<color>), currentColor)}}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=secondary]{color:var(--_title-tone)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{color:color-mix(in oklch,var(--_title-tone) 80%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{color:color-mix(in oklch,var(--_title-tone) 60%,transparent)}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-title{display:block;font-family:var(--sans-serif);color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance}a-title a-icon{transform:translateY(-.05em)}a-title[truncate]{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp, 1);overflow:hidden}a-title[level="1"]{font-size:28px;line-height:32px}a-title[level="2"]{font-size:24px;line-height:28px}a-title[level="3"]{font-size:20px;line-height:24px}a-title[level="4"]{font-size:17px;line-height:20px}a-title[level="5"]{font-size:15px;line-height:20px}a-title[level="6"]{font-size:13px;line-height:16px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--title-tone-source: currentColor;--_title-tone: light-dark(oklch(from var(--title-tone-source) .41 .15 h), oklch(from var(--title-tone-source) .75 .11 h));color:light-dark(oklch(from var(--title-tone-source) .33 .15 h),oklch(from var(--title-tone-source) .82 .1 h));@supports (color: attr(probe type(<color>),red)){--title-tone-source: attr(tone type(<color>), currentColor)}}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=secondary]{color:var(--_title-tone)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{color:color-mix(in oklch,var(--_title-tone) 80%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{color:color-mix(in oklch,var(--_title-tone) 60%,transparent)}}

package/dist/elements/a-tooltip.js

@@ -272,7 +272,7 @@ class ATooltipElement extends HTMLElementBase {
   get #truncatedOnly() {
     return this.hasAttribute("truncated-only");
   }
-  /** JSX `<Text truncate>` emits an empty marked tooltip. It takes its content
+  /** JSX truncation wrappers emit an empty marked tooltip. It takes its content
    * from the anchor, while a consumer-provided sibling tooltip takes precedence
    * even when that sibling is empty. */
   get #isAutomaticTextTooltip() {

package/dist/general_types.d.ts

@@ -334,6 +334,10 @@ export interface ABoxAttributes extends BaseAttributes {
      *  typed `attr()` read it from `--box-gap` in the host's inline style
      *  instead, which is what the JSX wrapper always sets. */
     gap?: boolean | '' | number | string;
+    /** Adds matching descendant rects to each measurement snapshot. With
+     * `observe="scroll"`, use `throttle` when many descendants match: rects are
+     * read for each emitted event, and CSS state updates follow the interval. */
+    'include-rects-for'?: string;
     /** CSS padding shorthand (`padding="8px 16px"`). Without typed `attr()`
      * support, set `--box-padding` as well. The JSX wrapper supplies it. */
     padding?: boolean | '' | number | string;
@@ -348,8 +352,12 @@ export interface ABoxAttributes extends BaseAttributes {
      * attribute means `all`. Omission runs no observers unless `fade` is set;
      * a native event listener alone does not enable observation. */
     observe?: string;
-    /** Minimum interval between measurement events in milliseconds. Omit or
-     * pass `0` for frame-based reporting. Invalid or negative values use `0`. */
+    /** Keeps measurement observation active outside the viewport when `observe`
+     * or `fade` selects measurement. */
+    'observe-offscreen'?: boolean | '';
+    /** Minimum interval between measurement reads, CSS state updates, and
+     * events in milliseconds. The initial read is immediate. Omit or pass `0`
+     * for frame-based updates. Invalid or negative values use `0`. */
     throttle?: number | string;
     /** Depth of that mask, as a length value (`fade-size="2rem"`). Engines
      *  without typed `attr()` read it from `--box-fade-size` in the host's
@@ -380,6 +388,10 @@ export interface ATitleAttributes extends BaseAttributes {
      *  tone applies the matching `--text-{N}-{tone}` palette; any literal CSS color
      *  is a custom tone (hue kept, lightness/chroma pinned per priority in oklch). */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Truncate to N lines with a trailing ellipsis. The attribute value carries
+     *  the line count; set the same count on `--line-clamp` when using the styled
+     *  tag directly. */
+    truncate?: boolean | string | number;
     /** ARIA role — the JSX wrapper sets this to `'heading'`. */
     role?: string;
     /** ARIA heading level — the JSX wrapper sets this to match `level`. */
@@ -419,6 +431,11 @@ export interface ATagAttributes extends BaseAttributes {
  * use `Expander` from `@antadesign/anta`.
  */
 export interface AExpanderAttributes extends BaseAttributes {
+    /** Built-in disclosure mark. Custom visuals use `slot="indicator"`.
+     *  Defaults to `chevron`. */
+    indicator?: 'chevron' | 'triangle' | 'plus';
+    /** Logical side for the disclosure mark. Defaults to `start`. */
+    'indicator-placement'?: 'start' | 'end';
     /** Controlled open state (`'open'` / `'closed'`). Present → controlled: the
      *  attribute is the source of truth, clicks only dispatch the cancelable
      *  `statechange` event, and the consumer answers by updating it. Absent →
@@ -430,10 +447,9 @@ export interface AExpanderAttributes extends BaseAttributes {
     /** Surface emphasis. `secondary` (default) is a subtle fill; `primary`
      *  is a stronger raised fill; `tertiary` is transparent. */
     priority?: 'primary' | 'secondary' | 'tertiary';
-    /** Outdent the chevron into the left gutter so the title + body sit
-     *  flush with surrounding content (the docs-header layout). Tertiary
-     *  only — a no-op on the filled priorities, where the container edge
-     *  has to bound the chevron. Presence-based. */
+    /** Align the title and body with surrounding content on a tertiary
+     *  expander. The start indicator hangs in the gutter; an end indicator
+     *  stays inside its edge. Presence-based. */
     outdent?: boolean | '';
     /** Disables the header: not clickable or focusable, hover affordance
      *  off, text dimmed. The open state freezes as-is. Presence-based. */

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export { Panel } from './components/Panel';
 export type { PanelProps } from './components/Panel';
 export type { PanelState } from './general_types';
 export type { CaptureInputCancelReason, CaptureInputDirection, CaptureInputDirections, CaptureInputGeometry, CaptureInputModifier, CapturePan, CapturePanInertia, CapturePanInput, CapturePointerActivationReason, CapturePointerCapture, CapturePointerInput, CapturePointerStart, CapturePointerType, CaptureWheelActivation, CaptureWheelActivationReason, CaptureWheelInput, CaptureWheelSettle, SerializedMouseEvent, SerializedPointerEvent, SerializedWheelEvent, } from './capture-types';
-export type { BoxChange, BoxContext, BoxContextChange, BoxDisplay, BoxFont, BoxInset, BoxMeasurement, BoxMeasurementChange, BoxObservation, BoxMode, BoxOS, BoxBrowser, BoxPointer, } from './box-types';
+export type { BoxChange, BoxContext, BoxContextChange, BoxDisplay, BoxFont, BoxInset, BoxMeasurement, BoxMeasurementChange, BoxObservation, BoxRect, BoxMode, BoxOS, BoxBrowser, BoxPointer, } from './box-types';
 export { Title } from './components/Title';
 export type { TitleProps } from './components/Title';
 export { Tag } from './components/Tag';

package/dist/theme-antune.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:normal;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 0;font-display:swap}@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:italic;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 11;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Upright.woff2) format("woff2");font-style:normal;font-weight:400 700;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Italic.woff2) format("woff2");font-style:italic;font-weight:400 700;font-display:swap}:root,.light{--sans-serif: "TT Interphases Pro Variable", sans-serif;--monospace: "Antithesis Mono", ui-monospace, monospace;font-variation-settings:"slnt" 0}:root,.light{--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #7a737c;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 66%, transparent);--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: color-mix(in oklch, var(--text-2-success) 66%, transparent);--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 66%, transparent);--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 66%, transparent);--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 66%, transparent);--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa;--focus-ring: oklch(.55 .2 284.15)}.dark{--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #7c737c;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 62%, transparent);--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: color-mix(in oklch, var(--text-2-success) 62%, transparent);--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 62%, transparent);--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 62%, transparent);--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 62%, transparent);--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 14%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--focus-ring: #a897fc}@layer anta.theme{:is(address,cite,em,i,var,dt){font-variation-settings:"slnt" 11;font-synthesis:none}dfn{font-variation-settings:"slnt" 0}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{font-stretch:88%}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{letter-spacing:.05ch}a-tooltip{--_tooltip-letter-spacing: .02ch}a-progress-label{letter-spacing:.03em}a-menu-group-label{letter-spacing:.06em}a-input{--_input-adornment-font-stretch: 88%}a-tag{font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt";letter-spacing:.02ch}a-tag[allcaps]{font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt";letter-spacing:.08ch}a-button:not([tone]),a-button[tone=neutral],a[role=button][data-anta]:not([tone]),a[role=button][data-anta][tone=neutral],button[data-anta]:not([tone]),button[data-anta][tone=neutral],input[data-anta]:is([type=reset],[type=submit]):not([tone]),input[data-anta]:is([type=reset],[type=submit])[tone=neutral]{--button-bg-primary-rest: light-dark(#635b65, #534c57);--button-bg-primary-hover: light-dark(#534c57, #635b65);--button-bg-primary-active: light-dark(#49424c, #938d96);--button-bg-secondary-rest: light-dark(#45374c12, #e4d1ef1c);--button-bg-secondary-hover: light-dark(#44374b1a, #e4d1ef24);--button-bg-secondary-active: light-dark(#44374b26, #e4d1ef2e);--button-fg-secondary-rest: light-dark(#534c57, #c1b9c1);--button-fg-secondary-hover: light-dark(#49424c, #d4ced4);--button-fg-tertiary-rest: light-dark(#635b65, #afa9b1);--button-fg-tertiary-hover: light-dark(#534c57, #afa9b1);--button-bg-tertiary-hover: light-dark(#44374b0d, #e4d1ef14);--button-bg-tertiary-active: light-dark(#44374b1a, #e4d1ef21);--button-fg-quaternary-rest: light-dark(#635b65, #afa9b1);--button-fg-quaternary-hover: light-dark(#49424c, #cac4ca)}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: light-dark(#5f4bc3, #503cb4);--button-bg-primary-hover: light-dark(#503cb4, #5f4bc3);--button-bg-primary-active: light-dark(#483493, #7460d7);--button-bg-secondary-rest: light-dark(#7460d71a, #7460d73b);--button-bg-secondary-hover: light-dark(#7460d726, #7460d747);--button-bg-secondary-active: light-dark(#7460d733, #7460d754);--button-fg-secondary-rest: light-dark(#5f4bc3, #c5baff);--button-fg-secondary-hover: light-dark(#503cb4, #d2cbf6);--button-fg-tertiary-rest: light-dark(#5f4bc3, #ada0ee);--button-fg-tertiary-hover: light-dark(#503cb4, #bcb1f1);--button-bg-tertiary-hover: light-dark(#7460d71a, #7460d73b);--button-bg-tertiary-active: light-dark(#7460d726, #7460d747);--button-fg-quaternary-rest: light-dark(#5f4bc3, #ada0ee);--button-fg-quaternary-hover: light-dark(#483493, #c7bef4)}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: light-dark(#c9302c, #b02120);--button-bg-primary-hover: light-dark(#b02120, #c9302c);--button-bg-primary-active: light-dark(#a01c1c, #de4545);--button-bg-secondary-rest: light-dark(#de45451a, #de45453b);--button-bg-secondary-hover: light-dark(#de454526, #de454547);--button-bg-secondary-active: light-dark(#de454533, #de454554);--button-fg-secondary-rest: light-dark(#c9302c, #ffabac);--button-fg-secondary-hover: light-dark(#b02120, #f4c2c2);--button-fg-tertiary-rest: light-dark(#c9302c, #e78e90);--button-fg-tertiary-hover: light-dark(#b02120, #efa4a4);--button-bg-tertiary-hover: light-dark(#de45451a, #de45453b);--button-bg-tertiary-active: light-dark(#de454526, #de454547);--button-fg-quaternary-rest: light-dark(#c9302c, #e78e90);--button-fg-quaternary-hover: light-dark(#a01c1c, #ffabac)}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: light-dark(#1f6eb2, #1a5b93);--button-bg-primary-hover: light-dark(#1a5b93, #1f6eb2);--button-bg-primary-active: light-dark(#175082, #2686d9);--button-bg-secondary-rest: light-dark(#2686d91a, #2686d93b);--button-bg-secondary-hover: light-dark(#2686d926, #2686d947);--button-bg-secondary-active: light-dark(#2686d933, #2686d954);--button-fg-secondary-rest: light-dark(#1f6eb2, #9ed2ff);--button-fg-secondary-hover: light-dark(#1a5b93, #bad6f3);--button-fg-tertiary-rest: light-dark(#1f6eb2, #7db6e8);--button-fg-tertiary-hover: light-dark(#1a5b93, #93c5ec);--button-bg-tertiary-hover: light-dark(#2686d91a, #2686d93b);--button-bg-tertiary-active: light-dark(#2686d926, #2686d947);--button-fg-quaternary-rest: light-dark(#1f6eb2, #7db6e8);--button-fg-quaternary-hover: light-dark(#175082, #a6cdef)}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: light-dark(#2a7e43, #226737);--button-bg-primary-hover: light-dark(#226737, #2a7e43);--button-bg-primary-active: light-dark(#1f5c31, #329550);--button-bg-secondary-rest: light-dark(#3295501a, #3295503b);--button-bg-secondary-hover: light-dark(#32955026, #32955047);--button-bg-secondary-active: light-dark(#32955033, #32955054);--button-fg-secondary-rest: light-dark(#2a7e43, #8ceca9);--button-fg-secondary-hover: light-dark(#226737, #b3e5c2);--button-fg-tertiary-rest: light-dark(#2a7e43, #74cd8e);--button-fg-tertiary-hover: light-dark(#226737, #88d7a0);--button-bg-tertiary-hover: light-dark(#3295501a, #3295503b);--button-bg-tertiary-active: light-dark(#32955026, #32955047);--button-fg-quaternary-rest: light-dark(#2a7e43, #74cd8e);--button-fg-quaternary-hover: light-dark(#1f5c31, #9ddeb1)}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: light-dark(#c37416, #7f410b);--button-bg-primary-hover: light-dark(#ae6613, #995200);--button-bg-primary-active: light-dark(#995200, #ae6613);--button-bg-secondary-rest: light-dark(#c374161a, #c374163b);--button-bg-secondary-hover: light-dark(#c3741626, #c3741647);--button-bg-secondary-active: light-dark(#c3741633, #c3741654);--button-fg-secondary-rest: light-dark(#c37416, #f7c06e);--button-fg-secondary-hover: light-dark(#ae6613, #f3cc91);--button-fg-tertiary-rest: light-dark(#c37416, #e1a452);--button-fg-tertiary-hover: light-dark(#ae6613, #edb25a);--button-bg-tertiary-hover: light-dark(#c374161a, #c374163b);--button-bg-tertiary-active: light-dark(#c3741626, #c3741647);--button-fg-quaternary-rest: light-dark(#c37416, #e1a452);--button-fg-quaternary-hover: light-dark(#995200, #f0bf75)}:is(a-checkbox,input[data-anta][type=checkbox]):not([tone]){--checkbox-border-neutral: light-dark(#d4ced4, #49424c);--checkbox-border-hover: light-dark(#c1b9c1, #635b65);--checkbox-border-active: light-dark(#938d96, #776e77);--checkbox-bg-selected: light-dark(#878089, #49424c);--checkbox-bg-selected-hover: light-dark(#776e77, #534c57);--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent))}:is(a-checkbox,input[data-anta][type=checkbox])[tone=brand]{--checkbox-bg-selected: light-dark(#5f4bc3, #503cb4);--checkbox-bg-selected-hover: light-dark(#503cb4, #5f4bc3);--checkbox-bg-selected-active: light-dark(#483493, #7460d7)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=neutral]{--checkbox-bg-selected: light-dark(#878089, #49424c);--checkbox-bg-selected-hover: light-dark(#776e77, #534c57);--checkbox-bg-selected-active: #635b65}:is(a-checkbox,input[data-anta][type=checkbox])[tone=info]{--checkbox-bg-selected: light-dark(#1f6eb2, #1a5b93);--checkbox-bg-selected-hover: light-dark(#1a5b93, #1f6eb2);--checkbox-bg-selected-active: light-dark(#175082, #2686d9)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=success]{--checkbox-bg-selected: light-dark(#2a7e43, #226737);--checkbox-bg-selected-hover: light-dark(#226737, #2a7e43);--checkbox-bg-selected-active: light-dark(#1f5c31, #329550)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=warning]{--checkbox-bg-selected: light-dark(#c37416, #7f410b);--checkbox-bg-selected-hover: light-dark(#ae6613, #995200);--checkbox-bg-selected-active: light-dark(#995200, #ae6613)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=critical]{--checkbox-bg-selected: light-dark(#c9302c, #b02120);--checkbox-bg-selected-hover: light-dark(#b02120, #c9302c);--checkbox-bg-selected-active: light-dark(#a01c1c, #de4545)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=brand]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fcfcfe, #0b0916);--checkbox-border: light-dark(#bcb1f1, #483493);--checkbox-border-hover: light-dark(#9e8eeb, #5f4bc3);--checkbox-border-active: light-dark(#9081df, #7460d7)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=info]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fbfcfe, #040d18);--checkbox-border: light-dark(#93c5ec, #175082);--checkbox-border-hover: light-dark(#69ace5, #1f6eb2);--checkbox-border-active: light-dark(#56a1e1, #2686d9)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=success]:not([tone-scope=selected]){--checkbox-bg: light-dark(#f7fcf9, #041008);--checkbox-border: light-dark(#88d7a0, #1f5c31);--checkbox-border-hover: light-dark(#5bc87b, #2a7e43);--checkbox-border-active: light-dark(#44c169, #329550)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=warning]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fefbf6, #120a03);--checkbox-border: light-dark(#edb25a, #6a3b0c);--checkbox-border-hover: light-dark(#e09127, #995200);--checkbox-border-active: light-dark(#d88118, #ae6613)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=critical]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fefbfb, #190405);--checkbox-border: light-dark(#efa4a4, #a01c1c);--checkbox-border-hover: light-dark(#e87f7f, #c9302c);--checkbox-border-active: light-dark(#e56c6c, #de4545)}:is(a-radio,input[data-anta][type=radio]):not([tone]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: light-dark(#878089, #49424c);--radio-bg-selected-hover: light-dark(#776e77, #534c57);--radio-bg-selected-active: #635b65;--radio-border-neutral: light-dark(#d4ced4, #49424c);--radio-border: var(--radio-border-neutral);--radio-border-hover: light-dark(#c1b9c1, #635b65);--radio-border-active: light-dark(#9f99a1, #776e77);--radio-border-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent))}:is(a-radio,input[data-anta][type=radio])[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg-selected: light-dark(#5f4bc3, #503cb4);--radio-bg-selected-hover: light-dark(#503cb4, #5f4bc3);--radio-bg-selected-active: light-dark(#483493, #7460d7)}:is(a-radio,input[data-anta][type=radio])[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone]){--radio-bg-selected: light-dark(#878089, #49424c);--radio-bg-selected-hover: light-dark(#776e77, #534c57);--radio-bg-selected-active: #635b65}:is(a-radio,input[data-anta][type=radio])[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg-selected: light-dark(#1f6eb2, #1a5b93);--radio-bg-selected-hover: light-dark(#1a5b93, #1f6eb2);--radio-bg-selected-active: light-dark(#175082, #2686d9)}:is(a-radio,input[data-anta][type=radio])[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg-selected: light-dark(#2a7e43, #226737);--radio-bg-selected-hover: light-dark(#226737, #2a7e43);--radio-bg-selected-active: light-dark(#1f5c31, #329550)}:is(a-radio,input[data-anta][type=radio])[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg-selected: light-dark(#c37416, #7f410b);--radio-bg-selected-hover: light-dark(#ae6613, #995200);--radio-bg-selected-active: light-dark(#995200, #ae6613)}:is(a-radio,input[data-anta][type=radio])[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg-selected: light-dark(#c9302c, #b02120);--radio-bg-selected-hover: light-dark(#b02120, #c9302c);--radio-bg-selected-active: light-dark(#a01c1c, #de4545)}:is(a-radio,input[data-anta][type=radio])[tone=brand]:not([tone-scope=selected]),a-radio-group[tone=brand]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=brand][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fcfcfe, #0b0916);--radio-border: light-dark(#bcb1f1, #483493);--radio-border-hover: light-dark(#9e8eeb, #5f4bc3);--radio-border-active: light-dark(#9081df, #7460d7)}:is(a-radio,input[data-anta][type=radio])[tone=info]:not([tone-scope=selected]),a-radio-group[tone=info]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=info][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fbfcfe, #040d18);--radio-border: light-dark(#93c5ec, #175082);--radio-border-hover: light-dark(#69ace5, #1f6eb2);--radio-border-active: light-dark(#56a1e1, #2686d9)}:is(a-radio,input[data-anta][type=radio])[tone=success]:not([tone-scope=selected]),a-radio-group[tone=success]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=success][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#f7fcf9, #041008);--radio-border: light-dark(#88d7a0, #1f5c31);--radio-border-hover: light-dark(#5bc87b, #2a7e43);--radio-border-active: light-dark(#44c169, #329550)}:is(a-radio,input[data-anta][type=radio])[tone=warning]:not([tone-scope=selected]),a-radio-group[tone=warning]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=warning][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fefbf6, #120a03);--radio-border: light-dark(#edb25a, #6a3b0c);--radio-border-hover: light-dark(#e09127, #995200);--radio-border-active: light-dark(#d88118, #ae6613)}:is(a-radio,input[data-anta][type=radio])[tone=critical]:not([tone-scope=selected]),a-radio-group[tone=critical]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=critical][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fefbfb, #190405);--radio-border: light-dark(#efa4a4, #a01c1c);--radio-border-hover: light-dark(#e87f7f, #c9302c);--radio-border-active: light-dark(#e56c6c, #de4545)}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) 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-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])):not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]))[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-border-base: color-mix(in oklch, var(--radio-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-tag:not([tone]),a-tag[tone=neutral]{--tag-tint: light-dark(#44374b, #e4d1ef);--tag-bg-solid: light-dark(#776e77, #635b65);--tag-edge: var(--tag-tint);--tag-bg: light-dark(color-mix(in oklch, var(--tag-tint) 7%, transparent), color-mix(in oklch, var(--tag-tint) 12%, transparent));--tag-border: color-mix(in oklch, var(--tag-tint) 15%, transparent)}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: light-dark(#7460d7, #5f4bc3);--tag-edge: var(--text-2-brand)}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: light-dark(#2686d9, #1f6eb2);--tag-edge: var(--text-2-info)}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: light-dark(#329550, #2a7e43);--tag-edge: var(--text-2-success)}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: light-dark(#ae6613, #995200);--tag-edge: var(--text-2-warning)}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: light-dark(#de4545, #c9302c);--tag-edge: var(--text-2-critical)}a-tag:not([tone])[priority=tertiary],a-tag[tone=neutral][priority=tertiary]{--tag-border: color-mix(in oklch, var(--tag-edge) 25%, transparent)}a-tabs{--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .06), color-mix(in oklch, #e4d1ef 7%, transparent) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .03), color-mix(in oklch, #e4d1ef 8%, transparent) )}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: light-dark(var(--border-2), #49424c);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: light-dark(#fefbfb, #1f0506);--input-border: light-dark(#de4545, #c9302c);--input-hint: light-dark(#c9302c, #e25858)}a-input[status=warning]{--input-bg: light-dark(#fefbf6, #120a03);--input-border: light-dark(#ae6613, #995200);--input-hint: light-dark(#995200, #c37416)}a-input[status=success]{--input-bg: light-dark(#f7fcf9, #041008);--input-border: light-dark(#329550, var(--border-1-success));--input-hint: light-dark(#2a7e43, #3aab5c)}a-input[status=info]{--input-bg: light-dark(#fbfcfe, #040d18);--input-border: light-dark(#2686d9, #1f6eb2);--input-hint: light-dark(#175082, #3e93dd)}a-input[status=brand]{--input-bg: light-dark(#fcfcfe, #0b0916);--input-border: light-dark(#7460d7, #5f4bc3);--input-hint: light-dark(#5f4bc3, #8270db)}a-input:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: light-dark(var(--border-2), #49424c);--input-time-border-hover: light-dark(var(--border-1), #635b65);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: light-dark(#fefbfb, #1f0506);--input-time-border: light-dark(#de4545, #c9302c);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#c9302c, #e25858)}a-input-time[status=warning]{--input-time-bg: light-dark(#fefbf6, #120a03);--input-time-border: light-dark(#ae6613, #995200);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#995200, #c37416)}a-input-time[status=success]{--input-time-bg: light-dark(#f7fcf9, #041008);--input-time-border: light-dark(#329550, var(--border-1-success));--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#2a7e43, #3aab5c)}a-input-time[status=info]{--input-time-bg: light-dark(#fbfcfe, #040d18);--input-time-border: light-dark(#2686d9, #1f6eb2);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#175082, #3e93dd)}a-input-time[status=brand]{--input-time-bg: light-dark(#fcfcfe, #0b0916);--input-time-border: light-dark(#7460d7, #5f4bc3);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#5f4bc3, #8270db)}a-input-time:disabled{--input-time-bg: light-dark(#44374b12, #e4d1ef0d);--input-time-border: light-dark(#44374b26, #e4d1ef1f);--input-time-border-hover: var(--input-time-border);--input-time-hint: var(--text-5)}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:normal;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 0;font-display:swap}@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:italic;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 11;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Upright.woff2) format("woff2");font-style:normal;font-weight:400 700;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Italic.woff2) format("woff2");font-style:italic;font-weight:400 700;font-display:swap}:root,.light{--sans-serif: "TT Interphases Pro Variable", sans-serif;--monospace: "Antithesis Mono", ui-monospace, monospace;font-variation-settings:"slnt" 0}:root,.light{--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #7a737c;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 66%, transparent);--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: color-mix(in oklch, var(--text-2-success) 66%, transparent);--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 66%, transparent);--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 66%, transparent);--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 66%, transparent);--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa;--focus-ring: oklch(.55 .2 284.15)}.dark{--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #7c737c;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 62%, transparent);--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: color-mix(in oklch, var(--text-2-success) 62%, transparent);--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 62%, transparent);--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 62%, transparent);--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 62%, transparent);--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 14%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--focus-ring: #a897fc}@layer anta.theme{:is(address,cite,em,i,var,dt){font-variation-settings:"slnt" 11;font-synthesis:none}dfn{font-variation-settings:"slnt" 0}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{font-stretch:88%}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{letter-spacing:.05ch}a-tooltip{--_tooltip-letter-spacing: .02ch}a-progress-label{letter-spacing:.03em}a-menu-group-label{letter-spacing:.06em}a-input{--_input-adornment-font-stretch: 88%}a-tag{font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt";letter-spacing:.02ch}a-tag[allcaps]{font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt";letter-spacing:.08ch}a-button:not([tone]),a-button[tone=neutral],a[role=button][data-anta]:not([tone]),a[role=button][data-anta][tone=neutral],button[data-anta]:not([tone]),button[data-anta][tone=neutral],input[data-anta]:is([type=reset],[type=submit]):not([tone]),input[data-anta]:is([type=reset],[type=submit])[tone=neutral]{--button-bg-primary-rest: light-dark(#635b65, #534c57);--button-bg-primary-hover: light-dark(#534c57, #635b65);--button-bg-primary-active: light-dark(#49424c, #938d96);--button-bg-secondary-rest: light-dark(#45374c12, #e4d1ef1c);--button-bg-secondary-hover: light-dark(#44374b1a, #e4d1ef24);--button-bg-secondary-active: light-dark(#44374b26, #e4d1ef2e);--button-fg-secondary-rest: light-dark(#534c57, #c1b9c1);--button-fg-secondary-hover: light-dark(#49424c, #d4ced4);--button-fg-tertiary-rest: light-dark(#635b65, #afa9b1);--button-fg-tertiary-hover: light-dark(#534c57, #afa9b1);--button-bg-tertiary-hover: light-dark(#44374b0d, #e4d1ef14);--button-bg-tertiary-active: light-dark(#44374b1a, #e4d1ef21);--button-fg-quaternary-rest: light-dark(#635b65, #afa9b1);--button-fg-quaternary-hover: light-dark(#49424c, #cac4ca)}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: light-dark(#5f4bc3, #503cb4);--button-bg-primary-hover: light-dark(#503cb4, #5f4bc3);--button-bg-primary-active: light-dark(#483493, #7460d7);--button-bg-secondary-rest: light-dark(#7460d71a, #7460d73b);--button-bg-secondary-hover: light-dark(#7460d726, #7460d747);--button-bg-secondary-active: light-dark(#7460d733, #7460d754);--button-fg-secondary-rest: light-dark(#5f4bc3, #c5baff);--button-fg-secondary-hover: light-dark(#503cb4, #d2cbf6);--button-fg-tertiary-rest: light-dark(#5f4bc3, #ada0ee);--button-fg-tertiary-hover: light-dark(#503cb4, #bcb1f1);--button-bg-tertiary-hover: light-dark(#7460d71a, #7460d73b);--button-bg-tertiary-active: light-dark(#7460d726, #7460d747);--button-fg-quaternary-rest: light-dark(#5f4bc3, #ada0ee);--button-fg-quaternary-hover: light-dark(#483493, #c7bef4)}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: light-dark(#c9302c, #b02120);--button-bg-primary-hover: light-dark(#b02120, #c9302c);--button-bg-primary-active: light-dark(#a01c1c, #de4545);--button-bg-secondary-rest: light-dark(#de45451a, #de45453b);--button-bg-secondary-hover: light-dark(#de454526, #de454547);--button-bg-secondary-active: light-dark(#de454533, #de454554);--button-fg-secondary-rest: light-dark(#c9302c, #ffabac);--button-fg-secondary-hover: light-dark(#b02120, #f4c2c2);--button-fg-tertiary-rest: light-dark(#c9302c, #e78e90);--button-fg-tertiary-hover: light-dark(#b02120, #efa4a4);--button-bg-tertiary-hover: light-dark(#de45451a, #de45453b);--button-bg-tertiary-active: light-dark(#de454526, #de454547);--button-fg-quaternary-rest: light-dark(#c9302c, #e78e90);--button-fg-quaternary-hover: light-dark(#a01c1c, #ffabac)}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: light-dark(#1f6eb2, #1a5b93);--button-bg-primary-hover: light-dark(#1a5b93, #1f6eb2);--button-bg-primary-active: light-dark(#175082, #2686d9);--button-bg-secondary-rest: light-dark(#2686d91a, #2686d93b);--button-bg-secondary-hover: light-dark(#2686d926, #2686d947);--button-bg-secondary-active: light-dark(#2686d933, #2686d954);--button-fg-secondary-rest: light-dark(#1f6eb2, #9ed2ff);--button-fg-secondary-hover: light-dark(#1a5b93, #bad6f3);--button-fg-tertiary-rest: light-dark(#1f6eb2, #7db6e8);--button-fg-tertiary-hover: light-dark(#1a5b93, #93c5ec);--button-bg-tertiary-hover: light-dark(#2686d91a, #2686d93b);--button-bg-tertiary-active: light-dark(#2686d926, #2686d947);--button-fg-quaternary-rest: light-dark(#1f6eb2, #7db6e8);--button-fg-quaternary-hover: light-dark(#175082, #a6cdef)}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: light-dark(#2a7e43, #226737);--button-bg-primary-hover: light-dark(#226737, #2a7e43);--button-bg-primary-active: light-dark(#1f5c31, #329550);--button-bg-secondary-rest: light-dark(#3295501a, #3295503b);--button-bg-secondary-hover: light-dark(#32955026, #32955047);--button-bg-secondary-active: light-dark(#32955033, #32955054);--button-fg-secondary-rest: light-dark(#2a7e43, #8ceca9);--button-fg-secondary-hover: light-dark(#226737, #b3e5c2);--button-fg-tertiary-rest: light-dark(#2a7e43, #74cd8e);--button-fg-tertiary-hover: light-dark(#226737, #88d7a0);--button-bg-tertiary-hover: light-dark(#3295501a, #3295503b);--button-bg-tertiary-active: light-dark(#32955026, #32955047);--button-fg-quaternary-rest: light-dark(#2a7e43, #74cd8e);--button-fg-quaternary-hover: light-dark(#1f5c31, #9ddeb1)}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: light-dark(#c37416, #7f410b);--button-bg-primary-hover: light-dark(#ae6613, #995200);--button-bg-primary-active: light-dark(#995200, #ae6613);--button-bg-secondary-rest: light-dark(#c374161a, #c374163b);--button-bg-secondary-hover: light-dark(#c3741626, #c3741647);--button-bg-secondary-active: light-dark(#c3741633, #c3741654);--button-fg-secondary-rest: light-dark(#c37416, #f7c06e);--button-fg-secondary-hover: light-dark(#ae6613, #f3cc91);--button-fg-tertiary-rest: light-dark(#c37416, #e1a452);--button-fg-tertiary-hover: light-dark(#ae6613, #edb25a);--button-bg-tertiary-hover: light-dark(#c374161a, #c374163b);--button-bg-tertiary-active: light-dark(#c3741626, #c3741647);--button-fg-quaternary-rest: light-dark(#c37416, #e1a452);--button-fg-quaternary-hover: light-dark(#995200, #f0bf75)}:is(a-checkbox,input[data-anta][type=checkbox]):not([tone]){--checkbox-border-neutral: light-dark(#d4ced4, #49424c);--checkbox-border-hover: light-dark(#c1b9c1, #635b65);--checkbox-border-active: light-dark(#938d96, #776e77);--checkbox-bg-selected: light-dark(#878089, #49424c);--checkbox-bg-selected-hover: light-dark(#776e77, #534c57);--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent))}:is(a-checkbox,input[data-anta][type=checkbox])[tone=brand]{--checkbox-bg-selected: light-dark(#5f4bc3, #503cb4);--checkbox-bg-selected-hover: light-dark(#503cb4, #5f4bc3);--checkbox-bg-selected-active: light-dark(#483493, #7460d7)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=neutral]{--checkbox-bg-selected: light-dark(#878089, #49424c);--checkbox-bg-selected-hover: light-dark(#776e77, #534c57);--checkbox-bg-selected-active: #635b65}:is(a-checkbox,input[data-anta][type=checkbox])[tone=info]{--checkbox-bg-selected: light-dark(#1f6eb2, #1a5b93);--checkbox-bg-selected-hover: light-dark(#1a5b93, #1f6eb2);--checkbox-bg-selected-active: light-dark(#175082, #2686d9)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=success]{--checkbox-bg-selected: light-dark(#2a7e43, #226737);--checkbox-bg-selected-hover: light-dark(#226737, #2a7e43);--checkbox-bg-selected-active: light-dark(#1f5c31, #329550)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=warning]{--checkbox-bg-selected: light-dark(#c37416, #7f410b);--checkbox-bg-selected-hover: light-dark(#ae6613, #995200);--checkbox-bg-selected-active: light-dark(#995200, #ae6613)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=critical]{--checkbox-bg-selected: light-dark(#c9302c, #b02120);--checkbox-bg-selected-hover: light-dark(#b02120, #c9302c);--checkbox-bg-selected-active: light-dark(#a01c1c, #de4545)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=brand]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fcfcfe, #0b0916);--checkbox-border: light-dark(#bcb1f1, #483493);--checkbox-border-hover: light-dark(#9e8eeb, #5f4bc3);--checkbox-border-active: light-dark(#9081df, #7460d7)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=info]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fbfcfe, #040d18);--checkbox-border: light-dark(#93c5ec, #175082);--checkbox-border-hover: light-dark(#69ace5, #1f6eb2);--checkbox-border-active: light-dark(#56a1e1, #2686d9)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=success]:not([tone-scope=selected]){--checkbox-bg: light-dark(#f7fcf9, #041008);--checkbox-border: light-dark(#88d7a0, #1f5c31);--checkbox-border-hover: light-dark(#5bc87b, #2a7e43);--checkbox-border-active: light-dark(#44c169, #329550)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=warning]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fefbf6, #120a03);--checkbox-border: light-dark(#edb25a, #6a3b0c);--checkbox-border-hover: light-dark(#e09127, #995200);--checkbox-border-active: light-dark(#d88118, #ae6613)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=critical]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fefbfb, #190405);--checkbox-border: light-dark(#efa4a4, #a01c1c);--checkbox-border-hover: light-dark(#e87f7f, #c9302c);--checkbox-border-active: light-dark(#e56c6c, #de4545)}:is(a-radio,input[data-anta][type=radio]):not([tone]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: light-dark(#878089, #49424c);--radio-bg-selected-hover: light-dark(#776e77, #534c57);--radio-bg-selected-active: #635b65;--radio-border-neutral: light-dark(#d4ced4, #49424c);--radio-border: var(--radio-border-neutral);--radio-border-hover: light-dark(#c1b9c1, #635b65);--radio-border-active: light-dark(#9f99a1, #776e77);--radio-border-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent))}:is(a-radio,input[data-anta][type=radio])[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg-selected: light-dark(#5f4bc3, #503cb4);--radio-bg-selected-hover: light-dark(#503cb4, #5f4bc3);--radio-bg-selected-active: light-dark(#483493, #7460d7)}:is(a-radio,input[data-anta][type=radio])[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone]){--radio-bg-selected: light-dark(#878089, #49424c);--radio-bg-selected-hover: light-dark(#776e77, #534c57);--radio-bg-selected-active: #635b65}:is(a-radio,input[data-anta][type=radio])[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg-selected: light-dark(#1f6eb2, #1a5b93);--radio-bg-selected-hover: light-dark(#1a5b93, #1f6eb2);--radio-bg-selected-active: light-dark(#175082, #2686d9)}:is(a-radio,input[data-anta][type=radio])[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg-selected: light-dark(#2a7e43, #226737);--radio-bg-selected-hover: light-dark(#226737, #2a7e43);--radio-bg-selected-active: light-dark(#1f5c31, #329550)}:is(a-radio,input[data-anta][type=radio])[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg-selected: light-dark(#c37416, #7f410b);--radio-bg-selected-hover: light-dark(#ae6613, #995200);--radio-bg-selected-active: light-dark(#995200, #ae6613)}:is(a-radio,input[data-anta][type=radio])[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg-selected: light-dark(#c9302c, #b02120);--radio-bg-selected-hover: light-dark(#b02120, #c9302c);--radio-bg-selected-active: light-dark(#a01c1c, #de4545)}:is(a-radio,input[data-anta][type=radio])[tone=brand]:not([tone-scope=selected]),a-radio-group[tone=brand]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=brand][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fcfcfe, #0b0916);--radio-border: light-dark(#bcb1f1, #483493);--radio-border-hover: light-dark(#9e8eeb, #5f4bc3);--radio-border-active: light-dark(#9081df, #7460d7)}:is(a-radio,input[data-anta][type=radio])[tone=info]:not([tone-scope=selected]),a-radio-group[tone=info]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=info][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fbfcfe, #040d18);--radio-border: light-dark(#93c5ec, #175082);--radio-border-hover: light-dark(#69ace5, #1f6eb2);--radio-border-active: light-dark(#56a1e1, #2686d9)}:is(a-radio,input[data-anta][type=radio])[tone=success]:not([tone-scope=selected]),a-radio-group[tone=success]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=success][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#f7fcf9, #041008);--radio-border: light-dark(#88d7a0, #1f5c31);--radio-border-hover: light-dark(#5bc87b, #2a7e43);--radio-border-active: light-dark(#44c169, #329550)}:is(a-radio,input[data-anta][type=radio])[tone=warning]:not([tone-scope=selected]),a-radio-group[tone=warning]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=warning][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fefbf6, #120a03);--radio-border: light-dark(#edb25a, #6a3b0c);--radio-border-hover: light-dark(#e09127, #995200);--radio-border-active: light-dark(#d88118, #ae6613)}:is(a-radio,input[data-anta][type=radio])[tone=critical]:not([tone-scope=selected]),a-radio-group[tone=critical]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=critical][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fefbfb, #190405);--radio-border: light-dark(#efa4a4, #a01c1c);--radio-border-hover: light-dark(#e87f7f, #c9302c);--radio-border-active: light-dark(#e56c6c, #de4545)}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) 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-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])):not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]))[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-border-base: color-mix(in oklch, var(--radio-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-tag:not([tone]),a-tag[tone=neutral]{--tag-tint: light-dark(#44374b, #e4d1ef);--tag-bg-solid: light-dark(#776e77, #635b65);--tag-edge: var(--tag-tint);--tag-bg: light-dark(color-mix(in oklch, var(--tag-tint) 7%, transparent), color-mix(in oklch, var(--tag-tint) 12%, transparent));--tag-border: color-mix(in oklch, var(--tag-tint) 15%, transparent)}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: light-dark(#7460d7, #5f4bc3);--tag-edge: var(--text-2-brand)}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: light-dark(#2686d9, #1f6eb2);--tag-edge: var(--text-2-info)}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: light-dark(#329550, #2a7e43);--tag-edge: var(--text-2-success)}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: light-dark(#ae6613, #995200);--tag-edge: var(--text-2-warning)}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: light-dark(#de4545, #c9302c);--tag-edge: var(--text-2-critical)}a-tag:not([tone])[priority=tertiary],a-tag[tone=neutral][priority=tertiary]{--tag-border: color-mix(in oklch, var(--tag-edge) 25%, transparent)}a-tabs:is(:not([tone]),[tone=""],[tone=neutral]):not(:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral]))){--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .06), color-mix(in oklch, #e4d1ef 7%, transparent) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .03), color-mix(in oklch, #e4d1ef 8%, transparent) )}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: light-dark(var(--border-2), #49424c);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: light-dark(#fefbfb, #1f0506);--input-border: light-dark(#de4545, #c9302c);--input-hint: light-dark(#c9302c, #e25858)}a-input[status=warning]{--input-bg: light-dark(#fefbf6, #120a03);--input-border: light-dark(#ae6613, #995200);--input-hint: light-dark(#995200, #c37416)}a-input[status=success]{--input-bg: light-dark(#f7fcf9, #041008);--input-border: light-dark(#329550, var(--border-1-success));--input-hint: light-dark(#2a7e43, #3aab5c)}a-input[status=info]{--input-bg: light-dark(#fbfcfe, #040d18);--input-border: light-dark(#2686d9, #1f6eb2);--input-hint: light-dark(#175082, #3e93dd)}a-input[status=brand]{--input-bg: light-dark(#fcfcfe, #0b0916);--input-border: light-dark(#7460d7, #5f4bc3);--input-hint: light-dark(#5f4bc3, #8270db)}a-input:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: light-dark(var(--border-2), #49424c);--input-time-border-hover: light-dark(var(--border-1), #635b65);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: light-dark(#fefbfb, #1f0506);--input-time-border: light-dark(#de4545, #c9302c);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#c9302c, #e25858)}a-input-time[status=warning]{--input-time-bg: light-dark(#fefbf6, #120a03);--input-time-border: light-dark(#ae6613, #995200);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#995200, #c37416)}a-input-time[status=success]{--input-time-bg: light-dark(#f7fcf9, #041008);--input-time-border: light-dark(#329550, var(--border-1-success));--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#2a7e43, #3aab5c)}a-input-time[status=info]{--input-time-bg: light-dark(#fbfcfe, #040d18);--input-time-border: light-dark(#2686d9, #1f6eb2);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#175082, #3e93dd)}a-input-time[status=brand]{--input-time-bg: light-dark(#fcfcfe, #0b0916);--input-time-border: light-dark(#7460d7, #5f4bc3);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#5f4bc3, #8270db)}a-input-time:disabled{--input-time-bg: light-dark(#44374b12, #e4d1ef0d);--input-time-border: light-dark(#44374b26, #e4d1ef1f);--input-time-border-hover: var(--input-time-border);--input-time-hint: var(--text-5)}}

package/docs/changelog.md

@@ -3,13 +3,77 @@
 This page tracks changes that ship in `@antadesign/anta`. Documentation-only
 changes are not listed.
 
+## 0.3.32 — September 25, 2026
+
+### Added
+
+- [Expander indicators](/expander/#indicator) can sit after header actions and
+  use built-in chevron, triangle, or plus visuals. Custom indicators can rotate
+  as one node or switch between closed and open nodes.
+- [Box measurements](/box/#measurements) can include
+  descendant rects with `includeRectsFor`, including positions relative to the
+  Box, width, and height. Changed rects appear in `detail.changed.rects` when
+  another observed field triggers a report.
+- [Box measurements](/box/#measurements) can stay active outside the viewport
+  with `observeOffscreen` when a virtualized layout needs updates there.
+
+### Changed
+
+- [Box layout](/box/#display) now uses `position: relative` by default, so
+  absolutely positioned descendants use the Box as their containing block. Set
+  `position: static` on the Box if they should use another positioned ancestor.
+- [Box measurements](/box/#measurements) now apply `throttle` to measurement
+  reads and CSS states as well as events. The edge mask eases between states;
+  larger intervals delay the fade response during scrolling.
+
+### Fixed
+
+- [Expander indicators](/expander/#indicator) leave the mark empty for
+  unrecognized strings and numbers instead of displaying them as text.
+- [Menu submenus](/menu/#submenus) stay open when a nested
+  date picker closes under the pointer outside the submenu. Hover dismissal
+  resumes after the pointer returns. Closing a nested popup away from the
+  pointer leaves hover dismissal available.
+- [Dialog headers](/dialog/#zones) wrap long unbroken text
+  and clip content that still overflows their bounds.
+
+## 0.3.31 — September 18, 2026
+
+### Added
+
+- MenuItem supports a trailing switch selection indicator for immediate
+  settings. Switch rows keep their menu open when selected.
+- Title supports single-line and multi-line truncation with an automatic
+  full-text tooltip when the heading is clipped.
+
+### Fixed
+
+- Button loading stripes loop seamlessly while their rounded clipping stays
+  local to the animated overlay.
+- Copy confirmation labels stay visible when a control is near the top edge of
+  the viewport.
+- Keyboard navigation leaves modified arrows, Home/End, and PageUp/PageDown
+  available to browser, system, and text-editing shortcuts. Menus also preserve
+  modified Tab shortcuts. Shift+Tab traversal and Calendar's Shift+PageUp/PageDown
+  year navigation remain available.
+- Antune preserves Tabs tone colors in the primary track and secondary selected
+  fill, including selected per-tab tones.
+- Panel uses `overflow: auto` in normal and maximized states, so scrollbars
+  appear only when content overflows.
+
 ## 0.3.30 — September 17, 2026
 
 ### Added
 
+- Added Plot as the separate `@antadesign/plot` package for interactive canvas
+  charts in React, Preact, and plain JavaScript.
 - Export `useRef` and `useLayoutEffect` from the JSX runtime, with React defaults
   and overrides through `configure()` for other renderers.
 
+### Changed
+
+- Updated and pinned runtime dependencies to exact versions.
+
 ## 0.3.29 — September 15, 2026
 
 ### Added

package/docs/comparison.md

@@ -463,6 +463,6 @@ download costs.
 | Breadcrumbs: Breadcrumb navigation | [Included](./components/breadcrumbs.md) | [Included](https://mui.com/material-ui/react-breadcrumbs/) | [Included](https://mantine.dev/core/breadcrumbs/) | [Included](https://astryx.atmeta.com/components/Breadcrumbs) | [Included](https://ant.design/components/breadcrumb) | [Included](https://gravity-ui.com/components/uikit/breadcrumbs) | [Included](https://ui.shadcn.com/docs/components/breadcrumb) | [Paid tier](https://www.untitledui.com/react/components/breadcrumbs) | [Included](https://blueprintjs.com/docs/#core/components/breadcrumbs) | [Included](https://carbondesignsystem.com/components/breadcrumb/usage/) | [Included](https://atlassian.design/components/breadcrumbs/examples) | [Included](https://webawesome.com/docs/components/breadcrumb/) | Not shipped |
 | Icons: Bundled icon set | [Included](./components/icon.md) | [Included](https://mui.com/material-ui/material-icons/) | [Basic or community-only](https://mantine.dev/guides/icons/) | [Included](https://astryx.atmeta.com/components/Icon) | [Included](https://ant.design/components/icon) | [Included](https://gravity-ui.com/components/uikit/icon) | Basic or community-only | [Included](https://www.untitledui.com/react/docs/icons) | [Included](https://blueprintjs.com/docs/#core/components/icon) | [Included](https://carbondesignsystem.com/elements/icons/usage/) | [Included](https://atlassian.design/components/icon/examples) | [Included](https://webawesome.com/docs/components/icon/) | [Included](https://shopify.dev/docs/api/app-home/web-components/media-and-visuals/icon) |
 | Typography: Text / title components | [Included](./components/text.md) | [Included](https://mui.com/material-ui/react-typography/) | [Included](https://mantine.dev/core/typography/) | [Included](https://astryx.atmeta.com/components/Text) | [Included](https://ant.design/components/typography) | [Included](https://gravity-ui.com/components/uikit/text) | Not shipped | [Included](https://www.untitledui.com/react/docs/typography) | [Basic or community-only](https://blueprintjs.com/docs/#core/typography) | [Basic or community-only](https://carbondesignsystem.com/elements/typography/overview/) | [Basic or community-only](https://atlassian.design/components/heading/examples) | [Basic or community-only](https://webawesome.com/docs/tokens/typography/) | [Included](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/text) |
-| Charts: First-party data viz | Not shipped | [Included](https://mui.com/x/react-charts/) | [Included](https://mantine.dev/charts/getting-started/) | Basic or community-only | [Included](https://charts.ant.design/en) | Basic or community-only | [Included](https://ui.shadcn.com/charts) | [Included](https://www.untitledui.com/react/components/line-bar-charts) | Not shipped | [Included](https://charts.carbondesignsystem.com/) | Not shipped | [Paid tier](https://webawesome.com/docs/components/chart/) | Not shipped |
+| Charts: First-party data viz | [Included (Plot (@antadesign/plot))](./packages/plot.md) | [Included](https://mui.com/x/react-charts/) | [Included](https://mantine.dev/charts/getting-started/) | Basic or community-only | [Included](https://charts.ant.design/en) | Basic or community-only | [Included](https://ui.shadcn.com/charts) | [Included](https://www.untitledui.com/react/components/line-bar-charts) | Not shipped | [Included](https://charts.carbondesignsystem.com/) | Not shipped | [Paid tier](https://webawesome.com/docs/components/chart/) | Not shipped |
 | Utility containers: Boxes with observers | [Included (Box, Capture)](./components/box.md) | [Included (ClickAwayListener)](https://mui.com/material-ui/react-click-away-listener/) | [Included (useResizeObserver)](https://mantine.dev/hooks/use-resize-observer/) | [Included (useScrollOverflow)](https://astryx.atmeta.com/components/useScrollOverflow) | Not shipped | [Included (useResizeObserver)](https://github.com/gravity-ui/uikit/tree/main/src/hooks/useResizeObserver) | [Included (Scroll Area)](https://ui.shadcn.com/docs/components/scroll-area) | [Included (React Aria useMove)](https://react-aria.adobe.com/useMove) | [Included (ResizeSensor)](https://blueprintjs.com/docs/#core/components/resize-sensor) | Not shipped | [Included (Pragmatic drag and drop)](https://atlassian.design/components/pragmatic-drag-and-drop/core-package/) | [Included (Resize Observer)](https://webawesome.com/docs/components/resize-observer/) | [Included (Box (responsive styling and accessibility))](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/box) |
 | Focus utility: Focus detection and traps | Basic or community-only (Tabs, RadioGroup, Menu, and Calendar manage keyboard focus; Dialog traps and restores focus; Box detects focus within) | [Included (Unstable_TrapFocus (experimental))](https://github.com/mui/material-ui/tree/master/packages/mui-material/src/Unstable_TrapFocus) | [Included (FocusTrap, useFocusTrap)](https://mantine.dev/core/focus-trap/) | [Included (useFocusTrap, useListFocus)](https://astryx.atmeta.com/components/useFocusTrap) | Not shipped | Not shipped | Not shipped | [Included (React Aria FocusScope, useFocusManager)](https://react-aria.adobe.com/FocusScope) | [Included (FocusStyleManager (focus indicators))](https://github.com/palantir/blueprint/blob/develop/packages/core/src/accessibility/focusStyleManager.ts) | Not shipped | Not shipped | Not shipped | Not shipped |