@antadesign/anta 0.3.26 → 0.3.28

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, optionPresentationAttrs, toneStyle } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, optionPresentationAttrs, toneStyle } from "../anta_helpers";
 const radioAttrsOf = (el) => ({
   value: el?.value ?? null,
   name: el?.getAttribute?.("name") ?? void 0
@@ -19,7 +19,7 @@ const RadioGroup = ({
   hint,
   status,
   tone,
-  toneSelected,
+  toneScope,
   size,
   disabled,
   orientation,
@@ -63,8 +63,8 @@ const RadioGroup = ({
       "default-state": !controlled ? defaultValue : void 0,
       name,
       status: status && status !== "neutral" ? status : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
-      "tone-selected": toneSelected || void 0,
+      tone: neutralToneAttr(tone),
+      "tone-scope": toneScope && toneScope !== "all" ? toneScope : void 0,
       size: size && size !== "medium" ? size : void 0,
       disabled: disabled ? "" : void 0,
       orientation: orientation && orientation !== "vertical" ? orientation : void 0,
@@ -73,15 +73,7 @@ const RadioGroup = ({
       onfocusin: onFocus,
       onfocusout: onBlur,
       class: className,
-      style: toneStyle(
-        toneSelected,
-        "--radio-tone-source",
-        toneStyle(
-          tone,
-          "--radio-off-tone-source",
-          toneSelected == null ? toneStyle(tone, "--radio-tone-source", style) : style
-        )
-      ),
+      style: toneStyle(tone, "--radio-tone-source", toneStyle(tone, "--radio-off-tone-source", style)),
       children: [
         label && /* @__PURE__ */ jsx("a-radio-group-label", { id: labelId, children: label }),
         hint && /* @__PURE__ */ jsx("a-radio-group-hint", { id: hintId, children: hint }),
@@ -97,19 +89,11 @@ const RadioGroup = ({
               "aria-disabled": optDisabled ? "true" : void 0,
               tabIndex: o.value === tabStopValue ? 0 : -1,
               tone: o.tone || void 0,
-              "tone-selected": o.toneSelected || void 0,
+              "tone-scope": o.toneScope ?? (o.tone ? toneScope : void 0),
               size: o.size && o.size !== "medium" ? o.size : void 0,
               disabled: o.disabled ? "" : void 0,
               class: optionClassName,
-              style: toneStyle(
-                o.toneSelected,
-                "--radio-tone-source",
-                toneStyle(
-                  o.tone,
-                  "--radio-off-tone-source",
-                  o.toneSelected == null ? toneStyle(o.tone, "--radio-tone-source", optionStyle) : optionStyle
-                )
-              ),
+              style: toneStyle(o.tone, "--radio-tone-source", toneStyle(o.tone, "--radio-off-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, OptionPresentationProps } from '../general_types';
+import type { BaseProps, OptionPresentationProps, ToneScope } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import { type MenuProps } from './Menu';
 import './select-parts.css';
@@ -30,6 +30,9 @@ export interface SelectOption<V extends OptionValue = string> extends OptionPres
     /** Tone for this option's row (label, icon, hint, selected tint, and the
      *  checkbox/radio indicator). A named tone or a custom CSS color. */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Override where this option applies its tone. The Select scope is inherited
+     *  when omitted. */
+    toneScope?: ToneScope;
     /** Tooltip for this option's row — a string or any node. In a `multiple`
      *  select with `selectAll`, a row with no `tooltip` falls back to a default
      *  hint for the Alt/Option-click "select only this" accelerator; set `tooltip`
@@ -185,12 +188,14 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
     round?: boolean | number | string;
     /** Disable the whole select. */
     disabled?: boolean;
-    /** Tone applied to the **selected** row(s) — the whole row takes this tone
-     *  (label, icon, indicator, and the background tint), like passing `tone` to just
-     *  the chosen option. A named tone or a custom CSS color. Most visible with the
-     *  tint-based marks (`indicator` `'none'` / `'check'`); with `'radio'` /
-     *  `'checkbox'` it tones the label + indicator (those modes have no row tint). */
-    toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Default option-row tone. An option's own `tone` wins. A named tone or a
+     *  custom CSS color. Most visible with tint-based marks (`indicator` `'none'` /
+     *  `'check'`); with `'radio'` / `'checkbox'` it also tones the indicator. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply the default row tone in every state, or only to selected rows. An
+     *  option's own `toneScope` wins.
+     *  @defaultValue 'all' */
+    toneScope?: ToneScope;
     /** Add a search field at the top of the menu that filters the options as you
      *  type. `true` uses the built-in matcher — a case-insensitive substring of the
      *  option's **value / label / hint**. Pass a **function** `(option, query) =>

package/dist/components/Select.js

@@ -54,7 +54,8 @@ const Select = (props) => {
     statusIcon,
     round,
     disabled,
-    toneSelected,
+    tone,
+    toneScope,
     filter,
     selectAll = true,
     selectAllLabel = "Select all",
@@ -183,8 +184,8 @@ const Select = (props) => {
         label: custom ? void 0 : highlight(o.label ?? String(o.value), queryRe),
         hint: custom ? void 0 : o.hint ? highlight(o.hint, queryRe) : o.hint,
         icon: custom ? void 0 : o.icon,
-        tone: o.tone,
-        toneSelected,
+        tone: o.tone ?? tone,
+        toneScope: o.toneScope ?? toneScope,
         selected: isSelected(o.value),
         disabled: disabled2 || void 0,
         "data-menu-open": multiple ? "" : void 0,

package/dist/components/SelectFaceted.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from '../general_types';
+import type { BaseProps, ToneScope } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import type { OptionValue, SelectItem, SelectOption } from './Select';
 import { type MenuProps } from './Menu';
@@ -142,10 +142,12 @@ export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
     priority?: 'primary' | 'secondary';
     /** Disable the whole control. */
     disabled?: boolean;
-    /** Tone applied to a selected option row in the facet flyouts (label, selected
-     *  tint, and the check / checkbox indicator). A named tone or a custom CSS
-     *  color, matching `Select`'s `toneSelected`. Defaults to a neutral selection. */
-    toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Default option-row tone in facet flyouts. An option's own `tone` wins. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply the default row tone in every state, or only to selected rows. An
+     * option's own `toneScope` wins.
+     * @defaultValue 'all' */
+    toneScope?: ToneScope;
     /** Adds a search field at the top of the root menu. It searches the options of
      *  every `single` and `multiple` facet in one list. For example, "alice" can
      *  appear under application-defined Assignee and Owner facets. `text` and

package/dist/components/SelectFaceted.js

@@ -37,7 +37,8 @@ const SelectFaceted = (props) => {
     size,
     priority = "secondary",
     disabled,
-    toneSelected,
+    tone,
+    toneScope,
     searchable,
     searchPlaceholder = "Filter\u2026",
     clearable = true,
@@ -124,8 +125,8 @@ const SelectFaceted = (props) => {
       icon: opt.icon,
       label: opt.label ?? String(opt.value),
       hint: opt.hint,
-      tone: opt.tone,
-      toneSelected,
+      tone: opt.tone ?? tone,
+      toneScope: opt.toneScope ?? toneScope,
       disabled: opt.disabled,
       className: optionClassName,
       style: optionStyle,

package/dist/components/Slider.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle, roundStyle, roundAttr, lengthStyle, cssLength } from "../anta_helpers";
+import { neutralToneAttr, toneStyle, roundStyle, roundAttr, lengthStyle, cssLength } from "../anta_helpers";
 const number = (value, fallback) => Number.isFinite(value) ? value : fallback;
 const isStringish = (node) => typeof node === "string" || typeof node === "number";
 const bounds = (min, max) => {
@@ -99,8 +99,8 @@ const Slider = ({
       step,
       name,
       disabled: disabled ? "" : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
-      "thumb-tone": thumbTone && thumbTone !== "neutral" ? thumbTone : void 0,
+      tone: neutralToneAttr(tone),
+      "thumb-tone": neutralToneAttr(thumbTone),
       size: size && size !== "medium" ? size : void 0,
       "track-size": trackSizeValue,
       "thumb-size": thumbSizeValue,

package/dist/components/Steps.css

@@ -1 +1 @@
-@layer anta.components{a-steps{--steps-marker-size: 28px;--steps-icon-size: 16px;--steps-marker-border-width: 1.5px;--steps-marker-rest-border: var(--border-4);--steps-item-gap: 6px;--steps-gap: 4px;--steps-connector-color: var(--border-3);--steps-connector-width: 1px;--steps-complete-connector-color: var(--border-2);--steps-tab-padding-x: 9px;--steps-tab-padding-block: 0px;--steps-hint-leading: 16px;display:flex;flex-direction:column;width:100%;min-width:0}a-steps:has(>a-tabs[size=small]){--steps-marker-size: 24px;--steps-icon-size: 14px;--steps-tab-padding-x: 7px;--steps-hint-leading: 14px}a-steps:has(>a-tabs[size=large]){--steps-marker-size: 32px;--steps-icon-size: 18px;--steps-tab-padding-x: 13px;--steps-hint-leading: 20px}a-tabs[data-steps]{--steps-marker-active-border: var(--border-1);--steps-primary-marker-lightness: .5;--steps-primary-marker-chroma: .02;--steps-primary-marker-fg: #ffffff;--tabs-gap: 0px;align-items:center;width:fit-content;align-self:flex-start;overflow-x:auto;scrollbar-width:thin}a-tabs[data-steps][fill]{width:100%;align-self:stretch;justify-content:space-between}a-tabs[data-steps]>a-tab[tone=brand]{--steps-marker-active-border: var(--border-1-brand)}a-tabs[data-steps]>a-tab[tone=info]{--steps-marker-active-border: var(--border-1-info)}a-tabs[data-steps]>a-tab[tone=success]{--steps-marker-active-border: var(--border-1-success)}a-tabs[data-steps]>a-tab[tone=warning]{--steps-marker-active-border: var(--border-1-warning)}a-tabs[data-steps]>a-tab[tone=critical]{--steps-marker-active-border: var(--border-1-critical)}a-tabs[data-steps]>a-tab[tone=neutral]{--steps-marker-active-border: var(--border-1)}a-tabs[data-steps]>a-tab[tone]:not([tone=""],[tone=neutral]){--steps-primary-marker-chroma: .17}.dark a-tabs[data-steps]{--steps-primary-marker-lightness: .4;--steps-primary-marker-chroma: .015}.dark a-tabs[data-steps]>a-tab[tone]:not([tone=""],[tone=neutral]){--steps-primary-marker-chroma: .16}a-tabs[data-steps]:not([priority=secondary],[priority=tertiary]){--steps-marker-border-width: 2px;--steps-marker-rest-border: var(--border-3);--steps-connector-color: var(--border-3);--steps-connector-width: 2px}a-tabs[data-steps][priority=tertiary]{--steps-marker-size: calc(var(--steps-icon-size) + 4px);--steps-marker-border-width: 0px}a-steps>a-tabs[data-steps]{background:transparent;border-radius:0;box-shadow:none}a-tabs[data-steps]>a-tab{--steps-complete-connector-color: var(--tab-selected-border);--steps-primary-marker-bg: oklch( from var(--tabs-tone-source) var(--steps-primary-marker-lightness) var(--steps-primary-marker-chroma) h );--steps-primary-completed-marker-bg: color-mix( in oklch, var(--steps-primary-marker-bg) 80%, transparent );position:relative;flex:1 1 0;min-width:0;max-width:max-content;padding-block:0;justify-content:flex-start;gap:var(--steps-item-gap);transition:color var(--tab-timing),background-color var(--tab-timing),box-shadow var(--tab-timing)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=brand]){--steps-complete-connector-color: var(--border-2-brand)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=info]){--steps-complete-connector-color: var(--border-2-info)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=success]){--steps-complete-connector-color: var(--border-2-success)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=warning]){--steps-complete-connector-color: var(--border-2-warning)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=critical]){--steps-complete-connector-color: var(--border-2-critical)}a-tabs[data-steps]:not([orientation=vertical])>a-tab:first-child{padding-inline-start:0}a-steps>a-tabs[data-steps][fill]>a-tab:not(:last-child){flex:1 1 0;max-width:none}a-steps>a-tabs[data-steps][fill]>a-tab:last-child{flex:0 1 auto;max-width:max-content}a-steps>a-tabs[data-steps]>a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-steps>a-tabs[data-steps][priority=tertiary]>a-tab:after{border:0}a-step-desc{display:inline-flex;flex:0 1 auto;flex-direction:column;min-width:0;max-width:100%}a-step-desc>a-tab-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}a-step-hint{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tab-rest-tone, var(--text-3));font-size:calc(1em - 2px);font-weight:400;line-height:var(--steps-hint-leading)}a-step-marker{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--steps-marker-size);height:var(--steps-marker-size);box-sizing:border-box;color:var(--text-4);border:var(--steps-marker-border-width) solid var(--steps-marker-rest-border);border-radius:999px;transition:color var(--tab-timing),background-color var(--tab-timing),border-color var(--tab-timing)}a-tabs[data-steps] a-step-marker :is(a-icon,a-loader){--icon-size: var(--steps-icon-size)}a-tabs[data-steps]>a-tab[tone]{--tab-secondary-bg: oklch( from var(--tabs-tone-source) var(--_track-l) var(--_track-c) h / var(--_sec-a) )}a-tabs[data-steps]>a-tab[tone] a-step-marker{color:var(--tab-selected-text)}a-tabs[data-steps]>a-tab:is(:state(selected),[data-step-state=completed]) a-step-marker{border-color:var(--steps-marker-active-border)}a-tabs[data-steps]>a-tab[data-step-state=error]:not(:state(selected)):not([disabled]) a-step-marker{border-color:var(--border-2-critical)}a-tabs[data-steps]:is([priority=secondary],[priority=tertiary])>a-tab[tone]:not([tone=""],[tone=neutral]) a-step-marker{color:var(--tab-fg)}a-tabs[data-steps][priority=secondary] a-tab:state(selected):not([disabled]) a-step-marker{color:var(--tab-selected-text);background-color:var(--tab-secondary-bg);border-color:var(--steps-marker-active-border)}a-tabs[data-steps]:not([priority=secondary],[priority=tertiary]) a-tab:state(selected):not([disabled]) a-step-marker{color:var(--steps-primary-marker-fg);background-color:var(--steps-primary-marker-bg);border-color:var(--steps-primary-marker-bg)}a-tabs[data-steps]:not([priority=secondary],[priority=tertiary]) a-tab[data-step-state=completed]:not(:state(selected)):not([disabled]) a-step-marker{color:var(--steps-primary-marker-fg);background-color:var(--steps-primary-completed-marker-bg);border-color:transparent}a-tabs[data-steps][priority=tertiary] a-tab:state(selected):not([disabled]) a-step-marker{color:var(--tab-selected-text);background-color:transparent;border-color:transparent}a-tabs[data-steps] a-step-marker>a-loader{transition:color var(--tab-timing)}a-tabs[data-steps]:is([priority=secondary],[priority=tertiary]) a-step-marker>a-loader:not([tone=neutral]){color:inherit}a-tabs[data-steps] a-tab:state(selected):not([disabled]) a-step-marker>a-loader{color:inherit}a-tabs[data-steps]:not([orientation=vertical])>a-tab:not(:last-child):before{content:"";order:3;flex:1 1 auto;align-self:center;min-width:calc(var(--steps-marker-size) / 2);height:var(--steps-connector-width);margin-inline-start:calc(1ch - var(--steps-item-gap));margin-inline-end:calc(1ch - 2 * var(--steps-tab-padding-x));background:var(--steps-connector-color);pointer-events:none}a-tabs[data-steps]:not([orientation=vertical])>a-tab[data-step-state=completed]:not(:last-child):before{background:var(--steps-complete-connector-color)}a-tabs[data-steps] a-tab[disabled]{--tab-fg: var(--text-5);opacity:1}a-tabs[data-steps] a-tab[disabled] a-step-marker,a-tabs[data-steps] a-tab[disabled] a-step-marker>a-loader{color:var(--text-5)}a-tabs[data-steps] a-tab[disabled] a-step-hint{color:var(--text-5)}a-steps[data-orientation=vertical]{--steps-content-indent: calc( var(--steps-marker-size) + var(--steps-item-gap) );--steps-vertical-gap: calc(var(--steps-gap) + 4px);display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--steps-vertical-gap)}a-steps[data-orientation=vertical]>a-tabs[orientation=vertical]{display:contents}a-steps[data-orientation=vertical]>a-tabs[orientation=vertical]>a-tab{flex:none;min-width:0;grid-column:1;width:max-content;max-width:100%;padding-inline-start:0}a-steps[data-orientation=vertical] a-tab:not(:last-child):before{content:"";position:absolute;inset-block-start:calc(var(--steps-tab-padding-block) + var(--steps-marker-size));inset-inline-start:calc(var(--steps-marker-size) / 2 - var(--steps-connector-width) / 2);inset-inline-end:auto;width:var(--steps-connector-width);height:calc(100% - var(--steps-marker-size) + var(--steps-vertical-gap));background:var(--steps-connector-color);transform:none;pointer-events:none}a-steps[data-orientation=vertical]>a-tabpanel{grid-column:1;grid-row:var(--steps-panel-row);width:calc(100% - var(--steps-content-indent));margin-inline-start:var(--steps-content-indent)}a-steps[data-orientation=vertical]:has(>a-tabpanel):has(>a-tabs[orientation=vertical]>a-tab:state(selected):not(:last-child)):after{content:"";grid-column:1;grid-row:var(--steps-panel-row);align-self:stretch;justify-self:start;width:var(--steps-connector-width);min-height:var(--steps-marker-size);margin-inline-start:calc(var(--steps-marker-size) / 2 - var(--steps-connector-width) / 2);margin-block-end:calc(-1 * var(--steps-vertical-gap));background:var(--steps-connector-color);pointer-events:none;z-index:1}a-steps[data-orientation=vertical]>a-tabs[data-steps]>a-tab[data-step-state=completed]:not(:last-child):before{background:var(--steps-complete-connector-color)}a-steps[data-orientation=vertical]:has(>a-tabpanel):has(>a-tabs[data-steps][orientation=vertical]>a-tab[data-step-state=completed]:state(selected):not(:last-child)):after{background:var(--steps-complete-connector-color)}@media(forced-colors:active){a-tabs[data-steps][priority=secondary] a-tab:state(selected){background-color:transparent;border:0;box-shadow:none}a-step-marker{color:CanvasText;background-color:Canvas;border-color:CanvasText}a-tabs[data-steps] a-tab:state(selected):not([disabled]) a-step-marker{border-color:Highlight}}}
+@layer anta.components{a-steps{--steps-marker-size: 28px;--steps-icon-size: 16px;--steps-marker-border-width: 1.5px;--steps-marker-rest-border: var(--border-4);--steps-item-gap: 6px;--steps-gap: 4px;--steps-connector-color: var(--border-3);--steps-connector-width: 1px;--steps-complete-connector-color: var(--border-2);--steps-tab-padding-x: 9px;--steps-tab-padding-block: 0px;--steps-hint-leading: 16px;display:flex;flex-direction:column;width:100%;min-width:0}a-steps:has(>a-tabs[size=small]){--steps-marker-size: 24px;--steps-icon-size: 14px;--steps-tab-padding-x: 7px;--steps-hint-leading: 14px}a-steps:has(>a-tabs[size=large]){--steps-marker-size: 32px;--steps-icon-size: 18px;--steps-tab-padding-x: 13px;--steps-hint-leading: 20px}a-tabs[data-steps]{--steps-marker-active-border: var(--border-1);--steps-primary-marker-fg: #ffffff;--tabs-gap: 0px;align-items:center;width:fit-content;align-self:flex-start;overflow-x:auto;scrollbar-width:thin}a-tabs[data-steps][fill]{width:100%;align-self:stretch;justify-content:space-between}a-tabs[data-steps]>a-tab[tone=brand]{--steps-marker-active-border: var(--border-1-brand)}a-tabs[data-steps]>a-tab[tone=info]{--steps-marker-active-border: var(--border-1-info)}a-tabs[data-steps]>a-tab[tone=success]{--steps-marker-active-border: var(--border-1-success)}a-tabs[data-steps]>a-tab[tone=warning]{--steps-marker-active-border: var(--border-1-warning)}a-tabs[data-steps]>a-tab[tone=critical]{--steps-marker-active-border: var(--border-1-critical)}a-tabs[data-steps]>a-tab[tone=neutral]{--steps-marker-active-border: var(--border-1)}a-tabs[data-steps]>a-tab[tone]:not([tone=""],[tone=neutral]){--steps-primary-marker-bg: light-dark( oklch(from var(--tabs-tone-source) .5 .17 h), oklch(from var(--tabs-tone-source) .4 .16 h) )}a-tabs[data-steps]:not([priority=secondary],[priority=tertiary]){--steps-marker-border-width: 2px;--steps-marker-rest-border: var(--border-3);--steps-connector-color: var(--border-3);--steps-connector-width: 2px}a-tabs[data-steps][priority=tertiary]{--steps-marker-size: calc(var(--steps-icon-size) + 4px);--steps-marker-border-width: 0px}a-steps>a-tabs[data-steps]{background:transparent;border-radius:0;box-shadow:none}a-tabs[data-steps]>a-tab{--steps-complete-connector-color: var(--tab-selected-border);--steps-primary-marker-bg: light-dark( oklch(from var(--tabs-tone-source) .5 .02 h), oklch(from var(--tabs-tone-source) .4 .015 h) );--steps-primary-completed-marker-bg: color-mix( in oklch, var(--steps-primary-marker-bg) 80%, transparent );position:relative;flex:1 1 0;min-width:0;max-width:max-content;padding-block:0;justify-content:flex-start;gap:var(--steps-item-gap);transition:color var(--tab-timing),background-color var(--tab-timing),box-shadow var(--tab-timing)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=brand]){--steps-complete-connector-color: var(--border-2-brand)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=info]){--steps-complete-connector-color: var(--border-2-info)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=success]){--steps-complete-connector-color: var(--border-2-success)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=warning]){--steps-complete-connector-color: var(--border-2-warning)}a-steps[data-orientation=vertical]:has(>a-tabs[data-steps]>a-tab:state(selected)[tone=critical]){--steps-complete-connector-color: var(--border-2-critical)}a-tabs[data-steps]:not([orientation=vertical])>a-tab:first-child{padding-inline-start:0}a-steps>a-tabs[data-steps][fill]>a-tab:not(:last-child){flex:1 1 0;max-width:none}a-steps>a-tabs[data-steps][fill]>a-tab:last-child{flex:0 1 auto;max-width:max-content}a-steps>a-tabs[data-steps]>a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-steps>a-tabs[data-steps][priority=tertiary]>a-tab:after{border:0}a-step-desc{display:inline-flex;flex:0 1 auto;flex-direction:column;min-width:0;max-width:100%}a-step-desc>a-tab-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}a-step-hint{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tab-rest-tone, var(--text-3));font-size:calc(1em - 2px);font-weight:400;line-height:var(--steps-hint-leading)}a-step-marker{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--steps-marker-size);height:var(--steps-marker-size);box-sizing:border-box;color:var(--text-4);border:var(--steps-marker-border-width) solid var(--steps-marker-rest-border);border-radius:999px;transition:color var(--tab-timing),background-color var(--tab-timing),border-color var(--tab-timing)}a-tabs[data-steps] a-step-marker :is(a-icon,a-loader){--icon-size: var(--steps-icon-size)}a-tabs[data-steps]>a-tab[tone]{--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .03), oklch(from var(--tabs-tone-source) .8 .008 h / .08) )}a-tabs[data-steps]>a-tab[tone]:not([tone=""],[tone=neutral]){--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .03), oklch(from var(--tabs-tone-source) .8 .12 h / .08) )}a-tabs[data-steps]>a-tab[tone] a-step-marker{color:var(--tab-selected-text)}a-tabs[data-steps]>a-tab:is(:state(selected),[data-step-state=completed]) a-step-marker{border-color:var(--steps-marker-active-border)}a-tabs[data-steps]>a-tab[data-step-state=error]:not(:state(selected)):not([disabled]) a-step-marker{border-color:var(--border-2-critical)}a-tabs[data-steps]:is([priority=secondary],[priority=tertiary])>a-tab[tone]:not([tone=""],[tone=neutral]) a-step-marker{color:var(--tab-fg)}a-tabs[data-steps][priority=secondary] a-tab:state(selected):not([disabled]) a-step-marker{color:var(--tab-selected-text);background-color:var(--tab-secondary-bg);border-color:var(--steps-marker-active-border)}a-tabs[data-steps]:not([priority=secondary],[priority=tertiary]) a-tab:state(selected):not([disabled]) a-step-marker{color:var(--steps-primary-marker-fg);background-color:var(--steps-primary-marker-bg);border-color:var(--steps-primary-marker-bg)}a-tabs[data-steps]:not([priority=secondary],[priority=tertiary]) a-tab[data-step-state=completed]:not(:state(selected)):not([disabled]) a-step-marker{color:var(--steps-primary-marker-fg);background-color:var(--steps-primary-completed-marker-bg);border-color:transparent}a-tabs[data-steps][priority=tertiary] a-tab:state(selected):not([disabled]) a-step-marker{color:var(--tab-selected-text);background-color:transparent;border-color:transparent}a-tabs[data-steps] a-step-marker>a-loader{transition:color var(--tab-timing)}a-tabs[data-steps]:is([priority=secondary],[priority=tertiary]) a-step-marker>a-loader:not([tone=neutral]){color:inherit}a-tabs[data-steps] a-tab:state(selected):not([disabled]) a-step-marker>a-loader{color:inherit}a-tabs[data-steps]:not([orientation=vertical])>a-tab:not(:last-child):before{content:"";order:3;flex:1 1 auto;align-self:center;min-width:calc(var(--steps-marker-size) / 2);height:var(--steps-connector-width);margin-inline-start:calc(1ch - var(--steps-item-gap));margin-inline-end:calc(1ch - 2 * var(--steps-tab-padding-x));background:var(--steps-connector-color);pointer-events:none}a-tabs[data-steps]:not([orientation=vertical])>a-tab[data-step-state=completed]:not(:last-child):before{background:var(--steps-complete-connector-color)}a-tabs[data-steps] a-tab[disabled]{--tab-fg: var(--text-5);opacity:1}a-tabs[data-steps] a-tab[disabled] a-step-marker,a-tabs[data-steps] a-tab[disabled] a-step-marker>a-loader{color:var(--text-5)}a-tabs[data-steps] a-tab[disabled] a-step-hint{color:var(--text-5)}a-steps[data-orientation=vertical]{--steps-content-indent: calc( var(--steps-marker-size) + var(--steps-item-gap) );--steps-vertical-gap: calc(var(--steps-gap) + 4px);display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--steps-vertical-gap)}a-steps[data-orientation=vertical]>a-tabs[orientation=vertical]{display:contents}a-steps[data-orientation=vertical]>a-tabs[orientation=vertical]>a-tab{flex:none;min-width:0;grid-column:1;width:max-content;max-width:100%;padding-inline-start:0}a-steps[data-orientation=vertical] a-tab:not(:last-child):before{content:"";position:absolute;inset-block-start:calc(var(--steps-tab-padding-block) + var(--steps-marker-size));inset-inline-start:calc(var(--steps-marker-size) / 2 - var(--steps-connector-width) / 2);inset-inline-end:auto;width:var(--steps-connector-width);height:calc(100% - var(--steps-marker-size) + var(--steps-vertical-gap));background:var(--steps-connector-color);transform:none;pointer-events:none}a-steps[data-orientation=vertical]>a-tabpanel{grid-column:1;grid-row:var(--steps-panel-row);width:calc(100% - var(--steps-content-indent));margin-inline-start:var(--steps-content-indent)}a-steps[data-orientation=vertical]:has(>a-tabpanel):has(>a-tabs[orientation=vertical]>a-tab:state(selected):not(:last-child)):after{content:"";grid-column:1;grid-row:var(--steps-panel-row);align-self:stretch;justify-self:start;width:var(--steps-connector-width);min-height:var(--steps-marker-size);margin-inline-start:calc(var(--steps-marker-size) / 2 - var(--steps-connector-width) / 2);margin-block-end:calc(-1 * var(--steps-vertical-gap));background:var(--steps-connector-color);pointer-events:none;z-index:1}a-steps[data-orientation=vertical]>a-tabs[data-steps]>a-tab[data-step-state=completed]:not(:last-child):before{background:var(--steps-complete-connector-color)}a-steps[data-orientation=vertical]:has(>a-tabpanel):has(>a-tabs[data-steps][orientation=vertical]>a-tab[data-step-state=completed]:state(selected):not(:last-child)):after{background:var(--steps-complete-connector-color)}@media(forced-colors:active){a-tabs[data-steps][priority=secondary] a-tab:state(selected){background-color:transparent;border:0;box-shadow:none}a-step-marker{color:CanvasText;background-color:Canvas;border-color:CanvasText}a-tabs[data-steps] a-tab:state(selected):not([disabled]) a-step-marker{border-color:Highlight}}}

package/dist/components/Switch.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from "../general_types";
+import type { BaseProps, ToneScope } from "../general_types";
 type SwitchState = 'checked' | 'unchecked';
 type StateDetail = {
     next: SwitchState;
@@ -33,14 +33,13 @@ export interface SwitchProps extends BaseProps {
      * @defaultValue "on" */
     value?: string;
     /** Color of the track and thumb. A tinted tone also colors the unchecked
-     * track border and thumb; use `toneSelected` to color only the checked track.
+     * track border and thumb; use `toneScope="selected"` to color only the checked track.
      * @defaultValue 'brand' */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but applies only while the switch is checked. The unchecked
-     * track and thumb stay neutral. If both are set, `tone` colors the unchecked
-     * state and `toneSelected` colors the checked track.
-     * @defaultValue 'brand' */
-    toneSelected?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply `tone` to every state, or only while checked so the unchecked track
+     * and thumb stay neutral.
+     * @defaultValue 'all' */
+    toneScope?: ToneScope;
     /** Size variant. small=26×16px, medium=30×18px, large=34×20px.
      * @defaultValue 'medium' */
     size?: 'small' | 'medium' | 'large';
@@ -64,5 +63,5 @@ export interface SwitchProps extends BaseProps {
  * form-associated and can be controlled with `checked` or left uncontrolled with
  * `defaultChecked`. Requires `@antadesign/anta/elements` on the client.
  */
-export declare const Switch: ({ checked, defaultChecked, disabled, tone, toneSelected, size, round, labelPosition, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: SwitchProps) => any;
+export declare const Switch: ({ checked, defaultChecked, disabled, tone, toneScope, size, round, labelPosition, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: SwitchProps) => any;
 export {};

package/dist/components/Switch.js

@@ -10,7 +10,7 @@ const Switch = ({
   defaultChecked,
   disabled,
   tone,
-  toneSelected,
+  toneScope,
   size,
   round,
   labelPosition,
@@ -28,15 +28,7 @@ const Switch = ({
   const computedStyle = roundStyle(
     round,
     "--switch-round",
-    toneStyle(
-      toneSelected,
-      "--switch-tone-source",
-      toneStyle(
-        tone,
-        "--switch-off-tone-source",
-        toneSelected == null ? toneStyle(tone, "--switch-tone-source", style) : style
-      )
-    )
+    toneStyle(tone, "--switch-tone-source", toneStyle(tone, "--switch-off-tone-source", style))
   );
   const explicitAriaLabel = rest["aria-label"];
   const ariaLabel = (typeof explicitAriaLabel === "string" ? explicitAriaLabel : void 0) ?? label ?? (typeof children === "string" ? children : void 0);
@@ -66,7 +58,7 @@ const Switch = ({
       "default-state": defaultStateAttr,
       disabled: disabled ? "" : void 0,
       tone,
-      "tone-selected": toneSelected,
+      "tone-scope": toneScope && toneScope !== "all" ? toneScope : void 0,
       size: size && size !== "medium" ? size : void 0,
       round: roundAttr(round),
       "label-position": labelPosition && labelPosition !== "end" ? labelPosition : void 0,

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, optionPresentationAttrs, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, optionPresentationAttrs, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
 import { Tooltip } from "./Tooltip";
 const Tabs = ({
   children,
@@ -59,7 +59,7 @@ const Tabs = ({
       state: controlled ? value : void 0,
       "default-state": !controlled ? defaultValue : void 0,
       priority: priority && priority !== "primary" ? priority : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
+      tone: neutralToneAttr(tone),
       size: size && size !== "medium" ? size : void 0,
       orientation: vertical ? "vertical" : void 0,
       fill: fill ? "" : void 0,

package/dist/components/Tag.d.ts

@@ -28,8 +28,7 @@ export interface TagProps extends BaseProps {
      *  default — both render identically and emit no DOM attribute.
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';
-    /** Render in all-caps instead of the default normal (mixed) case
-     *  (uppercase tracks wider than the default body-text letter-spacing). */
+    /** Render in all-caps instead of the default normal (mixed) case. */
     allcaps?: boolean;
     /** Leading icon shape. Sits flush before the label, scaled to the pill. */
     icon?: IconShape;
@@ -59,8 +58,8 @@ export interface TagProps extends BaseProps {
  *   at 20px), so text is never clipped and the padding tokens can be
  *   retuned freely. An edge icon trims ~2px off its side's padding
  *   (optical), and icons scale to `--tag-icon-size`.
- * - Color comes from the theme-aware semantic tokens, so named tones need
- *   no `.dark` rules; the hairline border and the segment divider both
+ * - Color comes from the theme-aware semantic tokens and `light-dark()`; the
+ *   hairline border and the segment divider both
  *   derive from `--tag-text`, so every tone gets a matching edge. A lone
  *   `label` is dropped into `<a-tag-value>` by this wrapper so it keeps the
  *   default weight; `<a-tag-label>` only renders as the bold key before a
@@ -69,13 +68,12 @@ export interface TagProps extends BaseProps {
  *   elements) get a hairline left border per segment after the first; the
  *   flex `gap` sits left of the border and `padding-left` balances it.
  * - Custom tones (any non-named `tone`) keep the source hue with
- *   lightness/chroma pinned via oklch relative color; the `--_tag-*` knobs
- *   are the only numbers to tune and the `.dark` block re-tunes them. The
+ *   lightness/chroma pinned via oklch relative color. `light-dark()` selects
+ *   the matching ramp from the nearest inherited color scheme. The
  *   wrapper writes `--tag-tone-source` inline; a typed `attr()` fallback
  *   picks up raw `<a-tag tone="…">` on Chrome 133+/Safari 18.2+.
- * - `allcaps` switches on the uppercase transform and widens tracking to
- *   0.08ch (the default mixed case uses the body-text 0.02ch); tabular
- *   figures + `ss05` stay on. Each size steps down 1px under `allcaps`
+ * - `allcaps` switches on the uppercase transform; tabular figures stay on.
+ *   Each size steps down 1px under `allcaps`
  *   (uppercase reads larger than mixed case at the same px), with height
  *   unchanged.
  *

package/dist/components/Tag.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
+import { neutralToneAttr, toneStyle } from "../anta_helpers";
 import { Icon } from "./Icon";
 const Tag = ({
   icon,
@@ -15,7 +15,7 @@ const Tag = ({
   children,
   ...rest
 }) => {
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   const computedStyle = toneStyle(toneAttr, "--tag-tone-source", style);
   const hasValue = value != null;
   const isIconOnly = icon != null && label == null && value == null && children == null && iconTrailing == null;

package/dist/components/Text.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
+import { neutralToneAttr, 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;
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   const computedStyle = toneStyle(
     toneAttr,
     "--text-tone-source",

package/dist/components/Title.js

@@ -1,7 +1,7 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
+import { neutralToneAttr, toneStyle } from "../anta_helpers";
 const Title = ({ level = 2, priority, tone, className, style, children, ...rest }) => {
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   return /* @__PURE__ */ jsx(
     "a-title",
     {

package/dist/components/capture-props.d.ts

@@ -0,0 +1,30 @@
+import type { CaptureInputDirections, CapturePan, CapturePointerCapture, CaptureWheelSettle } from '../capture-types';
+/** The empty string enables every direction; `none` keeps an explicit empty set. */
+export declare function directionAttribute(value: CaptureInputDirections | undefined): string | undefined;
+export declare function wheelSettleAttributes(value: CaptureWheelSettle | undefined): {
+    'wheel-delay': number | undefined;
+    'wheel-tolerance': number | undefined;
+    'wheel-reset-on-move': "" | undefined;
+} | undefined;
+export declare function pointerCaptureAttributes(value: boolean | CapturePointerCapture | undefined): {
+    'pointer-capture': string;
+    'pointer-buttons'?: undefined;
+    'pointer-threshold'?: undefined;
+    'pointer-modifier'?: undefined;
+    'pointer-include-interactive'?: undefined;
+} | {
+    'pointer-capture': string;
+    'pointer-buttons': string | undefined;
+    'pointer-threshold': number | undefined;
+    'pointer-modifier': import("@antadesign/anta").CaptureInputModifier | undefined;
+    'pointer-include-interactive': "" | undefined;
+} | undefined;
+export declare function panAttributes(value: boolean | CapturePan | undefined): {
+    pan: "both" | "x" | "y";
+    'pan-pointer-types': string | undefined;
+    'pan-threshold': number | undefined;
+    'pan-directions': string | undefined;
+    'pan-inertia': "" | undefined;
+    'pan-time-constant': number | undefined;
+    'pan-min-velocity': number | undefined;
+} | undefined;

package/dist/components/capture-props.js

@@ -0,0 +1,44 @@
+function directionAttribute(value) {
+  if (value === void 0 || value === false) return void 0;
+  if (value === true) return "";
+  return ["up", "down", "left", "right"].filter((direction) => value[direction]).join(" ") || "none";
+}
+function wheelSettleAttributes(value) {
+  if (!value) return void 0;
+  return {
+    "wheel-delay": value.delay,
+    "wheel-tolerance": value.tolerance,
+    "wheel-reset-on-move": value.resetOnMove ? "" : void 0
+  };
+}
+function pointerCaptureAttributes(value) {
+  if (!value) return void 0;
+  if (value === true) return { "pointer-capture": "" };
+  return {
+    "pointer-capture": value.pointerTypes?.join(" ") || (value.pointerTypes ? "none" : ""),
+    "pointer-buttons": value.buttons?.join(" ") || (value.buttons ? "none" : void 0),
+    "pointer-threshold": value.threshold,
+    "pointer-modifier": value.modifier,
+    "pointer-include-interactive": value.includeInteractive ? "" : void 0
+  };
+}
+function panAttributes(value) {
+  if (!value) return void 0;
+  const options = value === true ? {} : value;
+  const inertia = typeof options.inertia === "object" ? options.inertia : void 0;
+  return {
+    pan: options.axis ?? "both",
+    "pan-pointer-types": options.pointerTypes?.join(" ") || (options.pointerTypes ? "none" : void 0),
+    "pan-threshold": options.threshold,
+    "pan-directions": options.directions === false ? "none" : directionAttribute(options.directions),
+    "pan-inertia": options.inertia ? "" : void 0,
+    "pan-time-constant": inertia?.timeConstant,
+    "pan-min-velocity": inertia?.minVelocity
+  };
+}
+export {
+  directionAttribute,
+  panAttributes,
+  pointerCaptureAttributes,
+  wheelSettleAttributes
+};

package/dist/elements/a-avatar.css

@@ -1 +1 @@
-@layer anta.components{a-avatar{--avatar-size: 44px;--avatar-radius: 22%;--avatar-placeholder-bg: var(--bg-3);--avatar-badge-ratio: .24;--avatar-badge-size: calc(var(--avatar-size) * var(--avatar-badge-ratio));--avatar-badge-inset: 0px;--avatar-badge-gap: 2px;--avatar-badge-mask: none;--avatar-badge-tone-source: var(--anta-seed-neutral);--avatar-badge-chroma: .17;--avatar-badge-color: oklch(from var(--avatar-badge-tone-source) .62 var(--avatar-badge-chroma) h);display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);vertical-align:middle}a-avatar[round]{--avatar-radius: var(--avatar-round, 50%);--avatar-badge-inset: calc(var(--avatar-size) * .03);@supports (border-radius: attr(probe type(<length>),1px)){--avatar-round: attr(round type(<length>))}}a-avatar[size=small]{--avatar-size: 32px;--avatar-badge-gap: 1.5px}a-avatar[size=large]{--avatar-size: 64px;--avatar-badge-gap: 2.5px}a-avatar[badge]:not([badge=""],[badge=none]){--avatar-badge-mask: radial-gradient( circle calc(var(--avatar-badge-size) / 2 + var(--avatar-badge-gap)) at calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2) calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2), transparent 99%, #000 100% )}a-avatar:not(:defined){display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:var(--avatar-radius);background:var(--avatar-placeholder-bg);vertical-align:middle}a-avatar[badge=neutral]{--avatar-badge-chroma: .005}a-avatar[badge=brand]{--avatar-badge-tone-source: var(--anta-seed-brand)}a-avatar[badge=info]{--avatar-badge-tone-source: var(--anta-seed-info)}a-avatar[badge=success]{--avatar-badge-tone-source: var(--anta-seed-success)}a-avatar[badge=warning]{--avatar-badge-tone-source: var(--anta-seed-warning)}a-avatar[badge=critical]{--avatar-badge-tone-source: var(--anta-seed-critical)}@supports (color: attr(badge type(<color>),transparent)){a-avatar[badge]:not([badge=""],[badge=neutral],[badge=brand],[badge=info],[badge=success],[badge=warning],[badge=critical]){--avatar-badge-tone-source: attr(badge type(<color>), transparent)}}.dark a-avatar{--avatar-badge-color: oklch(from var(--avatar-badge-tone-source) .68 var(--avatar-badge-chroma) h)}.dark a-avatar[badge=neutral]{--avatar-badge-chroma: .008}}
+@layer anta.components{a-avatar{--avatar-size: 44px;--avatar-radius: 22%;--avatar-placeholder-bg: var(--bg-3);--avatar-badge-ratio: .24;--avatar-badge-size: calc(var(--avatar-size) * var(--avatar-badge-ratio));--avatar-badge-inset: 0px;--avatar-badge-gap: 2px;--avatar-badge-mask: none;--avatar-badge-tone-source: var(--anta-seed-neutral);--avatar-badge-chroma: .17;--avatar-badge-color: light-dark( oklch(from var(--avatar-badge-tone-source) .62 var(--avatar-badge-chroma) h), oklch(from var(--avatar-badge-tone-source) .68 var(--avatar-badge-chroma) h) );display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);vertical-align:middle}a-avatar[round]{--avatar-radius: var(--avatar-round, 50%);--avatar-badge-inset: calc(var(--avatar-size) * .03);@supports (border-radius: attr(probe type(<length>),1px)){--avatar-round: attr(round type(<length>))}}a-avatar[size=small]{--avatar-size: 32px;--avatar-badge-gap: 1.5px}a-avatar[size=large]{--avatar-size: 64px;--avatar-badge-gap: 2.5px}a-avatar[badge]:not([badge=""],[badge=none]){--avatar-badge-mask: radial-gradient( circle calc(var(--avatar-badge-size) / 2 + var(--avatar-badge-gap)) at calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2) calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2), transparent 99%, #000 100% )}a-avatar:not(:defined){display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:var(--avatar-radius);background:var(--avatar-placeholder-bg);vertical-align:middle}a-avatar[badge=neutral]{--avatar-badge-chroma: .005}a-avatar[badge=brand]{--avatar-badge-tone-source: var(--anta-seed-brand)}a-avatar[badge=info]{--avatar-badge-tone-source: var(--anta-seed-info)}a-avatar[badge=success]{--avatar-badge-tone-source: var(--anta-seed-success)}a-avatar[badge=warning]{--avatar-badge-tone-source: var(--anta-seed-warning)}a-avatar[badge=critical]{--avatar-badge-tone-source: var(--anta-seed-critical)}@supports (color: attr(badge type(<color>),transparent)){a-avatar[badge]:not([badge=""],[badge=neutral],[badge=brand],[badge=info],[badge=success],[badge=warning],[badge=critical]){--avatar-badge-tone-source: attr(badge type(<color>), transparent)}}}

package/dist/elements/a-banner.css

@@ -1 +1 @@
-@layer anta.components{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding-block:6px;padding-inline:16px 48px;color:var(--banner-text);background:var(--banner-bg);border:0 solid var(--banner-border);border-radius:0;overflow:clip;overflow-clip-margin:3px;interpolate-size:allow-keywords;transition:opacity .16s ease,block-size .2s ease,padding-block .2s ease,border-block-width .2s ease,display .2s allow-discrete}a-banner[align=center]{justify-content:center;padding-inline:48px}a-banner[round]{border-radius:var(--banner-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--banner-round: attr(round type(<length>))}}a-banner [slot=close] a-button,a-banner a-button[slot=close]{height:100%;width:40px}a-banner-message{font-size:14px;line-height:20px;font-weight:475;text-align:start}a-banner[align=center] a-banner-message{text-align:center}a-banner[tone=brand]{--banner-bg: var(--bg-4-brand);--banner-border: var(--border-4-brand);--banner-text: var(--text-2-brand)}a-banner[tone=info]{--banner-bg: var(--bg-4-info);--banner-border: var(--border-4-info);--banner-text: var(--text-2-info)}a-banner[tone=success]{--banner-bg: var(--bg-4-success);--banner-border: var(--border-4-success);--banner-text: var(--text-2-success)}a-banner[tone=warning]{--banner-bg: var(--bg-4-warning);--banner-border: var(--border-4-warning);--banner-text: var(--text-2-warning)}a-banner[tone=critical]{--banner-bg: var(--bg-4-critical);--banner-border: var(--border-4-critical);--banner-text: var(--text-2-critical)}a-banner[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--banner-tone-source: currentColor;--banner-text: oklch(from var(--banner-tone-source) .5 .125 h);--banner-bg: oklch(from var(--banner-tone-source) .955 .02 h);--banner-border: oklch(from var(--banner-tone-source) .9 .04 h);.dark &{--banner-text: oklch(from var(--banner-tone-source) .77 .11 h);--banner-bg: oklch(from var(--banner-tone-source) .185 .05 h);--banner-border: oklch(from var(--banner-tone-source) .26 .06 h)}@supports (color: attr(probe type(<color>),red)){--banner-tone-source: attr(tone type(<color>), currentColor)}}a-banner:not(:defined){opacity:0}a-banner[state=closed],a-banner[default-state=closed],a-banner:state(closed){display:none;block-size:0;min-block-size:0;padding-block:0;border-block-width:0;opacity:0}@media(forced-colors:active){a-banner{border-width:1px;border-color:CanvasText}}@media(prefers-reduced-motion:reduce){a-banner{transition:none}}}
+@layer anta.components{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding-block:6px;padding-inline:16px 48px;color:var(--banner-text);background:var(--banner-bg);border:0 solid var(--banner-border);border-radius:0;overflow:clip;overflow-clip-margin:3px;interpolate-size:allow-keywords;transition:opacity .16s ease,block-size .2s ease,padding-block .2s ease,border-block-width .2s ease,display .2s allow-discrete}a-banner[align=center]{justify-content:center;padding-inline:48px}a-banner[round]{border-radius:var(--banner-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--banner-round: attr(round type(<length>))}}a-banner [slot=close] a-button,a-banner a-button[slot=close]{height:100%;width:40px}a-banner-message{font-size:14px;line-height:20px;font-weight:475;text-align:start}a-banner[align=center] a-banner-message{text-align:center}a-banner[tone=brand]{--banner-bg: var(--bg-4-brand);--banner-border: var(--border-4-brand);--banner-text: var(--text-2-brand)}a-banner[tone=info]{--banner-bg: var(--bg-4-info);--banner-border: var(--border-4-info);--banner-text: var(--text-2-info)}a-banner[tone=success]{--banner-bg: var(--bg-4-success);--banner-border: var(--border-4-success);--banner-text: var(--text-2-success)}a-banner[tone=warning]{--banner-bg: var(--bg-4-warning);--banner-border: var(--border-4-warning);--banner-text: var(--text-2-warning)}a-banner[tone=critical]{--banner-bg: var(--bg-4-critical);--banner-border: var(--border-4-critical);--banner-text: var(--text-2-critical)}a-banner[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--banner-tone-source: currentColor;--banner-text: light-dark( oklch(from var(--banner-tone-source) .5 .125 h), oklch(from var(--banner-tone-source) .77 .11 h) );--banner-bg: light-dark( oklch(from var(--banner-tone-source) .955 .02 h), oklch(from var(--banner-tone-source) .185 .05 h) );--banner-border: light-dark( oklch(from var(--banner-tone-source) .9 .04 h), oklch(from var(--banner-tone-source) .26 .06 h) );@supports (color: attr(probe type(<color>),red)){--banner-tone-source: attr(tone type(<color>), currentColor)}}a-banner:not(:defined){opacity:0}a-banner[state=closed],a-banner[default-state=closed],a-banner:state(closed){display:none;block-size:0;min-block-size:0;padding-block:0;border-block-width:0;opacity:0}@media(forced-colors:active){a-banner{border-width:1px;border-color:CanvasText}}@media(prefers-reduced-motion:reduce){a-banner{transition:none}}}

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

@@ -25,7 +25,7 @@ export declare class ABoxElement extends HTMLElementBase {
     static observedAttributes: string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(): void;
+    attributeChangedCallback(name: string): void;
     /** A fresh measurement snapshot. For notifications, prefer `measurechange`:
      * it batches browser observers and includes the field-level delta. */
     get measurement(): BoxMeasurement;

package/dist/elements/a-box.js

@@ -119,8 +119,15 @@ class BoxWindowStore {
     this.#classObserver?.disconnect();
     this.#classObserver = void 0;
   }
+  /* Only the store the map currently points at may remove that entry. A box
+     that was connected while its store went empty keeps a direct reference to
+     it, so an evicted store can be re-subscribed and later empty again — by
+     which time the map holds a live store with its own document observer.
+     Deleting blind would drop that live store and leave its observer running
+     while the next connect built a second one. */
   #collect() {
-    if (this.#contextBoxes.size === 0 && this.#observedBoxes.size === 0) stores.delete(this.view);
+    if (this.#contextBoxes.size > 0 || this.#observedBoxes.size > 0) return;
+    if (stores.get(this.view) === this) stores.delete(this.view);
   }
   /* Only `dark` and `light` change what a box reports. Every other class toggle
      on the page — a route class, a scroll lock, a theme-unrelated modifier —
@@ -292,8 +299,9 @@ class ABoxElement extends HTMLElementBase {
      connectedCallback, when there is no store yet. Syncing then would flip the
      started flags while `this.#store?.subscribeContext` silently did nothing,
      and the later connect would see the flags already set and skip it. */
-  attributeChangedCallback() {
-    if (this.#store) this.#sync();
+  attributeChangedCallback(name) {
+    if (!this.#store) return;
+    if (name === "fade" || name === "observe") this.#sync();
   }
   /** A fresh measurement snapshot. For notifications, prefer `measurechange`:
    * it batches browser observers and includes the field-level delta. */