@sigx/zero-daisyui 0.13.0 → 0.14.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.
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
  }
@@ -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) {
@@ -5309,6 +5309,11 @@
5309
5309
  line-height: var(--leading-none);
5310
5310
  }
5311
5311
 
5312
+ [data-scope="combobox"][data-part="tag"][data-focus-visible] {
5313
+ outline: 2px solid var(--color-base-content);
5314
+ outline-offset: 2px;
5315
+ }
5316
+
5312
5317
  [data-scope="combobox"][data-part="tag-label"] {
5313
5318
  white-space: nowrap;
5314
5319
  }
@@ -7811,7 +7816,7 @@
7811
7816
 
7812
7817
  @layer zero.recipes {
7813
7818
  [data-scope="spinner"][data-part="root"] {
7814
- --spinner-size: calc(var(--size-field) * 0.5);
7819
+ --spinner-size: calc(var(--size-selector) * 6);
7815
7820
  --spinner-ink: var(--color-primary);
7816
7821
  --spinner-track: var(--color-base-300);
7817
7822
  }
@@ -7860,19 +7865,19 @@
7860
7865
  }
7861
7866
 
7862
7867
  [data-scope="spinner"][data-part="root"][data-size="xs"] {
7863
- --spinner-size: calc(var(--size-field) * 0.35);
7868
+ --spinner-size: calc(var(--size-selector) * 4);
7864
7869
  }
7865
7870
 
7866
7871
  [data-scope="spinner"][data-part="root"][data-size="sm"] {
7867
- --spinner-size: calc(var(--size-field) * 0.42);
7872
+ --spinner-size: calc(var(--size-selector) * 5);
7868
7873
  }
7869
7874
 
7870
7875
  [data-scope="spinner"][data-part="root"][data-size="lg"] {
7871
- --spinner-size: calc(var(--size-field) * 0.7);
7876
+ --spinner-size: calc(var(--size-selector) * 7);
7872
7877
  }
7873
7878
 
7874
7879
  [data-scope="spinner"][data-part="root"][data-size="xl"] {
7875
- --spinner-size: calc(var(--size-field) * 0.9);
7880
+ --spinner-size: calc(var(--size-selector) * 8);
7876
7881
  }
7877
7882
 
7878
7883
  @media (prefers-reduced-motion: reduce) {
@@ -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,16 @@
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
57
  padding: var(--space-2xs);
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);
50
65
  }
51
66
 
52
67
  .zx-alert__close.zx-f-disabled {
@@ -55,8 +70,9 @@
55
70
  }
56
71
 
57
72
  .zx-alert__close.zx-f-focus-visible {
58
- outline: 2px solid var(--color-base-content);
73
+ outline: none;
59
74
  outline-offset: 2px;
75
+ box-shadow: 0 0 0 2px var(--alert-tint), 0 0 0 4px var(--color-base-content);
60
76
  }
61
77
 
62
78
  .zx-root .zx-alert__close.zx-f-pressed {
@@ -273,16 +289,36 @@
273
289
 
274
290
  .zx-alert__root.zx-a-size-xs {
275
291
  padding: var(--space-2xs) var(--space-sm);
292
+ --alert-pad-y: var(--space-2xs);
293
+ --alert-pad-x: var(--space-sm);
276
294
  }
277
295
 
278
296
  .zx-alert__root.zx-a-size-sm {
279
297
  padding: var(--space-xs) var(--space-md);
298
+ --alert-pad-y: var(--space-xs);
299
+ --alert-pad-x: var(--space-md);
280
300
  }
281
301
 
282
302
  .zx-alert__root.zx-a-size-lg {
283
303
  padding: var(--space-lg) var(--space-xl);
304
+ --alert-pad-y: var(--space-lg);
305
+ --alert-pad-x: var(--space-xl);
284
306
  }
285
307
 
286
308
  .zx-alert__root.zx-a-size-xl {
287
309
  padding: var(--space-xl) var(--space-2xl);
310
+ --alert-pad-y: var(--space-xl);
311
+ --alert-pad-x: var(--space-2xl);
312
+ }
313
+ .zx-alert__title.zx-m-with-icon {
314
+ margin-left: calc(var(--text-xl) + var(--space-md));
315
+ }
316
+ .zx-alert__description.zx-m-with-icon {
317
+ margin-left: calc(var(--text-xl) + var(--space-md));
318
+ }
319
+ .zx-alert__title.zx-m-with-close {
320
+ margin-right: calc(var(--text-md) + var(--space-md));
321
+ }
322
+ .zx-alert__description.zx-m-with-close {
323
+ margin-right: calc(var(--text-md) + var(--space-md));
288
324
  }
@@ -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
+ }