@db-ux/core-components 2.0.8 → 2.0.10-popover-d7e8b9a

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 (51) hide show
  1. package/build/components/accordion/accordion.css +4 -0
  2. package/build/components/accordion-item/accordion-item.css +30 -31
  3. package/build/components/accordion-item/accordion-item.scss +35 -39
  4. package/build/components/badge/badge.css +4 -0
  5. package/build/components/brand/brand.css +4 -0
  6. package/build/components/button/button.css +4 -0
  7. package/build/components/card/card.css +4 -0
  8. package/build/components/checkbox/checkbox.css +33 -12
  9. package/build/components/custom-select/custom-select.css +75 -134
  10. package/build/components/custom-select/custom-select.scss +0 -49
  11. package/build/components/custom-select-dropdown/custom-select-dropdown.css +4 -0
  12. package/build/components/custom-select-form-field/custom-select-form-field.css +4 -0
  13. package/build/components/custom-select-list/custom-select-list.css +4 -153
  14. package/build/components/custom-select-list/custom-select-list.scss +0 -3
  15. package/build/components/custom-select-list-item/custom-select-list-item.css +7 -21
  16. package/build/components/custom-select-list-item/custom-select-list-item.scss +5 -9
  17. package/build/components/divider/divider.css +4 -0
  18. package/build/components/drawer/drawer.css +4 -0
  19. package/build/components/header/header.css +4 -0
  20. package/build/components/icon/icon.css +4 -0
  21. package/build/components/infotext/infotext.css +4 -0
  22. package/build/components/input/input.css +75 -21
  23. package/build/components/link/link.css +4 -0
  24. package/build/components/navigation/navigation.css +4 -0
  25. package/build/components/navigation-item/navigation-item.css +4 -0
  26. package/build/components/notification/notification.css +4 -0
  27. package/build/components/popover/popover.css +83 -82
  28. package/build/components/popover/popover.scss +0 -1
  29. package/build/components/radio/radio.css +4 -0
  30. package/build/components/section/section.css +4 -0
  31. package/build/components/select/select.css +75 -21
  32. package/build/components/stack/stack-web-component.css +4 -0
  33. package/build/components/stack/stack.css +4 -0
  34. package/build/components/switch/switch.css +4 -0
  35. package/build/components/tab-item/tab-item.css +4 -0
  36. package/build/components/tab-list/tab-list.css +4 -0
  37. package/build/components/tabs/tabs.css +4 -0
  38. package/build/components/tag/tag.css +4 -0
  39. package/build/components/textarea/textarea.css +67 -19
  40. package/build/components/tooltip/tooltip.css +92 -90
  41. package/build/components/tooltip/tooltip.scss +14 -14
  42. package/build/styles/absolute.css +197 -13
  43. package/build/styles/dialog-init.css +1 -1
  44. package/build/styles/index.css +12 -12
  45. package/build/styles/internal/_form-components.scss +8 -3
  46. package/build/styles/internal/_popover-component.scss +69 -106
  47. package/build/styles/relative.css +197 -13
  48. package/build/styles/rollup.css +197 -13
  49. package/build/styles/visually-hidden.css +1 -1
  50. package/build/styles/webpack.css +197 -13
  51. package/package.json +2 -2
package/build/components/radio/radio.css CHANGED
@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
55
55
 
56
56
  @layer variables {}
57
57
 
58
+ @layer variables {}
59
+
60
+ @layer variables {}
61
+
58
62
  /**
59
63
  Generates 3 types of placeholders, e.g:
60
64
  - %db-component-variables-md
package/build/components/section/section.css CHANGED
@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
36
36
 
37
37
  @layer variables {}
38
38
 
39
+ @layer variables {}
40
+
41
+ @layer variables {}
42
+
39
43
  /**
40
44
  * @mixin screen-min-max
41
45
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
package/build/components/select/select.css CHANGED
@@ -178,11 +178,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
178
178
  }
179
179
  }
180
180
 
181
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]), .db-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
181
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
182
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
183
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
184
+ > db-infotext > .db-infotext[data-semantic=successful]) {
182
185
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
183
186
  }
184
187
  @layer variables {
185
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]), .db-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
188
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
189
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
190
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
191
+ > db-infotext > .db-infotext[data-semantic=successful]) {
186
192
  --db-adaptive-bg-basic-level-1-default: var(
187
193
  --db-successful-bg-basic-level-1-default
188
194
  );
@@ -349,6 +355,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
349
355
 
350
356
  @layer variables {}
351
357
 
358
+ @layer variables {}
359
+
360
+ @layer variables {}
361
+
352
362
  .db-select:not([data-hide-icon-after=true])::after {
353
363
  color: var(--db-icon-color, inherit);
354
364
  display: inline-block;
@@ -530,10 +540,12 @@ input[type=radio]:checked) > label {
530
540
  }
531
541
  }
532
542
 
533
- .db-select .db-infotext {
543
+ .db-select > db-infotext > .db-infotext,
544
+ .db-select > .db-infotext {
534
545
  margin-block-start: var(--db-spacing-fixed-2xs);
535
546
  }
536
- .db-select .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
547
+ .db-select > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
548
+ .db-select > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
537
549
  display: none;
538
550
  }
539
551
 
@@ -679,39 +691,75 @@ input[type=radio]:checked) [id$=-placeholder] {
679
691
  content: "*"/"";
680
692
  }
681
693
  }
682
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) {
694
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
695
+ > db-infotext > .db-infotext[data-semantic=successful]) {
683
696
  /* stylelint-disable-next-line at-rule-empty-line-before */
684
697
  }
685
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) select,
686
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) [id$=-placeholder] {
698
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
699
+ > db-infotext > .db-infotext[data-semantic=successful]) select,
700
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
701
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
687
702
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
688
703
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
689
704
  }
690
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext {
705
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
706
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
707
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
708
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
691
709
  /* stylelint-disable-next-line at-rule-empty-line-before */
692
710
  }
693
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
711
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
712
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
713
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
714
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
694
715
  display: flex;
695
716
  }
696
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
717
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
718
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
719
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
720
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
697
721
  display: none;
698
722
  }
699
- .db-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
723
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
724
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
725
+ > db-infotext > .db-infotext[data-semantic=successful]) {
700
726
  /* stylelint-disable-next-line at-rule-empty-line-before */
701
727
  }
702
- .db-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) select,
703
- .db-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) [id$=-placeholder], .db-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) select,
704
- .db-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) [id$=-placeholder] {
728
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
729
+ > db-infotext > .db-infotext[data-semantic=successful]) select,
730
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
731
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder], .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
732
+ > db-infotext > .db-infotext[data-semantic=successful]) select,
733
+ .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
734
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
705
735
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
706
736
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
707
737
  }
708
- .db-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext, .db-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext {
738
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
739
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
740
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
741
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
742
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
743
+ .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
744
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
709
745
  /* stylelint-disable-next-line at-rule-empty-line-before */
710
746
  }
711
- .db-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful], .db-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
747
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
748
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
749
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
750
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
751
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
752
+ .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
753
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
712
754
  display: flex;
713
755
  }
714
- .db-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]), .db-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
756
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
757
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
758
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
759
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
760
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
761
+ .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
762
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
715
763
  display: none;
716
764
  }
717
765
  .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) {
@@ -722,10 +770,12 @@ input[type=radio]:checked) [id$=-placeholder] {
722
770
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
723
771
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
724
772
  }
725
- .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) .db-infotext[data-semantic=critical] {
773
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
774
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext[data-semantic=critical] {
726
775
  display: flex;
727
776
  }
728
- .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) .db-infotext:not([data-semantic]) {
777
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
778
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext:not([data-semantic]) {
729
779
  display: none;
730
780
  }
731
781
  .db-select:has(select[data-custom-validity=invalid]), .db-select[data-custom-validity=invalid] {
@@ -737,10 +787,14 @@ input[type=radio]:checked) [id$=-placeholder] {
737
787
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
738
788
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
739
789
  }
740
- .db-select:has(select[data-custom-validity=invalid]) .db-infotext[data-semantic=critical], .db-select[data-custom-validity=invalid] .db-infotext[data-semantic=critical] {
790
+ .db-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
791
+ .db-select:has(select[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical], .db-select[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical],
792
+ .db-select[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
741
793
  display: flex;
742
794
  }
743
- .db-select:has(select[data-custom-validity=invalid]) .db-infotext:not([data-semantic]), .db-select[data-custom-validity=invalid] .db-infotext:not([data-semantic]) {
795
+ .db-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
796
+ .db-select:has(select[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]), .db-select[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]),
797
+ .db-select[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
744
798
  display: none;
745
799
  }
746
800
  .db-select select::placeholder,
package/build/components/stack/stack-web-component.css CHANGED
@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
36
36
 
37
37
  @layer variables {}
38
38
 
39
+ @layer variables {}
40
+
41
+ @layer variables {}
42
+
39
43
  .db-stack {
40
44
  display: flex;
41
45
  gap: var(--db-spacing-fixed-sm);
package/build/components/stack/stack.css CHANGED
@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
36
36
 
37
37
  @layer variables {}
38
38
 
39
+ @layer variables {}
40
+
41
+ @layer variables {}
42
+
39
43
  .db-stack {
40
44
  display: flex;
41
45
  gap: var(--db-spacing-fixed-sm);
package/build/components/switch/switch.css CHANGED
@@ -350,6 +350,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
350
350
 
351
351
  @layer variables {}
352
352
 
353
+ @layer variables {}
354
+
355
+ @layer variables {}
356
+
353
357
  /**
354
358
  Generates 3 types of placeholders, e.g:
355
359
  - %db-component-variables-md
package/build/components/tab-item/tab-item.css CHANGED
@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
55
55
 
56
56
  @layer variables {}
57
57
 
58
+ @layer variables {}
59
+
60
+ @layer variables {}
61
+
58
62
  .db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
59
63
  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
60
64
  outline-offset: var(--db-border-width-xs);
package/build/components/tab-list/tab-list.css CHANGED
@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
55
55
 
56
56
  @layer variables {}
57
57
 
58
+ @layer variables {}
59
+
60
+ @layer variables {}
61
+
58
62
  .db-tab-list > ul::-webkit-scrollbar, .db-tab-list > ul::-webkit-scrollbar-corner {
59
63
  transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
60
64
  }
package/build/components/tabs/tabs.css CHANGED
@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
55
55
 
56
56
  @layer variables {}
57
57
 
58
+ @layer variables {}
59
+
60
+ @layer variables {}
61
+
58
62
  /**
59
63
  Generates 3 types of placeholders, e.g:
60
64
  - %db-component-variables-md
package/build/components/tag/tag.css CHANGED
@@ -854,6 +854,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
854
854
 
855
855
  @layer variables {}
856
856
 
857
+ @layer variables {}
858
+
859
+ @layer variables {}
860
+
857
861
  /**
858
862
  Generates 3 types of placeholders, e.g:
859
863
  - %db-component-variables-md
package/build/components/textarea/textarea.css CHANGED
@@ -55,6 +55,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
55
55
 
56
56
  @layer variables {}
57
57
 
58
+ @layer variables {}
59
+
60
+ @layer variables {}
61
+
58
62
  /**
59
63
  Generates 3 types of placeholders, e.g:
60
64
  - %db-component-variables-md
@@ -179,10 +183,12 @@ input[type=radio]:checked) > label {
179
183
  border-radius: var(--db-border-radius-xs);
180
184
  }
181
185
 
182
- .db-textarea .db-infotext {
186
+ .db-textarea > db-infotext > .db-infotext,
187
+ .db-textarea > .db-infotext {
183
188
  margin-block-start: var(--db-spacing-fixed-2xs);
184
189
  }
185
- .db-textarea .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
190
+ .db-textarea > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
191
+ .db-textarea > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
186
192
  display: none;
187
193
  }
188
194
 
@@ -437,7 +443,8 @@ input[type=radio]:checked) [id$=-placeholder] {
437
443
  content: "*"/"";
438
444
  }
439
445
  }
440
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(.db-infotext[data-semantic=successful]) {
446
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
447
+ > db-infotext > .db-infotext[data-semantic=successful]) {
441
448
  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
442
449
  --db-adaptive-bg-basic-transparent-full-default: var(
443
450
  --db-successful-bg-basic-transparent-full-default
@@ -458,21 +465,34 @@ input[type=radio]:checked) [id$=-placeholder] {
458
465
  --db-successful-on-bg-basic-emphasis-60-default
459
466
  );
460
467
  }
461
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(.db-infotext[data-semantic=successful]) textarea,
462
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(.db-infotext[data-semantic=successful]) [id$=-placeholder] {
468
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
469
+ > db-infotext > .db-infotext[data-semantic=successful]) textarea,
470
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
471
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
463
472
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
464
473
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
465
474
  }
466
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext {
475
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
476
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
477
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
478
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
467
479
  /* stylelint-disable-next-line at-rule-empty-line-before */
468
480
  }
469
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
481
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
482
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
483
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
484
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
470
485
  display: flex;
471
486
  }
472
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
487
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
488
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
489
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
490
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
473
491
  display: none;
474
492
  }
475
- .db-textarea:has(textarea[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-textarea[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
493
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
494
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
495
+ > db-infotext > .db-infotext[data-semantic=successful]) {
476
496
  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
477
497
  --db-adaptive-bg-basic-transparent-full-default: var(
478
498
  --db-successful-bg-basic-transparent-full-default
@@ -493,19 +513,41 @@ input[type=radio]:checked) [id$=-placeholder] {
493
513
  --db-successful-on-bg-basic-emphasis-60-default
494
514
  );
495
515
  }
496
- .db-textarea:has(textarea[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) textarea,
497
- .db-textarea:has(textarea[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) [id$=-placeholder], .db-textarea[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) textarea,
498
- .db-textarea[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) [id$=-placeholder] {
516
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
517
+ > db-infotext > .db-infotext[data-semantic=successful]) textarea,
518
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
519
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder], .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
520
+ > db-infotext > .db-infotext[data-semantic=successful]) textarea,
521
+ .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
522
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
499
523
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
500
524
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
501
525
  }
502
- .db-textarea:has(textarea[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext, .db-textarea[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext {
526
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
527
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
528
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
529
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
530
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
531
+ .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
532
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
503
533
  /* stylelint-disable-next-line at-rule-empty-line-before */
504
534
  }
505
- .db-textarea:has(textarea[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful], .db-textarea[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
535
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
536
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
537
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
538
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
539
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
540
+ .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
541
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
506
542
  display: flex;
507
543
  }
508
- .db-textarea:has(textarea[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]), .db-textarea[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
544
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
545
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
546
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
547
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
548
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
549
+ .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
550
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
509
551
  display: none;
510
552
  }
511
553
  .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) {
@@ -534,10 +576,12 @@ input[type=radio]:checked) [id$=-placeholder] {
534
576
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
535
577
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
536
578
  }
537
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) .db-infotext[data-semantic=critical] {
579
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
580
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > .db-infotext[data-semantic=critical] {
538
581
  display: flex;
539
582
  }
540
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) .db-infotext:not([data-semantic]) {
583
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
584
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > .db-infotext:not([data-semantic]) {
541
585
  display: none;
542
586
  }
543
587
  .db-textarea:has(textarea[data-custom-validity=invalid]), .db-textarea[data-custom-validity=invalid] {
@@ -567,10 +611,14 @@ input[type=radio]:checked) [id$=-placeholder] {
567
611
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
568
612
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
569
613
  }
570
- .db-textarea:has(textarea[data-custom-validity=invalid]) .db-infotext[data-semantic=critical], .db-textarea[data-custom-validity=invalid] .db-infotext[data-semantic=critical] {
614
+ .db-textarea:has(textarea[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
615
+ .db-textarea:has(textarea[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical], .db-textarea[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical],
616
+ .db-textarea[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
571
617
  display: flex;
572
618
  }
573
- .db-textarea:has(textarea[data-custom-validity=invalid]) .db-infotext:not([data-semantic]), .db-textarea[data-custom-validity=invalid] .db-infotext:not([data-semantic]) {
619
+ .db-textarea:has(textarea[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
620
+ .db-textarea:has(textarea[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]), .db-textarea[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]),
621
+ .db-textarea[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
574
622
  display: none;
575
623
  }
576
624
  .db-textarea textarea::placeholder,