From fb96f5298cfff797d8e46b113fb6b406f0d80065 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Tue, 3 Sep 2024 13:53:07 +0200
Subject: [PATCH] build: remove chromatic artifacts

---
 .gitignore                                    |   1 -
 .storybook/preview-head.html                  |  17 +-
 .storybook/preview.ts                         |  53 +++---
 docs/CODING_STANDARDS.md                      |   3 +-
 docs/REVIEW.md                                |   4 +-
 eslint.config.js                              |   1 -
 package.json                                  |   3 -
 scripts/chromatic-stories-generator.ts        | 156 ------------------
 .../journey-summary.stories.ts                |   3 +-
 .../pearl-chain-time.stories.ts               |   3 +-
 .../pearl-chain-vertical.stories.ts           |   3 +-
 .../pearl-chain/pearl-chain.stories.ts        |   3 +-
 .../timetable-row/timetable-row.stories.ts    |   3 +-
 src/elements-experimental/tsconfig.json       |   3 +-
 .../autocomplete-grid-button.stories.ts       |  48 +-----
 .../autocomplete-grid-option.stories.ts       |  17 --
 .../autocomplete-grid.stories.ts              |  41 -----
 .../autocomplete/autocomplete.stories.ts      |  46 +-----
 .../button/button-link/button-link.stories.ts |   7 -
 .../button-static/button-static.stories.ts    |   7 -
 src/elements/button/button/button.stories.ts  |   7 -
 src/elements/button/common/common-stories.ts  |  19 +--
 .../secondary-button-link.stories.ts          |   7 -
 .../secondary-button-static.stories.ts        |   7 -
 .../secondary-button.stories.ts               |   7 -
 .../tertiary-button-link.stories.ts           |   7 -
 .../tertiary-button-static.stories.ts         |   7 -
 .../tertiary-button.stories.ts                |   7 -
 .../transparent-button-link.stories.ts        |   7 -
 .../transparent-button-static.stories.ts      |   7 -
 .../transparent-button.stories.ts             |   7 -
 src/elements/calendar/calendar.stories.ts     |  49 +-----
 .../card/card-button/card-button.stories.ts   |   1 -
 .../card/card-link/card-link.stories.ts       |   1 -
 src/elements/clock/clock.stories.ts           |  10 +-
 .../container/container/container.stories.ts  |  19 ---
 .../sticky-bar/sticky-bar.stories.ts          |  13 +-
 .../datepicker-toggle.stories.ts              |  40 +----
 .../datepicker/datepicker.stories.ts          |  32 +---
 src/elements/dialog/dialog/dialog.stories.ts  |  37 +----
 .../expansion-panel-content.stories.ts        |   1 -
 .../expansion-panel-header.stories.ts         |   1 -
 .../file-selector/file-selector.stories.ts    |  40 +----
 src/elements/footer/footer.stories.ts         |   8 +-
 .../form-field/form-field.stories.ts          |  52 +-----
 src/elements/header/header/header.stories.ts  |  29 +---
 src/elements/image/image.stories.ts           |   1 -
 src/elements/logo/logo.stories.ts             |   3 -
 .../map-container/map-container.stories.ts    |   1 -
 src/elements/menu/menu/menu.scss              |   2 +-
 src/elements/menu/menu/menu.stories.ts        |  34 +---
 .../navigation-section.scss                   |   4 +-
 .../navigation-section.stories.ts             |  31 +---
 .../navigation/navigation/navigation.scss     |   4 +-
 .../navigation/navigation.stories.ts          |  43 +----
 .../notification/notification.stories.ts      |   2 -
 src/elements/option/option/option.stories.ts  |  17 --
 src/elements/overlay/overlay.stories.ts       |  37 +----
 .../popover-trigger.stories.ts                |  32 +---
 .../popover/popover/popover.stories.ts        |  50 +-----
 src/elements/select/select.stories.ts         |  54 +-----
 src/elements/select/select.ts                 |  52 +++---
 .../selection-expansion-panel.stories.ts      |   1 -
 src/elements/signet/signet.stories.ts         |   3 -
 .../skiplink-list/skiplink-list.stories.ts    |  19 +--
 .../teaser-hero/teaser-hero.stories.ts        |   1 -
 .../timetable-occupancy.stories.ts            |   1 -
 src/elements/toast/toast.stories.ts           |  31 +---
 src/elements/tsconfig.json                    |   3 +-
 .../pages/home/home--logged-in.stories.ts     |   1 -
 src/storybook/pages/home/home.common.ts       |   5 +-
 src/storybook/pages/home/home.stories.ts      |   1 -
 src/storybook/styles/list/list.stories.ts     |   1 -
 .../styles/scrollbar/scrollbar.stories.ts     |   1 -
 .../styles/typography/typography.stories.ts   |  24 ---
 src/storybook/testing/chromatic.ts            |  73 --------
 .../testing/wait-for-components-ready.ts      |  13 --
 .../testing/wait-for-stable-position.ts       |  15 --
 .../testing/with-background-decorator.ts      |  42 -----
 yarn.lock                                     |   5 -
 80 files changed, 118 insertions(+), 1333 deletions(-)
 delete mode 100644 scripts/chromatic-stories-generator.ts
 delete mode 100644 src/storybook/testing/chromatic.ts
 delete mode 100644 src/storybook/testing/wait-for-components-ready.ts
 delete mode 100644 src/storybook/testing/wait-for-stable-position.ts
 delete mode 100644 src/storybook/testing/with-background-decorator.ts

diff --git a/.gitignore b/.gitignore
index bce4206f1a..421318fa87 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,7 +9,6 @@
 log.txt
 *.sublime-project
 *.sublime-workspace
-**/*.chromatic.stories.*
 package-lock.json
 
 .idea/
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 19cce4138c..8721ec8e0a 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -54,7 +54,7 @@
 
 <script>
   const windowRef = typeof window !== 'undefined' && window;
-  if (!inIframe() && !isChromatic() && !isDev()) {
+  if (!inIframe() && !isDev()) {
     setTimeout(() => {
       const div = document.createElement('div');
       div.textContent = 'EXAMPLE / BEISPIEL / EXEMPLE / ESEMPIO ';
@@ -101,13 +101,6 @@
     };
   }
 
-  if (isChromatic()) {
-    const sheet = new CSSStyleSheet();
-    sheet.insertRule(`.sb-show-main.sb-main-padded { padding: 0rem; }`);
-
-    document.adoptedStyleSheets.push(sheet);
-  }
-
   function inIframe() {
     try {
       return windowRef.self !== windowRef.top;
@@ -115,13 +108,7 @@
       return true;
     }
   }
-  function isChromatic() {
-    return !!(
-      windowRef &&
-      (windowRef.navigator.userAgent.match(/Chromatic/) ||
-        windowRef.location.href.match(/chromatic=true/))
-    );
-  }
+
   function isDev() {
     return window.location.hostname === 'localhost';
   }
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 926a317294..02f4696a20 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,13 +1,32 @@
 import * as tokens from '@sbb-esta/lyne-design-tokens';
+import { makeDecorator } from '@storybook/preview-api';
 import type { Parameters, StoryContext } from '@storybook/types';
-import type { Decorator, Preview } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
-import { html } from 'lit';
-
-import { withBackgroundDecorator } from '../src/storybook/testing/with-background-decorator.js';
+import type { Preview } from '@storybook/web-components';
 
 import '../src/elements/core/styles/standard-theme.scss';
 
+const withBackgroundDecorator = makeDecorator({
+  name: 'withContextSpecificBackgroundColor',
+  parameterName: 'backgroundColor',
+  skipIfNoParametersOrOptions: false,
+  wrapper: (getStory, context, { parameters }) => {
+    const backgroundColor = parameters as (context: StoryContext) => string;
+
+    const rootElement = (context.canvasElement as unknown as HTMLElement).closest<HTMLElement>(
+      '.docs-story, .sb-show-main',
+    )!;
+
+    // If no background function is set, remove background color.
+    if (!backgroundColor) {
+      rootElement.style.removeProperty('background-color');
+    } else {
+      rootElement.style.backgroundColor = backgroundColor(context);
+    }
+
+    return getStory(context);
+  },
+});
+
 const getViewportName = (key: string): string =>
   key.replace(/(^SbbBreakpoint|Min$)/g, '').toLowerCase();
 
@@ -16,13 +35,6 @@ const breakpoints = Object.entries(tokens)
   .map(([key, value]) => ({ key: getViewportName(key), value: value as number }))
   .sort((a, b) => a.value - b.value);
 
-/**
- * https://www.chromatic.com/docs/viewports/
- * CHROMATIC RESTRICTIONS:
- * - min allowed value = 320
- * - max allowed value = 1800
- */
-const viewports = breakpoints.map(({ value }) => (value < 320 ? 320 : value > 1800 ? 1800 : value));
 const breakpointNames: Record<string, number> = breakpoints.reduce(
   (current, next) => Object.assign(current, { [next.key]: next.value }),
   {} as Record<string, number>,
@@ -42,12 +54,6 @@ const storybookViewports = breakpoints.reduce(
 );
 
 const parameters: Parameters = {
-  // Set the viewports in Chromatic globally.
-  chromatic: {
-    delay: 2000,
-    viewports,
-    disableSnapshot: true,
-  },
   breakpoints: {
     breakpointNames,
     debounceTimeout: 10,
@@ -71,17 +77,8 @@ const parameters: Parameters = {
   },
 };
 
-const decorators: Decorator[] = [
-  (story, context: StoryContext) =>
-    isChromatic() && context.parameters.layout !== 'fullscreen'
-      ? html`<div style="padding: 2rem;min-height: 100vh">${story()}</div>`
-      : story(),
-  withBackgroundDecorator,
-  (story) => (isChromatic() ? html`<div class="sbb-disable-animation">${story()}</div>` : story()),
-];
-
 const preview: Preview = {
-  decorators,
+  decorators: [withBackgroundDecorator],
   parameters,
   tags: ['autodocs'],
 };
diff --git a/docs/CODING_STANDARDS.md b/docs/CODING_STANDARDS.md
index 617a55f76c..6db87fc474 100644
--- a/docs/CODING_STANDARDS.md
+++ b/docs/CODING_STANDARDS.md
@@ -643,9 +643,10 @@ When it is not super obvious, include a brief description of what a class repres
 
 #### Variants of stories
 
-In order to avoid chromatic detected regressions, it's recommended to create separate stories for all visual variants.
+We recommend to create some visual stories, showing the most important cases.
 It's also recommended to include stories for the most important side cases,
 e.g. for a label that receives ellipsis if it is too long to fit in a container.
+It should be decided case by case.
 
 #### Controls
 
diff --git a/docs/REVIEW.md b/docs/REVIEW.md
index 278c5b2ddc..593aa08963 100644
--- a/docs/REVIEW.md
+++ b/docs/REVIEW.md
@@ -34,7 +34,7 @@ Depending on the circumstances, additional options might be considered.
 
 - ⚠️ Were changes made that affect existing code (e.g. new dependencies, changed global code sections)?
 - ⚠️ Is the build green?
-- ⚠️ Are the chromatic tests green or don't affect existing stories in an undesired way?
+- ⚠️ Are the visual regression tests green or don't affect existing tests in an undesired way?
 
 #### Architecture
 
@@ -74,7 +74,7 @@ Depending on the circumstances, additional options might be considered.
 - Is there a story for each visual representation?
 - Are the story templates reused and divided into small vars if necessary?
 - Are the controls working and as consistent as possible through all stories?
-- Are the stories working on chromatic and give a value?
+- Are the test working on visual regression execution and give a value?
 - Are all texts written in English language?
 
 #### Styles
diff --git a/eslint.config.js b/eslint.config.js
index 2414d5755b..26c1c4ef93 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -30,7 +30,6 @@ export default [
   },
   {
     ignores: [
-      '**/*.chromatic.stories.*',
       'dist/**/*',
       'coverage/**/*',
       'tools/generate-component/**/*',
diff --git a/package.json b/package.json
index 6dc2417aab..04daf1ca4a 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,6 @@
     "docs:to-md": "yarn -s ts-hooks tools/docs/docs_generate.ts",
     "format": "prettier \"**/*\" --write --ignore-unknown",
     "generate": "yarn -s ts-hooks tools/generate-component/index.ts",
-    "generate:chromatic-stories": "yarn -s ts-hooks scripts/chromatic-stories-generator.ts",
-    "remove:chromatic-stories": "find . -name '*.chromatic.stories.ts' -delete",
     "integrity": "npm-run-all format docs",
     "lint": "npm-run-all --sequential lint:*",
     "lint:ts": "eslint \"**/*.ts\"",
@@ -110,7 +108,6 @@
     "@web/test-runner-playwright": "0.11.0",
     "@web/test-runner-puppeteer": "0.16.0",
     "@web/test-runner-visual-regression": "0.9.0",
-    "chromatic": "11.7.1",
     "custom-elements-manifest": "2.1.0",
     "date-fns": "3.6.0",
     "esbuild": "0.23.1",
diff --git a/scripts/chromatic-stories-generator.ts b/scripts/chromatic-stories-generator.ts
deleted file mode 100644
index f2b15b9840..0000000000
--- a/scripts/chromatic-stories-generator.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-/* eslint-disable import-x/default, import-x/no-named-as-default-member */
-import { readdirSync, readFileSync, writeFileSync } from 'fs';
-import { basename, dirname, join, relative } from 'path';
-import { fileURLToPath } from 'url';
-
-import ts from 'typescript';
-
-const chromaticFile = join(
-  dirname(fileURLToPath(import.meta.url)),
-  '../src/storybook/testing/chromatic.ts',
-);
-
-function walk(root: string, filter: RegExp): string[] {
-  return readdirSync(root, { withFileTypes: true }).reduce((current, next) => {
-    const path = join(root, next.name);
-    if (next.isDirectory()) {
-      return current.concat(walk(path, filter));
-    } else if (next.isFile() && path.match(filter)) {
-      return current.concat(path);
-    } else {
-      return current;
-    }
-  }, [] as string[]);
-}
-
-function extractParameters(sourceFile: ts.SourceFile): {
-  parameters: Record<string, any> | undefined;
-  title: string;
-} {
-  return (
-    ts.forEachChild(sourceFile, (node) => {
-      if (
-        ts.isVariableStatement(node) &&
-        ts.isVariableDeclarationList(node.declarationList) &&
-        node.declarationList.declarations.some((d) => d.name.getText() === 'meta')
-      ) {
-        const meta = node.declarationList.declarations.find((d) => d.name.getText() === 'meta')!;
-        const parameters = (meta.initializer as ts.ObjectLiteralExpression).properties.find(
-          (p): p is ts.PropertyAssignment => p.name?.getText() === 'parameters',
-        )!;
-
-        const title = (meta.initializer as ts.ObjectLiteralExpression).properties.find(
-          (p): p is ts.PropertyAssignment => p.name?.getText() === 'title',
-        )!;
-
-        return {
-          parameters: Function(
-            `return ${parameters.initializer
-              .getText()
-              .replace(': StoryContext', '')
-              .replace(/\w*\.events\.\w*/gm, '"dummy"')}`,
-          )() as Record<string, any>,
-          title: title.initializer.getText().replaceAll("'", ''),
-        };
-      }
-    }) ?? { parameters: undefined, title: '' }
-  );
-}
-
-async function generateChromaticStory(
-  storyFile: string,
-): Promise<'no params found' | 'disabledSnapshot configured' | undefined> {
-  const content = readFileSync(storyFile, 'utf8');
-  const sourceFile = ts.createSourceFile(storyFile, content, ts.ScriptTarget.ES2020, true);
-  const { parameters, title } = extractParameters(sourceFile);
-  if (!parameters) {
-    return 'no params found';
-  }
-
-  const { disableSnapshot, fixedHeight, ...chromaticParameters } = parameters?.chromatic ?? {};
-  if (!parameters) {
-    return 'no params found';
-  } else if (disableSnapshot !== undefined) {
-    return 'disabledSnapshot configured';
-  }
-
-  const targetStoryFile = storyFile.replace(/(\.stories\.[^.]+)$/, (_m, m) => `.chromatic${m}`);
-  const relativeImport = basename(storyFile).replace(/\.ts$/, '');
-  const chromaticImport = relative(dirname(targetStoryFile), chromaticFile).replace(/\.ts$/, '');
-
-  /**
-   * The `fixedHeight` param forces the height of the snapshot on chromatic.
-   * It might be useful in cases where some content is cut off at the end of a snapshot
-   * The max fixedHeight we can use is 17'000 (17k * 1440 =~ 25kk)
-   * Now, the max snapshot size is 25'000'000px.
-   *
-   * Example:
-   * ```
-   *  ...
-   *  parameters: {
-   *    chromatic: { fixedHeight: '17000px', ... },
-   *    ...
-   *  }
-   * ```
-   */
-  const fixedHeightStyle = fixedHeight ? `style="min-height: ${fixedHeight}"` : '';
-
-  const chromaticConfig = Object.entries(chromaticParameters)
-    .map(([key, value]) => `${key}: ${JSON.stringify(value)}, `)
-    .join('');
-  const storyFileContent = `import type { Meta, StoryObj } from '@storybook/web-components';
-import config, * as stories from './${relativeImport}';
-import { combineStories } from '${chromaticImport}';
-import { html } from 'lit';
-
-const meta: Meta = {
-  decorators: [
-    (story) => html\`<div ${fixedHeightStyle}>\${story()}</div>\`,
-  ],
-  parameters: {
-    ${parameters.backgroundColor ? `backgroundColor: ${parameters.backgroundColor.toString()}, ` : ''}
-    ${parameters.layout ? `originalLayout: '${parameters.layout}', ` : ''}
-    backgrounds: {
-      disable: true,
-    },
-    chromatic: { ${chromaticConfig}disableSnapshot: false },
-    layout: 'fullscreen',
-  },
-  title: 'chromatic-only/${title}',
-};
-
-export default meta;
-
-export const chromaticStories: StoryObj = {
-  render: combineStories(config, stories)
-};
-`;
-  writeFileSync(targetStoryFile, storyFileContent, 'utf-8');
-  return undefined;
-}
-
-async function generateChromaticStories(): Promise<void> {
-  console.log(`Generating chromatic story files:`);
-  for (const storyFile of walk(
-    join(dirname(fileURLToPath(import.meta.url)), '../src'),
-    /[.]stories.ts$/,
-  )) {
-    if (storyFile.includes('chromatic')) {
-      continue;
-    }
-
-    try {
-      const result = await generateChromaticStory(storyFile);
-      if (!result) {
-        console.log(`- ${basename(storyFile)}`);
-      } else {
-        console.log(`- ${basename(storyFile)} (Skipped due to ${result})`);
-      }
-    } catch (e) {
-      console.log(`Failed ${storyFile}`);
-      console.log(e);
-    }
-  }
-}
-
-(async () => await generateChromaticStories())();
diff --git a/src/elements-experimental/journey-summary/journey-summary.stories.ts b/src/elements-experimental/journey-summary/journey-summary.stories.ts
index b298ff3087..2f393c715f 100644
--- a/src/elements-experimental/journey-summary/journey-summary.stories.ts
+++ b/src/elements-experimental/journey-summary/journey-summary.stories.ts
@@ -1,6 +1,5 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import { nothing, type TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -75,7 +74,7 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  'disable-animation': isChromatic(),
+  'disable-animation': false,
   'round-trip': false,
   'header-level': headerLevel.options![2],
   now: new Date('2022-12-05T12:11:00').valueOf(),
diff --git a/src/elements-experimental/pearl-chain-time/pearl-chain-time.stories.ts b/src/elements-experimental/pearl-chain-time/pearl-chain-time.stories.ts
index 81a988ef54..fd6244ee5b 100644
--- a/src/elements-experimental/pearl-chain-time/pearl-chain-time.stories.ts
+++ b/src/elements-experimental/pearl-chain-time/pearl-chain-time.stories.ts
@@ -1,6 +1,5 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import { nothing, type TemplateResult } from 'lit';
 import { html } from 'lit';
 
@@ -59,7 +58,7 @@ const defaultArgs: Args = {
   legs: [progressLeg],
   'arrival-time': '2022-12-11T14:11:00',
   'departure-time': '2022-12-11T12:11:00',
-  'disable-animation': isChromatic(),
+  'disable-animation': false,
   now: new Date('2022-12-01T12:11:00').valueOf(),
 };
 
diff --git a/src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.stories.ts b/src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.stories.ts
index a67a8edc8b..8a5096fea1 100644
--- a/src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.stories.ts
+++ b/src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.stories.ts
@@ -1,6 +1,5 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
@@ -69,7 +68,7 @@ const defaultArgs: Args = {
   hideLine: false,
   bulletSize: bulletSize.options![0],
   position: 0,
-  disableAnimation: isChromatic(),
+  disableAnimation: false,
 };
 
 const Template = ({ disableAnimation, ...args }: Args): TemplateResult => {
diff --git a/src/elements-experimental/pearl-chain/pearl-chain.stories.ts b/src/elements-experimental/pearl-chain/pearl-chain.stories.ts
index c8c2a34a6f..cf1c8e88a2 100644
--- a/src/elements-experimental/pearl-chain/pearl-chain.stories.ts
+++ b/src/elements-experimental/pearl-chain/pearl-chain.stories.ts
@@ -1,6 +1,5 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import { nothing, type TemplateResult } from 'lit';
 import { html } from 'lit';
 
@@ -36,7 +35,7 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  'disable-animation': isChromatic(),
+  'disable-animation': false,
   now: new Date('2022-12-01T12:11:00').valueOf(),
 };
 
diff --git a/src/elements-experimental/timetable-row/timetable-row.stories.ts b/src/elements-experimental/timetable-row/timetable-row.stories.ts
index 46561975f8..8c3649516d 100644
--- a/src/elements-experimental/timetable-row/timetable-row.stories.ts
+++ b/src/elements-experimental/timetable-row/timetable-row.stories.ts
@@ -1,7 +1,6 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import { nothing, type TemplateResult } from 'lit';
 import { html } from 'lit';
 
@@ -100,7 +99,7 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   'card-action-label': '',
-  'disable-animation': isChromatic(),
+  'disable-animation': false,
   'loading-trip': false,
   'loading-price': false,
   'accessibility-expanded': false,
diff --git a/src/elements-experimental/tsconfig.json b/src/elements-experimental/tsconfig.json
index a984026acb..77040243b9 100644
--- a/src/elements-experimental/tsconfig.json
+++ b/src/elements-experimental/tsconfig.json
@@ -8,6 +8,5 @@
       "@sbb-esta/lyne-elements-experimental/*": ["./*"]
     }
   },
-  "include": ["./**/*.ts", "../vite-env.d.ts"],
-  "exclude": ["./**/*.chromatic.stories.ts"]
+  "include": ["./**/*.ts", "../vite-env.d.ts"]
 }
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
index 2c590b62f9..e70688c15a 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
@@ -47,25 +47,11 @@ const ariaLabel: InputType = {
   },
 };
 
-const active: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
-const focusVisible: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const defaultArgTypes: ArgTypes = {
   disabled,
   negative,
   'icon-name': iconName,
   'aria-label': ariaLabel,
-  active,
-  focusVisible,
 };
 
 const defaultArgs: Args = {
@@ -73,18 +59,12 @@ const defaultArgs: Args = {
   negative: false,
   'icon-name': 'arrow-right-small',
   'aria-label': 'arrow-right-small',
-  active: false,
-  focusVisible: false,
 };
 
-const Template = ({ active, focusVisible, ...args }: Args): TemplateResult => html`
+const Template = (args: Args): TemplateResult => html`
   <sbb-autocomplete-grid-row ?data-negative=${args.negative}>
     <sbb-autocomplete-grid-cell>
-      <sbb-autocomplete-grid-button
-        ${sbbSpread(args)}
-        ?data-active=${active}
-        ?data-focus-visible=${focusVisible}
-      ></sbb-autocomplete-grid-button>
+      <sbb-autocomplete-grid-button ${sbbSpread(args)}></sbb-autocomplete-grid-button>
     </sbb-autocomplete-grid-cell>
   </sbb-autocomplete-grid-row>
 `;
@@ -107,36 +87,12 @@ export const Disabled: StoryObj = {
   args: { ...defaultArgs, disabled: true },
 };
 
-export const Active: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, active: true },
-};
-
-export const FocusVisible: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, focusVisible: true },
-};
-
 export const NegativeDisabled: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, negative: true, disabled: true },
 };
 
-export const NegativeActive: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, negative: true, active: true },
-};
-
-export const NegativeFocusVisible: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, negative: true, focusVisible: true },
-};
-
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
index a996f67a3a..3ab539ff0c 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
@@ -46,12 +46,6 @@ const value: InputType = {
   },
 };
 
-const active: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const disabled: InputType = {
   control: {
     type: 'boolean',
@@ -67,7 +61,6 @@ const numberOfOptions: InputType = {
 const defaultArgTypes: ArgTypes = {
   value,
   'icon-name': iconName,
-  active,
   disabled,
   numberOfOptions,
   preserveIconSpace,
@@ -76,7 +69,6 @@ const defaultArgTypes: ArgTypes = {
 const defaultArgs: Args = {
   value: 'Value',
   'icon-name': undefined,
-  active: false,
   disabled: false,
   numberOfOptions: 5,
   preserveIconSpace: false,
@@ -84,7 +76,6 @@ const defaultArgs: Args = {
 
 const createOptions = ({
   value,
-  active,
   disabled,
   numberOfOptions,
   preserveIconSpace,
@@ -99,7 +90,6 @@ const createOptions = ({
         <sbb-autocomplete-grid-row>
           <sbb-autocomplete-grid-option
             style=${styleMap(style)}
-            ?active=${active && i === 0}
             ?disabled=${disabled && i === 0}
             value=${`${value} ${i + 1}`}
             ${sbbSpread(args)}
@@ -153,13 +143,6 @@ export const WithDisabledState: StoryObj = {
   decorators: [borderDecorator],
 };
 
-export const WithActiveState: StoryObj = {
-  render: StandaloneTemplate,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, active: true },
-  decorators: [borderDecorator],
-};
-
 export const WithIconSpace: StoryObj = {
   render: StandaloneTemplate,
   argTypes: defaultArgTypes,
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index 7064a97096..ce07cd1bd4 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -1,5 +1,4 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
   Args,
@@ -9,13 +8,10 @@ import type {
   StoryContext,
   StoryObj,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import { html, nothing, type TemplateResult } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
 import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button.js';
 import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
 
@@ -83,19 +79,6 @@ const scrollDecorator: Decorator = (story) => html`
   </div>
 `;
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('form-field').shadowRoot!.querySelector('div.sbb-form-field__space-wrapper'),
-  );
-
-  await waitForStablePosition(() => canvas.getByTestId('autocomplete-input'));
-  await userEvent.type(canvas.getByTestId('autocomplete-input'), 'Opt');
-  await new Promise((resolve) => setTimeout(resolve, 2000));
-};
-
 const negative: InputType = {
   control: {
     type: 'boolean',
@@ -390,21 +373,18 @@ export const Basic: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Negative: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, negative: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BasicSizeS: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Disabled: StoryObj = {
@@ -423,49 +403,42 @@ export const NoIcon: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, optionIconName: undefined },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const NoIconNoIconSpace: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, optionIconName: undefined, preserveIconSpace: false },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Borderless: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, borderless: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BorderlessNegative: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, borderless: true, negative: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BorderlessSizeS: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, borderless: true, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const FloatingLabel: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, floatingLabel: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const FloatingLabelSizeS: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, floatingLabel: true, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BasicOpenAbove: StoryObj = {
@@ -473,7 +446,6 @@ export const BasicOpenAbove: StoryObj = {
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
   decorators: [aboveDecorator],
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BorderlessOpenAbove: StoryObj = {
@@ -481,63 +453,54 @@ export const BorderlessOpenAbove: StoryObj = {
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, borderless: true },
   decorators: [aboveDecorator],
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const DisableOption: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, disableOption: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const NegativeDisableOption: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, negative: true, disableOption: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithOptionGroup: StoryObj = {
   render: OptionGroupTemplate,
   argTypes: withGroupsArgTypes,
   args: { ...withGroupsDefaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithOptionGroupSizeS: StoryObj = {
   render: OptionGroupTemplate,
   argTypes: withGroupsArgTypes,
   args: { ...withGroupsDefaultArgs, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithOptionGroupNegative: StoryObj = {
   render: OptionGroupTemplate,
   argTypes: withGroupsArgTypes,
   args: { ...withGroupsDefaultArgs, negative: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithOptionGroupDisabled: StoryObj = {
   render: OptionGroupTemplate,
   argTypes: withGroupsArgTypes,
   args: { ...withGroupsDefaultArgs, disableGroup: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithOptionGroupNegativeDisabled: StoryObj = {
   render: OptionGroupTemplate,
   argTypes: withGroupsArgTypes,
   args: { ...withGroupsDefaultArgs, negative: true, disableGroup: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithOptionGroupNegativeOptionDisabled: StoryObj = {
   render: OptionGroupTemplate,
   argTypes: withGroupsArgTypes,
   args: { ...withGroupsDefaultArgs, negative: true, disableOption: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Scroll: StoryObj = {
@@ -545,15 +508,11 @@ export const Scroll: StoryObj = {
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
   decorators: [scrollDecorator],
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
 };
 
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    chromatic: { disableSnapshot: false },
     actions: {
       handles: [
         SbbAutocompleteGridElement.events.willOpen,
diff --git a/src/elements/autocomplete/autocomplete.stories.ts b/src/elements/autocomplete/autocomplete.stories.ts
index 6132ac6de4..f21e8e0bf0 100644
--- a/src/elements/autocomplete/autocomplete.stories.ts
+++ b/src/elements/autocomplete/autocomplete.stories.ts
@@ -1,21 +1,17 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
-  Meta,
-  StoryObj,
-  ArgTypes,
   Args,
+  ArgTypes,
   Decorator,
+  Meta,
   StoryContext,
+  StoryObj,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready.js';
-import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position.js';
 import type { SbbFormErrorElement } from '../form-error.js';
 import { SbbOptionElement } from '../option.js';
 
@@ -189,19 +185,6 @@ const scrollDecorator: Decorator = (story) => html`
   </div>
 `;
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('form-field').shadowRoot!.querySelector('div.sbb-form-field__space-wrapper'),
-  );
-
-  await waitForStablePosition(() => canvas.getByTestId('autocomplete-input'));
-  await userEvent.type(canvas.getByTestId('autocomplete-input'), 'Opt');
-  await new Promise((resolve) => setTimeout(resolve, 2000));
-};
-
 const createOptionGroup1 = (iconName: string, disableOption: boolean): TemplateResult => {
   return html`
     <sbb-option icon-name=${iconName} value="Option 1"> Option 1 </sbb-option>
@@ -384,21 +367,18 @@ export const Basic: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BasicNegative: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, negative: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BasicSizeS: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BasicOpenAbove: StoryObj = {
@@ -406,70 +386,60 @@ export const BasicOpenAbove: StoryObj = {
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
   decorators: [aboveDecorator],
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Borderless: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, borderless: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BorderlessNegative: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, borderless: true, negative: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BorderlessSizeS: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, borderless: true, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const FloatingLabel: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, floatingLabel: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const FloatingLabelSizeS: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, floatingLabel: true, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithError: StoryObj = {
   render: RequiredTemplate,
   argTypes: withGroupsArgTypes,
   args: { ...withGroupsDefaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithErrorNegative: StoryObj = {
   render: RequiredTemplate,
   argTypes: withGroupsArgTypes,
   args: { ...withGroupsDefaultArgs, negative: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Disabled: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, disabled: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Readonly: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, readonly: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BorderlessOpenAbove: StoryObj = {
@@ -477,14 +447,12 @@ export const BorderlessOpenAbove: StoryObj = {
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, borderless: true },
   decorators: [aboveDecorator],
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const NoIconSpace: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, preserveIconSpace: false },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Scroll: StoryObj = {
@@ -492,43 +460,35 @@ export const Scroll: StoryObj = {
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
   decorators: [scrollDecorator],
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
 };
 
 export const WithOptionGroup: StoryObj = {
   render: OptionGroupTemplate,
   argTypes: withGroupsArgTypes,
   args: { ...withGroupsDefaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const MixedSingleOptionWithOptionGroup: StoryObj = {
   render: MixedTemplate,
   argTypes: withGroupsArgTypes,
   args: { ...withGroupsDefaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const MixedSingleOptionWithOptionGroupNegative: StoryObj = {
   render: MixedTemplate,
   argTypes: withGroupsArgTypes,
   args: { ...withGroupsDefaultArgs, negative: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const MixedSingleOptionWithOptionGroupSizeS: StoryObj = {
   render: MixedTemplate,
   argTypes: withGroupsArgTypes,
   args: { ...withGroupsDefaultArgs, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    chromatic: { disableSnapshot: false },
     actions: {
       handles: [
         SbbAutocompleteElement.events.willOpen,
diff --git a/src/elements/button/button-link/button-link.stories.ts b/src/elements/button/button-link/button-link.stories.ts
index 754236fcf0..8e74103a77 100644
--- a/src/elements/button/button-link/button-link.stories.ts
+++ b/src/elements/button/button-link/button-link.stories.ts
@@ -13,11 +13,8 @@ import {
   loadingIndicator,
   noIcon,
   primary,
-  primaryActive,
   primaryDisabled,
-  primaryFocusVisible,
   primaryNegative,
-  primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
   sizeS,
@@ -48,16 +45,12 @@ export const SizeM: StoryObj = sizeM;
 export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
-export const Active: StoryObj = primaryActive;
-export const NegativeActive: StoryObj = primaryNegativeActive;
-export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,
-  excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
     backgroundColor: (context: StoryContext) =>
diff --git a/src/elements/button/button-static/button-static.stories.ts b/src/elements/button/button-static/button-static.stories.ts
index d73360c1bf..69ed614c6a 100644
--- a/src/elements/button/button-static/button-static.stories.ts
+++ b/src/elements/button/button-static/button-static.stories.ts
@@ -12,11 +12,8 @@ import {
   loadingIndicator,
   noIcon,
   primary,
-  primaryActive,
   primaryDisabled,
-  primaryFocusVisible,
   primaryNegative,
-  primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
   sizeS,
@@ -60,16 +57,12 @@ export const SizeM: StoryObj = sizeM;
 export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
-export const Active: StoryObj = primaryActive;
-export const NegativeActive: StoryObj = primaryNegativeActive;
-export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,
-  excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
     backgroundColor: (context: StoryContext) =>
diff --git a/src/elements/button/button/button.stories.ts b/src/elements/button/button/button.stories.ts
index f22e54ea0c..979d1ce631 100644
--- a/src/elements/button/button/button.stories.ts
+++ b/src/elements/button/button/button.stories.ts
@@ -14,11 +14,8 @@ import {
   loadingIndicator,
   noIcon,
   primary,
-  primaryActive,
   primaryDisabled,
-  primaryFocusVisible,
   primaryNegative,
-  primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
   sizeS,
@@ -49,9 +46,6 @@ export const SizeM: StoryObj = sizeM;
 export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
-export const Active: StoryObj = primaryActive;
-export const NegativeActive: StoryObj = primaryNegativeActive;
-export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const RequestSubmit: StoryObj = requestSubmit;
 export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
@@ -59,7 +53,6 @@ export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,
-  excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
     backgroundColor: (context: StoryContext) =>
diff --git a/src/elements/button/common/common-stories.ts b/src/elements/button/common/common-stories.ts
index 277d997b29..82179405e4 100644
--- a/src/elements/button/common/common-stories.ts
+++ b/src/elements/button/common/common-stories.ts
@@ -17,8 +17,8 @@ import '../../icon.js';
 import '../../loading-indicator.js';
 
 /* eslint-disable lit/binding-positions, @typescript-eslint/naming-convention */
-const Template = ({ tag, text, active, focusVisible, ...args }: Args): TemplateResult => html`
-  <${unsafeStatic(tag)} ${sbbSpread(args)} ?data-active=${active} ?data-focus-visible=${focusVisible}>
+const Template = ({ tag, text, ...args }: Args): TemplateResult => html`
+  <${unsafeStatic(tag)} ${sbbSpread(args)}>
     ${text}
   </${unsafeStatic(tag)}>
 `;
@@ -194,21 +194,6 @@ export const withSlottedIcon: StoryObj = {
   },
 };
 
-export const primaryActive: StoryObj = {
-  render: Template,
-  args: { active: true },
-};
-
-export const primaryNegativeActive: StoryObj = {
-  render: Template,
-  args: { negative: true, active: true },
-};
-
-export const primaryFocusVisible: StoryObj = {
-  render: Template,
-  args: { focusVisible: true },
-};
-
 export const loadingIndicator: StoryObj = {
   render: LoadingIndicatorTemplate,
   args: { disabled: true },
diff --git a/src/elements/button/secondary-button-link/secondary-button-link.stories.ts b/src/elements/button/secondary-button-link/secondary-button-link.stories.ts
index bf9929d2ff..77fa207d88 100644
--- a/src/elements/button/secondary-button-link/secondary-button-link.stories.ts
+++ b/src/elements/button/secondary-button-link/secondary-button-link.stories.ts
@@ -13,11 +13,8 @@ import {
   loadingIndicator,
   noIcon,
   primary,
-  primaryActive,
   primaryDisabled,
-  primaryFocusVisible,
   primaryNegative,
-  primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
   sizeS,
@@ -48,16 +45,12 @@ export const SizeM: StoryObj = sizeM;
 export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
-export const Active: StoryObj = primaryActive;
-export const NegativeActive: StoryObj = primaryNegativeActive;
-export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,
-  excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
     backgroundColor: (context: StoryContext) =>
diff --git a/src/elements/button/secondary-button-static/secondary-button-static.stories.ts b/src/elements/button/secondary-button-static/secondary-button-static.stories.ts
index 8475213fad..81b09d60e6 100644
--- a/src/elements/button/secondary-button-static/secondary-button-static.stories.ts
+++ b/src/elements/button/secondary-button-static/secondary-button-static.stories.ts
@@ -12,11 +12,8 @@ import {
   loadingIndicator,
   noIcon,
   primary,
-  primaryActive,
   primaryDisabled,
-  primaryFocusVisible,
   primaryNegative,
-  primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
   sizeS,
@@ -60,16 +57,12 @@ export const SizeM: StoryObj = sizeM;
 export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
-export const Active: StoryObj = primaryActive;
-export const NegativeActive: StoryObj = primaryNegativeActive;
-export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,
-  excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
     backgroundColor: (context: StoryContext) =>
diff --git a/src/elements/button/secondary-button/secondary-button.stories.ts b/src/elements/button/secondary-button/secondary-button.stories.ts
index a60725785b..317f486a73 100644
--- a/src/elements/button/secondary-button/secondary-button.stories.ts
+++ b/src/elements/button/secondary-button/secondary-button.stories.ts
@@ -14,11 +14,8 @@ import {
   loadingIndicator,
   noIcon,
   primary,
-  primaryActive,
   primaryDisabled,
-  primaryFocusVisible,
   primaryNegative,
-  primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
   sizeS,
@@ -49,9 +46,6 @@ export const SizeM: StoryObj = sizeM;
 export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
-export const Active: StoryObj = primaryActive;
-export const NegativeActive: StoryObj = primaryNegativeActive;
-export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const RequestSubmit: StoryObj = requestSubmit;
 
@@ -60,7 +54,6 @@ export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,
-  excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
     backgroundColor: (context: StoryContext) =>
diff --git a/src/elements/button/tertiary-button-link/tertiary-button-link.stories.ts b/src/elements/button/tertiary-button-link/tertiary-button-link.stories.ts
index b047cf2520..afe32da691 100644
--- a/src/elements/button/tertiary-button-link/tertiary-button-link.stories.ts
+++ b/src/elements/button/tertiary-button-link/tertiary-button-link.stories.ts
@@ -13,11 +13,8 @@ import {
   loadingIndicator,
   noIcon,
   primary,
-  primaryActive,
   primaryDisabled,
-  primaryFocusVisible,
   primaryNegative,
-  primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
   sizeS,
@@ -48,16 +45,12 @@ export const SizeM: StoryObj = sizeM;
 export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
-export const Active: StoryObj = primaryActive;
-export const NegativeActive: StoryObj = primaryNegativeActive;
-export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,
-  excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
     backgroundColor: (context: StoryContext) =>
diff --git a/src/elements/button/tertiary-button-static/tertiary-button-static.stories.ts b/src/elements/button/tertiary-button-static/tertiary-button-static.stories.ts
index deb69bb542..d616ddb3a8 100644
--- a/src/elements/button/tertiary-button-static/tertiary-button-static.stories.ts
+++ b/src/elements/button/tertiary-button-static/tertiary-button-static.stories.ts
@@ -12,11 +12,8 @@ import {
   loadingIndicator,
   noIcon,
   primary,
-  primaryActive,
   primaryDisabled,
-  primaryFocusVisible,
   primaryNegative,
-  primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
   sizeS,
@@ -60,16 +57,12 @@ export const SizeM: StoryObj = sizeM;
 export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
-export const Active: StoryObj = primaryActive;
-export const NegativeActive: StoryObj = primaryNegativeActive;
-export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,
-  excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
     backgroundColor: (context: StoryContext) =>
diff --git a/src/elements/button/tertiary-button/tertiary-button.stories.ts b/src/elements/button/tertiary-button/tertiary-button.stories.ts
index 2501a4ae44..c80b955915 100644
--- a/src/elements/button/tertiary-button/tertiary-button.stories.ts
+++ b/src/elements/button/tertiary-button/tertiary-button.stories.ts
@@ -14,11 +14,8 @@ import {
   loadingIndicator,
   noIcon,
   primary,
-  primaryActive,
   primaryDisabled,
-  primaryFocusVisible,
   primaryNegative,
-  primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
   sizeS,
@@ -49,9 +46,6 @@ export const SizeM: StoryObj = sizeM;
 export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
-export const Active: StoryObj = primaryActive;
-export const NegativeActive: StoryObj = primaryNegativeActive;
-export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const RequestSubmit: StoryObj = requestSubmit;
 export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
@@ -59,7 +53,6 @@ export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,
-  excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
     backgroundColor: (context: StoryContext) =>
diff --git a/src/elements/button/transparent-button-link/transparent-button-link.stories.ts b/src/elements/button/transparent-button-link/transparent-button-link.stories.ts
index 6116f8d2ec..d92050d7c8 100644
--- a/src/elements/button/transparent-button-link/transparent-button-link.stories.ts
+++ b/src/elements/button/transparent-button-link/transparent-button-link.stories.ts
@@ -13,11 +13,8 @@ import {
   loadingIndicator,
   noIcon,
   primary,
-  primaryActive,
   primaryDisabled,
-  primaryFocusVisible,
   primaryNegative,
-  primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
   sizeS,
@@ -48,16 +45,12 @@ export const SizeM: StoryObj = sizeM;
 export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
-export const Active: StoryObj = primaryActive;
-export const NegativeActive: StoryObj = primaryNegativeActive;
-export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,
-  excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
     backgroundColor: (context: StoryContext) =>
diff --git a/src/elements/button/transparent-button-static/transparent-button-static.stories.ts b/src/elements/button/transparent-button-static/transparent-button-static.stories.ts
index 780a8f8728..9507c699a9 100644
--- a/src/elements/button/transparent-button-static/transparent-button-static.stories.ts
+++ b/src/elements/button/transparent-button-static/transparent-button-static.stories.ts
@@ -12,11 +12,8 @@ import {
   loadingIndicator,
   noIcon,
   primary,
-  primaryActive,
   primaryDisabled,
-  primaryFocusVisible,
   primaryNegative,
-  primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
   sizeS,
@@ -60,16 +57,12 @@ export const SizeM: StoryObj = sizeM;
 export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
-export const Active: StoryObj = primaryActive;
-export const NegativeActive: StoryObj = primaryNegativeActive;
-export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,
-  excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
     backgroundColor: (context: StoryContext) =>
diff --git a/src/elements/button/transparent-button/transparent-button.stories.ts b/src/elements/button/transparent-button/transparent-button.stories.ts
index e61a4b0d54..bd440c12c2 100644
--- a/src/elements/button/transparent-button/transparent-button.stories.ts
+++ b/src/elements/button/transparent-button/transparent-button.stories.ts
@@ -14,11 +14,8 @@ import {
   loadingIndicator,
   noIcon,
   primary,
-  primaryActive,
   primaryDisabled,
-  primaryFocusVisible,
   primaryNegative,
-  primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
   sizeS,
@@ -49,9 +46,6 @@ export const SizeM: StoryObj = sizeM;
 export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
-export const Active: StoryObj = primaryActive;
-export const NegativeActive: StoryObj = primaryNegativeActive;
-export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const RequestSubmit: StoryObj = requestSubmit;
 export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
@@ -59,7 +53,6 @@ export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,
-  excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
     backgroundColor: (context: StoryContext) =>
diff --git a/src/elements/calendar/calendar.stories.ts b/src/elements/calendar/calendar.stories.ts
index 266e70c3e7..3228d98dc8 100644
--- a/src/elements/calendar/calendar.stories.ts
+++ b/src/elements/calendar/calendar.stories.ts
@@ -1,10 +1,8 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
 import { defaultDateAdapter } from '../core/datetime.js';
@@ -33,24 +31,6 @@ const Template = ({ min, max, selected, dateFilter, now, ...args }: Args): Templ
   ></sbb-calendar>
 `;
 
-const TemplateDynamicWidth = ({
-  min,
-  max,
-  selected,
-  dateFilter,
-  now,
-  ...args
-}: Args): TemplateResult => html`
-  <sbb-calendar
-    style=${styleMap({ width: '900px' })}
-    .selected=${new Date(selected)}
-    .now=${new Date(now)}
-    .dateFilter=${dateFilter}
-    ${sbbSpread(getCalendarAttr(min, max))}
-    ${sbbSpread(args)}
-  ></sbb-calendar>
-`;
-
 const wide: InputType = {
   control: {
     type: 'boolean',
@@ -143,8 +123,8 @@ today.setDate(today.getDate() >= 15 ? 8 : 18);
 
 const defaultArgs: Args = {
   wide: false,
-  selected: isChromatic() ? new Date(2023, 0, 20) : today,
-  now: isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : undefined,
+  selected: today,
+  now: undefined,
   view: view.options![0],
 };
 
@@ -159,10 +139,8 @@ export const CalendarWithMinAndMax: StoryObj = {
   argTypes: { ...defaultArgTypes },
   args: {
     ...defaultArgs,
-    min: isChromatic() ? new Date(2023, 0, 9) : new Date(today.getFullYear(), today.getMonth(), 5),
-    max: isChromatic()
-      ? new Date(2023, 0, 29)
-      : new Date(today.getFullYear(), today.getMonth(), 29),
+    min: new Date(today.getFullYear(), today.getMonth(), 5),
+    max: new Date(today.getFullYear(), today.getMonth(), 29),
   },
 };
 
@@ -177,24 +155,10 @@ export const CalendarFilterFunction: StoryObj = {
   argTypes: { ...defaultArgTypes, dateFilter },
   args: {
     ...defaultArgs,
-    // Workaround: On Chromatic mapping functions do not work, so we remove it.
-    // TODO: Check if condition can be removed after refactoring Chromatic generation @kyubisation
-    dateFilter: isChromatic() ? filterFunctions[1] : dateFilter.options![2],
+    dateFilter: dateFilter.options![2],
   },
 };
 
-export const CalendarDynamicWidth: StoryObj = {
-  render: TemplateDynamicWidth,
-  argTypes: { ...defaultArgTypes },
-  args: { ...defaultArgs },
-};
-
-export const CalendarWideDynamicWidth: StoryObj = {
-  render: TemplateDynamicWidth,
-  argTypes: { ...defaultArgTypes },
-  args: { ...defaultArgs, wide: true },
-};
-
 export const CalendarWithInitialYearSelection: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
@@ -202,7 +166,6 @@ export const CalendarWithInitialYearSelection: StoryObj = {
 };
 
 const meta: Meta = {
-  excludeStories: /.*DynamicWidth$/,
   decorators: [withActions as Decorator],
   parameters: {
     actions: {
diff --git a/src/elements/card/card-button/card-button.stories.ts b/src/elements/card/card-button/card-button.stories.ts
index 742b2b7ded..86af9e51a6 100644
--- a/src/elements/card/card-button/card-button.stories.ts
+++ b/src/elements/card/card-button/card-button.stories.ts
@@ -18,7 +18,6 @@ export const SbbCardButtonElement: StoryObj = {
 
 const meta: Meta = {
   parameters: {
-    chromatic: { disableSnapshot: true },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/elements/card/card-link/card-link.stories.ts b/src/elements/card/card-link/card-link.stories.ts
index 2cf1597bb2..c855192e44 100644
--- a/src/elements/card/card-link/card-link.stories.ts
+++ b/src/elements/card/card-link/card-link.stories.ts
@@ -17,7 +17,6 @@ export const SbbCardLinkElement: StoryObj = {
 
 const meta: Meta = {
   parameters: {
-    chromatic: { disableSnapshot: true },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/elements/clock/clock.stories.ts b/src/elements/clock/clock.stories.ts
index 8e06a76657..e315905680 100644
--- a/src/elements/clock/clock.stories.ts
+++ b/src/elements/clock/clock.stories.ts
@@ -1,8 +1,6 @@
 import type { InputType } from '@storybook/types';
 import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
-import { nothing, type TemplateResult } from 'lit';
-import { html } from 'lit';
+import { html, nothing, type TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
@@ -33,9 +31,9 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  hours: isChromatic() ? 9 : undefined,
-  minutes: isChromatic() ? 10 : undefined,
-  seconds: isChromatic() ? 30 : undefined,
+  hours: undefined,
+  minutes: undefined,
+  seconds: undefined,
 };
 
 export const Default: StoryObj = {
diff --git a/src/elements/container/container/container.stories.ts b/src/elements/container/container/container.stories.ts
index bff39f329f..c27c5cbba7 100644
--- a/src/elements/container/container/container.stories.ts
+++ b/src/elements/container/container/container.stories.ts
@@ -113,18 +113,6 @@ const BackgroundImageTemplate = ({ 'image-src': imageSrc, ...args }: Args): Temp
   </sbb-container>
 `;
 
-// Only for visual regression
-const NestedContainerTemplate = (): TemplateResult => html`
-  <sbb-container color="white">
-    ${containerContent('Example title')}
-    <div style="background-color: var(--sbb-color-milk);">
-      <sbb-container color="transparent">
-        ${containerContent('And another one', true)}
-      </sbb-container>
-    </div>
-  </sbb-container>
-`;
-
 export const Default: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
@@ -158,12 +146,6 @@ export const Expanded: StoryObj = {
   args: { ...defaultArgs, expanded: true },
 };
 
-export const NestedContainer: StoryObj = {
-  render: NestedContainerTemplate,
-  argTypes: { defaultArgTypes },
-  args: { ...defaultArgs, expanded: true },
-};
-
 export const MilkBackgroundExpanded: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
@@ -171,7 +153,6 @@ export const MilkBackgroundExpanded: StoryObj = {
 };
 
 const meta: Meta = {
-  excludeStories: /^(NestedContainer)$/,
   parameters: {
     docs: {
       extractComponentDescription: () => readme,
diff --git a/src/elements/container/sticky-bar/sticky-bar.stories.ts b/src/elements/container/sticky-bar/sticky-bar.stories.ts
index f7971333a0..717c1a648b 100644
--- a/src/elements/container/sticky-bar/sticky-bar.stories.ts
+++ b/src/elements/container/sticky-bar/sticky-bar.stories.ts
@@ -1,6 +1,5 @@
 import type { InputType } from '@storybook/types';
 import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import { html, nothing, type TemplateResult } from 'lit';
 
 import readme from './readme.md?raw';
@@ -97,12 +96,6 @@ const containerContent = (title: string): TemplateResult => html`
   <sbb-secondary-button style="margin-block-end: 0.75rem;">See more</sbb-secondary-button>
 `;
 
-const containerContentChromatic = (title: string): TemplateResult => html`
-  <sbb-title level="4">${title}</sbb-title>
-  <p class="sbb-text-s">The container component will give its content the correct spacing.</p>
-  <sbb-secondary-button style="margin-block-end: 0.75rem;" size="m">See more</sbb-secondary-button>
-`;
-
 const Template = (): TemplateResult =>
   html` <sbb-sticky-bar>
     <sbb-secondary-button>Example</sbb-secondary-button>
@@ -137,10 +130,7 @@ const ShortTemplate = ({
     ?expanded=${containerExpanded}
     ?background-expanded=${containerBackgroundExpanded}
   >
-    ${isChromatic()
-      ? containerContentChromatic('Example title')
-      : containerContent('Example title')}
-
+    ${containerContent('Example title')}
     <sbb-sticky-bar color=${color !== 'unset' ? color : nothing}> ${actionGroup()} </sbb-sticky-bar>
   </sbb-container>
 `;
@@ -155,7 +145,6 @@ const WithContentAfterTemplate = ({
     color=${containerColor}
     ?expanded=${containerExpanded}
     ?background-expanded=${containerBackgroundExpanded}
-    style=${isChromatic() ? 'max-height: 400px; overflow-y: scroll;' : nothing}
   >
     ${containerContent('Example title')} ${containerContent('Another one')}
     ${containerContent('And another one')} ${containerContent('And a last one')}
diff --git a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.stories.ts b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.stories.ts
index 1aa450437e..1a8733c4cd 100644
--- a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.stories.ts
+++ b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.stories.ts
@@ -1,23 +1,18 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
-  Meta,
-  StoryObj,
-  ArgTypes,
   Args,
+  ArgTypes,
   Decorator,
+  Meta,
   StoryContext,
+  StoryObj,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../../storybook/helpers/spread.js';
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
-import type { SbbPopoverTriggerElement } from '../../popover.js';
 
 import readme from './readme.md?raw';
 
@@ -48,22 +43,6 @@ const defaultArgs: Args = {
   view: view.options![0],
 };
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-  const queryTrigger = (): SbbPopoverTriggerElement =>
-    canvas
-      .getByTestId('toggle')
-      .shadowRoot!.querySelector<SbbPopoverTriggerElement>('sbb-popover-trigger')!;
-
-  await waitForComponentsReady(queryTrigger);
-
-  await waitForStablePosition(queryTrigger);
-
-  const toggle = queryTrigger();
-  userEvent.click(toggle);
-};
-
 const StandaloneTemplate = (args: Args, picker?: string): TemplateResult => html`
   <sbb-datepicker-toggle
     ${sbbSpread(args)}
@@ -75,11 +54,7 @@ const StandaloneTemplate = (args: Args, picker?: string): TemplateResult => html
 const PickerAndButtonTemplate = (args: Args): TemplateResult => html`
   <div style=${styleMap({ display: 'flex', gap: '1em' })}>
     ${StandaloneTemplate(args, 'datepicker')}
-    <sbb-datepicker
-      id="datepicker"
-      input="datepicker-input"
-      now=${isChromatic() ? '2023-01-12T00:00:00Z' : nothing}
-    ></sbb-datepicker>
+    <sbb-datepicker id="datepicker" input="datepicker-input"></sbb-datepicker>
     <input id="datepicker-input" />
   </div>
 `;
@@ -87,7 +62,7 @@ const PickerAndButtonTemplate = (args: Args): TemplateResult => html`
 const FormFieldTemplate = ({ negative, ...args }: Args): TemplateResult => html`
   <sbb-form-field ?negative=${negative}>
     <input />
-    <sbb-datepicker now=${isChromatic() ? '2023-01-12T00:00:00Z' : nothing}></sbb-datepicker>
+    <sbb-datepicker></sbb-datepicker>
     ${StandaloneTemplate(args)}
   </sbb-form-field>
 `;
@@ -96,28 +71,24 @@ export const WithPicker: StoryObj = {
   render: PickerAndButtonTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const InFormField: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const InFormFieldNegative: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, negative: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const InitialYearSelection: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, view: view.options![2] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 const meta: Meta = {
@@ -125,7 +96,6 @@ const meta: Meta = {
   parameters: {
     backgroundColor: (context: StoryContext) =>
       context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-    chromatic: { disableSnapshot: false },
     actions: {
       handles: ['click'],
     },
diff --git a/src/elements/datepicker/datepicker/datepicker.stories.ts b/src/elements/datepicker/datepicker/datepicker.stories.ts
index e94bd2bb57..6fff7cdea6 100644
--- a/src/elements/datepicker/datepicker/datepicker.stories.ts
+++ b/src/elements/datepicker/datepicker/datepicker.stories.ts
@@ -1,23 +1,17 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
   Args,
   ArgTypes,
   Decorator,
   Meta,
-  StoryObj,
   StoryContext,
+  StoryObj,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
-import { nothing, type TemplateResult } from 'lit';
-import { html } from 'lit';
+import { html, nothing, type TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../../storybook/helpers/spread.js';
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
-import type { SbbPopoverTriggerElement } from '../../popover.js';
 
 import { SbbDatepickerElement } from './datepicker.js';
 import readme from './readme.md?raw';
@@ -252,7 +246,7 @@ const basicArgs: Args = {
   wide: false,
   dateFilter: dateFilter.options![0],
   dateHandling: dateHandling.options![0],
-  now: isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : undefined,
+  now: undefined,
   'aria-label': undefined,
 };
 
@@ -278,24 +272,6 @@ const convertMillisecondsToSeconds = (milliseconds: number): number | typeof not
   return milliseconds ? milliseconds / 1000 : nothing;
 };
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('toggle').shadowRoot!.querySelector('sbb-popover-trigger'),
-  );
-
-  await waitForStablePosition(
-    () => canvas.getByTestId('toggle').shadowRoot!.querySelector('sbb-popover-trigger')!,
-  );
-
-  const toggle = (await canvas
-    .getByTestId('toggle')
-    .shadowRoot!.querySelector<SbbPopoverTriggerElement>('sbb-popover-trigger'))!;
-  userEvent.click(toggle);
-};
-
 const changeEventHandler = async (event: Event): Promise<void> => {
   const div = document.createElement('div');
   div.innerText = `valueAsDate is: ${(event.target as SbbDatepickerElement).valueAsDate}.`;
@@ -385,7 +361,6 @@ export const InFormField: StoryObj = {
   render: TemplateFormField,
   argTypes: { ...formFieldBasicArgsTypes },
   args: { ...formFieldBasicArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const InFormFieldDisabled: StoryObj = {
@@ -479,7 +454,6 @@ export const WithoutFormField: StoryObj = {
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    chromatic: { disableSnapshot: false },
     backgroundColor: (context: StoryContext) =>
       context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     actions: {
diff --git a/src/elements/dialog/dialog/dialog.stories.ts b/src/elements/dialog/dialog/dialog.stories.ts
index dce68e6ae1..38fcf9ad18 100644
--- a/src/elements/dialog/dialog/dialog.stories.ts
+++ b/src/elements/dialog/dialog/dialog.stories.ts
@@ -1,22 +1,11 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
-import type {
-  Meta,
-  StoryObj,
-  ArgTypes,
-  Args,
-  Decorator,
-  StoryContext,
-} from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../../storybook/helpers/spread.js';
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
 import { breakpoints } from '../../core/dom/breakpoint.js';
 import sampleImages from '../../core/images.js';
 import type { SbbTitleLevel } from '../../title.js';
@@ -33,20 +22,6 @@ import '../../popover.js';
 import '../dialog-content.js';
 import '../dialog-actions.js';
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('dialog').shadowRoot!.querySelector('.sbb-dialog'),
-  );
-
-  await waitForStablePosition(() => canvas.getByTestId('dialog-trigger'));
-
-  const button = canvas.getByTestId('dialog-trigger');
-  await userEvent.click(button);
-};
-
 const level: InputType = {
   control: {
     type: 'inline-radio',
@@ -282,7 +257,6 @@ const LongContentTemplate = ({
         image-src=${sampleImages[1]}
         alt="Natural landscape"
         data-testid="image"
-        data-chromatic="ignore"
       ></sbb-image>
       He stood still enchanted, while the sweet syllables of the elvish song fell like clear jewels
       of blended word and melody. 'It is a song to Elbereth,'' said Bilbo. 'They will sing that, and
@@ -409,7 +383,6 @@ export const Default: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
   args: basicArgs,
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Negative: StoryObj = {
@@ -419,21 +392,18 @@ export const Negative: StoryObj = {
     ...basicArgs,
     negative: true,
   },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const AllowBackdropClick: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs, 'backdrop-action': backdropAction.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const LongContent: StoryObj = {
   render: LongContentTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const HiddenTitle: StoryObj = {
@@ -446,7 +416,6 @@ export const Form: StoryObj = {
   render: FormTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const NoBackButton: StoryObj = {
@@ -457,27 +426,23 @@ export const NoBackButton: StoryObj = {
     backButton: false,
     accessibilityBackLabel: undefined,
   },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const NoFooter: StoryObj = {
   render: NoFooterTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Nested: StoryObj = {
   render: NestedTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    chromatic: { disableSnapshot: false },
     actions: {
       handles: [
         SbbDialogElement.events.willOpen,
diff --git a/src/elements/expansion-panel/expansion-panel-content/expansion-panel-content.stories.ts b/src/elements/expansion-panel/expansion-panel-content/expansion-panel-content.stories.ts
index 6d36842ac7..a54936f2bf 100644
--- a/src/elements/expansion-panel/expansion-panel-content/expansion-panel-content.stories.ts
+++ b/src/elements/expansion-panel/expansion-panel-content/expansion-panel-content.stories.ts
@@ -19,7 +19,6 @@ export const ExpansionPanelContent: StoryObj = {
 
 const meta: Meta = {
   parameters: {
-    chromatic: { disableSnapshot: true },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.stories.ts b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.stories.ts
index 5a78f208dd..7bf90d9dea 100644
--- a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.stories.ts
+++ b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.stories.ts
@@ -18,7 +18,6 @@ export const ExpansionPanelHeader: StoryObj = {
 
 const meta: Meta = {
   parameters: {
-    chromatic: { disableSnapshot: true },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/elements/file-selector/file-selector.stories.ts b/src/elements/file-selector/file-selector.stories.ts
index 7b8fffe649..53afb6c322 100644
--- a/src/elements/file-selector/file-selector.stories.ts
+++ b/src/elements/file-selector/file-selector.stories.ts
@@ -1,43 +1,16 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
-import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready.js';
 import type { SbbFormErrorElement } from '../form-error.js';
 
 import { SbbFileSelectorElement } from './file-selector.js';
 import readme from './readme.md?raw';
 import '../form-error.js';
 
-function addFilesToComponentInput(elem: SbbFileSelectorElement, numberOfFiles: number): void {
-  const dataTransfer: DataTransfer = new DataTransfer();
-  for (let i: number = 0; i < numberOfFiles; i++) {
-    dataTransfer.items.add(
-      new File([`Hello world - ${i}`], `hello${i}.txt`, {
-        type: 'text/plain',
-        lastModified: new Date(i).getMilliseconds(),
-      }),
-    );
-  }
-  const input: HTMLInputElement = elem.shadowRoot!.querySelector<HTMLInputElement>('input')!;
-  input.files = dataTransfer.files;
-  input.dispatchEvent(new Event('change'));
-}
-
-// Story interaction executed after the story renders
-const playStory = async (canvasElement: HTMLElement, filesToAdd: number = 1): Promise<void> => {
-  const canvas = within(canvasElement);
-  await waitForComponentsReady(() => canvas.getByTestId('sbb-file-selector'));
-  const fs = canvas.getByTestId('sbb-file-selector') as SbbFileSelectorElement;
-  addFilesToComponentInput(fs, filesToAdd);
-  await new Promise((resolve) => setTimeout(resolve, 2000));
-};
-
 const variant: InputType = {
   control: {
     type: 'inline-radio',
@@ -150,7 +123,6 @@ export const Default: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? ({ canvasElement }) => playStory(canvasElement) : undefined,
 };
 
 export const DefaultDisabled: StoryObj = {
@@ -163,21 +135,18 @@ export const DefaultMulti: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...multipleDefaultArgs },
-  play: isChromatic() ? ({ canvasElement }) => playStory(canvasElement, 3) : undefined,
 };
 
 export const DefaultMultiPersistent: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...multipleDefaultArgs, 'multiple-mode': multipleMode.options![1] },
-  play: isChromatic() ? ({ canvasElement }) => playStory(canvasElement, 3) : undefined,
 };
 
 export const Dropzone: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, variant: variant.options![1] },
-  play: isChromatic() ? ({ canvasElement }) => playStory(canvasElement) : undefined,
 };
 
 export const DropzoneDisabled: StoryObj = {
@@ -190,7 +159,6 @@ export const DropzoneMulti: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...multipleDefaultArgs, variant: variant.options![1] },
-  play: isChromatic() ? ({ canvasElement }) => playStory(canvasElement, 3) : undefined,
 };
 
 export const DropzoneMultiPersistent: StoryObj = {
@@ -201,21 +169,18 @@ export const DropzoneMultiPersistent: StoryObj = {
     variant: variant.options![1],
     'multiple-mode': multipleMode.options![1],
   },
-  play: isChromatic() ? ({ canvasElement }) => playStory(canvasElement, 3) : undefined,
 };
 
 export const DefaultWithError: StoryObj = {
   render: TemplateWithError,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? ({ canvasElement }) => playStory(canvasElement) : undefined,
 };
 
 export const DropzoneWithError: StoryObj = {
   render: TemplateWithError,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, variant: variant.options![1] },
-  play: isChromatic() ? ({ canvasElement }) => playStory(canvasElement) : undefined,
 };
 
 export const DefaultOnlyPDF: StoryObj = {
@@ -228,14 +193,12 @@ export const DefaultMultiSizeS: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...multipleDefaultArgsSizeS },
-  play: isChromatic() ? ({ canvasElement }) => playStory(canvasElement, 3) : undefined,
 };
 
 export const DropzoneMultiSizeS: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...multipleDefaultArgsSizeS, variant: variant.options![1] },
-  play: isChromatic() ? ({ canvasElement }) => playStory(canvasElement, 3) : undefined,
 };
 
 const meta: Meta = {
@@ -244,7 +207,6 @@ const meta: Meta = {
     actions: {
       handles: [SbbFileSelectorElement.events.fileChangedEvent],
     },
-    chromatic: { disableSnapshot: false },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/elements/footer/footer.stories.ts b/src/elements/footer/footer.stories.ts
index 75f19ae01e..a59bc3da81 100644
--- a/src/elements/footer/footer.stories.ts
+++ b/src/elements/footer/footer.stories.ts
@@ -1,8 +1,6 @@
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
-import { nothing, type TemplateResult } from 'lit';
-import { html } from 'lit';
+import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import { html, type TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
@@ -188,7 +186,7 @@ const TemplateClockColumns = ({ ...args }): TemplateResult => html`
         Subscribe
       </sbb-secondary-button-link>
     </div>
-    <sbb-clock now=${isChromatic() ? '01:59:27' : nothing}></sbb-clock>
+    <sbb-clock></sbb-clock>
     <sbb-divider ?negative=${args.negative}></sbb-divider>
     <sbb-link-list horizontal-from="large" ?negative=${args.negative}>
       <sbb-block-link
diff --git a/src/elements/form-field/form-field/form-field.stories.ts b/src/elements/form-field/form-field/form-field.stories.ts
index c579b2f265..66f6fc422d 100644
--- a/src/elements/form-field/form-field/form-field.stories.ts
+++ b/src/elements/form-field/form-field/form-field.stories.ts
@@ -155,12 +155,7 @@ const TemplateInputWithIcons = (args: Args): TemplateResult =>
       ${PopoverTrigger()}`,
   );
 
-const TemplateInputWithMiniButton = ({
-  disabled,
-  readonly,
-  active,
-  ...args
-}: Args): TemplateResult =>
+const TemplateInputWithMiniButton = ({ disabled, readonly, ...args }: Args): TemplateResult =>
   formField(
     args,
     html`${TemplateBasicInput({ disabled, readonly, ...args })}
@@ -169,16 +164,11 @@ const TemplateInputWithMiniButton = ({
         icon-name="pie-small"
         ?disabled=${disabled || readonly}
         aria-label="Input button"
-        ?data-active=${active}
       ></sbb-mini-button>`,
   );
 
-const TemplateInputWithClearButton = ({ active, ...args }: Args): TemplateResult =>
-  formField(
-    args,
-    html`${TemplateBasicInput(args)}
-      <sbb-form-field-clear ?data-active=${active}></sbb-form-field-clear>`,
-  );
+const TemplateInputWithClearButton = (args: Args): TemplateResult =>
+  formField(args, html`${TemplateBasicInput(args)} <sbb-form-field-clear></sbb-form-field-clear>`);
 
 const TemplateSelect = (args: Args): TemplateResult => formField(args, TemplateBasicSelect(args));
 
@@ -423,15 +413,6 @@ const negative: InputType = {
   },
 };
 
-const active: InputType = {
-  control: {
-    type: 'boolean',
-  },
-  table: {
-    disable: true,
-  },
-};
-
 const basicArgTypes: ArgTypes = {
   'error-space': errorSpace,
   label,
@@ -448,7 +429,6 @@ const basicArgTypes: ArgTypes = {
   value,
   errorText,
   width,
-  active,
 };
 
 const basicArgs: Args = {
@@ -467,7 +447,6 @@ const basicArgs: Args = {
   readonly: false,
   errorText: 'This is a required field.',
   width: width.options![0],
-  active: false,
 };
 
 export const Input: StoryObj = {
@@ -558,12 +537,6 @@ export const InputWithMiniButtonDisabled: StoryObj = {
   args: { ...basicArgs, disabled: true },
 };
 
-export const InputWithMiniButtonActive: StoryObj = {
-  render: TemplateInputWithMiniButton,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, active: true },
-};
-
 export const InputWithClearButton: StoryObj = {
   render: TemplateInputWithClearButton,
   argTypes: basicArgTypes,
@@ -576,12 +549,6 @@ export const InputWithClearButtonDisabled: StoryObj = {
   args: { ...basicArgs, disabled: true },
 };
 
-export const InputWithClearButtonActive: StoryObj = {
-  render: TemplateInputWithClearButton,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, active: true },
-};
-
 export const InputLongLabelAndErrorSpace: StoryObj = {
   render: TemplateInputWithErrorSpace,
   argTypes: basicArgTypes,
@@ -820,12 +787,6 @@ export const InputWithMiniButtonDisabledNegative: StoryObj = {
   args: { ...basicArgs, disabled: true, negative: true },
 };
 
-export const InputWithMiniButtonActiveNegative: StoryObj = {
-  render: TemplateInputWithMiniButton,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, active: true, negative: true },
-};
-
 export const InputWithClearButtonNegative: StoryObj = {
   render: TemplateInputWithClearButton,
   argTypes: basicArgTypes,
@@ -838,12 +799,6 @@ export const InputWithClearButtonDisabledNegative: StoryObj = {
   args: { ...basicArgs, disabled: true, negative: true },
 };
 
-export const InputWithClearButtonActiveNegative: StoryObj = {
-  render: TemplateInputWithClearButton,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, active: true, negative: true },
-};
-
 export const InputLongLabelAndErrorSpaceNegative: StoryObj = {
   render: TemplateInputWithErrorSpace,
   argTypes: basicArgTypes,
@@ -1024,7 +979,6 @@ export const TextareaFloatingWithIconNegative: StoryObj = {
 };
 
 const meta: Meta = {
-  excludeStories: /.*(Active|ActiveNegative)$/,
   parameters: {
     backgroundColor: (context: StoryContext) =>
       context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
diff --git a/src/elements/header/header/header.stories.ts b/src/elements/header/header/header.stories.ts
index f44cd2b4e0..7f660ffafa 100644
--- a/src/elements/header/header/header.stories.ts
+++ b/src/elements/header/header/header.stories.ts
@@ -1,21 +1,10 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
-import type {
-  Meta,
-  StoryObj,
-  ArgTypes,
-  Args,
-  Decorator,
-  StoryContext,
-} from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
 import { sbbSpread } from '../../../storybook/helpers/spread.js';
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
 
 import readme from './readme.md?raw';
 
@@ -101,20 +90,6 @@ const TemplateWithUserMenu = (args: Args): TemplateResult => html`
   )}
 `;
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('user-menu').shadowRoot!.querySelector('.sbb-menu'),
-  );
-
-  await waitForStablePosition(() => canvas.getByTestId('user-menu-trigger'));
-
-  const button = canvas.getByTestId('user-menu-trigger');
-  await userEvent.click(button);
-};
-
 const expanded: InputType = {
   control: {
     type: 'boolean',
@@ -175,7 +150,6 @@ export const WithUserMenu: StoryObj = {
   render: TemplateWithUserMenu,
   argTypes,
   args: basicArgs,
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BasicScrollHide: StoryObj = {
@@ -213,7 +187,6 @@ export const ContainerScrollOriginScrollHide: StoryObj = {
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    chromatic: { disableSnapshot: false },
     actions: {
       handles: ['click'],
     },
diff --git a/src/elements/image/image.stories.ts b/src/elements/image/image.stories.ts
index b12c43dbdb..e051828c80 100644
--- a/src/elements/image/image.stories.ts
+++ b/src/elements/image/image.stories.ts
@@ -208,7 +208,6 @@ const meta: Meta = {
     actions: {
       handles: [SbbImageElement.events.load, SbbImageElement.events.error],
     },
-    chromatic: { diffThreshold: 0.11, delay: 8000 },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/elements/logo/logo.stories.ts b/src/elements/logo/logo.stories.ts
index 51e68296a2..2fd839723e 100644
--- a/src/elements/logo/logo.stories.ts
+++ b/src/elements/logo/logo.stories.ts
@@ -78,9 +78,6 @@ const meta: Meta = {
     docs: {
       extractComponentDescription: () => readme,
     },
-    chromatic: {
-      viewports: [320],
-    },
   },
   title: 'elements/sbb-logo',
 };
diff --git a/src/elements/map-container/map-container.stories.ts b/src/elements/map-container/map-container.stories.ts
index d6de9e3b37..83e901e9d3 100644
--- a/src/elements/map-container/map-container.stories.ts
+++ b/src/elements/map-container/map-container.stories.ts
@@ -93,7 +93,6 @@ const meta: Meta = {
     `,
   ],
   parameters: {
-    chromatic: { disableSnapshot: false },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/elements/menu/menu/menu.scss b/src/elements/menu/menu/menu.scss
index 79f42429f4..b6bed2a035 100644
--- a/src/elements/menu/menu/menu.scss
+++ b/src/elements/menu/menu/menu.scss
@@ -29,7 +29,7 @@
   --sbb-menu-visibility: hidden;
   --sbb-menu-backdrop-color: transparent;
 
-  // Needed for backwards compatibility on Chromatic
+  // Needed for backwards compatibility
   // TODO: Remove once not needed
   @supports (height: 100dvh) {
     --sbb-menu-container-height: 100dvh;
diff --git a/src/elements/menu/menu/menu.stories.ts b/src/elements/menu/menu/menu.stories.ts
index 650fe6e949..d280a6202b 100644
--- a/src/elements/menu/menu/menu.stories.ts
+++ b/src/elements/menu/menu/menu.stories.ts
@@ -1,22 +1,10 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
-import type {
-  Meta,
-  StoryObj,
-  ArgTypes,
-  Args,
-  Decorator,
-  StoryContext,
-} from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
-
 import { SbbMenuElement } from './menu.js';
 import readme from './readme.md?raw';
 
@@ -26,20 +14,6 @@ import '../../link.js';
 import '../menu-button.js';
 import '../menu-link.js';
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('menu').shadowRoot!.querySelector('.sbb-menu'),
-  );
-
-  await waitForStablePosition(() => canvas.getByTestId('menu-trigger'));
-
-  const button = canvas.getByTestId('menu-trigger');
-  await userEvent.click(button);
-};
-
 const iconName: InputType = {
   control: {
     type: 'text',
@@ -203,41 +177,35 @@ export const Default: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, disabled: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const List: StoryObj = {
   render: ListTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, disabled: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const CustomContent: StoryObj = {
   render: CustomContentTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, amount: '2' },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const LongContent: StoryObj = {
   render: LongContentTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, 'icon-name': 'tick-small', amount: undefined },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Ellipsis: StoryObj = {
   render: EllipsisTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    chromatic: { disableSnapshot: false },
     actions: {
       handles: [
         SbbMenuElement.events.willOpen,
diff --git a/src/elements/navigation/navigation-section/navigation-section.scss b/src/elements/navigation/navigation-section/navigation-section.scss
index 4a4a2ce12e..5fed1907b2 100644
--- a/src/elements/navigation/navigation-section/navigation-section.scss
+++ b/src/elements/navigation/navigation-section/navigation-section.scss
@@ -31,13 +31,13 @@
   height: var(--sbb-navigation-section-height);
   z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));
 
-  // Needed for backwards compatibility on Chromatic
+  // Needed for backwards compatibility
   // TODO: Remove once not needed
   @supports (width: 100dvw) {
     --sbb-navigation-section-width: 100dvw;
   }
 
-  // Needed for backwards compatibility on Chromatic
+  // Needed for backwards compatibility
   // TODO: Remove once not needed
   @supports (height: 100dvh) {
     --sbb-navigation-section-height: 100dvh;
diff --git a/src/elements/navigation/navigation-section/navigation-section.stories.ts b/src/elements/navigation/navigation-section/navigation-section.stories.ts
index 9d2fa143bc..2be6a362d6 100644
--- a/src/elements/navigation/navigation-section/navigation-section.stories.ts
+++ b/src/elements/navigation/navigation-section/navigation-section.stories.ts
@@ -1,12 +1,9 @@
-import { userEvent, waitFor, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
 import { sbbSpread } from '../../../storybook/helpers/spread.js';
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
 
 import readme from './readme.md?raw';
 import '../../button.js';
@@ -17,25 +14,6 @@ import '../navigation-marker.js';
 import '../navigation.js';
 import './navigation-section.js';
 
-// Story interaction executed after the story renders
-const playStory = async (trigger: string, canvasElement: HTMLElement): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('navigation').shadowRoot?.querySelector('.sbb-navigation'),
-  );
-
-  const button = canvas.getByTestId('navigation-trigger');
-  await userEvent.click(button);
-  await waitFor(() => canvas.getByTestId('navigation').getAttribute('data-state') === 'opened');
-
-  await waitFor(() =>
-    canvas.getByTestId('navigation-section').shadowRoot?.querySelector('.sbb-navigation-section'),
-  );
-  const action = canvas.getByTestId(trigger);
-  await userEvent.click(action);
-};
-
 const accessibilityLabel: InputType = {
   control: {
     type: 'text',
@@ -118,23 +96,16 @@ export const Default: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: isChromatic()
-    ? ({ canvasElement }) => playStory('navigation-section-trigger-1', canvasElement)
-    : undefined,
 };
 
 export const LongContent: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: isChromatic()
-    ? ({ canvasElement }) => playStory('navigation-section-trigger-2', canvasElement)
-    : undefined,
 };
 
 const meta: Meta = {
   parameters: {
-    chromatic: { disableSnapshot: false },
     docs: {
       // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '600px' },
diff --git a/src/elements/navigation/navigation/navigation.scss b/src/elements/navigation/navigation/navigation.scss
index ceb1e0a11d..8bb070ccd7 100644
--- a/src/elements/navigation/navigation/navigation.scss
+++ b/src/elements/navigation/navigation/navigation.scss
@@ -40,7 +40,7 @@
   z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));
   overflow: hidden;
 
-  // Needed for backwards compatibility on Chromatic
+  // Needed for backwards compatibility
   // TODO: Remove once not needed
   @supports (height: 100dvh) {
     --sbb-navigation-height: 100dvh;
@@ -91,7 +91,7 @@
     --sbb-navigation-expanded-width: 100vw;
     --sbb-navigation-content-transform: translateX(0%);
 
-    // Needed for backwards compatibility on Chromatic
+    // Needed for backwards compatibility
     // TODO: Remove once not needed
     @supports (height: 100dvw) {
       --sbb-navigation-expanded-width: 100dvw;
diff --git a/src/elements/navigation/navigation/navigation.stories.ts b/src/elements/navigation/navigation/navigation.stories.ts
index add3a3ccc9..461a933c1c 100644
--- a/src/elements/navigation/navigation/navigation.stories.ts
+++ b/src/elements/navigation/navigation/navigation.stories.ts
@@ -1,20 +1,10 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, waitFor, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
-import type {
-  Meta,
-  StoryObj,
-  ArgTypes,
-  Args,
-  Decorator,
-  StoryContext,
-} from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 
 import { sbbSpread } from '../../../storybook/helpers/spread.js';
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
 
 import { SbbNavigationElement } from './navigation.js';
 import readme from './readme.md?raw';
@@ -26,33 +16,6 @@ import '../navigation-link.js';
 import '../../button/button.js';
 import '../../button/secondary-button.js';
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('navigation').shadowRoot?.querySelector('.sbb-navigation'),
-  );
-
-  const button = canvas.getByTestId('navigation-trigger');
-  await userEvent.click(button);
-
-  await waitFor(() => canvas.getByTestId('navigation').getAttribute('data-state') === 'opened');
-};
-
-const playStoryWithSection = async ({ canvasElement }: StoryContext): Promise<void> => {
-  await playStory({ canvasElement } as StoryContext);
-  const canvas = within(canvasElement);
-
-  await waitFor(() =>
-    canvas.getByTestId('navigation-section').shadowRoot?.querySelector('.sbb-navigation-section'),
-  );
-
-  await waitFor(
-    () => canvas.getByTestId('navigation-section').getAttribute('data-state') === 'opened',
-  );
-};
-
 const ariaLabel: InputType = {
   control: {
     type: 'text',
@@ -206,27 +169,23 @@ export const Default: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const LongContent: StoryObj = {
   render: LongContentTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithNavigationSection: StoryObj = {
   render: WithNavigationSectionTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: isChromatic() ? playStoryWithSection : undefined,
 };
 
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    chromatic: { disableSnapshot: false },
     actions: {
       handles: [
         SbbNavigationElement.events.willOpen,
diff --git a/src/elements/notification/notification.stories.ts b/src/elements/notification/notification.stories.ts
index c4d188627e..f843fe1b79 100644
--- a/src/elements/notification/notification.stories.ts
+++ b/src/elements/notification/notification.stories.ts
@@ -209,7 +209,6 @@ export const MultipleNotifications: StoryObj = {
   args: { ...basicArgs },
 };
 
-// We set the height of the div in Chromatic to avoid cropped snapshots
 const meta: Meta = {
   decorators: [
     (story, context) =>
@@ -227,7 +226,6 @@ const meta: Meta = {
     withActions as Decorator,
   ],
   parameters: {
-    chromatic: { fixedHeight: '7500px' },
     actions: {
       handles: [
         SbbNotificationElement.events.didOpen,
diff --git a/src/elements/option/option/option.stories.ts b/src/elements/option/option/option.stories.ts
index 4b0231c084..f61a577fbc 100644
--- a/src/elements/option/option/option.stories.ts
+++ b/src/elements/option/option/option.stories.ts
@@ -48,12 +48,6 @@ const value: InputType = {
   },
 };
 
-const active: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const disabled: InputType = {
   control: {
     type: 'boolean',
@@ -69,7 +63,6 @@ const numberOfOptions: InputType = {
 const defaultArgTypes: ArgTypes = {
   value,
   'icon-name': iconName,
-  active,
   disabled,
   numberOfOptions,
   preserveIconSpace,
@@ -78,7 +71,6 @@ const defaultArgTypes: ArgTypes = {
 const defaultArgs: Args = {
   value: 'Value',
   'icon-name': undefined,
-  active: false,
   disabled: false,
   numberOfOptions: 5,
   preserveIconSpace: false,
@@ -86,7 +78,6 @@ const defaultArgs: Args = {
 
 const createOptions = ({
   value,
-  active,
   disabled,
   numberOfOptions,
   preserveIconSpace,
@@ -100,7 +91,6 @@ const createOptions = ({
       return html`
         <sbb-option
           style=${styleMap(style)}
-          ?active=${active && i === 0}
           ?disabled=${disabled && i === 0}
           value=${`${value} ${i + 1}`}
           ${sbbSpread(args)}
@@ -162,13 +152,6 @@ export const WithDisabledState: StoryObj = {
   decorators: [borderDecorator],
 };
 
-export const WithActiveState: StoryObj = {
-  render: StandaloneTemplate,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, active: true },
-  decorators: [borderDecorator],
-};
-
 export const WithIconSpace: StoryObj = {
   render: StandaloneTemplate,
   argTypes: defaultArgTypes,
diff --git a/src/elements/overlay/overlay.stories.ts b/src/elements/overlay/overlay.stories.ts
index 8e129f11a6..f1b816f45a 100644
--- a/src/elements/overlay/overlay.stories.ts
+++ b/src/elements/overlay/overlay.stories.ts
@@ -1,22 +1,11 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
-import type {
-  Meta,
-  StoryObj,
-  ArgTypes,
-  Args,
-  Decorator,
-  StoryContext,
-} from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
-import { styleMap, type StyleInfo } from 'lit/directives/style-map.js';
+import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
-import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready.js';
-import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position.js';
 import sampleImages from '../core/images.js';
 
 import { SbbOverlayElement } from './overlay.js';
@@ -28,20 +17,6 @@ import '../image.js';
 import '../link.js';
 import '../title.js';
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('overlay').shadowRoot!.querySelector('.sbb-overlay'),
-  );
-
-  await waitForStablePosition(() => canvas.getByTestId('overlay-trigger'));
-
-  const button = canvas.getByTestId('overlay-trigger');
-  await userEvent.click(button);
-};
-
 const expanded: InputType = {
   control: {
     type: 'boolean',
@@ -179,7 +154,6 @@ const DefaultTemplate = (args: Args): TemplateResult => html`
         style="margin-block: 1rem"
         image-src=${sampleImages[1]}
         alt="Natural landscape"
-        data-chromatic="ignore"
       ></sbb-image>
       He stood still enchanted, while the sweet syllables of the elvish song fell like clear jewels
       of blended word and melody. 'It is a song to Elbereth,'' said Bilbo. 'They will sing that, and
@@ -260,7 +234,6 @@ export const Default: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Negative: StoryObj = {
@@ -270,7 +243,6 @@ export const Negative: StoryObj = {
     ...basicArgs,
     negative: true,
   },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Expanded: StoryObj = {
@@ -280,7 +252,6 @@ export const Expanded: StoryObj = {
     ...basicArgs,
     expanded: true,
   },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithBackButton: StoryObj = {
@@ -290,27 +261,23 @@ export const WithBackButton: StoryObj = {
     ...basicArgs,
     'back-button': true,
   },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Form: StoryObj = {
   render: FormTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Nested: StoryObj = {
   render: NestedTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    chromatic: { disableSnapshot: false },
     actions: {
       handles: [
         SbbOverlayElement.events.willOpen,
diff --git a/src/elements/popover/popover-trigger/popover-trigger.stories.ts b/src/elements/popover/popover-trigger/popover-trigger.stories.ts
index f03994c35f..471ac5732e 100644
--- a/src/elements/popover/popover-trigger/popover-trigger.stories.ts
+++ b/src/elements/popover/popover-trigger/popover-trigger.stories.ts
@@ -40,21 +40,11 @@ const disabled: InputType = {
   },
 };
 
-const active: InputType = {
-  control: {
-    type: 'boolean',
-  },
-  table: {
-    disable: true,
-  },
-};
-
 const defaultArgTypes: ArgTypes = {
   negative,
   'aria-label': ariaLabel,
   'icon-name': iconName,
   disabled,
-  active,
 };
 
 const defaultArgs: Args = {
@@ -62,7 +52,6 @@ const defaultArgs: Args = {
   'aria-label': 'Click to open the popover',
   'icon-name': 'circle-information-small',
   disabled: false,
-  active: false,
 };
 
 const popover = (): TemplateResult => html`
@@ -84,14 +73,10 @@ const popover = (): TemplateResult => html`
   </sbb-popover>
 `;
 
-const Template = ({ active, ...args }: Args): TemplateResult => html`
+const Template = (args: Args): TemplateResult => html`
   <span class="sbb-text-s" style="display: flex; align-items: center;">
     <span style="margin-inline-end: var(--sbb-spacing-fixed-1x);"> This is a demo text. </span>
-    <sbb-popover-trigger
-      id="popover-trigger"
-      ?data-active=${active}
-      ${sbbSpread(args)}
-    ></sbb-popover-trigger>
+    <sbb-popover-trigger id="popover-trigger" ${sbbSpread(args)}></sbb-popover-trigger>
   </span>
   ${popover()}
 `;
@@ -154,20 +139,7 @@ export const DisabledNegative: StoryObj = {
   args: { ...defaultArgs, disabled: true, negative: true },
 };
 
-export const IconSizeSActive: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, active: true },
-};
-
-export const IconSizeSNegativeActive: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, negative: true, active: true },
-};
-
 const meta: Meta = {
-  excludeStories: /.*Active$/,
   decorators: [
     (story, context) => html`
       <div style=${styleMap({ ...wrapperStyle(context) })}>${story()}</div>
diff --git a/src/elements/popover/popover/popover.stories.ts b/src/elements/popover/popover/popover.stories.ts
index d79f51ac5e..7c59501a55 100644
--- a/src/elements/popover/popover/popover.stories.ts
+++ b/src/elements/popover/popover/popover.stories.ts
@@ -1,21 +1,11 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
-import type {
-  Args,
-  ArgTypes,
-  Decorator,
-  Meta,
-  StoryContext,
-  StoryObj,
-} from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../../storybook/helpers/spread.js';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
 
 import { SbbPopoverElement } from './popover.js';
 import readme from './readme.md?raw';
@@ -23,33 +13,6 @@ import '../../link.js';
 import '../../title.js';
 import '../popover-trigger.js';
 
-async function commonPlayStory(canvasElement: HTMLElement): Promise<Element> {
-  const canvas = within(canvasElement);
-
-  await Promise.all([
-    customElements.whenDefined('sbb-link'),
-    customElements.whenDefined('sbb-popover'),
-    customElements.whenDefined('sbb-popover-trigger'),
-    customElements.whenDefined('sbb-title'),
-  ]);
-
-  await waitForStablePosition(() => canvas.getByTestId('popover-trigger'));
-
-  return canvas.getByTestId('popover-trigger');
-}
-
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const button = await commonPlayStory(canvasElement);
-  await userEvent.click(button);
-};
-
-// Hover story interaction executed after the story renders
-const playStoryHover = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const button = await commonPlayStory(canvasElement);
-  await userEvent.hover(button);
-};
-
 const hoverTrigger: InputType = {
   control: {
     type: 'boolean',
@@ -180,49 +143,42 @@ export const StartBelow: StoryObj = {
   render: StartBelowTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const CenterBelow: StoryObj = {
   render: CenterBelowTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const EndBelow: StoryObj = {
   render: EndBelowTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const StartAbove: StoryObj = {
   render: StartAboveTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const CenterAbove: StoryObj = {
   render: CenterAboveTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const EndAbove: StoryObj = {
   render: EndAboveTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const LongContent: StoryObj = {
   render: LongContentTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const HoverTrigger: StoryObj = {
@@ -234,7 +190,6 @@ export const HoverTrigger: StoryObj = {
     'open-delay': 0,
     'close-delay': 0,
   },
-  play: isChromatic() ? playStoryHover : undefined,
 };
 
 export const WithoutCloseButton: StoryObj = {
@@ -244,7 +199,6 @@ export const WithoutCloseButton: StoryObj = {
     ...defaultArgs,
     'hide-close-button': true,
   },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithoutCloseButtonHover: StoryObj = {
@@ -255,13 +209,11 @@ export const WithoutCloseButtonHover: StoryObj = {
     'hide-close-button': true,
     'hover-trigger': true,
   },
-  play: isChromatic() ? playStoryHover : undefined,
 };
 
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    chromatic: { disableSnapshot: false },
     actions: {
       handles: [
         SbbPopoverElement.events.willOpen,
diff --git a/src/elements/select/select.stories.ts b/src/elements/select/select.stories.ts
index 1843f7bcc8..0f7920f495 100644
--- a/src/elements/select/select.stories.ts
+++ b/src/elements/select/select.stories.ts
@@ -1,23 +1,19 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
-  Meta,
-  StoryObj,
-  ArgTypes,
   Args,
+  ArgTypes,
   Decorator,
+  Meta,
   StoryContext,
+  StoryObj,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import type { StyleInfo } from 'lit/directives/style-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
-import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready.js';
-import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position.js';
 import type { SbbFormErrorElement } from '../form-error.js';
 import { SbbOptionElement } from '../option.js';
 
@@ -26,20 +22,6 @@ import { SbbSelectElement } from './select.js';
 import '../form-error.js';
 import '../form-field.js';
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('form-field').shadowRoot!.querySelector('div.sbb-form-field__space-wrapper'),
-  );
-
-  await waitForStablePosition(() => canvas.getByTestId('select'));
-  const select = await canvas.getByTestId('select');
-  userEvent.click(select);
-  await new Promise((resolve) => setTimeout(resolve, 2000));
-};
-
 const borderless: InputType = {
   control: {
     type: 'boolean',
@@ -466,70 +448,60 @@ export const SingleSelect: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const SingleSelectNegative: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, negative: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const MultipleSelect: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, multiple: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const MultipleSelectNegative: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, multiple: true, negative: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const SingleSelectSizeS: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const SingleSelectNegativeSizeS: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, negative: true, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const MultipleSelectSizeS: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, multiple: true, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const MultipleSelectNegativeSizeS: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, multiple: true, negative: true, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const SingleSelectWithGrouping: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, withOptionGroup: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const MultipleSelectWithGrouping: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, multiple: true, withOptionGroup: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const SingleSelectEllipsis: StoryObj = {
@@ -539,7 +511,6 @@ export const SingleSelectEllipsis: StoryObj = {
     value: { ...value, options: [...value.options!, valueEllipsis] },
   },
   args: { ...defaultArgs, value: valueEllipsis },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const MultipleSelectEllipsis: StoryObj = {
@@ -549,42 +520,36 @@ export const MultipleSelectEllipsis: StoryObj = {
     value: { ...value, options: [...value.options!, valueEllipsis] },
   },
   args: { ...defaultArgs, multiple: true, value: valueEllipsis },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Required: StoryObj = {
   render: FormFieldTemplateWithError,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, required: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Disabled: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, disabled: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Readonly: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, readonly: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Borderless: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, borderless: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BorderlessNegative: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, borderless: true, negative: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const BorderlessOpenAbove: StoryObj = {
@@ -592,7 +557,6 @@ export const BorderlessOpenAbove: StoryObj = {
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, borderless: true },
   decorators: [aboveDecorator],
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const InScrollableContainer: StoryObj = {
@@ -600,30 +564,24 @@ export const InScrollableContainer: StoryObj = {
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
   decorators: [scrollDecorator],
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
 };
 
 export const DisableOption: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, disableOption: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const DisableOptionGroup: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, withOptionGroup: true, disableGroup: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const DisableOptionGroupNegative: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, withOptionGroup: true, disableGroup: true, negative: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const DisableMultipleOption: StoryObj = {
@@ -635,7 +593,6 @@ export const DisableMultipleOption: StoryObj = {
     withOptionGroup: true,
     disableOption: true,
   },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const DisableMultipleOptionNegative: StoryObj = {
@@ -648,16 +605,12 @@ export const DisableMultipleOptionNegative: StoryObj = {
     disableOption: true,
     negative: true,
   },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const KeyboardInteraction: StoryObj = {
   render: KeyboardInteractionTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
 };
 
 const meta: Meta = {
@@ -665,7 +618,6 @@ const meta: Meta = {
   parameters: {
     backgroundColor: (context: StoryContext) =>
       context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-    chromatic: { disableSnapshot: false },
     actions: {
       handles: [
         SbbSelectElement.events.change,
diff --git a/src/elements/select/select.ts b/src/elements/select/select.ts
index cfbca69f45..3897fa8431 100644
--- a/src/elements/select/select.ts
+++ b/src/elements/select/select.ts
@@ -443,20 +443,20 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
     });
   }
 
-  private async _onKeyDown(event: KeyboardEvent): Promise<void> {
+  private _onKeyDown(event: KeyboardEvent): void {
     if (this.disabled || this.readonly) {
       return;
     }
 
     if (this.state === 'opened') {
-      await this._openedPanelKeyboardInteraction(event);
+      this._openedPanelKeyboardInteraction(event);
     }
     if (this.state === 'closed') {
-      await this._closedPanelKeyboardInteraction(event);
+      this._closedPanelKeyboardInteraction(event);
     }
   }
 
-  private async _closedPanelKeyboardInteraction(event: KeyboardEvent): Promise<void> {
+  private _closedPanelKeyboardInteraction(event: KeyboardEvent): void {
     if (this._checkForLetterSelection(event)) {
       return this._setNextActiveOptionByText(event);
     }
@@ -467,12 +467,12 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
       case 'ArrowDown':
       case 'ArrowUp':
         event.preventDefault();
-        await this.open();
+        this.open();
         break;
     }
   }
 
-  private async _openedPanelKeyboardInteraction(event: KeyboardEvent): Promise<void> {
+  private _openedPanelKeyboardInteraction(event: KeyboardEvent): void {
     if (this.disabled || this.readonly || this.state !== 'opened') {
       return;
     }
@@ -484,31 +484,31 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
     switch (event.key) {
       case 'Escape':
       case 'Tab':
-        await this.close();
+        this.close();
         break;
 
       case 'Enter':
       case ' ':
         event.preventDefault();
-        await this._selectByKeyboard();
+        this._selectByKeyboard();
         break;
 
       case 'ArrowDown':
       case 'ArrowUp':
         event.preventDefault();
-        await this._setNextActiveOption(event);
+        this._setNextActiveOption(event);
         break;
 
       case 'Home':
       case 'PageUp':
         event.preventDefault();
-        await this._setNextActiveOption(event, 0);
+        this._setNextActiveOption(event, 0);
         break;
 
       case 'End':
       case 'PageDown':
         event.preventDefault();
-        await this._setNextActiveOption(event, this._filteredOptions.length - 1);
+        this._setNextActiveOption(event, this._filteredOptions.length - 1);
         break;
     }
   }
@@ -525,7 +525,7 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
     );
   }
 
-  private async _setNextActiveOptionByText(event: KeyboardEvent): Promise<void> {
+  private _setNextActiveOptionByText(event: KeyboardEvent): void {
     // Set timeout and the string to search.
     if (typeof this._searchTimeout === typeof setTimeout) {
       clearTimeout(this._searchTimeout);
@@ -546,7 +546,7 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
     );
     if (match) {
       // If an exact match has been found, go to that option.
-      await this._setNextActiveOption(event, this._filteredOptions.indexOf(match));
+      this._setNextActiveOption(event, this._filteredOptions.indexOf(match));
     } else if (
       this._searchString.length > 1 &&
       new RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)
@@ -558,7 +558,7 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
           option.textContent?.toLowerCase().indexOf(this._searchString[0].toLowerCase()) === 0,
       );
       if (firstMatch) {
-        await this._setNextActiveOption(event, this._filteredOptions.indexOf(firstMatch));
+        this._setNextActiveOption(event, this._filteredOptions.indexOf(firstMatch));
       }
     } else {
       // No match found, clear the timeout and the search term.
@@ -567,17 +567,17 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
     }
   }
 
-  private async _selectByKeyboard(): Promise<void> {
+  private _selectByKeyboard(): void {
     const activeOption: SbbOptionElement = this._filteredOptions[this._activeItemIndex];
 
     if (this.multiple) {
-      await activeOption.setSelectedViaUserInteraction(!activeOption.selected);
+      activeOption.setSelectedViaUserInteraction(!activeOption.selected);
     } else {
-      await this.close();
+      this.close();
     }
   }
 
-  private async _setNextActiveOption(event: KeyboardEvent, index?: number): Promise<void> {
+  private _setNextActiveOption(event: KeyboardEvent, index?: number): void {
     const nextIndex =
       index ?? getNextElementIndex(event, this._activeItemIndex, this._filteredOptions.length);
     const nextOption = this._filteredOptions[nextIndex];
@@ -586,9 +586,9 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
     this._setActiveElement(nextOption, activeOption);
 
     if (!this.multiple) {
-      await this._setSelectedElement(nextOption, activeOption);
+      this._setSelectedElement(nextOption, activeOption);
     } else if (event?.shiftKey) {
-      await nextOption.setSelectedViaUserInteraction(!nextOption.selected);
+      nextOption.setSelectedViaUserInteraction(!nextOption.selected);
     }
     this._activeItemIndex = nextIndex;
   }
@@ -611,14 +611,14 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
     }
   }
 
-  private async _setSelectedElement(
+  private _setSelectedElement(
     nextActiveOption: SbbOptionElement,
     lastActiveOption: SbbOptionElement,
-  ): Promise<void> {
-    await nextActiveOption.setSelectedViaUserInteraction(true);
+  ): void {
+    nextActiveOption.setSelectedViaUserInteraction(true);
 
     if (lastActiveOption && lastActiveOption !== nextActiveOption) {
-      await lastActiveOption.setSelectedViaUserInteraction(false);
+      lastActiveOption.setSelectedViaUserInteraction(false);
     }
   }
 
@@ -638,9 +638,9 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
   };
 
   // Close menu on backdrop click.
-  private _closeOnBackdropClick = async (event: PointerEvent): Promise<void> => {
+  private _closeOnBackdropClick = (event: PointerEvent): void => {
     if (!this._isPointerDownEventOnMenu && !isEventOnElement(this._overlay, event)) {
-      await this.close();
+      this.close();
     }
   };
 
diff --git a/src/elements/selection-expansion-panel/selection-expansion-panel.stories.ts b/src/elements/selection-expansion-panel/selection-expansion-panel.stories.ts
index 7efa9ba872..0e12b47e2d 100644
--- a/src/elements/selection-expansion-panel/selection-expansion-panel.stories.ts
+++ b/src/elements/selection-expansion-panel/selection-expansion-panel.stories.ts
@@ -635,7 +635,6 @@ export const NestedCheckboxes: StoryObj = {
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    chromatic: { delay: 9000, fixedHeight: '14500px' },
     actions: {
       handles: [
         SbbSelectionExpansionPanelElement.events.didOpen,
diff --git a/src/elements/signet/signet.stories.ts b/src/elements/signet/signet.stories.ts
index d00c91157b..5a2e28a0f0 100644
--- a/src/elements/signet/signet.stories.ts
+++ b/src/elements/signet/signet.stories.ts
@@ -57,9 +57,6 @@ const meta: Meta = {
     docs: {
       extractComponentDescription: () => readme,
     },
-    chromatic: {
-      viewports: [320],
-    },
   },
   title: 'elements/sbb-signet',
 };
diff --git a/src/elements/skiplink-list/skiplink-list.stories.ts b/src/elements/skiplink-list/skiplink-list.stories.ts
index 73d706f81a..9ba842fe77 100644
--- a/src/elements/skiplink-list/skiplink-list.stories.ts
+++ b/src/elements/skiplink-list/skiplink-list.stories.ts
@@ -1,13 +1,9 @@
-import { within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
-import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready.js';
-import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position.js';
 
 import readme from './readme.md?raw';
 
@@ -99,16 +95,6 @@ const defaultArgs: Args = {
   hrefSecondLink: hrefSecondLink.options![1],
 };
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('skiplink')?.shadowRoot?.querySelectorAll('.sbb-skiplink-list__wrapper'),
-  );
-  await waitForStablePosition(() => canvas.getByTestId('skiplink'));
-  document.querySelector('sbb-block-link')?.focus();
-};
-
 const Template = ({
   labelFirstLink,
   hrefFirstLink,
@@ -126,7 +112,6 @@ export const SkiplinkList: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const SkiplinkListWithTitle: StoryObj = {
@@ -137,7 +122,6 @@ export const SkiplinkListWithTitle: StoryObj = {
     'title-level': titleLevel.options![0],
     'title-content': 'Skip',
   },
-  play: isChromatic() ? playStory : undefined,
 };
 
 const meta: Meta = {
@@ -148,7 +132,6 @@ const meta: Meta = {
     `,
   ],
   parameters: {
-    chromatic: { disableSnapshot: false },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/elements/teaser-hero/teaser-hero.stories.ts b/src/elements/teaser-hero/teaser-hero.stories.ts
index a452fec6e6..fef914a8b1 100644
--- a/src/elements/teaser-hero/teaser-hero.stories.ts
+++ b/src/elements/teaser-hero/teaser-hero.stories.ts
@@ -188,7 +188,6 @@ export const withSlots: StoryObj = {
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    chromatic: { diffThreshold: 0.11, delay: 5000 },
     actions: {
       handles: ['click'],
     },
diff --git a/src/elements/timetable-occupancy/timetable-occupancy.stories.ts b/src/elements/timetable-occupancy/timetable-occupancy.stories.ts
index 482d534696..c2e59792dd 100644
--- a/src/elements/timetable-occupancy/timetable-occupancy.stories.ts
+++ b/src/elements/timetable-occupancy/timetable-occupancy.stories.ts
@@ -218,7 +218,6 @@ const meta: Meta = {
     docs: {
       extractComponentDescription: () => readme,
     },
-    chromatic: { disableSnapshot: true },
   },
   title: 'elements/timetable/sbb-timetable-occupancy',
 };
diff --git a/src/elements/toast/toast.stories.ts b/src/elements/toast/toast.stories.ts
index 3860379b71..e9c218c376 100644
--- a/src/elements/toast/toast.stories.ts
+++ b/src/elements/toast/toast.stories.ts
@@ -1,20 +1,10 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
-import type {
-  Meta,
-  StoryObj,
-  ArgTypes,
-  Args,
-  Decorator,
-  StoryContext,
-} from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
-import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready.js';
 import type { SbbButtonElement } from '../button.js';
 
 import readme from './readme.md?raw';
@@ -23,19 +13,6 @@ import '../button/button.js';
 import '../button/transparent-button.js';
 import '../link/link.js';
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('sbb-toast').shadowRoot!.querySelector('.sbb-toast'),
-  );
-
-  const toast = canvas.getByTestId('sbb-toast') as SbbToastElement;
-  toast.open();
-  await new Promise((resolve) => setTimeout(resolve, 2000));
-};
-
 const position: InputType = {
   control: {
     type: 'select',
@@ -138,41 +115,35 @@ export const Basic: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const Dismissible: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, dismissible: true },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const LongContent: StoryObj = {
   render: LongContentTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithActionButton: StoryObj = {
   render: ActionButtonTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 export const WithActionLink: StoryObj = {
   render: ActionLinkTemplate,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
-  play: isChromatic() ? playStory : undefined,
 };
 
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    chromatic: { disableSnapshot: false },
     actions: {
       handles: [
         SbbToastElement.events.willOpen,
diff --git a/src/elements/tsconfig.json b/src/elements/tsconfig.json
index cbd936108b..32296230fc 100644
--- a/src/elements/tsconfig.json
+++ b/src/elements/tsconfig.json
@@ -7,6 +7,5 @@
       "@sbb-esta/lyne-elements/*": ["./*"]
     }
   },
-  "include": ["./**/*.ts", "../vite-env.d.ts"],
-  "exclude": ["./**/*.chromatic.stories.ts"]
+  "include": ["./**/*.ts", "../vite-env.d.ts"]
 }
diff --git a/src/storybook/pages/home/home--logged-in.stories.ts b/src/storybook/pages/home/home--logged-in.stories.ts
index 32653ccdde..50f6de3620 100644
--- a/src/storybook/pages/home/home--logged-in.stories.ts
+++ b/src/storybook/pages/home/home--logged-in.stories.ts
@@ -289,7 +289,6 @@ const meta: Meta = {
   parameters: {
     backgroundColor: (context: StoryContext) =>
       context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
-    chromatic: { disableSnapshot: false },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/storybook/pages/home/home.common.ts b/src/storybook/pages/home/home.common.ts
index f53beb95a5..29ab4be518 100644
--- a/src/storybook/pages/home/home.common.ts
+++ b/src/storybook/pages/home/home.common.ts
@@ -1,8 +1,6 @@
 import type { Args } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
-import { nothing } from 'lit/html.js';
 
 import '../../../elements/button.js';
 import '../../../elements/card.js';
@@ -209,7 +207,6 @@ export const liberoProduct = (): TemplateResult => html`
 export const teaserHero = (): TemplateResult => html`
   <section class="sbb-page-spacing">
     <sbb-teaser-hero
-      data-chromatic="ignore"
       class="teaser-hero"
       link-content="Learn more"
       image-src="https://cdn.img.sbb.ch/content/dam/internet/lyne/Billetkontrolle.jpg"
@@ -310,7 +307,7 @@ export const footer = (args: Args): TemplateResult => html`
         Subscribe
       </sbb-secondary-button-link>
     </div>
-    <sbb-clock now=${isChromatic() ? '01:59:27' : nothing}></sbb-clock>
+    <sbb-clock></sbb-clock>
     <sbb-divider ?negative=${args.negative}></sbb-divider>
     <sbb-link-list horizontal-from="large" ?negative=${args.negative}>
       <sbb-block-link
diff --git a/src/storybook/pages/home/home.stories.ts b/src/storybook/pages/home/home.stories.ts
index e0227d91dd..0ff03467ad 100644
--- a/src/storybook/pages/home/home.stories.ts
+++ b/src/storybook/pages/home/home.stories.ts
@@ -168,7 +168,6 @@ const meta: Meta = {
   parameters: {
     backgroundColor: (context: StoryContext) =>
       context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
-    chromatic: { disableSnapshot: false },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/storybook/styles/list/list.stories.ts b/src/storybook/styles/list/list.stories.ts
index 71f1f2d334..19429c6453 100644
--- a/src/storybook/styles/list/list.stories.ts
+++ b/src/storybook/styles/list/list.stories.ts
@@ -102,7 +102,6 @@ export const DescriptionList: StoryObj = {
 
 const meta: Meta = {
   parameters: {
-    chromatic: { disableSnapshot: false },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/storybook/styles/scrollbar/scrollbar.stories.ts b/src/storybook/styles/scrollbar/scrollbar.stories.ts
index ac9fd26c3f..3ffe7bca01 100644
--- a/src/storybook/styles/scrollbar/scrollbar.stories.ts
+++ b/src/storybook/styles/scrollbar/scrollbar.stories.ts
@@ -121,7 +121,6 @@ const meta: Meta = {
     docs: {
       extractComponentDescription: () => readme,
     },
-    chromatic: { disableSnapshot: true },
   },
   title: 'styles/scrollbar',
 };
diff --git a/src/storybook/styles/typography/typography.stories.ts b/src/storybook/styles/typography/typography.stories.ts
index c246b12bc2..3af7cfb6d1 100644
--- a/src/storybook/styles/typography/typography.stories.ts
+++ b/src/storybook/styles/typography/typography.stories.ts
@@ -43,23 +43,6 @@ const LegendSubSupTemplate = (): TemplateResult => html`
   </span>
 `;
 
-const LinkTemplate = (): TemplateResult => html`
-  <p class="sbb-text-m">
-    A text with a link inside <a href="" class="sbb-link">the text</a>. It should adapt to the text
-    but have an underline and hover colors.
-  </p>
-`;
-
-const LinkNegativeTemplate = (): TemplateResult => html`
-  <p
-    class="sbb-text-m"
-    style="background-color: var(--sbb-color-charcoal); color: var(--sbb-color-white); padding: 1rem;"
-  >
-    A text with a negative link inside <a href="" class="sbb-link-negative">the text</a>. It should
-    adapt to the text but have an underline and hover colors.
-  </p>
-`;
-
 export const Text: StoryObj = {
   render: TextTemplate,
 };
@@ -69,15 +52,8 @@ export const TextBold: StoryObj = {
 export const LegendSubSup: StoryObj = {
   render: LegendSubSupTemplate,
 };
-export const Link: StoryObj = {
-  render: LinkTemplate,
-};
-export const LinkNegative: StoryObj = {
-  render: LinkNegativeTemplate,
-};
 
 const meta: Meta = {
-  excludeStories: ['Link', 'LinkNegative'],
   parameters: {
     docs: {
       extractComponentDescription: () => readme,
diff --git a/src/storybook/testing/chromatic.ts b/src/storybook/testing/chromatic.ts
deleted file mode 100644
index 92d1d19984..0000000000
--- a/src/storybook/testing/chromatic.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import type {
-  Args,
-  Meta,
-  StoryContext,
-  StoryObj,
-  WebComponentsRenderer,
-  Decorator,
-} from '@storybook/web-components';
-import type { TemplateResult } from 'lit';
-import { html } from 'lit';
-
-import '../../elements/title.js';
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-type StoryParameter = Record<string, StoryObj> & { __namedExportsOrder?: string[] };
-
-export function combineStories(config: Meta, stories: StoryParameter): StoryObj['render'] {
-  const unCamelCase = (string: string): string =>
-    string.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/\b([A-Z]+)([A-Z])([a-z])/, '$1 $2$3');
-
-  const decorators = (name: string, story: StoryObj): Decorator[] =>
-    (
-      [
-        (story, context) =>
-          html`<div style="margin-block-end: 2rem;">
-            <sbb-title
-              level="5"
-              style="margin-block-end: 1rem; margin-block-start: 0; text-transform: capitalize;"
-            >
-              ${unCamelCase(name)}
-            </sbb-title>
-            <div
-              style="outline: 1px solid #ad00ff;${context.parameters.originalLayout !== 'fullscreen'
-                ? 'padding: 2rem;'
-                : ''}${context.parameters.backgroundColor
-                ? `background-color:${context.parameters.backgroundColor(context)};`
-                : ''}"
-            >
-              ${story()}
-            </div>
-          </div> `,
-      ] as Decorator[]
-    )
-      .concat(config.decorators || [])
-      .concat(story.decorators || []);
-
-  const reduceDecorators = (
-    name: string,
-    story: StoryObj,
-    context: StoryContext,
-  ): StoryObj['render'] =>
-    decorators(name, story).reduceRight(
-      (prevStory: () => WebComponentsRenderer['storyResult'], decorator: Decorator) => () =>
-        decorator(prevStory, context),
-      () => story.render!({ ...config.args, ...story.args }, context),
-    );
-
-  // __namedExportsOrder is an additional output for a story import generated by storybook.
-  return (args: Args, context: StoryContext): TemplateResult => html`
-    <div>
-      ${stories
-        .__namedExportsOrder!.map((name) => ({ name, story: stories[name] }))
-        .filter((s) => typeof s.story.render === 'function')
-        .map(({ name, story }) => {
-          const storyContext = {
-            ...context,
-            args: { ...config.args, ...story.args },
-          } as StoryContext;
-          return reduceDecorators(name, story, storyContext)!(args, storyContext);
-        })}
-    </div>
-  `;
-}
diff --git a/src/storybook/testing/wait-for-components-ready.ts b/src/storybook/testing/wait-for-components-ready.ts
deleted file mode 100644
index af3390e866..0000000000
--- a/src/storybook/testing/wait-for-components-ready.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { waitFor } from '@storybook/test';
-
-export async function waitForComponentsReady(checkFirstRenderingDone: () => any): Promise<void> {
-  await new Promise<void>((resolve: () => void) => {
-    if (document.readyState === 'complete') {
-      resolve();
-      return;
-    }
-    window.addEventListener('load', resolve, { once: true });
-  });
-
-  await waitFor(() => checkFirstRenderingDone());
-}
diff --git a/src/storybook/testing/wait-for-stable-position.ts b/src/storybook/testing/wait-for-stable-position.ts
deleted file mode 100644
index 1a2f45a6b0..0000000000
--- a/src/storybook/testing/wait-for-stable-position.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { waitFor } from '@storybook/test';
-
-export async function waitForStablePosition(
-  elementCallback: () => HTMLElement | Promise<HTMLElement>,
-  stableDurationMs = 2000,
-): Promise<void> {
-  const element = await waitFor(elementCallback);
-  const getPositionString = (): string => JSON.stringify(element.getBoundingClientRect());
-
-  let positionString: string;
-  do {
-    positionString = getPositionString();
-    await new Promise((resolve) => setTimeout(resolve, stableDurationMs));
-  } while (positionString !== getPositionString());
-}
diff --git a/src/storybook/testing/with-background-decorator.ts b/src/storybook/testing/with-background-decorator.ts
deleted file mode 100644
index 9f44a6ee2a..0000000000
--- a/src/storybook/testing/with-background-decorator.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { makeDecorator } from '@storybook/preview-api';
-import type { StoryContext } from '@storybook/types';
-import { html } from 'lit';
-
-export const withBackgroundDecorator = makeDecorator({
-  name: 'withContextSpecificBackgroundColor',
-  parameterName: 'backgroundColor',
-  skipIfNoParametersOrOptions: false,
-  wrapper: (getStory, context, { parameters }) => {
-    const backgroundColor = parameters as (context: StoryContext) => string;
-
-    // For Chromatic we need to return html
-    if (context.name === 'Chromatic Stories') {
-      const isChromaticStoriesMain = !(
-        getStory(context) as { strings: string[] }
-      ).strings[0].includes('outline');
-
-      if (!backgroundColor || isChromaticStoriesMain) {
-        return getStory(context);
-      } else {
-        return html`<div style="background-color: ${backgroundColor(context)}">
-          ${getStory(context)}
-        </div>`;
-      }
-    } else {
-      // For standard case we manipulate the body
-
-      const rootElement = (context.canvasElement as unknown as HTMLElement).closest<HTMLElement>(
-        '.docs-story, .sb-show-main',
-      )!;
-
-      // If no background function is set, remove background color.
-      if (!backgroundColor) {
-        rootElement.style.removeProperty('background-color');
-      } else {
-        rootElement.style.backgroundColor = backgroundColor(context);
-      }
-
-      return getStory(context);
-    }
-  },
-});
diff --git a/yarn.lock b/yarn.lock
index 07f35e5ba0..31c22dfe3c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4081,11 +4081,6 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-chromatic@11.7.1:
-  version "11.7.1"
-  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.7.1.tgz#9de59dd9d0e2a847627bccd959f05881335b524e"
-  integrity sha512-LvgPimdQdnQB07ZDxLEC2KtxgYeqTw0X71GA7fi3zhgtKLxZcE+BSZ/5I9rrQp1V8ydmfElfw0ZwnUH4fVgUAQ==
-
 chrome-launcher@^0.15.0:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/chrome-launcher/-/chrome-launcher-0.15.2.tgz#4e6404e32200095fdce7f6a1e1004f9bd36fa5da"