From 1ab16024ceae2624ff00dc5952c06256a9643e87 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Wed, 12 Jun 2024 10:31:40 +0200
Subject: [PATCH 1/9] test(sbb-expansion-panel): add visual spec

---
 .../expansion-panel-header.visual.spec.ts     |  48 +++++++++
 .../expansion-panel.visual.spec.ts            | 102 ++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts
 create mode 100644 src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts

diff --git a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts
new file mode 100644
index 0000000000..d3559a6d48
--- /dev/null
+++ b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts
@@ -0,0 +1,48 @@
+import { html, nothing } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffStandardStates,
+  visualRegressionFixture,
+} from '../../core/testing/private.js';
+
+import './expansion-panel-header.js';
+import '../../icon.js';
+
+describe(`sbb-button`, () => {
+  let root: HTMLElement;
+
+  const cases = {
+    disabled: [false, true],
+    state: [
+      { icon: undefined, slotted: false },
+      { icon: 'arrow-right-small', slotted: true },
+      { icon: 'arrow-right-small', slotted: false },
+    ],
+  };
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    describeEach(cases, ({ disabled, state }) => {
+      beforeEach(async function () {
+        root = await visualRegressionFixture(html`
+          <sbb-expansion-panel-header
+            ?disabled=${disabled}
+            .iconName=${!state.slotted ? state.icon : undefined}
+          >
+            ${state.slotted ? html`<sbb-icon name=${state.icon!}></sbb-icon>` : nothing} Label
+          </sbb-expansion-panel-header>
+        `);
+      });
+
+      for (const state of visualDiffStandardStates) {
+        it(
+          state.name,
+          state.with((setup) => {
+            setup.withSnapshotElement(root);
+          }),
+        );
+      }
+    });
+  });
+});
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..9e30f25288
--- /dev/null
+++ b/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
@@ -0,0 +1,102 @@
+import { html } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualDiffStandardStates,
+  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-button`, () => {
+  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 = {
+    titleLevel: ['1', '4'],
+  };
+
+  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 visualDiffStandardStates) {
+        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.titleLevel) {
+      it(
+        `title-level=${titleLevel} ${visualDiffDefault.name}`,
+        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>
+          `);
+        }),
+      );
+    }
+  });
+});

From 6ff441e1800b188363f12133d3814136274dc348 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Wed, 12 Jun 2024 16:52:25 +0200
Subject: [PATCH 2/9] test(sbb-expansion-panel): fix visual spec

---
 .../expansion-panel-header.visual.spec.ts                     | 2 +-
 .../expansion-panel/expansion-panel.visual.spec.ts            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts
index d3559a6d48..13e6ec49a6 100644
--- a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts
+++ b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts
@@ -10,7 +10,7 @@ import {
 import './expansion-panel-header.js';
 import '../../icon.js';
 
-describe(`sbb-button`, () => {
+describe(`sbb-expansion-panel-header`, () => {
   let root: HTMLElement;
 
   const cases = {
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
index 9e30f25288..5a96e7ccee 100644
--- a/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
+++ b/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
@@ -13,7 +13,7 @@ import '../expansion-panel-header.js';
 import '../expansion-panel-content.js';
 import '../../icon.js';
 
-describe(`sbb-button`, () => {
+describe(`sbb-expansion-panel`, () => {
   let root: HTMLElement;
 
   const cases = {
@@ -85,7 +85,7 @@ describe(`sbb-button`, () => {
     // Title level test
     for (const titleLevel of titleLevelCases.titleLevel) {
       it(
-        `title-level=${titleLevel} ${visualDiffDefault.name}`,
+        `title-level=${titleLevel}`,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(html`
             <sbb-expansion-panel title-level=${titleLevel}>

From db9aeb01dbbe05d63fdf9ec964c8077cd85b8206 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Wed, 12 Jun 2024 17:08:15 +0200
Subject: [PATCH 3/9] test(sbb-expansion-panel): refactor snapshot tests

---
 ...ansion-panel-content.snapshot.spec.snap.js |  22 +++-
 .../expansion-panel-content.snapshot.spec.ts  |  32 ++---
 ...pansion-panel-header.snapshot.spec.snap.js | 104 +++++++++++++----
 .../expansion-panel-header.snapshot.spec.ts   | 109 +++++++++---------
 4 files changed, 166 insertions(+), 101 deletions(-)

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();
+    });
+  });
 });

From 08fd7107c750b78d606eb135cc5aeed48b233381 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Wed, 12 Jun 2024 17:23:15 +0200
Subject: [PATCH 4/9] test(accordion): add visual spec

---
 .../accordion/accordion.visual.spec.ts        | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/elements/accordion/accordion.visual.spec.ts

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);
+        }),
+      );
+    });
+  });
+});

From 1294e614dcd9c6668a117258a09804bbdd6034c2 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Fri, 14 Jun 2024 08:55:24 +0200
Subject: [PATCH 5/9] chore(expansion-panel): remove active visual tests

---
 .../expansion-panel/expansion-panel.visual.spec.ts           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

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
index 5a96e7ccee..b27a5995b6 100644
--- a/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
+++ b/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
@@ -4,7 +4,8 @@ import {
   describeEach,
   describeViewports,
   visualDiffDefault,
-  visualDiffStandardStates,
+  visualDiffFocus,
+  visualDiffHover,
   visualRegressionFixture,
 } from '../../core/testing/private.js';
 
@@ -51,7 +52,7 @@ describe(`sbb-expansion-panel`, () => {
         `);
       });
 
-      for (const state of visualDiffStandardStates) {
+      for (const state of [visualDiffDefault, visualDiffFocus, visualDiffHover]) {
         it(
           state.name,
           state.with((setup) => {

From 905913e65876280719b300235df71df353bbf04f Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Fri, 14 Jun 2024 09:34:02 +0200
Subject: [PATCH 6/9] chore(expansion-panel-header): remove active visual tests

---
 .../expansion-panel-header.visual.spec.ts                    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts
index 13e6ec49a6..9cd48c6d9e 100644
--- a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts
+++ b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts
@@ -3,7 +3,8 @@ import { html, nothing } from 'lit';
 import {
   describeEach,
   describeViewports,
-  visualDiffStandardStates,
+  visualDiffDefault,
+  visualDiffHover,
   visualRegressionFixture,
 } from '../../core/testing/private.js';
 
@@ -35,7 +36,7 @@ describe(`sbb-expansion-panel-header`, () => {
         `);
       });
 
-      for (const state of visualDiffStandardStates) {
+      for (const state of [visualDiffDefault, visualDiffHover]) {
         it(
           state.name,
           state.with((setup) => {

From 2e52848c6672b29d96a8a42f9ab499c07d8fa9ab Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Fri, 14 Jun 2024 12:54:21 +0200
Subject: [PATCH 7/9] test(sbb-expansion-panel): merge header tests

---
 .../expansion-panel-header.visual.spec.ts     | 49 -------------------
 .../expansion-panel.visual.spec.ts            | 31 ++++++++++--
 2 files changed, 26 insertions(+), 54 deletions(-)
 delete mode 100644 src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts

diff --git a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts
deleted file mode 100644
index 9cd48c6d9e..0000000000
--- a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.visual.spec.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { html, nothing } from 'lit';
-
-import {
-  describeEach,
-  describeViewports,
-  visualDiffDefault,
-  visualDiffHover,
-  visualRegressionFixture,
-} from '../../core/testing/private.js';
-
-import './expansion-panel-header.js';
-import '../../icon.js';
-
-describe(`sbb-expansion-panel-header`, () => {
-  let root: HTMLElement;
-
-  const cases = {
-    disabled: [false, true],
-    state: [
-      { icon: undefined, slotted: false },
-      { icon: 'arrow-right-small', slotted: true },
-      { icon: 'arrow-right-small', slotted: false },
-    ],
-  };
-
-  describeViewports({ viewports: ['zero', 'medium'] }, () => {
-    describeEach(cases, ({ disabled, state }) => {
-      beforeEach(async function () {
-        root = await visualRegressionFixture(html`
-          <sbb-expansion-panel-header
-            ?disabled=${disabled}
-            .iconName=${!state.slotted ? state.icon : undefined}
-          >
-            ${state.slotted ? html`<sbb-icon name=${state.icon!}></sbb-icon>` : nothing} Label
-          </sbb-expansion-panel-header>
-        `);
-      });
-
-      for (const state of [visualDiffDefault, visualDiffHover]) {
-        it(
-          state.name,
-          state.with((setup) => {
-            setup.withSnapshotElement(root);
-          }),
-        );
-      }
-    });
-  });
-});
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
index b27a5995b6..38d281ed4a 100644
--- a/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
+++ b/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 
 import {
   describeEach,
@@ -29,9 +29,13 @@ describe(`sbb-expansion-panel`, () => {
     expanded: [false, true],
   };
 
-  const titleLevelCases = {
-    titleLevel: ['1', '4'],
-  };
+  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
@@ -84,7 +88,7 @@ describe(`sbb-expansion-panel`, () => {
     });
 
     // Title level test
-    for (const titleLevel of titleLevelCases.titleLevel) {
+    for (const titleLevel of titleLevelCases) {
       it(
         `title-level=${titleLevel}`,
         visualDiffDefault.with(async (setup) => {
@@ -99,5 +103,22 @@ describe(`sbb-expansion-panel`, () => {
         }),
       );
     }
+
+    // Icon cases
+    for (const state of iconCases) {
+      it(
+        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>
+          `);
+        }),
+      );
+    }
   });
 });

From 407f08d7a1d3253523e87998776307bbe46f3782 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Fri, 14 Jun 2024 14:48:32 +0200
Subject: [PATCH 8/9] test(sbb-expansion-panel): merge header tests

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

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
index 38d281ed4a..7dc9f9b33f 100644
--- a/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
+++ b/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
@@ -58,7 +58,7 @@ describe(`sbb-expansion-panel`, () => {
 
       for (const state of [visualDiffDefault, visualDiffFocus, visualDiffHover]) {
         it(
-          state.name,
+          `icon=${state.name}`,
           state.with((setup) => {
             setup.withSnapshotElement(root);
           }),

From 9a237e56f194291c43a642ac9e75e1002849d093 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Fri, 14 Jun 2024 14:49:06 +0200
Subject: [PATCH 9/9] test(sbb-expansion-panel): merge header tests

---
 .../expansion-panel/expansion-panel.visual.spec.ts            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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
index 7dc9f9b33f..9112a1b98d 100644
--- a/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
+++ b/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts
@@ -58,7 +58,7 @@ describe(`sbb-expansion-panel`, () => {
 
       for (const state of [visualDiffDefault, visualDiffFocus, visualDiffHover]) {
         it(
-          `icon=${state.name}`,
+          state.name,
           state.with((setup) => {
             setup.withSnapshotElement(root);
           }),
@@ -107,7 +107,7 @@ describe(`sbb-expansion-panel`, () => {
     // Icon cases
     for (const state of iconCases) {
       it(
-        state.name,
+        `icon=${state.name}`,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(html`
             <sbb-expansion-panel>