diff --git a/src/elements/stepper/step-label/step-label.visual.spec.ts b/src/elements/stepper/step-label/step-label.visual.spec.ts
new file mode 100644
index 0000000000..59061fa10d
--- /dev/null
+++ b/src/elements/stepper/step-label/step-label.visual.spec.ts
@@ -0,0 +1,32 @@
+import { html, type TemplateResult } from 'lit';
+
+import {
+ describeViewports,
+ visualDiffDefault,
+ visualDiffHover,
+} from '../../core/testing/private.js';
+
+import './step-label.js';
+
+describe(`sbb-step-label`, () => {
+ const template = (disabled?: boolean): TemplateResult =>
+ html`Label`;
+
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ for (const state of [visualDiffDefault, visualDiffHover]) {
+ it(
+ state.name,
+ state.with(async (setup) => {
+ await setup.withFixture(template());
+ }),
+ );
+
+ it(
+ `disabled ${state.name}`,
+ state.with(async (setup) => {
+ await setup.withFixture(template(true));
+ }),
+ );
+ }
+ });
+});
diff --git a/src/elements/stepper/stepper/stepper.visual.spec.ts b/src/elements/stepper/stepper/stepper.visual.spec.ts
new file mode 100644
index 0000000000..9280b977d1
--- /dev/null
+++ b/src/elements/stepper/stepper/stepper.visual.spec.ts
@@ -0,0 +1,92 @@
+import { html, nothing, type TemplateResult } from 'lit';
+
+import {
+ describeEach,
+ describeViewports,
+ visualDiffDefault,
+ visualDiffFocus,
+ visualRegressionFixture,
+} from '../../core/testing/private.js';
+
+import './stepper.js';
+import '../step.js';
+import '../step-label.js';
+
+describe(`sbb-stepper`, () => {
+ let root: HTMLElement;
+
+ const cases = {
+ orientation: ['horizontal', 'vertical'],
+ linear: [false, true],
+ };
+
+ const template = (
+ linear?: boolean,
+ orientation?: string,
+ longLabel?: boolean,
+ horizontalFrom?: string,
+ ): TemplateResult => html`
+
+ Step 1
+
+ Step content 1
+
+ Step 2
+
+ Step content 2
+
+ ${longLabel
+ ? 'Step 3 - Long label lorem ipsum dolor sit amet, consetetur sadipscing elitr'
+ : 'Step 3'}
+
+ Step content 3
+
+ Step 4
+
+ Step content 4
+
+
+ `;
+
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ describeEach(cases, ({ linear, orientation }) => {
+ beforeEach(async function () {
+ root = await visualRegressionFixture(template(linear, orientation));
+ });
+
+ for (const state of [visualDiffDefault, visualDiffFocus]) {
+ it(
+ state.name,
+ state.with((setup) => {
+ setup.withSnapshotElement(root);
+ }),
+ );
+ }
+ });
+
+ it(
+ `horizontal-from=medium`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template(false, 'vertical', false, 'medium'));
+ }),
+ );
+ });
+
+ describeViewports({ viewports: ['medium'] }, () => {
+ for (const orientation of cases.orientation) {
+ it(
+ `orientation=${orientation}_long labels`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template(false, orientation, true));
+ }),
+ );
+ }
+ });
+});