@sigx/zero-daisyui 0.13.0 → 0.15.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 (54) hide show
  1. package/dist/audit.json +60 -0
  2. package/dist/css/components/combobox.css +5 -0
  3. package/dist/css/components/container.css +1 -0
  4. package/dist/css/components/input.css +9 -0
  5. package/dist/css/components/nav-list.css +7 -0
  6. package/dist/css/components/spinner.css +5 -5
  7. package/dist/css/index.css +27 -5
  8. package/dist/lynx/components/alert.css +49 -7
  9. package/dist/lynx/components/avatar-group.css +13 -1
  10. package/dist/lynx/components/avatar.css +56 -1
  11. package/dist/lynx/components/badge.css +209 -6
  12. package/dist/lynx/components/breadcrumbs.css +30 -21
  13. package/dist/lynx/components/button.css +2 -7
  14. package/dist/lynx/components/card.css +12 -2
  15. package/dist/lynx/components/carousel.css +4 -4
  16. package/dist/lynx/components/chat-log.css +5 -5
  17. package/dist/lynx/components/chat.css +1 -1
  18. package/dist/lynx/components/combobox.css +5 -0
  19. package/dist/lynx/components/container.css +3 -2
  20. package/dist/lynx/components/diff.css +1 -1
  21. package/dist/lynx/components/divider.css +53 -8
  22. package/dist/lynx/components/drawer.css +8 -8
  23. package/dist/lynx/components/empty-state.css +7 -1
  24. package/dist/lynx/components/fieldset.css +1 -1
  25. package/dist/lynx/components/grid.css +2 -2
  26. package/dist/lynx/components/kbd.css +16 -3
  27. package/dist/lynx/components/menu.css +20 -1
  28. package/dist/lynx/components/nav-list.css +15 -2
  29. package/dist/lynx/components/navbar.css +9 -5
  30. package/dist/lynx/components/pagination.css +97 -65
  31. package/dist/lynx/components/radial-progress.css +10 -10
  32. package/dist/lynx/components/select.css +1 -2
  33. package/dist/lynx/components/skeleton.css +1 -1
  34. package/dist/lynx/components/spinner.css +22 -12
  35. package/dist/lynx/components/stack.css +2 -2
  36. package/dist/lynx/components/stats.css +39 -3
  37. package/dist/lynx/components/status.css +197 -11
  38. package/dist/lynx/components/steps.css +114 -22
  39. package/dist/lynx/components/table.css +1 -1
  40. package/dist/lynx/components/tabs.css +1 -1
  41. package/dist/lynx/components/textarea.css +1 -1
  42. package/dist/lynx/components/timeline.css +12 -25
  43. package/dist/lynx/components/toast.css +331 -12
  44. package/dist/lynx/components/tree-view.css +31 -4
  45. package/dist/lynx/index.css +1382 -262
  46. package/dist/lynx/manifest.json +3 -3
  47. package/dist/manifest.json +1 -1
  48. package/dist/recipes.d.ts +6 -1
  49. package/dist/recipes.d.ts.map +1 -1
  50. package/dist/recipes.js +934 -25
  51. package/dist/recipes.js.map +1 -1
  52. package/dist/report.json +565 -89
  53. package/package.json +4 -4
  54. package/src/recipes.ts +939 -25
package/dist/audit.json CHANGED
@@ -5455,6 +5455,18 @@
5455
5455
  "ink": "#18181b",
5456
5456
  "bg": "#f8f8f8"
5457
5457
  },
5458
+ {
5459
+ "key": "daisyui/light/combobox/tag/-/focus-visible/-",
5460
+ "scope": "combobox",
5461
+ "part": "tag",
5462
+ "flag": "focus-visible",
5463
+ "matrix": "text",
5464
+ "verdict": "pass",
5465
+ "ratio": 16.68,
5466
+ "inGroup": 16.68,
5467
+ "ink": "#18181b",
5468
+ "bg": "#f8f8f8"
5469
+ },
5458
5470
  {
5459
5471
  "key": "daisyui/light/combobox/tag-label/-/-/-",
5460
5472
  "scope": "combobox",
@@ -61330,6 +61342,18 @@
61330
61342
  "ink": "#ecf9ff",
61331
61343
  "bg": "#191e24"
61332
61344
  },
61345
+ {
61346
+ "key": "daisyui/dark/combobox/tag/-/focus-visible/-",
61347
+ "scope": "combobox",
61348
+ "part": "tag",
61349
+ "flag": "focus-visible",
61350
+ "matrix": "text",
61351
+ "verdict": "pass",
61352
+ "ratio": 15.62,
61353
+ "inGroup": 15.62,
61354
+ "ink": "#ecf9ff",
61355
+ "bg": "#191e24"
61356
+ },
61333
61357
  {
61334
61358
  "key": "daisyui/dark/combobox/tag-label/-/-/-",
61335
61359
  "scope": "combobox",
@@ -117205,6 +117229,18 @@
117205
117229
  "ink": "#b2ccd6",
117206
117230
  "bg": "#242933"
117207
117231
  },
117232
+ {
117233
+ "key": "daisyui/dim/combobox/tag/-/focus-visible/-",
117234
+ "scope": "combobox",
117235
+ "part": "tag",
117236
+ "flag": "focus-visible",
117237
+ "matrix": "text",
117238
+ "verdict": "pass",
117239
+ "ratio": 8.68,
117240
+ "inGroup": 8.68,
117241
+ "ink": "#b2ccd6",
117242
+ "bg": "#242933"
117243
+ },
117208
117244
  {
117209
117245
  "key": "daisyui/dim/combobox/tag-label/-/-/-",
117210
117246
  "scope": "combobox",
@@ -173080,6 +173116,18 @@
173080
173116
  "ink": "#2e3440",
173081
173117
  "bg": "#e5e9f0"
173082
173118
  },
173119
+ {
173120
+ "key": "daisyui/nord/combobox/tag/-/focus-visible/-",
173121
+ "scope": "combobox",
173122
+ "part": "tag",
173123
+ "flag": "focus-visible",
173124
+ "matrix": "text",
173125
+ "verdict": "pass",
173126
+ "ratio": 10.26,
173127
+ "inGroup": 10.26,
173128
+ "ink": "#2e3440",
173129
+ "bg": "#e5e9f0"
173130
+ },
173083
173131
  {
173084
173132
  "key": "daisyui/nord/combobox/tag-label/-/-/-",
173085
173133
  "scope": "combobox",
@@ -228955,6 +229003,18 @@
228955
229003
  "ink": "#9fb9d0",
228956
229004
  "bg": "#0e171e"
228957
229005
  },
229006
+ {
229007
+ "key": "daisyui/sunset/combobox/tag/-/focus-visible/-",
229008
+ "scope": "combobox",
229009
+ "part": "tag",
229010
+ "flag": "focus-visible",
229011
+ "matrix": "text",
229012
+ "verdict": "pass",
229013
+ "ratio": 8.9,
229014
+ "inGroup": 8.9,
229015
+ "ink": "#9fb9d0",
229016
+ "bg": "#0e171e"
229017
+ },
228958
229018
  {
228959
229019
  "key": "daisyui/sunset/combobox/tag-label/-/-/-",
228960
229020
  "scope": "combobox",
@@ -83,6 +83,11 @@
83
83
  line-height: var(--leading-none);
84
84
  }
85
85
 
86
+ [data-scope="combobox"][data-part="tag"][data-focus-visible] {
87
+ outline: 2px solid var(--color-base-content);
88
+ outline-offset: 2px;
89
+ }
90
+
86
91
  [data-scope="combobox"][data-part="tag-label"] {
87
92
  white-space: nowrap;
88
93
  }
@@ -9,6 +9,7 @@
9
9
  }
10
10
 
11
11
  [data-scope="container"][data-part="root"] {
12
+ box-sizing: border-box;
12
13
  inline-size: 100%;
13
14
  max-inline-size: var(--l-measure);
14
15
  margin-inline: auto;
@@ -76,6 +76,15 @@
76
76
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
77
77
  }
78
78
 
79
+ [data-scope="input"][data-part="input"]::-webkit-search-cancel-button {
80
+ appearance: none;
81
+ display: none;
82
+ }
83
+
84
+ [data-scope="input"][data-part="input"]::-webkit-search-decoration {
85
+ appearance: none;
86
+ }
87
+
79
88
  [data-scope="input"][data-part="adornment"] {
80
89
  display: inline-flex;
81
90
  align-items: center;
@@ -46,6 +46,13 @@
46
46
  align-items: center;
47
47
  gap: var(--space-sm);
48
48
  text-decoration: none;
49
+ appearance: none;
50
+ background: none;
51
+ border: 0;
52
+ font: inherit;
53
+ text-align: start;
54
+ inline-size: 100%;
55
+ cursor: pointer;
49
56
  color: var(--nav-ink);
50
57
  padding: var(--space-sm) var(--space-lg);
51
58
  border-radius: var(--radius-field);
@@ -2,7 +2,7 @@
2
2
 
3
3
  @layer zero.recipes {
4
4
  [data-scope="spinner"][data-part="root"] {
5
- --spinner-size: calc(var(--size-field) * 0.5);
5
+ --spinner-size: calc(var(--size-selector) * 6);
6
6
  --spinner-ink: var(--color-primary);
7
7
  --spinner-track: var(--color-base-300);
8
8
  }
@@ -51,19 +51,19 @@
51
51
  }
52
52
 
53
53
  [data-scope="spinner"][data-part="root"][data-size="xs"] {
54
- --spinner-size: calc(var(--size-field) * 0.35);
54
+ --spinner-size: calc(var(--size-selector) * 4);
55
55
  }
56
56
 
57
57
  [data-scope="spinner"][data-part="root"][data-size="sm"] {
58
- --spinner-size: calc(var(--size-field) * 0.42);
58
+ --spinner-size: calc(var(--size-selector) * 5);
59
59
  }
60
60
 
61
61
  [data-scope="spinner"][data-part="root"][data-size="lg"] {
62
- --spinner-size: calc(var(--size-field) * 0.7);
62
+ --spinner-size: calc(var(--size-selector) * 7);
63
63
  }
64
64
 
65
65
  [data-scope="spinner"][data-part="root"][data-size="xl"] {
66
- --spinner-size: calc(var(--size-field) * 0.9);
66
+ --spinner-size: calc(var(--size-selector) * 8);
67
67
  }
68
68
 
69
69
  @media (prefers-reduced-motion: reduce) {
@@ -447,6 +447,7 @@
447
447
  }
448
448
 
449
449
  [data-scope="container"][data-part="root"] {
450
+ box-sizing: border-box;
450
451
  inline-size: 100%;
451
452
  max-inline-size: var(--l-measure);
452
453
  margin-inline: auto;
@@ -5309,6 +5310,11 @@
5309
5310
  line-height: var(--leading-none);
5310
5311
  }
5311
5312
 
5313
+ [data-scope="combobox"][data-part="tag"][data-focus-visible] {
5314
+ outline: 2px solid var(--color-base-content);
5315
+ outline-offset: 2px;
5316
+ }
5317
+
5312
5318
  [data-scope="combobox"][data-part="tag-label"] {
5313
5319
  white-space: nowrap;
5314
5320
  }
@@ -6627,6 +6633,15 @@
6627
6633
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
6628
6634
  }
6629
6635
 
6636
+ [data-scope="input"][data-part="input"]::-webkit-search-cancel-button {
6637
+ appearance: none;
6638
+ display: none;
6639
+ }
6640
+
6641
+ [data-scope="input"][data-part="input"]::-webkit-search-decoration {
6642
+ appearance: none;
6643
+ }
6644
+
6630
6645
  [data-scope="input"][data-part="adornment"] {
6631
6646
  display: inline-flex;
6632
6647
  align-items: center;
@@ -7811,7 +7826,7 @@
7811
7826
 
7812
7827
  @layer zero.recipes {
7813
7828
  [data-scope="spinner"][data-part="root"] {
7814
- --spinner-size: calc(var(--size-field) * 0.5);
7829
+ --spinner-size: calc(var(--size-selector) * 6);
7815
7830
  --spinner-ink: var(--color-primary);
7816
7831
  --spinner-track: var(--color-base-300);
7817
7832
  }
@@ -7860,19 +7875,19 @@
7860
7875
  }
7861
7876
 
7862
7877
  [data-scope="spinner"][data-part="root"][data-size="xs"] {
7863
- --spinner-size: calc(var(--size-field) * 0.35);
7878
+ --spinner-size: calc(var(--size-selector) * 4);
7864
7879
  }
7865
7880
 
7866
7881
  [data-scope="spinner"][data-part="root"][data-size="sm"] {
7867
- --spinner-size: calc(var(--size-field) * 0.42);
7882
+ --spinner-size: calc(var(--size-selector) * 5);
7868
7883
  }
7869
7884
 
7870
7885
  [data-scope="spinner"][data-part="root"][data-size="lg"] {
7871
- --spinner-size: calc(var(--size-field) * 0.7);
7886
+ --spinner-size: calc(var(--size-selector) * 7);
7872
7887
  }
7873
7888
 
7874
7889
  [data-scope="spinner"][data-part="root"][data-size="xl"] {
7875
- --spinner-size: calc(var(--size-field) * 0.9);
7890
+ --spinner-size: calc(var(--size-selector) * 8);
7876
7891
  }
7877
7892
 
7878
7893
  @media (prefers-reduced-motion: reduce) {
@@ -9385,6 +9400,13 @@
9385
9400
  align-items: center;
9386
9401
  gap: var(--space-sm);
9387
9402
  text-decoration: none;
9403
+ appearance: none;
9404
+ background: none;
9405
+ border: 0;
9406
+ font: inherit;
9407
+ text-align: start;
9408
+ inline-size: 100%;
9409
+ cursor: pointer;
9388
9410
  color: var(--nav-ink);
9389
9411
  padding: var(--space-sm) var(--space-lg);
9390
9412
  border-radius: var(--radius-field);
@@ -1,17 +1,22 @@
1
1
  .zx-alert__root {
2
2
  --alert-tint: var(--color-info-soft);
3
3
  --alert-ink: var(--color-base-content);
4
+ --alert-pad-y: var(--space-md);
5
+ --alert-pad-x: var(--space-lg);
4
6
  }
5
7
 
6
8
  .zx-alert__root {
7
- display: grid;
9
+ display: flex;
8
10
  grid-template-columns: auto 1fr auto;
9
- align-items: center;
10
- gap: var(--space-sm) var(--space-md);
11
+ align-items: stretch;
12
+ gap: var(--space-sm);
11
13
  background: var(--alert-tint);
12
14
  color: var(--color-base-content);
13
15
  border-radius: var(--radius-box);
14
- padding: var(--space-md) var(--space-lg);
16
+ padding: var(--alert-pad-y) var(--alert-pad-x);
17
+ flex-direction: column;
18
+ position: relative;
19
+ box-sizing: border-box;
15
20
  }
16
21
 
17
22
  .zx-alert__icon {
@@ -21,6 +26,12 @@
21
26
  color: var(--alert-ink);
22
27
  font-size: var(--text-lg);
23
28
  line-height: var(--leading-none);
29
+ position: absolute;
30
+ left: var(--alert-pad-x);
31
+ top: 0;
32
+ bottom: 0;
33
+ width: var(--text-xl);
34
+ justify-content: center;
24
35
  }
25
36
 
26
37
  .zx-alert__title {
@@ -41,12 +52,22 @@
41
52
  appearance: none;
42
53
  border: none;
43
54
  background: transparent;
44
- color: inherit;
55
+ color: var(--color-base-content);
45
56
  border-radius: var(--radius-selector);
46
- padding: var(--space-2xs);
57
+ padding: 0;
47
58
  line-height: var(--leading-none);
48
59
  cursor: pointer;
49
60
  transition: background var(--duration-fast) var(--ease-standard);
61
+ position: absolute;
62
+ top: calc(var(--alert-pad-y) - var(--space-2xs));
63
+ right: calc(var(--alert-pad-x) - var(--space-2xs));
64
+ font-size: var(--text-md);
65
+ display: flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ box-sizing: border-box;
69
+ width: calc(var(--text-md) + var(--space-2xs) * 2);
70
+ height: calc(var(--text-md) + var(--space-2xs) * 2);
50
71
  }
51
72
 
52
73
  .zx-alert__close.zx-f-disabled {
@@ -55,8 +76,9 @@
55
76
  }
56
77
 
57
78
  .zx-alert__close.zx-f-focus-visible {
58
- outline: 2px solid var(--color-base-content);
79
+ outline: none;
59
80
  outline-offset: 2px;
81
+ box-shadow: 0 0 0 2px var(--alert-tint), 0 0 0 4px var(--color-base-content);
60
82
  }
61
83
 
62
84
  .zx-root .zx-alert__close.zx-f-pressed {
@@ -273,16 +295,36 @@
273
295
 
274
296
  .zx-alert__root.zx-a-size-xs {
275
297
  padding: var(--space-2xs) var(--space-sm);
298
+ --alert-pad-y: var(--space-2xs);
299
+ --alert-pad-x: var(--space-sm);
276
300
  }
277
301
 
278
302
  .zx-alert__root.zx-a-size-sm {
279
303
  padding: var(--space-xs) var(--space-md);
304
+ --alert-pad-y: var(--space-xs);
305
+ --alert-pad-x: var(--space-md);
280
306
  }
281
307
 
282
308
  .zx-alert__root.zx-a-size-lg {
283
309
  padding: var(--space-lg) var(--space-xl);
310
+ --alert-pad-y: var(--space-lg);
311
+ --alert-pad-x: var(--space-xl);
284
312
  }
285
313
 
286
314
  .zx-alert__root.zx-a-size-xl {
287
315
  padding: var(--space-xl) var(--space-2xl);
316
+ --alert-pad-y: var(--space-xl);
317
+ --alert-pad-x: var(--space-2xl);
318
+ }
319
+ .zx-alert__title.zx-m-with-icon {
320
+ margin-left: calc(var(--text-xl) + var(--space-md));
321
+ }
322
+ .zx-alert__description.zx-m-with-icon {
323
+ margin-left: calc(var(--text-xl) + var(--space-md));
324
+ }
325
+ .zx-alert__title.zx-m-with-close {
326
+ margin-right: calc(var(--text-md) + var(--space-md));
327
+ }
328
+ .zx-alert__description.zx-m-with-close {
329
+ margin-right: calc(var(--text-md) + var(--space-md));
288
330
  }
@@ -8,11 +8,13 @@
8
8
  align-items: center;
9
9
  vertical-align: middle;
10
10
  isolation: isolate;
11
+ flex-direction: row;
12
+ width: max-content;
11
13
  }
12
14
 
13
15
  .zx-avatar-group__overflow {
14
16
  position: relative;
15
- display: inline-grid;
17
+ display: flex;
16
18
  place-items: center;
17
19
  box-sizing: border-box;
18
20
  min-width: calc(var(--size-selector) * 10);
@@ -26,26 +28,36 @@
26
28
  font-variant-numeric: tabular-nums;
27
29
  white-space: nowrap;
28
30
  user-select: none;
31
+ align-items: center;
32
+ justify-content: center;
33
+ flex-shrink: 0;
34
+ padding-left: var(--space-2xs);
35
+ padding-right: var(--space-2xs);
36
+ margin-left: calc((var(--size-selector) * 10) * -0.25);
29
37
  }
30
38
 
31
39
  .zx-avatar-group__overflow.zx-a-size-xs {
32
40
  min-width: calc(var(--size-selector) * 6);
33
41
  height: calc(var(--size-selector) * 6);
42
+ margin-left: calc((var(--size-selector) * 6) * -0.25);
34
43
  }
35
44
 
36
45
  .zx-avatar-group__overflow.zx-a-size-sm {
37
46
  min-width: calc(var(--size-selector) * 8);
38
47
  height: calc(var(--size-selector) * 8);
48
+ margin-left: calc((var(--size-selector) * 8) * -0.25);
39
49
  }
40
50
 
41
51
  .zx-avatar-group__overflow.zx-a-size-lg {
42
52
  min-width: calc(var(--size-selector) * 12);
43
53
  height: calc(var(--size-selector) * 12);
54
+ margin-left: calc((var(--size-selector) * 12) * -0.25);
44
55
  }
45
56
 
46
57
  .zx-avatar-group__overflow.zx-a-size-xl {
47
58
  min-width: calc(var(--size-selector) * 16);
48
59
  height: calc(var(--size-selector) * 16);
60
+ margin-left: calc((var(--size-selector) * 16) * -0.25);
49
61
  }
50
62
 
51
63
  .zx-avatar-group__root.zx-a-color-primary {
@@ -5,7 +5,7 @@
5
5
 
6
6
  .zx-avatar__root {
7
7
  position: relative;
8
- display: inline-grid;
8
+ display: flex;
9
9
  width: calc(var(--size-selector) * 10);
10
10
  height: calc(var(--size-selector) * 10);
11
11
  border-radius: 9999px;
@@ -13,6 +13,10 @@
13
13
  vertical-align: middle;
14
14
  background: var(--color-base-200);
15
15
  box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--avatar-ring);
16
+ flex-direction: row;
17
+ align-items: center;
18
+ justify-content: center;
19
+ flex-shrink: 0;
16
20
  }
17
21
 
18
22
  .zx-avatar__root.zx-a-size-xs {
@@ -40,6 +44,10 @@
40
44
  width: 100%;
41
45
  height: 100%;
42
46
  object-fit: cover;
47
+ position: absolute;
48
+ top: 0;
49
+ left: 0;
50
+ border-radius: 9999px;
43
51
  }
44
52
 
45
53
  .zx-avatar__fallback {
@@ -52,20 +60,52 @@
52
60
  font-size: var(--avatar-text);
53
61
  font-weight: var(--weight-semibold);
54
62
  user-select: none;
63
+ position: absolute;
64
+ top: 0;
65
+ left: 0;
66
+ border-radius: 9999px;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ text-align: center;
55
71
  }
56
72
 
57
73
  .zx-avatar__root.zx-a-shape-circle {
58
74
  border-radius: 9999px;
59
75
  }
60
76
 
77
+ .zx-avatar__image.zx-a-shape-circle {
78
+ border-radius: 9999px;
79
+ }
80
+
81
+ .zx-avatar__fallback.zx-a-shape-circle {
82
+ border-radius: 9999px;
83
+ }
84
+
61
85
  .zx-avatar__root.zx-a-shape-square {
62
86
  border-radius: 0;
63
87
  }
64
88
 
89
+ .zx-avatar__image.zx-a-shape-square {
90
+ border-radius: 0;
91
+ }
92
+
93
+ .zx-avatar__fallback.zx-a-shape-square {
94
+ border-radius: 0;
95
+ }
96
+
65
97
  .zx-avatar__root.zx-a-shape-rounded {
66
98
  border-radius: var(--radius-selector);
67
99
  }
68
100
 
101
+ .zx-avatar__image.zx-a-shape-rounded {
102
+ border-radius: var(--radius-selector);
103
+ }
104
+
105
+ .zx-avatar__fallback.zx-a-shape-rounded {
106
+ border-radius: var(--radius-selector);
107
+ }
108
+
69
109
  .zx-avatar__root.zx-a-color-primary {
70
110
  --avatar-ring: var(--color-primary);
71
111
  }
@@ -113,3 +153,18 @@
113
153
  .zx-avatar__root.zx-a-size-xl {
114
154
  --avatar-text: var(--text-lg);
115
155
  }
156
+ .zx-avatar__root.zx-m-stacked {
157
+ margin-left: calc(var(--size-selector) * -2.5);
158
+ }
159
+ .zx-avatar__root.zx-m-stacked.zx-a-size-xs {
160
+ margin-left: calc(var(--size-selector) * -1.5);
161
+ }
162
+ .zx-avatar__root.zx-m-stacked.zx-a-size-sm {
163
+ margin-left: calc(var(--size-selector) * -2);
164
+ }
165
+ .zx-avatar__root.zx-m-stacked.zx-a-size-lg {
166
+ margin-left: calc(var(--size-selector) * -3);
167
+ }
168
+ .zx-avatar__root.zx-m-stacked.zx-a-size-xl {
169
+ margin-left: calc(var(--size-selector) * -4);
170
+ }