@sigx/zero-daisyui 0.14.0 → 0.16.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 (47) hide show
  1. package/dist/css/components/container.css +1 -0
  2. package/dist/css/components/input.css +9 -0
  3. package/dist/css/components/nav-list.css +7 -0
  4. package/dist/css/index.css +17 -0
  5. package/dist/lynx/components/alert.css +7 -1
  6. package/dist/lynx/components/badge.css +2 -4
  7. package/dist/lynx/components/breadcrumbs.css +30 -21
  8. package/dist/lynx/components/button.css +2 -7
  9. package/dist/lynx/components/card.css +1 -2
  10. package/dist/lynx/components/carousel.css +62 -11
  11. package/dist/lynx/components/chat-log.css +201 -10
  12. package/dist/lynx/components/chat.css +11 -2
  13. package/dist/lynx/components/combobox.css +82 -8
  14. package/dist/lynx/components/container.css +3 -2
  15. package/dist/lynx/components/diff.css +1 -1
  16. package/dist/lynx/components/divider.css +11 -10
  17. package/dist/lynx/components/drawer.css +66 -11
  18. package/dist/lynx/components/empty-state.css +1 -1
  19. package/dist/lynx/components/fieldset.css +1 -1
  20. package/dist/lynx/components/file-upload.css +212 -5
  21. package/dist/lynx/components/grid.css +2 -2
  22. package/dist/lynx/components/kbd.css +2 -3
  23. package/dist/lynx/components/menu.css +20 -1
  24. package/dist/lynx/components/nav-list.css +15 -2
  25. package/dist/lynx/components/navbar.css +14 -5
  26. package/dist/lynx/components/pagination.css +97 -65
  27. package/dist/lynx/components/radial-progress.css +10 -10
  28. package/dist/lynx/components/select.css +1 -2
  29. package/dist/lynx/components/spinner.css +2 -12
  30. package/dist/lynx/components/stack.css +2 -2
  31. package/dist/lynx/components/status.css +10 -20
  32. package/dist/lynx/components/steps.css +114 -22
  33. package/dist/lynx/components/table.css +401 -3
  34. package/dist/lynx/components/tabs.css +1 -1
  35. package/dist/lynx/components/timeline.css +12 -25
  36. package/dist/lynx/components/toast.css +2 -4
  37. package/dist/lynx/components/tooltip.css +7 -0
  38. package/dist/lynx/components/tree-view.css +31 -4
  39. package/dist/lynx/index.css +1448 -292
  40. package/dist/lynx/manifest.json +3 -3
  41. package/dist/manifest.json +1 -1
  42. package/dist/recipes.d.ts.map +1 -1
  43. package/dist/recipes.js +710 -28
  44. package/dist/recipes.js.map +1 -1
  45. package/dist/report.json +555 -56
  46. package/package.json +4 -4
  47. package/src/recipes.ts +717 -28
@@ -12,14 +12,15 @@
12
12
  overflow-x: auto;
13
13
  padding: var(--pg-ring-room);
14
14
  scroll-padding-inline: var(--pg-ring-room);
15
+ flex-direction: row;
15
16
  }
16
17
 
17
18
  .zx-pagination__item {
18
19
  display: flex;
19
20
  align-items: center;
20
21
  justify-content: center;
21
- min-inline-size: calc(var(--size-field) * 10);
22
- block-size: calc(var(--size-field) * 10);
22
+ min-width: calc(var(--size-field) * 10);
23
+ height: calc(var(--size-field) * 10);
23
24
  background: var(--color-base-200);
24
25
  color: var(--color-base-content);
25
26
  border: none;
@@ -31,28 +32,29 @@
31
32
  text-decoration: none;
32
33
  cursor: pointer;
33
34
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
35
+ flex-shrink: 0;
34
36
  padding-left: var(--space-2xs);
35
37
  padding-right: var(--space-2xs);
36
38
  }
37
39
 
38
40
  .zx-pagination__item.zx-a-size-xs {
39
- min-inline-size: calc(var(--size-field) * 7);
40
- block-size: calc(var(--size-field) * 7);
41
+ min-width: calc(var(--size-field) * 7);
42
+ height: calc(var(--size-field) * 7);
41
43
  }
42
44
 
43
45
  .zx-pagination__item.zx-a-size-sm {
44
- min-inline-size: calc(var(--size-field) * 9);
45
- block-size: calc(var(--size-field) * 9);
46
+ min-width: calc(var(--size-field) * 9);
47
+ height: calc(var(--size-field) * 9);
46
48
  }
47
49
 
48
50
  .zx-pagination__item.zx-a-size-lg {
49
- min-inline-size: calc(var(--size-field) * 12);
50
- block-size: calc(var(--size-field) * 12);
51
+ min-width: calc(var(--size-field) * 12);
52
+ height: calc(var(--size-field) * 12);
51
53
  }
52
54
 
53
55
  .zx-pagination__item.zx-a-size-xl {
54
- min-inline-size: calc(var(--size-field) * 14);
55
- block-size: calc(var(--size-field) * 14);
56
+ min-width: calc(var(--size-field) * 14);
57
+ height: calc(var(--size-field) * 14);
56
58
  }
57
59
 
58
60
  .zx-pagination__item.zx-s-active {
@@ -66,42 +68,48 @@
66
68
  }
67
69
 
68
70
  .zx-pagination__item.zx-f-focus-visible {
69
- outline: 2px solid var(--color-base-content);
71
+ outline: none;
70
72
  outline-offset: 2px;
73
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
71
74
  }
72
75
 
73
76
  .zx-pagination__item.zx-f-pressed {
74
77
  transform: translateY(1px);
75
78
  }
76
79
 
80
+ .zx-pagination__item.zx-f-pressed.zx-s-inactive {
81
+ background: var(--color-base-300);
82
+ }
83
+
77
84
  .zx-pagination__ellipsis {
78
85
  display: flex;
79
86
  align-items: center;
80
87
  justify-content: center;
81
- min-inline-size: calc(var(--size-field) * 10);
82
- block-size: calc(var(--size-field) * 10);
88
+ min-width: calc(var(--size-field) * 10);
89
+ height: calc(var(--size-field) * 10);
83
90
  font-size: var(--pg-font);
84
91
  user-select: none;
92
+ flex-shrink: 0;
85
93
  }
86
94
 
87
95
  .zx-pagination__ellipsis.zx-a-size-xs {
88
- min-inline-size: calc(var(--size-field) * 7);
89
- block-size: calc(var(--size-field) * 7);
96
+ min-width: calc(var(--size-field) * 7);
97
+ height: calc(var(--size-field) * 7);
90
98
  }
91
99
 
92
100
  .zx-pagination__ellipsis.zx-a-size-sm {
93
- min-inline-size: calc(var(--size-field) * 9);
94
- block-size: calc(var(--size-field) * 9);
101
+ min-width: calc(var(--size-field) * 9);
102
+ height: calc(var(--size-field) * 9);
95
103
  }
96
104
 
97
105
  .zx-pagination__ellipsis.zx-a-size-lg {
98
- min-inline-size: calc(var(--size-field) * 12);
99
- block-size: calc(var(--size-field) * 12);
106
+ min-width: calc(var(--size-field) * 12);
107
+ height: calc(var(--size-field) * 12);
100
108
  }
101
109
 
102
110
  .zx-pagination__ellipsis.zx-a-size-xl {
103
- min-inline-size: calc(var(--size-field) * 14);
104
- block-size: calc(var(--size-field) * 14);
111
+ min-width: calc(var(--size-field) * 14);
112
+ height: calc(var(--size-field) * 14);
105
113
  }
106
114
 
107
115
  .zx-root .zx-pagination__ellipsis {
@@ -128,8 +136,8 @@
128
136
  display: flex;
129
137
  align-items: center;
130
138
  justify-content: center;
131
- min-inline-size: calc(var(--size-field) * 10);
132
- block-size: calc(var(--size-field) * 10);
139
+ min-width: calc(var(--size-field) * 10);
140
+ height: calc(var(--size-field) * 10);
133
141
  background: var(--color-base-200);
134
142
  color: var(--color-base-content);
135
143
  border: none;
@@ -140,26 +148,27 @@
140
148
  text-decoration: none;
141
149
  cursor: pointer;
142
150
  transition: background var(--duration-fast) var(--ease-standard);
151
+ flex-shrink: 0;
143
152
  }
144
153
 
145
154
  .zx-pagination__first-trigger.zx-a-size-xs {
146
- min-inline-size: calc(var(--size-field) * 7);
147
- block-size: calc(var(--size-field) * 7);
155
+ min-width: calc(var(--size-field) * 7);
156
+ height: calc(var(--size-field) * 7);
148
157
  }
149
158
 
150
159
  .zx-pagination__first-trigger.zx-a-size-sm {
151
- min-inline-size: calc(var(--size-field) * 9);
152
- block-size: calc(var(--size-field) * 9);
160
+ min-width: calc(var(--size-field) * 9);
161
+ height: calc(var(--size-field) * 9);
153
162
  }
154
163
 
155
164
  .zx-pagination__first-trigger.zx-a-size-lg {
156
- min-inline-size: calc(var(--size-field) * 12);
157
- block-size: calc(var(--size-field) * 12);
165
+ min-width: calc(var(--size-field) * 12);
166
+ height: calc(var(--size-field) * 12);
158
167
  }
159
168
 
160
169
  .zx-pagination__first-trigger.zx-a-size-xl {
161
- min-inline-size: calc(var(--size-field) * 14);
162
- block-size: calc(var(--size-field) * 14);
170
+ min-width: calc(var(--size-field) * 14);
171
+ height: calc(var(--size-field) * 14);
163
172
  }
164
173
 
165
174
  .zx-pagination__first-trigger.zx-f-disabled {
@@ -168,8 +177,13 @@
168
177
  }
169
178
 
170
179
  .zx-pagination__first-trigger.zx-f-focus-visible {
171
- outline: 2px solid var(--color-base-content);
180
+ outline: none;
172
181
  outline-offset: 2px;
182
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
183
+ }
184
+
185
+ .zx-pagination__first-trigger.zx-f-pressed {
186
+ background: var(--color-base-300);
173
187
  }
174
188
 
175
189
  .zx-pagination__first-trigger.zx-f-pressed {
@@ -180,8 +194,8 @@
180
194
  display: flex;
181
195
  align-items: center;
182
196
  justify-content: center;
183
- min-inline-size: calc(var(--size-field) * 10);
184
- block-size: calc(var(--size-field) * 10);
197
+ min-width: calc(var(--size-field) * 10);
198
+ height: calc(var(--size-field) * 10);
185
199
  background: var(--color-base-200);
186
200
  color: var(--color-base-content);
187
201
  border: none;
@@ -192,26 +206,27 @@
192
206
  text-decoration: none;
193
207
  cursor: pointer;
194
208
  transition: background var(--duration-fast) var(--ease-standard);
209
+ flex-shrink: 0;
195
210
  }
196
211
 
197
212
  .zx-pagination__prev-trigger.zx-a-size-xs {
198
- min-inline-size: calc(var(--size-field) * 7);
199
- block-size: calc(var(--size-field) * 7);
213
+ min-width: calc(var(--size-field) * 7);
214
+ height: calc(var(--size-field) * 7);
200
215
  }
201
216
 
202
217
  .zx-pagination__prev-trigger.zx-a-size-sm {
203
- min-inline-size: calc(var(--size-field) * 9);
204
- block-size: calc(var(--size-field) * 9);
218
+ min-width: calc(var(--size-field) * 9);
219
+ height: calc(var(--size-field) * 9);
205
220
  }
206
221
 
207
222
  .zx-pagination__prev-trigger.zx-a-size-lg {
208
- min-inline-size: calc(var(--size-field) * 12);
209
- block-size: calc(var(--size-field) * 12);
223
+ min-width: calc(var(--size-field) * 12);
224
+ height: calc(var(--size-field) * 12);
210
225
  }
211
226
 
212
227
  .zx-pagination__prev-trigger.zx-a-size-xl {
213
- min-inline-size: calc(var(--size-field) * 14);
214
- block-size: calc(var(--size-field) * 14);
228
+ min-width: calc(var(--size-field) * 14);
229
+ height: calc(var(--size-field) * 14);
215
230
  }
216
231
 
217
232
  .zx-pagination__prev-trigger.zx-f-disabled {
@@ -220,8 +235,13 @@
220
235
  }
221
236
 
222
237
  .zx-pagination__prev-trigger.zx-f-focus-visible {
223
- outline: 2px solid var(--color-base-content);
238
+ outline: none;
224
239
  outline-offset: 2px;
240
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
241
+ }
242
+
243
+ .zx-pagination__prev-trigger.zx-f-pressed {
244
+ background: var(--color-base-300);
225
245
  }
226
246
 
227
247
  .zx-pagination__prev-trigger.zx-f-pressed {
@@ -232,8 +252,8 @@
232
252
  display: flex;
233
253
  align-items: center;
234
254
  justify-content: center;
235
- min-inline-size: calc(var(--size-field) * 10);
236
- block-size: calc(var(--size-field) * 10);
255
+ min-width: calc(var(--size-field) * 10);
256
+ height: calc(var(--size-field) * 10);
237
257
  background: var(--color-base-200);
238
258
  color: var(--color-base-content);
239
259
  border: none;
@@ -244,26 +264,27 @@
244
264
  text-decoration: none;
245
265
  cursor: pointer;
246
266
  transition: background var(--duration-fast) var(--ease-standard);
267
+ flex-shrink: 0;
247
268
  }
248
269
 
249
270
  .zx-pagination__next-trigger.zx-a-size-xs {
250
- min-inline-size: calc(var(--size-field) * 7);
251
- block-size: calc(var(--size-field) * 7);
271
+ min-width: calc(var(--size-field) * 7);
272
+ height: calc(var(--size-field) * 7);
252
273
  }
253
274
 
254
275
  .zx-pagination__next-trigger.zx-a-size-sm {
255
- min-inline-size: calc(var(--size-field) * 9);
256
- block-size: calc(var(--size-field) * 9);
276
+ min-width: calc(var(--size-field) * 9);
277
+ height: calc(var(--size-field) * 9);
257
278
  }
258
279
 
259
280
  .zx-pagination__next-trigger.zx-a-size-lg {
260
- min-inline-size: calc(var(--size-field) * 12);
261
- block-size: calc(var(--size-field) * 12);
281
+ min-width: calc(var(--size-field) * 12);
282
+ height: calc(var(--size-field) * 12);
262
283
  }
263
284
 
264
285
  .zx-pagination__next-trigger.zx-a-size-xl {
265
- min-inline-size: calc(var(--size-field) * 14);
266
- block-size: calc(var(--size-field) * 14);
286
+ min-width: calc(var(--size-field) * 14);
287
+ height: calc(var(--size-field) * 14);
267
288
  }
268
289
 
269
290
  .zx-pagination__next-trigger.zx-f-disabled {
@@ -272,8 +293,13 @@
272
293
  }
273
294
 
274
295
  .zx-pagination__next-trigger.zx-f-focus-visible {
275
- outline: 2px solid var(--color-base-content);
296
+ outline: none;
276
297
  outline-offset: 2px;
298
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
299
+ }
300
+
301
+ .zx-pagination__next-trigger.zx-f-pressed {
302
+ background: var(--color-base-300);
277
303
  }
278
304
 
279
305
  .zx-pagination__next-trigger.zx-f-pressed {
@@ -284,8 +310,8 @@
284
310
  display: flex;
285
311
  align-items: center;
286
312
  justify-content: center;
287
- min-inline-size: calc(var(--size-field) * 10);
288
- block-size: calc(var(--size-field) * 10);
313
+ min-width: calc(var(--size-field) * 10);
314
+ height: calc(var(--size-field) * 10);
289
315
  background: var(--color-base-200);
290
316
  color: var(--color-base-content);
291
317
  border: none;
@@ -296,26 +322,27 @@
296
322
  text-decoration: none;
297
323
  cursor: pointer;
298
324
  transition: background var(--duration-fast) var(--ease-standard);
325
+ flex-shrink: 0;
299
326
  }
300
327
 
301
328
  .zx-pagination__last-trigger.zx-a-size-xs {
302
- min-inline-size: calc(var(--size-field) * 7);
303
- block-size: calc(var(--size-field) * 7);
329
+ min-width: calc(var(--size-field) * 7);
330
+ height: calc(var(--size-field) * 7);
304
331
  }
305
332
 
306
333
  .zx-pagination__last-trigger.zx-a-size-sm {
307
- min-inline-size: calc(var(--size-field) * 9);
308
- block-size: calc(var(--size-field) * 9);
334
+ min-width: calc(var(--size-field) * 9);
335
+ height: calc(var(--size-field) * 9);
309
336
  }
310
337
 
311
338
  .zx-pagination__last-trigger.zx-a-size-lg {
312
- min-inline-size: calc(var(--size-field) * 12);
313
- block-size: calc(var(--size-field) * 12);
339
+ min-width: calc(var(--size-field) * 12);
340
+ height: calc(var(--size-field) * 12);
314
341
  }
315
342
 
316
343
  .zx-pagination__last-trigger.zx-a-size-xl {
317
- min-inline-size: calc(var(--size-field) * 14);
318
- block-size: calc(var(--size-field) * 14);
344
+ min-width: calc(var(--size-field) * 14);
345
+ height: calc(var(--size-field) * 14);
319
346
  }
320
347
 
321
348
  .zx-pagination__last-trigger.zx-f-disabled {
@@ -324,8 +351,13 @@
324
351
  }
325
352
 
326
353
  .zx-pagination__last-trigger.zx-f-focus-visible {
327
- outline: 2px solid var(--color-base-content);
354
+ outline: none;
328
355
  outline-offset: 2px;
356
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
357
+ }
358
+
359
+ .zx-pagination__last-trigger.zx-f-pressed {
360
+ background: var(--color-base-300);
329
361
  }
330
362
 
331
363
  .zx-pagination__last-trigger.zx-f-pressed {
@@ -7,29 +7,29 @@
7
7
  position: relative;
8
8
  display: inline-grid;
9
9
  place-items: center;
10
- inline-size: calc(var(--size-selector) * 16);
11
- block-size: calc(var(--size-selector) * 16);
10
+ width: calc(var(--size-selector) * 16);
11
+ height: calc(var(--size-selector) * 16);
12
12
  border-radius: 50%;
13
13
  }
14
14
 
15
15
  .zx-radial-progress__root.zx-a-size-xs {
16
- inline-size: calc(var(--size-selector) * 10);
17
- block-size: calc(var(--size-selector) * 10);
16
+ width: calc(var(--size-selector) * 10);
17
+ height: calc(var(--size-selector) * 10);
18
18
  }
19
19
 
20
20
  .zx-radial-progress__root.zx-a-size-sm {
21
- inline-size: calc(var(--size-selector) * 13);
22
- block-size: calc(var(--size-selector) * 13);
21
+ width: calc(var(--size-selector) * 13);
22
+ height: calc(var(--size-selector) * 13);
23
23
  }
24
24
 
25
25
  .zx-radial-progress__root.zx-a-size-lg {
26
- inline-size: calc(var(--size-selector) * 20);
27
- block-size: calc(var(--size-selector) * 20);
26
+ width: calc(var(--size-selector) * 20);
27
+ height: calc(var(--size-selector) * 20);
28
28
  }
29
29
 
30
30
  .zx-radial-progress__root.zx-a-size-xl {
31
- inline-size: calc(var(--size-selector) * 24);
32
- block-size: calc(var(--size-selector) * 24);
31
+ width: calc(var(--size-selector) * 24);
32
+ height: calc(var(--size-selector) * 24);
33
33
  }
34
34
 
35
35
  .zx-root .zx-radial-progress__root.zx-s-complete {
@@ -108,7 +108,7 @@
108
108
  .zx-select__clear-trigger {
109
109
  appearance: none;
110
110
  position: absolute;
111
- min-inline-size: 24px;
111
+ min-width: 24px;
112
112
  display: flex;
113
113
  align-items: center;
114
114
  justify-content: center;
@@ -125,7 +125,6 @@
125
125
  right: calc(var(--border) + var(--size-field) * 4 + var(--text-sm) + var(--space-xs));
126
126
  width: 24px;
127
127
  height: 24px;
128
- min-width: 24px;
129
128
  box-sizing: border-box;
130
129
  }
131
130
 
@@ -5,16 +5,14 @@
5
5
 
6
6
  .zx-spinner__root {
7
7
  display: flex;
8
- inline-size: calc(var(--size-selector) * 6);
9
- block-size: calc(var(--size-selector) * 6);
8
+ width: calc(var(--size-selector) * 6);
9
+ height: calc(var(--size-selector) * 6);
10
10
  box-sizing: border-box;
11
11
  border-radius: 50%;
12
12
  border: 0 solid transparent;
13
13
  border-block-start-color: var(--spinner-ink);
14
14
  animation: zero-daisyui-spin 0.7s linear infinite;
15
15
  flex-shrink: 0;
16
- width: calc(var(--size-selector) * 6);
17
- height: calc(var(--size-selector) * 6);
18
16
  border-style: solid;
19
17
  border-top-width: calc(var(--border) * 2);
20
18
  border-right-width: calc(var(--border) * 2);
@@ -27,29 +25,21 @@
27
25
  }
28
26
 
29
27
  .zx-spinner__root.zx-a-size-xs {
30
- inline-size: calc(var(--size-selector) * 4);
31
- block-size: calc(var(--size-selector) * 4);
32
28
  width: calc(var(--size-selector) * 4);
33
29
  height: calc(var(--size-selector) * 4);
34
30
  }
35
31
 
36
32
  .zx-spinner__root.zx-a-size-sm {
37
- inline-size: calc(var(--size-selector) * 5);
38
- block-size: calc(var(--size-selector) * 5);
39
33
  width: calc(var(--size-selector) * 5);
40
34
  height: calc(var(--size-selector) * 5);
41
35
  }
42
36
 
43
37
  .zx-spinner__root.zx-a-size-lg {
44
- inline-size: calc(var(--size-selector) * 7);
45
- block-size: calc(var(--size-selector) * 7);
46
38
  width: calc(var(--size-selector) * 7);
47
39
  height: calc(var(--size-selector) * 7);
48
40
  }
49
41
 
50
42
  .zx-spinner__root.zx-a-size-xl {
51
- inline-size: calc(var(--size-selector) * 8);
52
- block-size: calc(var(--size-selector) * 8);
53
43
  width: calc(var(--size-selector) * 8);
54
44
  height: calc(var(--size-selector) * 8);
55
45
  }
@@ -12,7 +12,7 @@
12
12
 
13
13
  .zx-stack__root {
14
14
  display: flex;
15
- min-inline-size: 0;
15
+ min-width: 0;
16
16
  column-gap: var(--l-gap-x);
17
17
  row-gap: var(--l-gap-y);
18
18
  align-items: var(--l-align);
@@ -31,5 +31,5 @@
31
31
  .zx-stack__item {
32
32
  --l-grow: 0;
33
33
  flex-grow: var(--l-grow);
34
- min-inline-size: 0;
34
+ min-width: 0;
35
35
  }
@@ -24,8 +24,8 @@
24
24
 
25
25
  .zx-status__root {
26
26
  display: flex;
27
- inline-size: calc(var(--size-selector) * 2.5);
28
- block-size: calc(var(--size-selector) * 2.5);
27
+ width: calc(var(--size-selector) * 2.5);
28
+ height: calc(var(--size-selector) * 2.5);
29
29
  box-sizing: border-box;
30
30
  vertical-align: middle;
31
31
  background: var(--status-ink);
@@ -33,44 +33,34 @@
33
33
  border-radius: 9999px;
34
34
  box-shadow: 0 0 0 calc((var(--size-selector) * 2.5) / 4) var(--status-halo);
35
35
  flex-shrink: 0;
36
- width: calc(var(--size-selector) * 2.5);
37
- height: calc(var(--size-selector) * 2.5);
38
36
  }
39
37
 
40
38
  .zx-status__root.zx-a-size-xs {
41
- inline-size: calc(var(--size-selector) * 1.5);
42
- block-size: calc(var(--size-selector) * 1.5);
43
- border: calc((var(--size-selector) * 1.5) / 2) solid var(--status-ink);
44
- box-shadow: 0 0 0 calc((var(--size-selector) * 1.5) / 4) var(--status-halo);
45
39
  width: calc(var(--size-selector) * 1.5);
46
40
  height: calc(var(--size-selector) * 1.5);
41
+ border: calc((var(--size-selector) * 1.5) / 2) solid var(--status-ink);
42
+ box-shadow: 0 0 0 calc((var(--size-selector) * 1.5) / 4) var(--status-halo);
47
43
  }
48
44
 
49
45
  .zx-status__root.zx-a-size-sm {
50
- inline-size: calc(var(--size-selector) * 2);
51
- block-size: calc(var(--size-selector) * 2);
52
- border: calc((var(--size-selector) * 2) / 2) solid var(--status-ink);
53
- box-shadow: 0 0 0 calc((var(--size-selector) * 2) / 4) var(--status-halo);
54
46
  width: calc(var(--size-selector) * 2);
55
47
  height: calc(var(--size-selector) * 2);
48
+ border: calc((var(--size-selector) * 2) / 2) solid var(--status-ink);
49
+ box-shadow: 0 0 0 calc((var(--size-selector) * 2) / 4) var(--status-halo);
56
50
  }
57
51
 
58
52
  .zx-status__root.zx-a-size-lg {
59
- inline-size: calc(var(--size-selector) * 3);
60
- block-size: calc(var(--size-selector) * 3);
61
- border: calc((var(--size-selector) * 3) / 2) solid var(--status-ink);
62
- box-shadow: 0 0 0 calc((var(--size-selector) * 3) / 4) var(--status-halo);
63
53
  width: calc(var(--size-selector) * 3);
64
54
  height: calc(var(--size-selector) * 3);
55
+ border: calc((var(--size-selector) * 3) / 2) solid var(--status-ink);
56
+ box-shadow: 0 0 0 calc((var(--size-selector) * 3) / 4) var(--status-halo);
65
57
  }
66
58
 
67
59
  .zx-status__root.zx-a-size-xl {
68
- inline-size: calc(var(--size-selector) * 3.5);
69
- block-size: calc(var(--size-selector) * 3.5);
70
- border: calc((var(--size-selector) * 3.5) / 2) solid var(--status-ink);
71
- box-shadow: 0 0 0 calc((var(--size-selector) * 3.5) / 4) var(--status-halo);
72
60
  width: calc(var(--size-selector) * 3.5);
73
61
  height: calc(var(--size-selector) * 3.5);
62
+ border: calc((var(--size-selector) * 3.5) / 2) solid var(--status-ink);
63
+ box-shadow: 0 0 0 calc((var(--size-selector) * 3.5) / 4) var(--status-halo);
74
64
  }
75
65
 
76
66
  .zx-status__root.zx-a-color-primary {