@db-ux/core-components 4.5.3 → 4.5.4-mcp-server-6cda8b3

package/build/components/navigation-item/navigation-item.css

@@ -185,7 +185,7 @@
   /* stylelint-disable-next-line media-query-no-invalid */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-navigation-item .db-navigation-item-expand-button:not([data-force-mobile]):is(:hover, :focus-visible):is(button) ~ .db-sub-navigation,
   .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile]):is(:hover, :focus-visible) ~ .db-sub-navigation, .db-navigation-item [data-force-mobile=false].db-navigation-item-expand-button:is(:hover, :focus-visible):is(button) ~ .db-sub-navigation,
   .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]:is(:hover, :focus-visible) ~ .db-sub-navigation {
@@ -365,7 +365,7 @@
 .db-navigation-item[data-force-mobile=true]:not([data-width=full]) .db-navigation-item-expand-button::after {
   --db-icon-margin-start: auto;
 }
-@media screen and (max-width: 63.9375em) {
+@media (max-width: 63.9375em) {
   .db-navigation-item:not([data-width=full]) .db-navigation-item-expand-button::after {
     --db-icon-margin-start: auto;
   }
@@ -383,7 +383,7 @@
   visibility: visible;
   transform: translateX(0%);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation {
     transition: visibility 0ms linear 0ms, transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
   }
@@ -394,23 +394,23 @@
 .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true]:not(.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true]) ~ .db-sub-navigation {
   transform: translateX(110%);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true]:not(.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true]) ~ .db-sub-navigation {
     transition: visibility 0ms linear 410ms, transform var(--db-transition-duration-slow) var(--db-transition-timing-emotional);
   }
 }
-@media screen and (max-width: 63.9375em) {
+@media (max-width: 63.9375em) {
   .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation {
     visibility: visible;
     transform: translateX(0%);
   }
 }
-@media screen and (max-width: 63.9375em) and (prefers-reduced-motion: no-preference) {
+@media (max-width: 63.9375em) and (prefers-reduced-motion: no-preference) {
   .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation {
     transition: visibility 0ms linear 0ms, transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
   }
 }
-@media screen and (max-width: 63.9375em) {
+@media (max-width: 63.9375em) {
   .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
     inset-block: 0;
   }
@@ -418,7 +418,7 @@
     transform: translateX(110%);
   }
 }
-@media screen and (max-width: 63.9375em) and (prefers-reduced-motion: no-preference) {
+@media (max-width: 63.9375em) and (prefers-reduced-motion: no-preference) {
   .db-navigation-item .db-navigation-item-expand-button:not(.db-navigation-item .db-navigation-item-expand-button[aria-expanded=true]) ~ .db-sub-navigation {
     transition: visibility 0ms linear 410ms, transform var(--db-transition-duration-slow) var(--db-transition-timing-emotional);
   }
@@ -479,7 +479,7 @@
   overflow: hidden auto;
   inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs)) + var(--db-spacing-fixed-3xs)) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2 + var(--db-spacing-fixed-3xs));
 }
-@media screen and (max-width: 63.9375em) {
+@media (max-width: 63.9375em) {
   .db-sub-navigation {
     padding: var(--db-spacing-fixed-md);
     inline-size: 100%;
@@ -488,12 +488,12 @@
     inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs)) + var(--db-spacing-fixed-3xs)) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2 + var(--db-spacing-fixed-3xs));
   }
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-sub-navigation:not([data-force-mobile]) .db-mobile-navigation-back:not([hidden]), .db-sub-navigation[data-force-mobile=false] .db-mobile-navigation-back:not([hidden]) {
     display: none;
   }
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-sub-navigation:not([data-force-mobile]), .db-sub-navigation[data-force-mobile=false] {
     border-radius: var(--db-border-radius-sm);
     box-shadow: var(--db-elevation-md);

package/build/components/navigation-item/navigation-item.scss

@@ -26,7 +26,7 @@
 			visibility: visible;
 			transform: translateX(0%);
 
-			@media screen and (prefers-reduced-motion: no-preference) {
+			@media (prefers-reduced-motion: no-preference) {
 				transition:
 					visibility 0ms linear 0ms,
 					transform #{variables.$db-transition-duration-extra-slow}
@@ -44,7 +44,7 @@
 			transform: translateX(110%);
 		}
 
-		@media screen and (prefers-reduced-motion: no-preference) {
+		@media (prefers-reduced-motion: no-preference) {
 			~ .db-sub-navigation {
 				transition:
 					visibility 0ms linear 410ms,

package/build/components/page/page.css

@@ -33,53 +33,59 @@
 
 @layer variables {}
 
-.db-page-document {
-  block-size: 100%;
-  overflow: hidden;
+@media screen {
+  .db-page-document {
+    block-size: 100%;
+    overflow: hidden;
+  }
 }
 
-.db-page {
-  opacity: 0;
+@media screen {
+  .db-page {
+    opacity: 0;
+  }
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-page[data-fade-in=true] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
-.db-page:not([data-fonts-loaded]), .db-page[data-fonts-loaded=true] {
-  opacity: 1;
-}
-.db-page[data-variant=fixed] {
-  block-size: 100%;
-  min-block-size: 100%;
-  flex-direction: column;
-  /* workaround for angular */
-}
-.db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer) {
-  flex: 0 1 auto;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer):not([hidden]) {
-  display: flex;
-}
-.db-page[data-variant=fixed]:not([hidden]) {
-  display: flex;
-}
-.db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer) {
-  flex: 0 1 auto;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer):not([hidden]) {
-  display: flex;
-}
-.db-page[data-variant=fixed] > .db-main {
-  flex-direction: column;
-  overflow: auto;
-  flex: 1 1 auto;
-  inline-size: 100%;
-}
-.db-page[data-variant=fixed] > .db-main:not([hidden]) {
-  display: flex;
+@media screen {
+  .db-page:not([data-fonts-loaded]), .db-page[data-fonts-loaded=true] {
+    opacity: 1;
+  }
+  .db-page[data-variant=fixed] {
+    block-size: 100%;
+    min-block-size: 100%;
+    flex-direction: column;
+    /* workaround for angular */
+  }
+  .db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer) {
+    flex: 0 1 auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+  .db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer):not([hidden]) {
+    display: flex;
+  }
+  .db-page[data-variant=fixed]:not([hidden]) {
+    display: flex;
+  }
+  .db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer) {
+    flex: 0 1 auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+  .db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer):not([hidden]) {
+    display: flex;
+  }
+  .db-page[data-variant=fixed] > .db-main {
+    flex-direction: column;
+    overflow: auto;
+    flex: 1 1 auto;
+    inline-size: 100%;
+  }
+  .db-page[data-variant=fixed] > .db-main:not([hidden]) {
+    display: flex;
+  }
 }

package/build/components/page/page.scss

@@ -2,8 +2,10 @@
 @use "@db-ux/core-foundations/build/styles/helpers";
 
 .db-page-document {
-	block-size: 100%;
-	overflow: hidden;
+	@media screen {
+		block-size: 100%;
+		overflow: hidden;
+	}
 }
 
 @mixin header-footer-style {
@@ -17,41 +19,43 @@
 }
 
 .db-page {
-	opacity: 0;
+	@media screen {
+		opacity: 0;
 
-	@media screen and (prefers-reduced-motion: no-preference) {
-		&[data-fade-in="true"] {
-			transition: opacity variables.$db-transition-straight-emotional;
+		@media (prefers-reduced-motion: no-preference) {
+			&[data-fade-in="true"] {
+				transition: opacity variables.$db-transition-straight-emotional;
+			}
 		}
-	}
 
-	&:not([data-fonts-loaded]),
-	&[data-fonts-loaded="true"] {
-		opacity: 1;
-	}
+		&:not([data-fonts-loaded]),
+		&[data-fonts-loaded="true"] {
+			opacity: 1;
+		}
 
-	&[data-variant="fixed"] {
-		@include header-footer-style;
+		&[data-variant="fixed"] {
+			@include header-footer-style;
 
-		block-size: 100%;
-		min-block-size: 100%;
+			block-size: 100%;
+			min-block-size: 100%;
 
-		@include helpers.display(flex);
+			@include helpers.display(flex);
 
-		flex-direction: column;
+			flex-direction: column;
 
-		/* workaround for angular */
-		> :is(db-header, dbheader, dbfooter, db-footer) {
-			@include header-footer-style;
-		}
+			/* workaround for angular */
+			> :is(db-header, dbheader, dbfooter, db-footer) {
+				@include header-footer-style;
+			}
 
-		> .db-main {
-			@include helpers.display(flex);
+			> .db-main {
+				@include helpers.display(flex);
 
-			flex-direction: column;
-			overflow: auto;
-			flex: 1 1 auto;
-			inline-size: 100%;
+				flex-direction: column;
+				overflow: auto;
+				flex: 1 1 auto;
+				inline-size: 100%;
+			}
 		}
 	}
 }

package/build/components/popover/popover.css

@@ -164,13 +164,13 @@
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
-@media screen and (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
   .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] {
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
   }
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .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] {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
     /* stylelint-disable-next-line media-query-no-invalid */
@@ -183,7 +183,7 @@
     animation-delay: var(--db-transition-duration-medium);
   }
 }
-@media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
+@media (prefers-reduced-motion: no-preference) and (width <= 64em) {
   .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]) {
     animation-delay: var(--db-transition-duration-medium);
   }
@@ -195,13 +195,13 @@
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
-@media screen and (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
   .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] {
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
   }
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .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] {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
     /* stylelint-disable-next-line media-query-no-invalid */
@@ -214,7 +214,7 @@
     animation-delay: var(--db-transition-duration-medium);
   }
 }
-@media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
+@media (prefers-reduced-motion: no-preference) and (width <= 64em) {
   .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]) {
     animation-delay: var(--db-transition-duration-medium);
   }
@@ -226,13 +226,13 @@
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
-@media screen and (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
   .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] {
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
   }
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .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] {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
     /* stylelint-disable-next-line media-query-no-invalid */
@@ -245,7 +245,7 @@
     animation-delay: var(--db-transition-duration-medium);
   }
 }
-@media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
+@media (prefers-reduced-motion: no-preference) and (width <= 64em) {
   .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]) {
     animation-delay: var(--db-transition-duration-medium);
   }
@@ -257,13 +257,13 @@
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
-@media screen and (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
   .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] {
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
   }
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .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] {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
     /* stylelint-disable-next-line media-query-no-invalid */
@@ -276,7 +276,7 @@
     animation-delay: var(--db-transition-duration-medium);
   }
 }
-@media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
+@media (prefers-reduced-motion: no-preference) and (width <= 64em) {
   .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]) {
     animation-delay: var(--db-transition-duration-medium);
   }

package/build/components/radio/radio.css

@@ -299,7 +299,7 @@
 .db-radio input {
   border-radius: var(--db-border-radius-full);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-radio input {
     transition: border-width var(--db-transition-duration-fast) var(--db-transition-timing-functional);
   }

package/build/components/radio/radio.scss

@@ -46,7 +46,7 @@
 	input {
 		border-radius: variables.$db-border-radius-full;
 
-		@media screen and (prefers-reduced-motion: no-preference) {
+		@media (prefers-reduced-motion: no-preference) {
 			transition: border-width variables.$db-transition-duration-fast
 				variables.$db-transition-timing-functional;
 		}

package/build/components/select/select.css

@@ -526,7 +526,7 @@ input[type=radio]:checked) > label {
 .db-select::after {
   pointer-events: none;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-select::after {
     transition: transform var(--db-transition-straight-emotional);
   }
@@ -551,7 +551,7 @@ input[type=radio]:checked) > label {
   inset-inline-start: 0;
   opacity: 0;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-select-placeholder {
     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);
   }
@@ -684,7 +684,7 @@ input[type=radio]:checked) [id$=-placeholder] {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-select[data-variant=floating]:has(select:focus-within,
   select:is(input, textarea):not(:placeholder-shown),
   > select option:checked:not(.placeholder),
@@ -723,7 +723,7 @@ input[type=radio]:checked) select:is([type=date],
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-select[data-variant=floating]:has(select:focus-within,
   select:is(input, textarea):not(:placeholder-shown),
   > select option:checked:not(.placeholder),
@@ -893,7 +893,7 @@ input[type=radio]:checked) select:is([type=date],
   white-space: nowrap;
   overflow: hidden;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-select > label {
     transition: font-size var(--db-transition-straight-emotional);
   }

package/build/components/switch/switch.css

@@ -522,7 +522,7 @@
   transform: translateX(var(--thumb-offset-x));
   margin-inline-end: calc(calc(var(--db-icon-font-size)) - calc(var(--db-icon-font-size) - 0.125rem * 2));
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-switch input::before {
     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);
   }
@@ -563,7 +563,7 @@
 .db-switch input[data-aid-icon-trailing]:checked::after {
   --db-icon-trailing: attr(data-aid-icon-trailing);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-switch input {
     transition: none;
   }
@@ -574,14 +574,11 @@
 .db-switch[data-hide-label=true] > label > span {
   font-size: 0;
 }
-.db-switch[data-size=small] > label {
-  gap: var(--db-spacing-fixed-2xs);
-}
 .db-switch[data-visual-aid=true] input::after {
   visibility: visible;
   block-size: calc(var(--db-icon-font-size));
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-switch[data-visual-aid=true] input::after {
     transition: transform var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
   }

package/build/components/switch/switch.scss

@@ -108,7 +108,7 @@ $checked-active-transition-size: calc(
 				#{$switch-active-thumb-size} - #{$switch-inactive-thumb-size}
 			);
 
-			@media screen and (prefers-reduced-motion: no-preference) {
+			@media (prefers-reduced-motion: no-preference) {
 				transition:
 					margin variables.$db-transition-duration-fast
 						variables.$db-transition-timing-emotional,
@@ -167,7 +167,7 @@ $checked-active-transition-size: calc(
 			--db-icon-trailing: attr(data-aid-icon-trailing);
 		}
 
-		@media screen and (prefers-reduced-motion: no-preference) {
+		@media (prefers-reduced-motion: no-preference) {
 			// Overwrite default transition for switch border
 			transition: none;
 		}
@@ -184,10 +184,6 @@ $checked-active-transition-size: calc(
 	}
 
 	&[data-size="small"] {
-		> label {
-			gap: variables.$db-spacing-fixed-2xs;
-		}
-
 		input {
 			@extend %db-overwrite-font-size-xs;
 		}
@@ -199,7 +195,7 @@ $checked-active-transition-size: calc(
 				visibility: visible;
 				block-size: $switch-active-thumb-size;
 
-				@media screen and (prefers-reduced-motion: no-preference) {
+				@media (prefers-reduced-motion: no-preference) {
 					transition: transform variables.$db-transition-duration-fast
 						variables.$db-transition-timing-emotional;
 				}

package/build/components/tab-item/tab-item.css

@@ -57,7 +57,7 @@
   outline-offset: var(--db-border-width-xs);
   box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
     transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
   }

package/build/components/tabs/tabs.css

@@ -111,7 +111,7 @@
   position: absolute;
   border-radius: var(--db-border-radius-xs);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-tabs .db-tab-item::after {
     transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
   }
@@ -196,7 +196,7 @@
   block-size: var(--db-border-width-xs);
   inline-size: 100%;
 }
-@media (forced-colors: active) {
+@media (forced-colors: active), print {
   .db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
     border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
   }
@@ -221,7 +221,7 @@
   block-size: 100%;
   inline-size: var(--db-border-width-xs);
 }
-@media (forced-colors: active) {
+@media (forced-colors: active), print {
   .db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item:has(input:checked)::after {
     border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
   }

package/build/components/textarea/textarea.css

@@ -391,7 +391,7 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-textarea[data-variant=floating]:has(textarea:focus-within,
   textarea:is(input, textarea):not(:placeholder-shown),
   > select option:checked:not(.placeholder),
@@ -428,7 +428,7 @@ input[type=radio]:checked) textarea:is([type=date],
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-textarea[data-variant=floating]:has(textarea:focus-within,
   textarea:is(input, textarea):not(:placeholder-shown),
   > select option:checked:not(.placeholder),
@@ -728,7 +728,7 @@ input[type=radio]:checked) textarea:is([type=date],
   white-space: nowrap;
   overflow: hidden;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-textarea > label {
     transition: font-size var(--db-transition-straight-emotional);
   }