@db-ux/core-components 4.5.3 → 4.5.4

package/CHANGELOG.md

@@ -1,10 +1,19 @@
 # @db-ux/core-components
 
+## 4.5.4
+
+### Patch Changes
+
+- refactor: Enhance the accessibility of the navigation components by adding missing WAI-ARIA attributes (`aria-controls`, `aria-label`, `aria-haspopup`) for better screen reader support. - [see commit f040188](https://github.com/db-ux-design-system/core-web/commit/f0401886267359518c37062373bb0f9df311214c)
+
+- fix: adjusted `@media` queries (removed `screen` from combined queries) to avoid broken layouts when printing - [see commit 0960eb6](https://github.com/db-ux-design-system/core-web/commit/0960eb6f9223fe23bdaac0de685cf7aa5eb7654e)
+
+- fix(switch): removed obsolete gap towards label in `small` variant - [see commit 40bad01](https://github.com/db-ux-design-system/core-web/commit/40bad017f068bf8968829977808a6d8e9d21b4fe)
+
 ## 4.5.3
 
 _version bump_
 
-
 ## 4.5.2
 
 ### Patch Changes

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

@@ -187,7 +187,7 @@
 .db-accordion-item > details > summary::after {
   pointer-events: none;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-accordion-item > details > summary::after {
     transition: transform var(--db-transition-straight-emotional);
   }
@@ -211,7 +211,7 @@
   pointer-events: none;
   opacity: var(--db-opacity-md);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-accordion-item > details > summary + div {
     transition: block-size var(--db-transition-straight-emotional);
   }

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

@@ -29,7 +29,7 @@
 			opacity: variables.$db-opacity-md;
 		}
 
-		@media screen and (prefers-reduced-motion: no-preference) {
+		@media (prefers-reduced-motion: no-preference) {
 			> summary + div {
 				transition: block-size
 					#{variables.$db-transition-straight-emotional};

package/build/components/custom-button/custom-button.css

@@ -56,7 +56,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-custom-button:not([data-disable-focus=true]):has(input):focus-within {
     transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
   }

package/build/components/custom-select/custom-select.css

@@ -679,7 +679,7 @@ input[type=radio]:checked) > label {
 .db-custom-select::after {
   pointer-events: none;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-custom-select::after {
     transition: transform var(--db-transition-straight-emotional);
   }
@@ -704,7 +704,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-custom-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);
   }
@@ -885,7 +885,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-custom-select[data-variant=floating]:has(:focus-within,
   summary:is(input, textarea):not(:placeholder-shown),
   > select option:checked:not(.placeholder),
@@ -924,7 +924,7 @@ input[type=radio]:checked) summary: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-custom-select[data-variant=floating]:has(:focus-within,
   summary:is(input, textarea):not(:placeholder-shown),
   > select option:checked:not(.placeholder),
@@ -1094,7 +1094,7 @@ input[type=radio]:checked) summary:is([type=date],
   white-space: nowrap;
   overflow: hidden;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-custom-select > label {
     transition: font-size var(--db-transition-straight-emotional);
   }
@@ -1192,7 +1192,7 @@ summary[aria-disabled=true]) {
   background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
   opacity: var(--db-opacity-lg);
 }
-@media screen and (max-width: 47.9375em) {
+@media (max-width: 47.9375em) {
   .db-custom-select > details[open] > summary::before {
     position: fixed;
     z-index: 9998;

package/build/components/custom-select-dropdown/custom-select-dropdown.css

@@ -301,7 +301,7 @@
   block-size: fit-content;
   margin: auto;
 }
-@media screen and (max-width: 47.9375em) {
+@media (max-width: 47.9375em) {
   .db-custom-select-dropdown {
     position: fixed;
     z-index: 9999;
@@ -401,7 +401,7 @@
     border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
-@media screen and (min-width: 48em) {
+@media (min-width: 48em) {
   .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button):not([data-force-mobile]):not([hidden]), .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button)[data-force-mobile=false]:not([hidden]),
   .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button):not([data-force-mobile]):not([hidden]),
   .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button)[data-force-mobile=false]:not([hidden]) {
@@ -413,7 +413,7 @@
   padding: var(--db-spacing-fixed-lg) var(--db-spacing-fixed-md);
   margin: auto;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-custom-select-dropdown > db-infotext > .db-infotext[data-icon=circular_arrows]::before,
   .db-custom-select-dropdown > .db-infotext[data-icon=circular_arrows]::before {
     animation: rotate 1.5s linear 0s infinite normal none running;

package/build/components/custom-select-dropdown/custom-select-dropdown.scss

@@ -77,7 +77,7 @@
 
 		&[data-icon="circular_arrows"] {
 			&::before {
-				@media screen and (prefers-reduced-motion: no-preference) {
+				@media (prefers-reduced-motion: no-preference) {
 					animation: rotate 1.5s linear 0s infinite normal none
 						running;
 				}

package/build/components/custom-select-list-item/custom-select-list-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-custom-select-list-item:not([data-disable-focus=true]):has(> label > input:focus-visible) {
     transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
   }

package/build/components/drawer/drawer.css

@@ -237,7 +237,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .db-drawer .db-drawer-container[data-rounded=true] {
   box-shadow: var(--db-elevation-md);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-drawer .db-drawer-container {
     transition: transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
   }
@@ -307,7 +307,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=up], .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=down] {
   transform: translateY(0%);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-drawer[open] .db-drawer-container[data-transition=close] {
     transition: transform var(--db-transition-duration-slow) var(--db-transition-timing-emotional);
   }

package/build/components/drawer/drawer.scss

@@ -198,7 +198,7 @@ $spacings: (
 			box-shadow: variables.$db-elevation-md;
 		}
 
-		@media screen and (prefers-reduced-motion: no-preference) {
+		@media (prefers-reduced-motion: no-preference) {
 			transition: transform
 				#{variables.$db-transition-duration-extra-slow}
 				#{variables.$db-transition-timing-emotional};
@@ -297,7 +297,7 @@ $spacings: (
 			}
 
 			&[data-transition="close"] {
-				@media screen and (prefers-reduced-motion: no-preference) {
+				@media (prefers-reduced-motion: no-preference) {
 					transition: transform
 						#{variables.$db-transition-duration-slow}
 						#{variables.$db-transition-timing-emotional};

package/build/components/header/header.css

@@ -131,7 +131,7 @@
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 48em) {
+  @media (width <= 48em) {
     .db-header-meta-navigation {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-mobile-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-mobile-2xs);
@@ -144,7 +144,7 @@
       --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-mobile-3xl);
     }
   }
-  @media screen and (48em < width <= 64em) {
+  @media (48em < width <= 64em) {
     .db-header-meta-navigation {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-tablet-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-tablet-2xs);
@@ -157,7 +157,7 @@
       --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-tablet-3xl);
     }
   }
-  @media screen and (64em < width) {
+  @media (64em < width) {
     .db-header-meta-navigation {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-desktop-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-desktop-2xs);
@@ -192,7 +192,7 @@
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 48em) {
+  @media (width <= 48em) {
     .db-header-meta-navigation {
       --db-type-headline-3xs: var(--db-typography-functional-mobile-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-headline-3xs);
@@ -223,7 +223,7 @@
       --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-headline-3xl);
     }
   }
-  @media screen and (48em < width <= 64em) {
+  @media (48em < width <= 64em) {
     .db-header-meta-navigation {
       --db-type-headline-3xs: var(--db-typography-functional-tablet-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-tablet-headline-3xs);
@@ -254,7 +254,7 @@
       --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-tablet-headline-3xl);
     }
   }
-  @media screen and (64em < width) {
+  @media (64em < width) {
     .db-header-meta-navigation {
       --db-type-headline-3xs: var(--db-typography-functional-desktop-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-desktop-headline-3xs);
@@ -299,7 +299,7 @@
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 48em) {
+  @media (width <= 48em) {
     .db-header-meta-navigation {
       --db-type-body-3xs: var(--db-typography-functional-mobile-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-body-3xs);
@@ -330,7 +330,7 @@
       --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-body-3xl);
     }
   }
-  @media screen and (48em < width <= 64em) {
+  @media (48em < width <= 64em) {
     .db-header-meta-navigation {
       --db-type-body-3xs: var(--db-typography-functional-tablet-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-tablet-body-3xs);
@@ -361,7 +361,7 @@
       --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-tablet-body-3xl);
     }
   }
-  @media screen and (64em < width) {
+  @media (64em < width) {
     .db-header-meta-navigation {
       --db-type-body-3xs: var(--db-typography-functional-desktop-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-desktop-body-3xs);
@@ -410,7 +410,7 @@
 .db-header:not([hidden]) {
   display: flex;
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-header:not([data-force-mobile]), .db-header[data-force-mobile=false] {
     --db-drawer-max-width: 48em;
   }
@@ -458,7 +458,7 @@
 .db-header-navigation-bar:not([hidden]) {
   display: flex;
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-header-navigation-bar:not([data-force-mobile]), .db-header-navigation-bar[data-force-mobile=false] {
     padding: var(--db-spacing-fixed-md) var(--db-spacing-fixed-lg);
   }
@@ -496,7 +496,7 @@
     border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-header-meta-navigation:not([data-force-mobile]), .db-header-meta-navigation[data-force-mobile=false] {
     padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-lg);
     margin: 0;
@@ -525,7 +525,7 @@
 .db-header-navigation-container:not([hidden]) {
   display: inherit;
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-header-navigation-container:not([data-force-mobile]), .db-header-navigation-container[data-force-mobile=false] {
     --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
     position: var(--db-tooltip-parent-position, relative);
@@ -543,13 +543,13 @@
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
 }
-@media screen and (min-width: 64em) and (forced-colors: active) {
+@media (min-width: 64em) and (forced-colors: active) {
   .db-header-navigation-container:not([data-force-mobile]), .db-header-navigation-container[data-force-mobile=false] {
     /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
     border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-header-navigation-container:not([data-force-mobile])::before, .db-header-navigation-container[data-force-mobile=false]::before {
     position: inherit;
     block-size: var(--db-sizing-md);
@@ -569,7 +569,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-header-action-container:has(> .db-header-secondary-action:empty):not([data-force-mobile]):not([hidden]), .db-header-action-container:has(> .db-header-secondary-action:empty)[data-force-mobile=false]:not([hidden]) {
     display: none;
   }
@@ -603,7 +603,7 @@
     border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-header-action-container:not([data-force-mobile])::before, .db-header-action-container[data-force-mobile=false]::before {
     margin-inline: var(--db-spacing-fixed-sm);
   }
@@ -656,7 +656,7 @@
     border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-header-secondary-action:not([data-force-mobile])::before, .db-header-secondary-action[data-force-mobile=false]::before {
     display: none;
   }
@@ -678,7 +678,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-header-navigation:not([data-force-mobile]), .db-header-navigation[data-force-mobile=false] {
     margin-inline: var(--db-spacing-fixed-lg);
   }
@@ -695,7 +695,7 @@
 .db-header-secondary-action:not([hidden]) {
   display: flex;
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-header-navigation:not([data-force-mobile]), .db-header-navigation[data-force-mobile=false],
   .db-header-secondary-action:not([data-force-mobile]),
   .db-header-secondary-action[data-force-mobile=false] {
@@ -732,7 +732,7 @@
 .db-header-action-container > .db-header-secondary-action:not([hidden]) {
   display: none;
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-header-meta-navigation:not([data-force-mobile]):not([hidden]), .db-header-meta-navigation[data-force-mobile=false]:not([hidden]),
   .db-header-navigation-container > .db-header-navigation:not([data-force-mobile]):not([hidden]),
   .db-header-navigation-container > .db-header-navigation[data-force-mobile=false]:not([hidden]),
@@ -752,7 +752,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-header-drawer:not([data-force-mobile]):not([hidden]), .db-header-drawer[data-force-mobile=false]:not([hidden]),
   .db-header-burger-menu-container:not([data-force-mobile]):not([hidden]),
   .db-header-burger-menu-container[data-force-mobile=false]:not([hidden]) {

package/build/components/input/input.css

@@ -526,7 +526,7 @@ input[type=radio]:checked) > label {
 .db-input:has(datalist)::after {
   pointer-events: none;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-input:has(datalist)::after {
     transition: transform var(--db-transition-straight-emotional);
   }
@@ -657,7 +657,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-input[data-variant=floating]:has(input:focus-within,
   input:is(input, textarea):not(:placeholder-shown),
   > select option:checked:not(.placeholder),
@@ -694,7 +694,7 @@ input[type=radio]:checked) input: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-input[data-variant=floating]:has(input:focus-within,
   input:is(input, textarea):not(:placeholder-shown),
   > select option:checked:not(.placeholder),
@@ -890,7 +890,7 @@ input[type=radio]:checked) input:is([type=date],
   white-space: nowrap;
   overflow: hidden;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-input > label {
     transition: font-size var(--db-transition-straight-emotional);
   }
@@ -958,7 +958,7 @@ input[type=time]) {
 .db-input:has(input[type=search])::after {
   opacity: 0;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
+@media (prefers-reduced-motion: no-preference) {
   .db-input:has(input[type=search])::after {
     transition: opacity var(--db-transition-duration-fast);
   }
@@ -1037,7 +1037,7 @@ input:focus-visible)::after {
   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-input input::-webkit-calendar-picker-indicator:focus-visible, .db-input input::-webkit-search-cancel-button:focus-visible {
     transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
   }

package/build/components/input/input.scss

@@ -52,7 +52,7 @@ $icon-padding: calc(
 		&::after {
 			opacity: 0;
 
-			@media screen and (prefers-reduced-motion: no-preference) {
+			@media (prefers-reduced-motion: no-preference) {
 				transition: opacity variables.$db-transition-duration-fast;
 			}
 		}

package/build/components/navigation/navigation.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-navigation > menu .db-navigation-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);
   }
@@ -129,7 +129,7 @@
   background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
   inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-navigation > menu .db-navigation-item:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item::after {
     block-size: var(--db-border-width-xs);
     inline-size: 0;
@@ -148,18 +148,18 @@
   block-size: 100%;
   inline-size: var(--db-border-width-xs);
 }
-@media (forced-colors: active) {
+@media (forced-colors: active), print {
   .db-navigation > menu .db-navigation-item:has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]::after, .db-navigation > menu .db-navigation-item[data-active=true]::after {
     border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
   }
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]:not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item[data-active=true]:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([aria-current=page])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([data-active=true])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[aria-current=page]::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[data-active=true]::after {
     block-size: var(--db-border-width-xs);
     inline-size: 100%;
   }
 }
-@media screen and (min-width: 64em) and (forced-colors: active) {
+@media (min-width: 64em) and (forced-colors: active), print and (min-width: 64em) {
   .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]:not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item[data-active=true]:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([aria-current=page])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([data-active=true])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[aria-current=page]::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[data-active=true]::after {
     border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
   }
@@ -171,7 +171,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:not([data-force-mobile]), .db-navigation[data-force-mobile=false] {
     -webkit-tap-highlight-color: inherit;
     inline-size: auto;
@@ -186,7 +186,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 > menu:not([data-force-mobile]), .db-navigation > menu[data-force-mobile=false] {
     flex-direction: row;
   }
@@ -196,7 +196,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 > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
@@ -204,14 +204,14 @@
     --db-icon-trailing: "chevron_down";
   }
 }
-@media screen and (min-width: 64em) and (prefers-reduced-motion: no-preference) {
+@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
     transition: transform var(--db-transition-straight-emotional);
   }
 }
-@media screen and (min-width: 64em) {
+@media (min-width: 64em) {
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile]):is(:hover, :focus-visible)::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile]):has(~ .db-sub-navigation:is(:hover,
   :focus-visible,
   :focus-within))::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]:is(:hover, :focus-visible)::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]:has(~ .db-sub-navigation:is(:hover,
@@ -233,7 +233,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 > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
   .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
   .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
@@ -265,7 +265,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[data-force-close=true] > menu menu:not([data-force-mobile]):not([hidden]), .db-navigation[data-force-close=true] > menu menu[data-force-mobile=false]:not([hidden]) {
     display: none;
   }

package/build/components/navigation/navigation.scss

@@ -36,7 +36,7 @@
 						--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
 						--db-icon-trailing: "chevron_down";
 
-						@media screen and (prefers-reduced-motion: no-preference) {
+						@media (prefers-reduced-motion: no-preference) {
 							transition: form-components.$dropdown-icon-transition;
 						}
 					}

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);