survey-react 1.9.137 → 1.9.139

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.137
+ * surveyjs - Survey JavaScript library v1.9.139
  * 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));
@@ -1996,6 +2012,17 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
     height: var(--animation-height);
   }
 }
+@keyframes overflowIn {
+  0% {
+    overflow: hidden;
+  }
+  99% {
+    overflow: hidden;
+  }
+  100% {
+    overflow: visible;
+  }
+}
 .sd-element {
   padding-left: var(--sv-element-add-padding-left, 0px);
   padding-right: var(--sv-element-add-padding-right, 0px);
@@ -2158,8 +2185,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   animation-name: elementMoveIn, fadeIn;
   animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
   animation-fill-mode: forwards;
-  animation-duration: var(--sjs-element-move-in-duration, 250ms), var(--sjs-element-fade-in-duration, 250ms);
-  animation-delay: 0s, var(--sjs-element-fade-in-delay, 0ms);
+  animation-duration: var(--sjs-element-move-in-duration, 250ms), var(--sjs-element-fade-in-duration, 500ms);
+  animation-delay: 0s, var(--sjs-element-fade-in-delay, 100ms);
   opacity: 0;
 }
 
@@ -2168,15 +2195,17 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
   animation-fill-mode: forwards;
   animation-direction: reverse;
-  animation-duration: var(--sjs-element-move-out-duration, 250ms), var(--sjs-element-fade-out-duration, 100ms);
+  animation-duration: var(--sjs-element-move-out-duration, 250ms), var(--sjs-element-fade-out-duration, 150ms);
   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);
   }
 }
@@ -2184,24 +2213,30 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-sizing: border-box;
 }
 
+.sd-element__content--fade-in,
+.sd-element__content--fade-out {
+  --animation-padding-top: 0;
+  --animation-padding-bottom: 0;
+}
+
 .sd-element__content--fade-in {
-  animation-name: fadeIn, moveIn, paddingFadeIn;
+  animation-name: fadeIn, moveIn, paddingFadeIn, overflowIn;
   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, 100ms), var(--sjs-expand-move-in-duration, 200ms), var(--sjs-expand-move-in-duration, 200ms);
-  animation-delay: var(--sjs-collapse-fade-in-delay, 150ms), 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), var(--sjs-expand-move-in-duration, 150ms);
+  animation-delay: var(--sjs-expand-fade-in-delay, 150ms), 0s, 0s, 0s;
 }
 
 .sd-element__content--fade-out {
-  animation-name: fadeIn, moveIn, paddingFadeIn;
+  animation-name: fadeIn, moveIn, paddingFadeIn, overflowIn;
   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, 100ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-collapse-move-out-duration, 250ms);
-  animation-delay: 0s, var(--sjs-collapse-move-out-delay, 0ms), var(--sjs-collapse-move-out-delay, 0ms);
+  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);
 }
 
 .sd-element--expandable.sd-elemenet--expandable--animating > .sd-element__header:focus-within, .sd-element--expandable.sd-elemenet--expandable--animating > .sd-element__header:hover {
@@ -2216,28 +2251,28 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--expanded {
   transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
-  transition-duration: var(--sjs-expand-move-in-duration, 200ms);
+  transition-duration: var(--sjs-expand-move-in-duration, 150ms);
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--expanded > .sd-element__header {
   transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
-  transition-duration: var(--sjs-expand-move-in-duration, 200ms);
+  transition-duration: var(--sjs-expand-move-in-duration, 150ms);
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--expanded > .sd-element__header .sd-element__title:before {
-  transition-duration: var(--sjs-expand-move-in-duration, 200ms);
+  transition-duration: var(--sjs-expand-move-in-duration, 150ms);
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--collapsed {
   transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
   transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
-  transition-delay: var(--sjs-collapse-move-out-delay, 0ms);
+  transition-delay: var(--sjs-collapse-move-out-delay, 100ms);
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--collapsed > .sd-element__header {
   transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
   transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
-  transition-delay: var(--sjs-collapse-move-out-delay, 0ms);
+  transition-delay: var(--sjs-collapse-move-out-delay, 100ms);
 }
 .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--collapsed > .sd-element__header .sd-element__title:before {
   transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
-  transition-delay: var(--sjs-collapse-move-out-delay, 0ms);
+  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 {
   display: block;
@@ -2574,6 +2609,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;
@@ -2588,6 +2637,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));
@@ -2783,6 +2842,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-panel.sd-element--nested > .sd-panel__content {
   padding-bottom: var(--sd-base-padding);
+  --animation-padding-top: var(--sd-base-padding);
 }
 
 .sd-panel__content {
@@ -2800,6 +2860,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));
@@ -2857,6 +2926,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))));
@@ -3013,9 +3090,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 {
@@ -3033,6 +3110,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));
@@ -3273,6 +3358,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;
@@ -3433,7 +3536,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-row--multiple > div {
   box-sizing: border-box;
-  --animation-padding-left: calcSize(2);
+  --animation-padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
   align-items: stretch;
@@ -3484,22 +3587,22 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-row--fade-in {
   animation-fill-mode: forwards;
-  animation-name: fadeIn, moveIn, marginFadeIn;
+  animation-name: fadeIn, moveIn, marginFadeIn, overflowIn;
   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;
-  animation-duration: var(--sjs-row-fade-in-duration, 100ms), var(--sjs-row-move-in-duration, 200ms), var(--sjs-row-move-in-duration, 200ms);
+  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);
 }
 
 .sd-row--fade-out {
-  animation-name: fadeIn, moveIn, marginFadeIn;
+  animation-name: fadeIn, moveIn, marginFadeIn, overflowIn;
   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, 0ms), var(--sjs-row-move-out-delay, 0ms);
-  animation-duration: var(--sjs-row-fade-out-duration, 100ms), 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), 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);
 }
 
 .sd-row--fade-in .sd-element-wrapper--fade-in {
@@ -3648,6 +3751,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;
 }
@@ -3775,6 +3890,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%;
 }
@@ -3801,6 +3924,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));
 }
@@ -3985,6 +4122,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;
 }
@@ -4070,6 +4244,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));
@@ -4105,6 +4299,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))));
@@ -4120,6 +4318,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))));
@@ -4142,6 +4341,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;
@@ -4166,6 +4368,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;
@@ -4280,6 +4503,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;
@@ -4506,12 +4751,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)));
@@ -4555,14 +4810,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;
 }
 
@@ -4829,11 +5084,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%;
@@ -5138,6 +5423,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))));
@@ -5176,6 +5492,11 @@ 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: block;
   position: absolute;
@@ -5574,7 +5895,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;
@@ -5583,13 +5904,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;
 }
-.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;
 }
 
@@ -5662,7 +5983,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;
 }
@@ -5778,6 +6099,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;
 }
@@ -6172,6 +6525,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;
 }