@sigx/zero-daisyui 0.5.0 → 0.6.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 (106) hide show
  1. package/README.md +61 -1
  2. package/dist/audit.json +6763 -3228
  3. package/dist/components.d.ts +14 -2
  4. package/dist/components.js +1 -0
  5. package/dist/css/components/accordion.css +26 -2
  6. package/dist/css/components/alert.css +2 -0
  7. package/dist/css/components/avatar.css +2 -0
  8. package/dist/css/components/badge.css +2 -0
  9. package/dist/css/components/box.css +2 -0
  10. package/dist/css/components/breadcrumbs.css +2 -0
  11. package/dist/css/components/button.css +2 -0
  12. package/dist/css/components/card.css +2 -0
  13. package/dist/css/components/carousel.css +2 -0
  14. package/dist/css/components/center.css +2 -0
  15. package/dist/css/components/chat.css +2 -0
  16. package/dist/css/components/checkbox-group.css +98 -0
  17. package/dist/css/components/checkbox.css +10 -0
  18. package/dist/css/components/collapsible.css +16 -2
  19. package/dist/css/components/combobox.css +36 -1
  20. package/dist/css/components/container.css +2 -0
  21. package/dist/css/components/countdown.css +2 -0
  22. package/dist/css/components/dialog.css +2 -0
  23. package/dist/css/components/diff.css +7 -0
  24. package/dist/css/components/divider.css +2 -0
  25. package/dist/css/components/drawer.css +2 -0
  26. package/dist/css/components/empty-state.css +2 -0
  27. package/dist/css/components/field.css +2 -0
  28. package/dist/css/components/file-upload.css +34 -0
  29. package/dist/css/components/grid.css +2 -0
  30. package/dist/css/components/indicator.css +2 -0
  31. package/dist/css/components/input.css +137 -0
  32. package/dist/css/components/join.css +2 -0
  33. package/dist/css/components/kbd.css +2 -0
  34. package/dist/css/components/menu.css +2 -0
  35. package/dist/css/components/nav-list.css +2 -0
  36. package/dist/css/components/navbar.css +2 -0
  37. package/dist/css/components/number-input.css +2 -0
  38. package/dist/css/components/pagination.css +6 -0
  39. package/dist/css/components/popover.css +2 -0
  40. package/dist/css/components/progress.css +2 -0
  41. package/dist/css/components/radial-progress.css +2 -0
  42. package/dist/css/components/radio-group.css +10 -4
  43. package/dist/css/components/rating-group.css +2 -0
  44. package/dist/css/components/select.css +54 -1
  45. package/dist/css/components/skeleton.css +2 -0
  46. package/dist/css/components/slider.css +154 -25
  47. package/dist/css/components/spacer.css +2 -0
  48. package/dist/css/components/spinner.css +2 -0
  49. package/dist/css/components/stack.css +2 -0
  50. package/dist/css/components/stats.css +68 -16
  51. package/dist/css/components/status.css +2 -0
  52. package/dist/css/components/steps.css +2 -0
  53. package/dist/css/components/swap.css +2 -0
  54. package/dist/css/components/switch.css +23 -0
  55. package/dist/css/components/table.css +7 -0
  56. package/dist/css/components/tabs.css +15 -0
  57. package/dist/css/components/textarea.css +2 -0
  58. package/dist/css/components/timeline.css +3 -0
  59. package/dist/css/components/toast.css +2 -0
  60. package/dist/css/components/toggle-group.css +2 -0
  61. package/dist/css/components/toggle.css +2 -0
  62. package/dist/css/components/tooltip.css +2 -0
  63. package/dist/css/components/tree-view.css +6 -0
  64. package/dist/css/index.css +688 -64
  65. package/dist/css/tokens.css +13 -13
  66. package/dist/lynx/components/accordion.css +5 -0
  67. package/dist/lynx/components/alert.css +20 -0
  68. package/dist/lynx/components/button.css +5 -0
  69. package/dist/lynx/components/checkbox-group.css +209 -0
  70. package/dist/lynx/components/checkbox.css +8 -0
  71. package/dist/lynx/components/combobox.css +46 -0
  72. package/dist/lynx/components/diff.css +5 -0
  73. package/dist/lynx/components/drawer.css +4 -0
  74. package/dist/lynx/components/file-upload.css +47 -0
  75. package/dist/lynx/components/input.css +178 -0
  76. package/dist/lynx/components/number-input.css +8 -0
  77. package/dist/lynx/components/pagination.css +16 -0
  78. package/dist/lynx/components/progress.css +4 -4
  79. package/dist/lynx/components/radio-group.css +8 -0
  80. package/dist/lynx/components/rating-group.css +3 -3
  81. package/dist/lynx/components/select.css +58 -0
  82. package/dist/lynx/components/slider.css +106 -25
  83. package/dist/lynx/components/stats.css +146 -16
  84. package/dist/lynx/components/steps.css +4 -0
  85. package/dist/lynx/components/switch.css +4 -0
  86. package/dist/lynx/components/table.css +5 -0
  87. package/dist/lynx/components/tabs.css +13 -0
  88. package/dist/lynx/components/timeline.css +26 -0
  89. package/dist/lynx/components/toggle.css +5 -0
  90. package/dist/lynx/components/tree-view.css +4 -0
  91. package/dist/lynx/index.css +984 -94
  92. package/dist/lynx/manifest.json +40 -5
  93. package/dist/lynx/tokens.css +4 -4
  94. package/dist/manifest.json +38 -3
  95. package/dist/recipes.d.ts +7 -0
  96. package/dist/recipes.d.ts.map +1 -1
  97. package/dist/recipes.js +638 -60
  98. package/dist/recipes.js.map +1 -1
  99. package/dist/register.d.ts +9 -0
  100. package/dist/report.json +597 -211
  101. package/dist/tokens.d.ts.map +1 -1
  102. package/dist/tokens.js +18 -4
  103. package/dist/tokens.js.map +1 -1
  104. package/package.json +5 -5
  105. package/src/recipes.ts +647 -61
  106. package/src/tokens.ts +18 -4
@@ -17,7 +17,7 @@
17
17
  --color-primary: #422ad5;
18
18
  --color-primary-content: #e0e7ff;
19
19
  --color-secondary: #f43098;
20
- --color-secondary-content: #f9e4f0;
20
+ --color-secondary-content: #291a23;
21
21
  --color-accent: #00d3bb;
22
22
  --color-accent-content: #084d49;
23
23
  --color-neutral: #09090b;
@@ -94,7 +94,7 @@
94
94
  --color-primary: #422ad5;
95
95
  --color-primary-content: #e0e7ff;
96
96
  --color-secondary: #f43098;
97
- --color-secondary-content: #f9e4f0;
97
+ --color-secondary-content: #291a23;
98
98
  --color-accent: #00d3bb;
99
99
  --color-accent-content: #084d49;
100
100
  --color-neutral: #09090b;
@@ -169,9 +169,9 @@
169
169
 
170
170
  .zx-root.zx-theme-dark {
171
171
  --color-primary: #605dff;
172
- --color-primary-content: #edf1fe;
172
+ --color-primary-content: #fafbff;
173
173
  --color-secondary: #f43098;
174
- --color-secondary-content: #f9e4f0;
174
+ --color-secondary-content: #291a23;
175
175
  --color-accent: #00d3bb;
176
176
  --color-accent-content: #084d49;
177
177
  --color-neutral: #09090b;
@@ -633,6 +633,10 @@
633
633
  max-inline-size: var(--l-measure);
634
634
  }
635
635
 
636
+ .zx-tabs__root {
637
+ --tabs-ring-room: 4px;
638
+ }
639
+
636
640
  .zx-tabs__root {
637
641
  display: flex;
638
642
  flex-direction: column;
@@ -642,6 +646,11 @@
642
646
  .zx-tabs__list {
643
647
  display: flex;
644
648
  align-self: flex-start;
649
+ box-sizing: border-box;
650
+ max-inline-size: 100%;
651
+ overflow-x: auto;
652
+ padding: var(--tabs-ring-room);
653
+ scroll-padding-inline: var(--tabs-ring-room);
645
654
  }
646
655
 
647
656
  .zx-tabs__tab {
@@ -693,6 +702,10 @@
693
702
  outline-offset: 2px;
694
703
  }
695
704
 
705
+ .zx-tabs__indicator {
706
+ display: none;
707
+ }
708
+
696
709
  .zx-tabs__panel {
697
710
  font-size: var(--text-md);
698
711
  }
@@ -1394,6 +1407,10 @@
1394
1407
  flex-direction: row;
1395
1408
  }
1396
1409
 
1410
+ .zx-switch__root.zx-f-readonly {
1411
+ cursor: default;
1412
+ }
1413
+
1397
1414
  .zx-switch__root.zx-f-disabled {
1398
1415
  opacity: var(--disabled-opacity);
1399
1416
  cursor: not-allowed;
@@ -2738,6 +2755,10 @@
2738
2755
  cursor: pointer;
2739
2756
  }
2740
2757
 
2758
+ .zx-checkbox__root.zx-f-readonly {
2759
+ cursor: default;
2760
+ }
2761
+
2741
2762
  .zx-checkbox__root.zx-f-disabled {
2742
2763
  opacity: var(--disabled-opacity);
2743
2764
  cursor: not-allowed;
@@ -2800,6 +2821,10 @@
2800
2821
  border-color: var(--color-error);
2801
2822
  }
2802
2823
 
2824
+ .zx-checkbox__control.zx-f-readonly {
2825
+ cursor: default;
2826
+ }
2827
+
2803
2828
  .zx-checkbox__indicator {
2804
2829
  display: block;
2805
2830
  width: 100%;
@@ -2910,6 +2935,216 @@
2910
2935
  font-size: var(--text-lg);
2911
2936
  }
2912
2937
 
2938
+ .zx-checkbox-group__root {
2939
+ --checkbox-group-accent: var(--color-base-content);
2940
+ }
2941
+
2942
+ .zx-checkbox-group__root {
2943
+ display: flex;
2944
+ flex-direction: column;
2945
+ gap: var(--space-md);
2946
+ }
2947
+
2948
+ .zx-checkbox-group__root.zx-o-horizontal {
2949
+ flex-direction: row;
2950
+ flex-wrap: wrap;
2951
+ column-gap: var(--space-lg);
2952
+ }
2953
+
2954
+ .zx-checkbox-group__label {
2955
+ font-size: var(--text-sm);
2956
+ font-weight: var(--weight-semibold);
2957
+ color: var(--checkbox-group-accent);
2958
+ }
2959
+
2960
+ .zx-checkbox-group__label.zx-f-disabled {
2961
+ opacity: var(--disabled-opacity);
2962
+ }
2963
+
2964
+ .zx-root .zx-checkbox-group__root.zx-a-color-primary {
2965
+ --checkbox-group-accent: #3f2bcb;
2966
+ }
2967
+
2968
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-primary {
2969
+ --checkbox-group-accent: #6567ff;
2970
+ }
2971
+
2972
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-primary {
2973
+ --checkbox-group-accent: #a0e791;
2974
+ }
2975
+
2976
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-primary {
2977
+ --checkbox-group-accent: #5c7da6;
2978
+ }
2979
+
2980
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-primary {
2981
+ --checkbox-group-accent: #fb8a62;
2982
+ }
2983
+
2984
+ .zx-root .zx-checkbox-group__root.zx-a-color-secondary {
2985
+ --checkbox-group-accent: #ad316f;
2986
+ }
2987
+
2988
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-secondary {
2989
+ --checkbox-group-accent: #fa7cb6;
2990
+ }
2991
+
2992
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-secondary {
2993
+ --checkbox-group-accent: #ed9984;
2994
+ }
2995
+
2996
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-secondary {
2997
+ --checkbox-group-accent: #677e98;
2998
+ }
2999
+
3000
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-secondary {
3001
+ --checkbox-group-accent: #e68aac;
3002
+ }
3003
+
3004
+ .zx-root .zx-checkbox-group__root.zx-a-color-accent {
3005
+ --checkbox-group-accent: #2b786d;
3006
+ }
3007
+
3008
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-accent {
3009
+ --checkbox-group-accent: #93e5d9;
3010
+ }
3011
+
3012
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-accent {
3013
+ --checkbox-group-accent: #bfade1;
3014
+ }
3015
+
3016
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-accent {
3017
+ --checkbox-group-accent: #5e7d8c;
3018
+ }
3019
+
3020
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-accent {
3021
+ --checkbox-group-accent: #ab9fe8;
3022
+ }
3023
+
3024
+ .zx-root .zx-checkbox-group__root.zx-a-color-neutral {
3025
+ --checkbox-group-accent: #121214;
3026
+ }
3027
+
3028
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-neutral {
3029
+ --checkbox-group-accent: #878e92;
3030
+ }
3031
+
3032
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-neutral {
3033
+ --checkbox-group-accent: #71828c;
3034
+ }
3035
+
3036
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-neutral {
3037
+ --checkbox-group-accent: #3a4150;
3038
+ }
3039
+
3040
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-neutral {
3041
+ --checkbox-group-accent: #667a8a;
3042
+ }
3043
+
3044
+ .zx-root .zx-checkbox-group__root.zx-a-color-info {
3045
+ --checkbox-group-accent: #2685b3;
3046
+ }
3047
+
3048
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-info {
3049
+ --checkbox-group-accent: #70ceff;
3050
+ }
3051
+
3052
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-info {
3053
+ --checkbox-group-accent: #6ce2f3;
3054
+ }
3055
+
3056
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-info {
3057
+ --checkbox-group-accent: #89728a;
3058
+ }
3059
+
3060
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-info {
3061
+ --checkbox-group-accent: #91d4e3;
3062
+ }
3063
+
3064
+ .zx-root .zx-checkbox-group__root.zx-a-color-success {
3065
+ --checkbox-group-accent: #2a7858;
3066
+ }
3067
+
3068
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-success {
3069
+ --checkbox-group-accent: #92e5c2;
3070
+ }
3071
+
3072
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-success {
3073
+ --checkbox-group-accent: #8ee0c9;
3074
+ }
3075
+
3076
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-success {
3077
+ --checkbox-group-accent: #6b7d6a;
3078
+ }
3079
+
3080
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-success {
3081
+ --checkbox-group-accent: #a6cebe;
3082
+ }
3083
+
3084
+ .zx-root .zx-checkbox-group__root.zx-a-color-warning {
3085
+ --checkbox-group-accent: #755a2b;
3086
+ }
3087
+
3088
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-warning {
3089
+ --checkbox-group-accent: #f5ddac;
3090
+ }
3091
+
3092
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-warning {
3093
+ --checkbox-group-accent: #cecfa6;
3094
+ }
3095
+
3096
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-warning {
3097
+ --checkbox-group-accent: #7d7463;
3098
+ }
3099
+
3100
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-warning {
3101
+ --checkbox-group-accent: #c5c1b7;
3102
+ }
3103
+
3104
+ .zx-root .zx-checkbox-group__root.zx-a-color-error {
3105
+ --checkbox-group-accent: #d9576d;
3106
+ }
3107
+
3108
+ .zx-root.zx-theme-dark .zx-checkbox-group__root.zx-a-color-error {
3109
+ --checkbox-group-accent: #ff7d90;
3110
+ }
3111
+
3112
+ .zx-root.zx-theme-dim .zx-checkbox-group__root.zx-a-color-error {
3113
+ --checkbox-group-accent: #f5b3a4;
3114
+ }
3115
+
3116
+ .zx-root.zx-theme-nord .zx-checkbox-group__root.zx-a-color-error {
3117
+ --checkbox-group-accent: #a85b64;
3118
+ }
3119
+
3120
+ .zx-root.zx-theme-sunset .zx-checkbox-group__root.zx-a-color-error {
3121
+ --checkbox-group-accent: #f2bbc0;
3122
+ }
3123
+
3124
+ .zx-checkbox-group__root.zx-a-size-xs {
3125
+ gap: var(--space-sm);
3126
+ }
3127
+
3128
+ .zx-checkbox-group__label.zx-a-size-xs {
3129
+ font-size: var(--text-xs);
3130
+ }
3131
+
3132
+ .zx-checkbox-group__label.zx-a-size-sm {
3133
+ font-size: var(--text-xs);
3134
+ }
3135
+
3136
+ .zx-checkbox-group__label.zx-a-size-lg {
3137
+ font-size: var(--text-md);
3138
+ }
3139
+
3140
+ .zx-checkbox-group__root.zx-a-size-xl {
3141
+ gap: var(--space-lg);
3142
+ }
3143
+
3144
+ .zx-checkbox-group__label.zx-a-size-xl {
3145
+ font-size: var(--text-lg);
3146
+ }
3147
+
2913
3148
  .zx-radio-group__root {
2914
3149
  --radio-pad: 0.25rem;
2915
3150
  --radio-accent: var(--color-primary);
@@ -2937,6 +3172,10 @@
2937
3172
  cursor: pointer;
2938
3173
  }
2939
3174
 
3175
+ .zx-radio-group__item.zx-f-readonly {
3176
+ cursor: default;
3177
+ }
3178
+
2940
3179
  .zx-radio-group__item.zx-f-disabled {
2941
3180
  opacity: var(--disabled-opacity);
2942
3181
  cursor: not-allowed;
@@ -2984,6 +3223,10 @@
2984
3223
  animation: var(--duration-fast) var(--ease-standard) zero-daisy-radio;
2985
3224
  }
2986
3225
 
3226
+ .zx-radio-group__item-control.zx-f-invalid {
3227
+ border-color: var(--color-error);
3228
+ }
3229
+
2987
3230
  .zx-radio-group__item-control.zx-f-focus-visible {
2988
3231
  outline: 2px solid var(--radio-accent);
2989
3232
  outline-offset: 2px;
@@ -3090,7 +3333,7 @@
3090
3333
  }
3091
3334
 
3092
3335
  .zx-root.zx-theme-dark .zx-progress__root {
3093
- --progress-accent: #6b6fff;
3336
+ --progress-accent: #6c70ff;
3094
3337
  }
3095
3338
 
3096
3339
  .zx-root.zx-theme-dim .zx-progress__root {
@@ -3183,7 +3426,7 @@
3183
3426
  }
3184
3427
 
3185
3428
  .zx-root.zx-theme-dark .zx-progress__root.zx-a-color-primary {
3186
- --progress-accent: #6b6fff;
3429
+ --progress-accent: #6c70ff;
3187
3430
  }
3188
3431
 
3189
3432
  .zx-root.zx-theme-dim .zx-progress__root.zx-a-color-primary {
@@ -3199,11 +3442,11 @@
3199
3442
  }
3200
3443
 
3201
3444
  .zx-root .zx-progress__root.zx-a-color-secondary {
3202
- --progress-accent: #f74ca0;
3445
+ --progress-accent: #de318b;
3203
3446
  }
3204
3447
 
3205
3448
  .zx-root.zx-theme-dark .zx-progress__root.zx-a-color-secondary {
3206
- --progress-accent: #f74ca0;
3449
+ --progress-accent: #de318b;
3207
3450
  }
3208
3451
 
3209
3452
  .zx-root.zx-theme-dim .zx-progress__root.zx-a-color-secondary {
@@ -3362,9 +3605,34 @@
3362
3605
  }
3363
3606
 
3364
3607
  .zx-slider__control {
3608
+ appearance: none;
3365
3609
  width: 100%;
3366
- accent-color: var(--slider-accent);
3610
+ height: calc(var(--size-selector) * 6);
3611
+ margin: 0;
3612
+ background: transparent;
3367
3613
  cursor: pointer;
3614
+ outline: none;
3615
+ accent-color: var(--slider-accent);
3616
+ }
3617
+
3618
+ .zx-slider__control.zx-a-size-xs {
3619
+ height: calc(var(--size-selector) * 4);
3620
+ }
3621
+
3622
+ .zx-slider__control.zx-a-size-sm {
3623
+ height: calc(var(--size-selector) * 5);
3624
+ }
3625
+
3626
+ .zx-slider__control.zx-a-size-lg {
3627
+ height: calc(var(--size-selector) * 7);
3628
+ }
3629
+
3630
+ .zx-slider__control.zx-a-size-xl {
3631
+ height: calc(var(--size-selector) * 8);
3632
+ }
3633
+
3634
+ .zx-slider__control.zx-f-readonly {
3635
+ cursor: default;
3368
3636
  }
3369
3637
 
3370
3638
  .zx-slider__control.zx-f-disabled {
@@ -3377,16 +3645,44 @@
3377
3645
  }
3378
3646
 
3379
3647
  .zx-slider__control.zx-f-invalid {
3380
- accent-color: var(--color-error);
3648
+ --slider-accent: var(--color-error);
3381
3649
  }
3382
3650
 
3383
3651
  .zx-slider__track {
3384
- height: calc(var(--size-selector) * 2);
3652
+ height: calc(var(--size-selector) * 3);
3385
3653
  border-radius: 9999px;
3386
3654
  background: var(--color-base-300);
3387
3655
  cursor: pointer;
3388
- margin-top: calc(var(--size-selector) * 1.5);
3389
- margin-bottom: calc(var(--size-selector) * 1.5);
3656
+ margin-top: calc(((var(--size-selector) * 6) - (var(--size-selector) * 3)) / 2);
3657
+ margin-bottom: calc(((var(--size-selector) * 6) - (var(--size-selector) * 3)) / 2);
3658
+ }
3659
+
3660
+ .zx-slider__track.zx-a-size-xs {
3661
+ height: calc(var(--size-selector) * 2);
3662
+ margin-top: calc(((var(--size-selector) * 4) - (var(--size-selector) * 2)) / 2);
3663
+ margin-bottom: calc(((var(--size-selector) * 4) - (var(--size-selector) * 2)) / 2);
3664
+ }
3665
+
3666
+ .zx-slider__track.zx-a-size-sm {
3667
+ height: calc(var(--size-selector) * 2.5);
3668
+ margin-top: calc(((var(--size-selector) * 5) - (var(--size-selector) * 2.5)) / 2);
3669
+ margin-bottom: calc(((var(--size-selector) * 5) - (var(--size-selector) * 2.5)) / 2);
3670
+ }
3671
+
3672
+ .zx-slider__track.zx-a-size-lg {
3673
+ height: calc(var(--size-selector) * 3.5);
3674
+ margin-top: calc(((var(--size-selector) * 7) - (var(--size-selector) * 3.5)) / 2);
3675
+ margin-bottom: calc(((var(--size-selector) * 7) - (var(--size-selector) * 3.5)) / 2);
3676
+ }
3677
+
3678
+ .zx-slider__track.zx-a-size-xl {
3679
+ height: calc(var(--size-selector) * 4);
3680
+ margin-top: calc(((var(--size-selector) * 8) - (var(--size-selector) * 4)) / 2);
3681
+ margin-bottom: calc(((var(--size-selector) * 8) - (var(--size-selector) * 4)) / 2);
3682
+ }
3683
+
3684
+ .zx-slider__track.zx-f-readonly {
3685
+ cursor: default;
3390
3686
  }
3391
3687
 
3392
3688
  .zx-slider__track.zx-f-disabled {
@@ -3401,8 +3697,8 @@
3401
3697
 
3402
3698
  .zx-slider__thumb {
3403
3699
  box-sizing: border-box;
3404
- width: calc(var(--size-selector) * 5);
3405
- height: calc(var(--size-selector) * 5);
3700
+ width: calc(var(--size-selector) * 6);
3701
+ height: calc(var(--size-selector) * 6);
3406
3702
  border-radius: 9999px;
3407
3703
  background: var(--color-base-100);
3408
3704
  cursor: pointer;
@@ -3411,7 +3707,31 @@
3411
3707
  border: 0.25rem solid var(--slider-accent);
3412
3708
  top: 50%;
3413
3709
  transform: translateY(-50%);
3414
- margin-left: calc(var(--size-selector) * -2.5);
3710
+ margin-left: calc((var(--size-selector) * 6) / -2);
3711
+ }
3712
+
3713
+ .zx-slider__thumb.zx-a-size-xs {
3714
+ width: calc(var(--size-selector) * 4);
3715
+ height: calc(var(--size-selector) * 4);
3716
+ margin-left: calc((var(--size-selector) * 4) / -2);
3717
+ }
3718
+
3719
+ .zx-slider__thumb.zx-a-size-sm {
3720
+ width: calc(var(--size-selector) * 5);
3721
+ height: calc(var(--size-selector) * 5);
3722
+ margin-left: calc((var(--size-selector) * 5) / -2);
3723
+ }
3724
+
3725
+ .zx-slider__thumb.zx-a-size-lg {
3726
+ width: calc(var(--size-selector) * 7);
3727
+ height: calc(var(--size-selector) * 7);
3728
+ margin-left: calc((var(--size-selector) * 7) / -2);
3729
+ }
3730
+
3731
+ .zx-slider__thumb.zx-a-size-xl {
3732
+ width: calc(var(--size-selector) * 8);
3733
+ height: calc(var(--size-selector) * 8);
3734
+ margin-left: calc((var(--size-selector) * 8) / -2);
3415
3735
  }
3416
3736
 
3417
3737
  .zx-slider__thumb.zx-f-focus-visible {
@@ -3419,6 +3739,10 @@
3419
3739
  outline-offset: 2px;
3420
3740
  }
3421
3741
 
3742
+ .zx-slider__thumb.zx-f-readonly {
3743
+ cursor: default;
3744
+ }
3745
+
3422
3746
  .zx-slider__thumb.zx-f-disabled {
3423
3747
  cursor: not-allowed;
3424
3748
  }
@@ -3428,7 +3752,23 @@
3428
3752
  line-height: 1;
3429
3753
  white-space: nowrap;
3430
3754
  opacity: 0.6;
3431
- padding-top: calc(var(--size-selector) * 2 + var(--space-2xs));
3755
+ padding-top: calc((var(--size-selector) * 3) + var(--space-2xs));
3756
+ }
3757
+
3758
+ .zx-slider__mark.zx-a-size-xs {
3759
+ padding-top: calc((var(--size-selector) * 2) + var(--space-2xs));
3760
+ }
3761
+
3762
+ .zx-slider__mark.zx-a-size-sm {
3763
+ padding-top: calc((var(--size-selector) * 2.5) + var(--space-2xs));
3764
+ }
3765
+
3766
+ .zx-slider__mark.zx-a-size-lg {
3767
+ padding-top: calc((var(--size-selector) * 3.5) + var(--space-2xs));
3768
+ }
3769
+
3770
+ .zx-slider__mark.zx-a-size-xl {
3771
+ padding-top: calc((var(--size-selector) * 4) + var(--space-2xs));
3432
3772
  }
3433
3773
 
3434
3774
  .zx-slider__value-text {
@@ -3468,18 +3808,10 @@
3468
3808
  --slider-accent: var(--color-error);
3469
3809
  }
3470
3810
 
3471
- .zx-slider__control.zx-a-size-xs {
3472
- height: calc(var(--size-selector) * 3);
3473
- }
3474
-
3475
3811
  .zx-slider__label.zx-a-size-xs {
3476
3812
  font-size: var(--text-xs);
3477
3813
  }
3478
3814
 
3479
- .zx-slider__control.zx-a-size-sm {
3480
- height: calc(var(--size-selector) * 4);
3481
- }
3482
-
3483
3815
  .zx-slider__label.zx-a-size-sm {
3484
3816
  font-size: var(--text-sm);
3485
3817
  }
@@ -3488,18 +3820,10 @@
3488
3820
  font-size: var(--text-sm);
3489
3821
  }
3490
3822
 
3491
- .zx-slider__control.zx-a-size-lg {
3492
- height: calc(var(--size-selector) * 7);
3493
- }
3494
-
3495
3823
  .zx-slider__label.zx-a-size-lg {
3496
3824
  font-size: var(--text-md);
3497
3825
  }
3498
3826
 
3499
- .zx-slider__control.zx-a-size-xl {
3500
- height: calc(var(--size-selector) * 8);
3501
- }
3502
-
3503
3827
  .zx-slider__label.zx-a-size-xl {
3504
3828
  font-size: var(--text-lg);
3505
3829
  }
@@ -3514,6 +3838,11 @@
3514
3838
  gap: var(--space-md);
3515
3839
  }
3516
3840
 
3841
+ .zx-accordion__root.zx-o-horizontal {
3842
+ flex-direction: row;
3843
+ align-items: start;
3844
+ }
3845
+
3517
3846
  .zx-accordion__item {
3518
3847
  interpolate-size: allow-keywords;
3519
3848
  border: var(--border) solid var(--color-base-300);
@@ -3759,6 +4088,7 @@
3759
4088
  .zx-select__root {
3760
4089
  display: flex;
3761
4090
  flex-direction: column;
4091
+ position: relative;
3762
4092
  }
3763
4093
 
3764
4094
  .zx-select__trigger {
@@ -3783,6 +4113,10 @@
3783
4113
  padding-right: calc(var(--size-field) * 4);
3784
4114
  }
3785
4115
 
4116
+ .zx-select__trigger.zx-f-readonly {
4117
+ cursor: default;
4118
+ }
4119
+
3786
4120
  .zx-select__trigger.zx-f-disabled {
3787
4121
  opacity: var(--disabled-opacity);
3788
4122
  cursor: not-allowed;
@@ -3830,6 +4164,53 @@
3830
4164
  transform: rotate(180deg);
3831
4165
  }
3832
4166
 
4167
+ .zx-select__clear-trigger {
4168
+ appearance: none;
4169
+ position: absolute;
4170
+ min-inline-size: 1.5rem;
4171
+ display: flex;
4172
+ align-items: center;
4173
+ justify-content: center;
4174
+ padding: 0 var(--space-xs);
4175
+ border: none;
4176
+ background: transparent;
4177
+ font: inherit;
4178
+ font-size: var(--text-sm);
4179
+ line-height: var(--leading-none);
4180
+ border-radius: var(--radius-field);
4181
+ cursor: pointer;
4182
+ transition: background var(--duration-fast) var(--ease-standard);
4183
+ top: var(--space-xs);
4184
+ bottom: var(--space-xs);
4185
+ right: calc(var(--size-field) * 4 + 1em + var(--space-xs));
4186
+ min-width: 1.5rem;
4187
+ }
4188
+
4189
+ .zx-root .zx-select__clear-trigger {
4190
+ color: #18181bb3;
4191
+ }
4192
+
4193
+ .zx-root.zx-theme-dark .zx-select__clear-trigger {
4194
+ color: #ecf9ffb3;
4195
+ }
4196
+
4197
+ .zx-root.zx-theme-dim .zx-select__clear-trigger {
4198
+ color: #b2ccd6b3;
4199
+ }
4200
+
4201
+ .zx-root.zx-theme-nord .zx-select__clear-trigger {
4202
+ color: #2e3440b3;
4203
+ }
4204
+
4205
+ .zx-root.zx-theme-sunset .zx-select__clear-trigger {
4206
+ color: #9fb9d0b3;
4207
+ }
4208
+
4209
+ .zx-select__clear-trigger.zx-f-focus-visible {
4210
+ outline: 2px solid var(--color-base-content);
4211
+ outline-offset: 2px;
4212
+ }
4213
+
3833
4214
  .zx-select__popup {
3834
4215
  opacity: 0;
3835
4216
  transform: translateY(-4px);
@@ -3894,6 +4275,12 @@
3894
4275
  color: var(--select-accent);
3895
4276
  }
3896
4277
 
4278
+ .zx-select__separator {
4279
+ height: var(--border);
4280
+ margin: var(--space-sm) var(--space-md);
4281
+ background: var(--color-base-300);
4282
+ }
4283
+
3897
4284
  .zx-select__root.zx-a-color-primary {
3898
4285
  --select-accent: var(--color-primary);
3899
4286
  }
@@ -4028,6 +4415,11 @@
4028
4415
  outline-offset: 2px;
4029
4416
  }
4030
4417
 
4418
+ .zx-button__root.zx-f-pressed {
4419
+ transform: translateY(1px);
4420
+ box-shadow: none;
4421
+ }
4422
+
4031
4423
  .zx-button__root.zx-a-color-primary {
4032
4424
  --btn-accent: var(--color-primary);
4033
4425
  --btn-on-accent: var(--color-primary-content);
@@ -4751,6 +5143,26 @@
4751
5143
  outline-offset: 2px;
4752
5144
  }
4753
5145
 
5146
+ .zx-root .zx-combobox__tag-remove.zx-f-pressed {
5147
+ background: #18181b2e;
5148
+ }
5149
+
5150
+ .zx-root.zx-theme-dark .zx-combobox__tag-remove.zx-f-pressed {
5151
+ background: #ecf9ff2e;
5152
+ }
5153
+
5154
+ .zx-root.zx-theme-dim .zx-combobox__tag-remove.zx-f-pressed {
5155
+ background: #b2ccd62e;
5156
+ }
5157
+
5158
+ .zx-root.zx-theme-nord .zx-combobox__tag-remove.zx-f-pressed {
5159
+ background: #2e34402e;
5160
+ }
5161
+
5162
+ .zx-root.zx-theme-sunset .zx-combobox__tag-remove.zx-f-pressed {
5163
+ background: #9fb9d02e;
5164
+ }
5165
+
4754
5166
  .zx-combobox__trigger {
4755
5167
  appearance: none;
4756
5168
  border: none;
@@ -4770,6 +5182,19 @@
4770
5182
  cursor: not-allowed;
4771
5183
  }
4772
5184
 
5185
+ .zx-combobox__clear-trigger {
5186
+ appearance: none;
5187
+ border: none;
5188
+ background: transparent;
5189
+ color: inherit;
5190
+ font: inherit;
5191
+ opacity: 0.6;
5192
+ padding: 0 var(--space-xs);
5193
+ line-height: var(--leading-none);
5194
+ cursor: pointer;
5195
+ transition: opacity var(--duration-fast) var(--ease-standard);
5196
+ }
5197
+
4773
5198
  .zx-combobox__popup {
4774
5199
  opacity: 0;
4775
5200
  transform: translateY(-4px);
@@ -4839,6 +5264,19 @@
4839
5264
  opacity: 0.6;
4840
5265
  }
4841
5266
 
5267
+ .zx-combobox__loading {
5268
+ padding: var(--space-lg);
5269
+ font-size: var(--text-sm);
5270
+ text-align: center;
5271
+ opacity: 0.6;
5272
+ }
5273
+
5274
+ .zx-combobox__separator {
5275
+ height: var(--border);
5276
+ margin: var(--space-sm) var(--space-md);
5277
+ background: var(--color-base-300);
5278
+ }
5279
+
4842
5280
  .zx-combobox__root.zx-a-color-primary {
4843
5281
  --combobox-accent: var(--color-primary);
4844
5282
  }
@@ -4956,6 +5394,11 @@
4956
5394
  outline-offset: 2px;
4957
5395
  }
4958
5396
 
5397
+ .zx-toggle__root.zx-f-pressed {
5398
+ transform: translateY(1px);
5399
+ box-shadow: none;
5400
+ }
5401
+
4959
5402
  .zx-toggle__root.zx-a-color-primary {
4960
5403
  --toggle-accent: var(--color-primary);
4961
5404
  --toggle-on-accent: var(--color-primary-content);
@@ -5250,6 +5693,10 @@
5250
5693
  cursor: not-allowed;
5251
5694
  }
5252
5695
 
5696
+ .zx-number-input__increment-trigger.zx-f-pressed {
5697
+ background: var(--color-base-300);
5698
+ }
5699
+
5253
5700
  .zx-number-input__decrement-trigger {
5254
5701
  appearance: none;
5255
5702
  border: none;
@@ -5272,6 +5719,10 @@
5272
5719
  cursor: not-allowed;
5273
5720
  }
5274
5721
 
5722
+ .zx-number-input__decrement-trigger.zx-f-pressed {
5723
+ background: var(--color-base-300);
5724
+ }
5725
+
5275
5726
  .zx-number-input__root.zx-a-color-primary {
5276
5727
  --number-input-accent: var(--color-primary);
5277
5728
  }
@@ -5491,7 +5942,7 @@
5491
5942
  }
5492
5943
 
5493
5944
  .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-primary {
5494
- --rating-fill: #848fff;
5945
+ --rating-fill: #8792ff;
5495
5946
  }
5496
5947
 
5497
5948
  .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-primary {
@@ -5507,11 +5958,11 @@
5507
5958
  }
5508
5959
 
5509
5960
  .zx-root .zx-rating-group__root.zx-a-color-secondary {
5510
- --rating-fill: #fb74b2;
5961
+ --rating-fill: #b23072;
5511
5962
  }
5512
5963
 
5513
5964
  .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-secondary {
5514
- --rating-fill: #fb74b2;
5965
+ --rating-fill: #b23072;
5515
5966
  }
5516
5967
 
5517
5968
  .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-secondary {
@@ -5746,6 +6197,10 @@
5746
6197
  transform: rotate(90deg);
5747
6198
  }
5748
6199
 
6200
+ .zx-tree-view__branch-indicator.zx-s-loading {
6201
+ transform: rotate(45deg);
6202
+ }
6203
+
5749
6204
  .zx-tree-view__branch-content {
5750
6205
  display: flex;
5751
6206
  flex-direction: column;
@@ -5823,73 +6278,203 @@
5823
6278
  font-weight: var(--weight-semibold);
5824
6279
  }
5825
6280
 
5826
- .zx-input__label.zx-f-disabled {
5827
- opacity: var(--disabled-opacity);
6281
+ .zx-input__label.zx-f-disabled {
6282
+ opacity: var(--disabled-opacity);
6283
+ }
6284
+
6285
+ .zx-root .zx-input__label.zx-f-invalid {
6286
+ color: #d9576d;
6287
+ }
6288
+
6289
+ .zx-root.zx-theme-dark .zx-input__label.zx-f-invalid {
6290
+ color: #ff7d90;
6291
+ }
6292
+
6293
+ .zx-root.zx-theme-dim .zx-input__label.zx-f-invalid {
6294
+ color: #f5b3a4;
6295
+ }
6296
+
6297
+ .zx-root.zx-theme-nord .zx-input__label.zx-f-invalid {
6298
+ color: #a85b64;
6299
+ }
6300
+
6301
+ .zx-root.zx-theme-sunset .zx-input__label.zx-f-invalid {
6302
+ color: #f2bbc0;
6303
+ }
6304
+
6305
+ .zx-input__control {
6306
+ display: flex;
6307
+ align-items: stretch;
6308
+ gap: var(--space-2xs);
6309
+ box-sizing: border-box;
6310
+ height: calc(var(--size-field) * 12);
6311
+ background: var(--color-base-100);
6312
+ border: var(--border) solid var(--color-base-300);
6313
+ border-radius: var(--radius-field);
6314
+ box-shadow: var(--shadow-xs);
6315
+ overflow: hidden;
6316
+ transition: border-color var(--duration-fast) var(--ease-standard);
6317
+ }
6318
+
6319
+ .zx-input__control.zx-f-invalid {
6320
+ border-color: var(--color-error);
6321
+ }
6322
+
6323
+ .zx-input__control.zx-f-disabled {
6324
+ opacity: var(--disabled-opacity);
6325
+ }
6326
+
6327
+ .zx-input__control.zx-f-focus-visible {
6328
+ outline: 2px solid var(--input-accent);
6329
+ outline-offset: 2px;
6330
+ }
6331
+
6332
+ .zx-input__input {
6333
+ width: 100%;
6334
+ min-width: 0;
6335
+ appearance: none;
6336
+ border: none;
6337
+ outline: none;
6338
+ background: transparent;
6339
+ color: inherit;
6340
+ font: inherit;
6341
+ font-size: var(--text-sm);
6342
+ padding: var(--space-sm) var(--space-md);
6343
+ }
6344
+
6345
+ .zx-input__input.zx-f-disabled {
6346
+ cursor: not-allowed;
6347
+ }
6348
+
6349
+ .zx-input__adornment {
6350
+ display: flex;
6351
+ align-items: center;
6352
+ flex: none;
6353
+ font-size: var(--text-sm);
6354
+ line-height: var(--leading-none);
6355
+ }
6356
+
6357
+ .zx-root .zx-input__adornment {
6358
+ color: #18181bb3;
6359
+ }
6360
+
6361
+ .zx-root.zx-theme-dark .zx-input__adornment {
6362
+ color: #ecf9ffb3;
6363
+ }
6364
+
6365
+ .zx-root.zx-theme-dim .zx-input__adornment {
6366
+ color: #b2ccd6b3;
6367
+ }
6368
+
6369
+ .zx-root.zx-theme-nord .zx-input__adornment {
6370
+ color: #2e3440b3;
6371
+ }
6372
+
6373
+ .zx-root.zx-theme-sunset .zx-input__adornment {
6374
+ color: #9fb9d0b3;
6375
+ }
6376
+
6377
+ .zx-input__adornment.zx-p-start {
6378
+ order: -1;
6379
+ }
6380
+
6381
+ .zx-input__adornment.zx-p-end {
6382
+ order: 1;
6383
+ }
6384
+
6385
+ .zx-input__clear-trigger {
6386
+ appearance: none;
6387
+ border: none;
6388
+ background: transparent;
6389
+ border-radius: 9999px;
6390
+ align-self: center;
6391
+ flex: none;
6392
+ order: 1;
6393
+ padding: var(--space-2xs) var(--space-xs);
6394
+ font-size: var(--text-sm);
6395
+ font-weight: var(--weight-semibold);
6396
+ line-height: var(--leading-none);
6397
+ cursor: pointer;
6398
+ }
6399
+
6400
+ .zx-root .zx-input__clear-trigger {
6401
+ color: #18181bb3;
6402
+ }
6403
+
6404
+ .zx-root.zx-theme-dark .zx-input__clear-trigger {
6405
+ color: #ecf9ffb3;
6406
+ }
6407
+
6408
+ .zx-root.zx-theme-dim .zx-input__clear-trigger {
6409
+ color: #b2ccd6b3;
6410
+ }
6411
+
6412
+ .zx-root.zx-theme-nord .zx-input__clear-trigger {
6413
+ color: #2e3440b3;
5828
6414
  }
5829
6415
 
5830
- .zx-root .zx-input__label.zx-f-invalid {
5831
- color: #d9576d;
6416
+ .zx-root.zx-theme-sunset .zx-input__clear-trigger {
6417
+ color: #9fb9d0b3;
5832
6418
  }
5833
6419
 
5834
- .zx-root.zx-theme-dark .zx-input__label.zx-f-invalid {
5835
- color: #ff7d90;
6420
+ .zx-input__clear-trigger.zx-f-disabled {
6421
+ cursor: not-allowed;
5836
6422
  }
5837
6423
 
5838
- .zx-root.zx-theme-dim .zx-input__label.zx-f-invalid {
5839
- color: #f5b3a4;
6424
+ .zx-input__clear-trigger.zx-f-focus-visible {
6425
+ outline: 2px solid var(--color-base-content);
6426
+ outline-offset: 2px;
5840
6427
  }
5841
6428
 
5842
- .zx-root.zx-theme-nord .zx-input__label.zx-f-invalid {
5843
- color: #a85b64;
6429
+ .zx-input__visibility-trigger {
6430
+ appearance: none;
6431
+ border: none;
6432
+ background: transparent;
6433
+ border-radius: 9999px;
6434
+ align-self: center;
6435
+ flex: none;
6436
+ order: 1;
6437
+ padding: var(--space-2xs) var(--space-xs);
6438
+ font-size: var(--text-sm);
6439
+ font-weight: var(--weight-semibold);
6440
+ line-height: var(--leading-none);
6441
+ cursor: pointer;
5844
6442
  }
5845
6443
 
5846
- .zx-root.zx-theme-sunset .zx-input__label.zx-f-invalid {
5847
- color: #f2bbc0;
6444
+ .zx-root .zx-input__visibility-trigger {
6445
+ color: #18181bb3;
5848
6446
  }
5849
6447
 
5850
- .zx-input__control {
5851
- display: flex;
5852
- align-items: stretch;
5853
- box-sizing: border-box;
5854
- height: calc(var(--size-field) * 12);
5855
- background: var(--color-base-100);
5856
- border: var(--border) solid var(--color-base-300);
5857
- border-radius: var(--radius-field);
5858
- box-shadow: var(--shadow-xs);
5859
- overflow: hidden;
5860
- transition: border-color var(--duration-fast) var(--ease-standard);
6448
+ .zx-root.zx-theme-dark .zx-input__visibility-trigger {
6449
+ color: #ecf9ffb3;
5861
6450
  }
5862
6451
 
5863
- .zx-input__control.zx-f-invalid {
5864
- border-color: var(--color-error);
6452
+ .zx-root.zx-theme-dim .zx-input__visibility-trigger {
6453
+ color: #b2ccd6b3;
5865
6454
  }
5866
6455
 
5867
- .zx-input__control.zx-f-disabled {
5868
- opacity: var(--disabled-opacity);
6456
+ .zx-root.zx-theme-nord .zx-input__visibility-trigger {
6457
+ color: #2e3440b3;
5869
6458
  }
5870
6459
 
5871
- .zx-input__control.zx-f-focus-visible {
5872
- outline: 2px solid var(--input-accent);
5873
- outline-offset: 2px;
6460
+ .zx-root.zx-theme-sunset .zx-input__visibility-trigger {
6461
+ color: #9fb9d0b3;
5874
6462
  }
5875
6463
 
5876
- .zx-input__input {
5877
- width: 100%;
5878
- min-width: 0;
5879
- appearance: none;
5880
- border: none;
5881
- outline: none;
5882
- background: transparent;
5883
- color: inherit;
5884
- font: inherit;
5885
- font-size: var(--text-sm);
5886
- padding: var(--space-sm) var(--space-md);
6464
+ .zx-input__visibility-trigger.zx-s-on {
6465
+ color: var(--color-base-content);
6466
+ background: var(--color-base-200);
5887
6467
  }
5888
6468
 
5889
- .zx-input__input.zx-f-disabled {
6469
+ .zx-input__visibility-trigger.zx-f-disabled {
5890
6470
  cursor: not-allowed;
5891
6471
  }
5892
6472
 
6473
+ .zx-input__visibility-trigger.zx-f-focus-visible {
6474
+ outline: 2px solid var(--color-base-content);
6475
+ outline-offset: 2px;
6476
+ }
6477
+
5893
6478
  .zx-input__root.zx-a-color-primary {
5894
6479
  --input-accent: var(--color-primary);
5895
6480
  }
@@ -5931,6 +6516,18 @@
5931
6516
  padding: var(--space-2xs) var(--space-xs);
5932
6517
  }
5933
6518
 
6519
+ .zx-input__adornment.zx-a-size-xs {
6520
+ font-size: var(--text-xs);
6521
+ }
6522
+
6523
+ .zx-input__clear-trigger.zx-a-size-xs {
6524
+ font-size: var(--text-xs);
6525
+ }
6526
+
6527
+ .zx-input__visibility-trigger.zx-a-size-xs {
6528
+ font-size: var(--text-xs);
6529
+ }
6530
+
5934
6531
  .zx-input__control.zx-a-size-sm {
5935
6532
  height: calc(var(--size-field) * 10);
5936
6533
  }
@@ -5940,6 +6537,18 @@
5940
6537
  padding: var(--space-xs) var(--space-sm);
5941
6538
  }
5942
6539
 
6540
+ .zx-input__adornment.zx-a-size-sm {
6541
+ font-size: var(--text-xs);
6542
+ }
6543
+
6544
+ .zx-input__clear-trigger.zx-a-size-sm {
6545
+ font-size: var(--text-xs);
6546
+ }
6547
+
6548
+ .zx-input__visibility-trigger.zx-a-size-sm {
6549
+ font-size: var(--text-xs);
6550
+ }
6551
+
5943
6552
  .zx-input__control.zx-a-size-lg {
5944
6553
  height: calc(var(--size-field) * 14);
5945
6554
  }
@@ -5949,6 +6558,18 @@
5949
6558
  padding: var(--space-md) var(--space-lg);
5950
6559
  }
5951
6560
 
6561
+ .zx-input__adornment.zx-a-size-lg {
6562
+ font-size: var(--text-md);
6563
+ }
6564
+
6565
+ .zx-input__clear-trigger.zx-a-size-lg {
6566
+ font-size: var(--text-md);
6567
+ }
6568
+
6569
+ .zx-input__visibility-trigger.zx-a-size-lg {
6570
+ font-size: var(--text-md);
6571
+ }
6572
+
5952
6573
  .zx-input__control.zx-a-size-xl {
5953
6574
  height: calc(var(--size-field) * 16);
5954
6575
  }
@@ -5958,6 +6579,18 @@
5958
6579
  padding: var(--space-lg) var(--space-xl);
5959
6580
  }
5960
6581
 
6582
+ .zx-input__adornment.zx-a-size-xl {
6583
+ font-size: var(--text-lg);
6584
+ }
6585
+
6586
+ .zx-input__clear-trigger.zx-a-size-xl {
6587
+ font-size: var(--text-lg);
6588
+ }
6589
+
6590
+ .zx-input__visibility-trigger.zx-a-size-xl {
6591
+ font-size: var(--text-lg);
6592
+ }
6593
+
5961
6594
  .zx-textarea__root {
5962
6595
  --textarea-accent: var(--color-base-content);
5963
6596
  }
@@ -6264,6 +6897,26 @@
6264
6897
  outline-offset: 2px;
6265
6898
  }
6266
6899
 
6900
+ .zx-root .zx-alert__close.zx-f-pressed {
6901
+ background: #18181b2e;
6902
+ }
6903
+
6904
+ .zx-root.zx-theme-dark .zx-alert__close.zx-f-pressed {
6905
+ background: #ecf9ff2e;
6906
+ }
6907
+
6908
+ .zx-root.zx-theme-dim .zx-alert__close.zx-f-pressed {
6909
+ background: #b2ccd62e;
6910
+ }
6911
+
6912
+ .zx-root.zx-theme-nord .zx-alert__close.zx-f-pressed {
6913
+ background: #2e34402e;
6914
+ }
6915
+
6916
+ .zx-root.zx-theme-sunset .zx-alert__close.zx-f-pressed {
6917
+ background: #9fb9d02e;
6918
+ }
6919
+
6267
6920
  .zx-alert__root.zx-a-color-primary {
6268
6921
  --alert-tint: var(--color-primary-soft);
6269
6922
  }
@@ -7554,6 +8207,7 @@
7554
8207
 
7555
8208
  .zx-stats__root {
7556
8209
  display: flex;
8210
+ overflow-x: auto;
7557
8211
  border: var(--border) solid var(--color-base-200);
7558
8212
  border-radius: var(--radius-box);
7559
8213
  background: var(--color-base-100);
@@ -7599,6 +8253,7 @@
7599
8253
 
7600
8254
  .zx-stats__value {
7601
8255
  grid-column: 1;
8256
+ white-space: nowrap;
7602
8257
  font-size: var(--text-2xl);
7603
8258
  font-weight: var(--weight-bold);
7604
8259
  font-variant-numeric: tabular-nums;
@@ -7636,36 +8291,164 @@
7636
8291
  align-self: center;
7637
8292
  }
7638
8293
 
7639
- .zx-stats__root.zx-a-color-primary {
7640
- --stats-accent: var(--color-primary);
8294
+ .zx-root .zx-stats__item.zx-a-color-primary {
8295
+ --stats-accent: #3f2bcb;
8296
+ }
8297
+
8298
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-primary {
8299
+ --stats-accent: #6567ff;
8300
+ }
8301
+
8302
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-primary {
8303
+ --stats-accent: #a0e791;
8304
+ }
8305
+
8306
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-primary {
8307
+ --stats-accent: #5c7da6;
8308
+ }
8309
+
8310
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-primary {
8311
+ --stats-accent: #fb8a62;
8312
+ }
8313
+
8314
+ .zx-root .zx-stats__item.zx-a-color-secondary {
8315
+ --stats-accent: #ad316f;
7641
8316
  }
7642
8317
 
7643
- .zx-stats__root.zx-a-color-secondary {
7644
- --stats-accent: var(--color-secondary);
8318
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-secondary {
8319
+ --stats-accent: #fa7cb6;
7645
8320
  }
7646
8321
 
7647
- .zx-stats__root.zx-a-color-accent {
7648
- --stats-accent: var(--color-accent);
8322
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-secondary {
8323
+ --stats-accent: #ed9984;
7649
8324
  }
7650
8325
 
7651
- .zx-stats__root.zx-a-color-neutral {
7652
- --stats-accent: var(--color-neutral);
8326
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-secondary {
8327
+ --stats-accent: #677e98;
7653
8328
  }
7654
8329
 
7655
- .zx-stats__root.zx-a-color-info {
7656
- --stats-accent: var(--color-info);
8330
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-secondary {
8331
+ --stats-accent: #e68aac;
7657
8332
  }
7658
8333
 
7659
- .zx-stats__root.zx-a-color-success {
7660
- --stats-accent: var(--color-success);
8334
+ .zx-root .zx-stats__item.zx-a-color-accent {
8335
+ --stats-accent: #2b786d;
7661
8336
  }
7662
8337
 
7663
- .zx-stats__root.zx-a-color-warning {
7664
- --stats-accent: var(--color-warning);
8338
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-accent {
8339
+ --stats-accent: #93e5d9;
7665
8340
  }
7666
8341
 
7667
- .zx-stats__root.zx-a-color-error {
7668
- --stats-accent: var(--color-error);
8342
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-accent {
8343
+ --stats-accent: #bfade1;
8344
+ }
8345
+
8346
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-accent {
8347
+ --stats-accent: #5e7d8c;
8348
+ }
8349
+
8350
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-accent {
8351
+ --stats-accent: #ab9fe8;
8352
+ }
8353
+
8354
+ .zx-root .zx-stats__item.zx-a-color-neutral {
8355
+ --stats-accent: #121214;
8356
+ }
8357
+
8358
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-neutral {
8359
+ --stats-accent: #878e92;
8360
+ }
8361
+
8362
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-neutral {
8363
+ --stats-accent: #71828c;
8364
+ }
8365
+
8366
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-neutral {
8367
+ --stats-accent: #3a4150;
8368
+ }
8369
+
8370
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-neutral {
8371
+ --stats-accent: #667a8a;
8372
+ }
8373
+
8374
+ .zx-root .zx-stats__item.zx-a-color-info {
8375
+ --stats-accent: #2685b3;
8376
+ }
8377
+
8378
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-info {
8379
+ --stats-accent: #70ceff;
8380
+ }
8381
+
8382
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-info {
8383
+ --stats-accent: #6ce2f3;
8384
+ }
8385
+
8386
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-info {
8387
+ --stats-accent: #89728a;
8388
+ }
8389
+
8390
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-info {
8391
+ --stats-accent: #91d4e3;
8392
+ }
8393
+
8394
+ .zx-root .zx-stats__item.zx-a-color-success {
8395
+ --stats-accent: #2a7858;
8396
+ }
8397
+
8398
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-success {
8399
+ --stats-accent: #92e5c2;
8400
+ }
8401
+
8402
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-success {
8403
+ --stats-accent: #8ee0c9;
8404
+ }
8405
+
8406
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-success {
8407
+ --stats-accent: #6b7d6a;
8408
+ }
8409
+
8410
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-success {
8411
+ --stats-accent: #a6cebe;
8412
+ }
8413
+
8414
+ .zx-root .zx-stats__item.zx-a-color-warning {
8415
+ --stats-accent: #755a2b;
8416
+ }
8417
+
8418
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-warning {
8419
+ --stats-accent: #f5ddac;
8420
+ }
8421
+
8422
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-warning {
8423
+ --stats-accent: #cecfa6;
8424
+ }
8425
+
8426
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-warning {
8427
+ --stats-accent: #7d7463;
8428
+ }
8429
+
8430
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-warning {
8431
+ --stats-accent: #c5c1b7;
8432
+ }
8433
+
8434
+ .zx-root .zx-stats__item.zx-a-color-error {
8435
+ --stats-accent: #d9576d;
8436
+ }
8437
+
8438
+ .zx-root.zx-theme-dark .zx-stats__item.zx-a-color-error {
8439
+ --stats-accent: #ff7d90;
8440
+ }
8441
+
8442
+ .zx-root.zx-theme-dim .zx-stats__item.zx-a-color-error {
8443
+ --stats-accent: #f5b3a4;
8444
+ }
8445
+
8446
+ .zx-root.zx-theme-nord .zx-stats__item.zx-a-color-error {
8447
+ --stats-accent: #a85b64;
8448
+ }
8449
+
8450
+ .zx-root.zx-theme-sunset .zx-stats__item.zx-a-color-error {
8451
+ --stats-accent: #f2bbc0;
7669
8452
  }
7670
8453
 
7671
8454
  .zx-stats__value.zx-a-size-xs {
@@ -7699,6 +8482,7 @@
7699
8482
 
7700
8483
  .zx-timeline__root.zx-o-horizontal {
7701
8484
  flex-direction: row;
8485
+ overflow-x: auto;
7702
8486
  }
7703
8487
 
7704
8488
  .zx-timeline__item {
@@ -7786,6 +8570,31 @@
7786
8570
  color: var(--color-base-content);
7787
8571
  }
7788
8572
 
8573
+ .zx-timeline__content.zx-o-vertical.zx-p-start {
8574
+ grid-column: 1;
8575
+ grid-row: 1;
8576
+ justify-self: end;
8577
+ text-align: end;
8578
+ }
8579
+
8580
+ .zx-timeline__content.zx-o-vertical.zx-p-end {
8581
+ grid-column: 3;
8582
+ grid-row: 1;
8583
+ justify-self: start;
8584
+ }
8585
+
8586
+ .zx-timeline__content.zx-o-horizontal.zx-p-start {
8587
+ grid-row: 1;
8588
+ grid-column: 1;
8589
+ align-self: end;
8590
+ }
8591
+
8592
+ .zx-timeline__content.zx-o-horizontal.zx-p-end {
8593
+ grid-row: 3;
8594
+ grid-column: 1;
8595
+ align-self: start;
8596
+ }
8597
+
7789
8598
  .zx-timeline__marker.zx-a-color-primary {
7790
8599
  --timeline-accent: var(--color-primary);
7791
8600
  --timeline-ring: var(--color-primary-content);
@@ -8831,12 +9640,16 @@
8831
9640
  --pg-accent: var(--color-primary);
8832
9641
  --pg-accent-content: var(--color-primary-content);
8833
9642
  --pg-font: var(--text-sm);
9643
+ --pg-ring-room: 4px;
8834
9644
  }
8835
9645
 
8836
9646
  .zx-pagination__root {
8837
9647
  display: flex;
8838
9648
  align-items: center;
8839
9649
  gap: var(--space-2xs);
9650
+ overflow-x: auto;
9651
+ padding: var(--pg-ring-room);
9652
+ scroll-padding-inline: var(--pg-ring-room);
8840
9653
  }
8841
9654
 
8842
9655
  .zx-pagination__item {
@@ -8894,6 +9707,10 @@
8894
9707
  outline-offset: 2px;
8895
9708
  }
8896
9709
 
9710
+ .zx-pagination__item.zx-f-pressed {
9711
+ transform: translateY(1px);
9712
+ }
9713
+
8897
9714
  .zx-pagination__ellipsis {
8898
9715
  display: flex;
8899
9716
  align-items: center;
@@ -8991,6 +9808,10 @@
8991
9808
  outline-offset: 2px;
8992
9809
  }
8993
9810
 
9811
+ .zx-pagination__prev-trigger.zx-f-pressed {
9812
+ transform: translateY(1px);
9813
+ }
9814
+
8994
9815
  .zx-pagination__next-trigger {
8995
9816
  display: flex;
8996
9817
  align-items: center;
@@ -9038,6 +9859,10 @@
9038
9859
  outline-offset: 2px;
9039
9860
  }
9040
9861
 
9862
+ .zx-pagination__next-trigger.zx-f-pressed {
9863
+ transform: translateY(1px);
9864
+ }
9865
+
9041
9866
  .zx-pagination__root.zx-a-color-primary {
9042
9867
  --pg-accent: var(--color-primary);
9043
9868
  --pg-accent-content: var(--color-primary-content);
@@ -9188,6 +10013,10 @@
9188
10013
  padding-bottom: var(--space-lg);
9189
10014
  }
9190
10015
 
10016
+ .zx-steps__item.zx-f-pressed {
10017
+ transform: translateY(1px);
10018
+ }
10019
+
9191
10020
  .zx-steps__indicator {
9192
10021
  display: flex;
9193
10022
  align-items: center;
@@ -9648,6 +10477,10 @@
9648
10477
  border-radius: 0;
9649
10478
  }
9650
10479
 
10480
+ .zx-drawer__panel.zx-l-dock-sheet.zx-s-open {
10481
+ transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
10482
+ }
10483
+
9651
10484
  .zx-drawer__backdrop {
9652
10485
  background: #00000066;
9653
10486
  }
@@ -9817,6 +10650,11 @@
9817
10650
  background: var(--color-base-100);
9818
10651
  }
9819
10652
 
10653
+ .zx-table__root.zx-f-focus-visible {
10654
+ outline: 2px solid var(--color-base-content);
10655
+ outline-offset: -2px;
10656
+ }
10657
+
9820
10658
  .zx-table__table {
9821
10659
  border-collapse: collapse;
9822
10660
  inline-size: 100%;
@@ -10258,6 +11096,30 @@
10258
11096
  opacity: var(--disabled-opacity);
10259
11097
  }
10260
11098
 
11099
+ .zx-file-upload__item.zx-f-invalid {
11100
+ border-color: var(--color-error);
11101
+ }
11102
+
11103
+ .zx-root .zx-file-upload__item.zx-f-invalid {
11104
+ background: #fff3f4;
11105
+ }
11106
+
11107
+ .zx-root.zx-theme-dark .zx-file-upload__item.zx-f-invalid {
11108
+ background: #2e2930;
11109
+ }
11110
+
11111
+ .zx-root.zx-theme-dim .zx-file-upload__item.zx-f-invalid {
11112
+ background: #393943;
11113
+ }
11114
+
11115
+ .zx-root.zx-theme-nord .zx-file-upload__item.zx-f-invalid {
11116
+ background: #eae4e8;
11117
+ }
11118
+
11119
+ .zx-root.zx-theme-sunset .zx-file-upload__item.zx-f-invalid {
11120
+ background: #22272d;
11121
+ }
11122
+
10261
11123
  .zx-file-upload__item-name {
10262
11124
  flex: 1 1 auto;
10263
11125
  min-width: 0;
@@ -10313,6 +11175,29 @@
10313
11175
  outline-offset: 2px;
10314
11176
  }
10315
11177
 
11178
+ .zx-file-upload__clear-trigger {
11179
+ appearance: none;
11180
+ border: none;
11181
+ background: transparent;
11182
+ color: inherit;
11183
+ border-radius: 9999px;
11184
+ padding: var(--space-2xs) var(--space-sm);
11185
+ font-size: var(--fu-font);
11186
+ font-weight: var(--weight-semibold);
11187
+ line-height: var(--leading-none);
11188
+ cursor: pointer;
11189
+ }
11190
+
11191
+ .zx-file-upload__clear-trigger.zx-f-disabled {
11192
+ opacity: var(--disabled-opacity);
11193
+ cursor: not-allowed;
11194
+ }
11195
+
11196
+ .zx-file-upload__clear-trigger.zx-f-focus-visible {
11197
+ outline: 2px solid var(--color-base-content);
11198
+ outline-offset: 2px;
11199
+ }
11200
+
10316
11201
  .zx-root .zx-file-upload__root.zx-a-color-primary {
10317
11202
  --fu-accent: #3f2bcb;
10318
11203
  }
@@ -11247,6 +12132,11 @@
11247
12132
  outline-offset: 2px;
11248
12133
  }
11249
12134
 
12135
+ .zx-diff__handle.zx-f-disabled {
12136
+ opacity: var(--disabled-opacity);
12137
+ cursor: not-allowed;
12138
+ }
12139
+
11250
12140
  .zx-root .zx-diff__handle.zx-f-pressed {
11251
12141
  --diff-accent: #353538;
11252
12142
  }