@antadesign/anta 0.3.32 → 0.3.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/dist/avatar-core.d.ts +7 -2
  2. package/dist/bundle.css +1 -1
  3. package/dist/bundle.js +48 -58
  4. package/dist/components/Breadcrumbs.d.ts +0 -1
  5. package/dist/components/Breadcrumbs.js +0 -1
  6. package/dist/components/Button.d.ts +2 -3
  7. package/dist/components/Input.d.ts +9 -3
  8. package/dist/components/Input.js +2 -0
  9. package/dist/components/InputDate.d.ts +0 -1
  10. package/dist/components/InputDate.js +0 -1
  11. package/dist/components/Select.d.ts +0 -1
  12. package/dist/components/Select.js +0 -1
  13. package/dist/components/SelectFaceted.d.ts +0 -1
  14. package/dist/components/SelectFaceted.js +0 -1
  15. package/dist/components/Slider.d.ts +22 -10
  16. package/dist/components/Slider.js +9 -5
  17. package/dist/components/Steps.d.ts +0 -1
  18. package/dist/components/Steps.js +0 -1
  19. package/dist/components/Tabs.js +2 -1
  20. package/dist/components/Title.d.ts +3 -1
  21. package/dist/elements/a-avatar.css +1 -1
  22. package/dist/elements/a-avatar.js +2 -28
  23. package/dist/elements/a-breadcrumbs.d.ts +1 -0
  24. package/dist/elements/a-breadcrumbs.js +1 -0
  25. package/dist/elements/a-button.css +1 -1
  26. package/dist/elements/a-button.d.ts +8 -6
  27. package/dist/elements/a-button.js +2 -4
  28. package/dist/elements/a-dialog.js +3 -1
  29. package/dist/elements/a-input-date.d.ts +1 -0
  30. package/dist/elements/a-input-date.js +1 -0
  31. package/dist/elements/a-input-time.js +1 -2
  32. package/dist/elements/a-input.css +1 -1
  33. package/dist/elements/a-input.js +13 -10
  34. package/dist/elements/a-menu.d.ts +1 -1
  35. package/dist/elements/a-menu.js +17 -4
  36. package/dist/elements/a-select-faceted.d.ts +1 -0
  37. package/dist/elements/a-select-faceted.js +1 -0
  38. package/dist/elements/a-select.d.ts +1 -0
  39. package/dist/elements/a-select.js +1 -0
  40. package/dist/elements/a-slider.d.ts +7 -5
  41. package/dist/elements/a-slider.js +256 -59
  42. package/dist/elements/a-steps.d.ts +1 -0
  43. package/dist/elements/a-steps.js +1 -0
  44. package/dist/elements/a-tabpanel.d.ts +2 -2
  45. package/dist/elements/a-tabpanel.js +13 -3
  46. package/dist/elements/a-tag.d.ts +1 -0
  47. package/dist/elements/a-tag.js +1 -0
  48. package/dist/elements/a-title.d.ts +1 -0
  49. package/dist/elements/a-title.js +1 -0
  50. package/dist/elements/index.d.ts +7 -1
  51. package/dist/elements/index.js +4 -0
  52. package/dist/general_types.d.ts +9 -4
  53. package/dist/index.d.ts +1 -1
  54. package/dist/theme-antithesis.css +1 -1
  55. package/dist/theme-antune.css +1 -1
  56. package/docs/changelog.md +61 -0
  57. package/docs/components/breadcrumbs.md +9 -6
  58. package/docs/components/button.md +9 -6
  59. package/docs/components/input.md +29 -9
  60. package/docs/components/panel.md +3 -2
  61. package/docs/components/select-faceted.md +19 -19
  62. package/docs/components/slider.md +139 -4
  63. package/docs/components/steps.md +4 -2
  64. package/docs/install-config.md +295 -87
  65. package/docs/packages/plot.md +222 -20
  66. package/docs/theming.md +22 -13
  67. package/package.json +7 -4
package/dist/index.d.ts CHANGED
@@ -70,7 +70,7 @@ export type { ExpanderProps } from './components/Expander';
70
70
  export { Input } from './components/Input';
71
71
  export type { InputProps, InputChangeAttrs } from './components/Input';
72
72
  export { Slider } from './components/Slider';
73
- export type { SliderProps, SliderMarker, SliderChangeAttrs } from './components/Slider';
73
+ export type { SliderProps, SliderMarker, SliderChangeAttrs, SliderRangeValue, SliderValue } from './components/Slider';
74
74
  export { Calendar } from './components/Calendar';
75
75
  export type { CalendarProps, CalendarChangeAttrs } from './components/Calendar';
76
76
  export { InputDate } from './components/InputDate';
package/dist/theme-antithesis.css CHANGED
@@ -1 +1 @@
1
- @layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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}: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,em,i,var,dt){font-variation-settings:"slnt" 11;font-synthesis:none}dfn{font-variation-settings:"slnt" 0}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}}
1
+ @layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;:root,.light{--anta-seed-brand: #cc4636;--anta-seed-neutral: #65605b;--anta-seed-critical: #c92c46}:root,.light{--bg-1: #ffffff;--bg-2: #fdfaf8;--bg-3: #faf7f5;--bg-4: #f3f0ee;--bg-5: #eeeae7;--bg-2-brand: #fff6f5;--bg-3-brand: #fff2f0;--bg-4-brand: #ffedeb;--bg-5-brand: #ffe5e0;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f4;--bg-4-critical: #fcebee;--bg-5-critical: #fae5e9;--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: #080707;--text-2: #312d2b;--text-3: #665f5b;--text-4: #89817c;--text-5: #a39994;--text-1-brand: #701600;--text-2-brand: #912a0d;--text-3-brand: #912a0dcc;--text-4-brand: #912a0d99;--text-5-brand: #912a0d66;--text-1-success: #004415;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8d0017;--text-2-critical: #a01c32;--text-3-critical: #a01c32cc;--text-4-critical: #a01c3299;--text-5-critical: #a01c3266;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #00396b;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #99908b;--border-2: #c2b8b2;--border-3: #d8cfca;--border-4: #e4ddd8;--border-5: #eeeae7;--border-1-brand: #ee6d53;--border-2-brand: #fea192;--border-3-brand: #ffc1b8;--border-4-brand: #ffd3cc;--border-5-brand: #ffe5e0;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c80;--border-2-critical: #efa4b0;--border-3-critical: #f4c2cb;--border-4-critical: #f7d4da;--border-5-critical: #fae5e9;--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}.dark{--bg-1: #0b0409;--bg-2: #170812;--bg-3: #1e0b18;--bg-4: #250e1e;--bg-5: #2c1124;--bg-2-brand: #160803;--bg-3-brand: #1f0c04;--bg-4-brand: #290e05;--bg-5-brand: #321106;--bg-2-success: #041008;--bg-3-success: #05140a;--bg-4-success: #061b0e;--bg-5-success: #081f0f;--bg-2-critical: #190408;--bg-3-critical: #1f0509;--bg-4-critical: #2c070d;--bg-5-critical: #330910;--bg-2-warning: #120a03;--bg-3-warning: #160d04;--bg-4-warning: #201305;--bg-5-warning: #241506;--bg-2-info: #040d18;--bg-3-info: #04111f;--bg-4-info: #051727;--bg-5-info: #071b2c;--text-1: #eeeae7;--text-2: #c0b7bd;--text-3: #a398a0;--text-4: #7c6e78;--text-5: #6b5b66;--text-1-brand: #ffb3a7;--text-2-brand: #f88d7d;--text-3-brand: #f88d7dcc;--text-4-brand: #f88d7d99;--text-5-brand: #f88d7d66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabb9;--text-2-critical: #e78e9d;--text-3-critical: #e78e9dcc;--text-4-critical: #e78e9d99;--text-5-critical: #e78e9d66;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #99d0ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: #725769;--border-2: #533c4b;--border-3: #442e3d;--border-4: #2a1824;--border-5: #250e1e;--border-1-brand: #d03711;--border-2-brand: #912a0d;--border-3-brand: #6d240d;--border-4-brand: #3e1609;--border-5-brand: #321106;--border-1-success: #2a7e43;--border-2-success: #1f5c31;--border-3-success: #174525;--border-4-success: #0d2b16;--border-5-success: #081f0f;--border-1-critical: #c92c46;--border-2-critical: #a01c32;--border-3-critical: #761928;--border-4-critical: #471019;--border-5-critical: #330910;--border-1-warning: #995200;--border-2-warning: #6a3b0c;--border-3-warning: #4f2d0d;--border-4-warning: #311d0a;--border-5-warning: #241506;--border-1-info: #1f6eb2;--border-2-info: #175082;--border-3-info: #133e62;--border-4-info: #0d273e;--border-5-info: #071b2c}:root,.light{--fill-1: #665f5b;--fill-1-hover: #56504d;--fill-1-active: #494441;--fill-1-brand: #d03711;--fill-1-brand-hover: #af2e0e;--fill-1-brand-active: #912a0d;--fill-1-info: #1f6eb2;--fill-1-info-hover: #1a5b93;--fill-1-info-active: #175082;--fill-1-success: #2a7e43;--fill-1-success-hover: #226737;--fill-1-success-active: #1f5c31;--fill-1-warning: #c37416;--fill-1-warning-hover: #ae6613;--fill-1-warning-active: #995200;--fill-1-critical: #c92c46;--fill-1-critical-hover: #b02038;--fill-1-critical-active: #a01c32;--fill-2: color-mix(in oklch, #8b6b59 10%, transparent);--fill-2-hover: color-mix(in oklch, #8b6b59 15%, transparent);--fill-2-active: color-mix(in oklch, #8b6b59 20%, transparent);--fill-2-brand: color-mix(in oklch, #e94520 10%, transparent);--fill-2-brand-hover: color-mix(in oklch, #e94520 15%, transparent);--fill-2-brand-active: color-mix(in oklch, #e94520 20%, transparent);--fill-2-info: color-mix(in oklch, #2686d9 10%, transparent);--fill-2-info-hover: color-mix(in oklch, #2686d9 15%, transparent);--fill-2-info-active: color-mix(in oklch, #2686d9 20%, transparent);--fill-2-success: color-mix(in oklch, #329550 10%, transparent);--fill-2-success-hover: color-mix(in oklch, #329550 15%, transparent);--fill-2-success-active: color-mix(in oklch, #329550 20%, transparent);--fill-2-warning: color-mix(in oklch, #ae6613 10%, transparent);--fill-2-warning-hover: color-mix(in oklch, #ae6613 15%, transparent);--fill-2-warning-active: color-mix(in oklch, #ae6613 20%, transparent);--fill-2-critical: color-mix(in oklch, #de455e 10%, transparent);--fill-2-critical-hover: color-mix(in oklch, #de455e 15%, transparent);--fill-2-critical-active: color-mix(in oklch, #de455e 20%, transparent);--fill-3: color-mix(in oklch, #8b6b59 5%, transparent);--fill-3-hover: color-mix(in oklch, #8b6b59 10%, transparent);--fill-3-active: color-mix(in oklch, #8b6b59 15%, transparent);--fill-3-brand: color-mix(in oklch, #e94520 5%, transparent);--fill-3-brand-hover: color-mix(in oklch, #e94520 10%, transparent);--fill-3-brand-active: color-mix(in oklch, #e94520 15%, transparent);--fill-3-info: color-mix(in oklch, #2686d9 5%, transparent);--fill-3-info-hover: color-mix(in oklch, #2686d9 10%, transparent);--fill-3-info-active: color-mix(in oklch, #2686d9 15%, transparent);--fill-3-success: color-mix(in oklch, #329550 5%, transparent);--fill-3-success-hover: color-mix(in oklch, #329550 10%, transparent);--fill-3-success-active: color-mix(in oklch, #329550 15%, transparent);--fill-3-warning: color-mix(in oklch, #ae6613 5%, transparent);--fill-3-warning-hover: color-mix(in oklch, #ae6613 10%, transparent);--fill-3-warning-active: color-mix(in oklch, #ae6613 15%, transparent);--fill-3-critical: color-mix(in oklch, #de455e 5%, transparent);--fill-3-critical-hover: color-mix(in oklch, #de455e 10%, transparent);--fill-3-critical-active: color-mix(in oklch, #de455e 15%, transparent);--fill-1-disabled: color-mix(in oklch, #79716d 50%, transparent);--fill-disabled: color-mix(in oklch, #79716d 10%, transparent);--stroke-1: #d8cfca;--stroke-1-hover: #c2b8b2;--stroke-1-active: #a39994;--stroke-1-brand: #fea192;--stroke-1-brand-hover: #f07866;--stroke-1-brand-active: #ee6d53;--stroke-1-info: #93c5ec;--stroke-1-info-hover: #69ace5;--stroke-1-info-active: #56a1e1;--stroke-1-success: #88d7a0;--stroke-1-success-hover: #5bc87b;--stroke-1-success-active: #44c169;--stroke-1-warning: #edb25a;--stroke-1-warning-hover: #e09127;--stroke-1-warning-active: #d88118;--stroke-1-critical: #efa4b0;--stroke-1-critical-hover: #e87f91;--stroke-1-critical-active: #e56c80;--stroke-2: color-mix(in oklch, #79716d 15%, transparent);--stroke-2-brand: color-mix(in oklch, #e94520 15%, transparent);--stroke-2-info: color-mix(in oklch, #2686d9 15%, transparent);--stroke-2-success: color-mix(in oklch, #329550 15%, transparent);--stroke-2-warning: color-mix(in oklch, #ae6613 15%, transparent);--stroke-2-critical: color-mix(in oklch, #de455e 15%, transparent);--stroke-disabled: color-mix(in oklch, #79716d 10%, transparent);--label-1: #56504d;--label-1-hover: #494441;--label-1-brand: #d03711;--label-1-brand-hover: #af2e0e;--label-1-info: #1f6eb2;--label-1-info-hover: #1a5b93;--label-1-success: #2a7e43;--label-1-success-hover: #226737;--label-1-warning: #995200;--label-1-warning-hover: #7f410b;--label-1-critical: #c92c46;--label-1-critical-hover: #b02038;--label-2: #665f5b;--label-2-hover: #56504d;--label-2-active: #494441;--label-2-brand: #d03711;--label-2-brand-hover: #af2e0e;--label-2-brand-active: #912a0d;--label-2-info: #1f6eb2;--label-2-info-hover: #1a5b93;--label-2-info-active: #175082;--label-2-success: #2a7e43;--label-2-success-hover: #226737;--label-2-success-active: #1f5c31;--label-2-warning: #995200;--label-2-warning-hover: #7f410b;--label-2-warning-active: #6a3b0c;--label-2-critical: #c92c46;--label-2-critical-hover: #b02038;--label-2-critical-active: #a01c32;--label-disabled: #b3a9a3;--label-on-fill: #ffffff;--label-on-fill-critical: #ffffff;--label-on-fill-disabled: #b3a9a3;--focus-ring: #b24393;--focus-halo: color-mix(in oklch, #ffffff 70%, transparent)}.dark{--fill-1: #c0b7bd;--fill-1-hover: #cbc5c9;--fill-1-active: #d5cfd3;--fill-1-brand: #fea192;--fill-1-brand-hover: #ffb3a7;--fill-1-brand-active: #ffc1b8;--fill-1-info: #93c5ec;--fill-1-info-hover: #a6cdef;--fill-1-info-active: #bad6f3;--fill-1-success: #88d7a0;--fill-1-success-hover: #9ddeb1;--fill-1-success-active: #b3e5c2;--fill-1-warning: #edb25a;--fill-1-warning-hover: #ffbd59;--fill-1-warning-active: #ffca7a;--fill-1-critical: #c92c46;--fill-1-critical-hover: #b02038;--fill-1-critical-active: #a01c32;--fill-2: color-mix(in oklch, #a398a0 17%, transparent);--fill-2-hover: color-mix(in oklch, #a398a0 25%, transparent);--fill-2-active: color-mix(in oklch, #a398a0 30%, transparent);--fill-2-brand: color-mix(in oklch, #e94520 25%, transparent);--fill-2-brand-hover: color-mix(in oklch, #e94520 30%, transparent);--fill-2-brand-active: color-mix(in oklch, #e94520 35%, transparent);--fill-2-info: color-mix(in oklch, #2686d9 25%, transparent);--fill-2-info-hover: color-mix(in oklch, #2686d9 30%, transparent);--fill-2-info-active: color-mix(in oklch, #2686d9 35%, transparent);--fill-2-success: color-mix(in oklch, #329550 25%, transparent);--fill-2-success-hover: color-mix(in oklch, #329550 30%, transparent);--fill-2-success-active: color-mix(in oklch, #329550 35%, transparent);--fill-2-warning: color-mix(in oklch, #ae6613 30%, transparent);--fill-2-warning-hover: color-mix(in oklch, #ae6613 30%, transparent);--fill-2-warning-active: color-mix(in oklch, #ae6613 35%, transparent);--fill-2-critical: color-mix(in oklch, #de455e 25%, transparent);--fill-2-critical-hover: color-mix(in oklch, #de455e 30%, transparent);--fill-2-critical-active: color-mix(in oklch, #de455e 35%, transparent);--fill-3: color-mix(in oklch, #a398a0 10%, transparent);--fill-3-hover: color-mix(in oklch, #a398a0 15%, transparent);--fill-3-active: color-mix(in oklch, #a398a0 20%, transparent);--fill-3-brand: color-mix(in oklch, #e94520 10%, transparent);--fill-3-brand-hover: color-mix(in oklch, #e94520 15%, transparent);--fill-3-brand-active: color-mix(in oklch, #e94520 20%, transparent);--fill-3-info: color-mix(in oklch, #2686d9 10%, transparent);--fill-3-info-hover: color-mix(in oklch, #2686d9 15%, transparent);--fill-3-info-active: color-mix(in oklch, #2686d9 20%, transparent);--fill-3-success: color-mix(in oklch, #329550 10%, transparent);--fill-3-success-hover: color-mix(in oklch, #329550 15%, transparent);--fill-3-success-active: color-mix(in oklch, #329550 20%, transparent);--fill-3-warning: color-mix(in oklch, #ae6613 10%, transparent);--fill-3-warning-hover: color-mix(in oklch, #ae6613 15%, transparent);--fill-3-warning-active: color-mix(in oklch, #ae6613 20%, transparent);--fill-3-critical: color-mix(in oklch, #de455e 10%, transparent);--fill-3-critical-hover: color-mix(in oklch, #de455e 15%, transparent);--fill-3-critical-active: color-mix(in oklch, #de455e 20%, transparent);--fill-1-disabled: color-mix(in oklch, #a398a0 50%, transparent);--fill-disabled: color-mix(in oklch, #a398a0 10%, transparent);--stroke-1: #533c4b;--stroke-1-hover: #6b5b66;--stroke-1-active: #7c6e78;--stroke-1-brand: #912a0d;--stroke-1-brand-hover: #d03711;--stroke-1-brand-active: #e94520;--stroke-1-info: #175082;--stroke-1-info-hover: #1f6eb2;--stroke-1-info-active: #2686d9;--stroke-1-success: #1f5c31;--stroke-1-success-hover: #2a7e43;--stroke-1-success-active: #329550;--stroke-1-warning: #6a3b0c;--stroke-1-warning-hover: #995200;--stroke-1-warning-active: #ae6613;--stroke-1-critical: #a01c32;--stroke-1-critical-hover: #c92c46;--stroke-1-critical-active: #de455e;--stroke-2: color-mix(in oklch, #a39994 15%, transparent);--stroke-2-brand: color-mix(in oklch, #e94520 25%, transparent);--stroke-2-info: color-mix(in oklch, #2686d9 25%, transparent);--stroke-2-success: color-mix(in oklch, #329550 25%, transparent);--stroke-2-warning: color-mix(in oklch, #ae6613 25%, transparent);--stroke-2-critical: color-mix(in oklch, #de455e 25%, transparent);--stroke-disabled: color-mix(in oklch, #a398a0 12%, transparent);--label-1: #cbc5c9;--label-1-hover: #d5cfd3;--label-1-brand: #ffb3a7;--label-1-brand-hover: #ffc1b8;--label-1-info: #99d0ff;--label-1-info-hover: #bad6f3;--label-1-success: #68ff95;--label-1-success-hover: #b3e5c2;--label-1-warning: #ffbd59;--label-1-warning-hover: #f3cc91;--label-1-critical: #ffabb9;--label-1-critical-hover: #f4c2cb;--label-2: #b1a8ae;--label-2-hover: #c0b7bd;--label-2-active: #cbc5c9;--label-2-brand: #fea192;--label-2-brand-hover: #ffb3a7;--label-2-brand-active: #ffc1b8;--label-2-info: #93c5ec;--label-2-info-hover: #a6cdef;--label-2-info-active: #bad6f3;--label-2-success: #88d7a0;--label-2-success-hover: #9ddeb1;--label-2-success-active: #b3e5c2;--label-2-warning: #edb25a;--label-2-warning-hover: #f0bf75;--label-2-warning-active: #f3cc91;--label-2-critical: #ff9cad;--label-2-critical-hover: #ffabb9;--label-2-critical-active: #f4c2cb;--label-disabled: #6b5b66;--label-on-fill: #000000;--label-on-fill-critical: #ffffff;--label-on-fill-disabled: #7c6e78;--focus-ring: #e17cc2;--focus-halo: color-mix(in oklch, #000000 70%, transparent)}@layer anta.theme{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{letter-spacing:.02ch}a-tag[allcaps]{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],[type=checkbox],[type=radio]),a-tab,a-menu-item,a[data-anta-menu-item],details[data-anta]>summary):focus-visible,:is(a-checkbox,a-radio,a-switch):focus-visible:before,a-radio-group:focus-visible a-radio:state(selected):before{outline:2px solid var(--focus-ring);outline-offset:calc(-2px * var(--focus-ring-inset, 0));animation:focus-ring-pulse .6s cubic-bezier(.2,0,0,1);@media(prefers-reduced-motion:reduce){animation:none}}a-tab{--focus-ring-inset: 1}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])):not([round]){--_radius: 999px}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--_padding-x-text: round(.8em, 1px);--button-fg-primary-rest: var(--label-on-fill);--bg-primary-disabled: var(--fill-disabled);--fg-disabled-primary: var(--label-on-fill-disabled);--bg-secondary-disabled: var(--fill-disabled);--fg-disabled: var(--label-disabled);&[priority=primary]:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-halo)}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])):not([priority=primary],[priority=tertiary],[priority=quaternary]){--button-fg: var(--button-fg-secondary-rest);box-shadow:inset 0 0 2px -1px currentColor;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover)}}&:active,&[selected]{--button-fg: var(--button-fg-secondary-hover)}&[selected]{box-shadow:inset 0 0 0 1px color-mix(in oklch,currentColor 50%,transparent)}&[disabled]{box-shadow:inset 0 0 2px -1px var(--label-1)}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary][paddingless][selected]{box-shadow:0 0 0 1px color-mix(in oklch,currentColor 50%,transparent)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])):is(:not([tone]),[tone=""],[tone=neutral]){--button-bg-primary-rest: var(--fill-1);--button-bg-primary-hover: var(--fill-1-hover);--button-bg-primary-active: var(--fill-1-active);--button-fg-secondary-rest: var(--label-1);--button-fg-secondary-hover: var(--label-1-hover);--button-bg-secondary-rest: var(--fill-2);--button-bg-secondary-hover: var(--fill-2-hover);--button-bg-secondary-active: var(--fill-2-active);--button-fg-tertiary-rest: var(--label-2);--button-fg-tertiary-hover: var(--label-2-hover);--button-bg-tertiary-hover: var(--fill-3);--button-bg-tertiary-active: var(--fill-3-hover);--button-fg-quaternary-rest: light-dark(var(--label-2), color-mix(in oklch, var(--label-2) 90%, transparent));--button-fg-quaternary-hover: var(--label-2-active)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[tone=brand]{--button-bg-primary-rest: var(--fill-1-brand);--button-bg-primary-hover: var(--fill-1-brand-hover);--button-bg-primary-active: var(--fill-1-brand-active);--button-fg-secondary-rest: var(--label-1-brand);--button-fg-secondary-hover: var(--label-1-brand-hover);--button-bg-secondary-rest: var(--fill-2-brand);--button-bg-secondary-hover: var(--fill-2-brand-hover);--button-bg-secondary-active: var(--fill-2-brand-active);--button-fg-tertiary-rest: var(--label-2-brand);--button-fg-tertiary-hover: var(--label-2-brand-hover);--button-bg-tertiary-hover: var(--fill-3-brand);--button-bg-tertiary-active: var(--fill-3-brand-hover);--button-fg-quaternary-rest: light-dark(var(--label-2-brand), color-mix(in oklch, var(--label-2-brand) 90%, transparent));--button-fg-quaternary-hover: var(--label-2-brand-active)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[tone=info]{--button-bg-primary-rest: var(--fill-1-info);--button-bg-primary-hover: var(--fill-1-info-hover);--button-bg-primary-active: var(--fill-1-info-active);--button-fg-secondary-rest: var(--label-1-info);--button-fg-secondary-hover: var(--label-1-info-hover);--button-bg-secondary-rest: var(--fill-2-info);--button-bg-secondary-hover: var(--fill-2-info-hover);--button-bg-secondary-active: var(--fill-2-info-active);--button-fg-tertiary-rest: var(--label-2-info);--button-fg-tertiary-hover: var(--label-2-info-hover);--button-bg-tertiary-hover: var(--fill-3-info);--button-bg-tertiary-active: var(--fill-3-info-hover);--button-fg-quaternary-rest: light-dark(var(--label-2-info), color-mix(in oklch, var(--label-2-info) 90%, transparent));--button-fg-quaternary-hover: var(--label-2-info-active)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[tone=success]{--button-bg-primary-rest: var(--fill-1-success);--button-bg-primary-hover: var(--fill-1-success-hover);--button-bg-primary-active: var(--fill-1-success-active);--button-fg-secondary-rest: var(--label-1-success);--button-fg-secondary-hover: var(--label-1-success-hover);--button-bg-secondary-rest: var(--fill-2-success);--button-bg-secondary-hover: var(--fill-2-success-hover);--button-bg-secondary-active: var(--fill-2-success-active);--button-fg-tertiary-rest: var(--label-2-success);--button-fg-tertiary-hover: var(--label-2-success-hover);--button-bg-tertiary-hover: var(--fill-3-success);--button-bg-tertiary-active: var(--fill-3-success-hover);--button-fg-quaternary-rest: light-dark(var(--label-2-success), color-mix(in oklch, var(--label-2-success) 90%, transparent));--button-fg-quaternary-hover: var(--label-2-success-active)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[tone=warning]{--button-bg-primary-rest: var(--fill-1-warning);--button-bg-primary-hover: var(--fill-1-warning-hover);--button-bg-primary-active: var(--fill-1-warning-active);--button-fg-secondary-rest: var(--label-1-warning);--button-fg-secondary-hover: var(--label-1-warning-hover);--button-bg-secondary-rest: var(--fill-2-warning);--button-bg-secondary-hover: var(--fill-2-warning-hover);--button-bg-secondary-active: var(--fill-2-warning-active);--button-fg-tertiary-rest: var(--label-2-warning);--button-fg-tertiary-hover: var(--label-2-warning-hover);--button-bg-tertiary-hover: var(--fill-3-warning);--button-bg-tertiary-active: var(--fill-3-warning-hover);--button-fg-quaternary-rest: light-dark(var(--label-2-warning), color-mix(in oklch, var(--label-2-warning) 90%, transparent));--button-fg-quaternary-hover: var(--label-2-warning-active)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[tone=critical]{--button-fg-primary-rest: var(--label-on-fill-critical);--button-bg-primary-rest: var(--fill-1-critical);--button-bg-primary-hover: var(--fill-1-critical-hover);--button-bg-primary-active: var(--fill-1-critical-active);--button-fg-secondary-rest: var(--label-1-critical);--button-fg-secondary-hover: var(--label-1-critical-hover);--button-bg-secondary-rest: var(--fill-2-critical);--button-bg-secondary-hover: var(--fill-2-critical-hover);--button-bg-secondary-active: var(--fill-2-critical-active);--button-fg-tertiary-rest: var(--label-2-critical);--button-fg-tertiary-hover: var(--label-2-critical-hover);--button-bg-tertiary-hover: var(--fill-3-critical);--button-bg-tertiary-active: var(--fill-3-critical-hover);--button-fg-quaternary-rest: light-dark(var(--label-2-critical), color-mix(in oklch, var(--label-2-critical) 90%, transparent));--button-fg-quaternary-hover: var(--label-2-critical-active)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--button-bg-primary-rest: light-dark(oklch(from var(--_src) .51 .17 h), oklch(from var(--_src) .8 .1 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .84 .095 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .41 .17 h), oklch(from var(--_src) .87 .075 h));--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .835 .1 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .17 h), oklch(from var(--_src) .865 .07 h));--button-fg-tertiary-rest: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .8 .11 h));--button-fg-tertiary-hover: light-dark(oklch(from var(--_src) .4 .17 h), oklch(from var(--_src) .83 .09 h));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .17 h / .85), oklch(from var(--_src) .76 .115 h));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .17 h), oklch(from var(--_src) .835 .09 h))}:is(a-checkbox,input[data-anta][type=checkbox]){--checkbox-icon: var(--label-on-fill);--checkbox-icon-disabled: var(--label-on-fill-disabled);--checkbox-bg-disabled: var(--fill-disabled);--checkbox-border-disabled: var(--stroke-disabled)}a-checkbox{--checkbox-label-color: var(--text-1);--checkbox-hint-color: var(--text-4);--checkbox-mask-size: 12px;--checkbox-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");--checkbox-mask-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E");&[size=small]{--checkbox-mask-size: 10px;--checkbox-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.84' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");--checkbox-mask-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.84' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E")}&[size=large]{--checkbox-gap: 10px;--checkbox-mask-size: 14px;--checkbox-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.74' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");--checkbox-mask-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.74' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E")}&:not([round]):before{border-radius:1px}}:is(a-checkbox,input[data-anta][type=checkbox]):is(:not([tone]),[tone=""],[tone=neutral],[tone-scope=selected]){--checkbox-bg: var(--bg-1);--checkbox-border-neutral: var(--stroke-1);--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: var(--stroke-1-hover);--checkbox-border-active: var(--stroke-1-active)}:is(a-checkbox,input[data-anta][type=checkbox]):is(:not([tone]),[tone=""],[tone=neutral]){--checkbox-bg-selected: var(--fill-1);--checkbox-bg-selected-hover: var(--fill-1-hover);--checkbox-bg-selected-active: var(--fill-1-active)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=brand]{--checkbox-bg-selected: var(--fill-1-brand);--checkbox-bg-selected-hover: var(--fill-1-brand-hover);--checkbox-bg-selected-active: var(--fill-1-brand-active);&:not([tone-scope=selected]){--checkbox-bg: var(--bg-2-brand);--checkbox-border: var(--stroke-1-brand);--checkbox-border-hover: var(--stroke-1-brand-hover);--checkbox-border-active: var(--stroke-1-brand-active)}}:is(a-checkbox,input[data-anta][type=checkbox])[tone=info]{--checkbox-bg-selected: var(--fill-1-info);--checkbox-bg-selected-hover: var(--fill-1-info-hover);--checkbox-bg-selected-active: var(--fill-1-info-active);&:not([tone-scope=selected]){--checkbox-bg: var(--bg-2-info);--checkbox-border: var(--stroke-1-info);--checkbox-border-hover: var(--stroke-1-info-hover);--checkbox-border-active: var(--stroke-1-info-active)}}:is(a-checkbox,input[data-anta][type=checkbox])[tone=success]{--checkbox-bg-selected: var(--fill-1-success);--checkbox-bg-selected-hover: var(--fill-1-success-hover);--checkbox-bg-selected-active: var(--fill-1-success-active);&:not([tone-scope=selected]){--checkbox-bg: var(--bg-2-success);--checkbox-border: var(--stroke-1-success);--checkbox-border-hover: var(--stroke-1-success-hover);--checkbox-border-active: var(--stroke-1-success-active)}}:is(a-checkbox,input[data-anta][type=checkbox])[tone=warning]{--checkbox-bg-selected: var(--fill-1-warning);--checkbox-bg-selected-hover: var(--fill-1-warning-hover);--checkbox-bg-selected-active: var(--fill-1-warning-active);&:not([tone-scope=selected]){--checkbox-bg: var(--bg-2-warning);--checkbox-border: var(--stroke-1-warning);--checkbox-border-hover: var(--stroke-1-warning-hover);--checkbox-border-active: var(--stroke-1-warning-active)}}:is(a-checkbox,input[data-anta][type=checkbox])[tone=critical]{--checkbox-icon: var(--label-on-fill-critical);--checkbox-bg-selected: var(--fill-1-critical);--checkbox-bg-selected-hover: var(--fill-1-critical-hover);--checkbox-bg-selected-active: var(--fill-1-critical-active);&:not([tone-scope=selected]){--checkbox-bg: var(--bg-2-critical);--checkbox-border: var(--stroke-1-critical);--checkbox-border-hover: var(--stroke-1-critical-hover);--checkbox-border-active: var(--stroke-1-critical-active)}}:is(a-checkbox,input[data-anta][type=checkbox])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .5 c h), oklch(from var(--checkbox-tone-source) .8 .1 h));--checkbox-bg-selected-hover: light-dark(oklch(from var(--checkbox-tone-source) .45 c h), oklch(from var(--checkbox-tone-source) .84 .095 h));--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .87 .075 h));--_checkbox-off-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .5 c h), oklch(from var(--checkbox-tone-source) .45 c h))}a-checkbox:after{clip-path:inset(0 100% 0 0)}a-checkbox:is(:state(checked),:state(indeterminate)):after{clip-path:inset(0)}@media(prefers-reduced-motion:no-preference){a-checkbox:is(:hover,:focus-visible):is(:state(checked),:state(indeterminate)):after{transition:clip-path .3s cubic-bezier(.45,.05,.55,.95)}}a-checkbox:is(:state(checked),:state(indeterminate)):focus-visible:before,input[data-anta][type=checkbox]:is(:checked,:indeterminate):focus-visible{border-width:0;box-shadow:inset 0 0 0 1px var(--focus-halo)}label:has(>input[data-anta][type=checkbox]){color:var(--text-1)}label:has(>input[data-anta][type=checkbox][size=large]){gap:10px}label:has(>input[data-anta][type=checkbox]:disabled){color:var(--text-4)}input[data-anta][type=checkbox]:not([round]){--checkbox-round: 1px}input[data-anta][type=checkbox]:disabled{border-color:var(--checkbox-border-disabled);background-color:var(--checkbox-bg-disabled)}input[data-anta][type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E")}.dark input[data-anta][type=checkbox]:not([tone=critical]):checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}.dark input[data-anta][type=checkbox]:not([tone=critical]):indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a9a3' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a9a3' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E")}.dark input[data-anta][type=checkbox]:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c6e78' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}.dark input[data-anta][type=checkbox]:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c6e78' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M21 12H3'/%3E%3C/svg%3E")}:is(a-radio,input[data-anta][type=radio]){--radio-bg: var(--bg-1);--radio-border-neutral: var(--stroke-1);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--stroke-1-hover);--radio-border-active: var(--stroke-1-active);--radio-bg-selected: var(--fill-1);--radio-bg-selected-hover: var(--fill-1-hover);--radio-bg-selected-active: var(--fill-1-active);--radio-dot: var(--label-on-fill);--radio-dot-disabled: var(--label-on-fill-disabled);--radio-bg-disabled: var(--fill-disabled);--radio-border-disabled: var(--stroke-disabled)}:is(a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]),input[data-anta][type=radio][tone=brand]){--radio-bg-selected: var(--fill-1-brand);--radio-bg-selected-hover: var(--fill-1-brand-hover);--radio-bg-selected-active: var(--fill-1-brand-active);--_radio-tint-bg: var(--bg-2-brand);--_radio-tint-border: var(--stroke-1-brand);--_radio-tint-border-hover: var(--stroke-1-brand-hover);--_radio-tint-border-active: var(--stroke-1-brand-active)}:is(a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]),input[data-anta][type=radio][tone=info]){--radio-bg-selected: var(--fill-1-info);--radio-bg-selected-hover: var(--fill-1-info-hover);--radio-bg-selected-active: var(--fill-1-info-active);--_radio-tint-bg: var(--bg-2-info);--_radio-tint-border: var(--stroke-1-info);--_radio-tint-border-hover: var(--stroke-1-info-hover);--_radio-tint-border-active: var(--stroke-1-info-active)}:is(a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]),input[data-anta][type=radio][tone=success]){--radio-bg-selected: var(--fill-1-success);--radio-bg-selected-hover: var(--fill-1-success-hover);--radio-bg-selected-active: var(--fill-1-success-active);--_radio-tint-bg: var(--bg-2-success);--_radio-tint-border: var(--stroke-1-success);--_radio-tint-border-hover: var(--stroke-1-success-hover);--_radio-tint-border-active: var(--stroke-1-success-active)}:is(a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]),input[data-anta][type=radio][tone=warning]){--radio-bg-selected: var(--fill-1-warning);--radio-bg-selected-hover: var(--fill-1-warning-hover);--radio-bg-selected-active: var(--fill-1-warning-active);--_radio-tint-bg: var(--bg-2-warning);--_radio-tint-border: var(--stroke-1-warning);--_radio-tint-border-hover: var(--stroke-1-warning-hover);--_radio-tint-border-active: var(--stroke-1-warning-active)}:is(a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]),input[data-anta][type=radio][tone=critical]){--radio-dot: var(--label-on-fill-critical);--radio-bg-selected: var(--fill-1-critical);--radio-bg-selected-hover: var(--fill-1-critical-hover);--radio-bg-selected-active: var(--fill-1-critical-active);--_radio-tint-bg: var(--bg-2-critical);--_radio-tint-border: var(--stroke-1-critical);--_radio-tint-border-hover: var(--stroke-1-critical-hover);--_radio-tint-border-active: var(--stroke-1-critical-active)}a-radio[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone]:not([tone=""],[tone=neutral])[tone-scope=selected] a-radio[tone-scope=all]:not([tone]),input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--radio-bg: var(--_radio-tint-bg);--radio-border: var(--_radio-tint-border);--radio-border-hover: var(--_radio-tint-border-hover);--radio-border-active: var(--_radio-tint-border-active)}:is(a-radio[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]),input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])){--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .5 c h), oklch(from var(--radio-tone-source) .8 .1 h));--radio-bg-selected-hover: light-dark(oklch(from var(--radio-tone-source) .45 c h), oklch(from var(--radio-tone-source) .84 .095 h));--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .87 .075 h));--_radio-off-bg-selected: light-dark(oklch(from var(--radio-tone-source) .5 c h), oklch(from var(--radio-tone-source) .45 c h));--_radio-tint-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-tint-border: light-dark(oklch(from var(--_radio-border-base) calc(l + .17) c h), var(--_radio-border-base));--_radio-tint-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--_radio-tint-border-active: light-dark(var(--_radio-border-base), oklch(from var(--_radio-border-base) calc(l + .17) c h))}input[data-anta][type=radio]:disabled{border-color:var(--radio-border-disabled);background-color:var(--radio-bg-disabled)}input[data-anta][type=radio]:disabled:checked{border-color:var(--radio-border-disabled);background:radial-gradient(circle,var(--radio-dot-disabled) 0 var(--radio-dot-core),var(--radio-bg-disabled) var(--radio-dot-edge))}a-radio:state(selected):focus-visible:before,a-radio-group:focus-visible a-radio:state(selected):before,input[data-anta][type=radio]:checked:focus-visible,a-switch:state(checked):focus-visible:before{border-width:0;box-shadow:inset 0 0 0 1px var(--focus-halo)}a-input:not([round])::part(field),a-input:not([round]):not(:defined):after{border-radius:0}a-input{--_input-focus-width: 2px;--_input-focus-offset: -2px}a-input:not([status]:not([status=neutral]),[tone]:not([tone=""]),:disabled){--input-border: var(--stroke-1-hover);--input-border-width: 1px;&:not([priority=tertiary]){--input-rest-border: var(--stroke-1)}}a-input:disabled{--input-border: var(--stroke-disabled);--input-border-width: 1px;&:not([priority=tertiary]){--input-rest-border: var(--stroke-disabled)}&:not([priority=secondary],[priority=tertiary]){--input-bg: var(--fill-disabled)}}: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}}@keyframes focus-ring-pulse{0%{outline-width:0;outline-offset:0;outline-color:color-mix(in oklch,var(--focus-ring) 60%,transparent)}30%{outline-width:4px;outline-offset:calc(-4px * var(--focus-ring-inset, 0));outline-color:color-mix(in oklch,var(--focus-ring) 60%,transparent)}}
package/dist/theme-antune.css CHANGED
@@ -1 +1 @@
1
- @layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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}: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: #7a737c;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 66%, transparent);--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: color-mix(in oklch, var(--text-2-success) 66%, transparent);--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 66%, transparent);--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 66%, transparent);--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 66%, transparent);--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: #7c737c;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 62%, transparent);--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: color-mix(in oklch, var(--text-2-success) 62%, transparent);--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 62%, transparent);--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 62%, transparent);--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 62%, transparent);--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,em,i,var,dt){font-variation-settings:"slnt" 11;font-synthesis:none}dfn{font-variation-settings:"slnt" 0}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]),a-tab{letter-spacing:.05ch}a-tooltip{--_tooltip-letter-spacing: .02ch}a-progress-label{letter-spacing:.03em}a-menu-group-label{letter-spacing:.06em}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:is(:not([tone]),[tone=""],[tone=neutral]):not(:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral]))){--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)}}
1
+ @layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;: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: #7a737c;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 66%, transparent);--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: color-mix(in oklch, var(--text-2-success) 66%, transparent);--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 66%, transparent);--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 66%, transparent);--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 66%, transparent);--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: #7c737c;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 62%, transparent);--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: color-mix(in oklch, var(--text-2-success) 62%, transparent);--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 62%, transparent);--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 62%, transparent);--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 62%, transparent);--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{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]),a-tab{letter-spacing:.05ch}a-tooltip{--_tooltip-letter-spacing: .02ch}a-progress-label{letter-spacing:.03em}a-menu-group-label{letter-spacing:.06em}a-input{--_input-adornment-font-stretch: 88%}a-tag{letter-spacing:.02ch}a-tag[allcaps]{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:is(:not([tone]),[tone=""],[tone=neutral]):not(:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral]))){--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-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[priority=secondary]:disabled,a-input[priority=tertiary]:disabled{--input-bg: transparent}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/docs/changelog.md CHANGED
@@ -3,6 +3,67 @@
3
3
  This page tracks changes that ship in `@antadesign/anta`. Documentation-only
4
4
  changes are not listed.
5
5
 
6
+ ## 0.3.34 — October 5, 2026
7
+
8
+ ### Added
9
+
10
+ - [Title](/title/) and [Tag](/tag/) have granular `elements/a-title` and
11
+ `elements/a-tag` entries that load their CSS without registering custom elements.
12
+
13
+ ### Changed
14
+
15
+ - [Reference themes](/theming/#fonts-in-a-theme) no longer load hosted fonts or
16
+ replace the system font stacks. Load your chosen fonts in an application-owned
17
+ stylesheet; font-specific features and variation axes are also application-owned.
18
+ - JSX wrapper imports no longer load CSS. For granular usage, load composed
19
+ layout styles in the UI thread through `elements/a-breadcrumbs`,
20
+ `elements/a-steps`, `elements/a-input-date`, `elements/a-select`, or
21
+ `elements/a-select-faceted`, alongside their nested browser elements.
22
+ Full bundle usage is unchanged.
23
+ - The Antithesis theme adds an interactive color layer: `--fill-*`, `--stroke-*`
24
+ and `--label-*`, named by step, tone and state. [Buttons](/button/),
25
+ [Checkboxes](/checkbox/), [Radios](/radio/) and [Inputs](/input/) read their
26
+ colors from it. It replaces the theme's `--fill-{tone}` and `--control-*`
27
+ variables. Inputs in this theme draw a 1px border and a 2px focus ring inside
28
+ the field.
29
+ - Selected paddingless [Buttons](/button/#paddingless) draw their 1px selection
30
+ ring outside the label. Their corner radius is capped at 3px, including when
31
+ `round` requests a larger radius.
32
+
33
+ ### Fixed
34
+
35
+ - [Avatar](/avatar/) images and generated pictures keep their size, rounding,
36
+ and badge layout under `style-src 'self'` without allowing inline styles.
37
+ - Individual element stylesheets resolve through `@antadesign/anta/elements/*.css`,
38
+ including imports with a bundler's `?raw` query.
39
+ - [Tab panels](/tabs/#panels) follow their own strip when multiple `Tabs` share a
40
+ parent, including when another `Tabs` appears before an outer panel.
41
+
42
+ ## 0.3.33 — September 28, 2026
43
+
44
+ ### Added
45
+
46
+ - [Input priority](/input/#priority) adds secondary fields without a fill and
47
+ tertiary fields that reveal their border on hover or focus.
48
+ - [Slider](/slider/) accepts a two-value range with crossing thumbs and an
49
+ `inverted` track fill. Range values use two space-separated numbers in the
50
+ web component attribute and a sorted number pair in JavaScript and callbacks.
51
+
52
+ ### Fixed
53
+
54
+ - [Button](/button/) ignores non-form `form` references instead of throwing
55
+ during submit or reset activation.
56
+ - [Slider](/slider/) keeps both thumbs and tuple callbacks after a form reset
57
+ when a range has no `defaultValue`.
58
+ - Clearable [Input](/input/), [InputDate](/input-date/), and
59
+ [InputTime](/input-time/) fields reserve the clear button's space while empty,
60
+ so showing it does not add width.
61
+ - [Menus](/menu/) opened inside `data-menu-open` content now close after a choice
62
+ without closing the surrounding menu.
63
+ - Clearing an [InputDate](/input-date/) field no longer toggles its calendar.
64
+ - Switching [Menu](/menu/) submenus closes nested controlled popups cleanly, so
65
+ an [InputDate](/input-date/) calendar can reopen after its facet is revisited.
66
+
6
67
  ## 0.3.32 — September 25, 2026
7
68
 
8
69
  ### Added
package/docs/components/breadcrumbs.md CHANGED
@@ -160,14 +160,17 @@ string and set it from `onCopyRequest`. `onCopied` receives the result.
160
160
 
161
161
  ## Web Component
162
162
 
163
- `Breadcrumbs` deliberately adds no custom-element behavior: it assembles Anta
164
- Buttons, an optional Menu, and two light-DOM layout tags. When you are not using
165
- JSX, import the Breadcrumbs stylesheet and the primitives, then compose the same
166
- structure yourself. Keep an overflow Menu immediately after its More Button.
163
+ `Breadcrumbs` assembles Anta Buttons, an optional Menu, and two light-DOM layout
164
+ tags. Load its CSS-only entry and the browser primitives in the UI thread. When
165
+ you are not using JSX, compose the same structure yourself. Keep an overflow Menu
166
+ immediately after its More Button.
167
167
 
168
168
  ```ts
169
- import '@antadesign/anta/components/Breadcrumbs.css'
170
- import '@antadesign/anta/elements'
169
+ import '@antadesign/anta/elements/a-breadcrumbs'
170
+ import '@antadesign/anta/elements/a-button'
171
+ import '@antadesign/anta/elements/a-icon'
172
+ import '@antadesign/anta/elements/a-menu'
173
+ import '@antadesign/anta/elements/a-menu-item'
171
174
  ```
172
175
 
173
176
  ```html
package/docs/components/button.md CHANGED
@@ -24,8 +24,7 @@ visual emphasis.
24
24
 
25
25
  Six named tones: `neutral` (default), `brand`, `critical`, `info`, `success`,
26
26
  and `warning`. Omitting `tone`, or passing an empty string, resolves to
27
- `neutral`. A custom tone is also possible: pass any literal CSS color and the
28
- button will adapt to it.
27
+ `neutral`.
29
28
 
30
29
  ```tsx
31
30
  <Button label="Save" />
@@ -36,7 +35,7 @@ button will adapt to it.
36
35
  <Button tone="warning" label="Archive" />
37
36
  ```
38
37
 
39
- ### Custom tone
38
+ ## Custom tone
40
39
 
41
40
  Pass any CSS color to `tone`. Custom tones work with every priority and adapt to
42
41
  the current color mode.
@@ -348,11 +347,15 @@ When using `<a-button>` directly, add its button role and keyboard tab stop.
348
347
  </a-button>
349
348
  ```
350
349
 
351
- Use `<button data-anta>` when you need native button and form behavior.
350
+ ### Native HTML button
351
+
352
+ Add `data-anta` to a native `<button>` to use Anta's button styles with native
353
+ keyboard and form behavior. Set `type="button"` for actions that should not
354
+ submit a surrounding form. Use `type="submit"` or `type="reset"` for form actions.
352
355
 
353
356
  ```html
354
- <button data-anta tone="brand" priority="primary">Save changes</button>
355
- <button data-anta disabled>Unavailable</button>
357
+ <button type="button" data-anta tone="brand" priority="primary">Save changes</button>
358
+ <button type="button" data-anta disabled>Unavailable</button>
356
359
  ```
357
360
 
358
361
  ## Styling
package/docs/components/input.md CHANGED
@@ -24,6 +24,22 @@ Anta's text scale, so a field lines up with same-size `Text` / `Button`.
24
24
  | `medium` | 28px | 15 / 20 | 16px |
25
25
  | `large` | 32px | 17 / 22 | 18px |
26
26
 
27
+ ## Priority
28
+
29
+ `priority` changes the field surface without changing its size or behavior.
30
+ `primary` (the default) has a fill and border. `secondary` has a transparent
31
+ background and visible border. `tertiary` keeps both transparent at rest, then
32
+ uses secondary's border on hover or focus. Use it where the label or surrounding
33
+ content makes the field easy to find. All three show the same focus ring.
34
+ On an enabled field, a non-neutral `status` keeps its tinted fill and border
35
+ visible at rest.
36
+
37
+ ```tsx
38
+ <Input label="Primary" placeholder="Filled field" autoComplete="off" />
39
+ <Input priority="secondary" label="Secondary" placeholder="Outlined field" autoComplete="off" />
40
+ <Input priority="tertiary" label="Tertiary" placeholder="Field on hover or focus" autoComplete="off" />
41
+ ```
42
+
27
43
  ## Label and hint
28
44
 
29
45
  ```tsx
@@ -470,6 +486,7 @@ wraps to fewer columns as it narrows. Resize the preview to see it reflow.
470
486
  | `onValueChange?` | (event, attrs) => void | — | Unified value-change handler — the easy path for state. Fires on `input` *and* `change` (and on clear), with the native `event` plus a convenience `attrs` snapshot (`value`, `name`, `empty`, `valid`, `validationMessage`) so you can do `setForm(s => ({ ...s, [attrs.name]: attrs.value }))` without digging into the event. Use `event.type` to tell a live edit (`input`) from a commit (`change`); read `id` / `type` / `className` off `event.target`. |
471
487
  | `pattern?` | string | — | Validation pattern (single-line). |
472
488
  | `placeholder?` | string | — | Placeholder shown when empty. |
489
+ | `priority?` | 'primary' \| 'secondary' \| 'tertiary' | primary | Field emphasis. `primary` has a fill and border, `secondary` keeps the border without a fill, and `tertiary` makes the border transparent until hover or focus. Status borders remain visible at rest. |
473
490
  | `readOnly?` | boolean | — | Make the field read-only. |
474
491
  | `required?` | boolean | — | Mark the field required (drives native validity). |
475
492
  | `role?` | string | — | ARIA `role` for the field — e.g. `combobox` when the input drives a suggestion `listbox` (see `InputAutocomplete`). The custom element delegates it, together with standard `aria-*` props, to the focused native shadow control. Left unset by default. |
@@ -480,7 +497,7 @@ wraps to fewer columns as it narrows. Resize the preview to see it reflow.
480
497
  | `status?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' | — | Validation / feedback tone — colors the border + `hint` and prefixes a glyph. Only `critical` marks the field invalid (`aria-invalid`, blocks form submission, `:state(invalid)`); `success` / `warning` / `info` / `brand` are advisory and stay valid. Omit (or `neutral`) for a plain field. |
481
498
  | `statusIcon?` | (string & {}) \| false \| IconShape | — | Glyph shown before the `hint` when `status` is set. Each status has a default (critical → `warning-diamond`, warning → `warning-triangle`, success → `circle-check`, info → `info`, brand → `circle-small-solid`); pass a shape to override, or `false` to drop it. `neutral` has no default glyph. |
482
499
  | `step?` | number \| string | — | |
483
- | `tone?` | string | — | Custom accent color — any literal CSS color tints the resting + hover border (focus ring stays the global `--focus-ring`). For consistency with the other controls' custom-tone knob; a `status` still overrides for validation. |
500
+ | `tone?` | string | — | Custom accent color — any literal CSS color tints the border when shown (focus ring stays the global `--focus-ring`). For consistency with the other controls' custom-tone knob; a `status` still overrides for validation. |
484
501
  | `trailing?` | ReactNode | — | Content pinned to the end of the field (e.g. icons, buttons), after the clear button when `clearable`. |
485
502
  | `truncate?` | boolean | true | Ellipsize an overflowing single-line value. Read-only inputs already do this; pass `false` when an editable field should show the full value. |
486
503
  | `type?` | 'text' \| 'search' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'number' | text | Single-line input type. Ignored when `multiline`. `search` is a **wrapper-only** shorthand: it defaults a leading search icon and a clear button (both overridable — pass your own `leading`, or `clearable={false}`) and sets `inputmode="search"`, but the DOM input stays `type="text"`. The native `search` type never reaches the element, so the browser's own clear/search affordances never appear — Anta owns that chrome. |
@@ -534,9 +551,10 @@ their `size` attribute, so Anta does not reuse it. `round` and a custom-color
534
551
 
535
552
  ## Styling
536
553
 
537
- Reach for the props first: **`status`** sets a validation tone (border + message),
538
- **`tone`** a custom accent color for the border (any CSS color), **`size`** the
539
- dimensions. The focus ring is the global [`--focus-ring`](../colors.md#focus-ring).
554
+ Reach for the props first: **`priority`** sets the field surface,
555
+ **`status`** a validation tone (border + message), **`tone`** a custom accent
556
+ color for the border (any CSS color), and **`size`** the dimensions. The focus
557
+ ring is the global [`--focus-ring`](../colors.md#focus-ring).
540
558
 
541
559
  ```tsx
542
560
  <Input tone="#e0457b" label="Custom accent" autoComplete="off" />
@@ -555,11 +573,13 @@ a-input::part(input) { font-variant-numeric: tabular-nums; }
555
573
  a-input::part(label) { text-transform: uppercase; }
556
574
  ```
557
575
 
558
- The border is drawn as an **inset `box-shadow`**, not a real `border`, so its width
559
- (`0.5px` → `1px` when a `status` is set) and placement never change the box size —
560
- the field height stays locked to the matching Button. Drop the leading `inset` to
561
- draw the border as an outset ring instead. You can also re-point an `--input-*`
562
- color token on one instance (`style={{ '--input-border': 'var(--border-1)' }}`)
576
+ The border is drawn as an **inset `box-shadow`**, so its width (`0.5px` at rest,
577
+ including tertiary's transparent border, and `1px` on hover, focus, or
578
+ non-neutral status)
579
+ never changes the box size. The field height stays aligned with `Button`.
580
+ Drop the leading `inset` to draw the border as an outset ring instead. You can
581
+ also re-point an `--input-*` color token on one instance
582
+ (`style={{ '--input-border': 'var(--border-1)' }}`)
563
583
  or a wrapping selector; the resolver lives in `@layer anta`, so any un-layered rule
564
584
  of yours wins.
565
585
 
package/docs/components/panel.md CHANGED
@@ -92,8 +92,9 @@ through its controls. Restoring releases the trap and returns focus to the
92
92
  previous external control, when available.
93
93
 
94
94
  Provide a keyboard-accessible **Restore** control: Escape and outside clicks
95
- do not restore the panel. Panel adds no dialog role, background inertness, or
96
- scroll lock. Use [Dialog](./dialog.md) for modal interactions.
95
+ do not restore the panel. Panel adds no dialog role or background inertness.
96
+ Maximizing Panel does not lock page scrolling; the page's viewport scrollbar
97
+ may remain visible and usable. Use [Dialog](./dialog.md) for modal interactions.
97
98
 
98
99
  Panel fills the browser viewport, without invoking the Fullscreen API.
99
100
  Browsers without Popover API support keep it in normal layout.
package/docs/components/select-faceted.md CHANGED
@@ -30,7 +30,9 @@ is limited. `offset` sets the gap in pixels between the trigger and the menu:
30
30
 
31
31
  Open **Recency** in the first demo, select **Custom range**, then pick **From**
32
32
  and **To** from the fields side by side. Each field closes its own calendar after
33
- a pick while the Recency editor stays open for the second date.
33
+ a pick while the Recency editor stays open for the second date. Both fields have
34
+ a clear button. Open **Min duration** to choose a comparison, then enter seconds.
35
+ The comparison alone does not apply the facet or add a result chip.
34
36
 
35
37
  Open **Metadata** to choose key–value tags such as
36
38
  **env production** or **region us-east**. Its `renderOption` callback reads
@@ -42,6 +44,7 @@ const recencySummary = (v) =>
42
44
  'preset' in v
43
45
  ? { today: 'Today', yesterday: 'Yesterday', last14: 'Last 14 days', last30: 'Last 30 days' }[v.preset]
44
46
  : v.from && v.to ? `${v.from} → ${v.to}` : 'Custom range'
47
+ const sign = (comparison) => ({ gt: '>', gte: '≥', eq: '=', lte: '≤', lt: '<' })[comparison] ?? '≥'
45
48
 
46
49
  const FACETS = [
47
50
  { key: 'assignee', label: 'Assignee', kind: 'multiple', filter: true, options: people },
@@ -64,7 +67,7 @@ const FACETS = [
64
67
  ),
65
68
  },
66
69
  { key: 'title', label: 'Title contains', kind: 'text' },
67
- { key: 'duration', label: 'Min duration', kind: 'custom', summary: (v) => `≥ ${v.min}s`, render: /* … */ },
70
+ { key: 'duration', label: 'Min duration', kind: 'custom', summary: (v) => `${sign(v.comparison)} ${v.min}s`, render: /* DurationEditor with draft comparison and Input value */ },
68
71
  { key: 'recency', label: 'Recency', kind: 'custom', summary: recencySummary, render: /* radio presets and two InputDate fields */ },
69
72
  ]
70
73
 
@@ -313,11 +316,11 @@ A custom facet stores a `Date` directly. Unlike the value of a `single` or
313
316
 
314
317
  #### A recency filter: presets plus a range
315
318
 
316
- This editor combines a `RadioGroup` of presets with a **Custom range** option
317
- that reveals two `InputDate` fields side by side. Its value is either `{ preset }` or
318
- `{ from, to }`. The `resolveRange` helper converts either shape into the date
319
- range used to filter the result set. Each InputDate calendar opens above the
320
- facet menu without closing it.
319
+ This editor uses `MenuItem` rows with radio indicators for the presets.
320
+ Selecting **Custom range** reveals two `InputDate` fields side by side. The facet
321
+ value is either `{ preset }` or `{ from, to }`. The `resolveRange` helper
322
+ converts either shape into the date range used to filter the result set. Each
323
+ `InputDate` calendar opens above the facet menu without closing it.
321
324
 
322
325
  ```tsx
323
326
  type Recency = { preset: 'today' | 'yesterday' | 'last14' | 'last30' } | { from: string; to: string }
@@ -346,20 +349,17 @@ const recency: SelectFacetCustom<Recency> = {
346
349
  const mode = value == null ? '' : 'preset' in value ? value.preset : 'custom'
347
350
  const range = value && 'from' in value ? value : { from: '', to: '' }
348
351
  return (
349
- <div style={{ display: 'grid', gap: 8, minWidth: 360 }}>
350
- <RadioGroup
351
- size="small"
352
- options={PRESETS} // Today / Yesterday / Last 14 / Last 30 / Custom range
353
- value={mode}
354
- // Controlled group: apply the pick in onStateChange (onValueChange fires
355
- // only after `value` changes, so it can't drive a controlled RadioGroup).
356
- onStateChange={(_e, { next }) => onChange(next === 'custom' ? range : { preset: next })}
357
- />
352
+ <div style={{ minWidth: 360 }}>
353
+ {PRESETS.map((preset) => (
354
+ <MenuItem key={preset.value} label={preset.label}
355
+ selectionIndicator="radio" selected={mode === preset.value} data-menu-open
356
+ onSelect={() => onChange(preset.value === 'custom' ? range : { preset: preset.value })} />
357
+ ))}
358
358
  {mode === 'custom' && (
359
- <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 8 }}>
360
- <InputDate size="small" label="From" value={range.from}
359
+ <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 8, padding: 8 }}>
360
+ <InputDate size="small" label="From" clearable value={range.from}
361
361
  onValueChange={(from) => onChange({ from, to: range.to })} />
362
- <InputDate size="small" label="To" value={range.to} min={range.from || undefined}
362
+ <InputDate size="small" label="To" clearable value={range.to} min={range.from || undefined}
363
363
  onValueChange={(to) => onChange({ from: range.from, to })} />
364
364
  </div>
365
365
  )}