@sigx/zero-daisyui 0.5.0 → 0.7.0

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 (111) hide show
  1. package/README.md +62 -3
  2. package/dist/audit.json +8018 -2748
  3. package/dist/components.d.ts +23 -2
  4. package/dist/components.js +2 -0
  5. package/dist/css/components/accordion.css +26 -2
  6. package/dist/css/components/alert.css +2 -0
  7. package/dist/css/components/avatar.css +2 -0
  8. package/dist/css/components/badge.css +2 -0
  9. package/dist/css/components/box.css +2 -0
  10. package/dist/css/components/breadcrumbs.css +2 -0
  11. package/dist/css/components/button.css +2 -0
  12. package/dist/css/components/card.css +2 -0
  13. package/dist/css/components/carousel.css +2 -0
  14. package/dist/css/components/center.css +2 -0
  15. package/dist/css/components/chat.css +2 -0
  16. package/dist/css/components/checkbox-group.css +98 -0
  17. package/dist/css/components/checkbox.css +10 -0
  18. package/dist/css/components/collapsible.css +16 -2
  19. package/dist/css/components/combobox.css +36 -1
  20. package/dist/css/components/container.css +2 -0
  21. package/dist/css/components/countdown.css +2 -0
  22. package/dist/css/components/dialog.css +2 -0
  23. package/dist/css/components/diff.css +7 -0
  24. package/dist/css/components/divider.css +2 -0
  25. package/dist/css/components/drawer.css +2 -0
  26. package/dist/css/components/empty-state.css +2 -0
  27. package/dist/css/components/field.css +2 -0
  28. package/dist/css/components/fieldset.css +91 -0
  29. package/dist/css/components/file-upload.css +34 -0
  30. package/dist/css/components/grid.css +2 -0
  31. package/dist/css/components/indicator.css +2 -0
  32. package/dist/css/components/input.css +137 -0
  33. package/dist/css/components/join.css +2 -0
  34. package/dist/css/components/kbd.css +2 -0
  35. package/dist/css/components/menu.css +68 -0
  36. package/dist/css/components/nav-list.css +2 -0
  37. package/dist/css/components/navbar.css +2 -0
  38. package/dist/css/components/number-input.css +2 -0
  39. package/dist/css/components/pagination.css +6 -0
  40. package/dist/css/components/popover.css +74 -0
  41. package/dist/css/components/progress.css +2 -4
  42. package/dist/css/components/radial-progress.css +2 -0
  43. package/dist/css/components/radio-group.css +10 -4
  44. package/dist/css/components/rating-group.css +2 -0
  45. package/dist/css/components/select.css +54 -1
  46. package/dist/css/components/skeleton.css +2 -0
  47. package/dist/css/components/slider.css +154 -25
  48. package/dist/css/components/spacer.css +2 -0
  49. package/dist/css/components/spinner.css +2 -0
  50. package/dist/css/components/stack.css +2 -0
  51. package/dist/css/components/stats.css +68 -16
  52. package/dist/css/components/status.css +2 -0
  53. package/dist/css/components/steps.css +2 -0
  54. package/dist/css/components/swap.css +2 -0
  55. package/dist/css/components/switch.css +23 -0
  56. package/dist/css/components/table.css +77 -0
  57. package/dist/css/components/tabs.css +15 -0
  58. package/dist/css/components/textarea.css +2 -0
  59. package/dist/css/components/timeline.css +3 -0
  60. package/dist/css/components/toast.css +2 -0
  61. package/dist/css/components/toggle-group.css +2 -0
  62. package/dist/css/components/toggle.css +2 -0
  63. package/dist/css/components/tooltip.css +67 -0
  64. package/dist/css/components/tree-view.css +6 -0
  65. package/dist/css/index.css +1053 -70
  66. package/dist/css/tokens.css +13 -13
  67. package/dist/lynx/components/accordion.css +9 -0
  68. package/dist/lynx/components/alert.css +20 -0
  69. package/dist/lynx/components/button.css +58 -1
  70. package/dist/lynx/components/checkbox-group.css +209 -0
  71. package/dist/lynx/components/checkbox.css +8 -0
  72. package/dist/lynx/components/combobox.css +46 -0
  73. package/dist/lynx/components/dialog.css +19 -0
  74. package/dist/lynx/components/diff.css +5 -0
  75. package/dist/lynx/components/drawer.css +4 -0
  76. package/dist/lynx/components/fieldset.css +219 -0
  77. package/dist/lynx/components/file-upload.css +47 -0
  78. package/dist/lynx/components/input.css +178 -0
  79. package/dist/lynx/components/number-input.css +8 -0
  80. package/dist/lynx/components/pagination.css +16 -0
  81. package/dist/lynx/components/popover.css +37 -0
  82. package/dist/lynx/components/progress.css +4 -24
  83. package/dist/lynx/components/radio-group.css +8 -0
  84. package/dist/lynx/components/rating-group.css +3 -3
  85. package/dist/lynx/components/select.css +70 -1
  86. package/dist/lynx/components/slider.css +391 -28
  87. package/dist/lynx/components/stats.css +146 -16
  88. package/dist/lynx/components/steps.css +4 -0
  89. package/dist/lynx/components/switch.css +6 -0
  90. package/dist/lynx/components/table.css +57 -0
  91. package/dist/lynx/components/tabs.css +115 -93
  92. package/dist/lynx/components/timeline.css +84 -1
  93. package/dist/lynx/components/toast.css +41 -6
  94. package/dist/lynx/components/toggle.css +5 -0
  95. package/dist/lynx/components/tree-view.css +4 -0
  96. package/dist/lynx/index.css +1912 -262
  97. package/dist/lynx/manifest.json +67 -5
  98. package/dist/lynx/tokens.css +4 -4
  99. package/dist/manifest.json +65 -3
  100. package/dist/recipes.d.ts +17 -0
  101. package/dist/recipes.d.ts.map +1 -1
  102. package/dist/recipes.js +1141 -110
  103. package/dist/recipes.js.map +1 -1
  104. package/dist/register.d.ts +18 -0
  105. package/dist/report.json +902 -270
  106. package/dist/tokens.d.ts.map +1 -1
  107. package/dist/tokens.js +18 -4
  108. package/dist/tokens.js.map +1 -1
  109. package/package.json +5 -5
  110. package/src/recipes.ts +1156 -111
  111. package/src/tokens.ts +18 -4
@@ -17,7 +17,7 @@
17
17
  --color-primary: #422ad5;
18
18
  --color-primary-content: #e0e7ff;
19
19
  --color-secondary: #f43098;
20
- --color-secondary-content: #f9e4f0;
20
+ --color-secondary-content: #291a23;
21
21
  --color-accent: #00d3bb;
22
22
  --color-accent-content: #084d49;
23
23
  --color-neutral: #09090b;
@@ -94,7 +94,7 @@
94
94
  --color-primary: #422ad5;
95
95
  --color-primary-content: #e0e7ff;
96
96
  --color-secondary: #f43098;
97
- --color-secondary-content: #f9e4f0;
97
+ --color-secondary-content: #291a23;
98
98
  --color-accent: #00d3bb;
99
99
  --color-accent-content: #084d49;
100
100
  --color-neutral: #09090b;
@@ -169,9 +169,9 @@
169
169
 
170
170
  .zx-root.zx-theme-dark {
171
171
  --color-primary: #605dff;
172
- --color-primary-content: #edf1fe;
172
+ --color-primary-content: #fafbff;
173
173
  --color-secondary: #f43098;
174
- --color-secondary-content: #f9e4f0;
174
+ --color-secondary-content: #291a23;
175
175
  --color-accent: #00d3bb;
176
176
  --color-accent-content: #084d49;
177
177
  --color-neutral: #09090b;
@@ -633,6 +633,10 @@
633
633
  max-inline-size: var(--l-measure);
634
634
  }
635
635
 
636
+ .zx-tabs__root {
637
+ --tabs-ring-room: 4px;
638
+ }
639
+
636
640
  .zx-tabs__root {
637
641
  display: flex;
638
642
  flex-direction: column;
@@ -642,6 +646,12 @@
642
646
  .zx-tabs__list {
643
647
  display: flex;
644
648
  align-self: flex-start;
649
+ box-sizing: border-box;
650
+ max-inline-size: 100%;
651
+ overflow-x: auto;
652
+ padding: var(--tabs-ring-room);
653
+ scroll-padding-inline: var(--tabs-ring-room);
654
+ position: relative;
645
655
  }
646
656
 
647
657
  .zx-tabs__tab {
@@ -656,7 +666,6 @@
656
666
  cursor: pointer;
657
667
  position: relative;
658
668
  transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
659
- --tab-active-ink: var(--color-base-content);
660
669
  }
661
670
 
662
671
  .zx-root .zx-tabs__tab {
@@ -693,6 +702,15 @@
693
702
  outline-offset: 2px;
694
703
  }
695
704
 
705
+ .zx-tabs__tab.zx-f-pressed {
706
+ color: var(--color-base-content);
707
+ }
708
+
709
+ .zx-tabs__indicator {
710
+ display: none;
711
+ --tab-active-ink: var(--color-base-content);
712
+ }
713
+
696
714
  .zx-tabs__panel {
697
715
  font-size: var(--text-md);
698
716
  }
@@ -721,26 +739,6 @@
721
739
  --tab-px: var(--space-2xl);
722
740
  }
723
741
 
724
- .zx-root .zx-tabs__tab.zx-a-color-primary {
725
- --tab-active-ink: #3f2bcb;
726
- }
727
-
728
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-primary {
729
- --tab-active-ink: #6567ff;
730
- }
731
-
732
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-primary {
733
- --tab-active-ink: #a0e791;
734
- }
735
-
736
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-primary {
737
- --tab-active-ink: #5c7da6;
738
- }
739
-
740
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-primary {
741
- --tab-active-ink: #fb8a62;
742
- }
743
-
744
742
  .zx-root .zx-tabs__tab.zx-a-color-primary.zx-s-active {
745
743
  color: #3f2bcb;
746
744
  }
@@ -761,24 +759,24 @@
761
759
  color: #fb8a62;
762
760
  }
763
761
 
764
- .zx-root .zx-tabs__tab.zx-a-color-secondary {
765
- --tab-active-ink: #ad316f;
762
+ .zx-root .zx-tabs__indicator.zx-a-color-primary {
763
+ --tab-active-ink: #3f2bcb;
766
764
  }
767
765
 
768
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-secondary {
769
- --tab-active-ink: #fa7cb6;
766
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-primary {
767
+ --tab-active-ink: #6567ff;
770
768
  }
771
769
 
772
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-secondary {
773
- --tab-active-ink: #ed9984;
770
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-primary {
771
+ --tab-active-ink: #a0e791;
774
772
  }
775
773
 
776
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-secondary {
777
- --tab-active-ink: #677e98;
774
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-primary {
775
+ --tab-active-ink: #5c7da6;
778
776
  }
779
777
 
780
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-secondary {
781
- --tab-active-ink: #e68aac;
778
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-primary {
779
+ --tab-active-ink: #fb8a62;
782
780
  }
783
781
 
784
782
  .zx-root .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
@@ -801,24 +799,24 @@
801
799
  color: #e68aac;
802
800
  }
803
801
 
804
- .zx-root .zx-tabs__tab.zx-a-color-accent {
805
- --tab-active-ink: #2b786d;
802
+ .zx-root .zx-tabs__indicator.zx-a-color-secondary {
803
+ --tab-active-ink: #ad316f;
806
804
  }
807
805
 
808
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-accent {
809
- --tab-active-ink: #93e5d9;
806
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-secondary {
807
+ --tab-active-ink: #fa7cb6;
810
808
  }
811
809
 
812
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-accent {
813
- --tab-active-ink: #bfade1;
810
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-secondary {
811
+ --tab-active-ink: #ed9984;
814
812
  }
815
813
 
816
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-accent {
817
- --tab-active-ink: #5e7d8c;
814
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-secondary {
815
+ --tab-active-ink: #677e98;
818
816
  }
819
817
 
820
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-accent {
821
- --tab-active-ink: #ab9fe8;
818
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-secondary {
819
+ --tab-active-ink: #e68aac;
822
820
  }
823
821
 
824
822
  .zx-root .zx-tabs__tab.zx-a-color-accent.zx-s-active {
@@ -841,24 +839,24 @@
841
839
  color: #ab9fe8;
842
840
  }
843
841
 
844
- .zx-root .zx-tabs__tab.zx-a-color-neutral {
845
- --tab-active-ink: #121214;
842
+ .zx-root .zx-tabs__indicator.zx-a-color-accent {
843
+ --tab-active-ink: #2b786d;
846
844
  }
847
845
 
848
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-neutral {
849
- --tab-active-ink: #878e92;
846
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-accent {
847
+ --tab-active-ink: #93e5d9;
850
848
  }
851
849
 
852
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-neutral {
853
- --tab-active-ink: #71828c;
850
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-accent {
851
+ --tab-active-ink: #bfade1;
854
852
  }
855
853
 
856
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-neutral {
857
- --tab-active-ink: #3a4150;
854
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-accent {
855
+ --tab-active-ink: #5e7d8c;
858
856
  }
859
857
 
860
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-neutral {
861
- --tab-active-ink: #667a8a;
858
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-accent {
859
+ --tab-active-ink: #ab9fe8;
862
860
  }
863
861
 
864
862
  .zx-root .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
@@ -881,24 +879,24 @@
881
879
  color: #667a8a;
882
880
  }
883
881
 
884
- .zx-root .zx-tabs__tab.zx-a-color-info {
885
- --tab-active-ink: #2685b3;
882
+ .zx-root .zx-tabs__indicator.zx-a-color-neutral {
883
+ --tab-active-ink: #121214;
886
884
  }
887
885
 
888
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-info {
889
- --tab-active-ink: #70ceff;
886
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-neutral {
887
+ --tab-active-ink: #878e92;
890
888
  }
891
889
 
892
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-info {
893
- --tab-active-ink: #6ce2f3;
890
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-neutral {
891
+ --tab-active-ink: #71828c;
894
892
  }
895
893
 
896
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-info {
897
- --tab-active-ink: #89728a;
894
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-neutral {
895
+ --tab-active-ink: #3a4150;
898
896
  }
899
897
 
900
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-info {
901
- --tab-active-ink: #91d4e3;
898
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-neutral {
899
+ --tab-active-ink: #667a8a;
902
900
  }
903
901
 
904
902
  .zx-root .zx-tabs__tab.zx-a-color-info.zx-s-active {
@@ -921,24 +919,24 @@
921
919
  color: #91d4e3;
922
920
  }
923
921
 
924
- .zx-root .zx-tabs__tab.zx-a-color-success {
925
- --tab-active-ink: #2a7858;
922
+ .zx-root .zx-tabs__indicator.zx-a-color-info {
923
+ --tab-active-ink: #2685b3;
926
924
  }
927
925
 
928
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-success {
929
- --tab-active-ink: #92e5c2;
926
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-info {
927
+ --tab-active-ink: #70ceff;
930
928
  }
931
929
 
932
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-success {
933
- --tab-active-ink: #8ee0c9;
930
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-info {
931
+ --tab-active-ink: #6ce2f3;
934
932
  }
935
933
 
936
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-success {
937
- --tab-active-ink: #6b7d6a;
934
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-info {
935
+ --tab-active-ink: #89728a;
938
936
  }
939
937
 
940
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-success {
941
- --tab-active-ink: #a6cebe;
938
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-info {
939
+ --tab-active-ink: #91d4e3;
942
940
  }
943
941
 
944
942
  .zx-root .zx-tabs__tab.zx-a-color-success.zx-s-active {
@@ -961,24 +959,24 @@
961
959
  color: #a6cebe;
962
960
  }
963
961
 
964
- .zx-root .zx-tabs__tab.zx-a-color-warning {
965
- --tab-active-ink: #755a2b;
962
+ .zx-root .zx-tabs__indicator.zx-a-color-success {
963
+ --tab-active-ink: #2a7858;
966
964
  }
967
965
 
968
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-warning {
969
- --tab-active-ink: #f5ddac;
966
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-success {
967
+ --tab-active-ink: #92e5c2;
970
968
  }
971
969
 
972
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-warning {
973
- --tab-active-ink: #cecfa6;
970
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-success {
971
+ --tab-active-ink: #8ee0c9;
974
972
  }
975
973
 
976
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-warning {
977
- --tab-active-ink: #7d7463;
974
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-success {
975
+ --tab-active-ink: #6b7d6a;
978
976
  }
979
977
 
980
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-warning {
981
- --tab-active-ink: #c5c1b7;
978
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-success {
979
+ --tab-active-ink: #a6cebe;
982
980
  }
983
981
 
984
982
  .zx-root .zx-tabs__tab.zx-a-color-warning.zx-s-active {
@@ -1001,24 +999,24 @@
1001
999
  color: #c5c1b7;
1002
1000
  }
1003
1001
 
1004
- .zx-root .zx-tabs__tab.zx-a-color-error {
1005
- --tab-active-ink: #d9576d;
1002
+ .zx-root .zx-tabs__indicator.zx-a-color-warning {
1003
+ --tab-active-ink: #755a2b;
1006
1004
  }
1007
1005
 
1008
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-error {
1009
- --tab-active-ink: #ff7d90;
1006
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-warning {
1007
+ --tab-active-ink: #f5ddac;
1010
1008
  }
1011
1009
 
1012
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-error {
1013
- --tab-active-ink: #f5b3a4;
1010
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-warning {
1011
+ --tab-active-ink: #cecfa6;
1014
1012
  }
1015
1013
 
1016
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-error {
1017
- --tab-active-ink: #a85b64;
1014
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-warning {
1015
+ --tab-active-ink: #7d7463;
1018
1016
  }
1019
1017
 
1020
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-error {
1021
- --tab-active-ink: #f2bbc0;
1018
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-warning {
1019
+ --tab-active-ink: #c5c1b7;
1022
1020
  }
1023
1021
 
1024
1022
  .zx-root .zx-tabs__tab.zx-a-color-error.zx-s-active {
@@ -1041,13 +1039,37 @@
1041
1039
  color: #f2bbc0;
1042
1040
  }
1043
1041
 
1042
+ .zx-root .zx-tabs__indicator.zx-a-color-error {
1043
+ --tab-active-ink: #d9576d;
1044
+ }
1045
+
1046
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-error {
1047
+ --tab-active-ink: #ff7d90;
1048
+ }
1049
+
1050
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-error {
1051
+ --tab-active-ink: #f5b3a4;
1052
+ }
1053
+
1054
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-error {
1055
+ --tab-active-ink: #a85b64;
1056
+ }
1057
+
1058
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-error {
1059
+ --tab-active-ink: #f2bbc0;
1060
+ }
1061
+
1044
1062
  .zx-tabs__tab.zx-a-variant-border {
1045
1063
  border-radius: var(--radius-field);
1046
- border-bottom: 3px solid transparent;
1047
1064
  }
1048
1065
 
1049
- .zx-tabs__tab.zx-a-variant-border.zx-s-active {
1066
+ .zx-tabs__indicator.zx-a-variant-border {
1067
+ display: flex;
1068
+ box-sizing: border-box;
1069
+ border-bottom-width: 3px;
1070
+ border-bottom-style: solid;
1050
1071
  border-bottom-color: var(--tab-active-ink);
1072
+ transform: scaleX(0.8);
1051
1073
  }
1052
1074
 
1053
1075
  .zx-tabs__tab.zx-a-variant-lift {
@@ -1394,6 +1416,10 @@
1394
1416
  flex-direction: row;
1395
1417
  }
1396
1418
 
1419
+ .zx-switch__root.zx-f-readonly {
1420
+ cursor: default;
1421
+ }
1422
+
1397
1423
  .zx-switch__root.zx-f-disabled {
1398
1424
  opacity: var(--disabled-opacity);
1399
1425
  cursor: not-allowed;
@@ -1409,6 +1435,7 @@
1409
1435
  padding: calc((var(--size-selector) * 6) * 0.125);
1410
1436
  border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 6) * 0.125) + var(--border));
1411
1437
  border: var(--border) solid var(--switch-ink);
1438
+ box-shadow: 0 1px var(--depth-shade) inset;
1412
1439
  user-select: none;
1413
1440
  transition: border-color var(--duration-slow) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
1414
1441
  }
@@ -1460,6 +1487,7 @@
1460
1487
  height: calc((var(--size-selector) * 6) - (var(--border) + ((var(--size-selector) * 6) * 0.125)) * 2);
1461
1488
  border-radius: var(--radius-selector);
1462
1489
  background-color: var(--switch-ink);
1490
+ box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
1463
1491
  transition: transform var(--duration-normal) var(--ease-standard), background-color var(--duration-instant) var(--ease-standard);
1464
1492
  }
1465
1493
 
@@ -1571,6 +1599,12 @@
1571
1599
  outline-offset: 2px;
1572
1600
  }
1573
1601
 
1602
+ .zx-dialog__trigger.zx-f-pressed {
1603
+ background: var(--color-base-300);
1604
+ transform: translateY(1px);
1605
+ box-shadow: none;
1606
+ }
1607
+
1574
1608
  .zx-dialog__popup {
1575
1609
  opacity: 0;
1576
1610
  transform: translateY(8px) scale(0.97);
@@ -1632,6 +1666,7 @@
1632
1666
  justify-content: flex-end;
1633
1667
  gap: var(--space-md);
1634
1668
  margin-top: var(--space-2xl);
1669
+ flex-direction: row;
1635
1670
  }
1636
1671
 
1637
1672
  .zx-dialog__close {
@@ -1663,6 +1698,12 @@
1663
1698
  outline-offset: 2px;
1664
1699
  }
1665
1700
 
1701
+ .zx-dialog__close.zx-f-pressed {
1702
+ background: var(--color-base-300);
1703
+ transform: translateY(1px);
1704
+ box-shadow: none;
1705
+ }
1706
+
1666
1707
  .zx-dialog__cancel {
1667
1708
  appearance: none;
1668
1709
  display: flex;
@@ -1692,6 +1733,12 @@
1692
1733
  outline-offset: 2px;
1693
1734
  }
1694
1735
 
1736
+ .zx-dialog__cancel.zx-f-pressed {
1737
+ background: var(--color-base-300);
1738
+ transform: translateY(1px);
1739
+ box-shadow: none;
1740
+ }
1741
+
1695
1742
  .zx-dialog__trigger.zx-a-color-primary {
1696
1743
  background: var(--color-primary);
1697
1744
  color: var(--color-primary-content);
@@ -1845,6 +1892,12 @@
1845
1892
  outline-offset: 2px;
1846
1893
  }
1847
1894
 
1895
+ .zx-popover__trigger.zx-f-pressed {
1896
+ background: var(--color-base-300);
1897
+ transform: translateY(1px);
1898
+ box-shadow: none;
1899
+ }
1900
+
1848
1901
  .zx-popover__popup {
1849
1902
  opacity: 0;
1850
1903
  transform: translateY(-4px);
@@ -1869,6 +1922,31 @@
1869
1922
  font-weight: var(--weight-bold);
1870
1923
  }
1871
1924
 
1925
+ .zx-popover__description {
1926
+ margin: 0 0 var(--space-lg);
1927
+ font-size: var(--text-sm);
1928
+ }
1929
+
1930
+ .zx-root .zx-popover__description {
1931
+ color: #18181bbf;
1932
+ }
1933
+
1934
+ .zx-root.zx-theme-dark .zx-popover__description {
1935
+ color: #ecf9ffbf;
1936
+ }
1937
+
1938
+ .zx-root.zx-theme-dim .zx-popover__description {
1939
+ color: #b2ccd6bf;
1940
+ }
1941
+
1942
+ .zx-root.zx-theme-nord .zx-popover__description {
1943
+ color: #2e3440bf;
1944
+ }
1945
+
1946
+ .zx-root.zx-theme-sunset .zx-popover__description {
1947
+ color: #9fb9d0bf;
1948
+ }
1949
+
1872
1950
  .zx-popover__close {
1873
1951
  appearance: none;
1874
1952
  display: flex;
@@ -1898,6 +1976,12 @@
1898
1976
  outline-offset: 2px;
1899
1977
  }
1900
1978
 
1979
+ .zx-popover__close.zx-f-pressed {
1980
+ background: var(--color-base-300);
1981
+ transform: translateY(1px);
1982
+ box-shadow: none;
1983
+ }
1984
+
1901
1985
  .zx-popover__trigger.zx-a-color-primary {
1902
1986
  background: var(--color-primary);
1903
1987
  color: var(--color-primary-content);
@@ -2725,119 +2809,347 @@
2725
2809
  font-size: var(--text-md);
2726
2810
  }
2727
2811
 
2728
- .zx-checkbox__root {
2729
- --checkbox-pad: 0.25rem;
2730
- --checkbox-accent: var(--color-primary);
2731
- --checkbox-on-accent: var(--color-primary-content);
2812
+ .zx-fieldset__root {
2813
+ --fieldset-accent: var(--color-base-content);
2732
2814
  }
2733
2815
 
2734
- .zx-checkbox__root {
2735
- display: flex;
2736
- align-items: center;
2737
- gap: var(--space-md);
2738
- cursor: pointer;
2816
+ .zx-fieldset__root {
2817
+ display: grid;
2818
+ grid-template-columns: 1fr;
2819
+ grid-auto-rows: max-content;
2820
+ gap: var(--space-sm);
2821
+ min-inline-size: 0;
2822
+ margin: 0;
2823
+ border: none;
2739
2824
  }
2740
2825
 
2741
- .zx-checkbox__root.zx-f-disabled {
2826
+ .zx-fieldset__legend {
2827
+ font-size: var(--text-sm);
2828
+ font-weight: var(--weight-semibold);
2829
+ color: var(--fieldset-accent);
2830
+ }
2831
+
2832
+ .zx-fieldset__legend.zx-f-disabled {
2742
2833
  opacity: var(--disabled-opacity);
2743
- cursor: not-allowed;
2744
2834
  }
2745
2835
 
2746
- .zx-checkbox__control {
2747
- display: inline-block;
2748
- position: relative;
2749
- vertical-align: middle;
2750
- flex-shrink: 0;
2751
- box-sizing: border-box;
2752
- width: calc(var(--size-selector) * 6);
2753
- height: calc(var(--size-selector) * 6);
2754
- padding: var(--checkbox-pad);
2755
- border: var(--border) solid var(--checkbox-accent);
2756
- border-radius: var(--radius-selector);
2757
- color: var(--checkbox-on-accent);
2758
- box-shadow: 0 1px var(--depth-shade) inset, 0 0 #0000 inset, 0 0 #0000;
2759
- background-size: auto, calc(var(--noise) * 100%);
2760
- background-image: none, var(--fx-noise);
2761
- cursor: pointer;
2762
- transition: background-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
2836
+ .zx-root .zx-fieldset__legend.zx-f-invalid {
2837
+ color: #d9576d;
2763
2838
  }
2764
2839
 
2765
- .zx-checkbox__control.zx-a-size-xs {
2766
- width: calc(var(--size-selector) * 4);
2767
- height: calc(var(--size-selector) * 4);
2840
+ .zx-root.zx-theme-dark .zx-fieldset__legend.zx-f-invalid {
2841
+ color: #ff7d90;
2768
2842
  }
2769
2843
 
2770
- .zx-checkbox__control.zx-a-size-sm {
2771
- width: calc(var(--size-selector) * 5);
2772
- height: calc(var(--size-selector) * 5);
2844
+ .zx-root.zx-theme-dim .zx-fieldset__legend.zx-f-invalid {
2845
+ color: #f5b3a4;
2773
2846
  }
2774
2847
 
2775
- .zx-checkbox__control.zx-a-size-lg {
2776
- width: calc(var(--size-selector) * 7);
2777
- height: calc(var(--size-selector) * 7);
2848
+ .zx-root.zx-theme-nord .zx-fieldset__legend.zx-f-invalid {
2849
+ color: #a85b64;
2778
2850
  }
2779
2851
 
2780
- .zx-checkbox__control.zx-a-size-xl {
2781
- width: calc(var(--size-selector) * 8);
2782
- height: calc(var(--size-selector) * 8);
2852
+ .zx-root.zx-theme-sunset .zx-fieldset__legend.zx-f-invalid {
2853
+ color: #f2bbc0;
2783
2854
  }
2784
2855
 
2785
- .zx-checkbox__control.zx-s-checked {
2786
- background-color: var(--checkbox-accent);
2787
- box-shadow: 0 0 #0000 inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
2856
+ .zx-root .zx-fieldset__root.zx-a-color-primary {
2857
+ --fieldset-accent: #3f2bcb;
2788
2858
  }
2789
2859
 
2790
- .zx-checkbox__control.zx-s-indeterminate {
2791
- background-color: var(--checkbox-accent);
2860
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-primary {
2861
+ --fieldset-accent: #6567ff;
2792
2862
  }
2793
2863
 
2794
- .zx-checkbox__control.zx-f-focus-visible {
2795
- outline: 2px solid var(--checkbox-accent);
2796
- outline-offset: 2px;
2864
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-primary {
2865
+ --fieldset-accent: #a0e791;
2797
2866
  }
2798
2867
 
2799
- .zx-checkbox__control.zx-f-invalid {
2800
- border-color: var(--color-error);
2868
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-primary {
2869
+ --fieldset-accent: #5c7da6;
2801
2870
  }
2802
2871
 
2803
- .zx-checkbox__indicator {
2804
- display: block;
2805
- width: 100%;
2806
- height: 100%;
2807
- opacity: 0;
2808
- background-color: var(--checkbox-on-accent);
2809
- clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
2810
- box-shadow: 0 3px 0 0 var(--depth-sheen) inset;
2811
- font-size: 1rem;
2812
- line-height: 0.75;
2813
- transition: clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), transform var(--duration-slow) var(--ease-standard) var(--duration-instant);
2814
- transform: rotate(45deg);
2872
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-primary {
2873
+ --fieldset-accent: #fb8a62;
2815
2874
  }
2816
2875
 
2817
- .zx-checkbox__indicator.zx-s-checked {
2818
- clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
2819
- opacity: 1;
2876
+ .zx-root .zx-fieldset__root.zx-a-color-secondary {
2877
+ --fieldset-accent: #ad316f;
2820
2878
  }
2821
2879
 
2822
- .zx-checkbox__indicator.zx-s-indeterminate {
2823
- clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
2824
- opacity: 1;
2825
- transform: translateY(-35%) rotate(0deg);
2880
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-secondary {
2881
+ --fieldset-accent: #fa7cb6;
2826
2882
  }
2827
2883
 
2828
- .zx-checkbox__label {
2829
- font-size: var(--text-sm);
2830
- font-weight: var(--weight-medium);
2884
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-secondary {
2885
+ --fieldset-accent: #ed9984;
2831
2886
  }
2832
2887
 
2833
- .zx-checkbox__root.zx-a-color-primary {
2834
- --checkbox-accent: var(--color-primary);
2835
- --checkbox-on-accent: var(--color-primary-content);
2888
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-secondary {
2889
+ --fieldset-accent: #677e98;
2836
2890
  }
2837
2891
 
2838
- .zx-checkbox__root.zx-a-color-secondary {
2839
- --checkbox-accent: var(--color-secondary);
2840
- --checkbox-on-accent: var(--color-secondary-content);
2892
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-secondary {
2893
+ --fieldset-accent: #e68aac;
2894
+ }
2895
+
2896
+ .zx-root .zx-fieldset__root.zx-a-color-accent {
2897
+ --fieldset-accent: #2b786d;
2898
+ }
2899
+
2900
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-accent {
2901
+ --fieldset-accent: #93e5d9;
2902
+ }
2903
+
2904
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-accent {
2905
+ --fieldset-accent: #bfade1;
2906
+ }
2907
+
2908
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-accent {
2909
+ --fieldset-accent: #5e7d8c;
2910
+ }
2911
+
2912
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-accent {
2913
+ --fieldset-accent: #ab9fe8;
2914
+ }
2915
+
2916
+ .zx-root .zx-fieldset__root.zx-a-color-neutral {
2917
+ --fieldset-accent: #121214;
2918
+ }
2919
+
2920
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-neutral {
2921
+ --fieldset-accent: #878e92;
2922
+ }
2923
+
2924
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-neutral {
2925
+ --fieldset-accent: #71828c;
2926
+ }
2927
+
2928
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-neutral {
2929
+ --fieldset-accent: #3a4150;
2930
+ }
2931
+
2932
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-neutral {
2933
+ --fieldset-accent: #667a8a;
2934
+ }
2935
+
2936
+ .zx-root .zx-fieldset__root.zx-a-color-info {
2937
+ --fieldset-accent: #2685b3;
2938
+ }
2939
+
2940
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-info {
2941
+ --fieldset-accent: #70ceff;
2942
+ }
2943
+
2944
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-info {
2945
+ --fieldset-accent: #6ce2f3;
2946
+ }
2947
+
2948
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-info {
2949
+ --fieldset-accent: #89728a;
2950
+ }
2951
+
2952
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-info {
2953
+ --fieldset-accent: #91d4e3;
2954
+ }
2955
+
2956
+ .zx-root .zx-fieldset__root.zx-a-color-success {
2957
+ --fieldset-accent: #2a7858;
2958
+ }
2959
+
2960
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-success {
2961
+ --fieldset-accent: #92e5c2;
2962
+ }
2963
+
2964
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-success {
2965
+ --fieldset-accent: #8ee0c9;
2966
+ }
2967
+
2968
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-success {
2969
+ --fieldset-accent: #6b7d6a;
2970
+ }
2971
+
2972
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-success {
2973
+ --fieldset-accent: #a6cebe;
2974
+ }
2975
+
2976
+ .zx-root .zx-fieldset__root.zx-a-color-warning {
2977
+ --fieldset-accent: #755a2b;
2978
+ }
2979
+
2980
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-warning {
2981
+ --fieldset-accent: #f5ddac;
2982
+ }
2983
+
2984
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-warning {
2985
+ --fieldset-accent: #cecfa6;
2986
+ }
2987
+
2988
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-warning {
2989
+ --fieldset-accent: #7d7463;
2990
+ }
2991
+
2992
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-warning {
2993
+ --fieldset-accent: #c5c1b7;
2994
+ }
2995
+
2996
+ .zx-root .zx-fieldset__root.zx-a-color-error {
2997
+ --fieldset-accent: #d9576d;
2998
+ }
2999
+
3000
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-error {
3001
+ --fieldset-accent: #ff7d90;
3002
+ }
3003
+
3004
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-error {
3005
+ --fieldset-accent: #f5b3a4;
3006
+ }
3007
+
3008
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-error {
3009
+ --fieldset-accent: #a85b64;
3010
+ }
3011
+
3012
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-error {
3013
+ --fieldset-accent: #f2bbc0;
3014
+ }
3015
+
3016
+ .zx-fieldset__legend.zx-a-size-xs {
3017
+ font-size: var(--text-xs);
3018
+ }
3019
+
3020
+ .zx-fieldset__legend.zx-a-size-sm {
3021
+ font-size: var(--text-xs);
3022
+ }
3023
+
3024
+ .zx-fieldset__legend.zx-a-size-lg {
3025
+ font-size: var(--text-md);
3026
+ }
3027
+
3028
+ .zx-fieldset__legend.zx-a-size-xl {
3029
+ font-size: var(--text-lg);
3030
+ }
3031
+
3032
+ .zx-checkbox__root {
3033
+ --checkbox-pad: 0.25rem;
3034
+ --checkbox-accent: var(--color-primary);
3035
+ --checkbox-on-accent: var(--color-primary-content);
3036
+ }
3037
+
3038
+ .zx-checkbox__root {
3039
+ display: flex;
3040
+ align-items: center;
3041
+ gap: var(--space-md);
3042
+ cursor: pointer;
3043
+ }
3044
+
3045
+ .zx-checkbox__root.zx-f-readonly {
3046
+ cursor: default;
3047
+ }
3048
+
3049
+ .zx-checkbox__root.zx-f-disabled {
3050
+ opacity: var(--disabled-opacity);
3051
+ cursor: not-allowed;
3052
+ }
3053
+
3054
+ .zx-checkbox__control {
3055
+ display: inline-block;
3056
+ position: relative;
3057
+ vertical-align: middle;
3058
+ flex-shrink: 0;
3059
+ box-sizing: border-box;
3060
+ width: calc(var(--size-selector) * 6);
3061
+ height: calc(var(--size-selector) * 6);
3062
+ padding: var(--checkbox-pad);
3063
+ border: var(--border) solid var(--checkbox-accent);
3064
+ border-radius: var(--radius-selector);
3065
+ color: var(--checkbox-on-accent);
3066
+ box-shadow: 0 1px var(--depth-shade) inset, 0 0 #0000 inset, 0 0 #0000;
3067
+ background-size: auto, calc(var(--noise) * 100%);
3068
+ background-image: none, var(--fx-noise);
3069
+ cursor: pointer;
3070
+ transition: background-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
3071
+ }
3072
+
3073
+ .zx-checkbox__control.zx-a-size-xs {
3074
+ width: calc(var(--size-selector) * 4);
3075
+ height: calc(var(--size-selector) * 4);
3076
+ }
3077
+
3078
+ .zx-checkbox__control.zx-a-size-sm {
3079
+ width: calc(var(--size-selector) * 5);
3080
+ height: calc(var(--size-selector) * 5);
3081
+ }
3082
+
3083
+ .zx-checkbox__control.zx-a-size-lg {
3084
+ width: calc(var(--size-selector) * 7);
3085
+ height: calc(var(--size-selector) * 7);
3086
+ }
3087
+
3088
+ .zx-checkbox__control.zx-a-size-xl {
3089
+ width: calc(var(--size-selector) * 8);
3090
+ height: calc(var(--size-selector) * 8);
3091
+ }
3092
+
3093
+ .zx-checkbox__control.zx-s-checked {
3094
+ background-color: var(--checkbox-accent);
3095
+ box-shadow: 0 0 #0000 inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
3096
+ }
3097
+
3098
+ .zx-checkbox__control.zx-s-indeterminate {
3099
+ background-color: var(--checkbox-accent);
3100
+ }
3101
+
3102
+ .zx-checkbox__control.zx-f-focus-visible {
3103
+ outline: 2px solid var(--checkbox-accent);
3104
+ outline-offset: 2px;
3105
+ }
3106
+
3107
+ .zx-checkbox__control.zx-f-invalid {
3108
+ border-color: var(--color-error);
3109
+ }
3110
+
3111
+ .zx-checkbox__control.zx-f-readonly {
3112
+ cursor: default;
3113
+ }
3114
+
3115
+ .zx-checkbox__indicator {
3116
+ display: block;
3117
+ width: 100%;
3118
+ height: 100%;
3119
+ opacity: 0;
3120
+ background-color: var(--checkbox-on-accent);
3121
+ clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
3122
+ box-shadow: 0 3px 0 0 var(--depth-sheen) inset;
3123
+ font-size: 1rem;
3124
+ line-height: 0.75;
3125
+ transition: clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), transform var(--duration-slow) var(--ease-standard) var(--duration-instant);
3126
+ transform: rotate(45deg);
3127
+ }
3128
+
3129
+ .zx-checkbox__indicator.zx-s-checked {
3130
+ clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
3131
+ opacity: 1;
3132
+ }
3133
+
3134
+ .zx-checkbox__indicator.zx-s-indeterminate {
3135
+ clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
3136
+ opacity: 1;
3137
+ transform: translateY(-35%) rotate(0deg);
3138
+ }
3139
+
3140
+ .zx-checkbox__label {
3141
+ font-size: var(--text-sm);
3142
+ font-weight: var(--weight-medium);
3143
+ }
3144
+
3145
+ .zx-checkbox__root.zx-a-color-primary {
3146
+ --checkbox-accent: var(--color-primary);
3147
+ --checkbox-on-accent: var(--color-primary-content);
3148
+ }
3149
+
3150
+ .zx-checkbox__root.zx-a-color-secondary {
3151
+ --checkbox-accent: var(--color-secondary);
3152
+ --checkbox-on-accent: var(--color-secondary-content);
2841
3153
  }
2842
3154
 
2843
3155
  .zx-checkbox__root.zx-a-color-accent {
@@ -2910,6 +3222,216 @@
2910
3222
  font-size: var(--text-lg);
2911
3223
  }
2912
3224
 
3225
+ .zx-checkbox-group__root {
3226
+ --checkbox-group-accent: var(--color-base-content);
3227
+ }
3228
+
3229
+ .zx-checkbox-group__root {
3230
+ display: flex;
3231
+ flex-direction: column;
3232
+ gap: var(--space-md);
3233
+ }
3234
+
3235
+ .zx-checkbox-group__root.zx-o-horizontal {
3236
+ flex-direction: row;
3237
+ flex-wrap: wrap;
3238
+ column-gap: var(--space-lg);
3239
+ }
3240
+
3241
+ .zx-checkbox-group__label {
3242
+ font-size: var(--text-sm);
3243
+ font-weight: var(--weight-semibold);
3244
+ color: var(--checkbox-group-accent);
3245
+ }
3246
+
3247
+ .zx-checkbox-group__label.zx-f-disabled {
3248
+ opacity: var(--disabled-opacity);
3249
+ }
3250
+
3251
+ .zx-root .zx-checkbox-group__root.zx-a-color-primary {
3252
+ --checkbox-group-accent: #3f2bcb;
3253
+ }
3254
+
3255
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-primary {
3256
+ --checkbox-group-accent: #6567ff;
3257
+ }
3258
+
3259
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-primary {
3260
+ --checkbox-group-accent: #a0e791;
3261
+ }
3262
+
3263
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-primary {
3264
+ --checkbox-group-accent: #5c7da6;
3265
+ }
3266
+
3267
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-primary {
3268
+ --checkbox-group-accent: #fb8a62;
3269
+ }
3270
+
3271
+ .zx-root .zx-checkbox-group__root.zx-a-color-secondary {
3272
+ --checkbox-group-accent: #ad316f;
3273
+ }
3274
+
3275
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-secondary {
3276
+ --checkbox-group-accent: #fa7cb6;
3277
+ }
3278
+
3279
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-secondary {
3280
+ --checkbox-group-accent: #ed9984;
3281
+ }
3282
+
3283
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-secondary {
3284
+ --checkbox-group-accent: #677e98;
3285
+ }
3286
+
3287
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-secondary {
3288
+ --checkbox-group-accent: #e68aac;
3289
+ }
3290
+
3291
+ .zx-root .zx-checkbox-group__root.zx-a-color-accent {
3292
+ --checkbox-group-accent: #2b786d;
3293
+ }
3294
+
3295
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-accent {
3296
+ --checkbox-group-accent: #93e5d9;
3297
+ }
3298
+
3299
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-accent {
3300
+ --checkbox-group-accent: #bfade1;
3301
+ }
3302
+
3303
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-accent {
3304
+ --checkbox-group-accent: #5e7d8c;
3305
+ }
3306
+
3307
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-accent {
3308
+ --checkbox-group-accent: #ab9fe8;
3309
+ }
3310
+
3311
+ .zx-root .zx-checkbox-group__root.zx-a-color-neutral {
3312
+ --checkbox-group-accent: #121214;
3313
+ }
3314
+
3315
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-neutral {
3316
+ --checkbox-group-accent: #878e92;
3317
+ }
3318
+
3319
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-neutral {
3320
+ --checkbox-group-accent: #71828c;
3321
+ }
3322
+
3323
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-neutral {
3324
+ --checkbox-group-accent: #3a4150;
3325
+ }
3326
+
3327
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-neutral {
3328
+ --checkbox-group-accent: #667a8a;
3329
+ }
3330
+
3331
+ .zx-root .zx-checkbox-group__root.zx-a-color-info {
3332
+ --checkbox-group-accent: #2685b3;
3333
+ }
3334
+
3335
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-info {
3336
+ --checkbox-group-accent: #70ceff;
3337
+ }
3338
+
3339
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-info {
3340
+ --checkbox-group-accent: #6ce2f3;
3341
+ }
3342
+
3343
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-info {
3344
+ --checkbox-group-accent: #89728a;
3345
+ }
3346
+
3347
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-info {
3348
+ --checkbox-group-accent: #91d4e3;
3349
+ }
3350
+
3351
+ .zx-root .zx-checkbox-group__root.zx-a-color-success {
3352
+ --checkbox-group-accent: #2a7858;
3353
+ }
3354
+
3355
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-success {
3356
+ --checkbox-group-accent: #92e5c2;
3357
+ }
3358
+
3359
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-success {
3360
+ --checkbox-group-accent: #8ee0c9;
3361
+ }
3362
+
3363
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-success {
3364
+ --checkbox-group-accent: #6b7d6a;
3365
+ }
3366
+
3367
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-success {
3368
+ --checkbox-group-accent: #a6cebe;
3369
+ }
3370
+
3371
+ .zx-root .zx-checkbox-group__root.zx-a-color-warning {
3372
+ --checkbox-group-accent: #755a2b;
3373
+ }
3374
+
3375
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-warning {
3376
+ --checkbox-group-accent: #f5ddac;
3377
+ }
3378
+
3379
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-warning {
3380
+ --checkbox-group-accent: #cecfa6;
3381
+ }
3382
+
3383
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-warning {
3384
+ --checkbox-group-accent: #7d7463;
3385
+ }
3386
+
3387
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-warning {
3388
+ --checkbox-group-accent: #c5c1b7;
3389
+ }
3390
+
3391
+ .zx-root .zx-checkbox-group__root.zx-a-color-error {
3392
+ --checkbox-group-accent: #d9576d;
3393
+ }
3394
+
3395
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-error {
3396
+ --checkbox-group-accent: #ff7d90;
3397
+ }
3398
+
3399
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-error {
3400
+ --checkbox-group-accent: #f5b3a4;
3401
+ }
3402
+
3403
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-error {
3404
+ --checkbox-group-accent: #a85b64;
3405
+ }
3406
+
3407
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-error {
3408
+ --checkbox-group-accent: #f2bbc0;
3409
+ }
3410
+
3411
+ .zx-checkbox-group__root.zx-a-size-xs {
3412
+ gap: var(--space-sm);
3413
+ }
3414
+
3415
+ .zx-checkbox-group__label.zx-a-size-xs {
3416
+ font-size: var(--text-xs);
3417
+ }
3418
+
3419
+ .zx-checkbox-group__label.zx-a-size-sm {
3420
+ font-size: var(--text-xs);
3421
+ }
3422
+
3423
+ .zx-checkbox-group__label.zx-a-size-lg {
3424
+ font-size: var(--text-md);
3425
+ }
3426
+
3427
+ .zx-checkbox-group__root.zx-a-size-xl {
3428
+ gap: var(--space-lg);
3429
+ }
3430
+
3431
+ .zx-checkbox-group__label.zx-a-size-xl {
3432
+ font-size: var(--text-lg);
3433
+ }
3434
+
2913
3435
  .zx-radio-group__root {
2914
3436
  --radio-pad: 0.25rem;
2915
3437
  --radio-accent: var(--color-primary);
@@ -2937,6 +3459,10 @@
2937
3459
  cursor: pointer;
2938
3460
  }
2939
3461
 
3462
+ .zx-radio-group__item.zx-f-readonly {
3463
+ cursor: default;
3464
+ }
3465
+
2940
3466
  .zx-radio-group__item.zx-f-disabled {
2941
3467
  opacity: var(--disabled-opacity);
2942
3468
  cursor: not-allowed;
@@ -2984,6 +3510,10 @@
2984
3510
  animation: var(--duration-fast) var(--ease-standard) zero-daisy-radio;
2985
3511
  }
2986
3512
 
3513
+ .zx-radio-group__item-control.zx-f-invalid {
3514
+ border-color: var(--color-error);
3515
+ }
3516
+
2987
3517
  .zx-radio-group__item-control.zx-f-focus-visible {
2988
3518
  outline: 2px solid var(--radio-accent);
2989
3519
  outline-offset: 2px;
@@ -3090,7 +3620,7 @@
3090
3620
  }
3091
3621
 
3092
3622
  .zx-root.zx-theme-dark .zx-progress__root {
3093
- --progress-accent: #6b6fff;
3623
+ --progress-accent: #6c70ff;
3094
3624
  }
3095
3625
 
3096
3626
  .zx-root.zx-theme-dim .zx-progress__root {
@@ -3138,34 +3668,14 @@
3138
3668
  }
3139
3669
 
3140
3670
  .zx-progress__track.zx-a-size-xl {
3141
- height: calc(var(--size-selector) * 4.5);
3142
- }
3143
-
3144
- .zx-progress__range {
3145
- height: 100%;
3146
- background: var(--progress-accent);
3147
- border-radius: var(--radius-box);
3148
- transition: width var(--duration-slow) var(--ease-standard);
3149
- }
3150
-
3151
- .zx-root .zx-progress__range.zx-s-complete {
3152
- background: #009367;
3153
- }
3154
-
3155
- .zx-root.zx-theme-dark .zx-progress__range.zx-s-complete {
3156
- background: #009367;
3157
- }
3158
-
3159
- .zx-root.zx-theme-dim .zx-progress__range.zx-s-complete {
3160
- background: #328366;
3161
- }
3162
-
3163
- .zx-root.zx-theme-nord .zx-progress__range.zx-s-complete {
3164
- background: #58674b;
3671
+ height: calc(var(--size-selector) * 4.5);
3165
3672
  }
3166
3673
 
3167
- .zx-root.zx-theme-sunset .zx-progress__range.zx-s-complete {
3168
- background: #5d7a5d;
3674
+ .zx-progress__range {
3675
+ height: 100%;
3676
+ background: var(--progress-accent);
3677
+ border-radius: var(--radius-box);
3678
+ transition: width var(--duration-slow) var(--ease-standard);
3169
3679
  }
3170
3680
 
3171
3681
  .zx-progress__range.zx-s-indeterminate {
@@ -3183,7 +3693,7 @@
3183
3693
  }
3184
3694
 
3185
3695
  .zx-root.zx-theme-dark .zx-progress__root.zx-a-color-primary {
3186
- --progress-accent: #6b6fff;
3696
+ --progress-accent: #6c70ff;
3187
3697
  }
3188
3698
 
3189
3699
  .zx-root.zx-theme-dim .zx-progress__root.zx-a-color-primary {
@@ -3199,11 +3709,11 @@
3199
3709
  }
3200
3710
 
3201
3711
  .zx-root .zx-progress__root.zx-a-color-secondary {
3202
- --progress-accent: #f74ca0;
3712
+ --progress-accent: #de318b;
3203
3713
  }
3204
3714
 
3205
3715
  .zx-root.zx-theme-dark .zx-progress__root.zx-a-color-secondary {
3206
- --progress-accent: #f74ca0;
3716
+ --progress-accent: #de318b;
3207
3717
  }
3208
3718
 
3209
3719
  .zx-root.zx-theme-dim .zx-progress__root.zx-a-color-secondary {
@@ -3345,6 +3855,26 @@
3345
3855
  --slider-accent: var(--color-primary);
3346
3856
  }
3347
3857
 
3858
+ .zx-root .zx-slider__root {
3859
+ --slider-fill: #3c2cc0;
3860
+ }
3861
+
3862
+ .zx-root.zx-theme-dark .zx-slider__root {
3863
+ --slider-fill: #6b70ff;
3864
+ }
3865
+
3866
+ .zx-root.zx-theme-dim .zx-slider__root {
3867
+ --slider-fill: #a1e596;
3868
+ }
3869
+
3870
+ .zx-root.zx-theme-nord .zx-slider__root {
3871
+ --slider-fill: #5979a0;
3872
+ }
3873
+
3874
+ .zx-root.zx-theme-sunset .zx-slider__root {
3875
+ --slider-fill: #f78d69;
3876
+ }
3877
+
3348
3878
  .zx-slider__root {
3349
3879
  display: flex;
3350
3880
  flex-direction: column;
@@ -3356,15 +3886,45 @@
3356
3886
  opacity: var(--disabled-opacity);
3357
3887
  }
3358
3888
 
3889
+ .zx-slider__root.zx-o-vertical {
3890
+ width: auto;
3891
+ align-items: center;
3892
+ }
3893
+
3359
3894
  .zx-slider__label {
3360
3895
  font-size: var(--text-sm);
3361
3896
  font-weight: var(--weight-semibold);
3362
3897
  }
3363
3898
 
3364
3899
  .zx-slider__control {
3900
+ appearance: none;
3365
3901
  width: 100%;
3366
- accent-color: var(--slider-accent);
3902
+ height: calc(var(--size-selector) * 6);
3903
+ margin: 0;
3904
+ background: transparent;
3367
3905
  cursor: pointer;
3906
+ outline: none;
3907
+ accent-color: var(--slider-accent);
3908
+ }
3909
+
3910
+ .zx-slider__control.zx-a-size-xs {
3911
+ height: calc(var(--size-selector) * 4);
3912
+ }
3913
+
3914
+ .zx-slider__control.zx-a-size-sm {
3915
+ height: calc(var(--size-selector) * 5);
3916
+ }
3917
+
3918
+ .zx-slider__control.zx-a-size-lg {
3919
+ height: calc(var(--size-selector) * 7);
3920
+ }
3921
+
3922
+ .zx-slider__control.zx-a-size-xl {
3923
+ height: calc(var(--size-selector) * 8);
3924
+ }
3925
+
3926
+ .zx-slider__control.zx-f-readonly {
3927
+ cursor: default;
3368
3928
  }
3369
3929
 
3370
3930
  .zx-slider__control.zx-f-disabled {
@@ -3377,41 +3937,161 @@
3377
3937
  }
3378
3938
 
3379
3939
  .zx-slider__control.zx-f-invalid {
3380
- accent-color: var(--color-error);
3940
+ --slider-accent: var(--color-error);
3941
+ }
3942
+
3943
+ .zx-root .zx-slider__control.zx-f-invalid {
3944
+ --slider-fill: #e55b72;
3945
+ }
3946
+
3947
+ .zx-root.zx-theme-dark .zx-slider__control.zx-f-invalid {
3948
+ --slider-fill: #ff748a;
3949
+ }
3950
+
3951
+ .zx-root.zx-theme-dim .zx-slider__control.zx-f-invalid {
3952
+ --slider-fill: #f8b2a1;
3953
+ }
3954
+
3955
+ .zx-root.zx-theme-nord .zx-slider__control.zx-f-invalid {
3956
+ --slider-fill: #b05d66;
3957
+ }
3958
+
3959
+ .zx-root.zx-theme-sunset .zx-slider__control.zx-f-invalid {
3960
+ --slider-fill: #f6bbbf;
3961
+ }
3962
+
3963
+ .zx-slider__control.zx-o-vertical {
3964
+ display: flex;
3965
+ flex-direction: row;
3966
+ justify-content: center;
3967
+ width: calc(var(--size-selector) * 6);
3968
+ height: calc(var(--size-selector) * 40);
3969
+ }
3970
+
3971
+ .zx-slider__control.zx-o-vertical.zx-a-size-xs {
3972
+ width: calc(var(--size-selector) * 4);
3973
+ }
3974
+
3975
+ .zx-slider__control.zx-o-vertical.zx-a-size-sm {
3976
+ width: calc(var(--size-selector) * 5);
3977
+ }
3978
+
3979
+ .zx-slider__control.zx-o-vertical.zx-a-size-lg {
3980
+ width: calc(var(--size-selector) * 7);
3981
+ }
3982
+
3983
+ .zx-slider__control.zx-o-vertical.zx-a-size-xl {
3984
+ width: calc(var(--size-selector) * 8);
3381
3985
  }
3382
3986
 
3383
3987
  .zx-slider__track {
3384
- height: calc(var(--size-selector) * 2);
3385
- border-radius: 9999px;
3988
+ height: calc(var(--size-selector) * 3);
3989
+ border-radius: var(--radius-selector);
3386
3990
  background: var(--color-base-300);
3387
3991
  cursor: pointer;
3388
- margin-top: calc(var(--size-selector) * 1.5);
3389
- margin-bottom: calc(var(--size-selector) * 1.5);
3992
+ margin-top: calc(((var(--size-selector) * 6) - (var(--size-selector) * 3)) / 2);
3993
+ margin-bottom: calc(((var(--size-selector) * 6) - (var(--size-selector) * 3)) / 2);
3994
+ }
3995
+
3996
+ .zx-slider__track.zx-a-size-xs {
3997
+ height: calc(var(--size-selector) * 2);
3998
+ margin-top: calc(((var(--size-selector) * 4) - (var(--size-selector) * 2)) / 2);
3999
+ margin-bottom: calc(((var(--size-selector) * 4) - (var(--size-selector) * 2)) / 2);
4000
+ }
4001
+
4002
+ .zx-slider__track.zx-a-size-sm {
4003
+ height: calc(var(--size-selector) * 2.5);
4004
+ margin-top: calc(((var(--size-selector) * 5) - (var(--size-selector) * 2.5)) / 2);
4005
+ margin-bottom: calc(((var(--size-selector) * 5) - (var(--size-selector) * 2.5)) / 2);
4006
+ }
4007
+
4008
+ .zx-slider__track.zx-a-size-lg {
4009
+ height: calc(var(--size-selector) * 3.5);
4010
+ margin-top: calc(((var(--size-selector) * 7) - (var(--size-selector) * 3.5)) / 2);
4011
+ margin-bottom: calc(((var(--size-selector) * 7) - (var(--size-selector) * 3.5)) / 2);
4012
+ }
4013
+
4014
+ .zx-slider__track.zx-a-size-xl {
4015
+ height: calc(var(--size-selector) * 4);
4016
+ margin-top: calc(((var(--size-selector) * 8) - (var(--size-selector) * 4)) / 2);
4017
+ margin-bottom: calc(((var(--size-selector) * 8) - (var(--size-selector) * 4)) / 2);
4018
+ }
4019
+
4020
+ .zx-slider__track.zx-f-readonly {
4021
+ cursor: default;
3390
4022
  }
3391
4023
 
3392
4024
  .zx-slider__track.zx-f-disabled {
3393
4025
  cursor: not-allowed;
3394
4026
  }
3395
4027
 
4028
+ .zx-slider__track.zx-o-vertical {
4029
+ width: calc(var(--size-selector) * 3);
4030
+ height: 100%;
4031
+ margin-top: 0;
4032
+ margin-bottom: 0;
4033
+ }
4034
+
4035
+ .zx-slider__track.zx-o-vertical.zx-a-size-xs {
4036
+ width: calc(var(--size-selector) * 2);
4037
+ }
4038
+
4039
+ .zx-slider__track.zx-o-vertical.zx-a-size-sm {
4040
+ width: calc(var(--size-selector) * 2.5);
4041
+ }
4042
+
4043
+ .zx-slider__track.zx-o-vertical.zx-a-size-lg {
4044
+ width: calc(var(--size-selector) * 3.5);
4045
+ }
4046
+
4047
+ .zx-slider__track.zx-o-vertical.zx-a-size-xl {
4048
+ width: calc(var(--size-selector) * 4);
4049
+ }
4050
+
3396
4051
  .zx-slider__range {
3397
4052
  height: 100%;
3398
- border-radius: 9999px;
3399
- background: var(--slider-accent);
4053
+ border-radius: var(--radius-selector);
4054
+ background: var(--slider-fill);
3400
4055
  }
3401
4056
 
3402
4057
  .zx-slider__thumb {
3403
4058
  box-sizing: border-box;
3404
- width: calc(var(--size-selector) * 5);
3405
- height: calc(var(--size-selector) * 5);
3406
- border-radius: 9999px;
4059
+ width: calc(var(--size-selector) * 6);
4060
+ height: calc(var(--size-selector) * 6);
4061
+ border-radius: calc(var(--radius-selector) + 0.25rem);
3407
4062
  background: var(--color-base-100);
3408
4063
  cursor: pointer;
3409
4064
  outline: none;
3410
4065
  touch-action: none;
3411
- border: 0.25rem solid var(--slider-accent);
4066
+ border: 0.25rem solid var(--slider-fill);
4067
+ box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
3412
4068
  top: 50%;
3413
4069
  transform: translateY(-50%);
3414
- margin-left: calc(var(--size-selector) * -2.5);
4070
+ margin-left: calc((var(--size-selector) * 6) / -2);
4071
+ }
4072
+
4073
+ .zx-slider__thumb.zx-a-size-xs {
4074
+ width: calc(var(--size-selector) * 4);
4075
+ height: calc(var(--size-selector) * 4);
4076
+ margin-left: calc((var(--size-selector) * 4) / -2);
4077
+ }
4078
+
4079
+ .zx-slider__thumb.zx-a-size-sm {
4080
+ width: calc(var(--size-selector) * 5);
4081
+ height: calc(var(--size-selector) * 5);
4082
+ margin-left: calc((var(--size-selector) * 5) / -2);
4083
+ }
4084
+
4085
+ .zx-slider__thumb.zx-a-size-lg {
4086
+ width: calc(var(--size-selector) * 7);
4087
+ height: calc(var(--size-selector) * 7);
4088
+ margin-left: calc((var(--size-selector) * 7) / -2);
4089
+ }
4090
+
4091
+ .zx-slider__thumb.zx-a-size-xl {
4092
+ width: calc(var(--size-selector) * 8);
4093
+ height: calc(var(--size-selector) * 8);
4094
+ margin-left: calc((var(--size-selector) * 8) / -2);
3415
4095
  }
3416
4096
 
3417
4097
  .zx-slider__thumb.zx-f-focus-visible {
@@ -3419,6 +4099,10 @@
3419
4099
  outline-offset: 2px;
3420
4100
  }
3421
4101
 
4102
+ .zx-slider__thumb.zx-f-readonly {
4103
+ cursor: default;
4104
+ }
4105
+
3422
4106
  .zx-slider__thumb.zx-f-disabled {
3423
4107
  cursor: not-allowed;
3424
4108
  }
@@ -3428,7 +4112,52 @@
3428
4112
  line-height: 1;
3429
4113
  white-space: nowrap;
3430
4114
  opacity: 0.6;
3431
- padding-top: calc(var(--size-selector) * 2 + var(--space-2xs));
4115
+ top: 0;
4116
+ width: 2px;
4117
+ height: calc(var(--size-selector) * 3);
4118
+ margin-left: -1px;
4119
+ padding-top: 0;
4120
+ background-color: var(--color-base-content);
4121
+ }
4122
+
4123
+ .zx-slider__mark.zx-a-size-xs {
4124
+ height: calc(var(--size-selector) * 2);
4125
+ }
4126
+
4127
+ .zx-slider__mark.zx-a-size-sm {
4128
+ height: calc(var(--size-selector) * 2.5);
4129
+ }
4130
+
4131
+ .zx-slider__mark.zx-a-size-lg {
4132
+ height: calc(var(--size-selector) * 3.5);
4133
+ }
4134
+
4135
+ .zx-slider__mark.zx-a-size-xl {
4136
+ height: calc(var(--size-selector) * 4);
4137
+ }
4138
+
4139
+ .zx-slider__mark.zx-o-vertical {
4140
+ left: 0;
4141
+ width: calc(var(--size-selector) * 3);
4142
+ height: 2px;
4143
+ margin-left: 0;
4144
+ margin-top: -1px;
4145
+ }
4146
+
4147
+ .zx-slider__mark.zx-o-vertical.zx-a-size-xs {
4148
+ width: calc(var(--size-selector) * 2);
4149
+ }
4150
+
4151
+ .zx-slider__mark.zx-o-vertical.zx-a-size-sm {
4152
+ width: calc(var(--size-selector) * 2.5);
4153
+ }
4154
+
4155
+ .zx-slider__mark.zx-o-vertical.zx-a-size-lg {
4156
+ width: calc(var(--size-selector) * 3.5);
4157
+ }
4158
+
4159
+ .zx-slider__mark.zx-o-vertical.zx-a-size-xl {
4160
+ width: calc(var(--size-selector) * 4);
3432
4161
  }
3433
4162
 
3434
4163
  .zx-slider__value-text {
@@ -3440,44 +4169,196 @@
3440
4169
  --slider-accent: var(--color-primary);
3441
4170
  }
3442
4171
 
4172
+ .zx-root .zx-slider__root.zx-a-color-primary {
4173
+ --slider-fill: #3c2cc0;
4174
+ }
4175
+
4176
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-primary {
4177
+ --slider-fill: #6b70ff;
4178
+ }
4179
+
4180
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-primary {
4181
+ --slider-fill: #a1e596;
4182
+ }
4183
+
4184
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-primary {
4185
+ --slider-fill: #5979a0;
4186
+ }
4187
+
4188
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-primary {
4189
+ --slider-fill: #f78d69;
4190
+ }
4191
+
3443
4192
  .zx-slider__root.zx-a-color-secondary {
3444
4193
  --slider-accent: var(--color-secondary);
3445
4194
  }
3446
4195
 
4196
+ .zx-root .zx-slider__root.zx-a-color-secondary {
4197
+ --slider-fill: #dc318a;
4198
+ }
4199
+
4200
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-secondary {
4201
+ --slider-fill: #f74fa2;
4202
+ }
4203
+
4204
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-secondary {
4205
+ --slider-fill: #f9876b;
4206
+ }
4207
+
4208
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-secondary {
4209
+ --slider-fill: #7895b3;
4210
+ }
4211
+
4212
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-secondary {
4213
+ --slider-fill: #f679a1;
4214
+ }
4215
+
3447
4216
  .zx-slider__root.zx-a-color-accent {
3448
4217
  --slider-accent: var(--color-accent);
3449
4218
  }
3450
4219
 
4220
+ .zx-root .zx-slider__root.zx-a-color-accent {
4221
+ --slider-fill: #1abea9;
4222
+ }
4223
+
4224
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-accent {
4225
+ --slider-fill: #41d7c2;
4226
+ }
4227
+
4228
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-accent {
4229
+ --slider-fill: #c598e7;
4230
+ }
4231
+
4232
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-accent {
4233
+ --slider-fill: #7eb1c0;
4234
+ }
4235
+
4236
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-accent {
4237
+ --slider-fill: #b18df6;
4238
+ }
4239
+
3451
4240
  .zx-slider__root.zx-a-color-neutral {
3452
4241
  --slider-accent: var(--color-neutral);
3453
4242
  }
3454
4243
 
4244
+ .zx-root .zx-slider__root.zx-a-color-neutral {
4245
+ --slider-fill: #0a0a0d;
4246
+ }
4247
+
4248
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-neutral {
4249
+ --slider-fill: #1b1b1e;
4250
+ }
4251
+
4252
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-neutral {
4253
+ --slider-fill: #29303a;
4254
+ }
4255
+
4256
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-neutral {
4257
+ --slider-fill: #495266;
4258
+ }
4259
+
4260
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-neutral {
4261
+ --slider-fill: #26333a;
4262
+ }
4263
+
3455
4264
  .zx-slider__root.zx-a-color-info {
3456
4265
  --slider-accent: var(--color-info);
3457
4266
  }
3458
4267
 
4268
+ .zx-root .zx-slider__root.zx-a-color-info {
4269
+ --slider-fill: #17a8e4;
4270
+ }
4271
+
4272
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-info {
4273
+ --slider-fill: #3dc1ff;
4274
+ }
4275
+
4276
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-info {
4277
+ --slider-fill: #48e8fb;
4278
+ }
4279
+
4280
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-info {
4281
+ --slider-fill: #a684a1;
4282
+ }
4283
+
4284
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-info {
4285
+ --slider-fill: #8cdce8;
4286
+ }
4287
+
3459
4288
  .zx-slider__root.zx-a-color-success {
3460
4289
  --slider-accent: var(--color-success);
3461
4290
  }
3462
4291
 
4292
+ .zx-root .zx-slider__root.zx-a-color-success {
4293
+ --slider-fill: #19be83;
4294
+ }
4295
+
4296
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-success {
4297
+ --slider-fill: #41d79b;
4298
+ }
4299
+
4300
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-success {
4301
+ --slider-fill: #6eecc0;
4302
+ }
4303
+
4304
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-success {
4305
+ --slider-fill: #96af85;
4306
+ }
4307
+
4308
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-success {
4309
+ --slider-fill: #acdbb1;
4310
+ }
4311
+
3463
4312
  .zx-slider__root.zx-a-color-warning {
3464
4313
  --slider-accent: var(--color-warning);
3465
4314
  }
3466
4315
 
4316
+ .zx-root .zx-slider__root.zx-a-color-warning {
4317
+ --slider-fill: #e2a519;
4318
+ }
4319
+
4320
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-warning {
4321
+ --slider-fill: #fbbe41;
4322
+ }
4323
+
4324
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-warning {
4325
+ --slider-fill: #e9d069;
4326
+ }
4327
+
4328
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-warning {
4329
+ --slider-fill: #d6bb84;
4330
+ }
4331
+
4332
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-warning {
4333
+ --slider-fill: #e9c799;
4334
+ }
4335
+
3467
4336
  .zx-slider__root.zx-a-color-error {
3468
4337
  --slider-accent: var(--color-error);
3469
4338
  }
3470
4339
 
3471
- .zx-slider__control.zx-a-size-xs {
3472
- height: calc(var(--size-selector) * 3);
4340
+ .zx-root .zx-slider__root.zx-a-color-error {
4341
+ --slider-fill: #e55b72;
3473
4342
  }
3474
4343
 
3475
- .zx-slider__label.zx-a-size-xs {
3476
- font-size: var(--text-xs);
4344
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-error {
4345
+ --slider-fill: #ff748a;
3477
4346
  }
3478
4347
 
3479
- .zx-slider__control.zx-a-size-sm {
3480
- height: calc(var(--size-selector) * 4);
4348
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-error {
4349
+ --slider-fill: #f8b2a1;
4350
+ }
4351
+
4352
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-error {
4353
+ --slider-fill: #b05d66;
4354
+ }
4355
+
4356
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-error {
4357
+ --slider-fill: #f6bbbf;
4358
+ }
4359
+
4360
+ .zx-slider__label.zx-a-size-xs {
4361
+ font-size: var(--text-xs);
3481
4362
  }
3482
4363
 
3483
4364
  .zx-slider__label.zx-a-size-sm {
@@ -3488,18 +4369,10 @@
3488
4369
  font-size: var(--text-sm);
3489
4370
  }
3490
4371
 
3491
- .zx-slider__control.zx-a-size-lg {
3492
- height: calc(var(--size-selector) * 7);
3493
- }
3494
-
3495
4372
  .zx-slider__label.zx-a-size-lg {
3496
4373
  font-size: var(--text-md);
3497
4374
  }
3498
4375
 
3499
- .zx-slider__control.zx-a-size-xl {
3500
- height: calc(var(--size-selector) * 8);
3501
- }
3502
-
3503
4376
  .zx-slider__label.zx-a-size-xl {
3504
4377
  font-size: var(--text-lg);
3505
4378
  }
@@ -3514,6 +4387,11 @@
3514
4387
  gap: var(--space-md);
3515
4388
  }
3516
4389
 
4390
+ .zx-accordion__root.zx-o-horizontal {
4391
+ flex-direction: row;
4392
+ align-items: start;
4393
+ }
4394
+
3517
4395
  .zx-accordion__item {
3518
4396
  interpolate-size: allow-keywords;
3519
4397
  border: var(--border) solid var(--color-base-300);
@@ -3547,6 +4425,10 @@
3547
4425
  outline-offset: 2px;
3548
4426
  }
3549
4427
 
4428
+ .zx-accordion__trigger.zx-f-pressed {
4429
+ background: var(--color-base-200);
4430
+ }
4431
+
3550
4432
  .zx-accordion__panel {
3551
4433
  padding: 0 var(--space-2xl) var(--space-xl);
3552
4434
  font-size: var(--text-md);
@@ -3759,6 +4641,8 @@
3759
4641
  .zx-select__root {
3760
4642
  display: flex;
3761
4643
  flex-direction: column;
4644
+ position: relative;
4645
+ max-width: 100%;
3762
4646
  }
3763
4647
 
3764
4648
  .zx-select__trigger {
@@ -3778,9 +4662,15 @@
3778
4662
  cursor: pointer;
3779
4663
  transition: background var(--duration-normal) var(--ease-standard);
3780
4664
  box-sizing: border-box;
3781
- min-width: 13rem;
4665
+ min-width: 3rem;
3782
4666
  padding-left: calc(var(--size-field) * 4);
3783
4667
  padding-right: calc(var(--size-field) * 4);
4668
+ width: 20rem;
4669
+ max-width: 100%;
4670
+ }
4671
+
4672
+ .zx-select__trigger.zx-f-readonly {
4673
+ cursor: default;
3784
4674
  }
3785
4675
 
3786
4676
  .zx-select__trigger.zx-f-disabled {
@@ -3801,6 +4691,10 @@
3801
4691
  outline-offset: 2px;
3802
4692
  }
3803
4693
 
4694
+ .zx-select__trigger.zx-f-pressed {
4695
+ background: var(--color-base-200);
4696
+ }
4697
+
3804
4698
  .zx-root .zx-select__value.zx-f-placeholder {
3805
4699
  color: #18181b99;
3806
4700
  }
@@ -3830,6 +4724,53 @@
3830
4724
  transform: rotate(180deg);
3831
4725
  }
3832
4726
 
4727
+ .zx-select__clear-trigger {
4728
+ appearance: none;
4729
+ position: absolute;
4730
+ min-inline-size: 1.5rem;
4731
+ display: flex;
4732
+ align-items: center;
4733
+ justify-content: center;
4734
+ padding: 0 var(--space-xs);
4735
+ border: none;
4736
+ background: transparent;
4737
+ font: inherit;
4738
+ font-size: var(--text-sm);
4739
+ line-height: var(--leading-none);
4740
+ border-radius: var(--radius-field);
4741
+ cursor: pointer;
4742
+ transition: background var(--duration-fast) var(--ease-standard);
4743
+ top: var(--space-xs);
4744
+ bottom: var(--space-xs);
4745
+ right: calc(var(--size-field) * 4 + 1em + var(--space-xs));
4746
+ min-width: 1.5rem;
4747
+ }
4748
+
4749
+ .zx-root .zx-select__clear-trigger {
4750
+ color: #18181bb3;
4751
+ }
4752
+
4753
+ .zx-root.zx-theme-dark .zx-select__clear-trigger {
4754
+ color: #ecf9ffb3;
4755
+ }
4756
+
4757
+ .zx-root.zx-theme-dim .zx-select__clear-trigger {
4758
+ color: #b2ccd6b3;
4759
+ }
4760
+
4761
+ .zx-root.zx-theme-nord .zx-select__clear-trigger {
4762
+ color: #2e3440b3;
4763
+ }
4764
+
4765
+ .zx-root.zx-theme-sunset .zx-select__clear-trigger {
4766
+ color: #9fb9d0b3;
4767
+ }
4768
+
4769
+ .zx-select__clear-trigger.zx-f-focus-visible {
4770
+ outline: 2px solid var(--color-base-content);
4771
+ outline-offset: 2px;
4772
+ }
4773
+
3833
4774
  .zx-select__popup {
3834
4775
  opacity: 0;
3835
4776
  transform: translateY(-4px);
@@ -3889,11 +4830,21 @@
3889
4830
  cursor: not-allowed;
3890
4831
  }
3891
4832
 
4833
+ .zx-select__item.zx-f-pressed {
4834
+ background: var(--color-base-200);
4835
+ }
4836
+
3892
4837
  .zx-select__item-indicator {
3893
4838
  font-size: var(--text-xs);
3894
4839
  color: var(--select-accent);
3895
4840
  }
3896
4841
 
4842
+ .zx-select__separator {
4843
+ height: var(--border);
4844
+ margin: var(--space-sm) var(--space-md);
4845
+ background: var(--color-base-300);
4846
+ }
4847
+
3897
4848
  .zx-select__root.zx-a-color-primary {
3898
4849
  --select-accent: var(--color-primary);
3899
4850
  }
@@ -3993,8 +4944,12 @@
3993
4944
  block-size: 1em;
3994
4945
  flex: none;
3995
4946
  border-radius: 9999px;
4947
+ border: calc(var(--border) * 2) solid var(--btn-ink);
3996
4948
  border-block-start-color: transparent;
3997
4949
  animation: zero-daisyui-btn-spin 0.7s linear infinite;
4950
+ width: 1em;
4951
+ height: 1em;
4952
+ border-top-color: transparent;
3998
4953
  }
3999
4954
 
4000
4955
  .zx-button__root {
@@ -4019,8 +4974,35 @@
4019
4974
  }
4020
4975
 
4021
4976
  .zx-button__root.zx-f-disabled {
4022
- opacity: var(--disabled-opacity);
4977
+ opacity: 1;
4023
4978
  cursor: not-allowed;
4979
+ border-color: transparent;
4980
+ box-shadow: none;
4981
+ }
4982
+
4983
+ .zx-root .zx-button__root.zx-f-disabled {
4984
+ background: #18181b19;
4985
+ color: #18181b80;
4986
+ }
4987
+
4988
+ .zx-root.zx-theme-dark .zx-button__root.zx-f-disabled {
4989
+ background: #ecf9ff19;
4990
+ color: #ecf9ff80;
4991
+ }
4992
+
4993
+ .zx-root.zx-theme-dim .zx-button__root.zx-f-disabled {
4994
+ background: #b2ccd619;
4995
+ color: #b2ccd680;
4996
+ }
4997
+
4998
+ .zx-root.zx-theme-nord .zx-button__root.zx-f-disabled {
4999
+ background: #2e344019;
5000
+ color: #2e344080;
5001
+ }
5002
+
5003
+ .zx-root.zx-theme-sunset .zx-button__root.zx-f-disabled {
5004
+ background: #9fb9d019;
5005
+ color: #9fb9d080;
4024
5006
  }
4025
5007
 
4026
5008
  .zx-button__root.zx-f-focus-visible {
@@ -4028,6 +5010,11 @@
4028
5010
  outline-offset: 2px;
4029
5011
  }
4030
5012
 
5013
+ .zx-button__root.zx-f-pressed {
5014
+ transform: translateY(1px);
5015
+ box-shadow: none;
5016
+ }
5017
+
4031
5018
  .zx-button__root.zx-a-color-primary {
4032
5019
  --btn-accent: var(--color-primary);
4033
5020
  --btn-on-accent: var(--color-primary-content);
@@ -4241,12 +5228,21 @@
4241
5228
  color: var(--btn-on-accent);
4242
5229
  }
4243
5230
 
5231
+ .zx-button__spinner.zx-a-variant-solid {
5232
+ border-color: var(--btn-on-accent);
5233
+ border-top-color: transparent;
5234
+ }
5235
+
4244
5236
  .zx-button__root.zx-a-variant-outline {
4245
5237
  background: transparent;
4246
5238
  color: var(--btn-ink);
4247
5239
  border-color: var(--btn-ink);
4248
5240
  }
4249
5241
 
5242
+ .zx-button__root.zx-a-variant-outline.zx-f-disabled {
5243
+ border-color: transparent;
5244
+ }
5245
+
4250
5246
  .zx-button__root.zx-a-variant-soft {
4251
5247
  background: var(--btn-soft);
4252
5248
  color: var(--btn-ink);
@@ -4257,6 +5253,10 @@
4257
5253
  color: var(--btn-ink);
4258
5254
  }
4259
5255
 
5256
+ .zx-button__root.zx-a-variant-ghost.zx-f-disabled {
5257
+ background: transparent;
5258
+ }
5259
+
4260
5260
  .zx-button__root.zx-a-variant-dash {
4261
5261
  background: transparent;
4262
5262
  color: var(--btn-ink);
@@ -4264,6 +5264,10 @@
4264
5264
  border-style: dashed;
4265
5265
  }
4266
5266
 
5267
+ .zx-button__root.zx-a-variant-dash.zx-f-disabled {
5268
+ border-color: transparent;
5269
+ }
5270
+
4267
5271
  .zx-button__root.zx-a-variant-link {
4268
5272
  background: transparent;
4269
5273
  color: var(--btn-ink);
@@ -4272,6 +5276,10 @@
4272
5276
  box-shadow: none;
4273
5277
  }
4274
5278
 
5279
+ .zx-button__root.zx-a-variant-link.zx-f-disabled {
5280
+ background: transparent;
5281
+ }
5282
+
4275
5283
  .zx-button__root.zx-a-size-xs {
4276
5284
  height: calc(var(--size-field) * 6);
4277
5285
  padding: var(--space-2xs) var(--space-xs);
@@ -4463,52 +5471,62 @@
4463
5471
  border: none;
4464
5472
  background: transparent;
4465
5473
  overflow: visible;
5474
+ width: auto;
4466
5475
  list-style: none;
4467
5476
  flex-direction: column;
4468
5477
  gap: var(--space-sm);
4469
5478
  pointer-events: none;
5479
+ display: flex;
4470
5480
  }
4471
5481
 
4472
5482
  .zx-toast__viewport.zx-p-top-start {
4473
5483
  top: 0;
4474
5484
  left: 0;
5485
+ align-items: flex-start;
4475
5486
  }
4476
5487
 
4477
5488
  .zx-toast__viewport.zx-p-top {
4478
5489
  top: 0;
4479
- left: 50%;
4480
- transform: translateX(-50%);
5490
+ left: 0;
5491
+ transform: none;
5492
+ right: 0;
5493
+ align-items: center;
4481
5494
  }
4482
5495
 
4483
5496
  .zx-toast__viewport.zx-p-top-end {
4484
5497
  top: 0;
4485
5498
  right: 0;
5499
+ align-items: flex-end;
4486
5500
  }
4487
5501
 
4488
5502
  .zx-toast__viewport.zx-p-bottom-start {
4489
5503
  bottom: 0;
4490
5504
  flex-direction: column-reverse;
4491
5505
  left: 0;
5506
+ align-items: flex-start;
4492
5507
  }
4493
5508
 
4494
5509
  .zx-toast__viewport.zx-p-bottom {
4495
5510
  bottom: 0;
4496
- left: 50%;
4497
- transform: translateX(-50%);
5511
+ left: 0;
5512
+ transform: none;
4498
5513
  flex-direction: column-reverse;
5514
+ right: 0;
5515
+ align-items: center;
4499
5516
  }
4500
5517
 
4501
5518
  .zx-toast__viewport.zx-p-bottom-end {
4502
5519
  bottom: 0;
4503
5520
  flex-direction: column-reverse;
4504
5521
  right: 0;
5522
+ align-items: flex-end;
4505
5523
  }
4506
5524
 
4507
5525
  .zx-toast__root {
4508
5526
  pointer-events: auto;
4509
- display: grid;
5527
+ display: flex;
4510
5528
  grid-template-columns: 1fr auto auto;
4511
- align-items: center;
5529
+ align-items: flex-start;
4512
5530
  column-gap: var(--space-md);
4513
5531
  padding: var(--space-md) var(--space-lg);
4514
5532
  background: var(--toast-bg);
@@ -4519,6 +5537,11 @@
4519
5537
  opacity: 0;
4520
5538
  transform: translateY(var(--toast-from));
4521
5539
  transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
5540
+ flex-direction: column;
5541
+ position: relative;
5542
+ box-sizing: border-box;
5543
+ width: 100%;
5544
+ max-width: 24rem;
4522
5545
  }
4523
5546
 
4524
5547
  .zx-toast__root.zx-s-open {
@@ -4526,20 +5549,36 @@
4526
5549
  transform: none;
4527
5550
  }
4528
5551
 
5552
+ .zx-toast__root.zx-p-top-start {
5553
+ --toast-from: -8px;
5554
+ }
5555
+
5556
+ .zx-toast__root.zx-p-top {
5557
+ --toast-from: -8px;
5558
+ }
5559
+
5560
+ .zx-toast__root.zx-p-top-end {
5561
+ --toast-from: -8px;
5562
+ }
5563
+
4529
5564
  .zx-toast__title {
4530
5565
  grid-column: 1;
4531
5566
  font-weight: var(--weight-semibold);
5567
+ padding-right: 1.75em;
4532
5568
  }
4533
5569
 
4534
5570
  .zx-toast__description {
4535
5571
  grid-column: 1;
4536
5572
  font-size: var(--text-xs);
5573
+ color: var(--toast-ink);
5574
+ opacity: 0.75;
4537
5575
  }
4538
5576
 
4539
5577
  .zx-toast__action {
4540
5578
  grid-column: 2;
4541
5579
  grid-row: 1;
4542
5580
  appearance: none;
5581
+ border: var(--border) solid var(--toast-ink);
4543
5582
  background: transparent;
4544
5583
  color: var(--toast-ink);
4545
5584
  border-radius: 9999px;
@@ -4547,6 +5586,7 @@
4547
5586
  font-size: var(--text-xs);
4548
5587
  font-weight: var(--weight-semibold);
4549
5588
  cursor: pointer;
5589
+ margin-top: var(--space-xs);
4550
5590
  }
4551
5591
 
4552
5592
  .zx-toast__action.zx-f-disabled {
@@ -4570,6 +5610,9 @@
4570
5610
  padding: var(--space-2xs) var(--space-xs);
4571
5611
  font-size: var(--text-xs);
4572
5612
  cursor: pointer;
5613
+ position: absolute;
5614
+ top: var(--space-xs);
5615
+ right: var(--space-xs);
4573
5616
  }
4574
5617
 
4575
5618
  .zx-toast__close.zx-f-disabled {
@@ -4751,6 +5794,26 @@
4751
5794
  outline-offset: 2px;
4752
5795
  }
4753
5796
 
5797
+ .zx-root .zx-combobox__tag-remove.zx-f-pressed {
5798
+ background: #18181b2e;
5799
+ }
5800
+
5801
+ .zx-root.zx-theme-dark .zx-combobox__tag-remove.zx-f-pressed {
5802
+ background: #ecf9ff2e;
5803
+ }
5804
+
5805
+ .zx-root.zx-theme-dim .zx-combobox__tag-remove.zx-f-pressed {
5806
+ background: #b2ccd62e;
5807
+ }
5808
+
5809
+ .zx-root.zx-theme-nord .zx-combobox__tag-remove.zx-f-pressed {
5810
+ background: #2e34402e;
5811
+ }
5812
+
5813
+ .zx-root.zx-theme-sunset .zx-combobox__tag-remove.zx-f-pressed {
5814
+ background: #9fb9d02e;
5815
+ }
5816
+
4754
5817
  .zx-combobox__trigger {
4755
5818
  appearance: none;
4756
5819
  border: none;
@@ -4770,6 +5833,19 @@
4770
5833
  cursor: not-allowed;
4771
5834
  }
4772
5835
 
5836
+ .zx-combobox__clear-trigger {
5837
+ appearance: none;
5838
+ border: none;
5839
+ background: transparent;
5840
+ color: inherit;
5841
+ font: inherit;
5842
+ opacity: 0.6;
5843
+ padding: 0 var(--space-xs);
5844
+ line-height: var(--leading-none);
5845
+ cursor: pointer;
5846
+ transition: opacity var(--duration-fast) var(--ease-standard);
5847
+ }
5848
+
4773
5849
  .zx-combobox__popup {
4774
5850
  opacity: 0;
4775
5851
  transform: translateY(-4px);
@@ -4839,6 +5915,19 @@
4839
5915
  opacity: 0.6;
4840
5916
  }
4841
5917
 
5918
+ .zx-combobox__loading {
5919
+ padding: var(--space-lg);
5920
+ font-size: var(--text-sm);
5921
+ text-align: center;
5922
+ opacity: 0.6;
5923
+ }
5924
+
5925
+ .zx-combobox__separator {
5926
+ height: var(--border);
5927
+ margin: var(--space-sm) var(--space-md);
5928
+ background: var(--color-base-300);
5929
+ }
5930
+
4842
5931
  .zx-combobox__root.zx-a-color-primary {
4843
5932
  --combobox-accent: var(--color-primary);
4844
5933
  }
@@ -4956,6 +6045,11 @@
4956
6045
  outline-offset: 2px;
4957
6046
  }
4958
6047
 
6048
+ .zx-toggle__root.zx-f-pressed {
6049
+ transform: translateY(1px);
6050
+ box-shadow: none;
6051
+ }
6052
+
4959
6053
  .zx-toggle__root.zx-a-color-primary {
4960
6054
  --toggle-accent: var(--color-primary);
4961
6055
  --toggle-on-accent: var(--color-primary-content);
@@ -5250,6 +6344,10 @@
5250
6344
  cursor: not-allowed;
5251
6345
  }
5252
6346
 
6347
+ .zx-number-input__increment-trigger.zx-f-pressed {
6348
+ background: var(--color-base-300);
6349
+ }
6350
+
5253
6351
  .zx-number-input__decrement-trigger {
5254
6352
  appearance: none;
5255
6353
  border: none;
@@ -5272,6 +6370,10 @@
5272
6370
  cursor: not-allowed;
5273
6371
  }
5274
6372
 
6373
+ .zx-number-input__decrement-trigger.zx-f-pressed {
6374
+ background: var(--color-base-300);
6375
+ }
6376
+
5275
6377
  .zx-number-input__root.zx-a-color-primary {
5276
6378
  --number-input-accent: var(--color-primary);
5277
6379
  }
@@ -5491,7 +6593,7 @@
5491
6593
  }
5492
6594
 
5493
6595
  .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-primary {
5494
- --rating-fill: #848fff;
6596
+ --rating-fill: #8792ff;
5495
6597
  }
5496
6598
 
5497
6599
  .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-primary {
@@ -5507,11 +6609,11 @@
5507
6609
  }
5508
6610
 
5509
6611
  .zx-root .zx-rating-group__root.zx-a-color-secondary {
5510
- --rating-fill: #fb74b2;
6612
+ --rating-fill: #b23072;
5511
6613
  }
5512
6614
 
5513
6615
  .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-secondary {
5514
- --rating-fill: #fb74b2;
6616
+ --rating-fill: #b23072;
5515
6617
  }
5516
6618
 
5517
6619
  .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-secondary {
@@ -5746,6 +6848,10 @@
5746
6848
  transform: rotate(90deg);
5747
6849
  }
5748
6850
 
6851
+ .zx-tree-view__branch-indicator.zx-s-loading {
6852
+ transform: rotate(45deg);
6853
+ }
6854
+
5749
6855
  .zx-tree-view__branch-content {
5750
6856
  display: flex;
5751
6857
  flex-direction: column;
@@ -5850,6 +6956,7 @@
5850
6956
  .zx-input__control {
5851
6957
  display: flex;
5852
6958
  align-items: stretch;
6959
+ gap: var(--space-2xs);
5853
6960
  box-sizing: border-box;
5854
6961
  height: calc(var(--size-field) * 12);
5855
6962
  background: var(--color-base-100);
@@ -5886,10 +6993,139 @@
5886
6993
  padding: var(--space-sm) var(--space-md);
5887
6994
  }
5888
6995
 
5889
- .zx-input__input.zx-f-disabled {
6996
+ .zx-input__input.zx-f-disabled {
6997
+ cursor: not-allowed;
6998
+ }
6999
+
7000
+ .zx-input__adornment {
7001
+ display: flex;
7002
+ align-items: center;
7003
+ flex: none;
7004
+ font-size: var(--text-sm);
7005
+ line-height: var(--leading-none);
7006
+ }
7007
+
7008
+ .zx-root .zx-input__adornment {
7009
+ color: #18181bb3;
7010
+ }
7011
+
7012
+ .zx-root.zx-theme-dark .zx-input__adornment {
7013
+ color: #ecf9ffb3;
7014
+ }
7015
+
7016
+ .zx-root.zx-theme-dim .zx-input__adornment {
7017
+ color: #b2ccd6b3;
7018
+ }
7019
+
7020
+ .zx-root.zx-theme-nord .zx-input__adornment {
7021
+ color: #2e3440b3;
7022
+ }
7023
+
7024
+ .zx-root.zx-theme-sunset .zx-input__adornment {
7025
+ color: #9fb9d0b3;
7026
+ }
7027
+
7028
+ .zx-input__adornment.zx-p-start {
7029
+ order: -1;
7030
+ }
7031
+
7032
+ .zx-input__adornment.zx-p-end {
7033
+ order: 1;
7034
+ }
7035
+
7036
+ .zx-input__clear-trigger {
7037
+ appearance: none;
7038
+ border: none;
7039
+ background: transparent;
7040
+ border-radius: 9999px;
7041
+ align-self: center;
7042
+ flex: none;
7043
+ order: 1;
7044
+ padding: var(--space-2xs) var(--space-xs);
7045
+ font-size: var(--text-sm);
7046
+ font-weight: var(--weight-semibold);
7047
+ line-height: var(--leading-none);
7048
+ cursor: pointer;
7049
+ }
7050
+
7051
+ .zx-root .zx-input__clear-trigger {
7052
+ color: #18181bb3;
7053
+ }
7054
+
7055
+ .zx-root.zx-theme-dark .zx-input__clear-trigger {
7056
+ color: #ecf9ffb3;
7057
+ }
7058
+
7059
+ .zx-root.zx-theme-dim .zx-input__clear-trigger {
7060
+ color: #b2ccd6b3;
7061
+ }
7062
+
7063
+ .zx-root.zx-theme-nord .zx-input__clear-trigger {
7064
+ color: #2e3440b3;
7065
+ }
7066
+
7067
+ .zx-root.zx-theme-sunset .zx-input__clear-trigger {
7068
+ color: #9fb9d0b3;
7069
+ }
7070
+
7071
+ .zx-input__clear-trigger.zx-f-disabled {
7072
+ cursor: not-allowed;
7073
+ }
7074
+
7075
+ .zx-input__clear-trigger.zx-f-focus-visible {
7076
+ outline: 2px solid var(--color-base-content);
7077
+ outline-offset: 2px;
7078
+ }
7079
+
7080
+ .zx-input__visibility-trigger {
7081
+ appearance: none;
7082
+ border: none;
7083
+ background: transparent;
7084
+ border-radius: 9999px;
7085
+ align-self: center;
7086
+ flex: none;
7087
+ order: 1;
7088
+ padding: var(--space-2xs) var(--space-xs);
7089
+ font-size: var(--text-sm);
7090
+ font-weight: var(--weight-semibold);
7091
+ line-height: var(--leading-none);
7092
+ cursor: pointer;
7093
+ }
7094
+
7095
+ .zx-root .zx-input__visibility-trigger {
7096
+ color: #18181bb3;
7097
+ }
7098
+
7099
+ .zx-root.zx-theme-dark .zx-input__visibility-trigger {
7100
+ color: #ecf9ffb3;
7101
+ }
7102
+
7103
+ .zx-root.zx-theme-dim .zx-input__visibility-trigger {
7104
+ color: #b2ccd6b3;
7105
+ }
7106
+
7107
+ .zx-root.zx-theme-nord .zx-input__visibility-trigger {
7108
+ color: #2e3440b3;
7109
+ }
7110
+
7111
+ .zx-root.zx-theme-sunset .zx-input__visibility-trigger {
7112
+ color: #9fb9d0b3;
7113
+ }
7114
+
7115
+ .zx-input__visibility-trigger.zx-s-on {
7116
+ color: var(--color-base-content);
7117
+ background: var(--color-base-200);
7118
+ }
7119
+
7120
+ .zx-input__visibility-trigger.zx-f-disabled {
5890
7121
  cursor: not-allowed;
5891
7122
  }
5892
7123
 
7124
+ .zx-input__visibility-trigger.zx-f-focus-visible {
7125
+ outline: 2px solid var(--color-base-content);
7126
+ outline-offset: 2px;
7127
+ }
7128
+
5893
7129
  .zx-input__root.zx-a-color-primary {
5894
7130
  --input-accent: var(--color-primary);
5895
7131
  }
@@ -5931,6 +7167,18 @@
5931
7167
  padding: var(--space-2xs) var(--space-xs);
5932
7168
  }
5933
7169
 
7170
+ .zx-input__adornment.zx-a-size-xs {
7171
+ font-size: var(--text-xs);
7172
+ }
7173
+
7174
+ .zx-input__clear-trigger.zx-a-size-xs {
7175
+ font-size: var(--text-xs);
7176
+ }
7177
+
7178
+ .zx-input__visibility-trigger.zx-a-size-xs {
7179
+ font-size: var(--text-xs);
7180
+ }
7181
+
5934
7182
  .zx-input__control.zx-a-size-sm {
5935
7183
  height: calc(var(--size-field) * 10);
5936
7184
  }
@@ -5940,6 +7188,18 @@
5940
7188
  padding: var(--space-xs) var(--space-sm);
5941
7189
  }
5942
7190
 
7191
+ .zx-input__adornment.zx-a-size-sm {
7192
+ font-size: var(--text-xs);
7193
+ }
7194
+
7195
+ .zx-input__clear-trigger.zx-a-size-sm {
7196
+ font-size: var(--text-xs);
7197
+ }
7198
+
7199
+ .zx-input__visibility-trigger.zx-a-size-sm {
7200
+ font-size: var(--text-xs);
7201
+ }
7202
+
5943
7203
  .zx-input__control.zx-a-size-lg {
5944
7204
  height: calc(var(--size-field) * 14);
5945
7205
  }
@@ -5949,6 +7209,18 @@
5949
7209
  padding: var(--space-md) var(--space-lg);
5950
7210
  }
5951
7211
 
7212
+ .zx-input__adornment.zx-a-size-lg {
7213
+ font-size: var(--text-md);
7214
+ }
7215
+
7216
+ .zx-input__clear-trigger.zx-a-size-lg {
7217
+ font-size: var(--text-md);
7218
+ }
7219
+
7220
+ .zx-input__visibility-trigger.zx-a-size-lg {
7221
+ font-size: var(--text-md);
7222
+ }
7223
+
5952
7224
  .zx-input__control.zx-a-size-xl {
5953
7225
  height: calc(var(--size-field) * 16);
5954
7226
  }
@@ -5958,6 +7230,18 @@
5958
7230
  padding: var(--space-lg) var(--space-xl);
5959
7231
  }
5960
7232
 
7233
+ .zx-input__adornment.zx-a-size-xl {
7234
+ font-size: var(--text-lg);
7235
+ }
7236
+
7237
+ .zx-input__clear-trigger.zx-a-size-xl {
7238
+ font-size: var(--text-lg);
7239
+ }
7240
+
7241
+ .zx-input__visibility-trigger.zx-a-size-xl {
7242
+ font-size: var(--text-lg);
7243
+ }
7244
+
5961
7245
  .zx-textarea__root {
5962
7246
  --textarea-accent: var(--color-base-content);
5963
7247
  }
@@ -6264,6 +7548,26 @@
6264
7548
  outline-offset: 2px;
6265
7549
  }
6266
7550
 
7551
+ .zx-root .zx-alert__close.zx-f-pressed {
7552
+ background: #18181b2e;
7553
+ }
7554
+
7555
+ .zx-root.zx-theme-dark .zx-alert__close.zx-f-pressed {
7556
+ background: #ecf9ff2e;
7557
+ }
7558
+
7559
+ .zx-root.zx-theme-dim .zx-alert__close.zx-f-pressed {
7560
+ background: #b2ccd62e;
7561
+ }
7562
+
7563
+ .zx-root.zx-theme-nord .zx-alert__close.zx-f-pressed {
7564
+ background: #2e34402e;
7565
+ }
7566
+
7567
+ .zx-root.zx-theme-sunset .zx-alert__close.zx-f-pressed {
7568
+ background: #9fb9d02e;
7569
+ }
7570
+
6267
7571
  .zx-alert__root.zx-a-color-primary {
6268
7572
  --alert-tint: var(--color-primary-soft);
6269
7573
  }
@@ -7554,6 +8858,7 @@
7554
8858
 
7555
8859
  .zx-stats__root {
7556
8860
  display: flex;
8861
+ overflow-x: auto;
7557
8862
  border: var(--border) solid var(--color-base-200);
7558
8863
  border-radius: var(--radius-box);
7559
8864
  background: var(--color-base-100);
@@ -7599,6 +8904,7 @@
7599
8904
 
7600
8905
  .zx-stats__value {
7601
8906
  grid-column: 1;
8907
+ white-space: nowrap;
7602
8908
  font-size: var(--text-2xl);
7603
8909
  font-weight: var(--weight-bold);
7604
8910
  font-variant-numeric: tabular-nums;
@@ -7636,36 +8942,164 @@
7636
8942
  align-self: center;
7637
8943
  }
7638
8944
 
7639
- .zx-stats__root.zx-a-color-primary {
7640
- --stats-accent: var(--color-primary);
8945
+ .zx-root .zx-stats__item.zx-a-color-primary {
8946
+ --stats-accent: #3f2bcb;
8947
+ }
8948
+
8949
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-primary {
8950
+ --stats-accent: #6567ff;
8951
+ }
8952
+
8953
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-primary {
8954
+ --stats-accent: #a0e791;
8955
+ }
8956
+
8957
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-primary {
8958
+ --stats-accent: #5c7da6;
8959
+ }
8960
+
8961
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-primary {
8962
+ --stats-accent: #fb8a62;
8963
+ }
8964
+
8965
+ .zx-root .zx-stats__item.zx-a-color-secondary {
8966
+ --stats-accent: #ad316f;
8967
+ }
8968
+
8969
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-secondary {
8970
+ --stats-accent: #fa7cb6;
8971
+ }
8972
+
8973
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-secondary {
8974
+ --stats-accent: #ed9984;
8975
+ }
8976
+
8977
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-secondary {
8978
+ --stats-accent: #677e98;
8979
+ }
8980
+
8981
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-secondary {
8982
+ --stats-accent: #e68aac;
8983
+ }
8984
+
8985
+ .zx-root .zx-stats__item.zx-a-color-accent {
8986
+ --stats-accent: #2b786d;
8987
+ }
8988
+
8989
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-accent {
8990
+ --stats-accent: #93e5d9;
8991
+ }
8992
+
8993
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-accent {
8994
+ --stats-accent: #bfade1;
8995
+ }
8996
+
8997
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-accent {
8998
+ --stats-accent: #5e7d8c;
8999
+ }
9000
+
9001
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-accent {
9002
+ --stats-accent: #ab9fe8;
9003
+ }
9004
+
9005
+ .zx-root .zx-stats__item.zx-a-color-neutral {
9006
+ --stats-accent: #121214;
9007
+ }
9008
+
9009
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-neutral {
9010
+ --stats-accent: #878e92;
9011
+ }
9012
+
9013
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-neutral {
9014
+ --stats-accent: #71828c;
9015
+ }
9016
+
9017
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-neutral {
9018
+ --stats-accent: #3a4150;
9019
+ }
9020
+
9021
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-neutral {
9022
+ --stats-accent: #667a8a;
9023
+ }
9024
+
9025
+ .zx-root .zx-stats__item.zx-a-color-info {
9026
+ --stats-accent: #2685b3;
9027
+ }
9028
+
9029
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-info {
9030
+ --stats-accent: #70ceff;
9031
+ }
9032
+
9033
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-info {
9034
+ --stats-accent: #6ce2f3;
9035
+ }
9036
+
9037
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-info {
9038
+ --stats-accent: #89728a;
9039
+ }
9040
+
9041
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-info {
9042
+ --stats-accent: #91d4e3;
9043
+ }
9044
+
9045
+ .zx-root .zx-stats__item.zx-a-color-success {
9046
+ --stats-accent: #2a7858;
9047
+ }
9048
+
9049
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-success {
9050
+ --stats-accent: #92e5c2;
9051
+ }
9052
+
9053
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-success {
9054
+ --stats-accent: #8ee0c9;
9055
+ }
9056
+
9057
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-success {
9058
+ --stats-accent: #6b7d6a;
9059
+ }
9060
+
9061
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-success {
9062
+ --stats-accent: #a6cebe;
9063
+ }
9064
+
9065
+ .zx-root .zx-stats__item.zx-a-color-warning {
9066
+ --stats-accent: #755a2b;
9067
+ }
9068
+
9069
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-warning {
9070
+ --stats-accent: #f5ddac;
9071
+ }
9072
+
9073
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-warning {
9074
+ --stats-accent: #cecfa6;
7641
9075
  }
7642
9076
 
7643
- .zx-stats__root.zx-a-color-secondary {
7644
- --stats-accent: var(--color-secondary);
9077
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-warning {
9078
+ --stats-accent: #7d7463;
7645
9079
  }
7646
9080
 
7647
- .zx-stats__root.zx-a-color-accent {
7648
- --stats-accent: var(--color-accent);
9081
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-warning {
9082
+ --stats-accent: #c5c1b7;
7649
9083
  }
7650
9084
 
7651
- .zx-stats__root.zx-a-color-neutral {
7652
- --stats-accent: var(--color-neutral);
9085
+ .zx-root .zx-stats__item.zx-a-color-error {
9086
+ --stats-accent: #d9576d;
7653
9087
  }
7654
9088
 
7655
- .zx-stats__root.zx-a-color-info {
7656
- --stats-accent: var(--color-info);
9089
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-error {
9090
+ --stats-accent: #ff7d90;
7657
9091
  }
7658
9092
 
7659
- .zx-stats__root.zx-a-color-success {
7660
- --stats-accent: var(--color-success);
9093
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-error {
9094
+ --stats-accent: #f5b3a4;
7661
9095
  }
7662
9096
 
7663
- .zx-stats__root.zx-a-color-warning {
7664
- --stats-accent: var(--color-warning);
9097
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-error {
9098
+ --stats-accent: #a85b64;
7665
9099
  }
7666
9100
 
7667
- .zx-stats__root.zx-a-color-error {
7668
- --stats-accent: var(--color-error);
9101
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-error {
9102
+ --stats-accent: #f2bbc0;
7669
9103
  }
7670
9104
 
7671
9105
  .zx-stats__value.zx-a-size-xs {
@@ -7699,11 +9133,15 @@
7699
9133
 
7700
9134
  .zx-timeline__root.zx-o-horizontal {
7701
9135
  flex-direction: row;
9136
+ overflow-x: auto;
7702
9137
  }
7703
9138
 
7704
9139
  .zx-timeline__item {
7705
- display: grid;
9140
+ display: flex;
7706
9141
  position: relative;
9142
+ flex-direction: row;
9143
+ flex-wrap: wrap;
9144
+ align-items: center;
7707
9145
  }
7708
9146
 
7709
9147
  .zx-timeline__item.zx-o-vertical {
@@ -7728,30 +9166,42 @@
7728
9166
  align-items: center;
7729
9167
  justify-content: center;
7730
9168
  font-size: 0;
9169
+ width: calc(var(--size-selector) * 3);
9170
+ height: calc(var(--size-selector) * 3);
9171
+ flex-grow: 0;
9172
+ flex-shrink: 0;
7731
9173
  }
7732
9174
 
7733
9175
  .zx-timeline__marker.zx-a-size-xs {
7734
9176
  inline-size: calc(var(--size-selector) * 2);
7735
9177
  block-size: calc(var(--size-selector) * 2);
7736
9178
  border: calc((var(--size-selector) * 2) / 6) solid var(--timeline-ring);
9179
+ width: calc(var(--size-selector) * 2);
9180
+ height: calc(var(--size-selector) * 2);
7737
9181
  }
7738
9182
 
7739
9183
  .zx-timeline__marker.zx-a-size-sm {
7740
9184
  inline-size: calc(var(--size-selector) * 2.5);
7741
9185
  block-size: calc(var(--size-selector) * 2.5);
7742
9186
  border: calc((var(--size-selector) * 2.5) / 6) solid var(--timeline-ring);
9187
+ width: calc(var(--size-selector) * 2.5);
9188
+ height: calc(var(--size-selector) * 2.5);
7743
9189
  }
7744
9190
 
7745
9191
  .zx-timeline__marker.zx-a-size-lg {
7746
9192
  inline-size: calc(var(--size-selector) * 3.5);
7747
9193
  block-size: calc(var(--size-selector) * 3.5);
7748
9194
  border: calc((var(--size-selector) * 3.5) / 6) solid var(--timeline-ring);
9195
+ width: calc(var(--size-selector) * 3.5);
9196
+ height: calc(var(--size-selector) * 3.5);
7749
9197
  }
7750
9198
 
7751
9199
  .zx-timeline__marker.zx-a-size-xl {
7752
9200
  inline-size: calc(var(--size-selector) * 4);
7753
9201
  block-size: calc(var(--size-selector) * 4);
7754
9202
  border: calc((var(--size-selector) * 4) / 6) solid var(--timeline-ring);
9203
+ width: calc(var(--size-selector) * 4);
9204
+ height: calc(var(--size-selector) * 4);
7755
9205
  }
7756
9206
 
7757
9207
  .zx-timeline__connector {
@@ -7765,6 +9215,31 @@
7765
9215
  inline-size: var(--border);
7766
9216
  min-block-size: var(--space-lg);
7767
9217
  block-size: 100%;
9218
+ flex-grow: 0;
9219
+ flex-shrink: 1;
9220
+ flex-basis: 100%;
9221
+ height: var(--space-lg);
9222
+ background: transparent;
9223
+ border-left-width: var(--border);
9224
+ border-left-style: solid;
9225
+ border-left-color: var(--color-base-300);
9226
+ margin-left: calc((var(--size-selector) * 3) / 2 - var(--border) / 2);
9227
+ }
9228
+
9229
+ .zx-timeline__connector.zx-o-vertical.zx-a-size-xs {
9230
+ margin-left: calc((var(--size-selector) * 2) / 2 - var(--border) / 2);
9231
+ }
9232
+
9233
+ .zx-timeline__connector.zx-o-vertical.zx-a-size-sm {
9234
+ margin-left: calc((var(--size-selector) * 2.5) / 2 - var(--border) / 2);
9235
+ }
9236
+
9237
+ .zx-timeline__connector.zx-o-vertical.zx-a-size-lg {
9238
+ margin-left: calc((var(--size-selector) * 3.5) / 2 - var(--border) / 2);
9239
+ }
9240
+
9241
+ .zx-timeline__connector.zx-o-vertical.zx-a-size-xl {
9242
+ margin-left: calc((var(--size-selector) * 4) / 2 - var(--border) / 2);
7768
9243
  }
7769
9244
 
7770
9245
  .zx-timeline__connector.zx-o-horizontal {
@@ -7774,6 +9249,12 @@
7774
9249
  block-size: var(--border);
7775
9250
  min-inline-size: var(--space-lg);
7776
9251
  inline-size: 100%;
9252
+ order: 1;
9253
+ flex-grow: 1;
9254
+ flex-shrink: 1;
9255
+ flex-basis: 0;
9256
+ height: var(--border);
9257
+ min-width: var(--space-lg);
7777
9258
  }
7778
9259
 
7779
9260
  .zx-timeline__content {
@@ -7786,6 +9267,42 @@
7786
9267
  color: var(--color-base-content);
7787
9268
  }
7788
9269
 
9270
+ .zx-timeline__content.zx-o-vertical.zx-p-start {
9271
+ grid-column: 1;
9272
+ grid-row: 1;
9273
+ justify-self: end;
9274
+ text-align: end;
9275
+ order: -1;
9276
+ flex-grow: 1;
9277
+ flex-shrink: 1;
9278
+ flex-basis: 0;
9279
+ }
9280
+
9281
+ .zx-timeline__content.zx-o-vertical.zx-p-end {
9282
+ grid-column: 3;
9283
+ grid-row: 1;
9284
+ justify-self: start;
9285
+ flex-grow: 1;
9286
+ flex-shrink: 1;
9287
+ flex-basis: 0;
9288
+ }
9289
+
9290
+ .zx-timeline__content.zx-o-horizontal.zx-p-start {
9291
+ grid-row: 1;
9292
+ grid-column: 1;
9293
+ align-self: end;
9294
+ order: -1;
9295
+ flex-basis: 100%;
9296
+ }
9297
+
9298
+ .zx-timeline__content.zx-o-horizontal.zx-p-end {
9299
+ grid-row: 3;
9300
+ grid-column: 1;
9301
+ align-self: start;
9302
+ order: 2;
9303
+ flex-basis: 100%;
9304
+ }
9305
+
7789
9306
  .zx-timeline__marker.zx-a-color-primary {
7790
9307
  --timeline-accent: var(--color-primary);
7791
9308
  --timeline-ring: var(--color-primary-content);
@@ -8831,12 +10348,16 @@
8831
10348
  --pg-accent: var(--color-primary);
8832
10349
  --pg-accent-content: var(--color-primary-content);
8833
10350
  --pg-font: var(--text-sm);
10351
+ --pg-ring-room: 4px;
8834
10352
  }
8835
10353
 
8836
10354
  .zx-pagination__root {
8837
10355
  display: flex;
8838
10356
  align-items: center;
8839
10357
  gap: var(--space-2xs);
10358
+ overflow-x: auto;
10359
+ padding: var(--pg-ring-room);
10360
+ scroll-padding-inline: var(--pg-ring-room);
8840
10361
  }
8841
10362
 
8842
10363
  .zx-pagination__item {
@@ -8894,6 +10415,10 @@
8894
10415
  outline-offset: 2px;
8895
10416
  }
8896
10417
 
10418
+ .zx-pagination__item.zx-f-pressed {
10419
+ transform: translateY(1px);
10420
+ }
10421
+
8897
10422
  .zx-pagination__ellipsis {
8898
10423
  display: flex;
8899
10424
  align-items: center;
@@ -8991,6 +10516,10 @@
8991
10516
  outline-offset: 2px;
8992
10517
  }
8993
10518
 
10519
+ .zx-pagination__prev-trigger.zx-f-pressed {
10520
+ transform: translateY(1px);
10521
+ }
10522
+
8994
10523
  .zx-pagination__next-trigger {
8995
10524
  display: flex;
8996
10525
  align-items: center;
@@ -9038,6 +10567,10 @@
9038
10567
  outline-offset: 2px;
9039
10568
  }
9040
10569
 
10570
+ .zx-pagination__next-trigger.zx-f-pressed {
10571
+ transform: translateY(1px);
10572
+ }
10573
+
9041
10574
  .zx-pagination__root.zx-a-color-primary {
9042
10575
  --pg-accent: var(--color-primary);
9043
10576
  --pg-accent-content: var(--color-primary-content);
@@ -9188,6 +10721,10 @@
9188
10721
  padding-bottom: var(--space-lg);
9189
10722
  }
9190
10723
 
10724
+ .zx-steps__item.zx-f-pressed {
10725
+ transform: translateY(1px);
10726
+ }
10727
+
9191
10728
  .zx-steps__indicator {
9192
10729
  display: flex;
9193
10730
  align-items: center;
@@ -9648,6 +11185,10 @@
9648
11185
  border-radius: 0;
9649
11186
  }
9650
11187
 
11188
+ .zx-drawer__panel.zx-l-dock-sheet.zx-s-open {
11189
+ transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
11190
+ }
11191
+
9651
11192
  .zx-drawer__backdrop {
9652
11193
  background: #00000066;
9653
11194
  }
@@ -9817,6 +11358,11 @@
9817
11358
  background: var(--color-base-100);
9818
11359
  }
9819
11360
 
11361
+ .zx-table__root.zx-f-focus-visible {
11362
+ outline: 2px solid var(--color-base-content);
11363
+ outline-offset: -2px;
11364
+ }
11365
+
9820
11366
  .zx-table__table {
9821
11367
  border-collapse: collapse;
9822
11368
  inline-size: 100%;
@@ -9922,6 +11468,58 @@
9922
11468
  padding: var(--space-lg) var(--table-pad-inline);
9923
11469
  }
9924
11470
 
11471
+ .zx-table__sort-trigger {
11472
+ appearance: none;
11473
+ display: flex;
11474
+ align-items: center;
11475
+ margin: 0;
11476
+ border: 0;
11477
+ font: inherit;
11478
+ letter-spacing: inherit;
11479
+ text-transform: inherit;
11480
+ text-align: inherit;
11481
+ cursor: pointer;
11482
+ gap: var(--space-2xs);
11483
+ padding: 0;
11484
+ border-radius: var(--radius-selector);
11485
+ background: transparent;
11486
+ color: inherit;
11487
+ transition: color var(--duration-fast) var(--ease-standard);
11488
+ }
11489
+
11490
+ .zx-table__sort-trigger.zx-s-ascending {
11491
+ color: var(--table-accent);
11492
+ }
11493
+
11494
+ .zx-table__sort-trigger.zx-s-descending {
11495
+ color: var(--table-accent);
11496
+ }
11497
+
11498
+ .zx-table__sort-trigger.zx-f-disabled {
11499
+ cursor: not-allowed;
11500
+ opacity: var(--disabled-opacity);
11501
+ }
11502
+
11503
+ .zx-table__sort-trigger.zx-f-focus-visible {
11504
+ outline: 2px solid var(--color-base-content);
11505
+ outline-offset: 2px;
11506
+ }
11507
+
11508
+ .zx-table__sort-indicator {
11509
+ display: inline-block;
11510
+ font-size: 0.75em;
11511
+ line-height: 1;
11512
+ transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
11513
+ }
11514
+
11515
+ .zx-table__sort-indicator.zx-s-descending {
11516
+ transform: rotate(180deg);
11517
+ }
11518
+
11519
+ .zx-table__sort-indicator.zx-s-none {
11520
+ opacity: 0;
11521
+ }
11522
+
9925
11523
  .zx-table__cell {
9926
11524
  padding: var(--space-sm) var(--table-pad-inline);
9927
11525
  text-align: var(--table-cell-align);
@@ -10258,6 +11856,30 @@
10258
11856
  opacity: var(--disabled-opacity);
10259
11857
  }
10260
11858
 
11859
+ .zx-file-upload__item.zx-f-invalid {
11860
+ border-color: var(--color-error);
11861
+ }
11862
+
11863
+ .zx-root .zx-file-upload__item.zx-f-invalid {
11864
+ background: #fff3f4;
11865
+ }
11866
+
11867
+ .zx-root.zx-theme-dark .zx-file-upload__item.zx-f-invalid {
11868
+ background: #2e2930;
11869
+ }
11870
+
11871
+ .zx-root.zx-theme-dim .zx-file-upload__item.zx-f-invalid {
11872
+ background: #393943;
11873
+ }
11874
+
11875
+ .zx-root.zx-theme-nord .zx-file-upload__item.zx-f-invalid {
11876
+ background: #eae4e8;
11877
+ }
11878
+
11879
+ .zx-root.zx-theme-sunset .zx-file-upload__item.zx-f-invalid {
11880
+ background: #22272d;
11881
+ }
11882
+
10261
11883
  .zx-file-upload__item-name {
10262
11884
  flex: 1 1 auto;
10263
11885
  min-width: 0;
@@ -10313,6 +11935,29 @@
10313
11935
  outline-offset: 2px;
10314
11936
  }
10315
11937
 
11938
+ .zx-file-upload__clear-trigger {
11939
+ appearance: none;
11940
+ border: none;
11941
+ background: transparent;
11942
+ color: inherit;
11943
+ border-radius: 9999px;
11944
+ padding: var(--space-2xs) var(--space-sm);
11945
+ font-size: var(--fu-font);
11946
+ font-weight: var(--weight-semibold);
11947
+ line-height: var(--leading-none);
11948
+ cursor: pointer;
11949
+ }
11950
+
11951
+ .zx-file-upload__clear-trigger.zx-f-disabled {
11952
+ opacity: var(--disabled-opacity);
11953
+ cursor: not-allowed;
11954
+ }
11955
+
11956
+ .zx-file-upload__clear-trigger.zx-f-focus-visible {
11957
+ outline: 2px solid var(--color-base-content);
11958
+ outline-offset: 2px;
11959
+ }
11960
+
10316
11961
  .zx-root .zx-file-upload__root.zx-a-color-primary {
10317
11962
  --fu-accent: #3f2bcb;
10318
11963
  }
@@ -11247,6 +12892,11 @@
11247
12892
  outline-offset: 2px;
11248
12893
  }
11249
12894
 
12895
+ .zx-diff__handle.zx-f-disabled {
12896
+ opacity: var(--disabled-opacity);
12897
+ cursor: not-allowed;
12898
+ }
12899
+
11250
12900
  .zx-root .zx-diff__handle.zx-f-pressed {
11251
12901
  --diff-accent: #353538;
11252
12902
  }