@db-ux/core-foundations 4.2.2-css-selectors-hopefully-final-try-fingers-crossed-0e54e19 → 4.2.3

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 (15) hide show
  1. package/CHANGELOG.md +8 -1
  2. package/build/styles/absolute.css +54 -28
  3. package/build/styles/colors/_default-color-mappings.scss +2 -1
  4. package/build/styles/defaults/_default-container-variables.scss +2 -1
  5. package/build/styles/defaults/_default-variables.scss +2 -1
  6. package/build/styles/defaults/default-required.css +1 -1
  7. package/build/styles/defaults/default-required.scss +4 -2
  8. package/build/styles/defaults/default-root.css +2 -2
  9. package/build/styles/defaults/default-root.scss +2 -1
  10. package/build/styles/helpers/_functions.scss +2 -2
  11. package/build/styles/index.css +54 -28
  12. package/build/styles/relative.css +54 -28
  13. package/build/styles/rollup.css +54 -28
  14. package/build/styles/webpack.css +54 -28
  15. package/package.json +1 -1
package/build/styles/defaults/default-root.scss CHANGED
@@ -3,7 +3,8 @@
3
3
  @forward "../density";
4
4
 
5
5
  // Setup default styles for
6
- :is(:root, :host) {
6
+ :root,
7
+ :host {
7
8
  @extend %db-neutral-bg-basic-level-1;
8
9
  @extend %db-density-regular;
9
10
  }
package/build/styles/helpers/_functions.scss CHANGED
@@ -3,11 +3,11 @@
3
3
  @use "clearfix";
4
4
 
5
5
  @function px-to-rem($pxValue) {
6
- @return #{$pxValue * 0.0625}rem;
6
+ @return ($pxValue * 0.0625) * 1rem;
7
7
  }
8
8
 
9
9
  @function px-to-em($pxValue) {
10
- @return #{$pxValue * 0.0625}em;
10
+ @return ($pxValue * 0.0625) * 1em;
11
11
  }
12
12
 
13
13
  $cursor-pointer: var(--db-overwrite-cursor, pointer);
package/build/styles/index.css CHANGED
@@ -1,11 +1,13 @@
1
1
  @charset "UTF-8";
2
2
  /* Use this file if you want the default color and density in your project */
3
3
  /* Variants for adaptive components like input, select, notification, ... */
4
- blockquote:not([class]), :is(:root, :host) {
4
+ blockquote:not([class]), :root,
5
+ :host {
5
6
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
6
7
  }
7
8
  @layer variables {
8
- blockquote:not([class]), :is(:root, :host) {
9
+ blockquote:not([class]), :root,
10
+ :host {
9
11
  --db-adaptive-bg-basic-level-1-default: var(
10
12
  --db-neutral-bg-basic-level-1-default
11
13
  );
@@ -156,11 +158,12 @@ blockquote:not([class]), :is(:root, :host) {
156
158
  }
157
159
  }
158
160
 
159
- :is(:root, :host) {
161
+ :root,
162
+ :host {
160
163
  background-color: var(--db-neutral-bg-basic-level-1-default);
161
164
  color: var(--db-neutral-on-bg-basic-emphasis-100-default);
162
165
  }
163
- :is(:root, :host)::before, :is(:root, :host)::after {
166
+ :root::before, :root::after {
164
167
  --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-100-default);
165
168
  }
166
169
 
@@ -280,16 +283,19 @@ select,
280
283
 
281
284
  @layer variables {}
282
285
 
283
- :is(:root, :host) {
286
+ :root,
287
+ :host {
284
288
  font: var(--db-type-body-md);
285
289
  }
286
290
 
287
- :is(:root, :host) {
291
+ :root,
292
+ :host {
288
293
  font: var(--db-type-body-md);
289
294
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
290
295
  }
291
296
  @layer variables {
292
- :is(:root, :host) {
297
+ :root,
298
+ :host {
293
299
  /* Those variables are only for components to calculate heights and change icons */
294
300
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
295
301
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
@@ -342,11 +348,13 @@ code {
342
348
  */
343
349
  @layer variables {}
344
350
 
345
- :is(:root, :host) {
351
+ :root,
352
+ :host {
346
353
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
347
354
  }
348
355
  @layer variables {
349
- :is(:root, :host) {
356
+ :root,
357
+ :host {
350
358
  --db-sizing-3xs: var(--db-sizing-regular-3xs);
351
359
  --db-sizing-2xs: var(--db-sizing-regular-2xs);
352
360
  --db-sizing-xs: var(--db-sizing-regular-xs);
@@ -373,7 +381,8 @@ code {
373
381
  /* stylelint-disable-next-line at-rule-empty-line-before */
374
382
  }
375
383
  @media screen and (width <= 48em) {
376
- :is(:root, :host) {
384
+ :root,
385
+ :host {
377
386
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
378
387
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-mobile-2xs);
379
388
  --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-mobile-xs);
@@ -386,7 +395,8 @@ code {
386
395
  }
387
396
  }
388
397
  @media screen and (48em < width <= 64em) {
389
- :is(:root, :host) {
398
+ :root,
399
+ :host {
390
400
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
391
401
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-tablet-2xs);
392
402
  --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-tablet-xs);
@@ -399,7 +409,8 @@ code {
399
409
  }
400
410
  }
401
411
  @media screen and (64em < width) {
402
- :is(:root, :host) {
412
+ :root,
413
+ :host {
403
414
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-desktop-3xs);
404
415
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-desktop-2xs);
405
416
  --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-desktop-xs);
@@ -419,11 +430,13 @@ code {
419
430
 
420
431
  @layer variables {}
421
432
 
422
- :is(:root, :host) {
433
+ :root,
434
+ :host {
423
435
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
424
436
  }
425
437
  @layer variables {
426
- :is(:root, :host) {
438
+ :root,
439
+ :host {
427
440
  /* stylelint-disable-next-line media-query-no-invalid */
428
441
  /* stylelint-disable-next-line at-rule-empty-line-before */
429
442
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -432,7 +445,8 @@ code {
432
445
  /* stylelint-disable-next-line at-rule-empty-line-before */
433
446
  }
434
447
  @media screen and (width <= 48em) {
435
- :is(:root, :host) {
448
+ :root,
449
+ :host {
436
450
  --db-type-headline-3xs: var(--db-typography-regular-mobile-headline-3xs);
437
451
  --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-headline-3xs);
438
452
  --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-headline-3xs);
@@ -463,7 +477,8 @@ code {
463
477
  }
464
478
  }
465
479
  @media screen and (48em < width <= 64em) {
466
- :is(:root, :host) {
480
+ :root,
481
+ :host {
467
482
  --db-type-headline-3xs: var(--db-typography-regular-tablet-headline-3xs);
468
483
  --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-headline-3xs);
469
484
  --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-headline-3xs);
@@ -494,7 +509,8 @@ code {
494
509
  }
495
510
  }
496
511
  @media screen and (64em < width) {
497
- :is(:root, :host) {
512
+ :root,
513
+ :host {
498
514
  --db-type-headline-3xs: var(--db-typography-regular-desktop-headline-3xs);
499
515
  --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-headline-3xs);
500
516
  --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-headline-3xs);
@@ -526,11 +542,13 @@ code {
526
542
  }
527
543
  }
528
544
 
529
- :is(:root, :host) {
545
+ :root,
546
+ :host {
530
547
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
531
548
  }
532
549
  @layer variables {
533
- :is(:root, :host) {
550
+ :root,
551
+ :host {
534
552
  /* stylelint-disable-next-line media-query-no-invalid */
535
553
  /* stylelint-disable-next-line at-rule-empty-line-before */
536
554
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -539,7 +557,8 @@ code {
539
557
  /* stylelint-disable-next-line at-rule-empty-line-before */
540
558
  }
541
559
  @media screen and (width <= 48em) {
542
- :is(:root, :host) {
560
+ :root,
561
+ :host {
543
562
  --db-type-body-3xs: var(--db-typography-regular-mobile-body-3xs);
544
563
  --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
545
564
  --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
@@ -570,7 +589,8 @@ code {
570
589
  }
571
590
  }
572
591
  @media screen and (48em < width <= 64em) {
573
- :is(:root, :host) {
592
+ :root,
593
+ :host {
574
594
  --db-type-body-3xs: var(--db-typography-regular-tablet-body-3xs);
575
595
  --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-body-3xs);
576
596
  --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-body-3xs);
@@ -601,7 +621,8 @@ code {
601
621
  }
602
622
  }
603
623
  @media screen and (64em < width) {
604
- :is(:root, :host) {
624
+ :root,
625
+ :host {
605
626
  --db-type-body-3xs: var(--db-typography-regular-desktop-body-3xs);
606
627
  --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-body-3xs);
607
628
  --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-body-3xs);
@@ -964,7 +985,8 @@ blockquote:not([class]) {
964
985
 
965
986
  /* Required styles to normalize default css */
966
987
  @layer variables {
967
- :is(:root, :host) {
988
+ :root,
989
+ :host {
968
990
  --db-neutral-origin-default: light-dark(
969
991
  var(--db-neutral-origin-light-default),
970
992
  var(--db-neutral-origin-dark-default)
@@ -4683,25 +4705,29 @@ blockquote:not([class]) {
4683
4705
  }
4684
4706
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
4685
4707
  @layer variables {
4686
- :is(:root, :host) {
4708
+ :root,
4709
+ :host {
4687
4710
  /* COLORS */
4688
4711
  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
4689
4712
  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
4690
4713
  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K");
4691
4714
  }
4692
4715
  @media (prefers-color-scheme: dark) {
4693
- :is(:root, :host) {
4716
+ :root,
4717
+ :host {
4694
4718
  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
4695
4719
  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
4696
4720
  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=");
4697
4721
  }
4698
4722
  }
4699
- :is(:root, :host) [data-mode=dark] {
4723
+ :root [data-mode=dark],
4724
+ :host [data-mode=dark] {
4700
4725
  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
4701
4726
  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
4702
4727
  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=");
4703
4728
  }
4704
- :is(:root, :host) [data-mode=light] {
4729
+ :root [data-mode=light],
4730
+ :host [data-mode=light] {
4705
4731
  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
4706
4732
  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
4707
4733
  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K");
@@ -4711,7 +4737,7 @@ blockquote:not([class]) {
4711
4737
  color-scheme: var(--db-color-scheme, light dark);
4712
4738
  }
4713
4739
 
4714
- head:has([name=color-scheme][content="light dark"]) + body {
4740
+ head:has([name=color-scheme][content*=light][content*=dark]) + body {
4715
4741
  --db-color-scheme: light dark;
4716
4742
  }
4717
4743
  head:has([name=color-scheme][content=light]) + body {
package/build/styles/relative.css CHANGED
@@ -52,11 +52,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
52
52
  /* Screen sizes */
53
53
  /* Container sizes */
54
54
  /* Variants for adaptive components like input, select, notification, ... */
55
- blockquote:not([class]), [data-mode], :is(:root, :host) {
55
+ blockquote:not([class]), [data-mode], :root,
56
+ :host {
56
57
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
57
58
  }
58
59
  @layer variables {
59
- blockquote:not([class]), [data-mode], :is(:root, :host) {
60
+ blockquote:not([class]), [data-mode], :root,
61
+ :host {
60
62
  --db-adaptive-bg-basic-level-1-default: var(
61
63
  --db-neutral-bg-basic-level-1-default
62
64
  );
@@ -207,11 +209,12 @@ blockquote:not([class]), [data-mode], :is(:root, :host) {
207
209
  }
208
210
  }
209
211
 
210
- [data-mode], :is(:root, :host) {
212
+ [data-mode], :root,
213
+ :host {
211
214
  background-color: var(--db-neutral-bg-basic-level-1-default);
212
215
  color: var(--db-neutral-on-bg-basic-emphasis-100-default);
213
216
  }
214
- [data-mode]::before, :is(:root, :host)::before, [data-mode]::after, :is(:root, :host)::after {
217
+ [data-mode]::before, :root::before, [data-mode]::after, :root::after {
215
218
  --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-100-default);
216
219
  }
217
220
 
@@ -6052,16 +6055,19 @@ html::after {
6052
6055
 
6053
6056
  @layer variables {}
6054
6057
 
6055
- :is(:root, :host) {
6058
+ :root,
6059
+ :host {
6056
6060
  font: var(--db-type-body-md);
6057
6061
  }
6058
6062
 
6059
- :is(:root, :host) {
6063
+ :root,
6064
+ :host {
6060
6065
  font: var(--db-type-body-md);
6061
6066
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
6062
6067
  }
6063
6068
  @layer variables {
6064
- :is(:root, :host) {
6069
+ :root,
6070
+ :host {
6065
6071
  /* Those variables are only for components to calculate heights and change icons */
6066
6072
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
6067
6073
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
@@ -6114,11 +6120,13 @@ code {
6114
6120
  */
6115
6121
  @layer variables {}
6116
6122
 
6117
- :is(:root, :host) {
6123
+ :root,
6124
+ :host {
6118
6125
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
6119
6126
  }
6120
6127
  @layer variables {
6121
- :is(:root, :host) {
6128
+ :root,
6129
+ :host {
6122
6130
  --db-sizing-3xs: var(--db-sizing-regular-3xs);
6123
6131
  --db-sizing-2xs: var(--db-sizing-regular-2xs);
6124
6132
  --db-sizing-xs: var(--db-sizing-regular-xs);
@@ -6145,7 +6153,8 @@ code {
6145
6153
  /* stylelint-disable-next-line at-rule-empty-line-before */
6146
6154
  }
6147
6155
  @media screen and (width <= 48em) {
6148
- :is(:root, :host) {
6156
+ :root,
6157
+ :host {
6149
6158
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
6150
6159
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-mobile-2xs);
6151
6160
  --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-mobile-xs);
@@ -6158,7 +6167,8 @@ code {
6158
6167
  }
6159
6168
  }
6160
6169
  @media screen and (48em < width <= 64em) {
6161
- :is(:root, :host) {
6170
+ :root,
6171
+ :host {
6162
6172
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
6163
6173
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-tablet-2xs);
6164
6174
  --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-tablet-xs);
@@ -6171,7 +6181,8 @@ code {
6171
6181
  }
6172
6182
  }
6173
6183
  @media screen and (64em < width) {
6174
- :is(:root, :host) {
6184
+ :root,
6185
+ :host {
6175
6186
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-desktop-3xs);
6176
6187
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-desktop-2xs);
6177
6188
  --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-desktop-xs);
@@ -6191,11 +6202,13 @@ code {
6191
6202
 
6192
6203
  @layer variables {}
6193
6204
 
6194
- :is(:root, :host) {
6205
+ :root,
6206
+ :host {
6195
6207
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
6196
6208
  }
6197
6209
  @layer variables {
6198
- :is(:root, :host) {
6210
+ :root,
6211
+ :host {
6199
6212
  /* stylelint-disable-next-line media-query-no-invalid */
6200
6213
  /* stylelint-disable-next-line at-rule-empty-line-before */
6201
6214
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -6204,7 +6217,8 @@ code {
6204
6217
  /* stylelint-disable-next-line at-rule-empty-line-before */
6205
6218
  }
6206
6219
  @media screen and (width <= 48em) {
6207
- :is(:root, :host) {
6220
+ :root,
6221
+ :host {
6208
6222
  --db-type-headline-3xs: var(--db-typography-regular-mobile-headline-3xs);
6209
6223
  --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-headline-3xs);
6210
6224
  --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-headline-3xs);
@@ -6235,7 +6249,8 @@ code {
6235
6249
  }
6236
6250
  }
6237
6251
  @media screen and (48em < width <= 64em) {
6238
- :is(:root, :host) {
6252
+ :root,
6253
+ :host {
6239
6254
  --db-type-headline-3xs: var(--db-typography-regular-tablet-headline-3xs);
6240
6255
  --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-headline-3xs);
6241
6256
  --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-headline-3xs);
@@ -6266,7 +6281,8 @@ code {
6266
6281
  }
6267
6282
  }
6268
6283
  @media screen and (64em < width) {
6269
- :is(:root, :host) {
6284
+ :root,
6285
+ :host {
6270
6286
  --db-type-headline-3xs: var(--db-typography-regular-desktop-headline-3xs);
6271
6287
  --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-headline-3xs);
6272
6288
  --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-headline-3xs);
@@ -6298,11 +6314,13 @@ code {
6298
6314
  }
6299
6315
  }
6300
6316
 
6301
- :is(:root, :host) {
6317
+ :root,
6318
+ :host {
6302
6319
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
6303
6320
  }
6304
6321
  @layer variables {
6305
- :is(:root, :host) {
6322
+ :root,
6323
+ :host {
6306
6324
  /* stylelint-disable-next-line media-query-no-invalid */
6307
6325
  /* stylelint-disable-next-line at-rule-empty-line-before */
6308
6326
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -6311,7 +6329,8 @@ code {
6311
6329
  /* stylelint-disable-next-line at-rule-empty-line-before */
6312
6330
  }
6313
6331
  @media screen and (width <= 48em) {
6314
- :is(:root, :host) {
6332
+ :root,
6333
+ :host {
6315
6334
  --db-type-body-3xs: var(--db-typography-regular-mobile-body-3xs);
6316
6335
  --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
6317
6336
  --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
@@ -6342,7 +6361,8 @@ code {
6342
6361
  }
6343
6362
  }
6344
6363
  @media screen and (48em < width <= 64em) {
6345
- :is(:root, :host) {
6364
+ :root,
6365
+ :host {
6346
6366
  --db-type-body-3xs: var(--db-typography-regular-tablet-body-3xs);
6347
6367
  --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-body-3xs);
6348
6368
  --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-body-3xs);
@@ -6373,7 +6393,8 @@ code {
6373
6393
  }
6374
6394
  }
6375
6395
  @media screen and (64em < width) {
6376
- :is(:root, :host) {
6396
+ :root,
6397
+ :host {
6377
6398
  --db-type-body-3xs: var(--db-typography-regular-desktop-body-3xs);
6378
6399
  --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-body-3xs);
6379
6400
  --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-body-3xs);
@@ -6692,7 +6713,8 @@ blockquote:not([class]) {
6692
6713
 
6693
6714
  /* Required styles to normalize default css */
6694
6715
  @layer variables {
6695
- :is(:root, :host) {
6716
+ :root,
6717
+ :host {
6696
6718
  --db-neutral-origin-default: light-dark(
6697
6719
  var(--db-neutral-origin-light-default),
6698
6720
  var(--db-neutral-origin-dark-default)
@@ -10411,25 +10433,29 @@ blockquote:not([class]) {
10411
10433
  }
10412
10434
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
10413
10435
  @layer variables {
10414
- :is(:root, :host) {
10436
+ :root,
10437
+ :host {
10415
10438
  /* COLORS */
10416
10439
  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
10417
10440
  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
10418
10441
  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K");
10419
10442
  }
10420
10443
  @media (prefers-color-scheme: dark) {
10421
- :is(:root, :host) {
10444
+ :root,
10445
+ :host {
10422
10446
  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
10423
10447
  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
10424
10448
  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=");
10425
10449
  }
10426
10450
  }
10427
- :is(:root, :host) [data-mode=dark] {
10451
+ :root [data-mode=dark],
10452
+ :host [data-mode=dark] {
10428
10453
  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
10429
10454
  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
10430
10455
  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=");
10431
10456
  }
10432
- :is(:root, :host) [data-mode=light] {
10457
+ :root [data-mode=light],
10458
+ :host [data-mode=light] {
10433
10459
  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
10434
10460
  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
10435
10461
  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K");
@@ -10439,7 +10465,7 @@ blockquote:not([class]) {
10439
10465
  color-scheme: var(--db-color-scheme, light dark);
10440
10466
  }
10441
10467
 
10442
- head:has([name=color-scheme][content="light dark"]) + body {
10468
+ head:has([name=color-scheme][content*=light][content*=dark]) + body {
10443
10469
  --db-color-scheme: light dark;
10444
10470
  }
10445
10471
  head:has([name=color-scheme][content=light]) + body {