survey-react 1.11.14 → 1.12.2

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.14
+ * surveyjs - Survey JavaScript library v1.12.2
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -542,7 +542,7 @@ sv-popup {
   align-items: center;
   justify-content: center;
   background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
-  padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
 
@@ -947,24 +947,26 @@ sv-popup {
   opacity: 0;
 }
 
-.sv-popup--animate-enter {
+.sv-popup--enter {
   animation-name: fadeIn;
   animation-fill-mode: forwards;
   animation-duration: 0.15s;
 }
 
-.sv-popup--modal.sv-popup--animate-enter {
+.sv-popup--modal.sv-popup--enter {
+  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
   animation-duration: 0.25s;
 }
 
-.sv-popup--animate-leave {
+.sv-popup--leave {
   animation-direction: reverse;
   animation-name: fadeIn;
   animation-fill-mode: forwards;
   animation-duration: 0.15s;
 }
 
-.sv-popup--modal.sv-popup--animate-leave {
+.sv-popup--modal.sv-popup--leave {
+  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
   animation-duration: 0.25s;
 }
 
@@ -972,14 +974,6 @@ sv-popup {
   opacity: 0;
 }
 
-@keyframes modalMoveDown {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(64px);
-  }
-}
 @keyframes modalMoveUp {
   from {
     transform: translateY(64px);
@@ -988,17 +982,16 @@ sv-popup {
     transform: translateY(0);
   }
 }
-.sv-popup--modal.sv-popup--animate-leave .sv-popup__container {
-  animation-name: modalMoveDown;
-  animation-fill-mode: forwards;
-  animation-duration: 0.25s;
-}
-
-.sv-popup--modal.sv-popup--animate-enter .sv-popup__container {
+.sv-popup--modal.sv-popup--leave .sv-popup__container, .sv-popup--modal.sv-popup--enter .sv-popup__container {
   animation-name: modalMoveUp;
+  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
   animation-fill-mode: forwards;
   animation-duration: 0.25s;
 }
+.sv-popup--modal.sv-popup--leave .sv-popup__container {
+  animation-direction: reverse;
+  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
 
 :root {
   --sjs-transition-duration: 150ms;
@@ -2135,15 +2128,33 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
 @keyframes moveInWithOverflow {
   from {
     overflow: hidden;
-    height: 0;
+    height: var(--animation-height-from);
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    border-top-width: 0;
+    border-bottom-width: 0;
   }
   99% {
     overflow: hidden;
-    height: var(--animation-height);
+    margin-top: var(--animation-margin-top);
+    margin-bottom: var(--animation-margin-bottom);
+    padding-top: var(--animation-padding-top);
+    padding-bottom: var(--animation-padding-bottom);
+    border-top-width: var(--animation-border-top-width);
+    border-bottom-width: var(--animation-border-bottom-width);
+    height: var(--animation-height-to);
   }
   to {
     overflow: visible;
-    height: var(--animation-height);
+    margin-top: var(--animation-margin-top);
+    margin-bottom: var(--animation-margin-bottom);
+    padding-top: var(--animation-padding-top);
+    padding-bottom: var(--animation-padding-bottom);
+    border-top-width: var(--animation-border-top-width);
+    border-bottom-width: var(--animation-border-bottom-width);
+    height: var(--animation-height-to);
   }
 }
 @keyframes moveIn {
@@ -2245,6 +2256,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
   white-space: nowrap;
   flex-shrink: 0;
 }
+
+.sd-page__num + span,
 .sd-element__num + span {
   float: left;
   width: 0;
@@ -2334,7 +2347,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
     overflow: visible;
   }
 }
-.sd-element-wrapper--fade-in {
+.sd-element-wrapper--enter {
   animation-name: elementMoveIn, fadeIn;
   animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
   animation-fill-mode: forwards;
@@ -2343,7 +2356,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
   opacity: 0;
 }
 
-.sd-element-wrapper--fade-out {
+.sd-element-wrapper--leave {
   animation-name: elementMoveIn, fadeIn;
   animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
   animation-fill-mode: forwards;
@@ -2356,29 +2369,29 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
   box-sizing: border-box;
 }
 
-.sd-element__content--fade-in,
-.sd-element__content--fade-out {
+.sd-element__content--enter,
+.sd-element__content--leave {
   --animation-padding-top: 0;
   --animation-padding-bottom: 0;
 }
 
-.sd-element__content--fade-in {
-  animation-name: fadeIn, moveInWithOverflow, paddingFadeIn;
+.sd-element__content--enter {
+  animation-name: fadeIn, moveInWithOverflow;
   min-height: 0 !important;
   opacity: 0;
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
-  animation-duration: var(--sjs-expand-fade-in-duration, 500ms), var(--sjs-expand-move-in-duration, 150ms), var(--sjs-expand-move-in-duration, 150ms);
+  animation-duration: var(--sjs-expand-fade-in-duration, 500ms), var(--sjs-expand-move-in-duration, 150ms);
   animation-delay: var(--sjs-expand-fade-in-delay, 150ms), 0s, 0s;
 }
 
-.sd-element__content--fade-out {
-  animation-name: fadeIn, moveInWithOverflow, paddingFadeIn;
+.sd-element__content--leave {
+  animation-name: fadeIn, moveInWithOverflow;
   min-height: 0 !important;
   animation-direction: reverse;
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
-  animation-duration: var(--sjs-collapse-fade-out-duration, 150ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-collapse-move-out-duration, 250ms);
+  animation-duration: var(--sjs-collapse-fade-out-duration, 150ms), var(--sjs-collapse-move-out-duration, 250ms);
   animation-delay: 0s, var(--sjs-collapse-move-out-delay, 100ms), var(--sjs-collapse-move-out-delay, 100ms);
 }
 
@@ -3195,78 +3208,73 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   }
 }
 @keyframes empty {}
-.sd-table__row--fade-out,
-.sd-table__row--fade-in {
+.sd-table__row--leave,
+.sd-table__row--enter {
   animation-name: empty;
-  animation-fill-mode: forwards;
-  --fade-in-animation-duration: calc(var(--sjs-matrix-row-fade-in-duration, 250ms) + var(--sjs-matrix-row-fade-in-delay, 150ms));
-  animation-duration: max(var(--fade-in-animation-duration), var(--sjs-matrix-row-move-in-duration, 150ms));
+  --move-whole-animation-duration: calc(var(--move-animation-duration) + var(--move-animation-delay));
+  --fade-whole-animation-duration: calc(var(--fade-animation-duration) + var(--fade-animation-delay));
+  animation-duration: max(var(--fade-whole-animation-duration), var(--move-whole-animation-duration));
 }
-.sd-table__row--fade-out > td,
-.sd-table__row--fade-in > td {
+.sd-table__row--leave > td,
+.sd-table__row--enter > td {
   animation-name: borderAnimation;
-  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
-  animation-duration: var(--sjs-matrix-row-move-in-duration, 150ms);
+  animation-direction: var(--animation-direction);
+  animation-timing-function: var(--animation-timing-function);
+  animation-duration: var(--move-animation-duration);
   animation-fill-mode: forwards;
+  animation-delay: var(--move-animation-delay);
 }
-.sd-table__row--fade-out > td > div,
-.sd-table__row--fade-in > td > div {
+.sd-table__row--leave > td > div,
+.sd-table__row--enter > td > div {
   animation-name: fadeIn, moveInWithOverflow;
   opacity: 0;
-  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  animation-direction: var(--animation-direction);
+  animation-timing-function: var(--animation-timing-function);
   animation-fill-mode: forwards;
-  animation-duration: var(--sjs-matrix-row-fade-in-duration, 250ms), var(--sjs-matrix-row-move-in-duration, 150ms);
-  animation-delay: var(--sjs-matrix-row-fade-in-delay, 150ms), 0s;
+  animation-duration: var(--fade-animation-duration), var(--move-animation-duration);
+  animation-delay: var(--fade-animation-delay), var(--move-animation-delay);
 }
 
-.sd-table__row--fade-out {
-  animation-direction: reverse;
-  --move-out-animation-duration: calc(var(--sjs-matrix-row-move-out-duration, 250ms) + var(--sjs-matrix-row-move-out-delay, 100ms));
-  animation-duration: max(var(--move-out-animation-duration), var(--sjs-matrix-row-fade-out-duration, 100ms));
-}
-.sd-table__row--fade-out > td {
-  animation-duration: var(--sjs-matrix-row-move-out-duration, 250ms);
-  animation-delay: var(--sjs-matrix-row-move-out-delay, 100ms);
-  animation-direction: reverse;
-  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+.sd-table__row--enter {
+  --move-animation-delay: 0s;
+  --move-animation-duration: var(--sjs-matrix-row-move-in-duration, 150ms);
+  --fade-animation-duration: var(--sjs-matrix-row-fade-in-duration, 250ms);
+  --fade-animation-delay: var(--sjs-matrix-row-fade-in-delay, 150ms);
+  --animation-direction: normal;
+  --animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
 }
-.sd-table__row--fade-out > td > div {
-  animation-direction: reverse;
-  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
-  animation-duration: var(--sjs-matrix-row-fade-out-duration, 100ms), var(--sjs-matrix-row-move-out-duration, 250ms);
-  animation-delay: 0s, var(--sjs-matrix-row-move-out-delay, 100ms);
+
+.sd-table__row--leave {
+  --move-animation-delay: var(--sjs-matrix-row-move-out-delay, 100ms);
+  --move-animation-duration: var(--sjs-matrix-row-move-out-duration, 250ms);
+  --fade-animation-duration: var(--sjs-matrix-row-fade-out-duration, 100ms);
+  --fade-animation-delay: 0s;
+  --animation-direction: reverse;
+  --animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
 }
 
-.sd-table__row--detail.sd-table__row--fade-in > td, .sd-table__row--detail.sd-table__row--fade-out > td {
+.sd-table__row--detail.sd-table__row--enter > td, .sd-table__row--detail.sd-table__row--leave > td {
   animation-name: borderAnimation, paddingAnimation;
-  animation-duration: var(--sjs-matrix-row-move-in-duration, 150ms);
+  animation-duration: var(--move-animation-duration);
   animation-fill-mode: forwards;
-}
-.sd-table__row--detail.sd-table__row--fade-in {
-  --fade-in-animation-duration: calc(var(--sjs-matrix-detail-row-fade-in-duration, 500ms) + var(--sjs-matrix-detail-row-fade-in-delay, 150ms));
-  animation-duration: max(var(--fade-in-animation-duration), var(--sjs-matrix-detail-row-move-in-duration, 150ms));
-}
-.sd-table__row--detail.sd-table__row--fade-in > td {
-  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
-  animation-duration: var(--sjs-matrix-detail-row-move-in-duration, 150ms);
-}
-.sd-table__row--detail.sd-table__row--fade-in > td > div {
-  animation-duration: var(--sjs-matrix-detail-row-fade-in-duration, 500ms), var(--sjs-matrix-detail-row-move-in-duration, 150ms);
-  animation-delay: var(--sjs-matrix-detail-row-fade-in-delay, 150ms), 0s;
-}
-.sd-table__row--detail.sd-table__row--fade-out {
-  --move-out-animation-duration: calc(var(--sjs-matrix-detail-row-move-out-duration, 250ms) + var(--sjs-matrix-detail-row-move-out-delay, 100ms));
-  animation-duration: max(var(--move-out-animation-duration), var(--sjs-matrix-detail-row-fade-out-duration, 150ms));
-}
-.sd-table__row--detail.sd-table__row--fade-out > td {
-  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
-  animation-duration: var(--sjs-matrix-detail-row-move-out-duration, 250ms);
-  animation-delay: var(--sjs-matrix-detail-row-move-out-delay, 100ms);
-  animation-direction: reverse;
-}
-.sd-table__row--detail.sd-table__row--fade-out > td > div {
-  animation-duration: var(--sjs-matrix-detail-row-fade-out-duration, 150ms), var(--sjs-matrix-detail-row-move-out-duration, 250ms);
-  animation-delay: 0s, var(--sjs-matrix-detail-row-move-out-delay, 100ms);
+  animation-direction: var(--animation-direction);
+  animation-timing-function: var(--animation-timing-function);
+}
+.sd-table__row--detail.sd-table__row--enter {
+  --move-animation-delay: 0s;
+  --move-animation-duration: var(--sjs-matrix-detail-row-move-in-duration, 150ms);
+  --fade-animation-duration: var(--sjs-matrix-detail-row-fade-in-duration, 500ms);
+  --fade-animation-delay: var(--sjs-matrix-detail-row-fade-in-delay, 150ms);
+  --animation-direction: normal;
+  --animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+}
+.sd-table__row--detail.sd-table__row--leave {
+  --move-animation-delay: var(--sjs-matrix-detail-row-move-out-delay, 100ms);
+  --move-animation-duration: var(--sjs-matrix-detail-row-move-out-duration, 250ms);
+  --fade-animation-duration: var(--sjs-matrix-detail-row-fade-out-duration, 150ms);
+  --fade-animation-delay: 0s;
+  --animation-direction: reverse;
+  --animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
 }
 
 .sd-table {
@@ -3956,45 +3964,38 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   flex-direction: row;
   width: 100%;
   box-sizing: border-box;
-  --animate-margin: var(--sd-base-vertical-padding);
   margin-top: var(--sd-base-vertical-padding);
 }
 
 .sd-row.sd-page__row {
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  --animate-margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-page__row.sd-row--compact {
   margin-top: var(--sd-base-vertical-padding);
-  --animate-margin: var(--sd-base-vertical-padding);
 }
 
 .sd-row:first-of-type {
   margin-top: 0;
-  --animate-margin: 0;
 }
 
 .sd-page__title ~ .sd-row.sd-page__row:not(.sd-row--compact),
 .sd-page__description ~ .sd-row.sd-page__row:not(.sd-row--compact) {
   margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  --animate-margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-page__title ~ .sd-page__row.sd-row--compact,
 .sd-page__description ~ .sd-page__row.sd-row--compact {
   margin-top: var(--sd-base-vertical-padding);
-  --animate-margin: var(--sd-base-vertical-padding);
 }
-.sd-page__title ~ .sd-page__row.sd-row.sd-row--fade-in.sd-row--fade-in,
-.sd-page__description ~ .sd-page__row.sd-row.sd-row--fade-in.sd-row--fade-in {
+.sd-page__title ~ .sd-page__row.sd-row.sd-row--enter.sd-row-delayed-enter,
+.sd-page__description ~ .sd-page__row.sd-row.sd-row--enter.sd-row-delayed-enter {
   margin-top: 0;
 }
 
 .sd-row.sd-page__row:not(.sd-row--compact) ~ .sd-row.sd-page__row:not(.sd-row--compact) {
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  --animate-margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sd-row.sd-page__row:not(.sd-row--compact) ~ .sd-page__row.sd-row.sd-row--fade-in.sd-row--fade-in {
+.sd-row.sd-page__row:not(.sd-row--compact) ~ .sd-page__row.sd-row.sd-row--enter.sd-row-delayed-enter {
   margin-top: 0;
 }
 
@@ -4052,21 +4053,13 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   white-space: nowrap;
 }
 
-@keyframes marginFadeIn {
-  from {
-    margin-top: 0;
-  }
-  to {
-    margin-top: var(--animate-margin);
-  }
-}
-.sd-row.sd-row--fade-in {
+.sd-row.sd-row--enter {
   margin-top: 0;
 }
 
-.sd-row--fade-in {
+.sd-row--enter {
   animation-fill-mode: forwards;
-  animation-name: fadeIn, moveInWithOverflow, marginFadeIn;
+  animation-name: fadeIn, moveInWithOverflow;
   min-height: 0 !important;
   opacity: 0;
   height: 0;
@@ -4075,12 +4068,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   animation-duration: var(--sjs-row-fade-in-duration, 500ms), var(--sjs-row-move-in-duration, 150ms), var(--sjs-row-move-in-duration, 150ms);
 }
 
-.sd-row--delayed-fade-in {
+.sd-row--delayed-enter {
   animation-delay: calc(var(--sjs-row-fade-in-delay, 150ms) + var(--sjs-row-fade-in-animation-delay, 400ms)), var(--sjs-row-fade-in-animation-delay, 400ms), var(--sjs-row-fade-in-animation-delay, 400ms);
 }
 
-.sd-row--fade-out {
-  animation-name: fadeIn, moveInWithOverflow, marginFadeIn;
+.sd-row--leave {
+  animation-name: fadeIn, moveInWithOverflow;
   animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
   animation-fill-mode: forwards;
   animation-direction: reverse;
@@ -4089,11 +4082,11 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   animation-duration: var(--sjs-row-fade-out-duration, 150ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms);
 }
 
-.sd-row--fade-in .sd-element-wrapper--fade-in {
+.sd-row--enter .sd-element-wrapper--enter {
   animation: none;
 }
 
-.sd-row--fade-out .sd-element-wrapper--fade-out {
+.sd-row--leave .sd-element-wrapper--leave {
   animation: none;
 }
 
@@ -4356,6 +4349,38 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   width: 100%;
 }
 
+.sd-item--enter,
+.sd-item--leave {
+  animation-name: moveInWithOverflow, fadeIn;
+  opacity: 0;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  animation-direction: var(--animation-direction);
+  animation-duration: var(--move-animation-duration), var(--fade-animation-duration);
+  animation-delay: var(--move-animation-delay), var(--fade-animation-delay);
+}
+
+.sd-item--enter {
+  --animation-direction: normal;
+  --move-animation-duration: var(--sjs-ranking-move-in-duration, 150ms);
+  --move-animation-delay: 0s;
+  --fade-animation-duration: var(--sjs-ranking-fade-in-duration, 100ms);
+  --fade-animation-delay: var(--sjs-ranking-fade-in-delay, 150ms);
+}
+
+.sd-item--leave {
+  --animation-direction: reverse;
+  --move-animation-duration: var(--sjs-ranking-move-out-duration, 150ms);
+  --move-animation-delay: var(--sjs-ranking-move-out-delay, 0ms);
+  --fade-animation-duration: var(--sjs-ranking-fade-out-duration, 100ms);
+  --fade-animation-delay: 0s;
+}
+
+div[class*=sv-q-column-]:not(:first-of-type) .sd-item--enter {
+  --move-animation-duration: 0s;
+  --fade-animation-delay: 0s;
+}
+
 .sd-checkbox__decorator {
   border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
 }
@@ -5415,7 +5440,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-inline-start: calc(-0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-dropdown-popup.sv-single-select-list.sv-popup--animate-leave .sd-list__item.sv-list__item--selected .sv-list__item-body {
+.sv-dropdown-popup.sv-single-select-list.sv-popup--leave .sd-list__item.sv-list__item--selected .sv-list__item-body {
   font-weight: normal;
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   background-color: transparent;
@@ -6399,8 +6424,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
     transform: translateX(0);
   }
 }
-.sd-paneldynamic__panel-wrapper--fade-in.sv-pd-animation-left,
-.sd-paneldynamic__panel-wrapper--fade-in.sv-pd-animation-right {
+.sd-paneldynamic__panel-wrapper--enter.sv-pd-animation-left,
+.sd-paneldynamic__panel-wrapper--enter.sv-pd-animation-right {
   --sjs-pd-tab-animation-delay: 0ms;
   animation-name: movePanel, changeHeight, paddingFadeIn, fadeIn;
   animation-duration: var(--sjs-pd-tab-move-in-duration, 250ms), var(--sjs-pd-tab-height-change-duration, 250ms), var(--sjs-pd-tab-height-change-duration, 250ms), var(--sjs-pd-tab-fade-in-duration, 250ms);
@@ -6415,16 +6440,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   --animation-padding-bottom: calc(1 * var(--sd-base-padding));
 }
 
-.sd-paneldynamic__panel-wrapper--fade-in.sv-pd-animation-left {
+.sd-paneldynamic__panel-wrapper--enter.sv-pd-animation-left {
   --sjs-pd-tab-move-margin: calc(1 * var(--sjs-pd-tab-move-in-margin, 50%));
 }
 
-.sd-paneldynamic__panel-wrapper--fade-in.sv-pd-animation-right {
+.sd-paneldynamic__panel-wrapper--enter.sv-pd-animation-right {
   --sjs-pd-tab-move-margin: calc(-1 * var(--sjs-pd-tab-move-in-margin, 50%));
 }
 
-.sd-paneldynamic__panel-wrapper--fade-out.sv-pd-animation-left,
-.sd-paneldynamic__panel-wrapper--fade-out.sv-pd-animation-right {
+.sd-paneldynamic__panel-wrapper--leave.sv-pd-animation-left,
+.sd-paneldynamic__panel-wrapper--leave.sv-pd-animation-right {
   animation-name: fadeIn, movePanel;
   animation-duration: var(--sjs-pd-tab-fade-out-duration, 250ms), var(--sjs-pd-tab-move-out-duration, 250ms);
   animation-delay: var(--sjs-pd-tab-fade-out-delay, 0ms), var(--sjs-pd-tab-move-out-delay, 0ms);
@@ -6437,15 +6462,15 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: calc(100% - 2 * var(--sd-base-padding));
 }
 
-.sd-paneldynamic__panel-wrapper--fade-out.sv-pd-animation-left {
+.sd-paneldynamic__panel-wrapper--leave.sv-pd-animation-left {
   --sjs-pd-tab-move-margin: calc(-1 * var(--sjs-pd-tab-move-out-margin, 50%));
 }
 
-.sd-paneldynamic__panel-wrapper--fade-out.sv-pd-animation-right {
+.sd-paneldynamic__panel-wrapper--leave.sv-pd-animation-right {
   --sjs-pd-tab-move-margin: calc(1 * var(--sjs-pd-tab-move-out-margin, 50%));
 }
 
-.sd-paneldynamic__panel-wrapper--fade-in.sv-pd-animation-adding {
+.sd-paneldynamic__panel-wrapper--enter.sv-pd-animation-adding {
   animation-name: fadeIn, changeHeight, paddingFadeIn;
   animation-duration: var(--sjs-pd-tab-add-fade-in-duration, 500ms), var(--sjs-pd-tab-height-change-duration, 250ms), var(--sjs-pd-tab-height-change-duration, 250ms);
   animation-delay: calc(var(--sjs-pd-tab-add-fade-in-delay, 250ms) + var(--sjs-pd-tab-animation-delay)), calc(var(--sjs-pd-tab-height-change-delay, 0ms) + var(--sjs-pd-tab-animation-delay)), calc(var(--sjs-pd-tab-height-change-delay, 0ms) + var(--sjs-pd-tab-animation-delay));
@@ -6454,11 +6479,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   transform: translateX(0);
 }
 
-.sd-paneldynamic__panel-wrapper--fade-in.sv-pd-animation-removing {
+.sd-paneldynamic__panel-wrapper--enter.sv-pd-animation-removing {
   --sjs-pd-tab-animation-delay: var(--sjs-pd-tab-remove-fade-in-delay, 150ms);
 }
 
-.sd-paneldynamic__panel-wrapper--fade-out.sv-pd-animation-removing {
+.sd-paneldynamic__panel-wrapper--leave.sv-pd-animation-removing {
   animation-name: fadeIn;
   animation-duration: var(--sjs-pd-tab-remove-fade-out-duration, 150ms);
   animation-delay: var(--sjs-pd-tab-remove-fade-out-delay, 0ms);
@@ -6471,23 +6496,23 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: calc(100% - 2 * var(--sd-base-padding));
 }
 
-.sd-paneldynamic__panel-wrapper--fade-in,
-.sd-paneldynamic__panel-wrapper--fade-out {
-  animation-name: fadeIn, moveInWithOverflow, paddingFadeIn;
+.sd-paneldynamic__panel-wrapper--enter,
+.sd-paneldynamic__panel-wrapper--leave {
+  animation-name: fadeIn, moveInWithOverflow;
   animation-fill-mode: forwards;
   --animation-padding-top: 0;
   --animation-padding-bottom: calc(1 * var(--sd-base-padding));
   min-height: 0 !important;
 }
 
-.sd-paneldynamic__panel-wrapper--fade-in {
+.sd-paneldynamic__panel-wrapper--enter {
   opacity: 0;
   animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
   animation-duration: var(--sjs-pd-list-fade-in-duration, 500ms), var(--sjs-pd-list-move-in-duration, 250ms), var(--sjs-pd-list-move-in-duration, 250ms);
   animation-delay: var(--sjs-pd-list-fade-in-delay, 250ms), 0s, 0s;
 }
 
-.sd-paneldynamic__panel-wrapper--fade-out {
+.sd-paneldynamic__panel-wrapper--leave {
   animation-direction: reverse;
   animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
   animation-duration: var(--sjs-pd-list-fade-out-duration, 150ms), var(--sjs-pd-list-move-out-duration, 250ms), var(--sjs-pd-list-move-out-duration, 250ms);