@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/checkbox/checkbox.css CHANGED
@@ -177,10 +177,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
177
177
  * @mixin screen-min-max
178
178
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
179
179
  */
180
- .db-checkbox .db-infotext {
180
+ .db-checkbox > db-infotext > .db-infotext,
181
+ .db-checkbox > .db-infotext {
181
182
  margin-block-start: var(--db-spacing-fixed-2xs);
182
183
  }
183
- .db-checkbox .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
184
+ .db-checkbox > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
185
+ .db-checkbox > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
184
186
  display: none;
185
187
  }
186
188
 
@@ -282,13 +284,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
282
284
  --db-successful-on-bg-basic-emphasis-80-pressed
283
285
  );
284
286
  }
285
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext {
287
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
288
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext {
286
289
  /* stylelint-disable-next-line at-rule-empty-line-before */
287
290
  }
288
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
291
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
292
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
289
293
  display: flex;
290
294
  }
291
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
295
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
296
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
292
297
  display: none;
293
298
  }
294
299
  .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not(:checked) {
@@ -328,13 +333,19 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
328
333
  --db-successful-on-bg-basic-emphasis-80-pressed
329
334
  );
330
335
  }
331
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext {
336
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
337
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
338
+ .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext {
332
339
  /* stylelint-disable-next-line at-rule-empty-line-before */
333
340
  }
334
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful], .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
341
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
342
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
343
+ .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
335
344
  display: flex;
336
345
  }
337
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
346
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
347
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
348
+ .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
338
349
  display: none;
339
350
  }
340
351
  .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not(:checked), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not(:checked) {
@@ -374,10 +385,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
374
385
  --db-critical-on-bg-basic-emphasis-80-pressed
375
386
  );
376
387
  }
377
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) .db-infotext[data-semantic=critical] {
388
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
389
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext[data-semantic=critical] {
378
390
  display: flex;
379
391
  }
380
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) .db-infotext:not([data-semantic]) {
392
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
393
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext:not([data-semantic]) {
381
394
  display: none;
382
395
  }
383
396
  .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not(:checked) {
@@ -417,10 +430,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
417
430
  --db-critical-on-bg-basic-emphasis-80-pressed
418
431
  );
419
432
  }
420
- .db-checkbox:has(input[data-custom-validity=invalid]) .db-infotext[data-semantic=critical], .db-checkbox[data-custom-validity=invalid] .db-infotext[data-semantic=critical] {
433
+ .db-checkbox:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
434
+ .db-checkbox:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical], .db-checkbox[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical],
435
+ .db-checkbox[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
421
436
  display: flex;
422
437
  }
423
- .db-checkbox:has(input[data-custom-validity=invalid]) .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=invalid] .db-infotext:not([data-semantic]) {
438
+ .db-checkbox:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
439
+ .db-checkbox:has(input[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]),
440
+ .db-checkbox[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
424
441
  display: none;
425
442
  }
426
443
  .db-checkbox:has(input[data-custom-validity=invalid]) input:not(:checked), .db-checkbox[data-custom-validity=invalid] input:not(:checked) {
package/build/components/custom-select/custom-select.css CHANGED
@@ -325,11 +325,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
325
325
  }
326
326
  }
327
327
 
328
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]), .db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
328
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
329
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
330
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
331
+ > db-infotext > .db-infotext[data-semantic=successful]) {
329
332
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
330
333
  }
331
334
  @layer variables {
332
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]), .db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
335
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
336
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
337
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
338
+ > db-infotext > .db-infotext[data-semantic=successful]) {
333
339
  --db-adaptive-bg-basic-level-1-default: var(
334
340
  --db-successful-bg-basic-level-1-default
335
341
  );
@@ -677,10 +683,12 @@ input[type=radio]:checked) > label {
677
683
  }
678
684
  }
679
685
 
680
- .db-custom-select .db-infotext {
686
+ .db-custom-select > db-infotext > .db-infotext,
687
+ .db-custom-select > .db-infotext {
681
688
  margin-block-start: var(--db-spacing-fixed-2xs);
682
689
  }
683
- .db-custom-select .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
690
+ .db-custom-select > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
691
+ .db-custom-select > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
684
692
  display: none;
685
693
  }
686
694
 
@@ -737,85 +745,6 @@ input[type=radio]:checked) > label {
737
745
  inline-size: calc(100% - var(--db-form-component-padding-inline-end) - calc(var(--db-form-has-before) * (var(--db-base-body-icon-font-size-sm) + var(--db-spacing-fixed-sm))) - var(--db-spacing-fixed-sm));
738
746
  }
739
747
 
740
- @keyframes show-right-to-left {
741
- from {
742
- transform: translateX(110%);
743
- }
744
- to {
745
- transform: translateX(0%);
746
- }
747
- }
748
- @keyframes hide-right-to-left {
749
- from {
750
- transform: translateX(0%);
751
- }
752
- to {
753
- transform: translateX(110%);
754
- }
755
- }
756
- @keyframes show-left-to-right {
757
- from {
758
- transform: translateX(-110%);
759
- }
760
- to {
761
- transform: translateX(0%);
762
- }
763
- }
764
- @keyframes hide-left-to-right {
765
- from {
766
- transform: translateX(0%);
767
- }
768
- to {
769
- transform: translateX(-110%);
770
- }
771
- }
772
- @keyframes show-bottom-to-top {
773
- from {
774
- transform: translateY(110%);
775
- }
776
- to {
777
- transform: translateY(0%);
778
- }
779
- }
780
- @keyframes hide-bottom-to-top {
781
- from {
782
- transform: translateY(0%);
783
- }
784
- to {
785
- transform: translateY(110%);
786
- }
787
- }
788
- @keyframes show-top-to-bottom {
789
- from {
790
- transform: translateY(-110%);
791
- }
792
- to {
793
- transform: translateY(0%);
794
- }
795
- }
796
- @keyframes hide-top-to-bottom {
797
- from {
798
- transform: translateY(0%);
799
- }
800
- to {
801
- transform: translateY(-110%);
802
- }
803
- }
804
- @keyframes popover-animation {
805
- 0% {
806
- opacity: 0;
807
- transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
808
- }
809
- 100% {
810
- opacity: 1;
811
- transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
812
- }
813
- }
814
- @keyframes rotate {
815
- 100% {
816
- transform: rotate(1turn);
817
- }
818
- }
819
748
  dialog[data-variant], dialog[data-backdrop] {
820
749
  position: fixed;
821
750
  inset: 0;
@@ -989,39 +918,75 @@ input[type=radio]:checked) [id$=-placeholder] {
989
918
  content: "*"/"";
990
919
  }
991
920
  }
992
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) {
921
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
922
+ > db-infotext > .db-infotext[data-semantic=successful]) {
993
923
  /* stylelint-disable-next-line at-rule-empty-line-before */
994
924
  }
995
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) summary,
996
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) [id$=-placeholder] {
925
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
926
+ > db-infotext > .db-infotext[data-semantic=successful]) summary,
927
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
928
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
997
929
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
998
930
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
999
931
  }
1000
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext {
932
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
933
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
934
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
935
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
1001
936
  /* stylelint-disable-next-line at-rule-empty-line-before */
1002
937
  }
1003
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
938
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
939
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
940
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
941
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
1004
942
  display: flex;
1005
943
  }
1006
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
944
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
945
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
946
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
947
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
1007
948
  display: none;
1008
949
  }
1009
- .db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
950
+ .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
951
+ > db-infotext > .db-infotext[data-semantic=successful]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
952
+ > db-infotext > .db-infotext[data-semantic=successful]) {
1010
953
  /* stylelint-disable-next-line at-rule-empty-line-before */
1011
954
  }
1012
- .db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) summary,
1013
- .db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) [id$=-placeholder], .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) summary,
1014
- .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) [id$=-placeholder] {
955
+ .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
956
+ > db-infotext > .db-infotext[data-semantic=successful]) summary,
957
+ .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
958
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder], .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
959
+ > db-infotext > .db-infotext[data-semantic=successful]) summary,
960
+ .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
961
+ > db-infotext > .db-infotext[data-semantic=successful]) [id$=-placeholder] {
1015
962
  color: var(--db-successful-on-bg-basic-emphasis-100-default);
1016
963
  caret-color: var(--db-successful-on-bg-basic-emphasis-100-default);
1017
964
  }
1018
- .db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext, .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext {
965
+ .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
966
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
967
+ .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
968
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext, .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
969
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
970
+ .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
971
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext {
1019
972
  /* stylelint-disable-next-line at-rule-empty-line-before */
1020
973
  }
1021
- .db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful], .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext[data-semantic=successful] {
974
+ .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
975
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
976
+ .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
977
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
978
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
979
+ .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
980
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
1022
981
  display: flex;
1023
982
  }
1024
- .db-custom-select:has(select[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]), .db-custom-select[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
983
+ .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
984
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
985
+ .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
986
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
987
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
988
+ .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
989
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
1025
990
  display: none;
1026
991
  }
1027
992
  .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) {
@@ -1032,10 +997,12 @@ input[type=radio]:checked) [id$=-placeholder] {
1032
997
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
1033
998
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
1034
999
  }
1035
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) .db-infotext[data-semantic=critical] {
1000
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
1001
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext[data-semantic=critical] {
1036
1002
  display: flex;
1037
1003
  }
1038
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) .db-infotext:not([data-semantic]) {
1004
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
1005
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext:not([data-semantic]) {
1039
1006
  display: none;
1040
1007
  }
1041
1008
  .db-custom-select:has(select[data-custom-validity=invalid]), .db-custom-select[data-custom-validity=invalid] {
@@ -1047,10 +1014,14 @@ input[type=radio]:checked) [id$=-placeholder] {
1047
1014
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
1048
1015
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
1049
1016
  }
1050
- .db-custom-select:has(select[data-custom-validity=invalid]) .db-infotext[data-semantic=critical], .db-custom-select[data-custom-validity=invalid] .db-infotext[data-semantic=critical] {
1017
+ .db-custom-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
1018
+ .db-custom-select:has(select[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical], .db-custom-select[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical],
1019
+ .db-custom-select[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
1051
1020
  display: flex;
1052
1021
  }
1053
- .db-custom-select:has(select[data-custom-validity=invalid]) .db-infotext:not([data-semantic]), .db-custom-select[data-custom-validity=invalid] .db-infotext:not([data-semantic]) {
1022
+ .db-custom-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
1023
+ .db-custom-select:has(select[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]), .db-custom-select[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]),
1024
+ .db-custom-select[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
1054
1025
  display: none;
1055
1026
  }
1056
1027
  .db-custom-select summary::placeholder,
package/build/components/custom-select/custom-select.scss CHANGED
@@ -5,7 +5,6 @@
5
5
  @use "../../styles/internal/form-components";
6
6
  @use "../../styles/internal/component";
7
7
  @use "../../styles/internal/select-components";
8
- @use "../../styles/internal/scrollbar";
9
8
  @use "../../styles/dialog-init";
10
9
 
11
10
  %custom-select-placement-top {
package/build/components/custom-select-list/custom-select-list.css CHANGED
@@ -119,159 +119,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
119
119
  * @mixin screen-min-max
120
120
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
121
121
  */
122
- .db-custom-select-list::-webkit-scrollbar, .db-custom-select-list::-webkit-scrollbar-corner {
123
- transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
124
- }
125
-
126
- @keyframes show-right-to-left {
127
- from {
128
- transform: translateX(110%);
129
- }
130
- to {
131
- transform: translateX(0%);
132
- }
133
- }
134
- @keyframes hide-right-to-left {
135
- from {
136
- transform: translateX(0%);
137
- }
138
- to {
139
- transform: translateX(110%);
140
- }
141
- }
142
- @keyframes show-left-to-right {
143
- from {
144
- transform: translateX(-110%);
145
- }
146
- to {
147
- transform: translateX(0%);
148
- }
149
- }
150
- @keyframes hide-left-to-right {
151
- from {
152
- transform: translateX(0%);
153
- }
154
- to {
155
- transform: translateX(-110%);
156
- }
157
- }
158
- @keyframes show-bottom-to-top {
159
- from {
160
- transform: translateY(110%);
161
- }
162
- to {
163
- transform: translateY(0%);
164
- }
165
- }
166
- @keyframes hide-bottom-to-top {
167
- from {
168
- transform: translateY(0%);
169
- }
170
- to {
171
- transform: translateY(110%);
172
- }
173
- }
174
- @keyframes show-top-to-bottom {
175
- from {
176
- transform: translateY(-110%);
177
- }
178
- to {
179
- transform: translateY(0%);
180
- }
181
- }
182
- @keyframes hide-top-to-bottom {
183
- from {
184
- transform: translateY(0%);
185
- }
186
- to {
187
- transform: translateY(-110%);
188
- }
189
- }
190
- @keyframes popover-animation {
191
- 0% {
192
- opacity: 0;
193
- transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
194
- }
195
- 100% {
196
- opacity: 1;
197
- transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
198
- }
199
- }
200
- @keyframes rotate {
201
- 100% {
202
- transform: rotate(1turn);
203
- }
204
- }
205
- .db-custom-select-list {
206
- /* Buttons */
207
- /* Up */
208
- /* Down */
209
- /* Left */
210
- /* Right */
211
- }
212
- .db-custom-select-list::-webkit-scrollbar {
213
- z-index: 3;
214
- inline-size: 0.5rem;
215
- block-size: 0.5rem;
216
- background-color: var(--db-adaptive-bg-basic-level-1-default);
217
- border-start-end-radius: var(--db-border-radius-xs);
218
- }
219
- .db-custom-select-list:is(:hover, :focus)::-webkit-scrollbar-track, .db-custom-select-list:is(:hover, :focus)::-webkit-scrollbar-button:single-button {
220
- background-color: var(--db-adaptive-bg-basic-transparent-hovered);
221
- }
222
- .db-custom-select-list:read-only::-webkit-scrollbar-track, .db-custom-select-list:read-only::-webkit-scrollbar-button:single-button {
223
- background-color: var(--db-adaptive-bg-basic-level-1-default);
224
- }
225
- .db-custom-select-list::-webkit-scrollbar-track {
226
- background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
227
- }
228
- .db-custom-select-list::-webkit-scrollbar-thumb {
229
- background-color: var(--db-adaptive-bg-basic-transparent-pressed);
230
- }
231
- .db-custom-select-list::-webkit-scrollbar-button:single-button {
232
- background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
233
- background-size: 0.5rem;
234
- background-repeat: no-repeat;
235
- background-position: center;
236
- block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
237
- }
238
- .db-custom-select-list::-webkit-scrollbar-button:single-button:is(:hover, :focus) {
239
- background-color: var(--db-adaptive-bg-basic-transparent-hovered);
240
- }
241
- .db-custom-select-list::-webkit-scrollbar-button:single-button:active {
242
- background-color: var(--db-adaptive-bg-basic-transparent-pressed);
243
- }
244
- .db-custom-select-list::-webkit-scrollbar-button:single-button:vertical:decrement {
245
- border-start-end-radius: var(--db-border-radius-xs);
246
- background-image: var(--db-scrollbar-button-vertical-decrement);
247
- }
248
- .db-custom-select-list::-webkit-scrollbar-button:single-button:vertical:increment {
249
- background-image: var(--db-scrollbar-button-vertical-increment);
250
- }
251
- .db-custom-select-list::-webkit-scrollbar-button:single-button:horizontal:decrement {
252
- background-image: var(--db-scrollbar-button-horizontal-decrement);
253
- }
254
- .db-custom-select-list::-webkit-scrollbar-button:single-button:horizontal:increment {
255
- background-image: var(--db-scrollbar-button-horizontal-increment);
256
- }
257
- [data-variant=floating].db-custom-select-list::-webkit-resizer {
258
- background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
259
- }
260
- [data-variant=floating].db-custom-select-list::-webkit-scrollbar-corner {
261
- background-color: var(--db-adaptive-bg-basic-level-1-default);
262
- }
263
- .db-custom-select-list::-webkit-resizer {
264
- background-color: var(--db-adaptive-bg-basic-transparent-full-default);
265
- background-size: 0.5rem;
266
- background-repeat: no-repeat;
267
- background-position: center;
268
- background-image: var(--db-textarea-resizer-image);
269
- border-end-end-radius: var(--db-border-radius-xs);
270
- }
271
- .db-custom-select-list::-webkit-scrollbar-corner {
272
- border-end-end-radius: var(--db-border-radius-xs);
273
- }
274
-
275
122
  .db-custom-select-list {
276
123
  all: unset;
277
124
  padding: var(--db-spacing-fixed-sm);
package/build/components/custom-select-list/custom-select-list.scss CHANGED
@@ -1,10 +1,7 @@
1
1
  @use "@db-ux/core-foundations/build/styles/variables";
2
2
  @use "../../styles/internal/form-components";
3
- @use "../../styles/internal/scrollbar";
4
3
 
5
4
  .db-custom-select-list {
6
- @extend %scrollbar;
7
-
8
5
  all: unset;
9
6
  padding: variables.$db-spacing-fixed-sm;
10
7
  overflow-y: auto;
package/build/components/custom-select-list-item/custom-select-list-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-custom-select-list-item:not([data-disable-focus=true]):has(> label > input:focus-within) {
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
  }