opui-css 5.0.1 → 5.1.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 (58) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/MIGRATING.md +11 -0
  3. package/README.md +1 -1
  4. package/components/Accordion/Accordion.astro +12 -2
  5. package/components/Anchor/Anchor.astro +5 -1
  6. package/components/ButtonGroup/ButtonGroup.astro +8 -1
  7. package/components/Card/Card.astro +3 -1
  8. package/components/Checkbox/Checkbox.astro +3 -3
  9. package/components/ClassicSelect/ClassicSelect.astro +3 -3
  10. package/components/Dialog/Dialog.astro +3 -1
  11. package/components/Radio/Radio.astro +3 -3
  12. package/components/Select/Select.astro +3 -3
  13. package/components/Switch/Switch.astro +3 -3
  14. package/components/TextField/TextField.astro +3 -3
  15. package/components/Textarea/Textarea.astro +3 -3
  16. package/core/normalize.css +16 -10
  17. package/core/palette.css +105 -54
  18. package/core/utils.css +2 -2
  19. package/css/components/accordion.css +7 -7
  20. package/css/components/anchor.css +23 -23
  21. package/css/components/badge.css +4 -4
  22. package/css/components/button-group.css +28 -14
  23. package/css/components/button.css +29 -17
  24. package/css/components/callout.css +95 -92
  25. package/css/components/card.css +6 -8
  26. package/css/components/checkbox.css +209 -203
  27. package/css/components/chip.css +11 -6
  28. package/css/components/description-list.css +2 -1
  29. package/css/components/dialog.css +2 -1
  30. package/css/components/drawer.css +167 -167
  31. package/css/components/form.css +8 -7
  32. package/css/components/icon-button.css +32 -13
  33. package/css/components/list.css +10 -12
  34. package/css/components/progress.css +4 -3
  35. package/css/components/radio.css +168 -170
  36. package/css/components/range.css +14 -9
  37. package/css/components/select.css +9 -6
  38. package/css/components/spinner.css +4 -3
  39. package/css/components/switch.css +8 -5
  40. package/css/components/table.css +4 -10
  41. package/css/components/tabs.css +17 -16
  42. package/css/components/text-field.css +9 -10
  43. package/css/components/text-input.css +8 -4
  44. package/css/components/textarea.css +3 -1
  45. package/css/components/toast.css +156 -157
  46. package/css/components/toggle-button.css +76 -72
  47. package/css/components/tooltip.css +59 -56
  48. package/css/components/typography.css +31 -31
  49. package/css/imports.css +5 -4
  50. package/css/theme.css +4 -3
  51. package/dist/op.css +0 -62
  52. package/dist/op.css.map +1 -1
  53. package/dist/opui.components.css +1259 -1184
  54. package/dist/opui.components.css.map +1 -1
  55. package/dist/opui.css +1555 -1425
  56. package/dist/opui.css.map +1 -1
  57. package/open-props.css +0 -1
  58. package/package.json +1 -1
package/dist/opui.components.css CHANGED
@@ -15,15 +15,23 @@
15
15
  --_accent-tonal: var(--_color-tonal);
16
16
  --_accent-tonal-contrast: var(--_color);
17
17
 
18
- --_default-hover-bg-color: light-dark(oklch(from var(--_accent) l 0.01 h / 10%),
19
- oklch(from var(--_accent) l 0.01 h / 20%));
20
- --_default-active-bg-color: light-dark(oklch(from var(--_accent) l 0.06 h / 20%),
21
- oklch(from var(--_accent) l 0.06 h / 30%));
22
-
23
- --_filled-hover-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.2) c h),
24
- oklch(from var(--_accent) calc(l - 0.1) c h));
25
- --_filled-active-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.3) c h),
26
- oklch(from var(--_accent) calc(l - 0.15) c h));
18
+ --_default-hover-bg-color: light-dark(
19
+ oklch(from var(--_accent) l 0.01 h / 10%),
20
+ oklch(from var(--_accent) l 0.01 h / 20%)
21
+ );
22
+ --_default-active-bg-color: light-dark(
23
+ oklch(from var(--_accent) l 0.06 h / 20%),
24
+ oklch(from var(--_accent) l 0.06 h / 30%)
25
+ );
26
+
27
+ --_filled-hover-bg-color: light-dark(
28
+ oklch(from var(--_accent) calc(l + 0.2) c h),
29
+ oklch(from var(--_accent) calc(l - 0.1) c h)
30
+ );
31
+ --_filled-active-bg-color: light-dark(
32
+ oklch(from var(--_accent) calc(l + 0.3) c h),
33
+ oklch(from var(--_accent) calc(l - 0.15) c h)
34
+ );
27
35
  --_outlined-active-bg-color: var(--_filled-active-bg-color);
28
36
 
29
37
  --_bg-color: transparent;
@@ -51,8 +59,11 @@
51
59
  padding-inline: 1.5ex;
52
60
  text-align: center;
53
61
  text-decoration: none;
54
- transition: background-color .1s ease, color .1s ease,
55
- border-color .1s ease, box-shadow .1s ease;
62
+ transition:
63
+ background-color 0.1s ease,
64
+ color 0.1s ease,
65
+ border-color 0.1s ease,
66
+ box-shadow 0.1s ease;
56
67
  user-select: none;
57
68
 
58
69
  /* Colors — shared interaction model for critical and primary.
@@ -85,9 +96,11 @@
85
96
 
86
97
  /* Disabled */
87
98
  &:where([disabled]) {
88
- --_text-color: color-mix(in oklch,
89
- var(--text-muted) 50%,
90
- var(--surface-default));
99
+ --_text-color: color-mix(
100
+ in oklch,
101
+ var(--text-muted) 50%,
102
+ var(--surface-default)
103
+ );
91
104
 
92
105
  cursor: not-allowed;
93
106
  opacity: 0.64;
@@ -105,7 +118,6 @@
105
118
  }
106
119
  }
107
120
 
108
-
109
121
  /* Icons / Keyboard */
110
122
  &:where(:has(svg), &.ui-icon-only) {
111
123
  gap: 1ex;
@@ -132,14 +144,14 @@
132
144
  --_min-height: var(--button-size-x-small);
133
145
  --_font-size: var(--font-size-0);
134
146
  padding-block: 0;
135
- padding-inline: .5ex;
147
+ padding-inline: 0.5ex;
136
148
  }
137
149
 
138
150
  &.ui-small {
139
151
  --_min-height: var(--button-size-small);
140
152
  --_font-size: var(--font-size-05);
141
153
  padding-block: 0;
142
- padding-inline: .75ex;
154
+ padding-inline: 0.75ex;
143
155
  }
144
156
 
145
157
  &.ui-large {
@@ -221,113 +233,116 @@
221
233
  }
222
234
 
223
235
  @layer components.root {
224
- :where(.ui-callout) {
225
- --_bg-color: var(--surface-tonal);
226
- --_border-color: var(--surface-tonal);
227
- --_color: var(--text-primary);
228
- --_icon-color: currentColor;
229
- --_link-hover-color: var(--primary);
230
- --_padding: var(--size-3);
231
- --_border-radius: var(--border-radius);
232
- --_gap: var(--size-3);
233
- --_content-gap: var(--size-2);
234
- --_font-size: var(--font-size-05);
235
- --_title-font-size: var(--font-size-1);
236
- --_icon-size: var(--size-4);
237
- --_surface-bg: var(--surface-default);
238
-
239
- --_outlined-bg-color: var(--surface-default);
240
- --_outlined-border-color: var(--border-color);
241
- --_outlined-color: var(--text-primary);
242
- --_outlined-icon-color: currentColor;
243
-
244
- background-color: var(--_bg-color, var(--_surface-bg));
245
- border: 1px solid var(--_border-color, var(--border-color));
246
- border-radius: var(--_border-radius);
247
- color: var(--_color);
248
- isolation: isolate;
249
- padding: var(--_padding);
250
- position: relative;
251
-
252
- &.ui-critical,
253
- &.ui-info,
254
- &.ui-neutral,
255
- &.ui-success,
256
- &.ui-warning {
257
- --_bg-color: light-dark(oklch(from var(--color-2) l c h / 20%), oklch(from var(--color-6) l c h / 5%));
258
- --_border-color: light-dark(var(--color-5), var(--color-11));
259
- --_color: light-dark(var(--color-16), var(--color-1));
260
- --_icon-color: var(--color-9);
261
-
262
- --_outlined-bg-color: var(--surface-default);
263
- --_outlined-border-color: var(--color-9);
264
- --_outlined-color: light-dark(var(--color-15), var(--color-1));
265
- --_outlined-icon-color: var(--color-9);
266
- }
267
-
268
- &.ui-outlined {
269
- --_bg-color: var(--_outlined-bg-color);
270
- --_border-color: var(--_outlined-border-color);
271
- --_color: var(--_outlined-color);
272
- --_icon-color: var(--_outlined-icon-color);
273
- }
274
-
275
- &::before {
276
- background-color: var(--_bg-color);
277
- border-radius: inherit;
278
- content: "";
279
- inset: 0;
280
- pointer-events: none;
281
- position: absolute;
282
- z-index: -1;
283
- }
284
-
285
- &>.ui-content {
286
- display: grid;
287
- font-size: var(--_font-size);
288
- gap: var(--_content-gap);
289
-
290
- h1,
291
- h2,
292
- h3,
293
- h4,
294
- h5,
295
- h6 {
296
- color: inherit;
297
- font-size: var(--_title-font-size);
298
- font-weight: 600;
299
-
300
- * {
301
- font-size: inherit;
302
- }
303
- }
304
- }
305
-
306
- /* Links
236
+ :where(.ui-callout) {
237
+ --_bg-color: var(--surface-tonal);
238
+ --_border-color: var(--surface-tonal);
239
+ --_color: var(--text-primary);
240
+ --_icon-color: currentColor;
241
+ --_link-hover-color: var(--primary);
242
+ --_padding: var(--size-3);
243
+ --_border-radius: var(--border-radius);
244
+ --_gap: var(--size-3);
245
+ --_content-gap: var(--size-2);
246
+ --_font-size: var(--font-size-05);
247
+ --_title-font-size: var(--font-size-1);
248
+ --_icon-size: var(--size-4);
249
+ --_surface-bg: var(--surface-default);
250
+
251
+ --_outlined-bg-color: var(--surface-default);
252
+ --_outlined-border-color: var(--border-color);
253
+ --_outlined-color: var(--text-primary);
254
+ --_outlined-icon-color: currentColor;
255
+
256
+ background-color: var(--_bg-color, var(--_surface-bg));
257
+ border: 1px solid var(--_border-color, var(--border-color));
258
+ border-radius: var(--_border-radius);
259
+ color: var(--_color);
260
+ isolation: isolate;
261
+ padding: var(--_padding);
262
+ position: relative;
263
+
264
+ &.ui-critical,
265
+ &.ui-info,
266
+ &.ui-neutral,
267
+ &.ui-success,
268
+ &.ui-warning {
269
+ --_bg-color: light-dark(
270
+ oklch(from var(--color-2) l c h / 20%),
271
+ oklch(from var(--color-6) l c h / 5%)
272
+ );
273
+ --_border-color: light-dark(var(--color-5), var(--color-11));
274
+ --_color: light-dark(var(--color-16), var(--color-1));
275
+ --_icon-color: var(--color-9);
276
+
277
+ --_outlined-bg-color: var(--surface-default);
278
+ --_outlined-border-color: var(--color-9);
279
+ --_outlined-color: light-dark(var(--color-15), var(--color-1));
280
+ --_outlined-icon-color: var(--color-9);
281
+ }
282
+
283
+ &.ui-outlined {
284
+ --_bg-color: var(--_outlined-bg-color);
285
+ --_border-color: var(--_outlined-border-color);
286
+ --_color: var(--_outlined-color);
287
+ --_icon-color: var(--_outlined-icon-color);
288
+ }
289
+
290
+ &::before {
291
+ background-color: var(--_bg-color);
292
+ border-radius: inherit;
293
+ content: "";
294
+ inset: 0;
295
+ pointer-events: none;
296
+ position: absolute;
297
+ z-index: -1;
298
+ }
299
+
300
+ & > .ui-content {
301
+ display: grid;
302
+ font-size: var(--_font-size);
303
+ gap: var(--_content-gap);
304
+
305
+ h1,
306
+ h2,
307
+ h3,
308
+ h4,
309
+ h5,
310
+ h6 {
311
+ color: inherit;
312
+ font-size: var(--_title-font-size);
313
+ font-weight: 600;
314
+
315
+ * {
316
+ font-size: inherit;
317
+ }
318
+ }
319
+ }
320
+
321
+ /* Links
307
322
  * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
308
323
  */
309
- &:not(.ui-outlined) {
310
- a[href] {
311
- color: inherit;
312
-
313
- &:hover {
314
- color: var(--_link-hover-color);
315
- }
316
- }
317
- }
318
-
319
- /* Icon */
320
- &:has(svg) {
321
- display: grid;
322
- gap: var(--_gap);
323
- grid-template-columns: var(--_icon-size) 1fr;
324
-
325
- svg {
326
- margin-block-start: 0.15rem;
327
- stroke: var(--_icon-color);
328
- }
329
- }
330
- }
324
+ &:not(.ui-outlined) {
325
+ a[href] {
326
+ color: inherit;
327
+
328
+ &:hover {
329
+ color: var(--_link-hover-color);
330
+ }
331
+ }
332
+ }
333
+
334
+ /* Icon */
335
+ &:has(svg) {
336
+ display: grid;
337
+ gap: var(--_gap);
338
+ grid-template-columns: var(--_icon-size) 1fr;
339
+
340
+ svg {
341
+ margin-block-start: 0.15rem;
342
+ stroke: var(--_icon-color);
343
+ }
344
+ }
345
+ }
331
346
  }
332
347
 
333
348
  @layer components.root {
@@ -340,14 +355,22 @@
340
355
  --_accent-contrast: var(--_color-contrast);
341
356
  --_accent-tonal: var(--_color-tonal);
342
357
  --_accent-tonal-contrast: var(--_color);
343
- --_default-hover-bg-color: light-dark(oklch(from var(--_accent) l 0.01 h / 10%),
344
- oklch(from var(--_accent) l 0.01 h / 20%));
345
- --_default-active-bg-color: light-dark(oklch(from var(--_accent) l 0.06 h / 20%),
346
- oklch(from var(--_accent) l 0.06 h / 30%));
347
- --_filled-hover-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.2) c h),
348
- oklch(from var(--_accent) calc(l - 0.1) c h));
349
- --_filled-active-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.3) c h),
350
- oklch(from var(--_accent) calc(l - 0.15) c h));
358
+ --_default-hover-bg-color: light-dark(
359
+ oklch(from var(--_accent) l 0.01 h / 10%),
360
+ oklch(from var(--_accent) l 0.01 h / 20%)
361
+ );
362
+ --_default-active-bg-color: light-dark(
363
+ oklch(from var(--_accent) l 0.06 h / 20%),
364
+ oklch(from var(--_accent) l 0.06 h / 30%)
365
+ );
366
+ --_filled-hover-bg-color: light-dark(
367
+ oklch(from var(--_accent) calc(l + 0.2) c h),
368
+ oklch(from var(--_accent) calc(l - 0.1) c h)
369
+ );
370
+ --_filled-active-bg-color: light-dark(
371
+ oklch(from var(--_accent) calc(l + 0.3) c h),
372
+ oklch(from var(--_accent) calc(l - 0.15) c h)
373
+ );
351
374
  --_outlined-active-bg-color: var(--_filled-active-bg-color);
352
375
 
353
376
  --_bg-color: transparent;
@@ -367,8 +390,11 @@
367
390
  justify-content: center;
368
391
  padding: 0;
369
392
  transform-style: preserve-3d;
370
- transition: background-color .1s ease, color .1s ease,
371
- border-color .1s ease, box-shadow .1s ease;
393
+ transition:
394
+ background-color 0.1s ease,
395
+ color 0.1s ease,
396
+ border-color 0.1s ease,
397
+ box-shadow 0.1s ease;
372
398
 
373
399
  &:where([disabled]) {
374
400
  --_text-color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
@@ -390,7 +416,9 @@
390
416
  background-color: transparent;
391
417
 
392
418
  @media (prefers-reduced-motion: no-preference) {
393
- transition: transform 0.2s ease, background-color .1s ease;
419
+ transition:
420
+ transform 0.2s ease,
421
+ background-color 0.1s ease;
394
422
  }
395
423
  }
396
424
 
@@ -426,14 +454,20 @@
426
454
  &:where(:not([disabled])) {
427
455
  &:where(:not(:active):hover) {
428
456
  &::before {
429
- background-color: var(--_interaction-hover-color, var(--_default-hover-bg-color));
457
+ background-color: var(
458
+ --_interaction-hover-color,
459
+ var(--_default-hover-bg-color)
460
+ );
430
461
  }
431
462
  }
432
463
 
433
464
  &:where(:hover:active),
434
465
  &[aria-current="page"] {
435
466
  &::before {
436
- background-color: var(--_interaction-active-color, var(--_default-active-bg-color));
467
+ background-color: var(
468
+ --_interaction-active-color,
469
+ var(--_default-active-bg-color)
470
+ );
437
471
  }
438
472
  }
439
473
  }
@@ -481,7 +515,7 @@
481
515
  gap: 0 var(--size-1);
482
516
  position: relative;
483
517
 
484
- &>.ui-tab-input[type="radio"] {
518
+ & > .ui-tab-input[type="radio"] {
485
519
  /* utils > .ui-sr-only */
486
520
  /* TODO: use mixin for this when available */
487
521
  block-size: 1px;
@@ -492,36 +526,35 @@
492
526
  white-space: nowrap;
493
527
 
494
528
  &:checked {
495
-
496
529
  /* Checked Tab */
497
- &+[role="tab"],
498
- &+.ui-tab-label {
530
+ & + [role="tab"],
531
+ & + .ui-tab-label {
499
532
  border-block-end-color: var(--_accent-color);
500
533
  color: var(--_accent-color);
501
534
 
502
535
  /* Checked Panel */
503
- &+[role="tabpanel"],
504
- &+.ui-tab-panel {
536
+ & + [role="tabpanel"],
537
+ & + .ui-tab-panel {
505
538
  display: block;
506
539
  }
507
540
  }
508
541
  }
509
542
 
510
543
  &:focus-visible {
511
-
512
- &+[role="tab"],
513
- &+.ui-tab-label {
544
+ & + [role="tab"],
545
+ & + .ui-tab-label {
514
546
  --focus-ring-color: var(--text-muted);
515
547
  --focus-ring-offset: calc(-1 * var(--size-2));
516
- outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
548
+ outline: var(--focus-ring-width) var(--focus-ring-style)
549
+ var(--focus-ring-color);
517
550
  outline-offset: var(--focus-ring-offset);
518
551
  }
519
552
  }
520
553
  }
521
554
 
522
555
  /* Tab */
523
- &>[role="tab"],
524
- &>.ui-tab-label {
556
+ & > [role="tab"],
557
+ & > .ui-tab-label {
525
558
  align-items: center;
526
559
  background-color: transparent;
527
560
  border-bottom: 2px solid transparent;
@@ -539,14 +572,16 @@
539
572
  user-select: none;
540
573
 
541
574
  &:hover {
542
- background-color: light-dark(oklch(from var(--_accent-color) calc(l * 0.75) none h / 5%),
543
- oklch(from var(--_accent-color) calc(l * 1.25) none h / 5%));
575
+ background-color: light-dark(
576
+ oklch(from var(--_accent-color) calc(l * 0.75) none h / 5%),
577
+ oklch(from var(--_accent-color) calc(l * 1.25) none h / 5%)
578
+ );
544
579
  }
545
580
  }
546
581
 
547
582
  /* Tab Panel */
548
- &>[role="tabpanel"],
549
- &>.ui-tab-panel {
583
+ & > [role="tabpanel"],
584
+ & > .ui-tab-panel {
550
585
  display: none;
551
586
  inline-size: 100%;
552
587
  order: 2;
@@ -616,116 +651,120 @@
616
651
  */
617
652
 
618
653
  @layer components.root {
619
- :where(.ui-toggle-button) {
620
- --_button-bg-color: transparent;
621
- --_size: var(--field-size);
622
- --_svg-size: var(--size-4);
623
-
624
- align-items: center;
625
- background-color: var(--_button-bg-color);
626
- block-size: var(--_size);
627
- border: 1px solid var(--border-color);
628
- border-radius: var(--button-border-radius);
629
- color: var(--text-primary);
630
- cursor: pointer;
631
- display: inline-flex;
632
- flex: auto;
633
- gap: var(--size-2);
634
- inline-size: fit-content;
635
- justify-content: center;
636
- min-inline-size: var(--_size);
637
- outline-offset: calc(-1 * var(--size-2));
638
- padding: 0 var(--size-2);
639
- position: relative;
640
- user-select: none;
641
-
642
- input[type="checkbox"],
643
- input[type="radio"] {
644
- /* utils.css > .ui-sr-only */
645
- block-size: 1px;
646
- clip-path: inset(50%);
647
- inline-size: 1px;
648
- overflow: hidden;
649
- position: absolute;
650
- white-space: nowrap;
651
- }
652
-
653
- /* Element states */
654
- @media (pointer: fine) {
655
- &:hover:not(.ui-disabled) {
656
- --_button-bg-color: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.08));
657
- }
658
- }
659
-
660
- &:has(input:focus-visible) {
661
- --focus-ring-color: var(--text-muted);
662
- --focus-ring-offset: -6px;
663
- outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
664
- outline-offset: var(--focus-ring-offset);
665
- }
666
-
667
- /* Disabled */
668
- &.ui-disabled {
669
- border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
670
- color: color-mix(in oklch, var(--text-primary) 30%, transparent);
671
- cursor: not-allowed;
672
- }
673
-
674
- /* svgs */
675
- svg {
676
- block-size: var(--_svg-size);
677
- flex-shrink: 0;
678
- inline-size: var(--_svg-size);
679
- }
680
-
681
- /* Selected */
682
- &:has(:where(input[type="checkbox"], input[type="radio"]):checked) {
683
- --_button-bg-color: oklch(from var(--primary) l c h / 25%);
684
-
685
- @media (pointer: fine) {
686
- &:hover {
687
- --_button-bg-color: oklch(from var(--primary) l c h / 35%);
688
- }
689
- }
690
- }
691
-
692
- /* Sizes */
693
- &.ui-small {
694
- --_size: var(--field-size-small);
695
- }
696
-
697
- &.ui-x-small {
698
- --_size: var(--field-size-x-small);
699
- }
700
- }
654
+ :where(.ui-toggle-button) {
655
+ --_button-bg-color: transparent;
656
+ --_size: var(--field-size);
657
+ --_svg-size: var(--size-4);
658
+
659
+ align-items: center;
660
+ background-color: var(--_button-bg-color);
661
+ block-size: var(--_size);
662
+ border: 1px solid var(--border-color);
663
+ border-radius: var(--button-border-radius);
664
+ color: var(--text-primary);
665
+ cursor: pointer;
666
+ display: inline-flex;
667
+ flex: auto;
668
+ gap: var(--size-2);
669
+ inline-size: fit-content;
670
+ justify-content: center;
671
+ min-inline-size: var(--_size);
672
+ outline-offset: calc(-1 * var(--size-2));
673
+ padding: 0 var(--size-2);
674
+ position: relative;
675
+ user-select: none;
676
+
677
+ input[type="checkbox"],
678
+ input[type="radio"] {
679
+ /* utils.css > .ui-sr-only */
680
+ block-size: 1px;
681
+ clip-path: inset(50%);
682
+ inline-size: 1px;
683
+ overflow: hidden;
684
+ position: absolute;
685
+ white-space: nowrap;
686
+ }
687
+
688
+ /* Element states */
689
+ @media (pointer: fine) {
690
+ &:hover:not(.ui-disabled) {
691
+ --_button-bg-color: light-dark(
692
+ oklch(0% 0 0 / 0.04),
693
+ oklch(100% 0 0 / 0.08)
694
+ );
695
+ }
696
+ }
697
+
698
+ &:has(input:focus-visible) {
699
+ --focus-ring-color: var(--text-muted);
700
+ --focus-ring-offset: -6px;
701
+ outline: var(--focus-ring-width) var(--focus-ring-style)
702
+ var(--focus-ring-color);
703
+ outline-offset: var(--focus-ring-offset);
704
+ }
705
+
706
+ /* Disabled */
707
+ &.ui-disabled {
708
+ border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
709
+ color: color-mix(in oklch, var(--text-primary) 30%, transparent);
710
+ cursor: not-allowed;
711
+ }
712
+
713
+ /* svgs */
714
+ svg {
715
+ block-size: var(--_svg-size);
716
+ flex-shrink: 0;
717
+ inline-size: var(--_svg-size);
718
+ }
719
+
720
+ /* Selected */
721
+ &:has(:where(input[type="checkbox"], input[type="radio"]):checked) {
722
+ --_button-bg-color: oklch(from var(--primary) l c h / 25%);
723
+
724
+ @media (pointer: fine) {
725
+ &:hover {
726
+ --_button-bg-color: oklch(from var(--primary) l c h / 35%);
727
+ }
728
+ }
729
+ }
730
+
731
+ /* Sizes */
732
+ &.ui-small {
733
+ --_size: var(--field-size-small);
734
+ }
735
+
736
+ &.ui-x-small {
737
+ --_size: var(--field-size-x-small);
738
+ }
739
+ }
701
740
  }
702
741
 
703
742
  @layer components.root {
704
- :where(.ui-anchor) {
705
- anchor-name: --anchor;
706
- anchor-scope: --anchor;
707
- display: inline-block;
708
- inline-size: fit-content;
709
-
710
- /* Always-visible */
711
- &>.ui-anchor-floating:not([popover]) {
712
- block-size: max-content;
713
- inline-size: max-content;
714
- position: absolute;
715
- position-anchor: --anchor;
716
- position-area: var(--anchor-position-area, start end);
717
- translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
718
- }
719
-
720
- /* Hover-triggered */
721
- &>.ui-anchor-floating[popover] {
722
- inset: unset;
723
- margin: 0;
724
- position: absolute;
725
- position-area: var(--anchor-position-area, start end);
726
- translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
727
- }
728
- }
743
+ :where(.ui-anchor) {
744
+ anchor-name: --anchor;
745
+ anchor-scope: --anchor;
746
+ display: inline-block;
747
+ inline-size: fit-content;
748
+
749
+ /* Always-visible */
750
+ & > .ui-anchor-floating:not([popover]) {
751
+ block-size: max-content;
752
+ inline-size: max-content;
753
+ position: absolute;
754
+ position-anchor: --anchor;
755
+ position-area: var(--anchor-position-area, start end);
756
+ translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
757
+ }
758
+
759
+ /* Hover-triggered */
760
+ & > .ui-anchor-floating[popover] {
761
+ inset: unset;
762
+ margin: 0;
763
+ position: absolute;
764
+ position-area: var(--anchor-position-area, start end);
765
+ translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
766
+ }
767
+ }
729
768
  }
730
769
 
731
770
  @layer components.root {
@@ -850,7 +889,7 @@
850
889
  --_card-border-width: 1px;
851
890
  }
852
891
 
853
- &> :where(hgroup, .ui-content) {
892
+ & > :where(hgroup, .ui-content) {
854
893
  padding-inline: var(--size-3);
855
894
 
856
895
  &:last-child {
@@ -859,11 +898,11 @@
859
898
  }
860
899
 
861
900
  /* Header */
862
- &>hgroup {
901
+ & > hgroup {
863
902
  padding-block: var(--size-3) 0;
864
903
 
865
904
  /* Top paragraph */
866
- &>p:first-of-type:first-child {
905
+ & > p:first-of-type:first-child {
867
906
  line-height: 1.3;
868
907
  }
869
908
 
@@ -872,18 +911,18 @@
872
911
  }
873
912
 
874
913
  /* Bottom paragraph */
875
- &>p:last-of-type:last-child:not(:first-child) {
914
+ & > p:last-of-type:last-child:not(:first-child) {
876
915
  font-size: var(--font-size-1);
877
916
  }
878
917
  }
879
918
 
880
919
  /* Content */
881
- &>.ui-content:where(:only-child, :first-child) {
920
+ & > .ui-content:where(:only-child, :first-child) {
882
921
  padding-block: var(--size-3) var(--size-4);
883
922
  }
884
923
 
885
924
  /* Actions */
886
- &>.ui-actions {
925
+ & > .ui-actions {
887
926
  display: flex;
888
927
  gap: var(--size-2);
889
928
  margin-block: var(--size-2) 0;
@@ -907,8 +946,6 @@
907
946
  }
908
947
  }
909
948
  }
910
-
911
-
912
949
  }
913
950
  }
914
951
 
@@ -943,8 +980,10 @@
943
980
 
944
981
  &:where(button, a):where(:not([disabled])) {
945
982
  &:where(:not(:active)):hover {
946
- --_bg-color: light-dark(oklch(from var(--surface-tonal) calc(l * 0.98) c h),
947
- oklch(from var(--surface-tonal) calc(l * 1.1) c h));
983
+ --_bg-color: light-dark(
984
+ oklch(from var(--surface-tonal) calc(l * 0.98) c h),
985
+ oklch(from var(--surface-tonal) calc(l * 1.1) c h)
986
+ );
948
987
  }
949
988
  }
950
989
 
@@ -978,7 +1017,8 @@
978
1017
 
979
1018
  &:where(:not([disabled])) {
980
1019
  &:where(:not(:active):hover) {
981
- --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%) center/15000%;
1020
+ --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
1021
+ center/15000%;
982
1022
 
983
1023
  transition: background var(--button-ripple-duration);
984
1024
  }
@@ -992,9 +1032,11 @@
992
1032
  /* Disabled */
993
1033
  &:where([disabled]) {
994
1034
  opacity: 0.64;
995
- --_color: color-mix(in oklch,
996
- var(--text-muted) 50%,
997
- var(--surface-default));
1035
+ --_color: color-mix(
1036
+ in oklch,
1037
+ var(--text-muted) 50%,
1038
+ var(--surface-default)
1039
+ );
998
1040
  cursor: not-allowed;
999
1041
  }
1000
1042
  }
@@ -1072,7 +1114,8 @@
1072
1114
  &::after {
1073
1115
  background-color: transparent;
1074
1116
  block-size: 2px;
1075
- border-block-end: var(--_border-width) var(--_border-style) var(--border-color);
1117
+ border-block-end: var(--_border-width) var(--_border-style)
1118
+ var(--border-color);
1076
1119
  content: "";
1077
1120
  order: 1;
1078
1121
  }
@@ -1158,8 +1201,7 @@
1158
1201
  }
1159
1202
 
1160
1203
  /* Remove bottom border only on the last row of the table */
1161
- &>*:last-child tr:last-child {
1162
-
1204
+ & > *:last-child tr:last-child {
1163
1205
  th,
1164
1206
  td {
1165
1207
  border-block-end: none;
@@ -1179,7 +1221,7 @@
1179
1221
  }
1180
1222
 
1181
1223
  /* Round corner cells */
1182
- &>thead:first-of-type tr:first-child {
1224
+ & > thead:first-of-type tr:first-child {
1183
1225
  th:first-child {
1184
1226
  border-start-start-radius: var(--_table-border-radius);
1185
1227
  }
@@ -1190,7 +1232,7 @@
1190
1232
  }
1191
1233
 
1192
1234
  /* Logic for tables without thead */
1193
- &>tbody:first-of-type:not(thead ~ tbody) tr:first-child {
1235
+ & > tbody:first-of-type:not(thead ~ tbody) tr:first-child {
1194
1236
  td:first-child {
1195
1237
  border-start-start-radius: var(--_table-border-radius);
1196
1238
  }
@@ -1201,7 +1243,7 @@
1201
1243
  }
1202
1244
 
1203
1245
  /* Logic for bottom corners (whether in tbody or tfoot) */
1204
- &>*:last-child tr:last-child {
1246
+ & > *:last-child tr:last-child {
1205
1247
  :where(th, td):first-child {
1206
1248
  border-end-start-radius: var(--_table-border-radius);
1207
1249
  }
@@ -1251,7 +1293,6 @@
1251
1293
  }
1252
1294
 
1253
1295
  @container (width < 60ch) {
1254
-
1255
1296
  th,
1256
1297
  td {
1257
1298
  padding: var(--size-1) 0.875rem;
@@ -1260,7 +1301,6 @@
1260
1301
 
1261
1302
  /* Spacious */
1262
1303
  &.ui-spacious {
1263
-
1264
1304
  th,
1265
1305
  td {
1266
1306
  padding: var(--size-3);
@@ -1272,7 +1312,6 @@
1272
1312
  }
1273
1313
 
1274
1314
  @container (width < 60ch) {
1275
-
1276
1315
  th,
1277
1316
  td {
1278
1317
  padding: var(--size-3);
@@ -1282,7 +1321,6 @@
1282
1321
 
1283
1322
  /* Dense */
1284
1323
  &.ui-dense {
1285
-
1286
1324
  th,
1287
1325
  td {
1288
1326
  padding: var(--size-1);
@@ -1294,7 +1332,6 @@
1294
1332
  }
1295
1333
 
1296
1334
  @container (width < 60ch) {
1297
-
1298
1335
  th,
1299
1336
  td {
1300
1337
  padding: var(--size-1);
@@ -1331,7 +1368,7 @@
1331
1368
  --_bg-color: var(--surface-tonal);
1332
1369
  }
1333
1370
 
1334
- &>progress {
1371
+ & > progress {
1335
1372
  appearance: none;
1336
1373
  background: none;
1337
1374
  block-size: 100%;
@@ -1348,7 +1385,8 @@
1348
1385
  background-color: var(--_accent-color);
1349
1386
 
1350
1387
  @media (prefers-reduced-motion: no-preference) {
1351
- transition: inline-size 0.2s var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
1388
+ transition: inline-size 0.2s
1389
+ var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
1352
1390
  }
1353
1391
  }
1354
1392
 
@@ -1369,7 +1407,7 @@
1369
1407
  will-change: inset-inline-start, inset-inline-end;
1370
1408
  }
1371
1409
 
1372
- &>progress {
1410
+ & > progress {
1373
1411
  &::-webkit-progress-value {
1374
1412
  background-color: transparent;
1375
1413
  }
@@ -1408,420 +1446,425 @@
1408
1446
  }
1409
1447
 
1410
1448
  @layer components.root {
1411
-
1412
- [aria-busy="true"]:not(input,
1449
+ [aria-busy="true"]:not(
1450
+ input,
1413
1451
  select,
1414
1452
  textarea,
1415
1453
  html,
1416
1454
  progress,
1417
- [aria-describedby]) {
1455
+ [aria-describedby]
1456
+ ) {
1418
1457
  position: relative;
1419
1458
 
1420
- &::before {
1421
- animation: spin 0.7s linear infinite;
1422
- block-size: 1em;
1423
- border-color: transparent currentColor currentColor;
1424
- border-radius: 50%;
1425
- border-style: solid;
1426
- border-width: 3px;
1427
- content: "";
1428
- display: inline-block;
1429
- inline-size: 1em;
1430
- opacity: 0.5;
1431
- vertical-align: -0.14em;
1459
+ &::before {
1460
+ animation: spin 0.7s linear infinite;
1461
+ block-size: 1em;
1462
+ border-color: transparent currentColor currentColor;
1463
+ border-radius: 50%;
1464
+ border-style: solid;
1465
+ border-width: 3px;
1466
+ content: "";
1467
+ display: inline-block;
1468
+ inline-size: 1em;
1469
+ opacity: 0.5;
1470
+ vertical-align: -0.14em;
1471
+ }
1472
+
1473
+ &:not(button.ui-button):not(:empty) {
1474
+ &::before {
1475
+ margin-inline-end: 0.5em;
1476
+ }
1477
+ }
1478
+ }
1479
+
1480
+ @keyframes spin {
1481
+ to {
1482
+ transform: rotate(1turn);
1483
+ }
1484
+ }
1485
+ }
1486
+
1487
+ @layer components.root {
1488
+ label.ui-checkbox {
1489
+ --_input-size: var(--size-4);
1490
+
1491
+ align-items: center;
1492
+ color: var(--text-primary);
1493
+ cursor: pointer;
1494
+ display: inline-grid;
1495
+ gap: 0 var(--size-2);
1496
+ grid-auto-columns: auto;
1497
+ grid-auto-flow: column;
1498
+ inline-size: fit-content;
1499
+ line-height: 1.5;
1500
+ transform: translateZ(0);
1501
+ user-select: none;
1502
+
1503
+ /* Disabled */
1504
+ &:has([disabled]) {
1505
+ cursor: not-allowed;
1506
+ opacity: 0.64;
1507
+ user-select: none;
1508
+
1509
+ input {
1510
+ cursor: not-allowed;
1511
+ }
1512
+ }
1513
+
1514
+ /* Required dot */
1515
+ &:has(:invalid) {
1516
+ .ui-label:after {
1517
+ color: var(--red);
1518
+ content: "*";
1519
+ inset: 0 -0.25ex auto auto;
1520
+ position: absolute;
1521
+ }
1522
+ }
1523
+
1524
+ /* Label */
1525
+ .ui-label {
1526
+ color: var(--text-primary);
1527
+ font-size: var(--font-size-05);
1528
+ grid-column: 2;
1529
+ grid-row: 1;
1530
+ position: relative;
1531
+ padding-inline: 0 1ex;
1532
+ }
1533
+
1534
+ /* End text */
1535
+ :where(.ui-end-text) {
1536
+ color: var(--text-muted);
1537
+ font-size: var(--font-size-0);
1538
+ grid-column: 2;
1539
+ grid-row: 2;
1540
+ line-height: 1.5;
1541
+ z-index: 1;
1542
+ }
1543
+
1544
+ /* Spread layout */
1545
+ &.ui-spread {
1546
+ align-items: center;
1547
+ column-gap: var(--size-4);
1548
+ grid-auto-flow: unset;
1549
+ grid-template-columns: 1fr auto;
1550
+ inline-size: 100%;
1551
+
1552
+ .ui-label {
1553
+ font-weight: 600;
1554
+ grid-column: 1;
1555
+ grid-row: 1;
1556
+ inline-size: fit-content;
1557
+ }
1558
+
1559
+ input {
1560
+ grid-column: 2;
1561
+ grid-row: 1;
1562
+ }
1563
+
1564
+ :where(.ui-end-text) {
1565
+ grid-column: 1;
1566
+ grid-row: 2;
1567
+ }
1568
+ }
1569
+
1570
+ /* Stacked layout */
1571
+ &.ui-stack {
1572
+ justify-items: center;
1573
+ grid-auto-columns: unset;
1574
+
1575
+ .ui-label {
1576
+ grid-column: 1/-1;
1577
+ grid-row: 2;
1578
+ margin-block-start: var(--size-1);
1579
+ padding-inline: 1ex;
1580
+
1581
+ /* Required dot */
1582
+ &::after {
1583
+ inset: 0 -0.25ex auto auto;
1584
+ }
1585
+ }
1586
+
1587
+ .ui-end-text {
1588
+ grid-column: 1/-1;
1589
+ grid-row: 3;
1590
+ }
1591
+ }
1592
+
1593
+ /* Input */
1594
+ input[type="checkbox"] {
1595
+ --_input-size: var(--size-4);
1596
+
1597
+ appearance: none;
1598
+ aspect-ratio: 1;
1599
+ background-color: var(--surface-default);
1600
+ block-size: var(--_input-size);
1601
+ border-radius: var(--radius-1);
1602
+ border: 1px solid var(--border-color);
1603
+ box-sizing: border-box;
1604
+ cursor: pointer;
1605
+ display: grid;
1606
+ font-size: var(--_input-size);
1607
+ inline-size: var(--_input-size);
1608
+ margin: 0;
1609
+ padding: 0;
1610
+ place-items: center;
1611
+ position: relative;
1612
+
1613
+ &:checked,
1614
+ &:indeterminate {
1615
+ background-color: var(--primary);
1616
+ border-color: var(--primary);
1617
+ }
1618
+
1619
+ /* Checkmark */
1620
+ &::after {
1621
+ background-color: var(--primary-contrast);
1622
+ clip-path: polygon(
1623
+ 15% 52%,
1624
+ 40% 77%,
1625
+ 85% 32%,
1626
+ 75% 22%,
1627
+ 40% 57%,
1628
+ 25% 42%
1629
+ );
1630
+ content: "";
1631
+ inset: 0;
1632
+ opacity: 0;
1633
+ position: absolute;
1634
+ }
1635
+
1636
+ &:checked::after,
1637
+ &:indeterminate::after {
1638
+ opacity: 1;
1639
+ }
1640
+
1641
+ /* Indeterminate dash */
1642
+ &:indeterminate::after {
1643
+ clip-path: polygon(20% 45%, 80% 45%, 80% 55%, 20% 55%);
1644
+ }
1645
+
1646
+ &::before {
1647
+ --highlight-size: 175%;
1648
+ }
1649
+ }
1650
+
1651
+ /* Sizes */
1652
+ &.ui-small {
1653
+ input[type="checkbox"] {
1654
+ --_input-size: var(--size-3);
1655
+ }
1656
+ }
1657
+
1658
+ &.ui-large {
1659
+ input[type="checkbox"] {
1660
+ --_input-size: var(--size-5);
1661
+ }
1662
+ }
1663
+
1664
+ /* Validation */
1665
+ &[data-invalid],
1666
+ &:has(:user-invalid) {
1667
+ --primary: var(--critical);
1668
+
1669
+ :where(.ui-end-text) {
1670
+ color: var(--critical);
1671
+ }
1672
+ }
1673
+
1674
+ /* Touch devices */
1675
+ @media (pointer: coarse) {
1676
+ input {
1677
+ --_input-size: var(--size-4);
1678
+ }
1679
+ }
1680
+
1681
+ @media (forced-colors: active) {
1682
+ input {
1683
+ border: 1px solid CanvasText;
1684
+
1685
+ &:checked,
1686
+ &:indeterminate {
1687
+ background-color: SelectedItem;
1688
+ border-color: SelectedItem;
1689
+
1690
+ &::after {
1691
+ background-color: SelectedItemText;
1692
+ }
1693
+ }
1694
+ }
1695
+ }
1696
+ }
1697
+ }
1698
+
1699
+ @layer components.root {
1700
+ label.ui-radio {
1701
+ --_input-size: 1.125rem;
1702
+ --_indicator-size: 50%;
1703
+
1704
+ align-items: center;
1705
+ color: var(--text-primary);
1706
+ cursor: pointer;
1707
+ display: inline-grid;
1708
+ gap: 0 var(--size-2);
1709
+ grid-auto-columns: auto;
1710
+ grid-auto-flow: column;
1711
+ inline-size: fit-content;
1712
+ line-height: 1.5;
1713
+ transform: translateZ(0);
1714
+ user-select: none;
1715
+
1716
+ /* Disabled */
1717
+ &:has([disabled]) {
1718
+ cursor: not-allowed;
1719
+ opacity: 0.64;
1720
+ user-select: none;
1721
+
1722
+ input {
1723
+ cursor: not-allowed;
1724
+ }
1725
+ }
1726
+
1727
+ /* Required dot */
1728
+ &:has(:invalid) {
1729
+ .ui-label:after {
1730
+ color: var(--red);
1731
+ content: "*";
1732
+ inset: 0 -0.25ex auto auto;
1733
+ position: absolute;
1734
+ }
1735
+ }
1736
+
1737
+ /* Label */
1738
+ .ui-label {
1739
+ color: var(--text-primary);
1740
+ font-size: var(--font-size-05);
1741
+ grid-column: 2;
1742
+ grid-row: 1;
1743
+ padding-inline: 0 1ex;
1744
+ position: relative;
1745
+ }
1746
+
1747
+ /* End text */
1748
+ :where(.ui-end-text) {
1749
+ color: var(--text-muted);
1750
+ font-size: var(--font-size-0);
1751
+ grid-column: 2;
1752
+ grid-row: 2;
1753
+ line-height: 1.5;
1754
+ z-index: 1;
1755
+ }
1756
+
1757
+ /* Stacked layout */
1758
+ &.ui-stack {
1759
+ grid-auto-columns: unset;
1760
+ justify-items: center;
1761
+
1762
+ .ui-label {
1763
+ grid-column: 1/-1;
1764
+ grid-row: 2;
1765
+ margin-block-start: var(--size-1);
1766
+ padding-inline: 1ex;
1767
+
1768
+ /* Required dot */
1769
+ &::after {
1770
+ inset: 0 -0.25ex auto auto;
1771
+ }
1772
+ }
1773
+
1774
+ .ui-end-text {
1775
+ grid-column: 1/-1;
1776
+ grid-row: 3;
1777
+ }
1778
+ }
1779
+
1780
+ /* Input */
1781
+ input[type="radio"] {
1782
+ appearance: none;
1783
+ aspect-ratio: 1;
1784
+ background-color: var(--surface-default);
1785
+ block-size: var(--_input-size);
1786
+ border: 1px solid var(--field-border-color);
1787
+ border-radius: var(--radius-round);
1788
+ box-sizing: border-box;
1789
+ cursor: pointer;
1790
+ display: grid;
1791
+ inline-size: var(--_input-size);
1792
+ margin: 0;
1793
+ padding: 0;
1794
+ place-items: center;
1795
+ position: relative;
1796
+
1797
+ &:checked {
1798
+ background-color: var(--primary);
1799
+ border-color: var(--primary);
1800
+ }
1801
+
1802
+ /* Dot */
1803
+ &::after {
1804
+ background-color: var(--primary-contrast);
1805
+ block-size: var(--_indicator-size);
1806
+ border-radius: var(--radius-round);
1807
+ content: "";
1808
+ inline-size: var(--_indicator-size);
1809
+ margin: auto;
1810
+ opacity: 0;
1811
+ }
1812
+
1813
+ &:checked::after {
1814
+ opacity: 1;
1815
+ }
1816
+
1817
+ &::before {
1818
+ --highlight-size: 175%;
1819
+ }
1820
+ }
1821
+
1822
+ /* Sizes */
1823
+ &.ui-small {
1824
+ input[type="radio"] {
1825
+ --_input-size: var(--size-3);
1826
+ }
1827
+ }
1828
+
1829
+ &.ui-large {
1830
+ input[type="radio"] {
1831
+ --_input-size: var(--size-4);
1832
+ }
1432
1833
  }
1433
1834
 
1434
- &:not(button.ui-button):not(:empty) {
1435
- &::before {
1436
- margin-inline-end: 0.5em;
1835
+ /* Validation */
1836
+ &[data-invalid],
1837
+ &:has(:user-invalid) {
1838
+ --primary: var(--critical);
1839
+
1840
+ :where(.ui-end-text) {
1841
+ color: var(--critical);
1437
1842
  }
1438
1843
  }
1439
- }
1440
1844
 
1441
- @keyframes spin {
1442
- to {
1443
- transform: rotate(1turn);
1845
+ /* Touch devices */
1846
+ @media (pointer: coarse) {
1847
+ input[type="radio"] {
1848
+ block-size: var(--size-4);
1849
+ inline-size: var(--size-4);
1850
+ }
1444
1851
  }
1445
- }
1446
- }
1447
1852
 
1448
- @layer components.root {
1449
- label.ui-checkbox {
1450
- --_input-size: var(--size-4);
1451
-
1452
- align-items: center;
1453
- color: var(--text-primary);
1454
- cursor: pointer;
1455
- display: inline-grid;
1456
- gap: 0 var(--size-2);
1457
- grid-auto-columns: auto;
1458
- grid-auto-flow: column;
1459
- inline-size: fit-content;
1460
- line-height: 1.5;
1461
- transform: translateZ(0);
1462
- user-select: none;
1463
-
1464
- /* Disabled */
1465
- &:has([disabled]) {
1466
- cursor: not-allowed;
1467
- opacity: 0.64;
1468
- user-select: none;
1469
-
1470
- input {
1471
- cursor: not-allowed;
1472
- }
1473
- }
1474
-
1475
- /* Required dot */
1476
- &:has(:invalid) {
1477
- .ui-label:after {
1478
- color: var(--red);
1479
- content: "*";
1480
- inset: 0 -0.25ex auto auto;
1481
- position: absolute;
1482
- }
1483
- }
1484
-
1485
- /* Label */
1486
- .ui-label {
1487
- color: var(--text-primary);
1488
- font-size: var(--font-size-05);
1489
- grid-column: 2;
1490
- grid-row: 1;
1491
- position: relative;
1492
- padding-inline: 0 1ex;
1493
- }
1494
-
1495
- /* End text */
1496
- :where(.ui-end-text) {
1497
- color: var(--text-muted);
1498
- font-size: var(--font-size-0);
1499
- grid-column: 2;
1500
- grid-row: 2;
1501
- line-height: 1.5;
1502
- z-index: 1;
1503
- }
1504
-
1505
- /* Spread layout */
1506
- &.ui-spread {
1507
- align-items: center;
1508
- column-gap: var(--size-4);
1509
- grid-auto-flow: unset;
1510
- grid-template-columns: 1fr auto;
1511
- inline-size: 100%;
1512
-
1513
- .ui-label {
1514
- font-weight: 600;
1515
- grid-column: 1;
1516
- grid-row: 1;
1517
- inline-size: fit-content;
1518
- }
1519
-
1520
- input {
1521
- grid-column: 2;
1522
- grid-row: 1;
1523
- }
1524
-
1525
- :where(.ui-end-text) {
1526
- grid-column: 1;
1527
- grid-row: 2;
1528
- }
1529
- }
1530
-
1531
- /* Stacked layout */
1532
- &.ui-stack {
1533
- justify-items: center;
1534
- grid-auto-columns: unset;
1535
-
1536
- .ui-label {
1537
- grid-column: 1/-1;
1538
- grid-row: 2;
1539
- margin-block-start: var(--size-1);
1540
- padding-inline: 1ex;
1541
-
1542
- /* Required dot */
1543
- &::after {
1544
- inset: 0 -0.25ex auto auto;
1545
- }
1546
- }
1547
-
1548
- .ui-end-text {
1549
- grid-column: 1/-1;
1550
- grid-row: 3;
1551
- }
1552
- }
1553
-
1554
- /* Input */
1555
- input[type="checkbox"] {
1556
- --_input-size: var(--size-4);
1557
-
1558
- appearance: none;
1559
- aspect-ratio: 1;
1560
- background-color: var(--surface-default);
1561
- block-size: var(--_input-size);
1562
- border-radius: var(--radius-1);
1563
- border: 1px solid var(--border-color);
1564
- box-sizing: border-box;
1565
- cursor: pointer;
1566
- display: grid;
1567
- font-size: var(--_input-size);
1568
- inline-size: var(--_input-size);
1569
- margin: 0;
1570
- padding: 0;
1571
- place-items: center;
1572
- position: relative;
1573
-
1574
- &:checked,
1575
- &:indeterminate {
1576
- background-color: var(--primary);
1577
- border-color: var(--primary);
1578
- }
1579
-
1580
-
1581
- /* Checkmark */
1582
- &::after {
1583
- background-color: var(--primary-contrast);
1584
- clip-path: polygon(15% 52%, 40% 77%, 85% 32%, 75% 22%, 40% 57%, 25% 42%);
1585
- content: "";
1586
- inset: 0;
1587
- opacity: 0;
1588
- position: absolute;
1589
- }
1590
-
1591
- &:checked::after,
1592
- &:indeterminate::after {
1593
- opacity: 1;
1594
- }
1595
-
1596
- /* Indeterminate dash */
1597
- &:indeterminate::after {
1598
- clip-path: polygon(20% 45%, 80% 45%, 80% 55%, 20% 55%);
1599
- }
1600
-
1601
- &::before {
1602
- --highlight-size: 175%;
1603
- }
1604
- }
1605
-
1606
- /* Sizes */
1607
- &.ui-small {
1608
- input[type="checkbox"] {
1609
- --_input-size: var(--size-3);
1610
- }
1611
- }
1612
-
1613
- &.ui-large {
1614
- input[type="checkbox"] {
1615
- --_input-size: var(--size-5);
1616
- }
1617
- }
1618
-
1619
- /* Validation */
1620
- &[data-invalid],
1621
- &:has(:user-invalid) {
1622
- --palette-source: oklch(0.58 0.21 var(--hue-red));
1623
-
1624
- :where(.ui-end-text) {
1625
- color: var(--primary);
1626
- }
1627
- }
1628
-
1629
- /* Touch devices */
1630
- @media (pointer: coarse) {
1631
- input {
1632
- --_input-size: var(--size-4);
1633
- }
1634
- }
1635
-
1636
- @media (forced-colors: active) {
1637
- input {
1638
- border: 1px solid CanvasText;
1639
-
1640
- &:checked,
1641
- &:indeterminate {
1642
- background-color: SelectedItem;
1643
- border-color: SelectedItem;
1644
-
1645
- &::after {
1646
- background-color: SelectedItemText;
1647
- }
1648
- }
1649
- }
1650
- }
1651
- }
1652
- }
1853
+ @media (forced-colors: active) {
1854
+ input[type="radio"] {
1855
+ border: 1px solid CanvasText;
1653
1856
 
1654
- @layer components.root {
1655
- label.ui-radio {
1656
- --_input-size: 1.125rem;
1657
- --_indicator-size: 50%;
1658
-
1659
- align-items: center;
1660
- color: var(--text-primary);
1661
- cursor: pointer;
1662
- display: inline-grid;
1663
- gap: 0 var(--size-2);
1664
- grid-auto-columns: auto;
1665
- grid-auto-flow: column;
1666
- inline-size: fit-content;
1667
- line-height: 1.5;
1668
- transform: translateZ(0);
1669
- user-select: none;
1670
-
1671
- /* Disabled */
1672
- &:has([disabled]) {
1673
- cursor: not-allowed;
1674
- opacity: 0.64;
1675
- user-select: none;
1676
-
1677
- input {
1678
- cursor: not-allowed;
1679
- }
1680
- }
1681
-
1682
- /* Required dot */
1683
- &:has(:invalid) {
1684
- .ui-label:after {
1685
- color: var(--red);
1686
- content: "*";
1687
- inset: 0 -0.25ex auto auto;
1688
- position: absolute;
1689
- }
1690
- }
1691
-
1692
- /* Label */
1693
- .ui-label {
1694
- color: var(--text-primary);
1695
- font-size: var(--font-size-05);
1696
- grid-column: 2;
1697
- grid-row: 1;
1698
- padding-inline: 0 1ex;
1699
- position: relative;
1700
- }
1701
-
1702
- /* End text */
1703
- :where(.ui-end-text) {
1704
- color: var(--text-muted);
1705
- font-size: var(--font-size-0);
1706
- grid-column: 2;
1707
- grid-row: 2;
1708
- line-height: 1.5;
1709
- z-index: 1;
1710
- }
1711
-
1712
- /* Stacked layout */
1713
- &.ui-stack {
1714
- grid-auto-columns: unset;
1715
- justify-items: center;
1716
-
1717
- .ui-label {
1718
- grid-column: 1/-1;
1719
- grid-row: 2;
1720
- margin-block-start: var(--size-1);
1721
- padding-inline: 1ex;
1722
-
1723
- /* Required dot */
1724
- &::after {
1725
- inset: 0 -0.25ex auto auto;
1726
- }
1727
- }
1728
-
1729
- .ui-end-text {
1730
- grid-column: 1/-1;
1731
- grid-row: 3;
1732
- }
1733
- }
1734
-
1735
- /* Input */
1736
- input[type="radio"] {
1737
- appearance: none;
1738
- aspect-ratio: 1;
1739
- background-color: var(--surface-default);
1740
- block-size: var(--_input-size);
1741
- border: 1px solid var(--field-border-color);
1742
- border-radius: var(--radius-round);
1743
- box-sizing: border-box;
1744
- cursor: pointer;
1745
- display: grid;
1746
- inline-size: var(--_input-size);
1747
- margin: 0;
1748
- padding: 0;
1749
- place-items: center;
1750
- position: relative;
1751
-
1752
- &:checked {
1753
- background-color: var(--primary);
1754
- border-color: var(--primary);
1755
- }
1756
-
1757
- /* Dot */
1758
- &::after {
1759
- background-color: var(--primary-contrast);
1760
- block-size: var(--_indicator-size);
1761
- border-radius: var(--radius-round);
1762
- content: "";
1763
- inline-size: var(--_indicator-size);
1764
- margin: auto;
1765
- opacity: 0;
1766
- }
1767
-
1768
- &:checked::after {
1769
- opacity: 1;
1770
- }
1771
-
1772
- &::before {
1773
- --highlight-size: 175%;
1774
- }
1775
- }
1776
-
1777
- /* Sizes */
1778
- &.ui-small {
1779
- input[type="radio"] {
1780
- --_input-size: var(--size-3);
1781
-
1782
- }
1783
- }
1784
-
1785
- &.ui-large {
1786
- input[type="radio"] {
1787
- --_input-size: var(--size-4);
1788
-
1789
- }
1790
- }
1791
-
1792
- /* Validation */
1793
- &[data-invalid],
1794
- &:has(:user-invalid) {
1795
- --palette-source: oklch(0.58 0.21 var(--hue-red));
1796
-
1797
- :where(.ui-end-text) {
1798
- color: var(--primary);
1799
- }
1800
- }
1801
-
1802
- /* Touch devices */
1803
- @media (pointer: coarse) {
1804
- input[type="radio"] {
1805
- block-size: var(--size-4);
1806
- inline-size: var(--size-4);
1807
- }
1808
- }
1809
-
1810
- @media (forced-colors: active) {
1811
- input[type="radio"] {
1812
- border: 1px solid CanvasText;
1813
-
1814
- &:checked {
1815
- background-color: SelectedItem;
1816
- border-color: SelectedItem;
1817
-
1818
- &::after {
1819
- background-color: SelectedItemText;
1820
- }
1821
- }
1822
- }
1823
- }
1824
- }
1857
+ &:checked {
1858
+ background-color: SelectedItem;
1859
+ border-color: SelectedItem;
1860
+
1861
+ &::after {
1862
+ background-color: SelectedItemText;
1863
+ }
1864
+ }
1865
+ }
1866
+ }
1867
+ }
1825
1868
  }
1826
1869
 
1827
1870
  @layer components.root {
@@ -1882,7 +1925,7 @@
1882
1925
  margin-top: calc(var(--size-1) * -1);
1883
1926
  padding-inline: calc(3ex / 2);
1884
1927
 
1885
- &>option {
1928
+ & > option {
1886
1929
  display: flex;
1887
1930
  inline-size: 0;
1888
1931
  justify-content: center;
@@ -2063,9 +2106,11 @@
2063
2106
  /* Track */
2064
2107
  &::-webkit-slider-runnable-track {
2065
2108
  appearance: none;
2066
- background: linear-gradient(to right,
2067
- var(--_track-fill-color) var(--_track-fill, 0%),
2068
- var(--_track-color) 0%);
2109
+ background: linear-gradient(
2110
+ to right,
2111
+ var(--_track-fill-color) var(--_track-fill, 0%),
2112
+ var(--_track-color) 0%
2113
+ );
2069
2114
  block-size: var(--_track-height);
2070
2115
  border-radius: var(--_track-radius);
2071
2116
  }
@@ -2091,7 +2136,8 @@
2091
2136
  block-size: var(--_thumb-size);
2092
2137
  border: 3px solid var(--surface-default);
2093
2138
  border-radius: 50%;
2094
- box-shadow: 0 0 0 var(--_thumb-highlight-size) var(--_thumb-highlight-color);
2139
+ box-shadow: 0 0 0 var(--_thumb-highlight-size)
2140
+ var(--_thumb-highlight-color);
2095
2141
  cursor: ew-resize;
2096
2142
  inline-size: var(--_thumb-size);
2097
2143
  margin-block-start: var(--_thumb-offset);
@@ -2111,7 +2157,8 @@
2111
2157
  block-size: var(--_thumb-size);
2112
2158
  border: 3px solid var(--surface-default);
2113
2159
  border-radius: 50%;
2114
- box-shadow: 0 0 0 var(--_thumb-highlight-size) var(--_thumb-highlight-color);
2160
+ box-shadow: 0 0 0 var(--_thumb-highlight-size)
2161
+ var(--_thumb-highlight-color);
2115
2162
  cursor: ew-resize;
2116
2163
  inline-size: var(--_thumb-size);
2117
2164
  margin-block-start: var(--_thumb-offset);
@@ -2138,8 +2185,10 @@
2138
2185
 
2139
2186
  &:active {
2140
2187
  --_thumb-highlight-size: var(--size-2);
2141
- --_track-color: light-dark(oklch(from var(--field-border-color) calc(l * 0.9) c h),
2142
- oklch(from var(--field-border-color) calc(l * 1.1) c h));
2188
+ --_track-color: light-dark(
2189
+ oklch(from var(--field-border-color) calc(l * 0.9) c h),
2190
+ oklch(from var(--field-border-color) calc(l * 1.1) c h)
2191
+ );
2143
2192
  }
2144
2193
  }
2145
2194
 
@@ -2159,7 +2208,6 @@
2159
2208
  }
2160
2209
  }
2161
2210
  }
2162
-
2163
2211
  }
2164
2212
 
2165
2213
  @layer components.root {
@@ -2208,7 +2256,8 @@
2208
2256
 
2209
2257
  &:focus-visible {
2210
2258
  --focus-ring-color: currentColor;
2211
- outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
2259
+ outline: var(--focus-ring-width) var(--focus-ring-style)
2260
+ var(--focus-ring-color);
2212
2261
  outline-offset: var(--focus-ring-offset);
2213
2262
  }
2214
2263
 
@@ -2240,13 +2289,14 @@
2240
2289
  --_dot-bg-color: var(--_accent-contrast);
2241
2290
  --_dot-outline-size: calc(var(--size-1) - 1px);
2242
2291
 
2243
- inset-inline-start: calc(var(--_track-width) - var(--_dot-size) - var(--size-1));
2292
+ inset-inline-start: calc(
2293
+ var(--_track-width) - var(--_dot-size) - var(--size-1)
2294
+ );
2244
2295
  }
2245
2296
  }
2246
2297
 
2247
2298
  /* Animation */
2248
2299
  @media (prefers-reduced-motion: no-preference) {
2249
-
2250
2300
  /* Track */
2251
2301
  &::before {
2252
2302
  transition:
@@ -2306,7 +2356,9 @@
2306
2356
  }
2307
2357
 
2308
2358
  .ui-icon-unchecked {
2309
- margin-inline-start: calc(var(--_track-width) - var(--_dot-size) - var(--size-1));
2359
+ margin-inline-start: calc(
2360
+ var(--_track-width) - var(--_dot-size) - var(--size-1)
2361
+ );
2310
2362
  }
2311
2363
 
2312
2364
  .ui-icon-checked {
@@ -2385,7 +2437,6 @@
2385
2437
  }
2386
2438
 
2387
2439
  &:has(.ui-icon-checked, .ui-icon-unchecked) {
2388
-
2389
2440
  input[role="switch"],
2390
2441
  .ui-icon-checked,
2391
2442
  .ui-icon-unchecked {
@@ -2432,169 +2483,167 @@
2432
2483
  }
2433
2484
 
2434
2485
  @layer components.extended {
2435
- :where(#toast-manager) {
2436
- background: none;
2437
- block-size: auto;
2438
- border: none;
2439
- display: none;
2440
- flex-direction: column-reverse;
2441
- gap: var(--size-3);
2442
- inline-size: auto;
2443
- inset: auto var(--size-4) var(--size-4) auto;
2444
- margin: 0;
2445
- max-inline-size: calc(100vi - var(--size-8));
2446
- overflow: visible;
2447
- padding: 0;
2448
- pointer-events: none;
2449
- position: fixed;
2450
- z-index: 1000;
2451
-
2452
- &:popover-open {
2453
- display: flex;
2454
- }
2455
-
2456
- &::backdrop {
2457
- display: none;
2458
- }
2459
-
2460
- /* Optional cap on visible toasts. Older toasts beyond this depth are hidden
2486
+ :where(#toast-manager) {
2487
+ background: none;
2488
+ block-size: auto;
2489
+ border: none;
2490
+ display: none;
2491
+ flex-direction: column-reverse;
2492
+ gap: var(--size-3);
2493
+ inline-size: auto;
2494
+ inset: auto var(--size-4) var(--size-4) auto;
2495
+ margin: 0;
2496
+ max-inline-size: calc(100vi - var(--size-8));
2497
+ overflow: visible;
2498
+ padding: 0;
2499
+ pointer-events: none;
2500
+ position: fixed;
2501
+ z-index: 1000;
2502
+
2503
+ &:popover-open {
2504
+ display: flex;
2505
+ }
2506
+
2507
+ &::backdrop {
2508
+ display: none;
2509
+ }
2510
+
2511
+ /* Optional cap on visible toasts. Older toasts beyond this depth are hidden
2461
2512
  but still in the DOM so they animate cleanly when newer ones are removed. */
2462
- /* > .toast:nth-last-child(n + 6) { display: none; } */
2463
- }
2464
-
2465
- :where(.ui-toast) {
2466
- --_anim-enter: 0.3s;
2467
- --_anim-exit: 0.3s;
2468
-
2469
- align-items: center;
2470
- animation:
2471
- toast-enter var(--_anim-enter) var(--ease-out-3) both,
2472
- toast-hold attr(data-duration type(<time>), 5s) linear both,
2473
- toast-exit var(--_anim-exit) var(--ease-in-3) both;
2474
- animation-delay:
2475
- 0s,
2476
- var(--_anim-enter),
2477
- calc(var(--_anim-enter) + attr(data-duration type(<time>), 5s));
2478
- background-color: light-dark(var(--gray-15), var(--gray-2));
2479
- border-radius: var(--border-radius);
2480
- box-shadow: var(--shadow-3);
2481
- color: var(--text-primary-contrast);
2482
- display: flex;
2483
- gap: var(--size-3);
2484
- justify-content: space-between;
2485
- min-inline-size: 30ch;
2486
- padding: var(--size-3) var(--size-4);
2487
- pointer-events: auto;
2488
-
2489
- &:hover {
2490
- animation-play-state: paused;
2491
- }
2492
-
2493
- &.ui-exiting {
2494
- animation: toast-exit var(--_anim-exit) var(--ease-in-3) forwards;
2495
- }
2496
-
2497
- .ui-icon {
2498
- background: no-repeat center / contain;
2499
- block-size: var(--size-4);
2500
- flex-shrink: 0;
2501
- inline-size: var(--size-4);
2502
- }
2503
-
2504
- /* Hide the icon slot when there's no severity to render against. */
2505
- &:not([data-severity]) .ui-icon {
2506
- display: none;
2507
- }
2508
-
2509
- .ui-content {
2510
- font-size: var(--font-size-05);
2511
- word-break: break-word;
2512
- }
2513
-
2514
- .ui-title {
2515
- font-weight: 600;
2516
- }
2517
-
2518
- .ui-description {
2519
- color: oklch(from currentColor l c h / 75%);
2520
- font-size: var(--font-size-0);
2521
- }
2522
-
2523
- .ui-close-button {
2524
- background: none;
2525
- border: none;
2526
- color: inherit;
2527
- cursor: pointer;
2528
- display: grid;
2529
- opacity: 0.7;
2530
- padding: var(--size-1);
2531
- place-items: center;
2532
- transition: opacity 0.2s;
2533
-
2534
- &:hover {
2535
- opacity: 1;
2536
- }
2537
- }
2538
-
2539
- /* Severity icons via CSS data URIs — keeps icon assets out of JS strings. */
2540
- &[data-severity="success"] .ui-icon {
2541
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><path d='m9 11 3 3L22 4'/></svg>");
2542
- }
2543
-
2544
- &[data-severity="info"] .ui-icon {
2545
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
2546
- }
2547
-
2548
- &[data-severity="warning"] .ui-icon {
2549
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
2550
- }
2551
-
2552
- &[data-severity="critical"] .ui-icon {
2553
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
2554
- }
2555
- }
2556
-
2557
- @keyframes toast-enter {
2558
- from {
2559
- opacity: 0;
2560
- translate: var(--size-4) 0;
2561
- }
2562
-
2563
- to {
2564
- opacity: 1;
2565
- translate: 0 0;
2566
- }
2567
- }
2568
-
2569
- /* Identity keyframe — only purpose is to delay the exit animation by the
2513
+ /* > .toast:nth-last-child(n + 6) { display: none; } */
2514
+ }
2515
+
2516
+ :where(.ui-toast) {
2517
+ --_anim-enter: 0.3s;
2518
+ --_anim-exit: 0.3s;
2519
+
2520
+ align-items: center;
2521
+ animation:
2522
+ toast-enter var(--_anim-enter) var(--ease-out-3) both,
2523
+ toast-hold attr(data-duration type(<time>), 5s) linear both,
2524
+ toast-exit var(--_anim-exit) var(--ease-in-3) both;
2525
+ animation-delay:
2526
+ 0s, var(--_anim-enter),
2527
+ calc(var(--_anim-enter) + attr(data-duration type(<time>), 5s));
2528
+ background-color: light-dark(var(--gray-15), var(--gray-2));
2529
+ border-radius: var(--border-radius);
2530
+ box-shadow: var(--shadow-3);
2531
+ color: var(--text-primary-contrast);
2532
+ display: flex;
2533
+ gap: var(--size-3);
2534
+ justify-content: space-between;
2535
+ min-inline-size: 30ch;
2536
+ padding: var(--size-3) var(--size-4);
2537
+ pointer-events: auto;
2538
+
2539
+ &:hover {
2540
+ animation-play-state: paused;
2541
+ }
2542
+
2543
+ &.ui-exiting {
2544
+ animation: toast-exit var(--_anim-exit) var(--ease-in-3) forwards;
2545
+ }
2546
+
2547
+ .ui-icon {
2548
+ background: no-repeat center / contain;
2549
+ block-size: var(--size-4);
2550
+ flex-shrink: 0;
2551
+ inline-size: var(--size-4);
2552
+ }
2553
+
2554
+ /* Hide the icon slot when there's no severity to render against. */
2555
+ &:not([data-severity]) .ui-icon {
2556
+ display: none;
2557
+ }
2558
+
2559
+ .ui-content {
2560
+ font-size: var(--font-size-05);
2561
+ word-break: break-word;
2562
+ }
2563
+
2564
+ .ui-title {
2565
+ font-weight: 600;
2566
+ }
2567
+
2568
+ .ui-description {
2569
+ color: oklch(from currentColor l c h / 75%);
2570
+ font-size: var(--font-size-0);
2571
+ }
2572
+
2573
+ .ui-close-button {
2574
+ background: none;
2575
+ border: none;
2576
+ color: inherit;
2577
+ cursor: pointer;
2578
+ display: grid;
2579
+ opacity: 0.7;
2580
+ padding: var(--size-1);
2581
+ place-items: center;
2582
+ transition: opacity 0.2s;
2583
+
2584
+ &:hover {
2585
+ opacity: 1;
2586
+ }
2587
+ }
2588
+
2589
+ /* Severity icons via CSS data URIs — keeps icon assets out of JS strings. */
2590
+ &[data-severity="success"] .ui-icon {
2591
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><path d='m9 11 3 3L22 4'/></svg>");
2592
+ }
2593
+
2594
+ &[data-severity="info"] .ui-icon {
2595
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
2596
+ }
2597
+
2598
+ &[data-severity="warning"] .ui-icon {
2599
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
2600
+ }
2601
+
2602
+ &[data-severity="critical"] .ui-icon {
2603
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
2604
+ }
2605
+ }
2606
+
2607
+ @keyframes toast-enter {
2608
+ from {
2609
+ opacity: 0;
2610
+ translate: var(--size-4) 0;
2611
+ }
2612
+
2613
+ to {
2614
+ opacity: 1;
2615
+ translate: 0 0;
2616
+ }
2617
+ }
2618
+
2619
+ /* Identity keyframe — only purpose is to delay the exit animation by the
2570
2620
  author-defined duration. */
2571
- @keyframes toast-hold {
2572
- from {
2573
- opacity: 1;
2574
- }
2575
-
2576
- to {
2577
- opacity: 1;
2578
- }
2579
- }
2580
-
2581
- @keyframes toast-exit {
2582
- from {
2583
- opacity: 1;
2584
- scale: 1;
2585
- translate: 0 0;
2586
- }
2587
-
2588
- to {
2589
- opacity: 0;
2590
- scale: 0.9;
2591
- translate: 0 var(--size-4);
2592
- }
2593
- }
2621
+ @keyframes toast-hold {
2622
+ from {
2623
+ opacity: 1;
2624
+ }
2625
+
2626
+ to {
2627
+ opacity: 1;
2628
+ }
2629
+ }
2630
+
2631
+ @keyframes toast-exit {
2632
+ from {
2633
+ opacity: 1;
2634
+ scale: 1;
2635
+ translate: 0 0;
2636
+ }
2637
+
2638
+ to {
2639
+ opacity: 0;
2640
+ scale: 0.9;
2641
+ translate: 0 var(--size-4);
2642
+ }
2643
+ }
2594
2644
  }
2595
2645
 
2596
2646
  @layer components.root {
2597
-
2598
2647
  :where(.ui-p) {
2599
2648
  text-wrap: pretty;
2600
2649
 
@@ -2649,8 +2698,10 @@
2649
2698
 
2650
2699
  /** Overline */
2651
2700
  :where(.ui-overline) {
2652
- color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
2653
- oklch(from var(--text-muted) calc(l * 0.75) c h));
2701
+ color: light-dark(
2702
+ oklch(from var(--text-muted) calc(l * 1.25) c h),
2703
+ oklch(from var(--text-muted) calc(l * 0.75) c h)
2704
+ );
2654
2705
  font-size: var(--font-size-0);
2655
2706
  font-weight: 500;
2656
2707
  letter-spacing: 0.06em;
@@ -2658,18 +2709,20 @@
2658
2709
  }
2659
2710
 
2660
2711
  :where(.ui-hgroup) {
2661
- &>p {
2712
+ & > p {
2662
2713
  margin: 0;
2663
2714
  }
2664
2715
 
2665
- &> :where(h1, h2, h3, h4, h5, h6) {
2716
+ & > :where(h1, h2, h3, h4, h5, h6) {
2666
2717
  margin-block: 0 0.4em;
2667
2718
  }
2668
2719
 
2669
2720
  /* First p element (overline) */
2670
- &>p:first-of-type:first-child {
2671
- color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
2672
- oklch(from var(--text-muted) calc(l * 0.75) c h));
2721
+ & > p:first-of-type:first-child {
2722
+ color: light-dark(
2723
+ oklch(from var(--text-muted) calc(l * 1.25) c h),
2724
+ oklch(from var(--text-muted) calc(l * 0.75) c h)
2725
+ );
2673
2726
  font-size: var(--font-size-0);
2674
2727
  font-weight: 500;
2675
2728
  letter-spacing: 0.06em;
@@ -2677,13 +2730,13 @@
2677
2730
  }
2678
2731
 
2679
2732
  /* Body paragraphs after the heading */
2680
- &>p:not(:first-of-type:first-child) {
2733
+ & > p:not(:first-of-type:first-child) {
2681
2734
  color: oklch(from currentColor l c h / 75%);
2682
2735
  font-size: var(--font-size-3);
2683
2736
  line-height: 1.6;
2684
2737
  }
2685
2738
 
2686
- &>p+p {
2739
+ & > p + p {
2687
2740
  margin-block-start: 0.75em;
2688
2741
  }
2689
2742
  }
@@ -2695,8 +2748,6 @@
2695
2748
  line-height: 1.6;
2696
2749
  }
2697
2750
 
2698
-
2699
-
2700
2751
  /* Inline text elements — class utilities (work anywhere) */
2701
2752
  :where(.ui-u, .ui-abbr, .ui-dfn) {
2702
2753
  text-decoration: underline;
@@ -2749,7 +2800,7 @@
2749
2800
  :where(.ui-mark) {
2750
2801
  border-radius: var(--radius-2);
2751
2802
  box-decoration-break: clone;
2752
- padding: .1ex .3ex;
2803
+ padding: 0.1ex 0.3ex;
2753
2804
  vertical-align: baseline;
2754
2805
  }
2755
2806
 
@@ -2822,7 +2873,7 @@
2822
2873
  scrollbar-width: thin;
2823
2874
  white-space: pre;
2824
2875
 
2825
- >code {
2876
+ > code {
2826
2877
  background: none;
2827
2878
  border-radius: 0;
2828
2879
  color: inherit;
@@ -2832,7 +2883,6 @@
2832
2883
  writing-mode: inherit;
2833
2884
  }
2834
2885
  }
2835
-
2836
2886
  }
2837
2887
 
2838
2888
  /* Rich text */
@@ -2850,7 +2900,6 @@
2850
2900
  text-underline-offset: 2px;
2851
2901
 
2852
2902
  &[href] {
2853
-
2854
2903
  &:hover,
2855
2904
  &:focus-visible {
2856
2905
  color: var(--primary-light);
@@ -2900,7 +2949,7 @@
2900
2949
  overflow-x: auto;
2901
2950
  scrollbar-width: thin;
2902
2951
 
2903
- >code {
2952
+ > code {
2904
2953
  background: none;
2905
2954
  border-radius: 0;
2906
2955
  color: inherit;
@@ -2911,7 +2960,6 @@
2911
2960
  }
2912
2961
  }
2913
2962
 
2914
-
2915
2963
  /* Text */
2916
2964
  p {
2917
2965
  font-size: inherit;
@@ -2925,7 +2973,7 @@
2925
2973
  font-weight: 700;
2926
2974
  text-wrap: pretty;
2927
2975
 
2928
- &+*:not(&) {
2976
+ & + *:not(&) {
2929
2977
  margin-block-start: 0;
2930
2978
  }
2931
2979
  }
@@ -2972,8 +3020,10 @@
2972
3020
 
2973
3021
  /** Overline */
2974
3022
  :is(.ui-overline, hgroup p:first-of-type:first-child) {
2975
- color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
2976
- oklch(from var(--text-muted) calc(l * 0.75) c h));
3023
+ color: light-dark(
3024
+ oklch(from var(--text-muted) calc(l * 1.25) c h),
3025
+ oklch(from var(--text-muted) calc(l * 0.75) c h)
3026
+ );
2977
3027
  font-size: var(--font-size-0);
2978
3028
  font-weight: 500;
2979
3029
  letter-spacing: 0.06em;
@@ -2981,26 +3031,26 @@
2981
3031
  }
2982
3032
 
2983
3033
  hgroup {
2984
- &>p {
3034
+ & > p {
2985
3035
  margin: 0;
2986
3036
  }
2987
3037
 
2988
- &> :where(h1, h2, h3, h4, h5, h6) {
3038
+ & > :where(h1, h2, h3, h4, h5, h6) {
2989
3039
  margin-block: 0 0.4em;
2990
3040
  }
2991
3041
 
2992
- &+* {
3042
+ & + * {
2993
3043
  margin-block-start: 3em;
2994
3044
  }
2995
3045
 
2996
3046
  /* Body paragraphs after the heading */
2997
- &>p:not(:first-of-type:first-child) {
3047
+ & > p:not(:first-of-type:first-child) {
2998
3048
  color: oklch(from currentColor l c h / 75%);
2999
3049
  font-size: var(--font-size-3);
3000
3050
  line-height: 1.6;
3001
3051
  }
3002
3052
 
3003
- &>p+p {
3053
+ & > p + p {
3004
3054
  margin-block-start: 0.75em;
3005
3055
  }
3006
3056
  }
@@ -3062,7 +3112,7 @@
3062
3112
  margin-block: var(--size-7);
3063
3113
  place-items: center;
3064
3114
 
3065
- &>* {
3115
+ & > * {
3066
3116
  margin-block: 0;
3067
3117
  }
3068
3118
 
@@ -3073,18 +3123,18 @@
3073
3123
  }
3074
3124
 
3075
3125
  /* Remove top margin from first child */
3076
- &> :first-child {
3126
+ & > :first-child {
3077
3127
  margin-block-start: 0;
3078
3128
  }
3079
3129
 
3080
3130
  /* Remove bottom margin from last child */
3081
- &> :last-child {
3131
+ & > :last-child {
3082
3132
  margin-block-end: 0;
3083
3133
  }
3084
3134
 
3085
3135
  /* Horizontal rules */
3086
3136
  hr {
3087
- &+* {
3137
+ & + * {
3088
3138
  margin-block-start: 0;
3089
3139
  }
3090
3140
  }
@@ -3165,7 +3215,7 @@
3165
3215
  mark {
3166
3216
  border-radius: var(--radius-2);
3167
3217
  box-decoration-break: clone;
3168
- padding: .1ex .3ex;
3218
+ padding: 0.1ex 0.3ex;
3169
3219
  vertical-align: baseline;
3170
3220
  }
3171
3221
 
@@ -3199,14 +3249,14 @@
3199
3249
 
3200
3250
  /* Floating wrapper: traditional inset-based positioning so this works
3201
3251
  in browsers without position-area support (Firefox, older Safari). */
3202
- &>.ui-anchor-floating:not([popover]) {
3252
+ & > .ui-anchor-floating:not([popover]) {
3203
3253
  inset: var(--_badge-inset);
3204
3254
  position-anchor: auto;
3205
3255
  position-area: none;
3206
3256
  }
3207
3257
 
3208
3258
  /* Indicator */
3209
- &>.ui-anchor-floating>.ui-badge-indicator {
3259
+ & > .ui-anchor-floating > .ui-badge-indicator {
3210
3260
  background-color: var(--_bg-color);
3211
3261
  block-size: var(--_size);
3212
3262
  border: 2px solid var(--_border-color);
@@ -3275,7 +3325,7 @@
3275
3325
  --_anchor-ty: var(--_dot-size);
3276
3326
  }
3277
3327
 
3278
- &.ui-dot>.ui-anchor-floating>.ui-badge-indicator {
3328
+ &.ui-dot > .ui-anchor-floating > .ui-badge-indicator {
3279
3329
  block-size: var(--_dot-size);
3280
3330
  inline-size: var(--_dot-size);
3281
3331
  min-inline-size: var(--_dot-size);
@@ -3283,7 +3333,7 @@
3283
3333
  }
3284
3334
 
3285
3335
  /* Visibility */
3286
- &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
3336
+ &.ui-invisible > .ui-anchor-floating > .ui-badge-indicator {
3287
3337
  opacity: 0;
3288
3338
  pointer-events: none;
3289
3339
  }
@@ -3303,8 +3353,10 @@
3303
3353
  border-radius: 0;
3304
3354
 
3305
3355
  /* button.css > --_accent-tonal */
3306
- --_divider-color: light-dark(oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
3307
- oklch(from var(--_accent-tonal) calc(l + 0.1) c h));
3356
+ --_divider-color: light-dark(
3357
+ oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
3358
+ oklch(from var(--_accent-tonal) calc(l + 0.1) c h)
3359
+ );
3308
3360
 
3309
3361
  &.ui-outlined {
3310
3362
  --_divider-color: var(--_border-color);
@@ -3321,16 +3373,19 @@
3321
3373
  /* Color inheritance from Button Group — shared interaction model.
3322
3374
  The .critical scope class in theme.css redirects --palette-source so
3323
3375
  --color-6 below becomes a tint of the active color. */
3324
- :where(.ui-button-group.ui-critical,
3325
- .ui-button-group.ui-primary) & {
3376
+ :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
3326
3377
  --_color-contrast: var(--gray-1);
3327
3378
  --_color-tonal: var(--color-6);
3328
3379
  --_accent-tonal-contrast: var(--text-primary-contrast);
3329
3380
  --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
3330
3381
  --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
3331
3382
  --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
3332
- --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
3333
- --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
3383
+ --_filled-active-bg-color: oklch(
3384
+ from var(--_accent) calc(l - 0.15) c h
3385
+ );
3386
+ --_outlined-active-bg-color: oklch(
3387
+ from var(--_accent) calc(l - 0.1) c h
3388
+ );
3334
3389
  }
3335
3390
 
3336
3391
  :where(.ui-button-group.ui-critical) & {
@@ -3393,10 +3448,11 @@
3393
3448
  --_text-color: var(--_accent-contrast);
3394
3449
  --_divider-color: currentColor;
3395
3450
 
3396
- :where(.ui-button-group.ui-critical,
3397
- .ui-button-group.ui-primary) & {
3398
- --_divider-color: light-dark(oklch(from var(--_accent) calc(l - 0.1) c h),
3399
- oklch(from var(--_accent) calc(l + 0.1) c h));
3451
+ :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
3452
+ --_divider-color: light-dark(
3453
+ oklch(from var(--_accent) calc(l - 0.1) c h),
3454
+ oklch(from var(--_accent) calc(l + 0.1) c h)
3455
+ );
3400
3456
  }
3401
3457
 
3402
3458
  &:where(:not([disabled])) {
@@ -3424,13 +3480,17 @@
3424
3480
  }
3425
3481
 
3426
3482
  /* Siblings */
3427
- &+& {
3483
+ & + & {
3428
3484
  border-inline-start-color: var(--_divider-color);
3429
3485
  border-inline-width: 1px;
3430
3486
  margin-inline-start: -1px;
3431
3487
 
3432
3488
  &[disabled] {
3433
- border-inline-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
3489
+ border-inline-start-color: color-mix(
3490
+ in oklch,
3491
+ var(--_divider-color) 40%,
3492
+ transparent
3493
+ );
3434
3494
  }
3435
3495
  }
3436
3496
  }
@@ -3457,12 +3517,16 @@
3457
3517
  border-end-end-radius: var(--_border-radius);
3458
3518
  }
3459
3519
 
3460
- &+& {
3520
+ & + & {
3461
3521
  border-block-start: 1px solid var(--_divider-color);
3462
3522
  margin-block-start: -1px;
3463
3523
 
3464
3524
  &[disabled] {
3465
- border-block-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
3525
+ border-block-start-color: color-mix(
3526
+ in oklch,
3527
+ var(--_divider-color) 40%,
3528
+ transparent
3529
+ );
3466
3530
  }
3467
3531
  }
3468
3532
  }
@@ -3541,7 +3605,7 @@
3541
3605
  }
3542
3606
 
3543
3607
  /* Layout */
3544
- &>summary {
3608
+ & > summary {
3545
3609
  background-color: inherit;
3546
3610
  cursor: pointer;
3547
3611
  font-weight: 700;
@@ -3566,17 +3630,17 @@
3566
3630
  }
3567
3631
  }
3568
3632
 
3569
- &[open]>summary svg {
3633
+ &[open] > summary svg {
3570
3634
  rotate: 180deg;
3571
3635
  }
3572
3636
 
3573
- &>.ui-content {
3637
+ & > .ui-content {
3574
3638
  margin-block-start: 0;
3575
3639
  padding-block: var(--_content-padding-block);
3576
3640
  padding-inline: var(--_content-padding-inline);
3577
3641
  }
3578
3642
 
3579
- &>.ui-actions {
3643
+ & > .ui-actions {
3580
3644
  display: flex;
3581
3645
  gap: var(--_actions-gap);
3582
3646
  justify-content: end;
@@ -3601,12 +3665,12 @@
3601
3665
  }
3602
3666
  }
3603
3667
 
3604
- &>.ui-content {
3668
+ & > .ui-content {
3605
3669
  margin-block: 0;
3606
3670
  padding: 0;
3607
3671
  }
3608
3672
 
3609
- &>details.ui-accordion {
3673
+ & > details.ui-accordion {
3610
3674
  --_border-color: transparent;
3611
3675
  --_border-width: 0;
3612
3676
  --_margin-inline: 0;
@@ -3615,7 +3679,7 @@
3615
3679
  --_summary-padding-inline: var(--_item-summary-padding-inline);
3616
3680
 
3617
3681
  /* Border between accordion items */
3618
- &+& {
3682
+ & + & {
3619
3683
  border-block-start: 1px solid var(--_gutter-color);
3620
3684
  border-radius: 0;
3621
3685
  }
@@ -3646,7 +3710,6 @@
3646
3710
  }
3647
3711
 
3648
3712
  @layer components.extended {
3649
-
3650
3713
  /*
3651
3714
  Lists meant to be used stand-alone or as part of Select elements
3652
3715
 
@@ -3664,7 +3727,6 @@ Lists meant to be used stand-alone or as part of Select elements
3664
3727
  padding: var(--size-2) 0;
3665
3728
 
3666
3729
  @media (pointer: coarse) {
3667
-
3668
3730
  &,
3669
3731
  * {
3670
3732
  user-select: none;
@@ -3724,14 +3786,14 @@ Lists meant to be used stand-alone or as part of Select elements
3724
3786
  padding: 0;
3725
3787
  }
3726
3788
 
3727
- &> :where(a, button, label) {
3789
+ & > :where(a, button, label) {
3728
3790
  gap: var(--size-2);
3729
3791
  min-block-size: var(--size-7);
3730
3792
  padding: var(--size-1) var(--size-2);
3731
3793
  }
3732
3794
 
3733
3795
  /* Checkbox / Radio */
3734
- &>label {
3796
+ & > label {
3735
3797
  .ui-end {
3736
3798
  padding-inline-end: 0.125rem;
3737
3799
  }
@@ -3766,7 +3828,7 @@ Lists meant to be used stand-alone or as part of Select elements
3766
3828
  :where(li, option) {
3767
3829
  padding-inline: 0;
3768
3830
 
3769
- &> :where(a, button, label) {
3831
+ & > :where(a, button, label) {
3770
3832
  padding-inline: 0;
3771
3833
  }
3772
3834
  }
@@ -3800,9 +3862,9 @@ Lists meant to be used stand-alone or as part of Select elements
3800
3862
  min-block-size: auto;
3801
3863
  padding: 0;
3802
3864
 
3803
- &[aria-selected="true"]> :where(a, button, label),
3865
+ &[aria-selected="true"] > :where(a, button, label),
3804
3866
  &[aria-selected="true"],
3805
- &:has(> [aria-current="page"])> :where(a, button, label) {
3867
+ &:has(> [aria-current="page"]) > :where(a, button, label) {
3806
3868
  background-color: var(--_bg-color-hover);
3807
3869
  }
3808
3870
  }
@@ -3837,9 +3899,9 @@ Lists meant to be used stand-alone or as part of Select elements
3837
3899
  }
3838
3900
  }
3839
3901
 
3840
- &>a,
3841
- &>button,
3842
- &>label {
3902
+ & > a,
3903
+ & > button,
3904
+ & > label {
3843
3905
  align-items: center;
3844
3906
  background-color: var(--_bg-color);
3845
3907
  color: inherit;
@@ -3866,7 +3928,7 @@ Lists meant to be used stand-alone or as part of Select elements
3866
3928
  }
3867
3929
 
3868
3930
  /* Checkbox / Radio / Switch */
3869
- &>label {
3931
+ & > label {
3870
3932
  &:where(.ui-checkbox, .ui-radio, .ui-switch) {
3871
3933
  display: flex;
3872
3934
  }
@@ -3917,7 +3979,7 @@ Lists meant to be used stand-alone or as part of Select elements
3917
3979
  font-weight: 400;
3918
3980
  }
3919
3981
 
3920
- p+p {
3982
+ p + p {
3921
3983
  color: var(--text-muted);
3922
3984
  font-size: var(--font-size-0);
3923
3985
  }
@@ -4034,7 +4096,8 @@ Lists meant to be used stand-alone or as part of Select elements
4034
4096
 
4035
4097
  &[open] {
4036
4098
  opacity: 1;
4037
- transition: display 0.2s allow-discrete,
4099
+ transition:
4100
+ display 0.2s allow-discrete,
4038
4101
  overlay 0.2s allow-discrete,
4039
4102
  opacity 0.2s var(--ease-out-1);
4040
4103
 
@@ -4061,179 +4124,178 @@ Lists meant to be used stand-alone or as part of Select elements
4061
4124
  }
4062
4125
 
4063
4126
  @layer components.root {
4064
- :where(dialog.ui-drawer) {
4065
- --_backdrop-bg-color: transparent;
4066
- --_backdrop-blur: blur(2px);
4067
- --_bg-color: var(--surface-default);
4068
- --_block-size: min(80vb, 650px);
4069
- --_border-color: var(--border-color);
4070
- --_border-width: var(--border-width);
4071
- --_color: var(--text-primary);
4072
- --_content-padding: var(--size-4);
4073
- --_footer-gap: var(--size-3);
4074
- --_footer-padding: var(--size-3);
4075
- --_header-font-size: var(--font-size-3);
4076
- --_header-padding: var(--size-3);
4077
- --_inline-size: min(375px, 100vi);
4078
- --_shadow: var(--shadow-2);
4079
- --_transition-duration: 0.2s;
4080
- --_transition-timing: var(--ease-out-3);
4081
-
4082
- background-color: var(--_bg-color);
4083
- border: none;
4084
- box-shadow: var(--_shadow);
4085
- color: var(--_color);
4086
- display: flex;
4087
- flex-direction: column;
4088
- margin: 0;
4089
- max-inline-size: 100%;
4090
- padding: 0;
4091
- position: fixed;
4092
- transition:
4093
- display var(--_transition-duration) allow-discrete,
4094
- overlay var(--_transition-duration) allow-discrete,
4095
- translate var(--_transition-duration) var(--_transition-timing);
4096
- z-index: 1000;
4097
-
4098
- &::backdrop {
4099
- backdrop-filter: var(--_backdrop-blur);
4100
- background-color: var(--_backdrop-bg-color);
4101
- opacity: 0;
4102
- transition:
4103
- display var(--_transition-duration) allow-discrete,
4104
- overlay var(--_transition-duration) allow-discrete,
4105
- opacity var(--_transition-duration) var(--_transition-timing);
4106
- }
4107
-
4108
- &.ui-backdrop-transparent {
4109
- --_backdrop-blur: none;
4110
- }
4111
-
4112
- .ui-header {
4113
- align-items: center;
4114
- border-block-end: var(--_border-width) solid var(--_border-color);
4115
- display: flex;
4116
- padding: var(--_header-padding);
4117
-
4118
- :where(h1, h2, h3, h4, h5, h6) {
4119
- font-size: var(--_header-font-size);
4120
- margin: 0;
4121
- }
4122
-
4123
- :where(.ui-icon-button) {
4124
- margin-inline-start: auto;
4125
- }
4126
- }
4127
-
4128
- .ui-content {
4129
- flex: 1;
4130
- overflow-y: auto;
4131
- padding: var(--_content-padding);
4132
- }
4133
-
4134
- .ui-footer {
4135
- border-block-start: var(--_border-width) solid var(--_border-color);
4136
- display: flex;
4137
- gap: var(--_footer-gap);
4138
- justify-content: end;
4139
- padding: var(--_footer-padding);
4140
- }
4141
-
4142
- &.ui-inline-start,
4143
- &.ui-inline-end {
4144
- block-size: 100dvb;
4145
- inline-size: var(--_inline-size);
4146
- inset-block: 0;
4147
- max-block-size: 100%;
4148
- }
4149
-
4150
- &.ui-inline-start {
4151
- border-inline-end: var(--_border-width) solid var(--_border-color);
4152
- inset-inline-end: auto;
4153
- inset-inline-start: 0;
4154
- translate: -100% 0;
4155
- }
4156
-
4157
- &.ui-inline-end {
4158
- border-inline-start: var(--_border-width) solid var(--_border-color);
4159
- inset-inline-end: 0;
4160
- inset-inline-start: auto;
4161
- translate: 100% 0;
4162
-
4163
- .ui-footer {
4164
- justify-content: start;
4165
- }
4166
- }
4167
-
4168
- &.ui-block-start,
4169
- &.ui-block-end {
4170
- block-size: var(--_block-size);
4171
- inline-size: 100dvi;
4172
- inset-inline: 0;
4173
- max-block-size: 80dvb;
4174
- }
4175
-
4176
- &.ui-block-start {
4177
- border-block-end: var(--_border-width) solid var(--_border-color);
4178
- inset-block-end: auto;
4179
- inset-block-start: 0;
4180
- translate: 0 -100%;
4181
- }
4182
-
4183
- &.ui-block-end {
4184
- border-block-start: var(--_border-width) solid var(--_border-color);
4185
- inset-block-end: 0;
4186
- inset-block-start: auto;
4187
- translate: 0 100%;
4188
- }
4189
-
4190
- &[open] {
4191
- translate: 0 0;
4192
-
4193
- &::backdrop {
4194
- opacity: 1;
4195
- }
4196
-
4197
- @starting-style {
4198
- &::backdrop {
4199
- opacity: 0;
4200
- }
4201
-
4202
- &.ui-inline-start {
4203
- translate: -100% 0;
4204
- }
4205
-
4206
- &.ui-inline-end {
4207
- translate: 100% 0;
4208
- }
4209
-
4210
- &.ui-block-start {
4211
- translate: 0 -100%;
4212
- }
4213
-
4214
- &.ui-block-end {
4215
- translate: 0 100%;
4216
- }
4217
- }
4218
- }
4219
- }
4220
-
4221
- /* Scroll-lock is provided by the shared `.ui-scroll-lock` utility in core/utils.css.
4127
+ :where(dialog.ui-drawer) {
4128
+ --_backdrop-bg-color: transparent;
4129
+ --_backdrop-blur: blur(2px);
4130
+ --_bg-color: var(--surface-default);
4131
+ --_block-size: min(80vb, 650px);
4132
+ --_border-color: var(--border-color);
4133
+ --_border-width: var(--border-width);
4134
+ --_color: var(--text-primary);
4135
+ --_content-padding: var(--size-4);
4136
+ --_footer-gap: var(--size-3);
4137
+ --_footer-padding: var(--size-3);
4138
+ --_header-font-size: var(--font-size-3);
4139
+ --_header-padding: var(--size-3);
4140
+ --_inline-size: min(375px, 100vi);
4141
+ --_shadow: var(--shadow-2);
4142
+ --_transition-duration: 0.2s;
4143
+ --_transition-timing: var(--ease-out-3);
4144
+
4145
+ background-color: var(--_bg-color);
4146
+ border: none;
4147
+ box-shadow: var(--_shadow);
4148
+ color: var(--_color);
4149
+ display: flex;
4150
+ flex-direction: column;
4151
+ margin: 0;
4152
+ max-inline-size: 100%;
4153
+ padding: 0;
4154
+ position: fixed;
4155
+ transition:
4156
+ display var(--_transition-duration) allow-discrete,
4157
+ overlay var(--_transition-duration) allow-discrete,
4158
+ translate var(--_transition-duration) var(--_transition-timing);
4159
+ z-index: 1000;
4160
+
4161
+ &::backdrop {
4162
+ backdrop-filter: var(--_backdrop-blur);
4163
+ background-color: var(--_backdrop-bg-color);
4164
+ opacity: 0;
4165
+ transition:
4166
+ display var(--_transition-duration) allow-discrete,
4167
+ overlay var(--_transition-duration) allow-discrete,
4168
+ opacity var(--_transition-duration) var(--_transition-timing);
4169
+ }
4170
+
4171
+ &.ui-backdrop-transparent {
4172
+ --_backdrop-blur: none;
4173
+ }
4174
+
4175
+ .ui-header {
4176
+ align-items: center;
4177
+ border-block-end: var(--_border-width) solid var(--_border-color);
4178
+ display: flex;
4179
+ padding: var(--_header-padding);
4180
+
4181
+ :where(h1, h2, h3, h4, h5, h6) {
4182
+ font-size: var(--_header-font-size);
4183
+ margin: 0;
4184
+ }
4185
+
4186
+ :where(.ui-icon-button) {
4187
+ margin-inline-start: auto;
4188
+ }
4189
+ }
4190
+
4191
+ .ui-content {
4192
+ flex: 1;
4193
+ overflow-y: auto;
4194
+ padding: var(--_content-padding);
4195
+ }
4196
+
4197
+ .ui-footer {
4198
+ border-block-start: var(--_border-width) solid var(--_border-color);
4199
+ display: flex;
4200
+ gap: var(--_footer-gap);
4201
+ justify-content: end;
4202
+ padding: var(--_footer-padding);
4203
+ }
4204
+
4205
+ &.ui-inline-start,
4206
+ &.ui-inline-end {
4207
+ block-size: 100dvb;
4208
+ inline-size: var(--_inline-size);
4209
+ inset-block: 0;
4210
+ max-block-size: 100%;
4211
+ }
4212
+
4213
+ &.ui-inline-start {
4214
+ border-inline-end: var(--_border-width) solid var(--_border-color);
4215
+ inset-inline-end: auto;
4216
+ inset-inline-start: 0;
4217
+ translate: -100% 0;
4218
+ }
4219
+
4220
+ &.ui-inline-end {
4221
+ border-inline-start: var(--_border-width) solid var(--_border-color);
4222
+ inset-inline-end: 0;
4223
+ inset-inline-start: auto;
4224
+ translate: 100% 0;
4225
+
4226
+ .ui-footer {
4227
+ justify-content: start;
4228
+ }
4229
+ }
4230
+
4231
+ &.ui-block-start,
4232
+ &.ui-block-end {
4233
+ block-size: var(--_block-size);
4234
+ inline-size: 100dvi;
4235
+ inset-inline: 0;
4236
+ max-block-size: 80dvb;
4237
+ }
4238
+
4239
+ &.ui-block-start {
4240
+ border-block-end: var(--_border-width) solid var(--_border-color);
4241
+ inset-block-end: auto;
4242
+ inset-block-start: 0;
4243
+ translate: 0 -100%;
4244
+ }
4245
+
4246
+ &.ui-block-end {
4247
+ border-block-start: var(--_border-width) solid var(--_border-color);
4248
+ inset-block-end: 0;
4249
+ inset-block-start: auto;
4250
+ translate: 0 100%;
4251
+ }
4252
+
4253
+ &[open] {
4254
+ translate: 0 0;
4255
+
4256
+ &::backdrop {
4257
+ opacity: 1;
4258
+ }
4259
+
4260
+ @starting-style {
4261
+ &::backdrop {
4262
+ opacity: 0;
4263
+ }
4264
+
4265
+ &.ui-inline-start {
4266
+ translate: -100% 0;
4267
+ }
4268
+
4269
+ &.ui-inline-end {
4270
+ translate: 100% 0;
4271
+ }
4272
+
4273
+ &.ui-block-start {
4274
+ translate: 0 -100%;
4275
+ }
4276
+
4277
+ &.ui-block-end {
4278
+ translate: 0 100%;
4279
+ }
4280
+ }
4281
+ }
4282
+ }
4283
+
4284
+ /* Scroll-lock is provided by the shared `.ui-scroll-lock` utility in core/utils.css.
4222
4285
  This carve-out re-enables page scrolling when a transparent-backdrop drawer is
4223
4286
  open on wide viewports (where the drawer doesn't visually cover the page). */
4224
- html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
4225
- overflow: unset;
4226
- overscroll-behavior: auto;
4227
-
4228
- @media (width < 500px) {
4229
- overflow: clip;
4230
- overscroll-behavior: contain;
4231
- }
4232
- }
4287
+ html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
4288
+ overflow: unset;
4289
+ overscroll-behavior: auto;
4290
+
4291
+ @media (width < 500px) {
4292
+ overflow: clip;
4293
+ overscroll-behavior: contain;
4294
+ }
4295
+ }
4233
4296
  }
4234
4297
 
4235
4298
  @layer components.extended {
4236
-
4237
4299
  /* Form */
4238
4300
  :where(.ui-form) {
4239
4301
  display: grid;
@@ -4305,21 +4367,21 @@ Lists meant to be used stand-alone or as part of Select elements
4305
4367
  /* Error / validation */
4306
4368
  &[data-invalid] {
4307
4369
  :where(.ui-end-text) {
4308
- color: var(--primary);
4370
+ color: var(--critical);
4309
4371
  }
4310
4372
 
4311
4373
  :where(.ui-checkbox, .ui-radio, .ui-switch) {
4312
- --palette-source: oklch(0.58 0.21 var(--hue-red));
4374
+ --primary: var(--critical);
4313
4375
 
4314
4376
  :where(.ui-end-text) {
4315
- color: var(--primary);
4377
+ color: var(--critical);
4316
4378
  }
4317
4379
  }
4318
4380
 
4319
4381
  :where(.ui-switch) {
4320
4382
  input {
4321
4383
  border-radius: var(--radius-round);
4322
- outline: 2px solid var(--primary);
4384
+ outline: 2px solid var(--critical);
4323
4385
  }
4324
4386
  }
4325
4387
  }
@@ -4347,7 +4409,9 @@ Lists meant to be used stand-alone or as part of Select elements
4347
4409
  gap: var(--size-4);
4348
4410
 
4349
4411
  /* If it only has checkboxes, radios, or switches */
4350
- &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(:has(> :not(.ui-checkbox, .ui-radio, .ui-switch))) {
4412
+ &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(
4413
+ :has(> :not(.ui-checkbox, .ui-radio, .ui-switch))
4414
+ ) {
4351
4415
  gap: var(--size-2);
4352
4416
  }
4353
4417
 
@@ -4363,7 +4427,7 @@ Lists meant to be used stand-alone or as part of Select elements
4363
4427
  }
4364
4428
  }
4365
4429
 
4366
- &+& {
4430
+ & + & {
4367
4431
  margin-block-start: var(--size-5);
4368
4432
  }
4369
4433
 
@@ -4380,7 +4444,6 @@ Lists meant to be used stand-alone or as part of Select elements
4380
4444
  }
4381
4445
 
4382
4446
  @layer components.extended {
4383
-
4384
4447
  /*
4385
4448
  - Common styling for input, textarea and select
4386
4449
  - Form related styles such as: label, supporting text, error handling
@@ -4487,7 +4550,6 @@ Lists meant to be used stand-alone or as part of Select elements
4487
4550
 
4488
4551
  /* Textarea - keep affix aligned with the first line */
4489
4552
  &.ui-textarea .ui-field {
4490
-
4491
4553
  .ui-prefix,
4492
4554
  .ui-suffix {
4493
4555
  align-self: start;
@@ -4534,7 +4596,6 @@ Lists meant to be used stand-alone or as part of Select elements
4534
4596
  /* Variants */
4535
4597
  &.ui-filled {
4536
4598
  input {
4537
-
4538
4599
  &::-webkit-file-upload-button,
4539
4600
  &::file-selector-button {
4540
4601
  background-color: var(--surface-default);
@@ -4573,7 +4634,6 @@ Lists meant to be used stand-alone or as part of Select elements
4573
4634
  .ui-label {
4574
4635
  /* Make sure chevron is visible */
4575
4636
  inline-size: calc(100% - var(--size-6));
4576
-
4577
4637
  }
4578
4638
  }
4579
4639
 
@@ -4584,7 +4644,8 @@ Lists meant to be used stand-alone or as part of Select elements
4584
4644
 
4585
4645
  button {
4586
4646
  outline: 0;
4587
- padding: var(--_field-padding-block) var(--size-8) var(--_field-padding-block) var(--_field-padding-inline);
4647
+ padding: var(--_field-padding-block) var(--size-8)
4648
+ var(--_field-padding-block) var(--_field-padding-inline);
4588
4649
  }
4589
4650
  }
4590
4651
  }
@@ -4592,7 +4653,8 @@ Lists meant to be used stand-alone or as part of Select elements
4592
4653
  /* Non-customizable Select */
4593
4654
  &:has(select):not(:has(button)) {
4594
4655
  select {
4595
- padding: var(--_field-padding-block) var(--size-8) var(--_field-padding-block) var(--_field-padding-inline);
4656
+ padding: var(--_field-padding-block) var(--size-8)
4657
+ var(--_field-padding-block) var(--_field-padding-inline);
4596
4658
  }
4597
4659
  }
4598
4660
 
@@ -4690,11 +4752,12 @@ Lists meant to be used stand-alone or as part of Select elements
4690
4752
  --_bg-color: var(--surface-tonal);
4691
4753
 
4692
4754
  &:not(:has([disabled], :has(input[type="color"]))) {
4693
-
4694
4755
  /* Hover */
4695
4756
  &:hover {
4696
- --_bg-color: light-dark(oklch(from var(--surface-tonal) calc(l * 0.93) c h),
4697
- oklch(from var(--surface-tonal) calc(l * 1.1) c h));
4757
+ --_bg-color: light-dark(
4758
+ oklch(from var(--surface-tonal) calc(l * 0.93) c h),
4759
+ oklch(from var(--surface-tonal) calc(l * 1.1) c h)
4760
+ );
4698
4761
  }
4699
4762
  }
4700
4763
  }
@@ -4785,7 +4848,7 @@ Lists meant to be used stand-alone or as part of Select elements
4785
4848
  .ui-field:has(textarea) {
4786
4849
  grid-row: 1 / span 3;
4787
4850
 
4788
- +.ui-end-text {
4851
+ + .ui-end-text {
4789
4852
  grid-row: 4;
4790
4853
  }
4791
4854
  }
@@ -4870,8 +4933,11 @@ Lists meant to be used stand-alone or as part of Select elements
4870
4933
  }
4871
4934
 
4872
4935
  @media (prefers-reduced-motion: no-preference) {
4873
- transition: display 0.2s allow-discrete, opacity 0.2s var(--ease-3),
4874
- overlay 0.2s allow-discrete, scale 0.2s var(--ease-3);
4936
+ transition:
4937
+ display 0.2s allow-discrete,
4938
+ opacity 0.2s var(--ease-3),
4939
+ overlay 0.2s allow-discrete,
4940
+ scale 0.2s var(--ease-3);
4875
4941
  }
4876
4942
  }
4877
4943
 
@@ -4905,8 +4971,10 @@ Lists meant to be used stand-alone or as part of Select elements
4905
4971
  [role="group"] {
4906
4972
  label {
4907
4973
  background-color: light-dark(var(--gray-3), var(--gray-13));
4908
- color: light-dark(oklch(from var(--text-primary) calc(l * 0.75) c h),
4909
- oklch(from var(--text-primary) calc(l * 1.25) c h));
4974
+ color: light-dark(
4975
+ oklch(from var(--text-primary) calc(l * 0.75) c h),
4976
+ oklch(from var(--text-primary) calc(l * 1.25) c h)
4977
+ );
4910
4978
  font-weight: 500;
4911
4979
  overflow: hidden;
4912
4980
  padding-inline: var(--size-2);
@@ -4929,7 +4997,6 @@ Lists meant to be used stand-alone or as part of Select elements
4929
4997
 
4930
4998
  /* Option */
4931
4999
  option {
4932
-
4933
5000
  /* Checkmark */
4934
5001
  /* TODO - checkmark should be the final version of the checkmark API. Follow the development of this and remove redundant psuedo stuff. */
4935
5002
  &::check {
@@ -4952,7 +5019,6 @@ Lists meant to be used stand-alone or as part of Select elements
4952
5019
  }
4953
5020
 
4954
5021
  :where(.ui-select:has(select)) {
4955
-
4956
5022
  /* Size */
4957
5023
  &.ui-small {
4958
5024
  button {
@@ -5001,8 +5067,10 @@ Lists meant to be used stand-alone or as part of Select elements
5001
5067
  }
5002
5068
 
5003
5069
  @layer components.extended {
5004
-
5005
- :where(.ui-text-field:has( :where(input[type="date"],
5070
+ :where(
5071
+ .ui-text-field:has(
5072
+ :where(
5073
+ input[type="date"],
5006
5074
  input[type="datetime-local"],
5007
5075
  input[type="email"],
5008
5076
  input[type="month"],
@@ -5013,8 +5081,10 @@ Lists meant to be used stand-alone or as part of Select elements
5013
5081
  input[type="text"],
5014
5082
  input[type="time"],
5015
5083
  input[type="url"],
5016
- input[type="week"]))) {
5017
-
5084
+ input[type="week"]
5085
+ )
5086
+ )
5087
+ ) {
5018
5088
  /* Sizes */
5019
5089
  &.ui-small {
5020
5090
  input {
@@ -5070,7 +5140,9 @@ Lists meant to be used stand-alone or as part of Select elements
5070
5140
  textarea {
5071
5141
  block-size: auto;
5072
5142
  field-sizing: content;
5073
- min-block-size: calc(var(--_field-padding-block) * 2 + (var(--border-width) * 2) + 3lh);
5143
+ min-block-size: calc(
5144
+ var(--_field-padding-block) * 2 + (var(--border-width) * 2) + 3lh
5145
+ );
5074
5146
  resize: vertical;
5075
5147
  }
5076
5148
 
@@ -5091,70 +5163,73 @@ Lists meant to be used stand-alone or as part of Select elements
5091
5163
  }
5092
5164
 
5093
5165
  @layer components.extended {
5094
- :where(.ui-tooltip) {
5095
- --_tooltip-bg: light-dark(var(--gray-13), var(--gray-3));
5096
- --_tooltip-color: light-dark(var(--gray-1), var(--gray-15));
5097
- --_tooltip-offset: var(--size-2);
5098
-
5099
- &>.ui-anchor-floating {
5100
- background-color: var(--_tooltip-bg);
5101
- border-radius: var(--radius-2);
5102
- color: var(--_tooltip-color);
5103
- font-size: var(--font-size-05);
5104
- line-height: 1.3;
5105
- margin: var(--_tooltip-offset);
5106
- max-inline-size: 240px;
5107
- /* UA sets overflow: auto on [popover], which clips the arrow. */
5108
- overflow: visible;
5109
- padding-block: var(--size-1);
5110
- padding-inline: var(--size-2);
5111
- position-area: var(--anchor-position-area, block-start);
5112
- position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
5113
- position-visibility: anchors-visible;
5114
- text-align: center;
5115
- text-wrap: pretty;
5116
- }
5117
-
5118
- /* Optional arrow pointing from the tooltip toward the trigger.
5166
+ :where(.ui-tooltip) {
5167
+ --_tooltip-bg: light-dark(var(--gray-13), var(--gray-3));
5168
+ --_tooltip-color: light-dark(var(--gray-1), var(--gray-15));
5169
+ --_tooltip-offset: var(--size-2);
5170
+
5171
+ & > .ui-anchor-floating {
5172
+ background-color: var(--_tooltip-bg);
5173
+ border-radius: var(--radius-2);
5174
+ color: var(--_tooltip-color);
5175
+ font-size: var(--font-size-05);
5176
+ line-height: 1.3;
5177
+ margin: var(--_tooltip-offset);
5178
+ max-inline-size: 240px;
5179
+ /* UA sets overflow: auto on [popover], which clips the arrow. */
5180
+ overflow: visible;
5181
+ padding-block: var(--size-1);
5182
+ padding-inline: var(--size-2);
5183
+ position-area: var(--anchor-position-area, block-start);
5184
+ position-try-fallbacks:
5185
+ flip-block,
5186
+ flip-inline,
5187
+ flip-block flip-inline;
5188
+ position-visibility: anchors-visible;
5189
+ text-align: center;
5190
+ text-wrap: pretty;
5191
+ }
5192
+
5193
+ /* Optional arrow pointing from the tooltip toward the trigger.
5119
5194
  Anchored to the same --anchor so it flips together with the
5120
5195
  tooltip when position-try-fallbacks kicks in. */
5121
- &.ui-with-arrow {
5122
- --_arrow-size: var(--size-2);
5123
-
5124
- &>.ui-anchor-floating {
5125
- /* Reserve space so the arrow doesn't overlap the trigger. */
5126
- --_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
5127
- }
5128
-
5129
- &>.ui-anchor-floating::before {
5130
- background-color: var(--_tooltip-bg);
5131
- block-size: var(--_arrow-size);
5132
- content: "";
5133
- inline-size: var(--_arrow-size);
5134
- inset-block-end: calc(var(--_arrow-size) / -2);
5135
- inset-inline-start: 50%;
5136
- position: absolute;
5137
- rotate: 45deg;
5138
- translate: -50% 0;
5139
- }
5140
- }
5141
-
5142
- /* Fade */
5143
- &>.ui-anchor-floating[popover] {
5144
- opacity: 0;
5145
- transition:
5146
- display 0.15s allow-discrete,
5147
- opacity 0.15s var(--ease-out-1),
5148
- overlay 0.15s allow-discrete;
5149
-
5150
- &:popover-open {
5151
- opacity: 1;
5152
-
5153
- @starting-style {
5154
- opacity: 0;
5155
- }
5156
- }
5157
- }
5158
- }
5196
+ &.ui-with-arrow {
5197
+ --_arrow-size: var(--size-2);
5198
+
5199
+ & > .ui-anchor-floating {
5200
+ /* Reserve space so the arrow doesn't overlap the trigger. */
5201
+ --_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
5202
+ }
5203
+
5204
+ & > .ui-anchor-floating::before {
5205
+ background-color: var(--_tooltip-bg);
5206
+ block-size: var(--_arrow-size);
5207
+ content: "";
5208
+ inline-size: var(--_arrow-size);
5209
+ inset-block-end: calc(var(--_arrow-size) / -2);
5210
+ inset-inline-start: 50%;
5211
+ position: absolute;
5212
+ rotate: 45deg;
5213
+ translate: -50% 0;
5214
+ }
5215
+ }
5216
+
5217
+ /* Fade */
5218
+ & > .ui-anchor-floating[popover] {
5219
+ opacity: 0;
5220
+ transition:
5221
+ display 0.15s allow-discrete,
5222
+ opacity 0.15s var(--ease-out-1),
5223
+ overlay 0.15s allow-discrete;
5224
+
5225
+ &:popover-open {
5226
+ opacity: 1;
5227
+
5228
+ @starting-style {
5229
+ opacity: 0;
5230
+ }
5231
+ }
5232
+ }
5233
+ }
5159
5234
  }
5160
5235
  /*# sourceMappingURL=opui.components.css.map */