survey-creator-core 1.12.13 → 1.12.14

package/survey-creator-core.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.12.13
+ * SurveyJS Creator v1.12.14
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -228,7 +228,7 @@
 }
 
 /*# sourceMappingURL=fonts.fontless.css.map*//*!
- * SurveyJS Creator v1.12.13
+ * SurveyJS Creator v1.12.14
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -622,6 +622,8 @@ svc-tab-test {
 .svc-page-invisible .sv-list-item__marker-icon {
   --sjs-general-forecolor-light: rgba(0, 0, 0, 0.45);
   padding: 0;
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   opacity: 0.5;
   margin-inline-end: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -752,16 +754,14 @@ svc-tab-test {
 }
 
 .sl-table__cell.st-table__cell--actions:first-of-type .sv-action-bar {
-  margin-top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: var(--ctr-collapse-button-margin-top, calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-right: var(--ctr-collapse-button-margin-right, calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .sl-table .sl-table__detail-button.sl-table__detail-button {
-  width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   border-radius: var(--ctr-collapse-button-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--ctr-collapse-button-padding, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   transition: background-color var(--sjs-creator-transition-duration, 150ms);
 }
 .sl-table .sl-table__detail-button.sl-table__detail-button:focus:enabled {
@@ -777,24 +777,38 @@ svc-tab-test {
 .sl-table .sl-table__detail-button.sl-table__detail-button:hover:enabled use, .sl-table .sl-table__detail-button.sl-table__detail-button.sv-focused--by-key.sv-focused--by-key use {
   fill: var(--ctr-collapse-button-icon-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
+.sl-table .sl-table__detail-button.sl-table__detail-button .sv-action-bar-item__icon {
+  width: var(--ctr-collapse-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--ctr-collapse-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+}
 
 .sl-table__remove-button .sv-action-bar-item {
-  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding: var(--sjs-base-unit, var(--base-unit, 8px));
+  padding: var(--ctr-expression-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-expression-item-padding-right-icon-only, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-expression-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-expression-item-padding-left-icon-only, var(--sjs-base-unit, var(--base-unit, 8px)));
   cursor: pointer;
+  border: none;
+  border-radius: var(--ctr-expression-item-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .sl-table__remove-button .sv-action-bar-item:focus:enabled {
   background-color: transparent;
 }
 .sl-table__remove-button .sv-action-bar-item use {
-  fill: var(--lbr-action-button-icon-color-negative, var(--sjs-special-red, var(--red, #e60a3e)));
+  fill: var(--ctr-expression-item-icon-color, var(--sjs-special-red, var(--red, #e60a3e)));
 }
 .sl-table__remove-button .sv-action-bar-item:hover:enabled, .sl-table__remove-button .sv-action-bar-item.sv-focused--by-key.sv-focused--by-key {
-  background-color: var(--ctr-library-action-button-background-color-negative-hovered, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
+  background-color: var(--ctr-expression-item-background-color-remove-button-hovered, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
   outline: none;
 }
 .sl-table__remove-button .sv-action-bar-item:hover:enabled use, .sl-table__remove-button .sv-action-bar-item.sv-focused--by-key.sv-focused--by-key use {
-  fill: var(--lbr-action-button-icon-color-negative, var(--sjs-special-red, var(--red, #e60a3e)));
+  fill: var(--ctr-expression-item-icon-color, var(--sjs-special-red, var(--red, #e60a3e)));
+}
+.sl-table__remove-button .sv-action-bar-item .sv-action-bar-item__icon {
+  width: var(--ctr-expression-item-icon-width, 24px);
+  height: var(--ctr-expression-item-icon-height, 24px);
+}
+
+.sl-table__remove-button .sv-action-bar-item__icon {
+  width: var(--ctr-survey-action-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--ctr-survey-action-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .sl-table__cell .sv-action-bar-item__icon {
@@ -807,19 +821,15 @@ svc-tab-test {
   opacity: 1;
 }
 
-.sl-table__row #remove-row .sv-action-bar-item {
-  border: none;
-  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.sl-table__row #remove-row .sv-action-bar-item__icon use {
-  fill: var(--lbr-action-button-icon-color-negative, var(--sjs-special-red, var(--red, #e60a3e)));
-}
-
 .sl-table__row.sl-table__row--additional .sl-table__cell .svc-action-button {
   color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
 }
 
+.sl-table .svc-action-button {
+  padding: var(--ctr-survey-page-header-padding-vertical-with-button, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) 0px;
+  margin-left: 0;
+}
+
 .sl-table__cell .svc-action-button,
 .sl-table__cell .svc-action-button:hover,
 .sl-table__cell .svc-action-button:focus,
@@ -833,12 +843,15 @@ svc-tab-test {
   font-weight: 400;
   line-height: var(--ctr-font-medium-line-height, var(--ctr-medium-bold-line-height, 32px));
   font-weight: 700;
+  --thm-logic-header-max-height: var(--ctr-font-medium-line-height, var(--ctr-medium-bold-line-height, calcSize(4)));
   background: transparent;
   outline: none;
   border: none;
   box-shadow: none;
+  border-radius: 0;
   color: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
-  max-height: calc(13.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  box-sizing: content-box;
+  max-height: calc(3 * var(--thm-logic-header-max-height));
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -975,7 +988,7 @@ svc-tab-test {
 }
 
 .sl-question__header--left {
-  margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-right: var(--ctr-expression-items-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sl-row .sd-scrollable-container:not(.sd-scrollable-container--compact) {
@@ -1001,7 +1014,7 @@ svc-tab-test {
 }
 
 .sl-row--multiple .sl-question {
-  padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
+  padding-right: var(--ctr-expression-items-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .svc-logic-question-text-editor {
@@ -1248,9 +1261,13 @@ svc-tab-test {
 .st-properties .spg-table .spg-table__question-wrapper .spg-selectbase__label {
   gap: 0;
 }
+.st-properties .spg-table .spg-checkbox--disabled .spg-checkbox__caption {
+  color: var(--ctr-checkbox-text-color-disabled, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
 .st-properties .spg-table .spg-checkbox--disabled .spg-checkbox__rectangle,
 .st-properties .spg-table .spg-checkbox--disabled .spg-checkbox__rectangle:hover {
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  border: var(--ctr-checkbox-border-width, 1px) solid var(--ctr-checkbox-border-color-disabled, rgba(0, 0, 0, 0.16));
+  background: var(--ctr-checkbox-background-color-disabled, #f3f3f3);
 }
 .st-properties .spg-matrixdynamic__dragged-row {
   --default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1629,7 +1646,7 @@ td.st-table__cell:first-of-type span {
 
 .svc-logic-operator--action.sl-paneldynamic__add-btn,
 .svc-logic-operator--operator.sl-paneldynamic__add-btn {
-  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: var(--ctr-expression-rows-gap, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .svc-logic-operator--action.sl-paneldynamic__add-btn {
@@ -1670,50 +1687,35 @@ td.st-table__cell:first-of-type span {
   display: none;
 }
 
-.svc-action-button.svc-logic-condition-remove.svc-icon-remove:focus {
-  outline: none;
-}
-
-.svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove {
+.svc-action-button--icon.svc-icon-remove {
   display: none;
-  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--ctr-expression-item-padding-top, 8px) var(--ctr-expression-item-padding-right-icon-only, 8px) var(--ctr-expression-item-padding-bottom, 8px) var(--ctr-expression-item-padding-left-icon-only, 8px);
+  border-radius: var(--ctr-expression-item-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   background: none;
   justify-content: center;
   align-items: center;
-  padding: 0;
+  outline: none;
+  border: none;
 }
-.svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove .sv-svg-icon {
-  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.svc-action-button--icon.svc-icon-remove .sv-svg-icon {
+  width: var(--ctr-expression-item-icon-width, 24px);
+  height: var(--ctr-expression-item-icon-height, 24px);
 }
-.svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove use {
-  fill: var(--ctr-survey-action-button-icon-color-negative, var(--sjs-special-red, var(--red, #e60a3e)));
+.svc-action-button--icon.svc-icon-remove use {
+  fill: var(--ctr-expression-item-icon-color, var(--sjs-special-red, var(--red, #e60a3e)));
 }
-
-.svc-action-button--disabled.svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove use {
-  fill: var(--ctr-survey-action-button-icon-color-disabled, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+.svc-action-button--icon.svc-icon-remove:focus, .svc-action-button--icon.svc-icon-remove:hover {
+  background-color: var(--ctr-expression-item-background-color-remove-button-hovered, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
 }
-
-.sl-panel-wrapper--in-row:hover .svc-logic-condition-remove.svc-icon-remove,
-.sl-panel-wrapper--in-row:focus-within .svc-logic-condition-remove.svc-icon-remove {
-  display: block;
+.svc-action-button--icon.svc-icon-remove.svc-action-button--disabled {
+  fill: var(--ctr-survey-action-button-icon-color-disabled, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 
-.sl-panel-wrapper--in-row:hover .svc-logic-condition-remove.svc-icon-remove.svc-action-button--icon,
-.sl-panel-wrapper--in-row:focus-within .svc-logic-condition-remove.svc-icon-remove.svc-action-button--icon {
+.sl-panel-wrapper--in-row:hover .svc-icon-remove,
+.sl-panel-wrapper--in-row:focus-within .svc-icon-remove {
   display: flex;
 }
 
-.svc-logic-condition-remove.svc-icon-remove:hover,
-.svc-logic-condition-remove.svc-icon-remove:focus {
-  background-color: var(--ctr-library-action-button-background-color-negative-hovered, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
-}
-
-.svc-logic-condition-remove-question {
-  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
 .svc-logic-paneldynamic__button.svc-logic-paneldynamic__remove-btn {
   display: none;
 }
@@ -1743,7 +1745,7 @@ td.st-table__cell:first-of-type span {
 .svc-logic-tab__content .svc-logic-tab__content-action {
   margin-left: 25%;
   margin-right: 25%;
-  margin-top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: var(--ctr-surface-gap, calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   margin-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-logic-tab__content .svc-logic-tab__content-action--disabled {
@@ -2013,11 +2015,32 @@ svc-tab-designer {
   right: 0;
 }
 
+.svc-creator__toolbox--right .svc-tab-designer__toolbar,
+[dir=rtl] .svc-tab-designer__toolbar,
+[style*="direction:rtl"] .svc-tab-designer__toolbar,
+[style*="direction: rtl"] .svc-tab-designer__toolbar {
+  position: absolute;
+  bottom: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: unset;
+  left: 0;
+}
+
 .svc-tab-designer__surface-toolbar {
   padding: var(--ctr-surface-toolbar-padding-top, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-surface-toolbar-padding-right, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-surface-toolbar-padding-bottom, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-surface-toolbar-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   gap: var(--ctr-surface-toolbar-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
   flex-direction: column;
 }
+.svc-tab-designer__surface-toolbar .sv-action-bar-separator {
+  background: var(--ctr-separator-color, var(--sjs-border-default, var(--border, #d6d6d6)));
+  height: var(--ctr-separator-width, 1px);
+  width: var(--ctr-page-navigator-button-icon-width, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0px var(--ctr-separator-margin-vertical-small, var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-bottom: var(--ctr-surface-toolbar-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-right: 0;
+}
+.svc-tab-designer__surface-toolbar .sv-action__content {
+  flex-direction: column;
+}
 /*!************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/responsivity.scss ***!
   \************************************************************************************************************************************************************************/
@@ -2398,24 +2421,21 @@ svc-tab-designer {
 .svc-creator-popup .sv-list__item.sv-list__item--selected:hover .sv-list__item-icon use {
   fill: var(--ctr-list-item-icon-color-selected, var(--sjs-general-backcolor, var(--background, #fff)));
 }
-.svc-creator-popup .sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
-.svc-creator-popup .sv-list__item--selected:hover.sv-list__item--group > .sv-list__item-body,
-.svc-creator-popup .sv-list__item--selected:focus.sv-list__item--group > .sv-list__item-body,
-.svc-creator-popup .sv-list__item.sv-list__item--selected:hover.sv-list__item--group > .sv-list__item-body {
+.svc-creator-popup .sv-list__item--group-selected > .sv-list__item-body,
+.svc-creator-popup .sv-list__item--group-selected:hover > .sv-list__item-body,
+.svc-creator-popup .sv-list__item--group-selected:focus > .sv-list__item-body {
   background: var(--ctr-list-item-background-color-selected-submenu, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
   color: var(--ctr-list-item-text-color-selected-submenu, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-weight: 400;
 }
-.svc-creator-popup .sv-list__item--selected.sv-list__item--group .sv-list__item-icon use,
-.svc-creator-popup .sv-list__item--selected:hover.sv-list__item--group .sv-list__item-icon use,
-.svc-creator-popup .sv-list__item--selected:focus.sv-list__item--group .sv-list__item-icon use,
-.svc-creator-popup .sv-list__item.sv-list__item--selected:hover.sv-list__item--group .sv-list__item-icon use {
+.svc-creator-popup .sv-list__item--group-selected .sv-list__item-icon use,
+.svc-creator-popup .sv-list__item--group-selected:hover .sv-list__item-icon use,
+.svc-creator-popup .sv-list__item--group-selected:focus .sv-list__item-icon use {
   fill: var(--ctr-list-item-icon-color-selected-submenu, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
-.svc-creator-popup .sv-list__item--selected.sv-list__item--group .sv-list-item__marker-icon use,
-.svc-creator-popup .sv-list__item--selected:hover.sv-list__item--group .sv-list-item__marker-icon use,
-.svc-creator-popup .sv-list__item--selected:focus.sv-list__item--group .sv-list-item__marker-icon use,
-.svc-creator-popup .sv-list__item.sv-list__item--selected:hover.sv-list__item--group .sv-list-item__marker-icon use {
+.svc-creator-popup .sv-list__item--group-selected .sv-list-item__marker-icon use,
+.svc-creator-popup .sv-list__item--group-selected:hover .sv-list-item__marker-icon use,
+.svc-creator-popup .sv-list__item--group-selected:focus .sv-list-item__marker-icon use {
   fill: var(--ctr-list-item-submenu-arrow-color-selected-item-submenu, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 .svc-creator-popup .sv-list__item.sv-action-bar-item--secondary:focus .sv-list__item-icon use,
@@ -3455,17 +3475,18 @@ svc-page-navigator,
   \*********************************************************************************************************************************************************************************************************/
 svc-page-navigator-item,
 .svc-page-navigator-item {
-  display: block;
-  width: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  min-height: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  display: flex;
+  justify-content: center;
   cursor: pointer;
-  position: relative;
 }
 
 .svc-page-navigator-item-content {
-  height: 100%;
-  width: 100%;
+  display: flex;
+  padding: var(--ctr-page-navigator-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-page-navigator-item-padding-right, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-page-navigator-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-page-navigator-item-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  gap: var(--ctr-page-navigator-item-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  justify-content: flex-end;
+  align-items: center;
+  position: relative;
 }
 .svc-page-navigator-item-content:hover, .svc-page-navigator-item-content:focus {
   outline: none;
@@ -3488,14 +3509,45 @@ svc-page-navigator-item,
 }
 
 .svc-page-navigator-item__dot {
-  box-sizing: content-box;
+  display: flex;
+  width: var(--ctr-page-navigator-item-dot-container-width, calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--ctr-page-navigator-item-dot-container-height, calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  justify-content: center;
+  align-items: center;
+}
+
+.svc-page-navigator-item__dot-content {
+  width: var(--ctr-page-navigator-item-dot-radius-small, calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--ctr-page-navigator-item-dot-radius-small, calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  flex-shrink: 0;
+  background: var(--ctr-page-navigator-item-dot-color-default, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
+  border-radius: var(--ctr-page-navigator-item-dot-radius-small, calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+}
+
+.svc-page-navigator-item__banner {
+  display: flex;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: var(--ctr-page-navigator-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-page-navigator-item-padding-right, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-page-navigator-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-page-navigator-item-padding-left-hovered, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--ctr-page-navigator-item-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: var(--ctr-page-navigator-item-corner-radius, 1024px);
+  background: var(--ctr-page-navigator-item-background-color-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
+  box-shadow: var(--ctr-page-navigator-item-shadow-hovered-1-offset-x, 0px) var(--ctr-page-navigator-item-shadow-hovered-1-offset-y, 2px) var(--ctr-page-navigator-item-shadow-hovered-1-blur, 6px) var(--ctr-page-navigator-item-shadow-hovered-1-spread, 0px) var(--ctr-page-navigator-item-shadow-hovered-1-color, rgba(0, 0, 0, 0.1)), var(--ctr-page-navigator-item-shadow-hovered-2-offset-x, 0px) var(--ctr-page-navigator-item-shadow-hovered-2-offset-y, 0px) var(--ctr-page-navigator-item-shadow-hovered-2-blur, 0px) var(--ctr-page-navigator-item-shadow-hovered-2-spread, 0px) var(--ctr-page-navigator-item-shadow-hovered-2-color, transparent);
+  opacity: 0;
+  transition: opacity var(--sjs-creator-transition-duration, 150ms);
   position: absolute;
-  border-radius: 50%;
-  width: var(--ctr-page-navigator-item-dot-radius-small, 6px);
-  height: var(--ctr-page-navigator-item-dot-radius-small, 6px);
-  right: calc(50% - var(--ctr-page-navigator-item-dot-radius-small, 6px) / 2);
-  top: calc(50% - var(--ctr-page-navigator-item-dot-radius-small, 6px) / 2);
-  background: var(--ctr-page-navigator-item-dot-color-default, var(--sjs-border-default, var(--border, #d6d6d6)));
+  top: 0;
+  right: 0;
+}
+.svc-page-navigator-item__banner .svc-page-navigator-item__dot-content {
+  width: var(--ctr-page-navigator-item-dot-radius-large, var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: var(--ctr-page-navigator-item-dot-radius-large, var(--sjs-base-unit, var(--base-unit, 8px)));
+  flex-shrink: 0;
+  background: var(--ctr-page-navigator-item-dot-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  border-radius: 100%;
 }
 
 .svc-page-navigator-item__text {
@@ -3511,42 +3563,19 @@ svc-page-navigator-item,
   color: var(--ctr-page-navigator-item-text-color-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
-.svc-page-navigator-item--selected .svc-page-navigator-item__dot {
-  width: var(--sjs-base-unit, var(--base-unit, 8px));
-  height: var(--sjs-base-unit, var(--base-unit, 8px));
-  right: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
-  top: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
+.svc-page-navigator-item--selected .svc-page-navigator-item__dot-content {
+  width: var(--ctr-page-navigator-item-dot-radius-large, var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: var(--ctr-page-navigator-item-dot-radius-large, var(--sjs-base-unit, var(--base-unit, 8px)));
+  flex-shrink: 0;
   background: var(--ctr-page-navigator-item-dot-color-selected, var(--sjs-general-backcolor, var(--background, #fff)));
-  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--ctr-page-navigator-item-dot-border-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--ctr-page-navigator-item-dot-border-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
-.svc-page-navigator-item__banner {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  display: flex;
-  align-items: center;
-  animation: 0.5s ease-in;
-  opacity: 0;
-  max-width: 0;
-  z-index: 20;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  background-color: var(--ctr-page-navigator-item-background-color-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
-  box-shadow: var(--ctr-page-navigator-item-shadow-hovered-1-offset-x, 0px) var(--ctr-page-navigator-item-shadow-hovered-1-offset-y, 2px) var(--ctr-page-navigator-item-shadow-hovered-1-blur, 6px) var(--ctr-page-navigator-item-shadow-hovered-1-spread, 0px) var(--ctr-page-navigator-item-shadow-hovered-1-color, rgba(0, 0, 0, 0.1)), var(--ctr-page-navigator-item-shadow-hovered-2-offset-x, 0px) var(--ctr-page-navigator-item-shadow-hovered-2-offset-y, 0px) var(--ctr-page-navigator-item-shadow-hovered-2-blur, 0px) var(--ctr-page-navigator-item-shadow-hovered-2-spread, 0px) var(--ctr-page-navigator-item-shadow-hovered-2-color, transparent);
-  transition: opacity var(--sjs-creator-transition-duration, 150ms);
-  border-radius: var(--ctr-page-navigator-item-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  padding: var(--ctr-page-navigator-item-padding-top, 0) var(--ctr-page-navigator-item-padding-right, 0) var(--ctr-page-navigator-item-padding-bottom, 0) var(--ctr-page-navigator-item-padding-left-hovered, 0);
-  flex-direction: row;
-  gap: var(--ctr-page-navigator-item-gap, 8px);
-}
-.svc-page-navigator-item__banner .svc-page-navigator-item__dot {
-  position: absolute;
-  display: inline-block;
-  top: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  right: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
+.svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
+  opacity: 1;
 }
 
 .svc-creator__toolbox--right .svc-page-navigator-item__banner,
@@ -3554,42 +3583,10 @@ svc-page-navigator-item,
 [style*="direction:rtl"] .svc-page-navigator-item__banner,
 [style*="direction: rtl"] .svc-page-navigator-item__banner {
   right: unset;
-  left: calc(0.625 * var(--base-unit, 8px));
-}
-.svc-creator__toolbox--right .svc-page-navigator-item__banner .svc-page-navigator-item__dot,
-[dir=rtl] .svc-page-navigator-item__banner .svc-page-navigator-item__dot,
-[style*="direction:rtl"] .svc-page-navigator-item__banner .svc-page-navigator-item__dot,
-[style*="direction: rtl"] .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
-  right: unset;
-  left: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
-.svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
-.svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
-  padding: 0 calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  max-width: calc(25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  opacity: 1;
-  background: var(--ctr-page-navigator-item-background-color-hovered, var(--sjs-general-backcolor, var(--background, #fff)));
-}
-.svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__dot,
-.svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__dot {
-  border: none;
-  width: var(--ctr-page-navigator-item-dot-radius-large, var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: var(--ctr-page-navigator-item-dot-radius-large, var(--sjs-base-unit, var(--base-unit, 8px)));
-  background: var(--ctr-page-navigator-item-dot-color-hovered, var(--sjs-primary-backcolor, var(--primary, #19b394)));
-}
-
-.svc-creator__toolbox--right .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
-.svc-creator__toolbox--right .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner,
-[dir=rtl] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
-[dir=rtl] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner,
-[style*="direction:rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
-[style*="direction:rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner,
-[style*="direction: rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
-[style*="direction: rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
-  padding: 0 calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: 0;
+  padding: var(--ctr-page-navigator-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-page-navigator-item-padding-left-hovered, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-page-navigator-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-page-navigator-item-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  direction: rtl;
 }
-
 .svc-page-navigator-item--disabled .svc-page-navigator-item__banner {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.25;
@@ -3944,14 +3941,16 @@ svc-page {
   fill: var(--ctr-button-contextual-button-icon-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
-.svc-page--drag-over-empty:after {
+.svc-page--drag-over-empty .svc-page__footer:after {
   content: " ";
   position: absolute;
   background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
   left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   bottom: calc(11.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  width: calc(100% - 48px);
-  height: 2px;
+  width: 100%;
+  height: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: 0;
+  top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))) - 0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))) / 2);
 }
 
 .svc-page--drag-over-empty-no-add-button:after {
@@ -3982,8 +3981,8 @@ svc-page {
 .svc-question__adorner .sv-popup--overlay .sv-list__item-body {
   pointer-events: none;
 }
-.svc-element__add-new-question .sv-popup--overlay .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
-.svc-question__adorner .sv-popup--overlay .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body {
+.svc-element__add-new-question .sv-popup--overlay .sv-list__item.sv-list__item--group-selected > .sv-list__item-body,
+.svc-question__adorner .sv-popup--overlay .sv-list__item.sv-list__item--group-selected > .sv-list__item-body {
   --default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --ctr-default-line-height: calc(1.5 * var(--default-font-size));
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
@@ -3995,8 +3994,8 @@ svc-page {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
-.svc-element__add-new-question .sv-popup--overlay .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body use,
-.svc-question__adorner .sv-popup--overlay .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body use {
+.svc-element__add-new-question .sv-popup--overlay .sv-list__item.sv-list__item--group-selected > .sv-list__item-body use,
+.svc-question__adorner .sv-popup--overlay .sv-list__item.sv-list__item--group-selected > .sv-list__item-body use {
   fill: var(--sjs-general-backcolor, var(--background, #fff));
 }
 
@@ -4177,21 +4176,26 @@ svc-page {
 }
 
 .svc-row__drop-indicator--top {
-  top: 7px;
+  top: calc(var(--sjs-base-unit, var(--base-unit, 8px)) - 0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))) / 2);
 }
 
 .svc-row__drop-indicator--bottom {
-  bottom: -9px;
+  bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))) - -0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))) / 2);
 }
 
 .svc-row--drag-over-top > .svc-row__drop-indicator--top {
   opacity: 1;
-  height: 2px;
+  height: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-row--drag-over-bottom > .svc-row__drop-indicator--bottom {
   opacity: 1;
-  height: 2px;
+  height: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-question__content--panel .svc-row__drop-indicator--top,
+.sd-panel__content .svc-row__drop-indicator--top {
+  top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))) - 0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))) / 2);
 }
 
 .svc-question__content--panel .svc-row--drag-over-top:before,
@@ -4926,46 +4930,46 @@ svc-question {
 }
 
 .svc-question__drop-indicator--left {
-  left: -9px;
+  left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))) - 0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))) / 2);
 }
 
 .svc-question__drop-indicator--right {
-  right: -9px;
+  right: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))) - 0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))) / 2);
 }
 
 .svc-question__drop-indicator--top {
-  top: -9px;
+  top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))) - 0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))) / 2);
 }
 
 .svc-question__drop-indicator--bottom {
-  bottom: -9px;
+  bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))) - 0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))) / 2);
 }
 
 .svc-question__content--drag-over-left > .svc-question__drop-indicator--left {
   opacity: 1;
-  width: 2px;
+  width: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-question__content--drag-over-right > .svc-question__drop-indicator--right {
   opacity: 1;
-  width: 2px;
+  width: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-question__content--drag-over-top > .svc-question__drop-indicator--top {
   opacity: 1;
-  height: 2px;
+  height: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-question__content--drag-over-bottom > .svc-question__drop-indicator--bottom {
   opacity: 1;
-  height: 2px;
+  height: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-panel .svc-question__content--drag-over-left .svc-question__drop-indicator--left {
-  left: -6px;
+  left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))) + 0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-panel .svc-question__content--drag-over-right .svc-question__drop-indicator--right {
-  right: -6px;
+  right: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))) + 0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-question__content--panel .sd-row > div:first-child .svc-question__content--drag-over-left,
@@ -4980,11 +4984,11 @@ svc-question {
 }
 .svc-question__content--panel .svc-question__content--drag-over-top .svc-question__drop-indicator--top,
 .sd-panel__content .svc-question__content--drag-over-top .svc-question__drop-indicator--top {
-  top: -6px;
+  top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))) + 0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-question__content--panel .svc-question__content--drag-over-bottom .svc-question__drop-indicator--bottom,
 .sd-panel__content .svc-question__content--drag-over-bottom .svc-question__drop-indicator--bottom {
-  bottom: -6px;
+  bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))) + 0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-question__content-actions > .sv-action-bar {
@@ -5433,6 +5437,10 @@ svc-question .sv-action-bar,
   padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   overflow-x: auto;
 }
+.svc-question__content .sd-question--description-under-input .sd-question__content {
+  margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
+}
 .svc-question__content .sd-composite .sd-question__content {
   margin-left: 0;
   margin-right: 0;
@@ -6857,6 +6865,7 @@ svc-question .sv-action-bar,
 /*!*******************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/toolbox/toolbox-tool.scss ***!
   \*******************************************************************************************************************************************************************************************/
+@charset "UTF-8";
 .svc-toolbox__item {
   display: flex;
   position: relative;
@@ -6990,6 +6999,8 @@ svc-question .sv-action-bar,
   padding-inline-end: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   white-space: nowrap;
   color: var(--ctr-toolbox-item-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .svc-toolbox__tool:hover .svc-toolbox__item-banner,
@@ -7059,6 +7070,7 @@ svc-question .sv-action-bar,
   inset-inline-end: var(--ctr-toolbox-item-padding-right, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   margin-inline-end: var(--ctr-toolbox-item-submenu-button-margin-right, 0);
   top: calc(var(--ctr-toolbox-item-padding-top, var(--dft-toolbox-item-padding-top)) + var(--ctr-toolbox-gap, var(--dft-toolbox-gap)));
+  bottom: var(--ctr-toolbox-item-padding-bottom, var(--dft-toolbox-item-padding-bottom));
   display: inline-flex;
   padding: var(--ctr-toolbox-item-submenu-button-padding-top, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-item-submenu-button-padding-right, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-item-submenu-button-padding-bottom, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-item-submenu-button-padding-left, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   box-sizing: border-box;
@@ -7184,6 +7196,19 @@ svc-question .sv-action-bar,
   box-sizing: border-box;
   align-self: flex-start;
 }
+.svc-toolbox--compact .svc-toolbox__item:after {
+  content: " ";
+  --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
+  --ctr-small-bold-line-height: var(--small-bold-font-size);
+  font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+  font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
+  font-weight: 600;
+  width: 0;
+}
 .svc-toolbox--compact .svc-toolbox__tool--dots {
   padding-inline-end: 0;
   padding-inline-start: 0;
@@ -7217,12 +7242,6 @@ svc-question .sv-action-bar,
     var(--ctr-toolbox-group-padding-right) +
     var(--ctr-tooltip-pointer-height) * 2
   );
-  --thm-toolbox-separator-width-compact: calc(
-    var(--ctr-toolbox-item-icon-width) +
-    var(--ctr-toolbox-item-padding-right-no-text) +
-    var(--ctr-toolbox-item-padding-left-no-text)
-  );
-  --thm-toolbox-separator-width: var(--ctr-toolbox-min-width);
   --toolbox-width: var(--ctr-toolbox-min-width, 224.984375px /*calcSize(28)*/);
   --toolbox-width-compact: var(--thm-toolbox-width-compact, var(--dft-toolbox-width-compact));
   width: auto;
@@ -7240,7 +7259,7 @@ svc-question .sv-action-bar,
   flex-direction: column;
   border-inline-end: var(--ctr-toolbox-border-width-right, 0px) solid var(--ctr-toolbox-border-color, transparent);
   background: var(--ctr-toolbox-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-  width: var(--toolbox-width);
+  min-width: var(--toolbox-width);
 }
 
 .svc-toolbox .svc-scroll__scroller {
@@ -7263,6 +7282,7 @@ svc-question .sv-action-bar,
 .svc-toolbox--compact .svc-toolbox__panel {
   overflow: visible;
   width: var(--toolbox-width-compact);
+  min-width: var(--toolbox-width-compact);
 }
 .svc-toolbox--compact .svc-scroll__scroller {
   width: 100vw;
@@ -7280,13 +7300,16 @@ svc-question .sv-action-bar,
   padding-bottom: calc(var(--ctr-toolbox-separator-padding-top, 8px) + var(--ctr-toolbox-gap, 4px));
 }
 .svc-toolbox--compact .svc-toolbox__category-separator {
-  width: var(--thm-toolbox-separator-width-compact, calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   box-sizing: content-box;
   padding-inline-end: var(--ctr-toolbox-separator-padding-right-compact, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   padding-inline-start: var(--ctr-toolbox-separator-padding-left-compact, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   margin-inline-end: calc(0px - var(--ctr-toolbox-group-padding-right-compact, 12px) - var(--ctr-toolbox-item-margin-horizontal-no-text, 4px));
   margin-inline-start: calc(0px - var(--ctr-toolbox-group-padding-left-compact, 12px) - var(--ctr-toolbox-item-margin-horizontal-no-text, 4px));
 }
+.svc-toolbox--compact .svc-toolbox__category-separator--search {
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
 
 .svc-toolbox__tool.svc-toolbox__search-button {
   z-index: 20;
@@ -7315,7 +7338,7 @@ svc-question .sv-action-bar,
 }
 .svc-toolbox--flyout .svc-toolbox__panel {
   z-index: 200;
-  width: var(--ctr-toolbox-min-width, calc(32 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  width: fit-content;
   position: relative;
   box-shadow: var(--ctr-toolbox-shadow-floating-2-offset-x, 0px) var(--ctr-toolbox-shadow-floating-2-offset-y, 8px) var(--ctr-toolbox-shadow-floating-2-blur, 16px) var(--ctr-toolbox-shadow-floating-2-spread, 0px) var(--ctr-toolbox-shadow-floating-2-color, rgba(0, 0, 0, 0.1)), var(--ctr-toolbox-shadow-floating-1-offset-x, 0px) var(--ctr-toolbox-shadow-floating-1-offset-y, 2px) var(--ctr-toolbox-shadow-floating-1-blur, 6px) var(--ctr-toolbox-shadow-floating-1-spread, 0px) var(--ctr-toolbox-shadow-floating-1-color, rgba(0, 0, 0, 0.1));
   transition: box-shadow var(--sjs-creator-transition-duration, 150ms);
@@ -7345,7 +7368,6 @@ svc-question .sv-action-bar,
 }
 
 .svc-toolbox__category-separator {
-  width: var(--thm-toolbox-separator-width, calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   box-sizing: border-box;
   padding-top: var(--ctr-toolbox-separator-padding-top, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   padding-inline-end: var(--ctr-toolbox-separator-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
@@ -7354,6 +7376,7 @@ svc-question .sv-action-bar,
   margin-top: var(--ctr-toolbox-gap, 0);
   margin-inline-end: calc(0px - var(--ctr-toolbox-group-padding-right, 12px));
   margin-inline-start: calc(0px - var(--ctr-toolbox-group-padding-left, 12px));
+  max-width: var(--ctr-toolbox-separator-max-width, calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .svc-toolbox__category-separator:after {
   content: "";
@@ -7365,12 +7388,14 @@ svc-question .sv-action-bar,
 .svc-toolbox__category-separator--search {
   position: absolute;
   top: 100%;
-  width: var(--toolbox-width);
+  left: 0;
+  right: 0;
   align-self: center;
   margin-left: auto;
   margin-right: auto;
   padding: 0;
   margin-top: 0;
+  max-width: initial;
 }
 
 .svc-toolbox--no-separators .svc-toolbox__category-separator {
@@ -7543,27 +7568,31 @@ svc-question .sv-action-bar,
     overflow: hidden;
   }
   to {
-    width: var(--toolbox-width);
+    width: var(--animation-width);
     overflow: hidden;
   }
 }
 @keyframes toolboxSeparatorSearchMoveIn {
   from {
-    width: var(--thm-toolbox-separator-width-compact, calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+    padding-inline-end: var(--ctr-toolbox-separator-padding-right-compact, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+    padding-inline-start: var(--ctr-toolbox-separator-padding-left-compact, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
     overflow: hidden;
   }
   to {
-    width: var(--toolbox-width);
+    padding-inline-end: 0;
+    padding-inline-start: 0;
     overflow: hidden;
   }
 }
 @keyframes toolboxSeparatorMoveIn {
   from {
-    width: var(--thm-toolbox-separator-width-compact, calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+    padding-inline-end: var(--ctr-toolbox-separator-padding-right-compact, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+    padding-inline-start: var(--ctr-toolbox-separator-padding-left-compact, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
     overflow: hidden;
   }
   to {
-    width: var(--thm-toolbox-separator-width, calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+    padding-inline-end: var(--ctr-toolbox-separator-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+    padding-inline-start: var(--ctr-toolbox-separator-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
     overflow: hidden;
   }
 }
@@ -7576,6 +7605,7 @@ svc-question .sv-action-bar,
   animation-timing-function: var(--animation-timing-function);
   animation-name: toolboxMoveIn, empty;
   animation-fill-mode: forwards;
+  min-width: 0;
 }
 .svc-toolbox__panel--enter .svc-toolbox__category-separator,
 .svc-toolbox__panel--leave .svc-toolbox__category-separator {
@@ -7603,6 +7633,7 @@ svc-question .sv-action-bar,
   animation-name: toolboxFadeIn;
   animation-fill-mode: forwards;
   opacity: 0;
+  text-overflow: initial;
 }
 
 .svc-toolbox__panel--enter {
@@ -8297,7 +8328,7 @@ button.spg-action-button--large {
 }
 
 .spg-question__title.sd-element__title--disabled {
-  color: var(--ctr-editor-label-color-disabled, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+  color: var(--ctr-caption-with-actions-text-color-disabled, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
 }
 
 .spg-question__content {
@@ -8363,14 +8394,19 @@ button.spg-action-button--large {
 
 .spg-question--location--left {
   flex-direction: row;
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: inset 0 0 0 1px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  background: var(--ctr-editor-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  box-shadow: inset 0 0 0 var(--ctr-editor-border-width, 1px) var(--ctr-editor-border-color, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
   line-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   vertical-align: middle;
   align-items: stretch;
+  border-radius: var(--ctr-editor-corner-radius, 0px);
 }
 .spg-question--location--left:focus-within {
-  box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: inset 0 0 0 var(--ctr-editor-border-width-focused, 2px) var(--ctr-editor-border-color-focused, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+
+.spg-question--disabled.spg-question--location--left .spg-question__title {
+  color: var(--ctr-editor-content-text-color-disabled, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
 }
 
 .spg-question__header--location--left {
@@ -8380,10 +8416,11 @@ button.spg-action-button--large {
   flex: 0 0;
   display: flex;
   align-items: center;
+  padding-inline-start: var(--ctr-editor-padding-left, 0);
 }
 .spg-question__header--location--left .spg-question__title {
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
+  padding: var(--ctr-editor-label-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-editor-label-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-editor-label-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-editor-label-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  border-inline-end: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   display: inline-block;
   color: var(--ctr-editor-label-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
   white-space: nowrap;
@@ -8471,7 +8508,7 @@ sv-question-error > div {
 .spg-question--highlighted .spg-input-container,
 .spg-question--highlighted .spg-question--location--left,
 .spg-question--highlighted .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input {
-  box-shadow: 0 0 0 2px var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
+  box-shadow: inset 0 0 0 var(--ctr-editor-border-width-highlighed, 2px) var(--ctr-editor-border-color-highlighted, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
 }
 .spg-question--highlighted .spg-checkbox__control:focus + .spg-checkbox__rectangle,
 .spg-question--highlighted .spg-matrixdynamic__content.spg-text__content {
@@ -8529,24 +8566,23 @@ sv-question-error > div {
   color: var(--ctr-editor-content-text-color-placeholder, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
-.spg-input:focus,
-.spg-input.spg-dropdown:focus,
-.spg-input.spg-dropdown:focus-within,
+.spg-input:focus:not(:disabled),
+.spg-input.spg-dropdown:focus:not(:disabled),
+.spg-input.spg-dropdown:focus-within:not(:disabled),
 .spg-input-container:focus-within {
   box-shadow: inset 0 0 0 var(--ctr-editor-border-width-focused, 2px) var(--ctr-editor-border-color-focused, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
-.spg-input:disabled,
-.spg-input:disabled::placeholder {
-  color: var(--ctr-editor-content-text-color-disabled, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  opacity: var(--ctr-editor-content-text-opacity-disabled, 0.25);
-  background-color: var(--ctr-editor-background-color-disabled, var(--sjs-general-backcolor, var(--background, #fff)));
+input.spg-input:focus:read-only {
+  box-shadow: inset 0 0 0 var(--ctr-editor-border-width, 1px) var(--ctr-editor-border-color, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
 }
 
+.spg-input:disabled,
+.spg-input:disabled::placeholder,
 input.spg-input:read-only,
 input.spg-input:read-only::placeholder {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  opacity: 0.25;
+  color: color-mix(in srgb, var(--ctr-editor-content-text-color-disabled, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91))), transparent calc(100% - 100% * var(--ctr-editor-content-text-opacity-disabled, 0.25)));
+  background-color: var(--ctr-editor-background-color-disabled, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 
 .spg-input[type=color] {
@@ -8566,6 +8602,10 @@ input.spg-input:read-only::placeholder {
   padding: var(--ctr-editor-button-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-editor-button-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-editor-button-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-editor-button-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
   line-height: 0;
   transition: background var(--sjs-creator-transition-duration, 150ms), opacity var(--sjs-creator-transition-duration, 150ms);
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .spg-input__edit-button:focus, .spg-input__edit-button:hover {
   background: var(--ctr-editor-button-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
@@ -8579,6 +8619,10 @@ input.spg-input:read-only::placeholder {
   fill: var(--ctr-editor-button-icon-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 
+.spg-input-container--multiline .spg-input__edit-button {
+  align-self: flex-end;
+}
+
 .spg-input__edit-button--disabled,
 .spg-input__edit-button:disabled {
   opacity: var(--ctr-editor-button-icon-opacity-disabled, 0.25);
@@ -8637,13 +8681,17 @@ input.spg-input:read-only::placeholder {
   color: var(--ctr-editor-content-text-color-placeholder, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 
-.spg-input-container__input:disabled {
+.spg-input-container__input:disabled,
+.spg-input-container__input:disabled::placeholder {
   opacity: var(--ctr-editor-content-text-opacity-disabled, 0.25);
+  color: var(--ctr-editor-content-text-color-disabled, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+  background-color: var(--ctr-editor-background-color-disabled, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 
 .spg-input-container__buttons-container {
   display: flex;
   gap: var(--ctr-editor-buttons-gap, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  align-self: stretch;
 }
 
 .spg-dropdown {
@@ -8652,6 +8700,10 @@ input.spg-input:read-only::placeholder {
   min-height: calc(var(--ctr-editor-button-icon-height) + var(--ctr-editor-button-padding-top) + var(--ctr-editor-button-padding-bottom) + var(--ctr-editor-padding-top) + var(--ctr-editor-padding-bottom));
 }
 
+.spg-dropdown--empty .spg-dropdown__value {
+  min-height: var(--ctr-font-default-line-height, var(--ctr-default-line-height, 24px));
+}
+
 .spg-dropdown__value {
   --default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --ctr-default-line-height: calc(1.5 * var(--default-font-size));
@@ -8662,6 +8714,7 @@ input.spg-input:read-only::placeholder {
   line-height: var(--ctr-font-default-line-height, var(--ctr-default-line-height, 24px));
   display: flex;
   align-items: center;
+  min-height: var(--ctr-font-default-line-height, var(--ctr-default-line-height, 24px));
 }
 
 .spg-dropdown__filter-string-input {
@@ -8676,10 +8729,10 @@ input.spg-input:read-only::placeholder {
 
 .spg-dropdown_chevron-button {
   width: var(--ctr-editor-button-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  height: var(--ctr-editor-button-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   padding: var(--ctr-editor-button-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-editor-button-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-editor-button-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-editor-button-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
   inset-block-start: var(--ctr-editor-padding-top, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   inset-inline-end: var(--ctr-editor-padding-right, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  inset-block-end: var(--ctr-editor-padding-bottom, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .spg-dropdown_chevron-button:hover, .spg-dropdown_chevron-button:focus {
   border-radius: var(--ctr-editor-button-corner-radius);
@@ -8762,7 +8815,10 @@ input.spg-input:read-only::placeholder {
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
-  padding: 0 calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: var(--ctr-property-grid-form-padding-top, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-end: var(--ctr-property-grid-form-padding-right, calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-bottom: var(--ctr-property-grid-form-padding-bottom, calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-start: var(--ctr-property-grid-form-padding-left, calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   box-sizing: border-box;
   background: var(--ctr-property-grid-form-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   box-shadow: inset 0px -1px 0px var(--ctr-property-grid-chapter-caption-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
@@ -8770,14 +8826,19 @@ input.spg-input:read-only::placeholder {
 
 .spg-panel__content .spg-row {
   width: 100%;
-  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: var(--ctr-property-grid-form-gap, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 .spg-panel__content .spg-row--multiple {
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
+.spg-panel__content > .spg-row:first-of-type {
+  margin-top: 0;
+}
+
 .svc-side-bar--mobile .spg-panel__content {
-  padding: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-end: var(--ctr-property-grid-form-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-inline-start: var(--ctr-property-grid-form-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .spg-question__nopadding .spg-panel__content {
@@ -8855,10 +8916,13 @@ input.spg-input:read-only::placeholder {
   line-height: var(--ctr-font-default-line-height, var(--ctr-default-line-height, 24px));
   box-shadow: none;
   background-color: transparent;
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
+  padding-top: var(--ctr-label-padding-top, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-end: var(--ctr-label-padding-right, 0px);
+  padding-bottom: var(--ctr-label-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-start: var(--ctr-label-padding-left, 0px);
 }
 .spg-panel.spg-panel--group .spg-row {
-  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-top: var(--ctr-editor-layout-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .spg-panel.spg-panel--group .spg-row:first-of-type {
   margin-top: 0;
@@ -8878,9 +8942,10 @@ input.spg-input:read-only::placeholder {
 .spg-checkbox--disabled .spg-checkbox__caption {
   color: var(--ctr-checkbox-text-color-disabled, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
-.spg-checkbox--disabled .spg-checkbox__rectangle {
-  border: var(--ctr-checkbox-border-width, 1px) solid var(--ctr-checkbox-border-color-disabled, rgba(0, 0, 0, 0.16));
-  background: var(--ctr-checkbox-background-color-disabled, #f3f3f3);
+.spg-checkbox--disabled .spg-checkbox__rectangle, .spg-checkbox--disabled.spg-checkbox:active .spg-checkbox__rectangle, .spg-checkbox--disabled.spg-checkbox__control:focus + .spg-checkbox__rectangle {
+  border: var(--ctr-checkbox-border-width, 1px) solid var(--ctr-checkbox-border-color-disabled, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
+  background: var(--ctr-checkbox-background-color-disabled, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+  outline: none;
 }
 
 .spg-checkbox__caption {
@@ -8918,7 +8983,7 @@ input.spg-input:read-only::placeholder {
 }
 
 .spg-checkbox:active .spg-checkbox__rectangle,
-.spg-checkbox__control:focus + .spg-checkbox__rectangle {
+.spg-checkbox__control:focus:not(:disabled) + .spg-checkbox__rectangle {
   outline: 2px solid var(--ctr-checkbox-border-color-focused, var(--sjs-primary-backcolor, var(--primary, #19b394)));
   outline-offset: -2px;
 }
@@ -9352,7 +9417,7 @@ input.spg-input:read-only::placeholder {
 }
 
 .spg-color-editor .spg-input__edit-button + * {
-  margin-inline-end: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-inline-end: calc(0px - var(--ctr-editor-gap, 4px));
 }
 
 .spg-file-edit__choose-button {
@@ -9402,7 +9467,6 @@ input.spg-input:read-only::placeholder {
   min-width: 0;
 }
 .spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left {
-  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
 .spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left .spg-input {