diff --git a/src/elements/accordion/accordion.visual.spec.ts b/src/elements/accordion/accordion.visual.spec.ts
new file mode 100644
index 0000000000..0a6986c63f
--- /dev/null
+++ b/src/elements/accordion/accordion.visual.spec.ts
@@ -0,0 +1,56 @@
+import { html } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualRegressionFixture,
+} from '../core/testing/private.js';
+
+import './accordion.js';
+import '../expansion-panel.js';
+
+describe(`sbb-accordion`, () => {
+  let root: HTMLElement;
+
+  const cases = {
+    borderless: [false, true],
+    expanded: [false, true],
+  };
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    // Main test cases
+    describeEach(cases, ({ borderless, expanded }) => {
+      beforeEach(async function () {
+        root = await visualRegressionFixture(
+          html`
+            <sbb-accordion>
+              <sbb-expansion-panel ?borderless=${borderless}>
+                <sbb-expansion-panel-header>Header 1</sbb-expansion-panel-header>
+                <sbb-expansion-panel-content>Content 1</sbb-expansion-panel-content>
+              </sbb-expansion-panel>
+              <sbb-expansion-panel ?borderless=${borderless} ?expanded=${expanded}>
+                <sbb-expansion-panel-header>Header 2</sbb-expansion-panel-header>
+                <sbb-expansion-panel-content>Content 2</sbb-expansion-panel-content>
+              </sbb-expansion-panel>
+              <sbb-expansion-panel ?borderless=${borderless}>
+                <sbb-expansion-panel-header>Header 3</sbb-expansion-panel-header>
+                <sbb-expansion-panel-content>Content 3</sbb-expansion-panel-content>
+              </sbb-expansion-panel>
+            </sbb-accordion>
+          `,
+          {
+            backgroundColor: borderless ? 'var(--sbb-color-cement)' : undefined,
+          },
+        );
+      });
+
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with((setup) => {
+          setup.withSnapshotElement(root);
+        }),
+      );
+    });
+  });
+});
diff --git a/src/elements/expansion-panel/expansion-panel-content/__snapshots__/expansion-panel-content.snapshot.spec.snap.js b/src/elements/expansion-panel/expansion-panel-content/__snapshots__/expansion-panel-content.snapshot.spec.snap.js
index fd2c7ef0de..dc8b80acf1 100644
--- a/src/elements/expansion-panel/expansion-panel-content/__snapshots__/expansion-panel-content.snapshot.spec.snap.js
+++ b/src/elements/expansion-panel/expansion-panel-content/__snapshots__/expansion-panel-content.snapshot.spec.snap.js
@@ -1,15 +1,25 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-expansion-panel-content renders"] = 
+snapshots["sbb-expansion-panel-content renders DOM"] = 
+`<sbb-expansion-panel-content
+  role="region"
+  slot="content"
+>
+  Content
+</sbb-expansion-panel-content>
+`;
+/* end snapshot sbb-expansion-panel-content renders DOM */
+
+snapshots["sbb-expansion-panel-content renders Shadow DOM"] = 
 `<div class="sbb-expansion-panel-content">
   <slot>
   </slot>
 </div>
 `;
-/* end snapshot sbb-expansion-panel-content renders */
+/* end snapshot sbb-expansion-panel-content renders Shadow DOM */
 
-snapshots["sbb-expansion-panel-content A11y tree Chrome"] = 
+snapshots["sbb-expansion-panel-content renders A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -23,9 +33,9 @@ snapshots["sbb-expansion-panel-content A11y tree Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-expansion-panel-content A11y tree Chrome */
+/* end snapshot sbb-expansion-panel-content renders A11y tree Chrome */
 
-snapshots["sbb-expansion-panel-content A11y tree Firefox"] = 
+snapshots["sbb-expansion-panel-content renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -39,5 +49,5 @@ snapshots["sbb-expansion-panel-content A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-expansion-panel-content A11y tree Firefox */
+/* end snapshot sbb-expansion-panel-content renders A11y tree Firefox */
 
diff --git a/src/elements/expansion-panel/expansion-panel-content/expansion-panel-content.snapshot.spec.ts b/src/elements/expansion-panel/expansion-panel-content/expansion-panel-content.snapshot.spec.ts
index bd319398fa..2818acae96 100644
--- a/src/elements/expansion-panel/expansion-panel-content/expansion-panel-content.snapshot.spec.ts
+++ b/src/elements/expansion-panel/expansion-panel-content/expansion-panel-content.snapshot.spec.ts
@@ -3,23 +3,27 @@ import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
+import type { SbbExpansionPanelContentElement } from './expansion-panel-content.js';
 import './expansion-panel-content.js';
 
 describe(`sbb-expansion-panel-content`, () => {
-  it('renders', async () => {
-    const root = await fixture(
-      html`<sbb-expansion-panel-content>Content</sbb-expansion-panel-content>`,
-    );
+  describe('renders', () => {
+    let element: SbbExpansionPanelContentElement;
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-expansion-panel-content slot="content" role="region">
-          Content
-        </sbb-expansion-panel-content>
-      `,
-    );
-    await expect(root).shadowDom.to.be.equalSnapshot();
-  });
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-expansion-panel-content>Content</sbb-expansion-panel-content>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-  testA11yTreeSnapshot(html`<sbb-expansion-panel-content>Content</sbb-expansion-panel-content>`);
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
 });
diff --git a/src/elements/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.snapshot.spec.snap.js b/src/elements/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.snapshot.spec.snap.js
index 623f9e0d1d..707738fd21 100644
--- a/src/elements/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.snapshot.spec.snap.js
+++ b/src/elements/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.snapshot.spec.snap.js
@@ -1,7 +1,22 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-expansion-panel-header renders collapsed"] = 
+snapshots["sbb-expansion-panel-header renders DOM"] = 
+`<sbb-expansion-panel-header
+  data-action=""
+  data-button=""
+  data-slot-names="unnamed"
+  dir="ltr"
+  role="button"
+  slot="header"
+  tabindex="0"
+>
+  Header
+</sbb-expansion-panel-header>
+`;
+/* end snapshot sbb-expansion-panel-header renders DOM */
+
+snapshots["sbb-expansion-panel-header renders Shadow DOM"] = 
 `<span class="sbb-action-base sbb-expansion-panel-header">
   <span class="sbb-expansion-panel-header__title">
     <span class="sbb-expansion-panel-header__icon">
@@ -23,9 +38,42 @@ snapshots["sbb-expansion-panel-header renders collapsed"] =
   </span>
 </span>
 `;
-/* end snapshot sbb-expansion-panel-header renders collapsed */
+/* end snapshot sbb-expansion-panel-header renders Shadow DOM */
+
+snapshots["sbb-expansion-panel-header renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Header"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-expansion-panel-header renders A11y tree Chrome */
+
+snapshots["sbb-expansion-panel-header renders with icon DOM"] = 
+`<sbb-expansion-panel-header
+  data-action=""
+  data-button=""
+  data-icon=""
+  data-slot-names="unnamed"
+  dir="ltr"
+  icon-name="pie-medium"
+  role="button"
+  slot="header"
+  tabindex="0"
+>
+  Header
+</sbb-expansion-panel-header>
+`;
+/* end snapshot sbb-expansion-panel-header renders with icon DOM */
 
-snapshots["sbb-expansion-panel-header renders with icon"] = 
+snapshots["sbb-expansion-panel-header renders with icon Shadow DOM"] = 
 `<span class="sbb-action-base sbb-expansion-panel-header">
   <span class="sbb-expansion-panel-header__title">
     <span class="sbb-expansion-panel-header__icon">
@@ -54,9 +102,33 @@ snapshots["sbb-expansion-panel-header renders with icon"] =
   </span>
 </span>
 `;
-/* end snapshot sbb-expansion-panel-header renders with icon */
+/* end snapshot sbb-expansion-panel-header renders with icon Shadow DOM */
+
+snapshots["sbb-expansion-panel-header renders with slotted icon DOM"] = 
+`<sbb-expansion-panel-header
+  data-action=""
+  data-button=""
+  data-icon=""
+  data-slot-names="icon unnamed"
+  dir="ltr"
+  role="button"
+  slot="header"
+  tabindex="0"
+>
+  <sbb-icon
+    aria-hidden="true"
+    data-namespace="default"
+    name="pie-medium"
+    role="img"
+    slot="icon"
+  >
+  </sbb-icon>
+  Header
+</sbb-expansion-panel-header>
+`;
+/* end snapshot sbb-expansion-panel-header renders with slotted icon DOM */
 
-snapshots["sbb-expansion-panel-header renders with slotted icon"] = 
+snapshots["sbb-expansion-panel-header renders with slotted icon Shadow DOM"] = 
 `<span class="sbb-action-base sbb-expansion-panel-header">
   <span class="sbb-expansion-panel-header__title">
     <span class="sbb-expansion-panel-header__icon">
@@ -78,25 +150,9 @@ snapshots["sbb-expansion-panel-header renders with slotted icon"] =
   </span>
 </span>
 `;
-/* end snapshot sbb-expansion-panel-header renders with slotted icon */
-
-snapshots["sbb-expansion-panel-header A11y tree Chrome"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": "",
-  "children": [
-    {
-      "role": "button",
-      "name": "Header"
-    }
-  ]
-}
-</p>
-`;
-/* end snapshot sbb-expansion-panel-header A11y tree Chrome */
+/* end snapshot sbb-expansion-panel-header renders with slotted icon Shadow DOM */
 
-snapshots["sbb-expansion-panel-header A11y tree Firefox"] = 
+snapshots["sbb-expansion-panel-header renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -110,5 +166,5 @@ snapshots["sbb-expansion-panel-header A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-expansion-panel-header A11y tree Firefox */
+/* end snapshot sbb-expansion-panel-header renders A11y tree Firefox */
 
diff --git a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.snapshot.spec.ts b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.snapshot.spec.ts
index db72720674..5eac86d749 100644
--- a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.snapshot.spec.ts
+++ b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.snapshot.spec.ts
@@ -3,74 +3,69 @@ import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
+import type { SbbExpansionPanelHeaderElement } from './expansion-panel-header.js';
 import './expansion-panel-header.js';
 import '../../icon.js';
 
 describe(`sbb-expansion-panel-header`, () => {
-  it('renders collapsed', async () => {
-    const root = await fixture(
-      html`<sbb-expansion-panel-header>Header</sbb-expansion-panel-header>`,
-    );
+  describe('renders', () => {
+    let element: SbbExpansionPanelHeaderElement;
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-expansion-panel-header slot='header' dir="ltr" role="button" slot="header" tabindex="0" data-slot-names="unnamed" data-action data-button>
-          Header
-        </sbb-expansion-panel-header>
-      `,
-    );
-    await expect(root).shadowDom.to.be.equalSnapshot();
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-expansion-panel-header>Header</sbb-expansion-panel-header>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
-  it('renders with icon', async () => {
-    const root = await fixture(
-      html`<sbb-expansion-panel-header icon-name="pie-medium">Header</sbb-expansion-panel-header>`,
-    );
+  describe('renders with icon', () => {
+    let element: SbbExpansionPanelHeaderElement;
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-expansion-panel-header
-          slot='header'
-          icon-name="pie-medium"
-          dir="ltr"
-          role="button"
-          slot="header"
-          tabindex="0"
-          data-action
-          data-button
-          data-icon
-          data-slot-names="unnamed"
-        >
-          Header
-        </sbb-expansion-panel-header>
-      `,
-    );
-    await expect(root).shadowDom.to.be.equalSnapshot();
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-expansion-panel-header icon-name="pie-medium"
+          >Header</sbb-expansion-panel-header
+        >`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
   });
 
-  it('renders with slotted icon', async () => {
-    const root = await fixture(html`
-      <sbb-expansion-panel-header>
-        <sbb-icon slot="icon" name="pie-medium"></sbb-icon>
-        Header
-      </sbb-expansion-panel-header>
-    `);
+  describe('renders with slotted icon', () => {
+    let element: SbbExpansionPanelHeaderElement;
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-expansion-panel-header slot='header' dir="ltr" role="button" slot="header" tabindex="0" data-icon data-slot-names="icon unnamed" data-action data-button>
-          <sbb-icon
-            aria-hidden="true"
-            data-namespace="default"
-            role="img"
-            slot='icon'
-            name='pie-medium'></sbb-icon>
+    beforeEach(async () => {
+      element = await fixture(
+        html` <sbb-expansion-panel-header>
+          <sbb-icon slot="icon" name="pie-medium"></sbb-icon>
           Header
-        </sbb-expansion-panel-header>
-      `,
-    );
-    await expect(root).shadowDom.to.be.equalSnapshot();
-  });
+        </sbb-expansion-panel-header>`,
+      );
+    });
 
-  testA11yTreeSnapshot(html`<sbb-expansion-panel-header>Header</sbb-expansion-panel-header>`);
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+  });
 });
diff --git a/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts b/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
new file mode 100644
index 0000000000..9112a1b98d
--- /dev/null
+++ b/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
@@ -0,0 +1,124 @@
+import { html, nothing } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualDiffFocus,
+  visualDiffHover,
+  visualRegressionFixture,
+} from '../../core/testing/private.js';
+
+import './expansion-panel.js';
+import '../expansion-panel-header.js';
+import '../expansion-panel-content.js';
+import '../../icon.js';
+
+describe(`sbb-expansion-panel`, () => {
+  let root: HTMLElement;
+
+  const cases = {
+    borderless: [false, true],
+    disabled: [false, true],
+    expanded: [false, true],
+    color: ['white', 'milk'],
+  };
+
+  const sizeCases = {
+    size: ['s', 'l'],
+    expanded: [false, true],
+  };
+
+  const titleLevelCases = ['1', '4'];
+
+  const iconCases = [
+    { name: 'none', icon: undefined, slotted: false },
+    { name: 'prop', icon: 'arrow-right-small', slotted: false },
+    { name: 'slotted', icon: 'arrow-right-small', slotted: true },
+  ];
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    // Main test cases
+    describeEach(cases, ({ borderless, disabled, expanded, color }) => {
+      beforeEach(async function () {
+        root = await visualRegressionFixture(html`
+          <sbb-expansion-panel
+            ?borderless=${borderless}
+            ?disabled=${disabled}
+            ?expanded=${expanded}
+            color=${color}
+          >
+            <sbb-expansion-panel-header icon-name="arrow-right-small">
+              Header
+            </sbb-expansion-panel-header>
+            <sbb-expansion-panel-content> Content </sbb-expansion-panel-content>
+          </sbb-expansion-panel>
+        `);
+      });
+
+      for (const state of [visualDiffDefault, visualDiffFocus, visualDiffHover]) {
+        it(
+          state.name,
+          state.with((setup) => {
+            setup.withSnapshotElement(root);
+          }),
+        );
+      }
+    });
+
+    // Size test cases
+    describeEach(sizeCases, ({ expanded, size }) => {
+      beforeEach(async function () {
+        root = await visualRegressionFixture(html`
+          <sbb-expansion-panel ?expanded=${expanded} size=${size}>
+            <sbb-expansion-panel-header icon-name="arrow-right-small">
+              Header
+            </sbb-expansion-panel-header>
+            <sbb-expansion-panel-content> Content </sbb-expansion-panel-content>
+          </sbb-expansion-panel>
+        `);
+      });
+
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with((setup) => {
+          setup.withSnapshotElement(root);
+        }),
+      );
+    });
+
+    // Title level test
+    for (const titleLevel of titleLevelCases) {
+      it(
+        `title-level=${titleLevel}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-expansion-panel title-level=${titleLevel}>
+              <sbb-expansion-panel-header icon-name="arrow-right-small">
+                Header
+              </sbb-expansion-panel-header>
+              <sbb-expansion-panel-content> Content </sbb-expansion-panel-content>
+            </sbb-expansion-panel>
+          `);
+        }),
+      );
+    }
+
+    // Icon cases
+    for (const state of iconCases) {
+      it(
+        `icon=${state.name}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-expansion-panel>
+              <sbb-expansion-panel-header .iconName=${!state.slotted ? state.icon : undefined}>
+                ${state.slotted ? html`<sbb-icon name=${state.icon!}></sbb-icon>` : nothing} Label
+              </sbb-expansion-panel-header>
+              <sbb-expansion-panel-content> Content </sbb-expansion-panel-content>
+            </sbb-expansion-panel>
+          `);
+        }),
+      );
+    }
+  });
+});