@sigx/zero-daisyui 0.15.0 → 0.17.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 (22) hide show
  1. package/dist/css/components/collapsible.css +32 -0
  2. package/dist/css/index.css +32 -0
  3. package/dist/lynx/components/carousel.css +58 -7
  4. package/dist/lynx/components/chat-log.css +196 -5
  5. package/dist/lynx/components/chat.css +10 -1
  6. package/dist/lynx/components/combobox.css +82 -8
  7. package/dist/lynx/components/divider.css +1 -0
  8. package/dist/lynx/components/drawer.css +62 -7
  9. package/dist/lynx/components/file-upload.css +214 -5
  10. package/dist/lynx/components/navbar.css +5 -0
  11. package/dist/lynx/components/table.css +401 -2
  12. package/dist/lynx/components/tooltip.css +7 -0
  13. package/dist/lynx/components/tree-view.css +2 -2
  14. package/dist/lynx/index.css +1041 -40
  15. package/dist/lynx/manifest.json +3 -3
  16. package/dist/manifest.json +1 -1
  17. package/dist/recipes.d.ts.map +1 -1
  18. package/dist/recipes.js +561 -18
  19. package/dist/recipes.js.map +1 -1
  20. package/dist/report.json +11 -29
  21. package/package.json +4 -4
  22. package/src/recipes.ts +565 -18
package/dist/css/components/collapsible.css CHANGED
@@ -66,9 +66,30 @@
66
66
  transform: rotate(225deg);
67
67
  }
68
68
 
69
+ [data-scope="collapsible"][data-part="trigger"]:where(button) {
70
+ appearance: none;
71
+ margin: 0;
72
+ border: 0;
73
+ background: none;
74
+ color: inherit;
75
+ font-family: inherit;
76
+ font-style: inherit;
77
+ line-height: inherit;
78
+ letter-spacing: inherit;
79
+ text-transform: inherit;
80
+ text-align: start;
81
+ inline-size: 100%;
82
+ box-sizing: border-box;
83
+ }
84
+
69
85
  [data-scope="collapsible"][data-part="panel"] {
70
86
  padding: 0 var(--space-2xl) var(--space-xl);
71
87
  font-size: var(--text-md);
88
+ overflow: clip;
89
+ }
90
+
91
+ [data-scope="collapsible"][data-part="panel"][data-state="open"] {
92
+ transition: block-size var(--duration-normal) var(--ease-standard), padding-block var(--duration-normal) var(--ease-standard);
72
93
  }
73
94
 
74
95
  [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
@@ -76,6 +97,13 @@
76
97
  animation: collapsible-panel-exit var(--duration-normal) var(--ease-standard);
77
98
  }
78
99
 
100
+ [data-scope="collapsible"][data-part="panel"][data-state="closed"][hidden] {
101
+ block-size: 0;
102
+ padding-block: 0;
103
+ border-block-width: 0;
104
+ animation: none;
105
+ }
106
+
79
107
  [data-scope="collapsible"][data-part="root"][data-color="primary"] {
80
108
  --collapsible-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
81
109
  }
@@ -164,6 +192,10 @@
164
192
  [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
165
193
  animation: none;
166
194
  }
195
+
196
+ [data-scope="collapsible"][data-part="panel"][data-state="open"] {
197
+ transition: none;
198
+ }
167
199
  }
168
200
  }
169
201
  @keyframes collapsible-panel-exit {
package/dist/css/index.css CHANGED
@@ -845,9 +845,30 @@
845
845
  transform: rotate(225deg);
846
846
  }
847
847
 
848
+ [data-scope="collapsible"][data-part="trigger"]:where(button) {
849
+ appearance: none;
850
+ margin: 0;
851
+ border: 0;
852
+ background: none;
853
+ color: inherit;
854
+ font-family: inherit;
855
+ font-style: inherit;
856
+ line-height: inherit;
857
+ letter-spacing: inherit;
858
+ text-transform: inherit;
859
+ text-align: start;
860
+ inline-size: 100%;
861
+ box-sizing: border-box;
862
+ }
863
+
848
864
  [data-scope="collapsible"][data-part="panel"] {
849
865
  padding: 0 var(--space-2xl) var(--space-xl);
850
866
  font-size: var(--text-md);
867
+ overflow: clip;
868
+ }
869
+
870
+ [data-scope="collapsible"][data-part="panel"][data-state="open"] {
871
+ transition: block-size var(--duration-normal) var(--ease-standard), padding-block var(--duration-normal) var(--ease-standard);
851
872
  }
852
873
 
853
874
  [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
@@ -855,6 +876,13 @@
855
876
  animation: collapsible-panel-exit var(--duration-normal) var(--ease-standard);
856
877
  }
857
878
 
879
+ [data-scope="collapsible"][data-part="panel"][data-state="closed"][hidden] {
880
+ block-size: 0;
881
+ padding-block: 0;
882
+ border-block-width: 0;
883
+ animation: none;
884
+ }
885
+
858
886
  [data-scope="collapsible"][data-part="root"][data-color="primary"] {
859
887
  --collapsible-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
860
888
  }
@@ -943,6 +971,10 @@
943
971
  [data-scope="collapsible"][data-part="panel"][data-state="closed"] {
944
972
  animation: none;
945
973
  }
974
+
975
+ [data-scope="collapsible"][data-part="panel"][data-state="open"] {
976
+ transition: none;
977
+ }
946
978
  }
947
979
  }
948
980
  @keyframes collapsible-panel-exit {
package/dist/lynx/components/carousel.css CHANGED
@@ -6,8 +6,9 @@
6
6
 
7
7
  .zx-carousel__root {
8
8
  position: relative;
9
- display: grid;
9
+ display: flex;
10
10
  gap: var(--space-sm);
11
+ flex-direction: column;
11
12
  }
12
13
 
13
14
  .zx-carousel__viewport {
@@ -29,7 +30,7 @@
29
30
  position: absolute;
30
31
  width: var(--carousel-nav);
31
32
  height: var(--carousel-nav);
32
- display: grid;
33
+ display: flex;
33
34
  place-items: center;
34
35
  font-size: var(--text-sm);
35
36
  line-height: var(--leading-none);
@@ -41,6 +42,8 @@
41
42
  z-index: 1;
42
43
  top: calc(50% - var(--carousel-nav) / 2);
43
44
  left: var(--space-sm);
45
+ align-items: center;
46
+ justify-content: center;
44
47
  }
45
48
 
46
49
  .zx-carousel__prev-trigger.zx-f-disabled {
@@ -49,8 +52,14 @@
49
52
  }
50
53
 
51
54
  .zx-carousel__prev-trigger.zx-f-focus-visible {
52
- outline: 2px solid var(--color-base-content);
55
+ outline: none;
53
56
  outline-offset: 2px;
57
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
58
+ }
59
+
60
+ .zx-carousel__prev-trigger.zx-f-pressed {
61
+ background: var(--color-base-300);
62
+ transform: translateY(1px);
54
63
  }
55
64
 
56
65
  .zx-carousel__next-trigger {
@@ -58,7 +67,7 @@
58
67
  position: absolute;
59
68
  width: var(--carousel-nav);
60
69
  height: var(--carousel-nav);
61
- display: grid;
70
+ display: flex;
62
71
  place-items: center;
63
72
  font-size: var(--text-sm);
64
73
  line-height: var(--leading-none);
@@ -70,6 +79,8 @@
70
79
  z-index: 1;
71
80
  top: calc(50% - var(--carousel-nav) / 2);
72
81
  right: var(--space-sm);
82
+ align-items: center;
83
+ justify-content: center;
73
84
  }
74
85
 
75
86
  .zx-carousel__next-trigger.zx-f-disabled {
@@ -78,29 +89,69 @@
78
89
  }
79
90
 
80
91
  .zx-carousel__next-trigger.zx-f-focus-visible {
81
- outline: 2px solid var(--color-base-content);
92
+ outline: none;
82
93
  outline-offset: 2px;
94
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
95
+ }
96
+
97
+ .zx-carousel__next-trigger.zx-f-pressed {
98
+ background: var(--color-base-300);
99
+ transform: translateY(1px);
83
100
  }
84
101
 
85
102
  .zx-carousel__indicator-group {
86
103
  display: flex;
87
104
  gap: var(--space-xs);
88
105
  justify-content: center;
106
+ flex-direction: row;
107
+ align-items: center;
89
108
  }
90
109
 
91
110
  .zx-carousel__indicator {
92
111
  appearance: none;
93
112
  padding: 0;
94
- display: grid;
113
+ display: flex;
95
114
  place-items: center;
96
115
  background: transparent;
97
116
  border: none;
98
117
  cursor: pointer;
118
+ width: var(--carousel-dot);
119
+ height: var(--carousel-dot);
120
+ flex-shrink: 0;
121
+ border-width: calc(var(--border) * 2);
122
+ border-style: solid;
123
+ border-radius: 9999px;
124
+ }
125
+
126
+ .zx-root .zx-carousel__indicator {
127
+ border-color: #18181bb3;
128
+ }
129
+
130
+ .zx-root.zx-theme-dark .zx-carousel__indicator {
131
+ border-color: #ecf9ffb3;
132
+ }
133
+
134
+ .zx-root.zx-theme-dim .zx-carousel__indicator {
135
+ border-color: #b2ccd6b3;
136
+ }
137
+
138
+ .zx-root.zx-theme-nord .zx-carousel__indicator {
139
+ border-color: #2e3440b3;
140
+ }
141
+
142
+ .zx-root.zx-theme-sunset .zx-carousel__indicator {
143
+ border-color: #9fb9d0b3;
144
+ }
145
+
146
+ .zx-carousel__indicator.zx-s-active {
147
+ background: var(--carousel-accent);
148
+ border-color: var(--carousel-accent);
99
149
  }
100
150
 
101
151
  .zx-carousel__indicator.zx-f-focus-visible {
102
- outline: 2px solid var(--color-base-content);
152
+ outline: none;
103
153
  outline-offset: 2px;
154
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
104
155
  }
105
156
 
106
157
  .zx-root .zx-carousel__root.zx-a-color-primary {
package/dist/lynx/components/chat-log.css CHANGED
@@ -12,22 +12,29 @@
12
12
  background: var(--color-base-100);
13
13
  color: var(--color-base-content);
14
14
  border: var(--border) solid var(--color-base-300);
15
- padding: var(--space-sm) var(--space-md);
15
+ padding: 0;
16
+ overflow: hidden;
16
17
  }
17
18
 
18
19
  .zx-chat-log__root.zx-f-focus-visible {
19
- outline: 2px solid var(--color-base-content);
20
+ outline: none;
20
21
  outline-offset: -2px;
22
+ box-shadow: inset 0 0 0 2px var(--color-base-content);
21
23
  }
22
24
 
23
25
  .zx-chat-log__content {
24
26
  flex: none;
25
- display: grid;
27
+ display: flex;
26
28
  row-gap: var(--space-xs);
29
+ flex-direction: column;
30
+ padding-top: var(--space-sm);
31
+ padding-bottom: var(--space-sm);
32
+ padding-left: var(--space-md);
33
+ padding-right: var(--space-md);
27
34
  }
28
35
 
29
36
  .zx-chat-log__jump-trigger {
30
- position: sticky;
37
+ position: relative;
31
38
  align-self: center;
32
39
  flex: none;
33
40
  height: calc(var(--size-field) * 8);
@@ -46,6 +53,9 @@
46
53
  line-height: var(--leading-none);
47
54
  cursor: pointer;
48
55
  transition: background var(--duration-fast) var(--ease-standard);
56
+ flex-direction: row;
57
+ padding-left: var(--space-md);
58
+ padding-right: var(--space-md);
49
59
  }
50
60
 
51
61
  .zx-chat-log__jump-trigger.zx-a-size-xs {
@@ -65,8 +75,29 @@
65
75
  }
66
76
 
67
77
  .zx-chat-log__jump-trigger.zx-f-focus-visible {
68
- outline: 2px solid var(--color-base-content);
78
+ outline: none;
69
79
  outline-offset: 2px;
80
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
81
+ }
82
+
83
+ .zx-root .zx-chat-log__jump-trigger.zx-f-pressed {
84
+ background: #3823b9;
85
+ }
86
+
87
+ .zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-f-pressed {
88
+ background: #5250de;
89
+ }
90
+
91
+ .zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-f-pressed {
92
+ background: #8aca7a;
93
+ }
94
+
95
+ .zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-f-pressed {
96
+ background: #516f95;
97
+ }
98
+
99
+ .zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-f-pressed {
100
+ background: #de744e;
70
101
  }
71
102
 
72
103
  .zx-chat-log__jump-trigger.zx-f-pressed {
@@ -79,41 +110,201 @@
79
110
  --chat-log-on-fill: var(--color-primary-content);
80
111
  }
81
112
 
113
+ .zx-root .zx-chat-log__jump-trigger.zx-a-color-primary.zx-f-pressed {
114
+ background: #3823b9;
115
+ }
116
+
117
+ .zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-primary.zx-f-pressed {
118
+ background: #5250de;
119
+ }
120
+
121
+ .zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-primary.zx-f-pressed {
122
+ background: #8aca7a;
123
+ }
124
+
125
+ .zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-primary.zx-f-pressed {
126
+ background: #516f95;
127
+ }
128
+
129
+ .zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-primary.zx-f-pressed {
130
+ background: #de744e;
131
+ }
132
+
82
133
  .zx-chat-log__jump-trigger.zx-a-color-secondary {
83
134
  --chat-log-fill: var(--color-secondary);
84
135
  --chat-log-on-fill: var(--color-secondary-content);
85
136
  }
86
137
 
138
+ .zx-root .zx-chat-log__jump-trigger.zx-a-color-secondary.zx-f-pressed {
139
+ background: #d42884;
140
+ }
141
+
142
+ .zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-secondary.zx-f-pressed {
143
+ background: #d42884;
144
+ }
145
+
146
+ .zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-secondary.zx-f-pressed {
147
+ background: #de6c50;
148
+ }
149
+
150
+ .zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-secondary.zx-f-pressed {
151
+ background: #6f8ba7;
152
+ }
153
+
154
+ .zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-secondary.zx-f-pressed {
155
+ background: #dc6087;
156
+ }
157
+
87
158
  .zx-chat-log__jump-trigger.zx-a-color-accent {
88
159
  --chat-log-fill: var(--color-accent);
89
160
  --chat-log-on-fill: var(--color-accent-content);
90
161
  }
91
162
 
163
+ .zx-root .zx-chat-log__jump-trigger.zx-a-color-accent.zx-f-pressed {
164
+ background: #00b7a2;
165
+ }
166
+
167
+ .zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-accent.zx-f-pressed {
168
+ background: #00b7a2;
169
+ }
170
+
171
+ .zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-accent.zx-f-pressed {
172
+ background: #ad7ecb;
173
+ }
174
+
175
+ .zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-accent.zx-f-pressed {
176
+ background: #75a7b5;
177
+ }
178
+
179
+ .zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-accent.zx-f-pressed {
180
+ background: #9b75d9;
181
+ }
182
+
92
183
  .zx-chat-log__jump-trigger.zx-a-color-neutral {
93
184
  --chat-log-fill: var(--color-neutral);
94
185
  --chat-log-on-fill: var(--color-neutral-content);
95
186
  }
96
187
 
188
+ .zx-root .zx-chat-log__jump-trigger.zx-a-color-neutral.zx-f-pressed {
189
+ background: #070708;
190
+ }
191
+
192
+ .zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-neutral.zx-f-pressed {
193
+ background: #070708;
194
+ }
195
+
196
+ .zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-neutral.zx-f-pressed {
197
+ background: #171b24;
198
+ }
199
+
200
+ .zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-neutral.zx-f-pressed {
201
+ background: #414a5b;
202
+ }
203
+
204
+ .zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-neutral.zx-f-pressed {
205
+ background: #162025;
206
+ }
207
+
97
208
  .zx-chat-log__jump-trigger.zx-a-color-info {
98
209
  --chat-log-fill: var(--color-info);
99
210
  --chat-log-on-fill: var(--color-info-content);
100
211
  }
101
212
 
213
+ .zx-root .zx-chat-log__jump-trigger.zx-a-color-info.zx-f-pressed {
214
+ background: #00a1dd;
215
+ }
216
+
217
+ .zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-info.zx-f-pressed {
218
+ background: #00a1dd;
219
+ }
220
+
221
+ .zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-info.zx-f-pressed {
222
+ background: #21ccde;
223
+ }
224
+
225
+ .zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-info.zx-f-pressed {
226
+ background: #9c7b96;
227
+ }
228
+
229
+ .zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-info.zx-f-pressed {
230
+ background: #76c3cc;
231
+ }
232
+
102
233
  .zx-chat-log__jump-trigger.zx-a-color-success {
103
234
  --chat-log-fill: var(--color-success);
104
235
  --chat-log-on-fill: var(--color-success-content);
105
236
  }
106
237
 
238
+ .zx-root .zx-chat-log__jump-trigger.zx-a-color-success.zx-f-pressed {
239
+ background: #00b77d;
240
+ }
241
+
242
+ .zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-success.zx-f-pressed {
243
+ background: #00b77d;
244
+ }
245
+
246
+ .zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-success.zx-f-pressed {
247
+ background: #54d0a4;
248
+ }
249
+
250
+ .zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-success.zx-f-pressed {
251
+ background: #8da57a;
252
+ }
253
+
254
+ .zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-success.zx-f-pressed {
255
+ background: #96c296;
256
+ }
257
+
107
258
  .zx-chat-log__jump-trigger.zx-a-color-warning {
108
259
  --chat-log-fill: var(--color-warning);
109
260
  --chat-log-on-fill: var(--color-warning-content);
110
261
  }
111
262
 
263
+ .zx-root .zx-chat-log__jump-trigger.zx-a-color-warning.zx-f-pressed {
264
+ background: #db9f00;
265
+ }
266
+
267
+ .zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-warning.zx-f-pressed {
268
+ background: #db9f00;
269
+ }
270
+
271
+ .zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-warning.zx-f-pressed {
272
+ background: #d0b54b;
273
+ }
274
+
275
+ .zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-warning.zx-f-pressed {
276
+ background: #ccb078;
277
+ }
278
+
279
+ .zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-warning.zx-f-pressed {
280
+ background: #d2ae7e;
281
+ }
282
+
112
283
  .zx-chat-log__jump-trigger.zx-a-color-error {
113
284
  --chat-log-fill: var(--color-error);
114
285
  --chat-log-on-fill: var(--color-error-content);
115
286
  }
116
287
 
288
+ .zx-root .zx-chat-log__jump-trigger.zx-a-color-error.zx-f-pressed {
289
+ background: #de546c;
290
+ }
291
+
292
+ .zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-error.zx-f-pressed {
293
+ background: #de546c;
294
+ }
295
+
296
+ .zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-error.zx-f-pressed {
297
+ background: #de9786;
298
+ }
299
+
300
+ .zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-error.zx-f-pressed {
301
+ background: #a6535b;
302
+ }
303
+
304
+ .zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-error.zx-f-pressed {
305
+ background: #dea2a4;
306
+ }
307
+
117
308
  .zx-chat-log__content.zx-a-size-xs {
118
309
  row-gap: var(--space-2xs);
119
310
  }
package/dist/lynx/components/chat.css CHANGED
@@ -4,9 +4,11 @@
4
4
  }
5
5
 
6
6
  .zx-chat__root {
7
- display: grid;
7
+ display: flex;
8
8
  column-gap: var(--space-sm);
9
9
  row-gap: var(--space-2xs);
10
+ flex-direction: column;
11
+ align-items: flex-start;
10
12
  padding-top: var(--space-2xs);
11
13
  padding-bottom: var(--space-2xs);
12
14
  }
@@ -19,6 +21,7 @@
19
21
  .zx-chat__root.zx-p-end {
20
22
  grid-template-columns: minmax(0, 1fr) auto;
21
23
  justify-items: end;
24
+ align-items: flex-end;
22
25
  }
23
26
 
24
27
  .zx-chat__avatar {
@@ -144,3 +147,9 @@
144
147
  font-size: var(--text-lg);
145
148
  padding: var(--space-md) var(--space-xl);
146
149
  }
150
+ .zx-chat__root.zx-p-start .zx-chat__bubble {
151
+ border-bottom-left-radius: 0;
152
+ }
153
+ .zx-chat__root.zx-p-end .zx-chat__bubble {
154
+ border-bottom-right-radius: 0;
155
+ }