@db-ux/core-components 4.2.1 → 4.2.2-css-selectors-different-f114ce6

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/CHANGELOG.md CHANGED
@@ -1,10 +1,15 @@
1
1
  # @db-ux/core-components
2
2
 
3
+ ## 4.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - fix(form elements): `valid` background- and border-colors - [see commit 8f07e55](https://github.com/db-ux-design-system/core-web/commit/8f07e55f2155fcb619198857397ce354f90c4803)
8
+
3
9
  ## 4.2.1
4
10
 
5
11
  _version bump_
6
12
 
7
-
8
13
  ## 4.2.0
9
14
 
10
15
  _version bump_
package/build/components/custom-select/custom-select.css CHANGED
@@ -340,17 +340,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
340
340
  }
341
341
  }
342
342
 
343
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
344
- > db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
345
- > db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
346
- > db-infotext > .db-infotext[data-semantic=successful]) {
343
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid), .db-custom-select:has(select[data-custom-validity=valid]), .db-custom-select[data-custom-validity=valid] {
347
344
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
348
345
  }
349
346
  @layer variables {
350
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
351
- > db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
352
- > db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
353
- > db-infotext > .db-infotext[data-semantic=successful]) {
347
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid), .db-custom-select:has(select[data-custom-validity=valid]), .db-custom-select[data-custom-validity=valid] {
354
348
  --db-adaptive-bg-basic-level-1-default: var(
355
349
  --db-successful-bg-basic-level-1-default
356
350
  );
@@ -837,16 +831,16 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
837
831
  }
838
832
  }
839
833
  .db-custom-select[data-variant=floating]:has(select:not([data-custom-validity]):is(:required):user-valid) label {
840
- color: var(--db-successful-on-bg-basic-emphasis-80-default);
834
+ color: var(--db-successful-on-bg-basic-emphasis-90-default);
841
835
  }
842
836
  .db-custom-select[data-variant=floating]:has(select[data-custom-validity=valid]) label, .db-custom-select[data-variant=floating][data-custom-validity=valid] label {
843
- color: var(--db-successful-on-bg-basic-emphasis-80-default);
837
+ color: var(--db-successful-on-bg-basic-emphasis-90-default);
844
838
  }
845
839
  .db-custom-select[data-variant=floating]:has(select:not([data-custom-validity]):is(:required):user-invalid) label {
846
- color: var(--db-critical-on-bg-basic-emphasis-80-default);
840
+ color: var(--db-critical-on-bg-basic-emphasis-90-default);
847
841
  }
848
842
  .db-custom-select[data-variant=floating]:has(select[data-custom-validity=invalid]) label, .db-custom-select[data-variant=floating][data-custom-validity=invalid] label {
849
- color: var(--db-critical-on-bg-basic-emphasis-80-default);
843
+ color: var(--db-critical-on-bg-basic-emphasis-90-default);
850
844
  }
851
845
  .db-custom-select[data-variant=floating] > label {
852
846
  opacity: var(--db-opacity-xl);
@@ -974,75 +968,48 @@ input[type=radio]:checked) summary:is([type=date],
974
968
  transition: opacity var(--db-transition-straight-emotional);
975
969
  }
976
970
  }
977
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
978
- > db-infotext > .db-infotext[data-semantic=successful]) {
971
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid) {
979
972
  /* stylelint-disable-next-line at-rule-empty-line-before */
980
973
  }
981
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
982
- > db-infotext > .db-infotext[data-semantic=successful]) summary,
983
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
984
- > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
974
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid) summary,
975
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid) [id$=-placeholder] {
985
976
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
986
977
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
987
978
  }
988
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
989
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
990
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
991
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
979
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid) > db-infotext > .db-infotext,
980
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid) > .db-infotext {
992
981
  /* stylelint-disable-next-line at-rule-empty-line-before */
993
982
  }
994
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
995
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
996
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
997
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
983
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
984
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid) > .db-infotext[data-semantic=successful]:not([hidden]) {
998
985
  display: flex;
999
986
  }
1000
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
1001
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
1002
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
1003
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
987
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
988
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid) > .db-infotext:not([data-semantic]):not([hidden]) {
1004
989
  display: none;
1005
990
  }
1006
- .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
1007
- > db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
1008
- > db-infotext > .db-infotext[data-semantic=successful]) {
991
+ .db-custom-select:has(select[data-custom-validity=valid]), .db-custom-select[data-custom-validity=valid] {
1009
992
  /* stylelint-disable-next-line at-rule-empty-line-before */
1010
993
  }
1011
- .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
1012
- > db-infotext > .db-infotext[data-semantic=successful]) summary,
1013
- .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
1014
- > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder], .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
1015
- > db-infotext > .db-infotext[data-semantic=successful]) summary,
1016
- .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
1017
- > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
994
+ .db-custom-select:has(select[data-custom-validity=valid]) summary,
995
+ .db-custom-select:has(select[data-custom-validity=valid]) [id$=-placeholder], .db-custom-select[data-custom-validity=valid] summary,
996
+ .db-custom-select[data-custom-validity=valid] [id$=-placeholder] {
1018
997
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
1019
998
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
1020
999
  }
1021
- .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
1022
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
1023
- .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
1024
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
1025
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
1026
- .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
1027
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
1000
+ .db-custom-select:has(select[data-custom-validity=valid]) > db-infotext > .db-infotext,
1001
+ .db-custom-select:has(select[data-custom-validity=valid]) > .db-infotext, .db-custom-select[data-custom-validity=valid] > db-infotext > .db-infotext,
1002
+ .db-custom-select[data-custom-validity=valid] > .db-infotext {
1028
1003
  /* stylelint-disable-next-line at-rule-empty-line-before */
1029
1004
  }
1030
- .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
1031
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
1032
- .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
1033
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
1034
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
1035
- .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
1036
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
1005
+ .db-custom-select:has(select[data-custom-validity=valid]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
1006
+ .db-custom-select:has(select[data-custom-validity=valid]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-custom-select[data-custom-validity=valid] > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
1007
+ .db-custom-select[data-custom-validity=valid] > .db-infotext[data-semantic=successful]:not([hidden]) {
1037
1008
  display: flex;
1038
1009
  }
1039
- .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
1040
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
1041
- .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
1042
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
1043
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
1044
- .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
1045
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
1010
+ .db-custom-select:has(select[data-custom-validity=valid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
1011
+ .db-custom-select:has(select[data-custom-validity=valid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-custom-select[data-custom-validity=valid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
1012
+ .db-custom-select[data-custom-validity=valid] > .db-infotext:not([data-semantic]):not([hidden]) {
1046
1013
  display: none;
1047
1014
  }
1048
1015
  .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) {
package/build/components/input/input.css CHANGED
@@ -187,17 +187,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
187
187
  }
188
188
  }
189
189
 
190
- .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],
191
- > db-infotext > .db-infotext[data-semantic=successful]), .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
192
- > db-infotext > .db-infotext[data-semantic=successful]), .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
193
- > db-infotext > .db-infotext[data-semantic=successful]) {
190
+ .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), .db-input:has(input[data-custom-validity=valid]), .db-input[data-custom-validity=valid] {
194
191
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
195
192
  }
196
193
  @layer variables {
197
- .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],
198
- > db-infotext > .db-infotext[data-semantic=successful]), .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
199
- > db-infotext > .db-infotext[data-semantic=successful]), .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
200
- > db-infotext > .db-infotext[data-semantic=successful]) {
194
+ .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), .db-input:has(input[data-custom-validity=valid]), .db-input[data-custom-validity=valid] {
201
195
  --db-adaptive-bg-basic-level-1-default: var(
202
196
  --db-successful-bg-basic-level-1-default
203
197
  );
@@ -611,16 +605,16 @@ input[type=radio]:checked) > label {
611
605
  }
612
606
  }
613
607
  .db-input[data-variant=floating]: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) label {
614
- color: var(--db-successful-on-bg-basic-emphasis-80-default);
608
+ color: var(--db-successful-on-bg-basic-emphasis-90-default);
615
609
  }
616
610
  .db-input[data-variant=floating]:has(input[data-custom-validity=valid]) label, .db-input[data-variant=floating][data-custom-validity=valid] label {
617
- color: var(--db-successful-on-bg-basic-emphasis-80-default);
611
+ color: var(--db-successful-on-bg-basic-emphasis-90-default);
618
612
  }
619
613
  .db-input[data-variant=floating]: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) label {
620
- color: var(--db-critical-on-bg-basic-emphasis-80-default);
614
+ color: var(--db-critical-on-bg-basic-emphasis-90-default);
621
615
  }
622
616
  .db-input[data-variant=floating]:has(input[data-custom-validity=invalid]) label, .db-input[data-variant=floating][data-custom-validity=invalid] label {
623
- color: var(--db-critical-on-bg-basic-emphasis-80-default);
617
+ color: var(--db-critical-on-bg-basic-emphasis-90-default);
624
618
  }
625
619
  .db-input[data-variant=floating] > label {
626
620
  opacity: var(--db-opacity-xl);
@@ -744,84 +738,54 @@ input[type=radio]:checked) input:is([type=date],
744
738
  transition: opacity var(--db-transition-straight-emotional);
745
739
  }
746
740
  }
747
- .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],
748
- > db-infotext > .db-infotext[data-semantic=successful]) {
741
+ .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) {
749
742
  /* stylelint-disable-next-line at-rule-empty-line-before */
750
743
  }
751
- .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],
752
- > db-infotext > .db-infotext[data-semantic=successful]) input,
753
- .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],
754
- > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
744
+ .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) input,
745
+ .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) [id$=-placeholder] {
755
746
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
756
747
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
757
748
  }
758
- .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],
759
- > db-infotext > .db-infotext[data-semantic=successful]) input {
749
+ .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) input {
760
750
  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
761
751
  }
762
- .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],
763
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
764
- .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],
765
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
752
+ .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) > db-infotext > .db-infotext,
753
+ .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) > .db-infotext {
766
754
  /* stylelint-disable-next-line at-rule-empty-line-before */
767
755
  }
768
- .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],
769
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
770
- .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],
771
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
756
+ .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) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
757
+ .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) > .db-infotext[data-semantic=successful]:not([hidden]) {
772
758
  display: flex;
773
759
  }
774
- .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],
775
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
776
- .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],
777
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
760
+ .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) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
761
+ .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) > .db-infotext:not([data-semantic]):not([hidden]) {
778
762
  display: none;
779
763
  }
780
- .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
781
- > db-infotext > .db-infotext[data-semantic=successful]), .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
782
- > db-infotext > .db-infotext[data-semantic=successful]) {
764
+ .db-input:has(input[data-custom-validity=valid]), .db-input[data-custom-validity=valid] {
783
765
  /* stylelint-disable-next-line at-rule-empty-line-before */
784
766
  }
785
- .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
786
- > db-infotext > .db-infotext[data-semantic=successful]) input,
787
- .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
788
- > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder], .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
789
- > db-infotext > .db-infotext[data-semantic=successful]) input,
790
- .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
791
- > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
767
+ .db-input:has(input[data-custom-validity=valid]) input,
768
+ .db-input:has(input[data-custom-validity=valid]) [id$=-placeholder], .db-input[data-custom-validity=valid] input,
769
+ .db-input[data-custom-validity=valid] [id$=-placeholder] {
792
770
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
793
771
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
794
772
  }
795
- .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
796
- > db-infotext > .db-infotext[data-semantic=successful]) input, .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
797
- > db-infotext > .db-infotext[data-semantic=successful]) input {
773
+ .db-input:has(input[data-custom-validity=valid]) input, .db-input[data-custom-validity=valid] input {
798
774
  border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
799
775
  }
800
- .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
801
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
802
- .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
803
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
804
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
805
- .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
806
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
776
+ .db-input:has(input[data-custom-validity=valid]) > db-infotext > .db-infotext,
777
+ .db-input:has(input[data-custom-validity=valid]) > .db-infotext, .db-input[data-custom-validity=valid] > db-infotext > .db-infotext,
778
+ .db-input[data-custom-validity=valid] > .db-infotext {
807
779
  /* stylelint-disable-next-line at-rule-empty-line-before */
808
780
  }
809
- .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
810
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
811
- .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
812
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
813
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
814
- .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
815
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
781
+ .db-input:has(input[data-custom-validity=valid]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
782
+ .db-input:has(input[data-custom-validity=valid]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-input[data-custom-validity=valid] > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
783
+ .db-input[data-custom-validity=valid] > .db-infotext[data-semantic=successful]:not([hidden]) {
816
784
  display: flex;
817
785
  }
818
- .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
819
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
820
- .db-input:has(input[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
821
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]), .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
822
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
823
- .db-input[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
824
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
786
+ .db-input:has(input[data-custom-validity=valid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
787
+ .db-input:has(input[data-custom-validity=valid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-input[data-custom-validity=valid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
788
+ .db-input[data-custom-validity=valid] > .db-infotext:not([data-semantic]):not([hidden]) {
825
789
  display: none;
826
790
  }
827
791
  .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) {
package/build/components/select/select.css CHANGED
@@ -187,17 +187,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
187
187
  }
188
188
  }
189
189
 
190
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
191
- > db-infotext > .db-infotext[data-semantic=successful]), .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
192
- > db-infotext > .db-infotext[data-semantic=successful]), .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
193
- > db-infotext > .db-infotext[data-semantic=successful]) {
190
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid), .db-select:has(select[data-custom-validity=valid]), .db-select[data-custom-validity=valid] {
194
191
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
195
192
  }
196
193
  @layer variables {
197
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
198
- > db-infotext > .db-infotext[data-semantic=successful]), .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
199
- > db-infotext > .db-infotext[data-semantic=successful]), .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
200
- > db-infotext > .db-infotext[data-semantic=successful]) {
194
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid), .db-select:has(select[data-custom-validity=valid]), .db-select[data-custom-validity=valid] {
201
195
  --db-adaptive-bg-basic-level-1-default: var(
202
196
  --db-successful-bg-basic-level-1-default
203
197
  );
@@ -636,16 +630,16 @@ input[type=radio]:checked) > label {
636
630
  }
637
631
  }
638
632
  .db-select[data-variant=floating]:has(select:not([data-custom-validity]):is(:required):user-valid) label {
639
- color: var(--db-successful-on-bg-basic-emphasis-80-default);
633
+ color: var(--db-successful-on-bg-basic-emphasis-90-default);
640
634
  }
641
635
  .db-select[data-variant=floating]:has(select[data-custom-validity=valid]) label, .db-select[data-variant=floating][data-custom-validity=valid] label {
642
- color: var(--db-successful-on-bg-basic-emphasis-80-default);
636
+ color: var(--db-successful-on-bg-basic-emphasis-90-default);
643
637
  }
644
638
  .db-select[data-variant=floating]:has(select:not([data-custom-validity]):is(:required):user-invalid) label {
645
- color: var(--db-critical-on-bg-basic-emphasis-80-default);
639
+ color: var(--db-critical-on-bg-basic-emphasis-90-default);
646
640
  }
647
641
  .db-select[data-variant=floating]:has(select[data-custom-validity=invalid]) label, .db-select[data-variant=floating][data-custom-validity=invalid] label {
648
- color: var(--db-critical-on-bg-basic-emphasis-80-default);
642
+ color: var(--db-critical-on-bg-basic-emphasis-90-default);
649
643
  }
650
644
  .db-select[data-variant=floating] > label {
651
645
  opacity: var(--db-opacity-xl);
@@ -773,75 +767,48 @@ input[type=radio]:checked) select:is([type=date],
773
767
  transition: opacity var(--db-transition-straight-emotional);
774
768
  }
775
769
  }
776
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
777
- > db-infotext > .db-infotext[data-semantic=successful]) {
770
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) {
778
771
  /* stylelint-disable-next-line at-rule-empty-line-before */
779
772
  }
780
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
781
- > db-infotext > .db-infotext[data-semantic=successful]) select,
782
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
783
- > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
773
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) select,
774
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) [id$=-placeholder] {
784
775
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
785
776
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
786
777
  }
787
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
788
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
789
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
790
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
778
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > db-infotext > .db-infotext,
779
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > .db-infotext {
791
780
  /* stylelint-disable-next-line at-rule-empty-line-before */
792
781
  }
793
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
794
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
795
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
796
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
782
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
783
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > .db-infotext[data-semantic=successful]:not([hidden]) {
797
784
  display: flex;
798
785
  }
799
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
800
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
801
- .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
802
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
786
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
787
+ .db-select:has(select:not([data-custom-validity]):is(:required):user-valid) > .db-infotext:not([data-semantic]):not([hidden]) {
803
788
  display: none;
804
789
  }
805
- .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
806
- > db-infotext > .db-infotext[data-semantic=successful]), .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
807
- > db-infotext > .db-infotext[data-semantic=successful]) {
790
+ .db-select:has(select[data-custom-validity=valid]), .db-select[data-custom-validity=valid] {
808
791
  /* stylelint-disable-next-line at-rule-empty-line-before */
809
792
  }
810
- .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
811
- > db-infotext > .db-infotext[data-semantic=successful]) select,
812
- .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
813
- > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder], .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
814
- > db-infotext > .db-infotext[data-semantic=successful]) select,
815
- .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
816
- > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
793
+ .db-select:has(select[data-custom-validity=valid]) select,
794
+ .db-select:has(select[data-custom-validity=valid]) [id$=-placeholder], .db-select[data-custom-validity=valid] select,
795
+ .db-select[data-custom-validity=valid] [id$=-placeholder] {
817
796
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
818
797
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
819
798
  }
820
- .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
821
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
822
- .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
823
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
824
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
825
- .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
826
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
799
+ .db-select:has(select[data-custom-validity=valid]) > db-infotext > .db-infotext,
800
+ .db-select:has(select[data-custom-validity=valid]) > .db-infotext, .db-select[data-custom-validity=valid] > db-infotext > .db-infotext,
801
+ .db-select[data-custom-validity=valid] > .db-infotext {
827
802
  /* stylelint-disable-next-line at-rule-empty-line-before */
828
803
  }
829
- .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
830
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
831
- .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
832
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
833
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
834
- .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
835
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
804
+ .db-select:has(select[data-custom-validity=valid]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
805
+ .db-select:has(select[data-custom-validity=valid]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-select[data-custom-validity=valid] > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
806
+ .db-select[data-custom-validity=valid] > .db-infotext[data-semantic=successful]:not([hidden]) {
836
807
  display: flex;
837
808
  }
838
- .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
839
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
840
- .db-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
841
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]), .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
842
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
843
- .db-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
844
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
809
+ .db-select:has(select[data-custom-validity=valid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
810
+ .db-select:has(select[data-custom-validity=valid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-select[data-custom-validity=valid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
811
+ .db-select[data-custom-validity=valid] > .db-infotext:not([data-semantic]):not([hidden]) {
845
812
  display: none;
846
813
  }
847
814
  .db-select:has(select:not([data-custom-validity]):is(:required):user-invalid) {