@db-ux/core-components 2.0.7 → 2.0.9

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 (17) hide show
  1. package/build/components/checkbox/checkbox.css +29 -12
  2. package/build/components/custom-select/custom-select.css +71 -100
  3. package/build/components/custom-select/custom-select.scss +0 -1
  4. package/build/components/custom-select-list/custom-select-list.css +0 -153
  5. package/build/components/custom-select-list/custom-select-list.scss +0 -3
  6. package/build/components/custom-select-list-item/custom-select-list-item.css +1 -1
  7. package/build/components/input/input.css +71 -21
  8. package/build/components/select/select.css +71 -21
  9. package/build/components/tab-item/tab-item.css +1 -1
  10. package/build/components/textarea/textarea.css +63 -19
  11. package/build/styles/absolute.css +12 -12
  12. package/build/styles/index.css +12 -12
  13. package/build/styles/internal/_form-components.scss +8 -3
  14. package/build/styles/relative.css +12 -12
  15. package/build/styles/rollup.css +12 -12
  16. package/build/styles/webpack.css +12 -12
  17. package/package.json +3 -3
package/build/components/input/input.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-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(.db-infotext[data-semantic=successful]), .db-input:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-input[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
181
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
182
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
183
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-input[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-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(.db-infotext[data-semantic=successful]), .db-input:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-input[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
188
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
189
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
190
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-input[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
  );
@@ -530,10 +536,12 @@ input[type=radio]:checked) > label {
530
536
  }
531
537
  }
532
538
 
533
- .db-input .db-infotext {
539
+ .db-input > db-infotext > .db-infotext,
540
+ .db-input > .db-infotext {
534
541
  margin-block-start: var(--db-spacing-fixed-2xs);
535
542
  }
536
- .db-input .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
543
+ .db-input > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
544
+ .db-input > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
537
545
  display: none;
538
546
  }
539
547
 
@@ -631,39 +639,75 @@ input[type=radio]:checked) [id$=-placeholder] {
631
639
  content: "*"/"";
632
640
  }
633
641
  }
634
- .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(.db-infotext[data-semantic=successful]) {
642
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
643
+ > db-infotext > .db-infotext[data-semantic=successful]) {
635
644
  /* stylelint-disable-next-line at-rule-empty-line-before */
636
645
  }
637
- .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(.db-infotext[data-semantic=successful]) input,
638
- .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(.db-infotext[data-semantic=successful]) [id$=-placeholder] {
646
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
647
+ > db-infotext > .db-infotext[data-semantic=successful]) input,
648
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
649
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
639
650
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
640
651
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
641
652
  }
642
- .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext {
653
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
654
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
655
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
656
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
643
657
  /* stylelint-disable-next-line at-rule-empty-line-before */
644
658
  }
645
- .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
659
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
660
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
661
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
662
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
646
663
  display: flex;
647
664
  }
648
- .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
665
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
666
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
667
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(> .db-infotext[data-semantic=successful],
668
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
649
669
  display: none;
650
670
  }
651
- .db-input:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-input[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
671
+ .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
672
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
673
+ > db-infotext > .db-infotext[data-semantic=successful]) {
652
674
  /* stylelint-disable-next-line at-rule-empty-line-before */
653
675
  }
654
- .db-input:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input,
655
- .db-input:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) [id$=-placeholder], .db-input[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input,
656
- .db-input[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) [id$=-placeholder] {
676
+ .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
677
+ > db-infotext > .db-infotext[data-semantic=successful]) input,
678
+ .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
679
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder], .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
680
+ > db-infotext > .db-infotext[data-semantic=successful]) input,
681
+ .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
682
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
657
683
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
658
684
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
659
685
  }
660
- .db-input:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext, .db-input[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext {
686
+ .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
687
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
688
+ .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
689
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
690
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
691
+ .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
692
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
661
693
  /* stylelint-disable-next-line at-rule-empty-line-before */
662
694
  }
663
- .db-input:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful], .db-input[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
695
+ .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
696
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
697
+ .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
698
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
699
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
700
+ .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
701
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
664
702
  display: flex;
665
703
  }
666
- .db-input:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]), .db-input[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
704
+ .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
705
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
706
+ .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
707
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
708
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
709
+ .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
710
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
667
711
  display: none;
668
712
  }
669
713
  .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) {
@@ -674,10 +718,12 @@ input[type=radio]:checked) [id$=-placeholder] {
674
718
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
675
719
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
676
720
  }
677
- .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) .db-infotext[data-semantic=critical] {
721
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
722
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > .db-infotext[data-semantic=critical] {
678
723
  display: flex;
679
724
  }
680
- .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) .db-infotext:not([data-semantic]) {
725
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
726
+ .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) > .db-infotext:not([data-semantic]) {
681
727
  display: none;
682
728
  }
683
729
  .db-input:has(input[data-custom-validity=invalid]), .db-input[data-custom-validity=invalid] {
@@ -689,10 +735,14 @@ input[type=radio]:checked) [id$=-placeholder] {
689
735
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
690
736
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
691
737
  }
692
- .db-input:has(input[data-custom-validity=invalid]) .db-infotext[data-semantic=critical], .db-input[data-custom-validity=invalid] .db-infotext[data-semantic=critical] {
738
+ .db-input:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
739
+ .db-input:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical], .db-input[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical],
740
+ .db-input[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
693
741
  display: flex;
694
742
  }
695
- .db-input:has(input[data-custom-validity=invalid]) .db-infotext:not([data-semantic]), .db-input[data-custom-validity=invalid] .db-infotext:not([data-semantic]) {
743
+ .db-input:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
744
+ .db-input:has(input[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]), .db-input[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]),
745
+ .db-input[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
696
746
  display: none;
697
747
  }
698
748
  .db-input input::placeholder,
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
  );
@@ -530,10 +536,12 @@ input[type=radio]:checked) > label {
530
536
  }
531
537
  }
532
538
 
533
- .db-select .db-infotext {
539
+ .db-select > db-infotext > .db-infotext,
540
+ .db-select > .db-infotext {
534
541
  margin-block-start: var(--db-spacing-fixed-2xs);
535
542
  }
536
- .db-select .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
543
+ .db-select > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
544
+ .db-select > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
537
545
  display: none;
538
546
  }
539
547
 
@@ -679,39 +687,75 @@ input[type=radio]:checked) [id$=-placeholder] {
679
687
  content: "*"/"";
680
688
  }
681
689
  }
682
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) {
690
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
691
+ > db-infotext > .db-infotext[data-semantic=successful]) {
683
692
  /* stylelint-disable-next-line at-rule-empty-line-before */
684
693
  }
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] {
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]) select,
696
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
697
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
687
698
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
688
699
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
689
700
  }
690
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext {
701
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
702
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
703
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
704
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
691
705
  /* stylelint-disable-next-line at-rule-empty-line-before */
692
706
  }
693
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
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 > .db-infotext[data-semantic=successful],
709
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
710
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
694
711
  display: flex;
695
712
  }
696
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
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 > .db-infotext:not([data-semantic]),
715
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
716
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
697
717
  display: none;
698
718
  }
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]) {
719
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
720
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
721
+ > db-infotext > .db-infotext[data-semantic=successful]) {
700
722
  /* stylelint-disable-next-line at-rule-empty-line-before */
701
723
  }
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] {
724
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
725
+ > db-infotext > .db-infotext[data-semantic=successful]) select,
726
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
727
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder], .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
728
+ > db-infotext > .db-infotext[data-semantic=successful]) select,
729
+ .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
730
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
705
731
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
706
732
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
707
733
  }
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 {
734
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
735
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
736
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
737
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
738
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
739
+ .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
740
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
709
741
  /* stylelint-disable-next-line at-rule-empty-line-before */
710
742
  }
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] {
743
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
744
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
745
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
746
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
747
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
748
+ .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
749
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
712
750
  display: flex;
713
751
  }
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]) {
752
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
753
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
754
+ .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
755
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
756
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
757
+ .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
758
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
715
759
  display: none;
716
760
  }
717
761
  .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) {
@@ -722,10 +766,12 @@ input[type=radio]:checked) [id$=-placeholder] {
722
766
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
723
767
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
724
768
  }
725
- .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) .db-infotext[data-semantic=critical] {
769
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
770
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext[data-semantic=critical] {
726
771
  display: flex;
727
772
  }
728
- .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) .db-infotext:not([data-semantic]) {
773
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
774
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext:not([data-semantic]) {
729
775
  display: none;
730
776
  }
731
777
  .db-select:has(select[data-custom-validity=invalid]), .db-select[data-custom-validity=invalid] {
@@ -737,10 +783,14 @@ input[type=radio]:checked) [id$=-placeholder] {
737
783
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
738
784
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
739
785
  }
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] {
786
+ .db-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
787
+ .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],
788
+ .db-select[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
741
789
  display: flex;
742
790
  }
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]) {
791
+ .db-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
792
+ .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]),
793
+ .db-select[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
744
794
  display: none;
745
795
  }
746
796
  .db-select select::placeholder,
package/build/components/tab-item/tab-item.css CHANGED
@@ -56,7 +56,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
56
56
  @layer variables {}
57
57
 
58
58
  .db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
59
- outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-80-default));
59
+ outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
60
60
  outline-offset: var(--db-border-width-xs);
61
61
  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
62
62
  }
package/build/components/textarea/textarea.css CHANGED
@@ -179,10 +179,12 @@ input[type=radio]:checked) > label {
179
179
  border-radius: var(--db-border-radius-xs);
180
180
  }
181
181
 
182
- .db-textarea .db-infotext {
182
+ .db-textarea > db-infotext > .db-infotext,
183
+ .db-textarea > .db-infotext {
183
184
  margin-block-start: var(--db-spacing-fixed-2xs);
184
185
  }
185
- .db-textarea .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
186
+ .db-textarea > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
187
+ .db-textarea > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
186
188
  display: none;
187
189
  }
188
190
 
@@ -437,7 +439,8 @@ input[type=radio]:checked) [id$=-placeholder] {
437
439
  content: "*"/"";
438
440
  }
439
441
  }
440
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(.db-infotext[data-semantic=successful]) {
442
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
443
+ > db-infotext > .db-infotext[data-semantic=successful]) {
441
444
  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
442
445
  --db-adaptive-bg-basic-transparent-full-default: var(
443
446
  --db-successful-bg-basic-transparent-full-default
@@ -458,21 +461,34 @@ input[type=radio]:checked) [id$=-placeholder] {
458
461
  --db-successful-on-bg-basic-emphasis-60-default
459
462
  );
460
463
  }
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] {
464
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
465
+ > db-infotext > .db-infotext[data-semantic=successful]) textarea,
466
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
467
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
463
468
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
464
469
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
465
470
  }
466
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext {
471
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
472
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
473
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
474
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
467
475
  /* stylelint-disable-next-line at-rule-empty-line-before */
468
476
  }
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] {
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 > .db-infotext[data-semantic=successful],
479
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
480
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
470
481
  display: flex;
471
482
  }
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]) {
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 > .db-infotext:not([data-semantic]),
485
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
486
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
473
487
  display: none;
474
488
  }
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]) {
489
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
490
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
491
+ > db-infotext > .db-infotext[data-semantic=successful]) {
476
492
  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
477
493
  --db-adaptive-bg-basic-transparent-full-default: var(
478
494
  --db-successful-bg-basic-transparent-full-default
@@ -493,19 +509,41 @@ input[type=radio]:checked) [id$=-placeholder] {
493
509
  --db-successful-on-bg-basic-emphasis-60-default
494
510
  );
495
511
  }
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] {
512
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
513
+ > db-infotext > .db-infotext[data-semantic=successful]) textarea,
514
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
515
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder], .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
516
+ > db-infotext > .db-infotext[data-semantic=successful]) textarea,
517
+ .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
518
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
499
519
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
500
520
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
501
521
  }
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 {
522
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
523
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
524
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
525
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
526
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
527
+ .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
528
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
503
529
  /* stylelint-disable-next-line at-rule-empty-line-before */
504
530
  }
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] {
531
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
532
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
533
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
534
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
535
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
536
+ .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
537
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
506
538
  display: flex;
507
539
  }
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]) {
540
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
541
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
542
+ .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
543
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
544
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
545
+ .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
546
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
509
547
  display: none;
510
548
  }
511
549
  .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) {
@@ -534,10 +572,12 @@ input[type=radio]:checked) [id$=-placeholder] {
534
572
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
535
573
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
536
574
  }
537
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) .db-infotext[data-semantic=critical] {
575
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
576
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > .db-infotext[data-semantic=critical] {
538
577
  display: flex;
539
578
  }
540
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) .db-infotext:not([data-semantic]) {
579
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
580
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > .db-infotext:not([data-semantic]) {
541
581
  display: none;
542
582
  }
543
583
  .db-textarea:has(textarea[data-custom-validity=invalid]), .db-textarea[data-custom-validity=invalid] {
@@ -567,10 +607,14 @@ input[type=radio]:checked) [id$=-placeholder] {
567
607
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
568
608
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
569
609
  }
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] {
610
+ .db-textarea:has(textarea[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
611
+ .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],
612
+ .db-textarea[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
571
613
  display: flex;
572
614
  }
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]) {
615
+ .db-textarea:has(textarea[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
616
+ .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]),
617
+ .db-textarea[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
574
618
  display: none;
575
619
  }
576
620
  .db-textarea textarea::placeholder,