@db-ux/core-components 4.2.1 → 4.2.2-css-selectors-792dad7

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 (12) hide show
  1. package/CHANGELOG.md +6 -1
  2. package/build/components/custom-select/custom-select.css +28 -61
  3. package/build/components/input/input.css +30 -66
  4. package/build/components/select/select.css +28 -61
  5. package/build/components/textarea/textarea.css +30 -63
  6. package/build/styles/absolute.css +7 -7
  7. package/build/styles/index.css +6 -6
  8. package/build/styles/internal/_form-components.scss +5 -10
  9. package/build/styles/relative.css +7 -7
  10. package/build/styles/rollup.css +7 -7
  11. package/build/styles/webpack.css +7 -7
  12. package/package.json +4 -4
package/build/components/textarea/textarea.css CHANGED
@@ -402,16 +402,16 @@ input[type=radio]:checked) > label {
402
402
  }
403
403
  }
404
404
  .db-textarea[data-variant=floating]:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) label {
405
- color: var(--db-successful-on-bg-basic-emphasis-80-default);
405
+ color: var(--db-successful-on-bg-basic-emphasis-90-default);
406
406
  }
407
407
  .db-textarea[data-variant=floating]:has(textarea[data-custom-validity=valid]) label, .db-textarea[data-variant=floating][data-custom-validity=valid] label {
408
- color: var(--db-successful-on-bg-basic-emphasis-80-default);
408
+ color: var(--db-successful-on-bg-basic-emphasis-90-default);
409
409
  }
410
410
  .db-textarea[data-variant=floating]:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) label {
411
- color: var(--db-critical-on-bg-basic-emphasis-80-default);
411
+ color: var(--db-critical-on-bg-basic-emphasis-90-default);
412
412
  }
413
413
  .db-textarea[data-variant=floating]:has(textarea[data-custom-validity=invalid]) label, .db-textarea[data-variant=floating][data-custom-validity=invalid] label {
414
- color: var(--db-critical-on-bg-basic-emphasis-80-default);
414
+ color: var(--db-critical-on-bg-basic-emphasis-90-default);
415
415
  }
416
416
  .db-textarea[data-variant=floating] > label {
417
417
  opacity: var(--db-opacity-xl);
@@ -535,8 +535,7 @@ input[type=radio]:checked) textarea:is([type=date],
535
535
  transition: opacity var(--db-transition-straight-emotional);
536
536
  }
537
537
  }
538
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
539
- > db-infotext > .db-infotext[data-semantic=successful]) {
538
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) {
540
539
  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
541
540
  --db-adaptive-bg-basic-transparent-full-default: var(
542
541
  --db-successful-bg-basic-transparent-full-default
@@ -563,42 +562,30 @@ input[type=radio]:checked) textarea:is([type=date],
563
562
  --db-successful-on-bg-basic-emphasis-60-default
564
563
  );
565
564
  }
566
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
567
- > db-infotext > .db-infotext[data-semantic=successful])[data-variant=floating]::after {
565
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid)[data-variant=floating]::after {
568
566
  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
569
567
  }
570
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
571
- > db-infotext > .db-infotext[data-semantic=successful]) textarea,
572
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
573
- > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
568
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) textarea,
569
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) [id$=-placeholder] {
574
570
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
575
571
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
576
572
  }
577
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
578
- > db-infotext > .db-infotext[data-semantic=successful]) textarea {
573
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) textarea {
579
574
  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
580
575
  }
581
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
582
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
583
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
584
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
576
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > db-infotext > .db-infotext,
577
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > .db-infotext {
585
578
  /* stylelint-disable-next-line at-rule-empty-line-before */
586
579
  }
587
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
588
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
589
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
590
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
580
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
581
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > .db-infotext[data-semantic=successful]:not([hidden]) {
591
582
  display: flex;
592
583
  }
593
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
594
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
595
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
596
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
584
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
585
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid) > .db-infotext:not([data-semantic]):not([hidden]) {
597
586
  display: none;
598
587
  }
599
- .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
600
- > db-infotext > .db-infotext[data-semantic=successful]), .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
601
- > db-infotext > .db-infotext[data-semantic=successful]) {
588
+ .db-textarea:has(textarea[data-custom-validity=valid]), .db-textarea[data-custom-validity=valid] {
602
589
  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
603
590
  --db-adaptive-bg-basic-transparent-full-default: var(
604
591
  --db-successful-bg-basic-transparent-full-default
@@ -625,51 +612,31 @@ input[type=radio]:checked) textarea:is([type=date],
625
612
  --db-successful-on-bg-basic-emphasis-60-default
626
613
  );
627
614
  }
628
- .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
629
- > db-infotext > .db-infotext[data-semantic=successful])[data-variant=floating]::after, .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
630
- > db-infotext > .db-infotext[data-semantic=successful])[data-variant=floating]::after {
615
+ .db-textarea:has(textarea[data-custom-validity=valid])[data-variant=floating]::after, .db-textarea[data-custom-validity=valid][data-variant=floating]::after {
631
616
  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
632
617
  }
633
- .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
634
- > db-infotext > .db-infotext[data-semantic=successful]) textarea,
635
- .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
636
- > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder], .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
637
- > db-infotext > .db-infotext[data-semantic=successful]) textarea,
638
- .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
639
- > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
618
+ .db-textarea:has(textarea[data-custom-validity=valid]) textarea,
619
+ .db-textarea:has(textarea[data-custom-validity=valid]) [id$=-placeholder], .db-textarea[data-custom-validity=valid] textarea,
620
+ .db-textarea[data-custom-validity=valid] [id$=-placeholder] {
640
621
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
641
622
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
642
623
  }
643
- .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
644
- > db-infotext > .db-infotext[data-semantic=successful]) textarea, .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
645
- > db-infotext > .db-infotext[data-semantic=successful]) textarea {
624
+ .db-textarea:has(textarea[data-custom-validity=valid]) textarea, .db-textarea[data-custom-validity=valid] textarea {
646
625
  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
647
626
  }
648
- .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
649
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
650
- .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
651
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
652
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
653
- .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
654
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
627
+ .db-textarea:has(textarea[data-custom-validity=valid]) > db-infotext > .db-infotext,
628
+ .db-textarea:has(textarea[data-custom-validity=valid]) > .db-infotext, .db-textarea[data-custom-validity=valid] > db-infotext > .db-infotext,
629
+ .db-textarea[data-custom-validity=valid] > .db-infotext {
655
630
  /* stylelint-disable-next-line at-rule-empty-line-before */
656
631
  }
657
- .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
658
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
659
- .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
660
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
661
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
662
- .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
663
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
632
+ .db-textarea:has(textarea[data-custom-validity=valid]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
633
+ .db-textarea:has(textarea[data-custom-validity=valid]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-textarea[data-custom-validity=valid] > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
634
+ .db-textarea[data-custom-validity=valid] > .db-infotext[data-semantic=successful]:not([hidden]) {
664
635
  display: flex;
665
636
  }
666
- .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
667
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
668
- .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
669
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]), .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
670
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
671
- .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
672
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
637
+ .db-textarea:has(textarea[data-custom-validity=valid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
638
+ .db-textarea:has(textarea[data-custom-validity=valid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-textarea[data-custom-validity=valid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
639
+ .db-textarea[data-custom-validity=valid] > .db-infotext:not([data-semantic]):not([hidden]) {
673
640
  display: none;
674
641
  }
675
642
  .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) {