From 34bf33441f7d28dd8bd99dbfa3b68cd9560e77cc Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 16 Jun 2026 15:26:15 +0300
Subject: [PATCH 001/155] New tokens: panel Fixes #11421

---
 .../src/panel.component.html                  |  2 +-
 .../survey-angular-ui/src/panel.component.ts  | 10 +++++
 .../blocks/sd-collapsed-element.scss          |  4 +-
 .../src/default-theme/blocks/sd-panel.scss    | 45 ++++++++++++++++---
 .../src/default-theme/blocks/sd-row.scss      |  8 ++--
 packages/survey-react-ui/src/panel.tsx        |  8 +++-
 packages/survey-vue3-ui/src/Panel.vue         | 12 ++++-
 7 files changed, 73 insertions(+), 16 deletions(-)

diff --git a/packages/survey-angular-ui/src/panel.component.html b/packages/survey-angular-ui/src/panel.component.html
index 1f369a34b7..e85a629ed6 100644
--- a/packages/survey-angular-ui/src/panel.component.html
+++ b/packages/survey-angular-ui/src/panel.component.html
@@ -3,7 +3,7 @@
     <div *ngIf="model.showErrorsAbovePanel && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
     <div *ngIf="model.hasDescription || model.hasTitle" [element]="model" sv-ng-element-header></div>
     <div *ngIf="!model.showErrorsAbovePanel && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
-    <div *ngIf="model.renderedIsExpanded" [style.paddingLeft]="model.innerPaddingLeft" [class]="model.cssClasses.panel.content" 
+    <div *ngIf="model.renderedIsExpanded" [style]="panelContentStyle" [class]="model.cssClasses.panel.content" 
       [attr.id]="model.contentId" [attr.role]="model.ariaRole" [attr.aria-labelledby]="model.ariaLabelledBy"[attr.aria-label]="model.ariaLabel">
       <ng-container *ngFor="let row of model.visibleRows; trackBy: trackRowBy">
         <ng-template [component]="{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }">
diff --git a/packages/survey-angular-ui/src/panel.component.ts b/packages/survey-angular-ui/src/panel.component.ts
index 045ed316b8..ee7fdd6c2d 100644
--- a/packages/survey-angular-ui/src/panel.component.ts
+++ b/packages/survey-angular-ui/src/panel.component.ts
@@ -9,6 +9,7 @@ import { AngularComponentFactory } from "./component-factory";
 export class PanelComponent extends BaseAngular<PanelModel> implements AfterViewInit {
   @Input() model!: PanelModel;
   @ViewChild("panelContainer", { static: false, read: ElementRef }) panelContainerRef!: ElementRef<HTMLDivElement>;
+  private readonly panelPaddingHorizontal = "var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500))";
   protected getModel(): PanelModel {
     return this.model;
   }
@@ -23,5 +24,14 @@ export class PanelComponent extends BaseAngular<PanelModel> implements AfterView
   public get canRender() {
     return this.model && this.model.survey && this.model.getIsContentVisible();
   }
+  public get panelContentStyle(): Record<string, string> {
+    const hasInnerPadding = !!this.model?.innerPaddingLeft;
+    return {
+      "padding-inline-start": hasInnerPadding
+        ? `calc(${this.panelPaddingHorizontal} + ${this.model.innerPaddingLeft})`
+        : this.panelPaddingHorizontal,
+      "padding-inline-end": this.panelPaddingHorizontal,
+    };
+  }
 }
 AngularComponentFactory.Instance.registerComponent("panel", PanelComponent);
\ No newline at end of file
diff --git a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
index 4f08e4e606..ae5c20ed39 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
@@ -12,8 +12,8 @@
     padding: var(--sjs2-spacing-x000) var(--sd-base-padding);
     box-sizing: border-box;
     background-color: $background;
-    margin-inline-start: calc(-1 * var(--sd-base-padding));
-    width: calc(100% + 2 * var(--sd-base-padding));
+    // margin-inline-start: calc(-1 * var(--sd-base-padding));
+    // width: calc(100% + 2 * var(--sd-base-padding));
   }
 
   &.sd-element--with-frame {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index 5874a1a673..27dcf49e84 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -3,6 +3,39 @@
 
 .sd-panel {
   position: relative;
+  padding-inline-start:  var(--sjs2-layout-component-panel-box-padding-horizontal, var(--sjs2-spacing-x000));
+  padding-inline-end: var(--sjs2-layout-component-panel-box-padding-horizontal, var(--sjs2-spacing-x000));
+  padding-top: var(--sjs2-layout-component-panel-box-padding-top, var(--sjs2-spacing-x000));
+  padding-bottom: var(--sjs2-layout-component-panel-box-padding-bottom, var(--sjs2-spacing-x000));
+  gap: var(--sjs2-layout-component-panel-box-gap-vertical, var(--sjs2-spacing-x000));
+}
+
+.sd-panel__header {
+  padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
+  gap: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));
+}
+
+.sd-panel__title {
+  padding: var(--sjs2-layout-component-panel-title-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-panel-title-padding-horizontal, var(--sjs2-spacing-x000));
+}
+
+.sd-panel__description {
+  padding-inline-start:  var(--sjs2-layout-component-panel-description-padding-horizontal, var(--sjs2-spacing-x000));
+  padding-inline-end: var(--sjs2-layout-component-panel-description-padding-horizontal, var(--sjs2-spacing-x000));
+  padding-top: var(--sjs2-layout-component-panel-description-padding-top, var(--sjs2-spacing-x000));
+  padding-bottom: var(--sjs2-layout-component-panel-description-padding-bottom, var(--sjs2-spacing-x000));
+}
+
+.sd-panel__content {
+  padding-inline-start:  var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500));
+  padding-inline-end: var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500));
+  padding-top: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x400));
+  --animation-padding-top: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x400));
+  padding-bottom: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x400));
+  row-gap: var(--sjs2-layout-component-panel-content-area-gap-horizontal, var(--sjs2-spacing-x400));
+  column-gap: var(--sjs2-layout-component-panel-content-area-gap-vertical, var(--sjs2-spacing-x500));
+  display: flex;
+  flex-direction: column;
 }
 
 .sd-panel.sd-panel--as-page {
@@ -90,9 +123,9 @@
   border: none;
   width: initial;
 }
-.sd-panel__content {
-  padding-top: var(--sd-base-padding);
-}
+// .sd-panel__content {
+//   padding-top: var(--sd-base-padding);
+// }
 
 .sd-panel.sd-element--nested {
   & > .sd-panel__content {
@@ -101,6 +134,6 @@
   }
 }
 
-.sd-panel__content {
-  --animation-padding-top: var(--sd-base-padding);
-}
+// .sd-panel__content {
+//   --animation-padding-top: var(--sd-base-padding);
+// }
diff --git a/packages/survey-core/src/default-theme/blocks/sd-row.scss b/packages/survey-core/src/default-theme/blocks/sd-row.scss
index 8390867db4..fd9eb91dd2 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-row.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-row.scss
@@ -5,7 +5,7 @@
   flex-direction: row;
   width: 100%;
   box-sizing: border-box;
-  margin-top: var(--sd-base-vertical-padding);
+  // margin-top: var(--sd-base-vertical-padding);
 }
 
 .sd-row.sd-page__row {
@@ -16,9 +16,9 @@
   margin-top: var(--sd-base-vertical-padding);
 }
 
-.sd-row:first-of-type {
-  margin-top: 0;
-}
+// .sd-row:first-of-type {
+//   margin-top: 0;
+// }
 
 .sd-page__title,
 .sd-page__description {
diff --git a/packages/survey-react-ui/src/panel.tsx b/packages/survey-react-ui/src/panel.tsx
index e60f9214da..cced6c3bf2 100644
--- a/packages/survey-react-ui/src/panel.tsx
+++ b/packages/survey-react-ui/src/panel.tsx
@@ -27,8 +27,12 @@ export class SurveyPanel extends SurveyPanelBase {
         creator={this.creator}
       />
     );
-    const style = {
-      paddingLeft: this.panel.innerPaddingLeft,
+    const panelPaddingHorizontal = "var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500))";
+    const style: React.CSSProperties = {
+      paddingInlineStart: this.panel.innerPaddingLeft
+        ? `calc(${panelPaddingHorizontal} + ${this.panel.innerPaddingLeft})`
+        : panelPaddingHorizontal,
+      paddingInlineEnd: panelPaddingHorizontal,
       display: this.panel.renderedIsExpanded ? undefined : "none",
     };
     let content: React.JSX.Element | null = null;
diff --git a/packages/survey-vue3-ui/src/Panel.vue b/packages/survey-vue3-ui/src/Panel.vue
index 2ff7553204..de13cf5e9c 100644
--- a/packages/survey-vue3-ui/src/Panel.vue
+++ b/packages/survey-vue3-ui/src/Panel.vue
@@ -24,7 +24,7 @@
     />
     <div
       :id="element.contentId"
-      :style="{ paddingLeft: element.innerPaddingLeft }"
+      :style="panelContentStyle"
       v-if="element.renderedIsExpanded"
       :class="element.cssClasses.panel.content"
       :role="element.ariaRole"
@@ -75,6 +75,16 @@ const props = defineProps<{
 }>();
 const root = ref<HTMLElement>(null as any);
 const survey = computed(() => props.element.survey);
+const panelPaddingHorizontal = "var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500))";
+const panelContentStyle = computed(() => {
+  const innerPaddingLeft = props.element.innerPaddingLeft;
+  return {
+    paddingInlineStart: innerPaddingLeft
+      ? `calc(${panelPaddingHorizontal} + ${innerPaddingLeft})`
+      : panelPaddingHorizontal,
+    paddingInlineEnd: panelPaddingHorizontal,
+  };
+});
 
 useBase(() => props.element);
 

From 1bcbfedd414e39abf0fe8cb25d130fce67c77d84 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 18 Jun 2026 10:26:36 +0300
Subject: [PATCH 002/155] New tokens: page Fixes #11421

---
 .../src/default-theme/blocks/sd-page.scss     | 40 +++++++++++++-
 .../src/default-theme/blocks/sd-row.scss      | 54 +++++++++----------
 .../survey-core/src/defaultCss/defaultCss.ts  |  2 +
 packages/survey-core/src/page.ts              |  6 +++
 packages/survey-react-ui/src/page.tsx         | 16 ++++--
 5 files changed, 87 insertions(+), 31 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 7cde022236..d88ea9c4ed 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -6,10 +6,48 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0 var(--sjs2-spacing-x500);
+  // padding: 0 var(--sjs2-spacing-x500);
   width: 100%;
   box-sizing: border-box;
   border-radius: var(--sjs2-radius-component-page);
+
+  padding-inline-start:  var(--sjs2-layout-component-page-box-padding-horizontal, var(--sjs2-spacing-x500));
+  padding-inline-end: var(--sjs2-layout-component-page-box-padding-horizontal, var(--sjs2-spacing-x500));
+  padding-top: var(--sjs2-layout-component-page-box-padding-top, var(--sjs2-spacing-x500));
+  padding-bottom: var(--sjs2-layout-component-page-box-padding-bottom, var(--sjs2-spacing-x500));
+  row-gap: var(--sjs2-layout-component-page-box-gap-horizontal, var(--sjs2-spacing-x300));
+  column-gap: var(--sjs2-layout-component-page-box-gap-vertical, var(--sjs2-spacing-x300));
+}
+
+.sd-page__header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: var(--sjs2-layout-component-page-header-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-page-header-padding-horizontal, var(--sjs2-spacing-x000));
+  gap: var(--sjs2-layout-component-page-header-gap-vertical, var(--sjs2-spacing-x050));
+}
+
+.sd-page__title {
+  padding: var(--sjs2-layout-component-page-title-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-page-title-padding-horizontal, var(--sjs2-spacing-x000));
+}
+
+.sd-page__description {
+  padding-inline-start:  var(--sjs2-layout-component-page-description-padding-horizontal, var(--sjs2-spacing-x000));
+  padding-inline-end: var(--sjs2-layout-component-page-description-padding-horizontal, var(--sjs2-spacing-x000));
+  padding-top: var(--sjs2-layout-component-page-description-padding-top, var(--sjs2-spacing-x000));
+  padding-bottom: var(--sjs2-layout-component-page-description-padding-bottom, var(--sjs2-spacing-x000));
+}
+
+.sd-page__content {
+  padding-inline-start:  var(--sjs2-layout-component-page-content-area-padding-horizontal, var(--sjs2-spacing-x000));
+  padding-inline-end: var(--sjs2-layout-component-page-content-area-padding-horizontal, var(--sjs2-spacing-x000));
+  padding-top: var(--sjs2-layout-component-page-content-area-padding-vertical, var(--sjs2-spacing-x000));
+  padding-bottom: var(--sjs2-layout-component-page-content-area-padding-vertical, var(--sjs2-spacing-x000));
+  row-gap: var(--sjs2-layout-component-page-content-area-gap-horizontal, var(--sjs2-spacing-x200));
+  column-gap: var(--sjs2-layout-component-page-content-area-gap-vertical, var(--sjs2-spacing-x200));
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
 
 .sd-root-modern--mobile .sd-page {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-row.scss b/packages/survey-core/src/default-theme/blocks/sd-row.scss
index fd9eb91dd2..baa8ddfb69 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-row.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-row.scss
@@ -8,40 +8,40 @@
   // margin-top: var(--sd-base-vertical-padding);
 }
 
-.sd-row.sd-page__row {
-  margin-top: var(--sjs2-spacing-x200);
-}
+// .sd-row.sd-page__row {
+//   margin-top: var(--sjs2-spacing-x200);
+// }
 
-.sd-page__row.sd-row--compact {
-  margin-top: var(--sd-base-vertical-padding);
-}
+// .sd-page__row.sd-row--compact {
+//   margin-top: var(--sd-base-vertical-padding);
+// }
 
 // .sd-row:first-of-type {
 //   margin-top: 0;
 // }
 
-.sd-page__title,
-.sd-page__description {
-  & ~ .sd-row.sd-page__row:not(.sd-row--compact) {
-    margin-top: var(--sjs2-spacing-x300);
-  }
-
-  & ~ .sd-page__row.sd-row--compact {
-    margin-top: var(--sd-base-vertical-padding);
-  }
-  & ~ .sd-page__row.sd-row.sd-row--enter.sd-row-delayed-enter {
-    margin-top: 0;
-  }
-}
+// .sd-page__title,
+// .sd-page__description {
+//   & ~ .sd-row.sd-page__row:not(.sd-row--compact) {
+//     margin-top: var(--sjs2-spacing-x300);
+//   }
+
+//   & ~ .sd-page__row.sd-row--compact {
+//     margin-top: var(--sd-base-vertical-padding);
+//   }
+//   & ~ .sd-page__row.sd-row.sd-row--enter.sd-row-delayed-enter {
+//     margin-top: 0;
+//   }
+// }
 
-.sd-row.sd-page__row:not(.sd-row--compact) {
-  & ~ .sd-row.sd-page__row:not(.sd-row--compact) {
-    margin-top: var(--sjs2-spacing-x200);
-  }
-  & ~ .sd-page__row.sd-row.sd-row--enter.sd-row-delayed-enter {
-    margin-top: 0;
-  }
-}
+// .sd-row.sd-page__row:not(.sd-row--compact) {
+//   & ~ .sd-row.sd-page__row:not(.sd-row--compact) {
+//     margin-top: var(--sjs2-spacing-x200);
+//   }
+//   & ~ .sd-page__row.sd-row.sd-row--enter.sd-row-delayed-enter {
+//     margin-top: 0;
+//   }
+// }
 
 .sd-row--multiple {
   row-gap: var(--sjs2-spacing-x200);
diff --git a/packages/survey-core/src/defaultCss/defaultCss.ts b/packages/survey-core/src/defaultCss/defaultCss.ts
index 0179dff8a0..98ff718d6a 100644
--- a/packages/survey-core/src/defaultCss/defaultCss.ts
+++ b/packages/survey-core/src/defaultCss/defaultCss.ts
@@ -164,9 +164,11 @@ export var defaultCss = {
   progressTextInBar: "sd-hidden",
   page: {
     root: "sd-page sd-body__page",
+    header: "sd-page__header",
     emptyHeaderRoot: "sd-page__empty-header",
     title: "sd-title sd-page__title",
     description: "sd-description sd-page__description",
+    content: "sd-page__content",
     number: "sd-page__num",
     errorsContainer: "sd-page__errbox"
   },
diff --git a/packages/survey-core/src/page.ts b/packages/survey-core/src/page.ts
index cb977d1cbb..d57982651c 100644
--- a/packages/survey-core/src/page.ts
+++ b/packages/survey-core/src/page.ts
@@ -230,6 +230,12 @@ export class PageModel extends PanelModel implements IPage {
         !((<any>this.survey).isShowProgressBarOnTop && !(<any>this.survey).isStaring))
       .toString();
   }
+  public get cssHeader(): string {
+    return this.cssClasses.page.header;
+  }
+  public get cssContent(): string {
+    return this.cssClasses.page.content;
+  }
   protected getCssError(cssClasses: any): string {
     if (this.isPanel) return super.getCssError(cssClasses);
     return new CssClassBuilder()
diff --git a/packages/survey-react-ui/src/page.tsx b/packages/survey-react-ui/src/page.tsx
index 0dd1ccca97..f7615bf27f 100644
--- a/packages/survey-react-ui/src/page.tsx
+++ b/packages/survey-react-ui/src/page.tsx
@@ -28,12 +28,22 @@ export class SurveyPage extends SurveyPanelBase {
         creator={this.creator}
       />
     );
+    var header: any = null;
+    if (this.page.hasTitle || this.page._showDescription) {
+      header = (
+        <div className={this.page.cssHeader}>
+          {title}
+          {description}
+        </div>
+      );
+    }
     return (
       <div ref={this.rootRef} className={this.page.cssRoot}>
-        {title}
-        {description}
+        {header}
         {errors}
-        {rows}
+        <div className={this.page.cssContent}>
+          {rows}
+        </div >
       </div >
     );
   }

From 32f6d193a676762cb8c0d26e4c71c31159f1205b Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 18 Jun 2026 12:51:59 +0300
Subject: [PATCH 003/155] New tokens: page Fixes #11421 left page top/bottom
 paddings 0 for a while

---
 packages/survey-core/src/default-theme/blocks/sd-page.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index d88ea9c4ed..7404b4e089 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -13,8 +13,8 @@
 
   padding-inline-start:  var(--sjs2-layout-component-page-box-padding-horizontal, var(--sjs2-spacing-x500));
   padding-inline-end: var(--sjs2-layout-component-page-box-padding-horizontal, var(--sjs2-spacing-x500));
-  padding-top: var(--sjs2-layout-component-page-box-padding-top, var(--sjs2-spacing-x500));
-  padding-bottom: var(--sjs2-layout-component-page-box-padding-bottom, var(--sjs2-spacing-x500));
+  padding-top: var(--sjs2-layout-component-page-box-padding-top, var(--sjs2-spacing-x000));
+  padding-bottom: var(--sjs2-layout-component-page-box-padding-bottom, var(--sjs2-spacing-x000));
   row-gap: var(--sjs2-layout-component-page-box-gap-horizontal, var(--sjs2-spacing-x300));
   column-gap: var(--sjs2-layout-component-page-box-gap-vertical, var(--sjs2-spacing-x300));
 }

From 904c32e58cefc30d3e4b361d974013cfaa41fe7c Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 18 Jun 2026 13:05:38 +0300
Subject: [PATCH 004/155] Page top/bottom padding - temporary fix - DON'T
 FORGET TO DISCUSS

---
 packages/survey-core/src/default-theme/base-theme.ts       | 4 ++--
 packages/survey-core/src/default-theme/blocks/sd-page.scss | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index 56e51fdc92..dcea5be8c5 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -261,8 +261,8 @@ export default {
     "--sjs2-layout-component-message-box-gap-vertical": "var(--sjs2-spacing-x100)",
     "--sjs2-layout-component-message-content-gap-horizontal": "var(--sjs2-spacing-x100)",
     "--sjs2-layout-component-page-box-padding-horizontal": "var(--sjs2-spacing-x500)",
-    "--sjs2-layout-component-page-box-padding-top": "var(--sjs2-spacing-x500)",
-    "--sjs2-layout-component-page-box-padding-bottom": "var(--sjs2-spacing-x500)",
+    "--sjs2-layout-component-page-box-padding-top": "var(--sjs2-spacing-x000)",
+    "--sjs2-layout-component-page-box-padding-bottom": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-page-box-gap-vertical": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-page-content-area-padding-horizontal": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-page-content-area-padding-vertical": "var(--sjs2-spacing-x000)",
diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 7404b4e089..d88ea9c4ed 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -13,8 +13,8 @@
 
   padding-inline-start:  var(--sjs2-layout-component-page-box-padding-horizontal, var(--sjs2-spacing-x500));
   padding-inline-end: var(--sjs2-layout-component-page-box-padding-horizontal, var(--sjs2-spacing-x500));
-  padding-top: var(--sjs2-layout-component-page-box-padding-top, var(--sjs2-spacing-x000));
-  padding-bottom: var(--sjs2-layout-component-page-box-padding-bottom, var(--sjs2-spacing-x000));
+  padding-top: var(--sjs2-layout-component-page-box-padding-top, var(--sjs2-spacing-x500));
+  padding-bottom: var(--sjs2-layout-component-page-box-padding-bottom, var(--sjs2-spacing-x500));
   row-gap: var(--sjs2-layout-component-page-box-gap-horizontal, var(--sjs2-spacing-x300));
   column-gap: var(--sjs2-layout-component-page-box-gap-vertical, var(--sjs2-spacing-x300));
 }

From 20e11d32fa1829592c0516d4c26797f37e4ca6d7 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 18 Jun 2026 14:18:09 +0300
Subject: [PATCH 005/155] Layout: page - COMPACT MODE - TO DISCUSS

---
 .../survey-core/src/default-theme/blocks/sd-page.scss     | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index d88ea9c4ed..9bd8a46742 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -87,4 +87,12 @@
       margin-bottom: 0;
     }
   }
+
+  .sd-page {
+    row-gap: var(--sd-base-vertical-padding);
+  }
+
+  .sd-page__content {
+    row-gap: var(--sd-base-vertical-padding);
+  }
 }
\ No newline at end of file

From 934ddd82bb9a4f94b83b523c50ea3edfaa9e6c41 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 18 Jun 2026 14:55:37 +0300
Subject: [PATCH 006/155] Fixed page header bottom space

---
 packages/survey-core/src/default-theme/blocks/sd-page.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 9bd8a46742..3513f2201b 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -25,6 +25,7 @@
   width: 100%;
   padding: var(--sjs2-layout-component-page-header-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-page-header-padding-horizontal, var(--sjs2-spacing-x000));
   gap: var(--sjs2-layout-component-page-header-gap-vertical, var(--sjs2-spacing-x050));
+  margin: 0 0 var(--sjs2-spacing-x050) 0;
 }
 
 .sd-page__title {
@@ -57,13 +58,13 @@
 .sd-page .sd-page__title {
   @include sjs2--typography--component--page--title;
   position: static;
-  margin: 0 0 var(--sjs2-spacing-x050) 0px;
+  // margin: 0 0 var(--sjs2-spacing-x050) 0px;
 }
 
 .sd-page .sd-page__description {
   @include sjs2--typography--component--page--description;
   position: static;
-  margin: 0 0 var(--sjs2-spacing-x050) 0;
+  // margin: 0 0 var(--sjs2-spacing-x050) 0;
 }
 
 
@@ -95,4 +96,4 @@
   .sd-page__content {
     row-gap: var(--sd-base-vertical-padding);
   }
-}
\ No newline at end of file
+}

From 6601be7896243397d3c4cdfe75b42a85ebc2d4d3 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 18 Jun 2026 15:29:03 +0300
Subject: [PATCH 007/155] Layout: panel - COMPACT MODE

---
 .../survey-core/src/default-theme/blocks/sd-panel.scss     | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index 27dcf49e84..4917665335 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -90,6 +90,13 @@
 }
 
 .sd-root--compact {
+  .sd-panel__content {
+    padding-top: var(--sjs2-spacing-x500);
+    --animation-padding-top: var(--sjs2-spacing-x500);
+    padding-bottom: var(--sjs2-spacing-x500);
+    row-gap: var(--sjs2-spacing-x400);
+  }
+
   .sd-panel--as-page {
     & > .sd-panel__errbox {
       margin: 0 0 var(--sd-base-vertical-padding) 0;

From 30ed489a988c94849b5bbe67e834ef8f2f847a54 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 18 Jun 2026 16:36:13 +0300
Subject: [PATCH 008/155] Layout: panel - paneldynamic

---
 .../default-theme/blocks/sd-paneldynamic.scss | 47 +++++++++++--------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 739009aac6..9394c8e72a 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -29,19 +29,33 @@
     }
 }
 
+.sd-paneldynamic__header {
+  padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
+  gap: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));
+}
+
+.sd-paneldynamic__footer {
+    clear: both;
+    padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
+    gap: var(--sjs2-layout-component-panel-footer-gap-vertical, var(--sjs2-spacing-x050));
+    position: relative;
+
+    .sd-paneldynamic__progress-text,
+    .sd-paneldynamic__progress--bottom {
+        display: initial;
+    }
+}
+
 .sd-question--readonly,
 .sd-question--preview {
     .sd-paneldynamic .sd-question__placeholder {
         color: $foreground;
     }
 }
-.sd-paneldynamic__separator {
-    display: none;
-}
-.sd-paneldynamic__panel-wrapper {
-    box-sizing: border-box;
-    padding-bottom: calc(1 * var(--sd-base-padding));
-}
+// .sd-paneldynamic__panel-wrapper {
+//     box-sizing: border-box;
+//     padding-bottom: calc(1 * var(--sd-base-padding));
+// }
 
 .sd-paneldynamic__panel-wrapper:after {
     display: table;
@@ -49,11 +63,15 @@
     content: " ";
 }
 
+.sd-paneldynamic__separator {
+    display: none;
+}
 .sd-paneldynamic__footer .sd-paneldynamic__separator,
 .sd-paneldynamic__panel-wrapper--list ~ .sd-paneldynamic__panel-wrapper--list:before {
     content: " ";
     display: block;
     position: absolute;
+    top: 0;
     left: 0;
     right: 0;
     margin: 0;
@@ -79,19 +97,10 @@
     }
 }
 
-.sd-paneldynamic__footer {
-    clear: both;
-
-    .sd-paneldynamic__progress-text,
-    .sd-paneldynamic__progress--bottom {
-        display: initial;
-    }
-}
-
 .sd-paneldynamic__buttons-container {
     display: flex;
     align-items: center;
-    padding: calc(var(--sd-base-vertical-padding) - var(--sjs2-spacing-x100)) 0;
+    // padding: calc(var(--sd-base-vertical-padding) - var(--sjs2-spacing-x100)) 0;
 }
 
 .sd-paneldynamic__progress-text {
@@ -132,7 +141,7 @@
 .sd-paneldynamic__panel-footer {
     border-top: none;
     position: relative;
-    top: calc(0.5 * var(--sd-base-vertical-padding));
+    // top: calc(0.5 * var(--sd-base-vertical-padding));
     margin-right: calc(var(--sjs2-spacing-negative-x150) + var(--sjs2-spacing-negative-x025));
     justify-content: flex-end;
 }
@@ -270,7 +279,7 @@
 }
 
 .sd-question--paneldynamic.sd-element--with-frame {
-    padding-bottom: 0;
+    padding: 0;
 }
 
 .sd-paneldynamic__panels-container {

From dfe7da6b08cb0dccf9da9af1a7553433f44342cb Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 18 Jun 2026 16:41:42 +0300
Subject: [PATCH 009/155] Layout: panel - fixed errors position in page

---
 packages/survey-react-ui/src/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-react-ui/src/page.tsx b/packages/survey-react-ui/src/page.tsx
index f7615bf27f..18941ce435 100644
--- a/packages/survey-react-ui/src/page.tsx
+++ b/packages/survey-react-ui/src/page.tsx
@@ -40,8 +40,8 @@ export class SurveyPage extends SurveyPanelBase {
     return (
       <div ref={this.rootRef} className={this.page.cssRoot}>
         {header}
-        {errors}
         <div className={this.page.cssContent}>
+          {errors}
           {rows}
         </div >
       </div >

From ae297bcd41ae9671aedb8a03c467a5c09024ecdc Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 18 Jun 2026 17:31:09 +0300
Subject: [PATCH 010/155] Layout: panel - fixed vertical spacings

---
 .../src/default-theme/base-theme.ts           |  2 +-
 .../src/default-theme/blocks/sd-panel.scss    | 22 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index dcea5be8c5..d49c5c15f0 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -295,7 +295,7 @@ export default {
     "--sjs2-layout-component-panel-box-padding-bottom": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-box-gap-vertical": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-content-area-padding-horizontal": "var(--sjs2-spacing-x500)",
-    "--sjs2-layout-component-panel-content-area-padding-vertical": "var(--sjs2-spacing-x400)",
+    "--sjs2-layout-component-panel-content-area-padding-vertical": "var(--sjs2-spacing-x500)",
     "--sjs2-layout-component-panel-content-area-gap-horizontal": "var(--sjs2-spacing-x500)",
     "--sjs2-layout-component-panel-content-area-gap-vertical": "var(--sjs2-spacing-x400)",
     "--sjs2-layout-component-panel-header-padding-horizontal": "var(--sjs2-layout-component-panel-content-area-padding-horizontal)",
diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index 4917665335..d7eb8730a8 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -29,11 +29,11 @@
 .sd-panel__content {
   padding-inline-start:  var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500));
   padding-inline-end: var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500));
-  padding-top: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x400));
-  --animation-padding-top: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x400));
-  padding-bottom: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x400));
-  row-gap: var(--sjs2-layout-component-panel-content-area-gap-horizontal, var(--sjs2-spacing-x400));
-  column-gap: var(--sjs2-layout-component-panel-content-area-gap-vertical, var(--sjs2-spacing-x500));
+  padding-top: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x500));
+  --animation-padding-top: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x500));
+  padding-bottom: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x500));
+  row-gap: var(--sjs2-layout-component-panel-content-area-gap-vertical, var(--sjs2-spacing-x400));
+  column-gap: var(--sjs2-layout-component-panel-content-area-gap-horizontal, var(--sjs2-spacing-x500));
   display: flex;
   flex-direction: column;
 }
@@ -90,12 +90,12 @@
 }
 
 .sd-root--compact {
-  .sd-panel__content {
-    padding-top: var(--sjs2-spacing-x500);
-    --animation-padding-top: var(--sjs2-spacing-x500);
-    padding-bottom: var(--sjs2-spacing-x500);
-    row-gap: var(--sjs2-spacing-x400);
-  }
+  // .sd-panel__content {
+  //   padding-top: var(--sjs2-spacing-x500);
+  //   --animation-padding-top: var(--sjs2-spacing-x500);
+  //   padding-bottom: var(--sjs2-spacing-x500);
+  //   row-gap: var(--sjs2-spacing-x400);
+  // }
 
   .sd-panel--as-page {
     & > .sd-panel__errbox {

From f9210394821674fab5c36816b208b7699508e457 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 18 Jun 2026 18:18:08 +0300
Subject: [PATCH 011/155] Layout: panel - "panel-as-page" mode

---
 .../survey-core/src/default-theme/blocks/sd-panel.scss    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index d7eb8730a8..412ed96fae 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -50,7 +50,7 @@
     .sd-panel__title {
       @include sjs2--typography--component--page--title;
       position: static;
-      margin: 0 0 var(--sjs2-spacing-x050) 0px;
+      // margin: 0 0 var(--sjs2-spacing-x050) 0px;
 
       span {
         font-family: inherit;
@@ -71,7 +71,7 @@
     .sd-panel__description {
       @include sjs2--typography--component--page--description;
       position: static;
-      margin: 0 0 var(--sjs2-spacing-x050) 0;
+      // margin: 0 0 var(--sjs2-spacing-x050) 0;
     }
 
     .sd-panel__required-text {
@@ -85,7 +85,7 @@
   }
 
   & > .sd-panel__content {
-    padding-top: 0;
+    padding: 0;
   }
 }
 
@@ -125,7 +125,7 @@
   padding-top: calc(0.5 * var(--sd-base-vertical-padding));
 }
 .sd-panel--as-page .sd-panel__footer {
-  padding: var(--sjs2-spacing-x400) 0 0;
+  padding: 0;
   margin: 0;
   border: none;
   width: initial;

From c0bd94c9764c8b2e2c09d685c31dd015093d85a9 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 19 Jun 2026 11:21:43 +0300
Subject: [PATCH 012/155] Layout: panel - try to fix scr tests in ci

---
 packages/survey-react-ui/src/panel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/survey-react-ui/src/panel.tsx b/packages/survey-react-ui/src/panel.tsx
index cced6c3bf2..a5028d4743 100644
--- a/packages/survey-react-ui/src/panel.tsx
+++ b/packages/survey-react-ui/src/panel.tsx
@@ -31,8 +31,8 @@ export class SurveyPanel extends SurveyPanelBase {
     const style: React.CSSProperties = {
       paddingInlineStart: this.panel.innerPaddingLeft
         ? `calc(${panelPaddingHorizontal} + ${this.panel.innerPaddingLeft})`
-        : panelPaddingHorizontal,
-      paddingInlineEnd: panelPaddingHorizontal,
+        : this.panel.innerPaddingLeft,
+      // paddingInlineEnd: this.panel.innerPaddingLeft ? panelPaddingHorizontal : undefined,
       display: this.panel.renderedIsExpanded ? undefined : "none",
     };
     let content: React.JSX.Element | null = null;

From f13b7b5041e3fe16769741266d96a62f559fe6d1 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 19 Jun 2026 12:05:12 +0300
Subject: [PATCH 013/155] Layout: panel - get rid of extra bottom padding in
 paneldynamic panel in case of empty action container

---
 packages/survey-core/src/default-theme/base-theme.ts       | 2 +-
 .../src/default-theme/blocks/sd-paneldynamic.scss          | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index 05eff7e893..052ba945d6 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -295,7 +295,7 @@ export default {
     "--sjs2-layout-component-panel-box-padding-bottom": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-box-gap-vertical": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-content-area-padding-horizontal": "var(--sjs2-spacing-x500)",
-    "--sjs2-layout-component-panel-content-area-padding-vertical": "var(--sjs2-spacing-x500)",
+    "--sjs2-layout-component-panel-content-area-padding-vertical": "var(--sjs2-spacing-x500)", // TODO: This is a temporary fix to make the panel content area padding match the design spec. The correct value should be var(--sjs2-spacing-x400) but this will cause a breaking change in the UI. We will need to update the design spec to match the current implementation.
     "--sjs2-layout-component-panel-content-area-padding-top": "var(--sjs2-spacing-x400)",
     "--sjs2-layout-component-panel-content-area-padding-bottom": "var(--sjs2-spacing-x400)",
     "--sjs2-layout-component-panel-content-area-gap-horizontal": "var(--sjs2-spacing-x500)",
diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 9394c8e72a..5ff3f1ec65 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -144,13 +144,16 @@
     // top: calc(0.5 * var(--sd-base-vertical-padding));
     margin-right: calc(var(--sjs2-spacing-negative-x150) + var(--sjs2-spacing-negative-x025));
     justify-content: flex-end;
-}
 
-.sd-paneldynamic__panel-footer {
+    .sd-action-bar--empty {
+        display: none;
+    }
+
     .sd-action-bar__item:not(.sd-action-bar__item--hidden) {
         margin-bottom: var(--sjs2-spacing-negative-x100);
     }
 }
+
 .sd-paneldynamic__tabs-container {
     padding-top: var(--sd-base-padding);
     .sd-tabs-toolbar {

From 5b35587e761d00a5b2e5cb6a9791d88f4514f764 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 19 Jun 2026 13:11:40 +0300
Subject: [PATCH 014/155] Layout: panel - fixed extra footer spacings in
 dynamic panels

---
 .../survey-core/src/default-theme/blocks/sd-paneldynamic.scss   | 2 +-
 packages/survey-react-ui/src/reactquestion_paneldynamic.tsx     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 5ff3f1ec65..d67aaba1f6 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -145,7 +145,7 @@
     margin-right: calc(var(--sjs2-spacing-negative-x150) + var(--sjs2-spacing-negative-x025));
     justify-content: flex-end;
 
-    .sd-action-bar--empty {
+    &.sd-action-bar--empty {
         display: none;
     }
 
diff --git a/packages/survey-react-ui/src/reactquestion_paneldynamic.tsx b/packages/survey-react-ui/src/reactquestion_paneldynamic.tsx
index d8a1eb3e1f..2eaf056f45 100644
--- a/packages/survey-react-ui/src/reactquestion_paneldynamic.tsx
+++ b/packages/survey-react-ui/src/reactquestion_paneldynamic.tsx
@@ -87,6 +87,7 @@ export class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
   protected renderNavigator(): React.JSX.Element | null {
     if (!this.question.showNavigation) return null;
     const range: React.JSX.Element | null = this.question.isRangeShowing && this.question.isProgressBottomShowing ? this.renderRange() : null;
+    if (!range && !this.question.showFooterToolbar) return null;
     return (<div className={this.question.cssClasses.footer}>
       <hr className={this.question.cssClasses.separator} />
       {range}

From 093e5b1e7b7828bedb2f17ce9e433273730db64b Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 19 Jun 2026 14:59:37 +0300
Subject: [PATCH 015/155] Layout: panel - Removed extra paddings

---
 .../src/default-theme/blocks/sd-complex-element.scss      | 4 ++--
 .../src/default-theme/blocks/sd-paneldynamic.scss         | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
index 5e949da91d..5682849123 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
@@ -43,8 +43,8 @@
   border: 1px solid $border-light;
   border-radius: var(--sjs2-radius-component-panel-nested);
   box-sizing: border-box;
-  padding-left: var(--sd-base-padding);
-  padding-right: var(--sd-base-padding);
+  // padding-left: var(--sd-base-padding);
+  // padding-right: var(--sd-base-padding);
 
   & > .sd-element__header--location-top {
     padding-top: calc(0.5 * var(--sd-base-vertical-padding));
diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index d67aaba1f6..6f625e1e95 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -288,10 +288,10 @@
 .sd-paneldynamic__panels-container {
     position: relative;
     overflow: hidden;
-    margin-left: calc(-1 * var(--sd-base-padding));
-    padding-left: var(--sd-base-padding);
-    margin-right: calc(-1 * var(--sd-base-padding));
-    padding-right: var(--sd-base-padding);
+    // margin-left: calc(-1 * var(--sd-base-padding));
+    // padding-left: var(--sd-base-padding);
+    // margin-right: calc(-1 * var(--sd-base-padding));
+    // padding-right: var(--sd-base-padding);
 }
 .sd-paneldynamic__panel-wrapper {
     box-sizing: border-box;

From ffb9c627f38a30d6e91c99ec8a9fd4ed383818ea Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 19 Jun 2026 16:12:00 +0300
Subject: [PATCH 016/155] Layout: panels: fixed nested collapsed element title
 horizontal paddings

---
 .../src/default-theme/blocks/sd-collapsed-element.scss          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
index ae5c20ed39..e5016eefa0 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
@@ -9,7 +9,7 @@
 
 .sd-element--collapsed {
   &>.sd-element__header {
-    padding: var(--sjs2-spacing-x000) var(--sd-base-padding);
+    // padding: var(--sjs2-spacing-x000) var(--sd-base-padding);
     box-sizing: border-box;
     background-color: $background;
     // margin-inline-start: calc(-1 * var(--sd-base-padding));

From 186ef43c357853c021161f603609c74e76d657df Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 19 Jun 2026 16:12:34 +0300
Subject: [PATCH 017/155] Layout: panel - Fixed dynamic panel footer vertical
 paddings

---
 .../survey-core/src/default-theme/blocks/sd-paneldynamic.scss  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 6f625e1e95..7d70d3772e 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -36,7 +36,7 @@
 
 .sd-paneldynamic__footer {
     clear: both;
-    padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
+    padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x300)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
     gap: var(--sjs2-layout-component-panel-footer-gap-vertical, var(--sjs2-spacing-x050));
     position: relative;
 
@@ -295,6 +295,7 @@
 }
 .sd-paneldynamic__panel-wrapper {
     box-sizing: border-box;
+    position: relative;
 }
 
 @keyframes movePanel {

From 43c0ddf41425a2877fa3f5bf6f4c37cf17866d5d Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 19 Jun 2026 16:51:30 +0300
Subject: [PATCH 018/155] New tokens: panel - TO DISCUSS -  PanelDynamic inner
 panel footer Fixes #11421

---
 .../src/default-theme/blocks/sd-paneldynamic.scss            | 3 +++
 packages/survey-react-ui/src/panel.tsx                       | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 7d70d3772e..e5030d90ab 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -142,8 +142,11 @@
     border-top: none;
     position: relative;
     // top: calc(0.5 * var(--sd-base-vertical-padding));
+    padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x300)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
     margin-right: calc(var(--sjs2-spacing-negative-x150) + var(--sjs2-spacing-negative-x025));
     justify-content: flex-end;
+    padding-top: 0;
+    margin-top: calc(var(--sjs2-spacing-negative-x300));
 
     &.sd-action-bar--empty {
         display: none;
diff --git a/packages/survey-react-ui/src/panel.tsx b/packages/survey-react-ui/src/panel.tsx
index a5028d4743..d70629e8d2 100644
--- a/packages/survey-react-ui/src/panel.tsx
+++ b/packages/survey-react-ui/src/panel.tsx
@@ -36,11 +36,13 @@ export class SurveyPanel extends SurveyPanelBase {
       display: this.panel.renderedIsExpanded ? undefined : "none",
     };
     let content: React.JSX.Element | null = null;
+    let bottom: React.JSX.Element | null = null;
     if (this.panel.renderedIsExpanded) {
       // this.hasBeenExpanded = true;
       const rows: React.JSX.Element[] = this.renderRows(this.panelBase.cssClasses);
       const className: string = this.panelBase.cssClasses.panel.content;
       content = this.renderContent(style, rows, className);
+      bottom = this.renderBottom();
     }
     const focusIn = () => {
       if (this.panelBase) (this.panelBase as PanelModel).focusIn();
@@ -57,6 +59,7 @@ export class SurveyPanel extends SurveyPanelBase {
         {header}
         {this.panel.showErrorsAbovePanel ? null : errors}
         {content}
+        {bottom}
       </div>
     );
   }
@@ -75,7 +78,6 @@ export class SurveyPanel extends SurveyPanelBase {
     return wrapper ?? element;
   }
   protected renderContent(style: any, rows: React.JSX.Element[], className: string): React.JSX.Element {
-    const bottom: React.JSX.Element | null = this.renderBottom();
     return (
       <div
         style={style} className={className}
@@ -84,7 +86,6 @@ export class SurveyPanel extends SurveyPanelBase {
         aria-labelledby={this.panel.ariaLabelledBy}
         aria-label={this.panel.ariaLabel}>
         {rows}
-        {bottom}
       </div>
     );
   }

From 368b892e96694bd77e93595a1403bf52ee2444f5 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 22 Jun 2026 10:24:04 +0300
Subject: [PATCH 019/155] Layout: panel - fixed paneldynamic row divided

---
 .../survey-core/src/default-theme/blocks/sd-paneldynamic.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index e5030d90ab..c9404a1057 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -169,8 +169,8 @@
         position: relative;
         background: $border-light;
         bottom: 0;
-        inset-inline-start: calc(-1 * var(--sd-base-padding));
-        width: calc(100% + 2 * var(--sd-base-padding));
+        // inset-inline-start: calc(-1 * var(--sd-base-padding));
+        // width: calc(100% + 2 * var(--sd-base-padding));
     }
 }
 .sd-paneldynamic__tabs-container--with-header {

From ccca9fbd9436564476362c09720066ce2a6d731e Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 22 Jun 2026 10:24:40 +0300
Subject: [PATCH 020/155] Layout: page - Try to fix page rows gap in compact
 mode

---
 packages/survey-core/src/default-theme/blocks/sd-page.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 3513f2201b..84da1d706e 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -89,9 +89,9 @@
     }
   }
 
-  .sd-page {
-    row-gap: var(--sd-base-vertical-padding);
-  }
+  // .sd-page {
+  //   row-gap: var(--sd-base-vertical-padding);
+  // }
 
   .sd-page__content {
     row-gap: var(--sd-base-vertical-padding);

From 8e4368241f56a5ce70b2ab72592800f91e91eb15 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 22 Jun 2026 10:53:33 +0300
Subject: [PATCH 021/155] Reverted page row gap in compact mode

---
 packages/survey-core/src/default-theme/blocks/sd-page.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 84da1d706e..3513f2201b 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -89,9 +89,9 @@
     }
   }
 
-  // .sd-page {
-  //   row-gap: var(--sd-base-vertical-padding);
-  // }
+  .sd-page {
+    row-gap: var(--sd-base-vertical-padding);
+  }
 
   .sd-page__content {
     row-gap: var(--sd-base-vertical-padding);

From b006ee98ba23fe2dc32794b37b42a91d99ed5434 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 22 Jun 2026 11:40:43 +0300
Subject: [PATCH 022/155] New tokens: panel - Fixed nested table panel paddings
 Fixes #11421

---
 .../src/default-theme/blocks/sd-table.scss        | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index db277d32f4..4c54e3d021 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -295,8 +295,11 @@
 
 .sd-table__cell--detail-panel {
   border-top: calc(var(--sjs2-base-unit-border-width) * 8) solid transparent;
-  padding: var(--sjs2-spacing-x300) var(--sjs2-spacing-x100) var(--sjs2-spacing-x400);
+  padding: var(--sjs2-spacing-x400) var(--sjs2-spacing-x100);
   border-bottom: calc(var(--sjs2-base-unit-border-width) * 8) solid transparent;
+  .sd-panel__content {
+    padding: 0;
+  }
 }
 
 .sd-table__cell--actions,
@@ -757,11 +760,11 @@
   @include table_responsive();
 }
 
-.sd-table__cell--detail-panel {
-  .sd-panel__content {
-    padding-top: var(--sjs2-spacing-x100);
-  }
-}
+// .sd-table__cell--detail-panel {
+//   .sd-panel__content {
+//     padding-top: var(--sjs2-spacing-x100);
+//   }
+// }
 
 .sd-table__question-wrapper {
   .sd-boolean-root {

From adb1e31bd316f0a36652c8586aedc7258518398b Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 22 Jun 2026 11:53:46 +0300
Subject: [PATCH 023/155] Layout: panel - try to remove redundant negative
 margins

---
 .../survey-core/src/default-theme/blocks/sd-question.scss | 8 ++++----
 .../survey-core/src/default-theme/blocks/sd-table.scss    | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index ddfa962684..6114290254 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -128,11 +128,11 @@
   }
 
   &>.sd-element__erbox {
-    margin-left: calc(-1 * var(--sd-base-padding));
-    margin-right: calc(-1 * var(--sd-base-padding));
-    width: calc(100% + 2 * var(--sd-base-padding));
+    // margin-left: calc(-1 * var(--sd-base-padding));
+    // margin-right: calc(-1 * var(--sd-base-padding));
+    // width: calc(100% + 2 * var(--sd-base-padding));
     position: sticky;
-    left: calc(-1 * var(--sd-base-padding));
+    // left: calc(-1 * var(--sd-base-padding));
   }
 }
 
diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 4c54e3d021..ba7a533ac4 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -470,10 +470,10 @@
 
   &.sd-element--nested > .sd-question__content,
   &:not(.sd-element--with-frame):not(.sd-element--nested) {
-    padding-right: var(--sd-base-padding);
-    margin-right: calc(-1 * var(--sd-base-padding));
-    padding-left: var(--sd-base-padding);
-    margin-left: calc(-1 * var(--sd-base-padding));
+    // padding-right: var(--sd-base-padding);
+    // margin-right: calc(-1 * var(--sd-base-padding));
+    // padding-left: var(--sd-base-padding);
+    // margin-left: calc(-1 * var(--sd-base-padding));
     box-sizing: content-box;
   }
 }

From ccf515a6ed66b92d16aa412a8e644d6a4dcdc049 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 22 Jun 2026 12:08:50 +0300
Subject: [PATCH 024/155] Layout: panel - reverted nested element in table
 paddings hack

---
 .../survey-core/src/default-theme/blocks/sd-table.scss    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index ba7a533ac4..4c54e3d021 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -470,10 +470,10 @@
 
   &.sd-element--nested > .sd-question__content,
   &:not(.sd-element--with-frame):not(.sd-element--nested) {
-    // padding-right: var(--sd-base-padding);
-    // margin-right: calc(-1 * var(--sd-base-padding));
-    // padding-left: var(--sd-base-padding);
-    // margin-left: calc(-1 * var(--sd-base-padding));
+    padding-right: var(--sd-base-padding);
+    margin-right: calc(-1 * var(--sd-base-padding));
+    padding-left: var(--sd-base-padding);
+    margin-left: calc(-1 * var(--sd-base-padding));
     box-sizing: content-box;
   }
 }

From 1ce233d9ee13c633c1469a61f3546d8252ada2b5 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 22 Jun 2026 12:20:18 +0300
Subject: [PATCH 025/155] Layout: panel - REVERT - try to remove redundant
 negative margins

---
 .../survey-core/src/default-theme/blocks/sd-question.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 6114290254..ddfa962684 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -128,11 +128,11 @@
   }
 
   &>.sd-element__erbox {
-    // margin-left: calc(-1 * var(--sd-base-padding));
-    // margin-right: calc(-1 * var(--sd-base-padding));
-    // width: calc(100% + 2 * var(--sd-base-padding));
+    margin-left: calc(-1 * var(--sd-base-padding));
+    margin-right: calc(-1 * var(--sd-base-padding));
+    width: calc(100% + 2 * var(--sd-base-padding));
     position: sticky;
-    // left: calc(-1 * var(--sd-base-padding));
+    left: calc(-1 * var(--sd-base-padding));
   }
 }
 

From 9253e90b219e2ca609302169862e8b96d5df6946 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 22 Jun 2026 13:45:44 +0300
Subject: [PATCH 026/155] Layout: panel - panel footer spacings

---
 .../src/default-theme/blocks/sd-panel.scss        | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index b9b750bc08..07e0757148 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -138,14 +138,17 @@
 
 .sd-panel__footer {
   box-sizing: border-box;
-  padding-left: calc(var(--sd-base-padding) + var(--sjs2-spacing-negative-x150) + var(--sjs2-spacing-negative-x025));
-  margin-left: calc(-1 * var(--sd-base-padding));
-  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));
+  // padding-left: calc(var(--sd-base-padding) + var(--sjs2-spacing-negative-x150) + var(--sjs2-spacing-negative-x025));
+  // margin-left: calc(-1 * var(--sd-base-padding));
+  // 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));
+  padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x200)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
   border-top: 1px solid $border-light;
-  padding-top: calc(0.5 * var(--sd-base-vertical-padding));
+  margin-top: calc(-1 * var(--sjs2-spacing-x300));
+  padding-inline-start: calc(var(--sjs2-layout-component-panel-content-area-padding-horizontal) - 1.75 * var(--sjs2-spacing-x100));
 }
+
 .sd-panel--as-page .sd-panel__footer {
   padding: 0;
   margin: 0;

From 7280ed75523056b36e64a9d543a78e7fe257c2ba Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 22 Jun 2026 15:14:48 +0300
Subject: [PATCH 027/155] New tokens: panel - Added styles for mobile mode
 Fixes #11421

---
 .../src/default-theme/blocks/sd-panel.scss         | 10 ++++++++++
 .../src/default-theme/blocks/sd-paneldynamic.scss  | 14 ++++++++++++++
 .../src/default-theme/blocks/sd-question.scss      |  8 ++++++++
 3 files changed, 32 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index 07e0757148..f3aa9a231b 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -38,6 +38,16 @@
   flex-direction: column;
 }
 
+.sd-root-modern--mobile {
+ .sd-panel__header {
+    padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-spacing-x300);
+  }
+ .sd-panel__content {
+    padding: var(--sjs2-spacing-x300);
+    gap: var(--sjs2-spacing-x200);
+  }
+}
+
 .sd-panel.sd-panel--as-page {
   & > .sd-panel__header.sd-panel__header {
     padding-top: 0;
diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index c9404a1057..8b231dec1b 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -46,6 +46,20 @@
     }
 }
 
+.sd-root-modern--mobile {
+    .sd-paneldynamic__header {
+        padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-spacing-x300));
+    }
+    .sd-paneldynamic__footer {
+        padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x100)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-spacing-x300));
+    }
+    .sd-paneldynamic__panel-footer {
+        padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x200)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-spacing-x200));
+        margin-right: calc(1.5 * var(--sjs2-spacing-negative-x050));
+        margin-top: calc(var(--sjs2-spacing-negative-x400));
+    }
+}
+
 .sd-question--readonly,
 .sd-question--preview {
     .sd-paneldynamic .sd-question__placeholder {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index ddfa962684..6aa84bd85c 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -180,6 +180,14 @@
   gap: var(--sjs2-spacing-x100);
   color: $foreground;
   white-space: normal;
+  padding: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x500)) var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500));
+  padding-top: 0;
+}
+.sd-root-modern--mobile {
+  .sd-question__comment-area {
+    padding: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x300)) var(--sjs2-spacing-x300);
+    padding-top: 0;
+  }
 }
 
 .sd-question__placeholder {

From a284083f26148258d66766e7a7e6027fc7e3d959 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 22 Jun 2026 15:38:29 +0300
Subject: [PATCH 028/155] Layout: panel - fix comment area spacings for
 paneldynamic only

---
 .../src/default-theme/blocks/sd-paneldynamic.scss    | 12 ++++++++++++
 .../src/default-theme/blocks/sd-question.scss        |  8 --------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 8b231dec1b..ba0a303344 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -29,6 +29,18 @@
     }
 }
 
+.sd-paneldynamic ~ .sd-question__comment-area {
+  padding: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x500)) var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500));
+  padding-top: 0;
+}
+.sd-root-modern--mobile {
+  .sd-paneldynamic ~ .sd-question__comment-area {
+    padding: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x300)) var(--sjs2-spacing-x300);
+    padding-top: 0;
+  }
+}
+
+
 .sd-paneldynamic__header {
   padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
   gap: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 6aa84bd85c..ddfa962684 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -180,14 +180,6 @@
   gap: var(--sjs2-spacing-x100);
   color: $foreground;
   white-space: normal;
-  padding: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x500)) var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500));
-  padding-top: 0;
-}
-.sd-root-modern--mobile {
-  .sd-question__comment-area {
-    padding: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x300)) var(--sjs2-spacing-x300);
-    padding-top: 0;
-  }
 }
 
 .sd-question__placeholder {

From da63185ef64516cf2ca97491732b5680b01b0aef Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 22 Jun 2026 16:39:32 +0300
Subject: [PATCH 029/155] Layout: paneldynamic header responsivity fix

---
 .../src/default-theme/blocks/sd-paneldynamic.scss | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index ba0a303344..965f5136ea 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -185,9 +185,14 @@
 
 .sd-paneldynamic__tabs-container {
     padding-top: var(--sd-base-padding);
+    padding-left: var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
+    padding-right: var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
     .sd-tabs-toolbar {
         margin-bottom: -1px;
     }
+}
+.sd-paneldynamic__tabs-container--with-header {
+    padding-top: var(--sjs2-spacing-x300);
     &:after {
         content: " ";
         display: block;
@@ -197,11 +202,17 @@
         bottom: 0;
         // inset-inline-start: calc(-1 * var(--sd-base-padding));
         // width: calc(100% + 2 * var(--sd-base-padding));
+        margin: 0 calc(-1 * var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal)));
     }
 }
-.sd-paneldynamic__tabs-container--with-header {
-    padding-top: var(--sjs2-spacing-x300);
+.sd-root-modern--mobile {
+    .sd-paneldynamic__tabs-container--with-header {
+        &:after {
+            margin: 0 var(--sjs2-spacing-negative-x300);
+        }
+    }
 }
+
 .sd-tabs-toolbar.sd-action-bar {
     align-items: flex-start;
     z-index: 1;

From 2cf80ed6531b80e328f229b85500fe2e9d08fdd4 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@users.noreply.github.com>
Date: Tue, 23 Jun 2026 15:38:04 +0300
Subject: [PATCH 030/155] Update pr.yml

---
 azure-pipelines/V3/pr.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/azure-pipelines/V3/pr.yml b/azure-pipelines/V3/pr.yml
index fcf97417b9..93254a0a05 100644
--- a/azure-pipelines/V3/pr.yml
+++ b/azure-pipelines/V3/pr.yml
@@ -36,6 +36,7 @@ pr:
   branches:
     include:
       - V3
+      - tsv2013/issue11421
 
 pool:
   name: main-selfhosted
@@ -350,4 +351,4 @@ stages:
     jobs:
       - template: templates/pdf/test.yml
         parameters:
-          checkout: PDF
\ No newline at end of file
+          checkout: PDF

From 5b233b036ff12e5e1680d02aadc3b7658ab73368 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@users.noreply.github.com>
Date: Tue, 23 Jun 2026 15:42:47 +0300
Subject: [PATCH 031/155] Update pr.yml

---
 azure-pipelines/V3/pr.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/azure-pipelines/V3/pr.yml b/azure-pipelines/V3/pr.yml
index 93254a0a05..1aa625d6c4 100644
--- a/azure-pipelines/V3/pr.yml
+++ b/azure-pipelines/V3/pr.yml
@@ -36,7 +36,6 @@ pr:
   branches:
     include:
       - V3
-      - tsv2013/issue11421
 
 pool:
   name: main-selfhosted

From c51ae3340cd91860db84ae7c9f298884abb86471 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@users.noreply.github.com>
Date: Tue, 23 Jun 2026 15:43:08 +0300
Subject: [PATCH 032/155] Layout: paneldynamic - apply header paddings
 horizontal paddings for elements with frame only (#11482)

* Layout: paneldynamic - apply header paddings horizontal paddings for elements with frame only

* Update pr.yml

* Trigger CI

* Update pr.yml

* Trigger CI

---------

Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
---
 .../src/default-theme/base-theme.ts           |  6 +--
 .../blocks/sd-collapsed-element.scss          |  4 +-
 .../blocks/sd-complex-element.scss            | 18 ++++----
 .../src/default-theme/blocks/sd-element.scss  |  8 ++--
 .../default-theme/blocks/sd-paneldynamic.scss | 43 +++++++++++++------
 .../src/default-theme/blocks/sd-question.scss | 41 ++++++++++++------
 6 files changed, 75 insertions(+), 45 deletions(-)

diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index 052ba945d6..e3e7711998 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -377,9 +377,9 @@ export default {
     "--sjs2-layout-component-label-box-padding-vertical": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-label-box-gap-vertical": "var(--sjs2-spacing-x100)",
     "--sjs2-layout-component-label-content-gap-horizontal": "var(--sjs2-spacing-x050)",
-    "--sjs2-layout-component-question-header-padding-left": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-header-padding-right": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-header-padding-top": "var(--sjs2-spacing-x000)",
+    "--sjs2-layout-component-question-header-padding-left": "var(--sjs2-spacing-x500)",
+    "--sjs2-layout-component-question-header-padding-right": "var(--sjs2-spacing-x500)",
+    "--sjs2-layout-component-question-header-padding-top": "var(--sjs2-spacing-x400)",
     "--sjs2-layout-component-question-header-padding-bottom": "var(--sjs2-spacing-x200)",
     "--sjs2-layout-component-question-header-gap-horizontal": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-question-header-gap-vertical": "var(--sjs2-spacing-x050)",
diff --git a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
index e5016eefa0..c0603e636f 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
@@ -17,8 +17,8 @@
   }
 
   &.sd-element--with-frame {
-    padding-top: 0;
-    padding-bottom: 0;
+    // padding-top: 0;
+    // padding-bottom: 0;
 
     &>.sd-element__header {
       padding-top: var(--sjs2-spacing-x200);
diff --git a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
index 5682849123..f4da3382a9 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
@@ -21,15 +21,15 @@
   }
 }
 
-.sd-element--complex.sd-element--with-frame > .sd-element__header {
-  padding-top: var(--sd-base-vertical-padding);
-  padding-bottom: var(--sd-base-vertical-padding);
-}
-
-.sd-element--collapsed.sd-element--complex > .sd-element__header {
-  padding-top: var(--sjs2-spacing-x200);
-  padding-bottom: var(--sjs2-spacing-x200);
-}
+// .sd-element--complex.sd-element--with-frame > .sd-element__header {
+//   padding-top: var(--sd-base-vertical-padding);
+//   padding-bottom: var(--sd-base-vertical-padding);
+// }
+
+// .sd-element--collapsed.sd-element--complex > .sd-element__header {
+//   padding-top: var(--sjs2-spacing-x200);
+//   padding-bottom: var(--sjs2-spacing-x200);
+// }
 
 .sd-element--nested.sd-element--complex {
   & > .sd-element__header--location-top {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-element.scss b/packages/survey-core/src/default-theme/blocks/sd-element.scss
index 0f65ab4661..bcd9a1e097 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-element.scss
@@ -136,10 +136,10 @@
 .sd-element--with-frame {
   border-radius: var(--sjs2-radius-component-panel);
   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);
+  // 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(--sjs2-color-component-panel-default-bg);
   box-shadow: $shadow-small;
 }
diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 965f5136ea..2002039347 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -15,16 +15,21 @@
         padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
     }
 
-    & .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header {
-        padding-top: var(--sd-base-vertical-padding);
-        padding-bottom: 0;
-
-        &:after {
-            display: none;
-        }
-
-        & > .sd-panel__title {
-            color: $foreground-light;
+    & .sd-paneldynamic__panel-wrapper > .sd-panel {
+        // &>.sd-panel__content {
+        //     padding: 0;
+        // }
+        &> .sd-panel__header {
+            padding-top: var(--sd-base-vertical-padding);
+            padding-bottom: 0;
+
+            &:after {
+                display: none;
+            }
+
+            & > .sd-panel__title {
+                color: $foreground-light;
+            }
         }
     }
 }
@@ -40,6 +45,15 @@
   }
 }
 
+.sd-question:not(.sd-element--with-frame) {
+    &>.sd-paneldynamic__footer {
+        padding: 0;
+    }
+
+    &>.sd-paneldynamic__panel-footer {
+        padding: 0;
+    }
+}
 
 .sd-paneldynamic__header {
   padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
@@ -78,6 +92,7 @@
         color: $foreground;
     }
 }
+
 // .sd-paneldynamic__panel-wrapper {
 //     box-sizing: border-box;
 //     padding-bottom: calc(1 * var(--sd-base-padding));
@@ -152,6 +167,8 @@
 
 .sd-question--paneldynamic:not(.sd-question--empty) {
     & > .sd-question__content {
+        padding: 0;
+        --animation-padding-bottom: 0;
         & > .sd-question__comment-area {
             padding-bottom: var(--sd-base-padding);
         }
@@ -321,9 +338,9 @@
     content: none;
 }
 
-.sd-question--paneldynamic.sd-element--with-frame {
-    padding: 0;
-}
+// .sd-question--paneldynamic.sd-element--with-frame {
+//     padding: 0;
+// }
 
 .sd-paneldynamic__panels-container {
     position: relative;
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index ddfa962684..eeda3d951b 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -5,6 +5,29 @@
   position: relative;
 }
 
+.sd-question__header {
+  padding-left: var(--sjs2-layout-component-question-header-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
+  padding-right: var(--sjs2-layout-component-question-header-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
+}
+
+.sd-question__content {
+  box-sizing: border-box;
+  padding-left: var(--sjs2-layout-component-question-content-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
+  padding-right: var(--sjs2-layout-component-question-content-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
+  padding-bottom: var(--sd-base-padding);
+}
+
+.sd-question:not(.sd-element--with-frame) {
+  >.sd-question__header {
+    padding-top: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+  >.sd-question__content {
+    padding: 0;
+  }
+}
+
 .sd-question--no-pointer-events {
 
   .sd-selectbase,
@@ -63,14 +86,8 @@
   margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
 }
 
-.sd-question__header {
-  width: 100%;
-  padding-left: var(--sjs2-layout-component-question-header-padding-left);
-  padding-right: var(--sjs2-layout-component-question-header-padding-right);
-}
-
 .sd-question__header--location-top {
-  padding-top: var(--sjs2-layout-component-question-header-padding-top);
+  padding-top: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-padding));
   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 }
 
@@ -109,9 +126,9 @@
 }
 
 .sd-element--with-frame {
-  &.sd-question--title-top {
-    padding-top: var(--sd-base-vertical-padding);
-  }
+  // &.sd-question--title-top {
+  //   padding-top: var(--sd-base-vertical-padding);
+  // }
 
   &.sd-question--error-top {
     padding-top: 0;
@@ -207,7 +224,3 @@
   overflow: visible;
   max-width: 100%;
 }
-
-.sd-question__content {
-  box-sizing: border-box;
-}

From 66a265bcada32937e5acb8be97a1413ef343ad18 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 23 Jun 2026 17:36:22 +0300
Subject: [PATCH 033/155] Fixed question title paddings in mobile mode

---
 .../src/default-theme/blocks/sd-question.scss | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index eeda3d951b..4b01d5289e 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -28,6 +28,19 @@
   }
 }
 
+.sd-root-modern--mobile {
+  .sd-question__header {
+    padding-left: var(--sjs2-spacing-x300);
+    padding-right: var(--sjs2-spacing-x300);
+  }
+
+  .sd-question__content {
+    padding-left: var(--sjs2-spacing-x300);
+    padding-right: var(--sjs2-spacing-x300);
+    padding-bottom: var(--sjs2-spacing-x300);
+  }
+}
+
 .sd-question--no-pointer-events {
 
   .sd-selectbase,
@@ -91,6 +104,12 @@
   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 }
 
+.sd-root-modern--mobile {
+  .sd-question__header--location-top {
+    padding-top: var(--sjs2-spacing-x200);
+  }
+}
+
 .sd-question__header--location--bottom {
   padding-top: calc(0.375 * var(--sd-base-vertical-padding));
 }

From 3ad02b1207c24adf882af6714a5279463b637421 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 23 Jun 2026 17:56:21 +0300
Subject: [PATCH 034/155] Fixed mobile page paddings

---
 .../src/default-theme/blocks/sd-page.scss     | 38 ++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 3513f2201b..90683e82ac 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -49,24 +49,36 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  box-sizing: border-box;
 }
 
-.sd-root-modern--mobile .sd-page {
-  padding: 0;
-}
+.sd-root-modern--mobile {
+  .sd-page {
+    padding: 0;
+  }
 
-.sd-page .sd-page__title {
-  @include sjs2--typography--component--page--title;
-  position: static;
-  // margin: 0 0 var(--sjs2-spacing-x050) 0px;
-}
+  .sd-page__title {
+    @include sjs2--typography--component--page--title;
+    position: static;
+    // margin: 0 0 var(--sjs2-spacing-x050) 0px;
+  }
 
-.sd-page .sd-page__description {
-  @include sjs2--typography--component--page--description;
-  position: static;
-  // margin: 0 0 var(--sjs2-spacing-x050) 0;
-}
+  .sd-page__description {
+    @include sjs2--typography--component--page--description;
+    position: static;
+    // margin: 0 0 var(--sjs2-spacing-x050) 0;
+  }
 
+  .sd-page__content {
+    // padding-inline-start:  var(--sjs2-spacing-x300);
+    // padding-inline-end: var(--sjs2-spacing-x300);
+    // padding-top: var(--sjs2-spacing-x300);
+    // padding-bottom: var(--sjs2-spacing-x300);
+    row-gap: var(--sjs2-spacing-x200);
+    column-gap: var(--sjs2-spacing-x200);
+    padding: 0;
+  }
+}
 
 .sd-page__errbox {
   padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100)) var(--sd-base-padding);

From dc4a242761223bdb5272929925c11b4268a134ae Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 23 Jun 2026 18:04:46 +0300
Subject: [PATCH 035/155] Fixed new css variables for page spacings

---
 .../src/default-theme/blocks/sd-page.scss     | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 90683e82ac..7803ac2ead 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -11,10 +11,10 @@
   box-sizing: border-box;
   border-radius: var(--sjs2-radius-component-page);
 
-  padding-inline-start:  var(--sjs2-layout-component-page-box-padding-horizontal, var(--sjs2-spacing-x500));
-  padding-inline-end: var(--sjs2-layout-component-page-box-padding-horizontal, var(--sjs2-spacing-x500));
-  padding-top: var(--sjs2-layout-component-page-box-padding-top, var(--sjs2-spacing-x500));
-  padding-bottom: var(--sjs2-layout-component-page-box-padding-bottom, var(--sjs2-spacing-x500));
+  // padding-inline-start:  var(--sjs2-layout-component-page-box-padding-horizontal, var(--sjs2-spacing-x500));
+  // padding-inline-end: var(--sjs2-layout-component-page-box-padding-horizontal, var(--sjs2-spacing-x500));
+  // padding-top: var(--sjs2-layout-component-page-box-padding-top, var(--sjs2-spacing-x500));
+  // padding-bottom: var(--sjs2-layout-component-page-box-padding-bottom, var(--sjs2-spacing-x500));
   row-gap: var(--sjs2-layout-component-page-box-gap-horizontal, var(--sjs2-spacing-x300));
   column-gap: var(--sjs2-layout-component-page-box-gap-vertical, var(--sjs2-spacing-x300));
 }
@@ -42,10 +42,12 @@
 .sd-page__content {
   padding-inline-start:  var(--sjs2-layout-component-page-content-area-padding-horizontal, var(--sjs2-spacing-x000));
   padding-inline-end: var(--sjs2-layout-component-page-content-area-padding-horizontal, var(--sjs2-spacing-x000));
-  padding-top: var(--sjs2-layout-component-page-content-area-padding-vertical, var(--sjs2-spacing-x000));
-  padding-bottom: var(--sjs2-layout-component-page-content-area-padding-vertical, var(--sjs2-spacing-x000));
-  row-gap: var(--sjs2-layout-component-page-content-area-gap-horizontal, var(--sjs2-spacing-x200));
-  column-gap: var(--sjs2-layout-component-page-content-area-gap-vertical, var(--sjs2-spacing-x200));
+  // padding-top: var(--sjs2-layout-component-page-content-area-padding-vertical, var(--sjs2-spacing-x000));
+  // padding-bottom: var(--sjs2-layout-component-page-content-area-padding-vertical, var(--sjs2-spacing-x000));
+  // row-gap: var(--sjs2-layout-component-page-content-area-gap-horizontal, var(--sjs2-spacing-x200));
+  // column-gap: var(--sjs2-layout-component-page-content-area-gap-vertical, var(--sjs2-spacing-x200));
+  row-gap: var(--sjs2-spacing-x200);
+  column-gap: var(--sjs2-spacing-x200);
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -53,9 +55,9 @@
 }
 
 .sd-root-modern--mobile {
-  .sd-page {
-    padding: 0;
-  }
+  // .sd-page {
+  //   padding: 0;
+  // }
 
   .sd-page__title {
     @include sjs2--typography--component--page--title;

From 05279828eec3c399e3f092cf5d7044eb09e673e9 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 24 Jun 2026 10:23:20 +0300
Subject: [PATCH 036/155] Fixed page paddings - TO REVIEW LATER

---
 packages/survey-core/src/default-theme/blocks/sd-page.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 7803ac2ead..da82a3d8fe 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -40,8 +40,8 @@
 }
 
 .sd-page__content {
-  padding-inline-start:  var(--sjs2-layout-component-page-content-area-padding-horizontal, var(--sjs2-spacing-x000));
-  padding-inline-end: var(--sjs2-layout-component-page-content-area-padding-horizontal, var(--sjs2-spacing-x000));
+  // padding-inline-start:  var(--sjs2-layout-component-page-content-area-padding-horizontal, var(--sjs2-spacing-x000));
+  // padding-inline-end: var(--sjs2-layout-component-page-content-area-padding-horizontal, var(--sjs2-spacing-x000));
   // padding-top: var(--sjs2-layout-component-page-content-area-padding-vertical, var(--sjs2-spacing-x000));
   // padding-bottom: var(--sjs2-layout-component-page-content-area-padding-vertical, var(--sjs2-spacing-x000));
   // row-gap: var(--sjs2-layout-component-page-content-area-gap-horizontal, var(--sjs2-spacing-x200));

From 4a39f5d6bd28fd63e66b99d0fdb51e126136e0aa Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 24 Jun 2026 12:30:08 +0300
Subject: [PATCH 037/155] Layout: question header spacings

---
 .../src/default-theme/blocks/sd-panel.scss    |  2 +-
 .../default-theme/blocks/sd-paneldynamic.scss |  2 +-
 .../src/default-theme/blocks/sd-question.scss | 74 +++++++++----------
 .../src/default-theme/blocks/sd-table.scss    |  8 +-
 4 files changed, 40 insertions(+), 46 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index f3aa9a231b..88792a7b6a 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -40,7 +40,7 @@
 
 .sd-root-modern--mobile {
  .sd-panel__header {
-    padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-spacing-x300);
+    padding: var(--sjs2-spacing-x200) var(--sjs2-spacing-x300);
   }
  .sd-panel__content {
     padding: var(--sjs2-spacing-x300);
diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 2002039347..30ae7ba1d7 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -74,7 +74,7 @@
 
 .sd-root-modern--mobile {
     .sd-paneldynamic__header {
-        padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-spacing-x300));
+        padding: var(--sjs2-spacing-x200) var(--sjs2-spacing-x300);
     }
     .sd-paneldynamic__footer {
         padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x100)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-spacing-x300));
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 4b01d5289e..897e86f45a 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -6,8 +6,37 @@
 }
 
 .sd-question__header {
+  padding-top: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
+  padding-bottom: var(--sjs2-layout-component-question-header-padding-bottom, calc(0.5 * var(--sd-base-vertical-padding)));
   padding-left: var(--sjs2-layout-component-question-header-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
   padding-right: var(--sjs2-layout-component-question-header-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
+  row-gap: var(--sjs2-layout-component-question-header-gap-vertical, var(--sjs2-spacing-x050));
+  column-gap: var(--sjs2-layout-component-question-header-gap-horizontal, var(--sjs2-spacing-x150));
+}
+
+.sd-question__header--location--bottom {
+  padding-top: calc(0.375 * var(--sd-base-vertical-padding));
+}
+
+.sd-question__title {
+  @include sjs2--typography--component--question--title;
+  padding: var(--sjs2-layout-component-question-title-padding-vertical) var(--sjs2-layout-component-question-title-padding-horizontal);
+}
+
+.sd-question__title--empty {
+  .sv-string-viewer {
+    display: inline-block;
+    height: multiply(1.5, $font-questiontitle-size);
+  }
+}
+
+.sd-question__description {
+  @include sjs2--typography--component--question--description;
+  color: $font-questiondescription-color;
+  white-space: normal;
+  padding-inline: var(--sjs2-layout-component-question-description-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-question-description-padding-top);
+  padding-bottom: var(--sjs2-layout-component-question-description-padding-bottom);
 }
 
 .sd-question__content {
@@ -30,8 +59,10 @@
 
 .sd-root-modern--mobile {
   .sd-question__header {
+    padding-top: var(--sjs2-spacing-x200);
     padding-left: var(--sjs2-spacing-x300);
     padding-right: var(--sjs2-spacing-x300);
+    padding-bottom: var(--sjs2-spacing-x100);
   }
 
   .sd-question__content {
@@ -99,50 +130,13 @@
   margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
 }
 
-.sd-question__header--location-top {
-  padding-top: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-padding));
-  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
-}
-
-.sd-root-modern--mobile {
-  .sd-question__header--location-top {
-    padding-top: var(--sjs2-spacing-x200);
-  }
-}
-
-.sd-question__header--location--bottom {
-  padding-top: calc(0.375 * var(--sd-base-vertical-padding));
-}
-
-.sd-question__title {
-  @include sjs2--typography--component--question--title;
-  padding: var(--sjs2-layout-component-question-title-padding-vertical)
-    var(--sjs2-layout-component-question-title-padding-horizontal);
-}
-
-.sd-question__title--empty {
-  .sv-string-viewer {
-    display: inline-block;
-    height: multiply(1.5, $font-questiontitle-size);
-  }
-}
-
-.sd-question__description {
-  @include sjs2--typography--component--question--description;
-  color: $font-questiondescription-color;
-  white-space: normal;
-  padding-inline: var(--sjs2-layout-component-question-description-padding-horizontal);
-  padding-top: var(--sjs2-layout-component-question-description-padding-top);
-  padding-bottom: var(--sjs2-layout-component-question-description-padding-bottom);
-}
-
 .sd-question__description--under-input {
   padding-top: calc(0.375 * var(--sd-base-vertical-padding));
 }
 
-.sd-question__header .sd-question__description {
-  margin-top: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
-}
+// .sd-question__header .sd-question__description {
+//   margin-top: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
+// }
 
 .sd-element--with-frame {
   // &.sd-question--title-top {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 4c54e3d021..434e36a285 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -456,8 +456,8 @@
   }
 
   & > .sd-question__content {
-    padding-top: var(--sjs2-spacing-x200);
-    --animation-padding-top: #{var(--sjs2-spacing-x200)};
+    padding-top: var(--sd-base-vertical-padding);
+    --animation-padding-top: #{var(--sd-base-vertical-padding)};
     min-width: min-content;
   }
 
@@ -499,8 +499,8 @@
 @mixin table_responsive {
   &.sd-question.sd-question--table {
     & > .sd-question__content {
-      padding-top: 0;
-      --animation-padding-top: 0;
+      padding-top: var(--sjs2-spacing-x100);
+      --animation-padding-top: var(--sjs2-spacing-x100);
     }
   }
 

From 4198090e8546c8b2e557dcd4828995178a8c9fa2 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 24 Jun 2026 12:44:03 +0300
Subject: [PATCH 038/155] Layout: page - fixed page horizontal paddings

---
 .../survey-core/src/default-theme/blocks/sd-page.scss     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index da82a3d8fe..f203710175 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  // padding: 0 var(--sjs2-spacing-x500);
+  padding: 0 var(--sjs2-spacing-x500);
   width: 100%;
   box-sizing: border-box;
   border-radius: var(--sjs2-radius-component-page);
@@ -55,9 +55,9 @@
 }
 
 .sd-root-modern--mobile {
-  // .sd-page {
-  //   padding: 0;
-  // }
+  .sd-page {
+    padding: 0;
+  }
 
   .sd-page__title {
     @include sjs2--typography--component--page--title;

From 8e67fece4bdcb9716edb8b6b1a1c3cb1e61a24ea Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 24 Jun 2026 14:47:39 +0300
Subject: [PATCH 039/155] New tokens: panel - temporary rollback page header
 paddings Fixes #11421

---
 packages/survey-core/src/default-theme/blocks/sd-page.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index f203710175..541249b091 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -23,7 +23,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: var(--sjs2-layout-component-page-header-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-page-header-padding-horizontal, var(--sjs2-spacing-x000));
+  // padding: var(--sjs2-layout-component-page-header-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-page-header-padding-horizontal, var(--sjs2-spacing-x000));
   gap: var(--sjs2-layout-component-page-header-gap-vertical, var(--sjs2-spacing-x050));
   margin: 0 0 var(--sjs2-spacing-x050) 0;
 }

From 78e5260772c1df1f007465dc5abcf192a79c0bd2 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 24 Jun 2026 14:55:53 +0300
Subject: [PATCH 040/155] Layout: page fixed page title typography

---
 packages/survey-core/src/default-theme/blocks/sd-page.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 541249b091..0718757b33 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -29,7 +29,9 @@
 }
 
 .sd-page__title {
-  padding: var(--sjs2-layout-component-page-title-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-page-title-padding-horizontal, var(--sjs2-spacing-x000));
+  @include sjs2--typography--component--page--title;
+  position: static;
+  // padding: var(--sjs2-layout-component-page-title-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-page-title-padding-horizontal, var(--sjs2-spacing-x000));
 }
 
 .sd-page__description {
@@ -60,8 +62,6 @@
   }
 
   .sd-page__title {
-    @include sjs2--typography--component--page--title;
-    position: static;
     // margin: 0 0 var(--sjs2-spacing-x050) 0px;
   }
 

From ee5358b0c71ba762ea1a2c8a779de55906e1fc71 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 24 Jun 2026 15:19:09 +0300
Subject: [PATCH 041/155] Layout: page - Fixed page description typography

---
 packages/survey-core/src/default-theme/blocks/sd-page.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 0718757b33..08759308fd 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -35,6 +35,8 @@
 }
 
 .sd-page__description {
+  @include sjs2--typography--component--page--description;
+  position: static;
   padding-inline-start:  var(--sjs2-layout-component-page-description-padding-horizontal, var(--sjs2-spacing-x000));
   padding-inline-end: var(--sjs2-layout-component-page-description-padding-horizontal, var(--sjs2-spacing-x000));
   padding-top: var(--sjs2-layout-component-page-description-padding-top, var(--sjs2-spacing-x000));
@@ -66,8 +68,6 @@
   }
 
   .sd-page__description {
-    @include sjs2--typography--component--page--description;
-    position: static;
     // margin: 0 0 var(--sjs2-spacing-x050) 0;
   }
 

From 7f85a7ea8e8074bb3503d16d9cf398852dbcd60b Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 24 Jun 2026 15:32:23 +0300
Subject: [PATCH 042/155] Layout: question - Try to fix tests changing selector

---
 screenshots/buttongroup.spec.ts      |  4 +-
 screenshots/dropdown.spec.ts         |  4 +-
 screenshots/readonly-preview.spec.ts | 88 ++++++++++++++--------------
 3 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/screenshots/buttongroup.spec.ts b/screenshots/buttongroup.spec.ts
index a5bae25c3b..66328d6aa2 100644
--- a/screenshots/buttongroup.spec.ts
+++ b/screenshots/buttongroup.spec.ts
@@ -57,11 +57,11 @@ frameworks.forEach(framework => {
       };
       await initSurvey(page, framework, json);
       await resetFocusToBody(page);
-      await compareScreenshot(page, ".sd-question__content", "buttongroup-renderas-default.png");
+      await compareScreenshot(page, ".sd-question__content>div", "buttongroup-renderas-default.png");
 
       await page.setViewportSize({ width: 500, height: 1000 });
       await page.waitForTimeout(500);
-      await compareScreenshot(page, ".sd-question__content", "buttongroup-renderas-dropdown.png");
+      await compareScreenshot(page, ".sd-question__content>div", "buttongroup-renderas-dropdown.png");
     });
   });
 });
\ No newline at end of file
diff --git a/screenshots/dropdown.spec.ts b/screenshots/dropdown.spec.ts
index d18319ae84..0680527cbb 100644
--- a/screenshots/dropdown.spec.ts
+++ b/screenshots/dropdown.spec.ts
@@ -417,7 +417,7 @@ frameworks.forEach(framework => {
         (<HTMLElement>(window as any).survey.rootElement.getRootNode().querySelector(".sd-question__content svg")).style.height = "48px";
         (<HTMLElement>(window as any).survey.rootElement.getRootNode().querySelector(".sd-question__content input")).style.backgroundColor = "red";
       });
-      await compareScreenshot(page, ".sd-question__content", "dropdown-custom-component.png");
+      await compareScreenshot(page, ".sd-question__content>div", "dropdown-custom-component.png");
     });
 
     test("Check ReadOnly dropdown with custom component", async ({ page }) => {
@@ -443,7 +443,7 @@ frameworks.forEach(framework => {
       //   (<HTMLElement>(window as any).survey.rootElement.getRootNode().querySelector(".sd-question__content svg")).style.height = "48px";
       //   (<HTMLElement>(window as any).survey.rootElement.getRootNode().querySelector(".sd-question__content input")).style.backgroundColor = "red";
       // });
-      await compareScreenshot(page, ".sd-question__content", "dropdown-readonly-custom-component.png");
+      await compareScreenshot(page, ".sd-question__content>div", "dropdown-readonly-custom-component.png");
     });
 
     test("Check overlay popup in dropdown question", async ({ page }) => {
diff --git a/screenshots/readonly-preview.spec.ts b/screenshots/readonly-preview.spec.ts
index 01da8853ca..dcfcefb1cf 100644
--- a/screenshots/readonly-preview.spec.ts
+++ b/screenshots/readonly-preview.spec.ts
@@ -26,11 +26,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-radiogroup.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-radiogroup.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-radiogroup.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-radiogroup.png");
     });
 
     test("Single Input ReadOnly and Preview", async ({ page }) => {
@@ -49,11 +49,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-single-input.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-single-input.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-single-input.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-single-input.png");
     });
 
     test("Comment Input ReadOnly and Preview", async ({ page }) => {
@@ -72,15 +72,15 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-comment.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-comment.png");
 
       await page.keyboard.press("Tab");
-      await compareScreenshot(page, ".sd-question__content", "readonly-comment-with-focus.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-comment-with-focus.png");
 
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-comment.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-comment.png");
     });
 
     test("Multiple text Input ReadOnly and Preview", async ({ page }) => {
@@ -106,11 +106,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-multiple.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-multiple.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-multiple.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-multiple.png");
     });
 
     test("Rating ReadOnly and Preview", async ({ page }) => {
@@ -134,11 +134,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-rating.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-rating.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-rating.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-rating.png");
     });
 
     test("Rating as dropdown ReadOnly and Preview", async ({ page }) => {
@@ -163,11 +163,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-rating-dropdown.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-rating-dropdown.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-rating-dropdown.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-rating-dropdown.png");
     });
 
     test("Rating Stars ReadOnly and Preview", async ({ page }) => {
@@ -192,11 +192,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-rating-stars.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-rating-stars.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-rating-stars.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-rating-stars.png");
     });
 
     test("Rating Smileys ReadOnly and Preview", async ({ page }) => {
@@ -221,11 +221,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-rating-smileys.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-rating-smileys.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-rating-smileys.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-rating-smileys.png");
     });
 
     test("Rating Smileys colored ReadOnly and Preview", async ({ page }) => {
@@ -251,11 +251,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-rating-smileys-colored.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-rating-smileys-colored.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-rating-smileys-colored.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-rating-smileys-colored.png");
     });
 
     test("Rating Smileys and Stars in matrix ReadOnly and Preview", async ({ page }) => {
@@ -321,11 +321,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-dropdown.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-dropdown.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-dropdown.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-dropdown.png");
     });
 
     test("Tagbox ReadOnly and Preview", async ({ page }) => {
@@ -345,11 +345,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-tagbox.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-tagbox.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-tagbox.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-tagbox.png");
     });
 
     test("Checkbox Group ReadOnly and Preview", async ({ page }) => {
@@ -369,11 +369,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-checkbox.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-checkbox.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-checkbox.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-checkbox.png");
     });
 
     test("Signature ReadOnly and Preview", async ({ page }) => {
@@ -391,11 +391,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-signature.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-signature.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-signature.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-signature.png");
     });
 
     test("Panel Dynamic ReadOnly and Preview", async ({ page }) => {
@@ -491,11 +491,11 @@ frameworks.forEach(framework => {
           },
         ]
       });
-      await compareScreenshot(page, ".sd-question__content", "readonly-ranking.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-ranking.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-ranking.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-ranking.png");
     });
 
     test("Boolean ReadOnly and Preview", async ({ page }) => {
@@ -515,11 +515,11 @@ frameworks.forEach(framework => {
           }
         ]
       });
-      await compareScreenshot(page, ".sd-question__content", "readonly-boolean.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-boolean.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-boolean.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-boolean.png");
     });
 
     test("Boolean:Indeterminate ReadOnly and Preview", async ({ page }) => {
@@ -539,11 +539,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-boolean-indeterminate.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-boolean-indeterminate.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-boolean-indeterminate.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-boolean-indeterminate.png");
     });
 
     test("Boolean:Radio ReadOnly and Preview", async ({ page }) => {
@@ -564,11 +564,11 @@ frameworks.forEach(framework => {
           }
         ]
       });
-      await compareScreenshot(page, ".sd-question__content", "readonly-boolean-radio.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-boolean-radio.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-boolean-radio.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-boolean-radio.png");
     });
 
     test("Boolean:Checkbox ReadOnly and Preview", async ({ page }) => {
@@ -592,11 +592,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content", "readonly-boolean-checkbox.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-boolean-checkbox.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-boolean-checkbox.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-boolean-checkbox.png");
     });
 
     test("ImagePicker ReadOnly and Preview", async ({ page }) => {
@@ -628,11 +628,11 @@ frameworks.forEach(framework => {
         ]
       });
       await page.waitForLoadState("networkidle");
-      await compareScreenshot(page, ".sd-question__content", "readonly-imagepicker.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-imagepicker.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-imagepicker.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-imagepicker.png");
     });
 
     test("Matrix ReadOnly and Preview", async ({ page }) => {
@@ -658,11 +658,11 @@ frameworks.forEach(framework => {
           }
         ]
       });
-      await compareScreenshot(page, ".sd-question__content", "readonly-matrix-single.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-matrix-single.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-matrix-single.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-matrix-single.png");
     });
 
     test("Matrix ReadOnly and Preview alt rows", async ({ page }) => {
@@ -723,11 +723,11 @@ frameworks.forEach(framework => {
           }
         ]
       });
-      await compareScreenshot(page, ".sd-question__content", "readonly-file.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-file.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content", "preview-file.png");
+      await compareScreenshot(page, ".sd-question__content>div", "preview-file.png");
     });
 
     test("Numbered page Preview", async ({ page }) => {
@@ -770,7 +770,7 @@ frameworks.forEach(framework => {
       await initSurvey(page, framework, json);
 
       await page.locator("div").filter({ hasText: /^Yes$/ }).click();
-      await compareScreenshot(page, ".sd-question__content", "readonly-and-focus-unselect-item-not-focused.png");
+      await compareScreenshot(page, ".sd-question__content>div", "readonly-and-focus-unselect-item-not-focused.png");
     });
   });
 });
\ No newline at end of file

From 26428cab58064f54124be970dfbd30d3bf82cd8d Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 24 Jun 2026 15:45:40 +0300
Subject: [PATCH 043/155] New tokens: panel - Fixed error box negative margins
 Fixes #11421

---
 .../src/default-theme/blocks/sd-complex-element.scss   | 10 +++++-----
 .../src/default-theme/blocks/sd-question.scss          |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
index f4da3382a9..5b80603ff1 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
@@ -51,11 +51,11 @@
     padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
   }
 
-  & > .sd-element__erbox {
-    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__erbox {
+  //   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-question__erbox--below-question {
     bottom: 0;
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 897e86f45a..78b45f5777 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -158,11 +158,11 @@
   }
 
   &>.sd-element__erbox {
-    margin-left: calc(-1 * var(--sd-base-padding));
-    margin-right: calc(-1 * var(--sd-base-padding));
-    width: calc(100% + 2 * var(--sd-base-padding));
+    // margin-left: calc(-1 * var(--sd-base-padding));
+    // margin-right: calc(-1 * var(--sd-base-padding));
+    // width: calc(100% + 2 * var(--sd-base-padding));
     position: sticky;
-    left: calc(-1 * var(--sd-base-padding));
+    // left: calc(-1 * var(--sd-base-padding));
   }
 }
 

From 79550252e6c4948df5ddc5a3fdd9573208d16bbe Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 24 Jun 2026 16:35:23 +0300
Subject: [PATCH 044/155] Layout: question - Fixed left and bottom title
 location paddings

---
 .../src/default-theme/blocks/sd-question.scss | 68 +++++++++++--------
 1 file changed, 40 insertions(+), 28 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 78b45f5777..f28ec07486 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -5,6 +5,15 @@
   position: relative;
 }
 
+.sd-question--left {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  column-gap: var(--sjs2-spacing-x300);
+  row-gap: calc(0.25 * var(--sd-base-vertical-padding));
+  align-items: anchor-center;
+}
+
 .sd-question__header {
   padding-top: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
   padding-bottom: var(--sjs2-layout-component-question-header-padding-bottom, calc(0.5 * var(--sd-base-vertical-padding)));
@@ -14,8 +23,24 @@
   column-gap: var(--sjs2-layout-component-question-header-gap-horizontal, var(--sjs2-spacing-x150));
 }
 
-.sd-question__header--location--bottom {
-  padding-top: calc(0.375 * var(--sd-base-vertical-padding));
+.sd-question__header--location--left {
+  padding-right: 0;
+  padding-bottom: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
+  display: inline-block;
+  width: auto;
+  // vertical-align: top;
+  // margin-top: var(--sjs2-spacing-x150);
+}
+
+.sd-question--title-bottom {
+  .sd-question__content {
+    padding-top: var(--sd-base-padding);
+    padding-bottom: 0;
+  }
+  .sd-question__header--location--bottom {
+    padding-top: calc(0.375 * var(--sd-base-vertical-padding));
+    padding-bottom: var(--sjs2-spacing-x500);
+  }
 }
 
 .sd-question__title {
@@ -46,6 +71,19 @@
   padding-bottom: var(--sd-base-padding);
 }
 
+.sd-question__content--left {
+  display: inline-block;
+  flex: 1;
+  padding-top: var(--sd-base-padding);
+  padding-left: 0;
+  // margin-top: calc(0.25 * var(--sd-base-vertical-padding)) 0;
+  max-width: 100%;
+}
+
+// .sd-element--with-frame>.sd-question__content--left {
+//   margin: 0;
+// }
+
 .sd-question:not(.sd-element--with-frame) {
   >.sd-question__header {
     padding-top: 0;
@@ -171,32 +209,6 @@
   padding: var(--sjs2-spacing-x200) 0;
 }
 
-.sd-question__header--location--left {
-  display: inline-block;
-  width: auto;
-  vertical-align: top;
-  margin-top: var(--sjs2-spacing-x150);
-}
-
-.sd-question--left {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  column-gap: var(--sjs2-spacing-x300);
-  row-gap: calc(0.25 * var(--sd-base-vertical-padding));
-}
-
-.sd-question__content--left {
-  display: inline-block;
-  flex: 1;
-  margin-top: calc(0.25 * var(--sd-base-vertical-padding)) 0;
-  max-width: 100%;
-}
-
-.sd-element--with-frame>.sd-question__content--left {
-  margin: 0;
-}
-
 .sd-question__required-text {
   color: $red;
   vertical-align: top;

From a150098062ba0710789a1a4411c0e617f757c806 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 24 Jun 2026 16:51:48 +0300
Subject: [PATCH 045/155] Layout: question - Fixed error boxes

---
 .../src/default-theme/blocks/sd-question.scss | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index f28ec07486..aed9e34b85 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -181,25 +181,26 @@
   //   padding-top: var(--sd-base-vertical-padding);
   // }
 
-  &.sd-question--error-top {
-    padding-top: 0;
-  }
+  // &.sd-question--error-top {
+  //   padding-top: 0;
+  // }
 
-  &.sd-question--error-bottom {
-    padding-bottom: 0;
-    display: flex;
-    flex-direction: column;
+  // &.sd-question--error-bottom {
+  //   padding-bottom: 0;
+  //   display: flex;
+  //   flex-direction: column;
 
-    &>.sd-question__content {
-      margin-bottom: var(--sd-base-padding);
-    }
-  }
+  //   // &>.sd-question__content {
+  //   //   margin-bottom: var(--sd-base-padding);
+  //   // }
+  // }
 
   &>.sd-element__erbox {
     // margin-left: calc(-1 * var(--sd-base-padding));
     // margin-right: calc(-1 * var(--sd-base-padding));
     // width: calc(100% + 2 * var(--sd-base-padding));
     position: sticky;
+    left: 0;
     // left: calc(-1 * var(--sd-base-padding));
   }
 }

From 7218bc79be0d036f4b943ee52f5deb1896a29b63 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 24 Jun 2026 18:03:17 +0300
Subject: [PATCH 046/155] Layout: panel - Fixed footer top padding on preview

---
 packages/survey-core/src/default-theme/blocks/sd-panel.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index 88792a7b6a..61dd1391ab 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -160,7 +160,7 @@
 }
 
 .sd-panel--as-page .sd-panel__footer {
-  padding: 0;
+  padding: var(--sjs2-spacing-x400) 0 0;
   margin: 0;
   border: none;
   width: initial;

From 1439d04d13bc4f17afe4ab9eb11af41c686c0215 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 25 Jun 2026 16:07:56 +0300
Subject: [PATCH 047/155] New tokens: question - Rolled back selectors in scr
 tests Fixes #11421

---
 screenshots/buttongroup.spec.ts      |  4 +-
 screenshots/dropdown.spec.ts         |  4 +-
 screenshots/readonly-preview.spec.ts | 88 ++++++++++++++--------------
 3 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/screenshots/buttongroup.spec.ts b/screenshots/buttongroup.spec.ts
index 66328d6aa2..a5bae25c3b 100644
--- a/screenshots/buttongroup.spec.ts
+++ b/screenshots/buttongroup.spec.ts
@@ -57,11 +57,11 @@ frameworks.forEach(framework => {
       };
       await initSurvey(page, framework, json);
       await resetFocusToBody(page);
-      await compareScreenshot(page, ".sd-question__content>div", "buttongroup-renderas-default.png");
+      await compareScreenshot(page, ".sd-question__content", "buttongroup-renderas-default.png");
 
       await page.setViewportSize({ width: 500, height: 1000 });
       await page.waitForTimeout(500);
-      await compareScreenshot(page, ".sd-question__content>div", "buttongroup-renderas-dropdown.png");
+      await compareScreenshot(page, ".sd-question__content", "buttongroup-renderas-dropdown.png");
     });
   });
 });
\ No newline at end of file
diff --git a/screenshots/dropdown.spec.ts b/screenshots/dropdown.spec.ts
index 0680527cbb..d18319ae84 100644
--- a/screenshots/dropdown.spec.ts
+++ b/screenshots/dropdown.spec.ts
@@ -417,7 +417,7 @@ frameworks.forEach(framework => {
         (<HTMLElement>(window as any).survey.rootElement.getRootNode().querySelector(".sd-question__content svg")).style.height = "48px";
         (<HTMLElement>(window as any).survey.rootElement.getRootNode().querySelector(".sd-question__content input")).style.backgroundColor = "red";
       });
-      await compareScreenshot(page, ".sd-question__content>div", "dropdown-custom-component.png");
+      await compareScreenshot(page, ".sd-question__content", "dropdown-custom-component.png");
     });
 
     test("Check ReadOnly dropdown with custom component", async ({ page }) => {
@@ -443,7 +443,7 @@ frameworks.forEach(framework => {
       //   (<HTMLElement>(window as any).survey.rootElement.getRootNode().querySelector(".sd-question__content svg")).style.height = "48px";
       //   (<HTMLElement>(window as any).survey.rootElement.getRootNode().querySelector(".sd-question__content input")).style.backgroundColor = "red";
       // });
-      await compareScreenshot(page, ".sd-question__content>div", "dropdown-readonly-custom-component.png");
+      await compareScreenshot(page, ".sd-question__content", "dropdown-readonly-custom-component.png");
     });
 
     test("Check overlay popup in dropdown question", async ({ page }) => {
diff --git a/screenshots/readonly-preview.spec.ts b/screenshots/readonly-preview.spec.ts
index dcfcefb1cf..01da8853ca 100644
--- a/screenshots/readonly-preview.spec.ts
+++ b/screenshots/readonly-preview.spec.ts
@@ -26,11 +26,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-radiogroup.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-radiogroup.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-radiogroup.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-radiogroup.png");
     });
 
     test("Single Input ReadOnly and Preview", async ({ page }) => {
@@ -49,11 +49,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-single-input.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-single-input.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-single-input.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-single-input.png");
     });
 
     test("Comment Input ReadOnly and Preview", async ({ page }) => {
@@ -72,15 +72,15 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-comment.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-comment.png");
 
       await page.keyboard.press("Tab");
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-comment-with-focus.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-comment-with-focus.png");
 
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-comment.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-comment.png");
     });
 
     test("Multiple text Input ReadOnly and Preview", async ({ page }) => {
@@ -106,11 +106,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-multiple.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-multiple.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-multiple.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-multiple.png");
     });
 
     test("Rating ReadOnly and Preview", async ({ page }) => {
@@ -134,11 +134,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-rating.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-rating.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-rating.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-rating.png");
     });
 
     test("Rating as dropdown ReadOnly and Preview", async ({ page }) => {
@@ -163,11 +163,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-rating-dropdown.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-rating-dropdown.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-rating-dropdown.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-rating-dropdown.png");
     });
 
     test("Rating Stars ReadOnly and Preview", async ({ page }) => {
@@ -192,11 +192,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-rating-stars.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-rating-stars.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-rating-stars.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-rating-stars.png");
     });
 
     test("Rating Smileys ReadOnly and Preview", async ({ page }) => {
@@ -221,11 +221,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-rating-smileys.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-rating-smileys.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-rating-smileys.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-rating-smileys.png");
     });
 
     test("Rating Smileys colored ReadOnly and Preview", async ({ page }) => {
@@ -251,11 +251,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-rating-smileys-colored.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-rating-smileys-colored.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-rating-smileys-colored.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-rating-smileys-colored.png");
     });
 
     test("Rating Smileys and Stars in matrix ReadOnly and Preview", async ({ page }) => {
@@ -321,11 +321,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-dropdown.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-dropdown.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-dropdown.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-dropdown.png");
     });
 
     test("Tagbox ReadOnly and Preview", async ({ page }) => {
@@ -345,11 +345,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-tagbox.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-tagbox.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-tagbox.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-tagbox.png");
     });
 
     test("Checkbox Group ReadOnly and Preview", async ({ page }) => {
@@ -369,11 +369,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-checkbox.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-checkbox.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-checkbox.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-checkbox.png");
     });
 
     test("Signature ReadOnly and Preview", async ({ page }) => {
@@ -391,11 +391,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-signature.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-signature.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-signature.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-signature.png");
     });
 
     test("Panel Dynamic ReadOnly and Preview", async ({ page }) => {
@@ -491,11 +491,11 @@ frameworks.forEach(framework => {
           },
         ]
       });
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-ranking.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-ranking.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-ranking.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-ranking.png");
     });
 
     test("Boolean ReadOnly and Preview", async ({ page }) => {
@@ -515,11 +515,11 @@ frameworks.forEach(framework => {
           }
         ]
       });
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-boolean.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-boolean.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-boolean.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-boolean.png");
     });
 
     test("Boolean:Indeterminate ReadOnly and Preview", async ({ page }) => {
@@ -539,11 +539,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-boolean-indeterminate.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-boolean-indeterminate.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-boolean-indeterminate.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-boolean-indeterminate.png");
     });
 
     test("Boolean:Radio ReadOnly and Preview", async ({ page }) => {
@@ -564,11 +564,11 @@ frameworks.forEach(framework => {
           }
         ]
       });
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-boolean-radio.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-boolean-radio.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-boolean-radio.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-boolean-radio.png");
     });
 
     test("Boolean:Checkbox ReadOnly and Preview", async ({ page }) => {
@@ -592,11 +592,11 @@ frameworks.forEach(framework => {
         ]
       });
 
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-boolean-checkbox.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-boolean-checkbox.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-boolean-checkbox.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-boolean-checkbox.png");
     });
 
     test("ImagePicker ReadOnly and Preview", async ({ page }) => {
@@ -628,11 +628,11 @@ frameworks.forEach(framework => {
         ]
       });
       await page.waitForLoadState("networkidle");
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-imagepicker.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-imagepicker.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-imagepicker.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-imagepicker.png");
     });
 
     test("Matrix ReadOnly and Preview", async ({ page }) => {
@@ -658,11 +658,11 @@ frameworks.forEach(framework => {
           }
         ]
       });
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-matrix-single.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-matrix-single.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-matrix-single.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-matrix-single.png");
     });
 
     test("Matrix ReadOnly and Preview alt rows", async ({ page }) => {
@@ -723,11 +723,11 @@ frameworks.forEach(framework => {
           }
         ]
       });
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-file.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-file.png");
       await page.evaluate(() => {
         (window as any).survey.showPreview();
       });
-      await compareScreenshot(page, ".sd-question__content>div", "preview-file.png");
+      await compareScreenshot(page, ".sd-question__content", "preview-file.png");
     });
 
     test("Numbered page Preview", async ({ page }) => {
@@ -770,7 +770,7 @@ frameworks.forEach(framework => {
       await initSurvey(page, framework, json);
 
       await page.locator("div").filter({ hasText: /^Yes$/ }).click();
-      await compareScreenshot(page, ".sd-question__content>div", "readonly-and-focus-unselect-item-not-focused.png");
+      await compareScreenshot(page, ".sd-question__content", "readonly-and-focus-unselect-item-not-focused.png");
     });
   });
 });
\ No newline at end of file

From a5a05f67664a6147fad257d1d4ad26a3fa04eb3e Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 29 Jun 2026 14:19:17 +0300
Subject: [PATCH 048/155] New tokens: panel - WARNING - Question markup changed
 Fixes #11421

---
 .../src/default-theme/base-theme.ts           |   2 +-
 .../blocks/sd-complex-element.scss            |  23 ++
 .../src/default-theme/blocks/sd-panel.scss    |   9 +-
 .../default-theme/blocks/sd-paneldynamic.scss |  20 +-
 .../src/default-theme/blocks/sd-question.scss | 222 ++++++++++--------
 .../src/default-theme/blocks/sd-table.scss    |   1 +
 .../survey-core/src/defaultCss/defaultCss.ts  |   2 +
 packages/survey-core/src/question.ts          |  16 +-
 packages/survey-react-ui/src/panel.tsx        |   3 +-
 .../survey-react-ui/src/reactquestion.tsx     |  15 +-
 10 files changed, 206 insertions(+), 107 deletions(-)

diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index ebb1055ba5..6771b55b52 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -292,7 +292,7 @@ export default {
     "--sjs2-layout-component-panel-header-padding-left": "var(--sjs2-layout-component-panel-content-area-padding-horizontal)",
     "--sjs2-layout-component-panel-header-padding-right": "var(--sjs2-layout-component-panel-content-area-padding-horizontal)",
     "--sjs2-layout-component-panel-header-padding-top": "var(--sjs2-spacing-x400)",
-    "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-spacing-x400)",
+    "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-spacing-x200)",
     // "--sjs2-layout-component-panel-content-area-padding-horizontal": "var(--sjs2-layout-large-horizontal)",
     // "--sjs2-layout-component-panel-content-area-padding-top": "var(--sjs2-layout-medium-vertical)",
     // "--sjs2-layout-component-panel-content-area-padding-bottom": "var(--sjs2-layout-medium-vertical)",
diff --git a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
index 5b80603ff1..f4e05c1121 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
@@ -10,6 +10,15 @@
   margin-bottom: 0;
 }
 
+.sd-element__header ~ hr {
+  margin: 0 calc(-1 * var(--sd-base-padding));
+  margin-top: calc(0.5 * var(--sd-base-vertical-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+  border: none;
+  height: 1px;
+  background-color: $border-light;
+}
+
 .sd-element--complex > .sd-element__header {
   &:after {
     content: " ";
@@ -39,6 +48,16 @@
   }
 }
 
+.sd-element--nested.sd-element--complex>div>div {
+  & > .sd-element__header--location-top {
+    &~hr {
+      display: block;
+      margin: 0;
+      width: 100%;
+    }
+  }
+}
+
 .sd-element--nested-with-borders {
   border: 1px solid $border-light;
   border-radius: var(--sjs2-radius-component-panel-nested);
@@ -50,6 +69,10 @@
     padding-top: calc(0.5 * var(--sd-base-vertical-padding));
     padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
   }
+  & >div>div> .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__erbox {
   //   margin-left: calc(-1 * var(--sd-base-padding));
diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index 61dd1391ab..9829ffaa2b 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -42,6 +42,9 @@
  .sd-panel__header {
     padding: var(--sjs2-spacing-x200) var(--sjs2-spacing-x300);
   }
+  .sd-element--nested > .sd-panel__header {
+    padding: var(--sjs2-spacing-x100) var(--sjs2-spacing-x300);
+  }
  .sd-panel__content {
     padding: var(--sjs2-spacing-x300);
     gap: var(--sjs2-spacing-x200);
@@ -138,9 +141,9 @@
   padding-inline: var(--sjs2-layout-component-panel-description-padding-horizontal);
 }
 
-.sd-panel__header .sd-panel__description {
-  margin-top: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
-}
+// .sd-panel__header .sd-panel__description {
+//   margin-top: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
+// }
 
 .sd-panel > .sd-panel__header:after {
   background: var(--sjs2-color-component-panel-default-separator);
diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 30ae7ba1d7..8ccd38563a 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -7,9 +7,13 @@
         right: 0;
         height: 2px;
         z-index: 2;
-        transform: translateY(-1px);
+        // transform: translateY(-1px);
     }
 
+    .sd-progress ~ .sd-paneldynamic__panels-container {
+        padding-top: 1px;
+    }
+    
     & > .sd-panel {
         padding-top: 1px;
         padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
@@ -55,11 +59,24 @@
     }
 }
 
+.sd-question--paneldynamic {
+    &>.sd-question__container {
+        &>.sd-question__header-and-content-container {
+            padding: 0;
+            gap: 0;
+        }
+    }
+}
+
 .sd-paneldynamic__header {
   padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
   gap: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));
 }
 
+.sd-paneldynamic__header ~ hr {
+    display: none;
+}
+
 .sd-paneldynamic__footer {
     clear: both;
     padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x300)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
@@ -350,6 +367,7 @@
     // margin-right: calc(-1 * var(--sd-base-padding));
     // padding-right: var(--sd-base-padding);
 }
+
 .sd-paneldynamic__panel-wrapper {
     box-sizing: border-box;
     position: relative;
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index aed9e34b85..f4a24b6e8c 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -5,47 +5,83 @@
   position: relative;
 }
 
-.sd-question--left {
+.sd-question__container {
+  display: flex;
+  flex-direction: column;
+  row-gap: calc(0.5 * var(--sd-base-vertical-padding));
+  column-gap: var(--sjs2-spacing-x300);
+}
+
+.sd-element--with-frame > .sd-question__container {
+  gap: 0;
+}
+
+.sd-question__header-and-content-container {
   display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
+  flex-direction: column;
+  padding-top: var(--sd-base-vertical-padding);
+  padding-left: var(--sjs2-layout-component-question-content-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
+  padding-right: var(--sjs2-layout-component-question-content-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
+  padding-bottom: var(--sd-base-padding);
+  row-gap: calc(0.5 * var(--sd-base-vertical-padding));
   column-gap: var(--sjs2-spacing-x300);
-  row-gap: calc(0.25 * var(--sd-base-vertical-padding));
-  align-items: anchor-center;
 }
 
+.sd-question--left {
+  .sd-question__header-and-content-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: var(--sjs2-spacing-x300);
+    // row-gap: calc(0.25 * var(--sd-base-vertical-padding));
+    padding-top: var(--sd-base-padding);
+  }
+}
+
+.sd-element--nested > div > .sd-question__header-and-content-container {
+  padding: 0;
+}
+
+// .sd-question--left {
+//   display: flex;
+//   flex-wrap: wrap;
+//   flex-direction: row;
+//   column-gap: var(--sjs2-spacing-x300);
+//   row-gap: calc(0.25 * var(--sd-base-vertical-padding));
+//   align-items: anchor-center;
+// }
+
 .sd-question__header {
-  padding-top: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
-  padding-bottom: var(--sjs2-layout-component-question-header-padding-bottom, calc(0.5 * var(--sd-base-vertical-padding)));
-  padding-left: var(--sjs2-layout-component-question-header-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
-  padding-right: var(--sjs2-layout-component-question-header-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
+  // padding-top: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
+  // padding-bottom: var(--sjs2-layout-component-question-header-padding-bottom, calc(0.5 * var(--sd-base-vertical-padding)));
+  // padding-left: var(--sjs2-layout-component-question-header-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
+  // padding-right: var(--sjs2-layout-component-question-header-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
   row-gap: var(--sjs2-layout-component-question-header-gap-vertical, var(--sjs2-spacing-x050));
   column-gap: var(--sjs2-layout-component-question-header-gap-horizontal, var(--sjs2-spacing-x150));
 }
 
 .sd-question__header--location--left {
-  padding-right: 0;
-  padding-bottom: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
+  // padding-right: 0;
+  // padding-bottom: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
   display: inline-block;
   width: auto;
-  // vertical-align: top;
-  // margin-top: var(--sjs2-spacing-x150);
+  vertical-align: top;
+  margin-top: var(--sjs2-spacing-x150);
 }
 
-.sd-question--title-bottom {
-  .sd-question__content {
-    padding-top: var(--sd-base-padding);
-    padding-bottom: 0;
-  }
-  .sd-question__header--location--bottom {
-    padding-top: calc(0.375 * var(--sd-base-vertical-padding));
-    padding-bottom: var(--sjs2-spacing-x500);
-  }
-}
+// .sd-question--title-bottom {
+//   .sd-question__content {
+//     padding-top: var(--sd-base-padding);
+//     padding-bottom: 0;
+//   }
+//   .sd-question__header--location--bottom {
+//     padding-top: calc(0.375 * var(--sd-base-vertical-padding));
+//     padding-bottom: var(--sjs2-spacing-x500);
+//   }
+// }
 
 .sd-question__title {
   @include sjs2--typography--component--question--title;
-  padding: var(--sjs2-layout-component-question-title-padding-vertical) var(--sjs2-layout-component-question-title-padding-horizontal);
+  // padding: var(--sjs2-layout-component-question-title-padding-vertical) var(--sjs2-layout-component-question-title-padding-horizontal);
 }
 
 .sd-question__title--empty {
@@ -60,58 +96,54 @@
   color: $font-questiondescription-color;
   white-space: normal;
   padding-inline: var(--sjs2-layout-component-question-description-padding-horizontal);
-  padding-top: var(--sjs2-layout-component-question-description-padding-top);
-  padding-bottom: var(--sjs2-layout-component-question-description-padding-bottom);
+  // padding-top: var(--sjs2-layout-component-question-description-padding-top);
+  // padding-bottom: var(--sjs2-layout-component-question-description-padding-bottom);
 }
 
-.sd-question__content {
-  box-sizing: border-box;
-  padding-left: var(--sjs2-layout-component-question-content-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
-  padding-right: var(--sjs2-layout-component-question-content-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
-  padding-bottom: var(--sd-base-padding);
-}
+// .sd-question__content {
+//   box-sizing: border-box;
+// }
 
-.sd-question__content--left {
-  display: inline-block;
-  flex: 1;
-  padding-top: var(--sd-base-padding);
-  padding-left: 0;
-  // margin-top: calc(0.25 * var(--sd-base-vertical-padding)) 0;
-  max-width: 100%;
-}
+// .sd-question__content--left {
+//   display: inline-block;
+//   flex: 1;
+//   padding-top: var(--sd-base-padding);
+//   padding-left: 0;
+//   // margin-top: calc(0.25 * var(--sd-base-vertical-padding)) 0;
+//   max-width: 100%;
+// }
 
 // .sd-element--with-frame>.sd-question__content--left {
 //   margin: 0;
 // }
 
-.sd-question:not(.sd-element--with-frame) {
-  >.sd-question__header {
-    padding-top: 0;
-    padding-left: 0;
-    padding-right: 0;
-  }
-  >.sd-question__content {
-    padding: 0;
-  }
-}
-
-.sd-root-modern--mobile {
-  .sd-question__header {
-    padding-top: var(--sjs2-spacing-x200);
-    padding-left: var(--sjs2-spacing-x300);
-    padding-right: var(--sjs2-spacing-x300);
-    padding-bottom: var(--sjs2-spacing-x100);
-  }
+// .sd-question:not(.sd-element--with-frame) {
+//   >.sd-question__header {
+//     padding-top: 0;
+//     padding-left: 0;
+//     padding-right: 0;
+//   }
+//   >.sd-question__content {
+//     padding: 0;
+//   }
+// }
 
-  .sd-question__content {
-    padding-left: var(--sjs2-spacing-x300);
-    padding-right: var(--sjs2-spacing-x300);
-    padding-bottom: var(--sjs2-spacing-x300);
-  }
-}
+// .sd-root-modern--mobile {
+//   .sd-question__header {
+//     padding-top: var(--sjs2-spacing-x200);
+//     padding-left: var(--sjs2-spacing-x300);
+//     padding-right: var(--sjs2-spacing-x300);
+//     padding-bottom: var(--sjs2-spacing-x100);
+//   }
+
+//   .sd-question__content {
+//     padding-left: var(--sjs2-spacing-x300);
+//     padding-right: var(--sjs2-spacing-x300);
+//     padding-bottom: var(--sjs2-spacing-x300);
+//   }
+// }
 
 .sd-question--no-pointer-events {
-
   .sd-selectbase,
   .sd-rating {
     label {
@@ -120,53 +152,53 @@
   }
 }
 
-.sd-element__erbox--above-element {
-  margin-bottom: var(--sjs2-spacing-x100);
-}
+// .sd-element__erbox--above-element {
+//   margin-bottom: var(--sjs2-spacing-x100);
+// }
 
-.sd-question__erbox--below-question {
-  margin-top: var(--sjs2-spacing-x100);
-}
+// .sd-question__erbox--below-question {
+//   margin-top: var(--sjs2-spacing-x100);
+// }
 
 .sd-question__content--support-container-queries {
   container-type: inline-size;
 }
 
-.sd-question--title-top>.sd-question__erbox--above-question {
-  margin-bottom: calc(0.5 * var(--sd-base-vertical-padding));
-}
+// .sd-question--title-top>.sd-question__erbox--above-question {
+//   margin-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+// }
 
-.sd-question--description-under-input>.sd-question__erbox--below-question,
-.sd-question--title-bottom>.sd-question__erbox--below-question {
-  margin-top: calc(0.25 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x050));
-}
+// .sd-question--description-under-input>.sd-question__erbox--below-question,
+// .sd-question--title-bottom>.sd-question__erbox--below-question {
+//   margin-top: calc(0.25 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x050));
+// }
 
-.sd-element--with-frame>.sd-element__erbox--above-element {
-  margin-bottom: var(--sd-base-padding);
+.sd-element--with-frame>div>.sd-element__erbox--above-element {
+  // margin-bottom: var(--sd-base-padding);
   border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
 }
 
-.sd-question--left>.sd-element__erbox--above-element {
-  margin-bottom: 0;
-}
+// .sd-question--left>.sd-element__erbox--above-element {
+//   margin-bottom: 0;
+// }
 
-.sd-element--with-frame.sd-question--left>.sd-element__erbox--above-element {
-  margin-bottom: calc(1 * var(--sd-base-vertical-padding));
-}
+// .sd-element--with-frame.sd-question--left>.sd-element__erbox--above-element {
+//   margin-bottom: calc(1 * var(--sd-base-vertical-padding));
+// }
 
-.sd-element--with-frame>.sd-question__erbox--below-question {
-  margin-top: auto;
+.sd-element--with-frame>div>.sd-question__erbox--below-question {
+  // margin-top: auto;
   border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);
 }
 
-.sd-element--with-frame.sd-question--title-top>.sd-question__erbox--above-question {
-  margin-bottom: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
-}
+// .sd-element--with-frame.sd-question--title-top>.sd-question__erbox--above-question {
+//   margin-bottom: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
+// }
 
-.sd-element--with-frame.sd-question--description-under-input>.sd-question__erbox--below-question,
-.sd-element--with-frame.sd-question--title-bottom>.sd-question__erbox--below-question {
-  margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
-}
+// .sd-element--with-frame.sd-question--description-under-input>.sd-question__erbox--below-question,
+// .sd-element--with-frame.sd-question--title-bottom>.sd-question__erbox--below-question {
+//   margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
+// }
 
 .sd-question__description--under-input {
   padding-top: calc(0.375 * var(--sd-base-vertical-padding));
diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 434e36a285..4d01192773 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -513,6 +513,7 @@
   }
   .sd-table-wrapper {
     width: auto;
+    margin-top: calc(-1 * var(--sjs2-spacing-x100));
   }
   .sd-table {
     display: block;
diff --git a/packages/survey-core/src/defaultCss/defaultCss.ts b/packages/survey-core/src/defaultCss/defaultCss.ts
index 98ff718d6a..0b2ae392c2 100644
--- a/packages/survey-core/src/defaultCss/defaultCss.ts
+++ b/packages/survey-core/src/defaultCss/defaultCss.ts
@@ -261,6 +261,8 @@ export var defaultCss = {
     summaryRowAction: "sd-summary-row-action",
     summaryRowActionEdit: "sd-summary-row-action sd-summary-row-action--edit",
     summaryRowActionDelete: "sd-summary-row-action sd-summary-row-action--delete",
+    questionContainer: "sd-question__container",
+    headerAndContentContainer: "sd-question__header-and-content-container"
   },
   image: {
     mainRoot: "sd-element sd-question sd-question--image",
diff --git a/packages/survey-core/src/question.ts b/packages/survey-core/src/question.ts
index 2277816e7a..202e7a078d 100644
--- a/packages/survey-core/src/question.ts
+++ b/packages/survey-core/src/question.ts
@@ -1526,7 +1526,21 @@ export class Question extends SurveyElement<Question>
       .append(this.cssClasses.invisible, !this.isDesignMode && this.areInvisibleElementsShowing && !this.visible)
       .toString();
   }
-
+  public getQuestionContainerCss(): string {
+    return new CssClassBuilder()
+      .append(this.cssClasses.questionContainer)
+      .toString();
+  }
+  public getHeaderAndContentContainerCss(): string {
+    return new CssClassBuilder()
+      .append(this.cssClasses.headerAndContentContainer)
+      .toString();
+  }
+  public get isComplexQuestion(): boolean {
+    const rootCss = this.getRootCss() || "";
+    return rootCss.indexOf("sd-element--complex") > -1;
+    // return this.isContainer || !!this.singleInputQuestion;
+  }
   public getQuestionRootCss() {
     return new CssClassBuilder()
       .append(this.cssClasses.root)
diff --git a/packages/survey-react-ui/src/panel.tsx b/packages/survey-react-ui/src/panel.tsx
index d70629e8d2..6c453ee844 100644
--- a/packages/survey-react-ui/src/panel.tsx
+++ b/packages/survey-react-ui/src/panel.tsx
@@ -27,7 +27,8 @@ export class SurveyPanel extends SurveyPanelBase {
         creator={this.creator}
       />
     );
-    const panelPaddingHorizontal = "var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500))";
+    // const panelPaddingHorizontal = "var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500))";
+    const panelPaddingHorizontal = "var(--sd-base-padding, var(--sjs2-spacing-x500))";
     const style: React.CSSProperties = {
       paddingInlineStart: this.panel.innerPaddingLeft
         ? `calc(${panelPaddingHorizontal} + ${this.panel.innerPaddingLeft})`
diff --git a/packages/survey-react-ui/src/reactquestion.tsx b/packages/survey-react-ui/src/reactquestion.tsx
index c9374ae126..d1fa80dd06 100644
--- a/packages/survey-react-ui/src/reactquestion.tsx
+++ b/packages/survey-react-ui/src/reactquestion.tsx
@@ -162,11 +162,16 @@ export class SurveyQuestion extends SurveyElementBase<any, any> {
           aria-expanded={question.ariaExpanded}
         >
           {singleBreadcrumbs}
-          {errorsAboveQuestion}
-          {headerTop}
-          {questionContent}
-          {headerBottom}
-          {errorsBelowQuestion}
+          <div className={question.getQuestionContainerCss()}>
+            {errorsAboveQuestion}
+            <div className={question.getHeaderAndContentContainerCss()}>
+              {headerTop}
+              {question.isComplexQuestion ? <hr /> : null}
+              {questionContent}
+              {headerBottom}
+            </div>
+            {errorsBelowQuestion}
+          </div>
         </div>
       </>
     );

From fb7142ed3aa115de30bb1233e2c6602cfc0c093c Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 29 Jun 2026 15:05:04 +0300
Subject: [PATCH 049/155] Fixed build after merge

---
 .../survey-core/src/default-theme/blocks/sd-dropdown.scss    | 2 +-
 .../src/default-theme/blocks/sd-paneldynamic.scss            | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-dropdown.scss b/packages/survey-core/src/default-theme/blocks/sd-dropdown.scss
index 96cc4827a0..4feb58bf99 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-dropdown.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-dropdown.scss
@@ -6,13 +6,13 @@
   position: relative;
 }
 .sd-dropdown--select {
+  justify-content: end;
   &:before {
     pointer-events: none;
     content: "";
     @include sjs2--typography--component--input--content;
     min-height: calc(1lh + var(--sjs2-layout-component-input-medium-content-padding-vertical) * 2);
   }
-  justify-content: end;
   select.sd-dropdown__input {
     position: absolute;
     padding: 
diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 76c35aaa3f..e4ff4e8935 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -13,7 +13,7 @@
     .sd-progress ~ .sd-paneldynamic__panels-container {
         padding-top: 1px;
     }
-    
+
     & > .sd-panel {
         padding-top: 1px;
         padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
@@ -213,9 +213,6 @@
     &.sd-action-bar--empty {
         display: none;
     }
-}
-
-
     .sd-action-bar__item:not(.sd-action-bar__item--hidden) {
         margin-bottom: var(--sjs2-spacing-negative-x100);
     }

From de4929246bac0ac534b4cf6bc76bed14e63bf336 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 09:34:51 +0300
Subject: [PATCH 050/155] New tokens: question layout - fixed compact mode
 Fixes #11421

---
 .../survey-core/src/default-theme/blocks/sd-question.scss   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index dd7987bee3..4e6802b379 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -41,6 +41,12 @@
   padding: 0;
 }
 
+.sd-root--compact {
+  .sd-question__header-and-content-container {
+    padding: 0;
+  }
+}
+
 // .sd-question--left {
 //   display: flex;
 //   flex-wrap: wrap;

From 749f93e7d0f617562a19858fb1796ceadbbae239 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 09:51:24 +0300
Subject: [PATCH 051/155] Removed question paddings for elements without frame

---
 .../survey-core/src/default-theme/blocks/sd-question.scss  | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 4e6802b379..3bd2b0e7ff 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -47,6 +47,13 @@
   }
 }
 
+.sd-question:not(.sd-element--with-frame) > .sd-question__container {
+  .sd-question__header-and-content-container {
+    padding: 0;
+  }
+}
+
+
 // .sd-question--left {
 //   display: flex;
 //   flex-wrap: wrap;

From ce6445d26c1b1f700ed62853310d56f57144b825 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 12:51:28 +0300
Subject: [PATCH 052/155] Fixed question header row gap and added temporary fix
 for error bottom spacing

---
 .../src/default-theme/blocks/sd-question.scss | 83 +++++++++++--------
 1 file changed, 50 insertions(+), 33 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 3bd2b0e7ff..a1a4ffa77d 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -53,6 +53,16 @@
   }
 }
 
+// TODO: remove this during tockens update
+.sd-question__erbox ~ .sd-question__header-and-content-container {
+  padding-top: var(--sjs2-spacing-x300);
+}
+.sd-root-modern--mobile {
+  .sd-question__erbox ~ .sd-question__header-and-content-container {
+    padding-top: var(--sd-base-vertical-padding);
+  }
+}
+// END TODO: remove this during tockens update
 
 // .sd-question--left {
 //   display: flex;
@@ -64,6 +74,8 @@
 // }
 
 .sd-question__header {
+  display: flex;
+  flex-direction: column;
   // padding-top: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
   // padding-bottom: var(--sjs2-layout-component-question-header-padding-bottom, calc(0.5 * var(--sd-base-vertical-padding)));
   // padding-left: var(--sjs2-layout-component-question-header-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
@@ -186,11 +198,21 @@
 //   margin-top: calc(0.25 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x050));
 // }
 
+.sd-element--with-frame>div>.sd-element__erbox {
+    position: sticky;
+    left: 0;
+}
+
 .sd-element--with-frame>div>.sd-element__erbox--above-element {
   // margin-bottom: var(--sd-base-padding);
   border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
 }
 
+.sd-element--with-frame>div>.sd-question__erbox--below-question {
+  // margin-top: auto;
+  border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);
+}
+
 // .sd-question--left>.sd-element__erbox--above-element {
 //   margin-bottom: 0;
 // }
@@ -199,11 +221,6 @@
 //   margin-bottom: calc(1 * var(--sd-base-vertical-padding));
 // }
 
-.sd-element--with-frame>div>.sd-question__erbox--below-question {
-  // margin-top: auto;
-  border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);
-}
-
 // .sd-element--with-frame.sd-question--title-top>.sd-question__erbox--above-question {
 //   margin-bottom: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
 // }
@@ -221,34 +238,34 @@
 //   margin-top: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
 // }
 
-.sd-element--with-frame {
-  // &.sd-question--title-top {
-  //   padding-top: var(--sd-base-vertical-padding);
-  // }
-
-  // &.sd-question--error-top {
-  //   padding-top: 0;
-  // }
-
-  // &.sd-question--error-bottom {
-  //   padding-bottom: 0;
-  //   display: flex;
-  //   flex-direction: column;
-
-  //   // &>.sd-question__content {
-  //   //   margin-bottom: var(--sd-base-padding);
-  //   // }
-  // }
-
-  &>.sd-element__erbox {
-    // margin-left: calc(-1 * var(--sd-base-padding));
-    // margin-right: calc(-1 * var(--sd-base-padding));
-    // width: calc(100% + 2 * var(--sd-base-padding));
-    position: sticky;
-    left: 0;
-    // left: calc(-1 * var(--sd-base-padding));
-  }
-}
+// .sd-element--with-frame {
+//   // &.sd-question--title-top {
+//   //   padding-top: var(--sd-base-vertical-padding);
+//   // }
+
+//   // &.sd-question--error-top {
+//   //   padding-top: 0;
+//   // }
+
+//   // &.sd-question--error-bottom {
+//   //   padding-bottom: 0;
+//   //   display: flex;
+//   //   flex-direction: column;
+
+//   //   // &>.sd-question__content {
+//   //   //   margin-bottom: var(--sd-base-padding);
+//   //   // }
+//   // }
+
+//   &>.sd-element__erbox {
+//     // margin-left: calc(-1 * var(--sd-base-padding));
+//     // margin-right: calc(-1 * var(--sd-base-padding));
+//     // width: calc(100% + 2 * var(--sd-base-padding));
+//     position: sticky;
+//     left: 0;
+//     // left: calc(-1 * var(--sd-base-padding));
+//   }
+// }
 
 .sd-scrollable .sd-question__content {
   overflow-x: auto;

From a1cadcc9941f0477bb845adf296098e6083da9a1 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 15:15:21 +0300
Subject: [PATCH 053/155] Fixed boolean question top padding

---
 packages/survey-core/src/default-theme/blocks/sd-boolean.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-boolean.scss b/packages/survey-core/src/default-theme/blocks/sd-boolean.scss
index 8821cc82b9..4e393e9605 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-boolean.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-boolean.scss
@@ -183,4 +183,8 @@
   .sd-item__control-label {
     display: flex;
   }
+  // TODO: remove this during tockens update
+  &.sd-element--with-frame > .sd-question__container > .sd-question__header-and-content-container {
+    padding-top: var(--sd-base-padding);
+  }
 }

From f46ece9a31db8de979d91ea6dec8dc93d053a951 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 15:15:58 +0300
Subject: [PATCH 054/155] Fixed table w/o header top paddings

---
 packages/survey-core/src/default-theme/blocks/sd-table.scss | 4 ++--
 packages/survey-react-ui/src/reactquestion.tsx              | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 3add9485da..a4b5699acc 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -74,7 +74,7 @@
 }
 
 .sd-table--no-header {
-  padding-top: var(--sjs2-spacing-x300);
+  padding-top: var(--sjs2-spacing-x100);
 }
 
 .sd-panel:not(.sd-panel--as-page) {
@@ -516,7 +516,7 @@
   }
   .sd-table-wrapper {
     width: auto;
-    margin-top: calc(-1 * var(--sjs2-spacing-x100));
+    margin-top: calc(-2 * var(--sjs2-spacing-x100));
   }
   .sd-table {
     display: block;
diff --git a/packages/survey-react-ui/src/reactquestion.tsx b/packages/survey-react-ui/src/reactquestion.tsx
index d1fa80dd06..0cf0329694 100644
--- a/packages/survey-react-ui/src/reactquestion.tsx
+++ b/packages/survey-react-ui/src/reactquestion.tsx
@@ -166,7 +166,7 @@ export class SurveyQuestion extends SurveyElementBase<any, any> {
             {errorsAboveQuestion}
             <div className={question.getHeaderAndContentContainerCss()}>
               {headerTop}
-              {question.isComplexQuestion ? <hr /> : null}
+              {headerTop && question.isComplexQuestion ? <hr /> : null}
               {questionContent}
               {headerBottom}
             </div>

From a7904307063a91efcd934ba6f4f9087b01f3932e Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 15:28:35 +0300
Subject: [PATCH 055/155] Rollback

---
 packages/survey-core/src/default-theme/blocks/sd-table.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index a4b5699acc..e167a0761e 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -516,7 +516,7 @@
   }
   .sd-table-wrapper {
     width: auto;
-    margin-top: calc(-2 * var(--sjs2-spacing-x100));
+    margin-top: calc(-1 * var(--sjs2-spacing-x100));
   }
   .sd-table {
     display: block;

From b37ce5763156fe67441eb8e99b8f1f061c8e9e38 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 15:40:08 +0300
Subject: [PATCH 056/155] Rollback

---
 packages/survey-core/src/default-theme/blocks/sd-table.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index e167a0761e..3add9485da 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -74,7 +74,7 @@
 }
 
 .sd-table--no-header {
-  padding-top: var(--sjs2-spacing-x100);
+  padding-top: var(--sjs2-spacing-x300);
 }
 
 .sd-panel:not(.sd-panel--as-page) {

From 8a35b5e3690061fe705e927ed42b36d827add466 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 15:53:02 +0300
Subject: [PATCH 057/155] Rollback

---
 .../survey-core/src/default-theme/blocks/sd-boolean.scss    | 6 +++---
 packages/survey-react-ui/src/reactquestion.tsx              | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-boolean.scss b/packages/survey-core/src/default-theme/blocks/sd-boolean.scss
index 4e393e9605..464b9848f2 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-boolean.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-boolean.scss
@@ -184,7 +184,7 @@
     display: flex;
   }
   // TODO: remove this during tockens update
-  &.sd-element--with-frame > .sd-question__container > .sd-question__header-and-content-container {
-    padding-top: var(--sd-base-padding);
-  }
+  // &.sd-element--with-frame > .sd-question__container > .sd-question__header-and-content-container {
+  //   padding-top: var(--sd-base-padding);
+  // }
 }
diff --git a/packages/survey-react-ui/src/reactquestion.tsx b/packages/survey-react-ui/src/reactquestion.tsx
index 0cf0329694..d1fa80dd06 100644
--- a/packages/survey-react-ui/src/reactquestion.tsx
+++ b/packages/survey-react-ui/src/reactquestion.tsx
@@ -166,7 +166,7 @@ export class SurveyQuestion extends SurveyElementBase<any, any> {
             {errorsAboveQuestion}
             <div className={question.getHeaderAndContentContainerCss()}>
               {headerTop}
-              {headerTop && question.isComplexQuestion ? <hr /> : null}
+              {question.isComplexQuestion ? <hr /> : null}
               {questionContent}
               {headerBottom}
             </div>

From 9abbeb2d6d8afc5a7f3985c812ddce8da7b82417 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 16:08:44 +0300
Subject: [PATCH 058/155] Try to fix boolean top padding

---
 .../survey-core/src/default-theme/blocks/sd-boolean.scss    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-boolean.scss b/packages/survey-core/src/default-theme/blocks/sd-boolean.scss
index 464b9848f2..4e393e9605 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-boolean.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-boolean.scss
@@ -184,7 +184,7 @@
     display: flex;
   }
   // TODO: remove this during tockens update
-  // &.sd-element--with-frame > .sd-question__container > .sd-question__header-and-content-container {
-  //   padding-top: var(--sd-base-padding);
-  // }
+  &.sd-element--with-frame > .sd-question__container > .sd-question__header-and-content-container {
+    padding-top: var(--sd-base-padding);
+  }
 }

From 15c4428b7ed3f6da4b514f63e8deb58473410008 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 16:22:05 +0300
Subject: [PATCH 059/155] Layout fixes

---
 .../survey-core/src/default-theme/blocks/sd-boolean.scss    | 4 ----
 .../survey-core/src/default-theme/blocks/sd-question.scss   | 6 ++++++
 packages/survey-core/src/default-theme/blocks/sd-table.scss | 2 +-
 packages/survey-react-ui/src/reactquestion.tsx              | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-boolean.scss b/packages/survey-core/src/default-theme/blocks/sd-boolean.scss
index 4e393e9605..8821cc82b9 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-boolean.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-boolean.scss
@@ -183,8 +183,4 @@
   .sd-item__control-label {
     display: flex;
   }
-  // TODO: remove this during tockens update
-  &.sd-element--with-frame > .sd-question__container > .sd-question__header-and-content-container {
-    padding-top: var(--sd-base-padding);
-  }
 }
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index a1a4ffa77d..31bd6c4c9c 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -12,6 +12,12 @@
   column-gap: var(--sjs2-spacing-x300);
 }
 
+.sd-element--nested {
+  &>.sd-question__container {
+    row-gap: var(--sjs2-spacing-x100);
+  }
+}
+
 .sd-element--with-frame > .sd-question__container {
   gap: 0;
 }
diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 3add9485da..e167a0761e 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -74,7 +74,7 @@
 }
 
 .sd-table--no-header {
-  padding-top: var(--sjs2-spacing-x300);
+  padding-top: var(--sjs2-spacing-x100);
 }
 
 .sd-panel:not(.sd-panel--as-page) {
diff --git a/packages/survey-react-ui/src/reactquestion.tsx b/packages/survey-react-ui/src/reactquestion.tsx
index d1fa80dd06..0cf0329694 100644
--- a/packages/survey-react-ui/src/reactquestion.tsx
+++ b/packages/survey-react-ui/src/reactquestion.tsx
@@ -166,7 +166,7 @@ export class SurveyQuestion extends SurveyElementBase<any, any> {
             {errorsAboveQuestion}
             <div className={question.getHeaderAndContentContainerCss()}>
               {headerTop}
-              {question.isComplexQuestion ? <hr /> : null}
+              {headerTop && question.isComplexQuestion ? <hr /> : null}
               {questionContent}
               {headerBottom}
             </div>

From a2a585ddae770ac46a1b4a20ebcb03e4e62e33f2 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 16:43:00 +0300
Subject: [PATCH 060/155] Layout fixes

---
 .../survey-core/src/default-theme/blocks/sd-question.scss   | 6 ++++++
 packages/survey-react-ui/src/reactquestion.tsx              | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index a1a4ffa77d..31bd6c4c9c 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -12,6 +12,12 @@
   column-gap: var(--sjs2-spacing-x300);
 }
 
+.sd-element--nested {
+  &>.sd-question__container {
+    row-gap: var(--sjs2-spacing-x100);
+  }
+}
+
 .sd-element--with-frame > .sd-question__container {
   gap: 0;
 }
diff --git a/packages/survey-react-ui/src/reactquestion.tsx b/packages/survey-react-ui/src/reactquestion.tsx
index d1fa80dd06..0cf0329694 100644
--- a/packages/survey-react-ui/src/reactquestion.tsx
+++ b/packages/survey-react-ui/src/reactquestion.tsx
@@ -166,7 +166,7 @@ export class SurveyQuestion extends SurveyElementBase<any, any> {
             {errorsAboveQuestion}
             <div className={question.getHeaderAndContentContainerCss()}>
               {headerTop}
-              {question.isComplexQuestion ? <hr /> : null}
+              {headerTop && question.isComplexQuestion ? <hr /> : null}
               {questionContent}
               {headerBottom}
             </div>

From a27d0bbbc9ccd92dc4c00c8205f0d41c2c4b58ba Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 17:09:54 +0300
Subject: [PATCH 061/155] Fixed paneldynamic footer buttons right edge position

---
 .../survey-core/src/default-theme/blocks/sd-paneldynamic.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index e4ff4e8935..97f0d8ff24 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -98,7 +98,7 @@
     }
     .sd-paneldynamic__panel-footer {
         padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x200)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-spacing-x200));
-        margin-right: calc(1.5 * var(--sjs2-spacing-negative-x050));
+        // margin-right: calc(1.5 * var(--sjs2-spacing-negative-x050));
         margin-top: calc(var(--sjs2-spacing-negative-x400));
     }
 }
@@ -204,7 +204,7 @@
     position: relative;
     // top: calc(0.5 * var(--sd-base-vertical-padding));
     padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x300)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
-    margin-right: calc(var(--sjs2-spacing-negative-x150) + var(--sjs2-spacing-negative-x025));
+    // margin-right: calc(var(--sjs2-spacing-negative-x150) + var(--sjs2-spacing-negative-x025));
     justify-content: flex-end;
     padding-top: 0;
     margin-top: calc(var(--sjs2-spacing-negative-x300));

From c71943baec9946ae7bfd9fdec0e326ce39f3cae3 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 17:22:55 +0300
Subject: [PATCH 062/155] Fixed line below panel dynamic header

---
 .../survey-core/src/default-theme/blocks/sd-paneldynamic.scss  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 97f0d8ff24..e2d4976cc5 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -74,7 +74,8 @@
 }
 
 .sd-paneldynamic__header ~ hr {
-    display: none;
+    margin: 0;
+    width: 100%;
 }
 
 .sd-paneldynamic__footer {

From c9390cbe1d18080d1fe3d37578480057d09fe9c3 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 18:03:28 +0300
Subject: [PATCH 063/155] Fixes of question layout

---
 .../src/default-theme/blocks/sd-question.scss  | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 31bd6c4c9c..e549cd241f 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -38,7 +38,7 @@
     flex-direction: row;
     flex-wrap: wrap;
     column-gap: var(--sjs2-spacing-x300);
-    // row-gap: calc(0.25 * var(--sd-base-vertical-padding));
+    row-gap: var(--sjs2-spacing-x100);
     padding-top: var(--sd-base-padding);
   }
 }
@@ -59,17 +59,6 @@
   }
 }
 
-// TODO: remove this during tockens update
-.sd-question__erbox ~ .sd-question__header-and-content-container {
-  padding-top: var(--sjs2-spacing-x300);
-}
-.sd-root-modern--mobile {
-  .sd-question__erbox ~ .sd-question__header-and-content-container {
-    padding-top: var(--sd-base-vertical-padding);
-  }
-}
-// END TODO: remove this during tockens update
-
 // .sd-question--left {
 //   display: flex;
 //   flex-wrap: wrap;
@@ -99,6 +88,11 @@
   margin-top: var(--sjs2-spacing-x150);
 }
 
+.sd-question__content--left {
+  flex: 1;
+  max-width: 100%;
+}
+
 // .sd-question--title-bottom {
 //   .sd-question__content {
 //     padding-top: var(--sd-base-padding);

From 29102d92b0c9328304b2d4b35a6898ec37fb02c5 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 18:06:20 +0300
Subject: [PATCH 064/155] Rollback

---
 .../survey-core/src/default-theme/blocks/sd-question.scss   | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index e549cd241f..a9106aa01e 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -12,12 +12,6 @@
   column-gap: var(--sjs2-spacing-x300);
 }
 
-.sd-element--nested {
-  &>.sd-question__container {
-    row-gap: var(--sjs2-spacing-x100);
-  }
-}
-
 .sd-element--with-frame > .sd-question__container {
   gap: 0;
 }

From 95e8b1cd98f4ad6d7d62f65ca40cd9578407baaa Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 30 Jun 2026 18:52:28 +0300
Subject: [PATCH 065/155] Fixed "panel as page" mode

---
 .../survey-core/src/default-theme/blocks/sd-panel.scss   | 9 +++++++--
 packages/survey-core/src/page.ts                         | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index 83bd79539e..ddb2e4baa4 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -2,6 +2,8 @@
 @use "../typography-mixins.scss" as *;
 
 .sd-panel {
+  display: flex;
+  flex-direction: column;
   position: relative;
   padding-inline-start:  var(--sjs2-layout-component-panel-box-padding-horizontal, var(--sjs2-spacing-x000));
   padding-inline-end: var(--sjs2-layout-component-panel-box-padding-horizontal, var(--sjs2-spacing-x000));
@@ -11,6 +13,8 @@
 }
 
 .sd-panel__header {
+  display: flex;
+  flex-direction: column;
   padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
   gap: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));
 }
@@ -53,8 +57,8 @@
 
 .sd-panel.sd-panel--as-page {
   & > .sd-panel__header.sd-panel__header {
-    padding-top: 0;
-    padding-bottom: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
+    padding: 0;
+    padding-bottom: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x150));
 
     &:after {
       content: none;
@@ -99,6 +103,7 @@
 
   & > .sd-panel__content {
     padding: 0;
+    row-gap: var(--sjs2-spacing-x200);
   }
 }
 
diff --git a/packages/survey-core/src/page.ts b/packages/survey-core/src/page.ts
index 13028e3551..43d0e2f561 100644
--- a/packages/survey-core/src/page.ts
+++ b/packages/survey-core/src/page.ts
@@ -232,10 +232,10 @@ export class PageModel extends PanelModel implements IPage {
       .toString();
   }
   public get cssHeader(): string {
-    return this.cssClasses.page.header;
+    return this.cssClasses.page?.header || this.cssClasses.panel?.header;
   }
   public get cssContent(): string {
-    return this.cssClasses.page.content;
+    return this.cssClasses.page?.content || this.cssClasses.panel?.content;
   }
   protected getCssError(cssClasses: any): string {
     if (this.isPanel) return super.getCssError(cssClasses);

From a719babcba987812123b32d8954839b8bb3982d3 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 12:16:15 +0300
Subject: [PATCH 066/155] Fixed panel header

---
 .../src/default-theme/blocks/sd-panel.scss          | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index ddb2e4baa4..badf946c34 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -13,10 +13,10 @@
 }
 
 .sd-panel__header {
-  display: flex;
-  flex-direction: column;
+  // display: flex;
+  // flex-direction: column;
   padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
-  gap: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));
+  // gap: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));
 }
 
 .sd-panel__title {
@@ -146,9 +146,10 @@
   padding-inline: var(--sjs2-layout-component-panel-description-padding-horizontal);
 }
 
-// .sd-panel__header .sd-panel__description {
-//   margin-top: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
-// }
+.sd-panel__title ~ .sd-panel__description {
+  // margin-top: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
+  margin-top: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));
+}
 
 .sd-panel > .sd-panel__header:after {
   background: var(--sjs2-color-component-panel-default-separator);

From d4bb360f05d9698439a86575ea974efbb9e15742 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 13:11:19 +0300
Subject: [PATCH 067/155] Fixed question layout: collapsed, error/header bottom

---
 .../blocks/sd-collapsed-element.scss          | 79 +++++++++++--------
 .../src/default-theme/blocks/sd-question.scss | 24 +++++-
 2 files changed, 68 insertions(+), 35 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
index c0603e636f..79cce6c472 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
@@ -1,42 +1,59 @@
 @use "../variables.scss" as *;
 
-.sd-element--expanded,
-.sd-element--collapsed {
-  &>.sd-element__header {
-    cursor: pointer;
-  }
-}
+// .sd-element--expanded > div > div,
+// .sd-element--collapsed > div > div {
+//   &>.sd-element__header {
+//     cursor: pointer;
+//   }
+// }
 
-.sd-element--collapsed {
-  &>.sd-element__header {
-    // padding: var(--sjs2-spacing-x000) var(--sd-base-padding);
-    box-sizing: border-box;
-    background-color: $background;
-    // margin-inline-start: calc(-1 * var(--sd-base-padding));
-    // width: calc(100% + 2 * var(--sd-base-padding));
-  }
+// .sd-element--collapsed {
+//   &>.sd-element__header {
+//     // padding: var(--sjs2-spacing-x000) var(--sd-base-padding);
+//     box-sizing: border-box;
+//     background-color: $background;
+//     // margin-inline-start: calc(-1 * var(--sd-base-padding));
+//     // width: calc(100% + 2 * var(--sd-base-padding));
+//   }
 
-  &.sd-element--with-frame {
-    // padding-top: 0;
-    // padding-bottom: 0;
+//   &.sd-element--with-frame {
+//     // padding-top: 0;
+//     // padding-bottom: 0;
 
-    &>.sd-element__header {
-      padding-top: var(--sjs2-spacing-x200);
-      padding-bottom: var(--sjs2-spacing-x200);
-      border-radius: var(--sjs2-radius-component-panel);
-    }
-  }
+//     &>.sd-element__header {
+//       padding-top: var(--sjs2-spacing-x200);
+//       padding-bottom: var(--sjs2-spacing-x200);
+//       border-radius: var(--sjs2-radius-component-panel);
+//     }
+//   }
 
-  &>.sd-element__header:focus-within,
-  &>.sd-element__header:hover {
-    background-color: $background-dim-light;
-  }
+//   &>.sd-element__header:focus-within,
+//   &>.sd-element__header:hover {
+//     background-color: $background-dim-light;
+//   }
+
+//   &.sd-element--nested {
 
-  &.sd-element--nested {
+//     &>.sd-element__header:hover,
+//     &>.sd-element__header:focus-within {
+//       box-shadow: 0 var(--sjs2-spacing-negative-x200) 0 0 $background-dim-light, 0 var(--sjs2-spacing-x200) 0 $background-dim-light;
+//     }
+//   }
+// }
+
+.sd-element--expandable > div > div {
+  &>.sd-element__header {
+    cursor: pointer;
+  }
+}
 
-    &>.sd-element__header:hover,
-    &>.sd-element__header:focus-within {
-      box-shadow: 0 var(--sjs2-spacing-negative-x200) 0 0 $background-dim-light, 0 var(--sjs2-spacing-x200) 0 $background-dim-light;
+.sd-element--with-frame.sd-element--collapsed > div {
+  &> .sd-question__header-and-content-container {
+    padding-top: var(--sjs2-spacing-x200);
+    padding-bottom: var(--sjs2-spacing-x200);
+    border-radius: var(--sjs2-radius-component-panel);
+    &:hover, &:focus-within {
+      background-color: $background-dim-light;
     }
   }
 }
\ No newline at end of file
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index a9106aa01e..9abdb329cc 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -10,6 +10,7 @@
   flex-direction: column;
   row-gap: calc(0.5 * var(--sd-base-vertical-padding));
   column-gap: var(--sjs2-spacing-x300);
+  height: 100%;
 }
 
 .sd-element--with-frame > .sd-question__container {
@@ -18,6 +19,7 @@
 
 .sd-question__header-and-content-container {
   display: flex;
+  flex: 1;
   flex-direction: column;
   padding-top: var(--sd-base-vertical-padding);
   padding-left: var(--sjs2-layout-component-question-content-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
@@ -27,6 +29,14 @@
   column-gap: var(--sjs2-spacing-x300);
 }
 
+.sd-question--title-bottom > .sd-question__container {
+  &>.sd-question__header-and-content-container {
+    padding-top: var(--sd-base-padding);
+    row-gap: calc(0.375 * var(--sd-base-vertical-padding));
+  }
+}
+
+// TODO: Remove as not working
 .sd-question--left {
   .sd-question__header-and-content-container {
     flex-direction: row;
@@ -192,15 +202,21 @@
 //   margin-top: calc(0.25 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x050));
 // }
 
-.sd-element--with-frame>div>.sd-element__erbox {
-    position: sticky;
-    left: 0;
-}
+// .sd-element--with-frame>div>.sd-element__erbox {
+//     position: sticky;
+//     left: 0;
+// }
 
 .sd-element--with-frame>div>.sd-element__erbox--above-element {
   // margin-bottom: var(--sd-base-padding);
   border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
 }
+// TODO: Remove after new design system is implemented
+.sd-element--with-frame:not(.sd-element--complex)>div>.sd-element__erbox--above-element {
+  &~.sd-question__header-and-content-container {
+    padding-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
+  }
+}
 
 .sd-element--with-frame>div>.sd-question__erbox--below-question {
   // margin-top: auto;

From 8108270b698297c13369c5851f83c6db8e8025fb Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 13:25:18 +0300
Subject: [PATCH 068/155] Fixed question content top padding

---
 .../src/default-theme/blocks/sd-question.scss       | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 9abdb329cc..25ec76c145 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -21,17 +21,23 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  padding-top: var(--sd-base-vertical-padding);
+  padding-top: var(--sd-base-padding);
+  padding-bottom: var(--sd-base-padding);
   padding-left: var(--sjs2-layout-component-question-content-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
   padding-right: var(--sjs2-layout-component-question-content-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
-  padding-bottom: var(--sd-base-padding);
   row-gap: calc(0.5 * var(--sd-base-vertical-padding));
   column-gap: var(--sjs2-spacing-x300);
 }
 
+
+.sd-element--with-frame.sd-question--title-top > .sd-question__container {
+  &>.sd-question__header-and-content-container {
+    padding-top: var(--sd-base-vertical-padding);
+  }
+}
+
 .sd-question--title-bottom > .sd-question__container {
   &>.sd-question__header-and-content-container {
-    padding-top: var(--sd-base-padding);
     row-gap: calc(0.375 * var(--sd-base-vertical-padding));
   }
 }
@@ -43,7 +49,6 @@
     flex-wrap: wrap;
     column-gap: var(--sjs2-spacing-x300);
     row-gap: var(--sjs2-spacing-x100);
-    padding-top: var(--sd-base-padding);
   }
 }
 

From b95ae83f45d8487707866caa829aeeeff2eb5ee8 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 13:34:45 +0300
Subject: [PATCH 069/155] Fixed error padding for question title location
 "left"

---
 packages/survey-core/src/default-theme/blocks/sd-question.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 25ec76c145..e54fd2287d 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -217,7 +217,7 @@
   border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
 }
 // TODO: Remove after new design system is implemented
-.sd-element--with-frame:not(.sd-element--complex)>div>.sd-element__erbox--above-element {
+.sd-element--with-frame.sd-question--title-top:not(.sd-element--complex)>div>.sd-element__erbox--above-element {
   &~.sd-question__header-and-content-container {
     padding-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
   }

From 4e15154b115e036701965ea0488c8e776ea809c6 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 13:48:08 +0300
Subject: [PATCH 070/155] Fixed paneldynamic header

---
 .../src/default-theme/blocks/sd-question.scss     | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index e54fd2287d..8eba1dbf60 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -29,11 +29,16 @@
   column-gap: var(--sjs2-spacing-x300);
 }
 
-
-.sd-element--with-frame.sd-question--title-top > .sd-question__container {
+// TODO: Remove after new design system is implemented
+.sd-element--with-frame.sd-question--title-top:not(.sd-element--complex) > .sd-question__container {
   &>.sd-question__header-and-content-container {
     padding-top: var(--sd-base-vertical-padding);
   }
+  &>.sd-element__erbox--above-element {
+    &~.sd-question__header-and-content-container {
+      padding-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
+    }
+  }
 }
 
 .sd-question--title-bottom > .sd-question__container {
@@ -216,12 +221,6 @@
   // margin-bottom: var(--sd-base-padding);
   border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
 }
-// TODO: Remove after new design system is implemented
-.sd-element--with-frame.sd-question--title-top:not(.sd-element--complex)>div>.sd-element__erbox--above-element {
-  &~.sd-question__header-and-content-container {
-    padding-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
-  }
-}
 
 .sd-element--with-frame>div>.sd-question__erbox--below-question {
   // margin-top: auto;

From 7f5203b2c4b82aa4f0e528af02fda2932059da97 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 13:52:22 +0300
Subject: [PATCH 071/155] Fixed paneldynamic tab header extra hr

---
 .../survey-core/src/default-theme/blocks/sd-paneldynamic.scss  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index e2d4976cc5..8b4998c40d 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -77,6 +77,9 @@
     margin: 0;
     width: 100%;
 }
+.sd-paneldynamic__header-tab ~ hr {
+    display: none;
+}
 
 .sd-paneldynamic__footer {
     clear: both;

From ed8fa7845a5854f411048fa4d914e098f6ea9d8d Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 14:05:06 +0300
Subject: [PATCH 072/155] Fixed question header row gap

---
 packages/survey-core/src/default-theme/blocks/sd-question.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 8eba1dbf60..479fdf9b2a 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -89,7 +89,8 @@
   // padding-bottom: var(--sjs2-layout-component-question-header-padding-bottom, calc(0.5 * var(--sd-base-vertical-padding)));
   // padding-left: var(--sjs2-layout-component-question-header-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
   // padding-right: var(--sjs2-layout-component-question-header-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
-  row-gap: var(--sjs2-layout-component-question-header-gap-vertical, var(--sjs2-spacing-x050));
+  row-gap: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
+  // row-gap: var(--sjs2-layout-component-question-header-gap-vertical, var(--sjs2-spacing-x050));
   column-gap: var(--sjs2-layout-component-question-header-gap-horizontal, var(--sjs2-spacing-x150));
 }
 

From 4168e21bfe4865496226b37c48eeed07e2edb293 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 14:06:44 +0300
Subject: [PATCH 073/155] Reverted

---
 .../src/default-theme/blocks/sd-question.scss          | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 479fdf9b2a..248cad0208 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -30,14 +30,14 @@
 }
 
 // TODO: Remove after new design system is implemented
-.sd-element--with-frame.sd-question--title-top:not(.sd-element--complex) > .sd-question__container {
+.sd-element--with-frame.sd-question--title-top > .sd-question__container {
   &>.sd-question__header-and-content-container {
     padding-top: var(--sd-base-vertical-padding);
   }
-  &>.sd-element__erbox--above-element {
-    &~.sd-question__header-and-content-container {
-      padding-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
-    }
+}
+.sd-element--with-frame.sd-question--title-top:not(.sd-element--complex)>div>.sd-element__erbox--above-element {
+  &~.sd-question__header-and-content-container {
+    padding-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
   }
 }
 

From adeb90e4688a0a73559e593e88666725c57dfd8b Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 14:26:43 +0300
Subject: [PATCH 074/155] Try to fix paneldynamic header top padding

---
 packages/survey-core/src/default-theme/blocks/sd-question.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 248cad0208..559cd0fcca 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -30,7 +30,7 @@
 }
 
 // TODO: Remove after new design system is implemented
-.sd-element--with-frame.sd-question--title-top > .sd-question__container {
+.sd-element--with-frame.sd-question--title-top:not(.sd-question--paneldynamic) > .sd-question__container {
   &>.sd-question__header-and-content-container {
     padding-top: var(--sd-base-vertical-padding);
   }

From 795a539df46c24883a2c29145dd992e01f678793 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 14:41:09 +0300
Subject: [PATCH 075/155] Reanimated panel collapsed header and fixed
 paneldynamic header top padding

---
 .../blocks/sd-collapsed-element.scss          | 80 +++++++++----------
 .../src/default-theme/blocks/sd-question.scss |  2 +-
 2 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
index 79cce6c472..f3a08c3222 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
@@ -1,45 +1,45 @@
 @use "../variables.scss" as *;
 
-// .sd-element--expanded > div > div,
-// .sd-element--collapsed > div > div {
-//   &>.sd-element__header {
-//     cursor: pointer;
-//   }
-// }
-
-// .sd-element--collapsed {
-//   &>.sd-element__header {
-//     // padding: var(--sjs2-spacing-x000) var(--sd-base-padding);
-//     box-sizing: border-box;
-//     background-color: $background;
-//     // margin-inline-start: calc(-1 * var(--sd-base-padding));
-//     // width: calc(100% + 2 * var(--sd-base-padding));
-//   }
-
-//   &.sd-element--with-frame {
-//     // padding-top: 0;
-//     // padding-bottom: 0;
-
-//     &>.sd-element__header {
-//       padding-top: var(--sjs2-spacing-x200);
-//       padding-bottom: var(--sjs2-spacing-x200);
-//       border-radius: var(--sjs2-radius-component-panel);
-//     }
-//   }
-
-//   &>.sd-element__header:focus-within,
-//   &>.sd-element__header:hover {
-//     background-color: $background-dim-light;
-//   }
-
-//   &.sd-element--nested {
-
-//     &>.sd-element__header:hover,
-//     &>.sd-element__header:focus-within {
-//       box-shadow: 0 var(--sjs2-spacing-negative-x200) 0 0 $background-dim-light, 0 var(--sjs2-spacing-x200) 0 $background-dim-light;
-//     }
-//   }
-// }
+.sd-element--expanded > div > div,
+.sd-element--collapsed > div > div {
+  &>.sd-element__header {
+    cursor: pointer;
+  }
+}
+
+.sd-element--collapsed {
+  &>.sd-element__header {
+    // padding: var(--sjs2-spacing-x000) var(--sd-base-padding);
+    box-sizing: border-box;
+    background-color: $background;
+    // margin-inline-start: calc(-1 * var(--sd-base-padding));
+    // width: calc(100% + 2 * var(--sd-base-padding));
+  }
+
+  &.sd-element--with-frame {
+    // padding-top: 0;
+    // padding-bottom: 0;
+
+    &>.sd-element__header {
+      padding-top: var(--sjs2-spacing-x200);
+      padding-bottom: var(--sjs2-spacing-x200);
+      border-radius: var(--sjs2-radius-component-panel);
+    }
+  }
+
+  &>.sd-element__header:focus-within,
+  &>.sd-element__header:hover {
+    background-color: $background-dim-light;
+  }
+
+  &.sd-element--nested {
+
+    &>.sd-element__header:hover,
+    &>.sd-element__header:focus-within {
+      box-shadow: 0 var(--sjs2-spacing-negative-x200) 0 0 $background-dim-light, 0 var(--sjs2-spacing-x200) 0 $background-dim-light;
+    }
+  }
+}
 
 .sd-element--expandable > div > div {
   &>.sd-element__header {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 559cd0fcca..e7d507d884 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -30,7 +30,7 @@
 }
 
 // TODO: Remove after new design system is implemented
-.sd-element--with-frame.sd-question--title-top:not(.sd-question--paneldynamic) > .sd-question__container {
+.sd-element--with-frame.sd-question--title-top:not(.sd-element--collapsed):not(.sd-question--paneldynamic) > .sd-question__container {
   &>.sd-question__header-and-content-container {
     padding-top: var(--sd-base-vertical-padding);
   }

From 5b15435a4f15e1923df1c7b67cfc0915ef85e67a Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 15:11:47 +0300
Subject: [PATCH 076/155] New tokens: question layout - error paddings Fixes
 #11421

---
 .../src/default-theme/blocks/sd-question.scss          | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index e7d507d884..c7f0eb1fbe 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -35,7 +35,7 @@
     padding-top: var(--sd-base-vertical-padding);
   }
 }
-.sd-element--with-frame.sd-question--title-top:not(.sd-element--complex)>div>.sd-element__erbox--above-element {
+.sd-element--with-frame.sd-question--title-top:not(.sd-element--collapsed):not(.sd-element--complex)>div>.sd-element__erbox--above-element {
   &~.sd-question__header-and-content-container {
     padding-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
   }
@@ -218,11 +218,19 @@
 //     left: 0;
 // }
 
+.sd-element--with-frame>.sd-element__erbox--above-element {
+  // margin-bottom: var(--sd-base-padding);
+  border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
+}
 .sd-element--with-frame>div>.sd-element__erbox--above-element {
   // margin-bottom: var(--sd-base-padding);
   border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
 }
 
+.sd-element--with-frame>.sd-question__erbox--below-question {
+  // margin-top: auto;
+  border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);
+}
 .sd-element--with-frame>div>.sd-question__erbox--below-question {
   // margin-top: auto;
   border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);

From 898540116437003e96ba168185193a416fc6b2e3 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 15:25:09 +0300
Subject: [PATCH 077/155] Fixed question error bottom gap

---
 .../survey-core/src/default-theme/blocks/sd-question.scss   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index c7f0eb1fbe..38957a62b2 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -42,9 +42,9 @@
 }
 
 .sd-question--title-bottom > .sd-question__container {
-  &>.sd-question__header-and-content-container {
-    row-gap: calc(0.375 * var(--sd-base-vertical-padding));
-  }
+}
+.sd-question--error-bottom:not(.sd-question--left) > .sd-question__container {
+  row-gap: var(--sjs2-spacing-x100);
 }
 
 // TODO: Remove as not working

From 59507d36333ee6e77a4f4f8bfeea2a281c3276a7 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 15:27:20 +0300
Subject: [PATCH 078/155] Returned header padding

---
 .../survey-core/src/default-theme/blocks/sd-question.scss     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 38957a62b2..791081dcdf 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -42,7 +42,11 @@
 }
 
 .sd-question--title-bottom > .sd-question__container {
+  &>.sd-question__header-and-content-container {
+    row-gap: calc(0.375 * var(--sd-base-vertical-padding));
+  }
 }
+// TODO: Remove after new design system is implemented
 .sd-question--error-bottom:not(.sd-question--left) > .sd-question__container {
   row-gap: var(--sjs2-spacing-x100);
 }

From 585c9a6c620979c5b53377937d3f7e5414ad0d71 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 17:05:54 +0300
Subject: [PATCH 079/155] Fixed page error box top padding

---
 .../src/default-theme/blocks/sd-page.scss     | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 08759308fd..46155bcafe 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -86,21 +86,24 @@
   padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100)) var(--sd-base-padding);
 }
 
-.sd-page__title,
-.sd-page__description {
-  &~.sd-page__errbox {
-    margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
-    margin-bottom: var(--sjs2-spacing-negative-x100);
-  }
-}
+// .sd-page__title,
+// .sd-page__description {
+//   &~.sd-page__errbox {
+//     margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
+//     margin-bottom: var(--sjs2-spacing-negative-x100);
+//   }
+// }
 
 .sd-root--compact {
 
-  .sd-page__title,
-  .sd-page__description {
-    &~.sd-page__errbox {
-      margin-bottom: 0;
-    }
+  // .sd-page__title,
+  // .sd-page__description {
+  //   &~.sd-page__errbox {
+  //     margin-bottom: 0;
+  //   }
+  // }
+  .sd-page__errbox {
+    margin-top: var(--sjs2-spacing-negative-x100);
   }
 
   .sd-page {

From 214e125029501936c9355cbf0af01bcc1487cb6e Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 17:20:31 +0300
Subject: [PATCH 080/155] Temporary fix for matrixdynamic top action padding in
 mobile mode

---
 .../src/default-theme/blocks/sd-matrixdynamic.scss           | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-matrixdynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-matrixdynamic.scss
index 8750800248..992f31696c 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-matrixdynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-matrixdynamic.scss
@@ -26,6 +26,11 @@
   }
 }
 
+// TODO: Remove after new design system is implemented
+.sd-question--mobile .sd-matrixdynamic__footer:first-child {
+  margin-top: var(--sjs2-spacing-negative-x100);
+}
+
 .sd-matrixdynamic__footer {
   padding-top: var(--sjs2-spacing-x200);
 }

From 3125485fc36451a7c51843b39c7004816d810cfa Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 1 Jul 2026 17:55:56 +0300
Subject: [PATCH 081/155] Temporary fix error top padding

---
 packages/survey-core/src/default-theme/blocks/sd-question.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 791081dcdf..ac05c8fc58 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -47,7 +47,7 @@
   }
 }
 // TODO: Remove after new design system is implemented
-.sd-question--error-bottom:not(.sd-question--left) > .sd-question__container {
+.sd-element--nested.sd-question--error-bottom:not(.sd-question--left) > .sd-question__container {
   row-gap: var(--sjs2-spacing-x100);
 }
 

From 2ab96a7287887376e64b74bc102ce4e38f6c85b8 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 12:30:24 +0300
Subject: [PATCH 082/155] Fixed matrix scrolling

---
 .../src/default-theme/blocks/sd-complex-element.scss     | 2 ++
 .../src/default-theme/blocks/sd-question.scss            | 2 ++
 .../survey-core/src/default-theme/blocks/sd-table.scss   | 9 +++++++--
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
index f4e05c1121..c6ead0b9f2 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
@@ -17,6 +17,8 @@
   border: none;
   height: 1px;
   background-color: $border-light;
+  position: sticky;
+  left: calc(-1 * var(--sd-base-padding));
 }
 
 .sd-element--complex > .sd-element__header {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index ac05c8fc58..968682241e 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -87,6 +87,8 @@
 // }
 
 .sd-question__header {
+  position: sticky;
+  left: 0;
   display: flex;
   flex-direction: column;
   // padding-top: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index e167a0761e..5db7421b5b 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -403,12 +403,17 @@
 
 .sd-question.sd-question--table {
   position: relative;
-  overflow-x: auto;
+  // overflow-x: auto;
+  &>.sd-question__container {
+    &>.sd-question__header-and-content-container {
+      overflow-x: auto;
+    }
+  }
 }
 
 .sd-question--table.sd-element--collapsed,
 .sd-question--table.sd-element--nested {
-  overflow-x: visible;
+  // overflow-x: visible;
 }
 
 .sd-table-wrapper {

From f345e9bd978cb63f9878ce1ac08c7b91ed1d0b48 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 12:31:51 +0300
Subject: [PATCH 083/155] Added style

---
 packages/survey-core/src/default-theme/blocks/sd-table.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 5db7421b5b..28f27b8351 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -414,6 +414,11 @@
 .sd-question--table.sd-element--collapsed,
 .sd-question--table.sd-element--nested {
   // overflow-x: visible;
+  &>.sd-question__container {
+    &>.sd-question__header-and-content-container {
+      overflow-x: visible;
+    }
+  }
 }
 
 .sd-table-wrapper {

From 745337ce000534d4ac177e52f5326fbe0778d563 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 13:00:12 +0300
Subject: [PATCH 084/155] Fixed unnecessary sticky position

---
 .../survey-core/src/default-theme/blocks/sd-question.scss     | 2 --
 packages/survey-core/src/default-theme/blocks/sd-table.scss   | 4 ++++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 968682241e..ac05c8fc58 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -87,8 +87,6 @@
 // }
 
 .sd-question__header {
-  position: sticky;
-  left: 0;
   display: flex;
   flex-direction: column;
   // padding-top: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 28f27b8351..977574b5cc 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -406,6 +406,10 @@
   // overflow-x: auto;
   &>.sd-question__container {
     &>.sd-question__header-and-content-container {
+      .sd-question__header {
+        position: sticky;
+        left: 0;
+      }
       overflow-x: auto;
     }
   }

From 472f2958cf19c2a42ed6d593b95c36c70463534a Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 13:50:35 +0300
Subject: [PATCH 085/155] Fixed question paddings in single input mode

---
 .../src/default-theme/blocks/sd-question.scss         | 11 +++++++++++
 packages/survey-core/src/defaultCss/defaultCss.ts     |  1 +
 packages/survey-core/src/question.ts                  |  1 +
 3 files changed, 13 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index ac05c8fc58..a5e894e98a 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -77,6 +77,17 @@
   }
 }
 
+.sd-question--single-input {
+    &>.sd-question__container {
+        &>.sd-question__header-and-content-container {
+            padding: 0;
+            &>.sd-paneldynamic__header {
+                padding: 0;
+            }
+        }
+    }
+}
+
 // .sd-question--left {
 //   display: flex;
 //   flex-wrap: wrap;
diff --git a/packages/survey-core/src/defaultCss/defaultCss.ts b/packages/survey-core/src/defaultCss/defaultCss.ts
index bc87e4741f..34ccf10f91 100644
--- a/packages/survey-core/src/defaultCss/defaultCss.ts
+++ b/packages/survey-core/src/defaultCss/defaultCss.ts
@@ -189,6 +189,7 @@ export var defaultCss = {
     leave: "sd-element-wrapper--leave",
     mobile: "sd-question--mobile",
     mainRoot: "sd-element sd-question sd-row__question",
+    rootSingleInput: "sd-element sd-question--single-input",
     flowRoot: "sd-element sd-question sd-row__question sd-row__question--flow",
     withFrame: "sd-element--with-frame",
     asCell: "sd-table__cell",
diff --git a/packages/survey-core/src/question.ts b/packages/survey-core/src/question.ts
index 202e7a078d..ad60c328a0 100644
--- a/packages/survey-core/src/question.ts
+++ b/packages/survey-core/src/question.ts
@@ -1519,6 +1519,7 @@ export class Question extends SurveyElement<Question>
   public getRootCss(): string {
     return new CssClassBuilder()
       .append(this.cssRoot, !this.singleInputQuestion)
+      .append(this.cssClasses.rootSingleInput, !!this.singleInputQuestion)
       .append(this.cssClasses.mobile, this.isMobile)
       .append(this.cssClasses.readOnly, this.isReadOnlyStyle)
       .append(this.cssClasses.disabled, this.isDisabledStyle)

From 47cc37751e2cbae17244fd8fe745077445a64779 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 14:12:34 +0300
Subject: [PATCH 086/155] Try to fix extra 1px diff in paneldynamic

---
 .../src/default-theme/blocks/sd-paneldynamic.scss           | 6 ++++--
 packages/survey-core/src/question_paneldynamic.ts           | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 8b4998c40d..bd44e64d05 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -77,8 +77,10 @@
     margin: 0;
     width: 100%;
 }
-.sd-paneldynamic__header-tab ~ hr {
-    display: none;
+.sd-paneldynamic__header-tab, .sd-paneldynamic__header-carousel {
+    & ~ hr {
+        display: none;
+    }
 }
 
 .sd-paneldynamic__footer {
diff --git a/packages/survey-core/src/question_paneldynamic.ts b/packages/survey-core/src/question_paneldynamic.ts
index e0029883b6..bddf2d06a9 100644
--- a/packages/survey-core/src/question_paneldynamic.ts
+++ b/packages/survey-core/src/question_paneldynamic.ts
@@ -2473,6 +2473,7 @@ export class QuestionPanelDynamicModel extends Question implements IDynamicItemM
     const showTab = this.isRenderModeTab && !!this.visiblePanelCount;
     return new CssClassBuilder()
       .append(super.getCssHeader(this.cssClasses))
+      .append(this.cssClasses.root + "__header-" + this.displayMode)
       .append(this.cssClasses.headerTab, this.hasTitleOnTop && showTab)
       .toString();
   }

From 6a6c4a3629c353def3d192e1414477b6a8526372 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 14:15:13 +0300
Subject: [PATCH 087/155] Updated unit test

---
 packages/survey-core/tests/question_paneldynamic_tests.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/tests/question_paneldynamic_tests.ts b/packages/survey-core/tests/question_paneldynamic_tests.ts
index 623b7ab751..c6370589c8 100644
--- a/packages/survey-core/tests/question_paneldynamic_tests.ts
+++ b/packages/survey-core/tests/question_paneldynamic_tests.ts
@@ -5621,7 +5621,7 @@ describe("Survey_QuestionPanelDynamic", () => {
     });
     setOldTheme(survey);
     const panel = <QuestionPanelDynamicModel>survey.getQuestionByName("relatives");
-    expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header");
+    expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header sv_panel_dynamic__header-tab");
 
     panel.addPanel();
     expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header sv-paneldynamic__header-tab");

From be71d6741597a29d528b5fbbd3efa248101b4106 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 14:28:29 +0300
Subject: [PATCH 088/155] Fixed u-test

---
 .../src/default-theme/blocks/sd-paneldynamic.scss          | 7 +++----
 packages/survey-core/src/question_paneldynamic.ts          | 2 +-
 packages/survey-core/tests/question_paneldynamic_tests.ts  | 6 +++---
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index bd44e64d05..e177943d00 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -76,11 +76,10 @@
 .sd-paneldynamic__header ~ hr {
     margin: 0;
     width: 100%;
+    display: none
 }
-.sd-paneldynamic__header-tab, .sd-paneldynamic__header-carousel {
-    & ~ hr {
-        display: none;
-    }
+.sd-paneldynamic__header-list ~ hr {
+    display: block;
 }
 
 .sd-paneldynamic__footer {
diff --git a/packages/survey-core/src/question_paneldynamic.ts b/packages/survey-core/src/question_paneldynamic.ts
index bddf2d06a9..d7705c1b5c 100644
--- a/packages/survey-core/src/question_paneldynamic.ts
+++ b/packages/survey-core/src/question_paneldynamic.ts
@@ -2473,7 +2473,7 @@ export class QuestionPanelDynamicModel extends Question implements IDynamicItemM
     const showTab = this.isRenderModeTab && !!this.visiblePanelCount;
     return new CssClassBuilder()
       .append(super.getCssHeader(this.cssClasses))
-      .append(this.cssClasses.root + "__header-" + this.displayMode)
+      .append(this.cssClasses.root + "__header-" + this.displayMode, this.displayMode !== "tab")
       .append(this.cssClasses.headerTab, this.hasTitleOnTop && showTab)
       .toString();
   }
diff --git a/packages/survey-core/tests/question_paneldynamic_tests.ts b/packages/survey-core/tests/question_paneldynamic_tests.ts
index c6370589c8..af4aeb025a 100644
--- a/packages/survey-core/tests/question_paneldynamic_tests.ts
+++ b/packages/survey-core/tests/question_paneldynamic_tests.ts
@@ -5621,16 +5621,16 @@ describe("Survey_QuestionPanelDynamic", () => {
     });
     setOldTheme(survey);
     const panel = <QuestionPanelDynamicModel>survey.getQuestionByName("relatives");
-    expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header sv_panel_dynamic__header-tab");
+    expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header");
 
     panel.addPanel();
     expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header sv-paneldynamic__header-tab");
 
     panel.renderMode = undefined;
-    expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header");
+    expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header sv_panel_dynamic__header-list");
 
     panel.titleLocation = "hidden";
-    expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header");
+    expect(panel.cssHeader).toBe("sv-paneldynamic__header sv_header sv_panel_dynamic__header-list");
 
     panel.displayMode = "tab";
     panel.titleLocation = "top";

From 6d3f65cf6dd9993ddff37c6c4b5f069ff4fc6735 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 15:51:02 +0300
Subject: [PATCH 089/155] Paneldynamic layout fix

---
 .../src/default-theme/blocks/sd-paneldynamic.scss        | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index e177943d00..16c63defd8 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -76,10 +76,9 @@
 .sd-paneldynamic__header ~ hr {
     margin: 0;
     width: 100%;
-    display: none
 }
-.sd-paneldynamic__header-list ~ hr {
-    display: block;
+.sd-paneldynamic__header-tab ~ hr {
+    display: none;
 }
 
 .sd-paneldynamic__footer {
@@ -88,6 +87,10 @@
     gap: var(--sjs2-layout-component-panel-footer-gap-vertical, var(--sjs2-spacing-x050));
     position: relative;
 
+    .sd-progress {
+        top: -1px;
+    }
+
     .sd-paneldynamic__progress-text,
     .sd-paneldynamic__progress--bottom {
         display: initial;

From 29e620975d3cbb5c6e77d68037f1144d72e1e5a6 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 15:51:18 +0300
Subject: [PATCH 090/155] Ho header table top padding fix

---
 packages/survey-core/src/default-theme/blocks/sd-table.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 977574b5cc..44fba1fb8c 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -74,7 +74,7 @@
 }
 
 .sd-table--no-header {
-  padding-top: var(--sjs2-spacing-x100);
+  padding-top: var(--sjs2-spacing-x300);
 }
 
 .sd-panel:not(.sd-panel--as-page) {

From a86fc7b04d49f95e5570f46ed4f0992574036226 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 16:20:23 +0300
Subject: [PATCH 091/155] Fixed no title table top padding

---
 packages/survey-core/src/default-theme/blocks/sd-table.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 44fba1fb8c..a2c4713928 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -493,6 +493,12 @@
     margin-left: calc(-1 * var(--sd-base-padding));
     box-sizing: content-box;
   }
+
+  &:not(.sd-element--nested)>.sd-question__container {
+    &>.sd-question__header-and-content-container:first-child {
+      padding-top: calc(0.5 * var(--sd-base-vertical-padding));
+    }
+  }
 }
 
 .sd-row--multiple {

From 02240ef6d95f4990e7cf1634a6bdea6d3e48dc3e Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 16:28:07 +0300
Subject: [PATCH 092/155] Fix panel as page row gap in compact mode

---
 packages/survey-core/src/default-theme/blocks/sd-panel.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index badf946c34..3d7482bafd 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -119,6 +119,9 @@
     & > .sd-panel__errbox {
       margin: 0 0 var(--sd-base-vertical-padding) 0;
     }
+    .sd-panel__content {
+      row-gap: var(--sd-base-vertical-padding);
+    }
   }
 }
 

From 4ae5afa3401b73850917988315ca7734962b48b1 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 16:37:33 +0300
Subject: [PATCH 093/155] Fixed question title teft error top space

---
 .../src/default-theme/blocks/sd-question.scss         | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index a5e894e98a..a39d0ed16d 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -53,11 +53,14 @@
 
 // TODO: Remove as not working
 .sd-question--left {
-  .sd-question__header-and-content-container {
-    flex-direction: row;
-    flex-wrap: wrap;
-    column-gap: var(--sjs2-spacing-x300);
+  &>.sd-question__container {
     row-gap: var(--sjs2-spacing-x100);
+    &>.sd-question__header-and-content-container {
+      flex-direction: row;
+      flex-wrap: wrap;
+      column-gap: var(--sjs2-spacing-x300);
+      row-gap: var(--sjs2-spacing-x100);
+    }
   }
 }
 

From 141dedae1847385879c589ad356c2c353c6b683d Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 17:01:43 +0300
Subject: [PATCH 094/155] Fixed empty paneldynamic layout

---
 .../src/default-theme/blocks/sd-paneldynamic.scss  | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 16c63defd8..e576507fd0 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -68,6 +68,20 @@
     }
 }
 
+.sd-question--paneldynamic.sd-question--empty {
+    &>.sd-question__container {
+        &>.sd-question__header-and-content-container {
+            padding-bottom: var(--sd-base-padding);
+            &>.sd-paneldynamic__header {
+                padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+                &~hr {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
 .sd-paneldynamic__header {
   padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
   gap: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));

From 97dd319ae9116545d41c835f1abadb44770b4c2b Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 17:11:26 +0300
Subject: [PATCH 095/155] Fixed error box spacing for title location left

---
 .../survey-core/src/default-theme/blocks/sd-question.scss  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index a39d0ed16d..93fe5891df 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -51,10 +51,8 @@
   row-gap: var(--sjs2-spacing-x100);
 }
 
-// TODO: Remove as not working
 .sd-question--left {
   &>.sd-question__container {
-    row-gap: var(--sjs2-spacing-x100);
     &>.sd-question__header-and-content-container {
       flex-direction: row;
       flex-wrap: wrap;
@@ -72,6 +70,11 @@
   .sd-question__header-and-content-container {
     padding: 0;
   }
+  .sd-question--left {
+    &>.sd-question__container {
+      row-gap: var(--sjs2-spacing-x100);
+    }
+  }
 }
 
 .sd-question:not(.sd-element--with-frame) > .sd-question__container {

From a78a434d75ae13eec052ad9ffcb15c5847d7b742 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 17:31:01 +0300
Subject: [PATCH 096/155] Fixed complex element empty layout

---
 .../blocks/sd-complex-element.scss            | 37 +++++++++++++------
 .../default-theme/blocks/sd-paneldynamic.scss | 14 -------
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
index c6ead0b9f2..0d5234b510 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
@@ -115,20 +115,33 @@
 }
 
 .sd-question--empty.sd-question--complex {
-  & > .sd-question__content {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
+  // & > .sd-question__content {
+  //   padding-top: 0;
+  //   padding-bottom: 0;
+  // }
 
-  & > .sd-question__content:first-of-type {
-    padding-top: var(--sd-base-padding);
-  }
+  // & > .sd-question__content:first-of-type {
+  //   padding-top: var(--sd-base-padding);
+  // }
 
-  & > .sd-question__header--location-top {
-    padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+  // & > .sd-question__header--location-top {
+  //   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 
-    &:after {
-      display: none;
-    }
+  //   &:after {
+  //     display: none;
+  //   }
+  // }
+  &>.sd-question__container {
+      row-gap: 0;
+      &>.sd-question__header-and-content-container {
+          row-gap: 0;
+          padding-bottom: var(--sd-base-padding);
+          &>.sd-question__header {
+              padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+              &~hr {
+                  display: none;
+              }
+          }
+      }
   }
 }
diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index e576507fd0..16c63defd8 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -68,20 +68,6 @@
     }
 }
 
-.sd-question--paneldynamic.sd-question--empty {
-    &>.sd-question__container {
-        &>.sd-question__header-and-content-container {
-            padding-bottom: var(--sd-base-padding);
-            &>.sd-paneldynamic__header {
-                padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
-                &~hr {
-                    display: none;
-                }
-            }
-        }
-    }
-}
-
 .sd-paneldynamic__header {
   padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
   gap: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));

From b9b0c05ff68fa5bdf5d6b93f444f58721b166a5e Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 17:45:46 +0300
Subject: [PATCH 097/155] Try to fix readonly panel dynamic mode

---
 .../src/default-theme/blocks/sd-complex-element.scss            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
index 0d5234b510..4cd5619246 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
@@ -136,7 +136,7 @@
       &>.sd-question__header-and-content-container {
           row-gap: 0;
           padding-bottom: var(--sd-base-padding);
-          &>.sd-question__header {
+          &>.sd-element__header {
               padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
               &~hr {
                   display: none;

From 3984d239739e59dc2db8236671a03cedf7c1b9c2 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 17:56:11 +0300
Subject: [PATCH 098/155] One more x100 error spacing case

---
 .../src/default-theme/blocks/sd-question.scss            | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 93fe5891df..d7e140720f 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -47,8 +47,13 @@
   }
 }
 // TODO: Remove after new design system is implemented
-.sd-element--nested.sd-question--error-bottom:not(.sd-question--left) > .sd-question__container {
-  row-gap: var(--sjs2-spacing-x100);
+.sd-element--nested {
+  &.sd-question--error-top.sd-question--left,
+  &.sd-question--error-bottom:not(.sd-question--left) {
+    &> .sd-question__container {
+      row-gap: var(--sjs2-spacing-x100);
+    }
+  }
 }
 
 .sd-question--left {

From b7ece41947a91f9b4a5d0d18f8bb9d5795453be9 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 2 Jul 2026 18:05:38 +0300
Subject: [PATCH 099/155] Try fix matrix many columns

---
 .../survey-core/src/default-theme/blocks/sd-question.scss   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index d7e140720f..f1a266a540 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -72,8 +72,10 @@
 }
 
 .sd-root--compact {
-  .sd-question__header-and-content-container {
-    padding: 0;
+  .sd-question:not(.sd-question--complex) > .sd-question__container {
+    &>.sd-question__header-and-content-container {
+      padding: 0;
+    }
   }
   .sd-question--left {
     &>.sd-question__container {

From 87fd5484d2a0562ec01c7e57299321a373d2823d Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 3 Jul 2026 11:48:11 +0300
Subject: [PATCH 100/155] Fixed complex element title left layout

---
 .../blocks/sd-complex-element.scss            | 22 +++++++++++++++++++
 .../src/default-theme/blocks/sd-question.scss |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
index 4cd5619246..266eb85f73 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
@@ -145,3 +145,25 @@
       }
   }
 }
+
+// TODO: remove this after the next release, it is a temporary fix to keep screenshot
+.sd-element--complex.sd-element--with-frame.sd-question--left {
+  &>.sd-question__container {
+      &>.sd-question__header-and-content-container {
+          &>.sd-element__header {
+              margin-top: calc(var(--sjs2-size-x300) + var(--sjs2-size-x050));
+              &~hr {
+                  display: none;
+              }
+              &:after {
+                  content: " ";
+                  display: block;
+                  height: 1px;
+                  position: relative;
+                  background: var(--sjs2-color-border-basic-secondary);
+                  bottom: var(--sjs2-size-x050);
+              }              
+          }
+      }
+  }
+}
\ No newline at end of file
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index f1a266a540..4694a3fe3f 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -125,7 +125,7 @@
 .sd-question__header--location--left {
   // padding-right: 0;
   // padding-bottom: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
-  display: inline-block;
+  // display: inline-block;
   width: auto;
   vertical-align: top;
   margin-top: var(--sjs2-spacing-x150);

From df5599ea0f3a7e3564f4888846f785cd2898e907 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 3 Jul 2026 12:13:02 +0300
Subject: [PATCH 101/155] Try to fix specific nested matrix layout

---
 .../src/default-theme/blocks/sd-table.scss    | 161 +++++++++++-------
 1 file changed, 95 insertions(+), 66 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index a2c4713928..c163ec2be7 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -30,6 +30,7 @@
       )};
   }
 }
+
 .sd-table {
   width: 100%;
   border-collapse: separate;
@@ -83,72 +84,72 @@
       padding-top: 0;
     }
 
-    .sd-question--table {
-      .sd-question__content {
-        padding-bottom: var(--sjs2-spacing-x025);
-        margin-bottom: var(--sjs2-spacing-negative-x025);
-        padding-top: var(--sjs2-spacing-x100);
-        margin-top: var(--sjs2-spacing-negative-x100);
-      }
-
-      & > .sd-question__header {
-        & ~ .sd-question__content {
-          padding-top: var(--sjs2-spacing-x200);
-          --animation-padding-top: #{var(--sjs2-spacing-x200)};
-
-          .sd-table--no-header {
-            padding-top: var(--sjs2-spacing-x400);
-          }
-        }
-      }
-    }
-
-    .sd-question--table > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-      margin-top: var(--sjs2-spacing-negative-x300);
-    }
-
-    .sd-question--table.sd-question--error-top
-      > .sd-question__content
-      .sd-table-wrapper
-      .sd-table:not(.sd-table--no-header) {
-      margin-top: 0;
-    }
-
-    &
-      > .sd-row:not(:first-of-type)
-      .sd-question--table
-      > .sd-question__content
-      .sd-table-wrapper
-      .sd-table:not(.sd-table--no-header) {
-      margin-top: var(--sjs2-spacing-negative-x200);
-    }
-
-    &
-      > .sd-row:not(:first-of-type)
-      .sd-question--table.sd-question--error-top
-      > .sd-question__content
-      .sd-table-wrapper
-      .sd-table:not(.sd-table--no-header) {
-      margin-top: var(--sjs2-spacing-x000);
-    }
-
-    .sd-question--table
-      > .sd-question__header
-      ~ .sd-question__content
-      .sd-table-wrapper
-      .sd-table:not(.sd-table--no-header) {
-      margin-top: var(--sjs2-spacing-x100);
-    }
-
-    &
-      > .sd-row:not(:first-of-type)
-      .sd-question--table
-      > .sd-question__header
-      ~ .sd-question__content
-      .sd-table-wrapper
-      .sd-table:not(.sd-table--no-header) {
-      margin-top: var(--sjs2-spacing-x100);
-    }
+    // .sd-question--table {
+    //   .sd-question__content {
+    //     padding-bottom: var(--sjs2-spacing-x025);
+    //     margin-bottom: var(--sjs2-spacing-negative-x025);
+    //     padding-top: var(--sjs2-spacing-x100);
+    //     margin-top: var(--sjs2-spacing-negative-x100);
+    //   }
+
+    //   & > .sd-question__header {
+    //     & ~ .sd-question__content {
+    //       padding-top: var(--sjs2-spacing-x200);
+    //       --animation-padding-top: #{var(--sjs2-spacing-x200)};
+
+    //       .sd-table--no-header {
+    //         padding-top: var(--sjs2-spacing-x400);
+    //       }
+    //     }
+    //   }
+    // }
+
+    // .sd-question--table > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+    //   margin-top: var(--sjs2-spacing-negative-x300);
+    // }
+
+    // .sd-question--table.sd-question--error-top
+    //   > .sd-question__content
+    //   .sd-table-wrapper
+    //   .sd-table:not(.sd-table--no-header) {
+    //   margin-top: 0;
+    // }
+
+    // &
+    //   > .sd-row:not(:first-of-type)
+    //   .sd-question--table
+    //   > .sd-question__content
+    //   .sd-table-wrapper
+    //   .sd-table:not(.sd-table--no-header) {
+    //   margin-top: var(--sjs2-spacing-negative-x200);
+    // }
+
+    // &
+    //   > .sd-row:not(:first-of-type)
+    //   .sd-question--table.sd-question--error-top
+    //   > .sd-question__content
+    //   .sd-table-wrapper
+    //   .sd-table:not(.sd-table--no-header) {
+    //   margin-top: var(--sjs2-spacing-x000);
+    // }
+
+    // .sd-question--table
+    //   > .sd-question__header
+    //   ~ .sd-question__content
+    //   .sd-table-wrapper
+    //   .sd-table:not(.sd-table--no-header) {
+    //   margin-top: var(--sjs2-spacing-x100);
+    // }
+
+    // &
+    //   > .sd-row:not(:first-of-type)
+    //   .sd-question--table
+    //   > .sd-question__header
+    //   ~ .sd-question__content
+    //   .sd-table-wrapper
+    //   .sd-table:not(.sd-table--no-header) {
+    //   margin-top: var(--sjs2-spacing-x100);
+    // }
   }
 }
 
@@ -425,6 +426,34 @@
   }
 }
 
+// TODO: Discuss with team if we need to keep this or not.
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:first-of-type {
+  .sd-question--table.sd-element--nested {
+    &>.sd-question__container {
+      &>.sd-question__header-and-content-container {
+        &>.sd-question__content:first-child {
+          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+            margin-top: var(--sjs2-spacing-negative-x300);
+          }
+        }
+      }
+    }
+  }
+}
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:not(:first-of-type) {
+  .sd-question--table.sd-element--nested {
+    &>.sd-question__container {
+      &>.sd-question__header-and-content-container {
+        &>.sd-question__content:first-child {
+          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+            margin-top: var(--sjs2-spacing-negative-x200);
+          }
+        }
+      }
+    }
+  }
+}
+
 .sd-table-wrapper {
   display: flex;
   margin: 0 calc(-1 * var(--sd-base-padding));

From 4172d64624feb65331883ba05fef98561777e144 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 3 Jul 2026 12:47:02 +0300
Subject: [PATCH 102/155] Try to fix table "no header" top padding

---
 .../survey-core/src/default-theme/blocks/sd-table.scss    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index c163ec2be7..b4d63f019c 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -80,9 +80,9 @@
 
 .sd-panel:not(.sd-panel--as-page) {
   & > .sd-panel__content {
-    .sd-table--no-header {
-      padding-top: 0;
-    }
+    // .sd-table--no-header {
+    //   padding-top: 0;
+    // }
 
     // .sd-question--table {
     //   .sd-question__content {
@@ -728,7 +728,7 @@
   }
 
   .sd-table--no-header {
-    padding-top: 0;
+    // padding-top: 0;
     .sd-table__responsive-title {
       display: none;
     }

From 677792f249c418fefa542a0fffa01da52393c183 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 3 Jul 2026 12:58:48 +0300
Subject: [PATCH 103/155] Returned mobile no header zero top padding

---
 packages/survey-core/src/default-theme/blocks/sd-table.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index b4d63f019c..97cd435ed8 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -728,7 +728,7 @@
   }
 
   .sd-table--no-header {
-    // padding-top: 0;
+    padding-top: 0;
     .sd-table__responsive-title {
       display: none;
     }

From 91e78cd62ca784d0c93b2fb611049b35cee089bf Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 3 Jul 2026 14:04:53 +0300
Subject: [PATCH 104/155] Try to fix matrixes

---
 .../src/default-theme/blocks/sd-table.scss    | 85 +++++++++++--------
 .../src/reactquestion_matrix.tsx              |  2 +-
 2 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 97cd435ed8..3e060679a3 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -386,13 +386,27 @@
   z-index: 12;
 
   &:first-of-type {
-    left: var(--sjs2-spacing-negative-x100);
+    // left: var(--sjs2-spacing-negative-x100);
+    padding-left: 0;
+    left: 0;    
   }
 
   &:last-of-type {
-    right: var(--sjs2-spacing-negative-x100);
+    // right: var(--sjs2-spacing-negative-x100);
+    padding-right: 0;
+    right: 0;    
   }
 }
+.sd-table tr > th:first-of-type,
+.sd-table tr > td:first-of-type {
+  padding-left: 0;
+  left: 0;    
+}
+.sd-table__cell:last-of-type,
+.sd-matrix__cell:last-of-type {
+  padding-right: 0;
+  right: 0;    
+}
 
 .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child {
   .sd-action-bar {
@@ -407,11 +421,14 @@
   // overflow-x: auto;
   &>.sd-question__container {
     &>.sd-question__header-and-content-container {
+      overflow-x: auto;
       .sd-question__header {
         position: sticky;
         left: 0;
+        ~ hr {
+          left: 0;
+        }
       }
-      overflow-x: auto;
     }
   }
 }
@@ -421,7 +438,7 @@
   // overflow-x: visible;
   &>.sd-question__container {
     &>.sd-question__header-and-content-container {
-      overflow-x: visible;
+      overflow-x: auto;
     }
   }
 }
@@ -456,43 +473,43 @@
 
 .sd-table-wrapper {
   display: flex;
-  margin: 0 calc(-1 * var(--sd-base-padding));
+  // margin: 0 calc(-1 * var(--sd-base-padding));
   width: fit-content;
-  min-width: calc(100% + 2 * var(--sd-base-padding));
-
-  &:before,
-  &:after {
-    content: "";
-    display: block;
-    position: sticky;
-    min-height: 100%;
-    width: calc(var(--sd-base-padding) - var(--sjs2-spacing-x100));
-    flex-shrink: 0;
-    background: var(--sd-table-sticky-background-color);
-    z-index: 11;
-  }
-
-  &::before {
-    left: calc(-1 * var(--sd-base-padding));
-  }
-
-  &:after {
-    right: calc(-1 * var(--sd-base-padding));
-  }
+  // min-width: calc(100% + 2 * var(--sd-base-padding));
+
+  // &:before,
+  // &:after {
+  //   content: "";
+  //   display: block;
+  //   position: absolute;
+  //   min-height: 100%;
+  //   width: calc(var(--sd-base-padding) - var(--sjs2-spacing-x100));
+  //   flex-shrink: 0;
+  //   background: var(--sd-table-sticky-background-color);
+  //   z-index: 11;
+  // }
+
+  // &::before {
+  //   left: calc(-1 * var(--sd-base-padding));
+  // }
+
+  // &:after {
+  //   right: calc(-1 * var(--sd-base-padding));
+  // }
 
   & > * {
     flex-basis: 100%;
   }
 }
 
-.sd-table-wrapper--left {
-  margin-left: var(--sjs2-spacing-negative-x300);
-  min-width: calc(100% + 1 * var(--sd-base-padding));
-  &::before {
-    left: var(--sjs2-spacing-negative-x300);
-    width: var(--sjs2-size-x200);
-  }
-}
+// .sd-table-wrapper--left {
+//   margin-left: var(--sjs2-spacing-negative-x300);
+//   min-width: calc(100% + 1 * var(--sd-base-padding));
+//   &::before {
+//     left: var(--sjs2-spacing-negative-x300);
+//     width: var(--sjs2-size-x200);
+//   }
+// }
 
 .sd-question--table {
   & > .sd-question__header,
diff --git a/packages/survey-react-ui/src/reactquestion_matrix.tsx b/packages/survey-react-ui/src/reactquestion_matrix.tsx
index f80ada5a91..9da798e208 100644
--- a/packages/survey-react-ui/src/reactquestion_matrix.tsx
+++ b/packages/survey-react-ui/src/reactquestion_matrix.tsx
@@ -34,7 +34,7 @@ export class SurveyQuestionMatrix extends SurveyQuestionElementBase {
 
   protected renderElement(): React.JSX.Element {
     var cssClasses = this.question.cssClasses;
-    var rowsTH = this.question.hasRows ? <td /> : null;
+    var rowsTH = this.question.hasRows ? <th /> : null;
     var headers: Array<React.JSX.Element> = [];
     for (var i = 0; i < this.question.visibleColumns.length; i++) {
       var column = this.question.visibleColumns[i];

From 7eb95682d8c696e54b594e0d64573bfa057ad492 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 3 Jul 2026 16:11:57 +0300
Subject: [PATCH 105/155] Last cell right padding fix

---
 packages/survey-core/src/default-theme/blocks/sd-table.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 3e060679a3..93b6ceccf4 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -402,8 +402,10 @@
   padding-left: 0;
   left: 0;    
 }
-.sd-table__cell:last-of-type,
-.sd-matrix__cell:last-of-type {
+.sd-matrix tr > th:last-of-type,
+.sd-matrix tr > td:last-of-type,
+.sd-table tr > th:last-of-type,
+.sd-table tr > td:last-of-type {
   padding-right: 0;
   right: 0;    
 }

From 84b3fb4c933d1f3ef7d56eb89b8ec2367f69eaa8 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 3 Jul 2026 16:36:45 +0300
Subject: [PATCH 106/155] Revert "Last cell right padding fix"

This reverts commit 7eb95682d8c696e54b594e0d64573bfa057ad492.
---
 packages/survey-core/src/default-theme/blocks/sd-table.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 93b6ceccf4..3e060679a3 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -402,10 +402,8 @@
   padding-left: 0;
   left: 0;    
 }
-.sd-matrix tr > th:last-of-type,
-.sd-matrix tr > td:last-of-type,
-.sd-table tr > th:last-of-type,
-.sd-table tr > td:last-of-type {
+.sd-table__cell:last-of-type,
+.sd-matrix__cell:last-of-type {
   padding-right: 0;
   right: 0;    
 }

From c23b991377b16e68c3b12dd06b660e9390cc438a Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 3 Jul 2026 16:37:24 +0300
Subject: [PATCH 107/155] Revert "Try to fix matrixes"

This reverts commit 91e78cd62ca784d0c93b2fb611049b35cee089bf.
---
 .../src/default-theme/blocks/sd-table.scss    | 85 ++++++++-----------
 .../src/reactquestion_matrix.tsx              |  2 +-
 2 files changed, 35 insertions(+), 52 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 3e060679a3..97cd435ed8 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -386,27 +386,13 @@
   z-index: 12;
 
   &:first-of-type {
-    // left: var(--sjs2-spacing-negative-x100);
-    padding-left: 0;
-    left: 0;    
+    left: var(--sjs2-spacing-negative-x100);
   }
 
   &:last-of-type {
-    // right: var(--sjs2-spacing-negative-x100);
-    padding-right: 0;
-    right: 0;    
+    right: var(--sjs2-spacing-negative-x100);
   }
 }
-.sd-table tr > th:first-of-type,
-.sd-table tr > td:first-of-type {
-  padding-left: 0;
-  left: 0;    
-}
-.sd-table__cell:last-of-type,
-.sd-matrix__cell:last-of-type {
-  padding-right: 0;
-  right: 0;    
-}
 
 .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child {
   .sd-action-bar {
@@ -421,14 +407,11 @@
   // overflow-x: auto;
   &>.sd-question__container {
     &>.sd-question__header-and-content-container {
-      overflow-x: auto;
       .sd-question__header {
         position: sticky;
         left: 0;
-        ~ hr {
-          left: 0;
-        }
       }
+      overflow-x: auto;
     }
   }
 }
@@ -438,7 +421,7 @@
   // overflow-x: visible;
   &>.sd-question__container {
     &>.sd-question__header-and-content-container {
-      overflow-x: auto;
+      overflow-x: visible;
     }
   }
 }
@@ -473,43 +456,43 @@
 
 .sd-table-wrapper {
   display: flex;
-  // margin: 0 calc(-1 * var(--sd-base-padding));
+  margin: 0 calc(-1 * var(--sd-base-padding));
   width: fit-content;
-  // min-width: calc(100% + 2 * var(--sd-base-padding));
-
-  // &:before,
-  // &:after {
-  //   content: "";
-  //   display: block;
-  //   position: absolute;
-  //   min-height: 100%;
-  //   width: calc(var(--sd-base-padding) - var(--sjs2-spacing-x100));
-  //   flex-shrink: 0;
-  //   background: var(--sd-table-sticky-background-color);
-  //   z-index: 11;
-  // }
-
-  // &::before {
-  //   left: calc(-1 * var(--sd-base-padding));
-  // }
-
-  // &:after {
-  //   right: calc(-1 * var(--sd-base-padding));
-  // }
+  min-width: calc(100% + 2 * var(--sd-base-padding));
+
+  &:before,
+  &:after {
+    content: "";
+    display: block;
+    position: sticky;
+    min-height: 100%;
+    width: calc(var(--sd-base-padding) - var(--sjs2-spacing-x100));
+    flex-shrink: 0;
+    background: var(--sd-table-sticky-background-color);
+    z-index: 11;
+  }
+
+  &::before {
+    left: calc(-1 * var(--sd-base-padding));
+  }
+
+  &:after {
+    right: calc(-1 * var(--sd-base-padding));
+  }
 
   & > * {
     flex-basis: 100%;
   }
 }
 
-// .sd-table-wrapper--left {
-//   margin-left: var(--sjs2-spacing-negative-x300);
-//   min-width: calc(100% + 1 * var(--sd-base-padding));
-//   &::before {
-//     left: var(--sjs2-spacing-negative-x300);
-//     width: var(--sjs2-size-x200);
-//   }
-// }
+.sd-table-wrapper--left {
+  margin-left: var(--sjs2-spacing-negative-x300);
+  min-width: calc(100% + 1 * var(--sd-base-padding));
+  &::before {
+    left: var(--sjs2-spacing-negative-x300);
+    width: var(--sjs2-size-x200);
+  }
+}
 
 .sd-question--table {
   & > .sd-question__header,
diff --git a/packages/survey-react-ui/src/reactquestion_matrix.tsx b/packages/survey-react-ui/src/reactquestion_matrix.tsx
index 9da798e208..f80ada5a91 100644
--- a/packages/survey-react-ui/src/reactquestion_matrix.tsx
+++ b/packages/survey-react-ui/src/reactquestion_matrix.tsx
@@ -34,7 +34,7 @@ export class SurveyQuestionMatrix extends SurveyQuestionElementBase {
 
   protected renderElement(): React.JSX.Element {
     var cssClasses = this.question.cssClasses;
-    var rowsTH = this.question.hasRows ? <th /> : null;
+    var rowsTH = this.question.hasRows ? <td /> : null;
     var headers: Array<React.JSX.Element> = [];
     for (var i = 0; i < this.question.visibleColumns.length; i++) {
       var column = this.question.visibleColumns[i];

From 6dabbbded228f8f98d71fbf8254f2429fc404927 Mon Sep 17 00:00:00 2001
From: MarchTokenda <98102580+MarchTokenda@users.noreply.github.com>
Date: Fri, 3 Jul 2026 16:53:30 +0300
Subject: [PATCH 108/155] Added additional conditions to removeExtraElements
 for improved markup cleanup (#11535)

---
 tests/markup/helper.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/tests/markup/helper.ts b/tests/markup/helper.ts
index 96e642ecbe..43e5c00122 100644
--- a/tests/markup/helper.ts
+++ b/tests/markup/helper.ts
@@ -274,9 +274,12 @@ export function testQuestionMarkup(assert: any, test: MarkupTestDescriptor, plat
   platform.render(platform.survey, surveyElement);
 }
 
-const removeExtraElementsConditions: Array<(htmlElement: HTMLElement) => boolean> = [
-  (htmlElement: HTMLElement) => htmlElement.classList.contains("sv-vue-title-additional-div"),
-  (HTMLElement: HTMLElement) => HTMLElement.tagName.toLowerCase().search(/^sv-/) > -1
+const removeExtraElementsConditions: Array<(e: HTMLElement) => boolean> = [
+  (e: HTMLElement) => e.classList.contains("sv-vue-title-additional-div"),
+  (e: HTMLElement) => e.tagName.toLowerCase().search(/^sv-/) > -1,
+  (e: HTMLElement) => e.classList.contains("sd-question__header-and-content-container"),
+  (e: HTMLElement) => e.classList.contains("sd-question__content"),
+  (e: HTMLElement) => e.classList.contains("sd-clearfix") && e.classList.contains("sd-page__row") && e.classList.contains("sd-row"),
 ];
 
 function clearExtraElements(innerHTML: string): string {

From abfb3ee57262ae8dac37ce1c7f873ac62037bb21 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 3 Jul 2026 16:54:09 +0300
Subject: [PATCH 109/155] Hide hr if necessary

---
 .../src/default-theme/blocks/sd-paneldynamic.scss        | 9 +++++++++
 packages/survey-core/src/question_paneldynamic.ts        | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 16c63defd8..173094eb08 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -80,6 +80,15 @@
 .sd-paneldynamic__header-tab ~ hr {
     display: none;
 }
+.sd-paneldynamic__navigation--top {
+    &>.sd-question__container {
+        &>.sd-question__header-and-content-container {
+            & > hr {
+                display: none;
+            }
+        }
+    }
+}
 
 .sd-paneldynamic__footer {
     clear: both;
diff --git a/packages/survey-core/src/question_paneldynamic.ts b/packages/survey-core/src/question_paneldynamic.ts
index 589822f8de..e256373c19 100644
--- a/packages/survey-core/src/question_paneldynamic.ts
+++ b/packages/survey-core/src/question_paneldynamic.ts
@@ -2477,7 +2477,8 @@ export class QuestionPanelDynamicModel extends Question implements IDynamicItemM
     return getLocaleString("progressbar", this.getLocale());
   }
   public getRootCss(): string {
-    return new CssClassBuilder().append(super.getRootCss()).append(this.cssClasses.empty, this.getShowNoEntriesPlaceholder()).toString();
+    return new CssClassBuilder().append(super.getRootCss()).append(this.cssClasses.empty, this.getShowNoEntriesPlaceholder())
+      .append(this.cssClasses.navigation + "--top", this.isRangeShowing && this.isProgressTopShowing).append(this.cssClasses.navigation + "--bottom", this.isRangeShowing && this.isProgressBottomShowing).toString();
   }
   public get cssHeader(): string {
     const showTab = this.isRenderModeTab && !!this.visiblePanelCount;

From 91b6621e1c4393ea0966444fbc8c5b7dfe3e72f8 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 3 Jul 2026 17:14:11 +0300
Subject: [PATCH 110/155] Fixed paneldynamic tabs header line

---
 .../src/default-theme/blocks/sd-paneldynamic.scss           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 173094eb08..79db079d32 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -242,9 +242,6 @@
     .sd-tabs-toolbar {
         margin-bottom: -1px;
     }
-}
-.sd-paneldynamic__tabs-container--with-header {
-    padding-top: var(--sjs2-spacing-x300);
     &:after {
         content: " ";
         display: block;
@@ -257,6 +254,9 @@
         margin: 0 calc(-1 * var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal)));
     }
 }
+.sd-paneldynamic__tabs-container--with-header {
+    padding-top: var(--sjs2-spacing-x300);
+}
 .sd-root-modern--mobile {
     .sd-paneldynamic__tabs-container--with-header {
         &:after {

From f990d3bfdc6eb89f75aadeba83e8f4960bff130d Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 3 Jul 2026 18:29:12 +0300
Subject: [PATCH 111/155] Try to fix large matrixes

---
 .../src/default-theme/blocks/sd-table.scss    | 83 ++++++++++++-------
 1 file changed, 51 insertions(+), 32 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 97cd435ed8..e349a612a4 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -386,13 +386,20 @@
   z-index: 12;
 
   &:first-of-type {
-    left: var(--sjs2-spacing-negative-x100);
+    // left: var(--sjs2-spacing-negative-x100);
+    left: 0;
+    padding-left: 0;
   }
 
   &:last-of-type {
     right: var(--sjs2-spacing-negative-x100);
   }
 }
+.sd-table th:last-of-type,
+.sd-table td:last-of-type {
+  // right: var(--sjs2-spacing-negative-x100);
+  padding-right: 0;
+}
 
 .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child {
   .sd-action-bar {
@@ -410,21 +417,33 @@
       .sd-question__header {
         position: sticky;
         left: 0;
+        ~ hr {
+          left: 0;
+        }
       }
       overflow-x: auto;
     }
   }
 }
 
-.sd-question--table.sd-element--collapsed,
-.sd-question--table.sd-element--nested {
-  // overflow-x: visible;
-  &>.sd-question__container {
-    &>.sd-question__header-and-content-container {
-      overflow-x: visible;
-    }
-  }
-}
+// .sd-question--table.sd-element--nested {
+//   // overflow-x: visible;
+//   &>.sd-question__container {
+//     &>.sd-question__header-and-content-container {
+//       overflow-x: auto;
+//     }
+//   }
+// }
+
+// .sd-question--table.sd-element--collapsed,
+// .sd-question--table.sd-element--nested {
+//   // overflow-x: visible;
+//   &>.sd-question__container {
+//     &>.sd-question__header-and-content-container {
+//       overflow-x: visible;
+//     }
+//   }
+// }
 
 // TODO: Discuss with team if we need to keep this or not.
 .sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:first-of-type {
@@ -456,29 +475,29 @@
 
 .sd-table-wrapper {
   display: flex;
-  margin: 0 calc(-1 * var(--sd-base-padding));
+  // margin: 0 calc(-1 * var(--sd-base-padding));
   width: fit-content;
-  min-width: calc(100% + 2 * var(--sd-base-padding));
-
-  &:before,
-  &:after {
-    content: "";
-    display: block;
-    position: sticky;
-    min-height: 100%;
-    width: calc(var(--sd-base-padding) - var(--sjs2-spacing-x100));
-    flex-shrink: 0;
-    background: var(--sd-table-sticky-background-color);
-    z-index: 11;
-  }
-
-  &::before {
-    left: calc(-1 * var(--sd-base-padding));
-  }
-
-  &:after {
-    right: calc(-1 * var(--sd-base-padding));
-  }
+  // min-width: calc(100% + 2 * var(--sd-base-padding));
+
+  // &:before,
+  // &:after {
+  //   content: "";
+  //   display: block;
+  //   position: sticky;
+  //   min-height: 100%;
+  //   width: calc(var(--sd-base-padding) - var(--sjs2-spacing-x100));
+  //   flex-shrink: 0;
+  //   background: var(--sd-table-sticky-background-color);
+  //   z-index: 11;
+  // }
+
+  // &::before {
+  //   left: calc(-1 * var(--sd-base-padding));
+  // }
+
+  // &:after {
+  //   right: calc(-1 * var(--sd-base-padding));
+  // }
 
   & > * {
     flex-basis: 100%;

From 35ed7d3c5493387699f4b5a5d339465bbd91ca9e Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 3 Jul 2026 18:49:36 +0300
Subject: [PATCH 112/155] Try to fix large matrixes header

---
 .../src/default-theme/blocks/sd-table.scss            | 11 ++++++++---
 packages/survey-react-ui/src/reactquestion_matrix.tsx |  2 +-
 .../src/reactquestion_matrixdropdownbase.tsx          |  2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index e349a612a4..ebb4a2571c 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -391,9 +391,14 @@
     padding-left: 0;
   }
 
-  &:last-of-type {
-    right: var(--sjs2-spacing-negative-x100);
-  }
+  // &:last-of-type {
+  //   right: var(--sjs2-spacing-negative-x100);
+  // }
+}
+.sd-table th:first-of-type,
+.sd-table td:first-of-type {
+  // right: var(--sjs2-spacing-negative-x100);
+  padding-left: 0;
 }
 .sd-table th:last-of-type,
 .sd-table td:last-of-type {
diff --git a/packages/survey-react-ui/src/reactquestion_matrix.tsx b/packages/survey-react-ui/src/reactquestion_matrix.tsx
index f80ada5a91..9da798e208 100644
--- a/packages/survey-react-ui/src/reactquestion_matrix.tsx
+++ b/packages/survey-react-ui/src/reactquestion_matrix.tsx
@@ -34,7 +34,7 @@ export class SurveyQuestionMatrix extends SurveyQuestionElementBase {
 
   protected renderElement(): React.JSX.Element {
     var cssClasses = this.question.cssClasses;
-    var rowsTH = this.question.hasRows ? <td /> : null;
+    var rowsTH = this.question.hasRows ? <th /> : null;
     var headers: Array<React.JSX.Element> = [];
     for (var i = 0; i < this.question.visibleColumns.length; i++) {
       var column = this.question.visibleColumns[i];
diff --git a/packages/survey-react-ui/src/reactquestion_matrixdropdownbase.tsx b/packages/survey-react-ui/src/reactquestion_matrixdropdownbase.tsx
index 7dc461cf22..56f0a9ade1 100644
--- a/packages/survey-react-ui/src/reactquestion_matrixdropdownbase.tsx
+++ b/packages/survey-react-ui/src/reactquestion_matrixdropdownbase.tsx
@@ -57,7 +57,7 @@ class SurveyQuestionMatrixTable extends SurveyElementBase<{ question: QuestionMa
       const cellContent = this.renderCellContent(cell, "column-header", {});
       const header = cell.hasTitle ?
         <th className={cell.className} key={key} style={columnStyle}> {cellContent} </th>
-        : <td className={cell.className} key={key} style={columnStyle}></td>;
+        : <th className={cell.className} key={key} style={columnStyle}></th>;
       headers.push(header);
     }
     return (

From 983260842f0815c6c58d6e572cbf378e94799355 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 09:42:06 +0300
Subject: [PATCH 113/155] Try to move scroller-x to question content

---
 .../src/default-theme/blocks/sd-element.scss  |  1 +
 .../src/default-theme/blocks/sd-table.scss    | 32 +++++++++----------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-element.scss b/packages/survey-core/src/default-theme/blocks/sd-element.scss
index bcd9a1e097..d7aba0d4f6 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-element.scss
@@ -194,6 +194,7 @@
 
 .sd-element__content {
   box-sizing: border-box;
+  overflow-x: auto;
 }
 
 .sd-element__content--enter,
diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index ebb4a2571c..81bbdac170 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -414,22 +414,22 @@
   }
 }
 
-.sd-question.sd-question--table {
-  position: relative;
-  // overflow-x: auto;
-  &>.sd-question__container {
-    &>.sd-question__header-and-content-container {
-      .sd-question__header {
-        position: sticky;
-        left: 0;
-        ~ hr {
-          left: 0;
-        }
-      }
-      overflow-x: auto;
-    }
-  }
-}
+// .sd-question.sd-question--table {
+//   position: relative;
+//   // overflow-x: auto;
+//   &>.sd-question__container {
+//     &>.sd-question__header-and-content-container {
+//       .sd-question__header {
+//         position: sticky;
+//         left: 0;
+//         ~ hr {
+//           left: 0;
+//         }
+//       }
+//       overflow-x: auto;
+//     }
+//   }
+// }
 
 // .sd-question--table.sd-element--nested {
 //   // overflow-x: visible;

From 2421252a7854733d1dabb73d605c03091c697d1f Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 11:02:16 +0300
Subject: [PATCH 114/155] Revert "Try to move scroller-x to question content"

This reverts commit 983260842f0815c6c58d6e572cbf378e94799355.
---
 .../src/default-theme/blocks/sd-element.scss  |  1 -
 .../src/default-theme/blocks/sd-table.scss    | 32 +++++++++----------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-element.scss b/packages/survey-core/src/default-theme/blocks/sd-element.scss
index d7aba0d4f6..bcd9a1e097 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-element.scss
@@ -194,7 +194,6 @@
 
 .sd-element__content {
   box-sizing: border-box;
-  overflow-x: auto;
 }
 
 .sd-element__content--enter,
diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 81bbdac170..ebb4a2571c 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -414,22 +414,22 @@
   }
 }
 
-// .sd-question.sd-question--table {
-//   position: relative;
-//   // overflow-x: auto;
-//   &>.sd-question__container {
-//     &>.sd-question__header-and-content-container {
-//       .sd-question__header {
-//         position: sticky;
-//         left: 0;
-//         ~ hr {
-//           left: 0;
-//         }
-//       }
-//       overflow-x: auto;
-//     }
-//   }
-// }
+.sd-question.sd-question--table {
+  position: relative;
+  // overflow-x: auto;
+  &>.sd-question__container {
+    &>.sd-question__header-and-content-container {
+      .sd-question__header {
+        position: sticky;
+        left: 0;
+        ~ hr {
+          left: 0;
+        }
+      }
+      overflow-x: auto;
+    }
+  }
+}
 
 // .sd-question--table.sd-element--nested {
 //   // overflow-x: visible;

From 56496df56f45c9ef3eb6b4d1e79c8cef4d93c4bc Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 11:02:43 +0300
Subject: [PATCH 115/155] Revert "Try to fix large matrixes header"

This reverts commit 35ed7d3c5493387699f4b5a5d339465bbd91ca9e.
---
 .../src/default-theme/blocks/sd-table.scss            | 11 +++--------
 packages/survey-react-ui/src/reactquestion_matrix.tsx |  2 +-
 .../src/reactquestion_matrixdropdownbase.tsx          |  2 +-
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index ebb4a2571c..e349a612a4 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -391,14 +391,9 @@
     padding-left: 0;
   }
 
-  // &:last-of-type {
-  //   right: var(--sjs2-spacing-negative-x100);
-  // }
-}
-.sd-table th:first-of-type,
-.sd-table td:first-of-type {
-  // right: var(--sjs2-spacing-negative-x100);
-  padding-left: 0;
+  &:last-of-type {
+    right: var(--sjs2-spacing-negative-x100);
+  }
 }
 .sd-table th:last-of-type,
 .sd-table td:last-of-type {
diff --git a/packages/survey-react-ui/src/reactquestion_matrix.tsx b/packages/survey-react-ui/src/reactquestion_matrix.tsx
index 9da798e208..f80ada5a91 100644
--- a/packages/survey-react-ui/src/reactquestion_matrix.tsx
+++ b/packages/survey-react-ui/src/reactquestion_matrix.tsx
@@ -34,7 +34,7 @@ export class SurveyQuestionMatrix extends SurveyQuestionElementBase {
 
   protected renderElement(): React.JSX.Element {
     var cssClasses = this.question.cssClasses;
-    var rowsTH = this.question.hasRows ? <th /> : null;
+    var rowsTH = this.question.hasRows ? <td /> : null;
     var headers: Array<React.JSX.Element> = [];
     for (var i = 0; i < this.question.visibleColumns.length; i++) {
       var column = this.question.visibleColumns[i];
diff --git a/packages/survey-react-ui/src/reactquestion_matrixdropdownbase.tsx b/packages/survey-react-ui/src/reactquestion_matrixdropdownbase.tsx
index 56f0a9ade1..7dc461cf22 100644
--- a/packages/survey-react-ui/src/reactquestion_matrixdropdownbase.tsx
+++ b/packages/survey-react-ui/src/reactquestion_matrixdropdownbase.tsx
@@ -57,7 +57,7 @@ class SurveyQuestionMatrixTable extends SurveyElementBase<{ question: QuestionMa
       const cellContent = this.renderCellContent(cell, "column-header", {});
       const header = cell.hasTitle ?
         <th className={cell.className} key={key} style={columnStyle}> {cellContent} </th>
-        : <th className={cell.className} key={key} style={columnStyle}></th>;
+        : <td className={cell.className} key={key} style={columnStyle}></td>;
       headers.push(header);
     }
     return (

From 7a274d17826db850c1443363071830e97700e0e8 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 11:03:50 +0300
Subject: [PATCH 116/155] Revert "Try to fix large matrixes"

This reverts commit f990d3bfdc6eb89f75aadeba83e8f4960bff130d.
---
 .../src/default-theme/blocks/sd-table.scss    | 83 +++++++------------
 1 file changed, 32 insertions(+), 51 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index e349a612a4..97cd435ed8 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -386,20 +386,13 @@
   z-index: 12;
 
   &:first-of-type {
-    // left: var(--sjs2-spacing-negative-x100);
-    left: 0;
-    padding-left: 0;
+    left: var(--sjs2-spacing-negative-x100);
   }
 
   &:last-of-type {
     right: var(--sjs2-spacing-negative-x100);
   }
 }
-.sd-table th:last-of-type,
-.sd-table td:last-of-type {
-  // right: var(--sjs2-spacing-negative-x100);
-  padding-right: 0;
-}
 
 .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child {
   .sd-action-bar {
@@ -417,33 +410,21 @@
       .sd-question__header {
         position: sticky;
         left: 0;
-        ~ hr {
-          left: 0;
-        }
       }
       overflow-x: auto;
     }
   }
 }
 
-// .sd-question--table.sd-element--nested {
-//   // overflow-x: visible;
-//   &>.sd-question__container {
-//     &>.sd-question__header-and-content-container {
-//       overflow-x: auto;
-//     }
-//   }
-// }
-
-// .sd-question--table.sd-element--collapsed,
-// .sd-question--table.sd-element--nested {
-//   // overflow-x: visible;
-//   &>.sd-question__container {
-//     &>.sd-question__header-and-content-container {
-//       overflow-x: visible;
-//     }
-//   }
-// }
+.sd-question--table.sd-element--collapsed,
+.sd-question--table.sd-element--nested {
+  // overflow-x: visible;
+  &>.sd-question__container {
+    &>.sd-question__header-and-content-container {
+      overflow-x: visible;
+    }
+  }
+}
 
 // TODO: Discuss with team if we need to keep this or not.
 .sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:first-of-type {
@@ -475,29 +456,29 @@
 
 .sd-table-wrapper {
   display: flex;
-  // margin: 0 calc(-1 * var(--sd-base-padding));
+  margin: 0 calc(-1 * var(--sd-base-padding));
   width: fit-content;
-  // min-width: calc(100% + 2 * var(--sd-base-padding));
-
-  // &:before,
-  // &:after {
-  //   content: "";
-  //   display: block;
-  //   position: sticky;
-  //   min-height: 100%;
-  //   width: calc(var(--sd-base-padding) - var(--sjs2-spacing-x100));
-  //   flex-shrink: 0;
-  //   background: var(--sd-table-sticky-background-color);
-  //   z-index: 11;
-  // }
-
-  // &::before {
-  //   left: calc(-1 * var(--sd-base-padding));
-  // }
-
-  // &:after {
-  //   right: calc(-1 * var(--sd-base-padding));
-  // }
+  min-width: calc(100% + 2 * var(--sd-base-padding));
+
+  &:before,
+  &:after {
+    content: "";
+    display: block;
+    position: sticky;
+    min-height: 100%;
+    width: calc(var(--sd-base-padding) - var(--sjs2-spacing-x100));
+    flex-shrink: 0;
+    background: var(--sd-table-sticky-background-color);
+    z-index: 11;
+  }
+
+  &::before {
+    left: calc(-1 * var(--sd-base-padding));
+  }
+
+  &:after {
+    right: calc(-1 * var(--sd-base-padding));
+  }
 
   & > * {
     flex-basis: 100%;

From 2342edba24a0d89b461230242653fbb5668d99dc Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 11:37:06 +0300
Subject: [PATCH 117/155] Try to fix nested tables overflow

---
 .../survey-core/src/default-theme/blocks/sd-table.scss    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 97cd435ed8..eb8328ba2f 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -407,11 +407,11 @@
   // overflow-x: auto;
   &>.sd-question__container {
     &>.sd-question__header-and-content-container {
+      overflow-x: auto;
       .sd-question__header {
         position: sticky;
         left: 0;
       }
-      overflow-x: auto;
     }
   }
 }
@@ -422,6 +422,12 @@
   &>.sd-question__container {
     &>.sd-question__header-and-content-container {
       overflow-x: visible;
+      &>.sd-question__content {
+        margin: 0 calc(-1 * var(--sd-base-padding));
+        padding: 0 calc(var(--sd-base-padding));
+        min-width: auto;
+        overflow-x: auto;
+      }
     }
   }
 }

From f78896ffb64fc52903d7549028f7f66bc17b274e Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 11:48:59 +0300
Subject: [PATCH 118/155] Fixed page error top padding

---
 .../survey-core/src/default-theme/blocks/sd-page.scss     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 46155bcafe..94618c5199 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -102,8 +102,12 @@
   //     margin-bottom: 0;
   //   }
   // }
-  .sd-page__errbox {
-    margin-top: var(--sjs2-spacing-negative-x100);
+
+  // TODO: remove after new tokens are released, it is a temporary fix to keep screenshot
+  .sd-page__header ~ .sd-page__content {
+    .sd-page__errbox {
+      margin-top: var(--sjs2-spacing-negative-x100);
+    }
   }
 
   .sd-page {

From ff4a9f1deb8d8fbc5b9f4d2f815596fc1f0bf883 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 12:03:25 +0300
Subject: [PATCH 119/155] Updated etalons

---
 ...on-matrix-alternate-rows-invalid-value.png | Bin 17954 -> 17942 bytes
 .../question-scrollable-with-error.png        | Bin 15312 -> 15295 bytes
 ...ected-label-should-have-the-same-width.png | Bin 5320 -> 5829 bytes
 3 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/screenshots/matrix.spec.ts-snapshots/question-matrix-alternate-rows-invalid-value.png b/screenshots/matrix.spec.ts-snapshots/question-matrix-alternate-rows-invalid-value.png
index 79cf7cec9934fa442edd3d435bb808bc578d4662..3bb1ddcff45f7bc29ebe1dcc965dc0b33ea764c3 100644
GIT binary patch
literal 17942
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
TFIpf=P-LYQr79#o{_(#6+5^^I

literal 17954
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%0Ddl<7hD6!C&p$
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
Pf}y0K_M%4a-N*j}vor78

diff --git a/screenshots/question.spec.ts-snapshots/question-scrollable-with-error.png b/screenshots/question.spec.ts-snapshots/question-scrollable-with-error.png
index 5c1241ca6eb8f3d46ac5c6fc7636c3a905530806..8c6ee202f5ce6cc92eb5d9b85384dc543b156c60 100644
GIT binary patch
literal 15295
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

literal 15312
zcmdsecU)83wk{sG8ym2#Y^1qGM5V+n(gYGYiiju((n|ml5vdXgC6Ks5L{LC!p+~7o
zml6mi5m4ztKnOk3OF{ynr@jTc_r2$yea^Y}ci;QH`(FM^R^}RO%sEH-<`~}!zooAu
zu=m(rK0ZDH-D_8j`1tsb^YQI)-u)Ngiq+0H=lJ-3;?upNW$c$q9oZKcziUio(aE9o
zw~~jVMuLZ48{Z1qvnS#`CGtl7jpMgJ8<!qdlJ=MsP}07s;P@uVZ)d?J#l@p<_CW3K
z2iv@t`-$gv^1QaP0&V}NQ7190wz&SrQ=Mvo1dP8%=R#`P^2C5zC*7Y2D;+fm{Q1i}
z$F>9k3dv)j7Pp!%zt-L_<)UX2o0n(j;sfZ$$5&$2(%zpOUxCw|{xshq={o$PqDeyD
z65HO|ny0RJ)veyr#zx#UKSfq{NX27--Pj?rWBWd(ypXSr(}>!dhe175s-{(WbMwZV
zOPn`$g?V{rL9#=z=$r-Y-MgyLBU{725{#Yh)e>|{UY~zS$}_ol@1APTG+};zzSM^@
zs613=lVMr2wR(Ju;SJ1kw~u`#*9G?VmY52}>~it9uz>29C8Q{mBuLw1-lO*EeJQ!#
z(blrZrPuRZen!TL8r|5wBUU@NB=Es6<qK816N}E6DXO^lf6mj5k}})Y8Gg(B&9vja
zu&D?4{0irCBDP0A5<l9PC!%%r9%WiSHDFuWSI`E_3ZG@oGD~BZZ+FhSb<RI8I2CWT
zwV!-^^JntC^h`@CE^hyNg~ysYscCJ0zx0DWE?K06!Vc&w;74&NuYTLFIwdO9kt(wN
zHzvM7JeB^NE$0DsV`(h@)XikEjgKISfaYJwOeRTaV_bMA{I6Z(A4OH%HI`Gz`?qd-
zbhtcom&===8Z4x4DW|a4ifoO)Gup5#gs8EM4?h&GK`nXo<`fhawEcvvf`HT$$7`H>
zMm2>rYt4$w@ILc9A)77SG<Dv5W!bj=k48*1qwET0rKBcaan?~aSy}LQ7znSrpc1XX
z?ZH%2hvxc`9G!HerKxF0Bw?jh_O=soW1>_=*<*Bg;#G(~he?W_BZ0(Fn~^FstIzL(
zkTqfVh}KJML;T)zUK~fXxcB=V6)GF!8QMJ(Nt=Th?r_n~l;V}yhb_1ntb6ZSwKLXm
zLeSdWN@!57hDOj_iU*w2jmC32JkmYee{Fe-fkzMdzwnWkG_Rk5_;!{%qc$nFPTX<f
zx@uoCx0DdXoD+%egsxQ**5~|ZcR8hT%2;%DhHO~cTBOJ0SR#HhCb%<*_M{C|T*t`_
z6BK#a`oaSf@PL6=4l-XVOYw++6AU2hEX)mD<s^p3_97JtM~V%|<yvenV&IbuR7<a|
zS;6dQd=P^v$z!0Go1UxXco6)fx%WPNer@0A*ZIYHY~xA>qXun*HAAxIV(F=zua}$F
z=(aW2W=Ulzbp$chMFBUNZBZ70+-xIXq}M9Z>oBS1Uwh3OA21fv>(Wy;n<LGv4cSCU
zXVq**L`1}(qZ4>(10;!9$&qcU-54TE0M-$8OmUj-Q8>)iL=J|qJ(iyx)!*10xon`Z
zg!UcvS;P{3)!VqVO@H*LXQK)p-q2R&gj!!YKpKS)Num|@op?*)C|K5RG~^dwq@<AL
z0vIi_3RPb}g&%6nQQDp@`0^?^xT3n6*)i27nX0yo$tQ2NL_)4d)lT49`rLUl14#CC
zVn;D*H9w!bsc)X1j_Ru<)vk|zx|#AsKw{XR40;@k_wUyA@p#bq>89^U042R6C5+T$
z?QICy@|Nw?`_F`iOwg((;);XhHx~?mZR8E0-D!vVqM|u#1s-Y1*6`KjZXJ4B_gN6A
z7P&Cn1)J97wZ=%>4j1>pX-hp4lPF$PF=x)e{v9hcxX$<P0A`r=tVbX0-yAOUgj6FL
zcx&U?ei60vPqU!w>YH2^VRf}w233E#8ZN%xC@FYx;`#PuH}>~V?Cu*!;mbUVp=o$V
zd~rH_kP$D7T3-akntYw^NWs{ayz=c#uYetu2wddF7X+Xd2J0ZCv9^)wH1IrIcb%P4
zTFP)x`C0!uHeWX=V9lC60|_%bd-g1s{YjJ)u>LmfFcI!ooQ|@_mcwtXyN|>yJUA^Y
zo8JSrJsm`to+TO7G%aW}^SCz=!bkhu)GEtdH*S%E-DZk0>AIQ(_7s(xqjgdpNf=w*
zh1zHw(?s;@U)*@V(+Ye4!1g3CuLH#D2bY#Hh=+aD#a2*`0fA>mcrZ%MR7AS>SG~*2
zn;&;6+Jl-W5{d$YhLqiM4AR*{WDad^CS5)7vy@Db&(}8|nBE*8%H;lz6s2Ny)KFg`
zZ<AIt7QZU05{fS5^<qv{I3Llsu~F}@HlgtRJVms8R{IutNl8f<zvv;<i+a?9cv2qi
zD?Fj2x%o{JM5U6pQ8!qz@5I0oO90g&Z-ot{B8RZf;@>qsZR@qVVBaXg?eI87MxhuJ
zY<VDOw6<0+Cs;*O$aI2}`@5O+Mguizw#DLnzOXH#V_u1VQ^FVK)y)*3P>4AA2*3Z(
zvBm@hP2?!rQB*n5^+En{tsQ^hxTZT#%bg5Q7^(K5NFb<7@4_tc_6`fH?QR0DHliwS
zd*MuEety0S&6k7H_$`}vF+_e#tHpt*3~4j_3g0>ZnGwYxCa~Fiu|a?3l}KnF<&O0(
zfPDOlp~8`DVkx1{LVdad!f_5td%(!nE*A6p`rBB1YAUrML<sr%zWqX0Nt|4O+e2Wp
zgPCs-(drw=Azi@Aw70Xnk*wad6*PhCV`E{lVAqx)PiB1$8LW>1OfcZ4b4ky-=+Vz(
z96Wnow!&c)umX5(^{y@Lj$MfhR`PE6wdt|XOhx5LvX~gBj;_g^j3p$3IhcI2u+{O}
zUHj<B+1H-zp^wrK%tfVw!?LonwgFS|w&1mX`_Rw|mF_IvX=xIa)kI)RThB9>CU}62
zUgj6Lu3x=^nCW1S&}qoUdd~q8kB#0}#2lMhpZ9FtBg5|G$EG3J<@`7)Y#CMLa+p4^
z!$ZP<JiJ6MeVq~fu97@jL{#H%$l1UN+wQj_EiOI24XPVs9tHM>TCzZ<H%4o&Q7p<D
zpsNOL2_x(tOrIt{B_6_jNw3{XL61HiojSZjmt^hL5-xSMJq^OE;&OyECtt8m>DR7d
zCCL|@jY<~E7G|P;J^*cLAwoC8%p?)axg#EgIvvx#7l#bkW7_26y3h%x(C(qmXGJ(B
z@4D$i+4@ZGjYQ8ytd#lXpn%m>Zdr?iyNGXFCo&;E-lw5U$Do?>NqqBQ?!xdyu4c3N
zyEMl}BR|fkNc()m#D_g$>+`FbvPB!C@n&BX{03WOK(;tW+)Jsl<O^!Ek9I~u=HHm&
z<U_=<9M(w5!yXQS*(=l(sh;IRk_A<L#oL0dYrcjZIg$eQz9hS~gBOaP%kzf23<^{V
z+B|CCWn_%!s*D`YN|Q1;7C4$j1}}(`cW;e*RDP7RyDzQsJD#{^bD*<+8|XX=-o_)x
zGi>03rrRTpXLf)4^7L@Q)&;%;XUw;;%?YED?c9DP%Wm6xo?iPV;-{D2Wt`Zxt<$9|
zd%p`fpO>Hi4KU4j9{BGH`)_OW|Biqzcbk$ZafAcCk%{N5@pcK=Z!(T>qBQaxv~qn%
z{hidy+!7ZTA?sAaRHy9ro*e(UaCMi9iAirg|Ek}7ORh_k>tMMvhq<bCIZ=H*DfUN{
z!&GZL4@NwNs4T|G-Iv_n*)v7;d;4NyVp2S+r<R&9yT>2Y2ZvJn3iH*cu|uEaZPuEC
z);WJIfl2s%eGMamD_uxCS!<f(J=1Rk9p{oScb;Z(AIqb7I-k9xg;2|EekUl8#=RU;
z_zfi=S5mrB&m<A>o9{V7CT3>*tKM`FP4vR-WO|qcd@9~7XtAE3--pGJ7Pd`Jz2Mqk
zdGV;XWm!%+d|ID{T;d6+=D-(|oYFNZLsCL&Rf``E=~r(~TeY>e#!g^RNUrZyWTgRJ
zs!^AG(FZ^@ToY9WmnEsetKHWq3nZe=v5qItzCdm9f!YhfGwBFuG_8&)?*B#Ts_oiZ
zYo!ZaHg&n*AsV$gwQFpHW=j(xdiF$r3fdS8YkA90CGbk@FC#T4#;8=P0qbVI%9nPr
zwLD6b=Fi6NP~W8wAM}cyuq`9iSbM?O+ui_1Sk&w9L-e9;1N{3{!ocfP*s3Kk!CWYc
z6DfX?s&s!b+@qLH$c#Q_ZWY5du&)VNvmg(+6tBsoU6>tFa-rcVGsSqud?q2u5Q^tg
z%dRTB^idxliXzw8(M_cDxhpe-K-t}cSht}<D^kfX07B;XrFE+jY-*xMzLs@@g-7jF
zt*XAZ#(Q)oE;a810qD*GnDhE*i^wP&z-1zvb?KV>47i_k4Zuq)BfjL=3Z1?qX4Xgb
z=SOBr7M)l^s;oEZ3$}<i4@{h$F|hM%t_c<7nISM3+`J;~uw^kX8jiiP1Cp_-)8xQd
ze87<c6BCozQ``&IYhC2_VJA$~SfZ5&XQ`7`1>+Z%^j$7gQyVbQP*bNmHP*Wniy(L$
zA?}z^@zms`>p*EX{iP0jW6g>}g!nCnqj*E)#^BYB2?Dd?P!zAfFjV}Z-@Y-&{x`_6
zeXPe0r+CyND|g(&nxsLh>fG9(f5Sn4YQIYZ#VOtY)5{=!IX{2<TcGgPipx!RFLXMu
zf7tM?i9TK9<u&Ri{NtAHms$rMb#5IMMgy=C5gMuqK&Ja&A2!jxmW~CZcq~TH`iSq8
zm8`JB>Afh+a@PY<w(kNzqVX%)CBFnQ-;&c{Yq(Ab1R`hUJNctoF;pC!o~|i$6Py29
zk)U}(4kZkN8u?-eb*kui+xsKct2OkZJ@c6lI{0s1r1dfw2X0;zruq}V&PTM`>6vWl
z!<SX?qiV2HvJe0sut8n~_>CGidjVu*vT7*4S<kOTHdzIHM-6a`d148&@d*G0$i#q^
zdj6bIA5!NGF({{T=Hjp?$EOLkkUvD2VlY-E5$EJB=bz$rey;_T-|x-q9jtJn5c{wr
z1SbFs<qcXA0xr0k4Y8RyldHA5=pVLJxfC(vs8d3#Sjgn~h_(xXH(t^9i-?GfP4yL8
z#fCUKPF2`u^kUso7E28<qaUSZDcn>9t=TiM2EKswoRdcR70xo+K=L-X0~!TXIGq#b
z%M1o~MB8E^5jb+JQb?8VBh@t5B>klAob#p2Jks9$7BO+@+QWw}xgDQ#Zl=_&J>W4Z
zD7iBh@nXv?GQ`&R$=x{|qcEPQsbszO;<6yOQ4(rZ@t`+%1etGIs8D;~n1Bq@yMA5S
zwg0CmXCT;>ESx6s(s7r=>Mr`s8ylD3Zy6`WI^^68QY~;q9EJ;R&65wT?T~ijIQ0UW
z>o|vG`ONpf``R<DHqm|nf_Gz+449w3)`#SU%<J6a=Fq-C>jJ=>FLZ^v6~^nvC$57l
zV~stM?gOQc3twD{a1TB_RWxAriP%E?J+EH<l+a-XAbTF*a!(=`3{YM=W3NNUG+fBG
ztnp`{u*yRTg=2QPoHYRuy?S|uUc0Ohtm+in)^eRzB#KyVhT#!QA0fLv&b_>LBjsXU
z5R3f`v?gu5rStpT2hCFEo$5S9$d74>wWCEgH58AkBB##Fl`1@cGKaeka_uV^D6lAl
zuuH}PWMkwzKj4I76_gPJ*GH7r+3Zo0Eh>n*N|G2T_E`8b8YIZ-EpBYB`1p7!7WuF<
zE+a!*Tpixt-ahP7Tn9EcQ|7LPk9B@|+Y_xxOT>_2W?nBRqIvU+2XfJIagSrulUURy
ziS{lXNhODA5X{S~L9`ae7y(@BUI((^cCP+5T6mw^{6_QLoWgn&ggXa>?qlaC<HBRz
zziq>v&PwI&QGbUe44)Ifp^6ulV*d(W{J)dX{~<#9&rZRxuRB}sJCp)tR#$&73vp9V
zY*`53@xOy!|5?HRZO#5C2#D`AZ+Q+|qnmrKRDGP<@#_h+UyPnci*)+rK?ARF8Qh0h
z>v3I$rIX(-PnEs0lde{JCMn|Ek`%&{?0)y^cIBv!kS6bm$TPi=!-iNtrdpl450zbk
zK%W91GcmkKAKe!wL8>f)<u0n6rJ@*bTB1Sn`;7Ffrx=p4=o=D;@#n<6hy^jnd$Vj5
z!n0!uN4W|<s2{D(;=EjLBo~3g$3xd6HF;lt)5K1BwG1n1Md%h=A8ey*;@VI}axIwO
zR6uWc8|fY^0v(Z^9uAy-KRPC>m#d)36s()Xe>_u(&2m(5l%2jINRAQj&Yo7e=->X_
z@yrHX&II=MbUI|URgs@maG13&;yv9jqV2-v_~r#}7Kjqnip<c->n*ua@oi4`Yj9sS
zBt2d`fH+>8n3vg)z1u#naTO{q%W9wXpof+I<>`rc-t#!APqjZ4HQ~~PL^UoD?rg?n
zs6`74fIZBALWNJ26&+Jzb~%m>MN?7Hg{S=k8INTmT2tUO81)gm`y&jB(WGU3YzwhC
z#9tv~q<w7KNN020+3cpZ(WY~(gPc4}H?DZkI!bxrSHEkR;K|3-V4m3vqk*hBrjg-!
zCu&k=PF;NSNR2P%P?+%K47>&1<}`H()<OhnaAKAbailc2(MA|rse>LPn)STg+V=WP
zq$X^#++@>+B_N(|i@n2TC#gi8?nw8c&)IkdAAXsRYZpPxHz(0|?HXw$-|uK}%83N~
z`)@kj)`8zlGB;92M~v%S6~Mc?J8wjca;oYFq?e(I=b53Q&m<EA^mvOMi^(${Kda4m
z9l^0yC5I~l?N#R{v%NNNxI)n4e*45>&WU<7-cvd0EC&Vbx^G&9xaAomUj$ETuW7~`
z^NT^$D&gxep&GAN@l56<>H@Z)_5_GK6fyNo2BUswIOCNIfg3J7O&S2j^h~YnQAC{F
z8{plNFH&F*4x0R$Khuc_Y)RJId3zG%ZaHm~@495;AcOX%b-54393E1{<ls)WwjI)f
z&(voYi4Vw2+y13T2|Yfb@;u3O5Yg^&Dti8<a8`PGyL7Q<^P7f?ibY9~duxqa^$(?f
z^wy8Rb3&7ZE_H-W7w+AwpLA|vZO7QYppT_3mkp{MmnNR+g?Y~<9z*qYpGQYb!RTqr
z(9fH3Zxt)2jMy7*UJG~N*NZko=!?jLcT?UP?(O~EJ8&USxP;);!G$rk9`th><Q$@<
zeNS{zGkCEzDLQgKfzy?RpvxYsmCrGLk&Y|pkpW{=(1Z;@?`mDY)@kiZr(aZ4FEPrZ
zts&)ecOMV#R*RK663<_!V~fyVuoQ1?<B*=*$=KMexhe#yHki@32@um<VOu%L^Rg6!
zj0>uKZ{<d%8F1HSEc!H%`qBF0EOJT7^d(M=NTbkPH!n}5j3%nco^5c$jEEwahsVb=
z5S=_rzcz98^<#nD!sUqAHspon0t>)ZXIxrX;>ZyxjQ4w#yB4WvCvkJBAc-VM?O%b&
zIQml8x@?DT=_9q8*vGT8Toi`l<Z;W@bJ;-(V1hwJb_^D0e6sa=TL_gsJbZYhKCuW_
zkf`W`^e6q28J2suCV3jw#Le~_4Jy+MChiPd(NCI??q2hOsMp-{FtoTc<aX-dlu{FF
z%3U<&V7DTgF`jW`N=pl)r5Pi8t%-Y?zkJ{Ih-vwo@yilfa0MIviyj}ah2&fM?lTIT
zl7&)7vh}9r_m%Do+fTJF3!e0*LJADplC4d%TIbk+G;!2icz$`uRF4c00y=;Yp!}}Q
zG3D^+C{JaV?5Y{I;Qk!*cn#~l0eIz<p$4VfUdlZMch2zK;s@@oZ0#~S-flKjF+s;q
zP4}d!20NrHHsPMH__-<saxQPv7pm&Ifvc3;UoEJC_2nY;?vXVEs1qNL@X|Mf4ONI1
zv1BJZ0x`UD+5qRe@_3V1_n?x8BI)Ci*U-F*O=E1v{fD|Q$WFIN#shr%GuExb`uGQy
z&UC#``{#bn8l)AJcVyR=7o0zh8siVbrZvu1-PSQkuh9r4%E#y6jN{~zDl^U#^k&AL
zg#~GKD0ER!W2Gr9A(z-f^$jDTBOGD(j>bDls(PEx$9<hk)`LcmNwKC9z{`zYvD5N4
z=N;NZeHB~=5tIIJy;Pxt(?&h8uqoe#dewnV@#V6{(TXe$CForv4RrO{>u7oTJ;7|E
zIIQeYw(RwTT1c&W0(JtnulmSiE7r%4XBY=#b8tVX*E%1%J(toZs2}lmL`rywg`t&o
zO2=2OQ#>R1=8J2+Z#q|<KkU8v!R)DLXX9g;>kq(}R`Lx)aYNw0z~@UIf`-rA(;lg3
zrVeK<FCucFWOdLrIeCrMtaruexOLtDRb79+Y9Uj1Cn%++{J!?)izu}UMaVgaAq$PO
zN67)*pKH+a3TNNWV$7lq?4Ga!b2_2sMwZpCqp8yM@7rXe#lQS|?Z8}$-avz{LnEZp
zf&TNbG(!8ugKi~sDjVFWzvoa(r$B3?kq0p&sqLt|HM2+L(2qVh!aFr`ofX2n9i^wV
zTB!M`swxB>+_Y*7z2LhxqOGR~VP?6pvzIA)3!tUu^3ZtPPJPLKH6Q)=$ynT7Uy+Bb
z$tkC(RIl}?zxncOwM~4|RJOlDiaUevxqzldr7edzT{o4JEu1whyQbYT9x8iK%du5#
zBOZ*4BVqzcY(@^JDOH>%cosASf9#vKv$oQvSPo?HIHmv0Vk;08vua09pbtNnOM|_u
zBV>Zxtc?%|f}l>x!4VmJSK(<3qcTti<<$<G*pw)o4S)Kmy2@z*()-io&!i&HOEYe=
zHgK((<jAh!hKaqEX(ENwZy3RDI$hH9?HY@j90Rpon$=TbF7D3$oY5#5({>ysL7k2{
z59^A!g4C+2!E5+Lv6*P^w(NpgVoEN09e0QNHBQZ9Oy+vcsx;x8+^JKe7uJ|5r*8Pq
zZ>o`2It8vz4=XuoM=W^VsI)$dHTfycAVq`q?#v;2B4gwB?J&A{L83a$J|Zn%Ufk9;
z=K8Z7F#g1S6}ydxZ<m#>^AeD_0t-L#WRl0p(skO16P;?u8GdLsvKg2cD99mq%b{zF
zLY}NSTY~9N3^R+4Ax2CxpQHzJYFm%rPfmN_l%=}_KoKWvrF+wP#LFI%D&8!Q_q8-$
zrRrqNoo*HMmnb>$t#u3mH(GZ)A|SU)4r;@Z9cpoUdZfVa>#^73o(!$y{BadJ)030a
zmBj-gM)=G0LI~Kv9SKeIxKkuT<jp2f0{y75_lVrdA(o^U|1jgh5(9!)rmL(+(Jap|
ze>!j(lxC88!b7YF2zQ~e9#t^i7nr)cgO5c&jRaEClr+1Tj*2poDHjQ<(qP#{BBhNm
z<s*8*`%>F+!_t!`;Ilx8o%|vfLoVbIz?3*L?p&Z=InqBbuv~cr@cSuPE)fBm4IEzl
za<R_1db;!;O&&dL6E{MyPBQ37-RyQLLwQ@%D85nEp7V@m)INxnGt0Mtve+U7RVmlG
zGuC)Jr`@J!A!2DpGEscemztPzY{+Krg<jPvV(e*G=UpLgSKS1dX?GnCrD1O$<*}}f
zGm^>Y<nU9avM^nL=XAZ+s|iG0|0wTpjU4(5d9?U){dLY1oHml}{K9-KoUHsJO`OKR
z_n@QC+7HsLZ4JK-^EfuDN7SnrD%jNFHJgC_Vm=GfJFR}q)`p>TuGz<><Kl!tRtJ8F
z*SiM^oJm^`gOs6-pE&4EYX;2JE$bPLXP;XjDTgZnb(?Rz05q!Qt-n%-eiA55x5v5^
zrcO%DD=Ehs-2Adz(l6pe42`0<St`;qgXY(Kl9ql4L%Gpo-I_oYAUFC-1de`AHt62v
zAA0%Ib85N`{_a{s%ojfh22at`XN^k9a3748#($J9Ce~)7N-|EqBv<%qxxYAQ1V(#O
z*1J6^m9?Eyu}x`EL_rW7N%BP5q><2z4?1*AYP{pxirS^8vSA8u#ViJkLD+R(k3xs^
zDi9!Vl^CJab_G3I>nz?pIa0{0tCY!o<x&}Z{M}t<yL3x0_?<VrW9=@oax@Ks*Gx)F
z5$67O+5&rOQwOjKKU%3x)n1c0bni&USy>xwAV<gc*VL_S8f@P)DyLwvS&SiYX>85|
z{aBUFkK>!9HQn$hch=2q&nAGOFl#81#I-TH8wxB{gAVj(Fymu%y9IV($+#d<#Yy)>
ze~ndT@E1P^Oc6z|J6T%MiEv<2LOIYbFNp7KA?yrDzHsChLrZJCTi6xssw1fwB&jQh
zQF0!yU9|~I*F0{bAA=smJvP|LmePS7aOddPt=BfxR!7(BV2DFdThlKZ=@H|bibsot
z9$d}2R-e2T(#kueKT7G50GNb2X^P9@t|7(olM$yc3f7Lt{HBLgoeAIfV^N}dl`ry^
zrL~cfWrF%5Q~m0ZHC3mT@a3zTzfQ%#+W6O+ZvqooUcJJ#pNXF5Eh);*O!`uK)DWYh
ziaHq4{j`@>c-K*?c8%wZ;Zmxe!7-aSaxQ8^|6T3ff$`AdFpuM9HG;=16VFRd-e|M#
zz679BLq>D+>)7ixEA$>Eh<c!5`f_^=BcUm>=8j#Hv42=h4rMFNW=5qcGLx)`YCZ$+
ziyWUxVh9DLc8eby5n0VYdRp?tWz&7h)R<Rxi*q}T93fZ4os;ySV=wB1BnYrIZK>87
zq1jY(yeF6KXm9U5Ub17CR>ZZQ)$APOG_2~&w6xPU=TU17Cb*qNNf+~c_qyH9c2{tG
zCKGv#^C9AuBYg`=dL%A)&9aHM;^zxWC|_U7=!>p?kiTpIRekj;aBSb$sX!7;pPqJ>
zj8DVjvcBwb0_$2%pFdXx>Xp)Kvt}N)bwm)J5F8?})?YuVmZo#VKhLu-=ypy=n#wY_
z+pR{O!Ak9uCQK_fh#OP~U1b$H6s2B(wNl15g2A~Q*Wn{FKAZFo7S(-b_*eW!gQPwp
zXgbbumknb7&#ay?SW$JhYQMBs&5GnL^V0IF`_r}St*{}V1vqtaN0Wer#_4!?3UI=h
zJ1!1uX<5*CRkBQ-(k>Imn=J=ef99mNRNDF*T^C2A(<ypzw7qY8Gv>m*_K~vOx&uGl
ztP$jNJ$`rDXfDKgj_F%)XCO66d#Zl)vd)S@+Qp2ht<%AJVvEpp6wZ4*RVTN7AEQP>
zc_Ve=Nz~8hkB1(--nlAmSiP}y=C-LD;{E~?!&`os8LjuO=Vp$pLb#Ijki-HrBWYc@
zSA;B8%=_BFUVLfLp^&J$`BJUy83VB*3Z7qqJ;^m%N-M%;u?POr{VN)rb{kUa-R}6F
zZ-}MKjZ#W@4zP5#>llxiu<u={|9<o7|APuh>0jW86lFKd8n~OIqvMH}{nb7$mpG09
zwaLjz#ci<sW{Pr0ii*&&U~72#zprro$HK>#pK;XZTZ;_PauT`oz4@d<D>U$7`wnF3
z#y(=^=jC1JI?Bn)y7cCmgb9kDKYu>>&1CnjKP{hp7oPj1!*S+}xv%Y*U@Xu=Dkvy`
zFARpFcL@Aq-KeLh*VqO$9@GaF4&yHT_#f&of1{oA49xi_VtqAhuR7N=NKhT=;<IzF
zuV$!$v!4jKPV1zX^ZviD;QX6}9^y>*@xui*Zv{k^3#=*?fCBxi1CI?{H&&joa)JY5
z^fG}$kTww@sL6XdYxHdwfPkM9pCbSG36zOy@gHJWrPEK$bl=*NwTQ6+#;46?z62ya
zJ1XB-WFz_|*7{hy_4pYtg|QQV+^S8S3K0Uo(3^M%2-x0$NkB{iXz8#T`bmb}$W7^k
z;XwcB(bYrXy0KWXEg30*3`>Qvbbs81vy?xtQAH%^T{bMC<ussRYHDgbB6BRt?#0K)
zYiYJ*zXO!bm@+an`~`j0G3f6qTiff><>h>um{*gMS5ySI4#?b#87;J`{BiXp`qL@2
zA0WHxDKHa2%|F{*?Y8XKs{g2)`(Jga3>%9Q{p6LNs9k9dn4pU^U+TN2X#8a93<?6e
zf42=?JnK7YIF^QACaQm{80+`1>XaZC9#4R(XM^hoD^ctv8KUY$L5YvRv5sL}XX=Fw
zQCYL1ZOR%Se6R>)9<4S#s|OO*bYq5eb|RDkwwdtyjXlSjb_!{D69;DC3juayyv}xu
zgHK)l>WrQI>HZprreFqx5fO34t9`k%6S6+M9N<mwr8j3H&oN6Y&G2brl2KIi&(0qs
zDq})O)<HI^el%Y^TFkn#NKQ-)$xM>0;p|)^qxwsJA*3&P!r}1k*j3VV$GC*cp||mt
zqQ`@SgHuzJ|FSaRgi&99UIq=C5|T;v3^cC=njX!cU*{HCR-8?Z)A(UE-VAzELDhr1
z57=rDp|%8IHi}s<GJ+QwPw`<W>KbBQ&6WLF(&-)(3fg+iD|;#v`>ULh%uVJTP`=lP
zEIjvIWXLKAfB^PMaos&vzfGV8!JW+!&4I8#1JdyUt2LE8zdN^Xm-NNuK08`>5Q<;z
zv+^hoL~K0mX>Dsm%lT`H-7a^lUEZDsU!)sJxWGVjb7f;lMn82Uw!(!3UYab3H2|Lx
z!v(C)kB`RyjW14v@R}|WK3%DE_wHReXzj^bJQ>MaC^Klv2z}N-0o5)V`S~;Fazk$m
z%bEWSwKZO8g(4~-v#;E@_xh5<;OZ{Q<M2vhbO9S^VB9!)@R_Yus+a{753Y3`!n!TE
z%3E%AuT0DvPVuuO27H09fX=Ls!qAHwUqh<B=K^P6hwg(ytM1*LD|Kv(nnhgcuiS3*
z@kO3dkU1&tQ}4epSRo2Qj<e_lNx|u<sZcZ!MJp7Ijg1Rz33wk$UrYU@#b2NZx1}}^
zXm?wmn?sa&`D{EoR>n?qd~tg<UcLO7ZRZAbS7s%xtxZjlLv9m|^@8GS^IzWHHtfof
zer9VxJm)swXoYp1Gwjz?ODwoG174<niWH4?bish@8b#6r7;hH?2yXG;xDlBVdiBRH
zE|lLUtYm}08XR=72dgNL@(G#-&_{p{P@?LROy#iGP?j#lnGEIuy`vk%VW2-o8zHb+
zGe}9|a(wa1-loG6mWi>knjWL<oq`&#fJWdq8;_I&SOBr7ZWf8b{Qaip^NaU^qQT5J
zB8sS_*jPn-c9yyf*~Yxzp^w_M)g)8rjp>L%4PUCV7r|p1V|M*T67YWevBb$8h1;`_
zl$Y)IQNV9xEauV@9ilaJs_r^2*cC%HXWD}pJx3)Kry0Kv?H#b}$$|V#eZ()3dT{$T
zYWdINzc+FIt3l&W8W}Zjf!0)BUf!dtWk4KX)D@i9RfxR#M>+pbBH8Z|)XU53tgP(L
zV;w+eu2DwqjSTLB@;^&PKx7usuCGohy`zG?a$-!#egAg6?Jjq|{jb9{(1I*Oa+q7e
z_CoMtxBzDKyQ<g!R@D}3poRY}pZpPpi-DBkALM*`Z{LV95Kn*x=XE{3oyY2vm0T<<
z-NnHzTfyHDPzFd*1s0093le|ijuz`=Ww&G7>FLkJnX%RuDuHG@;JAzDU;TCx)9u-*
zyRq`)%jWD~oBw3#{^*;iWAs9r-xL)I_S=Nch4J=&gABrb>@kT%fK>d$7h9nBzl}-&
z;^97DU7y*{zeq_*J-rSr;ona9Z}azqegLcl$J_Pf+;kxo-Q?DIE5EpZUQsa?B{Ed*
z+*9kn{OXrx#~EO*f0m%WU5<R&M!fZ%j5I0se~nmVv7@FAfMA6-HQ3V9^DnQtj#MkX
z;sSFiD=PzF+aTb!fZ_2AXep>0{L>|QZVkVB)yK!@J?-ob)araMK*4EiYt!S_xB}$5
zOB`UKrFrK8ei_jI&btgyjYUMXjDalww+s8n&TU`5-8fyk41k$p&oEu!V`^%u{3f`A
zk8hv-);j_~-@c*k(UYHw#<H`s$EHRRba6M~2<u}Z{|rTzFXJxkp0OJV3Kd6Hfy2ZJ
z71cXJYtkEXFVybGj2=JupFw(nfq!`-APUe5&=`#5=iLo5%7FomLAU?SzJXYN^bh+!
zF;n_*;_4qi0gHgzj<+xm8oY#kbC!+HA|NIZSGuk>$Y8af9R*BEU@JTTJ_leh&jWwl
zdSZrA&o9}Wy<~3ty%op+!~lRWBJ~^EIv9Qh@VrZzd;aiSAjBM&M|*bG{&T!^+T8c{
z7y*}>n)>K!572~fZEby(KH1$5DBI=r_RX6YdYPra!^7_#$nUnDdmne<uv72IO@JJw
zu25$fYCs1TCImpO4zU1gZIiaXq7c~%sQG6boiWvY>wjB^+|aayasz;BOO*!ui-Ckr
zMZM?pOL~8Pr6mI}mVW#pGP9~`vYuZeU@jZI1#cuYt1*7#B)rey+i&UIxQ4sCuQ<(<
ztu1U*0>qqX2={}CQ|b|Hk(N|{iGAb4CJEj$hIiuSwf!OittlRO|IH}}cl=z!cEUKG
zXJcC;0c-C<LzM#tSNJiQbyt8=0iq=xybyd;-g4M;qTiMi5a0(=8TPdCOG2YrpD*|P
zPA+_O?T)u#UvO}pI$Z8F2vq#$+Q}vj9-9s8)GXFnhXTC0dHzfg0x>nzvNYBVpi$ET
zKUp=uj$Tq|$P97@(Ngb2X>F(<%f)QI8<M=Z5+@a<s^MP;*cFDwo>6fhHn+g3ZR`2;
z<kejiG7ry|<egSHeY&}&MUWp8w1!jcRHgKqaXlOMG=+VnJQs=HFCH+TXOiEb8^n@0
z0L3#}^ILY!bfA8bk(rr73!9plgoXgn<tL~_*ZShZFp0TJF_W|H!og+$TK2aEJz0ad
z6L|JTHx_vjNZUOI>QZ90><Hjk1)SmlCY30Z3-8N>RL?z`6M}e8#iNU%9NGe;Xw#?w
zKh)Zz{S3MXL=K=70&rF{@PqTz)RbOAtwhwBL1nN-12TEYy)I~Zx+7CTbsJRjJ$>+h
z7V`lwTL7H1FI%vD{%zwEK~3pz>$&yVL#IZe)};&<nE-HK<dAL;z3%#NG8aqThOiZ7
z75BR`O!7_b_oRqX5qHVJ*Sb2!g0QXM+}9AH`R?rH*I`E${QSp~m9l{&n|cQQfIXQR
z?kkMV7q(vH#OfdOrnpUPGbA6S{e*^<L{)#S1<t9Fl8`0NI$4Mx;3+k<m6nzciU8#L
zzG7Q4K<}QkW613&uETBsTlLtHg8fxT&T^%-t>sXO#8Qil-4+=v@|cgI>gw7OgxLPP
zYtw0K%N`jYM#sDZj%t}G&xaNkn{JhnLj3C9{rLbPMqB$?f*ev)t+D*AkOx3~)3INl
zv@88<8mqkwcn#-9LSYbdMbK%Bx7k49U`>i7m)jLPpDfJV*Acwvafldl<~GH!M6oou
zUlqWPl2yF=uv{L)Dp!y)n#uBUD3<Ui`hxHq{99zC6E72$eF9i(o5Hq%_FmIKBJ!ql
zr^vv&D8M1TI568xHD~d2Ly2;liU)TGzr^P;m^c_d;UR~Z7^bHRE0=_c1ul;G@@nCM
zz}abq>VJQGuWq4!J!_tF!P#pnv8@wKQ8%*<8aZS@yvUr*yw}d2>NT@b0Sxu|^XEHu
zGDkFMIe<U9%s|*r8*NdXXbw{x0HB8ix8@Wku8iXDYuRZDnI2Kfwy!w`#j$9J`6!Rk
zTHLpz=hJ&;M+*Su4L5H4w!dqVxNTip3NJA$PKQl{H=UnFi@^N1{wbdmLJqduL#);l
zwtWVk4hq=b>VHj4{@19qI;FL}y&x}d@BIq^w%>!9{5_`sSuEa0D%;U~7sdUoj7%;7
z2VQl#j@GIL#{3@6|1qH1isV41J|hcv&^vjM`}Na{?HU1qEaLxp>Hr>=2aKYSiUG5A
zxg@n4)4w<;@J-b>e~X^t+Oq+F+Rm~T|2_e}Bz-GXI66610^p*&{KBgPKn?@m+UWaU
zu=rN==tx$I{dZ*!K%8?=&Oa0vRN+BJ0{)n9RxAkGdF&eFjKF&8V*`($!v7Nx<LU2(
zD&$77C-Az3zrVkIha~Mc=ijlAiK*$SgW-VFdZLa0YsIQPfG?B-?mtP;bJ`hxN>Nd9
z6aDVLQbgPTJH!1uN$np~-~Y9RZBrrtCkn9G_9nhnGw~mito|VIJG-p*wYTQUfB&-_
zmv?r#@ya*)*{gJA6XUxHZo@x)3l#<w<$}(F!D^*3x$nab-#IS#&Cj<3FLC<KaMrio
zln>sY*R3QEgDC=FIe8$f1wm>1Msb6`2fnV|AM^%Z@o3)953q49un#W}gr$7D4=Y<>
z)TZpd-=%jk;GUN;G~YCzjG~W}3gvyf9js-JDS}q6ja1OXLLYeD_{0hqf+U;T*kIjl
zR{IKfZ6X|<9JeDXA6xHETS82?ui|;dMz|7ieo<qPcexm8Yk$m%6isn-s=VK);S`-?
zaT7rG=M}df|7b+d=O@>~qERCglXp0;#;_Fdjg!fAoRhx3{)j&p0xSWK7pPLWHTcIZ
cu)ULytC_gMJAPeZYjt$B^{*8D)h_sd0VH_!8vp<R

diff --git a/screenshots/rating.spec.ts-snapshots/question-rating-selected-label-should-have-the-same-width.png b/screenshots/rating.spec.ts-snapshots/question-rating-selected-label-should-have-the-same-width.png
index 6e765b0cd26bcff7042651cc3d9bc7e07e758afb..ef7f6478be4837fa81e0e842614f612586663905 100644
GIT binary patch
literal 5829
zcmc(jXFObAx5q^gy^KWfMi)J5LNHMhEuu%8A!?KmLl{Ibh#(=lA$p7+kwh6p7g3@N
z{+QA0n28>B?&Nvyy)W;}`@A`yeb#54v)0;Y@3p_@mtbb1&p^vXOGZY<U}yj`CnLL3
zLK;s{lasFYVIAybWXxoSAZ?3~JluTPQ-?$FwcptA_FAWD;Fqg(CSN3@0Akl6${C<E
z9XPz$P?cNK;*D!5H^ffDoDLy*w^E!ustjT_TcRs)bS(kNLiONnnW{sgq7JJ#Fp^&5
z_7X6eR}0@rSe{#N+ZFUhcPH-zCXcAKV~>Sbe*{GAo~W%KpJA}ed4U(gb|&^E7Lvv$
zM%U?LK}s3%db&|BvFpd7w_nBgS4d8JRoIWc?n!v+CX~xS5xooQBpf^0_bT#2C%taS
zm#^+yPfnmk0DRwH3JV=qyxyAb?rxe0Q3WLQEa%g?G|G0>*vphZs`xN66=2EQ_YAZG
z<=953tJsTYdU<)H9A(=AFPVCuSM2WQ7(BOKo-|SyN+m0LYU}by0l>-6t=mm=2PapS
zNEMxhq7@QKP(n}Kixvd&v>mPOzwonEQc)sVH<eWES6P=}qfbP|w$lu?LBNV;5I}pq
z+DbCPz=D~@a0}LLS$XNIBpM%I0&m?HbD`G|O0^f_I(#qnq_$5gK7Pfr!s?vQ(MBKi
zNq6+c!Qc+b)Jr4HA`u1F2i<p`W_btTfPzXW;Jp7orr&fz0fjJ4CuugR^!qPp+df)V
z@}=}`AD)&iBs$A+(8f|2?=EN=e7oOfuBjBTh5Ds<wJG5{Y|Y4b&qy=vCOhT3TSaYm
z1A$+FJWhb*Mm>Pal&k}G6mWFfU8L(bsl*^3H+5IwrS!hTOAp<#!k2uoP;xd}N(!Mp
z86L*v8<a7f_N>tIfHdN>vRd~)iMqn&jrVPtXT(+xgOrr~p0=(Hucbfek_X>87&j74
z8(ck@*7-SfffeF>7aHGh00boVyidB#9y9MDNIVydb2`B-LmGwR^C*^Eb_V^<t!8uJ
z&LA5q`OG1=caMH~Sa5tG@|-iDix=|g$2pYQ!|DkerY5isTS+zBpX?zYe1^W(c&D6Q
z?X)O0_k_WCiq#tQTu-T4Tu}e~V`mf*dq0mG8lL8I+)jjISH1}ZM5pgITl-!ndKVjl
z0Y-LWVq)7{TjvpJDu6@!doLjnsrQScb!V$hX&M;f$N=El^A*v<@4stu@!v`#D&(k8
z3J4RIxGT%DxZBip&a5s^pVG_c7>VAn?FocTqxMevQo;`gU;ED}%d=42#<=^<O-!EN
zs5j$)3c~9s!9nzegmQBU9>#ZGrwhNLc-Wx^&4lphX3R}9DZbOcle}x$>0Xs|d2ywh
zNYjQ>Ck%Xgi)g@q2=P1ksTF>Xebv7@`iAI!@Fq)3dJOz3+W^=N`Cji2;<4@@)&>Vl
zswD6x0BU6gk98F>mzT31WBaGpCos+2A;{attV9o0w&eKbr41b~6PlI;^ToC<za%yw
zksuoML7q6Y_%&d4jAzg#B$iVops$EG!FC~DRR&G457wG&RTaTS1T00nYzDqE5aKT%
z2|DJ_c3CtMWlhq%dL^xPB3GD4g)Om=QO7Zvx<&BjSpzFSt<Wa!_AVIt(V?CL9@Jz%
zyubjUTHK)4m;f34U;!WNVEyEhZh*!NGihZH9A5axT||Z4Zu`SJow&I1F}gci<E)FZ
ztJzvhOEezXxINA^;x%JS`+o4rg-keDg&r^00Sb?KgJWt5j~4rLoi){_%^af@0?8oH
zDU0m_i_P`ERR19QG3D($;Z74~LmzB<=dfDJG{~3(n$clCUps;TfXsD;Wq;QFcB;0b
zi|uU9H+7eo0HNy|PT=2&T&Hs#kG5WM`~9hmY*9}5+IzKqK9I=1+^%sCvw`ORikbj)
z!7tnSUtADO-EFgCjU`)|JyzQJIHxB<hDsx2C)JBbm`!*iFDk^G<|02weq;7}YTFnZ
zzJ3(h>i)>vMw-H_hzY+EmftcY+|o864}LZJkI2nx_6x~Ev;7?gc{Vq&6y3;(UoVyH
zSvZc0qveat{Mnpt$_}sZ_9>pOw(Wc?QERSE-qYU$etJC-py}VgR;Q7TVAk{0z4!3Z
z*K>6LK^k><Qqa^q7n|-0fUcqLR_wY@Sy^(O;`5$?(Zcz&xLN*7&tsQkzxmIF#V%cF
zUab)S2eX~<AoYR~u~m504mgud&$CYtz8@v>m<!;<*n;}?I5#)<bu^*u7AZe(+L2i!
zW8QkmM#A@;44oY##4`n)w0zY~f0h+U#XH&Lbonc`MW%Ok3Nvmt)=x~Aqk0rbY21rl
z_bw~*Rl;#u``F)1hH9Z&f;+0X2RWe`914OsSPnGQsoCPuSIGPcO?+)5_=UcWhJtDq
zo96$9M44A`<n+R4oAX1DW-C*)eg(}|J76Q1vvw=SP995?w0i!u9cg&{Vb6xJpk{RU
z3tB`6)7`w5k+ZbGEzEjCOG@HNEU$3u)BWg{h(kQaT|G^|V57CZczYl}Ex=I&@^%P3
zbzNa~cs&67yL??tVCbgQl1D}1gaNjt>2C??vFq-n63}u;&mD&pLg-olJEu9}qub{j
z`I=V)?TVv~%Ril1dnt+GK<Z~b6BMqi=(XA^1`kwpIb2HmXD6C1KQlY0d4SIK)(*m9
zr-<O(9<^EZ>j|j*Q<y8e@@BSjX?^}a>)Q<8!N*>E<wr@bf9JcBZlur1cpgWo;1d#J
zLno4C&+_vfLc}PiSLbAfT2w#?$Ev$r&{~;JT8`DSx0#F;Q*du$9NGv7#C+|JmjB1E
z$7Y16U`Im4$}Zxn&ukmUQJ9VXaIt?F=DnRkomL`d3MLl<t@Up<Sm%Y-$<gJShv413
zwj$cw&E$T|^}R)7_s5ElF{tWoyw9=bZv=ihNh4woHE)2Xnb7}XYW4Y~`1*KhC&O9r
zjT1o)VB^caFx(OEGvX6pI^AnLTwGpWUIG1LmKxQXqMu&4W*%H4{z0;718*tq4T>VN
zns+rh=()J&vhPPyB*F~E^869=86s0OLKQ=pe%?cBHHm`Yq6RITvJ=Xlw4aaa=;FFg
zU>F*Hm-zqQ=ojFxK%THaOzotG5xaKh%<`IJtqLGPburD??AiqA$F@m~t}px9T99`Q
z?LS0MVNjVjwI1I$-=Q0cJ&^jR%HD*XV^#I7mpRmiYC^a=<K598L9YzdiFE-Eosp~h
zH7;_ckxwh@QZ6OtKQV5{1oBb%WBKR&AA~mur1lRTKKNC)Zo{D~S(Q1{cr%gIW_LsE
z`v)b!?7u@Iq2n1D@jr=ECGXe#VN=GD$?!XUdweP7Wo2$K7;IOpL3L?*nj=}JWbK2X
zRK^Z;{&^f$ct<>Eg5~J+^3Xe2>1Uvb`gK~cP{N$;PlPQGoqqQ>bF`F6nVOVso89=I
zktwWbygmNpRwPu{xHwD82pF!3?T*<Uam%i>kX$`JTg~s-;!$~X+S@oq+<-G&Nhb6o
zMxPg)Y?W0HN%iPVqR|ja22R(*Ka5)Z`V#5)$4s4r_{8jggj967L?5G$(Kf%T%C}f=
z!pqFAZ$ICr*TU!&*ex~I)C?ExJggcAhcj#O%t)>dfinX<roRu&bsu&4MdoRW#m_lg
zep+mNtX`|UQ}F~65TKAbDEQ`0cpdJ^^~8HIo<M*h5TL_3%%CA|A*n^geI@P<oK*-F
zRG1E1vQppq44F?}RiPT<ixtGljd$a(peKwtBMaMwbrrMe6)e!Roo-7Tb>m6wjqAkY
z--89=-D2AB#+|1Q{c0cY2m9<aUa9<|Addwp3m(1=rt<Ua7||XB-;FB}UR_pmUw>6M
zj`(5R7W6NQ!Mq!{yVuFo2xO;u5x&ixqoV9MKGPcD86uCbMOsM4OJ2xaILoQl4ub0D
z3q5l#{a6A4SYdgMshIiCuu_=E%0yVPJ5>N{^vO@>h`r}B|HD~i03T0a8<5943Fuqn
z)ZA7`>7ri0G5Yv$x>Jg6?`>$CM89k+BtMZnzGsgzUQK#Lkdq}a#L`t5B8sQe5CS}6
z%Gb>>*5_`!>!g>r`Mq3Bfc#-&Y?G}VF5ZBq6`C3UzN1c9NaSC)Bycq+?@Ip9nj#i;
zPGD^|(pHk`d)HwPtF1`5d7Cd~YWvXmJNtKMx$CqvEe>DURU43ui_abyeaO!#TclXN
z#Z0{*eJayo*rUb<Lf@So9|xtR>lD6xuN@!L1#Xpbn{9!}`kPqt_EUo6xZD)7N&gK6
za(T|$t}5LOMHEe}2_Q&))}$Jwgk3tol6P<u9LJhB<n|0+^y{NQ03Rx$D7+}0);nvG
zj;#=BvNl&oLg(e><q-ZyC#ZOPZGI@2%<}Q$M9xyVlucAeGg7@kmxLdO0|Nui&Fbyg
z^vB{Q0(Y|B-p{&8t7tPtXH<)nQkB7(6+Bl@YP8IAVch6<s8f_vR)#;lFPf%jM|dvV
z@rO=>sgvBza`Il@4QNQ$cbbk<DU+810p%8wv3JZ?COY+8LuEVIVkYHd+ES29{&Y3S
z7F8*ne{y|tM~U#)+<Zj*$>SAA=Mp4->4S!N-R-EtTWQI_mu_!*--zB^GbB(ZfOMqU
zc)Y=uLA>QL4w?mhW#4H1WJ{=(+>|_(a81OtO~<;w*oP)ZZs{dcYqZuoOFK9@`Teq!
z{<Wm*qL<cNG|glE`oQt!ob9>eOW~z&fwjm7YLFpc2!z~EmejzQ2ksT{4VU`NV(8W!
zEi*qw0%KJ^lcs)6WFB}&31=i4t*03#k7Az=%Vkd1%tSV4UV!6{SzEJzr>du>YTD?=
z|8z7WP#(!FFKh%>Aj4*Opws)kpTr4aA_-vsxQE<1r$&?qjteoloTIGnwa7}6!@mIT
z@3|15beMf<MW8gvn)|@mU_CjBW75#He_IkqiaD)T&i>QU(z-zrSI1&6ew_mfMA-sB
z1j^wT_l3PW>lFFX64D0hJJZAM_P?58hj(fbtt(suh2dEH*=E?xT6s!|O{z$(&6ttm
zDgr}CKLmc%=S0Lf`8_2TKdBzH{!BDnzmtNyEmya&9sQ8i_F6C$&WqN**?hr4lcV{m
z+<k#qP<MWpfY<GM6gikGt=5<7Mngf~1KAxT6tgeXc6XMB6@+cnqq=+?u;Gi7nNH!m
zakDC-40@ABmO&c1UBg9v*Wgwco2RZsO#Wpe7Q1)#S}^~E8tinct6@f7pkc#@3Mc3Z
z<_3X`jLP?~7Ldt`Rr<f!E%%*6dp2?l8URO7HwO7W#YHYJ-1D*J-gwc_{!G{Xv4IQe
zy<vuFKLJp9XjECLQd(aTy~e&R2UO@YWP1%ArE<(?8hMfgiyXPUMBfaq`Ey~Zli@lr
z^B|`SS?6uv_^eU&pNj)LCbo9`f)9>3kxYO6B=e0}nolqWqdvOd`z*XrE%JN_CARB^
zVS|u@IT;3$ia0WnE=CE=p${h-u#Vy92{p66JExc2ePf+<f79L5d;*+-o}s@i=Bt$d
z6L9*cExJnzkMno{Cw-vx$73^{gUVXpwyg>H@G`|02MNR68qN7QHHq~`VX7IJY<{|*
zKp{FQxO$8ce@7wDlovaj<~Z2|zLzCp8*oL$SZ<tpxXN+#^HEJ-Fe-edUlz|2#uxG2
zv>-~YI{lH1#>|P7ElP>mcYd_VZhI!|V|%b^$``NMUMo`NvFS>_WsPcSVcN!F?$#|E
z8q<Ex>fWo6W(1IL2H`izi`XeTULV;}7e`|zG2N-sO{1xB+dH3H?sD_-p>+&}Tcmkr
zvY7~cR<+SG+uyva|12OdX8P-=q8YA+S49|f9u;`Hx|gu8oMC2WF8;Z^8W$SIbjTO7
zeu&rS!>Wyb+1cK?1^MoVM9$7|LjQu8IQ4^Djln^mW2}7e_PL~mqGU0~p>#Nik#+sd
z9`pG!Ka&r2jQ4Q}_G>wgB0T5!o7-K+@92H<?L{^t5Ghak3gh7LnzmCfZD31-`-t+b
zTMnU2RTw&%GwUz@cHu^@>-~(xT!0oN%7cqbE$8&fvMzx#!}Qsj5sAv)n=*cV!D+q}
z=gwlBdyx>7yhTa!99#Q~Vq=kZA}m}d(xxluuqal|b*7*!6tc!Ga2gz^0Z91x+jFHv
zTFFmo&sJt_^smDv)xRBxekA((G*i{hzn~|n+oiYPwj>t2h3de}5}qA2Sxllxd%iUZ
zRQ!+;Z*bpZ+5=<FBSmV^nD4y*Za2aa@~zp<r5$SA=AbfhwnUHV-4K{e?9L9QDt@kV
z%be8paDh`36K_&d22Z2XO9YIZ`+9pvNvMYDC3U>vN~Fx{dqF8^i+oHk@tZ(u=f;M3
z&Oxipau%L4u}Lw}Wig(^`aV%Dk};>ig?eZIWXzK_U(>)<mVWd+f=KQb8!DTXmBpMW
zl79bY6|!czs;8eMJ5=$?5&9>Y`ALez_XZsl`$C+}owlwK6&uUoUDZYN-o(vluU7Qb
z)Polzw1!4b<y~-5@<D@b1fDV|D2UA`1%hDgGF`R|V(E)TFmfL?*)zJ^{V11x`(6&z
zsqXMEXzHX7mA%WsdFDJb*r6=nInj-5enmR6{Bz`cdz&S!SXH})#dO7V<en&SQlvE<
z+ht?usw$EDYAU$y2?K6-%5`pcyCu4ofyq(OA$R8}s5)e=Gy&DIg;dWg?lOrBV$K6z
zT&_6FiC<8uHIW}ND;baHihSzY;%0ht@akR-(xpiN_xxjdMCb3<BJ_EF*z0*}tpWKD
z(Au-Q==ZXBq0U2e&!TZ1+mJ6PsUz}ri^(XGXvE%?-D{htS@EYcshzTkQbEU*^^VnB
z1rwW{=BKj$ZkD{A=_E-_$?5elCc)s=e;Q{(DvKmZnxIvMRcmR0ElDY4&|V*6r+pP~
z;AL08F|@Y-ca&{EtdTuPBP3KIxY63VJ+P7;3<6ds*t2P`C-p2x7Z=Z^i3mvu&Qa;>
z0|rV|IOwT#zAFj~lO9#4{%WSmLrpR4WWi$!4Cv`>n)oIllu8X@ScJ#3jt84fOrVpE
zN=zA<ERlI5fOp%1KTH@4coBJbzinc7-*`CTO)M%WC;o&qS=iY{THXe*fI#>d)RbcJ
zIxIpfb$EGq1AFc;y}5S+Q%<7^LH+Uv0%$2OBHBj?D6^dS{wTR*sq_c2<`T7@*{~X$
z3Xn^^zbfomHt{MM8Ig!xDE23b(Nup=o~vX7g0avrbw>q~h0O4t38+TL`PF{`+#^RT

literal 5320
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
CNSn+6


From 7fd749174432e914b4b475f02fc42c44ba71734f Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 12:13:58 +0300
Subject: [PATCH 120/155] Fixed question with indent

---
 .../survey-core/src/default-theme/blocks/sd-element.scss  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-element.scss b/packages/survey-core/src/default-theme/blocks/sd-element.scss
index bcd9a1e097..6104ae8a6a 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-element.scss
@@ -2,10 +2,10 @@
 @use "../mixins.scss" as mixins;
 @use "../typography-mixins.scss" as *;
 
-.sd-element {
-  padding-left: var(--sv-element-add-padding-left, 0px);
-  padding-right: var(--sv-element-add-padding-right, 0px);
-}
+// .sd-element {
+//   padding-left: var(--sv-element-add-padding-left, 0px);
+//   padding-right: var(--sv-element-add-padding-right, 0px);
+// }
 
 .sd-element__title {
   outline: none;

From 55011f949663559fdd63f7255b6c2740d1d48f2c Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 12:33:49 +0300
Subject: [PATCH 121/155] Fixed composite question paddings

---
 packages/survey-core/src/default-theme/blocks/sd-question.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 4694a3fe3f..182ed0859a 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -16,6 +16,9 @@
 .sd-element--with-frame > .sd-question__container {
   gap: 0;
 }
+.sd-composite > .sd-question__container > .sd-question__header-and-content-container {
+  padding: 0;
+}
 
 .sd-question__header-and-content-container {
   display: flex;

From a2bac3a7206781e3b766ed61b86e75a0d89b8264 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 14:03:39 +0300
Subject: [PATCH 122/155] Fixed composite question paddings

---
 .../src/default-theme/blocks/sd-question.scss    | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 182ed0859a..e7225cdb6a 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -16,8 +16,24 @@
 .sd-element--with-frame > .sd-question__container {
   gap: 0;
 }
+// TODO: Refactor
 .sd-composite > .sd-question__container > .sd-question__header-and-content-container {
   padding: 0;
+  &>.sd-question__header {
+    padding-left: var(--sjs2-layout-component-question-header-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
+    padding-right: var(--sjs2-layout-component-question-header-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
+    & ~ hr {
+      width: 100%;
+      left: 0;
+      margin-left: 0;
+    }
+  }
+  &>.sd-question__header ~ .sd-question__content {
+    padding: 0;
+    &>.sd-panel>.sd-panel__content {
+      padding-top: calc(var(--sd-base-padding) - 0.5 * var(--sd-base-vertical-padding));
+    }
+  }
 }
 
 .sd-question__header-and-content-container {

From c721c68fb07bdfb3ea13a1a7648e5be1bebb41bd Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 14:24:24 +0300
Subject: [PATCH 123/155] Fixed no-header table top padding

---
 .../src/default-theme/blocks/sd-table.scss    | 62 ++++++++++---------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index eb8328ba2f..0511e39fa3 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -74,8 +74,38 @@
   }
 }
 
-.sd-table--no-header {
-  padding-top: var(--sjs2-spacing-x300);
+.sd-question__header ~ .sd-question__content {
+  .sd-table--no-header {
+    padding-top: var(--sjs2-spacing-x300);
+  }
+}
+
+// TODO: Discuss with team if we need to keep this or not.
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:first-of-type {
+  .sd-question--table.sd-element--nested {
+    &>.sd-question__container {
+      &>.sd-question__header-and-content-container {
+        &>.sd-question__content:first-child {
+          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+            margin-top: var(--sjs2-spacing-negative-x300);
+          }
+        }
+      }
+    }
+  }
+}
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:not(:first-of-type) {
+  .sd-question--table.sd-element--nested {
+    &>.sd-question__container {
+      &>.sd-question__header-and-content-container {
+        &>.sd-question__content:first-child {
+          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+            margin-top: var(--sjs2-spacing-negative-x200);
+          }
+        }
+      }
+    }
+  }
 }
 
 .sd-panel:not(.sd-panel--as-page) {
@@ -432,34 +462,6 @@
   }
 }
 
-// TODO: Discuss with team if we need to keep this or not.
-.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:first-of-type {
-  .sd-question--table.sd-element--nested {
-    &>.sd-question__container {
-      &>.sd-question__header-and-content-container {
-        &>.sd-question__content:first-child {
-          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-            margin-top: var(--sjs2-spacing-negative-x300);
-          }
-        }
-      }
-    }
-  }
-}
-.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:not(:first-of-type) {
-  .sd-question--table.sd-element--nested {
-    &>.sd-question__container {
-      &>.sd-question__header-and-content-container {
-        &>.sd-question__content:first-child {
-          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-            margin-top: var(--sjs2-spacing-negative-x200);
-          }
-        }
-      }
-    }
-  }
-}
-
 .sd-table-wrapper {
   display: flex;
   margin: 0 calc(-1 * var(--sd-base-padding));

From c8ed4ccb749ff8b11171c331cd43e06966b3c9b4 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 14:36:37 +0300
Subject: [PATCH 124/155] Revert "Fixed no-header table top padding"

This reverts commit c721c68fb07bdfb3ea13a1a7648e5be1bebb41bd.
---
 .../src/default-theme/blocks/sd-table.scss    | 62 +++++++++----------
 1 file changed, 30 insertions(+), 32 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 0511e39fa3..eb8328ba2f 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -74,38 +74,8 @@
   }
 }
 
-.sd-question__header ~ .sd-question__content {
-  .sd-table--no-header {
-    padding-top: var(--sjs2-spacing-x300);
-  }
-}
-
-// TODO: Discuss with team if we need to keep this or not.
-.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:first-of-type {
-  .sd-question--table.sd-element--nested {
-    &>.sd-question__container {
-      &>.sd-question__header-and-content-container {
-        &>.sd-question__content:first-child {
-          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-            margin-top: var(--sjs2-spacing-negative-x300);
-          }
-        }
-      }
-    }
-  }
-}
-.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:not(:first-of-type) {
-  .sd-question--table.sd-element--nested {
-    &>.sd-question__container {
-      &>.sd-question__header-and-content-container {
-        &>.sd-question__content:first-child {
-          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-            margin-top: var(--sjs2-spacing-negative-x200);
-          }
-        }
-      }
-    }
-  }
+.sd-table--no-header {
+  padding-top: var(--sjs2-spacing-x300);
 }
 
 .sd-panel:not(.sd-panel--as-page) {
@@ -462,6 +432,34 @@
   }
 }
 
+// TODO: Discuss with team if we need to keep this or not.
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:first-of-type {
+  .sd-question--table.sd-element--nested {
+    &>.sd-question__container {
+      &>.sd-question__header-and-content-container {
+        &>.sd-question__content:first-child {
+          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+            margin-top: var(--sjs2-spacing-negative-x300);
+          }
+        }
+      }
+    }
+  }
+}
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:not(:first-of-type) {
+  .sd-question--table.sd-element--nested {
+    &>.sd-question__container {
+      &>.sd-question__header-and-content-container {
+        &>.sd-question__content:first-child {
+          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+            margin-top: var(--sjs2-spacing-negative-x200);
+          }
+        }
+      }
+    }
+  }
+}
+
 .sd-table-wrapper {
   display: flex;
   margin: 0 calc(-1 * var(--sd-base-padding));

From e26b21f4b89b12809e072048b9ea129e334c655b Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 14:55:31 +0300
Subject: [PATCH 125/155] Fixed screenshot test

---
 packages/survey-core/src/default-theme/blocks/sd-table.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index eb8328ba2f..0ed3c2e2ce 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -540,6 +540,9 @@
   .sd-question--table.sd-element--nested > .sd-question__content {
     padding-right: calc(var(--sd-base-padding) + 2px);
   }
+  .sd-question--table.sd-element--nested > .sd-question__container >.sd-question__header-and-content-container > .sd-question__content {
+    padding-right: calc(var(--sd-base-padding) + 2px);
+  }
 }
 
 .sd-question--scroll {

From 366f34a5b1cddb41cd1c974eba79f1869cb68cc3 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 16:13:01 +0300
Subject: [PATCH 126/155] Try to fix table question spacings

---
 .../src/default-theme/blocks/sd-table.scss    | 47 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 0ed3c2e2ce..17b143edaf 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -77,7 +77,6 @@
 .sd-table--no-header {
   padding-top: var(--sjs2-spacing-x300);
 }
-
 .sd-panel:not(.sd-panel--as-page) {
   & > .sd-panel__content {
     // .sd-table--no-header {
@@ -439,7 +438,7 @@
       &>.sd-question__header-and-content-container {
         &>.sd-question__content:first-child {
           .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-            margin-top: var(--sjs2-spacing-negative-x300);
+            margin-top: var(--sjs2-spacing-negative-x200);
           }
         }
       }
@@ -860,3 +859,47 @@
 .sd-table.sd-matrixdynamic {
   table-layout: auto;
 }
+
+////////////////////////////////////////////////////////////////////////////////////////
+
+.sd-question--table {
+  &.sd-element--with-frame {
+    &>.sd-question__container {
+      &>.sd-question__header-and-content-container {
+        &>.sd-question__content {
+          .sd-table-wrapper > .sd-table.sd-table--no-header {
+          }
+          .sd-table-wrapper > .sd-table:not(.sd-table--no-header) {
+          }
+          &:first-of-type { // No question header
+            .sd-table-wrapper > .sd-table.sd-table--no-header {
+            }
+            .sd-table-wrapper > .sd-table:not(.sd-table--no-header) {
+            }
+          }
+        }
+      }
+    }
+  }
+  &.sd-element--nested {
+    &>.sd-question__container {
+      padding: 0;
+      &>.sd-question__header-and-content-container {
+        padding: 0;
+        &>.sd-question__content {
+          .sd-table-wrapper > .sd-table.sd-table--no-header {
+          }
+          .sd-table-wrapper > .sd-table:not(.sd-table--no-header) {
+          }
+          &:first-of-type { // No question header
+            .sd-table-wrapper > .sd-table.sd-table--no-header {
+              padding-top: 0;
+            }
+            .sd-table-wrapper > .sd-table:not(.sd-table--no-header) {
+            }
+          }
+        }
+      }
+    }
+  }
+}

From 956759049536aae77e7a5301b4e9d64aa9fd7dad Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 16:32:47 +0300
Subject: [PATCH 127/155] Fixed nested table paddings and changed 2 etalons

---
 .../src/default-theme/blocks/sd-table.scss    |  16 ++++++++--------
 ...-matrix-multi-select-in-panel-no-title.png | Bin 15132 -> 15178 bytes
 ...matrix-single-select-in-panel-no-title.png | Bin 15922 -> 15977 bytes
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 17b143edaf..f0fe9b1bbe 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -867,14 +867,14 @@
     &>.sd-question__container {
       &>.sd-question__header-and-content-container {
         &>.sd-question__content {
-          .sd-table-wrapper > .sd-table.sd-table--no-header {
+          .sd-table-wrapper .sd-table.sd-table--no-header {
           }
-          .sd-table-wrapper > .sd-table:not(.sd-table--no-header) {
+          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
           }
           &:first-of-type { // No question header
-            .sd-table-wrapper > .sd-table.sd-table--no-header {
+            .sd-table-wrapper .sd-table.sd-table--no-header {
             }
-            .sd-table-wrapper > .sd-table:not(.sd-table--no-header) {
+            .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
             }
           }
         }
@@ -887,15 +887,15 @@
       &>.sd-question__header-and-content-container {
         padding: 0;
         &>.sd-question__content {
-          .sd-table-wrapper > .sd-table.sd-table--no-header {
+          .sd-table-wrapper .sd-table.sd-table--no-header {
           }
-          .sd-table-wrapper > .sd-table:not(.sd-table--no-header) {
+          .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
           }
           &:first-of-type { // No question header
-            .sd-table-wrapper > .sd-table.sd-table--no-header {
+            .sd-table-wrapper .sd-table.sd-table--no-header {
               padding-top: 0;
             }
-            .sd-table-wrapper > .sd-table:not(.sd-table--no-header) {
+            .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
             }
           }
         }
diff --git a/screenshots/matrix.spec.ts-snapshots/question-matrix-multi-select-in-panel-no-title.png b/screenshots/matrix.spec.ts-snapshots/question-matrix-multi-select-in-panel-no-title.png
index 170b1ac88f6e4649ab1206f279a840d69f3f8a80..a8bec1723ecc0ad4a5ac10db4bd8ccbf5ead7d1a 100644
GIT binary patch
delta 131
zcmbPJcB*WGI9DeJ69WUoQ{VG?8x`HSCI>L-ZBFN!!paj_p4`H~Ai&`1;utddH^1Iy
zQ-MqTJgo^8L2yxa1-;FV3P92PxWj1-3|zOtYK0B-Hv1Z^<x;xEwX_&$G#f~inL+vc
WlT|zFi@pLy7(8A5T-G@yGywoqFes1!

delta 127
zcmX?AHm7WYI9DSF69WSSr<||zMnyNS%~QFiuue7=(BoP6`E>yUg8+l4i(|;<WPwZk
zlN}ZGcmlj<Ho-;n6@a3?26{Yin=GC)FmSB}tF1Oz%cXQrcPT&6ST>LdGlQ_(lUb_-
S_3i^j7(8A5T-G@yGywpVfhINp

diff --git a/screenshots/matrix.spec.ts-snapshots/question-matrix-single-select-in-panel-no-title.png b/screenshots/matrix.spec.ts-snapshots/question-matrix-single-select-in-panel-no-title.png
index 9342ede2a329ef6a7459c139b6eeb8ceea5528ed..30c3723c0506f3c0781ce11ffacae75ef4641112 100644
GIT binary patch
literal 15977
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
R1-@apeBs(}dFL&I{vTFlYpnnP

literal 15922
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
Bb07c!


From 4739c73a060b1863e14f1da187c3ee8b585021b1 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 16:40:08 +0300
Subject: [PATCH 128/155] Fixed paneldynamic footer paddings in mobile mode

---
 .../survey-core/src/default-theme/blocks/sd-paneldynamic.scss   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 79db079d32..321d1262d8 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -114,7 +114,7 @@
         padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x100)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-spacing-x300));
     }
     .sd-paneldynamic__panel-footer {
-        padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x200)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-spacing-x200));
+        padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x200)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-spacing-x300));
         // margin-right: calc(1.5 * var(--sjs2-spacing-negative-x050));
         margin-top: calc(var(--sjs2-spacing-negative-x400));
     }

From b7ed5d49008e654cf286af02e17e16878e952f9b Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 16:54:19 +0300
Subject: [PATCH 129/155] Updated etalons

---
 .../preview-matrix-single.png                 | Bin 4680 -> 4598 bytes
 .../readonly-matrix-single.png                | Bin 6232 -> 5926 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/screenshots/readonly-preview.spec.ts-snapshots/preview-matrix-single.png b/screenshots/readonly-preview.spec.ts-snapshots/preview-matrix-single.png
index be35e44fc82dc9cd62297979876a92b2da9b1843..7de2dc0be60be6a79cddb05f82638b2bbcffed21 100644
GIT binary patch
delta 86
zcmX@1@=bYyIM)UaCI%p2JCZq3@%iQ`#`AoWZ*fUa4iGTsS)JFuhJk@`zNd?0$mVu|
k`HV_CFZ3IL6oW*V8Rolf?w)kzj4epNr>mdKI;Vst0Lo<?0RR91

delta 86
zcmeySd_rY{IM)FVCI$uuZk3ZOCMrIktiThrnS=2>9}lC(y&MJx#*dyZjv<q;^9OA<
o6`0ScG^hCRL7-|jkSH_5%5$4nPrk#r0Vu-Y>FVdQ&MBb@0J;AhApigX

diff --git a/screenshots/readonly-preview.spec.ts-snapshots/readonly-matrix-single.png b/screenshots/readonly-preview.spec.ts-snapshots/readonly-matrix-single.png
index efe3f2528a85274729bc9cd58a93ea9acc9c9201..2723802989157c1f1df9f761b2769e748604f3ad 100644
GIT binary patch
literal 5926
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

literal 6232
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


From 270440c8ba049557eb787a7cf18ca84def6df430 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 17:22:37 +0300
Subject: [PATCH 130/155] Try to fix hovered collapsed nested header style

---
 .../default-theme/blocks/sd-collapsed-element.scss  | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
index f3a08c3222..2c883a3f59 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
@@ -39,6 +39,19 @@
       box-shadow: 0 var(--sjs2-spacing-negative-x200) 0 0 $background-dim-light, 0 var(--sjs2-spacing-x200) 0 $background-dim-light;
     }
   }
+
+  &.sd-element--nested > div > div {
+
+    &>.sd-element__header:hover,
+    &>.sd-element__header:focus-within {
+      background-color: $background-dim-light;
+      // box-shadow: var(--sjs2-spacing-negative-x500) var(--sjs2-spacing-negative-x200) 0 0 var(--sjs2-color-bg-basic-secondary), 
+      // var(--sjs2-spacing-x500) var(--sjs2-spacing-negative-x200) 0 0 var(--sjs2-color-bg-basic-secondary), 
+      // var(--sjs2-spacing-x500) var(--sjs2-spacing-x200) 0 var(--sjs2-color-bg-basic-secondary), 
+      // var(--sjs2-spacing-negative-x500) var(--sjs2-spacing-x200) 0 var(--sjs2-color-bg-basic-secondary);
+      box-shadow: var(--sjs2-spacing-negative-x300) 0px 0px var(--sjs2-spacing-x200) var(--sjs2-color-bg-basic-secondary), var(--sjs2-spacing-x300) 0px 0px var(--sjs2-spacing-x200) var(--sjs2-color-bg-basic-secondary);
+    }
+  }
 }
 
 .sd-element--expandable > div > div {

From 51fe19acbcb9cc059cda557ee372a88d4a905018 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Mon, 6 Jul 2026 18:31:07 +0300
Subject: [PATCH 131/155] New tokens: pick changes from react to other
 frameworks Fixes #11421

---
 .../survey-angular-ui/src/page.component.html |  22 +--
 .../src/panel.component.html                  |   2 +-
 .../survey-angular-ui/src/panel.component.ts  |  11 +-
 .../src/question.component.html               |  55 ++++---
 .../src/questions/paneldynamic.component.html |   2 +-
 packages/survey-vue3-ui/src/Page.vue          |  28 ++--
 packages/survey-vue3-ui/src/Panel.vue         |  22 +--
 .../src/PanelDynamicProgress.vue              |   8 +-
 packages/survey-vue3-ui/src/Question.vue      | 147 +++++++++---------
 9 files changed, 159 insertions(+), 138 deletions(-)

diff --git a/packages/survey-angular-ui/src/page.component.html b/packages/survey-angular-ui/src/page.component.html
index 1b2d538395..2396fc7bc9 100644
--- a/packages/survey-angular-ui/src/page.component.html
+++ b/packages/survey-angular-ui/src/page.component.html
@@ -1,16 +1,20 @@
 <ng-template #template>
   <ng-container *ngIf="!!this.survey && !!this.model && this.model.isVisible && !!this.model.survey">
     <div [class]="model.cssRoot" #pageContainer>
-      <sv-ng-element-title [element]="model"></sv-ng-element-title>
-      <div *ngIf="model._showDescription" [class]="model.cssClasses.page?.description">
-        <sv-ng-string [model]="model.locDescription"></sv-ng-string>
+      <div *ngIf="model.hasTitle || model._showDescription" [class]="model.cssHeader">
+        <sv-ng-element-title [element]="model"></sv-ng-element-title>
+        <div *ngIf="model._showDescription" [class]="model.cssClasses.page?.description">
+          <sv-ng-string [model]="model.locDescription"></sv-ng-string>
+        </div>
+      </div>
+      <div [class]="model.cssContent">
+        <div *ngIf="model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
+        <ng-container *ngFor="let row of model.visibleRows">
+          <ng-template [component]="{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }">
+            <sv-ng-row [row]="row"></sv-ng-row>
+          </ng-template>
+        </ng-container>
       </div>
-      <div *ngIf="model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
-      <ng-container *ngFor="let row of model.visibleRows">
-        <ng-template [component]="{ name: $any(model.survey).getRowWrapperComponentName(row), data: { componentData: $any(model.survey).getRowWrapperComponentData(row) } }">
-          <sv-ng-row [row]="row"></sv-ng-row>
-        </ng-template>
-      </ng-container>
     </div>
   </ng-container>  
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/panel.component.html b/packages/survey-angular-ui/src/panel.component.html
index e85a629ed6..5e4a619112 100644
--- a/packages/survey-angular-ui/src/panel.component.html
+++ b/packages/survey-angular-ui/src/panel.component.html
@@ -10,7 +10,7 @@
           <sv-ng-row [row]="row"></sv-ng-row>
         </ng-template>
       </ng-container>
-      <sv-ng-action-bar [model]="model.getFooterToolbar()"></sv-ng-action-bar>
     </div>
+    <sv-ng-action-bar *ngIf="model.renderedIsExpanded && model.getFooterToolbar().hasActions" [model]="model.getFooterToolbar()"></sv-ng-action-bar>
   </div>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/panel.component.ts b/packages/survey-angular-ui/src/panel.component.ts
index ee7fdd6c2d..b22be90a67 100644
--- a/packages/survey-angular-ui/src/panel.component.ts
+++ b/packages/survey-angular-ui/src/panel.component.ts
@@ -9,7 +9,7 @@ import { AngularComponentFactory } from "./component-factory";
 export class PanelComponent extends BaseAngular<PanelModel> implements AfterViewInit {
   @Input() model!: PanelModel;
   @ViewChild("panelContainer", { static: false, read: ElementRef }) panelContainerRef!: ElementRef<HTMLDivElement>;
-  private readonly panelPaddingHorizontal = "var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500))";
+  private readonly panelPaddingHorizontal = "var(--sd-base-padding, var(--sjs2-spacing-x500))";
   protected getModel(): PanelModel {
     return this.model;
   }
@@ -26,12 +26,9 @@ export class PanelComponent extends BaseAngular<PanelModel> implements AfterView
   }
   public get panelContentStyle(): Record<string, string> {
     const hasInnerPadding = !!this.model?.innerPaddingLeft;
-    return {
-      "padding-inline-start": hasInnerPadding
-        ? `calc(${this.panelPaddingHorizontal} + ${this.model.innerPaddingLeft})`
-        : this.panelPaddingHorizontal,
-      "padding-inline-end": this.panelPaddingHorizontal,
-    };
+    return hasInnerPadding ? {
+      "padding-inline-start": `calc(${this.panelPaddingHorizontal} + ${this.model.innerPaddingLeft})`,
+    } : {};
   }
 }
 AngularComponentFactory.Instance.registerComponent("panel", PanelComponent);
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/question.component.html b/packages/survey-angular-ui/src/question.component.html
index c2c2b0453a..ae8387f87b 100644
--- a/packages/survey-angular-ui/src/question.component.html
+++ b/packages/survey-angular-ui/src/question.component.html
@@ -9,32 +9,37 @@
       [model]="model.singleInputActions"
       [css]="model.cssClasses"
     ></sv-breadcrumbs>
-    <div *ngIf="model.showErrorsAboveQuestion && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
-    <div [element]="model" *ngIf="model.hasTitleOnLeftTop" sv-ng-element-header></div>
-    <sv-single-input-summary
-      *ngIf="!!model.singleInputSummary"
-      [model]="model.singleInputSummary"
-      [css]="model.cssClasses"
-    ></sv-single-input-summary>
-    <sv-ng-element
-      *ngIf="!model.singleInputSummary && !!singleQuestion"
-      [model]="singleQuestion"
-    ></sv-ng-element>
-    <ng-template
-      *ngIf="!model.singleInputSummary && !singleQuestion"
-      [component]="{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }">
-      <div [class]="model.cssContent" role="presentation" [visible]="model.renderedIsExpanded" [attr.aria-hidden]="model.contentAriaHidden" [attr.data-sv-drop-target-matrix-row]="model.dragDropMatrixAttribute" [attr.data-sv-drop-target-matrix]="model.dragDropMatrixAttribute">
+    <div [class]="model.getQuestionContainerCss()">
+      <div *ngIf="model.showErrorsAboveQuestion && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
+      <div [class]="model.getHeaderAndContentContainerCss()">
+        <div [element]="model" *ngIf="model.hasTitleOnLeftTop" sv-ng-element-header></div>
+        <hr *ngIf="model.hasTitleOnLeftTop && model.isComplexQuestion" />
+        <sv-single-input-summary
+          *ngIf="!!model.singleInputSummary"
+          [model]="model.singleInputSummary"
+          [css]="model.cssClasses"
+        ></sv-single-input-summary>
+        <sv-ng-element
+          *ngIf="!model.singleInputSummary && !!singleQuestion"
+          [model]="singleQuestion"
+        ></sv-ng-element>
         <ng-template
-          [component]="{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }"></ng-template>
-        <div *ngIf="model.hasComment" [class]="model.getCommentAreaCss(false)">
-          <div [model]="model.locCommentText" sv-ng-string></div>
-          <sv-ng-comment [question]="model"></sv-ng-comment>
-        </div>
-        <div *ngIf="model.hasDescriptionUnderInput" [class]="model.cssDescription" [attr.id]="model.ariaDescriptionId"
-          [model]="model.locDescription" sv-ng-string></div>
+          *ngIf="!model.singleInputSummary && !singleQuestion"
+          [component]="{ name: getQuestionContentWrapperComponentName(), data: getQuestionContentWrapperComponentData() }">
+          <div [class]="model.cssContent" role="presentation" [visible]="model.renderedIsExpanded" [attr.aria-hidden]="model.contentAriaHidden" [attr.data-sv-drop-target-matrix-row]="model.dragDropMatrixAttribute" [attr.data-sv-drop-target-matrix]="model.dragDropMatrixAttribute">
+            <ng-template
+              [component]="{ name: getComponentName(), data: { model: model }, default: 'skeleton-question' }"></ng-template>
+            <div *ngIf="model.hasComment" [class]="model.getCommentAreaCss(false)">
+              <div [model]="model.locCommentText" sv-ng-string></div>
+              <sv-ng-comment [question]="model"></sv-ng-comment>
+            </div>
+            <div *ngIf="model.hasDescriptionUnderInput" [class]="model.cssDescription" [attr.id]="model.ariaDescriptionId"
+              [model]="model.locDescription" sv-ng-string></div>
+          </div>
+        </ng-template>
+        <div [element]="model" *ngIf="model.hasTitleOnBottom" sv-ng-element-header></div>
       </div>
-    </ng-template>
-    <div [element]="model" *ngIf="model.hasTitleOnBottom" sv-ng-element-header></div>
-    <div *ngIf="model.showErrorsBelowQuestion && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
+      <div *ngIf="model.showErrorsBelowQuestion && model.hasVisibleErrors" [element]="model" sv-ng-errors></div>
+    </div>
   </div>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/questions/paneldynamic.component.html b/packages/survey-angular-ui/src/questions/paneldynamic.component.html
index 5eedd5a77e..27cfadfc0f 100644
--- a/packages/survey-angular-ui/src/questions/paneldynamic.component.html
+++ b/packages/survey-angular-ui/src/questions/paneldynamic.component.html
@@ -24,7 +24,7 @@
   <ng-container [ngTemplateOutlet]="progress" *ngIf="model.showNavigation"></ng-container>
 </div>
 <ng-template #progress>
-  <div [class]="model.cssClasses.footer" *ngIf="!!model.cssClasses.footer">
+  <div [class]="model.cssClasses.footer" *ngIf="(model.isRangeShowing && model.isProgressBottomShowing) || model.showFooterToolbar">
     <hr [class]="model.cssClasses.separator" />
     <div [class]="model.cssClasses.progress" *ngIf="model.isRangeShowing && model.isProgressBottomShowing">
       <div [class]="model.cssClasses.progressBar" [style]="{ width: model.progress }" 
diff --git a/packages/survey-vue3-ui/src/Page.vue b/packages/survey-vue3-ui/src/Page.vue
index b9e7003aba..1c12aea236 100644
--- a/packages/survey-vue3-ui/src/Page.vue
+++ b/packages/survey-vue3-ui/src/Page.vue
@@ -1,21 +1,25 @@
 <template>
   <div :class="page.cssRoot" ref="root">
-    <SvComponent :is="'survey-element-title'" :element="page" :css="css" />
-    <div v-if="showDescription" :class="page.cssClasses.page.description">
-      <SvComponent :is="'survey-string'" :locString="page.locDescription" />
+    <div v-if="page.hasTitle || showDescription" :class="page.cssHeader">
+      <SvComponent :is="'survey-element-title'" :element="page" :css="css" />
+      <div v-if="showDescription" :class="page.cssClasses.page.description">
+        <SvComponent :is="'survey-string'" :locString="page.locDescription" />
+      </div>
     </div>
-    <SvComponent :is="'survey-errors'" :element="page" />
-    <template v-for="row in page.visibleRows" :key="row.id">
-      <SvComponent
-        :is="(page.getSurvey() as SurveyModel).getRowWrapperComponentName(row)"
-        v-bind="{
+    <div :class="page.cssContent">
+      <SvComponent :is="'survey-errors'" :element="page" />
+      <template v-for="row in page.visibleRows" :key="row.id">
+        <SvComponent
+          :is="(page.getSurvey() as SurveyModel).getRowWrapperComponentName(row)"
+          v-bind="{
             componentData: (page.getSurvey() as SurveyModel).getRowWrapperComponentData(row),
           }"
-      >
-        <SvComponent :is="'survey-row'" :row="row" :survey="survey" :css="css">
+        >
+          <SvComponent :is="'survey-row'" :row="row" :survey="survey" :css="css">
+          </SvComponent>
         </SvComponent>
-      </SvComponent>
-    </template>
+      </template>
+    </div>
   </div>
 </template>
 
diff --git a/packages/survey-vue3-ui/src/Panel.vue b/packages/survey-vue3-ui/src/Panel.vue
index de13cf5e9c..cf5cc419da 100644
--- a/packages/survey-vue3-ui/src/Panel.vue
+++ b/packages/survey-vue3-ui/src/Panel.vue
@@ -47,11 +47,12 @@
           </SvComponent>
         </SvComponent>
       </template>
-      <SvComponent
-        :is="'sv-action-bar'"
-        :model="element.getFooterToolbar()"
-      ></SvComponent>
     </div>
+    <SvComponent
+      :is="'sv-action-bar'"
+      v-if="element.renderedIsExpanded && element.getFooterToolbar().hasActions"
+      :model="element.getFooterToolbar()"
+    ></SvComponent>
   </div>
 </template>
 
@@ -75,15 +76,14 @@ const props = defineProps<{
 }>();
 const root = ref<HTMLElement>(null as any);
 const survey = computed(() => props.element.survey);
-const panelPaddingHorizontal = "var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500))";
+const panelPaddingHorizontal = "var(--sd-base-padding, var(--sjs2-spacing-x500))";
 const panelContentStyle = computed(() => {
   const innerPaddingLeft = props.element.innerPaddingLeft;
-  return {
-    paddingInlineStart: innerPaddingLeft
-      ? `calc(${panelPaddingHorizontal} + ${innerPaddingLeft})`
-      : panelPaddingHorizontal,
-    paddingInlineEnd: panelPaddingHorizontal,
-  };
+  return innerPaddingLeft
+    ? {
+        paddingInlineStart: `calc(${panelPaddingHorizontal} + ${innerPaddingLeft})`,
+      }
+    : {};
 });
 
 useBase(() => props.element);
diff --git a/packages/survey-vue3-ui/src/PanelDynamicProgress.vue b/packages/survey-vue3-ui/src/PanelDynamicProgress.vue
index 8e25f888cd..ace18b2762 100644
--- a/packages/survey-vue3-ui/src/PanelDynamicProgress.vue
+++ b/packages/survey-vue3-ui/src/PanelDynamicProgress.vue
@@ -1,5 +1,11 @@
 <template>
-  <div :class="question.cssClasses.footer" v-if="!!question.cssClasses.footer">
+  <div
+    :class="question.cssClasses.footer"
+    v-if="
+      (question.isRangeShowing && question.isProgressBottomShowing) ||
+      question.showFooterToolbar
+    "
+  >
     <hr :class="question.cssClasses.separator" />
     <div
       :class="question.cssClasses.progress"
diff --git a/packages/survey-vue3-ui/src/Question.vue b/packages/survey-vue3-ui/src/Question.vue
index 0157271e65..9974c85c90 100644
--- a/packages/survey-vue3-ui/src/Question.vue
+++ b/packages/survey-vue3-ui/src/Question.vue
@@ -20,79 +20,84 @@
       :model="element.singleInputActions"
       :css="element.cssClasses"
     />
-    <SvComponent
-      :is="'survey-errors'"
-      v-if="element.showErrorsAboveQuestion"
-      :element="element"
-      :location="'top'"
-    />
-    <SvComponent
-      :is="'survey-element-header'"
-      v-if="element.hasTitleOnLeftTop"
-      :element="element"
-      :css="element.cssClasses"
-    />
-    <SvComponent
-      :is="'sv-single-input-summary'"
-      v-if="element.singleInputSummary"
-      :css="element.cssClasses"
-      :summary="element.singleInputSummary"
-    ></SvComponent>
-    <SvComponent
-      :is="'survey-question'"
-      v-else-if="singleQuestion"
-      :css="css"
-      :element="singleQuestion"
-      :survey="survey"
-      :key="(singleQuestion as any).id"
-    ></SvComponent>
-    <SvComponent
-      v-else
-      :is="contentComponentName"
-      v-bind="contentComponentData"
-    >
-      <div
-        :class="getContentClass(element) || undefined"
-        :aria-hidden="element.contentAriaHidden"
-        :style="{ display: !element.renderedIsExpanded ? 'none' : undefined }"
-        role="presentation"
-        :data-sv-drop-target-matrix="element.dragDropMatrixAttribute"
-        :data-sv-drop-target-matrix-row="element.dragDropMatrixAttribute"
-      >
-        <SvComponent :is="componentName" :question="element" />
-        <div v-if="element.hasComment" :class="element.getCommentAreaCss()">
-          <div>
-            <SvComponent
-              :is="'survey-string'"
-              :locString="element.locCommentText"
-            />
-          </div>
-          <SvComponent :is="'survey-question-comment'" :question="element" />
-        </div>
-        <div
-          v-if="element.hasDescriptionUnderInput"
-          :class="element.cssDescription"
-          :id="element.ariaDescriptionId"
+    <div :class="element.getQuestionContainerCss()">
+      <SvComponent
+        :is="'survey-errors'"
+        v-if="element.showErrorsAboveQuestion"
+        :element="element"
+        :location="'top'"
+      />
+      <div :class="element.getHeaderAndContentContainerCss()">
+        <SvComponent
+          :is="'survey-element-header'"
+          v-if="element.hasTitleOnLeftTop"
+          :element="element"
+          :css="element.cssClasses"
+        />
+        <hr v-if="element.hasTitleOnLeftTop && element.isComplexQuestion" />
+        <SvComponent
+          :is="'sv-single-input-summary'"
+          v-if="element.singleInputSummary"
+          :css="element.cssClasses"
+          :summary="element.singleInputSummary"
+        ></SvComponent>
+        <SvComponent
+          :is="'survey-question'"
+          v-else-if="singleQuestion"
+          :css="css"
+          :element="singleQuestion"
+          :survey="survey"
+          :key="(singleQuestion as any).id"
+        ></SvComponent>
+        <SvComponent
+          v-else
+          :is="contentComponentName"
+          v-bind="contentComponentData"
         >
-          <SvComponent
-            :is="'survey-string'"
-            :locString="element.locDescription"
-          />
-        </div>
+          <div
+            :class="getContentClass(element) || undefined"
+            :aria-hidden="element.contentAriaHidden"
+            :style="{ display: !element.renderedIsExpanded ? 'none' : undefined }"
+            role="presentation"
+            :data-sv-drop-target-matrix="element.dragDropMatrixAttribute"
+            :data-sv-drop-target-matrix-row="element.dragDropMatrixAttribute"
+          >
+            <SvComponent :is="componentName" :question="element" />
+            <div v-if="element.hasComment" :class="element.getCommentAreaCss()">
+              <div>
+                <SvComponent
+                  :is="'survey-string'"
+                  :locString="element.locCommentText"
+                />
+              </div>
+              <SvComponent :is="'survey-question-comment'" :question="element" />
+            </div>
+            <div
+              v-if="element.hasDescriptionUnderInput"
+              :class="element.cssDescription"
+              :id="element.ariaDescriptionId"
+            >
+              <SvComponent
+                :is="'survey-string'"
+                :locString="element.locDescription"
+              />
+            </div>
+          </div>
+        </SvComponent>
+        <SvComponent
+          :is="'survey-element-header'"
+          v-if="element.hasTitleOnBottom"
+          :element="element"
+          :css="css"
+        />
       </div>
-    </SvComponent>
-    <SvComponent
-      :is="'survey-element-header'"
-      v-if="element.hasTitleOnBottom"
-      :element="element"
-      :css="css"
-    />
-    <SvComponent
-      :is="'survey-errors'"
-      v-if="element.showErrorsBelowQuestion"
-      :element="element"
-      :location="'bottom'"
-    />
+      <SvComponent
+        :is="'survey-errors'"
+        v-if="element.showErrorsBelowQuestion"
+        :element="element"
+        :location="'bottom'"
+      />
+    </div>
   </div>
 </template>
 

From 3f99f41e6b0691a96568ec41064333de1ef2e42a Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 7 Jul 2026 11:53:12 +0300
Subject: [PATCH 132/155] Updated markup snapshots

---
 tests/markup/helper.ts                        |   3 -
 .../boolean-checkbox-custom-icon.snap.html    |  36 +-
 ...lean-checkbox-defaultV2-required.snap.html |  32 +-
 .../boolean-checkbox-defaultV2.snap.html      |  36 +-
 .../boolean-checkbox-disabled.snap.html       |  28 +-
 ...lean-checkbox-readonly-defaultV2.snap.html |  36 +-
 .../snapshots/boolean-checkbox.snap.html      |  28 +-
 .../snapshots/boolean-disabled.snap.html      |  38 +-
 .../boolean-radio-disabled.snap.html          |  64 ++-
 .../boolean-radio-readonly.snap.html          |  64 ++-
 .../snapshots/boolean-radio-v2.snap.html      |  64 ++-
 .../snapshots/boolean-radio-values.snap.html  |  64 ++-
 .../markup/snapshots/boolean-radio.snap.html  |  64 ++-
 .../snapshots/boolean-readonly.snap.html      |  38 +-
 ...lean-switch-value-false-readonly.snap.html |  22 +-
 .../boolean-switch-value-false.snap.html      |  22 +-
 ...olean-switch-value-true-readonly.snap.html |  22 +-
 .../boolean-switch-value-true.snap.html       |  22 +-
 tests/markup/snapshots/boolean-v2.snap.html   |  38 +-
 .../snapshots/boolean-value-v2.snap.html      |  44 +-
 tests/markup/snapshots/boolean.snap.html      |  38 +-
 .../button-group-as-dropdown.snap.html        |  96 ++--
 .../checkbox-columns-head-foot.snap.html      | 114 ++--
 .../checkbox-columns-mobile.snap.html         |  92 +--
 .../checkbox-columns-no-head-foot.snap.html   | 158 +++---
 .../snapshots/checkbox-columns.snap.html      |  74 +--
 .../snapshots/checkbox-comment-V2.snap.html   |  62 +-
 .../snapshots/checkbox-disabled.snap.html     |  92 +--
 .../snapshots/checkbox-modern.snap.html       |  64 ++-
 .../checkbox-multiple-comments.snap.html      | 136 ++---
 .../snapshots/checkbox-other-V2.snap.html     |  86 +--
 .../checkbox-other-maxlength.snap.html        |  58 +-
 .../markup/snapshots/checkbox-other.snap.html | 142 ++---
 .../checkbox-readonly-selected.snap.html      |  92 +--
 .../snapshots/checkbox-readonly.snap.html     |  92 +--
 .../checkbox-row-head-foot.snap.html          | 152 ++---
 .../checkbox-row-no-head-foot.snap.html       | 148 ++---
 tests/markup/snapshots/checkbox-v2.snap.html  |  64 ++-
 tests/markup/snapshots/checkbox.snap.html     |  92 +--
 .../snapshots/comment-allowResize.snap.html   |  10 +-
 .../snapshots/comment-disabled.snap.html      |  20 +-
 tests/markup/snapshots/comment-div.snap.html  |   6 +-
 ...omment-into-question-allowResize.snap.html | 130 ++---
 ...nt-into-question-commentAreaRows.snap.html | 166 +++---
 .../snapshots/comment-readonly.snap.html      |  20 +-
 tests/markup/snapshots/comment.snap.html      |  20 +-
 .../dropdown-aria-expanded.snap.html          |  96 ++--
 .../dropdown-disabled-with-value.snap.html    |  60 +-
 .../dropdown-disabled-without-value.snap.html |  40 +-
 .../dropdown-input-focused.snap.html          |  62 +-
 .../snapshots/dropdown-input-string.snap.html | 108 ++--
 .../markup/snapshots/dropdown-other.snap.html |  64 ++-
 .../dropdown-readonly-with-value.snap.html    |  36 +-
 .../snapshots/dropdown-readonly.snap.html     |  36 +-
 ...enderAs-select-readonly-selected.snap.html |  30 +-
 ...ropdown-renderAs-select-readonly.snap.html |  30 +-
 .../dropdown-select-clear-button.snap.html    |  84 +--
 .../dropdown-select-mobile.snap.html          |  98 ++--
 .../snapshots/dropdown-select.snap.html       |  62 +-
 .../markup/snapshots/dropdown-show.snap.html  |  38 +-
 .../dropdown-with-markdown.snap.html          |  84 +--
 .../dropdown-with-none-value.snap.html        |  84 +--
 .../dropdown-with-other-value.snap.html       | 106 ++--
 ...dropdown-without-textWrapEnabled.snap.html | 108 ++--
 tests/markup/snapshots/dropdown.snap.html     |  40 +-
 tests/markup/snapshots/expression.snap.html   |   6 +-
 tests/markup/snapshots/file-2-png.snap.html   |  88 +--
 .../file-2-zip-png-file-navigator.snap.html   | 144 ++---
 .../snapshots/file-2-zip-png-ro.snap.html     |  96 ++--
 .../markup/snapshots/file-2-zip-png.snap.html | 130 ++---
 tests/markup/snapshots/file-2-zip.snap.html   | 102 ++--
 tests/markup/snapshots/file-2.snap.html       |  42 +-
 tests/markup/snapshots/file-camera.snap.html  |  42 +-
 .../snapshots/file-image-size.snap.html       |  88 +--
 .../markup/snapshots/file-mob2-png.snap.html  |  88 +--
 .../snapshots/file-mob2-zip-png-ro.snap.html  | 122 ++--
 .../snapshots/file-mob2-zip-png.snap.html     | 144 ++---
 .../markup/snapshots/file-mob2-zip.snap.html  | 102 ++--
 tests/markup/snapshots/file-mob2.snap.html    |  42 +-
 .../markup/snapshots/file-mode-both.snap.html |  66 ++-
 .../snapshots/file-mode-camera.snap.html      |  40 +-
 .../snapshots/file-playing-video.snap.html    |  72 +--
 .../file-single-zip-disabled.snap.html        | 102 ++--
 .../markup/snapshots/file-uploading.snap.html |  22 +-
 tests/markup/snapshots/image-empty.snap.html  |  18 +-
 .../image-not-load-content.snap.html          |  18 +-
 tests/markup/snapshots/image-video.snap.html  |  10 +-
 .../markup/snapshots/image-youtube.snap.html  |  10 +-
 tests/markup/snapshots/image.snap.html        |   8 +-
 .../imagepicker-colCount-1-v2.snap.html       |  68 +--
 .../imagepicker-colCount-2-v2.snap.html       |  76 +--
 .../snapshots/imagepicker-disabled.snap.html  |  80 +--
 .../snapshots/imagepicker-labels.snap.html    |  80 +--
 .../snapshots/imagepicker-multi.snap.html     |  68 +--
 .../imagepicker-no-image-v2.snap.html         |  84 +--
 .../snapshots/imagepicker-no-image.snap.html  |  84 +--
 .../snapshots/imagepicker-readonly.snap.html  |  80 +--
 .../snapshots/imagepicker-video.snap.html     |  84 +--
 tests/markup/snapshots/imagepicker.snap.html  |  68 +--
 .../layout-page-swnl-title-v2.snap.html       |  60 +-
 .../snapshots/layout-page-swnl-v2.snap.html   |  28 +-
 .../layout-panel-page-swnl-title-v2.snap.html |  64 ++-
 .../layout-panel-page-swnl-v2.snap.html       |  36 +-
 .../martix-celltype-text-a11y.snap.html       | 128 +++--
 .../matrix-celltype-checkbox.snap.html        | 172 +++---
 tests/markup/snapshots/matrix-empty.snap.html |  40 +-
 .../snapshots/matrix-mobile-v2.snap.html      | 172 +++---
 .../markup/snapshots/matrix-modern.snap.html  | 152 ++---
 .../snapshots/matrix-v2-disabled.snap.html    | 152 ++---
 .../snapshots/matrix-v2-readonly.snap.html    | 152 ++---
 tests/markup/snapshots/matrix-v2.snap.html    | 152 ++---
 .../markup/snapshots/matrix-widths.snap.html  | 152 ++---
 ...atrixdropdown-cell-errors-bottom.snap.html |  90 +--
 .../matrixdropdown-cell-errors-top.snap.html  |  90 +--
 .../matrixdropdown-disabled.snap.html         | 114 ++--
 ...xdropdown-hidden-question-mobile.snap.html | 130 ++---
 .../matrixdropdown-readonly.snap.html         | 114 ++--
 .../matrixdropdown-vertical.snap.html         | 114 ++--
 .../markup/snapshots/matrixdropdown.snap.html | 114 ++--
 .../matrixdynamic-add-row-icon.snap.html      | 150 ++---
 .../snapshots/matrixdynamic-default.snap.html | 532 +++++++++---------
 .../matrixdynamic-defaultV2.snap.html         | 532 +++++++++---------
 .../snapshots/matrixdynamic-detail.snap.html  | 230 ++++----
 ...-show-in-multiple-columns-mobile.snap.html | 190 ++++---
 ...dynamic-show-in-multiple-columns.snap.html | 144 ++---
 .../snapshots/matrixdynamic-totals.snap.html  | 270 ++++-----
 .../snapshots/multipletext-disabled.snap.html | 116 ++--
 .../multipletext-error-bottom-v2.snap.html    |  68 +--
 .../multipletext-error-top-v2.snap.html       |  68 +--
 .../snapshots/multipletext-readonly.snap.html | 116 ++--
 tests/markup/snapshots/multipletext.snap.html | 116 ++--
 .../page-questionTitleWidth.snap.html         |  30 +-
 .../snapshots/page-swnl-title-v2.snap.html    |  60 +-
 tests/markup/snapshots/page-swnl-v2.snap.html |  28 +-
 .../markup/snapshots/page-title-v2.snap.html  |  30 +-
 .../panel-page-swnl-title-v2.snap.html        |  64 ++-
 .../snapshots/panel-page-swnl-v2.snap.html    |  36 +-
 .../panel-question-headers.snap.html          |  54 +-
 .../snapshots/panel-required-header.snap.html |  36 +-
 .../markup/snapshots/panel-swnl-v2.snap.html  |   8 +-
 tests/markup/snapshots/panel-text.snap.html   |  10 +-
 tests/markup/snapshots/panel.snap.html        |  18 +-
 ...eldynamic-list-legacy-navigation.snap.html |  38 +-
 .../snapshots/paneldynamic-list.snap.html     |  38 +-
 .../paneldynamic-no-footer-1.snap.html        | 105 ++--
 .../paneldynamic-no-footer-2.snap.html        | 105 ++--
 ...rogress-bottom-legacy-navigation.snap.html |  42 +-
 .../paneldynamic-progress-bottom.snap.html    |  42 +-
 ...paneldynamic-progress-tab-center.snap.html | 118 ++--
 .../paneldynamic-progress-tab-left.snap.html  | 118 ++--
 .../paneldynamic-progress-tab-right.snap.html | 118 ++--
 ...c-progress-top-legacy-navigation.snap.html |  50 +-
 .../paneldynamic-progress-top.snap.html       |  50 +-
 ...neldynamic-remove-btn-action-bar.snap.html |  78 +--
 .../paneldynamic-remove-btn-right.snap.html   |  76 +--
 ...question-description-under-input.snap.html |  14 +-
 .../question-errors-v2-bottom.snap.html       |  52 +-
 .../question-errors-v2-top.snap.html          |  52 +-
 .../snapshots/question-title-label.snap.html  |  26 +-
 .../question-title-with-html.snap.html        |  31 +-
 .../snapshots/question-with-indent.snap.html  |  30 +-
 .../snapshots/radiogroup-clear.snap.html      | 102 ++--
 .../radiogroup-columns-head-foot.snap.html    |  82 +--
 .../radiogroup-columns-mobile.snap.html       |  90 +--
 .../radiogroup-columns-no-head-foot.snap.html | 128 +++--
 .../snapshots/radiogroup-columns.snap.html    |  72 +--
 .../snapshots/radiogroup-disabled.snap.html   |  90 +--
 .../snapshots/radiogroup-modern.snap.html     |  62 +-
 .../radiogroup-multiple-comments.snap.html    | 112 ++--
 .../snapshots/radiogroup-other.snap.html      | 140 ++---
 .../radiogroup-readonly-selected.snap.html    |  90 +--
 .../snapshots/radiogroup-readonly.snap.html   |  90 +--
 .../radiogroup-row-head-foot.snap.html        | 122 ++--
 .../radiogroup-row-no-head-foot.snap.html     | 118 ++--
 .../markup/snapshots/radiogroup-v2.snap.html  |  62 +-
 tests/markup/snapshots/radiogroup.snap.html   |  90 +--
 .../markup/snapshots/ranking-design.snap.html | 152 ++---
 ...ng-selectToRankEnabled-SwapAreas.snap.html | 166 +++---
 ...anking-selectToRankEnabled-empty.snap.html | 166 +++---
 ...ing-selectToRankEnabled-vertical.snap.html | 166 +++---
 .../markup/snapshots/ranking-values.snap.html | 122 ++--
 tests/markup/snapshots/ranking.snap.html      | 152 ++---
 ...s-dropdown-description-with-text.snap.html | 132 ++---
 .../rating-as-dropdown-description.snap.html  | 132 ++---
 ...-as-dropdown-disabled-with-value.snap.html |  60 +-
 ...-as-dropdown-readonly-with-value.snap.html |  36 +-
 .../rating-as-dropdown-readonly.snap.html     |  36 +-
 ...g-as-dropdown-with-value-focused.snap.html |  84 +--
 .../snapshots/rating-as-dropdown.snap.html    |  62 +-
 .../snapshots/rating-as-wrappable.snap.html   |  62 +-
 .../snapshots/rating-display-mode.snap.html   |  62 +-
 .../snapshots/rating-min-max-items.snap.html  |  62 +-
 .../markup/snapshots/rating-min-max.snap.html |  74 +--
 .../rating-simple-disabled.snap.html          |  62 +-
 .../rating-simple-readonly.snap.html          |  62 +-
 .../markup/snapshots/rating-simple.snap.html  |  62 +-
 .../rating-smileys-disabled.snap.html         |  42 +-
 .../rating-smileys-readonly.snap.html         |  42 +-
 .../markup/snapshots/rating-smileys.snap.html |  42 +-
 .../snapshots/rating-stars-disabled.snap.html |  58 +-
 .../snapshots/rating-stars-readonly.snap.html |  58 +-
 tests/markup/snapshots/rating-stars.snap.html |  58 +-
 .../snapshots/signaturepad-loading.snap.html  |  36 +-
 .../snapshots/signaturepad-readonly.snap.html |  22 +-
 .../snapshots/signaturepad-scaled.snap.html   |  24 +-
 .../snapshots/signaturepad-value.snap.html    |  40 +-
 ...ignaturepad-with-backgroundImage.snap.html |  24 +-
 tests/markup/snapshots/signaturepad.snap.html |  22 +-
 .../snapshots/slider-custom-labels.snap.html  | 142 ++---
 .../slider-default-value-range-mode.snap.html | 160 +++---
 ...slider-default-value-single-mode.snap.html | 138 ++---
 .../snapshots/slider-range-mode.snap.html     | 160 +++---
 .../slider-read-only-range-mode.snap.html     | 160 +++---
 .../slider-read-only-single-mode.snap.html    | 138 ++---
 .../snapshots/slider-single-mode.snap.html    | 138 ++---
 .../snapshots/survey-navigation.snap.html     |  18 +-
 .../tagbox-disabled-with-value.snap.html      |  78 +--
 .../tagbox-disabled-without-value.snap.html   |  42 +-
 .../markup/snapshots/tagbox-mobile.snap.html  | 146 ++---
 .../tagbox-readonly-with-value.snap.html      |  36 +-
 .../snapshots/tagbox-readonly.snap.html       |  36 +-
 .../snapshots/tagbox-selected.snap.html       | 144 ++---
 .../tagbox-without-clear-button.snap.html     |  98 ++--
 .../snapshots/tagbox-without-search.snap.html |  98 ++--
 .../tagbox-without-textWrapEnabled.snap.html  |  98 ++--
 tests/markup/snapshots/tagbox.snap.html       |  98 ++--
 .../markup/snapshots/text-datalist.snap.html  |  24 +-
 tests/markup/snapshots/text-date.snap.html    |   8 +-
 .../markup/snapshots/text-disabled.snap.html  |   8 +-
 tests/markup/snapshots/text-div.snap.html     |   8 +-
 tests/markup/snapshots/text-email.snap.html   |   8 +-
 .../snapshots/text-masktype-numeric.snap.html |   8 +-
 .../markup/snapshots/text-readonly.snap.html  |   8 +-
 tests/markup/snapshots/text-typing.snap.html  |   8 +-
 tests/markup/snapshots/text.snap.html         |   8 +-
 235 files changed, 9926 insertions(+), 8864 deletions(-)

diff --git a/tests/markup/helper.ts b/tests/markup/helper.ts
index 43e5c00122..b888fa7819 100644
--- a/tests/markup/helper.ts
+++ b/tests/markup/helper.ts
@@ -277,9 +277,6 @@ export function testQuestionMarkup(assert: any, test: MarkupTestDescriptor, plat
 const removeExtraElementsConditions: Array<(e: HTMLElement) => boolean> = [
   (e: HTMLElement) => e.classList.contains("sv-vue-title-additional-div"),
   (e: HTMLElement) => e.tagName.toLowerCase().search(/^sv-/) > -1,
-  (e: HTMLElement) => e.classList.contains("sd-question__header-and-content-container"),
-  (e: HTMLElement) => e.classList.contains("sd-question__content"),
-  (e: HTMLElement) => e.classList.contains("sd-clearfix") && e.classList.contains("sd-page__row") && e.classList.contains("sd-row"),
 ];
 
 function clearExtraElements(innerHTML: string): string {
diff --git a/tests/markup/snapshots/boolean-checkbox-custom-icon.snap.html b/tests/markup/snapshots/boolean-checkbox-custom-icon.snap.html
index 9bd97e60be..e76b500ceb 100644
--- a/tests/markup/snapshots/boolean-checkbox-custom-icon.snap.html
+++ b/tests/markup/snapshots/boolean-checkbox-custom-icon.snap.html
@@ -1,18 +1,22 @@
-<div class="sd-selectbase">
-	<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
-		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#test-icon" class="">
-					</use>
-				</svg>
-				<span class="check">
-				</span>
-			</span>
-			<span class="sd-item__control-label" id="testid0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
+				<label class="sd-selectbase__label">
+					<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#test-icon" class="">
+							</use>
+						</svg>
+						<span class="check">
+						</span>
+					</span>
+					<span class="sd-item__control-label" id="testid0_ariaTitle">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+					</span>
+				</label>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-checkbox-defaultV2-required.snap.html b/tests/markup/snapshots/boolean-checkbox-defaultV2-required.snap.html
index 4013276f60..f4a14047db 100644
--- a/tests/markup/snapshots/boolean-checkbox-defaultV2-required.snap.html
+++ b/tests/markup/snapshots/boolean-checkbox-defaultV2-required.snap.html
@@ -1,16 +1,20 @@
-<div class="sd-selectbase">
-	<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
-		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="true" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<span class="check">
-				</span>
-			</span>
-			<span class="sd-item__control-label" id="testid0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-				<span>&nbsp;</span>
-				<span aria-hidden="true" class="sd-question__required-text">*</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
+				<label class="sd-selectbase__label">
+					<input aria-invalid="false" aria-label="Question title" aria-required="true" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<span class="check">
+						</span>
+					</span>
+					<span class="sd-item__control-label" id="testid0_ariaTitle">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						<span>&nbsp;</span>
+						<span aria-hidden="true" class="sd-question__required-text">*</span>
+					</span>
+				</label>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-checkbox-defaultV2.snap.html b/tests/markup/snapshots/boolean-checkbox-defaultV2.snap.html
index cea03058b8..c14f8ce062 100644
--- a/tests/markup/snapshots/boolean-checkbox-defaultV2.snap.html
+++ b/tests/markup/snapshots/boolean-checkbox-defaultV2.snap.html
@@ -1,18 +1,22 @@
-<div class="sd-selectbase">
-	<div class="sd-checkbox sd-checkbox--checked sd-checkbox--label-rendered sd-item sd-item--checked sd-selectbase__item">
-		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="true">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-				<span class="check">
-				</span>
-			</span>
-			<span class="sd-item__control-label" id="testid0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sd-checkbox sd-checkbox--checked sd-checkbox--label-rendered sd-item sd-item--checked sd-selectbase__item">
+				<label class="sd-selectbase__label">
+					<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="true">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+						<span class="check">
+						</span>
+					</span>
+					<span class="sd-item__control-label" id="testid0_ariaTitle">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+					</span>
+				</label>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-checkbox-disabled.snap.html b/tests/markup/snapshots/boolean-checkbox-disabled.snap.html
index 49e65c89b0..42d38170b2 100644
--- a/tests/markup/snapshots/boolean-checkbox-disabled.snap.html
+++ b/tests/markup/snapshots/boolean-checkbox-disabled.snap.html
@@ -1,14 +1,18 @@
-<div class="sd-selectbase">
-	<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
-		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i" name="name" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<span class="check">
-				</span>
-			</span>
-			<span class="sd-item__control-label" id="testid0_ariaTitle">
-				<span class="sv-string-editor" contenteditable="true">Question title</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
+				<label class="sd-selectbase__label">
+					<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i" name="name" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<span class="check">
+						</span>
+					</span>
+					<span class="sd-item__control-label" id="testid0_ariaTitle">
+						<span class="sv-string-editor" contenteditable="true">Question title</span>
+					</span>
+				</label>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-checkbox-readonly-defaultV2.snap.html b/tests/markup/snapshots/boolean-checkbox-readonly-defaultV2.snap.html
index 6cb04d12fe..a8e8ad8015 100644
--- a/tests/markup/snapshots/boolean-checkbox-readonly-defaultV2.snap.html
+++ b/tests/markup/snapshots/boolean-checkbox-readonly-defaultV2.snap.html
@@ -1,18 +1,22 @@
-<div class="sd-selectbase">
-	<div class="sd-checkbox sd-checkbox--checked sd-checkbox--label-rendered sd-checkbox--readonly sd-item sd-item--checked sd-item--readonly sd-selectbase__item">
-		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" readonly="" type="checkbox" value="true">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-				<span class="check">
-				</span>
-			</span>
-			<span class="sd-item__control-label" id="testid0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sd-checkbox sd-checkbox--checked sd-checkbox--label-rendered sd-checkbox--readonly sd-item sd-item--checked sd-item--readonly sd-selectbase__item">
+				<label class="sd-selectbase__label">
+					<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" readonly="" type="checkbox" value="true">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+						<span class="check">
+						</span>
+					</span>
+					<span class="sd-item__control-label" id="testid0_ariaTitle">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+					</span>
+				</label>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-checkbox.snap.html b/tests/markup/snapshots/boolean-checkbox.snap.html
index 22c474453f..6c12c9139b 100644
--- a/tests/markup/snapshots/boolean-checkbox.snap.html
+++ b/tests/markup/snapshots/boolean-checkbox.snap.html
@@ -1,14 +1,18 @@
-<div class="sd-selectbase">
-	<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
-		<label class="sd-selectbase__label">
-			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<span class="check">
-				</span>
-			</span>
-			<span class="sd-item__control-label" id="testid0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sd-checkbox sd-checkbox--intermediate sd-checkbox--label-rendered sd-item sd-selectbase__item">
+				<label class="sd-selectbase__label">
+					<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<span class="check">
+						</span>
+					</span>
+					<span class="sd-item__control-label" id="testid0_ariaTitle">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+					</span>
+				</label>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-disabled.snap.html b/tests/markup/snapshots/boolean-disabled.snap.html
index d296413e39..8a9cc16d9a 100644
--- a/tests/markup/snapshots/boolean-disabled.snap.html
+++ b/tests/markup/snapshots/boolean-disabled.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
-	<label class="sd-boolean sd-boolean--indeterminate">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" disabled="" id="testid0i" name="name" role="switch" type="checkbox" value="">
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
-				<span class="sv-string-editor" contenteditable="true">No</span>
-			</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
+			<label class="sd-boolean sd-boolean--indeterminate">
+				<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" disabled="" id="testid0i" name="name" role="switch" type="checkbox" value="">
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label">
+						<span class="sv-string-editor" contenteditable="true">No</span>
+					</span>
+				</div>
+				<div class="sd-boolean__switch">
+					<span class="sd-boolean__thumb">
+					</span>
+				</div>
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label">
+						<span class="sv-string-editor" contenteditable="true">Yes</span>
+					</span>
+				</div>
+			</label>
 		</div>
-		<div class="sd-boolean__switch">
-			<span class="sd-boolean__thumb">
-			</span>
-		</div>
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
-				<span class="sv-string-editor" contenteditable="true">Yes</span>
-			</span>
-		</div>
-	</label>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-radio-disabled.snap.html b/tests/markup/snapshots/boolean-radio-disabled.snap.html
index bcd676ecca..75758929fb 100644
--- a/tests/markup/snapshots/boolean-radio-disabled.snap.html
+++ b/tests/markup/snapshots/boolean-radio-disabled.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
-	<fieldset class="sd-selectbase" role="presentation">
-		<div class="sd-item" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" name="name_testid0" type="radio" value="false">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-editor" contenteditable="true">No</span>
-				</span>
-			</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
+			<fieldset class="sd-selectbase" role="presentation">
+				<div class="sd-item" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" name="name_testid0" type="radio" value="false">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-editor" contenteditable="true">No</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-item" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" name="name_testid0" type="radio" value="true">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-editor" contenteditable="true">Yes</span>
+						</span>
+					</label>
+				</div>
+			</fieldset>
 		</div>
-		<div class="sd-item" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" name="name_testid0" type="radio" value="true">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-editor" contenteditable="true">Yes</span>
-				</span>
-			</label>
-		</div>
-	</fieldset>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-radio-readonly.snap.html b/tests/markup/snapshots/boolean-radio-readonly.snap.html
index 6c0ccf7181..cfa64db5b3 100644
--- a/tests/markup/snapshots/boolean-radio-readonly.snap.html
+++ b/tests/markup/snapshots/boolean-radio-readonly.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
-	<fieldset class="sd-selectbase" role="presentation">
-		<div class="sd-item sd-item--readonly sd-radio--readonly" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" readonly="" type="radio" value="false">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">No</span>
-				</span>
-			</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
+			<fieldset class="sd-selectbase" role="presentation">
+				<div class="sd-item sd-item--readonly sd-radio--readonly" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" readonly="" type="radio" value="false">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">No</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-item sd-item--readonly sd-radio--readonly" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" readonly="" type="radio" value="true">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">Yes</span>
+						</span>
+					</label>
+				</div>
+			</fieldset>
 		</div>
-		<div class="sd-item sd-item--readonly sd-radio--readonly" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" readonly="" type="radio" value="true">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">Yes</span>
-				</span>
-			</label>
-		</div>
-	</fieldset>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-radio-v2.snap.html b/tests/markup/snapshots/boolean-radio-v2.snap.html
index afc7e8db3d..708d10ef19 100644
--- a/tests/markup/snapshots/boolean-radio-v2.snap.html
+++ b/tests/markup/snapshots/boolean-radio-v2.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
-	<fieldset class="sd-selectbase" role="presentation">
-		<div class="sd-item sd-item--checked sd-radio--checked" role="presentation">
-			<label class="sd-selectbase__label">
-				<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="false">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">No</span>
-				</span>
-			</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
+			<fieldset class="sd-selectbase" role="presentation">
+				<div class="sd-item sd-item--checked sd-radio--checked" role="presentation">
+					<label class="sd-selectbase__label">
+						<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="false">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">No</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-item" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="true">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">Yes</span>
+						</span>
+					</label>
+				</div>
+			</fieldset>
 		</div>
-		<div class="sd-item" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="true">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">Yes</span>
-				</span>
-			</label>
-		</div>
-	</fieldset>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-radio-values.snap.html b/tests/markup/snapshots/boolean-radio-values.snap.html
index b3668bc70e..36b0fe908f 100644
--- a/tests/markup/snapshots/boolean-radio-values.snap.html
+++ b/tests/markup/snapshots/boolean-radio-values.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
-	<fieldset class="sd-selectbase" role="presentation">
-		<div class="sd-item" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="false_val">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">No</span>
-				</span>
-			</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
+			<fieldset class="sd-selectbase" role="presentation">
+				<div class="sd-item" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="false_val">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">No</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-item sd-item--checked sd-radio--checked" role="presentation">
+					<label class="sd-selectbase__label">
+						<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="true_val">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">Yes</span>
+						</span>
+					</label>
+				</div>
+			</fieldset>
 		</div>
-		<div class="sd-item sd-item--checked sd-radio--checked" role="presentation">
-			<label class="sd-selectbase__label">
-				<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="true_val">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">Yes</span>
-				</span>
-			</label>
-		</div>
-	</fieldset>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-radio.snap.html b/tests/markup/snapshots/boolean-radio.snap.html
index c6b991945b..840ecc20b2 100644
--- a/tests/markup/snapshots/boolean-radio.snap.html
+++ b/tests/markup/snapshots/boolean-radio.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
-	<fieldset class="sd-selectbase" role="presentation">
-		<div class="sd-item" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="false">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">No</span>
-				</span>
-			</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sv_qbln sv_qcbc">
+			<fieldset class="sd-selectbase" role="presentation">
+				<div class="sd-item" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="false">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">No</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-item sd-item--checked sd-radio--checked" role="presentation">
+					<label class="sd-selectbase__label">
+						<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="true">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">Yes</span>
+						</span>
+					</label>
+				</div>
+			</fieldset>
 		</div>
-		<div class="sd-item sd-item--checked sd-radio--checked" role="presentation">
-			<label class="sd-selectbase__label">
-				<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="true">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">Yes</span>
-				</span>
-			</label>
-		</div>
-	</fieldset>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-readonly.snap.html b/tests/markup/snapshots/boolean-readonly.snap.html
index d80f288da6..1d5e4a9b34 100644
--- a/tests/markup/snapshots/boolean-readonly.snap.html
+++ b/tests/markup/snapshots/boolean-readonly.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
-	<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate sd-boolean--readonly">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" readonly="" role="switch" type="checkbox" value="">
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label sd-checkbox__label--readonly">
-				<span class="sv-string-viewer">No</span>
-			</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
+			<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate sd-boolean--readonly">
+				<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" readonly="" role="switch" type="checkbox" value="">
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label sd-checkbox__label--readonly">
+						<span class="sv-string-viewer">No</span>
+					</span>
+				</div>
+				<div class="sd-boolean__switch">
+					<span class="sd-boolean__thumb">
+					</span>
+				</div>
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label sd-checkbox__label--readonly">
+						<span class="sv-string-viewer">Yes</span>
+					</span>
+				</div>
+			</label>
 		</div>
-		<div class="sd-boolean__switch">
-			<span class="sd-boolean__thumb">
-			</span>
-		</div>
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label sd-checkbox__label--readonly">
-				<span class="sv-string-viewer">Yes</span>
-			</span>
-		</div>
-	</label>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-switch-value-false-readonly.snap.html b/tests/markup/snapshots/boolean-switch-value-false-readonly.snap.html
index f47e0f85eb..de1e805e90 100644
--- a/tests/markup/snapshots/boolean-switch-value-false-readonly.snap.html
+++ b/tests/markup/snapshots/boolean-switch-value-false-readonly.snap.html
@@ -1,13 +1,17 @@
-<div class="sd-boolean-switch">
-	<div aria-checked="false" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button sd-boolean-switch__button--readonly" role="checkbox" tabindex="0">
-		<div class="sd-boolean-switch__thumb">
-			<div class="sd-boolean-switch__thumb-circle">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-switch">
+			<div aria-checked="false" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button sd-boolean-switch__button--readonly" role="checkbox" tabindex="0">
+				<div class="sd-boolean-switch__thumb">
+					<div class="sd-boolean-switch__thumb-circle">
+					</div>
+				</div>
+			</div>
+			<div class="sd-boolean-switch__caption">
+				<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
+					<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-boolean-switch__caption">
-		<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
-			<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-switch-value-false.snap.html b/tests/markup/snapshots/boolean-switch-value-false.snap.html
index ff45e5d634..1ff9de2a2b 100644
--- a/tests/markup/snapshots/boolean-switch-value-false.snap.html
+++ b/tests/markup/snapshots/boolean-switch-value-false.snap.html
@@ -1,13 +1,17 @@
-<div class="sd-boolean-switch">
-	<div aria-checked="false" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button" role="checkbox" tabindex="0">
-		<div class="sd-boolean-switch__thumb">
-			<div class="sd-boolean-switch__thumb-circle">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-switch">
+			<div aria-checked="false" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button" role="checkbox" tabindex="0">
+				<div class="sd-boolean-switch__thumb">
+					<div class="sd-boolean-switch__thumb-circle">
+					</div>
+				</div>
+			</div>
+			<div class="sd-boolean-switch__caption">
+				<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
+					<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-boolean-switch__caption">
-		<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
-			<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-switch-value-true-readonly.snap.html b/tests/markup/snapshots/boolean-switch-value-true-readonly.snap.html
index a6d942675a..914cbf78b2 100644
--- a/tests/markup/snapshots/boolean-switch-value-true-readonly.snap.html
+++ b/tests/markup/snapshots/boolean-switch-value-true-readonly.snap.html
@@ -1,13 +1,17 @@
-<div class="sd-boolean-switch">
-	<div aria-checked="true" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button sd-boolean-switch__button--checked sd-boolean-switch__button--readonly" role="checkbox" tabindex="0">
-		<div class="sd-boolean-switch__thumb">
-			<div class="sd-boolean-switch__thumb-circle">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-switch">
+			<div aria-checked="true" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button sd-boolean-switch__button--checked sd-boolean-switch__button--readonly" role="checkbox" tabindex="0">
+				<div class="sd-boolean-switch__thumb">
+					<div class="sd-boolean-switch__thumb-circle">
+					</div>
+				</div>
+			</div>
+			<div class="sd-boolean-switch__caption">
+				<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
+					<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-boolean-switch__caption">
-		<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
-			<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-switch-value-true.snap.html b/tests/markup/snapshots/boolean-switch-value-true.snap.html
index cfad0422f1..3ae11bc30b 100644
--- a/tests/markup/snapshots/boolean-switch-value-true.snap.html
+++ b/tests/markup/snapshots/boolean-switch-value-true.snap.html
@@ -1,13 +1,17 @@
-<div class="sd-boolean-switch">
-	<div aria-checked="true" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button sd-boolean-switch__button--checked" role="checkbox" tabindex="0">
-		<div class="sd-boolean-switch__thumb">
-			<div class="sd-boolean-switch__thumb-circle">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-switch">
+			<div aria-checked="true" aria-invalid="false" aria-label="q1" aria-required="false" class="sd-boolean-switch__button sd-boolean-switch__button--checked" role="checkbox" tabindex="0">
+				<div class="sd-boolean-switch__thumb">
+					<div class="sd-boolean-switch__thumb-circle">
+					</div>
+				</div>
+			</div>
+			<div class="sd-boolean-switch__caption">
+				<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
+					<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-boolean-switch__caption">
-		<div class="sd-boolean-switch__title" id="testid0_ariaTitle">
-			<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-v2.snap.html b/tests/markup/snapshots/boolean-v2.snap.html
index 0e0a668d92..e58e703eab 100644
--- a/tests/markup/snapshots/boolean-v2.snap.html
+++ b/tests/markup/snapshots/boolean-v2.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
-	<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="">
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
-				<span class="sv-string-viewer">No</span>
-			</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
+			<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate">
+				<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="">
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label">
+						<span class="sv-string-viewer">No</span>
+					</span>
+				</div>
+				<div class="sd-boolean__switch">
+					<span class="sd-boolean__thumb">
+					</span>
+				</div>
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label">
+						<span class="sv-string-viewer">Yes</span>
+					</span>
+				</div>
+			</label>
 		</div>
-		<div class="sd-boolean__switch">
-			<span class="sd-boolean__thumb">
-			</span>
-		</div>
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
-				<span class="sv-string-viewer">Yes</span>
-			</span>
-		</div>
-	</label>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean-value-v2.snap.html b/tests/markup/snapshots/boolean-value-v2.snap.html
index 685c38732c..6f3697bcbd 100644
--- a/tests/markup/snapshots/boolean-value-v2.snap.html
+++ b/tests/markup/snapshots/boolean-value-v2.snap.html
@@ -1,22 +1,26 @@
-<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
-	<label class="sd-boolean sd-boolean--allowhover sd-boolean--checked">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="true">
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label sd-boolean__label--false sd-checkbox__label--disabled">
-				<span class="sv-string-viewer">No</span>
-			</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
+			<label class="sd-boolean sd-boolean--allowhover sd-boolean--checked">
+				<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="true">
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label sd-boolean__label--false sd-checkbox__label--disabled">
+						<span class="sv-string-viewer">No</span>
+					</span>
+				</div>
+				<div class="sd-boolean__switch">
+					<span class="sd-boolean__thumb">
+						<span class="sd-boolean__thumb-text">
+							<span class="sv-string-viewer">Yes</span>
+						</span>
+					</span>
+				</div>
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label sd-boolean__label--true">
+						<span class="sv-string-viewer">Yes</span>
+					</span>
+				</div>
+			</label>
 		</div>
-		<div class="sd-boolean__switch">
-			<span class="sd-boolean__thumb">
-				<span class="sd-boolean__thumb-text">
-					<span class="sv-string-viewer">Yes</span>
-				</span>
-			</span>
-		</div>
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label sd-boolean__label--true">
-				<span class="sv-string-viewer">Yes</span>
-			</span>
-		</div>
-	</label>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/boolean.snap.html b/tests/markup/snapshots/boolean.snap.html
index 1238235bbe..59bd2615e2 100644
--- a/tests/markup/snapshots/boolean.snap.html
+++ b/tests/markup/snapshots/boolean.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
-	<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate">
-		<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="">
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
-				<span class="sv-string-viewer">No</span>
-			</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
+			<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate">
+				<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" role="switch" type="checkbox" value="">
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label">
+						<span class="sv-string-viewer">No</span>
+					</span>
+				</div>
+				<div class="sd-boolean__switch">
+					<span class="sd-boolean__thumb">
+					</span>
+				</div>
+				<div class="sd-boolean__thumb-ghost">
+					<span class="sd-boolean__label">
+						<span class="sv-string-viewer">Yes</span>
+					</span>
+				</div>
+			</label>
 		</div>
-		<div class="sd-boolean__switch">
-			<span class="sd-boolean__thumb">
-			</span>
-		</div>
-		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
-				<span class="sv-string-viewer">Yes</span>
-			</span>
-		</div>
-	</label>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/button-group-as-dropdown.snap.html b/tests/markup/snapshots/button-group-as-dropdown.snap.html
index ec75f5e0bb..1a54d42b46 100644
--- a/tests/markup/snapshots/button-group-as-dropdown.snap.html
+++ b/tests/markup/snapshots/button-group-as-dropdown.snap.html
@@ -1,52 +1,56 @@
-<div class="sd-button-group-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="name" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-button-group-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="name" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/checkbox-columns-head-foot.snap.html b/tests/markup/snapshots/checkbox-columns-head-foot.snap.html
index e43a7c03ff..c9ed45e1e8 100644
--- a/tests/markup/snapshots/checkbox-columns-head-foot.snap.html
+++ b/tests/markup/snapshots/checkbox-columns-head-foot.snap.html
@@ -1,24 +1,58 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Select All</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-selectbase--multi-column">
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Select All</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-selectbase--multi-column">
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item1</span>
+							</span>
+						</label>
+					</div>
+				</div>
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item2</span>
+							</span>
+						</label>
+					</div>
+				</div>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
 				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
 					<span class="sd-checkbox__decorator sd-item__decorator">
 						<svg class="sd-checkbox__svg sd-item__svg">
 							<use xlink:href="#icon-check-16x16" class="">
@@ -26,15 +60,13 @@
 						</svg>
 					</span>
 					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item1</span>
+						<span class="sv-string-viewer">None</span>
 					</span>
 				</label>
 			</div>
-		</div>
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
 			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
 				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
 					<span class="sd-checkbox__decorator sd-item__decorator">
 						<svg class="sd-checkbox__svg sd-item__svg">
 							<use xlink:href="#icon-check-16x16" class="">
@@ -42,38 +74,10 @@
 						</svg>
 					</span>
 					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item2</span>
+						<span class="sv-string-viewer">Other (describe)</span>
 					</span>
 				</label>
 			</div>
-		</div>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">None</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-columns-mobile.snap.html b/tests/markup/snapshots/checkbox-columns-mobile.snap.html
index 2802ad13fe..85f220c1b9 100644
--- a/tests/markup/snapshots/checkbox-columns-mobile.snap.html
+++ b/tests/markup/snapshots/checkbox-columns-mobile.snap.html
@@ -1,45 +1,49 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase sd-selectbase--mobile" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase sd-selectbase--mobile" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-columns-no-head-foot.snap.html b/tests/markup/snapshots/checkbox-columns-no-head-foot.snap.html
index f79029082c..e587fa3311 100644
--- a/tests/markup/snapshots/checkbox-columns-no-head-foot.snap.html
+++ b/tests/markup/snapshots/checkbox-columns-no-head-foot.snap.html
@@ -1,79 +1,83 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-selectbase--multi-column">
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">Select All</span>
-					</span>
-				</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-selectbase--multi-column">
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">Select All</span>
+							</span>
+						</label>
+					</div>
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item2</span>
+							</span>
+						</label>
+					</div>
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">Other (describe)</span>
+							</span>
+						</label>
+					</div>
+				</div>
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item1</span>
+							</span>
+						</label>
+					</div>
+					<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">None</span>
+							</span>
+						</label>
+					</div>
+				</div>
 			</div>
-			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item2</span>
-					</span>
-				</label>
-			</div>
-			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">Other (describe)</span>
-					</span>
-				</label>
-			</div>
-		</div>
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item1</span>
-					</span>
-				</label>
-			</div>
-			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">None</span>
-					</span>
-				</label>
-			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-columns.snap.html b/tests/markup/snapshots/checkbox-columns.snap.html
index 7137da38ad..35ff3f2094 100644
--- a/tests/markup/snapshots/checkbox-columns.snap.html
+++ b/tests/markup/snapshots/checkbox-columns.snap.html
@@ -1,37 +1,41 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-selectbase--multi-column">
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item1</span>
-					</span>
-				</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-selectbase--multi-column">
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item1</span>
+							</span>
+						</label>
+					</div>
+				</div>
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
+							<span class="sd-checkbox__decorator sd-item__decorator">
+								<svg class="sd-checkbox__svg sd-item__svg">
+									<use xlink:href="#icon-check-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item2</span>
+							</span>
+						</label>
+					</div>
+				</div>
 			</div>
-		</div>
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
-					<span class="sd-checkbox__decorator sd-item__decorator">
-						<svg class="sd-checkbox__svg sd-item__svg">
-							<use xlink:href="#icon-check-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item2</span>
-					</span>
-				</label>
-			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-comment-V2.snap.html b/tests/markup/snapshots/checkbox-comment-V2.snap.html
index 6f7786f9fe..bd3b192cde 100644
--- a/tests/markup/snapshots/checkbox-comment-V2.snap.html
+++ b/tests/markup/snapshots/checkbox-comment-V2.snap.html
@@ -1,32 +1,36 @@
-<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">name</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
-<div class="sd-question__comment-area sd-question__form-group">
-	<div>
-		<span class="sv-string-viewer">Other (describe)</span>
-	</div>
-	<div class="sd-comment sd-formbox">
-		<textarea aria-label="name" class="sd-comment__input sd-formbox__input" id="testid0_comment" placeholder="" style="resize:none;">
-		</textarea>
-		<div class="sd-comment__grip">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-grip" class="">
-				</use>
-			</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">name</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
+		<div class="sd-question__comment-area sd-question__form-group">
+			<div>
+				<span class="sv-string-viewer">Other (describe)</span>
+			</div>
+			<div class="sd-comment sd-formbox">
+				<textarea aria-label="name" class="sd-comment__input sd-formbox__input" id="testid0_comment" placeholder="" style="resize:none;">
+				</textarea>
+				<div class="sd-comment__grip">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-grip" class="">
+						</use>
+					</svg>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-disabled.snap.html b/tests/markup/snapshots/checkbox-disabled.snap.html
index 59e1f34651..f9ef2d445a 100644
--- a/tests/markup/snapshots/checkbox-disabled.snap.html
+++ b/tests/markup/snapshots/checkbox-disabled.snap.html
@@ -1,45 +1,49 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-item sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-editor" contenteditable="true">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-item sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-editor" contenteditable="true">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-item sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-editor" contenteditable="true">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-item sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-editor" contenteditable="true">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-item sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-editor" contenteditable="true">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-item sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" disabled="" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-editor" contenteditable="true">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-modern.snap.html b/tests/markup/snapshots/checkbox-modern.snap.html
index a2c09e3f47..788964ca52 100644
--- a/tests/markup/snapshots/checkbox-modern.snap.html
+++ b/tests/markup/snapshots/checkbox-modern.snap.html
@@ -1,31 +1,35 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-multiple-comments.snap.html b/tests/markup/snapshots/checkbox-multiple-comments.snap.html
index 1928be5848..9eebcbc23c 100644
--- a/tests/markup/snapshots/checkbox-multiple-comments.snap.html
+++ b/tests/markup/snapshots/checkbox-multiple-comments.snap.html
@@ -1,69 +1,73 @@
-<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">name</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">name</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
 			</div>
-		</div>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-other-V2.snap.html b/tests/markup/snapshots/checkbox-other-V2.snap.html
index 1e80234fc7..1962c3d52f 100644
--- a/tests/markup/snapshots/checkbox-other-V2.snap.html
+++ b/tests/markup/snapshots/checkbox-other-V2.snap.html
@@ -1,43 +1,47 @@
-<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">name</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">name</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-other-maxlength.snap.html b/tests/markup/snapshots/checkbox-other-maxlength.snap.html
index 0ce964737b..3273b6b92c 100644
--- a/tests/markup/snapshots/checkbox-other-maxlength.snap.html
+++ b/tests/markup/snapshots/checkbox-other-maxlength.snap.html
@@ -1,29 +1,33 @@
-<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">name</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" class="sd-comment__input sd-formbox__input" maxlength="15" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">name</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" class="sd-comment__input sd-formbox__input" maxlength="15" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-other.snap.html b/tests/markup/snapshots/checkbox-other.snap.html
index f1d2595c6e..0961dd82ec 100644
--- a/tests/markup/snapshots/checkbox-other.snap.html
+++ b/tests/markup/snapshots/checkbox-other.snap.html
@@ -1,71 +1,75 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem3" type="checkbox" value="item3">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="Question title" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameitem3" type="checkbox" value="item3">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-item sd-item--allowhover sd-item--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" name="nameother" type="checkbox" value="other">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="Question title" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-readonly-selected.snap.html b/tests/markup/snapshots/checkbox-readonly-selected.snap.html
index e778fc8977..2a8dd03527 100644
--- a/tests/markup/snapshots/checkbox-readonly-selected.snap.html
+++ b/tests/markup/snapshots/checkbox-readonly-selected.snap.html
@@ -1,45 +1,49 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-checkbox--readonly sd-item sd-item--allowhover sd-item--checked sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" readonly="" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--checked sd-checkbox--readonly sd-item sd-item--allowhover sd-item--checked sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" readonly="" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" readonly="" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" readonly="" type="checkbox" value="item3">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" readonly="" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" readonly="" type="checkbox" value="item3">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-readonly.snap.html b/tests/markup/snapshots/checkbox-readonly.snap.html
index 6d14e67368..bb23d2cb0d 100644
--- a/tests/markup/snapshots/checkbox-readonly.snap.html
+++ b/tests/markup/snapshots/checkbox-readonly.snap.html
@@ -1,45 +1,49 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" readonly="" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" readonly="" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" readonly="" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" readonly="" type="checkbox" value="item3">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" readonly="" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--readonly sd-item sd-item--allowhover sd-item--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" readonly="" type="checkbox" value="item3">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-row-head-foot.snap.html b/tests/markup/snapshots/checkbox-row-head-foot.snap.html
index 43b5aedaae..64bb63d7aa 100644
--- a/tests/markup/snapshots/checkbox-row-head-foot.snap.html
+++ b/tests/markup/snapshots/checkbox-row-head-foot.snap.html
@@ -1,75 +1,79 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Select All</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Select All</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-selectbase--row">
+				<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
+						<span class="sd-checkbox__decorator sd-item__decorator">
+							<svg class="sd-checkbox__svg sd-item__svg">
+								<use xlink:href="#icon-check-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">item1</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
+						<span class="sd-checkbox__decorator sd-item__decorator">
+							<svg class="sd-checkbox__svg sd-item__svg">
+								<use xlink:href="#icon-check-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">item2</span>
+						</span>
+					</label>
+				</div>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">None</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-selectbase--row">
-		<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
-				<span class="sd-checkbox__decorator sd-item__decorator">
-					<svg class="sd-checkbox__svg sd-item__svg">
-						<use xlink:href="#icon-check-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">item1</span>
-				</span>
-			</label>
-		</div>
-		<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
-				<span class="sd-checkbox__decorator sd-item__decorator">
-					<svg class="sd-checkbox__svg sd-item__svg">
-						<use xlink:href="#icon-check-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">item2</span>
-				</span>
-			</label>
-		</div>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">None</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-row-no-head-foot.snap.html b/tests/markup/snapshots/checkbox-row-no-head-foot.snap.html
index 7067d254cc..574dc89631 100644
--- a/tests/markup/snapshots/checkbox-row-no-head-foot.snap.html
+++ b/tests/markup/snapshots/checkbox-row-no-head-foot.snap.html
@@ -1,73 +1,77 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase sd-selectbase--row" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Select All</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase sd-selectbase--row" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--selectall sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameselectall" type="checkbox" value="">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Select All</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">None</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-checkbox--none sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_3" name="namenone" type="checkbox" value="none">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">None</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_4" name="nameother" type="checkbox" value="other">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox-v2.snap.html b/tests/markup/snapshots/checkbox-v2.snap.html
index c37fc34f16..89e4f0e4ae 100644
--- a/tests/markup/snapshots/checkbox-v2.snap.html
+++ b/tests/markup/snapshots/checkbox-v2.snap.html
@@ -1,31 +1,35 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/checkbox.snap.html b/tests/markup/snapshots/checkbox.snap.html
index 8e7febeeec..b8685603db 100644
--- a/tests/markup/snapshots/checkbox.snap.html
+++ b/tests/markup/snapshots/checkbox.snap.html
@@ -1,45 +1,49 @@
-<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
-	<legend class="sv-hidden">Question title</legend>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" class="sd-selectbase" role="group">
+			<legend class="sv-hidden">Question title</legend>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_0" name="nameitem1" type="checkbox" value="item1">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
+					<span class="sd-checkbox__decorator sd-item__decorator">
+						<svg class="sd-checkbox__svg sd-item__svg">
+							<use xlink:href="#icon-check-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_1" name="nameitem2" type="checkbox" value="item2">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_2" name="nameitem3" type="checkbox" value="item3">
-			<span class="sd-checkbox__decorator sd-item__decorator">
-				<svg class="sd-checkbox__svg sd-item__svg">
-					<use xlink:href="#icon-check-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-allowResize.snap.html b/tests/markup/snapshots/comment-allowResize.snap.html
index 727b3e2f78..7f5bc6b33f 100644
--- a/tests/markup/snapshots/comment-allowResize.snap.html
+++ b/tests/markup/snapshots/comment-allowResize.snap.html
@@ -1,4 +1,8 @@
-<div class="sd-comment sd-formbox">
-	<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" id="testid0i" placeholder="placeholder text" rows="4" style="resize:none;">
-	</textarea>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--comment" role="presentation">
+		<div class="sd-comment sd-formbox">
+			<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" id="testid0i" placeholder="placeholder text" rows="4" style="resize:none;">
+			</textarea>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-disabled.snap.html b/tests/markup/snapshots/comment-disabled.snap.html
index 9004ab1b9d..9ccf2ea9b3 100644
--- a/tests/markup/snapshots/comment-disabled.snap.html
+++ b/tests/markup/snapshots/comment-disabled.snap.html
@@ -1,10 +1,14 @@
-<div class="sd-comment sd-formbox">
-	<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" disabled="" id="testid0i" placeholder="placeholder text" rows="4" style="resize:none;">
-	</textarea>
-	<div class="sd-comment__grip">
-		<svg class="sv-svg-icon" role="presentation">
-			<use xlink:href="#icon-grip" class="">
-			</use>
-		</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--comment" role="presentation">
+		<div class="sd-comment sd-formbox">
+			<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" disabled="" id="testid0i" placeholder="placeholder text" rows="4" style="resize:none;">
+			</textarea>
+			<div class="sd-comment__grip">
+				<svg class="sv-svg-icon" role="presentation">
+					<use xlink:href="#icon-grip" class="">
+					</use>
+				</svg>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-div.snap.html b/tests/markup/snapshots/comment-div.snap.html
index 0f6a32d4e4..024b6ae4d9 100644
--- a/tests/markup/snapshots/comment-div.snap.html
+++ b/tests/markup/snapshots/comment-div.snap.html
@@ -1 +1,5 @@
-<div>val</div>
\ No newline at end of file
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--comment" role="presentation">
+		<div>val</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-into-question-allowResize.snap.html b/tests/markup/snapshots/comment-into-question-allowResize.snap.html
index e2238da10a..ebc171c32f 100644
--- a/tests/markup/snapshots/comment-into-question-allowResize.snap.html
+++ b/tests/markup/snapshots/comment-into-question-allowResize.snap.html
@@ -1,64 +1,68 @@
-<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Item 1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Item 1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Item 2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Item 3</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+				</div>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Item 2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Item 3</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-		</div>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-into-question-commentAreaRows.snap.html b/tests/markup/snapshots/comment-into-question-commentAreaRows.snap.html
index 049dc57d7b..1e2f61b6d5 100644
--- a/tests/markup/snapshots/comment-into-question-commentAreaRows.snap.html
+++ b/tests/markup/snapshots/comment-into-question-commentAreaRows.snap.html
@@ -1,85 +1,89 @@
-<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Item 1</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Item 2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Item 3</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" rows="3" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Item 1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Item 2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="Item 3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Item 3</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" rows="3" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
+			</div>
+		</fieldset>
+		<div class="sd-question__comment-area sd-question__form-group">
+			<div>
+				<span class="sv-string-viewer">Please leave a comment</span>
+			</div>
+			<div class="sd-comment sd-formbox">
+				<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" rows="3" style="resize:none;">
+				</textarea>
+				<div class="sd-comment__grip">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-grip" class="">
+						</use>
+					</svg>
+				</div>
 			</div>
-		</div>
-	</div>
-</fieldset>
-<div class="sd-question__comment-area sd-question__form-group">
-	<div>
-		<span class="sv-string-viewer">Please leave a comment</span>
-	</div>
-	<div class="sd-comment sd-formbox">
-		<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" rows="3" style="resize:none;">
-		</textarea>
-		<div class="sd-comment__grip">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-grip" class="">
-				</use>
-			</svg>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment-readonly.snap.html b/tests/markup/snapshots/comment-readonly.snap.html
index 93c34f71c6..69552da420 100644
--- a/tests/markup/snapshots/comment-readonly.snap.html
+++ b/tests/markup/snapshots/comment-readonly.snap.html
@@ -1,10 +1,14 @@
-<div class="sd-comment sd-formbox sd-formbox--readonly">
-	<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" id="testid0i" readonly="" rows="4" style="resize:none;">
-	</textarea>
-	<div class="sd-comment__grip">
-		<svg class="sv-svg-icon" role="presentation">
-			<use xlink:href="#icon-grip" class="">
-			</use>
-		</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--comment" role="presentation">
+		<div class="sd-comment sd-formbox sd-formbox--readonly">
+			<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" id="testid0i" readonly="" rows="4" style="resize:none;">
+			</textarea>
+			<div class="sd-comment__grip">
+				<svg class="sv-svg-icon" role="presentation">
+					<use xlink:href="#icon-grip" class="">
+					</use>
+				</svg>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/comment.snap.html b/tests/markup/snapshots/comment.snap.html
index 7d2dd53f22..c739a5cb1c 100644
--- a/tests/markup/snapshots/comment.snap.html
+++ b/tests/markup/snapshots/comment.snap.html
@@ -1,10 +1,14 @@
-<div class="sd-comment sd-formbox">
-	<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" id="testid0i" placeholder="placeholder text" rows="4" style="resize:none;">
-	</textarea>
-	<div class="sd-comment__grip">
-		<svg class="sv-svg-icon" role="presentation">
-			<use xlink:href="#icon-grip" class="">
-			</use>
-		</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--comment" role="presentation">
+		<div class="sd-comment sd-formbox">
+			<textarea aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" cols="50" id="testid0i" placeholder="placeholder text" rows="4" style="resize:none;">
+			</textarea>
+			<div class="sd-comment__grip">
+				<svg class="sv-svg-icon" role="presentation">
+					<use xlink:href="#icon-grip" class="">
+					</use>
+				</svg>
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/dropdown-aria-expanded.snap.html b/tests/markup/snapshots/dropdown-aria-expanded.snap.html
index 5f7430d526..4d0e12c526 100644
--- a/tests/markup/snapshots/dropdown-aria-expanded.snap.html
+++ b/tests/markup/snapshots/dropdown-aria-expanded.snap.html
@@ -1,52 +1,56 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/dropdown-disabled-with-value.snap.html b/tests/markup/snapshots/dropdown-disabled-with-value.snap.html
index 2c067e959c..827b8aa7b3 100644
--- a/tests/markup/snapshots/dropdown-disabled-with-value.snap.html
+++ b/tests/markup/snapshots/dropdown-disabled-with-value.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-formbox" disabled="" id="testid0i" role="combobox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-editor" contenteditable="true">item1</span>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-formbox" disabled="" id="testid0i" role="combobox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-editor" contenteditable="true">item1</span>
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-disabled-without-value.snap.html b/tests/markup/snapshots/dropdown-disabled-without-value.snap.html
index b06ee9904a..a91cad24a9 100644
--- a/tests/markup/snapshots/dropdown-disabled-without-value.snap.html
+++ b/tests/markup/snapshots/dropdown-disabled-without-value.snap.html
@@ -1,21 +1,25 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" disabled="" id="testid0i" role="combobox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input autocomplete="off" class="sd-dropdown__filter-string-input" disabled="" id="testid0i_0" inputmode="text" placeholder="Select..." readonly="" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" disabled="" id="testid0i" role="combobox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input autocomplete="off" class="sd-dropdown__filter-string-input" disabled="" id="testid0i_0" inputmode="text" placeholder="Select..." readonly="" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-input-focused.snap.html b/tests/markup/snapshots/dropdown-input-focused.snap.html
index d5a12b916e..eab1870862 100644
--- a/tests/markup/snapshots/dropdown-input-focused.snap.html
+++ b/tests/markup/snapshots/dropdown-input-focused.snap.html
@@ -1,34 +1,38 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." role="combobox" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/dropdown-input-string.snap.html b/tests/markup/snapshots/dropdown-input-string.snap.html
index 6f562737b0..a9ec0ed0ad 100644
--- a/tests/markup/snapshots/dropdown-input-string.snap.html
+++ b/tests/markup/snapshots/dropdown-input-string.snap.html
@@ -1,59 +1,63 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__hint-prefix">
-					<span>F</span>
-				</div>
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<div class="sd-dropdown__hint-suffix">
-						<span style="visibility:hidden;">o</span>
-						<span>rd</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__hint-prefix">
+							<span>F</span>
+						</div>
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<div class="sd-dropdown__hint-suffix">
+								<span style="visibility:hidden;">o</span>
+								<span>rd</span>
+							</div>
+							<input aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
+						</div>
 					</div>
-					<input aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist sd-selectlist--filtering" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item--focused sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">Ford</span>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" style="display:none;" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">Vauxhall</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">Volkswagen</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist sd-selectlist--filtering" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item--focused sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">Ford</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" style="display:none;" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">Vauxhall</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">Volkswagen</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/dropdown-other.snap.html b/tests/markup/snapshots/dropdown-other.snap.html
index 0e41bf4f12..b3286d898e 100644
--- a/tests/markup/snapshots/dropdown-other.snap.html
+++ b/tests/markup/snapshots/dropdown-other.snap.html
@@ -1,36 +1,40 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--select sd-formbox">
-			<select aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown__input sd-formbox__input">
-				<option value="">Select...</option>
-				<option value="item1">item1</option>
-				<option value="item2">item2</option>
-				<option value="item3">item3</option>
-				<option value="other">Other (describe)</option>
-			</select>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--select sd-formbox">
+					<select aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown__input sd-formbox__input">
+						<option value="">Select...</option>
+						<option value="item1">item1</option>
+						<option value="item2">item2</option>
+						<option value="item3">item3</option>
+						<option value="other">Other (describe)</option>
+					</select>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="form-group sd-question__comment-area">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+			<div class="form-group sd-question__comment-area">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/dropdown-readonly-with-value.snap.html b/tests/markup/snapshots/dropdown-readonly-with-value.snap.html
index 008dadd34d..b26e169f30 100644
--- a/tests/markup/snapshots/dropdown-readonly-with-value.snap.html
+++ b/tests/markup/snapshots/dropdown-readonly-with-value.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<span class="sv-string-viewer">item1</span>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<span class="sv-string-viewer">item1</span>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-readonly.snap.html b/tests/markup/snapshots/dropdown-readonly.snap.html
index c1a48be6fe..e702d8d55c 100644
--- a/tests/markup/snapshots/dropdown-readonly.snap.html
+++ b/tests/markup/snapshots/dropdown-readonly.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<span class="sv-string-viewer">Select...</span>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<span class="sv-string-viewer">Select...</span>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-renderAs-select-readonly-selected.snap.html b/tests/markup/snapshots/dropdown-renderAs-select-readonly-selected.snap.html
index cb487af5fe..5f5bbdb4cc 100644
--- a/tests/markup/snapshots/dropdown-renderAs-select-readonly-selected.snap.html
+++ b/tests/markup/snapshots/dropdown-renderAs-select-readonly-selected.snap.html
@@ -1,16 +1,20 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--select sd-formbox sd-formbox--readonly">
-			<div class="sd-dropdown sd-dropdown--select sd-formbox sd-formbox--readonly" disabled="" id="testid0i">item1</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--select sd-formbox sd-formbox--readonly">
+					<div class="sd-dropdown sd-dropdown--select sd-formbox sd-formbox--readonly" disabled="" id="testid0i">item1</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-renderAs-select-readonly.snap.html b/tests/markup/snapshots/dropdown-renderAs-select-readonly.snap.html
index cb8cb80a84..e184b26953 100644
--- a/tests/markup/snapshots/dropdown-renderAs-select-readonly.snap.html
+++ b/tests/markup/snapshots/dropdown-renderAs-select-readonly.snap.html
@@ -1,16 +1,20 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox sd-formbox--readonly">
-			<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox sd-formbox--readonly" disabled="" id="testid0i">Select...</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox sd-formbox--readonly">
+					<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox sd-formbox--readonly" disabled="" id="testid0i">Select...</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-select-clear-button.snap.html b/tests/markup/snapshots/dropdown-select-clear-button.snap.html
index fc7ecc1616..b4192f737e 100644
--- a/tests/markup/snapshots/dropdown-select-clear-button.snap.html
+++ b/tests/markup/snapshots/dropdown-select-clear-button.snap.html
@@ -1,46 +1,50 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-formbox" id="testid0i">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-viewer">item1</span>
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-formbox" id="testid0i">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-viewer">item1</span>
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/dropdown-select-mobile.snap.html b/tests/markup/snapshots/dropdown-select-mobile.snap.html
index 8f854adde7..a9c17b3801 100644
--- a/tests/markup/snapshots/dropdown-select-mobile.snap.html
+++ b/tests/markup/snapshots/dropdown-select-mobile.snap.html
@@ -1,56 +1,60 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0i">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="none" placeholder="Select..." readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0i">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="none" placeholder="Select..." readonly="" role="combobox" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-tablet sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__filter">
-										<div class="sd-selectlist-filter__box">
-											<div class="sd-selectlist__filter-icon">
-												<svg class="sv-svg-icon" role="presentation">
-													<use xlink:href="#icon-search-24x24" class="">
-													</use>
-												</svg>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-tablet sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__filter">
+												<div class="sd-selectlist-filter__box">
+													<div class="sd-selectlist__filter-icon">
+														<svg class="sv-svg-icon" role="presentation">
+															<use xlink:href="#icon-search-24x24" class="">
+															</use>
+														</svg>
+													</div>
+													<input aria-label="Type to search..." class="sd-selectlist__input" placeholder="Type to search..." type="text">
+												</div>
+											</div>
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-											<input aria-label="Type to search..." class="sd-selectlist__input" placeholder="Type to search..." type="text" value="">
 										</div>
 									</div>
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
 								</div>
-							</div>
-						</div>
-						<div class="sv-popup__body-footer">
-							<div class="sd-action-bar sd-action-bar--default-size sv-menu-footer-action-bar">
-								<div class="sd-action-bar__item">
-									<div class="sd-action-bar__item-content">
-										<button class="sd-action sd-action--brand sd-action--small sd-action--tertiary sv-popup__button sv-popup__button--cancel" role="button" tabindex="0" type="button">
-											<span class="sd-action__title">Cancel</span>
-										</button>
+								<div class="sv-popup__body-footer">
+									<div class="sd-action-bar sd-action-bar--default-size sv-menu-footer-action-bar">
+										<div class="sd-action-bar__item">
+											<div class="sd-action-bar__item-content">
+												<button class="sd-action sd-action--brand sd-action--small sd-action--tertiary sv-popup__button sv-popup__button--cancel" role="button" tabindex="0" type="button">
+													<span class="sd-action__title">Cancel</span>
+												</button>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/dropdown-select.snap.html b/tests/markup/snapshots/dropdown-select.snap.html
index 841efedab6..c4efbd4437 100644
--- a/tests/markup/snapshots/dropdown-select.snap.html
+++ b/tests/markup/snapshots/dropdown-select.snap.html
@@ -1,34 +1,38 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0i">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0i">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/dropdown-show.snap.html b/tests/markup/snapshots/dropdown-show.snap.html
index b03061ff21..3a2a146df1 100644
--- a/tests/markup/snapshots/dropdown-show.snap.html
+++ b/tests/markup/snapshots/dropdown-show.snap.html
@@ -1,20 +1,24 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox">
-			<select aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown__input sd-formbox__input" id="testid0i">
-				<option value="item1">item1</option>
-				<option value="item2">item2</option>
-				<option value="item3">item3</option>
-			</select>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox">
+					<select aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown__input sd-formbox__input" id="testid0i">
+						<option value="item1">item1</option>
+						<option value="item2">item2</option>
+						<option value="item3">item3</option>
+					</select>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/dropdown-with-markdown.snap.html b/tests/markup/snapshots/dropdown-with-markdown.snap.html
index 3ff7922cb3..ea1f31e05a 100644
--- a/tests/markup/snapshots/dropdown-with-markdown.snap.html
+++ b/tests/markup/snapshots/dropdown-with-markdown.snap.html
@@ -1,46 +1,50 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-formbox" id="testid0i">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-viewer">Cat: ![A cat](https://surveyjs.io/Content/Images/examples/markdown/cat.svg =14x14)</span>
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-formbox" id="testid0i">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-viewer">Cat: ![A cat](https://surveyjs.io/Content/Images/examples/markdown/cat.svg =14x14)</span>
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/dropdown-with-none-value.snap.html b/tests/markup/snapshots/dropdown-with-none-value.snap.html
index c8a96c53d5..77e6a25ab7 100644
--- a/tests/markup/snapshots/dropdown-with-none-value.snap.html
+++ b/tests/markup/snapshots/dropdown-with-none-value.snap.html
@@ -1,46 +1,50 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-formbox" id="testid0i">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-viewer">None</span>
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-formbox" id="testid0i">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-viewer">None</span>
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/dropdown-with-other-value.snap.html b/tests/markup/snapshots/dropdown-with-other-value.snap.html
index b25d5950c9..71af198c60 100644
--- a/tests/markup/snapshots/dropdown-with-other-value.snap.html
+++ b/tests/markup/snapshots/dropdown-with-other-value.snap.html
@@ -1,46 +1,50 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-formbox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-viewer">Other (describe)</span>
-					<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-formbox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-viewer">Other (describe)</span>
+							<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
@@ -48,17 +52,17 @@
 					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="form-group sd-question__comment-area">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+			<div class="form-group sd-question__comment-area">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/dropdown-without-textWrapEnabled.snap.html b/tests/markup/snapshots/dropdown-without-textWrapEnabled.snap.html
index 1228e47101..de1132fb1d 100644
--- a/tests/markup/snapshots/dropdown-without-textWrapEnabled.snap.html
+++ b/tests/markup/snapshots/dropdown-without-textWrapEnabled.snap.html
@@ -1,59 +1,63 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__hint-prefix">
-					<span>F</span>
-				</div>
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<div class="sd-dropdown__hint-suffix">
-						<span style="visibility:hidden;">o</span>
-						<span>rd</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__hint-prefix">
+							<span>F</span>
+						</div>
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<div class="sd-dropdown__hint-suffix">
+								<span style="visibility:hidden;">o</span>
+								<span>rd</span>
+							</div>
+							<input aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
+						</div>
 					</div>
-					<input aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist sd-selectlist--filtering" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item--focused" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">Ford</span>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" style="display:none;" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">Vauxhall</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">Volkswagen</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist sd-selectlist--filtering" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item--focused" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">Ford</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" style="display:none;" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">Vauxhall</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">Volkswagen</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/dropdown.snap.html b/tests/markup/snapshots/dropdown.snap.html
index dc29a5836d..05bb4b58dc 100644
--- a/tests/markup/snapshots/dropdown.snap.html
+++ b/tests/markup/snapshots/dropdown.snap.html
@@ -1,21 +1,25 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox">
-			<select aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown__input sd-formbox__input" id="testid0i">
-				<option value="">Select...</option>
-				<option value="item1">item1</option>
-				<option value="item2">item2</option>
-				<option value="item3">item3</option>
-			</select>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-dropdown--select sd-formbox">
+					<select aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown__input sd-formbox__input" id="testid0i">
+						<option value="">Select...</option>
+						<option value="item1">item1</option>
+						<option value="item2">item2</option>
+						<option value="item3">item3</option>
+					</select>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/expression.snap.html b/tests/markup/snapshots/expression.snap.html
index 3da1545e75..83f419c3e3 100644
--- a/tests/markup/snapshots/expression.snap.html
+++ b/tests/markup/snapshots/expression.snap.html
@@ -1 +1,5 @@
-<div aria-label="123" aria-live="polite" class="sd-expression">123</div>
\ No newline at end of file
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div aria-label="123" aria-live="polite" class="sd-expression">123</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/file-2-png.snap.html b/tests/markup/snapshots/file-2-png.snap.html
index f7dab49a8d..15dbef4395 100644
--- a/tests/markup/snapshots/file-2-png.snap.html
+++ b/tests/markup/snapshots/file-2-png.snap.html
@@ -1,55 +1,59 @@
-<div class="sd-file sd-file--answered sd-file--single sd-file--single-image">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Replace file</title>
-								</svg>
-							</label>
-						</div>
-					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
-									</use>
-									<title class="">Clear</title>
-								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper">
-						<img alt="File preview" src="#item1.png">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--single sd-file--single-image">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
 							<div class="sd-action-bar__item">
 								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+									<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
 										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-close-16x16" class="">
+											<use xlink:href="#icon-folder-24x24" class="">
 											</use>
-											<title class="">Remove this file</title>
+											<title class="">Replace file</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
 										</svg>
 									</button>
 								</div>
 							</div>
 						</div>
-						<div class="sd-file__sign">
-							<a download="item1.png" href="#item1.png" rel="noreferrer" target="_blank" title="item1.png">item1.png</a>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper">
+								<img alt="File preview" src="#item1.png">
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-close-16x16" class="">
+													</use>
+													<title class="">Remove this file</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+								<div class="sd-file__sign">
+									<a download="item1.png" href="#item1.png" rel="noreferrer" target="_blank" title="item1.png">item1.png</a>
+								</div>
+							</span>
 						</div>
-					</span>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html b/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html
index 22fce4790a..5ae8cb6053 100644
--- a/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html
+++ b/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html
@@ -1,86 +1,90 @@
-<div class="sd-file sd-file--answered">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" multiple="" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" multiple="" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
 									</use>
-									<title class="">Select File</title>
 								</svg>
-							</label>
-						</div>
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+											<svg class="sd-action__icon sv-svg-icon" role="presentation">
+												<use xlink:href="#icon-close-16x16" class="">
+												</use>
+												<title class="">Remove this file</title>
+											</svg>
+										</button>
+									</div>
+								</div>
+							</div>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
 					</div>
+				</div>
+				<div class="sd-action-bar sd-action-bar--default-size">
 					<div class="sd-action-bar__item">
 						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
+									<use xlink:href="#icon-arrowleft-16x16" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
 							</button>
 						</div>
 					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
-									<svg class="sd-action__icon sv-svg-icon" role="presentation">
-										<use xlink:href="#icon-close-16x16" class="">
-										</use>
-										<title class="">Remove this file</title>
-									</svg>
-								</button>
-							</div>
+					<div class="sd-action-bar__item sv-action--file-index">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">1 of 2</span>
+							</button>
 						</div>
 					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
+									<use xlink:href="#icon-arrowright-16x16" class="">
+									</use>
+								</svg>
+							</button>
+						</div>
 					</div>
-				</span>
-			</div>
-		</div>
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
-							<use xlink:href="#icon-arrowleft-16x16" class="">
-							</use>
-						</svg>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sv-action--file-index">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">1 of 2</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
-							<use xlink:href="#icon-arrowright-16x16" class="">
-							</use>
-						</svg>
-					</button>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-2-zip-png-ro.snap.html b/tests/markup/snapshots/file-2-zip-png-ro.snap.html
index 693f090b1b..8559d736c1 100644
--- a/tests/markup/snapshots/file-2-zip-png-ro.snap.html
+++ b/tests/markup/snapshots/file-2-zip-png-ro.snap.html
@@ -1,56 +1,60 @@
-<div class="sd-file sd-file--answered sd-file--readonly">
-	<input class="form-control sd-visuallyhidden" id="testid0i" multiple="" placeholder="Question title" readonly="" style="color:transparent;" type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--disabled sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Select File</title>
-								</svg>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--readonly">
+			<input class="form-control sd-visuallyhidden" id="testid0i" multiple="" placeholder="Question title" readonly="" style="color:transparent;" type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--disabled sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
-							</button>
+							</div>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper">
+								<img alt="File preview" src="#item2.png">
+								</div>
+								<div class="sd-file__sign">
+									<a download="item2.png" href="#item2.png" rel="noreferrer" target="_blank" title="item2.png">item2.png</a>
+								</div>
+							</span>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
-					</div>
-				</span>
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper">
-						<img alt="File preview" src="#item2.png">
-						</div>
-						<div class="sd-file__sign">
-							<a download="item2.png" href="#item2.png" rel="noreferrer" target="_blank" title="item2.png">item2.png</a>
-						</div>
-					</span>
-				</div>
-			</div>
-		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/file-2-zip-png.snap.html b/tests/markup/snapshots/file-2-zip-png.snap.html
index b70d70a466..671be37c18 100644
--- a/tests/markup/snapshots/file-2-zip-png.snap.html
+++ b/tests/markup/snapshots/file-2-zip-png.snap.html
@@ -1,77 +1,81 @@
-<div class="sd-file sd-file--answered">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" multiple="" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Select File</title>
-								</svg>
-							</label>
-						</div>
-					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
-									</use>
-									<title class="">Clear</title>
-								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
-									<svg class="sd-action__icon sv-svg-icon" role="presentation">
-										<use xlink:href="#icon-close-16x16" class="">
-										</use>
-										<title class="">Remove this file</title>
-									</svg>
-								</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" multiple="" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+									</label>
+								</div>
 							</div>
-						</div>
-					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
-					</div>
-				</span>
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper">
-						<img alt="File preview" src="#item2.png">
 							<div class="sd-action-bar__item">
 								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
 										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-close-16x16" class="">
+											<use xlink:href="#icon-clear-24x24" class="">
 											</use>
-											<title class="">Remove this file</title>
+											<title class="">Clear</title>
 										</svg>
 									</button>
 								</div>
 							</div>
 						</div>
-						<div class="sd-file__sign">
-							<a download="item2.png" href="#item2.png" rel="noreferrer" target="_blank" title="item2.png">item2.png</a>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
+									</use>
+								</svg>
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+											<svg class="sd-action__icon sv-svg-icon" role="presentation">
+												<use xlink:href="#icon-close-16x16" class="">
+												</use>
+												<title class="">Remove this file</title>
+											</svg>
+										</button>
+									</div>
+								</div>
+							</div>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper">
+								<img alt="File preview" src="#item2.png">
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-close-16x16" class="">
+													</use>
+													<title class="">Remove this file</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+								<div class="sd-file__sign">
+									<a download="item2.png" href="#item2.png" rel="noreferrer" target="_blank" title="item2.png">item2.png</a>
+								</div>
+							</span>
 						</div>
-					</span>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-2-zip.snap.html b/tests/markup/snapshots/file-2-zip.snap.html
index ad53b32707..6992270eda 100644
--- a/tests/markup/snapshots/file-2-zip.snap.html
+++ b/tests/markup/snapshots/file-2-zip.snap.html
@@ -1,58 +1,62 @@
-<div class="sd-file sd-file--answered sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Replace file</title>
-								</svg>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Replace file</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
-									<svg class="sd-action__icon sv-svg-icon" role="presentation">
-										<use xlink:href="#icon-close-16x16" class="">
-										</use>
-										<title class="">Remove this file</title>
-									</svg>
-								</button>
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+											<svg class="sd-action__icon sv-svg-icon" role="presentation">
+												<use xlink:href="#icon-close-16x16" class="">
+												</use>
+												<title class="">Remove this file</title>
+											</svg>
+										</button>
+									</div>
+								</div>
 							</div>
-						</div>
-					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
 					</div>
-				</span>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/file-2.snap.html b/tests/markup/snapshots/file-2.snap.html
index c5fdff7756..e0360b08a1 100644
--- a/tests/markup/snapshots/file-2.snap.html
+++ b/tests/markup/snapshots/file-2.snap.html
@@ -1,22 +1,26 @@
-<div class="sd-file sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<span class="sd-file__drag-area-placeholder">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop a file here or click the button below to select a file to upload.</span>
-			</span>
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Select File</title>
-								</svg>
-								<span class="sd-action__title">Select File</span>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<span class="sd-file__drag-area-placeholder">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop a file here or click the button below to select a file to upload.</span>
+					</span>
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+										<span class="sd-action__title">Select File</span>
+									</label>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/file-camera.snap.html b/tests/markup/snapshots/file-camera.snap.html
index e28c410363..a7b4dcd8b8 100644
--- a/tests/markup/snapshots/file-camera.snap.html
+++ b/tests/markup/snapshots/file-camera.snap.html
@@ -1,22 +1,26 @@
-<div class="sd-file sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" capture="user" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<span class="sd-file__drag-area-placeholder">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop a file here or click the button below to select a file to upload.</span>
-			</span>
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Select File</title>
-								</svg>
-								<span class="sd-action__title">Select File</span>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" capture="user" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<span class="sd-file__drag-area-placeholder">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop a file here or click the button below to select a file to upload.</span>
+					</span>
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+										<span class="sd-action__title">Select File</span>
+									</label>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/file-image-size.snap.html b/tests/markup/snapshots/file-image-size.snap.html
index 6ac49ff75a..a4c2a7e80a 100644
--- a/tests/markup/snapshots/file-image-size.snap.html
+++ b/tests/markup/snapshots/file-image-size.snap.html
@@ -1,55 +1,59 @@
-<div class="sd-file sd-file--answered sd-file--single sd-file--single-image">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Replace file</title>
-								</svg>
-							</label>
-						</div>
-					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
-									</use>
-									<title class="">Clear</title>
-								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper">
-						<img alt="File preview" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6L" style="height:250px; width:350px;">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--single sd-file--single-image">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
 							<div class="sd-action-bar__item">
 								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+									<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
 										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-close-16x16" class="">
+											<use xlink:href="#icon-folder-24x24" class="">
 											</use>
-											<title class="">Remove this file</title>
+											<title class="">Replace file</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
 										</svg>
 									</button>
 								</div>
 							</div>
 						</div>
-						<div class="sd-file__sign">
-							<a download="arrow.svg" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6L" rel="noreferrer" style="width:350px;" target="_blank" title="arrow.svg">arrow.svg</a>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper">
+								<img alt="File preview" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6L" style="height:250px; width:350px;">
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-close-16x16" class="">
+													</use>
+													<title class="">Remove this file</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+								<div class="sd-file__sign">
+									<a download="arrow.svg" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6L" rel="noreferrer" style="width:350px;" target="_blank" title="arrow.svg">arrow.svg</a>
+								</div>
+							</span>
 						</div>
-					</span>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-mob2-png.snap.html b/tests/markup/snapshots/file-mob2-png.snap.html
index fecd72f482..6e0f462f14 100644
--- a/tests/markup/snapshots/file-mob2-png.snap.html
+++ b/tests/markup/snapshots/file-mob2-png.snap.html
@@ -1,55 +1,59 @@
-<div class="sd-file sd-file--answered sd-file--mobile sd-file--single sd-file--single-image">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Replace file</title>
-								</svg>
-							</label>
-						</div>
-					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
-									</use>
-									<title class="">Clear</title>
-								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper">
-						<img alt="File preview" src="#item1.png">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--mobile sd-file--single sd-file--single-image">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
 							<div class="sd-action-bar__item">
 								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+									<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
 										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-close-16x16" class="">
+											<use xlink:href="#icon-folder-24x24" class="">
 											</use>
-											<title class="">Remove this file</title>
+											<title class="">Replace file</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
 										</svg>
 									</button>
 								</div>
 							</div>
 						</div>
-						<div class="sd-file__sign">
-							<a download="item1.png" href="#item1.png" rel="noreferrer" target="_blank" title="item1.png">item1.png</a>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper">
+								<img alt="File preview" src="#item1.png">
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-close-16x16" class="">
+													</use>
+													<title class="">Remove this file</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+								<div class="sd-file__sign">
+									<a download="item1.png" href="#item1.png" rel="noreferrer" target="_blank" title="item1.png">item1.png</a>
+								</div>
+							</span>
 						</div>
-					</span>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html b/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html
index ec65a079c0..4f9edd0811 100644
--- a/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html
+++ b/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html
@@ -1,27 +1,75 @@
-<div class="sd-file sd-file--answered sd-file--mobile sd-file--readonly">
-	<input class="form-control sd-visuallyhidden" id="testid0i" multiple="" placeholder="Question title" readonly="" style="color:transparent;" type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--mobile sd-file--readonly">
+			<input class="form-control sd-visuallyhidden" id="testid0i" multiple="" placeholder="Question title" readonly="" style="color:transparent;" type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--disabled sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
+					</div>
+				</div>
+				<div class="sd-action-bar sd-action-bar--default-size">
 					<div class="sd-action-bar__item">
 						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--disabled sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
+									<use xlink:href="#icon-arrowleft-16x16" class="">
 									</use>
-									<title class="">Select File</title>
 								</svg>
-							</label>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item sv-action--file-index">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">1 of 2</span>
+							</button>
 						</div>
 					</div>
 					<div class="sd-action-bar__item">
 						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
+									<use xlink:href="#icon-arrowright-16x16" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
 							</button>
 						</div>
@@ -29,49 +77,5 @@
 				</div>
 			</div>
 		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
-					</div>
-				</span>
-			</div>
-		</div>
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
-							<use xlink:href="#icon-arrowleft-16x16" class="">
-							</use>
-						</svg>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sv-action--file-index">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">1 of 2</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
-							<use xlink:href="#icon-arrowright-16x16" class="">
-							</use>
-						</svg>
-					</button>
-				</div>
-			</div>
-		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/file-mob2-zip-png.snap.html b/tests/markup/snapshots/file-mob2-zip-png.snap.html
index c8f0166cf3..f308a6e849 100644
--- a/tests/markup/snapshots/file-mob2-zip-png.snap.html
+++ b/tests/markup/snapshots/file-mob2-zip-png.snap.html
@@ -1,86 +1,90 @@
-<div class="sd-file sd-file--answered sd-file--mobile">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" multiple="" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--mobile">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" multiple="" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
 									</use>
-									<title class="">Select File</title>
 								</svg>
-							</label>
-						</div>
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+											<svg class="sd-action__icon sv-svg-icon" role="presentation">
+												<use xlink:href="#icon-close-16x16" class="">
+												</use>
+												<title class="">Remove this file</title>
+											</svg>
+										</button>
+									</div>
+								</div>
+							</div>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
 					</div>
+				</div>
+				<div class="sd-action-bar sd-action-bar--default-size">
 					<div class="sd-action-bar__item">
 						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
+									<use xlink:href="#icon-arrowleft-16x16" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
 							</button>
 						</div>
 					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
-									<svg class="sd-action__icon sv-svg-icon" role="presentation">
-										<use xlink:href="#icon-close-16x16" class="">
-										</use>
-										<title class="">Remove this file</title>
-									</svg>
-								</button>
-							</div>
+					<div class="sd-action-bar__item sv-action--file-index">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">1 of 2</span>
+							</button>
 						</div>
 					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
+									<use xlink:href="#icon-arrowright-16x16" class="">
+									</use>
+								</svg>
+							</button>
+						</div>
 					</div>
-				</span>
-			</div>
-		</div>
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
-							<use xlink:href="#icon-arrowleft-16x16" class="">
-							</use>
-						</svg>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sv-action--file-index">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">1 of 2</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:16px; width:16px;">
-							<use xlink:href="#icon-arrowright-16x16" class="">
-							</use>
-						</svg>
-					</button>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-mob2-zip.snap.html b/tests/markup/snapshots/file-mob2-zip.snap.html
index b6e2516079..ea8511770e 100644
--- a/tests/markup/snapshots/file-mob2-zip.snap.html
+++ b/tests/markup/snapshots/file-mob2-zip.snap.html
@@ -1,58 +1,62 @@
-<div class="sd-file sd-file--answered sd-file--mobile sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Replace file</title>
-								</svg>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--mobile sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title=" " type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Replace file</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
-									<svg class="sd-action__icon sv-svg-icon" role="presentation">
-										<use xlink:href="#icon-close-16x16" class="">
-										</use>
-										<title class="">Remove this file</title>
-									</svg>
-								</button>
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+											<svg class="sd-action__icon sv-svg-icon" role="presentation">
+												<use xlink:href="#icon-close-16x16" class="">
+												</use>
+												<title class="">Remove this file</title>
+											</svg>
+										</button>
+									</div>
+								</div>
 							</div>
-						</div>
-					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
 					</div>
-				</span>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/file-mob2.snap.html b/tests/markup/snapshots/file-mob2.snap.html
index 00b97241ed..e362039826 100644
--- a/tests/markup/snapshots/file-mob2.snap.html
+++ b/tests/markup/snapshots/file-mob2.snap.html
@@ -1,22 +1,26 @@
-<div class="sd-file sd-file--mobile sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<span class="sd-file__drag-area-placeholder">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop a file here or click the button below to select a file to upload.</span>
-			</span>
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Select File</title>
-								</svg>
-								<span class="sd-action__title">Select File</span>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--mobile sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<span class="sd-file__drag-area-placeholder">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop a file here or click the button below to select a file to upload.</span>
+					</span>
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+										<span class="sd-action__title">Select File</span>
+									</label>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/file-mode-both.snap.html b/tests/markup/snapshots/file-mode-both.snap.html
index 8419d8095e..876da8552d 100644
--- a/tests/markup/snapshots/file-mode-both.snap.html
+++ b/tests/markup/snapshots/file-mode-both.snap.html
@@ -1,34 +1,38 @@
-<div class="sd-file sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<span class="sd-file__drag-area-placeholder">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop or select a file to upload or take a photo using the camera.</span>
-			</span>
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Select File</title>
-								</svg>
-								<span class="sd-action__title">Select File</span>
-							</label>
-						</div>
-					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-camera-24x24" class="">
-									</use>
-									<title class="">Take Photo</title>
-								</svg>
-								<span class="sd-action__title">Take Photo</span>
-							</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Choose file(s)..." type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<span class="sd-file__drag-area-placeholder">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Drag and drop or select a file to upload or take a photo using the camera.</span>
+					</span>
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Select File" class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Select File</title>
+										</svg>
+										<span class="sd-action__title">Select File</span>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-camera-24x24" class="">
+											</use>
+											<title class="">Take Photo</title>
+										</svg>
+										<span class="sd-action__title">Take Photo</span>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/file-mode-camera.snap.html b/tests/markup/snapshots/file-mode-camera.snap.html
index b78fd824fb..7baa60148b 100644
--- a/tests/markup/snapshots/file-mode-camera.snap.html
+++ b/tests/markup/snapshots/file-mode-camera.snap.html
@@ -1,21 +1,25 @@
-<div class="sd-file sd-file--single">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<span class="sd-file__drag-area-placeholder">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Click the button below to take a photo using the camera.</span>
-			</span>
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-camera-24x24" class="">
-									</use>
-									<title class="">Take Photo</title>
-								</svg>
-								<span class="sd-action__title">Take Photo</span>
-							</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--single">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<span class="sd-file__drag-area-placeholder">
+						<span class="sv-string-viewer sv-string-viewer--multiline">Click the button below to take a photo using the camera.</span>
+					</span>
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-camera-24x24" class="">
+											</use>
+											<title class="">Take Photo</title>
+										</svg>
+										<span class="sd-action__title">Take Photo</span>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/file-playing-video.snap.html b/tests/markup/snapshots/file-playing-video.snap.html
index 16f61e6e3a..6c021681a6 100644
--- a/tests/markup/snapshots/file-playing-video.snap.html
+++ b/tests/markup/snapshots/file-playing-video.snap.html
@@ -1,37 +1,41 @@
-<div class="sd-file sd-file--single">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__video-container">
-			<div class="sd-action-bar__item sd-action-bar__item--hidden">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--medium sd-action--quaternary-surface sd-file__change-camera-button" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-flip-24x24" class="">
-							</use>
-						</svg>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--medium sd-action--quaternary-surface sd-file__close-camera-button" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-close-24x24" class="">
-							</use>
-						</svg>
-					</button>
-				</div>
-			</div>
-			<video autoplay="" class="sd-file__video" id="testid0_video" playsinline="">
-			</video>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--alert sd-action--large sd-action--primary sd-file__take-picture-button" role="button" tabindex="0" title="Take Photo" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-camera-32x32" class="">
-							</use>
-							<title class="">Take Photo</title>
-						</svg>
-					</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--single">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__video-container">
+					<div class="sd-action-bar__item sd-action-bar__item--hidden">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--medium sd-action--quaternary-surface sd-file__change-camera-button" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-flip-24x24" class="">
+									</use>
+								</svg>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--medium sd-action--quaternary-surface sd-file__close-camera-button" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-close-24x24" class="">
+									</use>
+								</svg>
+							</button>
+						</div>
+					</div>
+					<video autoplay="" class="sd-file__video" id="testid0_video" playsinline="">
+					</video>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--alert sd-action--large sd-action--primary sd-file__take-picture-button" role="button" tabindex="0" title="Take Photo" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-camera-32x32" class="">
+									</use>
+									<title class="">Take Photo</title>
+								</svg>
+							</button>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/file-single-zip-disabled.snap.html b/tests/markup/snapshots/file-single-zip-disabled.snap.html
index b3bb418da7..0eef50562e 100644
--- a/tests/markup/snapshots/file-single-zip-disabled.snap.html
+++ b/tests/markup/snapshots/file-single-zip-disabled.snap.html
@@ -1,58 +1,62 @@
-<div class="sd-file sd-file--answered sd-file--single">
-	<input class="form-control sd-visuallyhidden" disabled="" id="testid0i" placeholder="Question title" style="color:transparent;" type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__decorator">
-			<div class="sd-file__wrapper">
-				<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--disabled sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-folder-24x24" class="">
-									</use>
-									<title class="">Replace file</title>
-								</svg>
-							</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--answered sd-file--single">
+			<input class="form-control sd-visuallyhidden" disabled="" id="testid0i" placeholder="Question title" style="color:transparent;" type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__decorator">
+					<div class="sd-file__wrapper">
+						<div class="sd-action-bar sd-action-bar--default-size sd-file__actions-container">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<label aria-label="Replace file" class="sd-action sd-action--brand sd-action--disabled sd-action--quaternary-surface sd-action--small sd-file__choose-btn" for="testid0i" tabindex="0">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-folder-24x24" class="">
+											</use>
+											<title class="">Replace file</title>
+										</svg>
+									</label>
+								</div>
+							</div>
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" title="Clear" type="button">
+										<svg class="sd-action__icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-clear-24x24" class="">
+											</use>
+											<title class="">Clear</title>
+										</svg>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small" disabled="" role="button" tabindex="0" title="Clear" type="button">
-								<svg class="sd-action__icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-clear-24x24" class="">
+				</div>
+				<div class="sd-file__list">
+					<div class="sd-file__page" id="testid0page0">
+						<span class="sd-file__preview-item">
+							<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
+								<svg class="sd-file__default-image sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-file-72x72" class="">
 									</use>
-									<title class="">Clear</title>
 								</svg>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="sd-file__list">
-			<div class="sd-file__page" id="testid0page0">
-				<span class="sd-file__preview-item">
-					<div class="sd-file__image-wrapper sd-file__image-wrapper--default-image">
-						<svg class="sd-file__default-image sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-file-72x72" class="">
-							</use>
-						</svg>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
-									<svg class="sd-action__icon sv-svg-icon" role="presentation">
-										<use xlink:href="#icon-close-16x16" class="">
-										</use>
-										<title class="">Remove this file</title>
-									</svg>
-								</button>
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--border sd-action--neutral sd-action--quaternary-surface sd-action--x-small sd-file__remove-file-button" role="button" tabindex="0" title="Remove this file" type="button">
+											<svg class="sd-action__icon sv-svg-icon" role="presentation">
+												<use xlink:href="#icon-close-16x16" class="">
+												</use>
+												<title class="">Remove this file</title>
+											</svg>
+										</button>
+									</div>
+								</div>
 							</div>
-						</div>
-					</div>
-					<div class="sd-file__sign">
-						<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							<div class="sd-file__sign">
+								<a download="item1.zip" href="#item1.zip" rel="noreferrer" target="_blank" title="item1.zip">item1.zip</a>
+							</div>
+						</span>
 					</div>
-				</span>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/file-uploading.snap.html b/tests/markup/snapshots/file-uploading.snap.html
index 28a26a0741..98479b81c9 100644
--- a/tests/markup/snapshots/file-uploading.snap.html
+++ b/tests/markup/snapshots/file-uploading.snap.html
@@ -1,12 +1,16 @@
-<div class="sd-file sd-file--single">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" capture="user" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Loading..." type="file">
-	<div class="sd-file__drag-area">
-		<div class="sd-file__loading-indicator">
-			<div class="sd-loading-indicator">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-loading-48x48" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-file sd-file--single">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" capture="user" class="sd-visuallyhidden" id="testid0i" tabindex="-1" title="Loading..." type="file">
+			<div class="sd-file__drag-area">
+				<div class="sd-file__loading-indicator">
+					<div class="sd-loading-indicator">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-loading-48x48" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/image-empty.snap.html b/tests/markup/snapshots/image-empty.snap.html
index 15f20917cd..bb91d3eeb2 100644
--- a/tests/markup/snapshots/image-empty.snap.html
+++ b/tests/markup/snapshots/image-empty.snap.html
@@ -1,9 +1,13 @@
-<div class="sd-image">
-	<img alt="banner" class="sd-image__image sd-image__image--adaptive" height="150" style="display:none; object-fit:contain;" width="200">
-		<div class="sd-image__no-image">
-			<svg class="sv-svg-icon" role="presentation" style="height:48px; width:48px;">
-				<use xlink:href="#icon-noimage-48x48" class="">
-				</use>
-			</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-image">
+			<img alt="banner" class="sd-image__image sd-image__image--adaptive" height="150" style="display:none; object-fit:contain;" width="200">
+				<div class="sd-image__no-image">
+					<svg class="sv-svg-icon" role="presentation" style="height:48px; width:48px;">
+						<use xlink:href="#icon-noimage-48x48" class="">
+						</use>
+					</svg>
+				</div>
+			</div>
 		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/image-not-load-content.snap.html b/tests/markup/snapshots/image-not-load-content.snap.html
index b09081e31f..fa49a485e8 100644
--- a/tests/markup/snapshots/image-not-load-content.snap.html
+++ b/tests/markup/snapshots/image-not-load-content.snap.html
@@ -1,9 +1,13 @@
-<div class="sd-image">
-	<img alt="banner" class="sd-image__image sd-image__image--adaptive" height="150" src="#item1.jpg" style="display:none; object-fit:contain;" width="200">
-		<div class="sd-image__no-image">
-			<svg class="sv-svg-icon" role="presentation" style="height:48px; width:48px;">
-				<use xlink:href="#icon-noimage-48x48" class="">
-				</use>
-			</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-image">
+			<img alt="banner" class="sd-image__image sd-image__image--adaptive" height="150" src="#item1.jpg" style="display:none; object-fit:contain;" width="200">
+				<div class="sd-image__no-image">
+					<svg class="sv-svg-icon" role="presentation" style="height:48px; width:48px;">
+						<use xlink:href="#icon-noimage-48x48" class="">
+						</use>
+					</svg>
+				</div>
+			</div>
 		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/image-video.snap.html b/tests/markup/snapshots/image-video.snap.html
index fc8082fc7c..bf4a205787 100644
--- a/tests/markup/snapshots/image-video.snap.html
+++ b/tests/markup/snapshots/image-video.snap.html
@@ -1,4 +1,8 @@
-<div class="sd-image">
-	<video class="sd-image__image" controls="" height="300" src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" style="object-fit:contain;" width="500">
-	</video>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-image">
+			<video class="sd-image__image" controls="" height="300" src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" style="object-fit:contain;" width="500">
+			</video>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/image-youtube.snap.html b/tests/markup/snapshots/image-youtube.snap.html
index 8219cfa248..5fdc856480 100644
--- a/tests/markup/snapshots/image-youtube.snap.html
+++ b/tests/markup/snapshots/image-youtube.snap.html
@@ -1,4 +1,8 @@
-<div class="sd-image">
-	<iframe class="sd-image__image" height="450" src="testurl" style="object-fit:contain;" title="question1" width="800">
-	</iframe>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-image">
+			<iframe class="sd-image__image" height="450" src="testurl" style="object-fit:contain;" title="question1" width="800">
+			</iframe>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/image.snap.html b/tests/markup/snapshots/image.snap.html
index 3927742b74..8ce5833d4f 100644
--- a/tests/markup/snapshots/image.snap.html
+++ b/tests/markup/snapshots/image.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-image">
-	<img alt="banner" class="sd-image__image" height="300" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="object-fit:contain;" width="500">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-image">
+			<img alt="banner" class="sd-image__image" height="300" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="object-fit:contain;" width="500">
+			</div>
+		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-colCount-1-v2.snap.html b/tests/markup/snapshots/imagepicker-colCount-1-v2.snap.html
index 4091f94acb..9000146f04 100644
--- a/tests/markup/snapshots/imagepicker-colCount-1-v2.snap.html
+++ b/tests/markup/snapshots/imagepicker-colCount-1-v2.snap.html
@@ -1,35 +1,39 @@
-<fieldset class="sd-imagepicker sd-imagepicker--column sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sv-q-col-1">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
-					</div>
-				</div>
-			</label>
-		</div>
-		<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sv-q-col-1">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--column sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sv-q-col-1">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
+							</div>
 						</div>
+					</label>
+				</div>
+				<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sv-q-col-1">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+								</div>
+							</div>
+						</label>
 					</div>
-				</label>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-colCount-2-v2.snap.html b/tests/markup/snapshots/imagepicker-colCount-2-v2.snap.html
index 23f5b5ab0d..c6f1074ac2 100644
--- a/tests/markup/snapshots/imagepicker-colCount-2-v2.snap.html
+++ b/tests/markup/snapshots/imagepicker-colCount-2-v2.snap.html
@@ -1,39 +1,43 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__column sd-selectbase__column sv-q-column-2" role="presentation">
-		<div class="sd-imagepicker__item sd-imagepicker__item--allowhover">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
-						</div>
-					</div>
-				</label>
-			</div>
-		</div>
-		<div class="sd-imagepicker__column sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover">
-				<label class="sd-imagepicker__label">
-					<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-					<div class="sd-imagepicker__item-decorator">
-						<div class="sd-imagepicker__image-container">
-							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-									<use xlink:href="#icon-check-24x24" class="">
-									</use>
-								</svg>
-							</span>
-							<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__column sd-selectbase__column sv-q-column-2" role="presentation">
+				<div class="sd-imagepicker__item sd-imagepicker__item--allowhover">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
+								</div>
 							</div>
-						</div>
-					</label>
+						</label>
+					</div>
 				</div>
+				<div class="sd-imagepicker__column sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-imagepicker__item sd-imagepicker__item--allowhover">
+						<label class="sd-imagepicker__label">
+							<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+							<div class="sd-imagepicker__item-decorator">
+								<div class="sd-imagepicker__image-container">
+									<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+										<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+											<use xlink:href="#icon-check-24x24" class="">
+											</use>
+										</svg>
+									</span>
+									<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+									</div>
+								</div>
+							</label>
+						</div>
+					</div>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-disabled.snap.html b/tests/markup/snapshots/imagepicker-disabled.snap.html
index ca54d0a0ee..c6bbaa59ec 100644
--- a/tests/markup/snapshots/imagepicker-disabled.snap.html
+++ b/tests/markup/snapshots/imagepicker-disabled.snap.html
@@ -1,41 +1,45 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<img alt="item1" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
-					</div>
-					<span class="sd-imagepicker__text">
-						<span class="sv-string-editor" contenteditable="true">item1</span>
-					</span>
-				</div>
-			</label>
-		</div>
-		<div class="sd-imagepicker__item sd-imagepicker__item--inline">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item2" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<img alt="item1" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
+							</div>
+							<span class="sd-imagepicker__text">
+								<span class="sv-string-editor" contenteditable="true">item1</span>
+							</span>
 						</div>
-						<span class="sd-imagepicker__text">
-							<span class="sv-string-editor" contenteditable="true">item2</span>
-						</span>
+					</label>
+				</div>
+				<div class="sd-imagepicker__item sd-imagepicker__item--inline">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item2" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
+								</div>
+								<span class="sd-imagepicker__text">
+									<span class="sv-string-editor" contenteditable="true">item2</span>
+								</span>
+							</div>
+						</label>
 					</div>
-				</label>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-labels.snap.html b/tests/markup/snapshots/imagepicker-labels.snap.html
index 91d6f0a121..753ffc5ef3 100644
--- a/tests/markup/snapshots/imagepicker-labels.snap.html
+++ b/tests/markup/snapshots/imagepicker-labels.snap.html
@@ -1,41 +1,45 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
-					</div>
-					<span class="sd-imagepicker__text">
-						<span class="sv-string-viewer">item1</span>
-					</span>
-				</div>
-			</label>
-		</div>
-		<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
+							</div>
+							<span class="sd-imagepicker__text">
+								<span class="sv-string-viewer">item1</span>
+							</span>
 						</div>
-						<span class="sd-imagepicker__text">
-							<span class="sv-string-viewer">item2</span>
-						</span>
+					</label>
+				</div>
+				<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+								</div>
+								<span class="sd-imagepicker__text">
+									<span class="sv-string-viewer">item2</span>
+								</span>
+							</div>
+						</label>
 					</div>
-				</label>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-multi.snap.html b/tests/markup/snapshots/imagepicker-multi.snap.html
index f818c0bbb6..f53bb18405 100644
--- a/tests/markup/snapshots/imagepicker-multi.snap.html
+++ b/tests/markup/snapshots/imagepicker-multi.snap.html
@@ -1,35 +1,39 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="checkbox" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
-					</div>
-				</div>
-			</label>
-		</div>
-		<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="checkbox" value="item2">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="checkbox" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
+							</div>
 						</div>
+					</label>
+				</div>
+				<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="checkbox" value="item2">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+								</div>
+							</div>
+						</label>
 					</div>
-				</label>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-no-image-v2.snap.html b/tests/markup/snapshots/imagepicker-no-image-v2.snap.html
index 31beb3c9fa..18a0b425b0 100644
--- a/tests/markup/snapshots/imagepicker-no-image-v2.snap.html
+++ b/tests/markup/snapshots/imagepicker-no-image-v2.snap.html
@@ -1,45 +1,49 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
-						<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
-							<use xlink:href="#icon-noimage-48x48" class="">
-							</use>
-						</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
+								<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
+									<use xlink:href="#icon-noimage-48x48" class="">
+									</use>
+								</svg>
+							</div>
+						</div>
 					</div>
-				</div>
+				</label>
 			</div>
-		</label>
-	</div>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
-						<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
-							<use xlink:href="#icon-noimage-48x48" class="">
-							</use>
-						</svg>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
+								<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
+									<use xlink:href="#icon-noimage-48x48" class="">
+									</use>
+								</svg>
+							</div>
+						</div>
 					</div>
-				</div>
+				</label>
 			</div>
-		</label>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-no-image.snap.html b/tests/markup/snapshots/imagepicker-no-image.snap.html
index 31beb3c9fa..18a0b425b0 100644
--- a/tests/markup/snapshots/imagepicker-no-image.snap.html
+++ b/tests/markup/snapshots/imagepicker-no-image.snap.html
@@ -1,45 +1,49 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
-						<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
-							<use xlink:href="#icon-noimage-48x48" class="">
-							</use>
-						</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
+								<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
+									<use xlink:href="#icon-noimage-48x48" class="">
+									</use>
+								</svg>
+							</div>
+						</div>
 					</div>
-				</div>
+				</label>
 			</div>
-		</label>
-	</div>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
-						<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
-							<use xlink:href="#icon-noimage-48x48" class="">
-							</use>
-						</svg>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<div class="sd-imagepicker__no-image" style="height:150px; object-fit:contain; width:200px;">
+								<svg class="sd-imagepicker__no-image-svg sv-svg-icon" role="presentation" style="height:48px; width:48px;">
+									<use xlink:href="#icon-noimage-48x48" class="">
+									</use>
+								</svg>
+							</div>
+						</div>
 					</div>
-				</div>
+				</label>
 			</div>
-		</label>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-readonly.snap.html b/tests/markup/snapshots/imagepicker-readonly.snap.html
index 9601f3aa4d..853aa0d5e7 100644
--- a/tests/markup/snapshots/imagepicker-readonly.snap.html
+++ b/tests/markup/snapshots/imagepicker-readonly.snap.html
@@ -1,41 +1,45 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline sd-imagepicker__item--readonly">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" readonly="" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<img alt="item1" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
-					</div>
-					<span class="sd-imagepicker__text">
-						<span class="sv-string-viewer">item1</span>
-					</span>
-				</div>
-			</label>
-		</div>
-		<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline sd-imagepicker__item--readonly">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" readonly="" type="radio" value="item2">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item2" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline sd-imagepicker__item--readonly">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" readonly="" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<img alt="item1" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
+							</div>
+							<span class="sd-imagepicker__text">
+								<span class="sv-string-viewer">item1</span>
+							</span>
 						</div>
-						<span class="sd-imagepicker__text">
-							<span class="sv-string-viewer">item2</span>
-						</span>
+					</label>
+				</div>
+				<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline sd-imagepicker__item--readonly">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" readonly="" type="radio" value="item2">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item2" class="sd-imagepicker__image" height="150" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="object-fit:contain;" width="200">
+								</div>
+								<span class="sd-imagepicker__text">
+									<span class="sv-string-viewer">item2</span>
+								</span>
+							</div>
+						</label>
 					</div>
-				</label>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker-video.snap.html b/tests/markup/snapshots/imagepicker-video.snap.html
index 97532b0def..a41a9188a2 100644
--- a/tests/markup/snapshots/imagepicker-video.snap.html
+++ b/tests/markup/snapshots/imagepicker-video.snap.html
@@ -1,43 +1,47 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<video class="sd-imagepicker__image" controls="" height="150" src="#item1.mp4" style="object-fit:contain;" width="200">
-					</video>
-				</div>
-				<span class="sd-imagepicker__text">
-					<span class="sv-string-viewer">item1</span>
-				</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<video class="sd-imagepicker__image" controls="" height="150" src="#item1.mp4" style="object-fit:contain;" width="200">
+							</video>
+						</div>
+						<span class="sd-imagepicker__text">
+							<span class="sv-string-viewer">item1</span>
+						</span>
+					</div>
+				</label>
 			</div>
-		</label>
-	</div>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<video class="sd-imagepicker__image" controls="" height="150" src="#item2.mp4" style="object-fit:contain;" width="200">
-					</video>
-				</div>
-				<span class="sd-imagepicker__text">
-					<span class="sv-string-viewer">item2</span>
-				</span>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<video class="sd-imagepicker__image" controls="" height="150" src="#item2.mp4" style="object-fit:contain;" width="200">
+							</video>
+						</div>
+						<span class="sd-imagepicker__text">
+							<span class="sv-string-viewer">item2</span>
+						</span>
+					</div>
+				</label>
 			</div>
-		</label>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/imagepicker.snap.html b/tests/markup/snapshots/imagepicker.snap.html
index 19da5f67fc..8443e4c63f 100644
--- a/tests/markup/snapshots/imagepicker.snap.html
+++ b/tests/markup/snapshots/imagepicker.snap.html
@@ -1,35 +1,39 @@
-<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
-	<legend class="sv-hidden">question1</legend>
-	<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-		<label class="sd-imagepicker__label">
-			<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
-			<div class="sd-imagepicker__item-decorator">
-				<div class="sd-imagepicker__image-container">
-					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-							<use xlink:href="#icon-check-24x24" class="">
-							</use>
-						</svg>
-					</span>
-					<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
-					</div>
-				</div>
-			</label>
-		</div>
-		<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
-			<label class="sd-imagepicker__label">
-				<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
-				<div class="sd-imagepicker__item-decorator">
-					<div class="sd-imagepicker__image-container">
-						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
-							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-check-24x24" class="">
-								</use>
-							</svg>
-						</span>
-						<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset class="sd-imagepicker sd-imagepicker--responsive sd-selectbase" style="grid-auto-flow:column;">
+			<legend class="sv-hidden">question1</legend>
+			<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+				<label class="sd-imagepicker__label">
+					<input aria-invalid="false" aria-label="item1" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
+					<div class="sd-imagepicker__item-decorator">
+						<div class="sd-imagepicker__image-container">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+									<use xlink:href="#icon-check-24x24" class="">
+									</use>
+								</svg>
+							</span>
+							<img alt="item1" class="sd-imagepicker__image" height="150" src="#item1.jpg" style="object-fit:contain;" width="200">
+							</div>
 						</div>
+					</label>
+				</div>
+				<div class="sd-imagepicker__item sd-imagepicker__item--allowhover sd-imagepicker__item--inline">
+					<label class="sd-imagepicker__label">
+						<input aria-invalid="false" aria-label="item2" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
+						<div class="sd-imagepicker__item-decorator">
+							<div class="sd-imagepicker__image-container">
+								<span aria-hidden="true" class="sd-imagepicker__check-decorator">
+									<svg class="sd-imagepicker__check-icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-check-24x24" class="">
+										</use>
+									</svg>
+								</span>
+								<img alt="item2" class="sd-imagepicker__image" height="150" src="#item2.jpg" style="object-fit:contain;" width="200">
+								</div>
+							</div>
+						</label>
 					</div>
-				</label>
+				</fieldset>
 			</div>
-		</fieldset>
\ No newline at end of file
+		</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html b/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html
index 9da87abf83..6a74edbc54 100644
--- a/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html
+++ b/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html
@@ -1,31 +1,41 @@
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">2.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">2.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/layout-page-swnl-v2.snap.html b/tests/markup/snapshots/layout-page-swnl-v2.snap.html
index 6a078b87cb..e28f603fb9 100644
--- a/tests/markup/snapshots/layout-page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/layout-page-swnl-v2.snap.html
@@ -1,14 +1,24 @@
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-html">HTML1</div>
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-html">HTML1</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-html">HTML2</div>
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-html">HTML2</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/layout-panel-page-swnl-title-v2.snap.html b/tests/markup/snapshots/layout-panel-page-swnl-title-v2.snap.html
index 3bf542c02d..91e83d9e8b 100644
--- a/tests/markup/snapshots/layout-panel-page-swnl-title-v2.snap.html
+++ b/tests/markup/snapshots/layout-panel-page-swnl-title-v2.snap.html
@@ -1,33 +1,43 @@
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
-		<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
-			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element sd-element--nested sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
-						<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-							<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
-								<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-							</div>
-						</div>
-						<div class="sd-question__content sd-question__content--text" role="presentation">
-							<div class="sd-formbox sd-text">
-								<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
+			<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
+				<div class="sd-clearfix sd-row">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+						<div class="sd-element sd-element--nested sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
+							<div class="sd-question__container">
+								<div class="sd-question__header-and-content-container">
+									<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+										<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
+											<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+										</div>
+									</div>
+									<div class="sd-question__content sd-question__content--text" role="presentation">
+										<div class="sd-formbox sd-text">
+											<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+										</div>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/tests/markup/snapshots/layout-panel-page-swnl-v2.snap.html b/tests/markup/snapshots/layout-panel-page-swnl-v2.snap.html
index 713d726220..7c86b1dd30 100644
--- a/tests/markup/snapshots/layout-panel-page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/layout-panel-page-swnl-v2.snap.html
@@ -1,18 +1,28 @@
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-html">HTML1</div>
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-html">HTML1</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 0 50%; max-width:100%;">
-	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
-		<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
-			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
-						<div class="sd-element__content sd-question__content" role="presentation">
-							<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
+	<div style="flex:1 0 50%; max-width:100%;">
+		<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
+			<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
+				<div class="sd-clearfix sd-row">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+						<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+							<div class="sd-question__container">
+								<div class="sd-question__header-and-content-container">
+									<div class="sd-element__content sd-question__content" role="presentation">
+										<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
+									</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/martix-celltype-text-a11y.snap.html b/tests/markup/snapshots/martix-celltype-text-a11y.snap.html
index 4a7bfd43bb..1636037546 100644
--- a/tests/markup/snapshots/martix-celltype-text-a11y.snap.html
+++ b/tests/markup/snapshots/martix-celltype-text-a11y.snap.html
@@ -1,63 +1,67 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">Number of people</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Age 0-4</span>
-				</td>
-				<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Age 0-4, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row1cell1i" min="0" placeholder="" step="any" type="number">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Age 5-11</span>
-				</td>
-				<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Age 5-11, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row3cell1i" min="0" placeholder="" step="any" type="number">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row5">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Age 12-15</span>
-				</td>
-				<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Age 12-15, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row5cell1i" min="0" placeholder="" step="any" type="number">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row7">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Age 16+</span>
-				</td>
-				<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Age 16+, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row7cell1i" min="0" placeholder="" step="any" type="number">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row7" data-sv-drop-target-matrix-row="testid0row7" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">Number of people</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Age 0-4</span>
+						</td>
+						<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Age 0-4, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row1cell1i" min="0" placeholder="" step="any" type="number">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Age 5-11</span>
+						</td>
+						<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Age 5-11, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row3cell1i" min="0" placeholder="" step="any" type="number">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row5">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Age 12-15</span>
+						</td>
+						<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Age 12-15, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row5cell1i" min="0" placeholder="" step="any" type="number">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row7">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Age 16+</span>
+						</td>
+						<td class="sd-question--answered sd-table__cell" colspan="1" title="Number of people">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Age 16+, column Number of people" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row7cell1i" min="0" placeholder="" step="any" type="number">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-celltype-checkbox.snap.html b/tests/markup/snapshots/matrix-celltype-checkbox.snap.html
index 24210451e7..c64285864b 100644
--- a/tests/markup/snapshots/matrix-celltype-checkbox.snap.html
+++ b/tests/markup/snapshots/matrix-celltype-checkbox.snap.html
@@ -1,87 +1,91 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="checkbox" value="col_1">
-							<span class="sd-checkbox__decorator sd-item__decorator">
-								<svg class="sd-checkbox__svg sd-item__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header">
 								<span class="sv-string-viewer">col_1</span>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="checkbox" value="col_2">
-							<span class="sd-checkbox__decorator sd-item__decorator">
-								<svg class="sd-checkbox__svg sd-item__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
 								<span class="sv-string-viewer">col_2</span>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="checkbox" value="col_1">
-							<span class="sd-checkbox__decorator sd-item__decorator">
-								<svg class="sd-checkbox__svg sd-item__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
-								<span class="sv-string-viewer">col_1</span>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="checkbox" value="col_2">
-							<span class="sd-checkbox__decorator sd-item__decorator">
-								<svg class="sd-checkbox__svg sd-item__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
-								<span class="sv-string-viewer">col_2</span>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="checkbox" value="col_1">
+									<span class="sd-checkbox__decorator sd-item__decorator">
+										<svg class="sd-checkbox__svg sd-item__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_1</span>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="checkbox" value="col_2">
+									<span class="sd-checkbox__decorator sd-item__decorator">
+										<svg class="sd-checkbox__svg sd-item__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_2</span>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="checkbox" value="col_1">
+									<span class="sd-checkbox__decorator sd-item__decorator">
+										<svg class="sd-checkbox__svg sd-item__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_1</span>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-checkbox sd-checkbox--allowhover sd-item sd-matrix__label">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="checkbox" value="col_2">
+									<span class="sd-checkbox__decorator sd-item__decorator">
+										<svg class="sd-checkbox__svg sd-item__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_2</span>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-empty.snap.html b/tests/markup/snapshots/matrix-empty.snap.html
index 7127337d1a..37f188de8a 100644
--- a/tests/markup/snapshots/matrix-empty.snap.html
+++ b/tests/markup/snapshots/matrix-empty.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-			</tbody>
-		</table>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_2</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-mobile-v2.snap.html b/tests/markup/snapshots/matrix-mobile-v2.snap.html
index 7c16747b53..788964af33 100644
--- a/tests/markup/snapshots/matrix-mobile-v2.snap.html
+++ b/tests/markup/snapshots/matrix-mobile-v2.snap.html
@@ -1,87 +1,91 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header">
 								<span class="sv-string-viewer">col_1</span>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
 								<span class="sv-string-viewer">col_2</span>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
-								<span class="sv-string-viewer">col_1</span>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-							<span class="sd-matrix__responsive-title">
-								<span class="sv-string-viewer">col_2</span>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_1</span>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_2</span>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_1</span>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+									<span class="sd-matrix__responsive-title">
+										<span class="sv-string-viewer">col_2</span>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-modern.snap.html b/tests/markup/snapshots/matrix-modern.snap.html
index eda3e28d93..8bfce4b0fb 100644
--- a/tests/markup/snapshots/matrix-modern.snap.html
+++ b/tests/markup/snapshots/matrix-modern.snap.html
@@ -1,75 +1,79 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_2</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-v2-disabled.snap.html b/tests/markup/snapshots/matrix-v2-disabled.snap.html
index 16ccb07250..378445757d 100644
--- a/tests/markup/snapshots/matrix-v2-disabled.snap.html
+++ b/tests/markup/snapshots/matrix-v2-disabled.snap.html
@@ -1,75 +1,79 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-editor" contenteditable="true">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-editor" contenteditable="true">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row-readonly">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-editor" contenteditable="true">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row-readonly">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-editor" contenteditable="true">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-editor" contenteditable="true">col_1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-editor" contenteditable="true">col_2</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row-readonly">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-editor" contenteditable="true">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row-readonly">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-editor" contenteditable="true">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-v2-readonly.snap.html b/tests/markup/snapshots/matrix-v2-readonly.snap.html
index 0cb6a9d7b8..0505d9beed 100644
--- a/tests/markup/snapshots/matrix-v2-readonly.snap.html
+++ b/tests/markup/snapshots/matrix-v2-readonly.snap.html
@@ -1,75 +1,79 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row-readonly">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" readonly="" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" readonly="" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row-readonly">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" readonly="" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" readonly="" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_2</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row-readonly">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" readonly="" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" readonly="" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row-readonly">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" readonly="" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" readonly="" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-v2.snap.html b/tests/markup/snapshots/matrix-v2.snap.html
index eda3e28d93..8bfce4b0fb 100644
--- a/tests/markup/snapshots/matrix-v2.snap.html
+++ b/tests/markup/snapshots/matrix-v2.snap.html
@@ -1,75 +1,79 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
-						<span class="sv-string-viewer">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--header">
+								<span class="sv-string-viewer">col_2</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+								<span class="sv-string-viewer">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrix-widths.snap.html b/tests/markup/snapshots/matrix-widths.snap.html
index 00ecf88813..2041e79299 100644
--- a/tests/markup/snapshots/matrix-widths.snap.html
+++ b/tests/markup/snapshots/matrix-widths.snap.html
@@ -1,75 +1,79 @@
-<div class="sd-matrix sd-table-wrapper">
-	<fieldset role="radiogroup">
-		<legend class="sv-visuallyhidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
-			<thead role="presentation">
-				<tr>
-					<td>
-					</td>
-					<th class="sd-table__cell sd-table__cell--header" style="min-width:20px; width:20px;">
-						<span class="sv-string-viewer">col_1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--header" style="min-width:20px; width:20px;">
-						<span class="sv-string-viewer">col_2</span>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text" style="min-width:100px; width:100px;">
-						<span class="sv-string-viewer">row_1</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-				<tr class="sd-table__row">
-					<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text" style="min-width:100px; width:100px;">
-						<span class="sv-string-viewer">row_2</span>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
-						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
-							<span class="sd-item__decorator sd-radio__decorator">
-								<svg class="sd-item__svg sd-radio__svg">
-									<use xlink:href="#icon-radio-16x16" class="">
-									</use>
-								</svg>
-							</span>
-						</label>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-matrix sd-table-wrapper">
+			<fieldset role="radiogroup">
+				<legend class="sv-visuallyhidden">matrix</legend>
+				<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth" role="presentation">
+					<thead role="presentation">
+						<tr>
+							<td>
+							</td>
+							<th class="sd-table__cell sd-table__cell--header" style="min-width:20px; width:20px;">
+								<span class="sv-string-viewer">col_1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--header" style="min-width:20px; width:20px;">
+								<span class="sv-string-viewer">col_2</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text" style="min-width:100px; width:100px;">
+								<span class="sv-string-viewer">row_1</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+						<tr class="sd-table__row">
+							<td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text" style="min-width:100px; width:100px;">
+								<span class="sv-string-viewer">row_2</span>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+							<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+								<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+									<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+									<span class="sd-item__decorator sd-radio__decorator">
+										<svg class="sd-item__svg sd-radio__svg">
+											<use xlink:href="#icon-radio-16x16" class="">
+											</use>
+										</svg>
+									</span>
+								</label>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html b/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html
index dfc7ea4a68..dfc4c1f636 100644
--- a/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html
@@ -1,44 +1,48 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					<span>&nbsp;</span>
-					<span class="sd-question__required-text">*</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row1</span>
-				</td>
-				<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--error sd-text">
-							<input aria-describedby="testid0row0cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" class="sd-formbox__input" id="testid0row0cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row">
-				<td class="sd-table__cell sd-table__cell--empty sd-table__cell--error" colspan="1" title="">
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-bottom" colspan="1" title="">
-					<div class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0row0cell1_errors">
-						<div>
-							<span aria-hidden="true">
-							</span>
-							<span class="sd-error__item">
-								<span class="sv-string-viewer">Response required.</span>
-							</span>
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							<span>&nbsp;</span>
+							<span class="sd-question__required-text">*</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row1</span>
+						</td>
+						<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--error sd-text">
+									<input aria-describedby="testid0row0cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" class="sd-formbox__input" id="testid0row0cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row">
+						<td class="sd-table__cell sd-table__cell--empty sd-table__cell--error" colspan="1" title="">
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-bottom" colspan="1" title="">
+							<div class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0row0cell1_errors">
+								<div>
+									<span aria-hidden="true">
+									</span>
+									<span class="sd-error__item">
+										<span class="sv-string-viewer">Response required.</span>
+									</span>
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html b/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html
index d65f4dd465..f198aa83ac 100644
--- a/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html
@@ -1,44 +1,48 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					<span>&nbsp;</span>
-					<span class="sd-question__required-text">*</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row">
-				<td class="sd-table__cell sd-table__cell--empty sd-table__cell--error" colspan="1" title="">
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-					<div class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" id="testid0row1cell1_errors">
-						<div>
-							<span aria-hidden="true">
-							</span>
-							<span class="sd-error__item">
-								<span class="sv-string-viewer">Response required.</span>
-							</span>
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row1</span>
-				</td>
-				<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--error sd-text">
-							<input aria-describedby="testid0row1cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row1" data-sv-drop-target-matrix-row="testid0row1" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							<span>&nbsp;</span>
+							<span class="sd-question__required-text">*</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row">
+						<td class="sd-table__cell sd-table__cell--empty sd-table__cell--error" colspan="1" title="">
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+							<div class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" id="testid0row1cell1_errors">
+								<div>
+									<span aria-hidden="true">
+									</span>
+									<span class="sd-error__item">
+										<span class="sv-string-viewer">Response required.</span>
+									</span>
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row1</span>
+						</td>
+						<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--error sd-text">
+									<input aria-describedby="testid0row1cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-disabled.snap.html b/tests/markup/snapshots/matrixdropdown-disabled.snap.html
index 3be0085116..c4f40e2c57 100644
--- a/tests/markup/snapshots/matrixdropdown-disabled.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-disabled.snap.html
@@ -1,56 +1,60 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-editor" contenteditable="true">question1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-editor" contenteditable="true">question2</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-editor" contenteditable="true">Row 1</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row1cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row1cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-editor" contenteditable="true">Row 2</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row3cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row3cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-editor" contenteditable="true">question1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-editor" contenteditable="true">question2</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-editor" contenteditable="true">Row 1</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row1cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row1cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-editor" contenteditable="true">Row 2</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row3cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" disabled="" id="testid0row3cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-hidden-question-mobile.snap.html b/tests/markup/snapshots/matrixdropdown-hidden-question-mobile.snap.html
index aed153880f..717a144622 100644
--- a/tests/markup/snapshots/matrixdropdown-hidden-question-mobile.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-hidden-question-mobile.snap.html
@@ -1,64 +1,68 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row1</span>
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-				</td>
-				<td class="sd-question--answered sd-table__cell" colspan="1" title="col1">
-					<span class="sd-table__responsive-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					</span>
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row row1, column col1" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row0cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-				</td>
-				<td class="sd-question--answered sd-table__cell" colspan="1" title="col1">
-					<span class="sd-table__responsive-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					</span>
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row row1, column col1" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row0cell4i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row2</span>
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-				</td>
-				<td class="sd-table__cell" colspan="1" title="col1">
-					<span class="sd-table__responsive-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					</span>
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row row2, column col1" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row1" data-sv-drop-target-matrix-row="testid0row1" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row1</span>
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+						</td>
+						<td class="sd-question--answered sd-table__cell" colspan="1" title="col1">
+							<span class="sd-table__responsive-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							</span>
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row row1, column col1" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row0cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+						</td>
+						<td class="sd-question--answered sd-table__cell" colspan="1" title="col1">
+							<span class="sd-table__responsive-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							</span>
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row row1, column col1" aria-required="false" class="sd-formbox__input sd-formbox__input--value-changed" id="testid0row0cell4i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row2</span>
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+						</td>
+						<td class="sd-table__cell" colspan="1" title="col1">
+							<span class="sd-table__responsive-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							</span>
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row row2, column col1" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-readonly.snap.html b/tests/markup/snapshots/matrixdropdown-readonly.snap.html
index 76d69f1374..4a18010aff 100644
--- a/tests/markup/snapshots/matrixdropdown-readonly.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-readonly.snap.html
@@ -1,56 +1,60 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">question1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">question2</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Row 1</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell1i" readonly="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" readonly="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Row 2</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" id="testid0row3cell1i" readonly="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell2i" readonly="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">question1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">question2</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Row 1</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell1i" readonly="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" readonly="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Row 2</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" id="testid0row3cell1i" readonly="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell2i" readonly="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-vertical.snap.html b/tests/markup/snapshots/matrixdropdown-vertical.snap.html
index 791ac33ae3..18855db0b4 100644
--- a/tests/markup/snapshots/matrixdropdown-vertical.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-vertical.snap.html
@@ -1,56 +1,60 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
-				</td>
-				<th class="sd-table__cell sd-table__cell--header">
-					<span class="sv-string-viewer">Row 1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--header">
-					<span class="sv-string-viewer">Row 2</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row sd-table__row--expanded sd-table__row--has-panel">
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer sv-string-viewer--multiline">question1</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row sd-table__row--expanded sd-table__row--has-panel">
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer sv-string-viewer--multiline">question2</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
+						</td>
+						<th class="sd-table__cell sd-table__cell--header">
+							<span class="sv-string-viewer">Row 1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--header">
+							<span class="sv-string-viewer">Row 2</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row sd-table__row--expanded sd-table__row--has-panel">
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer sv-string-viewer--multiline">question1</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row sd-table__row--expanded sd-table__row--has-panel">
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer sv-string-viewer--multiline">question2</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown.snap.html b/tests/markup/snapshots/matrixdropdown.snap.html
index bcf616ac3b..f54d55ac12 100644
--- a/tests/markup/snapshots/matrixdropdown.snap.html
+++ b/tests/markup/snapshots/matrixdropdown.snap.html
@@ -1,56 +1,60 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">question1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">question2</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Row 1</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">Row 2</span>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" id="testid0row3cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell" colspan="1" title="question2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell2i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">question1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">question2</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Row 1</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question1" aria-required="false" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 1, column question2" aria-required="false" class="sd-formbox__input" id="testid0row1cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">Row 2</span>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question1" aria-required="false" class="sd-formbox__input" id="testid0row3cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell" colspan="1" title="question2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="row Row 2, column question2" aria-required="false" class="sd-formbox__input" id="testid0row3cell2i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdynamic-add-row-icon.snap.html b/tests/markup/snapshots/matrixdynamic-add-row-icon.snap.html
index 31b557b056..914fb5aac9 100644
--- a/tests/markup/snapshots/matrixdynamic-add-row-icon.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-add-row-icon.snap.html
@@ -1,79 +1,83 @@
-<div>
-	<div class="sd-table-wrapper">
-		<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
-			<thead>
-				<tr>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
-					</th>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
-					</td>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-formbox sd-text">
-								<input aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" class="sd-formbox__input" id="testid0row1cell0i" placeholder="" type="text">
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-matrixdynamic__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div>
+			<div class="sd-table-wrapper">
+				<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
+					<thead>
+						<tr>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
+							</th>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
+							</td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-formbox sd-text">
+										<input aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" class="sd-formbox__input" id="testid0row1cell0i" placeholder="" type="text">
+									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-formbox sd-text">
-								<input aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" class="sd-formbox__input" id="testid0row3cell0i" placeholder="" type="text">
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-formbox sd-text">
+										<input aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" class="sd-formbox__input" id="testid0row3cell0i" placeholder="" type="text">
+									</div>
 								</div>
-							</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="sd-matrixdynamic__footer">
+				<div class="sd-action-bar sd-action-bar--default-size">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+									<use xlink:href="#icon-#test" class="">
+									</use>
+									<title class="">Add Row</title>
+								</svg>
+								<span class="sd-action__title">Add Row</span>
+							</button>
 						</div>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
-	<div class="sd-matrixdynamic__footer">
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-							<use xlink:href="#icon-#test" class="">
-							</use>
-							<title class="">Add Row</title>
-						</svg>
-						<span class="sd-action__title">Add Row</span>
-					</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/matrixdynamic-default.snap.html b/tests/markup/snapshots/matrixdynamic-default.snap.html
index dbc99620b2..2d113aa67c 100644
--- a/tests/markup/snapshots/matrixdynamic-default.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-default.snap.html
@@ -1,56 +1,60 @@
-<div>
-	<div class="sd-table-wrapper">
-		<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
-			<thead>
-				<tr>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 2</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 3</span>
-					</th>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
-					</td>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell0i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-matrixdynamic__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div>
+			<div class="sd-table-wrapper">
+				<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
+					<thead>
+						<tr>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 2</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 3</span>
+							</th>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
+							</td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell0i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -60,42 +64,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 2">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell1i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 2">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell1i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -105,42 +109,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 3">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell2i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 3">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell2i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -150,59 +154,59 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
-								</div>
-							</div>
-						</div>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell0i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
 										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell0i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -212,42 +216,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 2">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell1i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 2">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell1i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -257,42 +261,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 3">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell2i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 3">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell2i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -302,35 +306,35 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
 								</div>
-							</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="sd-matrixdynamic__footer">
+				<div class="sd-action-bar sd-action-bar--default-size">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">Add Row</span>
+							</button>
 						</div>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
-	<div class="sd-matrixdynamic__footer">
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">Add Row</span>
-					</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html b/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html
index dbc99620b2..2d113aa67c 100644
--- a/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html
@@ -1,56 +1,60 @@
-<div>
-	<div class="sd-table-wrapper">
-		<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
-			<thead>
-				<tr>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 2</span>
-					</th>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 3</span>
-					</th>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
-					</td>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell0i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-matrixdynamic__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div>
+			<div class="sd-table-wrapper">
+				<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
+					<thead>
+						<tr>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 2</span>
+							</th>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 3</span>
+							</th>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
+							</td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell0i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -60,42 +64,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 2">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell1i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 2">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell1i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -105,42 +109,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 3">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell2i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 3">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row1cell2i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -150,59 +154,59 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
-								</div>
-							</div>
-						</div>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell0i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
 										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell0i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -212,42 +216,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 2">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell1i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 2">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell1i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 2" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -257,42 +261,42 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="Column 3">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell2i">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="Column 3">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0row3cell2i">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 3" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container" style="display:none;">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container" style="display:none;">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -302,35 +306,35 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
 								</div>
-							</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="sd-matrixdynamic__footer">
+				<div class="sd-action-bar sd-action-bar--default-size">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">Add Row</span>
+							</button>
 						</div>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
-	<div class="sd-matrixdynamic__footer">
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">Add Row</span>
-					</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/matrixdynamic-detail.snap.html b/tests/markup/snapshots/matrixdynamic-detail.snap.html
index cfbf49a6a8..b91de70043 100644
--- a/tests/markup/snapshots/matrixdynamic-detail.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-detail.snap.html
@@ -1,123 +1,131 @@
-<div>
-	<div class="sd-table-wrapper">
-		<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
-			<thead>
-				<tr>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
-					</td>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--html">
-						<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
-					</th>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
-					</td>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row--expanded sd-table__row--has-end-actions sd-table__row--has-panel" data-sv-drop-target-matrix-row="testid0row2">
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--show-detail" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item">
-								<div class="sd-action-bar__item-content">
-									<button aria-expanded="true" class="sd-action sd-action--brand sd-action--quaternary sd-action--small sd-table__cell--detail-button" role="button" tabindex="0" title="Hide Details" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-collapsedetails-16x16" class="">
-											</use>
-											<title class="">Hide Details</title>
-										</svg>
-									</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-matrixdynamic__content sd-question__content" data-sv-drop-target-matrix="testid0row4" data-sv-drop-target-matrix-row="testid0row4" role="presentation">
+		<div>
+			<div class="sd-table-wrapper">
+				<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
+					<thead>
+						<tr>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
+							</td>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--html">
+								<span class="sv-string-viewer sv-string-viewer--multiline">q1</span>
+							</th>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
+							</td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row--expanded sd-table__row--has-end-actions sd-table__row--has-panel" data-sv-drop-target-matrix-row="testid0row2">
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--show-detail" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button aria-expanded="true" class="sd-action sd-action--brand sd-action--quaternary sd-action--small sd-table__cell--detail-button" role="button" tabindex="0" title="Hide Details" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-collapsedetails-16x16" class="">
+													</use>
+													<title class="">Hide Details</title>
+												</svg>
+											</button>
+										</div>
+									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="q1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-element--nested sd-html sd-html--nested">test</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="q1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-element--nested sd-html sd-html--nested">test</div>
 								</div>
-							</div>
-						</div>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row--detail sd-table__row--has-panel" data-sv-drop-target-matrix-row="testid0row2">
-					<td colspan="1" title="">
-					</td>
-					<td class="sd-table__cell--detail-panel" colspan="1" title="">
-						<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0row2cell1detailPanel">
-							<div class="sd-element__content sd-panel__content" id="testid0row2cell1detailPanel_content" role="group">
-								<div class="sd-clearfix sd-row">
-									<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-										<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="detail-question" id="testid0row2cell1detailPanel_question0">
-											<div class="sd-element__content sd-question__content" role="presentation">
-												<div class="sd-element--nested sd-html sd-html--nested">test</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row--detail sd-table__row--has-panel" data-sv-drop-target-matrix-row="testid0row2">
+							<td colspan="1" title="">
+							</td>
+							<td class="sd-table__cell--detail-panel" colspan="1" title="">
+								<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0row2cell1detailPanel">
+									<div class="sd-element__content sd-panel__content" id="testid0row2cell1detailPanel_content" role="group">
+										<div class="sd-clearfix sd-row">
+											<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+												<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="detail-question" id="testid0row2cell1detailPanel_question0">
+													<div class="sd-question__container">
+														<div class="sd-question__header-and-content-container">
+															<div class="sd-element__content sd-question__content" role="presentation">
+																<div class="sd-element--nested sd-html sd-html--nested">test</div>
+															</div>
+														</div>
+													</div>
+												</div>
 											</div>
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td colspan="1" title="">
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row--has-end-actions sd-table__row--has-panel" data-sv-drop-target-matrix-row="testid0row4">
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--show-detail" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item">
-								<div class="sd-action-bar__item-content">
-									<button aria-expanded="false" class="sd-action sd-action--brand sd-action--quaternary sd-action--small sd-table__cell--detail-button" role="button" tabindex="0" title="Show Details" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-expanddetails-16x16" class="">
-											</use>
-											<title class="">Show Details</title>
-										</svg>
-									</button>
+							</td>
+							<td colspan="1" title="">
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row--has-end-actions sd-table__row--has-panel" data-sv-drop-target-matrix-row="testid0row4">
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--show-detail" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button aria-expanded="false" class="sd-action sd-action--brand sd-action--quaternary sd-action--small sd-table__cell--detail-button" role="button" tabindex="0" title="Show Details" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-expanddetails-16x16" class="">
+													</use>
+													<title class="">Show Details</title>
+												</svg>
+											</button>
+										</div>
+									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell" colspan="1" title="q1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-element--nested sd-html sd-html--nested">test</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+							</td>
+							<td class="sd-table__cell" colspan="1" title="q1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-element--nested sd-html sd-html--nested">test</div>
 								</div>
-							</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="sd-matrixdynamic__footer">
+				<div class="sd-action-bar sd-action-bar--default-size">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">Add Row</span>
+							</button>
 						</div>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
-	<div class="sd-matrixdynamic__footer">
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">Add Row</span>
-					</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html
index a2b96a838d..32c7cb2eee 100644
--- a/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html
@@ -1,96 +1,100 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--radiogroup">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					<span>&nbsp;</span>
-					<span class="sd-question__required-text">*</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--checkbox sd-table__cell--column-title sd-table__cell--header">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col2</span>
-					<span>&nbsp;</span>
-					<span class="sd-question__required-text">*</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row1</span>
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-				</td>
-				<td class="sd-table__cell" colspan="1" title="col1">
-					<span class="sd-table__responsive-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-						<span>&nbsp;</span>
-						<span class="sd-question__required-text">*</span>
-					</span>
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<fieldset aria-invalid="false" aria-label="row row1, column col1" aria-required="true" class="sd-selectbase sd-selectbase--mobile sd-selectbase--row" role="radiogroup">
-							<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-								<label class="sd-selectbase__label">
-									<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0row0cell2i_0" name="col1_testid0row0cell2" type="radio" value="Item 1">
-									<span class="sd-item__decorator sd-radio__decorator">
-										<svg class="sd-item__svg sd-radio__svg">
-											<use xlink:href="#icon-radio-16x16" class="">
-											</use>
-										</svg>
-									</span>
-									<span class="sd-item__control-label">
-										<span class="sv-string-viewer">Item 1</span>
-									</span>
-								</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row0" data-sv-drop-target-matrix-row="testid0row0" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--radiogroup">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							<span>&nbsp;</span>
+							<span class="sd-question__required-text">*</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--checkbox sd-table__cell--column-title sd-table__cell--header">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col2</span>
+							<span>&nbsp;</span>
+							<span class="sd-question__required-text">*</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row1</span>
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+						</td>
+						<td class="sd-table__cell" colspan="1" title="col1">
+							<span class="sd-table__responsive-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+								<span>&nbsp;</span>
+								<span class="sd-question__required-text">*</span>
+							</span>
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<fieldset aria-invalid="false" aria-label="row row1, column col1" aria-required="true" class="sd-selectbase sd-selectbase--mobile sd-selectbase--row" role="radiogroup">
+									<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+										<label class="sd-selectbase__label">
+											<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0row0cell2i_0" name="col1_testid0row0cell2" type="radio" value="Item 1">
+											<span class="sd-item__decorator sd-radio__decorator">
+												<svg class="sd-item__svg sd-radio__svg">
+													<use xlink:href="#icon-radio-16x16" class="">
+													</use>
+												</svg>
+											</span>
+											<span class="sd-item__control-label">
+												<span class="sv-string-viewer">Item 1</span>
+											</span>
+										</label>
+									</div>
+								</fieldset>
 							</div>
-						</fieldset>
-					</div>
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-				</td>
-				<td class="sd-table__cell" colspan="1" title="col2">
-					<span class="sd-table__responsive-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">col2</span>
-						<span>&nbsp;</span>
-						<span class="sd-question__required-text">*</span>
-					</span>
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<fieldset aria-invalid="false" aria-label="row row1, column col2" class="sd-selectbase sd-selectbase--mobile sd-selectbase--row" role="group">
-							<legend class="sv-hidden">row row1, column col2</legend>
-							<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-								<label class="sd-selectbase__label">
-									<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row0cell4i_0" name="col2Item 1" required="" type="checkbox" value="Item 1">
-									<span class="sd-checkbox__decorator sd-item__decorator">
-										<svg class="sd-checkbox__svg sd-item__svg">
-											<use xlink:href="#icon-check-16x16" class="">
-											</use>
-										</svg>
-									</span>
-									<span class="sd-item__control-label">
-										<span class="sv-string-viewer">Item 1</span>
-									</span>
-								</label>
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+						</td>
+						<td class="sd-table__cell" colspan="1" title="col2">
+							<span class="sd-table__responsive-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">col2</span>
+								<span>&nbsp;</span>
+								<span class="sd-question__required-text">*</span>
+							</span>
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<fieldset aria-invalid="false" aria-label="row row1, column col2" class="sd-selectbase sd-selectbase--mobile sd-selectbase--row" role="group">
+									<legend class="sv-hidden">row row1, column col2</legend>
+									<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+										<label class="sd-selectbase__label">
+											<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row0cell4i_0" name="col2Item 1" required="" type="checkbox" value="Item 1">
+											<span class="sd-checkbox__decorator sd-item__decorator">
+												<svg class="sd-checkbox__svg sd-item__svg">
+													<use xlink:href="#icon-check-16x16" class="">
+													</use>
+												</svg>
+											</span>
+											<span class="sd-item__control-label">
+												<span class="sv-string-viewer">Item 1</span>
+											</span>
+										</label>
+									</div>
+									<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+										<label class="sd-selectbase__label">
+											<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row0cell4i_1" name="col2Item 2" required="" type="checkbox" value="Item 2">
+											<span class="sd-checkbox__decorator sd-item__decorator">
+												<svg class="sd-checkbox__svg sd-item__svg">
+													<use xlink:href="#icon-check-16x16" class="">
+													</use>
+												</svg>
+											</span>
+											<span class="sd-item__control-label">
+												<span class="sv-string-viewer">Item 2</span>
+											</span>
+										</label>
+									</div>
+								</fieldset>
 							</div>
-							<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-								<label class="sd-selectbase__label">
-									<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row0cell4i_1" name="col2Item 2" required="" type="checkbox" value="Item 2">
-									<span class="sd-checkbox__decorator sd-item__decorator">
-										<svg class="sd-checkbox__svg sd-item__svg">
-											<use xlink:href="#icon-check-16x16" class="">
-											</use>
-										</svg>
-									</span>
-									<span class="sd-item__control-label">
-										<span class="sv-string-viewer">Item 2</span>
-									</span>
-								</label>
-							</div>
-						</fieldset>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns.snap.html b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns.snap.html
index 6b69758c98..d9ad3383f8 100644
--- a/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns.snap.html
@@ -1,71 +1,75 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header">
-					<span class="sv-string-viewer">Item 1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header">
-					<span class="sv-string-viewer">Item 1</span>
-				</th>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header">
-					<span class="sv-string-viewer">Item 2</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row1</span>
-				</td>
-				<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-							<label class="sd-selectbase__label">
-								<input aria-label="row row1, column col1" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0row1cell1i_0" name="col1_testid0row1cell1" type="radio" value="Item 1">
-								<span class="sd-item__decorator sd-radio__decorator">
-									<svg class="sd-item__svg sd-radio__svg">
-										<use xlink:href="#icon-radio-16x16" class="">
-										</use>
-									</svg>
-								</span>
-							</label>
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-							<label class="sd-selectbase__label">
-								<input aria-label="row row1, column col2" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_0" name="col2Item 1" required="" type="checkbox" value="Item 1">
-								<span class="sd-checkbox__decorator sd-item__decorator">
-									<svg class="sd-checkbox__svg sd-item__svg">
-										<use xlink:href="#icon-check-16x16" class="">
-										</use>
-									</svg>
-								</span>
-							</label>
-						</div>
-					</div>
-				</td>
-				<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 2">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-							<label class="sd-selectbase__label">
-								<input aria-label="row row1, column col2" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_1" name="col2Item 2" required="" type="checkbox" value="Item 2">
-								<span class="sd-checkbox__decorator sd-item__decorator">
-									<svg class="sd-checkbox__svg sd-item__svg">
-										<use xlink:href="#icon-check-16x16" class="">
-										</use>
-									</svg>
-								</span>
-							</label>
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row1" data-sv-drop-target-matrix-row="testid0row1" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header">
+							<span class="sv-string-viewer">Item 1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header">
+							<span class="sv-string-viewer">Item 1</span>
+						</th>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header">
+							<span class="sv-string-viewer">Item 2</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row1</span>
+						</td>
+						<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+									<label class="sd-selectbase__label">
+										<input aria-label="row row1, column col1" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0row1cell1i_0" name="col1_testid0row1cell1" type="radio" value="Item 1">
+										<span class="sd-item__decorator sd-radio__decorator">
+											<svg class="sd-item__svg sd-radio__svg">
+												<use xlink:href="#icon-radio-16x16" class="">
+												</use>
+											</svg>
+										</span>
+									</label>
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+									<label class="sd-selectbase__label">
+										<input aria-label="row row1, column col2" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_0" name="col2Item 1" required="" type="checkbox" value="Item 1">
+										<span class="sd-checkbox__decorator sd-item__decorator">
+											<svg class="sd-checkbox__svg sd-item__svg">
+												<use xlink:href="#icon-check-16x16" class="">
+												</use>
+											</svg>
+										</span>
+									</label>
+								</div>
+							</div>
+						</td>
+						<td class="sd-table__cell sd-table__cell--item" colspan="1" title="Item 2">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+									<label class="sd-selectbase__label">
+										<input aria-label="row row1, column col2" class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_1" name="col2Item 2" required="" type="checkbox" value="Item 2">
+										<span class="sd-checkbox__decorator sd-item__decorator">
+											<svg class="sd-checkbox__svg sd-item__svg">
+												<use xlink:href="#icon-check-16x16" class="">
+												</use>
+											</svg>
+										</span>
+									</label>
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdynamic-totals.snap.html b/tests/markup/snapshots/matrixdynamic-totals.snap.html
index f951609de6..77db981662 100644
--- a/tests/markup/snapshots/matrixdynamic-totals.snap.html
+++ b/tests/markup/snapshots/matrixdynamic-totals.snap.html
@@ -1,50 +1,54 @@
-<div>
-	<div class="sd-table-wrapper">
-		<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
-			<thead>
-				<tr>
-					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
-					</th>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
-					</td>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
-										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-matrixdynamic__content sd-question__content" data-sv-drop-target-matrix="testid0row3" data-sv-drop-target-matrix-row="testid0row3" role="presentation">
+		<div>
+			<div class="sd-table-wrapper">
+				<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
+					<thead>
+						<tr>
+							<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Column 1</span>
+							</th>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header">
+							</td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row1">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -54,59 +58,59 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
-								</div>
-							</div>
-						</div>
-					</td>
-				</tr>
-				<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
-					<td class="sd-table__cell" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-							<div class="sd-selectbase">
-								<div class="sv-dropdown_select-wrapper">
-									<div class="sd-dropdown sd-dropdown--empty sd-formbox">
-										<div class="sd-dropdown__input sd-formbox__input">
-											<div class="sd-dropdown__input-prefix-wrapper">
-												<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
-											</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
 										</div>
-										<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-											<div class="sd-action-bar__item sd-editor-chevron-button">
-												<div class="sd-action-bar__item-content">
-													<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-														<svg class="sd-action__icon sv-svg-icon" role="presentation">
-															<use xlink:href="#icon-chevrondown-24x24" class="">
-															</use>
-															<title class="">Select</title>
-														</svg>
-													</button>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr class="sd-table__row sd-table__row--has-end-actions" data-sv-drop-target-matrix-row="testid0row3">
+							<td class="sd-table__cell" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+									<div class="sd-selectbase">
+										<div class="sv-dropdown_select-wrapper">
+											<div class="sd-dropdown sd-dropdown--empty sd-formbox">
+												<div class="sd-dropdown__input sd-formbox__input">
+													<div class="sd-dropdown__input-prefix-wrapper">
+														<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
+													</div>
+												</div>
+												<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+													<div class="sd-action-bar__item sd-editor-chevron-button">
+														<div class="sd-action-bar__item-content">
+															<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+																<svg class="sd-action__icon sv-svg-icon" role="presentation">
+																	<use xlink:href="#icon-chevrondown-24x24" class="">
+																	</use>
+																	<title class="">Select</title>
+																</svg>
+															</button>
+														</div>
+													</div>
 												</div>
 											</div>
-										</div>
-									</div>
-									<div>
-										<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-											<div class="sv-popup__container">
-												<div class="sv-popup__body-content">
-													<div class="sv-popup__scrolling-content">
-														<div class="sv-popup__content">
-															<div class="sd-selectlist__container">
-																<div class="sd-selectlist__empty-container">
-																	<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											<div>
+												<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+													<div class="sv-popup__container">
+														<div class="sv-popup__body-content">
+															<div class="sv-popup__scrolling-content">
+																<div class="sv-popup__content">
+																	<div class="sd-selectlist__container">
+																		<div class="sd-selectlist__empty-container">
+																			<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+																		</div>
+																	</div>
 																</div>
 															</div>
 														</div>
@@ -116,46 +120,46 @@
 										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
-						<div class="sd-action-bar sd-action-bar--default-size">
-							<div class="sd-action-bar__item sv-action--remove-row">
-								<div class="sd-action-bar__item-content">
-									<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg class="sd-action__icon sv-svg-icon" role="presentation">
-											<use xlink:href="#icon-delete-24x24" class="">
-											</use>
-											<title class="">Remove</title>
-										</svg>
-									</button>
+							</td>
+							<td class="sd-table__cell sd-table__cell--actions sd-table__cell-action--remove-row" colspan="1" title="">
+								<div class="sd-action-bar sd-action-bar--default-size">
+									<div class="sd-action-bar__item sv-action--remove-row">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--negative sd-action--quaternary sd-action--small sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
+												<svg class="sd-action__icon sv-svg-icon" role="presentation">
+													<use xlink:href="#icon-delete-24x24" class="">
+													</use>
+													<title class="">Remove</title>
+												</svg>
+											</button>
+										</div>
+									</div>
 								</div>
-							</div>
-						</div>
-					</td>
-				</tr>
-			</tbody>
-			<tfoot>
-				<tr>
-					<td class="sd-question--answered sd-table__cell sd-table__cell--footer" colspan="1" title="Column 1">
-						<div class="sd-matrix__question-wrapper sd-table__question-wrapper sd-table__question-wrapper--auto sd-table__question-wrapper--expression">
-							<div aria-label="Count: 0" aria-live="polite" class="sd-expression">Count: 0</div>
+							</td>
+						</tr>
+					</tbody>
+					<tfoot>
+						<tr>
+							<td class="sd-question--answered sd-table__cell sd-table__cell--footer" colspan="1" title="Column 1">
+								<div class="sd-matrix__question-wrapper sd-table__question-wrapper sd-table__question-wrapper--auto sd-table__question-wrapper--expression">
+									<div aria-label="Count: 0" aria-live="polite" class="sd-expression">Count: 0</div>
+								</div>
+							</td>
+							<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header" colspan="1" title="">
+							</td>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+			<div class="sd-matrixdynamic__footer">
+				<div class="sd-action-bar sd-action-bar--default-size">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">Add Row</span>
+							</button>
 						</div>
-					</td>
-					<td class="sd-table__cell sd-table__cell--action sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header" colspan="1" title="">
-					</td>
-				</tr>
-			</tfoot>
-		</table>
-	</div>
-	<div class="sd-matrixdynamic__footer">
-		<div class="sd-action-bar sd-action-bar--default-size">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-matrixdynamic__add-btn sd-matrixdynamic__btn" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">Add Row</span>
-					</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/multipletext-disabled.snap.html b/tests/markup/snapshots/multipletext-disabled.snap.html
index 0a1b7ecf2c..0883cb522f 100644
--- a/tests/markup/snapshots/multipletext-disabled.snap.html
+++ b/tests/markup/snapshots/multipletext-disabled.snap.html
@@ -1,56 +1,60 @@
-<table class="sd-multipletext">
-	<tbody>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-editor" contenteditable="true">Text 1</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 1" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-editor" contenteditable="true">Text 2</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 2" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-editor" contenteditable="true">Text 3</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 3" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-editor" contenteditable="true">Text 4</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 4" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--multipletext" role="presentation">
+		<table class="sd-multipletext">
+			<tbody>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-editor" contenteditable="true">Text 1</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 1" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-editor" contenteditable="true">Text 2</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 2" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-editor" contenteditable="true">Text 3</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 3" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-editor" contenteditable="true">Text 4</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 4" aria-required="false" class="sd-formbox__input" disabled="" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/multipletext-error-bottom-v2.snap.html b/tests/markup/snapshots/multipletext-error-bottom-v2.snap.html
index e4a5d293e5..a52949800e 100644
--- a/tests/markup/snapshots/multipletext-error-bottom-v2.snap.html
+++ b/tests/markup/snapshots/multipletext-error-bottom-v2.snap.html
@@ -1,33 +1,37 @@
-<table class="sd-multipletext">
-	<tbody>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--error sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
-						<span>&nbsp;</span>
-						<span aria-hidden="true" class="sd-question__required-text">*</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--error sd-text">
-							<input aria-invalid="true" aria-label="Text 1" aria-required="true" class="sd-formbox__input" placeholder="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--multipletext" role="presentation">
+		<table class="sd-multipletext">
+			<tbody>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-formbox--error sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
+								<span>&nbsp;</span>
+								<span aria-hidden="true" class="sd-question__required-text">*</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-formbox--error sd-text">
+									<input aria-invalid="true" aria-label="Text 1" aria-required="true" class="sd-formbox__input" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell sd-multipletext__cell--error sd-multipletext__cell--error-bottom">
+						<div class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question">
+							<div>
+								<span aria-hidden="true">
+								</span>
+								<span class="sd-error__item">
+									<span class="sv-string-viewer">Response required.</span>
+								</span>
+							</div>
 						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell sd-multipletext__cell--error sd-multipletext__cell--error-bottom">
-				<div class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question">
-					<div>
-						<span aria-hidden="true">
-						</span>
-						<span class="sd-error__item">
-							<span class="sv-string-viewer">Response required.</span>
-						</span>
-					</div>
-				</div>
-			</td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/multipletext-error-top-v2.snap.html b/tests/markup/snapshots/multipletext-error-top-v2.snap.html
index ab34fd31f3..5b0fac380d 100644
--- a/tests/markup/snapshots/multipletext-error-top-v2.snap.html
+++ b/tests/markup/snapshots/multipletext-error-top-v2.snap.html
@@ -1,33 +1,37 @@
-<table class="sd-multipletext">
-	<tbody>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell sd-multipletext__cell--error sd-multipletext__cell--error-top">
-				<div class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question">
-					<div>
-						<span aria-hidden="true">
-						</span>
-						<span class="sd-error__item">
-							<span class="sv-string-viewer">Response required.</span>
-						</span>
-					</div>
-				</div>
-			</td>
-		</tr>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--error sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
-						<span>&nbsp;</span>
-						<span aria-hidden="true" class="sd-question__required-text">*</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--error sd-text">
-							<input aria-invalid="true" aria-label="Text 1" aria-required="true" class="sd-formbox__input" placeholder="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--multipletext" role="presentation">
+		<table class="sd-multipletext">
+			<tbody>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell sd-multipletext__cell--error sd-multipletext__cell--error-top">
+						<div class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question">
+							<div>
+								<span aria-hidden="true">
+								</span>
+								<span class="sd-error__item">
+									<span class="sv-string-viewer">Response required.</span>
+								</span>
+							</div>
 						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+					</td>
+				</tr>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-formbox--error sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
+								<span>&nbsp;</span>
+								<span aria-hidden="true" class="sd-question__required-text">*</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-formbox--error sd-text">
+									<input aria-invalid="true" aria-label="Text 1" aria-required="true" class="sd-formbox__input" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/multipletext-readonly.snap.html b/tests/markup/snapshots/multipletext-readonly.snap.html
index 329c14a261..2c5218e97b 100644
--- a/tests/markup/snapshots/multipletext-readonly.snap.html
+++ b/tests/markup/snapshots/multipletext-readonly.snap.html
@@ -1,56 +1,60 @@
-<table class="sd-multipletext">
-	<tbody>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="Text 1" aria-required="false" class="sd-formbox__input" readonly="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 2</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="Text 2" aria-required="false" class="sd-formbox__input" readonly="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 3</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="Text 3" aria-required="false" class="sd-formbox__input" readonly="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 4</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--readonly sd-text">
-							<input aria-invalid="false" aria-label="Text 4" aria-required="false" class="sd-formbox__input" readonly="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--multipletext" role="presentation">
+		<table class="sd-multipletext">
+			<tbody>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="Text 1" aria-required="false" class="sd-formbox__input" readonly="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 2</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="Text 2" aria-required="false" class="sd-formbox__input" readonly="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 3</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="Text 3" aria-required="false" class="sd-formbox__input" readonly="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-formbox--readonly sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 4</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-formbox--readonly sd-text">
+									<input aria-invalid="false" aria-label="Text 4" aria-required="false" class="sd-formbox__input" readonly="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/multipletext.snap.html b/tests/markup/snapshots/multipletext.snap.html
index 63b29a3892..f3cc581bdf 100644
--- a/tests/markup/snapshots/multipletext.snap.html
+++ b/tests/markup/snapshots/multipletext.snap.html
@@ -1,56 +1,60 @@
-<table class="sd-multipletext">
-	<tbody>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 1" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 2</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 2" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 3</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 3" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 4</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-text">
-							<input aria-invalid="false" aria-label="Text 4" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
-						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--multipletext" role="presentation">
+		<table class="sd-multipletext">
+			<tbody>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 1" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 2</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 2" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 3</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 3" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+					<td class="sd-multipletext__cell">
+						<label class="sd-formbox sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
+							<span class="sd-formbox__label sd-multipletext__item-title">
+								<span class="sv-string-viewer sv-string-viewer--multiline">Text 4</span>
+							</span>
+							<div class="sd-multipletext__item">
+								<div class="sd-formbox sd-text">
+									<input aria-invalid="false" aria-label="Text 4" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+								</div>
+							</div>
+						</label>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/page-questionTitleWidth.snap.html b/tests/markup/snapshots/page-questionTitleWidth.snap.html
index dfa3168a00..f46707c51e 100644
--- a/tests/markup/snapshots/page-questionTitleWidth.snap.html
+++ b/tests/markup/snapshots/page-questionTitleWidth.snap.html
@@ -1,15 +1,21 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--left sd-row__question sd-row__question--small" data-name="name" id="testid0">
-		<div class="sd-element__header sd-question__header sd-question__header--location--left" style="width:500px;">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Employee name:</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--left sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--left sd-row__question sd-row__question--small" data-name="name" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-question__header sd-question__header--location--left" style="width:500px;">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Employee name:</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--left sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/page-swnl-title-v2.snap.html b/tests/markup/snapshots/page-swnl-title-v2.snap.html
index b1f446c743..359bcc699f 100644
--- a/tests/markup/snapshots/page-swnl-title-v2.snap.html
+++ b/tests/markup/snapshots/page-swnl-title-v2.snap.html
@@ -1,31 +1,41 @@
-<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">2.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+	<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">2.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/page-swnl-v2.snap.html b/tests/markup/snapshots/page-swnl-v2.snap.html
index 20a6a3ea0c..7f603e30f9 100644
--- a/tests/markup/snapshots/page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/page-swnl-v2.snap.html
@@ -1,14 +1,24 @@
-<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-html">HTML1</div>
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-html">HTML1</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-html">HTML2</div>
+	<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-html">HTML2</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/page-title-v2.snap.html b/tests/markup/snapshots/page-title-v2.snap.html
index 779ad6c4b2..b9bf8662a9 100644
--- a/tests/markup/snapshots/page-title-v2.snap.html
+++ b/tests/markup/snapshots/page-title-v2.snap.html
@@ -1,15 +1,21 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html b/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html
index 9822c1239e..1cfee3df34 100644
--- a/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html
+++ b/tests/markup/snapshots/panel-page-swnl-title-v2.snap.html
@@ -1,33 +1,43 @@
-<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 1 50%; max-width:100%; min-width:auto;">
-	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
-		<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
-			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element sd-element--nested sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
-						<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-							<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
-								<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-							</div>
-						</div>
-						<div class="sd-question__content sd-question__content--text" role="presentation">
-							<div class="sd-formbox sd-text">
-								<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+	<div style="flex:1 1 50%; max-width:100%; min-width:auto;">
+		<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
+			<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
+				<div class="sd-clearfix sd-row">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+						<div class="sd-element sd-element--nested sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid1">
+							<div class="sd-question__container">
+								<div class="sd-question__header-and-content-container">
+									<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+										<div class="sd-element__title sd-question__title sd-title" id="testid1_ariaTitle">
+											<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+										</div>
+									</div>
+									<div class="sd-question__content sd-question__content--text" role="presentation">
+										<div class="sd-formbox sd-text">
+											<input aria-invalid="false" aria-labelledby="testid1_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid1i" placeholder="" type="text">
+										</div>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/tests/markup/snapshots/panel-page-swnl-v2.snap.html b/tests/markup/snapshots/panel-page-swnl-v2.snap.html
index 716bc51aa4..c855a1ee07 100644
--- a/tests/markup/snapshots/panel-page-swnl-v2.snap.html
+++ b/tests/markup/snapshots/panel-page-swnl-v2.snap.html
@@ -1,18 +1,28 @@
-<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-html">HTML1</div>
+<div class="sd-clearfix sd-page__row sd-row sd-row--multiple">
+	<div style="flex:1 1 50%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-question sd-question--html sd-row__question" data-name="question0" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-html">HTML1</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
-</div>
-<div style="flex:1 1 50%; max-width:100%; min-width:auto;">
-	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
-		<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
-			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
-						<div class="sd-element__content sd-question__content" role="presentation">
-							<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
+	<div style="flex:1 1 50%; max-width:100%; min-width:auto;">
+		<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
+			<div aria-label="name" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
+				<div class="sd-clearfix sd-row">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+						<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
+							<div class="sd-question__container">
+								<div class="sd-question__header-and-content-container">
+									<div class="sd-element__content sd-question__content" role="presentation">
+										<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
+									</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/panel-question-headers.snap.html b/tests/markup/snapshots/panel-question-headers.snap.html
index f022d0d171..fb0bbf762e 100644
--- a/tests/markup/snapshots/panel-question-headers.snap.html
+++ b/tests/markup/snapshots/panel-question-headers.snap.html
@@ -1,28 +1,34 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
-	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
-		<div class="sd-element__header sd-element__header--location-top sd-panel__header">
-			<div class="sd-element__title sd-panel__title sd-title" id="testidp0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">panel_title</span>
-			</div>
-			<div class="sd-description sd-panel__description">
-				<span class="sv-string-viewer sv-string-viewer--multiline">panel_description</span>
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
+		<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
+			<div class="sd-element__header sd-element__header--location-top sd-panel__header">
+				<div class="sd-element__title sd-panel__title sd-title" id="testidp0_ariaTitle">
+					<span class="sv-string-viewer sv-string-viewer--multiline">panel_title</span>
+				</div>
+				<div class="sd-description sd-panel__description">
+					<span class="sv-string-viewer sv-string-viewer--multiline">panel_description</span>
+				</div>
 			</div>
-		</div>
-		<div aria-labelledby="testidp0_ariaTitle" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
-			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element sd-element--nested sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid0">
-						<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-							<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-								<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-							</div>
-							<div class="sd-description sd-question__description" id="testid0_ariaDescription">
-								<span class="sv-string-viewer sv-string-viewer--multiline">Question description</span>
-							</div>
-						</div>
-						<div class="sd-question__content sd-question__content--text" role="presentation">
-							<div class="sd-formbox sd-text">
-								<input aria-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+			<div aria-labelledby="testidp0_ariaTitle" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
+				<div class="sd-clearfix sd-row">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+						<div class="sd-element sd-element--nested sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="question1" id="testid0">
+							<div class="sd-question__container">
+								<div class="sd-question__header-and-content-container">
+									<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+										<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+											<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+										</div>
+										<div class="sd-description sd-question__description" id="testid0_ariaDescription">
+											<span class="sv-string-viewer sv-string-viewer--multiline">Question description</span>
+										</div>
+									</div>
+									<div class="sd-question__content sd-question__content--text" role="presentation">
+										<div class="sd-formbox sd-text">
+											<input aria-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+										</div>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/tests/markup/snapshots/panel-required-header.snap.html b/tests/markup/snapshots/panel-required-header.snap.html
index c025328a36..1358ca6b6e 100644
--- a/tests/markup/snapshots/panel-required-header.snap.html
+++ b/tests/markup/snapshots/panel-required-header.snap.html
@@ -1,19 +1,25 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
-	<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
-		<div class="sd-element__header sd-element__header--location-top sd-panel__header">
-			<div class="sd-element__title sd-panel__title sd-title" id="testidp0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">panel_title</span>
-				<span>&nbsp;</span>
-				<span aria-hidden="true" class="sd-panel__required-text">*</span>
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
+		<div class="sd-element sd-element--complex sd-element--with-frame sd-panel sd-row__panel" id="testidp0">
+			<div class="sd-element__header sd-element__header--location-top sd-panel__header">
+				<div class="sd-element__title sd-panel__title sd-title" id="testidp0_ariaTitle">
+					<span class="sv-string-viewer sv-string-viewer--multiline">panel_title</span>
+					<span>&nbsp;</span>
+					<span aria-hidden="true" class="sd-panel__required-text">*</span>
+				</div>
 			</div>
-		</div>
-		<div aria-labelledby="testidp0_ariaTitle" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
-			<div class="sd-clearfix sd-row">
-				<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-					<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question1" id="testid0">
-						<div class="sd-question__content sd-question__content--text" role="presentation">
-							<div class="sd-formbox sd-text">
-								<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+			<div aria-labelledby="testidp0_ariaTitle" class="sd-element__content sd-panel__content" id="testidp0_content" role="group">
+				<div class="sd-clearfix sd-row">
+					<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+						<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question1" id="testid0">
+							<div class="sd-question__container">
+								<div class="sd-question__header-and-content-container">
+									<div class="sd-question__content sd-question__content--text" role="presentation">
+										<div class="sd-formbox sd-text">
+											<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+										</div>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/tests/markup/snapshots/panel-swnl-v2.snap.html b/tests/markup/snapshots/panel-swnl-v2.snap.html
index 1bfb9fd22b..16f0d6ff7c 100644
--- a/tests/markup/snapshots/panel-swnl-v2.snap.html
+++ b/tests/markup/snapshots/panel-swnl-v2.snap.html
@@ -1,8 +1,12 @@
 <div class="sd-clearfix sd-row">
 	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 		<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid1">
-			<div class="sd-element__content sd-question__content" role="presentation">
-				<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-element--nested sd-html sd-html--nested">HTML2</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/panel-text.snap.html b/tests/markup/snapshots/panel-text.snap.html
index 2b22a72bdb..740fb75b8a 100644
--- a/tests/markup/snapshots/panel-text.snap.html
+++ b/tests/markup/snapshots/panel-text.snap.html
@@ -1,9 +1,13 @@
 <div class="sd-clearfix sd-row">
 	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 		<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question1" id="testid0">
-			<div class="sd-question__content sd-question__content--text" role="presentation">
-				<div class="sd-formbox sd-text">
-					<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/panel.snap.html b/tests/markup/snapshots/panel.snap.html
index b116853705..e4c997fbdb 100644
--- a/tests/markup/snapshots/panel.snap.html
+++ b/tests/markup/snapshots/panel.snap.html
@@ -1,8 +1,12 @@
 <div class="sd-clearfix sd-row">
 	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 		<div class="sd-element sd-element--nested sd-html--nested sd-question sd-question--html sd-row__question" data-name="question1" id="testid0">
-			<div class="sd-element__content sd-question__content" role="presentation">
-				<div class="sd-element--nested sd-html sd-html--nested">HTML content here</div>
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-element--nested sd-html sd-html--nested">HTML content here</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -10,9 +14,13 @@
 <div class="sd-clearfix sd-row">
 	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
 		<div class="sd-element sd-element--nested sd-question sd-question--image" data-name="banner" id="testid1">
-			<div class="sd-element__content sd-question__content" role="presentation">
-				<div class="sd-image">
-					<img alt="banner" class="sd-image__image" height="300" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="object-fit:contain;" width="500">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-image">
+							<img alt="banner" class="sd-image__image" height="300" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="object-fit:contain;" width="500">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/paneldynamic-list-legacy-navigation.snap.html b/tests/markup/snapshots/paneldynamic-list-legacy-navigation.snap.html
index 742e76c2df..7007543560 100644
--- a/tests/markup/snapshots/paneldynamic-list-legacy-navigation.snap.html
+++ b/tests/markup/snapshots/paneldynamic-list-legacy-navigation.snap.html
@@ -1,20 +1,24 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-		</div>
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-			</div>
-		</div>
-		<div class="sd-paneldynamic__footer">
-			<hr class="sd-paneldynamic__separator">
-				<div class="sd-paneldynamic__buttons-container">
-					<div class="sd-action-bar sd-action-bar--default-size">
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
-									<span class="sd-action__title">Add new</span>
-								</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+				</div>
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+					</div>
+				</div>
+				<div class="sd-paneldynamic__footer">
+					<hr class="sd-paneldynamic__separator">
+						<div class="sd-paneldynamic__buttons-container">
+							<div class="sd-action-bar sd-action-bar--default-size">
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
+											<span class="sd-action__title">Add new</span>
+										</button>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/tests/markup/snapshots/paneldynamic-list.snap.html b/tests/markup/snapshots/paneldynamic-list.snap.html
index 742e76c2df..7007543560 100644
--- a/tests/markup/snapshots/paneldynamic-list.snap.html
+++ b/tests/markup/snapshots/paneldynamic-list.snap.html
@@ -1,20 +1,24 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-		</div>
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-			</div>
-		</div>
-		<div class="sd-paneldynamic__footer">
-			<hr class="sd-paneldynamic__separator">
-				<div class="sd-paneldynamic__buttons-container">
-					<div class="sd-action-bar sd-action-bar--default-size">
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
-									<span class="sd-action__title">Add new</span>
-								</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+				</div>
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+					</div>
+				</div>
+				<div class="sd-paneldynamic__footer">
+					<hr class="sd-paneldynamic__separator">
+						<div class="sd-paneldynamic__buttons-container">
+							<div class="sd-action-bar sd-action-bar--default-size">
+								<div class="sd-action-bar__item">
+									<div class="sd-action-bar__item-content">
+										<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
+											<span class="sd-action__title">Add new</span>
+										</button>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html b/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
index e4050d19ac..7f5cfbdf3d 100644
--- a/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
+++ b/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
@@ -1,51 +1,61 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
-	<div aria-label="question1" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="question1" role="group">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-paneldynamic">
-				<div class="sd-paneldynamic__panels-container">
-					<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-						<div class="sd-element sd-element--complex sd-panel sd-row__panel">
-							<div class="sd-element__content sd-panel__content" role="group">
-								<div class="sd-clearfix sd-row">
-									<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-										<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question2">
-											<div class="sd-question__content sd-question__content--text" role="presentation">
-												<div class="sd-formbox sd-text">
-													<input aria-invalid="false" aria-label="question2" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
+		<div aria-label="question1" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="question1" role="group">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-paneldynamic">
+							<div class="sd-paneldynamic__panels-container">
+								<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+									<div class="sd-element sd-element--complex sd-panel sd-row__panel">
+										<div class="sd-element__content sd-panel__content" role="group">
+											<div class="sd-clearfix sd-row">
+												<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+													<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question2">
+														<div class="sd-question__container">
+															<div class="sd-question__header-and-content-container">
+																<div class="sd-question__content sd-question__content--text" role="presentation">
+																	<div class="sd-formbox sd-text">
+																		<input aria-invalid="false" aria-label="question2" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
 												</div>
 											</div>
 										</div>
-									</div>
-								</div>
-								<div class="sd-action-bar sd-action-bar--default-size sd-paneldynamic__panel-footer" style="opacity:0; overflow:hidden;">
-									<div class="sd-action-bar__item">
-										<div class="sd-action-bar__item-content">
-											<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
-												<span class="sd-action__title">Remove</span>
-											</button>
-										</div>
-									</div>
-									<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
-										<div class="sd-action-bar__item-content">
-											<button class="sd-action sd-action--neutral sd-action--secondary sd-action--small sv-dots__item" role="button" tabindex="0" title="More" type="button">
-												<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-													<use xlink:href="#icon-more-24x24" class="">
-													</use>
-													<title class="">More</title>
-												</svg>
-											</button>
-											<div>
-												<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-													<div class="sv-popup__container">
-														<div class="sv-popup__body-content">
-															<div class="sv-popup__scrolling-content">
-																<div class="sv-popup__content">
-																	<div class="sd-menu-list__container">
-																		<div class="sd-menu-list__empty-container">
-																			<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+										<div class="sd-action-bar sd-action-bar--default-size sd-paneldynamic__panel-footer" style="opacity:0; overflow:hidden;">
+											<div class="sd-action-bar__item">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
+														<span class="sd-action__title">Remove</span>
+													</button>
+												</div>
+											</div>
+											<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--neutral sd-action--secondary sd-action--small sv-dots__item" role="button" tabindex="0" title="More" type="button">
+														<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+															<use xlink:href="#icon-more-24x24" class="">
+															</use>
+															<title class="">More</title>
+														</svg>
+													</button>
+													<div>
+														<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+															<div class="sv-popup__container">
+																<div class="sv-popup__body-content">
+																	<div class="sv-popup__scrolling-content">
+																		<div class="sv-popup__content">
+																			<div class="sd-menu-list__container">
+																				<div class="sd-menu-list__empty-container">
+																					<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+																				</div>
+																				<ul class="sd-menu-list" role="menu" style="display:none;">
+																				</ul>
+																			</div>
 																		</div>
-																		<ul class="sd-menu-list" role="menu" style="display:none;">
-																		</ul>
 																	</div>
 																</div>
 															</div>
@@ -60,10 +70,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="sd-paneldynamic__footer">
-					<hr class="sd-paneldynamic__separator">
-					</div>
-				</div>
 			</div>
 		</div>
-	</div>
\ No newline at end of file
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html b/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
index e4050d19ac..7f5cfbdf3d 100644
--- a/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
+++ b/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
@@ -1,51 +1,61 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
-	<div aria-label="question1" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="question1" role="group">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-paneldynamic">
-				<div class="sd-paneldynamic__panels-container">
-					<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-						<div class="sd-element sd-element--complex sd-panel sd-row__panel">
-							<div class="sd-element__content sd-panel__content" role="group">
-								<div class="sd-clearfix sd-row">
-									<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-										<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question2">
-											<div class="sd-question__content sd-question__content--text" role="presentation">
-												<div class="sd-formbox sd-text">
-													<input aria-invalid="false" aria-label="question2" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
+		<div aria-label="question1" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="question1" role="group">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-paneldynamic">
+							<div class="sd-paneldynamic__panels-container">
+								<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+									<div class="sd-element sd-element--complex sd-panel sd-row__panel">
+										<div class="sd-element__content sd-panel__content" role="group">
+											<div class="sd-clearfix sd-row">
+												<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+													<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="question2">
+														<div class="sd-question__container">
+															<div class="sd-question__header-and-content-container">
+																<div class="sd-question__content sd-question__content--text" role="presentation">
+																	<div class="sd-formbox sd-text">
+																		<input aria-invalid="false" aria-label="question2" aria-required="false" class="sd-formbox__input" placeholder="" type="text">
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
 												</div>
 											</div>
 										</div>
-									</div>
-								</div>
-								<div class="sd-action-bar sd-action-bar--default-size sd-paneldynamic__panel-footer" style="opacity:0; overflow:hidden;">
-									<div class="sd-action-bar__item">
-										<div class="sd-action-bar__item-content">
-											<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
-												<span class="sd-action__title">Remove</span>
-											</button>
-										</div>
-									</div>
-									<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
-										<div class="sd-action-bar__item-content">
-											<button class="sd-action sd-action--neutral sd-action--secondary sd-action--small sv-dots__item" role="button" tabindex="0" title="More" type="button">
-												<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-													<use xlink:href="#icon-more-24x24" class="">
-													</use>
-													<title class="">More</title>
-												</svg>
-											</button>
-											<div>
-												<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-													<div class="sv-popup__container">
-														<div class="sv-popup__body-content">
-															<div class="sv-popup__scrolling-content">
-																<div class="sv-popup__content">
-																	<div class="sd-menu-list__container">
-																		<div class="sd-menu-list__empty-container">
-																			<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+										<div class="sd-action-bar sd-action-bar--default-size sd-paneldynamic__panel-footer" style="opacity:0; overflow:hidden;">
+											<div class="sd-action-bar__item">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
+														<span class="sd-action__title">Remove</span>
+													</button>
+												</div>
+											</div>
+											<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--neutral sd-action--secondary sd-action--small sv-dots__item" role="button" tabindex="0" title="More" type="button">
+														<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+															<use xlink:href="#icon-more-24x24" class="">
+															</use>
+															<title class="">More</title>
+														</svg>
+													</button>
+													<div>
+														<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+															<div class="sv-popup__container">
+																<div class="sv-popup__body-content">
+																	<div class="sv-popup__scrolling-content">
+																		<div class="sv-popup__content">
+																			<div class="sd-menu-list__container">
+																				<div class="sd-menu-list__empty-container">
+																					<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+																				</div>
+																				<ul class="sd-menu-list" role="menu" style="display:none;">
+																				</ul>
+																			</div>
 																		</div>
-																		<ul class="sd-menu-list" role="menu" style="display:none;">
-																		</ul>
 																	</div>
 																</div>
 															</div>
@@ -60,10 +70,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="sd-paneldynamic__footer">
-					<hr class="sd-paneldynamic__separator">
-					</div>
-				</div>
 			</div>
 		</div>
-	</div>
\ No newline at end of file
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/paneldynamic-progress-bottom-legacy-navigation.snap.html b/tests/markup/snapshots/paneldynamic-progress-bottom-legacy-navigation.snap.html
index 44c366ccd4..f98b3bb284 100644
--- a/tests/markup/snapshots/paneldynamic-progress-bottom-legacy-navigation.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-bottom-legacy-navigation.snap.html
@@ -1,26 +1,30 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-progress">
-				<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
 				</div>
 			</div>
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-progress">
+						<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
 						</div>
 					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-bottom.snap.html b/tests/markup/snapshots/paneldynamic-progress-bottom.snap.html
index 44c366ccd4..f98b3bb284 100644
--- a/tests/markup/snapshots/paneldynamic-progress-bottom.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-bottom.snap.html
@@ -1,26 +1,30 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-progress">
-				<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
 				</div>
 			</div>
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-progress">
+						<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
 						</div>
 					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-tab-center.snap.html b/tests/markup/snapshots/paneldynamic-progress-tab-center.snap.html
index eb25e56118..868179f0c6 100644
--- a/tests/markup/snapshots/paneldynamic-progress-tab-center.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-tab-center.snap.html
@@ -1,41 +1,45 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__tabs-container">
-		<div class="sd-action-bar sd-action-bar--default-size sd-tabs-toolbar sd-tabs-toolbar--center" style="opacity:0; overflow:hidden;">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--brand sd-action--secondary sd-action--small sd-tab-item sd-tab-item--active" role="button" tabindex="0" type="button">
-						<span class="sd-tab-item__title">Panel 1</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item" role="button" tabindex="0" type="button">
-						<span class="sd-tab-item__title">Panel 2</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item sd-tab-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
-						<svg class="sd-tab-item__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-							<use xlink:href="#icon-more-24x24" class="">
-							</use>
-							<title class="">More</title>
-						</svg>
-					</button>
-					<div>
-						<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-							<div class="sv-popup__container">
-								<div class="sv-popup__body-content">
-									<div class="sv-popup__scrolling-content">
-										<div class="sv-popup__content">
-											<div class="sd-menu-list__container">
-												<div class="sd-menu-list__empty-container">
-													<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__tabs-container">
+				<div class="sd-action-bar sd-action-bar--default-size sd-tabs-toolbar sd-tabs-toolbar--center" style="opacity:0; overflow:hidden;">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--brand sd-action--secondary sd-action--small sd-tab-item sd-tab-item--active" role="button" tabindex="0" type="button">
+								<span class="sd-tab-item__title">Panel 1</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item" role="button" tabindex="0" type="button">
+								<span class="sd-tab-item__title">Panel 2</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item sd-tab-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
+								<svg class="sd-tab-item__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+									<use xlink:href="#icon-more-24x24" class="">
+									</use>
+									<title class="">More</title>
+								</svg>
+							</button>
+							<div>
+								<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+									<div class="sv-popup__container">
+										<div class="sv-popup__body-content">
+											<div class="sv-popup__scrolling-content">
+												<div class="sv-popup__content">
+													<div class="sd-menu-list__container">
+														<div class="sd-menu-list__empty-container">
+															<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+														</div>
+														<ul class="sd-menu-list" role="menu" style="display:none;">
+														</ul>
+													</div>
 												</div>
-												<ul class="sd-menu-list" role="menu" style="display:none;">
-												</ul>
 											</div>
 										</div>
 									</div>
@@ -45,26 +49,26 @@
 					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
-						</div>
-					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-tab-left.snap.html b/tests/markup/snapshots/paneldynamic-progress-tab-left.snap.html
index 084b5417e3..69b5891e9c 100644
--- a/tests/markup/snapshots/paneldynamic-progress-tab-left.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-tab-left.snap.html
@@ -1,41 +1,45 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__tabs-container">
-		<div class="sd-action-bar sd-action-bar--default-size sd-tabs-toolbar sd-tabs-toolbar--left" style="opacity:0; overflow:hidden;">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--brand sd-action--secondary sd-action--small sd-tab-item sd-tab-item--active" role="button" tabindex="0" type="button">
-						<span class="sd-tab-item__title">Panel 1</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item" role="button" tabindex="0" type="button">
-						<span class="sd-tab-item__title">Panel 2</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item sd-tab-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
-						<svg class="sd-tab-item__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-							<use xlink:href="#icon-more-24x24" class="">
-							</use>
-							<title class="">More</title>
-						</svg>
-					</button>
-					<div>
-						<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-							<div class="sv-popup__container">
-								<div class="sv-popup__body-content">
-									<div class="sv-popup__scrolling-content">
-										<div class="sv-popup__content">
-											<div class="sd-menu-list__container">
-												<div class="sd-menu-list__empty-container">
-													<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__tabs-container">
+				<div class="sd-action-bar sd-action-bar--default-size sd-tabs-toolbar sd-tabs-toolbar--left" style="opacity:0; overflow:hidden;">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--brand sd-action--secondary sd-action--small sd-tab-item sd-tab-item--active" role="button" tabindex="0" type="button">
+								<span class="sd-tab-item__title">Panel 1</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item" role="button" tabindex="0" type="button">
+								<span class="sd-tab-item__title">Panel 2</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item sd-tab-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
+								<svg class="sd-tab-item__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+									<use xlink:href="#icon-more-24x24" class="">
+									</use>
+									<title class="">More</title>
+								</svg>
+							</button>
+							<div>
+								<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+									<div class="sv-popup__container">
+										<div class="sv-popup__body-content">
+											<div class="sv-popup__scrolling-content">
+												<div class="sv-popup__content">
+													<div class="sd-menu-list__container">
+														<div class="sd-menu-list__empty-container">
+															<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+														</div>
+														<ul class="sd-menu-list" role="menu" style="display:none;">
+														</ul>
+													</div>
 												</div>
-												<ul class="sd-menu-list" role="menu" style="display:none;">
-												</ul>
 											</div>
 										</div>
 									</div>
@@ -45,26 +49,26 @@
 					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
-						</div>
-					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-tab-right.snap.html b/tests/markup/snapshots/paneldynamic-progress-tab-right.snap.html
index 9ed56cab19..eb24bb6aa2 100644
--- a/tests/markup/snapshots/paneldynamic-progress-tab-right.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-tab-right.snap.html
@@ -1,41 +1,45 @@
-<div class="sd-paneldynamic">
-	<div class="sd-paneldynamic__tabs-container">
-		<div class="sd-action-bar sd-action-bar--default-size sd-tabs-toolbar sd-tabs-toolbar--right" style="opacity:0; overflow:hidden;">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--brand sd-action--secondary sd-action--small sd-tab-item sd-tab-item--active" role="button" tabindex="0" type="button">
-						<span class="sd-tab-item__title">Panel 1</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item" role="button" tabindex="0" type="button">
-						<span class="sd-tab-item__title">Panel 2</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item sd-tab-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
-						<svg class="sd-tab-item__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-							<use xlink:href="#icon-more-24x24" class="">
-							</use>
-							<title class="">More</title>
-						</svg>
-					</button>
-					<div>
-						<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-							<div class="sv-popup__container">
-								<div class="sv-popup__body-content">
-									<div class="sv-popup__scrolling-content">
-										<div class="sv-popup__content">
-											<div class="sd-menu-list__container">
-												<div class="sd-menu-list__empty-container">
-													<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-paneldynamic__tabs-container">
+				<div class="sd-action-bar sd-action-bar--default-size sd-tabs-toolbar sd-tabs-toolbar--right" style="opacity:0; overflow:hidden;">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--brand sd-action--secondary sd-action--small sd-tab-item sd-tab-item--active" role="button" tabindex="0" type="button">
+								<span class="sd-tab-item__title">Panel 1</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item" role="button" tabindex="0" type="button">
+								<span class="sd-tab-item__title">Panel 2</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action--neutral sd-action--small sd-action--tertiary sd-tab-item sd-tab-item--icon sv-dots__item" role="button" tabindex="0" title="More" type="button">
+								<svg class="sd-tab-item__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+									<use xlink:href="#icon-more-24x24" class="">
+									</use>
+									<title class="">More</title>
+								</svg>
+							</button>
+							<div>
+								<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+									<div class="sv-popup__container">
+										<div class="sv-popup__body-content">
+											<div class="sv-popup__scrolling-content">
+												<div class="sv-popup__content">
+													<div class="sd-menu-list__container">
+														<div class="sd-menu-list__empty-container">
+															<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+														</div>
+														<ul class="sd-menu-list" role="menu" style="display:none;">
+														</ul>
+													</div>
 												</div>
-												<ul class="sd-menu-list" role="menu" style="display:none;">
-												</ul>
 											</div>
 										</div>
 									</div>
@@ -45,26 +49,26 @@
 					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
-						</div>
-					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-top-legacy-navigation.snap.html b/tests/markup/snapshots/paneldynamic-progress-top-legacy-navigation.snap.html
index 3d34d499a3..fbcafb98a0 100644
--- a/tests/markup/snapshots/paneldynamic-progress-top-legacy-navigation.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-top-legacy-navigation.snap.html
@@ -1,26 +1,30 @@
-<div class="sd-paneldynamic">
-	<div class="sd-progress">
-		<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
-						</div>
-					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-progress">
+				<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-top.snap.html b/tests/markup/snapshots/paneldynamic-progress-top.snap.html
index 3d34d499a3..fbcafb98a0 100644
--- a/tests/markup/snapshots/paneldynamic-progress-top.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-top.snap.html
@@ -1,26 +1,30 @@
-<div class="sd-paneldynamic">
-	<div class="sd-progress">
-		<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__panels-container">
-		<div class="sd-paneldynamic__panel-wrapper">
-		</div>
-	</div>
-	<div class="sd-paneldynamic__footer">
-		<hr class="sd-paneldynamic__separator">
-			<div class="sd-paneldynamic__buttons-container">
-				<div class="sd-action-bar sd-action-bar--default-size">
-					<div class="sd-action-bar__item">
-						<div class="sd-action-bar__item-content">
-							<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-								<span class="sd-action__title">Next</span>
-							</button>
-						</div>
-					</div>
-					<div class="sd-action-bar__item sd-action-bar__item--space">
-						<div class="sd-action-bar__item-content">
-							<div class="sd-paneldynamic__progress-text">1 of 2</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-paneldynamic">
+			<div class="sd-progress">
+				<div aria-label="Progress bar" class="sd-progress__bar" role="progressbar" style="width:50%;">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__panels-container">
+				<div class="sd-paneldynamic__panel-wrapper">
+				</div>
+			</div>
+			<div class="sd-paneldynamic__footer">
+				<hr class="sd-paneldynamic__separator">
+					<div class="sd-paneldynamic__buttons-container">
+						<div class="sd-action-bar sd-action-bar--default-size">
+							<div class="sd-action-bar__item">
+								<div class="sd-action-bar__item-content">
+									<button class="sd-action sd-action--brand sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+										<span class="sd-action__title">Next</span>
+									</button>
+								</div>
+							</div>
+							<div class="sd-action-bar__item sd-action-bar__item--space">
+								<div class="sd-action-bar__item-content">
+									<div class="sd-paneldynamic__progress-text">1 of 2</div>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html b/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
index 4c941df791..0b2d5dc969 100644
--- a/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
+++ b/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
@@ -1,44 +1,54 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
-	<div aria-label="pd" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="pd" id="testid0" role="group">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-paneldynamic">
-				<div class="sd-paneldynamic__panels-container">
-					<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
-						<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0panel0">
-							<div class="sd-element__content sd-panel__content" id="testid0panel0_content" role="group">
-								<div class="sd-clearfix sd-row">
-									<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-										<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="q1" id="testid0panel0question0">
-											<div class="sd-question__content sd-question__content--text" role="presentation">
-												<div class="sd-formbox sd-text">
-													<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0panel0question0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
+		<div aria-label="pd" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="pd" id="testid0" role="group">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-paneldynamic">
+							<div class="sd-paneldynamic__panels-container">
+								<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--list">
+									<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0panel0">
+										<div class="sd-element__content sd-panel__content" id="testid0panel0_content" role="group">
+											<div class="sd-clearfix sd-row">
+												<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+													<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="q1" id="testid0panel0question0">
+														<div class="sd-question__container">
+															<div class="sd-question__header-and-content-container">
+																<div class="sd-question__content sd-question__content--text" role="presentation">
+																	<div class="sd-formbox sd-text">
+																		<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0panel0question0i" placeholder="" type="text">
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
 												</div>
 											</div>
 										</div>
-									</div>
-								</div>
-								<div class="sd-action-bar sd-action-bar--default-size sd-paneldynamic__panel-footer">
-									<div class="sd-action-bar__item">
-										<div class="sd-action-bar__item-content">
-											<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
-												<span class="sd-action__title">Remove</span>
-											</button>
+										<div class="sd-action-bar sd-action-bar--default-size sd-paneldynamic__panel-footer">
+											<div class="sd-action-bar__item">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
+														<span class="sd-action__title">Remove</span>
+													</button>
+												</div>
+											</div>
 										</div>
 									</div>
 								</div>
 							</div>
-						</div>
-					</div>
-				</div>
-				<div class="sd-paneldynamic__footer">
-					<hr class="sd-paneldynamic__separator">
-						<div class="sd-paneldynamic__buttons-container">
-							<div class="sd-action-bar sd-action-bar--default-size">
-								<div class="sd-action-bar__item">
-									<div class="sd-action-bar__item-content">
-										<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
-											<span class="sd-action__title">Add new</span>
-										</button>
+							<div class="sd-paneldynamic__footer">
+								<hr class="sd-paneldynamic__separator">
+									<div class="sd-paneldynamic__buttons-container">
+										<div class="sd-action-bar sd-action-bar--default-size">
+											<div class="sd-action-bar__item">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
+														<span class="sd-action__title">Add new</span>
+													</button>
+												</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html b/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
index 47de02c920..cd9cfefb70 100644
--- a/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
+++ b/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
@@ -1,42 +1,52 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
-	<div aria-label="pd" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="pd" id="testid0" role="group">
-		<div class="sd-element__content sd-question__content" role="presentation">
-			<div class="sd-paneldynamic">
-				<div class="sd-paneldynamic__panels-container">
-					<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--in-row sd-paneldynamic__panel-wrapper--list">
-						<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0panel0">
-							<div class="sd-element__content sd-panel__content" id="testid0panel0_content" role="group">
-								<div class="sd-clearfix sd-row">
-									<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-										<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="q1" id="testid0panel0question0">
-											<div class="sd-question__content sd-question__content--text" role="presentation">
-												<div class="sd-formbox sd-text">
-													<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0panel0question0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:auto;">
+		<div aria-label="pd" class="sd-element sd-element--complex sd-element--with-frame sd-question sd-question--complex sd-question--paneldynamic sd-row__question" data-name="pd" id="testid0" role="group">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__content sd-question__content" role="presentation">
+						<div class="sd-paneldynamic">
+							<div class="sd-paneldynamic__panels-container">
+								<div class="sd-paneldynamic__panel-wrapper sd-paneldynamic__panel-wrapper--in-row sd-paneldynamic__panel-wrapper--list">
+									<div class="sd-element sd-element--complex sd-panel sd-row__panel" id="testid0panel0">
+										<div class="sd-element__content sd-panel__content" id="testid0panel0_content" role="group">
+											<div class="sd-clearfix sd-row">
+												<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+													<div class="sd-element sd-element--nested sd-question sd-row__question sd-row__question--small" data-name="q1" id="testid0panel0question0">
+														<div class="sd-question__container">
+															<div class="sd-question__header-and-content-container">
+																<div class="sd-question__content sd-question__content--text" role="presentation">
+																	<div class="sd-formbox sd-text">
+																		<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0panel0question0i" placeholder="" type="text">
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
 												</div>
 											</div>
 										</div>
 									</div>
+									<div class="sd-action-bar__item">
+										<div class="sd-action-bar__item-content">
+											<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
+												<span class="sd-action__title">Remove</span>
+											</button>
+										</div>
+									</div>
 								</div>
 							</div>
-						</div>
-						<div class="sd-action-bar__item">
-							<div class="sd-action-bar__item-content">
-								<button class="sd-action sd-action--alert sd-action--secondary sd-action--small sd-paneldynamic__btn sd-paneldynamic__remove-btn" role="button" tabindex="0" type="button">
-									<span class="sd-action__title">Remove</span>
-								</button>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="sd-paneldynamic__footer">
-					<hr class="sd-paneldynamic__separator">
-						<div class="sd-paneldynamic__buttons-container">
-							<div class="sd-action-bar sd-action-bar--default-size">
-								<div class="sd-action-bar__item">
-									<div class="sd-action-bar__item-content">
-										<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
-											<span class="sd-action__title">Add new</span>
-										</button>
+							<div class="sd-paneldynamic__footer">
+								<hr class="sd-paneldynamic__separator">
+									<div class="sd-paneldynamic__buttons-container">
+										<div class="sd-action-bar sd-action-bar--default-size">
+											<div class="sd-action-bar__item">
+												<div class="sd-action-bar__item-content">
+													<button class="sd-action sd-action--brand sd-action--secondary sd-action--small sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" role="button" tabindex="0" type="button">
+														<span class="sd-action__title">Add new</span>
+													</button>
+												</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/question-description-under-input.snap.html b/tests/markup/snapshots/question-description-under-input.snap.html
index ad6bb2ee02..8cfad0e926 100644
--- a/tests/markup/snapshots/question-description-under-input.snap.html
+++ b/tests/markup/snapshots/question-description-under-input.snap.html
@@ -1,6 +1,10 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
-</div>
-<div class="sd-description sd-question__description sd-question__description--under-input" id="testid0_ariaDescription">
-	<span class="sv-string-viewer sv-string-viewer--multiline">Under input</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+		</div>
+		<div class="sd-description sd-question__description sd-question__description--under-input" id="testid0_ariaDescription">
+			<span class="sv-string-viewer sv-string-viewer--multiline">Under input</span>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/question-errors-v2-bottom.snap.html b/tests/markup/snapshots/question-errors-v2-bottom.snap.html
index 3aad49e117..bf466b783f 100644
--- a/tests/markup/snapshots/question-errors-v2-bottom.snap.html
+++ b/tests/markup/snapshots/question-errors-v2-bottom.snap.html
@@ -1,26 +1,32 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-question--error-bottom sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-				<span>&nbsp;</span>
-				<span aria-hidden="true" class="sd-question__required-text">*</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-formbox--error sd-text">
-				<input aria-describedby="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
-			</div>
-		</div>
-		<div class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0_errors">
-			<div>
-				<span aria-hidden="true">
-				</span>
-				<span class="sd-error__item">
-					<span class="sv-string-viewer">Response required.</span>
-				</span>
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-question--error-bottom sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+							<span>&nbsp;</span>
+							<span aria-hidden="true" class="sd-question__required-text">*</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-formbox--error sd-text">
+							<input aria-describedby="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
+				<div class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0_errors">
+					<div>
+						<span aria-hidden="true">
+						</span>
+						<span class="sd-error__item">
+							<span class="sv-string-viewer">Response required.</span>
+						</span>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/question-errors-v2-top.snap.html b/tests/markup/snapshots/question-errors-v2-top.snap.html
index 0d96afa16d..1d6b67030e 100644
--- a/tests/markup/snapshots/question-errors-v2-top.snap.html
+++ b/tests/markup/snapshots/question-errors-v2-top.snap.html
@@ -1,26 +1,32 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-question--error-top sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
-		<div class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" id="testid0_errors">
-			<div>
-				<span aria-hidden="true">
-				</span>
-				<span class="sd-error__item">
-					<span class="sv-string-viewer">Response required.</span>
-				</span>
-			</div>
-		</div>
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-				<span>&nbsp;</span>
-				<span aria-hidden="true" class="sd-question__required-text">*</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-formbox--error sd-text">
-				<input aria-describedby="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-question--error-top sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" id="testid0_errors">
+					<div>
+						<span aria-hidden="true">
+						</span>
+						<span class="sd-error__item">
+							<span class="sv-string-viewer">Response required.</span>
+						</span>
+					</div>
+				</div>
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+							<span>&nbsp;</span>
+							<span aria-hidden="true" class="sd-question__required-text">*</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-formbox--error sd-text">
+							<input aria-describedby="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/question-title-label.snap.html b/tests/markup/snapshots/question-title-label.snap.html
index 480c43be86..7a97e45914 100644
--- a/tests/markup/snapshots/question-title-label.snap.html
+++ b/tests/markup/snapshots/question-title-label.snap.html
@@ -1,13 +1,19 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<label class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-			</label>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<label class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+						</label>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/question-title-with-html.snap.html b/tests/markup/snapshots/question-title-with-html.snap.html
index f12dbfd92f..89c47ccc0d 100644
--- a/tests/markup/snapshots/question-title-with-html.snap.html
+++ b/tests/markup/snapshots/question-title-with-html.snap.html
@@ -1,13 +1,22 @@
-<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-	<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-	<span>&nbsp;</span>
-	<span class="sv-string-viewer sv-string-viewer--multiline">
-		<span style="font-size:12px;">
-			<strong>
-				<span style="font-family:Comic Sans MS,cursive;">
-					<span style="color:#f1c40f;">HI</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+		<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+			<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+			<span>&nbsp;</span>
+			<span class="sv-string-viewer sv-string-viewer--multiline">
+				<span style="font-size:12px;">
+					<strong>
+						<span style="font-family:Comic Sans MS,cursive;">
+							<span style="color:#f1c40f;">HI</span>
+						</span>
+					</strong>
 				</span>
-			</strong>
-		</span>
-	</span>
+			</span>
+		</div>
+	</div>
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/question-with-indent.snap.html b/tests/markup/snapshots/question-with-indent.snap.html
index 5d4c8252e9..96643fd4ef 100644
--- a/tests/markup/snapshots/question-with-indent.snap.html
+++ b/tests/markup/snapshots/question-with-indent.snap.html
@@ -1,15 +1,21 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0" style="--sv-element-add-padding-left:20px; --sv-element-add-padding-right:20px;">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">name</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-text">
-				<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0" style="--sv-element-add-padding-left:20px; --sv-element-add-padding-right:20px;">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">name</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-text">
+							<input aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/radiogroup-clear.snap.html b/tests/markup/snapshots/radiogroup-clear.snap.html
index 8007d3804f..307f8417e9 100644
--- a/tests/markup/snapshots/radiogroup-clear.snap.html
+++ b/tests/markup/snapshots/radiogroup-clear.snap.html
@@ -1,37 +1,41 @@
-<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
-	<div class="sv-title-actions">
-		<span class="sv-title-actions__title">
-			<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-		</span>
-		<div class="sd-action-bar sd-action-bar--default-size sd-action-title-bar" style="opacity:0; overflow:hidden;">
-			<div class="sd-action-bar__item">
-				<div class="sd-action-bar__item-content">
-					<button aria-labelledby="testid0_ariaTitle" class="sd-action sd-action--alert sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
-						<span class="sd-action__title">Clear</span>
-					</button>
-				</div>
-			</div>
-			<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
-				<div class="sd-action-bar__item-content">
-					<button class="sd-action sd-action--neutral sd-action--secondary sd-action--small sv-dots__item" role="button" tabindex="0" title="More" type="button">
-						<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-							<use xlink:href="#icon-more-24x24" class="">
-							</use>
-							<title class="">More</title>
-						</svg>
-					</button>
-					<div>
-						<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-							<div class="sv-popup__container">
-								<div class="sv-popup__body-content">
-									<div class="sv-popup__scrolling-content">
-										<div class="sv-popup__content">
-											<div class="sd-menu-list__container">
-												<div class="sd-menu-list__empty-container">
-													<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+		<div class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+			<div class="sv-title-actions">
+				<span class="sv-title-actions__title">
+					<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+				</span>
+				<div class="sd-action-bar sd-action-bar--default-size sd-action-title-bar" style="opacity:0; overflow:hidden;">
+					<div class="sd-action-bar__item">
+						<div class="sd-action-bar__item-content">
+							<button aria-labelledby="testid0_ariaTitle" class="sd-action sd-action--alert sd-action--secondary sd-action--small" role="button" tabindex="0" type="button">
+								<span class="sd-action__title">Clear</span>
+							</button>
+						</div>
+					</div>
+					<div class="sd-action-bar__item sd-action-bar__item--hidden sv-dots">
+						<div class="sd-action-bar__item-content">
+							<button class="sd-action sd-action--neutral sd-action--secondary sd-action--small sv-dots__item" role="button" tabindex="0" title="More" type="button">
+								<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+									<use xlink:href="#icon-more-24x24" class="">
+									</use>
+									<title class="">More</title>
+								</svg>
+							</button>
+							<div>
+								<div class="sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+									<div class="sv-popup__container">
+										<div class="sv-popup__body-content">
+											<div class="sv-popup__scrolling-content">
+												<div class="sv-popup__content">
+													<div class="sd-menu-list__container">
+														<div class="sd-menu-list__empty-container">
+															<div aria-label="No data to display" class="sd-menu-list__empty-text">No data to display</div>
+														</div>
+														<ul class="sd-menu-list" role="menu" style="display:none;">
+														</ul>
+													</div>
 												</div>
-												<ul class="sd-menu-list" role="menu" style="display:none;">
-												</ul>
 											</div>
 										</div>
 									</div>
@@ -43,4 +47,36 @@
 			</div>
 		</div>
 	</div>
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-columns-head-foot.snap.html b/tests/markup/snapshots/radiogroup-columns-head-foot.snap.html
index 52e663388d..64e02ccc1b 100644
--- a/tests/markup/snapshots/radiogroup-columns-head-foot.snap.html
+++ b/tests/markup/snapshots/radiogroup-columns-head-foot.snap.html
@@ -1,9 +1,43 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-selectbase--multi-column">
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-selectbase--multi-column">
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item1</span>
+							</span>
+						</label>
+					</div>
+				</div>
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item2</span>
+							</span>
+						</label>
+					</div>
+				</div>
+			</div>
 			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
 				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
 					<span class="sd-item__decorator sd-radio__decorator">
 						<svg class="sd-item__svg sd-radio__svg">
 							<use xlink:href="#icon-radio-16x16" class="">
@@ -11,15 +45,13 @@
 						</svg>
 					</span>
 					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item1</span>
+						<span class="sv-string-viewer">None</span>
 					</span>
 				</label>
 			</div>
-		</div>
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
 			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
 				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
 					<span class="sd-item__decorator sd-radio__decorator">
 						<svg class="sd-item__svg sd-radio__svg">
 							<use xlink:href="#icon-radio-16x16" class="">
@@ -27,38 +59,10 @@
 						</svg>
 					</span>
 					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item2</span>
+						<span class="sv-string-viewer">Other (describe)</span>
 					</span>
 				</label>
 			</div>
-		</div>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">None</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-columns-mobile.snap.html b/tests/markup/snapshots/radiogroup-columns-mobile.snap.html
index 296b0d3dc5..acc72b32a7 100644
--- a/tests/markup/snapshots/radiogroup-columns-mobile.snap.html
+++ b/tests/markup/snapshots/radiogroup-columns-mobile.snap.html
@@ -1,44 +1,48 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase sd-selectbase--mobile" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase sd-selectbase--mobile" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="item3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-2" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="item3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-columns-no-head-foot.snap.html b/tests/markup/snapshots/radiogroup-columns-no-head-foot.snap.html
index 06591ca780..4018eeb2c9 100644
--- a/tests/markup/snapshots/radiogroup-columns-no-head-foot.snap.html
+++ b/tests/markup/snapshots/radiogroup-columns-no-head-foot.snap.html
@@ -1,64 +1,68 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-selectbase--multi-column">
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-					<span class="sd-item__decorator sd-radio__decorator">
-						<svg class="sd-item__svg sd-radio__svg">
-							<use xlink:href="#icon-radio-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item1</span>
-					</span>
-				</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-selectbase--multi-column">
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item1</span>
+							</span>
+						</label>
+					</div>
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">None</span>
+							</span>
+						</label>
+					</div>
+				</div>
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item2</span>
+							</span>
+						</label>
+					</div>
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">Other (describe)</span>
+							</span>
+						</label>
+					</div>
+				</div>
 			</div>
-			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
-					<span class="sd-item__decorator sd-radio__decorator">
-						<svg class="sd-item__svg sd-radio__svg">
-							<use xlink:href="#icon-radio-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">None</span>
-					</span>
-				</label>
-			</div>
-		</div>
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-					<span class="sd-item__decorator sd-radio__decorator">
-						<svg class="sd-item__svg sd-radio__svg">
-							<use xlink:href="#icon-radio-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item2</span>
-					</span>
-				</label>
-			</div>
-			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
-					<span class="sd-item__decorator sd-radio__decorator">
-						<svg class="sd-item__svg sd-radio__svg">
-							<use xlink:href="#icon-radio-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">Other (describe)</span>
-					</span>
-				</label>
-			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-columns.snap.html b/tests/markup/snapshots/radiogroup-columns.snap.html
index 282171c622..2e4558bc02 100644
--- a/tests/markup/snapshots/radiogroup-columns.snap.html
+++ b/tests/markup/snapshots/radiogroup-columns.snap.html
@@ -1,36 +1,40 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-selectbase--multi-column">
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-					<span class="sd-item__decorator sd-radio__decorator">
-						<svg class="sd-item__svg sd-radio__svg">
-							<use xlink:href="#icon-radio-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item1</span>
-					</span>
-				</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-selectbase--multi-column">
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item1</span>
+							</span>
+						</label>
+					</div>
+				</div>
+				<div class="sd-selectbase__column sv-q-column-2" role="presentation">
+					<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
+						<label class="sd-selectbase__label">
+							<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+							<span class="sd-item__decorator sd-radio__decorator">
+								<svg class="sd-item__svg sd-radio__svg">
+									<use xlink:href="#icon-radio-16x16" class="">
+									</use>
+								</svg>
+							</span>
+							<span class="sd-item__control-label">
+								<span class="sv-string-viewer">item2</span>
+							</span>
+						</label>
+					</div>
+				</div>
 			</div>
-		</div>
-		<div class="sd-selectbase__column sv-q-column-2" role="presentation">
-			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item" role="presentation">
-				<label class="sd-selectbase__label">
-					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-					<span class="sd-item__decorator sd-radio__decorator">
-						<svg class="sd-item__svg sd-radio__svg">
-							<use xlink:href="#icon-radio-16x16" class="">
-							</use>
-						</svg>
-					</span>
-					<span class="sd-item__control-label">
-						<span class="sv-string-viewer">item2</span>
-					</span>
-				</label>
-			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-disabled.snap.html b/tests/markup/snapshots/radiogroup-disabled.snap.html
index fe242b2923..57cc4f5385 100644
--- a/tests/markup/snapshots/radiogroup-disabled.snap.html
+++ b/tests/markup/snapshots/radiogroup-disabled.snap.html
@@ -1,44 +1,48 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-radio sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-editor" contenteditable="true">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-radio sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-editor" contenteditable="true">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-radio sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-editor" contenteditable="true">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-radio sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_2" name="name_testid0" type="radio" value="item3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-editor" contenteditable="true">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-radio sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-editor" contenteditable="true">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-radio sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_2" name="name_testid0" type="radio" value="item3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-editor" contenteditable="true">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-modern.snap.html b/tests/markup/snapshots/radiogroup-modern.snap.html
index e544fae83c..665c155870 100644
--- a/tests/markup/snapshots/radiogroup-modern.snap.html
+++ b/tests/markup/snapshots/radiogroup-modern.snap.html
@@ -1,30 +1,34 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-multiple-comments.snap.html b/tests/markup/snapshots/radiogroup-multiple-comments.snap.html
index 6ceef4366c..4adddacf3d 100644
--- a/tests/markup/snapshots/radiogroup-multiple-comments.snap.html
+++ b/tests/markup/snapshots/radiogroup-multiple-comments.snap.html
@@ -1,56 +1,60 @@
-<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="name" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
 			</div>
-		</div>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="name" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-other.snap.html b/tests/markup/snapshots/radiogroup-other.snap.html
index b85e0c8dda..25774d58e8 100644
--- a/tests/markup/snapshots/radiogroup-other.snap.html
+++ b/tests/markup/snapshots/radiogroup-other.snap.html
@@ -1,70 +1,74 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-	<div class="form-group sd-question__comment-area sd-selectbase__other">
-		<div class="sd-comment sd-formbox">
-			<textarea aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
-			</textarea>
-			<div class="sd-comment__grip">
-				<svg class="sv-svg-icon" role="presentation">
-					<use xlink:href="#icon-grip" class="">
-					</use>
-				</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="item3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--checked sd-radio sd-radio--allowhover sd-radio--checked sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" name="name_testid0" type="radio" value="other">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+			<div class="form-group sd-question__comment-area sd-selectbase__other">
+				<div class="sd-comment sd-formbox">
+					<textarea aria-label="Question title" aria-required="false" class="sd-comment__input sd-formbox__input" placeholder="" style="resize:none;">
+					</textarea>
+					<div class="sd-comment__grip">
+						<svg class="sv-svg-icon" role="presentation">
+							<use xlink:href="#icon-grip" class="">
+							</use>
+						</svg>
+					</div>
+				</div>
 			</div>
-		</div>
+		</fieldset>
 	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-readonly-selected.snap.html b/tests/markup/snapshots/radiogroup-readonly-selected.snap.html
index efb9d13188..36e177429d 100644
--- a/tests/markup/snapshots/radiogroup-readonly-selected.snap.html
+++ b/tests/markup/snapshots/radiogroup-readonly-selected.snap.html
@@ -1,44 +1,48 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-item--checked sd-item--readonly sd-radio sd-radio--allowhover sd-radio--checked sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-item--checked sd-item--readonly sd-radio sd-radio--allowhover sd-radio--checked sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input checked="" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="item3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="item3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-readonly.snap.html b/tests/markup/snapshots/radiogroup-readonly.snap.html
index b7e102fc60..9bbe0d78ed 100644
--- a/tests/markup/snapshots/radiogroup-readonly.snap.html
+++ b/tests/markup/snapshots/radiogroup-readonly.snap.html
@@ -1,44 +1,48 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="item3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-item--readonly sd-radio sd-radio--allowhover sd-radio--readonly sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="item3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-row-head-foot.snap.html b/tests/markup/snapshots/radiogroup-row-head-foot.snap.html
index ae87bfdccb..6a64c8cee1 100644
--- a/tests/markup/snapshots/radiogroup-row-head-foot.snap.html
+++ b/tests/markup/snapshots/radiogroup-row-head-foot.snap.html
@@ -1,60 +1,64 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-selectbase--row">
-		<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">item1</span>
-				</span>
-			</label>
-		</div>
-		<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-			<label class="sd-selectbase__label">
-				<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-				<span class="sd-item__decorator sd-radio__decorator">
-					<svg class="sd-item__svg sd-radio__svg">
-						<use xlink:href="#icon-radio-16x16" class="">
-						</use>
-					</svg>
-				</span>
-				<span class="sd-item__control-label">
-					<span class="sv-string-viewer">item2</span>
-				</span>
-			</label>
-		</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-selectbase--row">
+				<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">item1</span>
+						</span>
+					</label>
+				</div>
+				<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+					<label class="sd-selectbase__label">
+						<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+						<span class="sd-item__decorator sd-radio__decorator">
+							<svg class="sd-item__svg sd-radio__svg">
+								<use xlink:href="#icon-radio-16x16" class="">
+								</use>
+							</svg>
+						</span>
+						<span class="sd-item__control-label">
+							<span class="sv-string-viewer">item2</span>
+						</span>
+					</label>
+				</div>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">None</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">None</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-row-no-head-foot.snap.html b/tests/markup/snapshots/radiogroup-row-no-head-foot.snap.html
index 174cff3121..2f9da614ba 100644
--- a/tests/markup/snapshots/radiogroup-row-no-head-foot.snap.html
+++ b/tests/markup/snapshots/radiogroup-row-no-head-foot.snap.html
@@ -1,58 +1,62 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase sd-selectbase--row" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase sd-selectbase--row" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">None</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">Other (describe)</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="none">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">None</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="other">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">Other (describe)</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup-v2.snap.html b/tests/markup/snapshots/radiogroup-v2.snap.html
index e544fae83c..665c155870 100644
--- a/tests/markup/snapshots/radiogroup-v2.snap.html
+++ b/tests/markup/snapshots/radiogroup-v2.snap.html
@@ -1,30 +1,34 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/radiogroup.snap.html b/tests/markup/snapshots/radiogroup.snap.html
index d7e8005c90..99f5126d30 100644
--- a/tests/markup/snapshots/radiogroup.snap.html
+++ b/tests/markup/snapshots/radiogroup.snap.html
@@ -1,44 +1,48 @@
-<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item1</span>
-			</span>
-		</label>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-selectbase" role="radiogroup">
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="item1">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item1</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item2</span>
+					</span>
+				</label>
+			</div>
+			<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
+				<label class="sd-selectbase__label">
+					<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="item3">
+					<span class="sd-item__decorator sd-radio__decorator">
+						<svg class="sd-item__svg sd-radio__svg">
+							<use xlink:href="#icon-radio-16x16" class="">
+							</use>
+						</svg>
+					</span>
+					<span class="sd-item__control-label">
+						<span class="sv-string-viewer">item3</span>
+					</span>
+				</label>
+			</div>
+		</fieldset>
 	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="item2">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item2</span>
-			</span>
-		</label>
-	</div>
-	<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sv-q-col-1" role="presentation">
-		<label class="sd-selectbase__label">
-			<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="item3">
-			<span class="sd-item__decorator sd-radio__decorator">
-				<svg class="sd-item__svg sd-radio__svg">
-					<use xlink:href="#icon-radio-16x16" class="">
-					</use>
-				</svg>
-			</span>
-			<span class="sd-item__control-label">
-				<span class="sv-string-viewer">item3</span>
-			</span>
-		</label>
-	</div>
-</fieldset>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/ranking-design.snap.html b/tests/markup/snapshots/ranking-design.snap.html
index 247658f1cb..f54da1fe77 100644
--- a/tests/markup/snapshots/ranking-design.snap.html
+++ b/tests/markup/snapshots/ranking-design.snap.html
@@ -1,81 +1,85 @@
-<div class="sv-ranking sv-ranking--design-mode sv-ranking--select-to-rank-empty-value">
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" >
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-					<svg class="">
-						<use xlink:href="#icon-rankingundefined-16x16" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-editor" contenteditable="true">item1</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sv-ranking sv-ranking--design-mode sv-ranking--select-to-rank-empty-value">
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+							<svg class="">
+								<use xlink:href="#icon-rankingundefined-16x16" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-editor" contenteditable="true">item1</span>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" >
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-					<svg class="">
-						<use xlink:href="#icon-rankingundefined-16x16" class="">
-						</use>
-					</svg>
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+							<svg class="">
+								<use xlink:href="#icon-rankingundefined-16x16" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-editor" contenteditable="true">item2</span>
+						</div>
+					</div>
 				</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-editor" contenteditable="true">item2</span>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" >
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
 			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-					<svg class="">
-						<use xlink:href="#icon-rankingundefined-16x16" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-editor" contenteditable="true">item3</span>
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+							<svg class="">
+								<use xlink:href="#icon-rankingundefined-16x16" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-editor" contenteditable="true">item3</span>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/ranking-selectToRankEnabled-SwapAreas.snap.html b/tests/markup/snapshots/ranking-selectToRankEnabled-SwapAreas.snap.html
index 65515370a2..a211b01184 100644
--- a/tests/markup/snapshots/ranking-selectToRankEnabled-SwapAreas.snap.html
+++ b/tests/markup/snapshots/ranking-selectToRankEnabled-SwapAreas.snap.html
@@ -1,92 +1,96 @@
-<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-empty-value sv-ranking--select-to-rank-horizontal sv-ranking--select-to-rank-swap-areas">
-	<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item1</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content sd-question__content--support-container-queries" role="presentation">
+		<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-empty-value sv-ranking--select-to-rank-horizontal sv-ranking--select-to-rank-swap-areas">
+			<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item1</span>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item2</span>
+							</div>
+						</div>
 					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item2</span>
+				</div>
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item3</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item3</span>
-					</div>
+			<div class="sv-ranking__containers-divider">
+			</div>
+			<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
+				<div class="sv-ranking__container-placeholder">
+					<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="sv-ranking__containers-divider">
-	</div>
-	<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
-		<div class="sv-ranking__container-placeholder">
-			<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
-		</div>
-	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/ranking-selectToRankEnabled-empty.snap.html b/tests/markup/snapshots/ranking-selectToRankEnabled-empty.snap.html
index a3ec52fa81..420155553c 100644
--- a/tests/markup/snapshots/ranking-selectToRankEnabled-empty.snap.html
+++ b/tests/markup/snapshots/ranking-selectToRankEnabled-empty.snap.html
@@ -1,92 +1,96 @@
-<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-empty-value sv-ranking--select-to-rank-horizontal">
-	<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item1</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content sd-question__content--support-container-queries" role="presentation">
+		<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-empty-value sv-ranking--select-to-rank-horizontal">
+			<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item1</span>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item2</span>
+							</div>
+						</div>
 					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item2</span>
+				</div>
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item3</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item3</span>
-					</div>
+			<div class="sv-ranking__containers-divider">
+			</div>
+			<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
+				<div class="sv-ranking__container-placeholder">
+					<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="sv-ranking__containers-divider">
-	</div>
-	<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
-		<div class="sv-ranking__container-placeholder">
-			<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
-		</div>
-	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/ranking-selectToRankEnabled-vertical.snap.html b/tests/markup/snapshots/ranking-selectToRankEnabled-vertical.snap.html
index 78c72b01d6..0bf3674cf1 100644
--- a/tests/markup/snapshots/ranking-selectToRankEnabled-vertical.snap.html
+++ b/tests/markup/snapshots/ranking-selectToRankEnabled-vertical.snap.html
@@ -1,92 +1,96 @@
-<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-empty-value sv-ranking--select-to-rank-vertical">
-	<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item1</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content sd-question__content--support-container-queries" role="presentation">
+		<div class="sv-ranking sv-ranking--select-to-rank sv-ranking--select-to-rank-empty-value sv-ranking--select-to-rank-vertical">
+			<div class="sv-ranking__container sv-ranking__container--from" data-ranking="from-container">
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item1</span>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item2</span>
+							</div>
+						</div>
 					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item2</span>
+				</div>
+				<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
+					<div style="outline:none;" tabindex="-1">
+						<div class="sv-ranking-item__ghost">
+						</div>
+						<div class="sd-ranking-item__content sv-ranking-item__content">
+							<div class="sv-ranking-item__icon-container">
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+									<use xlink:href="#icon-drag-24x24" class="">
+									</use>
+								</svg>
+								<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+									<use xlink:href="#icon-reorder-24x24" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+								<svg class="">
+									<use xlink:href="#icon-rankingundefined-16x16" class="">
+									</use>
+								</svg>
+							</div>
+							<div class="sv-ranking-item__text">
+								<span class="sv-string-viewer">item3</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-		<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
-			<div style="outline:none;" tabindex="-1">
-				<div class="sv-ranking-item__ghost">
-				</div>
-				<div class="sd-ranking-item__content sv-ranking-item__content">
-					<div class="sv-ranking-item__icon-container">
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-							<use xlink:href="#icon-drag-24x24" class="">
-							</use>
-						</svg>
-						<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-							<use xlink:href="#icon-reorder-24x24" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-						<svg class="">
-							<use xlink:href="#icon-rankingundefined-16x16" class="">
-							</use>
-						</svg>
-					</div>
-					<div class="sv-ranking-item__text">
-						<span class="sv-string-viewer">item3</span>
-					</div>
+			<div class="sv-ranking__containers-divider">
+			</div>
+			<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
+				<div class="sv-ranking__container-placeholder">
+					<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="sv-ranking__containers-divider">
-	</div>
-	<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
-		<div class="sv-ranking__container-placeholder">
-			<span class="sv-string-viewer sv-string-viewer--multiline">Drag choices here to rank them</span>
-		</div>
-	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/ranking-values.snap.html b/tests/markup/snapshots/ranking-values.snap.html
index da9645e181..7411564dd5 100644
--- a/tests/markup/snapshots/ranking-values.snap.html
+++ b/tests/markup/snapshots/ranking-values.snap.html
@@ -1,66 +1,70 @@
-<div class="sv-ranking">
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sv-ranking-item__index">1</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-viewer">item1</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sv-ranking">
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sv-ranking-item__index">1</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-viewer">item1</span>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sv-ranking-item__index">2</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-viewer">item2</span>
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sv-ranking-item__index">2</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-viewer">item2</span>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sv-ranking-item__index">3</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-viewer">item3</span>
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sv-ranking-item__index">3</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-viewer">item3</span>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/ranking.snap.html b/tests/markup/snapshots/ranking.snap.html
index 1981f9a913..c646513784 100644
--- a/tests/markup/snapshots/ranking.snap.html
+++ b/tests/markup/snapshots/ranking.snap.html
@@ -1,81 +1,85 @@
-<div class="sv-ranking sv-ranking--select-to-rank-empty-value">
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-					<svg class="">
-						<use xlink:href="#icon-rankingundefined-16x16" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-viewer">item1</span>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sv-ranking sv-ranking--select-to-rank-empty-value">
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="0" id="testid0i_0" tabindex="0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+							<svg class="">
+								<use xlink:href="#icon-rankingundefined-16x16" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-viewer">item1</span>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
-	</div>
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
-			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-					<svg class="">
-						<use xlink:href="#icon-rankingundefined-16x16" class="">
-						</use>
-					</svg>
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="1" id="testid0i_1" tabindex="0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+							<svg class="">
+								<use xlink:href="#icon-rankingundefined-16x16" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-viewer">item2</span>
+						</div>
+					</div>
 				</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-viewer">item2</span>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
-		<div style="outline:none;" tabindex="-1">
-			<div class="sv-ranking-item__ghost">
 			</div>
-			<div class="sd-ranking-item__content sv-ranking-item__content">
-				<div class="sv-ranking-item__icon-container">
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
-						<use xlink:href="#icon-drag-24x24" class="">
-						</use>
-					</svg>
-					<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
-						<use xlink:href="#icon-reorder-24x24" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
-					<svg class="">
-						<use xlink:href="#icon-rankingundefined-16x16" class="">
-						</use>
-					</svg>
-				</div>
-				<div class="sv-ranking-item__text">
-					<span class="sv-string-viewer">item3</span>
+			<div class="sv-q-col-1 sv-ranking-item" data-sv-drop-target-ranking-item="2" id="testid0i_2" tabindex="0">
+				<div style="outline:none;" tabindex="-1">
+					<div class="sv-ranking-item__ghost">
+					</div>
+					<div class="sd-ranking-item__content sv-ranking-item__content">
+						<div class="sv-ranking-item__icon-container">
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--hover">
+								<use xlink:href="#icon-drag-24x24" class="">
+								</use>
+							</svg>
+							<svg class="sv-ranking-item__icon sv-ranking-item__icon--focus">
+								<use xlink:href="#icon-reorder-24x24" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sd-ranking-item__index sd-ranking-item__index--empty sv-ranking-item__index sv-ranking-item__index--empty">
+							<svg class="">
+								<use xlink:href="#icon-rankingundefined-16x16" class="">
+								</use>
+							</svg>
+						</div>
+						<div class="sv-ranking-item__text">
+							<span class="sv-string-viewer">item3</span>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown-description-with-text.snap.html b/tests/markup/snapshots/rating-as-dropdown-description-with-text.snap.html
index 79cae7d3b3..3a45e11504 100644
--- a/tests/markup/snapshots/rating-as-dropdown-description-with-text.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown-description-with-text.snap.html
@@ -1,71 +1,75 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">One</span>
-													<div class="sd-rating-dropdown-item_description">
-														<span class="sv-string-viewer">mimimi</span>
-													</div>
-												</div>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">Two</span>
-												</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">Three</span>
-												</div>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">Four</span>
-													<div class="sd-rating-dropdown-item_description">
-														<span class="sv-string-viewer">mamama</span>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">One</span>
+															<div class="sd-rating-dropdown-item_description">
+																<span class="sv-string-viewer">mimimi</span>
+															</div>
+														</div>
 													</div>
-												</div>
-											</div>
-										</li>
-									</ul>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">Two</span>
+														</div>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">Three</span>
+														</div>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">Four</span>
+															<div class="sd-rating-dropdown-item_description">
+																<span class="sv-string-viewer">mamama</span>
+															</div>
+														</div>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown-description.snap.html b/tests/markup/snapshots/rating-as-dropdown-description.snap.html
index a926a2fc3b..1e84daacfc 100644
--- a/tests/markup/snapshots/rating-as-dropdown-description.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown-description.snap.html
@@ -1,71 +1,75 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--popup-active sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">1</span>
-													<div class="sd-rating-dropdown-item_description">
-														<span class="sv-string-viewer">mimimi</span>
-													</div>
-												</div>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">2</span>
-												</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">3</span>
-												</div>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<div class="sd-rating-dropdown-item">
-													<span class="sd-rating-dropdown-item_text">4</span>
-													<div class="sd-rating-dropdown-item_description">
-														<span class="sv-string-viewer">mamama</span>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">1</span>
+															<div class="sd-rating-dropdown-item_description">
+																<span class="sv-string-viewer">mimimi</span>
+															</div>
+														</div>
 													</div>
-												</div>
-											</div>
-										</li>
-									</ul>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">2</span>
+														</div>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">3</span>
+														</div>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<div class="sd-rating-dropdown-item">
+															<span class="sd-rating-dropdown-item_text">4</span>
+															<div class="sd-rating-dropdown-item_description">
+																<span class="sv-string-viewer">mamama</span>
+															</div>
+														</div>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown-disabled-with-value.snap.html b/tests/markup/snapshots/rating-as-dropdown-disabled-with-value.snap.html
index fd1ea19394..49821f0ae8 100644
--- a/tests/markup/snapshots/rating-as-dropdown-disabled-with-value.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown-disabled-with-value.snap.html
@@ -1,32 +1,36 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-formbox" disabled="" id="testid0i" role="combobox">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-editor" contenteditable="true">3</span>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-formbox" disabled="" id="testid0i" role="combobox">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-editor" contenteditable="true">3</span>
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown-readonly-with-value.snap.html b/tests/markup/snapshots/rating-as-dropdown-readonly-with-value.snap.html
index 08d0f3b2ec..bd54bf02be 100644
--- a/tests/markup/snapshots/rating-as-dropdown-readonly-with-value.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown-readonly-with-value.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<span class="sv-string-viewer">3</span>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<span class="sv-string-viewer">3</span>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown-readonly.snap.html b/tests/markup/snapshots/rating-as-dropdown-readonly.snap.html
index 524860f17a..65547619f3 100644
--- a/tests/markup/snapshots/rating-as-dropdown-readonly.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown-readonly.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<span class="sv-string-viewer">Select...</span>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--readonly" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<span class="sv-string-viewer">Select...</span>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown-with-value-focused.snap.html b/tests/markup/snapshots/rating-as-dropdown-with-value-focused.snap.html
index eecb67467b..58676495c9 100644
--- a/tests/markup/snapshots/rating-as-dropdown-with-value-focused.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown-with-value-focused.snap.html
@@ -1,46 +1,50 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-formbox" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<span class="sv-string-viewer">3</span>
-					<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" tabindex="-1" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-formbox" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<span class="sv-string-viewer">3</span>
+							<input autocomplete="off" class="sd-dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" tabindex="-1" type="text">
+						</div>
 					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/rating-as-dropdown.snap.html b/tests/markup/snapshots/rating-as-dropdown.snap.html
index 8306d46084..b9575871a2 100644
--- a/tests/markup/snapshots/rating-as-dropdown.snap.html
+++ b/tests/markup/snapshots/rating-as-dropdown.snap.html
@@ -1,34 +1,38 @@
-<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input">
-				<div class="sd-dropdown__input-prefix-wrapper">
-					<input autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_undefined" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-formbox" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input">
+						<div class="sd-dropdown__input-prefix-wrapper">
+							<input autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0i_undefined" inputmode="text" placeholder="Select..." readonly="" tabindex="-1" type="text">
+						</div>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+				<div>
+					<div class="sv-dropdown-popup sv-popup sv-popup--menu-popup sv-single-select-list" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/rating-as-wrappable.snap.html b/tests/markup/snapshots/rating-as-wrappable.snap.html
index 6183d6d90f..baefdcc82e 100644
--- a/tests/markup/snapshots/rating-as-wrappable.snap.html
+++ b/tests/markup/snapshots/rating-as-wrappable.snap.html
@@ -1,30 +1,34 @@
-<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-viewer">1</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-viewer">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-viewer">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-viewer">4</span>
-			</span>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-viewer">1</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-viewer">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-viewer">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-viewer">4</span>
+					</span>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-display-mode.snap.html b/tests/markup/snapshots/rating-display-mode.snap.html
index 711f1d636f..22768855bc 100644
--- a/tests/markup/snapshots/rating-display-mode.snap.html
+++ b/tests/markup/snapshots/rating-display-mode.snap.html
@@ -1,30 +1,34 @@
-<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-viewer">1</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-viewer">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-viewer">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" readonly="" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-viewer">4</span>
-			</span>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-viewer">1</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-viewer">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-viewer">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" readonly="" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-viewer">4</span>
+					</span>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-min-max-items.snap.html b/tests/markup/snapshots/rating-min-max-items.snap.html
index 574661bfb9..fbec59aef8 100644
--- a/tests/markup/snapshots/rating-min-max-items.snap.html
+++ b/tests/markup/snapshots/rating-min-max-items.snap.html
@@ -1,30 +1,34 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item sd-rating__item--allowhover">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-viewer">min</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-viewer">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-viewer">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover">
-			<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-viewer">max</span>
-			</span>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item sd-rating__item--allowhover">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-viewer">min</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-viewer">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-viewer">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover">
+					<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-viewer">max</span>
+					</span>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-min-max.snap.html b/tests/markup/snapshots/rating-min-max.snap.html
index 36c7992d7d..994e053c79 100644
--- a/tests/markup/snapshots/rating-min-max.snap.html
+++ b/tests/markup/snapshots/rating-min-max.snap.html
@@ -1,36 +1,40 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<span class="sd-rating__item-text sd-rating__min-text">
-			<span class="sv-string-viewer">min</span>
-		</span>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-viewer">1</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-viewer">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-viewer">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-viewer">4</span>
-			</span>
-		</label>
-		<span class="sd-rating__item-text sd-rating__max-text">
-			<span class="sv-string-viewer">max</span>
-		</span>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<span class="sd-rating__item-text sd-rating__min-text">
+					<span class="sv-string-viewer">min</span>
+				</span>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-viewer">1</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-viewer">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-viewer">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-viewer">4</span>
+					</span>
+				</label>
+				<span class="sd-rating__item-text sd-rating__max-text">
+					<span class="sv-string-viewer">max</span>
+				</span>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-simple-disabled.snap.html b/tests/markup/snapshots/rating-simple-disabled.snap.html
index b7207c3acd..369c94cabf 100644
--- a/tests/markup/snapshots/rating-simple-disabled.snap.html
+++ b/tests/markup/snapshots/rating-simple-disabled.snap.html
@@ -1,30 +1,34 @@
-<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-editor" contenteditable="true">1</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-editor" contenteditable="true">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_2" name="name_testid0" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-editor" contenteditable="true">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_3" name="name_testid0" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-editor" contenteditable="true">4</span>
-			</span>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-editor" contenteditable="true">1</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-editor" contenteditable="true">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_2" name="name_testid0" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-editor" contenteditable="true">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_3" name="name_testid0" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-editor" contenteditable="true">4</span>
+					</span>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-simple-readonly.snap.html b/tests/markup/snapshots/rating-simple-readonly.snap.html
index 31b04e40e9..93721c4207 100644
--- a/tests/markup/snapshots/rating-simple-readonly.snap.html
+++ b/tests/markup/snapshots/rating-simple-readonly.snap.html
@@ -1,30 +1,34 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-viewer">1</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-viewer">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-viewer">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
-			<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" readonly="" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-viewer">4</span>
-			</span>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-viewer">1</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-viewer">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-viewer">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--fixed-size sd-rating__item--readonly">
+					<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" readonly="" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-viewer">4</span>
+					</span>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-simple.snap.html b/tests/markup/snapshots/rating-simple.snap.html
index 2693ac1343..0203e54179 100644
--- a/tests/markup/snapshots/rating-simple.snap.html
+++ b/tests/markup/snapshots/rating-simple.snap.html
@@ -1,30 +1,34 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<span class="sd-rating__item-text" data-text="1">
-				<span class="sv-string-viewer">1</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<span class="sd-rating__item-text" data-text="2">
-				<span class="sv-string-viewer">2</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
-			<span class="sd-rating__item-text" data-text="3">
-				<span class="sv-string-viewer">3</span>
-			</span>
-		</label>
-		<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
-			<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
-			<span class="sd-rating__item-text" data-text="4">
-				<span class="sv-string-viewer">4</span>
-			</span>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<span class="sd-rating__item-text" data-text="1">
+						<span class="sv-string-viewer">1</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<span class="sd-rating__item-text" data-text="2">
+						<span class="sv-string-viewer">2</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" type="radio" value="3">
+					<span class="sd-rating__item-text" data-text="3">
+						<span class="sv-string-viewer">3</span>
+					</span>
+				</label>
+				<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
+					<input class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" type="radio" value="4">
+					<span class="sd-rating__item-text" data-text="4">
+						<span class="sv-string-viewer">4</span>
+					</span>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-smileys-disabled.snap.html b/tests/markup/snapshots/rating-smileys-disabled.snap.html
index 46d57bc8a7..c9449b895f 100644
--- a/tests/markup/snapshots/rating-smileys-disabled.snap.html
+++ b/tests/markup/snapshots/rating-smileys-disabled.snap.html
@@ -1,20 +1,24 @@
-<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item-smiley" title="1">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-smiley-rate4-24x24">
-				</use>
-			</svg>
-		</label>
-		<label class="sd-rating__item-smiley" title="2">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-smiley-rate8-24x24">
-				</use>
-			</svg>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item-smiley" title="1">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-smiley-rate4-24x24" class="">
+						</use>
+					</svg>
+				</label>
+				<label class="sd-rating__item-smiley" title="2">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-smiley-rate8-24x24" class="">
+						</use>
+					</svg>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-smileys-readonly.snap.html b/tests/markup/snapshots/rating-smileys-readonly.snap.html
index 4af3692e2c..6e45eaac05 100644
--- a/tests/markup/snapshots/rating-smileys-readonly.snap.html
+++ b/tests/markup/snapshots/rating-smileys-readonly.snap.html
@@ -1,20 +1,24 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item-smiley sd-rating__item-smiley--readonly" title="1">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-smiley-rate4-24x24" class="">
-				</use>
-			</svg>
-		</label>
-		<label class="sd-rating__item-smiley sd-rating__item-smiley--readonly" title="2">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-smiley-rate8-24x24" class="">
-				</use>
-			</svg>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item-smiley sd-rating__item-smiley--readonly" title="1">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-smiley-rate4-24x24" class="">
+						</use>
+					</svg>
+				</label>
+				<label class="sd-rating__item-smiley sd-rating__item-smiley--readonly" title="2">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-smiley-rate8-24x24" class="">
+						</use>
+					</svg>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-smileys.snap.html b/tests/markup/snapshots/rating-smileys.snap.html
index f3297f31b4..7b219b7e34 100644
--- a/tests/markup/snapshots/rating-smileys.snap.html
+++ b/tests/markup/snapshots/rating-smileys.snap.html
@@ -1,20 +1,24 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item-smiley sd-rating__item-smiley--allowhover" title="1">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-smiley-rate4-24x24" class="">
-				</use>
-			</svg>
-		</label>
-		<label class="sd-rating__item-smiley sd-rating__item-smiley--allowhover" title="2">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-smiley-rate8-24x24" class="">
-				</use>
-			</svg>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item-smiley sd-rating__item-smiley--allowhover" title="1">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-smiley-rate4-24x24" class="">
+						</use>
+					</svg>
+				</label>
+				<label class="sd-rating__item-smiley sd-rating__item-smiley--allowhover" title="2">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-smiley-rate8-24x24" class="">
+						</use>
+					</svg>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-stars-disabled.snap.html b/tests/markup/snapshots/rating-stars-disabled.snap.html
index 9ea65e378f..ae4a41bf92 100644
--- a/tests/markup/snapshots/rating-stars-disabled.snap.html
+++ b/tests/markup/snapshots/rating-stars-disabled.snap.html
@@ -1,28 +1,32 @@
-<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item-star" title="1">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<svg class="sv-star sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star" class="">
-				</use>
-			</svg>
-			<svg class="sv-star-2 sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star-2" class="">
-				</use>
-			</svg>
-		</label>
-		<label class="sd-rating__item-star" title="2">
-			<input class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<svg class="sv-star sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star" class="">
-				</use>
-			</svg>
-			<svg class="sv-star-2 sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star-2" class="">
-				</use>
-			</svg>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-rating--wrappable sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item-star" title="1">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<svg class="sv-star sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star" class="">
+						</use>
+					</svg>
+					<svg class="sv-star-2 sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star-2" class="">
+						</use>
+					</svg>
+				</label>
+				<label class="sd-rating__item-star" title="2">
+					<input class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<svg class="sv-star sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star" class="">
+						</use>
+					</svg>
+					<svg class="sv-star-2 sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star-2" class="">
+						</use>
+					</svg>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-stars-readonly.snap.html b/tests/markup/snapshots/rating-stars-readonly.snap.html
index a12aea28a7..d493227dff 100644
--- a/tests/markup/snapshots/rating-stars-readonly.snap.html
+++ b/tests/markup/snapshots/rating-stars-readonly.snap.html
@@ -1,28 +1,32 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="1">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<svg class="sv-star sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star" class="">
-				</use>
-			</svg>
-			<svg class="sv-star-2 sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star-2" class="">
-				</use>
-			</svg>
-		</label>
-		<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="2">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<svg class="sv-star sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star" class="">
-				</use>
-			</svg>
-			<svg class="sv-star-2 sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star-2" class="">
-				</use>
-			</svg>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="1">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<svg class="sv-star sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star" class="">
+						</use>
+					</svg>
+					<svg class="sv-star-2 sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star-2" class="">
+						</use>
+					</svg>
+				</label>
+				<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="2">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<svg class="sv-star sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star" class="">
+						</use>
+					</svg>
+					<svg class="sv-star-2 sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star-2" class="">
+						</use>
+					</svg>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/rating-stars.snap.html b/tests/markup/snapshots/rating-stars.snap.html
index a12aea28a7..d493227dff 100644
--- a/tests/markup/snapshots/rating-stars.snap.html
+++ b/tests/markup/snapshots/rating-stars.snap.html
@@ -1,28 +1,32 @@
-<div class="sd-rating sd-scrollable-container">
-	<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
-		<legend class="sv-hidden" role="presentation">
-		</legend>
-		<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="1">
-			<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
-			<svg class="sv-star sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star" class="">
-				</use>
-			</svg>
-			<svg class="sv-star-2 sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star-2" class="">
-				</use>
-			</svg>
-		</label>
-		<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="2">
-			<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
-			<svg class="sv-star sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star" class="">
-				</use>
-			</svg>
-			<svg class="sv-star-2 sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-rating-star-2" class="">
-				</use>
-			</svg>
-		</label>
-	</fieldset>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-rating sd-scrollable-container">
+			<fieldset aria-invalid="false" aria-label="Question title" aria-required="false" role="radiogroup">
+				<legend class="sv-hidden" role="presentation">
+				</legend>
+				<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="1">
+					<input class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" type="radio" value="1">
+					<svg class="sv-star sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star" class="">
+						</use>
+					</svg>
+					<svg class="sv-star-2 sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star-2" class="">
+						</use>
+					</svg>
+				</label>
+				<label class="sd-rating__item-star sd-rating__item-star--allowhover" title="2">
+					<input class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" type="radio" value="2">
+					<svg class="sv-star sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star" class="">
+						</use>
+					</svg>
+					<svg class="sv-star-2 sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-rating-star-2" class="">
+						</use>
+					</svg>
+				</label>
+			</fieldset>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad-loading.snap.html b/tests/markup/snapshots/signaturepad-loading.snap.html
index 6ba304c9eb..b1d859c506 100644
--- a/tests/markup/snapshots/signaturepad-loading.snap.html
+++ b/tests/markup/snapshots/signaturepad-loading.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
-	<div class="sjs_sp_placeholder" style="display:none;">
-		<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
-	</div>
-	<div>
-		<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
-		</canvas>
-	</div>
-	<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
-	</div>
-	<div class="sd-signaturepad__loading-indicator">
-		<div class="sd-loading-indicator">
-			<svg class="sv-svg-icon" role="presentation">
-				<use xlink:href="#icon-loading-48x48" class="">
-				</use>
-			</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
+			<div class="sjs_sp_placeholder" style="display:none;">
+				<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
+			</div>
+			<div>
+				<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
+				</canvas>
+			</div>
+			<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+			</div>
+			<div class="sd-signaturepad__loading-indicator">
+				<div class="sd-loading-indicator">
+					<svg class="sv-svg-icon" role="presentation">
+						<use xlink:href="#icon-loading-48x48" class="">
+						</use>
+					</svg>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad-readonly.snap.html b/tests/markup/snapshots/signaturepad-readonly.snap.html
index 65d80881e9..ef75ad2309 100644
--- a/tests/markup/snapshots/signaturepad-readonly.snap.html
+++ b/tests/markup/snapshots/signaturepad-readonly.snap.html
@@ -1,11 +1,15 @@
-<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
-	<div class="sjs_sp_placeholder">
-		<span class="sv-string-viewer sv-string-viewer--multiline">No signature</span>
-	</div>
-	<div>
-		<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:auto; width:300px;" tabindex="-1" width="300">
-		</canvas>
-	</div>
-	<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
+			<div class="sjs_sp_placeholder">
+				<span class="sv-string-viewer sv-string-viewer--multiline">No signature</span>
+			</div>
+			<div>
+				<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:auto; width:300px;" tabindex="-1" width="300">
+				</canvas>
+			</div>
+			<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad-scaled.snap.html b/tests/markup/snapshots/signaturepad-scaled.snap.html
index c410a1a948..8605a617ab 100644
--- a/tests/markup/snapshots/signaturepad-scaled.snap.html
+++ b/tests/markup/snapshots/signaturepad-scaled.snap.html
@@ -1,12 +1,16 @@
-<div class="sd-signaturepad sjs_sp_container" style="width:100%;">
-	<div class="sjs_sp_placeholder">
-		<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
-	</div>
-	<div>
-		<img class="sd-signaturepad__background-image sjs_sp__background-image" role="presentation" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="width:100%;">
-			<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:100%;" tabindex="-1" width="300">
-			</canvas>
-		</div>
-		<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-signaturepad sjs_sp_container" style="width:100%;">
+			<div class="sjs_sp_placeholder">
+				<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
+			</div>
+			<div>
+				<img class="sd-signaturepad__background-image sjs_sp__background-image" role="presentation" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="width:100%;">
+					<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:100%;" tabindex="-1" width="300">
+					</canvas>
+				</div>
+				<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+				</div>
+			</div>
 		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad-value.snap.html b/tests/markup/snapshots/signaturepad-value.snap.html
index 5df9a40f8a..f7c467b74d 100644
--- a/tests/markup/snapshots/signaturepad-value.snap.html
+++ b/tests/markup/snapshots/signaturepad-value.snap.html
@@ -1,21 +1,25 @@
-<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
-	<div class="sjs_sp_placeholder" style="display:none;">
-		<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
-	</div>
-	<div>
-		<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
-		</canvas>
-	</div>
-	<div class="sd-action-bar sd-action-bar--default-size sd-signaturepad__controls sjs_sp_controls">
-		<div class="sd-action-bar__item">
-			<div class="sd-action-bar__item-content">
-				<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small sd-signaturepad__clear sjs_sp_clear" role="button" tabindex="0" title="Clear" type="button">
-					<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
-						<use xlink:href="#icon-clear-24x24" class="">
-						</use>
-						<title class="">Clear</title>
-					</svg>
-				</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
+			<div class="sjs_sp_placeholder" style="display:none;">
+				<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
+			</div>
+			<div>
+				<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
+				</canvas>
+			</div>
+			<div class="sd-action-bar sd-action-bar--default-size sd-signaturepad__controls sjs_sp_controls">
+				<div class="sd-action-bar__item">
+					<div class="sd-action-bar__item-content">
+						<button class="sd-action sd-action--alert sd-action--quaternary-surface sd-action--small sd-signaturepad__clear sjs_sp_clear" role="button" tabindex="0" title="Clear" type="button">
+							<svg class="sd-action__icon sv-svg-icon" role="presentation" style="height:24px; width:24px;">
+								<use xlink:href="#icon-clear-24x24" class="">
+								</use>
+								<title class="">Clear</title>
+							</svg>
+						</button>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html b/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
index 083f93501f..c8a86fc7c8 100644
--- a/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
+++ b/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
@@ -1,12 +1,16 @@
-<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
-	<div class="sjs_sp_placeholder">
-		<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
-	</div>
-	<div>
-		<img class="sd-signaturepad__background-image sjs_sp__background-image" role="presentation" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="width:300px;">
-			<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
-			</canvas>
-		</div>
-		<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
+			<div class="sjs_sp_placeholder">
+				<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
+			</div>
+			<div>
+				<img class="sd-signaturepad__background-image sjs_sp__background-image" role="presentation" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="width:300px;">
+					<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
+					</canvas>
+				</div>
+				<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+				</div>
+			</div>
 		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad.snap.html b/tests/markup/snapshots/signaturepad.snap.html
index bcb709b720..086a53c86b 100644
--- a/tests/markup/snapshots/signaturepad.snap.html
+++ b/tests/markup/snapshots/signaturepad.snap.html
@@ -1,11 +1,15 @@
-<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
-	<div class="sjs_sp_placeholder">
-		<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
-	</div>
-	<div>
-		<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
-		</canvas>
-	</div>
-	<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-signaturepad sjs_sp_container" style="width:300px;">
+			<div class="sjs_sp_placeholder">
+				<span class="sv-string-viewer sv-string-viewer--multiline">Sign here</span>
+			</div>
+			<div>
+				<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
+				</canvas>
+			</div>
+			<div class="sd-action-bar sd-action-bar--default-size sd-action-bar--empty sd-signaturepad__controls sjs_sp_controls">
+			</div>
+		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/slider-custom-labels.snap.html b/tests/markup/snapshots/slider-custom-labels.snap.html
index fb9a70cb2f..bc23a7ef37 100644
--- a/tests/markup/snapshots/slider-custom-labels.snap.html
+++ b/tests/markup/snapshots/slider-custom-labels.snap.html
@@ -1,81 +1,85 @@
-<div class="sd-slider sd-slider--labels-show-value-text-mode sd-slider--single">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:100%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:100%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">0</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider sd-slider--labels-show-value-text-mode sd-slider--single">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:100%;">
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">0</div>
-					<div class="sd-slider__label-text sd-slider__label-text--secondary" title="Lowest">
-						<span class="sv-string-viewer">Lowest</span>
+					<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:100%;">
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">0</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">0</div>
+							<div class="sd-slider__label-text sd-slider__label-text--secondary" title="Lowest">
+								<span class="sv-string-viewer">Lowest</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="Middle">
-						<span class="sv-string-viewer">Middle</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">100</div>
-					<div class="sd-slider__label-text sd-slider__label-text--secondary" title=" Highest">
-						<span class="sv-string-viewer"> Highest</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="Middle">
+								<span class="sv-string-viewer">Middle</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">100</div>
+							<div class="sd-slider__label-text sd-slider__label-text--secondary" title=" Highest">
+								<span class="sv-string-viewer"> Highest</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/slider-default-value-range-mode.snap.html b/tests/markup/snapshots/slider-default-value-range-mode.snap.html
index efced7bf8f..005b4f9055 100644
--- a/tests/markup/snapshots/slider-default-value-range-mode.snap.html
+++ b/tests/markup/snapshots/slider-default-value-range-mode.snap.html
@@ -1,92 +1,96 @@
-<div class="sd-slider">
-	<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(30% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(30% - 20px - 20px);" tabindex="-1" type="range">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:30%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:40%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:30%; right:40%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container" style="left:30%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">30</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider">
+			<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(30% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(30% - 20px - 20px);" tabindex="-1" type="range">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:30%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:40%;">
 					</div>
-				</div>
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container" style="left:60%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">60</div>
+					<div class="sd-slider__range-track sd-slider__track" style="left:30%; right:40%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container" style="left:30%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">30</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">
-						<span class="sv-string-viewer">0</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container" style="left:60%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">60</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">
+								<span class="sv-string-viewer">0</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="60">
-						<span class="sv-string-viewer">60</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="60">
+								<span class="sv-string-viewer">60</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">
-						<span class="sv-string-viewer">100</span>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">
+								<span class="sv-string-viewer">100</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/slider-default-value-single-mode.snap.html b/tests/markup/snapshots/slider-default-value-single-mode.snap.html
index b6b45d96e8..5bbdb534d9 100644
--- a/tests/markup/snapshots/slider-default-value-single-mode.snap.html
+++ b/tests/markup/snapshots/slider-default-value-single-mode.snap.html
@@ -1,79 +1,83 @@
-<div class="sd-slider sd-slider--single">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:50%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:50%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container" style="left:50%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">50</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider sd-slider--single">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:50%;">
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">
-						<span class="sv-string-viewer">0</span>
+					<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:50%;">
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container" style="left:50%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">50</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">
+								<span class="sv-string-viewer">0</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="60">
-						<span class="sv-string-viewer">60</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">
-						<span class="sv-string-viewer">100</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="60">
+								<span class="sv-string-viewer">60</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">
+								<span class="sv-string-viewer">100</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/slider-range-mode.snap.html b/tests/markup/snapshots/slider-range-mode.snap.html
index 3a35cc173a..61f460e8ee 100644
--- a/tests/markup/snapshots/slider-range-mode.snap.html
+++ b/tests/markup/snapshots/slider-range-mode.snap.html
@@ -1,92 +1,96 @@
-<div class="sd-slider">
-	<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(0% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(100% - 20px - 20px);" tabindex="-1" type="range">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:0%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:0%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">0</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider">
+			<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(0% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(100% - 20px - 20px);" tabindex="-1" type="range">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:0%;">
 					</div>
-				</div>
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:100%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">100</div>
+					<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:0%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">0</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">
-						<span class="sv-string-viewer">0</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:100%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">100</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">
+								<span class="sv-string-viewer">0</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="60">
-						<span class="sv-string-viewer">60</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="60">
+								<span class="sv-string-viewer">60</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">
-						<span class="sv-string-viewer">100</span>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">
+								<span class="sv-string-viewer">100</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/slider-read-only-range-mode.snap.html b/tests/markup/snapshots/slider-read-only-range-mode.snap.html
index efced7bf8f..005b4f9055 100644
--- a/tests/markup/snapshots/slider-read-only-range-mode.snap.html
+++ b/tests/markup/snapshots/slider-read-only-range-mode.snap.html
@@ -1,92 +1,96 @@
-<div class="sd-slider">
-	<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(30% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(30% - 20px - 20px);" tabindex="-1" type="range">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:30%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:40%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:30%; right:40%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container" style="left:30%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">30</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider">
+			<input aria-hidden="true" class="sd-slider__input" id="testid0-sjs-slider-input-range-input" max="100" min="0" name="range-input" step="1" style="--sjs-range-slider-range-input-thumb-left:calc(30% + 20px); --sjs-range-slider-range-input-thumb-position:absolute; --sjs-range-slider-range-input-thumb-width:calc(30% - 20px - 20px);" tabindex="-1" type="range">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:30%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:40%;">
 					</div>
-				</div>
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container" style="left:60%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">60</div>
+					<div class="sd-slider__range-track sd-slider__track" style="left:30%; right:40%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container" style="left:30%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">30</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">
-						<span class="sv-string-viewer">0</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-1" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container" style="left:60%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">60</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">
+								<span class="sv-string-viewer">0</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="60">
-						<span class="sv-string-viewer">60</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="60">
+								<span class="sv-string-viewer">60</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">
-						<span class="sv-string-viewer">100</span>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">
+								<span class="sv-string-viewer">100</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/slider-read-only-single-mode.snap.html b/tests/markup/snapshots/slider-read-only-single-mode.snap.html
index b6b45d96e8..5bbdb534d9 100644
--- a/tests/markup/snapshots/slider-read-only-single-mode.snap.html
+++ b/tests/markup/snapshots/slider-read-only-single-mode.snap.html
@@ -1,79 +1,83 @@
-<div class="sd-slider sd-slider--single">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:50%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:50%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container" style="left:50%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">50</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider sd-slider--single">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:50%;">
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">
-						<span class="sv-string-viewer">0</span>
+					<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:50%;">
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container" style="left:50%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">50</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">
+								<span class="sv-string-viewer">0</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="60">
-						<span class="sv-string-viewer">60</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">
-						<span class="sv-string-viewer">100</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="60">
+								<span class="sv-string-viewer">60</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">
+								<span class="sv-string-viewer">100</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/slider-single-mode.snap.html b/tests/markup/snapshots/slider-single-mode.snap.html
index 2105ac1d90..a1a42b8700 100644
--- a/tests/markup/snapshots/slider-single-mode.snap.html
+++ b/tests/markup/snapshots/slider-single-mode.snap.html
@@ -1,79 +1,83 @@
-<div class="sd-slider sd-slider--single">
-	<div class="sd-slider-container">
-		<div class="sd-slider-container__slider">
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
-			</div>
-			<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:100%;">
-			</div>
-			<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:100%;">
-			</div>
-			<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
-			<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
-				<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
-					<div class="sd-slider__tooltip-panel">
-						<div class="sd-slider__tooltip-value">0</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-slider sd-slider--single">
+			<div class="sd-slider-container">
+				<div class="sd-slider-container__slider">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--left sd-slider__track" style="width:0%;">
 					</div>
-				</div>
-				<div class="sd-slider__thumb">
-					<div class="sd-slider__thumb-dot">
+					<div class="sd-slider__inverse-track sd-slider__inverse-track--right sd-slider__track" style="width:100%;">
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="sd-slider-labels-container">
-		<div>
-			<div class="sd-slider__label" style="left:0%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="0">
-						<span class="sv-string-viewer">0</span>
+					<div class="sd-slider__range-track sd-slider__track" style="left:0%; right:100%;">
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:20%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="20">
-						<span class="sv-string-viewer">20</span>
+					<input aria-invalid="false" aria-label="name" aria-required="false" class="sd-slider__input" id="testid0-sjs-slider-input-0" max="100" min="0" step="1" type="range">
+					<div class="sd-slider__thumb-container sd-slider__thumb-container--indeterminate" style="left:0%;">
+						<div class="sd-slider__tooltip sd-slider__tooltip--on-hover">
+							<div class="sd-slider__tooltip-panel">
+								<div class="sd-slider__tooltip-value">0</div>
+							</div>
+						</div>
+						<div class="sd-slider__thumb">
+							<div class="sd-slider__thumb-dot">
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="sd-slider__label" style="left:40%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="40">
-						<span class="sv-string-viewer">40</span>
+			<div class="sd-slider-labels-container">
+				<div>
+					<div class="sd-slider__label" style="left:0%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="0">
+								<span class="sv-string-viewer">0</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:60%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="60">
-						<span class="sv-string-viewer">60</span>
+					<div class="sd-slider__label" style="left:20%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="20">
+								<span class="sv-string-viewer">20</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:80%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="80">
-						<span class="sv-string-viewer">80</span>
+					<div class="sd-slider__label" style="left:40%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="40">
+								<span class="sv-string-viewer">40</span>
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-slider__label" style="left:100%; max-width:20%;">
-				<div class="sd-slider__label-tick">
-				</div>
-				<div class="sd-slider__label-text-container">
-					<div class="sd-slider__label-text" title="100">
-						<span class="sv-string-viewer">100</span>
+					<div class="sd-slider__label" style="left:60%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="60">
+								<span class="sv-string-viewer">60</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:80%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="80">
+								<span class="sv-string-viewer">80</span>
+							</div>
+						</div>
+					</div>
+					<div class="sd-slider__label" style="left:100%; max-width:20%;">
+						<div class="sd-slider__label-tick">
+						</div>
+						<div class="sd-slider__label-text-container">
+							<div class="sd-slider__label-text" title="100">
+								<span class="sv-string-viewer">100</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/survey-navigation.snap.html b/tests/markup/snapshots/survey-navigation.snap.html
index 183e36f65b..83619248a7 100644
--- a/tests/markup/snapshots/survey-navigation.snap.html
+++ b/tests/markup/snapshots/survey-navigation.snap.html
@@ -5,12 +5,18 @@
 		<div class="sv-components-column sv-components-column--expandable">
 			<div class="sd-body sd-body--static" id="testidpage0">
 				<div class="sd-body__page sd-page sd-page__empty-header">
-					<div class="sd-clearfix sd-page__row sd-row">
-						<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-							<div class="sd-element sd-question sd-question--html sd-row__question" data-name="q1" id="testid0">
-								<div class="sd-element__content sd-question__content" role="presentation">
-									<div class="sd-html">
-										<div>
+					<div class="sd-page__content">
+						<div class="sd-clearfix sd-page__row sd-row">
+							<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+								<div class="sd-element sd-question sd-question--html sd-row__question" data-name="q1" id="testid0">
+									<div class="sd-question__container">
+										<div class="sd-question__header-and-content-container">
+											<div class="sd-element__content sd-question__content" role="presentation">
+												<div class="sd-html">
+													<div>
+													</div>
+												</div>
+											</div>
 										</div>
 									</div>
 								</div>
diff --git a/tests/markup/snapshots/tagbox-disabled-with-value.snap.html b/tests/markup/snapshots/tagbox-disabled-with-value.snap.html
index 89cd230e59..3a8ada31d6 100644
--- a/tests/markup/snapshots/tagbox-disabled-with-value.snap.html
+++ b/tests/markup/snapshots/tagbox-disabled-with-value.snap.html
@@ -1,42 +1,46 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-expanded="false" aria-invalid="false" aria-label="Question title" class="sd-dropdown sd-formbox sd-formbox--editable sd-tagbox" disabled="" role="combobox">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox-item">
-					<div class="sd-tagbox-item__text">
-						<span class="sv-string-editor" contenteditable="true">item1</span>
-					</div>
-					<div class="sd-tagbox-item__clean">
-						<div class="sd-tagbox-item__clean-button" tabindex="0">
-							<svg class="sd-tagbox-item__clean-button-svg sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-clear-16x16" class="">
-								</use>
-							</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-expanded="false" aria-invalid="false" aria-label="Question title" class="sd-dropdown sd-formbox sd-formbox--editable sd-tagbox" disabled="" role="combobox">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox-item">
+							<div class="sd-tagbox-item__text">
+								<span class="sv-string-editor" contenteditable="true">item1</span>
+							</div>
+							<div class="sd-tagbox-item__clean">
+								<div class="sd-tagbox-item__clean-button" tabindex="0">
+									<svg class="sd-tagbox-item__clean-button-svg sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-clear-16x16" class="">
+										</use>
+									</svg>
+								</div>
+							</div>
 						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
-					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/tagbox-disabled-without-value.snap.html b/tests/markup/snapshots/tagbox-disabled-without-value.snap.html
index 4bba24fd83..dc0b1c6592 100644
--- a/tests/markup/snapshots/tagbox-disabled-without-value.snap.html
+++ b/tests/markup/snapshots/tagbox-disabled-without-value.snap.html
@@ -1,23 +1,27 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-expanded="false" aria-invalid="false" aria-label="Question title" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty" disabled="" role="combobox">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" disabled="" inputmode="text" placeholder="Select..." readonly="" size="1" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-expanded="false" aria-invalid="false" aria-label="Question title" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty" disabled="" role="combobox">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" disabled="" inputmode="text" placeholder="Select..." readonly="" size="1" type="text">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/tagbox-mobile.snap.html b/tests/markup/snapshots/tagbox-mobile.snap.html
index 31dc5695f9..1fdc80204b 100644
--- a/tests/markup/snapshots/tagbox-mobile.snap.html
+++ b/tests/markup/snapshots/tagbox-mobile.snap.html
@@ -1,82 +1,86 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="none" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="none" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-tablet" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__filter">
-										<div class="sd-selectlist-filter__box">
-											<div class="sd-selectlist__filter-icon">
-												<svg class="sv-svg-icon" role="presentation">
-													<use xlink:href="#icon-search-24x24" class="">
-													</use>
-												</svg>
+				<div>
+					<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-tablet" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__filter">
+												<div class="sd-selectlist-filter__box">
+													<div class="sd-selectlist__filter-icon">
+														<svg class="sv-svg-icon" role="presentation">
+															<use xlink:href="#icon-search-24x24" class="">
+															</use>
+														</svg>
+													</div>
+													<input aria-label="Type to search..." class="sd-selectlist__input" placeholder="Type to search..." type="text">
+												</div>
 											</div>
-											<input aria-label="Type to search..." class="sd-selectlist__input" placeholder="Type to search..." type="text" value="">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
+											</div>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
 										</div>
 									</div>
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
+								</div>
+								<div class="sv-popup__body-footer">
+									<div class="sd-action-bar sd-action-bar--default-size sv-menu-footer-action-bar">
+										<div class="sd-action-bar__item">
+											<div class="sd-action-bar__item-content">
+												<button class="sd-action sd-action--brand sd-action--small sd-action--tertiary sv-popup__button sv-popup__button--cancel" role="button" tabindex="0" type="button">
+													<span class="sd-action__title">Cancel</span>
+												</button>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
+										</div>
+										<div class="sd-action-bar__item sd-action-bar__item--space">
+											<div class="sd-action-bar__item-content">
+												<button class="sd-action sd-action--brand sd-action--small sd-action--tertiary sv-popup__button sv-popup__button--done" disabled="" role="button" tabindex="0" type="button">
+													<span class="sd-action__title">OK</span>
+												</button>
 											</div>
-										</li>
-									</ul>
-								</div>
-							</div>
-						</div>
-						<div class="sv-popup__body-footer">
-							<div class="sd-action-bar sd-action-bar--default-size sv-menu-footer-action-bar">
-								<div class="sd-action-bar__item">
-									<div class="sd-action-bar__item-content">
-										<button class="sd-action sd-action--brand sd-action--small sd-action--tertiary sv-popup__button sv-popup__button--cancel" role="button" tabindex="0" type="button">
-											<span class="sd-action__title">Cancel</span>
-										</button>
-									</div>
-								</div>
-								<div class="sd-action-bar__item sd-action-bar__item--space">
-									<div class="sd-action-bar__item-content">
-										<button class="sd-action sd-action--brand sd-action--small sd-action--tertiary sv-popup__button sv-popup__button--done" disabled="" role="button" tabindex="0" type="button">
-											<span class="sd-action__title">OK</span>
-										</button>
+										</div>
 									</div>
 								</div>
 							</div>
diff --git a/tests/markup/snapshots/tagbox-readonly-with-value.snap.html b/tests/markup/snapshots/tagbox-readonly-with-value.snap.html
index c543486633..f95a65000c 100644
--- a/tests/markup/snapshots/tagbox-readonly-with-value.snap.html
+++ b/tests/markup/snapshots/tagbox-readonly-with-value.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-formbox sd-formbox--readonly sd-tagbox sd-tagbox--readonly" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<span class="sv-string-viewer">item1, item3</span>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-formbox sd-formbox--readonly sd-tagbox sd-tagbox--readonly" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<span class="sv-string-viewer">item1, item3</span>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/tagbox-readonly.snap.html b/tests/markup/snapshots/tagbox-readonly.snap.html
index 60693965cf..06cd92e9eb 100644
--- a/tests/markup/snapshots/tagbox-readonly.snap.html
+++ b/tests/markup/snapshots/tagbox-readonly.snap.html
@@ -1,19 +1,23 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--readonly sd-tagbox sd-tagbox--empty sd-tagbox--readonly" id="testid0i" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<span class="sv-string-viewer">Select...</span>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-disabled="true" aria-expanded="false" aria-label="Question title" aria-readonly="true" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--readonly sd-tagbox sd-tagbox--empty sd-tagbox--readonly" id="testid0i" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<span class="sv-string-viewer">Select...</span>
+					</div>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" disabled="" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/tests/markup/snapshots/tagbox-selected.snap.html b/tests/markup/snapshots/tagbox-selected.snap.html
index 09accbc51d..6a3fa19a64 100644
--- a/tests/markup/snapshots/tagbox-selected.snap.html
+++ b/tests/markup/snapshots/tagbox-selected.snap.html
@@ -1,78 +1,82 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-formbox sd-formbox--editable sd-tagbox">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox-item">
-					<div class="sd-tagbox-item__text">
-						<span class="sv-string-viewer">item1</span>
-					</div>
-					<div class="sd-tagbox-item__clean">
-						<div class="sd-tagbox-item__clean-button" tabindex="0">
-							<svg class="sd-tagbox-item__clean-button-svg sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-clear-16x16" class="">
-								</use>
-							</svg>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-formbox sd-formbox--editable sd-tagbox">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox-item">
+							<div class="sd-tagbox-item__text">
+								<span class="sv-string-viewer">item1</span>
+							</div>
+							<div class="sd-tagbox-item__clean">
+								<div class="sd-tagbox-item__clean-button" tabindex="0">
+									<svg class="sd-tagbox-item__clean-button-svg sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-clear-16x16" class="">
+										</use>
+									</svg>
+								</div>
+							</div>
+						</div>
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" size="1" type="text">
+							</div>
 						</div>
 					</div>
-				</div>
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" size="1" type="text">
-					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-clean-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-cancel-24x24" class="">
-								</use>
-								<title class="">Clear</title>
-							</svg>
-						</button>
-					</div>
-				</div>
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-clean-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Clear" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-cancel-24x24" class="">
+										</use>
+										<title class="">Clear</title>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="true" class="sd-selectlist__item sd-selectlist__item--selected sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
+				<div>
+					<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="true" class="sd-selectlist__item sd-selectlist__item--selected sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/tagbox-without-clear-button.snap.html b/tests/markup/snapshots/tagbox-without-clear-button.snap.html
index e376e9e9a7..cff491ff38 100644
--- a/tests/markup/snapshots/tagbox-without-clear-button.snap.html
+++ b/tests/markup/snapshots/tagbox-without-clear-button.snap.html
@@ -1,54 +1,58 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
+				<div>
+					<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/tagbox-without-search.snap.html b/tests/markup/snapshots/tagbox-without-search.snap.html
index b4990951d9..4511302969 100644
--- a/tests/markup/snapshots/tagbox-without-search.snap.html
+++ b/tests/markup/snapshots/tagbox-without-search.snap.html
@@ -1,54 +1,58 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty" role="combobox" tabindex="0">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" size="1" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty" role="combobox" tabindex="0">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" size="1" type="text">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
+				<div>
+					<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/tagbox-without-textWrapEnabled.snap.html b/tests/markup/snapshots/tagbox-without-textWrapEnabled.snap.html
index e497c72452..e22cb6cd7d 100644
--- a/tests/markup/snapshots/tagbox-without-textWrapEnabled.snap.html
+++ b/tests/markup/snapshots/tagbox-without-textWrapEnabled.snap.html
@@ -1,54 +1,58 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
+				<div>
+					<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/tagbox.snap.html b/tests/markup/snapshots/tagbox.snap.html
index e376e9e9a7..cff491ff38 100644
--- a/tests/markup/snapshots/tagbox.snap.html
+++ b/tests/markup/snapshots/tagbox.snap.html
@@ -1,54 +1,58 @@
-<div class="sd-selectbase">
-	<div class="sv-dropdown_select-wrapper">
-		<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
-			<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
-				<div class="sd-tagbox__hint">
-					<div class="sd-tagbox__hint-suffix-wrapper">
-						<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--dropdown sd-question__content--tagbox" role="presentation">
+		<div class="sd-selectbase">
+			<div class="sv-dropdown_select-wrapper">
+				<div class="sd-dropdown sd-dropdown--empty sd-formbox sd-formbox--editable sd-tagbox sd-tagbox--empty">
+					<div class="sd-dropdown__input sd-formbox__input sd-tagbox__input">
+						<div class="sd-tagbox__hint">
+							<div class="sd-tagbox__hint-suffix-wrapper">
+								<input aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input sd-tagbox__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" size="1" type="text">
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
-				<div class="sd-action-bar__item sd-editor-chevron-button">
-					<div class="sd-action-bar__item-content">
-						<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
-							<svg class="sd-action__icon sv-svg-icon" role="presentation">
-								<use xlink:href="#icon-chevrondown-24x24" class="">
-								</use>
-								<title class="">Select</title>
-							</svg>
-						</button>
+					<div class="sd-action-bar sd-action-bar--default-size sd-formbox__group">
+						<div class="sd-action-bar__item sd-editor-chevron-button">
+							<div class="sd-action-bar__item-content">
+								<button class="sd-action sd-action--neutral sd-action--small sd-action--tertiary" role="button" tabindex="-1" title="Select" type="button">
+									<svg class="sd-action__icon sv-svg-icon" role="presentation">
+										<use xlink:href="#icon-chevrondown-24x24" class="">
+										</use>
+										<title class="">Select</title>
+									</svg>
+								</button>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-		<div>
-			<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
-				<div class="sv-popup__container">
-					<div class="sv-popup__body-content">
-						<div class="sv-popup__scrolling-content">
-							<div class="sv-popup__content">
-								<div class="sd-selectlist__container">
-									<div class="sd-selectlist__empty-container" style="display:none;">
-										<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
-									</div>
-									<ul class="sd-selectlist" role="listbox">
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item1</span>
+				<div>
+					<div class="sv-dropdown-popup sv-multi-select-list sv-popup sv-popup--menu-popup" style="display:none;" tabindex="-1">
+						<div class="sv-popup__container">
+							<div class="sv-popup__body-content">
+								<div class="sv-popup__scrolling-content">
+									<div class="sv-popup__content">
+										<div class="sd-selectlist__container">
+											<div class="sd-selectlist__empty-container" style="display:none;">
+												<div aria-label="No data to display" class="sd-selectlist__empty-text">No data to display</div>
 											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item2</span>
-											</div>
-										</li>
-										<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
-											<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
-												<span class="sv-string-viewer">item3</span>
-											</div>
-										</li>
-									</ul>
+											<ul class="sd-selectlist" role="listbox">
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item1</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item2</span>
+													</div>
+												</li>
+												<li aria-selected="false" class="sd-selectlist__item sd-selectlist__item-text--wrap" role="option" tabindex="-1">
+													<div class="sd-selectlist__item-body" style="--sjs-list-item-level:1;">
+														<span class="sv-string-viewer">item3</span>
+													</div>
+												</li>
+											</ul>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/text-datalist.snap.html b/tests/markup/snapshots/text-datalist.snap.html
index 65e1a4413a..470a795c3b 100644
--- a/tests/markup/snapshots/text-datalist.snap.html
+++ b/tests/markup/snapshots/text-datalist.snap.html
@@ -1,11 +1,15 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0i" list="testid0_datalist" placeholder="" type="text">
-	<datalist id="testid0_datalist">
-		<option value="abc">
-		</option>
-		<option value="def">
-		</option>
-		<option value="ghk">
-		</option>
-	</datalist>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0i" list="testid0_datalist" placeholder="" type="text">
+			<datalist id="testid0_datalist">
+				<option value="abc">
+				</option>
+				<option value="def">
+				</option>
+				<option value="ghk">
+				</option>
+			</datalist>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-date.snap.html b/tests/markup/snapshots/text-date.snap.html
index 41993aa703..f3cdb7495a 100644
--- a/tests/markup/snapshots/text-date.snap.html
+++ b/tests/markup/snapshots/text-date.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="Question title" aria-required="true" autocomplete="bdate" class="sd-formbox__input" id="testid0i" max="2999-12-31" placeholder="" type="date">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="Question title" aria-required="true" autocomplete="bdate" class="sd-formbox__input" id="testid0i" max="2999-12-31" placeholder="" type="date">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-disabled.snap.html b/tests/markup/snapshots/text-disabled.snap.html
index 719c476134..4ae940efc1 100644
--- a/tests/markup/snapshots/text-disabled.snap.html
+++ b/tests/markup/snapshots/text-disabled.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" disabled="" id="testid0i" placeholder="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" disabled="" id="testid0i" placeholder="" type="text">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-div.snap.html b/tests/markup/snapshots/text-div.snap.html
index 9c63860be3..ef8ed2f97c 100644
--- a/tests/markup/snapshots/text-div.snap.html
+++ b/tests/markup/snapshots/text-div.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-formbox--readonly sd-text">
-	<div>test</div>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-formbox--readonly sd-text">
+			<div>test</div>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-email.snap.html b/tests/markup/snapshots/text-email.snap.html
index a7e38d37c4..a2f971b836 100644
--- a/tests/markup/snapshots/text-email.snap.html
+++ b/tests/markup/snapshots/text-email.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="Your e-mail:" aria-required="true" autocomplete="email" class="sd-formbox__input" id="testid0i" placeholder="jon.snow@nightwatch.org" type="email">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="Your e-mail:" aria-required="true" autocomplete="email" class="sd-formbox__input" id="testid0i" placeholder="jon.snow@nightwatch.org" type="email">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-masktype-numeric.snap.html b/tests/markup/snapshots/text-masktype-numeric.snap.html
index 4f8017cd36..74b1efbbe3 100644
--- a/tests/markup/snapshots/text-masktype-numeric.snap.html
+++ b/tests/markup/snapshots/text-masktype-numeric.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" style="text-align:right;" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="q1" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" style="text-align:right;" type="text">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-readonly.snap.html b/tests/markup/snapshots/text-readonly.snap.html
index 1729d17e86..d4b17ee57b 100644
--- a/tests/markup/snapshots/text-readonly.snap.html
+++ b/tests/markup/snapshots/text-readonly.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-formbox--readonly sd-text">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" id="testid0i" readonly="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-formbox--readonly sd-text">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" id="testid0i" readonly="" type="text">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text-typing.snap.html b/tests/markup/snapshots/text-typing.snap.html
index 9ee6fe066b..36d21cb438 100644
--- a/tests/markup/snapshots/text-typing.snap.html
+++ b/tests/markup/snapshots/text-typing.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/text.snap.html b/tests/markup/snapshots/text.snap.html
index 9ee6fe066b..36d21cb438 100644
--- a/tests/markup/snapshots/text.snap.html
+++ b/tests/markup/snapshots/text.snap.html
@@ -1,3 +1,7 @@
-<div class="sd-formbox sd-text">
-	<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--text" role="presentation">
+		<div class="sd-formbox sd-text">
+			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+		</div>
+	</div>
 </div>
\ No newline at end of file

From cc9d192a7ca8c8e92731e3d167fcb6d7c53cc3c5 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 7 Jul 2026 12:09:34 +0300
Subject: [PATCH 133/155] Temporary skipped one screenshot test to implement
 correct design in the future

---
 screenshots/paneldynamic.spec.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/screenshots/paneldynamic.spec.ts b/screenshots/paneldynamic.spec.ts
index 42361def2f..de423cecf7 100644
--- a/screenshots/paneldynamic.spec.ts
+++ b/screenshots/paneldynamic.spec.ts
@@ -452,7 +452,8 @@ frameworks.forEach(framework => {
       await compareScreenshot(page, paneldynamicRoot, "panel-dynamic-comment.png");
     });
 
-    test("Paneldynamic: removePanelButtonLocation=right", async ({ page }) => {
+    // TODO: Reanimate in processing of https://github.com/surveyjs/survey-library/issues/11421
+    test.skip("Paneldynamic: removePanelButtonLocation=right", async ({ page }) => {
       await page.setViewportSize({ width: 1920, height: 1080 });
       const json = {
         "elements": [

From e7d954b9731bc11415a64ea7c72ab3b98d157ad4 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 7 Jul 2026 13:40:46 +0300
Subject: [PATCH 134/155] Updated etalon for specific angular markup test

---
 tests/markup/etalon.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/markup/etalon.ts b/tests/markup/etalon.ts
index 9c65744e0d..726c0246f5 100644
--- a/tests/markup/etalon.ts
+++ b/tests/markup/etalon.ts
@@ -42,6 +42,6 @@ registerMarkupTests([
         }
       ]
     },
-    etalon: "<div class=\"sd-html\">HTML content here</div>"
+    etalon: "<div class=\"sd-question__header-and-content-container\"><div class=\"sd-element__content sd-question__content\" role=\"presentation\"><div class=\"sd-html\">HTML content here</div></div></div>"
   },
 ]);
\ No newline at end of file

From 69c4032ae1854716d5de9ac662177f565f60cec1 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 7 Jul 2026 13:49:00 +0300
Subject: [PATCH 135/155] Try to fix e2e test according rendering changes

---
 e2e/questions/panel.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/questions/panel.spec.ts b/e2e/questions/panel.spec.ts
index e5b98242ae..9705aba7fd 100644
--- a/e2e/questions/panel.spec.ts
+++ b/e2e/questions/panel.spec.ts
@@ -76,7 +76,7 @@ frameworks.forEach((framework) => {
       const getTitle4 = page.locator(".sd-element__title").filter({ hasText: "question4" });
 
       const getPanelsCountByMargin = await page.evaluate(
-        () => (window as any).survey.rootElement.getRootNode().querySelectorAll('div[style*="padding-left: 20px"]').length
+        () => (window as any).survey.rootElement.getRootNode().querySelectorAll('div[style*="padding-inline-start"][style*="20px"]').length
       );
 
       await expect(getTitle1).toBeVisible({ timeout: 1000 });

From 9227469306bc36d9cfb68a681cc126ee5716b33c Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 7 Jul 2026 14:08:33 +0300
Subject: [PATCH 136/155] Trigger CI run with corresponding creator PR

---
 e2e/questions/panel.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/e2e/questions/panel.spec.ts b/e2e/questions/panel.spec.ts
index 9705aba7fd..c51baa0273 100644
--- a/e2e/questions/panel.spec.ts
+++ b/e2e/questions/panel.spec.ts
@@ -75,6 +75,7 @@ frameworks.forEach((framework) => {
       const getTitle3 = page.locator(".sd-element__title").filter({ hasText: "question3" });
       const getTitle4 = page.locator(".sd-element__title").filter({ hasText: "question4" });
 
+      // TODO: Check whether this test actual for new rendering
       const getPanelsCountByMargin = await page.evaluate(
         () => (window as any).survey.rootElement.getRootNode().querySelectorAll('div[style*="padding-inline-start"][style*="20px"]').length
       );

From 6f9def8d76729ede7896fe4f8ebb81530297e5f5 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 7 Jul 2026 14:35:53 +0300
Subject: [PATCH 137/155] Removed commented in this PR CSS

---
 .../blocks/sd-collapsed-element.scss          |   9 --
 .../blocks/sd-complex-element.scss            |  33 ----
 .../src/default-theme/blocks/sd-element.scss  |   9 --
 .../src/default-theme/blocks/sd-list.scss     |   3 -
 .../src/default-theme/blocks/sd-page.scss     |  33 ----
 .../src/default-theme/blocks/sd-panel.scss    |  24 ---
 .../default-theme/blocks/sd-paneldynamic.scss |  23 ---
 .../src/default-theme/blocks/sd-question.scss | 150 ------------------
 .../src/default-theme/blocks/sd-rating.scss   |   1 -
 .../src/default-theme/blocks/sd-row.scss      |  36 -----
 .../src/default-theme/blocks/sd-table.scss    |  83 ----------
 .../src/default-theme/blocks/sv-list.scss     |   2 -
 .../src/default-theme/blocks/sv-ranking.scss  |   5 -
 .../src/default-theme/default.m600.scss       |   4 -
 14 files changed, 415 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
index 2c883a3f59..dee400a721 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-collapsed-element.scss
@@ -9,16 +9,11 @@
 
 .sd-element--collapsed {
   &>.sd-element__header {
-    // padding: var(--sjs2-spacing-x000) var(--sd-base-padding);
     box-sizing: border-box;
     background-color: $background;
-    // margin-inline-start: calc(-1 * var(--sd-base-padding));
-    // width: calc(100% + 2 * var(--sd-base-padding));
   }
 
   &.sd-element--with-frame {
-    // padding-top: 0;
-    // padding-bottom: 0;
 
     &>.sd-element__header {
       padding-top: var(--sjs2-spacing-x200);
@@ -45,10 +40,6 @@
     &>.sd-element__header:hover,
     &>.sd-element__header:focus-within {
       background-color: $background-dim-light;
-      // box-shadow: var(--sjs2-spacing-negative-x500) var(--sjs2-spacing-negative-x200) 0 0 var(--sjs2-color-bg-basic-secondary), 
-      // var(--sjs2-spacing-x500) var(--sjs2-spacing-negative-x200) 0 0 var(--sjs2-color-bg-basic-secondary), 
-      // var(--sjs2-spacing-x500) var(--sjs2-spacing-x200) 0 var(--sjs2-color-bg-basic-secondary), 
-      // var(--sjs2-spacing-negative-x500) var(--sjs2-spacing-x200) 0 var(--sjs2-color-bg-basic-secondary);
       box-shadow: var(--sjs2-spacing-negative-x300) 0px 0px var(--sjs2-spacing-x200) var(--sjs2-color-bg-basic-secondary), var(--sjs2-spacing-x300) 0px 0px var(--sjs2-spacing-x200) var(--sjs2-color-bg-basic-secondary);
     }
   }
diff --git a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
index 266eb85f73..1b29951e8c 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
@@ -32,16 +32,6 @@
   }
 }
 
-// .sd-element--complex.sd-element--with-frame > .sd-element__header {
-//   padding-top: var(--sd-base-vertical-padding);
-//   padding-bottom: var(--sd-base-vertical-padding);
-// }
-
-// .sd-element--collapsed.sd-element--complex > .sd-element__header {
-//   padding-top: var(--sjs2-spacing-x200);
-//   padding-bottom: var(--sjs2-spacing-x200);
-// }
-
 .sd-element--nested.sd-element--complex {
   & > .sd-element__header--location-top {
     &:after {
@@ -64,8 +54,6 @@
   border: 1px solid $border-light;
   border-radius: var(--sjs2-radius-component-panel-nested);
   box-sizing: border-box;
-  // padding-left: var(--sd-base-padding);
-  // padding-right: var(--sd-base-padding);
 
   & > .sd-element__header--location-top {
     padding-top: calc(0.5 * var(--sd-base-vertical-padding));
@@ -76,12 +64,6 @@
     padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
   }
 
-  // & > .sd-element__erbox {
-  //   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-question__erbox--below-question {
     bottom: 0;
     margin-top: 0;
@@ -115,22 +97,7 @@
 }
 
 .sd-question--empty.sd-question--complex {
-  // & > .sd-question__content {
-  //   padding-top: 0;
-  //   padding-bottom: 0;
-  // }
-
-  // & > .sd-question__content:first-of-type {
-  //   padding-top: var(--sd-base-padding);
-  // }
-
-  // & > .sd-question__header--location-top {
-  //   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 
-  //   &:after {
-  //     display: none;
-  //   }
-  // }
   &>.sd-question__container {
       row-gap: 0;
       &>.sd-question__header-and-content-container {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-element.scss b/packages/survey-core/src/default-theme/blocks/sd-element.scss
index 6104ae8a6a..4ff31a67c7 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-element.scss
@@ -2,11 +2,6 @@
 @use "../mixins.scss" as mixins;
 @use "../typography-mixins.scss" as *;
 
-// .sd-element {
-//   padding-left: var(--sv-element-add-padding-left, 0px);
-//   padding-right: var(--sv-element-add-padding-right, 0px);
-// }
-
 .sd-element__title {
   outline: none;
 }
@@ -136,10 +131,6 @@
 .sd-element--with-frame {
   border-radius: var(--sjs2-radius-component-panel);
   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(--sjs2-color-component-panel-default-bg);
   box-shadow: $shadow-small;
 }
diff --git a/packages/survey-core/src/default-theme/blocks/sd-list.scss b/packages/survey-core/src/default-theme/blocks/sd-list.scss
index 48f31891db..248fe9dae2 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-list.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-list.scss
@@ -2,12 +2,9 @@
 @use "../typography-mixins.scss" as *;
 
 .sd-list {
-  // padding-right: var(--sjs2-spacing-x050);
-  // padding-left: var(--sjs2-spacing-x050);
 }
 
 .sd-list__item {
-  // padding: 0;
 }
 
 .sd-list__item-body {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 94618c5199..eebc7ae527 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -11,10 +11,6 @@
   box-sizing: border-box;
   border-radius: var(--sjs2-radius-component-page);
 
-  // padding-inline-start:  var(--sjs2-layout-component-page-box-padding-horizontal, var(--sjs2-spacing-x500));
-  // padding-inline-end: var(--sjs2-layout-component-page-box-padding-horizontal, var(--sjs2-spacing-x500));
-  // padding-top: var(--sjs2-layout-component-page-box-padding-top, var(--sjs2-spacing-x500));
-  // padding-bottom: var(--sjs2-layout-component-page-box-padding-bottom, var(--sjs2-spacing-x500));
   row-gap: var(--sjs2-layout-component-page-box-gap-horizontal, var(--sjs2-spacing-x300));
   column-gap: var(--sjs2-layout-component-page-box-gap-vertical, var(--sjs2-spacing-x300));
 }
@@ -23,7 +19,6 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  // padding: var(--sjs2-layout-component-page-header-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-page-header-padding-horizontal, var(--sjs2-spacing-x000));
   gap: var(--sjs2-layout-component-page-header-gap-vertical, var(--sjs2-spacing-x050));
   margin: 0 0 var(--sjs2-spacing-x050) 0;
 }
@@ -31,7 +26,6 @@
 .sd-page__title {
   @include sjs2--typography--component--page--title;
   position: static;
-  // padding: var(--sjs2-layout-component-page-title-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-page-title-padding-horizontal, var(--sjs2-spacing-x000));
 }
 
 .sd-page__description {
@@ -44,12 +38,6 @@
 }
 
 .sd-page__content {
-  // padding-inline-start:  var(--sjs2-layout-component-page-content-area-padding-horizontal, var(--sjs2-spacing-x000));
-  // padding-inline-end: var(--sjs2-layout-component-page-content-area-padding-horizontal, var(--sjs2-spacing-x000));
-  // padding-top: var(--sjs2-layout-component-page-content-area-padding-vertical, var(--sjs2-spacing-x000));
-  // padding-bottom: var(--sjs2-layout-component-page-content-area-padding-vertical, var(--sjs2-spacing-x000));
-  // row-gap: var(--sjs2-layout-component-page-content-area-gap-horizontal, var(--sjs2-spacing-x200));
-  // column-gap: var(--sjs2-layout-component-page-content-area-gap-vertical, var(--sjs2-spacing-x200));
   row-gap: var(--sjs2-spacing-x200);
   column-gap: var(--sjs2-spacing-x200);
   display: flex;
@@ -64,18 +52,12 @@
   }
 
   .sd-page__title {
-    // margin: 0 0 var(--sjs2-spacing-x050) 0px;
   }
 
   .sd-page__description {
-    // margin: 0 0 var(--sjs2-spacing-x050) 0;
   }
 
   .sd-page__content {
-    // padding-inline-start:  var(--sjs2-spacing-x300);
-    // padding-inline-end: var(--sjs2-spacing-x300);
-    // padding-top: var(--sjs2-spacing-x300);
-    // padding-bottom: var(--sjs2-spacing-x300);
     row-gap: var(--sjs2-spacing-x200);
     column-gap: var(--sjs2-spacing-x200);
     padding: 0;
@@ -86,23 +68,8 @@
   padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100)) var(--sd-base-padding);
 }
 
-// .sd-page__title,
-// .sd-page__description {
-//   &~.sd-page__errbox {
-//     margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
-//     margin-bottom: var(--sjs2-spacing-negative-x100);
-//   }
-// }
-
 .sd-root--compact {
 
-  // .sd-page__title,
-  // .sd-page__description {
-  //   &~.sd-page__errbox {
-  //     margin-bottom: 0;
-  //   }
-  // }
-
   // TODO: remove after new tokens are released, it is a temporary fix to keep screenshot
   .sd-page__header ~ .sd-page__content {
     .sd-page__errbox {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index 3d7482bafd..d69d3889f9 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -13,10 +13,7 @@
 }
 
 .sd-panel__header {
-  // display: flex;
-  // flex-direction: column;
   padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
-  // gap: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));
 }
 
 .sd-panel__title {
@@ -67,7 +64,6 @@
     .sd-panel__title {
       @include sjs2--typography--component--page--title;
       position: static;
-      // margin: 0 0 var(--sjs2-spacing-x050) 0px;
 
       span {
         font-family: inherit;
@@ -88,7 +84,6 @@
     .sd-panel__description {
       @include sjs2--typography--component--page--description;
       position: static;
-      // margin: 0 0 var(--sjs2-spacing-x050) 0;
     }
 
     .sd-panel__required-text {
@@ -108,12 +103,6 @@
 }
 
 .sd-root--compact {
-  // .sd-panel__content {
-  //   padding-top: var(--sjs2-spacing-x500);
-  //   --animation-padding-top: var(--sjs2-spacing-x500);
-  //   padding-bottom: var(--sjs2-spacing-x500);
-  //   row-gap: var(--sjs2-spacing-x400);
-  // }
 
   .sd-panel--as-page {
     & > .sd-panel__errbox {
@@ -150,7 +139,6 @@
 }
 
 .sd-panel__title ~ .sd-panel__description {
-  // margin-top: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
   margin-top: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));
 }
 
@@ -160,11 +148,6 @@
 
 .sd-panel__footer {
   box-sizing: border-box;
-  // padding-left: calc(var(--sd-base-padding) + var(--sjs2-spacing-negative-x150) + var(--sjs2-spacing-negative-x025));
-  // margin-left: calc(-1 * var(--sd-base-padding));
-  // 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));
   padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x200)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
   border-top: 1px solid $border-light;
   margin-top: calc(-1 * var(--sjs2-spacing-x300));
@@ -179,9 +162,6 @@
   border: none;
   width: initial;
 }
-// .sd-panel__content {
-//   padding-top: var(--sd-base-padding);
-// }
 
 .sd-panel.sd-element--nested {
   & > .sd-panel__content {
@@ -189,7 +169,3 @@
     --animation-padding-top: var(--sd-base-padding);
   }
 }
-
-// .sd-panel__content {
-//   --animation-padding-top: var(--sd-base-padding);
-// }
diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 321d1262d8..6b2db0b508 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -7,7 +7,6 @@
         right: 0;
         height: 2px;
         z-index: 2;
-        // transform: translateY(-1px);
     }
 
     .sd-progress ~ .sd-paneldynamic__panels-container {
@@ -20,9 +19,6 @@
     }
 
     & .sd-paneldynamic__panel-wrapper > .sd-panel {
-        // &>.sd-panel__content {
-        //     padding: 0;
-        // }
         &> .sd-panel__header {
             padding-top: var(--sd-base-vertical-padding);
             padding-bottom: 0;
@@ -115,7 +111,6 @@
     }
     .sd-paneldynamic__panel-footer {
         padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x200)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-spacing-x300));
-        // margin-right: calc(1.5 * var(--sjs2-spacing-negative-x050));
         margin-top: calc(var(--sjs2-spacing-negative-x400));
     }
 }
@@ -127,11 +122,6 @@
     }
 }
 
-// .sd-paneldynamic__panel-wrapper {
-//     box-sizing: border-box;
-//     padding-bottom: calc(1 * var(--sd-base-padding));
-// }
-
 .sd-paneldynamic__panel-wrapper:after {
     display: table;
     clear: both;
@@ -175,7 +165,6 @@
 .sd-paneldynamic__buttons-container {
     display: flex;
     align-items: center;
-    // padding: calc(var(--sd-base-vertical-padding) - var(--sjs2-spacing-x100)) 0;
 }
 
 .sd-paneldynamic__progress-text {
@@ -219,9 +208,7 @@
 .sd-paneldynamic__panel-footer {
     border-top: none;
     position: relative;
-    // top: calc(0.5 * var(--sd-base-vertical-padding));
     padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x300)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
-    // margin-right: calc(var(--sjs2-spacing-negative-x150) + var(--sjs2-spacing-negative-x025));
     justify-content: flex-end;
     padding-top: 0;
     margin-top: calc(var(--sjs2-spacing-negative-x300));
@@ -249,8 +236,6 @@
         position: relative;
         background: $border-light;
         bottom: 0;
-        // inset-inline-start: calc(-1 * var(--sd-base-padding));
-        // width: calc(100% + 2 * var(--sd-base-padding));
         margin: 0 calc(-1 * var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal)));
     }
 }
@@ -373,17 +358,9 @@
     content: none;
 }
 
-// .sd-question--paneldynamic.sd-element--with-frame {
-//     padding: 0;
-// }
-
 .sd-paneldynamic__panels-container {
     position: relative;
     overflow: hidden;
-    // margin-left: calc(-1 * var(--sd-base-padding));
-    // padding-left: var(--sd-base-padding);
-    // margin-right: calc(-1 * var(--sd-base-padding));
-    // padding-right: var(--sd-base-padding);
 }
 
 .sd-paneldynamic__panel-wrapper {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index e7225cdb6a..6ae2a7d514 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -120,31 +120,14 @@
     }
 }
 
-// .sd-question--left {
-//   display: flex;
-//   flex-wrap: wrap;
-//   flex-direction: row;
-//   column-gap: var(--sjs2-spacing-x300);
-//   row-gap: calc(0.25 * var(--sd-base-vertical-padding));
-//   align-items: anchor-center;
-// }
-
 .sd-question__header {
   display: flex;
   flex-direction: column;
-  // padding-top: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
-  // padding-bottom: var(--sjs2-layout-component-question-header-padding-bottom, calc(0.5 * var(--sd-base-vertical-padding)));
-  // padding-left: var(--sjs2-layout-component-question-header-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
-  // padding-right: var(--sjs2-layout-component-question-header-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
   row-gap: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
-  // row-gap: var(--sjs2-layout-component-question-header-gap-vertical, var(--sjs2-spacing-x050));
   column-gap: var(--sjs2-layout-component-question-header-gap-horizontal, var(--sjs2-spacing-x150));
 }
 
 .sd-question__header--location--left {
-  // padding-right: 0;
-  // padding-bottom: var(--sjs2-layout-component-question-header-padding-top, var(--sd-base-vertical-padding));
-  // display: inline-block;
   width: auto;
   vertical-align: top;
   margin-top: var(--sjs2-spacing-x150);
@@ -155,20 +138,8 @@
   max-width: 100%;
 }
 
-// .sd-question--title-bottom {
-//   .sd-question__content {
-//     padding-top: var(--sd-base-padding);
-//     padding-bottom: 0;
-//   }
-//   .sd-question__header--location--bottom {
-//     padding-top: calc(0.375 * var(--sd-base-vertical-padding));
-//     padding-bottom: var(--sjs2-spacing-x500);
-//   }
-// }
-
 .sd-question__title {
   @include sjs2--typography--component--question--title;
-  // padding: var(--sjs2-layout-component-question-title-padding-vertical) var(--sjs2-layout-component-question-title-padding-horizontal);
 }
 
 .sd-question__title--empty {
@@ -183,53 +154,8 @@
   color: $font-questiondescription-color;
   white-space: normal;
   padding-inline: var(--sjs2-layout-component-question-description-padding-horizontal);
-  // padding-top: var(--sjs2-layout-component-question-description-padding-top);
-  // padding-bottom: var(--sjs2-layout-component-question-description-padding-bottom);
 }
 
-// .sd-question__content {
-//   box-sizing: border-box;
-// }
-
-// .sd-question__content--left {
-//   display: inline-block;
-//   flex: 1;
-//   padding-top: var(--sd-base-padding);
-//   padding-left: 0;
-//   // margin-top: calc(0.25 * var(--sd-base-vertical-padding)) 0;
-//   max-width: 100%;
-// }
-
-// .sd-element--with-frame>.sd-question__content--left {
-//   margin: 0;
-// }
-
-// .sd-question:not(.sd-element--with-frame) {
-//   >.sd-question__header {
-//     padding-top: 0;
-//     padding-left: 0;
-//     padding-right: 0;
-//   }
-//   >.sd-question__content {
-//     padding: 0;
-//   }
-// }
-
-// .sd-root-modern--mobile {
-//   .sd-question__header {
-//     padding-top: var(--sjs2-spacing-x200);
-//     padding-left: var(--sjs2-spacing-x300);
-//     padding-right: var(--sjs2-spacing-x300);
-//     padding-bottom: var(--sjs2-spacing-x100);
-//   }
-
-//   .sd-question__content {
-//     padding-left: var(--sjs2-spacing-x300);
-//     padding-right: var(--sjs2-spacing-x300);
-//     padding-bottom: var(--sjs2-spacing-x300);
-//   }
-// }
-
 .sd-question--no-pointer-events {
   .sd-selectbase,
   .sd-rating {
@@ -239,104 +165,28 @@
   }
 }
 
-// .sd-element__erbox--above-element {
-//   margin-bottom: var(--sjs2-spacing-x100);
-// }
-
-// .sd-question__erbox--below-question {
-//   margin-top: var(--sjs2-spacing-x100);
-// }
-
 .sd-question__content--support-container-queries {
   container-type: inline-size;
 }
 
-// .sd-question--title-top>.sd-question__erbox--above-question {
-//   margin-bottom: calc(0.5 * var(--sd-base-vertical-padding));
-// }
-
-// .sd-question--description-under-input>.sd-question__erbox--below-question,
-// .sd-question--title-bottom>.sd-question__erbox--below-question {
-//   margin-top: calc(0.25 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x050));
-// }
-
-// .sd-element--with-frame>div>.sd-element__erbox {
-//     position: sticky;
-//     left: 0;
-// }
-
 .sd-element--with-frame>.sd-element__erbox--above-element {
-  // margin-bottom: var(--sd-base-padding);
   border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
 }
 .sd-element--with-frame>div>.sd-element__erbox--above-element {
-  // margin-bottom: var(--sd-base-padding);
   border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
 }
 
 .sd-element--with-frame>.sd-question__erbox--below-question {
-  // margin-top: auto;
   border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);
 }
 .sd-element--with-frame>div>.sd-question__erbox--below-question {
-  // margin-top: auto;
   border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);
 }
 
-// .sd-question--left>.sd-element__erbox--above-element {
-//   margin-bottom: 0;
-// }
-
-// .sd-element--with-frame.sd-question--left>.sd-element__erbox--above-element {
-//   margin-bottom: calc(1 * var(--sd-base-vertical-padding));
-// }
-
-// .sd-element--with-frame.sd-question--title-top>.sd-question__erbox--above-question {
-//   margin-bottom: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
-// }
-
-// .sd-element--with-frame.sd-question--description-under-input>.sd-question__erbox--below-question,
-// .sd-element--with-frame.sd-question--title-bottom>.sd-question__erbox--below-question {
-//   margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100));
-// }
-
 .sd-question__description--under-input {
   padding-top: calc(0.375 * var(--sd-base-vertical-padding));
 }
 
-// .sd-question__header .sd-question__description {
-//   margin-top: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
-// }
-
-// .sd-element--with-frame {
-//   // &.sd-question--title-top {
-//   //   padding-top: var(--sd-base-vertical-padding);
-//   // }
-
-//   // &.sd-question--error-top {
-//   //   padding-top: 0;
-//   // }
-
-//   // &.sd-question--error-bottom {
-//   //   padding-bottom: 0;
-//   //   display: flex;
-//   //   flex-direction: column;
-
-//   //   // &>.sd-question__content {
-//   //   //   margin-bottom: var(--sd-base-padding);
-//   //   // }
-//   // }
-
-//   &>.sd-element__erbox {
-//     // margin-left: calc(-1 * var(--sd-base-padding));
-//     // margin-right: calc(-1 * var(--sd-base-padding));
-//     // width: calc(100% + 2 * var(--sd-base-padding));
-//     position: sticky;
-//     left: 0;
-//     // left: calc(-1 * var(--sd-base-padding));
-//   }
-// }
-
 .sd-scrollable .sd-question__content {
   overflow-x: auto;
   padding: var(--sjs2-spacing-x200) 0;
diff --git a/packages/survey-core/src/default-theme/blocks/sd-rating.scss b/packages/survey-core/src/default-theme/blocks/sd-rating.scss
index 8da6affc54..be3927efa7 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-rating.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-rating.scss
@@ -564,7 +564,6 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 
   &.sd-rating__min-text {
     margin-right: var(--sjs2-spacing-x100);
-    // margin-left: var(--sjs2-spacing-x200);
     border-left: 0px;
   }
 
diff --git a/packages/survey-core/src/default-theme/blocks/sd-row.scss b/packages/survey-core/src/default-theme/blocks/sd-row.scss
index baa8ddfb69..d51bc1c2fc 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-row.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-row.scss
@@ -5,44 +5,8 @@
   flex-direction: row;
   width: 100%;
   box-sizing: border-box;
-  // margin-top: var(--sd-base-vertical-padding);
 }
 
-// .sd-row.sd-page__row {
-//   margin-top: var(--sjs2-spacing-x200);
-// }
-
-// .sd-page__row.sd-row--compact {
-//   margin-top: var(--sd-base-vertical-padding);
-// }
-
-// .sd-row:first-of-type {
-//   margin-top: 0;
-// }
-
-// .sd-page__title,
-// .sd-page__description {
-//   & ~ .sd-row.sd-page__row:not(.sd-row--compact) {
-//     margin-top: var(--sjs2-spacing-x300);
-//   }
-
-//   & ~ .sd-page__row.sd-row--compact {
-//     margin-top: var(--sd-base-vertical-padding);
-//   }
-//   & ~ .sd-page__row.sd-row.sd-row--enter.sd-row-delayed-enter {
-//     margin-top: 0;
-//   }
-// }
-
-// .sd-row.sd-page__row:not(.sd-row--compact) {
-//   & ~ .sd-row.sd-page__row:not(.sd-row--compact) {
-//     margin-top: var(--sjs2-spacing-x200);
-//   }
-//   & ~ .sd-page__row.sd-row.sd-row--enter.sd-row-delayed-enter {
-//     margin-top: 0;
-//   }
-// }
-
 .sd-row--multiple {
   row-gap: var(--sjs2-spacing-x200);
   margin-left: calc(-1 * var(--sd-base-padding));
diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index f0fe9b1bbe..1737c97d26 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -77,80 +77,6 @@
 .sd-table--no-header {
   padding-top: var(--sjs2-spacing-x300);
 }
-.sd-panel:not(.sd-panel--as-page) {
-  & > .sd-panel__content {
-    // .sd-table--no-header {
-    //   padding-top: 0;
-    // }
-
-    // .sd-question--table {
-    //   .sd-question__content {
-    //     padding-bottom: var(--sjs2-spacing-x025);
-    //     margin-bottom: var(--sjs2-spacing-negative-x025);
-    //     padding-top: var(--sjs2-spacing-x100);
-    //     margin-top: var(--sjs2-spacing-negative-x100);
-    //   }
-
-    //   & > .sd-question__header {
-    //     & ~ .sd-question__content {
-    //       padding-top: var(--sjs2-spacing-x200);
-    //       --animation-padding-top: #{var(--sjs2-spacing-x200)};
-
-    //       .sd-table--no-header {
-    //         padding-top: var(--sjs2-spacing-x400);
-    //       }
-    //     }
-    //   }
-    // }
-
-    // .sd-question--table > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-    //   margin-top: var(--sjs2-spacing-negative-x300);
-    // }
-
-    // .sd-question--table.sd-question--error-top
-    //   > .sd-question__content
-    //   .sd-table-wrapper
-    //   .sd-table:not(.sd-table--no-header) {
-    //   margin-top: 0;
-    // }
-
-    // &
-    //   > .sd-row:not(:first-of-type)
-    //   .sd-question--table
-    //   > .sd-question__content
-    //   .sd-table-wrapper
-    //   .sd-table:not(.sd-table--no-header) {
-    //   margin-top: var(--sjs2-spacing-negative-x200);
-    // }
-
-    // &
-    //   > .sd-row:not(:first-of-type)
-    //   .sd-question--table.sd-question--error-top
-    //   > .sd-question__content
-    //   .sd-table-wrapper
-    //   .sd-table:not(.sd-table--no-header) {
-    //   margin-top: var(--sjs2-spacing-x000);
-    // }
-
-    // .sd-question--table
-    //   > .sd-question__header
-    //   ~ .sd-question__content
-    //   .sd-table-wrapper
-    //   .sd-table:not(.sd-table--no-header) {
-    //   margin-top: var(--sjs2-spacing-x100);
-    // }
-
-    // &
-    //   > .sd-row:not(:first-of-type)
-    //   .sd-question--table
-    //   > .sd-question__header
-    //   ~ .sd-question__content
-    //   .sd-table-wrapper
-    //   .sd-table:not(.sd-table--no-header) {
-    //   margin-top: var(--sjs2-spacing-x100);
-    // }
-  }
-}
 
 .sd-question:not(.sd-question--mobile) {
   .sd-table--alternate-rows {
@@ -403,7 +329,6 @@
 
 .sd-question.sd-question--table {
   position: relative;
-  // overflow-x: auto;
   &>.sd-question__container {
     &>.sd-question__header-and-content-container {
       overflow-x: auto;
@@ -417,7 +342,6 @@
 
 .sd-question--table.sd-element--collapsed,
 .sd-question--table.sd-element--nested {
-  // overflow-x: visible;
   &>.sd-question__container {
     &>.sd-question__header-and-content-container {
       overflow-x: visible;
@@ -676,7 +600,6 @@
       padding-top: var(--sjs2-spacing-x500);
 
       &::before {
-        // top: var(--sjs2-spacing-negative-x200);
         background-color: transparent;
       }
     }
@@ -821,12 +744,6 @@
   @include table_responsive();
 }
 
-// .sd-table__cell--detail-panel {
-//   .sd-panel__content {
-//     padding-top: var(--sjs2-spacing-x100);
-//   }
-// }
-
 .sd-table__question-wrapper {
   .sd-boolean-root {
     margin: auto;
diff --git a/packages/survey-core/src/default-theme/blocks/sv-list.scss b/packages/survey-core/src/default-theme/blocks/sv-list.scss
index 4b65e2bd73..1380c7ba3b 100644
--- a/packages/survey-core/src/default-theme/blocks/sv-list.scss
+++ b/packages/survey-core/src/default-theme/blocks/sv-list.scss
@@ -55,7 +55,6 @@
   width: 100%;
   align-items: center;
   box-sizing: border-box;
-  // padding: var(--sjs2-spacing-x100) var(--sjs2-spacing-x800) var(--sjs2-spacing-x100) var(--sjs2-spacing-x200);
   padding-block: var(--sjs2-spacing-x100);
   padding-inline-end: var(--sjs2-spacing-x800);
   padding-inline-start: var(--sjs2-spacing-x200);
@@ -223,7 +222,6 @@ li:focus .sv-list__item.sv-list__item--selected {
 
 .sv-list__filter {
   border-bottom: 1px solid $border-inside;
-  // padding-bottom: var(--sjs2-spacing-x100);
 }
 
 .sv-list__filter-icon {
diff --git a/packages/survey-core/src/default-theme/blocks/sv-ranking.scss b/packages/survey-core/src/default-theme/blocks/sv-ranking.scss
index 5a387855cc..2d55a5f3f5 100644
--- a/packages/survey-core/src/default-theme/blocks/sv-ranking.scss
+++ b/packages/survey-core/src/default-theme/blocks/sv-ranking.scss
@@ -395,8 +395,6 @@
 
   .sv-ranking__container--empty {
     &.sv-ranking__container--to {
-      //padding-right: var(--sjs2-spacing-x300);
-
       .sv-ranking-item {
         left: initial;
       }
@@ -407,8 +405,6 @@
     }
 
     &.sv-ranking__container--from {
-      //padding-left: var(--sjs2-spacing-x300);
-
       .sv-ranking__container-placeholder {
         padding-right: var(--sjs2-spacing-x500);
       }
@@ -436,7 +432,6 @@
 }
 
 .sv-ranking__container--empty {
-  //padding: var(--sjs2-spacing-x800);
   box-sizing: border-box;
   text-align: center;
 }
diff --git a/packages/survey-core/src/default-theme/default.m600.scss b/packages/survey-core/src/default-theme/default.m600.scss
index 1ed53534df..5b4ff9b277 100644
--- a/packages/survey-core/src/default-theme/default.m600.scss
+++ b/packages/survey-core/src/default-theme/default.m600.scss
@@ -22,10 +22,6 @@
       @include mixins.num_inline();
     }
 
-    // .sd-element__title--expandable:before {
-    //   inset-inline-start: var(--sjs2-spacing-negative-x250);
-    // }
-
     .sd-element__title-expandable-svg {
       inset-inline-start: var(--sjs2-spacing-negative-x250);
     }

From 551defaa305936e062bcc9ee511205422fdd5987 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 7 Jul 2026 14:52:49 +0300
Subject: [PATCH 138/155] Try to get rid of CSS unused in current markup

---
 .../blocks/sd-complex-element.scss            | 10 +--
 .../default-theme/blocks/sd-paneldynamic.scss | 55 ++++++++--------
 .../src/default-theme/blocks/sd-question.scss |  8 ++-
 .../src/default-theme/blocks/sd-table.scss    | 64 +++++++++++--------
 4 files changed, 78 insertions(+), 59 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
index 1b29951e8c..1929f8ce8a 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-complex-element.scss
@@ -64,10 +64,12 @@
     padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
   }
 
-  & > .sd-question__erbox--below-question {
-    bottom: 0;
-    margin-top: 0;
-  }
+  // Commented out: question erbox is no longer a direct child of the question root
+  // (it is nested inside .sd-question__container)
+  // & > .sd-question__erbox--below-question {
+  //   bottom: 0;
+  //   margin-top: 0;
+  // }
 
   &.sd-element--collapsed {
     & > .sd-element__header--location-top {
diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 6b2db0b508..6122f8c5bd 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -45,15 +45,18 @@
   }
 }
 
-.sd-question:not(.sd-element--with-frame) {
-    &>.sd-paneldynamic__footer {
-        padding: 0;
-    }
-
-    &>.sd-paneldynamic__panel-footer {
-        padding: 0;
-    }
-}
+// Commented out: .sd-paneldynamic__footer / .sd-paneldynamic__panel-footer are never
+// direct children of the question root (footer lives inside .sd-paneldynamic,
+// panel footer inside .sd-panel)
+// .sd-question:not(.sd-element--with-frame) {
+//     &>.sd-paneldynamic__footer {
+//         padding: 0;
+//     }
+
+//     &>.sd-paneldynamic__panel-footer {
+//         padding: 0;
+//     }
+// }
 
 .sd-question--paneldynamic {
     &>.sd-question__container {
@@ -181,22 +184,24 @@
     }
 }
 
-.sd-question--empty.sd-question--paneldynamic {
-    & > .sd-question__content {
-        padding-bottom: var(--sd-base-padding);
-        --animation-padding-bottom: var(--sd-base-padding);
-    }
-}
-
-.sd-question--paneldynamic:not(.sd-question--empty) {
-    & > .sd-question__content {
-        padding: 0;
-        --animation-padding-bottom: 0;
-        & > .sd-question__comment-area {
-            padding-bottom: var(--sd-base-padding);
-        }
-    }
-}
+// Commented out: .sd-question__content is no longer a direct child of the question root
+// (it is nested inside .sd-question__container > .sd-question__header-and-content-container)
+// .sd-question--empty.sd-question--paneldynamic {
+//     & > .sd-question__content {
+//         padding-bottom: var(--sd-base-padding);
+//         --animation-padding-bottom: var(--sd-base-padding);
+//     }
+// }
+
+// .sd-question--paneldynamic:not(.sd-question--empty) {
+//     & > .sd-question__content {
+//         padding: 0;
+//         --animation-padding-bottom: 0;
+//         & > .sd-question__comment-area {
+//             padding-bottom: var(--sd-base-padding);
+//         }
+//     }
+// }
 
 .sd-paneldynamic__buttons-container .sd-action-bar {
     width: 100%;
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 6ae2a7d514..0a7f5c7a12 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -176,9 +176,11 @@
   border-radius: var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel) 0 0;
 }
 
-.sd-element--with-frame>.sd-question__erbox--below-question {
-  border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);
-}
+// Commented out: question erbox is no longer a direct child of the question root
+// (it is nested inside .sd-question__container), see the >div> variant below
+// .sd-element--with-frame>.sd-question__erbox--below-question {
+//   border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);
+// }
 .sd-element--with-frame>div>.sd-question__erbox--below-question {
   border-radius: 0 0 var(--sjs2-radius-component-panel) var(--sjs2-radius-component-panel);
 }
diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 1737c97d26..5e2bc06b56 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -424,26 +424,32 @@
 }
 
 .sd-question--table {
-  & > .sd-question__header,
+  // Commented out "& > .sd-question__header": the header is no longer a direct child of
+  // the question root (sticky header is handled by the .sd-question.sd-question--table rule above)
+  // & > .sd-question__header,
   .sd-question__description--under-input .sv-string-viewer {
     position: sticky;
     left: 0;
   }
 
-  & > .sd-question__content {
-    padding-top: var(--sd-base-vertical-padding);
-    --animation-padding-top: #{var(--sd-base-vertical-padding)};
-    min-width: min-content;
-  }
-
-  &.sd-element--nested {
-    & > .sd-question__content {
-      min-width: auto;
-      overflow-x: auto;
-    }
-  }
-
-  &.sd-element--nested > .sd-question__content,
+  // Commented out: .sd-question__content is no longer a direct child of the question root
+  // (it is nested inside .sd-question__container > .sd-question__header-and-content-container)
+  // & > .sd-question__content {
+  //   padding-top: var(--sd-base-vertical-padding);
+  //   --animation-padding-top: #{var(--sd-base-vertical-padding)};
+  //   min-width: min-content;
+  // }
+
+  // Commented out: same reason, replaced by the .sd-question--table.sd-element--nested rule above
+  // &.sd-element--nested {
+  //   & > .sd-question__content {
+  //     min-width: auto;
+  //     overflow-x: auto;
+  //   }
+  // }
+
+  // Commented out "&.sd-element--nested > .sd-question__content": content is no longer a direct child of the question root
+  // &.sd-element--nested > .sd-question__content,
   &:not(.sd-element--with-frame):not(.sd-element--nested) {
     padding-right: var(--sd-base-padding);
     margin-right: calc(-1 * var(--sd-base-padding));
@@ -460,9 +466,10 @@
 }
 
 .sd-row--multiple {
-  .sd-question--table.sd-element--nested > .sd-question__content {
-    padding-right: calc(var(--sd-base-padding) + 2px);
-  }
+  // Commented out: content is no longer a direct child of the question root, see the updated rule below
+  // .sd-question--table.sd-element--nested > .sd-question__content {
+  //   padding-right: calc(var(--sd-base-padding) + 2px);
+  // }
   .sd-question--table.sd-element--nested > .sd-question__container >.sd-question__header-and-content-container > .sd-question__content {
     padding-right: calc(var(--sd-base-padding) + 2px);
   }
@@ -481,20 +488,23 @@
 }
 
 @mixin table_responsive {
-  &.sd-question.sd-question--table {
-    & > .sd-question__content {
-      padding-top: var(--sjs2-spacing-x100);
-      --animation-padding-top: var(--sjs2-spacing-x100);
-    }
-  }
+  // Commented out: .sd-question__content is no longer a direct child of the question root
+  // (it is nested inside .sd-question__container > .sd-question__header-and-content-container)
+  // &.sd-question.sd-question--table {
+  //   & > .sd-question__content {
+  //     padding-top: var(--sjs2-spacing-x100);
+  //     --animation-padding-top: var(--sjs2-spacing-x100);
+  //   }
+  // }
 
   &.sd-question--table,
   &.sd-question--scroll {
     overflow-x: visible;
   }
-  & > .sd-question__content {
-    min-width: auto;
-  }
+  // Commented out: content is no longer a direct child of the question root
+  // & > .sd-question__content {
+  //   min-width: auto;
+  // }
   .sd-table-wrapper {
     width: auto;
     margin-top: calc(-1 * var(--sjs2-spacing-x100));

From b09f5ed635e462e5a5155237e4d8a464fe2894a0 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 7 Jul 2026 16:23:09 +0300
Subject: [PATCH 139/155] Updated markup snapshots

---
 ...atrixdropdown-cell-errors-bottom.snap.html | 90 ++++++++++---------
 .../matrixdropdown-cell-errors-top.snap.html  | 90 ++++++++++---------
 .../multipletext-error-bottom-v2.snap.html    | 27 ++----
 .../multipletext-error-top-v2.snap.html       | 40 +++------
 .../question-errors-v2-bottom.snap.html       | 52 ++++++-----
 .../question-errors-v2-top.snap.html          | 52 ++++++-----
 6 files changed, 173 insertions(+), 178 deletions(-)

diff --git a/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html b/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html
index caafc75d87..1cc3c1cc5f 100644
--- a/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html
@@ -1,44 +1,48 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					<span>&nbsp;</span>
-					<span class="sd-question__required-text">*</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row1</span>
-				</td>
-				<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--error sd-text">
-							<input aria-describedby="testid0row0cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" class="sd-formbox__input" id="testid0row0cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row">
-				<td class="sd-table__cell sd-table__cell--empty sd-table__cell--error" colspan="1" title="">
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-bottom" colspan="1" title="">
-					<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0row0cell1_errors" role="alert">
-						<div>
-							<span aria-hidden="true">
-							</span>
-							<span class="sd-error__item">
-								<span class="sv-string-viewer">Response required.</span>
-							</span>
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							<span>&nbsp;</span>
+							<span class="sd-question__required-text">*</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row0">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row1</span>
+						</td>
+						<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--error sd-text">
+									<input aria-describedby="testid0row0cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" class="sd-formbox__input" id="testid0row0cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row">
+						<td class="sd-table__cell sd-table__cell--empty sd-table__cell--error" colspan="1" title="">
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-bottom" colspan="1" title="">
+							<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0row0cell1_errors" role="alert">
+								<div>
+									<span aria-hidden="true">
+									</span>
+									<span class="sd-error__item">
+										<span class="sv-string-viewer">Response required.</span>
+									</span>
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html b/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html
index ecca3d10bd..6dc8adfa86 100644
--- a/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html
+++ b/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html
@@ -1,44 +1,48 @@
-<div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
-		<thead>
-			<tr>
-				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
-				</td>
-				<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
-					<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
-					<span>&nbsp;</span>
-					<span class="sd-question__required-text">*</span>
-				</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr class="sd-table__row">
-				<td class="sd-table__cell sd-table__cell--empty sd-table__cell--error" colspan="1" title="">
-				</td>
-				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
-					<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" id="testid0row1cell1_errors" role="alert">
-						<div>
-							<span aria-hidden="true">
-							</span>
-							<span class="sd-error__item">
-								<span class="sv-string-viewer">Response required.</span>
-							</span>
-						</div>
-					</div>
-				</td>
-			</tr>
-			<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
-				<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
-					<span class="sv-string-viewer">row1</span>
-				</td>
-				<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
-					<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
-						<div class="sd-formbox sd-formbox--error sd-text">
-							<input aria-describedby="testid0row1cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
-						</div>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+<div class="sd-question__header-and-content-container">
+	<div class="sd-element__content sd-question__content" data-sv-drop-target-matrix="testid0row1" data-sv-drop-target-matrix-row="testid0row1" role="presentation">
+		<div class="sd-table-wrapper">
+			<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+				<thead>
+					<tr>
+						<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
+						</td>
+						<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+							<span class="sv-string-viewer sv-string-viewer--multiline">col1</span>
+							<span>&nbsp;</span>
+							<span class="sd-question__required-text">*</span>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="sd-table__row">
+						<td class="sd-table__cell sd-table__cell--empty sd-table__cell--error" colspan="1" title="">
+						</td>
+						<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" title="">
+							<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" id="testid0row1cell1_errors" role="alert">
+								<div>
+									<span aria-hidden="true">
+									</span>
+									<span class="sd-error__item">
+										<span class="sv-string-viewer">Response required.</span>
+									</span>
+								</div>
+							</div>
+						</td>
+					</tr>
+					<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+						<td class="sd-table__cell sd-table__cell--row-text" colspan="1" title="">
+							<span class="sv-string-viewer">row1</span>
+						</td>
+						<td class="sd-question--error sd-table__cell" colspan="1" title="col1">
+							<div class="sd-matrix__question-wrapper sd-table__question-wrapper">
+								<div class="sd-formbox sd-formbox--error sd-text">
+									<input aria-describedby="testid0row1cell1_errors" aria-invalid="true" aria-label="row row1, column col1" aria-required="true" class="sd-formbox__input" id="testid0row1cell1i" placeholder="" type="text">
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
 </div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/multipletext-error-bottom-v2.snap.html b/tests/markup/snapshots/multipletext-error-bottom-v2.snap.html
index 421dbf2cc8..3d35dd07da 100644
--- a/tests/markup/snapshots/multipletext-error-bottom-v2.snap.html
+++ b/tests/markup/snapshots/multipletext-error-bottom-v2.snap.html
@@ -20,7 +20,7 @@
 				</tr>
 				<tr class="sd-multipletext__row">
 					<td class="sd-multipletext__cell sd-multipletext__cell--error sd-multipletext__cell--error-bottom">
-						<div class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question">
+						<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" role="alert">
 							<div>
 								<span aria-hidden="true">
 								</span>
@@ -29,22 +29,9 @@
 								</span>
 							</div>
 						</div>
-					</div>
-				</label>
-			</td>
-		</tr>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell sd-multipletext__cell--error sd-multipletext__cell--error-bottom">
-				<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" role="alert">
-					<div>
-						<span aria-hidden="true">
-						</span>
-						<span class="sd-error__item">
-							<span class="sv-string-viewer">Response required.</span>
-						</span>
-					</div>
-				</div>
-			</td>
-		</tr>
-	</tbody>
-</table>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/multipletext-error-top-v2.snap.html b/tests/markup/snapshots/multipletext-error-top-v2.snap.html
index 8ea3503526..aff3bc6221 100644
--- a/tests/markup/snapshots/multipletext-error-top-v2.snap.html
+++ b/tests/markup/snapshots/multipletext-error-top-v2.snap.html
@@ -1,29 +1,17 @@
-<table class="sd-multipletext">
-	<tbody>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell sd-multipletext__cell--error sd-multipletext__cell--error-top">
-				<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" role="alert">
-					<div>
-						<span aria-hidden="true">
-						</span>
-						<span class="sd-error__item">
-							<span class="sv-string-viewer">Response required.</span>
-						</span>
-					</div>
-				</div>
-			</td>
-		</tr>
-		<tr class="sd-multipletext__row">
-			<td class="sd-multipletext__cell">
-				<label class="sd-formbox sd-formbox--error sd-multipletext__item-container sd-multipletext__item-container--allow-focus">
-					<span class="sd-formbox__label sd-multipletext__item-title">
-						<span class="sv-string-viewer sv-string-viewer--multiline">Text 1</span>
-						<span>&nbsp;</span>
-						<span aria-hidden="true" class="sd-question__required-text">*</span>
-					</span>
-					<div class="sd-multipletext__item">
-						<div class="sd-formbox sd-formbox--error sd-text">
-							<input aria-invalid="true" aria-label="Text 1" aria-required="true" class="sd-formbox__input" placeholder="" type="text">
+<div class="sd-question__header-and-content-container">
+	<div class="sd-question__content sd-question__content--multipletext" role="presentation">
+		<table class="sd-multipletext">
+			<tbody>
+				<tr class="sd-multipletext__row">
+					<td class="sd-multipletext__cell sd-multipletext__cell--error sd-multipletext__cell--error-top">
+						<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" role="alert">
+							<div>
+								<span aria-hidden="true">
+								</span>
+								<span class="sd-error__item">
+									<span class="sv-string-viewer">Response required.</span>
+								</span>
+							</div>
 						</div>
 					</td>
 				</tr>
diff --git a/tests/markup/snapshots/question-errors-v2-bottom.snap.html b/tests/markup/snapshots/question-errors-v2-bottom.snap.html
index 9fd863fe83..9a6fb5acd3 100644
--- a/tests/markup/snapshots/question-errors-v2-bottom.snap.html
+++ b/tests/markup/snapshots/question-errors-v2-bottom.snap.html
@@ -1,26 +1,32 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-question--error-bottom sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-				<span>&nbsp;</span>
-				<span aria-hidden="true" class="sd-question__required-text">*</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-formbox--error sd-text">
-				<input aria-describedby="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
-			</div>
-		</div>
-		<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0_errors" role="alert">
-			<div>
-				<span aria-hidden="true">
-				</span>
-				<span class="sd-error__item">
-					<span class="sv-string-viewer">Response required.</span>
-				</span>
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-question--error-bottom sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
+			<div class="sd-question__container">
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+							<span>&nbsp;</span>
+							<span aria-hidden="true" class="sd-question__required-text">*</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-formbox--error sd-text">
+							<input aria-describedby="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
+				<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-error sd-question__erbox sd-question__erbox--below-question" id="testid0_errors" role="alert">
+					<div>
+						<span aria-hidden="true">
+						</span>
+						<span class="sd-error__item">
+							<span class="sv-string-viewer">Response required.</span>
+						</span>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/tests/markup/snapshots/question-errors-v2-top.snap.html b/tests/markup/snapshots/question-errors-v2-top.snap.html
index a10285d246..88b1a82c4b 100644
--- a/tests/markup/snapshots/question-errors-v2-top.snap.html
+++ b/tests/markup/snapshots/question-errors-v2-top.snap.html
@@ -1,26 +1,32 @@
-<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
-	<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-question--error-top sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
-		<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" id="testid0_errors" role="alert">
-			<div>
-				<span aria-hidden="true">
-				</span>
-				<span class="sd-error__item">
-					<span class="sv-string-viewer">Response required.</span>
-				</span>
-			</div>
-		</div>
-		<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
-			<div class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
-				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
-				<span>&nbsp;</span>
-				<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
-				<span>&nbsp;</span>
-				<span aria-hidden="true" class="sd-question__required-text">*</span>
-			</div>
-		</div>
-		<div class="sd-question__content sd-question__content--text" role="presentation">
-			<div class="sd-formbox sd-formbox--error sd-text">
-				<input aria-describedby="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+<div class="sd-clearfix sd-page__row sd-row">
+	<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+		<div class="sd-element sd-element--with-frame sd-question sd-question--error sd-question--error-top sd-question--title-top sd-row__question sd-row__question--small" data-name="name" id="testid0">
+			<div class="sd-question__container">
+				<div aria-atomic="true" aria-live="polite" class="sd-element__erbox sd-element__erbox--above-element sd-error sd-question__erbox sd-question__erbox--above-question" id="testid0_errors" role="alert">
+					<div>
+						<span aria-hidden="true">
+						</span>
+						<span class="sd-error__item">
+							<span class="sv-string-viewer">Response required.</span>
+						</span>
+					</div>
+				</div>
+				<div class="sd-question__header-and-content-container">
+					<div class="sd-element__header sd-element__header--location-top sd-question__header sd-question__header--location-top">
+						<div class="sd-element__title sd-question__title sd-question__title--error sd-question__title--required sd-title" id="testid0_ariaTitle">
+							<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+							<span>&nbsp;</span>
+							<span class="sv-string-viewer sv-string-viewer--multiline">Question title</span>
+							<span>&nbsp;</span>
+							<span aria-hidden="true" class="sd-question__required-text">*</span>
+						</div>
+					</div>
+					<div class="sd-question__content sd-question__content--text" role="presentation">
+						<div class="sd-formbox sd-formbox--error sd-text">
+							<input aria-describedby="testid0_errors" aria-invalid="true" aria-labelledby="testid0_ariaTitle" aria-required="true" class="sd-formbox__input" id="testid0i" placeholder="" type="text">
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>

From e7e72d18b637dc8aaf8a18ea0e2ba417f4a51fbf Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Tue, 7 Jul 2026 16:35:47 +0300
Subject: [PATCH 140/155] Make use question spacing variables

---
 .../survey-core/src/default-theme/blocks/sd-question.scss  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 0a7f5c7a12..1528203d74 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -130,7 +130,7 @@
 .sd-question__header--location--left {
   width: auto;
   vertical-align: top;
-  margin-top: var(--sjs2-spacing-x150);
+  margin-top: var(--sjs2-layout-component-question-header-side-padding-top, var(--sjs2-spacing-x150));
 }
 
 .sd-question__content--left {
@@ -140,6 +140,7 @@
 
 .sd-question__title {
   @include sjs2--typography--component--question--title;
+  padding: var(--sjs2-layout-component-question-title-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-question-title-padding-horizontal, var(--sjs2-spacing-x000));
 }
 
 .sd-question__title--empty {
@@ -153,7 +154,9 @@
   @include sjs2--typography--component--question--description;
   color: $font-questiondescription-color;
   white-space: normal;
-  padding-inline: var(--sjs2-layout-component-question-description-padding-horizontal);
+  padding-inline: var(--sjs2-layout-component-question-description-padding-horizontal, var(--sjs2-spacing-x000));
+  padding-top: var(--sjs2-layout-component-question-description-padding-top, var(--sjs2-spacing-x000));
+  padding-bottom: var(--sjs2-layout-component-question-description-padding-bottom, var(--sjs2-spacing-x000));
 }
 
 .sd-question--no-pointer-events {

From 6d07306221ba8b0dc6d64bd010f5123eed50d7f8 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 8 Jul 2026 12:45:39 +0300
Subject: [PATCH 141/155] New tokens: panel - temporary fix for padding in
 creator Fixes #11421

---
 packages/survey-react-ui/src/panel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-react-ui/src/panel.tsx b/packages/survey-react-ui/src/panel.tsx
index 6c453ee844..46c9853072 100644
--- a/packages/survey-react-ui/src/panel.tsx
+++ b/packages/survey-react-ui/src/panel.tsx
@@ -28,7 +28,7 @@ export class SurveyPanel extends SurveyPanelBase {
       />
     );
     // const panelPaddingHorizontal = "var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500))";
-    const panelPaddingHorizontal = "var(--sd-base-padding, var(--sjs2-spacing-x500))";
+    const panelPaddingHorizontal = this.panel.isDesignMode ? "var(--sjs2-spacing-x000)" : "var(--sd-base-padding, var(--sjs2-spacing-x500))";
     const style: React.CSSProperties = {
       paddingInlineStart: this.panel.innerPaddingLeft
         ? `calc(${panelPaddingHorizontal} + ${this.panel.innerPaddingLeft})`

From 74d8db6271465c1193005ab026e670a3fa1eb68b Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 8 Jul 2026 17:25:17 +0300
Subject: [PATCH 142/155] New tokens: page - try to apply new design tokens
 Fixes #11421

---
 .../src/default-theme/base-theme.ts           | 56 +++++++++----------
 .../src/default-theme/blocks/sd-page.scss     | 37 +++++-------
 .../src/default-theme/default.m600.scss       |  8 +++
 3 files changed, 48 insertions(+), 53 deletions(-)

diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index a358e04cfc..88d2ec80ce 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -260,46 +260,42 @@ export default {
     "--sjs2-layout-component-message-box-padding-vertical": "var(--sjs2-spacing-x100)",
     "--sjs2-layout-component-message-box-gap-vertical": "var(--sjs2-spacing-x100)",
     "--sjs2-layout-component-message-content-gap-horizontal": "var(--sjs2-spacing-x100)",
-    "--sjs2-layout-component-page-box-padding-horizontal": "var(--sjs2-spacing-x500)",
+    "--sjs2-layout-component-page-box-padding-horizontal": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-page-box-padding-top": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-page-box-padding-bottom": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-page-box-gap-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-page-content-area-padding-vertical": "var(--sjs2-spacing-x500)",
-    "--sjs2-layout-component-page-content-area-gap-horizontal": "var(--sjs2-spacing-x300)",
-    "--sjs2-layout-component-page-content-area-gap-vertical": "var(--sjs2-spacing-x300)",
-    "--sjs2-layout-component-page-header-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-page-header-padding-vertical": "var(--sjs2-spacing-large-vertical)",
-    "--sjs2-layout-component-page-header-gap-vertical": "var(--sjs2-spacing-x050)",
-    "--sjs2-layout-component-page-title-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-title-padding-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-description-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-description-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-description-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-footer-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-page-footer-padding-vertical": "var(--sjs2-spacing-large-vertical)",
-    "--sjs2-layout-component-page-footer-action-group-gap": "var(--sjs2-spacing-x150)",
+    "--sjs2-layout-component-page-content-area-padding-horizontal": "var(--sjs2-layout-large-horizontal)",
+    "--sjs2-layout-component-page-content-area-padding-vertical": "var(--sjs2-layout-large-vertical)",
+    "--sjs2-layout-component-page-content-area-gap-horizontal": "var(--sjs2-layout-medium-horizontal)",
+    "--sjs2-layout-component-page-content-area-gap-vertical": "var(--sjs2-layout-medium-vertical)",
+    "--sjs2-layout-component-page-header-padding-horizontal": "var(--sjs2-layout-large-horizontal)",
+    "--sjs2-layout-component-page-header-padding-vertical": "var(--sjs2-layout-large-vertical)",
+    "--sjs2-layout-component-page-header-gap-vertical": "var(--sjs2-spacing-x050)", // +
+    "--sjs2-layout-component-page-title-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-title-padding-vertical": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-description-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-description-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-description-padding-bottom": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-footer-padding-horizontal": "var(--sjs2-layout-large-horizontal)", // not used
+    "--sjs2-layout-component-page-footer-padding-vertical": "var(--sjs2-layout-large-vertical)", // not used
+    "--sjs2-layout-component-page-footer-action-group-gap": "var(--sjs2-spacing-x150)", // not used
     "--sjs2-layout-component-panel-box-padding-horizontal": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-box-padding-top": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-box-padding-bottom": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-box-gap-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-content-area-padding-horizontal": "var(--sjs2-spacing-x500)",
-    "--sjs2-layout-component-panel-content-area-padding-vertical": "var(--sjs2-spacing-x500)", // TODO: This is a temporary fix to make the panel content area padding match the design spec. The correct value should be var(--sjs2-spacing-x400) but this will cause a breaking change in the UI. We will need to update the design spec to match the current implementation.
+    "--sjs2-layout-component-panel-content-area-padding-horizontal": "var(--sjs2-layout-large-horizontal)",
+    "--sjs2-layout-component-panel-content-area-padding-vertical": "var(--sjs2-layout-large-vertical)",
     "--sjs2-layout-component-panel-content-area-padding-top": "var(--sjs2-spacing-x400)",
     "--sjs2-layout-component-panel-content-area-padding-bottom": "var(--sjs2-spacing-x400)",
-    "--sjs2-layout-component-panel-content-area-gap-horizontal": "var(--sjs2-spacing-x500)",
-    "--sjs2-layout-component-panel-content-area-gap-vertical": "var(--sjs2-spacing-x400)",
-    "--sjs2-layout-component-panel-header-padding-left": "var(--sjs2-layout-component-panel-content-area-padding-horizontal)",
-    "--sjs2-layout-component-panel-header-padding-right": "var(--sjs2-layout-component-panel-content-area-padding-horizontal)",
-    "--sjs2-layout-component-panel-header-padding-top": "var(--sjs2-spacing-x400)",
-    "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-spacing-x200)",
-    // "--sjs2-layout-component-panel-content-area-padding-horizontal": "var(--sjs2-layout-large-horizontal)",
     // "--sjs2-layout-component-panel-content-area-padding-top": "var(--sjs2-layout-medium-vertical)",
     // "--sjs2-layout-component-panel-content-area-padding-bottom": "var(--sjs2-layout-medium-vertical)",
-    // "--sjs2-layout-component-panel-content-area-gap-horizontal": "var(--sjs2-layout-large-horizontal)",
+    "--sjs2-layout-component-panel-content-area-gap-horizontal": "var(--sjs2-layout-large-horizontal)",
+    "--sjs2-layout-component-panel-content-area-gap-vertical": "var(--sjs2-spacing-x400)",
     // "--sjs2-layout-component-panel-content-area-gap-vertical": "var(--sjs2-layout-medium-vertical)",
-    // "--sjs2-layout-component-panel-header-padding-left": "var(--sjs2-layout-large-horizontal)",
-    // "--sjs2-layout-component-panel-header-padding-right": "var(--sjs2-layout-large-horizontal)",
+    "--sjs2-layout-component-panel-header-padding-left": "var(--sjs2-layout-large-horizontal)",
+    "--sjs2-layout-component-panel-header-padding-right": "var(--sjs2-layout-large-horizontal)",
+    "--sjs2-layout-component-panel-header-padding-top": "var(--sjs2-spacing-x400)",
+    "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-spacing-x200)",
     // "--sjs2-layout-component-panel-header-padding-top": "var(--sjs2-layout-medium-vertical)",
     // "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-layout-medium-vertical)",
     "--sjs2-layout-component-panel-header-gap-vertical": "var(--sjs2-spacing-x050)",
@@ -387,12 +383,12 @@ export default {
     "--sjs2-layout-component-label-box-padding-vertical": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-label-box-gap-vertical": "var(--sjs2-spacing-x100)",
     "--sjs2-layout-component-label-content-gap-horizontal": "var(--sjs2-spacing-x050)",
+    "--sjs2-layout-component-question-box-gap-vertical": "var(--sjs2-spacing-x200)",
+    "--sjs2-layout-component-question-box-gap-horizontal": "var(--sjs2-spacing-x300)",
     "--sjs2-layout-component-question-header-padding-left": "var(--sjs2-spacing-x500)",
     "--sjs2-layout-component-question-header-padding-right": "var(--sjs2-spacing-x500)",
     "--sjs2-layout-component-question-header-padding-top": "var(--sjs2-spacing-x400)",
     "--sjs2-layout-component-question-header-padding-bottom": "var(--sjs2-spacing-x200)",
-    // "--sjs2-layout-component-question-box-gap-vertical": "var(--sjs2-spacing-x200)",
-    // "--sjs2-layout-component-question-box-gap-horizontal": "var(--sjs2-spacing-x300)",
     // "--sjs2-layout-component-question-header-padding-left": "var(--sjs2-spacing-x000)",
     // "--sjs2-layout-component-question-header-padding-right": "var(--sjs2-spacing-x000)",
     // "--sjs2-layout-component-question-header-padding-top": "var(--sjs2-spacing-x000)",
diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index eebc7ae527..b2899d4fc0 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -6,42 +6,45 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0 var(--sjs2-spacing-x500);
+  padding: 0 var(--sjs2-layout-component-page-content-area-padding-horizontal);
   width: 100%;
   box-sizing: border-box;
   border-radius: var(--sjs2-radius-component-page);
 
-  row-gap: var(--sjs2-layout-component-page-box-gap-horizontal, var(--sjs2-spacing-x300));
-  column-gap: var(--sjs2-layout-component-page-box-gap-vertical, var(--sjs2-spacing-x300));
+  row-gap: var(--sjs2-layout-component-page-content-area-gap-vertical);
+  column-gap: var(--sjs2-layout-component-page-content-area-gap-horizontal);
 }
 
 .sd-page__header {
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: var(--sjs2-layout-component-page-header-gap-vertical, var(--sjs2-spacing-x050));
-  margin: 0 0 var(--sjs2-spacing-x050) 0;
+  gap: var(--sjs2-layout-component-page-header-gap-vertical);
+  margin: 0 0 var(--sjs2-layout-component-page-header-gap-vertical) 0;
 }
 
 .sd-page__title {
   @include sjs2--typography--component--page--title;
   position: static;
+  padding-inline-start:  var(--sjs2-layout-component-page-title-padding-horizontal);
+  padding-inline-end: var(--sjs2-layout-component-page-title-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-page-title-padding-vertical);
+  padding-bottom: var(--sjs2-layout-component-page-title-padding-vertical);
 }
 
 .sd-page__description {
   @include sjs2--typography--component--page--description;
   position: static;
-  padding-inline-start:  var(--sjs2-layout-component-page-description-padding-horizontal, var(--sjs2-spacing-x000));
-  padding-inline-end: var(--sjs2-layout-component-page-description-padding-horizontal, var(--sjs2-spacing-x000));
-  padding-top: var(--sjs2-layout-component-page-description-padding-top, var(--sjs2-spacing-x000));
-  padding-bottom: var(--sjs2-layout-component-page-description-padding-bottom, var(--sjs2-spacing-x000));
+  padding-inline-start:  var(--sjs2-layout-component-page-description-padding-horizontal);
+  padding-inline-end: var(--sjs2-layout-component-page-description-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-page-description-padding-top);
+  padding-bottom: var(--sjs2-layout-component-page-description-padding-bottom);
 }
 
 .sd-page__content {
-  row-gap: var(--sjs2-spacing-x200);
-  column-gap: var(--sjs2-spacing-x200);
   display: flex;
   flex-direction: column;
+  gap: var(--sjs2-spacing-x200);
   width: 100%;
   box-sizing: border-box;
 }
@@ -50,18 +53,6 @@
   .sd-page {
     padding: 0;
   }
-
-  .sd-page__title {
-  }
-
-  .sd-page__description {
-  }
-
-  .sd-page__content {
-    row-gap: var(--sjs2-spacing-x200);
-    column-gap: var(--sjs2-spacing-x200);
-    padding: 0;
-  }
 }
 
 .sd-page__errbox {
diff --git a/packages/survey-core/src/default-theme/default.m600.scss b/packages/survey-core/src/default-theme/default.m600.scss
index 5b4ff9b277..7258677918 100644
--- a/packages/survey-core/src/default-theme/default.m600.scss
+++ b/packages/survey-core/src/default-theme/default.m600.scss
@@ -7,6 +7,10 @@
   --sd-base-padding: var(--sjs2-spacing-x500);
   --sd-base-vertical-padding: var(--sjs2-spacing-x400);
   --sd-page-vertical-padding: var(--sjs2-spacing-x300);
+  --sjs2-layout-large-horizontal: var(--sjs2-spacing-x500);
+  --sjs2-layout-large-vertical: var(--sjs2-spacing-x500);
+  --sjs2-layout-medium-horizontal: var(--sjs2-spacing-x300);
+  --sjs2-layout-medium-vertical: var(--sjs2-spacing-x300);
 }
 
 .sd-root-modern.sd-root-modern--mobile,
@@ -14,6 +18,10 @@
   --sd-base-padding: var(--sjs2-spacing-x300);
   --sd-base-vertical-padding: var(--sjs2-spacing-x200);
   --sd-page-vertical-padding: var(--sjs2-spacing-x200);
+  --sjs2-layout-large-horizontal: var(--sjs2-spacing-x200);
+  --sjs2-layout-large-vertical: var(--sjs2-spacing-x300); // TODO x500
+  --sjs2-layout-medium-horizontal: var(--sjs2-spacing-x200);
+  --sjs2-layout-medium-vertical: var(--sjs2-spacing-x200);
 }
 
 .sd-root-modern {

From 985c4388142a01078e8d8963f9831e1224cac14c Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Wed, 8 Jul 2026 17:57:00 +0300
Subject: [PATCH 143/155] Try to fix screenshot tests

---
 packages/survey-core/src/default-theme/blocks/sd-page.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index b2899d4fc0..69e6f2d138 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -11,7 +11,9 @@
   box-sizing: border-box;
   border-radius: var(--sjs2-radius-component-page);
 
-  row-gap: var(--sjs2-layout-component-page-content-area-gap-vertical);
+  // row-gap: var(--sjs2-layout-component-page-content-area-gap-vertical);
+  // TODO: Discuss with design team about the gap between page header and content. It is not clear if it should be the same as the gap between content areas or not.
+  row-gap: var(--sjs2-spacing-x300);
   column-gap: var(--sjs2-layout-component-page-content-area-gap-horizontal);
 }
 

From 5016b4de60b470d3015f8aa20049a52b606bdd25 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 9 Jul 2026 11:40:46 +0300
Subject: [PATCH 144/155] New tokens: global spacings renaming Fixes #11421

---
 .../src/default-theme/base-theme.ts           | 44 +++++++++----------
 .../src/default-theme/default.m600.scss       | 16 +++----
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index 88d2ec80ce..ea338d15c5 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -264,40 +264,40 @@ export default {
     "--sjs2-layout-component-page-box-padding-top": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-page-box-padding-bottom": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-page-box-gap-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-content-area-padding-horizontal": "var(--sjs2-layout-large-horizontal)",
-    "--sjs2-layout-component-page-content-area-padding-vertical": "var(--sjs2-layout-large-vertical)",
-    "--sjs2-layout-component-page-content-area-gap-horizontal": "var(--sjs2-layout-medium-horizontal)",
-    "--sjs2-layout-component-page-content-area-gap-vertical": "var(--sjs2-layout-medium-vertical)",
-    "--sjs2-layout-component-page-header-padding-horizontal": "var(--sjs2-layout-large-horizontal)",
-    "--sjs2-layout-component-page-header-padding-vertical": "var(--sjs2-layout-large-vertical)",
+    "--sjs2-layout-component-page-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
+    "--sjs2-layout-component-page-content-area-padding-vertical": "var(--sjs2-spacing-large-vertical)",
+    "--sjs2-layout-component-page-content-area-gap-horizontal": "var(--sjs2-spacing-medium-horizontal)",
+    "--sjs2-layout-component-page-content-area-gap-vertical": "var(--sjs2-spacing-medium-vertical)",
+    "--sjs2-layout-component-page-header-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
+    "--sjs2-layout-component-page-header-padding-vertical": "var(--sjs2-spacing-large-vertical)",
     "--sjs2-layout-component-page-header-gap-vertical": "var(--sjs2-spacing-x050)", // +
     "--sjs2-layout-component-page-title-padding-horizontal": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-page-title-padding-vertical": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-page-description-padding-horizontal": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-page-description-padding-top": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-page-description-padding-bottom": "var(--sjs2-spacing-x000)", // +
-    "--sjs2-layout-component-page-footer-padding-horizontal": "var(--sjs2-layout-large-horizontal)", // not used
-    "--sjs2-layout-component-page-footer-padding-vertical": "var(--sjs2-layout-large-vertical)", // not used
+    "--sjs2-layout-component-page-footer-padding-horizontal": "var(--sjs2-spacing-large-horizontal)", // not used
+    "--sjs2-layout-component-page-footer-padding-vertical": "var(--sjs2-spacing-large-vertical)", // not used
     "--sjs2-layout-component-page-footer-action-group-gap": "var(--sjs2-spacing-x150)", // not used
     "--sjs2-layout-component-panel-box-padding-horizontal": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-box-padding-top": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-box-padding-bottom": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-box-gap-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-content-area-padding-horizontal": "var(--sjs2-layout-large-horizontal)",
-    "--sjs2-layout-component-panel-content-area-padding-vertical": "var(--sjs2-layout-large-vertical)",
+    "--sjs2-layout-component-panel-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
+    "--sjs2-layout-component-panel-content-area-padding-vertical": "var(--sjs2-spacing-large-vertical)",
     "--sjs2-layout-component-panel-content-area-padding-top": "var(--sjs2-spacing-x400)",
     "--sjs2-layout-component-panel-content-area-padding-bottom": "var(--sjs2-spacing-x400)",
-    // "--sjs2-layout-component-panel-content-area-padding-top": "var(--sjs2-layout-medium-vertical)",
-    // "--sjs2-layout-component-panel-content-area-padding-bottom": "var(--sjs2-layout-medium-vertical)",
-    "--sjs2-layout-component-panel-content-area-gap-horizontal": "var(--sjs2-layout-large-horizontal)",
+    // "--sjs2-layout-component-panel-content-area-padding-top": "var(--sjs2-spacing-medium-vertical)",
+    // "--sjs2-layout-component-panel-content-area-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
+    "--sjs2-layout-component-panel-content-area-gap-horizontal": "var(--sjs2-spacing-large-horizontal)",
     "--sjs2-layout-component-panel-content-area-gap-vertical": "var(--sjs2-spacing-x400)",
-    // "--sjs2-layout-component-panel-content-area-gap-vertical": "var(--sjs2-layout-medium-vertical)",
-    "--sjs2-layout-component-panel-header-padding-left": "var(--sjs2-layout-large-horizontal)",
-    "--sjs2-layout-component-panel-header-padding-right": "var(--sjs2-layout-large-horizontal)",
+    // "--sjs2-layout-component-panel-content-area-gap-vertical": "var(--sjs2-spacing-medium-vertical)",
+    "--sjs2-layout-component-panel-header-padding-left": "var(--sjs2-spacing-large-horizontal)",
+    "--sjs2-layout-component-panel-header-padding-right": "var(--sjs2-spacing-large-horizontal)",
     "--sjs2-layout-component-panel-header-padding-top": "var(--sjs2-spacing-x400)",
     "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-spacing-x200)",
-    // "--sjs2-layout-component-panel-header-padding-top": "var(--sjs2-layout-medium-vertical)",
-    // "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-layout-medium-vertical)",
+    // "--sjs2-layout-component-panel-header-padding-top": "var(--sjs2-spacing-medium-vertical)",
+    // "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
     "--sjs2-layout-component-panel-header-gap-vertical": "var(--sjs2-spacing-x050)",
     "--sjs2-layout-component-panel-header-gap-horizontal": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-panel-title-padding-horizontal": "var(--sjs2-spacing-x000)",
@@ -312,10 +312,10 @@ export default {
     "--sjs2-layout-component-panel-footer-gap": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-panel-footer-action-group-gap": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-panel-header-action-group-gap": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-simple-box-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-simple-box-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-simple-box-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-simple-box-gap-vertical": "var(--sjs2-spacing-x000)",
+    "--sjs2-layout-component-panel-simple-box-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-simple-box-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-simple-box-padding-bottom": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-simple-box-gap-vertical": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-panel-simple-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
     "--sjs2-layout-component-panel-simple-content-area-padding-top": "var(--sjs2-spacing-medium-vertical)",
     "--sjs2-layout-component-panel-simple-content-area-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
diff --git a/packages/survey-core/src/default-theme/default.m600.scss b/packages/survey-core/src/default-theme/default.m600.scss
index 7258677918..95b9f0b187 100644
--- a/packages/survey-core/src/default-theme/default.m600.scss
+++ b/packages/survey-core/src/default-theme/default.m600.scss
@@ -7,10 +7,10 @@
   --sd-base-padding: var(--sjs2-spacing-x500);
   --sd-base-vertical-padding: var(--sjs2-spacing-x400);
   --sd-page-vertical-padding: var(--sjs2-spacing-x300);
-  --sjs2-layout-large-horizontal: var(--sjs2-spacing-x500);
-  --sjs2-layout-large-vertical: var(--sjs2-spacing-x500);
-  --sjs2-layout-medium-horizontal: var(--sjs2-spacing-x300);
-  --sjs2-layout-medium-vertical: var(--sjs2-spacing-x300);
+  --sjs2-spacing-large-horizontal: var(--sjs2-spacing-x500);
+  --sjs2-spacing-large-vertical: var(--sjs2-spacing-x500);
+  --sjs2-spacing-medium-horizontal: var(--sjs2-spacing-x300);
+  --sjs2-spacing-medium-vertical: var(--sjs2-spacing-x300);
 }
 
 .sd-root-modern.sd-root-modern--mobile,
@@ -18,10 +18,10 @@
   --sd-base-padding: var(--sjs2-spacing-x300);
   --sd-base-vertical-padding: var(--sjs2-spacing-x200);
   --sd-page-vertical-padding: var(--sjs2-spacing-x200);
-  --sjs2-layout-large-horizontal: var(--sjs2-spacing-x200);
-  --sjs2-layout-large-vertical: var(--sjs2-spacing-x300); // TODO x500
-  --sjs2-layout-medium-horizontal: var(--sjs2-spacing-x200);
-  --sjs2-layout-medium-vertical: var(--sjs2-spacing-x200);
+  --sjs2-spacing-large-horizontal: var(--sjs2-spacing-x200);
+  --sjs2-spacing-large-vertical: var(--sjs2-spacing-x300); // TODO x500
+  --sjs2-spacing-medium-horizontal: var(--sjs2-spacing-x200);
+  --sjs2-spacing-medium-vertical: var(--sjs2-spacing-x200);
 }
 
 .sd-root-modern {

From e8ee8e0a31c2d4798715eed19faf254335e80a1d Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 9 Jul 2026 12:35:07 +0300
Subject: [PATCH 145/155] Get page error box screenshot

---
 .../survey-core/src/default-theme/blocks/sd-page.scss  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index 69e6f2d138..df74a9c57a 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -64,11 +64,11 @@
 .sd-root--compact {
 
   // TODO: remove after new tokens are released, it is a temporary fix to keep screenshot
-  .sd-page__header ~ .sd-page__content {
-    .sd-page__errbox {
-      margin-top: var(--sjs2-spacing-negative-x100);
-    }
-  }
+  // .sd-page__header ~ .sd-page__content {
+  //   .sd-page__errbox {
+  //     margin-top: var(--sjs2-spacing-negative-x100);
+  //   }
+  // }
 
   .sd-page {
     row-gap: var(--sd-base-vertical-padding);

From 94988ed3cd6c38e85ae8cd5e03d986f3fe091a95 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 9 Jul 2026 13:01:28 +0300
Subject: [PATCH 146/155] New tokens - page

---
 .../src/default-theme/base-theme.ts           | 20 +++++------
 .../src/default-theme/blocks/sd-page.scss     | 34 +++++++++++--------
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index ea338d15c5..15c6045abd 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -260,16 +260,16 @@ export default {
     "--sjs2-layout-component-message-box-padding-vertical": "var(--sjs2-spacing-x100)",
     "--sjs2-layout-component-message-box-gap-vertical": "var(--sjs2-spacing-x100)",
     "--sjs2-layout-component-message-content-gap-horizontal": "var(--sjs2-spacing-x100)",
-    "--sjs2-layout-component-page-box-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-box-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-box-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-box-gap-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-page-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-page-content-area-padding-vertical": "var(--sjs2-spacing-large-vertical)",
-    "--sjs2-layout-component-page-content-area-gap-horizontal": "var(--sjs2-spacing-medium-horizontal)",
-    "--sjs2-layout-component-page-content-area-gap-vertical": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-page-header-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-page-header-padding-vertical": "var(--sjs2-spacing-large-vertical)",
+    "--sjs2-layout-component-page-box-padding-horizontal": "var(--sjs2-spacing-large-horizontal)", // + should be --sjs2-spacing-x000
+    "--sjs2-layout-component-page-box-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-box-padding-bottom": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-page-box-gap-vertical": "var(--sjs2-spacing-x300)", // + should be --sjs2-spacing-x000
+    "--sjs2-layout-component-page-content-area-padding-horizontal": "var(--sjs2-spacing-x000)", // + should be --sjs2-spacing-large-horizontal
+    "--sjs2-layout-component-page-content-area-padding-vertical": "var(--sjs2-spacing-x000)", // + should be --sjs2-spacing-large-vertical
+    "--sjs2-layout-component-page-content-area-gap-horizontal": "var(--sjs2-spacing-x200)", // + should be --sjs2-spacing-medium-horizontal
+    "--sjs2-layout-component-page-content-area-gap-vertical": "var(--sjs2-spacing-x200)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-page-header-padding-horizontal": "var(--sjs2-spacing-large-horizontal)", // not used
+    "--sjs2-layout-component-page-header-padding-vertical": "var(--sjs2-spacing-large-vertical)", // not used
     "--sjs2-layout-component-page-header-gap-vertical": "var(--sjs2-spacing-x050)", // +
     "--sjs2-layout-component-page-title-padding-horizontal": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-page-title-padding-vertical": "var(--sjs2-spacing-x000)", // +
diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index df74a9c57a..cd61158cc7 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -3,18 +3,18 @@
 
 .sd-page {
   position: relative;
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0 var(--sjs2-layout-component-page-content-area-padding-horizontal);
-  width: 100%;
   box-sizing: border-box;
+  padding-top: var(--sjs2-layout-component-page-box-padding-top);
+  padding-bottom: var(--sjs2-layout-component-page-box-padding-bottom);
+  padding-left: var(--sjs2-layout-component-page-box-padding-horizontal);
+  padding-right: var(--sjs2-layout-component-page-box-padding-horizontal);
   border-radius: var(--sjs2-radius-component-page);
-
-  // row-gap: var(--sjs2-layout-component-page-content-area-gap-vertical);
-  // TODO: Discuss with design team about the gap between page header and content. It is not clear if it should be the same as the gap between content areas or not.
-  row-gap: var(--sjs2-spacing-x300);
-  column-gap: var(--sjs2-layout-component-page-content-area-gap-horizontal);
+  row-gap: var(--sjs2-layout-component-page-box-gap-vertical);
+  column-gap: var(--sjs2-layout-component-page-box-gap-horizontal);
 }
 
 .sd-page__header {
@@ -46,11 +46,14 @@
 .sd-page__content {
   display: flex;
   flex-direction: column;
-  gap: var(--sjs2-spacing-x200);
+  padding: var(--sjs2-layout-component-page-content-area-padding-vertical) var(--sjs2-layout-component-page-content-area-padding-horizontal);
+  row-gap: var(--sjs2-layout-component-page-content-area-gap-vertical);
+  column-gap: var(--sjs2-layout-component-page-content-area-gap-horizontal);
   width: 100%;
   box-sizing: border-box;
 }
 
+// TODO: Remove after new tokens are released, it is a temporary fix to keep screenshot
 .sd-root-modern--mobile {
   .sd-page {
     padding: 0;
@@ -58,23 +61,26 @@
 }
 
 .sd-page__errbox {
+  // TODO: Discuss with design team
   padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100)) var(--sd-base-padding);
 }
 
 .sd-root--compact {
 
-  // TODO: remove after new tokens are released, it is a temporary fix to keep screenshot
-  // .sd-page__header ~ .sd-page__content {
-  //   .sd-page__errbox {
-  //     margin-top: var(--sjs2-spacing-negative-x100);
-  //   }
-  // }
+  // TODO: Remove after new tokens are released, it is a temporary fix to keep screenshot
+  .sd-page__header ~ .sd-page__content {
+    .sd-page__errbox {
+      margin-top: var(--sjs2-spacing-negative-x100);
+    }
+  }
 
   .sd-page {
+    // TODO: Discuss with design team. To remove in favour of compact theme?
     row-gap: var(--sd-base-vertical-padding);
   }
 
   .sd-page__content {
+    // TODO: Discuss with design team. To remove in favour of compact theme?
     row-gap: var(--sd-base-vertical-padding);
   }
 }

From 8b372938e0a008578662034530c489590f23f0ca Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 9 Jul 2026 13:59:43 +0300
Subject: [PATCH 147/155] Documented discussion result

---
 packages/survey-core/src/default-theme/blocks/sd-page.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-page.scss b/packages/survey-core/src/default-theme/blocks/sd-page.scss
index cd61158cc7..39f1ecfa24 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-page.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-page.scss
@@ -61,7 +61,7 @@
 }
 
 .sd-page__errbox {
-  // TODO: Discuss with design team
+  // TODO: Remove after new tokens are released, it is a temporary fix to keep screenshot
   padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100)) var(--sd-base-padding);
 }
 

From ee41d22d40693c9c0f97b607079ab55dcb8d107d Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 9 Jul 2026 14:37:54 +0300
Subject: [PATCH 148/155] New tokens: question

---
 .../src/default-theme/base-theme.ts           | 51 +++++++++----------
 .../src/default-theme/blocks/sd-question.scss | 45 +++++++++-------
 2 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index 15c6045abd..da5e45d474 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -315,12 +315,13 @@ export default {
     "--sjs2-layout-component-panel-simple-box-padding-horizontal": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-panel-simple-box-padding-top": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-panel-simple-box-padding-bottom": "var(--sjs2-spacing-x000)", // +
-    "--sjs2-layout-component-panel-simple-box-gap-vertical": "var(--sjs2-spacing-x000)", // +
-    "--sjs2-layout-component-panel-simple-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-simple-content-area-padding-top": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-simple-content-area-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-simple-content-area-gap-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-simple-content-area-gap-vertical": "var(--sjs2-spacing-medium-vertical)",
+    "--sjs2-layout-component-panel-simple-box-gap-vertical": "calc(0.5 * var(--sd-base-vertical-padding))", // + should be var(--sjs2-spacing-x000)
+    "--sjs2-layout-component-panel-simple-box-gap-horizontal": "var(--sjs2-spacing-x300)", // new
+    "--sjs2-layout-component-panel-simple-content-area-padding-horizontal": "var(--sd-base-padding)", // + should be --sjs2-spacing-large-horizontal
+    "--sjs2-layout-component-panel-simple-content-area-padding-top": "var(--sd-base-padding)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-simple-content-area-padding-bottom": "var(--sd-base-padding)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-simple-content-area-gap-horizontal": "var(--sjs2-spacing-x300)", // + should be --sjs2-spacing-large-horizontal
+    "--sjs2-layout-component-panel-simple-content-area-gap-vertical": "calc(0.5 * var(--sd-base-vertical-padding))", // + should be var(--sjs2-spacing-medium-vertical)
     "--sjs2-layout-component-panel-nested-footer-padding-left": "var(--sjs2-spacing-large-horizontal)",
     "--sjs2-layout-component-panel-nested-footer-padding-right": "var(--sjs2-spacing-large-horizontal)",
     "--sjs2-layout-component-panel-nested-footer-padding-top": "var(--sjs2-spacing-medium-vertical)",
@@ -383,29 +384,25 @@ export default {
     "--sjs2-layout-component-label-box-padding-vertical": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-label-box-gap-vertical": "var(--sjs2-spacing-x100)",
     "--sjs2-layout-component-label-content-gap-horizontal": "var(--sjs2-spacing-x050)",
-    "--sjs2-layout-component-question-box-gap-vertical": "var(--sjs2-spacing-x200)",
-    "--sjs2-layout-component-question-box-gap-horizontal": "var(--sjs2-spacing-x300)",
-    "--sjs2-layout-component-question-header-padding-left": "var(--sjs2-spacing-x500)",
-    "--sjs2-layout-component-question-header-padding-right": "var(--sjs2-spacing-x500)",
-    "--sjs2-layout-component-question-header-padding-top": "var(--sjs2-spacing-x400)",
-    "--sjs2-layout-component-question-header-padding-bottom": "var(--sjs2-spacing-x200)",
-    // "--sjs2-layout-component-question-header-padding-left": "var(--sjs2-spacing-x000)",
-    // "--sjs2-layout-component-question-header-padding-right": "var(--sjs2-spacing-x000)",
-    // "--sjs2-layout-component-question-header-padding-top": "var(--sjs2-spacing-x000)",
-    // "--sjs2-layout-component-question-header-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-header-gap-horizontal": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-question-header-gap-vertical": "var(--sjs2-spacing-x050)",
-    "--sjs2-layout-component-question-header-side-padding-left": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-header-side-padding-right": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-header-side-padding-top": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-question-header-side-padding-bottom": "var(--sjs2-spacing-x000)",
+    "--sjs2-layout-component-question-box-gap-vertical": "var(--sjs2-spacing-x200)", // used panel-simple-box-gap instead
+    "--sjs2-layout-component-question-box-gap-horizontal": "var(--sjs2-spacing-x300)", // used panel-simple-box-gap instead
+    "--sjs2-layout-component-question-header-padding-left": "var(--sd-base-padding)", // + should be --sjs2-spacing-x000
+    "--sjs2-layout-component-question-header-padding-right": "var(--sd-base-padding)", // + should be --sjs2-spacing-x000
+    "--sjs2-layout-component-question-header-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-header-padding-bottom": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-header-gap-horizontal": "var(--sjs2-spacing-x150)", // +
+    "--sjs2-layout-component-question-header-gap-vertical": "calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050))", // + should be var(--sjs2-spacing-x050)
+    "--sjs2-layout-component-question-header-side-padding-left": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-header-side-padding-right": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-header-side-padding-top": "var(--sjs2-spacing-x150)", // + used as top margin for title left location
+    "--sjs2-layout-component-question-header-side-padding-bottom": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-question-header-side-gap-horizontal": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-question-header-side-gap-vertical": "var(--sjs2-spacing-x050)",
-    "--sjs2-layout-component-question-title-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-title-padding-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-description-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-description-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-question-description-padding-bottom": "var(--sjs2-spacing-x000)",
+    "--sjs2-layout-component-question-title-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-title-padding-vertical": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-description-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-description-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-question-description-padding-bottom": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-question-header-action-group-gap": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-caption-box-padding-left": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-caption-box-padding-right": "var(--sjs2-spacing-x050)",
diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss
index 1528203d74..f527be1628 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-question.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss
@@ -6,11 +6,15 @@
 }
 
 .sd-question__container {
+  height: 100%;
   display: flex;
   flex-direction: column;
-  row-gap: calc(0.5 * var(--sd-base-vertical-padding));
-  column-gap: var(--sjs2-spacing-x300);
-  height: 100%;
+  padding-top: var(--sjs2-layout-component-panel-simple-box-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-simple-box-padding-bottom);
+  padding-left: var(--sjs2-layout-component-panel-simple-box-padding-horizontal);
+  padding-right: var(--sjs2-layout-component-panel-simple-box-padding-horizontal);
+  row-gap: var(--sjs2-layout-component-panel-simple-box-gap-vertical);
+  column-gap: var(--sjs2-layout-component-panel-simple-box-gap-horizontal);
 }
 
 .sd-element--with-frame > .sd-question__container {
@@ -20,8 +24,8 @@
 .sd-composite > .sd-question__container > .sd-question__header-and-content-container {
   padding: 0;
   &>.sd-question__header {
-    padding-left: var(--sjs2-layout-component-question-header-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
-    padding-right: var(--sjs2-layout-component-question-header-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
+    padding-left: calc(var(--sjs2-layout-component-question-header-padding-left) + var(--sv-element-add-padding-left, 0px));
+    padding-right: calc(var(--sjs2-layout-component-question-header-padding-right) + var(--sv-element-add-padding-right, 0px));
     & ~ hr {
       width: 100%;
       left: 0;
@@ -40,12 +44,12 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  padding-top: var(--sd-base-padding);
-  padding-bottom: var(--sd-base-padding);
-  padding-left: var(--sjs2-layout-component-question-content-padding-left, calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px)));
-  padding-right: var(--sjs2-layout-component-question-content-padding-right, calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px)));
-  row-gap: calc(0.5 * var(--sd-base-vertical-padding));
-  column-gap: var(--sjs2-spacing-x300);
+  padding-top: var(--sjs2-layout-component-panel-simple-content-area-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-simple-content-area-padding-bottom);
+  padding-left: calc(var(--sjs2-layout-component-panel-simple-content-area-padding-horizontal) + var(--sv-element-add-padding-left, 0px));
+  padding-right: calc(var(--sjs2-layout-component-panel-simple-content-area-padding-horizontal) + var(--sv-element-add-padding-right, 0px));
+  row-gap: var(--sjs2-layout-component-panel-simple-content-area-gap-vertical);
+  column-gap: var(--sjs2-layout-component-panel-simple-content-area-gap-horizontal);
 }
 
 // TODO: Remove after new design system is implemented
@@ -123,14 +127,19 @@
 .sd-question__header {
   display: flex;
   flex-direction: column;
-  row-gap: calc(0.25 * var(--sd-base-vertical-padding) - var(--sjs2-size-x050));
-  column-gap: var(--sjs2-layout-component-question-header-gap-horizontal, var(--sjs2-spacing-x150));
+  padding-top: var(--sjs2-layout-component-question-header-padding-top);
+  padding-bottom: var(--sjs2-layout-component-question-header-padding-bottom);
+  row-gap: var(--sjs2-layout-component-question-header-gap-vertical);
+  column-gap: var(--sjs2-layout-component-question-header-gap-horizontal);
 }
 
 .sd-question__header--location--left {
   width: auto;
   vertical-align: top;
-  margin-top: var(--sjs2-layout-component-question-header-side-padding-top, var(--sjs2-spacing-x150));
+  margin-top: var(--sjs2-layout-component-question-header-side-padding-top);
+  margin-bottom: var(--sjs2-layout-component-question-header-side-padding-bottom);
+  margin-left: var(--sjs2-layout-component-question-header-side-padding-left);
+  margin-right: var(--sjs2-layout-component-question-header-side-padding-right);
 }
 
 .sd-question__content--left {
@@ -140,7 +149,7 @@
 
 .sd-question__title {
   @include sjs2--typography--component--question--title;
-  padding: var(--sjs2-layout-component-question-title-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-question-title-padding-horizontal, var(--sjs2-spacing-x000));
+  padding: var(--sjs2-layout-component-question-title-padding-vertical) var(--sjs2-layout-component-question-title-padding-horizontal);
 }
 
 .sd-question__title--empty {
@@ -154,9 +163,9 @@
   @include sjs2--typography--component--question--description;
   color: $font-questiondescription-color;
   white-space: normal;
-  padding-inline: var(--sjs2-layout-component-question-description-padding-horizontal, var(--sjs2-spacing-x000));
-  padding-top: var(--sjs2-layout-component-question-description-padding-top, var(--sjs2-spacing-x000));
-  padding-bottom: var(--sjs2-layout-component-question-description-padding-bottom, var(--sjs2-spacing-x000));
+  padding-inline: var(--sjs2-layout-component-question-description-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-question-description-padding-top);
+  padding-bottom: var(--sjs2-layout-component-question-description-padding-bottom);
 }
 
 .sd-question--no-pointer-events {

From e5f9e704e51a810a57682d02531ac0e213763216 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 9 Jul 2026 16:39:40 +0300
Subject: [PATCH 149/155] New tokens: panel

---
 .../src/default-theme/base-theme.ts           | 55 +++++++-------
 .../src/default-theme/blocks/sd-panel.scss    | 74 ++++++++++++-------
 2 files changed, 73 insertions(+), 56 deletions(-)

diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index da5e45d474..65d073af12 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -279,38 +279,33 @@ export default {
     "--sjs2-layout-component-page-footer-padding-horizontal": "var(--sjs2-spacing-large-horizontal)", // not used
     "--sjs2-layout-component-page-footer-padding-vertical": "var(--sjs2-spacing-large-vertical)", // not used
     "--sjs2-layout-component-page-footer-action-group-gap": "var(--sjs2-spacing-x150)", // not used
-    "--sjs2-layout-component-panel-box-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-box-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-box-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-box-gap-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
+    "--sjs2-layout-component-panel-box-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-box-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-box-padding-bottom": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-box-gap-vertical": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)", // +
     "--sjs2-layout-component-panel-content-area-padding-vertical": "var(--sjs2-spacing-large-vertical)",
-    "--sjs2-layout-component-panel-content-area-padding-top": "var(--sjs2-spacing-x400)",
-    "--sjs2-layout-component-panel-content-area-padding-bottom": "var(--sjs2-spacing-x400)",
-    // "--sjs2-layout-component-panel-content-area-padding-top": "var(--sjs2-spacing-medium-vertical)",
-    // "--sjs2-layout-component-panel-content-area-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-content-area-gap-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-content-area-gap-vertical": "var(--sjs2-spacing-x400)",
-    // "--sjs2-layout-component-panel-content-area-gap-vertical": "var(--sjs2-spacing-medium-vertical)",
+    "--sjs2-layout-component-panel-content-area-padding-top": "var(--sjs2-spacing-large-vertical)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-content-area-padding-bottom": "var(--sjs2-spacing-large-vertical)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-content-area-gap-horizontal": "var(--sjs2-spacing-large-horizontal)", // +
+    "--sjs2-layout-component-panel-content-area-gap-vertical": "var(--sjs2-spacing-x400)", // + should be --sjs2-spacing-medium-vertical
     "--sjs2-layout-component-panel-header-padding-left": "var(--sjs2-spacing-large-horizontal)",
     "--sjs2-layout-component-panel-header-padding-right": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-header-padding-top": "var(--sjs2-spacing-x400)",
-    "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-spacing-x200)",
-    // "--sjs2-layout-component-panel-header-padding-top": "var(--sjs2-spacing-medium-vertical)",
-    // "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-header-gap-vertical": "var(--sjs2-spacing-x050)",
+    "--sjs2-layout-component-panel-header-padding-top": "var(--sjs2-spacing-x400)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-header-padding-bottom": "var(--sjs2-spacing-x400)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-header-gap-vertical": "var(--sjs2-spacing-x050)", // +
     "--sjs2-layout-component-panel-header-gap-horizontal": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-title-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-title-padding-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-description-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-description-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-description-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-footer-padding-left": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-footer-padding-right": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-footer-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-footer-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
+    "--sjs2-layout-component-panel-title-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-title-padding-vertical": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-description-padding-horizontal": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-description-padding-top": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-description-padding-bottom": "var(--sjs2-spacing-x000)", // +
+    "--sjs2-layout-component-panel-footer-padding-left": "var(--sjs2-spacing-large-horizontal)", // +
+    "--sjs2-layout-component-panel-footer-padding-right": "var(--sjs2-spacing-large-horizontal)", // +
+    "--sjs2-layout-component-panel-footer-padding-top": "calc(0.5 * var(--sd-base-vertical-padding))", // + should be var(--sjs2-spacing-x000)
+    "--sjs2-layout-component-panel-footer-padding-bottom": "var(--sjs2-spacing-x200)", // + sholud be --sjs2-spacing-medium-vertical
     "--sjs2-layout-component-panel-footer-gap": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-footer-action-group-gap": "var(--sjs2-spacing-x150)",
+    "--sjs2-layout-component-panel-footer-action-group-gap": "var(--sjs2-spacing-x150)", // +
     "--sjs2-layout-component-panel-header-action-group-gap": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-panel-simple-box-padding-horizontal": "var(--sjs2-spacing-x000)", // +
     "--sjs2-layout-component-panel-simple-box-padding-top": "var(--sjs2-spacing-x000)", // +
@@ -331,9 +326,9 @@ export default {
     "--sjs2-layout-component-panel-nested-box-padding-top": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-nested-box-padding-bottom": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-nested-box-gap-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-content-area-padding-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-nested-content-area-padding-top": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-nested-content-area-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
+    "--sjs2-layout-component-panel-nested-content-area-padding-horizontal": "var(--sd-base-padding)", // + should be --sjs2-spacing-large-horizontal
+    "--sjs2-layout-component-panel-nested-content-area-padding-top": "var(--sjs2-spacing-large-vertical)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-nested-content-area-padding-bottom": "var(--sd-base-padding)", // + should be --sjs2-spacing-medium-vertical
     "--sjs2-layout-component-panel-nested-content-area-gap-horizontal": "var(--sjs2-spacing-large-horizontal)",
     "--sjs2-layout-component-panel-nested-content-area-gap-vertical": "var(--sjs2-spacing-medium-vertical)",
     "--sjs2-layout-component-panel-nested-header-padding-left": "var(--sjs2-spacing-large-horizontal)",
diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index d69d3889f9..c09695bcdb 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -5,36 +5,39 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding-inline-start:  var(--sjs2-layout-component-panel-box-padding-horizontal, var(--sjs2-spacing-x000));
-  padding-inline-end: var(--sjs2-layout-component-panel-box-padding-horizontal, var(--sjs2-spacing-x000));
-  padding-top: var(--sjs2-layout-component-panel-box-padding-top, var(--sjs2-spacing-x000));
-  padding-bottom: var(--sjs2-layout-component-panel-box-padding-bottom, var(--sjs2-spacing-x000));
-  gap: var(--sjs2-layout-component-panel-box-gap-vertical, var(--sjs2-spacing-x000));
+  padding-inline-start:  var(--sjs2-layout-component-panel-box-padding-horizontal);
+  padding-inline-end: var(--sjs2-layout-component-panel-box-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-panel-box-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-box-padding-bottom);
+  gap: var(--sjs2-layout-component-panel-box-gap-vertical);
 }
 
 .sd-panel__header {
-  padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
+  padding-top: var(--sjs2-layout-component-panel-header-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-header-padding-bottom);
+  padding-inline-start: var(--sjs2-layout-component-panel-header-padding-left);
+  padding-inline-end: var(--sjs2-layout-component-panel-header-padding-right);
 }
 
 .sd-panel__title {
-  padding: var(--sjs2-layout-component-panel-title-padding-vertical, var(--sjs2-spacing-x000)) var(--sjs2-layout-component-panel-title-padding-horizontal, var(--sjs2-spacing-x000));
+  padding: var(--sjs2-layout-component-panel-title-padding-vertical) var(--sjs2-layout-component-panel-title-padding-horizontal);
 }
 
 .sd-panel__description {
-  padding-inline-start:  var(--sjs2-layout-component-panel-description-padding-horizontal, var(--sjs2-spacing-x000));
-  padding-inline-end: var(--sjs2-layout-component-panel-description-padding-horizontal, var(--sjs2-spacing-x000));
-  padding-top: var(--sjs2-layout-component-panel-description-padding-top, var(--sjs2-spacing-x000));
-  padding-bottom: var(--sjs2-layout-component-panel-description-padding-bottom, var(--sjs2-spacing-x000));
+  padding-inline-start:  var(--sjs2-layout-component-panel-description-padding-horizontal);
+  padding-inline-end: var(--sjs2-layout-component-panel-description-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-panel-description-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-description-padding-bottom);
 }
 
 .sd-panel__content {
-  padding-inline-start:  var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500));
-  padding-inline-end: var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500));
-  padding-top: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x500));
-  --animation-padding-top: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x500));
-  padding-bottom: var(--sjs2-layout-component-panel-content-area-padding-vertical, var(--sjs2-spacing-x500));
-  row-gap: var(--sjs2-layout-component-panel-content-area-gap-vertical, var(--sjs2-spacing-x400));
-  column-gap: var(--sjs2-layout-component-panel-content-area-gap-horizontal, var(--sjs2-spacing-x500));
+  padding-inline-start:  var(--sjs2-layout-component-panel-content-area-padding-horizontal);
+  padding-inline-end: var(--sjs2-layout-component-panel-content-area-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-panel-content-area-padding-top);
+  --animation-padding-top: var(--sjs2-layout-component-panel-content-area-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-content-area-padding-bottom);
+  row-gap: var(--sjs2-layout-component-panel-content-area-gap-vertical);
+  column-gap: var(--sjs2-layout-component-panel-content-area-gap-horizontal);
   display: flex;
   flex-direction: column;
 }
@@ -92,13 +95,13 @@
   }
 
   & > .sd-panel__errbox {
-    margin: 0 0 var(--sjs2-spacing-x200) 0;
+    margin: 0 0 var(--sjs2-layout-component-page-content-area-gap-vertical) 0;
     padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs2-spacing-x100)) var(--sd-base-padding);
   }
 
   & > .sd-panel__content {
     padding: 0;
-    row-gap: var(--sjs2-spacing-x200);
+    row-gap: var(--sjs2-layout-component-page-content-area-gap-vertical);
   }
 }
 
@@ -139,7 +142,7 @@
 }
 
 .sd-panel__title ~ .sd-panel__description {
-  margin-top: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));
+  margin-top: var(--sjs2-layout-component-panel-header-gap-vertical);
 }
 
 .sd-panel > .sd-panel__header:after {
@@ -148,11 +151,12 @@
 
 .sd-panel__footer {
   box-sizing: border-box;
-  padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x200)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
   border-top: 1px solid $border-light;
   margin-top: calc(-1 * var(--sjs2-spacing-x300));
-  padding-inline-start: calc(var(--sjs2-layout-component-panel-content-area-padding-horizontal) - 1.75 * var(--sjs2-spacing-x100));
-  padding-top: calc(0.5 * var(--sd-base-vertical-padding));
+  padding-top: var(--sjs2-layout-component-panel-footer-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-footer-padding-bottom);
+  padding-inline-start: calc(var(--sjs2-layout-component-panel-footer-padding-left) - 1.75 * var(--sjs2-spacing-x100));
+  padding-inline-end: var(--sjs2-layout-component-panel-footer-padding-right);
   --sd-action-bar-gap: var(--sjs2-layout-component-panel-footer-action-group-gap);
 }
 
@@ -165,7 +169,25 @@
 
 .sd-panel.sd-element--nested {
   & > .sd-panel__content {
-    padding-bottom: var(--sd-base-padding);
-    --animation-padding-top: var(--sd-base-padding);
+    padding-inline-start: var(--sjs2-layout-component-panel-nested-content-area-padding-horizontal);
+    padding-inline-end: var(--sjs2-layout-component-panel-nested-content-area-padding-horizontal);
+    padding-top: var(--sjs2-layout-component-panel-nested-content-area-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-nested-content-area-padding-bottom);
+    --animation-padding-top: var(--sjs2-layout-component-panel-nested-content-area-padding-bottom);
   }
 }
+
+// .sd-element--nested > .sd-panel__header {
+//   padding-top: var(--sjs2-layout-component-panel-nested-header-padding-top, calc(0.5 * var(--sd-base-vertical-padding)));
+//   padding-bottom: var(--sjs2-layout-component-panel-nested-header-padding-bottom, calc(0.5 * var(--sd-base-vertical-padding)));
+//   padding-inline-start: var(--sjs2-layout-component-panel-nested-header-padding-left, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
+//   padding-inline-end: var(--sjs2-layout-component-panel-nested-header-padding-right, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
+// }
+
+// .sd-element--nested > .sd-panel__content {
+//   padding-inline-start: var(--sjs2-layout-component-panel-nested-content-area-padding-horizontal, var(--sjs2-spacing-x500));
+//   padding-inline-end: var(--sjs2-layout-component-panel-nested-content-area-padding-horizontal, var(--sjs2-spacing-x500));
+//   column-gap: var(--sjs2-layout-component-panel-nested-content-area-gap-horizontal, var(--sjs2-spacing-x500));
+//   // TODO: --sjs2-layout-component-panel-nested-content-area-padding-top/-bottom and -gap-vertical tokens are x300 (24px),
+//   // but the current implementation renders x500/x400 (40px/32px). Using these tokens would change the rendering.
+// }

From 777bd35ae8499a1346ef7d1dfbbb1dde2674faea Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 10 Jul 2026 10:46:45 +0300
Subject: [PATCH 150/155] New tokens: panel - nested panel Fixes #11421

---
 .../src/default-theme/base-theme.ts           | 50 +++++++-------
 .../default-theme/blocks/sd-panel-nested.scss | 67 +++++++++++++++++++
 .../src/default-theme/blocks/sd-panel.scss    | 28 --------
 .../src/default-theme/default.fontless.scss   |  1 +
 4 files changed, 93 insertions(+), 53 deletions(-)
 create mode 100644 packages/survey-core/src/default-theme/blocks/sd-panel-nested.scss

diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index 65d073af12..8de58e7d46 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -317,33 +317,33 @@ export default {
     "--sjs2-layout-component-panel-simple-content-area-padding-bottom": "var(--sd-base-padding)", // + should be --sjs2-spacing-medium-vertical
     "--sjs2-layout-component-panel-simple-content-area-gap-horizontal": "var(--sjs2-spacing-x300)", // + should be --sjs2-spacing-large-horizontal
     "--sjs2-layout-component-panel-simple-content-area-gap-vertical": "calc(0.5 * var(--sd-base-vertical-padding))", // + should be var(--sjs2-spacing-medium-vertical)
-    "--sjs2-layout-component-panel-nested-footer-padding-left": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-nested-footer-padding-right": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-nested-footer-padding-top": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-nested-footer-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-nested-footer-gap": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-nested-box-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-box-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-box-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-box-gap-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-content-area-padding-horizontal": "var(--sd-base-padding)", // + should be --sjs2-spacing-large-horizontal
-    "--sjs2-layout-component-panel-nested-content-area-padding-top": "var(--sjs2-spacing-large-vertical)", // + should be --sjs2-spacing-medium-vertical
-    "--sjs2-layout-component-panel-nested-content-area-padding-bottom": "var(--sd-base-padding)", // + should be --sjs2-spacing-medium-vertical
-    "--sjs2-layout-component-panel-nested-content-area-gap-horizontal": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-nested-content-area-gap-vertical": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-nested-header-padding-left": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-nested-header-padding-right": "var(--sjs2-spacing-large-horizontal)",
+    "--sjs2-layout-component-panel-nested-footer-padding-left": "var(--sjs2-layout-component-panel-footer-padding-left)",
+    "--sjs2-layout-component-panel-nested-footer-padding-right": "var(--sjs2-layout-component-panel-footer-padding-right)",
+    "--sjs2-layout-component-panel-nested-footer-padding-top": "var(--sjs2-layout-component-panel-footer-padding-top)",
+    "--sjs2-layout-component-panel-nested-footer-padding-bottom": "var(--sjs2-layout-component-panel-footer-padding-bottom)",
+    "--sjs2-layout-component-panel-nested-footer-gap": "var(--sjs2-layout-component-panel-footer-gap)",
+    "--sjs2-layout-component-panel-nested-box-padding-horizontal": "var(--sjs2-layout-component-panel-box-padding-horizontal)",
+    "--sjs2-layout-component-panel-nested-box-padding-top": "var(--sjs2-layout-component-panel-box-padding-top)",
+    "--sjs2-layout-component-panel-nested-box-padding-bottom": "var(--sjs2-layout-component-panel-box-padding-bottom)",
+    "--sjs2-layout-component-panel-nested-box-gap-vertical": "var(--sjs2-layout-component-panel-box-gap-vertical)",
+    "--sjs2-layout-component-panel-nested-content-area-padding-horizontal": "var(--sd-base-padding)",
+    "--sjs2-layout-component-panel-nested-content-area-padding-top": "var(--sjs2-layout-component-panel-content-area-padding-top)",
+    "--sjs2-layout-component-panel-nested-content-area-padding-bottom": "var(--sd-base-padding)",
+    "--sjs2-layout-component-panel-nested-content-area-gap-horizontal": "var(--sjs2-layout-component-panel-content-area-gap-horizontal)",
+    "--sjs2-layout-component-panel-nested-content-area-gap-vertical": "var(--sjs2-layout-component-panel-content-area-gap-vertical)",
+    "--sjs2-layout-component-panel-nested-header-padding-left": "var(--sjs2-layout-component-panel-header-padding-left)",
+    "--sjs2-layout-component-panel-nested-header-padding-right": "var(--sjs2-layout-component-panel-header-padding-right)",
     "--sjs2-layout-component-panel-nested-header-padding-top": "var(--sjs2-spacing-x200)",
     "--sjs2-layout-component-panel-nested-header-padding-bottom": "var(--sjs2-spacing-x200)",
-    "--sjs2-layout-component-panel-nested-header-gap-vertical": "var(--sjs2-spacing-x050)",
-    "--sjs2-layout-component-panel-nested-header-gap-horizontal": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-nested-title-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-title-padding-vertical": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-description-padding-horizontal": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-description-padding-top": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-description-padding-bottom": "var(--sjs2-spacing-x000)",
-    "--sjs2-layout-component-panel-nested-footer-action-group-gap": "var(--sjs2-spacing-x150)",
-    "--sjs2-layout-component-panel-nested-header-action-group-gap": "var(--sjs2-spacing-x150)",
+    "--sjs2-layout-component-panel-nested-header-gap-vertical": "var(--sjs2-layout-component-panel-header-gap-vertical)",
+    "--sjs2-layout-component-panel-nested-header-gap-horizontal": "var(--sjs2-layout-component-panel-header-gap-horizontal)",
+    "--sjs2-layout-component-panel-nested-title-padding-horizontal": "var(--sjs2-layout-component-panel-title-padding-horizontal)",
+    "--sjs2-layout-component-panel-nested-title-padding-vertical": "var(--sjs2-layout-component-panel-title-padding-vertical)",
+    "--sjs2-layout-component-panel-nested-description-padding-horizontal": "var(--sjs2-layout-component-panel-description-padding-horizontal)",
+    "--sjs2-layout-component-panel-nested-description-padding-top": "var(--sjs2-layout-component-panel-description-padding-top)",
+    "--sjs2-layout-component-panel-nested-description-padding-bottom": "var(--sjs2-layout-component-panel-description-padding-bottom)",
+    "--sjs2-layout-component-panel-nested-footer-action-group-gap": "var(--sjs2-layout-component-panel-footer-action-group-gap)",
+    "--sjs2-layout-component-panel-nested-header-action-group-gap": "var(--sjs2-layout-component-panel-header-action-group-gap)",
     "--sjs2-layout-component-panel-dynamic-box-padding-horizontal": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-dynamic-box-padding-top": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-dynamic-box-padding-bottom": "var(--sjs2-spacing-x000)",
diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel-nested.scss b/packages/survey-core/src/default-theme/blocks/sd-panel-nested.scss
new file mode 100644
index 0000000000..65f4d155c4
--- /dev/null
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel-nested.scss
@@ -0,0 +1,67 @@
+.sd-panel.sd-element--nested {
+  padding-inline-start: var(--sjs2-layout-component-panel-nested-box-padding-horizontal);
+  padding-inline-end: var(--sjs2-layout-component-panel-nested-box-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-panel-nested-box-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-nested-box-padding-bottom);
+  gap: var(--sjs2-layout-component-panel-nested-box-gap-vertical);
+
+  & > .sd-panel__header {
+    padding-top: var(--sjs2-layout-component-panel-nested-header-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-nested-header-padding-bottom);
+    padding-inline-start: var(--sjs2-layout-component-panel-nested-header-padding-left);
+    padding-inline-end: var(--sjs2-layout-component-panel-nested-header-padding-right);
+  }
+
+  .sd-panel__title {
+    padding: var(--sjs2-layout-component-panel-nested-title-padding-vertical)
+      var(--sjs2-layout-component-panel-nested-title-padding-horizontal);
+  }
+
+  .sd-panel__description {
+    padding-top: var(--sjs2-layout-component-panel-nested-description-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-nested-description-padding-bottom);
+    padding-inline: var(--sjs2-layout-component-panel-nested-description-padding-horizontal);
+  }
+
+  .sd-panel__title ~ .sd-panel__description {
+    margin-top: var(--sjs2-layout-component-panel-nested-header-gap-vertical);
+  }
+
+  & > .sd-panel__content {
+    padding-inline-start: var(--sjs2-layout-component-panel-nested-content-area-padding-horizontal);
+    padding-inline-end: var(--sjs2-layout-component-panel-nested-content-area-padding-horizontal);
+    padding-top: var(--sjs2-layout-component-panel-nested-content-area-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-nested-content-area-padding-bottom);
+    --animation-padding-top: var(--sjs2-layout-component-panel-nested-content-area-padding-bottom);
+    row-gap: var(--sjs2-layout-component-panel-nested-content-area-gap-vertical);
+    column-gap: var(--sjs2-layout-component-panel-nested-content-area-gap-horizontal);
+  }
+
+  & > .sd-panel__footer {
+    padding-top: var(--sjs2-layout-component-panel-nested-footer-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-nested-footer-padding-bottom);
+    padding-inline-start: calc(var(--sjs2-layout-component-panel-nested-footer-padding-left) - 1.75 * var(--sjs2-spacing-x100));
+    padding-inline-end: var(--sjs2-layout-component-panel-nested-footer-padding-right);
+    --sd-action-bar-gap: var(--sjs2-layout-component-panel-nested-footer-action-group-gap);
+  }
+}
+
+// Restore the ".sd-panel--as-page .sd-panel__footer" override (sd-panel.scss) that the
+// higher-specificity nested footer rule above would otherwise beat.
+.sd-panel--as-page .sd-panel.sd-element--nested > .sd-panel__footer {
+  padding: var(--sjs2-spacing-x400) 0 0;
+  margin: 0;
+  border: none;
+  width: initial;
+}
+
+.sd-root-modern--mobile {
+  .sd-element--nested > .sd-panel__header {
+    padding: var(--sjs2-spacing-x100) var(--sjs2-spacing-x300);
+  }
+  // Restore the mobile gap (sd-panel.scss mobile ".sd-panel__content" rule) that the
+  // higher-specificity nested content rule above would otherwise beat.
+  .sd-panel.sd-element--nested > .sd-panel__content {
+    gap: var(--sjs2-spacing-x200);
+  }
+}
diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel.scss b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
index c09695bcdb..81e605948d 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel.scss
@@ -46,9 +46,6 @@
  .sd-panel__header {
     padding: var(--sjs2-spacing-x200) var(--sjs2-spacing-x300);
   }
-  .sd-element--nested > .sd-panel__header {
-    padding: var(--sjs2-spacing-x100) var(--sjs2-spacing-x300);
-  }
  .sd-panel__content {
     padding: var(--sjs2-spacing-x300);
     gap: var(--sjs2-spacing-x200);
@@ -166,28 +163,3 @@
   border: none;
   width: initial;
 }
-
-.sd-panel.sd-element--nested {
-  & > .sd-panel__content {
-    padding-inline-start: var(--sjs2-layout-component-panel-nested-content-area-padding-horizontal);
-    padding-inline-end: var(--sjs2-layout-component-panel-nested-content-area-padding-horizontal);
-    padding-top: var(--sjs2-layout-component-panel-nested-content-area-padding-top);
-    padding-bottom: var(--sjs2-layout-component-panel-nested-content-area-padding-bottom);
-    --animation-padding-top: var(--sjs2-layout-component-panel-nested-content-area-padding-bottom);
-  }
-}
-
-// .sd-element--nested > .sd-panel__header {
-//   padding-top: var(--sjs2-layout-component-panel-nested-header-padding-top, calc(0.5 * var(--sd-base-vertical-padding)));
-//   padding-bottom: var(--sjs2-layout-component-panel-nested-header-padding-bottom, calc(0.5 * var(--sd-base-vertical-padding)));
-//   padding-inline-start: var(--sjs2-layout-component-panel-nested-header-padding-left, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
-//   padding-inline-end: var(--sjs2-layout-component-panel-nested-header-padding-right, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
-// }
-
-// .sd-element--nested > .sd-panel__content {
-//   padding-inline-start: var(--sjs2-layout-component-panel-nested-content-area-padding-horizontal, var(--sjs2-spacing-x500));
-//   padding-inline-end: var(--sjs2-layout-component-panel-nested-content-area-padding-horizontal, var(--sjs2-spacing-x500));
-//   column-gap: var(--sjs2-layout-component-panel-nested-content-area-gap-horizontal, var(--sjs2-spacing-x500));
-//   // TODO: --sjs2-layout-component-panel-nested-content-area-padding-top/-bottom and -gap-vertical tokens are x300 (24px),
-//   // but the current implementation renders x500/x400 (40px/32px). Using these tokens would change the rendering.
-// }
diff --git a/packages/survey-core/src/default-theme/default.fontless.scss b/packages/survey-core/src/default-theme/default.fontless.scss
index 25abf3aa5d..0ddf675194 100644
--- a/packages/survey-core/src/default-theme/default.fontless.scss
+++ b/packages/survey-core/src/default-theme/default.fontless.scss
@@ -29,6 +29,7 @@
 @use "blocks/sd-formbox.scss";
 @use "blocks/sd-comment.scss";
 @use "blocks/sd-panel.scss";
+@use "blocks/sd-panel-nested.scss";
 @use "blocks/sd-signaturepad.scss";
 @use "blocks/sd-matrixdynamic.scss";
 @use "blocks/sd-table.scss";

From fd45e1962c2c9a015702b0c8afad0e05068e7d99 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 10 Jul 2026 11:00:27 +0300
Subject: [PATCH 151/155] Added TODO remark about nested panels specific
 variables

---
 .../survey-core/src/default-theme/blocks/sd-panel-nested.scss    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-panel-nested.scss b/packages/survey-core/src/default-theme/blocks/sd-panel-nested.scss
index 65f4d155c4..52e932808e 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-panel-nested.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-panel-nested.scss
@@ -1,3 +1,4 @@
+// TODO: Discuss whether we need this file: only 2 CSS variables are differ from ordinary panel
 .sd-panel.sd-element--nested {
   padding-inline-start: var(--sjs2-layout-component-panel-nested-box-padding-horizontal);
   padding-inline-end: var(--sjs2-layout-component-panel-nested-box-padding-horizontal);

From a6dde246b766a656c4f5c80dfa39c5b35b5e67de Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 10 Jul 2026 11:54:30 +0300
Subject: [PATCH 152/155] New tokens - use all tokens in paneldynamic

---
 .../src/default-theme/base-theme.ts           |  6 +--
 .../default-theme/blocks/sd-paneldynamic.scss | 48 +++++++++++++++----
 2 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/packages/survey-core/src/default-theme/base-theme.ts b/packages/survey-core/src/default-theme/base-theme.ts
index 8de58e7d46..aac310ea57 100644
--- a/packages/survey-core/src/default-theme/base-theme.ts
+++ b/packages/survey-core/src/default-theme/base-theme.ts
@@ -355,8 +355,8 @@ export default {
     "--sjs2-layout-component-panel-dynamic-content-area-gap-vertical": "var(--sjs2-spacing-x000)",
     "--sjs2-layout-component-panel-dynamic-header-padding-left": "var(--sjs2-spacing-large-horizontal)",
     "--sjs2-layout-component-panel-dynamic-header-padding-right": "var(--sjs2-spacing-large-horizontal)",
-    "--sjs2-layout-component-panel-dynamic-header-padding-top": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-dynamic-header-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
+    "--sjs2-layout-component-panel-dynamic-header-padding-top": "var(--sjs2-spacing-x400)", // + should be --sjs2-spacing-medium-vertical
+    "--sjs2-layout-component-panel-dynamic-header-padding-bottom": "var(--sjs2-spacing-x400)", // + should be --sjs2-spacing-medium-vertical
     "--sjs2-layout-component-panel-dynamic-header-gap-vertical": "var(--sjs2-spacing-x050)",
     "--sjs2-layout-component-panel-dynamic-header-gap-horizontal": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-panel-dynamic-title-padding-horizontal": "var(--sjs2-spacing-x000)",
@@ -368,7 +368,7 @@ export default {
     "--sjs2-layout-component-panel-dynamic-footer-padding-right": "var(--sjs2-spacing-large-horizontal)",
     "--sjs2-layout-component-panel-dynamic-footer-padding-top": "var(--sjs2-spacing-medium-vertical)",
     "--sjs2-layout-component-panel-dynamic-footer-padding-bottom": "var(--sjs2-spacing-medium-vertical)",
-    "--sjs2-layout-component-panel-dynamic-footer-gap": "var(--sjs2-spacing-x150)",
+    "--sjs2-layout-component-panel-dynamic-footer-gap": "var(--sjs2-spacing-x050)", // + should be --sjs2-spacing-x150
     "--sjs2-layout-component-panel-dynamic-footer-action-group-gap": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-panel-dynamic-header-action-group-gap": "var(--sjs2-spacing-x150)",
     "--sjs2-layout-component-labeled-group-box-padding-vertical": "var(--sjs2-spacing-x150)",
diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
index 6122f8c5bd..2268b6919b 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss
@@ -1,6 +1,12 @@
 @use "../variables.scss" as *;
 
 .sd-paneldynamic {
+    padding-top: var(--sjs2-layout-component-panel-dynamic-box-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-dynamic-box-padding-bottom);
+    padding-inline-start: var(--sjs2-layout-component-panel-dynamic-box-padding-horizontal);
+    padding-inline-end: var(--sjs2-layout-component-panel-dynamic-box-padding-horizontal);
+    gap: var(--sjs2-layout-component-panel-dynamic-box-gap-vertical);
+
     .sd-progress {
         position: absolute;
         left: 0;
@@ -68,8 +74,21 @@
 }
 
 .sd-paneldynamic__header {
-  padding: var(--sjs2-layout-component-panel-header-padding-vertical, var(--sjs2-spacing-x400)) var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
-  gap: var(--sjs2-layout-component-panel-header-gap-vertical, var(--sjs2-spacing-x050));
+  padding-top: var(--sjs2-layout-component-panel-dynamic-header-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-dynamic-header-padding-bottom);
+  padding-inline-start: var(--sjs2-layout-component-panel-dynamic-header-padding-left);
+  padding-inline-end: var(--sjs2-layout-component-panel-dynamic-header-padding-right);
+  gap: var(--sjs2-layout-component-panel-dynamic-header-gap-vertical);
+}
+
+.sd-paneldynamic__header .sd-question__title {
+  padding: var(--sjs2-layout-component-panel-dynamic-title-padding-vertical) var(--sjs2-layout-component-panel-dynamic-title-padding-horizontal);
+}
+
+.sd-paneldynamic__header .sd-question__description {
+  padding-inline: var(--sjs2-layout-component-panel-dynamic-description-padding-horizontal);
+  padding-top: var(--sjs2-layout-component-panel-dynamic-description-padding-top);
+  padding-bottom: var(--sjs2-layout-component-panel-dynamic-description-padding-bottom);
 }
 
 .sd-paneldynamic__header ~ hr {
@@ -91,8 +110,11 @@
 
 .sd-paneldynamic__footer {
     clear: both;
-    padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x300)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
-    gap: var(--sjs2-layout-component-panel-footer-gap-vertical, var(--sjs2-spacing-x050));
+    padding-top: var(--sjs2-layout-component-panel-dynamic-footer-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-dynamic-footer-padding-bottom);
+    padding-inline-start: var(--sjs2-layout-component-panel-dynamic-footer-padding-left);
+    padding-inline-end: var(--sjs2-layout-component-panel-dynamic-footer-padding-right);
+    gap: var(--sjs2-layout-component-panel-dynamic-footer-gap);
     position: relative;
 
     .sd-progress {
@@ -110,10 +132,10 @@
         padding: var(--sjs2-spacing-x200) var(--sjs2-spacing-x300);
     }
     .sd-paneldynamic__footer {
-        padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x100)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-spacing-x300));
+        padding: var(--sjs2-spacing-x100) var(--sjs2-spacing-x300);
     }
     .sd-paneldynamic__panel-footer {
-        padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x200)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-spacing-x300));
+        padding: var(--sjs2-spacing-x200) var(--sjs2-spacing-x300);
         margin-top: calc(var(--sjs2-spacing-negative-x400));
     }
 }
@@ -213,7 +235,7 @@
 .sd-paneldynamic__panel-footer {
     border-top: none;
     position: relative;
-    padding: var(--sjs2-layout-component-panel-footer-padding-vertical, var(--sjs2-spacing-x300)) var(--sjs2-layout-component-panel-footer-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
+    padding: var(--sjs2-layout-component-panel-dynamic-footer-padding-top) var(--sjs2-layout-component-panel-dynamic-footer-padding-right) var(--sjs2-layout-component-panel-dynamic-footer-padding-bottom) var(--sjs2-layout-component-panel-dynamic-footer-padding-left);
     justify-content: flex-end;
     padding-top: 0;
     margin-top: calc(var(--sjs2-spacing-negative-x300));
@@ -229,8 +251,8 @@
 
 .sd-paneldynamic__tabs-container {
     padding-top: var(--sd-base-padding);
-    padding-left: var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
-    padding-right: var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal));
+    padding-left: var(--sjs2-layout-component-panel-dynamic-header-padding-left);
+    padding-right: var(--sjs2-layout-component-panel-dynamic-header-padding-right);
     .sd-tabs-toolbar {
         margin-bottom: -1px;
     }
@@ -241,7 +263,7 @@
         position: relative;
         background: $border-light;
         bottom: 0;
-        margin: 0 calc(-1 * var(--sjs2-layout-component-panel-header-padding-horizontal, var(--sjs2-layout-component-panel-content-area-padding-horizontal)));
+        margin: 0 calc(-1 * var(--sjs2-layout-component-panel-dynamic-header-padding-right)) 0 calc(-1 * var(--sjs2-layout-component-panel-dynamic-header-padding-left));
     }
 }
 .sd-paneldynamic__tabs-container--with-header {
@@ -366,6 +388,12 @@
 .sd-paneldynamic__panels-container {
     position: relative;
     overflow: hidden;
+    padding-top: var(--sjs2-layout-component-panel-dynamic-content-area-padding-top);
+    padding-bottom: var(--sjs2-layout-component-panel-dynamic-content-area-padding-bottom);
+    padding-inline-start: var(--sjs2-layout-component-panel-dynamic-content-area-padding-horizontal);
+    padding-inline-end: var(--sjs2-layout-component-panel-dynamic-content-area-padding-horizontal);
+    row-gap: var(--sjs2-layout-component-panel-dynamic-content-area-gap-vertical);
+    column-gap: var(--sjs2-layout-component-panel-dynamic-content-area-gap-horizontal);
 }
 
 .sd-paneldynamic__panel-wrapper {

From e8530cf5b940f4785008bad603107da529d18757 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Sat, 11 Jul 2026 23:36:28 +0400
Subject: [PATCH 153/155] Fix template for composite question in angular

---
 .../survey-angular-ui/src/questions/composite.component.ts     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/survey-angular-ui/src/questions/composite.component.ts b/packages/survey-angular-ui/src/questions/composite.component.ts
index ac66a3b778..1bbb2661f2 100644
--- a/packages/survey-angular-ui/src/questions/composite.component.ts
+++ b/packages/survey-angular-ui/src/questions/composite.component.ts
@@ -6,7 +6,8 @@ import { PanelModel, QuestionCompositeModel } from "survey-core";
 
 @Component({
   selector: "sv-ng-composite-question",
-  template: "<sv-ng-panel [model]='contentPanel'></sv-ng-panel>"
+  template: "<ng-template #template><sv-ng-panel [model]='contentPanel'></sv-ng-panel></ng-template>",
+  styles: [":host { display: none } "]
 })
 export class CompositeQuestionComponent extends QuestionAngular<QuestionCompositeModel> {
   get contentPanel(): PanelModel {

From c84531608dbec63283044558295d4f0e43b4397a Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Sat, 11 Jul 2026 23:48:20 +0400
Subject: [PATCH 154/155] Fix paneldynamic template in Angular

---
 .../src/questions/paneldynamic.component.html | 49 ++++++++++---------
 .../src/questions/paneldynamic.component.ts   |  3 +-
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/packages/survey-angular-ui/src/questions/paneldynamic.component.html b/packages/survey-angular-ui/src/questions/paneldynamic.component.html
index 27cfadfc0f..5ce14a41ab 100644
--- a/packages/survey-angular-ui/src/questions/paneldynamic.component.html
+++ b/packages/survey-angular-ui/src/questions/paneldynamic.component.html
@@ -1,28 +1,31 @@
-<div [class]="model.cssClasses.root" #contentElement>
-  <div *ngIf="model.hasTabbedMenu" [class]="model.getTabsContainerCss()">
-    <sv-action-bar [model]="model.tabbedMenu"></sv-action-bar>
-  </div>
-  <sv-ng-placeholder-paneldynamic [question]="model"></sv-ng-placeholder-paneldynamic>
-  <div [class]="model.cssClasses.progress" *ngIf="model.isProgressTopShowing && model.isRangeShowing">
-    <div [class]="model.cssClasses.progressBar" [style]="{ width: model.progress }"
-    role="progressbar" [attr.aria-label]="model.progressBarAriaLabel"
-    ></div>
-  </div>
-  <div [class]="model.cssClasses.panelsContainer">
-    <ng-container *ngFor="let panel of model.renderedPanels; index as index; trackBy: trackPanelBy">
-      <div [class]="model.getPanelWrapperCss(panel)">
-        <ng-template
-          [component]="{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }"></ng-template>
-        <ng-container *ngIf="model.canRenderRemovePanelOnRight(panel)">
+<ng-template #template>
+  <div [class]="model.cssClasses.root" #contentElement>
+    <div *ngIf="model.hasTabbedMenu" [class]="model.getTabsContainerCss()">
+      <sv-action-bar [model]="model.tabbedMenu"></sv-action-bar>
+    </div>
+    <sv-ng-placeholder-paneldynamic [question]="model"></sv-ng-placeholder-paneldynamic>
+    <div [class]="model.cssClasses.progress" *ngIf="model.isProgressTopShowing && model.isRangeShowing">
+      <div [class]="model.cssClasses.progressBar" [style]="{ width: model.progress }"
+      role="progressbar" [attr.aria-label]="model.progressBarAriaLabel"
+      ></div>
+    </div>
+    <div [class]="model.cssClasses.panelsContainer">
+      <ng-container *ngFor="let panel of model.renderedPanels; index as index; trackBy: trackPanelBy">
+        <div [class]="model.getPanelWrapperCss(panel)">
           <ng-template
-            [component]="{ name: 'sv-action', data: { model: model.getRemovePanelAction(panel)}}"></ng-template>
-        </ng-container>
-      </div>
-      <hr [class]="model.cssClasses.separator" *ngIf="model.showSeparator(index)" />
-    </ng-container>
+            [component]="{ name: getPanelComponentName(panel), data: getPanelComponentData(panel) }"></ng-template>
+          <ng-container *ngIf="model.canRenderRemovePanelOnRight(panel)">
+            <ng-template
+              [component]="{ name: 'sv-action', data: { model: model.getRemovePanelAction(panel)}}"></ng-template>
+          </ng-container>
+        </div>
+        <hr [class]="model.cssClasses.separator" *ngIf="model.showSeparator(index)" />
+      </ng-container>
+    </div>
+    <ng-container [ngTemplateOutlet]="progress" *ngIf="model.showNavigation"></ng-container>
   </div>
-  <ng-container [ngTemplateOutlet]="progress" *ngIf="model.showNavigation"></ng-container>
-</div>
+</ng-template>
+
 <ng-template #progress>
   <div [class]="model.cssClasses.footer" *ngIf="(model.isRangeShowing && model.isProgressBottomShowing) || model.showFooterToolbar">
     <hr [class]="model.cssClasses.separator" />
diff --git a/packages/survey-angular-ui/src/questions/paneldynamic.component.ts b/packages/survey-angular-ui/src/questions/paneldynamic.component.ts
index 476762d404..7186792a06 100644
--- a/packages/survey-angular-ui/src/questions/paneldynamic.component.ts
+++ b/packages/survey-angular-ui/src/questions/paneldynamic.component.ts
@@ -5,7 +5,8 @@ import { AngularComponentFactory } from "../component-factory";
 
 @Component({
   selector: "sv-ng-paneldynamic-question",
-  templateUrl: "./paneldynamic.component.html"
+  templateUrl: "./paneldynamic.component.html",
+  styleUrls: ["../hide-host.scss"]
 })
 export class PanelDynamicQuestionComponent extends QuestionAngular<QuestionPanelDynamicModel | any> implements OnInit {
   public trackPanelBy(_: number, panel: PanelModel) {

From a2414e3bcf576b1d23eb64b5abeb61f7f5f4153d Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Sun, 12 Jul 2026 00:07:11 +0400
Subject: [PATCH 155/155] Try to fix matrix scr tests

---
 packages/survey-core/src/default-theme/blocks/sd-table.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss
index 5e2bc06b56..9367baea07 100644
--- a/packages/survey-core/src/default-theme/blocks/sd-table.scss
+++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss
@@ -360,7 +360,7 @@
   .sd-question--table.sd-element--nested {
     &>.sd-question__container {
       &>.sd-question__header-and-content-container {
-        &>.sd-question__content:first-child {
+        &>.sd-question__content:first-of-type {
           .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
             margin-top: var(--sjs2-spacing-negative-x200);
           }
@@ -373,7 +373,7 @@
   .sd-question--table.sd-element--nested {
     &>.sd-question__container {
       &>.sd-question__header-and-content-container {
-        &>.sd-question__content:first-child {
+        &>.sd-question__content:first-of-type {
           .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
             margin-top: var(--sjs2-spacing-negative-x200);
           }