@db-ux/core-components 4.5.2 → 4.5.4

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 (40) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/build/components/accordion-item/accordion-item.css +2 -2
  3. package/build/components/accordion-item/accordion-item.scss +1 -1
  4. package/build/components/custom-button/custom-button.css +1 -1
  5. package/build/components/custom-select/custom-select.css +6 -6
  6. package/build/components/custom-select-dropdown/custom-select-dropdown.css +3 -3
  7. package/build/components/custom-select-dropdown/custom-select-dropdown.scss +1 -1
  8. package/build/components/custom-select-list-item/custom-select-list-item.css +1 -1
  9. package/build/components/drawer/drawer.css +2 -2
  10. package/build/components/drawer/drawer.scss +2 -2
  11. package/build/components/header/header.css +22 -22
  12. package/build/components/input/input.css +6 -6
  13. package/build/components/input/input.scss +1 -1
  14. package/build/components/navigation/navigation.css +12 -12
  15. package/build/components/navigation/navigation.scss +1 -1
  16. package/build/components/navigation-item/navigation-item.css +11 -11
  17. package/build/components/navigation-item/navigation-item.scss +2 -2
  18. package/build/components/page/page.css +47 -41
  19. package/build/components/page/page.scss +31 -27
  20. package/build/components/popover/popover.css +12 -12
  21. package/build/components/radio/radio.css +1 -1
  22. package/build/components/radio/radio.scss +1 -1
  23. package/build/components/select/select.css +5 -5
  24. package/build/components/switch/switch.css +3 -6
  25. package/build/components/switch/switch.scss +3 -7
  26. package/build/components/tab-item/tab-item.css +1 -1
  27. package/build/components/tabs/tabs.css +3 -3
  28. package/build/components/textarea/textarea.css +5 -5
  29. package/build/components/textarea/textarea.scss +2 -2
  30. package/build/components/tooltip/tooltip.css +12 -12
  31. package/build/styles/absolute.css +7 -7
  32. package/build/styles/index.css +7 -7
  33. package/build/styles/internal/_db-puls.scss +3 -3
  34. package/build/styles/internal/_form-components.scss +3 -3
  35. package/build/styles/internal/_popover-component.scss +2 -2
  36. package/build/styles/internal/_select-components.scss +1 -1
  37. package/build/styles/relative.css +7 -7
  38. package/build/styles/rollup.css +7 -7
  39. package/build/styles/webpack.css +7 -7
  40. package/package.json +5 -5
package/build/components/navigation-item/navigation-item.scss CHANGED
@@ -26,7 +26,7 @@
26
26
  visibility: visible;
27
27
  transform: translateX(0%);
28
28
 
29
- @media screen and (prefers-reduced-motion: no-preference) {
29
+ @media (prefers-reduced-motion: no-preference) {
30
30
  transition:
31
31
  visibility 0ms linear 0ms,
32
32
  transform #{variables.$db-transition-duration-extra-slow}
@@ -44,7 +44,7 @@
44
44
  transform: translateX(110%);
45
45
  }
46
46
 
47
- @media screen and (prefers-reduced-motion: no-preference) {
47
+ @media (prefers-reduced-motion: no-preference) {
48
48
  ~ .db-sub-navigation {
49
49
  transition:
50
50
  visibility 0ms linear 410ms,
package/build/components/page/page.css CHANGED
@@ -33,53 +33,59 @@
33
33
 
34
34
  @layer variables {}
35
35
 
36
- .db-page-document {
37
- block-size: 100%;
38
- overflow: hidden;
36
+ @media screen {
37
+ .db-page-document {
38
+ block-size: 100%;
39
+ overflow: hidden;
40
+ }
39
41
  }
40
42
 
41
- .db-page {
42
- opacity: 0;
43
+ @media screen {
44
+ .db-page {
45
+ opacity: 0;
46
+ }
43
47
  }
44
48
  @media screen and (prefers-reduced-motion: no-preference) {
45
49
  .db-page[data-fade-in=true] {
46
50
  transition: opacity var(--db-transition-straight-emotional);
47
51
  }
48
52
  }
49
- .db-page:not([data-fonts-loaded]), .db-page[data-fonts-loaded=true] {
50
- opacity: 1;
51
- }
52
- .db-page[data-variant=fixed] {
53
- block-size: 100%;
54
- min-block-size: 100%;
55
- flex-direction: column;
56
- /* workaround for angular */
57
- }
58
- .db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer) {
59
- flex: 0 1 auto;
60
- flex-grow: 0;
61
- flex-shrink: 0;
62
- }
63
- .db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer):not([hidden]) {
64
- display: flex;
65
- }
66
- .db-page[data-variant=fixed]:not([hidden]) {
67
- display: flex;
68
- }
69
- .db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer) {
70
- flex: 0 1 auto;
71
- flex-grow: 0;
72
- flex-shrink: 0;
73
- }
74
- .db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer):not([hidden]) {
75
- display: flex;
76
- }
77
- .db-page[data-variant=fixed] > .db-main {
78
- flex-direction: column;
79
- overflow: auto;
80
- flex: 1 1 auto;
81
- inline-size: 100%;
82
- }
83
- .db-page[data-variant=fixed] > .db-main:not([hidden]) {
84
- display: flex;
53
+ @media screen {
54
+ .db-page:not([data-fonts-loaded]), .db-page[data-fonts-loaded=true] {
55
+ opacity: 1;
56
+ }
57
+ .db-page[data-variant=fixed] {
58
+ block-size: 100%;
59
+ min-block-size: 100%;
60
+ flex-direction: column;
61
+ /* workaround for angular */
62
+ }
63
+ .db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer) {
64
+ flex: 0 1 auto;
65
+ flex-grow: 0;
66
+ flex-shrink: 0;
67
+ }
68
+ .db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer):not([hidden]) {
69
+ display: flex;
70
+ }
71
+ .db-page[data-variant=fixed]:not([hidden]) {
72
+ display: flex;
73
+ }
74
+ .db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer) {
75
+ flex: 0 1 auto;
76
+ flex-grow: 0;
77
+ flex-shrink: 0;
78
+ }
79
+ .db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer):not([hidden]) {
80
+ display: flex;
81
+ }
82
+ .db-page[data-variant=fixed] > .db-main {
83
+ flex-direction: column;
84
+ overflow: auto;
85
+ flex: 1 1 auto;
86
+ inline-size: 100%;
87
+ }
88
+ .db-page[data-variant=fixed] > .db-main:not([hidden]) {
89
+ display: flex;
90
+ }
85
91
  }
package/build/components/page/page.scss CHANGED
@@ -2,8 +2,10 @@
2
2
  @use "@db-ux/core-foundations/build/styles/helpers";
3
3
 
4
4
  .db-page-document {
5
- block-size: 100%;
6
- overflow: hidden;
5
+ @media screen {
6
+ block-size: 100%;
7
+ overflow: hidden;
8
+ }
7
9
  }
8
10
 
9
11
  @mixin header-footer-style {
@@ -17,41 +19,43 @@
17
19
  }
18
20
 
19
21
  .db-page {
20
- opacity: 0;
22
+ @media screen {
23
+ opacity: 0;
21
24
 
22
- @media screen and (prefers-reduced-motion: no-preference) {
23
- &[data-fade-in="true"] {
24
- transition: opacity variables.$db-transition-straight-emotional;
25
+ @media (prefers-reduced-motion: no-preference) {
26
+ &[data-fade-in="true"] {
27
+ transition: opacity variables.$db-transition-straight-emotional;
28
+ }
25
29
  }
26
- }
27
30
 
28
- &:not([data-fonts-loaded]),
29
- &[data-fonts-loaded="true"] {
30
- opacity: 1;
31
- }
31
+ &:not([data-fonts-loaded]),
32
+ &[data-fonts-loaded="true"] {
33
+ opacity: 1;
34
+ }
32
35
 
33
- &[data-variant="fixed"] {
34
- @include header-footer-style;
36
+ &[data-variant="fixed"] {
37
+ @include header-footer-style;
35
38
 
36
- block-size: 100%;
37
- min-block-size: 100%;
39
+ block-size: 100%;
40
+ min-block-size: 100%;
38
41
 
39
- @include helpers.display(flex);
42
+ @include helpers.display(flex);
40
43
 
41
- flex-direction: column;
44
+ flex-direction: column;
42
45
 
43
- /* workaround for angular */
44
- > :is(db-header, dbheader, dbfooter, db-footer) {
45
- @include header-footer-style;
46
- }
46
+ /* workaround for angular */
47
+ > :is(db-header, dbheader, dbfooter, db-footer) {
48
+ @include header-footer-style;
49
+ }
47
50
 
48
- > .db-main {
49
- @include helpers.display(flex);
51
+ > .db-main {
52
+ @include helpers.display(flex);
50
53
 
51
- flex-direction: column;
52
- overflow: auto;
53
- flex: 1 1 auto;
54
- inline-size: 100%;
54
+ flex-direction: column;
55
+ overflow: auto;
56
+ flex: 1 1 auto;
57
+ inline-size: 100%;
58
+ }
55
59
  }
56
60
  }
57
61
  }
package/build/components/popover/popover.css CHANGED
@@ -164,13 +164,13 @@
164
164
  opacity: 1;
165
165
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
166
166
  }
167
- @media screen and (prefers-reduced-motion: reduce) {
167
+ @media (prefers-reduced-motion: reduce) {
168
168
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-corrected-placement]):not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-corrected-placement]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-corrected-placement]):not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-corrected-placement]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=bottom]:not([data-open=false]), .db-popover > article[data-corrected-placement^=bottom][data-open=true] {
169
169
  opacity: 1;
170
170
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
171
171
  }
172
172
  }
173
- @media screen and (prefers-reduced-motion: no-preference) {
173
+ @media (prefers-reduced-motion: no-preference) {
174
174
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=bottom][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=bottom][data-animation=true][data-open=true] {
175
175
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
176
176
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -183,7 +183,7 @@
183
183
  animation-delay: var(--db-transition-duration-medium);
184
184
  }
185
185
  }
186
- @media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
186
+ @media (prefers-reduced-motion: no-preference) and (width <= 64em) {
187
187
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-corrected-placement])[data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=bottom][data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-corrected-placement^=bottom][data-animation=true][data-open=true]:not([data-delay]) {
188
188
  animation-delay: var(--db-transition-duration-medium);
189
189
  }
@@ -195,13 +195,13 @@
195
195
  opacity: 1;
196
196
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
197
197
  }
198
- @media screen and (prefers-reduced-motion: reduce) {
198
+ @media (prefers-reduced-motion: reduce) {
199
199
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-corrected-placement]):not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-corrected-placement]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=top]:not([data-open=false]), .db-popover > article[data-corrected-placement^=top][data-open=true] {
200
200
  opacity: 1;
201
201
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
202
202
  }
203
203
  }
204
- @media screen and (prefers-reduced-motion: no-preference) {
204
+ @media (prefers-reduced-motion: no-preference) {
205
205
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=top][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=top][data-animation=true][data-open=true] {
206
206
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
207
207
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -214,7 +214,7 @@
214
214
  animation-delay: var(--db-transition-duration-medium);
215
215
  }
216
216
  }
217
- @media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
217
+ @media (prefers-reduced-motion: no-preference) and (width <= 64em) {
218
218
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-corrected-placement])[data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=top][data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-corrected-placement^=top][data-animation=true][data-open=true]:not([data-delay]) {
219
219
  animation-delay: var(--db-transition-duration-medium);
220
220
  }
@@ -226,13 +226,13 @@
226
226
  opacity: 1;
227
227
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
228
228
  }
229
- @media screen and (prefers-reduced-motion: reduce) {
229
+ @media (prefers-reduced-motion: reduce) {
230
230
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-corrected-placement]):not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-corrected-placement]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=right]:not([data-open=false]), .db-popover > article[data-corrected-placement^=right][data-open=true] {
231
231
  opacity: 1;
232
232
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
233
233
  }
234
234
  }
235
- @media screen and (prefers-reduced-motion: no-preference) {
235
+ @media (prefers-reduced-motion: no-preference) {
236
236
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=right][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=right][data-animation=true][data-open=true] {
237
237
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
238
238
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -245,7 +245,7 @@
245
245
  animation-delay: var(--db-transition-duration-medium);
246
246
  }
247
247
  }
248
- @media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
248
+ @media (prefers-reduced-motion: no-preference) and (width <= 64em) {
249
249
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-corrected-placement])[data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=right][data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-corrected-placement^=right][data-animation=true][data-open=true]:not([data-delay]) {
250
250
  animation-delay: var(--db-transition-duration-medium);
251
251
  }
@@ -257,13 +257,13 @@
257
257
  opacity: 1;
258
258
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
259
259
  }
260
- @media screen and (prefers-reduced-motion: reduce) {
260
+ @media (prefers-reduced-motion: reduce) {
261
261
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-corrected-placement]):not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-corrected-placement]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=left]:not([data-open=false]), .db-popover > article[data-corrected-placement^=left][data-open=true] {
262
262
  opacity: 1;
263
263
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
264
264
  }
265
265
  }
266
- @media screen and (prefers-reduced-motion: no-preference) {
266
+ @media (prefers-reduced-motion: no-preference) {
267
267
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-corrected-placement])[data-animation=true]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-corrected-placement])[data-animation=true], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=left][data-animation=true]:not([data-open=false]), .db-popover > article[data-corrected-placement^=left][data-animation=true][data-open=true] {
268
268
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
269
269
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -276,7 +276,7 @@
276
276
  animation-delay: var(--db-transition-duration-medium);
277
277
  }
278
278
  }
279
- @media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
279
+ @media (prefers-reduced-motion: no-preference) and (width <= 64em) {
280
280
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-corrected-placement])[data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-corrected-placement^=left][data-animation=true]:not([data-delay]):not([data-open=false]), .db-popover > article[data-corrected-placement^=left][data-animation=true][data-open=true]:not([data-delay]) {
281
281
  animation-delay: var(--db-transition-duration-medium);
282
282
  }
package/build/components/radio/radio.css CHANGED
@@ -299,7 +299,7 @@
299
299
  .db-radio input {
300
300
  border-radius: var(--db-border-radius-full);
301
301
  }
302
- @media screen and (prefers-reduced-motion: no-preference) {
302
+ @media (prefers-reduced-motion: no-preference) {
303
303
  .db-radio input {
304
304
  transition: border-width var(--db-transition-duration-fast) var(--db-transition-timing-functional);
305
305
  }
package/build/components/radio/radio.scss CHANGED
@@ -46,7 +46,7 @@
46
46
  input {
47
47
  border-radius: variables.$db-border-radius-full;
48
48
 
49
- @media screen and (prefers-reduced-motion: no-preference) {
49
+ @media (prefers-reduced-motion: no-preference) {
50
50
  transition: border-width variables.$db-transition-duration-fast
51
51
  variables.$db-transition-timing-functional;
52
52
  }
package/build/components/select/select.css CHANGED
@@ -526,7 +526,7 @@ input[type=radio]:checked) > label {
526
526
  .db-select::after {
527
527
  pointer-events: none;
528
528
  }
529
- @media screen and (prefers-reduced-motion: no-preference) {
529
+ @media (prefers-reduced-motion: no-preference) {
530
530
  .db-select::after {
531
531
  transition: transform var(--db-transition-straight-emotional);
532
532
  }
@@ -551,7 +551,7 @@ input[type=radio]:checked) > label {
551
551
  inset-inline-start: 0;
552
552
  opacity: 0;
553
553
  }
554
- @media screen and (prefers-reduced-motion: no-preference) {
554
+ @media (prefers-reduced-motion: no-preference) {
555
555
  .db-select-placeholder {
556
556
  transition: opacity var(--db-transition-straight-emotional), outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
557
557
  }
@@ -684,7 +684,7 @@ input[type=radio]:checked) [id$=-placeholder] {
684
684
  /* stylelint-disable-next-line db-ux/use-spacings */
685
685
  padding-block-start: var(--db-base-body-icon-font-size-2xs);
686
686
  }
687
- @media screen and (prefers-reduced-motion: no-preference) {
687
+ @media (prefers-reduced-motion: no-preference) {
688
688
  .db-select[data-variant=floating]:has(select:focus-within,
689
689
  select:is(input, textarea):not(:placeholder-shown),
690
690
  > select option:checked:not(.placeholder),
@@ -723,7 +723,7 @@ input[type=radio]:checked) select:is([type=date],
723
723
  /* stylelint-disable-next-line db-ux/use-spacings */
724
724
  padding-block-start: var(--db-base-body-icon-font-size-2xs);
725
725
  }
726
- @media screen and (prefers-reduced-motion: no-preference) {
726
+ @media (prefers-reduced-motion: no-preference) {
727
727
  .db-select[data-variant=floating]:has(select:focus-within,
728
728
  select:is(input, textarea):not(:placeholder-shown),
729
729
  > select option:checked:not(.placeholder),
@@ -893,7 +893,7 @@ input[type=radio]:checked) select:is([type=date],
893
893
  white-space: nowrap;
894
894
  overflow: hidden;
895
895
  }
896
- @media screen and (prefers-reduced-motion: no-preference) {
896
+ @media (prefers-reduced-motion: no-preference) {
897
897
  .db-select > label {
898
898
  transition: font-size var(--db-transition-straight-emotional);
899
899
  }
package/build/components/switch/switch.css CHANGED
@@ -522,7 +522,7 @@
522
522
  transform: translateX(var(--thumb-offset-x));
523
523
  margin-inline-end: calc(calc(var(--db-icon-font-size)) - calc(var(--db-icon-font-size) - 0.125rem * 2));
524
524
  }
525
- @media screen and (prefers-reduced-motion: no-preference) {
525
+ @media (prefers-reduced-motion: no-preference) {
526
526
  .db-switch input::before {
527
527
  transition: margin var(--db-transition-duration-fast) var(--db-transition-timing-emotional), inline-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), block-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), transform var(--db-transition-duration-fast) var(--db-transition-timing-emotional), visibility var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
528
528
  }
@@ -563,7 +563,7 @@
563
563
  .db-switch input[data-aid-icon-trailing]:checked::after {
564
564
  --db-icon-trailing: attr(data-aid-icon-trailing);
565
565
  }
566
- @media screen and (prefers-reduced-motion: no-preference) {
566
+ @media (prefers-reduced-motion: no-preference) {
567
567
  .db-switch input {
568
568
  transition: none;
569
569
  }
@@ -574,14 +574,11 @@
574
574
  .db-switch[data-hide-label=true] > label > span {
575
575
  font-size: 0;
576
576
  }
577
- .db-switch[data-size=small] > label {
578
- gap: var(--db-spacing-fixed-2xs);
579
- }
580
577
  .db-switch[data-visual-aid=true] input::after {
581
578
  visibility: visible;
582
579
  block-size: calc(var(--db-icon-font-size));
583
580
  }
584
- @media screen and (prefers-reduced-motion: no-preference) {
581
+ @media (prefers-reduced-motion: no-preference) {
585
582
  .db-switch[data-visual-aid=true] input::after {
586
583
  transition: transform var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
587
584
  }
package/build/components/switch/switch.scss CHANGED
@@ -108,7 +108,7 @@ $checked-active-transition-size: calc(
108
108
  #{$switch-active-thumb-size} - #{$switch-inactive-thumb-size}
109
109
  );
110
110
 
111
- @media screen and (prefers-reduced-motion: no-preference) {
111
+ @media (prefers-reduced-motion: no-preference) {
112
112
  transition:
113
113
  margin variables.$db-transition-duration-fast
114
114
  variables.$db-transition-timing-emotional,
@@ -167,7 +167,7 @@ $checked-active-transition-size: calc(
167
167
  --db-icon-trailing: attr(data-aid-icon-trailing);
168
168
  }
169
169
 
170
- @media screen and (prefers-reduced-motion: no-preference) {
170
+ @media (prefers-reduced-motion: no-preference) {
171
171
  // Overwrite default transition for switch border
172
172
  transition: none;
173
173
  }
@@ -184,10 +184,6 @@ $checked-active-transition-size: calc(
184
184
  }
185
185
 
186
186
  &[data-size="small"] {
187
- > label {
188
- gap: variables.$db-spacing-fixed-2xs;
189
- }
190
-
191
187
  input {
192
188
  @extend %db-overwrite-font-size-xs;
193
189
  }
@@ -199,7 +195,7 @@ $checked-active-transition-size: calc(
199
195
  visibility: visible;
200
196
  block-size: $switch-active-thumb-size;
201
197
 
202
- @media screen and (prefers-reduced-motion: no-preference) {
198
+ @media (prefers-reduced-motion: no-preference) {
203
199
  transition: transform variables.$db-transition-duration-fast
204
200
  variables.$db-transition-timing-emotional;
205
201
  }
package/build/components/tab-item/tab-item.css CHANGED
@@ -57,7 +57,7 @@
57
57
  outline-offset: var(--db-border-width-xs);
58
58
  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
59
59
  }
60
- @media screen and (prefers-reduced-motion: no-preference) {
60
+ @media (prefers-reduced-motion: no-preference) {
61
61
  .db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
62
62
  transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
63
63
  }
package/build/components/tabs/tabs.css CHANGED
@@ -111,7 +111,7 @@
111
111
  position: absolute;
112
112
  border-radius: var(--db-border-radius-xs);
113
113
  }
114
- @media screen and (prefers-reduced-motion: no-preference) {
114
+ @media (prefers-reduced-motion: no-preference) {
115
115
  .db-tabs .db-tab-item::after {
116
116
  transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
117
117
  }
@@ -196,7 +196,7 @@
196
196
  block-size: var(--db-border-width-xs);
197
197
  inline-size: 100%;
198
198
  }
199
- @media (forced-colors: active) {
199
+ @media (forced-colors: active), print {
200
200
  .db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
201
201
  border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
202
202
  }
@@ -221,7 +221,7 @@
221
221
  block-size: 100%;
222
222
  inline-size: var(--db-border-width-xs);
223
223
  }
224
- @media (forced-colors: active) {
224
+ @media (forced-colors: active), print {
225
225
  .db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item:has(input:checked)::after {
226
226
  border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
227
227
  }
package/build/components/textarea/textarea.css CHANGED
@@ -391,7 +391,7 @@ input[type=radio]:checked) [id$=-placeholder] {
391
391
  font-family: var(--db-font-family-sans);
392
392
  font-style: italic;
393
393
  }
394
- @media screen and (prefers-reduced-motion: no-preference) {
394
+ @media (prefers-reduced-motion: no-preference) {
395
395
  .db-textarea[data-variant=floating]:has(textarea:focus-within,
396
396
  textarea:is(input, textarea):not(:placeholder-shown),
397
397
  > select option:checked:not(.placeholder),
@@ -428,7 +428,7 @@ input[type=radio]:checked) textarea:is([type=date],
428
428
  font-family: var(--db-font-family-sans);
429
429
  font-style: italic;
430
430
  }
431
- @media screen and (prefers-reduced-motion: no-preference) {
431
+ @media (prefers-reduced-motion: no-preference) {
432
432
  .db-textarea[data-variant=floating]:has(textarea:focus-within,
433
433
  textarea:is(input, textarea):not(:placeholder-shown),
434
434
  > select option:checked:not(.placeholder),
@@ -728,7 +728,7 @@ input[type=radio]:checked) textarea:is([type=date],
728
728
  white-space: nowrap;
729
729
  overflow: hidden;
730
730
  }
731
- @media screen and (prefers-reduced-motion: no-preference) {
731
+ @media (prefers-reduced-motion: no-preference) {
732
732
  .db-textarea > label {
733
733
  transition: font-size var(--db-transition-straight-emotional);
734
734
  }
@@ -787,8 +787,8 @@ textarea[aria-disabled=true]) {
787
787
  transform: none;
788
788
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
789
789
  z-index: 1;
790
- border-block-end: none;
791
- border-inline-end: none;
790
+ border-block-end: 0;
791
+ border-inline-end: 0;
792
792
  }
793
793
  .db-textarea[data-variant=floating]:has(textarea:is(:focus-within, :not(:placeholder-shown))):has(textarea:read-only)::after {
794
794
  background-color: var(--db-adaptive-bg-basic-level-1-default) !important;
package/build/components/textarea/textarea.scss CHANGED
@@ -74,8 +74,8 @@
74
74
 
75
75
  background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
76
76
  z-index: 1;
77
- border-block-end: none;
78
- border-inline-end: none;
77
+ border-block-end: 0;
78
+ border-inline-end: 0;
79
79
  }
80
80
 
81
81
  &:has(textarea:read-only)::after {
package/build/components/tooltip/tooltip.css CHANGED
@@ -228,13 +228,13 @@
228
228
  opacity: 1;
229
229
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
230
230
  }
231
- @media screen and (prefers-reduced-motion: reduce) {
231
+ @media (prefers-reduced-motion: reduce) {
232
232
  .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=bottom].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom].db-tooltip:first-of-type {
233
233
  opacity: 1;
234
234
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
235
235
  }
236
236
  }
237
- @media screen and (prefers-reduced-motion: no-preference) {
237
+ @media (prefers-reduced-motion: no-preference) {
238
238
  .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=bottom][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=true].db-tooltip:first-of-type {
239
239
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
240
240
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -247,7 +247,7 @@
247
247
  animation-delay: var(--db-transition-duration-medium);
248
248
  }
249
249
  }
250
- @media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
250
+ @media (prefers-reduced-motion: no-preference) and (width <= 64em) {
251
251
  .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-corrected-placement^=bottom][data-animation=true].db-tooltip[data-e2e-hover=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=true].db-tooltip:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=true].db-tooltip:not([data-delay]):first-of-type {
252
252
  animation-delay: var(--db-transition-duration-medium);
253
253
  }
@@ -259,13 +259,13 @@
259
259
  opacity: 1;
260
260
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
261
261
  }
262
- @media screen and (prefers-reduced-motion: reduce) {
262
+ @media (prefers-reduced-motion: reduce) {
263
263
  [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=top].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top].db-tooltip:first-of-type {
264
264
  opacity: 1;
265
265
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
266
266
  }
267
267
  }
268
- @media screen and (prefers-reduced-motion: no-preference) {
268
+ @media (prefers-reduced-motion: no-preference) {
269
269
  [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=top][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=true].db-tooltip:first-of-type {
270
270
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
271
271
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -278,7 +278,7 @@
278
278
  animation-delay: var(--db-transition-duration-medium);
279
279
  }
280
280
  }
281
- @media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
281
+ @media (prefers-reduced-motion: no-preference) and (width <= 64em) {
282
282
  [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-corrected-placement^=top][data-animation=true].db-tooltip[data-e2e-hover=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=true].db-tooltip:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=true].db-tooltip:not([data-delay]):first-of-type {
283
283
  animation-delay: var(--db-transition-duration-medium);
284
284
  }
@@ -290,13 +290,13 @@
290
290
  opacity: 1;
291
291
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
292
292
  }
293
- @media screen and (prefers-reduced-motion: reduce) {
293
+ @media (prefers-reduced-motion: reduce) {
294
294
  [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=right].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right].db-tooltip:first-of-type {
295
295
  opacity: 1;
296
296
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
297
297
  }
298
298
  }
299
- @media screen and (prefers-reduced-motion: no-preference) {
299
+ @media (prefers-reduced-motion: no-preference) {
300
300
  [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=right][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=true].db-tooltip:first-of-type {
301
301
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
302
302
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -309,7 +309,7 @@
309
309
  animation-delay: var(--db-transition-duration-medium);
310
310
  }
311
311
  }
312
- @media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
312
+ @media (prefers-reduced-motion: no-preference) and (width <= 64em) {
313
313
  [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-corrected-placement^=right][data-animation=true].db-tooltip[data-e2e-hover=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=true].db-tooltip:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=true].db-tooltip:not([data-delay]):first-of-type {
314
314
  animation-delay: var(--db-transition-duration-medium);
315
315
  }
@@ -321,13 +321,13 @@
321
321
  opacity: 1;
322
322
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
323
323
  }
324
- @media screen and (prefers-reduced-motion: reduce) {
324
+ @media (prefers-reduced-motion: reduce) {
325
325
  [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=left].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left].db-tooltip:first-of-type {
326
326
  opacity: 1;
327
327
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
328
328
  }
329
329
  }
330
- @media screen and (prefers-reduced-motion: no-preference) {
330
+ @media (prefers-reduced-motion: no-preference) {
331
331
  [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=left][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=true].db-tooltip:first-of-type {
332
332
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
333
333
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -340,7 +340,7 @@
340
340
  animation-delay: var(--db-transition-duration-medium);
341
341
  }
342
342
  }
343
- @media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
343
+ @media (prefers-reduced-motion: no-preference) and (width <= 64em) {
344
344
  [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-corrected-placement^=left][data-animation=true].db-tooltip[data-e2e-hover=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=true].db-tooltip:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=true].db-tooltip:not([data-delay]):first-of-type {
345
345
  animation-delay: var(--db-transition-duration-medium);
346
346
  }