@db-ux/core-components 4.3.1 → 4.3.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @db-ux/core-components
 
+## 4.3.2
+
+### Patch Changes
+
+- fix: rendering issue with drawer and sub-navigation when user has `prefers-reduced-motion: reduce` - [see commit cd23ff2](https://github.com/db-ux-design-system/core-web/commit/cd23ff2da5fa8a11121c3195467b4b4c0ab2ebb6)
+
 ## 4.3.1
 
 ### Patch Changes

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

@@ -62,70 +62,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-@keyframes show-right-to-left {
-  from {
-    transform: translateX(110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-right-to-left {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(110%);
-  }
-}
-@keyframes show-left-to-right {
-  from {
-    transform: translateX(-110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-left-to-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-110%);
-  }
-}
-@keyframes show-bottom-to-top {
-  from {
-    transform: translateY(110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-bottom-to-top {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(110%);
-  }
-}
-@keyframes show-top-to-bottom {
-  from {
-    transform: translateY(-110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-top-to-bottom {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(-110%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;

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

@@ -219,70 +219,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
  */
-@keyframes show-right-to-left {
-  from {
-    transform: translateX(110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-right-to-left {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(110%);
-  }
-}
-@keyframes show-left-to-right {
-  from {
-    transform: translateX(-110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-left-to-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-110%);
-  }
-}
-@keyframes show-bottom-to-top {
-  from {
-    transform: translateY(110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-bottom-to-top {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(110%);
-  }
-}
-@keyframes show-top-to-bottom {
-  from {
-    transform: translateY(-110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-top-to-bottom {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(-110%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;

package/build/components/drawer/drawer.css

@@ -43,70 +43,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-@keyframes show-right-to-left {
-  from {
-    transform: translateX(110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-right-to-left {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(110%);
-  }
-}
-@keyframes show-left-to-right {
-  from {
-    transform: translateX(-110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-left-to-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-110%);
-  }
-}
-@keyframes show-bottom-to-top {
-  from {
-    transform: translateY(110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-bottom-to-top {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(110%);
-  }
-}
-@keyframes show-top-to-bottom {
-  from {
-    transform: translateY(-110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-top-to-bottom {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(-110%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;
@@ -153,15 +89,17 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-sm));
 }
 
-.db-drawer .db-drawer-container {
+.db-drawer .db-drawer-container:not([data-direction]), .db-drawer .db-drawer-container[data-direction=right] {
+  transform: translateX(110%);
   inset-inline: auto 0;
 }
-.db-drawer [data-rounded=true].db-drawer-container {
+.db-drawer [data-rounded=true].db-drawer-container:not([data-direction]), .db-drawer [data-rounded=true].db-drawer-container[data-direction=right] {
   border-start-start-radius: var(--db-border-radius-sm);
   border-end-start-radius: var(--db-border-radius-sm);
 }
 
 .db-drawer .db-drawer-container[data-direction=left] {
+  transform: translateX(-110%);
   inset-inline: 0 auto;
 }
 .db-drawer [data-rounded=true].db-drawer-container[data-direction=left] {
@@ -176,6 +114,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 
 .db-drawer .db-drawer-container[data-direction=up] {
+  transform: translateY(110%);
   inset: auto 0 0;
 }
 .db-drawer [data-rounded=true].db-drawer-container[data-direction=up] {
@@ -184,6 +123,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 }
 
 .db-drawer .db-drawer-container[data-direction=down] {
+  transform: translateY(-110%);
   inset: 0 0 auto;
 }
 .db-drawer [data-rounded=true].db-drawer-container[data-direction=down] {
@@ -305,6 +245,11 @@ 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) {
+  .db-drawer .db-drawer-container {
+    transition: transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
+  }
+}
 .db-drawer .db-drawer-container .db-drawer-header {
   display: none;
   --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
@@ -364,31 +309,14 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
 .db-drawer[data-position=absolute] .db-drawer-container {
   position: relative;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .db-drawer[open] .db-drawer-container:not([data-direction]), .db-drawer[open] .db-drawer-container[data-direction=right] {
-    animation: show-right-to-left var(--db-transition-straight-show);
-  }
-  .db-drawer[open] .db-drawer-container[data-direction=left] {
-    animation: show-left-to-right var(--db-transition-straight-show);
-  }
-  .db-drawer[open] .db-drawer-container[data-direction=up] {
-    animation: show-bottom-to-top var(--db-transition-straight-show);
-  }
-  .db-drawer[open] .db-drawer-container[data-direction=down] {
-    animation: show-top-to-bottom var(--db-transition-straight-show);
-  }
+.db-drawer[open] .db-drawer-container[data-transition=open]:not([data-direction]), .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=right], .db-drawer[open] .db-drawer-container[data-transition=open][data-direction=left] {
+  transform: translateX(0%);
+}
+.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) {
-  .db-drawer[open] .db-drawer-container[hidden]:not([data-direction]), .db-drawer[open] .db-drawer-container[hidden][data-direction=right] {
-    animation: hide-right-to-left var(--db-transition-straight-hide);
-  }
-  .db-drawer[open] .db-drawer-container[hidden][data-direction=left] {
-    animation: hide-left-to-right var(--db-transition-straight-hide);
-  }
-  .db-drawer[open] .db-drawer-container[hidden][data-direction=up] {
-    animation: hide-bottom-to-top var(--db-transition-straight-hide);
-  }
-  .db-drawer[open] .db-drawer-container[hidden][data-direction=down] {
-    animation: hide-top-to-bottom var(--db-transition-straight-hide);
+  .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

@@ -7,6 +7,7 @@
 @use "../../styles/dialog-init";
 
 %direction-right {
+	transform: translateX(110%);
 	inset-inline: auto 0;
 
 	&[data-rounded="true"] {
@@ -16,6 +17,7 @@
 }
 
 %direction-left {
+	transform: translateX(-110%);
 	inset-inline: 0 auto;
 
 	&[data-rounded="true"] {
@@ -45,6 +47,7 @@
 %direction-up {
 	@extend %full-horizontal;
 
+	transform: translateY(110%);
 	inset: auto 0 0;
 
 	&[data-rounded="true"] {
@@ -56,6 +59,7 @@
 %direction-down {
 	@extend %full-horizontal;
 
+	transform: translateY(-110%);
 	inset: 0 0 auto;
 
 	&[data-rounded="true"] {
@@ -135,7 +139,6 @@ $spacings: (
 
 .db-drawer {
 	.db-drawer-container {
-		@extend %direction-right;
 		@extend %spacing-drawer;
 
 		display: flex;
@@ -191,6 +194,17 @@ $spacings: (
 			box-shadow: variables.$db-elevation-md;
 		}
 
+		@media screen and (prefers-reduced-motion: no-preference) {
+			transition: transform
+				#{variables.$db-transition-duration-extra-slow}
+				#{variables.$db-transition-timing-emotional};
+		}
+
+		&:not([data-direction]),
+		&[data-direction="right"] {
+			@extend %direction-right;
+		}
+
 		&[data-direction="left"] {
 			@extend %direction-left;
 		}
@@ -265,51 +279,24 @@ $spacings: (
 
 	&[open] {
 		.db-drawer-container {
-			@media screen and (prefers-reduced-motion: no-preference) {
+			&[data-transition="open"] {
 				&:not([data-direction]),
-				&[data-direction="right"] {
-					animation: show-right-to-left
-						#{variables.$db-transition-straight-show};
-				}
-
+				&[data-direction="right"],
 				&[data-direction="left"] {
-					animation: show-left-to-right
-						#{variables.$db-transition-straight-show};
-				}
-
-				&[data-direction="up"] {
-					animation: show-bottom-to-top
-						#{variables.$db-transition-straight-show};
+					transform: translateX(0%);
 				}
 
+				&[data-direction="up"],
 				&[data-direction="down"] {
-					animation: show-top-to-bottom
-						#{variables.$db-transition-straight-show};
+					transform: translateY(0%);
 				}
 			}
 
-			&[hidden] {
+			&[data-transition="close"] {
 				@media screen and (prefers-reduced-motion: no-preference) {
-					&:not([data-direction]),
-					&[data-direction="right"] {
-						animation: hide-right-to-left
-							#{variables.$db-transition-straight-hide};
-					}
-
-					&[data-direction="left"] {
-						animation: hide-left-to-right
-							#{variables.$db-transition-straight-hide};
-					}
-
-					&[data-direction="up"] {
-						animation: hide-bottom-to-top
-							#{variables.$db-transition-straight-hide};
-					}
-
-					&[data-direction="down"] {
-						animation: hide-top-to-bottom
-							#{variables.$db-transition-straight-hide};
-					}
+					transition: transform
+						#{variables.$db-transition-duration-slow}
+						#{variables.$db-transition-timing-emotional};
 				}
 			}
 		}

package/build/components/link/link.css

@@ -129,70 +129,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   transition: outline var(--db-transition-duration-extra-fast), color var(--db-transition-straight-emotional);
 }
 
-@keyframes show-right-to-left {
-  from {
-    transform: translateX(110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-right-to-left {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(110%);
-  }
-}
-@keyframes show-left-to-right {
-  from {
-    transform: translateX(-110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-left-to-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-110%);
-  }
-}
-@keyframes show-bottom-to-top {
-  from {
-    transform: translateY(110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-bottom-to-top {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(110%);
-  }
-}
-@keyframes show-top-to-bottom {
-  from {
-    transform: translateY(-110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-top-to-bottom {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(-110%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;

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

@@ -121,70 +121,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
  */
-@keyframes show-right-to-left {
-  from {
-    transform: translateX(110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-right-to-left {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(110%);
-  }
-}
-@keyframes show-left-to-right {
-  from {
-    transform: translateX(-110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-left-to-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-110%);
-  }
-}
-@keyframes show-bottom-to-top {
-  from {
-    transform: translateY(110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-bottom-to-top {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(110%);
-  }
-}
-@keyframes show-top-to-bottom {
-  from {
-    transform: translateY(-110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-top-to-bottom {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(-110%);
-  }
-}
 @keyframes popover-animation {
   0% {
     opacity: 0;
@@ -377,42 +313,46 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation {
   visibility: visible;
+  transform: translateX(0%);
 }
 @media screen and (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;
-    animation: show-right-to-left var(--db-transition-straight-show);
+    transition: visibility 0ms linear 0ms, transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
   }
 }
 .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
   inset-block: 0;
 }
+.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) {
   .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;
-    animation: hide-right-to-left var(--db-transition-straight-hide);
+    transition: visibility 0ms linear 410ms, transform var(--db-transition-duration-slow) var(--db-transition-timing-emotional);
   }
 }
 @media screen and (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) {
   .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation {
-    transition: visibility 0ms linear 0ms;
-    animation: show-right-to-left var(--db-transition-straight-show);
+    transition: visibility 0ms linear 0ms, transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
   }
 }
 @media screen and (max-width: 63.9375em) {
   .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
     inset-block: 0;
   }
+  .db-navigation-item .db-navigation-item-expand-button:not(.db-navigation-item .db-navigation-item-expand-button[aria-expanded=true]) ~ .db-sub-navigation {
+    transform: translateX(110%);
+  }
 }
 @media screen and (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;
-    animation: hide-right-to-left var(--db-transition-straight-hide);
+    transition: visibility 0ms linear 410ms, transform var(--db-transition-duration-slow) var(--db-transition-timing-emotional);
   }
 }
 .db-navigation-item .db-navigation-item-expand-button:is(button),

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

@@ -24,11 +24,13 @@
 	&[aria-expanded="true"] {
 		~ .db-sub-navigation {
 			visibility: visible;
+			transform: translateX(0%);
 
 			@media screen and (prefers-reduced-motion: no-preference) {
-				transition: visibility 0ms linear 0ms;
-				animation: show-right-to-left
-					#{variables.$db-transition-straight-show};
+				transition:
+					visibility 0ms linear 0ms,
+					transform #{variables.$db-transition-duration-extra-slow}
+						#{variables.$db-transition-timing-emotional};
 			}
 
 			.db-sub-navigation {
@@ -38,11 +40,16 @@
 	}
 
 	&:not(&[aria-expanded="true"]) {
+		~ .db-sub-navigation {
+			transform: translateX(110%);
+		}
+
 		@media screen and (prefers-reduced-motion: no-preference) {
 			~ .db-sub-navigation {
-				transition: visibility 0ms linear 410ms; // hide animation is 0.4s
-				animation: hide-right-to-left
-					#{variables.$db-transition-straight-hide};
+				transition:
+					visibility 0ms linear 410ms,
+					transform #{variables.$db-transition-duration-slow}
+						#{variables.$db-transition-timing-emotional}; // hide animation is 0.4s
 			}
 		}
 	}