elements-kit 0.20.0 → 0.21.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 (48) hide show
  1. package/dist/await.d.mts +1 -1
  2. package/dist/{custom-elements-DK5VUcWA.d.mts → custom-elements-BGcU6ldL.d.mts} +2 -0
  3. package/dist/custom-elements.d.mts +1 -1
  4. package/dist/for.d.mts +1 -1
  5. package/dist/integrations/react.d.mts +1 -1
  6. package/dist/jsx-runtime/index.d.mts +1 -1
  7. package/dist/signals/index.d.mts +1 -1
  8. package/dist/{types-ncUK9rki.d.mts → types-CUvFIgPa.d.mts} +7 -7
  9. package/dist/ui/badge/badge.css +5 -5
  10. package/dist/ui/button/button.css +15 -15
  11. package/dist/ui/card/card.css +2 -2
  12. package/dist/ui/group/group.css +61 -0
  13. package/dist/ui/otp-input/index.d.mts +132 -0
  14. package/dist/ui/otp-input/index.mjs +328 -0
  15. package/dist/ui/otp-input/otp-input.css +157 -0
  16. package/dist/ui/overlay/index.css +52 -4
  17. package/dist/ui/overlay/index.d.mts +237 -63
  18. package/dist/ui/overlay/index.mjs +658 -66
  19. package/dist/ui/overlay/overlay.css +58 -2
  20. package/dist/ui/styles/index.css +662 -0
  21. package/dist/ui/styles/radius.css +7 -7
  22. package/dist/utilities/active-element.d.mts +1 -1
  23. package/dist/utilities/async.d.mts +1 -1
  24. package/dist/utilities/debounced.d.mts +1 -1
  25. package/dist/utilities/dom-lifecycle.bench.mjs +2 -2
  26. package/dist/utilities/element-rect.d.mts +1 -1
  27. package/dist/utilities/element-scroll.d.mts +1 -1
  28. package/dist/utilities/event-driven.d.mts +1 -1
  29. package/dist/utilities/event-listener.d.mts +1 -1
  30. package/dist/utilities/focus-within.d.mts +1 -1
  31. package/dist/utilities/hover.d.mts +1 -1
  32. package/dist/utilities/interval.d.mts +1 -1
  33. package/dist/utilities/location.d.mts +1 -1
  34. package/dist/utilities/media-devices.d.mts +1 -1
  35. package/dist/utilities/media-player.d.mts +1 -1
  36. package/dist/utilities/media-query.d.mts +1 -1
  37. package/dist/utilities/network.d.mts +1 -1
  38. package/dist/utilities/orientation.d.mts +1 -1
  39. package/dist/utilities/previous.d.mts +1 -1
  40. package/dist/utilities/promise.d.mts +1 -1
  41. package/dist/utilities/routing.d.mts +1 -1
  42. package/dist/utilities/search-params.d.mts +1 -1
  43. package/dist/utilities/storage.d.mts +1 -1
  44. package/dist/utilities/throttled.d.mts +1 -1
  45. package/dist/utilities/timeout.d.mts +1 -1
  46. package/dist/utilities/window-focus.d.mts +1 -1
  47. package/dist/utilities/window-size.d.mts +1 -1
  48. package/package.json +8 -1
@@ -0,0 +1,662 @@
1
+ :root {
2
+ --black-a1: #0000000d;
3
+ --black-a2: #0000001a;
4
+ --black-a3: #00000026;
5
+ --black-a4: #0003;
6
+ --black-a5: #0000004d;
7
+ --black-a6: #0006;
8
+ --black-a7: #00000080;
9
+ --black-a8: #0009;
10
+ --black-a9: #000000b3;
11
+ --black-a10: #000c;
12
+ --black-a11: #000000e6;
13
+ --black-a12: #000000f2;
14
+ }
15
+
16
+ @supports (color: color(display-p3 1 1 1)) {
17
+ @media (color-gamut: p3) {
18
+ :root {
19
+ --black-a1: color(display-p3 0 0 0 / .05);
20
+ --black-a2: color(display-p3 0 0 0 / .1);
21
+ --black-a3: color(display-p3 0 0 0 / .15);
22
+ --black-a4: color(display-p3 0 0 0 / .2);
23
+ --black-a5: color(display-p3 0 0 0 / .3);
24
+ --black-a6: color(display-p3 0 0 0 / .4);
25
+ --black-a7: color(display-p3 0 0 0 / .5);
26
+ --black-a8: color(display-p3 0 0 0 / .6);
27
+ --black-a9: color(display-p3 0 0 0 / .7);
28
+ --black-a10: color(display-p3 0 0 0 / .8);
29
+ --black-a11: color(display-p3 0 0 0 / .9);
30
+ --black-a12: color(display-p3 0 0 0 / .95);
31
+ }
32
+ }
33
+ }
34
+
35
+ :root {
36
+ --white-a1: #ffffff0d;
37
+ --white-a2: #ffffff1a;
38
+ --white-a3: #ffffff26;
39
+ --white-a4: #fff3;
40
+ --white-a5: #ffffff4d;
41
+ --white-a6: #fff6;
42
+ --white-a7: #ffffff80;
43
+ --white-a8: #fff9;
44
+ --white-a9: #ffffffb3;
45
+ --white-a10: #fffc;
46
+ --white-a11: #ffffffe6;
47
+ --white-a12: #fffffff2;
48
+ }
49
+
50
+ @supports (color: color(display-p3 1 1 1)) {
51
+ @media (color-gamut: p3) {
52
+ :root {
53
+ --white-a1: color(display-p3 1 1 1 / .05);
54
+ --white-a2: color(display-p3 1 1 1 / .1);
55
+ --white-a3: color(display-p3 1 1 1 / .15);
56
+ --white-a4: color(display-p3 1 1 1 / .2);
57
+ --white-a5: color(display-p3 1 1 1 / .3);
58
+ --white-a6: color(display-p3 1 1 1 / .4);
59
+ --white-a7: color(display-p3 1 1 1 / .5);
60
+ --white-a8: color(display-p3 1 1 1 / .6);
61
+ --white-a9: color(display-p3 1 1 1 / .7);
62
+ --white-a10: color(display-p3 1 1 1 / .8);
63
+ --white-a11: color(display-p3 1 1 1 / .9);
64
+ --white-a12: color(display-p3 1 1 1 / .95);
65
+ }
66
+ }
67
+ }
68
+
69
+ :where(:root) {
70
+ --color-background: white;
71
+ --color-overlay: var(--black-a6);
72
+ --color-surface: #ffffffd9;
73
+ }
74
+
75
+ :is(.dark, .dark-theme) {
76
+ --color-background: var(--neutral-1);
77
+ --color-overlay: var(--black-a8);
78
+ --color-surface: #00000040;
79
+ }
80
+
81
+ :where(:root) {
82
+ --color-transparent: #0000;
83
+ }
84
+
85
+ @supports (color: color(display-p3 1 1 1)) {
86
+ @media (color-gamut: p3) {
87
+ :root {
88
+ --color-transparent: color(display-p3 0 0 0 / 0);
89
+ }
90
+ }
91
+ }
92
+
93
+ :where(.light, .light-theme) {
94
+ --lightningcss-light: initial;
95
+ --lightningcss-dark: ;
96
+ color-scheme: light;
97
+ }
98
+
99
+ :where(.dark, .dark-theme) {
100
+ --lightningcss-light: ;
101
+ --lightningcss-dark: initial;
102
+ color-scheme: dark;
103
+ }
104
+
105
+ :root, [data-accent]:where(:not([data-accent=""], [data-accent="gray"])) {
106
+ --focus-1: var(--accent-1);
107
+ --focus-2: var(--accent-2);
108
+ --focus-3: var(--accent-3);
109
+ --focus-4: var(--accent-4);
110
+ --focus-5: var(--accent-5);
111
+ --focus-6: var(--accent-6);
112
+ --focus-7: var(--accent-7);
113
+ --focus-8: var(--accent-8);
114
+ --focus-9: var(--accent-9);
115
+ --focus-10: var(--accent-10);
116
+ --focus-11: var(--accent-11);
117
+ --focus-12: var(--accent-12);
118
+ --focus-a1: var(--accent-a1);
119
+ --focus-a2: var(--accent-a2);
120
+ --focus-a3: var(--accent-a3);
121
+ --focus-a4: var(--accent-a4);
122
+ --focus-a5: var(--accent-a5);
123
+ --focus-a6: var(--accent-a6);
124
+ --focus-a7: var(--accent-a7);
125
+ --focus-a8: var(--accent-a8);
126
+ --focus-a9: var(--accent-a9);
127
+ --focus-a10: var(--accent-a10);
128
+ --focus-a11: var(--accent-a11);
129
+ --focus-a12: var(--accent-a12);
130
+ }
131
+
132
+ ::selection {
133
+ background-color: var(--focus-a5);
134
+ }
135
+
136
+ :root {
137
+ color: var(--neutral-12);
138
+ }
139
+
140
+ :where([data-surface="page"]) {
141
+ background-color: var(--color-background);
142
+ }
143
+
144
+ :where(:root) {
145
+ --scaling: 1;
146
+ }
147
+
148
+ :where([data-scaling="xs"]) {
149
+ --scaling: .9;
150
+ }
151
+
152
+ :where([data-scaling="sm"]) {
153
+ --scaling: .95;
154
+ }
155
+
156
+ :where([data-scaling="md"]) {
157
+ --scaling: 1;
158
+ }
159
+
160
+ :where([data-scaling="lg"]) {
161
+ --scaling: 1.05;
162
+ }
163
+
164
+ :where([data-scaling="xl"]) {
165
+ --scaling: 1.1;
166
+ }
167
+
168
+ :where(:root) {
169
+ --space-1: calc(4px * var(--scaling));
170
+ --space-2: calc(8px * var(--scaling));
171
+ --space-3: calc(12px * var(--scaling));
172
+ --space-4: calc(16px * var(--scaling));
173
+ --space-5: calc(24px * var(--scaling));
174
+ --space-6: calc(32px * var(--scaling));
175
+ --space-7: calc(40px * var(--scaling));
176
+ --space-8: calc(48px * var(--scaling));
177
+ --space-9: calc(64px * var(--scaling));
178
+ }
179
+
180
+ :where(:root), [data-radius] {
181
+ --radius-1: calc(3px * var(--scaling) * var(--radius-factor));
182
+ --radius-2: calc(4px * var(--scaling) * var(--radius-factor));
183
+ --radius-3: calc(6px * var(--scaling) * var(--radius-factor));
184
+ --radius-4: calc(8px * var(--scaling) * var(--radius-factor));
185
+ --radius-5: calc(12px * var(--scaling) * var(--radius-factor));
186
+ --radius-6: calc(16px * var(--scaling) * var(--radius-factor));
187
+ }
188
+
189
+ :where(:root), [data-radius="medium"] {
190
+ --radius-factor: 1;
191
+ --radius-pill: 0px;
192
+ --radius-thumb: 9999px;
193
+ }
194
+
195
+ [data-radius="none"] {
196
+ --radius-factor: 0;
197
+ --radius-pill: 0px;
198
+ --radius-thumb: .5px;
199
+ }
200
+
201
+ [data-radius="small"] {
202
+ --radius-factor: .75;
203
+ --radius-pill: 0px;
204
+ --radius-thumb: .5px;
205
+ }
206
+
207
+ [data-radius="large"] {
208
+ --radius-factor: 1.5;
209
+ --radius-pill: 0px;
210
+ --radius-thumb: 9999px;
211
+ }
212
+
213
+ [data-radius="pill"] {
214
+ --radius-factor: 1.5;
215
+ --radius-pill: 9999px;
216
+ --radius-thumb: 9999px;
217
+ }
218
+
219
+ :where(:root) {
220
+ --font-size-1: calc(12px * var(--scaling));
221
+ --font-size-2: calc(14px * var(--scaling));
222
+ --font-size-3: calc(16px * var(--scaling));
223
+ --font-size-4: calc(18px * var(--scaling));
224
+ --font-size-5: calc(20px * var(--scaling));
225
+ --font-size-6: calc(24px * var(--scaling));
226
+ --font-size-7: calc(28px * var(--scaling));
227
+ --font-size-8: calc(35px * var(--scaling));
228
+ --font-size-9: calc(60px * var(--scaling));
229
+ --font-weight-light: 300;
230
+ --font-weight-regular: 400;
231
+ --font-weight-medium: 500;
232
+ --font-weight-bold: 700;
233
+ --line-height-1: calc(16px * var(--scaling));
234
+ --line-height-2: calc(20px * var(--scaling));
235
+ --line-height-3: calc(24px * var(--scaling));
236
+ --line-height-4: calc(26px * var(--scaling));
237
+ --line-height-5: calc(28px * var(--scaling));
238
+ --line-height-6: calc(30px * var(--scaling));
239
+ --line-height-7: calc(36px * var(--scaling));
240
+ --line-height-8: calc(40px * var(--scaling));
241
+ --line-height-9: calc(60px * var(--scaling));
242
+ --letter-spacing-1: .0025em;
243
+ --letter-spacing-2: 0em;
244
+ --letter-spacing-3: 0em;
245
+ --letter-spacing-4: -.0025em;
246
+ --letter-spacing-5: -.005em;
247
+ --letter-spacing-6: -.00625em;
248
+ --letter-spacing-7: -.0075em;
249
+ --letter-spacing-8: -.01em;
250
+ --letter-spacing-9: -.025em;
251
+ --default-font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", system-ui,
252
+ sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
253
+ --default-font-size: var(--font-size-3);
254
+ --default-font-style: normal;
255
+ --default-font-weight: var(--font-weight-regular);
256
+ --default-line-height: 1.5;
257
+ --default-letter-spacing: 0em;
258
+ --default-leading-trim-start: .42em;
259
+ --default-leading-trim-end: .36em;
260
+ --heading-font-family: var(--default-font-family);
261
+ --heading-font-size-adjust: 1;
262
+ --heading-font-style: normal;
263
+ --heading-leading-trim-start: var(--default-leading-trim-start);
264
+ --heading-leading-trim-end: var(--default-leading-trim-end);
265
+ --heading-letter-spacing: 0em;
266
+ --heading-line-height-1: calc(16px * var(--scaling));
267
+ --heading-line-height-2: calc(18px * var(--scaling));
268
+ --heading-line-height-3: calc(22px * var(--scaling));
269
+ --heading-line-height-4: calc(24px * var(--scaling));
270
+ --heading-line-height-5: calc(26px * var(--scaling));
271
+ --heading-line-height-6: calc(30px * var(--scaling));
272
+ --heading-line-height-7: calc(36px * var(--scaling));
273
+ --heading-line-height-8: calc(40px * var(--scaling));
274
+ --heading-line-height-9: calc(60px * var(--scaling));
275
+ --code-font-family: "Menlo", "Bitstream Vera Sans Mono", monospace, "Apple Color Emoji",
276
+ "Segoe UI Emoji";
277
+ --code-font-size-adjust: .95;
278
+ --code-font-style: normal;
279
+ --code-font-weight: inherit;
280
+ --code-letter-spacing: -.007em;
281
+ --code-padding-top: .1em;
282
+ --code-padding-bottom: .1em;
283
+ --code-padding-left: .25em;
284
+ --code-padding-right: .25em;
285
+ --strong-font-family: var(--default-font-family);
286
+ --strong-font-size-adjust: 1;
287
+ --strong-font-style: inherit;
288
+ --strong-font-weight: var(--font-weight-bold);
289
+ --strong-letter-spacing: 0em;
290
+ --em-font-family: "Times New Roman", "Times", serif;
291
+ --em-font-size-adjust: 1.18;
292
+ --em-font-style: italic;
293
+ --em-font-weight: inherit;
294
+ --em-letter-spacing: -.025em;
295
+ --quote-font-family: "Times New Roman", "Times", serif;
296
+ --quote-font-size-adjust: 1.18;
297
+ --quote-font-style: italic;
298
+ --quote-font-weight: inherit;
299
+ --quote-letter-spacing: -.025em;
300
+ --tab-active-letter-spacing: -.01em;
301
+ --tab-active-word-spacing: 0em;
302
+ --tab-inactive-letter-spacing: 0em;
303
+ --tab-inactive-word-spacing: 0em;
304
+ overflow-wrap: break-word;
305
+ font-family: var(--default-font-family);
306
+ font-size: var(--default-font-size);
307
+ font-weight: var(--default-font-weight);
308
+ font-style: var(--default-font-style);
309
+ line-height: var(--default-line-height);
310
+ letter-spacing: var(--default-letter-spacing);
311
+ -moz-text-size-adjust: none;
312
+ text-size-adjust: none;
313
+ -webkit-font-smoothing: antialiased;
314
+ -moz-osx-font-smoothing: grayscale;
315
+ --shadow-1: inset 0 0 0 1px var(--neutral-a5),
316
+ inset 0 1.5px 2px 0 var(--neutral-a2),
317
+ inset 0 1.5px 2px 0 var(--black-a2);
318
+ --shadow-2: 0 0 0 1px var(--neutral-a3),
319
+ 0 0 0 .5px var(--black-a1),
320
+ 0 1px 1px 0 var(--neutral-a2),
321
+ 0 2px 1px -1px var(--black-a1),
322
+ 0 1px 3px 0 var(--black-a1);
323
+ --shadow-3: 0 0 0 1px var(--neutral-a3),
324
+ 0 2px 3px -2px var(--neutral-a3),
325
+ 0 3px 12px -4px var(--black-a2),
326
+ 0 4px 16px -8px var(--black-a2);
327
+ --shadow-4: 0 0 0 1px var(--neutral-a3),
328
+ 0 8px 40px var(--black-a1),
329
+ 0 12px 32px -16px var(--neutral-a3);
330
+ --shadow-5: 0 0 0 1px var(--neutral-a3),
331
+ 0 12px 60px var(--black-a3),
332
+ 0 12px 32px -16px var(--neutral-a5);
333
+ --shadow-6: 0 0 0 1px var(--neutral-a3),
334
+ 0 12px 60px var(--black-a3),
335
+ 0 16px 64px var(--neutral-a2),
336
+ 0 16px 36px -20px var(--neutral-a7);
337
+ }
338
+
339
+ @supports (color: color-mix(in oklab, white, black)) {
340
+ :where(:root) {
341
+ --shadow-1: inset 0 0 0 1px var(--neutral-a5),
342
+ inset 0 1.5px 2px 0 var(--neutral-a2),
343
+ inset 0 1.5px 2px 0 var(--black-a2);
344
+ --shadow-2: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
345
+ 0 0 0 .5px var(--black-a1),
346
+ 0 1px 1px 0 var(--neutral-a2),
347
+ 0 2px 1px -1px var(--black-a1),
348
+ 0 1px 3px 0 var(--black-a1);
349
+ --shadow-3: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
350
+ 0 2px 3px -2px var(--neutral-a3),
351
+ 0 3px 12px -4px var(--black-a2),
352
+ 0 4px 16px -8px var(--black-a2);
353
+ --shadow-4: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
354
+ 0 8px 40px var(--black-a1),
355
+ 0 12px 32px -16px var(--neutral-a3);
356
+ --shadow-5: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
357
+ 0 12px 60px var(--black-a3),
358
+ 0 12px 32px -16px var(--neutral-a5);
359
+ --shadow-6: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
360
+ 0 12px 60px var(--black-a3),
361
+ 0 16px 64px var(--neutral-a2),
362
+ 0 16px 36px -20px var(--neutral-a7);
363
+ }
364
+ }
365
+
366
+ :is(.dark, .dark-theme) {
367
+ --shadow-1: inset 0 -1px 1px 0 var(--neutral-a3),
368
+ inset 0 0 0 1px var(--neutral-a3),
369
+ inset 0 3px 4px 0 var(--black-a5),
370
+ inset 0 0 0 1px var(--neutral-a4);
371
+ --shadow-2: 0 0 0 1px var(--neutral-a6),
372
+ 0 0 0 .5px var(--black-a3),
373
+ 0 1px 1px 0 var(--black-a6),
374
+ 0 2px 1px -1px var(--black-a6),
375
+ 0 1px 3px 0 var(--black-a5);
376
+ --shadow-3: 0 0 0 1px var(--neutral-a6),
377
+ 0 2px 3px -2px var(--black-a3),
378
+ 0 3px 8px -2px var(--black-a6),
379
+ 0 4px 12px -4px var(--black-a7);
380
+ --shadow-4: 0 0 0 1px var(--neutral-a6),
381
+ 0 8px 40px var(--black-a3),
382
+ 0 12px 32px -16px var(--black-a5);
383
+ --shadow-5: 0 0 0 1px var(--neutral-a6),
384
+ 0 12px 60px var(--black-a5),
385
+ 0 12px 32px -16px var(--black-a7);
386
+ --shadow-6: 0 0 0 1px var(--neutral-a6),
387
+ 0 12px 60px var(--black-a4),
388
+ 0 16px 64px var(--black-a6),
389
+ 0 16px 36px -20px var(--black-a11);
390
+ }
391
+
392
+ @supports (color: color-mix(in oklab, white, black)) {
393
+ :is(.dark, .dark-theme) {
394
+ --shadow-1: inset 0 -1px 1px 0 var(--neutral-a3),
395
+ inset 0 0 0 1px var(--neutral-a3),
396
+ inset 0 3px 4px 0 var(--black-a5),
397
+ inset 0 0 0 1px var(--neutral-a4);
398
+ --shadow-2: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
399
+ 0 0 0 .5px var(--black-a3),
400
+ 0 1px 1px 0 var(--black-a6),
401
+ 0 2px 1px -1px var(--black-a6),
402
+ 0 1px 3px 0 var(--black-a5);
403
+ --shadow-3: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
404
+ 0 2px 3px -2px var(--black-a3),
405
+ 0 3px 8px -2px var(--black-a6),
406
+ 0 4px 12px -4px var(--black-a7);
407
+ --shadow-4: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
408
+ 0 8px 40px var(--black-a3),
409
+ 0 12px 32px -16px var(--black-a5);
410
+ --shadow-5: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
411
+ 0 12px 60px var(--black-a5),
412
+ 0 12px 32px -16px var(--black-a7);
413
+ --shadow-6: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
414
+ 0 12px 60px var(--black-a4),
415
+ 0 16px 64px var(--black-a6),
416
+ 0 16px 36px -20px var(--black-a11);
417
+ }
418
+ }
419
+
420
+ :where(:root) {
421
+ --color-material-solid: white;
422
+ --color-material-translucent: #ffffffb3;
423
+ }
424
+
425
+ :is(.dark, .dark-theme) {
426
+ --color-material-solid: var(--neutral-2);
427
+ --color-material-translucent: var(--black-a7);
428
+ }
429
+
430
+ :where([data-material-background="solid"]) {
431
+ --color-material: var(--color-material-solid);
432
+ --backdrop-filter-material: none;
433
+ }
434
+
435
+ :where([data-material-background="translucent"]) {
436
+ --color-material: var(--color-material-translucent);
437
+ --backdrop-filter-material: blur(64px);
438
+ }
439
+
440
+ :where(:root) {
441
+ --cursor-button: default;
442
+ --cursor-checkbox: default;
443
+ --cursor-disabled: not-allowed;
444
+ --cursor-link: pointer;
445
+ --cursor-menu-item: default;
446
+ --cursor-radio: default;
447
+ --cursor-slider-thumb: default;
448
+ --cursor-slider-thumb-active: default;
449
+ --cursor-switch: default;
450
+ }
451
+
452
+ .unset:where(body, blockquote, dl, dd, figure, p) {
453
+ margin: 0;
454
+ }
455
+
456
+ .unset:where(address, b, cite, code, dfn, em, i, kbd, q, samp, small, strong, var) {
457
+ font: unset;
458
+ }
459
+
460
+ .unset:where(h1, h2, h3, h4, h5, h6) {
461
+ font: unset;
462
+ margin: 0;
463
+ }
464
+
465
+ .unset:where(a) {
466
+ all: unset;
467
+ -webkit-tap-highlight-color: transparent;
468
+ }
469
+
470
+ .unset:where(button, select, [type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"]) {
471
+ all: unset;
472
+ text-indent: initial;
473
+ -webkit-tap-highlight-color: transparent;
474
+ font-style: normal;
475
+ font-weight: normal;
476
+ display: inline-block;
477
+ }
478
+
479
+ .unset:where(label) {
480
+ -webkit-tap-highlight-color: transparent;
481
+ }
482
+
483
+ .unset:where(dialog, [popover]) {
484
+ box-sizing: border-box;
485
+ background: none;
486
+ border: 0;
487
+ outline: none;
488
+ max-width: none;
489
+ max-height: none;
490
+ margin: 0;
491
+ padding: 0;
492
+ position: fixed;
493
+ inset: auto;
494
+ overflow: visible;
495
+ }
496
+
497
+ .unset:where(select) {
498
+ text-align: start;
499
+ font-style: normal;
500
+ font-weight: normal;
501
+ }
502
+
503
+ .unset:where(textarea, input:not([type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"])) {
504
+ all: unset;
505
+ text-align: start;
506
+ width: -webkit-fill-available;
507
+ width: -moz-available;
508
+ width: stretch;
509
+ text-indent: initial;
510
+ -webkit-tap-highlight-color: transparent;
511
+ cursor: text;
512
+ white-space: pre-wrap;
513
+ font-style: normal;
514
+ font-weight: normal;
515
+ display: block;
516
+ }
517
+
518
+ .unset:where(:focus) {
519
+ outline: none;
520
+ }
521
+
522
+ .unset::placeholder {
523
+ color: unset;
524
+ opacity: unset;
525
+ -webkit-user-select: none;
526
+ user-select: none;
527
+ }
528
+
529
+ .unset:where(table) {
530
+ all: unset;
531
+ text-indent: initial;
532
+ display: table;
533
+ }
534
+
535
+ .unset:where(caption) {
536
+ text-align: inherit;
537
+ }
538
+
539
+ .unset:where(td) {
540
+ padding: 0;
541
+ }
542
+
543
+ .unset:where(th) {
544
+ font-weight: unset;
545
+ text-align: inherit;
546
+ padding: 0;
547
+ }
548
+
549
+ .unset:where(abbr, acronym) {
550
+ text-decoration: none;
551
+ }
552
+
553
+ .unset:where(canvas, object, picture, summary) {
554
+ display: block;
555
+ }
556
+
557
+ .unset:where(del, s) {
558
+ -webkit-text-decoration: unset;
559
+ text-decoration: unset;
560
+ }
561
+
562
+ .unset:where(fieldset, hr) {
563
+ all: unset;
564
+ display: block;
565
+ }
566
+
567
+ .unset:where(legend) {
568
+ cursor: default;
569
+ border: none;
570
+ padding: 0;
571
+ }
572
+
573
+ .unset:where(li) {
574
+ text-align: unset;
575
+ display: block;
576
+ }
577
+
578
+ .unset:where(ol, ul) {
579
+ margin: 0;
580
+ padding: 0;
581
+ list-style: none;
582
+ }
583
+
584
+ .unset:where(iframe) {
585
+ width: -webkit-fill-available;
586
+ width: -moz-available;
587
+ border: none;
588
+ width: stretch;
589
+ display: block;
590
+ }
591
+
592
+ .unset:where(ins, u) {
593
+ text-decoration: none;
594
+ }
595
+
596
+ .unset:where(img) {
597
+ max-width: 100%;
598
+ display: block;
599
+ }
600
+
601
+ .unset:where(svg) {
602
+ flex-shrink: 0;
603
+ max-width: 100%;
604
+ display: block;
605
+ }
606
+
607
+ .unset:where(mark) {
608
+ all: unset;
609
+ }
610
+
611
+ .unset:where(pre) {
612
+ font: unset;
613
+ margin: unset;
614
+ }
615
+
616
+ .unset:where(q):before, .unset:where(q):after {
617
+ content: "";
618
+ }
619
+
620
+ .unset:where(sub, sup) {
621
+ font: unset;
622
+ vertical-align: unset;
623
+ }
624
+
625
+ .unset:where(details) ::marker {
626
+ content: none;
627
+ }
628
+
629
+ .unset:where(summary)::marker {
630
+ content: none;
631
+ }
632
+
633
+ .unset:where(video) {
634
+ width: -webkit-fill-available;
635
+ width: -moz-available;
636
+ width: stretch;
637
+ display: block;
638
+ }
639
+
640
+ .unset:where(:any-link) {
641
+ cursor: var(--cursor-link);
642
+ }
643
+
644
+ .unset:where(button) {
645
+ cursor: var(--cursor-button);
646
+ }
647
+
648
+ .unset:where(:disabled, [data-disabled]) {
649
+ cursor: var(--cursor-disabled);
650
+ }
651
+
652
+ .unset:where(input[type="checkbox"]) {
653
+ cursor: var(--cursor-checkbox);
654
+ }
655
+
656
+ .unset:where(input[type="radio"]) {
657
+ cursor: var(--cursor-radio);
658
+ }
659
+
660
+ .unset, .unset:before, .unset:after {
661
+ box-sizing: border-box;
662
+ }
@@ -1,4 +1,4 @@
1
- [data-radius] {
1
+ :where(:root), [data-radius] {
2
2
  --radius-1: calc(3px * var(--scaling) * var(--radius-factor));
3
3
  --radius-2: calc(4px * var(--scaling) * var(--radius-factor));
4
4
  --radius-3: calc(6px * var(--scaling) * var(--radius-factor));
@@ -7,6 +7,12 @@
7
7
  --radius-6: calc(16px * var(--scaling) * var(--radius-factor));
8
8
  }
9
9
 
10
+ :where(:root), [data-radius="medium"] {
11
+ --radius-factor: 1;
12
+ --radius-pill: 0px;
13
+ --radius-thumb: 9999px;
14
+ }
15
+
10
16
  [data-radius="none"] {
11
17
  --radius-factor: 0;
12
18
  --radius-pill: 0px;
@@ -19,12 +25,6 @@
19
25
  --radius-thumb: .5px;
20
26
  }
21
27
 
22
- [data-radius="medium"] {
23
- --radius-factor: 1;
24
- --radius-pill: 0px;
25
- --radius-thumb: 9999px;
26
- }
27
-
28
28
  [data-radius="large"] {
29
29
  --radius-factor: 1.5;
30
30
  --radius-pill: 0px;
@@ -1,4 +1,4 @@
1
- import { y as Computed } from "../types-ncUK9rki.mjs";
1
+ import { y as Computed } from "../types-CUvFIgPa.mjs";
2
2
 
3
3
  //#region src/utilities/active-element.d.ts
4
4
  declare const activeElement: Computed<Element | null>;
@@ -1,4 +1,4 @@
1
- import { D as CLAIM, b as MaybeReactive, j as SEED } from "../types-ncUK9rki.mjs";
1
+ import { D as CLAIM, b as MaybeReactive, j as SEED } from "../types-CUvFIgPa.mjs";
2
2
  import { ComputedPromise } from "./promise.mjs";
3
3
 
4
4
  //#region src/utilities/async.d.ts
@@ -1,4 +1,4 @@
1
- import { y as Computed } from "../types-ncUK9rki.mjs";
1
+ import { y as Computed } from "../types-CUvFIgPa.mjs";
2
2
 
3
3
  //#region src/utilities/debounced.d.ts
4
4
  /**