@antadesign/anta 0.3.20 → 0.3.21

package/dist/anta_helpers.d.ts

@@ -1,5 +1,14 @@
 import type { IconShape } from "./elements/a-icon.shapes";
+import type { OptionPresentationProps } from "./general_types";
 export declare function hasChildren(children: React.ReactNode): boolean;
+/**
+ * Select the safe presentation attributes from a data-rendered option. Option
+ * objects often carry application data, so wrappers must never spread them onto
+ * their rendered element. Menu rows also own `data-menu-*`: those attributes
+ * control closing and combobox navigation, and letting an option replace them
+ * would desynchronize its selection behavior.
+ */
+export declare function optionPresentationAttrs(option: OptionPresentationProps, menu?: boolean): OptionPresentationProps;
 /**
  * Normalize a wrapper's label content the way `Button` / `Tabs` do: a bare string
  * or number becomes a `<tag>` — the ellipsis-capable label part (`a-button-label`,

package/dist/anta_helpers.js

@@ -2,6 +2,14 @@ import { jsx, useState, useMemo } from "./jsx-runtime";
 function hasChildren(children) {
   return Array.isArray(children) ? children.length > 0 : children != null;
 }
+function optionPresentationAttrs(option, menu = false) {
+  const attrs = {};
+  for (const [name, value] of Object.entries(option)) {
+    if (name === "className" || name === "style" || name.startsWith("data-") && (!menu || !name.startsWith("data-menu-") && name !== "data-anta-menu-item"))
+      attrs[name] = value;
+  }
+  return attrs;
+}
 function wrapLabel(kids, tag) {
   if (kids == null) return kids;
   const arr = Array.isArray(kids) ? kids : [kids];
@@ -158,6 +166,7 @@ export {
   isMenuOpen,
   lengthStyle,
   nativeStateChange,
+  optionPresentationAttrs,
   parseOpenState,
   roundAttr,
   roundStyle,

package/dist/components/InputAutocomplete.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useMemo, useId } from "../jsx-runtime";
-import { nativeStateChange } from "../anta_helpers";
+import { nativeStateChange, optionPresentationAttrs } from "../anta_helpers";
 import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
 import { Input } from "./Input";
 import { Menu } from "./Menu";
@@ -69,23 +69,29 @@ const InputAutocomplete = (props) => {
           if (!next) setActiveId(null);
         },
         onactivedescendant: (e) => setActiveId(nativeStateChange(e).detail?.id ?? null),
-        children: visible.map((opt, i) => /* @__PURE__ */ jsx(
-          MenuItem,
-          {
-            id: `${rid}-o${i}`,
-            role: "option",
-            "aria-selected": activeId === `${rid}-o${i}` ? "true" : "false",
-            icon: opt.icon,
-            label: highlight(opt.label ?? opt.value, queryRe),
-            hint: opt.hint ? highlight(opt.hint, queryRe) : opt.hint,
-            tone: opt.tone,
-            disabled: opt.disabled,
-            value: opt.value,
-            onMouseDown: (e) => e.preventDefault(),
-            onSelect: () => pick(opt)
-          },
-          `${rid}-${opt.value}-${i}`
-        ))
+        children: visible.map((opt, i) => {
+          const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(opt, true);
+          return /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              ...optionAttrs,
+              id: `${rid}-o${i}`,
+              role: "option",
+              "aria-selected": activeId === `${rid}-o${i}` ? "true" : "false",
+              icon: opt.icon,
+              label: highlight(opt.label ?? opt.value, queryRe),
+              hint: opt.hint ? highlight(opt.hint, queryRe) : opt.hint,
+              tone: opt.tone,
+              disabled: opt.disabled,
+              value: opt.value,
+              onMouseDown: (e) => e.preventDefault(),
+              onSelect: () => pick(opt),
+              className: optionClassName,
+              style: optionStyle
+            },
+            `${rid}-${opt.value}-${i}`
+          );
+        })
       }
     )
   ] });

package/dist/components/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from "../general_types";
+import type { BaseProps, OptionPresentationProps } from "../general_types";
 /** The element's `statechange` payload. `next`/`prev` are values (`null` = nothing
  *  selected); `reason` distinguishes a user pick from a form reset / bfcache restore. */
 type StateReason = "user" | "reset" | "restore";
@@ -15,7 +15,7 @@ export interface RadioChangeAttrs {
     name?: string;
 }
 /** One option in a `<RadioGroup>`. The wrapper renders an `<a-radio>` per entry. */
-export interface RadioOption {
+export interface RadioOption extends OptionPresentationProps {
     /** This option's identity and the value submitted when it's selected.
      *  Must be unique within the group (a dev-only warning fires on duplicates). */
     value: string;

package/dist/components/RadioGroup.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useId, useState } from "../jsx-runtime";
-import { nativeStateChange, toneStyle } from "../anta_helpers";
+import { nativeStateChange, optionPresentationAttrs, toneStyle } from "../anta_helpers";
 const radioAttrsOf = (el) => ({
   value: el?.value ?? null,
   name: el?.getAttribute?.("name") ?? void 0
@@ -79,9 +79,11 @@ const RadioGroup = ({
         hint && /* @__PURE__ */ jsx("a-radio-group-hint", { id: hintId, children: hint }),
         /* @__PURE__ */ jsx("a-radio-list", { children: options.map((o) => {
           const optDisabled = disabled || o.disabled;
+          const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(o);
           return /* @__PURE__ */ jsxs(
             "a-radio",
             {
+              ...optionAttrs,
               role: "radio",
               value: o.value,
               "aria-disabled": optDisabled ? "true" : void 0,
@@ -90,7 +92,8 @@ const RadioGroup = ({
               "tone-selected": o.toneSelected && o.toneSelected !== "neutral" ? o.toneSelected : void 0,
               size: o.size && o.size !== "medium" ? o.size : void 0,
               disabled: o.disabled ? "" : void 0,
-              style: toneStyle(o.toneSelected, "--radio-tone-source", toneStyle(o.tone, "--radio-tone-source")),
+              class: optionClassName,
+              style: toneStyle(o.toneSelected, "--radio-tone-source", toneStyle(o.tone, "--radio-tone-source", optionStyle)),
               children: [
                 /* @__PURE__ */ jsx("a-radio-label", { children: o.label }),
                 o.hint != null && /* @__PURE__ */ jsx("a-radio-hint", { children: o.hint })

package/dist/components/Select.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from '../general_types';
+import type { BaseProps, OptionPresentationProps } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import { type MenuProps } from './Menu';
 import './select-parts.css';
@@ -14,7 +14,7 @@ export type OptionValue = string | number | boolean;
  *
  *  Generic in the value type `V` (defaults to `string`): `Select` infers `V` from your
  *  `options`, so `{ value: 365 }` round-trips as `number` through `onValueChange`. */
-export interface SelectOption<V extends OptionValue = string> {
+export interface SelectOption<V extends OptionValue = string> extends OptionPresentationProps {
     /** The option's value (`V`) — its identity, what `value` / `defaultValue` name, and
      *  what `onValueChange` reports. Unique across the whole `options` tree (selection is
      *  value-keyed and global across groups / submenus). */

package/dist/components/Select.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useId } from "../jsx-runtime";
-import { ISOLATE_HINT } from "../anta_helpers";
+import { ISOLATE_HINT, optionPresentationAttrs } from "../anta_helpers";
 import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
 import { Input } from "./Input";
 import { Icon } from "./Icon";
@@ -164,6 +164,7 @@ const Select = (props) => {
     emit?.(next, { all: true, selected: false });
   };
   const renderOptionRow = (o, disabled2) => {
+    const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(o, true);
     const optState = { value: o.value, selected: isSelected(o.value), disabled: disabled2 };
     const custom = renderOption?.(o, optState);
     const customMark = renderIndicator?.(optState);
@@ -174,6 +175,7 @@ const Select = (props) => {
     return /* @__PURE__ */ jsxs(
       MenuItem,
       {
+        ...optionAttrs,
         id: `${uid}-opt-${o.value}`,
         selectionIndicator: menuItemIndicator,
         ...ariaSelectable,
@@ -187,6 +189,8 @@ const Select = (props) => {
         disabled: disabled2 || void 0,
         "data-menu-open": multiple ? "" : void 0,
         onSelect: (e) => choose(o, e),
+        className: optionClassName,
+        style: optionStyle,
         children: [
           custom,
           tip && /* @__PURE__ */ jsx(Tooltip, { follow: true, ...hintOnly ? { delay: 700 } : {}, children: tip })

package/dist/components/SelectFaceted.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useMemo } from "../jsx-runtime";
-import { nativeStateChange, ISOLATE_HINT } from "../anta_helpers";
+import { nativeStateChange, ISOLATE_HINT, optionPresentationAttrs } from "../anta_helpers";
 import { normalizeOpt, matchQueryRegex, matchesQuery } from "./select-options";
 import { Button } from "./Button";
 import { Menu } from "./Menu";
@@ -118,13 +118,17 @@ const SelectFaceted = (props) => {
     }
   ) }) : null;
   const optionRow = (facet, opt, keyPrefix = "") => {
+    const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(opt, true);
     const shared = {
+      ...optionAttrs,
       icon: opt.icon,
       label: opt.label ?? String(opt.value),
       hint: opt.hint,
       tone: opt.tone,
       toneSelected,
       disabled: opt.disabled,
+      className: optionClassName,
+      style: optionStyle,
       "data-menu-open": ""
     };
     if (facet.kind === "single") {

package/dist/components/TabPanel.d.ts

@@ -3,8 +3,7 @@
  * finds its `<a-tabs>` (its flat sibling under the same parent — `Tabs` renders the
  * strip and panels with no wrapper), matches by `value`, and shows/hides itself
  * off-DOM. This wrapper is a pure projection: it sets the static ARIA (`role`,
- * `tabindex`, `value`) and passes `children` straight through; `Tabs` never reads
- * or toggles it.
+ * `value`) and passes `children` straight through; `Tabs` never reads or toggles it.
  *
  * Use it as a direct child of `<Tabs>`, paired to an `options` entry by `value`.
  * For a strip and panels in different layout regions (no shared parent), or to

package/dist/components/TabPanel.js

@@ -4,7 +4,6 @@ const TabPanel = ({ value, children, hideMode, className, style }) => /* @__PURE
   {
     value,
     role: "tabpanel",
-    tabIndex: 0,
     "hide-mode": hideMode === "visibility" ? "visibility" : void 0,
     class: className,
     style,

package/dist/components/Tabs.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from "../general_types";
+import type { BaseProps, OptionPresentationProps } from "../general_types";
 import type { IconShape } from "../elements/a-icon.shapes";
 /** The element's `statechange` payload — `next`/`prev` are tab values (`null` = none). */
 type StateDetail = {
@@ -14,7 +14,7 @@ export interface TabsChangeAttrs {
  *  renders its strip from (like `RadioGroup`'s `options`). `Tabs` reads these fields to
  *  render the underlying `<a-tab>` (`tabindex`, `role`, and selection are all `Tabs`'
  *  job, published off-DOM by the element). */
-export interface TabOption {
+export interface TabOption extends OptionPresentationProps {
     /** This tab's identity — pairs it with the `<TabPanel value="…">` of the same
      *  value, and the value reported by `onStateChange` / `onChange`. Unique per strip. */
     value: string;

package/dist/components/Tabs.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState } from "../jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
+import { nativeStateChange, optionPresentationAttrs, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
 import { Tooltip } from "./Tooltip";
 const Tabs = ({
   children,
@@ -75,17 +75,20 @@ const Tabs = ({
       children: tabs.map((p) => {
         const tabDisabled = disabled || p.disabled;
         const isSelected = p.value === currentValue;
+        const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(p);
         return /* @__PURE__ */ jsxs(
           "a-tab",
           {
+            ...optionAttrs,
             role: "tab",
             value: p.value,
             tone: p.tone && p.tone !== "neutral" ? p.tone : void 0,
-            style: toneStyle(p.tone, "--tabs-tone-source", void 0),
             "aria-disabled": tabDisabled ? "true" : void 0,
             tabIndex: tabDisabled && !isSelected ? -1 : 0,
             disabled: tabDisabled ? "" : void 0,
             round: roundAttr(round) ?? roundAttr(p.round),
+            class: optionClassName,
+            style: toneStyle(p.tone, "--tabs-tone-source", optionStyle),
             children: [
               p.icon && /* @__PURE__ */ jsx("a-icon", { shape: p.icon, "aria-hidden": "true" }),
               wrapLabel(p.label != null ? p.label : p.children, "a-tab-label"),

package/dist/components/Text.d.ts

@@ -36,9 +36,11 @@ export type TextProps = BaseProps & {
     inline?: boolean;
     /** Truncate with a trailing ellipsis. `true` (or `1`) clamps to a
      *  single line; any integer ≥ 2 clamps to that many lines; `0` or a
-     *  negative value means no truncation. Uses the `-webkit-line-clamp`
-     *  technique, supported in all major browsers (Firefox 68+, Chrome,
-     *  Safari, Edge). */
+     *  negative value means no truncation. A clipped, non-expandable JSX
+     *  `Text` shows its text content in a tooltip by default. Nest a
+     *  `<Tooltip>` to provide your own tooltip instead. Uses the
+     *  `-webkit-line-clamp` technique, supported in all major browsers
+     *  (Firefox 68+, Chrome, Safari, Edge). */
     truncate?: boolean | number;
 } & ExpandMode;
 /**

package/dist/components/Text.js

@@ -1,5 +1,6 @@
-import { jsx } from "@antadesign/anta/jsx-runtime";
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { toneStyle } from "../anta_helpers";
+import { Tooltip } from "./Tooltip";
 const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }) => {
   const n = typeof truncate === "number" ? truncate : truncate ? 1 : null;
   const lineCount = n != null && n >= 1 ? n : null;
@@ -10,7 +11,7 @@ const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible,
     lineCount != null ? { ...style, ["--line-clamp"]: lineCount } : style
   );
   const canExpand = expandable && lineCount != null;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "a-text",
     {
       priority,
@@ -23,7 +24,10 @@ const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible,
       class: className,
       style: computedStyle,
       ...rest,
-      children
+      children: [
+        children,
+        lineCount != null && !canExpand && /* @__PURE__ */ jsx(Tooltip, { truncatedOnly: true, "data-anta-text-tooltip": "" })
+      ]
     }
   );
 };

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

@@ -98,8 +98,7 @@ export declare class AMenuElement extends HTMLElementBase {
      *  a multi-select lands on its topmost checked row. */
     private seatInitialFocus;
     /** Scroll THIS menu's body so `item` sits inside the visible scroll viewport,
-     *  touching only the internal `.scroll` container — never the document, whose
-     *  scroll would trip the anchor-scrolled-out dismiss. No-op for a menu short
+     *  touching only the internal `.scroll` container. No-op for a menu short
      *  enough not to scroll. */
     private scrollItemIntoView;
     /** Fade the scrolling body's content into the top / bottom edges — but only on the
@@ -169,12 +168,6 @@ export declare class AMenuElement extends HTMLElementBase {
      *  mutates deep in its subtree, not this menu's direct children, so it won't
      *  spuriously reset the cursor. */
     private startComboObserver;
-    /** Watch the root trigger and dismiss the system once it scrolls out of the
-     *  spot it held at open (see trackPosition). Deferred a frame so the trigger's
-     *  post-open layout has settled before the rect is snapshotted; guarded in case
-     *  the menu closed in between. Tracks the root anchor only — submenus ride
-     *  inside it, so if the root anchor goes, the whole system should go. */
-    private armPositionTracker;
     /** Apply CLOSE to the DOM (no event). Closes this menu and everything stacked
      *  above it (its submenus). */
     private hide;

package/dist/elements/a-menu.js

@@ -7,14 +7,12 @@ const MIN_HEIGHT = 96;
 const SUBMENU_OPEN_DELAY = 130;
 const SUBMENU_CLOSE_DELAY = 130;
 const TYPEAHEAD_RESET = 500;
-const ANCHOR_VISIBLE_RATIO = 0.5;
 const SELF_ACTIVATING = 'a-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 openStack = [];
 let docBound = false;
 let boundDoc = null;
 let boundView = null;
-let removePosTracker = null;
 function bindDocListeners(doc, view) {
   if (docBound) return;
   doc.addEventListener("pointerdown", onDocPointerDown, true);
@@ -33,31 +31,10 @@ function unbindDocListeners() {
   boundDoc?.removeEventListener("keyup", onDocKeyUp, true);
   boundDoc?.removeEventListener("contextmenu", onDocContextMenu, true);
   boundView?.removeEventListener("resize", onResize);
-  removePosTracker?.();
-  removePosTracker = null;
   boundDoc = null;
   boundView = null;
   docBound = false;
 }
-function trackPosition(el, onEscape) {
-  if (typeof IntersectionObserver === "undefined") return () => {
-  };
-  const doc = el.ownerDocument;
-  const rect = el.getBoundingClientRect();
-  const vw = doc.documentElement.clientWidth;
-  const vh = doc.documentElement.clientHeight;
-  const rootMargin = `${-rect.top}px ${-(vw - rect.right)}px ${-(vh - rect.bottom)}px ${-rect.left}px`;
-  const win = doc.defaultView;
-  const root = win && win !== win.top ? doc.documentElement : null;
-  const io = new IntersectionObserver(
-    ([entry]) => {
-      if (!entry.isIntersecting) onEscape();
-    },
-    { root, rootMargin, threshold: ANCHOR_VISIBLE_RATIO }
-  );
-  io.observe(el);
-  return () => io.disconnect();
-}
 function pathHitsMenus(e, primaryClick = false) {
   const path = e.composedPath();
   for (const m of openStack) {
@@ -471,8 +448,7 @@ class AMenuElement extends HTMLElementBase {
     if (viaKeyboard) (selected ?? items[0])?.focus({ preventScroll: true });
   }
   /** Scroll THIS menu's body so `item` sits inside the visible scroll viewport,
-   *  touching only the internal `.scroll` container — never the document, whose
-   *  scroll would trip the anchor-scrolled-out dismiss. No-op for a menu short
+   *  touching only the internal `.scroll` container. No-op for a menu short
    *  enough not to scroll. */
   scrollItemIntoView(item) {
     const c = this.scrollEl;
@@ -696,7 +672,6 @@ class AMenuElement extends HTMLElementBase {
     openStack.push(this);
     if (wasEmpty) {
       bindDocListeners(this.doc, this.view);
-      this.armPositionTracker();
     }
     const search = this.#searchField;
     if (search) {
@@ -722,20 +697,6 @@ class AMenuElement extends HTMLElementBase {
     });
     this.comboObserver.observe(this, { childList: true });
   }
-  /** Watch the root trigger and dismiss the system once it scrolls out of the
-   *  spot it held at open (see trackPosition). Deferred a frame so the trigger's
-   *  post-open layout has settled before the rect is snapshotted; guarded in case
-   *  the menu closed in between. Tracks the root anchor only — submenus ride
-   *  inside it, so if the root anchor goes, the whole system should go. */
-  armPositionTracker() {
-    const anchor = this.triggerAnchor;
-    if (!anchor) return;
-    this.view.requestAnimationFrame(() => {
-      if (!this._shown || openStack[0] !== this) return;
-      removePosTracker?.();
-      removePosTracker = trackPosition(anchor, () => dismiss());
-    });
-  }
   /** Apply CLOSE to the DOM (no event). Closes this menu and everything stacked
    *  above it (its submenus). */
   hide() {

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

@@ -35,6 +35,10 @@ export declare class ATextElement extends HTMLElementBase {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** True when `truncate` currently hides some of the slotted content. This is
+     *  a UI-thread layout read, used by a nested `a-tooltip`; it never writes to
+     *  the host or light DOM. */
+    get isTruncated(): boolean;
     /** Create or remove the chevron to match `expandable`, then refresh it. */
     private syncExpandButton;
     private handleToggle;

package/dist/elements/a-text.js

@@ -141,6 +141,15 @@ class ATextElement extends HTMLElementBase {
   get #isCollapsible() {
     return this.hasAttribute("collapsible");
   }
+  /** True when `truncate` currently hides some of the slotted content. This is
+   *  a UI-thread layout read, used by a nested `a-tooltip`; it never writes to
+   *  the host or light DOM. */
+  get isTruncated() {
+    if (!this.hasAttribute("truncate") || this.expanded) return false;
+    const s = this.slotEl;
+    if (s.clientWidth === 0 && s.clientHeight === 0) return false;
+    return s.scrollHeight > s.clientHeight + 1 || s.scrollWidth > s.clientWidth + 1;
+  }
   /** Create or remove the chevron to match `expandable`, then refresh it. */
   syncExpandButton() {
     if (this.#isExpandable && !this.expandBtn) {
@@ -183,9 +192,7 @@ class ATextElement extends HTMLElementBase {
    *  clips. Frozen on while expanded; height catches wrapped text, width a long word. */
   measureOverflow() {
     if (!this.#isExpandable || this.expanded) return;
-    const s = this.slotEl;
-    const over = s.scrollHeight > s.clientHeight + 1 || s.scrollWidth > s.clientWidth + 1;
-    s.classList.toggle("overflowing", over);
+    this.slotEl.classList.toggle("overflowing", this.isTruncated);
   }
   /** Reflect state onto the button (label + `aria-expanded` + `.expanded`); a
    *  one-way expand removes it once open. */

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

@@ -64,6 +64,13 @@ export declare class ATooltipElement extends HTMLElementBase {
      *  fed the latest cursor event, so it shows at the cursor and so moving back
      *  onto an anchor after the tooltip was dismissed re-arms it. */
     private makeDebouncedShow;
+    private hasExplicitTextTooltip;
+    /** Text rendered by the anchor, excluding every tooltip's light-DOM content.
+     *  An automatic text tooltip has no light children itself, but nested custom
+     *  tooltips might; including their hidden content would produce a misleading
+     *  fallback string. */
+    private anchorText;
+    private syncAutomaticTextContent;
     /** The element whose overflow decides whether the tooltip shows: a
      *  `truncated-selector` resolved within the anchor wins; else the first of
      *  Anta's ellipsizing label parts inside the anchor; else the anchor itself

package/dist/elements/a-tooltip.js

@@ -13,6 +13,7 @@ const PROX_FAR = 100;
 const PROX_FADE_MS = 60;
 const ENTER_TOUCH_DELAY = 500;
 const TRUNCATING_PARTS = "a-tab-label, a-button-label";
+const AUTOMATIC_TEXT_TOOLTIP = "data-anta-text-tooltip";
 const LEAVE_TOUCH_DELAY = 1500;
 const TOUCH_SLOP = 10;
 let currentOpen = null;
@@ -45,16 +46,37 @@ function releaseOpen(el) {
     graceTimer = void 0;
   }, GRACE_MS);
 }
-const anchorToTooltip = /* @__PURE__ */ new WeakMap();
+const anchorToTooltips = /* @__PURE__ */ new WeakMap();
+function preferredTooltip(registry) {
+  let automatic;
+  let explicit;
+  for (const tooltip of registry.tooltips) {
+    if (tooltip.hasAttribute(AUTOMATIC_TEXT_TOOLTIP)) automatic = tooltip;
+    else explicit = tooltip;
+  }
+  return explicit ?? automatic;
+}
+function syncAnchorListeners(anchor, registry) {
+  const preferred = preferredTooltip(registry);
+  for (const tooltip of registry.tooltips) {
+    if (tooltip !== preferred) tooltip.teardownListeners();
+  }
+  if (!preferred || !registry.intersecting) {
+    preferred?.teardownListeners();
+    return;
+  }
+  requestAnimationFrame(() => {
+    const current = anchorToTooltips.get(anchor);
+    if (current !== registry || !current.intersecting || preferredTooltip(current) !== preferred) return;
+    preferred.setupListeners();
+  });
+}
 function handleIntersection(entries) {
   for (const entry of entries) {
-    const tooltip = anchorToTooltip.get(entry.target);
-    if (!tooltip) continue;
-    if (!tooltip.listening && entry.isIntersecting) {
-      requestAnimationFrame(() => tooltip.setupListeners());
-    } else if (tooltip.listening && !entry.isIntersecting) {
-      requestAnimationFrame(() => tooltip.teardownListeners());
-    }
+    const registry = anchorToTooltips.get(entry.target);
+    if (!registry) continue;
+    registry.intersecting = entry.isIntersecting;
+    syncAnchorListeners(entry.target, registry);
   }
 }
 const lazyObserver = typeof IntersectionObserver !== "undefined" ? new IntersectionObserver(handleIntersection, { root: null, rootMargin: "0px", threshold: 0 }) : null;
@@ -178,15 +200,26 @@ class ATooltipElement extends HTMLElementBase {
     const parent = this.parentElement;
     if (!parent) return;
     this.anchor = parent;
-    anchorToTooltip.set(parent, this);
-    lazyObserver?.observe(parent);
+    let registry = anchorToTooltips.get(parent);
+    if (!registry) {
+      registry = { tooltips: /* @__PURE__ */ new Set(), intersecting: false };
+      anchorToTooltips.set(parent, registry);
+      lazyObserver?.observe(parent);
+    }
+    registry.tooltips.add(this);
+    syncAnchorListeners(parent, registry);
   }
   disconnectedCallback() {
     this.cleanup();
     if (this.anchor) {
-      if (anchorToTooltip.get(this.anchor) === this) {
-        anchorToTooltip.delete(this.anchor);
+      const anchor = this.anchor;
+      const registry = anchorToTooltips.get(anchor);
+      registry?.tooltips.delete(this);
+      if (registry && registry.tooltips.size === 0) {
+        anchorToTooltips.delete(anchor);
         lazyObserver?.unobserve(this.anchor);
+      } else if (registry) {
+        syncAnchorListeners(anchor, registry);
       }
       this.anchor = null;
     }
@@ -228,6 +261,34 @@ class ATooltipElement extends HTMLElementBase {
   get #truncatedOnly() {
     return this.hasAttribute("truncated-only");
   }
+  /** JSX `<Text truncate>` emits 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() {
+    return this.hasAttribute(AUTOMATIC_TEXT_TOOLTIP);
+  }
+  hasExplicitTextTooltip() {
+    const anchor = this.anchor;
+    if (!this.#isAutomaticTextTooltip || !anchor) return false;
+    return Array.from(anchor.children).some(
+      (child) => child !== this && child.localName === "a-tooltip" && !child.hasAttribute(AUTOMATIC_TEXT_TOOLTIP)
+    );
+  }
+  /** Text rendered by the anchor, excluding every tooltip's light-DOM content.
+   *  An automatic text tooltip has no light children itself, but nested custom
+   *  tooltips might; including their hidden content would produce a misleading
+   *  fallback string. */
+  anchorText() {
+    const read = (node) => {
+      if (node.nodeType === 3) return node.textContent ?? "";
+      if (node.nodeType === 1 && node.localName === "a-tooltip") return "";
+      return Array.from(node.childNodes).map(read).join("");
+    };
+    return this.anchor ? Array.from(this.anchor.childNodes).map(read).join("").trim() : "";
+  }
+  syncAutomaticTextContent() {
+    if (this.#isAutomaticTextTooltip) this.bubble.textContent = this.anchorText();
+  }
   /** The element whose overflow decides whether the tooltip shows: a
    *  `truncated-selector` resolved within the anchor wins; else the first of
    *  Anta's ellipsizing label parts inside the anchor; else the anchor itself
@@ -252,6 +313,8 @@ class ATooltipElement extends HTMLElementBase {
   isTargetTruncated() {
     const t = this.resolveTruncationTarget();
     if (!t) return false;
+    const reported = t.isTruncated;
+    if (typeof reported === "boolean") return reported;
     if (t.clientWidth === 0 && t.clientHeight === 0) return false;
     return t.scrollWidth - t.clientWidth > 1 || t.scrollHeight - t.clientHeight > 1;
   }
@@ -260,6 +323,7 @@ class ATooltipElement extends HTMLElementBase {
    *  (so formatting whitespace / an empty conditional doesn't open a blank bubble).
    *  Re-checked on every show(), so a tooltip populated later self-corrects. */
   isEmpty() {
+    if (this.#isAutomaticTextTooltip) return this.anchorText() === "";
     return this.children.length === 0 && (this.textContent ?? "").trim() === "";
   }
   /** While shown, watch the slotted content so a bubble whose content is
@@ -279,10 +343,16 @@ class ATooltipElement extends HTMLElementBase {
     if (typeof MutationObserver === "undefined") return;
     if (!this.contentObserver) {
       this.contentObserver = new MutationObserver(() => {
-        if (this.shown && this.isEmpty()) this.hide();
+        if (!this.shown) return;
+        this.syncAutomaticTextContent();
+        if (this.isEmpty()) this.hide();
       });
     }
-    this.contentObserver.observe(this, { childList: true, characterData: true, subtree: true });
+    this.contentObserver.observe(this.#isAutomaticTextTooltip ? this.anchor ?? this : this, {
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
   }
   // --- positioning (sets only the shadow container's own transform) ---
   // Single pending position frame: a burst of mousemoves within one frame
@@ -356,8 +426,10 @@ class ATooltipElement extends HTMLElementBase {
   show = (e) => {
     if (!this.anchor) return;
     if (isMenuOpen() && !isInsideOpenMenu(this.anchor)) return;
+    if (this.hasExplicitTextTooltip()) return;
     if (this.isEmpty()) return;
     if (this.#truncatedOnly && !this.isTargetTruncated()) return;
+    this.syncAutomaticTextContent();
     this.cancelHide();
     if (currentOpen && currentOpen !== this && this.anchor.contains(currentOpen.anchor)) {
       return;
@@ -472,6 +544,7 @@ class ATooltipElement extends HTMLElementBase {
   /** Open now if another tooltip is hot (skip delay), else (re)arm the delayed
    *  show with the latest cursor event. */
   trigger(e) {
+    if (this.hasExplicitTextTooltip()) return;
     if (this.isEmpty()) return;
     if (this.#truncatedOnly && !this.isTargetTruncated()) return;
     if (isHot()) {

package/dist/general_types.d.ts

@@ -27,6 +27,17 @@ export interface BaseProps {
     /** Any `aria-*` attribute is forwarded to the rendered element. */
     [key: `aria-${string}`]: unknown;
 }
+/** Safe presentation attributes for a data-rendered option. They land on the
+ * option's rendered row, rather than on the enclosing control. Menu-based
+ * components reserve `data-menu-*` for their own selection and focus behavior. */
+export interface OptionPresentationProps {
+    /** CSS class on the option's rendered row. */
+    className?: string;
+    /** Inline styles on the option's rendered row. */
+    style?: React.CSSProperties;
+    /** Additional data attributes on the option's rendered row. */
+    [key: `data-${string}`]: unknown;
+}
 /**
  * Standard DOM event handlers Anta forwards to the rendered element. These are
  * **enumerated on purpose** — rather than an open `on${string}` index signature

package/dist/theme-anta.css

@@ -1 +1 @@
-:root:root,.light.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: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--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: var(--text-2-brand)}.dark.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: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--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: var(--text-2-brand)}@layer anta{a-button:not([tone]),a[role=button][data-anta]:not([tone]),button[data-anta]:not([tone]),input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c}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: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}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: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}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: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}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: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}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: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button:not([tone]),.dark a[role=button][data-anta]:not([tone]),.dark button[data-anta]:not([tone]),.dark input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand],.dark button[data-anta][tone=brand],.dark input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical],.dark button[data-anta][tone=critical],.dark input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info],.dark button[data-anta][tone=info],.dark input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success],.dark button[data-anta][tone=success],.dark input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning],.dark button[data-anta][tone=warning],.dark input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-checkbox[tone=brand],a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #5f4bc3;--checkbox-bg-selected-hover: #503cb4;--checkbox-bg-selected-active: #483493}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1f6eb2;--checkbox-bg-selected-hover: #1a5b93;--checkbox-bg-selected-active: #175082}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-bg-selected: #2a7e43;--checkbox-bg-selected-hover: #226737;--checkbox-bg-selected-active: #1f5c31}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #c37416;--checkbox-bg-selected-hover: #ae6613;--checkbox-bg-selected-active: #995200}a-checkbox[tone=critical],a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #c9302c;--checkbox-bg-selected-hover: #b02120;--checkbox-bg-selected-active: #a01c1c}a-checkbox[tone=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}.dark a-checkbox:not([tone]):not([tone-selected]){--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-checkbox[tone=brand],.dark a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #503cb4;--checkbox-bg-selected-hover: #5f4bc3;--checkbox-bg-selected-active: #7460d7}.dark a-checkbox[tone=neutral],.dark a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65}.dark a-checkbox[tone=info],.dark a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1a5b93;--checkbox-bg-selected-hover: #1f6eb2;--checkbox-bg-selected-active: #2686d9}.dark a-checkbox[tone=success],.dark a-checkbox[tone-selected=success]{--checkbox-bg-selected: #226737;--checkbox-bg-selected-hover: #2a7e43;--checkbox-bg-selected-active: #329550}.dark a-checkbox[tone=warning],.dark a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #7f410b;--checkbox-bg-selected-hover: #995200;--checkbox-bg-selected-active: #ae6613}.dark a-checkbox[tone=critical],.dark a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #b02120;--checkbox-bg-selected-hover: #c9302c;--checkbox-bg-selected-active: #de4545}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}a-radio:not([tone]):not([tone-selected]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent)}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #5f4bc3;--radio-bg-selected-hover: #503cb4;--radio-bg-selected-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1f6eb2;--radio-bg-selected-hover: #1a5b93;--radio-bg-selected-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #2a7e43;--radio-bg-selected-hover: #226737;--radio-bg-selected-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #c37416;--radio-bg-selected-hover: #ae6613;--radio-bg-selected-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #c9302c;--radio-bg-selected-hover: #b02120;--radio-bg-selected-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}.dark a-radio:not([tone]):not([tone-selected]){--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65;--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #503cb4;--radio-bg-selected-hover: #5f4bc3;--radio-bg-selected-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1a5b93;--radio-bg-selected-hover: #1f6eb2;--radio-bg-selected-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #226737;--radio-bg-selected-hover: #2a7e43;--radio-bg-selected-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #7f410b;--radio-bg-selected-hover: #995200;--radio-bg-selected-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #b02120;--radio-bg-selected-hover: #c9302c;--radio-bg-selected-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}a-tag:not([tone]){--tag-tint: #44374b;--tag-bg-solid: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-bg-solid: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-bg-solid: #5f4bc3}.dark a-tag[tone=info]{--tag-bg-solid: #1f6eb2}.dark a-tag[tone=success]{--tag-bg-solid: #2a7e43}.dark a-tag[tone=warning]{--tag-bg-solid: #995200}.dark a-tag[tone=critical]{--tag-bg-solid: #c9302c}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 7%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 8%, transparent)}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: var(--border-2);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}.dark a-input:not([status]):not([tone]){--input-border: #49424c}.dark a-input[status=success]{--input-border: var(--border-1-success)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: #fefbfb;--input-time-border: #de4545;--input-time-border-hover: #de4545;--input-time-hint: #c9302c}a-input-time[status=warning]{--input-time-bg: #fefbf6;--input-time-border: #ae6613;--input-time-border-hover: #ae6613;--input-time-hint: #995200}a-input-time[status=success]{--input-time-bg: #f7fcf9;--input-time-border: #329550;--input-time-border-hover: #329550;--input-time-hint: #2a7e43}a-input-time[status=info]{--input-time-bg: #fbfcfe;--input-time-border: #2686d9;--input-time-border-hover: #2686d9;--input-time-hint: #175082}a-input-time[status=brand]{--input-time-bg: #fcfcfe;--input-time-border: #7460d7;--input-time-border-hover: #7460d7;--input-time-hint: #5f4bc3}.dark a-input-time[status=critical]{--input-time-bg: #1f0506;--input-time-border: #c9302c;--input-time-border-hover: #c9302c;--input-time-hint: #e25858}.dark a-input-time[status=warning]{--input-time-bg: #120a03;--input-time-border: #995200;--input-time-border-hover: #995200;--input-time-hint: #c37416}.dark a-input-time[status=success]{--input-time-bg: #041008;--input-time-border: var(--border-1-success);--input-time-border-hover: var(--border-1-success);--input-time-hint: #3aab5c}.dark a-input-time[status=info]{--input-time-bg: #040d18;--input-time-border: #1f6eb2;--input-time-border-hover: #1f6eb2;--input-time-hint: #3e93dd}.dark a-input-time[status=brand]{--input-time-bg: #0b0916;--input-time-border: #5f4bc3;--input-time-border-hover: #5f4bc3;--input-time-hint: #8270db}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-hint: var(--text-5)}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}.dark a-input-time:not([status]){--input-time-border: #49424c;--input-time-border-hover: #635b65}}
+:root:root,.light.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: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--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.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: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--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{a-button:not([tone]),a[role=button][data-anta]:not([tone]),button[data-anta]:not([tone]),input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c}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: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}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: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}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: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}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: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}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: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button:not([tone]),.dark a[role=button][data-anta]:not([tone]),.dark button[data-anta]:not([tone]),.dark input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand],.dark button[data-anta][tone=brand],.dark input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical],.dark button[data-anta][tone=critical],.dark input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info],.dark button[data-anta][tone=info],.dark input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success],.dark button[data-anta][tone=success],.dark input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning],.dark button[data-anta][tone=warning],.dark input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-checkbox[tone=brand],a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #5f4bc3;--checkbox-bg-selected-hover: #503cb4;--checkbox-bg-selected-active: #483493}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1f6eb2;--checkbox-bg-selected-hover: #1a5b93;--checkbox-bg-selected-active: #175082}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-bg-selected: #2a7e43;--checkbox-bg-selected-hover: #226737;--checkbox-bg-selected-active: #1f5c31}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #c37416;--checkbox-bg-selected-hover: #ae6613;--checkbox-bg-selected-active: #995200}a-checkbox[tone=critical],a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #c9302c;--checkbox-bg-selected-hover: #b02120;--checkbox-bg-selected-active: #a01c1c}a-checkbox[tone=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}.dark a-checkbox:not([tone]):not([tone-selected]){--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-checkbox[tone=brand],.dark a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #503cb4;--checkbox-bg-selected-hover: #5f4bc3;--checkbox-bg-selected-active: #7460d7}.dark a-checkbox[tone=neutral],.dark a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65}.dark a-checkbox[tone=info],.dark a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1a5b93;--checkbox-bg-selected-hover: #1f6eb2;--checkbox-bg-selected-active: #2686d9}.dark a-checkbox[tone=success],.dark a-checkbox[tone-selected=success]{--checkbox-bg-selected: #226737;--checkbox-bg-selected-hover: #2a7e43;--checkbox-bg-selected-active: #329550}.dark a-checkbox[tone=warning],.dark a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #7f410b;--checkbox-bg-selected-hover: #995200;--checkbox-bg-selected-active: #ae6613}.dark a-checkbox[tone=critical],.dark a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #b02120;--checkbox-bg-selected-hover: #c9302c;--checkbox-bg-selected-active: #de4545}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}a-radio:not([tone]):not([tone-selected]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent)}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #5f4bc3;--radio-bg-selected-hover: #503cb4;--radio-bg-selected-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1f6eb2;--radio-bg-selected-hover: #1a5b93;--radio-bg-selected-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #2a7e43;--radio-bg-selected-hover: #226737;--radio-bg-selected-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #c37416;--radio-bg-selected-hover: #ae6613;--radio-bg-selected-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #c9302c;--radio-bg-selected-hover: #b02120;--radio-bg-selected-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}.dark a-radio:not([tone]):not([tone-selected]){--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65;--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #503cb4;--radio-bg-selected-hover: #5f4bc3;--radio-bg-selected-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1a5b93;--radio-bg-selected-hover: #1f6eb2;--radio-bg-selected-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #226737;--radio-bg-selected-hover: #2a7e43;--radio-bg-selected-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #7f410b;--radio-bg-selected-hover: #995200;--radio-bg-selected-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #b02120;--radio-bg-selected-hover: #c9302c;--radio-bg-selected-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}a-tag:not([tone]){--tag-tint: #44374b;--tag-bg-solid: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-bg-solid: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-bg-solid: #5f4bc3}.dark a-tag[tone=info]{--tag-bg-solid: #1f6eb2}.dark a-tag[tone=success]{--tag-bg-solid: #2a7e43}.dark a-tag[tone=warning]{--tag-bg-solid: #995200}.dark a-tag[tone=critical]{--tag-bg-solid: #c9302c}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 7%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 8%, transparent)}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: var(--border-2);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}.dark a-input:not([status]):not([tone]){--input-border: #49424c}.dark a-input[status=success]{--input-border: var(--border-1-success)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: #fefbfb;--input-time-border: #de4545;--input-time-border-hover: #de4545;--input-time-hint: #c9302c}a-input-time[status=warning]{--input-time-bg: #fefbf6;--input-time-border: #ae6613;--input-time-border-hover: #ae6613;--input-time-hint: #995200}a-input-time[status=success]{--input-time-bg: #f7fcf9;--input-time-border: #329550;--input-time-border-hover: #329550;--input-time-hint: #2a7e43}a-input-time[status=info]{--input-time-bg: #fbfcfe;--input-time-border: #2686d9;--input-time-border-hover: #2686d9;--input-time-hint: #175082}a-input-time[status=brand]{--input-time-bg: #fcfcfe;--input-time-border: #7460d7;--input-time-border-hover: #7460d7;--input-time-hint: #5f4bc3}.dark a-input-time[status=critical]{--input-time-bg: #1f0506;--input-time-border: #c9302c;--input-time-border-hover: #c9302c;--input-time-hint: #e25858}.dark a-input-time[status=warning]{--input-time-bg: #120a03;--input-time-border: #995200;--input-time-border-hover: #995200;--input-time-hint: #c37416}.dark a-input-time[status=success]{--input-time-bg: #041008;--input-time-border: var(--border-1-success);--input-time-border-hover: var(--border-1-success);--input-time-hint: #3aab5c}.dark a-input-time[status=info]{--input-time-bg: #040d18;--input-time-border: #1f6eb2;--input-time-border-hover: #1f6eb2;--input-time-hint: #3e93dd}.dark a-input-time[status=brand]{--input-time-bg: #0b0916;--input-time-border: #5f4bc3;--input-time-border-hover: #5f4bc3;--input-time-hint: #8270db}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-hint: var(--text-5)}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}.dark a-input-time:not([status]){--input-time-border: #49424c;--input-time-border-hover: #635b65}}

package/docs/changelog.md

@@ -3,6 +3,23 @@
 This page tracks changes that ship in `@antadesign/anta`. Documentation-only
 changes are not listed.
 
+## 0.3.21 — August 11, 2026
+
+### Added
+
+- `Select`, `SelectFaceted`, `InputAutocomplete`, `RadioGroup`, and `Tabs`
+  option objects accept `className`, `style`, and safe `data-*`
+  attributes on their rendered rows. `data-menu-*` remains component-owned.
+
+### Fixed
+
+- Tab panels no longer add a default tab stop.
+- Menus no longer dismiss when their visible trigger changes size. They request
+  dismissal only after the trigger leaves the viewport.
+- JSX `Text` now shows its clipped content in a tooltip by default. A nested
+  `Tooltip` replaces it, and expandable text does not add one.
+- The Anta theme now uses the shared focus-ring colors in light and dark modes.
+
 ## 0.3.20 — August 4, 2026
 
 ### Changed

package/docs/components/radio.md

@@ -27,6 +27,10 @@ styled like `Input`'s hint.
 The group's own `label` and `hint` form a header **above** the options: the
 `label` first, the `hint` (an instruction for the whole set) directly under it.
 
+Each option can also set `className`, `style`, and `data-*`.
+`RadioGroup` forwards them to that option's `<a-radio>` so you can add
+per-option presentation and application metadata.
+
 ## Tones
 
 ```tsx

package/docs/components/select.md

@@ -776,6 +776,9 @@ the same thing):
 | `disabled` | `boolean` | Disable just this option. |
 | `tone` | `string` | The row's color across label, icon, hint, selected tint, and indicator. A named tone (`neutral` / `brand` / `info` / `success` / `warning` / `critical`) or any CSS color. |
 | `tooltip` | `React.ReactNode` | Row tooltip. In a `multiple` select with `selectAll`, a row with no `tooltip` shows the default "select only this" (Alt/⌥-click) hint; set it to override, or `''` to suppress. |
+| `className` | `string` | CSS class on the rendered menu row. |
+| `style` | `React.CSSProperties` | Inline styles on the rendered menu row. |
+| `data-*` | `unknown` | Data attributes on the rendered menu row. `data-menu-*` is reserved for Select's selection and keyboard behavior. |
 | `[key: string]` | `unknown` | Your own data — attach anything and read it back in `renderOption`. |
 
 **`SelectGroup`** — a heading with items rendered inline beneath it.

package/docs/components/text.md

@@ -45,6 +45,11 @@ truncation. Both modes use `-webkit-line-clamp` inside
 prefix (Firefox 68+, Chrome, Safari, Edge). The host gets `min-width: 0`
 so truncation works inside flex and grid containers.
 
+JSX `Text` adds a `truncatedOnly` tooltip containing its text content. It
+opens only when the text clips. Nest a `<Tooltip>` to replace that tooltip;
+an empty nested tooltip suppresses it. `expandable` text has no automatic
+tooltip because its own control reveals the content.
+
 ```tsx
 {/* Single line */}
 <Text truncate>{longSentence}</Text>
@@ -54,6 +59,23 @@ so truncation works inside flex and grid containers.
 <Text truncate={3}>{longSentence}</Text>
 ```
 
+### Use a tooltip with the web component
+
+`<a-text>` does not add a tooltip. Nest `<a-tooltip truncated-only>` and pass
+the full text as its content:
+
+```html
+<a-text truncate="1" style="max-width: 260px; cursor: help">
+  A long status message that is clipped until you hover it.
+  <a-tooltip truncated-only>
+    A long status message that is clipped until you hover it.
+  </a-tooltip>
+</a-text>
+```
+
+`a-text.isTruncated` is a read-only layout measurement. Read it on the UI
+thread when you compose custom truncation behavior.
+
 Pair `expandable` with `truncate` to let the reader reveal the full text.
 The fade and chevron appear only when the clamped content overflows; text
 that fits gets neither. Single-line truncation fades on the right edge,
@@ -98,9 +120,11 @@ more" and "Show less". `collapsible` takes effect only with `expandable`.
  kept while lightness/chroma are pinned per priority in oklch. |
 | `truncate?` | boolean \| number | — | Truncate with a trailing ellipsis. `true` (or `1`) clamps to a
  single line; any integer ≥ 2 clamps to that many lines; `0` or a
- negative value means no truncation. Uses the `-webkit-line-clamp`
- technique, supported in all major browsers (Firefox 68+, Chrome,
- Safari, Edge). |
+ negative value means no truncation. A clipped, non-expandable JSX
+ `Text` shows its text content in a tooltip by default. Nest a
+ `<Tooltip>` to provide your own tooltip instead. Uses the
+ `-webkit-line-clamp` technique, supported in all major browsers
+ (Firefox 68+, Chrome, Safari, Edge). |
 
 Use the web component directly when you are not using React or Preact and a native control does not fit.
 

package/docs/install-config.md

@@ -15,6 +15,7 @@ of a floating tag such as `"latest"`.
 import '@antadesign/anta/tokens.css'  // CSS custom properties
 import '@antadesign/anta/reset.css'   // reset and typography defaults
 import '@antadesign/anta/elements'    // registers <a-*> elements
+import '@antadesign/anta/theme-anta.css' // optional hand-tuned reference palette
 import { Progress } from '@antadesign/anta'
 
 <Progress value={42} label="Uploaded" hint="3 of 7" />
@@ -36,6 +37,10 @@ recommended; the reference theme is optional.
 Load `tokens.css` before element CSS. Elements read its variables; without it,
 they render unstyled.
 
+To use the optional reference palette, import `theme-anta.css` after the element
+registration import. It ships in `@antadesign/anta`; omit it to keep the
+seed-derived default palette or provide your own theme.
+
 ### Cascade layers
 
 Anta's reset and element CSS live in `@layer anta`. `tokens.css` declares

package/docs/theming.md

@@ -1,5 +1,20 @@
 # Theming
 
+## Reference palette
+
+`@antadesign/anta` ships an optional hand-tuned reference palette at
+`@antadesign/anta/theme-anta.css`. Import it after the tokens, reset, and element
+registration imports to replace the seed-derived default:
+
+```ts
+import '@antadesign/anta/tokens.css'
+import '@antadesign/anta/reset.css'
+import '@antadesign/anta/elements'
+import '@antadesign/anta/theme-anta.css'
+```
+
+Omit the final import to use the default palette, or define your own theme.
+
 Anta's palette is generative. Every color in the system derives from six tone seeds (`--anta-seed-neutral`, `--anta-seed-brand`, `--anta-seed-info`, …), and a seed contributes only its hue: the lightness and chroma of every background, text, border, and component state come from Anta's formulas, tuned per role and per theme. Reskinning a tone is one custom property, and the whole scale re-derives in both light and dark:
 
 ```css

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
     "docs",
     "NOTICES.md"
   ],
-  "packageManager": "pnpm@8.13.1",
+  "packageManager": "pnpm@10.11.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -57,6 +57,7 @@
     "stop": "node scripts/dev-stop.mjs",
     "typecheck": "tsc --noEmit -p src/tsconfig.json",
     "lint": "node scripts/lint-getters.mjs",
+    "verify": "pnpm run lint && pnpm run typecheck && pnpm --filter anta-site run docs:api",
     "icons": "node scripts/generate-icons.mjs --input src/elements/icons --output src/elements --name a-icon.shapes --internal",
     "clean": "rm -rf dist",
     "prepare": "pnpm run build",
@@ -76,11 +77,5 @@
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "esbuild",
-      "sharp"
-    ]
   }
 }