survey-react 1.9.138 → 1.10.1

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.138
+ * surveyjs - Survey JavaScript library v1.10.1
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1369,10 +1369,16 @@ sv-brand-info, .sv-brand-info {
   height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-ranking-item--disabled.sv-ranking-item--disabled {
+.sv-ranking-item--disabled.sv-ranking-item--disabled,
+.sv-ranking-item--readonly.sv-ranking-item--readonly,
+.sv-ranking-item--preview.sv-ranking-item--preview {
   cursor: initial;
+  user-select: initial;
+  -webkit-user-select: initial;
 }
-.sv-ranking-item--disabled.sv-ranking-item--disabled .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon {
+.sv-ranking-item--disabled.sv-ranking-item--disabled .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon,
+.sv-ranking-item--readonly.sv-ranking-item--readonly .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon,
+.sv-ranking-item--preview.sv-ranking-item--preview .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon {
   visibility: hidden;
 }
 
@@ -1433,6 +1439,16 @@ sv-brand-info, .sv-brand-info {
   opacity: 0.25;
 }
 
+.sv-ranking-item--readonly .sv-ranking-item__index {
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+}
+
+.sv-ranking-item--preview .sv-ranking-item__index {
+  background-color: transparent;
+  border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
+  box-sizing: border-box;
+}
+
 .sv-ranking-item__ghost.sv-ranking-item__ghost {
   display: none;
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -1859,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));
@@ -1988,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 {
@@ -2064,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;
@@ -2091,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;
@@ -2118,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;
 }
@@ -2183,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;
 }
@@ -2204,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 {
@@ -2258,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 {
@@ -2425,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))));
@@ -2449,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 {
@@ -2528,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));
 }
 
@@ -2593,6 +2643,20 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   user-select: none;
 }
 
+.sd-input--readonly {
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+}
+
+.sd-input.sd-input--preview {
+  background: none;
+  box-shadow: none;
+  transition: none;
+  border-bottom: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .sd-input::placeholder {
   color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   -webkit-user-select: none;
@@ -2607,6 +2671,16 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   opacity: 0.25;
 }
 
+.sd-input.sd-input--readonly {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  box-shadow: none;
+  transition: none;
+}
+
+.sd-input.sd-input--readonly::placeholder {
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+
 .sd-root--readonly .sd-input--disabled,
 .sd-root--readonly .sd-input--disabled::placeholder {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -2820,6 +2894,15 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
+.sd-question--readonly .sjs_sp_container,
+.sd-question--preview .sjs_sp_container {
+  border: none;
+}
+.sd-question--readonly .sjs_sp_placeholder,
+.sd-question--preview .sjs_sp_placeholder {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sjs_sp_controls.sd-signaturepad__controls {
   right: var(--sjs-base-unit, var(--base-unit, 8px));
   top: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -2877,6 +2960,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
+.sd-checkbox--checked.sd-checkbox--readonly .sd-checkbox__svg use {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-checkbox--checked.sd-checkbox--preview .sd-checkbox__svg use {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
   position: sticky;
   left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2942,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))));
@@ -2991,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))));
@@ -3033,9 +3218,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions),
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type {
-  border-top-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
-  border-bottom-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
-  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+  border-top-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+  border-bottom-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
 }
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions).sd-matrix__text--checked,
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type.sd-matrix__text--checked {
@@ -3053,6 +3238,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-item--readonly.sd-item--checked .sd-item__decorator,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--readonly.sd-item--checked .sd-item__decorator {
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+}
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-item--preview.sd-item--preview .sd-item__decorator,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--preview.sd-item--preview .sd-item__decorator {
+  background-color: transparent;
+}
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after,
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
@@ -3263,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;
 }
@@ -3293,6 +3487,24 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   flex-basis: 100%;
 }
 
+.sd-element--with-frame.sd-element--compact .sd-table {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+.sd-element--with-frame.sd-element--compact .sd-table-wrapper:before, .sd-element--with-frame.sd-element--compact .sd-table-wrapper:after {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+.sd-element--with-frame.sd-element--compact .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child .sd-action-bar {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+.sd-element--with-frame.sd-element--compact .sd-table__cell--actions:not(.sd-table__cell--vertical),
+.sd-element--with-frame.sd-element--compact .sd-table__cell--empty,
+.sd-element--with-frame.sd-element--compact .sd-table__cell--row-text,
+.sd-element--with-frame.sd-element--compact .sd-table__cell--footer-total,
+.sd-element--with-frame.sd-element--compact .sd-matrix__cell:first-of-type,
+.sd-element--with-frame.sd-element--compact .sd-matrix tr > td:first-of-type {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+
 .sd-question--table > .sd-question__header,
 .sd-question--table .sd-question__description--under-input .sv-string-viewer {
   position: sticky;
@@ -3300,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 {
@@ -3459,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);
 }
@@ -3504,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 {
@@ -3668,6 +3886,18 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   transition: box-shadow var(--sjs-transition-duration, 150ms), background var(--sjs-transition-duration, 150ms);
 }
 
+.sd-item--readonly.sd-item--readonly .sd-item__decorator {
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+  box-shadow: none;
+  transition: none;
+}
+
+.sd-item--preview.sd-item--preview .sd-item__decorator {
+  background-color: transparent;
+  box-shadow: none;
+  transition: none;
+}
+
 .sd-item--checked .sd-item__decorator {
   box-shadow: none;
 }
@@ -3795,6 +4025,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
+.sd-checkbox--checked.sd-checkbox--readonly .sd-checkbox__svg use {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-checkbox--checked.sd-checkbox--preview .sd-checkbox__svg use {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-radio__decorator {
   border-radius: 50%;
 }
@@ -3821,6 +4059,20 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
+.sd-radio--checked.sd-radio--readonly .sd-radio__decorator:after {
+  background-color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-radio--checked.sd-radio--preview .sd-radio__decorator:after {
+  display: none;
+}
+.sd-radio--checked.sd-radio--preview .sd-radio__decorator .sd-radio__svg {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+  display: block;
+  width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
@@ -4005,6 +4257,43 @@ legend + sv-ng-rating-item + .sd-rating__item {
   border: none;
 }
 
+.sd-rating__item.sd-rating__item--readonly {
+  fill: transparent;
+  background-color: transparent;
+  border: 2px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  box-shadow: none;
+  transform: none;
+}
+.sd-rating__item.sd-rating__item--readonly .sd-rating__item-text.sd-rating__item-text {
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+
+.sd-rating__item.sd-rating__item--selected.sd-rating__item--readonly {
+  border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+.sd-rating__item.sd-rating__item--selected.sd-rating__item--readonly .sd-rating__item-text.sd-rating__item-text {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-rating__item.sd-rating__item--preview {
+  fill: transparent;
+  background-color: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+  transform: none;
+}
+.sd-rating__item.sd-rating__item--preview .sd-rating__item-text.sd-rating__item-text {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-rating__item.sd-rating__item--selected.sd-rating__item--preview {
+  border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  border-width: 1px;
+}
+.sd-rating__item.sd-rating__item--selected.sd-rating__item--preview .sd-rating__item-text.sd-rating__item-text {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-question--disabled .sd-rating__item-text {
   opacity: 0.25;
 }
@@ -4090,6 +4379,26 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
+.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--readonly {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+  border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  background-color: unset;
+}
+
+.sd-rating__item-smiley.sd-rating__item-smiley--preview {
+  border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  border-width: 1px;
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+.sd-rating__item-smiley.sd-rating__item-smiley--preview svg {
+  margin: 1px;
+}
+
+.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--preview {
+  fill: var(--sjs-general-backcolor, var(--background, #fff));
+  background-color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-rating__item-smiley--allowhover:hover {
   background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
   border-color: var(--sjs-border-default, var(--border, #d6d6d6));
@@ -4125,6 +4434,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   opacity: 1;
 }
 
+.sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--selected, .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--readonly, .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--preview {
+  opacity: 1;
+}
+
 .sd-rating__item-star {
   position: relative;
   width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4140,6 +4453,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-rating__item-star svg {
   stroke: var(--sjs-border-default, var(--border, #d6d6d6));
+  stroke-width: 2px;
   fill: transparent;
   width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4162,6 +4476,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-rating__item-star--small.sd-rating__item-star--selected svg {
+  stroke-width: 1px;
+}
 
 .sd-rating__item-star--selected svg {
   stroke: transparent;
@@ -4186,6 +4503,27 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
+.sd-rating__item-star--readonly svg {
+  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
+  fill: none;
+}
+
+.sd-rating__item-star--selected.sd-rating__item-star--readonly svg {
+  stroke: none;
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-rating__item-star--preview svg {
+  stroke: var(--sjs-general-forecolor, var(--foreground, #161616));
+  stroke-width: 1px;
+  fill: none;
+}
+
+.sd-rating__item-star--selected.sd-rating__item-star--preview svg {
+  stroke: none;
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-rating__item-star:focus-within svg {
   stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
   fill: transparent;
@@ -4300,6 +4638,28 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sv-ranking.sd-ranking--readonly {
+  user-select: initial;
+  -webkit-user-select: initial;
+}
+.sv-ranking.sd-ranking--readonly.sv-ranking--select-to-rank-empty-value .sv-ranking__containers-divider {
+  visibility: hidden;
+}
+.sv-ranking.sd-ranking--readonly .sv-ranking__container--empty {
+  visibility: hidden;
+}
+
+.sv-ranking.sd-ranking--preview {
+  user-select: initial;
+  -webkit-user-select: initial;
+}
+.sv-ranking.sd-ranking--preview.sv-ranking--select-to-rank-empty-value .sv-ranking__containers-divider {
+  visibility: hidden;
+}
+.sv-ranking.sd-ranking--preview .sv-ranking__container--empty {
+  visibility: hidden;
+}
+
 @container (max-width: 496px) {
   .sv-ranking--select-to-rank-horizontal {
     flex-direction: column-reverse;
@@ -4468,10 +4828,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;
@@ -4526,12 +4882,22 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   white-space: pre;
 }
 
-.sd-input--disabled .sv-string-viewer {
+.sd-input--disabled .sv-string-viewer,
+.sd-input--readonly .sv-string-viewer,
+.sd-input--preview .sv-string-viewer {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.sd-question--readonly .sd-dropdown_chevron-button use {
+  opacity: 0.24;
+}
+
+.sd-question--preview .sd-dropdown_chevron-button {
+  display: none;
+}
+
 .sv-dropdown-popup .sd-list__item-body {
   --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
@@ -4575,14 +4941,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   background-position: left calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) top 50%, 0 0;
 }
 
-.sd-input.sd-tagbox:not(.sd-tagbox--empty):not(.sd-input--disabled) {
+.sd-input.sd-tagbox:not(.sd-tagbox--empty).sd-input--editable {
   height: auto;
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-inline-end: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sd-tagbox.sd-input--disabled {
+.sd-tagbox.sd-input--disabled, .sd-tagbox.sd-input--readonly, .sd-tagbox.sd-input--preview {
   white-space: normal;
 }
 
@@ -4849,11 +5215,41 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   align-items: flex-start;
   padding-right: 0;
 }
+.sd-imagepicker__column .sd-imagepicker__item {
+  width: 100%;
+}
+.sd-imagepicker__column .sd-imagepicker__text {
+  width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
 
 .sd-selectbase__column.sd-imagepicker__column:not(:last-child) {
   padding-right: 0;
 }
 
+.sd-imagepicker__item--readonly .sd-imagepicker__check-icon {
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-imagepicker__item--preview .sd-imagepicker__check-decorator {
+  display: none;
+}
+.sd-imagepicker__item--preview .sd-imagepicker__image {
+  /* Safari 6.0 - 9.0 */
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+  opacity: 0.25;
+}
+.sd-imagepicker__item--preview.sd-imagepicker__item--checked .sd-imagepicker__image {
+  /* Safari 6.0 - 9.0 */
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+  opacity: 1;
+}
+
 .sd-image__image {
   display: block;
   max-width: 100%;
@@ -5158,6 +5554,37 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   opacity: 0.25;
 }
 
+.sd-boolean--readonly {
+  pointer-events: none;
+  box-shadow: none;
+  transition: none;
+  background: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+}
+.sd-boolean--readonly .sd-boolean__thumb {
+  box-shadow: inset 0px 0px 0px 2px var(--sjs-general-forecolor, var(--foreground, #161616));
+  transition: none;
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-boolean--preview {
+  pointer-events: none;
+  box-shadow: none;
+  transition: none;
+  background: transparent;
+}
+.sd-boolean--preview .sd-boolean__thumb {
+  border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
+  box-shadow: none;
+  transition: none;
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+.sd-boolean--preview.sd-boolean--checked .sd-boolean__thumb, .sd-boolean--preview.sd-boolean--indeterminate .sd-boolean__thumb {
+  margin-left: auto;
+}
+.sd-boolean--preview .sd-checkbox__label--preview {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-boolean__thumb-ghost {
   z-index: 1;
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -5196,7 +5623,29 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
+.sd-question--readonly .sd-paneldynamic .sd-question__placeholder,
+.sd-question--preview .sd-paneldynamic .sd-question__placeholder {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .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;
@@ -5212,16 +5661,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;
@@ -5294,6 +5733,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 {
@@ -5427,6 +5867,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;
 }
@@ -5594,7 +6124,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: 100%;
 }
 
-.sd-file__preview {
+.sd-file__preview-item {
   position: relative;
   display: flex;
   align-items: stretch;
@@ -5603,13 +6133,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0;
 }
-.sd-file__preview .sd-file__default-image {
+.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 img:hover + .sd-file__remove-file-button,
-.sd-file__preview svg:hover + .sd-file__remove-file-button,
-.sd-file__preview .sd-file__remove-file-button:hover {
+.sd-file__preview-item img:hover + .sd-file__remove-file-button,
+.sd-file__preview-item svg:hover + .sd-file__remove-file-button,
+.sd-file__preview-item .sd-file__remove-file-button:hover {
   opacity: 1;
 }
 
@@ -5682,7 +6212,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file--single-image {
   height: calc(36 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.sd-file--single-image .sd-file__preview {
+.sd-file--single-image .sd-file__preview-item {
   width: 100%;
   margin: 0;
 }
@@ -5798,6 +6328,38 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   cursor: default;
 }
 
+.sd-file--readonly .sd-context-btn {
+  display: none;
+}
+.sd-file--readonly .sd-file__decorator {
+  border-color: transparent;
+}
+.sd-file--readonly .sd-file__actions-container {
+  display: none;
+}
+.sd-file--readonly .sd-file__image-wrapper {
+  background: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+}
+.sd-file--readonly .sd-file__drag-area-placeholder {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-file--preview .sd-context-btn {
+  display: none;
+}
+.sd-file--preview .sd-file__decorator {
+  border-color: transparent;
+}
+.sd-file--preview .sd-file__image-wrapper {
+  background: transparent;
+}
+.sd-file--preview .sd-file__actions-container {
+  display: none;
+}
+.sd-file--preview .sd-file__drag-area-placeholder {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
 .sd-hidden {
   display: none !important;
 }
@@ -6192,6 +6754,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
+.sd-question--preview .sd-multipletext__item-title {
+  border: none;
+}
+
 .sd-multipletext__item {
   flex-grow: 1;
 }
@@ -6764,6 +7330,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))));
@@ -7181,7 +7760,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;
@@ -7191,6 +7770,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 {