@sigx/zero-daisyui 0.2.0-beta.3 → 0.2.0-beta.4

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 (58) hide show
  1. package/README.md +8 -0
  2. package/dist/components.d.ts +3 -2
  3. package/dist/css/components/button.css +6 -0
  4. package/dist/css/components/tabs.css +191 -19
  5. package/dist/css/index.css +197 -19
  6. package/dist/lynx/components/alert.css +1 -1
  7. package/dist/lynx/components/avatar.css +22 -7
  8. package/dist/lynx/components/badge.css +1 -1
  9. package/dist/lynx/components/button.css +6 -1
  10. package/dist/lynx/components/checkbox.css +23 -9
  11. package/dist/lynx/components/combobox.css +2 -2
  12. package/dist/lynx/components/countdown.css +1 -1
  13. package/dist/lynx/components/dialog.css +3 -3
  14. package/dist/lynx/components/divider.css +18 -19
  15. package/dist/lynx/components/drawer.css +2 -2
  16. package/dist/lynx/components/file-upload.css +18 -7
  17. package/dist/lynx/components/indicator.css +1 -1
  18. package/dist/lynx/components/input.css +2 -2
  19. package/dist/lynx/components/join.css +1 -1
  20. package/dist/lynx/components/kbd.css +1 -1
  21. package/dist/lynx/components/menu.css +1 -1
  22. package/dist/lynx/components/native-select.css +1 -1
  23. package/dist/lynx/components/number-input.css +2 -2
  24. package/dist/lynx/components/pagination.css +92 -23
  25. package/dist/lynx/components/popover.css +2 -2
  26. package/dist/lynx/components/progress.css +17 -25
  27. package/dist/lynx/components/radial-progress.css +22 -24
  28. package/dist/lynx/components/radio-group.css +23 -9
  29. package/dist/lynx/components/rating-group.css +19 -23
  30. package/dist/lynx/components/select.css +2 -2
  31. package/dist/lynx/components/slider.css +3 -0
  32. package/dist/lynx/components/spinner.css +22 -19
  33. package/dist/lynx/components/status.css +27 -20
  34. package/dist/lynx/components/steps.css +67 -18
  35. package/dist/lynx/components/switch.css +79 -37
  36. package/dist/lynx/components/table.css +51 -8
  37. package/dist/lynx/components/tabs.css +222 -21
  38. package/dist/lynx/components/textarea.css +1 -1
  39. package/dist/lynx/components/timeline.css +27 -20
  40. package/dist/lynx/components/toggle-group.css +2 -2
  41. package/dist/lynx/components/toggle.css +1 -1
  42. package/dist/lynx/components/tooltip.css +1 -1
  43. package/dist/lynx/index.css +786 -318
  44. package/dist/lynx/manifest.json +33 -7
  45. package/dist/manifest.json +31 -5
  46. package/dist/recipes.d.ts +28 -0
  47. package/dist/recipes.d.ts.map +1 -1
  48. package/dist/recipes.js +465 -80
  49. package/dist/recipes.js.map +1 -1
  50. package/dist/register.d.ts +2 -3
  51. package/dist/report.json +401 -34
  52. package/dist/tokens.d.ts +17 -5
  53. package/dist/tokens.d.ts.map +1 -1
  54. package/dist/tokens.js +22 -8
  55. package/dist/tokens.js.map +1 -1
  56. package/package.json +4 -4
  57. package/src/recipes.ts +468 -81
  58. package/src/tokens.ts +24 -8
@@ -446,23 +446,21 @@
446
446
  }
447
447
 
448
448
  .zx-tabs__list {
449
- display: inline-flex;
449
+ display: flex;
450
450
  align-self: flex-start;
451
- padding: var(--space-xs);
452
- gap: var(--space-xs);
453
- background: var(--color-base-200);
454
- border-radius: var(--radius-field);
455
451
  }
456
452
 
457
453
  .zx-tabs__tab {
458
454
  appearance: none;
459
455
  border: none;
460
456
  background: transparent;
461
- padding: var(--space-sm) var(--space-xl);
457
+ --tab-py: var(--space-sm);
458
+ --tab-px: var(--space-xl);
459
+ padding: var(--tab-py) var(--tab-px);
462
460
  font-size: var(--text-sm);
463
461
  font-weight: var(--weight-semibold);
464
- border-radius: calc(var(--radius-field) - 0.25rem);
465
462
  cursor: pointer;
463
+ position: relative;
466
464
  transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
467
465
  }
468
466
 
@@ -487,9 +485,7 @@
487
485
  }
488
486
 
489
487
  .zx-tabs__tab.zx-s-active {
490
- background: var(--color-base-100);
491
488
  color: var(--color-base-content);
492
- box-shadow: var(--shadow-sm);
493
489
  }
494
490
 
495
491
  .zx-tabs__tab.zx-f-disabled {
@@ -508,60 +504,265 @@
508
504
 
509
505
  .zx-tabs__tab.zx-a-size-xs {
510
506
  font-size: var(--text-xs);
511
- padding: var(--space-2xs) var(--space-md);
507
+ --tab-py: var(--space-2xs);
508
+ --tab-px: var(--space-md);
512
509
  }
513
510
 
514
511
  .zx-tabs__tab.zx-a-size-sm {
515
512
  font-size: var(--text-xs);
516
- padding: var(--space-xs) var(--space-lg);
513
+ --tab-py: var(--space-xs);
514
+ --tab-px: var(--space-lg);
517
515
  }
518
516
 
519
517
  .zx-tabs__tab.zx-a-size-lg {
520
518
  font-size: var(--text-md);
521
- padding: var(--space-md) var(--space-2xl);
519
+ --tab-py: var(--space-md);
520
+ --tab-px: var(--space-2xl);
522
521
  }
523
522
 
524
523
  .zx-tabs__tab.zx-a-size-xl {
525
524
  font-size: var(--text-lg);
526
- padding: var(--space-lg) var(--space-2xl);
525
+ --tab-py: var(--space-lg);
526
+ --tab-px: var(--space-2xl);
527
+ }
528
+
529
+ .zx-root .zx-tabs__tab.zx-a-color-primary.zx-s-active {
530
+ color: #3f2bcb;
531
+ }
532
+
533
+ .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-primary.zx-s-active {
534
+ color: #6567ff;
535
+ }
536
+
537
+ .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-primary.zx-s-active {
538
+ color: #a0e791;
539
+ }
540
+
541
+ .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-primary.zx-s-active {
542
+ color: #5c7da6;
543
+ }
544
+
545
+ .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-primary.zx-s-active {
546
+ color: #fb8a62;
547
+ }
548
+
549
+ .zx-root .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
550
+ color: #ad316f;
551
+ }
552
+
553
+ .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
554
+ color: #fa7cb6;
555
+ }
556
+
557
+ .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
558
+ color: #ed9984;
559
+ }
560
+
561
+ .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
562
+ color: #677e98;
563
+ }
564
+
565
+ .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
566
+ color: #e68aac;
527
567
  }
528
568
 
529
- .zx-tabs__tab.zx-a-color-primary.zx-s-active {
569
+ .zx-root .zx-tabs__tab.zx-a-color-accent.zx-s-active {
570
+ color: #2b786d;
571
+ }
572
+
573
+ .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-accent.zx-s-active {
574
+ color: #93e5d9;
575
+ }
576
+
577
+ .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-accent.zx-s-active {
578
+ color: #bfade1;
579
+ }
580
+
581
+ .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-accent.zx-s-active {
582
+ color: #5e7d8c;
583
+ }
584
+
585
+ .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-accent.zx-s-active {
586
+ color: #ab9fe8;
587
+ }
588
+
589
+ .zx-root .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
590
+ color: #121214;
591
+ }
592
+
593
+ .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
594
+ color: #878e92;
595
+ }
596
+
597
+ .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
598
+ color: #71828c;
599
+ }
600
+
601
+ .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
602
+ color: #3a4150;
603
+ }
604
+
605
+ .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
606
+ color: #667a8a;
607
+ }
608
+
609
+ .zx-root .zx-tabs__tab.zx-a-color-info.zx-s-active {
610
+ color: #2685b3;
611
+ }
612
+
613
+ .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-info.zx-s-active {
614
+ color: #70ceff;
615
+ }
616
+
617
+ .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-info.zx-s-active {
618
+ color: #6ce2f3;
619
+ }
620
+
621
+ .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-info.zx-s-active {
622
+ color: #89728a;
623
+ }
624
+
625
+ .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-info.zx-s-active {
626
+ color: #91d4e3;
627
+ }
628
+
629
+ .zx-root .zx-tabs__tab.zx-a-color-success.zx-s-active {
630
+ color: #2a7858;
631
+ }
632
+
633
+ .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-success.zx-s-active {
634
+ color: #92e5c2;
635
+ }
636
+
637
+ .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-success.zx-s-active {
638
+ color: #8ee0c9;
639
+ }
640
+
641
+ .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-success.zx-s-active {
642
+ color: #6b7d6a;
643
+ }
644
+
645
+ .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-success.zx-s-active {
646
+ color: #a6cebe;
647
+ }
648
+
649
+ .zx-root .zx-tabs__tab.zx-a-color-warning.zx-s-active {
650
+ color: #755a2b;
651
+ }
652
+
653
+ .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-warning.zx-s-active {
654
+ color: #f5ddac;
655
+ }
656
+
657
+ .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-warning.zx-s-active {
658
+ color: #cecfa6;
659
+ }
660
+
661
+ .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-warning.zx-s-active {
662
+ color: #7d7463;
663
+ }
664
+
665
+ .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-warning.zx-s-active {
666
+ color: #c5c1b7;
667
+ }
668
+
669
+ .zx-root .zx-tabs__tab.zx-a-color-error.zx-s-active {
670
+ color: #d9576d;
671
+ }
672
+
673
+ .zx-root.zx-theme-dark .zx-tabs__tab.zx-a-color-error.zx-s-active {
674
+ color: #ff7d90;
675
+ }
676
+
677
+ .zx-root.zx-theme-dim .zx-tabs__tab.zx-a-color-error.zx-s-active {
678
+ color: #f5b3a4;
679
+ }
680
+
681
+ .zx-root.zx-theme-nord .zx-tabs__tab.zx-a-color-error.zx-s-active {
682
+ color: #a85b64;
683
+ }
684
+
685
+ .zx-root.zx-theme-sunset .zx-tabs__tab.zx-a-color-error.zx-s-active {
686
+ color: #f2bbc0;
687
+ }
688
+
689
+ .zx-tabs__tab.zx-a-variant-border {
690
+ border-radius: var(--radius-field);
691
+ border-bottom: 3px solid transparent;
692
+ }
693
+
694
+ .zx-tabs__tab.zx-a-variant-border.zx-s-active {
695
+ border-bottom-color: currentColor;
696
+ }
697
+
698
+ .zx-tabs__tab.zx-a-variant-lift {
699
+ --tab-radius-limit: var(--radius-field);
700
+ border-start-start-radius: var(--tab-radius-limit);
701
+ border-start-end-radius: var(--tab-radius-limit);
702
+ border-width: 0 0 var(--border) 0;
703
+ border-style: solid;
704
+ border-color: var(--color-base-300);
705
+ padding: calc(var(--tab-py) + var(--border)) var(--tab-px) var(--tab-py);
706
+ }
707
+
708
+ .zx-tabs__tab.zx-a-variant-lift.zx-s-active {
709
+ background: var(--color-base-100);
710
+ border-width: var(--border) var(--border) 0 var(--border);
711
+ padding: var(--tab-py) calc(var(--tab-px) - var(--border)) calc(var(--tab-py) + var(--border));
712
+ }
713
+
714
+ .zx-tabs__list.zx-a-variant-box {
715
+ padding: var(--space-xs);
716
+ gap: var(--space-xs);
717
+ background: var(--color-base-200);
718
+ border-radius: var(--radius-field);
719
+ }
720
+
721
+ .zx-tabs__tab.zx-a-variant-box {
722
+ border-radius: calc(var(--radius-field) - 0.25rem);
723
+ }
724
+
725
+ .zx-tabs__tab.zx-a-variant-box.zx-s-active {
726
+ background: var(--color-base-100);
727
+ box-shadow: var(--shadow-sm);
728
+ }
729
+
730
+ .zx-tabs__tab.zx-a-variant-box.zx-a-color-primary.zx-s-active {
530
731
  background: var(--color-primary);
531
732
  color: var(--color-primary-content);
532
733
  }
533
734
 
534
- .zx-tabs__tab.zx-a-color-secondary.zx-s-active {
735
+ .zx-tabs__tab.zx-a-variant-box.zx-a-color-secondary.zx-s-active {
535
736
  background: var(--color-secondary);
536
737
  color: var(--color-secondary-content);
537
738
  }
538
739
 
539
- .zx-tabs__tab.zx-a-color-accent.zx-s-active {
740
+ .zx-tabs__tab.zx-a-variant-box.zx-a-color-accent.zx-s-active {
540
741
  background: var(--color-accent);
541
742
  color: var(--color-accent-content);
542
743
  }
543
744
 
544
- .zx-tabs__tab.zx-a-color-neutral.zx-s-active {
745
+ .zx-tabs__tab.zx-a-variant-box.zx-a-color-neutral.zx-s-active {
545
746
  background: var(--color-neutral);
546
747
  color: var(--color-neutral-content);
547
748
  }
548
749
 
549
- .zx-tabs__tab.zx-a-color-info.zx-s-active {
750
+ .zx-tabs__tab.zx-a-variant-box.zx-a-color-info.zx-s-active {
550
751
  background: var(--color-info);
551
752
  color: var(--color-info-content);
552
753
  }
553
754
 
554
- .zx-tabs__tab.zx-a-color-success.zx-s-active {
755
+ .zx-tabs__tab.zx-a-variant-box.zx-a-color-success.zx-s-active {
555
756
  background: var(--color-success);
556
757
  color: var(--color-success-content);
557
758
  }
558
759
 
559
- .zx-tabs__tab.zx-a-color-warning.zx-s-active {
760
+ .zx-tabs__tab.zx-a-variant-box.zx-a-color-warning.zx-s-active {
560
761
  background: var(--color-warning);
561
762
  color: var(--color-warning-content);
562
763
  }
563
764
 
564
- .zx-tabs__tab.zx-a-color-error.zx-s-active {
765
+ .zx-tabs__tab.zx-a-variant-box.zx-a-color-error.zx-s-active {
565
766
  background: var(--color-error);
566
767
  color: var(--color-error-content);
567
768
  }
@@ -807,8 +1008,6 @@
807
1008
  }
808
1009
 
809
1010
  .zx-switch__root {
810
- --switch-size: calc(var(--size-selector) * 6);
811
- --switch-p: calc(var(--switch-size) * 0.125);
812
1011
  --switch-accent: var(--color-primary);
813
1012
  }
814
1013
 
@@ -833,10 +1032,11 @@
833
1032
  }
834
1033
 
835
1034
  .zx-switch__root {
836
- display: inline-flex;
1035
+ display: flex;
837
1036
  align-items: center;
838
1037
  gap: var(--space-lg);
839
1038
  cursor: pointer;
1039
+ flex-direction: row;
840
1040
  }
841
1041
 
842
1042
  .zx-switch__root.zx-f-disabled {
@@ -845,26 +1045,49 @@
845
1045
  }
846
1046
 
847
1047
  .zx-switch__control {
848
- display: inline-grid;
849
- grid-template-columns: 0fr 1fr 1fr;
850
- place-content: center;
851
- position: relative;
852
- vertical-align: middle;
1048
+ display: flex;
1049
+ align-items: center;
853
1050
  flex-shrink: 0;
854
1051
  box-sizing: border-box;
855
- width: calc((var(--switch-size) * 2) - (var(--border) + var(--switch-p)) * 2);
856
- height: var(--switch-size);
857
- padding: var(--switch-p);
858
- --switch-radius-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
859
- border: var(--border) solid currentColor;
860
- color: var(--switch-ink);
1052
+ width: calc(((var(--size-selector) * 6) * 2) - (var(--border) + ((var(--size-selector) * 6) * 0.125)) * 2);
1053
+ height: calc(var(--size-selector) * 6);
1054
+ padding: calc((var(--size-selector) * 6) * 0.125);
1055
+ border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 6) * 0.125) + var(--border));
1056
+ border: var(--border) solid var(--switch-ink);
861
1057
  user-select: none;
862
- transition: color var(--duration-slow) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard), grid-template-columns var(--duration-normal) var(--ease-standard);
1058
+ transition: border-color var(--duration-slow) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
1059
+ }
1060
+
1061
+ .zx-switch__control.zx-a-size-xs {
1062
+ width: calc(((var(--size-selector) * 4) * 2) - (var(--border) + ((var(--size-selector) * 4) * 0.125)) * 2);
1063
+ height: calc(var(--size-selector) * 4);
1064
+ padding: calc((var(--size-selector) * 4) * 0.125);
1065
+ border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 4) * 0.125) + var(--border));
1066
+ }
1067
+
1068
+ .zx-switch__control.zx-a-size-sm {
1069
+ width: calc(((var(--size-selector) * 5) * 2) - (var(--border) + ((var(--size-selector) * 5) * 0.125)) * 2);
1070
+ height: calc(var(--size-selector) * 5);
1071
+ padding: calc((var(--size-selector) * 5) * 0.125);
1072
+ border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 5) * 0.125) + var(--border));
1073
+ }
1074
+
1075
+ .zx-switch__control.zx-a-size-lg {
1076
+ width: calc(((var(--size-selector) * 7) * 2) - (var(--border) + ((var(--size-selector) * 7) * 0.125)) * 2);
1077
+ height: calc(var(--size-selector) * 7);
1078
+ padding: calc((var(--size-selector) * 7) * 0.125);
1079
+ border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 7) * 0.125) + var(--border));
1080
+ }
1081
+
1082
+ .zx-switch__control.zx-a-size-xl {
1083
+ width: calc(((var(--size-selector) * 8) * 2) - (var(--border) + ((var(--size-selector) * 8) * 0.125)) * 2);
1084
+ height: calc(var(--size-selector) * 8);
1085
+ padding: calc((var(--size-selector) * 8) * 0.125);
1086
+ border-radius: calc(var(--radius-selector) + ((var(--size-selector) * 8) * 0.125) + var(--border));
863
1087
  }
864
1088
 
865
1089
  .zx-switch__control.zx-s-checked {
866
- grid-template-columns: 1fr 1fr 0fr;
867
- color: var(--switch-accent);
1090
+ border-color: var(--switch-accent);
868
1091
  background-color: var(--color-base-100);
869
1092
  }
870
1093
 
@@ -878,37 +1101,57 @@
878
1101
  }
879
1102
 
880
1103
  .zx-switch__thumb {
881
- grid-row-start: 1;
882
- grid-column-start: 2;
883
- aspect-ratio: 1;
884
- width: 100%;
885
- height: 100%;
1104
+ width: calc((var(--size-selector) * 6) - (var(--border) + ((var(--size-selector) * 6) * 0.125)) * 2);
1105
+ height: calc((var(--size-selector) * 6) - (var(--border) + ((var(--size-selector) * 6) * 0.125)) * 2);
886
1106
  border-radius: var(--radius-selector);
887
- background-color: currentColor;
888
- background-size: auto, calc(var(--noise) * 100%);
889
- background-image: none, var(--fx-noise);
890
- transition: background-color var(--duration-instant) var(--ease-standard);
1107
+ background-color: var(--switch-ink);
1108
+ transition: transform var(--duration-normal) var(--ease-standard), background-color var(--duration-instant) var(--ease-standard);
891
1109
  }
892
1110
 
893
- .zx-switch__label {
894
- font-size: var(--text-sm);
895
- font-weight: var(--weight-medium);
1111
+ .zx-switch__thumb.zx-a-size-xs {
1112
+ width: calc((var(--size-selector) * 4) - (var(--border) + ((var(--size-selector) * 4) * 0.125)) * 2);
1113
+ height: calc((var(--size-selector) * 4) - (var(--border) + ((var(--size-selector) * 4) * 0.125)) * 2);
1114
+ }
1115
+
1116
+ .zx-switch__thumb.zx-a-size-sm {
1117
+ width: calc((var(--size-selector) * 5) - (var(--border) + ((var(--size-selector) * 5) * 0.125)) * 2);
1118
+ height: calc((var(--size-selector) * 5) - (var(--border) + ((var(--size-selector) * 5) * 0.125)) * 2);
1119
+ }
1120
+
1121
+ .zx-switch__thumb.zx-a-size-lg {
1122
+ width: calc((var(--size-selector) * 7) - (var(--border) + ((var(--size-selector) * 7) * 0.125)) * 2);
1123
+ height: calc((var(--size-selector) * 7) - (var(--border) + ((var(--size-selector) * 7) * 0.125)) * 2);
1124
+ }
1125
+
1126
+ .zx-switch__thumb.zx-a-size-xl {
1127
+ width: calc((var(--size-selector) * 8) - (var(--border) + ((var(--size-selector) * 8) * 0.125)) * 2);
1128
+ height: calc((var(--size-selector) * 8) - (var(--border) + ((var(--size-selector) * 8) * 0.125)) * 2);
1129
+ }
1130
+
1131
+ .zx-switch__thumb.zx-s-checked {
1132
+ background-color: var(--switch-accent);
1133
+ transform: translateX(calc((var(--size-selector) * 6) - (var(--border) + ((var(--size-selector) * 6) * 0.125)) * 2));
1134
+ }
1135
+
1136
+ .zx-switch__thumb.zx-s-checked.zx-a-size-xs {
1137
+ transform: translateX(calc((var(--size-selector) * 4) - (var(--border) + ((var(--size-selector) * 4) * 0.125)) * 2));
896
1138
  }
897
1139
 
898
- .zx-switch__root.zx-a-size-xs {
899
- --switch-size: calc(var(--size-selector) * 4);
1140
+ .zx-switch__thumb.zx-s-checked.zx-a-size-sm {
1141
+ transform: translateX(calc((var(--size-selector) * 5) - (var(--border) + ((var(--size-selector) * 5) * 0.125)) * 2));
900
1142
  }
901
1143
 
902
- .zx-switch__root.zx-a-size-sm {
903
- --switch-size: calc(var(--size-selector) * 5);
1144
+ .zx-switch__thumb.zx-s-checked.zx-a-size-lg {
1145
+ transform: translateX(calc((var(--size-selector) * 7) - (var(--border) + ((var(--size-selector) * 7) * 0.125)) * 2));
904
1146
  }
905
1147
 
906
- .zx-switch__root.zx-a-size-lg {
907
- --switch-size: calc(var(--size-selector) * 7);
1148
+ .zx-switch__thumb.zx-s-checked.zx-a-size-xl {
1149
+ transform: translateX(calc((var(--size-selector) * 8) - (var(--border) + ((var(--size-selector) * 8) * 0.125)) * 2));
908
1150
  }
909
1151
 
910
- .zx-switch__root.zx-a-size-xl {
911
- --switch-size: calc(var(--size-selector) * 8);
1152
+ .zx-switch__label {
1153
+ font-size: var(--text-sm);
1154
+ font-weight: var(--weight-medium);
912
1155
  }
913
1156
 
914
1157
  .zx-switch__root.zx-a-color-primary {
@@ -945,7 +1188,7 @@
945
1188
 
946
1189
  .zx-dialog__trigger {
947
1190
  appearance: none;
948
- display: inline-flex;
1191
+ display: flex;
949
1192
  align-items: center;
950
1193
  justify-content: center;
951
1194
  gap: 0.5em;
@@ -1036,7 +1279,7 @@
1036
1279
 
1037
1280
  .zx-dialog__close {
1038
1281
  appearance: none;
1039
- display: inline-flex;
1282
+ display: flex;
1040
1283
  align-items: center;
1041
1284
  justify-content: center;
1042
1285
  gap: 0.5em;
@@ -1064,7 +1307,7 @@
1064
1307
 
1065
1308
  .zx-dialog__cancel {
1066
1309
  appearance: none;
1067
- display: inline-flex;
1310
+ display: flex;
1068
1311
  align-items: center;
1069
1312
  justify-content: center;
1070
1313
  gap: 0.5em;
@@ -1207,7 +1450,7 @@
1207
1450
 
1208
1451
  .zx-popover__trigger {
1209
1452
  appearance: none;
1210
- display: inline-flex;
1453
+ display: flex;
1211
1454
  align-items: center;
1212
1455
  justify-content: center;
1213
1456
  gap: 0.5em;
@@ -1264,7 +1507,7 @@
1264
1507
 
1265
1508
  .zx-popover__close {
1266
1509
  appearance: none;
1267
- display: inline-flex;
1510
+ display: flex;
1268
1511
  align-items: center;
1269
1512
  justify-content: center;
1270
1513
  gap: 0.5em;
@@ -1404,7 +1647,7 @@
1404
1647
 
1405
1648
  .zx-tooltip__trigger {
1406
1649
  appearance: none;
1407
- display: inline-flex;
1650
+ display: flex;
1408
1651
  align-items: center;
1409
1652
  justify-content: center;
1410
1653
  gap: 0.5em;
@@ -1568,7 +1811,7 @@
1568
1811
 
1569
1812
  .zx-menu__trigger {
1570
1813
  appearance: none;
1571
- display: inline-flex;
1814
+ display: flex;
1572
1815
  align-items: center;
1573
1816
  justify-content: center;
1574
1817
  gap: 0.5em;
@@ -2104,14 +2347,13 @@
2104
2347
  }
2105
2348
 
2106
2349
  .zx-checkbox__root {
2107
- --checkbox-size: calc(var(--size-selector) * 6);
2108
2350
  --checkbox-pad: 0.25rem;
2109
2351
  --checkbox-accent: var(--color-primary);
2110
2352
  --checkbox-on-accent: var(--color-primary-content);
2111
2353
  }
2112
2354
 
2113
2355
  .zx-checkbox__root {
2114
- display: inline-flex;
2356
+ display: flex;
2115
2357
  align-items: center;
2116
2358
  gap: 0.625rem;
2117
2359
  cursor: pointer;
@@ -2128,8 +2370,8 @@
2128
2370
  vertical-align: middle;
2129
2371
  flex-shrink: 0;
2130
2372
  box-sizing: border-box;
2131
- width: var(--checkbox-size);
2132
- height: var(--checkbox-size);
2373
+ width: calc(var(--size-selector) * 6);
2374
+ height: calc(var(--size-selector) * 6);
2133
2375
  padding: var(--checkbox-pad);
2134
2376
  border-radius: var(--radius-selector);
2135
2377
  color: var(--checkbox-on-accent);
@@ -2140,6 +2382,26 @@
2140
2382
  transition: background-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
2141
2383
  }
2142
2384
 
2385
+ .zx-checkbox__control.zx-a-size-xs {
2386
+ width: calc(var(--size-selector) * 4);
2387
+ height: calc(var(--size-selector) * 4);
2388
+ }
2389
+
2390
+ .zx-checkbox__control.zx-a-size-sm {
2391
+ width: calc(var(--size-selector) * 5);
2392
+ height: calc(var(--size-selector) * 5);
2393
+ }
2394
+
2395
+ .zx-checkbox__control.zx-a-size-lg {
2396
+ width: calc(var(--size-selector) * 7);
2397
+ height: calc(var(--size-selector) * 7);
2398
+ }
2399
+
2400
+ .zx-checkbox__control.zx-a-size-xl {
2401
+ width: calc(var(--size-selector) * 8);
2402
+ height: calc(var(--size-selector) * 8);
2403
+ }
2404
+
2143
2405
  .zx-checkbox__control.zx-s-checked {
2144
2406
  background-color: var(--checkbox-accent);
2145
2407
  box-shadow: 0 0 #0000 inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
@@ -2230,7 +2492,6 @@
2230
2492
  }
2231
2493
 
2232
2494
  .zx-checkbox__root.zx-a-size-xs {
2233
- --checkbox-size: calc(var(--size-selector) * 4);
2234
2495
  --checkbox-pad: 0.125rem;
2235
2496
  }
2236
2497
 
@@ -2239,7 +2500,6 @@
2239
2500
  }
2240
2501
 
2241
2502
  .zx-checkbox__root.zx-a-size-sm {
2242
- --checkbox-size: calc(var(--size-selector) * 5);
2243
2503
  --checkbox-pad: 0.1875rem;
2244
2504
  }
2245
2505
 
@@ -2248,7 +2508,6 @@
2248
2508
  }
2249
2509
 
2250
2510
  .zx-checkbox__root.zx-a-size-md {
2251
- --checkbox-size: calc(var(--size-selector) * 6);
2252
2511
  --checkbox-pad: 0.25rem;
2253
2512
  }
2254
2513
 
@@ -2257,7 +2516,6 @@
2257
2516
  }
2258
2517
 
2259
2518
  .zx-checkbox__root.zx-a-size-lg {
2260
- --checkbox-size: calc(var(--size-selector) * 7);
2261
2519
  --checkbox-pad: 0.3125rem;
2262
2520
  }
2263
2521
 
@@ -2266,7 +2524,6 @@
2266
2524
  }
2267
2525
 
2268
2526
  .zx-checkbox__root.zx-a-size-xl {
2269
- --checkbox-size: calc(var(--size-selector) * 8);
2270
2527
  --checkbox-pad: 0.375rem;
2271
2528
  }
2272
2529
 
@@ -2275,7 +2532,6 @@
2275
2532
  }
2276
2533
 
2277
2534
  .zx-radio-group__root {
2278
- --radio-size: calc(var(--size-selector) * 6);
2279
2535
  --radio-pad: 0.25rem;
2280
2536
  --radio-accent: var(--color-primary);
2281
2537
  }
@@ -2296,7 +2552,7 @@
2296
2552
  }
2297
2553
 
2298
2554
  .zx-radio-group__item {
2299
- display: inline-flex;
2555
+ display: flex;
2300
2556
  align-items: center;
2301
2557
  gap: 0.625rem;
2302
2558
  cursor: pointer;
@@ -2313,8 +2569,8 @@
2313
2569
  vertical-align: middle;
2314
2570
  flex-shrink: 0;
2315
2571
  box-sizing: border-box;
2316
- width: var(--radio-size);
2317
- height: var(--radio-size);
2572
+ width: calc(var(--size-selector) * 6);
2573
+ height: calc(var(--size-selector) * 6);
2318
2574
  padding: var(--radio-pad);
2319
2575
  border-radius: 9999px;
2320
2576
  color: var(--radio-accent);
@@ -2323,6 +2579,26 @@
2323
2579
  transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
2324
2580
  }
2325
2581
 
2582
+ .zx-radio-group__item-control.zx-a-size-xs {
2583
+ width: calc(var(--size-selector) * 4);
2584
+ height: calc(var(--size-selector) * 4);
2585
+ }
2586
+
2587
+ .zx-radio-group__item-control.zx-a-size-sm {
2588
+ width: calc(var(--size-selector) * 5);
2589
+ height: calc(var(--size-selector) * 5);
2590
+ }
2591
+
2592
+ .zx-radio-group__item-control.zx-a-size-lg {
2593
+ width: calc(var(--size-selector) * 7);
2594
+ height: calc(var(--size-selector) * 7);
2595
+ }
2596
+
2597
+ .zx-radio-group__item-control.zx-a-size-xl {
2598
+ width: calc(var(--size-selector) * 8);
2599
+ height: calc(var(--size-selector) * 8);
2600
+ }
2601
+
2326
2602
  .zx-radio-group__item-control.zx-s-checked {
2327
2603
  border-color: currentColor;
2328
2604
  animation: var(--duration-fast) var(--ease-standard) zero-daisy-radio;
@@ -2387,7 +2663,6 @@
2387
2663
  }
2388
2664
 
2389
2665
  .zx-radio-group__root.zx-a-size-xs {
2390
- --radio-size: calc(var(--size-selector) * 4);
2391
2666
  --radio-pad: 0.125rem;
2392
2667
  }
2393
2668
 
@@ -2396,7 +2671,6 @@
2396
2671
  }
2397
2672
 
2398
2673
  .zx-radio-group__root.zx-a-size-sm {
2399
- --radio-size: calc(var(--size-selector) * 5);
2400
2674
  --radio-pad: 0.1875rem;
2401
2675
  }
2402
2676
 
@@ -2405,7 +2679,6 @@
2405
2679
  }
2406
2680
 
2407
2681
  .zx-radio-group__root.zx-a-size-md {
2408
- --radio-size: calc(var(--size-selector) * 6);
2409
2682
  --radio-pad: 0.25rem;
2410
2683
  }
2411
2684
 
@@ -2414,7 +2687,6 @@
2414
2687
  }
2415
2688
 
2416
2689
  .zx-radio-group__root.zx-a-size-lg {
2417
- --radio-size: calc(var(--size-selector) * 7);
2418
2690
  --radio-pad: 0.3125rem;
2419
2691
  }
2420
2692
 
@@ -2423,7 +2695,6 @@
2423
2695
  }
2424
2696
 
2425
2697
  .zx-radio-group__root.zx-a-size-xl {
2426
- --radio-size: calc(var(--size-selector) * 8);
2427
2698
  --radio-pad: 0.375rem;
2428
2699
  }
2429
2700
 
@@ -2434,10 +2705,6 @@
2434
2705
  0% { padding: calc(var(--radio-pad) * 1.25); } 50% { padding: calc(var(--radio-pad) * 0.75); }
2435
2706
  }
2436
2707
 
2437
- .zx-progress__root {
2438
- --progress-track-size: calc(var(--size-selector) * 2.5);
2439
- }
2440
-
2441
2708
  .zx-root .zx-progress__root {
2442
2709
  --progress-accent: #4c45db;
2443
2710
  }
@@ -2472,12 +2739,28 @@
2472
2739
 
2473
2740
  .zx-progress__track {
2474
2741
  width: 100%;
2475
- height: var(--progress-track-size);
2742
+ height: calc(var(--size-selector) * 2.5);
2476
2743
  background: var(--color-base-300);
2477
2744
  border-radius: var(--radius-box);
2478
2745
  overflow: hidden;
2479
2746
  }
2480
2747
 
2748
+ .zx-progress__track.zx-a-size-xs {
2749
+ height: var(--size-selector);
2750
+ }
2751
+
2752
+ .zx-progress__track.zx-a-size-sm {
2753
+ height: calc(var(--size-selector) * 1.5);
2754
+ }
2755
+
2756
+ .zx-progress__track.zx-a-size-lg {
2757
+ height: calc(var(--size-selector) * 3.5);
2758
+ }
2759
+
2760
+ .zx-progress__track.zx-a-size-xl {
2761
+ height: calc(var(--size-selector) * 4.5);
2762
+ }
2763
+
2481
2764
  .zx-progress__range {
2482
2765
  height: 100%;
2483
2766
  background: var(--progress-accent);
@@ -2674,26 +2957,6 @@
2674
2957
  .zx-root.zx-theme-sunset .zx-progress__root.zx-a-color-error {
2675
2958
  --progress-accent: #e4a7a9;
2676
2959
  }
2677
-
2678
- .zx-progress__root.zx-a-size-xs {
2679
- --progress-track-size: var(--size-selector);
2680
- }
2681
-
2682
- .zx-progress__root.zx-a-size-sm {
2683
- --progress-track-size: calc(var(--size-selector) * 1.5);
2684
- }
2685
-
2686
- .zx-progress__root.zx-a-size-md {
2687
- --progress-track-size: calc(var(--size-selector) * 2.5);
2688
- }
2689
-
2690
- .zx-progress__root.zx-a-size-lg {
2691
- --progress-track-size: calc(var(--size-selector) * 3.5);
2692
- }
2693
-
2694
- .zx-progress__root.zx-a-size-xl {
2695
- --progress-track-size: calc(var(--size-selector) * 4.5);
2696
- }
2697
2960
  @keyframes zero-daisy-indeterminate {
2698
2961
  from { margin-inline-start: -40%; } to { margin-inline-start: 100%; }
2699
2962
  }
@@ -2752,6 +3015,7 @@
2752
3015
  .zx-slider__range {
2753
3016
  height: 100%;
2754
3017
  border-radius: 9999px;
3018
+ background: var(--slider-accent);
2755
3019
  }
2756
3020
 
2757
3021
  .zx-slider__thumb {
@@ -2762,9 +3026,11 @@
2762
3026
  translate: 0 -50%;
2763
3027
  margin-inline-start: calc(var(--size-selector) * -2.5);
2764
3028
  border-radius: 9999px;
3029
+ background: var(--color-base-100);
2765
3030
  cursor: pointer;
2766
3031
  outline: none;
2767
3032
  touch-action: none;
3033
+ border: 0.25rem solid var(--slider-accent);
2768
3034
  }
2769
3035
 
2770
3036
  .zx-slider__thumb.zx-f-focus-visible {
@@ -3110,13 +3376,13 @@
3110
3376
  }
3111
3377
 
3112
3378
  .zx-select__root {
3113
- display: inline-flex;
3379
+ display: flex;
3114
3380
  flex-direction: column;
3115
3381
  }
3116
3382
 
3117
3383
  .zx-select__trigger {
3118
3384
  appearance: none;
3119
- display: inline-flex;
3385
+ display: flex;
3120
3386
  align-items: center;
3121
3387
  justify-content: space-between;
3122
3388
  gap: var(--space-lg);
@@ -3329,7 +3595,7 @@
3329
3595
 
3330
3596
  .zx-button__root {
3331
3597
  appearance: none;
3332
- display: inline-flex;
3598
+ display: flex;
3333
3599
  align-items: center;
3334
3600
  justify-content: center;
3335
3601
  gap: 0.5em;
@@ -3598,26 +3864,31 @@
3598
3864
  }
3599
3865
 
3600
3866
  .zx-button__root.zx-a-size-xs {
3867
+ height: calc(var(--size-field) * 6);
3601
3868
  padding: var(--space-2xs) var(--space-xs);
3602
3869
  font-size: var(--text-xs);
3603
3870
  }
3604
3871
 
3605
3872
  .zx-button__root.zx-a-size-sm {
3873
+ height: calc(var(--size-field) * 8);
3606
3874
  padding: var(--space-xs) var(--space-sm);
3607
3875
  font-size: var(--text-sm);
3608
3876
  }
3609
3877
 
3610
3878
  .zx-button__root.zx-a-size-md {
3879
+ height: calc(var(--size-field) * 10);
3611
3880
  padding: var(--space-sm) var(--space-lg);
3612
3881
  font-size: var(--text-md);
3613
3882
  }
3614
3883
 
3615
3884
  .zx-button__root.zx-a-size-lg {
3885
+ height: calc(var(--size-field) * 12);
3616
3886
  padding: var(--space-md) var(--space-xl);
3617
3887
  font-size: var(--text-lg);
3618
3888
  }
3619
3889
 
3620
3890
  .zx-button__root.zx-a-size-xl {
3891
+ height: calc(var(--size-field) * 14);
3621
3892
  padding: var(--space-lg) var(--space-2xl);
3622
3893
  font-size: var(--text-xl);
3623
3894
  }
@@ -3656,7 +3927,6 @@
3656
3927
  }
3657
3928
 
3658
3929
  .zx-avatar__root {
3659
- --avatar-size: calc(var(--size-selector) * 10);
3660
3930
  --avatar-text: var(--text-sm);
3661
3931
  --avatar-ring: var(--color-primary);
3662
3932
  }
@@ -3664,8 +3934,8 @@
3664
3934
  .zx-avatar__root {
3665
3935
  position: relative;
3666
3936
  display: inline-grid;
3667
- width: var(--avatar-size);
3668
- height: var(--avatar-size);
3937
+ width: calc(var(--size-selector) * 10);
3938
+ height: calc(var(--size-selector) * 10);
3669
3939
  border-radius: 9999px;
3670
3940
  overflow: hidden;
3671
3941
  vertical-align: middle;
@@ -3673,6 +3943,26 @@
3673
3943
  box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--avatar-ring);
3674
3944
  }
3675
3945
 
3946
+ .zx-avatar__root.zx-a-size-xs {
3947
+ width: calc(var(--size-selector) * 6);
3948
+ height: calc(var(--size-selector) * 6);
3949
+ }
3950
+
3951
+ .zx-avatar__root.zx-a-size-sm {
3952
+ width: calc(var(--size-selector) * 8);
3953
+ height: calc(var(--size-selector) * 8);
3954
+ }
3955
+
3956
+ .zx-avatar__root.zx-a-size-lg {
3957
+ width: calc(var(--size-selector) * 12);
3958
+ height: calc(var(--size-selector) * 12);
3959
+ }
3960
+
3961
+ .zx-avatar__root.zx-a-size-xl {
3962
+ width: calc(var(--size-selector) * 16);
3963
+ height: calc(var(--size-selector) * 16);
3964
+ }
3965
+
3676
3966
  .zx-avatar__image {
3677
3967
  grid-area: 1 / 1;
3678
3968
  width: 100%;
@@ -3725,22 +4015,18 @@
3725
4015
  }
3726
4016
 
3727
4017
  .zx-avatar__root.zx-a-size-xs {
3728
- --avatar-size: calc(var(--size-selector) * 6);
3729
4018
  --avatar-text: var(--text-xs);
3730
4019
  }
3731
4020
 
3732
4021
  .zx-avatar__root.zx-a-size-sm {
3733
- --avatar-size: calc(var(--size-selector) * 8);
3734
4022
  --avatar-text: var(--text-xs);
3735
4023
  }
3736
4024
 
3737
4025
  .zx-avatar__root.zx-a-size-lg {
3738
- --avatar-size: calc(var(--size-selector) * 12);
3739
4026
  --avatar-text: var(--text-md);
3740
4027
  }
3741
4028
 
3742
4029
  .zx-avatar__root.zx-a-size-xl {
3743
- --avatar-size: calc(var(--size-selector) * 16);
3744
4030
  --avatar-text: var(--text-lg);
3745
4031
  }
3746
4032
 
@@ -3949,12 +4235,12 @@
3949
4235
  }
3950
4236
 
3951
4237
  .zx-combobox__root {
3952
- display: inline-flex;
4238
+ display: flex;
3953
4239
  flex-direction: column;
3954
4240
  }
3955
4241
 
3956
4242
  .zx-combobox__control {
3957
- display: inline-flex;
4243
+ display: flex;
3958
4244
  align-items: stretch;
3959
4245
  min-width: 13rem;
3960
4246
  box-sizing: border-box;
@@ -4169,7 +4455,7 @@
4169
4455
 
4170
4456
  .zx-toggle__root {
4171
4457
  appearance: none;
4172
- display: inline-flex;
4458
+ display: flex;
4173
4459
  align-items: center;
4174
4460
  justify-content: center;
4175
4461
  gap: 0.5em;
@@ -4280,7 +4566,7 @@
4280
4566
  }
4281
4567
 
4282
4568
  .zx-toggle-group__root {
4283
- display: inline-flex;
4569
+ display: flex;
4284
4570
  background: var(--color-base-200);
4285
4571
  border: var(--border) solid var(--color-base-300);
4286
4572
  border-radius: var(--radius-field);
@@ -4298,7 +4584,7 @@
4298
4584
 
4299
4585
  .zx-toggle-group__item {
4300
4586
  appearance: none;
4301
- display: inline-flex;
4587
+ display: flex;
4302
4588
  align-items: center;
4303
4589
  justify-content: center;
4304
4590
  gap: 0.5em;
@@ -4394,7 +4680,7 @@
4394
4680
  }
4395
4681
 
4396
4682
  .zx-number-input__root {
4397
- display: inline-flex;
4683
+ display: flex;
4398
4684
  flex-direction: column;
4399
4685
  gap: var(--space-sm);
4400
4686
  }
@@ -4429,7 +4715,7 @@
4429
4715
  }
4430
4716
 
4431
4717
  .zx-number-input__control {
4432
- display: inline-flex;
4718
+ display: flex;
4433
4719
  align-items: stretch;
4434
4720
  box-sizing: border-box;
4435
4721
  height: calc(var(--size-field) * 12);
@@ -4583,10 +4869,6 @@
4583
4869
  padding: var(--space-lg) var(--space-xl);
4584
4870
  }
4585
4871
 
4586
- .zx-rating-group__root {
4587
- --rating-size: calc(var(--size-selector) * 6);
4588
- }
4589
-
4590
4872
  .zx-root .zx-rating-group__root {
4591
4873
  --rating-fill: #c68005;
4592
4874
  }
@@ -4608,7 +4890,7 @@
4608
4890
  }
4609
4891
 
4610
4892
  .zx-rating-group__root {
4611
- display: inline-flex;
4893
+ display: flex;
4612
4894
  flex-direction: column;
4613
4895
  gap: var(--space-sm);
4614
4896
  }
@@ -4643,7 +4925,7 @@
4643
4925
  }
4644
4926
 
4645
4927
  .zx-rating-group__control {
4646
- display: inline-flex;
4928
+ display: flex;
4647
4929
  gap: var(--space-2xs);
4648
4930
  }
4649
4931
 
@@ -4658,7 +4940,7 @@
4658
4940
  }
4659
4941
 
4660
4942
  .zx-rating-group__item {
4661
- font-size: var(--rating-size);
4943
+ font-size: calc(var(--size-selector) * 6);
4662
4944
  line-height: var(--leading-none);
4663
4945
  cursor: pointer;
4664
4946
  user-select: none;
@@ -4669,6 +4951,22 @@
4669
4951
  transition: color var(--duration-fast) var(--ease-standard), mask-size var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard);
4670
4952
  }
4671
4953
 
4954
+ .zx-rating-group__item.zx-a-size-xs {
4955
+ font-size: calc(var(--size-selector) * 4);
4956
+ }
4957
+
4958
+ .zx-rating-group__item.zx-a-size-sm {
4959
+ font-size: calc(var(--size-selector) * 5);
4960
+ }
4961
+
4962
+ .zx-rating-group__item.zx-a-size-lg {
4963
+ font-size: calc(var(--size-selector) * 7);
4964
+ }
4965
+
4966
+ .zx-rating-group__item.zx-a-size-xl {
4967
+ font-size: calc(var(--size-selector) * 8);
4968
+ }
4969
+
4672
4970
  .zx-root .zx-rating-group__item {
4673
4971
  color: #07070899;
4674
4972
  }
@@ -4877,22 +5175,6 @@
4877
5175
  --rating-fill: #b18182;
4878
5176
  }
4879
5177
 
4880
- .zx-rating-group__root.zx-a-size-xs {
4881
- --rating-size: calc(var(--size-selector) * 4);
4882
- }
4883
-
4884
- .zx-rating-group__root.zx-a-size-sm {
4885
- --rating-size: calc(var(--size-selector) * 5);
4886
- }
4887
-
4888
- .zx-rating-group__root.zx-a-size-lg {
4889
- --rating-size: calc(var(--size-selector) * 7);
4890
- }
4891
-
4892
- .zx-rating-group__root.zx-a-size-xl {
4893
- --rating-size: calc(var(--size-selector) * 8);
4894
- }
4895
-
4896
5178
  .zx-tree-view__root {
4897
5179
  --tree-accent: var(--color-primary);
4898
5180
  --tree-text: var(--text-sm);
@@ -5060,7 +5342,7 @@
5060
5342
  }
5061
5343
 
5062
5344
  .zx-input__root {
5063
- display: inline-flex;
5345
+ display: flex;
5064
5346
  flex-direction: column;
5065
5347
  gap: var(--space-sm);
5066
5348
  }
@@ -5095,7 +5377,7 @@
5095
5377
  }
5096
5378
 
5097
5379
  .zx-input__control {
5098
- display: inline-flex;
5380
+ display: flex;
5099
5381
  align-items: stretch;
5100
5382
  box-sizing: border-box;
5101
5383
  height: calc(var(--size-field) * 12);
@@ -5210,7 +5492,7 @@
5210
5492
  }
5211
5493
 
5212
5494
  .zx-textarea__root {
5213
- display: inline-flex;
5495
+ display: flex;
5214
5496
  flex-direction: column;
5215
5497
  gap: var(--space-sm);
5216
5498
  }
@@ -5341,7 +5623,7 @@
5341
5623
 
5342
5624
  .zx-native-select__root {
5343
5625
  position: relative;
5344
- display: inline-flex;
5626
+ display: flex;
5345
5627
  align-items: center;
5346
5628
  }
5347
5629
 
@@ -5599,7 +5881,7 @@
5599
5881
 
5600
5882
  .zx-alert__icon {
5601
5883
  grid-row: 1 / span 2;
5602
- display: inline-flex;
5884
+ display: flex;
5603
5885
  align-items: center;
5604
5886
  color: var(--alert-ink);
5605
5887
  font-size: var(--text-lg);
@@ -5856,7 +6138,7 @@
5856
6138
  }
5857
6139
 
5858
6140
  .zx-badge__root {
5859
- display: inline-flex;
6141
+ display: flex;
5860
6142
  align-items: center;
5861
6143
  gap: 0.375em;
5862
6144
  background: var(--badge-fill);
@@ -5933,7 +6215,6 @@
5933
6215
 
5934
6216
  .zx-divider__root {
5935
6217
  --divider-ink: var(--color-base-300);
5936
- --divider-thickness: var(--border);
5937
6218
  }
5938
6219
 
5939
6220
  .zx-divider__root {
@@ -5944,14 +6225,30 @@
5944
6225
 
5945
6226
  .zx-divider__root.zx-o-horizontal {
5946
6227
  inline-size: 100%;
5947
- block-size: var(--divider-thickness);
6228
+ block-size: var(--border);
6229
+ }
6230
+
6231
+ .zx-divider__root.zx-o-horizontal.zx-a-size-lg {
6232
+ block-size: calc(var(--border) * 2);
6233
+ }
6234
+
6235
+ .zx-divider__root.zx-o-horizontal.zx-a-size-xl {
6236
+ block-size: calc(var(--border) * 3);
5948
6237
  }
5949
6238
 
5950
6239
  .zx-divider__root.zx-o-vertical {
5951
- inline-size: var(--divider-thickness);
6240
+ inline-size: var(--border);
5952
6241
  min-block-size: 1em;
5953
6242
  }
5954
6243
 
6244
+ .zx-divider__root.zx-o-vertical.zx-a-size-lg {
6245
+ inline-size: calc(var(--border) * 2);
6246
+ }
6247
+
6248
+ .zx-divider__root.zx-o-vertical.zx-a-size-xl {
6249
+ inline-size: calc(var(--border) * 3);
6250
+ }
6251
+
5955
6252
  .zx-divider__root.zx-a-color-primary {
5956
6253
  --divider-ink: var(--color-primary);
5957
6254
  }
@@ -5984,22 +6281,6 @@
5984
6281
  --divider-ink: var(--color-error);
5985
6282
  }
5986
6283
 
5987
- .zx-divider__root.zx-a-size-xs {
5988
- --divider-thickness: var(--border);
5989
- }
5990
-
5991
- .zx-divider__root.zx-a-size-sm {
5992
- --divider-thickness: var(--border);
5993
- }
5994
-
5995
- .zx-divider__root.zx-a-size-lg {
5996
- --divider-thickness: calc(var(--border) * 2);
5997
- }
5998
-
5999
- .zx-divider__root.zx-a-size-xl {
6000
- --divider-thickness: calc(var(--border) * 3);
6001
- }
6002
-
6003
6284
  .zx-skeleton__root {
6004
6285
  --skeleton-fill: var(--color-base-300);
6005
6286
  }
@@ -6196,15 +6477,14 @@
6196
6477
  }
6197
6478
 
6198
6479
  .zx-spinner__root {
6199
- --spinner-size: calc(var(--size-field) * 0.5);
6200
6480
  --spinner-ink: var(--color-primary);
6201
6481
  --spinner-track: var(--color-base-300);
6202
6482
  }
6203
6483
 
6204
6484
  .zx-spinner__root {
6205
6485
  display: inline-block;
6206
- inline-size: var(--spinner-size);
6207
- block-size: var(--spinner-size);
6486
+ inline-size: calc(var(--size-field) * 0.5);
6487
+ block-size: calc(var(--size-field) * 0.5);
6208
6488
  box-sizing: border-box;
6209
6489
  border-radius: 50%;
6210
6490
  border: calc(var(--border) * 2) solid var(--spinner-track);
@@ -6212,6 +6492,26 @@
6212
6492
  animation: zero-daisyui-spin 0.7s linear infinite;
6213
6493
  }
6214
6494
 
6495
+ .zx-spinner__root.zx-a-size-xs {
6496
+ inline-size: calc(var(--size-field) * 0.35);
6497
+ block-size: calc(var(--size-field) * 0.35);
6498
+ }
6499
+
6500
+ .zx-spinner__root.zx-a-size-sm {
6501
+ inline-size: calc(var(--size-field) * 0.42);
6502
+ block-size: calc(var(--size-field) * 0.42);
6503
+ }
6504
+
6505
+ .zx-spinner__root.zx-a-size-lg {
6506
+ inline-size: calc(var(--size-field) * 0.7);
6507
+ block-size: calc(var(--size-field) * 0.7);
6508
+ }
6509
+
6510
+ .zx-spinner__root.zx-a-size-xl {
6511
+ inline-size: calc(var(--size-field) * 0.9);
6512
+ block-size: calc(var(--size-field) * 0.9);
6513
+ }
6514
+
6215
6515
  .zx-spinner__root.zx-a-color-primary {
6216
6516
  --spinner-ink: var(--color-primary);
6217
6517
  }
@@ -6243,22 +6543,6 @@
6243
6543
  .zx-spinner__root.zx-a-color-error {
6244
6544
  --spinner-ink: var(--color-error);
6245
6545
  }
6246
-
6247
- .zx-spinner__root.zx-a-size-xs {
6248
- --spinner-size: calc(var(--size-field) * 0.35);
6249
- }
6250
-
6251
- .zx-spinner__root.zx-a-size-sm {
6252
- --spinner-size: calc(var(--size-field) * 0.42);
6253
- }
6254
-
6255
- .zx-spinner__root.zx-a-size-lg {
6256
- --spinner-size: calc(var(--size-field) * 0.7);
6257
- }
6258
-
6259
- .zx-spinner__root.zx-a-size-xl {
6260
- --spinner-size: calc(var(--size-field) * 0.9);
6261
- }
6262
6546
  @keyframes zero-daisyui-spin {
6263
6547
  to { transform: rotate(360deg); }
6264
6548
  }
@@ -6269,7 +6553,7 @@
6269
6553
  }
6270
6554
 
6271
6555
  .zx-kbd__root {
6272
- display: inline-flex;
6556
+ display: flex;
6273
6557
  align-items: center;
6274
6558
  justify-content: center;
6275
6559
  min-inline-size: 1.75em;
@@ -6348,20 +6632,43 @@
6348
6632
 
6349
6633
  .zx-status__root {
6350
6634
  --status-ink: var(--color-base-content);
6351
- --status-size: calc(var(--size-selector) * 2.5);
6352
6635
  }
6353
6636
 
6354
6637
  .zx-status__root {
6355
6638
  display: inline-block;
6356
- inline-size: var(--status-size);
6357
- block-size: var(--status-size);
6639
+ inline-size: calc(var(--size-selector) * 2.5);
6640
+ block-size: calc(var(--size-selector) * 2.5);
6358
6641
  box-sizing: border-box;
6359
6642
  vertical-align: middle;
6360
6643
  background: var(--status-ink);
6361
- border: calc(var(--status-size) / 2) solid var(--status-ink);
6644
+ border: calc((var(--size-selector) * 2.5) / 2) solid var(--status-ink);
6362
6645
  border-radius: 9999px;
6363
6646
  }
6364
6647
 
6648
+ .zx-status__root.zx-a-size-xs {
6649
+ inline-size: calc(var(--size-selector) * 1.5);
6650
+ block-size: calc(var(--size-selector) * 1.5);
6651
+ border: calc((var(--size-selector) * 1.5) / 2) solid var(--status-ink);
6652
+ }
6653
+
6654
+ .zx-status__root.zx-a-size-sm {
6655
+ inline-size: calc(var(--size-selector) * 2);
6656
+ block-size: calc(var(--size-selector) * 2);
6657
+ border: calc((var(--size-selector) * 2) / 2) solid var(--status-ink);
6658
+ }
6659
+
6660
+ .zx-status__root.zx-a-size-lg {
6661
+ inline-size: calc(var(--size-selector) * 3);
6662
+ block-size: calc(var(--size-selector) * 3);
6663
+ border: calc((var(--size-selector) * 3) / 2) solid var(--status-ink);
6664
+ }
6665
+
6666
+ .zx-status__root.zx-a-size-xl {
6667
+ inline-size: calc(var(--size-selector) * 3.5);
6668
+ block-size: calc(var(--size-selector) * 3.5);
6669
+ border: calc((var(--size-selector) * 3.5) / 2) solid var(--status-ink);
6670
+ }
6671
+
6365
6672
  .zx-status__root.zx-a-color-primary {
6366
6673
  --status-ink: var(--color-primary);
6367
6674
  }
@@ -6394,25 +6701,9 @@
6394
6701
  --status-ink: var(--color-error);
6395
6702
  }
6396
6703
 
6397
- .zx-status__root.zx-a-size-xs {
6398
- --status-size: calc(var(--size-selector) * 1.5);
6399
- }
6400
-
6401
- .zx-status__root.zx-a-size-sm {
6402
- --status-size: calc(var(--size-selector) * 2);
6403
- }
6404
-
6405
- .zx-status__root.zx-a-size-lg {
6406
- --status-size: calc(var(--size-selector) * 3);
6407
- }
6408
-
6409
- .zx-status__root.zx-a-size-xl {
6410
- --status-size: calc(var(--size-selector) * 3.5);
6411
- }
6412
-
6413
6704
  .zx-indicator__root {
6414
6705
  position: relative;
6415
- display: inline-flex;
6706
+ display: flex;
6416
6707
  vertical-align: middle;
6417
6708
  max-width: max-content;
6418
6709
  }
@@ -6657,7 +6948,6 @@
6657
6948
 
6658
6949
  .zx-timeline__root {
6659
6950
  --timeline-accent: var(--color-base-content);
6660
- --timeline-marker-size: calc(var(--size-selector) * 3);
6661
6951
  }
6662
6952
 
6663
6953
  .zx-timeline__root {
@@ -6689,18 +6979,42 @@
6689
6979
  }
6690
6980
 
6691
6981
  .zx-timeline__marker {
6692
- inline-size: var(--timeline-marker-size);
6693
- block-size: var(--timeline-marker-size);
6982
+ inline-size: calc(var(--size-selector) * 3);
6983
+ block-size: calc(var(--size-selector) * 3);
6694
6984
  box-sizing: border-box;
6695
6985
  border-radius: 9999px;
6696
6986
  background: var(--timeline-accent);
6697
- border: calc(var(--timeline-marker-size) / 2) solid var(--timeline-accent);
6987
+ border: calc((var(--size-selector) * 3) / 2) solid var(--timeline-accent);
6698
6988
  display: flex;
6699
6989
  align-items: center;
6700
6990
  justify-content: center;
6701
6991
  font-size: 0;
6702
6992
  }
6703
6993
 
6994
+ .zx-timeline__marker.zx-a-size-xs {
6995
+ inline-size: calc(var(--size-selector) * 2);
6996
+ block-size: calc(var(--size-selector) * 2);
6997
+ border: calc((var(--size-selector) * 2) / 2) solid var(--timeline-accent);
6998
+ }
6999
+
7000
+ .zx-timeline__marker.zx-a-size-sm {
7001
+ inline-size: calc(var(--size-selector) * 2.5);
7002
+ block-size: calc(var(--size-selector) * 2.5);
7003
+ border: calc((var(--size-selector) * 2.5) / 2) solid var(--timeline-accent);
7004
+ }
7005
+
7006
+ .zx-timeline__marker.zx-a-size-lg {
7007
+ inline-size: calc(var(--size-selector) * 3.5);
7008
+ block-size: calc(var(--size-selector) * 3.5);
7009
+ border: calc((var(--size-selector) * 3.5) / 2) solid var(--timeline-accent);
7010
+ }
7011
+
7012
+ .zx-timeline__marker.zx-a-size-xl {
7013
+ inline-size: calc(var(--size-selector) * 4);
7014
+ block-size: calc(var(--size-selector) * 4);
7015
+ border: calc((var(--size-selector) * 4) / 2) solid var(--timeline-accent);
7016
+ }
7017
+
6704
7018
  .zx-timeline__connector {
6705
7019
  background: var(--color-base-300);
6706
7020
  }
@@ -6765,34 +7079,18 @@
6765
7079
  --timeline-accent: var(--color-error);
6766
7080
  }
6767
7081
 
6768
- .zx-timeline__marker.zx-a-size-xs {
6769
- --timeline-marker-size: calc(var(--size-selector) * 2);
6770
- }
6771
-
6772
7082
  .zx-timeline__content.zx-a-size-xs {
6773
7083
  font-size: var(--text-xs);
6774
7084
  }
6775
7085
 
6776
- .zx-timeline__marker.zx-a-size-sm {
6777
- --timeline-marker-size: calc(var(--size-selector) * 2.5);
6778
- }
6779
-
6780
7086
  .zx-timeline__content.zx-a-size-sm {
6781
7087
  font-size: var(--text-xs);
6782
7088
  }
6783
7089
 
6784
- .zx-timeline__marker.zx-a-size-lg {
6785
- --timeline-marker-size: calc(var(--size-selector) * 3.5);
6786
- }
6787
-
6788
7090
  .zx-timeline__content.zx-a-size-lg {
6789
7091
  font-size: var(--text-md);
6790
7092
  }
6791
7093
 
6792
- .zx-timeline__marker.zx-a-size-xl {
6793
- --timeline-marker-size: calc(var(--size-selector) * 4);
6794
- }
6795
-
6796
7094
  .zx-timeline__content.zx-a-size-xl {
6797
7095
  font-size: var(--text-md);
6798
7096
  }
@@ -6944,8 +7242,6 @@
6944
7242
  }
6945
7243
 
6946
7244
  .zx-radial-progress__root {
6947
- --radial-size: calc(var(--size-selector) * 16);
6948
- --radial-thickness: calc(var(--size-selector) * 1.5);
6949
7245
  --radial-ink: var(--color-primary);
6950
7246
  --radial-track: var(--color-base-200);
6951
7247
  }
@@ -6954,11 +7250,31 @@
6954
7250
  position: relative;
6955
7251
  display: inline-grid;
6956
7252
  place-items: center;
6957
- inline-size: var(--radial-size);
6958
- block-size: var(--radial-size);
7253
+ inline-size: calc(var(--size-selector) * 16);
7254
+ block-size: calc(var(--size-selector) * 16);
6959
7255
  border-radius: 50%;
6960
7256
  }
6961
7257
 
7258
+ .zx-radial-progress__root.zx-a-size-xs {
7259
+ inline-size: calc(var(--size-selector) * 10);
7260
+ block-size: calc(var(--size-selector) * 10);
7261
+ }
7262
+
7263
+ .zx-radial-progress__root.zx-a-size-sm {
7264
+ inline-size: calc(var(--size-selector) * 13);
7265
+ block-size: calc(var(--size-selector) * 13);
7266
+ }
7267
+
7268
+ .zx-radial-progress__root.zx-a-size-lg {
7269
+ inline-size: calc(var(--size-selector) * 20);
7270
+ block-size: calc(var(--size-selector) * 20);
7271
+ }
7272
+
7273
+ .zx-radial-progress__root.zx-a-size-xl {
7274
+ inline-size: calc(var(--size-selector) * 24);
7275
+ block-size: calc(var(--size-selector) * 24);
7276
+ }
7277
+
6962
7278
  .zx-root .zx-radial-progress__root.zx-s-complete {
6963
7279
  --radial-ink: #00748c;
6964
7280
  }
@@ -7041,32 +7357,12 @@
7041
7357
  .zx-radial-progress__root.zx-a-color-error {
7042
7358
  --radial-ink: var(--color-error);
7043
7359
  }
7044
-
7045
- .zx-radial-progress__root.zx-a-size-xs {
7046
- --radial-size: calc(var(--size-selector) * 10);
7047
- --radial-thickness: calc(var(--size-selector) * 1);
7048
- }
7049
-
7050
- .zx-radial-progress__root.zx-a-size-sm {
7051
- --radial-size: calc(var(--size-selector) * 13);
7052
- --radial-thickness: calc(var(--size-selector) * 1.25);
7053
- }
7054
-
7055
- .zx-radial-progress__root.zx-a-size-lg {
7056
- --radial-size: calc(var(--size-selector) * 20);
7057
- --radial-thickness: calc(var(--size-selector) * 2);
7058
- }
7059
-
7060
- .zx-radial-progress__root.zx-a-size-xl {
7061
- --radial-size: calc(var(--size-selector) * 24);
7062
- --radial-thickness: calc(var(--size-selector) * 2.5);
7063
- }
7064
7360
  @keyframes zero-daisyui-radial-spin {
7065
7361
  to { transform: rotate(360deg); }
7066
7362
  }
7067
7363
 
7068
7364
  .zx-join__root {
7069
- display: inline-flex;
7365
+ display: flex;
7070
7366
  align-items: stretch;
7071
7367
  }
7072
7368
 
@@ -7483,7 +7779,6 @@
7483
7779
  .zx-pagination__root {
7484
7780
  --pg-accent: var(--color-primary);
7485
7781
  --pg-accent-content: var(--color-primary-content);
7486
- --pg-size: calc(var(--size-field) * 10);
7487
7782
  --pg-font: var(--text-sm);
7488
7783
  }
7489
7784
 
@@ -7494,11 +7789,11 @@
7494
7789
  }
7495
7790
 
7496
7791
  .zx-pagination__item {
7497
- display: inline-flex;
7792
+ display: flex;
7498
7793
  align-items: center;
7499
7794
  justify-content: center;
7500
- min-inline-size: var(--pg-size);
7501
- block-size: var(--pg-size);
7795
+ min-inline-size: calc(var(--size-field) * 10);
7796
+ block-size: calc(var(--size-field) * 10);
7502
7797
  padding-inline: var(--space-2xs);
7503
7798
  background: var(--color-base-200);
7504
7799
  color: var(--color-base-content);
@@ -7512,6 +7807,26 @@
7512
7807
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
7513
7808
  }
7514
7809
 
7810
+ .zx-pagination__item.zx-a-size-xs {
7811
+ min-inline-size: calc(var(--size-field) * 7);
7812
+ block-size: calc(var(--size-field) * 7);
7813
+ }
7814
+
7815
+ .zx-pagination__item.zx-a-size-sm {
7816
+ min-inline-size: calc(var(--size-field) * 9);
7817
+ block-size: calc(var(--size-field) * 9);
7818
+ }
7819
+
7820
+ .zx-pagination__item.zx-a-size-lg {
7821
+ min-inline-size: calc(var(--size-field) * 12);
7822
+ block-size: calc(var(--size-field) * 12);
7823
+ }
7824
+
7825
+ .zx-pagination__item.zx-a-size-xl {
7826
+ min-inline-size: calc(var(--size-field) * 14);
7827
+ block-size: calc(var(--size-field) * 14);
7828
+ }
7829
+
7515
7830
  .zx-pagination__item.zx-s-active {
7516
7831
  background: var(--pg-accent);
7517
7832
  color: var(--pg-accent-content);
@@ -7528,15 +7843,35 @@
7528
7843
  }
7529
7844
 
7530
7845
  .zx-pagination__ellipsis {
7531
- display: inline-flex;
7846
+ display: flex;
7532
7847
  align-items: center;
7533
7848
  justify-content: center;
7534
- min-inline-size: var(--pg-size);
7535
- block-size: var(--pg-size);
7849
+ min-inline-size: calc(var(--size-field) * 10);
7850
+ block-size: calc(var(--size-field) * 10);
7536
7851
  font-size: var(--pg-font);
7537
7852
  user-select: none;
7538
7853
  }
7539
7854
 
7855
+ .zx-pagination__ellipsis.zx-a-size-xs {
7856
+ min-inline-size: calc(var(--size-field) * 7);
7857
+ block-size: calc(var(--size-field) * 7);
7858
+ }
7859
+
7860
+ .zx-pagination__ellipsis.zx-a-size-sm {
7861
+ min-inline-size: calc(var(--size-field) * 9);
7862
+ block-size: calc(var(--size-field) * 9);
7863
+ }
7864
+
7865
+ .zx-pagination__ellipsis.zx-a-size-lg {
7866
+ min-inline-size: calc(var(--size-field) * 12);
7867
+ block-size: calc(var(--size-field) * 12);
7868
+ }
7869
+
7870
+ .zx-pagination__ellipsis.zx-a-size-xl {
7871
+ min-inline-size: calc(var(--size-field) * 14);
7872
+ block-size: calc(var(--size-field) * 14);
7873
+ }
7874
+
7540
7875
  .zx-root .zx-pagination__ellipsis {
7541
7876
  color: #08080aa6;
7542
7877
  }
@@ -7558,11 +7893,11 @@
7558
7893
  }
7559
7894
 
7560
7895
  .zx-pagination__prev-trigger {
7561
- display: inline-flex;
7896
+ display: flex;
7562
7897
  align-items: center;
7563
7898
  justify-content: center;
7564
- min-inline-size: var(--pg-size);
7565
- block-size: var(--pg-size);
7899
+ min-inline-size: calc(var(--size-field) * 10);
7900
+ block-size: calc(var(--size-field) * 10);
7566
7901
  background: var(--color-base-200);
7567
7902
  color: var(--color-base-content);
7568
7903
  border: none;
@@ -7574,6 +7909,26 @@
7574
7909
  transition: background var(--duration-fast) var(--ease-standard);
7575
7910
  }
7576
7911
 
7912
+ .zx-pagination__prev-trigger.zx-a-size-xs {
7913
+ min-inline-size: calc(var(--size-field) * 7);
7914
+ block-size: calc(var(--size-field) * 7);
7915
+ }
7916
+
7917
+ .zx-pagination__prev-trigger.zx-a-size-sm {
7918
+ min-inline-size: calc(var(--size-field) * 9);
7919
+ block-size: calc(var(--size-field) * 9);
7920
+ }
7921
+
7922
+ .zx-pagination__prev-trigger.zx-a-size-lg {
7923
+ min-inline-size: calc(var(--size-field) * 12);
7924
+ block-size: calc(var(--size-field) * 12);
7925
+ }
7926
+
7927
+ .zx-pagination__prev-trigger.zx-a-size-xl {
7928
+ min-inline-size: calc(var(--size-field) * 14);
7929
+ block-size: calc(var(--size-field) * 14);
7930
+ }
7931
+
7577
7932
  .zx-pagination__prev-trigger.zx-f-disabled {
7578
7933
  opacity: var(--disabled-opacity);
7579
7934
  cursor: not-allowed;
@@ -7585,11 +7940,11 @@
7585
7940
  }
7586
7941
 
7587
7942
  .zx-pagination__next-trigger {
7588
- display: inline-flex;
7943
+ display: flex;
7589
7944
  align-items: center;
7590
7945
  justify-content: center;
7591
- min-inline-size: var(--pg-size);
7592
- block-size: var(--pg-size);
7946
+ min-inline-size: calc(var(--size-field) * 10);
7947
+ block-size: calc(var(--size-field) * 10);
7593
7948
  background: var(--color-base-200);
7594
7949
  color: var(--color-base-content);
7595
7950
  border: none;
@@ -7601,6 +7956,26 @@
7601
7956
  transition: background var(--duration-fast) var(--ease-standard);
7602
7957
  }
7603
7958
 
7959
+ .zx-pagination__next-trigger.zx-a-size-xs {
7960
+ min-inline-size: calc(var(--size-field) * 7);
7961
+ block-size: calc(var(--size-field) * 7);
7962
+ }
7963
+
7964
+ .zx-pagination__next-trigger.zx-a-size-sm {
7965
+ min-inline-size: calc(var(--size-field) * 9);
7966
+ block-size: calc(var(--size-field) * 9);
7967
+ }
7968
+
7969
+ .zx-pagination__next-trigger.zx-a-size-lg {
7970
+ min-inline-size: calc(var(--size-field) * 12);
7971
+ block-size: calc(var(--size-field) * 12);
7972
+ }
7973
+
7974
+ .zx-pagination__next-trigger.zx-a-size-xl {
7975
+ min-inline-size: calc(var(--size-field) * 14);
7976
+ block-size: calc(var(--size-field) * 14);
7977
+ }
7978
+
7604
7979
  .zx-pagination__next-trigger.zx-f-disabled {
7605
7980
  opacity: var(--disabled-opacity);
7606
7981
  cursor: not-allowed;
@@ -7652,27 +8027,16 @@
7652
8027
  }
7653
8028
 
7654
8029
  .zx-pagination__root.zx-a-size-xs {
7655
- --pg-size: calc(var(--size-field) * 7);
7656
8030
  --pg-font: var(--text-xs);
7657
8031
  }
7658
8032
 
7659
- .zx-pagination__root.zx-a-size-sm {
7660
- --pg-size: calc(var(--size-field) * 9);
7661
- }
7662
-
7663
- .zx-pagination__root.zx-a-size-lg {
7664
- --pg-size: calc(var(--size-field) * 12);
7665
- }
7666
-
7667
8033
  .zx-pagination__root.zx-a-size-xl {
7668
- --pg-size: calc(var(--size-field) * 14);
7669
8034
  --pg-font: var(--text-lg);
7670
8035
  }
7671
8036
 
7672
8037
  .zx-steps__root {
7673
8038
  --steps-accent: var(--color-primary);
7674
8039
  --steps-accent-content: var(--color-primary-content);
7675
- --steps-ind: calc(var(--size-selector) * 7);
7676
8040
  --steps-font: var(--text-sm);
7677
8041
  }
7678
8042
 
@@ -7773,13 +8137,13 @@
7773
8137
  }
7774
8138
 
7775
8139
  .zx-steps__indicator {
7776
- display: inline-flex;
8140
+ display: flex;
7777
8141
  align-items: center;
7778
8142
  justify-content: center;
7779
- inline-size: var(--steps-ind);
7780
- block-size: var(--steps-ind);
8143
+ inline-size: calc(var(--size-selector) * 7);
8144
+ block-size: calc(var(--size-selector) * 7);
7781
8145
  border-radius: 9999px;
7782
- font-size: calc(var(--steps-ind) * 0.45);
8146
+ font-size: calc((var(--size-selector) * 7) * 0.45);
7783
8147
  font-weight: var(--weight-semibold);
7784
8148
  line-height: var(--leading-none);
7785
8149
  position: relative;
@@ -7788,6 +8152,30 @@
7788
8152
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
7789
8153
  }
7790
8154
 
8155
+ .zx-steps__indicator.zx-a-size-xs {
8156
+ inline-size: calc(var(--size-selector) * 5);
8157
+ block-size: calc(var(--size-selector) * 5);
8158
+ font-size: calc((var(--size-selector) * 5) * 0.45);
8159
+ }
8160
+
8161
+ .zx-steps__indicator.zx-a-size-sm {
8162
+ inline-size: calc(var(--size-selector) * 6);
8163
+ block-size: calc(var(--size-selector) * 6);
8164
+ font-size: calc((var(--size-selector) * 6) * 0.45);
8165
+ }
8166
+
8167
+ .zx-steps__indicator.zx-a-size-lg {
8168
+ inline-size: calc(var(--size-selector) * 8);
8169
+ block-size: calc(var(--size-selector) * 8);
8170
+ font-size: calc((var(--size-selector) * 8) * 0.45);
8171
+ }
8172
+
8173
+ .zx-steps__indicator.zx-a-size-xl {
8174
+ inline-size: calc(var(--size-selector) * 9);
8175
+ block-size: calc(var(--size-selector) * 9);
8176
+ font-size: calc((var(--size-selector) * 9) * 0.45);
8177
+ }
8178
+
7791
8179
  .zx-steps__indicator.zx-s-active {
7792
8180
  background: var(--steps-accent);
7793
8181
  color: var(--steps-accent-content);
@@ -7817,19 +8205,55 @@
7817
8205
  }
7818
8206
 
7819
8207
  .zx-steps__separator.zx-o-horizontal {
7820
- inset-block-start: calc(var(--space-xs) + var(--steps-ind) / 2);
8208
+ inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 7) / 2);
7821
8209
  inset-inline-start: 50%;
7822
8210
  inline-size: 100%;
7823
8211
  block-size: var(--border);
7824
8212
  }
7825
8213
 
8214
+ .zx-steps__separator.zx-o-horizontal.zx-a-size-xs {
8215
+ inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 5) / 2);
8216
+ }
8217
+
8218
+ .zx-steps__separator.zx-o-horizontal.zx-a-size-sm {
8219
+ inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 6) / 2);
8220
+ }
8221
+
8222
+ .zx-steps__separator.zx-o-horizontal.zx-a-size-lg {
8223
+ inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 8) / 2);
8224
+ }
8225
+
8226
+ .zx-steps__separator.zx-o-horizontal.zx-a-size-xl {
8227
+ inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 9) / 2);
8228
+ }
8229
+
7826
8230
  .zx-steps__separator.zx-o-vertical {
7827
- inset-inline-start: calc(var(--space-xs) + (var(--steps-ind) - var(--border)) / 2);
7828
- inset-block-start: calc(var(--space-xs) + var(--steps-ind));
8231
+ inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 7) - var(--border)) / 2);
8232
+ inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 7));
7829
8233
  inset-block-end: calc(var(--space-xs) * -1);
7830
8234
  inline-size: var(--border);
7831
8235
  }
7832
8236
 
8237
+ .zx-steps__separator.zx-o-vertical.zx-a-size-xs {
8238
+ inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 5) - var(--border)) / 2);
8239
+ inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 5));
8240
+ }
8241
+
8242
+ .zx-steps__separator.zx-o-vertical.zx-a-size-sm {
8243
+ inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 6) - var(--border)) / 2);
8244
+ inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 6));
8245
+ }
8246
+
8247
+ .zx-steps__separator.zx-o-vertical.zx-a-size-lg {
8248
+ inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 8) - var(--border)) / 2);
8249
+ inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 8));
8250
+ }
8251
+
8252
+ .zx-steps__separator.zx-o-vertical.zx-a-size-xl {
8253
+ inset-inline-start: calc(var(--space-xs) + ((var(--size-selector) * 9) - var(--border)) / 2);
8254
+ inset-block-start: calc(var(--space-xs) + (var(--size-selector) * 9));
8255
+ }
8256
+
7833
8257
  .zx-steps__title {
7834
8258
  font-weight: var(--weight-medium);
7835
8259
  }
@@ -8060,26 +8484,16 @@
8060
8484
  }
8061
8485
 
8062
8486
  .zx-steps__root.zx-a-size-xs {
8063
- --steps-ind: calc(var(--size-selector) * 5);
8064
8487
  --steps-font: var(--text-xs);
8065
8488
  }
8066
8489
 
8067
- .zx-steps__root.zx-a-size-sm {
8068
- --steps-ind: calc(var(--size-selector) * 6);
8069
- }
8070
-
8071
- .zx-steps__root.zx-a-size-lg {
8072
- --steps-ind: calc(var(--size-selector) * 8);
8073
- }
8074
-
8075
8490
  .zx-steps__root.zx-a-size-xl {
8076
- --steps-ind: calc(var(--size-selector) * 9);
8077
8491
  --steps-font: var(--text-md);
8078
8492
  }
8079
8493
 
8080
8494
  .zx-drawer__trigger {
8081
8495
  appearance: none;
8082
- display: inline-flex;
8496
+ display: flex;
8083
8497
  align-items: center;
8084
8498
  justify-content: center;
8085
8499
  gap: 0.5em;
@@ -8135,7 +8549,7 @@
8135
8549
 
8136
8550
  .zx-drawer__close {
8137
8551
  appearance: none;
8138
- display: inline-flex;
8552
+ display: flex;
8139
8553
  align-items: center;
8140
8554
  justify-content: center;
8141
8555
  gap: 0.5em;
@@ -8275,7 +8689,6 @@
8275
8689
 
8276
8690
  .zx-table__root {
8277
8691
  --table-accent: var(--color-base-content);
8278
- --table-pad-block: var(--space-sm);
8279
8692
  --table-pad-inline: var(--space-md);
8280
8693
  --table-font: var(--text-sm);
8281
8694
  }
@@ -8297,10 +8710,26 @@
8297
8710
  .zx-table__caption {
8298
8711
  caption-side: top;
8299
8712
  text-align: start;
8300
- padding: var(--table-pad-block) var(--table-pad-inline);
8713
+ padding: var(--space-sm) var(--table-pad-inline);
8301
8714
  font-size: var(--text-xs);
8302
8715
  }
8303
8716
 
8717
+ .zx-table__caption.zx-a-size-xs {
8718
+ padding: calc(var(--space-xs) / 2) var(--table-pad-inline);
8719
+ }
8720
+
8721
+ .zx-table__caption.zx-a-size-sm {
8722
+ padding: var(--space-xs) var(--table-pad-inline);
8723
+ }
8724
+
8725
+ .zx-table__caption.zx-a-size-lg {
8726
+ padding: var(--space-md) var(--table-pad-inline);
8727
+ }
8728
+
8729
+ .zx-table__caption.zx-a-size-xl {
8730
+ padding: var(--space-lg) var(--table-pad-inline);
8731
+ }
8732
+
8304
8733
  .zx-root .zx-table__caption {
8305
8734
  color: #07070899;
8306
8735
  }
@@ -8354,17 +8783,49 @@
8354
8783
  }
8355
8784
 
8356
8785
  .zx-table__header-cell {
8357
- padding: var(--table-pad-block) var(--table-pad-inline);
8786
+ padding: var(--space-sm) var(--table-pad-inline);
8358
8787
  text-align: start;
8359
8788
  font-weight: var(--weight-semibold);
8360
8789
  font-size: var(--text-xs);
8361
8790
  }
8362
8791
 
8792
+ .zx-table__header-cell.zx-a-size-xs {
8793
+ padding: calc(var(--space-xs) / 2) var(--table-pad-inline);
8794
+ }
8795
+
8796
+ .zx-table__header-cell.zx-a-size-sm {
8797
+ padding: var(--space-xs) var(--table-pad-inline);
8798
+ }
8799
+
8800
+ .zx-table__header-cell.zx-a-size-lg {
8801
+ padding: var(--space-md) var(--table-pad-inline);
8802
+ }
8803
+
8804
+ .zx-table__header-cell.zx-a-size-xl {
8805
+ padding: var(--space-lg) var(--table-pad-inline);
8806
+ }
8807
+
8363
8808
  .zx-table__cell {
8364
- padding: var(--table-pad-block) var(--table-pad-inline);
8809
+ padding: var(--space-sm) var(--table-pad-inline);
8365
8810
  text-align: start;
8366
8811
  }
8367
8812
 
8813
+ .zx-table__cell.zx-a-size-xs {
8814
+ padding: calc(var(--space-xs) / 2) var(--table-pad-inline);
8815
+ }
8816
+
8817
+ .zx-table__cell.zx-a-size-sm {
8818
+ padding: var(--space-xs) var(--table-pad-inline);
8819
+ }
8820
+
8821
+ .zx-table__cell.zx-a-size-lg {
8822
+ padding: var(--space-md) var(--table-pad-inline);
8823
+ }
8824
+
8825
+ .zx-table__cell.zx-a-size-xl {
8826
+ padding: var(--space-lg) var(--table-pad-inline);
8827
+ }
8828
+
8368
8829
  .zx-root .zx-table__root.zx-a-color-primary {
8369
8830
  --table-accent: #3f2bcb;
8370
8831
  }
@@ -8526,32 +8987,27 @@
8526
8987
  }
8527
8988
 
8528
8989
  .zx-table__root.zx-a-size-xs {
8529
- --table-pad-block: calc(var(--space-xs) / 2);
8530
8990
  --table-pad-inline: var(--space-xs);
8531
8991
  --table-font: var(--text-xs);
8532
8992
  }
8533
8993
 
8534
8994
  .zx-table__root.zx-a-size-sm {
8535
- --table-pad-block: var(--space-xs);
8536
8995
  --table-pad-inline: var(--space-sm);
8537
8996
  --table-font: var(--text-xs);
8538
8997
  }
8539
8998
 
8540
8999
  .zx-table__root.zx-a-size-lg {
8541
- --table-pad-block: var(--space-md);
8542
9000
  --table-pad-inline: var(--space-lg);
8543
9001
  --table-font: var(--text-md);
8544
9002
  }
8545
9003
 
8546
9004
  .zx-table__root.zx-a-size-xl {
8547
- --table-pad-block: var(--space-lg);
8548
9005
  --table-pad-inline: var(--space-xl);
8549
9006
  --table-font: var(--text-md);
8550
9007
  }
8551
9008
 
8552
9009
  .zx-file-upload__root {
8553
9010
  --fu-accent: var(--color-primary);
8554
- --fu-pad: var(--space-lg);
8555
9011
  --fu-font: var(--text-sm);
8556
9012
  }
8557
9013
 
@@ -8572,7 +9028,7 @@
8572
9028
 
8573
9029
  .zx-file-upload__trigger {
8574
9030
  appearance: none;
8575
- display: inline-flex;
9031
+ display: flex;
8576
9032
  align-items: center;
8577
9033
  gap: var(--space-xs);
8578
9034
  padding: var(--space-xs) var(--space-lg);
@@ -8602,7 +9058,7 @@
8602
9058
 
8603
9059
  .zx-file-upload__dropzone {
8604
9060
  justify-self: stretch;
8605
- padding: var(--fu-pad);
9061
+ padding: var(--space-lg);
8606
9062
  text-align: center;
8607
9063
  font-size: var(--fu-font);
8608
9064
  border: calc(var(--border) * 2) dashed var(--color-base-300);
@@ -8611,6 +9067,22 @@
8611
9067
  cursor: pointer;
8612
9068
  }
8613
9069
 
9070
+ .zx-file-upload__dropzone.zx-a-size-xs {
9071
+ padding: var(--space-sm);
9072
+ }
9073
+
9074
+ .zx-file-upload__dropzone.zx-a-size-sm {
9075
+ padding: var(--space-md);
9076
+ }
9077
+
9078
+ .zx-file-upload__dropzone.zx-a-size-lg {
9079
+ padding: var(--space-xl);
9080
+ }
9081
+
9082
+ .zx-file-upload__dropzone.zx-a-size-xl {
9083
+ padding: calc(var(--space-xl) * 1.25);
9084
+ }
9085
+
8614
9086
  .zx-root .zx-file-upload__dropzone {
8615
9087
  color: #07070899;
8616
9088
  }
@@ -8880,22 +9352,18 @@
8880
9352
  }
8881
9353
 
8882
9354
  .zx-file-upload__root.zx-a-size-xs {
8883
- --fu-pad: var(--space-sm);
8884
9355
  --fu-font: var(--text-xs);
8885
9356
  }
8886
9357
 
8887
9358
  .zx-file-upload__root.zx-a-size-sm {
8888
- --fu-pad: var(--space-md);
8889
9359
  --fu-font: var(--text-xs);
8890
9360
  }
8891
9361
 
8892
9362
  .zx-file-upload__root.zx-a-size-lg {
8893
- --fu-pad: var(--space-xl);
8894
9363
  --fu-font: var(--text-md);
8895
9364
  }
8896
9365
 
8897
9366
  .zx-file-upload__root.zx-a-size-xl {
8898
- --fu-pad: calc(var(--space-xl) * 1.25);
8899
9367
  --fu-font: var(--text-md);
8900
9368
  }
8901
9369
 
@@ -9411,7 +9879,7 @@
9411
9879
  }
9412
9880
 
9413
9881
  .zx-countdown__root {
9414
- display: inline-flex;
9882
+ display: flex;
9415
9883
  align-items: baseline;
9416
9884
  gap: 0.1em;
9417
9885
  font-size: var(--countdown-font);