@sigx/zero-daisyui 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/README.md +62 -3
  2. package/dist/audit.json +8018 -2748
  3. package/dist/components.d.ts +23 -2
  4. package/dist/components.js +2 -0
  5. package/dist/css/components/accordion.css +26 -2
  6. package/dist/css/components/alert.css +2 -0
  7. package/dist/css/components/avatar.css +2 -0
  8. package/dist/css/components/badge.css +2 -0
  9. package/dist/css/components/box.css +2 -0
  10. package/dist/css/components/breadcrumbs.css +2 -0
  11. package/dist/css/components/button.css +2 -0
  12. package/dist/css/components/card.css +2 -0
  13. package/dist/css/components/carousel.css +2 -0
  14. package/dist/css/components/center.css +2 -0
  15. package/dist/css/components/chat.css +2 -0
  16. package/dist/css/components/checkbox-group.css +98 -0
  17. package/dist/css/components/checkbox.css +10 -0
  18. package/dist/css/components/collapsible.css +16 -2
  19. package/dist/css/components/combobox.css +36 -1
  20. package/dist/css/components/container.css +2 -0
  21. package/dist/css/components/countdown.css +2 -0
  22. package/dist/css/components/dialog.css +2 -0
  23. package/dist/css/components/diff.css +7 -0
  24. package/dist/css/components/divider.css +2 -0
  25. package/dist/css/components/drawer.css +2 -0
  26. package/dist/css/components/empty-state.css +2 -0
  27. package/dist/css/components/field.css +2 -0
  28. package/dist/css/components/fieldset.css +91 -0
  29. package/dist/css/components/file-upload.css +34 -0
  30. package/dist/css/components/grid.css +2 -0
  31. package/dist/css/components/indicator.css +2 -0
  32. package/dist/css/components/input.css +137 -0
  33. package/dist/css/components/join.css +2 -0
  34. package/dist/css/components/kbd.css +2 -0
  35. package/dist/css/components/menu.css +68 -0
  36. package/dist/css/components/nav-list.css +2 -0
  37. package/dist/css/components/navbar.css +2 -0
  38. package/dist/css/components/number-input.css +2 -0
  39. package/dist/css/components/pagination.css +6 -0
  40. package/dist/css/components/popover.css +74 -0
  41. package/dist/css/components/progress.css +2 -4
  42. package/dist/css/components/radial-progress.css +2 -0
  43. package/dist/css/components/radio-group.css +10 -4
  44. package/dist/css/components/rating-group.css +2 -0
  45. package/dist/css/components/select.css +54 -1
  46. package/dist/css/components/skeleton.css +2 -0
  47. package/dist/css/components/slider.css +154 -25
  48. package/dist/css/components/spacer.css +2 -0
  49. package/dist/css/components/spinner.css +2 -0
  50. package/dist/css/components/stack.css +2 -0
  51. package/dist/css/components/stats.css +68 -16
  52. package/dist/css/components/status.css +2 -0
  53. package/dist/css/components/steps.css +2 -0
  54. package/dist/css/components/swap.css +2 -0
  55. package/dist/css/components/switch.css +23 -0
  56. package/dist/css/components/table.css +77 -0
  57. package/dist/css/components/tabs.css +15 -0
  58. package/dist/css/components/textarea.css +2 -0
  59. package/dist/css/components/timeline.css +3 -0
  60. package/dist/css/components/toast.css +2 -0
  61. package/dist/css/components/toggle-group.css +2 -0
  62. package/dist/css/components/toggle.css +2 -0
  63. package/dist/css/components/tooltip.css +67 -0
  64. package/dist/css/components/tree-view.css +6 -0
  65. package/dist/css/index.css +1053 -70
  66. package/dist/css/tokens.css +13 -13
  67. package/dist/lynx/components/accordion.css +9 -0
  68. package/dist/lynx/components/alert.css +20 -0
  69. package/dist/lynx/components/button.css +58 -1
  70. package/dist/lynx/components/checkbox-group.css +209 -0
  71. package/dist/lynx/components/checkbox.css +8 -0
  72. package/dist/lynx/components/combobox.css +46 -0
  73. package/dist/lynx/components/dialog.css +19 -0
  74. package/dist/lynx/components/diff.css +5 -0
  75. package/dist/lynx/components/drawer.css +4 -0
  76. package/dist/lynx/components/fieldset.css +219 -0
  77. package/dist/lynx/components/file-upload.css +47 -0
  78. package/dist/lynx/components/input.css +178 -0
  79. package/dist/lynx/components/number-input.css +8 -0
  80. package/dist/lynx/components/pagination.css +16 -0
  81. package/dist/lynx/components/popover.css +37 -0
  82. package/dist/lynx/components/progress.css +4 -24
  83. package/dist/lynx/components/radio-group.css +8 -0
  84. package/dist/lynx/components/rating-group.css +3 -3
  85. package/dist/lynx/components/select.css +70 -1
  86. package/dist/lynx/components/slider.css +391 -28
  87. package/dist/lynx/components/stats.css +146 -16
  88. package/dist/lynx/components/steps.css +4 -0
  89. package/dist/lynx/components/switch.css +6 -0
  90. package/dist/lynx/components/table.css +57 -0
  91. package/dist/lynx/components/tabs.css +115 -93
  92. package/dist/lynx/components/timeline.css +84 -1
  93. package/dist/lynx/components/toast.css +41 -6
  94. package/dist/lynx/components/toggle.css +5 -0
  95. package/dist/lynx/components/tree-view.css +4 -0
  96. package/dist/lynx/index.css +1912 -262
  97. package/dist/lynx/manifest.json +67 -5
  98. package/dist/lynx/tokens.css +4 -4
  99. package/dist/manifest.json +65 -3
  100. package/dist/recipes.d.ts +17 -0
  101. package/dist/recipes.d.ts.map +1 -1
  102. package/dist/recipes.js +1141 -110
  103. package/dist/recipes.js.map +1 -1
  104. package/dist/register.d.ts +18 -0
  105. package/dist/report.json +902 -270
  106. package/dist/tokens.d.ts.map +1 -1
  107. package/dist/tokens.js +18 -4
  108. package/dist/tokens.js.map +1 -1
  109. package/package.json +5 -5
  110. package/src/recipes.ts +1156 -111
  111. package/src/tokens.ts +18 -4
@@ -16,9 +16,9 @@
16
16
  :where(:root) {
17
17
  color-scheme: light dark;
18
18
  --color-primary: light-dark(oklch(45% 0.24 277.023), oklch(58% 0.233 277.117));
19
- --color-primary-content: light-dark(oklch(93% 0.034 272.788), oklch(96% 0.018 272.314));
19
+ --color-primary-content: light-dark(oklch(93% 0.034 272.788), oklch(98.9% 0.005 272.314));
20
20
  --color-secondary: oklch(65% 0.241 354.308);
21
- --color-secondary-content: oklch(94% 0.028 342.258);
21
+ --color-secondary-content: oklch(24.2% 0.028 342.258);
22
22
  --color-accent: oklch(77% 0.152 181.912);
23
23
  --color-accent-content: oklch(38% 0.063 188.416);
24
24
  --color-neutral: oklch(14% 0.005 285.823);
@@ -35,14 +35,14 @@
35
35
  --color-base-200: light-dark(oklch(98% 0 0), oklch(23.26% 0.014 253.1));
36
36
  --color-base-300: light-dark(oklch(95% 0 0), oklch(21.15% 0.012 254.09));
37
37
  --color-base-content: light-dark(oklch(21% 0.006 285.885), oklch(97.807% 0.029 256.847));
38
- --color-primary-soft: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));
39
- --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 12%, var(--color-base-100));
40
- --color-accent-soft: color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100));
41
- --color-neutral-soft: color-mix(in oklab, var(--color-neutral) 12%, var(--color-base-100));
42
- --color-info-soft: color-mix(in oklab, var(--color-info) 12%, var(--color-base-100));
43
- --color-success-soft: color-mix(in oklab, var(--color-success) 12%, var(--color-base-100));
44
- --color-warning-soft: color-mix(in oklab, var(--color-warning) 12%, var(--color-base-100));
45
- --color-error-soft: color-mix(in oklab, var(--color-error) 12%, var(--color-base-100));
38
+ --color-primary-soft: light-dark(color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-primary) 16%, var(--color-base-100)));
39
+ --color-secondary-soft: light-dark(color-mix(in oklab, var(--color-secondary) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-secondary) 16%, var(--color-base-100)));
40
+ --color-accent-soft: light-dark(color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-accent) 16%, var(--color-base-100)));
41
+ --color-neutral-soft: light-dark(color-mix(in oklab, var(--color-neutral) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-neutral) 16%, var(--color-base-100)));
42
+ --color-info-soft: light-dark(color-mix(in oklab, var(--color-info) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-info) 16%, var(--color-base-100)));
43
+ --color-success-soft: light-dark(color-mix(in oklab, var(--color-success) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-success) 16%, var(--color-base-100)));
44
+ --color-warning-soft: light-dark(color-mix(in oklab, var(--color-warning) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-warning) 16%, var(--color-base-100)));
45
+ --color-error-soft: light-dark(color-mix(in oklab, var(--color-error) 12%, var(--color-base-100)), color-mix(in oklab, var(--color-error) 16%, var(--color-base-100)));
46
46
  --radius-selector: 0.5rem;
47
47
  --radius-field: 0.25rem;
48
48
  --radius-box: 0.5rem;
@@ -99,7 +99,7 @@
99
99
  --color-primary: oklch(45% 0.24 277.023);
100
100
  --color-primary-content: oklch(93% 0.034 272.788);
101
101
  --color-secondary: oklch(65% 0.241 354.308);
102
- --color-secondary-content: oklch(94% 0.028 342.258);
102
+ --color-secondary-content: oklch(24.2% 0.028 342.258);
103
103
  --color-accent: oklch(77% 0.152 181.912);
104
104
  --color-accent-content: oklch(38% 0.063 188.416);
105
105
  --color-neutral: oklch(14% 0.005 285.823);
@@ -129,9 +129,9 @@
129
129
  [data-theme="dark"] {
130
130
  color-scheme: dark;
131
131
  --color-primary: oklch(58% 0.233 277.117);
132
- --color-primary-content: oklch(96% 0.018 272.314);
132
+ --color-primary-content: oklch(98.9% 0.005 272.314);
133
133
  --color-secondary: oklch(65% 0.241 354.308);
134
- --color-secondary-content: oklch(94% 0.028 342.258);
134
+ --color-secondary-content: oklch(24.2% 0.028 342.258);
135
135
  --color-accent: oklch(77% 0.152 181.912);
136
136
  --color-accent-content: oklch(38% 0.063 188.416);
137
137
  --color-neutral: oklch(14% 0.005 285.823);
@@ -456,6 +456,10 @@
456
456
  }
457
457
 
458
458
  @layer zero.recipes {
459
+ [data-scope="tabs"][data-part="root"] {
460
+ --tabs-ring-room: 4px;
461
+ }
462
+
459
463
  [data-scope="tabs"][data-part="root"] {
460
464
  display: flex;
461
465
  flex-direction: column;
@@ -465,6 +469,11 @@
465
469
  [data-scope="tabs"][data-part="list"] {
466
470
  display: inline-flex;
467
471
  align-self: flex-start;
472
+ box-sizing: border-box;
473
+ max-inline-size: 100%;
474
+ overflow-x: auto;
475
+ padding: var(--tabs-ring-room);
476
+ scroll-padding-inline: var(--tabs-ring-room);
468
477
  }
469
478
 
470
479
  [data-scope="tabs"][data-part="tab"] {
@@ -501,6 +510,10 @@
501
510
  outline-offset: 2px;
502
511
  }
503
512
 
513
+ [data-scope="tabs"][data-part="indicator"] {
514
+ display: none;
515
+ }
516
+
504
517
  [data-scope="tabs"][data-part="panel"] {
505
518
  font-size: var(--text-md);
506
519
  }
@@ -782,11 +795,11 @@
782
795
  [data-scope="collapsible"][data-part="root"]::details-content {
783
796
  block-size: 0;
784
797
  overflow: hidden;
785
- transition: block-size var(--duration-normal) var(--ease-standard), content-visibility var(--duration-normal) allow-discrete;
786
798
  }
787
799
 
788
800
  [data-scope="collapsible"][data-part="root"][open]::details-content {
789
801
  block-size: auto;
802
+ transition: block-size var(--duration-normal) var(--ease-standard), content-visibility var(--duration-normal) allow-discrete;
790
803
  }
791
804
 
792
805
  [data-scope="collapsible"][data-part="trigger"] {
@@ -836,6 +849,11 @@
836
849
  font-size: var(--text-md);
837
850
  }
838
851
 
852
+ [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
853
+ box-sizing: border-box;
854
+ animation: collapsible-panel-exit var(--duration-normal) var(--ease-standard);
855
+ }
856
+
839
857
  [data-scope="collapsible"][data-part="root"][data-color="primary"] {
840
858
  --collapsible-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
841
859
  }
@@ -917,11 +935,18 @@
917
935
  }
918
936
 
919
937
  @media (prefers-reduced-motion: reduce) {
920
- [data-scope="collapsible"][data-part="root"]::details-content {
938
+ [data-scope="collapsible"][data-part="root"][open]::details-content {
921
939
  transition: none;
922
940
  }
941
+
942
+ [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
943
+ animation: none;
944
+ }
923
945
  }
924
946
  }
947
+ @keyframes collapsible-panel-exit {
948
+ from { block-size: var(--collapsible-panel-height); } to { block-size: 0; padding-block: 0; }
949
+ }
925
950
 
926
951
  @layer zero.recipes {
927
952
  [data-scope="switch"][data-part="root"] {
@@ -938,6 +963,10 @@
938
963
  cursor: pointer;
939
964
  }
940
965
 
966
+ [data-scope="switch"][data-part="root"][data-readonly] {
967
+ cursor: default;
968
+ }
969
+
941
970
  [data-scope="switch"][data-part="root"][data-disabled] {
942
971
  opacity: var(--disabled-opacity);
943
972
  cursor: not-allowed;
@@ -1048,6 +1077,23 @@
1048
1077
  [data-scope="switch"][data-part="root"][data-color="error"] {
1049
1078
  --switch-accent: var(--color-error);
1050
1079
  }
1080
+
1081
+ @media (forced-colors: active) {
1082
+ [data-scope="switch"][data-part="thumb"] {
1083
+ forced-color-adjust: none;
1084
+ background-color: CanvasText;
1085
+ background-image: none;
1086
+ box-shadow: none;
1087
+ }
1088
+
1089
+ [data-scope="switch"][data-part="thumb"][data-state="checked"] {
1090
+ background-color: Highlight;
1091
+ }
1092
+
1093
+ [data-scope="switch"][data-part="control"][data-disabled] [data-scope="switch"][data-part="thumb"] {
1094
+ background-color: GrayText;
1095
+ }
1096
+ }
1051
1097
  }
1052
1098
 
1053
1099
  @layer zero.recipes {
@@ -1421,12 +1467,22 @@
1421
1467
  transform: none;
1422
1468
  }
1423
1469
 
1470
+ [data-scope="popover"][data-part="popup"]:has(> [data-scope="popover"][data-part="arrow"]) {
1471
+ overflow: visible;
1472
+ }
1473
+
1424
1474
  [data-scope="popover"][data-part="title"] {
1425
1475
  margin: 0 0 var(--space-md);
1426
1476
  font-size: var(--text-md);
1427
1477
  font-weight: var(--weight-bold);
1428
1478
  }
1429
1479
 
1480
+ [data-scope="popover"][data-part="description"] {
1481
+ margin: 0 0 var(--space-lg);
1482
+ font-size: var(--text-sm);
1483
+ color: color-mix(in oklab, var(--color-base-content) 75%, transparent);
1484
+ }
1485
+
1430
1486
  [data-scope="popover"][data-part="close"] {
1431
1487
  appearance: none;
1432
1488
  display: inline-flex;
@@ -1459,6 +1515,68 @@
1459
1515
  outline-offset: 2px;
1460
1516
  }
1461
1517
 
1518
+ [data-scope="popover"][data-part="arrow"] {
1519
+ display: none;
1520
+ position: absolute;
1521
+ box-sizing: border-box;
1522
+ width: 0.625rem;
1523
+ height: 0.625rem;
1524
+ rotate: 45deg;
1525
+ pointer-events: none;
1526
+ background: var(--color-base-100);
1527
+ border: var(--border) solid var(--color-base-300);
1528
+ }
1529
+
1530
+ [data-scope="popover"][data-part="popup"][data-placement^="top"] > [data-scope="popover"][data-part="arrow"] {
1531
+ display: block;
1532
+ top: calc(100% - 0.625rem / 2);
1533
+ left: var(--arrow-x, calc(50% - 0.625rem / 2));
1534
+ clip-path: polygon(100% 0, 100% 100%, 0 100%);
1535
+ }
1536
+
1537
+ [data-scope="popover"][data-part="popup"][data-placement^="bottom"] > [data-scope="popover"][data-part="arrow"] {
1538
+ display: block;
1539
+ top: calc(0.625rem / -2);
1540
+ left: var(--arrow-x, calc(50% - 0.625rem / 2));
1541
+ clip-path: polygon(0 0, 100% 0, 0 100%);
1542
+ }
1543
+
1544
+ [data-scope="popover"][data-part="popup"][data-placement^="left"] > [data-scope="popover"][data-part="arrow"] {
1545
+ display: block;
1546
+ left: calc(100% - 0.625rem / 2);
1547
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
1548
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
1549
+ }
1550
+
1551
+ [data-scope="popover"][data-part="popup"][data-placement^="right"] > [data-scope="popover"][data-part="arrow"] {
1552
+ display: block;
1553
+ left: calc(0.625rem / -2);
1554
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
1555
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
1556
+ }
1557
+
1558
+ [data-scope="popover"][data-part="popup"][data-placement^="start"] > [data-scope="popover"][data-part="arrow"] {
1559
+ display: block;
1560
+ inset-inline-start: calc(100% - 0.625rem / 2);
1561
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
1562
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
1563
+ }
1564
+
1565
+ [data-scope="popover"][data-part="popup"][data-placement^="end"] > [data-scope="popover"][data-part="arrow"] {
1566
+ display: block;
1567
+ inset-inline-start: calc(0.625rem / -2);
1568
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
1569
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
1570
+ }
1571
+
1572
+ [data-scope="popover"][data-part="popup"][data-placement^="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="popover"][data-part="arrow"] {
1573
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
1574
+ }
1575
+
1576
+ [data-scope="popover"][data-part="popup"][data-placement^="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="popover"][data-part="arrow"] {
1577
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
1578
+ }
1579
+
1462
1580
  [data-scope="popover"][data-part="trigger"][data-color="primary"] {
1463
1581
  background: var(--color-primary);
1464
1582
  color: var(--color-primary-content);
@@ -1686,6 +1804,71 @@
1686
1804
  transform: none;
1687
1805
  }
1688
1806
 
1807
+ [data-scope="tooltip"][data-part="popup"]:has(> [data-scope="tooltip"][data-part="arrow"]) {
1808
+ overflow: visible;
1809
+ }
1810
+
1811
+ [data-scope="tooltip"][data-part="arrow"] {
1812
+ display: none;
1813
+ position: absolute;
1814
+ box-sizing: border-box;
1815
+ width: 0.5rem;
1816
+ height: 0.5rem;
1817
+ rotate: 45deg;
1818
+ pointer-events: none;
1819
+ background: var(--color-neutral);
1820
+ }
1821
+
1822
+ [data-scope="tooltip"][data-part="popup"][data-placement^="top"] > [data-scope="tooltip"][data-part="arrow"] {
1823
+ display: block;
1824
+ top: calc(100% - 0.5rem / 2);
1825
+ left: var(--arrow-x, calc(50% - 0.5rem / 2));
1826
+ clip-path: polygon(100% 0, 100% 100%, 0 100%);
1827
+ }
1828
+
1829
+ [data-scope="tooltip"][data-part="popup"][data-placement^="bottom"] > [data-scope="tooltip"][data-part="arrow"] {
1830
+ display: block;
1831
+ top: calc(0.5rem / -2);
1832
+ left: var(--arrow-x, calc(50% - 0.5rem / 2));
1833
+ clip-path: polygon(0 0, 100% 0, 0 100%);
1834
+ }
1835
+
1836
+ [data-scope="tooltip"][data-part="popup"][data-placement^="left"] > [data-scope="tooltip"][data-part="arrow"] {
1837
+ display: block;
1838
+ left: calc(100% - 0.5rem / 2);
1839
+ top: var(--arrow-y, calc(50% - 0.5rem / 2));
1840
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
1841
+ }
1842
+
1843
+ [data-scope="tooltip"][data-part="popup"][data-placement^="right"] > [data-scope="tooltip"][data-part="arrow"] {
1844
+ display: block;
1845
+ left: calc(0.5rem / -2);
1846
+ top: var(--arrow-y, calc(50% - 0.5rem / 2));
1847
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
1848
+ }
1849
+
1850
+ [data-scope="tooltip"][data-part="popup"][data-placement^="start"] > [data-scope="tooltip"][data-part="arrow"] {
1851
+ display: block;
1852
+ inset-inline-start: calc(100% - 0.5rem / 2);
1853
+ top: var(--arrow-y, calc(50% - 0.5rem / 2));
1854
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
1855
+ }
1856
+
1857
+ [data-scope="tooltip"][data-part="popup"][data-placement^="end"] > [data-scope="tooltip"][data-part="arrow"] {
1858
+ display: block;
1859
+ inset-inline-start: calc(0.5rem / -2);
1860
+ top: var(--arrow-y, calc(50% - 0.5rem / 2));
1861
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
1862
+ }
1863
+
1864
+ [data-scope="tooltip"][data-part="popup"][data-placement^="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="tooltip"][data-part="arrow"] {
1865
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
1866
+ }
1867
+
1868
+ [data-scope="tooltip"][data-part="popup"][data-placement^="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="tooltip"][data-part="arrow"] {
1869
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
1870
+ }
1871
+
1689
1872
  [data-scope="tooltip"][data-part="trigger"][data-color="primary"] {
1690
1873
  background: var(--color-primary);
1691
1874
  color: var(--color-primary-content);
@@ -1912,6 +2095,10 @@
1912
2095
  transform: none;
1913
2096
  }
1914
2097
 
2098
+ [data-scope="menu"][data-part="popup"]:has(> [data-scope="menu"][data-part="arrow"]) {
2099
+ overflow: visible;
2100
+ }
2101
+
1915
2102
  [data-scope="menu"][data-part="item"] {
1916
2103
  display: flex;
1917
2104
  align-items: center;
@@ -2056,6 +2243,68 @@
2056
2243
  background: var(--color-base-300);
2057
2244
  }
2058
2245
 
2246
+ [data-scope="menu"][data-part="arrow"] {
2247
+ display: none;
2248
+ position: absolute;
2249
+ box-sizing: border-box;
2250
+ width: 0.625rem;
2251
+ height: 0.625rem;
2252
+ rotate: 45deg;
2253
+ pointer-events: none;
2254
+ background: var(--color-base-100);
2255
+ border: var(--border) solid var(--color-base-300);
2256
+ }
2257
+
2258
+ [data-scope="menu"][data-part="popup"][data-placement^="top"] > [data-scope="menu"][data-part="arrow"] {
2259
+ display: block;
2260
+ top: calc(100% - 0.625rem / 2);
2261
+ left: var(--arrow-x, calc(50% - 0.625rem / 2));
2262
+ clip-path: polygon(100% 0, 100% 100%, 0 100%);
2263
+ }
2264
+
2265
+ [data-scope="menu"][data-part="popup"][data-placement^="bottom"] > [data-scope="menu"][data-part="arrow"] {
2266
+ display: block;
2267
+ top: calc(0.625rem / -2);
2268
+ left: var(--arrow-x, calc(50% - 0.625rem / 2));
2269
+ clip-path: polygon(0 0, 100% 0, 0 100%);
2270
+ }
2271
+
2272
+ [data-scope="menu"][data-part="popup"][data-placement^="left"] > [data-scope="menu"][data-part="arrow"] {
2273
+ display: block;
2274
+ left: calc(100% - 0.625rem / 2);
2275
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
2276
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
2277
+ }
2278
+
2279
+ [data-scope="menu"][data-part="popup"][data-placement^="right"] > [data-scope="menu"][data-part="arrow"] {
2280
+ display: block;
2281
+ left: calc(0.625rem / -2);
2282
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
2283
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
2284
+ }
2285
+
2286
+ [data-scope="menu"][data-part="popup"][data-placement^="start"] > [data-scope="menu"][data-part="arrow"] {
2287
+ display: block;
2288
+ inset-inline-start: calc(100% - 0.625rem / 2);
2289
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
2290
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
2291
+ }
2292
+
2293
+ [data-scope="menu"][data-part="popup"][data-placement^="end"] > [data-scope="menu"][data-part="arrow"] {
2294
+ display: block;
2295
+ inset-inline-start: calc(0.625rem / -2);
2296
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
2297
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
2298
+ }
2299
+
2300
+ [data-scope="menu"][data-part="popup"][data-placement^="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="menu"][data-part="arrow"] {
2301
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
2302
+ }
2303
+
2304
+ [data-scope="menu"][data-part="popup"][data-placement^="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="menu"][data-part="arrow"] {
2305
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
2306
+ }
2307
+
2059
2308
  [data-scope="menu"][data-part="trigger"][data-color="primary"] {
2060
2309
  background: var(--color-primary);
2061
2310
  color: var(--color-primary-content);
@@ -2351,6 +2600,96 @@
2351
2600
  }
2352
2601
  }
2353
2602
 
2603
+ @layer zero.recipes {
2604
+ [data-scope="fieldset"][data-part="root"] {
2605
+ --fieldset-accent: var(--color-base-content);
2606
+ }
2607
+
2608
+ [data-scope="fieldset"][data-part="root"] {
2609
+ display: grid;
2610
+ grid-template-columns: 1fr;
2611
+ grid-auto-rows: max-content;
2612
+ gap: var(--space-sm);
2613
+ min-inline-size: 0;
2614
+ margin: 0;
2615
+ padding-block: var(--space-xs);
2616
+ padding-inline: 0;
2617
+ border: none;
2618
+ }
2619
+
2620
+ [data-scope="fieldset"][data-part="legend"] {
2621
+ padding-block: var(--space-sm);
2622
+ padding-inline: 0;
2623
+ font-size: var(--text-sm);
2624
+ font-weight: var(--weight-semibold);
2625
+ color: var(--fieldset-accent);
2626
+ }
2627
+
2628
+ [data-scope="fieldset"][data-part="legend"][data-disabled] {
2629
+ opacity: var(--disabled-opacity);
2630
+ }
2631
+
2632
+ [data-scope="fieldset"][data-part="legend"][data-invalid] {
2633
+ color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
2634
+ }
2635
+
2636
+ [data-scope="fieldset"][data-part="root"][data-color="primary"] {
2637
+ --fieldset-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
2638
+ }
2639
+
2640
+ [data-scope="fieldset"][data-part="root"][data-color="secondary"] {
2641
+ --fieldset-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
2642
+ }
2643
+
2644
+ [data-scope="fieldset"][data-part="root"][data-color="accent"] {
2645
+ --fieldset-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
2646
+ }
2647
+
2648
+ [data-scope="fieldset"][data-part="root"][data-color="neutral"] {
2649
+ --fieldset-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
2650
+ }
2651
+
2652
+ [data-scope="fieldset"][data-part="root"][data-color="info"] {
2653
+ --fieldset-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
2654
+ }
2655
+
2656
+ [data-scope="fieldset"][data-part="root"][data-color="success"] {
2657
+ --fieldset-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
2658
+ }
2659
+
2660
+ [data-scope="fieldset"][data-part="root"][data-color="warning"] {
2661
+ --fieldset-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
2662
+ }
2663
+
2664
+ [data-scope="fieldset"][data-part="root"][data-color="error"] {
2665
+ --fieldset-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
2666
+ }
2667
+
2668
+ @scope ([data-scope="fieldset"][data-part="root"][data-size="xs"]) to ([data-scope="fieldset"][data-part="root"]) {
2669
+ [data-scope="fieldset"][data-part="legend"] {
2670
+ font-size: var(--text-xs);
2671
+ }
2672
+ }
2673
+
2674
+ @scope ([data-scope="fieldset"][data-part="root"][data-size="sm"]) to ([data-scope="fieldset"][data-part="root"]) {
2675
+ [data-scope="fieldset"][data-part="legend"] {
2676
+ font-size: var(--text-xs);
2677
+ }
2678
+ }
2679
+
2680
+ @scope ([data-scope="fieldset"][data-part="root"][data-size="lg"]) to ([data-scope="fieldset"][data-part="root"]) {
2681
+ [data-scope="fieldset"][data-part="legend"] {
2682
+ font-size: var(--text-md);
2683
+ }
2684
+ }
2685
+
2686
+ @scope ([data-scope="fieldset"][data-part="root"][data-size="xl"]) to ([data-scope="fieldset"][data-part="root"]) {
2687
+ [data-scope="fieldset"][data-part="legend"] {
2688
+ font-size: var(--text-lg);
2689
+ }
2690
+ }
2691
+ }
2692
+
2354
2693
  @layer zero.recipes {
2355
2694
  [data-scope="checkbox"][data-part="root"] {
2356
2695
  --checkbox-size: calc(var(--size-selector) * 6);
@@ -2366,6 +2705,10 @@
2366
2705
  cursor: pointer;
2367
2706
  }
2368
2707
 
2708
+ [data-scope="checkbox"][data-part="root"][data-readonly] {
2709
+ cursor: default;
2710
+ }
2711
+
2369
2712
  [data-scope="checkbox"][data-part="root"][data-disabled] {
2370
2713
  opacity: var(--disabled-opacity);
2371
2714
  cursor: not-allowed;
@@ -2408,6 +2751,10 @@
2408
2751
  border-color: var(--color-error);
2409
2752
  }
2410
2753
 
2754
+ [data-scope="checkbox"][data-part="control"][data-readonly] {
2755
+ cursor: default;
2756
+ }
2757
+
2411
2758
  [data-scope="checkbox"][data-part="indicator"] {
2412
2759
  display: block;
2413
2760
  width: 100%;
@@ -2597,6 +2944,103 @@
2597
2944
  }
2598
2945
  }
2599
2946
 
2947
+ @layer zero.recipes {
2948
+ [data-scope="checkbox-group"][data-part="root"] {
2949
+ --checkbox-group-accent: var(--color-base-content);
2950
+ }
2951
+
2952
+ [data-scope="checkbox-group"][data-part="root"] {
2953
+ display: flex;
2954
+ flex-direction: column;
2955
+ gap: var(--space-md);
2956
+ }
2957
+
2958
+ [data-scope="checkbox-group"][data-part="root"][data-orientation="horizontal"] {
2959
+ flex-direction: row;
2960
+ flex-wrap: wrap;
2961
+ column-gap: var(--space-lg);
2962
+ }
2963
+
2964
+ [data-scope="checkbox-group"][data-part="label"] {
2965
+ font-size: var(--text-sm);
2966
+ font-weight: var(--weight-semibold);
2967
+ color: var(--checkbox-group-accent);
2968
+ }
2969
+
2970
+ [data-scope="checkbox-group"][data-part="label"][data-disabled] {
2971
+ opacity: var(--disabled-opacity);
2972
+ }
2973
+
2974
+ [data-scope="checkbox-group"][data-part="label"][data-required]::after {
2975
+ content: " *";
2976
+ color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
2977
+ }
2978
+
2979
+ [data-scope="checkbox-group"][data-part="root"][data-color="primary"] {
2980
+ --checkbox-group-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
2981
+ }
2982
+
2983
+ [data-scope="checkbox-group"][data-part="root"][data-color="secondary"] {
2984
+ --checkbox-group-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
2985
+ }
2986
+
2987
+ [data-scope="checkbox-group"][data-part="root"][data-color="accent"] {
2988
+ --checkbox-group-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
2989
+ }
2990
+
2991
+ [data-scope="checkbox-group"][data-part="root"][data-color="neutral"] {
2992
+ --checkbox-group-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
2993
+ }
2994
+
2995
+ [data-scope="checkbox-group"][data-part="root"][data-color="info"] {
2996
+ --checkbox-group-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
2997
+ }
2998
+
2999
+ [data-scope="checkbox-group"][data-part="root"][data-color="success"] {
3000
+ --checkbox-group-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
3001
+ }
3002
+
3003
+ [data-scope="checkbox-group"][data-part="root"][data-color="warning"] {
3004
+ --checkbox-group-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
3005
+ }
3006
+
3007
+ [data-scope="checkbox-group"][data-part="root"][data-color="error"] {
3008
+ --checkbox-group-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
3009
+ }
3010
+
3011
+ [data-scope="checkbox-group"][data-part="root"][data-size="xs"] {
3012
+ gap: var(--space-sm);
3013
+ }
3014
+
3015
+ [data-scope="checkbox-group"][data-part="root"][data-size="xl"] {
3016
+ gap: var(--space-lg);
3017
+ }
3018
+
3019
+ @scope ([data-scope="checkbox-group"][data-part="root"][data-size="xs"]) to ([data-scope="checkbox-group"][data-part="root"]) {
3020
+ [data-scope="checkbox-group"][data-part="label"] {
3021
+ font-size: var(--text-xs);
3022
+ }
3023
+ }
3024
+
3025
+ @scope ([data-scope="checkbox-group"][data-part="root"][data-size="sm"]) to ([data-scope="checkbox-group"][data-part="root"]) {
3026
+ [data-scope="checkbox-group"][data-part="label"] {
3027
+ font-size: var(--text-xs);
3028
+ }
3029
+ }
3030
+
3031
+ @scope ([data-scope="checkbox-group"][data-part="root"][data-size="lg"]) to ([data-scope="checkbox-group"][data-part="root"]) {
3032
+ [data-scope="checkbox-group"][data-part="label"] {
3033
+ font-size: var(--text-md);
3034
+ }
3035
+ }
3036
+
3037
+ @scope ([data-scope="checkbox-group"][data-part="root"][data-size="xl"]) to ([data-scope="checkbox-group"][data-part="root"]) {
3038
+ [data-scope="checkbox-group"][data-part="label"] {
3039
+ font-size: var(--text-lg);
3040
+ }
3041
+ }
3042
+ }
3043
+
2600
3044
  @layer zero.recipes {
2601
3045
  [data-scope="radio-group"][data-part="root"] {
2602
3046
  --radio-size: calc(var(--size-selector) * 6);
@@ -2610,10 +3054,6 @@
2610
3054
  gap: var(--space-md);
2611
3055
  }
2612
3056
 
2613
- [data-scope="radio-group"][data-part="root"][data-invalid] [data-part="item-control"] {
2614
- border-color: var(--color-error);
2615
- }
2616
-
2617
3057
  [data-scope="radio-group"][data-part="label"] {
2618
3058
  font-size: var(--text-sm);
2619
3059
  font-weight: var(--weight-semibold);
@@ -2630,6 +3070,10 @@
2630
3070
  cursor: pointer;
2631
3071
  }
2632
3072
 
3073
+ [data-scope="radio-group"][data-part="item"][data-readonly] {
3074
+ cursor: default;
3075
+ }
3076
+
2633
3077
  [data-scope="radio-group"][data-part="item"][data-disabled] {
2634
3078
  opacity: var(--disabled-opacity);
2635
3079
  cursor: not-allowed;
@@ -2657,6 +3101,10 @@
2657
3101
  animation: var(--duration-fast) var(--ease-standard) zero-daisy-radio;
2658
3102
  }
2659
3103
 
3104
+ [data-scope="radio-group"][data-part="item-control"][data-invalid] {
3105
+ border-color: var(--color-error);
3106
+ }
3107
+
2660
3108
  [data-scope="radio-group"][data-part="item-control"][data-focus-visible] {
2661
3109
  outline: 2px solid var(--radio-accent);
2662
3110
  outline-offset: 2px;
@@ -2807,10 +3255,6 @@
2807
3255
  transition: width var(--duration-slow) var(--ease-standard);
2808
3256
  }
2809
3257
 
2810
- [data-scope="progress"][data-part="range"][data-state="complete"] {
2811
- background: color-mix(in oklab, var(--color-success) 55%, var(--color-success-content));
2812
- }
2813
-
2814
3258
  [data-scope="progress"][data-part="range"][data-state="indeterminate"] {
2815
3259
  width: 40%;
2816
3260
  animation: zero-daisy-indeterminate 1.2s ease-in-out infinite;
@@ -2895,6 +3339,8 @@
2895
3339
  @layer zero.recipes {
2896
3340
  [data-scope="slider"][data-part="root"] {
2897
3341
  --slider-accent: var(--color-primary);
3342
+ --slider-track-size: calc(var(--size-selector) * 3);
3343
+ --slider-thumb-size: calc(var(--size-selector) * 6);
2898
3344
  }
2899
3345
 
2900
3346
  [data-scope="slider"][data-part="root"] {
@@ -2908,15 +3354,32 @@
2908
3354
  opacity: var(--disabled-opacity);
2909
3355
  }
2910
3356
 
3357
+ [data-scope="slider"][data-part="root"][data-orientation="vertical"] {
3358
+ width: auto;
3359
+ align-items: center;
3360
+ --slider-length: calc(var(--size-selector) * 40);
3361
+ }
3362
+
2911
3363
  [data-scope="slider"][data-part="label"] {
2912
3364
  font-size: var(--text-sm);
2913
3365
  font-weight: var(--weight-semibold);
2914
3366
  }
2915
3367
 
2916
3368
  [data-scope="slider"][data-part="control"] {
3369
+ appearance: none;
2917
3370
  width: 100%;
2918
- accent-color: var(--slider-accent);
3371
+ height: var(--slider-thumb-size);
3372
+ margin: 0;
3373
+ background: transparent;
2919
3374
  cursor: pointer;
3375
+ outline: none;
3376
+ accent-color: var(--slider-accent);
3377
+ --slider-fill: color-mix(in oklab, var(--slider-accent) 90%, var(--color-base-content));
3378
+ --slider-track: linear-gradient(to right, var(--slider-fill) var(--slider-percent, 50%), var(--color-base-300) 0);
3379
+ }
3380
+
3381
+ [data-scope="slider"][data-part="control"][data-readonly] {
3382
+ cursor: default;
2920
3383
  }
2921
3384
 
2922
3385
  [data-scope="slider"][data-part="control"][data-disabled] {
@@ -2929,34 +3392,105 @@
2929
3392
  }
2930
3393
 
2931
3394
  [data-scope="slider"][data-part="control"][data-invalid] {
2932
- accent-color: var(--color-error);
3395
+ --slider-accent: var(--color-error);
3396
+ }
3397
+
3398
+ [data-scope="slider"][data-part="control"]::-webkit-slider-runnable-track {
3399
+ height: var(--slider-track-size);
3400
+ border-radius: var(--radius-selector);
3401
+ background: var(--slider-track);
3402
+ }
3403
+
3404
+ [data-scope="slider"][data-part="control"]::-webkit-slider-thumb {
3405
+ appearance: none;
3406
+ box-sizing: border-box;
3407
+ width: var(--slider-thumb-size);
3408
+ height: var(--slider-thumb-size);
3409
+ margin-top: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2);
3410
+ border-radius: calc(var(--radius-selector) + min(0.25rem, var(--radius-selector) * 3));
3411
+ border: 0.25rem solid var(--slider-fill);
3412
+ background: var(--color-base-100);
3413
+ box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset;
3414
+ }
3415
+
3416
+ [data-scope="slider"][data-part="control"]::-moz-range-track {
3417
+ height: var(--slider-track-size);
3418
+ border-radius: var(--radius-selector);
3419
+ background: var(--slider-track);
3420
+ }
3421
+
3422
+ [data-scope="slider"][data-part="control"]::-moz-range-thumb {
3423
+ box-sizing: border-box;
3424
+ width: var(--slider-thumb-size);
3425
+ height: var(--slider-thumb-size);
3426
+ border-radius: calc(var(--radius-selector) + min(0.25rem, var(--radius-selector) * 3));
3427
+ border: 0.25rem solid var(--slider-fill);
3428
+ background: var(--color-base-100);
3429
+ box-shadow: 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset;
3430
+ }
3431
+
3432
+ [data-scope="slider"][data-part="control"][data-orientation="vertical"] {
3433
+ width: var(--slider-thumb-size);
3434
+ height: var(--slider-length);
3435
+ --slider-track: linear-gradient(to top, var(--slider-fill) var(--slider-percent, 50%), var(--color-base-300) 0);
3436
+ }
3437
+
3438
+ [data-scope="slider"][data-part="control"][data-orientation="vertical"]::-webkit-slider-runnable-track {
3439
+ width: var(--slider-track-size);
3440
+ height: auto;
3441
+ }
3442
+
3443
+ [data-scope="slider"][data-part="control"][data-orientation="vertical"]::-webkit-slider-thumb {
3444
+ margin-top: 0;
3445
+ margin-block-start: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2);
3446
+ }
3447
+
3448
+ [data-scope="slider"][data-part="control"][data-orientation="vertical"]::-moz-range-track {
3449
+ width: var(--slider-track-size);
3450
+ height: 100%;
2933
3451
  }
2934
3452
 
2935
3453
  [data-scope="slider"][data-part="track"] {
2936
- height: calc(var(--size-selector) * 2);
2937
- margin-block: calc(var(--size-selector) * 1.5);
3454
+ height: var(--slider-track-size);
3455
+ margin-block: calc((var(--slider-thumb-size) - var(--slider-track-size)) / 2);
2938
3456
  border-radius: 9999px;
2939
3457
  background: var(--color-base-300);
2940
3458
  cursor: pointer;
2941
3459
  }
2942
3460
 
3461
+ [data-scope="slider"][data-part="track"][data-readonly] {
3462
+ cursor: default;
3463
+ }
3464
+
2943
3465
  [data-scope="slider"][data-part="track"][data-disabled] {
2944
3466
  cursor: not-allowed;
2945
3467
  }
2946
3468
 
3469
+ [data-scope="slider"][data-part="track"][data-orientation="vertical"] {
3470
+ width: var(--slider-track-size);
3471
+ height: var(--slider-length);
3472
+ margin-block: 0;
3473
+ margin-inline: calc((var(--slider-thumb-size) - var(--slider-track-size)) / 2);
3474
+ }
3475
+
2947
3476
  [data-scope="slider"][data-part="range"] {
2948
3477
  height: 100%;
2949
3478
  border-radius: 9999px;
2950
3479
  background: color-mix(in oklab, var(--slider-accent) 90%, var(--color-base-content));
2951
3480
  }
2952
3481
 
3482
+ [data-scope="slider"][data-part="range"][data-orientation="vertical"] {
3483
+ inset-inline-start: 0;
3484
+ width: 100%;
3485
+ }
3486
+
2953
3487
  [data-scope="slider"][data-part="thumb"] {
2954
3488
  box-sizing: border-box;
2955
- width: calc(var(--size-selector) * 5);
2956
- height: calc(var(--size-selector) * 5);
3489
+ width: var(--slider-thumb-size);
3490
+ height: var(--slider-thumb-size);
2957
3491
  inset-block-start: 50%;
2958
3492
  translate: 0 -50%;
2959
- margin-inline-start: calc(var(--size-selector) * -2.5);
3493
+ margin-inline-start: calc(var(--slider-thumb-size) / -2);
2960
3494
  border-radius: 9999px;
2961
3495
  background: color-mix(in oklab, var(--slider-accent) 90%, var(--color-base-content));
2962
3496
  cursor: pointer;
@@ -2969,12 +3503,24 @@
2969
3503
  outline-offset: 2px;
2970
3504
  }
2971
3505
 
3506
+ [data-scope="slider"][data-part="thumb"][data-readonly] {
3507
+ cursor: default;
3508
+ }
3509
+
2972
3510
  [data-scope="slider"][data-part="thumb"][data-disabled] {
2973
3511
  cursor: not-allowed;
2974
3512
  }
2975
3513
 
3514
+ [data-scope="slider"][data-part="thumb"][data-orientation="vertical"] {
3515
+ inset-block-start: auto;
3516
+ inset-inline-start: 50%;
3517
+ translate: none;
3518
+ margin-inline-start: calc(var(--slider-thumb-size) / -2);
3519
+ margin-block-end: calc(var(--slider-thumb-size) / -2);
3520
+ }
3521
+
2976
3522
  [data-scope="slider"][data-part="mark"] {
2977
- padding-block-start: calc(var(--size-selector) * 2 + var(--space-2xs));
3523
+ padding-block-start: calc(var(--slider-track-size) + var(--space-2xs));
2978
3524
  font-size: var(--text-xs);
2979
3525
  line-height: 1;
2980
3526
  white-space: nowrap;
@@ -2987,10 +3533,25 @@
2987
3533
  inset-block-start: 0;
2988
3534
  inset-inline-start: -1px;
2989
3535
  width: 2px;
2990
- height: calc(var(--size-selector) * 2);
3536
+ height: var(--slider-track-size);
2991
3537
  background: var(--color-base-content);
2992
3538
  }
2993
3539
 
3540
+ [data-scope="slider"][data-part="mark"][data-orientation="vertical"] {
3541
+ inset-inline-start: 0;
3542
+ padding-block-start: 0;
3543
+ padding-inline-start: calc(var(--slider-track-size) + var(--space-2xs));
3544
+ translate: 0 50%;
3545
+ }
3546
+
3547
+ [data-scope="slider"][data-part="mark"][data-orientation="vertical"]::before {
3548
+ inset-block-start: 50%;
3549
+ inset-inline-start: 0;
3550
+ width: var(--slider-track-size);
3551
+ height: 2px;
3552
+ translate: 0 -50%;
3553
+ }
3554
+
2994
3555
  [data-scope="slider"][data-part="value-text"] {
2995
3556
  font-size: var(--text-xs);
2996
3557
  opacity: 0.6;
@@ -3032,21 +3593,33 @@
3032
3593
  --slider-accent: var(--color-error);
3033
3594
  }
3034
3595
 
3035
- @scope ([data-scope="slider"][data-part="root"][data-size="xs"]) to ([data-scope="slider"][data-part="root"]) {
3036
- [data-scope="slider"][data-part="control"] {
3037
- height: calc(var(--size-selector) * 3);
3038
- }
3596
+ [data-scope="slider"][data-part="root"][data-size="xs"] {
3597
+ --slider-track-size: calc(var(--size-selector) * 2);
3598
+ --slider-thumb-size: calc(var(--size-selector) * 4);
3599
+ }
3600
+
3601
+ [data-scope="slider"][data-part="root"][data-size="sm"] {
3602
+ --slider-track-size: calc(var(--size-selector) * 2.5);
3603
+ --slider-thumb-size: calc(var(--size-selector) * 5);
3604
+ }
3605
+
3606
+ [data-scope="slider"][data-part="root"][data-size="lg"] {
3607
+ --slider-track-size: calc(var(--size-selector) * 3.5);
3608
+ --slider-thumb-size: calc(var(--size-selector) * 7);
3609
+ }
3039
3610
 
3611
+ [data-scope="slider"][data-part="root"][data-size="xl"] {
3612
+ --slider-track-size: calc(var(--size-selector) * 4);
3613
+ --slider-thumb-size: calc(var(--size-selector) * 8);
3614
+ }
3615
+
3616
+ @scope ([data-scope="slider"][data-part="root"][data-size="xs"]) to ([data-scope="slider"][data-part="root"]) {
3040
3617
  [data-scope="slider"][data-part="label"] {
3041
3618
  font-size: var(--text-xs);
3042
3619
  }
3043
3620
  }
3044
3621
 
3045
3622
  @scope ([data-scope="slider"][data-part="root"][data-size="sm"]) to ([data-scope="slider"][data-part="root"]) {
3046
- [data-scope="slider"][data-part="control"] {
3047
- height: calc(var(--size-selector) * 4);
3048
- }
3049
-
3050
3623
  [data-scope="slider"][data-part="label"] {
3051
3624
  font-size: var(--text-sm);
3052
3625
  }
@@ -3065,24 +3638,22 @@
3065
3638
  }
3066
3639
 
3067
3640
  @scope ([data-scope="slider"][data-part="root"][data-size="lg"]) to ([data-scope="slider"][data-part="root"]) {
3068
- [data-scope="slider"][data-part="control"] {
3069
- height: calc(var(--size-selector) * 7);
3070
- }
3071
-
3072
3641
  [data-scope="slider"][data-part="label"] {
3073
3642
  font-size: var(--text-md);
3074
3643
  }
3075
3644
  }
3076
3645
 
3077
3646
  @scope ([data-scope="slider"][data-part="root"][data-size="xl"]) to ([data-scope="slider"][data-part="root"]) {
3078
- [data-scope="slider"][data-part="control"] {
3079
- height: calc(var(--size-selector) * 8);
3080
- }
3081
-
3082
3647
  [data-scope="slider"][data-part="label"] {
3083
3648
  font-size: var(--text-lg);
3084
3649
  }
3085
3650
  }
3651
+
3652
+ @media (forced-colors: active) {
3653
+ [data-scope="slider"][data-part="control"] {
3654
+ appearance: auto;
3655
+ }
3656
+ }
3086
3657
  }
3087
3658
 
3088
3659
  @layer zero.recipes {
@@ -3096,6 +3667,11 @@
3096
3667
  gap: var(--space-md);
3097
3668
  }
3098
3669
 
3670
+ [data-scope="accordion"][data-part="root"][data-orientation="horizontal"] {
3671
+ flex-direction: row;
3672
+ align-items: start;
3673
+ }
3674
+
3099
3675
  [data-scope="accordion"][data-part="item"] {
3100
3676
  interpolate-size: allow-keywords;
3101
3677
  border: var(--border) solid var(--color-base-300);
@@ -3107,11 +3683,16 @@
3107
3683
  [data-scope="accordion"][data-part="item"]::details-content {
3108
3684
  block-size: 0;
3109
3685
  overflow: hidden;
3110
- transition: block-size var(--duration-normal) var(--ease-standard), content-visibility var(--duration-normal) allow-discrete;
3111
3686
  }
3112
3687
 
3113
3688
  [data-scope="accordion"][data-part="item"][open]::details-content {
3114
3689
  block-size: auto;
3690
+ transition: block-size var(--duration-normal) var(--ease-standard), content-visibility var(--duration-normal) allow-discrete;
3691
+ }
3692
+
3693
+ [data-scope="accordion"][data-part="root"][data-orientation="horizontal"] > [data-scope="accordion"][data-part="item"] {
3694
+ flex: 1 1 0;
3695
+ min-inline-size: 0;
3115
3696
  }
3116
3697
 
3117
3698
  [data-scope="accordion"][data-part="trigger"] {
@@ -3164,6 +3745,11 @@
3164
3745
  font-size: var(--text-md);
3165
3746
  }
3166
3747
 
3748
+ [data-scope="accordion"][data-part="panel"][data-state="closed"] {
3749
+ box-sizing: border-box;
3750
+ animation: accordion-panel-exit var(--duration-normal) var(--ease-standard);
3751
+ }
3752
+
3167
3753
  [data-scope="accordion"][data-part="root"][data-color="primary"] {
3168
3754
  --accordion-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
3169
3755
  }
@@ -3245,11 +3831,18 @@
3245
3831
  }
3246
3832
 
3247
3833
  @media (prefers-reduced-motion: reduce) {
3248
- [data-scope="accordion"][data-part="item"]::details-content {
3834
+ [data-scope="accordion"][data-part="item"][open]::details-content {
3249
3835
  transition: none;
3250
3836
  }
3837
+
3838
+ [data-scope="accordion"][data-part="panel"][data-state="closed"] {
3839
+ animation: none;
3840
+ }
3251
3841
  }
3252
3842
  }
3843
+ @keyframes accordion-panel-exit {
3844
+ from { block-size: var(--accordion-panel-height); } to { block-size: 0; padding-block: 0; }
3845
+ }
3253
3846
 
3254
3847
  @layer zero.recipes {
3255
3848
  [data-scope="select"][data-part="root"] {
@@ -3259,6 +3852,7 @@
3259
3852
  [data-scope="select"][data-part="root"] {
3260
3853
  display: inline-flex;
3261
3854
  flex-direction: column;
3855
+ position: relative;
3262
3856
  }
3263
3857
 
3264
3858
  [data-scope="select"][data-part="trigger"] {
@@ -3286,6 +3880,10 @@
3286
3880
  border-color: var(--color-base-content);
3287
3881
  }
3288
3882
 
3883
+ [data-scope="select"][data-part="trigger"][data-readonly] {
3884
+ cursor: default;
3885
+ }
3886
+
3289
3887
  [data-scope="select"][data-part="trigger"][data-disabled] {
3290
3888
  opacity: var(--disabled-opacity);
3291
3889
  cursor: not-allowed;
@@ -3313,8 +3911,45 @@
3313
3911
  transition: transform var(--duration-normal) var(--ease-standard);
3314
3912
  }
3315
3913
 
3316
- [data-scope="select"][data-part="indicator"][data-state="open"] {
3317
- transform: rotate(180deg);
3914
+ [data-scope="select"][data-part="indicator"][data-state="open"] {
3915
+ transform: rotate(180deg);
3916
+ }
3917
+
3918
+ [data-scope="select"][data-part="root"]:has(> [data-scope="select"][data-part="clear-trigger"]) [data-scope="select"][data-part="indicator"] {
3919
+ margin-inline-start: calc(var(--space-2xl) + var(--space-sm));
3920
+ }
3921
+
3922
+ [data-scope="select"][data-part="clear-trigger"] {
3923
+ appearance: none;
3924
+ position: absolute;
3925
+ inset-block: 0;
3926
+ margin-block: auto;
3927
+ block-size: min(1.5rem, 100%);
3928
+ min-inline-size: 1.5rem;
3929
+ inset-inline-end: calc(var(--size-field) * 4 + 1em + var(--space-xs));
3930
+ display: inline-flex;
3931
+ align-items: center;
3932
+ justify-content: center;
3933
+ padding: 0 var(--space-xs);
3934
+ border: none;
3935
+ background: transparent;
3936
+ color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
3937
+ font: inherit;
3938
+ font-size: var(--text-sm);
3939
+ line-height: var(--leading-none);
3940
+ border-radius: var(--radius-field);
3941
+ cursor: pointer;
3942
+ transition: background var(--duration-fast) var(--ease-standard);
3943
+ }
3944
+
3945
+ [data-scope="select"][data-part="clear-trigger"]:hover:not([data-disabled]) {
3946
+ background: var(--color-base-200);
3947
+ color: var(--color-base-content);
3948
+ }
3949
+
3950
+ [data-scope="select"][data-part="clear-trigger"][data-focus-visible] {
3951
+ outline: 2px solid var(--color-base-content);
3952
+ outline-offset: 2px;
3318
3953
  }
3319
3954
 
3320
3955
  [data-scope="select"][data-part="popup"] {
@@ -3327,7 +3962,10 @@
3327
3962
  border-radius: var(--radius-box);
3328
3963
  box-shadow: var(--shadow-lg);
3329
3964
  padding: var(--space-md);
3330
- min-width: 13rem;
3965
+ min-width: var(--anchor-width, 13rem);
3966
+ box-sizing: border-box;
3967
+ max-height: min(20rem, var(--available-height, 20rem));
3968
+ overflow-y: auto;
3331
3969
  }
3332
3970
 
3333
3971
  [data-scope="select"][data-part="popup"][data-state="open"] {
@@ -3381,6 +4019,12 @@
3381
4019
  color: var(--select-accent);
3382
4020
  }
3383
4021
 
4022
+ [data-scope="select"][data-part="separator"] {
4023
+ height: var(--border);
4024
+ margin: var(--space-sm) var(--space-md);
4025
+ background: var(--color-base-300);
4026
+ }
4027
+
3384
4028
  [data-scope="select"][data-part="root"][data-color="primary"] {
3385
4029
  --select-accent: var(--color-primary);
3386
4030
  }
@@ -4220,6 +4864,23 @@
4220
4864
  cursor: not-allowed;
4221
4865
  }
4222
4866
 
4867
+ [data-scope="combobox"][data-part="clear-trigger"] {
4868
+ appearance: none;
4869
+ border: none;
4870
+ background: transparent;
4871
+ color: inherit;
4872
+ font: inherit;
4873
+ opacity: 0.6;
4874
+ padding: 0 var(--space-xs);
4875
+ line-height: var(--leading-none);
4876
+ cursor: pointer;
4877
+ transition: opacity var(--duration-fast) var(--ease-standard);
4878
+ }
4879
+
4880
+ [data-scope="combobox"][data-part="clear-trigger"]:hover:not([data-disabled]) {
4881
+ opacity: 1;
4882
+ }
4883
+
4223
4884
  [data-scope="combobox"][data-part="popup"] {
4224
4885
  opacity: 0;
4225
4886
  transform: translateY(-4px);
@@ -4230,7 +4891,10 @@
4230
4891
  border-radius: var(--radius-box);
4231
4892
  box-shadow: var(--shadow-lg);
4232
4893
  padding: var(--space-md);
4233
- min-width: 13rem;
4894
+ min-width: var(--anchor-width, 13rem);
4895
+ box-sizing: border-box;
4896
+ max-height: min(20rem, var(--available-height, 20rem));
4897
+ overflow-y: auto;
4234
4898
  }
4235
4899
 
4236
4900
  [data-scope="combobox"][data-part="popup"][data-state="open"] {
@@ -4289,6 +4953,19 @@
4289
4953
  opacity: 0.6;
4290
4954
  }
4291
4955
 
4956
+ [data-scope="combobox"][data-part="loading"] {
4957
+ padding: var(--space-lg);
4958
+ font-size: var(--text-sm);
4959
+ text-align: center;
4960
+ opacity: 0.6;
4961
+ }
4962
+
4963
+ [data-scope="combobox"][data-part="separator"] {
4964
+ height: var(--border);
4965
+ margin: var(--space-sm) var(--space-md);
4966
+ background: var(--color-base-300);
4967
+ }
4968
+
4292
4969
  [data-scope="combobox"][data-part="root"][data-color="primary"] {
4293
4970
  --combobox-accent: var(--color-primary);
4294
4971
  }
@@ -5180,6 +5857,10 @@
5180
5857
  transform: rotate(90deg);
5181
5858
  }
5182
5859
 
5860
+ [data-scope="tree-view"][data-part="branch-indicator"][data-state="loading"] {
5861
+ transform: rotate(45deg);
5862
+ }
5863
+
5183
5864
  [data-scope="tree-view"][data-part="branch-indicator"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
5184
5865
  scale: -1 1;
5185
5866
  }
@@ -5280,6 +5961,7 @@
5280
5961
  [data-scope="input"][data-part="control"] {
5281
5962
  display: inline-flex;
5282
5963
  align-items: stretch;
5964
+ gap: var(--space-2xs);
5283
5965
  box-sizing: border-box;
5284
5966
  height: calc(var(--size-field) * 12);
5285
5967
  background: var(--color-base-100);
@@ -5328,6 +6010,92 @@
5328
6010
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
5329
6011
  }
5330
6012
 
6013
+ [data-scope="input"][data-part="adornment"] {
6014
+ display: inline-flex;
6015
+ align-items: center;
6016
+ flex: none;
6017
+ color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
6018
+ font-size: var(--text-sm);
6019
+ line-height: var(--leading-none);
6020
+ }
6021
+
6022
+ [data-scope="input"][data-part="adornment"][data-placement="start"] {
6023
+ order: -1;
6024
+ padding-inline-start: var(--space-md);
6025
+ }
6026
+
6027
+ [data-scope="input"][data-part="adornment"][data-placement="end"] {
6028
+ order: 1;
6029
+ padding-inline-end: var(--space-md);
6030
+ }
6031
+
6032
+ [data-scope="input"][data-part="clear-trigger"] {
6033
+ appearance: none;
6034
+ border: none;
6035
+ background: transparent;
6036
+ color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
6037
+ border-radius: 9999px;
6038
+ align-self: center;
6039
+ flex: none;
6040
+ order: 1;
6041
+ margin-inline-end: var(--space-xs);
6042
+ padding: var(--space-2xs) var(--space-xs);
6043
+ font-size: var(--text-sm);
6044
+ font-weight: var(--weight-semibold);
6045
+ line-height: var(--leading-none);
6046
+ cursor: pointer;
6047
+ }
6048
+
6049
+ [data-scope="input"][data-part="clear-trigger"]:hover:not([data-disabled]) {
6050
+ color: var(--color-base-content);
6051
+ background: var(--color-base-200);
6052
+ }
6053
+
6054
+ [data-scope="input"][data-part="clear-trigger"][data-disabled] {
6055
+ cursor: not-allowed;
6056
+ }
6057
+
6058
+ [data-scope="input"][data-part="clear-trigger"][data-focus-visible] {
6059
+ outline: 2px solid var(--color-base-content);
6060
+ outline-offset: 2px;
6061
+ }
6062
+
6063
+ [data-scope="input"][data-part="visibility-trigger"] {
6064
+ appearance: none;
6065
+ border: none;
6066
+ background: transparent;
6067
+ color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
6068
+ border-radius: 9999px;
6069
+ align-self: center;
6070
+ flex: none;
6071
+ order: 1;
6072
+ margin-inline-end: var(--space-xs);
6073
+ padding: var(--space-2xs) var(--space-xs);
6074
+ font-size: var(--text-sm);
6075
+ font-weight: var(--weight-semibold);
6076
+ line-height: var(--leading-none);
6077
+ cursor: pointer;
6078
+ }
6079
+
6080
+ [data-scope="input"][data-part="visibility-trigger"][data-state="on"] {
6081
+ color: var(--color-base-content);
6082
+ background: var(--color-base-200);
6083
+ }
6084
+
6085
+ [data-scope="input"][data-part="visibility-trigger"]:hover:not([data-disabled]) {
6086
+ color: var(--color-base-content);
6087
+ background: var(--color-base-200);
6088
+ }
6089
+
6090
+ [data-scope="input"][data-part="visibility-trigger"][data-disabled] {
6091
+ cursor: not-allowed;
6092
+ }
6093
+
6094
+ [data-scope="input"][data-part="visibility-trigger"][data-focus-visible] {
6095
+ outline: 2px solid var(--color-base-content);
6096
+ outline-offset: 2px;
6097
+ }
6098
+
5331
6099
  [data-scope="input"][data-part="root"][data-color="primary"] {
5332
6100
  --input-accent: var(--color-primary);
5333
6101
  }
@@ -5369,6 +6137,18 @@
5369
6137
  font-size: var(--text-xs);
5370
6138
  padding: var(--space-2xs) var(--space-xs);
5371
6139
  }
6140
+
6141
+ [data-scope="input"][data-part="adornment"] {
6142
+ font-size: var(--text-xs);
6143
+ }
6144
+
6145
+ [data-scope="input"][data-part="clear-trigger"] {
6146
+ font-size: var(--text-xs);
6147
+ }
6148
+
6149
+ [data-scope="input"][data-part="visibility-trigger"] {
6150
+ font-size: var(--text-xs);
6151
+ }
5372
6152
  }
5373
6153
 
5374
6154
  @scope ([data-scope="input"][data-part="root"][data-size="sm"]) to ([data-scope="input"][data-part="root"]) {
@@ -5380,6 +6160,18 @@
5380
6160
  font-size: var(--text-xs);
5381
6161
  padding: var(--space-xs) var(--space-sm);
5382
6162
  }
6163
+
6164
+ [data-scope="input"][data-part="adornment"] {
6165
+ font-size: var(--text-xs);
6166
+ }
6167
+
6168
+ [data-scope="input"][data-part="clear-trigger"] {
6169
+ font-size: var(--text-xs);
6170
+ }
6171
+
6172
+ [data-scope="input"][data-part="visibility-trigger"] {
6173
+ font-size: var(--text-xs);
6174
+ }
5383
6175
  }
5384
6176
 
5385
6177
  @scope ([data-scope="input"][data-part="root"][data-size="lg"]) to ([data-scope="input"][data-part="root"]) {
@@ -5391,6 +6183,18 @@
5391
6183
  font-size: var(--text-md);
5392
6184
  padding: var(--space-md) var(--space-lg);
5393
6185
  }
6186
+
6187
+ [data-scope="input"][data-part="adornment"] {
6188
+ font-size: var(--text-md);
6189
+ }
6190
+
6191
+ [data-scope="input"][data-part="clear-trigger"] {
6192
+ font-size: var(--text-md);
6193
+ }
6194
+
6195
+ [data-scope="input"][data-part="visibility-trigger"] {
6196
+ font-size: var(--text-md);
6197
+ }
5394
6198
  }
5395
6199
 
5396
6200
  @scope ([data-scope="input"][data-part="root"][data-size="xl"]) to ([data-scope="input"][data-part="root"]) {
@@ -5402,6 +6206,18 @@
5402
6206
  font-size: var(--text-lg);
5403
6207
  padding: var(--space-lg) var(--space-xl);
5404
6208
  }
6209
+
6210
+ [data-scope="input"][data-part="adornment"] {
6211
+ font-size: var(--text-lg);
6212
+ }
6213
+
6214
+ [data-scope="input"][data-part="clear-trigger"] {
6215
+ font-size: var(--text-lg);
6216
+ }
6217
+
6218
+ [data-scope="input"][data-part="visibility-trigger"] {
6219
+ font-size: var(--text-lg);
6220
+ }
5405
6221
  }
5406
6222
  }
5407
6223
 
@@ -6687,6 +7503,7 @@
6687
7503
 
6688
7504
  [data-scope="stats"][data-part="root"] {
6689
7505
  display: flex;
7506
+ overflow-x: auto;
6690
7507
  border: var(--border) solid var(--color-base-200);
6691
7508
  border-radius: var(--radius-box);
6692
7509
  background: var(--color-base-100);
@@ -6721,6 +7538,7 @@
6721
7538
 
6722
7539
  [data-scope="stats"][data-part="value"] {
6723
7540
  grid-column: 1;
7541
+ white-space: nowrap;
6724
7542
  font-size: var(--text-2xl);
6725
7543
  font-weight: var(--weight-bold);
6726
7544
  font-variant-numeric: tabular-nums;
@@ -6739,36 +7557,84 @@
6739
7557
  align-self: center;
6740
7558
  }
6741
7559
 
6742
- [data-scope="stats"][data-part="root"][data-color="primary"] {
6743
- --stats-accent: var(--color-primary);
7560
+ [data-scope="stats"][data-part="item"][data-color="primary"] {
7561
+ --stats-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
7562
+ }
7563
+
7564
+ [data-scope="stats"][data-part="item"][data-color="secondary"] {
7565
+ --stats-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
7566
+ }
7567
+
7568
+ [data-scope="stats"][data-part="item"][data-color="accent"] {
7569
+ --stats-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
7570
+ }
7571
+
7572
+ [data-scope="stats"][data-part="item"][data-color="neutral"] {
7573
+ --stats-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
7574
+ }
7575
+
7576
+ [data-scope="stats"][data-part="item"][data-color="info"] {
7577
+ --stats-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
7578
+ }
7579
+
7580
+ [data-scope="stats"][data-part="item"][data-color="success"] {
7581
+ --stats-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
7582
+ }
7583
+
7584
+ [data-scope="stats"][data-part="item"][data-color="warning"] {
7585
+ --stats-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
7586
+ }
7587
+
7588
+ [data-scope="stats"][data-part="item"][data-color="error"] {
7589
+ --stats-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
7590
+ }
7591
+
7592
+ @scope ([data-scope="stats"][data-part="root"][data-color="primary"]) to ([data-scope="stats"][data-part="root"]) {
7593
+ [data-scope="stats"][data-part="item"] {
7594
+ --stats-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
7595
+ }
6744
7596
  }
6745
7597
 
6746
- [data-scope="stats"][data-part="root"][data-color="secondary"] {
6747
- --stats-accent: var(--color-secondary);
7598
+ @scope ([data-scope="stats"][data-part="root"][data-color="secondary"]) to ([data-scope="stats"][data-part="root"]) {
7599
+ [data-scope="stats"][data-part="item"] {
7600
+ --stats-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
7601
+ }
6748
7602
  }
6749
7603
 
6750
- [data-scope="stats"][data-part="root"][data-color="accent"] {
6751
- --stats-accent: var(--color-accent);
7604
+ @scope ([data-scope="stats"][data-part="root"][data-color="accent"]) to ([data-scope="stats"][data-part="root"]) {
7605
+ [data-scope="stats"][data-part="item"] {
7606
+ --stats-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
7607
+ }
6752
7608
  }
6753
7609
 
6754
- [data-scope="stats"][data-part="root"][data-color="neutral"] {
6755
- --stats-accent: var(--color-neutral);
7610
+ @scope ([data-scope="stats"][data-part="root"][data-color="neutral"]) to ([data-scope="stats"][data-part="root"]) {
7611
+ [data-scope="stats"][data-part="item"] {
7612
+ --stats-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
7613
+ }
6756
7614
  }
6757
7615
 
6758
- [data-scope="stats"][data-part="root"][data-color="info"] {
6759
- --stats-accent: var(--color-info);
7616
+ @scope ([data-scope="stats"][data-part="root"][data-color="info"]) to ([data-scope="stats"][data-part="root"]) {
7617
+ [data-scope="stats"][data-part="item"] {
7618
+ --stats-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
7619
+ }
6760
7620
  }
6761
7621
 
6762
- [data-scope="stats"][data-part="root"][data-color="success"] {
6763
- --stats-accent: var(--color-success);
7622
+ @scope ([data-scope="stats"][data-part="root"][data-color="success"]) to ([data-scope="stats"][data-part="root"]) {
7623
+ [data-scope="stats"][data-part="item"] {
7624
+ --stats-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
7625
+ }
6764
7626
  }
6765
7627
 
6766
- [data-scope="stats"][data-part="root"][data-color="warning"] {
6767
- --stats-accent: var(--color-warning);
7628
+ @scope ([data-scope="stats"][data-part="root"][data-color="warning"]) to ([data-scope="stats"][data-part="root"]) {
7629
+ [data-scope="stats"][data-part="item"] {
7630
+ --stats-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
7631
+ }
6768
7632
  }
6769
7633
 
6770
- [data-scope="stats"][data-part="root"][data-color="error"] {
6771
- --stats-accent: var(--color-error);
7634
+ @scope ([data-scope="stats"][data-part="root"][data-color="error"]) to ([data-scope="stats"][data-part="root"]) {
7635
+ [data-scope="stats"][data-part="item"] {
7636
+ --stats-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
7637
+ }
6772
7638
  }
6773
7639
 
6774
7640
  @scope ([data-scope="stats"][data-part="root"][data-size="xs"]) to ([data-scope="stats"][data-part="root"]) {
@@ -6813,6 +7679,7 @@
6813
7679
 
6814
7680
  [data-scope="timeline"][data-part="root"][data-orientation="horizontal"] {
6815
7681
  flex-direction: row;
7682
+ overflow-x: auto;
6816
7683
  }
6817
7684
 
6818
7685
  [data-scope="timeline"][data-part="item"] {
@@ -7854,12 +8721,16 @@
7854
8721
  --pg-accent-content: var(--color-primary-content);
7855
8722
  --pg-size: calc(var(--size-field) * 10);
7856
8723
  --pg-font: var(--text-sm);
8724
+ --pg-ring-room: 4px;
7857
8725
  }
7858
8726
 
7859
8727
  [data-scope="pagination"][data-part="root"] {
7860
8728
  display: flex;
7861
8729
  align-items: center;
7862
8730
  gap: var(--space-2xs);
8731
+ overflow-x: auto;
8732
+ padding: var(--pg-ring-room);
8733
+ scroll-padding-inline: var(--pg-ring-room);
7863
8734
  }
7864
8735
 
7865
8736
  [data-scope="pagination"][data-part="item"] {
@@ -8739,6 +9610,11 @@
8739
9610
  background: var(--color-base-100);
8740
9611
  }
8741
9612
 
9613
+ [data-scope="table"][data-part="root"][data-focus-visible] {
9614
+ outline: 2px solid var(--color-base-content);
9615
+ outline-offset: -2px;
9616
+ }
9617
+
8742
9618
  [data-scope="table"][data-part="table"] {
8743
9619
  border-collapse: collapse;
8744
9620
  inline-size: 100%;
@@ -8775,6 +9651,66 @@
8775
9651
  color: color-mix(in oklab, var(--table-accent) 60%, transparent);
8776
9652
  }
8777
9653
 
9654
+ [data-scope="table"][data-part="sort-trigger"] {
9655
+ appearance: none;
9656
+ display: inline-flex;
9657
+ align-items: center;
9658
+ margin: 0;
9659
+ border: 0;
9660
+ font: inherit;
9661
+ letter-spacing: inherit;
9662
+ text-transform: inherit;
9663
+ text-align: inherit;
9664
+ cursor: pointer;
9665
+ gap: var(--space-2xs);
9666
+ padding: 0;
9667
+ border-radius: var(--radius-selector);
9668
+ background: transparent;
9669
+ color: inherit;
9670
+ transition: color var(--duration-fast) var(--ease-standard);
9671
+ }
9672
+
9673
+ [data-scope="table"][data-part="sort-trigger"][data-state="ascending"] {
9674
+ color: var(--table-accent);
9675
+ }
9676
+
9677
+ [data-scope="table"][data-part="sort-trigger"][data-state="descending"] {
9678
+ color: var(--table-accent);
9679
+ }
9680
+
9681
+ [data-scope="table"][data-part="sort-trigger"]:hover:not([data-disabled]) {
9682
+ color: var(--table-accent);
9683
+ }
9684
+
9685
+ [data-scope="table"][data-part="sort-trigger"][data-disabled] {
9686
+ cursor: not-allowed;
9687
+ opacity: var(--disabled-opacity);
9688
+ }
9689
+
9690
+ [data-scope="table"][data-part="sort-trigger"][data-focus-visible] {
9691
+ outline: 2px solid var(--color-base-content);
9692
+ outline-offset: 2px;
9693
+ }
9694
+
9695
+ [data-scope="table"][data-part="sort-indicator"] {
9696
+ display: inline-block;
9697
+ font-size: 0.75em;
9698
+ line-height: 1;
9699
+ transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
9700
+ }
9701
+
9702
+ [data-scope="table"][data-part="sort-indicator"][data-state="descending"] {
9703
+ transform: rotate(180deg);
9704
+ }
9705
+
9706
+ [data-scope="table"][data-part="sort-indicator"][data-state="none"] {
9707
+ opacity: 0;
9708
+ }
9709
+
9710
+ [data-scope="table"][data-part="sort-trigger"]:is(:hover, [data-focus-visible]) > [data-scope="table"][data-part="sort-indicator"][data-state="none"] {
9711
+ opacity: 0.6;
9712
+ }
9713
+
8778
9714
  [data-scope="table"][data-part="cell"] {
8779
9715
  padding: var(--table-pad-block) var(--table-pad-inline);
8780
9716
  text-align: var(--table-cell-align);
@@ -8964,6 +9900,16 @@
8964
9900
  padding-block: var(--space-xs);
8965
9901
  }
8966
9902
  }
9903
+
9904
+ @media (prefers-reduced-motion: reduce) {
9905
+ [data-scope="table"][data-part="sort-trigger"] {
9906
+ transition: none;
9907
+ }
9908
+
9909
+ [data-scope="table"][data-part="sort-indicator"] {
9910
+ transition: none;
9911
+ }
9912
+ }
8967
9913
  }
8968
9914
 
8969
9915
  @layer zero.structure {
@@ -9227,6 +10173,11 @@
9227
10173
  opacity: var(--disabled-opacity);
9228
10174
  }
9229
10175
 
10176
+ [data-scope="file-upload"][data-part="item"][data-invalid] {
10177
+ border-color: var(--color-error);
10178
+ background: color-mix(in oklab, var(--color-error) 8%, var(--color-base-100));
10179
+ }
10180
+
9230
10181
  [data-scope="file-upload"][data-part="item-name"] {
9231
10182
  flex: 1 1 auto;
9232
10183
  min-width: 0;
@@ -9267,6 +10218,33 @@
9267
10218
  outline-offset: 2px;
9268
10219
  }
9269
10220
 
10221
+ [data-scope="file-upload"][data-part="clear-trigger"] {
10222
+ appearance: none;
10223
+ border: none;
10224
+ background: transparent;
10225
+ color: inherit;
10226
+ border-radius: 9999px;
10227
+ padding: var(--space-2xs) var(--space-sm);
10228
+ font-size: var(--fu-font);
10229
+ font-weight: var(--weight-semibold);
10230
+ line-height: var(--leading-none);
10231
+ cursor: pointer;
10232
+ }
10233
+
10234
+ [data-scope="file-upload"][data-part="clear-trigger"]:hover:not([data-disabled]) {
10235
+ background: var(--color-base-200);
10236
+ }
10237
+
10238
+ [data-scope="file-upload"][data-part="clear-trigger"][data-disabled] {
10239
+ opacity: var(--disabled-opacity);
10240
+ cursor: not-allowed;
10241
+ }
10242
+
10243
+ [data-scope="file-upload"][data-part="clear-trigger"][data-focus-visible] {
10244
+ outline: 2px solid var(--color-base-content);
10245
+ outline-offset: 2px;
10246
+ }
10247
+
9270
10248
  [data-scope="file-upload"][data-part="root"][data-color="primary"] {
9271
10249
  --fu-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
9272
10250
  }
@@ -9767,6 +10745,11 @@
9767
10745
  outline-offset: 2px;
9768
10746
  }
9769
10747
 
10748
+ [data-scope="diff"][data-part="handle"][data-disabled] {
10749
+ opacity: var(--disabled-opacity);
10750
+ cursor: not-allowed;
10751
+ }
10752
+
9770
10753
  [data-scope="diff"][data-part="handle"][data-pressed] {
9771
10754
  --diff-accent: color-mix(in oklab, var(--color-base-content) 85%, var(--color-base-100));
9772
10755
  }