@db-ux/core-components 4.4.0-loading-567cd0c → 4.4.1-floating-components-066d296

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @db-ux/core-components
 
+## 4.4.1
+
+### Patch Changes
+
+- DBCustomSelect: Prevent floating label from flickering during initial render - [see commit e5ceff8](https://github.com/db-ux-design-system/core-web/commit/e5ceff861534186cf86d1f5f0a876e04aeac9e41)
+
 ## 4.4.0
 
 ### Minor Changes

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

@@ -77,12 +77,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-@keyframes wobbling {
-  50% {
-    inset-inline-start: 100%;
-    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
-  }
-}
 .db-accordion-item > details > summary:not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;

package/build/components/button/button.css

@@ -154,48 +154,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   display: inline-flex;
 }
 
-.db-button .db-loading-indicator:not([data-overlay]) div label, .db-button .db-loading-indicator:not([data-overlay=true]) div label,
-.db-button .db-loading-indicator:not([data-overlay]) div span,
-.db-button .db-loading-indicator:not([data-overlay=true]) div span {
-  display: none;
-}
-
-.db-button:has(.db-loading-indicator:not([data-overlay=true]))[data-icon]::before, .db-button:has(.db-loading-indicator:not([data-overlay=true]))[data-icon-before]::before {
-  display: none;
-}
-.db-button:has(.db-loading-indicator:not([data-overlay=true]))[data-icon-after]::after {
-  display: none;
-}
-.db-button:has(.db-loading-indicator[data-state=inactive]) .db-loading-indicator {
-  display: none;
-}
-.db-button .db-loading-indicator:not([data-state=successful], [data-state=critical]) {
-  --db-loading-indicator-segment-color: currentcolor;
-  --db-loading-indicator-segment-color-overlay: currentcolor;
-}
-.db-button .db-loading-indicator:not([data-overlay]), .db-button .db-loading-indicator:not([data-overlay=true]) {
-  margin-inline-end: var(--db-spacing-fixed-xs);
-}
-.db-button .db-loading-indicator[data-overlay=true] {
-  background-color: transparent;
-}
-.db-button .db-loading-indicator[data-overlay=true]::before {
-  z-index: 1;
-  background-color: var(--db-loading-indicator-button-overlay-color, inherit);
-}
-.db-button .db-loading-indicator[data-overlay=true]::after {
-  z-index: 0;
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background-color: var(--db-adaptive-bg-basic-level-1-default);
-}
-.db-button .db-loading-indicator[data-overlay=true] svg,
-.db-button .db-loading-indicator[data-overlay=true] div {
-  z-index: 2;
-}
-
 .db-button {
   max-inline-size: 100%;
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
@@ -235,7 +193,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   inline-size: 100%;
 }
 .db-button[data-variant=brand] {
-  --db-loading-indicator-button-overlay-color: var(--db-brand-origin-default);
   background-color: var(--db-brand-origin-default);
   color: var(--db-brand-on-origin-default);
   border-color: var(--db-brand-on-bg-basic-emphasis-70-default);

package/build/components/button/button.scss

@@ -6,13 +6,11 @@
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/component";
 @use "../../styles/internal/button-components";
-@use "../../styles/internal/loading";
 
 // generic styles can be found in _button-components.scss
 .db-button {
 	@extend %default-interactive-component;
 	@extend %default-button;
-	@extend %interactive-element-with-loading;
 	@extend %db-overwrite-font-size-md;
 
 	max-inline-size: 100%;
@@ -64,8 +62,6 @@
 	}
 
 	&[data-variant="brand"] {
-		--db-loading-indicator-button-overlay-color: #{colors.$db-brand-origin-default};
-
 		background-color: colors.$db-brand-origin-default;
 		color: colors.$db-brand-on-origin-default;
 		border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;

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

@@ -219,6 +219,21 @@ 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 popover-animation {
+  0% {
+    opacity: 0;
+    transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
+  }
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md
@@ -412,10 +427,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     display: none;
   }
 }
-.db-custom-select-dropdown > db-loading-indicator > .db-loading-indicator,
-.db-custom-select-dropdown > .db-loading-indicator,
 .db-custom-select-dropdown > db-infotext > .db-infotext,
 .db-custom-select-dropdown > .db-infotext {
   padding: var(--db-spacing-fixed-lg) var(--db-spacing-fixed-md);
   margin: auto;
 }
+@media screen and (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

@@ -2,6 +2,7 @@
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "@db-ux/core-foundations/build/styles/screen-sizes";
 @use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/animation";
 @use "../../styles/internal/form-components";
 
 .db-custom-select-dropdown {
@@ -68,11 +69,18 @@
 		}
 	}
 
-	> db-loading-indicator > .db-loading-indicator,
-	> .db-loading-indicator,
 	> db-infotext > .db-infotext,
 	> .db-infotext {
 		padding: variables.$db-spacing-fixed-lg variables.$db-spacing-fixed-md;
 		margin: auto;
+
+		&[data-icon="circular_arrows"] {
+			&::before {
+				@media screen and (prefers-reduced-motion: no-preference) {
+					animation: rotate 1.5s linear 0s infinite normal none
+						running;
+				}
+			}
+		}
 	}
 }

package/build/components/drawer/drawer.css

@@ -58,12 +58,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-@keyframes wobbling {
-  50% {
-    inset-inline-start: 100%;
-    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
-  }
-}
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/link/link.css

@@ -144,12 +144,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-@keyframes wobbling {
-  50% {
-    inset-inline-start: 100%;
-    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
-  }
-}
 .db-link[data-content=internal]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after, .db-link[data-content=external]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;

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

@@ -136,12 +136,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-@keyframes wobbling {
-  50% {
-    inset-inline-start: 100%;
-    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
-  }
-}
 .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
 .db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);

package/build/components/notification/notification.css

@@ -980,12 +980,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-@keyframes wobbling {
-  50% {
-    inset-inline-start: 100%;
-    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
-  }
-}
 .db-notification a:not([hidden]) {
   display: inline-block;
 }

package/build/components/popover/popover.css

@@ -58,12 +58,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-@keyframes wobbling {
-  50% {
-    inset-inline-start: 100%;
-    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
-  }
-}
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
@@ -80,10 +74,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-popover > article:not([data-placement], [data-corrected-placement]), .db-popover > article[data-placement=bottom]:not([data-corrected-placement]), .db-popover > article[data-placement=top]:not([data-corrected-placement]), .db-popover > article[data-corrected-placement=bottom], .db-popover > article[data-corrected-placement=top] {
   --db-popover-center-x: -50%;
   inset-inline-start: 50%;
+  transform: translateX(var(--db-popover-center-x, 0));
 }
 .db-popover > article[data-corrected-placement=left], .db-popover > article[data-corrected-placement=right], .db-popover > article[data-placement=left]:not([data-corrected-placement]), .db-popover > article[data-placement=right]:not([data-corrected-placement]) {
   --db-popover-center-y: -50%;
   inset-block-start: 50%;
+  transform: translateY(var(--db-popover-center-y, 0));
 }
 
 .db-popover > article {
@@ -180,6 +176,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (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) {
   .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;
@@ -205,6 +207,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (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) {
   .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;
@@ -230,6 +238,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (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) {
   .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;
@@ -255,6 +269,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (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) {
   .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;

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

@@ -81,12 +81,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-@keyframes wobbling {
-  50% {
-    inset-inline-start: 100%;
-    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
-  }
-}
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/tag/tag.css

@@ -27,12 +27,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-@keyframes wobbling {
-  50% {
-    inset-inline-start: 100%;
-    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
-  }
-}
 /* Variants for adaptive components like input, select, notification, ... */
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-semantic=neutral] {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */

package/build/components/textarea/textarea.css

@@ -216,12 +216,6 @@ input[type=radio]:checked) > label {
     transform: rotate(1turn);
   }
 }
-@keyframes wobbling {
-  50% {
-    inset-inline-start: 100%;
-    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
-  }
-}
 .db-textarea textarea {
   /* Buttons */
   /* Up */

package/build/components/tooltip/tooltip.css

@@ -130,12 +130,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-@keyframes wobbling {
-  50% {
-    inset-inline-start: 100%;
-    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
-  }
-}
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
@@ -152,10 +146,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-tooltip:not([data-placement], [data-corrected-placement]), [data-placement=bottom].db-tooltip:not([data-corrected-placement]), [data-placement=top].db-tooltip:not([data-corrected-placement]), [data-corrected-placement=bottom].db-tooltip, [data-corrected-placement=top].db-tooltip {
   --db-popover-center-x: -50%;
   inset-inline-start: 50%;
+  transform: translateX(var(--db-popover-center-x, 0));
 }
 [data-corrected-placement=left].db-tooltip, [data-corrected-placement=right].db-tooltip, [data-placement=left].db-tooltip:not([data-corrected-placement]), [data-placement=right].db-tooltip:not([data-corrected-placement]) {
   --db-popover-center-y: -50%;
   inset-block-start: 50%;
+  transform: translateY(var(--db-popover-center-y, 0));
 }
 
 .db-tooltip {
@@ -252,6 +248,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  .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 {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   .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 {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -277,6 +279,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  [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 {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   [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 {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -302,6 +310,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  [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 {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   [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 {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -327,6 +341,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  [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 {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   [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 {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;