@plastic-js/tsumiki 0.1.52 → 0.1.54

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 (57) hide show
  1. package/dist/components/Accordion.js +6 -6
  2. package/dist/components/Avatar.js +4 -4
  3. package/dist/components/BackToTop.js +3 -3
  4. package/dist/components/BottomNavigation.js +4 -4
  5. package/dist/components/BottomSheet.js +1 -1
  6. package/dist/components/Button.js +23 -26
  7. package/dist/components/Checkbox.js +11 -29
  8. package/dist/components/Clipboard.js +2 -2
  9. package/dist/components/CloseButton.js +4 -4
  10. package/dist/components/Collapsible.js +3 -3
  11. package/dist/components/ColorPicker.js +6 -6
  12. package/dist/components/Combobox.js +10 -9
  13. package/dist/components/{DateInput.js → DatePicker.js} +37 -22
  14. package/dist/components/Dialog.js +8 -8
  15. package/dist/components/Drawer.js +7 -7
  16. package/dist/components/Field.js +3 -3
  17. package/dist/components/Fieldset.js +2 -2
  18. package/dist/components/FileUpload.js +12 -12
  19. package/dist/components/FilterGroup.js +50 -115
  20. package/dist/components/Input.js +20 -19
  21. package/dist/components/Link.js +2 -2
  22. package/dist/components/Listbox.js +7 -6
  23. package/dist/components/Menu.js +8 -7
  24. package/dist/components/MoneyInput.js +1 -1
  25. package/dist/components/NumberInput.js +12 -13
  26. package/dist/components/Pagination.js +8 -8
  27. package/dist/components/Popover.js +5 -5
  28. package/dist/components/Progress.js +3 -3
  29. package/dist/components/RadioGroup.js +5 -10
  30. package/dist/components/RatingGroup.js +5 -5
  31. package/dist/components/SearchInput.js +4 -1
  32. package/dist/components/Select.js +52 -26
  33. package/dist/components/SelectPc.js +41 -30
  34. package/dist/components/SignaturePad.js +6 -7
  35. package/dist/components/Skeleton.js +1 -1
  36. package/dist/components/Slider.js +7 -7
  37. package/dist/components/Spinner.js +1 -1
  38. package/dist/components/Steps.js +23 -23
  39. package/dist/components/Switch.js +19 -10
  40. package/dist/components/Tabs.js +5 -5
  41. package/dist/components/TagsInput.js +6 -6
  42. package/dist/components/Toast.js +14 -14
  43. package/dist/components/Toggle.js +7 -7
  44. package/dist/components/ToggleGroup.js +19 -8
  45. package/dist/components/Tour.js +3 -3
  46. package/dist/components/TreeView.js +5 -5
  47. package/dist/index.js +2 -2
  48. package/dist/tsumiki.css +1 -1
  49. package/docs/api.md +51 -139
  50. package/docs/component-api-pattern.md +2 -2
  51. package/docs/scroll-lock-issue.md +3 -3
  52. package/package.json +1 -1
  53. package/src/styles/color.css +42 -0
  54. package/src/styles/semantic.css +212 -0
  55. package/src/styles/shadow.css +1 -0
  56. package/src/styles/theme.css +14 -0
  57. package/src/styles/tokens.css +1 -0
package/dist/tsumiki.css CHANGED
@@ -1 +1 @@
1
- :root,.light,.light-theme{--indigo-1:#fdfdfe;--indigo-2:#f7f9ff;--indigo-3:#edf2fe;--indigo-4:#e1e9ff;--indigo-5:#d2deff;--indigo-6:#c1d0ff;--indigo-7:#abbdf9;--indigo-8:#8da4ef;--indigo-9:#3e63dd;--indigo-10:#3358d4;--indigo-11:#3a5bc7;--indigo-12:#1f2d5c}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--indigo-1:color(display-p3 .992 .992 .996);--indigo-2:color(display-p3 .971 .977 .998);--indigo-3:color(display-p3 .933 .948 .992);--indigo-4:color(display-p3 .885 .914 1);--indigo-5:color(display-p3 .831 .87 1);--indigo-6:color(display-p3 .767 .814 .995);--indigo-7:color(display-p3 .685 .74 .957);--indigo-8:color(display-p3 .569 .639 .916);--indigo-9:color(display-p3 .276 .384 .837);--indigo-10:color(display-p3 .234 .343 .801);--indigo-11:color(display-p3 .256 .354 .755);--indigo-12:color(display-p3 .133 .175 .348)}}}:root,.light,.light-theme{--indigo-a1:#00008002;--indigo-a2:#0040ff08;--indigo-a3:#0047f112;--indigo-a4:#0044ff1e;--indigo-a5:#0044ff2d;--indigo-a6:#003eff3e;--indigo-a7:#0037ed54;--indigo-a8:#0034dc72;--indigo-a9:#0031d2c1;--indigo-a10:#002ec9cc;--indigo-a11:#002bb7c5;--indigo-a12:#001046e0}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--indigo-a1:color(display-p3 .02 .02 .51/.008);--indigo-a2:color(display-p3 .024 .161 .863/.028);--indigo-a3:color(display-p3 .008 .239 .886/.067);--indigo-a4:color(display-p3 .004 .247 1/.114);--indigo-a5:color(display-p3 .004 .235 1/.169);--indigo-a6:color(display-p3 .004 .208 .984/.232);--indigo-a7:color(display-p3 .004 .176 .863/.314);--indigo-a8:color(display-p3 .004 .165 .812/.432);--indigo-a9:color(display-p3 0 .153 .773/.726);--indigo-a10:color(display-p3 0 .137 .737/.765);--indigo-a11:color(display-p3 .256 .354 .755);--indigo-a12:color(display-p3 .133 .175 .348)}}}:root,.light,.light-theme{--olive-1:#fcfdfc;--olive-2:#f8faf8;--olive-3:#eff1ef;--olive-4:#e7e9e7;--olive-5:#dfe2df;--olive-6:#d7dad7;--olive-7:#cccfcc;--olive-8:#b9bcb8;--olive-9:#898e87;--olive-10:#7f847d;--olive-11:#60655f;--olive-12:#1d211c}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--olive-1:color(display-p3 .989 .992 .989);--olive-2:color(display-p3 .974 .98 .973);--olive-3:color(display-p3 .939 .945 .937);--olive-4:color(display-p3 .907 .914 .905);--olive-5:color(display-p3 .878 .885 .875);--olive-6:color(display-p3 .846 .855 .843);--olive-7:color(display-p3 .803 .812 .8);--olive-8:color(display-p3 .727 .738 .723);--olive-9:color(display-p3 .541 .556 .532);--olive-10:color(display-p3 .5 .515 .491);--olive-11:color(display-p3 .38 .395 .374);--olive-12:color(display-p3 .117 .129 .111)}}}:root,.light,.light-theme{--olive-a1:#00550003;--olive-a2:#00490007;--olive-a3:#00200010;--olive-a4:#00160018;--olive-a5:#00180020;--olive-a6:#00140028;--olive-a7:#000f0033;--olive-a8:#040f0047;--olive-a9:#050f0078;--olive-a10:#040e0082;--olive-a11:#020a00a0;--olive-a12:#010600e3}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--olive-a1:color(display-p3 .024 .349 .024/.012);--olive-a2:color(display-p3 .024 .302 .024/.028);--olive-a3:color(display-p3 .008 .129 .008/.063);--olive-a4:color(display-p3 .012 .094 .012/.095);--olive-a5:color(display-p3 .035 .098 .008/.126);--olive-a6:color(display-p3 .027 .078 .004/.157);--olive-a7:color(display-p3 .02 .059 0/.2);--olive-a8:color(display-p3 .02 .059 .004/.279);--olive-a9:color(display-p3 .02 .051 .004/.467);--olive-a10:color(display-p3 .024 .047 0/.51);--olive-a11:color(display-p3 .012 .039 0/.628);--olive-a12:color(display-p3 .008 .024 0/.891)}}}.dark,.dark-theme{--indigo-1:#11131f;--indigo-2:#141726;--indigo-3:#182449;--indigo-4:#1d2e62;--indigo-5:#253974;--indigo-6:#304384;--indigo-7:#3a4f97;--indigo-8:#435db1;--indigo-9:#3e63dd;--indigo-10:#5472e4;--indigo-11:#9eb1ff;--indigo-12:#d6e1ff}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--indigo-1:color(display-p3 .068 .074 .118);--indigo-2:color(display-p3 .081 .089 .144);--indigo-3:color(display-p3 .105 .141 .275);--indigo-4:color(display-p3 .129 .18 .369);--indigo-5:color(display-p3 .163 .22 .439);--indigo-6:color(display-p3 .203 .262 .5);--indigo-7:color(display-p3 .245 .309 .575);--indigo-8:color(display-p3 .285 .362 .674);--indigo-9:color(display-p3 .276 .384 .837);--indigo-10:color(display-p3 .354 .445 .866);--indigo-11:color(display-p3 .63 .69 1);--indigo-12:color(display-p3 .848 .881 .99)}}}.dark,.dark-theme{--indigo-a1:#1133ff0f;--indigo-a2:#3354fa17;--indigo-a3:#2f62ff3c;--indigo-a4:#3566ff57;--indigo-a5:#4171fd6b;--indigo-a6:#5178fd7c;--indigo-a7:#5a7fff90;--indigo-a8:#5b81feac;--indigo-a9:#4671ffdb;--indigo-a10:#5c7efee3;--indigo-a11:#9eb1ff;--indigo-a12:#d6e1ff}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--indigo-a1:color(display-p3 .071 .212 .996/.055);--indigo-a2:color(display-p3 .251 .345 .988/.085);--indigo-a3:color(display-p3 .243 .404 1/.223);--indigo-a4:color(display-p3 .263 .42 1/.324);--indigo-a5:color(display-p3 .314 .451 1/.4);--indigo-a6:color(display-p3 .361 .49 1/.467);--indigo-a7:color(display-p3 .388 .51 1/.547);--indigo-a8:color(display-p3 .404 .518 1/.652);--indigo-a9:color(display-p3 .318 .451 1/.824);--indigo-a10:color(display-p3 .404 .506 1/.858);--indigo-a11:color(display-p3 .63 .69 1);--indigo-a12:color(display-p3 .848 .881 .99)}}}.dark,.dark-theme{--olive-1:#111210;--olive-2:#181917;--olive-3:#212220;--olive-4:#282a27;--olive-5:#2f312e;--olive-6:#383a36;--olive-7:#454843;--olive-8:#5c625b;--olive-9:#687066;--olive-10:#767d74;--olive-11:#afb5ad;--olive-12:#eceeec}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--olive-1:color(display-p3 .067 .07 .063);--olive-2:color(display-p3 .095 .098 .091);--olive-3:color(display-p3 .131 .135 .126);--olive-4:color(display-p3 .158 .163 .153);--olive-5:color(display-p3 .186 .192 .18);--olive-6:color(display-p3 .221 .229 .215);--olive-7:color(display-p3 .273 .284 .266);--olive-8:color(display-p3 .365 .382 .359);--olive-9:color(display-p3 .414 .438 .404);--olive-10:color(display-p3 .467 .49 .458);--olive-11:color(display-p3 .69 .709 .682);--olive-12:color(display-p3 .927 .933 .926)}}}.dark,.dark-theme{--olive-a1:#0000;--olive-a2:#f1f2f008;--olive-a3:#f4f5f312;--olive-a4:#f3fef21a;--olive-a5:#f2fbf122;--olive-a6:#f4faed2c;--olive-a7:#f2fced3b;--olive-a8:#edfdeb57;--olive-a9:#ebfde766;--olive-a10:#f0fdec74;--olive-a11:#f6fef4b0;--olive-a12:#fdfffded}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--olive-a1:color(display-p3 0 0 0/0);--olive-a2:color(display-p3 .984 .988 .976/.03);--olive-a3:color(display-p3 .992 .996 .988/.068);--olive-a4:color(display-p3 .953 .996 .949/.102);--olive-a5:color(display-p3 .969 1 .965/.131);--olive-a6:color(display-p3 .973 1 .969/.169);--olive-a7:color(display-p3 .98 1 .961/.228);--olive-a8:color(display-p3 .961 1 .957/.334);--olive-a9:color(display-p3 .949 1 .922/.397);--olive-a10:color(display-p3 .953 1 .941/.452);--olive-a11:color(display-p3 .976 1 .965/.688);--olive-a12:color(display-p3 .992 1 .992/.929)}}}:root{--tsu-accent-1:var(--indigo-1);--tsu-accent-2:var(--indigo-2);--tsu-accent-3:var(--indigo-3);--tsu-accent-4:var(--indigo-4);--tsu-accent-5:var(--indigo-5);--tsu-accent-6:var(--indigo-6);--tsu-accent-7:var(--indigo-7);--tsu-accent-8:var(--indigo-8);--tsu-accent-9:var(--indigo-9);--tsu-accent-10:var(--indigo-10);--tsu-accent-11:var(--indigo-11);--tsu-accent-12:var(--indigo-12);--tsu-neutral-1:var(--olive-1);--tsu-neutral-2:var(--olive-2);--tsu-neutral-3:var(--olive-3);--tsu-neutral-4:var(--olive-4);--tsu-neutral-5:var(--olive-5);--tsu-neutral-6:var(--olive-6);--tsu-neutral-7:var(--olive-7);--tsu-neutral-8:var(--olive-8);--tsu-neutral-9:var(--olive-9);--tsu-neutral-10:var(--olive-10);--tsu-neutral-11:var(--olive-11);--tsu-neutral-12:var(--olive-12)}:root,.light,.light-theme{--red-1:#fffcfc;--red-2:#fff7f7;--red-3:#feebec;--red-4:#ffdbdc;--red-5:#ffcdce;--red-6:#fdbdbe;--red-7:#f4a9aa;--red-8:#eb8e90;--red-9:#e5484d;--red-10:#dc3e42;--red-11:#ce2c31;--red-12:#641723}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--red-1:color(display-p3 .998 .989 .988);--red-2:color(display-p3 .995 .971 .971);--red-3:color(display-p3 .985 .925 .925);--red-4:color(display-p3 .999 .866 .866);--red-5:color(display-p3 .984 .812 .811);--red-6:color(display-p3 .955 .751 .749);--red-7:color(display-p3 .915 .675 .672);--red-8:color(display-p3 .872 .575 .572);--red-9:color(display-p3 .83 .329 .324);--red-10:color(display-p3 .798 .294 .285);--red-11:color(display-p3 .744 .234 .222);--red-12:color(display-p3 .36 .115 .143)}}}:root,.light,.light-theme{--red-a1:#ff000003;--red-a2:#ff000008;--red-a3:#f3000d14;--red-a4:#ff000824;--red-a5:#ff000632;--red-a6:#f8000442;--red-a7:#df000356;--red-a8:#d2000571;--red-a9:#db0007b7;--red-a10:#d10005c1;--red-a11:#c40006d3;--red-a12:#55000de8}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--red-a1:color(display-p3 .675 .024 .024/.012);--red-a2:color(display-p3 .863 .024 .024/.028);--red-a3:color(display-p3 .792 .008 .008/.075);--red-a4:color(display-p3 1 .008 .008/.134);--red-a5:color(display-p3 .918 .008 .008/.189);--red-a6:color(display-p3 .831 .02 .004/.251);--red-a7:color(display-p3 .741 .016 .004/.33);--red-a8:color(display-p3 .698 .012 .004/.428);--red-a9:color(display-p3 .749 .008 0/.675);--red-a10:color(display-p3 .714 .012 0/.714);--red-a11:color(display-p3 .744 .234 .222);--red-a12:color(display-p3 .36 .115 .143)}}}.dark,.dark-theme{--red-1:#191111;--red-2:#201314;--red-3:#3b1219;--red-4:#500f1c;--red-5:#611623;--red-6:#72232d;--red-7:#8c333a;--red-8:#b54548;--red-9:#e5484d;--red-10:#ec5d5e;--red-11:#ff9592;--red-12:#ffd1d9}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--red-1:color(display-p3 .093 .068 .067);--red-2:color(display-p3 .118 .077 .079);--red-3:color(display-p3 .211 .081 .099);--red-4:color(display-p3 .287 .079 .113);--red-5:color(display-p3 .348 .11 .142);--red-6:color(display-p3 .414 .16 .183);--red-7:color(display-p3 .508 .224 .236);--red-8:color(display-p3 .659 .298 .297);--red-9:color(display-p3 .83 .329 .324);--red-10:color(display-p3 .861 .403 .387);--red-11:color(display-p3 1 .57 .55);--red-12:color(display-p3 .971 .826 .852)}}}.dark,.dark-theme{--red-a1:#f4121209;--red-a2:#f22f3e11;--red-a3:#ff173f2d;--red-a4:#fe0a3b44;--red-a5:#ff204756;--red-a6:#ff3e5668;--red-a7:#ff536184;--red-a8:#ff5d61b0;--red-a9:#fe4e54e4;--red-a10:#ff6465eb;--red-a11:#ff9592;--red-a12:#ffd1d9}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--red-a1:color(display-p3 .984 .071 .071/.03);--red-a2:color(display-p3 .996 .282 .282/.055);--red-a3:color(display-p3 1 .169 .271/.156);--red-a4:color(display-p3 1 .118 .267/.236);--red-a5:color(display-p3 1 .212 .314/.303);--red-a6:color(display-p3 1 .318 .38/.374);--red-a7:color(display-p3 1 .4 .424/.475);--red-a8:color(display-p3 1 .431 .431/.635);--red-a9:color(display-p3 1 .388 .384/.82);--red-a10:color(display-p3 1 .463 .447/.853);--red-a11:color(display-p3 1 .57 .55);--red-a12:color(display-p3 .971 .826 .852)}}}:root,.light,.light-theme{--green-1:#fbfefc;--green-2:#f4fbf6;--green-3:#e6f6eb;--green-4:#d6f1df;--green-5:#c4e8d1;--green-6:#adddc0;--green-7:#8eceaa;--green-8:#5bb98b;--green-9:#30a46c;--green-10:#2b9a66;--green-11:#218358;--green-12:#193b2d}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--green-1:color(display-p3 .986 .996 .989);--green-2:color(display-p3 .963 .983 .967);--green-3:color(display-p3 .913 .964 .925);--green-4:color(display-p3 .859 .94 .879);--green-5:color(display-p3 .796 .907 .826);--green-6:color(display-p3 .718 .863 .761);--green-7:color(display-p3 .61 .801 .675);--green-8:color(display-p3 .451 .715 .559);--green-9:color(display-p3 .332 .634 .442);--green-10:color(display-p3 .308 .595 .417);--green-11:color(display-p3 .19 .5 .32);--green-12:color(display-p3 .132 .228 .18)}}}:root,.light,.light-theme{--green-a1:#00c04004;--green-a2:#00a32f0b;--green-a3:#00a43319;--green-a4:#00a83829;--green-a5:#019c393b;--green-a6:#00963c52;--green-a7:#00914071;--green-a8:#00924ba4;--green-a9:#008f4acf;--green-a10:#008647d4;--green-a11:#00713fde;--green-a12:#002616e6}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--green-a1:color(display-p3 .024 .757 .267/.016);--green-a2:color(display-p3 .024 .565 .129/.036);--green-a3:color(display-p3 .012 .596 .145/.087);--green-a4:color(display-p3 .008 .588 .145/.142);--green-a5:color(display-p3 .004 .541 .157/.204);--green-a6:color(display-p3 .004 .518 .157/.283);--green-a7:color(display-p3 .004 .486 .165/.389);--green-a8:color(display-p3 0 .478 .2/.55);--green-a9:color(display-p3 0 .455 .165/.667);--green-a10:color(display-p3 0 .416 .153/.691);--green-a11:color(display-p3 .19 .5 .32);--green-a12:color(display-p3 .132 .228 .18)}}}.dark,.dark-theme{--green-1:#0e1512;--green-2:#121b17;--green-3:#132d21;--green-4:#113b29;--green-5:#174933;--green-6:#20573e;--green-7:#28684a;--green-8:#2f7c57;--green-9:#30a46c;--green-10:#33b074;--green-11:#3dd68c;--green-12:#b1f1cb}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--green-1:color(display-p3 .062 .083 .071);--green-2:color(display-p3 .079 .106 .09);--green-3:color(display-p3 .1 .173 .133);--green-4:color(display-p3 .115 .229 .166);--green-5:color(display-p3 .147 .282 .206);--green-6:color(display-p3 .185 .338 .25);--green-7:color(display-p3 .227 .403 .298);--green-8:color(display-p3 .27 .479 .351);--green-9:color(display-p3 .332 .634 .442);--green-10:color(display-p3 .357 .682 .474);--green-11:color(display-p3 .434 .828 .573);--green-12:color(display-p3 .747 .938 .807)}}}.dark,.dark-theme{--green-a1:#00de4505;--green-a2:#29f99d0b;--green-a3:#22ff991e;--green-a4:#11ff992d;--green-a5:#2bffa23c;--green-a6:#44ffaa4b;--green-a7:#50fdac5e;--green-a8:#54ffad73;--green-a9:#44ffa49e;--green-a10:#43fea4ab;--green-a11:#46fea5d4;--green-a12:#bbffd7f0}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--green-a1:color(display-p3 0 .992 .298/.017);--green-a2:color(display-p3 .341 .98 .616/.043);--green-a3:color(display-p3 .376 .996 .655/.114);--green-a4:color(display-p3 .341 .996 .635/.173);--green-a5:color(display-p3 .408 1 .678/.232);--green-a6:color(display-p3 .475 1 .706/.29);--green-a7:color(display-p3 .514 1 .706/.362);--green-a8:color(display-p3 .529 1 .718/.442);--green-a9:color(display-p3 .502 .996 .682/.61);--green-a10:color(display-p3 .506 1 .682/.66);--green-a11:color(display-p3 .434 .828 .573);--green-a12:color(display-p3 .747 .938 .807)}}}:root,.light,.light-theme{--amber-1:#fefdfb;--amber-2:#fefbe9;--amber-3:#fff7c2;--amber-4:#ffee9c;--amber-5:#fbe577;--amber-6:#f3d673;--amber-7:#e9c162;--amber-8:#e2a336;--amber-9:#ffc53d;--amber-10:#ffba18;--amber-11:#ab6400;--amber-12:#4f3422}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--amber-1:color(display-p3 .995 .992 .985);--amber-2:color(display-p3 .994 .986 .921);--amber-3:color(display-p3 .994 .969 .782);--amber-4:color(display-p3 .989 .937 .65);--amber-5:color(display-p3 .97 .902 .527);--amber-6:color(display-p3 .936 .844 .506);--amber-7:color(display-p3 .89 .762 .443);--amber-8:color(display-p3 .85 .65 .3);--amber-9:color(display-p3 1 .77 .26);--amber-10:color(display-p3 .959 .741 .274);--amber-11:color(display-p3 .64 .4 0);--amber-12:color(display-p3 .294 .208 .145)}}}:root,.light,.light-theme{--amber-a1:#c0800004;--amber-a2:#f4d10016;--amber-a3:#ffde003d;--amber-a4:#ffd40063;--amber-a5:#f8cf0088;--amber-a6:#eab5008c;--amber-a7:#dc9b009d;--amber-a8:#da8a00c9;--amber-a9:#ffb300c2;--amber-a10:#ffb300e7;--amber-a11:#ab6400;--amber-a12:#341500dd}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--amber-a1:color(display-p3 .757 .514 .024/.016);--amber-a2:color(display-p3 .902 .804 .008/.079);--amber-a3:color(display-p3 .965 .859 .004/.22);--amber-a4:color(display-p3 .969 .82 .004/.35);--amber-a5:color(display-p3 .933 .796 .004/.475);--amber-a6:color(display-p3 .875 .682 .004/.495);--amber-a7:color(display-p3 .804 .573 0/.557);--amber-a8:color(display-p3 .788 .502 0/.699);--amber-a9:color(display-p3 1 .686 0/.742);--amber-a10:color(display-p3 .945 .643 0/.726);--amber-a11:color(display-p3 .64 .4 0);--amber-a12:color(display-p3 .294 .208 .145)}}}.dark,.dark-theme{--amber-1:#16120c;--amber-2:#1d180f;--amber-3:#302008;--amber-4:#3f2700;--amber-5:#4d3000;--amber-6:#5c3d05;--amber-7:#714f19;--amber-8:#8f6424;--amber-9:#ffc53d;--amber-10:#ffd60a;--amber-11:#ffca16;--amber-12:#ffe7b3}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--amber-1:color(display-p3 .082 .07 .05);--amber-2:color(display-p3 .111 .094 .064);--amber-3:color(display-p3 .178 .128 .049);--amber-4:color(display-p3 .239 .156 0);--amber-5:color(display-p3 .29 .193 0);--amber-6:color(display-p3 .344 .245 .076);--amber-7:color(display-p3 .422 .314 .141);--amber-8:color(display-p3 .535 .399 .189);--amber-9:color(display-p3 1 .77 .26);--amber-10:color(display-p3 1 .87 .15);--amber-11:color(display-p3 1 .8 .29);--amber-12:color(display-p3 .984 .909 .726)}}}.dark,.dark-theme{--amber-a1:#e63c0006;--amber-a2:#fd9b000d;--amber-a3:#fa820022;--amber-a4:#fc820032;--amber-a5:#fd8b0041;--amber-a6:#fd9b0051;--amber-a7:#ffab2567;--amber-a8:#ffae3587;--amber-a9:#ffc53d;--amber-a10:#ffd60a;--amber-a11:#ffca16;--amber-a12:#ffe7b3}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--amber-a1:color(display-p3 .992 .298 0/.017);--amber-a2:color(display-p3 .988 .651 0/.047);--amber-a3:color(display-p3 1 .6 0/.118);--amber-a4:color(display-p3 1 .557 0/.185);--amber-a5:color(display-p3 1 .592 0/.24);--amber-a6:color(display-p3 1 .659 .094/.299);--amber-a7:color(display-p3 1 .714 .263/.383);--amber-a8:color(display-p3 .996 .729 .306/.5);--amber-a9:color(display-p3 1 .769 .259);--amber-a10:color(display-p3 1 .871 .149);--amber-a11:color(display-p3 1 .8 .29);--amber-a12:color(display-p3 .984 .909 .726)}}}:root{--tsu-bg:var(--tsu-neutral-1);--tsu-fg:var(--tsu-neutral-12);--tsu-surface:var(--tsu-neutral-2);--tsu-surface-raised:var(--tsu-neutral-3);--tsu-surface-raised-hover:var(--tsu-neutral-4);--tsu-color-pressed:var(--tsu-surface-raised);--tsu-color-pressed-accent:var(--tsu-accent-3);--tsu-color-muted:var(--tsu-neutral-alpha-7);--tsu-color-muted-subtle:var(--tsu-neutral-alpha-5);--tsu-info-1:var(--tsu-accent-1);--tsu-info-2:var(--tsu-accent-2);--tsu-info-3:var(--tsu-accent-3);--tsu-info-4:var(--tsu-accent-4);--tsu-info-5:var(--tsu-accent-5);--tsu-info-6:var(--tsu-accent-6);--tsu-info-7:var(--tsu-accent-7);--tsu-info-8:var(--tsu-accent-8);--tsu-info-9:var(--tsu-accent-9);--tsu-info-10:var(--tsu-accent-10);--tsu-info-11:var(--tsu-accent-11);--tsu-info-12:var(--tsu-accent-12);--tsu-danger-1:var(--red-1);--tsu-danger-2:var(--red-2);--tsu-danger-3:var(--red-3);--tsu-danger-4:var(--red-4);--tsu-danger-5:var(--red-5);--tsu-danger-6:var(--red-6);--tsu-danger-7:var(--red-7);--tsu-danger-8:var(--red-8);--tsu-danger-9:var(--red-9);--tsu-danger-10:var(--red-10);--tsu-danger-11:var(--red-11);--tsu-danger-12:var(--red-12);--tsu-success-1:var(--green-1);--tsu-success-2:var(--green-2);--tsu-success-3:var(--green-3);--tsu-success-4:var(--green-4);--tsu-success-5:var(--green-5);--tsu-success-6:var(--green-6);--tsu-success-7:var(--green-7);--tsu-success-8:var(--green-8);--tsu-success-9:var(--green-9);--tsu-success-10:var(--green-10);--tsu-success-11:var(--green-11);--tsu-success-12:var(--green-12);--tsu-warning-1:var(--amber-1);--tsu-warning-2:var(--amber-2);--tsu-warning-3:var(--amber-3);--tsu-warning-4:var(--amber-4);--tsu-warning-5:var(--amber-5);--tsu-warning-6:var(--amber-6);--tsu-warning-7:var(--amber-7);--tsu-warning-8:var(--amber-8);--tsu-warning-9:var(--amber-9);--tsu-warning-10:var(--amber-10);--tsu-warning-11:var(--amber-11);--tsu-warning-12:var(--amber-12);--tsu-neutral-alpha-1:var(--olive-a1);--tsu-neutral-alpha-2:var(--olive-a2);--tsu-neutral-alpha-3:var(--olive-a3);--tsu-neutral-alpha-4:var(--olive-a4);--tsu-neutral-alpha-5:var(--olive-a5);--tsu-neutral-alpha-6:var(--olive-a6);--tsu-neutral-alpha-7:var(--olive-a7);--tsu-neutral-alpha-8:var(--olive-a8);--tsu-neutral-alpha-9:var(--olive-a9);--tsu-neutral-alpha-10:var(--olive-a10);--tsu-neutral-alpha-11:var(--olive-a11);--tsu-neutral-alpha-12:var(--olive-a12);--tsu-disabled-bg:var(--tsu-surface-raised);--tsu-disabled-fg:var(--tsu-neutral-9);--tsu-disabled-border:var(--tsu-neutral-7);--tsu-focus-bg:var(--tsu-surface-raised-hover);--tsu-focus-border:var(--tsu-accent-8);--ink:var(--tsu-fg);--muted:var(--tsu-neutral-11);--accent:var(--tsu-accent-9);--surface:var(--tsu-bg);--bg:var(--tsu-neutral-2);--border:var(--tsu-neutral-7);--danger:var(--tsu-danger-9)}:root.dark{--tsu-fg:#fff}:root{--tsu-radius-round:9999px;--tsu-radius-l3-xs:14px;--tsu-radius-l2-xs:6px;--tsu-radius-l1-xs:2px;--tsu-radius-l3-sm:14px;--tsu-radius-l2-sm:6px;--tsu-radius-l1-sm:2px;--tsu-radius-l3-md:16px;--tsu-radius-l2-md:8px;--tsu-radius-l1-md:4px;--tsu-radius-l3-lg:18px;--tsu-radius-l2-lg:10px;--tsu-radius-l1-lg:6px;--tsu-radius-l3-xl:20px;--tsu-radius-l2-xl:12px;--tsu-radius-l1-xl:8px;--tsu-radius-l3-xxl:28px;--tsu-radius-l2-xxl:20px;--tsu-radius-l1-xxl:16px;--tsu-level-primary-xs:32px;--tsu-level-primary-sm:36px;--tsu-level-primary-md:40px;--tsu-level-primary-lg:44px;--tsu-level-primary-xl:48px;--tsu-level-primary-xxl:64px;--tsu-level-secondary-xs:16px;--tsu-level-secondary-sm:18px;--tsu-level-secondary-md:20px;--tsu-level-secondary-lg:22px;--tsu-level-secondary-xl:24px;--tsu-level-secondary-xxl:32px;--tsu-comp-height-xs:var(--tsu-level-primary-xs);--tsu-comp-height-sm:var(--tsu-level-primary-sm);--tsu-comp-height-md:var(--tsu-level-primary-md);--tsu-comp-height-lg:var(--tsu-level-primary-lg);--tsu-comp-height-xl:var(--tsu-level-primary-xl);--tsu-comp-height-xxl:var(--tsu-level-primary-xxl);--tsu-comp-font-size-xs:12px;--tsu-comp-font-size-sm:14px;--tsu-comp-font-size-md:14px;--tsu-comp-font-size-lg:16px;--tsu-comp-font-size-xl:18px;--tsu-comp-font-size-xxl:20px;--tsu-comp-line-height-xs:16px;--tsu-comp-line-height-sm:20px;--tsu-comp-line-height-md:20px;--tsu-comp-line-height-lg:24px;--tsu-comp-line-height-xl:28px;--tsu-comp-line-height-xxl:30px;--tsu-comp-padding-y-xs:7px;--tsu-comp-padding-y-sm:7px;--tsu-comp-padding-y-md:9px;--tsu-comp-padding-y-lg:9px;--tsu-comp-padding-y-xl:9px;--tsu-comp-padding-y-xxl:16px;--tsu-comp-padding-x-xs:8px;--tsu-comp-padding-x-sm:12px;--tsu-comp-padding-x-md:16px;--tsu-comp-padding-x-lg:20px;--tsu-comp-padding-x-xl:24px;--tsu-comp-padding-x-xxl:32px;--tsu-comp-secondary-height-xs:var(--tsu-level-secondary-xs);--tsu-comp-secondary-height-sm:var(--tsu-level-secondary-sm);--tsu-comp-secondary-height-md:var(--tsu-level-secondary-md);--tsu-comp-secondary-height-lg:var(--tsu-level-secondary-lg);--tsu-comp-secondary-height-xl:var(--tsu-level-secondary-xl);--tsu-comp-secondary-height-xxl:var(--tsu-level-secondary-xxl);--tsu-font-size-xs:10px;--tsu-font-size-sm:12px;--tsu-font-size-md:14px;--tsu-font-size-lg:16px;--tsu-font-size-xl:20px;--tsu-font-size-xxl:24px;--tsu-font-weight-regular:400;--tsu-font-weight-medium:500;--tsu-font-weight-semibold:600;--tsu-text-title-size:var(--tsu-font-size-lg);--tsu-text-title-weight:var(--tsu-font-weight-semibold);--tsu-text-title-line-height:24px;--tsu-text-body-size:var(--tsu-font-size-md);--tsu-text-body-weight:var(--tsu-font-weight-regular);--tsu-text-body-line-height:20px;--tsu-text-label-size:var(--tsu-font-size-md);--tsu-text-label-weight:var(--tsu-font-weight-medium);--tsu-text-label-line-height:20px;--tsu-text-caption-size:var(--tsu-font-size-sm);--tsu-text-caption-weight:var(--tsu-font-weight-regular);--tsu-text-caption-line-height:16px;--tsu-spacing-xxs:2px;--tsu-spacing-xs:4px;--tsu-spacing-sm:8px;--tsu-spacing-md:12px;--tsu-spacing-lg:16px;--tsu-spacing-xl:24px;--tsu-spacing-xxl:32px;--tsu-duration-fast:.15s;--tsu-duration-normal:.25s;--tsu-duration-overlay-enter:.35s;--tsu-duration-overlay-exit:.2s;--tsu-ease-standard:cubic-bezier(.2, 0, 0, 1);--tsu-ease-out:cubic-bezier(.32, .72, 0, 1);--tsu-ease-in:cubic-bezier(.4, 0, 1, 1);--tsu-transition-fast:var(--tsu-duration-fast) var(--tsu-ease-standard);--tsu-transition-normal:var(--tsu-duration-normal) var(--tsu-ease-standard);--tsu-transition-overlay-enter:var(--tsu-duration-overlay-enter) var(--tsu-ease-out);--tsu-transition-overlay-exit:var(--tsu-duration-overlay-exit) var(--tsu-ease-in);--tsu-transition-overlay:var(--tsu-transition-overlay-enter);--tsu-shadow-sm:0 1px 2px var(--tsu-neutral-alpha-6), 0 2px 4px var(--tsu-neutral-alpha-7);--tsu-shadow-md:0 1px 3px var(--tsu-neutral-alpha-6), 0 4px 16px var(--tsu-neutral-alpha-8);--tsu-shadow-lg:0 2px 6px var(--tsu-neutral-alpha-6), 0 12px 32px var(--tsu-neutral-alpha-10);--tsu-font-family:system-ui, -apple-system, sans-serif;--tsu-line-height:1.5;--tsu-container-padding-sm:12px;--tsu-container-padding-md:16px;--tsu-container-padding-lg:24px;--tsu-container-padding-xl:32px;--tsu-z-base:0;--tsu-z-dropdown:100;--tsu-z-modal:200;--tsu-z-toast:300}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}*{-webkit-tap-highlight-color:#0000;margin:0;padding:0}:focus{outline:none}body{min-height:100vh;font-family:var(--tsu-font-family);font-size:var(--tsu-font-size-md);line-height:var(--tsu-line-height);color:var(--tsu-fg);background-color:var(--tsu-bg);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-weight:var(--tsu-font-weight-semibold)}a{color:inherit;text-decoration:none}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}:where(ul,ol){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(button){appearance:none;cursor:pointer;background:0 0;border:none}:where([hidden]){display:none}input[type=search]::-webkit-search-cancel-button{display:none}input[type=search]::-ms-clear{display:none}
1
+ :root,.light,.light-theme{--indigo-1:#fdfdfe;--indigo-2:#f7f9ff;--indigo-3:#edf2fe;--indigo-4:#e1e9ff;--indigo-5:#d2deff;--indigo-6:#c1d0ff;--indigo-7:#abbdf9;--indigo-8:#8da4ef;--indigo-9:#3e63dd;--indigo-10:#3358d4;--indigo-11:#3a5bc7;--indigo-12:#1f2d5c}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--indigo-1:color(display-p3 .992 .992 .996);--indigo-2:color(display-p3 .971 .977 .998);--indigo-3:color(display-p3 .933 .948 .992);--indigo-4:color(display-p3 .885 .914 1);--indigo-5:color(display-p3 .831 .87 1);--indigo-6:color(display-p3 .767 .814 .995);--indigo-7:color(display-p3 .685 .74 .957);--indigo-8:color(display-p3 .569 .639 .916);--indigo-9:color(display-p3 .276 .384 .837);--indigo-10:color(display-p3 .234 .343 .801);--indigo-11:color(display-p3 .256 .354 .755);--indigo-12:color(display-p3 .133 .175 .348)}}}:root,.light,.light-theme{--indigo-a1:#00008002;--indigo-a2:#0040ff08;--indigo-a3:#0047f112;--indigo-a4:#0044ff1e;--indigo-a5:#0044ff2d;--indigo-a6:#003eff3e;--indigo-a7:#0037ed54;--indigo-a8:#0034dc72;--indigo-a9:#0031d2c1;--indigo-a10:#002ec9cc;--indigo-a11:#002bb7c5;--indigo-a12:#001046e0}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--indigo-a1:color(display-p3 .02 .02 .51/.008);--indigo-a2:color(display-p3 .024 .161 .863/.028);--indigo-a3:color(display-p3 .008 .239 .886/.067);--indigo-a4:color(display-p3 .004 .247 1/.114);--indigo-a5:color(display-p3 .004 .235 1/.169);--indigo-a6:color(display-p3 .004 .208 .984/.232);--indigo-a7:color(display-p3 .004 .176 .863/.314);--indigo-a8:color(display-p3 .004 .165 .812/.432);--indigo-a9:color(display-p3 0 .153 .773/.726);--indigo-a10:color(display-p3 0 .137 .737/.765);--indigo-a11:color(display-p3 .256 .354 .755);--indigo-a12:color(display-p3 .133 .175 .348)}}}:root,.light,.light-theme{--olive-1:#fcfdfc;--olive-2:#f8faf8;--olive-3:#eff1ef;--olive-4:#e7e9e7;--olive-5:#dfe2df;--olive-6:#d7dad7;--olive-7:#cccfcc;--olive-8:#b9bcb8;--olive-9:#898e87;--olive-10:#7f847d;--olive-11:#60655f;--olive-12:#1d211c}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--olive-1:color(display-p3 .989 .992 .989);--olive-2:color(display-p3 .974 .98 .973);--olive-3:color(display-p3 .939 .945 .937);--olive-4:color(display-p3 .907 .914 .905);--olive-5:color(display-p3 .878 .885 .875);--olive-6:color(display-p3 .846 .855 .843);--olive-7:color(display-p3 .803 .812 .8);--olive-8:color(display-p3 .727 .738 .723);--olive-9:color(display-p3 .541 .556 .532);--olive-10:color(display-p3 .5 .515 .491);--olive-11:color(display-p3 .38 .395 .374);--olive-12:color(display-p3 .117 .129 .111)}}}:root,.light,.light-theme{--olive-a1:#00550003;--olive-a2:#00490007;--olive-a3:#00200010;--olive-a4:#00160018;--olive-a5:#00180020;--olive-a6:#00140028;--olive-a7:#000f0033;--olive-a8:#040f0047;--olive-a9:#050f0078;--olive-a10:#040e0082;--olive-a11:#020a00a0;--olive-a12:#010600e3}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--olive-a1:color(display-p3 .024 .349 .024/.012);--olive-a2:color(display-p3 .024 .302 .024/.028);--olive-a3:color(display-p3 .008 .129 .008/.063);--olive-a4:color(display-p3 .012 .094 .012/.095);--olive-a5:color(display-p3 .035 .098 .008/.126);--olive-a6:color(display-p3 .027 .078 .004/.157);--olive-a7:color(display-p3 .02 .059 0/.2);--olive-a8:color(display-p3 .02 .059 .004/.279);--olive-a9:color(display-p3 .02 .051 .004/.467);--olive-a10:color(display-p3 .024 .047 0/.51);--olive-a11:color(display-p3 .012 .039 0/.628);--olive-a12:color(display-p3 .008 .024 0/.891)}}}.dark,.dark-theme{--indigo-1:#11131f;--indigo-2:#141726;--indigo-3:#182449;--indigo-4:#1d2e62;--indigo-5:#253974;--indigo-6:#304384;--indigo-7:#3a4f97;--indigo-8:#435db1;--indigo-9:#3e63dd;--indigo-10:#5472e4;--indigo-11:#9eb1ff;--indigo-12:#d6e1ff}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--indigo-1:color(display-p3 .068 .074 .118);--indigo-2:color(display-p3 .081 .089 .144);--indigo-3:color(display-p3 .105 .141 .275);--indigo-4:color(display-p3 .129 .18 .369);--indigo-5:color(display-p3 .163 .22 .439);--indigo-6:color(display-p3 .203 .262 .5);--indigo-7:color(display-p3 .245 .309 .575);--indigo-8:color(display-p3 .285 .362 .674);--indigo-9:color(display-p3 .276 .384 .837);--indigo-10:color(display-p3 .354 .445 .866);--indigo-11:color(display-p3 .63 .69 1);--indigo-12:color(display-p3 .848 .881 .99)}}}.dark,.dark-theme{--indigo-a1:#1133ff0f;--indigo-a2:#3354fa17;--indigo-a3:#2f62ff3c;--indigo-a4:#3566ff57;--indigo-a5:#4171fd6b;--indigo-a6:#5178fd7c;--indigo-a7:#5a7fff90;--indigo-a8:#5b81feac;--indigo-a9:#4671ffdb;--indigo-a10:#5c7efee3;--indigo-a11:#9eb1ff;--indigo-a12:#d6e1ff}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--indigo-a1:color(display-p3 .071 .212 .996/.055);--indigo-a2:color(display-p3 .251 .345 .988/.085);--indigo-a3:color(display-p3 .243 .404 1/.223);--indigo-a4:color(display-p3 .263 .42 1/.324);--indigo-a5:color(display-p3 .314 .451 1/.4);--indigo-a6:color(display-p3 .361 .49 1/.467);--indigo-a7:color(display-p3 .388 .51 1/.547);--indigo-a8:color(display-p3 .404 .518 1/.652);--indigo-a9:color(display-p3 .318 .451 1/.824);--indigo-a10:color(display-p3 .404 .506 1/.858);--indigo-a11:color(display-p3 .63 .69 1);--indigo-a12:color(display-p3 .848 .881 .99)}}}.dark,.dark-theme{--olive-1:#111210;--olive-2:#181917;--olive-3:#212220;--olive-4:#282a27;--olive-5:#2f312e;--olive-6:#383a36;--olive-7:#454843;--olive-8:#5c625b;--olive-9:#687066;--olive-10:#767d74;--olive-11:#afb5ad;--olive-12:#eceeec}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--olive-1:color(display-p3 .067 .07 .063);--olive-2:color(display-p3 .095 .098 .091);--olive-3:color(display-p3 .131 .135 .126);--olive-4:color(display-p3 .158 .163 .153);--olive-5:color(display-p3 .186 .192 .18);--olive-6:color(display-p3 .221 .229 .215);--olive-7:color(display-p3 .273 .284 .266);--olive-8:color(display-p3 .365 .382 .359);--olive-9:color(display-p3 .414 .438 .404);--olive-10:color(display-p3 .467 .49 .458);--olive-11:color(display-p3 .69 .709 .682);--olive-12:color(display-p3 .927 .933 .926)}}}.dark,.dark-theme{--olive-a1:#0000;--olive-a2:#f1f2f008;--olive-a3:#f4f5f312;--olive-a4:#f3fef21a;--olive-a5:#f2fbf122;--olive-a6:#f4faed2c;--olive-a7:#f2fced3b;--olive-a8:#edfdeb57;--olive-a9:#ebfde766;--olive-a10:#f0fdec74;--olive-a11:#f6fef4b0;--olive-a12:#fdfffded}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--olive-a1:color(display-p3 0 0 0/0);--olive-a2:color(display-p3 .984 .988 .976/.03);--olive-a3:color(display-p3 .992 .996 .988/.068);--olive-a4:color(display-p3 .953 .996 .949/.102);--olive-a5:color(display-p3 .969 1 .965/.131);--olive-a6:color(display-p3 .973 1 .969/.169);--olive-a7:color(display-p3 .98 1 .961/.228);--olive-a8:color(display-p3 .961 1 .957/.334);--olive-a9:color(display-p3 .949 1 .922/.397);--olive-a10:color(display-p3 .953 1 .941/.452);--olive-a11:color(display-p3 .976 1 .965/.688);--olive-a12:color(display-p3 .992 1 .992/.929)}}}:root{--tsu-accent-1:var(--indigo-1);--tsu-accent-2:var(--indigo-2);--tsu-accent-3:var(--indigo-3);--tsu-accent-4:var(--indigo-4);--tsu-accent-5:var(--indigo-5);--tsu-accent-6:var(--indigo-6);--tsu-accent-7:var(--indigo-7);--tsu-accent-8:var(--indigo-8);--tsu-accent-9:var(--indigo-9);--tsu-accent-10:var(--indigo-10);--tsu-accent-11:var(--indigo-11);--tsu-accent-12:var(--indigo-12);--tsu-accent-alpha-1:var(--indigo-a1);--tsu-accent-alpha-2:var(--indigo-a2);--tsu-accent-alpha-3:var(--indigo-a3);--tsu-accent-alpha-4:var(--indigo-a4);--tsu-accent-alpha-5:var(--indigo-a5);--tsu-accent-alpha-6:var(--indigo-a6);--tsu-accent-alpha-7:var(--indigo-a7);--tsu-accent-alpha-8:var(--indigo-a8);--tsu-accent-alpha-9:var(--indigo-a9);--tsu-accent-alpha-10:var(--indigo-a10);--tsu-accent-alpha-11:var(--indigo-a11);--tsu-accent-alpha-12:var(--indigo-a12);--tsu-neutral-1:var(--olive-1);--tsu-neutral-2:var(--olive-2);--tsu-neutral-3:var(--olive-3);--tsu-neutral-4:var(--olive-4);--tsu-neutral-5:var(--olive-5);--tsu-neutral-6:var(--olive-6);--tsu-neutral-7:var(--olive-7);--tsu-neutral-8:var(--olive-8);--tsu-neutral-9:var(--olive-9);--tsu-neutral-10:var(--olive-10);--tsu-neutral-11:var(--olive-11);--tsu-neutral-12:var(--olive-12)}:root,.light,.light-theme{--red-1:#fffcfc;--red-2:#fff7f7;--red-3:#feebec;--red-4:#ffdbdc;--red-5:#ffcdce;--red-6:#fdbdbe;--red-7:#f4a9aa;--red-8:#eb8e90;--red-9:#e5484d;--red-10:#dc3e42;--red-11:#ce2c31;--red-12:#641723}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--red-1:color(display-p3 .998 .989 .988);--red-2:color(display-p3 .995 .971 .971);--red-3:color(display-p3 .985 .925 .925);--red-4:color(display-p3 .999 .866 .866);--red-5:color(display-p3 .984 .812 .811);--red-6:color(display-p3 .955 .751 .749);--red-7:color(display-p3 .915 .675 .672);--red-8:color(display-p3 .872 .575 .572);--red-9:color(display-p3 .83 .329 .324);--red-10:color(display-p3 .798 .294 .285);--red-11:color(display-p3 .744 .234 .222);--red-12:color(display-p3 .36 .115 .143)}}}:root,.light,.light-theme{--red-a1:#ff000003;--red-a2:#ff000008;--red-a3:#f3000d14;--red-a4:#ff000824;--red-a5:#ff000632;--red-a6:#f8000442;--red-a7:#df000356;--red-a8:#d2000571;--red-a9:#db0007b7;--red-a10:#d10005c1;--red-a11:#c40006d3;--red-a12:#55000de8}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--red-a1:color(display-p3 .675 .024 .024/.012);--red-a2:color(display-p3 .863 .024 .024/.028);--red-a3:color(display-p3 .792 .008 .008/.075);--red-a4:color(display-p3 1 .008 .008/.134);--red-a5:color(display-p3 .918 .008 .008/.189);--red-a6:color(display-p3 .831 .02 .004/.251);--red-a7:color(display-p3 .741 .016 .004/.33);--red-a8:color(display-p3 .698 .012 .004/.428);--red-a9:color(display-p3 .749 .008 0/.675);--red-a10:color(display-p3 .714 .012 0/.714);--red-a11:color(display-p3 .744 .234 .222);--red-a12:color(display-p3 .36 .115 .143)}}}.dark,.dark-theme{--red-1:#191111;--red-2:#201314;--red-3:#3b1219;--red-4:#500f1c;--red-5:#611623;--red-6:#72232d;--red-7:#8c333a;--red-8:#b54548;--red-9:#e5484d;--red-10:#ec5d5e;--red-11:#ff9592;--red-12:#ffd1d9}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--red-1:color(display-p3 .093 .068 .067);--red-2:color(display-p3 .118 .077 .079);--red-3:color(display-p3 .211 .081 .099);--red-4:color(display-p3 .287 .079 .113);--red-5:color(display-p3 .348 .11 .142);--red-6:color(display-p3 .414 .16 .183);--red-7:color(display-p3 .508 .224 .236);--red-8:color(display-p3 .659 .298 .297);--red-9:color(display-p3 .83 .329 .324);--red-10:color(display-p3 .861 .403 .387);--red-11:color(display-p3 1 .57 .55);--red-12:color(display-p3 .971 .826 .852)}}}.dark,.dark-theme{--red-a1:#f4121209;--red-a2:#f22f3e11;--red-a3:#ff173f2d;--red-a4:#fe0a3b44;--red-a5:#ff204756;--red-a6:#ff3e5668;--red-a7:#ff536184;--red-a8:#ff5d61b0;--red-a9:#fe4e54e4;--red-a10:#ff6465eb;--red-a11:#ff9592;--red-a12:#ffd1d9}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--red-a1:color(display-p3 .984 .071 .071/.03);--red-a2:color(display-p3 .996 .282 .282/.055);--red-a3:color(display-p3 1 .169 .271/.156);--red-a4:color(display-p3 1 .118 .267/.236);--red-a5:color(display-p3 1 .212 .314/.303);--red-a6:color(display-p3 1 .318 .38/.374);--red-a7:color(display-p3 1 .4 .424/.475);--red-a8:color(display-p3 1 .431 .431/.635);--red-a9:color(display-p3 1 .388 .384/.82);--red-a10:color(display-p3 1 .463 .447/.853);--red-a11:color(display-p3 1 .57 .55);--red-a12:color(display-p3 .971 .826 .852)}}}:root,.light,.light-theme{--green-1:#fbfefc;--green-2:#f4fbf6;--green-3:#e6f6eb;--green-4:#d6f1df;--green-5:#c4e8d1;--green-6:#adddc0;--green-7:#8eceaa;--green-8:#5bb98b;--green-9:#30a46c;--green-10:#2b9a66;--green-11:#218358;--green-12:#193b2d}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--green-1:color(display-p3 .986 .996 .989);--green-2:color(display-p3 .963 .983 .967);--green-3:color(display-p3 .913 .964 .925);--green-4:color(display-p3 .859 .94 .879);--green-5:color(display-p3 .796 .907 .826);--green-6:color(display-p3 .718 .863 .761);--green-7:color(display-p3 .61 .801 .675);--green-8:color(display-p3 .451 .715 .559);--green-9:color(display-p3 .332 .634 .442);--green-10:color(display-p3 .308 .595 .417);--green-11:color(display-p3 .19 .5 .32);--green-12:color(display-p3 .132 .228 .18)}}}:root,.light,.light-theme{--green-a1:#00c04004;--green-a2:#00a32f0b;--green-a3:#00a43319;--green-a4:#00a83829;--green-a5:#019c393b;--green-a6:#00963c52;--green-a7:#00914071;--green-a8:#00924ba4;--green-a9:#008f4acf;--green-a10:#008647d4;--green-a11:#00713fde;--green-a12:#002616e6}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--green-a1:color(display-p3 .024 .757 .267/.016);--green-a2:color(display-p3 .024 .565 .129/.036);--green-a3:color(display-p3 .012 .596 .145/.087);--green-a4:color(display-p3 .008 .588 .145/.142);--green-a5:color(display-p3 .004 .541 .157/.204);--green-a6:color(display-p3 .004 .518 .157/.283);--green-a7:color(display-p3 .004 .486 .165/.389);--green-a8:color(display-p3 0 .478 .2/.55);--green-a9:color(display-p3 0 .455 .165/.667);--green-a10:color(display-p3 0 .416 .153/.691);--green-a11:color(display-p3 .19 .5 .32);--green-a12:color(display-p3 .132 .228 .18)}}}.dark,.dark-theme{--green-1:#0e1512;--green-2:#121b17;--green-3:#132d21;--green-4:#113b29;--green-5:#174933;--green-6:#20573e;--green-7:#28684a;--green-8:#2f7c57;--green-9:#30a46c;--green-10:#33b074;--green-11:#3dd68c;--green-12:#b1f1cb}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--green-1:color(display-p3 .062 .083 .071);--green-2:color(display-p3 .079 .106 .09);--green-3:color(display-p3 .1 .173 .133);--green-4:color(display-p3 .115 .229 .166);--green-5:color(display-p3 .147 .282 .206);--green-6:color(display-p3 .185 .338 .25);--green-7:color(display-p3 .227 .403 .298);--green-8:color(display-p3 .27 .479 .351);--green-9:color(display-p3 .332 .634 .442);--green-10:color(display-p3 .357 .682 .474);--green-11:color(display-p3 .434 .828 .573);--green-12:color(display-p3 .747 .938 .807)}}}.dark,.dark-theme{--green-a1:#00de4505;--green-a2:#29f99d0b;--green-a3:#22ff991e;--green-a4:#11ff992d;--green-a5:#2bffa23c;--green-a6:#44ffaa4b;--green-a7:#50fdac5e;--green-a8:#54ffad73;--green-a9:#44ffa49e;--green-a10:#43fea4ab;--green-a11:#46fea5d4;--green-a12:#bbffd7f0}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--green-a1:color(display-p3 0 .992 .298/.017);--green-a2:color(display-p3 .341 .98 .616/.043);--green-a3:color(display-p3 .376 .996 .655/.114);--green-a4:color(display-p3 .341 .996 .635/.173);--green-a5:color(display-p3 .408 1 .678/.232);--green-a6:color(display-p3 .475 1 .706/.29);--green-a7:color(display-p3 .514 1 .706/.362);--green-a8:color(display-p3 .529 1 .718/.442);--green-a9:color(display-p3 .502 .996 .682/.61);--green-a10:color(display-p3 .506 1 .682/.66);--green-a11:color(display-p3 .434 .828 .573);--green-a12:color(display-p3 .747 .938 .807)}}}:root,.light,.light-theme{--amber-1:#fefdfb;--amber-2:#fefbe9;--amber-3:#fff7c2;--amber-4:#ffee9c;--amber-5:#fbe577;--amber-6:#f3d673;--amber-7:#e9c162;--amber-8:#e2a336;--amber-9:#ffc53d;--amber-10:#ffba18;--amber-11:#ab6400;--amber-12:#4f3422}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--amber-1:color(display-p3 .995 .992 .985);--amber-2:color(display-p3 .994 .986 .921);--amber-3:color(display-p3 .994 .969 .782);--amber-4:color(display-p3 .989 .937 .65);--amber-5:color(display-p3 .97 .902 .527);--amber-6:color(display-p3 .936 .844 .506);--amber-7:color(display-p3 .89 .762 .443);--amber-8:color(display-p3 .85 .65 .3);--amber-9:color(display-p3 1 .77 .26);--amber-10:color(display-p3 .959 .741 .274);--amber-11:color(display-p3 .64 .4 0);--amber-12:color(display-p3 .294 .208 .145)}}}:root,.light,.light-theme{--amber-a1:#c0800004;--amber-a2:#f4d10016;--amber-a3:#ffde003d;--amber-a4:#ffd40063;--amber-a5:#f8cf0088;--amber-a6:#eab5008c;--amber-a7:#dc9b009d;--amber-a8:#da8a00c9;--amber-a9:#ffb300c2;--amber-a10:#ffb300e7;--amber-a11:#ab6400;--amber-a12:#341500dd}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){:root,.light,.light-theme{--amber-a1:color(display-p3 .757 .514 .024/.016);--amber-a2:color(display-p3 .902 .804 .008/.079);--amber-a3:color(display-p3 .965 .859 .004/.22);--amber-a4:color(display-p3 .969 .82 .004/.35);--amber-a5:color(display-p3 .933 .796 .004/.475);--amber-a6:color(display-p3 .875 .682 .004/.495);--amber-a7:color(display-p3 .804 .573 0/.557);--amber-a8:color(display-p3 .788 .502 0/.699);--amber-a9:color(display-p3 1 .686 0/.742);--amber-a10:color(display-p3 .945 .643 0/.726);--amber-a11:color(display-p3 .64 .4 0);--amber-a12:color(display-p3 .294 .208 .145)}}}.dark,.dark-theme{--amber-1:#16120c;--amber-2:#1d180f;--amber-3:#302008;--amber-4:#3f2700;--amber-5:#4d3000;--amber-6:#5c3d05;--amber-7:#714f19;--amber-8:#8f6424;--amber-9:#ffc53d;--amber-10:#ffd60a;--amber-11:#ffca16;--amber-12:#ffe7b3}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--amber-1:color(display-p3 .082 .07 .05);--amber-2:color(display-p3 .111 .094 .064);--amber-3:color(display-p3 .178 .128 .049);--amber-4:color(display-p3 .239 .156 0);--amber-5:color(display-p3 .29 .193 0);--amber-6:color(display-p3 .344 .245 .076);--amber-7:color(display-p3 .422 .314 .141);--amber-8:color(display-p3 .535 .399 .189);--amber-9:color(display-p3 1 .77 .26);--amber-10:color(display-p3 1 .87 .15);--amber-11:color(display-p3 1 .8 .29);--amber-12:color(display-p3 .984 .909 .726)}}}.dark,.dark-theme{--amber-a1:#e63c0006;--amber-a2:#fd9b000d;--amber-a3:#fa820022;--amber-a4:#fc820032;--amber-a5:#fd8b0041;--amber-a6:#fd9b0051;--amber-a7:#ffab2567;--amber-a8:#ffae3587;--amber-a9:#ffc53d;--amber-a10:#ffd60a;--amber-a11:#ffca16;--amber-a12:#ffe7b3}@supports (color:color(display-p3 1 1 1)){@media (color-gamut:p3){.dark,.dark-theme{--amber-a1:color(display-p3 .992 .298 0/.017);--amber-a2:color(display-p3 .988 .651 0/.047);--amber-a3:color(display-p3 1 .6 0/.118);--amber-a4:color(display-p3 1 .557 0/.185);--amber-a5:color(display-p3 1 .592 0/.24);--amber-a6:color(display-p3 1 .659 .094/.299);--amber-a7:color(display-p3 1 .714 .263/.383);--amber-a8:color(display-p3 .996 .729 .306/.5);--amber-a9:color(display-p3 1 .769 .259);--amber-a10:color(display-p3 1 .871 .149);--amber-a11:color(display-p3 1 .8 .29);--amber-a12:color(display-p3 .984 .909 .726)}}}:root{--tsu-bg:var(--tsu-neutral-1);--tsu-fg:var(--tsu-neutral-12);--tsu-surface:var(--tsu-neutral-2);--tsu-surface-raised:var(--tsu-neutral-3);--tsu-surface-raised-hover:var(--tsu-neutral-4);--tsu-color-pressed:var(--tsu-surface-raised);--tsu-color-pressed-accent:var(--tsu-accent-3);--tsu-color-muted:var(--tsu-neutral-alpha-7);--tsu-color-muted-subtle:var(--tsu-neutral-alpha-5);--tsu-info-1:var(--tsu-accent-1);--tsu-info-2:var(--tsu-accent-2);--tsu-info-3:var(--tsu-accent-3);--tsu-info-4:var(--tsu-accent-4);--tsu-info-5:var(--tsu-accent-5);--tsu-info-6:var(--tsu-accent-6);--tsu-info-7:var(--tsu-accent-7);--tsu-info-8:var(--tsu-accent-8);--tsu-info-9:var(--tsu-accent-9);--tsu-info-10:var(--tsu-accent-10);--tsu-info-11:var(--tsu-accent-11);--tsu-info-12:var(--tsu-accent-12);--tsu-danger-1:var(--red-1);--tsu-danger-2:var(--red-2);--tsu-danger-3:var(--red-3);--tsu-danger-4:var(--red-4);--tsu-danger-5:var(--red-5);--tsu-danger-6:var(--red-6);--tsu-danger-7:var(--red-7);--tsu-danger-8:var(--red-8);--tsu-danger-9:var(--red-9);--tsu-danger-10:var(--red-10);--tsu-danger-11:var(--red-11);--tsu-danger-12:var(--red-12);--tsu-danger-alpha-1:var(--red-a1);--tsu-danger-alpha-2:var(--red-a2);--tsu-danger-alpha-3:var(--red-a3);--tsu-danger-alpha-4:var(--red-a4);--tsu-danger-alpha-5:var(--red-a5);--tsu-danger-alpha-6:var(--red-a6);--tsu-danger-alpha-7:var(--red-a7);--tsu-danger-alpha-8:var(--red-a8);--tsu-danger-alpha-9:var(--red-a9);--tsu-danger-alpha-10:var(--red-a10);--tsu-danger-alpha-11:var(--red-a11);--tsu-danger-alpha-12:var(--red-a12);--tsu-success-1:var(--green-1);--tsu-success-2:var(--green-2);--tsu-success-3:var(--green-3);--tsu-success-4:var(--green-4);--tsu-success-5:var(--green-5);--tsu-success-6:var(--green-6);--tsu-success-7:var(--green-7);--tsu-success-8:var(--green-8);--tsu-success-9:var(--green-9);--tsu-success-10:var(--green-10);--tsu-success-11:var(--green-11);--tsu-success-12:var(--green-12);--tsu-success-alpha-1:var(--green-a1);--tsu-success-alpha-2:var(--green-a2);--tsu-success-alpha-3:var(--green-a3);--tsu-success-alpha-4:var(--green-a4);--tsu-success-alpha-5:var(--green-a5);--tsu-success-alpha-6:var(--green-a6);--tsu-success-alpha-7:var(--green-a7);--tsu-success-alpha-8:var(--green-a8);--tsu-success-alpha-9:var(--green-a9);--tsu-success-alpha-10:var(--green-a10);--tsu-success-alpha-11:var(--green-a11);--tsu-success-alpha-12:var(--green-a12);--tsu-warning-1:var(--amber-1);--tsu-warning-2:var(--amber-2);--tsu-warning-3:var(--amber-3);--tsu-warning-4:var(--amber-4);--tsu-warning-5:var(--amber-5);--tsu-warning-6:var(--amber-6);--tsu-warning-7:var(--amber-7);--tsu-warning-8:var(--amber-8);--tsu-warning-9:var(--amber-9);--tsu-warning-10:var(--amber-10);--tsu-warning-11:var(--amber-11);--tsu-warning-12:var(--amber-12);--tsu-warning-alpha-1:var(--amber-a1);--tsu-warning-alpha-2:var(--amber-a2);--tsu-warning-alpha-3:var(--amber-a3);--tsu-warning-alpha-4:var(--amber-a4);--tsu-warning-alpha-5:var(--amber-a5);--tsu-warning-alpha-6:var(--amber-a6);--tsu-warning-alpha-7:var(--amber-a7);--tsu-warning-alpha-8:var(--amber-a8);--tsu-warning-alpha-9:var(--amber-a9);--tsu-warning-alpha-10:var(--amber-a10);--tsu-warning-alpha-11:var(--amber-a11);--tsu-warning-alpha-12:var(--amber-a12);--tsu-neutral-alpha-1:var(--olive-a1);--tsu-neutral-alpha-2:var(--olive-a2);--tsu-neutral-alpha-3:var(--olive-a3);--tsu-neutral-alpha-4:var(--olive-a4);--tsu-neutral-alpha-5:var(--olive-a5);--tsu-neutral-alpha-6:var(--olive-a6);--tsu-neutral-alpha-7:var(--olive-a7);--tsu-neutral-alpha-8:var(--olive-a8);--tsu-neutral-alpha-9:var(--olive-a9);--tsu-neutral-alpha-10:var(--olive-a10);--tsu-neutral-alpha-11:var(--olive-a11);--tsu-neutral-alpha-12:var(--olive-a12);--tsu-disabled-bg:var(--tsu-surface-raised);--tsu-disabled-fg:var(--tsu-neutral-9);--tsu-disabled-border:var(--tsu-neutral-7);--tsu-focus-bg:var(--tsu-surface-raised-hover);--tsu-focus-border:var(--tsu-accent-8);--ink:var(--tsu-fg);--muted:var(--tsu-neutral-11);--accent:var(--tsu-accent-9);--surface:var(--tsu-bg);--bg:var(--tsu-neutral-2);--border:var(--tsu-neutral-7);--danger:var(--tsu-danger-9)}:root.dark{--tsu-fg:#fff}:root{--tsu-bg-page:var(--tsu-neutral-1);--tsu-bg-panel:var(--tsu-neutral-2);--tsu-bg-control:var(--tsu-neutral-3);--tsu-bg-control-hover:var(--tsu-neutral-4);--tsu-bg-overlay:#00000080;--tsu-bg-overlay-soft:#00000059;--tsu-bg:var(--tsu-bg-page);--tsu-surface:var(--tsu-bg-panel);--tsu-surface-raised:var(--tsu-bg-control);--tsu-surface-raised-hover:var(--tsu-bg-control-hover);--tsu-fg:var(--tsu-neutral-12);--tsu-text-primary:var(--tsu-neutral-12);--tsu-text-secondary:var(--tsu-neutral-11);--tsu-text-subtle:var(--tsu-neutral-9);--tsu-border:var(--tsu-neutral-6);--tsu-border-strong:var(--tsu-neutral-7);--tsu-focus-bg:var(--tsu-bg-control-hover);--tsu-focus-border:var(--tsu-accent-8);--tsu-focus-ring:var(--tsu-accent-alpha-8);--tsu-pressed:var(--tsu-neutral-alpha-3);--tsu-pressed-hover:var(--tsu-neutral-alpha-4);--tsu-pressed-accent:var(--tsu-accent-alpha-3);--tsu-pressed-accent-hover:var(--tsu-accent-alpha-4);--tsu-color-pressed:var(--tsu-pressed);--tsu-color-pressed-accent:var(--tsu-pressed-accent);--tsu-disabled-opacity:.5;--tsu-disabled-bg:var(--tsu-bg-control);--tsu-disabled-fg:var(--tsu-neutral-9);--tsu-disabled-border:var(--tsu-neutral-7);--tsu-neutral-solid-bg:var(--tsu-neutral-9);--tsu-neutral-solid-bg-hover:var(--tsu-neutral-10);--tsu-neutral-solid-fg:var(--tsu-bg-page);--tsu-neutral-surface-bg:var(--tsu-bg-panel);--tsu-neutral-surface-bg-hover:var(--tsu-bg-control);--tsu-neutral-surface-bg-active:var(--tsu-bg-control-hover);--tsu-neutral-surface-border:var(--tsu-neutral-6);--tsu-neutral-surface-border-hover:var(--tsu-neutral-7);--tsu-neutral-surface-fg:var(--tsu-text-primary);--tsu-neutral-subtle-bg:var(--tsu-neutral-alpha-3);--tsu-neutral-subtle-bg-hover:var(--tsu-neutral-alpha-4);--tsu-neutral-subtle-bg-active:var(--tsu-neutral-alpha-5);--tsu-neutral-subtle-fg:var(--tsu-text-primary);--tsu-neutral-outline-border:var(--tsu-neutral-6);--tsu-neutral-outline-border-hover:var(--tsu-neutral-7);--tsu-neutral-outline-bg-hover:var(--tsu-neutral-alpha-2);--tsu-neutral-outline-bg-active:var(--tsu-neutral-alpha-3);--tsu-neutral-outline-fg:var(--tsu-text-primary);--tsu-neutral-plain-fg:var(--tsu-text-primary);--tsu-neutral-plain-bg-hover:var(--tsu-neutral-alpha-3);--tsu-neutral-plain-bg-active:var(--tsu-neutral-alpha-4);--tsu-accent-solid-bg:var(--tsu-accent-9);--tsu-accent-solid-bg-hover:var(--tsu-accent-10);--tsu-accent-solid-fg:#fff;--tsu-accent-surface-bg:var(--tsu-accent-alpha-2);--tsu-accent-surface-bg-hover:var(--tsu-accent-alpha-3);--tsu-accent-surface-bg-active:var(--tsu-accent-alpha-4);--tsu-accent-surface-border:var(--tsu-accent-alpha-6);--tsu-accent-surface-border-hover:var(--tsu-accent-alpha-7);--tsu-accent-surface-fg:var(--tsu-accent-11);--tsu-accent-subtle-bg:var(--tsu-accent-alpha-3);--tsu-accent-subtle-bg-hover:var(--tsu-accent-alpha-4);--tsu-accent-subtle-bg-active:var(--tsu-accent-alpha-5);--tsu-accent-subtle-fg:var(--tsu-accent-11);--tsu-accent-outline-border:var(--tsu-accent-alpha-7);--tsu-accent-outline-border-hover:var(--tsu-accent-alpha-8);--tsu-accent-outline-bg-hover:var(--tsu-accent-alpha-2);--tsu-accent-outline-bg-active:var(--tsu-accent-alpha-3);--tsu-accent-outline-fg:var(--tsu-accent-11);--tsu-accent-plain-fg:var(--tsu-accent-11);--tsu-accent-plain-bg-hover:var(--tsu-accent-alpha-3);--tsu-accent-plain-bg-active:var(--tsu-accent-alpha-4);--tsu-danger-solid-bg:var(--tsu-danger-9);--tsu-danger-solid-bg-hover:var(--tsu-danger-10);--tsu-danger-solid-fg:#fff;--tsu-danger-surface-bg:var(--tsu-danger-alpha-2);--tsu-danger-surface-bg-hover:var(--tsu-danger-alpha-3);--tsu-danger-surface-bg-active:var(--tsu-danger-alpha-4);--tsu-danger-surface-border:var(--tsu-danger-alpha-6);--tsu-danger-surface-border-hover:var(--tsu-danger-alpha-7);--tsu-danger-surface-fg:var(--tsu-danger-11);--tsu-danger-subtle-bg:var(--tsu-danger-alpha-3);--tsu-danger-subtle-bg-hover:var(--tsu-danger-alpha-4);--tsu-danger-subtle-bg-active:var(--tsu-danger-alpha-5);--tsu-danger-subtle-fg:var(--tsu-danger-11);--tsu-danger-outline-border:var(--tsu-danger-alpha-7);--tsu-danger-outline-border-hover:var(--tsu-danger-alpha-8);--tsu-danger-outline-bg-hover:var(--tsu-danger-alpha-2);--tsu-danger-outline-bg-active:var(--tsu-danger-alpha-3);--tsu-danger-outline-fg:var(--tsu-danger-11);--tsu-danger-plain-fg:var(--tsu-danger-11);--tsu-danger-plain-bg-hover:var(--tsu-danger-alpha-3);--tsu-danger-plain-bg-active:var(--tsu-danger-alpha-4);--tsu-success-solid-bg:var(--tsu-success-9);--tsu-success-solid-bg-hover:var(--tsu-success-10);--tsu-success-solid-fg:#fff;--tsu-success-surface-bg:var(--tsu-success-alpha-2);--tsu-success-surface-bg-hover:var(--tsu-success-alpha-3);--tsu-success-surface-bg-active:var(--tsu-success-alpha-4);--tsu-success-surface-border:var(--tsu-success-alpha-6);--tsu-success-surface-border-hover:var(--tsu-success-alpha-7);--tsu-success-surface-fg:var(--tsu-success-11);--tsu-success-subtle-bg:var(--tsu-success-alpha-3);--tsu-success-subtle-bg-hover:var(--tsu-success-alpha-4);--tsu-success-subtle-bg-active:var(--tsu-success-alpha-5);--tsu-success-subtle-fg:var(--tsu-success-11);--tsu-success-outline-border:var(--tsu-success-alpha-7);--tsu-success-outline-border-hover:var(--tsu-success-alpha-8);--tsu-success-outline-bg-hover:var(--tsu-success-alpha-2);--tsu-success-outline-bg-active:var(--tsu-success-alpha-3);--tsu-success-outline-fg:var(--tsu-success-11);--tsu-success-plain-fg:var(--tsu-success-11);--tsu-success-plain-bg-hover:var(--tsu-success-alpha-3);--tsu-success-plain-bg-active:var(--tsu-success-alpha-4);--tsu-warning-solid-bg:var(--tsu-warning-9);--tsu-warning-solid-bg-hover:var(--tsu-warning-10);--tsu-warning-solid-fg:#fff;--tsu-warning-surface-bg:var(--tsu-warning-alpha-2);--tsu-warning-surface-bg-hover:var(--tsu-warning-alpha-3);--tsu-warning-surface-bg-active:var(--tsu-warning-alpha-4);--tsu-warning-surface-border:var(--tsu-warning-alpha-6);--tsu-warning-surface-border-hover:var(--tsu-warning-alpha-7);--tsu-warning-surface-fg:var(--tsu-warning-11);--tsu-warning-subtle-bg:var(--tsu-warning-alpha-3);--tsu-warning-subtle-bg-hover:var(--tsu-warning-alpha-4);--tsu-warning-subtle-bg-active:var(--tsu-warning-alpha-5);--tsu-warning-subtle-fg:var(--tsu-warning-11);--tsu-warning-outline-border:var(--tsu-warning-alpha-7);--tsu-warning-outline-border-hover:var(--tsu-warning-alpha-8);--tsu-warning-outline-bg-hover:var(--tsu-warning-alpha-2);--tsu-warning-outline-bg-active:var(--tsu-warning-alpha-3);--tsu-warning-outline-fg:var(--tsu-warning-11);--tsu-warning-plain-fg:var(--tsu-warning-11);--tsu-warning-plain-bg-hover:var(--tsu-warning-alpha-3);--tsu-warning-plain-bg-active:var(--tsu-warning-alpha-4);--tsu-radius-round:9999px;--tsu-radius-l3-xs:14px;--tsu-radius-l2-xs:6px;--tsu-radius-l1-xs:2px;--tsu-radius-l3-sm:14px;--tsu-radius-l2-sm:6px;--tsu-radius-l1-sm:2px;--tsu-radius-l3-md:16px;--tsu-radius-l2-md:8px;--tsu-radius-l1-md:4px;--tsu-radius-l3-lg:18px;--tsu-radius-l2-lg:10px;--tsu-radius-l1-lg:6px;--tsu-radius-l3-xl:20px;--tsu-radius-l2-xl:12px;--tsu-radius-l1-xl:8px;--tsu-radius-l3-xxl:28px;--tsu-radius-l2-xxl:20px;--tsu-radius-l1-xxl:16px;--tsu-level-primary-xs:32px;--tsu-level-primary-sm:36px;--tsu-level-primary-md:40px;--tsu-level-primary-lg:44px;--tsu-level-primary-xl:48px;--tsu-level-primary-xxl:64px;--tsu-level-secondary-xs:16px;--tsu-level-secondary-sm:18px;--tsu-level-secondary-md:20px;--tsu-level-secondary-lg:22px;--tsu-level-secondary-xl:24px;--tsu-level-secondary-xxl:32px;--tsu-comp-height-xs:var(--tsu-level-primary-xs);--tsu-comp-height-sm:var(--tsu-level-primary-sm);--tsu-comp-height-md:var(--tsu-level-primary-md);--tsu-comp-height-lg:var(--tsu-level-primary-lg);--tsu-comp-height-xl:var(--tsu-level-primary-xl);--tsu-comp-height-xxl:var(--tsu-level-primary-xxl);--tsu-comp-font-size-xs:12px;--tsu-comp-font-size-sm:14px;--tsu-comp-font-size-md:14px;--tsu-comp-font-size-lg:16px;--tsu-comp-font-size-xl:18px;--tsu-comp-font-size-xxl:20px;--tsu-comp-line-height-xs:16px;--tsu-comp-line-height-sm:20px;--tsu-comp-line-height-md:20px;--tsu-comp-line-height-lg:24px;--tsu-comp-line-height-xl:28px;--tsu-comp-line-height-xxl:30px;--tsu-comp-padding-y-xs:7px;--tsu-comp-padding-y-sm:7px;--tsu-comp-padding-y-md:9px;--tsu-comp-padding-y-lg:9px;--tsu-comp-padding-y-xl:9px;--tsu-comp-padding-y-xxl:16px;--tsu-comp-padding-x-xs:8px;--tsu-comp-padding-x-sm:12px;--tsu-comp-padding-x-md:16px;--tsu-comp-padding-x-lg:20px;--tsu-comp-padding-x-xl:24px;--tsu-comp-padding-x-xxl:32px;--tsu-comp-secondary-height-xs:var(--tsu-level-secondary-xs);--tsu-comp-secondary-height-sm:var(--tsu-level-secondary-sm);--tsu-comp-secondary-height-md:var(--tsu-level-secondary-md);--tsu-comp-secondary-height-lg:var(--tsu-level-secondary-lg);--tsu-comp-secondary-height-xl:var(--tsu-level-secondary-xl);--tsu-comp-secondary-height-xxl:var(--tsu-level-secondary-xxl);--tsu-font-size-xs:10px;--tsu-font-size-sm:12px;--tsu-font-size-md:14px;--tsu-font-size-lg:16px;--tsu-font-size-xl:20px;--tsu-font-size-xxl:24px;--tsu-font-weight-regular:400;--tsu-font-weight-medium:500;--tsu-font-weight-semibold:600;--tsu-text-title-size:var(--tsu-font-size-lg);--tsu-text-title-weight:var(--tsu-font-weight-semibold);--tsu-text-title-line-height:24px;--tsu-text-body-size:var(--tsu-font-size-md);--tsu-text-body-weight:var(--tsu-font-weight-regular);--tsu-text-body-line-height:20px;--tsu-text-label-size:var(--tsu-font-size-md);--tsu-text-label-weight:var(--tsu-font-weight-medium);--tsu-text-label-line-height:20px;--tsu-text-caption-size:var(--tsu-font-size-sm);--tsu-text-caption-weight:var(--tsu-font-weight-regular);--tsu-text-caption-line-height:16px;--tsu-spacing-xxs:2px;--tsu-spacing-xs:4px;--tsu-spacing-sm:8px;--tsu-spacing-md:12px;--tsu-spacing-lg:16px;--tsu-spacing-xl:24px;--tsu-spacing-xxl:32px;--tsu-duration-fast:.15s;--tsu-duration-normal:.25s;--tsu-duration-overlay-enter:.35s;--tsu-duration-overlay-exit:.2s;--tsu-ease-standard:cubic-bezier(.2, 0, 0, 1);--tsu-ease-out:cubic-bezier(.32, .72, 0, 1);--tsu-ease-in:cubic-bezier(.4, 0, 1, 1);--tsu-transition-fast:var(--tsu-duration-fast) var(--tsu-ease-standard);--tsu-transition-normal:var(--tsu-duration-normal) var(--tsu-ease-standard);--tsu-transition-overlay-enter:var(--tsu-duration-overlay-enter) var(--tsu-ease-out);--tsu-transition-overlay-exit:var(--tsu-duration-overlay-exit) var(--tsu-ease-in);--tsu-transition-overlay:var(--tsu-transition-overlay-enter);--tsu-shadow-sm:0 1px 2px var(--tsu-neutral-alpha-6), 0 2px 4px var(--tsu-neutral-alpha-7);--tsu-shadow-md:0 1px 3px var(--tsu-neutral-alpha-6), 0 4px 16px var(--tsu-neutral-alpha-8);--tsu-shadow-lg:0 2px 6px var(--tsu-neutral-alpha-6), 0 12px 32px var(--tsu-neutral-alpha-10);--tsu-shadow-up:0 -8px 32px var(--tsu-neutral-alpha-10);--tsu-font-family:system-ui, -apple-system, sans-serif;--tsu-line-height:1.5;--tsu-container-padding-sm:12px;--tsu-container-padding-md:16px;--tsu-container-padding-lg:24px;--tsu-container-padding-xl:32px;--tsu-z-base:0;--tsu-z-dropdown:100;--tsu-z-modal:200;--tsu-z-toast:300}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}*{-webkit-tap-highlight-color:#0000;margin:0;padding:0}:focus{outline:none}body{min-height:100vh;font-family:var(--tsu-font-family);font-size:var(--tsu-font-size-md);line-height:var(--tsu-line-height);color:var(--tsu-fg);background-color:var(--tsu-bg);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-weight:var(--tsu-font-weight-semibold)}a{color:inherit;text-decoration:none}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}:where(ul,ol){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(button){appearance:none;cursor:pointer;background:0 0;border:none}:where([hidden]){display:none}input[type=search]::-webkit-search-cancel-button{display:none}input[type=search]::-ms-clear{display:none}
package/docs/api.md CHANGED
@@ -48,6 +48,44 @@ The shared `size` prop accepts: `xs | sm | md | lg | xl | xxl` (default `md`).
48
48
 
49
49
  ---
50
50
 
51
+ ## Semantic tokens
52
+
53
+ The design system exposes a **semantic color layer** (`src/styles/semantic.css`) between the raw Radix palette steps and the components. Components reference *semantics*, never raw steps, so a style stays consistent across light/dark mode and across containers (page vs. sheet/popover).
54
+
55
+ **Background hierarchy** — container-aware:
56
+
57
+ | Token | Value | Use |
58
+ |---|---|---|
59
+ | `--tsu-bg-page` | `neutral-1` | App page background |
60
+ | `--tsu-bg-panel` | `neutral-2` | Cards, sheets, popovers, dialogs |
61
+ | `--tsu-bg-control` | `neutral-3` | Form controls (inputs, buttons) |
62
+ | `--tsu-bg-control-hover` | `neutral-4` | Hover of raised controls |
63
+ | `--tsu-bg-overlay` | `rgba(0,0,0,0.5)` | Modal scrim |
64
+ | `--tsu-bg-overlay-soft` | `rgba(0,0,0,0.35)` | Sheet / bottom scrim |
65
+
66
+ **Text hierarchy:** `--tsu-text-primary` (`neutral-12`), `--tsu-text-secondary` (`neutral-11`), `--tsu-text-subtle` (`neutral-9`).
67
+
68
+ **Palette variants** — every palette (`neutral`, `accent`, `danger`, `success`, `warning`) exposes the same five variants. Each variant provides `-bg`, `-bg-hover`, `-bg-active`, `-border`, `-border-hover`, `-fg` as applicable:
69
+
70
+ | Variant | Pattern | Example |
71
+ |---|---|---|
72
+ | `solid` | Filled control, high contrast | `--tsu-accent-solid-bg` = `accent-9`, `--tsu-accent-solid-fg` = white |
73
+ | `surface` | Panel-tinted control with border | `--tsu-accent-surface-bg` = `accent-alpha-2`, `--tsu-accent-surface-border` = `accent-alpha-6` |
74
+ | `subtle` | Tinted control, no border | `--tsu-accent-subtle-bg` = `accent-alpha-3` |
75
+ | `outline` | Transparent control with border | `--tsu-accent-outline-border` = `accent-alpha-7` |
76
+ | `plain` | Text-like control | `--tsu-accent-plain-fg` = `accent-11` |
77
+
78
+ **Hover/active tints use ALPHA tokens** (e.g. `--tsu-accent-alpha-3`), so they read identically over the page background and over panel/sheet backgrounds.
79
+
80
+ **States:**
81
+
82
+ - **Pressed/active** — unified via `--tsu-pressed` / `--tsu-pressed-hover` (neutral alpha) and `--tsu-pressed-accent` / `--tsu-pressed-accent-hover` (accent alpha).
83
+ - **Disabled** — a uniform state applied on top of any variant: `--tsu-disabled-opacity` (`0.5`) fades the whole component (no grayscale), keeping the `neutral` intent (gray) visually distinct from the accent intent even when disabled.
84
+
85
+ **Elevation** — `--tsu-shadow-sm / md / lg` (downward) and `--tsu-shadow-up` (upward, for bottom sheets), all composed from neutral alpha tokens.
86
+
87
+ ---
88
+
51
89
  ## Inputs & Forms
52
90
 
53
91
  ### Field
@@ -90,8 +128,8 @@ Passthrough: Ark `Fieldset.Root` props (`disabled`, `invalid`, …).
90
128
 
91
129
  | Prop | Type | Default | Description |
92
130
  |---|---|---|---|
93
- | `solid` | `boolean` | `false` | Filled background instead of outlined. |
94
- | `intent` | `string` | `'default'` | Border intent (`'default'`, `'neutral'`, `'danger'`). `neutral` applies only to the outline variant (ignored when `solid`). |
131
+ | `variant` | `'outline' \| 'solid'` | `'outline'` | Filled background instead of outlined. |
132
+ | `intent` | `string` | `'default'` | Border intent (`'default'`, `'neutral'`, `'danger'`). `neutral` applies only to the outline variant (ignored when `variant='solid'`). |
95
133
  | `size` | `string` | `md` | See size values. |
96
134
  | `disabled` | `boolean` | `false` | Disables the input. |
97
135
  | `invalid` | `boolean` | `false` | Renders the error/invalid style. |
@@ -136,143 +174,16 @@ Currency-formatted numeric input.
136
174
  **Exports:** `NumberInput` · Escape hatch: `NumberInput.origin.{Root, DecrementTrigger, Input, IncrementTrigger}`
137
175
 
138
176
  | Prop | Type | Default | Description |
139
- |---|---|---|---|
140
- | `size` | `string` | `md` | See size values. |
141
- | `solid` | `boolean` | `false` | Filled background instead of outlined. |
142
- | `disabled` | `boolean` | `false` | Disabled. |
143
- | `children` | `node` | — | Custom triggers, if any. |
144
-
145
- Passthrough: Ark `Root` props (`value`, `onValueChange`, `min`, `max`, `step`, `formatOptions`, …).
146
-
147
- ### SearchInput
148
-
149
- **Exports:** `SearchInput`
150
-
151
- | Prop | Type | Default | Description |
152
- |---|---|---|---|
153
- | `placeholder` | `string` | — | Placeholder text. |
154
- | `onInput` | `(value) => void` | — | Called with the current query. |
155
-
156
- ### TagsInput
157
-
158
- **Exports:** `TagsInput` · Escape hatch: `TagsInput.origin.{Root, Label, Control, Input, Item, ItemPreview, ItemText, ItemDeleteTrigger, ItemInput, ClearTrigger, HiddenInput}`
159
-
160
- | Prop | Type | Default | Description |
161
- |---|---|---|---|
162
- | `className` | `string` | — | Root class. |
163
- | `label` | `string` | — | Optional label text. |
164
- | `placeholder` | `string` | — | Input placeholder. |
165
- | `children` | `node` | — | Custom item rendering. |
166
-
167
- Passthrough: Ark `Root` props (`value`, `onValueChange`, `allowOverflow`, `validate`, …).
168
-
169
- ### DateInput
170
-
171
- Mobile date picker built on the `DateWheel` utility.
172
-
173
- **Exports:** `DateInput`
174
-
175
- | Prop | Type | Default | Description |
176
- |---|---|---|---|
177
- | `value` | `string \| (() => string)` | — | ISO date string. |
178
- | `onValueChange` | `(value) => void` | — | Called with the new ISO date. |
179
- | `placeholder` | `string` | — | Placeholder text. |
180
- | `disabled` | `boolean` | `false` | Disabled. |
181
- | `size` | `string` | `md` | See size values. |
182
- | `className` | `string` | — | Root class. |
183
-
184
- ### ColorPicker
185
-
186
- **Exports:** `ColorPicker` · Escape hatch: `ColorPicker.origin.*` (full Ark surface: `Root`, `Label`, `Control`, `Trigger`, `Positioner`, `Content`, `ValueSwatch`, `ValueText`, `Area`, `ChannelSlider`, `ChannelInput`, `TransparencyGrid`, `EyeDropperTrigger`, …)
187
-
188
- | Prop | Type | Default | Description |
189
- |---|---|---|---|
190
- | `label` | `string` | — | Optional label text. |
191
- | `showAlpha` | `boolean` | — | Show the alpha channel. |
192
- | `eyedropper` | `boolean` | — | Show the eyedropper trigger. |
193
- | `hiddenInput` | `boolean` | — | Render a hidden input. |
194
- | `onChange` | `(value) => void` | — | Called on color change. |
195
- | `size` | `string` | `md` | See size values. |
196
- | `className` | `string` | — | Root class. |
197
- | `children` | `node` | — | Custom content. |
198
-
199
- Passthrough: Ark `Root` props (`value`, `onValueChange`, `format`, …).
200
-
201
- ### Clipboard
202
-
203
- **Exports:** `Clipboard`
204
-
205
- | Prop | Type | Default | Description |
206
- |---|---|---|---|
207
- | `size` | `string` | `md` | See size values. |
208
- | `copiedDuration` | `number` | `2000` | ms to keep the "copied" state after copying. |
209
-
210
- Passthrough: Ark `Root` props (`value`, `onValueChange`, …).
211
-
212
- ---
213
-
214
- ## Buttons & Toggles
215
-
216
- ### Button
217
-
218
- **Exports:** `Button` · Escape hatch: `Button.origin.Root`
219
-
220
- | Prop | Type | Default | Description |
221
- |---|---|---|---|
222
- | `solid` | `boolean` | `false` | Filled (solid) variant instead of outline. |
223
- | `intent` | `string` | `'default'` | `'default'`, `'neutral'`, or `'danger'`. `neutral` applies only to the outline variant (ignored when `solid`). |
224
- | `size` | `string` | `md` | See size values. |
225
- | `disabled` | `boolean` | `false` | Disabled. |
226
- | `loading` | `boolean` | `false` | Shows a spinner and blocks interaction. |
227
- | `children` | `node` | — | Button content. |
228
-
229
- ### Checkbox
230
-
231
- **Exports:** `Checkbox` · Escape hatch: `Checkbox.origin.{Root, Label, Control, Indicator, HiddenInput, Group}`
232
-
233
- | Prop | Type | Default | Description |
234
- |---|---|---|---|
235
- | `size` | `string` | `md` | See size values. |
236
- | `rounded` | `boolean` | `true` | Rounded (pill) control shape. |
237
- | `invalid` | `boolean` | `false` | Error state. |
238
- | `children` | `node` | — | Label content. |
239
-
240
- Passthrough: Ark `Root` props (`checked`, `onCheckedChange`, `disabled`, `indeterminate`, …).
241
-
242
- ### Switch
243
-
244
- **Exports:** `Switch` · Escape hatch: `Switch.origin.{Root, Control, Thumb, Label, HiddenInput}`
245
-
246
- | Prop | Type | Default | Description |
247
- |---|---|---|---|
248
- | `size` | `string` | `md` | See size values. |
249
- | `children` | `node` | — | Label content. |
250
-
251
- Passthrough: Ark `Root` props (`checked`, `onCheckedChange`, `disabled`, …).
252
-
253
- ### Toggle
254
-
255
- **Exports:** `Toggle` · Escape hatch: `Toggle.origin.Root`
256
-
257
- | Prop | Type | Default | Description |
258
- |---|---|---|---|
259
- | `className` | `string` | — | Root class. |
260
- | `children` | `node` | — | Content. |
261
-
262
- Passthrough: Ark `Root` props (`pressed`, `onPressedChange`, …).
263
-
264
- ### ToggleGroup
265
-
266
- **Exports:** `ToggleGroup`, `ToggleGroupItem` · Escape hatch: `ToggleGroup.origin.{Root, Item}`
267
-
268
- | Prop | Type | Default | Description |
269
- |---|---|---|---|
177
+ |---|---|---|---|---|
270
178
  | `size` | `string` | `md` | See size values. |
179
+ | `intent` | `'default' \| 'neutral'` | `'default'` | Border color of the group. `neutral` uses the neutral outline border (matching Input's neutral); the checked segment keeps the accent background. |
271
180
  | `children` | `node` | — | `ToggleGroupItem` elements. |
272
181
 
273
182
  ### FilterGroup
274
183
 
275
- Multi-select filter bar built on `ToggleGroup`. Renders an "All" toggle; selecting any item clears it, and an empty selection maps back to "All".
184
+ Multi-select filter bar built on the `Button` component. Renders an "All" pill (outline when idle, solid accent when active); item pills are neutral when idle and accent-outline when selected. Selecting any item clears "All", and an empty selection maps back to "All".
185
+
186
+ > **Design note:** `FilterGroup` renders its pills with `Button` (not `ToggleGroup`) to reuse Button's variant/intent styling and the neutral/outline/solid state language. Trade-off: the multi-select toggle logic is reimplemented here instead of delegating to `ToggleGroup`'s selection machinery. `ToggleGroup` remains available as a standalone segmented control.
276
187
 
277
188
  **Exports:** `FilterGroup`
278
189
 
@@ -284,7 +195,7 @@ Multi-select filter bar built on `ToggleGroup`. Renders an "All" toggle; selecti
284
195
  | `allLabel` | `string` | `'All'` | Label for the clear/All toggle. |
285
196
  | `size` | `string` | `md` | See size values. |
286
197
  | `buttonClass` | `string` | — | Class applied to every button. |
287
- | `groupClass` | `string` | — | Class applied to the inner `ToggleGroup`. |
198
+ | `groupClass` | `string` | — | Class applied to the inner scroll container. |
288
199
  | `sticky` | `boolean \| number` | — | Sticky to the top of the scroll container; pass a number for a `top` offset in px. |
289
200
  | `className` | `string` | — | Root class. |
290
201
 
@@ -325,13 +236,14 @@ Mobile-optimized bottom-sheet select (draggable sheet overlay).
325
236
  |---|---|---|---|
326
237
  | `value` | `string \| (() => string)` | — | Selected value. |
327
238
  | `onValueChange` | `(value) => void` | — | Called when an item is selected. |
328
- | `items` | `array \| (() => array)` | `[]` | Data array. |
239
+ | `items` | `array \| (() => array)` | `[]` | Data array. Items may include `disabled: true` to render a non-selectable row. |
329
240
  | `itemToValue` | `(item) => string` | `item.value` | Extract value from an item. |
330
241
  | `itemToLabel` | `(item) => node` | `item.label` | Extract label from an item. |
331
242
  | `open` | `(() => boolean)` | — | **Required** controlled open state. |
332
243
  | `onOpenChange` | `(open) => void` | — | Open/close callback. |
333
244
  | `disabled` | `boolean` | `false` | Disabled. |
334
- | `solid` | `boolean` | `false` | Filled trigger variant instead of outline. |
245
+ | `variant` | `'outline' \| 'solid'` | `'outline'` | Filled trigger variant instead of outline. |
246
+ | `intent` | `'default' \| 'neutral' \| 'danger'` | `'default'` | Border color for trigger and the search input. `neutral` applies only to the outline variant (ignored when `variant='solid'`). |
335
247
  | `filter` | `(item, query, itemToLabel) => boolean` | — | Custom filter for the search box. |
336
248
  | `placeholder` | `string` | — | Trigger placeholder. |
337
249
  | `backdropClassName` | `string` | — | Backdrop class. |
@@ -347,7 +259,7 @@ Desktop (popover-style) select built on Ark `Select`.
347
259
 
348
260
  | Prop | Type | Default | Description |
349
261
  |---|---|---|---|
350
- | `solid` | `boolean` | `false` | Filled trigger variant. |
262
+ | `variant` | `'outline' \| 'solid'` | `'outline'` | Filled trigger variant. |
351
263
  | `size` | `string` | `md` | See size values. |
352
264
  | `disabled` | `boolean` | `false` | Disabled. |
353
265
  | `invalid` | `boolean` | `false` | Error state. |
@@ -685,7 +597,7 @@ Passthrough: Ark `Root` props (`value`, `min`, `max`, …).
685
597
  > **General rule: always use the highest-level callback you need.** Reach for `onCancel` (and `onConfirm`) first — they express intent. Only fall back to `onClose` when you need close cleanup for every path, and to `onOpenChange` only when you need raw open/close control. Passing a lower-level callback just because a higher-level one exists usually means you are bypassing the intent layer.
686
598
 
687
599
  **Known issues:**
688
- - Pressing <kbd>Escape</kbd> closes both the Dialog and any nested overlay (e.g. `DateInput`, `Select`) that is open inside it. There is currently no event coordination between the two — both react to the same key press.
600
+ - Pressing <kbd>Escape</kbd> closes both the Dialog and any nested overlay (e.g. `DatePicker`, `Select`) that is open inside it. There is currently no event coordination between the two — both react to the same key press.
689
601
 
690
602
  ### ConfirmDialog
691
603
 
@@ -74,7 +74,7 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
74
74
  | Clipboard | Web Clipboard API |
75
75
  | CloseButton | `@emotion/css` |
76
76
  | ConfirmDialog | Composes `Dialog` |
77
- | DateInput | `DateWheel` utility |
77
+ | DatePicker | `DateWheel` utility |
78
78
  | Icon | `@emotion/css` |
79
79
  | MoneyInput | Composes `Input` |
80
80
  | SearchInput | Composes `Input` |
@@ -255,7 +255,7 @@ export { Root as FileUpload }
255
255
  import { Button } from '@plastic-js/tsumiki'
256
256
 
257
257
  // Primary usage: tsumiki-styled
258
- <Button solid>Click me</Button>
258
+ <Button variant="solid">Click me</Button>
259
259
 
260
260
  // Escape hatch: raw Ark API
261
261
  <Button.origin.Root>...</Button.origin.Root>
@@ -1,7 +1,7 @@
1
1
  # Scroll-lock is not stacked
2
2
 
3
3
  **Status:** Known issue
4
- **Affects:** `Select.jsx:193`, `DateInput.jsx:293/303`
4
+ **Affects:** `Select.jsx:193`, `DatePicker.jsx:293/303`
5
5
 
6
6
  ## Problem
7
7
 
@@ -11,7 +11,7 @@ Overlay components set `document.body.style.overflow` directly:
11
11
  // Select
12
12
  document.body.style.overflow = v ? 'hidden' : ''
13
13
 
14
- // DateInput
14
+ // DatePicker
15
15
  document.body.style.overflow = 'hidden' // on open
16
16
  document.body.style.overflow = '' // on close
17
17
  ```
@@ -31,5 +31,5 @@ const lock = () => { count += 1; document.body.style.overflow = 'hidden' }
31
31
  const unlock = () => { count = Math.max(0, count - 1); if (count === 0) document.body.style.overflow = '' }
32
32
  ```
33
33
 
34
- Use it in every overlay (`Select`, `DateInput`, …) instead of writing
34
+ Use it in every overlay (`Select`, `DatePicker`, …) instead of writing
35
35
  `document.body.style.overflow` directly.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plastic-js/tsumiki",
3
- "version": "0.1.52",
3
+ "version": "0.1.54",
4
4
  "description": "A UI component library for Plastic JS.",
5
5
  "license": "MIT",
6
6
  "author": "tigre",
@@ -62,6 +62,20 @@
62
62
  --tsu-danger-11: var(--red-11);
63
63
  --tsu-danger-12: var(--red-12);
64
64
 
65
+ /* Danger alpha (red) */
66
+ --tsu-danger-alpha-1: var(--red-a1);
67
+ --tsu-danger-alpha-2: var(--red-a2);
68
+ --tsu-danger-alpha-3: var(--red-a3);
69
+ --tsu-danger-alpha-4: var(--red-a4);
70
+ --tsu-danger-alpha-5: var(--red-a5);
71
+ --tsu-danger-alpha-6: var(--red-a6);
72
+ --tsu-danger-alpha-7: var(--red-a7);
73
+ --tsu-danger-alpha-8: var(--red-a8);
74
+ --tsu-danger-alpha-9: var(--red-a9);
75
+ --tsu-danger-alpha-10: var(--red-a10);
76
+ --tsu-danger-alpha-11: var(--red-a11);
77
+ --tsu-danger-alpha-12: var(--red-a12);
78
+
65
79
  /* Success (green) */
66
80
  --tsu-success-1: var(--green-1);
67
81
  --tsu-success-2: var(--green-2);
@@ -76,6 +90,20 @@
76
90
  --tsu-success-11: var(--green-11);
77
91
  --tsu-success-12: var(--green-12);
78
92
 
93
+ /* Success alpha (green) */
94
+ --tsu-success-alpha-1: var(--green-a1);
95
+ --tsu-success-alpha-2: var(--green-a2);
96
+ --tsu-success-alpha-3: var(--green-a3);
97
+ --tsu-success-alpha-4: var(--green-a4);
98
+ --tsu-success-alpha-5: var(--green-a5);
99
+ --tsu-success-alpha-6: var(--green-a6);
100
+ --tsu-success-alpha-7: var(--green-a7);
101
+ --tsu-success-alpha-8: var(--green-a8);
102
+ --tsu-success-alpha-9: var(--green-a9);
103
+ --tsu-success-alpha-10: var(--green-a10);
104
+ --tsu-success-alpha-11: var(--green-a11);
105
+ --tsu-success-alpha-12: var(--green-a12);
106
+
79
107
  /* Warning (amber) */
80
108
  --tsu-warning-1: var(--amber-1);
81
109
  --tsu-warning-2: var(--amber-2);
@@ -90,6 +118,20 @@
90
118
  --tsu-warning-11: var(--amber-11);
91
119
  --tsu-warning-12: var(--amber-12);
92
120
 
121
+ /* Warning alpha (amber) */
122
+ --tsu-warning-alpha-1: var(--amber-a1);
123
+ --tsu-warning-alpha-2: var(--amber-a2);
124
+ --tsu-warning-alpha-3: var(--amber-a3);
125
+ --tsu-warning-alpha-4: var(--amber-a4);
126
+ --tsu-warning-alpha-5: var(--amber-a5);
127
+ --tsu-warning-alpha-6: var(--amber-a6);
128
+ --tsu-warning-alpha-7: var(--amber-a7);
129
+ --tsu-warning-alpha-8: var(--amber-a8);
130
+ --tsu-warning-alpha-9: var(--amber-a9);
131
+ --tsu-warning-alpha-10: var(--amber-a10);
132
+ --tsu-warning-alpha-11: var(--amber-a11);
133
+ --tsu-warning-alpha-12: var(--amber-a12);
134
+
93
135
  /* Neutral Alpha Overlay (used for shadows/elevation) */
94
136
  --tsu-neutral-alpha-1: var(--olive-a1);
95
137
  --tsu-neutral-alpha-2: var(--olive-a2);