survey-react 1.9.83 → 1.9.85

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.83
+ * surveyjs - Survey JavaScript library v1.9.85
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -93,7 +93,7 @@
   height: 24px;
   vertical-align: middle;
   margin-right: 16px;
-  background-color: var(--border, #d6d6d6);
+  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sv-action-bar--default-size-mode .sv-action-bar-separator {
@@ -315,8 +315,8 @@ sv-popup {
   top: 0;
   width: 100vw;
   outline: none;
+  z-index: 2000;
   height: 100vh;
-  z-index: 1500;
 }
 
 .sv-dropdown-popup {
@@ -347,7 +347,7 @@ sv-popup {
   max-width: 90vw;
 }
 
-.sv-popup--modal {
+.sv-popup.sv-popup--modal {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -355,11 +355,12 @@ sv-popup {
   padding: calc(11 * var(--base-unit, 8px)) calc(15 * var(--base-unit, 8px));
   box-sizing: border-box;
 }
-.sv-popup--modal .sv-popup__container {
+.sv-popup.sv-popup--modal .sv-popup__container {
   position: static;
 }
-.sv-popup--modal .sv-popup__body-content {
+.sv-popup.sv-popup--modal .sv-popup__body-content {
   padding: calc(4 * var(--base-unit, 8px));
+  height: auto;
 }
 
 .sv-popup--overlay.sv-popup--overlay {
@@ -574,7 +575,7 @@ sv-popup {
   margin-top: 0;
   padding-top: calc(0.5 * var(--base-unit, 8px));
   padding-bottom: calc(0.5 * var(--base-unit, 8px));
-  border-top: 1px solid var(--border-light, #eaeaea);
+  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 6 * var(--base-unit, 8px));
@@ -685,7 +686,7 @@ sv-popup {
   flex-direction: row;
   font-size: calc(2 * var(--base-unit, 8px));
   overflow: auto;
-  border: 1px solid var(--border, #d6d6d6);
+  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sv-button-group:focus-within {
@@ -713,7 +714,7 @@ sv-popup {
   position: relative;
 }
 .sv-button-group__item:not(:last-of-type) {
-  border-right: 1px solid var(--border, #d6d6d6);
+  border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sv-button-group__item--hover:hover {
@@ -1159,15 +1160,27 @@ sv-popup {
   white-space: nowrap;
 }
 
-.sv-list__item.sv-list__item--focused,
+.sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) {
+  outline: none;
+}
+.sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
+  border: calc(0.25 * var(--base-unit, 8px)) solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  border-radius: 3px;
+  padding-block: calc(0.75 * var(--base-unit, 8px));
+  padding-inline-end: calc(7.75 * var(--base-unit, 8px));
+  padding-inline-start: calc(1.75 * var(--base-unit, 8px));
+}
+.sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-string-viewer {
+  margin-inline-start: calc(-0.25 * var(--base-unit, 8px));
+}
+
 .sv-list__item:hover,
 .sv-list__item:focus {
   outline: none;
 }
-.sv-list__item.sv-list__item--focused .sv-list__item-body,
 .sv-list__item:hover .sv-list__item-body,
 .sv-list__item:focus .sv-list__item-body {
-  background-color: var(--background-dim, #f3f3f3);
+  background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
 }
 
 .sv-list__item--with-icon.sv-list__item--with-icon {
@@ -1201,7 +1214,7 @@ sv-popup {
 .sv-list__item-separator {
   margin: calc(1 * var(--base-unit, 8px)) 0;
   height: 1px;
-  background-color: var(--border, #d6d6d6);
+  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sv-list__item.sv-list__item--selected .sv-list__item-body,
@@ -1247,7 +1260,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sv-list__filter {
-  border-bottom: 1px solid var(--border-inside, rgba(0, 0, 0, 0.16));
+  border-bottom: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
   background: var(--background, #fff);
   padding-bottom: calc(1 * var(--base-unit, 8px));
 }
@@ -1389,67 +1402,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-right: var(--sv-element-add-padding-right, 0px);
 }
 
-.svc-logic-question-value,
-.sd-element--with-frame:not(.sd-element--collapsed) {
-  border-radius: calc(0.5 * var(--base-unit, 8px));
-  box-sizing: border-box;
-  padding-left: calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px));
-  padding-right: calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px));
-  padding-bottom: var(--sd-base-padding);
-  background: var(--sjs-question-background, var(--background, #fff));
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-}
-.svc-logic-question-value > .sd-question__erbox--outside-question,
-.sd-element--with-frame:not(.sd-element--collapsed) > .sd-question__erbox--outside-question {
-  margin-left: calc(-1 * var(--sd-base-padding));
-  margin-right: calc(-1 * var(--sd-base-padding));
-  width: calc(100% + 2 * var(--sd-base-padding));
-}
-.svc-logic-question-value.sd-question--paneldynamic,
-.sd-element--with-frame:not(.sd-element--collapsed).sd-question--paneldynamic {
-  padding-bottom: 0;
-}
-.svc-logic-question-value.sd-question--paneldynamic > .sd-question__erbox--below-question,
-.sd-element--with-frame:not(.sd-element--collapsed).sd-question--paneldynamic > .sd-question__erbox--below-question {
-  bottom: 0;
-  margin-top: 0;
-}
-
-.sd-element--with-frame > .sd-question__erbox--above-question {
-  margin-top: calc(-1 * var(--sd-base-vertical-padding));
-}
-
-.svc-logic-question-value,
-.sd-element:not(.sd-element--collapsed) {
-  padding-top: var(--sd-base-vertical-padding);
-}
-
-.sd-table__cell--detail-panel .sd-element:not(.sd-element--collapsed) {
-  padding-top: calc(0.5 * var(--base-unit, 8px));
-}
-
-.sd-element.sd-element--complex {
-  padding-top: 0;
-}
-
-.sd-element--expanded > .sd-element__header,
-.sd-element--collapsed > .sd-element__header {
-  cursor: pointer;
-}
-
-.sd-element--collapsed > .sd-element__header {
-  padding: calc(2 * var(--base-unit, 8px)) var(--sd-base-padding);
-  box-sizing: border-box;
-  background-color: var(--background, #fff);
-}
-.sd-element--collapsed.sd-element--with-frame > .sd-element__header {
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
-}
-.sd-element--collapsed > .sd-element__header:focus-within, .sd-element--collapsed > .sd-element__header:hover {
-  background-color: var(--background-dim-light, #f9f9f9);
-}
-
 .sd-element__title {
   outline: none;
 }
@@ -1462,80 +1414,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   opacity: 1;
 }
 
-.sd-element--collapsed:not(.sd-element--with-frame) > .sd-element__header {
-  margin-left: calc(-1 * var(--sd-base-padding));
-  width: calc(100% + 2 * var(--sd-base-padding));
-}
-
-.sd-element--complex:not(.sd-element--collapsed) > .sd-element__header--location-top {
-  padding-top: var(--sd-base-vertical-padding);
-  padding-bottom: var(--sd-base-vertical-padding);
-}
-.sd-element--complex:not(.sd-element--collapsed) > .sd-element__header--location-top:after {
-  content: " ";
-  display: block;
-  position: relative;
-  bottom: calc(-1 * var(--sd-base-vertical-padding));
-  height: 1px;
-  background: var(--border-light, #eaeaea);
-}
-
-.sd-element--complex.sd-element--with-frame > .sd-element__header--location-top:after {
-  content: " ";
-  left: calc(-1 * var(--sd-base-padding));
-  width: calc(100% + 2 * var(--sd-base-padding));
-}
-
-.sd-element--nested.sd-element--complex > .sd-element__header--location-top {
-  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
-}
-.sd-element--nested.sd-element--complex > .sd-element__header--location-top:after {
-  bottom: calc(-0.5 * var(--sd-base-vertical-padding));
-}
-.sd-element--nested.sd-question--image {
-  padding-top: var(--sd-base-vertical-padding);
-}
-.sd-element--nested.sd-panel, .sd-element--nested.sd-question--paneldynamic {
-  border: 1px solid var(--border-light, #eaeaea);
-  box-sizing: border-box;
-  padding-left: var(--sd-base-padding);
-  padding-right: var(--sd-base-padding);
-  margin-top: var(--sd-base-vertical-padding);
-}
-.sd-element--nested.sd-panel > .sd-element__header--location-top, .sd-element--nested.sd-question--paneldynamic > .sd-element__header--location-top {
-  padding-top: calc(0.5 * var(--sd-base-vertical-padding));
-  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
-}
-.sd-element--nested.sd-panel > .sd-element__header--location-top:after, .sd-element--nested.sd-question--paneldynamic > .sd-element__header--location-top:after {
-  left: calc(-1 * var(--sd-base-padding));
-  width: calc(100% + 2 * var(--sd-base-padding));
-  bottom: calc(-0.5 * var(--sd-base-vertical-padding));
-}
-.sd-element--nested.sd-panel > .sd-question__erbox--outside-question, .sd-element--nested.sd-question--paneldynamic > .sd-question__erbox--outside-question {
-  margin-left: calc(-1 * var(--sd-base-padding));
-  margin-right: calc(-1 * var(--sd-base-padding));
-  width: calc(100% + 2 * var(--sd-base-padding));
-}
-.sd-element--nested.sd-panel > .sd-question__erbox--below-question, .sd-element--nested.sd-question--paneldynamic > .sd-question__erbox--below-question {
-  bottom: 0;
-  margin-top: 0;
-}
-.sd-element--nested.sd-panel:not(.sd-element--collapsed) {
-  padding-bottom: var(--sd-base-padding);
-}
-
-.svc-question__content .sd-element {
-  padding-top: 0;
-}
-
-.svc-question__content .sd-element--complex > .sd-element__header--location-top {
-  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
-  padding-top: 0;
-}
-.svc-question__content .sd-element--complex > .sd-element__header--location-top:after {
-  display: none;
-}
-
 .sd-element--invisible {
   opacity: 0.35;
 }
@@ -1635,6 +1513,140 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   transform: rotate(90deg);
 }
 
+.svc-logic-question-value,
+.sd-element--with-frame {
+  border-radius: calc(0.5 * var(--base-unit, 8px));
+  box-sizing: border-box;
+  padding-top: var(--sd-base-padding);
+  padding-left: calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px));
+  padding-right: calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px));
+  padding-bottom: var(--sd-base-padding);
+  background: var(--sjs-question-background, var(--background, #fff));
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+}
+.svc-logic-question-value.sd-question--paneldynamic,
+.sd-element--with-frame.sd-question--paneldynamic {
+  padding-bottom: 0;
+}
+.svc-logic-question-value.sd-question--paneldynamic > .sd-question__erbox--below-question,
+.sd-element--with-frame.sd-question--paneldynamic > .sd-question__erbox--below-question {
+  bottom: 0;
+  margin-top: 0;
+}
+
+.sd-element--complex > .sd-element__header--location-top {
+  margin-top: 0;
+}
+.sd-element--complex > .sd-element__header--location-top:after {
+  content: " ";
+  display: block;
+  position: relative;
+  height: 1px;
+  background: var(--sjs-border-light, var(--border-light, #eaeaea));
+  bottom: 0;
+}
+.sd-element--complex.sd-element--with-frame {
+  padding-top: 0;
+}
+.sd-element--complex.sd-element--with-frame > .sd-element__header--location-top {
+  margin-top: 0;
+  padding-top: var(--sd-base-vertical-padding);
+  padding-bottom: var(--sd-base-vertical-padding);
+}
+.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));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+
+.sd-element--expanded > .sd-element__header,
+.sd-element--collapsed > .sd-element__header {
+  cursor: pointer;
+}
+
+.sd-element--collapsed > .sd-element__header {
+  padding: calc(0 * var(--base-unit, 8px)) var(--sd-base-padding);
+  box-sizing: border-box;
+  background-color: var(--background, #fff);
+}
+.sd-element--collapsed.sd-element--complex > .sd-element__header--location-top:after {
+  display: none;
+}
+.sd-element--collapsed.sd-element--with-frame {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.sd-element--collapsed.sd-element--with-frame > .sd-element__header {
+  padding-top: calc(2 * var(--base-unit, 8px));
+  padding-bottom: calc(2 * var(--base-unit, 8px));
+  border-radius: calc(0.5 * var(--base-unit, 8px));
+}
+.sd-element--collapsed.sd-element--with-frame > .sd-element__header--location-top {
+  margin-top: 0;
+}
+.sd-element--collapsed > .sd-element__header:focus-within, .sd-element--collapsed > .sd-element__header:hover {
+  background-color: var(--background-dim-light, #f9f9f9);
+}
+
+.sd-element--collapsed > .sd-element__header {
+  margin-left: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+
+.sd-element--nested.sd-element--complex > .sd-element__header--location-top:after {
+  bottom: calc(-0.5 * var(--sd-base-vertical-padding));
+}
+.sd-element--nested.sd-element--collapsed > .sd-element__header:hover, .sd-element--nested.sd-element--collapsed > .sd-element__header:focus-within {
+  box-shadow: 0 calc(-2 * var(--base-unit, 8px)) 0 0 var(--background-dim-light, #f9f9f9), 0 calc(2 * var(--base-unit, 8px)) 0 var(--background-dim-light, #f9f9f9);
+}
+.sd-element--nested.sd-panel, .sd-element--nested.sd-question--paneldynamic {
+  border: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  box-sizing: border-box;
+  padding-left: var(--sd-base-padding);
+  padding-right: var(--sd-base-padding);
+}
+.sd-element--nested.sd-panel > .sd-element__header--location-top, .sd-element--nested.sd-question--paneldynamic > .sd-element__header--location-top {
+  padding-top: calc(0.5 * var(--sd-base-vertical-padding));
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+}
+.sd-element--nested.sd-panel > .sd-element__header--location-top:after, .sd-element--nested.sd-question--paneldynamic > .sd-element__header--location-top:after {
+  left: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+  bottom: calc(-0.5 * var(--sd-base-vertical-padding));
+}
+.sd-element--nested.sd-panel > .sd-question__erbox--outside-question, .sd-element--nested.sd-question--paneldynamic > .sd-question__erbox--outside-question {
+  margin-left: calc(-1 * var(--sd-base-padding));
+  margin-right: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+.sd-element--nested.sd-panel > .sd-question__erbox--below-question, .sd-element--nested.sd-question--paneldynamic > .sd-question__erbox--below-question {
+  bottom: 0;
+  margin-top: 0;
+}
+.sd-element--nested.sd-panel.sd-element--collapsed > .sd-element__header--location-top:after, .sd-element--nested.sd-question--paneldynamic.sd-element--collapsed > .sd-element__header--location-top:after {
+  display: none;
+}
+.sd-element--nested.sd-panel.sd-element--collapsed > .sd-element__header--location-top:hover, .sd-element--nested.sd-panel.sd-element--collapsed > .sd-element__header--location-top:focus-within, .sd-element--nested.sd-question--paneldynamic.sd-element--collapsed > .sd-element__header--location-top:hover, .sd-element--nested.sd-question--paneldynamic.sd-element--collapsed > .sd-element__header--location-top:focus-within {
+  box-shadow: none;
+}
+.sd-element--nested > .sd-panel__content {
+  padding-bottom: var(--sd-base-padding);
+}
+
+.sd-element--with-frame.sd-element--compact {
+  border: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+.svc-question__content .sd-element--complex > .sd-element__header--location-top {
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+  padding-top: 0;
+}
+.svc-question__content .sd-element--complex > .sd-element__header--location-top:after {
+  display: none;
+}
+
 .sd-question {
   position: relative;
 }
@@ -1688,6 +1700,30 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 }
 
+.sd-question__header--location--bottom {
+  padding-top: calc(0.5 * var(--sd-base-vertical-padding));
+}
+
+.svc-logic-question-value > .sd-question__erbox--outside-question,
+.sd-element--with-frame > .sd-question__erbox--outside-question {
+  margin-left: calc(-1 * var(--sd-base-padding));
+  margin-right: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+.svc-logic-question-value > .sd-question__erbox--above-question,
+.sd-element--with-frame > .sd-question__erbox--above-question {
+  margin-top: calc(-1 * var(--sd-base-padding));
+  margin-bottom: var(--sd-base-vertical-padding);
+}
+.svc-logic-question-value > .sd-question__header--location-top,
+.sd-element--with-frame > .sd-question__header--location-top {
+  margin-top: calc(-1 * var(--base-unit, 8px));
+}
+.svc-logic-question-value > .sd-question__content > .sd-question__header--location--bottom,
+.sd-element--with-frame > .sd-question__content > .sd-question__header--location--bottom {
+  margin-bottom: calc(-1 * var(--base-unit, 8px));
+}
+
 .sd-scrollable .sd-question__content {
   overflow-x: auto;
   padding: calc(2 * var(--base-unit, 8px)) 0;
@@ -1755,6 +1791,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-question--complex .sd-question__erbox--above-question {
   margin-top: 0;
+  margin-bottom: calc(var(--sd-base-vertical-padding) - 1 * var(--base-unit, 8px));
 }
 .sd-question--complex .sd-question__erbox--above-question ~ .sd-question__header--location-top {
   padding-top: calc(1 * var(--base-unit, 8px));
@@ -1930,13 +1967,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-panel {
   position: relative;
 }
-.sd-panel .sd-row {
-  margin-top: 0;
-}
-.sd-panel :not(.svc-row) > .sd-row--multiple {
-  row-gap: 0;
-}
 
+.sd-panel.sd-panel--as-page > .sd-panel__content {
+  padding-top: 0;
+}
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header {
   padding-top: 0;
   padding-bottom: 0;
@@ -1974,16 +2008,25 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: calc(100% + 2 * var(--sd-base-padding));
   margin-bottom: calc(-1 * var(--sd-base-padding) + 0.5 * var(--sd-base-vertical-padding));
   margin-top: calc(0.5 * var(--sd-base-vertical-padding));
-  border-top: 1px solid var(--border-light, #eaeaea);
+  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
   padding-top: calc(0.5 * var(--sd-base-vertical-padding));
 }
 
+.sd-panel__content {
+  padding-top: var(--sd-base-vertical-padding);
+}
+
+.svc-question__content .sd-panel__content {
+  gap: 0;
+  padding-top: 0;
+}
+
 .sjs_sp_placeholder {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sjs_sp_container {
-  border: 1px dashed var(--border, #d6d6d6);
+  border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sjs_sp_controls.sd-signaturepad__controls {
@@ -2019,7 +2062,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__svg use {
-  fill: var(--border, #d6d6d6);
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-checkbox--checked .sd-checkbox__control:focus + .sd-checkbox__decorator .sd-checkbox__svg use {
@@ -2067,7 +2110,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   display: block;
   height: calc(0.5 * var(--base-unit, 8px));
   width: calc(2 * var(--base-unit, 8px));
-  border: 1px solid var(--border, #d6d6d6);
+  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   box-sizing: border-box;
   border-radius: 10px;
 }
@@ -2326,6 +2369,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   table-layout: fixed;
 }
 
+.sd-table__cell--detail-panel .sd-panel__content {
+  padding-top: calc(1 * var(--base-unit, 8px));
+}
+
 .sd-body--responsive .sd-page {
   padding: calc(5 * var(--base-unit, 8px)) var(--sd-page-vertical-padding) calc(2 * var(--base-unit, 8px));
 }
@@ -2370,14 +2417,21 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   flex-direction: row;
   width: 100%;
   box-sizing: border-box;
-  margin-top: calc(2 * var(--base-unit, 8px));
+  margin-top: var(--sd-base-vertical-padding);
+}
+
+.sd-row:first-of-type {
+  margin-top: 0;
 }
 
-.sd-page__row.sd-row {
+.sd-row.sd-page__row {
   margin-top: calc(2 * var(--base-unit, 8px));
 }
+.sd-row.sd-page__row.sd-row--compact {
+  margin-top: var(--sd-base-vertical-padding);
+}
 
-.sd-page__row.sd-row--multiple,
+.sd-page__row.sd-row--multiple:not(.sd-row--compact),
 .svc-row > .sd-row--multiple {
   background: var(--sjs-question-background, var(--background, #fff));
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
@@ -2385,7 +2439,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 :not(.svc-row) > .sd-row--multiple {
-  row-gap: calc(1 * var(--base-unit, 8px));
+  row-gap: var(--sd-base-vertical-padding);
   margin-left: calc(-1 * var(--sd-base-padding));
   width: calc(100% + var(--sd-base-padding));
   flex-wrap: wrap;
@@ -2396,10 +2450,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 :not(.svc-row) > .sd-page__row.sd-row--multiple {
-  padding: 0 var(--sd-base-padding) var(--sd-base-padding) 0;
+  padding: var(--sd-base-vertical-padding) var(--sd-base-padding) var(--sd-base-padding) 0;
   margin-left: 0;
   width: 100%;
 }
+:not(.svc-row) > .sd-page__row.sd-row--multiple.sd-row--compact {
+  padding: 0;
+  width: calc(100% + var(--sd-base-padding));
+  margin-left: calc(-1 * var(--sd-base-padding));
+}
 
 .svc-row .sd-row--multiple {
   overflow: auto;
@@ -2410,7 +2469,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   gap: calc(1 * var(--base-unit, 8px));
 }
 
-:not(.svc-row--ghost) > .sd-row {
+.svc-row:not(.svc-row--ghost) > .sd-row {
   min-height: 50px;
 }
 
@@ -2517,11 +2576,17 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: normal;
+  font-size: calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   white-space: normal;
   word-break: break-word;
 }
 
+.sd-element__header .sd-description {
+  margin-top: calc(0.5 * var(--base-unit, 8px));
+}
+
 .sd-item {
   padding: calc(1.5 * var(--base-unit, 8px)) 0;
 }
@@ -2544,15 +2609,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-shadow: none;
 }
 
-.sd-item__control:focus + .sd-item__decorator,
-.sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator {
+.sd-item__control:focus + .sd-item__decorator {
   box-shadow: 0 0 0 2px var(--primary, #19b394);
+  background: var(--background, #fff);
   outline: none;
 }
 
-.sd-item__control:focus + .sd-item__decorator,
 .sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator {
-  background: var(--background, #fff);
+  background: var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243));
+  outline: none;
 }
 
 .sd-item--checked .sd-item__decorator {
@@ -2651,7 +2716,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__svg use {
-  fill: var(--border, #d6d6d6);
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-checkbox--checked .sd-checkbox__control:focus + .sd-checkbox__decorator .sd-checkbox__svg use {
@@ -2672,7 +2737,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-radio--checked.sd-radio--disabled .sd-radio__decorator:after {
-  background-color: var(--border, #d6d6d6);
+  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
@@ -2717,6 +2782,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   text-align: left;
 }
 
+:root {
+  --sd-rating-bad-color: var(--red, #e60a3e);
+  --sd-rating-normal-color: var(--yellow, #ff9814);
+  --sd-rating-good-color: var(--green, #19b394);
+  --sd-rating-bad-color-light: var(--red-light, rgba(230, 10, 62, 0.1));
+  --sd-rating-normal-color-light: var(--yellow-light, rgba(255, 152, 20, 0.1));
+  --sd-rating-good-color-light: var(--green-light, rgba(25, 179, 148, 0.1));
+}
+
 .sd-rating {
   overflow-x: auto;
   min-height: calc(8 * var(--base-unit, 8px));
@@ -2784,7 +2858,11 @@ legend + sv-ng-rating-item + .sd-rating__item {
   opacity: 0.25;
 }
 
-.sd-rating__item--allowhover:hover,
+.sd-rating__item--allowhover:hover {
+  background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
+  border-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
+}
+
 .sd-rating__item:focus-within {
   border-color: var(--primary, #19b394);
 }
@@ -2810,9 +2888,9 @@ legend + sv-ng-rating-item + .sd-rating__item {
   box-sizing: border-box;
   min-width: calc(6 * var(--base-unit, 8px));
   text-align: center;
-  border: 2px solid var(--border, #d6d6d6);
+  border: 2px solid var(--sjs-border-default, var(--border, #d6d6d6));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  fill: var(--border, #d6d6d6);
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 .sd-rating__item-smiley svg {
   display: block;
@@ -2828,6 +2906,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-rating__item-smiley--error {
   background-color: var(--red-light, rgba(230, 10, 62, 0.1));
   border-color: transparent;
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+.sd-rating__item-smiley--error.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
+  opacity: initial;
 }
 
 .sd-rating__item-smiley.sd-rating__item-smiley--disabled {
@@ -2839,7 +2921,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
-.sd-rating__item-smiley--allowhover:hover,
+.sd-rating__item-smiley--allowhover:hover {
+  background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
+  border-color: var(--sjs-border-default, var(--border, #d6d6d6));
+}
+
 .sd-rating__item-smiley:focus-within {
   border-color: var(--primary, #19b394);
 }
@@ -2855,6 +2941,21 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-shadow: inset 0 0 0 2px var(--background, #fff);
 }
 
+.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
+  opacity: 0.25;
+}
+.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected).sd-rating__item-smiley--allowhover:hover {
+  opacity: 0.5;
+}
+
+.sd-rating__item-smiley--rate-colored:not(.sd-rating__item-smiley--selected).sd-rating__item-smiley--allowhover:hover {
+  opacity: 0.5;
+}
+
+.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected):focus-within {
+  opacity: 1;
+}
+
 .sd-rating__item-star {
   position: relative;
   background: var(--background, #fff);
@@ -2870,7 +2971,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-right: calc(-0.5 * var(--base-unit, 8px));
 }
 .sd-rating__item-star svg {
-  stroke: var(--border, #d6d6d6);
+  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
   fill: none;
   width: calc(6 * var(--base-unit, 8px));
   height: calc(6 * var(--base-unit, 8px));
@@ -2894,13 +2995,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   opacity: 0.5;
 }
 .sd-rating__item-star--disabled svg {
-  stroke: var(--border, #d6d6d6);
+  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
   fill: none;
 }
 
 .sd-rating__item-star--selected.sd-rating__item-star--disabled svg {
   stroke: none;
-  fill: var(--border, #d6d6d6);
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-rating__item-star:focus-within svg {
@@ -2910,17 +3011,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-rating__item-star--unhighlighted svg {
   stroke: none;
-  fill: var(--border, #d6d6d6);
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-rating__item-star--highlighted svg {
-  stroke: var(--primary, #19b394);
-  fill: none;
+  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
+  fill: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
 }
 
 .sd-rating__item-star--selected.sd-rating__item-star--unhighlighted:focus-within svg {
-  stroke: var(--border, #d6d6d6);
-  fill: var(--border, #d6d6d6);
+  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-rating__item-star--selected:focus-within svg {
@@ -3376,7 +3477,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-progress {
   height: 2px;
-  background-color: var(--border-light, #eaeaea);
+  background-color: var(--sjs-border-light, var(--border-light, #eaeaea));
   position: relative;
 }
 
@@ -3444,6 +3545,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-shadow: inset 0 0 0 2px var(--primary, #19b394);
 }
 
+.sd-boolean.sd-boolean--indeterminate .sd-boolean__switch {
+  display: none;
+}
+
 .sd-boolean--indeterminate .sd-boolean__thumb {
   display: none;
 }
@@ -3459,6 +3564,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-weight: 600;
   margin-left: 0%;
   transform: translateX(0);
+  z-index: 2;
 }
 
 .sd-boolean--checked .sd-boolean__thumb {
@@ -3466,12 +3572,24 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   transform: translateX(-100%);
 }
 
+.sd-boolean--disabled {
+  pointer-events: none;
+}
 .sd-boolean--disabled .sd-boolean__thumb,
 .sd-boolean--disabled .sd-boolean__label {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.25;
 }
 
+.sd-boolean__thumb-ghost {
+  z-index: 1;
+}
+
+.sd-boolean.sd-boolean--allowhover .sd-boolean__thumb-ghost:hover {
+  background-color: var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243));
+  border-radius: calc(12.5 * var(--base-unit, 8px));
+}
+
 .svc-question__content .sd-boolean:not(.sd-boolean--checked):not(.sd-boolean--indeterminate) .sd-boolean__label:nth-of-type(1),
 .svc-question__content .sd-boolean--checked .sd-boolean__label:nth-of-type(2) {
   color: var(--primary, #19b394);
@@ -3521,8 +3639,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   left: 0;
   right: 0;
   margin: 0;
-  border-color: var(--border-light, #eaeaea);
-  background: var(--border-light, #eaeaea);
+  border-color: var(--sjs-border-light, var(--border-light, #eaeaea));
+  background: var(--sjs-border-light, var(--border-light, #eaeaea));
   height: 1px;
   border: none;
 }
@@ -3726,7 +3844,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  border: 1px dashed var(--border, #d6d6d6);
+  border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
   justify-content: center;
   align-items: center;
 }
@@ -3967,7 +4085,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   outline: none;
 }
 
-.sd-btn:not(:disabled):hover, .sd-btn:not(:disabled):focus {
+.sd-btn:not(:disabled):hover {
+  background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
+}
+
+.sd-btn:not(:disabled):focus {
   box-shadow: 0 0 0 2px var(--primary, #19b394);
 }
 
@@ -3982,9 +4104,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
-.sd-btn--action:not(:disabled):hover, .sd-btn--action:not(:disabled):focus {
-  color: var(--primary, #19b394);
-  background-color: var(--background, #fff);
+.sd-btn--action:not(:disabled):hover {
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+  background-color: var(--sjs-primary-backcolor-dark, rgb(20, 164, 139));
 }
 
 .sd-btn--action:disabled {
@@ -4100,7 +4222,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   height: calc(100% - var(--base-unit, 8px) * 3);
   max-width: 30%;
   padding-right: calc(2 * var(--base-unit, 8px));
-  border-right: 1px solid var(--border, #d6d6d6);
+  border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   word-break: break-word;
   white-space: normal;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -4291,7 +4413,7 @@ svg.sd-action--icon {
   text-align: center;
   flex-grow: 1;
   text-decoration: none;
-  border-top: 2px solid var(--border-light, #eaeaea);
+  border-top: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
   padding-top: calc(2 * var(--base-unit, 8px));
   padding-bottom: calc(4 * var(--base-unit, 8px));
   cursor: pointer;
@@ -4354,11 +4476,11 @@ svg.sd-action--icon {
 }
 
 .sv_progress-toc--left {
-  border-right: 1px solid var(--border, #d6d6d6);
+  border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sv_progress-toc--right {
-  border-left: 1px solid var(--border, #d6d6d6);
+  border-left: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-list {
@@ -4370,12 +4492,17 @@ svg.sd-action--icon {
   padding: 0;
 }
 .sd-list__item.sd-list__item .sd-list__item-body {
-  padding-top: calc(1.5 * var(--base-unit, 8px));
-  padding-bottom: calc(1.5 * var(--base-unit, 8px));
+  padding-block: calc(1.5 * var(--base-unit, 8px));
   border-radius: 3px;
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
-  padding-inline: calc(2 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px));
+}
+
+.sd-list__item.sd-list__item--focused:not(.sd-list__item--selected) {
+  outline: none;
+}
+.sd-list__item.sd-list__item--focused:not(.sd-list__item--selected) .sd-list__item-body {
+  padding-block: calc(1.25 * var(--base-unit, 8px));
 }
 
 .sd-timer {
@@ -4607,7 +4734,7 @@ sv-components-container,
   display: block;
   position: relative;
   height: 1px;
-  background-color: var(--border-light, #eaeaea);
+  background-color: var(--sjs-border-light, var(--border-light, #eaeaea));
   left: calc(-2 * var(--base-unit, 8px));
   bottom: calc(-1 * var(--base-unit, 8px));
   width: calc(100% + 4 * var(--base-unit, 8px));
@@ -4688,7 +4815,7 @@ body {
 }
 .sd-root-modern * {
   scrollbar-width: thin;
-  scrollbar-color: var(--border, #d6d6d6) transparent;
+  scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
 }
 .sd-root-modern ::-webkit-scrollbar {
   width: 12px;
@@ -4699,7 +4826,7 @@ body {
   border: 4px solid rgba(0, 0, 0, 0);
   background-clip: padding-box;
   border-radius: 32px;
-  background-color: var(--border, #d6d6d6);
+  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 .sd-root-modern ::-webkit-scrollbar-track {
   background: transparent;
@@ -4719,7 +4846,7 @@ body {
 
 .sv-popup .sv-popup__scrolling-content {
   scrollbar-width: thin;
-  scrollbar-color: var(--border, #d6d6d6) transparent;
+  scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
 }
 .sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar {
   width: 12px;
@@ -4730,7 +4857,7 @@ body {
   border: 4px solid rgba(0, 0, 0, 0);
   background-clip: padding-box;
   border-radius: 32px;
-  background-color: var(--border, #d6d6d6);
+  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 .sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-track, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-track {
   background: transparent;