@db-ux/core-components 3.0.8 → 3.1.1

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 (14) hide show
  1. package/build/components/custom-select/custom-select.css +7 -7
  2. package/build/components/custom-select-list-item/custom-select-list-item.css +3 -3
  3. package/build/components/custom-select-list-item/custom-select-list-item.scss +1 -1
  4. package/build/components/input/input.css +7 -7
  5. package/build/components/select/select.css +8 -8
  6. package/build/components/select/select.scss +1 -1
  7. package/build/components/textarea/textarea.css +7 -7
  8. package/build/styles/absolute.css +3 -3
  9. package/build/styles/index.css +3 -3
  10. package/build/styles/internal/_form-components.scss +1 -1
  11. package/build/styles/relative.css +3 -3
  12. package/build/styles/rollup.css +3 -3
  13. package/build/styles/webpack.css +3 -3
  14. package/package.json +4 -4
package/build/components/custom-select/custom-select.css CHANGED
@@ -651,7 +651,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
651
651
 
652
652
  .db-custom-select[data-variant=floating]:has(summary:focus-within,
653
653
  summary:is(input, textarea):not(:placeholder-shown),
654
- > select option:checked:not([hidden]),
654
+ > select option:checked:not(.placeholder),
655
655
  input[type=checkbox]:checked,
656
656
  input[type=radio]:checked) > label {
657
657
  font: var(--db-type-body-2xs);
@@ -660,7 +660,7 @@ input[type=radio]:checked) > label {
660
660
  @layer variables {
661
661
  .db-custom-select[data-variant=floating]:has(summary:focus-within,
662
662
  summary:is(input, textarea):not(:placeholder-shown),
663
- > select option:checked:not([hidden]),
663
+ > select option:checked:not(.placeholder),
664
664
  input[type=checkbox]:checked,
665
665
  input[type=radio]:checked) > label {
666
666
  /* Those variables are only for components to calculate heights and change icons */
@@ -870,7 +870,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
870
870
  }
871
871
  .db-custom-select[data-variant=floating]:has(summary:focus-within,
872
872
  summary:is(input, textarea):not(:placeholder-shown),
873
- > select option:checked:not([hidden]),
873
+ > select option:checked:not(.placeholder),
874
874
  input[type=checkbox]:checked,
875
875
  input[type=radio]:checked) > label {
876
876
  inset-block-start: var(--db-spacing-fixed-2xs);
@@ -879,12 +879,12 @@ input[type=radio]:checked) > label {
879
879
  }
880
880
  .db-custom-select[data-variant=floating]:has(summary:focus-within,
881
881
  summary:is(input, textarea):not(:placeholder-shown),
882
- > select option:checked:not([hidden]),
882
+ > select option:checked:not(.placeholder),
883
883
  input[type=checkbox]:checked,
884
884
  input[type=radio]:checked) summary::placeholder,
885
885
  .db-custom-select[data-variant=floating]:has(summary:focus-within,
886
886
  summary:is(input, textarea):not(:placeholder-shown),
887
- > select option:checked:not([hidden]),
887
+ > select option:checked:not(.placeholder),
888
888
  input[type=checkbox]:checked,
889
889
  input[type=radio]:checked) [id$=-placeholder] {
890
890
  opacity: var(--db-opacity-xl);
@@ -896,12 +896,12 @@ input[type=radio]:checked) [id$=-placeholder] {
896
896
  @media screen and (prefers-reduced-motion: no-preference) {
897
897
  .db-custom-select[data-variant=floating]:has(summary:focus-within,
898
898
  summary:is(input, textarea):not(:placeholder-shown),
899
- > select option:checked:not([hidden]),
899
+ > select option:checked:not(.placeholder),
900
900
  input[type=checkbox]:checked,
901
901
  input[type=radio]:checked) summary::placeholder,
902
902
  .db-custom-select[data-variant=floating]:has(summary:focus-within,
903
903
  summary:is(input, textarea):not(:placeholder-shown),
904
- > select option:checked:not([hidden]),
904
+ > select option:checked:not(.placeholder),
905
905
  input[type=checkbox]:checked,
906
906
  input[type=radio]:checked) [id$=-placeholder] {
907
907
  transition: opacity var(--db-transition-straight-emotional);
package/build/components/custom-select-list-item/custom-select-list-item.css CHANGED
@@ -62,17 +62,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
62
62
 
63
63
  @layer variables {}
64
64
 
65
- .db-custom-select-list-item:not([data-disable-focus=true]):has(> label > input:focus-within) {
65
+ .db-custom-select-list-item:not([data-disable-focus=true]):has(> label > input:focus-visible) {
66
66
  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
67
67
  outline-offset: var(--db-border-width-xs);
68
68
  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
69
69
  }
70
70
  @media screen and (prefers-reduced-motion: no-preference) {
71
- .db-custom-select-list-item:not([data-disable-focus=true]):has(> label > input:focus-within) {
71
+ .db-custom-select-list-item:not([data-disable-focus=true]):has(> label > input:focus-visible) {
72
72
  transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
73
73
  }
74
74
  }
75
- .db-custom-select-list-item:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(> label > input:focus-within) {
75
+ .db-custom-select-list-item:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(> label > input:focus-visible) {
76
76
  border-radius: var(--db-border-radius-xs);
77
77
  }
78
78
 
package/build/components/custom-select-list-item/custom-select-list-item.scss CHANGED
@@ -34,7 +34,7 @@ db-custom-select-list-item:not(:last-of-type) {
34
34
  }
35
35
  }
36
36
 
37
- &:has(> label > input:focus-within) {
37
+ &:has(> label > input:focus-visible) {
38
38
  @extend %focus-placeholder;
39
39
  }
40
40
 
package/build/components/input/input.css CHANGED
@@ -494,7 +494,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
494
494
 
495
495
  .db-input[data-variant=floating]:has(input:focus-within,
496
496
  input:is(input, textarea):not(:placeholder-shown),
497
- > select option:checked:not([hidden]),
497
+ > select option:checked:not(.placeholder),
498
498
  input[type=checkbox]:checked,
499
499
  input[type=radio]:checked) > label {
500
500
  font: var(--db-type-body-2xs);
@@ -503,7 +503,7 @@ input[type=radio]:checked) > label {
503
503
  @layer variables {
504
504
  .db-input[data-variant=floating]:has(input:focus-within,
505
505
  input:is(input, textarea):not(:placeholder-shown),
506
- > select option:checked:not([hidden]),
506
+ > select option:checked:not(.placeholder),
507
507
  input[type=checkbox]:checked,
508
508
  input[type=radio]:checked) > label {
509
509
  /* Those variables are only for components to calculate heights and change icons */
@@ -623,7 +623,7 @@ input[type=radio]:checked) > label {
623
623
  }
624
624
  .db-input[data-variant=floating]:has(input:focus-within,
625
625
  input:is(input, textarea):not(:placeholder-shown),
626
- > select option:checked:not([hidden]),
626
+ > select option:checked:not(.placeholder),
627
627
  input[type=checkbox]:checked,
628
628
  input[type=radio]:checked) > label {
629
629
  inset-block-start: var(--db-spacing-fixed-2xs);
@@ -632,12 +632,12 @@ input[type=radio]:checked) > label {
632
632
  }
633
633
  .db-input[data-variant=floating]:has(input:focus-within,
634
634
  input:is(input, textarea):not(:placeholder-shown),
635
- > select option:checked:not([hidden]),
635
+ > select option:checked:not(.placeholder),
636
636
  input[type=checkbox]:checked,
637
637
  input[type=radio]:checked) input::placeholder,
638
638
  .db-input[data-variant=floating]:has(input:focus-within,
639
639
  input:is(input, textarea):not(:placeholder-shown),
640
- > select option:checked:not([hidden]),
640
+ > select option:checked:not(.placeholder),
641
641
  input[type=checkbox]:checked,
642
642
  input[type=radio]:checked) [id$=-placeholder] {
643
643
  opacity: var(--db-opacity-xl);
@@ -647,12 +647,12 @@ input[type=radio]:checked) [id$=-placeholder] {
647
647
  @media screen and (prefers-reduced-motion: no-preference) {
648
648
  .db-input[data-variant=floating]:has(input:focus-within,
649
649
  input:is(input, textarea):not(:placeholder-shown),
650
- > select option:checked:not([hidden]),
650
+ > select option:checked:not(.placeholder),
651
651
  input[type=checkbox]:checked,
652
652
  input[type=radio]:checked) input::placeholder,
653
653
  .db-input[data-variant=floating]:has(input:focus-within,
654
654
  input:is(input, textarea):not(:placeholder-shown),
655
- > select option:checked:not([hidden]),
655
+ > select option:checked:not(.placeholder),
656
656
  input[type=checkbox]:checked,
657
657
  input[type=radio]:checked) [id$=-placeholder] {
658
658
  transition: opacity var(--db-transition-straight-emotional);
package/build/components/select/select.css CHANGED
@@ -494,7 +494,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
494
494
 
495
495
  .db-select[data-variant=floating]:has(select:focus-within,
496
496
  select:is(input, textarea):not(:placeholder-shown),
497
- > select option:checked:not([hidden]),
497
+ > select option:checked:not(.placeholder),
498
498
  input[type=checkbox]:checked,
499
499
  input[type=radio]:checked) > label {
500
500
  font: var(--db-type-body-2xs);
@@ -503,7 +503,7 @@ input[type=radio]:checked) > label {
503
503
  @layer variables {
504
504
  .db-select[data-variant=floating]:has(select:focus-within,
505
505
  select:is(input, textarea):not(:placeholder-shown),
506
- > select option:checked:not([hidden]),
506
+ > select option:checked:not(.placeholder),
507
507
  input[type=checkbox]:checked,
508
508
  input[type=radio]:checked) > label {
509
509
  /* Those variables are only for components to calculate heights and change icons */
@@ -669,7 +669,7 @@ input[type=radio]:checked) > label {
669
669
  }
670
670
  .db-select[data-variant=floating]:has(select:focus-within,
671
671
  select:is(input, textarea):not(:placeholder-shown),
672
- > select option:checked:not([hidden]),
672
+ > select option:checked:not(.placeholder),
673
673
  input[type=checkbox]:checked,
674
674
  input[type=radio]:checked) > label {
675
675
  inset-block-start: var(--db-spacing-fixed-2xs);
@@ -678,12 +678,12 @@ input[type=radio]:checked) > label {
678
678
  }
679
679
  .db-select[data-variant=floating]:has(select:focus-within,
680
680
  select:is(input, textarea):not(:placeholder-shown),
681
- > select option:checked:not([hidden]),
681
+ > select option:checked:not(.placeholder),
682
682
  input[type=checkbox]:checked,
683
683
  input[type=radio]:checked) select::placeholder,
684
684
  .db-select[data-variant=floating]:has(select:focus-within,
685
685
  select:is(input, textarea):not(:placeholder-shown),
686
- > select option:checked:not([hidden]),
686
+ > select option:checked:not(.placeholder),
687
687
  input[type=checkbox]:checked,
688
688
  input[type=radio]:checked) [id$=-placeholder] {
689
689
  opacity: var(--db-opacity-xl);
@@ -695,12 +695,12 @@ input[type=radio]:checked) [id$=-placeholder] {
695
695
  @media screen and (prefers-reduced-motion: no-preference) {
696
696
  .db-select[data-variant=floating]:has(select:focus-within,
697
697
  select:is(input, textarea):not(:placeholder-shown),
698
- > select option:checked:not([hidden]),
698
+ > select option:checked:not(.placeholder),
699
699
  input[type=checkbox]:checked,
700
700
  input[type=radio]:checked) select::placeholder,
701
701
  .db-select[data-variant=floating]:has(select:focus-within,
702
702
  select:is(input, textarea):not(:placeholder-shown),
703
- > select option:checked:not([hidden]),
703
+ > select option:checked:not(.placeholder),
704
704
  input[type=checkbox]:checked,
705
705
  input[type=radio]:checked) [id$=-placeholder] {
706
706
  transition: opacity var(--db-transition-straight-emotional);
@@ -897,6 +897,6 @@ select[aria-disabled=true]) {
897
897
  .db-select optgroup {
898
898
  background-color: var(--db-adaptive-bg-basic-level-3-default);
899
899
  }
900
- .db-select:has(> select option:checked:not([hidden])) [id$=-placeholder] {
900
+ .db-select:has(> select option:checked:not(.placeholder)) [id$=-placeholder] {
901
901
  display: none;
902
902
  }
package/build/components/select/select.scss CHANGED
@@ -40,7 +40,7 @@
40
40
  background-color: colors.$db-adaptive-bg-basic-level-3-default;
41
41
  }
42
42
 
43
- &:has(> select option:checked:not([hidden])) {
43
+ &:has(> select option:checked:not(.placeholder)) {
44
44
  [id$="-placeholder"] {
45
45
  display: none;
46
46
  }
package/build/components/textarea/textarea.css CHANGED
@@ -144,7 +144,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
144
144
 
145
145
  .db-textarea[data-variant=floating]:has(textarea:focus-within,
146
146
  textarea:is(input, textarea):not(:placeholder-shown),
147
- > select option:checked:not([hidden]),
147
+ > select option:checked:not(.placeholder),
148
148
  input[type=checkbox]:checked,
149
149
  input[type=radio]:checked) > label {
150
150
  font: var(--db-type-body-2xs);
@@ -153,7 +153,7 @@ input[type=radio]:checked) > label {
153
153
  @layer variables {
154
154
  .db-textarea[data-variant=floating]:has(textarea:focus-within,
155
155
  textarea:is(input, textarea):not(:placeholder-shown),
156
- > select option:checked:not([hidden]),
156
+ > select option:checked:not(.placeholder),
157
157
  input[type=checkbox]:checked,
158
158
  input[type=radio]:checked) > label {
159
159
  /* Those variables are only for components to calculate heights and change icons */
@@ -420,7 +420,7 @@ input[type=radio]:checked) > label {
420
420
  }
421
421
  .db-textarea[data-variant=floating]:has(textarea:focus-within,
422
422
  textarea:is(input, textarea):not(:placeholder-shown),
423
- > select option:checked:not([hidden]),
423
+ > select option:checked:not(.placeholder),
424
424
  input[type=checkbox]:checked,
425
425
  input[type=radio]:checked) > label {
426
426
  inset-block-start: var(--db-spacing-fixed-2xs);
@@ -429,12 +429,12 @@ input[type=radio]:checked) > label {
429
429
  }
430
430
  .db-textarea[data-variant=floating]:has(textarea:focus-within,
431
431
  textarea:is(input, textarea):not(:placeholder-shown),
432
- > select option:checked:not([hidden]),
432
+ > select option:checked:not(.placeholder),
433
433
  input[type=checkbox]:checked,
434
434
  input[type=radio]:checked) textarea::placeholder,
435
435
  .db-textarea[data-variant=floating]:has(textarea:focus-within,
436
436
  textarea:is(input, textarea):not(:placeholder-shown),
437
- > select option:checked:not([hidden]),
437
+ > select option:checked:not(.placeholder),
438
438
  input[type=checkbox]:checked,
439
439
  input[type=radio]:checked) [id$=-placeholder] {
440
440
  opacity: var(--db-opacity-xl);
@@ -444,12 +444,12 @@ input[type=radio]:checked) [id$=-placeholder] {
444
444
  @media screen and (prefers-reduced-motion: no-preference) {
445
445
  .db-textarea[data-variant=floating]:has(textarea:focus-within,
446
446
  textarea:is(input, textarea):not(:placeholder-shown),
447
- > select option:checked:not([hidden]),
447
+ > select option:checked:not(.placeholder),
448
448
  input[type=checkbox]:checked,
449
449
  input[type=radio]:checked) textarea::placeholder,
450
450
  .db-textarea[data-variant=floating]:has(textarea:focus-within,
451
451
  textarea:is(input, textarea):not(:placeholder-shown),
452
- > select option:checked:not([hidden]),
452
+ > select option:checked:not(.placeholder),
453
453
  input[type=checkbox]:checked,
454
454
  input[type=radio]:checked) [id$=-placeholder] {
455
455
  transition: opacity var(--db-transition-straight-emotional);