survey-react 1.9.127 → 1.9.128

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.127
+ * surveyjs - Survey JavaScript library v1.9.128
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -223,6 +223,10 @@
   --font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-action-bar {
   display: flex;
   box-sizing: content-box;
@@ -412,6 +416,10 @@ button.sv-action-bar-item {
   opacity: 50%;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-dragged-element-shortcut {
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   min-width: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -452,6 +460,10 @@ button.sv-action-bar-item {
   visibility: hidden;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 sv-popup {
   display: block;
   position: absolute;
@@ -888,6 +900,10 @@ sv-popup {
   flex-grow: 1;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-button-group {
   display: flex;
   align-items: center;
@@ -1026,6 +1042,14 @@ sv-popup {
   min-width: unset;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv_window {
   position: fixed;
   bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1065,7 +1089,7 @@ sv-popup {
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   flex: 1;
   display: flex;
-  justify-content: start;
+  justify-content: flex-start;
   align-items: center;
 }
 
@@ -1101,13 +1125,16 @@ sv-popup {
 .sv_window_button:hover, .sv_window_button:active {
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
 }
-.sv_window_button:hover svg use, .sv_window_button:hover svg path, .sv_window_button:active svg use, .sv_window_button:active svg path {
+.sv_window_button:hover svg use,
+.sv_window_button:hover svg path, .sv_window_button:active svg use,
+.sv_window_button:active svg path {
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sv_window_button:active {
   opacity: 0.5;
 }
-.sv_window_button svg use, .sv_window_button svg path {
+.sv_window_button svg use,
+.sv_window_button svg path {
   fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
 }
 
@@ -1154,6 +1181,14 @@ sv-brand-info, .sv-brand-info {
   color: #909090;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-ranking {
   outline: none;
   user-select: none;
@@ -1243,6 +1278,8 @@ sv-brand-info, .sv-brand-info {
   box-sizing: border-box;
   font-weight: 600;
   margin-left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  transition: outline var(--sjs-transition-duration, 150ms), background var(--sjs-transition-duration, 150ms);
+  outline: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
 }
 .sv-ranking-item__index.sv-ranking-item__index svg {
   fill: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
@@ -1437,6 +1474,10 @@ sv-brand-info, .sv-brand-info {
   display: none;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-list {
   padding: 0;
   margin: 0;
@@ -1491,6 +1532,7 @@ sv-brand-info, .sv-brand-info {
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
+  transition: background-color var(--sjs-transition-duration, 150ms), color var(--sjs-transition-duration, 150ms);
 }
 
 .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) {
@@ -1651,6 +1693,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   background-color: transparent;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-save-data_root {
   position: fixed;
   left: 50%;
@@ -2176,6 +2222,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   border-radius: var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px));
   text-align: start;
   box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms);
 }
 
 .sd-input:focus {
@@ -2456,6 +2503,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-checkbox__svg use {
   fill: transparent;
+  transition: fill var(--sjs-transition-duration, 150ms);
 }
 
 .sd-checkbox--checked .sd-checkbox__svg use {
@@ -2624,29 +2672,29 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:last-of-type > .sd-table__cell {
   border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
 }
-.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell,
+.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));
 }
-.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell.sd-matrix__text--checked,
+.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 {
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
 }
-.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell .sd-input,
+.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-input,
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-input {
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
-.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell .sd-item:not(.sd-item--error) .sd-item__decorator,
+.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__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__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 .sd-item:not(.sd-item--error).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.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).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--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 .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.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));
 }
@@ -2663,6 +2711,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-table__cell:not(.sd-table__cell--empty):not(.sd-table__cell--actions):not(:empty) {
   min-width: calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-table__cell .sd-item {
+  text-align: initial;
+}
 
 .sd-table__cell--error {
   border: none;
@@ -2773,6 +2824,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   background: transparent;
   border-radius: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: var(--sjs-base-unit, var(--base-unit, 8px));
+  transition: background var(--sjs-transition-duration, 150ms);
 }
 .sd-table__cell--detail-button svg {
   --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
@@ -2780,6 +2832,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   width: var(--sjs-internal-font-editorfont-size);
   height: var(--sjs-internal-font-editorfont-size);
   fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
+  transition: fill var(--sjs-transition-duration, 150ms);
 }
 .sd-table__cell--detail-button:hover, .sd-table__cell--detail-button:focus {
   background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
@@ -3185,6 +3238,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   flex-shrink: 0;
   margin-top: calc((1.5 * (var(--sjs-internal-font-editorfont-size)) - 3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
   box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms), background var(--sjs-transition-duration, 150ms);
 }
 
 .sd-item--checked .sd-item__decorator {
@@ -3290,6 +3344,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-checkbox__svg use {
   fill: transparent;
+  transition: fill var(--sjs-transition-duration, 150ms);
 }
 
 .sd-checkbox--checked .sd-checkbox__svg use {
@@ -3314,6 +3369,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   height: var(--sjs-base-unit, var(--base-unit, 8px));
   border-radius: 50%;
   background-color: transparent;
+  transition: background-color var(--sjs-transition-duration, 150ms);
 }
 
 .sd-radio--checked .sd-radio__decorator:after {
@@ -3466,7 +3522,6 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-rating__item {
   position: relative;
   background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   white-space: nowrap;
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3477,10 +3532,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   box-sizing: border-box;
   min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   text-align: center;
-  border: none;
+  border: 0px solid transparent;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: var(--sjs-font-size, 16px);
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 0px var(--sjs-general-backcolor, var(--background, #fff));
+  transition: border var(--sjs-transition-duration, 150ms), box-shadow var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
 }
 
 .sd-rating__item--fixed-size {
@@ -3533,7 +3590,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
 }
 
 .sd-rating__item--selected:focus-within {
-  box-shadow: inset 0 0 0 2px var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 2px var(--sjs-general-backcolor, var(--background, #fff));
 }
 
 .sd-rating__item-smiley {
@@ -3547,6 +3604,8 @@ legend + sv-ng-rating-item + .sd-rating__item {
   border: 2px solid var(--sjs-border-default, var(--border, #d6d6d6));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--sjs-border-default, var(--border, #d6d6d6));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 0px var(--sjs-general-backcolor, var(--background, #fff));
+  transition: border var(--sjs-transition-duration, 150ms), box-shadow var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
 }
 .sd-rating__item-smiley svg {
   display: block;
@@ -3573,6 +3632,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-inline-start: 2px;
 }
 
+.sd-rating__item-smiley--scale-colored {
+  transition: border var(--sjs-transition-duration, 150ms), box-shadow var(--sjs-transition-duration, 150ms), opacity var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
+}
+
 .sd-rating__item-smiley--error {
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
   border-color: transparent;
@@ -3608,7 +3671,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-rating__item-smiley--selected:focus-within {
-  box-shadow: inset 0 0 0 2px var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 2px var(--sjs-general-backcolor, var(--background, #fff));
 }
 
 .sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
@@ -3641,13 +3704,18 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-rating__item-star svg {
   stroke: var(--sjs-border-default, var(--border, #d6d6d6));
-  fill: none;
+  fill: transparent;
   width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: block;
+  position: absolute;
+  transition: stroke var(--sjs-transition-duration, 150ms), opacity var(--sjs-transition-duration, 150ms), fill var(--sjs-transition-duration, 150ms);
+}
+.sd-rating__item-star .sv-star {
+  opacity: 1;
 }
 .sd-rating__item-star .sv-star-2 {
-  display: none;
+  opacity: 0;
 }
 
 .sd-rating__item-star--small {
@@ -3660,7 +3728,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-rating__item-star--selected svg {
-  stroke: none;
+  stroke: transparent;
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
@@ -3684,11 +3752,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-rating__item-star:focus-within svg {
   stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  fill: none;
+  fill: transparent;
 }
 
 .sd-rating__item-star--unhighlighted svg {
-  stroke: none;
+  stroke: transparent;
   fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
@@ -3707,10 +3775,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sd-rating__item-star--selected:focus-within .sv-star {
-  display: none;
+  opacity: 0;
 }
 .sd-rating__item-star--selected:focus-within .sv-star-2 {
-  display: block;
+  opacity: 1;
 }
 
 .sd-rating__item-text.sd-rating__item-text {
@@ -3723,6 +3791,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: inline-block;
   border: 2px solid transparent;
   box-sizing: border-box;
+  transition: color var(--sjs-transition-duration, 150ms);
 }
 .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text, .sd-rating__item-text.sd-rating__item-text.sd-rating__max-text {
   margin-top: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3960,7 +4029,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-input.sd-dropdown:focus-within {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  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 {
@@ -4061,7 +4130,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-input.sd-tagbox:focus-within {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  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));
 }
 
 .sv-tagbox__item {
@@ -4083,17 +4152,19 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sv-tagbox__item:hover .sd-tagbox-item_clean-button,
 .sv-tagbox__item:focus .sd-tagbox-item_clean-button,
 .sv-tagbox__item:focus-within .sd-tagbox-item_clean-button {
-  display: flex;
   align-self: center;
+  opacity: 1;
 }
 
 .sd-tagbox-item_clean-button {
-  display: none;
+  display: flex;
   position: absolute;
   inset-inline-end: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: 0;
   padding-inline-start: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: linear-gradient(270deg, var(--sjs-primary-backcolor, var(--primary, #19b394)) 53.12%, rgba(25, 179, 148, 0) 100%);
+  opacity: 0;
+  transition: opacity var(--sjs-transition-duration, 150ms);
 }
 
 .sd-tagbox-item_clean-button-svg {
@@ -4227,7 +4298,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-imagepicker__check-decorator {
-  display: none;
+  display: block;
+  opacity: 0;
   position: absolute;
   top: var(--sjs-base-unit, var(--base-unit, 8px));
   right: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -4236,6 +4308,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   border-radius: 100%;
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   z-index: 1;
+  transition: opacity var(--sjs-transition-duration, 150ms);
 }
 
 .sd-imagepicker__check-icon {
@@ -4247,7 +4320,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-imagepicker__item--checked .sd-imagepicker__check-decorator {
-  display: block;
+  opacity: 1;
 }
 
 .sd-imagepicker__item--error .sd-imagepicker__image-container::before {
@@ -4272,6 +4345,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: block;
   box-sizing: border-box;
   max-width: 100%;
+  transition: opacity var(--sjs-transition-duration, 150ms);
 }
 
 .sd-imagepicker__text {
@@ -4337,6 +4411,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-html {
   white-space: initial;
 }
@@ -4434,7 +4512,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   vertical-align: baseline;
   text-align: center;
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border: none;
   border-radius: var(--sjs-corner-radius, 4px);
   cursor: pointer;
@@ -4446,12 +4523,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms);
 }
 .sd-html button:hover {
   background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
 }
 .sd-html button:focus {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sd-html button span {
   display: flex;
@@ -4522,10 +4601,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms);
 }
 .sd-boolean.sd-boolean--allowhover:focus-within {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  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-boolean__thumb,
@@ -4600,11 +4680,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-boolean__thumb-ghost {
   z-index: 1;
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-color: transparent;
+  transition: background-color var(--sjs-transition-duration, 150ms);
 }
 
 .sd-boolean.sd-boolean--allowhover .sd-boolean__thumb-ghost:hover {
   background-color: var(--sjs-editorpanel-hovercolor, var(--sjs-general-backcolor-dim-dark, rgb(243, 243, 243)));
-  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-boolean--error {
@@ -4734,6 +4816,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-bottom: var(--sd-base-padding);
 }
 
+.sd-question--paneldynamic:not(.sd-question--empty) > .sd-question__content > .sd-question__comment-area {
+  padding-bottom: var(--sd-base-padding);
+}
+
 .sd-paneldynamic__buttons-container .sd-action-bar {
   width: 100%;
   margin: 0 calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4793,6 +4879,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   overflow-x: hidden;
   white-space: nowrap;
+  box-shadow: inset 0px 0px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms);
 }
 .sd-tab-item:hover, .sd-tab-item:focus-visible {
   outline: none;
@@ -4859,6 +4947,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-bottom: 0;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-file {
   position: relative;
   font-size: var(--sjs-font-size, 16px);
@@ -5038,11 +5130,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .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 {
-  display: block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  opacity: 1;
 }
 
 .sd-file__sign {
@@ -5070,7 +5158,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-file__remove-file-button {
-  display: none;
+  display: block;
+  opacity: 0;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: opacity var(--sjs-transition-duration, 150ms);
 }
 
 .sd-file__decorator--error {
@@ -5248,13 +5342,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: none;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-btn {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border-radius: var(--sjs-corner-radius, 4px);
   cursor: pointer;
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -5266,6 +5363,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   outline: none;
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms), background var(--sjs-transition-duration, 150ms);
 }
 
 .sd-btn--small {
@@ -5278,7 +5377,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-btn:focus-visible {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-btn:disabled {
@@ -5317,6 +5416,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   pointer-events: none;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-body {
   width: 100%;
   box-sizing: border-box;
@@ -5507,7 +5610,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   vertical-align: baseline;
   text-align: center;
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border: none;
   border-radius: var(--sjs-corner-radius, 4px);
   cursor: pointer;
@@ -5519,6 +5621,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms);
 }
 .sd-body--empty button:hover,
 .sd-body--loading button:hover {
@@ -5526,7 +5630,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-body--empty button:focus,
 .sd-body--loading button:focus {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sd-body--empty button span,
 .sd-body--loading button span {
@@ -5545,6 +5649,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   right: 0;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-multipletext {
   width: 100%;
   table-layout: fixed;
@@ -5561,7 +5669,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-multipletext__item-container.sd-input:focus-within {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  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-multipletext__item-container {
@@ -5670,6 +5778,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
   outline: none;
+  transition: background-color var(--sjs-transition-duration, 150ms);
 }
 
 .sd-action--negative {
@@ -5692,6 +5801,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-action--icon use {
   fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
+  transition: fill var(--sjs-transition-duration, 150ms);
 }
 
 svg.sd-action--icon {
@@ -5772,6 +5882,7 @@ svg.sd-action--icon {
 }
 .sd-context-btn use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  transition: fill var(--sjs-transition-duration, 150ms);
 }
 
 .sd-context-btn:hover use,
@@ -5787,6 +5898,10 @@ svg.sd-action--icon {
   opacity: 0.25;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-completedpage,
 .sd-completed-before-page {
   align-items: center;
@@ -5899,7 +6014,6 @@ svg.sd-action--icon {
   vertical-align: baseline;
   text-align: center;
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border: none;
   border-radius: var(--sjs-corner-radius, 4px);
   cursor: pointer;
@@ -5911,6 +6025,8 @@ svg.sd-action--icon {
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms);
 }
 .sd-completedpage button:hover,
 .sd-completed-before-page button:hover {
@@ -5918,7 +6034,7 @@ svg.sd-action--icon {
 }
 .sd-completedpage button:focus,
 .sd-completed-before-page button:focus {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sd-completedpage button span,
 .sd-completed-before-page button span {
@@ -5956,53 +6072,159 @@ svg.sd-action--icon {
   visibility: hidden;
 }
 
-.sd-progress-buttons__list {
+.sd-progress-buttons__page-description {
+  display: none;
+}
+
+.sd-progress-buttons {
+  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
+  flex-direction: column;
+}
+
+.sd-progress-buttons__list-container {
+  display: flex;
+  overflow: hidden;
 }
 
+.sd-progress-buttons__connector {
+  display: none;
+}
+
+.sd-progress-buttons__list {
+  display: inline-flex;
+  flex-direction: row;
+  flex-grow: 1;
+  margin: 0 auto;
+  padding: 0;
+}
 .sd-progress-buttons__list li {
-  text-align: center;
+  display: flex;
   flex-grow: 1;
-  text-decoration: none;
-  border-top: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
-  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  flex-shrink: 1;
+  flex-basis: 0;
+  position: relative;
+  flex-wrap: nowrap;
+  text-align: center;
+  flex-direction: column;
+}
+.sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
+  display: block;
+  content: "";
+  width: 100%;
+  height: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-color: var(--sjs-navigation-default, #bcbcbc);
+  position: absolute;
+  bottom: calc(0.875 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: 50%;
+}
+.sd-progress-buttons__list li:after {
+  display: flex;
+  content: attr(data-page-number);
+  width: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
+  background-color: var(--sjs-navigation-default, #bcbcbc);
+  border-radius: 50%;
   cursor: pointer;
+  align-self: center;
+  z-index: 1;
+  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
+  font-weight: 600;
+  line-height: var(--sjs-font-size, 16px);
+  justify-content: center;
+  color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
-.sd-progress-buttons__list li:hover .sd-progress-buttons__page-title {
-  text-decoration-line: underline;
+.sd-progress-buttons__list .sd-progress-buttons__list-element--passed:not(:first-child) > .sd-progress-buttons__connector {
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-
-.sd-progress-buttons__list .sd-progress-buttons__list-element--current,
-.sd-progress-buttons__list .sd-progress-buttons__list-element--passed {
-  border-top: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+.sd-progress-buttons__list .sd-progress-buttons__list-element--passed:after {
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-
-.sd-progress-buttons__list-element--nonclickable .sd-progress-buttons__page-title {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+.sd-progress-buttons__list .sd-progress-buttons__list-element--current:not(:first-child) > .sd-progress-buttons__connector {
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-
-.sd-progress-buttons__list-element--current .sd-progress-buttons__page-title,
-.sd-progress-buttons__list-element--current .sd-progress-buttons__page-description {
+.sd-progress-buttons__list .sd-progress-buttons__list-element--current:after {
+  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: 0;
 }
 
 .sd-progress-buttons__page-title {
-  width: 100%;
-  font-size: var(--sjs-font-size, 16px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
   font-weight: 600;
-  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  line-height: var(--sjs-font-size, 16px);
+  flex-grow: 1;
+  text-align: center;
+  padding: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sd-progress-buttons__page-description {
+.sd-progress-buttons__header .sd-progress-buttons__page-title {
+  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
+.sd-progress-buttons__footer .sd-progress-buttons__page-title {
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-bottom: 0;
+  justify-content: flex-end;
+  padding: 0;
+  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
+}
+
+.sd-progress-buttons--bottom {
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  flex-direction: column-reverse;
+}
+.sd-progress-buttons--bottom .sd-progress-buttons__list li {
+  flex-direction: column-reverse;
+}
+.sd-progress-buttons--bottom .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
+  top: calc(0.875 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-progress-buttons--bottom .sd-progress-buttons__page-title {
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: 0;
+}
+.sd-progress-buttons--bottom .sd-progress-buttons__header .sd-progress-buttons__page-title {
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-bottom: 0;
+}
+.sd-progress-buttons--bottom .sd-progress-buttons__footer .sd-progress-buttons__page-title {
+  margin-top: 0;
+  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
+.sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
+  bottom: calc(1.875 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-progress-buttons--numbered .sd-progress-buttons__list li:after {
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-root-modern--mobile .sd-progress-buttons__list,
+.sd-progress-buttons--no-titles .sd-progress-buttons__list {
+  justify-content: space-between;
   width: 100%;
-  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
-  line-height: var(--sjs-font-size, 16px);
-  font-weight: 600;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+.sd-root-modern--mobile .sd-progress-buttons__list li,
+.sd-progress-buttons--no-titles .sd-progress-buttons__list li {
+  flex-grow: 0;
+}
+
+.sd-progress-buttons--bottom.sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
+  top: calc(1.875 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-root-modern--mobile .sd-progress-buttons {
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv_progress-toc {
@@ -6487,7 +6709,7 @@ sv-components-container,
   margin-bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-root-modern.sd-root-modern--mobile .sd-matrix__label {
-  justify-content: start;
+  justify-content: flex-start;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell {
   border-top: none;
@@ -6692,6 +6914,13 @@ body {
   background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
+.sd-root-modern--animation-disabled * {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
+
 .sd-root-modern.sd-root-modern--full-container {
   width: 100%;
   height: 100%;