survey-react 1.9.139 → 1.10.2

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.139
+ * surveyjs - Survey JavaScript library v1.10.2
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1875,6 +1875,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-sizing: border-box;
   width: 100%;
+  min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   outline: none;
   font-size: var(--sjs-font-size, 16px);
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -2004,23 +2005,44 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
     opacity: 1;
   }
 }
-@keyframes moveIn {
+@keyframes changeHeight {
   from {
-    height: 0;
+    height: var(--animation-height-from);
   }
   to {
-    height: var(--animation-height);
+    height: var(--animation-height-to);
   }
 }
-@keyframes overflowIn {
-  0% {
+@keyframes moveInWithOverflow {
+  from {
     overflow: hidden;
+    height: 0;
   }
   99% {
     overflow: hidden;
+    height: var(--animation-height);
   }
-  100% {
+  to {
     overflow: visible;
+    height: var(--animation-height);
+  }
+}
+@keyframes moveIn {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--animation-height);
+  }
+}
+@keyframes paddingFadeIn {
+  from {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  to {
+    padding-bottom: var(--animation-padding-bottom);
+    padding-top: var(--animation-padding-top);
   }
 }
 .sd-element {
@@ -2080,6 +2102,9 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-element__title .sv-string-viewer {
   white-space: normal;
 }
+.sd-element__title .sv-string-viewer.sv-string-viewer--multiline {
+  white-space: pre-wrap;
+}
 
 .sd-element__num {
   float: left;
@@ -2107,6 +2132,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 [style*="direction: rtl"] .sd-element__num {
   float: right;
 }
+[dir=rtl] .sd-element__title--expandable:before,
+[style*="direction:rtl"] .sd-element__title--expandable:before,
+[style*="direction: rtl"] .sd-element__title--expandable:before {
+  transform: rotate(180deg);
+}
 
 .sd-element__title--num-inline .sd-element__num {
   float: none;
@@ -2134,7 +2164,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   position: absolute;
-  left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  inset-inline-start: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   transition-property: transform;
 }
@@ -2199,16 +2229,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   animation-delay: var(--sjs-element-move-out-delay, 0ms), 0s;
 }
 
-@keyframes paddingFadeIn {
-  from {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  to {
-    padding-bottom: var(--animation-padding-bottom);
-    padding-top: var(--animation-padding-top);
-  }
-}
 .sd-element__content {
   box-sizing: border-box;
 }
@@ -2220,23 +2240,23 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-element__content--fade-in {
-  animation-name: fadeIn, moveIn, paddingFadeIn, overflowIn;
+  animation-name: fadeIn, moveInWithOverflow, paddingFadeIn;
   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), var(--sjs-expand-move-in-duration, 150ms);
-  animation-delay: var(--sjs-expand-fade-in-delay, 150ms), 0s, 0s, 0s;
+  animation-duration: var(--sjs-expand-fade-in-duration, 500ms), var(--sjs-expand-move-in-duration, 150ms), 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, moveIn, paddingFadeIn, overflowIn;
+  animation-name: fadeIn, moveInWithOverflow, paddingFadeIn;
   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), var(--sjs-expand-move-in-duration, 150ms);
-  animation-delay: 0s, var(--sjs-collapse-move-out-delay, 100ms), var(--sjs-collapse-move-out-delay, 100ms), var(--sjs-collapse-move-out-delay, 100ms);
+  animation-duration: var(--sjs-collapse-fade-out-duration, 150ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-collapse-move-out-duration, 250ms);
+  animation-delay: 0s, var(--sjs-collapse-move-out-delay, 100ms), var(--sjs-collapse-move-out-delay, 100ms);
 }
 
 .sd-element--expandable.sd-elemenet--expandable--animating > .sd-element__header:focus-within, .sd-element--expandable.sd-elemenet--expandable--animating > .sd-element__header:hover {
@@ -2274,14 +2294,24 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
   transition-delay: var(--sjs-collapse-move-out-delay, 100ms);
 }
-.sd-elemenet--expandable--animating.sd-element--expandable.sd-element--complex > .sd-element__header--location-top:after {
+.sd-elemenet--expandable--animating.sd-element--expandable.sd-element--complex:not(.sd-question--empty) > .sd-element__header--location-top:after {
   display: block;
-  animation-name: fadeIn;
+  opacity: 0;
+  height: 0;
+  --animation-height: 1px;
+  animation-name: fadeIn, moveIn;
   animation-fill-mode: forwards;
-  animation-duration: var(--sjs-transition-duration, 150ms);
+  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  animation-delay: var(--sjs-expand-fade-in-delay, 150ms), 0s;
+  animation-duration: var(--sjs-expand-fade-in-duration, 500ms), var(--sjs-expand-move-in-duration, 150ms);
 }
-.sd-elemenet--expandable--animating.sd-element--expandable.sd-element--complex.sd-element--collapsed .sd-element__header--location-top:after {
+.sd-elemenet--expandable--animating.sd-element--expandable.sd-element--complex:not(.sd-question--empty).sd-element--collapsed .sd-element__header--location-top:after {
   animation-direction: reverse;
+  opacity: 1;
+  height: 1px;
+  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+  animation-delay: 0s, var(--sjs-collapse-move-out-delay, 100ms);
+  animation-duration: var(--sjs-collapse-fade-out-duration, 150ms), var(--sjs-collapse-move-out-duration, 250ms);
 }
 
 .sd-question {
@@ -2441,6 +2471,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
 }
 
+.sd-question__content {
+  box-sizing: border-box;
+}
+
 .sd-error {
   display: block;
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2465,7 +2499,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sd-base-padding);
   box-sizing: border-box;
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  margin-left: calc(-1 * var(--sd-base-padding));
+  margin-inline-start: calc(-1 * var(--sd-base-padding));
   width: calc(100% + 2 * var(--sd-base-padding));
 }
 .sd-element--collapsed.sd-element--with-frame {
@@ -2544,7 +2578,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-element--nested-with-borders > .sd-element__header--location-top:after,
 .sd-element--complex.sd-element--with-frame > .sd-element__header--location-top:after {
   bottom: calc(-1 * var(--sd-base-vertical-padding));
-  left: calc(-1 * var(--sd-base-padding));
+  inset-inline-start: calc(-1 * var(--sd-base-padding));
   width: calc(100% + 2 * var(--sd-base-padding));
 }
 
@@ -2999,6 +3033,99 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
+@keyframes borderAnimation {
+  from {
+    border-width: 0px;
+  }
+  to {
+    border-width: 8px;
+  }
+}
+@keyframes paddingAnimation {
+  from {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  to {
+    padding-top: 24px;
+    padding-bottom: 32px;
+  }
+}
+@keyframes empty {}
+.sd-table__row--fade-out,
+.sd-table__row--fade-in {
+  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));
+}
+.sd-table__row--fade-out > td,
+.sd-table__row--fade-in > 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-fill-mode: forwards;
+}
+.sd-table__row--fade-out > td > div,
+.sd-table__row--fade-in > td > div {
+  animation-name: fadeIn, moveInWithOverflow;
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  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;
+}
+
+.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--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--detail.sd-table__row--fade-in > td, .sd-table__row--detail.sd-table__row--fade-out > td {
+  animation-name: borderAnimation, paddingAnimation;
+  animation-duration: var(--sjs-matrix-row-move-in-duration, 150ms);
+  animation-fill-mode: forwards;
+}
+.sd-table__row--detail.sd-table__row--fade-in {
+  --fade-in-animation-duration: calc(var(--sjs--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--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);
+}
+
 .sd-table {
   width: 100%;
   background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
@@ -3048,6 +3175,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-panel:not(.sd-panel--as-page) > .sd-panel__content .sd-question--table > .sd-question__header ~ .sd-question__content {
   padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  --animation-padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-panel:not(.sd-panel--as-page) > .sd-panel__content .sd-question--table > .sd-question__header ~ .sd-question__content .sd-table--no-header {
   padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3328,6 +3456,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   overflow-x: auto;
 }
 
+.sd-question--table.sd-element--collapsed,
 .sd-question--table.sd-element--nested {
   overflow-x: visible;
 }
@@ -3383,6 +3512,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-question--table > .sd-question__content {
   padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  --animation-padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   min-width: min-content;
 }
 .sd-question--table.sd-element--nested > .sd-question__content {
@@ -3542,6 +3672,11 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   align-items: stretch;
 }
 
+.sd-panel.sd-panel--as-page > .sd-panel__content > .sd-row--multiple:not(.sd-row--compact) {
+  margin-left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(100% + var(--base-unit) * 2);
+}
+
 .sd-panel:not(.sd-panel--as-page) .sd-row--multiple {
   row-gap: var(--sd-base-vertical-padding);
 }
@@ -3587,22 +3722,22 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-row--fade-in {
   animation-fill-mode: forwards;
-  animation-name: fadeIn, moveIn, marginFadeIn, overflowIn;
+  animation-name: fadeIn, moveInWithOverflow, marginFadeIn;
   min-height: 0 !important;
   opacity: 0;
   animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
-  animation-delay: var(--sjs-row-fade-in-delay, 150ms), 0s, 0s, 0s;
-  animation-duration: var(--sjs-row-fade-in-duration, 500ms), var(--sjs-row-move-in-duration, 150ms), var(--sjs-row-move-in-duration, 150ms), var(--sjs-row-move-in-duration, 150ms);
+  animation-delay: var(--sjs-row-fade-in-delay, 150ms), 0s, 0s;
+  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--fade-out {
-  animation-name: fadeIn, moveIn, marginFadeIn, overflowIn;
+  animation-name: fadeIn, moveInWithOverflow, marginFadeIn;
   animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
   animation-fill-mode: forwards;
   animation-direction: reverse;
   min-height: 0 !important;
-  animation-delay: 0s, var(--sjs-row-move-out-delay, 100ms), var(--sjs-row-move-out-delay, 100ms), var(--sjs-row-move-out-delay, 100ms);
-  animation-duration: var(--sjs-row-fade-out-duration, 150ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms);
+  animation-delay: 0s, var(--sjs-row-move-out-delay, 100ms), var(--sjs-row-move-out-delay, 100ms);
+  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 {
@@ -4307,6 +4442,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   position: relative;
   width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  box-sizing: content-box;
 }
 .sd-rating__item-star:not(:first-of-type) {
   padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4349,6 +4485,81 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   stroke: transparent;
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
+.sd-rating__item-star--selected:nth-child(1) svg {
+  transition-delay: 0ms;
+}
+.sd-rating__item-star--selected:nth-child(2) svg {
+  transition-delay: 25ms;
+}
+.sd-rating__item-star--selected:nth-child(3) svg {
+  transition-delay: 50ms;
+}
+.sd-rating__item-star--selected:nth-child(4) svg {
+  transition-delay: 75ms;
+}
+.sd-rating__item-star--selected:nth-child(5) svg {
+  transition-delay: 100ms;
+}
+.sd-rating__item-star--selected:nth-child(6) svg {
+  transition-delay: 125ms;
+}
+.sd-rating__item-star--selected:nth-child(7) svg {
+  transition-delay: 150ms;
+}
+.sd-rating__item-star--selected:nth-child(8) svg {
+  transition-delay: 175ms;
+}
+.sd-rating__item-star--selected:nth-child(9) svg {
+  transition-delay: 200ms;
+}
+.sd-rating__item-star--selected:nth-child(10) svg {
+  transition-delay: 225ms;
+}
+.sd-rating__item-star--selected:nth-child(11) svg {
+  transition-delay: 250ms;
+}
+.sd-rating__item-star--selected:nth-child(12) svg {
+  transition-delay: 275ms;
+}
+.sd-rating__item-star--selected:nth-child(13) svg {
+  transition-delay: 300ms;
+}
+.sd-rating__item-star--selected:nth-child(14) svg {
+  transition-delay: 325ms;
+}
+.sd-rating__item-star--selected:nth-child(15) svg {
+  transition-delay: 350ms;
+}
+.sd-rating__item-star--selected:nth-child(16) svg {
+  transition-delay: 375ms;
+}
+.sd-rating__item-star--selected:nth-child(17) svg {
+  transition-delay: 400ms;
+}
+.sd-rating__item-star--selected:nth-child(18) svg {
+  transition-delay: 425ms;
+}
+.sd-rating__item-star--selected:nth-child(19) svg {
+  transition-delay: 450ms;
+}
+.sd-rating__item-star--selected:nth-child(20) svg {
+  transition-delay: 475ms;
+}
+.sd-rating__item-star--selected:nth-child(21) svg {
+  transition-delay: 500ms;
+}
+.sd-rating__item-star--selected:nth-child(22) svg {
+  transition-delay: 525ms;
+}
+.sd-rating__item-star--selected:nth-child(23) svg {
+  transition-delay: 550ms;
+}
+.sd-rating__item-star--selected:nth-child(24) svg {
+  transition-delay: 575ms;
+}
+.sd-rating__item-star--selected:nth-child(25) svg {
+  transition-delay: 600ms;
+}
 
 .sd-rating__item-star--error svg {
   stroke: none;
@@ -4693,10 +4904,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-shadow: var(--sjs-shadow-inner-reset, inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
-.sd-input.sd-dropdown:focus-within .sd-dropdown__filter-string-input {
-  z-index: 2000;
-}
-
 .sd-dropdown__filter-string-input {
   --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   position: absolute;
@@ -5498,6 +5705,23 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-paneldynamic__separator {
+  display: none;
+}
+
+.sd-paneldynamic__panel-wrapper {
+  box-sizing: border-box;
+  padding-bottom: calc(1 * var(--sd-base-padding));
+}
+
+.sd-paneldynamic__panel-wrapper:after {
+  display: table;
+  clear: both;
+  content: " ";
+}
+
+.sd-paneldynamic__footer .sd-paneldynamic__separator,
+.sd-paneldynamic__panel-wrapper--list ~ .sd-paneldynamic__panel-wrapper--list:before {
+  content: " ";
   display: block;
   position: absolute;
   left: 0;
@@ -5513,16 +5737,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: none;
 }
 
-.sd-paneldynamic__panel-wrapper {
-  padding-bottom: calc(1 * var(--sd-base-padding));
-}
-
-.sd-paneldynamic__panel-wrapper:after {
-  display: table;
-  clear: both;
-  content: " ";
-}
-
 .sd-paneldynamic__panel-wrapper--in-row {
   display: flex;
   flex-direction: row;
@@ -5595,6 +5809,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-question--empty.sd-question--paneldynamic > .sd-question__content {
   padding-bottom: var(--sd-base-padding);
+  --animation-padding-bottom: var(--sd-base-padding);
 }
 
 .sd-question--paneldynamic:not(.sd-question--empty) > .sd-question__content > .sd-question__comment-area {
@@ -5728,6 +5943,96 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-bottom: 0;
 }
 
+.sd-paneldynamic__panels-container {
+  position: relative;
+  overflow: hidden;
+  margin-left: calc(-1 * var(--sd-base-padding));
+  padding-left: var(--sd-base-padding);
+  margin-right: calc(-1 * var(--sd-base-padding));
+  padding-right: var(--sd-base-padding);
+}
+
+.sd-paneldynamic__panel-wrapper {
+  box-sizing: border-box;
+}
+
+@keyframes movePanel {
+  from {
+    transform: translateX(var(--sjs-pd-tab-move-margin));
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+.sd-paneldynamic__panel-wrapper--fade-in-left,
+.sd-paneldynamic__panel-wrapper--fade-in-right {
+  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);
+  animation-delay: var(--sjs-pd-tab-move-in-delay, 100ms), var(--sjs-pd-tab-height-change-delay, 0ms), var(--sjs-pd-tab-height-change-delay, 0ms), var(--sjs-pd-tab-fade-in-delay, 100ms);
+  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  animation-fill-mode: forwards;
+  opacity: 0;
+  padding-bottom: 0;
+  transform: translateX(var(--sjs-pd-tab-move-margin));
+  height: var(--animation-height-from);
+  --animation-padding-top: 0;
+  --animation-padding-bottom: calc(1 * var(--sd-base-padding));
+}
+
+.sd-paneldynamic__panel-wrapper--fade-in-left {
+  --sjs-pd-tab-move-margin: calc(1 * var(--sjs-pd-tab-move-in-margin, 50%));
+}
+
+.sd-paneldynamic__panel-wrapper--fade-in-right {
+  --sjs-pd-tab-move-margin: calc(-1 * var(--sjs-pd-tab-move-in-margin, 50%));
+}
+
+.sd-paneldynamic__panel-wrapper--fade-out-left,
+.sd-paneldynamic__panel-wrapper--fade-out-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);
+  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+  animation-direction: reverse;
+  animation-fill-mode: forwards;
+  position: absolute;
+  left: var(--sd-base-padding);
+  top: 0;
+  width: calc(100% - 2 * var(--sd-base-padding));
+}
+
+.sd-paneldynamic__panel-wrapper--fade-out-left {
+  --sjs-pd-tab-move-margin: calc(-1 * var(--sjs-pd-tab-move-out-margin, 50%));
+}
+
+.sd-paneldynamic__panel-wrapper--fade-out-right {
+  --sjs-pd-tab-move-margin: calc(1 * var(--sjs-pd-tab-move-out-margin, 50%));
+}
+
+.sd-paneldynamic__panel-wrapper--fade-in,
+.sd-paneldynamic__panel-wrapper--fade-out {
+  animation-name: fadeIn, moveInWithOverflow, paddingFadeIn;
+  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 {
+  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 {
+  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);
+  animation-delay: 0s, var(--sjs-pd-list-move-out-delay, 100ms), var(--sjs-pd-list-move-out-delay, 100ms);
+  --animation-padding-bottom: calc(1 * var(--sd-base-padding));
+}
+
 :root {
   --sjs-transition-duration: 150ms;
 }
@@ -5906,7 +6211,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-file__preview-item .sd-file__default-image {
   width: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: 90px;
+  height: calc(8.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-file__preview-item img:hover + .sd-file__remove-file-button,
 .sd-file__preview-item svg:hover + .sd-file__remove-file-button,
@@ -5930,7 +6235,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   min-width: 100%;
   max-width: 100%;
   overflow: hidden;
-  max-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  max-height: calc(3 * (var(--sjs-font-size, 16px)));
   text-overflow: ellipsis;
   line-height: var(--sjs-font-size, 16px);
   display: -webkit-box;
@@ -7101,6 +7406,19 @@ svg.sd-action--icon {
   margin: auto;
 }
 
+[dir=rtl] .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector,
+[style*="direction:rtl"] .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector,
+[style*="direction: rtl"] .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
+  right: unset;
+  left: calc(50% + 4px);
+}
+[dir=rtl] .sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector,
+[style*="direction:rtl"] .sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector,
+[style*="direction: rtl"] .sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
+  right: unset;
+  left: calc(50% + 8px);
+}
+
 .sv_progress-toc {
   padding: var(--sjs-base-unit, var(--base-unit, 8px));
   max-width: calc(42 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -7518,7 +7836,7 @@ sv-components-container,
   width: auto;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-element__title--expandable:before {
-  left: calc(-2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  inset-inline-start: calc(-2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-root-modern.sd-root-modern--mobile .sd-title.sd-container-modern__title {
   flex-direction: column;
@@ -7528,6 +7846,7 @@ sv-components-container,
 }
 .sd-root-modern.sd-root-modern--mobile .sd-question.sd-question--table > .sd-question__content {
   padding-top: 0;
+  --animation-padding-top: 0;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-question--table,
 .sd-root-modern.sd-root-modern--mobile .sd-question--scroll {