@sigx/zero-daisyui 0.7.0 → 0.9.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 (49) hide show
  1. package/dist/audit.json +3868 -2
  2. package/dist/components.d.ts +37 -1
  3. package/dist/components.js +4 -0
  4. package/dist/css/components/avatar-group.css +168 -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/hover-card.css +174 -0
  10. package/dist/css/components/menu.css +7 -0
  11. package/dist/css/components/menubar.css +75 -0
  12. package/dist/css/components/pagination.css +83 -0
  13. package/dist/css/components/steps.css +103 -0
  14. package/dist/css/components/timeline.css +14 -0
  15. package/dist/css/components/toast.css +65 -0
  16. package/dist/css/components/tree-view.css +118 -0
  17. package/dist/css/index.css +1165 -69
  18. package/dist/lynx/components/accordion.css +3 -1
  19. package/dist/lynx/components/avatar-group.css +97 -0
  20. package/dist/lynx/components/breadcrumbs.css +44 -0
  21. package/dist/lynx/components/button.css +71 -12
  22. package/dist/lynx/components/card.css +9 -0
  23. package/dist/lynx/components/chat-log.css +147 -0
  24. package/dist/lynx/components/dialog.css +9 -3
  25. package/dist/lynx/components/divider.css +12 -2
  26. package/dist/lynx/components/hover-card.css +211 -0
  27. package/dist/lynx/components/menu.css +7 -0
  28. package/dist/lynx/components/menubar.css +199 -0
  29. package/dist/lynx/components/pagination.css +107 -0
  30. package/dist/lynx/components/popover.css +7 -2
  31. package/dist/lynx/components/select.css +40 -3
  32. package/dist/lynx/components/slider.css +3 -2
  33. package/dist/lynx/components/steps.css +103 -0
  34. package/dist/lynx/components/switch.css +2 -1
  35. package/dist/lynx/components/tabs.css +7 -1
  36. package/dist/lynx/components/timeline.css +32 -0
  37. package/dist/lynx/components/toast.css +70 -2
  38. package/dist/lynx/components/tree-view.css +28 -0
  39. package/dist/lynx/index.css +1297 -114
  40. package/dist/lynx/manifest.json +112 -4
  41. package/dist/manifest.json +110 -2
  42. package/dist/recipes.d.ts +20 -1
  43. package/dist/recipes.d.ts.map +1 -1
  44. package/dist/recipes.js +853 -99
  45. package/dist/recipes.js.map +1 -1
  46. package/dist/register.d.ts +36 -0
  47. package/dist/report.json +1320 -213
  48. package/package.json +4 -4
  49. package/src/recipes.ts +877 -99
@@ -2039,6 +2039,179 @@
2039
2039
  }
2040
2040
  }
2041
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
+
2042
2215
  @layer zero.recipes {
2043
2216
  [data-scope="menu"][data-part="trigger"] {
2044
2217
  appearance: none;
@@ -2237,6 +2410,13 @@
2237
2410
  opacity: 0.6;
2238
2411
  }
2239
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
+
2240
2420
  [data-scope="menu"][data-part="separator"] {
2241
2421
  height: var(--border);
2242
2422
  margin: var(--space-sm) var(--space-md);
@@ -2488,6 +2668,80 @@
2488
2668
  }
2489
2669
  }
2490
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
+
2491
2745
  @layer zero.recipes {
2492
2746
  [data-scope="field"][data-part="root"] {
2493
2747
  --field-accent: var(--color-base-content);
@@ -4494,84 +4748,252 @@
4494
4748
  }
4495
4749
 
4496
4750
  @layer zero.recipes {
4497
- [data-scope="toast"][data-part="root"] {
4498
- --toast-bg: var(--color-base-200);
4499
- --toast-ink: var(--color-base-content);
4500
- --toast-from: 8px;
4751
+ [data-scope="avatar-group"][data-part="root"] {
4752
+ --avatar-group-size: calc(var(--size-selector) * 10);
4753
+ --avatar-group-text: var(--text-sm);
4754
+ --avatar-group-ring: var(--color-primary);
4501
4755
  }
4502
4756
 
4503
- [data-scope="toast"][data-part="viewport"] {
4504
- position: fixed;
4505
- inset: auto;
4506
- margin: 0;
4507
- padding: var(--space-lg);
4508
- border: none;
4509
- background: transparent;
4510
- overflow: visible;
4511
- width: min(24rem, 100vw);
4512
- list-style: none;
4513
- flex-direction: column;
4514
- gap: var(--space-sm);
4515
- pointer-events: none;
4757
+ [data-scope="avatar-group"][data-part="root"] {
4758
+ display: inline-flex;
4759
+ align-items: center;
4760
+ vertical-align: middle;
4761
+ isolation: isolate;
4516
4762
  }
4517
4763
 
4518
- [data-scope="toast"][data-part="viewport"]:popover-open {
4519
- display: flex;
4764
+ [data-scope="avatar-group"][data-part="overflow"] {
4765
+ position: relative;
4766
+ display: inline-grid;
4767
+ place-items: center;
4768
+ box-sizing: border-box;
4769
+ min-width: var(--avatar-group-size);
4770
+ height: var(--avatar-group-size);
4771
+ padding-inline: var(--space-2xs);
4772
+ margin-inline-start: calc(var(--avatar-group-size) * -0.25);
4773
+ border-radius: 9999px;
4774
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--avatar-group-ring);
4775
+ background: var(--color-neutral);
4776
+ color: var(--color-neutral-content);
4777
+ font-size: var(--avatar-group-text);
4778
+ font-weight: var(--weight-semibold);
4779
+ font-variant-numeric: tabular-nums;
4780
+ white-space: nowrap;
4781
+ user-select: none;
4520
4782
  }
4521
4783
 
4522
- [data-scope="toast"][data-part="viewport"][data-placement="top-start"] {
4523
- top: 0;
4524
- inset-inline-start: 0;
4784
+ [data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:first-child) {
4785
+ margin-inline-start: calc(var(--avatar-group-size) * -0.25);
4525
4786
  }
4526
4787
 
4527
- [data-scope="toast"][data-part="viewport"][data-placement="top"] {
4528
- top: 0;
4529
- left: 50%;
4530
- transform: translateX(-50%);
4788
+ [data-scope="avatar-group"][data-part="root"][data-color="primary"] {
4789
+ --avatar-group-ring: var(--color-primary);
4531
4790
  }
4532
4791
 
4533
- [data-scope="toast"][data-part="viewport"][data-placement="top-end"] {
4534
- top: 0;
4535
- inset-inline-end: 0;
4792
+ [data-scope="avatar-group"][data-part="root"][data-color="secondary"] {
4793
+ --avatar-group-ring: var(--color-secondary);
4536
4794
  }
4537
4795
 
4538
- [data-scope="toast"][data-part="viewport"][data-placement="bottom-start"] {
4539
- bottom: 0;
4540
- inset-inline-start: 0;
4541
- flex-direction: column-reverse;
4796
+ [data-scope="avatar-group"][data-part="root"][data-color="accent"] {
4797
+ --avatar-group-ring: var(--color-accent);
4542
4798
  }
4543
4799
 
4544
- [data-scope="toast"][data-part="viewport"][data-placement="bottom"] {
4545
- bottom: 0;
4546
- left: 50%;
4547
- transform: translateX(-50%);
4548
- flex-direction: column-reverse;
4800
+ [data-scope="avatar-group"][data-part="root"][data-color="neutral"] {
4801
+ --avatar-group-ring: var(--color-neutral);
4549
4802
  }
4550
4803
 
4551
- [data-scope="toast"][data-part="viewport"][data-placement="bottom-end"] {
4552
- bottom: 0;
4553
- inset-inline-end: 0;
4554
- flex-direction: column-reverse;
4804
+ [data-scope="avatar-group"][data-part="root"][data-color="info"] {
4805
+ --avatar-group-ring: var(--color-info);
4555
4806
  }
4556
4807
 
4557
- [data-scope="toast"][data-part="root"] {
4558
- pointer-events: auto;
4559
- display: grid;
4560
- grid-template-columns: 1fr auto auto;
4561
- align-items: center;
4562
- column-gap: var(--space-md);
4563
- padding: var(--space-md) var(--space-lg);
4564
- background: var(--toast-bg);
4565
- color: var(--toast-ink);
4566
- border-radius: var(--radius-box);
4567
- box-shadow: var(--shadow-lg);
4568
- font-size: var(--text-sm);
4569
- opacity: 0;
4570
- transform: translateY(var(--toast-from));
4571
- transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
4808
+ [data-scope="avatar-group"][data-part="root"][data-color="success"] {
4809
+ --avatar-group-ring: var(--color-success);
4572
4810
  }
4573
4811
 
4574
- [data-scope="toast"][data-part="root"][data-state="open"] {
4812
+ [data-scope="avatar-group"][data-part="root"][data-color="warning"] {
4813
+ --avatar-group-ring: var(--color-warning);
4814
+ }
4815
+
4816
+ [data-scope="avatar-group"][data-part="root"][data-color="error"] {
4817
+ --avatar-group-ring: var(--color-error);
4818
+ }
4819
+
4820
+ [data-scope="avatar-group"][data-part="root"][data-size="xs"] {
4821
+ --avatar-group-size: calc(var(--size-selector) * 6);
4822
+ --avatar-group-text: var(--text-xs);
4823
+ }
4824
+
4825
+ [data-scope="avatar-group"][data-part="root"][data-size="sm"] {
4826
+ --avatar-group-size: calc(var(--size-selector) * 8);
4827
+ --avatar-group-text: var(--text-xs);
4828
+ }
4829
+
4830
+ [data-scope="avatar-group"][data-part="root"][data-size="lg"] {
4831
+ --avatar-group-size: calc(var(--size-selector) * 12);
4832
+ --avatar-group-text: var(--text-md);
4833
+ }
4834
+
4835
+ [data-scope="avatar-group"][data-part="root"][data-size="xl"] {
4836
+ --avatar-group-size: calc(var(--size-selector) * 16);
4837
+ --avatar-group-text: var(--text-lg);
4838
+ }
4839
+
4840
+ @scope ([data-scope="avatar-group"][data-part="root"][data-size="xs"]) to ([data-scope="avatar-group"][data-part="root"]) {
4841
+ :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-size])) {
4842
+ --avatar-size: calc(var(--size-selector) * 6);
4843
+ --avatar-text: var(--text-xs);
4844
+ }
4845
+ }
4846
+
4847
+ @scope ([data-scope="avatar-group"][data-part="root"][data-size="sm"]) to ([data-scope="avatar-group"][data-part="root"]) {
4848
+ :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-size])) {
4849
+ --avatar-size: calc(var(--size-selector) * 8);
4850
+ --avatar-text: var(--text-xs);
4851
+ }
4852
+ }
4853
+
4854
+ @scope ([data-scope="avatar-group"][data-part="root"][data-size="lg"]) to ([data-scope="avatar-group"][data-part="root"]) {
4855
+ :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-size])) {
4856
+ --avatar-size: calc(var(--size-selector) * 12);
4857
+ --avatar-text: var(--text-md);
4858
+ }
4859
+ }
4860
+
4861
+ @scope ([data-scope="avatar-group"][data-part="root"][data-size="xl"]) to ([data-scope="avatar-group"][data-part="root"]) {
4862
+ :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-size])) {
4863
+ --avatar-size: calc(var(--size-selector) * 16);
4864
+ --avatar-text: var(--text-lg);
4865
+ }
4866
+ }
4867
+
4868
+ @scope ([data-scope="avatar-group"][data-part="root"][data-color="primary"]) to ([data-scope="avatar-group"][data-part="root"]) {
4869
+ :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
4870
+ --avatar-ring: var(--color-primary);
4871
+ }
4872
+ }
4873
+
4874
+ @scope ([data-scope="avatar-group"][data-part="root"][data-color="secondary"]) to ([data-scope="avatar-group"][data-part="root"]) {
4875
+ :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
4876
+ --avatar-ring: var(--color-secondary);
4877
+ }
4878
+ }
4879
+
4880
+ @scope ([data-scope="avatar-group"][data-part="root"][data-color="accent"]) to ([data-scope="avatar-group"][data-part="root"]) {
4881
+ :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
4882
+ --avatar-ring: var(--color-accent);
4883
+ }
4884
+ }
4885
+
4886
+ @scope ([data-scope="avatar-group"][data-part="root"][data-color="neutral"]) to ([data-scope="avatar-group"][data-part="root"]) {
4887
+ :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
4888
+ --avatar-ring: var(--color-neutral);
4889
+ }
4890
+ }
4891
+
4892
+ @scope ([data-scope="avatar-group"][data-part="root"][data-color="info"]) to ([data-scope="avatar-group"][data-part="root"]) {
4893
+ :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
4894
+ --avatar-ring: var(--color-info);
4895
+ }
4896
+ }
4897
+
4898
+ @scope ([data-scope="avatar-group"][data-part="root"][data-color="success"]) to ([data-scope="avatar-group"][data-part="root"]) {
4899
+ :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
4900
+ --avatar-ring: var(--color-success);
4901
+ }
4902
+ }
4903
+
4904
+ @scope ([data-scope="avatar-group"][data-part="root"][data-color="warning"]) to ([data-scope="avatar-group"][data-part="root"]) {
4905
+ :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
4906
+ --avatar-ring: var(--color-warning);
4907
+ }
4908
+ }
4909
+
4910
+ @scope ([data-scope="avatar-group"][data-part="root"][data-color="error"]) to ([data-scope="avatar-group"][data-part="root"]) {
4911
+ :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
4912
+ --avatar-ring: var(--color-error);
4913
+ }
4914
+ }
4915
+ }
4916
+
4917
+ @layer zero.recipes {
4918
+ [data-scope="toast"][data-part="root"] {
4919
+ --toast-bg: var(--color-base-200);
4920
+ --toast-ink: var(--color-base-content);
4921
+ --toast-from: 8px;
4922
+ --toast-mark: 1rem;
4923
+ }
4924
+
4925
+ [data-scope="toast"][data-part="viewport"] {
4926
+ position: fixed;
4927
+ inset: auto;
4928
+ margin: 0;
4929
+ padding: var(--space-lg);
4930
+ border: none;
4931
+ background: transparent;
4932
+ overflow: visible;
4933
+ width: min(24rem, 100vw);
4934
+ list-style: none;
4935
+ flex-direction: column;
4936
+ gap: var(--space-sm);
4937
+ pointer-events: none;
4938
+ }
4939
+
4940
+ [data-scope="toast"][data-part="viewport"]:popover-open {
4941
+ display: flex;
4942
+ }
4943
+
4944
+ [data-scope="toast"][data-part="viewport"][data-placement="top-start"] {
4945
+ top: 0;
4946
+ inset-inline-start: 0;
4947
+ }
4948
+
4949
+ [data-scope="toast"][data-part="viewport"][data-placement="top"] {
4950
+ top: 0;
4951
+ left: 50%;
4952
+ transform: translateX(-50%);
4953
+ }
4954
+
4955
+ [data-scope="toast"][data-part="viewport"][data-placement="top-end"] {
4956
+ top: 0;
4957
+ inset-inline-end: 0;
4958
+ }
4959
+
4960
+ [data-scope="toast"][data-part="viewport"][data-placement="bottom-start"] {
4961
+ bottom: 0;
4962
+ inset-inline-start: 0;
4963
+ flex-direction: column-reverse;
4964
+ }
4965
+
4966
+ [data-scope="toast"][data-part="viewport"][data-placement="bottom"] {
4967
+ bottom: 0;
4968
+ left: 50%;
4969
+ transform: translateX(-50%);
4970
+ flex-direction: column-reverse;
4971
+ }
4972
+
4973
+ [data-scope="toast"][data-part="viewport"][data-placement="bottom-end"] {
4974
+ bottom: 0;
4975
+ inset-inline-end: 0;
4976
+ flex-direction: column-reverse;
4977
+ }
4978
+
4979
+ [data-scope="toast"][data-part="root"] {
4980
+ pointer-events: auto;
4981
+ display: grid;
4982
+ grid-template-columns: 1fr auto auto;
4983
+ align-items: center;
4984
+ column-gap: var(--space-md);
4985
+ padding: var(--space-md) var(--space-lg);
4986
+ background: var(--toast-bg);
4987
+ color: var(--toast-ink);
4988
+ border-radius: var(--radius-box);
4989
+ box-shadow: var(--shadow-lg);
4990
+ font-size: var(--text-sm);
4991
+ opacity: 0;
4992
+ transform: translateY(var(--toast-from));
4993
+ transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
4994
+ }
4995
+
4996
+ [data-scope="toast"][data-part="root"][data-state="open"] {
4575
4997
  opacity: 1;
4576
4998
  transform: none;
4577
4999
  }
@@ -4580,17 +5002,54 @@
4580
5002
  --toast-from: -8px;
4581
5003
  }
4582
5004
 
5005
+ [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) {
5006
+ grid-template-columns: auto 1fr auto auto;
5007
+ }
5008
+
5009
+ [data-scope="toast"][data-part="indicator"] {
5010
+ grid-column: 1;
5011
+ grid-row: 1 / span 2;
5012
+ inline-size: var(--toast-mark);
5013
+ block-size: var(--toast-mark);
5014
+ box-sizing: border-box;
5015
+ }
5016
+
5017
+ [data-scope="toast"][data-part="indicator"][data-state="loading"] {
5018
+ border-radius: 50%;
5019
+ border: calc(var(--border) * 2) solid color-mix(in oklab, var(--toast-ink) 25%, transparent);
5020
+ border-block-start-color: var(--toast-ink);
5021
+ animation: zero-daisyui-toast-spin 0.75s linear infinite;
5022
+ }
5023
+
5024
+ [data-scope="toast"][data-part="indicator"][data-state="complete"] {
5025
+ background: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
5026
+ clip-path: polygon(15.1% 41.3%, 1% 55%, 37.6% 92.8%, 99% 19.8%, 83.9% 7.2%, 36.6% 63.5%);
5027
+ }
5028
+
5029
+ [data-scope="toast"][data-part="indicator"][data-state="error"] {
5030
+ background: color-mix(in oklab, var(--color-error) 55%, var(--color-base-content));
5031
+ 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%);
5032
+ }
5033
+
4583
5034
  [data-scope="toast"][data-part="title"] {
4584
5035
  grid-column: 1;
4585
5036
  font-weight: var(--weight-semibold);
4586
5037
  }
4587
5038
 
5039
+ [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > [data-scope="toast"][data-part="title"] {
5040
+ grid-column: 2;
5041
+ }
5042
+
4588
5043
  [data-scope="toast"][data-part="description"] {
4589
5044
  grid-column: 1;
4590
5045
  font-size: var(--text-xs);
4591
5046
  color: color-mix(in oklab, var(--toast-ink) 75%, transparent);
4592
5047
  }
4593
5048
 
5049
+ [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > [data-scope="toast"][data-part="description"] {
5050
+ grid-column: 2;
5051
+ }
5052
+
4594
5053
  [data-scope="toast"][data-part="action"] {
4595
5054
  grid-column: 2;
4596
5055
  grid-row: 1;
@@ -4619,6 +5078,10 @@
4619
5078
  outline-offset: 2px;
4620
5079
  }
4621
5080
 
5081
+ [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > [data-scope="toast"][data-part="action"] {
5082
+ grid-column: 3;
5083
+ }
5084
+
4622
5085
  [data-scope="toast"][data-part="close"] {
4623
5086
  grid-column: 3;
4624
5087
  grid-row: 1;
@@ -4645,6 +5108,10 @@
4645
5108
  outline-offset: 2px;
4646
5109
  }
4647
5110
 
5111
+ [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > [data-scope="toast"][data-part="close"] {
5112
+ grid-column: 4;
5113
+ }
5114
+
4648
5115
  [data-scope="toast"][data-part="root"][data-color="primary"] {
4649
5116
  --toast-bg: var(--color-primary-soft);
4650
5117
  --toast-ink: var(--color-primary);
@@ -4717,6 +5184,18 @@
4717
5184
  }
4718
5185
  }
4719
5186
 
5187
+ @media (forced-colors: active) {
5188
+ [data-scope="toast"][data-part="indicator"][data-state="complete"] {
5189
+ background: CanvasText;
5190
+ forced-color-adjust: none;
5191
+ }
5192
+
5193
+ [data-scope="toast"][data-part="indicator"][data-state="error"] {
5194
+ background: CanvasText;
5195
+ forced-color-adjust: none;
5196
+ }
5197
+ }
5198
+
4720
5199
  @media (prefers-reduced-motion: reduce) {
4721
5200
  [data-scope="toast"][data-part="root"] {
4722
5201
  transition: none;
@@ -4725,8 +5204,15 @@
4725
5204
  [data-scope="toast"][data-part="root"][data-state="open"] {
4726
5205
  transform: none;
4727
5206
  }
5207
+
5208
+ [data-scope="toast"][data-part="indicator"][data-state="loading"] {
5209
+ animation: none;
5210
+ }
4728
5211
  }
4729
5212
  }
5213
+ @keyframes zero-daisyui-toast-spin {
5214
+ to { transform: rotate(360deg); }
5215
+ }
4730
5216
 
4731
5217
  @layer zero.recipes {
4732
5218
  [data-scope="combobox"][data-part="root"] {
@@ -5737,6 +6223,8 @@
5737
6223
  --tree-accent: var(--color-primary);
5738
6224
  --tree-text: var(--text-sm);
5739
6225
  --tree-on-accent: var(--color-primary-content);
6226
+ --tree-check: var(--tree-accent);
6227
+ --tree-on-check: var(--tree-on-accent);
5740
6228
  }
5741
6229
 
5742
6230
  [data-scope="tree-view"][data-part="root"] {
@@ -5865,6 +6353,60 @@
5865
6353
  scale: -1 1;
5866
6354
  }
5867
6355
 
6356
+ [data-scope="tree-view"][data-part="node-checkbox"] {
6357
+ display: inline-block;
6358
+ position: relative;
6359
+ flex-shrink: 0;
6360
+ box-sizing: border-box;
6361
+ width: 1.25em;
6362
+ height: 1.25em;
6363
+ border: var(--border) solid var(--tree-check);
6364
+ border-radius: var(--radius-selector);
6365
+ box-shadow: 0 1px var(--depth-shade) inset;
6366
+ cursor: pointer;
6367
+ transition: background-color var(--duration-normal) var(--ease-standard);
6368
+ }
6369
+
6370
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="checked"] {
6371
+ background-color: var(--tree-check);
6372
+ }
6373
+
6374
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="indeterminate"] {
6375
+ background-color: var(--tree-check);
6376
+ }
6377
+
6378
+ [data-scope="tree-view"][data-part="node-checkbox"][data-disabled] {
6379
+ cursor: not-allowed;
6380
+ }
6381
+
6382
+ [data-scope="tree-view"][data-part="node-checkbox"]::after {
6383
+ content: "";
6384
+ position: absolute;
6385
+ inset: 15%;
6386
+ opacity: 0;
6387
+ rotate: 45deg;
6388
+ background-color: var(--tree-on-check);
6389
+ clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
6390
+ 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);
6391
+ }
6392
+
6393
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="checked"]::after {
6394
+ clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
6395
+ opacity: 1;
6396
+ }
6397
+
6398
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="indeterminate"]::after {
6399
+ clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
6400
+ opacity: 1;
6401
+ translate: 0 -35%;
6402
+ rotate: 0deg;
6403
+ }
6404
+
6405
+ [data-scope="tree-view"][data-selected] [data-scope="tree-view"][data-part="node-checkbox"] {
6406
+ --tree-check: var(--tree-on-accent);
6407
+ --tree-on-check: var(--tree-accent);
6408
+ }
6409
+
5868
6410
  [data-scope="tree-view"][data-part="branch-content"] {
5869
6411
  display: flex;
5870
6412
  flex-direction: column;
@@ -5927,10 +6469,72 @@
5927
6469
  --tree-text: var(--text-lg);
5928
6470
  }
5929
6471
 
6472
+ @media (forced-colors: active) {
6473
+ [data-scope="tree-view"][data-part="node-checkbox"]::after {
6474
+ clip-path: none;
6475
+ background-color: #0000;
6476
+ rotate: 0deg;
6477
+ inset: 0;
6478
+ display: grid;
6479
+ place-items: center;
6480
+ color: CanvasText;
6481
+ font-size: 0.85em;
6482
+ line-height: 1;
6483
+ }
6484
+
6485
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="checked"]::after {
6486
+ content: "✔︎";
6487
+ clip-path: none;
6488
+ rotate: 0deg;
6489
+ }
6490
+
6491
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="indeterminate"]::after {
6492
+ content: "−";
6493
+ clip-path: none;
6494
+ rotate: 0deg;
6495
+ translate: none;
6496
+ }
6497
+ }
6498
+
6499
+ @media print {
6500
+ [data-scope="tree-view"][data-part="node-checkbox"]::after {
6501
+ clip-path: none;
6502
+ background-color: #0000;
6503
+ rotate: 0deg;
6504
+ inset: 0;
6505
+ display: grid;
6506
+ place-items: center;
6507
+ color: var(--print-ink);
6508
+ font-size: 0.85em;
6509
+ line-height: 1;
6510
+ }
6511
+
6512
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="checked"]::after {
6513
+ content: "✔︎";
6514
+ clip-path: none;
6515
+ rotate: 0deg;
6516
+ }
6517
+
6518
+ [data-scope="tree-view"][data-part="node-checkbox"][data-state="indeterminate"]::after {
6519
+ content: "−";
6520
+ clip-path: none;
6521
+ rotate: 0deg;
6522
+ translate: none;
6523
+ }
6524
+ }
6525
+
5930
6526
  @media (prefers-reduced-motion: reduce) {
5931
6527
  [data-scope="tree-view"][data-part="branch-indicator"] {
5932
6528
  transition: none;
5933
6529
  }
6530
+
6531
+ [data-scope="tree-view"][data-part="node-checkbox"] {
6532
+ transition: none;
6533
+ }
6534
+
6535
+ [data-scope="tree-view"][data-part="node-checkbox"]::after {
6536
+ transition: none;
6537
+ }
5934
6538
  }
5935
6539
  }
5936
6540
 
@@ -6368,15 +6972,41 @@
6368
6972
  overflow: hidden;
6369
6973
  }
6370
6974
 
6371
- [data-scope="card"][data-part="header"] {
6975
+ [data-scope="card"][data-part="media"] {
6372
6976
  display: flex;
6373
- flex-direction: column;
6374
- gap: var(--space-2xs);
6375
- padding: var(--card-pad) var(--card-pad) 0;
6376
- }
6377
-
6378
- [data-scope="card"][data-part="title"] {
6379
- margin: 0;
6977
+ align-items: center;
6978
+ justify-content: center;
6979
+ margin: 0;
6980
+ inline-size: 100%;
6981
+ object-fit: cover;
6982
+ }
6983
+
6984
+ [data-scope="card"][data-part="media"] > :is(img, picture, video, svg, canvas) {
6985
+ display: block;
6986
+ inline-size: 100%;
6987
+ block-size: 100%;
6988
+ object-fit: cover;
6989
+ }
6990
+
6991
+ [data-scope="card"][data-part="media"]:first-child {
6992
+ border-start-start-radius: var(--radius-box);
6993
+ border-start-end-radius: var(--radius-box);
6994
+ }
6995
+
6996
+ [data-scope="card"][data-part="media"]:last-child {
6997
+ border-end-start-radius: var(--radius-box);
6998
+ border-end-end-radius: var(--radius-box);
6999
+ }
7000
+
7001
+ [data-scope="card"][data-part="header"] {
7002
+ display: flex;
7003
+ flex-direction: column;
7004
+ gap: var(--space-2xs);
7005
+ padding: var(--card-pad) var(--card-pad) 0;
7006
+ }
7007
+
7008
+ [data-scope="card"][data-part="title"] {
7009
+ margin: 0;
6380
7010
  font-size: var(--text-lg);
6381
7011
  font-weight: var(--weight-semibold);
6382
7012
  line-height: var(--leading-tight);
@@ -6962,21 +7592,86 @@
6962
7592
  }
6963
7593
 
6964
7594
  [data-scope="divider"][data-part="root"] {
7595
+ display: flex;
7596
+ align-items: center;
6965
7597
  border: none;
6966
- background: var(--divider-ink);
6967
7598
  align-self: stretch;
6968
7599
  }
6969
7600
 
7601
+ [data-scope="divider"][data-part="root"]::before {
7602
+ content: "";
7603
+ flex: 1 1 0;
7604
+ min-inline-size: 0;
7605
+ }
7606
+
7607
+ [data-scope="divider"][data-part="root"]::after {
7608
+ content: "";
7609
+ flex: 1 1 0;
7610
+ min-inline-size: 0;
7611
+ }
7612
+
6970
7613
  [data-scope="divider"][data-part="root"][data-orientation="horizontal"] {
6971
7614
  inline-size: 100%;
6972
- block-size: var(--divider-thickness);
7615
+ }
7616
+
7617
+ [data-scope="divider"][data-part="root"][data-orientation="horizontal"]::before {
7618
+ border-block-start: var(--divider-thickness) solid var(--divider-ink);
7619
+ }
7620
+
7621
+ [data-scope="divider"][data-part="root"][data-orientation="horizontal"]::after {
7622
+ border-block-start: var(--divider-thickness) solid var(--divider-ink);
6973
7623
  }
6974
7624
 
6975
7625
  [data-scope="divider"][data-part="root"][data-orientation="vertical"] {
6976
- inline-size: var(--divider-thickness);
7626
+ flex-direction: column;
6977
7627
  min-block-size: 1em;
6978
7628
  }
6979
7629
 
7630
+ [data-scope="divider"][data-part="root"][data-orientation="vertical"]::before {
7631
+ border-inline-start: var(--divider-thickness) solid var(--divider-ink);
7632
+ }
7633
+
7634
+ [data-scope="divider"][data-part="root"][data-orientation="vertical"]::after {
7635
+ border-inline-start: var(--divider-thickness) solid var(--divider-ink);
7636
+ }
7637
+
7638
+ [data-scope="divider"][data-part="root"]:has(> [data-scope="divider"][data-part="label"][data-placement="start"])::before {
7639
+ display: none;
7640
+ }
7641
+
7642
+ [data-scope="divider"][data-part="root"]:has(> [data-scope="divider"][data-part="label"][data-placement="end"])::after {
7643
+ display: none;
7644
+ }
7645
+
7646
+ [data-scope="divider"][data-part="label"] {
7647
+ flex: none;
7648
+ padding-inline: var(--space-md);
7649
+ font-size: var(--text-sm);
7650
+ white-space: nowrap;
7651
+ color: var(--color-base-content);
7652
+ }
7653
+
7654
+ [data-scope="divider"][data-part="root"][data-orientation="vertical"] > [data-scope="divider"][data-part="label"] {
7655
+ padding-inline: 0;
7656
+ padding-block: var(--space-sm);
7657
+ }
7658
+
7659
+ [data-scope="divider"][data-part="label"][data-placement="start"] {
7660
+ padding-inline-start: 0;
7661
+ }
7662
+
7663
+ [data-scope="divider"][data-part="label"][data-placement="end"] {
7664
+ padding-inline-end: 0;
7665
+ }
7666
+
7667
+ [data-scope="divider"][data-part="root"][data-orientation="vertical"] > [data-scope="divider"][data-part="label"][data-placement="start"] {
7668
+ padding-block-start: 0;
7669
+ }
7670
+
7671
+ [data-scope="divider"][data-part="root"][data-orientation="vertical"] > [data-scope="divider"][data-part="label"][data-placement="end"] {
7672
+ padding-block-end: 0;
7673
+ }
7674
+
6980
7675
  [data-scope="divider"][data-part="root"][data-color="primary"] {
6981
7676
  --divider-ink: var(--color-primary);
6982
7677
  }
@@ -7788,6 +8483,20 @@
7788
8483
  align-self: start;
7789
8484
  }
7790
8485
 
8486
+ [data-scope="timeline"][data-part="title"] {
8487
+ display: block;
8488
+ margin: 0;
8489
+ font-weight: var(--weight-semibold);
8490
+ line-height: var(--leading-tight);
8491
+ }
8492
+
8493
+ [data-scope="timeline"][data-part="description"] {
8494
+ display: block;
8495
+ margin: 0;
8496
+ margin-block-start: var(--space-2xs);
8497
+ color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
8498
+ }
8499
+
7791
8500
  [data-scope="timeline"][data-part="marker"][data-color="primary"] {
7792
8501
  --timeline-accent: var(--color-primary);
7793
8502
  --timeline-ring: var(--color-primary-content);
@@ -8099,6 +8808,177 @@
8099
8808
  }
8100
8809
  }
8101
8810
 
8811
+ @layer zero.recipes {
8812
+ [data-scope="chat-log"][data-part="root"] {
8813
+ --chat-log-fill: var(--color-primary);
8814
+ --chat-log-on-fill: var(--color-primary-content);
8815
+ --chat-log-jump-size: calc(var(--size-field) * 8);
8816
+ }
8817
+
8818
+ [data-scope="chat-log"][data-part="root"] {
8819
+ display: flex;
8820
+ flex-direction: column;
8821
+ overflow-y: auto;
8822
+ overscroll-behavior-y: contain;
8823
+ border-radius: var(--radius-box);
8824
+ background: var(--color-base-100);
8825
+ color: var(--color-base-content);
8826
+ border: var(--border) solid var(--color-base-300);
8827
+ padding: var(--space-sm) var(--space-md);
8828
+ }
8829
+
8830
+ [data-scope="chat-log"][data-part="root"][data-focus-visible] {
8831
+ outline: 2px solid var(--color-base-content);
8832
+ outline-offset: -2px;
8833
+ }
8834
+
8835
+ [data-scope="chat-log"][data-part="content"] {
8836
+ margin-block-start: auto;
8837
+ flex: none;
8838
+ display: grid;
8839
+ row-gap: var(--space-xs);
8840
+ }
8841
+
8842
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8843
+ position: sticky;
8844
+ inset-block-end: var(--space-sm);
8845
+ align-self: center;
8846
+ flex: none;
8847
+ margin-block-start: calc(var(--chat-log-jump-size) * -1);
8848
+ block-size: var(--chat-log-jump-size);
8849
+ appearance: none;
8850
+ display: inline-flex;
8851
+ align-items: center;
8852
+ gap: var(--space-2xs);
8853
+ padding-inline: var(--space-md);
8854
+ border: var(--border) solid transparent;
8855
+ border-radius: 9999px;
8856
+ background: var(--chat-log-fill);
8857
+ color: var(--chat-log-on-fill);
8858
+ box-shadow: var(--shadow-xs);
8859
+ font-family: inherit;
8860
+ font-size: var(--text-xs);
8861
+ font-weight: var(--weight-semibold);
8862
+ line-height: var(--leading-none);
8863
+ cursor: pointer;
8864
+ transition: background var(--duration-fast) var(--ease-standard);
8865
+ }
8866
+
8867
+ [data-scope="chat-log"][data-part="jump-trigger"]:hover:not([data-disabled]) {
8868
+ background: color-mix(in oklab, var(--chat-log-fill) 90%, black);
8869
+ }
8870
+
8871
+ [data-scope="chat-log"][data-part="jump-trigger"][data-focus-visible] {
8872
+ outline: 2px solid var(--color-base-content);
8873
+ outline-offset: 2px;
8874
+ }
8875
+
8876
+ [data-scope="chat-log"][data-part="jump-trigger"][data-pressed]:not([data-disabled]) {
8877
+ transform: translateY(1px);
8878
+ box-shadow: none;
8879
+ }
8880
+
8881
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="primary"]) to ([data-scope="chat-log"][data-part="root"]) {
8882
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8883
+ --chat-log-fill: var(--color-primary);
8884
+ --chat-log-on-fill: var(--color-primary-content);
8885
+ }
8886
+ }
8887
+
8888
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="secondary"]) to ([data-scope="chat-log"][data-part="root"]) {
8889
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8890
+ --chat-log-fill: var(--color-secondary);
8891
+ --chat-log-on-fill: var(--color-secondary-content);
8892
+ }
8893
+ }
8894
+
8895
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="accent"]) to ([data-scope="chat-log"][data-part="root"]) {
8896
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8897
+ --chat-log-fill: var(--color-accent);
8898
+ --chat-log-on-fill: var(--color-accent-content);
8899
+ }
8900
+ }
8901
+
8902
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="neutral"]) to ([data-scope="chat-log"][data-part="root"]) {
8903
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8904
+ --chat-log-fill: var(--color-neutral);
8905
+ --chat-log-on-fill: var(--color-neutral-content);
8906
+ }
8907
+ }
8908
+
8909
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="info"]) to ([data-scope="chat-log"][data-part="root"]) {
8910
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8911
+ --chat-log-fill: var(--color-info);
8912
+ --chat-log-on-fill: var(--color-info-content);
8913
+ }
8914
+ }
8915
+
8916
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="success"]) to ([data-scope="chat-log"][data-part="root"]) {
8917
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8918
+ --chat-log-fill: var(--color-success);
8919
+ --chat-log-on-fill: var(--color-success-content);
8920
+ }
8921
+ }
8922
+
8923
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="warning"]) to ([data-scope="chat-log"][data-part="root"]) {
8924
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8925
+ --chat-log-fill: var(--color-warning);
8926
+ --chat-log-on-fill: var(--color-warning-content);
8927
+ }
8928
+ }
8929
+
8930
+ @scope ([data-scope="chat-log"][data-part="root"][data-color="error"]) to ([data-scope="chat-log"][data-part="root"]) {
8931
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8932
+ --chat-log-fill: var(--color-error);
8933
+ --chat-log-on-fill: var(--color-error-content);
8934
+ }
8935
+ }
8936
+
8937
+ @scope ([data-scope="chat-log"][data-part="root"][data-size="xs"]) to ([data-scope="chat-log"][data-part="root"]) {
8938
+ [data-scope="chat-log"][data-part="content"] {
8939
+ row-gap: var(--space-2xs);
8940
+ }
8941
+
8942
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8943
+ --chat-log-jump-size: calc(var(--size-field) * 6);
8944
+ font-size: var(--text-xs);
8945
+ }
8946
+ }
8947
+
8948
+ @scope ([data-scope="chat-log"][data-part="root"][data-size="sm"]) to ([data-scope="chat-log"][data-part="root"]) {
8949
+ [data-scope="chat-log"][data-part="content"] {
8950
+ row-gap: var(--space-2xs);
8951
+ }
8952
+
8953
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8954
+ --chat-log-jump-size: calc(var(--size-field) * 7);
8955
+ font-size: var(--text-xs);
8956
+ }
8957
+ }
8958
+
8959
+ @scope ([data-scope="chat-log"][data-part="root"][data-size="lg"]) to ([data-scope="chat-log"][data-part="root"]) {
8960
+ [data-scope="chat-log"][data-part="content"] {
8961
+ row-gap: var(--space-sm);
8962
+ }
8963
+
8964
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8965
+ --chat-log-jump-size: calc(var(--size-field) * 9);
8966
+ font-size: var(--text-sm);
8967
+ }
8968
+ }
8969
+
8970
+ @scope ([data-scope="chat-log"][data-part="root"][data-size="xl"]) to ([data-scope="chat-log"][data-part="root"]) {
8971
+ [data-scope="chat-log"][data-part="content"] {
8972
+ row-gap: var(--space-md);
8973
+ }
8974
+
8975
+ [data-scope="chat-log"][data-part="jump-trigger"] {
8976
+ --chat-log-jump-size: calc(var(--size-field) * 10);
8977
+ font-size: var(--text-sm);
8978
+ }
8979
+ }
8980
+ }
8981
+
8102
8982
  @layer zero.recipes {
8103
8983
  [data-scope="radial-progress"][data-part="root"] {
8104
8984
  --radial-size: calc(var(--size-selector) * 16);
@@ -8666,6 +9546,36 @@
8666
9546
  user-select: none;
8667
9547
  }
8668
9548
 
9549
+ [data-scope="breadcrumbs"][data-part="ellipsis"] {
9550
+ display: flex;
9551
+ align-items: center;
9552
+ gap: var(--space-xs);
9553
+ }
9554
+
9555
+ [data-scope="breadcrumbs"][data-part="ellipsis-trigger"] {
9556
+ appearance: none;
9557
+ background: transparent;
9558
+ border: 0;
9559
+ padding: 0 var(--space-2xs);
9560
+ margin: 0;
9561
+ font: inherit;
9562
+ line-height: inherit;
9563
+ color: color-mix(in oklch, var(--color-base-content) 75%, transparent);
9564
+ border-radius: var(--radius-selector);
9565
+ cursor: pointer;
9566
+ transition: color var(--duration-fast) var(--ease-standard);
9567
+ }
9568
+
9569
+ [data-scope="breadcrumbs"][data-part="ellipsis-trigger"]:hover:not([data-disabled]) {
9570
+ color: var(--color-base-content);
9571
+ text-decoration: underline;
9572
+ }
9573
+
9574
+ [data-scope="breadcrumbs"][data-part="ellipsis-trigger"][data-focus-visible] {
9575
+ outline: 2px solid var(--color-primary);
9576
+ outline-offset: 2px;
9577
+ }
9578
+
8669
9579
  [data-scope="breadcrumbs"][data-part="root"][data-color="primary"] {
8670
9580
  --bc-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
8671
9581
  }
@@ -8748,6 +9658,7 @@
8748
9658
  font-weight: var(--weight-semibold);
8749
9659
  font-variant-numeric: tabular-nums;
8750
9660
  appearance: none;
9661
+ text-decoration: none;
8751
9662
  cursor: pointer;
8752
9663
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
8753
9664
  }
@@ -8786,6 +9697,46 @@
8786
9697
  user-select: none;
8787
9698
  }
8788
9699
 
9700
+ [data-scope="pagination"][data-part="first-trigger"] {
9701
+ display: inline-flex;
9702
+ align-items: center;
9703
+ justify-content: center;
9704
+ min-inline-size: var(--pg-size);
9705
+ block-size: var(--pg-size);
9706
+ background: var(--color-base-200);
9707
+ color: var(--color-base-content);
9708
+ border: none;
9709
+ border-radius: var(--radius-field);
9710
+ font-size: calc(var(--pg-font) * 1.2);
9711
+ line-height: var(--leading-none);
9712
+ appearance: none;
9713
+ text-decoration: none;
9714
+ cursor: pointer;
9715
+ transition: background var(--duration-fast) var(--ease-standard);
9716
+ }
9717
+
9718
+ [data-scope="pagination"][data-part="first-trigger"]:hover:not([data-disabled]) {
9719
+ background: var(--color-base-300);
9720
+ }
9721
+
9722
+ [data-scope="pagination"][data-part="first-trigger"][data-disabled] {
9723
+ opacity: var(--disabled-opacity);
9724
+ cursor: not-allowed;
9725
+ }
9726
+
9727
+ [data-scope="pagination"][data-part="first-trigger"][data-focus-visible] {
9728
+ outline: 2px solid var(--color-base-content);
9729
+ outline-offset: 2px;
9730
+ }
9731
+
9732
+ [data-scope="pagination"][data-part="first-trigger"][data-pressed]:not([data-disabled]) {
9733
+ transform: translateY(1px);
9734
+ }
9735
+
9736
+ [data-scope="pagination"][data-part="first-trigger"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
9737
+ scale: -1 1;
9738
+ }
9739
+
8789
9740
  [data-scope="pagination"][data-part="prev-trigger"] {
8790
9741
  display: inline-flex;
8791
9742
  align-items: center;
@@ -8799,6 +9750,7 @@
8799
9750
  font-size: calc(var(--pg-font) * 1.2);
8800
9751
  line-height: var(--leading-none);
8801
9752
  appearance: none;
9753
+ text-decoration: none;
8802
9754
  cursor: pointer;
8803
9755
  transition: background var(--duration-fast) var(--ease-standard);
8804
9756
  }
@@ -8838,6 +9790,7 @@
8838
9790
  font-size: calc(var(--pg-font) * 1.2);
8839
9791
  line-height: var(--leading-none);
8840
9792
  appearance: none;
9793
+ text-decoration: none;
8841
9794
  cursor: pointer;
8842
9795
  transition: background var(--duration-fast) var(--ease-standard);
8843
9796
  }
@@ -8864,6 +9817,46 @@
8864
9817
  scale: -1 1;
8865
9818
  }
8866
9819
 
9820
+ [data-scope="pagination"][data-part="last-trigger"] {
9821
+ display: inline-flex;
9822
+ align-items: center;
9823
+ justify-content: center;
9824
+ min-inline-size: var(--pg-size);
9825
+ block-size: var(--pg-size);
9826
+ background: var(--color-base-200);
9827
+ color: var(--color-base-content);
9828
+ border: none;
9829
+ border-radius: var(--radius-field);
9830
+ font-size: calc(var(--pg-font) * 1.2);
9831
+ line-height: var(--leading-none);
9832
+ appearance: none;
9833
+ text-decoration: none;
9834
+ cursor: pointer;
9835
+ transition: background var(--duration-fast) var(--ease-standard);
9836
+ }
9837
+
9838
+ [data-scope="pagination"][data-part="last-trigger"]:hover:not([data-disabled]) {
9839
+ background: var(--color-base-300);
9840
+ }
9841
+
9842
+ [data-scope="pagination"][data-part="last-trigger"][data-disabled] {
9843
+ opacity: var(--disabled-opacity);
9844
+ cursor: not-allowed;
9845
+ }
9846
+
9847
+ [data-scope="pagination"][data-part="last-trigger"][data-focus-visible] {
9848
+ outline: 2px solid var(--color-base-content);
9849
+ outline-offset: 2px;
9850
+ }
9851
+
9852
+ [data-scope="pagination"][data-part="last-trigger"][data-pressed]:not([data-disabled]) {
9853
+ transform: translateY(1px);
9854
+ }
9855
+
9856
+ [data-scope="pagination"][data-part="last-trigger"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
9857
+ scale: -1 1;
9858
+ }
9859
+
8867
9860
  [data-scope="pagination"][data-part="root"][data-color="primary"] {
8868
9861
  --pg-accent: var(--color-primary);
8869
9862
  --pg-accent-content: var(--color-primary-content);
@@ -8942,6 +9935,11 @@
8942
9935
  flex-direction: column;
8943
9936
  }
8944
9937
 
9938
+ [data-scope="steps"][data-part="root"]:has(> [data-scope="steps"]:is([data-part="content"], [data-part="prev-trigger"], [data-part="next-trigger"])) {
9939
+ flex-wrap: wrap;
9940
+ row-gap: var(--space-md);
9941
+ }
9942
+
8945
9943
  [data-scope="steps"][data-part="item"] {
8946
9944
  appearance: none;
8947
9945
  position: relative;
@@ -8970,6 +9968,10 @@
8970
9968
  color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
8971
9969
  }
8972
9970
 
9971
+ [data-scope="steps"][data-part="item"][data-invalid] {
9972
+ color: color-mix(in oklab, var(--color-error) 70%, var(--color-base-content));
9973
+ }
9974
+
8973
9975
  [data-scope="steps"][data-part="item"][data-disabled] {
8974
9976
  opacity: var(--disabled-opacity);
8975
9977
  cursor: not-allowed;
@@ -9028,6 +10030,11 @@
9028
10030
  color: var(--color-base-content);
9029
10031
  }
9030
10032
 
10033
+ [data-scope="steps"][data-part="indicator"][data-invalid] {
10034
+ background: var(--color-error);
10035
+ color: var(--color-error-content);
10036
+ }
10037
+
9031
10038
  [data-scope="steps"][data-part="separator"] {
9032
10039
  position: absolute;
9033
10040
  pointer-events: none;
@@ -9042,6 +10049,10 @@
9042
10049
  background: var(--color-base-300);
9043
10050
  }
9044
10051
 
10052
+ [data-scope="steps"][data-part="separator"][data-invalid] {
10053
+ background: var(--color-error);
10054
+ }
10055
+
9045
10056
  [data-scope="steps"][data-part="separator"][data-orientation="horizontal"] {
9046
10057
  inset-block-start: calc(var(--space-xs) + var(--steps-ind) / 2);
9047
10058
  inset-inline-start: 50%;
@@ -9066,6 +10077,91 @@
9066
10077
  font-weight: var(--weight-normal);
9067
10078
  }
9068
10079
 
10080
+ [data-scope="steps"][data-part="content"] {
10081
+ flex: 1 0 100%;
10082
+ font-size: var(--text-md);
10083
+ color: var(--color-base-content);
10084
+ }
10085
+
10086
+ [data-scope="steps"][data-part="prev-trigger"] {
10087
+ appearance: none;
10088
+ display: inline-flex;
10089
+ align-items: center;
10090
+ justify-content: center;
10091
+ gap: 0.5em;
10092
+ height: calc(var(--size-field) * 12);
10093
+ padding-inline: calc(var(--size-field) * 4);
10094
+ font-size: var(--text-sm);
10095
+ font-weight: var(--weight-semibold);
10096
+ color: var(--color-base-content);
10097
+ background: var(--color-base-200);
10098
+ border: var(--border) solid var(--color-base-300);
10099
+ border-radius: var(--radius-field);
10100
+ box-shadow: var(--shadow-xs);
10101
+ cursor: pointer;
10102
+ transition: background var(--duration-normal) var(--ease-standard);
10103
+ flex: 0 0 auto;
10104
+ align-self: flex-start;
10105
+ }
10106
+
10107
+ [data-scope="steps"][data-part="prev-trigger"]:hover:not([data-disabled]) {
10108
+ background: var(--color-base-300);
10109
+ }
10110
+
10111
+ [data-scope="steps"][data-part="prev-trigger"][data-disabled] {
10112
+ opacity: var(--disabled-opacity);
10113
+ cursor: not-allowed;
10114
+ }
10115
+
10116
+ [data-scope="steps"][data-part="prev-trigger"][data-focus-visible] {
10117
+ outline: 2px solid var(--color-base-content);
10118
+ outline-offset: 2px;
10119
+ }
10120
+
10121
+ [data-scope="steps"][data-part="prev-trigger"][data-pressed]:not([data-disabled]) {
10122
+ transform: translateY(1px);
10123
+ }
10124
+
10125
+ [data-scope="steps"][data-part="next-trigger"] {
10126
+ appearance: none;
10127
+ display: inline-flex;
10128
+ align-items: center;
10129
+ justify-content: center;
10130
+ gap: 0.5em;
10131
+ height: calc(var(--size-field) * 12);
10132
+ padding-inline: calc(var(--size-field) * 4);
10133
+ font-size: var(--text-sm);
10134
+ font-weight: var(--weight-semibold);
10135
+ color: var(--color-base-content);
10136
+ background: var(--color-base-200);
10137
+ border: var(--border) solid var(--color-base-300);
10138
+ border-radius: var(--radius-field);
10139
+ box-shadow: var(--shadow-xs);
10140
+ cursor: pointer;
10141
+ transition: background var(--duration-normal) var(--ease-standard);
10142
+ flex: 0 0 auto;
10143
+ align-self: flex-start;
10144
+ margin-inline-start: auto;
10145
+ }
10146
+
10147
+ [data-scope="steps"][data-part="next-trigger"]:hover:not([data-disabled]) {
10148
+ background: var(--color-base-300);
10149
+ }
10150
+
10151
+ [data-scope="steps"][data-part="next-trigger"][data-disabled] {
10152
+ opacity: var(--disabled-opacity);
10153
+ cursor: not-allowed;
10154
+ }
10155
+
10156
+ [data-scope="steps"][data-part="next-trigger"][data-focus-visible] {
10157
+ outline: 2px solid var(--color-base-content);
10158
+ outline-offset: 2px;
10159
+ }
10160
+
10161
+ [data-scope="steps"][data-part="next-trigger"][data-pressed]:not([data-disabled]) {
10162
+ transform: translateY(1px);
10163
+ }
10164
+
9069
10165
  [data-scope="steps"][data-part="root"][data-size="xs"] {
9070
10166
  --steps-ind: calc(var(--size-selector) * 5);
9071
10167
  --steps-font: var(--text-xs);