@sigx/zero-daisyui 0.6.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/README.md +1 -2
  2. package/dist/audit.json +5618 -72
  3. package/dist/components.d.ts +37 -1
  4. package/dist/components.js +4 -0
  5. package/dist/css/components/breadcrumbs.css +30 -0
  6. package/dist/css/components/card.css +26 -0
  7. package/dist/css/components/chat-log.css +172 -0
  8. package/dist/css/components/divider.css +68 -3
  9. package/dist/css/components/fieldset.css +91 -0
  10. package/dist/css/components/hover-card.css +174 -0
  11. package/dist/css/components/menu.css +73 -0
  12. package/dist/css/components/menubar.css +75 -0
  13. package/dist/css/components/pagination.css +83 -0
  14. package/dist/css/components/popover.css +72 -0
  15. package/dist/css/components/progress.css +0 -4
  16. package/dist/css/components/steps.css +103 -0
  17. package/dist/css/components/table.css +70 -0
  18. package/dist/css/components/timeline.css +14 -0
  19. package/dist/css/components/toast.css +65 -0
  20. package/dist/css/components/tooltip.css +65 -0
  21. package/dist/css/components/tree-view.css +118 -0
  22. package/dist/css/index.css +1330 -42
  23. package/dist/lynx/components/accordion.css +7 -1
  24. package/dist/lynx/components/breadcrumbs.css +44 -0
  25. package/dist/lynx/components/button.css +121 -10
  26. package/dist/lynx/components/card.css +9 -0
  27. package/dist/lynx/components/chat-log.css +147 -0
  28. package/dist/lynx/components/dialog.css +28 -3
  29. package/dist/lynx/components/divider.css +8 -17
  30. package/dist/lynx/components/fieldset.css +219 -0
  31. package/dist/lynx/components/hover-card.css +211 -0
  32. package/dist/lynx/components/menu.css +7 -0
  33. package/dist/lynx/components/menubar.css +199 -0
  34. package/dist/lynx/components/pagination.css +107 -0
  35. package/dist/lynx/components/popover.css +44 -2
  36. package/dist/lynx/components/progress.css +0 -20
  37. package/dist/lynx/components/select.css +51 -3
  38. package/dist/lynx/components/slider.css +295 -12
  39. package/dist/lynx/components/steps.css +103 -0
  40. package/dist/lynx/components/switch.css +4 -1
  41. package/dist/lynx/components/table.css +52 -0
  42. package/dist/lynx/components/tabs.css +109 -94
  43. package/dist/lynx/components/timeline.css +90 -1
  44. package/dist/lynx/components/toast.css +111 -8
  45. package/dist/lynx/components/tree-view.css +28 -0
  46. package/dist/lynx/index.css +2081 -255
  47. package/dist/lynx/manifest.json +112 -4
  48. package/dist/manifest.json +110 -2
  49. package/dist/recipes.d.ts +29 -1
  50. package/dist/recipes.d.ts.map +1 -1
  51. package/dist/recipes.js +1225 -129
  52. package/dist/recipes.js.map +1 -1
  53. package/dist/register.d.ts +36 -0
  54. package/dist/report.json +1353 -188
  55. package/package.json +4 -4
  56. package/src/recipes.ts +1254 -130
@@ -1467,12 +1467,22 @@
1467
1467
  transform: none;
1468
1468
  }
1469
1469
 
1470
+ [data-scope="popover"][data-part="popup"]:has(> [data-scope="popover"][data-part="arrow"]) {
1471
+ overflow: visible;
1472
+ }
1473
+
1470
1474
  [data-scope="popover"][data-part="title"] {
1471
1475
  margin: 0 0 var(--space-md);
1472
1476
  font-size: var(--text-md);
1473
1477
  font-weight: var(--weight-bold);
1474
1478
  }
1475
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
+
1476
1486
  [data-scope="popover"][data-part="close"] {
1477
1487
  appearance: none;
1478
1488
  display: inline-flex;
@@ -1505,6 +1515,68 @@
1505
1515
  outline-offset: 2px;
1506
1516
  }
1507
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
+
1508
1580
  [data-scope="popover"][data-part="trigger"][data-color="primary"] {
1509
1581
  background: var(--color-primary);
1510
1582
  color: var(--color-primary-content);
@@ -1732,6 +1804,71 @@
1732
1804
  transform: none;
1733
1805
  }
1734
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
+
1735
1872
  [data-scope="tooltip"][data-part="trigger"][data-color="primary"] {
1736
1873
  background: var(--color-primary);
1737
1874
  color: var(--color-primary-content);
@@ -1902,6 +2039,179 @@
1902
2039
  }
1903
2040
  }
1904
2041
 
2042
+ @layer zero.recipes {
2043
+ [data-scope="hover-card"][data-part="trigger"] {
2044
+ color: inherit;
2045
+ text-decoration-line: underline;
2046
+ text-underline-offset: 2px;
2047
+ cursor: pointer;
2048
+ border-radius: var(--radius-selector);
2049
+ }
2050
+
2051
+ [data-scope="hover-card"][data-part="trigger"]:hover:not([data-disabled]) {
2052
+ text-decoration-thickness: 2px;
2053
+ }
2054
+
2055
+ [data-scope="hover-card"][data-part="trigger"][data-state="open"] {
2056
+ text-decoration-thickness: 2px;
2057
+ }
2058
+
2059
+ [data-scope="hover-card"][data-part="trigger"][data-focus-visible] {
2060
+ outline: 2px solid var(--color-base-content);
2061
+ outline-offset: 2px;
2062
+ }
2063
+
2064
+ [data-scope="hover-card"][data-part="popup"] {
2065
+ opacity: 0;
2066
+ transform: translateY(-4px);
2067
+ transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
2068
+ background: var(--color-base-100);
2069
+ color: var(--color-base-content);
2070
+ border: var(--border) solid var(--color-base-300);
2071
+ border-radius: var(--radius-box);
2072
+ box-shadow: var(--shadow-lg);
2073
+ padding: var(--space-xl);
2074
+ max-width: 20rem;
2075
+ font-size: var(--text-sm);
2076
+ }
2077
+
2078
+ [data-scope="hover-card"][data-part="popup"][data-state="open"] {
2079
+ opacity: 1;
2080
+ transform: none;
2081
+ }
2082
+
2083
+ [data-scope="hover-card"][data-part="popup"]:has(> [data-scope="hover-card"][data-part="arrow"]) {
2084
+ overflow: visible;
2085
+ }
2086
+
2087
+ [data-scope="hover-card"][data-part="arrow"] {
2088
+ display: none;
2089
+ position: absolute;
2090
+ box-sizing: border-box;
2091
+ width: 0.625rem;
2092
+ height: 0.625rem;
2093
+ rotate: 45deg;
2094
+ pointer-events: none;
2095
+ background: var(--color-base-100);
2096
+ border: var(--border) solid var(--color-base-300);
2097
+ }
2098
+
2099
+ [data-scope="hover-card"][data-part="popup"][data-placement^="top"] > [data-scope="hover-card"][data-part="arrow"] {
2100
+ display: block;
2101
+ top: calc(100% - 0.625rem / 2);
2102
+ left: var(--arrow-x, calc(50% - 0.625rem / 2));
2103
+ clip-path: polygon(100% 0, 100% 100%, 0 100%);
2104
+ }
2105
+
2106
+ [data-scope="hover-card"][data-part="popup"][data-placement^="bottom"] > [data-scope="hover-card"][data-part="arrow"] {
2107
+ display: block;
2108
+ top: calc(0.625rem / -2);
2109
+ left: var(--arrow-x, calc(50% - 0.625rem / 2));
2110
+ clip-path: polygon(0 0, 100% 0, 0 100%);
2111
+ }
2112
+
2113
+ [data-scope="hover-card"][data-part="popup"][data-placement^="left"] > [data-scope="hover-card"][data-part="arrow"] {
2114
+ display: block;
2115
+ left: calc(100% - 0.625rem / 2);
2116
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
2117
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
2118
+ }
2119
+
2120
+ [data-scope="hover-card"][data-part="popup"][data-placement^="right"] > [data-scope="hover-card"][data-part="arrow"] {
2121
+ display: block;
2122
+ left: calc(0.625rem / -2);
2123
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
2124
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
2125
+ }
2126
+
2127
+ [data-scope="hover-card"][data-part="popup"][data-placement^="start"] > [data-scope="hover-card"][data-part="arrow"] {
2128
+ display: block;
2129
+ inset-inline-start: calc(100% - 0.625rem / 2);
2130
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
2131
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
2132
+ }
2133
+
2134
+ [data-scope="hover-card"][data-part="popup"][data-placement^="end"] > [data-scope="hover-card"][data-part="arrow"] {
2135
+ display: block;
2136
+ inset-inline-start: calc(0.625rem / -2);
2137
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
2138
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
2139
+ }
2140
+
2141
+ [data-scope="hover-card"][data-part="popup"][data-placement^="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="hover-card"][data-part="arrow"] {
2142
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
2143
+ }
2144
+
2145
+ [data-scope="hover-card"][data-part="popup"][data-placement^="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="hover-card"][data-part="arrow"] {
2146
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
2147
+ }
2148
+
2149
+ [data-scope="hover-card"][data-part="trigger"][data-color="primary"] {
2150
+ color: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
2151
+ }
2152
+
2153
+ [data-scope="hover-card"][data-part="trigger"][data-color="secondary"] {
2154
+ color: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
2155
+ }
2156
+
2157
+ [data-scope="hover-card"][data-part="trigger"][data-color="accent"] {
2158
+ color: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
2159
+ }
2160
+
2161
+ [data-scope="hover-card"][data-part="trigger"][data-color="neutral"] {
2162
+ color: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
2163
+ }
2164
+
2165
+ [data-scope="hover-card"][data-part="trigger"][data-color="info"] {
2166
+ color: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
2167
+ }
2168
+
2169
+ [data-scope="hover-card"][data-part="trigger"][data-color="success"] {
2170
+ color: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
2171
+ }
2172
+
2173
+ [data-scope="hover-card"][data-part="trigger"][data-color="warning"] {
2174
+ color: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
2175
+ }
2176
+
2177
+ [data-scope="hover-card"][data-part="trigger"][data-color="error"] {
2178
+ color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
2179
+ }
2180
+
2181
+ [data-scope="hover-card"][data-part="trigger"][data-size="xs"] {
2182
+ font-size: var(--text-xs);
2183
+ }
2184
+
2185
+ [data-scope="hover-card"][data-part="trigger"][data-size="sm"] {
2186
+ font-size: var(--text-sm);
2187
+ }
2188
+
2189
+ [data-scope="hover-card"][data-part="trigger"][data-size="lg"] {
2190
+ font-size: var(--text-lg);
2191
+ }
2192
+
2193
+ [data-scope="hover-card"][data-part="trigger"][data-size="xl"] {
2194
+ font-size: var(--text-xl);
2195
+ }
2196
+
2197
+ @media (prefers-reduced-motion: reduce) {
2198
+ [data-scope="hover-card"][data-part="popup"] {
2199
+ transition: none;
2200
+ }
2201
+
2202
+ [data-scope="hover-card"][data-part="popup"][data-state="open"] {
2203
+ transform: none;
2204
+ }
2205
+ }
2206
+
2207
+ @starting-style {
2208
+ [data-scope="hover-card"][data-part="popup"][data-state="open"] {
2209
+ opacity: 0;
2210
+ transform: translateY(-4px);
2211
+ }
2212
+ }
2213
+ }
2214
+
1905
2215
  @layer zero.recipes {
1906
2216
  [data-scope="menu"][data-part="trigger"] {
1907
2217
  appearance: none;
@@ -1958,6 +2268,10 @@
1958
2268
  transform: none;
1959
2269
  }
1960
2270
 
2271
+ [data-scope="menu"][data-part="popup"]:has(> [data-scope="menu"][data-part="arrow"]) {
2272
+ overflow: visible;
2273
+ }
2274
+
1961
2275
  [data-scope="menu"][data-part="item"] {
1962
2276
  display: flex;
1963
2277
  align-items: center;
@@ -2096,12 +2410,81 @@
2096
2410
  opacity: 0.6;
2097
2411
  }
2098
2412
 
2413
+ [data-scope="menu"][data-part="shortcut"] {
2414
+ margin-inline-start: auto;
2415
+ padding-inline-start: var(--space-lg);
2416
+ font-size: var(--text-xs);
2417
+ opacity: 0.75;
2418
+ }
2419
+
2099
2420
  [data-scope="menu"][data-part="separator"] {
2100
2421
  height: var(--border);
2101
2422
  margin: var(--space-sm) var(--space-md);
2102
2423
  background: var(--color-base-300);
2103
2424
  }
2104
2425
 
2426
+ [data-scope="menu"][data-part="arrow"] {
2427
+ display: none;
2428
+ position: absolute;
2429
+ box-sizing: border-box;
2430
+ width: 0.625rem;
2431
+ height: 0.625rem;
2432
+ rotate: 45deg;
2433
+ pointer-events: none;
2434
+ background: var(--color-base-100);
2435
+ border: var(--border) solid var(--color-base-300);
2436
+ }
2437
+
2438
+ [data-scope="menu"][data-part="popup"][data-placement^="top"] > [data-scope="menu"][data-part="arrow"] {
2439
+ display: block;
2440
+ top: calc(100% - 0.625rem / 2);
2441
+ left: var(--arrow-x, calc(50% - 0.625rem / 2));
2442
+ clip-path: polygon(100% 0, 100% 100%, 0 100%);
2443
+ }
2444
+
2445
+ [data-scope="menu"][data-part="popup"][data-placement^="bottom"] > [data-scope="menu"][data-part="arrow"] {
2446
+ display: block;
2447
+ top: calc(0.625rem / -2);
2448
+ left: var(--arrow-x, calc(50% - 0.625rem / 2));
2449
+ clip-path: polygon(0 0, 100% 0, 0 100%);
2450
+ }
2451
+
2452
+ [data-scope="menu"][data-part="popup"][data-placement^="left"] > [data-scope="menu"][data-part="arrow"] {
2453
+ display: block;
2454
+ left: calc(100% - 0.625rem / 2);
2455
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
2456
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
2457
+ }
2458
+
2459
+ [data-scope="menu"][data-part="popup"][data-placement^="right"] > [data-scope="menu"][data-part="arrow"] {
2460
+ display: block;
2461
+ left: calc(0.625rem / -2);
2462
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
2463
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
2464
+ }
2465
+
2466
+ [data-scope="menu"][data-part="popup"][data-placement^="start"] > [data-scope="menu"][data-part="arrow"] {
2467
+ display: block;
2468
+ inset-inline-start: calc(100% - 0.625rem / 2);
2469
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
2470
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
2471
+ }
2472
+
2473
+ [data-scope="menu"][data-part="popup"][data-placement^="end"] > [data-scope="menu"][data-part="arrow"] {
2474
+ display: block;
2475
+ inset-inline-start: calc(0.625rem / -2);
2476
+ top: var(--arrow-y, calc(50% - 0.625rem / 2));
2477
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
2478
+ }
2479
+
2480
+ [data-scope="menu"][data-part="popup"][data-placement^="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="menu"][data-part="arrow"] {
2481
+ clip-path: polygon(0 0, 100% 100%, 0 100%);
2482
+ }
2483
+
2484
+ [data-scope="menu"][data-part="popup"][data-placement^="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="menu"][data-part="arrow"] {
2485
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
2486
+ }
2487
+
2105
2488
  [data-scope="menu"][data-part="trigger"][data-color="primary"] {
2106
2489
  background: var(--color-primary);
2107
2490
  color: var(--color-primary-content);
@@ -2285,6 +2668,80 @@
2285
2668
  }
2286
2669
  }
2287
2670
 
2671
+ @layer zero.recipes {
2672
+ [data-scope="menubar"][data-part="root"] {
2673
+ --menubar-surface: var(--color-base-200);
2674
+ }
2675
+
2676
+ [data-scope="menubar"][data-part="root"] {
2677
+ display: flex;
2678
+ align-items: center;
2679
+ gap: var(--space-xs);
2680
+ padding: var(--space-xs);
2681
+ width: max-content;
2682
+ max-width: 100%;
2683
+ flex-wrap: wrap;
2684
+ background: var(--menubar-surface);
2685
+ border-radius: var(--radius-box);
2686
+ }
2687
+
2688
+ [data-scope="menubar"][data-part="root"][data-orientation="vertical"] {
2689
+ flex-direction: column;
2690
+ align-items: stretch;
2691
+ }
2692
+
2693
+ [data-scope="menubar"][data-part="root"][data-color="primary"] {
2694
+ --menubar-surface: color-mix(in oklch, var(--color-primary) 12%, var(--color-base-200));
2695
+ }
2696
+
2697
+ [data-scope="menubar"][data-part="root"][data-color="secondary"] {
2698
+ --menubar-surface: color-mix(in oklch, var(--color-secondary) 12%, var(--color-base-200));
2699
+ }
2700
+
2701
+ [data-scope="menubar"][data-part="root"][data-color="accent"] {
2702
+ --menubar-surface: color-mix(in oklch, var(--color-accent) 12%, var(--color-base-200));
2703
+ }
2704
+
2705
+ [data-scope="menubar"][data-part="root"][data-color="neutral"] {
2706
+ --menubar-surface: color-mix(in oklch, var(--color-neutral) 12%, var(--color-base-200));
2707
+ }
2708
+
2709
+ [data-scope="menubar"][data-part="root"][data-color="info"] {
2710
+ --menubar-surface: color-mix(in oklch, var(--color-info) 12%, var(--color-base-200));
2711
+ }
2712
+
2713
+ [data-scope="menubar"][data-part="root"][data-color="success"] {
2714
+ --menubar-surface: color-mix(in oklch, var(--color-success) 12%, var(--color-base-200));
2715
+ }
2716
+
2717
+ [data-scope="menubar"][data-part="root"][data-color="warning"] {
2718
+ --menubar-surface: color-mix(in oklch, var(--color-warning) 12%, var(--color-base-200));
2719
+ }
2720
+
2721
+ [data-scope="menubar"][data-part="root"][data-color="error"] {
2722
+ --menubar-surface: color-mix(in oklch, var(--color-error) 12%, var(--color-base-200));
2723
+ }
2724
+
2725
+ [data-scope="menubar"][data-part="root"][data-size="xs"] {
2726
+ gap: 0;
2727
+ padding: 0;
2728
+ }
2729
+
2730
+ [data-scope="menubar"][data-part="root"][data-size="sm"] {
2731
+ padding: var(--space-2xs);
2732
+ }
2733
+
2734
+ [data-scope="menubar"][data-part="root"][data-size="lg"] {
2735
+ gap: var(--space-sm);
2736
+ padding: var(--space-sm);
2737
+ }
2738
+
2739
+ [data-scope="menubar"][data-part="root"][data-size="xl"] {
2740
+ gap: var(--space-md);
2741
+ padding: var(--space-sm);
2742
+ }
2743
+ }
2744
+
2288
2745
  @layer zero.recipes {
2289
2746
  [data-scope="field"][data-part="root"] {
2290
2747
  --field-accent: var(--color-base-content);
@@ -2397,6 +2854,96 @@
2397
2854
  }
2398
2855
  }
2399
2856
 
2857
+ @layer zero.recipes {
2858
+ [data-scope="fieldset"][data-part="root"] {
2859
+ --fieldset-accent: var(--color-base-content);
2860
+ }
2861
+
2862
+ [data-scope="fieldset"][data-part="root"] {
2863
+ display: grid;
2864
+ grid-template-columns: 1fr;
2865
+ grid-auto-rows: max-content;
2866
+ gap: var(--space-sm);
2867
+ min-inline-size: 0;
2868
+ margin: 0;
2869
+ padding-block: var(--space-xs);
2870
+ padding-inline: 0;
2871
+ border: none;
2872
+ }
2873
+
2874
+ [data-scope="fieldset"][data-part="legend"] {
2875
+ padding-block: var(--space-sm);
2876
+ padding-inline: 0;
2877
+ font-size: var(--text-sm);
2878
+ font-weight: var(--weight-semibold);
2879
+ color: var(--fieldset-accent);
2880
+ }
2881
+
2882
+ [data-scope="fieldset"][data-part="legend"][data-disabled] {
2883
+ opacity: var(--disabled-opacity);
2884
+ }
2885
+
2886
+ [data-scope="fieldset"][data-part="legend"][data-invalid] {
2887
+ color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
2888
+ }
2889
+
2890
+ [data-scope="fieldset"][data-part="root"][data-color="primary"] {
2891
+ --fieldset-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
2892
+ }
2893
+
2894
+ [data-scope="fieldset"][data-part="root"][data-color="secondary"] {
2895
+ --fieldset-accent: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
2896
+ }
2897
+
2898
+ [data-scope="fieldset"][data-part="root"][data-color="accent"] {
2899
+ --fieldset-accent: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
2900
+ }
2901
+
2902
+ [data-scope="fieldset"][data-part="root"][data-color="neutral"] {
2903
+ --fieldset-accent: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
2904
+ }
2905
+
2906
+ [data-scope="fieldset"][data-part="root"][data-color="info"] {
2907
+ --fieldset-accent: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
2908
+ }
2909
+
2910
+ [data-scope="fieldset"][data-part="root"][data-color="success"] {
2911
+ --fieldset-accent: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
2912
+ }
2913
+
2914
+ [data-scope="fieldset"][data-part="root"][data-color="warning"] {
2915
+ --fieldset-accent: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
2916
+ }
2917
+
2918
+ [data-scope="fieldset"][data-part="root"][data-color="error"] {
2919
+ --fieldset-accent: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
2920
+ }
2921
+
2922
+ @scope ([data-scope="fieldset"][data-part="root"][data-size="xs"]) to ([data-scope="fieldset"][data-part="root"]) {
2923
+ [data-scope="fieldset"][data-part="legend"] {
2924
+ font-size: var(--text-xs);
2925
+ }
2926
+ }
2927
+
2928
+ @scope ([data-scope="fieldset"][data-part="root"][data-size="sm"]) to ([data-scope="fieldset"][data-part="root"]) {
2929
+ [data-scope="fieldset"][data-part="legend"] {
2930
+ font-size: var(--text-xs);
2931
+ }
2932
+ }
2933
+
2934
+ @scope ([data-scope="fieldset"][data-part="root"][data-size="lg"]) to ([data-scope="fieldset"][data-part="root"]) {
2935
+ [data-scope="fieldset"][data-part="legend"] {
2936
+ font-size: var(--text-md);
2937
+ }
2938
+ }
2939
+
2940
+ @scope ([data-scope="fieldset"][data-part="root"][data-size="xl"]) to ([data-scope="fieldset"][data-part="root"]) {
2941
+ [data-scope="fieldset"][data-part="legend"] {
2942
+ font-size: var(--text-lg);
2943
+ }
2944
+ }
2945
+ }
2946
+
2400
2947
  @layer zero.recipes {
2401
2948
  [data-scope="checkbox"][data-part="root"] {
2402
2949
  --checkbox-size: calc(var(--size-selector) * 6);
@@ -2962,10 +3509,6 @@
2962
3509
  transition: width var(--duration-slow) var(--ease-standard);
2963
3510
  }
2964
3511
 
2965
- [data-scope="progress"][data-part="range"][data-state="complete"] {
2966
- background: color-mix(in oklab, var(--color-success) 55%, var(--color-success-content));
2967
- }
2968
-
2969
3512
  [data-scope="progress"][data-part="range"][data-state="indeterminate"] {
2970
3513
  width: 40%;
2971
3514
  animation: zero-daisy-indeterminate 1.2s ease-in-out infinite;
@@ -4209,6 +4752,7 @@
4209
4752
  --toast-bg: var(--color-base-200);
4210
4753
  --toast-ink: var(--color-base-content);
4211
4754
  --toast-from: 8px;
4755
+ --toast-mark: 1rem;
4212
4756
  }
4213
4757
 
4214
4758
  [data-scope="toast"][data-part="viewport"] {
@@ -4291,17 +4835,54 @@
4291
4835
  --toast-from: -8px;
4292
4836
  }
4293
4837
 
4838
+ [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) {
4839
+ grid-template-columns: auto 1fr auto auto;
4840
+ }
4841
+
4842
+ [data-scope="toast"][data-part="indicator"] {
4843
+ grid-column: 1;
4844
+ grid-row: 1 / span 2;
4845
+ inline-size: var(--toast-mark);
4846
+ block-size: var(--toast-mark);
4847
+ box-sizing: border-box;
4848
+ }
4849
+
4850
+ [data-scope="toast"][data-part="indicator"][data-state="loading"] {
4851
+ border-radius: 50%;
4852
+ border: calc(var(--border) * 2) solid color-mix(in oklab, var(--toast-ink) 25%, transparent);
4853
+ border-block-start-color: var(--toast-ink);
4854
+ animation: zero-daisyui-toast-spin 0.75s linear infinite;
4855
+ }
4856
+
4857
+ [data-scope="toast"][data-part="indicator"][data-state="complete"] {
4858
+ background: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
4859
+ clip-path: polygon(15.1% 41.3%, 1% 55%, 37.6% 92.8%, 99% 19.8%, 83.9% 7.2%, 36.6% 63.5%);
4860
+ }
4861
+
4862
+ [data-scope="toast"][data-part="indicator"][data-state="error"] {
4863
+ background: color-mix(in oklab, var(--color-error) 55%, var(--color-base-content));
4864
+ clip-path: polygon(20% 8%, 50% 38%, 80% 8%, 92% 20%, 62% 50%, 92% 80%, 80% 92%, 50% 62%, 20% 92%, 8% 80%, 38% 50%, 8% 20%);
4865
+ }
4866
+
4294
4867
  [data-scope="toast"][data-part="title"] {
4295
4868
  grid-column: 1;
4296
4869
  font-weight: var(--weight-semibold);
4297
4870
  }
4298
4871
 
4872
+ [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > [data-scope="toast"][data-part="title"] {
4873
+ grid-column: 2;
4874
+ }
4875
+
4299
4876
  [data-scope="toast"][data-part="description"] {
4300
4877
  grid-column: 1;
4301
4878
  font-size: var(--text-xs);
4302
4879
  color: color-mix(in oklab, var(--toast-ink) 75%, transparent);
4303
4880
  }
4304
4881
 
4882
+ [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > [data-scope="toast"][data-part="description"] {
4883
+ grid-column: 2;
4884
+ }
4885
+
4305
4886
  [data-scope="toast"][data-part="action"] {
4306
4887
  grid-column: 2;
4307
4888
  grid-row: 1;
@@ -4330,6 +4911,10 @@
4330
4911
  outline-offset: 2px;
4331
4912
  }
4332
4913
 
4914
+ [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > [data-scope="toast"][data-part="action"] {
4915
+ grid-column: 3;
4916
+ }
4917
+
4333
4918
  [data-scope="toast"][data-part="close"] {
4334
4919
  grid-column: 3;
4335
4920
  grid-row: 1;
@@ -4356,6 +4941,10 @@
4356
4941
  outline-offset: 2px;
4357
4942
  }
4358
4943
 
4944
+ [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > [data-scope="toast"][data-part="close"] {
4945
+ grid-column: 4;
4946
+ }
4947
+
4359
4948
  [data-scope="toast"][data-part="root"][data-color="primary"] {
4360
4949
  --toast-bg: var(--color-primary-soft);
4361
4950
  --toast-ink: var(--color-primary);
@@ -4428,6 +5017,18 @@
4428
5017
  }
4429
5018
  }
4430
5019
 
5020
+ @media (forced-colors: active) {
5021
+ [data-scope="toast"][data-part="indicator"][data-state="complete"] {
5022
+ background: CanvasText;
5023
+ forced-color-adjust: none;
5024
+ }
5025
+
5026
+ [data-scope="toast"][data-part="indicator"][data-state="error"] {
5027
+ background: CanvasText;
5028
+ forced-color-adjust: none;
5029
+ }
5030
+ }
5031
+
4431
5032
  @media (prefers-reduced-motion: reduce) {
4432
5033
  [data-scope="toast"][data-part="root"] {
4433
5034
  transition: none;
@@ -4436,8 +5037,15 @@
4436
5037
  [data-scope="toast"][data-part="root"][data-state="open"] {
4437
5038
  transform: none;
4438
5039
  }
5040
+
5041
+ [data-scope="toast"][data-part="indicator"][data-state="loading"] {
5042
+ animation: none;
5043
+ }
4439
5044
  }
4440
5045
  }
5046
+ @keyframes zero-daisyui-toast-spin {
5047
+ to { transform: rotate(360deg); }
5048
+ }
4441
5049
 
4442
5050
  @layer zero.recipes {
4443
5051
  [data-scope="combobox"][data-part="root"] {
@@ -5448,6 +6056,8 @@
5448
6056
  --tree-accent: var(--color-primary);
5449
6057
  --tree-text: var(--text-sm);
5450
6058
  --tree-on-accent: var(--color-primary-content);
6059
+ --tree-check: var(--tree-accent);
6060
+ --tree-on-check: var(--tree-on-accent);
5451
6061
  }
5452
6062
 
5453
6063
  [data-scope="tree-view"][data-part="root"] {
@@ -5545,35 +6155,89 @@
5545
6155
  cursor: not-allowed;
5546
6156
  }
5547
6157
 
5548
- [data-scope="tree-view"][data-part="branch-trigger"][data-focus-visible] {
5549
- outline: 2px solid var(--color-base-content);
5550
- outline-offset: -2px;
6158
+ [data-scope="tree-view"][data-part="branch-trigger"][data-focus-visible] {
6159
+ outline: 2px solid var(--color-base-content);
6160
+ outline-offset: -2px;
6161
+ }
6162
+
6163
+ [data-scope="tree-view"][data-part="branch-trigger"][data-selected]:hover {
6164
+ background: var(--color-primary);
6165
+ }
6166
+
6167
+ [data-scope="tree-view"][data-part="branch-trigger"][data-pressed]:not([data-disabled]):not([data-selected]) {
6168
+ background: var(--color-base-300);
6169
+ }
6170
+
6171
+ [data-scope="tree-view"][data-part="branch-indicator"] {
6172
+ display: inline-block;
6173
+ opacity: 0.6;
6174
+ transition: transform var(--duration-fast) var(--ease-standard);
6175
+ }
6176
+
6177
+ [data-scope="tree-view"][data-part="branch-indicator"][data-state="open"] {
6178
+ transform: rotate(90deg);
6179
+ }
6180
+
6181
+ [data-scope="tree-view"][data-part="branch-indicator"][data-state="loading"] {
6182
+ transform: rotate(45deg);
6183
+ }
6184
+
6185
+ [data-scope="tree-view"][data-part="branch-indicator"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
6186
+ scale: -1 1;
6187
+ }
6188
+
6189
+ [data-scope="tree-view"][data-part="node-checkbox"] {
6190
+ display: inline-block;
6191
+ position: relative;
6192
+ flex-shrink: 0;
6193
+ box-sizing: border-box;
6194
+ width: 1.25em;
6195
+ height: 1.25em;
6196
+ border: var(--border) solid var(--tree-check);
6197
+ border-radius: var(--radius-selector);
6198
+ box-shadow: 0 1px var(--depth-shade) inset;
6199
+ cursor: pointer;
6200
+ transition: background-color var(--duration-normal) var(--ease-standard);
6201
+ }
6202
+
6203
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="checked"] {
6204
+ background-color: var(--tree-check);
5551
6205
  }
5552
6206
 
5553
- [data-scope="tree-view"][data-part="branch-trigger"][data-selected]:hover {
5554
- background: var(--color-primary);
6207
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="indeterminate"] {
6208
+ background-color: var(--tree-check);
5555
6209
  }
5556
6210
 
5557
- [data-scope="tree-view"][data-part="branch-trigger"][data-pressed]:not([data-disabled]):not([data-selected]) {
5558
- background: var(--color-base-300);
6211
+ [data-scope="tree-view"][data-part="node-checkbox"][data-disabled] {
6212
+ cursor: not-allowed;
5559
6213
  }
5560
6214
 
5561
- [data-scope="tree-view"][data-part="branch-indicator"] {
5562
- display: inline-block;
5563
- opacity: 0.6;
5564
- transition: transform var(--duration-fast) var(--ease-standard);
6215
+ [data-scope="tree-view"][data-part="node-checkbox"]::after {
6216
+ content: "";
6217
+ position: absolute;
6218
+ inset: 15%;
6219
+ opacity: 0;
6220
+ rotate: 45deg;
6221
+ background-color: var(--tree-on-check);
6222
+ clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
6223
+ transition: clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), rotate var(--duration-slow) var(--ease-standard) var(--duration-instant), translate var(--duration-slow) var(--ease-standard) var(--duration-instant);
5565
6224
  }
5566
6225
 
5567
- [data-scope="tree-view"][data-part="branch-indicator"][data-state="open"] {
5568
- transform: rotate(90deg);
6226
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="checked"]::after {
6227
+ clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
6228
+ opacity: 1;
5569
6229
  }
5570
6230
 
5571
- [data-scope="tree-view"][data-part="branch-indicator"][data-state="loading"] {
5572
- transform: rotate(45deg);
6231
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="indeterminate"]::after {
6232
+ clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
6233
+ opacity: 1;
6234
+ translate: 0 -35%;
6235
+ rotate: 0deg;
5573
6236
  }
5574
6237
 
5575
- [data-scope="tree-view"][data-part="branch-indicator"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
5576
- scale: -1 1;
6238
+ [data-scope="tree-view"][data-selected] [data-scope="tree-view"][data-part="node-checkbox"] {
6239
+ --tree-check: var(--tree-on-accent);
6240
+ --tree-on-check: var(--tree-accent);
5577
6241
  }
5578
6242
 
5579
6243
  [data-scope="tree-view"][data-part="branch-content"] {
@@ -5638,10 +6302,72 @@
5638
6302
  --tree-text: var(--text-lg);
5639
6303
  }
5640
6304
 
6305
+ @media (forced-colors: active) {
6306
+ [data-scope="tree-view"][data-part="node-checkbox"]::after {
6307
+ clip-path: none;
6308
+ background-color: #0000;
6309
+ rotate: 0deg;
6310
+ inset: 0;
6311
+ display: grid;
6312
+ place-items: center;
6313
+ color: CanvasText;
6314
+ font-size: 0.85em;
6315
+ line-height: 1;
6316
+ }
6317
+
6318
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="checked"]::after {
6319
+ content: "✔︎";
6320
+ clip-path: none;
6321
+ rotate: 0deg;
6322
+ }
6323
+
6324
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="indeterminate"]::after {
6325
+ content: "−";
6326
+ clip-path: none;
6327
+ rotate: 0deg;
6328
+ translate: none;
6329
+ }
6330
+ }
6331
+
6332
+ @media print {
6333
+ [data-scope="tree-view"][data-part="node-checkbox"]::after {
6334
+ clip-path: none;
6335
+ background-color: #0000;
6336
+ rotate: 0deg;
6337
+ inset: 0;
6338
+ display: grid;
6339
+ place-items: center;
6340
+ color: var(--print-ink);
6341
+ font-size: 0.85em;
6342
+ line-height: 1;
6343
+ }
6344
+
6345
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="checked"]::after {
6346
+ content: "✔︎";
6347
+ clip-path: none;
6348
+ rotate: 0deg;
6349
+ }
6350
+
6351
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="indeterminate"]::after {
6352
+ content: "−";
6353
+ clip-path: none;
6354
+ rotate: 0deg;
6355
+ translate: none;
6356
+ }
6357
+ }
6358
+
5641
6359
  @media (prefers-reduced-motion: reduce) {
5642
6360
  [data-scope="tree-view"][data-part="branch-indicator"] {
5643
6361
  transition: none;
5644
6362
  }
6363
+
6364
+ [data-scope="tree-view"][data-part="node-checkbox"] {
6365
+ transition: none;
6366
+ }
6367
+
6368
+ [data-scope="tree-view"][data-part="node-checkbox"]::after {
6369
+ transition: none;
6370
+ }
5645
6371
  }
5646
6372
  }
5647
6373
 
@@ -6079,6 +6805,32 @@
6079
6805
  overflow: hidden;
6080
6806
  }
6081
6807
 
6808
+ [data-scope="card"][data-part="media"] {
6809
+ display: flex;
6810
+ align-items: center;
6811
+ justify-content: center;
6812
+ margin: 0;
6813
+ inline-size: 100%;
6814
+ object-fit: cover;
6815
+ }
6816
+
6817
+ [data-scope="card"][data-part="media"] > :is(img, picture, video, svg, canvas) {
6818
+ display: block;
6819
+ inline-size: 100%;
6820
+ block-size: 100%;
6821
+ object-fit: cover;
6822
+ }
6823
+
6824
+ [data-scope="card"][data-part="media"]:first-child {
6825
+ border-start-start-radius: var(--radius-box);
6826
+ border-start-end-radius: var(--radius-box);
6827
+ }
6828
+
6829
+ [data-scope="card"][data-part="media"]:last-child {
6830
+ border-end-start-radius: var(--radius-box);
6831
+ border-end-end-radius: var(--radius-box);
6832
+ }
6833
+
6082
6834
  [data-scope="card"][data-part="header"] {
6083
6835
  display: flex;
6084
6836
  flex-direction: column;
@@ -6673,21 +7425,86 @@
6673
7425
  }
6674
7426
 
6675
7427
  [data-scope="divider"][data-part="root"] {
7428
+ display: flex;
7429
+ align-items: center;
6676
7430
  border: none;
6677
- background: var(--divider-ink);
6678
7431
  align-self: stretch;
6679
7432
  }
6680
7433
 
7434
+ [data-scope="divider"][data-part="root"]::before {
7435
+ content: "";
7436
+ flex: 1 1 0;
7437
+ min-inline-size: 0;
7438
+ }
7439
+
7440
+ [data-scope="divider"][data-part="root"]::after {
7441
+ content: "";
7442
+ flex: 1 1 0;
7443
+ min-inline-size: 0;
7444
+ }
7445
+
6681
7446
  [data-scope="divider"][data-part="root"][data-orientation="horizontal"] {
6682
7447
  inline-size: 100%;
6683
- block-size: var(--divider-thickness);
7448
+ }
7449
+
7450
+ [data-scope="divider"][data-part="root"][data-orientation="horizontal"]::before {
7451
+ border-block-start: var(--divider-thickness) solid var(--divider-ink);
7452
+ }
7453
+
7454
+ [data-scope="divider"][data-part="root"][data-orientation="horizontal"]::after {
7455
+ border-block-start: var(--divider-thickness) solid var(--divider-ink);
6684
7456
  }
6685
7457
 
6686
7458
  [data-scope="divider"][data-part="root"][data-orientation="vertical"] {
6687
- inline-size: var(--divider-thickness);
7459
+ flex-direction: column;
6688
7460
  min-block-size: 1em;
6689
7461
  }
6690
7462
 
7463
+ [data-scope="divider"][data-part="root"][data-orientation="vertical"]::before {
7464
+ border-inline-start: var(--divider-thickness) solid var(--divider-ink);
7465
+ }
7466
+
7467
+ [data-scope="divider"][data-part="root"][data-orientation="vertical"]::after {
7468
+ border-inline-start: var(--divider-thickness) solid var(--divider-ink);
7469
+ }
7470
+
7471
+ [data-scope="divider"][data-part="root"]:has(> [data-scope="divider"][data-part="label"][data-placement="start"])::before {
7472
+ display: none;
7473
+ }
7474
+
7475
+ [data-scope="divider"][data-part="root"]:has(> [data-scope="divider"][data-part="label"][data-placement="end"])::after {
7476
+ display: none;
7477
+ }
7478
+
7479
+ [data-scope="divider"][data-part="label"] {
7480
+ flex: none;
7481
+ padding-inline: var(--space-md);
7482
+ font-size: var(--text-sm);
7483
+ white-space: nowrap;
7484
+ color: var(--color-base-content);
7485
+ }
7486
+
7487
+ [data-scope="divider"][data-part="root"][data-orientation="vertical"] > [data-scope="divider"][data-part="label"] {
7488
+ padding-inline: 0;
7489
+ padding-block: var(--space-sm);
7490
+ }
7491
+
7492
+ [data-scope="divider"][data-part="label"][data-placement="start"] {
7493
+ padding-inline-start: 0;
7494
+ }
7495
+
7496
+ [data-scope="divider"][data-part="label"][data-placement="end"] {
7497
+ padding-inline-end: 0;
7498
+ }
7499
+
7500
+ [data-scope="divider"][data-part="root"][data-orientation="vertical"] > [data-scope="divider"][data-part="label"][data-placement="start"] {
7501
+ padding-block-start: 0;
7502
+ }
7503
+
7504
+ [data-scope="divider"][data-part="root"][data-orientation="vertical"] > [data-scope="divider"][data-part="label"][data-placement="end"] {
7505
+ padding-block-end: 0;
7506
+ }
7507
+
6691
7508
  [data-scope="divider"][data-part="root"][data-color="primary"] {
6692
7509
  --divider-ink: var(--color-primary);
6693
7510
  }
@@ -7499,6 +8316,20 @@
7499
8316
  align-self: start;
7500
8317
  }
7501
8318
 
8319
+ [data-scope="timeline"][data-part="title"] {
8320
+ display: block;
8321
+ margin: 0;
8322
+ font-weight: var(--weight-semibold);
8323
+ line-height: var(--leading-tight);
8324
+ }
8325
+
8326
+ [data-scope="timeline"][data-part="description"] {
8327
+ display: block;
8328
+ margin: 0;
8329
+ margin-block-start: var(--space-2xs);
8330
+ color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
8331
+ }
8332
+
7502
8333
  [data-scope="timeline"][data-part="marker"][data-color="primary"] {
7503
8334
  --timeline-accent: var(--color-primary);
7504
8335
  --timeline-ring: var(--color-primary-content);
@@ -7774,38 +8605,209 @@
7774
8605
  }
7775
8606
  }
7776
8607
 
7777
- @scope ([data-scope="chat"][data-part="root"][data-color="error"]) to ([data-scope="chat"][data-part="root"]) {
7778
- [data-scope="chat"][data-part="bubble"] {
7779
- --chat-fill: var(--color-error);
7780
- --chat-ink: var(--color-error-content);
8608
+ @scope ([data-scope="chat"][data-part="root"][data-color="error"]) to ([data-scope="chat"][data-part="root"]) {
8609
+ [data-scope="chat"][data-part="bubble"] {
8610
+ --chat-fill: var(--color-error);
8611
+ --chat-ink: var(--color-error-content);
8612
+ }
8613
+ }
8614
+
8615
+ @scope ([data-scope="chat"][data-part="root"][data-size="xs"]) to ([data-scope="chat"][data-part="root"]) {
8616
+ [data-scope="chat"][data-part="bubble"] {
8617
+ font-size: var(--text-xs);
8618
+ padding: var(--space-2xs) var(--space-sm);
8619
+ }
8620
+ }
8621
+
8622
+ @scope ([data-scope="chat"][data-part="root"][data-size="sm"]) to ([data-scope="chat"][data-part="root"]) {
8623
+ [data-scope="chat"][data-part="bubble"] {
8624
+ font-size: var(--text-xs);
8625
+ padding: var(--space-xs) var(--space-md);
8626
+ }
8627
+ }
8628
+
8629
+ @scope ([data-scope="chat"][data-part="root"][data-size="lg"]) to ([data-scope="chat"][data-part="root"]) {
8630
+ [data-scope="chat"][data-part="bubble"] {
8631
+ font-size: var(--text-md);
8632
+ padding: var(--space-md) var(--space-lg);
8633
+ }
8634
+ }
8635
+
8636
+ @scope ([data-scope="chat"][data-part="root"][data-size="xl"]) to ([data-scope="chat"][data-part="root"]) {
8637
+ [data-scope="chat"][data-part="bubble"] {
8638
+ font-size: var(--text-lg);
8639
+ padding: var(--space-md) var(--space-xl);
8640
+ }
8641
+ }
8642
+ }
8643
+
8644
+ @layer zero.recipes {
8645
+ [data-scope="chat-log"][data-part="root"] {
8646
+ --chat-log-fill: var(--color-primary);
8647
+ --chat-log-on-fill: var(--color-primary-content);
8648
+ --chat-log-jump-size: calc(var(--size-field) * 8);
8649
+ }
8650
+
8651
+ [data-scope="chat-log"][data-part="root"] {
8652
+ display: flex;
8653
+ flex-direction: column;
8654
+ overflow-y: auto;
8655
+ overscroll-behavior-y: contain;
8656
+ border-radius: var(--radius-box);
8657
+ background: var(--color-base-100);
8658
+ color: var(--color-base-content);
8659
+ border: var(--border) solid var(--color-base-300);
8660
+ padding: var(--space-sm) var(--space-md);
8661
+ }
8662
+
8663
+ [data-scope="chat-log"][data-part="root"][data-focus-visible] {
8664
+ outline: 2px solid var(--color-base-content);
8665
+ outline-offset: -2px;
8666
+ }
8667
+
8668
+ [data-scope="chat-log"][data-part="content"] {
8669
+ margin-block-start: auto;
8670
+ flex: none;
8671
+ display: grid;
8672
+ row-gap: var(--space-xs);
8673
+ }
8674
+
8675
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8676
+ position: sticky;
8677
+ inset-block-end: var(--space-sm);
8678
+ align-self: center;
8679
+ flex: none;
8680
+ margin-block-start: calc(var(--chat-log-jump-size) * -1);
8681
+ block-size: var(--chat-log-jump-size);
8682
+ appearance: none;
8683
+ display: inline-flex;
8684
+ align-items: center;
8685
+ gap: var(--space-2xs);
8686
+ padding-inline: var(--space-md);
8687
+ border: var(--border) solid transparent;
8688
+ border-radius: 9999px;
8689
+ background: var(--chat-log-fill);
8690
+ color: var(--chat-log-on-fill);
8691
+ box-shadow: var(--shadow-xs);
8692
+ font-family: inherit;
8693
+ font-size: var(--text-xs);
8694
+ font-weight: var(--weight-semibold);
8695
+ line-height: var(--leading-none);
8696
+ cursor: pointer;
8697
+ transition: background var(--duration-fast) var(--ease-standard);
8698
+ }
8699
+
8700
+ [data-scope="chat-log"][data-part="jump-trigger"]:hover:not([data-disabled]) {
8701
+ background: color-mix(in oklab, var(--chat-log-fill) 90%, black);
8702
+ }
8703
+
8704
+ [data-scope="chat-log"][data-part="jump-trigger"][data-focus-visible] {
8705
+ outline: 2px solid var(--color-base-content);
8706
+ outline-offset: 2px;
8707
+ }
8708
+
8709
+ [data-scope="chat-log"][data-part="jump-trigger"][data-pressed]:not([data-disabled]) {
8710
+ transform: translateY(1px);
8711
+ box-shadow: none;
8712
+ }
8713
+
8714
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="primary"]) to ([data-scope="chat-log"][data-part="root"]) {
8715
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8716
+ --chat-log-fill: var(--color-primary);
8717
+ --chat-log-on-fill: var(--color-primary-content);
8718
+ }
8719
+ }
8720
+
8721
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="secondary"]) to ([data-scope="chat-log"][data-part="root"]) {
8722
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8723
+ --chat-log-fill: var(--color-secondary);
8724
+ --chat-log-on-fill: var(--color-secondary-content);
8725
+ }
8726
+ }
8727
+
8728
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="accent"]) to ([data-scope="chat-log"][data-part="root"]) {
8729
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8730
+ --chat-log-fill: var(--color-accent);
8731
+ --chat-log-on-fill: var(--color-accent-content);
8732
+ }
8733
+ }
8734
+
8735
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="neutral"]) to ([data-scope="chat-log"][data-part="root"]) {
8736
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8737
+ --chat-log-fill: var(--color-neutral);
8738
+ --chat-log-on-fill: var(--color-neutral-content);
8739
+ }
8740
+ }
8741
+
8742
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="info"]) to ([data-scope="chat-log"][data-part="root"]) {
8743
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8744
+ --chat-log-fill: var(--color-info);
8745
+ --chat-log-on-fill: var(--color-info-content);
8746
+ }
8747
+ }
8748
+
8749
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="success"]) to ([data-scope="chat-log"][data-part="root"]) {
8750
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8751
+ --chat-log-fill: var(--color-success);
8752
+ --chat-log-on-fill: var(--color-success-content);
8753
+ }
8754
+ }
8755
+
8756
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="warning"]) to ([data-scope="chat-log"][data-part="root"]) {
8757
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8758
+ --chat-log-fill: var(--color-warning);
8759
+ --chat-log-on-fill: var(--color-warning-content);
8760
+ }
8761
+ }
8762
+
8763
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="error"]) to ([data-scope="chat-log"][data-part="root"]) {
8764
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8765
+ --chat-log-fill: var(--color-error);
8766
+ --chat-log-on-fill: var(--color-error-content);
7781
8767
  }
7782
8768
  }
7783
8769
 
7784
- @scope ([data-scope="chat"][data-part="root"][data-size="xs"]) to ([data-scope="chat"][data-part="root"]) {
7785
- [data-scope="chat"][data-part="bubble"] {
8770
+ @scope ([data-scope="chat-log"][data-part="root"][data-size="xs"]) to ([data-scope="chat-log"][data-part="root"]) {
8771
+ [data-scope="chat-log"][data-part="content"] {
8772
+ row-gap: var(--space-2xs);
8773
+ }
8774
+
8775
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8776
+ --chat-log-jump-size: calc(var(--size-field) * 6);
7786
8777
  font-size: var(--text-xs);
7787
- padding: var(--space-2xs) var(--space-sm);
7788
8778
  }
7789
8779
  }
7790
8780
 
7791
- @scope ([data-scope="chat"][data-part="root"][data-size="sm"]) to ([data-scope="chat"][data-part="root"]) {
7792
- [data-scope="chat"][data-part="bubble"] {
8781
+ @scope ([data-scope="chat-log"][data-part="root"][data-size="sm"]) to ([data-scope="chat-log"][data-part="root"]) {
8782
+ [data-scope="chat-log"][data-part="content"] {
8783
+ row-gap: var(--space-2xs);
8784
+ }
8785
+
8786
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8787
+ --chat-log-jump-size: calc(var(--size-field) * 7);
7793
8788
  font-size: var(--text-xs);
7794
- padding: var(--space-xs) var(--space-md);
7795
8789
  }
7796
8790
  }
7797
8791
 
7798
- @scope ([data-scope="chat"][data-part="root"][data-size="lg"]) to ([data-scope="chat"][data-part="root"]) {
7799
- [data-scope="chat"][data-part="bubble"] {
7800
- font-size: var(--text-md);
7801
- padding: var(--space-md) var(--space-lg);
8792
+ @scope ([data-scope="chat-log"][data-part="root"][data-size="lg"]) to ([data-scope="chat-log"][data-part="root"]) {
8793
+ [data-scope="chat-log"][data-part="content"] {
8794
+ row-gap: var(--space-sm);
8795
+ }
8796
+
8797
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8798
+ --chat-log-jump-size: calc(var(--size-field) * 9);
8799
+ font-size: var(--text-sm);
7802
8800
  }
7803
8801
  }
7804
8802
 
7805
- @scope ([data-scope="chat"][data-part="root"][data-size="xl"]) to ([data-scope="chat"][data-part="root"]) {
7806
- [data-scope="chat"][data-part="bubble"] {
7807
- font-size: var(--text-lg);
7808
- padding: var(--space-md) var(--space-xl);
8803
+ @scope ([data-scope="chat-log"][data-part="root"][data-size="xl"]) to ([data-scope="chat-log"][data-part="root"]) {
8804
+ [data-scope="chat-log"][data-part="content"] {
8805
+ row-gap: var(--space-md);
8806
+ }
8807
+
8808
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8809
+ --chat-log-jump-size: calc(var(--size-field) * 10);
8810
+ font-size: var(--text-sm);
7809
8811
  }
7810
8812
  }
7811
8813
  }
@@ -8377,6 +9379,36 @@
8377
9379
  user-select: none;
8378
9380
  }
8379
9381
 
9382
+ [data-scope="breadcrumbs"][data-part="ellipsis"] {
9383
+ display: flex;
9384
+ align-items: center;
9385
+ gap: var(--space-xs);
9386
+ }
9387
+
9388
+ [data-scope="breadcrumbs"][data-part="ellipsis-trigger"] {
9389
+ appearance: none;
9390
+ background: transparent;
9391
+ border: 0;
9392
+ padding: 0 var(--space-2xs);
9393
+ margin: 0;
9394
+ font: inherit;
9395
+ line-height: inherit;
9396
+ color: color-mix(in oklch, var(--color-base-content) 75%, transparent);
9397
+ border-radius: var(--radius-selector);
9398
+ cursor: pointer;
9399
+ transition: color var(--duration-fast) var(--ease-standard);
9400
+ }
9401
+
9402
+ [data-scope="breadcrumbs"][data-part="ellipsis-trigger"]:hover:not([data-disabled]) {
9403
+ color: var(--color-base-content);
9404
+ text-decoration: underline;
9405
+ }
9406
+
9407
+ [data-scope="breadcrumbs"][data-part="ellipsis-trigger"][data-focus-visible] {
9408
+ outline: 2px solid var(--color-primary);
9409
+ outline-offset: 2px;
9410
+ }
9411
+
8380
9412
  [data-scope="breadcrumbs"][data-part="root"][data-color="primary"] {
8381
9413
  --bc-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
8382
9414
  }
@@ -8459,6 +9491,7 @@
8459
9491
  font-weight: var(--weight-semibold);
8460
9492
  font-variant-numeric: tabular-nums;
8461
9493
  appearance: none;
9494
+ text-decoration: none;
8462
9495
  cursor: pointer;
8463
9496
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
8464
9497
  }
@@ -8497,6 +9530,46 @@
8497
9530
  user-select: none;
8498
9531
  }
8499
9532
 
9533
+ [data-scope="pagination"][data-part="first-trigger"] {
9534
+ display: inline-flex;
9535
+ align-items: center;
9536
+ justify-content: center;
9537
+ min-inline-size: var(--pg-size);
9538
+ block-size: var(--pg-size);
9539
+ background: var(--color-base-200);
9540
+ color: var(--color-base-content);
9541
+ border: none;
9542
+ border-radius: var(--radius-field);
9543
+ font-size: calc(var(--pg-font) * 1.2);
9544
+ line-height: var(--leading-none);
9545
+ appearance: none;
9546
+ text-decoration: none;
9547
+ cursor: pointer;
9548
+ transition: background var(--duration-fast) var(--ease-standard);
9549
+ }
9550
+
9551
+ [data-scope="pagination"][data-part="first-trigger"]:hover:not([data-disabled]) {
9552
+ background: var(--color-base-300);
9553
+ }
9554
+
9555
+ [data-scope="pagination"][data-part="first-trigger"][data-disabled] {
9556
+ opacity: var(--disabled-opacity);
9557
+ cursor: not-allowed;
9558
+ }
9559
+
9560
+ [data-scope="pagination"][data-part="first-trigger"][data-focus-visible] {
9561
+ outline: 2px solid var(--color-base-content);
9562
+ outline-offset: 2px;
9563
+ }
9564
+
9565
+ [data-scope="pagination"][data-part="first-trigger"][data-pressed]:not([data-disabled]) {
9566
+ transform: translateY(1px);
9567
+ }
9568
+
9569
+ [data-scope="pagination"][data-part="first-trigger"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
9570
+ scale: -1 1;
9571
+ }
9572
+
8500
9573
  [data-scope="pagination"][data-part="prev-trigger"] {
8501
9574
  display: inline-flex;
8502
9575
  align-items: center;
@@ -8510,6 +9583,7 @@
8510
9583
  font-size: calc(var(--pg-font) * 1.2);
8511
9584
  line-height: var(--leading-none);
8512
9585
  appearance: none;
9586
+ text-decoration: none;
8513
9587
  cursor: pointer;
8514
9588
  transition: background var(--duration-fast) var(--ease-standard);
8515
9589
  }
@@ -8549,6 +9623,7 @@
8549
9623
  font-size: calc(var(--pg-font) * 1.2);
8550
9624
  line-height: var(--leading-none);
8551
9625
  appearance: none;
9626
+ text-decoration: none;
8552
9627
  cursor: pointer;
8553
9628
  transition: background var(--duration-fast) var(--ease-standard);
8554
9629
  }
@@ -8575,6 +9650,46 @@
8575
9650
  scale: -1 1;
8576
9651
  }
8577
9652
 
9653
+ [data-scope="pagination"][data-part="last-trigger"] {
9654
+ display: inline-flex;
9655
+ align-items: center;
9656
+ justify-content: center;
9657
+ min-inline-size: var(--pg-size);
9658
+ block-size: var(--pg-size);
9659
+ background: var(--color-base-200);
9660
+ color: var(--color-base-content);
9661
+ border: none;
9662
+ border-radius: var(--radius-field);
9663
+ font-size: calc(var(--pg-font) * 1.2);
9664
+ line-height: var(--leading-none);
9665
+ appearance: none;
9666
+ text-decoration: none;
9667
+ cursor: pointer;
9668
+ transition: background var(--duration-fast) var(--ease-standard);
9669
+ }
9670
+
9671
+ [data-scope="pagination"][data-part="last-trigger"]:hover:not([data-disabled]) {
9672
+ background: var(--color-base-300);
9673
+ }
9674
+
9675
+ [data-scope="pagination"][data-part="last-trigger"][data-disabled] {
9676
+ opacity: var(--disabled-opacity);
9677
+ cursor: not-allowed;
9678
+ }
9679
+
9680
+ [data-scope="pagination"][data-part="last-trigger"][data-focus-visible] {
9681
+ outline: 2px solid var(--color-base-content);
9682
+ outline-offset: 2px;
9683
+ }
9684
+
9685
+ [data-scope="pagination"][data-part="last-trigger"][data-pressed]:not([data-disabled]) {
9686
+ transform: translateY(1px);
9687
+ }
9688
+
9689
+ [data-scope="pagination"][data-part="last-trigger"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
9690
+ scale: -1 1;
9691
+ }
9692
+
8578
9693
  [data-scope="pagination"][data-part="root"][data-color="primary"] {
8579
9694
  --pg-accent: var(--color-primary);
8580
9695
  --pg-accent-content: var(--color-primary-content);
@@ -8653,6 +9768,11 @@
8653
9768
  flex-direction: column;
8654
9769
  }
8655
9770
 
9771
+ [data-scope="steps"][data-part="root"]:has(> [data-scope="steps"]:is([data-part="content"], [data-part="prev-trigger"], [data-part="next-trigger"])) {
9772
+ flex-wrap: wrap;
9773
+ row-gap: var(--space-md);
9774
+ }
9775
+
8656
9776
  [data-scope="steps"][data-part="item"] {
8657
9777
  appearance: none;
8658
9778
  position: relative;
@@ -8681,6 +9801,10 @@
8681
9801
  color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
8682
9802
  }
8683
9803
 
9804
+ [data-scope="steps"][data-part="item"][data-invalid] {
9805
+ color: color-mix(in oklab, var(--color-error) 70%, var(--color-base-content));
9806
+ }
9807
+
8684
9808
  [data-scope="steps"][data-part="item"][data-disabled] {
8685
9809
  opacity: var(--disabled-opacity);
8686
9810
  cursor: not-allowed;
@@ -8739,6 +9863,11 @@
8739
9863
  color: var(--color-base-content);
8740
9864
  }
8741
9865
 
9866
+ [data-scope="steps"][data-part="indicator"][data-invalid] {
9867
+ background: var(--color-error);
9868
+ color: var(--color-error-content);
9869
+ }
9870
+
8742
9871
  [data-scope="steps"][data-part="separator"] {
8743
9872
  position: absolute;
8744
9873
  pointer-events: none;
@@ -8753,6 +9882,10 @@
8753
9882
  background: var(--color-base-300);
8754
9883
  }
8755
9884
 
9885
+ [data-scope="steps"][data-part="separator"][data-invalid] {
9886
+ background: var(--color-error);
9887
+ }
9888
+
8756
9889
  [data-scope="steps"][data-part="separator"][data-orientation="horizontal"] {
8757
9890
  inset-block-start: calc(var(--space-xs) + var(--steps-ind) / 2);
8758
9891
  inset-inline-start: 50%;
@@ -8777,6 +9910,91 @@
8777
9910
  font-weight: var(--weight-normal);
8778
9911
  }
8779
9912
 
9913
+ [data-scope="steps"][data-part="content"] {
9914
+ flex: 1 0 100%;
9915
+ font-size: var(--text-md);
9916
+ color: var(--color-base-content);
9917
+ }
9918
+
9919
+ [data-scope="steps"][data-part="prev-trigger"] {
9920
+ appearance: none;
9921
+ display: inline-flex;
9922
+ align-items: center;
9923
+ justify-content: center;
9924
+ gap: 0.5em;
9925
+ height: calc(var(--size-field) * 12);
9926
+ padding-inline: calc(var(--size-field) * 4);
9927
+ font-size: var(--text-sm);
9928
+ font-weight: var(--weight-semibold);
9929
+ color: var(--color-base-content);
9930
+ background: var(--color-base-200);
9931
+ border: var(--border) solid var(--color-base-300);
9932
+ border-radius: var(--radius-field);
9933
+ box-shadow: var(--shadow-xs);
9934
+ cursor: pointer;
9935
+ transition: background var(--duration-normal) var(--ease-standard);
9936
+ flex: 0 0 auto;
9937
+ align-self: flex-start;
9938
+ }
9939
+
9940
+ [data-scope="steps"][data-part="prev-trigger"]:hover:not([data-disabled]) {
9941
+ background: var(--color-base-300);
9942
+ }
9943
+
9944
+ [data-scope="steps"][data-part="prev-trigger"][data-disabled] {
9945
+ opacity: var(--disabled-opacity);
9946
+ cursor: not-allowed;
9947
+ }
9948
+
9949
+ [data-scope="steps"][data-part="prev-trigger"][data-focus-visible] {
9950
+ outline: 2px solid var(--color-base-content);
9951
+ outline-offset: 2px;
9952
+ }
9953
+
9954
+ [data-scope="steps"][data-part="prev-trigger"][data-pressed]:not([data-disabled]) {
9955
+ transform: translateY(1px);
9956
+ }
9957
+
9958
+ [data-scope="steps"][data-part="next-trigger"] {
9959
+ appearance: none;
9960
+ display: inline-flex;
9961
+ align-items: center;
9962
+ justify-content: center;
9963
+ gap: 0.5em;
9964
+ height: calc(var(--size-field) * 12);
9965
+ padding-inline: calc(var(--size-field) * 4);
9966
+ font-size: var(--text-sm);
9967
+ font-weight: var(--weight-semibold);
9968
+ color: var(--color-base-content);
9969
+ background: var(--color-base-200);
9970
+ border: var(--border) solid var(--color-base-300);
9971
+ border-radius: var(--radius-field);
9972
+ box-shadow: var(--shadow-xs);
9973
+ cursor: pointer;
9974
+ transition: background var(--duration-normal) var(--ease-standard);
9975
+ flex: 0 0 auto;
9976
+ align-self: flex-start;
9977
+ margin-inline-start: auto;
9978
+ }
9979
+
9980
+ [data-scope="steps"][data-part="next-trigger"]:hover:not([data-disabled]) {
9981
+ background: var(--color-base-300);
9982
+ }
9983
+
9984
+ [data-scope="steps"][data-part="next-trigger"][data-disabled] {
9985
+ opacity: var(--disabled-opacity);
9986
+ cursor: not-allowed;
9987
+ }
9988
+
9989
+ [data-scope="steps"][data-part="next-trigger"][data-focus-visible] {
9990
+ outline: 2px solid var(--color-base-content);
9991
+ outline-offset: 2px;
9992
+ }
9993
+
9994
+ [data-scope="steps"][data-part="next-trigger"][data-pressed]:not([data-disabled]) {
9995
+ transform: translateY(1px);
9996
+ }
9997
+
8780
9998
  [data-scope="steps"][data-part="root"][data-size="xs"] {
8781
9999
  --steps-ind: calc(var(--size-selector) * 5);
8782
10000
  --steps-font: var(--text-xs);
@@ -9362,6 +10580,66 @@
9362
10580
  color: color-mix(in oklab, var(--table-accent) 60%, transparent);
9363
10581
  }
9364
10582
 
10583
+ [data-scope="table"][data-part="sort-trigger"] {
10584
+ appearance: none;
10585
+ display: inline-flex;
10586
+ align-items: center;
10587
+ margin: 0;
10588
+ border: 0;
10589
+ font: inherit;
10590
+ letter-spacing: inherit;
10591
+ text-transform: inherit;
10592
+ text-align: inherit;
10593
+ cursor: pointer;
10594
+ gap: var(--space-2xs);
10595
+ padding: 0;
10596
+ border-radius: var(--radius-selector);
10597
+ background: transparent;
10598
+ color: inherit;
10599
+ transition: color var(--duration-fast) var(--ease-standard);
10600
+ }
10601
+
10602
+ [data-scope="table"][data-part="sort-trigger"][data-state="ascending"] {
10603
+ color: var(--table-accent);
10604
+ }
10605
+
10606
+ [data-scope="table"][data-part="sort-trigger"][data-state="descending"] {
10607
+ color: var(--table-accent);
10608
+ }
10609
+
10610
+ [data-scope="table"][data-part="sort-trigger"]:hover:not([data-disabled]) {
10611
+ color: var(--table-accent);
10612
+ }
10613
+
10614
+ [data-scope="table"][data-part="sort-trigger"][data-disabled] {
10615
+ cursor: not-allowed;
10616
+ opacity: var(--disabled-opacity);
10617
+ }
10618
+
10619
+ [data-scope="table"][data-part="sort-trigger"][data-focus-visible] {
10620
+ outline: 2px solid var(--color-base-content);
10621
+ outline-offset: 2px;
10622
+ }
10623
+
10624
+ [data-scope="table"][data-part="sort-indicator"] {
10625
+ display: inline-block;
10626
+ font-size: 0.75em;
10627
+ line-height: 1;
10628
+ transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
10629
+ }
10630
+
10631
+ [data-scope="table"][data-part="sort-indicator"][data-state="descending"] {
10632
+ transform: rotate(180deg);
10633
+ }
10634
+
10635
+ [data-scope="table"][data-part="sort-indicator"][data-state="none"] {
10636
+ opacity: 0;
10637
+ }
10638
+
10639
+ [data-scope="table"][data-part="sort-trigger"]:is(:hover, [data-focus-visible]) > [data-scope="table"][data-part="sort-indicator"][data-state="none"] {
10640
+ opacity: 0.6;
10641
+ }
10642
+
9365
10643
  [data-scope="table"][data-part="cell"] {
9366
10644
  padding: var(--table-pad-block) var(--table-pad-inline);
9367
10645
  text-align: var(--table-cell-align);
@@ -9551,6 +10829,16 @@
9551
10829
  padding-block: var(--space-xs);
9552
10830
  }
9553
10831
  }
10832
+
10833
+ @media (prefers-reduced-motion: reduce) {
10834
+ [data-scope="table"][data-part="sort-trigger"] {
10835
+ transition: none;
10836
+ }
10837
+
10838
+ [data-scope="table"][data-part="sort-indicator"] {
10839
+ transition: none;
10840
+ }
10841
+ }
9554
10842
  }
9555
10843
 
9556
10844
  @layer zero.structure {