@antadesign/anta 0.3.26 → 0.3.28

package/dist/capture-types.d.ts

@@ -0,0 +1,156 @@
+/** Directions of wheel or scroll deltas. Positive Y is down; positive X is right. */
+export type CaptureInputDirection = 'up' | 'down' | 'left' | 'right';
+/** `true` accepts every direction; omitted object entries decline that direction. */
+export type CaptureInputDirections = boolean | Partial<Record<CaptureInputDirection, boolean>>;
+/** `none` accepts unmodified input; a named modifier must be pressed. */
+export type CaptureInputModifier = 'none' | 'any' | 'alt' | 'ctrl' | 'meta' | 'shift';
+export type CaptureWheelActivation = 'hover' | 'settled' | 'focus' | 'settled-or-focus';
+export type CaptureWheelActivationReason = 'immediate' | 'settled' | 'focus';
+export interface CaptureWheelSettle {
+    /** Pointer dwell time in milliseconds.
+     * @defaultValue 150 */
+    delay?: number;
+    /** Maximum movement from the dwell anchor on either axis, in CSS pixels.
+     * @defaultValue 5 */
+    tolerance?: number;
+    /** Restart dwell after movement beyond tolerance, including after activation.
+     * @defaultValue false */
+    resetOnMove?: boolean;
+}
+export type CapturePointerType = 'mouse' | 'pen' | 'touch';
+export interface CapturePointerCapture {
+    /** Accepted pointer devices. One primary pointer is tracked per Capture.
+     * @defaultValue ['mouse', 'pen', 'touch'] */
+    pointerTypes?: readonly CapturePointerType[];
+    /** Accepted initiating buttons, using PointerEvent.button values.
+     * @defaultValue [0] */
+    buttons?: readonly number[];
+    /** Movement required before activation, in viewport CSS pixels.
+     * @defaultValue 0 */
+    threshold?: number;
+    /** Modifier required to start a capture session.
+     * @defaultValue any */
+    modifier?: CaptureInputModifier;
+    /** Allow capture to start on nested native or ARIA controls, links, or editable regions.
+     * @defaultValue false */
+    includeInteractive?: boolean;
+}
+export interface CapturePanInertia {
+    /** Exponential velocity decay time constant in milliseconds.
+     * @defaultValue 325 */
+    timeConstant?: number;
+    /** Stop when speed on both axes falls below this value, in CSS pixels/ms.
+     * @defaultValue 0.02 */
+    minVelocity?: number;
+}
+export interface CapturePan {
+    /** Accepted pointer devices.
+     * @defaultValue ['touch'] */
+    pointerTypes?: readonly CapturePointerType[];
+    /** Axes handled by custom panning. CSS touch-action leaves the other axis to the browser.
+     * @defaultValue both */
+    axis?: 'x' | 'y' | 'both';
+    /** Movement required before activation, in viewport CSS pixels.
+     * @defaultValue 3 */
+    threshold?: number;
+    /** Allowed scroll directions. Updating these can stop motion at application bounds.
+     * @defaultValue true */
+    directions?: CaptureInputDirections;
+    /** Continue panning after release with browser-side velocity decay.
+     * @defaultValue false */
+    inertia?: boolean | CapturePanInertia;
+}
+/** Plain event data. DOM targets, methods, and browser objects are excluded. */
+export interface SerializedMouseEvent {
+    type: string;
+    timeStamp: number;
+    isTrusted: boolean;
+    cancelable: boolean;
+    defaultPrevented: boolean;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    button: number;
+    buttons: number;
+    clientX: number;
+    clientY: number;
+    pageX: number;
+    pageY: number;
+    screenX: number;
+    screenY: number;
+    /** Coordinates relative to the original event target's padding edge. */
+    offsetX: number;
+    offsetY: number;
+}
+/** Original wheel values, including their original units and signs. */
+export interface SerializedWheelEvent extends SerializedMouseEvent {
+    deltaX: number;
+    deltaY: number;
+    deltaZ: number;
+    deltaMode: number;
+}
+export interface SerializedPointerEvent extends SerializedMouseEvent {
+    pointerId: number;
+    pointerType: string;
+    isPrimary: boolean;
+    width: number;
+    height: number;
+    pressure: number;
+    tangentialPressure: number;
+    tiltX: number;
+    tiltY: number;
+    twist: number;
+}
+/** Geometry measured at delivery. CSS transforms are included in the viewport rectangle. */
+export interface CaptureInputGeometry {
+    /** Pointer position relative to the viewport bounding rectangle's top-left, in CSS pixels. */
+    localX: number;
+    localY: number;
+    /** Dimensions of the same viewport bounding rectangle, in CSS pixels. */
+    boxWidth: number;
+    boxHeight: number;
+    /** Whether the pointer is inside that rectangle. Capture can continue outside it. */
+    inside: boolean;
+    focusWithin: boolean;
+}
+/** An accepted wheel input. Cancellation has already happened on the browser thread. */
+export interface CaptureWheelInput extends CaptureInputGeometry {
+    wheelEvent: SerializedWheelEvent;
+    activationReason: CaptureWheelActivationReason;
+}
+export type CapturePointerActivationReason = 'pointer-down' | 'drag-threshold';
+export type CaptureInputCancelReason = 'pointer-cancel' | 'lost-capture' | 'disabled' | 'disconnected' | 'blur' | 'interrupted';
+export interface CapturePointerStart extends CaptureInputGeometry {
+    pointerEvent: SerializedPointerEvent;
+}
+/** A captured pointer session. Positive movement follows the pointer right/down. */
+export interface CapturePointerInput extends CaptureInputGeometry {
+    phase: 'start' | 'move' | 'end' | 'cancel';
+    /** Null when cancellation comes from lifecycle or configuration changes. */
+    pointerEvent: SerializedPointerEvent | null;
+    start: CapturePointerStart;
+    /** Movement since the previous delivered sample, in viewport CSS pixels. */
+    deltaX: number;
+    deltaY: number;
+    /** Total movement from the initial press, in viewport CSS pixels. */
+    movementX: number;
+    movementY: number;
+    activationReason: CapturePointerActivationReason;
+    cancelReason?: CaptureInputCancelReason;
+}
+/** Custom scroll motion. Deltas have the opposite sign to finger movement. */
+export interface CapturePanInput extends CaptureInputGeometry {
+    phase: 'start' | 'move' | 'release' | 'inertia' | 'end' | 'cancel';
+    /** Null during momentum or cancellation without a pointer event. */
+    pointerEvent: SerializedPointerEvent | null;
+    start: CapturePointerStart;
+    /** Incremental scroll motion in viewport CSS pixels. */
+    deltaX: number;
+    deltaY: number;
+    /** Scroll velocity in viewport CSS pixels/ms. */
+    velocityX: number;
+    velocityY: number;
+    activationReason: CapturePointerActivationReason;
+    cancelReason?: CaptureInputCancelReason;
+}

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/Box.d.ts

@@ -34,4 +34,19 @@ export interface BoxProps extends BaseProps {
      * contains the changed fields and a full current snapshot. */
     onContextChange?: (event: CustomEvent<BoxContextChange>, detail: BoxContextChange) => void;
 }
+/**
+ * A light-DOM CSS box with browser-owned observation. `Box` is deliberately a
+ * thin JSX projection: it never holds a DOM ref. The element measures itself,
+ * tracks clipping and focus within, and emits native custom events so this works
+ * with React, Preact, and DOMs reconciled outside the UI thread.
+ *
+ * @example
+ * ```tsx
+ * <Box display="grid" onMeasureChange={(event, { current }) => {
+ *   console.log(current.width, current.clippedX)
+ * }}>
+ *   <Text truncate>Long content</Text>
+ * </Box>
+ * ```
+ */
 export declare const Box: ({ display, round, gap, observe, fade, fadeSize, onMeasureChange, onContextChange, className, style, children, ...rest }: BoxProps) => any;

package/dist/components/Box.js

@@ -1,8 +1,8 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
 import {
   cssLength,
+  customEventHandler,
   lengthStyle,
-  nativeStateChange,
   roundAttr,
   roundStyle
 } from "../anta_helpers";
@@ -28,14 +28,6 @@ const Box = ({
   children,
   ...rest
 }) => {
-  const measureHandler = onMeasureChange ? (input) => {
-    const { event, detail } = nativeStateChange(input);
-    if (detail) onMeasureChange(event, detail);
-  } : void 0;
-  const contextHandler = onContextChange ? (input) => {
-    const { event, detail } = nativeStateChange(input);
-    if (detail) onContextChange(event, detail);
-  } : void 0;
   return /* @__PURE__ */ jsx(
     "a-box",
     {
@@ -45,8 +37,8 @@ const Box = ({
       observe: observeAttr(observe, onMeasureChange, onContextChange),
       fade: fade ? "" : void 0,
       "fade-size": fade && fadeSize != null ? cssLength(fadeSize) : void 0,
-      onmeasurechange: measureHandler,
-      oncontextchange: contextHandler,
+      onmeasurechange: customEventHandler(onMeasureChange),
+      oncontextchange: customEventHandler(onContextChange),
       class: className,
       style: lengthStyle(
         fade ? fadeSize : void 0,

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/Capture.d.ts

@@ -0,0 +1,39 @@
+import type { BaseProps } from '../general_types';
+import type { CaptureInputDirections, CaptureInputModifier, CapturePan, CapturePanInput, CapturePointerCapture, CapturePointerInput, CaptureWheelActivation, CaptureWheelInput, CaptureWheelSettle } from '../capture-types';
+/** Opt-in input ownership for the light-DOM capture surface. */
+export interface CaptureProps extends BaseProps {
+    /** Capture wheel input in the enabled directions and emit `onWheelInput`.
+     * `true` accepts all directions. Omit or pass `false` to leave wheel input alone.
+     * Nested native wheel controls and Anta menus are excluded.
+     * All-false direction bounds preserve pointer settling while declining input.
+     * A listener alone never enables capture. */
+    wheelCapture?: CaptureInputDirections;
+    /** Pointer or focus condition required before wheel input can be captured.
+     * Focus applies only to input targeted within this Capture.
+     * @defaultValue settled */
+    wheelActivation?: CaptureWheelActivation;
+    /** Required modifier for wheel capture. `none` preserves browser Ctrl/pinch zoom.
+     * @defaultValue none */
+    wheelModifier?: CaptureInputModifier;
+    /** Dwell delay, movement tolerance, and whether movement resets eligibility.
+     * @defaultValue { delay: 150, tolerance: 5, resetOnMove: false } */
+    wheelSettle?: CaptureWheelSettle;
+    /** Accepted wheel input, with a serialized original event, Capture-relative
+     * geometry, focus state, and activation reason. Cancellation is already complete. */
+    onWheelInput?: (event: CustomEvent<CaptureWheelInput>, detail: CaptureWheelInput) => void;
+    /** Emit raw data for a primary pointer until release or cancellation. An options object
+     * filters devices/buttons and configures activation. Nested interactive controls
+     * are excluded unless explicitly included. A listener alone enables nothing. */
+    pointerCapture?: boolean | CapturePointerCapture;
+    /** Start, movement, end, and cancellation of an opted-in pointer session. */
+    onPointerInput?: (event: CustomEvent<CapturePointerInput>, detail: CapturePointerInput) => void;
+    /** Emit custom pan motion. `true` enables touch panning on both axes without
+     * momentum. Options select devices, axes, bounds directions, and optional inertia.
+     * Captures the pointer internally; `pointerCapture` is not required.
+     * Sets CSS touch-action through attributes before the gesture starts. */
+    pan?: boolean | CapturePan;
+    /** Custom pan motion and its lifecycle. Inertial samples have no native pointer event. */
+    onPanInput?: (event: CustomEvent<CapturePanInput>, detail: CapturePanInput) => void;
+}
+/** A browser-thread input surface. Nothing is captured until a capability is enabled. */
+export declare const Capture: ({ wheelCapture, wheelActivation, wheelModifier, wheelSettle, onWheelInput, pointerCapture, onPointerInput, pan, onPanInput, className, children, ...rest }: CaptureProps) => any;

package/dist/components/Capture.js

@@ -0,0 +1,36 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import { customEventHandler } from "../anta_helpers";
+import { directionAttribute, panAttributes, pointerCaptureAttributes, wheelSettleAttributes } from "./capture-props";
+const Capture = ({
+  wheelCapture,
+  wheelActivation,
+  wheelModifier,
+  wheelSettle,
+  onWheelInput,
+  pointerCapture,
+  onPointerInput,
+  pan,
+  onPanInput,
+  className,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "a-capture",
+  {
+    "wheel-capture": directionAttribute(wheelCapture),
+    "wheel-activation": wheelCapture ? wheelActivation : void 0,
+    "wheel-modifier": wheelCapture ? wheelModifier : void 0,
+    ...wheelSettleAttributes(wheelCapture ? wheelSettle : void 0),
+    ...pointerCaptureAttributes(pointerCapture),
+    ...panAttributes(pan),
+    onwheelinput: customEventHandler(onWheelInput),
+    onpointerinput: customEventHandler(onPointerInput),
+    onpaninput: customEventHandler(onPanInput),
+    class: className,
+    ...rest,
+    children
+  }
+);
+export {
+  Capture
+};

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