@sigx/zero-daisyui 0.6.0 → 0.8.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 (56) hide show
  1. package/README.md +1 -2
  2. package/dist/audit.json +5618 -72
  3. package/dist/components.d.ts +37 -1
  4. package/dist/components.js +4 -0
  5. package/dist/css/components/breadcrumbs.css +30 -0
  6. package/dist/css/components/card.css +26 -0
  7. package/dist/css/components/chat-log.css +172 -0
  8. package/dist/css/components/divider.css +68 -3
  9. package/dist/css/components/fieldset.css +91 -0
  10. package/dist/css/components/hover-card.css +174 -0
  11. package/dist/css/components/menu.css +73 -0
  12. package/dist/css/components/menubar.css +75 -0
  13. package/dist/css/components/pagination.css +83 -0
  14. package/dist/css/components/popover.css +72 -0
  15. package/dist/css/components/progress.css +0 -4
  16. package/dist/css/components/steps.css +103 -0
  17. package/dist/css/components/table.css +70 -0
  18. package/dist/css/components/timeline.css +14 -0
  19. package/dist/css/components/toast.css +65 -0
  20. package/dist/css/components/tooltip.css +65 -0
  21. package/dist/css/components/tree-view.css +118 -0
  22. package/dist/css/index.css +1330 -42
  23. package/dist/lynx/components/accordion.css +7 -1
  24. package/dist/lynx/components/breadcrumbs.css +44 -0
  25. package/dist/lynx/components/button.css +121 -10
  26. package/dist/lynx/components/card.css +9 -0
  27. package/dist/lynx/components/chat-log.css +147 -0
  28. package/dist/lynx/components/dialog.css +28 -3
  29. package/dist/lynx/components/divider.css +8 -17
  30. package/dist/lynx/components/fieldset.css +219 -0
  31. package/dist/lynx/components/hover-card.css +211 -0
  32. package/dist/lynx/components/menu.css +7 -0
  33. package/dist/lynx/components/menubar.css +199 -0
  34. package/dist/lynx/components/pagination.css +107 -0
  35. package/dist/lynx/components/popover.css +44 -2
  36. package/dist/lynx/components/progress.css +0 -20
  37. package/dist/lynx/components/select.css +51 -3
  38. package/dist/lynx/components/slider.css +295 -12
  39. package/dist/lynx/components/steps.css +103 -0
  40. package/dist/lynx/components/switch.css +4 -1
  41. package/dist/lynx/components/table.css +52 -0
  42. package/dist/lynx/components/tabs.css +109 -94
  43. package/dist/lynx/components/timeline.css +90 -1
  44. package/dist/lynx/components/toast.css +111 -8
  45. package/dist/lynx/components/tree-view.css +28 -0
  46. package/dist/lynx/index.css +2081 -255
  47. package/dist/lynx/manifest.json +112 -4
  48. package/dist/manifest.json +110 -2
  49. package/dist/recipes.d.ts +29 -1
  50. package/dist/recipes.d.ts.map +1 -1
  51. package/dist/recipes.js +1225 -129
  52. package/dist/recipes.js.map +1 -1
  53. package/dist/register.d.ts +36 -0
  54. package/dist/report.json +1353 -188
  55. package/package.json +4 -4
  56. package/src/recipes.ts +1254 -130
@@ -651,6 +651,7 @@
651
651
  overflow-x: auto;
652
652
  padding: var(--tabs-ring-room);
653
653
  scroll-padding-inline: var(--tabs-ring-room);
654
+ position: relative;
654
655
  }
655
656
 
656
657
  .zx-tabs__tab {
@@ -665,7 +666,6 @@
665
666
  cursor: pointer;
666
667
  position: relative;
667
668
  transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
668
- --tab-active-ink: var(--color-base-content);
669
669
  }
670
670
 
671
671
  .zx-root .zx-tabs__tab {
@@ -698,12 +698,18 @@
698
698
  }
699
699
 
700
700
  .zx-tabs__tab.zx-f-focus-visible {
701
- outline: 2px solid var(--color-base-content);
701
+ outline: none;
702
702
  outline-offset: 2px;
703
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
704
+ }
705
+
706
+ .zx-tabs__tab.zx-f-pressed {
707
+ color: var(--color-base-content);
703
708
  }
704
709
 
705
710
  .zx-tabs__indicator {
706
711
  display: none;
712
+ --tab-active-ink: var(--color-base-content);
707
713
  }
708
714
 
709
715
  .zx-tabs__panel {
@@ -734,26 +740,6 @@
734
740
  --tab-px: var(--space-2xl);
735
741
  }
736
742
 
737
- .zx-root .zx-tabs__tab.zx-a-color-primary {
738
- --tab-active-ink: #3f2bcb;
739
- }
740
-
741
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-primary {
742
- --tab-active-ink: #6567ff;
743
- }
744
-
745
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-primary {
746
- --tab-active-ink: #a0e791;
747
- }
748
-
749
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-primary {
750
- --tab-active-ink: #5c7da6;
751
- }
752
-
753
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-primary {
754
- --tab-active-ink: #fb8a62;
755
- }
756
-
757
743
  .zx-root .zx-tabs__tab.zx-a-color-primary.zx-s-active {
758
744
  color: #3f2bcb;
759
745
  }
@@ -774,24 +760,24 @@
774
760
  color: #fb8a62;
775
761
  }
776
762
 
777
- .zx-root .zx-tabs__tab.zx-a-color-secondary {
778
- --tab-active-ink: #ad316f;
763
+ .zx-root .zx-tabs__indicator.zx-a-color-primary {
764
+ --tab-active-ink: #3f2bcb;
779
765
  }
780
766
 
781
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-secondary {
782
- --tab-active-ink: #fa7cb6;
767
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-primary {
768
+ --tab-active-ink: #6567ff;
783
769
  }
784
770
 
785
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-secondary {
786
- --tab-active-ink: #ed9984;
771
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-primary {
772
+ --tab-active-ink: #a0e791;
787
773
  }
788
774
 
789
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-secondary {
790
- --tab-active-ink: #677e98;
775
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-primary {
776
+ --tab-active-ink: #5c7da6;
791
777
  }
792
778
 
793
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-secondary {
794
- --tab-active-ink: #e68aac;
779
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-primary {
780
+ --tab-active-ink: #fb8a62;
795
781
  }
796
782
 
797
783
  .zx-root .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
@@ -814,24 +800,24 @@
814
800
  color: #e68aac;
815
801
  }
816
802
 
817
- .zx-root .zx-tabs__tab.zx-a-color-accent {
818
- --tab-active-ink: #2b786d;
803
+ .zx-root .zx-tabs__indicator.zx-a-color-secondary {
804
+ --tab-active-ink: #ad316f;
819
805
  }
820
806
 
821
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-accent {
822
- --tab-active-ink: #93e5d9;
807
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-secondary {
808
+ --tab-active-ink: #fa7cb6;
823
809
  }
824
810
 
825
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-accent {
826
- --tab-active-ink: #bfade1;
811
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-secondary {
812
+ --tab-active-ink: #ed9984;
827
813
  }
828
814
 
829
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-accent {
830
- --tab-active-ink: #5e7d8c;
815
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-secondary {
816
+ --tab-active-ink: #677e98;
831
817
  }
832
818
 
833
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-accent {
834
- --tab-active-ink: #ab9fe8;
819
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-secondary {
820
+ --tab-active-ink: #e68aac;
835
821
  }
836
822
 
837
823
  .zx-root .zx-tabs__tab.zx-a-color-accent.zx-s-active {
@@ -854,24 +840,24 @@
854
840
  color: #ab9fe8;
855
841
  }
856
842
 
857
- .zx-root .zx-tabs__tab.zx-a-color-neutral {
858
- --tab-active-ink: #121214;
843
+ .zx-root .zx-tabs__indicator.zx-a-color-accent {
844
+ --tab-active-ink: #2b786d;
859
845
  }
860
846
 
861
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-neutral {
862
- --tab-active-ink: #878e92;
847
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-accent {
848
+ --tab-active-ink: #93e5d9;
863
849
  }
864
850
 
865
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-neutral {
866
- --tab-active-ink: #71828c;
851
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-accent {
852
+ --tab-active-ink: #bfade1;
867
853
  }
868
854
 
869
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-neutral {
870
- --tab-active-ink: #3a4150;
855
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-accent {
856
+ --tab-active-ink: #5e7d8c;
871
857
  }
872
858
 
873
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-neutral {
874
- --tab-active-ink: #667a8a;
859
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-accent {
860
+ --tab-active-ink: #ab9fe8;
875
861
  }
876
862
 
877
863
  .zx-root .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
@@ -894,24 +880,24 @@
894
880
  color: #667a8a;
895
881
  }
896
882
 
897
- .zx-root .zx-tabs__tab.zx-a-color-info {
898
- --tab-active-ink: #2685b3;
883
+ .zx-root .zx-tabs__indicator.zx-a-color-neutral {
884
+ --tab-active-ink: #121214;
899
885
  }
900
886
 
901
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-info {
902
- --tab-active-ink: #70ceff;
887
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-neutral {
888
+ --tab-active-ink: #878e92;
903
889
  }
904
890
 
905
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-info {
906
- --tab-active-ink: #6ce2f3;
891
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-neutral {
892
+ --tab-active-ink: #71828c;
907
893
  }
908
894
 
909
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-info {
910
- --tab-active-ink: #89728a;
895
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-neutral {
896
+ --tab-active-ink: #3a4150;
911
897
  }
912
898
 
913
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-info {
914
- --tab-active-ink: #91d4e3;
899
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-neutral {
900
+ --tab-active-ink: #667a8a;
915
901
  }
916
902
 
917
903
  .zx-root .zx-tabs__tab.zx-a-color-info.zx-s-active {
@@ -934,24 +920,24 @@
934
920
  color: #91d4e3;
935
921
  }
936
922
 
937
- .zx-root .zx-tabs__tab.zx-a-color-success {
938
- --tab-active-ink: #2a7858;
923
+ .zx-root .zx-tabs__indicator.zx-a-color-info {
924
+ --tab-active-ink: #2685b3;
939
925
  }
940
926
 
941
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-success {
942
- --tab-active-ink: #92e5c2;
927
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-info {
928
+ --tab-active-ink: #70ceff;
943
929
  }
944
930
 
945
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-success {
946
- --tab-active-ink: #8ee0c9;
931
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-info {
932
+ --tab-active-ink: #6ce2f3;
947
933
  }
948
934
 
949
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-success {
950
- --tab-active-ink: #6b7d6a;
935
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-info {
936
+ --tab-active-ink: #89728a;
951
937
  }
952
938
 
953
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-success {
954
- --tab-active-ink: #a6cebe;
939
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-info {
940
+ --tab-active-ink: #91d4e3;
955
941
  }
956
942
 
957
943
  .zx-root .zx-tabs__tab.zx-a-color-success.zx-s-active {
@@ -974,24 +960,24 @@
974
960
  color: #a6cebe;
975
961
  }
976
962
 
977
- .zx-root .zx-tabs__tab.zx-a-color-warning {
978
- --tab-active-ink: #755a2b;
963
+ .zx-root .zx-tabs__indicator.zx-a-color-success {
964
+ --tab-active-ink: #2a7858;
979
965
  }
980
966
 
981
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-warning {
982
- --tab-active-ink: #f5ddac;
967
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-success {
968
+ --tab-active-ink: #92e5c2;
983
969
  }
984
970
 
985
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-warning {
986
- --tab-active-ink: #cecfa6;
971
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-success {
972
+ --tab-active-ink: #8ee0c9;
987
973
  }
988
974
 
989
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-warning {
990
- --tab-active-ink: #7d7463;
975
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-success {
976
+ --tab-active-ink: #6b7d6a;
991
977
  }
992
978
 
993
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-warning {
994
- --tab-active-ink: #c5c1b7;
979
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-success {
980
+ --tab-active-ink: #a6cebe;
995
981
  }
996
982
 
997
983
  .zx-root .zx-tabs__tab.zx-a-color-warning.zx-s-active {
@@ -1014,24 +1000,24 @@
1014
1000
  color: #c5c1b7;
1015
1001
  }
1016
1002
 
1017
- .zx-root .zx-tabs__tab.zx-a-color-error {
1018
- --tab-active-ink: #d9576d;
1003
+ .zx-root .zx-tabs__indicator.zx-a-color-warning {
1004
+ --tab-active-ink: #755a2b;
1019
1005
  }
1020
1006
 
1021
- .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-error {
1022
- --tab-active-ink: #ff7d90;
1007
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-warning {
1008
+ --tab-active-ink: #f5ddac;
1023
1009
  }
1024
1010
 
1025
- .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-error {
1026
- --tab-active-ink: #f5b3a4;
1011
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-warning {
1012
+ --tab-active-ink: #cecfa6;
1027
1013
  }
1028
1014
 
1029
- .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-error {
1030
- --tab-active-ink: #a85b64;
1015
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-warning {
1016
+ --tab-active-ink: #7d7463;
1031
1017
  }
1032
1018
 
1033
- .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-error {
1034
- --tab-active-ink: #f2bbc0;
1019
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-warning {
1020
+ --tab-active-ink: #c5c1b7;
1035
1021
  }
1036
1022
 
1037
1023
  .zx-root .zx-tabs__tab.zx-a-color-error.zx-s-active {
@@ -1054,13 +1040,37 @@
1054
1040
  color: #f2bbc0;
1055
1041
  }
1056
1042
 
1043
+ .zx-root .zx-tabs__indicator.zx-a-color-error {
1044
+ --tab-active-ink: #d9576d;
1045
+ }
1046
+
1047
+ .zx-root.zx-theme-dark .zx-tabs__indicator.zx-a-color-error {
1048
+ --tab-active-ink: #ff7d90;
1049
+ }
1050
+
1051
+ .zx-root.zx-theme-dim .zx-tabs__indicator.zx-a-color-error {
1052
+ --tab-active-ink: #f5b3a4;
1053
+ }
1054
+
1055
+ .zx-root.zx-theme-nord .zx-tabs__indicator.zx-a-color-error {
1056
+ --tab-active-ink: #a85b64;
1057
+ }
1058
+
1059
+ .zx-root.zx-theme-sunset .zx-tabs__indicator.zx-a-color-error {
1060
+ --tab-active-ink: #f2bbc0;
1061
+ }
1062
+
1057
1063
  .zx-tabs__tab.zx-a-variant-border {
1058
1064
  border-radius: var(--radius-field);
1059
- border-bottom: 3px solid transparent;
1060
1065
  }
1061
1066
 
1062
- .zx-tabs__tab.zx-a-variant-border.zx-s-active {
1067
+ .zx-tabs__indicator.zx-a-variant-border {
1068
+ display: flex;
1069
+ box-sizing: border-box;
1070
+ border-bottom-width: 3px;
1071
+ border-bottom-style: solid;
1063
1072
  border-bottom-color: var(--tab-active-ink);
1073
+ transform: scaleX(0.8);
1064
1074
  }
1065
1075
 
1066
1076
  .zx-tabs__tab.zx-a-variant-lift {
@@ -1095,6 +1105,11 @@
1095
1105
  box-shadow: var(--shadow-sm);
1096
1106
  }
1097
1107
 
1108
+ .zx-tabs__tab.zx-a-variant-box.zx-f-focus-visible {
1109
+ outline: none;
1110
+ box-shadow: 0 0 0 2px var(--color-base-200), 0 0 0 4px var(--color-base-content);
1111
+ }
1112
+
1098
1113
  .zx-tabs__tab.zx-a-variant-box.zx-a-color-primary.zx-s-active {
1099
1114
  background: var(--color-primary);
1100
1115
  color: var(--color-primary-content);
@@ -1426,6 +1441,7 @@
1426
1441
  padding: calc((var(--size-selector) * 6) * 0.125);
1427
1442
  border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 6) * 0.125) + var(--border));
1428
1443
  border: var(--border) solid var(--switch-ink);
1444
+ box-shadow: 0 1px var(--depth-shade) inset;
1429
1445
  user-select: none;
1430
1446
  transition: border-color var(--duration-slow) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
1431
1447
  }
@@ -1468,8 +1484,9 @@
1468
1484
  }
1469
1485
 
1470
1486
  .zx-switch__control.zx-f-focus-visible {
1471
- outline: 2px solid var(--switch-accent);
1487
+ outline: none;
1472
1488
  outline-offset: 2px;
1489
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--switch-accent), 0 1px var(--depth-shade) inset;
1473
1490
  }
1474
1491
 
1475
1492
  .zx-switch__thumb {
@@ -1477,6 +1494,7 @@
1477
1494
  height: calc((var(--size-selector) * 6) - (var(--border) + ((var(--size-selector) * 6) * 0.125)) * 2);
1478
1495
  border-radius: var(--radius-selector);
1479
1496
  background-color: var(--switch-ink);
1497
+ box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
1480
1498
  transition: transform var(--duration-normal) var(--ease-standard), background-color var(--duration-instant) var(--ease-standard);
1481
1499
  }
1482
1500
 
@@ -1576,6 +1594,9 @@
1576
1594
  transition: background var(--duration-normal) var(--ease-standard);
1577
1595
  padding-left: calc(var(--size-field) * 4);
1578
1596
  padding-right: calc(var(--size-field) * 4);
1597
+ width: max-content;
1598
+ flex-shrink: 0;
1599
+ flex-wrap: nowrap;
1579
1600
  }
1580
1601
 
1581
1602
  .zx-dialog__trigger.zx-f-disabled {
@@ -1584,8 +1605,15 @@
1584
1605
  }
1585
1606
 
1586
1607
  .zx-dialog__trigger.zx-f-focus-visible {
1587
- outline: 2px solid var(--color-base-content);
1608
+ outline: none;
1588
1609
  outline-offset: 2px;
1610
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
1611
+ }
1612
+
1613
+ .zx-dialog__trigger.zx-f-pressed {
1614
+ background: var(--color-base-300);
1615
+ transform: translateY(1px);
1616
+ box-shadow: none;
1589
1617
  }
1590
1618
 
1591
1619
  .zx-dialog__popup {
@@ -1649,6 +1677,7 @@
1649
1677
  justify-content: flex-end;
1650
1678
  gap: var(--space-md);
1651
1679
  margin-top: var(--space-2xl);
1680
+ flex-direction: row;
1652
1681
  }
1653
1682
 
1654
1683
  .zx-dialog__close {
@@ -1676,8 +1705,15 @@
1676
1705
  }
1677
1706
 
1678
1707
  .zx-dialog__close.zx-f-focus-visible {
1679
- outline: 2px solid var(--color-base-content);
1708
+ outline: none;
1680
1709
  outline-offset: 2px;
1710
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
1711
+ }
1712
+
1713
+ .zx-dialog__close.zx-f-pressed {
1714
+ background: var(--color-base-300);
1715
+ transform: translateY(1px);
1716
+ box-shadow: none;
1681
1717
  }
1682
1718
 
1683
1719
  .zx-dialog__cancel {
@@ -1705,8 +1741,15 @@
1705
1741
  }
1706
1742
 
1707
1743
  .zx-dialog__cancel.zx-f-focus-visible {
1708
- outline: 2px solid var(--color-base-content);
1744
+ outline: none;
1709
1745
  outline-offset: 2px;
1746
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
1747
+ }
1748
+
1749
+ .zx-dialog__cancel.zx-f-pressed {
1750
+ background: var(--color-base-300);
1751
+ transform: translateY(1px);
1752
+ box-shadow: none;
1710
1753
  }
1711
1754
 
1712
1755
  .zx-dialog__trigger.zx-a-color-primary {
@@ -1846,6 +1889,9 @@
1846
1889
  transition: background var(--duration-normal) var(--ease-standard);
1847
1890
  padding-left: calc(var(--size-field) * 4);
1848
1891
  padding-right: calc(var(--size-field) * 4);
1892
+ width: max-content;
1893
+ flex-shrink: 0;
1894
+ flex-wrap: nowrap;
1849
1895
  }
1850
1896
 
1851
1897
  .zx-popover__trigger.zx-f-disabled {
@@ -1858,8 +1904,15 @@
1858
1904
  }
1859
1905
 
1860
1906
  .zx-popover__trigger.zx-f-focus-visible {
1861
- outline: 2px solid var(--color-base-content);
1907
+ outline: none;
1862
1908
  outline-offset: 2px;
1909
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
1910
+ }
1911
+
1912
+ .zx-popover__trigger.zx-f-pressed {
1913
+ background: var(--color-base-300);
1914
+ transform: translateY(1px);
1915
+ box-shadow: none;
1863
1916
  }
1864
1917
 
1865
1918
  .zx-popover__popup {
@@ -1886,6 +1939,31 @@
1886
1939
  font-weight: var(--weight-bold);
1887
1940
  }
1888
1941
 
1942
+ .zx-popover__description {
1943
+ margin: 0 0 var(--space-lg);
1944
+ font-size: var(--text-sm);
1945
+ }
1946
+
1947
+ .zx-root .zx-popover__description {
1948
+ color: #18181bbf;
1949
+ }
1950
+
1951
+ .zx-root.zx-theme-dark .zx-popover__description {
1952
+ color: #ecf9ffbf;
1953
+ }
1954
+
1955
+ .zx-root.zx-theme-dim .zx-popover__description {
1956
+ color: #b2ccd6bf;
1957
+ }
1958
+
1959
+ .zx-root.zx-theme-nord .zx-popover__description {
1960
+ color: #2e3440bf;
1961
+ }
1962
+
1963
+ .zx-root.zx-theme-sunset .zx-popover__description {
1964
+ color: #9fb9d0bf;
1965
+ }
1966
+
1889
1967
  .zx-popover__close {
1890
1968
  appearance: none;
1891
1969
  display: flex;
@@ -1911,8 +1989,15 @@
1911
1989
  }
1912
1990
 
1913
1991
  .zx-popover__close.zx-f-focus-visible {
1914
- outline: 2px solid var(--color-base-content);
1992
+ outline: none;
1915
1993
  outline-offset: 2px;
1994
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
1995
+ }
1996
+
1997
+ .zx-popover__close.zx-f-pressed {
1998
+ background: var(--color-base-300);
1999
+ transform: translateY(1px);
2000
+ box-shadow: none;
1916
2001
  }
1917
2002
 
1918
2003
  .zx-popover__trigger.zx-a-color-primary {
@@ -2200,41 +2285,24 @@
2200
2285
  padding-right: calc(var(--size-field) * 6);
2201
2286
  }
2202
2287
 
2203
- .zx-menu__trigger {
2204
- appearance: none;
2205
- display: flex;
2206
- align-items: center;
2207
- justify-content: center;
2208
- gap: 0.5em;
2209
- height: calc(var(--size-field) * 12);
2210
- font-size: var(--text-sm);
2211
- font-weight: var(--weight-semibold);
2212
- color: var(--color-base-content);
2213
- background: var(--color-base-200);
2214
- border: var(--border) solid var(--color-base-300);
2215
- border-radius: var(--radius-field);
2216
- box-shadow: var(--shadow-xs);
2288
+ .zx-hover-card__trigger {
2289
+ color: inherit;
2290
+ text-decoration-line: underline;
2291
+ text-underline-offset: 2px;
2217
2292
  cursor: pointer;
2218
- transition: background var(--duration-normal) var(--ease-standard);
2219
- padding-left: calc(var(--size-field) * 4);
2220
- padding-right: calc(var(--size-field) * 4);
2221
- }
2222
-
2223
- .zx-menu__trigger.zx-f-disabled {
2224
- opacity: var(--disabled-opacity);
2225
- cursor: not-allowed;
2293
+ border-radius: var(--radius-selector);
2226
2294
  }
2227
2295
 
2228
- .zx-menu__trigger.zx-s-open {
2229
- background: var(--color-base-300);
2296
+ .zx-hover-card__trigger.zx-s-open {
2297
+ text-decoration-thickness: 2px;
2230
2298
  }
2231
2299
 
2232
- .zx-menu__trigger.zx-f-focus-visible {
2300
+ .zx-hover-card__trigger.zx-f-focus-visible {
2233
2301
  outline: 2px solid var(--color-base-content);
2234
2302
  outline-offset: 2px;
2235
2303
  }
2236
2304
 
2237
- .zx-menu__popup {
2305
+ .zx-hover-card__popup {
2238
2306
  opacity: 0;
2239
2307
  transform: translateY(-4px);
2240
2308
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
@@ -2243,70 +2311,299 @@
2243
2311
  border: var(--border) solid var(--color-base-300);
2244
2312
  border-radius: var(--radius-box);
2245
2313
  box-shadow: var(--shadow-lg);
2246
- padding: var(--space-md);
2247
- min-width: 13rem;
2314
+ padding: var(--space-xl);
2315
+ max-width: 20rem;
2316
+ font-size: var(--text-sm);
2248
2317
  }
2249
2318
 
2250
- .zx-menu__popup.zx-s-open {
2319
+ .zx-hover-card__popup.zx-s-open {
2251
2320
  opacity: 1;
2252
2321
  transform: none;
2253
2322
  }
2254
2323
 
2255
- .zx-menu__item {
2256
- display: flex;
2257
- align-items: center;
2258
- gap: var(--space-md);
2259
- padding: var(--space-md) var(--space-lg);
2260
- font-size: var(--text-sm);
2261
- font-weight: var(--weight-medium);
2262
- border-radius: var(--radius-field);
2263
- cursor: pointer;
2264
- outline: none;
2265
- transition: background var(--duration-fast) var(--ease-standard);
2324
+ .zx-root .zx-hover-card__trigger.zx-a-color-primary {
2325
+ color: #3f2bcb;
2266
2326
  }
2267
2327
 
2268
- .zx-menu__item.zx-f-highlighted {
2269
- background: var(--color-base-200);
2328
+ .zx-root.zx-theme-dark .zx-hover-card__trigger.zx-a-color-primary {
2329
+ color: #6567ff;
2270
2330
  }
2271
2331
 
2272
- .zx-menu__item.zx-f-disabled {
2273
- opacity: var(--disabled-opacity);
2274
- cursor: not-allowed;
2332
+ .zx-root.zx-theme-dim .zx-hover-card__trigger.zx-a-color-primary {
2333
+ color: #a0e791;
2275
2334
  }
2276
2335
 
2277
- .zx-menu__checkbox-item {
2278
- display: flex;
2279
- align-items: center;
2280
- gap: var(--space-md);
2281
- padding: var(--space-md) var(--space-lg);
2282
- font-size: var(--text-sm);
2283
- font-weight: var(--weight-medium);
2284
- border-radius: var(--radius-field);
2285
- cursor: pointer;
2286
- outline: none;
2287
- transition: background var(--duration-fast) var(--ease-standard);
2336
+ .zx-root.zx-theme-nord .zx-hover-card__trigger.zx-a-color-primary {
2337
+ color: #5c7da6;
2288
2338
  }
2289
2339
 
2290
- .zx-menu__checkbox-item.zx-f-highlighted {
2291
- background: var(--color-base-200);
2340
+ .zx-root.zx-theme-sunset .zx-hover-card__trigger.zx-a-color-primary {
2341
+ color: #fb8a62;
2292
2342
  }
2293
2343
 
2294
- .zx-menu__checkbox-item.zx-f-disabled {
2295
- opacity: var(--disabled-opacity);
2296
- cursor: not-allowed;
2344
+ .zx-root .zx-hover-card__trigger.zx-a-color-secondary {
2345
+ color: #ad316f;
2297
2346
  }
2298
2347
 
2299
- .zx-menu__radio-item {
2300
- display: flex;
2301
- align-items: center;
2302
- gap: var(--space-md);
2303
- padding: var(--space-md) var(--space-lg);
2304
- font-size: var(--text-sm);
2305
- font-weight: var(--weight-medium);
2306
- border-radius: var(--radius-field);
2307
- cursor: pointer;
2308
- outline: none;
2309
- transition: background var(--duration-fast) var(--ease-standard);
2348
+ .zx-root.zx-theme-dark .zx-hover-card__trigger.zx-a-color-secondary {
2349
+ color: #fa7cb6;
2350
+ }
2351
+
2352
+ .zx-root.zx-theme-dim .zx-hover-card__trigger.zx-a-color-secondary {
2353
+ color: #ed9984;
2354
+ }
2355
+
2356
+ .zx-root.zx-theme-nord .zx-hover-card__trigger.zx-a-color-secondary {
2357
+ color: #677e98;
2358
+ }
2359
+
2360
+ .zx-root.zx-theme-sunset .zx-hover-card__trigger.zx-a-color-secondary {
2361
+ color: #e68aac;
2362
+ }
2363
+
2364
+ .zx-root .zx-hover-card__trigger.zx-a-color-accent {
2365
+ color: #2b786d;
2366
+ }
2367
+
2368
+ .zx-root.zx-theme-dark .zx-hover-card__trigger.zx-a-color-accent {
2369
+ color: #93e5d9;
2370
+ }
2371
+
2372
+ .zx-root.zx-theme-dim .zx-hover-card__trigger.zx-a-color-accent {
2373
+ color: #bfade1;
2374
+ }
2375
+
2376
+ .zx-root.zx-theme-nord .zx-hover-card__trigger.zx-a-color-accent {
2377
+ color: #5e7d8c;
2378
+ }
2379
+
2380
+ .zx-root.zx-theme-sunset .zx-hover-card__trigger.zx-a-color-accent {
2381
+ color: #ab9fe8;
2382
+ }
2383
+
2384
+ .zx-root .zx-hover-card__trigger.zx-a-color-neutral {
2385
+ color: #121214;
2386
+ }
2387
+
2388
+ .zx-root.zx-theme-dark .zx-hover-card__trigger.zx-a-color-neutral {
2389
+ color: #878e92;
2390
+ }
2391
+
2392
+ .zx-root.zx-theme-dim .zx-hover-card__trigger.zx-a-color-neutral {
2393
+ color: #71828c;
2394
+ }
2395
+
2396
+ .zx-root.zx-theme-nord .zx-hover-card__trigger.zx-a-color-neutral {
2397
+ color: #3a4150;
2398
+ }
2399
+
2400
+ .zx-root.zx-theme-sunset .zx-hover-card__trigger.zx-a-color-neutral {
2401
+ color: #667a8a;
2402
+ }
2403
+
2404
+ .zx-root .zx-hover-card__trigger.zx-a-color-info {
2405
+ color: #2685b3;
2406
+ }
2407
+
2408
+ .zx-root.zx-theme-dark .zx-hover-card__trigger.zx-a-color-info {
2409
+ color: #70ceff;
2410
+ }
2411
+
2412
+ .zx-root.zx-theme-dim .zx-hover-card__trigger.zx-a-color-info {
2413
+ color: #6ce2f3;
2414
+ }
2415
+
2416
+ .zx-root.zx-theme-nord .zx-hover-card__trigger.zx-a-color-info {
2417
+ color: #89728a;
2418
+ }
2419
+
2420
+ .zx-root.zx-theme-sunset .zx-hover-card__trigger.zx-a-color-info {
2421
+ color: #91d4e3;
2422
+ }
2423
+
2424
+ .zx-root .zx-hover-card__trigger.zx-a-color-success {
2425
+ color: #2a7858;
2426
+ }
2427
+
2428
+ .zx-root.zx-theme-dark .zx-hover-card__trigger.zx-a-color-success {
2429
+ color: #92e5c2;
2430
+ }
2431
+
2432
+ .zx-root.zx-theme-dim .zx-hover-card__trigger.zx-a-color-success {
2433
+ color: #8ee0c9;
2434
+ }
2435
+
2436
+ .zx-root.zx-theme-nord .zx-hover-card__trigger.zx-a-color-success {
2437
+ color: #6b7d6a;
2438
+ }
2439
+
2440
+ .zx-root.zx-theme-sunset .zx-hover-card__trigger.zx-a-color-success {
2441
+ color: #a6cebe;
2442
+ }
2443
+
2444
+ .zx-root .zx-hover-card__trigger.zx-a-color-warning {
2445
+ color: #755a2b;
2446
+ }
2447
+
2448
+ .zx-root.zx-theme-dark .zx-hover-card__trigger.zx-a-color-warning {
2449
+ color: #f5ddac;
2450
+ }
2451
+
2452
+ .zx-root.zx-theme-dim .zx-hover-card__trigger.zx-a-color-warning {
2453
+ color: #cecfa6;
2454
+ }
2455
+
2456
+ .zx-root.zx-theme-nord .zx-hover-card__trigger.zx-a-color-warning {
2457
+ color: #7d7463;
2458
+ }
2459
+
2460
+ .zx-root.zx-theme-sunset .zx-hover-card__trigger.zx-a-color-warning {
2461
+ color: #c5c1b7;
2462
+ }
2463
+
2464
+ .zx-root .zx-hover-card__trigger.zx-a-color-error {
2465
+ color: #d9576d;
2466
+ }
2467
+
2468
+ .zx-root.zx-theme-dark .zx-hover-card__trigger.zx-a-color-error {
2469
+ color: #ff7d90;
2470
+ }
2471
+
2472
+ .zx-root.zx-theme-dim .zx-hover-card__trigger.zx-a-color-error {
2473
+ color: #f5b3a4;
2474
+ }
2475
+
2476
+ .zx-root.zx-theme-nord .zx-hover-card__trigger.zx-a-color-error {
2477
+ color: #a85b64;
2478
+ }
2479
+
2480
+ .zx-root.zx-theme-sunset .zx-hover-card__trigger.zx-a-color-error {
2481
+ color: #f2bbc0;
2482
+ }
2483
+
2484
+ .zx-hover-card__trigger.zx-a-size-xs {
2485
+ font-size: var(--text-xs);
2486
+ }
2487
+
2488
+ .zx-hover-card__trigger.zx-a-size-sm {
2489
+ font-size: var(--text-sm);
2490
+ }
2491
+
2492
+ .zx-hover-card__trigger.zx-a-size-lg {
2493
+ font-size: var(--text-lg);
2494
+ }
2495
+
2496
+ .zx-hover-card__trigger.zx-a-size-xl {
2497
+ font-size: var(--text-xl);
2498
+ }
2499
+
2500
+ .zx-menu__trigger {
2501
+ appearance: none;
2502
+ display: flex;
2503
+ align-items: center;
2504
+ justify-content: center;
2505
+ gap: 0.5em;
2506
+ height: calc(var(--size-field) * 12);
2507
+ font-size: var(--text-sm);
2508
+ font-weight: var(--weight-semibold);
2509
+ color: var(--color-base-content);
2510
+ background: var(--color-base-200);
2511
+ border: var(--border) solid var(--color-base-300);
2512
+ border-radius: var(--radius-field);
2513
+ box-shadow: var(--shadow-xs);
2514
+ cursor: pointer;
2515
+ transition: background var(--duration-normal) var(--ease-standard);
2516
+ padding-left: calc(var(--size-field) * 4);
2517
+ padding-right: calc(var(--size-field) * 4);
2518
+ }
2519
+
2520
+ .zx-menu__trigger.zx-f-disabled {
2521
+ opacity: var(--disabled-opacity);
2522
+ cursor: not-allowed;
2523
+ }
2524
+
2525
+ .zx-menu__trigger.zx-s-open {
2526
+ background: var(--color-base-300);
2527
+ }
2528
+
2529
+ .zx-menu__trigger.zx-f-focus-visible {
2530
+ outline: 2px solid var(--color-base-content);
2531
+ outline-offset: 2px;
2532
+ }
2533
+
2534
+ .zx-menu__popup {
2535
+ opacity: 0;
2536
+ transform: translateY(-4px);
2537
+ transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
2538
+ background: var(--color-base-100);
2539
+ color: var(--color-base-content);
2540
+ border: var(--border) solid var(--color-base-300);
2541
+ border-radius: var(--radius-box);
2542
+ box-shadow: var(--shadow-lg);
2543
+ padding: var(--space-md);
2544
+ min-width: 13rem;
2545
+ }
2546
+
2547
+ .zx-menu__popup.zx-s-open {
2548
+ opacity: 1;
2549
+ transform: none;
2550
+ }
2551
+
2552
+ .zx-menu__item {
2553
+ display: flex;
2554
+ align-items: center;
2555
+ gap: var(--space-md);
2556
+ padding: var(--space-md) var(--space-lg);
2557
+ font-size: var(--text-sm);
2558
+ font-weight: var(--weight-medium);
2559
+ border-radius: var(--radius-field);
2560
+ cursor: pointer;
2561
+ outline: none;
2562
+ transition: background var(--duration-fast) var(--ease-standard);
2563
+ }
2564
+
2565
+ .zx-menu__item.zx-f-highlighted {
2566
+ background: var(--color-base-200);
2567
+ }
2568
+
2569
+ .zx-menu__item.zx-f-disabled {
2570
+ opacity: var(--disabled-opacity);
2571
+ cursor: not-allowed;
2572
+ }
2573
+
2574
+ .zx-menu__checkbox-item {
2575
+ display: flex;
2576
+ align-items: center;
2577
+ gap: var(--space-md);
2578
+ padding: var(--space-md) var(--space-lg);
2579
+ font-size: var(--text-sm);
2580
+ font-weight: var(--weight-medium);
2581
+ border-radius: var(--radius-field);
2582
+ cursor: pointer;
2583
+ outline: none;
2584
+ transition: background var(--duration-fast) var(--ease-standard);
2585
+ }
2586
+
2587
+ .zx-menu__checkbox-item.zx-f-highlighted {
2588
+ background: var(--color-base-200);
2589
+ }
2590
+
2591
+ .zx-menu__checkbox-item.zx-f-disabled {
2592
+ opacity: var(--disabled-opacity);
2593
+ cursor: not-allowed;
2594
+ }
2595
+
2596
+ .zx-menu__radio-item {
2597
+ display: flex;
2598
+ align-items: center;
2599
+ gap: var(--space-md);
2600
+ padding: var(--space-md) var(--space-lg);
2601
+ font-size: var(--text-sm);
2602
+ font-weight: var(--weight-medium);
2603
+ border-radius: var(--radius-field);
2604
+ cursor: pointer;
2605
+ outline: none;
2606
+ transition: background var(--duration-fast) var(--ease-standard);
2310
2607
  }
2311
2608
 
2312
2609
  .zx-menu__radio-item.zx-f-highlighted {
@@ -2376,6 +2673,13 @@
2376
2673
  opacity: 0.6;
2377
2674
  }
2378
2675
 
2676
+ .zx-menu__shortcut {
2677
+ font-size: var(--text-xs);
2678
+ opacity: 0.75;
2679
+ margin-left: auto;
2680
+ padding-left: var(--space-lg);
2681
+ }
2682
+
2379
2683
  .zx-menu__separator {
2380
2684
  height: var(--border);
2381
2685
  margin: var(--space-sm) var(--space-md);
@@ -2498,6 +2802,206 @@
2498
2802
  padding-right: calc(var(--size-field) * 6);
2499
2803
  }
2500
2804
 
2805
+ .zx-menubar__root {
2806
+ --menubar-surface: var(--color-base-200);
2807
+ }
2808
+
2809
+ .zx-menubar__root {
2810
+ display: flex;
2811
+ align-items: center;
2812
+ gap: var(--space-xs);
2813
+ padding: var(--space-xs);
2814
+ width: max-content;
2815
+ max-width: 100%;
2816
+ flex-wrap: wrap;
2817
+ background: var(--menubar-surface);
2818
+ border-radius: var(--radius-box);
2819
+ }
2820
+
2821
+ .zx-menubar__root.zx-o-vertical {
2822
+ flex-direction: column;
2823
+ align-items: stretch;
2824
+ }
2825
+
2826
+ .zx-root .zx-menubar__root.zx-a-color-primary {
2827
+ --menubar-surface: #dee2f7;
2828
+ }
2829
+
2830
+ .zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-primary {
2831
+ --menubar-surface: #1a283b;
2832
+ }
2833
+
2834
+ .zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-primary {
2835
+ --menubar-surface: #2d3c4c;
2836
+ }
2837
+
2838
+ .zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-primary {
2839
+ --menubar-surface: #d5dce8;
2840
+ }
2841
+
2842
+ .zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-primary {
2843
+ --menubar-surface: #1b2537;
2844
+ }
2845
+
2846
+ .zx-root .zx-menubar__root.zx-a-color-secondary {
2847
+ --menubar-surface: #fce4ec;
2848
+ }
2849
+
2850
+ .zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-secondary {
2851
+ --menubar-surface: #20293e;
2852
+ }
2853
+
2854
+ .zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-secondary {
2855
+ --menubar-surface: #33354a;
2856
+ }
2857
+
2858
+ .zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-secondary {
2859
+ --menubar-surface: #d9e0eb;
2860
+ }
2861
+
2862
+ .zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-secondary {
2863
+ --menubar-surface: #182537;
2864
+ }
2865
+
2866
+ .zx-root .zx-menubar__root.zx-a-color-accent {
2867
+ --menubar-surface: #e5f4f1;
2868
+ }
2869
+
2870
+ .zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-accent {
2871
+ --menubar-surface: #212f3b;
2872
+ }
2873
+
2874
+ .zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-accent {
2875
+ --menubar-surface: #303648;
2876
+ }
2877
+
2878
+ .zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-accent {
2879
+ --menubar-surface: #dce3ee;
2880
+ }
2881
+
2882
+ .zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-accent {
2883
+ --menubar-surface: #162636;
2884
+ }
2885
+
2886
+ .zx-root .zx-menubar__root.zx-a-color-neutral {
2887
+ --menubar-surface: #d7d7d7;
2888
+ }
2889
+
2890
+ .zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-neutral {
2891
+ --menubar-surface: #171b21;
2892
+ }
2893
+
2894
+ .zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-neutral {
2895
+ --menubar-surface: #232832;
2896
+ }
2897
+
2898
+ .zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-neutral {
2899
+ --menubar-surface: #d1d6df;
2900
+ }
2901
+
2902
+ .zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-neutral {
2903
+ --menubar-surface: #0f1920;
2904
+ }
2905
+
2906
+ .zx-root .zx-menubar__root.zx-a-color-info {
2907
+ --menubar-surface: #e3f1fa;
2908
+ }
2909
+
2910
+ .zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-info {
2911
+ --menubar-surface: #212e3b;
2912
+ }
2913
+
2914
+ .zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-info {
2915
+ --menubar-surface: #2f3b4d;
2916
+ }
2917
+
2918
+ .zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-info {
2919
+ --menubar-surface: #dbdfeb;
2920
+ }
2921
+
2922
+ .zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-info {
2923
+ --menubar-surface: #1b2a34;
2924
+ }
2925
+
2926
+ .zx-root .zx-menubar__root.zx-a-color-success {
2927
+ --menubar-surface: #e4f4eb;
2928
+ }
2929
+
2930
+ .zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-success {
2931
+ --menubar-surface: #1e2f3c;
2932
+ }
2933
+
2934
+ .zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-success {
2935
+ --menubar-surface: #2e3c4c;
2936
+ }
2937
+
2938
+ .zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-success {
2939
+ --menubar-surface: #d9e4ee;
2940
+ }
2941
+
2942
+ .zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-success {
2943
+ --menubar-surface: #1a2b33;
2944
+ }
2945
+
2946
+ .zx-root .zx-menubar__root.zx-a-color-warning {
2947
+ --menubar-surface: #f9f1e3;
2948
+ }
2949
+
2950
+ .zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-warning {
2951
+ --menubar-surface: #1d323c;
2952
+ }
2953
+
2954
+ .zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-warning {
2955
+ --menubar-surface: #2b3d4b;
2956
+ }
2957
+
2958
+ .zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-warning {
2959
+ --menubar-surface: #dbe8f2;
2960
+ }
2961
+
2962
+ .zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-warning {
2963
+ --menubar-surface: #192c32;
2964
+ }
2965
+
2966
+ .zx-root .zx-menubar__root.zx-a-color-error {
2967
+ --menubar-surface: #fce7e9;
2968
+ }
2969
+
2970
+ .zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-error {
2971
+ --menubar-surface: #232b3d;
2972
+ }
2973
+
2974
+ .zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-error {
2975
+ --menubar-surface: #363849;
2976
+ }
2977
+
2978
+ .zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-error {
2979
+ --menubar-surface: #d7dbec;
2980
+ }
2981
+
2982
+ .zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-error {
2983
+ --menubar-surface: #202936;
2984
+ }
2985
+
2986
+ .zx-menubar__root.zx-a-size-xs {
2987
+ gap: 0;
2988
+ padding: 0;
2989
+ }
2990
+
2991
+ .zx-menubar__root.zx-a-size-sm {
2992
+ padding: var(--space-2xs);
2993
+ }
2994
+
2995
+ .zx-menubar__root.zx-a-size-lg {
2996
+ gap: var(--space-sm);
2997
+ padding: var(--space-sm);
2998
+ }
2999
+
3000
+ .zx-menubar__root.zx-a-size-xl {
3001
+ gap: var(--space-md);
3002
+ padding: var(--space-sm);
3003
+ }
3004
+
2501
3005
  .zx-field__root {
2502
3006
  --field-accent: var(--color-base-content);
2503
3007
  }
@@ -2742,6 +3246,226 @@
2742
3246
  font-size: var(--text-md);
2743
3247
  }
2744
3248
 
3249
+ .zx-fieldset__root {
3250
+ --fieldset-accent: var(--color-base-content);
3251
+ }
3252
+
3253
+ .zx-fieldset__root {
3254
+ display: grid;
3255
+ grid-template-columns: 1fr;
3256
+ grid-auto-rows: max-content;
3257
+ gap: var(--space-sm);
3258
+ min-inline-size: 0;
3259
+ margin: 0;
3260
+ border: none;
3261
+ }
3262
+
3263
+ .zx-fieldset__legend {
3264
+ font-size: var(--text-sm);
3265
+ font-weight: var(--weight-semibold);
3266
+ color: var(--fieldset-accent);
3267
+ }
3268
+
3269
+ .zx-fieldset__legend.zx-f-disabled {
3270
+ opacity: var(--disabled-opacity);
3271
+ }
3272
+
3273
+ .zx-root .zx-fieldset__legend.zx-f-invalid {
3274
+ color: #d9576d;
3275
+ }
3276
+
3277
+ .zx-root.zx-theme-dark .zx-fieldset__legend.zx-f-invalid {
3278
+ color: #ff7d90;
3279
+ }
3280
+
3281
+ .zx-root.zx-theme-dim .zx-fieldset__legend.zx-f-invalid {
3282
+ color: #f5b3a4;
3283
+ }
3284
+
3285
+ .zx-root.zx-theme-nord .zx-fieldset__legend.zx-f-invalid {
3286
+ color: #a85b64;
3287
+ }
3288
+
3289
+ .zx-root.zx-theme-sunset .zx-fieldset__legend.zx-f-invalid {
3290
+ color: #f2bbc0;
3291
+ }
3292
+
3293
+ .zx-root .zx-fieldset__root.zx-a-color-primary {
3294
+ --fieldset-accent: #3f2bcb;
3295
+ }
3296
+
3297
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-primary {
3298
+ --fieldset-accent: #6567ff;
3299
+ }
3300
+
3301
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-primary {
3302
+ --fieldset-accent: #a0e791;
3303
+ }
3304
+
3305
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-primary {
3306
+ --fieldset-accent: #5c7da6;
3307
+ }
3308
+
3309
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-primary {
3310
+ --fieldset-accent: #fb8a62;
3311
+ }
3312
+
3313
+ .zx-root .zx-fieldset__root.zx-a-color-secondary {
3314
+ --fieldset-accent: #ad316f;
3315
+ }
3316
+
3317
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-secondary {
3318
+ --fieldset-accent: #fa7cb6;
3319
+ }
3320
+
3321
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-secondary {
3322
+ --fieldset-accent: #ed9984;
3323
+ }
3324
+
3325
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-secondary {
3326
+ --fieldset-accent: #677e98;
3327
+ }
3328
+
3329
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-secondary {
3330
+ --fieldset-accent: #e68aac;
3331
+ }
3332
+
3333
+ .zx-root .zx-fieldset__root.zx-a-color-accent {
3334
+ --fieldset-accent: #2b786d;
3335
+ }
3336
+
3337
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-accent {
3338
+ --fieldset-accent: #93e5d9;
3339
+ }
3340
+
3341
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-accent {
3342
+ --fieldset-accent: #bfade1;
3343
+ }
3344
+
3345
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-accent {
3346
+ --fieldset-accent: #5e7d8c;
3347
+ }
3348
+
3349
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-accent {
3350
+ --fieldset-accent: #ab9fe8;
3351
+ }
3352
+
3353
+ .zx-root .zx-fieldset__root.zx-a-color-neutral {
3354
+ --fieldset-accent: #121214;
3355
+ }
3356
+
3357
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-neutral {
3358
+ --fieldset-accent: #878e92;
3359
+ }
3360
+
3361
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-neutral {
3362
+ --fieldset-accent: #71828c;
3363
+ }
3364
+
3365
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-neutral {
3366
+ --fieldset-accent: #3a4150;
3367
+ }
3368
+
3369
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-neutral {
3370
+ --fieldset-accent: #667a8a;
3371
+ }
3372
+
3373
+ .zx-root .zx-fieldset__root.zx-a-color-info {
3374
+ --fieldset-accent: #2685b3;
3375
+ }
3376
+
3377
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-info {
3378
+ --fieldset-accent: #70ceff;
3379
+ }
3380
+
3381
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-info {
3382
+ --fieldset-accent: #6ce2f3;
3383
+ }
3384
+
3385
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-info {
3386
+ --fieldset-accent: #89728a;
3387
+ }
3388
+
3389
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-info {
3390
+ --fieldset-accent: #91d4e3;
3391
+ }
3392
+
3393
+ .zx-root .zx-fieldset__root.zx-a-color-success {
3394
+ --fieldset-accent: #2a7858;
3395
+ }
3396
+
3397
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-success {
3398
+ --fieldset-accent: #92e5c2;
3399
+ }
3400
+
3401
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-success {
3402
+ --fieldset-accent: #8ee0c9;
3403
+ }
3404
+
3405
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-success {
3406
+ --fieldset-accent: #6b7d6a;
3407
+ }
3408
+
3409
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-success {
3410
+ --fieldset-accent: #a6cebe;
3411
+ }
3412
+
3413
+ .zx-root .zx-fieldset__root.zx-a-color-warning {
3414
+ --fieldset-accent: #755a2b;
3415
+ }
3416
+
3417
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-warning {
3418
+ --fieldset-accent: #f5ddac;
3419
+ }
3420
+
3421
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-warning {
3422
+ --fieldset-accent: #cecfa6;
3423
+ }
3424
+
3425
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-warning {
3426
+ --fieldset-accent: #7d7463;
3427
+ }
3428
+
3429
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-warning {
3430
+ --fieldset-accent: #c5c1b7;
3431
+ }
3432
+
3433
+ .zx-root .zx-fieldset__root.zx-a-color-error {
3434
+ --fieldset-accent: #d9576d;
3435
+ }
3436
+
3437
+ .zx-root.zx-theme-dark .zx-fieldset__root.zx-a-color-error {
3438
+ --fieldset-accent: #ff7d90;
3439
+ }
3440
+
3441
+ .zx-root.zx-theme-dim .zx-fieldset__root.zx-a-color-error {
3442
+ --fieldset-accent: #f5b3a4;
3443
+ }
3444
+
3445
+ .zx-root.zx-theme-nord .zx-fieldset__root.zx-a-color-error {
3446
+ --fieldset-accent: #a85b64;
3447
+ }
3448
+
3449
+ .zx-root.zx-theme-sunset .zx-fieldset__root.zx-a-color-error {
3450
+ --fieldset-accent: #f2bbc0;
3451
+ }
3452
+
3453
+ .zx-fieldset__legend.zx-a-size-xs {
3454
+ font-size: var(--text-xs);
3455
+ }
3456
+
3457
+ .zx-fieldset__legend.zx-a-size-sm {
3458
+ font-size: var(--text-xs);
3459
+ }
3460
+
3461
+ .zx-fieldset__legend.zx-a-size-lg {
3462
+ font-size: var(--text-md);
3463
+ }
3464
+
3465
+ .zx-fieldset__legend.zx-a-size-xl {
3466
+ font-size: var(--text-lg);
3467
+ }
3468
+
2745
3469
  .zx-checkbox__root {
2746
3470
  --checkbox-pad: 0.25rem;
2747
3471
  --checkbox-accent: var(--color-primary);
@@ -3391,26 +4115,6 @@
3391
4115
  transition: width var(--duration-slow) var(--ease-standard);
3392
4116
  }
3393
4117
 
3394
- .zx-root .zx-progress__range.zx-s-complete {
3395
- background: #009367;
3396
- }
3397
-
3398
- .zx-root.zx-theme-dark .zx-progress__range.zx-s-complete {
3399
- background: #009367;
3400
- }
3401
-
3402
- .zx-root.zx-theme-dim .zx-progress__range.zx-s-complete {
3403
- background: #328366;
3404
- }
3405
-
3406
- .zx-root.zx-theme-nord .zx-progress__range.zx-s-complete {
3407
- background: #58674b;
3408
- }
3409
-
3410
- .zx-root.zx-theme-sunset .zx-progress__range.zx-s-complete {
3411
- background: #5d7a5d;
3412
- }
3413
-
3414
4118
  .zx-progress__range.zx-s-indeterminate {
3415
4119
  width: 40%;
3416
4120
  animation: zero-daisy-indeterminate 1.2s ease-in-out infinite;
@@ -3588,6 +4292,26 @@
3588
4292
  --slider-accent: var(--color-primary);
3589
4293
  }
3590
4294
 
4295
+ .zx-root .zx-slider__root {
4296
+ --slider-fill: #3c2cc0;
4297
+ }
4298
+
4299
+ .zx-root.zx-theme-dark .zx-slider__root {
4300
+ --slider-fill: #6b70ff;
4301
+ }
4302
+
4303
+ .zx-root.zx-theme-dim .zx-slider__root {
4304
+ --slider-fill: #a1e596;
4305
+ }
4306
+
4307
+ .zx-root.zx-theme-nord .zx-slider__root {
4308
+ --slider-fill: #5979a0;
4309
+ }
4310
+
4311
+ .zx-root.zx-theme-sunset .zx-slider__root {
4312
+ --slider-fill: #f78d69;
4313
+ }
4314
+
3591
4315
  .zx-slider__root {
3592
4316
  display: flex;
3593
4317
  flex-direction: column;
@@ -3599,6 +4323,11 @@
3599
4323
  opacity: var(--disabled-opacity);
3600
4324
  }
3601
4325
 
4326
+ .zx-slider__root.zx-o-vertical {
4327
+ width: auto;
4328
+ align-items: center;
4329
+ }
4330
+
3602
4331
  .zx-slider__label {
3603
4332
  font-size: var(--text-sm);
3604
4333
  font-weight: var(--weight-semibold);
@@ -3640,7 +4369,7 @@
3640
4369
  }
3641
4370
 
3642
4371
  .zx-slider__control.zx-f-focus-visible {
3643
- outline: 2px solid var(--slider-accent);
4372
+ outline: none;
3644
4373
  outline-offset: 2px;
3645
4374
  }
3646
4375
 
@@ -3648,9 +4377,53 @@
3648
4377
  --slider-accent: var(--color-error);
3649
4378
  }
3650
4379
 
4380
+ .zx-root .zx-slider__control.zx-f-invalid {
4381
+ --slider-fill: #e55b72;
4382
+ }
4383
+
4384
+ .zx-root.zx-theme-dark .zx-slider__control.zx-f-invalid {
4385
+ --slider-fill: #ff748a;
4386
+ }
4387
+
4388
+ .zx-root.zx-theme-dim .zx-slider__control.zx-f-invalid {
4389
+ --slider-fill: #f8b2a1;
4390
+ }
4391
+
4392
+ .zx-root.zx-theme-nord .zx-slider__control.zx-f-invalid {
4393
+ --slider-fill: #b05d66;
4394
+ }
4395
+
4396
+ .zx-root.zx-theme-sunset .zx-slider__control.zx-f-invalid {
4397
+ --slider-fill: #f6bbbf;
4398
+ }
4399
+
4400
+ .zx-slider__control.zx-o-vertical {
4401
+ display: flex;
4402
+ flex-direction: row;
4403
+ justify-content: center;
4404
+ width: calc(var(--size-selector) * 6);
4405
+ height: calc(var(--size-selector) * 40);
4406
+ }
4407
+
4408
+ .zx-slider__control.zx-o-vertical.zx-a-size-xs {
4409
+ width: calc(var(--size-selector) * 4);
4410
+ }
4411
+
4412
+ .zx-slider__control.zx-o-vertical.zx-a-size-sm {
4413
+ width: calc(var(--size-selector) * 5);
4414
+ }
4415
+
4416
+ .zx-slider__control.zx-o-vertical.zx-a-size-lg {
4417
+ width: calc(var(--size-selector) * 7);
4418
+ }
4419
+
4420
+ .zx-slider__control.zx-o-vertical.zx-a-size-xl {
4421
+ width: calc(var(--size-selector) * 8);
4422
+ }
4423
+
3651
4424
  .zx-slider__track {
3652
4425
  height: calc(var(--size-selector) * 3);
3653
- border-radius: 9999px;
4426
+ border-radius: var(--radius-selector);
3654
4427
  background: var(--color-base-300);
3655
4428
  cursor: pointer;
3656
4429
  margin-top: calc(((var(--size-selector) * 6) - (var(--size-selector) * 3)) / 2);
@@ -3689,22 +4462,46 @@
3689
4462
  cursor: not-allowed;
3690
4463
  }
3691
4464
 
4465
+ .zx-slider__track.zx-o-vertical {
4466
+ width: calc(var(--size-selector) * 3);
4467
+ height: 100%;
4468
+ margin-top: 0;
4469
+ margin-bottom: 0;
4470
+ }
4471
+
4472
+ .zx-slider__track.zx-o-vertical.zx-a-size-xs {
4473
+ width: calc(var(--size-selector) * 2);
4474
+ }
4475
+
4476
+ .zx-slider__track.zx-o-vertical.zx-a-size-sm {
4477
+ width: calc(var(--size-selector) * 2.5);
4478
+ }
4479
+
4480
+ .zx-slider__track.zx-o-vertical.zx-a-size-lg {
4481
+ width: calc(var(--size-selector) * 3.5);
4482
+ }
4483
+
4484
+ .zx-slider__track.zx-o-vertical.zx-a-size-xl {
4485
+ width: calc(var(--size-selector) * 4);
4486
+ }
4487
+
3692
4488
  .zx-slider__range {
3693
4489
  height: 100%;
3694
- border-radius: 9999px;
3695
- background: var(--slider-accent);
4490
+ border-radius: var(--radius-selector);
4491
+ background: var(--slider-fill);
3696
4492
  }
3697
4493
 
3698
4494
  .zx-slider__thumb {
3699
4495
  box-sizing: border-box;
3700
4496
  width: calc(var(--size-selector) * 6);
3701
4497
  height: calc(var(--size-selector) * 6);
3702
- border-radius: 9999px;
4498
+ border-radius: calc(var(--radius-selector) + 0.25rem);
3703
4499
  background: var(--color-base-100);
3704
4500
  cursor: pointer;
3705
4501
  outline: none;
3706
4502
  touch-action: none;
3707
- border: 0.25rem solid var(--slider-accent);
4503
+ border: 0.25rem solid var(--slider-fill);
4504
+ box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
3708
4505
  top: 50%;
3709
4506
  transform: translateY(-50%);
3710
4507
  margin-left: calc((var(--size-selector) * 6) / -2);
@@ -3735,8 +4532,9 @@
3735
4532
  }
3736
4533
 
3737
4534
  .zx-slider__thumb.zx-f-focus-visible {
3738
- outline: 2px solid var(--slider-accent);
4535
+ outline: none;
3739
4536
  outline-offset: 2px;
4537
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--slider-accent), 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
3740
4538
  }
3741
4539
 
3742
4540
  .zx-slider__thumb.zx-f-readonly {
@@ -3752,23 +4550,52 @@
3752
4550
  line-height: 1;
3753
4551
  white-space: nowrap;
3754
4552
  opacity: 0.6;
3755
- padding-top: calc((var(--size-selector) * 3) + var(--space-2xs));
4553
+ top: 0;
4554
+ width: 2px;
4555
+ height: calc(var(--size-selector) * 3);
4556
+ margin-left: -1px;
4557
+ padding-top: 0;
4558
+ background-color: var(--color-base-content);
3756
4559
  }
3757
4560
 
3758
4561
  .zx-slider__mark.zx-a-size-xs {
3759
- padding-top: calc((var(--size-selector) * 2) + var(--space-2xs));
4562
+ height: calc(var(--size-selector) * 2);
3760
4563
  }
3761
4564
 
3762
4565
  .zx-slider__mark.zx-a-size-sm {
3763
- padding-top: calc((var(--size-selector) * 2.5) + var(--space-2xs));
4566
+ height: calc(var(--size-selector) * 2.5);
3764
4567
  }
3765
4568
 
3766
4569
  .zx-slider__mark.zx-a-size-lg {
3767
- padding-top: calc((var(--size-selector) * 3.5) + var(--space-2xs));
4570
+ height: calc(var(--size-selector) * 3.5);
3768
4571
  }
3769
4572
 
3770
4573
  .zx-slider__mark.zx-a-size-xl {
3771
- padding-top: calc((var(--size-selector) * 4) + var(--space-2xs));
4574
+ height: calc(var(--size-selector) * 4);
4575
+ }
4576
+
4577
+ .zx-slider__mark.zx-o-vertical {
4578
+ left: 0;
4579
+ width: calc(var(--size-selector) * 3);
4580
+ height: 2px;
4581
+ margin-left: 0;
4582
+ margin-top: -1px;
4583
+ }
4584
+
4585
+ .zx-slider__mark.zx-o-vertical.zx-a-size-xs {
4586
+ width: calc(var(--size-selector) * 2);
4587
+ }
4588
+
4589
+ .zx-slider__mark.zx-o-vertical.zx-a-size-sm {
4590
+ width: calc(var(--size-selector) * 2.5);
4591
+ }
4592
+
4593
+ .zx-slider__mark.zx-o-vertical.zx-a-size-lg {
4594
+ width: calc(var(--size-selector) * 3.5);
4595
+ }
4596
+
4597
+ .zx-slider__mark.zx-o-vertical.zx-a-size-xl {
4598
+ width: calc(var(--size-selector) * 4);
3772
4599
  }
3773
4600
 
3774
4601
  .zx-slider__value-text {
@@ -3780,34 +4607,194 @@
3780
4607
  --slider-accent: var(--color-primary);
3781
4608
  }
3782
4609
 
4610
+ .zx-root .zx-slider__root.zx-a-color-primary {
4611
+ --slider-fill: #3c2cc0;
4612
+ }
4613
+
4614
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-primary {
4615
+ --slider-fill: #6b70ff;
4616
+ }
4617
+
4618
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-primary {
4619
+ --slider-fill: #a1e596;
4620
+ }
4621
+
4622
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-primary {
4623
+ --slider-fill: #5979a0;
4624
+ }
4625
+
4626
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-primary {
4627
+ --slider-fill: #f78d69;
4628
+ }
4629
+
3783
4630
  .zx-slider__root.zx-a-color-secondary {
3784
4631
  --slider-accent: var(--color-secondary);
3785
4632
  }
3786
4633
 
4634
+ .zx-root .zx-slider__root.zx-a-color-secondary {
4635
+ --slider-fill: #dc318a;
4636
+ }
4637
+
4638
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-secondary {
4639
+ --slider-fill: #f74fa2;
4640
+ }
4641
+
4642
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-secondary {
4643
+ --slider-fill: #f9876b;
4644
+ }
4645
+
4646
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-secondary {
4647
+ --slider-fill: #7895b3;
4648
+ }
4649
+
4650
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-secondary {
4651
+ --slider-fill: #f679a1;
4652
+ }
4653
+
3787
4654
  .zx-slider__root.zx-a-color-accent {
3788
4655
  --slider-accent: var(--color-accent);
3789
4656
  }
3790
4657
 
4658
+ .zx-root .zx-slider__root.zx-a-color-accent {
4659
+ --slider-fill: #1abea9;
4660
+ }
4661
+
4662
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-accent {
4663
+ --slider-fill: #41d7c2;
4664
+ }
4665
+
4666
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-accent {
4667
+ --slider-fill: #c598e7;
4668
+ }
4669
+
4670
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-accent {
4671
+ --slider-fill: #7eb1c0;
4672
+ }
4673
+
4674
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-accent {
4675
+ --slider-fill: #b18df6;
4676
+ }
4677
+
3791
4678
  .zx-slider__root.zx-a-color-neutral {
3792
4679
  --slider-accent: var(--color-neutral);
3793
4680
  }
3794
4681
 
4682
+ .zx-root .zx-slider__root.zx-a-color-neutral {
4683
+ --slider-fill: #0a0a0d;
4684
+ }
4685
+
4686
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-neutral {
4687
+ --slider-fill: #1b1b1e;
4688
+ }
4689
+
4690
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-neutral {
4691
+ --slider-fill: #29303a;
4692
+ }
4693
+
4694
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-neutral {
4695
+ --slider-fill: #495266;
4696
+ }
4697
+
4698
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-neutral {
4699
+ --slider-fill: #26333a;
4700
+ }
4701
+
3795
4702
  .zx-slider__root.zx-a-color-info {
3796
4703
  --slider-accent: var(--color-info);
3797
4704
  }
3798
4705
 
4706
+ .zx-root .zx-slider__root.zx-a-color-info {
4707
+ --slider-fill: #17a8e4;
4708
+ }
4709
+
4710
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-info {
4711
+ --slider-fill: #3dc1ff;
4712
+ }
4713
+
4714
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-info {
4715
+ --slider-fill: #48e8fb;
4716
+ }
4717
+
4718
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-info {
4719
+ --slider-fill: #a684a1;
4720
+ }
4721
+
4722
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-info {
4723
+ --slider-fill: #8cdce8;
4724
+ }
4725
+
3799
4726
  .zx-slider__root.zx-a-color-success {
3800
4727
  --slider-accent: var(--color-success);
3801
4728
  }
3802
4729
 
4730
+ .zx-root .zx-slider__root.zx-a-color-success {
4731
+ --slider-fill: #19be83;
4732
+ }
4733
+
4734
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-success {
4735
+ --slider-fill: #41d79b;
4736
+ }
4737
+
4738
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-success {
4739
+ --slider-fill: #6eecc0;
4740
+ }
4741
+
4742
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-success {
4743
+ --slider-fill: #96af85;
4744
+ }
4745
+
4746
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-success {
4747
+ --slider-fill: #acdbb1;
4748
+ }
4749
+
3803
4750
  .zx-slider__root.zx-a-color-warning {
3804
4751
  --slider-accent: var(--color-warning);
3805
4752
  }
3806
4753
 
4754
+ .zx-root .zx-slider__root.zx-a-color-warning {
4755
+ --slider-fill: #e2a519;
4756
+ }
4757
+
4758
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-warning {
4759
+ --slider-fill: #fbbe41;
4760
+ }
4761
+
4762
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-warning {
4763
+ --slider-fill: #e9d069;
4764
+ }
4765
+
4766
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-warning {
4767
+ --slider-fill: #d6bb84;
4768
+ }
4769
+
4770
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-warning {
4771
+ --slider-fill: #e9c799;
4772
+ }
4773
+
3807
4774
  .zx-slider__root.zx-a-color-error {
3808
4775
  --slider-accent: var(--color-error);
3809
4776
  }
3810
4777
 
4778
+ .zx-root .zx-slider__root.zx-a-color-error {
4779
+ --slider-fill: #e55b72;
4780
+ }
4781
+
4782
+ .zx-root.zx-theme-dark .zx-slider__root.zx-a-color-error {
4783
+ --slider-fill: #ff748a;
4784
+ }
4785
+
4786
+ .zx-root.zx-theme-dim .zx-slider__root.zx-a-color-error {
4787
+ --slider-fill: #f8b2a1;
4788
+ }
4789
+
4790
+ .zx-root.zx-theme-nord .zx-slider__root.zx-a-color-error {
4791
+ --slider-fill: #b05d66;
4792
+ }
4793
+
4794
+ .zx-root.zx-theme-sunset .zx-slider__root.zx-a-color-error {
4795
+ --slider-fill: #f6bbbf;
4796
+ }
4797
+
3811
4798
  .zx-slider__label.zx-a-size-xs {
3812
4799
  font-size: var(--text-xs);
3813
4800
  }
@@ -3872,8 +4859,14 @@
3872
4859
  }
3873
4860
 
3874
4861
  .zx-accordion__trigger.zx-f-focus-visible {
3875
- outline: 2px solid var(--color-base-content);
4862
+ outline: none;
3876
4863
  outline-offset: 2px;
4864
+ box-shadow: inset 0 0 0 2px var(--color-base-content);
4865
+ border-radius: calc(var(--radius-box) - var(--border));
4866
+ }
4867
+
4868
+ .zx-accordion__trigger.zx-f-pressed {
4869
+ background: var(--color-base-200);
3877
4870
  }
3878
4871
 
3879
4872
  .zx-accordion__panel {
@@ -4089,6 +5082,9 @@
4089
5082
  display: flex;
4090
5083
  flex-direction: column;
4091
5084
  position: relative;
5085
+ width: 20rem;
5086
+ max-width: 100%;
5087
+ min-width: 3rem;
4092
5088
  }
4093
5089
 
4094
5090
  .zx-select__trigger {
@@ -4108,9 +5104,11 @@
4108
5104
  cursor: pointer;
4109
5105
  transition: background var(--duration-normal) var(--ease-standard);
4110
5106
  box-sizing: border-box;
4111
- min-width: 13rem;
5107
+ min-width: 3rem;
4112
5108
  padding-left: calc(var(--size-field) * 4);
4113
5109
  padding-right: calc(var(--size-field) * 4);
5110
+ width: 100%;
5111
+ max-width: 100%;
4114
5112
  }
4115
5113
 
4116
5114
  .zx-select__trigger.zx-f-readonly {
@@ -4131,8 +5129,13 @@
4131
5129
  }
4132
5130
 
4133
5131
  .zx-select__trigger.zx-f-focus-visible {
4134
- outline: 2px solid var(--color-base-content);
5132
+ outline: none;
4135
5133
  outline-offset: 2px;
5134
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
5135
+ }
5136
+
5137
+ .zx-select__trigger.zx-f-pressed {
5138
+ background: var(--color-base-200);
4136
5139
  }
4137
5140
 
4138
5141
  .zx-root .zx-select__value.zx-f-placeholder {
@@ -4207,8 +5210,9 @@
4207
5210
  }
4208
5211
 
4209
5212
  .zx-select__clear-trigger.zx-f-focus-visible {
4210
- outline: 2px solid var(--color-base-content);
5213
+ outline: none;
4211
5214
  outline-offset: 2px;
5215
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
4212
5216
  }
4213
5217
 
4214
5218
  .zx-select__popup {
@@ -4222,6 +5226,7 @@
4222
5226
  box-shadow: var(--shadow-lg);
4223
5227
  padding: var(--space-md);
4224
5228
  min-width: 13rem;
5229
+ --select-accent: var(--color-primary);
4225
5230
  }
4226
5231
 
4227
5232
  .zx-select__popup.zx-s-open {
@@ -4270,6 +5275,10 @@
4270
5275
  cursor: not-allowed;
4271
5276
  }
4272
5277
 
5278
+ .zx-select__item.zx-f-pressed {
5279
+ background: var(--color-base-200);
5280
+ }
5281
+
4273
5282
  .zx-select__item-indicator {
4274
5283
  font-size: var(--text-xs);
4275
5284
  color: var(--select-accent);
@@ -4285,34 +5294,66 @@
4285
5294
  --select-accent: var(--color-primary);
4286
5295
  }
4287
5296
 
5297
+ .zx-select__popup.zx-a-color-primary {
5298
+ --select-accent: var(--color-primary);
5299
+ }
5300
+
4288
5301
  .zx-select__root.zx-a-color-secondary {
4289
5302
  --select-accent: var(--color-secondary);
4290
5303
  }
4291
5304
 
5305
+ .zx-select__popup.zx-a-color-secondary {
5306
+ --select-accent: var(--color-secondary);
5307
+ }
5308
+
4292
5309
  .zx-select__root.zx-a-color-accent {
4293
5310
  --select-accent: var(--color-accent);
4294
5311
  }
4295
5312
 
5313
+ .zx-select__popup.zx-a-color-accent {
5314
+ --select-accent: var(--color-accent);
5315
+ }
5316
+
4296
5317
  .zx-select__root.zx-a-color-neutral {
4297
5318
  --select-accent: var(--color-neutral);
4298
5319
  }
4299
5320
 
5321
+ .zx-select__popup.zx-a-color-neutral {
5322
+ --select-accent: var(--color-neutral);
5323
+ }
5324
+
4300
5325
  .zx-select__root.zx-a-color-info {
4301
5326
  --select-accent: var(--color-info);
4302
5327
  }
4303
5328
 
5329
+ .zx-select__popup.zx-a-color-info {
5330
+ --select-accent: var(--color-info);
5331
+ }
5332
+
4304
5333
  .zx-select__root.zx-a-color-success {
4305
5334
  --select-accent: var(--color-success);
4306
5335
  }
4307
5336
 
5337
+ .zx-select__popup.zx-a-color-success {
5338
+ --select-accent: var(--color-success);
5339
+ }
5340
+
4308
5341
  .zx-select__root.zx-a-color-warning {
4309
5342
  --select-accent: var(--color-warning);
4310
5343
  }
4311
5344
 
5345
+ .zx-select__popup.zx-a-color-warning {
5346
+ --select-accent: var(--color-warning);
5347
+ }
5348
+
4312
5349
  .zx-select__root.zx-a-color-error {
4313
5350
  --select-accent: var(--color-error);
4314
5351
  }
4315
5352
 
5353
+ .zx-select__popup.zx-a-color-error {
5354
+ --select-accent: var(--color-error);
5355
+ }
5356
+
4316
5357
  .zx-select__trigger.zx-a-size-xs {
4317
5358
  height: calc(var(--size-field) * 8);
4318
5359
  font-size: var(--text-xs);
@@ -4380,8 +5421,19 @@
4380
5421
  block-size: 1em;
4381
5422
  flex: none;
4382
5423
  border-radius: 9999px;
5424
+ border: 0 solid transparent;
4383
5425
  border-block-start-color: transparent;
4384
5426
  animation: zero-daisyui-btn-spin 0.7s linear infinite;
5427
+ width: 1em;
5428
+ height: 1em;
5429
+ border-top-width: calc(var(--border) * 2);
5430
+ border-right-width: calc(var(--border) * 2);
5431
+ border-bottom-width: calc(var(--border) * 2);
5432
+ border-left-width: calc(var(--border) * 2);
5433
+ border-right-color: var(--btn-ink);
5434
+ border-bottom-color: var(--btn-ink);
5435
+ border-left-color: var(--btn-ink);
5436
+ border-top-color: transparent;
4385
5437
  }
4386
5438
 
4387
5439
  .zx-button__root {
@@ -4391,7 +5443,7 @@
4391
5443
  align-items: center;
4392
5444
  justify-content: center;
4393
5445
  gap: 0.5em;
4394
- border: var(--border) solid transparent;
5446
+ border: 0 solid transparent;
4395
5447
  border-radius: var(--radius-field);
4396
5448
  box-shadow: var(--shadow-xs);
4397
5449
  font-family: inherit;
@@ -4399,6 +5451,13 @@
4399
5451
  line-height: var(--leading-none);
4400
5452
  cursor: pointer;
4401
5453
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
5454
+ width: max-content;
5455
+ flex-shrink: 0;
5456
+ flex-wrap: nowrap;
5457
+ border-top-width: var(--border);
5458
+ border-right-width: var(--border);
5459
+ border-bottom-width: var(--border);
5460
+ border-left-width: var(--border);
4402
5461
  }
4403
5462
 
4404
5463
  .zx-button__root.zx-s-loading {
@@ -4406,13 +5465,41 @@
4406
5465
  }
4407
5466
 
4408
5467
  .zx-button__root.zx-f-disabled {
4409
- opacity: var(--disabled-opacity);
5468
+ opacity: 1;
4410
5469
  cursor: not-allowed;
5470
+ border-color: transparent;
5471
+ box-shadow: none;
5472
+ }
5473
+
5474
+ .zx-root .zx-button__root.zx-f-disabled {
5475
+ background: #18181b19;
5476
+ color: #18181b80;
5477
+ }
5478
+
5479
+ .zx-root.zx-theme-dark .zx-button__root.zx-f-disabled {
5480
+ background: #ecf9ff19;
5481
+ color: #ecf9ff80;
5482
+ }
5483
+
5484
+ .zx-root.zx-theme-dim .zx-button__root.zx-f-disabled {
5485
+ background: #b2ccd619;
5486
+ color: #b2ccd680;
5487
+ }
5488
+
5489
+ .zx-root.zx-theme-nord .zx-button__root.zx-f-disabled {
5490
+ background: #2e344019;
5491
+ color: #2e344080;
5492
+ }
5493
+
5494
+ .zx-root.zx-theme-sunset .zx-button__root.zx-f-disabled {
5495
+ background: #9fb9d019;
5496
+ color: #9fb9d080;
4411
5497
  }
4412
5498
 
4413
5499
  .zx-button__root.zx-f-focus-visible {
4414
- outline: 2px solid var(--btn-ink);
5500
+ outline: none;
4415
5501
  outline-offset: 2px;
5502
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--btn-ink);
4416
5503
  }
4417
5504
 
4418
5505
  .zx-button__root.zx-f-pressed {
@@ -4633,10 +5720,24 @@
4633
5720
  color: var(--btn-on-accent);
4634
5721
  }
4635
5722
 
5723
+ .zx-button__spinner.zx-a-variant-solid {
5724
+ border-right-color: var(--btn-on-accent);
5725
+ border-bottom-color: var(--btn-on-accent);
5726
+ border-left-color: var(--btn-on-accent);
5727
+ }
5728
+
4636
5729
  .zx-button__root.zx-a-variant-outline {
4637
5730
  background: transparent;
4638
5731
  color: var(--btn-ink);
4639
- border-color: var(--btn-ink);
5732
+ border-color: transparent;
5733
+ border-top-color: var(--btn-ink);
5734
+ border-right-color: var(--btn-ink);
5735
+ border-bottom-color: var(--btn-ink);
5736
+ border-left-color: var(--btn-ink);
5737
+ }
5738
+
5739
+ .zx-button__root.zx-a-variant-outline.zx-f-disabled {
5740
+ border-color: transparent;
4640
5741
  }
4641
5742
 
4642
5743
  .zx-button__root.zx-a-variant-soft {
@@ -4649,11 +5750,23 @@
4649
5750
  color: var(--btn-ink);
4650
5751
  }
4651
5752
 
5753
+ .zx-button__root.zx-a-variant-ghost.zx-f-disabled {
5754
+ background: transparent;
5755
+ }
5756
+
4652
5757
  .zx-button__root.zx-a-variant-dash {
4653
5758
  background: transparent;
4654
5759
  color: var(--btn-ink);
4655
- border-color: var(--btn-ink);
5760
+ border-color: transparent;
4656
5761
  border-style: dashed;
5762
+ border-top-color: var(--btn-ink);
5763
+ border-right-color: var(--btn-ink);
5764
+ border-bottom-color: var(--btn-ink);
5765
+ border-left-color: var(--btn-ink);
5766
+ }
5767
+
5768
+ .zx-button__root.zx-a-variant-dash.zx-f-disabled {
5769
+ border-color: transparent;
4657
5770
  }
4658
5771
 
4659
5772
  .zx-button__root.zx-a-variant-link {
@@ -4664,47 +5777,80 @@
4664
5777
  box-shadow: none;
4665
5778
  }
4666
5779
 
5780
+ .zx-button__root.zx-a-variant-link.zx-f-disabled {
5781
+ background: transparent;
5782
+ }
5783
+
5784
+ .zx-button__root.zx-a-variant-link.zx-f-focus-visible {
5785
+ outline: none;
5786
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--btn-ink);
5787
+ }
5788
+
4667
5789
  .zx-button__root.zx-a-size-xs {
4668
5790
  height: calc(var(--size-field) * 6);
4669
- padding: var(--space-2xs) var(--space-xs);
5791
+ padding: 0;
4670
5792
  font-size: var(--text-xs);
5793
+ padding-top: var(--space-2xs);
5794
+ padding-bottom: var(--space-2xs);
5795
+ padding-right: var(--space-xs);
5796
+ padding-left: var(--space-xs);
4671
5797
  }
4672
5798
 
4673
5799
  .zx-button__root.zx-a-size-sm {
4674
5800
  height: calc(var(--size-field) * 8);
4675
- padding: var(--space-xs) var(--space-sm);
5801
+ padding: 0;
4676
5802
  font-size: var(--text-sm);
5803
+ padding-top: var(--space-xs);
5804
+ padding-bottom: var(--space-xs);
5805
+ padding-right: var(--space-sm);
5806
+ padding-left: var(--space-sm);
4677
5807
  }
4678
5808
 
4679
5809
  .zx-button__root.zx-a-size-md {
4680
5810
  height: calc(var(--size-field) * 10);
4681
- padding: var(--space-sm) var(--space-lg);
5811
+ padding: 0;
4682
5812
  font-size: var(--text-md);
5813
+ padding-top: var(--space-sm);
5814
+ padding-bottom: var(--space-sm);
5815
+ padding-right: var(--space-lg);
5816
+ padding-left: var(--space-lg);
4683
5817
  }
4684
5818
 
4685
5819
  .zx-button__root.zx-a-size-lg {
4686
5820
  height: calc(var(--size-field) * 12);
4687
- padding: var(--space-md) var(--space-xl);
5821
+ padding: 0;
4688
5822
  font-size: var(--text-lg);
5823
+ padding-top: var(--space-md);
5824
+ padding-bottom: var(--space-md);
5825
+ padding-right: var(--space-xl);
5826
+ padding-left: var(--space-xl);
4689
5827
  }
4690
5828
 
4691
5829
  .zx-button__root.zx-a-size-xl {
4692
5830
  height: calc(var(--size-field) * 14);
4693
- padding: var(--space-lg) var(--space-2xl);
5831
+ padding: 0;
4694
5832
  font-size: var(--text-xl);
5833
+ padding-top: var(--space-lg);
5834
+ padding-bottom: var(--space-lg);
5835
+ padding-right: var(--space-2xl);
5836
+ padding-left: var(--space-2xl);
4695
5837
  }
4696
5838
 
4697
5839
  .zx-button__root.zx-m-wide {
4698
5840
  inline-size: 100%;
4699
5841
  max-inline-size: 16rem;
5842
+ width: 100%;
5843
+ max-width: 16rem;
4700
5844
  }
4701
5845
 
4702
5846
  .zx-button__root.zx-m-block {
4703
5847
  inline-size: 100%;
5848
+ width: 100%;
4704
5849
  }
4705
5850
 
4706
5851
  .zx-button__root.zx-m-square {
4707
5852
  aspect-ratio: 1;
5853
+ width: auto;
4708
5854
  padding-left: 0;
4709
5855
  padding-right: 0;
4710
5856
  }
@@ -4712,6 +5858,7 @@
4712
5858
  .zx-button__root.zx-m-circle {
4713
5859
  aspect-ratio: 1;
4714
5860
  border-radius: 9999px;
5861
+ width: auto;
4715
5862
  padding-left: 0;
4716
5863
  padding-right: 0;
4717
5864
  }
@@ -4721,6 +5868,11 @@
4721
5868
  box-shadow: none;
4722
5869
  filter: brightness(0.92);
4723
5870
  }
5871
+
5872
+ .zx-button__root.zx-m-active.zx-f-focus-visible {
5873
+ outline: none;
5874
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--btn-ink);
5875
+ }
4724
5876
  @keyframes zero-daisyui-btn-spin {
4725
5877
  to { transform: rotate(360deg) }
4726
5878
  }
@@ -4845,6 +5997,7 @@
4845
5997
  --toast-bg: var(--color-base-200);
4846
5998
  --toast-ink: var(--color-base-content);
4847
5999
  --toast-from: 8px;
6000
+ --toast-mark: 1rem;
4848
6001
  }
4849
6002
 
4850
6003
  .zx-toast__viewport {
@@ -4855,52 +6008,62 @@
4855
6008
  border: none;
4856
6009
  background: transparent;
4857
6010
  overflow: visible;
6011
+ width: auto;
4858
6012
  list-style: none;
4859
6013
  flex-direction: column;
4860
6014
  gap: var(--space-sm);
4861
6015
  pointer-events: none;
6016
+ display: flex;
4862
6017
  }
4863
6018
 
4864
6019
  .zx-toast__viewport.zx-p-top-start {
4865
6020
  top: 0;
4866
6021
  left: 0;
6022
+ align-items: flex-start;
4867
6023
  }
4868
6024
 
4869
6025
  .zx-toast__viewport.zx-p-top {
4870
6026
  top: 0;
4871
- left: 50%;
4872
- transform: translateX(-50%);
6027
+ left: 0;
6028
+ transform: none;
6029
+ right: 0;
6030
+ align-items: center;
4873
6031
  }
4874
6032
 
4875
6033
  .zx-toast__viewport.zx-p-top-end {
4876
6034
  top: 0;
4877
6035
  right: 0;
6036
+ align-items: flex-end;
4878
6037
  }
4879
6038
 
4880
6039
  .zx-toast__viewport.zx-p-bottom-start {
4881
6040
  bottom: 0;
4882
6041
  flex-direction: column-reverse;
4883
6042
  left: 0;
6043
+ align-items: flex-start;
4884
6044
  }
4885
6045
 
4886
6046
  .zx-toast__viewport.zx-p-bottom {
4887
6047
  bottom: 0;
4888
- left: 50%;
4889
- transform: translateX(-50%);
6048
+ left: 0;
6049
+ transform: none;
4890
6050
  flex-direction: column-reverse;
6051
+ right: 0;
6052
+ align-items: center;
4891
6053
  }
4892
6054
 
4893
6055
  .zx-toast__viewport.zx-p-bottom-end {
4894
6056
  bottom: 0;
4895
6057
  flex-direction: column-reverse;
4896
6058
  right: 0;
6059
+ align-items: flex-end;
4897
6060
  }
4898
6061
 
4899
6062
  .zx-toast__root {
4900
6063
  pointer-events: auto;
4901
- display: grid;
6064
+ display: flex;
4902
6065
  grid-template-columns: 1fr auto auto;
4903
- align-items: center;
6066
+ align-items: flex-start;
4904
6067
  column-gap: var(--space-md);
4905
6068
  padding: var(--space-md) var(--space-lg);
4906
6069
  background: var(--toast-bg);
@@ -4911,6 +6074,11 @@
4911
6074
  opacity: 0;
4912
6075
  transform: translateY(var(--toast-from));
4913
6076
  transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
6077
+ flex-direction: column;
6078
+ position: relative;
6079
+ box-sizing: border-box;
6080
+ width: 100%;
6081
+ max-width: 24rem;
4914
6082
  }
4915
6083
 
4916
6084
  .zx-toast__root.zx-s-open {
@@ -4918,20 +6086,98 @@
4918
6086
  transform: none;
4919
6087
  }
4920
6088
 
6089
+ .zx-toast__root.zx-p-top-start {
6090
+ --toast-from: -8px;
6091
+ }
6092
+
6093
+ .zx-toast__root.zx-p-top {
6094
+ --toast-from: -8px;
6095
+ }
6096
+
6097
+ .zx-toast__root.zx-p-top-end {
6098
+ --toast-from: -8px;
6099
+ }
6100
+
6101
+ .zx-toast__indicator {
6102
+ grid-column: 1;
6103
+ grid-row: 1 / span 2;
6104
+ inline-size: var(--toast-mark);
6105
+ block-size: var(--toast-mark);
6106
+ box-sizing: border-box;
6107
+ }
6108
+
6109
+ .zx-toast__indicator.zx-s-loading {
6110
+ border-radius: 50%;
6111
+ border-block-start-color: var(--toast-ink);
6112
+ animation: zero-daisyui-toast-spin 0.75s linear infinite;
6113
+ }
6114
+
6115
+ .zx-toast__indicator.zx-s-complete {
6116
+ clip-path: polygon(15.1% 41.3%, 1% 55%, 37.6% 92.8%, 99% 19.8%, 83.9% 7.2%, 36.6% 63.5%);
6117
+ }
6118
+
6119
+ .zx-root .zx-toast__indicator.zx-s-complete {
6120
+ background: #2a7858;
6121
+ }
6122
+
6123
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-s-complete {
6124
+ background: #92e5c2;
6125
+ }
6126
+
6127
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-s-complete {
6128
+ background: #8ee0c9;
6129
+ }
6130
+
6131
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-s-complete {
6132
+ background: #6b7d6a;
6133
+ }
6134
+
6135
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-complete {
6136
+ background: #a6cebe;
6137
+ }
6138
+
6139
+ .zx-toast__indicator.zx-s-error {
6140
+ clip-path: polygon(20% 8%, 50% 38%, 80% 8%, 92% 20%, 62% 50%, 92% 80%, 80% 92%, 50% 62%, 20% 92%, 8% 80%, 38% 50%, 8% 20%);
6141
+ }
6142
+
6143
+ .zx-root .zx-toast__indicator.zx-s-error {
6144
+ background: #8f424e;
6145
+ }
6146
+
6147
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-s-error {
6148
+ background: #ffabb6;
6149
+ }
6150
+
6151
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-s-error {
6152
+ background: #e0bdb6;
6153
+ }
6154
+
6155
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-s-error {
6156
+ background: #7c4e57;
6157
+ }
6158
+
6159
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-error {
6160
+ background: #d6bbc6;
6161
+ }
6162
+
4921
6163
  .zx-toast__title {
4922
6164
  grid-column: 1;
4923
6165
  font-weight: var(--weight-semibold);
6166
+ padding-right: 1.75em;
4924
6167
  }
4925
6168
 
4926
6169
  .zx-toast__description {
4927
6170
  grid-column: 1;
4928
6171
  font-size: var(--text-xs);
6172
+ color: var(--toast-ink);
6173
+ opacity: 0.75;
4929
6174
  }
4930
6175
 
4931
6176
  .zx-toast__action {
4932
6177
  grid-column: 2;
4933
6178
  grid-row: 1;
4934
6179
  appearance: none;
6180
+ border: var(--border) solid var(--toast-ink);
4935
6181
  background: transparent;
4936
6182
  color: var(--toast-ink);
4937
6183
  border-radius: 9999px;
@@ -4939,6 +6185,7 @@
4939
6185
  font-size: var(--text-xs);
4940
6186
  font-weight: var(--weight-semibold);
4941
6187
  cursor: pointer;
6188
+ margin-top: var(--space-xs);
4942
6189
  }
4943
6190
 
4944
6191
  .zx-toast__action.zx-f-disabled {
@@ -4947,8 +6194,9 @@
4947
6194
  }
4948
6195
 
4949
6196
  .zx-toast__action.zx-f-focus-visible {
4950
- outline: 2px solid var(--color-base-content);
6197
+ outline: none;
4951
6198
  outline-offset: 2px;
6199
+ box-shadow: 0 0 0 2px var(--toast-bg), 0 0 0 4px var(--color-base-content);
4952
6200
  }
4953
6201
 
4954
6202
  .zx-toast__close {
@@ -4962,6 +6210,9 @@
4962
6210
  padding: var(--space-2xs) var(--space-xs);
4963
6211
  font-size: var(--text-xs);
4964
6212
  cursor: pointer;
6213
+ position: absolute;
6214
+ top: var(--space-xs);
6215
+ right: var(--space-xs);
4965
6216
  }
4966
6217
 
4967
6218
  .zx-toast__close.zx-f-disabled {
@@ -4969,8 +6220,9 @@
4969
6220
  }
4970
6221
 
4971
6222
  .zx-toast__close.zx-f-focus-visible {
4972
- outline: 2px solid var(--color-base-content);
6223
+ outline: none;
4973
6224
  outline-offset: 2px;
6225
+ box-shadow: 0 0 0 2px var(--toast-bg), 0 0 0 4px var(--color-base-content);
4974
6226
  }
4975
6227
 
4976
6228
  .zx-toast__root.zx-a-color-primary {
@@ -5040,6 +6292,9 @@
5040
6292
  .zx-toast__description.zx-a-size-xl {
5041
6293
  font-size: var(--text-md);
5042
6294
  }
6295
+ @keyframes zero-daisyui-toast-spin {
6296
+ to { transform: rotate(360deg); }
6297
+ }
5043
6298
 
5044
6299
  .zx-combobox__root {
5045
6300
  --combobox-accent: var(--color-primary);
@@ -6101,6 +7356,8 @@
6101
7356
  --tree-accent: var(--color-primary);
6102
7357
  --tree-text: var(--text-sm);
6103
7358
  --tree-on-accent: var(--color-primary-content);
7359
+ --tree-check: var(--tree-accent);
7360
+ --tree-on-check: var(--tree-on-accent);
6104
7361
  }
6105
7362
 
6106
7363
  .zx-tree-view__root {
@@ -6201,6 +7458,32 @@
6201
7458
  transform: rotate(45deg);
6202
7459
  }
6203
7460
 
7461
+ .zx-tree-view__node-checkbox {
7462
+ display: inline-block;
7463
+ position: relative;
7464
+ flex-shrink: 0;
7465
+ box-sizing: border-box;
7466
+ width: 1.25em;
7467
+ height: 1.25em;
7468
+ border: var(--border) solid var(--tree-check);
7469
+ border-radius: var(--radius-selector);
7470
+ box-shadow: 0 1px var(--depth-shade) inset;
7471
+ cursor: pointer;
7472
+ transition: background-color var(--duration-normal) var(--ease-standard);
7473
+ }
7474
+
7475
+ .zx-tree-view__node-checkbox.zx-s-checked {
7476
+ background-color: var(--tree-check);
7477
+ }
7478
+
7479
+ .zx-tree-view__node-checkbox.zx-s-indeterminate {
7480
+ background-color: var(--tree-check);
7481
+ }
7482
+
7483
+ .zx-tree-view__node-checkbox.zx-f-disabled {
7484
+ cursor: not-allowed;
7485
+ }
7486
+
6204
7487
  .zx-tree-view__branch-content {
6205
7488
  display: flex;
6206
7489
  flex-direction: column;
@@ -6735,6 +8018,15 @@
6735
8018
  overflow: hidden;
6736
8019
  }
6737
8020
 
8021
+ .zx-card__media {
8022
+ display: flex;
8023
+ align-items: center;
8024
+ justify-content: center;
8025
+ margin: 0;
8026
+ inline-size: 100%;
8027
+ object-fit: cover;
8028
+ }
8029
+
6738
8030
  .zx-card__header {
6739
8031
  display: flex;
6740
8032
  flex-direction: column;
@@ -7609,35 +8901,26 @@
7609
8901
  }
7610
8902
 
7611
8903
  .zx-divider__root {
8904
+ display: flex;
8905
+ align-items: center;
7612
8906
  border: none;
7613
- background: var(--divider-ink);
7614
8907
  align-self: stretch;
7615
8908
  }
7616
8909
 
7617
8910
  .zx-divider__root.zx-o-horizontal {
7618
8911
  inline-size: 100%;
7619
- block-size: var(--border);
7620
- }
7621
-
7622
- .zx-divider__root.zx-o-horizontal.zx-a-size-lg {
7623
- block-size: calc(var(--border) * 2);
7624
- }
7625
-
7626
- .zx-divider__root.zx-o-horizontal.zx-a-size-xl {
7627
- block-size: calc(var(--border) * 3);
7628
8912
  }
7629
8913
 
7630
8914
  .zx-divider__root.zx-o-vertical {
7631
- inline-size: var(--border);
8915
+ flex-direction: column;
7632
8916
  min-block-size: 1em;
7633
8917
  }
7634
8918
 
7635
- .zx-divider__root.zx-o-vertical.zx-a-size-lg {
7636
- inline-size: calc(var(--border) * 2);
7637
- }
7638
-
7639
- .zx-divider__root.zx-o-vertical.zx-a-size-xl {
7640
- inline-size: calc(var(--border) * 3);
8919
+ .zx-divider__label {
8920
+ flex: none;
8921
+ font-size: var(--text-sm);
8922
+ white-space: nowrap;
8923
+ color: var(--color-base-content);
7641
8924
  }
7642
8925
 
7643
8926
  .zx-divider__root.zx-a-color-primary {
@@ -8486,8 +9769,11 @@
8486
9769
  }
8487
9770
 
8488
9771
  .zx-timeline__item {
8489
- display: grid;
9772
+ display: flex;
8490
9773
  position: relative;
9774
+ flex-direction: row;
9775
+ flex-wrap: wrap;
9776
+ align-items: center;
8491
9777
  }
8492
9778
 
8493
9779
  .zx-timeline__item.zx-o-vertical {
@@ -8512,30 +9798,42 @@
8512
9798
  align-items: center;
8513
9799
  justify-content: center;
8514
9800
  font-size: 0;
9801
+ width: calc(var(--size-selector) * 3);
9802
+ height: calc(var(--size-selector) * 3);
9803
+ flex-grow: 0;
9804
+ flex-shrink: 0;
8515
9805
  }
8516
9806
 
8517
9807
  .zx-timeline__marker.zx-a-size-xs {
8518
9808
  inline-size: calc(var(--size-selector) * 2);
8519
9809
  block-size: calc(var(--size-selector) * 2);
8520
9810
  border: calc((var(--size-selector) * 2) / 6) solid var(--timeline-ring);
9811
+ width: calc(var(--size-selector) * 2);
9812
+ height: calc(var(--size-selector) * 2);
8521
9813
  }
8522
9814
 
8523
9815
  .zx-timeline__marker.zx-a-size-sm {
8524
9816
  inline-size: calc(var(--size-selector) * 2.5);
8525
9817
  block-size: calc(var(--size-selector) * 2.5);
8526
9818
  border: calc((var(--size-selector) * 2.5) / 6) solid var(--timeline-ring);
9819
+ width: calc(var(--size-selector) * 2.5);
9820
+ height: calc(var(--size-selector) * 2.5);
8527
9821
  }
8528
9822
 
8529
9823
  .zx-timeline__marker.zx-a-size-lg {
8530
9824
  inline-size: calc(var(--size-selector) * 3.5);
8531
9825
  block-size: calc(var(--size-selector) * 3.5);
8532
9826
  border: calc((var(--size-selector) * 3.5) / 6) solid var(--timeline-ring);
9827
+ width: calc(var(--size-selector) * 3.5);
9828
+ height: calc(var(--size-selector) * 3.5);
8533
9829
  }
8534
9830
 
8535
9831
  .zx-timeline__marker.zx-a-size-xl {
8536
9832
  inline-size: calc(var(--size-selector) * 4);
8537
9833
  block-size: calc(var(--size-selector) * 4);
8538
9834
  border: calc((var(--size-selector) * 4) / 6) solid var(--timeline-ring);
9835
+ width: calc(var(--size-selector) * 4);
9836
+ height: calc(var(--size-selector) * 4);
8539
9837
  }
8540
9838
 
8541
9839
  .zx-timeline__connector {
@@ -8549,6 +9847,31 @@
8549
9847
  inline-size: var(--border);
8550
9848
  min-block-size: var(--space-lg);
8551
9849
  block-size: 100%;
9850
+ flex-grow: 0;
9851
+ flex-shrink: 1;
9852
+ flex-basis: 100%;
9853
+ height: var(--space-lg);
9854
+ background: transparent;
9855
+ border-left-width: var(--border);
9856
+ border-left-style: solid;
9857
+ border-left-color: var(--color-base-300);
9858
+ margin-left: calc((var(--size-selector) * 3) / 2 - var(--border) / 2);
9859
+ }
9860
+
9861
+ .zx-timeline__connector.zx-o-vertical.zx-a-size-xs {
9862
+ margin-left: calc((var(--size-selector) * 2) / 2 - var(--border) / 2);
9863
+ }
9864
+
9865
+ .zx-timeline__connector.zx-o-vertical.zx-a-size-sm {
9866
+ margin-left: calc((var(--size-selector) * 2.5) / 2 - var(--border) / 2);
9867
+ }
9868
+
9869
+ .zx-timeline__connector.zx-o-vertical.zx-a-size-lg {
9870
+ margin-left: calc((var(--size-selector) * 3.5) / 2 - var(--border) / 2);
9871
+ }
9872
+
9873
+ .zx-timeline__connector.zx-o-vertical.zx-a-size-xl {
9874
+ margin-left: calc((var(--size-selector) * 4) / 2 - var(--border) / 2);
8552
9875
  }
8553
9876
 
8554
9877
  .zx-timeline__connector.zx-o-horizontal {
@@ -8558,6 +9881,12 @@
8558
9881
  block-size: var(--border);
8559
9882
  min-inline-size: var(--space-lg);
8560
9883
  inline-size: 100%;
9884
+ order: 1;
9885
+ flex-grow: 1;
9886
+ flex-shrink: 1;
9887
+ flex-basis: 0;
9888
+ height: var(--border);
9889
+ min-width: var(--space-lg);
8561
9890
  }
8562
9891
 
8563
9892
  .zx-timeline__content {
@@ -8575,24 +9904,67 @@
8575
9904
  grid-row: 1;
8576
9905
  justify-self: end;
8577
9906
  text-align: end;
9907
+ order: -1;
9908
+ flex-grow: 1;
9909
+ flex-shrink: 1;
9910
+ flex-basis: 0;
8578
9911
  }
8579
9912
 
8580
9913
  .zx-timeline__content.zx-o-vertical.zx-p-end {
8581
9914
  grid-column: 3;
8582
9915
  grid-row: 1;
8583
9916
  justify-self: start;
9917
+ flex-grow: 1;
9918
+ flex-shrink: 1;
9919
+ flex-basis: 0;
8584
9920
  }
8585
9921
 
8586
9922
  .zx-timeline__content.zx-o-horizontal.zx-p-start {
8587
9923
  grid-row: 1;
8588
9924
  grid-column: 1;
8589
9925
  align-self: end;
9926
+ order: -1;
9927
+ flex-basis: 100%;
8590
9928
  }
8591
9929
 
8592
9930
  .zx-timeline__content.zx-o-horizontal.zx-p-end {
8593
9931
  grid-row: 3;
8594
9932
  grid-column: 1;
8595
9933
  align-self: start;
9934
+ order: 2;
9935
+ flex-basis: 100%;
9936
+ }
9937
+
9938
+ .zx-timeline__title {
9939
+ display: block;
9940
+ margin: 0;
9941
+ font-weight: var(--weight-semibold);
9942
+ line-height: var(--leading-tight);
9943
+ }
9944
+
9945
+ .zx-timeline__description {
9946
+ display: block;
9947
+ margin: 0;
9948
+ }
9949
+
9950
+ .zx-root .zx-timeline__description {
9951
+ color: #18181bb3;
9952
+ }
9953
+
9954
+ .zx-root.zx-theme-dark .zx-timeline__description {
9955
+ color: #ecf9ffb3;
9956
+ }
9957
+
9958
+ .zx-root.zx-theme-dim .zx-timeline__description {
9959
+ color: #b2ccd6b3;
9960
+ }
9961
+
9962
+ .zx-root.zx-theme-nord .zx-timeline__description {
9963
+ color: #2e3440b3;
9964
+ }
9965
+
9966
+ .zx-root.zx-theme-sunset .zx-timeline__description {
9967
+ color: #9fb9d0b3;
8596
9968
  }
8597
9969
 
8598
9970
  .zx-timeline__marker.zx-a-color-primary {
@@ -8778,24 +10150,172 @@
8778
10150
  --chat-ink: var(--color-error-content);
8779
10151
  }
8780
10152
 
8781
- .zx-chat__bubble.zx-a-size-xs {
10153
+ .zx-chat__bubble.zx-a-size-xs {
10154
+ font-size: var(--text-xs);
10155
+ padding: var(--space-2xs) var(--space-sm);
10156
+ }
10157
+
10158
+ .zx-chat__bubble.zx-a-size-sm {
10159
+ font-size: var(--text-xs);
10160
+ padding: var(--space-xs) var(--space-md);
10161
+ }
10162
+
10163
+ .zx-chat__bubble.zx-a-size-lg {
10164
+ font-size: var(--text-md);
10165
+ padding: var(--space-md) var(--space-lg);
10166
+ }
10167
+
10168
+ .zx-chat__bubble.zx-a-size-xl {
10169
+ font-size: var(--text-lg);
10170
+ padding: var(--space-md) var(--space-xl);
10171
+ }
10172
+
10173
+ .zx-chat-log__root {
10174
+ --chat-log-fill: var(--color-primary);
10175
+ --chat-log-on-fill: var(--color-primary-content);
10176
+ }
10177
+
10178
+ .zx-chat-log__root {
10179
+ display: flex;
10180
+ flex-direction: column;
10181
+ overflow-y: auto;
10182
+ overscroll-behavior-y: contain;
10183
+ border-radius: var(--radius-box);
10184
+ background: var(--color-base-100);
10185
+ color: var(--color-base-content);
10186
+ border: var(--border) solid var(--color-base-300);
10187
+ padding: var(--space-sm) var(--space-md);
10188
+ }
10189
+
10190
+ .zx-chat-log__root.zx-f-focus-visible {
10191
+ outline: 2px solid var(--color-base-content);
10192
+ outline-offset: -2px;
10193
+ }
10194
+
10195
+ .zx-chat-log__content {
10196
+ flex: none;
10197
+ display: grid;
10198
+ row-gap: var(--space-xs);
10199
+ }
10200
+
10201
+ .zx-chat-log__jump-trigger {
10202
+ position: sticky;
10203
+ align-self: center;
10204
+ flex: none;
10205
+ block-size: calc(var(--size-field) * 8);
10206
+ appearance: none;
10207
+ display: flex;
10208
+ align-items: center;
10209
+ gap: var(--space-2xs);
10210
+ border: var(--border) solid transparent;
10211
+ border-radius: 9999px;
10212
+ background: var(--chat-log-fill);
10213
+ color: var(--chat-log-on-fill);
10214
+ box-shadow: var(--shadow-xs);
10215
+ font-family: inherit;
10216
+ font-size: var(--text-xs);
10217
+ font-weight: var(--weight-semibold);
10218
+ line-height: var(--leading-none);
10219
+ cursor: pointer;
10220
+ transition: background var(--duration-fast) var(--ease-standard);
10221
+ }
10222
+
10223
+ .zx-chat-log__jump-trigger.zx-a-size-xs {
10224
+ block-size: calc(var(--size-field) * 6);
10225
+ }
10226
+
10227
+ .zx-chat-log__jump-trigger.zx-a-size-sm {
10228
+ block-size: calc(var(--size-field) * 7);
10229
+ }
10230
+
10231
+ .zx-chat-log__jump-trigger.zx-a-size-lg {
10232
+ block-size: calc(var(--size-field) * 9);
10233
+ }
10234
+
10235
+ .zx-chat-log__jump-trigger.zx-a-size-xl {
10236
+ block-size: calc(var(--size-field) * 10);
10237
+ }
10238
+
10239
+ .zx-chat-log__jump-trigger.zx-f-focus-visible {
10240
+ outline: 2px solid var(--color-base-content);
10241
+ outline-offset: 2px;
10242
+ }
10243
+
10244
+ .zx-chat-log__jump-trigger.zx-f-pressed {
10245
+ transform: translateY(1px);
10246
+ box-shadow: none;
10247
+ }
10248
+
10249
+ .zx-chat-log__jump-trigger.zx-a-color-primary {
10250
+ --chat-log-fill: var(--color-primary);
10251
+ --chat-log-on-fill: var(--color-primary-content);
10252
+ }
10253
+
10254
+ .zx-chat-log__jump-trigger.zx-a-color-secondary {
10255
+ --chat-log-fill: var(--color-secondary);
10256
+ --chat-log-on-fill: var(--color-secondary-content);
10257
+ }
10258
+
10259
+ .zx-chat-log__jump-trigger.zx-a-color-accent {
10260
+ --chat-log-fill: var(--color-accent);
10261
+ --chat-log-on-fill: var(--color-accent-content);
10262
+ }
10263
+
10264
+ .zx-chat-log__jump-trigger.zx-a-color-neutral {
10265
+ --chat-log-fill: var(--color-neutral);
10266
+ --chat-log-on-fill: var(--color-neutral-content);
10267
+ }
10268
+
10269
+ .zx-chat-log__jump-trigger.zx-a-color-info {
10270
+ --chat-log-fill: var(--color-info);
10271
+ --chat-log-on-fill: var(--color-info-content);
10272
+ }
10273
+
10274
+ .zx-chat-log__jump-trigger.zx-a-color-success {
10275
+ --chat-log-fill: var(--color-success);
10276
+ --chat-log-on-fill: var(--color-success-content);
10277
+ }
10278
+
10279
+ .zx-chat-log__jump-trigger.zx-a-color-warning {
10280
+ --chat-log-fill: var(--color-warning);
10281
+ --chat-log-on-fill: var(--color-warning-content);
10282
+ }
10283
+
10284
+ .zx-chat-log__jump-trigger.zx-a-color-error {
10285
+ --chat-log-fill: var(--color-error);
10286
+ --chat-log-on-fill: var(--color-error-content);
10287
+ }
10288
+
10289
+ .zx-chat-log__content.zx-a-size-xs {
10290
+ row-gap: var(--space-2xs);
10291
+ }
10292
+
10293
+ .zx-chat-log__jump-trigger.zx-a-size-xs {
10294
+ font-size: var(--text-xs);
10295
+ }
10296
+
10297
+ .zx-chat-log__content.zx-a-size-sm {
10298
+ row-gap: var(--space-2xs);
10299
+ }
10300
+
10301
+ .zx-chat-log__jump-trigger.zx-a-size-sm {
8782
10302
  font-size: var(--text-xs);
8783
- padding: var(--space-2xs) var(--space-sm);
8784
10303
  }
8785
10304
 
8786
- .zx-chat__bubble.zx-a-size-sm {
8787
- font-size: var(--text-xs);
8788
- padding: var(--space-xs) var(--space-md);
10305
+ .zx-chat-log__content.zx-a-size-lg {
10306
+ row-gap: var(--space-sm);
8789
10307
  }
8790
10308
 
8791
- .zx-chat__bubble.zx-a-size-lg {
8792
- font-size: var(--text-md);
8793
- padding: var(--space-md) var(--space-lg);
10309
+ .zx-chat-log__jump-trigger.zx-a-size-lg {
10310
+ font-size: var(--text-sm);
8794
10311
  }
8795
10312
 
8796
- .zx-chat__bubble.zx-a-size-xl {
8797
- font-size: var(--text-lg);
8798
- padding: var(--space-md) var(--space-xl);
10313
+ .zx-chat-log__content.zx-a-size-xl {
10314
+ row-gap: var(--space-md);
10315
+ }
10316
+
10317
+ .zx-chat-log__jump-trigger.zx-a-size-xl {
10318
+ font-size: var(--text-sm);
8799
10319
  }
8800
10320
 
8801
10321
  .zx-radial-progress__root {
@@ -9460,6 +10980,50 @@
9460
10980
  color: #9fb9d066;
9461
10981
  }
9462
10982
 
10983
+ .zx-breadcrumbs__ellipsis {
10984
+ display: flex;
10985
+ align-items: center;
10986
+ gap: var(--space-xs);
10987
+ }
10988
+
10989
+ .zx-breadcrumbs__ellipsis-trigger {
10990
+ appearance: none;
10991
+ background: transparent;
10992
+ border: 0;
10993
+ padding: 0 var(--space-2xs);
10994
+ margin: 0;
10995
+ font: inherit;
10996
+ line-height: inherit;
10997
+ border-radius: var(--radius-selector);
10998
+ cursor: pointer;
10999
+ transition: color var(--duration-fast) var(--ease-standard);
11000
+ }
11001
+
11002
+ .zx-root .zx-breadcrumbs__ellipsis-trigger {
11003
+ color: #18181bbf;
11004
+ }
11005
+
11006
+ .zx-root.zx-theme-dark .zx-breadcrumbs__ellipsis-trigger {
11007
+ color: #ecf9ffbf;
11008
+ }
11009
+
11010
+ .zx-root.zx-theme-dim .zx-breadcrumbs__ellipsis-trigger {
11011
+ color: #b2ccd6bf;
11012
+ }
11013
+
11014
+ .zx-root.zx-theme-nord .zx-breadcrumbs__ellipsis-trigger {
11015
+ color: #2e3440bf;
11016
+ }
11017
+
11018
+ .zx-root.zx-theme-sunset .zx-breadcrumbs__ellipsis-trigger {
11019
+ color: #9fb9d0bf;
11020
+ }
11021
+
11022
+ .zx-breadcrumbs__ellipsis-trigger.zx-f-focus-visible {
11023
+ outline: 2px solid var(--color-primary);
11024
+ outline-offset: 2px;
11025
+ }
11026
+
9463
11027
  .zx-root .zx-breadcrumbs__root.zx-a-color-primary {
9464
11028
  --bc-accent: #3f2bcb;
9465
11029
  }
@@ -9666,6 +11230,7 @@
9666
11230
  font-weight: var(--weight-semibold);
9667
11231
  font-variant-numeric: tabular-nums;
9668
11232
  appearance: none;
11233
+ text-decoration: none;
9669
11234
  cursor: pointer;
9670
11235
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
9671
11236
  padding-left: var(--space-2xs);
@@ -9761,6 +11326,58 @@
9761
11326
  color: #9fb9d0a6;
9762
11327
  }
9763
11328
 
11329
+ .zx-pagination__first-trigger {
11330
+ display: flex;
11331
+ align-items: center;
11332
+ justify-content: center;
11333
+ min-inline-size: calc(var(--size-field) * 10);
11334
+ block-size: calc(var(--size-field) * 10);
11335
+ background: var(--color-base-200);
11336
+ color: var(--color-base-content);
11337
+ border: none;
11338
+ border-radius: var(--radius-field);
11339
+ font-size: calc(var(--pg-font) * 1.2);
11340
+ line-height: var(--leading-none);
11341
+ appearance: none;
11342
+ text-decoration: none;
11343
+ cursor: pointer;
11344
+ transition: background var(--duration-fast) var(--ease-standard);
11345
+ }
11346
+
11347
+ .zx-pagination__first-trigger.zx-a-size-xs {
11348
+ min-inline-size: calc(var(--size-field) * 7);
11349
+ block-size: calc(var(--size-field) * 7);
11350
+ }
11351
+
11352
+ .zx-pagination__first-trigger.zx-a-size-sm {
11353
+ min-inline-size: calc(var(--size-field) * 9);
11354
+ block-size: calc(var(--size-field) * 9);
11355
+ }
11356
+
11357
+ .zx-pagination__first-trigger.zx-a-size-lg {
11358
+ min-inline-size: calc(var(--size-field) * 12);
11359
+ block-size: calc(var(--size-field) * 12);
11360
+ }
11361
+
11362
+ .zx-pagination__first-trigger.zx-a-size-xl {
11363
+ min-inline-size: calc(var(--size-field) * 14);
11364
+ block-size: calc(var(--size-field) * 14);
11365
+ }
11366
+
11367
+ .zx-pagination__first-trigger.zx-f-disabled {
11368
+ opacity: var(--disabled-opacity);
11369
+ cursor: not-allowed;
11370
+ }
11371
+
11372
+ .zx-pagination__first-trigger.zx-f-focus-visible {
11373
+ outline: 2px solid var(--color-base-content);
11374
+ outline-offset: 2px;
11375
+ }
11376
+
11377
+ .zx-pagination__first-trigger.zx-f-pressed {
11378
+ transform: translateY(1px);
11379
+ }
11380
+
9764
11381
  .zx-pagination__prev-trigger {
9765
11382
  display: flex;
9766
11383
  align-items: center;
@@ -9774,6 +11391,7 @@
9774
11391
  font-size: calc(var(--pg-font) * 1.2);
9775
11392
  line-height: var(--leading-none);
9776
11393
  appearance: none;
11394
+ text-decoration: none;
9777
11395
  cursor: pointer;
9778
11396
  transition: background var(--duration-fast) var(--ease-standard);
9779
11397
  }
@@ -9825,6 +11443,7 @@
9825
11443
  font-size: calc(var(--pg-font) * 1.2);
9826
11444
  line-height: var(--leading-none);
9827
11445
  appearance: none;
11446
+ text-decoration: none;
9828
11447
  cursor: pointer;
9829
11448
  transition: background var(--duration-fast) var(--ease-standard);
9830
11449
  }
@@ -9863,6 +11482,58 @@
9863
11482
  transform: translateY(1px);
9864
11483
  }
9865
11484
 
11485
+ .zx-pagination__last-trigger {
11486
+ display: flex;
11487
+ align-items: center;
11488
+ justify-content: center;
11489
+ min-inline-size: calc(var(--size-field) * 10);
11490
+ block-size: calc(var(--size-field) * 10);
11491
+ background: var(--color-base-200);
11492
+ color: var(--color-base-content);
11493
+ border: none;
11494
+ border-radius: var(--radius-field);
11495
+ font-size: calc(var(--pg-font) * 1.2);
11496
+ line-height: var(--leading-none);
11497
+ appearance: none;
11498
+ text-decoration: none;
11499
+ cursor: pointer;
11500
+ transition: background var(--duration-fast) var(--ease-standard);
11501
+ }
11502
+
11503
+ .zx-pagination__last-trigger.zx-a-size-xs {
11504
+ min-inline-size: calc(var(--size-field) * 7);
11505
+ block-size: calc(var(--size-field) * 7);
11506
+ }
11507
+
11508
+ .zx-pagination__last-trigger.zx-a-size-sm {
11509
+ min-inline-size: calc(var(--size-field) * 9);
11510
+ block-size: calc(var(--size-field) * 9);
11511
+ }
11512
+
11513
+ .zx-pagination__last-trigger.zx-a-size-lg {
11514
+ min-inline-size: calc(var(--size-field) * 12);
11515
+ block-size: calc(var(--size-field) * 12);
11516
+ }
11517
+
11518
+ .zx-pagination__last-trigger.zx-a-size-xl {
11519
+ min-inline-size: calc(var(--size-field) * 14);
11520
+ block-size: calc(var(--size-field) * 14);
11521
+ }
11522
+
11523
+ .zx-pagination__last-trigger.zx-f-disabled {
11524
+ opacity: var(--disabled-opacity);
11525
+ cursor: not-allowed;
11526
+ }
11527
+
11528
+ .zx-pagination__last-trigger.zx-f-focus-visible {
11529
+ outline: 2px solid var(--color-base-content);
11530
+ outline-offset: 2px;
11531
+ }
11532
+
11533
+ .zx-pagination__last-trigger.zx-f-pressed {
11534
+ transform: translateY(1px);
11535
+ }
11536
+
9866
11537
  .zx-pagination__root.zx-a-color-primary {
9867
11538
  --pg-accent: var(--color-primary);
9868
11539
  --pg-accent-content: var(--color-primary-content);
@@ -9990,6 +11661,26 @@
9990
11661
  color: #9fb9d0a6;
9991
11662
  }
9992
11663
 
11664
+ .zx-root .zx-steps__item.zx-f-invalid {
11665
+ color: #b34d5e;
11666
+ }
11667
+
11668
+ .zx-root.zx-theme-dark .zx-steps__item.zx-f-invalid {
11669
+ color: #ff95a3;
11670
+ }
11671
+
11672
+ .zx-root.zx-theme-dim .zx-steps__item.zx-f-invalid {
11673
+ color: #eab8ad;
11674
+ }
11675
+
11676
+ .zx-root.zx-theme-nord .zx-steps__item.zx-f-invalid {
11677
+ color: #92555e;
11678
+ }
11679
+
11680
+ .zx-root.zx-theme-sunset .zx-steps__item.zx-f-invalid {
11681
+ color: #e4bbc3;
11682
+ }
11683
+
9993
11684
  .zx-steps__item.zx-f-disabled {
9994
11685
  opacity: var(--disabled-opacity);
9995
11686
  cursor: not-allowed;
@@ -10071,6 +11762,11 @@
10071
11762
  color: var(--color-base-content);
10072
11763
  }
10073
11764
 
11765
+ .zx-steps__indicator.zx-f-invalid {
11766
+ background: var(--color-error);
11767
+ color: var(--color-error-content);
11768
+ }
11769
+
10074
11770
  .zx-steps__separator {
10075
11771
  position: absolute;
10076
11772
  pointer-events: none;
@@ -10085,6 +11781,10 @@
10085
11781
  background: var(--color-base-300);
10086
11782
  }
10087
11783
 
11784
+ .zx-steps__separator.zx-f-invalid {
11785
+ background: var(--color-error);
11786
+ }
11787
+
10088
11788
  .zx-steps__separator.zx-o-horizontal {
10089
11789
  inline-size: 100%;
10090
11790
  block-size: var(--border);
@@ -10164,6 +11864,80 @@
10164
11864
  color: #9fb9d0b3;
10165
11865
  }
10166
11866
 
11867
+ .zx-steps__content {
11868
+ flex: 1 0 100%;
11869
+ font-size: var(--text-md);
11870
+ color: var(--color-base-content);
11871
+ }
11872
+
11873
+ .zx-steps__prev-trigger {
11874
+ appearance: none;
11875
+ display: flex;
11876
+ align-items: center;
11877
+ justify-content: center;
11878
+ gap: 0.5em;
11879
+ height: calc(var(--size-field) * 12);
11880
+ font-size: var(--text-sm);
11881
+ font-weight: var(--weight-semibold);
11882
+ color: var(--color-base-content);
11883
+ background: var(--color-base-200);
11884
+ border: var(--border) solid var(--color-base-300);
11885
+ border-radius: var(--radius-field);
11886
+ box-shadow: var(--shadow-xs);
11887
+ cursor: pointer;
11888
+ transition: background var(--duration-normal) var(--ease-standard);
11889
+ flex: 0 0 auto;
11890
+ align-self: flex-start;
11891
+ }
11892
+
11893
+ .zx-steps__prev-trigger.zx-f-disabled {
11894
+ opacity: var(--disabled-opacity);
11895
+ cursor: not-allowed;
11896
+ }
11897
+
11898
+ .zx-steps__prev-trigger.zx-f-focus-visible {
11899
+ outline: 2px solid var(--color-base-content);
11900
+ outline-offset: 2px;
11901
+ }
11902
+
11903
+ .zx-steps__prev-trigger.zx-f-pressed {
11904
+ transform: translateY(1px);
11905
+ }
11906
+
11907
+ .zx-steps__next-trigger {
11908
+ appearance: none;
11909
+ display: flex;
11910
+ align-items: center;
11911
+ justify-content: center;
11912
+ gap: 0.5em;
11913
+ height: calc(var(--size-field) * 12);
11914
+ font-size: var(--text-sm);
11915
+ font-weight: var(--weight-semibold);
11916
+ color: var(--color-base-content);
11917
+ background: var(--color-base-200);
11918
+ border: var(--border) solid var(--color-base-300);
11919
+ border-radius: var(--radius-field);
11920
+ box-shadow: var(--shadow-xs);
11921
+ cursor: pointer;
11922
+ transition: background var(--duration-normal) var(--ease-standard);
11923
+ flex: 0 0 auto;
11924
+ align-self: flex-start;
11925
+ }
11926
+
11927
+ .zx-steps__next-trigger.zx-f-disabled {
11928
+ opacity: var(--disabled-opacity);
11929
+ cursor: not-allowed;
11930
+ }
11931
+
11932
+ .zx-steps__next-trigger.zx-f-focus-visible {
11933
+ outline: 2px solid var(--color-base-content);
11934
+ outline-offset: 2px;
11935
+ }
11936
+
11937
+ .zx-steps__next-trigger.zx-f-pressed {
11938
+ transform: translateY(1px);
11939
+ }
11940
+
10167
11941
  .zx-steps__item.zx-a-color-primary {
10168
11942
  --steps-accent: var(--color-primary);
10169
11943
  --steps-accent-content: var(--color-primary-content);
@@ -10760,6 +12534,58 @@
10760
12534
  padding: var(--space-lg) var(--table-pad-inline);
10761
12535
  }
10762
12536
 
12537
+ .zx-table__sort-trigger {
12538
+ appearance: none;
12539
+ display: flex;
12540
+ align-items: center;
12541
+ margin: 0;
12542
+ border: 0;
12543
+ font: inherit;
12544
+ letter-spacing: inherit;
12545
+ text-transform: inherit;
12546
+ text-align: inherit;
12547
+ cursor: pointer;
12548
+ gap: var(--space-2xs);
12549
+ padding: 0;
12550
+ border-radius: var(--radius-selector);
12551
+ background: transparent;
12552
+ color: inherit;
12553
+ transition: color var(--duration-fast) var(--ease-standard);
12554
+ }
12555
+
12556
+ .zx-table__sort-trigger.zx-s-ascending {
12557
+ color: var(--table-accent);
12558
+ }
12559
+
12560
+ .zx-table__sort-trigger.zx-s-descending {
12561
+ color: var(--table-accent);
12562
+ }
12563
+
12564
+ .zx-table__sort-trigger.zx-f-disabled {
12565
+ cursor: not-allowed;
12566
+ opacity: var(--disabled-opacity);
12567
+ }
12568
+
12569
+ .zx-table__sort-trigger.zx-f-focus-visible {
12570
+ outline: 2px solid var(--color-base-content);
12571
+ outline-offset: 2px;
12572
+ }
12573
+
12574
+ .zx-table__sort-indicator {
12575
+ display: inline-block;
12576
+ font-size: 0.75em;
12577
+ line-height: 1;
12578
+ transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
12579
+ }
12580
+
12581
+ .zx-table__sort-indicator.zx-s-descending {
12582
+ transform: rotate(180deg);
12583
+ }
12584
+
12585
+ .zx-table__sort-indicator.zx-s-none {
12586
+ opacity: 0;
12587
+ }
12588
+
10763
12589
  .zx-table__cell {
10764
12590
  padding: var(--space-sm) var(--table-pad-inline);
10765
12591
  text-align: var(--table-cell-align);