@antadesign/anta 0.3.27 → 0.3.28

package/dist/elements/a-tooltip.js

@@ -169,7 +169,6 @@ class ATooltipElement extends HTMLElementBase {
         font-weight: 400;
         font-style: normal;
         font-stretch: normal;
-        font-variation-settings: "wdth" 100, "slnt" 0, "ital" 0;
         line-height: 1.5;
         letter-spacing: 0.02ch;
         word-spacing: normal;

package/dist/general_types.d.ts

@@ -29,6 +29,9 @@ export interface BaseProps {
     /** Any `aria-*` attribute is forwarded to the rendered element. */
     [key: `aria-${string}`]: unknown;
 }
+/** Where a stateful component applies its tone. `all` colors both resting and
+ * selected chrome; `selected` keeps resting chrome neutral. */
+export type ToneScope = 'all' | 'selected';
 /** Safe presentation attributes for a data-rendered option. They land on the
  * option's rendered row, rather than on the enclosing control. Menu-based
  * components reserve `data-menu-*` for their own selection and focus behavior. */
@@ -549,15 +552,13 @@ export interface ATooltipAttributes extends BaseAttributes {
  * `@antadesign/anta`.
  */
 export interface ACheckboxAttributes extends BaseAttributes {
-    /** Mark color in every state — checked fill *and* unselected box border — or any
-     *  literal CSS color for a one-off custom tone. Named tones track light/dark mode
-     *  automatically. `'neutral'` is the default (same as omitting it). The label + hint
+    /** Mark color, or any literal CSS color for a one-off custom tone. Named tones
+     *  track light/dark mode automatically. Its scope is controlled by `tone-scope`. `'neutral'` is the
+     *  default (same as omitting it). The label + hint
      *  stay neutral — recolor them in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but colored onto the checked mark only — the empty box stays
-     *  neutral grey. Same value set as `tone`; if both are set, `tone` governs the
-     *  off-state border and `tone-selected` the checked fill. */
-    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply `tone` to every state (`all`, the default) or only while checked. */
+    'tone-scope'?: ToneScope;
     /** Size variant. `small` = 14px, `medium` (default) = 16px, `large` = 18px box. */
     size?: 'small' | 'medium' | 'large';
     /** Controlled state — the element reflects changes to this attribute. Use this
@@ -603,10 +604,10 @@ export interface ACheckboxAttributes extends BaseAttributes {
  * wrapper supplies both.
  */
 export interface ASwitchAttributes extends BaseAttributes {
-    /** Track and thumb color. A tinted tone also colors the unchecked chrome. */
+    /** Track and thumb color. Its scope is controlled by `tone-scope`. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Checked-track-only color. The unchecked track and thumb stay neutral. */
-    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply `tone` to every state (`all`, the default) or only while checked. */
+    'tone-scope'?: ToneScope;
     /** Size variant. `small` = 26×16px, `medium` (default) = 30×18px, `large` = 34×20px. */
     size?: 'small' | 'medium' | 'large';
     /** Fully round the thumb and track, or pass a custom track radius via a length
@@ -1066,15 +1067,13 @@ export interface ACopyAttributes extends BaseAttributes {
 export interface ARadioAttributes extends BaseAttributes {
     /** This option's identity / submitted value. */
     value?: string;
-    /** Mark color in every state — selected ring fill + dot *and* unselected ring
-     *  border — or any literal CSS color for a one-off custom tone. Named tones track
-     *  light/dark mode. `'neutral'` is the default. The label + hint stay neutral —
+    /** Mark color, or any literal CSS color for a one-off custom tone. Named tones track
+     *  light/dark mode; `tone-scope` controls whether unselected chrome is tinted.
+     *  `'neutral'` is the default. The label + hint stay neutral —
      *  recolor them in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but colored onto the selected mark only — an unselected ring stays
-     *  neutral grey. Same value set as `tone`; if both are set, `tone` governs the
-     *  off-state border and `tone-selected` the selected fill. */
-    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply `tone` to every state (`all`, the default) or only while selected. */
+    'tone-scope'?: ToneScope;
     /** Size variant. small=14px, medium=16px, large=18px control. */
     size?: 'small' | 'medium' | 'large';
     /** Disabled state. Presence-based (`''` on, omit off). */
@@ -1117,13 +1116,13 @@ export interface ARadioGroupAttributes extends BaseAttributes {
     /** Form field name — the group submits `name=value`. */
     name?: string;
     /** Mark tone cascaded to children that don't set their own, or any literal CSS
-     *  color for a one-off custom tone. Colors every child's ring fill + dot *and*
-     *  unselected border. The option text stays neutral — recolor it in plain CSS via
-     *  the `--text-N-{tone}` tokens. */
+     *  color for a one-off custom tone. In `all` scope it colors every child's ring
+     *  fill, dot, and unselected border. The option text stays neutral — recolor it
+     *  in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but colored onto the selected option only — every unselected ring
-     *  stays neutral grey. Cascaded to children that don't set their own. */
-    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Apply the cascaded `tone` to every state (`all`, the default) or only to the
+     * selected option. A child's explicit scope overrides the group. */
+    'tone-scope'?: ToneScope;
     /** Size cascaded to children that don't set their own. */
     size?: 'small' | 'medium' | 'large';
     /** Validation/feedback tone for the group hint — same set as `<a-input>`'s

package/dist/index.d.ts

@@ -98,7 +98,7 @@ export { Banner } from './components/Banner';
 export type { BannerProps } from './components/Banner';
 export { Toaster, createToaster } from './components/Toaster';
 export type { ToasterProps, ToasterManager, ToastOptions, ToastPlacement, ToastContent, ToastRender, } from './components/Toaster';
-export type { BaseProps, BaseAttributes } from './general_types';
+export type { BaseProps, BaseAttributes, ToneScope } from './general_types';
 export { configure } from './jsx-runtime';
 export type { AntaIntrinsicElements } from './jsx-runtime';
 /**

package/dist/reset.css

@@ -1 +1 @@
-@layer anta.reset{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}html{color-scheme:light;color:var(--text-2);font-family:var(--sans-serif);line-height:calc(22 / 15);-webkit-tap-highlight-color:transparent}body{background:var(--bg-2)}.light{color-scheme:light}.dark{color-scheme:dark}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}strong{font-weight:600}dfn{font-style:normal;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,currentColor 50%,transparent)}mark{color:color-mix(in oklch,black 90%,transparent);background-color:#ffef3c;border-radius:2px}.dark mark{background-color:#b3a400}del{color:var(--text-2-critical);text-decoration:line-through}ins{color:var(--text-2-success);text-decoration:none}var,dt{font-style:italic;font-weight:600}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}small,figcaption{font-size:calc(13em / 15)}figcaption{color:var(--text-3)}hr{border:0;border-block-start:1px solid var(--border-4)}code{font-family:var(--monospace);font-size:.933em;line-height:1em;color:inherit;background:color-mix(in oklch,currentColor 6%,transparent);border:none;padding:.25em .4ch .2em;border-radius:3px}.dark :not(pre)>code{background:color-mix(in oklch,currentColor 10%,transparent)}pre{padding:10px 1rem 6px;border:1px solid var(--border-5);border-radius:6px;background:var(--bg-3);color:var(--text-1);font-family:var(--monospace);font-size:13px;font-weight:440;line-height:20px;overflow-x:auto}pre code{background:none;padding:0;font:inherit}code,samp,pre{letter-spacing:0}p,ul,ol,blockquote,dl,pre,figure{margin-block-end:1rem}:is(p,ul,ol,blockquote,dl,pre,figure):last-child{margin-block-end:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}blockquote{border-left:3px solid var(--text-5);padding-left:calc(2ch - 3px)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:color-mix(in oklch,var(--focus-ring) 20%,transparent)}.dark ::selection{background:color-mix(in oklch,var(--focus-ring) 30%,transparent)}table{border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}
+@layer anta.reset{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;font-variation-settings:inherit}:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}html{color:var(--text-2);font-family:var(--sans-serif);line-height:calc(22 / 15);-webkit-tap-highlight-color:transparent}body{background:var(--bg-2)}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}b,strong{font-weight:600}dfn{font-style:normal;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,currentColor 50%,transparent)}mark{color:color-mix(in oklch,black 90%,transparent);background-color:light-dark(hsl(55 100% 61.85%),hsl(55 100% 35%));border-radius:2px}del{color:var(--text-2-critical);text-decoration:line-through}ins{color:var(--text-2-success);text-decoration:none}var,dt{font-style:italic;font-weight:600}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}small,figcaption{font-size:calc(13em / 15)}figcaption{color:var(--text-3)}hr{border:0;border-block-start:1px solid var(--border-4)}code{font-family:var(--monospace);font-size:.933em;line-height:1em;color:inherit;background:light-dark(color-mix(in oklch,currentColor 6%,transparent),color-mix(in oklch,currentColor 10%,transparent));border:none;padding:.25em .4ch .2em;border-radius:3px}pre{padding:10px 1rem 6px;border:1px solid var(--border-5);border-radius:6px;background:var(--bg-3);color:var(--text-1);font-family:var(--monospace);font-size:13px;font-weight:440;line-height:20px;overflow-x:auto}pre code{background:none;padding:0;font:inherit;font-variation-settings:inherit}code,samp,pre{letter-spacing:0}p,ul,ol,blockquote,dl,pre,figure{margin-block-end:1rem}:is(p,ul,ol,blockquote,dl,pre,figure):last-child{margin-block-end:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}blockquote{border-left:3px solid var(--text-5);padding-left:calc(2ch - 3px)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:light-dark(color-mix(in oklch,var(--focus-ring) 20%,transparent),color-mix(in oklch,var(--focus-ring) 30%,transparent))}table{border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}

package/dist/theme-antithesis.css

@@ -0,0 +1 @@
+@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:normal;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 0;font-display:swap}@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:italic;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 11;font-display:swap}@font-face{font-family:Stringer;src:url(https://assets.anta.design/fonts/Stringer-Regular-Web.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Upright.woff2) format("woff2");font-style:normal;font-weight:400 700;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Italic.woff2) format("woff2");font-style:italic;font-weight:400 700;font-display:swap}@layer anta.reset,anta.components,anta.theme;:root,.light{--sans-serif: "TT Interphases Pro Variable", sans-serif;--serif: "Stringer", serif;--monospace: "Antithesis Mono", ui-monospace, monospace;font-variation-settings:"slnt" 0}:root,.light{--anta-seed-brand: #cc4636;--anta-seed-neutral: #65605b}@layer anta.theme{:is(address,cite,dfn,em,i,var,dt){font-variation-settings:"slnt" 11;font-synthesis:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{font-stretch:88%}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){letter-spacing:.05ch}a-input{--_input-adornment-font-stretch: 88%}a-tag{font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt";letter-spacing:.02ch}a-tag[allcaps]{font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt";letter-spacing:.08ch}:is(h1,h2,h3,a-title[level="1"],a-title[level="2"],a-title[level="3"]){font-family:var(--serif)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])):not([round]){--_radius: 999px}a-input:not([round])::part(field),a-input:not([round]):not(:defined):after{border-radius:0}:is(input[data-anta]:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=reset],[type=submit],[type=image],[type=hidden]),textarea[data-anta],select[data-anta]):not([round]){--native-field-round: 0px}a-tag{border-radius:1px}}

package/dist/theme-antune.css

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

package/dist/tokens.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;:root,.light{--sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;font-size:15px;font-weight:400;font-feature-settings:"ss02" on,"ss05" on,"tnum" on;--anta-seed-neutral: #635b65;--anta-seed-brand: #5f4bc3;--anta-seed-info: #1f6eb2;--anta-seed-success: #2a7e43;--anta-seed-warning: #c37416;--anta-seed-critical: #c9302c;--bg-1: oklch(from var(--anta-seed-neutral) 1 0 h);--bg-2: oklch(from var(--anta-seed-neutral) .985 .002 h);--bg-3: oklch(from var(--anta-seed-neutral) .97 .004 h);--bg-4: oklch(from var(--anta-seed-neutral) .954 .004 h);--bg-5: oklch(from var(--anta-seed-neutral) .935 .006 h);--bg-2-brand: oklch(from var(--anta-seed-brand) .99 .004 h);--bg-3-brand: oklch(from var(--anta-seed-brand) .972 .011 h);--bg-4-brand: oklch(from var(--anta-seed-brand) .955 .02 h);--bg-5-brand: oklch(from var(--anta-seed-brand) .935 .03 h);--bg-2-info: oklch(from var(--anta-seed-info) .99 .004 h);--bg-3-info: oklch(from var(--anta-seed-info) .972 .011 h);--bg-4-info: oklch(from var(--anta-seed-info) .955 .02 h);--bg-5-info: oklch(from var(--anta-seed-info) .935 .03 h);--bg-2-success: oklch(from var(--anta-seed-success) .99 .004 h);--bg-3-success: oklch(from var(--anta-seed-success) .972 .011 h);--bg-4-success: oklch(from var(--anta-seed-success) .955 .02 h);--bg-5-success: oklch(from var(--anta-seed-success) .935 .03 h);--bg-2-warning: oklch(from var(--anta-seed-warning) .99 .004 h);--bg-3-warning: oklch(from var(--anta-seed-warning) .972 .011 h);--bg-4-warning: oklch(from var(--anta-seed-warning) .955 .02 h);--bg-5-warning: oklch(from var(--anta-seed-warning) .935 .03 h);--bg-2-critical: oklch(from var(--anta-seed-critical) .99 .004 h);--bg-3-critical: oklch(from var(--anta-seed-critical) .972 .011 h);--bg-4-critical: oklch(from var(--anta-seed-critical) .955 .02 h);--bg-5-critical: oklch(from var(--anta-seed-critical) .935 .03 h);--text-1: oklch(from var(--anta-seed-neutral) .1 .01 h);--text-2: oklch(from var(--anta-seed-neutral) .3 .015 h);--text-3: color-mix(in oklch, var(--text-2) 82%, transparent);--text-4: color-mix(in oklch, var(--text-2) 60%, transparent);--text-5: color-mix(in oklch, var(--text-2) 40%, transparent);--text-1-brand: oklch(from var(--anta-seed-brand) .38 .11 h);--text-2-brand: oklch(from var(--anta-seed-brand) .43 .15 h);--text-3-brand: color-mix(in oklch, var(--text-2-brand) 82%, transparent);--text-4-brand: color-mix(in oklch, var(--text-2-brand) 60%, transparent);--text-5-brand: color-mix(in oklch, var(--text-2-brand) 40%, transparent);--text-1-info: oklch(from var(--anta-seed-info) .38 .11 h);--text-2-info: oklch(from var(--anta-seed-info) .43 .15 h);--text-3-info: color-mix(in oklch, var(--text-2-info) 82%, transparent);--text-4-info: color-mix(in oklch, var(--text-2-info) 60%, transparent);--text-5-info: color-mix(in oklch, var(--text-2-info) 40%, transparent);--text-1-success: oklch(from var(--anta-seed-success) .38 .11 h);--text-2-success: oklch(from var(--anta-seed-success) .43 .15 h);--text-3-success: color-mix(in oklch, var(--text-2-success) 82%, transparent);--text-4-success: color-mix(in oklch, var(--text-2-success) 60%, transparent);--text-5-success: color-mix(in oklch, var(--text-2-success) 40%, transparent);--text-1-warning: oklch(from var(--anta-seed-warning) .38 .11 h);--text-2-warning: oklch(from var(--anta-seed-warning) .43 .15 h);--text-3-warning: color-mix(in oklch, var(--text-2-warning) 82%, transparent);--text-4-warning: color-mix(in oklch, var(--text-2-warning) 60%, transparent);--text-5-warning: color-mix(in oklch, var(--text-2-warning) 40%, transparent);--text-1-critical: oklch(from var(--anta-seed-critical) .38 .11 h);--text-2-critical: oklch(from var(--anta-seed-critical) .43 .15 h);--text-3-critical: color-mix(in oklch, var(--text-2-critical) 82%, transparent);--text-4-critical: color-mix(in oklch, var(--text-2-critical) 60%, transparent);--text-5-critical: color-mix(in oklch, var(--text-2-critical) 40%, transparent);--border-1: oklch(from var(--anta-seed-neutral) .67 .008 h);--border-2: oklch(from var(--anta-seed-neutral) .8 .008 h);--border-3: oklch(from var(--anta-seed-neutral) .86 .008 h);--border-4: oklch(from var(--anta-seed-neutral) .9 .008 h);--border-5: oklch(from var(--anta-seed-neutral) .935 .008 h);--border-1-brand: oklch(from var(--anta-seed-brand) .67 .13 h);--border-2-brand: oklch(from var(--anta-seed-brand) .8 .09 h);--border-3-brand: oklch(from var(--anta-seed-brand) .86 .055 h);--border-4-brand: oklch(from var(--anta-seed-brand) .9 .04 h);--border-5-brand: oklch(from var(--anta-seed-brand) .935 .028 h);--border-1-info: oklch(from var(--anta-seed-info) .67 .13 h);--border-2-info: oklch(from var(--anta-seed-info) .8 .09 h);--border-3-info: oklch(from var(--anta-seed-info) .86 .055 h);--border-4-info: oklch(from var(--anta-seed-info) .9 .04 h);--border-5-info: oklch(from var(--anta-seed-info) .935 .028 h);--border-1-success: oklch(from var(--anta-seed-success) .67 .13 h);--border-2-success: oklch(from var(--anta-seed-success) .8 .09 h);--border-3-success: oklch(from var(--anta-seed-success) .86 .055 h);--border-4-success: oklch(from var(--anta-seed-success) .9 .04 h);--border-5-success: oklch(from var(--anta-seed-success) .935 .028 h);--border-1-warning: oklch(from var(--anta-seed-warning) .67 .13 h);--border-2-warning: oklch(from var(--anta-seed-warning) .8 .09 h);--border-3-warning: oklch(from var(--anta-seed-warning) .86 .055 h);--border-4-warning: oklch(from var(--anta-seed-warning) .9 .04 h);--border-5-warning: oklch(from var(--anta-seed-warning) .935 .028 h);--border-1-critical: oklch(from var(--anta-seed-critical) .67 .13 h);--border-2-critical: oklch(from var(--anta-seed-critical) .8 .09 h);--border-3-critical: oklch(from var(--anta-seed-critical) .86 .055 h);--border-4-critical: oklch(from var(--anta-seed-critical) .9 .04 h);--border-5-critical: oklch(from var(--anta-seed-critical) .935 .028 h);--link-color: #1466d4;--link-color-hover: #2674e6;--focus-ring: oklch(.55 .2 284.15)}.dark{font-weight:400;--bg-1: oklch(from var(--anta-seed-neutral) 0 0 h);--bg-2: oklch(from var(--anta-seed-neutral) .16 .002 h);--bg-3: oklch(from var(--anta-seed-neutral) .177 .005 h);--bg-4: oklch(from var(--anta-seed-neutral) .191 .006 h);--bg-5: oklch(from var(--anta-seed-neutral) .2 .009 h);--bg-2-brand: oklch(from var(--anta-seed-brand) .13 .02 h);--bg-3-brand: oklch(from var(--anta-seed-brand) .17 .035 h);--bg-4-brand: oklch(from var(--anta-seed-brand) .185 .05 h);--bg-5-brand: oklch(from var(--anta-seed-brand) .205 .055 h);--bg-2-info: oklch(from var(--anta-seed-info) .13 .02 h);--bg-3-info: oklch(from var(--anta-seed-info) .17 .035 h);--bg-4-info: oklch(from var(--anta-seed-info) .185 .05 h);--bg-5-info: oklch(from var(--anta-seed-info) .205 .055 h);--bg-2-success: oklch(from var(--anta-seed-success) .13 .02 h);--bg-3-success: oklch(from var(--anta-seed-success) .17 .035 h);--bg-4-success: oklch(from var(--anta-seed-success) .185 .05 h);--bg-5-success: oklch(from var(--anta-seed-success) .205 .055 h);--bg-2-warning: oklch(from var(--anta-seed-warning) .13 .02 h);--bg-3-warning: oklch(from var(--anta-seed-warning) .17 .035 h);--bg-4-warning: oklch(from var(--anta-seed-warning) .185 .05 h);--bg-5-warning: oklch(from var(--anta-seed-warning) .205 .055 h);--bg-2-critical: oklch(from var(--anta-seed-critical) .13 .02 h);--bg-3-critical: oklch(from var(--anta-seed-critical) .17 .035 h);--bg-4-critical: oklch(from var(--anta-seed-critical) .185 .05 h);--bg-5-critical: oklch(from var(--anta-seed-critical) .205 .055 h);--text-1: oklch(from var(--anta-seed-neutral) .94 .008 h);--text-2: oklch(from var(--anta-seed-neutral) .8 .015 h);--text-3: color-mix(in oklch, var(--text-2) 80%, transparent);--text-4: color-mix(in oklch, var(--text-2) 60%, transparent);--text-5: color-mix(in oklch, var(--text-2) 40%, transparent);--text-1-brand: oklch(from var(--anta-seed-brand) .85 .1 h);--text-2-brand: oklch(from var(--anta-seed-brand) .77 .11 h);--text-3-brand: color-mix(in oklch, var(--text-2-brand) 80%, transparent);--text-4-brand: color-mix(in oklch, var(--text-2-brand) 60%, transparent);--text-5-brand: color-mix(in oklch, var(--text-2-brand) 40%, transparent);--text-1-info: oklch(from var(--anta-seed-info) .85 .1 h);--text-2-info: oklch(from var(--anta-seed-info) .77 .11 h);--text-3-info: color-mix(in oklch, var(--text-2-info) 80%, transparent);--text-4-info: color-mix(in oklch, var(--text-2-info) 60%, transparent);--text-5-info: color-mix(in oklch, var(--text-2-info) 40%, transparent);--text-1-success: oklch(from var(--anta-seed-success) .85 .1 h);--text-2-success: oklch(from var(--anta-seed-success) .77 .11 h);--text-3-success: color-mix(in oklch, var(--text-2-success) 80%, transparent);--text-4-success: color-mix(in oklch, var(--text-2-success) 60%, transparent);--text-5-success: color-mix(in oklch, var(--text-2-success) 40%, transparent);--text-1-warning: oklch(from var(--anta-seed-warning) .85 .1 h);--text-2-warning: oklch(from var(--anta-seed-warning) .77 .11 h);--text-3-warning: color-mix(in oklch, var(--text-2-warning) 80%, transparent);--text-4-warning: color-mix(in oklch, var(--text-2-warning) 60%, transparent);--text-5-warning: color-mix(in oklch, var(--text-2-warning) 40%, transparent);--text-1-critical: oklch(from var(--anta-seed-critical) .85 .1 h);--text-2-critical: oklch(from var(--anta-seed-critical) .77 .11 h);--text-3-critical: color-mix(in oklch, var(--text-2-critical) 80%, transparent);--text-4-critical: color-mix(in oklch, var(--text-2-critical) 60%, transparent);--text-5-critical: color-mix(in oklch, var(--text-2-critical) 40%, transparent);--border-1: oklch(from var(--anta-seed-neutral) .52 .008 h);--border-2: oklch(from var(--anta-seed-neutral) .41 .008 h);--border-3: oklch(from var(--anta-seed-neutral) .33 .008 h);--border-4: oklch(from var(--anta-seed-neutral) .26 .008 h);--border-5: oklch(from var(--anta-seed-neutral) .21 .008 h);--border-1-brand: oklch(from var(--anta-seed-brand) .52 .15 h);--border-2-brand: oklch(from var(--anta-seed-brand) .41 .12 h);--border-3-brand: oklch(from var(--anta-seed-brand) .33 .09 h);--border-4-brand: oklch(from var(--anta-seed-brand) .26 .06 h);--border-5-brand: oklch(from var(--anta-seed-brand) .21 .045 h);--border-1-info: oklch(from var(--anta-seed-info) .52 .15 h);--border-2-info: oklch(from var(--anta-seed-info) .41 .12 h);--border-3-info: oklch(from var(--anta-seed-info) .33 .09 h);--border-4-info: oklch(from var(--anta-seed-info) .26 .06 h);--border-5-info: oklch(from var(--anta-seed-info) .21 .045 h);--border-1-success: oklch(from var(--anta-seed-success) .52 .15 h);--border-2-success: oklch(from var(--anta-seed-success) .41 .12 h);--border-3-success: oklch(from var(--anta-seed-success) .33 .09 h);--border-4-success: oklch(from var(--anta-seed-success) .26 .06 h);--border-5-success: oklch(from var(--anta-seed-success) .21 .045 h);--border-1-warning: oklch(from var(--anta-seed-warning) .52 .15 h);--border-2-warning: oklch(from var(--anta-seed-warning) .41 .12 h);--border-3-warning: oklch(from var(--anta-seed-warning) .33 .09 h);--border-4-warning: oklch(from var(--anta-seed-warning) .26 .06 h);--border-5-warning: oklch(from var(--anta-seed-warning) .21 .045 h);--border-1-critical: oklch(from var(--anta-seed-critical) .52 .15 h);--border-2-critical: oklch(from var(--anta-seed-critical) .41 .12 h);--border-3-critical: oklch(from var(--anta-seed-critical) .33 .09 h);--border-4-critical: oklch(from var(--anta-seed-critical) .26 .06 h);--border-5-critical: oklch(from var(--anta-seed-critical) .21 .045 h);--link-color: #7baee9;--link-color-hover: #90bdee;--focus-ring: #a897fc}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;:root,.light{--sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace}:root,.light{color-scheme:light;font-size:15px;font-weight:400;--anta-seed-neutral: #635b65;--anta-seed-brand: #5f4bc3;--anta-seed-info: #1f6eb2;--anta-seed-success: #2a7e43;--anta-seed-warning: #c37416;--anta-seed-critical: #c9302c;--bg-1: oklch(from var(--anta-seed-neutral) 1 0 h);--bg-2: oklch(from var(--anta-seed-neutral) .985 .002 h);--bg-3: oklch(from var(--anta-seed-neutral) .97 .004 h);--bg-4: oklch(from var(--anta-seed-neutral) .954 .004 h);--bg-5: oklch(from var(--anta-seed-neutral) .935 .006 h);--bg-2-brand: oklch(from var(--anta-seed-brand) .99 .004 h);--bg-3-brand: oklch(from var(--anta-seed-brand) .972 .011 h);--bg-4-brand: oklch(from var(--anta-seed-brand) .955 .02 h);--bg-5-brand: oklch(from var(--anta-seed-brand) .935 .03 h);--bg-2-info: oklch(from var(--anta-seed-info) .99 .004 h);--bg-3-info: oklch(from var(--anta-seed-info) .972 .011 h);--bg-4-info: oklch(from var(--anta-seed-info) .955 .02 h);--bg-5-info: oklch(from var(--anta-seed-info) .935 .03 h);--bg-2-success: oklch(from var(--anta-seed-success) .99 .004 h);--bg-3-success: oklch(from var(--anta-seed-success) .972 .011 h);--bg-4-success: oklch(from var(--anta-seed-success) .955 .02 h);--bg-5-success: oklch(from var(--anta-seed-success) .935 .03 h);--bg-2-warning: oklch(from var(--anta-seed-warning) .99 .004 h);--bg-3-warning: oklch(from var(--anta-seed-warning) .972 .011 h);--bg-4-warning: oklch(from var(--anta-seed-warning) .955 .02 h);--bg-5-warning: oklch(from var(--anta-seed-warning) .935 .03 h);--bg-2-critical: oklch(from var(--anta-seed-critical) .99 .004 h);--bg-3-critical: oklch(from var(--anta-seed-critical) .972 .011 h);--bg-4-critical: oklch(from var(--anta-seed-critical) .955 .02 h);--bg-5-critical: oklch(from var(--anta-seed-critical) .935 .03 h);--text-1: oklch(from var(--anta-seed-neutral) .1 .01 h);--text-2: oklch(from var(--anta-seed-neutral) .3 .015 h);--text-3: color-mix(in oklch, var(--text-2) 82%, transparent);--text-4: color-mix(in oklch, var(--text-2) 60%, transparent);--text-5: color-mix(in oklch, var(--text-2) 40%, transparent);--text-1-brand: oklch(from var(--anta-seed-brand) .38 .11 h);--text-2-brand: oklch(from var(--anta-seed-brand) .43 .15 h);--text-3-brand: color-mix(in oklch, var(--text-2-brand) 82%, transparent);--text-4-brand: color-mix(in oklch, var(--text-2-brand) 60%, transparent);--text-5-brand: color-mix(in oklch, var(--text-2-brand) 40%, transparent);--text-1-info: oklch(from var(--anta-seed-info) .38 .11 h);--text-2-info: oklch(from var(--anta-seed-info) .43 .15 h);--text-3-info: color-mix(in oklch, var(--text-2-info) 82%, transparent);--text-4-info: color-mix(in oklch, var(--text-2-info) 60%, transparent);--text-5-info: color-mix(in oklch, var(--text-2-info) 40%, transparent);--text-1-success: oklch(from var(--anta-seed-success) .38 .11 h);--text-2-success: oklch(from var(--anta-seed-success) .43 .15 h);--text-3-success: color-mix(in oklch, var(--text-2-success) 82%, transparent);--text-4-success: color-mix(in oklch, var(--text-2-success) 60%, transparent);--text-5-success: color-mix(in oklch, var(--text-2-success) 40%, transparent);--text-1-warning: oklch(from var(--anta-seed-warning) .38 .11 h);--text-2-warning: oklch(from var(--anta-seed-warning) .43 .15 h);--text-3-warning: color-mix(in oklch, var(--text-2-warning) 82%, transparent);--text-4-warning: color-mix(in oklch, var(--text-2-warning) 60%, transparent);--text-5-warning: color-mix(in oklch, var(--text-2-warning) 40%, transparent);--text-1-critical: oklch(from var(--anta-seed-critical) .38 .11 h);--text-2-critical: oklch(from var(--anta-seed-critical) .43 .15 h);--text-3-critical: color-mix(in oklch, var(--text-2-critical) 82%, transparent);--text-4-critical: color-mix(in oklch, var(--text-2-critical) 60%, transparent);--text-5-critical: color-mix(in oklch, var(--text-2-critical) 40%, transparent);--border-1: oklch(from var(--anta-seed-neutral) .67 .008 h);--border-2: oklch(from var(--anta-seed-neutral) .8 .008 h);--border-3: oklch(from var(--anta-seed-neutral) .86 .008 h);--border-4: oklch(from var(--anta-seed-neutral) .9 .008 h);--border-5: oklch(from var(--anta-seed-neutral) .935 .008 h);--border-1-brand: oklch(from var(--anta-seed-brand) .67 .13 h);--border-2-brand: oklch(from var(--anta-seed-brand) .8 .09 h);--border-3-brand: oklch(from var(--anta-seed-brand) .86 .055 h);--border-4-brand: oklch(from var(--anta-seed-brand) .9 .04 h);--border-5-brand: oklch(from var(--anta-seed-brand) .935 .028 h);--border-1-info: oklch(from var(--anta-seed-info) .67 .13 h);--border-2-info: oklch(from var(--anta-seed-info) .8 .09 h);--border-3-info: oklch(from var(--anta-seed-info) .86 .055 h);--border-4-info: oklch(from var(--anta-seed-info) .9 .04 h);--border-5-info: oklch(from var(--anta-seed-info) .935 .028 h);--border-1-success: oklch(from var(--anta-seed-success) .67 .13 h);--border-2-success: oklch(from var(--anta-seed-success) .8 .09 h);--border-3-success: oklch(from var(--anta-seed-success) .86 .055 h);--border-4-success: oklch(from var(--anta-seed-success) .9 .04 h);--border-5-success: oklch(from var(--anta-seed-success) .935 .028 h);--border-1-warning: oklch(from var(--anta-seed-warning) .67 .13 h);--border-2-warning: oklch(from var(--anta-seed-warning) .8 .09 h);--border-3-warning: oklch(from var(--anta-seed-warning) .86 .055 h);--border-4-warning: oklch(from var(--anta-seed-warning) .9 .04 h);--border-5-warning: oklch(from var(--anta-seed-warning) .935 .028 h);--border-1-critical: oklch(from var(--anta-seed-critical) .67 .13 h);--border-2-critical: oklch(from var(--anta-seed-critical) .8 .09 h);--border-3-critical: oklch(from var(--anta-seed-critical) .86 .055 h);--border-4-critical: oklch(from var(--anta-seed-critical) .9 .04 h);--border-5-critical: oklch(from var(--anta-seed-critical) .935 .028 h);--link-color: #1466d4;--link-color-hover: #2674e6;--focus-ring: oklch(.55 .2 284.15)}.dark{color-scheme:dark;font-weight:400;--bg-1: oklch(from var(--anta-seed-neutral) 0 0 h);--bg-2: oklch(from var(--anta-seed-neutral) .16 .002 h);--bg-3: oklch(from var(--anta-seed-neutral) .177 .005 h);--bg-4: oklch(from var(--anta-seed-neutral) .191 .006 h);--bg-5: oklch(from var(--anta-seed-neutral) .2 .009 h);--bg-2-brand: oklch(from var(--anta-seed-brand) .13 .02 h);--bg-3-brand: oklch(from var(--anta-seed-brand) .17 .035 h);--bg-4-brand: oklch(from var(--anta-seed-brand) .185 .05 h);--bg-5-brand: oklch(from var(--anta-seed-brand) .205 .055 h);--bg-2-info: oklch(from var(--anta-seed-info) .13 .02 h);--bg-3-info: oklch(from var(--anta-seed-info) .17 .035 h);--bg-4-info: oklch(from var(--anta-seed-info) .185 .05 h);--bg-5-info: oklch(from var(--anta-seed-info) .205 .055 h);--bg-2-success: oklch(from var(--anta-seed-success) .13 .02 h);--bg-3-success: oklch(from var(--anta-seed-success) .17 .035 h);--bg-4-success: oklch(from var(--anta-seed-success) .185 .05 h);--bg-5-success: oklch(from var(--anta-seed-success) .205 .055 h);--bg-2-warning: oklch(from var(--anta-seed-warning) .13 .02 h);--bg-3-warning: oklch(from var(--anta-seed-warning) .17 .035 h);--bg-4-warning: oklch(from var(--anta-seed-warning) .185 .05 h);--bg-5-warning: oklch(from var(--anta-seed-warning) .205 .055 h);--bg-2-critical: oklch(from var(--anta-seed-critical) .13 .02 h);--bg-3-critical: oklch(from var(--anta-seed-critical) .17 .035 h);--bg-4-critical: oklch(from var(--anta-seed-critical) .185 .05 h);--bg-5-critical: oklch(from var(--anta-seed-critical) .205 .055 h);--text-1: oklch(from var(--anta-seed-neutral) .94 .008 h);--text-2: oklch(from var(--anta-seed-neutral) .8 .015 h);--text-3: color-mix(in oklch, var(--text-2) 80%, transparent);--text-4: color-mix(in oklch, var(--text-2) 60%, transparent);--text-5: color-mix(in oklch, var(--text-2) 40%, transparent);--text-1-brand: oklch(from var(--anta-seed-brand) .85 .1 h);--text-2-brand: oklch(from var(--anta-seed-brand) .77 .11 h);--text-3-brand: color-mix(in oklch, var(--text-2-brand) 80%, transparent);--text-4-brand: color-mix(in oklch, var(--text-2-brand) 60%, transparent);--text-5-brand: color-mix(in oklch, var(--text-2-brand) 40%, transparent);--text-1-info: oklch(from var(--anta-seed-info) .85 .1 h);--text-2-info: oklch(from var(--anta-seed-info) .77 .11 h);--text-3-info: color-mix(in oklch, var(--text-2-info) 80%, transparent);--text-4-info: color-mix(in oklch, var(--text-2-info) 60%, transparent);--text-5-info: color-mix(in oklch, var(--text-2-info) 40%, transparent);--text-1-success: oklch(from var(--anta-seed-success) .85 .1 h);--text-2-success: oklch(from var(--anta-seed-success) .77 .11 h);--text-3-success: color-mix(in oklch, var(--text-2-success) 80%, transparent);--text-4-success: color-mix(in oklch, var(--text-2-success) 60%, transparent);--text-5-success: color-mix(in oklch, var(--text-2-success) 40%, transparent);--text-1-warning: oklch(from var(--anta-seed-warning) .85 .1 h);--text-2-warning: oklch(from var(--anta-seed-warning) .77 .11 h);--text-3-warning: color-mix(in oklch, var(--text-2-warning) 80%, transparent);--text-4-warning: color-mix(in oklch, var(--text-2-warning) 60%, transparent);--text-5-warning: color-mix(in oklch, var(--text-2-warning) 40%, transparent);--text-1-critical: oklch(from var(--anta-seed-critical) .85 .1 h);--text-2-critical: oklch(from var(--anta-seed-critical) .77 .11 h);--text-3-critical: color-mix(in oklch, var(--text-2-critical) 80%, transparent);--text-4-critical: color-mix(in oklch, var(--text-2-critical) 60%, transparent);--text-5-critical: color-mix(in oklch, var(--text-2-critical) 40%, transparent);--border-1: oklch(from var(--anta-seed-neutral) .52 .008 h);--border-2: oklch(from var(--anta-seed-neutral) .41 .008 h);--border-3: oklch(from var(--anta-seed-neutral) .33 .008 h);--border-4: oklch(from var(--anta-seed-neutral) .26 .008 h);--border-5: oklch(from var(--anta-seed-neutral) .21 .008 h);--border-1-brand: oklch(from var(--anta-seed-brand) .52 .15 h);--border-2-brand: oklch(from var(--anta-seed-brand) .41 .12 h);--border-3-brand: oklch(from var(--anta-seed-brand) .33 .09 h);--border-4-brand: oklch(from var(--anta-seed-brand) .26 .06 h);--border-5-brand: oklch(from var(--anta-seed-brand) .21 .045 h);--border-1-info: oklch(from var(--anta-seed-info) .52 .15 h);--border-2-info: oklch(from var(--anta-seed-info) .41 .12 h);--border-3-info: oklch(from var(--anta-seed-info) .33 .09 h);--border-4-info: oklch(from var(--anta-seed-info) .26 .06 h);--border-5-info: oklch(from var(--anta-seed-info) .21 .045 h);--border-1-success: oklch(from var(--anta-seed-success) .52 .15 h);--border-2-success: oklch(from var(--anta-seed-success) .41 .12 h);--border-3-success: oklch(from var(--anta-seed-success) .33 .09 h);--border-4-success: oklch(from var(--anta-seed-success) .26 .06 h);--border-5-success: oklch(from var(--anta-seed-success) .21 .045 h);--border-1-warning: oklch(from var(--anta-seed-warning) .52 .15 h);--border-2-warning: oklch(from var(--anta-seed-warning) .41 .12 h);--border-3-warning: oklch(from var(--anta-seed-warning) .33 .09 h);--border-4-warning: oklch(from var(--anta-seed-warning) .26 .06 h);--border-5-warning: oklch(from var(--anta-seed-warning) .21 .045 h);--border-1-critical: oklch(from var(--anta-seed-critical) .52 .15 h);--border-2-critical: oklch(from var(--anta-seed-critical) .41 .12 h);--border-3-critical: oklch(from var(--anta-seed-critical) .33 .09 h);--border-4-critical: oklch(from var(--anta-seed-critical) .26 .06 h);--border-5-critical: oklch(from var(--anta-seed-critical) .21 .045 h);--link-color: #7baee9;--link-color-hover: #90bdee;--focus-ring: #a897fc}

package/docs/changelog.md

@@ -3,6 +3,63 @@
 This page tracks changes that ship in `@antadesign/anta`. Documentation-only
 changes are not listed.
 
+## 0.3.28 — September 10, 2026
+
+### Changed
+
+- **Breaking:** Checkbox, RadioGroup, Switch, MenuItem, Select, and SelectFaceted
+  now use one `tone` identity plus `toneScope="all" | "selected"`. The
+  `toneSelected` prop and `tone-selected` custom-element attribute were removed;
+  use `tone="…" toneScope="selected"` (or `tone="…" tone-scope="selected"` in
+  HTML) for neutral resting chrome with a toned selected state. Select and
+  SelectFaceted now accept `tone` as their default option-row tone. Switch's
+  default brand tone now covers its unchecked chrome too; set
+  `toneScope="selected"` to retain the previous neutral unchecked appearance.
+- Renamed the optional Anta theme to Antune. Replace imports of
+  `@antadesign/anta/theme-anta.css` with `@antadesign/anta/theme-antune.css`.
+- Reference themes provide hosted font faces by default through the public
+  `--sans-serif`, `--serif`, and `--monospace` stacks. Applications can replace
+  the stacks directly in CSS loaded after the theme.
+- Theme-free components no longer force TT Interphases stylistic sets or
+  variable-font axes. Antune and Antithesis own those font-specific treatments,
+  while numeric surfaces retain portable tabular figures.
+- Theme-free Buttons use `0.025ch` tracking and Tags use `0.1ch`. Antune and
+  Antithesis use `0.05ch` Button tracking across priorities and retain their
+  font-specific Tag tracking.
+- JSX wrappers omit `tone="neutral"` where neutral is the standalone default;
+  explicit child resets remain in the rendered DOM when they override an
+  inherited group tone.
+- Reference-theme font stacks and role tokens use normal selectors, so the
+  documented tokens, theme, application CSS source order controls overrides.
+- Reference themes register separate upright and italic TT Interphases faces,
+  mapping semantic italics to the font's `slnt` axis without a ranged face that
+  Safari can apply to ordinary text.
+- Paired component colors follow the nearest inherited `color-scheme`, so nested
+  `.light` and `.dark` regions do not inherit an outer mode's component colors.
+
+### Added
+
+- Added `theme-antithesis.css`.
+
+### Fixed
+
+- Antune and Antithesis pin regular TT Interphases text to `slnt` 0, including
+  form controls that reset font shorthand inheritance. This keeps text upright
+  in Safari despite the font file's non-zero axis default while preserving the
+  `slnt` 11 instance for semantic italics.
+- `tokens.css` declares `color-scheme` on `:root`, `.light`, and `.dark`, so
+  component colors resolve to the right mode without the optional `reset.css`
+  import.
+- A per-tab `tone` on the selected Tab tones the strip's secondary tab
+  background, so non-toned sibling tabs pick up the same tint.
+- `--avatar-badge-chroma` applies to `badge="neutral"` again.
+- Small Input, Select, InputTime, and opt-in native controls keep their declared
+  font size while focused on touch devices instead of growing to 16px.
+- Antune restores the dark neutral Radio border used by the original palette.
+- Package documentation can be regenerated by explicit output path without
+  rewriting the complete generated documentation tree.
+- `b` uses the same `600` font weight as `strong` in the typography reset.
+
 ## 0.3.27 — September 6, 2026
 
 ### Added

package/docs/colors.md

@@ -2,7 +2,7 @@
 
 Anta doesn't offer a global color palette — there are no raw scales like `blue-500` or `gray-900` to pick from. Color ships only as a small set of **role tokens**, grouped by where they apply — background, text, and border — each with a neutral set plus five tones (brand, info, success, critical, warning) that already pair light and dark. You compose from these roles instead of arbitrary swatches; anything app-specific lives in component tokens or your own [semantic aliases](#custom-semantic-tokens).
 
-Values are CSS declarations from the shipped default palette and optional `theme-anta.css` reference palette. Resolve them in the application's theme to obtain displayed colors. Toned backgrounds share the neutral `--bg-1`; there is no `--bg-1-{tone}`.
+Values are CSS declarations from the shipped default palette and optional `theme-antune.css` reference palette. Resolve them in the application's theme to obtain displayed colors. Toned backgrounds share the neutral `--bg-1`; there is no `--bg-1-{tone}`.
 
 ## Background
 

package/docs/comparison.md

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

package/docs/components/breadcrumbs.md

@@ -6,12 +6,41 @@ More menu without measuring the available width.
 
 ## Items
 
-Pass ordered data through `items`. An `href` renders a native link with the
-Button appearance; omit it for an action button. Each item accepts `label`,
-`icon`, `iconTrailing`, `tone`, `disabled`, `onClick`, `className`, `style`,
-`id`, `title`, and `data-*` / `aria-*` attributes. `size`, priority, and
-underline treatment belong to the whole trail so every visible control retains
-the same height.
+Pass ordered `BreadcrumbItem` objects through `items`. Each item is a link,
+action, or copy control. `size`, `priority`, and underline treatment belong to
+the whole trail.
+
+### BreadcrumbItem reference
+
+| Property | Possible values | Description |
+| --- | --- | --- |
+| `label` | `React.ReactNode` | Required content, such as text, an image, or JSX. Also used as the label when the item folds into More. |
+| `icon` | `IconShape` | Leading Anta icon shape. |
+| `iconTrailing` | `IconShape` | Trailing Anta icon shape. Available on link and action items. |
+| `tone` | `'neutral'`, `'brand'`, `'info'`, `'success'`, `'warning'`, `'critical'`, or a CSS color string | Item color. Defaults to neutral. |
+| `disabled` | `boolean` | Disables the item. |
+| `current` | `boolean` | Sets `aria-current="page"`. Does not change the tone. |
+| `onClick` | `(event: any) => void` | Activation handler. Folded items call it on menu selection. |
+| `href` | `string` | Destination URL for a link item. |
+| `target` | `string` | Link target, such as `'_blank'`. Requires `href`. |
+| `copy` | `string` | Literal text to copy. |
+| `copyNode` | `boolean` or `string` | `true` copies the nearest ancestor marked `data-copy-source`; a CSS selector chooses an ancestor region. `false` disables the node target. |
+| `copyUrl` | `true` | Copies the current page URL. |
+| `copyWithUrl` | `boolean` | Prefixes literal `copy` text with the current page URL. |
+| `onCopyRequest` | `() => void` | Refreshes a literal `copy` value before activation. Update application state; return values are ignored. |
+| `onCopied` | `(ok: boolean) => void` | Reports whether a copy attempt succeeded. Available on copy items. |
+| `iconPlacement` | `'leading'`, `'trailing'`, or `'none'` | Copy glyph placement. Defaults to `'leading'`. |
+| `copiedLabel` | `string` | Confirmation text for a copy item with no icon. Defaults to `'Copied'`. |
+| `className` | `string` | CSS class on the item control. |
+| `style` | `React.CSSProperties` | Inline styles on the item control. |
+| `id` | `string` | HTML ID on the item control. |
+| `title` | `string` | Native browser tooltip text. |
+| `data-*`, `aria-*` | Attribute-specific values | Attributes forwarded to the item control. |
+
+Use `href` for a link, omit navigation and copy props for an action, or choose
+exactly one of `copy`, `copyNode`, and `copyUrl` for a copy item. Copy items
+cannot use `href`, `target`, or `iconTrailing`. `copyWithUrl` and
+`onCopyRequest` apply only to literal `copy` text.
 
 ```tsx
 <Breadcrumbs
@@ -167,12 +196,19 @@ Use `priority`, `size`, and `separator` before adding CSS. A `className` on
 their individual Buttons. The composed structure uses light-DOM tags, so plain
 CSS can style a separator directly.
 
+To tighten the space between items, give the trail a class and set
+`a-breadcrumb-separator` to `width: 8px` within that class. This changes the
+separator's layout width while keeping the icon size unchanged. The website
+header uses this approach. `project-breadcrumbs` is a demo class; replace it
+with your own selector.
+
 ```tsx
 <Breadcrumbs className="project-breadcrumbs" separator="chevron-right" items={items} />
 ```
 
 ```css
 .project-breadcrumbs a-breadcrumb-separator {
+  width: 8px;
   color: var(--text-2);
 }
 ```

package/docs/components/checkbox.md

@@ -20,20 +20,20 @@ neutral. Six named tones (`neutral` default), or pass any CSS color for a custom
 
 ## Selected-only tone
 
-`toneSelected` tones the **checked mark only** — the empty box stays neutral grey
-until it's checked. Reach for it instead of `tone` when a resting tinted border would
-read as a validation error. Same value set as `tone`.
+`toneScope="selected"` applies the checkbox's `tone` to the **checked mark only** —
+the empty box stays neutral grey until it's checked. Use it when a resting tinted
+border would read as a validation error.
 
 ```tsx
-<Checkbox toneSelected="brand">Off stays neutral</Checkbox>
-<Checkbox defaultChecked toneSelected="critical">Checked mark tinted</Checkbox>
+<Checkbox tone="brand" toneScope="selected">Off stays neutral</Checkbox>
+<Checkbox defaultChecked tone="critical" toneScope="selected">Checked mark tinted</Checkbox>
 ```
 
 ## Coloring the text
 
 There's no text-tone prop. To tint the **label**, set `color` on the checkbox with a
 theme-aware `--text-N-{tone}` token (the label inherits it); for the **hint**, add a
-`color` rule on the `a-checkbox-hint` child. Pair either with `tone` / `toneSelected`
+`color` rule on the `a-checkbox-hint` child. Pair either with `tone`
 to tint the whole control.
 
 ```css
@@ -182,8 +182,8 @@ Space toggles the checkbox. Follows the [WAI-ARIA checkbox pattern](https://www.
 | `onValueChange?` | (event, attrs) => void | — | Like `onChange`, but with a `{ checked, indeterminate, name, value }` snapshot as the second argument, matching `Input`'s `onValueChange`. |
 | `round?` | boolean \| number \| string | — | Round the checkbox mark to a circle (`border-radius: 999px` on the box). Pass a `number` (px) or a CSS length string for a rounded-square mark instead. |
 | `size?` | 'small' \| 'medium' \| 'large' | 'medium' | Size variant. small=14px, medium=16px, large=18px box. |
-| `tone?` | 'brand' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | 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'`, `'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 the empty box neutral. The label + hint stay neutral — recolor them in plain CSS via the theme-aware `--text-N-{tone}` tokens. |
-| `toneSelected?` | 'brand' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | 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. |
+| `tone?` | 'brand' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | 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. 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. |
+| `toneScope?` | ToneScope | 'all' | 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. |
 | `value?` | string | "on" | Value submitted with the form when checked — like a native checkbox. |
 
 ## Web Component
@@ -205,22 +205,22 @@ For a standard HTML form, add `data-anta` to a native checkbox. It keeps the
 browser's label behavior, checked and indeterminate states, and form submission
 while using Anta's control surface.
 
-`size`, `tone`, `tone-selected`, and `round` use the matching Checkbox visual
+`size`, `tone`, `tone-scope`, and `round` use the matching Checkbox visual
 treatments.
 
 ```html
 <div style="display: grid; gap: 8px">
   <label><input data-anta type="checkbox" name="updates" size="small" tone="brand"> Product updates</label>
-  <label><input data-anta type="checkbox" name="security" tone-selected="success" checked> Security notices</label>
+  <label><input data-anta type="checkbox" name="security" tone="success" tone-scope="selected" checked> Security notices</label>
   <label><input data-anta type="checkbox" name="billing" size="large" round tone="warning" checked> Billing alerts</label>
 </div>
 ```
 
 ## Styling
 
-Reach for the props first: **`tone`** colors the mark in every state,
-**`toneSelected`** only the checked mark (any CSS color for a custom tone — it
-derives the full rest/hover/active curve in oklch), **`size`** the dimensions + type.
+Reach for the props first: **`tone`** chooses the mark color and **`toneScope`**
+chooses whether it applies in `all` states or only while `selected` (any CSS color
+derives the full rest/hover/active curve in oklch); **`size`** controls dimensions + type.
 To tint the label + hint, add a `color` rule (on the host for the label, on
 `a-checkbox-hint` for the hint) with the `--text-N-{tone}` tokens — there's no
 text-tone prop. The focus ring is the global

package/docs/components/menu.md

@@ -49,9 +49,8 @@ action. Pass **any CSS color** for a one-off custom tone — its hue and chroma
 kept while the lightness is pinned to match the brand text (resolved through
 `--menu-item-tone-source`).
 
-`toneSelected` applies the tone the same way, but **only while the row is `selected`**
-— an unselected row stays neutral. It's the checkable-menu counterpart to `tone`
-(`Select` uses it to tone the chosen row).
+`toneScope="selected"` applies `tone` **only while the row is `selected`** — an
+unselected row stays neutral. `Select` uses the same pair to tone chosen rows.
 
 ```tsx
 <Menu>
@@ -416,7 +415,7 @@ navigating links.
 | `selectionIndicator?` | 'checkbox' \| 'radio' \| 'check' | — | Turn the row into a checkable item, driven by `selected` (the row stays the control and carries `aria-checked`): - `'checkbox'` → `role="menuitemcheckbox"`, a leading passive `<a-checkbox>` (before `icon`); the tint is dropped (the box carries state). - `'radio'` → `role="menuitemradio"`, a leading passive `<a-radio>`; tint dropped. - `'check'` → `role="menuitemradio"`, a trailing check glyph on the selected row *and* the background tint (the canonical single-select look). Omit for a plain row (the default). |
 | `submenu?` | boolean | — | Marks this item as a submenu parent: adds the trailing chevron and `aria-haspopup="menu"`. Nest the flyout as a `<Menu>` child. |
 | `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | Semantic tone — colors the label, icon, and hover/selected tint (and the `checkbox`/`radio` indicator, which adopts it). A named tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone whose hue + chroma are kept while the lightness is pinned to match the brand text. `critical` is the destructive action; `neutral` (the default) is the standard gray. |
-| `toneSelected?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | 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. |
+| `toneScope?` | ToneScope | 'all' | 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. |
 | `value?` | string \| number | — | 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. |
 
 ## Keyboard
@@ -495,7 +494,7 @@ or do nothing to reject. (Submenus are always uncontrolled, regardless of `open`
 | `submenu?` | boolean | — | Marks this item as a submenu parent: adds the trailing chevron and `aria-haspopup="menu"`. Nest the flyout as a `<Menu>` child. |
 | `target?` | string | — | Anchor target, e.g. `'_blank'`. |
 | `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | Semantic tone — colors the label, icon, and hover/selected tint (and the `checkbox`/`radio` indicator, which adopts it). A named tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone whose hue + chroma are kept while the lightness is pinned to match the brand text. `critical` is the destructive action; `neutral` (the default) is the standard gray. |
-| `toneSelected?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | 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. |
+| `toneScope?` | ToneScope | 'all' | 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. |
 | `value?` | string \| number | — | 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. |
 
 ## Web Component

package/docs/components/radio.md

@@ -57,7 +57,8 @@ one. Any literal CSS color works too, for a one-off custom tone.
 
 ```tsx
 <RadioGroup
-  toneSelected="brand"
+  tone="brand"
+  toneScope="selected"
   defaultValue="a"
   options={[
     { value: 'a', label: 'Option A' },
@@ -66,10 +67,10 @@ one. Any literal CSS color works too, for a one-off custom tone.
 />
 ```
 
-`toneSelected` tones the **selected option only** — every unselected ring stays
-neutral grey. Reach for it instead of `tone` when a resting tinted border would read
-as a validation error. Same tone set; set it on the group, or on a single option to
-override one.
+`toneScope="selected"` applies the group's `tone` to the **selected option only** —
+every unselected ring stays neutral grey. Use it when a resting tinted border would
+read as a validation error. Set the scope on the group, or on a single option to
+override the group.
 
 To color the **label and hint**, there's no prop — add a `color` rule on the
 option's `a-radio-label` / `a-radio-hint` with a `--text-N-{tone}` value.
@@ -268,8 +269,8 @@ element — `Input`, and the composed `Select` — skip it and expose only
 | `orientation?` | 'vertical' \| 'horizontal' | 'vertical' | Layout + arrow-key axis. |
 | `size?` | 'small' \| 'medium' \| 'large' | 'medium' | Size applied to every option (an option's own `size` wins). |
 | `status?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' | 'neutral' | Validation/feedback tone for the group `hint` — recolors it (same tone set as `Input`'s `status`). Use `critical` for an error message, etc.; omit for the neutral default. |
-| `tone?` | 'brand' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | 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 text stays neutral — recolor it in plain CSS via the `--text-N-{tone}` tokens. |
-| `toneSelected?` | 'brand' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | 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. |
+| `tone?` | 'brand' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | Mark tone applied to every option (an option's own `tone` wins), or any literal 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. |
+| `toneScope?` | ToneScope | 'all' | Apply `tone` to every state, or only to the selected option so unselected rings stay neutral. An option's own `toneScope` wins. |
 | `value?` | string | — | Controlled selected value. The group follows this prop and reports a requested change through `onStateChange`. Leave it undefined for uncontrolled use. |
 
 ## Web Component
@@ -294,22 +295,22 @@ For a standard HTML form, add `data-anta` to each native radio. Radios that shar
 a `name` retain the browser's selection, keyboard behavior, labels, and form
 submission while using Anta's control surface.
 
-`size`, `tone`, and `tone-selected` use the matching RadioGroup option
+`size`, `tone`, and `tone-scope` use the matching RadioGroup option
 treatments.
 
 ```html
 <div style="display: grid; gap: 8px">
   <label><input data-anta type="radio" name="plan" value="starter" size="small" tone="brand"> Starter</label>
-  <label><input data-anta type="radio" name="plan" value="pro" tone-selected="success" checked> Pro</label>
+  <label><input data-anta type="radio" name="plan" value="pro" tone="success" tone-scope="selected" checked> Pro</label>
   <label><input data-anta type="radio" name="plan" value="enterprise" size="large" tone="warning"> Enterprise</label>
 </div>
 ```
 
 ## Styling
 
-Reach for the props first: **`tone`** colors the mark in every state,
-**`toneSelected`** only the selected option (any CSS color for a custom tone, set on
-the group or a single option — derives the full curve in oklch), **`size`** the
+Reach for the props first: **`tone`** chooses the mark color and **`toneScope`**
+chooses whether it applies in all states or only to the selected option (any CSS
+color can be set on the group or one option and derives the full curve in oklch), **`size`** the
 dimensions + type. To tint the label + hint, add a `color` rule on the option's
 `a-radio-label` / `a-radio-hint` with the `--text-N-{tone}` values — there's no
 text-tone prop. The focus ring is the global [`--focus-ring`](../colors.md#focus-ring).