diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
index 79992defb9..a9bcad9d01 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -15,9 +15,9 @@ body:
     attributes:
       label: Preflight Checklist
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project.
+        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project.
           required: true
-        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
+        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to.
           required: true
         - label: I have searched the [issue tracker](https://github.com/orgs/lyne-design-system/projects/4) for an issue that matches the one I want to file, without success.
           required: true
diff --git a/.github/ISSUE_TEMPLATE/contributing-request.yml b/.github/ISSUE_TEMPLATE/contributing-request.yml
index 6d7d499d8e..8a2c2b2129 100644
--- a/.github/ISSUE_TEMPLATE/contributing-request.yml
+++ b/.github/ISSUE_TEMPLATE/contributing-request.yml
@@ -10,9 +10,9 @@ body:
     attributes:
       label: Preflight Checklist
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project.
+        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project.
           required: true
-        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
+        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to.
           required: true
         - label: I have searched the [issue tracker](https://github.com/orgs/lyne-design-system/projects/4) for an issue that matches the one I want to file, without success.
           required: true
diff --git a/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.yml b/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.yml
index cc8ba44309..4a8e3ee19f 100644
--- a/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.yml
+++ b/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.yml
@@ -10,9 +10,9 @@ body:
     attributes:
       label: Preflight Checklist
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project.
+        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project.
           required: true
-        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
+        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to.
           required: true
         - label: I have searched the [issue tracker](https://github.com/orgs/lyne-design-system/projects/4) for an issue that matches the one I want to file, without success.
           required: true
diff --git a/.github/ISSUE_TEMPLATE/question.yml b/.github/ISSUE_TEMPLATE/question.yml
index c07a0c8f92..6d6443291f 100644
--- a/.github/ISSUE_TEMPLATE/question.yml
+++ b/.github/ISSUE_TEMPLATE/question.yml
@@ -10,9 +10,9 @@ body:
     attributes:
       label: Preflight Checklist
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project.
+        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project.
           required: true
-        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
+        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to.
           required: true
         - label: I have searched the [issue tracker](https://github.com/orgs/lyne-design-system/projects/4) for an issue that matches the one I want to file, without success.
           required: true
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 1c376c50bf..af6a71f28a 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -2,8 +2,8 @@
 
 <!-- Please ensure you've completed the following steps by replacing [ ] with [x]-->
 
-- [ ] I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project.
-- [ ] I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
+- [ ] I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project.
+- [ ] I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to.
 - [ ] I have searched the [pull request tracker](https://github.com/lyne-design-system/lyne-components/pulls) for a Pull Request (PR) that matches the one I want to submit, without success.
 
 ## Issue
@@ -17,7 +17,7 @@ Please check if your PR fulfills the following requirements:
 - [ ] Tests for the changes have been added (for bug fixes / features)
 - [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
 
-See [Review Guidelines](../REVIEW.md) for more information what is checked during review process.
+See [Review Guidelines](../docs/REVIEW.md) for more information what is checked during review process.
 
 ## Changes
 
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 23e3aa0b37..19cce4138c 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -46,6 +46,10 @@
   .sbdocs-content {
     max-width: var(--sbb-breakpoint-medium-max) !important;
   }
+
+  .sb-show-main.sb-main-padded {
+    padding: 2rem;
+  }
 </style>
 
 <script>
@@ -97,6 +101,13 @@
     };
   }
 
+  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;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index a04d97448f..6a1becce36 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,12 +1,21 @@
 import * as tokens from '@sbb-esta/lyne-design-tokens';
+import type { StoryContext } from '@storybook/types';
+import type { Decorator } from '@storybook/web-components';
+import isChromatic from 'chromatic/isChromatic';
+import { html } from 'lit';
+
+import { withBackgroundDecorator } from '../src/storybook/testing/with-background-decorator.js';
+
 import '../src/components/core/styles/global.scss';
 
 const getViewportName = (key: string): string =>
   key.replace(/(^SbbBreakpoint|Min$)/g, '').toLowerCase();
+
 const breakpoints = Object.entries(tokens)
   .filter(([key]) => key.startsWith('SbbBreakpoint') && key.endsWith('Min'))
   .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:
@@ -43,7 +52,15 @@ export const parameters = {
     breakpointNames,
     debounceTimeout: 10,
   },
+  docs: {
+    toc: {
+      ignoreSelector: '.docs-story h2',
+      headingSelector: 'h2',
+    },
+    source: { format: 'html' },
+  },
   viewport: { viewports: storybookViewports },
+  backgrounds: { disable: true },
   options: {
     storySort: {
       // Story section order.
@@ -60,3 +77,12 @@ export const parameters = {
     },
   },
 };
+
+export 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()),
+];
diff --git a/.stylelintrc.json b/.stylelintrc.json
index aeb86fd2a5..e8fb6bf1d1 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,6 +1,6 @@
 {
   "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
-  "ignoreFiles": ["tools/generate-component/**/*.scss"],
+  "ignoreFiles": ["dist/**/*", "tools/generate-component/**/*.scss"],
   "rules": {
     "custom-property-pattern": "^_?(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$",
     "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$",
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 541239aa23..2940ed8bea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [0.50.2](https://github.com/lyne-design-system/lyne-components/compare/v0.50.1...v0.50.2) (2024-04-16)
+
+
+### Bug Fixes
+
+* adapt lyne tokens change ([#2582](https://github.com/lyne-design-system/lyne-components/issues/2582)) ([94bf4f0](https://github.com/lyne-design-system/lyne-components/commit/94bf4f069688cc958a34beb2e4337822cf70cd9a))
+* adapt react package import paths missed during migration ([#2589](https://github.com/lyne-design-system/lyne-components/issues/2589)) ([0781c6a](https://github.com/lyne-design-system/lyne-components/commit/0781c6a3a2a69dce800a3106908b9d9c694d26df))
+* **sbb-overlay:** consider sbb-overlay as overlay in inert mechanism ([#2588](https://github.com/lyne-design-system/lyne-components/issues/2588)) ([4ecc125](https://github.com/lyne-design-system/lyne-components/commit/4ecc1254f79bfc95af2aa66c1021c507c6e7db2f))
+* **sbb-teaser-hero:** use auto hyphens for title text to avoid overflow ([#2581](https://github.com/lyne-design-system/lyne-components/issues/2581)) ([3b8844c](https://github.com/lyne-design-system/lyne-components/commit/3b8844c2311f27e238ba73812a6a3c01abb2a5a3))
+
 ## [0.50.1](https://github.com/lyne-design-system/lyne-components/compare/v0.50.0...v0.50.1) (2024-04-15)
 
 
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
deleted file mode 100644
index 5a0a3772cd..0000000000
--- a/CODE_OF_CONDUCT.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# Code of Conduct
-
-This project is governed by [Lyne's Code of Conduct](https://github.com/lyne-design-system/lyne/blob/main/CODE_OF_CONDUCT.md).
-All contributors and participants agree to abide by its terms.
diff --git a/LICENSE b/LICENSE
index a5b37cc3a7..70a7c91766 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018-2023, SBB AG
+Copyright (c) 2018-2024, SBB AG
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 3fd5b61341..507cea4f10 100644
--- a/README.md
+++ b/README.md
@@ -1,25 +1,30 @@
-<h1 align="center">
-  Lyne Components
-</h1>
+# Lyne Components
 
-> _Lyne Components_ are the building blocks of the [Lyne Design System](https://github.com/lyne-design-system/lyne/blob/main/docs/TERMINOLOGY.md#lyne)
-> and are based on standard compliant [Web Components](https://github.com/lyne-design-system/lyne/blob/main/docs/TERMINOLOGY.md#web-components)
-> created using [Lit](https://github.com/lyne-design-system/lyne/blob/main/docs/TERMINOLOGY.md#lit) and
-> browsable through [Storybook](https://github.com/lyne-design-system/lyne/blob/main/docs/TERMINOLOGY.md#storybook)
+> Lyne Components are the building blocks of the Lyne Design System
+> and are based on standard compliant Web Components
+> created using [Lit](https://lit.dev/) and
+> browsable through [Storybook](https://lyne-storybook.app.sbb.ch/)
 
-<br>
+## 🎯 Our aim
 
-## ⚠️ Notice
+To fulfill our [Vision](./docs/VISION.md), we are building and maintaining Lyne, our Design System, which is and acts
+as our common language — our Single Source of Truth.
+For this purpose we use [Design Tokens](https://github.com/lyne-design-system/lyne-design-tokens) as our design abstractions.
+Those [Design Tokens](https://github.com/lyne-design-system/lyne-design-tokens) are consumed by Lyne Components and are integrated within our documentation.
 
-**_Lyne Components_ are 🧪experimental at the moment — with enthusiasm.<br>Don't use the project until it has left infancy.**
+Lyne Design Tokens and Lyne Components are available for developers and designers.
 
-<br>
+## 📚 Documentation
+
+- General docs: [digital.sbb.ch](https://digital.sbb.ch)
+- Component docs: [Storybook](https://lyne-storybook.app.sbb.ch)
+- [Getting started guide](./docs/GETTING_STARTED.md)
 
-## 💻 What we're working on right now
+## 🔗 Packages
 
-Check the current tasks we're working on over [here](https://github.com/lyne-design-system/lyne-components/projects/4) but since the project is still **🧪 experimental** and in rapid development not all tasks we're working on are reflected as issues (or tickets) since this would be too cumbersome at the current development stage. Also check out over [TODOS](./TODOS.md) what all needs to be done (at some point).
+- [NPM Packages](https://www.npmjs.com/search?q=%40sbb-esta%2Flyne-)
 
-## Browser and screen reader support
+## 🖥 Browser and screen reader support
 
 This library supports the most recent two versions of all major browsers: Chrome (including Android), Firefox, Safari (including iOS), and Edge.
 
@@ -30,24 +35,14 @@ macOS: VoiceOver with Safari / Chrome.
 iOS: VoiceOver with Safari
 Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
 
-## ⛩️ Storybook
-
-The latest still **🧪 experimental** version of the Storybook component browser for _Lyne Components_ can be found [here](https://lyne-storybook.app.sbb.ch/).
-
-## 🍱 npm
-
-The current **🧪 experimental** build of Lyne Components can be found on [npm](https://www.npmjs.com/package/@sbb-esta/lyne-components).
-
-## 📚 Documentation
-
-Check the [docs](docs/README.md) directory for our documentation which we will continuously enhance.
-Component specific docs are available on our [storybook](https://lyne-storybook.app.sbb.ch).
-General docs can be read on [digital.sbb.ch](https://digital.sbb.ch).
-
 ## 🙌 Contributing
 
-See our [contributing guide](CONTRIBUTING.md) and check also our [code of conduct](CODE_OF_CONDUCT.md) 👀.
+- [General contribution guide](./docs/CONTRIBUTING.md)
+- [Developer guide](./docs/DEVELOPER.md) for developers to get started working with this repo.
+- [Coding standards](./docs/CODING_STANDARDS.md) for developers.
+- [Code of conduct](./docs/CODE_OF_CONDUCT.md)
 
 ## 📝 License
 
-This software is published by SBB-CFF-FFS under the [MIT](/LICENSE) licence and unsupported unless otherwise clearly stated. Use at your own risk.
+This software is published by SBB-CFF-FFS under the [MIT](/LICENSE) licence and unsupported unless otherwise clearly stated.
+Use at your own risk.
diff --git a/STORYBOOK.md b/STORYBOOK.md
deleted file mode 100644
index 2075c6bb9d..0000000000
--- a/STORYBOOK.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Connection between lyne-components and lyne-documentation
-
-## Workflow
-
-To automate the documentation process, we use the information that we provide in the `.stories.js` files render the components and their variants on the documentation platform automatically.
-
-Therefore, we have some extra information that we provide inside the `.stories.js` files.
-
-## Stories Example
-
-Let's look at a simple story:
-
-```javascript
-export const SimpleStory = (args) => <lyne-sample-component {...args} />;
-```
-
-You can define properties like title and specific container styling for a story like this:
-
-```javascript
-SimpleStory.documentation = {
-  container: {
-    styles: {
-      'background-color': '#eb0000',
-    },
-  },
-  title: 'Title for the story',
-};
-```
-
-## Global properties
-
-Sometimes, we need to use args on component to render a story which would not be necessary to render the component. We just might have to use it for the story to work properly.
-
-Look at the `sbb-button.stories.js` stories for example: there we use the property `iconslot` to define which icon should be rendered for the button. But in a real world application, developers would define the icon via a slot directly.
-
-In this case it is important that we `hide` this property from the documentation. To do so, you can define such properties in the default export of the stories file:
-
-```javascript
-export default {
-  documentation: {
-    disableArgs: ['iconslot'],
-  },
-  title: 'Sample Lyne Component',
-};
-```
diff --git a/docs/CICD.md b/docs/CICD.md
deleted file mode 100644
index 092fb2d8de..0000000000
--- a/docs/CICD.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# CI/CD
-
-## SemVer
-
-We adhere to the semantic versioning standard. With each merge into main, the potential next version is automatically determined by the `sematic-release` package.
-
-Only commits that adhere to the `Conventional Commits` standard ([https://www.conventionalcommits.org/](https://www.conventionalcommits.org/)) will trigger semantic releases accordingly.
-
-To make sure developers properly style their commit messages, we use `husky` together with `commit-lint`.
-
-## Tools
-
-- [GitHub](https://github.com/lyne-design-system/lyne-components): Source code repository.
-- [GitHub Actions](https://github.com/lyne-design-system/lyne-components/actions): CI & CD is done with GitHub Actions.
-- [Netlify](https://app.netlify.com/): The storybook build and the deployments page are deployed to Netlify.
-- [Codecov](https://codecov.io/bash): A report for code coverage is created for each release and uploaded to Codecov.
-- [Deep Code](https://www.deepcode.ai/): analyzes the code
-- [Git Guardian](https://gitguardian.com/): checks the code for security vulnerabilities
-- [Snyk](https://snyk.io/): checks all the dependencies for vulnerabilities
-
-## Artefacts
-
-The following build artefacts are relevant for deployments:
-
-- `./dist/components`: web components that are published to npm
-- `./dist/react`: react components that are published to npm
-- `./dist/storybook`: the storybook build that is deployed to chromatic and to preview environment
diff --git a/docs/CODE_OF_CONDUCT.md b/docs/CODE_OF_CONDUCT.md
new file mode 100644
index 0000000000..31c0ba22cc
--- /dev/null
+++ b/docs/CODE_OF_CONDUCT.md
@@ -0,0 +1,110 @@
+# Lyne Code of Conduct
+
+## tl;dr
+
+- **Be respectful & understanding.** Not all of us will agree all the time, but
+  disagreement is no excuse for poor behavior or poor manners. It is important
+  that we resolve disagreements and differing views constructively.
+
+- **Be welcoming.** We strive to be a community that welcomes and supports
+  people of all backgrounds and identities.
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience
+for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics,
+gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance,
+race, political and religious beliefs, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will
+take appropriate and fair corrective action in response to any behavior that they deem inappropriate,
+threatening, offensive, or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits,
+issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons
+for moderation decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when an individual is officially
+representing the community in public spaces. Examples of representing our community include using an official
+e-mail address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders
+responsible for enforcement at esta@sbb.ch.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining the consequences for any action
+they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing clarity around the nature of
+the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved,
+including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public communication with the community for
+a specified period of time. No public or private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained
+inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the community.
+
+## Attribution
+
+This Code of Conduct is adapted from
+
+- [Contributor Covenant](https://www.contributor-covenant.org/), version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html
+- [IBM Carbon code of conduct](https://github.com/carbon-design-system/carbon/blob/master/.github/CODE_OF_CONDUCT.md)
+- Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity)
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.
diff --git a/CODING_STANDARDS.md b/docs/CODING_STANDARDS.md
similarity index 76%
rename from CODING_STANDARDS.md
rename to docs/CODING_STANDARDS.md
index 5bb879f505..51fbf84dbe 100644
--- a/CODING_STANDARDS.md
+++ b/docs/CODING_STANDARDS.md
@@ -1,4 +1,4 @@
-# lyne Coding Standards
+# Lyne Coding Standards
 
 ## Code style
 
@@ -13,17 +13,17 @@ This project uses [Prettier](https://prettier.io/) to enforce a consistent code
 Comments that explain what some block of code does are nice; they can tell you something in less
 time than it would take to follow through the code itself.
 
-Comments that explain why some block of code exists at all, or does something the way it does,
+Comments that explain why some block of code exists at all or does something the way it does,
 are _invaluable_. The "why" is difficult, or sometimes impossible, to track down without seeking out
 the original author. When collaborators are in the same room, this hurts productivity.
-When collaborators are in different timezones, this can be devastating to productivity.
+When collaborators are in different time zones, this can be devastating to productivity.
 
 For example, this is a not-very-useful comment:
 
 ```ts
 // Set default tabindex.
-if (!$attrs['tabindex']) {
-  $element.attr('tabindex', '-1');
+if (!this.getAttribute('tabindex')) {
+  this.setAttribute('tabindex', '-1');
 }
 ```
 
@@ -31,10 +31,10 @@ While this is much more useful:
 
 ```ts
 // Unless the user specifies so, the calendar should not be a tab stop.
-// This is necessary because ngAria might add a tabindex to anything with an ng-model
+// This is necessary because it might add a tabindex to anything with an ng-model
 // (based on whether or not the user has turned that particular feature on/off).
-if (!$attrs['tabindex']) {
-  $element.attr('tabindex', '-1');
+if (!this.getAttribute('tabindex')) {
+  this.setAttribute('tabindex', '-1');
 }
 ```
 
@@ -50,15 +50,15 @@ In HTML code, use `<!-- ... -->` comments, which will be stripped when packaging
 Every time a component is created, a `readme.md` file is generated;
 don't underestimate its value, as it will be the documentation entry point for consumers.
 
-The `generate` script will create a base structure for the component description; try to stick at it if you can.
+The `generate` script will create a base structure for the component description; try to stick to it if you can.
 
 Start with a brief sentence which describes the main purpose of the component and why it should be used;
 if it is related to other components, mention them and add a link to their documentation.
 
 Then describe how the component should be used, adding code examples:
-if it's a presentational one explain its graphic variants using the `### Style` paragraph,
+if it's a presentational one, explain its graphic variants using the `### Style` paragraph,
 while if it's a complex one you could use the `### Interaction` paragraph.
-Almost all the components has `### Slots` and can have different `### States`; describe how they can be used.
+Almost all the components have `### Slots` and can have different `### States`; describe how they can be used.
 
 #### Prefer small, focused modules
 
@@ -66,15 +66,15 @@ Keeping modules to a single responsibility makes the code easier to test, consum
 ESM modules offer a straightforward way to organize code into logical, granular units.
 Ideally, individual files are 200 - 300 lines of code.
 
-As a rule of thumb, once a file draws near 400 lines (barring abnormally long constants / comments),
+As a rule of thumb, once a file draws near 400 lines (barring abnormally long constants/comments),
 start considering how to refactor into smaller pieces.
 
-This might not always apply to components, but should be considered during implementation.
+This might not always apply to components but should be considered during implementation.
 
 #### Less is more
 
 Once a feature is released, it never goes away. We should avoid adding features that don't offer
-high user value for price we pay both in maintenance, complexity, and payload size. When in doubt,
+high user value for the price we pay both in maintenance, complexity, and payload size. When in doubt,
 leave it out.
 
 This applies especially to providing two different APIs to accomplish the same thing. Always
@@ -82,7 +82,7 @@ prefer sticking to a _single_ API for accomplishing something.
 
 #### Action elements
 
-As we have to "reimplement" button and anchor functionality in order to comply with
+Since we have to "reimplement" the button and anchor functionality in order to comply with
 accessibility, we need to consider all native behavior of a native `<button>` and `<anchor>`
 element.
 
@@ -91,13 +91,13 @@ named `SbbButtonBaseElement` and `SbbLinkBaseElement`,
 which holds all the logic needed to "emulate" the native `<button>` and `<anchor>` elements.
 In detail, the new classes implement:
 
-- the native component related properties (`form`, `name`... for the button, `href`, `target`... for the link);
+- the native component-related properties (`form`, `name`... for the button, `href`, `target`... for the link);
 - the interaction logic (like `click`, `keypress` and so on);
 - the accessibility attributes (like `role`);
 - the rendering of the wrapper tag with its attributes (`span` for the button, `a` for the link).
 
 These classes can be used as follows:
-components which require basic button or link functionality have to extend the corresponding "base" class,
+components that require basic button or link functionality have to extend the corresponding "base" class,
 and they need to implement the `renderTemplate` method, which should return the component's inner content.
 
 ```ts
@@ -129,8 +129,8 @@ Compare with existing components (e.g. `<sbb-button>`, `<sbb-breadcrumb>`, etc.)
 #### I18N
 
 If using texts in components they have to be provided in English, French, German and Italian.
-As the language can be changed dynamically, you have to listen to the `sbbLanguageChange`
-event and re-render the view. This can be done by marking the field with `@state` and using the language change handler (see code below).
+As the language can be changed dynamically, you have to use the `SbbLanguageController`.
+The `SbbLanguageController` does automatically update the view if needed.
 
 ```ts
 import { SbbLanguageController } from '../core/controllers.js';
@@ -194,7 +194,7 @@ class ConfigBuilder {
 
 #### Access modifiers
 
-- Use `public` keyword as it is the recommendation by TypeScript.
+- Use `public` keyword as it is recommended by TypeScript.
 - Use `private` when appropriate and possible, prefixing the name with an underscore.
 - Use `protected` when appropriate and possible with no prefix.
 
@@ -237,7 +237,9 @@ disabled: boolean = false;
 
 #### Properties initialization
 
-Boolean properties with a default value can be initialized with `false` but not with `true`. This is due to how Lit handles boolean attributes in the DOM: it evaluates, for example, `sanitize="false"` as `true` and not `false` as we would expect. Therefore the property should be converted in something like `noSanitize = false`:
+Boolean properties with a default value can be initialized with `false` but not with `true`.
+This is due to how Lit handles boolean attributes in the DOM: it evaluates, for example, `sanitize="false"` as `true`
+and not `false` as we would expect. Therefore, the property should be converted into something like `noSanitize = false`:
 
 ```ts
 // AVOID
@@ -270,7 +272,7 @@ specific error being caught and why it cannot be prevented.
 - Prefer to write out words instead of using abbreviations.
 - Prefer _exact_ names to short names (within reason). E.g., `labelPosition` is better than
   `align` because the former much more exactly communicates what the property means.
-- Except for `@property` properties, use `is` and `has` prefixes for boolean properties / methods.
+- Except for `@property` properties, use `is` and `has` prefixes for boolean properties/methods.
 
 ##### Classes
 
@@ -309,8 +311,8 @@ openDialog() {
 
 #### Prefer for-of instead of forEach
 
-Prefer usage of `for (... of ...)` instead of forEach, as it is slightly more performant.
-Exceptions can be made, if only one action/line is performed.
+Prefer the usage of `for (... of ...)` instead of forEach, as it is slightly more performant.
+Exceptions can be made if only one action/line is performed.
 
 ```ts
 /** AVOID: do not use forEach for actions that require multiple lines. */
@@ -370,7 +372,7 @@ after an action (e.g. `willOpen` and `didOpen`).
 Properties/Attributes are automatically documented and can be inferred by the IDE/compiler.
 
 ```html
-<!-- AVOID: needs to be clearly documented and is not IDE friendly. -->
+<!-- AVOID: needs to be clearly documented and is not IDE-friendly. -->
 <sbb-example class="sbb-negative sbb-vertical"></sbb-example>
 
 <!-- PREFER: describes the action performed by the function. -->
@@ -382,35 +384,35 @@ Properties/Attributes are automatically documented and can be inferred by the ID
 Instead of forwarding properties/content, use a `<slot>` (and/or a named slot
 `<slot name="example">`) to provide the possibility of directly assigning content/values.
 
-#### Use `variant` property, if a component has more than one variant
+#### Use the `variant` property, if a component has more than one variant
 
 Use `@property() variant: 'default' | 'etc'` to provide different design variants for a component.
 
-#### Use `negative` property, if a component has a color negative specification
+#### Use the `negative` property, if a component has a color-negative specification
 
 Use `@property() negative: boolean` to provide a color negative design for a component.
 
 #### Handling aria attributes
 
-Id references, which are used commonly with aria attributes, cannot pass shadow DOM boundaries.
-Due to this, the host element of a web component should be enrichted with the appropriate
+ID references, which are used commonly with aria attributes, cannot pass shadow DOM boundaries.
+Due to this, the host element of a web component should be enriched with the appropriate
 role and aria attributes and inner elements with the same semantic meaning should be assigned
 `role="presentation"`.
 
-This allows consumers to use the host element as the reference and also place id references
+This allows consumers to use the host element as the reference and also place ID references
 on it.
 
-#### id handling
+#### ID handling
 
-Element ids are relevant for both connecting elements for specific functionality and to provide a
+Element IDs are relevant for both connecting elements for specific functionality and providing a
 better experience for accessibility.
 
-##### Host id
+##### Host ID
 
-In certain scenarios a component should have a default id (e.g. when the usage of the id is
+In certain scenarios, a component should have a default ID (e.g. when the usage of the ID is
 expected).
 
-There are various ways to assign an id to the host. One option is to use the `assignId` function:
+There are various ways to assign an ID to the host. One option is to do it in the connectedCallback.
 
 ```ts
 let nextId = 0;
@@ -418,12 +420,9 @@ let nextId = 0;
 @customElement('sbb-example')
 export class SbbExample extends LitElement {
   ...
-  protected override render(): TemplateResult {
-    assignId(() => `sbb-example-${++nextId}`)(this);
-
-    return html`
-      ...
-    `;
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.id ||= `sbb-example-${nextId++}`;
   }
 }
 
@@ -436,7 +435,7 @@ within another component (e.g. a `<sbb-link>` should not render an `<a>` or `<bu
 when placed in another `<a>` or `<button>` ancestor or `<sbb-title>` should be designed in a
 specific way when placed within a `<sbb-alert>`, etc.).
 
-(Ideally we could use the `:host-context` for the styling part, but the Firefox and Safari
+(Ideally, we could use the `:host-context` for the styling part, but the Firefox and Safari
 teams have indicated that this will not be implemented:
 https://github.com/w3c/csswg-drafts/issues/1914)
 
@@ -448,15 +447,13 @@ This can be used in the `connectedCallback()` (see
 which should minimize the performance impact of this detection.
 
 **Usages of this functionality should be carefully considered. If a component has too many variants
-depending on context, this should be discussed at design level. Also in many cases,
-`this._element.closest(selector)` can be used instead, which is far more performant. **
+depending on the context, this should be discussed at design level. Also in many cases,
+`this.closest(selector)` can be used instead, which is far more performant. **
 
 ```ts
-@Element() element!: HTMLElement;
-
 connectedCallback() {
   // Check if the current element is nested in either an `<a>` or `<button>` element.
-  this._isNestedInButtonAnchor = !!hostContext('a,button', this.el);
+  this._isNestedInButtonAnchor = !!hostContext('a,button', this);
 }
 ```
 
@@ -516,7 +513,7 @@ Use these variables instead of the original ones and only define new variables f
 If a global variable is missing, create an issue or pull request in
 [lyne-design-system/lyne-design-tokens][lyne-design-tokens].
 
-#### Be cautious with use of `display: flex`
+#### Be cautious with the use of `display: flex`
 
 - The [baseline calculation for flex elements](http://www.w3.org/TR/css-flexbox-1/#flex-baselines)
   is different from other display values, making it difficult to align flex elements with standard
@@ -587,16 +584,16 @@ The end-user of a component should be the one to decide how much margin a compon
 
 In order to avoid unwanted style overrides from outside,
 prefer to encapsulate styles to inner elements instead of the host.
-We provide css vars as an api to the outside.
+We provide CSS vars as an API to the outside.
 
 For example, rather than
 
 ```scss
 :host {
-  --width: 200px;
+  --sbb-width: 200px;
 
   display: flex;
-  width: var(--width);
+  width: var(--sbb-width);
 }
 ```
 
@@ -604,12 +601,12 @@ you can write
 
 ```scss
 :host {
-  --width: 200px;
+  --sbb-width: 200px;
 }
 
 .component {
   display: flex;
-  width: var(--width);
+  width: var(--sbb-width);
 }
 ```
 
@@ -622,7 +619,7 @@ This is a low-effort task that makes a big difference for low-vision users. Exam
 
 @include sbb.if-forced-colors {
   .unicorn-motorcycle {
-    border: 1px solid #fff !important;
+    border: var(--sbb-border-width-1x) solid #fff !important;
   }
 }
 ```
@@ -632,7 +629,7 @@ This is a low-effort task that makes a big difference for low-vision users. Exam
 When it is not super obvious, include a brief description of what a class represents. For example:
 
 ```scss
-// The calendar icon button used to open the calendar pane.
+// The calendar icon button is used to open the calendar pane.
 .sbb-datepicker-button { ... }
 
 // Floating pane that contains the calendar at the bottom of the input.
@@ -648,7 +645,7 @@ When it is not super obvious, include a brief description of what a class repres
 
 In order to avoid chromatic detected regressions, it's recommended to create separate stories for all visual variants.
 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.
+e.g. for a label that receives ellipsis if it is too long to fit in a container.
 
 #### Controls
 
@@ -662,8 +659,58 @@ Templates can be very large, so try to reuse the common code blocks (avoiding du
 
 #### Language of stories
 
-Stories with its example texts should be written in English
+Stories with example texts should be written in English
 to be neutral and also understandable for all developers and consumers.
 
 [ts-mixins]: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#support-for-mix-in-classes
 [lyne-design-tokens]: https://github.com/lyne-design-system/lyne-design-tokens
+
+## States
+
+Components can have various states. We want to document which states exist and their definitions.
+
+### Normal
+
+The state when no other state applies.
+
+### Hover
+
+State when the mouse is hovering over the component. Does not exist on touch devices.
+Should visually highlight the component.
+For accessibility compliance, the visual highlight must not be reduced to color, but should either include translation, cursor/pointer change or other effects that make it understandable for visually impaired consumers.
+
+### Focused
+
+State when a component or element has focus via keyboard.
+Should provide an outline when a component has focus (via keyboard).
+
+### Active
+
+State when a component or element is active and not a form element.
+(e.g. an active tab in a tab group, an expanded accordion panel or a pressed button)
+Should visually highlight the component.
+For accessibility compliance, the visual highlight must not be reduced to color, but should either include translation, cursor/pointer change or other effects that make it understandable for visually impaired consumers.
+
+### Checked
+
+State when form component or element is checked.
+(e.g. radio-button, checkbox)
+Should visually indicate its state.
+Indeterminate is a substate of this.
+
+### Disabled
+
+State when a component or element is disabled and cannot be used or selected.
+Should prevent focus or selection by keyboard or mouse.
+Should visually indicate its state.
+
+### Readonly
+
+State when form component or element is readonly.
+Must be accessible via keyboard and mouse but content/selection cannot be changed.
+Should visually indicate its state.
+
+### Error
+
+State when form component or element is in an error state.
+Should visually and textually indicate the error state and error type.
diff --git a/CONTRIBUTING.md b/docs/CONTRIBUTING.md
similarity index 97%
rename from CONTRIBUTING.md
rename to docs/CONTRIBUTING.md
index 10e3bcca70..f69d19834c 100644
--- a/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@@ -65,7 +65,7 @@ You can file new issues by providing the above information [here](https://github
 - Create your patch, **including appropriate test cases**.
 - Follow our [Coding Rules](#rules).
 - Test your changes with our supported browsers and screen readers.
-- Run tests via `yarn test:dev` and ensure that all tests pass.
+- Run tests via `yarn test` and ensure that all tests pass.
 - Commit your changes using a descriptive commit message that follows our
   [commit message conventions](#commit). Adherence to these conventions
   is necessary because release notes are automatically generated from these messages.
@@ -106,7 +106,8 @@ To ensure consistency throughout the source code, keep these rules in mind as yo
 - All features or bug fixes **must be tested** by one or more specs (unit-tests).
 - All public API methods **must be documented**.
 - We use [prettier](https://prettier.io/) and [eslint](https://eslint.org/) rules to enforce code style.
-- Also see [CODING_STANDARDS](./CODING_STANDARDS.md)
+- Also see [CODING_STANDARDS](./CODING_STANDARDS.md).
+- Check [Review docs](./REVIEW.md) to know what is going to be reviewed.
 
 ## <a name="commit"></a> Commit Message Guidelines
 
diff --git a/docs/DEVELOP.md b/docs/DEVELOP.md
deleted file mode 100644
index 34de06de24..0000000000
--- a/docs/DEVELOP.md
+++ /dev/null
@@ -1,132 +0,0 @@
-## Linting
-
-TypeScript-ESLint is configured for this project. Make sure your editor catches ESLint errors. Linting will be run on CI before the test and build step. If linting fails, the build will fail. To run ESLint on the command line run
-
-```bash
-npm run lint
-```
-
-## Branch Deployments
-
-If you `commit` and `push` your changes on a branch, a [Preview Deployment](https://github.com/lyne-design-system/lyne/blob/main/docs/TERMINOLOGY.md#preview-deployment) is created on Netlify.
-
-You can find a list of all branches along with their Netlify deployment URL here: [https://lyne-documentation.netlify.app/en/deployments](https://lyne-documentation.netlify.app/en/deployments).
-
-## package.json
-
-### npm scripts
-
-| Script             | Purpose                                                                                                                                                                                                                                                    |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `build:components` | Create a production build of Lit components                                                                                                                                                                                                                |
-| `build:storybook`  | Build Storybook [Component Browser](https://github.com/lyne-design-system/lyne/blob/main/docs/TERMINOLOGY.md#component-browser) based on our [Storybook Stories](https://github.com/lyne-design-system/lyne/blob/main/docs/TERMINOLOGY.md#storybook-story) |
-| `build`            | Run `build:components` and `build:storybook` sequentially                                                                                                                                                                                                  |
-| `docs`             | Run `docs:manifest` and `docs:to-md` sequentially to regen docs files                                                                                                                                                                                      |
-| `format`           | Run `prettier` to format every supported file                                                                                                                                                                                                              |
-| `generate`         | Start the interactive component generator                                                                                                                                                                                                                  |
-| `integrity`        | Run `format` and `docs`                                                                                                                                                                                                                                    |
-| `lint`             | Run TypeScript-ESLint                                                                                                                                                                                                                                      |
-| `start`            | Run `storybook` local development and open it on browser                                                                                                                                                                                                   |
-| `test`             | Run all unit and e2e tests                                                                                                                                                                                                                                 |
-| `test:spec`        | Run all spec tests                                                                                                                                                                                                                                         |
-| `test:e2e`         | Run all e2e tests                                                                                                                                                                                                                                          |
-| `prepare`          | Install Husky                                                                                                                                                                                                                                              |
-
-### devDependencies
-
-| Dependency                            | Purpose                                                                                       | Docs                                                                                   |
-| ------------------------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| @commitlint/cli                       | cli utility for semantic-release                                                              | https://github.com/conventional-changelog/commitlint                                   |
-| @commitlint/config-conventional       | standard semantic-release convention rules                                                    | https://github.com/conventional-changelog/commitlint                                   |
-| @custom-elements-manifest/analyzer    | file format that describes custom elements                                                    | https://github.com/open-wc/custom-elements-manifest                                    |
-| @custom-elements-manifest/to-markdown | file format that describes custom elements                                                    | https://github.com/open-wc/custom-elements-manifest                                    |
-| @open-wc/lit-helpers                  | library with helpers functions for lit                                                        | https://github.com/open-wc/open-wc/tree/master/packages/lit-helpers                    |
-| @open-wc/testing                      | package of testing libraries                                                                  | https://github.com/open-wc/open-wc/tree/master/packages/testing                        |
-| @storybook/addon-a11y                 | a11y addons for storybook                                                                     | https://www.npmjs.com/package/@storybook/addon-a11y                                    |
-| @storybook/addon-actions              | add actions to storybook stories                                                              | https://github.com/storybookjs/storybook/tree/master/addons/actions                    |
-| @storybook/addon-essentials           | curated addons to bring out the best of storybook                                             | https://github.com/storybookjs/storybook/tree/next/code/addons/essentials              |
-| @storybook/addon-interactions         | automate, test and debug user interactions                                                    | https://github.com/storybookjs/storybook/tree/next/code/addons/interactions            |
-| @storybook/addon-links                | link stories together to build demos and prototypes with your UI components                   | https://github.com/storybookjs/storybook/tree/master/addons/actions                    |
-| @storybook/blocks                     | storybook doc blocks                                                                          | https://github.com/storybookjs/storybook/tree/next/code/addons/links                   |
-| @storybook/builder-vite               | plugin to run and build storybooks with vite                                                  | https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme  |
-| @storybook/test                       | instrumented version of testing library for storybook interactions                            | https://github.com/storybookjs/testing-library#readme                                  |
-| @storybook/web-components             | storybook web-components renderer                                                             | https://github.com/storybookjs/storybook/tree/next/code/renderers/web-components       |
-| @storybook/web-components-vite        | storybook for web-components and vite: develop web components in isolation with hot reloading | https://github.com/storybookjs/storybook/tree/next/code/frameworks/web-components-vite |
-| @types/glob                           | TypeScript definitions for glob                                                               | https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/glob              |
-| @types/node                           | TypeScript definitions for node                                                               | https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/node              |
-| @types/react                          | TypeScript definitions for react                                                              | https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react             |
-| @types/react-dom                      | TypeScript definitions for react-dom                                                          | https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom         |
-| @typescript-eslint/eslint-plugin      | TypeScript support for ESLint                                                                 | https://github.com/typescript-eslint/typescript-eslint                                 |
-| @typescript-eslint/parser             | TypeScript support for ESLint                                                                 | https://github.com/typescript-eslint/typescript-eslint                                 |
-| @web/test-runner                      | test runner for web applications                                                              | https://github.com/modernweb-dev/web/tree/master/packages/test-runner                  |
-| @web/test-runner-commands             | web test runner commands                                                                      | https://github.com/modernweb-dev/web/tree/master/packages/test-runner-commands         |
-| @web/test-runner-playwright           | playwright browser launcher for Web Test Runner                                               | https://github.com/modernweb-dev/web/tree/master/packages/test-runner-playwright       |
-| @web/test-runner-puppeteer            | puppeteer browser launcher for Web Test Runner                                                | https://github.com/modernweb-dev/web/tree/master/packages/test-runner-puppeteer        |
-| chromatic                             | automate visual testing across browsers and gather UI feedback                                | https://www.chromatic.com/                                                             |
-| date-fns                              | modern JavaScript date utility library                                                        | https://github.com/date-fns/date-fns#readme                                            |
-| eslint                                | linter for JavaScript                                                                         | https://github.com/eslint/eslint                                                       |
-| glob                                  | match files using the patterns the shell uses                                                 | https://github.com/isaacs/node-glob#readme                                             |
-| husky                                 | easily add git hooks                                                                          | https://github.com/typicode/husky                                                      |
-| lint-staged                           | lint files staged by git                                                                      | https://github.com/okonet/lint-staged#readme                                           |
-| madge                                 | create graphs from module dependencies                                                        | https://github.com/pahen/madge                                                         |
-| npm-run-all                           | run npm-scripts in parallel or sequential                                                     | https://github.com/mysticatea/npm-run-all                                              |
-| playwright                            | a high-level API to automate web browsers                                                     | https://playwright.dev                                                                 |
-| postcss                               | tool for transforming styles with JS plugins                                                  | https://postcss.org/                                                                   |
-| prettier                              | an opinionated code formatter                                                                 | https://prettier.io/                                                                   |
-| react                                 | JavaScript library for building user interfaces                                               | https://reactjs.org/                                                                   |
-| react-dom                             | React package for working with the DOM                                                        | https://reactjs.org/                                                                   |
-| sass                                  | pure JavaScript implementation of Sass                                                        | https://github.com/sass/dart-sass                                                      |
-| storybook                             | Storybook CLI                                                                                 | https://github.com/storybookjs/storybook/tree/next/code/lib/cli                        |
-| stylelint                             | CSS linter that helps you avoid errors and enforce conventions                                | https://stylelint.io/                                                                  |
-| ts-lit-plugin                         | Typescript plugin that adds type checking and code completion to lit-html                     | https://github.com/runem/lit-analyzer#readme                                           |
-| tsx                                   | TypeScript Execute (tsx): Node.js enhanced with esbuild to run TypeScript & ESM files         | https://github.com/esbuild-kit/tsx#readme                                              |
-| typescript                            | language for application scale JavaScript development                                         | https://www.typescriptlang.org/                                                        |
-| vite                                  | Native-ESM powered web dev build tool                                                         | https://github.com/vitejs/vite/tree/main/#readme                                       |
-| vite-plugin-dts                       | plugin that generates declaration files                                                       | https://github.com/qmhc/vite-plugin-dts#readme                                         |
-
-## Config files
-
-| File                               | Purpose                                | Docs                                                            |
-| ---------------------------------- | -------------------------------------- | --------------------------------------------------------------- |
-| .babelrc                           | base config for babel                  | https://babeljs.io/docs/en/config-files                         |
-| .editorconfig                      | coding style definitions               | https://editorconfig.org/                                       |
-| .eslintignore                      | files to ignore for ESLint             | https://eslint.org/docs/user-guide/configuring                  |
-| .eslintrc.json                     | config for ESLint                      | https://eslint.org/docs/user-guide/configuring                  |
-| .gitignore                         | files git should ignore                | https://git-scm.com/docs/gitignore                              |
-| .nvmrc                             | node version to use by nvm or asdf     | https://github.com/nvm-sh/nvm                                   |
-| .prettierignore                    | files to ignore for Prettier           | https://prettier.io/docs/en/ignore.html                         |
-| commitlint.config.js               | configuration for commitlint           | https://github.com/conventional-changelog/commitlint            |
-| custom-elements-manifest.config.js | custom config for codegen              | https://custom-elements-manifest.open-wc.org/analyzer/config/   |
-| renovate.json                      | configuration options for Renovate     | https://docs.renovatebot.com/configuration-options/             |
-| tsconfig.json                      | configurations for typeScript          | https://www.typescriptlang.org/docs/handbook/tsconfig-json.html |
-| vite.config.ts                     | configuration file for Vite            | https://vitejs.dev/config/                                      |
-| web-test-runner.config.js          | configuration file for Web test runner | https://modern-web.dev/docs/test-runner/cli-and-configuration/  |
-
-## Special Folders
-
-| File         | Purpose                                  |
-| ------------ | ---------------------------------------- |
-| ./ci         | contains skripts that are used by the CI |
-| ./.storybook | main configuration for storybook setup   |
-
-## Outputs
-
-| Folder            | Explanation                           |
-| ----------------- | ------------------------------------- |
-| ./dist/components | main output target for web-components |
-| ./dist/react      | output target for the react library   |
-| ./dist/storybook  | rendered static storybook site        |
-
-## Checks & monitoring
-
-### Git Guardian
-
-Git Guardian is activated for this repo: https://dashboard.gitguardian.com/
-
-### Code Coverage
-
-Codecoverage is evalauted with --coverage output via https://codecov.io/
-
-### Additional Code Checks
-
-Additional checks are done with https://www.deepcode.ai/. Login there to see the reports.
diff --git a/DEVELOPER.md b/docs/DEVELOPER.md
similarity index 84%
rename from DEVELOPER.md
rename to docs/DEVELOPER.md
index ccca430233..10c12f61e2 100644
--- a/DEVELOPER.md
+++ b/docs/DEVELOPER.md
@@ -29,9 +29,9 @@ Run `yarn lint --fix` to fix any automatically fixable lint issues and report th
 
 ## Running tests
 
-To run unit tests, run `yarn test`. This will run the full test suite with client side rendering
-and server side rendering with and without hydration.
-During development it is preferable to run `yarn test:csr`, which will just run the client side
+To run unit tests, run `yarn test`. This will run the full test suite with client-side rendering
+and server-side rendering with and without hydration.
+During development, it is preferable to run `yarn test:csr`, which will just run the client side
 rendering.
 
 ### Debugging with Visual Studio Code
@@ -57,7 +57,7 @@ Add the `--debug` param to enable breakpoint debugging and the detailed test rep
 
 ### Debugging with IntelliJ
 
-It is possible to debug tests and/or run them in isolation also with Intellij IDEA.
+It is possible to debug tests and/or run them in isolation also with IntelliJ IDEA.
 From the title bar, open the 'Run' menu, then select 'Edit configuration'.
 Create and save a new `npm` configuration with the following parameters,
 possibly replacing `test:csr` with either `test:ssr:hydrated` or `test:ssr:non-hydrated` to test SSR:
@@ -73,10 +73,16 @@ Add the `--debug` param to enable breakpoint debugging and the detailed test rep
 
 To start the showcase, run `yarn start`. This will run the devserver in watch mode.
 
+## Commits
+
+Commits have to follow the `Conventional Commits` standard ([https://www.conventionalcommits.org/](https://www.conventionalcommits.org/)).
+
+To make sure developers properly style their commit messages, we use `husky` together with `commit-lint`.
+
 ## Well Known Issues
 
 ### `playwright`: `browserType.launch: Executable doesn't exist at ...`
 
-Most likely two versions of playwright are installed. Try running
+Most likely two versions of Playwright are installed. Try running
 `yarn remove playwright @web/test-runner-playwright`, followed by
 `yarn add -ED playwright @web/test-runner-playwright` and check if the problem is resolved.
diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md
new file mode 100644
index 0000000000..82eaff0a9a
--- /dev/null
+++ b/docs/GETTING_STARTED.md
@@ -0,0 +1,290 @@
+# Getting Started
+
+Basic steps to integrate the lyne components into your project.
+
+Select your technology to get started.
+
+<details>
+  <summary>Plain Javascript</summary>
+
+1. Install the `@sbb-esta/lyne-components` package:
+
+   ```sh
+   npm install --save @sbb-esta/lyne-components
+   ```
+
+   or, if using yarn:
+
+   ```sh
+   yarn add @sbb-esta/lyne-components
+   ```
+
+2. Including typography is required to apply all SBB styles to your application.
+
+   ```css
+   @import 'node_modules/@sbb-esta/lyne-components/typography.css';
+   ```
+
+3. Import the desired element and add it to globalThis:
+
+   ```ts
+   import { SbbButtonElement } from '@sbb-esta/lyne-components/button.js';
+
+   globalThis.SbbButtonElement = SbbButtonElement;
+   ```
+
+</details>
+
+<details>
+  <summary>Angular</summary>
+
+> ⓘ We will soonish provide a Lyne Angular Wrapper which helps to use lyne components in Angular.
+> However, it's already possible to use Lyne Components in Angular.
+
+1. Install Angular CLI, see [Angular CLI documentation](https://cli.angular.io/)
+2. Install the `@sbb-esta/lyne-components` package:
+
+   ```sh
+   npm install --save @sbb-esta/lyne-components
+   ```
+
+   or, if using yarn:
+
+   ```sh
+   yarn add @sbb-esta/lyne-components
+   ```
+
+3. Including typography is required to apply all SBB styles to your application. That is doable by editing the `styles.(s)css`:
+
+   ```css
+   @import 'node_modules/@sbb-esta/lyne-components/typography.css';
+   ```
+
+   or editing your `angular.json`:
+
+   ```json
+     ...
+     "styles": [
+       "src/styles.scss",
+       "node_modules/@sbb-esta/lyne-components/typography.css"
+     ],
+     ...
+   ```
+
+4. In order to use web components with Angular, you have to import `CUSTOM_ELEMENT_SCHEMA` from the `@angular/core` package.
+
+### Example app
+
+```ts
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+
+import '@sbb-esta/lyne-components/button.js';
+
+@Component({
+  selector: 'my-app',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: ` <sbb-button>Lorem ipsum</sbb-button> `,
+})
+export class App {}
+
+bootstrapApplication(App).catch((err) => console.error(err));
+```
+
+</details>
+
+<details>
+  <summary>React/Next.js</summary>
+
+1. Prepare a React and Next.js setup.
+2. Install the `@sbb-esta/lyne-components-react` package:
+
+   ```sh
+   npm install --save @sbb-esta/lyne-components-react
+   ```
+
+   or, if using yarn:
+
+   ```sh
+   yarn add @sbb-esta/lyne-components-react
+   ```
+
+3. Including typography globally is required to apply all SBB styles to your application.
+
+   ```css
+   @import '~@sbb-esta/lyne-components/typography.css';
+   ```
+
+4. Enhance the `transpilePackages` array in Next.Js config.
+
+   ```js
+   module.exports = {
+     ...,
+     transpilePackages: [
+       '@sbb-esta/lyne-components-react',
+       '@sbb-esta/lyne-components',
+       '@lit/react',
+       '@lit/reactive-element',
+       'lit',
+       'lit-html',
+       'lit-element',
+     ],
+   }
+   ```
+
+5. (Optional) To activate Server Side Rendering with Declarative Shadow DOM, you have to install the `@lit-labs/nextjs` package and use the method `withLitSSR()`:
+
+   ```js
+   const withLitSSR = require('@lit-labs/nextjs')({
+     addDeclarativeShadowDomPolyfill: true,
+   });
+
+   module.exports = withLitSSR({
+       ...,
+       transpilePackages: [
+         '@sbb-esta/lyne-components',
+         '@sbb-esta/lyne-components-react',
+         '@sbb-esta/lyne-design-tokens',
+         '@lit-labs/nextjs',
+         '@lit-labs/ssr',
+         '@lit-labs/ssr-react',
+         '@lit/react',
+         '@lit/reactive-element',
+         'lit',
+         'lit-element',
+         'lit-html',
+       ],
+     });
+   ```
+
+6. Import and use lyne component:
+
+   ```tsx
+   import { SbbButton } from '@sbb-esta/lyne-components-react/button';
+
+   export default function MyComponent() {
+     return <SbbButton onClick={() => {}}></SbbButton>;
+   }
+   ```
+
+   Whenever e.g. types are needed, they can be imported directly from the `@sbb-esta/lyne-components` package:
+
+   ```tsx
+   import type { SbbButtonSize } from '@sbb-esta/lyne-components/button.js';
+   import { SbbButton } from '@sbb-esta/lyne-components-react/button';
+
+   export default function MyComponent() {
+     const size: SbbButtonSize = 'm';
+     return <SbbButton onClick={() => {}} size={size}></SbbButton>;
+   }
+   ```
+
+</details>
+
+## Components
+
+Components documentation is available on [digital.sbb.ch](https://digital.sbb.ch)
+and on [storybook](https://lyne-storybook.app.sbb.ch).
+
+## Styles
+
+### Full Font
+
+The `typography.css` file only contains a subset of the `SBBWeb` fonts that do not contain all characters (e.g. the French "œ").
+For including the full fontset, we provide the `fullfont.css` file which can be added after the `typography.css` file.
+
+```css
+@import '@sbb-esta/lyne-components/typography.css';
+@import '@sbb-esta/lyne-components/fullfont.css';
+```
+
+### Design Tokens
+
+The `@sbb-esta/lyne-components` package provides the CSS variable design tokens
+from `@sbb-esta/lyne-design-tokens` in the `typography.css`.
+
+> If you have to use design tokens within a javascript context,
+> please also add `@sbb-esta/lyne-design-tokens` package to your project.
+
+Please check `node_modules/@sbb-esta/lyne-components/typography.css` for available design tokens.
+
+#### How to work with design tokens
+
+Designers are using design tokens in Figma from which developers can get the name to be used.
+Some design tokens are responsive: they change their value depending on the current breakpoint.
+
+> Whenever a design token ends with `-{breakpoint}`, e.g. `--sbb-spacing-responsive-s-zero`,
+> There is a corresponding responsive CSS variable without the `-breakpoint` suffix,
+> e.g. `sbb-spacing-responsive-s` which should be used.
+
+### SASS Mixins
+
+Lyne Components provides various SASS mixins which can be used by consumers.
+For available SASS mixins, check [SASS Mixins](https://github.com/lyne-design-system/lyne-components/tree/main/src/components/core/styles/mixins).
+
+```scss
+@use '@sbb-esta/lyne-components' as sbb;
+
+.my-class {
+  @include sbb.grid-base;
+}
+```
+
+### CSS Classes
+
+As a base rule, styles are included in components. However, there are a few exceptions
+where we provide CSS classes to consumers:
+
+- [Layout styles](https://lyne-storybook.app.sbb.ch/?path=/docs/styles-layout--docs)
+- [List styles](https://lyne-storybook.app.sbb.ch/?path=/docs/styles-list--docs)
+- [Scrollbar styles](https://lyne-storybook.app.sbb.ch/?path=/docs/styles-scrollbar--docs)
+- [Text styles](https://lyne-storybook.app.sbb.ch/?path=/docs/styles-typography--docs)
+
+### Manipulating styles of components
+
+In general, the styles of components should not be changed.
+However, some specific cases may require overriding some styles of a component.
+For these cases, you can use the CSS variables of a component. Please check a specific component for available CSS variables.
+
+> IMPORTANT: CSS variable names which are not documented in the component docs section, can be changed at any time.
+
+Please reach out to the Lyne team if you think a component needs a new variant.
+
+### Animations
+
+Generally, animations are part of the design and should not be suppressed.
+However, e.g. for testing purposes, it makes sense to deactivate them.
+
+Add the `sbb-disable-animation` CSS class to disable animations and transition effects for the element and all its children.
+
+Sometimes, you might need to disable animations only for a specific element.
+To achieve that, you can add the `sbb-disable-animation-locally` class or re-enable animations using the `sbb-enable-animation` CSS class.
+
+```html
+<sbb-component class="sbb-disable-animation-locally">
+  <!-- animations will play -->
+</sbb-component>
+
+<!-- Or  alternatively-->
+
+<sbb-component class="sbb-disable-animation">
+  <sbb-component class="sbb-enable-animation">
+    <!-- animations will play -->
+  </sbb-component>
+</sbb-component>
+```
+
+### Units
+
+All our tokens and components use `rem` as size unit.
+We strongly recommend using the `rem` unit to guarantee consistent scaling
+when font size changes in browsers.
+
+### Stacking
+
+As we can't use popover API yet, stacking of overlay context is done manually.
+However, this can interfere with the z-index of your components.
+Therefore, every overlay component provides a CSS variable to override its z-index.
+Additionally, there is the global CSS variable `--sbb-overlay-default-z-index` that has a default z-index of 1000.
+With this, developers have the chance to change the z-index either globally or on component level.
diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index 7e1b85dc6f..0000000000
--- a/docs/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Docs
-
-## 👩🏼‍💻 Developing
-
-See [DEVELOP.md](./DEVELOP.md) for development documentation.
-
-## 🤖 CI/CD
-
-You can find docs about our CI/CD integration in [CICD.md](./CICD.md).
-
-## 📙 Terminology
-
-Abbreviations, non-obvious terms and our common vocabulary/language used throughout the Lyne Design System can be found in [TERMINOLOGY.md](./TERMINOLOGY.md).
-
-## 🌈 Vision
-
-To get an overview of Lyne Design System and what it tries to achieve read our [VISION.md](./VISION.md).
diff --git a/REVIEW.md b/docs/REVIEW.md
similarity index 92%
rename from REVIEW.md
rename to docs/REVIEW.md
index 4228d7bc32..502040af2c 100644
--- a/REVIEW.md
+++ b/docs/REVIEW.md
@@ -25,10 +25,10 @@ For progress indication, we use labels to indicate a specific expectation:
 
 ## Review Checks
 
-This document shows what should be done during review process.
+This document shows what should be done during the review process.
 
 A basic review only contains the entries which have an exclamation mark (⚠️).
-Depending on circumstances, additional options might be considered.
+Depending on the circumstances, additional options might be considered.
 
 #### General
 
@@ -38,7 +38,7 @@ Depending on circumstances, additional options might be considered.
 
 #### Architecture
 
-- Reusability for internal usages, is the component flexible enough?
+- Re-usability for internal usages, is the component flexible enough?
 - Is the API consistent with existing (finalized) components?
 - Is the meaning of newly added properties and public methods understandable?
 - Can the main content be slotted (achieve flexibility)?
@@ -73,7 +73,7 @@ Depending on 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 consistent as possible through all stories?
+- Are the controls working and as consistent as possible through all stories?
 - Are the stories working on chromatic and give a value?
 - Are all texts written in English language?
 
@@ -83,13 +83,13 @@ Depending on circumstances, additional options might be considered.
 - ⚠️ Is every value from a design token and if not, well documented?
 - Are modern style properties used (e.g. gap, inset, margin-block, padding-inline, etc.)?
 - Are there as little style definitions as possible (e.g. using gap instead of exceptions for last-child, etc.)?
-- Do the css class names follow BEM and have sbb prefix?
+- Do the css class names follow BEM and have the sbb prefix?
 - Does the visual output match the Figma spec (also confirmed with UX)?
 
 #### Accessibility
 
 - Are the components semantically correct (aria attributes, native elements, etc.)?
-- Check if the developer has tested all screen readers?
+- Check if the developer has tested all screen readers.
 - Do some smoke tests.
 - Is Windows high contrast mode supported well?
 - Does keyboard navigation work and is the focused element visible (:focus-visible)?
diff --git a/docs/STATES.md b/docs/STATES.md
deleted file mode 100644
index 54dbb09df8..0000000000
--- a/docs/STATES.md
+++ /dev/null
@@ -1,49 +0,0 @@
-# States
-
-Components can have various states. We want to document which states exist and their definitions.
-
-### Normal
-
-The state when no other state applies.
-
-### Hover
-
-State when mouse is hovering over the component. Does not exist on touch devices.
-Should visually highlight the component.
-For accessibility compliance, the visual highlight must not be reduced to color, but should either include translation, cursor/pointer change or other effects that make it understandable for visually impaired consumers.
-
-### Focused
-
-State when component or element has focus via keyboard.
-Should provide an outline when component has focus (via keyboard).
-
-### Active
-
-State when component or element is active and not a form element.
-(e.g. an active tab in a tab group, an expanded accordion panel, a pressed button)
-Should visually highlight the component.
-For accessibility compliance, the visual highlight must not be reduced to color, but should either include translation, cursor/pointer change or other effects that make it understandable for visually impaired consumers.
-
-### Checked
-
-State when form component or element is checked.
-(e.g. radio-button, checkbox)
-Should visually indicate its state.
-Indeterminate is a substate of this.
-
-### Disabled
-
-State when component or element is disabled and cannot be used or selected.
-Should prevent focus or selection by keyboard or mouse.
-Should visually indicate its state.
-
-### Readonly
-
-State when form component or element is readonly.
-Must be accessible via keyboard and mouse but content/selection cannot be changed.
-Should visually indicate its state.
-
-### Error
-
-State when form component or element is in an error state.
-Should visually and textually indicate the error state and error type.
diff --git a/docs/TERMINOLOGY.md b/docs/TERMINOLOGY.md
deleted file mode 100644
index f65c639107..0000000000
--- a/docs/TERMINOLOGY.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Terminology
-
-Our common [terminology/vocabulary](https://github.com/lyne-design-system/lyne/blob/main/docs/TERMINOLOGY.md) used throughout the Lyne Design System is defined centrally in the Lyne repository.
diff --git a/docs/VISION.md b/docs/VISION.md
index 03ee2800a1..f7b9d26582 100644
--- a/docs/VISION.md
+++ b/docs/VISION.md
@@ -1,3 +1,98 @@
-# Vision
+# Lyne Design System — Vision
 
-Read our [vision](https://github.com/lyne-design-system/lyne/blob/main/docs/VISION.md) of the Lyne Design System in the Lyne repository.
+## What _Lyne_ is and why we need it
+
+The _Lyne Design System_ is a holistic approach towards a consistent, maintainable, cross-company design language for all SBB digital products/services for a better common understanding between stakeholders, designers and developers.
+
+## What _Lyne_ consists of
+
+The _Lyne Design System_ is based on an intuitive, unique — the Single Source of Truth — referential resource, including shared and well-documented guidelines, processes and vocabulary, design decisions (so-called Design Tokens), as well as centralized, vendor and framework-agnostic basic building blocks (Lyne Components).
+
+## What _Lyne_ does
+
+The _Lyne Design System_ not only enables an optimized collaboration and integration workflow between the Lyne team and consumers of _Lyne Design System_ but also accelerates the creation and development process (time to market) in a sustainable, maintainable, and long-term committed fashion.
+
+## _Lyne_'s advantages and the resulting (→) chances
+
+- One language/terminology →
+  - Better understanding
+  - Clearer communication
+  - Cross-company design language
+  - Reducing the knowledge gap
+  - Iterating faster
+- Single Source of Truth (SSoT) →
+  - Central knowledge collection
+  - Easy onboarding
+  - Empowerment
+  - Reducing the knowledge gap
+- Efficient & optimized collaboration →
+  - Team member happiness (PO, UX, DevOps, Frontend, Backend)
+  - Developer Experience of (component) consumers
+  - Clear feedback/Review mechanisms
+  - Iterating faster
+- Makes things easier →
+  - Team member happiness (PO, UX, DevOps, Frontend, Backend)
+- Consolidation →
+  - Optimized patterns
+  - Optimized code
+- Consistency →
+  - Consistent design within the SBB → One SBB
+  - User Experience
+  - Design cohesiveness
+- Modular/flexible →
+  - Maintainability
+- Reusable →
+  - Faster implementation of projects (time to market)
+  - Cross-platform usage and re-usability
+- Technology/tool agnostic →
+  - Exchangeable
+  - Allows growth
+  - No vendor lock-in
+  - Faster implementation of projects (time to market)
+- Well tested →
+  - Better QA
+- Accessible →
+  - Built-in accessibility on module level
+- Measurable →
+  - Data-driven decisions
+- Long-term focus →
+  - Sustainability
+  - Commitment
+
+## Potential which could be unlocked thanks to _Lyne_
+
+- Better understanding
+- Clearer communication
+- Cross-company design language
+- Iterating faster
+- Central knowledge collection
+- Easy on-boarding
+- Empowerment
+- Reducing the knowledge gap
+- Team member happiness (PO, UX, DevOps, Frontend, Backend)
+- Developer Experience (DX) of (component) consumers
+- Optimized patterns/code through consolidation
+- Cross-platform usage and re-usability
+- Clear feedback/review mechanisms
+- Consistent design throughout the SBB → One SBB
+- Maintainability
+- Faster implementation of projects (time to market)
+- Allows growth
+- No vendor lock in
+- Better QA
+- Built-in a11y on component level for everybody
+- Data-driven decisions
+- Sustainability
+- Commitment
+
+## Risks
+
+General risks of a Design System that we always need to face and be aware of:
+
+- Single Point of Failure (SPoF)
+- Fear of harming the designers' creativity
+- Governance difficulties
+  - Design System rejection/denial
+  - Missing adoption
+- Documentation — if not well enough documented
+- Funding difficulties
diff --git a/package.json b/package.json
index 7993efacaf..ed87b02935 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-components",
-  "version": "0.50.1",
+  "version": "0.50.2",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -42,7 +42,7 @@
     "lint:js": "eslint \"**/*.js\"",
     "lint:yml": "eslint \"**/*.{yml,yaml}\"",
     "lint:styles": "stylelint \"**/*.scss\"",
-    "lint:lit": "yarn lit-analyzer \"src/components/**/*.ts\"",
+    "lint:lit": "yarn lit-analyzer \"src/**/*.ts\"",
     "lint:circular-imports": "madge --circular --extensions ts ./src",
     "lint:tsc": "npm-run-all --sequential lint:tsc:*",
     "lint:tsc:components": "tsc --noEmit --project src/components/tsconfig.json",
@@ -59,33 +59,33 @@
     "lit": "3.1.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.2.2",
+    "@commitlint/cli": "19.3.0",
     "@commitlint/config-conventional": "19.2.2",
     "@custom-elements-manifest/analyzer": "0.9.4",
     "@custom-elements-manifest/to-markdown": "0.1.0",
     "@eslint/eslintrc": "3.0.2",
-    "@eslint/js": "9.0.0",
+    "@eslint/js": "9.1.1",
     "@lit-labs/testing": "0.2.3",
     "@lit/react": "1.0.4",
     "@open-wc/lit-helpers": "0.7.0",
     "@open-wc/testing": "4.0.0",
-    "@sbb-esta/lyne-design-tokens": "0.5.0",
-    "@storybook/addon-a11y": "8.0.8",
-    "@storybook/addon-actions": "8.0.8",
-    "@storybook/addon-essentials": "8.0.8",
-    "@storybook/addon-interactions": "8.0.8",
-    "@storybook/addon-links": "8.0.8",
-    "@storybook/blocks": "8.0.8",
-    "@storybook/test": "8.0.8",
-    "@storybook/web-components": "8.0.8",
-    "@storybook/web-components-vite": "8.0.8",
+    "@sbb-esta/lyne-design-tokens": "0.6.0",
+    "@storybook/addon-a11y": "8.0.9",
+    "@storybook/addon-actions": "8.0.9",
+    "@storybook/addon-essentials": "8.0.9",
+    "@storybook/addon-interactions": "8.0.9",
+    "@storybook/addon-links": "8.0.9",
+    "@storybook/blocks": "8.0.9",
+    "@storybook/test": "8.0.9",
+    "@storybook/web-components": "8.0.9",
+    "@storybook/web-components-vite": "8.0.9",
     "@types/glob": "8.1.0",
     "@types/mocha": "10.0.6",
     "@types/node": "20.12.7",
     "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
-    "@typescript-eslint/eslint-plugin": "7.7.0",
-    "@typescript-eslint/parser": "7.7.0",
+    "@typescript-eslint/eslint-plugin": "7.7.1",
+    "@typescript-eslint/parser": "7.7.1",
     "@web/test-runner": "0.18.1",
     "@web/test-runner-commands": "0.9.0",
     "@web/test-runner-playwright": "0.11.0",
@@ -94,7 +94,7 @@
     "custom-elements-manifest": "2.0.0",
     "date-fns": "3.6.0",
     "esbuild-sass-plugin": "3.2.0",
-    "eslint": "9.0.0",
+    "eslint": "9.1.1",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import-x": "0.5.0",
@@ -117,17 +117,17 @@
     "rollup-plugin-postcss-lit": "2.1.0",
     "sass": "1.75.0",
     "sinon": "17.0.1",
-    "storybook": "8.0.8",
-    "stylelint": "16.3.1",
+    "storybook": "8.0.9",
+    "stylelint": "16.4.0",
     "stylelint-config-prettier-scss": "1.0.0",
     "stylelint-config-standard-scss": "13.1.0",
     "stylelint-scss": "6.2.1",
     "ts-lit-plugin": "2.0.2",
     "tsx": "4.7.2",
     "typescript": "5.4.5",
-    "typescript-eslint": "7.7.0",
-    "vite": "5.2.9",
-    "vite-plugin-dts": "3.8.3"
+    "typescript-eslint": "7.7.1",
+    "vite": "5.2.10",
+    "vite-plugin-dts": "3.9.0"
   },
   "resolutions": {
     "@types/node": "20.12.7",
diff --git a/scripts/chromatic-stories-generator.ts b/scripts/chromatic-stories-generator.ts
index e6d9e004e6..f2b15b9840 100644
--- a/scripts/chromatic-stories-generator.ts
+++ b/scripts/chromatic-stories-generator.ts
@@ -1,8 +1,9 @@
+/* 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 * as ts from 'typescript';
+import ts from 'typescript';
 
 const chromaticFile = join(
   dirname(fileURLToPath(import.meta.url)),
@@ -44,7 +45,10 @@ function extractParameters(sourceFile: ts.SourceFile): {
 
         return {
           parameters: Function(
-            `return ${parameters.initializer.getText().replace(/\w*\.events\.\w*/gm, '"dummy"')}`,
+            `return ${parameters.initializer
+              .getText()
+              .replace(': StoryContext', '')
+              .replace(/\w*\.events\.\w*/gm, '"dummy"')}`,
           )() as Record<string, any>,
           title: title.initializer.getText().replaceAll("'", ''),
         };
@@ -101,13 +105,16 @@ import { html } from 'lit';
 
 const meta: Meta = {
   decorators: [
-    (story) => html\` <div ${fixedHeightStyle}>\${story()}</div> \`,
+    (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}',
 };
diff --git a/scripts/migrate-ssr-e2e.ts b/scripts/migrate-ssr-e2e.ts
index 48faf0b77e..a3e1e8a6c3 100644
--- a/scripts/migrate-ssr-e2e.ts
+++ b/scripts/migrate-ssr-e2e.ts
@@ -1,10 +1,11 @@
+/* eslint-disable import-x/default, import-x/no-named-as-default-member */
 import { readFileSync, writeFileSync } from 'fs';
 import { basename, dirname, join, relative } from 'path';
 
 import * as glob from 'glob';
 // eslint-disable-next-line @typescript-eslint/naming-convention
 import MagicString from 'magic-string';
-import * as ts from 'typescript';
+import ts from 'typescript';
 
 /*
  * Convert e2e test files to use the lit fixture, to enable ssr testing.
diff --git a/scripts/migrate-toggle-data-entry.ts b/scripts/migrate-toggle-data-entry.ts
index 16a34e8bc9..e47405b523 100644
--- a/scripts/migrate-toggle-data-entry.ts
+++ b/scripts/migrate-toggle-data-entry.ts
@@ -1,9 +1,10 @@
+/* eslint-disable import-x/default, import-x/no-named-as-default-member */
 import { readFileSync, writeFileSync } from 'fs';
 
 import * as glob from 'glob';
 // eslint-disable-next-line @typescript-eslint/naming-convention
 import MagicString from 'magic-string';
-import * as ts from 'typescript';
+import ts from 'typescript';
 
 function* iterate(node: ts.Node): Generator<ts.Node, void, unknown> {
   yield node;
diff --git a/src/components/accordion/accordion.e2e.ts b/src/components/accordion/accordion.e2e.ts
index 8b62d5f290..f642f79519 100644
--- a/src/components/accordion/accordion.e2e.ts
+++ b/src/components/accordion/accordion.e2e.ts
@@ -19,15 +19,15 @@ describe(`sbb-accordion ${fixture.name}`, () => {
     element = await fixture(
       html`
         <sbb-accordion title-level="4">
-          <sbb-expansion-panel id="panel-1" disable-animation title-level=${ssrTitleLevel}>
+          <sbb-expansion-panel id="panel-1" title-level=${ssrTitleLevel}>
             <sbb-expansion-panel-header id="header-1">Header 1</sbb-expansion-panel-header>
             <sbb-expansion-panel-content>Content 1</sbb-expansion-panel-content>
           </sbb-expansion-panel>
-          <sbb-expansion-panel id="panel-2" disable-animation title-level=${ssrTitleLevel}>
+          <sbb-expansion-panel id="panel-2" title-level=${ssrTitleLevel}>
             <sbb-expansion-panel-header id="header-2">Header 2</sbb-expansion-panel-header>
             <sbb-expansion-panel-content>Content 2</sbb-expansion-panel-content>
           </sbb-expansion-panel>
-          <sbb-expansion-panel id="panel-3" disable-animation title-level=${ssrTitleLevel}>
+          <sbb-expansion-panel id="panel-3" title-level=${ssrTitleLevel}>
             <sbb-expansion-panel-header id="header-3">Header 3</sbb-expansion-panel-header>
             <sbb-expansion-panel-content>Content 3</sbb-expansion-panel-content>
           </sbb-expansion-panel>
diff --git a/src/components/accordion/accordion.stories.ts b/src/components/accordion/accordion.stories.ts
index f43274ef23..6e72ca02d8 100644
--- a/src/components/accordion/accordion.stories.ts
+++ b/src/components/accordion/accordion.stories.ts
@@ -11,7 +11,6 @@ import type {
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
-import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
 import { SbbExpansionPanelElement } from '../expansion-panel.js';
@@ -34,15 +33,6 @@ const multi: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-  table: {
-    category: 'Accordion',
-  },
-};
-
 const titleLevel: InputType = {
   control: {
     type: 'inline-radio',
@@ -120,7 +110,6 @@ const contentText: InputType = {
 const defaultArgTypes: ArgTypes = {
   numberOfPanels,
   multi,
-  'disable-animation': disableAnimation,
   'title-level': titleLevel,
   color,
   expanded,
@@ -134,9 +123,8 @@ const defaultArgTypes: ArgTypes = {
 const defaultArgs: Args = {
   numberOfPanels: 3,
   multi: false,
-  'disable-animation': false,
-  'title-level': titleLevel.options[2],
-  color: color.options[0],
+  'title-level': titleLevel.options![2],
+  color: color.options![0],
   expanded: false,
   borderless: false,
   disabled: false,
@@ -188,7 +176,7 @@ export const Default: StoryObj = {
 export const Milk: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[1] },
+  args: { ...defaultArgs, color: color.options![1] },
 };
 
 export const Borderless: StoryObj = {
@@ -206,7 +194,7 @@ export const Disabled: StoryObj = {
 export const MilkBorderless: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[1], borderless: true },
+  args: { ...defaultArgs, color: color.options![1], borderless: true },
 };
 
 export const WithIcon: StoryObj = {
@@ -227,27 +215,11 @@ export const Multi: StoryObj = {
   args: { ...defaultArgs, multi: true },
 };
 
-export const NoAnimation: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, 'disable-animation': true },
-};
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.borderless ? '#bdbdbd' : 'var(--sbb-color-white)',
-});
-
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: (context: StoryContext) =>
+      context.args.borderless ? 'var(--sbb-color-cement)' : 'var(--sbb-color-white)',
     actions: {
       handles: [
         SbbExpansionPanelElement.events.willOpen,
diff --git a/src/components/accordion/accordion.ts b/src/components/accordion/accordion.ts
index 5dee7a94fb..16160f08b4 100644
--- a/src/components/accordion/accordion.ts
+++ b/src/components/accordion/accordion.ts
@@ -32,13 +32,6 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
   }
   private _titleLevel: SbbTitleLevel | null = null;
 
-  /**
-   * Whether the animation should be disabled.
-   * @controls SbbExpansionPanelElement.disableAnimation
-   */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /** Whether more than one sbb-expansion-panel can be open at the same time. */
   @property({ type: Boolean })
   public set multi(value: boolean) {
@@ -98,7 +91,6 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
     this._expansionPanels.forEach(
       (panel: SbbExpansionPanelElement, index: number, array: SbbExpansionPanelElement[]) => {
         panel.titleLevel = this.titleLevel;
-        panel.disableAnimation = this.disableAnimation;
         panel.toggleAttribute('data-accordion-first', index === 0);
         panel.toggleAttribute('data-accordion-last', index === array.length - 1);
       },
diff --git a/src/components/accordion/readme.md b/src/components/accordion/readme.md
index c9e0e9558c..b480fd51e4 100644
--- a/src/components/accordion/readme.md
+++ b/src/components/accordion/readme.md
@@ -43,11 +43,10 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                    | Default | Description                                                                 |
-| ------------------ | ------------------- | ------- | ----------------------- | ------- | --------------------------------------------------------------------------- |
-| `titleLevel`       | `title-level`       | public  | `SbbTitleLevel \| null` | `null`  | The heading level for the sbb-expansion-panel-headers within the component. |
-| `disableAnimation` | `disable-animation` | public  | `boolean`               | `false` | Whether the animation should be disabled.                                   |
-| `multi`            | `multi`             | public  | `boolean`               | `false` | Whether more than one sbb-expansion-panel can be open at the same time.     |
+| Name         | Attribute     | Privacy | Type                    | Default | Description                                                                 |
+| ------------ | ------------- | ------- | ----------------------- | ------- | --------------------------------------------------------------------------- |
+| `titleLevel` | `title-level` | public  | `SbbTitleLevel \| null` | `null`  | The heading level for the sbb-expansion-panel-headers within the component. |
+| `multi`      | `multi`       | public  | `boolean`               | `false` | Whether more than one sbb-expansion-panel can be open at the same time.     |
 
 ## Slots
 
diff --git a/src/components/action-group/action-group.spec.ts b/src/components/action-group/action-group.spec.ts
index 4f17bee023..8c0631e2c2 100644
--- a/src/components/action-group/action-group.spec.ts
+++ b/src/components/action-group/action-group.spec.ts
@@ -59,7 +59,7 @@ describe(`sbb-action-group`, () => {
       expect(assertButtons(root, (b) => b.size === 'l')).to.be.ok;
     });
 
-    it('should sync button-size property with sbb-button', async () => {
+    it('should sync button-size="m" property with sbb-button', async () => {
       const root = (await fixture(html`
         <sbb-action-group align-group="start" orientation="horizontal" button-size="m">
           <sbb-secondary-button>Button</sbb-secondary-button>
@@ -74,6 +74,21 @@ describe(`sbb-action-group`, () => {
       expect(assertButtons(root, (b) => b.size === 'm')).to.be.ok;
     });
 
+    it('should sync button-size="s" property with sbb-button', async () => {
+      const root = (await fixture(html`
+        <sbb-action-group align-group="start" orientation="horizontal" button-size="s">
+          <sbb-secondary-button>Button</sbb-secondary-button>
+          <sbb-block-link
+            icon-name="chevron-small-left-small"
+            href="https://github.com/lyne-design-system/lyne-components"
+          >
+            Link
+          </sbb-block-link>
+        </sbb-action-group>
+      `)) as SbbActionGroupElement;
+      expect(assertButtons(root, (b) => b.size === 's')).to.be.ok;
+    });
+
     it('should sync link-size property with sbb-link', async () => {
       const root = (await fixture(html`
         <sbb-action-group align-group="start" orientation="horizontal" link-size="s">
diff --git a/src/components/action-group/action-group.stories.ts b/src/components/action-group/action-group.stories.ts
index 86898b820e..8f2e5c1e60 100644
--- a/src/components/action-group/action-group.stories.ts
+++ b/src/components/action-group/action-group.stories.ts
@@ -3,7 +3,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } 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';
 
@@ -95,7 +94,7 @@ const buttonSize: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['l', 'm'],
+  options: ['l', 'm', 's'],
 };
 
 const linkSize: InputType = {
@@ -138,8 +137,8 @@ const basicArgs: Args = {
   'align-group': 'start',
   orientation: 'horizontal',
   'horizontal-from': 'unset',
-  'button-size': buttonSize.options[0],
-  'link-size': linkSize.options[0],
+  'button-size': buttonSize.options![0],
+  'link-size': linkSize.options![0],
 };
 
 const basicArgsVertical = {
@@ -152,6 +151,18 @@ const basicArgsVerticalFullWidth = {
   'align-group': 'stretch',
 };
 
+const basicArgsSizeS = {
+  ...basicArgs,
+  'button-size': buttonSize.options![2],
+  'link-size': linkSize.options![2],
+};
+
+const basicArgsVerticalSizeS = {
+  ...basicArgsVertical,
+  'button-size': buttonSize.options![2],
+  'link-size': linkSize.options![2],
+};
+
 export const HorizontalAllocation3_0_0: StoryObj = {
   render: CommonTemplateThreeElementsAllocation,
   argTypes: basicArgTypes,
@@ -266,18 +277,24 @@ export const VerticalToHorizontal3_0_0: StoryObj = {
   args: { ...basicArgsVertical, 'horizontal-from': 'medium' },
 };
 
+export const HorizontalAllocationSizeS3_0_0: StoryObj = {
+  render: CommonTemplateThreeElementsAllocation,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsSizeS },
+};
+
+export const VerticalAllocationSizeS3_0_0: StoryObj = {
+  render: CommonTemplateThreeElementsAllocation,
+  argTypes: basicArgTypes,
+  args: { ...basicArgsVerticalSizeS, 'align-group': 'start' },
+};
+
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style=${styleMap({ padding: '2rem' })}>${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/action-group/readme.md b/src/components/action-group/readme.md
index e06f47b3ce..5d4946f875 100644
--- a/src/components/action-group/readme.md
+++ b/src/components/action-group/readme.md
@@ -29,7 +29,7 @@ indicate the minimum breakpoint from which the orientation changes to `horizonta
 ### Button-size and link-size
 
 The two props `button-size` and `link-size` can be used to override, respectively, the size of the inner `sbb-button` and `sbb-block-link`.
-Default values are `l` for `sbb-button` and `m` for `sbb-block-link`.
+The accepted values are `s`, `m` and `l` (default) for `sbb-button` and `xs`, `s` and `m` (default) for `sbb-block-link`.
 
 ```html
 <sbb-action-group button-size="m" link-size="s">
diff --git a/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js b/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js
index 39e734a398..6bd037fc8f 100644
--- a/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js
+++ b/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js
@@ -8,6 +8,7 @@ snapshots["sbb-alert-group should render Dom"] =
   role="status"
 >
   <sbb-alert
+    animation="open"
     data-state="opening"
     href="https://www.sbb.ch"
     size="m"
@@ -113,3 +114,24 @@ snapshots["sbb-alert-group should render A11y tree Firefox"] =
 `;
 /* end snapshot sbb-alert-group should render A11y tree Firefox */
 
+snapshots["sbb-alert-group should render with slots"] = 
+`<sbb-alert-group
+  accessibility-title-level="3"
+  role="status"
+>
+  <span slot="accessibility-title">
+    Interruptions
+  </span>
+  <sbb-alert
+    animation="open"
+    data-state="opening"
+    href="https://www.sbb.ch"
+    size="m"
+    title-content="Interruption between Genève and Lausanne"
+  >
+    The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
+  </sbb-alert>
+</sbb-alert-group>
+`;
+/* end snapshot sbb-alert-group should render with slots */
+
diff --git a/src/components/alert/alert-group/alert-group.spec.ts b/src/components/alert/alert-group/alert-group.spec.ts
index fa1759d3ba..5748b50a67 100644
--- a/src/components/alert/alert-group/alert-group.spec.ts
+++ b/src/components/alert/alert-group/alert-group.spec.ts
@@ -49,18 +49,7 @@ describe(`sbb-alert-group`, () => {
       </sbb-alert-group>
     `);
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-alert-group accessibility-title-level='3' role='status'>
-          <span slot="accessibility-title">
-            Interruptions
-          </span>
-          <sbb-alert title-content='Interruption between Genève and Lausanne' href='https://www.sbb.ch' size="m" data-state="opening">
-            The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
-          </sbb-alert>
-        </sbb-alert-group>
-      `,
-    );
+    await expect(root).dom.to.be.equalSnapshot();
     expect(root).shadowDom.to.be.equal(
       `
         <div class="sbb-alert-group">
diff --git a/src/components/alert/alert-group/alert-group.stories.ts b/src/components/alert/alert-group/alert-group.stories.ts
index 31b6dbef8d..a2280316a7 100644
--- a/src/components/alert/alert-group/alert-group.stories.ts
+++ b/src/components/alert/alert-group/alert-group.stories.ts
@@ -3,7 +3,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } 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';
 
@@ -64,7 +63,7 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   'accessibility-title': 'Disruptions',
-  'accessibility-title-level': accessibilityTitleLevel.options[1],
+  'accessibility-title-level': accessibilityTitleLevel.options![1],
   role: 'status',
   'aria-live': undefined,
 };
@@ -76,17 +75,11 @@ export const multipleAlerts: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style=${styleMap({ padding: '2rem' })}>${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: [SbbAlertGroupElement.events.didDismissAlert, SbbAlertGroupElement.events.empty],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/alert/alert/alert.scss b/src/components/alert/alert/alert.scss
index 6933ec76a7..f7d86b1a43 100644
--- a/src/components/alert/alert/alert.scss
+++ b/src/components/alert/alert/alert.scss
@@ -17,8 +17,12 @@ $open-anim-opacity-to: 1;
   --sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);
   --sbb-alert-icon-size: #{sbb.px-to-rem-build(20)};
   --sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);
+  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
   --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
-  --sbb-alert-animation-duration: var(--sbb-animation-duration-6x);
+  --sbb-alert-animation-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-6x)
+  );
 
   @include sbb.mq($from: medium) {
     --sbb-alert-icon-size: #{sbb.px-to-rem-build(28)};
@@ -34,9 +38,13 @@ $open-anim-opacity-to: 1;
   display: block;
 }
 
-:host([disable-animation]) {
-  // To avoid flickering, we need 0 instead of 0.1ms here.
-  --sbb-alert-animation-duration: 0ms;
+:host([animation='none']) {
+  @include sbb.disable-animation;
+}
+
+:host([size='s']) {
+  --sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
+  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs);
 }
 
 :host([size='l']) {
@@ -132,7 +140,7 @@ $open-anim-opacity-to: 1;
 
 .sbb-alert__close-button {
   @include sbb.mq($from: small) {
-    margin-inline-start: var(--sbb-spacing-responsive-xxs);
+    margin-inline-start: var(--sbb-alert-close-icon-margin);
   }
 }
 
diff --git a/src/components/alert/alert/alert.spec.ts b/src/components/alert/alert/alert.spec.ts
index 3225cdab30..b6ba3f91d4 100644
--- a/src/components/alert/alert/alert.spec.ts
+++ b/src/components/alert/alert/alert.spec.ts
@@ -12,12 +12,12 @@ describe(`sbb-alert`, () => {
 
   it('should render default properties', async () => {
     element = await fixture(
-      html`<sbb-alert disable-animation title-content="Interruption">Alert content</sbb-alert>`,
+      html`<sbb-alert title-content="Interruption">Alert content</sbb-alert>`,
     );
 
     expect(element).dom.to.be.equal(
       `
-        <sbb-alert disable-animation title-content="Interruption" size="m" data-state="opening">
+        <sbb-alert title-content="Interruption" size="m" data-state="opening" animation="open">
            Alert content
         </sbb-alert>
       `,
@@ -32,7 +32,6 @@ describe(`sbb-alert`, () => {
         title-content="Interruption"
         title-level="2"
         size="l"
-        disable-animation
         icon-name="disruption"
         accessibility-label="label"
         href="https://www.sbb.ch"
@@ -49,12 +48,12 @@ describe(`sbb-alert`, () => {
           title-content="Interruption"
           title-level="2"
           size="l"
-          disable-animation
           icon-name="disruption"
           accessibility-label="label"
           href="https://www.sbb.ch"
           rel="noopener" target="_blank"
           link-content="Show much more"
+          animation="open"
           data-state="opening"
         >
            Alert content
@@ -66,7 +65,6 @@ describe(`sbb-alert`, () => {
 
   testA11yTreeSnapshot(html`
     <sbb-alert
-      disable-animation
       title-content="Interruption"
       href="https://www.sbb.ch"
       accessibility-label="test-a11y-label"
diff --git a/src/components/alert/alert/alert.stories.ts b/src/components/alert/alert/alert.stories.ts
index 1987c451a4..b165e3cc43 100644
--- a/src/components/alert/alert/alert.stories.ts
+++ b/src/components/alert/alert/alert.stories.ts
@@ -3,7 +3,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } 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';
 
@@ -58,7 +57,7 @@ const size: InputType = {
   control: {
     type: 'select',
   },
-  options: ['m', 'l'],
+  options: ['m', 'l', 's'],
 };
 
 const readonly: InputType = {
@@ -67,12 +66,6 @@ const readonly: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const iconName: InputType = {
   control: {
     type: 'text',
@@ -137,12 +130,18 @@ const accessibilityLabel: InputType = {
   },
 };
 
+const animation: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['open', 'none'],
+};
+
 const defaultArgTypes: ArgTypes = {
   'title-content': titleContent,
   'title-level': titleLevel,
   size,
   readonly,
-  'disable-animation': disableAnimation,
   'icon-name': iconName,
   'content-slot-text': contentSlotText,
   'link-content': linkContent,
@@ -150,22 +149,23 @@ const defaultArgTypes: ArgTypes = {
   target,
   rel,
   'accessibility-label': accessibilityLabel,
+  animation: animation,
 };
 
 const defaultArgs: Args = {
   'title-content': 'Interruption between Berne and Olten',
   'title-level': 3,
-  size: size.options[0],
+  size: size.options![0],
   readonly: false,
-  'disable-animation': false,
   'icon-name': 'info',
   'content-slot-text':
     "Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 o'clock construction work will take place. You have to expect changed travel times and changed connections.",
   'link-content': undefined,
-  href: href.options[0],
+  href: href.options![0],
   target: undefined,
   rel: undefined,
   'accessibility-label': undefined,
+  animation: animation.options![0],
 };
 
 export const defaultAlert: StoryObj = {
@@ -177,19 +177,19 @@ export const defaultAlert: StoryObj = {
 export const sizeL: StoryObj = {
   render: Default,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: 'l' },
+  args: { ...defaultArgs, size: size.options![1] },
 };
 
-export const withoutCloseButton: StoryObj = {
+export const sizeS: StoryObj = {
   render: Default,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, readonly: true },
+  args: { ...defaultArgs, size: size.options![2] },
 };
 
-export const withDisabledAnimation: StoryObj = {
+export const withoutCloseButton: StoryObj = {
   render: Default,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, 'disable-animation': true },
+  args: { ...defaultArgs, readonly: true },
 };
 
 export const withoutLink: StoryObj = {
@@ -211,10 +211,7 @@ export const iconAndTitleAsSlot: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style=${styleMap({ padding: '2rem' })}>${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: [
@@ -223,9 +220,6 @@ const meta: Meta = {
         SbbAlertElement.events.dismissalRequested,
       ],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/alert/alert/alert.ts b/src/components/alert/alert/alert.ts
index 4ef937c905..ccbfd86b41 100644
--- a/src/components/alert/alert/alert.ts
+++ b/src/components/alert/alert/alert.ts
@@ -44,10 +44,7 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
   @property({ reflect: true, type: Boolean }) public readonly = false;
 
   /** You can choose between `m` or `l` size. */
-  @property({ reflect: true }) public size: 'm' | 'l' = 'm';
-
-  /** Whether the fade in animation should be disabled. */
-  @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation = false;
+  @property({ reflect: true }) public size: 's' | 'm' | 'l' = 'm';
 
   /**
    * Name of the icon which will be forward to the nested `sbb-icon`.
@@ -77,6 +74,9 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
   /** This will be forwarded as aria-label to the relevant nested element. */
   @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined;
 
+  /** The enabled animations. */
+  @property({ reflect: true }) public animation: 'open' | 'none' = 'open';
+
   /** The state of the alert. */
   private get _state(): SbbAlertState {
     return (this.getAttribute('data-state') as SbbAlertState | null) ?? 'closed';
@@ -161,7 +161,7 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
                   ></sbb-divider>
                   <sbb-transparent-button
                     negative
-                    size="m"
+                    size=${this.size === 'l' ? 'm' : this.size}
                     icon-name="cross-small"
                     @click=${() => this.requestDismissal()}
                     aria-label=${i18nCloseAlert[this._language.current]}
diff --git a/src/components/alert/alert/readme.md b/src/components/alert/alert/readme.md
index 93279fc2fe..a2d7fcd673 100644
--- a/src/components/alert/alert/readme.md
+++ b/src/components/alert/alert/readme.md
@@ -57,9 +57,11 @@ which automatically removes an alert after clicking the close button.
 
 ## Style
 
-Users can choose between two `size`, `m` (default) and `l`.
+Users can choose between three `size`: `s`, `m` (default) and `l`.
 
 ```html
+<sbb-alert size="s"> ... </sbb-alert>
+
 <sbb-alert size="l"> ... </sbb-alert>
 ```
 
@@ -71,6 +73,11 @@ The description text is wrapped into an `<p>` element to guarantee the semantic
 
 Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and can have negative effects on screen readers.
 
+## Animation
+
+Set the `animation` property to manage which animations are enabled.
+As a base rule, opening animations should be active if an alert arrives after the initial page load.
+
 <!-- Auto Generated Below -->
 
 ## Properties
@@ -78,8 +85,7 @@ Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and
 | Name                 | Attribute             | Privacy | Type                                    | Default  | Description                                                                                                                                                      |
 | -------------------- | --------------------- | ------- | --------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `readonly`           | `readonly`            | public  | `boolean`                               | `false`  | Whether the alert is readonly. In readonly mode, there is no dismiss button offered to the user.                                                                 |
-| `size`               | `size`                | public  | `'m' \| 'l'`                            | `'m'`    | You can choose between `m` or `l` size.                                                                                                                          |
-| `disableAnimation`   | `disable-animation`   | public  | `boolean`                               | `false`  | Whether the fade in animation should be disabled.                                                                                                                |
+| `size`               | `size`                | public  | `'s' \| 'm' \| 'l'`                     | `'m'`    | You can choose between `m` or `l` size.                                                                                                                          |
 | `iconName`           | `icon-name`           | public  | `string \| undefined`                   | `'info'` | Name of the icon which will be forward to the nested `sbb-icon`. Choose the icons from https://icons.app.sbb.ch. Styling is optimized for icons of type HIM-CUS. |
 | `titleContent`       | `title-content`       | public  | `string \| undefined`                   |          | Content of title.                                                                                                                                                |
 | `titleLevel`         | `title-level`         | public  | `SbbTitleLevel`                         | `'3'`    | Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3.                                                                                  |
@@ -88,6 +94,7 @@ Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and
 | `target`             | `target`              | public  | `LinkTargetType \| string \| undefined` |          | Where to display the linked URL.                                                                                                                                 |
 | `rel`                | `rel`                 | public  | `string \| undefined`                   |          | The relationship of the linked URL as space-separated link types.                                                                                                |
 | `accessibilityLabel` | `accessibility-label` | public  | `string \| undefined`                   |          | This will be forwarded as aria-label to the relevant nested element.                                                                                             |
+| `animation`          | `animation`           | public  | `'open' \| 'none'`                      | `'open'` | The enabled animations.                                                                                                                                          |
 
 ## Methods
 
diff --git a/src/components/autocomplete/autocomplete.e2e.ts b/src/components/autocomplete/autocomplete.e2e.ts
index 10c9d4c445..667cc29eb6 100644
--- a/src/components/autocomplete/autocomplete.e2e.ts
+++ b/src/components/autocomplete/autocomplete.e2e.ts
@@ -17,7 +17,7 @@ describe(`sbb-autocomplete with ${fixture.name}`, () => {
       html`
         <sbb-form-field>
           <input />
-          <sbb-autocomplete id="myAutocomplete" disable-animation>
+          <sbb-autocomplete id="myAutocomplete">
             <sbb-option id="option-1" value="1">1</sbb-option>
             <sbb-option id="option-2" value="2">2</sbb-option>
             <sbb-option id="option-3" value="3">3</sbb-option>
diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss
index 219254c648..5494d0bdd7 100644
--- a/src/components/autocomplete/autocomplete.scss
+++ b/src/components/autocomplete/autocomplete.scss
@@ -56,10 +56,6 @@
   );
 }
 
-:host([disable-animation]) {
-  --sbb-options-panel-animation-duration: 0.1ms;
-}
-
 :host([preserve-icon-space]) {
   --sbb-option-icon-container-display: block;
 }
diff --git a/src/components/autocomplete/autocomplete.stories.ts b/src/components/autocomplete/autocomplete.stories.ts
index 832628be6f..083f5b1795 100644
--- a/src/components/autocomplete/autocomplete.stories.ts
+++ b/src/components/autocomplete/autocomplete.stories.ts
@@ -25,10 +25,6 @@ import readme from './readme.md?raw';
 import '../form-field.js';
 import '../form-error.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const negative: InputType = {
   control: {
     type: 'boolean',
@@ -56,15 +52,6 @@ const readonly: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-  table: {
-    category: 'Autocomplete',
-  },
-};
-
 const preserveIconSpace: InputType = {
   control: {
     type: 'boolean',
@@ -124,7 +111,6 @@ const defaultArgTypes: ArgTypes = {
   negative,
   disabled,
   readonly,
-  disableAnimation,
   preserveIconSpace,
 
   // Option args
@@ -148,7 +134,6 @@ const defaultArgs: Args = {
   negative: false,
   disabled: false,
   readonly: false,
-  disableAnimation: isChromatic(),
 
   // Option args
   iconName: 'clock-small',
@@ -170,9 +155,10 @@ const withGroupsDefaultArgs: Args = {
 const aboveDecorator: Decorator = (story) => html`
   <div
     style=${styleMap({
-      height: '100%',
-      display: 'flex',
-      'align-items': 'end',
+      'inset-block-end': '2rem',
+      'inset-inline-start': '2rem',
+      position: 'absolute',
+      'max-width': 'calc(100% - 4rem)',
     })}
   >
     ${story()}
@@ -182,7 +168,7 @@ const aboveDecorator: Decorator = (story) => html`
 const scrollDecorator: Decorator = (story) => html`
   <div
     style=${styleMap({
-      height: '175%',
+      height: '175vh',
       display: 'flex',
       'align-items': 'center',
     })}
@@ -262,10 +248,7 @@ const Template = (args: Args): TemplateResult => html`
         ?readonly=${args.readonly}
       />
 
-      <sbb-autocomplete
-        ?disable-animation=${args.disableAnimation}
-        ?preserve-icon-space=${args.preserveIconSpace}
-      >
+      <sbb-autocomplete ?preserve-icon-space=${args.preserveIconSpace}>
         ${createOptionGroup1(args.iconName, args.disableOption)} ${createOptionGroup2()}
       </sbb-autocomplete>
     </sbb-form-field>
@@ -289,10 +272,7 @@ const OptionGroupTemplate = (args: Args): TemplateResult => html`
         ?readonly=${args.readonly}
       />
 
-      <sbb-autocomplete
-        ?disable-animation=${args.disableAnimation}
-        ?preserve-icon-space=${args.preserveIconSpace}
-      >
+      <sbb-autocomplete ?preserve-icon-space=${args.preserveIconSpace}>
         <sbb-optgroup label="Group 1" ?disabled=${args.disableGroup}>
           ${createOptionGroup1(args.iconName, args.disableOption)}
         </sbb-optgroup>
@@ -319,10 +299,7 @@ const MixedTemplate = (args: Args): TemplateResult => html`
         ?readonly=${args.readonly}
       />
 
-      <sbb-autocomplete
-        ?disable-animation=${args.disableAnimation}
-        ?preserve-icon-space=${args.preserveIconSpace}
-      >
+      <sbb-autocomplete ?preserve-icon-space=${args.preserveIconSpace}>
         <sbb-option value="Option 1">
           <sbb-icon
             slot="icon"
@@ -374,10 +351,7 @@ const RequiredTemplate = (args: Args): TemplateResult => {
           }}
         />
 
-        <sbb-autocomplete
-          ?disable-animation=${args.disableAnimation}
-          ?preserve-icon-space=${args.preserveIconSpace}
-        >
+        <sbb-autocomplete ?preserve-icon-space=${args.preserveIconSpace}>
           <sbb-optgroup label="Group 1" ?disabled=${args.disableGroup}>
             ${createOptionGroup1(args.iconName, args.disableOption)}
           </sbb-optgroup>
@@ -508,20 +482,7 @@ export const MixedSingleOptionWithOptionGroupNegative: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div
-        style=${styleMap({
-          ...wrapperStyle(context),
-          padding: '2rem',
-          height: 'calc(100vh - 2rem)',
-        })}
-      >
-        ${story()}
-      </div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     chromatic: { disableSnapshot: false },
     actions: {
@@ -534,10 +495,10 @@ const meta: Meta = {
         SbbOptionElement.events.optionSelected,
       ],
     },
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '500px' },
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/autocomplete/autocomplete.ts b/src/components/autocomplete/autocomplete.ts
index 1c717523ef..bdf65d2f2b 100644
--- a/src/components/autocomplete/autocomplete.ts
+++ b/src/components/autocomplete/autocomplete.ts
@@ -68,10 +68,6 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L
    */
   @property() public trigger?: string | HTMLInputElement;
 
-  /** Whether the animation is disabled. */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /** Whether the icon space is preserved when no icon is set. */
   @property({ attribute: 'preserve-icon-space', reflect: true, type: Boolean })
   public preserveIconSpace?: boolean;
diff --git a/src/components/autocomplete/readme.md b/src/components/autocomplete/readme.md
index 83901da3ee..bc60f7e5af 100644
--- a/src/components/autocomplete/readme.md
+++ b/src/components/autocomplete/readme.md
@@ -101,7 +101,6 @@ using `aria-activedescendant` to support navigation though the autocomplete opti
 | ------------------- | --------------------- | ------- | ----------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `origin`            | `origin`              | public  | `string \| HTMLElement \| undefined`      |         | The element where the autocomplete will attach; accepts both an element's id or an HTMLElement. If not set, will search for the first 'sbb-form-field' ancestor.                                                                                                                                                  |
 | `trigger`           | `trigger`             | public  | `string \| HTMLInputElement \| undefined` |         | The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement. By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element. If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor. |
-| `disableAnimation`  | `disable-animation`   | public  | `boolean`                                 | `false` | Whether the animation is disabled.                                                                                                                                                                                                                                                                                |
 | `preserveIconSpace` | `preserve-icon-space` | public  | `boolean \| undefined`                    |         | Whether the icon space is preserved when no icon is set.                                                                                                                                                                                                                                                          |
 | `originElement`     | -                     | public  | `HTMLElement`                             |         | Returns the element where autocomplete overlay is attached to.                                                                                                                                                                                                                                                    |
 | `triggerElement`    | -                     | public  | `HTMLInputElement \| undefined`           |         | Returns the trigger element.                                                                                                                                                                                                                                                                                      |
diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts
index 2f44881298..f6dfc0b4ba 100644
--- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts
+++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts
@@ -160,16 +160,13 @@ export const CollapsedState: StoryObj = {
 const meta: Meta = {
   decorators: [
     (story) => html`
-      <div style="padding: 2rem; max-width: 1000px;">
+      <div style="max-width: 1000px;">
         ${story()}
         <div>Page content</div>
       </div>
     `,
   ],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts
index 884e9dd228..3b257d8d7e 100644
--- a/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts
+++ b/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts
@@ -66,7 +66,7 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   text: 'Breadcrumb',
-  href: href.options[0],
+  href: href.options![0],
   target: '_blank',
   rel: undefined,
   download: false,
@@ -131,7 +131,7 @@ export const LongContent: StoryObj = {
     'icon-name': 'house-small',
     text: 'This label name is so long that it needs ellipsis to fit.',
   },
-  decorators: [(story) => html` <div style="max-width: 200px;">${story()}</div> `],
+  decorators: [(story) => html`<div style="max-width: 200px;">${story()}</div>`],
 };
 
 export const NoLink: StoryObj = {
@@ -141,11 +141,7 @@ export const NoLink: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style="padding: 2rem;">${story()}</div> `],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/button-link/button-link.stories.ts b/src/components/button/button-link/button-link.stories.ts
index d12bb95845..09a08a953a 100644
--- a/src/components/button/button-link/button-link.stories.ts
+++ b/src/components/button/button-link/button-link.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonLinkDefaultArgs,
@@ -60,12 +60,11 @@ const meta: Meta = {
   excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? '#484040' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/button-static/button-static.stories.ts b/src/components/button/button-static/button-static.stories.ts
index 1738c5b728..a3a5eec489 100644
--- a/src/components/button/button-static/button-static.stories.ts
+++ b/src/components/button/button-static/button-static.stories.ts
@@ -1,10 +1,10 @@
 import type { InputType } from '@storybook/types';
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
+  commonDecorators,
   commonDefaultArgs,
   commonDefaultArgTypes,
-  commonDecorators,
   fixedWidth,
   iconOnly,
   iconOnlyDisabled,
@@ -20,8 +20,8 @@ import {
   primaryNegativeDisabled,
   sizeM,
   sizeS,
-  withSlottedIcon,
   withHiddenSlottedIcon,
+  withSlottedIcon,
 } from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
@@ -72,12 +72,11 @@ const meta: Meta = {
   excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? '#484040' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/button/button.stories.ts b/src/components/button/button/button.stories.ts
index 6b8fc88797..b26219b84c 100644
--- a/src/components/button/button/button.stories.ts
+++ b/src/components/button/button/button.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonDefaultArgs,
@@ -62,12 +62,11 @@ const meta: Meta = {
   excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? '#484040' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/common/button-common-stories.ts b/src/components/button/common/button-common-stories.ts
index 94919246fe..09a0d56b14 100644
--- a/src/components/button/common/button-common-stories.ts
+++ b/src/components/button/common/button-common-stories.ts
@@ -77,7 +77,7 @@ export const buttonDefaultArgTypes: ArgTypes = {
 
 export const buttonDefaultArgs: Args = {
   ...commonDefaultArgs,
-  type: type.options[0],
+  type: type.options![0],
   disabled: false,
   name: 'Button Name',
   value: undefined,
diff --git a/src/components/button/common/button-common.scss b/src/components/button/common/button-common.scss
index 0fa1093eb7..7492646833 100644
--- a/src/components/button/common/button-common.scss
+++ b/src/components/button/common/button-common.scss
@@ -25,7 +25,10 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
   --sbb-button-border-width: var(--sbb-border-width-2x);
   --sbb-button-border-radius: var(--sbb-border-radius-infinity);
   --sbb-button-min-height: var(--sbb-size-element-m);
-  --sbb-button-transition-duration: var(--sbb-animation-duration-2x);
+  --sbb-button-transition-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-2x)
+  );
   --sbb-button-transition-easing-function: var(--sbb-animation-easing);
   --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
   --sbb-button-padding-inline: var(--sbb-spacing-fixed-8x);
@@ -75,7 +78,6 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
 
 :host(#{$icon-only}) {
   --sbb-button-padding-inline: 0;
-  --icon-margin-inline-end: 0;
 }
 
 :host([disabled]) {
diff --git a/src/components/button/common/button-link-common-stories.ts b/src/components/button/common/button-link-common-stories.ts
index aa2ae89d49..811960b338 100644
--- a/src/components/button/common/button-link-common-stories.ts
+++ b/src/components/button/common/button-link-common-stories.ts
@@ -66,7 +66,7 @@ export const buttonLinkDefaultArgTypes: ArgTypes = {
 
 export const buttonLinkDefaultArgs: Args = {
   ...commonDefaultArgs,
-  href: href.options[0],
+  href: href.options![0],
   target: '_blank',
   rel: 'noopener',
   download: false,
diff --git a/src/components/button/common/common-stories.ts b/src/components/button/common/common-stories.ts
index a055908cab..dc7cbe0015 100644
--- a/src/components/button/common/common-stories.ts
+++ b/src/components/button/common/common-stories.ts
@@ -8,7 +8,6 @@ import type {
   StoryObj,
   WebComponentsRenderer,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
@@ -18,10 +17,6 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
 import '../../icon.js';
 import '../../loading-indicator.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? '#484040' : 'var(--sbb-color-white)',
-});
-
 const focusStyle = (context: StoryContext): Record<string, string> =>
   context.args.negative
     ? { '--sbb-focus-outline-color': 'var(--sbb-focus-outline-color-dark)' }
@@ -50,7 +45,6 @@ const IconSlotTemplate = ({
 const LoadingIndicatorTemplate = ({ tag, text, ...args }: Args): TemplateResult => html`
   <${unsafeStatic(tag)} ${sbbSpread(args)}>
     <sbb-loading-indicator
-      ?disable-animation=${isChromatic()}
       slot="icon"
       variant="circle"
     ></sbb-loading-indicator>
@@ -130,7 +124,7 @@ export const commonDefaultArgs: Args = {
   tag: 'TBD',
   text: 'Button',
   negative: false,
-  size: size.options[0],
+  size: size.options![0],
   'icon-name': 'arrow-right-small',
   'aria-label': undefined,
 };
@@ -188,14 +182,14 @@ export const noIcon: StoryObj = {
 export const sizeM: StoryObj = {
   render: Template,
   args: {
-    size: size.options[1],
+    size: size.options![1],
   },
 };
 
 export const sizeS: StoryObj = {
   render: Template,
   args: {
-    size: size.options[2],
+    size: size.options![2],
   },
 };
 
@@ -246,9 +240,7 @@ export const commonDecorators = [
   (story: () => WebComponentsRenderer['storyResult'], context: StoryContext) => html`
     <div
       style=${styleMap({
-        ...wrapperStyle(context),
         ...focusStyle(context),
-        padding: '2rem',
       })}
     >
       ${story()}
diff --git a/src/components/button/mini-button/mini-button.stories.ts b/src/components/button/mini-button/mini-button.stories.ts
index b57eff97bf..0f5f1f76ad 100644
--- a/src/components/button/mini-button/mini-button.stories.ts
+++ b/src/components/button/mini-button/mini-button.stories.ts
@@ -9,7 +9,6 @@ import type {
   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';
 import '../../form-field.js';
@@ -18,10 +17,6 @@ import { buttonDefaultArgs, buttonDefaultArgTypes } from '../common/button-commo
 
 import readme from './readme.md?raw';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const MiniButtonCommonTemplate = ({ slot, ...args }: Args): TemplateResult => html`
   <sbb-form-field ?negative=${args.negative}>
     <label>Demo sbb-mini-button</label>
@@ -55,7 +50,7 @@ const miniButtonDefaultArgTypes: ArgTypes = {
 const miniButtonDefaultArgs: Args = {
   ...buttonDefaultArgs,
   'icon-name': 'pen-small',
-  slot: slot.options[0],
+  slot: slot.options![0],
 };
 
 ['size', 'text'].forEach((e: string) => {
@@ -84,40 +79,34 @@ export const PrefixSlottedIcon: StoryObj = {
 
 export const Suffix: StoryObj = {
   render: MiniButtonCommonTemplate,
-  args: { slot: slot.options[1] },
+  args: { slot: slot.options![1] },
 };
 
 export const SuffixNegative: StoryObj = {
   render: MiniButtonCommonTemplate,
-  args: { slot: slot.options[1], negative: true },
+  args: { slot: slot.options![1], negative: true },
 };
 
 export const SuffixDisabled: StoryObj = {
   render: MiniButtonCommonTemplate,
-  args: { slot: slot.options[1], disabled: true },
+  args: { slot: slot.options![1], disabled: true },
 };
 
 export const SuffixSlottedIcon: StoryObj = {
   render: MiniButtonSlottedIconCommonTemplate,
-  args: { slot: slot.options[1], 'icon-name': undefined },
+  args: { slot: slot.options![1], 'icon-name': undefined },
 };
 
 const meta: Meta = {
   argTypes: miniButtonDefaultArgTypes,
   args: miniButtonDefaultArgs,
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/secondary-button-link/secondary-button-link.stories.ts b/src/components/button/secondary-button-link/secondary-button-link.stories.ts
index fa73b325b8..e0708dd49f 100644
--- a/src/components/button/secondary-button-link/secondary-button-link.stories.ts
+++ b/src/components/button/secondary-button-link/secondary-button-link.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonLinkDefaultArgs,
@@ -60,12 +60,11 @@ const meta: Meta = {
   excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? '#484040' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/secondary-button-static/secondary-button-static.stories.ts b/src/components/button/secondary-button-static/secondary-button-static.stories.ts
index 56595ce0b6..997d09dc75 100644
--- a/src/components/button/secondary-button-static/secondary-button-static.stories.ts
+++ b/src/components/button/secondary-button-static/secondary-button-static.stories.ts
@@ -1,10 +1,10 @@
 import type { InputType } from '@storybook/types';
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
+  commonDecorators,
   commonDefaultArgs,
   commonDefaultArgTypes,
-  commonDecorators,
   fixedWidth,
   iconOnly,
   iconOnlyDisabled,
@@ -20,8 +20,8 @@ import {
   primaryNegativeDisabled,
   sizeM,
   sizeS,
-  withSlottedIcon,
   withHiddenSlottedIcon,
+  withSlottedIcon,
 } from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
@@ -72,12 +72,11 @@ const meta: Meta = {
   excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? '#484040' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/secondary-button/secondary-button.stories.ts b/src/components/button/secondary-button/secondary-button.stories.ts
index dbe5e82885..e87204ce1d 100644
--- a/src/components/button/secondary-button/secondary-button.stories.ts
+++ b/src/components/button/secondary-button/secondary-button.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonDefaultArgs,
@@ -63,12 +63,11 @@ const meta: Meta = {
   excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? '#484040' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/tertiary-button-link/tertiary-button-link.stories.ts b/src/components/button/tertiary-button-link/tertiary-button-link.stories.ts
index 3acc7c539a..1f7704ad9f 100644
--- a/src/components/button/tertiary-button-link/tertiary-button-link.stories.ts
+++ b/src/components/button/tertiary-button-link/tertiary-button-link.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonLinkDefaultArgs,
@@ -60,12 +60,11 @@ const meta: Meta = {
   excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? '#484040' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/tertiary-button-static/tertiary-button-static.stories.ts b/src/components/button/tertiary-button-static/tertiary-button-static.stories.ts
index 5c63dcb209..c868261d81 100644
--- a/src/components/button/tertiary-button-static/tertiary-button-static.stories.ts
+++ b/src/components/button/tertiary-button-static/tertiary-button-static.stories.ts
@@ -1,10 +1,10 @@
 import type { InputType } from '@storybook/types';
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
+  commonDecorators,
   commonDefaultArgs,
   commonDefaultArgTypes,
-  commonDecorators,
   fixedWidth,
   iconOnly,
   iconOnlyDisabled,
@@ -20,8 +20,8 @@ import {
   primaryNegativeDisabled,
   sizeM,
   sizeS,
-  withSlottedIcon,
   withHiddenSlottedIcon,
+  withSlottedIcon,
 } from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
@@ -72,12 +72,11 @@ const meta: Meta = {
   excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? '#484040' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/tertiary-button/tertiary-button.stories.ts b/src/components/button/tertiary-button/tertiary-button.stories.ts
index 2b9b181799..d67469fc66 100644
--- a/src/components/button/tertiary-button/tertiary-button.stories.ts
+++ b/src/components/button/tertiary-button/tertiary-button.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonDefaultArgs,
@@ -62,12 +62,11 @@ const meta: Meta = {
   excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? '#484040' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/transparent-button-link/transparent-button-link.stories.ts b/src/components/button/transparent-button-link/transparent-button-link.stories.ts
index 9e34e53d6b..325e774f9b 100644
--- a/src/components/button/transparent-button-link/transparent-button-link.stories.ts
+++ b/src/components/button/transparent-button-link/transparent-button-link.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonLinkDefaultArgs,
@@ -60,12 +60,11 @@ const meta: Meta = {
   excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? '#484040' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/transparent-button-static/transparent-button-static.stories.ts b/src/components/button/transparent-button-static/transparent-button-static.stories.ts
index 0b72e80d44..4aed23313e 100644
--- a/src/components/button/transparent-button-static/transparent-button-static.stories.ts
+++ b/src/components/button/transparent-button-static/transparent-button-static.stories.ts
@@ -1,10 +1,10 @@
 import type { InputType } from '@storybook/types';
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
+  commonDecorators,
   commonDefaultArgs,
   commonDefaultArgTypes,
-  commonDecorators,
   fixedWidth,
   iconOnly,
   iconOnlyDisabled,
@@ -20,8 +20,8 @@ import {
   primaryNegativeDisabled,
   sizeM,
   sizeS,
-  withSlottedIcon,
   withHiddenSlottedIcon,
+  withSlottedIcon,
 } from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
@@ -72,12 +72,11 @@ const meta: Meta = {
   excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? '#484040' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/button/transparent-button/transparent-button.stories.ts b/src/components/button/transparent-button/transparent-button.stories.ts
index c7c16e06c1..635e46d8f4 100644
--- a/src/components/button/transparent-button/transparent-button.stories.ts
+++ b/src/components/button/transparent-button/transparent-button.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonDefaultArgs,
@@ -62,12 +62,11 @@ const meta: Meta = {
   excludeStories: /.*(Active|FocusVisible)$/,
   decorators: commonDecorators,
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? '#484040' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/calendar/calendar.scss b/src/components/calendar/calendar.scss
index a536ad0ef6..4dc6956569 100644
--- a/src/components/calendar/calendar.scss
+++ b/src/components/calendar/calendar.scss
@@ -16,7 +16,10 @@
   --sbb-calendar-cell-selected-background-color: var(--sbb-color-charcoal);
   --sbb-calendar-cell-disabled-height: #{sbb.px-to-rem-build(1.5)};
   --sbb-calendar-cell-disabled-width: #{sbb.px-to-rem-build(25.5)};
-  --sbb-calendar-cell-transition-duration: var(--sbb-animation-duration-2x);
+  --sbb-calendar-cell-transition-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-2x)
+  );
   --sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);
   --sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);
   --sbb-calendar-table-animation-shift: #{sbb.px-to-rem-build(0.1)};
diff --git a/src/components/calendar/calendar.stories.ts b/src/components/calendar/calendar.stories.ts
index 9d062ca9b9..611d4992c6 100644
--- a/src/components/calendar/calendar.stories.ts
+++ b/src/components/calendar/calendar.stories.ts
@@ -167,7 +167,7 @@ export const CalendarFilterFunction: StoryObj = {
     ...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: isChromatic() ? filterFunctions[1] : dateFilter.options![2],
   },
 };
 
@@ -190,9 +190,6 @@ const meta: Meta = {
     actions: {
       handles: [SbbCalendarElement.events.dateSelected],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/card/card-badge/card-badge.stories.ts b/src/components/card/card-badge/card-badge.stories.ts
index 9a9033394a..67df557046 100644
--- a/src/components/card/card-badge/card-badge.stories.ts
+++ b/src/components/card/card-badge/card-badge.stories.ts
@@ -1,19 +1,14 @@
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/web-components';
+import type { Args, ArgTypes, 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 readme from './readme.md?raw';
 
 import './card-badge.js';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color':
-    context.args.color === 'charcoal' ? 'var(--sbb-color-white)' : 'var(--sbb-color-charcoal)',
-});
+import '../card.js';
 
 const ariaLabel: InputType = {
   control: {
@@ -35,16 +30,18 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   'aria-label': 'Super saver sales ticket price starts at CHF 92.50 Black Friday Special',
-  color: color.options[0],
+  color: color.options![0],
 };
 
 const Template = (args: Args): TemplateResult => html`
-  <sbb-card-badge ${sbbSpread(args)}>
-    <span>%</span>
-    <span>from CHF</span>
-    <span>92.50</span>
-    <span> <time datetime="2021-11-25">Black Friday</time> Special </span>
-  </sbb-card-badge>
+  <sbb-card color="milk">
+    <sbb-card-badge ${sbbSpread(args)}>
+      <span>%</span>
+      <span>from CHF</span>
+      <span>92.50</span>
+      <span> <time datetime="2021-11-25">Black Friday</time> Special </span>
+    </sbb-card-badge>
+  </sbb-card>
 `;
 
 export const Charcoal: StoryObj = {
@@ -60,29 +57,12 @@ export const White: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    color: color.options[1],
+    color: color.options![1],
   },
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div
-        style=${styleMap({
-          ...wrapperStyle(context),
-          padding: '0 0 2rem 2rem',
-          position: 'relative',
-          overflow: 'hidden',
-        })}
-      >
-        ${story()}
-      </div>
-    `,
-  ],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/card/card/card.stories.ts b/src/components/card/card/card.stories.ts
index 6f8e1e21c5..4e9c68c192 100644
--- a/src/components/card/card/card.stories.ts
+++ b/src/components/card/card/card.stories.ts
@@ -21,15 +21,6 @@ import '../card-button.js';
 import '../card-link.js';
 import '../../title.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color':
-    context.args.color === 'white' || context.args.color === 'transparent-bordered-dashed'
-      ? 'var(--sbb-color-milk)'
-      : context.args.color === 'milk'
-        ? 'var(--sbb-color-white)'
-        : '--sbb-color-platinum',
-});
-
 const ContentText = (): TemplateResult => html`
   <span class="sbb-text-m">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor blandit odio, ut
@@ -244,14 +235,14 @@ const defaultArgTypesLink: ArgTypes = {
 
 const defaultArgs: Args = {
   size: 'm',
-  color: color.options[0],
+  color: color.options![0],
 };
 
 const defaultArgsLink = {
   ...defaultArgs,
   active: false,
   label: 'Click this card to follow the action.',
-  href: href.options[1],
+  href: href.options![1],
   download: false,
   target: '_blank',
   rel: undefined,
@@ -268,7 +259,7 @@ const defaultArgsButton = {
   target: undefined,
   rel: undefined,
   name: 'Button name',
-  type: type.options[0],
+  type: type.options![0],
   form: 'form-name',
   value: 'Value',
 };
@@ -286,7 +277,7 @@ export const ColorMilk: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    color: color.options[1],
+    color: color.options![1],
   },
 };
 
@@ -295,7 +286,7 @@ export const ColorTransparent: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    color: color.options[2],
+    color: color.options![2],
   },
 };
 
@@ -304,7 +295,7 @@ export const ColorTransparentBorderedDashed: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    color: color.options[3],
+    color: color.options![3],
   },
 };
 
@@ -313,7 +304,7 @@ export const SizeXS: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[0],
+    size: size.options![0],
   },
 };
 
@@ -322,7 +313,7 @@ export const SizeS: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[1],
+    size: size.options![1],
   },
 };
 
@@ -331,7 +322,7 @@ export const SizeM: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[2],
+    size: size.options![2],
   },
 };
 
@@ -340,7 +331,7 @@ export const SizeL: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[3],
+    size: size.options![3],
   },
 };
 
@@ -349,7 +340,7 @@ export const SizeXL: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[4],
+    size: size.options![4],
   },
 };
 
@@ -358,7 +349,7 @@ export const SizeXXL: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[5],
+    size: size.options![5],
   },
 };
 
@@ -367,7 +358,7 @@ export const SizeXXXL: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[6],
+    size: size.options![6],
   },
 };
 
@@ -376,7 +367,7 @@ export const SizeMWithBadge: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[2],
+    size: size.options![2],
   },
 };
 
@@ -385,7 +376,7 @@ export const SizeLWithBadge: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[3],
+    size: size.options![3],
   },
 };
 
@@ -394,7 +385,7 @@ export const SizeXLWithBadge: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[4],
+    size: size.options![4],
   },
 };
 
@@ -403,7 +394,7 @@ export const SizeXXLWithBadge: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[5],
+    size: size.options![5],
   },
 };
 
@@ -412,7 +403,7 @@ export const SizeXXXLWithBadge: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[6],
+    size: size.options![6],
   },
 };
 
@@ -439,7 +430,7 @@ export const ButtonActiveMilk: StoryObj = {
   argTypes: defaultArgTypesButton,
   args: {
     ...defaultArgsButton,
-    color: color.options[1],
+    color: color.options![1],
     active: true,
   },
 };
@@ -449,7 +440,7 @@ export const ButtonActiveTransparentBordered: StoryObj = {
   argTypes: defaultArgTypesButton,
   args: {
     ...defaultArgsButton,
-    color: color.options[2],
+    color: color.options![2],
     active: true,
   },
 };
@@ -459,7 +450,7 @@ export const ButtonActiveTransparentBorderedDashed: StoryObj = {
   argTypes: defaultArgTypesButton,
   args: {
     ...defaultArgsButton,
-    color: color.options[3],
+    color: color.options![3],
     active: true,
   },
 };
@@ -495,13 +486,14 @@ export const Multiple: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.color === 'white' || context.args.color === 'transparent-bordered-dashed'
+        ? 'var(--sbb-color-milk)'
+        : context.args.color === 'milk'
+          ? 'var(--sbb-color-white)'
+          : '--sbb-color-platinum',
     actions: {
       handles: ['click'],
     },
diff --git a/src/components/checkbox/checkbox-group/checkbox-group.stories.ts b/src/components/checkbox/checkbox-group/checkbox-group.stories.ts
index f340d7d098..907573b811 100644
--- a/src/components/checkbox/checkbox-group/checkbox-group.stories.ts
+++ b/src/components/checkbox/checkbox-group/checkbox-group.stories.ts
@@ -261,9 +261,9 @@ const basicArgTypes: ArgTypes = {
 const basicArgs: Args = {
   disabled: false,
   required: false,
-  orientation: orientation.options[0],
+  orientation: orientation.options![0],
   'horizontal-from': undefined,
-  size: size.options[1],
+  size: size.options![1],
   label: 'Label',
   checked: true,
   disabledSingle: false,
@@ -273,17 +273,17 @@ const basicArgs: Args = {
 
 const basicArgsVertical = {
   ...basicArgs,
-  orientation: orientation.options[1],
+  orientation: orientation.options![1],
 };
 
 const iconStart: Args = {
   iconName: 'tickets-class-small',
-  iconPlacement: iconPlacement.options[0],
+  iconPlacement: iconPlacement.options![0],
 };
 
 const iconEnd: Args = {
   iconName: 'tickets-class-small',
-  iconPlacement: iconPlacement.options[1],
+  iconPlacement: iconPlacement.options![1],
 };
 
 export const horizontal: StoryObj = {
@@ -371,17 +371,11 @@ export const indeterminateGroup: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style=${styleMap({ padding: '2rem' })}>${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: ['change', 'input'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/checkbox/checkbox/checkbox.stories.ts b/src/components/checkbox/checkbox/checkbox.stories.ts
index 95812e52e8..8cbe35e9f4 100644
--- a/src/components/checkbox/checkbox/checkbox.stories.ts
+++ b/src/components/checkbox/checkbox/checkbox.stories.ts
@@ -3,7 +3,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } 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';
 
@@ -103,7 +102,7 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  size: size.options[1],
+  size: size.options![1],
   checked: false,
   indeterminate: false,
   disabled: false,
@@ -172,7 +171,7 @@ export const defaultIndeterminate: StoryObj = {
 export const sizeM: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[0] },
+  args: { ...defaultArgs, size: size.options![0] },
 };
 export const longLabel: StoryObj = {
   render: Template,
@@ -191,7 +190,7 @@ export const checkedWithIconStart: StoryObj = {
     ...defaultArgs,
     checked: true,
     'icon-name': 'tickets-class-small',
-    'icon-placement': iconPlacement.options[0],
+    'icon-placement': iconPlacement.options![0],
   },
 };
 export const disabledChecked: StoryObj = {
@@ -235,17 +234,11 @@ export const defaultIndeterminateBold: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style=${styleMap({ padding: '2rem' })}>${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: ['change', 'input'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/chip/chip.stories.ts b/src/components/chip/chip.stories.ts
index 124bcb0c5b..9084f4cee9 100644
--- a/src/components/chip/chip.stories.ts
+++ b/src/components/chip/chip.stories.ts
@@ -10,13 +10,6 @@ import readme from './readme.md?raw';
 
 import './chip.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color':
-    context.args.color === 'milk' || context.args.color === 'white'
-      ? 'var(--sbb-color-granite)'
-      : 'var(--sbb-color-white)',
-});
-
 const size: InputType = {
   control: {
     type: 'inline-radio',
@@ -44,8 +37,8 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  size: size.options[0],
-  color: color.options[0],
+  size: size.options![0],
+  color: color.options![0],
   label: 'Label',
 };
 
@@ -70,7 +63,7 @@ export const MilkXS: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[1],
+    size: size.options![1],
   },
 };
 
@@ -79,7 +72,7 @@ export const MilkS: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[2],
+    size: size.options![2],
   },
 };
 
@@ -88,7 +81,7 @@ export const Charcoal: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    color: color.options[1],
+    color: color.options![1],
   },
 };
 
@@ -97,7 +90,7 @@ export const White: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    color: color.options[2],
+    color: color.options![2],
   },
 };
 
@@ -106,7 +99,7 @@ export const Granite: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    color: color.options[3],
+    color: color.options![3],
   },
 };
 
@@ -128,17 +121,11 @@ export const FixedWidthLongLabel: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem', 'font-size': '0' })}>
-        ${story()}
-      </div>
-    `,
-  ],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: (context: StoryContext) =>
+      context.args.color === 'milk' || context.args.color === 'white'
+        ? 'var(--sbb-color-granite)'
+        : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/container/container/container.stories.ts b/src/components/container/container/container.stories.ts
index 857b521db4..f780de7a11 100644
--- a/src/components/container/container/container.stories.ts
+++ b/src/components/container/container/container.stories.ts
@@ -44,7 +44,7 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   expanded: false,
-  color: color.options[0],
+  color: color.options![0],
 };
 
 const DefaultTemplate = ({ color, ...args }: Args): TemplateResult => html`
@@ -63,13 +63,13 @@ export const Default: StoryObj = {
 export const Transparent: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[1] },
+  args: { ...defaultArgs, color: color.options![1] },
 };
 
 export const Milk: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[2] },
+  args: { ...defaultArgs, color: color.options![2] },
 };
 
 export const Expanded: StoryObj = {
@@ -80,9 +80,6 @@ export const Expanded: StoryObj = {
 
 const meta: Meta = {
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/container/sticky-bar/readme.md b/src/components/container/sticky-bar/readme.md
index 28dea03ec7..95894353f0 100644
--- a/src/components/container/sticky-bar/readme.md
+++ b/src/components/container/sticky-bar/readme.md
@@ -22,10 +22,9 @@ Optionally the user can set the `color` property on the `sbb-sticky-bar` in orde
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                             | Default | Description                                          |
-| ------------------ | ------------------- | ------- | -------------------------------- | ------- | ---------------------------------------------------- |
-| `color`            | `color`             | public  | `'white' \| 'milk' \| undefined` |         | Color of the container, like transparent, white etc. |
-| `disableAnimation` | `disable-animation` | public  | `boolean`                        | `false` | Whether the animation is enabled.                    |
+| Name    | Attribute | Privacy | Type                             | Default | Description                                          |
+| ------- | --------- | ------- | -------------------------------- | ------- | ---------------------------------------------------- |
+| `color` | `color`   | public  | `'white' \| 'milk' \| undefined` |         | Color of the container, like transparent, white etc. |
 
 ## CSS Properties
 
diff --git a/src/components/container/sticky-bar/sticky-bar.scss b/src/components/container/sticky-bar/sticky-bar.scss
index 7ca31327fd..9262a3b54a 100644
--- a/src/components/container/sticky-bar/sticky-bar.scss
+++ b/src/components/container/sticky-bar/sticky-bar.scss
@@ -7,8 +7,14 @@ $intersector-overlapping: 1px;
 
 :host {
   --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);
-  --sbb-sticky-bar-fade-in-animation-duration: var(--sbb-animation-duration-5x);
-  --sbb-sticky-bar-fade-out-animation-duration: var(--sbb-animation-duration-2x);
+  --sbb-sticky-bar-fade-in-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-5x)
+  );
+  --sbb-sticky-bar-fade-out-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-2x)
+  );
   --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
   --sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);
 
@@ -31,11 +37,6 @@ $intersector-overlapping: 1px;
   --sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk);
 }
 
-:host([disable-animation]) {
-  --sbb-sticky-bar-fade-in-animation-duration: 0.1ms;
-  --sbb-sticky-bar-fade-out-animation-duration: 0.1ms;
-}
-
 .sbb-sticky-bar__wrapper {
   position: sticky;
   inset-block-end: 0;
diff --git a/src/components/container/sticky-bar/sticky-bar.stories.ts b/src/components/container/sticky-bar/sticky-bar.stories.ts
index 40a9166850..451e4f5548 100644
--- a/src/components/container/sticky-bar/sticky-bar.stories.ts
+++ b/src/components/container/sticky-bar/sticky-bar.stories.ts
@@ -44,27 +44,16 @@ const color: InputType = {
   options: ['unset', 'white', 'milk'],
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-  table: {
-    category: 'Sticky Bar',
-  },
-};
-
 const defaultArgTypes: ArgTypes = {
   expanded,
   color,
   containerColor,
-  disableAnimation,
 };
 
 const defaultArgs: Args = {
   expanded: false,
-  color: color.options[0],
-  containerColor: containerColor.options[0],
-  disableAnimation: isChromatic(),
+  color: color.options![0],
+  containerColor: containerColor.options![0],
 };
 
 const actionGroup = (): TemplateResult => html`
@@ -78,12 +67,11 @@ const actionGroup = (): TemplateResult => html`
       align-self="start"
       icon-name="chevron-small-left-small"
       href="https://www.sbb.ch/en/"
-      sbb-dialog-close
     >
       Link
     </sbb-block-link>
-    <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
-    <sbb-button sbb-dialog-close> Confirm </sbb-button>
+    <sbb-secondary-button>Cancel</sbb-secondary-button>
+    <sbb-button>Confirm</sbb-button>
   </sbb-action-group>
 `;
 
@@ -110,51 +98,26 @@ const Template = (): TemplateResult =>
     <sbb-secondary-button>Example</sbb-secondary-button>
   </sbb-sticky-bar>`;
 
-const DefaultTemplate = ({
-  color,
-  containerColor,
-  disableAnimation,
-  ...args
-}: Args): TemplateResult => html`
+const DefaultTemplate = ({ color, containerColor, ...args }: Args): TemplateResult => html`
   <sbb-container ${sbbSpread(args)} color=${containerColor}>
     ${containerContent('Example title')} ${containerContent('Another one')}
     ${containerContent('And another one')} ${containerContent('And a last one')}
 
-    <sbb-sticky-bar
-      color=${color !== 'unset' ? color : nothing}
-      ?disable-animation=${disableAnimation}
-    >
-      ${actionGroup()}
-    </sbb-sticky-bar>
+    <sbb-sticky-bar color=${color !== 'unset' ? color : nothing}> ${actionGroup()} </sbb-sticky-bar>
   </sbb-container>
 `;
 
-const ShortTemplate = ({
-  color,
-  containerColor,
-  disableAnimation,
-  ...args
-}: Args): TemplateResult => html`
+const ShortTemplate = ({ color, containerColor, ...args }: Args): TemplateResult => html`
   <sbb-container ${sbbSpread(args)} color=${containerColor}>
     ${isChromatic()
       ? containerContentChromatic('Example title')
       : containerContent('Example title')}
 
-    <sbb-sticky-bar
-      color=${color !== 'unset' ? color : nothing}
-      ?disable-animation=${disableAnimation}
-    >
-      ${actionGroup()}
-    </sbb-sticky-bar>
+    <sbb-sticky-bar color=${color !== 'unset' ? color : nothing}> ${actionGroup()} </sbb-sticky-bar>
   </sbb-container>
 `;
 
-const WithContentAfterTemplate = ({
-  color,
-  containerColor,
-  disableAnimation,
-  ...args
-}: Args): TemplateResult => html`
+const WithContentAfterTemplate = ({ color, containerColor, ...args }: Args): TemplateResult => html`
   <sbb-container
     ${sbbSpread(args)}
     color=${containerColor}
@@ -165,7 +128,6 @@ const WithContentAfterTemplate = ({
 
     <sbb-sticky-bar
       color=${color !== 'unset' ? color : nothing}
-      ?disable-animation=${disableAnimation}
       style="--sbb-sticky-bar-bottom-overlapping-height: var(--sbb-spacing-responsive-l);"
     >
       ${actionGroup()}
@@ -211,13 +173,13 @@ export const Expanded: StoryObj = {
 export const White: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[1] },
+  args: { ...defaultArgs, color: color.options![1] },
 };
 
 export const Milk: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[2] },
+  args: { ...defaultArgs, color: color.options![2] },
 };
 
 export const WithContentAfter: StoryObj = {
@@ -229,20 +191,17 @@ export const WithContentAfter: StoryObj = {
 export const MilkContainer: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, containerColor: color.options[2] },
+  args: { ...defaultArgs, containerColor: color.options![2] },
 };
 
 export const MilkContainerWhiteStickyBar: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, containerColor: color.options[2], color: color.options[1] },
+  args: { ...defaultArgs, containerColor: color.options![2], color: color.options![1] },
 };
 
 const meta: Meta = {
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/container/sticky-bar/sticky-bar.ts b/src/components/container/sticky-bar/sticky-bar.ts
index dd4b1bffe2..b8559bb59f 100644
--- a/src/components/container/sticky-bar/sticky-bar.ts
+++ b/src/components/container/sticky-bar/sticky-bar.ts
@@ -27,10 +27,6 @@ export class SbbStickyBarElement extends LitElement {
   /** Color of the container, like transparent, white etc. */
   @property({ reflect: true }) public color?: 'white' | 'milk';
 
-  /** Whether the animation is enabled. */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   private _intersector?: HTMLSpanElement;
   private _observer = new AgnosticIntersectionObserver((entries) =>
     this._toggleShadowVisibility(entries[0]),
diff --git a/src/components/core/overlay/overlay.ts b/src/components/core/overlay/overlay.ts
index 972047250f..03c0787e7b 100644
--- a/src/components/core/overlay/overlay.ts
+++ b/src/components/core/overlay/overlay.ts
@@ -1,7 +1,7 @@
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-const IS_OPEN_OVERLAY_QUERY = `:is(sbb-dialog, sbb-navigation, sbb-menu)[data-state='opened']`;
+const IS_OPEN_OVERLAY_QUERY = `:is(sbb-dialog, sbb-navigation, sbb-menu, sbb-overlay)[data-state='opened']`;
 
 /**
  * Used to create the "wrapping" effect around the anchor for overlays (es. autocomplete)
diff --git a/src/components/core/styles/_index.scss b/src/components/core/styles/_index.scss
index 7897221dca..ff6dab3b87 100644
--- a/src/components/core/styles/_index.scss
+++ b/src/components/core/styles/_index.scss
@@ -1,13 +1,13 @@
-@forward './core/font-face';
 @forward './core/functions';
 @forward './core/mediaqueries';
-@forward './core/variables';
 
 @forward './mixins/a11y';
+@forward './mixins/animation';
 @forward './mixins/badge';
 @forward './mixins/buttons';
 @forward './mixins/card';
 @forward './mixins/chip';
+@forward './mixins/font-face';
 @forward './mixins/helpers';
 @forward './mixins/inputs';
 @forward './mixins/layout';
diff --git a/src/components/core/styles/core/variables.scss b/src/components/core/styles/core/variables.scss
deleted file mode 100644
index 867f835ebd..0000000000
--- a/src/components/core/styles/core/variables.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@use 'node_modules/@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables_css--placeholder.scss';
-@use './mediaqueries';
-@use './functions';
-
-@mixin lyne-components-css-vars {
-  // Grab css vars defined by `@sbb-esta/lyne-design-tokens` package
-  @extend %lyne-design-tokens-css-variables;
-
-  // Train formation
-  --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
-  --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
-  --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
-  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
-
-  // Header
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
-
-  // Time Input
-  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
-
-  // Overlay
-  --sbb-overlay-default-z-index: 1000;
-
-  // Infinity border radius, can be used to achieve rounded border on start and end
-  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
-  --sbb-border-radius-infinity: 10000000em;
-
-  @include mediaqueries.mq($from: medium) {
-    // Header
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
-
-    // Time Input
-    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
-  }
-}
diff --git a/src/components/core/styles/fullfont.scss b/src/components/core/styles/fullfont.scss
index 76dd109fec..3fdf0695df 100644
--- a/src/components/core/styles/fullfont.scss
+++ b/src/components/core/styles/fullfont.scss
@@ -1,3 +1,3 @@
-@use './core/font-face';
+@use './mixins/font-face';
 
 @include font-face.font-declarations-full;
diff --git a/src/components/core/styles/global.scss b/src/components/core/styles/global.scss
index db8a6ae104..e28f878283 100644
--- a/src/components/core/styles/global.scss
+++ b/src/components/core/styles/global.scss
@@ -1,9 +1,40 @@
+@use 'node_modules/@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables_css--mixin.scss' as
+  sbb-css-tokens;
 @use './_index' as sbb;
 @use './normalize';
 @use './typography';
+@use './core/mediaqueries';
+@use './core/functions';
 
 // Core variables, are always needed
 :root {
-  // Core variables for :root context
-  @include sbb.lyne-components-css-vars;
+  // Grab css vars defined by `@sbb-esta/lyne-design-tokens` package
+  @include sbb-css-tokens.lyne-design-tokens-css-variables;
+
+  // Train formation
+  --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
+  --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
+  --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+
+  // Header
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+
+  // Time Input
+  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+
+  // Overlay
+  --sbb-overlay-default-z-index: 1000;
+
+  // Infinity border radius, can be used to achieve rounded border on start and end
+  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
+  --sbb-border-radius-infinity: 10000000em;
+
+  @include mediaqueries.mq($from: medium) {
+    // Header
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+
+    // Time Input
+    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+  }
 }
diff --git a/src/components/core/styles/mixins/animation.scss b/src/components/core/styles/mixins/animation.scss
new file mode 100644
index 0000000000..1c5920bb5a
--- /dev/null
+++ b/src/components/core/styles/mixins/animation.scss
@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------------------------------------
+// Animation related stuff
+// ----------------------------------------------------------------------------------------------------
+
+@mixin disable-animation {
+  --sbb-disable-animation-time: 0.1ms;
+  --sbb-disable-animation-zero-time: 0s;
+}
+
+@mixin enable-animation {
+  --sbb-disable-animation-time: initial;
+  --sbb-disable-animation-zero-time: initial;
+}
diff --git a/src/components/core/styles/mixins/buttons.scss b/src/components/core/styles/mixins/buttons.scss
index 734b5e9c12..38e86c2501 100644
--- a/src/components/core/styles/mixins/buttons.scss
+++ b/src/components/core/styles/mixins/buttons.scss
@@ -62,7 +62,10 @@
   --sbb-button-color-disabled-text: var(--sbb-color-granite);
   --sbb-button-border-width: #{functions.px-to-rem-build(0)};
   --sbb-button-border-radius: var(--sbb-border-radius-infinity);
-  --sbb-button-transition-duration: var(--sbb-animation-duration-2x);
+  --sbb-button-transition-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-2x)
+  );
   --sbb-button-transition-easing-function: var(--sbb-animation-easing);
   --sbb-button-inset: #{functions.px-to-rem-build(1)};
 
diff --git a/src/components/core/styles/mixins/card.scss b/src/components/core/styles/mixins/card.scss
index 9442606984..ecec51b775 100644
--- a/src/components/core/styles/mixins/card.scss
+++ b/src/components/core/styles/mixins/card.scss
@@ -12,7 +12,10 @@
 @mixin card-variables {
   --sbb-card-background-color: var(--sbb-color-white);
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
-  --sbb-card-animation-duration: var(--sbb-animation-duration-1x);
+  --sbb-card-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-1x)
+  );
   --sbb-card-animation-easing: var(--sbb-animation-easing);
   --sbb-card-border-color: transparent;
   --sbb-card-border-style: solid;
diff --git a/src/components/core/styles/core/font-face.scss b/src/components/core/styles/mixins/font-face.scss
similarity index 100%
rename from src/components/core/styles/core/font-face.scss
rename to src/components/core/styles/mixins/font-face.scss
diff --git a/src/components/core/styles/mixins/overlay.scss b/src/components/core/styles/mixins/overlay.scss
index 5df220cdad..279a14f570 100644
--- a/src/components/core/styles/mixins/overlay.scss
+++ b/src/components/core/styles/mixins/overlay.scss
@@ -15,7 +15,10 @@
   --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
   --sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius)
     var(--sbb-options-panel-border-radius);
-  --sbb-options-panel-animation-duration: var(--sbb-animation-duration-4x);
+  --sbb-options-panel-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-4x)
+  );
   --sbb-options-panel-animation-timing-function: ease;
   --sbb-options-panel-gap-fix-opacity: 0;
   --sbb-options-panel-gap-fix-transform: none;
diff --git a/src/components/core/styles/mixins/panel.scss b/src/components/core/styles/mixins/panel.scss
index 354dfeb654..9856bbdf62 100644
--- a/src/components/core/styles/mixins/panel.scss
+++ b/src/components/core/styles/mixins/panel.scss
@@ -20,7 +20,10 @@
   --sbb-panel-background-color-hover: var(--sbb-color-red);
   --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
   --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
-  --sbb-panel-animation-duration: var(--sbb-animation-duration-4x);
+  --sbb-panel-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-4x)
+  );
   --sbb-panel-animation-easing: var(--sbb-animation-easing);
 
   @include mediaqueries.mq($from: medium) {
diff --git a/src/components/core/styles/typography.scss b/src/components/core/styles/typography.scss
index 378509c451..0d4e18dbc8 100644
--- a/src/components/core/styles/typography.scss
+++ b/src/components/core/styles/typography.scss
@@ -1,5 +1,6 @@
-@use './core/font-face';
+@use './mixins/font-face';
 @use './mixins/a11y';
+@use './mixins/animation';
 @use './mixins/layout';
 @use './mixins/lists';
 @use './mixins/scrollbar';
@@ -151,3 +152,19 @@ input[data-sbb-time-input] {
 .sbb-screen-reader-only {
   @include a11y.screen-reader-only;
 }
+
+.sbb-disable-animation {
+  @include animation.disable-animation;
+}
+
+.sbb-disable-animation-locally {
+  @include animation.disable-animation;
+
+  & > * {
+    @include animation.enable-animation;
+  }
+}
+
+.sbb-enable-animation {
+  @include animation.enable-animation;
+}
diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.stories.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.stories.ts
index 8036726dc4..905057091e 100644
--- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.stories.ts
+++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.stories.ts
@@ -19,10 +19,6 @@ import './datepicker-next-day.js';
 import '../../form-field.js';
 import '../datepicker.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const negative: InputType = {
   control: {
     type: 'boolean',
@@ -102,19 +98,13 @@ export const EmptyFormField: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click', 'change', 'input'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts
index 12eafb11a9..6fcbc06c1a 100644
--- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts
+++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.stories.ts
@@ -19,10 +19,6 @@ import './datepicker-previous-day.js';
 import '../../form-field.js';
 import '../datepicker.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const negative: InputType = {
   control: {
     type: 'boolean',
@@ -105,19 +101,13 @@ export const EmptyFormField: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click', 'change'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts
index 939d877eb3..ded7358ce8 100644
--- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts
+++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts
@@ -61,7 +61,7 @@ describe(`sbb-datepicker-toggle with ${fixture.name}`, () => {
     const root = await fixture(
       html`
         <div>
-          <sbb-datepicker-toggle date-picker="datepicker" disable-animation></sbb-datepicker-toggle>
+          <sbb-datepicker-toggle date-picker="datepicker"></sbb-datepicker-toggle>
           <sbb-datepicker input="datepicker-input" id="datepicker"></sbb-datepicker>
           <input id="datepicker-input" />
         </div>
diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts
index 4cdbb8dc0d..f70cb24db4 100644
--- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts
+++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts
@@ -19,21 +19,11 @@ import { waitForComponentsReady } from '../../../storybook/testing/wait-for-comp
 import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
 import type { SbbPopoverTriggerElement } from '../../popover.js';
 
+import readme from './readme.md?raw';
+
 import '../../form-field.js';
 import '../datepicker.js';
-
 import './datepicker-toggle.js';
-import readme from './readme.md?raw';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
 
 const negative: InputType = {
   control: {
@@ -42,12 +32,10 @@ const negative: InputType = {
 };
 
 const defaultArgTypes: ArgTypes = {
-  'disable-animation': disableAnimation,
   negative,
 };
 
 const defaultArgs: Args = {
-  'disable-animation': isChromatic(),
   negative: false,
 };
 
@@ -119,29 +107,16 @@ export const InFormFieldNegative: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div
-        style=${styleMap({
-          ...wrapperStyle(context),
-          padding: '2rem',
-          ...(isChromatic() ? { 'min-height': '100vh', 'min-width': '100vw' } : undefined),
-        })}
-      >
-        ${story()}
-      </div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     chromatic: { disableSnapshot: false },
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '600px' },
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts
index 8743bb8976..d3552c44d9 100644
--- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts
+++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts
@@ -32,9 +32,6 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) {
   /** Datepicker reference. */
   @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepickerElement;
 
-  /** Whether the animation is disabled. */
-  @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation = false;
-
   @state() private _disabled = false;
 
   @state() private _min: string | number | null | undefined = null;
@@ -187,7 +184,6 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) {
             this._calendarElement.focus();
         }}
         .trigger=${this._triggerElement}
-        ?disable-animation=${this.disableAnimation}
         hide-close-button
         ${ref((el?: Element) => (this._popoverElement = el as SbbPopoverElement))}
       >
diff --git a/src/components/datepicker/datepicker-toggle/readme.md b/src/components/datepicker/datepicker-toggle/readme.md
index b3093ecb9e..34beacb417 100644
--- a/src/components/datepicker/datepicker-toggle/readme.md
+++ b/src/components/datepicker/datepicker-toggle/readme.md
@@ -36,11 +36,10 @@ both standalone or within the `sbb-form-field`, they must have the same parent e
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                                          | Default | Description                        |
-| ------------------ | ------------------- | ------- | --------------------------------------------- | ------- | ---------------------------------- |
-| `datePicker`       | `date-picker`       | public  | `string \| SbbDatepickerElement \| undefined` |         | Datepicker reference.              |
-| `disableAnimation` | `disable-animation` | public  | `boolean`                                     | `false` | Whether the animation is disabled. |
-| `negative`         | `negative`          | public  | `boolean`                                     | `false` | Negative coloring variant flag.    |
+| Name         | Attribute     | Privacy | Type                                          | Default | Description                     |
+| ------------ | ------------- | ------- | --------------------------------------------- | ------- | ------------------------------- |
+| `datePicker` | `date-picker` | public  | `string \| SbbDatepickerElement \| undefined` |         | Datepicker reference.           |
+| `negative`   | `negative`    | public  | `boolean`                                     | `false` | Negative coloring variant flag. |
 
 ## Methods
 
diff --git a/src/components/datepicker/datepicker/datepicker.stories.ts b/src/components/datepicker/datepicker/datepicker.stories.ts
index faec51d661..3eb87b1c11 100644
--- a/src/components/datepicker/datepicker/datepicker.stories.ts
+++ b/src/components/datepicker/datepicker/datepicker.stories.ts
@@ -27,10 +27,6 @@ import '../datepicker-previous-day.js';
 import '../datepicker-toggle.js';
 import '../../form-field.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const value: InputType = {
   control: {
     type: 'text',
@@ -230,15 +226,6 @@ const dataNow: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-  table: {
-    category: 'Testing',
-  },
-};
-
 const basicArgTypes: ArgTypes = {
   value,
   form,
@@ -252,7 +239,6 @@ const basicArgTypes: ArgTypes = {
   dateHandling,
   'aria-label': ariaLabel,
   'data-now': dataNow,
-  disableAnimation,
 };
 
 const basicArgs: Args = {
@@ -264,10 +250,9 @@ const basicArgs: Args = {
   min: undefined,
   max: undefined,
   wide: false,
-  dateFilter: dateFilter.options[0],
-  dateHandling: dateHandling.options[0],
+  dateFilter: dateFilter.options![0],
+  dateHandling: dateHandling.options![0],
   'aria-label': undefined,
-  disableAnimation: isChromatic(),
   dataNow: isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : undefined,
 };
 
@@ -283,7 +268,7 @@ const formFieldBasicArgsTypes: ArgTypes = {
 const formFieldBasicArgs = {
   ...basicArgs,
   label: 'Label',
-  size: size.options[0],
+  size: size.options![0],
   negative: false,
   optional: false,
   borderless: false,
@@ -332,17 +317,12 @@ const Template = ({
   wide,
   dateFilter,
   'data-now': dataNow,
-  disableAnimation,
   ...args
 }: Args): TemplateResult => {
   return html`
     <div style=${styleMap({ display: 'flex', gap: '0.25rem' })}>
       <sbb-datepicker-previous-day date-picker="datepicker"></sbb-datepicker-previous-day>
-      <sbb-datepicker-toggle
-        date-picker="datepicker"
-        data-testid="toggle"
-        ?disable-animation=${disableAnimation}
-      ></sbb-datepicker-toggle>
+      <sbb-datepicker-toggle date-picker="datepicker" data-testid="toggle"></sbb-datepicker-toggle>
       <input ${sbbSpread(args)} id="datepicker-input" ${sbbSpread(getInputAttributes(min, max))} />
       <sbb-datepicker
         id="datepicker"
@@ -375,7 +355,6 @@ const TemplateFormField = ({
   dateFilter,
   dateHandling,
   'data-now': dataNow,
-  disableAnimation,
   ...args
 }: Args): TemplateResult => {
   return html`
@@ -389,10 +368,7 @@ const TemplateFormField = ({
       ${label ? html`<label>${label}</label>` : nothing}
       <sbb-datepicker-previous-day></sbb-datepicker-previous-day>
       <sbb-datepicker-next-day></sbb-datepicker-next-day>
-      <sbb-datepicker-toggle
-        data-testid="toggle"
-        ?disable-animation=${disableAnimation}
-      ></sbb-datepicker-toggle>
+      <sbb-datepicker-toggle data-testid="toggle"></sbb-datepicker-toggle>
       <input ${sbbSpread(args)} ${sbbSpread(getInputAttributes(min, max))} />
       <sbb-datepicker
         .dateFilter=${dateFilter}
@@ -468,19 +444,19 @@ export const InFormFieldWithMinAndMax: StoryObj = {
 export const InFormFieldWithDateFilter: StoryObj = {
   render: TemplateFormField,
   argTypes: { ...formFieldBasicArgsTypes },
-  args: { ...formFieldBasicArgs, dateFilter: dateFilter.options[1] },
+  args: { ...formFieldBasicArgs, dateFilter: dateFilter.options![1] },
 };
 
 export const InFormFieldWithDateParser: StoryObj = {
   render: TemplateFormField,
   argTypes: { ...formFieldBasicArgsTypes },
-  args: { ...formFieldBasicArgs, value: '2023-02-12', dateHandling: dateHandling.options[1] },
+  args: { ...formFieldBasicArgs, value: '2023-02-12', dateHandling: dateHandling.options![1] },
 };
 
 export const InFormFieldLarge: StoryObj = {
   render: TemplateFormField,
   argTypes: { ...formFieldBasicArgsTypes },
-  args: { ...formFieldBasicArgs, size: size.options[1] },
+  args: { ...formFieldBasicArgs, size: size.options![1] },
 };
 
 export const InFormFieldOptional: StoryObj = {
@@ -502,31 +478,17 @@ export const WithoutFormField: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div
-        style=${styleMap({
-          ...wrapperStyle(context),
-          padding: '2rem',
-          'min-height': isChromatic() ? '100vh' : undefined,
-        })}
-      >
-        ${story()}
-      </div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     chromatic: { disableSnapshot: false },
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     actions: {
       handles: ['input', 'change', SbbDatepickerElement.events.validationChange],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '600px' },
-
       extractComponentDescription: () => readme,
     },
   },
diff --git a/src/components/dialog/dialog-actions/dialog-actions.stories.ts b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
index 136b3021e2..6fbfa66524 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.stories.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
@@ -27,14 +27,8 @@ const Template = (): TemplateResult =>
 export const Default: StoryObj = { render: Template };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/dialog/dialog-actions/readme.md b/src/components/dialog/dialog-actions/readme.md
index 814e2db550..7078f368d5 100644
--- a/src/components/dialog/dialog-actions/readme.md
+++ b/src/components/dialog/dialog-actions/readme.md
@@ -1,4 +1,4 @@
-The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/components-sbb-action-group--docs) component. Use it in combination with the [sbb-dialog](/docs/components-sbb-dialog--docs) to display a footer with an action group.
+The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/components-sbb-action-group--docs) component. Use it in combination with the [sbb-dialog](/docs/components-sbb-dialog-sbb-dialog--docs) to display a footer with an action group.
 
 ```html
 <sbb-dialog>
diff --git a/src/components/dialog/dialog-content/dialog-content.stories.ts b/src/components/dialog/dialog-content/dialog-content.stories.ts
index 7a25eb0a47..f62d32a501 100644
--- a/src/components/dialog/dialog-content/dialog-content.stories.ts
+++ b/src/components/dialog/dialog-content/dialog-content.stories.ts
@@ -12,14 +12,8 @@ const Template = (): TemplateResult =>
 export const Default: StoryObj = { render: Template };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/dialog/dialog-content/readme.md b/src/components/dialog/dialog-content/readme.md
index a5edbba220..a83fb562d5 100644
--- a/src/components/dialog/dialog-content/readme.md
+++ b/src/components/dialog/dialog-content/readme.md
@@ -1,4 +1,4 @@
-Use the `sbb-dialog-content` in combination with the [sbb-dialog](/docs/components-sbb-dialog--docs) to display a content inside the dialog.
+Use the `sbb-dialog-content` in combination with the [sbb-dialog](/docs/components-sbb-dialog-sbb-dialog--docs) to display a content inside the dialog.
 
 ```html
 <sbb-dialog>
diff --git a/src/components/dialog/dialog-title/dialog-title.scss b/src/components/dialog/dialog-title/dialog-title.scss
index a71da6504f..3b20d50edb 100644
--- a/src/components/dialog/dialog-title/dialog-title.scss
+++ b/src/components/dialog/dialog-title/dialog-title.scss
@@ -1,16 +1,13 @@
 @use '../../core/styles' as sbb;
 
-// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
-@include sbb.box-sizing;
-
 :host {
-  --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s) 0;
+  --sbb-dialog-title-padding-block: var(--sbb-spacing-responsive-s) 0;
 
   display: contents;
 }
 
 :host([data-overflows]) {
-  --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s);
+  --sbb-dialog-title-padding-block: var(--sbb-spacing-responsive-s);
 }
 
 .sbb-title {
@@ -28,7 +25,7 @@
   align-items: start;
   justify-content: space-between;
   padding-inline: var(--sbb-dialog-padding-inline);
-  padding-block: var(--sbb-dialog-header-padding-block);
+  padding-block: var(--sbb-dialog-title-padding-block);
   background-color: var(--sbb-dialog-background-color);
   border-block-end: var(--sbb-dialog-title-border);
   z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index));
diff --git a/src/components/dialog/dialog-title/dialog-title.stories.ts b/src/components/dialog/dialog-title/dialog-title.stories.ts
index c6d221ba85..5b4137460f 100644
--- a/src/components/dialog/dialog-title/dialog-title.stories.ts
+++ b/src/components/dialog/dialog-title/dialog-title.stories.ts
@@ -27,7 +27,7 @@ const hideOnScroll: InputType = {
   control: {
     type: 'select',
   },
-  options: breakpoints,
+  options: [...breakpoints],
 };
 
 const accessibilityCloseLabel: InputType = {
@@ -58,7 +58,7 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   'back-button': true,
-  'hide-on-scroll': hideOnScroll.options[0],
+  'hide-on-scroll': hideOnScroll.options![0],
   'accessibility-close-label': 'Close dialog',
   'accessibility-back-label': 'Go back',
 };
@@ -79,17 +79,11 @@ export const NoBackButton: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: [SbbDialogTitleElement.events.backClick],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index 5c87cd8477..8514883db3 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -8,7 +8,7 @@ import { SbbLanguageController } from '../../core/controllers.js';
 import type { Breakpoint } from '../../core/dom.js';
 import { EventEmitter } from '../../core/eventing.js';
 import { i18nCloseDialog, i18nGoBack } from '../../core/i18n.js';
-import { SbbTitleElement } from '../../title.js';
+import { SbbTitleBase } from '../../title.js';
 
 import style from './dialog-title.scss?lit&inline';
 
@@ -19,14 +19,10 @@ import '../../button/transparent-button.js';
  * It displays a title inside a dialog header.
  *
  * @event {CustomEvent<void>} requestBackAction - Emits whenever the back button is clicked.
- * @cssprop --sbb-title-margin-block-start - This property is inherited from `SbbTitleElement`
- * and is not relevant to dialog title margin customization.
- * @cssprop --sbb-title-margin-block-end - This property is inherited from `SbbTitleElement`
- * and is not relevant to dialog title margin customization.
  */
 @customElement('sbb-dialog-title')
-export class SbbDialogTitleElement extends SbbTitleElement {
-  public static override styles: CSSResultGroup = [SbbTitleElement.styles, style];
+export class SbbDialogTitleElement extends SbbTitleBase {
+  public static override styles: CSSResultGroup = [SbbTitleBase.styles, style];
   public static readonly events: Record<string, string> = {
     backClick: 'requestBackAction',
   } as const;
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index d4997773e8..4bdcc0838c 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -1,4 +1,4 @@
-The `sbb-dialog-title` component extends the [sbb-title](/docs/components-sbb-title--docs) component. Use it in combination with the [sbb-dialog](/docs/components-sbb-dialog--docs) to display a header in the dialog with a title, a close button and an optional back button.
+The `sbb-dialog-title` component extends the [sbb-title](/docs/components-sbb-title--docs) component. Use it in combination with the [sbb-dialog](/docs/components-sbb-dialog-sbb-dialog--docs) to display a header in the dialog with a title, a close button and an optional back button.
 
 ```html
 <sbb-dialog>
@@ -42,16 +42,16 @@ If a back button is displayed it emits a `requestBackAction` event on click.
 
 ## Properties
 
-| Name                      | Attribute                   | Privacy | Type                         | Default | Description                                                                                                                                                                                    |
-| ------------------------- | --------------------------- | ------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `backButton`              | `back-button`               | public  | `boolean`                    | `false` | Whether a back button is displayed next to the title.                                                                                                                                          |
-| `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the close button element.                                                                                                                              |
-| `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the back button element.                                                                                                                               |
-| `hideOnScroll`            | `hide-on-scroll`            | public  | `Breakpoint \| boolean`      | `false` | Whether to hide the title up to a certain breakpoint.                                                                                                                                          |
-| `level`                   | `level`                     | public  | `SbbTitleLevel`              | `'2'`   | Title level                                                                                                                                                                                    |
-| `visualLevel`             | `visual-level`              | public  | `SbbTitleLevel \| undefined` | `'3'`   | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                             |
-| `negative`                | `negative`                  | public  | `boolean`                    | `false` | Negative coloring variant flag.                                                                                                                                                                |
-| `visuallyHidden`          | `visually-hidden`           | public  | `boolean \| undefined`       |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true |
+| Name                      | Attribute                   | Privacy | Type                         | Default | Description                                                                                                                                                                                     |
+| ------------------------- | --------------------------- | ------- | ---------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `backButton`              | `back-button`               | public  | `boolean`                    | `false` | Whether a back button is displayed next to the title.                                                                                                                                           |
+| `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the close button element.                                                                                                                               |
+| `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the back button element.                                                                                                                                |
+| `hideOnScroll`            | `hide-on-scroll`            | public  | `Breakpoint \| boolean`      | `false` | Whether to hide the title up to a certain breakpoint.                                                                                                                                           |
+| `level`                   | `level`                     | public  | `SbbTitleLevel`              | `'2'`   | Title level                                                                                                                                                                                     |
+| `visualLevel`             | `visual-level`              | public  | `SbbTitleLevel \| undefined` | `'3'`   | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                              |
+| `negative`                | `negative`                  | public  | `boolean`                    | `false` | Negative coloring variant flag.                                                                                                                                                                 |
+| `visuallyHidden`          | `visually-hidden`           | public  | `boolean \| undefined`       |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true. |
 
 ## Events
 
@@ -59,13 +59,6 @@ If a back button is displayed it emits a `requestBackAction` event on click.
 | ------------------- | ------------------- | ------------------------------------------ | -------------- |
 | `requestBackAction` | `CustomEvent<void>` | Emits whenever the back button is clicked. |                |
 
-## CSS Properties
-
-| Name                             | Default                           | Description                                                                                                 |
-| -------------------------------- | --------------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| `--sbb-title-margin-block-start` | `var(--sbb-spacing-responsive-m)` | This property is inherited from `SbbTitleElement` and is not relevant to dialog title margin customization. |
-| `--sbb-title-margin-block-end`   | `var(--sbb-spacing-responsive-s)` | This property is inherited from `SbbTitleElement` and is not relevant to dialog title margin customization. |
-
 ## Slots
 
 | Name | Description                                |
diff --git a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
index 82ba9ac94a..f7f34903d8 100644
--- a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
+++ b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
@@ -2,10 +2,7 @@
 export const snapshots = {};
 
 snapshots["sbb-dialog renders an open dialog Dom"] = 
-`<sbb-dialog
-  data-state="opening"
-  disable-animation=""
->
+`<sbb-dialog data-state="opening">
   <sbb-dialog-title
     level="2"
     role="heading"
diff --git a/src/components/dialog/dialog/dialog.e2e.ts b/src/components/dialog/dialog/dialog.e2e.ts
index 8ab1a0580d..77b550f3ec 100644
--- a/src/components/dialog/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog/dialog.e2e.ts
@@ -36,7 +36,7 @@ describe('sbb-dialog', () => {
   beforeEach(async () => {
     await setViewport({ width: 900, height: 600 });
     element = await fixture(html`
-      <sbb-dialog id="my-dialog-1" disable-animation>
+      <sbb-dialog id="my-dialog-1">
         <sbb-dialog-title>Title</sbb-dialog-title>
         <sbb-dialog-content>Dialog content</sbb-dialog-content>
         <sbb-dialog-actions>Action group</sbb-dialog-actions>
@@ -249,13 +249,13 @@ describe('sbb-dialog', () => {
 
   it('closes stacked dialogs one by one on ESC key pressed', async () => {
     element = await fixture(html`
-      <sbb-dialog id="my-dialog-3" disable-animation>
+      <sbb-dialog id="my-dialog-3">
         <sbb-dialog-title>Title</sbb-dialog-title>
         <sbb-dialog-content>Dialog content</sbb-dialog-content>
         <sbb-dialog-actions>Action group</sbb-dialog-actions>
       </sbb-dialog>
 
-      <sbb-dialog id="stacked-dialog" disable-animation>
+      <sbb-dialog id="stacked-dialog">
         <sbb-dialog-title>Stacked title</sbb-dialog-title>
         <sbb-dialog-content>Dialog content</sbb-dialog-content>
         <sbb-dialog-actions>Action group</sbb-dialog-actions>
@@ -322,11 +322,11 @@ describe('sbb-dialog', () => {
   it('does not close the dialog on other overlay click', async () => {
     await setViewport({ width: 900, height: 600 });
     element = await fixture(html`
-      <sbb-dialog id="my-dialog-4" disable-animation>
+      <sbb-dialog id="my-dialog-4">
         <sbb-dialog-title>Title</sbb-dialog-title>
         <sbb-dialog-content>Dialog content</sbb-dialog-content>
 
-        <sbb-dialog id="inner-dialog" disable-animation>
+        <sbb-dialog id="inner-dialog">
           <sbb-dialog-title>Inner Dialog title</sbb-dialog-title>
           <sbb-dialog-content>Dialog content</sbb-dialog-content>
         </sbb-dialog>
@@ -411,7 +411,7 @@ describe('sbb-dialog with long content', () => {
   beforeEach(async () => {
     await setViewport({ width: 900, height: 300 });
     element = await fixture(html`
-      <sbb-dialog id="my-dialog-1" disable-animation>
+      <sbb-dialog id="my-dialog-1">
         <sbb-dialog-title hide-on-scroll="">Title</sbb-dialog-title>
         <sbb-dialog-content>
           Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his
diff --git a/src/components/dialog/dialog/dialog.scss b/src/components/dialog/dialog/dialog.scss
index ab2c1fe622..1e48171696 100644
--- a/src/components/dialog/dialog/dialog.scss
+++ b/src/components/dialog/dialog/dialog.scss
@@ -17,7 +17,10 @@
   --sbb-dialog-inset: 0 auto auto 0;
   --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
   --sbb-dialog-padding-block: var(--sbb-spacing-responsive-s);
-  --sbb-dialog-animation-duration: var(--sbb-animation-duration-6x);
+  --sbb-dialog-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-6x)
+  );
   --sbb-dialog-animation-easing: ease;
   --sbb-dialog-pointer-events: none;
   --sbb-dialog-backdrop-visibility: hidden;
@@ -74,10 +77,6 @@
   --sbb-dialog-actions-border: none;
 }
 
-:host([disable-animation]) {
-  --sbb-dialog-animation-duration: 0.1ms;
-}
-
 :host([data-overflows]:not([negative])) {
   --sbb-dialog-actions-border: none;
 }
diff --git a/src/components/dialog/dialog/dialog.spec.ts b/src/components/dialog/dialog/dialog.spec.ts
index a6b81c2216..a088966745 100644
--- a/src/components/dialog/dialog/dialog.spec.ts
+++ b/src/components/dialog/dialog/dialog.spec.ts
@@ -14,7 +14,7 @@ describe(`sbb-dialog`, () => {
     let root: SbbDialogElement;
     beforeEach(async () => {
       root = await fixture(
-        html` <sbb-dialog disable-animation>
+        html` <sbb-dialog>
           <sbb-dialog-title>Title</sbb-dialog-title>
           <sbb-dialog-content>Content</sbb-dialog-content>
         </sbb-dialog>`,
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 5ffe7d2dc2..a75808cbb9 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -108,12 +108,6 @@ const accessibilityBackLabel: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const backdropAction: InputType = {
   control: {
     type: 'select',
@@ -129,20 +123,18 @@ const basicArgTypes: ArgTypes = {
   accessibilityBackLabel,
   negative,
   'accessibility-label': accessibilityLabel,
-  'disable-animation': disableAnimation,
   'backdrop-action': backdropAction,
 };
 
 const basicArgs: Args = {
-  level: level.options[1],
+  level: level.options![1],
   backButton: true,
-  hideOnScroll: hideOnScroll.options[0],
+  hideOnScroll: hideOnScroll.options![0],
   accessibilityCloseLabel: 'Close dialog',
   accessibilityBackLabel: 'Go back',
   negative: false,
   'accessibility-label': undefined,
-  'disable-animation': isChromatic(),
-  'backdrop-action': backdropAction.options[0],
+  'backdrop-action': backdropAction.options![0],
 };
 
 const openDialog = (_event: PointerEvent, id: string): void => {
@@ -418,7 +410,7 @@ export const Negative: StoryObj = {
 export const AllowBackdropClick: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, 'backdrop-action': backdropAction.options[1] },
+  args: { ...basicArgs, 'backdrop-action': backdropAction.options![1] },
   play: isChromatic() ? playStory : undefined,
 };
 
@@ -432,7 +424,7 @@ export const LongContent: StoryObj = {
 export const HiddenTitle: StoryObj = {
   render: LongContentTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, hideOnScroll: hideOnScroll.options[7] },
+  args: { ...basicArgs, hideOnScroll: hideOnScroll.options![7] },
 };
 
 export const Form: StoryObj = {
@@ -468,16 +460,7 @@ export const Nested: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html`
-      <div
-        style=${styleMap({ padding: '2rem', 'min-height': isChromatic() ? '100vh' : undefined })}
-      >
-        ${story()}
-      </div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     chromatic: { disableSnapshot: false },
     actions: {
@@ -489,14 +472,11 @@ const meta: Meta = {
         SbbDialogTitleElement.events.backClick,
       ],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '600px' },
       extractComponentDescription: () => readme,
     },
-    layout: 'fullscreen',
   },
   title: 'components/sbb-dialog/sbb-dialog',
 };
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index db2e75f35b..49f06102de 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -65,12 +65,6 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
    */
   @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined;
 
-  /**
-   * Whether the animation is enabled.
-   */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /*
    * The state of the dialog.
    */
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index aede99d23c..894d5c376a 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -4,7 +4,7 @@ It offers the following features:
 - creates a backdrop for disabling interaction below the modal;
 - disables scrolling of the page content while open;
 - manages focus properly by setting it on the first focusable element;
-- can host a [sbb-dialog-actions](/docs/components-sbb-dialog-actions--docs) component in the footer;
+- can host a [sbb-dialog-actions](/docs/components-sbb-dialog-sbb-dialog-actions--docs) component in the footer;
 - has a close button, which is always visible;
 - can display a back button next to the title;
 - adds the appropriate ARIA roles automatically.
@@ -84,7 +84,7 @@ It's possible to display the component in `negative` variant using the self-name
 When using a button to trigger the dialog, ensure to manage the appropriate ARIA attributes on the button element itself. This includes: `aria-haspopup="dialog"` that signals to assistive technologies that the button controls a dialog element,
 `aria-controls="dialog-id"` that connects the button to the dialog by referencing the dialog's ID. Consider using `aria-expanded` to indicate the dialog's current state (open or closed).
 
-The `sbb-dialog` component may visually hide the title thanks to the `hideOnScroll` property of the [sbb-dialog-title](/docs/components-sbb-dialog-title--docs) to create more space for content, this is useful especially on smaller screens. Screen readers and other assistive technologies will still have access to the title information for context.
+The `sbb-dialog` component may visually hide the title thanks to the `hideOnScroll` property of the [sbb-dialog-title](/docs/components-sbb-dialog-sbb-dialog-title--docs) to create more space for content, this is useful especially on smaller screens. Screen readers and other assistive technologies will still have access to the title information for context.
 
 <!-- Auto Generated Below -->
 
@@ -94,7 +94,6 @@ The `sbb-dialog` component may visually hide the title thanks to the `hideOnScro
 | -------------------- | --------------------- | ------- | --------------------- | --------- | -------------------------------------------------------------------- |
 | `backdropAction`     | `backdrop-action`     | public  | `'close' \| 'none'`   | `'close'` | Backdrop click action.                                               |
 | `accessibilityLabel` | `accessibility-label` | public  | `string \| undefined` |           | This will be forwarded as aria-label to the relevant nested element. |
-| `disableAnimation`   | `disable-animation`   | public  | `boolean`             | `false`   | Whether the animation is enabled.                                    |
 | `negative`           | `negative`            | public  | `boolean`             | `false`   | Negative coloring variant flag.                                      |
 
 ## Methods
diff --git a/src/components/divider/divider.stories.ts b/src/components/divider/divider.stories.ts
index 5acfbf7434..3e6d09d98d 100644
--- a/src/components/divider/divider.stories.ts
+++ b/src/components/divider/divider.stories.ts
@@ -9,12 +9,6 @@ import { sbbSpread } from '../../storybook/helpers/spread.js';
 import readme from './readme.md?raw';
 import './divider.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
-
 const Template = (args: Args): TemplateResult => html`
   <div style=${styleMap({ height: '340px', padding: '20px' })}>
     <sbb-divider ${sbbSpread(args)}></sbb-divider>
@@ -43,7 +37,7 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  orientation: orientation.options[0],
+  orientation: orientation.options![0],
   negative: false,
 };
 
@@ -72,13 +66,9 @@ export const dividerNegative: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html` <div style=${styleMap(wrapperStyle(context))}>${story()}</div> `,
-  ],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss
index 1a99abdbf3..eca77f8c70 100644
--- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss
+++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss
@@ -73,7 +73,7 @@
 }
 
 .sbb-expansion-panel-header__toggle-icon {
-  transition: transform var(--sbb-animation-duration-4x);
+  transition: transform var(--sbb-disable-animation-time, var(--sbb-animation-duration-4x));
 
   :host([aria-expanded]:not([aria-expanded='false'])) & {
     transform: rotate(-180deg);
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts
index c837f4a12d..5fd7ae4da6 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts
@@ -1,4 +1,4 @@
-import { assert, expect } from '@open-wc/testing';
+import { aTimeout, assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { fixture } from '../../core/testing/private.js';
@@ -15,7 +15,7 @@ describe(`sbb-expansion-panel with ${fixture.name}`, () => {
   beforeEach(async () => {
     element = await fixture(
       html`
-        <sbb-expansion-panel disable-animation>
+        <sbb-expansion-panel>
           <sbb-expansion-panel-header icon-name="dog-medium">Header</sbb-expansion-panel-header>
           <sbb-expansion-panel-content>Content</sbb-expansion-panel-content>
         </sbb-expansion-panel>
@@ -49,7 +49,7 @@ describe(`sbb-expansion-panel with ${fixture.name}`, () => {
   it('has slotted elements with the correct properties when id are set', async () => {
     element = await fixture(
       html`
-        <sbb-expansion-panel disable-animation>
+        <sbb-expansion-panel>
           <sbb-expansion-panel-header id="header">Header</sbb-expansion-panel-header>
           <sbb-expansion-panel-content id="content">Content</sbb-expansion-panel-content>
         </sbb-expansion-panel>
@@ -86,6 +86,9 @@ describe(`sbb-expansion-panel with ${fixture.name}`, () => {
     const didOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.didOpen);
     const didCloseEventSpy = new EventSpy(SbbExpansionPanelElement.events.didClose);
 
+    await waitForLitRender(element);
+    await aTimeout(100); // TODO: remove when the exp-panel has been migrated from transition to animation
+
     header.click();
     await waitForCondition(() => toggleExpandedEventSpy.events.length === 1);
     expect(toggleExpandedEventSpy.count).to.be.equal(1);
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.scss b/src/components/expansion-panel/expansion-panel/expansion-panel.scss
index 2f55406ee6..188af155e6 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.scss
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.scss
@@ -4,7 +4,10 @@
 @include sbb.box-sizing;
 
 :host {
-  --sbb-expansion-panel-animation-duration: var(--sbb-animation-duration-4x);
+  --sbb-expansion-panel-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-4x)
+  );
   --sbb-expansion-panel-background-color: var(--sbb-color-white);
   --sbb-expansion-panel-content-visibility: hidden;
   --sbb-expansion-panel-grid-template-rows: 0fr;
@@ -48,10 +51,6 @@
       var(--sbb-expansion-panel-animation-duration) var(--sbb-animation-easing);
 }
 
-:host([disable-animation]) {
-  --sbb-expansion-panel-animation-duration: 0.1ms;
-}
-
 :host([data-accordion][data-accordion-first]) {
   --sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);
   --sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.stories.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.stories.ts
index ecf5958553..9dfe4e7e71 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.stories.ts
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.stories.ts
@@ -10,7 +10,6 @@ import type {
 } 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 { SbbExpansionPanelHeaderElement } from '../expansion-panel-header.js';
@@ -86,12 +85,6 @@ const disabled: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const defaultArgTypes: ArgTypes = {
   headerText,
   iconName,
@@ -101,7 +94,6 @@ const defaultArgTypes: ArgTypes = {
   color,
   borderless,
   disabled,
-  'disable-animation': disableAnimation,
 };
 
 const defaultArgs: Args = {
@@ -109,11 +101,10 @@ const defaultArgs: Args = {
   iconName: undefined,
   contentText: 'Content',
   expanded: false,
-  'title-level': titleLevel.options[2],
-  color: color.options[0],
+  'title-level': titleLevel.options![2],
+  color: color.options![0],
   borderless: false,
   disabled: false,
-  'disable-animation': false,
 };
 
 const Template = ({ headerText, iconName, contentText, ...args }: Args): TemplateResult => html`
@@ -149,7 +140,7 @@ export const Default: StoryObj = {
 export const Milk: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[1] },
+  args: { ...defaultArgs, color: color.options![1] },
 };
 
 export const Borderless: StoryObj = {
@@ -179,7 +170,7 @@ export const WithSlottedIcon: StoryObj = {
 export const NoHeadingTag: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, 'title-level': titleLevel.options[6] },
+  args: { ...defaultArgs, 'title-level': titleLevel.options![6] },
 };
 
 export const Expanded: StoryObj = {
@@ -200,27 +191,13 @@ export const LongText: StoryObj = {
   args: { ...defaultArgs, headerText: longText, contentText: longText },
 };
 
-export const NoAnimation: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, 'disable-animation': true },
-};
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color':
-    context.args.color === 'white' && context.args.borderless
-      ? '#bdbdbd'
-      : 'var(--sbb-color-white)',
-});
-
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.color === 'white' && context.args.borderless
+        ? 'var(--sbb-color-cement)'
+        : 'var(--sbb-color-white)',
     actions: {
       handles: [
         SbbExpansionPanelElement.events.willOpen,
@@ -230,9 +207,6 @@ const meta: Meta = {
         SbbExpansionPanelHeaderElement.events.toggleExpanded,
       ],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.ts
index f2bfdbc8af..ca91fde478 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.ts
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.ts
@@ -65,10 +65,6 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
   /** Whether the panel has no border. */
   @property({ reflect: true, type: Boolean }) public borderless = false;
 
-  /** Whether the animations should be disabled. */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /** Emits whenever the `sbb-expansion-panel` starts the opening transition. */
   private _willOpen: EventEmitter<void> = new EventEmitter(
     this,
@@ -107,17 +103,9 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
     if (this.expanded) {
       this._willOpen.emit();
       this._state = 'opening';
-      // As with 0s duration, transitionEnd will not be fired, we need to programmatically trigger didOpen event
-      if (this.disableAnimation) {
-        this._onOpened();
-      }
     } else if (this._state === 'opened') {
       this._willClose.emit();
       this._state = 'closing';
-      // As with 0s duration, transitionEnd will not be fired, we need to programmatically trigger didClose event
-      if (this.disableAnimation) {
-        this._onClosed();
-      }
     }
   }
 
diff --git a/src/components/expansion-panel/expansion-panel/readme.md b/src/components/expansion-panel/expansion-panel/readme.md
index c86ff96c74..4982baf02f 100644
--- a/src/components/expansion-panel/expansion-panel/readme.md
+++ b/src/components/expansion-panel/expansion-panel/readme.md
@@ -71,14 +71,13 @@ and the `aria-hidden` attribute on the content.
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                                 | Default   | Description                                                            |
-| ------------------ | ------------------- | ------- | ------------------------------------ | --------- | ---------------------------------------------------------------------- |
-| `titleLevel`       | `title-level`       | public  | `SbbTitleLevel \| null \| undefined` |           | Heading level; if unset, a `div` will be rendered.                     |
-| `color`            | `color`             | public  | `'white' \| 'milk'`                  | `'white'` | The background color of the panel.                                     |
-| `expanded`         | `expanded`          | public  | `boolean`                            | `false`   | Whether the panel is expanded.                                         |
-| `disabled`         | `disabled`          | public  | `boolean`                            | `false`   | Whether the panel is disabled, so its expanded state can't be changed. |
-| `borderless`       | `borderless`        | public  | `boolean`                            | `false`   | Whether the panel has no border.                                       |
-| `disableAnimation` | `disable-animation` | public  | `boolean`                            | `false`   | Whether the animations should be disabled.                             |
+| Name         | Attribute     | Privacy | Type                                 | Default   | Description                                                            |
+| ------------ | ------------- | ------- | ------------------------------------ | --------- | ---------------------------------------------------------------------- |
+| `titleLevel` | `title-level` | public  | `SbbTitleLevel \| null \| undefined` |           | Heading level; if unset, a `div` will be rendered.                     |
+| `color`      | `color`       | public  | `'white' \| 'milk'`                  | `'white'` | The background color of the panel.                                     |
+| `expanded`   | `expanded`    | public  | `boolean`                            | `false`   | Whether the panel is expanded.                                         |
+| `disabled`   | `disabled`    | public  | `boolean`                            | `false`   | Whether the panel is disabled, so its expanded state can't be changed. |
+| `borderless` | `borderless`  | public  | `boolean`                            | `false`   | Whether the panel has no border.                                       |
 
 ## Events
 
diff --git a/src/components/file-selector/file-selector.scss b/src/components/file-selector/file-selector.scss
index d274007d3a..0eec4f9b3a 100644
--- a/src/components/file-selector/file-selector.scss
+++ b/src/components/file-selector/file-selector.scss
@@ -8,7 +8,10 @@
   --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
   --sbb-file-selector-background-color: var(--sbb-color-white);
   --sbb-file-selector-border-color: var(--sbb-color-cloud);
-  --sbb-file-selector-transition-duration: var(--sbb-animation-duration-2x);
+  --sbb-file-selector-transition-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-2x)
+  );
   --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
 
   display: block;
diff --git a/src/components/file-selector/file-selector.stories.ts b/src/components/file-selector/file-selector.stories.ts
index 625009978d..f88ff6c782 100644
--- a/src/components/file-selector/file-selector.stories.ts
+++ b/src/components/file-selector/file-selector.stories.ts
@@ -67,11 +67,11 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  variant: variant.options[0],
+  variant: variant.options![0],
   disabled: false,
   'title-content': 'Title',
   multiple: false,
-  'multiple-mode': multipleMode.options[0],
+  'multiple-mode': multipleMode.options![0],
   accept: undefined,
   'accessibility-label': 'Select from hard disk',
 };
@@ -126,25 +126,25 @@ export const DefaultMulti: StoryObj = {
 export const DefaultMultiPersistent: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...multipleDefaultArgs, 'multiple-mode': multipleMode.options[1] },
+  args: { ...multipleDefaultArgs, 'multiple-mode': multipleMode.options![1] },
 };
 
 export const Dropzone: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, variant: variant.options[1] },
+  args: { ...defaultArgs, variant: variant.options![1] },
 };
 
 export const DropzoneDisabled: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, variant: variant.options[1], disabled: true },
+  args: { ...defaultArgs, variant: variant.options![1], disabled: true },
 };
 
 export const DropzoneMulti: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...multipleDefaultArgs, variant: variant.options[1] },
+  args: { ...multipleDefaultArgs, variant: variant.options![1] },
 };
 
 export const DropzoneMultiPersistent: StoryObj = {
@@ -152,8 +152,8 @@ export const DropzoneMultiPersistent: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...multipleDefaultArgs,
-    variant: variant.options[1],
-    'multiple-mode': multipleMode.options[1],
+    variant: variant.options![1],
+    'multiple-mode': multipleMode.options![1],
   },
 };
 
@@ -166,7 +166,7 @@ export const DefaultWithError: StoryObj = {
 export const DropzoneWithError: StoryObj = {
   render: TemplateWithError,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, variant: variant.options[1] },
+  args: { ...defaultArgs, variant: variant.options![1] },
 };
 
 export const DefaultOnlyPDF: StoryObj = {
@@ -176,14 +176,11 @@ export const DefaultOnlyPDF: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div>${story()}</div> `, withActions as Decorator],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: [SbbFileSelectorElement.events.fileChangedEvent],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/footer/footer.stories.ts b/src/components/footer/footer.stories.ts
index a45113dad4..3c3d391a30 100644
--- a/src/components/footer/footer.stories.ts
+++ b/src/components/footer/footer.stories.ts
@@ -50,7 +50,7 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  variant: variant.options[1],
+  variant: variant.options![1],
   negative: false,
   expanded: false,
   'accessibility-title': 'Footer',
@@ -259,7 +259,7 @@ export const FooterDefault: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    variant: variant.options[0],
+    variant: variant.options![0],
   },
 };
 
@@ -268,7 +268,7 @@ export const FooterDefaultNegative: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    variant: variant.options[0],
+    variant: variant.options![0],
     negative: true,
   },
 };
@@ -278,7 +278,7 @@ export const FooterDefaultExpanded: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    variant: variant.options[0],
+    variant: variant.options![0],
     expanded: true,
   },
 };
diff --git a/src/components/form-error/form-error.stories.ts b/src/components/form-error/form-error.stories.ts
index bb1bf4876e..d82ff3209c 100644
--- a/src/components/form-error/form-error.stories.ts
+++ b/src/components/form-error/form-error.stories.ts
@@ -2,7 +2,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryContext, StoryObj, Args, ArgTypes } 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';
 
@@ -10,10 +9,6 @@ import readme from './readme.md?raw';
 import '../icon.js';
 import './form-error.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const longText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit, ultricies in tincidunt
 quis, mattis eu quam. Nulla sit amet lorem fermentum, molestie nunc ut, hendrerit risus. Vestibulum rutrum elit et
 lacus sollicitudin, quis malesuada lorem vehicula. Suspendisse at augue quis tellus vulputate tempor. Vivamus urna
@@ -84,15 +79,9 @@ export const ErrorWithCustomIconAndLongMessage: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-  ],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/form-field/form-field-clear/form-field-clear.stories.ts b/src/components/form-field/form-field-clear/form-field-clear.stories.ts
index 673f10f0de..55cd2804fb 100644
--- a/src/components/form-field/form-field-clear/form-field-clear.stories.ts
+++ b/src/components/form-field/form-field-clear/form-field-clear.stories.ts
@@ -10,7 +10,6 @@ import type {
 } 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';
 
@@ -18,10 +17,6 @@ import readme from './readme.md?raw';
 import './form-field-clear.js';
 import '../form-field.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const negativeArg: InputType = {
   control: {
     type: 'boolean',
@@ -104,16 +99,10 @@ export const ReadonlyNegative: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss
index 85c43a6795..72ba435f5e 100644
--- a/src/components/form-field/form-field/form-field.scss
+++ b/src/components/form-field/form-field/form-field.scss
@@ -77,7 +77,7 @@
 }
 
 :host([error-space='reserve']) {
-  --form-field-error-min-height: calc(
+  --sbb-form-field-error-min-height: calc(
     var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs)
   );
   --sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width);
@@ -323,7 +323,7 @@
     will-change: transform, font-size;
 
     transition: {
-      duration: var(--sbb-animation-duration-2x);
+      duration: var(--sbb-disable-animation-time, var(--sbb-animation-duration-2x));
       timing-function: var(--sbb-animation-easing);
       property: transform, font-size;
     }
@@ -426,7 +426,7 @@
 
 .sbb-form-field__error {
   display: flex;
-  min-height: var(--form-field-error-min-height);
+  min-height: var(--sbb-form-field-error-min-height);
   margin-block-start: var(
     --sbb-form-field-error-padding-block-start-override,
     var(--sbb-form-field-error-padding-block-start)
diff --git a/src/components/form-field/form-field/form-field.stories.ts b/src/components/form-field/form-field/form-field.stories.ts
index e7842ff40a..f554458b04 100644
--- a/src/components/form-field/form-field/form-field.stories.ts
+++ b/src/components/form-field/form-field/form-field.stories.ts
@@ -15,10 +15,6 @@ import '../../link.js';
 import '../../popover.js';
 import '../../title.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const formField = (
   {
     'error-space': errorSpace,
@@ -463,7 +459,7 @@ const basicArgs: Args = {
   'floating-label': false,
   optional: false,
   borderless: false,
-  size: size.options[0],
+  size: size.options![0],
   negative: false,
   cssClass: '',
   placeholder: 'Input placeholder',
@@ -471,7 +467,7 @@ const basicArgs: Args = {
   disabled: false,
   readonly: false,
   errorText: 'This is a required field.',
-  width: width.options[0],
+  width: width.options![0],
   active: false,
 };
 
@@ -710,7 +706,7 @@ export const TextareaFloatingWithIcon: StoryObj = {
 export const InputCollapsedWidth: StoryObj = {
   render: TemplateInput,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, width: width.options[1] },
+  args: { ...basicArgs, width: width.options![1] },
 };
 
 export const InputWithIconsDisabled: StoryObj = {
@@ -876,7 +872,7 @@ export const SelectOptionalAndIconsNegative: StoryObj = {
 export const InputCollapsedWidthNegative: StoryObj = {
   render: TemplateInput,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, width: width.options[1], negative: true },
+  args: { ...basicArgs, width: width.options![1], negative: true },
 };
 
 export const InputWithIconsDisabledNegative: StoryObj = {
@@ -952,15 +948,9 @@ export const TextareaFloatingWithIconNegative: StoryObj = {
 
 const meta: Meta = {
   excludeStories: /.*(Active|ActiveNegative)$/,
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-  ],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/header/common/header-action.scss b/src/components/header/common/header-action.scss
index 5381e3405f..8375a93db5 100644
--- a/src/components/header/common/header-action.scss
+++ b/src/components/header/common/header-action.scss
@@ -9,7 +9,10 @@
   --sbb-header-action-background-color: transparent;
   --sbb-header-action-min-height: var(--sbb-size-element-s);
   --sbb-header-action-min-width: var(--sbb-header-action-min-height);
-  --sbb-header-action-transition-duration: var(--sbb-animation-duration-2x);
+  --sbb-header-action-transition-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-2x)
+  );
   --sbb-header-action-transition-easing: var(--sbb-animation-easing);
   --sbb-header-action-border-color: transparent;
   --sbb-header-action-background-inset: 0;
diff --git a/src/components/header/header-button/header-button.stories.ts b/src/components/header/header-button/header-button.stories.ts
index 812efc9c88..ff153df8c6 100644
--- a/src/components/header/header-button/header-button.stories.ts
+++ b/src/components/header/header-button/header-button.stories.ts
@@ -94,9 +94,9 @@ const basicArgTypes: ArgTypes = {
 
 const basicArgs: Args = {
   text: 'Menu',
-  'expand-from': expandFrom.options[0],
+  'expand-from': expandFrom.options![0],
   'icon-name': 'hamburger-menu-small',
-  type: type.options[0],
+  type: type.options![0],
   name: 'header-button',
   value: 'value',
   form: 'form',
@@ -116,17 +116,11 @@ export const sbbHeaderActionButtonMultiple: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style=${styleMap({ padding: '2rem' })}>${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/header/header-link/header-link.stories.ts b/src/components/header/header-link/header-link.stories.ts
index 7ddf3a2bca..801dfc3d00 100644
--- a/src/components/header/header-link/header-link.stories.ts
+++ b/src/components/header/header-link/header-link.stories.ts
@@ -101,9 +101,9 @@ const basicArgTypes: ArgTypes = {
 
 const basicArgs: Args = {
   text: 'Menu',
-  'expand-from': expandFrom.options[0],
+  'expand-from': expandFrom.options![0],
   'icon-name': 'hamburger-menu-small',
-  href: href.options[1],
+  href: href.options![1],
   target: '_blank',
   rel: undefined,
   download: false,
@@ -123,17 +123,11 @@ export const sbbHeaderActionLinkMultiple: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style=${styleMap({ padding: '2rem' })}>${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/header/header/header.e2e.ts b/src/components/header/header/header.e2e.ts
index a1ba752c3a..3faba8da11 100644
--- a/src/components/header/header/header.e2e.ts
+++ b/src/components/header/header/header.e2e.ts
@@ -150,7 +150,7 @@ describe(`sbb-header with ${fixture.name}`, () => {
         <div>
           <sbb-header hide-on-scroll>
             <sbb-header-button id="language-menu-trigger">English</sbb-header-button>
-            <sbb-menu trigger="language-menu-trigger" disable-animation>
+            <sbb-menu trigger="language-menu-trigger">
               <sbb-menu-button>Deutsch</sbb-menu-button>
               <sbb-menu-button>Français</sbb-menu-button>
             </sbb-menu>
diff --git a/src/components/header/header/header.scss b/src/components/header/header/header.scss
index 77eb6ea5a4..3fc6afd833 100644
--- a/src/components/header/header/header.scss
+++ b/src/components/header/header/header.scss
@@ -7,7 +7,10 @@
   // Overwrites logo in slotted and default case
   --sbb-logo-height: #{sbb.px-to-rem-build(16)};
   --sbb-header-position: fixed;
-  --sbb-header-transition-duration: var(--sbb-animation-duration-6x);
+  --sbb-header-transition-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-6x)
+  );
   --sbb-header-inset-inline-end: 0;
 
   @include sbb.mq($from: medium) {
diff --git a/src/components/header/header/header.stories.ts b/src/components/header/header/header.stories.ts
index e04d49fd5e..2717dd6f36 100644
--- a/src/components/header/header/header.stories.ts
+++ b/src/components/header/header/header.stories.ts
@@ -12,7 +12,6 @@ import type {
 import isChromatic from 'chromatic/isChromatic';
 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 { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
@@ -56,7 +55,7 @@ const HeaderBasicTemplate = (
     <sbb-header-button icon-name="globe-small" id="language-menu-trigger" class="last-element">
       English
     </sbb-header-button>
-    <sbb-menu trigger="language-menu-trigger" ?disable-animation=${isChromatic()}>
+    <sbb-menu trigger="language-menu-trigger">
       <sbb-menu-button>Deutsch</sbb-menu-button>
       <sbb-menu-button>Français</sbb-menu-button>
       <sbb-menu-button>Italiano</sbb-menu-button>
@@ -89,11 +88,7 @@ const TemplateWithUserMenu = (args: Args): TemplateResult => html`
       >
         Christina Müller
       </sbb-header-button>
-      <sbb-menu
-        trigger="user-menu-trigger"
-        ?disable-animation=${isChromatic()}
-        data-testid="user-menu"
-      >
+      <sbb-menu trigger="user-menu-trigger" data-testid="user-menu">
         <sbb-menu-link icon-name="user-small" href="/"> Account </sbb-menu-link>
         <sbb-menu-button icon-name="tickets-class-small">Tickets</sbb-menu-button>
         <sbb-menu-button icon-name="shopping-cart-small" amount="1">
@@ -216,23 +211,16 @@ export const ContainerScrollOriginScrollHide: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html`
-      <div style=${styleMap(isChromatic() ? { 'min-height': '100vh' } : {})}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     chromatic: { disableSnapshot: false },
-    backgrounds: {
-      disable: true,
-    },
     actions: {
       handles: ['click'],
     },
     docs: {
       story: {
         inline: false,
+        // Setting the iFrame height ensures that the story has enough space when used in the docs section.
         iframeHeight: '250px',
       },
       extractComponentDescription: () => readme,
diff --git a/src/components/icon/icon.stories.ts b/src/components/icon/icon.stories.ts
index 6681e2cab8..d19f8facf5 100644
--- a/src/components/icon/icon.stories.ts
+++ b/src/components/icon/icon.stories.ts
@@ -2,7 +2,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } 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';
 
@@ -32,16 +31,12 @@ export const Default: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: {
-    name: iconName.options[0],
+    name: iconName.options![0],
   },
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style=${styleMap({ padding: '2rem' })}>${story()}</div> `],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/image/image.e2e.ts b/src/components/image/image.e2e.ts
index fa31448834..fd14b825cc 100644
--- a/src/components/image/image.e2e.ts
+++ b/src/components/image/image.e2e.ts
@@ -41,7 +41,7 @@ describe(`sbb-image with ${fixture.name}`, () => {
             <source media="(min-width: 64rem)" sizes="1200px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1200&amp;h=675&amp;q=45 1200w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=2400&amp;h=1350&amp;q=20 2400w">
             <source media="(min-width: 37.5rem)" sizes="976px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=976&amp;h=549&amp;q=45 976w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1952&amp;h=1098&amp;q=20 1952w">
             <source media="(max-width: 37.4375rem)" sizes="320px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=320&amp;h=180&amp;q=45 320w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=640&amp;h=360&amp;q=20 640w">
-            <img class="image__img" decoding="auto" height="562" loading="eager" src="${url}" width="1000">
+            <img alt="" class="image__img" decoding="auto" height="562" loading="eager" src="${url}" width="1000">
           </picture>
         </div>
       </figure>
diff --git a/src/components/image/image.scss b/src/components/image/image.scss
index 0189465a37..707123c47b 100644
--- a/src/components/image/image.scss
+++ b/src/components/image/image.scss
@@ -4,7 +4,12 @@
 @include sbb.box-sizing;
 
 :host {
-  --image-border-radius: var(--sbb-border-radius-4x);
+  --sbb-image-border-radius: var(--sbb-border-radius-4x);
+  --sbb-image-aspect-ratio: auto;
+  --sbb-image-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-4x)
+  );
 
   display: block;
 }
@@ -28,9 +33,7 @@
 // To support transparent images, we need also to fade out the blurred lqip image.
 // This is not perfect in the case of a non transparent image, but does not look that bad.
 .image__figure :is(.image__img, .image__blur-hash) {
-  :host(:not([disable-animation])) & {
-    transition: opacity var(--sbb-animation-duration-4x) var(--sbb-animation-easing);
-  }
+  transition: opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing);
 }
 
 .image__figure .image__img {
@@ -49,12 +52,12 @@
   position: relative;
   overflow: hidden;
   max-width: 100%;
-  border-radius: var(--image-border-radius);
+  border-radius: var(--sbb-image-border-radius);
 }
 
 // aspect ratios 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16', '16-9'
 .image__figure--ratio-free .image__wrapper {
-  aspect-ratio: auto;
+  aspect-ratio: var(--sbb-image-aspect-ratio);
 }
 
 .image__figure--ratio-1-1 .image__wrapper {
diff --git a/src/components/image/image.stories.ts b/src/components/image/image.stories.ts
index ac9cbdf4c6..14283135f0 100644
--- a/src/components/image/image.stories.ts
+++ b/src/components/image/image.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';
 
@@ -115,12 +114,6 @@ const performanceMark: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const defaultArgTypes: ArgTypes = {
   alt: {},
   caption: {},
@@ -136,7 +129,6 @@ const defaultArgTypes: ArgTypes = {
   loading,
   'skip-lqip': skipLqip,
   'performance-mark': performanceMark,
-  'disable-animation': disableAnimation,
 };
 
 const defaultArgs: Args = {
@@ -144,18 +136,17 @@ const defaultArgs: Args = {
   caption: undefined,
   // we need a string and not boolean, otherwise storybook add/remove the attribute but don't write the value
   'border-radius': 'default',
-  'aspect-ratio': aspectRatio.options[0],
+  'aspect-ratio': aspectRatio.options![0],
   copyright: '',
-  'copyright-holder': copyrightHolder.options[0],
+  'copyright-holder': copyrightHolder.options![0],
   'custom-focal-point': false,
   'focal-point-debug': false,
   'focal-point-x': '',
   'focal-point-y': '',
-  'image-src': imageSrc.options[0],
-  loading: loading.options[1],
+  'image-src': imageSrc.options![0],
+  loading: loading.options![1],
   'skip-lqip': false,
   'performance-mark': '',
-  'disable-animation': isChromatic(),
 };
 
 export const Default: StoryObj = {
@@ -173,7 +164,7 @@ export const TransparentImage: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    'image-src': imageSrc.options[9],
+    'image-src': imageSrc.options![9],
   },
 };
 
@@ -197,7 +188,7 @@ export const RoundBorderRadius: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style="max-width: 480px;">${story()}</div> `],
+  decorators: [(story) => html`<div style="max-width: 480px;">${story()}</div>`],
   parameters: {
     chromatic: { diffThreshold: 0.11, delay: 8000 },
     docs: {
diff --git a/src/components/image/image.ts b/src/components/image/image.ts
index c7515ca941..d35681a423 100644
--- a/src/components/image/image.ts
+++ b/src/components/image/image.ts
@@ -59,6 +59,14 @@ const breakpointMap: Record<string, number> = {
 
 /**
  * It displays an image.
+ *
+ * @cssprop [--sbb-image-aspect-ratio=auto] - When the aspectRatio property
+ * on the component is set to 'free', the CSS declaration of the aspect
+ * ratio is set to var(--sbb-image-aspect-ratio, auto). Since CSS
+ * variables find their way into the shadow DOM, we can use the
+ * --sbb-image-aspect-ratio variable to override the aspect ratio at will.
+ * This way we can have, for example, an image component with an aspect
+ * ratio of 4/3 in smaller viewports and 16/9 in larger viewports.
  */
 @customElement('sbb-image')
 export class SbbImageElement extends LitElement {
@@ -279,10 +287,6 @@ export class SbbImageElement extends LitElement {
   @property({ attribute: 'aspect-ratio' })
   public aspectRatio: InterfaceImageAttributes['aspectRatio'] = '16-9';
 
-  /** Whether the fade animation from blurred to real image should be disabled. */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   private _logPerformanceMarks(): void {
     if (this.performanceMark) {
       performance.clearMarks(this.performanceMark);
@@ -457,6 +461,12 @@ export class SbbImageElement extends LitElement {
 
     const pictureSizeConfigs = this._preparePictureSizeConfigs();
 
+    /**
+     * The alt attribute should always be present for the img element.
+     * If it has an empty string as its value, it is simply ignored
+     * by assistive technologies. If we leave it out completely,
+     * they might try to interpret the img element.
+     */
     return html`
       <figure
         class=${classMap({
@@ -501,7 +511,7 @@ export class SbbImageElement extends LitElement {
               ];
             })}
             <img
-              alt=${this.alt || nothing}
+              alt=${this.alt || ''}
               @load=${this._imageLoaded}
               class="image__img"
               src=${this.imageSrc!}
diff --git a/src/components/image/readme.md b/src/components/image/readme.md
index bfee211e7a..7b45a87f46 100644
--- a/src/components/image/readme.md
+++ b/src/components/image/readme.md
@@ -26,4 +26,9 @@ The size can be set with `pictureSizesConfig`.
 | `pictureSizesConfig` | `picture-sizes-config` | public  | `string \| undefined`                         |                  | With the pictureSizesConfig object, you can pass in information into image about what kind of source elements should get rendered. mediaQueries accepts multiple Media Query entries which can get combined by defining a conditionOperator. Type is: stringified InterfaceImageAttributesSizesConfig-Object An example could look like this: { "breakpoints": \[ { "image": { "height": "675", "width": "1200" }, "mediaQueries": \[ { "conditionFeature": "min-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-large-min" }, "conditionOperator": false } ] }, { "image": { "height": "549", "width": "976" }, "mediaQueries": \[ { "conditionFeature": "min-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-small-min" }, "conditionOperator": false } ] }, { "image": { "height": "180", "width": "320" }, "mediaQueries": \[ { "conditionFeature": "max-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-micro-max" }, "conditionOperator": "and" }, { "conditionFeature": "orientation", "conditionFeatureValue": { "lyneDesignToken": false, "value": "landscape" }, "conditionOperator": false } ] } ] } |
 | `borderRadius`       | `border-radius`        | public  | `'default' \| 'none' \| 'round'`              | `'default'`      | Border radius of the image. Choose between a default radius, no radius and a completely round image.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `aspectRatio`        | `aspect-ratio`         | public  | `InterfaceImageAttributes['aspectRatio']`     | `'16-9'`         | Set an aspect ratio default is '16-9' (16/9) other values: 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16'                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `disableAnimation`   | `disable-animation`    | public  | `boolean`                                     | `false`          | Whether the fade animation from blurred to real image should be disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+
+## CSS Properties
+
+| Name                       | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| -------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-image-aspect-ratio` | `auto`  | When the aspectRatio property on the component is set to 'free', the CSS declaration of the aspect ratio is set to var(--sbb-image-aspect-ratio, auto). Since CSS variables find their way into the shadow DOM, we can use the --sbb-image-aspect-ratio variable to override the aspect ratio at will. This way we can have, for example, an image component with an aspect ratio of 4/3 in smaller viewports and 16/9 in larger viewports. |
diff --git a/src/components/journey-header/journey-header.stories.ts b/src/components/journey-header/journey-header.stories.ts
index d4cd02e954..ee781b8994 100644
--- a/src/components/journey-header/journey-header.stories.ts
+++ b/src/components/journey-header/journey-header.stories.ts
@@ -2,19 +2,12 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, StoryContext } 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 readme from './readme.md?raw';
 import './journey-header.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
-
 const origin: InputType = {
   control: {
     type: 'text',
@@ -66,8 +59,8 @@ const defaultArgs: Args = {
   origin: 'La Chaux de Fonds',
   destination: 'Loèche-les-Bains',
   'round-trip': false,
-  level: level.options[2],
-  size: size.options[0],
+  level: level.options![2],
+  size: size.options![0],
   negative: false,
 };
 
@@ -106,7 +99,7 @@ export const SizeMRoundTripShortText: StoryObj = {
 export const SizeL: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[1] },
+  args: { ...defaultArgs, size: size.options![1] },
 };
 
 export const SizeLRoundTripShortText: StoryObj = {
@@ -117,17 +110,14 @@ export const SizeLRoundTripShortText: StoryObj = {
     origin: 'Bern',
     destination: 'Thun',
     'round-trip': true,
-    size: size.options[1],
+    size: size.options![1],
   },
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-  ],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/journey-summary/journey-summary.stories.ts b/src/components/journey-summary/journey-summary.stories.ts
index 9645f49cc8..46087dd575 100644
--- a/src/components/journey-summary/journey-summary.stories.ts
+++ b/src/components/journey-summary/journey-summary.stories.ts
@@ -78,7 +78,7 @@ const defaultArgs: Args = {
   'disable-animation': isChromatic(),
   'data-now': new Date('2022-12-05T12:11:00').valueOf(),
   'round-trip': false,
-  'header-level': headerLevel.options[2],
+  'header-level': headerLevel.options![2],
   trip: undefined,
   tripBack: undefined,
 };
@@ -242,7 +242,7 @@ export const summaryHeaderLevel: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    'header-level': headerLevel.options[4],
+    'header-level': headerLevel.options![4],
     trip: {
       legs: [pastLeg, progressLeg, futureLeg],
       origin: 'Bern',
@@ -256,11 +256,7 @@ export const summaryHeaderLevel: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html`${story()}`],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/link-list/link-list.stories.ts b/src/components/link-list/link-list.stories.ts
index 7fc40a1274..be33b1afe2 100644
--- a/src/components/link-list/link-list.stories.ts
+++ b/src/components/link-list/link-list.stories.ts
@@ -2,7 +2,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, StoryContext } 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';
 
@@ -10,12 +9,6 @@ import readme from './readme.md?raw';
 import '../link/block-link.js';
 import './link-list.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
-
 const LinkTemplate = (args: Args): TemplateResult => html`
   <sbb-block-link
     href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
@@ -101,11 +94,11 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  orientation: orientation.options[0],
+  orientation: orientation.options![0],
   'horizontal-from': undefined,
-  size: size.options[1],
+  size: size.options![1],
   negative: false,
-  'title-level': titleLevel.options[0],
+  'title-level': titleLevel.options![0],
   'title-content': 'Help & Contact',
 };
 
@@ -122,7 +115,7 @@ export const LinkListXS: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[0],
+    size: size.options![0],
   },
 };
 
@@ -162,12 +155,9 @@ export const LinkListWithSlottedTitle: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-  ],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/link/block-link-button/block-link-button.stories.ts b/src/components/link/block-link-button/block-link-button.stories.ts
index 654ed7c15e..0cbb1fb4cc 100644
--- a/src/components/link/block-link-button/block-link-button.stories.ts
+++ b/src/components/link/block-link-button/block-link-button.stories.ts
@@ -1,13 +1,18 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
-import { styleMap } from 'lit/directives/style-map.js';
-import { html } from 'lit/static-html.js';
+import type {
+  Args,
+  ArgTypes,
+  Decorator,
+  Meta,
+  StoryContext,
+  StoryObj,
+} from '@storybook/web-components';
 
 import {
-  blockLinkCommonDefaultArgTypes,
-  blockLinkCommonDefaultArgs,
   blockFixedWidth,
   blockIconStart,
+  blockLinkCommonDefaultArgs,
+  blockLinkCommonDefaultArgTypes,
   blockM,
   blockMIcon,
   blockNegative,
@@ -18,7 +23,6 @@ import {
   blockXSIcon,
   linkButtonDefaultArgs,
   linkButtonDefaultArgTypes,
-  wrapperStyle,
 } from '../common/link-common-stories.js';
 
 import readme from './readme.md?raw';
@@ -49,13 +53,10 @@ export const BlockFixedWidth: StoryObj = blockFixedWidth;
 const meta: Meta = {
   argTypes: defaultArgTypes,
   args: defaultArgs,
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
diff --git a/src/components/link/block-link-static/block-link-static.stories.ts b/src/components/link/block-link-static/block-link-static.stories.ts
index c6fb3a05a5..bf3a232dd4 100644
--- a/src/components/link/block-link-static/block-link-static.stories.ts
+++ b/src/components/link/block-link-static/block-link-static.stories.ts
@@ -1,13 +1,18 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
-import { styleMap } from 'lit/directives/style-map.js';
-import { html } from 'lit/static-html.js';
+import type {
+  Args,
+  ArgTypes,
+  Decorator,
+  Meta,
+  StoryContext,
+  StoryObj,
+} from '@storybook/web-components';
 
 import {
-  blockLinkCommonDefaultArgTypes,
-  blockLinkCommonDefaultArgs,
   blockFixedWidth,
   blockIconStart,
+  blockLinkCommonDefaultArgs,
+  blockLinkCommonDefaultArgTypes,
   blockM,
   blockMIcon,
   blockNegative,
@@ -18,7 +23,6 @@ import {
   blockXSIcon,
   linkCommonDefaultArgs,
   linkCommonDefaultArgTypes,
-  wrapperStyle,
 } from '../common/link-common-stories.js';
 
 import readme from './readme.md?raw';
@@ -49,13 +53,10 @@ export const BlockFixedWidth: StoryObj = blockFixedWidth;
 const meta: Meta = {
   argTypes: defaultArgTypes,
   args: defaultArgs,
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
diff --git a/src/components/link/block-link/block-link.stories.ts b/src/components/link/block-link/block-link.stories.ts
index 5285a5f575..900a2a08ed 100644
--- a/src/components/link/block-link/block-link.stories.ts
+++ b/src/components/link/block-link/block-link.stories.ts
@@ -1,13 +1,18 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
-import { styleMap } from 'lit/directives/style-map.js';
-import { html } from 'lit/static-html.js';
+import type {
+  Args,
+  ArgTypes,
+  Decorator,
+  Meta,
+  StoryContext,
+  StoryObj,
+} from '@storybook/web-components';
 
 import {
-  blockLinkCommonDefaultArgTypes,
-  blockLinkCommonDefaultArgs,
   blockFixedWidth,
   blockIconStart,
+  blockLinkCommonDefaultArgs,
+  blockLinkCommonDefaultArgTypes,
   blockM,
   blockMIcon,
   blockNegative,
@@ -18,7 +23,6 @@ import {
   blockXSIcon,
   linkDefaultArgs,
   linkDefaultArgTypes,
-  wrapperStyle,
 } from '../common/link-common-stories.js';
 
 import readme from './readme.md?raw';
@@ -49,13 +53,10 @@ export const BlockFixedWidth: StoryObj = blockFixedWidth;
 const meta: Meta = {
   argTypes: defaultArgTypes,
   args: defaultArgs,
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
diff --git a/src/components/link/common/link-common-stories.ts b/src/components/link/common/link-common-stories.ts
index 6d4de19e60..b5cf1ab084 100644
--- a/src/components/link/common/link-common-stories.ts
+++ b/src/components/link/common/link-common-stories.ts
@@ -1,5 +1,5 @@
 import type { InputType } from '@storybook/types';
-import type { Args, ArgTypes, StoryContext, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
@@ -8,12 +8,6 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import '../../icon.js';
 
-export const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
-
 export const paragraphStyle = (negative: boolean): Record<string, string> => ({
   color: negative ? 'var(--sbb-color-aluminium)' : 'var(--sbb-color-iron)',
 });
@@ -133,9 +127,9 @@ export const blockLinkCommonDefaultArgTypes: ArgTypes = {
 };
 
 export const blockLinkCommonDefaultArgs: Args = {
-  size: size.options[1],
+  size: size.options![1],
   'icon-name': undefined,
-  'icon-placement': iconPlacement.options[0],
+  'icon-placement': iconPlacement.options![0],
 };
 
 // link params
@@ -194,7 +188,7 @@ export const linkDefaultArgTypes: ArgTypes = {
 
 export const linkDefaultArgs: Args = {
   ...linkCommonDefaultArgs,
-  href: href.options[1],
+  href: href.options![1],
   target: '_blank',
   rel: undefined,
   download: false,
@@ -251,7 +245,7 @@ export const linkButtonDefaultArgTypes: ArgTypes = {
 
 export const linkButtonDefaultArgs: Args = {
   ...linkCommonDefaultArgs,
-  type: type.options[0],
+  type: type.options![0],
   disabled: false,
   name: 'Button name',
   value: undefined,
@@ -263,48 +257,48 @@ export const linkButtonDefaultArgs: Args = {
 export const blockXS: StoryObj = {
   render: Template,
   args: {
-    size: size.options[0],
+    size: size.options![0],
   },
 };
 
 export const blockS: StoryObj = {
   render: Template,
   args: {
-    size: size.options[1],
+    size: size.options![1],
   },
 };
 
 export const blockM: StoryObj = {
   render: Template,
   args: {
-    size: size.options[2],
+    size: size.options![2],
   },
 };
 
 export const blockXSIcon: StoryObj = {
   render: Template,
   args: {
-    size: size.options[0],
+    size: size.options![0],
     'icon-name': 'chevron-small-right-small',
-    'icon-placement': iconPlacement.options[1],
+    'icon-placement': iconPlacement.options![1],
   },
 };
 
 export const blockSIcon: StoryObj = {
   render: Template,
   args: {
-    size: size.options[1],
+    size: size.options![1],
     'icon-name': 'chevron-small-right-small',
-    'icon-placement': iconPlacement.options[1],
+    'icon-placement': iconPlacement.options![1],
   },
 };
 
 export const blockMIcon: StoryObj = {
   render: Template,
   args: {
-    size: size.options[2],
+    size: size.options![2],
     'icon-name': 'chevron-small-right-small',
-    'icon-placement': iconPlacement.options[1],
+    'icon-placement': iconPlacement.options![1],
   },
 };
 
@@ -320,7 +314,7 @@ export const blockNegative: StoryObj = {
   args: {
     negative: true,
     'icon-name': 'chevron-small-right-small',
-    'icon-placement': iconPlacement.options[1],
+    'icon-placement': iconPlacement.options![1],
   },
 };
 
@@ -328,7 +322,7 @@ export const blockWithSlottedIcon: StoryObj = {
   render: IconSlotTemplate,
   args: {
     'icon-name': 'chevron-small-right-small',
-    'icon-placement': iconPlacement.options[1],
+    'icon-placement': iconPlacement.options![1],
   },
 };
 
diff --git a/src/components/link/link-button/link-button.stories.ts b/src/components/link/link-button/link-button.stories.ts
index 8749172414..fe6f9d68f6 100644
--- a/src/components/link/link-button/link-button.stories.ts
+++ b/src/components/link/link-button/link-button.stories.ts
@@ -1,14 +1,18 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
-import { styleMap } from 'lit/directives/style-map.js';
-import { html } from 'lit/static-html.js';
+import type {
+  Args,
+  ArgTypes,
+  Decorator,
+  Meta,
+  StoryContext,
+  StoryObj,
+} from '@storybook/web-components';
 
 import {
   inline,
   inlineNegative,
   linkButtonDefaultArgs,
   linkButtonDefaultArgTypes,
-  wrapperStyle,
 } from '../common/link-common-stories.js';
 
 import readme from './readme.md?raw';
@@ -29,13 +33,10 @@ export const InlineNegative: StoryObj = inlineNegative;
 const meta: Meta = {
   argTypes: defaultArgTypes,
   args: defaultArgs,
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
diff --git a/src/components/link/link-static/link-static.stories.ts b/src/components/link/link-static/link-static.stories.ts
index f5a2074990..af06db14d1 100644
--- a/src/components/link/link-static/link-static.stories.ts
+++ b/src/components/link/link-static/link-static.stories.ts
@@ -1,14 +1,18 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
-import { styleMap } from 'lit/directives/style-map.js';
-import { html } from 'lit/static-html.js';
+import type {
+  Args,
+  ArgTypes,
+  Decorator,
+  Meta,
+  StoryContext,
+  StoryObj,
+} from '@storybook/web-components';
 
 import {
   inline,
   inlineNegative,
   linkCommonDefaultArgs,
   linkCommonDefaultArgTypes,
-  wrapperStyle,
 } from '../common/link-common-stories.js';
 
 import readme from './readme.md?raw';
@@ -29,13 +33,10 @@ export const InlineNegative: StoryObj = inlineNegative;
 const meta: Meta = {
   argTypes: defaultArgTypes,
   args: defaultArgs,
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
diff --git a/src/components/link/link/link.stories.ts b/src/components/link/link/link.stories.ts
index fa865a2344..11604bbdc9 100644
--- a/src/components/link/link/link.stories.ts
+++ b/src/components/link/link/link.stories.ts
@@ -1,14 +1,18 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
-import { styleMap } from 'lit/directives/style-map.js';
-import { html } from 'lit/static-html.js';
+import type {
+  Args,
+  ArgTypes,
+  Decorator,
+  Meta,
+  StoryContext,
+  StoryObj,
+} from '@storybook/web-components';
 
 import {
   inline,
   inlineNegative,
   linkDefaultArgs,
   linkDefaultArgTypes,
-  wrapperStyle,
 } from '../common/link-common-stories.js';
 
 import readme from './readme.md?raw';
@@ -29,13 +33,10 @@ export const InlineNegative: StoryObj = inlineNegative;
 const meta: Meta = {
   argTypes: defaultArgTypes,
   args: defaultArgs,
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
diff --git a/src/components/loading-indicator/loading-indicator.scss b/src/components/loading-indicator/loading-indicator.scss
index 5d9254e296..81e380356e 100644
--- a/src/components/loading-indicator/loading-indicator.scss
+++ b/src/components/loading-indicator/loading-indicator.scss
@@ -10,11 +10,6 @@
   line-height: 0;
 }
 
-// ":is([variant='circle'], ... )" is redundant but needed to enforce the specificity
-:host([disable-animation]:is([variant='circle'], [variant='window'])) {
-  --sbb-loading-indicator-duration: 0;
-}
-
 :host([color='smoke']) {
   --sbb-loading-indicator-color: var(--sbb-color-smoke);
 }
@@ -27,7 +22,7 @@
   --sbb-loading-indicator-height: var(--sbb-size-icon-ui-small);
   --sbb-loading-indicator-width: var(--sbb-size-icon-ui-small);
   --sbb-loading-indicator-padding: var(--sbb-border-width-2x);
-  --sbb-loading-indicator-duration: 1.5s;
+  --sbb-loading-indicator-duration: var(--sbb-disable-animation-zero-time, 1.5s);
   --sbb-loading-indicator-background-color: var(--sbb-color-white);
   --sbb-loading-indicator-circle-background: conic-gradient(
     from 90deg,
@@ -107,7 +102,10 @@
   --sbb-loading-indicator-height: sbb.px-to-rem-build(32);
   --sbb-loading-indicator-width: sbb.px-to-rem-build(55);
   --sbb-loading-indicator-padding: 0;
-  --sbb-loading-indicator-duration: 0.23s;
+  --sbb-loading-indicator-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-6x)
+  );
 }
 
 :host([variant='window'][size='small']) {
diff --git a/src/components/loading-indicator/loading-indicator.stories.ts b/src/components/loading-indicator/loading-indicator.stories.ts
index 9341d5a670..a60b722e89 100644
--- a/src/components/loading-indicator/loading-indicator.stories.ts
+++ b/src/components/loading-indicator/loading-indicator.stories.ts
@@ -113,24 +113,16 @@ const color: InputType = {
   options: ['default', 'smoke', 'white'],
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const defaultArgTypes: ArgTypes = {
   variant,
   size,
   color,
-  'disable-animation': disableAnimation,
 };
 
 const defaultArgs: Args = {
-  variant: variant.options[0],
-  size: size.options[0],
-  color: color.options[0],
-  'disable-animation': isChromatic(),
+  variant: variant.options![0],
+  size: size.options![0],
+  color: color.options![0],
 };
 
 export const WindowSmallDefault: StoryObj = {
@@ -142,70 +134,60 @@ export const WindowSmallDefault: StoryObj = {
 export const WindowSmallSmoke: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[1] },
+  args: { ...defaultArgs, color: color.options![1] },
 };
 
 export const WindowSmallWhite: StoryObj = {
   render: NegativeTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[2] },
+  args: { ...defaultArgs, color: color.options![2] },
 };
 
 export const WindowLargeDefault: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[1] },
+  args: { ...defaultArgs, size: size.options![1] },
 };
 
 export const WindowLargeSmoke: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[1], size: size.options[1] },
+  args: { ...defaultArgs, color: color.options![1], size: size.options![1] },
 };
 
 export const WindowLargeWhite: StoryObj = {
   render: NegativeTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[2], size: size.options[1] },
+  args: { ...defaultArgs, color: color.options![2], size: size.options![1] },
 };
 
 export const CircleDefault: StoryObj = {
   render: InlineTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, variant: variant.options[1] },
+  args: { ...defaultArgs, variant: variant.options![1] },
 };
 
 export const CircleSmoke: StoryObj = {
   render: InlineTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[1], variant: variant.options[1] },
+  args: { ...defaultArgs, color: color.options![1], variant: variant.options![1] },
 };
 
 export const CircleWhite: StoryObj = {
   render: NegativeInlineTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, color: color.options[2], variant: variant.options[1] },
+  args: { ...defaultArgs, color: color.options![2], variant: variant.options![1] },
 };
 
 export const Accessibility: StoryObj = {
   render: TemplateAccessibility,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[1] },
+  args: { ...defaultArgs, size: size.options![1] },
   play: isChromatic() ? playStory : undefined,
 };
 
-export const NoAnimation: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, 'disable-animation': true },
-};
-
 const meta: Meta = {
-  decorators: [(story) => html` <div style=${styleMap({ padding: '2rem' })}>${story()}</div> `],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/loading-indicator/loading-indicator.ts b/src/components/loading-indicator/loading-indicator.ts
index aca96eabc4..e8cc54c469 100644
--- a/src/components/loading-indicator/loading-indicator.ts
+++ b/src/components/loading-indicator/loading-indicator.ts
@@ -26,10 +26,6 @@ export class SbbLoadingIndicatorElement extends LitElement {
   /** Color variant. */
   @property({ reflect: true }) public color: 'default' | 'smoke' | 'white' = 'default';
 
-  /** Whether the animation is enabled. */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   protected override render(): TemplateResult {
     return html`
       <span class="sbb-loading-indicator">
diff --git a/src/components/loading-indicator/readme.md b/src/components/loading-indicator/readme.md
index f5c435d71b..f11e59d9da 100644
--- a/src/components/loading-indicator/readme.md
+++ b/src/components/loading-indicator/readme.md
@@ -49,9 +49,8 @@ and then append the `sbb-loading-indicator` on it after giving it the correct `a
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                                | Default     | Description                                                                                       |
-| ------------------ | ------------------- | ------- | ----------------------------------- | ----------- | ------------------------------------------------------------------------------------------------- |
-| `variant`          | `variant`           | public  | `'window' \| 'circle' \| undefined` |             | Variant of the loading indicator; `circle` is meant to be used inline, while `window` as overlay. |
-| `size`             | `size`              | public  | `'s' \| 'l'`                        | `'s'`       | Size variant, either s or m.                                                                      |
-| `color`            | `color`             | public  | `'default' \| 'smoke' \| 'white'`   | `'default'` | Color variant.                                                                                    |
-| `disableAnimation` | `disable-animation` | public  | `boolean`                           | `false`     | Whether the animation is enabled.                                                                 |
+| Name      | Attribute | Privacy | Type                                | Default     | Description                                                                                       |
+| --------- | --------- | ------- | ----------------------------------- | ----------- | ------------------------------------------------------------------------------------------------- |
+| `variant` | `variant` | public  | `'window' \| 'circle' \| undefined` |             | Variant of the loading indicator; `circle` is meant to be used inline, while `window` as overlay. |
+| `size`    | `size`    | public  | `'s' \| 'l'`                        | `'s'`       | Size variant, either s or m.                                                                      |
+| `color`   | `color`   | public  | `'default' \| 'smoke' \| 'white'`   | `'default'` | Color variant.                                                                                    |
diff --git a/src/components/logo/logo.stories.ts b/src/components/logo/logo.stories.ts
index 0bb6bb392b..7abfb8d002 100644
--- a/src/components/logo/logo.stories.ts
+++ b/src/components/logo/logo.stories.ts
@@ -9,12 +9,6 @@ import { sbbSpread } from '../../storybook/helpers/spread.js';
 import readme from './readme.md?raw';
 import './logo.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
-
 const Template = (args: Args): TemplateResult => html`<sbb-logo ${sbbSpread(args)}></sbb-logo>`;
 
 const negative: InputType = {
@@ -44,7 +38,7 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   negative: false,
-  'protective-room': protectiveRoom.options[0],
+  'protective-room': protectiveRoom.options![0],
   'accessibility-label': undefined,
 };
 
@@ -57,13 +51,13 @@ export const NoProtectiveRoom: StoryObj = {
 export const MinimalProtectiveRoom: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, 'protective-room': protectiveRoom.options[1] },
+  args: { ...defaultArgs, 'protective-room': protectiveRoom.options![1] },
 };
 
 export const IdealProtectiveRoom: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, 'protective-room': protectiveRoom.options[2] },
+  args: { ...defaultArgs, 'protective-room': protectiveRoom.options![2] },
 };
 
 export const Negative: StoryObj = {
@@ -72,17 +66,15 @@ export const Negative: StoryObj = {
   args: {
     ...defaultArgs,
     negative: true,
-    'protective-room': protectiveRoom.options[2],
+    'protective-room': protectiveRoom.options![2],
   },
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), 'max-width': '300px' })}>${story()}</div>
-    `,
-  ],
+  decorators: [(story) => html`<div style=${styleMap({ 'max-width': '300px' })}>${story()}</div>`],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/map-container/map-container.stories.ts b/src/components/map-container/map-container.stories.ts
index 27f1148087..30e39e8ff7 100644
--- a/src/components/map-container/map-container.stories.ts
+++ b/src/components/map-container/map-container.stories.ts
@@ -94,9 +94,6 @@ const meta: Meta = {
   ],
   parameters: {
     chromatic: { disableSnapshot: false },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/menu/menu-button/menu-button.stories.ts b/src/components/menu/menu-button/menu-button.stories.ts
index cb88c0ef66..f798975d6f 100644
--- a/src/components/menu/menu-button/menu-button.stories.ts
+++ b/src/components/menu/menu-button/menu-button.stories.ts
@@ -21,14 +21,12 @@ const getBasicTemplate = (
 `;
 
 const TemplateMenuAction = (args: Args): TemplateResult => html`
-  <div>${getBasicTemplate(args, 1)} ${getBasicTemplate(args, 2)} ${getBasicTemplate(args, 3)}</div>
+  ${getBasicTemplate(args, 1)} ${getBasicTemplate(args, 2)} ${getBasicTemplate(args, 3)}
 `;
 
 const TemplateMenuActionCustomIcon = (args: Args): TemplateResult => html`
-  <div>
-    ${getBasicTemplate(args, 1, true)} ${getBasicTemplate(args, 2, false)}
-    ${getBasicTemplate(args, 3, true)}
-  </div>
+  ${getBasicTemplate(args, 1, true)} ${getBasicTemplate(args, 2, false)}
+  ${getBasicTemplate(args, 3, true)}
 `;
 
 const text: InputType = {
@@ -121,7 +119,7 @@ const defaultArgs: Args = {
   amount: '99',
   'icon-name': 'tick-small',
   disabled: false,
-  type: type.options[0],
+  type: type.options![0],
   name: 'detail',
   value: 'Value',
   form: 'form-name',
@@ -167,20 +165,14 @@ export const menuActionButtonEllipsis: StoryObj = {
 
 const meta: Meta = {
   decorators: [
-    (story) => html`
-      <div style=${styleMap({ 'background-color': 'var(--sbb-color-black)', width: '320px' })}>
-        ${story()}
-      </div>
-    `,
+    (story) => html`<div style=${styleMap({ width: '256px' })}>${story()}</div>`,
     withActions as Decorator,
   ],
   parameters: {
+    backgroundColor: () => 'var(--sbb-color-black)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/menu/menu-link/menu-link.stories.ts b/src/components/menu/menu-link/menu-link.stories.ts
index 1a1605c680..6cdb65b83f 100644
--- a/src/components/menu/menu-link/menu-link.stories.ts
+++ b/src/components/menu/menu-link/menu-link.stories.ts
@@ -127,7 +127,7 @@ const defaultArgs: Args = {
   text: 'Details',
   amount: '99',
   'icon-name': 'tick-small',
-  href: href.options[0],
+  href: href.options![0],
   target: '_blank',
   rel: undefined,
   download: false,
@@ -180,20 +180,14 @@ export const menuLinkButtonEllipsis: StoryObj = {
 
 const meta: Meta = {
   decorators: [
-    (story) => html`
-      <div style=${styleMap({ 'background-color': 'var(--sbb-color-black)', width: '320px' })}>
-        ${story()}
-      </div>
-    `,
+    (story) => html`<div style=${styleMap({ width: '256px' })}>${story()}</div>`,
     withActions as Decorator,
   ],
   parameters: {
+    backgroundColor: () => 'var(--sbb-color-black)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/menu/menu/menu.e2e.ts b/src/components/menu/menu/menu.e2e.ts
index 08791f53e1..c31df4ea3a 100644
--- a/src/components/menu/menu/menu.e2e.ts
+++ b/src/components/menu/menu/menu.e2e.ts
@@ -21,7 +21,7 @@ describe(`sbb-menu with ${fixture.name}`, () => {
       html`
         <div>
           <sbb-button id="menu-trigger">Menu trigger</sbb-button>
-          <sbb-menu id="menu" trigger="menu-trigger" disable-animation>
+          <sbb-menu id="menu" trigger="menu-trigger">
             <sbb-block-link id="menu-link" href="#" size="xs">Profile</sbb-block-link>
             <sbb-menu-button id="menu-action-1" icon-name="tick-small">View</sbb-menu-button>
             <sbb-menu-button id="menu-action-2" icon-name="pen-small" amount="1" disabled
diff --git a/src/components/menu/menu/menu.scss b/src/components/menu/menu/menu.scss
index e95c6ac595..399e1403e4 100644
--- a/src/components/menu/menu/menu.scss
+++ b/src/components/menu/menu/menu.scss
@@ -6,7 +6,10 @@
 :host {
   --sbb-menu-position-x: 0;
   --sbb-menu-position-y: 0;
-  --sbb-menu-animation-duration: var(--sbb-animation-duration-6x);
+  --sbb-menu-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-6x)
+  );
   --sbb-menu-animation-easing: ease;
   --sbb-menu-transform: translateY(100%);
   --sbb-menu-max-width: 100%;
@@ -52,10 +55,6 @@
   --sbb-menu-inset: 0;
 }
 
-:host([disable-animation]) {
-  --sbb-menu-animation-duration: 0.1ms;
-}
-
 ::slotted(:not(sbb-menu-button, sbb-menu-link, sbb-divider)) {
   display: block;
   padding-inline: var(--sbb-spacing-fixed-5x);
diff --git a/src/components/menu/menu/menu.stories.ts b/src/components/menu/menu/menu.stories.ts
index 12fe4864b8..6976dc84cb 100644
--- a/src/components/menu/menu/menu.stories.ts
+++ b/src/components/menu/menu/menu.stories.ts
@@ -67,22 +67,16 @@ const disabled: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: { type: 'boolean' },
-};
-
 const defaultArgTypes: ArgTypes = {
   'icon-name': iconName,
   amount,
   disabled,
-  'disable-animation': disableAnimation,
 };
 
 const defaultArgs: Args = {
   'icon-name': 'link-small',
   amount: '123',
   disabled: false,
-  'disable-animation': isChromatic(),
 };
 
 const userNameStyle: Args = {
@@ -103,11 +97,7 @@ const triggerButton = (id: string): TemplateResult => html`
 
 const DefaultTemplate = (args: Args): TemplateResult => html`
   ${triggerButton('menu-trigger-1')}
-  <sbb-menu
-    trigger="menu-trigger-1"
-    data-testid="menu"
-    ?disable-animation=${args['disable-animation']}
-  >
+  <sbb-menu trigger="menu-trigger-1" data-testid="menu">
     <sbb-menu-link icon-name=${args['icon-name']} href="https://www.sbb.ch/en">
       View
     </sbb-menu-link>
@@ -122,11 +112,7 @@ const DefaultTemplate = (args: Args): TemplateResult => html`
 
 const ListTemplate = (args: Args): TemplateResult => html`
   ${triggerButton('menu-trigger-1')}
-  <sbb-menu
-    trigger="menu-trigger-1"
-    data-testid="menu"
-    ?disable-animation=${args['disable-animation']}
-  >
+  <sbb-menu trigger="menu-trigger-1" data-testid="menu">
     <sbb-menu-link icon-name=${args['icon-name']} href="https://www.sbb.ch/en">
       View
     </sbb-menu-link>
@@ -140,11 +126,7 @@ const ListTemplate = (args: Args): TemplateResult => html`
 
 const CustomContentTemplate = (args: Args): TemplateResult => html`
   ${triggerButton('menu-trigger-2')}
-  <sbb-menu
-    trigger="menu-trigger-2"
-    data-testid="menu"
-    ?disable-animation=${args['disable-animation']}
-  >
+  <sbb-menu trigger="menu-trigger-2" data-testid="menu">
     <div style=${styleMap(userNameStyle)}>Christina Müller</div>
     <span style=${styleMap(userInfoStyle)}>UIS9057</span>
     <sbb-block-link href="https://www.sbb.ch/en" negative size="xs"> Profile </sbb-block-link>
@@ -163,11 +145,7 @@ const CustomContentTemplate = (args: Args): TemplateResult => html`
 
 const LongContentTemplate = (args: Args): TemplateResult => html`
   ${triggerButton('menu-trigger-3')}
-  <sbb-menu
-    trigger="menu-trigger-3"
-    data-testid="menu"
-    ?disable-animation=${args['disable-animation']}
-  >
+  <sbb-menu trigger="menu-trigger-3" data-testid="menu">
     <sbb-menu-button
       icon-name=${args['icon-name']}
       ?disabled=${args.disabled}
@@ -204,11 +182,7 @@ const LongContentTemplate = (args: Args): TemplateResult => html`
 
 const EllipsisTemplate = (args: Args): TemplateResult => html`
   ${triggerButton('menu-trigger-4')}
-  <sbb-menu
-    trigger="menu-trigger-4"
-    data-testid="menu"
-    ?disable-animation=${args['disable-animation']}
-  >
+  <sbb-menu trigger="menu-trigger-4" data-testid="menu">
     <div style=${styleMap(userNameStyle)}>Christina Müller</div>
     <span style=${styleMap(userInfoStyle)}>UIS9057</span>
     <sbb-block-link href="https://www.sbb.ch/en" negative size="xs"> Profile </sbb-block-link>
@@ -262,16 +236,7 @@ export const Ellipsis: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html`
-      <div
-        style=${styleMap({ padding: '2rem', 'min-height': isChromatic() ? '100vh' : undefined })}
-      >
-        ${story()}
-      </div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     chromatic: { disableSnapshot: false },
     actions: {
@@ -282,12 +247,9 @@ const meta: Meta = {
         SbbMenuElement.events.willClose,
       ],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '400px' },
-
       extractComponentDescription: () => readme,
     },
   },
diff --git a/src/components/menu/menu/menu.ts b/src/components/menu/menu/menu.ts
index c87be994c4..b731f4047e 100644
--- a/src/components/menu/menu/menu.ts
+++ b/src/components/menu/menu/menu.ts
@@ -83,12 +83,6 @@ export class SbbMenuElement extends SbbNamedSlotListMixin<
   }
   private _trigger: string | HTMLElement | null = null;
 
-  /**
-   * Whether the animation is enabled.
-   */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /**
    * This will be forwarded as aria-label to the inner list.
    * Used only if the menu automatically renders the actions inside as a list.
diff --git a/src/components/menu/menu/readme.md b/src/components/menu/menu/readme.md
index 8b8747fdf5..30d942fa9e 100644
--- a/src/components/menu/menu/readme.md
+++ b/src/components/menu/menu/readme.md
@@ -64,7 +64,6 @@ to identify which actions are active and which are not.
 | Name                     | Attribute                  | Privacy | Type                            | Default | Description                                                                                                                       |
 | ------------------------ | -------------------------- | ------- | ------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- |
 | `trigger`                | `trigger`                  | public  | `string \| HTMLElement \| null` | `null`  | The element that will trigger the menu overlay. Accepts both a string (id of an element) or an HTML element.                      |
-| `disableAnimation`       | `disable-animation`        | public  | `boolean`                       | `false` | Whether the animation is enabled.                                                                                                 |
 | `listAccessibilityLabel` | `list-accessibility-label` | public  | `string \| undefined`           |         | This will be forwarded as aria-label to the inner list. Used only if the menu automatically renders the actions inside as a list. |
 
 ## Methods
diff --git a/src/components/message/message.stories.ts b/src/components/message/message.stories.ts
index deb79c5fde..8c21eca167 100644
--- a/src/components/message/message.stories.ts
+++ b/src/components/message/message.stories.ts
@@ -125,16 +125,11 @@ export const SlottedTitle: StoryObj = {
 const meta: Meta = {
   decorators: [
     (story) => html`
-      <div style=${styleMap({ padding: '1rem', 'max-width': '45rem', margin: 'auto' })}>
-        ${story()}
-      </div>
+      <div style=${styleMap({ 'max-width': '45rem', margin: 'auto' })}>${story()}</div>
     `,
     withActions as Decorator,
   ],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/navigation/common/navigation-action.scss b/src/components/navigation/common/navigation-action.scss
index 3edc2c96a2..74e1703323 100644
--- a/src/components/navigation/common/navigation-action.scss
+++ b/src/components/navigation/common/navigation-action.scss
@@ -55,7 +55,7 @@ sbb-icon {
   display: flex;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
-  transition: color var(--sbb-animation-duration-3x) ease;
+  transition: color var(--sbb-disable-animation-time, var(--sbb-animation-duration-3x)) ease;
   hyphens: auto;
   text-align: left;
   color: var(--sbb-navigation-action-color);
diff --git a/src/components/navigation/navigation-button/navigation-button.stories.ts b/src/components/navigation/navigation-button/navigation-button.stories.ts
index 43c4071197..1e63140a44 100644
--- a/src/components/navigation/navigation-button/navigation-button.stories.ts
+++ b/src/components/navigation/navigation-button/navigation-button.stories.ts
@@ -1,7 +1,6 @@
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
 import { html, type TemplateResult } from 'lit';
-import { styleMap, type StyleInfo } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
@@ -68,8 +67,8 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  size: size.options[0],
-  type: type.options[0],
+  size: size.options![0],
+  type: type.options![0],
   name: 'detail',
   value: 'Value',
   form: 'form-name',
@@ -80,12 +79,6 @@ const Template = (args: Args): TemplateResult => html`
   <sbb-navigation-button ${sbbSpread(args)}>Label</sbb-navigation-button>
 `;
 
-const style: Readonly<StyleInfo> = {
-  'background-color': 'var(--sbb-color-midnight)',
-  width: 'max-content',
-  padding: '1rem 2rem',
-};
-
 export const SizeL: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
@@ -95,21 +88,18 @@ export const SizeL: StoryObj = {
 export const SizeM: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[1] },
+  args: { ...defaultArgs, size: size.options![1] },
 };
 
 export const SizeS: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[2] },
+  args: { ...defaultArgs, size: size.options![2] },
 };
 
 const meta: Meta = {
-  decorators: [(story) => html`<div style=${styleMap(style)}>${story()}</div>`],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: () => 'var(--sbb-color-midnight)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/navigation/navigation-link/navigation-link.stories.ts b/src/components/navigation/navigation-link/navigation-link.stories.ts
index 60f5984e6f..da5c648211 100644
--- a/src/components/navigation/navigation-link/navigation-link.stories.ts
+++ b/src/components/navigation/navigation-link/navigation-link.stories.ts
@@ -2,8 +2,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 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';
 
@@ -76,8 +74,8 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  size: size.options[0],
-  href: href.options[0],
+  size: size.options![0],
+  href: href.options![0],
   target: '_blank',
   rel: undefined,
   download: false,
@@ -88,12 +86,6 @@ const Template = (args: Args): TemplateResult => html`
   <sbb-navigation-link ${sbbSpread(args)}>Label</sbb-navigation-link>
 `;
 
-const style: Readonly<StyleInfo> = {
-  'background-color': 'var(--sbb-color-midnight)',
-  width: 'max-content',
-  padding: '1rem 2rem',
-};
-
 export const SizeL: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
@@ -103,21 +95,18 @@ export const SizeL: StoryObj = {
 export const SizeM: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[1] },
+  args: { ...defaultArgs, size: size.options![1] },
 };
 
 export const SizeS: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[2] },
+  args: { ...defaultArgs, size: size.options![2] },
 };
 
 const meta: Meta = {
-  decorators: [(story) => html`<div style=${styleMap(style)}>${story()}</div>`],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: () => 'var(--sbb-color-midnight)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/navigation/navigation-list/navigation-list.stories.ts b/src/components/navigation/navigation-list/navigation-list.stories.ts
index f2d360aef5..b84bfbac67 100644
--- a/src/components/navigation/navigation-list/navigation-list.stories.ts
+++ b/src/components/navigation/navigation-list/navigation-list.stories.ts
@@ -2,8 +2,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 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';
 
@@ -32,12 +30,6 @@ const navigationActions = (): TemplateResult => html`
   <sbb-navigation-button>Help & Contact</sbb-navigation-button>
 `;
 
-const style: Readonly<StyleInfo> = {
-  'background-color': 'var(--sbb-color-midnight)',
-  width: 'max-content',
-  padding: '2rem',
-};
-
 const DefaultTemplate = (args: Args): TemplateResult => html`
   <sbb-navigation-list ${sbbSpread(args)}>${navigationActions()}</sbb-navigation-list>
 `;
@@ -62,11 +54,8 @@ export const SlottedLabel: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style=${styleMap(style)}>${story()}</div> `],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: () => 'var(--sbb-color-midnight)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/navigation/navigation-marker/navigation-marker.scss b/src/components/navigation/navigation-marker/navigation-marker.scss
index e1cdb45f6e..94f37e8456 100644
--- a/src/components/navigation/navigation-marker/navigation-marker.scss
+++ b/src/components/navigation/navigation-marker/navigation-marker.scss
@@ -54,7 +54,7 @@
     border-block-start: var(--sbb-navigation-marker-border) solid var(--sbb-color-storm);
     margin-block: var(--sbb-navigation-marker-margin-block);
     transition: {
-      duration: var(--sbb-animation-duration-6x);
+      duration: var(--sbb-disable-animation-time, var(--sbb-animation-duration-6x));
       timing-function: ease;
       property: opacity, inset-block-start;
     }
diff --git a/src/components/navigation/navigation-marker/navigation-marker.stories.ts b/src/components/navigation/navigation-marker/navigation-marker.stories.ts
index fa535013a5..17a40ac18c 100644
--- a/src/components/navigation/navigation-marker/navigation-marker.stories.ts
+++ b/src/components/navigation/navigation-marker/navigation-marker.stories.ts
@@ -2,8 +2,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html, nothing } 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';
 
@@ -23,13 +21,7 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  size: size.options[0],
-};
-
-const style: Readonly<StyleInfo> = {
-  'background-color': 'var(--sbb-color-midnight)',
-  width: 'max-content',
-  padding: '2rem',
+  size: size.options![0],
 };
 
 const navigationActionsL = (active: boolean): TemplateResult => html`
@@ -75,7 +67,7 @@ export const SizeL: StoryObj = {
 export const SizeS: StoryObj = {
   render: SizeSTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[1] },
+  args: { ...defaultArgs, size: size.options![1] },
 };
 
 export const SizeLActive: StoryObj = {
@@ -87,15 +79,12 @@ export const SizeLActive: StoryObj = {
 export const SizeSActive: StoryObj = {
   render: SizeSActiveTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[1] },
+  args: { ...defaultArgs, size: size.options![1] },
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style=${styleMap(style)}>${story()}</div> `],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: () => 'var(--sbb-color-midnight)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/navigation/navigation-section/navigation-section.e2e.ts b/src/components/navigation/navigation-section/navigation-section.e2e.ts
index 8b001cad77..d8ec071141 100644
--- a/src/components/navigation/navigation-section/navigation-section.e2e.ts
+++ b/src/components/navigation/navigation-section/navigation-section.e2e.ts
@@ -16,8 +16,8 @@ describe(`sbb-navigation-section with ${fixture.name}`, () => {
   beforeEach(async () => {
     const root = await fixture(
       html`
-        <sbb-navigation disable-animation>
-          <sbb-navigation-section disable-animation>
+        <sbb-navigation>
+          <sbb-navigation-section>
             <sbb-navigation-list>
               <sbb-navigation-button>Tickets & Offers</sbb-navigation-button>
               <sbb-navigation-button>Vacations & Recreation</sbb-navigation-button>
diff --git a/src/components/navigation/navigation-section/navigation-section.scss b/src/components/navigation/navigation-section/navigation-section.scss
index f59a421ae3..98541f51b9 100644
--- a/src/components/navigation/navigation-section/navigation-section.scss
+++ b/src/components/navigation/navigation-section/navigation-section.scss
@@ -8,7 +8,10 @@
   --sbb-navigation-section-column: 1 / 5;
   --sbb-navigation-section-position: fixed;
   --sbb-navigation-section-pointer-events: none;
-  --sbb-navigation-section-animation-duration: var(--sbb-animation-duration-3x);
+  --sbb-navigation-section-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-3x)
+  );
   --sbb-navigation-section-animation-easing: ease-out;
   --sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);
   --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);
@@ -42,7 +45,10 @@
 
   @include sbb.mq($from: large) {
     --sbb-navigation-section-column: 5 / 9;
-    --sbb-navigation-section-animation-duration: var(--sbb-animation-duration-4x);
+    --sbb-navigation-section-animation-duration: var(
+      --sbb-disable-animation-time,
+      var(--sbb-animation-duration-4x)
+    );
     --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);
     --sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x)
       var(--sbb-layout-base-offset-responsive);
@@ -83,10 +89,6 @@
   --sbb-navigation-section-display: block;
 }
 
-:host([disable-animation]) {
-  --sbb-navigation-section-animation-duration: 0.1ms;
-}
-
 ::slotted(*) {
   padding-inline-start: var(--sbb-navigation-section-content-padding-inline-start);
 }
diff --git a/src/components/navigation/navigation-section/navigation-section.stories.ts b/src/components/navigation/navigation-section/navigation-section.stories.ts
index 5c4e21db46..af54053f02 100644
--- a/src/components/navigation/navigation-section/navigation-section.stories.ts
+++ b/src/components/navigation/navigation-section/navigation-section.stories.ts
@@ -45,20 +45,12 @@ const accessibilityLabel: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const basicArgTypes: ArgTypes = {
   'accessibility-label': accessibilityLabel,
-  'disable-animation': disableAnimation,
 };
 
 const basicArgs: Args = {
   'accessibility-label': undefined,
-  'disable-animation': isChromatic(),
 };
 
 const triggerButton = (id: string): TemplateResult => html`
@@ -90,12 +82,7 @@ const navigationList = (label: string): TemplateResult => html`
 
 const DefaultTemplate = (args: Args): TemplateResult => html`
   ${triggerButton('navigation-trigger-1')}
-  <sbb-navigation
-    data-testid="navigation"
-    id="navigation"
-    trigger="navigation-trigger-1"
-    ?disable-animation=${args['disable-animation']}
-  >
+  <sbb-navigation data-testid="navigation" id="navigation" trigger="navigation-trigger-1">
     <sbb-navigation-marker id="nav-marker">${navigationActionsL()}</sbb-navigation-marker>
 
     <sbb-navigation-section
@@ -146,18 +133,13 @@ export const LongContent: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style="padding: 2rem; height: 100vh;">${story()}</div> `],
   parameters: {
     chromatic: { disableSnapshot: false },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '600px' },
-
       extractComponentDescription: () => readme,
     },
-    layout: 'fullscreen',
   },
   title: 'components/sbb-navigation/sbb-navigation-section',
 };
diff --git a/src/components/navigation/navigation-section/navigation-section.ts b/src/components/navigation/navigation-section/navigation-section.ts
index 846c82ee5f..a3bb031f45 100644
--- a/src/components/navigation/navigation-section/navigation-section.ts
+++ b/src/components/navigation/navigation-section/navigation-section.ts
@@ -72,12 +72,6 @@ export class SbbNavigationSectionElement extends SbbUpdateSchedulerMixin(LitElem
     | string
     | undefined;
 
-  /**
-   * Whether the animation is enabled.
-   */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /**
    * The state of the navigation section.
    */
diff --git a/src/components/navigation/navigation-section/readme.md b/src/components/navigation/navigation-section/readme.md
index 6d632f8113..f016187c47 100644
--- a/src/components/navigation/navigation-section/readme.md
+++ b/src/components/navigation/navigation-section/readme.md
@@ -32,7 +32,6 @@ Similarly, if a navigation action is marked to indicate a selected option (e.g.,
 | `trigger`                | `trigger`                  | public  | `string \| HTMLElement \| null` | `null`  | The element that will trigger the navigation section. Accepts both a string (id of an element) or an HTML element. |
 | `accessibilityLabel`     | `accessibility-label`      | public  | `string \| undefined`           |         | This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section.          |
 | `accessibilityBackLabel` | `accessibility-back-label` | public  | `\| string     \| undefined`    |         | This will be forwarded as aria-label to the back button element.                                                   |
-| `disableAnimation`       | `disable-animation`        | public  | `boolean`                       | `false` | Whether the animation is enabled.                                                                                  |
 
 ## Methods
 
diff --git a/src/components/navigation/navigation/navigation.e2e.ts b/src/components/navigation/navigation/navigation.e2e.ts
index e4b9743839..271272b075 100644
--- a/src/components/navigation/navigation/navigation.e2e.ts
+++ b/src/components/navigation/navigation/navigation.e2e.ts
@@ -20,7 +20,7 @@ describe(`sbb-navigation with ${fixture.name}`, () => {
   beforeEach(async () => {
     element = await fixture(
       html`
-        <sbb-navigation id="navigation" disable-animation>
+        <sbb-navigation id="navigation">
           <sbb-navigation-marker>
             <sbb-navigation-button id="action-1">Tickets & Offers</sbb-navigation-button>
             <sbb-navigation-button id="action-2">Vacations & Recreation</sbb-navigation-button>
@@ -28,11 +28,11 @@ describe(`sbb-navigation with ${fixture.name}`, () => {
             <sbb-navigation-button sbb-navigation-close>Help & Contact</sbb-navigation-button>
           </sbb-navigation-marker>
 
-          <sbb-navigation-section trigger="action-1" id="first-section" disable-animation>
+          <sbb-navigation-section trigger="action-1" id="first-section">
             <sbb-navigation-button sbb-navigation-section-close>Label</sbb-navigation-button>
             <sbb-navigation-button>Label</sbb-navigation-button>
           </sbb-navigation-section>
-          <sbb-navigation-section trigger="action-2" id="second-section" disable-animation>
+          <sbb-navigation-section trigger="action-2" id="second-section">
             <sbb-navigation-button>Label</sbb-navigation-button>
             <sbb-navigation-button>Label</sbb-navigation-button>
           </sbb-navigation-section>
@@ -69,7 +69,7 @@ describe(`sbb-navigation with ${fixture.name}`, () => {
   it('sets the initial active actions and focuses on the close button', async () => {
     element = await fixture(
       html`
-        <sbb-navigation id="navigation" disable-animation>
+        <sbb-navigation id="navigation">
           <sbb-navigation-marker>
             <sbb-navigation-button>Tickets & Offers</sbb-navigation-button>
             <sbb-navigation-button id="action-active-1" class="sbb-active"
@@ -117,7 +117,7 @@ describe(`sbb-navigation with ${fixture.name}`, () => {
   it('sets the initial active action and opens the connected section', async () => {
     element = await fixture(
       html`
-        <sbb-navigation id="navigation" disable-animation>
+        <sbb-navigation id="navigation">
           <sbb-navigation-marker>
             <sbb-navigation-button>Tickets & Offers</sbb-navigation-button>
             <sbb-navigation-button id="action-active" class="sbb-active"
@@ -125,7 +125,7 @@ describe(`sbb-navigation with ${fixture.name}`, () => {
             >
           </sbb-navigation-marker>
 
-          <sbb-navigation-section trigger="action-active" id="active-section" disable-animation>
+          <sbb-navigation-section trigger="action-active" id="active-section">
             <sbb-navigation-button>Label</sbb-navigation-button>
             <sbb-navigation-button id="section-action-active" class="sbb-active"
               >Label</sbb-navigation-button
@@ -173,7 +173,7 @@ describe(`sbb-navigation with ${fixture.name}`, () => {
   it('resets the markers on navigation close', async () => {
     element = await fixture(
       html`
-        <sbb-navigation id="navigation" disable-animation>
+        <sbb-navigation id="navigation">
           <sbb-navigation-marker>
             <sbb-navigation-button id="first-action">Tickets & Offers</sbb-navigation-button>
             <sbb-navigation-button id="second-action" class="sbb-active"
diff --git a/src/components/navigation/navigation/navigation.scss b/src/components/navigation/navigation/navigation.scss
index 011e8743ba..7cc2625bd0 100644
--- a/src/components/navigation/navigation/navigation.scss
+++ b/src/components/navigation/navigation/navigation.scss
@@ -13,7 +13,10 @@
 
 :host {
   --sbb-navigation-grid-column: 1 / 5;
-  --sbb-navigation-animation-duration: var(--sbb-animation-duration-3x);
+  --sbb-navigation-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-3x)
+  );
   --sbb-navigation-animation-easing: ease-in;
   --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);
   --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);
@@ -50,7 +53,10 @@
 
   @include sbb.mq($from: large) {
     --sbb-navigation-grid-column: 1 / 5;
-    --sbb-navigation-animation-duration: var(--sbb-animation-duration-6x);
+    --sbb-navigation-animation-duration: var(
+      --sbb-disable-animation-time,
+      var(--sbb-animation-duration-6x)
+    );
     --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);
     --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;
     --sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);
@@ -94,8 +100,8 @@
   }
 }
 
-:host(:is([data-resize-disable-animation], [disable-animation])) {
-  --sbb-navigation-animation-duration: 0.1ms;
+:host([data-resize-disable-animation]) {
+  @include sbb.disable-animation;
 }
 
 .sbb-navigation__container {
diff --git a/src/components/navigation/navigation/navigation.stories.ts b/src/components/navigation/navigation/navigation.stories.ts
index 0a0dcd3092..3fa14d4f66 100644
--- a/src/components/navigation/navigation/navigation.stories.ts
+++ b/src/components/navigation/navigation/navigation.stories.ts
@@ -71,22 +71,14 @@ const accessibilityCloseLabel: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const basicArgTypes: ArgTypes = {
   'aria-label': ariaLabel,
   'accessibility-close-label': accessibilityCloseLabel,
-  'disable-animation': disableAnimation,
 };
 
 const basicArgs: Args = {
   'aria-label': undefined,
   'accessibility-close-label': undefined,
-  'disable-animation': isChromatic(),
 };
 
 const triggerButton = (id: string): TemplateResult => html`
@@ -182,11 +174,7 @@ const WithNavigationSectionTemplate = (args: Args): TemplateResult => html`
     <sbb-navigation-marker id="nav-marker">${navigationActionsL()}</sbb-navigation-marker>
     <sbb-navigation-marker size="s">${navigationActionsS()}</sbb-navigation-marker>
 
-    <sbb-navigation-section
-      trigger="nav-1"
-      title-content="Title one"
-      ?disable-animation=${args['disable-animation']}
-    >
+    <sbb-navigation-section trigger="nav-1" title-content="Title one">
       ${navigationList('Label')} ${navigationList('Label')} ${navigationList('Label')}
       ${navigationList('Label')} ${navigationList('Label')} ${navigationList('Label')}
       <sbb-button size="m" style="width: fit-content"> All Tickets & Offers </sbb-button>
@@ -195,18 +183,13 @@ const WithNavigationSectionTemplate = (args: Args): TemplateResult => html`
     <sbb-navigation-section
       trigger="nav-2"
       title-content="Title two"
-      ?disable-animation=${args['disable-animation']}
       data-testid="navigation-section"
     >
       ${navigationList('Label', true)} ${navigationList('Label')} ${navigationList('Label')}
       ${navigationList('Label')} ${navigationList('Label')} ${navigationList('Label')}
     </sbb-navigation-section>
 
-    <sbb-navigation-section
-      trigger="nav-3"
-      title-content="Title three"
-      ?disable-animation=${args['disable-animation']}
-    >
+    <sbb-navigation-section trigger="nav-3" title-content="Title three">
       ${navigationList('Label')} ${navigationList('Label')} ${navigationList('Label')}
       <sbb-secondary-button
         size="m"
@@ -237,14 +220,11 @@ export const WithNavigationSection: StoryObj = {
   render: WithNavigationSectionTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs },
-  play: playStoryWithSection,
+  play: isChromatic() ? playStoryWithSection : undefined,
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem; height: 100vh;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     chromatic: { disableSnapshot: false },
     actions: {
@@ -255,15 +235,11 @@ const meta: Meta = {
         SbbNavigationElement.events.willClose,
       ],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '600px' },
-
       extractComponentDescription: () => readme,
     },
-    layout: 'fullscreen',
   },
   title: 'components/sbb-navigation/sbb-navigation',
 };
diff --git a/src/components/navigation/navigation/navigation.ts b/src/components/navigation/navigation/navigation.ts
index e88dd33234..81bfaa50f8 100644
--- a/src/components/navigation/navigation/navigation.ts
+++ b/src/components/navigation/navigation/navigation.ts
@@ -82,12 +82,6 @@ export class SbbNavigationElement extends SbbUpdateSchedulerMixin(LitElement) {
     | string
     | undefined;
 
-  /**
-   * Whether the animation is enabled.
-   */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /**
    * The state of the navigation.
    */
diff --git a/src/components/navigation/navigation/readme.md b/src/components/navigation/navigation/readme.md
index 5932e3d857..89fe4fd4fe 100644
--- a/src/components/navigation/navigation/readme.md
+++ b/src/components/navigation/navigation/readme.md
@@ -62,7 +62,6 @@ Similarly, if a navigation action is marked to indicate a selected option (e.g.,
 | ------------------------- | --------------------------- | ------- | ------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
 | `trigger`                 | `trigger`                   | public  | `string \| HTMLElement \| null` | `null`  | The element that will trigger the navigation. Accepts both a string (id of an element) or an HTML element. |
 | `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined`    |         | This will be forwarded as aria-label to the close button element.                                          |
-| `disableAnimation`        | `disable-animation`         | public  | `boolean`                       | `false` | Whether the animation is enabled.                                                                          |
 | `activeNavigationSection` | -                           | public  | `HTMLElement \| null`           | `null`  |                                                                                                            |
 
 ## Methods
diff --git a/src/components/notification/notification.e2e.ts b/src/components/notification/notification.e2e.ts
index 26ce993f22..cb76f312f3 100644
--- a/src/components/notification/notification.e2e.ts
+++ b/src/components/notification/notification.e2e.ts
@@ -15,7 +15,7 @@ describe(`sbb-notification with ${fixture.name}`, () => {
   beforeEach(async () => {
     element = await fixture(
       html`
-        <sbb-notification id="notification" disable-animation>
+        <sbb-notification id="notification">
           The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
           <sbb-link href="/">Link one</sbb-link>
         </sbb-notification>
@@ -33,7 +33,7 @@ describe(`sbb-notification with ${fixture.name}`, () => {
     const willCloseEventSpy = new EventSpy(SbbNotificationElement.events.willClose);
     const didCloseEventSpy = new EventSpy(SbbNotificationElement.events.didClose);
 
-    expect(element).not.to.be.null;
+    await waitForCondition(() => element.getAttribute('data-state') === 'opened');
     expect(element).to.have.attribute('data-state', 'opened');
 
     element.close();
@@ -62,7 +62,7 @@ describe(`sbb-notification with ${fixture.name}`, () => {
       '.sbb-notification__close',
     ) as SbbSecondaryButtonElement;
 
-    expect(element).not.to.be.null;
+    await waitForCondition(() => element.getAttribute('data-state') === 'opened');
     expect(element).to.have.attribute('data-state', 'opened');
 
     closeButton.click();
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 6f82326efc..5c2b3be9dd 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -20,7 +20,10 @@
   --sbb-notification-border-radius: calc(var(--sbb-notification-base-radius) / 2)
     var(--sbb-notification-base-radius) var(--sbb-notification-base-radius)
     calc(var(--sbb-notification-base-radius) / 2);
-  --sbb-notification-animation-duration: var(--sbb-animation-duration-4x);
+  --sbb-notification-animation-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-4x)
+  );
   --sbb-notification-timing-function: ease-in;
   --sbb-notification-transition: max-height var(--sbb-notification-animation-duration)
       var(--sbb-animation-duration-2x) var(--sbb-notification-timing-function),
@@ -38,6 +41,15 @@
   display: block;
 }
 
+// By default, the open animation is disabled
+:host([data-state='opening']:not([animation='open'], [animation='all'])) {
+  @include sbb.disable-animation;
+}
+
+:host([data-state='closing']:not([animation='close'], [animation='all'])) {
+  @include sbb.disable-animation;
+}
+
 :host(:is([data-state='opened'], [data-state='opening'])) {
   --sbb-notification-opacity: 1;
   --sbb-notification-max-height: calc(
@@ -54,8 +66,8 @@
       var(--sbb-notification-timing-function);
 }
 
-:host(:is([data-resize-disable-animation], [disable-animation])) {
-  --sbb-notification-animation-duration: 0.1ms;
+:host([data-resize-disable-animation]) {
+  @include sbb.disable-animation;
 }
 
 /* Types */
diff --git a/src/components/notification/notification.spec.ts b/src/components/notification/notification.spec.ts
index dd90189916..27bacda083 100644
--- a/src/components/notification/notification.spec.ts
+++ b/src/components/notification/notification.spec.ts
@@ -2,83 +2,86 @@ import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
-import { waitForLitRender } from '../core/testing.js';
+import { waitForCondition } from '../core/testing.js';
 
 import './notification.js';
 
 describe(`sbb-notification`, () => {
   it('renders', async () => {
     const root = await fixture(
-      html`<sbb-notification disable-animation
-        >The quick brown fox jumps over the lazy dog.</sbb-notification
-      >`,
+      html`<sbb-notification>The quick brown fox jumps over the lazy dog.</sbb-notification>`,
     );
-    await waitForLitRender(root);
+    await waitForCondition(() => root.getAttribute('data-state') === 'opened');
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation data-state="opened" type="info" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
+      <sbb-notification data-state="opened" type="info" data-slot-names="unnamed" data-resize-disable-animation animation="all">
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
+      { ignoreAttributes: ['style'] },
     );
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with a title', async () => {
     const root = await fixture(
-      html`<sbb-notification disable-animation title-content="Title"
+      html`<sbb-notification title-content="Title"
         >The quick brown fox jumps over the lazy dog.</sbb-notification
       >`,
     );
+    await waitForCondition(() => root.getAttribute('data-state') === 'opened');
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation data-state="opened" title-content="Title" type="info" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
+      <sbb-notification data-state="opened" title-content="Title" type="info" data-slot-names="unnamed" animation="all" data-resize-disable-animation>
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
+      { ignoreAttributes: ['style'] },
     );
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders with a slotted title', async () => {
     const root = await fixture(
-      html`<sbb-notification disable-animation
+      html`<sbb-notification
         ><span slot="title">Slotted title</span>
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
     );
+    await waitForCondition(() => root.getAttribute('data-state') === 'opened');
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation data-state="opened" type="info" data-slot-names="title unnamed" style="--sbb-notification-height: auto;">
+      <sbb-notification data-state="opened" type="info" data-slot-names="title unnamed" animation="all" data-resize-disable-animation>
         <span slot="title">
           Slotted title
         </span>
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
+      { ignoreAttributes: ['style'] },
     );
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   it('renders without the close button', async () => {
     const root = await fixture(
-      html`<sbb-notification disable-animation title-content="Title" readonly
+      html`<sbb-notification title-content="Title" readonly
         >The quick brown fox jumps over the lazy dog.</sbb-notification
       >`,
     );
+    await waitForCondition(() => root.getAttribute('data-state') === 'opened');
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation readonly data-state="opened" title-content="Title" type="info" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
+      <sbb-notification readonly data-state="opened" title-content="Title" type="info" data-slot-names="unnamed" animation="all" data-resize-disable-animation>
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
+      { ignoreAttributes: ['style'] },
     );
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   testA11yTreeSnapshot(
-    html`<sbb-notification disable-animation title-content="Test title"
-      >Lorem ipsum ...</sbb-notification
-    >`,
+    html`<sbb-notification title-content="Test title">Lorem ipsum ...</sbb-notification>`,
   );
 });
diff --git a/src/components/notification/notification.stories.ts b/src/components/notification/notification.stories.ts
index be12078f64..9888e5e349 100644
--- a/src/components/notification/notification.stories.ts
+++ b/src/components/notification/notification.stories.ts
@@ -1,10 +1,8 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
-import { ref } from 'lit/directives/ref.js';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
 import type { SbbSecondaryButtonElement } from '../button.js';
@@ -33,24 +31,25 @@ const readonly: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
+const animation: InputType = {
   control: {
-    type: 'boolean',
+    type: 'inline-radio',
   },
+  options: ['all', 'close', 'open', 'none'],
 };
 
 const basicArgTypes: ArgTypes = {
   'title-content': titleContent,
   type: type,
   readonly: readonly,
-  'disable-animation': disableAnimation,
+  animation: animation,
 };
 
 const basicArgs: Args = {
   'title-content': 'Title',
-  type: type.options[0],
+  type: type.options![0],
   readonly: false,
-  'disable-animation': isChromatic(),
+  animation: animation.options![0],
 };
 
 const appendNotification = (event: Event, args: Args): void => {
@@ -62,7 +61,7 @@ const appendNotification = (event: Event, args: Args): void => {
   newNotification.titleContent = args['title-content'];
   newNotification.type = args['type'];
   newNotification.readonly = args['readonly'];
-  newNotification.disableAnimation = args['disable-animation'];
+  newNotification.animation = args['animation'];
   newNotification.innerHTML =
     'Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.';
   (event.target as SbbSecondaryButtonElement).parentElement
@@ -81,23 +80,11 @@ const trigger = (args: Args): TemplateResult => html`
   </sbb-secondary-button>
 `;
 
-const simpleNotification = (
-  disabelAnimation: boolean,
-  type: string,
-  title: string,
-): TemplateResult => html`
+const simpleNotification = (type: string, title: string): TemplateResult => html`
   <sbb-notification
     type="${type}"
     title-content="${title}"
-    disable-animation
     style="--sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0;"
-    ${ref((notification?: Element) =>
-      (notification as SbbNotificationElement)?.addEventListener(
-        SbbNotificationElement.events.didOpen,
-        () => ((notification as SbbNotificationElement).disableAnimation = disabelAnimation),
-        { once: true },
-      ),
-    )}
   >
     This is a ${type} notification.
   </sbb-notification>
@@ -114,16 +101,8 @@ const pageContent = (): TemplateResult => html`
 
 const DefaultTemplate = (args: Args): TemplateResult => html`
   <sbb-notification
-    ${sbbSpread({ ...args, ['disable-animation']: true })}
+    ${sbbSpread({ ...args, animation: 'close' })}
     style="--sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0;"
-    ${ref((notification?: Element) =>
-      (notification as SbbNotificationElement)?.addEventListener(
-        SbbNotificationElement.events.didOpen,
-        () =>
-          ((notification as SbbNotificationElement).disableAnimation = args['disable-animation']),
-        { once: true },
-      ),
-    )}
   >
     The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
     dog.&nbsp;<sbb-link href="/"> Link one</sbb-link>
@@ -134,16 +113,8 @@ const DefaultTemplate = (args: Args): TemplateResult => html`
 
 const MultipleNotificationsTemplate = (args: Args): TemplateResult => html`
   <sbb-notification
-    ${sbbSpread({ ...args, ['disable-animation']: true })}
+    ${sbbSpread({ ...args, animation: 'close' })}
     style="--sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0;"
-    ${ref((notification?: Element) =>
-      (notification as SbbNotificationElement)?.addEventListener(
-        SbbNotificationElement.events.didOpen,
-        () =>
-          ((notification as SbbNotificationElement).disableAnimation = args['disable-animation']),
-        { once: true },
-      ),
-    )}
   >
     The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
     dog.&nbsp;<sbb-link href="/"> Link one</sbb-link>
@@ -151,23 +122,14 @@ const MultipleNotificationsTemplate = (args: Args): TemplateResult => html`
     <sbb-link href="/"> Link three</sbb-link>
   </sbb-notification>
 
-  ${simpleNotification(args['disable-animation'], 'success', 'Success')}
-  ${simpleNotification(args['disable-animation'], 'warn', 'Warn')}
-  ${simpleNotification(args['disable-animation'], 'error', 'Error')}
+  ${simpleNotification('success', 'Success')} ${simpleNotification('warn', 'Warn')}
+  ${simpleNotification('error', 'Error')}
 `;
 
 const SlottedTitleTemplate = (args: Args): TemplateResult => html`
   <sbb-notification
-    ${sbbSpread({ ...args, ['disable-animation']: true })}
+    ${sbbSpread({ ...args, animation: 'close' })}
     style="--sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0;"
-    ${ref((notification?: Element) =>
-      (notification as SbbNotificationElement)?.addEventListener(
-        SbbNotificationElement.events.didOpen,
-        () =>
-          ((notification as SbbNotificationElement).disableAnimation = args['disable-animation']),
-        { once: true },
-      ),
-    )}
   >
     <span slot="title">Slotted title</span>
     The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.&nbsp;
@@ -186,19 +148,19 @@ export const Info: StoryObj = {
 export const Success: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, type: type.options[1] },
+  args: { ...basicArgs, type: type.options![1] },
 };
 
 export const Warn: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, type: type.options[2] },
+  args: { ...basicArgs, type: type.options![2] },
 };
 
 export const Error: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, type: type.options[3] },
+  args: { ...basicArgs, type: type.options![3] },
 };
 
 export const Readonly: StoryObj = {
@@ -235,9 +197,7 @@ export const MultipleNotifications: StoryObj = {
 const meta: Meta = {
   decorators: [
     (story, context) =>
-      html`<div
-        style="padding: 2rem;display: flex;gap: var(--sbb-spacing-fixed-4x);flex-direction: column;"
-      >
+      html`<div style="display: flex; gap: var(--sbb-spacing-fixed-4x); flex-direction: column;">
         ${trigger(context.args)}
         <div
           class="notification-container"
@@ -260,9 +220,6 @@ const meta: Meta = {
         SbbNotificationElement.events.willClose,
       ],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts
index 6cf243f5bb..9d9e767a9c 100644
--- a/src/components/notification/notification.ts
+++ b/src/components/notification/notification.ts
@@ -68,10 +68,9 @@ export class SbbNotificationElement extends LitElement {
   @property({ reflect: true, type: Boolean }) public readonly = false;
 
   /**
-   * Whether the animation is enabled.
+   * The enabled animations.
    */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
+  @property({ reflect: true }) public animation: 'open' | 'close' | 'all' | 'none' = 'all';
 
   /**
    * The state of the notification.
@@ -123,7 +122,6 @@ export class SbbNotificationElement extends LitElement {
     if (this._state === 'closed') {
       this._state = 'opening';
       this._willOpen.emit();
-      this.disableAnimation && this._handleOpening();
     }
   }
 
@@ -132,7 +130,6 @@ export class SbbNotificationElement extends LitElement {
       this._state = 'closing';
       this.style.setProperty('--sbb-notification-margin', '0');
       this._willClose.emit();
-      this.disableAnimation && this._handleClosing();
     }
   }
 
@@ -159,10 +156,10 @@ export class SbbNotificationElement extends LitElement {
   }
 
   private _setNotificationHeight(): void {
-    const notificationHeight =
-      this._notificationElement.scrollHeight && !this.disableAnimation
-        ? `${this._notificationElement.scrollHeight}px`
-        : 'auto';
+    if (!this._notificationElement?.scrollHeight) {
+      return;
+    }
+    const notificationHeight = `${this._notificationElement.scrollHeight}px`;
     this.style.setProperty('--sbb-notification-height', notificationHeight);
   }
 
diff --git a/src/components/notification/readme.md b/src/components/notification/readme.md
index 95331f5837..69cabf4eba 100644
--- a/src/components/notification/readme.md
+++ b/src/components/notification/readme.md
@@ -71,17 +71,22 @@ This ensures that users who rely on screen readers are promptly informed of any
 </div>
 ```
 
+## Animation
+
+Set the `animation` property to manage which animations are enabled.
+As a base rule, opening animations should be active if a notification arrives after the initial page load.
+
 <!-- Auto Generated Below -->
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                                       | Default  | Description                                                                                             |
-| ------------------ | ------------------- | ------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------- |
-| `type`             | `type`              | public  | `'info' \| 'success' \| 'warn' \| 'error'` | `'info'` | The type of the notification.                                                                           |
-| `titleContent`     | `title-content`     | public  | `string \| undefined`                      |          | Content of title.                                                                                       |
-| `titleLevel`       | `title-level`       | public  | `SbbTitleLevel`                            | `'3'`    | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3.                      |
-| `readonly`         | `readonly`          | public  | `boolean`                                  | `false`  | Whether the notification is readonly. In readonly mode, there is no dismiss button offered to the user. |
-| `disableAnimation` | `disable-animation` | public  | `boolean`                                  | `false`  | Whether the animation is enabled.                                                                       |
+| Name           | Attribute       | Privacy | Type                                       | Default  | Description                                                                                             |
+| -------------- | --------------- | ------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------- |
+| `type`         | `type`          | public  | `'info' \| 'success' \| 'warn' \| 'error'` | `'info'` | The type of the notification.                                                                           |
+| `titleContent` | `title-content` | public  | `string \| undefined`                      |          | Content of title.                                                                                       |
+| `titleLevel`   | `title-level`   | public  | `SbbTitleLevel`                            | `'3'`    | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3.                      |
+| `readonly`     | `readonly`      | public  | `boolean`                                  | `false`  | Whether the notification is readonly. In readonly mode, there is no dismiss button offered to the user. |
+| `animation`    | `animation`     | public  | `'open' \| 'close' \| 'all' \| 'none'`     | `'all'`  | The enabled animations.                                                                                 |
 
 ## Methods
 
diff --git a/src/components/option/optgroup/optgroup.stories.ts b/src/components/option/optgroup/optgroup.stories.ts
index d6abaa3132..7743c055ce 100644
--- a/src/components/option/optgroup/optgroup.stories.ts
+++ b/src/components/option/optgroup/optgroup.stories.ts
@@ -9,7 +9,6 @@ import type {
 } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 
 import readme from './readme.md?raw';
 import '../../form-field.js';
@@ -18,10 +17,6 @@ import '../../select.js';
 import '../option.js';
 import './optgroup.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const label: InputType = {
   control: {
     type: 'text',
@@ -110,7 +105,11 @@ const defaultArgs: Args = {
 };
 
 const borderDecorator: Decorator = (story) => html`
-  <div style="border: 3px solid red;">${story()}</div>
+  <div
+    style="border-width: var(--sbb-spacing-fixed-2x); border-style: dashed; border-color: #ad00ff;"
+  >
+    ${story()}
+  </div>
 `;
 
 const createOptions = (args: Args): TemplateResult[] =>
@@ -176,19 +175,14 @@ export const MultipleSelect: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-  ],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '500px' },
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/option/option/option.stories.ts b/src/components/option/option/option.stories.ts
index 5b35b2fdd2..493e594347 100644
--- a/src/components/option/option/option.stories.ts
+++ b/src/components/option/option/option.stories.ts
@@ -16,14 +16,11 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import { SbbOptionElement } from './option.js';
 import readme from './readme.md?raw';
+
 import '../../form-field.js';
 import '../../select.js';
 import '../../autocomplete.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const preserveIconSpace: InputType = {
   control: {
     type: 'boolean',
@@ -138,7 +135,11 @@ const SelectTemplate = (args: Args): TemplateResult => html`
 `;
 
 const borderDecorator: Decorator = (story) => html`
-  <div style="border: 3px solid red;">${story()}</div>
+  <div
+    style="border-width: var(--sbb-spacing-fixed-2x); border-style: dashed; border-color: #ad00ff; width: 350px;"
+  >
+    ${story()}
+  </div>
 `;
 
 export const Standalone: StoryObj = {
@@ -189,21 +190,14 @@ export const Select: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem', width: '350px' })}>
-        ${story()}
-      </div>
-    `,
-  ],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     actions: {
       handles: [SbbOptionElement.events.selectionChange, SbbOptionElement.events.optionSelected],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '500px' },
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/overlay/__snapshots__/overlay.spec.snap.js b/src/components/overlay/__snapshots__/overlay.spec.snap.js
index e8dde01015..6e04be6d8f 100644
--- a/src/components/overlay/__snapshots__/overlay.spec.snap.js
+++ b/src/components/overlay/__snapshots__/overlay.spec.snap.js
@@ -2,10 +2,7 @@
 export const snapshots = {};
 
 snapshots["sbb-overlay renders - Dom"] = 
-`<sbb-overlay
-  data-state="opening"
-  disable-animation=""
->
+`<sbb-overlay data-state="opening">
 </sbb-overlay>
 `;
 /* end snapshot sbb-overlay renders - Dom */
diff --git a/src/components/overlay/overlay.e2e.ts b/src/components/overlay/overlay.e2e.ts
index d3907aee5a..6fa18e3a5f 100644
--- a/src/components/overlay/overlay.e2e.ts
+++ b/src/components/overlay/overlay.e2e.ts
@@ -33,7 +33,7 @@ describe('sbb-overlay', () => {
   beforeEach(async () => {
     await setViewport({ width: 900, height: 600 });
     element = await fixture(html`
-      <sbb-overlay id="my-overlay-1" accessibility-label="Label" disable-animation>
+      <sbb-overlay id="my-overlay-1" accessibility-label="Label">
         <p>Overlay content</p>
       </sbb-overlay>
     `);
@@ -153,11 +153,11 @@ describe('sbb-overlay', () => {
 
   it('closes stacked overlays one by one on ESC key pressed', async () => {
     element = await fixture(html`
-      <sbb-overlay id="my-overlay-3" disable-animation>
+      <sbb-overlay id="my-overlay-3">
         <p>Overlay content</p>
       </sbb-overlay>
 
-      <sbb-overlay id="stacked-overlay" disable-animation>
+      <sbb-overlay id="stacked-overlay">
         <p>Stacked overlay content</p>
       </sbb-overlay>
     `);
diff --git a/src/components/overlay/overlay.scss b/src/components/overlay/overlay.scss
index 450cf199a5..aa1a2f71d7 100644
--- a/src/components/overlay/overlay.scss
+++ b/src/components/overlay/overlay.scss
@@ -12,7 +12,10 @@
   --sbb-overlay-padding-block: calc(
     var(--sbb-spacing-responsive-xxl) + var(--sbb-spacing-responsive-l)
   );
-  --sbb-overlay-animation-duration: var(--sbb-animation-duration-6x);
+  --sbb-overlay-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-6x)
+  );
   --sbb-overlay-animation-easing: ease;
   --sbb-overlay-pointer-events: none;
   --sbb-overlay-content-transition: transform var(--sbb-overlay-animation-duration)
@@ -40,10 +43,6 @@
   --sbb-overlay-background-color: var(--sbb-color-midnight);
 }
 
-:host([disable-animation]) {
-  --sbb-overlay-animation-duration: 0.1ms;
-}
-
 :host(:not([data-state='closed'])) {
   --sbb-overlay-inset: 0;
 }
@@ -87,6 +86,7 @@
 .sbb-overlay__wrapper {
   display: flex;
   flex-direction: column;
+  width: 100%;
   height: var(--sbb-overlay-height);
   outline: none;
   position: fixed;
diff --git a/src/components/overlay/overlay.spec.ts b/src/components/overlay/overlay.spec.ts
index bf0a7a0369..89a40e53ab 100644
--- a/src/components/overlay/overlay.spec.ts
+++ b/src/components/overlay/overlay.spec.ts
@@ -10,7 +10,7 @@ import './overlay.js';
 describe('sbb-overlay', () => {
   let root: SbbOverlayElement;
   beforeEach(async () => {
-    root = await fixture(html`<sbb-overlay disable-animation></sbb-overlay>`);
+    root = await fixture(html`<sbb-overlay></sbb-overlay>`);
     root.open();
     await waitForLitRender(root);
   });
diff --git a/src/components/overlay/overlay.stories.ts b/src/components/overlay/overlay.stories.ts
index 3921db7893..a2122d34f8 100644
--- a/src/components/overlay/overlay.stories.ts
+++ b/src/components/overlay/overlay.stories.ts
@@ -87,12 +87,6 @@ const accessibilityBackLabel: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const basicArgTypes: ArgTypes = {
   expanded,
   'back-button': backButton,
@@ -100,7 +94,6 @@ const basicArgTypes: ArgTypes = {
   accessibilityBackLabel,
   negative,
   'accessibility-label': accessibilityLabel,
-  'disable-animation': disableAnimation,
 };
 
 const basicArgs: Args = {
@@ -110,7 +103,6 @@ const basicArgs: Args = {
   accessibilityBackLabel: 'Go back',
   negative: false,
   'accessibility-label': undefined,
-  'disable-animation': isChromatic(),
 };
 
 const openOverlay = (_event: PointerEvent, id: string): void => {
@@ -316,16 +308,7 @@ export const Nested: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html`
-      <div
-        style=${styleMap({ padding: '2rem', 'min-height': isChromatic() ? '100vh' : undefined })}
-      >
-        ${story()}
-      </div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     chromatic: { disableSnapshot: false },
     actions: {
@@ -337,14 +320,11 @@ const meta: Meta = {
         SbbOverlayElement.events.backClick,
       ],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '600px' },
       extractComponentDescription: () => readme,
     },
-    layout: 'fullscreen',
   },
   title: 'components/sbb-overlay',
 };
diff --git a/src/components/overlay/overlay.ts b/src/components/overlay/overlay.ts
index 1943a53f1e..d7f1d9f418 100644
--- a/src/components/overlay/overlay.ts
+++ b/src/components/overlay/overlay.ts
@@ -82,12 +82,6 @@ export class SbbOverlayElement extends SbbNegativeMixin(LitElement) {
    */
   @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined;
 
-  /**
-   * Whether the animation is enabled.
-   */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /*
    * The state of the overlay.
    */
diff --git a/src/components/overlay/readme.md b/src/components/overlay/readme.md
index cd205a0802..acfb9b7ba5 100644
--- a/src/components/overlay/readme.md
+++ b/src/components/overlay/readme.md
@@ -1,5 +1,5 @@
 The `sbb-overlay` component provides a way to present content on top of the app's content
-and it's similar to the [sbb-dialog](/docs/components-sbb-dialog--docs).
+and it's similar to the [sbb-dialog](/docs/components-sbb-dialog-sbb-dialog--docs).
 It offers the following features:
 
 - disables scrolling of the page content while open;
@@ -81,7 +81,6 @@ When using a button to trigger the overlay, ensure to manage the appropriate ARI
 | `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the close button element.                                                     |
 | `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the back button element.                                                      |
 | `accessibilityLabel`      | `accessibility-label`       | public  | `string \| undefined`        |         | This will be forwarded as aria-label adn will describe the purpose of the dialog.                                     |
-| `disableAnimation`        | `disable-animation`         | public  | `boolean`                    | `false` | Whether the animation is enabled.                                                                                     |
 | `negative`                | `negative`                  | public  | `boolean`                    | `false` | Negative coloring variant flag.                                                                                       |
 
 ## Methods
diff --git a/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.stories.ts b/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.stories.ts
index 1d6241a9ad..281f2c0c67 100644
--- a/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.stories.ts
+++ b/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.stories.ts
@@ -39,7 +39,6 @@ export const pearlChainItem: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html`${story()}`],
   parameters: {
     docs: {
       extractComponentDescription: () => readme,
diff --git a/src/components/pearl-chain-vertical/pearl-chain-vertical.stories.ts b/src/components/pearl-chain-vertical/pearl-chain-vertical.stories.ts
index de6888d3b7..bc07d3fd69 100644
--- a/src/components/pearl-chain-vertical/pearl-chain-vertical.stories.ts
+++ b/src/components/pearl-chain-vertical/pearl-chain-vertical.stories.ts
@@ -61,12 +61,12 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  lineType: lineType.options[1],
-  lineColor: lineColor.options[0],
-  bulletType: bulletType.options[0],
+  lineType: lineType.options![1],
+  lineColor: lineColor.options![0],
+  bulletType: bulletType.options![0],
   minHeight: '100',
   hideLine: false,
-  bulletSize: bulletSize.options[0],
+  bulletSize: bulletSize.options![0],
   position: 0,
   disableAnimation: isChromatic(),
 };
@@ -621,7 +621,6 @@ export const timetableChange: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html`${story()}`],
   parameters: {
     docs: {
       extractComponentDescription: () => readme,
diff --git a/src/components/popover/popover-trigger/popover-trigger.e2e.ts b/src/components/popover/popover-trigger/popover-trigger.e2e.ts
index e7039d39ba..a1e9e5ea99 100644
--- a/src/components/popover/popover-trigger/popover-trigger.e2e.ts
+++ b/src/components/popover/popover-trigger/popover-trigger.e2e.ts
@@ -19,7 +19,7 @@ describe(`sbb-popover-trigger with ${fixture.name}`, () => {
       html`
         <div>
           <sbb-popover-trigger id="popover-trigger"></sbb-popover-trigger>
-          <sbb-popover id="popover" trigger="popover-trigger" disable-animation>
+          <sbb-popover id="popover" trigger="popover-trigger">
             Popover content.
             <sbb-link id="popover-link" sbb-popover-close>Link</sbb-link>
           </sbb-popover>
diff --git a/src/components/popover/popover-trigger/popover-trigger.stories.ts b/src/components/popover/popover-trigger/popover-trigger.stories.ts
index fb956278b6..b48141a38f 100644
--- a/src/components/popover/popover-trigger/popover-trigger.stories.ts
+++ b/src/components/popover/popover-trigger/popover-trigger.stories.ts
@@ -13,7 +13,6 @@ import './popover-trigger.js';
 import '../../title.js';
 
 const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
   color: context.args.negative ? 'var(--sbb-color-white)' : 'var(--sbb-color-black)',
 });
 
@@ -171,13 +170,12 @@ const meta: Meta = {
   excludeStories: /.*Active$/,
   decorators: [
     (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
+      <div style=${styleMap({ ...wrapperStyle(context) })}>${story()}</div>
     `,
   ],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/popover/popover/popover.e2e.ts b/src/components/popover/popover/popover.e2e.ts
index d2472bf9b1..e25ae4716b 100644
--- a/src/components/popover/popover/popover.e2e.ts
+++ b/src/components/popover/popover/popover.e2e.ts
@@ -20,7 +20,7 @@ describe(`sbb-popover with ${fixture.name}`, () => {
         html`
           <span>
             <sbb-button id="popover-trigger">Popover trigger</sbb-button>
-            <sbb-popover id="popover" trigger="popover-trigger" disable-animation>
+            <sbb-popover id="popover" trigger="popover-trigger">
               Popover content.
               <sbb-link id="popover-link" href="#" sbb-popover-close>Link</sbb-link>
             </sbb-popover>
@@ -392,7 +392,7 @@ describe(`sbb-popover with ${fixture.name}`, () => {
         html`
           <span>
             <sbb-button id="popover-trigger">Popover trigger</sbb-button>
-            <sbb-popover id="popover" trigger="popover-trigger" disable-animation hide-close-button>
+            <sbb-popover id="popover" trigger="popover-trigger" hide-close-button>
               Popover content.
             </sbb-popover>
             <sbb-block-link href="#" id="interactive-background-element"
@@ -460,10 +460,8 @@ describe(`sbb-popover with ${fixture.name}`, () => {
           >
           <sbb-button id="popover-trigger">Popover trigger</sbb-button>
           <sbb-button id="another-popover-trigger">Another popover trigger</sbb-button>
-          <sbb-popover id="popover" trigger="popover-trigger" disable-animation>
-            Popover content.
-          </sbb-popover>
-          <sbb-popover id="another-popover" trigger="another-popover-trigger" disable-animation>
+          <sbb-popover id="popover" trigger="popover-trigger"> Popover content. </sbb-popover>
+          <sbb-popover id="another-popover" trigger="another-popover-trigger">
             Another popover content.
           </sbb-popover>
         </div>
diff --git a/src/components/popover/popover/popover.scss b/src/components/popover/popover/popover.scss
index 597f5fe68b..c94353a576 100644
--- a/src/components/popover/popover/popover.scss
+++ b/src/components/popover/popover/popover.scss
@@ -15,7 +15,10 @@
   --sbb-popover-padding: var(--sbb-spacing-fixed-4x);
   --sbb-popover-background: var(--sbb-color-white);
   --sbb-popover-color: var(--sbb-color-charcoal);
-  --sbb-popover-animation-duration: var(--sbb-animation-duration-4x);
+  --sbb-popover-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-4x)
+  );
   --sbb-popover-animation-easing: ease-out;
   --sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));
 
@@ -26,10 +29,6 @@
   display: block;
 }
 
-:host([disable-animation]) {
-  --sbb-popover-animation-duration: 0.1ms;
-}
-
 :host([data-position='above']) {
   --sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1));
 }
diff --git a/src/components/popover/popover/popover.stories.ts b/src/components/popover/popover/popover.stories.ts
index 4280acd655..61a4487a5c 100644
--- a/src/components/popover/popover/popover.stories.ts
+++ b/src/components/popover/popover/popover.stories.ts
@@ -72,18 +72,11 @@ const closeDelay: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const defaultArgTypes: ArgTypes = {
   'hover-trigger': hoverTrigger,
   'hide-close-button': hideCloseButton,
   'open-delay': openDelay,
   'close-delay': closeDelay,
-  'disable-animation': disableAnimation,
 };
 
 const defaultArgs: Args = {
@@ -91,7 +84,6 @@ const defaultArgs: Args = {
   'hide-close-button': false,
   'open-delay': undefined,
   'close-delay': undefined,
-  'disable-animation': isChromatic(),
 };
 
 const popoverTrigger = (position: Record<string, string>): TemplateResult => html`
@@ -267,14 +259,7 @@ export const WithoutCloseButtonHover: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html`
-      <div style="padding: 2rem; position: relative; min-height: calc(100vh - 2rem);">
-        ${story()}
-      </div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     chromatic: { disableSnapshot: false },
     actions: {
@@ -285,14 +270,11 @@ const meta: Meta = {
         SbbPopoverElement.events.willClose,
       ],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '250px' },
       extractComponentDescription: () => readme,
     },
-    layout: 'fullscreen',
   },
   title: 'components/sbb-popover/sbb-popover',
 };
diff --git a/src/components/popover/popover/popover.ts b/src/components/popover/popover/popover.ts
index 04bcf03d72..4d4b4c8381 100644
--- a/src/components/popover/popover/popover.ts
+++ b/src/components/popover/popover/popover.ts
@@ -74,10 +74,6 @@ export class SbbPopoverElement extends LitElement {
   /** Close the popover after a certain delay. */
   @property({ attribute: 'close-delay', type: Number }) public closeDelay? = 0;
 
-  /** Whether the animation is enabled. */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /** This will be forwarded as aria-label to the close button element. */
   @property({ attribute: 'accessibility-close-label' }) public accessibilityCloseLabel:
     | string
diff --git a/src/components/popover/popover/readme.md b/src/components/popover/popover/readme.md
index 58163b65fb..fb785d84e4 100644
--- a/src/components/popover/popover/readme.md
+++ b/src/components/popover/popover/readme.md
@@ -85,7 +85,6 @@ Overlays should always contain a heading level 2 title. It can be visually hidde
 | `hoverTrigger`            | `hover-trigger`             | public  | `boolean`                            | `false` | Whether the popover should be triggered on hover.                                                               |
 | `openDelay`               | `open-delay`                | public  | `number`                             | `0`     | Open the popover after a certain delay.                                                                         |
 | `closeDelay`              | `close-delay`               | public  | `number`                             | `0`     | Close the popover after a certain delay.                                                                        |
-| `disableAnimation`        | `disable-animation`         | public  | `boolean`                            | `false` | Whether the animation is enabled.                                                                               |
 | `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined`         |         | This will be forwarded as aria-label to the close button element.                                               |
 
 ## Methods
diff --git a/src/components/radio-button/radio-button-group/radio-button-group.stories.ts b/src/components/radio-button/radio-button-group/radio-button-group.stories.ts
index acc972489f..82a915d7d8 100644
--- a/src/components/radio-button/radio-button-group/radio-button-group.stories.ts
+++ b/src/components/radio-button/radio-button-group/radio-button-group.stories.ts
@@ -79,9 +79,9 @@ const defaultArgs: Args = {
   required: false,
   disabled: false,
   'allow-empty-selection': false,
-  orientation: orientation.options[0],
+  orientation: orientation.options![0],
   'horizontal-from': undefined,
-  size: size.options[0],
+  size: size.options![0],
   'aria-label': undefined,
 };
 
@@ -126,7 +126,7 @@ export const Horizontal: StoryObj = {
 export const Vertical: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, orientation: orientation.options[1] },
+  args: { ...defaultArgs, orientation: orientation.options![1] },
 };
 
 export const VerticalToHorizontal: StoryObj = {
@@ -134,21 +134,21 @@ export const VerticalToHorizontal: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    orientation: orientation.options[1],
-    'horizontal-from': horizontalFrom.options[4],
+    orientation: orientation.options![1],
+    'horizontal-from': horizontalFrom.options![4],
   },
 };
 
 export const HorizontalSizeS: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[1] },
+  args: { ...defaultArgs, size: size.options![1] },
 };
 
 export const VerticalSizeS: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, orientation: orientation.options[1], size: size.options[1] },
+  args: { ...defaultArgs, orientation: orientation.options![1], size: size.options![1] },
 };
 
 export const Disabled: StoryObj = {
@@ -181,23 +181,17 @@ export const ErrorMessageVertical: StoryObj = {
     ...defaultArgs,
     value: undefined,
     required: true,
-    orientation: orientation.options[1],
+    orientation: orientation.options![1],
     'allow-empty-selection': true,
   },
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: ['change', 'input'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/radio-button/radio-button/radio-button.scss b/src/components/radio-button/radio-button/radio-button.scss
index 0a8a37b0e3..6fbe8a8140 100644
--- a/src/components/radio-button/radio-button/radio-button.scss
+++ b/src/components/radio-button/radio-button/radio-button.scss
@@ -148,7 +148,7 @@ slot[name='subtext'] {
     margin-block-start: var(--sbb-radio-button-icon-align);
 
     transition: {
-      duration: var(--sbb-animation-duration-4x);
+      duration: var(--sbb-disable-animation-time, var(--sbb-animation-duration-4x));
       timing-function: ease;
       property: background-color, border;
     }
diff --git a/src/components/radio-button/radio-button/radio-button.stories.ts b/src/components/radio-button/radio-button/radio-button.stories.ts
index f4de0f67cd..ce81c380ec 100644
--- a/src/components/radio-button/radio-button/radio-button.stories.ts
+++ b/src/components/radio-button/radio-button/radio-button.stories.ts
@@ -61,7 +61,7 @@ const defaultArgs: Args = {
   value: 'First value',
   checked: false,
   disabled: false,
-  size: size.options[0],
+  size: size.options![0],
   'aria-label': undefined,
   labelBoldClass: false,
 };
@@ -86,7 +86,7 @@ export const Default: StoryObj = {
 export const SizeS: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[1] },
+  args: { ...defaultArgs, size: size.options![1] },
 };
 
 export const Checked: StoryObj = {
@@ -126,11 +126,7 @@ export const CheckedBold: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style="padding: 2rem; max-width: 1050px;">${story()}</div> `],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/screen-reader-only/screen-reader-only.stories.ts b/src/components/screen-reader-only/screen-reader-only.stories.ts
index a6e2626535..7f15f088e8 100644
--- a/src/components/screen-reader-only/screen-reader-only.stories.ts
+++ b/src/components/screen-reader-only/screen-reader-only.stories.ts
@@ -27,9 +27,6 @@ export const Default: StoryObj = {
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/select/readme.md b/src/components/select/readme.md
index 90fae9be50..96cfbc1798 100644
--- a/src/components/select/readme.md
+++ b/src/components/select/readme.md
@@ -104,16 +104,15 @@ Opened panel:
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                              | Default | Description                                                              |
-| ------------------ | ------------------- | ------- | --------------------------------- | ------- | ------------------------------------------------------------------------ |
-| `value`            | `value`             | public  | `string \| string[] \| undefined` |         | The value of the select component. If `multiple` is true, it's an array. |
-| `placeholder`      | `placeholder`       | public  | `string \| undefined`             |         | The placeholder used if no value has been selected.                      |
-| `multiple`         | `multiple`          | public  | `boolean`                         | `false` | Whether the select allows for multiple selection.                        |
-| `required`         | `required`          | public  | `boolean`                         | `false` | Whether the select is required.                                          |
-| `readonly`         | `readonly`          | public  | `boolean`                         | `false` | Whether the select is readonly.                                          |
-| `disableAnimation` | `disable-animation` | public  | `boolean`                         | `false` | Whether the animation is disabled.                                       |
-| `disabled`         | `disabled`          | public  | `boolean`                         | `false` | Whether the component is disabled.                                       |
-| `negative`         | `negative`          | public  | `boolean`                         | `false` | Negative coloring variant flag.                                          |
+| Name          | Attribute     | Privacy | Type                              | Default | Description                                                              |
+| ------------- | ------------- | ------- | --------------------------------- | ------- | ------------------------------------------------------------------------ |
+| `value`       | `value`       | public  | `string \| string[] \| undefined` |         | The value of the select component. If `multiple` is true, it's an array. |
+| `placeholder` | `placeholder` | public  | `string \| undefined`             |         | The placeholder used if no value has been selected.                      |
+| `multiple`    | `multiple`    | public  | `boolean`                         | `false` | Whether the select allows for multiple selection.                        |
+| `required`    | `required`    | public  | `boolean`                         | `false` | Whether the select is required.                                          |
+| `readonly`    | `readonly`    | public  | `boolean`                         | `false` | Whether the select is readonly.                                          |
+| `disabled`    | `disabled`    | public  | `boolean`                         | `false` | Whether the component is disabled.                                       |
+| `negative`    | `negative`    | public  | `boolean`                         | `false` | Negative coloring variant flag.                                          |
 
 ## Methods
 
diff --git a/src/components/select/select.e2e.ts b/src/components/select/select.e2e.ts
index f6504b991c..5fdf1d505f 100644
--- a/src/components/select/select.e2e.ts
+++ b/src/components/select/select.e2e.ts
@@ -21,7 +21,7 @@ describe(`sbb-select with ${fixture.name}`, () => {
     const root = await fixture(
       html`
         <div id="parent">
-          <sbb-select placeholder="Placeholder" disable-animation>
+          <sbb-select placeholder="Placeholder">
             <sbb-option id="option-1" value="1">First</sbb-option>
             <sbb-option id="option-2" value="2">Second</sbb-option>
             <sbb-option id="option-3" value="3">Third</sbb-option>
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
index c6eff20dd2..7c23eb4f49 100644
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -56,10 +56,6 @@
   );
 }
 
-:host([disable-animation]) {
-  --sbb-options-panel-animation-duration: 0.1ms;
-}
-
 ::slotted(sbb-divider) {
   margin-block: var(--sbb-spacing-fixed-3x);
 }
diff --git a/src/components/select/select.stories.ts b/src/components/select/select.stories.ts
index 15dbfacd5b..8f0f9e00f2 100644
--- a/src/components/select/select.stories.ts
+++ b/src/components/select/select.stories.ts
@@ -26,10 +26,6 @@ import { SbbSelectElement } from './select.js';
 import '../form-error.js';
 import '../form-field.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 // Story interaction executed after the story renders
 const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
   const canvas = within(canvasElement);
@@ -126,15 +122,6 @@ const readonly: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-  table: {
-    category: 'Select',
-  },
-};
-
 const numberOfOptions: InputType = {
   control: {
     type: 'number',
@@ -181,7 +168,6 @@ const defaultArgTypes: ArgTypes = {
   disabled,
   required,
   readonly,
-  'disable-animation': disableAnimation,
   numberOfOptions,
   disableOption,
   withOptionGroup,
@@ -198,7 +184,6 @@ const defaultArgs: Args = {
   disabled: false,
   required: false,
   readonly: false,
-  'disable-animation': isChromatic(),
   numberOfOptions: 5,
   disableOption: false,
   withOptionGroup: false,
@@ -228,11 +213,20 @@ const codeStyle: Readonly<StyleInfo> = {
 };
 
 const aboveDecorator: Decorator = (story) => html`
-  <div style="height: 100%; display: flex; align-items: end;">${story()}</div>
+  <div
+    style=${styleMap({
+      'inset-block-end': '2rem',
+      'inset-inline-start': '2rem',
+      position: 'absolute',
+      'max-width': 'calc(100% - 4rem)',
+    })}
+  >
+    ${story()}
+  </div>
 `;
 
 const scrollDecorator: Decorator = (story) => html`
-  <div style="height: 175%; display: flex; align-items: center;">${story()}</div>
+  <div style="height: 175vh; display: flex; align-items: center;">${story()}</div>
 `;
 
 const valueEllipsis: string = 'This label name is so long that it needs ellipsis to fit.';
@@ -494,7 +488,7 @@ export const SingleSelectEllipsis: StoryObj = {
   render: SelectEllipsisTemplate,
   argTypes: {
     ...defaultArgTypes,
-    value: { ...value, options: [...value.options, valueEllipsis] },
+    value: { ...value, options: [...value.options!, valueEllipsis] },
   },
   args: { ...defaultArgs, value: valueEllipsis },
   play: isChromatic() ? playStory : undefined,
@@ -504,7 +498,7 @@ export const MultipleSelectEllipsis: StoryObj = {
   render: SelectEllipsisTemplate,
   argTypes: {
     ...defaultArgTypes,
-    value: { ...value, options: [...value.options, valueEllipsis] },
+    value: { ...value, options: [...value.options!, valueEllipsis] },
   },
   args: { ...defaultArgs, multiple: true, value: valueEllipsis },
   play: isChromatic() ? playStory : undefined,
@@ -619,21 +613,10 @@ export const KeyboardInteraction: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div
-        style=${styleMap({
-          ...wrapperStyle(context),
-          padding: '2rem',
-          height: 'calc(100vh - 2rem)',
-        })}
-      >
-        ${story()}
-      </div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     chromatic: { disableSnapshot: false },
     actions: {
       handles: [
@@ -645,10 +628,8 @@ const meta: Meta = {
         SbbOptionElement.events.optionSelected,
       ],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
       story: { inline: false, iframeHeight: '500px' },
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index df7aed7f42..06119156e5 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -78,10 +78,6 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
   /** Whether the select is readonly. */
   @property({ type: Boolean }) public readonly = false;
 
-  /** Whether the animation is disabled. */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /** The state of the select. */
   private set _state(state: SbbOpenedClosedState) {
     this.setAttribute('data-state', state);
diff --git a/src/components/selection-panel/__snapshots__/selection-panel.spec.snap.js b/src/components/selection-panel/__snapshots__/selection-panel.spec.snap.js
index e2e1b80d0a..beb142ca04 100644
--- a/src/components/selection-panel/__snapshots__/selection-panel.spec.snap.js
+++ b/src/components/selection-panel/__snapshots__/selection-panel.spec.snap.js
@@ -6,7 +6,6 @@ snapshots["sbb-selection-panel renders - Dom"] =
   data-has-card-badge=""
   data-slot-names="badge content unnamed"
   data-state="closed"
-  disable-animation=""
 >
   <sbb-card-badge
     color="charcoal"
diff --git a/src/components/selection-panel/readme.md b/src/components/selection-panel/readme.md
index 384e926ad2..7025813ae3 100644
--- a/src/components/selection-panel/readme.md
+++ b/src/components/selection-panel/readme.md
@@ -77,12 +77,11 @@ It's also possible to display the `sbb-selection-panel` without border by settin
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                | Default   | Description                                    |
-| ------------------ | ------------------- | ------- | ------------------- | --------- | ---------------------------------------------- |
-| `color`            | `color`             | public  | `'white' \| 'milk'` | `'white'` | The background color of the panel.             |
-| `forceOpen`        | `force-open`        | public  | `boolean`           | `false`   | Whether the content section is always visible. |
-| `borderless`       | `borderless`        | public  | `boolean`           | `false`   | Whether the unselected panel has a border.     |
-| `disableAnimation` | `disable-animation` | public  | `boolean`           | `false`   | Whether the animation is enabled.              |
+| Name         | Attribute    | Privacy | Type                | Default   | Description                                    |
+| ------------ | ------------ | ------- | ------------------- | --------- | ---------------------------------------------- |
+| `color`      | `color`      | public  | `'white' \| 'milk'` | `'white'` | The background color of the panel.             |
+| `forceOpen`  | `force-open` | public  | `boolean`           | `false`   | Whether the content section is always visible. |
+| `borderless` | `borderless` | public  | `boolean`           | `false`   | Whether the unselected panel has a border.     |
 
 ## Events
 
diff --git a/src/components/selection-panel/selection-panel.e2e.ts b/src/components/selection-panel/selection-panel.e2e.ts
index 5fa9e7580f..b1dce4e224 100644
--- a/src/components/selection-panel/selection-panel.e2e.ts
+++ b/src/components/selection-panel/selection-panel.e2e.ts
@@ -22,7 +22,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
     /* eslint-disable lit/binding-positions */
     return html`
       <${tagGroupElement} ${inputType === 'radio-button' && 'value="Value one"'}>
-        <sbb-selection-panel disable-animation id="sbb-selection-panel-1">
+        <sbb-selection-panel id="sbb-selection-panel-1">
           <${tagSingle} id="sbb-input-1" value="Value one" ?checked='${
             inputType === 'checkbox'
           }'>Value one</${tagSingle}>
@@ -31,21 +31,21 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
             <sbb-block-link-button>Link</sbb-block-link-button>
           </div>
         </sbb-selection-panel>
-        <sbb-selection-panel disable-animation id="sbb-selection-panel-2">
+        <sbb-selection-panel id="sbb-selection-panel-2">
           <${tagSingle} id="sbb-input-2" value="Value two">Value two</${tagSingle}>
           <div id="panel-content-2" slot="content">
             Inner Content
             <sbb-block-link-button>Link</sbb-block-link-button>
           </div>
         </sbb-selection-panel>
-        <sbb-selection-panel disable-animation id="sbb-selection-panel-3">
+        <sbb-selection-panel id="sbb-selection-panel-3">
           <${tagSingle} id="sbb-input-3" value="Value three" disabled>Value three</${tagSingle}>
           <div id="panel-content-3" slot="content">
             Inner Content
             <sbb-block-link-button>Link</sbb-block-link-button>
           </div>
         </sbb-selection-panel>
-        <sbb-selection-panel disable-animation id="sbb-selection-panel-4">
+        <sbb-selection-panel id="sbb-selection-panel-4">
           <${tagSingle} id="sbb-input-4" value="Value four">Value four</${tagSingle}>
           <div id="panel-content-4" slot="content">
             Inner Content
@@ -257,18 +257,18 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
       const wrapperNoContent = await fixture(
         html`
           <sbb-radio-button-group id="group-no-content" value="Value 2">
-            <sbb-selection-panel disable-animation id="no-content-1">
+            <sbb-selection-panel id="no-content-1">
               <sbb-radio-button id="input-no-content-1" value="Value 1">Value one</sbb-radio-button>
             </sbb-selection-panel>
-            <sbb-selection-panel disable-animation id="no-content-2">
+            <sbb-selection-panel id="no-content-2">
               <sbb-radio-button id="input-no-content-2" value="Value 2">Value two</sbb-radio-button>
             </sbb-selection-panel>
-            <sbb-selection-panel disable-animation id="no-content-3">
+            <sbb-selection-panel id="no-content-3">
               <sbb-radio-button id="input-no-content-3" value="Value 3" disabled
                 >Value three</sbb-radio-button
               >
             </sbb-selection-panel>
-            <sbb-selection-panel disable-animation id="no-content-4">
+            <sbb-selection-panel id="no-content-4">
               <sbb-radio-button id="input-no-content-4" value="Value 4"
                 >Value four</sbb-radio-button
               >
@@ -340,7 +340,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
       nestedElement = await fixture(
         html`
           <sbb-radio-button-group orientation="vertical" horizontal-from="large">
-            <sbb-selection-panel disable-animation id="panel1">
+            <sbb-selection-panel id="panel1">
               <sbb-radio-button value="main1" checked> Main Option 1 </sbb-radio-button>
               <sbb-radio-button-group orientation="vertical" slot="content">
                 <sbb-radio-button value="sub1" checked>Suboption 1</sbb-radio-button>
@@ -348,7 +348,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
               </sbb-radio-button-group>
             </sbb-selection-panel>
 
-            <sbb-selection-panel disable-animation id="panel2">
+            <sbb-selection-panel id="panel2">
               <sbb-radio-button value="main2"> Main Option 2 </sbb-radio-button>
               <sbb-radio-button-group orientation="vertical" slot="content">
                 <sbb-radio-button value="sub3">Suboption 3</sbb-radio-button>
@@ -467,7 +467,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
         html`
           <div>
             <template>
-              <sbb-selection-panel disable-animation>
+              <sbb-selection-panel>
                 <sbb-radio-button value="main1" checked="true"> Main Option 1 </sbb-radio-button>
                 <sbb-radio-button-group orientation="vertical" slot="content">
                   <sbb-radio-button value="sub1" checked>Suboption 1</sbb-radio-button>
@@ -475,7 +475,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
                 </sbb-radio-button-group>
               </sbb-selection-panel>
 
-              <sbb-selection-panel disable-animation>
+              <sbb-selection-panel>
                 <sbb-radio-button value="main2"> Main Option 2 </sbb-radio-button>
                 <sbb-radio-button-group orientation="vertical" slot="content">
                   <sbb-radio-button value="sub3">Suboption 3</sbb-radio-button>
@@ -669,7 +669,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
       nestedElement = await fixture(
         html`
           <sbb-checkbox-group orientation="vertical" horizontal-from="large">
-            <sbb-selection-panel disable-animation>
+            <sbb-selection-panel>
               <sbb-checkbox value="main1" checked> Main Option 1 </sbb-checkbox>
               <sbb-checkbox-group orientation="vertical" slot="content">
                 <sbb-checkbox value="sub1" checked>Suboption 1</sbb-checkbox>
@@ -677,7 +677,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
               </sbb-checkbox-group>
             </sbb-selection-panel>
 
-            <sbb-selection-panel disable-animation>
+            <sbb-selection-panel>
               <sbb-checkbox value="main2"> Main Option 2 </sbb-checkbox>
               <sbb-checkbox-group orientation="vertical" slot="content">
                 <sbb-checkbox value="sub3">Suboption 3</sbb-checkbox>
diff --git a/src/components/selection-panel/selection-panel.scss b/src/components/selection-panel/selection-panel.scss
index 2f95653b53..9970676f33 100644
--- a/src/components/selection-panel/selection-panel.scss
+++ b/src/components/selection-panel/selection-panel.scss
@@ -13,7 +13,10 @@ $open-anim-opacity-to: 1;
   --sbb-selection-panel-cursor: pointer;
   --sbb-selection-panel-background: var(--sbb-color-white);
   --sbb-selection-panel-border-color: var(--sbb-color-cloud);
-  --sbb-selection-panel-animation-duration: var(--sbb-animation-duration-4x);
+  --sbb-selection-panel-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-4x)
+  );
   --sbb-selection-panel-border-width: var(--sbb-border-width-1x);
   --sbb-selection-panel-input-pointer-events: all;
   --sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs)
@@ -51,8 +54,8 @@ $open-anim-opacity-to: 1;
   --sbb-selection-panel-border-color: transparent;
 }
 
-:host(:is([data-resize-disable-animation], [disable-animation])) {
-  --sbb-selection-panel-animation-duration: 0.1ms;
+:host([data-resize-disable-animation]) {
+  @include sbb.disable-animation;
 }
 
 :host([data-slot-names~='content']:where([data-state='opening'], [data-state='opened'])) {
diff --git a/src/components/selection-panel/selection-panel.spec.ts b/src/components/selection-panel/selection-panel.spec.ts
index 232d051c44..a308bbcc96 100644
--- a/src/components/selection-panel/selection-panel.spec.ts
+++ b/src/components/selection-panel/selection-panel.spec.ts
@@ -15,7 +15,7 @@ describe(`sbb-selection-panel`, () => {
     // Note: for easier testing, we add the slot="badge"
     // to <sbb-card-badge> which would not be needed in real.
     element = await fixture(html`
-      <sbb-selection-panel disable-animation>
+      <sbb-selection-panel>
         <sbb-card-badge slot="badge">
           <span>%</span>
           <span>from CHF</span>
diff --git a/src/components/selection-panel/selection-panel.stories.ts b/src/components/selection-panel/selection-panel.stories.ts
index bd249eee6c..3a4e7617da 100644
--- a/src/components/selection-panel/selection-panel.stories.ts
+++ b/src/components/selection-panel/selection-panel.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 type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import type { StyleInfo } from 'lit/directives/style-map.js';
@@ -45,12 +44,6 @@ const borderless: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const checkedInput: InputType = {
   control: {
     type: 'boolean',
@@ -73,16 +66,14 @@ const basicArgTypes: ArgTypes = {
   color: color,
   'force-open': forceOpen,
   borderless: borderless,
-  'disable-animation': disableAnimation,
   checkedInput,
   disabledInput,
 };
 
 const basicArgs: Args = {
-  color: color.options[0],
+  color: color.options![0],
   'force-open': false,
   borderless: false,
-  'disable-animation': isChromatic(),
   checkedInput: false,
   disabledInput: false,
 };
@@ -591,7 +582,7 @@ export const WithCheckboxGroupMilk: StoryObj = {
   argTypes: basicArgTypes,
   args: {
     ...basicArgs,
-    color: color.options[1],
+    color: color.options![1],
     checkedInput: true,
     disabledInput: true,
   },
@@ -602,7 +593,7 @@ export const WithRadioButtonGroupMilk: StoryObj = {
   argTypes: basicArgTypes,
   args: {
     ...basicArgs,
-    color: color.options[1],
+    color: color.options![1],
     checkedInput: true,
     disabledInput: true,
   },
@@ -635,7 +626,7 @@ export const WithCheckboxGroupMilkBorderless: StoryObj = {
   argTypes: basicArgTypes,
   args: {
     ...basicArgs,
-    color: color.options[1],
+    color: color.options![1],
     checkedInput: true,
     disabledInput: true,
     borderless: true,
@@ -647,7 +638,7 @@ export const WithRadioButtonGroupMilkBorderless: StoryObj = {
   argTypes: basicArgTypes,
   args: {
     ...basicArgs,
-    color: color.options[1],
+    color: color.options![1],
     checkedInput: true,
     disabledInput: true,
     borderless: true,
@@ -711,10 +702,7 @@ export const NestedCheckboxes: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     chromatic: { delay: 9000, fixedHeight: '14500px' },
     actions: {
@@ -725,9 +713,6 @@ const meta: Meta = {
         SbbSelectionPanelElement.events.willClose,
       ],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/selection-panel/selection-panel.ts b/src/components/selection-panel/selection-panel.ts
index bd586c53fa..10b694ff14 100644
--- a/src/components/selection-panel/selection-panel.ts
+++ b/src/components/selection-panel/selection-panel.ts
@@ -42,10 +42,6 @@ export class SbbSelectionPanelElement extends LitElement {
   /** Whether the unselected panel has a border. */
   @property({ reflect: true, type: Boolean }) public borderless = false;
 
-  /** Whether the animation is enabled. */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /** The state of the selection panel. */
   @state()
   private set _state(state: SbbOpenedClosedState) {
diff --git a/src/components/signet/signet.stories.ts b/src/components/signet/signet.stories.ts
index c71a2cf001..19a7ac810b 100644
--- a/src/components/signet/signet.stories.ts
+++ b/src/components/signet/signet.stories.ts
@@ -29,30 +29,30 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  'protective-room': protectiveRoom.options[0],
+  'protective-room': protectiveRoom.options![0],
   'accessibility-label': undefined,
 };
 
 export const NoProtectiveRoom: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, 'protective-room': protectiveRoom.options[0] },
+  args: { ...defaultArgs, 'protective-room': protectiveRoom.options![0] },
 };
 
 export const MinimalProtectiveRoom: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, 'protective-room': protectiveRoom.options[1] },
+  args: { ...defaultArgs, 'protective-room': protectiveRoom.options![1] },
 };
 
 export const IdealProtectiveRoom: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, 'protective-room': protectiveRoom.options[2] },
+  args: { ...defaultArgs, 'protective-room': protectiveRoom.options![2] },
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style="max-width: 300px;">${story()}</div> `],
+  decorators: [(story) => html`<div style="max-width: 300px;">${story()}</div>`],
   parameters: {
     docs: {
       extractComponentDescription: () => readme,
diff --git a/src/components/skiplink-list/skiplink-list.stories.ts b/src/components/skiplink-list/skiplink-list.stories.ts
index 660d3508e5..cbe3f4bd05 100644
--- a/src/components/skiplink-list/skiplink-list.stories.ts
+++ b/src/components/skiplink-list/skiplink-list.stories.ts
@@ -93,9 +93,9 @@ const defaultArgs: Args = {
   'title-level': undefined,
   'title-content': undefined,
   labelFirstLink: 'To content',
-  hrefFirstLink: hrefFirstLink.options[0],
+  hrefFirstLink: hrefFirstLink.options![0],
   labelSecondLink: 'To help',
-  hrefSecondLink: hrefSecondLink.options[1],
+  hrefSecondLink: hrefSecondLink.options![1],
 };
 
 // Story interaction executed after the story renders
@@ -133,7 +133,7 @@ export const SkiplinkListWithTitle: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    'title-level': titleLevel.options[0],
+    'title-level': titleLevel.options![0],
     'title-content': 'Skip',
   },
   play: isChromatic() ? playStory : undefined,
@@ -142,21 +142,15 @@ export const SkiplinkListWithTitle: StoryObj = {
 const meta: Meta = {
   decorators: [
     (story) => html`
-      <div style="padding: 2rem;">
-        ${story()}
-        <h2>Use TAB to see the skiplink box</h2>
-      </div>
+      ${story()}
+      <h2>Use TAB to see the skiplink box</h2>
     `,
   ],
   parameters: {
     chromatic: { disableSnapshot: false },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
-    layout: 'fullscreen',
   },
   title: 'components/sbb-skiplink-list',
 };
diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss
index ce2e725f47..9839a7ba6e 100644
--- a/src/components/slider/slider.scss
+++ b/src/components/slider/slider.scss
@@ -112,7 +112,7 @@
       var(--sbb-slider-value-fraction)
   );
   transition-property: width, height;
-  transition-duration: var(--sbb-animation-duration-1x);
+  transition-duration: var(--sbb-disable-animation-time, var(--sbb-animation-duration-1x));
   transition-timing-function: ease-in;
   background-color: var(--sbb-slider-knob-color);
   border: var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style)
diff --git a/src/components/slider/slider.stories.ts b/src/components/slider/slider.stories.ts
index bf50de5994..f349057608 100644
--- a/src/components/slider/slider.stories.ts
+++ b/src/components/slider/slider.stories.ts
@@ -240,17 +240,11 @@ export const sbbSliderInFormFieldDisabled: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: ['change', 'input'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/status/status.stories.ts b/src/components/status/status.stories.ts
index 43899cbbbf..ded8227242 100644
--- a/src/components/status/status.stories.ts
+++ b/src/components/status/status.stories.ts
@@ -125,14 +125,8 @@ export const successWithCustomIconSlotted: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/tabs/tab-group/tab-group.scss b/src/components/tabs/tab-group/tab-group.scss
index 3eaeed343d..ce37e4df53 100644
--- a/src/components/tabs/tab-group/tab-group.scss
+++ b/src/components/tabs/tab-group/tab-group.scss
@@ -4,6 +4,11 @@
 @include sbb.box-sizing;
 
 :host {
+  --sbb-tab-group-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-4x)
+  );
+
   display: block;
 }
 
@@ -14,7 +19,7 @@
 
 .tab-content {
   margin-block-start: var(--sbb-spacing-responsive-m);
-  transition: height var(--sbb-animation-duration-4x) var(--sbb-animation-easing);
+  transition: height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing);
 
   ::slotted(*) {
     visibility: hidden;
@@ -29,8 +34,8 @@
     height: fit-content;
     overflow: unset;
     transition: {
-      duration: var(--sbb-animation-duration-4x);
-      delay: var(--sbb-animation-duration-4x);
+      duration: var(--sbb-tab-group-animation-duration);
+      delay: var(--sbb-tab-group-animation-duration);
       timing-function: var(--sbb-animation-easing);
       property: opacity, visibility;
     }
diff --git a/src/components/tabs/tab-group/tab-group.stories.ts b/src/components/tabs/tab-group/tab-group.stories.ts
index d6bc349f7d..0f698b7dc5 100644
--- a/src/components/tabs/tab-group/tab-group.stories.ts
+++ b/src/components/tabs/tab-group/tab-group.stories.ts
@@ -10,7 +10,6 @@ import type {
 } 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';
 
@@ -18,10 +17,6 @@ import readme from './readme.md?raw';
 import { SbbTabGroupElement } from './tab-group.js';
 import '../tab-title.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-milk)' : 'var(--sbb-color-white)',
-});
-
 const firstTabTitle = (label: string, args: Args): TemplateResult => html`
   <sbb-tab-title ${sbbSpread(args)}>${label}</sbb-tab-title>
 `;
@@ -177,7 +172,7 @@ const basicArgs: Args = {
   label: 'Tab label one',
   'icon-name': undefined,
   amount: undefined,
-  size: size.options[0],
+  size: size.options![0],
   negative: false,
 };
 
@@ -190,47 +185,41 @@ export const defaultTabsSizeL: StoryObj = {
 export const numbersAndIconsSizeL: StoryObj = {
   render: IconsAndNumbersTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options[0] },
+  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options![0] },
 };
 
 export const defaultTabsSizeXL: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, size: size.options[1] },
+  args: { ...basicArgs, size: size.options![1] },
 };
 
 export const numbersAndIconsSizeXL: StoryObj = {
   render: IconsAndNumbersTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options[0], size: size.options[1] },
+  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options![0], size: size.options![1] },
 };
 
 export const nestedTabGroups: StoryObj = {
   render: NestedTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options[0] },
+  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options![0] },
 };
 
 export const tintedBackground: StoryObj = {
   render: IconsAndNumbersTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options[0], negative: true },
+  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options![0], negative: true },
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-milk)' : 'var(--sbb-color-white)',
     actions: {
       handles: [SbbTabGroupElement.events.didChange],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/tabs/tab-title/tab-title.scss b/src/components/tabs/tab-title/tab-title.scss
index 98015ba314..75bce28e0d 100644
--- a/src/components/tabs/tab-title/tab-title.scss
+++ b/src/components/tabs/tab-title/tab-title.scss
@@ -13,7 +13,10 @@
   --sbb-tab-title-inset: 0;
   --sbb-tab-title-marker-transform: scale(0);
   --sbb-tab-title-text-decoration: none;
-  --sbb-tab-title-animation-duration: var(--sbb-animation-duration-2x);
+  --sbb-tab-title-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-2x)
+  );
   --sbb-tab-title-animation-easing: var(--sbb-animation-easing);
   --sbb-tab-title-amount-color: var(--sbb-color-metal);
 
diff --git a/src/components/tabs/tab-title/tab-title.stories.ts b/src/components/tabs/tab-title/tab-title.stories.ts
index 4470b1b973..a931c96443 100644
--- a/src/components/tabs/tab-title/tab-title.stories.ts
+++ b/src/components/tabs/tab-title/tab-title.stories.ts
@@ -71,7 +71,7 @@ const basicArgTypes: ArgTypes = {
 
 const basicArgs: Args = {
   label: 'Tab title',
-  'icon-name': iconName.options[0],
+  'icon-name': iconName.options![0],
   iconSlot: undefined,
   amount: 123,
   amountSlot: undefined,
@@ -150,15 +150,11 @@ export const WithEllipsis: StoryObj = {
     ...basicArgs,
     label: `A very long label which gets ellipsis when there is no more space to display it`,
   },
-  decorators: [(story) => html` <div style="max-width: 400px;">${story()}</div> `],
+  decorators: [(story) => html`<div style="max-width: 400px;">${story()}</div>`],
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style="padding: 2rem;">${story()}</div> `],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/tag/tag-group/tag-group.stories.ts b/src/components/tag/tag-group/tag-group.stories.ts
index 01c7f1c8e8..dd835faa35 100644
--- a/src/components/tag/tag-group/tag-group.stories.ts
+++ b/src/components/tag/tag-group/tag-group.stories.ts
@@ -154,10 +154,7 @@ export const allChoiceTagGroup: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: ['input', 'change'],
diff --git a/src/components/tag/tag/tag.scss b/src/components/tag/tag/tag.scss
index b8bc0a8ce9..5979198216 100644
--- a/src/components/tag/tag/tag.scss
+++ b/src/components/tag/tag/tag.scss
@@ -14,7 +14,7 @@
   --sbb-tag-height: #{sbb.px-to-rem-build(36)};
   --sbb-tag-inset: 0;
   --sbb-tag-content-shift: translateY(0);
-  --sbb-tag-animation-duration: var(--sbb-animation-duration-2x);
+  --sbb-tag-animation-duration: var(--sbb-disable-animation-time, var(--sbb-animation-duration-2x));
   --sbb-tag-animation-easing: var(--sbb-animation-easing);
   --sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);
   --sbb-tag-gap: var(--sbb-spacing-fixed-2x);
diff --git a/src/components/tag/tag/tag.stories.ts b/src/components/tag/tag/tag.stories.ts
index c7b6107b96..088f3ad21f 100644
--- a/src/components/tag/tag/tag.stories.ts
+++ b/src/components/tag/tag/tag.stories.ts
@@ -159,10 +159,7 @@ export const withAmountAndIconCheckedAndDisabled: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: ['input', 'change'],
diff --git a/src/components/teaser-hero/teaser-hero.scss b/src/components/teaser-hero/teaser-hero.scss
index 949e327ecf..c4cd136527 100644
--- a/src/components/teaser-hero/teaser-hero.scss
+++ b/src/components/teaser-hero/teaser-hero.scss
@@ -43,6 +43,8 @@
 .sbb-teaser-hero__panel-text {
   @include sbb.panel-text;
 
+  hyphens: auto;
+
   // Reset paragraph styles
   display: inline;
   margin: 0;
diff --git a/src/components/teaser-hero/teaser-hero.stories.ts b/src/components/teaser-hero/teaser-hero.stories.ts
index 62e25504bf..285cc33249 100644
--- a/src/components/teaser-hero/teaser-hero.stories.ts
+++ b/src/components/teaser-hero/teaser-hero.stories.ts
@@ -93,7 +93,7 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   'aria-label': undefined,
-  href: href.options[0],
+  href: href.options![0],
   rel: undefined,
   target: undefined,
   content: 'Break out and explore castles and palaces.',
@@ -146,10 +146,7 @@ export const withSlots: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     chromatic: { diffThreshold: 0.11, delay: 5000 },
     actions: {
diff --git a/src/components/teaser-paid/teaser-paid.scss b/src/components/teaser-paid/teaser-paid.scss
index bc91b7b9fd..e3eaf09fab 100644
--- a/src/components/teaser-paid/teaser-paid.scss
+++ b/src/components/teaser-paid/teaser-paid.scss
@@ -13,7 +13,10 @@
   --sbb-teaser-paid-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto
     var(--sbb-spacing-responsive-xxxs);
   --sbb-teaser-paid-brightness-hover: 1.075;
-  --sbb-teaser-paid-animation-duration: var(--sbb-animation-duration-4x);
+  --sbb-teaser-paid-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-4x)
+  );
   --sbb-teaser-paid-animation-easing: var(--sbb-animation-easing);
 }
 
diff --git a/src/components/teaser-paid/teaser-paid.stories.ts b/src/components/teaser-paid/teaser-paid.stories.ts
index 7496556aff..2aff3ea646 100644
--- a/src/components/teaser-paid/teaser-paid.stories.ts
+++ b/src/components/teaser-paid/teaser-paid.stories.ts
@@ -81,7 +81,7 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   'aria-label': undefined,
-  href: href.options[0],
+  href: href.options![0],
   rel: undefined,
   target: undefined,
   'image-src': sampleImages[1],
@@ -111,15 +111,9 @@ export const OpenInNewWindow: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     chromatic: { diffThreshold: 0.11, delay: 5000 },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/teaser/teaser.scss b/src/components/teaser/teaser.scss
index 850bd2f4f2..ea91fd4790 100644
--- a/src/components/teaser/teaser.scss
+++ b/src/components/teaser/teaser.scss
@@ -18,6 +18,10 @@
   --sbb-teaser-width: fit-content;
   --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
   --sbb-teaser-brightness-hover: 1.075;
+  --sbb-teaser-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-4x)
+  );
 }
 
 :host([alignment='after']) {
@@ -74,7 +78,7 @@
   object-fit: cover;
   width: sbb.px-to-rem-build(300);
   filter: brightness(var(--sbb-teaser-brightness, 1));
-  transition: var(--sbb-animation-duration-4x) var(--sbb-animation-easing);
+  transition: var(--sbb-teaser-animation-duration) var(--sbb-animation-easing);
   aspect-ratio: 4/3;
 
   @include sbb.hover-mq($hover: true) {
@@ -90,7 +94,7 @@
   flex-shrink: 0;
   overflow: hidden;
   border-radius: var(--sbb-teaser-border-radius);
-  transition: var(--sbb-animation-duration-4x) var(--sbb-animation-easing);
+  transition: var(--sbb-teaser-animation-duration) var(--sbb-animation-easing);
 
   @include sbb.hover-mq($hover: true) {
     .sbb-teaser:hover & {
diff --git a/src/components/teaser/teaser.stories.ts b/src/components/teaser/teaser.stories.ts
index 46b7e56c80..7dba0ac814 100644
--- a/src/components/teaser/teaser.stories.ts
+++ b/src/components/teaser/teaser.stories.ts
@@ -78,7 +78,7 @@ const defaultArgs: Args = {
   'title-content': 'This is a title',
   'chip-content': undefined,
   alignment: 'after-centered',
-  href: href.options[1],
+  href: href.options![1],
   description: 'This is a paragraph',
   'aria-label':
     'The text which gets exposed to screen reader users. The text should reflect all the information which gets passed into the components slots and which is visible in the Teaser, either through text or iconography',
@@ -245,16 +245,13 @@ export const WithSlots: StoryObj = {
 
 const meta: Meta = {
   decorators: [
-    (story) => html` <div style="padding: 2rem; max-width: 760px;">${story()}</div> `,
+    (story) => html`<div style="max-width: 760px;">${story()}</div>`,
     withActions as Decorator,
   ],
   parameters: {
     actions: {
       handles: ['click'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/time-input/time-input.stories.ts b/src/components/time-input/time-input.stories.ts
index 979bc4cd57..9ac6d11eb4 100644
--- a/src/components/time-input/time-input.stories.ts
+++ b/src/components/time-input/time-input.stories.ts
@@ -10,7 +10,6 @@ import type {
 } 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 type { SbbFormErrorElement } from '../form-error.js';
@@ -22,10 +21,6 @@ import '../button/secondary-button.js';
 import '../form-field.js';
 import '../form-error.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const updateFormError = (event: CustomEvent): void => {
   const valid = event.detail.valid;
   const target = event.target as SbbTimeInputElement;
@@ -201,7 +196,7 @@ const basicArgs: Args = {
 const formFieldBasicArgs = {
   ...basicArgs,
   label: 'Label',
-  size: size.options[0],
+  size: size.options![0],
   optional: false,
   borderless: false,
   iconStart: undefined,
@@ -211,7 +206,7 @@ const formFieldBasicArgs = {
 const formFieldBasicArgsWithIcons = {
   ...basicArgs,
   label: 'Label',
-  size: size.options[0],
+  size: size.options![0],
   optional: false,
   borderless: false,
   iconStart: 'clock-small',
@@ -361,19 +356,13 @@ export const SbbTimeInputWithErrorNegative: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     actions: {
       handles: ['change', 'input', SbbTimeInputElement.events.validationChange],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/timetable-duration/timetable-duration.stories.ts b/src/components/timetable-duration/timetable-duration.stories.ts
index 4d8809e2de..27cf666a2b 100644
--- a/src/components/timetable-duration/timetable-duration.stories.ts
+++ b/src/components/timetable-duration/timetable-duration.stories.ts
@@ -45,7 +45,6 @@ export const HoursAndMinutes: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html`${story()}`],
   parameters: {
     docs: {
       extractComponentDescription: () => readme,
diff --git a/src/components/timetable-occupancy-icon/timetable-occupancy-icon.stories.ts b/src/components/timetable-occupancy-icon/timetable-occupancy-icon.stories.ts
index 376d424798..327beb6804 100644
--- a/src/components/timetable-occupancy-icon/timetable-occupancy-icon.stories.ts
+++ b/src/components/timetable-occupancy-icon/timetable-occupancy-icon.stories.ts
@@ -3,17 +3,12 @@ import type { InputType, StoryContext } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } 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 readme from './readme.md?raw';
 import './timetable-occupancy-icon.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const negative: InputType = {
   control: {
     type: 'boolean',
@@ -34,7 +29,7 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   negative: false,
-  occupancy: occupancy.options[0],
+  occupancy: occupancy.options![0],
 };
 
 const Template = (args: Args): TemplateResult => html`
@@ -50,19 +45,19 @@ export const HighOccupancy: StoryObj = {
 export const MediumOccupancy: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, occupancy: occupancy.options[1] },
+  args: { ...defaultArgs, occupancy: occupancy.options![1] },
 };
 
 export const LowOccupancy: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, occupancy: occupancy.options[2] },
+  args: { ...defaultArgs, occupancy: occupancy.options![2] },
 };
 
 export const NoneOccupancy: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, occupancy: occupancy.options[3] },
+  args: { ...defaultArgs, occupancy: occupancy.options![3] },
 };
 
 export const HighOccupancyNegative: StoryObj = {
@@ -74,32 +69,26 @@ export const HighOccupancyNegative: StoryObj = {
 export const MediumOccupancyNegative: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, negative: true, occupancy: occupancy.options[1] },
+  args: { ...defaultArgs, negative: true, occupancy: occupancy.options![1] },
 };
 
 export const LowOccupancyNegative: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, negative: true, occupancy: occupancy.options[2] },
+  args: { ...defaultArgs, negative: true, occupancy: occupancy.options![2] },
 };
 
 export const NoneOccupancyNegative: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, negative: true, occupancy: occupancy.options[3] },
+  args: { ...defaultArgs, negative: true, occupancy: occupancy.options![3] },
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/timetable-occupancy/timetable-occupancy.stories.ts b/src/components/timetable-occupancy/timetable-occupancy.stories.ts
index 4ad9516f6e..a6f1db4739 100644
--- a/src/components/timetable-occupancy/timetable-occupancy.stories.ts
+++ b/src/components/timetable-occupancy/timetable-occupancy.stories.ts
@@ -2,7 +2,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, Args, StoryContext, ArgTypes } 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';
 
@@ -10,10 +9,6 @@ import './timetable-occupancy.js';
 
 import readme from './readme.md?raw';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const negative: InputType = {
   control: {
     type: 'boolean',
@@ -217,15 +212,9 @@ export const HighHighOccupancyNegative: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-  ],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/timetable-row/timetable-row.stories.ts b/src/components/timetable-row/timetable-row.stories.ts
index 6ee51720ca..544f6bcf0a 100644
--- a/src/components/timetable-row/timetable-row.stories.ts
+++ b/src/components/timetable-row/timetable-row.stories.ts
@@ -367,10 +367,7 @@ export const Notices: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="background: #f6f6f6; padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: ['click'],
diff --git a/src/components/title.ts b/src/components/title.ts
index 62673b3a5c..fe3b1ad626 100644
--- a/src/components/title.ts
+++ b/src/components/title.ts
@@ -1 +1,2 @@
 export * from './title/title.js';
+export * from './title/title-base.js';
diff --git a/src/components/title/readme.md b/src/components/title/readme.md
index fa057357bb..62f3237e1d 100644
--- a/src/components/title/readme.md
+++ b/src/components/title/readme.md
@@ -35,12 +35,12 @@ If the title is needed, but it must to not be displayed, it's possible to use th
 
 ## Properties
 
-| Name             | Attribute         | Privacy | Type                         | Default | Description                                                                                                                                                                                    |
-| ---------------- | ----------------- | ------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `level`          | `level`           | public  | `SbbTitleLevel`              | `'1'`   | Title level                                                                                                                                                                                    |
-| `visualLevel`    | `visual-level`    | public  | `SbbTitleLevel \| undefined` |         | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                             |
-| `visuallyHidden` | `visually-hidden` | public  | `boolean \| undefined`       |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true |
-| `negative`       | `negative`        | public  | `boolean`                    | `false` | Negative coloring variant flag.                                                                                                                                                                |
+| Name             | Attribute         | Privacy | Type                         | Default | Description                                                                                                                                                                                     |
+| ---------------- | ----------------- | ------- | ---------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `negative`       | `negative`        | public  | `boolean`                    | `false` | Negative coloring variant flag.                                                                                                                                                                 |
+| `level`          | `level`           | public  | `SbbTitleLevel`              | `'1'`   | Title level                                                                                                                                                                                     |
+| `visualLevel`    | `visual-level`    | public  | `SbbTitleLevel \| undefined` |         | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                              |
+| `visuallyHidden` | `visually-hidden` | public  | `boolean \| undefined`       |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true. |
 
 ## CSS Properties
 
diff --git a/src/components/title/title-base.ts b/src/components/title/title-base.ts
new file mode 100644
index 0000000000..67a7a9740f
--- /dev/null
+++ b/src/components/title/title-base.ts
@@ -0,0 +1,58 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { html, unsafeStatic } from 'lit/static-html.js';
+
+import { hostAttributes } from '../core/decorators.js';
+import { SbbNegativeMixin } from '../core/mixins.js';
+
+import style from './title-common.scss?lit&inline';
+
+export type SbbTitleLevel = '1' | '2' | '3' | '4' | '5' | '6';
+
+/**
+ * It displays a title with a heading role.
+ *
+ * @slot - Use the unnamed slot to display the title.
+ */
+@hostAttributes({
+  role: 'heading',
+})
+export abstract class SbbTitleBase extends SbbNegativeMixin(LitElement) {
+  public static override styles: CSSResultGroup = style;
+
+  /** Title level */
+  @property({ reflect: true }) public level: SbbTitleLevel = '1';
+
+  /** Visual level for the title. Optional, if not set, the value of level will be used. */
+  @property({ attribute: 'visual-level', reflect: true })
+  public visualLevel?: SbbTitleLevel;
+
+  /**
+   * Sometimes we need a title in the markup to present a proper hierarchy
+   * to the screen readers while we do not want to let that title appear
+   * visually. In this case we set visuallyHidden to true.
+   */
+  @property({ attribute: 'visually-hidden', reflect: true, type: Boolean })
+  public visuallyHidden?: boolean;
+
+  protected override willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('level')) {
+      this.setAttribute('aria-level', this.level);
+    }
+  }
+
+  protected override render(): TemplateResult {
+    const TAGNAME = `h${this.level}`;
+
+    /* eslint-disable lit/binding-positions */
+    return html`
+      <${unsafeStatic(TAGNAME)} class="sbb-title" role="presentation">
+        <slot></slot>
+      </${unsafeStatic(TAGNAME)}>
+    `;
+    /* eslint-enable lit/binding-positions */
+  }
+}
diff --git a/src/components/title/title-common.scss b/src/components/title/title-common.scss
new file mode 100644
index 0000000000..f8a5f6e818
--- /dev/null
+++ b/src/components/title/title-common.scss
@@ -0,0 +1,53 @@
+@use '../core/styles' as sbb;
+
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
+
+:host {
+  --sbb-title-text-color-normal: var(
+    --sbb-title-text-color-normal-override,
+    var(--sbb-color-charcoal)
+  );
+
+  display: block;
+}
+
+:host([negative]) {
+  @include sbb.title--negative;
+}
+
+:host([id]) {
+  @include sbb.scroll-margin-block-start;
+}
+
+.sbb-title {
+  color: var(--sbb-title-text-color-normal);
+
+  :host([visually-hidden]) & {
+    @include sbb.screen-reader-only;
+  }
+
+  :host(:is([level='1']:not([visual-level]), [visual-level='1'])) & {
+    @include sbb.title-1($exclude-spacing: true);
+  }
+
+  :host(:is([level='2']:not([visual-level]), [visual-level='2'])) & {
+    @include sbb.title-2($exclude-spacing: true);
+  }
+
+  :host(:is([level='3']:not([visual-level]), [visual-level='3'])) & {
+    @include sbb.title-3($exclude-spacing: true);
+  }
+
+  :host(:is([level='4']:not([visual-level]), [visual-level='4'])) & {
+    @include sbb.title-4($exclude-spacing: true);
+  }
+
+  :host(:is([level='5']:not([visual-level]), [visual-level='5'])) & {
+    @include sbb.title-5($exclude-spacing: true);
+  }
+
+  :host(:is([level='6']:not([visual-level]), [visual-level='6'])) & {
+    @include sbb.title-6($exclude-spacing: true);
+  }
+}
diff --git a/src/components/title/title.scss b/src/components/title/title.scss
index 15a341ae80..020abf0044 100644
--- a/src/components/title/title.scss
+++ b/src/components/title/title.scss
@@ -1,17 +1,9 @@
 @use '../core/styles' as sbb;
 
-// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
-@include sbb.box-sizing;
-
 :host {
-  --sbb-title-text-color-normal: var(
-    --sbb-title-text-color-normal-override,
-    var(--sbb-color-charcoal)
-  );
   --sbb-title-margin-block-start: 0;
   --sbb-title-margin-block-end: 0;
 
-  display: block;
   margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
 }
 
@@ -45,43 +37,3 @@
 :host(:where([level='6']:not([visual-level]), [visual-level='6']):where(:not([visually-hidden]))) {
   --sbb-title-margin-block-end: var(--sbb-spacing-fixed-1x);
 }
-
-:host([negative]) {
-  @include sbb.title--negative;
-}
-
-:host([id]) {
-  @include sbb.scroll-margin-block-start;
-}
-
-.sbb-title {
-  color: var(--sbb-title-text-color-normal);
-
-  :host([visually-hidden]) & {
-    @include sbb.screen-reader-only;
-  }
-
-  :host(:is([level='1']:not([visual-level]), [visual-level='1'])) & {
-    @include sbb.title-1($exclude-spacing: true);
-  }
-
-  :host(:is([level='2']:not([visual-level]), [visual-level='2'])) & {
-    @include sbb.title-2($exclude-spacing: true);
-  }
-
-  :host(:is([level='3']:not([visual-level]), [visual-level='3'])) & {
-    @include sbb.title-3($exclude-spacing: true);
-  }
-
-  :host(:is([level='4']:not([visual-level]), [visual-level='4'])) & {
-    @include sbb.title-4($exclude-spacing: true);
-  }
-
-  :host(:is([level='5']:not([visual-level]), [visual-level='5'])) & {
-    @include sbb.title-5($exclude-spacing: true);
-  }
-
-  :host(:is([level='6']:not([visual-level]), [visual-level='6'])) & {
-    @include sbb.title-6($exclude-spacing: true);
-  }
-}
diff --git a/src/components/title/title.stories.ts b/src/components/title/title.stories.ts
index b7a5ebb9df..47f3550386 100644
--- a/src/components/title/title.stories.ts
+++ b/src/components/title/title.stories.ts
@@ -2,19 +2,12 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, StoryContext } 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 readme from './readme.md?raw';
 import './title.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
-
 // we don't need to pass the args.text to the <sbb-title> tag, but Storybook wants all in it.
 const Template = ({ text, ...args }: Args): TemplateResult =>
   html`<sbb-title ${sbbSpread(args)}>${text}</sbb-title>`;
@@ -39,7 +32,7 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  level: level.options[0],
+  level: level.options![0],
   text: 'Data without insights are trivial, and insights without action are pointless',
   negative: false,
   'visual-level': undefined,
@@ -64,46 +57,43 @@ export const h1Negative: StoryObj = {
 export const h2: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, level: level.options[1] },
+  args: { ...defaultArgs, level: level.options![1] },
 };
 
 export const h3: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, level: level.options[2] },
+  args: { ...defaultArgs, level: level.options![2] },
 };
 
 export const h4: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, level: level.options[3] },
+  args: { ...defaultArgs, level: level.options![3] },
 };
 
 export const h5: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, level: level.options[4] },
+  args: { ...defaultArgs, level: level.options![4] },
 };
 
 export const h6: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, level: level.options[5] },
+  args: { ...defaultArgs, level: level.options![5] },
 };
 
 export const h6VisualLevel: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, level: level.options[0], 'visual-level': level.options[5] },
+  args: { ...defaultArgs, level: level.options![0], 'visual-level': level.options![5] },
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-  ],
   parameters: {
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-charcoal)' : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/title/title.ts b/src/components/title/title.ts
index 0d5801fe79..15d638428e 100644
--- a/src/components/title/title.ts
+++ b/src/components/title/title.ts
@@ -1,63 +1,16 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { html, unsafeStatic } from 'lit/static-html.js';
-
-import { hostAttributes } from '../core/decorators.js';
-import { SbbNegativeMixin } from '../core/mixins.js';
+import type { CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
 
+import { SbbTitleBase } from './title-base.js';
 import style from './title.scss?lit&inline';
 
-export type SbbTitleLevel = '1' | '2' | '3' | '4' | '5' | '6';
-
 /**
- * It displays a title wrapped into a heading tag.
- *
- * @slot - Use the unnamed slot to display the title.
  * @cssprop [--sbb-title-margin-block-start=var(--sbb-spacing-responsive-m)] - Margin block start of the title.
  * @cssprop [--sbb-title-margin-block-end=var(--sbb-spacing-responsive-s)] - Margin block end of the title.
  */
 @customElement('sbb-title')
-@hostAttributes({
-  role: 'heading',
-})
-export class SbbTitleElement extends SbbNegativeMixin(LitElement) {
-  public static override styles: CSSResultGroup = style;
-
-  /** Title level */
-  @property({ reflect: true }) public level: SbbTitleLevel = '1';
-
-  /** Visual level for the title. Optional, if not set, the value of level will be used. */
-  @property({ attribute: 'visual-level', reflect: true })
-  public visualLevel?: SbbTitleLevel;
-
-  /**
-   * Sometimes we need a title in the markup to present a proper hierarchy
-   * to the screen readers while we do not want to let that title appear
-   * visually. In this case we set visuallyHidden to true
-   */
-  @property({ attribute: 'visually-hidden', reflect: true, type: Boolean })
-  public visuallyHidden?: boolean;
-
-  protected override willUpdate(changedProperties: PropertyValues): void {
-    super.willUpdate(changedProperties);
-
-    if (changedProperties.has('level')) {
-      this.setAttribute('aria-level', this.level);
-    }
-  }
-
-  protected override render(): TemplateResult {
-    const TAGNAME = `h${this.level}`;
-
-    /* eslint-disable lit/binding-positions */
-    return html`
-      <${unsafeStatic(TAGNAME)} class="sbb-title" role="presentation">
-        <slot></slot>
-      </${unsafeStatic(TAGNAME)}>
-    `;
-    /* eslint-enable lit/binding-positions */
-  }
+export class SbbTitleElement extends SbbTitleBase {
+  public static override styles: CSSResultGroup = [SbbTitleBase.styles, style];
 }
 
 declare global {
diff --git a/src/components/toast/readme.md b/src/components/toast/readme.md
index 1becfac49c..8ab955cfb0 100644
--- a/src/components/toast/readme.md
+++ b/src/components/toast/readme.md
@@ -102,14 +102,13 @@ Unless strictly necessary, we advise you not to wrap it preventively and let the
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                               | Default           | Description                                                                                                                                         |
-| ------------------ | ------------------- | ------- | ---------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `timeout`          | `timeout`           | public  | `number`                           | `6000`            | The length of time in milliseconds to wait before automatically dismissing the toast. If 0, it stays open indefinitely.                             |
-| `position`         | `position`          | public  | `SbbToastPosition`                 | `'bottom-center'` | The position where to place the toast.                                                                                                              |
-| `dismissible`      | `dismissible`       | public  | `boolean`                          | `false`           | Whether the toast has a close button.                                                                                                               |
-| `politeness`       | `politeness`        | public  | `'polite' \| 'assertive' \| 'off'` | `'polite'`        | The ARIA politeness level. Check https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA\_Live\_Regions#live\_regions for further info |
-| `disableAnimation` | `disable-animation` | public  | `boolean`                          | `false`           | Whether the animation is disabled.                                                                                                                  |
-| `iconName`         | `icon-name`         | public  | `string \| undefined`              |                   | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch.                    |
+| Name          | Attribute     | Privacy | Type                               | Default           | Description                                                                                                                                         |
+| ------------- | ------------- | ------- | ---------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `timeout`     | `timeout`     | public  | `number`                           | `6000`            | The length of time in milliseconds to wait before automatically dismissing the toast. If 0, it stays open indefinitely.                             |
+| `position`    | `position`    | public  | `SbbToastPosition`                 | `'bottom-center'` | The position where to place the toast.                                                                                                              |
+| `dismissible` | `dismissible` | public  | `boolean`                          | `false`           | Whether the toast has a close button.                                                                                                               |
+| `politeness`  | `politeness`  | public  | `'polite' \| 'assertive' \| 'off'` | `'polite'`        | The ARIA politeness level. Check https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA\_Live\_Regions#live\_regions for further info |
+| `iconName`    | `icon-name`   | public  | `string \| undefined`              |                   | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch.                    |
 
 ## Methods
 
diff --git a/src/components/toast/toast.e2e.ts b/src/components/toast/toast.e2e.ts
index 0a31931590..4570caeb40 100644
--- a/src/components/toast/toast.e2e.ts
+++ b/src/components/toast/toast.e2e.ts
@@ -153,8 +153,8 @@ describe(`sbb-toast with ${fixture.name}`, () => {
     element = await fixture<SbbToastElement>(
       html`
         <div>
-          <sbb-toast id="toast1" disable-animation></sbb-toast>
-          <sbb-toast id="toast2" disable-animation></sbb-toast>
+          <sbb-toast id="toast1"></sbb-toast>
+          <sbb-toast id="toast2"></sbb-toast>
         </div>
       `,
       { modules: ['./toast.ts'] },
diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss
index 526e57bbbb..84527ce226 100644
--- a/src/components/toast/toast.scss
+++ b/src/components/toast/toast.scss
@@ -5,7 +5,10 @@
 
 :host {
   --sbb-toast-max-width: #{sbb.px-to-rem-build(400)};
-  --sbb-toast-animation-duration: var(--sbb-animation-duration-6x);
+  --sbb-toast-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-6x)
+  );
   --sbb-toast-animation-timing-function: ease;
   --sbb-toast-color: var(--sbb-color-white);
   --sbb-toast-text-color: var(--sbb-color-milk);
@@ -23,10 +26,6 @@
   display: block;
 }
 
-:host([disable-animation]) {
-  --sbb-toast-animation-duration: 0.1ms;
-}
-
 :host(:not([data-state])),
 :host([data-state='closed']) {
   --sbb-toast-container-display: none;
diff --git a/src/components/toast/toast.stories.ts b/src/components/toast/toast.stories.ts
index 767f2d7757..ecba752d74 100644
--- a/src/components/toast/toast.stories.ts
+++ b/src/components/toast/toast.stories.ts
@@ -80,19 +80,12 @@ const iconName: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
 const defaultArgTypes: ArgTypes = {
   position,
   dismissible,
   timeout,
   politeness,
   'icon-name': iconName,
-  'disable-animation': disableAnimation,
 };
 
 const defaultArgs: Args = {
@@ -101,7 +94,6 @@ const defaultArgs: Args = {
   timeout: 6000,
   politeness: 'polite',
   'icon-name': 'circle-tick-small',
-  'disable-animation': isChromatic(),
 };
 
 const toastTemplate = (
@@ -178,10 +170,7 @@ export const WithActionLink: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem; height: calc(100vh - 2rem);">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     chromatic: { disableSnapshot: false },
     actions: {
@@ -192,10 +181,9 @@ const meta: Meta = {
         SbbToastElement.events.didClose,
       ],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
+      // Setting the iFrame height ensures that the story has enough space when used in the docs section.
+      story: { inline: false, iframeHeight: '200px' },
       extractComponentDescription: () => readme,
     },
   },
diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts
index ebb6f5f519..f0f7d9086f 100644
--- a/src/components/toast/toast.ts
+++ b/src/components/toast/toast.ts
@@ -67,10 +67,6 @@ export class SbbToastElement extends SbbIconNameMixin(LitElement) {
    */
   @property() public politeness: 'polite' | 'assertive' | 'off' = 'polite';
 
-  /** Whether the animation is disabled. */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   /* The state of the toast. */
   private set _state(state: SbbOpenedClosedState) {
     this.setAttribute('data-state', state);
diff --git a/src/components/toggle-check/toggle-check.scss b/src/components/toggle-check/toggle-check.scss
index e9f0f3b753..3c9f7c8329 100644
--- a/src/components/toggle-check/toggle-check.scss
+++ b/src/components/toggle-check/toggle-check.scss
@@ -25,6 +25,10 @@
   --sbb-toggle-check-cursor: pointer;
   --sbb-toggle-check-flex-direction: row-reverse;
   --sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-toggle-check-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-6x)
+  );
 
   @include sbb.if-forced-colors {
     --sbb-toggle-check-background-color: CanvasText;
@@ -147,7 +151,7 @@
   color: var(--sbb-toggle-check-icon-color);
   will-change: transform;
   transform: var(--sbb-toggle-check-circle-transform);
-  transition: transform ease var(--sbb-animation-duration-6x);
+  transition: transform ease var(--sbb-toggle-check-animation-duration);
 }
 
 .sbb-toggle-check__icon {
@@ -156,5 +160,5 @@
   width: var(--sbb-size-icon-ui-small);
   height: var(--sbb-size-icon-ui-small);
   opacity: var(--sbb-toggle-check-icon-opacity);
-  transition: opacity ease var(--sbb-animation-duration-6x);
+  transition: opacity ease var(--sbb-toggle-check-animation-duration);
 }
diff --git a/src/components/toggle-check/toggle-check.stories.ts b/src/components/toggle-check/toggle-check.stories.ts
index de5ade98ed..4e12282e80 100644
--- a/src/components/toggle-check/toggle-check.stories.ts
+++ b/src/components/toggle-check/toggle-check.stories.ts
@@ -89,14 +89,14 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  size: size.options[0],
+  size: size.options![0],
   checked: false,
   disabled: false,
   label: 'Label',
   value: 'Value',
   name: 'name',
   'icon-name': undefined,
-  'label-position': labelPosition.options[1],
+  'label-position': labelPosition.options![1],
   'aria-label': undefined,
 };
 
@@ -178,7 +178,7 @@ export const SbbToggleCheckDefaultSizeM: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[1],
+    size: size.options![1],
   },
 };
 
@@ -206,7 +206,7 @@ export const SbbToggleCheckDefaultLongLabelSizeM: StoryObj = {
   args: {
     ...defaultArgs,
     label: longLabel,
-    size: size.options[1],
+    size: size.options![1],
   },
 };
 
@@ -289,9 +289,6 @@ const meta: Meta = {
     actions: {
       handles: ['change', 'input'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/toggle/toggle-option/toggle-option.stories.ts b/src/components/toggle/toggle-option/toggle-option.stories.ts
index 9e1ab0bef3..3a39b39dc6 100644
--- a/src/components/toggle/toggle-option/toggle-option.stories.ts
+++ b/src/components/toggle/toggle-option/toggle-option.stories.ts
@@ -91,39 +91,33 @@ export const Default: StoryObj = {
 export const IconOnly: StoryObj = {
   render: DefaultTemplate,
   argTypes: { ...defaultArgTypes },
-  args: { ...defaultArgs, label: undefined, 'icon-name': iconName.options[1] },
+  args: { ...defaultArgs, label: undefined, 'icon-name': iconName.options![1] },
 };
 
 export const LabelAndIcon: StoryObj = {
   render: DefaultTemplate,
   argTypes: { ...defaultArgTypes },
-  args: { ...defaultArgs, 'icon-name': iconName.options[1] },
+  args: { ...defaultArgs, 'icon-name': iconName.options![1] },
 };
 
 export const IconOnlySlotted: StoryObj = {
   render: SlottedIconTemplate,
   argTypes: { ...defaultArgTypes },
-  args: { ...defaultArgs, label: undefined, 'icon-name': iconName.options[1] },
+  args: { ...defaultArgs, label: undefined, 'icon-name': iconName.options![1] },
 };
 
 export const LabelAndIconSlotted: StoryObj = {
   render: SlottedIconTemplate,
   argTypes: { ...defaultArgTypes },
-  args: { ...defaultArgs, 'icon-name': iconName.options[1] },
+  args: { ...defaultArgs, 'icon-name': iconName.options![1] },
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: ['input'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/toggle/toggle/readme.md b/src/components/toggle/toggle/readme.md
index dcc3418fb2..d1a66e9935 100644
--- a/src/components/toggle/toggle/readme.md
+++ b/src/components/toggle/toggle/readme.md
@@ -34,13 +34,12 @@ The component has two different sizes, `s` and `m` (default), which can be set u
 
 ## Properties
 
-| Name               | Attribute           | Privacy | Type                      | Default | Description                                                                                                                                      |
-| ------------------ | ------------------- | ------- | ------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `disabled`         | `disabled`          | public  | `boolean`                 | `false` | Whether the toggle is disabled.                                                                                                                  |
-| `even`             | `even`              | public  | `boolean`                 | `false` | If true, set the width of the component fixed; if false, the width is dynamic based on the label of the sbb-toggle-option.                       |
-| `size`             | `size`              | public  | `'s' \| 'm' \| undefined` | `'m'`   | Size variant, either m or s.                                                                                                                     |
-| `value`            | `value`             | public  | `any \| null`             |         | The value of the toggle. It needs to be mutable since it is updated whenever a new option is selected (see the `onToggleOptionSelect()` method). |
-| `disableAnimation` | `disable-animation` | public  | `boolean`                 | `false` | Whether the animation is enabled.                                                                                                                |
+| Name       | Attribute  | Privacy | Type                      | Default | Description                                                                                                                                      |
+| ---------- | ---------- | ------- | ------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `disabled` | `disabled` | public  | `boolean`                 | `false` | Whether the toggle is disabled.                                                                                                                  |
+| `even`     | `even`     | public  | `boolean`                 | `false` | If true, set the width of the component fixed; if false, the width is dynamic based on the label of the sbb-toggle-option.                       |
+| `size`     | `size`     | public  | `'s' \| 'm' \| undefined` | `'m'`   | Size variant, either m or s.                                                                                                                     |
+| `value`    | `value`    | public  | `any \| null`             |         | The value of the toggle. It needs to be mutable since it is updated whenever a new option is selected (see the `onToggleOptionSelect()` method). |
 
 ## Events
 
diff --git a/src/components/toggle/toggle/toggle.scss b/src/components/toggle/toggle/toggle.scss
index e8082fc028..930ad67365 100644
--- a/src/components/toggle/toggle/toggle.scss
+++ b/src/components/toggle/toggle/toggle.scss
@@ -10,7 +10,10 @@
   );
   --sbb-toggle-selected-option-border-color: var(--sbb-color-smoke);
   --sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);
-  --sbb-toggle-animation-duration: var(--sbb-animation-duration-6x);
+  --sbb-toggle-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-6x)
+  );
   --sbb-toggle-height: #{sbb.px-to-rem-build(28)};
   --sbb-toggle-border-width: var(--sbb-border-width-1x);
   --sbb-toggle-border-style: solid;
@@ -55,9 +58,8 @@
   }
 }
 
-:host([disable-animation]),
 :host([data-disable-animation-on-resizing]) {
-  --sbb-toggle-animation-duration: 0.1ms;
+  @include sbb.disable-animation;
 }
 
 .sbb-toggle {
diff --git a/src/components/toggle/toggle/toggle.stories.ts b/src/components/toggle/toggle/toggle.stories.ts
index 43ae9e3ae8..9bb93d285c 100644
--- a/src/components/toggle/toggle/toggle.stories.ts
+++ b/src/components/toggle/toggle/toggle.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 type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
@@ -48,15 +47,6 @@ const value: InputType = {
   },
 };
 
-const disableAnimation: InputType = {
-  control: {
-    type: 'boolean',
-  },
-  table: {
-    category: 'Toggle',
-  },
-};
-
 const label: InputType = {
   control: {
     type: 'text',
@@ -102,19 +92,17 @@ const defaultArgTypes: ArgTypes = {
   label,
   labelTwo,
   iconName,
-  'disable-animation': disableAnimation,
   ariaLabel,
 };
 
 const defaultArgs: Args = {
   disabled: false,
   even: false,
-  size: size.options[0],
+  size: size.options![0],
   value: 'Value 1',
   label: 'Bern',
   labelTwo: 'Zürich',
   iconName: undefined,
-  'disable-animation': isChromatic(),
   ariaLabel: undefined,
 };
 
@@ -164,7 +152,7 @@ export const SizeM: StoryObj = {
 export const SizeS: StoryObj = {
   render: DefaultTemplate,
   argTypes: { ...defaultArgTypes },
-  args: { ...defaultArgs, size: size.options[1] },
+  args: { ...defaultArgs, size: size.options![1] },
 };
 
 export const Disabled: StoryObj = {
@@ -176,7 +164,7 @@ export const Disabled: StoryObj = {
 export const DisabledSizeS: StoryObj = {
   render: DefaultTemplate,
   argTypes: { ...defaultArgTypes },
-  args: { ...defaultArgs, disabled: true, size: size.options[1] },
+  args: { ...defaultArgs, disabled: true, size: size.options![1] },
 };
 
 export const Even: StoryObj = {
@@ -188,25 +176,25 @@ export const Even: StoryObj = {
 export const EvenSizeS: StoryObj = {
   render: DefaultTemplate,
   argTypes: { ...defaultArgTypes },
-  args: { ...defaultArgs, even: true, size: size.options[1] },
+  args: { ...defaultArgs, even: true, size: size.options![1] },
 };
 
 export const LabelAndIcon: StoryObj = {
   render: DefaultTemplate,
   argTypes: { ...defaultArgTypes },
-  args: { ...defaultArgs, iconName: iconName.options[0] },
+  args: { ...defaultArgs, iconName: iconName.options![0] },
 };
 
 export const LabelAndIconSizeS: StoryObj = {
   render: DefaultTemplate,
   argTypes: { ...defaultArgTypes },
-  args: { ...defaultArgs, iconName: iconName.options[0], size: size.options[1] },
+  args: { ...defaultArgs, iconName: iconName.options![0], size: size.options![1] },
 };
 
 export const LabelAndIconSlotted: StoryObj = {
   render: SlottedIconTemplate,
   argTypes: { ...defaultArgTypes },
-  args: { ...defaultArgs, iconName: iconName.options[1] },
+  args: { ...defaultArgs, iconName: iconName.options![1] },
 };
 
 export const IconsOnly: StoryObj = {
@@ -214,7 +202,7 @@ export const IconsOnly: StoryObj = {
   argTypes: { ...defaultArgTypes },
   args: {
     ...defaultArgs,
-    iconName: iconName.options[0],
+    iconName: iconName.options![0],
     label: undefined,
     labelTwo: undefined,
   },
@@ -225,8 +213,8 @@ export const IconsOnlySizeS: StoryObj = {
   argTypes: { ...defaultArgTypes },
   args: {
     ...defaultArgs,
-    iconName: iconName.options[0],
-    size: size.options[1],
+    iconName: iconName.options![0],
+    size: size.options![1],
     label: undefined,
     labelTwo: undefined,
   },
@@ -237,7 +225,7 @@ export const IconsOnlySlotted: StoryObj = {
   argTypes: { ...defaultArgTypes },
   args: {
     ...defaultArgs,
-    iconName: iconName.options[1],
+    iconName: iconName.options![1],
     label: undefined,
     labelTwo: undefined,
   },
@@ -250,7 +238,7 @@ export const DynamicWidth: StoryObj = {
     ...defaultArgs,
     label: 'Zürich',
     labelTwo: 'Schwarzenbach SG, Schloss Schwarzenbach, Wilerstrasse',
-    iconName: iconName.options[1],
+    iconName: iconName.options![1],
   },
 };
 
@@ -259,25 +247,19 @@ export const DynamicWidthSizeS: StoryObj = {
   argTypes: { ...defaultArgTypes },
   args: {
     ...defaultArgs,
-    size: size.options[1],
+    size: size.options![1],
     label: 'Zürich',
     labelTwo: 'Schwarzenbach SG, Schloss Schwarzenbach, Wilerstrasse',
-    iconName: iconName.options[1],
+    iconName: iconName.options![1],
   },
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: ['change', 'input'],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/toggle/toggle/toggle.ts b/src/components/toggle/toggle/toggle.ts
index cf913c9d84..7d3a7a77ae 100644
--- a/src/components/toggle/toggle/toggle.ts
+++ b/src/components/toggle/toggle/toggle.ts
@@ -71,12 +71,6 @@ export class SbbToggleElement extends LitElement {
   @property()
   public value: any | null;
 
-  /**
-   * Whether the animation is enabled.
-   */
-  @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
-  public disableAnimation = false;
-
   private _loaded: boolean = false;
   private _toggleElement!: HTMLElement;
   private _toggleResizeObserver = new AgnosticResizeObserver(() =>
diff --git a/src/components/train/train-blocked-passage/train-blocked-passage.stories.ts b/src/components/train/train-blocked-passage/train-blocked-passage.stories.ts
index 01ee052443..695ffd6beb 100644
--- a/src/components/train/train-blocked-passage/train-blocked-passage.stories.ts
+++ b/src/components/train/train-blocked-passage/train-blocked-passage.stories.ts
@@ -16,11 +16,7 @@ export const blockedPassage: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style="padding: 2rem;">${story()}</div> `],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/train/train-formation/train-formation.stories.ts b/src/components/train/train-formation/train-formation.stories.ts
index acdddd6f1c..ce739fce6d 100644
--- a/src/components/train/train-formation/train-formation.stories.ts
+++ b/src/components/train/train-formation/train-formation.stories.ts
@@ -365,11 +365,7 @@ export const TrainFormationHideWagonLabel: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style="padding: 2rem;">${story()}</div> `],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/train/train-wagon/train-wagon.stories.ts b/src/components/train/train-wagon/train-wagon.stories.ts
index ddc6256c87..a9c0fac97e 100644
--- a/src/components/train/train-wagon/train-wagon.stories.ts
+++ b/src/components/train/train-wagon/train-wagon.stories.ts
@@ -76,9 +76,9 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   label: '36',
-  type: type.options[2],
-  occupancy: occupancy.options[2],
-  'wagon-class': wagonClass.options[1],
+  type: type.options![2],
+  occupancy: occupancy.options![2],
+  'wagon-class': wagonClass.options![1],
   'additional-accessibility-text': undefined,
 };
 
@@ -93,7 +93,7 @@ export const wagonMediumOccupancy: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    occupancy: occupancy.options[1],
+    occupancy: occupancy.options![1],
   },
 };
 
@@ -102,7 +102,7 @@ export const wagonHighOccupancy: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    occupancy: occupancy.options[0],
+    occupancy: occupancy.options![0],
   },
 };
 
@@ -111,7 +111,7 @@ export const wagonNoneOccupancy: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    occupancy: occupancy.options[3],
+    occupancy: occupancy.options![3],
   },
 };
 
@@ -141,7 +141,7 @@ export const wagonFirstClass: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    'wagon-class': wagonClass.options[0],
+    'wagon-class': wagonClass.options![0],
   },
 };
 
@@ -159,7 +159,7 @@ export const locomotive: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    type: type.options[0],
+    type: type.options![0],
   },
 };
 
@@ -168,16 +168,12 @@ export const closed: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    type: type.options[1],
+    type: type.options![1],
   },
 };
 
 const meta: Meta = {
-  decorators: [(story) => html`<div style="padding: 2rem;">${story()}</div>`],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/train/train/train.stories.ts b/src/components/train/train/train.stories.ts
index 2d834767f9..443cec1f67 100644
--- a/src/components/train/train/train.stories.ts
+++ b/src/components/train/train/train.stories.ts
@@ -70,8 +70,8 @@ const defaultArgs: Args = {
   'accessibility-label':
     'The top of the train is in Sector A. The train leaves the station in this direction',
   station: 'Bern',
-  direction: direction.options[0],
-  'direction-label-level': directionLabelLevel.options[4],
+  direction: direction.options![0],
+  'direction-label-level': directionLabelLevel.options![4],
 };
 
 export const train: StoryObj = {
@@ -87,11 +87,7 @@ export const trainWithoutStation: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style="padding: 2rem;">${story()}</div> `],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/tsconfig.json b/src/components/tsconfig.json
index fd2316b8d0..9817fe28a5 100644
--- a/src/components/tsconfig.json
+++ b/src/components/tsconfig.json
@@ -9,5 +9,6 @@
       "@sbb-esta/lyne-components-react/*": ["../react/*"]
     }
   },
-  "include": ["./**/*.ts", "../vite-env.d.ts"]
+  "include": ["./**/*.ts", "../vite-env.d.ts"],
+  "exclude": ["./**/*.chromatic.stories.ts"]
 }
diff --git a/src/components/visual-checkbox/visual-checkbox.stories.ts b/src/components/visual-checkbox/visual-checkbox.stories.ts
index 75e637df12..35a855f64b 100644
--- a/src/components/visual-checkbox/visual-checkbox.stories.ts
+++ b/src/components/visual-checkbox/visual-checkbox.stories.ts
@@ -2,17 +2,12 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, StoryContext } 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 readme from './readme.md?raw';
 import './visual-checkbox.js';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
 const checked: InputType = {
   control: {
     type: 'boolean',
@@ -127,15 +122,9 @@ export const DisabledIndeterminateNegative: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html`
-      <div style=${styleMap({ ...wrapperStyle(context), padding: '2rem' })}>${story()}</div>
-    `,
-  ],
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
+    backgroundColor: (context: StoryContext) =>
+      context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/storybook/helpers/spread.spec.ts b/src/storybook/helpers/spread.spec.ts
index 70b0c097d3..07f593a688 100644
--- a/src/storybook/helpers/spread.spec.ts
+++ b/src/storybook/helpers/spread.spec.ts
@@ -142,3 +142,10 @@ describe(`sbbSpread`, () => {
     });
   });
 });
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'spread-test-only': SpreadDirectiveTestOnlyElement;
+  }
+}
diff --git a/src/storybook/pages/home/home--logged-in.stories.ts b/src/storybook/pages/home/home--logged-in.stories.ts
index 8f52f6af96..65fae3936d 100644
--- a/src/storybook/pages/home/home--logged-in.stories.ts
+++ b/src/storybook/pages/home/home--logged-in.stories.ts
@@ -1,9 +1,7 @@
 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, StoryContext, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 
 import type { SbbDialogElement } from '../../../components/dialog.js';
 import { futureLeg, pastLeg } from '../../../components/pearl-chain/pearl-chain.sample-data.js';
@@ -17,7 +15,6 @@ import {
   skiplinkList,
   teaserHero,
   timetableInput,
-  wrapperStyle,
 } from './home.common.js';
 import readme from './readme.md?raw';
 import '../../../components/dialog.js';
@@ -126,7 +123,6 @@ const Template = (args: Args): TemplateResult => html`
                     <sbb-pearl-chain
                       .legs=${[pastLeg, futureLeg]}
                       data-now=${new Date('2021-12-08T12:11:00+01:00').valueOf()}
-                      ?disable-animation=${isChromatic()}
                     ></sbb-pearl-chain>
                   </span>
                   <sbb-secondary-button-static icon-name="qrcode-small">
@@ -174,7 +170,6 @@ const Template = (args: Args): TemplateResult => html`
                     <sbb-pearl-chain
                       .legs=${[pastLeg, futureLeg]}
                       data-now=${new Date('2021-12-08T12:11:00+01:00').valueOf()}
-                      ?disable-animation=${isChromatic()}
                     ></sbb-pearl-chain>
                   </span>
                   <sbb-secondary-button-static> Details </sbb-secondary-button-static>
@@ -189,7 +184,7 @@ const Template = (args: Args): TemplateResult => html`
             All purchased tickets
           </sbb-secondary-button>
 
-          <sbb-dialog id="my-dialog" title-content="My Dialog">
+          <sbb-dialog id="my-dialog">
             <sbb-dialog-title back-button>My Dialog</sbb-dialog-title>
 
             <sbb-dialog-content>
@@ -200,14 +195,13 @@ const Template = (args: Args): TemplateResult => html`
                 irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                 pariatur.
               </p>
-              <sbb-button
-                variant="secondary"
+              <sbb-secondary-button
                 size="m"
                 @click=${() =>
                   (document.getElementById('my-stacked-dialog') as SbbDialogElement).open()}
               >
                 Open stacked dialog
-              </sbb-button>
+              </sbb-secondary-button>
             </sbb-dialog-content>
 
             <sbb-dialog-actions
@@ -289,10 +283,9 @@ export const homeLoggedIn: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html` <div style=${styleMap(wrapperStyle(context))}>${story()}</div> `,
-  ],
   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 4061ea9952..588d06cb87 100644
--- a/src/storybook/pages/home/home.common.ts
+++ b/src/storybook/pages/home/home.common.ts
@@ -1,11 +1,9 @@
-import type { Args, StoryContext } from '@storybook/web-components';
+import type { Args } from '@storybook/web-components';
 import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import '../../../components/button/button.js';
-import '../../../components/button/secondary-button.js';
-import '../../../components/button/secondary-button-static.js';
+import '../../../components/button.js';
 import '../../../components/card.js';
 import '../../../components/clock.js';
 import '../../../components/divider.js';
@@ -257,12 +255,12 @@ export const footer = (args: Args): TemplateResult => html`
           Report property damage
         </sbb-block-link>
       </sbb-link-list>
-      <sbb-button
+      <sbb-button-link
         href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
         size="m"
       >
         All help topics
-      </sbb-button>
+      </sbb-button-link>
     </div>
     <sbb-link-list title-level="2" title-content="More SBB." ?negative=${args.negative}>
       <sbb-block-link
@@ -305,12 +303,12 @@ export const footer = (args: Args): TemplateResult => html`
           Our newsletter regularly informs you of attractive offers from SBB via e-mail.
         </p>
       </span>
-      <sbb-secondary-button
+      <sbb-secondary-button-link
         href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
         size="m"
       >
         Subscribe
-      </sbb-secondary-button>
+      </sbb-secondary-button-link>
     </div>
     <sbb-clock
       ${sbbSpread(
@@ -352,9 +350,3 @@ export const footer = (args: Args): TemplateResult => html`
     </sbb-link-list>
   </sbb-footer>
 `;
-
-export const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
diff --git a/src/storybook/pages/home/home.stories.ts b/src/storybook/pages/home/home.stories.ts
index 701a5787c5..50d745d980 100644
--- a/src/storybook/pages/home/home.stories.ts
+++ b/src/storybook/pages/home/home.stories.ts
@@ -1,8 +1,7 @@
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 
 import '../../../components/alert.js';
 import '../../../components/action-group.js';
@@ -15,7 +14,6 @@ import {
   skiplinkList,
   teaserHero,
   timetableInput,
-  wrapperStyle,
 } from './home.common.js';
 import readme from './readme.md?raw';
 import './home.scss';
@@ -139,15 +137,15 @@ const Template = (args: Args): TemplateResult => html`
           </sbb-card>
         </div>
         <sbb-action-group orientation="vertical" horizontal-from="small">
-          <sbb-button
+          <sbb-button-link
             href="https://github.com/lyne-design-system/lyne-components"
             icon-name="qrcode-small"
           >
             My tickets & subscriptions
-          </sbb-button>
-          <sbb-secondary-button href="https://github.com/lyne-design-system/lyne-components">
+          </sbb-button-link>
+          <sbb-secondary-button-link href="https://github.com/lyne-design-system/lyne-components">
             All Products
-          </sbb-secondary-button>
+          </sbb-secondary-button-link>
         </sbb-action-group>
       </div>
     </section>
@@ -167,10 +165,9 @@ export const home: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story, context) => html` <div style=${styleMap(wrapperStyle(context))}>${story()}</div> `,
-  ],
   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/layout/layout.stories.ts b/src/storybook/styles/layout/layout.stories.ts
index 2b3f098a66..0c66583963 100644
--- a/src/storybook/styles/layout/layout.stories.ts
+++ b/src/storybook/styles/layout/layout.stories.ts
@@ -59,7 +59,7 @@ export const GridExpanded: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style="padding-block: 2rem;">${story()}</div> `],
+  decorators: [(story) => html`<div style="padding-block: 2rem;">${story()}</div>`],
   parameters: {
     docs: {
       extractComponentDescription: () => readme,
diff --git a/src/storybook/styles/list/list.stories.ts b/src/storybook/styles/list/list.stories.ts
index c4757dbd1c..32fc77f966 100644
--- a/src/storybook/styles/list/list.stories.ts
+++ b/src/storybook/styles/list/list.stories.ts
@@ -99,13 +99,11 @@ export const DescriptionList: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style="margin: 2rem;">${story()}</div> `],
   parameters: {
     chromatic: { disableSnapshot: false },
     docs: {
       extractComponentDescription: () => readme,
     },
-    layout: 'fullscreen',
   },
   title: 'styles/list',
 };
diff --git a/src/storybook/styles/scrollbar/scrollbar.stories.ts b/src/storybook/styles/scrollbar/scrollbar.stories.ts
index 246b6977a6..ac9fd26c3f 100644
--- a/src/storybook/styles/scrollbar/scrollbar.stories.ts
+++ b/src/storybook/styles/scrollbar/scrollbar.stories.ts
@@ -58,7 +58,7 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  size: size.options[0],
+  size: size.options![0],
   negative: false,
   trackVisible: false,
 };
@@ -90,19 +90,19 @@ export const ThinNegativeTrackVisible: StoryObj = {
 export const Thick: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[1] },
+  args: { ...defaultArgs, size: size.options![1] },
 };
 
 export const ThickTrackVisible: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[1], trackVisible: true },
+  args: { ...defaultArgs, size: size.options![1], trackVisible: true },
 };
 
 export const ThickNegative: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options[1], negative: true },
+  args: { ...defaultArgs, size: size.options![1], negative: true },
 };
 
 export const ThickNegativeTrackVisible: StoryObj = {
@@ -110,7 +110,7 @@ export const ThickNegativeTrackVisible: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options[1],
+    size: size.options![1],
     negative: true,
     trackVisible: true,
   },
diff --git a/src/storybook/styles/typography/typography.stories.ts b/src/storybook/styles/typography/typography.stories.ts
index 691a75879f..241ef2a95e 100644
--- a/src/storybook/styles/typography/typography.stories.ts
+++ b/src/storybook/styles/typography/typography.stories.ts
@@ -78,12 +78,10 @@ export const LinkNegative: StoryObj = {
 
 const meta: Meta = {
   excludeStories: ['Link', 'LinkNegative'],
-  decorators: [(story) => html` <div style="padding: 2rem;">${story()}</div> `],
   parameters: {
     docs: {
       extractComponentDescription: () => readme,
     },
-    layout: 'fullscreen',
   },
   title: 'styles/typography',
 };
diff --git a/src/storybook/testing/chromatic.ts b/src/storybook/testing/chromatic.ts
index 46db38ff1b..638127b9c5 100644
--- a/src/storybook/testing/chromatic.ts
+++ b/src/storybook/testing/chromatic.ts
@@ -8,6 +8,7 @@ import type {
 } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
+
 import '../../components/title.js';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -20,17 +21,24 @@ export function combineStories(config: Meta, stories: StoryParameter): StoryObj[
   const decorators = (name: string, story: StoryObj): Decorator[] =>
     (
       [
-        (story) => html`
-          <div style="margin-block-end: 2rem;">
+        (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;">${story()}</div>
-          </div>
-        `,
+            <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 || [])
diff --git a/src/storybook/testing/with-background-decorator.ts b/src/storybook/testing/with-background-decorator.ts
new file mode 100644
index 0000000000..9f44a6ee2a
--- /dev/null
+++ b/src/storybook/testing/with-background-decorator.ts
@@ -0,0 +1,42 @@
+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/tools/generate-component/boilerplate/component.stories.ts b/tools/generate-component/boilerplate/component.stories.ts
index 2e436029c5..dd14edf28d 100644
--- a/tools/generate-component/boilerplate/component.stories.ts
+++ b/tools/generate-component/boilerplate/component.stories.ts
@@ -31,17 +31,11 @@ export const Default: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
-    withActions as Decorator,
-  ],
+  decorators: [withActions as Decorator],
   parameters: {
     actions: {
       handles: [__nameUpperCase__.events.myEventName],
     },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/tools/vite/copy-sass.ts b/tools/vite/copy-sass.ts
index a486317bd2..e3829eaa08 100644
--- a/tools/vite/copy-sass.ts
+++ b/tools/vite/copy-sass.ts
@@ -22,15 +22,15 @@ export function copySass(sassRoot: string): PluginOption {
           type: 'asset',
           fileName: file,
           source: readFileSync(join(viteConfig.root, file), 'utf8').replace(
-            /@use '(node_modules\/[^']+)'/g,
-            (_m, useFile: string) => {
+            /(@use|@import) '(node_modules\/[^']+)'/g,
+            (_m, useOrImport, useFile: string) => {
               const outFile = join(sassRoot, useFile.replaceAll('/', '_'));
               this.emitFile({
                 type: 'asset',
                 fileName: outFile,
                 source: readFileSync(new URL(useFile, root), 'utf8'),
               });
-              return `@use '${relative(dirname(file), outFile)}'`;
+              return `${useOrImport} '${relative(dirname(file), outFile)}'`;
             },
           ),
         });
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
index a9411dfa74..a410f98812 100644
--- a/web-test-runner.config.js
+++ b/web-test-runner.config.js
@@ -60,7 +60,7 @@ const testRunnerHtml = (testFramework, _config, group) => `
       globalThis.testGroup = '${groupNameOverride ?? group?.name ?? 'default'}';
     </script>
   </head>
-  <body>
+  <body class="sbb-disable-animation">
     <script type="module" src="/src/components/core/testing/test-setup.ts"></script>
     <script type="module" src="${testFramework}"></script>
   </body>
diff --git a/yarn.lock b/yarn.lock
index 0a6de08f2c..0a94806afe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -278,7 +278,7 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.21.8", "@babel/parser@^7.23.0", "@babel/parser@^7.23.9", "@babel/parser@^7.24.0", "@babel/parser@^7.24.1", "@babel/parser@^7.24.4":
+"@babel/parser@^7.21.8", "@babel/parser@^7.23.0", "@babel/parser@^7.24.0", "@babel/parser@^7.24.1", "@babel/parser@^7.24.4":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.4.tgz#234487a110d89ad5a3ed4a8a566c36b9453e8c88"
   integrity sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
@@ -1051,12 +1051,12 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@commitlint/cli@19.2.2":
-  version "19.2.2"
-  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-19.2.2.tgz#7b6d78596dcf6d716942b147aa07c04c4ee126df"
-  integrity sha512-P8cbOHfg2PQRzfICLSrzUVOCVMqjEZ8Hlth6mtJ4yOEjT47Q5PbIGymgX3rLVylNw+3IAT2Djn9IJ2wHbXFzBg==
+"@commitlint/cli@19.3.0":
+  version "19.3.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-19.3.0.tgz#44e6da9823a01f0cdcc43054bbefdd2c6c5ddf39"
+  integrity sha512-LgYWOwuDR7BSTQ9OLZ12m7F/qhNY+NpAyPBgo4YNMkACE7lGuUnuQq1yi9hz1KA4+3VqpOYl8H1rY/LYK43v7g==
   dependencies:
-    "@commitlint/format" "^19.0.3"
+    "@commitlint/format" "^19.3.0"
     "@commitlint/lint" "^19.2.2"
     "@commitlint/load" "^19.2.0"
     "@commitlint/read" "^19.2.1"
@@ -1097,10 +1097,10 @@
   resolved "https://registry.yarnpkg.com/@commitlint/execute-rule/-/execute-rule-19.0.0.tgz#928fb239ae8deec82a6e3b05ec9cfe20afa83856"
   integrity sha512-mtsdpY1qyWgAO/iOK0L6gSGeR7GFcdW7tIjcNFxcWkfLDF5qVbPHKuGATFqRMsxcO8OUKNj0+3WOHB7EHm4Jdw==
 
-"@commitlint/format@^19.0.3":
-  version "19.0.3"
-  resolved "https://registry.yarnpkg.com/@commitlint/format/-/format-19.0.3.tgz#6e3dcdc028b39d370ba717b8bde0853705c467dc"
-  integrity sha512-QjjyGyoiVWzx1f5xOteKHNLFyhyweVifMgopozSgx1fGNrGV8+wp7k6n1t6StHdJ6maQJ+UUtO2TcEiBFRyR6Q==
+"@commitlint/format@^19.3.0":
+  version "19.3.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/format/-/format-19.3.0.tgz#48dd9e6930d41eb0ca19f36159ee940c5b25d857"
+  integrity sha512-luguk5/aF68HiF4H23ACAfk8qS8AHxl4LLN5oxPc24H+2+JRPsNr1OS3Gaea0CrH7PKhArBMKBz5RX9sA5NtTg==
   dependencies:
     "@commitlint/types" "^19.0.3"
     chalk "^5.3.0"
@@ -1222,7 +1222,7 @@
   resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.9.tgz#feb4b7268f998956eb3ded69507869e73d005dda"
   integrity sha512-qqGuFfbn4rUmyOB0u8CVISIp5FfJ5GAR3mBrZ9/TKndHakdnm6pY0L/fbLcpPnrzwCyyTEZl1nUcXAYHEWneTA==
 
-"@csstools/selector-specificity@^3.0.2":
+"@csstools/selector-specificity@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.0.3.tgz#208a3929ee614967a1fc8cd6cb758d9fcbf0caae"
   integrity sha512-KEPNw4+WW5AVEIyzC80rTbWEUatTW2lXpN8+8ILC8PiPeWPjwUzrPZDIOZ2wwqDmeqOYTdSGyL3+vE5GC3FB3Q==
@@ -1543,10 +1543,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@9.0.0":
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.0.0.tgz#1a9e4b4c96d8c7886e0110ed310a0135144a1691"
-  integrity sha512-RThY/MnKrhubF6+s1JflwUjPEsnCEmYCWwqa/aRISKWNXGZ9epUwft4bUMM35SdKF9xvBrLydAM1RDHd1Z//ZQ==
+"@eslint/js@9.1.1":
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.1.1.tgz#eb0f82461d12779bbafc1b5045cde3143d350a8a"
+  integrity sha512-5WoDz3Y19Bg2BnErkZTp0en+c/i9PvgFS7MBe1+m60HjFr0hrphlAGp4yzI7pxpt4xShln4ZyYp4neJm8hmOkQ==
 
 "@esm-bundle/chai@^4.3.4-fix.0":
   version "4.3.4-fix.0"
@@ -1565,10 +1565,10 @@
   resolved "https://registry.yarnpkg.com/@github/catalyst/-/catalyst-1.6.0.tgz#378734d1d2b6a85af169d7e66c1a2a604bf1e82c"
   integrity sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ==
 
-"@humanwhocodes/config-array@^0.12.3":
-  version "0.12.3"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.12.3.tgz#a6216d90f81a30bedd1d4b5d799b47241f318072"
-  integrity sha512-jsNnTBlMWuTpDkeE3on7+dWJi0D6fdDfeANj/w7MpS8ztROCoLvIO2nG0CcFj+E4k8j4QrSTh4Oryi3i2G669g==
+"@humanwhocodes/config-array@^0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
+  integrity sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==
   dependencies:
     "@humanwhocodes/object-schema" "^2.0.3"
     debug "^4.3.1"
@@ -1584,6 +1584,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
   integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
+"@humanwhocodes/retry@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.2.3.tgz#c9aa036d1afa643f1250e83150f39efb3a15a631"
+  integrity sha512-X38nUbachlb01YMlvPFojKoiXq+LzZvuSce70KPMPdeM1Rj03k4dR7lDslhbqXn3Ang4EU3+EAmwEAsbrjHW3g==
+
 "@jest/schemas@^29.6.3":
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
@@ -1816,10 +1821,10 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@puppeteer/browsers@2.2.1":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@puppeteer/browsers/-/browsers-2.2.1.tgz#c40608b96b10c09a6b2d08ab5ea31dfe1b409455"
-  integrity sha512-QSXujx4d4ogDamQA8ckkkRieFzDgZEuZuGiey9G7CuDcbnX4iINKWxTPC5Br2AEzY9ICAvcndqgAUFMMKnS/Tw==
+"@puppeteer/browsers@2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@puppeteer/browsers/-/browsers-2.2.2.tgz#c43b00a9808370fec3e548779d81d1e0b972e8bb"
+  integrity sha512-hZ/JhxPIceWaGSEzUZp83/8M49CoxlkuThfTR7t4AoCu5+ZvJ3vktLm60Otww2TXeROB5igiZ8D9oPQh6ckBVg==
   dependencies:
     debug "4.3.4"
     extract-zip "2.0.1"
@@ -1866,80 +1871,85 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@rollup/rollup-android-arm-eabi@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.2.tgz#9047b5b1ec19f58c0fdf3a072bd977bcec056576"
-  integrity sha512-ahxSgCkAEk+P/AVO0vYr7DxOD3CwAQrT0Go9BJyGQ9Ef0QxVOfjDZMiF4Y2s3mLyPrjonchIMH/tbWHucJMykQ==
-
-"@rollup/rollup-android-arm64@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.2.tgz#08a2d2705193ebb3054941994e152808beb5254e"
-  integrity sha512-lAarIdxZWbFSHFSDao9+I/F5jDaKyCqAPMq5HqnfpBw8dKDiCaaqM0lq5h1pQTLeIqueeay4PieGR5jGZMWprw==
-
-"@rollup/rollup-darwin-arm64@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.2.tgz#bf746c610f337b104408ec001549d825a91eca57"
-  integrity sha512-SWsr8zEUk82KSqquIMgZEg2GE5mCSfr9sE/thDROkX6pb3QQWPp8Vw8zOq2GyxZ2t0XoSIUlvHDkrf5Gmf7x3Q==
-
-"@rollup/rollup-darwin-x64@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.2.tgz#59ebe3b858a44680d5f87546ea2df1c7e3135f6a"
-  integrity sha512-o/HAIrQq0jIxJAhgtIvV5FWviYK4WB0WwV91SLUnsliw1lSAoLsmgEEgRWzDguAFeUEUUoIWXiJrPqU7vGiVkA==
-
-"@rollup/rollup-linux-arm-gnueabihf@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.2.tgz#44cffc07d04d659cb635aec11bef530d5757ee6a"
-  integrity sha512-nwlJ65UY9eGq91cBi6VyDfArUJSKOYt5dJQBq8xyLhvS23qO+4Nr/RreibFHjP6t+5ap2ohZrUJcHv5zk5ju/g==
-
-"@rollup/rollup-linux-arm64-gnu@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.2.tgz#9901e2288fb192b74a2f8428c507d43cc2739ceb"
-  integrity sha512-Pg5TxxO2IVlMj79+c/9G0LREC9SY3HM+pfAwX7zj5/cAuwrbfj2Wv9JbMHIdPCfQpYsI4g9mE+2Bw/3aeSs2rQ==
-
-"@rollup/rollup-linux-arm64-musl@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.2.tgz#8a2c55a72e0c716a15d830fee3bf5a1a756f13ec"
-  integrity sha512-cAOTjGNm84gc6tS02D1EXtG7tDRsVSDTBVXOLbj31DkwfZwgTPYZ6aafSU7rD/4R2a34JOwlF9fQayuTSkoclA==
-
-"@rollup/rollup-linux-powerpc64le-gnu@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.2.tgz#71bf99c8017476ac85b09d21b3fa2eacbad96100"
-  integrity sha512-4RyT6v1kXb7C0fn6zV33rvaX05P0zHoNzaXI/5oFHklfKm602j+N4mn2YvoezQViRLPnxP8M1NaY4s/5kXO5cw==
-
-"@rollup/rollup-linux-riscv64-gnu@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.2.tgz#48ee7fe5fee7b6d0028b6dda4fab95238208a0cd"
-  integrity sha512-KNUH6jC/vRGAKSorySTyc/yRYlCwN/5pnMjXylfBniwtJx5O7X17KG/0efj8XM3TZU7raYRXJFFReOzNmL1n1w==
-
-"@rollup/rollup-linux-s390x-gnu@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.2.tgz#65ad6f82729ef9d8634847189214e3205892f42f"
-  integrity sha512-xPV4y73IBEXToNPa3h5lbgXOi/v0NcvKxU0xejiFw6DtIYQqOTMhZ2DN18/HrrP0PmiL3rGtRG9gz1QE8vFKXQ==
-
-"@rollup/rollup-linux-x64-gnu@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.2.tgz#2ab802ce25c0d0d44a0ea55b0068f79e462d22cd"
-  integrity sha512-QBhtr07iFGmF9egrPOWyO5wciwgtzKkYPNLVCFZTmr4TWmY0oY2Dm/bmhHjKRwZoGiaKdNcKhFtUMBKvlchH+Q==
-
-"@rollup/rollup-linux-x64-musl@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.2.tgz#85dcd3f549c2fdbcf1cb1f1b5f501933ed590880"
-  integrity sha512-8zfsQRQGH23O6qazZSFY5jP5gt4cFvRuKTpuBsC1ZnSWxV8ZKQpPqOZIUtdfMOugCcBvFGRa1pDC/tkf19EgBw==
-
-"@rollup/rollup-win32-arm64-msvc@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.2.tgz#10f608dfc1e5bb96aca18c7784cc4a94d890c03c"
-  integrity sha512-H4s8UjgkPnlChl6JF5empNvFHp77Jx+Wfy2EtmYPe9G22XV+PMuCinZVHurNe8ggtwoaohxARJZbaH/3xjB/FA==
-
-"@rollup/rollup-win32-ia32-msvc@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.2.tgz#f27f9fb64b7e10b04121e0054d9145ee21589267"
-  integrity sha512-djqpAjm/i8erWYF0K6UY4kRO3X5+T4TypIqw60Q8MTqSBaQNpNXDhxdjpZ3ikgb+wn99svA7jxcXpiyg9MUsdw==
-
-"@rollup/rollup-win32-x64-msvc@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.2.tgz#5d2d9dc96b436469dc74ef93de069b14fb12aace"
-  integrity sha512-teAqzLT0yTYZa8ZP7zhFKEx4cotS8Tkk5XiqNMJhD4CpaWB1BHARE4Qy+RzwnXvSAYv+Q3jAqCVBS+PS+Yee8Q==
+"@rollup/rollup-android-arm-eabi@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.16.1.tgz#ad76cc870b1e2bc4476dfc02b82e20cea272a09d"
+  integrity sha512-92/y0TqNLRYOTXpm6Z7mnpvKAG9P7qmK7yJeRJSdzElNCUnsgbpAsGqerUboYRIQKzgfq4pWu9xVkgpWLfmNsw==
+
+"@rollup/rollup-android-arm64@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.16.1.tgz#e7bd4f2b8ec5e049f98edbc68d72cb05356f81d8"
+  integrity sha512-ttWB6ZCfRLuDIUiE0yiu5gcqOsYjA5F7kEV1ggHMj20FwLZ8A1FMeahZJFl/pnOmcnD2QL0z4AcDuo27utGU8A==
+
+"@rollup/rollup-darwin-arm64@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.16.1.tgz#8fd277b4be6cc956167710e36b4ee365f8a44050"
+  integrity sha512-QLDvPLetbqjHojTGFw9+nuSP3YY/iz2k1cep6crYlr97sS+ZJ0W43b8Z0zC00+lnFZj6JSNxiA4DjboNQMuh1A==
+
+"@rollup/rollup-darwin-x64@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.16.1.tgz#5ab829322926fefce42db3529649a1098b420fe3"
+  integrity sha512-TAUK/D8khRrRIa1KwRzo8JNKk3tcqaeXWdtsiLgA8zmACWwlWLjPCJ4DULGHQrMkeBjp1Cd3Yuwx04lZgFx5Vg==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.16.1.tgz#0154bc34e6a88fb0147adc827512add8d3a2338c"
+  integrity sha512-KO+WGZjrh6zyFTD1alIFkfdtxf8B4BC+hqd3kBZHscPLvE5FR/6QKsyuCT0JlERxxYBSUKNUQ/UHyX5uwO1x2A==
+
+"@rollup/rollup-linux-arm-musleabihf@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.16.1.tgz#0f3fa433a81b389042555133d38b4b886b369e58"
+  integrity sha512-NqxbllzIB1WoAo4ThUXVtd21iiM5IHMTTXmXySKBLVcZvkU0HIZmatlP7hLzb5yQubcmdIeWmncd2NdsjocEiw==
+
+"@rollup/rollup-linux-arm64-gnu@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.16.1.tgz#c8f2d523ac4bcff382601306989b27137d536dd6"
+  integrity sha512-snma5NvV8y7IECQ5rq0sr0f3UUu+92NVmG/913JXJMcXo84h9ak9TA5UI9Cl2XRM9j3m37QwDBtEYnJzRkSmxA==
+
+"@rollup/rollup-linux-arm64-musl@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.16.1.tgz#86b5104635131182b6b2b6997c4aa5594ce557b7"
+  integrity sha512-KOvqGprlD84ueivhCi2flvcUwDRD20mAsE3vxQNVEI2Di9tnPGAfEu6UcrSPZbM+jG2w1oSr43hrPo0RNg6GGg==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.16.1.tgz#5de8b20105aaaeb36eb86fab0a1020d81c7bd4d5"
+  integrity sha512-/gsNwtiGLqYwN4vP+EIdUC6Q6LTlpupWqokqIndvZcjn9ig/5P01WyaYCU2wvfL/2Z82jp5kX8c1mDBOvCP3zg==
+
+"@rollup/rollup-linux-riscv64-gnu@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.16.1.tgz#5319629dcdcb85ba201c6f0f894c9472e7d1013d"
+  integrity sha512-uU8zuGkQfGqfD9w6VRJZI4IuG4JIfNxxJgEmLMAmPVHREKGsxFVfgHy5c6CexQF2vOfgjB33OsET3Vdn2lln9A==
+
+"@rollup/rollup-linux-s390x-gnu@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.16.1.tgz#246ac211ed0d78f7a9bc5c1d0653bde4c6cd9f63"
+  integrity sha512-lsjLtDgtcGFEuBP6yrXwkRN5/wKlvUZtfbKZZu0yaoNpiBL4epgnO21osAALIspVRnl4qZgyLFd8xjCYYWgwfw==
+
+"@rollup/rollup-linux-x64-gnu@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.16.1.tgz#d0c03203ddeb9454fc6fdde93a39b01c176ac6d9"
+  integrity sha512-N2ZizKhUryqqrMfdCnjhJhZRgv61C6gK+hwVtCIKC8ts8J+go+vqENnGexwg21nHIOvLN5mBM8a7DI2vlyIOPg==
+
+"@rollup/rollup-linux-x64-musl@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.16.1.tgz#20235632e2be4689d663aadaceaaf90df03b1a33"
+  integrity sha512-5ICeMxqg66FrOA2AbnBQ2TJVxfvZsKLxmof0ibvPLaYtbsJqnTUtJOofgWb46Gjd4uZcA4rdsp4JCxegzQPqCg==
+
+"@rollup/rollup-win32-arm64-msvc@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.16.1.tgz#af113ad682fc13d1f870242c5539031f8cc27cf1"
+  integrity sha512-1vIP6Ce02L+qWD7uZYRiFiuAJo3m9kARatWmFSnss0gZnVj2Id7OPUU9gm49JPGasgcR3xMqiH3fqBJ8t00yVg==
+
+"@rollup/rollup-win32-ia32-msvc@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.16.1.tgz#4e7b57e757c95da8e79092056d1b428617515668"
+  integrity sha512-Y3M92DcVsT6LoP+wrKpoUWPaazaP1fzbNkp0a0ZSj5Y//+pQVfVe/tQdsYQQy7dwXR30ZfALUIc9PCh9Izir6w==
+
+"@rollup/rollup-win32-x64-msvc@4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.16.1.tgz#5068a893ba292279adbe76fc487316724b15d811"
+  integrity sha512-x0fvpHMuF7fK5r8oZxSi8VYXkrVmRgubXpO/wcf15Lk3xZ4Jvvh5oG+u7Su1776A7XzVKZhD2eRc4t7H50gL3w==
 
 "@rushstack/node-core-library@4.0.2":
   version "4.0.2"
@@ -1979,10 +1989,10 @@
     argparse "~1.0.9"
     string-argv "~0.3.1"
 
-"@sbb-esta/lyne-design-tokens@0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@sbb-esta/lyne-design-tokens/-/lyne-design-tokens-0.5.0.tgz#13384cf5496a1512d20fe6eed70454e1ebd919a6"
-  integrity sha512-WKzoxM3HzBoFrqUsNUF1rFAvut5PVb3qyN/IxFUNzjrNZTvlYEeXU4pNQJM+KQtt4t4iJmKEytBifF0MiLfRow==
+"@sbb-esta/lyne-design-tokens@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@sbb-esta/lyne-design-tokens/-/lyne-design-tokens-0.6.0.tgz#5d77348934b311c6c0be14458fd48160d0f638b1"
+  integrity sha512-pV5OhCIrC7k24r9ZPda2t6R2Ld8kO9YQGajOvdpDKr2Q0zxOE5213NCbh7AspC/5y4SYldvKX8vbsRujSOd1jA==
 
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"
@@ -2024,62 +2034,62 @@
   resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz#5981a8db18b56ba38ef0efb7d995b12aa7b51918"
   integrity sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==
 
-"@storybook/addon-a11y@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-8.0.8.tgz#efd71fef036ced41482f4bf4139bc13bc756e57e"
-  integrity sha512-QiNzKej1C3QjPBHm8nwk0lqv9N9cLInlyJ62Cp+/+ethcH2elNnBf1H3ad/DC6XIQRyMtvvhCOnzygAMnjCq1w==
+"@storybook/addon-a11y@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-8.0.9.tgz#88a3207e13d06d27c60a5fd8d1952ce6b2dd58b2"
+  integrity sha512-HgIlhOI3yBS3ztnuqOquGztnju7LE+BgCMYbDQEZjQkddiQPtjwLC6h0/LkvHL5993avbq1vYEWfUGHLtGzYfQ==
   dependencies:
-    "@storybook/addon-highlight" "8.0.8"
+    "@storybook/addon-highlight" "8.0.9"
     axe-core "^4.2.0"
 
-"@storybook/addon-actions@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-8.0.8.tgz#0b625b36e738a3b02c25d7b0b0b9f28c4e68c918"
-  integrity sha512-F3qpN0n53d058EroW1A2IlzrsFNR5p2srLY4FmXB80nxAKV8oqoDI4jp15zYlf8ThcJoQl36plT8gx3r1BpANA==
+"@storybook/addon-actions@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-8.0.9.tgz#b7a19abb0ee8fd73df1498def7f1ff307d16cb25"
+  integrity sha512-+I3VTvlKdj8puHeS2tyaOVv9syDiNLneVZbTfqN+UDOK2i42NwvZr8PVwjTzMlEj9eePJdCZgiipz55xwts5bw==
   dependencies:
-    "@storybook/core-events" "8.0.8"
+    "@storybook/core-events" "8.0.9"
     "@storybook/global" "^5.0.0"
     "@types/uuid" "^9.0.1"
     dequal "^2.0.2"
     polished "^4.2.2"
     uuid "^9.0.0"
 
-"@storybook/addon-backgrounds@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-8.0.8.tgz#da119e0fa0f0c6d44c2c44c34b9861953fedd653"
-  integrity sha512-lrAJjVxDeXSK116rDajb56TureZiT76ygraP22/IvU3IcWCEcRiKYwlay8WgCTbJHtFmdBpelLBapoT46+IR9Q==
+"@storybook/addon-backgrounds@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-8.0.9.tgz#c08bd534f8c7c9f07b687624376e328696fdadc8"
+  integrity sha512-pCDecACrVyxPaJKEWS0sHsRb8xw+IPCSxDM1TkjaAQ6zZ468A/dcUnqW+LVK8bSXgQwWzn23wqnqPFSy5yptuQ==
   dependencies:
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-controls@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-8.0.8.tgz#1c8e39ee9ac71704c60da79b363977006d587d75"
-  integrity sha512-7xANN18CLYsVthuSXwxKezqpelEKJlT9xaYLtw5vvD00btW5g3vxq+Z/A31OkS2OuaH2bE0GfRCoG2OLR8yQQA==
+"@storybook/addon-controls@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-8.0.9.tgz#cc1f8ffde58fdaf9ea2ef7ebf9261c3519f42a39"
+  integrity sha512-wWdmd62UP/sfPm8M7aJjEA+kEXTUIR/QsYi9PoYBhBZcXiikZ4kNan7oD7GfsnzGGKHrBVfwQhO+TqaENGYytA==
   dependencies:
-    "@storybook/blocks" "8.0.8"
+    "@storybook/blocks" "8.0.9"
     lodash "^4.17.21"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-8.0.8.tgz#0b5a7e60e32d955f42f3fcae9197e2de06946af4"
-  integrity sha512-HNiY4ESH9WxGS6QpIpURzdSbyDxbRh7VIgbvUrePSKajlsL4RFN/gdnn5TnSL00tOP/w+Cy/fXcbljMUKy7Ivg==
+"@storybook/addon-docs@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-8.0.9.tgz#3ad1a18d7be8bb2eea4a018208d67d2959ba68c2"
+  integrity sha512-x7hX7UuzJtClu6XwU3SfpyFhuckVcgqgD6BU6Ihxl0zs+i4xp6iKVXYSnHFMRM1sgoeT8TjPxab35Ke8w8BVRw==
   dependencies:
     "@babel/core" "^7.12.3"
     "@mdx-js/react" "^3.0.0"
-    "@storybook/blocks" "8.0.8"
-    "@storybook/client-logger" "8.0.8"
-    "@storybook/components" "8.0.8"
-    "@storybook/csf-plugin" "8.0.8"
-    "@storybook/csf-tools" "8.0.8"
+    "@storybook/blocks" "8.0.9"
+    "@storybook/client-logger" "8.0.9"
+    "@storybook/components" "8.0.9"
+    "@storybook/csf-plugin" "8.0.9"
+    "@storybook/csf-tools" "8.0.9"
     "@storybook/global" "^5.0.0"
-    "@storybook/node-logger" "8.0.8"
-    "@storybook/preview-api" "8.0.8"
-    "@storybook/react-dom-shim" "8.0.8"
-    "@storybook/theming" "8.0.8"
-    "@storybook/types" "8.0.8"
+    "@storybook/node-logger" "8.0.9"
+    "@storybook/preview-api" "8.0.9"
+    "@storybook/react-dom-shim" "8.0.9"
+    "@storybook/theming" "8.0.9"
+    "@storybook/types" "8.0.9"
     "@types/react" "^16.8.0 || ^17.0.0 || ^18.0.0"
     fs-extra "^11.1.0"
     react "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -2088,99 +2098,99 @@
     rehype-slug "^6.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-essentials@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-8.0.8.tgz#b3e07dbce5fd8d903597b94a1ec99c4c08cd5472"
-  integrity sha512-bc9KJk7SPM2I5CCJEAP8R5leP+74IYxhWPiTN8Y1YFmf3MA1lpDJbwy+RfuRZ2ZKnSKszCXCVzU/T10HKUHLZw==
-  dependencies:
-    "@storybook/addon-actions" "8.0.8"
-    "@storybook/addon-backgrounds" "8.0.8"
-    "@storybook/addon-controls" "8.0.8"
-    "@storybook/addon-docs" "8.0.8"
-    "@storybook/addon-highlight" "8.0.8"
-    "@storybook/addon-measure" "8.0.8"
-    "@storybook/addon-outline" "8.0.8"
-    "@storybook/addon-toolbars" "8.0.8"
-    "@storybook/addon-viewport" "8.0.8"
-    "@storybook/core-common" "8.0.8"
-    "@storybook/manager-api" "8.0.8"
-    "@storybook/node-logger" "8.0.8"
-    "@storybook/preview-api" "8.0.8"
+"@storybook/addon-essentials@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-8.0.9.tgz#579942c264b1ce17c02a9588e99fbb5cb97e2083"
+  integrity sha512-mwAgdfrOsTuTDcagvM7veBh+iayZIWmKOazzkhrIWbhYcrXOsweigD2UOVeHgAiAzJK49znr4FXTCKcE1hOWcw==
+  dependencies:
+    "@storybook/addon-actions" "8.0.9"
+    "@storybook/addon-backgrounds" "8.0.9"
+    "@storybook/addon-controls" "8.0.9"
+    "@storybook/addon-docs" "8.0.9"
+    "@storybook/addon-highlight" "8.0.9"
+    "@storybook/addon-measure" "8.0.9"
+    "@storybook/addon-outline" "8.0.9"
+    "@storybook/addon-toolbars" "8.0.9"
+    "@storybook/addon-viewport" "8.0.9"
+    "@storybook/core-common" "8.0.9"
+    "@storybook/manager-api" "8.0.9"
+    "@storybook/node-logger" "8.0.9"
+    "@storybook/preview-api" "8.0.9"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-highlight@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-8.0.8.tgz#e4c1d2df7d4b4e325a007e4a7de5042cc5101625"
-  integrity sha512-KKD7xiNhxZQM4fdDidtcla6jSzgN1f9qe1AwFSHLXwIW22+4c97Vgf+AookN7cJvB77HxRUnvQH//zV1CJEDug==
+"@storybook/addon-highlight@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-8.0.9.tgz#da4c0bfb347aea10234f5f6007252f9343f5f384"
+  integrity sha512-vaRHGDbx7dpNpQECAHk5wczlZO3ntstprGlqnZt0o7ylz6xB5+pTQwTuIFty0hwKv+3TPcskzzifATUyEOEmyg==
   dependencies:
     "@storybook/global" "^5.0.0"
 
-"@storybook/addon-interactions@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-8.0.8.tgz#92f1b27b47d2488736873121a0794c3bbb2b98af"
-  integrity sha512-UOPKOe97uV4psH1O1YeE0oFuUQgD1Vkv95JjHjQG8KiPWvwdiezV7rrjPvw8RApnSKUopjFETs8F5D59i4eARw==
+"@storybook/addon-interactions@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-8.0.9.tgz#3282df8ce79b8df9b0d46670349164c50801b5b3"
+  integrity sha512-AMIdNcyM6DDAWvMitBJMqp1iPZND8AXB4QT4VZHGMKG2ngHNKktriEKpTfcRkfKPGTJs9T+71dWfm6/R4tticw==
   dependencies:
     "@storybook/global" "^5.0.0"
-    "@storybook/instrumenter" "8.0.8"
-    "@storybook/test" "8.0.8"
-    "@storybook/types" "8.0.8"
+    "@storybook/instrumenter" "8.0.9"
+    "@storybook/test" "8.0.9"
+    "@storybook/types" "8.0.9"
     polished "^4.2.2"
     ts-dedent "^2.2.0"
 
-"@storybook/addon-links@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-8.0.8.tgz#9121b3b96e9aa696792596622582061c0320452b"
-  integrity sha512-iRI/W9I6fOom5zfZvsu53gfJtuhBSMmhgI/u5uZbAbfEoNL5D1PqpDXD4ygM8Vvlx90AZNZ2W5slEe7gCZOMyA==
+"@storybook/addon-links@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-8.0.9.tgz#1f7375896c8e2ffd28eec24edc0e938bc16525cd"
+  integrity sha512-FVt+AdW3JFSqbJzkKiqKsMRWqHXqEvCBqFs7lNfk3OW0w0jfv1iREtrxE0dVdJoUFQC9V/2Im/EpJ7UB3C2bNQ==
   dependencies:
-    "@storybook/csf" "^0.1.2"
+    "@storybook/csf" "^0.1.4"
     "@storybook/global" "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-measure@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-8.0.8.tgz#297834f54331bcfd50b28cc935844ff13ba3aff9"
-  integrity sha512-akyoa+1F2ripV6ELF2UbxiSHv791LWSAVK7gsD/a5eJfKZMm5yoHjcY7Icdkc/ctE+pyjAQNhkXTixUngge09w==
+"@storybook/addon-measure@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-8.0.9.tgz#4116b96521f74a06da0b5383cce214cc20bd7c8b"
+  integrity sha512-91svOOGEXmGG4USglwXLE3wtlUVgtbKJVxTKX7xRI+AC5JEEaKByVzP17/X8Qn/8HilUL7AfSQ0kCoqtPSJ5cA==
   dependencies:
     "@storybook/global" "^5.0.0"
     tiny-invariant "^1.3.1"
 
-"@storybook/addon-outline@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-8.0.8.tgz#3441617f7f9246be1958ae3ce421bb4f691860ec"
-  integrity sha512-8Gxs095ekpa5YZolLSs5cWbWK94GZTevEUX8GFeLGIz9sf1KO3kmEO3eC5ogzDoB0cloqvbmVAJvYJ3FWiUx8w==
+"@storybook/addon-outline@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-8.0.9.tgz#497c70332bbca5f35777f4c60afc29e505e3588e"
+  integrity sha512-fQ+jm356TgUnz81IxsC99/aOesbLw3N5OQRJpo/A6kqbLMzlq3ybVzuXYCKC3f0ArgQRNh4NoMeJBMRFMtaWRw==
   dependencies:
     "@storybook/global" "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-toolbars@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-8.0.8.tgz#64d54974941633aef1814d557275127de1a7da9d"
-  integrity sha512-PZxlK+/Fwk2xcrpr5kkXYjCbBaEjAWcEHWq7mhQReMFaAs5AJE8dvmeQ7rmPDOHnlg4+YsARDFKz5FJtthRIgg==
+"@storybook/addon-toolbars@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-8.0.9.tgz#6601732c6b4cc262bab13a1e50f9b11063d5cc74"
+  integrity sha512-nNSBnnBOhQ+EJwkrIkK4ZBYPcozNmEH770CZ/6NK85SUJ6WEBZapE6ru33jIUokFGEvlOlNCeai0GUc++cQP8w==
 
-"@storybook/addon-viewport@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-8.0.8.tgz#ed7a7fa0a9b89cc27130a549c3bea9a91404472c"
-  integrity sha512-nOuc6DquGvm24c/A0HFTgeEN/opd58ebs1KLaEEq1f6iYV0hT2Gpnk0Usg/seOiFtJnj3NyAM46HSkZz06T8Sw==
+"@storybook/addon-viewport@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-8.0.9.tgz#819496abdcc4aa9ae2fe8d4665a96e57ecebece3"
+  integrity sha512-Ao4+D56cO7biaw+iTlMU1FBec1idX0cmdosDeCFZin06MSawcPkeBlRBeruaSQYdLes8TBMdZPFgfuqI5yIk6g==
   dependencies:
     memoizerific "^1.11.3"
 
-"@storybook/blocks@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-8.0.8.tgz#b31e01f53d534eed5380917ffce2a4a213496f9e"
-  integrity sha512-kwsjhvnmFEaIl51QHJt/83G7mZ5YbzFKnWCwy8WUpi0xvVcyoFQSGGgwR3XRrzGfUEPK8P2FDHeKw1bLzyIejA==
-  dependencies:
-    "@storybook/channels" "8.0.8"
-    "@storybook/client-logger" "8.0.8"
-    "@storybook/components" "8.0.8"
-    "@storybook/core-events" "8.0.8"
-    "@storybook/csf" "^0.1.2"
-    "@storybook/docs-tools" "8.0.8"
+"@storybook/blocks@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-8.0.9.tgz#6500fef1e72618bc7715286b9dbb5bfaae20f4d4"
+  integrity sha512-F2zSrfSwzTFN7qW3zB80tG+EXtmfmCDC6Ird0F7tolszb6tOqJcAcBOwQbE2O0wI63sLu21qxzXgaKBMkiWvJg==
+  dependencies:
+    "@storybook/channels" "8.0.9"
+    "@storybook/client-logger" "8.0.9"
+    "@storybook/components" "8.0.9"
+    "@storybook/core-events" "8.0.9"
+    "@storybook/csf" "^0.1.4"
+    "@storybook/docs-tools" "8.0.9"
     "@storybook/global" "^5.0.0"
     "@storybook/icons" "^1.2.5"
-    "@storybook/manager-api" "8.0.8"
-    "@storybook/preview-api" "8.0.8"
-    "@storybook/theming" "8.0.8"
-    "@storybook/types" "8.0.8"
+    "@storybook/manager-api" "8.0.9"
+    "@storybook/preview-api" "8.0.9"
+    "@storybook/theming" "8.0.9"
+    "@storybook/types" "8.0.9"
     "@types/lodash" "^4.14.167"
     color-convert "^2.0.1"
     dequal "^2.0.2"
@@ -2194,15 +2204,15 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/builder-manager@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-manager/-/builder-manager-8.0.8.tgz#23ed7b13aa98662ccc6bd1fb5525246a4469bd33"
-  integrity sha512-0uihNTpTou0RFMM6PQLlfCxDxse9nIDEb83AmWE/OUnpKDDY9+WFupVWGaZc9HfH9h4Yqre2fiuK1b7KNYe7AQ==
+"@storybook/builder-manager@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-manager/-/builder-manager-8.0.9.tgz#8c03b04b3550dd637247fea2d2ddd089268408d9"
+  integrity sha512-/PxDwZIfMc/PSRZcasb6SIdGr3azIlenzx7dBF7Imt8i4jLHiAf1t00GvghlfJsvsrn4DNp95rbRbXTDyTj7tQ==
   dependencies:
     "@fal-works/esbuild-plugin-global-externals" "^2.1.2"
-    "@storybook/core-common" "8.0.8"
-    "@storybook/manager" "8.0.8"
-    "@storybook/node-logger" "8.0.8"
+    "@storybook/core-common" "8.0.9"
+    "@storybook/manager" "8.0.9"
+    "@storybook/node-logger" "8.0.9"
     "@types/ejs" "^3.1.1"
     "@yarnpkg/esbuild-plugin-pnp" "^3.0.0-rc.10"
     browser-assert "^1.2.1"
@@ -2214,20 +2224,20 @@
     process "^0.11.10"
     util "^0.12.4"
 
-"@storybook/builder-vite@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-vite/-/builder-vite-8.0.8.tgz#55b2af2fde1bce9c1647294938462d9ea50fe68b"
-  integrity sha512-ibWOxoHczCc6ttMQqiSXv29m/e44sKVoc1BJluApQcjCXl9g6QXyN45zV70odjCxMfNy7EQgUjCA0mgAgMHSIw==
-  dependencies:
-    "@storybook/channels" "8.0.8"
-    "@storybook/client-logger" "8.0.8"
-    "@storybook/core-common" "8.0.8"
-    "@storybook/core-events" "8.0.8"
-    "@storybook/csf-plugin" "8.0.8"
-    "@storybook/node-logger" "8.0.8"
-    "@storybook/preview" "8.0.8"
-    "@storybook/preview-api" "8.0.8"
-    "@storybook/types" "8.0.8"
+"@storybook/builder-vite@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-vite/-/builder-vite-8.0.9.tgz#22fb6eff619336c312fbfd000e201385c997d3f9"
+  integrity sha512-7hEQFZIIz7VvxdySDpPE96iMvZxQvRZcRdhaNGeE+8Y2pyc3DgYE4WY3sjr+LUoB0a6TYLpAIKqbXwtLz0R+PQ==
+  dependencies:
+    "@storybook/channels" "8.0.9"
+    "@storybook/client-logger" "8.0.9"
+    "@storybook/core-common" "8.0.9"
+    "@storybook/core-events" "8.0.9"
+    "@storybook/csf-plugin" "8.0.9"
+    "@storybook/node-logger" "8.0.9"
+    "@storybook/preview" "8.0.9"
+    "@storybook/preview-api" "8.0.9"
+    "@storybook/types" "8.0.9"
     "@types/find-cache-dir" "^3.2.1"
     browser-assert "^1.2.1"
     es-module-lexer "^0.9.3"
@@ -2237,33 +2247,33 @@
     magic-string "^0.30.0"
     ts-dedent "^2.0.0"
 
-"@storybook/channels@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-8.0.8.tgz#571b1ff9a58ae01a2172c877d87b1398d95c5579"
-  integrity sha512-L3EGVkabv3fweXnykD/GlNUDO5HtwlIfSovC7BF4MmP7662j2/eqlZrJxDojGtbv11XHjWp/UJHUIfKpcHXYjQ==
+"@storybook/channels@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-8.0.9.tgz#886aff858a13c11f49ca3d92d8a2ade67f19d407"
+  integrity sha512-7Lcfyy5CsLWWGhMPO9WG4jZ/Alzp0AjepFhEreYHRPtQrfttp6qMAjE/g1aHgun0qHCYWxwqIG4NLR/hqDNrXQ==
   dependencies:
-    "@storybook/client-logger" "8.0.8"
-    "@storybook/core-events" "8.0.8"
+    "@storybook/client-logger" "8.0.9"
+    "@storybook/core-events" "8.0.9"
     "@storybook/global" "^5.0.0"
     telejson "^7.2.0"
     tiny-invariant "^1.3.1"
 
-"@storybook/cli@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-8.0.8.tgz#e1c73a9c009823fdda795f3c3cf074a7fef8ea91"
-  integrity sha512-RnSdgykh2i7es1rQ7CNGpDrKK/PN1f0xjwpkAHXCEB6T9KpHBmqDquzZp+N127a1HBHHXy018yi4wT8mSQyEoA==
+"@storybook/cli@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-8.0.9.tgz#20d90c5c357d063c054f8594a6b327ce447364fd"
+  integrity sha512-lilYTKn8F5YOePijqfRYFa5v2mHVIJxPCIgTn+OXAmAFbcizZ6P8P6niU4J/NXulgx68Ln1M7hYhFtTP25hVTw==
   dependencies:
     "@babel/core" "^7.23.0"
     "@babel/types" "^7.23.0"
     "@ndelangen/get-tarball" "^3.0.7"
-    "@storybook/codemod" "8.0.8"
-    "@storybook/core-common" "8.0.8"
-    "@storybook/core-events" "8.0.8"
-    "@storybook/core-server" "8.0.8"
-    "@storybook/csf-tools" "8.0.8"
-    "@storybook/node-logger" "8.0.8"
-    "@storybook/telemetry" "8.0.8"
-    "@storybook/types" "8.0.8"
+    "@storybook/codemod" "8.0.9"
+    "@storybook/core-common" "8.0.9"
+    "@storybook/core-events" "8.0.9"
+    "@storybook/core-server" "8.0.9"
+    "@storybook/csf-tools" "8.0.9"
+    "@storybook/node-logger" "8.0.9"
+    "@storybook/telemetry" "8.0.9"
+    "@storybook/types" "8.0.9"
     "@types/semver" "^7.3.4"
     "@yarnpkg/fslib" "2.10.3"
     "@yarnpkg/libzip" "2.3.0"
@@ -2290,25 +2300,25 @@
     tiny-invariant "^1.3.1"
     ts-dedent "^2.0.0"
 
-"@storybook/client-logger@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-8.0.8.tgz#351cc47629e91f188c6862038bf3a13cabb7d034"
-  integrity sha512-a4BKwl9NLFcuRgMyI7S4SsJeLFK0LCQxIy76V6YyrE1DigoXz4nA4eQxdjLf7JVvU0EZFmNSfbVL/bXzzWKNXA==
+"@storybook/client-logger@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-8.0.9.tgz#90a099ad79d6959cd3d0ee4f753edb0cc54a54f5"
+  integrity sha512-LzV/RHkbf07sRc1Jc0ff36RlapKf9Ul7/+9VMvVbI3hshH1CpmrZK4t/tsIdpX/EVOdJ1Gg5cES06PnleOAIPA==
   dependencies:
     "@storybook/global" "^5.0.0"
 
-"@storybook/codemod@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-8.0.8.tgz#1480bfc7c005ade0ec3181158103c82e70ffdf3f"
-  integrity sha512-ufEBLciLmLlAh+L6lGgBObTiny6odXMKqiJOewQ9XfIN0wdWdyRUf5QdZIPOdfgHhWF2Q2HeswiulsoHm8Z/hA==
+"@storybook/codemod@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-8.0.9.tgz#196dae4b4a921244ed384217f79651979eff1b45"
+  integrity sha512-VBeGpSZSQpL6iyLLqceJSNGhdCqcNwv+xC/aWdDFOkmuE1YfbmNNwpa9QYv4ZFJ2QjUsm4iTWG60qK+9NXeSKA==
   dependencies:
     "@babel/core" "^7.23.2"
     "@babel/preset-env" "^7.23.2"
     "@babel/types" "^7.23.0"
-    "@storybook/csf" "^0.1.2"
-    "@storybook/csf-tools" "8.0.8"
-    "@storybook/node-logger" "8.0.8"
-    "@storybook/types" "8.0.8"
+    "@storybook/csf" "^0.1.4"
+    "@storybook/csf-tools" "8.0.9"
+    "@storybook/node-logger" "8.0.9"
+    "@storybook/types" "8.0.9"
     "@types/cross-spawn" "^6.0.2"
     cross-spawn "^7.0.3"
     globby "^11.0.2"
@@ -2318,30 +2328,30 @@
     recast "^0.23.5"
     tiny-invariant "^1.3.1"
 
-"@storybook/components@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-8.0.8.tgz#e189a9eb2891e0677317d8e016c217ff35a8565e"
-  integrity sha512-EpBExH4kHWQJSfA8QXJJ5AsLRUGi5X/zWY7ffiYW8rtnBmEnk3T9FpmnyJlY1A8sdd3b1wQ07JGBDHfL1mdELw==
+"@storybook/components@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-8.0.9.tgz#f087e69d8d95ff0e5766042fc4f9481882db73bb"
+  integrity sha512-JcwBGADzIJs0PSzqykrrD2KHzNG9wtexUOKuidt+FSv9szpUhe3qBAXIHpdfBRl7mOJ9TRZ5rt+mukEnfncdzA==
   dependencies:
     "@radix-ui/react-slot" "^1.0.2"
-    "@storybook/client-logger" "8.0.8"
-    "@storybook/csf" "^0.1.2"
+    "@storybook/client-logger" "8.0.9"
+    "@storybook/csf" "^0.1.4"
     "@storybook/global" "^5.0.0"
     "@storybook/icons" "^1.2.5"
-    "@storybook/theming" "8.0.8"
-    "@storybook/types" "8.0.8"
+    "@storybook/theming" "8.0.9"
+    "@storybook/types" "8.0.9"
     memoizerific "^1.11.3"
     util-deprecate "^1.0.2"
 
-"@storybook/core-common@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-8.0.8.tgz#3a6136097559bcfa581a372516f67f13ace85655"
-  integrity sha512-CL15M2oeQW+Rb1l7ciunLDI2Re+ojL2lX1ZFAiDedcOU+JHsdq43zAuXoZVzp8icUi2AUSwEjZIxGCSingj+JQ==
+"@storybook/core-common@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-8.0.9.tgz#ccf97c549943f670dcecaefebeb4a8637bac6b42"
+  integrity sha512-Jmue+sfHFb4GTYBzyWYw1MygoJiQSfISIrKmNIzAmZ+oR9EOr+jpu/i/bH+uetZ2Hqg1AGhj1VB7OtJp9HQyWw==
   dependencies:
-    "@storybook/core-events" "8.0.8"
-    "@storybook/csf-tools" "8.0.8"
-    "@storybook/node-logger" "8.0.8"
-    "@storybook/types" "8.0.8"
+    "@storybook/core-events" "8.0.9"
+    "@storybook/csf-tools" "8.0.9"
+    "@storybook/node-logger" "8.0.9"
+    "@storybook/types" "8.0.9"
     "@yarnpkg/fslib" "2.10.3"
     "@yarnpkg/libzip" "2.3.0"
     chalk "^4.1.0"
@@ -2367,35 +2377,35 @@
     ts-dedent "^2.0.0"
     util "^0.12.4"
 
-"@storybook/core-events@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-8.0.8.tgz#70b606bdcfd153b0e94ded4414069aac89e38419"
-  integrity sha512-PtuvR7vS4glDEdCfKB4f1k3Vs1C3rTWP2DNbF+IjjPhNLMBznCdzTAPcz+NUIBvpjjGnhKwWikJ0yj931YjSVg==
+"@storybook/core-events@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-8.0.9.tgz#d14db371f1f959e8c3baaa6098d2c506bcb3f3ad"
+  integrity sha512-DxSUx7wG9Qe3OFUBnv3OrYq48J8UWNo2DUR5/JecJCtp3n++L4fAEW3J0IF5FfxpQDMQSp1yTNjZ2PaWCMd2ag==
   dependencies:
     ts-dedent "^2.0.0"
 
-"@storybook/core-server@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-8.0.8.tgz#2cb60f2ca58720f6257cb70327b93aea8f0df074"
-  integrity sha512-tSEueEBttbSohzhZVN2bFNlFx3eoqQ7p57cjQLKXXwKygS2qKxISKnFy+Y0nj20APz68Wj51kx0rN0nGALeegw==
+"@storybook/core-server@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-8.0.9.tgz#c3f4790e35b6a116df64c6e6d1161c2077c70c4e"
+  integrity sha512-BIe1T5YUBl0GYxEjRoTQsvXD2pyuzL8rPTUD41zlzSQM0R8U6Iant9SzRms4u0+rKUm2mGxxKuODlUo5ewqaGA==
   dependencies:
     "@aw-web-design/x-default-browser" "1.4.126"
     "@babel/core" "^7.23.9"
     "@discoveryjs/json-ext" "^0.5.3"
-    "@storybook/builder-manager" "8.0.8"
-    "@storybook/channels" "8.0.8"
-    "@storybook/core-common" "8.0.8"
-    "@storybook/core-events" "8.0.8"
-    "@storybook/csf" "^0.1.2"
-    "@storybook/csf-tools" "8.0.8"
+    "@storybook/builder-manager" "8.0.9"
+    "@storybook/channels" "8.0.9"
+    "@storybook/core-common" "8.0.9"
+    "@storybook/core-events" "8.0.9"
+    "@storybook/csf" "^0.1.4"
+    "@storybook/csf-tools" "8.0.9"
     "@storybook/docs-mdx" "3.0.0"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager" "8.0.8"
-    "@storybook/manager-api" "8.0.8"
-    "@storybook/node-logger" "8.0.8"
-    "@storybook/preview-api" "8.0.8"
-    "@storybook/telemetry" "8.0.8"
-    "@storybook/types" "8.0.8"
+    "@storybook/manager" "8.0.9"
+    "@storybook/manager-api" "8.0.9"
+    "@storybook/node-logger" "8.0.9"
+    "@storybook/preview-api" "8.0.9"
+    "@storybook/telemetry" "8.0.9"
+    "@storybook/types" "8.0.9"
     "@types/detect-port" "^1.3.0"
     "@types/node" "^18.0.0"
     "@types/pretty-hrtime" "^1.0.0"
@@ -2423,25 +2433,25 @@
     watchpack "^2.2.0"
     ws "^8.2.3"
 
-"@storybook/csf-plugin@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-8.0.8.tgz#91d5ad52236b7977f193f36c536a460aeae297e9"
-  integrity sha512-x9WspjZGcqXENj/Vn4Qmn0oTW93KN2V9wqpflWwCUJTByl2MugQsh5xRuDbs2yM7dD6zKcqRyPaTY+GFZBW+Vg==
+"@storybook/csf-plugin@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-8.0.9.tgz#af030b3063d01278de332c5985df8cff10e9b63b"
+  integrity sha512-pXaNCNi++kxKsqSWwvx215fPx8cNqvepLVxQ7B69qXLHj80DHn0Q3DFBO3sLXNiQMJ2JK4OYcTxMfuOiyzszKw==
   dependencies:
-    "@storybook/csf-tools" "8.0.8"
+    "@storybook/csf-tools" "8.0.9"
     unplugin "^1.3.1"
 
-"@storybook/csf-tools@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-8.0.8.tgz#04f843bfc3961271adbb3e64be7e5e32396c51f8"
-  integrity sha512-Ji5fpoGym/MSyHJ6ALghVUUecwhEbN0On+jOZ2VPkrkATi9UDtryHQPdF60HKR63Iv53xRuWRzudB6zm43RTzw==
+"@storybook/csf-tools@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-8.0.9.tgz#8c24422fc12519be7756b4dcccad900962e6a88a"
+  integrity sha512-PiNMhL97giLytTdQwuhsZ92buVk4gy9H/8DtrDhUc45/1OmF95gogm6T2Yap729SIFwgpOcuq/U3aVo6d6swVQ==
   dependencies:
     "@babel/generator" "^7.23.0"
     "@babel/parser" "^7.23.0"
     "@babel/traverse" "^7.23.2"
     "@babel/types" "^7.23.0"
-    "@storybook/csf" "^0.1.2"
-    "@storybook/types" "8.0.8"
+    "@storybook/csf" "^0.1.4"
+    "@storybook/types" "8.0.9"
     fs-extra "^11.1.0"
     recast "^0.23.5"
     ts-dedent "^2.0.0"
@@ -2453,7 +2463,7 @@
   dependencies:
     lodash "^4.17.15"
 
-"@storybook/csf@^0.1.2":
+"@storybook/csf@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.1.4.tgz#18224bcd571fa834ccc4bebda8a0ca4cedbc4d91"
   integrity sha512-B9UI/lsQMjF+oEfZCI6YXNoeuBcGZoOP5x8yKbe2tIEmsMjSztFKkpPzi5nLCnBk/MBtl6QJeI3ksJnbsWPkOw==
@@ -2465,14 +2475,15 @@
   resolved "https://registry.yarnpkg.com/@storybook/docs-mdx/-/docs-mdx-3.0.0.tgz#5c9b5ce35dcb00ad8aa5dddbabf52ad09fab3974"
   integrity sha512-NmiGXl2HU33zpwTv1XORe9XG9H+dRUC1Jl11u92L4xr062pZtrShLmD4VKIsOQujxhhOrbxpwhNOt+6TdhyIdQ==
 
-"@storybook/docs-tools@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-8.0.8.tgz#4a46a474dec06ea1f87ea577de5cbfb57f3ce71f"
-  integrity sha512-p/MIrDshXMl/fiCRlfG9StkRYI1QlUyUSQQ/YDBFlBfWcJYARIt3TIvQyvs3Q/apnQNcDXIW663W57s7WHTO2w==
+"@storybook/docs-tools@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-8.0.9.tgz#4257adede62028a6e1176151a09fa4f4fa146b12"
+  integrity sha512-OzogAeOmeHea/MxSPKRBWtOQVNSpoq+OOpimO9YRA5h5GBRJ2TUOGT44Gny6QT4ll5AvQA8fIiq9KezKcLekAg==
   dependencies:
-    "@storybook/core-common" "8.0.8"
-    "@storybook/preview-api" "8.0.8"
-    "@storybook/types" "8.0.8"
+    "@storybook/core-common" "8.0.9"
+    "@storybook/core-events" "8.0.9"
+    "@storybook/preview-api" "8.0.9"
+    "@storybook/types" "8.0.9"
     "@types/doctrine" "^0.0.3"
     assert "^2.1.0"
     doctrine "^3.0.0"
@@ -2488,33 +2499,33 @@
   resolved "https://registry.yarnpkg.com/@storybook/icons/-/icons-1.2.9.tgz#bb4a51a79e186b62e2dd0e04928b8617ac573838"
   integrity sha512-cOmylsz25SYXaJL/gvTk/dl3pyk7yBFRfeXTsHvTA3dfhoU/LWSq0NKL9nM7WBasJyn6XPSGnLS4RtKXLw5EUg==
 
-"@storybook/instrumenter@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/instrumenter/-/instrumenter-8.0.8.tgz#4e9d11afe464073e142617217cb7c76f29e3e803"
-  integrity sha512-bCu9Tu48WOQ8ZNUed+FCSMr3Uw81b4yW/knD2goqx15nD33B7xXBNSI2GTHH5YaEHVyIFFggQcKHLkELXWlsoA==
+"@storybook/instrumenter@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/instrumenter/-/instrumenter-8.0.9.tgz#a0aec1afcf76dc6c2f3f9e82ef3e8ed7d16bdcbe"
+  integrity sha512-Gw74dgpTU/2p7FG0s7DuVdqCbJ2MEcSuRJjDo7HcXRYcvWp7I6Ly+C0v7N5VaoS+kbBVerAhLKIHZgG/LZf1og==
   dependencies:
-    "@storybook/channels" "8.0.8"
-    "@storybook/client-logger" "8.0.8"
-    "@storybook/core-events" "8.0.8"
+    "@storybook/channels" "8.0.9"
+    "@storybook/client-logger" "8.0.9"
+    "@storybook/core-events" "8.0.9"
     "@storybook/global" "^5.0.0"
-    "@storybook/preview-api" "8.0.8"
+    "@storybook/preview-api" "8.0.9"
     "@vitest/utils" "^1.3.1"
     util "^0.12.4"
 
-"@storybook/manager-api@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-8.0.8.tgz#e9c2661a8b2fe060076e9bb02fcdc7d498f6caed"
-  integrity sha512-1HU4nfLRi0sD2uw229gb8EQyufNWrLvMNpg013kBsBXRd+Dj4dqF3v+KrYFNtteY7riC4mAJ6YcQ4tBUNYZDug==
+"@storybook/manager-api@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-8.0.9.tgz#5361d253c6704643f44afb95271b3d206d831740"
+  integrity sha512-99b3yKArDSvfabXL7QE3nA95e4DdW/5H/ZCcr6/E2qCQJayZ6G1v/WWamKXbiaTpkndulFmcb/+ZmnDXcweIIQ==
   dependencies:
-    "@storybook/channels" "8.0.8"
-    "@storybook/client-logger" "8.0.8"
-    "@storybook/core-events" "8.0.8"
-    "@storybook/csf" "^0.1.2"
+    "@storybook/channels" "8.0.9"
+    "@storybook/client-logger" "8.0.9"
+    "@storybook/core-events" "8.0.9"
+    "@storybook/csf" "^0.1.4"
     "@storybook/global" "^5.0.0"
     "@storybook/icons" "^1.2.5"
-    "@storybook/router" "8.0.8"
-    "@storybook/theming" "8.0.8"
-    "@storybook/types" "8.0.8"
+    "@storybook/router" "8.0.9"
+    "@storybook/theming" "8.0.9"
+    "@storybook/types" "8.0.9"
     dequal "^2.0.2"
     lodash "^4.17.21"
     memoizerific "^1.11.3"
@@ -2522,27 +2533,27 @@
     telejson "^7.2.0"
     ts-dedent "^2.0.0"
 
-"@storybook/manager@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-8.0.8.tgz#a90dd62b64348698308738d8a5986f02fb5671e8"
-  integrity sha512-pWYHSDmgT8p/XbQMKuDPdgB6KzjePI6dU5KQ5MERYfch1UiuGPVm1HHDlxxSfHW0IIXw9Qnwq4L0Awe4qhvJKQ==
-
-"@storybook/node-logger@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-8.0.8.tgz#12d29cac99ef439aba0050f2fb03894ed4c52c86"
-  integrity sha512-ymps3MMTxtMWq0eDiXk1iO7iv0Eg0PuUvOpPPohEJauGzU9THv81xx01aaHKSprFFJYD2LMQr1aFuUplItO12g==
-
-"@storybook/preview-api@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-8.0.8.tgz#0684226cd822b9266cceced26ce288b91ea6aa02"
-  integrity sha512-khgw2mNiBrSZS3KNGQPzjneL3Csh3BOq0yLAtJpT7CRSrI/YjlE7jjcTkKzoxW+UCgvNTnLvsowcuzu82e69fA==
-  dependencies:
-    "@storybook/channels" "8.0.8"
-    "@storybook/client-logger" "8.0.8"
-    "@storybook/core-events" "8.0.8"
-    "@storybook/csf" "^0.1.2"
+"@storybook/manager@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-8.0.9.tgz#e24971577714bbed02b55596d1363fbda78cfa21"
+  integrity sha512-+NnRo+5JQFGNqveKrLtC0b+Z08Tae4m44iq292bPeZMpr9OkFsIkU0PBPsHTHPkrqC/zZXRNsCsTEgvu3p2OIA==
+
+"@storybook/node-logger@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-8.0.9.tgz#0825e53bce014a8faa51029ab89e91b5eac1af8b"
+  integrity sha512-5ajMdZFrYrjGLJOVDq7dlEQNFsgeLHymt4dCK9MulL/ciXykmXUZXE3Bye0wFy+I2qqDVvrvR8uzCvSFvm5MAQ==
+
+"@storybook/preview-api@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-8.0.9.tgz#273ac693a8d7333a33e1a8202e663dd9a9f02cc4"
+  integrity sha512-zHfX34bkAMzzmE7vbDzaqFwSW6ExiBD0HiO1L/IsHF55f0f7xV7IH8uJyFRrDTvAoW3ReSxZDMvvPpeydFPKGA==
+  dependencies:
+    "@storybook/channels" "8.0.9"
+    "@storybook/client-logger" "8.0.9"
+    "@storybook/core-events" "8.0.9"
+    "@storybook/csf" "^0.1.4"
     "@storybook/global" "^5.0.0"
-    "@storybook/types" "8.0.8"
+    "@storybook/types" "8.0.9"
     "@types/qs" "^6.9.5"
     dequal "^2.0.2"
     lodash "^4.17.21"
@@ -2552,97 +2563,96 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/preview@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-8.0.8.tgz#4a914fa1a512d664c77a43395453ddc4a229989a"
-  integrity sha512-J/ooKcvDV1s7ROH7lF/0vOyWDOgDB7bN6vS67J1WK0HLvMGaqUzU+q3ndakGzu0LU/jvUBqEFSZd1ALWyZINDQ==
+"@storybook/preview@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-8.0.9.tgz#46ebdf09bc7eb9601c4ddce9a09e0c63ae31c662"
+  integrity sha512-tFsR8xc8AYBZZrZw8enklFbSQt7ZAV+rv20BoxwDhd3q7fjXyK7O4moGPqUwBZ7rukTG13nPoISxr+VXAk/HYA==
 
-"@storybook/react-dom-shim@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-8.0.8.tgz#28370b050be3e5ebea296efa6bde01a792ac96fd"
-  integrity sha512-vOMlAz2HH/xfgZmSO28fCEmp5/tPxINDEdBDVLdZeYG6R1j5jlMRyaNcXt4cPNDkyc///PkB/K767hg4goca/Q==
+"@storybook/react-dom-shim@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-8.0.9.tgz#9fcfcc93a41c84f5a046b0b97647684061e2ac7d"
+  integrity sha512-8011KlRuG3obr5pZZ7bcEyYYNWF3tR596YadoMd267NPoHKvwAbKL1L/DNgb6kiYjZDUf9QfaKSCWW31k0kcRQ==
 
-"@storybook/router@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-8.0.8.tgz#9688ff51590b303725e4db065483ec134dffe571"
-  integrity sha512-wdFdNsEKweigU9VkGZtpb7GhBJLWzbABcwOuEy2h0d5m7egB97hy9BxhANdqkC+PbAHrabxC99Ca3wTj50MoDg==
+"@storybook/router@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-8.0.9.tgz#69cfff588d8c8a4160404f1f2897ce1feb9cecb1"
+  integrity sha512-aAOWxbM9J4mt+cp4o88T2PB29mgBBTOzU37/pUsTHYnKnR9XI4npXEXdN8Gv+ryqM0kj0AbBpz/llFlnR2MNNA==
   dependencies:
-    "@storybook/client-logger" "8.0.8"
+    "@storybook/client-logger" "8.0.9"
     memoizerific "^1.11.3"
     qs "^6.10.0"
 
-"@storybook/telemetry@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-8.0.8.tgz#d477d9fcdc5d7a50692d39ba1e061c1e5e500d46"
-  integrity sha512-Uvj4nN01vQgjXZYKF/GKTFE85//Qm4ZTlJxTFWid+oYWc8NpAyJvlsJkj/dsEn4cLrgnJx2e4xvnx0Umr2ck+A==
+"@storybook/telemetry@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-8.0.9.tgz#148bd044c4bac7197188aaf54e313fb184fd69aa"
+  integrity sha512-AGGfcup06t+wxhBIkHd0iybieOh9PDVZQJ9oPct5JGB39+ni9wvs0WOD+MYlHbsjp8id7+aGkh6mYuYOvfck+Q==
   dependencies:
-    "@storybook/client-logger" "8.0.8"
-    "@storybook/core-common" "8.0.8"
-    "@storybook/csf-tools" "8.0.8"
+    "@storybook/client-logger" "8.0.9"
+    "@storybook/core-common" "8.0.9"
+    "@storybook/csf-tools" "8.0.9"
     chalk "^4.1.0"
     detect-package-manager "^2.0.1"
     fetch-retry "^5.0.2"
     fs-extra "^11.1.0"
     read-pkg-up "^7.0.1"
 
-"@storybook/test@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/test/-/test-8.0.8.tgz#041ec2164de26ae77e493d8121495c556e0ae7c8"
-  integrity sha512-YXgwgg1e8ggDg2BlgeExwdN3MjeExnDvybQIUugADgun87tRIujJFCdjh0PAxg0Qvln6+lU3w+3Y2aryvX42RA==
+"@storybook/test@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/test/-/test-8.0.9.tgz#b7c60dca424a57f84d4f6be6c186037a8cc305dd"
+  integrity sha512-bRd5tBJnPzR6UKbDXONWnFWtdkNOY99HMLDUWe5fTRo50GwkrpFBVqPflhdkruEeof0kAbBUbnoN2CIYgtnAFw==
   dependencies:
-    "@storybook/client-logger" "8.0.8"
-    "@storybook/core-events" "8.0.8"
-    "@storybook/instrumenter" "8.0.8"
-    "@storybook/preview-api" "8.0.8"
+    "@storybook/client-logger" "8.0.9"
+    "@storybook/core-events" "8.0.9"
+    "@storybook/instrumenter" "8.0.9"
+    "@storybook/preview-api" "8.0.9"
     "@testing-library/dom" "^9.3.4"
     "@testing-library/jest-dom" "^6.4.2"
     "@testing-library/user-event" "^14.5.2"
     "@vitest/expect" "1.3.1"
     "@vitest/spy" "^1.3.1"
-    chai "^4.4.1"
     util "^0.12.4"
 
-"@storybook/theming@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.0.8.tgz#ef72edf6b7f37c0e7e2d6134eccfdff54618d8c6"
-  integrity sha512-43hkNz7yo8Bl97AO2WbxIGprUqMhUZyK9g8383bd30gSxy9nfND/bdSdcgmA8IokDn8qp37Q4QmxtUZdhjMzZQ==
+"@storybook/theming@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.0.9.tgz#cb5a4f6ddc4a15faa64905cfad60422c3db252f2"
+  integrity sha512-jgfDuYoiNMMirQiASN3Eg0hGDXsEtpdAcMxyShqYGwu9elxgD9yUnYC2nSckYsM74a3ZQ3JaViZ9ZFSe2FHmeQ==
   dependencies:
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
-    "@storybook/client-logger" "8.0.8"
+    "@storybook/client-logger" "8.0.9"
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
 
-"@storybook/types@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-8.0.8.tgz#bf226aad7a3036490359e261607e6f7f234f6c9c"
-  integrity sha512-NGsgCsXnWlaZmHenHDgHGs21zhweZACkqTNsEQ7hvsiF08QeiKAdgJLQg3YeGK73h9mFDRP9djprUtJYab6vnQ==
+"@storybook/types@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-8.0.9.tgz#6597c35c0b147e43a6b23b2159514fea312f2214"
+  integrity sha512-ew0EXzk9k4B557P1qIWYrnvUcgaE0WWA5qQS0AU8l+fRTp5nvl9O3SP/zNIB0SN1qDFO7dXr3idTNTyIikTcEQ==
   dependencies:
-    "@storybook/channels" "8.0.8"
+    "@storybook/channels" "8.0.9"
     "@types/express" "^4.7.0"
     file-system-cache "2.3.0"
 
-"@storybook/web-components-vite@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/web-components-vite/-/web-components-vite-8.0.8.tgz#6e98c523f26385f87615050a476379eec7819666"
-  integrity sha512-kRVBioF9DiVq4GB43nXacMiQyw0AhGe2TeBX9Mh+ZY7mPRDkhnSshr4wqXW6GkHwfLkTus0M0naDeYxaU8EUPA==
+"@storybook/web-components-vite@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/web-components-vite/-/web-components-vite-8.0.9.tgz#46831f00e7dd210e4f69aadbfd745674453080b6"
+  integrity sha512-6NyrFjAKeYrt2XhxbVpM+1XBQYJnkT0unYVNlml2S45D/68JRqoezLFaSZrxQOa2PGs1TT0c1bhw+GYbaOXLOw==
   dependencies:
-    "@storybook/builder-vite" "8.0.8"
-    "@storybook/core-server" "8.0.8"
-    "@storybook/node-logger" "8.0.8"
-    "@storybook/web-components" "8.0.8"
+    "@storybook/builder-vite" "8.0.9"
+    "@storybook/core-server" "8.0.9"
+    "@storybook/node-logger" "8.0.9"
+    "@storybook/web-components" "8.0.9"
     magic-string "^0.30.0"
 
-"@storybook/web-components@8.0.8":
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/@storybook/web-components/-/web-components-8.0.8.tgz#89920c154584ce0de84347bdbfde04885d540223"
-  integrity sha512-ggTGVTTiip+1/pGhfkWLpF4sb+bMX9Pnh5s62zZJIhryIzdw/lIaAGAyhxn9xaJjEaoZgsbxxOcuTRuW53G3MQ==
+"@storybook/web-components@8.0.9":
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/web-components/-/web-components-8.0.9.tgz#0d6ffcb62b2ed1ca7cb730266ace08b7502b0563"
+  integrity sha512-wQJZANzTcDfMvoNOL7sqL4SiShKVUAPV15XrdchEaf+RVFAi3edHvubgwRpKcz2H/vyeD86oumxmCNtJbWDctQ==
   dependencies:
-    "@storybook/client-logger" "8.0.8"
-    "@storybook/docs-tools" "8.0.8"
+    "@storybook/client-logger" "8.0.9"
+    "@storybook/docs-tools" "8.0.9"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "8.0.8"
-    "@storybook/preview-api" "8.0.8"
-    "@storybook/types" "8.0.8"
+    "@storybook/manager-api" "8.0.9"
+    "@storybook/preview-api" "8.0.9"
+    "@storybook/types" "8.0.9"
     tiny-invariant "^1.3.1"
     ts-dedent "^2.0.0"
 
@@ -2982,9 +2992,9 @@
   integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
 
 "@types/qs@*", "@types/qs@^6.9.5":
-  version "6.9.14"
-  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.14.tgz#169e142bfe493895287bee382af6039795e9b75b"
-  integrity sha512-5khscbd3SwWMhFqylJBLQ0zIu7c1K6Vz0uBIt915BI3zV0q1nfjRQD3RqSBcPaO6PHEF4ov/t9y89fSiyThlPA==
+  version "6.9.15"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.15.tgz#adde8a060ec9c305a82de1babc1056e73bd64dce"
+  integrity sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg==
 
 "@types/range-parser@*":
   version "1.2.7"
@@ -2998,15 +3008,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0":
-  version "18.2.78"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.78.tgz#94aec453d0ccca909998a2b4b2fd78af15a7d2fe"
-  integrity sha512-qOwdPnnitQY4xKlKayt42q5W5UQrSHjgoXNVEtxeqdITJ99k4VXJOP3vt8Rkm9HmgJpH50UNU+rlqfkfWOqp0A==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^3.0.2"
-
-"@types/react@18.2.79":
+"@types/react@*", "@types/react@18.2.79", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0":
   version "18.2.79"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.79.tgz#c40efb4f255711f554d47b449f796d1c7756d865"
   integrity sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==
@@ -3095,16 +3097,16 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/eslint-plugin@7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.7.0.tgz#bf34a02f221811505b8bf2f31060c8560c1bb0a3"
-  integrity sha512-GJWR0YnfrKnsRoluVO3PRb9r5aMZriiMMM/RHj5nnTrBy1/wIgk76XCtCKcnXGjpZQJQRFtGV9/0JJ6n30uwpQ==
+"@typescript-eslint/eslint-plugin@7.7.1":
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.7.1.tgz#50a9044e3e5fe76b22caf64fb7fc1f97614bdbfd"
+  integrity sha512-KwfdWXJBOviaBVhxO3p5TJiLpNuh2iyXyjmWN0f1nU87pwyvfS0EmjC6ukQVYVFJd/K1+0NWGPDXiyEyQorn0Q==
   dependencies:
     "@eslint-community/regexpp" "^4.10.0"
-    "@typescript-eslint/scope-manager" "7.7.0"
-    "@typescript-eslint/type-utils" "7.7.0"
-    "@typescript-eslint/utils" "7.7.0"
-    "@typescript-eslint/visitor-keys" "7.7.0"
+    "@typescript-eslint/scope-manager" "7.7.1"
+    "@typescript-eslint/type-utils" "7.7.1"
+    "@typescript-eslint/utils" "7.7.1"
+    "@typescript-eslint/visitor-keys" "7.7.1"
     debug "^4.3.4"
     graphemer "^1.4.0"
     ignore "^5.3.1"
@@ -3112,15 +3114,15 @@
     semver "^7.6.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/parser@7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.7.0.tgz#6b1b3ce76c5de002c43af8ae933613b0f2b4bcc6"
-  integrity sha512-fNcDm3wSwVM8QYL4HKVBggdIPAy9Q41vcvC/GtDobw3c4ndVT3K6cqudUmjHPw8EAp4ufax0o58/xvWaP2FmTg==
+"@typescript-eslint/parser@7.7.1":
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.7.1.tgz#f940e9f291cdca40c46cb75916217d3a42d6ceea"
+  integrity sha512-vmPzBOOtz48F6JAGVS/kZYk4EkXao6iGrD838sp1w3NQQC0W8ry/q641KU4PrG7AKNAf56NOcR8GOpH8l9FPCw==
   dependencies:
-    "@typescript-eslint/scope-manager" "7.7.0"
-    "@typescript-eslint/types" "7.7.0"
-    "@typescript-eslint/typescript-estree" "7.7.0"
-    "@typescript-eslint/visitor-keys" "7.7.0"
+    "@typescript-eslint/scope-manager" "7.7.1"
+    "@typescript-eslint/types" "7.7.1"
+    "@typescript-eslint/typescript-estree" "7.7.1"
+    "@typescript-eslint/visitor-keys" "7.7.1"
     debug "^4.3.4"
 
 "@typescript-eslint/scope-manager@5.62.0":
@@ -3131,14 +3133,6 @@
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
 
-"@typescript-eslint/scope-manager@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.6.0.tgz#1e9972f654210bd7500b31feadb61a233f5b5e9d"
-  integrity sha512-ngttyfExA5PsHSx0rdFgnADMYQi+Zkeiv4/ZxGYUWd0nLs63Ha0ksmp8VMxAIC0wtCFxMos7Lt3PszJssG/E6w==
-  dependencies:
-    "@typescript-eslint/types" "7.6.0"
-    "@typescript-eslint/visitor-keys" "7.6.0"
-
 "@typescript-eslint/scope-manager@7.7.0":
   version "7.7.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.7.0.tgz#3f0db079b275bb8b0cb5be7613fb3130cfb5de77"
@@ -3147,13 +3141,21 @@
     "@typescript-eslint/types" "7.7.0"
     "@typescript-eslint/visitor-keys" "7.7.0"
 
-"@typescript-eslint/type-utils@7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.7.0.tgz#36792ff4209a781b058de61631a48df17bdefbc5"
-  integrity sha512-bOp3ejoRYrhAlnT/bozNQi3nio9tIgv3U5C0mVDdZC7cpcQEDZXvq8inrHYghLVwuNABRqrMW5tzAv88Vy77Sg==
+"@typescript-eslint/scope-manager@7.7.1":
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.7.1.tgz#07fe59686ca843f66e3e2b5c151522bc38effab2"
+  integrity sha512-PytBif2SF+9SpEUKynYn5g1RHFddJUcyynGpztX3l/ik7KmZEv19WCMhUBkHXPU9es/VWGD3/zg3wg90+Dh2rA==
   dependencies:
-    "@typescript-eslint/typescript-estree" "7.7.0"
-    "@typescript-eslint/utils" "7.7.0"
+    "@typescript-eslint/types" "7.7.1"
+    "@typescript-eslint/visitor-keys" "7.7.1"
+
+"@typescript-eslint/type-utils@7.7.1":
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.7.1.tgz#2f8094edca3bebdaad009008929df645ed9c8743"
+  integrity sha512-ZksJLW3WF7o75zaBPScdW1Gbkwhd/lyeXGf1kQCxJaOeITscoSl0MjynVvCzuV5boUz/3fOI06Lz8La55mu29Q==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "7.7.1"
+    "@typescript-eslint/utils" "7.7.1"
     debug "^4.3.4"
     ts-api-utils "^1.3.0"
 
@@ -3162,16 +3164,16 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
   integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
 
-"@typescript-eslint/types@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.6.0.tgz#53dba7c30c87e5f10a731054266dd905f1fbae38"
-  integrity sha512-h02rYQn8J+MureCvHVVzhl69/GAfQGPQZmOMjG1KfCl7o3HtMSlPaPUAPu6lLctXI5ySRGIYk94clD/AUMCUgQ==
-
 "@typescript-eslint/types@7.7.0":
   version "7.7.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.7.0.tgz#23af4d24bf9ce15d8d301236e3e3014143604f27"
   integrity sha512-G01YPZ1Bd2hn+KPpIbrAhEWOn5lQBrjxkzHkWvP6NucMXFtfXoevK82hzQdpfuQYuhkvFDeQYbzXCjR1z9Z03w==
 
+"@typescript-eslint/types@7.7.1":
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.7.1.tgz#f903a651fb004c75add08e4e9e207f169d4b98d7"
+  integrity sha512-AmPmnGW1ZLTpWa+/2omPrPfR7BcbUU4oha5VIbSbS1a1Tv966bklvLNXxp3mrbc+P2j4MNOTfDffNsk4o0c6/w==
+
 "@typescript-eslint/typescript-estree@5.62.0", "@typescript-eslint/typescript-estree@^5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
@@ -3185,13 +3187,13 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.6.0.tgz#112a3775563799fd3f011890ac8322f80830ac17"
-  integrity sha512-+7Y/GP9VuYibecrCQWSKgl3GvUM5cILRttpWtnAu8GNL9j11e4tbuGZmZjJ8ejnKYyBRb2ddGQ3rEFCq3QjMJw==
+"@typescript-eslint/typescript-estree@7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.7.0.tgz#b5dd6383b4c6a852d7b256a37af971e8982be97f"
+  integrity sha512-8p71HQPE6CbxIBy2kWHqM1KGrC07pk6RJn40n0DSc6bMOBBREZxSDJ+BmRzc8B5OdaMh1ty3mkuWRg4sCFiDQQ==
   dependencies:
-    "@typescript-eslint/types" "7.6.0"
-    "@typescript-eslint/visitor-keys" "7.6.0"
+    "@typescript-eslint/types" "7.7.0"
+    "@typescript-eslint/visitor-keys" "7.7.0"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
@@ -3199,13 +3201,13 @@
     semver "^7.6.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/typescript-estree@7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.7.0.tgz#b5dd6383b4c6a852d7b256a37af971e8982be97f"
-  integrity sha512-8p71HQPE6CbxIBy2kWHqM1KGrC07pk6RJn40n0DSc6bMOBBREZxSDJ+BmRzc8B5OdaMh1ty3mkuWRg4sCFiDQQ==
+"@typescript-eslint/typescript-estree@7.7.1":
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.7.1.tgz#5cafde48fe390fe1c1b329b2ce0ba8a73c1e87b2"
+  integrity sha512-CXe0JHCXru8Fa36dteXqmH2YxngKJjkQLjxzoj6LYwzZ7qZvgsLSc+eqItCrqIop8Vl2UKoAi0StVWu97FQZIQ==
   dependencies:
-    "@typescript-eslint/types" "7.7.0"
-    "@typescript-eslint/visitor-keys" "7.7.0"
+    "@typescript-eslint/types" "7.7.1"
+    "@typescript-eslint/visitor-keys" "7.7.1"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
@@ -3213,17 +3215,17 @@
     semver "^7.6.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/utils@7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.7.0.tgz#3d2b6606a60ac34f3c625facfb3b3ab7e126f58d"
-  integrity sha512-LKGAXMPQs8U/zMRFXDZOzmMKgFv3COlxUQ+2NMPhbqgVm6R1w+nU1i4836Pmxu9jZAuIeyySNrN/6Rc657ggig==
+"@typescript-eslint/utils@7.7.1":
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.7.1.tgz#5d161f2b4a55e1bc38b634bebb921e4bd4e4a16e"
+  integrity sha512-QUvBxPEaBXf41ZBbaidKICgVL8Hin0p6prQDu6bbetWo39BKbWJxRsErOzMNT1rXvTll+J7ChrbmMCXM9rsvOQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
     "@types/json-schema" "^7.0.15"
     "@types/semver" "^7.5.8"
-    "@typescript-eslint/scope-manager" "7.7.0"
-    "@typescript-eslint/types" "7.7.0"
-    "@typescript-eslint/typescript-estree" "7.7.0"
+    "@typescript-eslint/scope-manager" "7.7.1"
+    "@typescript-eslint/types" "7.7.1"
+    "@typescript-eslint/typescript-estree" "7.7.1"
     semver "^7.6.0"
 
 "@typescript-eslint/utils@^5.62.0":
@@ -3241,16 +3243,16 @@
     semver "^7.3.7"
 
 "@typescript-eslint/utils@^7.4.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.6.0.tgz#e400d782280b6f724c8a1204269d984c79202282"
-  integrity sha512-x54gaSsRRI+Nwz59TXpCsr6harB98qjXYzsRxGqvA5Ue3kQH+FxS7FYU81g/omn22ML2pZJkisy6Q+ElK8pBCA==
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.7.0.tgz#3d2b6606a60ac34f3c625facfb3b3ab7e126f58d"
+  integrity sha512-LKGAXMPQs8U/zMRFXDZOzmMKgFv3COlxUQ+2NMPhbqgVm6R1w+nU1i4836Pmxu9jZAuIeyySNrN/6Rc657ggig==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
     "@types/json-schema" "^7.0.15"
     "@types/semver" "^7.5.8"
-    "@typescript-eslint/scope-manager" "7.6.0"
-    "@typescript-eslint/types" "7.6.0"
-    "@typescript-eslint/typescript-estree" "7.6.0"
+    "@typescript-eslint/scope-manager" "7.7.0"
+    "@typescript-eslint/types" "7.7.0"
+    "@typescript-eslint/typescript-estree" "7.7.0"
     semver "^7.6.0"
 
 "@typescript-eslint/visitor-keys@5.62.0":
@@ -3261,14 +3263,6 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/visitor-keys@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.6.0.tgz#d1ce13145844379021e1f9bd102c1d78946f4e76"
-  integrity sha512-4eLB7t+LlNUmXzfOu1VAIAdkjbu5xNSerURS9X/S5TUKWFRpXRQZbmtPqgKmYx8bj3J0irtQXSiWAOY82v+cgw==
-  dependencies:
-    "@typescript-eslint/types" "7.6.0"
-    eslint-visitor-keys "^3.4.3"
-
 "@typescript-eslint/visitor-keys@7.7.0":
   version "7.7.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.7.0.tgz#950148cf1ac11562a2d903fdf7acf76714a2dc9e"
@@ -3277,6 +3271,14 @@
     "@typescript-eslint/types" "7.7.0"
     eslint-visitor-keys "^3.4.3"
 
+"@typescript-eslint/visitor-keys@7.7.1":
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.7.1.tgz#da2294796220bb0f3b4add5ecbb1b9c3f4f65798"
+  integrity sha512-gBL3Eq25uADw1LQ9kVpf3hRM+DWzs0uZknHYK3hq4jcTPqVCClHGDnB6UUUV2SFeBeA4KWHWbbLqmbGcZ4FYbw==
+  dependencies:
+    "@typescript-eslint/types" "7.7.1"
+    eslint-visitor-keys "^3.4.3"
+
 "@ungap/structured-clone@^1.0.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
@@ -3352,24 +3354,24 @@
   resolved "https://registry.yarnpkg.com/@vscode/web-custom-data/-/web-custom-data-0.4.9.tgz#cd23e788f0b05d930b5f1afa9feded2230743686"
   integrity sha512-QeCJFISE/RiTG0NECX6DYmVRPVb0jdyaUrhY0JqNMv9ruUYtYqxxQfv3PSjogb+zNghmwgXLSYuQKk6G+Xnaig==
 
-"@vue/compiler-core@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.21.tgz#868b7085378fc24e58c9aed14c8d62110a62be1a"
-  integrity sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==
+"@vue/compiler-core@3.4.23":
+  version "3.4.23"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.23.tgz#a08f5998e391ad75e602a66dd7255af9054df2f3"
+  integrity sha512-HAFmuVEwNqNdmk+w4VCQ2pkLk1Vw4XYiiyxEp3z/xvl14aLTUBw2OfVH3vBcx+FtGsynQLkkhK410Nah1N2yyQ==
   dependencies:
-    "@babel/parser" "^7.23.9"
-    "@vue/shared" "3.4.21"
+    "@babel/parser" "^7.24.1"
+    "@vue/shared" "3.4.23"
     entities "^4.5.0"
     estree-walker "^2.0.2"
-    source-map-js "^1.0.2"
+    source-map-js "^1.2.0"
 
 "@vue/compiler-dom@^3.3.0":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz#0077c355e2008207283a5a87d510330d22546803"
-  integrity sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==
+  version "3.4.23"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.23.tgz#6fa622d1e5c8508551564c5dc5948e9cddf60867"
+  integrity sha512-t0b9WSTnCRrzsBGrDd1LNR5HGzYTr7LX3z6nNBG+KGvZLqrT0mY6NsMzOqlVMBKKXKVuusbbB5aOOFgTY+senw==
   dependencies:
-    "@vue/compiler-core" "3.4.21"
-    "@vue/shared" "3.4.21"
+    "@vue/compiler-core" "3.4.23"
+    "@vue/shared" "3.4.23"
 
 "@vue/language-core@1.8.27", "@vue/language-core@^1.8.27":
   version "1.8.27"
@@ -3386,10 +3388,10 @@
     path-browserify "^1.0.1"
     vue-template-compiler "^2.7.14"
 
-"@vue/shared@3.4.21", "@vue/shared@^3.3.0":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
-  integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
+"@vue/shared@3.4.23", "@vue/shared@^3.3.0":
+  version "3.4.23"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.23.tgz#e536a6dfd2f5f950d08c2e8ebcfe7e5329a851a1"
+  integrity sha512-wBQ0gvf+SMwsCQOyusNw/GoXPV47WGd1xB5A1Pgzy0sQ3Bi5r5xm3n+92y3gCnB3MWqnRDdvfkRGxhKtbBRNgg==
 
 "@web/browser-logs@^0.2.6":
   version "0.2.6"
@@ -4311,9 +4313,9 @@ camelcase@^6.2.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001587:
-  version "1.0.30001610"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001610.tgz#2f44ed6e21d359e914271ae35b68903632628ccf"
-  integrity sha512-QFutAY4NgaelojVMjY63o6XlZyORPaLfyMnsl3HgnWdJUcX6K0oaJymHjH8PT5Gk7sTm8rvC/c5COUQKXqmOMA==
+  version "1.0.30001612"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz#d34248b4ec1f117b70b24ad9ee04c90e0b8a14ae"
+  integrity sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==
 
 ccount@^1.0.0:
   version "1.1.0"
@@ -4332,7 +4334,7 @@ chai-a11y-axe@^1.5.0:
   dependencies:
     axe-core "^4.3.3"
 
-chai@^4.3.10, chai@^4.4.1:
+chai@^4.3.10:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/chai/-/chai-4.4.1.tgz#3603fa6eba35425b0f2ac91a009fe924106e50d1"
   integrity sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==
@@ -4777,9 +4779,9 @@ cookies@~0.9.0:
     keygrip "~1.1.0"
 
 core-js-compat@^3.31.0, core-js-compat@^3.36.1:
-  version "3.36.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.36.1.tgz#1818695d72c99c25d621dca94e6883e190cea3c8"
-  integrity sha512-Dk997v9ZCt3X/npqzyGdTlq6t7lDBhZwGvV94PKzDArjp7BTRm7WlDAXYd/OWdeFHO8OChQYRJNJvUCqCbrtKA==
+  version "3.37.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.37.0.tgz#d9570e544163779bb4dff1031c7972f44918dc73"
+  integrity sha512-vYq4L+T8aS5UuFg4UwDhc7YNRWVeVZwltad9C/jV3R2LgVOpS9BDr7l/WL6BN0dbV3k1XejPTHqqEzJgsa0frA==
   dependencies:
     browserslist "^4.23.0"
 
@@ -4819,10 +4821,10 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-functions-list@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.2.1.tgz#2eb205d8ce9f9ce74c5c1d7490b66b77c45ce3ea"
-  integrity sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==
+css-functions-list@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.2.2.tgz#9a54c6dd8416ed25c1079cd88234e927526c1922"
+  integrity sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==
 
 css-tree@^2.3.1:
   version "2.3.1"
@@ -5284,9 +5286,9 @@ ejs@^3.1.8:
     jake "^10.8.5"
 
 electron-to-chromium@^1.4.668:
-  version "1.4.736"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.736.tgz#ecb4348f4d5c70fb1e31c347e5bad6b751066416"
-  integrity sha512-Rer6wc3ynLelKNM4lOCg7/zPQj8tPOCB2hzD32PX9wd3hgRRi9MxEbmkFCokzcEhRVMiOVLjnL9ig9cefJ+6+Q==
+  version "1.4.745"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.745.tgz#9c202ce9cbf18a5b5e0ca47145fd127cc4dd2290"
+  integrity sha512-tRbzkaRI5gbUn5DEvF0dV4TQbMZ5CLkWeTAXmpC9IrYT+GE+x76i9p+o3RJ5l9XmdQlI1pPhVtE9uNcJJ0G0EA==
 
 emoji-regex@^10.3.0:
   version "10.3.0"
@@ -5735,17 +5737,18 @@ eslint-visitor-keys@^4.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz#e3adc021aa038a2a8e0b2f8b0ce8f66b9483b1fb"
   integrity sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==
 
-eslint@9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.0.0.tgz#6270548758e390343f78c8afd030566d86927d40"
-  integrity sha512-IMryZ5SudxzQvuod6rUdIUz29qFItWx281VhtFVc2Psy/ZhlCeD/5DT6lBIJ4H3G+iamGJoTln1v+QSuPw0p7Q==
+eslint@9.1.1:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.1.1.tgz#39ec657ccd12813cb4a1dab2f9229dcc6e468271"
+  integrity sha512-b4cRQ0BeZcSEzPpY2PjFY70VbO32K7BStTGtBsnIGdTSEEQzBi8hPBcGQmTG2zUvFr9uLe0TK42bw8YszuHEqg==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.6.1"
     "@eslint/eslintrc" "^3.0.2"
-    "@eslint/js" "9.0.0"
-    "@humanwhocodes/config-array" "^0.12.3"
+    "@eslint/js" "9.1.1"
+    "@humanwhocodes/config-array" "^0.13.0"
     "@humanwhocodes/module-importer" "^1.0.1"
+    "@humanwhocodes/retry" "^0.2.3"
     "@nodelib/fs.walk" "^1.2.8"
     ajv "^6.12.4"
     chalk "^4.0.0"
@@ -5761,7 +5764,6 @@ eslint@9.0.0:
     file-entry-cache "^8.0.0"
     find-up "^5.0.0"
     glob-parent "^6.0.2"
-    graphemer "^1.4.0"
     ignore "^5.2.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
@@ -6117,9 +6119,9 @@ flatted@^3.2.9:
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
 flow-parser@0.*:
-  version "0.233.0"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.233.0.tgz#b983e65812d5ecae79f08ae3ed8ad2e131a9b966"
-  integrity sha512-E/mv51GYJfLuRX6fZnw4M52gBxYa8pkHUOgNEZOcQK2RTXS8YXeU5rlalkTcY99UpwbeNVCSUFKaavpOksi/pQ==
+  version "0.234.0"
+  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.234.0.tgz#92af26f40ea7e79ca4bd66a066d6d6aa3b4223bf"
+  integrity sha512-J1Wn32xDF1l8FqwshoQnTwC9K3aJ83MFuXUx9AcBQr8ttbI/rkjEgAqnjxaIJuZ6RGMfccN5ZxDJSOMM64qy9Q==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -7557,18 +7559,18 @@ lit-analyzer@2.0.3, lit-analyzer@^2.0.1:
     web-component-analyzer "^2.0.0"
 
 lit-element@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-4.0.4.tgz#e0b37ebbe2394bcb9578d611a409f49475dff361"
-  integrity sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-4.0.5.tgz#f20cd8a6231eaf5358f7a6877ca6ea7628fa2015"
+  integrity sha512-iTWskWZEtn9SyEf4aBG6rKT8GABZMrTWop1+jopsEOgEcugcXJGKuX5bEbkq9qfzY+XB4MAgCaSPwnNpdsNQ3Q==
   dependencies:
     "@lit-labs/ssr-dom-shim" "^1.2.0"
     "@lit/reactive-element" "^2.0.4"
     lit-html "^3.1.2"
 
 "lit-html@^2.0.0 || ^3.0.0", lit-html@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-3.1.2.tgz#6655ce82367472de7680c62b1bcb0beb0e426fa1"
-  integrity sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-3.1.3.tgz#ae2e9fee0258d0a1b5d7b86c87da51117e4f911b"
+  integrity sha512-FwIbqDD8O/8lM4vUZ4KvQZjPPNx7V1VhT7vmRB8RBAO0AU6wuTVdoXiu2CivVjEGdugvcbPNBLtPE1y0ifplHA==
   dependencies:
     "@types/trusted-types" "^2.0.2"
 
@@ -7804,9 +7806,9 @@ magic-string@^0.23.2:
     sourcemap-codec "^1.4.1"
 
 magic-string@^0.30.0, magic-string@^0.30.8:
-  version "0.30.9"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.9.tgz#8927ae21bfdd856310e07a1bc8dd5e73cb6c251d"
-  integrity sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==
+  version "0.30.10"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.10.tgz#123d9c41a0cb5640c892b041d4cfb3bd0aa4b39e"
+  integrity sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
@@ -9343,26 +9345,26 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
-puppeteer-core@22.6.4, puppeteer-core@^22.0.0:
-  version "22.6.4"
-  resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-22.6.4.tgz#b0f9b3c7e90013e892fc34f0a3685543aa7b6326"
-  integrity sha512-QtfJwPmqQec3EHc6LqbEz03vSiuVAr9bYp0TV87dLoreev6ZevsXdLgOfQgoA3GocrsSe/eUf7NRPQ1lQfsc3w==
+puppeteer-core@22.6.5, puppeteer-core@^22.0.0:
+  version "22.6.5"
+  resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-22.6.5.tgz#320eb6ab51e479c6a04cbb831b414e1cd51a7220"
+  integrity sha512-s0/5XkAWe0/dWISiljdrybjwDCHhgN31Nu/wznOZPKeikgcJtZtbvPKBz0t802XWqfSQnQDt3L6xiAE5JLlfuw==
   dependencies:
-    "@puppeteer/browsers" "2.2.1"
+    "@puppeteer/browsers" "2.2.2"
     chromium-bidi "0.5.17"
     debug "4.3.4"
     devtools-protocol "0.0.1262051"
     ws "8.16.0"
 
 puppeteer@^22.0.0:
-  version "22.6.4"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-22.6.4.tgz#478028ff522e51b5456d9c4a2a0df6ee3a5b2a72"
-  integrity sha512-J9hXNwZmuqKDmNMj6kednZH8jzbdX9735NQfQJrq5LRD4nHisAMyW9pCD7glKi+iM7RV9JkesI1MYhdsN+0ZSQ==
+  version "22.6.5"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-22.6.5.tgz#f72246fef1d0e0451f6f79b48087905251fd474b"
+  integrity sha512-YuoRKGj3MxHhUwrey7vmNvU4odGdUdNsj1ee8pfcqQlLWIXfMOXZCAXh8xdzpZESHH3tCGWp2xmPZE8E6iUEWg==
   dependencies:
-    "@puppeteer/browsers" "2.2.1"
+    "@puppeteer/browsers" "2.2.2"
     cosmiconfig "9.0.0"
     devtools-protocol "0.0.1262051"
-    puppeteer-core "22.6.4"
+    puppeteer-core "22.6.5"
 
 qs@6.11.0:
   version "6.11.0"
@@ -9773,27 +9775,28 @@ rollup-plugin-postcss-lit@2.1.0:
     transform-ast "^2.4.4"
 
 rollup@^4.13.0, rollup@^4.4.0:
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.14.2.tgz#992df3c3bb4ca84ce6b00d51aacb1e5a62d0a14c"
-  integrity sha512-WkeoTWvuBoFjFAhsEOHKRoZ3r9GfTyhh7Vff1zwebEFLEFjT1lG3784xEgKiTa7E+e70vsC81roVL2MP4tgEEQ==
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.16.1.tgz#5a60230987fe95ebe68bab517297c116dbb1a88d"
+  integrity sha512-5CaD3MPDlPKfhqzRvWXK96G6ELJfPZNb3LHiZxTHgDdC6jvwfGz2E8nY+9g1ONk4ttHsK1WaFP19Js4PSr1E3g==
   dependencies:
     "@types/estree" "1.0.5"
   optionalDependencies:
-    "@rollup/rollup-android-arm-eabi" "4.14.2"
-    "@rollup/rollup-android-arm64" "4.14.2"
-    "@rollup/rollup-darwin-arm64" "4.14.2"
-    "@rollup/rollup-darwin-x64" "4.14.2"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.14.2"
-    "@rollup/rollup-linux-arm64-gnu" "4.14.2"
-    "@rollup/rollup-linux-arm64-musl" "4.14.2"
-    "@rollup/rollup-linux-powerpc64le-gnu" "4.14.2"
-    "@rollup/rollup-linux-riscv64-gnu" "4.14.2"
-    "@rollup/rollup-linux-s390x-gnu" "4.14.2"
-    "@rollup/rollup-linux-x64-gnu" "4.14.2"
-    "@rollup/rollup-linux-x64-musl" "4.14.2"
-    "@rollup/rollup-win32-arm64-msvc" "4.14.2"
-    "@rollup/rollup-win32-ia32-msvc" "4.14.2"
-    "@rollup/rollup-win32-x64-msvc" "4.14.2"
+    "@rollup/rollup-android-arm-eabi" "4.16.1"
+    "@rollup/rollup-android-arm64" "4.16.1"
+    "@rollup/rollup-darwin-arm64" "4.16.1"
+    "@rollup/rollup-darwin-x64" "4.16.1"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.16.1"
+    "@rollup/rollup-linux-arm-musleabihf" "4.16.1"
+    "@rollup/rollup-linux-arm64-gnu" "4.16.1"
+    "@rollup/rollup-linux-arm64-musl" "4.16.1"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.16.1"
+    "@rollup/rollup-linux-riscv64-gnu" "4.16.1"
+    "@rollup/rollup-linux-s390x-gnu" "4.16.1"
+    "@rollup/rollup-linux-x64-gnu" "4.16.1"
+    "@rollup/rollup-linux-x64-musl" "4.16.1"
+    "@rollup/rollup-win32-arm64-msvc" "4.16.1"
+    "@rollup/rollup-win32-ia32-msvc" "4.16.1"
+    "@rollup/rollup-win32-x64-msvc" "4.16.1"
     fsevents "~2.3.2"
 
 run-parallel@^1.1.9:
@@ -10065,7 +10068,7 @@ socks@^2.7.1:
     ip-address "^9.0.5"
     smart-buffer "^4.2.0"
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
@@ -10166,12 +10169,12 @@ store2@^2.14.2:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.3.tgz#24077d7ba110711864e4f691d2af941ec533deb5"
   integrity sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==
 
-storybook@8.0.8:
-  version "8.0.8"
-  resolved "https://registry.yarnpkg.com/storybook/-/storybook-8.0.8.tgz#1ef69577d8eb174f8d62e1bd3302a9baa157e670"
-  integrity sha512-9gTnnAakJBtMCg8oPGqnpy7g/C3Tj2IWiVflHiFg1SDD9zXBoc4mZhaYPTne4LRBUhXk7XuFagKfiRN2V/MuKA==
+storybook@8.0.9:
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/storybook/-/storybook-8.0.9.tgz#169f0625511f4881046a467b56b196b093176a1c"
+  integrity sha512-/Mvij0Br5bUwJpCvqAUZMEDIWmdRxEyllvVj8Ukw5lIWJePxfpSsz4px5jg9+R6B9tO8sQSqjg4HJvQ/pZk8Tg==
   dependencies:
-    "@storybook/cli" "8.0.8"
+    "@storybook/cli" "8.0.9"
 
 stream-read-all@^3.0.1:
   version "3.0.1"
@@ -10390,20 +10393,20 @@ stylelint-scss@6.2.1, stylelint-scss@^6.0.0:
     postcss-selector-parser "^6.0.15"
     postcss-value-parser "^4.2.0"
 
-stylelint@16.3.1:
-  version "16.3.1"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.3.1.tgz#006cc6cd4bd8e7b3acb1607bb8e8de85121b7847"
-  integrity sha512-/JOwQnBvxEKOT2RtNgGpBVXnCSMBgKOL2k7w0K52htwCyJls4+cHvc4YZgXlVoAZS9QJd2DgYAiRnja96pTgxw==
+stylelint@16.4.0:
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.4.0.tgz#8811005be82ca06224bc9bc3b4cf2fce30b347ae"
+  integrity sha512-uSx7VMuXwLuYcNSIg+0/fFNv0WinsfLAqsVVy7h7p80clKOHiGE8pfY6UjqwylTHiJrRIahTl6a8FPxGezhWoA==
   dependencies:
     "@csstools/css-parser-algorithms" "^2.6.1"
     "@csstools/css-tokenizer" "^2.2.4"
     "@csstools/media-query-list-parser" "^2.1.9"
-    "@csstools/selector-specificity" "^3.0.2"
+    "@csstools/selector-specificity" "^3.0.3"
     "@dual-bundle/import-meta-resolve" "^4.0.0"
     balanced-match "^2.0.0"
     colord "^2.9.3"
     cosmiconfig "^9.0.0"
-    css-functions-list "^3.2.1"
+    css-functions-list "^3.2.2"
     css-tree "^2.3.1"
     debug "^4.3.4"
     fast-glob "^3.3.2"
@@ -10432,7 +10435,7 @@ stylelint@16.3.1:
     strip-ansi "^7.1.0"
     supports-hyperlinks "^3.0.0"
     svg-tags "^1.0.0"
-    table "^6.8.1"
+    table "^6.8.2"
     write-file-atomic "^5.0.1"
 
 stylus-lookup@^5.0.1:
@@ -10499,7 +10502,7 @@ table-layout@^3.0.0:
     typical "^7.1.1"
     wordwrapjs "^5.1.0"
 
-table@^6.8.1:
+table@^6.8.2:
   version "6.8.2"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.2.tgz#c5504ccf201213fa227248bdc8c5569716ac6c58"
   integrity sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==
@@ -10644,9 +10647,9 @@ to-regex-range@^5.0.1:
     is-number "^7.0.0"
 
 tocbot@^4.20.1:
-  version "4.25.0"
-  resolved "https://registry.yarnpkg.com/tocbot/-/tocbot-4.25.0.tgz#bc38aea5ec8f076779bb39636f431b044129a237"
-  integrity sha512-kE5wyCQJ40hqUaRVkyQ4z5+4juzYsv/eK+aqD97N62YH0TxFhzJvo22RUQQZdO3YnXAk42ZOfOpjVdy+Z0YokA==
+  version "4.27.0"
+  resolved "https://registry.yarnpkg.com/tocbot/-/tocbot-4.27.0.tgz#8215d50df66dc6e3b86c8f7b10389b2d6b8bd555"
+  integrity sha512-x3ZPNFPVOYCAyW4CEW8KszGfqB3/fnY1QX1tfUHH1fj1r6I8v0g5w0flNsWf7htZKtzqtdiPqu//II3ngL/WwA==
 
 toidentifier@1.0.1:
   version "1.0.1"
@@ -10841,14 +10844,14 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typescript-eslint@7.7.0:
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/typescript-eslint/-/typescript-eslint-7.7.0.tgz#b755e350dad25bb1e5b3826d11daa973dc0970ac"
-  integrity sha512-wZZ+7mTQJCn4mGAvzdERtL4vwKGM/mF9cMSMeKUllz3Hgbd1Mdd5L60Q+nJmCio9RB4OyMMr0EX4Ry2Q7jiAyw==
+typescript-eslint@7.7.1:
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/typescript-eslint/-/typescript-eslint-7.7.1.tgz#16f82e83bb0955af02f258cb7a9de59e1bfb8706"
+  integrity sha512-ykEBfa3xx3odjZy6GRED4SCPrjo0rgHwstLlEgLX4EMEuv7QeIDSmfV+S6Kk+XkbsYn4BDEcPvsci1X26lRpMQ==
   dependencies:
-    "@typescript-eslint/eslint-plugin" "7.7.0"
-    "@typescript-eslint/parser" "7.7.0"
-    "@typescript-eslint/utils" "7.7.0"
+    "@typescript-eslint/eslint-plugin" "7.7.1"
+    "@typescript-eslint/parser" "7.7.1"
+    "@typescript-eslint/utils" "7.7.1"
 
 typescript@5.4.2:
   version "5.4.2"
@@ -11161,10 +11164,10 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-vite-plugin-dts@3.8.3:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/vite-plugin-dts/-/vite-plugin-dts-3.8.3.tgz#0505bcd07897f06859d5fb8d4b6332022af90ba5"
-  integrity sha512-yRHiRosQw7MXdOhmcrVI+kRiB8YEShbSxnADNteK4eZGdEoyOkMHihvO5XOAVlOq8ng9sIqu8vVefDK1zcj3qw==
+vite-plugin-dts@3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-dts/-/vite-plugin-dts-3.9.0.tgz#d8b44ab1ae99ae1e5f812e7a27ca117592895062"
+  integrity sha512-pwFIEYQ3LZvMafkEGvNnileb6af5JuyZsBfYQrTDYxdeGEy0OS4B4hCsLPo5YGnhK5k9EzyO6BXVO6y+Lt5T2A==
   dependencies:
     "@microsoft/api-extractor" "7.43.0"
     "@rollup/pluginutils" "^5.1.0"
@@ -11174,10 +11177,10 @@ vite-plugin-dts@3.8.3:
     magic-string "^0.30.8"
     vue-tsc "^1.8.27"
 
-vite@5.2.9:
-  version "5.2.9"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.9.tgz#cd9a356c6ff5f7456c09c5ce74068ffa8df743d9"
-  integrity sha512-uOQWfuZBlc6Y3W/DTuQ1Sr+oIXWvqljLvS881SVmAj00d5RdgShLcuXWxseWPd4HXwiYBFW/vXHfKFeqj9uQnw==
+vite@5.2.10:
+  version "5.2.10"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.10.tgz#2ac927c91e99d51b376a5c73c0e4b059705f5bd7"
+  integrity sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==
   dependencies:
     esbuild "^0.20.1"
     postcss "^8.4.38"