survey-creator-core 1.9.81 → 1.9.83

package/fonts.fontless.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.9.81
+ * SurveyJS Creator v1.9.83
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator

package/fonts.fontless.min.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.9.81
+ * SurveyJS Creator v1.9.83
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-creator-core",
-  "version": "1.9.81",
+  "version": "1.9.83",
   "description": "Use SurveyJS Creator to create or edit JSON for SurveyJS Library.",
   "keywords": [
     "Survey",
@@ -29,7 +29,7 @@
     "ace-builds": "^1.4.12"
   },
   "dependencies": {
-    "survey-core": "1.9.81"
+    "survey-core": "1.9.83"
   },
   "devDependencies": {}
 }

package/survey-creator-core.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.9.81
+ * SurveyJS Creator v1.9.83
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -225,7 +225,7 @@
 
 
 /*# sourceMappingURL=fonts.fontless.css.map*//*!
- * SurveyJS Creator v1.9.81
+ * SurveyJS Creator v1.9.83
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -956,7 +956,8 @@ td.st-table__cell:first-of-type {
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); }
 
 .svc-logic-tab__content .svc-logic-tab__content-action--disabled .svc-text {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16)); }
+  color: var(--foreground, #161616);
+  opacity: 0.25; }
 
 .svc-logic-tab__content .sd-paneldynamic__panel-wrapper--in-row {
   margin-top: 0;
@@ -1020,6 +1021,9 @@ td.st-table__cell:first-of-type {
   display: block;
   padding: calc(4 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px)); }
 
+.svc-logic-tab__leave-apply-button {
+  background-color: var(--red, #e60a3e); }
+
 svc-tab-designer {
   width: 100%;
   height: 100%;
@@ -1360,7 +1364,8 @@ survey-creator,
   margin-left: calc(1 * var(--base-unit, 8px));
   line-height: calc(4 * var(--base-unit, 8px));
   font-size: calc(2 * var(--base-unit, 8px));
-  color: red; }
+  color: red;
+  display: none; }
 
 .svc-string-editor__controls {
   position: absolute;
@@ -1413,6 +1418,9 @@ survey-creator,
   background-color: var(--background, #fff);
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1), 0px 0px 0px calc(0.25 * var(--base-unit, 8px)) var(--primary, #19b394); }
 
+.svc-string-editor.svc-string-editor--error:focus-within .svc-string-editor__border {
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1), 0px 0px 0px calc(0.25 * var(--base-unit, 8px)) var(--red, #e60a3e); }
+
 .sd-rating .sd-rating__item:focus-within {
   border: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394); }
 
@@ -1648,7 +1656,8 @@ svc-page-navigator-item,
   padding: 0 calc(2.5 * var(--base-unit, 8px)) 0 calc(4.5 * var(--base-unit, 8px)); }
 
 .svc-page-navigator-item--disabled .svc-page-navigator-item__banner {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16)); }
+  color: var(--foreground, #161616);
+  opacity: 0.25; }
 
 svc-page {
   display: block; }
@@ -1806,7 +1815,8 @@ svc-question {
   box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15); }
 
 .svc-question__content .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.25)); }
+  color: var(--foreground, #161616);
+  opacity: 0.25; }
 
 .svc-question__content > div {
   overflow: visible; }
@@ -2161,6 +2171,10 @@ svc-question .sv-action-bar,
   min-width: auto;
   justify-content: flex-start; }
 
+.svc-question__content .sd-rating__item--fixed-size:focus-within {
+  width: unset;
+  padding: calc(0.5 * var(--base-unit, 8px)) calc(2.5 * var(--base-unit, 8px)); }
+
 .svc-item-value-wrapper {
   position: relative;
   display: flex;
@@ -2614,7 +2628,8 @@ svc-question .sv-action-bar,
 .svc-property-panel__group:disabled,
 .svc-property-panel__group:disabled:hover {
   background-color: var(--background, #fff);
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--foreground, #161616);
+  opacity: 0.25;
   cursor: default; }
 
 .svc-property-panel__group:hover {
@@ -2648,7 +2663,8 @@ svc-question .sv-action-bar,
 
 .svc-tabbed-menu-item--disabled {
   cursor: default;
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16)); }
+  color: var(--foreground, #161616);
+  opacity: 0.25; }
   .svc-tabbed-menu-item--disabled:hover {
     background-color: var(--background, #fff); }
 
@@ -3254,19 +3270,39 @@ button.spg-action-button--large {
 
 .spg-input:focus,
 .spg-input.spg-dropdown:focus,
-.spg-input.spg-dropdown:focus-within {
+.spg-input.spg-dropdown:focus-within,
+.spg-input-container:focus-within {
   border-color: var(--primary, #19b394);
   box-shadow: inset 0 0 0 1px var(--primary, #19b394); }
 
 .spg-input:disabled,
 .spg-input:disabled::placeholder {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16)); }
+  color: var(--foreground, #161616);
+  opacity: 0.25; }
 
 .spg-input[type="color"] {
   padding-left: 0;
   padding-right: 0;
   min-width: calc(8 * var(--base-unit, 8px)); }
 
+.spg-input__edit-button {
+  position: relative;
+  box-sizing: border-box;
+  appearance: none;
+  background: var(--background, #fff);
+  border: none;
+  width: calc(5 * var(--base-unit, 8px));
+  height: calc(5 * var(--base-unit, 8px));
+  padding: calc(1 * var(--base-unit, 8px)); }
+  .spg-input__edit-button:hover {
+    background: var(--background-dim, #f3f3f3); }
+  .spg-input__edit-button:active {
+    opacity: 0.5; }
+  .spg-input__edit-button svg {
+    height: 24px;
+    width: 24px;
+    fill: rgba(0, 0, 0, 0.45); }
+
 .spg-dropdown {
   border-radius: 0;
   display: flex;
@@ -3306,7 +3342,8 @@ button.spg-action-button--large {
 
 .spg-panel__title:disabled,
 .spg-panel__title:disabled:hover {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--foreground, #161616);
+  opacity: 0.25;
   cursor: default; }
 
 .spg-panel__title--expandable:not(.spg-panel__title[aria-expanded=true]):hover, .spg-panel__title--expandable:not(.spg-panel__title[aria-expanded=true]):focus {
@@ -3568,6 +3605,42 @@ button.spg-action-button--large {
     .spg-question-group .spg-question--location--left .spg-question__content--left .spg-input.spg-dropdown:focus-within {
       box-shadow: none; }
 
+.spg-spin-editor__buttons-container {
+  display: flex; }
+
+.spg-input-container {
+  display: flex;
+  justify-content: space-between;
+  cursor: default;
+  padding: calc(0.5 * var(--base-unit, 8px));
+  align-items: center;
+  gap: calc(0.5 * var(--base-unit, 8px)); }
+
+.spg-input-container__input {
+  outline: none;
+  border: none;
+  flex-grow: 1;
+  padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px)); }
+
+.spg-color-editor__color-input {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+  left: calc(50%);
+  top: calc(100%);
+  transform: translate(-50%, -50%); }
+
+.spg-color-editor__color-swatch {
+  border: 1px solid rgba(0, 0, 0, 0.16);
+  border-radius: 3px;
+  width: calc(4.5 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+  margin-left: calc(1.5 * var(--base-unit, 8px)); }
+
 .spg-root-modern {
   width: 100%;
   border-right: 1px solid var(--border, #d6d6d6);

package/survey-creator-core.d.ts

@@ -203,6 +203,10 @@ declare module "localization/english" {
                 expressionInvalid: string;
                 noActionError: string;
                 actionInvalid: string;
+                uncompletedRule_title: string;
+                uncompletedRule_text: string;
+                uncompletedRule_apply: string;
+                uncompletedRule_cancel: string;
                 expressionSetup: string;
                 actionsSetup: string;
             };
@@ -1373,6 +1377,10 @@ declare module "editorLocalization" {
                 expressionInvalid: string;
                 noActionError: string;
                 actionInvalid: string;
+                uncompletedRule_title: string;
+                uncompletedRule_text: string;
+                uncompletedRule_apply: string;
+                uncompletedRule_cancel: string;
                 expressionSetup: string;
                 actionsSetup: string;
             };
@@ -3010,6 +3018,22 @@ declare module "property-grid-theme/property-grid" {
             itemIcon: string;
             itemTitle: string;
         };
+        spinedit: {
+            root: string;
+            control: string;
+            buttonsContainer: string;
+            arrowButton: string;
+            increaseButtonIcon: string;
+            decreaseButtonIcon: string;
+        };
+        color: {
+            root: string;
+            swatch: string;
+            colorInput: string;
+            control: string;
+            colorDropdown: string;
+            colorDrodownIcon: string;
+        };
     };
 }
 declare module "question-editor/definition" {
@@ -5178,6 +5202,7 @@ declare module "property-grid/condition-survey" {
         get textEditor(): QuestionCommentModel;
         get isReady(): boolean;
         errorText: string;
+        isEmpty(): boolean;
         hasErrorInUI(): boolean;
         apply(): boolean;
         setIsFastEntry(showTextEdit: boolean): void;
@@ -5329,6 +5354,7 @@ declare module "components/tabs/logic-item-editor" {
         protected getSurveyJSON(): any;
         protected getSurveyCreationReason(): string;
         resetModified(): void;
+        isEmpty(): boolean;
         apply(): boolean;
         getEditingActions(): Array<SurveyLogicAction>;
         private onUpdateQuestionCssClasses;
@@ -5397,7 +5423,13 @@ declare module "components/tabs/logic-ui" {
         addNewUI(): void;
         toggleExpressionEditorIsFastEntry(): void;
         updateEditableItemIsModifiedState(): void;
-        haveUnsavedRules(): boolean;
+        private getUnsavedItems;
+        private getErroredItem;
+        private isErroredItem;
+        private showErroredItem;
+        private saveItem;
+        tryLeaveUI(resultFunc?: (res: boolean) => void): boolean | undefined;
+        protected confirmLeavingOnError(onLeaving: () => void, onStaying: () => void): boolean;
         protected onPropertyValueChanged(name: string, oldValue: any, newValue: any): void;
         protected onReadOnlyChanged(): void;
         get expressionEditor(): ConditionEditor;
@@ -5406,6 +5438,7 @@ declare module "components/tabs/logic-ui" {
         getLogicItemEditor(item: SurveyLogicItem): LogicItemEditor;
         private updateEditModeLogicItem;
         private getLogicItemUI;
+        private findLogicItemUI;
         get expressionSurvey(): SurveyModel;
         get itemEditorSurvey(): SurveyModel;
         get itemsSurvey(): SurveyModel;
@@ -5414,6 +5447,7 @@ declare module "components/tabs/logic-ui" {
         protected onStartEditing(): void;
         protected onEndEditing(): void;
         protected onEditableItemApply(): void;
+        private doItemApply;
         protected hasErrorInUI(): boolean;
         protected getExpressionText(): string;
         protected getEditingActions(): Array<SurveyLogicAction>;
@@ -5448,7 +5482,10 @@ declare module "components/tabs/logic-plugin" {
         private createFilterTypeTitleUpdater;
         private createFilterQuestionTitleUpdater;
         update(): void;
+        canDeactivateAsync(onSuccess: () => void): void;
         deactivate(): boolean;
+        dispose(): void;
+        private disposeObjs;
         createActions(): Action[];
         private get showAllQuestionsText();
         private get showAllActionTypesText();
@@ -6010,6 +6047,7 @@ declare module "creator-base" {
         activate: () => void;
         update?: () => void;
         deactivate?: () => boolean;
+        canDeactivateAsync?: (onSuccess: () => void) => void;
         dispose?: () => void;
         onDesignerSurveyPropertyChanged?: (obj: Base, propName: string) => void;
         model: Base;
@@ -6912,6 +6950,7 @@ declare module "creator-base" {
          * @param viewName name of new active view (tab). The following values are available: "designer", "editor", "test", "embed", "logic" and "translation".
          */
         makeNewViewActive(viewName: string): boolean;
+        private switchViewType;
         private canSwitchViewType;
         private activatePlugin;
         private get currentPlugin();
@@ -7394,6 +7433,7 @@ declare module "components/page-navigator/page-navigator" {
         private buildItems;
         private patchContainerOffset;
         private createActionBarItem;
+        scrollToPage(page: PageModel): void;
         protected createActionBarCore(item: IAction): Action;
         togglePageSelector: (event?: any) => void;
         get pageSelectorCaption(): string;
@@ -7402,6 +7442,8 @@ declare module "components/page-navigator/page-navigator" {
         stopItemsContainerHeightObserver(): void;
         visibleItemsStartIndex: number;
         visibleItemsCount: number;
+        private _scrollableContainer;
+        setScrollableContainer(scrollableContainer: HTMLDivElement | any): void;
         private _itemsContainer;
         setItemsContainer(itemsContainer: HTMLDivElement | any): void;
         static PAGE_NAVIGATION_MENU_ITEM_HEIGHT: number;
@@ -7478,6 +7520,7 @@ declare module "components/question-image" {
     export class QuestionImageAdornerViewModel extends QuestionAdornerViewModel {
         questionRoot: HTMLElement;
         constructor(creator: CreatorBase, surveyElement: SurveyElement, templateData: SurveyTemplateRendererTemplateData, questionRoot: HTMLElement);
+        isUploading: any;
         chooseFile(model: QuestionImageAdornerViewModel): void;
     }
 }
@@ -7492,6 +7535,7 @@ declare module "components/image-item-value" {
         itemsRoot: HTMLElement;
         private isChoosingNewFile;
         isFileDragging: boolean;
+        isUploading: any;
         constructor(creator: CreatorBase, question: QuestionSelectBase, item: ImageItemValue, templateData: any, itemsRoot: HTMLElement);
         getRootCss(): string;
         getIsNewItemSingle(): boolean;
@@ -7580,6 +7624,7 @@ declare module "components/header/logo-image" {
         constructor(creator: CreatorBase, root: HTMLDivElement);
         get allowEdit(): boolean;
         get containerCss(): string;
+        isUploading: any;
         get survey(): SurveyModel;
         private uploadFile;
         chooseFile(model: LogoImageViewModel): void;
@@ -7587,6 +7632,50 @@ declare module "components/header/logo-image" {
         get chooseLogoPlaceholder(): string;
     }
 }
+declare module "custom-questions/question-spin-editor" {
+    import { QuestionTextModel } from "survey-core";
+    export class QuestionSpinEditorModel extends QuestionTextModel {
+        unit: string;
+        private _showUnitsInEditor;
+        private parseValue;
+        private changeValue;
+        private get showUnitsInEditor();
+        private correctValue;
+        protected setNewValue(newValue: string | number): void;
+        get renderedValue(): string;
+        private increase;
+        decrease(): void;
+        private increaseTimer;
+        private decreaseTimer;
+        onUpButtonMouseDown: () => void;
+        onDownButtonMouseDown: () => void;
+        onButtonMouseUp: () => void;
+        onKeyDown: (event: KeyboardEvent) => void;
+        onInputKeyDown: (event: KeyboardEvent) => void;
+        onBeforeInput(event: InputEvent): void;
+        onFocus: (event: Event) => void;
+        onBlur: (event: Event) => void;
+        getType(): string;
+        get isInputTextUpdate(): boolean;
+    }
+}
+declare module "custom-questions/question-color" {
+    import { QuestionTextModel } from "survey-core";
+    export class QuestionColorModel extends QuestionTextModel {
+        unit: string;
+        private getCorrectedValue;
+        protected setNewValue(newValue: string): void;
+        onBeforeInput(event: InputEvent): void;
+        onColorInputChange(event: Event): void;
+        getType(): string;
+        _renderedValue: string;
+        get renderedValue(): string;
+        getSwatchStyle(): {
+            [index: string]: string;
+        };
+        get isInputTextUpdate(): boolean;
+    }
+}
 declare module "property-grid/condition" {
     import { Base, JsonObjectProperty, Question } from "survey-core";
     import { IPropertyEditorSetup, PropertyGridEditor } from "property-grid/index";
@@ -7928,6 +8017,8 @@ declare module "entries/index" {
     export * from "components/link-value";
     export * from "editorLocalization";
     export * from "json5";
+    export * from "custom-questions/question-spin-editor";
+    export * from "custom-questions/question-color";
     export * from "property-grid/index";
     export * from "property-grid/condition";
     export * from "property-grid/matrices";

package/survey-creator-core.fontless.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.9.81
+ * SurveyJS Creator v1.9.83
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -730,7 +730,8 @@ td.st-table__cell:first-of-type {
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); }
 
 .svc-logic-tab__content .svc-logic-tab__content-action--disabled .svc-text {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16)); }
+  color: var(--foreground, #161616);
+  opacity: 0.25; }
 
 .svc-logic-tab__content .sd-paneldynamic__panel-wrapper--in-row {
   margin-top: 0;
@@ -794,6 +795,9 @@ td.st-table__cell:first-of-type {
   display: block;
   padding: calc(4 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px)); }
 
+.svc-logic-tab__leave-apply-button {
+  background-color: var(--red, #e60a3e); }
+
 svc-tab-designer {
   width: 100%;
   height: 100%;
@@ -1134,7 +1138,8 @@ survey-creator,
   margin-left: calc(1 * var(--base-unit, 8px));
   line-height: calc(4 * var(--base-unit, 8px));
   font-size: calc(2 * var(--base-unit, 8px));
-  color: red; }
+  color: red;
+  display: none; }
 
 .svc-string-editor__controls {
   position: absolute;
@@ -1187,6 +1192,9 @@ survey-creator,
   background-color: var(--background, #fff);
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1), 0px 0px 0px calc(0.25 * var(--base-unit, 8px)) var(--primary, #19b394); }
 
+.svc-string-editor.svc-string-editor--error:focus-within .svc-string-editor__border {
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1), 0px 0px 0px calc(0.25 * var(--base-unit, 8px)) var(--red, #e60a3e); }
+
 .sd-rating .sd-rating__item:focus-within {
   border: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394); }
 
@@ -1422,7 +1430,8 @@ svc-page-navigator-item,
   padding: 0 calc(2.5 * var(--base-unit, 8px)) 0 calc(4.5 * var(--base-unit, 8px)); }
 
 .svc-page-navigator-item--disabled .svc-page-navigator-item__banner {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16)); }
+  color: var(--foreground, #161616);
+  opacity: 0.25; }
 
 svc-page {
   display: block; }
@@ -1580,7 +1589,8 @@ svc-question {
   box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15); }
 
 .svc-question__content .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.25)); }
+  color: var(--foreground, #161616);
+  opacity: 0.25; }
 
 .svc-question__content > div {
   overflow: visible; }
@@ -1935,6 +1945,10 @@ svc-question .sv-action-bar,
   min-width: auto;
   justify-content: flex-start; }
 
+.svc-question__content .sd-rating__item--fixed-size:focus-within {
+  width: unset;
+  padding: calc(0.5 * var(--base-unit, 8px)) calc(2.5 * var(--base-unit, 8px)); }
+
 .svc-item-value-wrapper {
   position: relative;
   display: flex;
@@ -2388,7 +2402,8 @@ svc-question .sv-action-bar,
 .svc-property-panel__group:disabled,
 .svc-property-panel__group:disabled:hover {
   background-color: var(--background, #fff);
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--foreground, #161616);
+  opacity: 0.25;
   cursor: default; }
 
 .svc-property-panel__group:hover {
@@ -2422,7 +2437,8 @@ svc-question .sv-action-bar,
 
 .svc-tabbed-menu-item--disabled {
   cursor: default;
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16)); }
+  color: var(--foreground, #161616);
+  opacity: 0.25; }
   .svc-tabbed-menu-item--disabled:hover {
     background-color: var(--background, #fff); }
 
@@ -3028,19 +3044,39 @@ button.spg-action-button--large {
 
 .spg-input:focus,
 .spg-input.spg-dropdown:focus,
-.spg-input.spg-dropdown:focus-within {
+.spg-input.spg-dropdown:focus-within,
+.spg-input-container:focus-within {
   border-color: var(--primary, #19b394);
   box-shadow: inset 0 0 0 1px var(--primary, #19b394); }
 
 .spg-input:disabled,
 .spg-input:disabled::placeholder {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16)); }
+  color: var(--foreground, #161616);
+  opacity: 0.25; }
 
 .spg-input[type="color"] {
   padding-left: 0;
   padding-right: 0;
   min-width: calc(8 * var(--base-unit, 8px)); }
 
+.spg-input__edit-button {
+  position: relative;
+  box-sizing: border-box;
+  appearance: none;
+  background: var(--background, #fff);
+  border: none;
+  width: calc(5 * var(--base-unit, 8px));
+  height: calc(5 * var(--base-unit, 8px));
+  padding: calc(1 * var(--base-unit, 8px)); }
+  .spg-input__edit-button:hover {
+    background: var(--background-dim, #f3f3f3); }
+  .spg-input__edit-button:active {
+    opacity: 0.5; }
+  .spg-input__edit-button svg {
+    height: 24px;
+    width: 24px;
+    fill: rgba(0, 0, 0, 0.45); }
+
 .spg-dropdown {
   border-radius: 0;
   display: flex;
@@ -3080,7 +3116,8 @@ button.spg-action-button--large {
 
 .spg-panel__title:disabled,
 .spg-panel__title:disabled:hover {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--foreground, #161616);
+  opacity: 0.25;
   cursor: default; }
 
 .spg-panel__title--expandable:not(.spg-panel__title[aria-expanded=true]):hover, .spg-panel__title--expandable:not(.spg-panel__title[aria-expanded=true]):focus {
@@ -3342,6 +3379,42 @@ button.spg-action-button--large {
     .spg-question-group .spg-question--location--left .spg-question__content--left .spg-input.spg-dropdown:focus-within {
       box-shadow: none; }
 
+.spg-spin-editor__buttons-container {
+  display: flex; }
+
+.spg-input-container {
+  display: flex;
+  justify-content: space-between;
+  cursor: default;
+  padding: calc(0.5 * var(--base-unit, 8px));
+  align-items: center;
+  gap: calc(0.5 * var(--base-unit, 8px)); }
+
+.spg-input-container__input {
+  outline: none;
+  border: none;
+  flex-grow: 1;
+  padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px)); }
+
+.spg-color-editor__color-input {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+  left: calc(50%);
+  top: calc(100%);
+  transform: translate(-50%, -50%); }
+
+.spg-color-editor__color-swatch {
+  border: 1px solid rgba(0, 0, 0, 0.16);
+  border-radius: 3px;
+  width: calc(4.5 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+  margin-left: calc(1.5 * var(--base-unit, 8px)); }
+
 .spg-root-modern {
   width: 100%;
   border-right: 1px solid var(--border, #d6d6d6);