@antadesign/anta 0.3.27 → 0.3.28

package/dist/components/Banner.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 import { Button } from "./Button";
 const Banner = ({
   message,
@@ -29,7 +29,7 @@ const Banner = ({
     {
       state: controlled ? dismissed ? "closed" : "open" : void 0,
       "default-state": !controlled ? defaultDismissed ? "closed" : "open" : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
+      tone: neutralToneAttr(tone),
       align: align === "center" ? "center" : void 0,
       round: roundAttr(round),
       role,

package/dist/components/Button.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
+import { neutralToneAttr, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
 const Button = ({
   priority,
   tone,
@@ -27,7 +27,7 @@ const Button = ({
   children,
   ...rest
 }) => {
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   const unavailable = disabled || loading;
   const computedStyle = roundStyle(round, "--button-round", toneStyle(toneAttr, "--button-tone-source", style));
   const isIconOnly = icon != null && label == null && children == null && iconTrailing == null;

package/dist/components/Card.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 import { Title } from "./Title";
 import { Text } from "./Text";
 import { Icon } from "./Icon";
@@ -25,7 +25,7 @@ const Card = ({
   children,
   ...rest
 }) => {
-  const toneAttr = tone || void 0;
+  const toneAttr = neutralToneAttr(tone);
   const computedStyle = roundStyle(
     round,
     "--card-round",

package/dist/components/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from "../general_types";
+import type { BaseProps, ToneScope } from "../general_types";
 /** The wrapper-level checked value: a boolean for the binary axis, the string
  *  `'indeterminate'` for the third state. Mirrors Radix's `Checkbox.Root`. */
 export type CheckboxValue = boolean | 'indeterminate';
@@ -51,21 +51,20 @@ export interface CheckboxProps extends BaseProps {
     /** Value submitted with the form when checked — like a native checkbox.
      *  @defaultValue "on" */
     value?: string;
-    /** Color of the **mark** in every state — the checked-box fill *and* the
-     *  unselected box border. A named tone or any literal CSS color (`'#ff1493'`,
+    /** Color of the **mark**. In the default `all` scope this colors the checked-box
+     *  fill and unselected box border. A named tone or any literal CSS color (`'#ff1493'`,
      *  `'rebeccapurple'`) for a one-off custom tone. Named tones track light/dark mode
      *  automatically; a custom color keeps its hue + chroma and pins lightness to the
-     *  fill curve. Use `toneSelected` instead to tone only the checked mark and leave
+     *  fill curve. Set `toneScope="selected"` to tone only the checked mark and leave
      *  the empty box neutral. The label + hint stay neutral — recolor them in plain
      *  CSS via the theme-aware `--text-N-{tone}` tokens.
      *  @defaultValue 'neutral' */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but colored onto the **checked mark only** — the empty box stays
-     *  neutral grey until it's checked. Prefer this over `tone` when a resting tinted
-     *  border would read as a validation state. Same value set as `tone`; if both are
-     *  set, `tone` governs the off-state border and `toneSelected` the checked fill.
-     *  @defaultValue 'neutral' */
-    toneSelected?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply `tone` to every state, or only while checked so the empty box stays
+     *  neutral. `selected` is useful when a tinted resting border would read as a
+     *  validation state.
+     *  @defaultValue 'all' */
+    toneScope?: ToneScope;
     /** Size variant. small=14px, medium=16px, large=18px box.
      *  @defaultValue 'medium' */
     size?: 'small' | 'medium' | 'large';
@@ -98,5 +97,5 @@ export interface CheckboxProps extends BaseProps {
  * <Checkbox defaultChecked label="Remember me" hint="On this device" />
  * ```
  */
-export declare const Checkbox: ({ checked, defaultChecked, disabled, tone, toneSelected, size, round, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: CheckboxProps) => any;
+export declare const Checkbox: ({ checked, defaultChecked, disabled, tone, toneScope, size, round, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: CheckboxProps) => any;
 export {};

package/dist/components/Checkbox.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 const valueToState = (v) => v === "indeterminate" ? "indeterminate" : v ? "checked" : "unchecked";
 const stateToValue = (s) => s === "indeterminate" ? "indeterminate" : s === "checked";
 const checkboxAttrsOf = (el) => ({
@@ -13,7 +13,7 @@ const Checkbox = ({
   defaultChecked,
   disabled,
   tone,
-  toneSelected,
+  toneScope,
   size,
   round,
   onStateChange,
@@ -30,15 +30,7 @@ const Checkbox = ({
   const computedStyle = roundStyle(
     round,
     "--checkbox-round",
-    toneStyle(
-      toneSelected,
-      "--checkbox-tone-source",
-      toneStyle(
-        tone,
-        "--checkbox-off-tone-source",
-        toneSelected == null ? toneStyle(tone, "--checkbox-tone-source", style) : style
-      )
-    )
+    toneStyle(tone, "--checkbox-tone-source", toneStyle(tone, "--checkbox-off-tone-source", style))
   );
   const explicitAriaLabel = rest["aria-label"];
   const ariaLabel = (typeof explicitAriaLabel === "string" ? explicitAriaLabel : void 0) ?? label ?? (typeof children === "string" ? children : void 0);
@@ -67,8 +59,8 @@ const Checkbox = ({
       state: stateAttr,
       "default-state": defaultStateAttr,
       disabled: disabled ? "" : 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,
       round: roundAttr(round),
       tabIndex: disabled ? -1 : tabIndex ?? 0,

package/dist/components/Expander.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 const Expander = ({
   title,
   level,
@@ -26,7 +26,7 @@ const Expander = ({
       state: controlled ? open ? "open" : "closed" : void 0,
       "default-state": !controlled && defaultOpen ? "open" : void 0,
       level: level != null ? String(level) : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
+      tone: neutralToneAttr(tone),
       priority: priority && priority !== "secondary" ? priority : void 0,
       outdent: outdent ? "" : void 0,
       round: roundAttr(round),

package/dist/components/Input.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 const presence = (on) => on ? "" : void 0;
@@ -91,7 +91,7 @@ const Input = ({
       rows: rows != null ? String(rows) : void 0,
       maxrows: maxRows != null ? String(maxRows) : void 0,
       status: statusTone,
-      tone: tone || void 0,
+      tone: neutralToneAttr(tone),
       type: !multiline && rows == null ? nativeType : void 0,
       name,
       placeholder,

package/dist/components/InputTime.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 const presence = (on) => on ? "" : void 0;
@@ -65,7 +65,7 @@ const InputTime = ({
       min,
       max,
       status: statusTone,
-      tone: tone || void 0,
+      tone: neutralToneAttr(tone),
       name,
       disabled: presence(disabled),
       required: presence(required),

package/dist/components/Loader.js

@@ -1,4 +1,5 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
+import { neutralToneAttr } from "../anta_helpers";
 const Loader = ({ tone, value, max = 100, size, speed, label, className, style, ...rest }) => {
   const determinate = typeof value === "number" && Number.isFinite(value);
   const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
@@ -20,7 +21,7 @@ const Loader = ({ tone, value, max = 100, size, speed, label, className, style,
   return /* @__PURE__ */ jsx(
     "a-loader",
     {
-      tone,
+      tone: neutralToneAttr(tone),
       ...determinate ? { value: clampedValue } : {},
       class: className,
       style: computedStyle,

package/dist/components/MenuItem.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';
 /** Props shared by every menu item, link or not. */
 export interface MenuItemCommonProps extends BaseProps {
@@ -39,12 +39,11 @@ export interface MenuItemCommonProps extends BaseProps {
      *  gray.
      *  @defaultValue neutral */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but applied only while the row is `selected` — an unselected row
-     *  stays neutral. The whole selected row (label, icon, tint, and the `checkbox` /
-     *  `radio` indicator) takes the tone. Same value set as `tone`; on a selected row
-     *  `toneSelected` wins over `tone` when both are set.
-     *  @defaultValue neutral */
-    toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply `tone` to every row state, or only while the row is selected. In
+     *  `selected` scope, an unselected row and its checkbox/radio indicator stay
+     *  neutral.
+     *  @defaultValue 'all' */
+    toneScope?: ToneScope;
     /** An opaque value identifying this item, handed back in `onSelect`'s detail
      *  so a shared handler can tell which row was chosen without a per-item
      *  closure. */
@@ -139,4 +138,4 @@ export type MenuItemProps = MenuItemCommonProps & (MenuItemLinkMode | MenuItemAc
  * </MenuItem>
  * ```
  */
-export declare const MenuItem: ({ icon, label, hint, kbd, iconTrailing, disabled, selected, selectionIndicator, indeterminate, indicator, tone, toneSelected, submenu, value, onSelect, href, target, rel, download, ping, role: roleOverride, className, style, children, ...rest }: MenuItemProps) => any;
+export declare const MenuItem: ({ icon, label, hint, kbd, iconTrailing, disabled, selected, selectionIndicator, indeterminate, indicator, tone, toneScope, submenu, value, onSelect, href, target, rel, download, ping, role: roleOverride, className, style, children, ...rest }: MenuItemProps) => any;

package/dist/components/MenuItem.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
+import { neutralToneAttr, toneStyle } from "../anta_helpers";
 const SHORTCUT_KEYS = {
   "\u2318": "Meta",
   cmd: "Meta",
@@ -77,7 +77,7 @@ const MenuItem = ({
   indeterminate,
   indicator,
   tone,
-  toneSelected,
+  toneScope,
   submenu,
   value,
   onSelect,
@@ -97,8 +97,8 @@ const MenuItem = ({
   const role = selectionIndicator === "checkbox" ? "menuitemcheckbox" : selectionIndicator === "radio" || selectionIndicator === "check" ? "menuitemradio" : "menuitem";
   const ariaChecked = !checkable ? void 0 : selectionIndicator === "checkbox" && indeterminate ? "mixed" : selected ? "true" : "false";
   const keepTint = selected && (selectionIndicator === void 0 || selectionIndicator === "check");
-  const effectiveTone = selected && toneSelected || tone;
-  const toneAttr = effectiveTone && effectiveTone !== "neutral" ? effectiveTone : void 0;
+  const effectiveTone = toneScope === "selected" && !selected ? void 0 : tone;
+  const toneAttr = neutralToneAttr(effectiveTone);
   const declaredShortcuts = rest["aria-keyshortcuts"];
   const keyShortcuts = kbd ? shortcutLabel(kbd) : void 0;
   const kbdNode = kbd ? /* @__PURE__ */ jsx("kbd", { "aria-hidden": declaredShortcuts ?? keyShortcuts ? "true" : void 0, children: kbd }) : null;

package/dist/components/Progress.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { hasChildren, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { hasChildren, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 const Progress = ({ value, max = 100, tone, size, round, label, hint, className, style, children, ...rest }) => {
   const indeterminate = value == null || value === false;
   const numericValue = typeof value === "number" ? value : 0;
@@ -11,7 +11,7 @@ const Progress = ({ value, max = 100, tone, size, round, label, hint, className,
     {
       value: indeterminate ? false : numericValue,
       max,
-      tone: tone && tone !== "neutral" ? tone : void 0,
+      tone: neutralToneAttr(tone),
       size: size && size !== "medium" ? size : void 0,
       round: roundAttr(round),
       role: "progressbar",

package/dist/components/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps, OptionPresentationProps } from "../general_types";
+import type { BaseProps, OptionPresentationProps, ToneScope } 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";
@@ -27,8 +27,8 @@ export interface RadioOption extends OptionPresentationProps {
     disabled?: boolean;
     /** Override this one option's mark tone (defaults to the group's `tone`). */
     tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
-    /** Override this one option's `toneSelected` (defaults to the group's). */
-    toneSelected?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Override this option's tone scope. The group scope is inherited when omitted. */
+    toneScope?: ToneScope;
     /** Override this one option's size (defaults to the group's `size`). */
     size?: "small" | "medium" | "large";
 }
@@ -78,18 +78,17 @@ export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"
      *  @defaultValue 'neutral' */
     status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical";
     /** Mark tone applied to every option (an option's own `tone` wins), or any literal
-     *  CSS color for a one-off custom tone. Colors the selected-ring fill + dot *and*
-     *  the unselected ring border. Named tones track light/dark mode. Use `toneSelected`
-     *  instead to tone only the selected option and leave the rest neutral. The option
+     *  CSS color for a one-off custom tone. In the default `all` scope it colors the
+     *  selected-ring fill + dot and the unselected ring border. Named tones track
+     *  light/dark mode. Set `toneScope="selected"` to tone only the selected option
+     *  and leave the rest neutral. The option
      *  text stays neutral — recolor it in plain CSS via the `--text-N-{tone}` tokens.
      *  @defaultValue 'neutral' */
     tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
-    /** Like `tone`, but colored onto the **selected option only** — every unselected
-     *  ring stays neutral grey. Applied to every option (an option's own `toneSelected`
-     *  wins). Prefer this over `tone` when a resting tinted border would read as a
-     *  validation state.
-     *  @defaultValue 'neutral' */
-    toneSelected?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Apply `tone` to every state, or only to the selected option so unselected
+     *  rings stay neutral. An option's own `toneScope` wins.
+     *  @defaultValue 'all' */
+    toneScope?: ToneScope;
     /** Size applied to every option (an option's own `size` wins).
      *  @defaultValue 'medium' */
     size?: "small" | "medium" | "large";
@@ -116,5 +115,5 @@ export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"
  *
  * Requires `@antadesign/anta/elements` (client-side only).
  */
-export declare const RadioGroup: ({ options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, name, label, hint, status, tone, toneSelected, size, disabled, orientation, className, style, ...rest }: RadioGroupProps) => any;
+export declare const RadioGroup: ({ options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, name, label, hint, status, tone, toneScope, size, disabled, orientation, className, style, ...rest }: RadioGroupProps) => any;
 export {};

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 {};