diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 88155ca4e6..0000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,6 +0,0 @@
-dist/
-tools/generate-component/boilerplate/
-**/__snapshots__/
-
-# not ignored folders/files
-!.github/
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 72a37f9ac2..0000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,132 +0,0 @@
-{
-  "root": true,
-  "env": {
-    "browser": true,
-    "es2020": true,
-    "node": true
-  },
-  "extends": ["eslint:recommended"],
-  "ignorePatterns": ["**/*.chromatic.stories.*"],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2020
-  },
-  "overrides": [
-    {
-      "files": ["*.js"],
-      "extends": ["prettier"],
-      "rules": {
-        "no-unused-vars": [
-          "error",
-          {
-            "vars": "all",
-            "varsIgnorePattern": "h"
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.ts"],
-      "extends": [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
-        "plugin:lit/recommended",
-        "plugin:lyne/all",
-        "prettier"
-      ],
-      "rules": {
-        "@typescript-eslint/array-type": "error",
-        "@typescript-eslint/consistent-type-imports": "error",
-        "@typescript-eslint/explicit-function-return-type": ["warn", { "allowExpressions": true }],
-        "@typescript-eslint/explicit-member-accessibility": "error",
-        "@typescript-eslint/naming-convention": [
-          "error",
-          {
-            "format": ["PascalCase"],
-            "selector": "interface"
-          },
-          {
-            "format": ["camelCase"],
-            "selector": "default"
-          },
-          {
-            "format": ["camelCase", "UPPER_CASE"],
-            "selector": "variable"
-          },
-          {
-            "format": ["camelCase"],
-            "leadingUnderscore": "allow",
-            "selector": "parameter"
-          },
-          {
-            "format": ["camelCase"],
-            "leadingUnderscore": "require",
-            "modifiers": ["private"],
-            "selector": "memberLike"
-          },
-          {
-            "format": ["PascalCase"],
-            "selector": "typeLike"
-          },
-          {
-            "format": null,
-            "selector": "objectLiteralProperty"
-          }
-        ],
-        // TODO: Remove this after fixing issues
-        "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-unused-vars": [
-          "error",
-          {
-            "args": "all",
-            "argsIgnorePattern": "^_"
-          }
-        ],
-        "@typescript-eslint/no-use-before-define": "error",
-        // TODO: Remove this after fixing issues
-        "@typescript-eslint/no-var-requires": "off",
-        // TODO: Evaluate this rule
-        "@typescript-eslint/semi": "error",
-
-        "import/first": "error",
-        "import/no-absolute-path": "error",
-        "import/no-cycle": "error",
-        "import/no-self-import": "error",
-        "import/no-unresolved": [
-          "error",
-          {
-            "ignore": [
-              "\\.md\\?raw$",
-              "\\.svg\\?raw$",
-              "\\.scss\\?lit\\&inline",
-              // Broken. Maybe due to commonjs?
-              "@storybook/addon-actions/decorator"
-            ]
-          }
-        ],
-        "import/no-useless-path-segments": "error",
-        "import/order": [
-          "error",
-          {
-            "alphabetize": { "order": "asc", "caseInsensitive": true },
-            "newlines-between": "always"
-          }
-        ],
-        // TODO Discuss this with the team
-        "lit/no-invalid-html": "off",
-        "camelcase": "off"
-      }
-    },
-    {
-      "files": ["*.yaml", "*.yml"],
-      "plugins": ["yaml"]
-    },
-    {
-      "files": ["*.stories.ts"],
-      "rules": {
-        "@typescript-eslint/naming-convention": "off"
-      }
-    }
-  ]
-}
diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
index 1f7b203056..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
@@ -30,11 +30,11 @@ body:
     attributes:
       label: Bug type
       options:
-        - 'Functionality'
-        - 'Accessibility'
-        - 'Performance'
-        - 'Security vulnerability'
-        - 'Other'
+        - Functionality
+        - Accessibility
+        - Performance
+        - Security vulnerability
+        - Other
     validations:
       required: true
   - type: dropdown
@@ -42,10 +42,10 @@ body:
     attributes:
       label: It affects the following packages
       options:
-        - 'Design Tokens'
-        - 'Components'
-        - 'Both'
-        - 'Other'
+        - Design Tokens
+        - Components
+        - Both
+        - Other
     validations:
       required: true
   - type: input
@@ -78,9 +78,9 @@ body:
     attributes:
       label: Input mode
       options:
-        - 'Mouse/Keyboard'
-        - 'Touch'
-        - 'Other'
+        - Mouse/Keyboard
+        - Touch
+        - Other
     validations:
       required: false
   - type: input
diff --git a/.github/ISSUE_TEMPLATE/contributing-request.yml b/.github/ISSUE_TEMPLATE/contributing-request.yml
index 656e4f12fd..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
@@ -25,8 +25,8 @@ body:
     attributes:
       label: Contribution type
       options:
-        - 'Contribute a new component'
-        - 'Contribute an enhancement of a component'
+        - Contribute a new component
+        - Contribute an enhancement of a component
     validations:
       required: true
   - type: dropdown
@@ -34,10 +34,10 @@ body:
     attributes:
       label: It affects the following packages
       options:
-        - 'Design Tokens'
-        - 'Components'
+        - Design Tokens
+        - Components
         - 'Design Tokens & Components'
-        - 'Other'
+        - Other
     validations:
       required: true
   - type: textarea
diff --git a/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.yml b/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.yml
index 6e96309805..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
@@ -25,8 +25,8 @@ body:
     attributes:
       label: Request type
       options:
-        - 'Request for a new component'
-        - 'Request for enhancement of a component'
+        - Request for a new component
+        - Request for enhancement of a component
     validations:
       required: true
   - type: dropdown
@@ -34,10 +34,10 @@ body:
     attributes:
       label: It affects the following packages
       options:
-        - 'Design Tokens'
-        - 'Components'
+        - Design Tokens
+        - Components
         - 'Design Tokens & Components'
-        - 'Other'
+        - Other
     validations:
       required: true
   - type: textarea
diff --git a/.github/ISSUE_TEMPLATE/question.yml b/.github/ISSUE_TEMPLATE/question.yml
index 4e94fd1545..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
@@ -25,10 +25,10 @@ body:
     attributes:
       label: It affects the following packages
       options:
-        - 'Design Tokens'
-        - 'Components'
+        - Design Tokens
+        - Components
         - 'Design Tokens & Components'
-        - 'Other'
+        - Other
     validations:
       required: true
   - type: input
diff --git a/.github/ISSUE_TEMPLATE/story.yml b/.github/ISSUE_TEMPLATE/story.yml
index 546f5d2d44..3a29b83af5 100644
--- a/.github/ISSUE_TEMPLATE/story.yml
+++ b/.github/ISSUE_TEMPLATE/story.yml
@@ -1,7 +1,7 @@
 name: '[Internal] Story'
 description: An internal story for lyne-components
 title: 'story(COMPONENT): TITLE'
-labels: ['story', 'to-refine']
+labels: [story, to-refine]
 body:
   - type: textarea
     id: description
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/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index 1e3d5bd69a..5ba4456c20 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -9,7 +9,7 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: 'CodeQL'
+name: CodeQL
 
 on:
   push:
@@ -32,7 +32,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: ['javascript']
+        language: [javascript]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
         # Learn more:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
@@ -63,7 +63,7 @@ jobs:
       #    and modify them (or add more) to build your code if your project
       #    uses a compiled language
 
-      #- run: |
+      # - run: |
       #   make bootstrap
       #   make release
 
diff --git a/.github/workflows/continuous-integration-secure.yml b/.github/workflows/continuous-integration-secure.yml
index 59f75244fe..13262d420b 100644
--- a/.github/workflows/continuous-integration-secure.yml
+++ b/.github/workflows/continuous-integration-secure.yml
@@ -5,7 +5,7 @@ name: Continuous Integration Secure
 # https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
 on:
   workflow_run:
-    workflows: ['Continuous Integration']
+    workflows: [Continuous Integration]
     types: [completed]
 
 permissions:
@@ -73,7 +73,7 @@ jobs:
         # This label is used for filtering deployments in ArgoCD
         uses: actions-ecosystem/action-add-labels@v1
         with:
-          labels: 'preview-available'
+          labels: preview-available
           number: ${{ env.PR_NUMBER }}
 
   codecov:
diff --git a/.github/workflows/continuous-integration.yml b/.github/workflows/continuous-integration.yml
index 4ce6272a57..2beaf55455 100644
--- a/.github/workflows/continuous-integration.yml
+++ b/.github/workflows/continuous-integration.yml
@@ -14,8 +14,8 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: .nvmrc
+          cache: yarn
       - run: yarn install --frozen-lockfile --non-interactive
 
       - name: Run eslint
@@ -27,8 +27,8 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: .nvmrc
+          cache: yarn
       - run: yarn install --frozen-lockfile --non-interactive
 
       - name: 'Integrity: Verify workspace integrity'
@@ -42,8 +42,8 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: .nvmrc
+          cache: yarn
       - run: yarn install --frozen-lockfile --non-interactive
 
       - name: Install browser dependencies
@@ -52,7 +52,7 @@ jobs:
         run: yarn test
         env:
           NODE_ENV: production
-      - name: 'Assert no new snapshots (run `yarn test --ci` if this fails)'
+      - name: Assert no new snapshots (run `yarn test --ci` if this fails)
         run: git diff --exit-code
       - name: Store coverage
         if: github.event_name == 'pull_request'
@@ -67,8 +67,8 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: .nvmrc
+          cache: yarn
       - run: yarn install --frozen-lockfile --non-interactive
 
       - name: Run build
@@ -124,8 +124,8 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: .nvmrc
+          cache: yarn
       - run: yarn install --frozen-lockfile --non-interactive
       - name: Generate chromatic stories
         run: yarn generate:chromatic-stories
diff --git a/.github/workflows/pr-title-lint.yml b/.github/workflows/pr-title-lint.yml
index 899464c057..0df1b2d696 100644
--- a/.github/workflows/pr-title-lint.yml
+++ b/.github/workflows/pr-title-lint.yml
@@ -12,8 +12,8 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: .nvmrc
+          cache: yarn
       - run: yarn install --frozen-lockfile --non-interactive
 
       - name: 'Lint: Pull request title'
diff --git a/.github/workflows/preview-image-cleanup.yml b/.github/workflows/preview-image-cleanup.yml
index 2fc3e88cf7..3a9a8df931 100644
--- a/.github/workflows/preview-image-cleanup.yml
+++ b/.github/workflows/preview-image-cleanup.yml
@@ -56,6 +56,6 @@ jobs:
             }
       - uses: actions/delete-package-versions@v4
         with:
-          package-name: 'lyne-components/storybook-preview'
-          package-type: 'container'
+          package-name: lyne-components/storybook-preview
+          package-type: container
           delete-only-untagged-versions: 'true'
diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
index edc545ff6b..21720da636 100644
--- a/.github/workflows/release-please.yml
+++ b/.github/workflows/release-please.yml
@@ -43,8 +43,8 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: .nvmrc
+          cache: yarn
           registry-url: 'https://registry.npmjs.org'
           scope: sbb-esta
       - run: yarn install --frozen-lockfile --non-interactive
@@ -106,8 +106,8 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: .nvmrc
+          cache: yarn
       - run: yarn install --frozen-lockfile --non-interactive
 
       - name: Run build
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 58377756ca..3def8b8f00 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -18,7 +18,7 @@ const config: StorybookConfig = {
         sourcemap: false,
         rollupOptions: {
           output: {
-            manualChunks(id) {
+            manualChunks(_id) {
               return 'main';
             },
           },
diff --git a/.storybook/manager.js b/.storybook/manager.js
index 4f0c473d27..2367745518 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -1,5 +1,5 @@
 import { addons } from '@storybook/manager-api';
-import theme from './theme';
+import theme from './theme.js';
 
 addons.setConfig({
   enableShortcuts: false,
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 a7d7e6cef7..6a1becce36 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,14 +1,21 @@
-import { html, nothing } from 'lit';
-import isChromatic from 'chromatic';
-import type { Decorator } from '@storybook/web-components';
 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) => key.replace(/(^SbbBreakpoint|Min$)/g, '').toLowerCase();
+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:
@@ -45,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.
@@ -64,7 +79,10 @@ export const parameters = {
 };
 
 export const decorators: Decorator[] = [
-  (story) => html`
-    <div class=${isChromatic() ? 'sbb-disable-animation' : nothing}>${story()}</div>
-  `,
+  (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 a8ab04507b..2940ed8bea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,86 @@
 
 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)
+
+
+### Bug Fixes
+
+* update import paths missed in the migration ([#2579](https://github.com/lyne-design-system/lyne-components/issues/2579)) ([9c90fa8](https://github.com/lyne-design-system/lyne-components/commit/9c90fa88f83978bc163ab886b968cff13327ed9b))
+
+## [0.50.0](https://github.com/lyne-design-system/lyne-components/compare/v0.49.0...v0.50.0) (2024-04-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* The entry points for the `@sbb-esta/lyne-components` have changed from extension-less to including the extension (e.g. `@sbb-esta/lyne-components/button` to `@sbb-esta/lyne-components/button.js`).
+* **sbb-dialog:** The `sbb-dialog` component now needs the dedicated inner elements `sbb-dialog-title`, `sbb-dialog-content`, and `sbb-dialog-actions`. Use these components to respectively provide a title, a content and, optionally, a footer with an action group. Moreover, the full-screen variant (which occurred when no title was provided to the dialog) has been removed. To achieve a full-screen overlay, please use the new `sbb-overlay` component. As a migration help, consider the following example. Old: ```<sbb-dialog title-content="Title"><p>Dialog content.</p><sbb-action-group slot="action-group">...</sbb-action-group></sbb-dialog>```. New: ```<sbb-dialog><sbb-dialog-title>Title</sbb-dialog-title><sbb-dialog-content><p>Dialog content</p></sbb-dialog-content><sbb-dialog-actions>...</sbb-dialog-actions></sbb-dialog>```. Previously, a full-screen dialog was displayed if no title was provided to the dialog component: ```<sbb-dialog><p>Dialog content.</p></sbb-dialog>```. To achieve the same, it is now mandatory to use the `sbb-overlay` component: ```<sbb-overlay><p>Overlay content.</p></sbb-overlay>```.
+* Changed several internal class names. Consumers shouldn't be affected.
+* **sbb-form-field:** The css var `--sbb-form-field-height` has been renamed to `--sbb-form-field-min-height`.
+
+### Features
+
+* **button:** implemented size 'S' ([#2544](https://github.com/lyne-design-system/lyne-components/issues/2544)) ([396d4dc](https://github.com/lyne-design-system/lyne-components/commit/396d4dc00749c1335ec86128571ac31b2a8f875f))
+* provide full font characters set as alternative ([#2573](https://github.com/lyne-design-system/lyne-components/issues/2573)) ([4047883](https://github.com/lyne-design-system/lyne-components/commit/40478831addeb79dc92cabc52b9d0665dd37a195))
+* **sbb-form-field:** support the textarea inside the `&lt;sbb-form-field&gt;` ([#2506](https://github.com/lyne-design-system/lyne-components/issues/2506)) ([f8316f0](https://github.com/lyne-design-system/lyne-components/commit/f8316f074a36fe91c46d36ace2f5ebb2194e1e3a)), closes [#2497](https://github.com/lyne-design-system/lyne-components/issues/2497)
+* **sbb-overlay:** extract `sbb-overlay` component from dialog ([#2477](https://github.com/lyne-design-system/lyne-components/issues/2477)) ([5ea4fb7](https://github.com/lyne-design-system/lyne-components/commit/5ea4fb79c98495cf7859c99a3b16778a633c81d7)), closes [#2476](https://github.com/lyne-design-system/lyne-components/issues/2476) [#2470](https://github.com/lyne-design-system/lyne-components/issues/2470)
+* **sbb-sticky-bar:** allow configuration of z-index ([#2566](https://github.com/lyne-design-system/lyne-components/issues/2566)) ([20a98b2](https://github.com/lyne-design-system/lyne-components/commit/20a98b2c126c4eccfc15c039b13da57df717a1e3))
+* update size tokens ([#2551](https://github.com/lyne-design-system/lyne-components/issues/2551)) ([74d8929](https://github.com/lyne-design-system/lyne-components/commit/74d892927ff7d52536833e5502b31078716fbeac))
+
+
+### Bug Fixes
+
+* fix boolean handling in react wrapper ([#2547](https://github.com/lyne-design-system/lyne-components/issues/2547)) ([e4ba04b](https://github.com/lyne-design-system/lyne-components/commit/e4ba04b8144b2fa391cf9b406df28033832d319c))
+* **sbb-calendar:** align month view label ([#2564](https://github.com/lyne-design-system/lyne-components/issues/2564)) ([0215e00](https://github.com/lyne-design-system/lyne-components/commit/0215e00d9aad145b1f5d26b1b00470c79c8e8640))
+* **sbb-dialog:** fix accessibility with option to hide the header on scroll ([159f536](https://github.com/lyne-design-system/lyne-components/commit/159f536b429350ac54cd28bd55cb63754a423a11))
+* **sbb-dialog:** fix z-index ([#2572](https://github.com/lyne-design-system/lyne-components/issues/2572)) ([374d7b7](https://github.com/lyne-design-system/lyne-components/commit/374d7b7ed88ef2e97656417e6266ac20a11d1881))
+* **sbb-form-error:** fix internal css variable name ([#2558](https://github.com/lyne-design-system/lyne-components/issues/2558)) ([cc275af](https://github.com/lyne-design-system/lyne-components/commit/cc275afb7fc8066723738bebaf3f61fb90bdf22e))
+* set colspan properly ([0215e00](https://github.com/lyne-design-system/lyne-components/commit/0215e00d9aad145b1f5d26b1b00470c79c8e8640))
+* use valid import/export syntax ([#2563](https://github.com/lyne-design-system/lyne-components/issues/2563)) ([585cfc5](https://github.com/lyne-design-system/lyne-components/commit/585cfc52091a66c4da7d88fb781a7d419cc35ff0))
+
+
+### Code Refactoring
+
+* re-structure common behaviors ([#2533](https://github.com/lyne-design-system/lyne-components/issues/2533)) ([906d576](https://github.com/lyne-design-system/lyne-components/commit/906d5764b113a725c064d695e8e997f83c9628f4)), closes [#2534](https://github.com/lyne-design-system/lyne-components/issues/2534)
+* restructure entry points ([#2575](https://github.com/lyne-design-system/lyne-components/issues/2575)) ([3d4c8ab](https://github.com/lyne-design-system/lyne-components/commit/3d4c8ab34f63315548009c31920d89ce8235024f))
+
+## [0.49.0](https://github.com/lyne-design-system/lyne-components/compare/v0.48.3...v0.49.0) (2024-03-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* **sbb-form-field:** `label` property and attribute of `<sbb-form-field>` was removed. Use `<label>` tag inside `<sbb-form-field>` to provide the label information. E.g. `<sbb-form-field label="Example">...</sbb-form-field>` becomes `<sbb-form-field><label>Example</label>...</sbb-form-field>`
+* renamed component `sbb-screenreader-only` to `sbb-screeen-reader-only`.
+* **sbb-calendar:** The `SbbDatepicker` property `selectedDate` has been renamed to `selected`. This also applies to the attribute `selected-date`, which has been renamed to `selected`. Additionally the `DateAdapter` (and `NativeDateAdapter`) have been superficially refactored. An important change is that the month is now `1`-based, instead of `0`-based.
+
+### Features
+
+* implement experimental support for server side rendering (SSR) ([#2466](https://github.com/lyne-design-system/lyne-components/issues/2466)) ([3abcc68](https://github.com/lyne-design-system/lyne-components/commit/3abcc6827a3152c7216c3a2178e63a19f96ba22b))
+
+
+### Bug Fixes
+
+* fix scrollbar styles for Chrome ([#2524](https://github.com/lyne-design-system/lyne-components/issues/2524)) ([1266a21](https://github.com/lyne-design-system/lyne-components/commit/1266a2197237eee1712896b7e5959658a3956193))
+* **sbb-button:** remove gap for hidden icons in icon slot ([#2526](https://github.com/lyne-design-system/lyne-components/issues/2526)) ([433c57c](https://github.com/lyne-design-system/lyne-components/commit/433c57c5c5533ebb6409d3be5c47fec1fdd3aac6))
+* **sbb-form-field:** remove label property and attribute ([#2523](https://github.com/lyne-design-system/lyne-components/issues/2523)) ([602064c](https://github.com/lyne-design-system/lyne-components/commit/602064c3d0ff4092c94b8faec4f95c1c1ae3bbb0))
+* stories with label bold for sbb-checkbox and sbb-radio-button ([#2528](https://github.com/lyne-design-system/lyne-components/issues/2528)) ([9e85be5](https://github.com/lyne-design-system/lyne-components/commit/9e85be5d1c63c309e583402162f67e59e78bb897))
+
+
+### Code Refactoring
+
+* rename component name from `sbb-screenreader-only` to `sbb-screeen-reader-only` ([#2520](https://github.com/lyne-design-system/lyne-components/issues/2520)) ([6fbf085](https://github.com/lyne-design-system/lyne-components/commit/6fbf085dab84d64acac5151ed09dd29a8bc3d034))
+* **sbb-calendar:** implement initial support for other date libraries ([6d4e9c2](https://github.com/lyne-design-system/lyne-components/commit/6d4e9c2d22ae9cdf4d2ea73cbca650fd6d3ec4c2))
+
 ## [0.48.3](https://github.com/lyne-design-system/lyne-components/compare/v0.48.2...v0.48.3) (2024-03-21)
 
 
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/config/custom-elements-manifest.config.js b/config/custom-elements-manifest.config.js
deleted file mode 100644
index fb19700740..0000000000
--- a/config/custom-elements-manifest.config.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Docs: https://custom-elements-manifest.open-wc.org/analyzer/getting-started/
- */
-export default {
-  litelement: true,
-  globs: ['src/components/**/*.ts'],
-  exclude: ['**/*.spec.ts', '**/*.e2e.ts', '**/*.stories.ts'],
-  outdir: 'dist/components',
-  dependencies: false,
-  packagejson: false,
-  plugins: [
-    {
-      analyzePhase({ ts, node, moduleDoc }) {
-        if (ts.isNewExpression(node) && node.expression.getText() === 'NamedSlotStateController') {
-          let classNode = node;
-          while (classNode) {
-            if (ts.isClassDeclaration(classNode)) {
-              const className = classNode.name.getText();
-              const classDoc = moduleDoc.declarations.find(
-                (declaration) => declaration.name === className,
-              );
-              classDoc['_ssrslotstate'] = true;
-            }
-            classNode = classNode.parent;
-          }
-        }
-      },
-      packageLinkPhase({ customElementsManifest }) {
-        for (const module of customElementsManifest.modules) {
-          module.path = module.path.replace(/^src\/components\//, '').replace(/\/[^/.]+.ts$/, '');
-          for (const declaration of module.declarations.filter((d) => d.kind === 'class')) {
-            for (const member of declaration.members) {
-              if (member.name.startsWith('_') && member.default) {
-                const publicName = member.name.replace(/^_/, '');
-                const publicMember = declaration.members.find((m) => m.name === publicName);
-                if (publicMember) {
-                  publicMember.default = member.default;
-                }
-              }
-            }
-          }
-        }
-      },
-    },
-  ],
-};
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 75%
rename from CODING_STANDARDS.md
rename to docs/CODING_STANDARDS.md
index a6d8c851c7..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,17 +91,17 @@ 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
-import { SbbButtonBaseElement } from '../../core/common-behaviors';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
 import { html } from 'lit';
 
 @customElement('my-custom-button')
@@ -129,14 +129,14 @@ 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 { LanguageController } from '../core/common-behaviors';
+import { SbbLanguageController } from '../core/controllers.js';
 
 export class Component extends LitElement {
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   protected override render(): TemplateResult {
     return html` ... ${i18nExample[this._language.current]} ... `;
@@ -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 86%
rename from REVIEW.md
rename to docs/REVIEW.md
index f9ccfa9105..502040af2c 100644
--- a/REVIEW.md
+++ b/docs/REVIEW.md
@@ -19,14 +19,16 @@ For progress indication, we use labels to indicate a specific expectation:
 - When a pull request is reviewed by a lead developer, the label "pr: lead review approved" is automatically added and the label "pr: lead review required" is removed
 - When a pull request should be reviewed by UX, the label "pr: ux review required" should be added
 - When a pull request is reviewed by UX, the label "pr: ux review approved" is automatically added and the label "pr: ux review required" is removed
+- When a pull request should be reviewed by an accessibility expert, the label "pr: a11y review required" should be added
+- When a pull request is reviewed by an accessibility expert, the label "pr: a11y review approved" can manually be added and "pr: a11y review required" can manually be removed
 - When a pull request should not be considered/merged/reviewed, add the label "pr: blocked"
 
 ## 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
 
@@ -36,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)?
@@ -71,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?
 
@@ -81,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/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000000..673978b295
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,149 @@
+// @ts-check
+import 'tsx';
+
+import { FlatCompat } from '@eslint/eslintrc';
+
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintPluginYml from 'eslint-plugin-yml';
+import eslint from '@eslint/js';
+const eslintPluginLyne = await import('./tools/eslint/index.ts');
+
+const compat = new FlatCompat({
+  baseDirectory: import.meta.resolve('.'),
+});
+
+/** @type {import('@typescript-eslint/utils').TSESLint.FlatConfig.ConfigFile} */
+export default [
+  {
+    settings: {
+      'import-x/resolver': {
+        typescript: true,
+      },
+    },
+  },
+  {
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.node },
+    },
+  },
+  {
+    ignores: [
+      '**/*.chromatic.stories.*',
+      'dist/**/*',
+      'coverage/**/*',
+      'tools/generate-component/boilerplate/**/*',
+      '**/__snapshots__/**/*',
+    ],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...eslintPluginYml.configs['flat/standard'],
+  ...eslintPluginYml.configs['flat/prettier'],
+  ...compat.extends(
+    'plugin:lit/recommended',
+    'plugin:import-x/recommended',
+    'plugin:import-x/typescript',
+  ),
+  eslintPluginLyne.default.configs.recommended,
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@typescript-eslint/array-type': 'error',
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/explicit-function-return-type': ['warn', { allowExpressions: true }],
+      '@typescript-eslint/explicit-member-accessibility': 'error',
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          format: ['PascalCase'],
+          selector: 'interface',
+        },
+        {
+          format: ['camelCase'],
+          selector: 'default',
+        },
+        {
+          format: ['camelCase', 'UPPER_CASE'],
+          selector: 'variable',
+        },
+        {
+          format: ['camelCase'],
+          leadingUnderscore: 'allow',
+          selector: 'parameter',
+        },
+        {
+          format: ['camelCase'],
+          leadingUnderscore: 'require',
+          modifiers: ['private'],
+          selector: 'memberLike',
+        },
+        {
+          format: ['PascalCase'],
+          selector: 'typeLike',
+        },
+        {
+          format: null,
+          selector: 'objectLiteralProperty',
+        },
+      ],
+      // TODO: Remove this after fixing issues
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+        },
+      ],
+      '@typescript-eslint/no-use-before-define': 'error',
+      // TODO: Evaluate this rule
+      '@typescript-eslint/semi': 'error',
+
+      'import-x/first': 'error',
+      'import-x/no-absolute-path': 'error',
+      'import-x/no-cycle': 'error',
+      'import-x/no-self-import': 'error',
+      'import-x/no-unresolved': [
+        'error',
+        {
+          ignore: [
+            '\\.md\\?raw$',
+            '\\.svg\\?raw$',
+            '\\.scss\\?lit\\&inline',
+            // Broken. Maybe due to commonjs?
+            '@storybook/addon-actions/decorator',
+          ],
+        },
+      ],
+      'import-x/no-useless-path-segments': 'error',
+      'import-x/order': [
+        'error',
+        {
+          alphabetize: { order: 'asc', caseInsensitive: true },
+          'newlines-between': 'always',
+        },
+      ],
+      // TODO Discuss this with the team
+      'lit/no-invalid-html': 'off',
+      camelcase: 'off',
+    },
+  },
+  {
+    files: ['**/*.stories.ts'],
+    rules: {
+      '@typescript-eslint/naming-convention': 'off',
+    },
+  },
+  {
+    files: ['**/*.js'],
+    rules: {
+      'import-x/namespace': 'off',
+      'import-x/default': 'off',
+      'import-x/no-named-as-default': 'off',
+      'import-x/no-named-as-default-member': 'off',
+    },
+  },
+  eslintConfigPrettier,
+];
diff --git a/package.json b/package.json
index e6c772b89f..ed87b02935 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-components",
-  "version": "0.48.3",
+  "version": "0.50.2",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -21,12 +21,16 @@
   "private": true,
   "scripts": {
     "postinstall": "yarn playwright install",
-    "build:components": "vite build --config src/components/vite.config.ts",
-    "build:react": "vite build --config src/react/vite.config.ts",
+    "build:components": "npm-run-all --sequential build:components:*",
+    "build:components:production": "vite build --config src/components/vite.config.ts",
+    "build:components:development": "NODE_ENV=development vite build --mode development --config src/components/vite.config.ts",
+    "build:react": "npm-run-all --sequential build:react:*",
+    "build:react:production": "vite build --config src/react/vite.config.ts",
+    "build:react:development": "NODE_ENV=development vite build --mode development --config src/react/vite.config.ts",
     "build:storybook": "storybook build --quiet --output-dir dist/storybook --stats-json",
     "build": "npm-run-all --sequential build:components build:react build:storybook",
     "docs": "npm-run-all --sequential docs:manifest docs:to-md",
-    "docs:manifest": "custom-elements-manifest analyze --config config/custom-elements-manifest.config.js",
+    "docs:manifest": "custom-elements-manifest analyze --config tools/manifest/custom-elements-manifest.config.js",
     "docs:to-md": "tsx scripts/docs_generate.ts",
     "format": "prettier \"**/*\" --write --ignore-unknown",
     "generate": "tsx tools/generate-component/index.mts",
@@ -38,8 +42,8 @@
     "lint:js": "eslint \"**/*.js\"",
     "lint:yml": "eslint \"**/*.{yml,yaml}\"",
     "lint:styles": "stylelint \"**/*.scss\"",
-    "lint:lit": "yarn lit-analyzer \"src/components/**/*.ts\"",
-    "lint:circular-imports": "madge --circular --extensions 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",
     "lint:tsc:components-spec": "tsc --noEmit --project src/components/tsconfig.spec.json",
@@ -49,120 +53,87 @@
     "test:csr": "wtr --group default",
     "test:ssr:hydrated": "wtr --group e2e-ssr-hydrated",
     "test:ssr:non-hydrated": "wtr --group e2e-ssr-non-hydrated",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "dependencies": {
-    "lit": "3.1.2"
+    "lit": "3.1.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.2.1",
-    "@commitlint/config-conventional": "19.1.0",
+    "@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.1.1",
     "@lit-labs/testing": "0.2.3",
-    "@lit/react": "^1.0.1",
+    "@lit/react": "1.0.4",
     "@open-wc/lit-helpers": "0.7.0",
     "@open-wc/testing": "4.0.0",
-    "@sbb-esta/lyne-design-tokens": "0.4.1",
-    "@storybook/addon-a11y": "8.0.4",
-    "@storybook/addon-actions": "8.0.4",
-    "@storybook/addon-essentials": "8.0.4",
-    "@storybook/addon-interactions": "8.0.4",
-    "@storybook/addon-links": "8.0.4",
-    "@storybook/blocks": "8.0.4",
-    "@storybook/test": "8.0.4",
-    "@storybook/web-components": "8.0.4",
-    "@storybook/web-components-vite": "8.0.4",
+    "@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.4",
-    "@types/node": "20.11.30",
-    "@types/react": "18.2.72",
-    "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "7.4.0",
-    "@typescript-eslint/parser": "7.4.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.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",
     "@web/test-runner-puppeteer": "0.16.0",
-    "chromatic": "11.2.0",
-    "custom-elements-manifest": "^2.0.0",
+    "chromatic": "11.3.0",
+    "custom-elements-manifest": "2.0.0",
     "date-fns": "3.6.0",
-    "esbuild-sass-plugin": "^3.1.0",
-    "eslint": "8.57.0",
+    "esbuild-sass-plugin": "3.2.0",
+    "eslint": "9.1.1",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "npm:eslint-plugin-i@latest",
+    "eslint-import-resolver-typescript": "3.6.1",
+    "eslint-plugin-import-x": "0.5.0",
     "eslint-plugin-lit": "1.11.0",
-    "eslint-plugin-lyne": "file:tools/eslint/link/",
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-yaml": "0.5.0",
-    "glob": "10.3.10",
+    "eslint-plugin-yml": "1.14.0",
+    "glob": "10.3.12",
+    "globals": "15.0.0",
     "husky": "9.0.11",
     "lint-staged": "15.2.2",
     "lit-analyzer": "2.0.3",
-    "madge": "6.1.0",
+    "madge": "7.0.0",
     "npm-run-all2": "6.1.2",
-    "playwright": "^1.41.1",
+    "playwright": "1.43.1",
     "postcss": "8.4.38",
     "prettier": "3.2.5",
     "react": "18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "18.2.0",
     "rollup-plugin-postcss-lit": "2.1.0",
-    "sass": "1.72.0",
+    "sass": "1.75.0",
     "sinon": "17.0.1",
-    "standard-version": "^9.5.0",
-    "storybook": "8.0.4",
-    "stylelint": "16.3.1",
+    "storybook": "8.0.9",
+    "stylelint": "16.4.0",
     "stylelint-config-prettier-scss": "1.0.0",
-    "stylelint-config-standard-scss": "12.0.0",
+    "stylelint-config-standard-scss": "13.1.0",
     "stylelint-scss": "6.2.1",
     "ts-lit-plugin": "2.0.2",
-    "tsx": "4.7.1",
-    "typescript": "5.4.3",
-    "vite": "5.2.6",
-    "vite-plugin-dts": "3.7.3"
+    "tsx": "4.7.2",
+    "typescript": "5.4.5",
+    "typescript-eslint": "7.7.1",
+    "vite": "5.2.10",
+    "vite-plugin-dts": "3.9.0"
   },
   "resolutions": {
-    "@types/node": "20.11.30",
+    "@types/node": "20.12.7",
     "@webcomponents/template-shadowroot": "0.2.1",
     "jackspeak": "2.1.1",
-    "lit": "3.1.2"
-  },
-  "standard-version": {
-    "types": [
-      {
-        "type": "feat",
-        "section": "Features"
-      },
-      {
-        "type": "fix",
-        "section": "Bug Fixes"
-      },
-      {
-        "type": "chore",
-        "hidden": true
-      },
-      {
-        "type": "docs",
-        "section": "Documentation"
-      },
-      {
-        "type": "style",
-        "section": "Bug Fixes"
-      },
-      {
-        "type": "refactor",
-        "section": "Refactorings"
-      },
-      {
-        "type": "perf",
-        "hidden": "Performance"
-      },
-      {
-        "type": "test",
-        "hidden": true
-      }
-    ]
+    "lit": "3.1.3"
   },
   "prettier": {
     "singleQuote": true,
@@ -179,5 +150,12 @@
     "*.{js,ts,css,scss,json,md,html,yaml,yml}": [
       "prettier --write"
     ]
+  },
+  "madge": {
+    "detectiveOptions": {
+      "ts": {
+        "skipTypeImports": true
+      }
+    }
   }
 }
diff --git a/renovate.json b/renovate.json
index c1d007131f..c38f4d2d5a 100644
--- a/renovate.json
+++ b/renovate.json
@@ -39,7 +39,7 @@
     },
     {
       "groupName": "commitlint",
-      "matchPackagePrefixes": ["@commitlint/", "standard-version"]
+      "matchPackagePrefixes": ["@commitlint/"]
     },
     {
       "groupName": "stylelint",
diff --git a/scripts/chromatic-stories-generator.ts b/scripts/chromatic-stories-generator.ts
index 0151c631b8..f2b15b9840 100644
--- a/scripts/chromatic-stories-generator.ts
+++ b/scripts/chromatic-stories-generator.ts
@@ -1,3 +1,4 @@
+/* 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';
@@ -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/clean-storybook-files.cjs b/scripts/clean-storybook-files.cjs
index fa2782a4d3..a873ad0ff9 100644
--- a/scripts/clean-storybook-files.cjs
+++ b/scripts/clean-storybook-files.cjs
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const fs = require('fs'),
   path = require('path'),
   allowedExtensions =
diff --git a/scripts/docs_generate.ts b/scripts/docs_generate.ts
index 06862deb70..6736f5be46 100644
--- a/scripts/docs_generate.ts
+++ b/scripts/docs_generate.ts
@@ -1,6 +1,7 @@
 /**
  * Docs: https://github.com/open-wc/custom-elements-manifest/tree/master/packages/to-markdown
  */
+/* eslint-disable import-x/namespace, import-x/default, import-x/no-named-as-default, import-x/no-named-as-default-member */
 import fs from 'fs';
 
 import { customElementsManifestToMarkdown } from '@custom-elements-manifest/to-markdown';
@@ -10,7 +11,7 @@ import * as glob from 'glob';
 import MagicString from 'magic-string';
 import { format, resolveConfig } from 'prettier';
 
-import componentAnalyzerConfig from '../config/custom-elements-manifest.config';
+import componentAnalyzerConfig from '../tools/manifest/custom-elements-manifest.config.js';
 
 const manifestFilePath = `${componentAnalyzerConfig.outdir}/custom-elements.json`;
 const tempFolderPath = './dist/docs';
diff --git a/scripts/migrate-index.ts b/scripts/migrate-index.ts
new file mode 100644
index 0000000000..0ccbcd4de0
--- /dev/null
+++ b/scripts/migrate-index.ts
@@ -0,0 +1,17 @@
+import { readFileSync, unlinkSync, writeFileSync } from 'fs';
+import { basename, dirname } from 'path';
+
+import * as glob from 'glob';
+
+const indexFiles = glob.sync('**/index.ts', {
+  cwd: dirname(import.meta.resolve('../src/components')),
+  absolute: true,
+});
+for (const indexFile of indexFiles) {
+  const content = readFileSync(indexFile, 'utf8').replaceAll(
+    /from '.([^']+)/g,
+    (_, m) => `from './${basename(dirname(indexFile))}${m.replace(/\/index.js$/, '.js')}`,
+  );
+  unlinkSync(indexFile);
+  writeFileSync(indexFile.replace(/\/index.ts$/, '.ts'), content, 'utf8');
+}
diff --git a/scripts/migrate-ssr-e2e.ts b/scripts/migrate-ssr-e2e.ts
index 14e4250c35..a3e1e8a6c3 100644
--- a/scripts/migrate-ssr-e2e.ts
+++ b/scripts/migrate-ssr-e2e.ts
@@ -1,3 +1,4 @@
+/* eslint-disable import-x/default, import-x/no-named-as-default-member */
 import { readFileSync, writeFileSync } from 'fs';
 import { basename, dirname, join, relative } from 'path';
 
diff --git a/scripts/migrate-toggle-data-entry.ts b/scripts/migrate-toggle-data-entry.ts
index 3dcc4083c1..e47405b523 100644
--- a/scripts/migrate-toggle-data-entry.ts
+++ b/scripts/migrate-toggle-data-entry.ts
@@ -1,3 +1,4 @@
+/* eslint-disable import-x/default, import-x/no-named-as-default-member */
 import { readFileSync, writeFileSync } from 'fs';
 
 import * as glob from 'glob';
diff --git a/src/components/_index.scss b/src/components/_index.scss
index 29dfc8eba8..e74ea44dca 100644
--- a/src/components/_index.scss
+++ b/src/components/_index.scss
@@ -1,2 +1,2 @@
-@forward 'core/styles' hide development-style, host-component-properties, link-base,
-  link-focus-visible, link-hover, link-active, link-consolidation;
+@forward 'core/styles' hide development-style, link-base, link-focus-visible, link-hover,
+  link-active, link-consolidation;
diff --git a/src/components/accordion.ts b/src/components/accordion.ts
new file mode 100644
index 0000000000..313a521974
--- /dev/null
+++ b/src/components/accordion.ts
@@ -0,0 +1 @@
+export * from './accordion/accordion.js';
diff --git a/src/components/accordion/accordion.e2e.ts b/src/components/accordion/accordion.e2e.ts
index b2042552a9..f05739f54b 100644
--- a/src/components/accordion/accordion.e2e.ts
+++ b/src/components/accordion/accordion.e2e.ts
@@ -2,11 +2,14 @@ import { assert, expect } from '@open-wc/testing';
 import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy, isSsr } from '../core/testing';
-import { fixture } from '../core/testing/private';
-import { SbbExpansionPanelElement, type SbbExpansionPanelHeaderElement } from '../expansion-panel';
+import { fixture } from '../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy, isSsr } from '../core/testing.js';
+import {
+  SbbExpansionPanelElement,
+  type SbbExpansionPanelHeaderElement,
+} from '../expansion-panel.js';
 
-import { SbbAccordionElement } from './accordion';
+import { SbbAccordionElement } from './accordion.js';
 
 describe(`sbb-accordion ${fixture.name}`, () => {
   let element: SbbAccordionElement;
@@ -30,7 +33,7 @@ describe(`sbb-accordion ${fixture.name}`, () => {
           </sbb-expansion-panel>
         </sbb-accordion>
       `,
-      { modules: ['./accordion.ts', '../expansion-panel/index.ts'] },
+      { modules: ['./accordion.ts', '../expansion-panel.ts'] },
     );
   });
 
diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
index 41276173c2..16846248ac 100644
--- a/src/components/accordion/accordion.scss
+++ b/src/components/accordion/accordion.scss
@@ -1,5 +1,8 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
+  display: block;
+}
diff --git a/src/components/accordion/accordion.spec.ts b/src/components/accordion/accordion.spec.ts
index f849e765c4..df1697169f 100644
--- a/src/components/accordion/accordion.spec.ts
+++ b/src/components/accordion/accordion.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbAccordionElement } from './accordion';
-import './accordion';
-import '../expansion-panel';
+import type { SbbAccordionElement } from './accordion.js';
+import './accordion.js';
+import '../expansion-panel.js';
 
 describe(`sbb-accordion`, () => {
   let element: SbbAccordionElement;
diff --git a/src/components/accordion/accordion.stories.ts b/src/components/accordion/accordion.stories.ts
index 95765748dd..6e72ca02d8 100644
--- a/src/components/accordion/accordion.stories.ts
+++ b/src/components/accordion/accordion.stories.ts
@@ -11,13 +11,12 @@ 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 '../core/dom';
-import { SbbExpansionPanelElement } from '../expansion-panel';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import { SbbExpansionPanelElement } from '../expansion-panel.js';
 
 import readme from './readme.md?raw';
-import './accordion';
+import './accordion.js';
 
 const numberOfPanels: InputType = {
   control: {
@@ -124,8 +123,8 @@ const defaultArgTypes: ArgTypes = {
 const defaultArgs: Args = {
   numberOfPanels: 3,
   multi: 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,
@@ -177,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 = {
@@ -195,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 = {
@@ -216,21 +215,11 @@ export const Multi: StoryObj = {
   args: { ...defaultArgs, multi: 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 7657dfbbd5..491c194eb5 100644
--- a/src/components/accordion/accordion.ts
+++ b/src/components/accordion/accordion.ts
@@ -2,10 +2,10 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { SbbHydrationMixin } from '../core/common-behaviors';
-import { ConnectedAbortController } from '../core/eventing';
-import { SbbExpansionPanelElement } from '../expansion-panel';
-import type { SbbTitleLevel } from '../title';
+import { SbbConnectedAbortController } from '../core/controllers.js';
+import { SbbHydrationMixin } from '../core/mixins.js';
+import { SbbExpansionPanelElement } from '../expansion-panel.js';
+import type { SbbTitleLevel } from '../title.js';
 
 import style from './accordion.scss?lit&inline';
 
@@ -44,7 +44,7 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
   }
   private _multi: boolean = false;
 
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
 
   private _closePanels(e: CustomEvent): void {
     if ((e.target as HTMLElement)?.tagName !== 'SBB-EXPANSION-PANEL' || this.multi) {
diff --git a/src/components/accordion/index.ts b/src/components/accordion/index.ts
deleted file mode 100644
index ce956fe2eb..0000000000
--- a/src/components/accordion/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './accordion';
diff --git a/src/components/action-group.ts b/src/components/action-group.ts
new file mode 100644
index 0000000000..ccd2e74b2c
--- /dev/null
+++ b/src/components/action-group.ts
@@ -0,0 +1 @@
+export * from './action-group/action-group.js';
diff --git a/src/components/action-group/action-group.e2e.ts b/src/components/action-group/action-group.e2e.ts
index ffb5b8c2fb..7853ca191e 100644
--- a/src/components/action-group/action-group.e2e.ts
+++ b/src/components/action-group/action-group.e2e.ts
@@ -1,15 +1,15 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbSecondaryButtonElement } from '../button';
-import { waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
-import type { SbbBlockLinkElement } from '../link';
+import type { SbbSecondaryButtonElement } from '../button.js';
+import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
+import type { SbbBlockLinkElement } from '../link.js';
 
-import { SbbActionGroupElement } from './action-group';
+import { SbbActionGroupElement } from './action-group.js';
 
-import '../button/secondary-button';
-import '../link/block-link';
+import '../button/secondary-button.js';
+import '../link/block-link.js';
 
 describe(`sbb-action-group with ${fixture.name}`, () => {
   let element: SbbActionGroupElement;
@@ -28,7 +28,7 @@ describe(`sbb-action-group with ${fixture.name}`, () => {
           </sbb-block-link>
         </sbb-action-group>
       `,
-      { modules: ['./action-group.ts', '../button/index.ts', '../link/index.ts'] },
+      { modules: ['./action-group.ts', '../button.ts', '../link.ts'] },
     );
   });
 
diff --git a/src/components/action-group/action-group.scss b/src/components/action-group/action-group.scss
index de866b487e..f537a57e1e 100644
--- a/src/components/action-group/action-group.scss
+++ b/src/components/action-group/action-group.scss
@@ -1,8 +1,11 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
+  display: block;
+}
 
 $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra';
 $vertical-orientations: (
diff --git a/src/components/action-group/action-group.spec.ts b/src/components/action-group/action-group.spec.ts
index 533b9260d2..8c0631e2c2 100644
--- a/src/components/action-group/action-group.spec.ts
+++ b/src/components/action-group/action-group.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbSecondaryButtonElement } from '../button';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import type { SbbSecondaryButtonElement } from '../button.js';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbActionGroupElement } from './action-group';
-import './action-group';
-import '../button/secondary-button';
-import '../link/block-link';
+import type { SbbActionGroupElement } from './action-group.js';
+import './action-group.js';
+import '../button/secondary-button.js';
+import '../link/block-link.js';
 
 describe(`sbb-action-group`, () => {
   describe('renders', () => {
@@ -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 02fb0683e2..8f2e5c1e60 100644
--- a/src/components/action-group/action-group.stories.ts
+++ b/src/components/action-group/action-group.stories.ts
@@ -3,14 +3,13 @@ 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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './action-group';
-import '../button';
-import '../link/block-link';
+import './action-group.js';
+import '../button.js';
+import '../link/block-link.js';
 
 const secondaryButtonTemplate = (alignSelf?: string): TemplateResult => html`
   <sbb-secondary-button align-self=${alignSelf || nothing}> Button 1 </sbb-secondary-button>
@@ -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/action-group.ts b/src/components/action-group/action-group.ts
index a3cfce8de8..1b63a12d18 100644
--- a/src/components/action-group/action-group.ts
+++ b/src/components/action-group/action-group.ts
@@ -2,14 +2,14 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { SbbButtonCommonElement, SbbButtonSize } from '../button';
-import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces';
+import type { SbbButtonCommonElement, SbbButtonSize } from '../button.js';
+import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces.js';
 import type {
   SbbBlockLinkButtonElement,
   SbbBlockLinkElement,
   SbbBlockLinkStaticElement,
   SbbLinkSize,
-} from '../link';
+} from '../link.js';
 
 import style from './action-group.scss?lit&inline';
 
diff --git a/src/components/action-group/index.ts b/src/components/action-group/index.ts
deleted file mode 100644
index 376ab7f195..0000000000
--- a/src/components/action-group/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './action-group';
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.ts b/src/components/alert.ts
new file mode 100644
index 0000000000..719ba1be1d
--- /dev/null
+++ b/src/components/alert.ts
@@ -0,0 +1,2 @@
+export * from './alert/alert.js';
+export * from './alert/alert-group.js';
diff --git a/src/components/alert/alert-group.ts b/src/components/alert/alert-group.ts
new file mode 100644
index 0000000000..acf5dd4052
--- /dev/null
+++ b/src/components/alert/alert-group.ts
@@ -0,0 +1 @@
+export * from './alert-group/alert-group.js';
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.e2e.ts b/src/components/alert/alert-group/alert-group.e2e.ts
index 34d8ca40aa..3589d1b897 100644
--- a/src/components/alert/alert-group/alert-group.e2e.ts
+++ b/src/components/alert/alert-group/alert-group.e2e.ts
@@ -1,14 +1,14 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbTransparentButtonElement } from '../../button';
-import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbAlertElement } from '../alert';
+import type { SbbTransparentButtonElement } from '../../button.js';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing.js';
+import type { SbbAlertElement } from '../alert.js';
 
-import { SbbAlertGroupElement } from './alert-group';
+import { SbbAlertGroupElement } from './alert-group.js';
 
-import '../alert';
+import '../alert.js';
 
 describe(`sbb-alert-group with ${fixture.name}`, () => {
   let element: SbbAlertGroupElement;
@@ -30,7 +30,7 @@ describe(`sbb-alert-group with ${fixture.name}`, () => {
           <sbb-alert title-content="Interruption" href="www.sbb.ch">Second</sbb-alert>
         </sbb-alert-group>
       `,
-      { modules: ['./alert-group.ts', '../alert/index.ts'] },
+      { modules: ['./alert-group.ts', '../alert.ts'] },
     );
     const didDismissAlertSpy = new EventSpy(SbbAlertGroupElement.events.didDismissAlert);
     const emptySpy = new EventSpy(SbbAlertGroupElement.events.empty);
diff --git a/src/components/alert/alert-group/alert-group.scss b/src/components/alert/alert-group/alert-group.scss
index 21975601a4..dc48aaa76d 100644
--- a/src/components/alert/alert-group/alert-group.scss
+++ b/src/components/alert/alert-group/alert-group.scss
@@ -1,12 +1,13 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-alert-group-gap: var(--sbb-spacing-fixed-3x);
   --sbb-alert-group-border-radius: var(--sbb-border-radius-4x);
+
+  display: block;
 }
 
 .sbb-alert-group {
diff --git a/src/components/alert/alert-group/alert-group.spec.ts b/src/components/alert/alert-group/alert-group.spec.ts
index 7d8717b311..5748b50a67 100644
--- a/src/components/alert/alert-group/alert-group.spec.ts
+++ b/src/components/alert/alert-group/alert-group.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbAlertGroupElement } from './alert-group';
-import './alert-group';
-import '../alert';
+import type { SbbAlertGroupElement } from './alert-group.js';
+import './alert-group.js';
+import '../alert.js';
 
 describe(`sbb-alert-group`, () => {
   describe('should render', () => {
@@ -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 f5b056c2ca..a2280316a7 100644
--- a/src/components/alert/alert-group/alert-group.stories.ts
+++ b/src/components/alert/alert-group/alert-group.stories.ts
@@ -3,14 +3,13 @@ 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 '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
-import { SbbAlertGroupElement } from './alert-group';
+import { SbbAlertGroupElement } from './alert-group.js';
 import readme from './readme.md?raw';
 
-import '../alert';
+import '../alert.js';
 
 const Template = (args: Args): TemplateResult => html`
   <sbb-alert-group ${sbbSpread(args)}>
@@ -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-group/alert-group.ts b/src/components/alert/alert-group/alert-group.ts
index 83d5225837..0af8243fa3 100644
--- a/src/components/alert/alert-group/alert-group.ts
+++ b/src/components/alert/alert-group/alert-group.ts
@@ -3,10 +3,10 @@ import { LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { setAttribute } from '../../core/dom';
-import { EventEmitter, ConnectedAbortController } from '../../core/eventing';
-import type { SbbTitleLevel } from '../../title';
-import { SbbAlertElement } from '../alert';
+import { SbbConnectedAbortController } from '../../core/controllers.js';
+import { EventEmitter } from '../../core/eventing.js';
+import type { SbbTitleLevel } from '../../title.js';
+import { SbbAlertElement } from '../alert.js';
 
 import style from './alert-group.scss?lit&inline';
 
@@ -54,7 +54,7 @@ export class SbbAlertGroupElement extends LitElement {
   /** Emits when `sbb-alert-group` becomes empty. */
   private _empty: EventEmitter<void> = new EventEmitter(this, SbbAlertGroupElement.events.empty);
 
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
 
   private _removeAlert(event: Event): void {
     const target = event.target as SbbAlertElement;
@@ -93,13 +93,13 @@ export class SbbAlertGroupElement extends LitElement {
     if (!this._hasAlerts && hadAlerts) {
       this._empty.emit();
     }
+
+    this.toggleAttribute('data-empty', !this._hasAlerts);
   }
 
   protected override render(): TemplateResult {
     const TITLE_TAG_NAME = `h${this.accessibilityTitleLevel}`;
 
-    setAttribute(this, 'data-empty', !this._hasAlerts);
-
     /* eslint-disable lit/binding-positions */
     return html`
       <div class="sbb-alert-group">
@@ -111,7 +111,6 @@ export class SbbAlertGroupElement extends LitElement {
         <slot @slotchange=${(event: Event) => this._slotChanged(event)}></slot>
       </div>
     `;
-    /* eslint-disable lit/binding-positions */
   }
 }
 
diff --git a/src/components/alert/alert-group/index.ts b/src/components/alert/alert-group/index.ts
deleted file mode 100644
index 22c5d5e9c1..0000000000
--- a/src/components/alert/alert-group/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './alert-group';
diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts
new file mode 100644
index 0000000000..a284d39b4c
--- /dev/null
+++ b/src/components/alert/alert.ts
@@ -0,0 +1 @@
+export * from './alert/alert.js';
diff --git a/src/components/alert/alert/alert.e2e.ts b/src/components/alert/alert/alert.e2e.ts
index 4ea4ddd521..bcce77e2db 100644
--- a/src/components/alert/alert/alert.e2e.ts
+++ b/src/components/alert/alert/alert.e2e.ts
@@ -1,10 +1,10 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, EventSpy } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, EventSpy } from '../../core/testing.js';
 
-import { SbbAlertElement } from './alert';
+import { SbbAlertElement } from './alert.js';
 
 describe(`sbb-alert with ${fixture.name}`, () => {
   let alert: SbbAlertElement;
diff --git a/src/components/alert/alert/alert.scss b/src/components/alert/alert/alert.scss
index 7913068009..f7d86b1a43 100644
--- a/src/components/alert/alert/alert.scss
+++ b/src/components/alert/alert/alert.scss
@@ -6,9 +6,8 @@ $open-anim-rows-to: 1fr;
 $open-anim-opacity-from: 0;
 $open-anim-opacity-to: 1;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-focus-outline-color: var(--sbb-focus-outline-color-dark);
@@ -18,10 +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);
-
-  // By default, the open animation is disabled
-  --sbb-alert-open-animation-duration: 0.1ms;
+  --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)};
@@ -33,10 +34,17 @@ $open-anim-opacity-to: 1;
     outline: var(--sbb-border-width-1x) solid CanvasText;
     border-radius: var(--sbb-alert-border-radius);
   }
+
+  display: block;
+}
+
+:host([animation='none']) {
+  @include sbb.disable-animation;
 }
 
-:host(.sbb-animate) {
-  --sbb-alert-open-animation-duration: var(--sbb-animation-duration-6x);
+: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 a24b60d476..b6ba3f91d4 100644
--- a/src/components/alert/alert/alert.spec.ts
+++ b/src/components/alert/alert/alert.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbAlertElement } from './alert';
+import type { SbbAlertElement } from './alert.js';
 
-import './alert';
+import './alert.js';
 
 describe(`sbb-alert`, () => {
   let element: SbbAlertElement;
@@ -17,7 +17,7 @@ describe(`sbb-alert`, () => {
 
     expect(element).dom.to.be.equal(
       `
-        <sbb-alert title-content="Interruption" size="m" data-state="opening">
+        <sbb-alert title-content="Interruption" size="m" data-state="opening" animation="open">
            Alert content
         </sbb-alert>
       `,
@@ -53,6 +53,7 @@ describe(`sbb-alert`, () => {
           href="https://www.sbb.ch"
           rel="noopener" target="_blank"
           link-content="Show much more"
+          animation="open"
           data-state="opening"
         >
            Alert content
diff --git a/src/components/alert/alert/alert.stories.ts b/src/components/alert/alert/alert.stories.ts
index b4fe32c538..b165e3cc43 100644
--- a/src/components/alert/alert/alert.stories.ts
+++ b/src/components/alert/alert/alert.stories.ts
@@ -3,11 +3,10 @@ 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 '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
-import { SbbAlertElement } from './alert';
+import { SbbAlertElement } from './alert.js';
 import readme from './readme.md?raw';
 
 const Default = ({ 'content-slot-text': contentSlotText, ...args }: Args): TemplateResult => html`
@@ -58,7 +57,7 @@ const size: InputType = {
   control: {
     type: 'select',
   },
-  options: ['m', 'l'],
+  options: ['m', 'l', 's'],
 };
 
 const readonly: InputType = {
@@ -131,6 +130,13 @@ const accessibilityLabel: InputType = {
   },
 };
 
+const animation: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['open', 'none'],
+};
+
 const defaultArgTypes: ArgTypes = {
   'title-content': titleContent,
   'title-level': titleLevel,
@@ -143,21 +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,
   '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 = {
@@ -169,7 +177,13 @@ export const defaultAlert: StoryObj = {
 export const sizeL: StoryObj = {
   render: Default,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: 'l' },
+  args: { ...defaultArgs, size: size.options![1] },
+};
+
+export const sizeS: StoryObj = {
+  render: Default,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![2] },
 };
 
 export const withoutCloseButton: StoryObj = {
@@ -197,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: [
@@ -209,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 e1b2e56c78..ccbfd86b41 100644
--- a/src/components/alert/alert/alert.ts
+++ b/src/components/alert/alert/alert.ts
@@ -1,25 +1,22 @@
-import { spread } from '@open-wc/lit-helpers';
 import { type CSSResultGroup, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-  LanguageController,
-  type LinkTargetType,
-  SbbIconNameMixin,
-} from '../../core/common-behaviors';
-import { EventEmitter } from '../../core/eventing';
-import { i18nCloseAlert, i18nFindOutMore } from '../../core/i18n';
-import type { SbbTitleLevel } from '../../title';
+import type { LinkTargetType } from '../../core/base-elements.js';
+import { SbbLanguageController } from '../../core/controllers.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { i18nCloseAlert, i18nFindOutMore } from '../../core/i18n.js';
+import type { SbbOpenedClosedState } from '../../core/interfaces.js';
+import { SbbIconNameMixin } from '../../icon.js';
+import type { SbbTitleLevel } from '../../title.js';
 
 import style from './alert.scss?lit&inline';
 
-import '../../button/transparent-button';
-import '../../divider';
-import '../../icon';
-import '../../link';
-import '../../title';
+import '../../button/transparent-button.js';
+import '../../divider.js';
+import '../../link.js';
+import '../../title.js';
 
-export type SbbAlertState = 'closed' | 'opening' | 'opened';
+type SbbAlertState = Exclude<SbbOpenedClosedState, 'closing'>;
 
 /**
  * It displays messages which require user's attention.
@@ -47,7 +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';
+  @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';
@@ -97,7 +97,7 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
     SbbAlertElement.events.dismissalRequested,
   );
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   protected override async firstUpdated(): Promise<void> {
     this._open();
@@ -121,15 +121,6 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
     }
   }
 
-  private _linkProperties(): Record<string, string | undefined> {
-    return {
-      ['aria-label']: this.accessibilityLabel,
-      href: this.href,
-      rel: this.rel,
-      target: this.target,
-    };
-  }
-
   protected override render(): TemplateResult {
     return html`
       <div class="sbb-alert__transition-wrapper" @animationend=${this._onAnimationEnd}>
@@ -150,7 +141,13 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
                 <slot></slot>
               </p>
               ${this.href
-                ? html` <sbb-link ${spread(this._linkProperties())} negative>
+                ? html` <sbb-link
+                    aria-label=${this.accessibilityLabel ?? nothing}
+                    href=${this.href ?? nothing}
+                    target=${this.target ?? nothing}
+                    rel=${this.rel ?? nothing}
+                    negative
+                  >
                     ${this.linkContent ? this.linkContent : i18nFindOutMore[this._language.current]}
                   </sbb-link>`
                 : nothing}
@@ -164,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/index.ts b/src/components/alert/alert/index.ts
deleted file mode 100644
index ab34032f1b..0000000000
--- a/src/components/alert/alert/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './alert';
diff --git a/src/components/alert/alert/readme.md b/src/components/alert/alert/readme.md
index f3432ea160..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>
 ```
 
@@ -73,7 +75,8 @@ Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and
 
 ## Animation
 
-By default, the `sbb-alert` does not have an open animation. Add the `.sbb-animate` class to the element to enable a fade-in 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 -->
 
@@ -82,7 +85,7 @@ By default, the `sbb-alert` does not have an open animation. Add the `.sbb-anima
 | 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.                                                                                                                          |
+| `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.                                                                                  |
@@ -91,6 +94,7 @@ By default, the `sbb-alert` does not have an open animation. Add the `.sbb-anima
 | `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/alert/index.ts b/src/components/alert/index.ts
deleted file mode 100644
index ed1119eeb9..0000000000
--- a/src/components/alert/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './alert';
-export * from './alert-group';
diff --git a/src/components/autocomplete.ts b/src/components/autocomplete.ts
new file mode 100644
index 0000000000..ef8e791d3a
--- /dev/null
+++ b/src/components/autocomplete.ts
@@ -0,0 +1 @@
+export * from './autocomplete/autocomplete.js';
diff --git a/src/components/autocomplete/__snapshots__/autocomplete.spec.snap.js b/src/components/autocomplete/__snapshots__/autocomplete.spec.snap.js
index 6d1910b4fb..61b0e60060 100644
--- a/src/components/autocomplete/__snapshots__/autocomplete.spec.snap.js
+++ b/src/components/autocomplete/__snapshots__/autocomplete.spec.snap.js
@@ -9,22 +9,20 @@ snapshots["sbb-autocomplete renders standalone Chrome-Firefox Dom"] =
   trigger="trigger"
 >
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-slot-names="unnamed"
     data-variant="autocomplete"
-    id="sbb-option-1"
+    id="sbb-option-0"
     role="option"
     value="1"
   >
     1
   </sbb-option>
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-slot-names="unnamed"
     data-variant="autocomplete"
-    id="sbb-option-2"
+    id="sbb-option-1"
     role="option"
     value="2"
   >
@@ -93,22 +91,20 @@ snapshots["sbb-autocomplete renders in form field Chrome-Firefox Dom"] =
     dir="ltr"
   >
     <sbb-option
-      aria-disabled="false"
       aria-selected="false"
       data-slot-names="unnamed"
       data-variant="autocomplete"
-      id="sbb-option-5"
+      id="sbb-option-4"
       role="option"
       value="1"
     >
       1
     </sbb-option>
     <sbb-option
-      aria-disabled="false"
       aria-selected="false"
       data-slot-names="unnamed"
       data-variant="autocomplete"
-      id="sbb-option-6"
+      id="sbb-option-5"
       role="option"
       value="2"
     >
@@ -209,22 +205,20 @@ snapshots["sbb-autocomplete renders standalone Safari Dom"] =
   trigger="trigger"
 >
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-slot-names="unnamed"
     data-variant="autocomplete"
-    id="sbb-option-1"
+    id="sbb-option-0"
     role="option"
     value="1"
   >
     1
   </sbb-option>
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-slot-names="unnamed"
     data-variant="autocomplete"
-    id="sbb-option-2"
+    id="sbb-option-1"
     role="option"
     value="2"
   >
@@ -291,22 +285,20 @@ snapshots["sbb-autocomplete renders in form field Safari Dom"] =
     role="listbox"
   >
     <sbb-option
-      aria-disabled="false"
       aria-selected="false"
       data-slot-names="unnamed"
       data-variant="autocomplete"
-      id="sbb-option-5"
+      id="sbb-option-4"
       role="option"
       value="1"
     >
       1
     </sbb-option>
     <sbb-option
-      aria-disabled="false"
       aria-selected="false"
       data-slot-names="unnamed"
       data-variant="autocomplete"
-      id="sbb-option-6"
+      id="sbb-option-5"
       role="option"
       value="2"
     >
diff --git a/src/components/autocomplete/autocomplete.e2e.ts b/src/components/autocomplete/autocomplete.e2e.ts
index a41246b5f9..667cc29eb6 100644
--- a/src/components/autocomplete/autocomplete.e2e.ts
+++ b/src/components/autocomplete/autocomplete.e2e.ts
@@ -2,12 +2,12 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys, sendMouse } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing';
-import { fixture } from '../core/testing/private';
-import { SbbFormFieldElement } from '../form-field';
-import { SbbOptionElement } from '../option';
+import { fixture } from '../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing.js';
+import { SbbFormFieldElement } from '../form-field.js';
+import { SbbOptionElement } from '../option.js';
 
-import { SbbAutocompleteElement } from './autocomplete';
+import { SbbAutocompleteElement } from './autocomplete.js';
 
 describe(`sbb-autocomplete with ${fixture.name}`, () => {
   let element: SbbAutocompleteElement, formField: SbbFormFieldElement, input: HTMLInputElement;
@@ -25,7 +25,7 @@ describe(`sbb-autocomplete with ${fixture.name}`, () => {
         </sbb-form-field>
         <button>Use this for backdrop click</button>
       `,
-      { modules: ['../form-field/index.ts', './autocomplete.ts', '../option/index.ts'] },
+      { modules: ['../form-field.ts', './autocomplete.ts', '../option.ts'] },
     );
     input = formField.querySelector<HTMLInputElement>('input')!;
     element = formField.querySelector<SbbAutocompleteElement>('sbb-autocomplete')!;
@@ -150,7 +150,7 @@ describe(`sbb-autocomplete with ${fixture.name}`, () => {
   });
 
   it('should stay closed when disabled', async () => {
-    input.setAttribute('disabled', '');
+    input.toggleAttribute('disabled', true);
 
     input.focus();
     await waitForLitRender(element);
@@ -166,7 +166,7 @@ describe(`sbb-autocomplete with ${fixture.name}`, () => {
   });
 
   it('should stay closed when readonly', async () => {
-    input.setAttribute('readonly', '');
+    input.toggleAttribute('readonly', true);
 
     input.focus();
     await waitForLitRender(element);
diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss
index 61a00745cc..5494d0bdd7 100644
--- a/src/components/autocomplete/autocomplete.scss
+++ b/src/components/autocomplete/autocomplete.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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;
 
 // Fixes the gap between the origin and the overlay by creating conjunction
 // corners based on the origin element border radius
@@ -11,7 +10,12 @@
 :host {
   @include sbb.options-panel-overlay-variables;
 
-  --sbb-options-panel-internal-z-index: var(--sbb-autocomplete-z-index, var(--sbb-overlay-z-index));
+  --sbb-options-panel-internal-z-index: var(
+    --sbb-autocomplete-z-index,
+    var(--sbb-overlay-default-z-index)
+  );
+
+  display: block;
 }
 
 :host([negative]) {
diff --git a/src/components/autocomplete/autocomplete.spec.ts b/src/components/autocomplete/autocomplete.spec.ts
index 167fca4ef4..ebc7bb6ace 100644
--- a/src/components/autocomplete/autocomplete.spec.ts
+++ b/src/components/autocomplete/autocomplete.spec.ts
@@ -1,15 +1,15 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { isSafari } from '../core/dom';
-import { describeIf } from '../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
-import type { SbbFormFieldElement } from '../form-field';
+import { isSafari } from '../core/dom.js';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
+import { describeIf } from '../core/testing.js';
+import type { SbbFormFieldElement } from '../form-field.js';
 
-import type { SbbAutocompleteElement } from './autocomplete';
-import '../form-field';
-import '../option';
-import './autocomplete';
+import type { SbbAutocompleteElement } from './autocomplete.js';
+import '../form-field.js';
+import '../option.js';
+import './autocomplete.js';
 
 describe(`sbb-autocomplete`, () => {
   describe('renders standalone', async () => {
diff --git a/src/components/autocomplete/autocomplete.stories.ts b/src/components/autocomplete/autocomplete.stories.ts
index 5b87b3e2ee..083f5b1795 100644
--- a/src/components/autocomplete/autocomplete.stories.ts
+++ b/src/components/autocomplete/autocomplete.stories.ts
@@ -9,25 +9,21 @@ import type {
   Decorator,
   StoryContext,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready';
-import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position';
-import type { SbbFormErrorElement } from '../form-error';
-import { SbbOptionElement } from '../option';
+import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready.js';
+import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position.js';
+import type { SbbFormErrorElement } from '../form-error.js';
+import { SbbOptionElement } from '../option.js';
 
-import { SbbAutocompleteElement } from './autocomplete';
+import { SbbAutocompleteElement } from './autocomplete.js';
 import readme from './readme.md?raw';
 
-import '../form-field';
-import '../form-error';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import '../form-field.js';
+import '../form-error.js';
 
 const negative: InputType = {
   control: {
@@ -159,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()}
@@ -171,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',
     })}
@@ -485,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: {
@@ -511,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 557be843da..87be849aa6 100644
--- a/src/components/autocomplete/autocomplete.ts
+++ b/src/components/autocomplete/autocomplete.ts
@@ -1,33 +1,34 @@
-import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
-import { assignId, getNextElementIndex } from '../core/a11y';
-import { SbbHydrationMixin, SbbNegativeMixin, hostAttributes } from '../core/common-behaviors';
-import {
-  setAttribute,
-  getDocumentWritingMode,
-  findReferencedElement,
-  isSafari,
-  isValidAttribute,
-  isBrowser,
-} from '../core/dom';
-import { ConnectedAbortController, EventEmitter } from '../core/eventing';
-import type { SbbOverlayState } from '../core/overlay';
+import { getNextElementIndex } from '../core/a11y.js';
+import { SbbConnectedAbortController } from '../core/controllers.js';
+import { hostAttributes } from '../core/decorators.js';
+import { findReferencedElement, getDocumentWritingMode, isBrowser, isSafari } from '../core/dom.js';
+import { EventEmitter } from '../core/eventing.js';
+import type { SbbOpenedClosedState } from '../core/interfaces.js';
+import { SbbHydrationMixin, SbbNegativeMixin } from '../core/mixins.js';
 import {
   isEventOnElement,
   overlayGapFixCorners,
   removeAriaComboBoxAttributes,
   setAriaComboBoxAttributes,
   setOverlayPosition,
-} from '../core/overlay';
-import type { SbbOptionElement, SbbOptGroupElement } from '../option';
+} from '../core/overlay.js';
+import type { SbbOptGroupElement, SbbOptionElement } from '../option.js';
 
 import style from './autocomplete.scss?lit&inline';
 
 let nextId = 0;
 
+/**
+ * On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
+ * On the other hand, JAWS and NVDA need the role to be "closer" to the options, or else optgroups won't work.
+ */
+const ariaRoleOnHost = isSafari();
+
 /**
  * Combined with a native input, it displays a panel with a list of available options.
  *
@@ -36,13 +37,14 @@ let nextId = 0;
  * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-autocomplete` is opened.
  * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-autocomplete` begins the closing transition. Can be canceled.
  * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-autocomplete` is closed.
- * @cssprop [--sbb-autocomplete-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-autocomplete-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
- * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
  */
 @customElement('sbb-autocomplete')
 @hostAttributes({
   dir: getDocumentWritingMode(),
+  role: ariaRoleOnHost ? 'listbox' : null,
 })
 export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(LitElement)) {
   public static override styles: CSSResultGroup = style;
@@ -70,8 +72,13 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L
   @property({ attribute: 'preserve-icon-space', reflect: true, type: Boolean })
   public preserveIconSpace?: boolean;
 
-  /** The state of the autocomplete. */
-  @state() private _state: SbbOverlayState = 'closed';
+  /* The state of the autocomplete. */
+  private set _state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
+  }
+  private get _state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
+  }
 
   /** Emits whenever the `sbb-autocomplete` starts the opening transition. */
   private _willOpen: EventEmitter = new EventEmitter(this, SbbAutocompleteElement.events.willOpen);
@@ -112,17 +119,11 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L
   private _activeItemIndex = -1;
   private _didLoad = false;
   private _isPointerDownEventOnMenu: boolean = false;
-  private _abort = new ConnectedAbortController(this);
-
-  /**
-   * On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
-   * On the other hand, JAWS and NVDA need the role to be "closer" to the options, or else optgroups won't work.
-   */
-  private _ariaRoleOnHost = isSafari();
+  private _abort = new SbbConnectedAbortController(this);
 
   /** The autocomplete should inherit 'readonly' state from the trigger. */
   private get _readonly(): boolean {
-    return !!this.triggerElement && isValidAttribute(this.triggerElement, 'readonly');
+    return this.triggerElement?.hasAttribute('readonly') ?? false;
   }
 
   private get _options(): SbbOptionElement[] {
@@ -216,11 +217,16 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L
 
   public override connectedCallback(): void {
     super.connectedCallback();
+    if (ariaRoleOnHost) {
+      this.id ||= this._overlayId;
+    }
+
+    this._state ||= 'closed';
     const signal = this._abort.signal;
     const formField = this.closest?.('sbb-form-field') ?? this.closest?.('[data-form-field]');
 
     if (formField) {
-      this.negative = isValidAttribute(formField, 'negative');
+      this.negative = formField.hasAttribute('negative');
     }
 
     if (this._didLoad) {
@@ -497,7 +503,7 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L
 
   private _setNextActiveOption(event: KeyboardEvent): void {
     const filteredOptions = this._options.filter(
-      (opt) => !opt.disabled && !isValidAttribute(opt, 'data-group-disabled'),
+      (opt) => !opt.disabled && !opt.hasAttribute('data-group-disabled'),
     );
 
     // Get and activate the next active option
@@ -547,10 +553,6 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L
   }
 
   protected override render(): TemplateResult {
-    setAttribute(this, 'data-state', this._state);
-    setAttribute(this, 'role', this._ariaRoleOnHost ? 'listbox' : null);
-    this._ariaRoleOnHost && assignId(() => this._overlayId)(this);
-
     return html`
       <div class="sbb-autocomplete__gap-fix"></div>
       <div class="sbb-autocomplete__container">
@@ -558,14 +560,13 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L
         <div
           @animationend=${this._onAnimationEnd}
           class="sbb-autocomplete__panel"
-          ?data-open=${this._state === 'opened' || this._state === 'opening'}
           ${ref((overlayRef?: Element) => (this._overlay = overlayRef as HTMLElement))}
         >
           <div class="sbb-autocomplete__wrapper">
             <div
               class="sbb-autocomplete__options"
-              role=${!this._ariaRoleOnHost ? 'listbox' : nothing}
-              id=${!this._ariaRoleOnHost ? this._overlayId : nothing}
+              role=${!ariaRoleOnHost ? 'listbox' : nothing}
+              id=${!ariaRoleOnHost ? this._overlayId : nothing}
               ${ref((containerRef) => (this._optionContainer = containerRef as HTMLElement))}
             >
               <slot @slotchange=${this._handleSlotchange}></slot>
diff --git a/src/components/autocomplete/index.ts b/src/components/autocomplete/index.ts
deleted file mode 100644
index 08a0104f40..0000000000
--- a/src/components/autocomplete/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './autocomplete';
diff --git a/src/components/autocomplete/readme.md b/src/components/autocomplete/readme.md
index 3a5aaeb773..f744ecd269 100644
--- a/src/components/autocomplete/readme.md
+++ b/src/components/autocomplete/readme.md
@@ -128,9 +128,9 @@ Add the `sbb-disable-animation` class to disable animation and transition effect
 
 ## CSS Properties
 
-| Name                         | Default                      | Description                                                                                                                                                                                           |
-| ---------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-autocomplete-z-index` | `var(--sbb-overlay-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-z-index)` with a value of `1000`. |
+| Name                         | Default                              | Description                                                                                                                                                                                                   |
+| ---------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-autocomplete-z-index` | `var(--sbb-overlay-default-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`. |
 
 ## Slots
 
diff --git a/src/components/breadcrumb.ts b/src/components/breadcrumb.ts
new file mode 100644
index 0000000000..c79d93c5dd
--- /dev/null
+++ b/src/components/breadcrumb.ts
@@ -0,0 +1,2 @@
+export * from './breadcrumb/breadcrumb.js';
+export * from './breadcrumb/breadcrumb-group.js';
diff --git a/src/components/breadcrumb/breadcrumb-group.ts b/src/components/breadcrumb/breadcrumb-group.ts
new file mode 100644
index 0000000000..470cb7b580
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-group.ts
@@ -0,0 +1 @@
+export * from './breadcrumb-group/breadcrumb-group.js';
diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.e2e.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.e2e.ts
index 535d569334..36e84df109 100644
--- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.e2e.ts
+++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.e2e.ts
@@ -2,13 +2,13 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys, setViewport } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbBreadcrumbElement } from '../breadcrumb';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing.js';
+import type { SbbBreadcrumbElement } from '../breadcrumb.js';
 
-import { SbbBreadcrumbGroupElement } from './breadcrumb-group';
+import { SbbBreadcrumbGroupElement } from './breadcrumb-group.js';
 
-import '../breadcrumb';
+import '../breadcrumb.js';
 
 describe(`sbb-breadcrumb-group with ${fixture.name}`, () => {
   describe('without ellipsis', () => {
@@ -23,7 +23,7 @@ describe(`sbb-breadcrumb-group with ${fixture.name}`, () => {
             <sbb-breadcrumb href="#" id="breadcrumb-2">Two</sbb-breadcrumb>
           </sbb-breadcrumb-group>
         `,
-        { modules: ['./breadcrumb-group.ts', '../breadcrumb/index.ts'] },
+        { modules: ['./breadcrumb-group.ts', '../breadcrumb.ts'] },
       );
     });
 
@@ -66,7 +66,7 @@ describe(`sbb-breadcrumb-group with ${fixture.name}`, () => {
             <sbb-breadcrumb href="#" id="breadcrumb-6">Sixth</sbb-breadcrumb>
           </sbb-breadcrumb-group>
         `,
-        { modules: ['./breadcrumb-group.ts', '../breadcrumb/index.ts'] },
+        { modules: ['./breadcrumb-group.ts', '../breadcrumb.ts'] },
       );
 
       ellipsisListItemElement = element.shadowRoot!.querySelector<HTMLLIElement>(
diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss
index 5d2c3bfb7f..8800db08d8 100644
--- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss
+++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss
@@ -1,12 +1,13 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-breadcrumb-group-wrap: nowrap;
   --sbb-breadcrumb-group-visibility: hidden;
+
+  display: block;
 }
 
 :host([data-loaded]) {
diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts
index 5e0e881fc1..97d79d5606 100644
--- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts
+++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts
@@ -1,12 +1,12 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbBreadcrumbGroupElement } from './breadcrumb-group';
+import type { SbbBreadcrumbGroupElement } from './breadcrumb-group.js';
 
-import '../breadcrumb';
-import './breadcrumb-group';
+import '../breadcrumb.js';
+import './breadcrumb-group.js';
 
 describe(`sbb-breadcrumb-group`, () => {
   let root: SbbBreadcrumbGroupElement;
diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts
index d3819a49b6..f6dfc0b4ba 100644
--- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts
+++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts
@@ -3,14 +3,14 @@ import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
-import type { SbbBreadcrumbGroupElement } from './breadcrumb-group';
+import type { SbbBreadcrumbGroupElement } from './breadcrumb-group.js';
 import readme from './readme.md?raw';
 
-import '../../button/secondary-button';
-import './breadcrumb-group';
-import '../breadcrumb';
+import '../../button/secondary-button.js';
+import './breadcrumb-group.js';
+import '../breadcrumb.js';
 
 const addBreadcrumb = (event: Event): void => {
   const breadcrumbGroup = (event.target as HTMLElement)
@@ -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-group/breadcrumb-group.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts
index 5adbeabd06..fac116a76b 100644
--- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts
+++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts
@@ -1,29 +1,30 @@
 import {
   type CSSResultGroup,
+  html,
+  nothing,
   LitElement,
   type PropertyValueMap,
   type PropertyValues,
   type TemplateResult,
 } from 'lit';
-import { html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 
-import { getNextElementIndex, isArrowKeyPressed, sbbInputModalityDetector } from '../../core/a11y';
 import {
-  SbbNamedSlotListMixin,
-  hostAttributes,
-  type WithListChildren,
-} from '../../core/common-behaviors';
-import { LanguageController } from '../../core/common-behaviors';
-import { setAttribute } from '../../core/dom';
-import { ConnectedAbortController } from '../../core/eventing';
-import { i18nBreadcrumbEllipsisButtonLabel } from '../../core/i18n';
-import { AgnosticResizeObserver } from '../../core/observers';
-import type { SbbBreadcrumbElement } from '../breadcrumb';
+  getNextElementIndex,
+  isArrowKeyPressed,
+  sbbInputModalityDetector,
+} from '../../core/a11y.js';
+import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { setOrRemoveAttribute } from '../../core/dom.js';
+import { i18nBreadcrumbEllipsisButtonLabel } from '../../core/i18n.js';
+import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js';
+import { AgnosticResizeObserver } from '../../core/observers.js';
+import type { SbbBreadcrumbElement } from '../breadcrumb.js';
 
 import style from './breadcrumb-group.scss?lit&inline';
 
-import '../../icon';
+import '../../icon.js';
 
 /**
  * It can be used as a container for one or more `sbb-breadcrumb` component.
@@ -41,11 +42,18 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin<
   public static override styles: CSSResultGroup = style;
   protected override readonly listChildTagNames = ['SBB-BREADCRUMB'];
 
-  @state() private _state?: 'collapsed' | 'manually-expanded';
+  /* The state of the breadcrumb group. */
+  @state()
+  private set _state(state: 'collapsed' | 'manually-expanded' | null) {
+    setOrRemoveAttribute(this, 'data-state', state);
+  }
+  private get _state(): 'collapsed' | 'manually-expanded' | null {
+    return this.getAttribute('data-state') as 'collapsed' | 'manually-expanded' | null;
+  }
 
   private _resizeObserver = new AgnosticResizeObserver(() => this._evaluateCollapsedState());
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this);
+  private _abort = new SbbConnectedAbortController(this);
+  private _language = new SbbLanguageController(this);
   private _markForFocus = false;
 
   private _handleKeyDown(evt: KeyboardEvent): void {
@@ -112,7 +120,7 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin<
 
     // If it is not expandable, reset state
     if (this.listChildren.length < 3) {
-      this._state = undefined;
+      this._state = null;
     }
   }
 
@@ -204,8 +212,6 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin<
   }
 
   protected override render(): TemplateResult {
-    setAttribute(this, 'data-state', this._state);
-
     return html`
       <ol class="sbb-breadcrumb-group">
         ${this._state === 'collapsed' ? this._renderCollapsed() : this._renderExpanded()}
diff --git a/src/components/breadcrumb/breadcrumb-group/index.ts b/src/components/breadcrumb/breadcrumb-group/index.ts
deleted file mode 100644
index 86eb412365..0000000000
--- a/src/components/breadcrumb/breadcrumb-group/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './breadcrumb-group';
diff --git a/src/components/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb.ts
new file mode 100644
index 0000000000..236f2ec91c
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb.ts
@@ -0,0 +1 @@
+export * from './breadcrumb/breadcrumb.js';
diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.e2e.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.e2e.ts
index 4d0eab3fbd..d8098aa39c 100644
--- a/src/components/breadcrumb/breadcrumb/breadcrumb.e2e.ts
+++ b/src/components/breadcrumb/breadcrumb/breadcrumb.e2e.ts
@@ -1,10 +1,10 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing.js';
 
-import { SbbBreadcrumbElement } from './breadcrumb';
+import { SbbBreadcrumbElement } from './breadcrumb.js';
 
 describe(`sbb-breadcrumb with ${fixture.name}`, () => {
   let element: SbbBreadcrumbElement;
diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.scss b/src/components/breadcrumb/breadcrumb/breadcrumb.scss
index 273494497c..8309830d9b 100644
--- a/src/components/breadcrumb/breadcrumb/breadcrumb.scss
+++ b/src/components/breadcrumb/breadcrumb/breadcrumb.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   display: flex;
diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts
index 602b72d29b..ac65e4d6ce 100644
--- a/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts
+++ b/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import './breadcrumb';
+import './breadcrumb.js';
 
 describe(`sbb-breadcrumb`, () => {
   it('renders with text', async () => {
diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts
index 65ed93affa..3b257d8d7e 100644
--- a/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts
+++ b/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts
@@ -3,11 +3,11 @@ import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 
-import './breadcrumb';
+import './breadcrumb.js';
 
 const text: InputType = {
   control: {
@@ -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/breadcrumb/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.ts
index 8779904752..cdb74b1ccf 100644
--- a/src/components/breadcrumb/breadcrumb/breadcrumb.ts
+++ b/src/components/breadcrumb/breadcrumb/breadcrumb.ts
@@ -2,13 +2,10 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import {
-  SbbHydrationMixin,
-  SbbIconNameMixin,
-  SbbLinkBaseElement,
-} from '../../core/common-behaviors';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+import { SbbHydrationMixin } from '../../core/mixins.js';
+import { SbbIconNameMixin } from '../../icon.js';
 
-import '../../icon';
 import style from './breadcrumb.scss?lit&inline';
 
 /**
diff --git a/src/components/breadcrumb/breadcrumb/index.ts b/src/components/breadcrumb/breadcrumb/index.ts
deleted file mode 100644
index e10b051996..0000000000
--- a/src/components/breadcrumb/breadcrumb/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './breadcrumb';
diff --git a/src/components/breadcrumb/index.ts b/src/components/breadcrumb/index.ts
deleted file mode 100644
index 92eac92c68..0000000000
--- a/src/components/breadcrumb/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './breadcrumb';
-export * from './breadcrumb-group';
diff --git a/src/components/button.ts b/src/components/button.ts
new file mode 100644
index 0000000000..0ee7b4877f
--- /dev/null
+++ b/src/components/button.ts
@@ -0,0 +1,14 @@
+export * from './button/button.js';
+export * from './button/secondary-button.js';
+export * from './button/tertiary-button.js';
+export * from './button/transparent-button.js';
+export * from './button/mini-button.js';
+export * from './button/button-link.js';
+export * from './button/secondary-button-link.js';
+export * from './button/tertiary-button-link.js';
+export * from './button/transparent-button-link.js';
+export * from './button/button-static.js';
+export * from './button/secondary-button-static.js';
+export * from './button/tertiary-button-static.js';
+export * from './button/transparent-button-static.js';
+export * from './button/common.js';
diff --git a/src/components/button/button-link.ts b/src/components/button/button-link.ts
new file mode 100644
index 0000000000..40f4eecc22
--- /dev/null
+++ b/src/components/button/button-link.ts
@@ -0,0 +1 @@
+export * from './button-link/button-link.js';
diff --git a/src/components/button/button-link/button-link.e2e.ts b/src/components/button/button-link/button-link.e2e.ts
index eb0ec1ce43..15d098d7fe 100644
--- a/src/components/button/button-link/button-link.e2e.ts
+++ b/src/components/button/button-link/button-link.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbButtonLinkElement } from './button-link';
+import { SbbButtonLinkElement } from './button-link.js';
 
 describe(`sbb-button-link with ${fixture.name}`, () => {
   let element: SbbButtonLinkElement;
diff --git a/src/components/button/button-link/button-link.spec.ts b/src/components/button/button-link/button-link.spec.ts
index 2b03e7d12d..e967dbf560 100644
--- a/src/components/button/button-link/button-link.spec.ts
+++ b/src/components/button/button-link/button-link.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from '@open-wc/testing';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import { buttonLinkIconTestTemplate, buttonLinkTestTemplate } from '../common/button-test-utils';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { buttonLinkIconTestTemplate, buttonLinkTestTemplate } from '../common/button-test-utils.js';
 
-import type { SbbButtonLinkElement } from './button-link';
-import './button-link';
+import type { SbbButtonLinkElement } from './button-link.js';
+import './button-link.js';
 
 describe(`sbb-button-link`, () => {
   describe('renders a sbb-button-link without icon', async () => {
diff --git a/src/components/button/button-link/button-link.stories.ts b/src/components/button/button-link/button-link.stories.ts
index 7b2e0798b7..09a08a953a 100644
--- a/src/components/button/button-link/button-link.stories.ts
+++ b/src/components/button/button-link/button-link.stories.ts
@@ -1,9 +1,9 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonLinkDefaultArgs,
   buttonLinkDefaultArgTypes,
-} from '../common/button-link-common-stories';
+} from '../common/button-link-common-stories.js';
 import {
   commonDecorators,
   fixedWidth,
@@ -20,13 +20,14 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
-} from '../common/common-stories';
+} from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator';
-import './button-link';
+import '../../loading-indicator.js';
+import './button-link.js';
 
 const defaultArgTypes: ArgTypes = { ...buttonLinkDefaultArgTypes };
 
@@ -44,6 +45,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;
@@ -58,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-link/button-link.ts b/src/components/button/button-link/button-link.ts
index 4dc01f2fc3..cc434a29fe 100644
--- a/src/components/button/button-link/button-link.ts
+++ b/src/components/button/button-link/button-link.ts
@@ -1,8 +1,9 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
-import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common.js';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'primary' variant, which will behave as a link.
diff --git a/src/components/button/button-link/index.ts b/src/components/button/button-link/index.ts
deleted file mode 100644
index 68d0a03fc1..0000000000
--- a/src/components/button/button-link/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './button-link';
diff --git a/src/components/button/button-static.ts b/src/components/button/button-static.ts
new file mode 100644
index 0000000000..ad262f793d
--- /dev/null
+++ b/src/components/button/button-static.ts
@@ -0,0 +1 @@
+export * from './button-static/button-static.js';
diff --git a/src/components/button/button-static/button-static.e2e.ts b/src/components/button/button-static/button-static.e2e.ts
index 7099366987..12218244dd 100644
--- a/src/components/button/button-static/button-static.e2e.ts
+++ b/src/components/button/button-static/button-static.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbButtonStaticElement } from './button-static';
+import { SbbButtonStaticElement } from './button-static.js';
 
 describe(`sbb-button-static with ${fixture.name}`, () => {
   let element: SbbButtonStaticElement;
diff --git a/src/components/button/button-static/button-static.spec.ts b/src/components/button/button-static/button-static.spec.ts
index c1a3a014b5..0ac00689c6 100644
--- a/src/components/button/button-static/button-static.spec.ts
+++ b/src/components/button/button-static/button-static.spec.ts
@@ -1,16 +1,16 @@
 import { expect } from '@open-wc/testing';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 import {
   buttonIconTestTemplate,
   buttonSlottedIconTestTemplate,
   buttonSpaceIconTestTemplate,
   buttonTestTemplate,
-} from '../common/button-test-utils';
+} from '../common/button-test-utils.js';
 
-import type { SbbButtonStaticElement } from './button-static';
+import type { SbbButtonStaticElement } from './button-static.js';
 
-import './button-static';
+import './button-static.js';
 
 describe(`sbb-button-static`, () => {
   describe('renders a sbb-button-static without icon', async () => {
diff --git a/src/components/button/button-static/button-static.stories.ts b/src/components/button/button-static/button-static.stories.ts
index cc6ce020e0..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,
@@ -19,13 +19,14 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
-  withSlottedIcon,
+  sizeS,
   withHiddenSlottedIcon,
-} from '../common/common-stories';
+  withSlottedIcon,
+} from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator';
-import './button-static';
+import '../../loading-indicator.js';
+import './button-static.js';
 
 const disabled: InputType = {
   control: {
@@ -56,6 +57,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;
@@ -70,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-static/button-static.ts b/src/components/button/button-static/button-static.ts
index 0017c3c828..aa31b7180e 100644
--- a/src/components/button/button-static/button-static.ts
+++ b/src/components/button/button-static/button-static.ts
@@ -1,8 +1,9 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbActionBaseElement, SbbDisabledMixin } from '../../core/common-behaviors';
-import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common';
+import { SbbActionBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledMixin } from '../../core/mixins.js';
+import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common.js';
 
 /**
  * It displays a static button enhanced with the SBB Design in the 'primary' variant.
diff --git a/src/components/button/button-static/index.ts b/src/components/button/button-static/index.ts
deleted file mode 100644
index 36bbbda88a..0000000000
--- a/src/components/button/button-static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './button-static';
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
new file mode 100644
index 0000000000..c48cf8bdcc
--- /dev/null
+++ b/src/components/button/button.ts
@@ -0,0 +1 @@
+export * from './button/button.js';
diff --git a/src/components/button/button/button.e2e.ts b/src/components/button/button/button.e2e.ts
index b2936aa043..dba1e7e7f8 100644
--- a/src/components/button/button/button.e2e.ts
+++ b/src/components/button/button/button.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbButtonElement } from './button';
+import { SbbButtonElement } from './button.js';
 
 describe(`sbb-button with ${fixture.name}`, () => {
   let element: SbbButtonElement;
diff --git a/src/components/button/button/button.spec.ts b/src/components/button/button/button.spec.ts
index 33d18ea4be..7b02d38c15 100644
--- a/src/components/button/button/button.spec.ts
+++ b/src/components/button/button/button.spec.ts
@@ -1,16 +1,16 @@
 import { expect } from '@open-wc/testing';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 import {
   buttonTestTemplate,
   buttonIconTestTemplate,
   buttonSlottedIconTestTemplate,
   buttonSpaceIconTestTemplate,
-} from '../common/button-test-utils';
+} from '../common/button-test-utils.js';
 
-import type { SbbButtonElement } from './button';
+import type { SbbButtonElement } from './button.js';
 
-import './button';
+import './button.js';
 
 describe(`sbb-button`, () => {
   describe('renders a sbb-button without icon', async () => {
diff --git a/src/components/button/button/button.stories.ts b/src/components/button/button/button.stories.ts
index 22165c4cbe..b26219b84c 100644
--- a/src/components/button/button/button.stories.ts
+++ b/src/components/button/button/button.stories.ts
@@ -1,10 +1,10 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonDefaultArgs,
   buttonDefaultArgTypes,
   requestSubmit,
-} from '../common/button-common-stories';
+} from '../common/button-common-stories.js';
 import {
   commonDecorators,
   fixedWidth,
@@ -21,13 +21,14 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
-} from '../common/common-stories';
+} from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator';
-import './button';
+import '../../loading-indicator.js';
+import './button.js';
 
 const defaultArgTypes: ArgTypes = { ...buttonDefaultArgTypes };
 
@@ -45,6 +46,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;
@@ -60,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/button/button.ts b/src/components/button/button/button.ts
index 2461b77277..f956f86828 100644
--- a/src/components/button/button/button.ts
+++ b/src/components/button/button/button.ts
@@ -1,8 +1,9 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors';
-import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common.js';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'primary' variant.
diff --git a/src/components/button/button/index.ts b/src/components/button/button/index.ts
deleted file mode 100644
index eaf5eea7f1..0000000000
--- a/src/components/button/button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './button';
diff --git a/src/components/button/common.ts b/src/components/button/common.ts
new file mode 100644
index 0000000000..e98526b225
--- /dev/null
+++ b/src/components/button/common.ts
@@ -0,0 +1,7 @@
+export * from './common/button-common.js';
+
+export { default as buttonCommonStyle } from './common/button-common.scss?lit&inline';
+export { default as buttonPrimaryStyle } from './common/primary-button.scss?lit&inline';
+export { default as buttonSecondaryStyle } from './common/secondary-button.scss?lit&inline';
+export { default as buttonTertiaryStyle } from './common/tertiary-button.scss?lit&inline';
+export { default as buttonTransparentStyle } from './common/transparent-button.scss?lit&inline';
diff --git a/src/components/button/common/button-common-stories.ts b/src/components/button/common/button-common-stories.ts
index 0d567cf6de..09a0d56b14 100644
--- a/src/components/button/common/button-common-stories.ts
+++ b/src/components/button/common/button-common-stories.ts
@@ -3,7 +3,7 @@ import type { Args, ArgTypes, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { commonDefaultArgs, commonDefaultArgTypes } from './common-stories';
+import { commonDefaultArgs, commonDefaultArgTypes } from './common-stories.js';
 
 /* eslint-disable lit/binding-positions, @typescript-eslint/naming-convention */
 const RequestSubmitTemplate = ({ tag, text }: Args): TemplateResult => html`
@@ -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 303b785163..7492646833 100644
--- a/src/components/button/common/button-common.scss
+++ b/src/components/button/common/button-common.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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;
 
 $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=unnamed])';
 
@@ -25,7 +24,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
   --sbb-button-shadow-2-color: var(--sbb-color-red125-alpha-20);
   --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-button-l-min-height);
+  --sbb-button-min-height: var(--sbb-size-element-m);
   --sbb-button-transition-duration: var(
     --sbb-disable-animation-time,
     var(--sbb-animation-duration-2x)
@@ -60,7 +59,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
 }
 
 :host([size='m']) {
-  --sbb-button-min-height: var(--sbb-size-button-m-min-height);
+  --sbb-button-min-height: var(--sbb-size-element-s);
   --sbb-button-padding-inline: var(--sbb-spacing-fixed-5x);
 
   @include sbb.mq($from: medium) {
@@ -68,9 +67,17 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
   }
 }
 
+:host([size='s']) {
+  --sbb-button-min-height: var(--sbb-size-element-xs);
+  --sbb-button-padding-inline: var(--sbb-spacing-fixed-4x);
+
+  @include sbb.mq($from: medium) {
+    --sbb-button-padding-inline: var(--sbb-spacing-fixed-5x);
+  }
+}
+
 :host(#{$icon-only}) {
   --sbb-button-padding-inline: 0;
-  --icon-margin-inline-end: 0;
 }
 
 :host([disabled]) {
diff --git a/src/components/button/common/button-common.ts b/src/components/button/common/button-common.ts
index 338f3cada5..bd5e98ef5c 100644
--- a/src/components/button/common/button-common.ts
+++ b/src/components/button/common/button-common.ts
@@ -2,23 +2,20 @@ import type { TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import {
-  type AbstractConstructor,
-  hostAttributes,
-  NamedSlotStateController,
-  type SbbActionBaseElement,
-  type SbbDisabledMixinType,
-  SbbIconNameMixin,
-  type SbbIconNameMixinType,
-  SbbNegativeMixin,
-  type SbbNegativeMixinType,
-} from '../../core/common-behaviors';
-
-import '../../icon';
+import type { SbbActionBaseElement } from '../../core/base-elements.js';
+import { SbbSlotStateController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import type {
+  AbstractConstructor,
+  SbbDisabledMixinType,
+  SbbNegativeMixinType,
+} from '../../core/mixins.js';
+import { SbbNegativeMixin } from '../../core/mixins.js';
+import { SbbIconNameMixin, type SbbIconNameMixinType } from '../../icon.js';
 
 export type SbbButtonCommonElement = SbbButtonCommonElementMixinType & SbbActionBaseElement;
 
-export type SbbButtonSize = 'l' | 'm';
+export type SbbButtonSize = 'l' | 'm' | 's';
 
 export declare class SbbButtonCommonElementMixinType
   implements SbbNegativeMixinType, Partial<SbbDisabledMixinType>, Partial<SbbIconNameMixinType>
@@ -45,7 +42,7 @@ export const SbbButtonCommonElementMixin = <T extends AbstractConstructor<SbbAct
 
     protected constructor(...args: any[]) {
       super(args);
-      new NamedSlotStateController(this);
+      new SbbSlotStateController(this);
     }
 
     protected override renderTemplate(): TemplateResult {
diff --git a/src/components/button/common/button-link-common-stories.ts b/src/components/button/common/button-link-common-stories.ts
index 018ba72384..811960b338 100644
--- a/src/components/button/common/button-link-common-stories.ts
+++ b/src/components/button/common/button-link-common-stories.ts
@@ -1,7 +1,7 @@
 import type { InputType } from '@storybook/types';
 import type { Args, ArgTypes } from '@storybook/web-components';
 
-import { commonDefaultArgs, commonDefaultArgTypes } from './common-stories';
+import { commonDefaultArgs, commonDefaultArgTypes } from './common-stories.js';
 
 const hrefs = ['https://www.sbb.ch', 'https://github.com/lyne-design-system/lyne-components'];
 const href: InputType = {
@@ -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/button-test-utils.ts b/src/components/button/common/button-test-utils.ts
index a7c2c462ed..2207a36f22 100644
--- a/src/components/button/common/button-test-utils.ts
+++ b/src/components/button/common/button-test-utils.ts
@@ -1,8 +1,8 @@
 import type { TemplateResult } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { sbbSpread } from '../../core/dom';
-import '../index';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import '../../button.js';
 
 /* eslint-disable lit/binding-positions */
 export const buttonTestTemplate = (tag: string, isStatic = false): TemplateResult => {
diff --git a/src/components/button/common/common-stories.ts b/src/components/button/common/common-stories.ts
index fc08ac2961..dc7cbe0015 100644
--- a/src/components/button/common/common-stories.ts
+++ b/src/components/button/common/common-stories.ts
@@ -12,14 +12,10 @@ import type { TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
-import '../../icon';
-import '../../loading-indicator';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? '#484040' : 'var(--sbb-color-white)',
-});
+import '../../icon.js';
+import '../../loading-indicator.js';
 
 const focusStyle = (context: StoryContext): Record<string, string> =>
   context.args.negative
@@ -88,7 +84,7 @@ const size: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['l', 'm'],
+  options: ['l', 'm', 's'],
 };
 
 const iconName: InputType = {
@@ -128,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,
 };
@@ -186,7 +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],
   },
 };
 
@@ -237,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/common/index.ts b/src/components/button/common/index.ts
deleted file mode 100644
index 1e862c6dec..0000000000
--- a/src/components/button/common/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './button-common';
-
-export { default as buttonCommonStyle } from './button-common.scss?lit&inline';
-export { default as buttonPrimaryStyle } from './primary-button.scss?lit&inline';
-export { default as buttonSecondaryStyle } from './secondary-button.scss?lit&inline';
-export { default as buttonTertiaryStyle } from './tertiary-button.scss?lit&inline';
-export { default as buttonTransparentStyle } from './transparent-button.scss?lit&inline';
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
deleted file mode 100644
index a5dd83fbc1..0000000000
--- a/src/components/button/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export * from './button';
-export * from './secondary-button';
-export * from './tertiary-button';
-export * from './transparent-button';
-export * from './mini-button';
-export * from './button-link';
-export * from './secondary-button-link';
-export * from './tertiary-button-link';
-export * from './transparent-button-link';
-export * from './button-static';
-export * from './secondary-button-static';
-export * from './tertiary-button-static';
-export * from './transparent-button-static';
-export * from './common';
diff --git a/src/components/button/mini-button.ts b/src/components/button/mini-button.ts
new file mode 100644
index 0000000000..65b7e88ef6
--- /dev/null
+++ b/src/components/button/mini-button.ts
@@ -0,0 +1 @@
+export * from './mini-button/mini-button.js';
diff --git a/src/components/button/mini-button/index.ts b/src/components/button/mini-button/index.ts
deleted file mode 100644
index 97ba2be018..0000000000
--- a/src/components/button/mini-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './mini-button';
diff --git a/src/components/button/mini-button/mini-button.scss b/src/components/button/mini-button/mini-button.scss
index 8a4bf04e83..89cca710cf 100644
--- a/src/components/button/mini-button/mini-button.scss
+++ b/src/components/button/mini-button/mini-button.scss
@@ -1,10 +1,11 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
+  display: block;
+
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
diff --git a/src/components/button/mini-button/mini-button.stories.ts b/src/components/button/mini-button/mini-button.stories.ts
index 86d721d7bd..0f5f1f76ad 100644
--- a/src/components/button/mini-button/mini-button.stories.ts
+++ b/src/components/button/mini-button/mini-button.stories.ts
@@ -9,19 +9,14 @@ import type {
   StoryObj,
 } from '@storybook/web-components';
 import { html, type TemplateResult } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
-import '../../form-field';
-import './mini-button';
-import { buttonDefaultArgs, buttonDefaultArgTypes } from '../common/button-common-stories';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import '../../form-field.js';
+import './mini-button.js';
+import { buttonDefaultArgs, buttonDefaultArgTypes } from '../common/button-common-stories.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 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/mini-button/mini-button.ts b/src/components/button/mini-button/mini-button.ts
index 32e8c0073c..7896129f0d 100644
--- a/src/components/button/mini-button/mini-button.ts
+++ b/src/components/button/mini-button/mini-button.ts
@@ -1,13 +1,10 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import {
-  NamedSlotStateController,
-  SbbButtonBaseElement,
-  SbbDisabledTabIndexActionMixin,
-  SbbIconNameMixin,
-  SbbNegativeMixin,
-} from '../../core/common-behaviors';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbSlotStateController } from '../../core/controllers.js';
+import { SbbDisabledTabIndexActionMixin, SbbNegativeMixin } from '../../core/mixins.js';
+import { SbbIconNameMixin } from '../../icon.js';
 
 import style from './mini-button.scss?lit&inline';
 
@@ -25,7 +22,7 @@ export class SbbMiniButtonElement extends SbbNegativeMixin(
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   protected override renderTemplate(): TemplateResult {
diff --git a/src/components/button/secondary-button-link.ts b/src/components/button/secondary-button-link.ts
new file mode 100644
index 0000000000..05063459cb
--- /dev/null
+++ b/src/components/button/secondary-button-link.ts
@@ -0,0 +1 @@
+export * from './secondary-button-link/secondary-button-link.js';
diff --git a/src/components/button/secondary-button-link/index.ts b/src/components/button/secondary-button-link/index.ts
deleted file mode 100644
index a9b114d04a..0000000000
--- a/src/components/button/secondary-button-link/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './secondary-button-link';
diff --git a/src/components/button/secondary-button-link/secondary-button-link.spec.ts b/src/components/button/secondary-button-link/secondary-button-link.spec.ts
index a71a6030b1..39db42e005 100644
--- a/src/components/button/secondary-button-link/secondary-button-link.spec.ts
+++ b/src/components/button/secondary-button-link/secondary-button-link.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from '@open-wc/testing';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import { buttonLinkIconTestTemplate, buttonLinkTestTemplate } from '../common/button-test-utils';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { buttonLinkIconTestTemplate, buttonLinkTestTemplate } from '../common/button-test-utils.js';
 
-import type { SbbSecondaryButtonLinkElement } from './secondary-button-link';
-import './secondary-button-link';
+import type { SbbSecondaryButtonLinkElement } from './secondary-button-link.js';
+import './secondary-button-link.js';
 
 describe(`sbb-secondary-button-link`, () => {
   describe('renders a sbb-secondary-button-link without icon', async () => {
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 5e32817f03..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,9 +1,9 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonLinkDefaultArgs,
   buttonLinkDefaultArgTypes,
-} from '../common/button-link-common-stories';
+} from '../common/button-link-common-stories.js';
 import {
   commonDecorators,
   fixedWidth,
@@ -20,13 +20,14 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
-} from '../common/common-stories';
+} from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator';
-import './secondary-button-link';
+import '../../loading-indicator.js';
+import './secondary-button-link.js';
 
 const defaultArgTypes: ArgTypes = { ...buttonLinkDefaultArgTypes };
 
@@ -44,6 +45,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;
@@ -58,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-link/secondary-button-link.ts b/src/components/button/secondary-button-link/secondary-button-link.ts
index 17659c93d7..f9cd60eec4 100644
--- a/src/components/button/secondary-button-link/secondary-button-link.ts
+++ b/src/components/button/secondary-button-link/secondary-button-link.ts
@@ -1,8 +1,9 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
-import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common.js';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'primary' variant, which will behave as a link.
diff --git a/src/components/button/secondary-button-static.ts b/src/components/button/secondary-button-static.ts
new file mode 100644
index 0000000000..31190c2607
--- /dev/null
+++ b/src/components/button/secondary-button-static.ts
@@ -0,0 +1 @@
+export * from './secondary-button-static/secondary-button-static.js';
diff --git a/src/components/button/secondary-button-static/index.ts b/src/components/button/secondary-button-static/index.ts
deleted file mode 100644
index acdcdfdc94..0000000000
--- a/src/components/button/secondary-button-static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './secondary-button-static';
diff --git a/src/components/button/secondary-button-static/secondary-button-static.spec.ts b/src/components/button/secondary-button-static/secondary-button-static.spec.ts
index b9ef361fdf..28abfb38f3 100644
--- a/src/components/button/secondary-button-static/secondary-button-static.spec.ts
+++ b/src/components/button/secondary-button-static/secondary-button-static.spec.ts
@@ -1,15 +1,15 @@
 import { expect } from '@open-wc/testing';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 import {
   buttonIconTestTemplate,
   buttonSlottedIconTestTemplate,
   buttonSpaceIconTestTemplate,
   buttonTestTemplate,
-} from '../common/button-test-utils';
+} from '../common/button-test-utils.js';
 
-import type { SbbSecondaryButtonStaticElement } from './secondary-button-static';
-import './secondary-button-static';
+import type { SbbSecondaryButtonStaticElement } from './secondary-button-static.js';
+import './secondary-button-static.js';
 
 describe(`sbb-secondary-button-static`, () => {
   describe('renders a sbb-secondary-button-static without icon', async () => {
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 69479dfc63..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,
@@ -19,13 +19,14 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
-  withSlottedIcon,
+  sizeS,
   withHiddenSlottedIcon,
-} from '../common/common-stories';
+  withSlottedIcon,
+} from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator';
-import './secondary-button-static';
+import '../../loading-indicator.js';
+import './secondary-button-static.js';
 
 const disabled: InputType = {
   control: {
@@ -56,6 +57,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;
@@ -70,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-static/secondary-button-static.ts b/src/components/button/secondary-button-static/secondary-button-static.ts
index 61966a0fdd..d64ec05104 100644
--- a/src/components/button/secondary-button-static/secondary-button-static.ts
+++ b/src/components/button/secondary-button-static/secondary-button-static.ts
@@ -1,8 +1,9 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbActionBaseElement, SbbDisabledMixin } from '../../core/common-behaviors';
-import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common';
+import { SbbActionBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledMixin } from '../../core/mixins.js';
+import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common.js';
 
 /**
  * It displays a static button enhanced with the SBB Design in the 'secondary' variant.
diff --git a/src/components/button/secondary-button.ts b/src/components/button/secondary-button.ts
new file mode 100644
index 0000000000..8f579a43b4
--- /dev/null
+++ b/src/components/button/secondary-button.ts
@@ -0,0 +1 @@
+export * from './secondary-button/secondary-button.js';
diff --git a/src/components/button/secondary-button/index.ts b/src/components/button/secondary-button/index.ts
deleted file mode 100644
index f876e292cc..0000000000
--- a/src/components/button/secondary-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './secondary-button';
diff --git a/src/components/button/secondary-button/secondary-button.spec.ts b/src/components/button/secondary-button/secondary-button.spec.ts
index 5941e19c9a..0556205f3c 100644
--- a/src/components/button/secondary-button/secondary-button.spec.ts
+++ b/src/components/button/secondary-button/secondary-button.spec.ts
@@ -1,15 +1,15 @@
 import { expect } from '@open-wc/testing';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 import {
   buttonIconTestTemplate,
   buttonSlottedIconTestTemplate,
   buttonSpaceIconTestTemplate,
   buttonTestTemplate,
-} from '../common/button-test-utils';
+} from '../common/button-test-utils.js';
 
-import type { SbbSecondaryButtonElement } from './secondary-button';
-import './secondary-button';
+import type { SbbSecondaryButtonElement } from './secondary-button.js';
+import './secondary-button.js';
 
 describe(`sbb-secondary-button`, () => {
   describe('renders a sbb-secondary-button without icon', async () => {
diff --git a/src/components/button/secondary-button/secondary-button.stories.ts b/src/components/button/secondary-button/secondary-button.stories.ts
index b60f633605..e87204ce1d 100644
--- a/src/components/button/secondary-button/secondary-button.stories.ts
+++ b/src/components/button/secondary-button/secondary-button.stories.ts
@@ -1,10 +1,10 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonDefaultArgs,
   buttonDefaultArgTypes,
   requestSubmit,
-} from '../common/button-common-stories';
+} from '../common/button-common-stories.js';
 import {
   commonDecorators,
   fixedWidth,
@@ -21,13 +21,14 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
-} from '../common/common-stories';
+} from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator';
-import './secondary-button';
+import '../../loading-indicator.js';
+import './secondary-button.js';
 
 const defaultArgTypes: ArgTypes = { ...buttonDefaultArgTypes };
 
@@ -45,6 +46,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;
@@ -61,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/secondary-button/secondary-button.ts b/src/components/button/secondary-button/secondary-button.ts
index 60adee1c6e..415f2d3cdb 100644
--- a/src/components/button/secondary-button/secondary-button.ts
+++ b/src/components/button/secondary-button/secondary-button.ts
@@ -1,8 +1,9 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors';
-import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common.js';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'secondary' variant.
diff --git a/src/components/button/tertiary-button-link.ts b/src/components/button/tertiary-button-link.ts
new file mode 100644
index 0000000000..9ac4328957
--- /dev/null
+++ b/src/components/button/tertiary-button-link.ts
@@ -0,0 +1 @@
+export * from './tertiary-button-link/tertiary-button-link.js';
diff --git a/src/components/button/tertiary-button-link/index.ts b/src/components/button/tertiary-button-link/index.ts
deleted file mode 100644
index 71d0da4b4e..0000000000
--- a/src/components/button/tertiary-button-link/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tertiary-button-link';
diff --git a/src/components/button/tertiary-button-link/tertiary-button-link.spec.ts b/src/components/button/tertiary-button-link/tertiary-button-link.spec.ts
index 656945c762..8e43c9cb5b 100644
--- a/src/components/button/tertiary-button-link/tertiary-button-link.spec.ts
+++ b/src/components/button/tertiary-button-link/tertiary-button-link.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from '@open-wc/testing';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import { buttonLinkIconTestTemplate, buttonLinkTestTemplate } from '../common/button-test-utils';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { buttonLinkIconTestTemplate, buttonLinkTestTemplate } from '../common/button-test-utils.js';
 
-import type { SbbTertiaryButtonLinkElement } from './tertiary-button-link';
-import './tertiary-button-link';
+import type { SbbTertiaryButtonLinkElement } from './tertiary-button-link.js';
+import './tertiary-button-link.js';
 
 describe(`sbb-tertiary-button-link`, () => {
   describe('renders a sbb-tertiary-button-link without icon', async () => {
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 f57c55b2ee..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,9 +1,9 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonLinkDefaultArgs,
   buttonLinkDefaultArgTypes,
-} from '../common/button-link-common-stories';
+} from '../common/button-link-common-stories.js';
 import {
   commonDecorators,
   fixedWidth,
@@ -20,13 +20,14 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
-} from '../common/common-stories';
+} from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator';
-import './tertiary-button-link';
+import '../../loading-indicator.js';
+import './tertiary-button-link.js';
 
 const defaultArgTypes: ArgTypes = { ...buttonLinkDefaultArgTypes };
 
@@ -44,6 +45,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;
@@ -58,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-link/tertiary-button-link.ts b/src/components/button/tertiary-button-link/tertiary-button-link.ts
index 5e1a34328f..114dfe6881 100644
--- a/src/components/button/tertiary-button-link/tertiary-button-link.ts
+++ b/src/components/button/tertiary-button-link/tertiary-button-link.ts
@@ -1,8 +1,9 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
-import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common.js';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'tertiary' variant, which will behave as a link.
diff --git a/src/components/button/tertiary-button-static.ts b/src/components/button/tertiary-button-static.ts
new file mode 100644
index 0000000000..fbf448799f
--- /dev/null
+++ b/src/components/button/tertiary-button-static.ts
@@ -0,0 +1 @@
+export * from './tertiary-button-static/tertiary-button-static.js';
diff --git a/src/components/button/tertiary-button-static/index.ts b/src/components/button/tertiary-button-static/index.ts
deleted file mode 100644
index e7863205a0..0000000000
--- a/src/components/button/tertiary-button-static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tertiary-button-static';
diff --git a/src/components/button/tertiary-button-static/tertiary-button-static.spec.ts b/src/components/button/tertiary-button-static/tertiary-button-static.spec.ts
index 2dee1978c8..ae392b1ff0 100644
--- a/src/components/button/tertiary-button-static/tertiary-button-static.spec.ts
+++ b/src/components/button/tertiary-button-static/tertiary-button-static.spec.ts
@@ -1,15 +1,15 @@
 import { expect } from '@open-wc/testing';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 import {
   buttonIconTestTemplate,
   buttonSlottedIconTestTemplate,
   buttonSpaceIconTestTemplate,
   buttonTestTemplate,
-} from '../common/button-test-utils';
+} from '../common/button-test-utils.js';
 
-import type { SbbTertiaryButtonStaticElement } from './tertiary-button-static';
-import './tertiary-button-static';
+import type { SbbTertiaryButtonStaticElement } from './tertiary-button-static.js';
+import './tertiary-button-static.js';
 
 describe(`sbb-tertiary-button-static`, () => {
   describe('renders a sbb-secondary-button-static without icon', async () => {
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 743ba465ec..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,
@@ -19,13 +19,14 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
-  withSlottedIcon,
+  sizeS,
   withHiddenSlottedIcon,
-} from '../common/common-stories';
+  withSlottedIcon,
+} from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator';
-import './tertiary-button-static';
+import '../../loading-indicator.js';
+import './tertiary-button-static.js';
 
 const disabled: InputType = {
   control: {
@@ -56,6 +57,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;
@@ -70,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-static/tertiary-button-static.ts b/src/components/button/tertiary-button-static/tertiary-button-static.ts
index 0542ca7c64..8b2559a873 100644
--- a/src/components/button/tertiary-button-static/tertiary-button-static.ts
+++ b/src/components/button/tertiary-button-static/tertiary-button-static.ts
@@ -1,8 +1,9 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbActionBaseElement, SbbDisabledMixin } from '../../core/common-behaviors';
-import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common';
+import { SbbActionBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledMixin } from '../../core/mixins.js';
+import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common.js';
 
 /**
  * It displays a static button enhanced with the SBB Design in the 'tertiary' variant.
diff --git a/src/components/button/tertiary-button.ts b/src/components/button/tertiary-button.ts
new file mode 100644
index 0000000000..b7eb94f89e
--- /dev/null
+++ b/src/components/button/tertiary-button.ts
@@ -0,0 +1 @@
+export * from './tertiary-button/tertiary-button.js';
diff --git a/src/components/button/tertiary-button/index.ts b/src/components/button/tertiary-button/index.ts
deleted file mode 100644
index 23710a689a..0000000000
--- a/src/components/button/tertiary-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tertiary-button';
diff --git a/src/components/button/tertiary-button/tertiary-button.spec.ts b/src/components/button/tertiary-button/tertiary-button.spec.ts
index 2b6d14b80c..c3e80fa177 100644
--- a/src/components/button/tertiary-button/tertiary-button.spec.ts
+++ b/src/components/button/tertiary-button/tertiary-button.spec.ts
@@ -1,15 +1,15 @@
 import { expect } from '@open-wc/testing';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 import {
   buttonTestTemplate,
   buttonIconTestTemplate,
   buttonSlottedIconTestTemplate,
   buttonSpaceIconTestTemplate,
-} from '../common/button-test-utils';
+} from '../common/button-test-utils.js';
 
-import type { SbbTertiaryButtonElement } from './tertiary-button';
-import './tertiary-button';
+import type { SbbTertiaryButtonElement } from './tertiary-button.js';
+import './tertiary-button.js';
 
 describe(`sbb-tertiary-button`, () => {
   describe('renders a sbb-tertiary-button without icon', async () => {
diff --git a/src/components/button/tertiary-button/tertiary-button.stories.ts b/src/components/button/tertiary-button/tertiary-button.stories.ts
index 0dc5b2b78b..d67469fc66 100644
--- a/src/components/button/tertiary-button/tertiary-button.stories.ts
+++ b/src/components/button/tertiary-button/tertiary-button.stories.ts
@@ -1,10 +1,10 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonDefaultArgs,
   buttonDefaultArgTypes,
   requestSubmit,
-} from '../common/button-common-stories';
+} from '../common/button-common-stories.js';
 import {
   commonDecorators,
   fixedWidth,
@@ -21,13 +21,14 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
-} from '../common/common-stories';
+} from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator';
-import './tertiary-button';
+import '../../loading-indicator.js';
+import './tertiary-button.js';
 
 const defaultArgTypes: ArgTypes = { ...buttonDefaultArgTypes };
 
@@ -45,6 +46,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;
@@ -60,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/tertiary-button/tertiary-button.ts b/src/components/button/tertiary-button/tertiary-button.ts
index 4701fa9bca..02c656130b 100644
--- a/src/components/button/tertiary-button/tertiary-button.ts
+++ b/src/components/button/tertiary-button/tertiary-button.ts
@@ -1,8 +1,9 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors';
-import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common.js';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'tertiary' variant.
diff --git a/src/components/button/transparent-button-link.ts b/src/components/button/transparent-button-link.ts
new file mode 100644
index 0000000000..8ce919eae4
--- /dev/null
+++ b/src/components/button/transparent-button-link.ts
@@ -0,0 +1 @@
+export * from './transparent-button-link/transparent-button-link.js';
diff --git a/src/components/button/transparent-button-link/index.ts b/src/components/button/transparent-button-link/index.ts
deleted file mode 100644
index 9320fbc5d5..0000000000
--- a/src/components/button/transparent-button-link/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './transparent-button-link';
diff --git a/src/components/button/transparent-button-link/transparent-button-link.spec.ts b/src/components/button/transparent-button-link/transparent-button-link.spec.ts
index bffbd9b969..f540832d2c 100644
--- a/src/components/button/transparent-button-link/transparent-button-link.spec.ts
+++ b/src/components/button/transparent-button-link/transparent-button-link.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from '@open-wc/testing';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import { buttonLinkIconTestTemplate, buttonLinkTestTemplate } from '../common/button-test-utils';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { buttonLinkIconTestTemplate, buttonLinkTestTemplate } from '../common/button-test-utils.js';
 
-import type { SbbTransparentButtonLinkElement } from './transparent-button-link';
-import './transparent-button-link';
+import type { SbbTransparentButtonLinkElement } from './transparent-button-link.js';
+import './transparent-button-link.js';
 
 describe(`sbb-transparent-button-link`, () => {
   describe('renders a sbb-transparent-button-link without icon', async () => {
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 0157296298..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,9 +1,9 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonLinkDefaultArgs,
   buttonLinkDefaultArgTypes,
-} from '../common/button-link-common-stories';
+} from '../common/button-link-common-stories.js';
 import {
   commonDecorators,
   fixedWidth,
@@ -20,13 +20,14 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
-} from '../common/common-stories';
+} from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator';
-import './transparent-button-link';
+import '../../loading-indicator.js';
+import './transparent-button-link.js';
 
 const defaultArgTypes: ArgTypes = { ...buttonLinkDefaultArgTypes };
 
@@ -44,6 +45,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;
@@ -58,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-link/transparent-button-link.ts b/src/components/button/transparent-button-link/transparent-button-link.ts
index 5514a3bc12..06f22a5a24 100644
--- a/src/components/button/transparent-button-link/transparent-button-link.ts
+++ b/src/components/button/transparent-button-link/transparent-button-link.ts
@@ -1,8 +1,13 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
-import { buttonCommonStyle, buttonTransparentStyle, SbbButtonCommonElementMixin } from '../common';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import {
+  buttonCommonStyle,
+  buttonTransparentStyle,
+  SbbButtonCommonElementMixin,
+} from '../common.js';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'transparent' variant, which will behave as a link.
diff --git a/src/components/button/transparent-button-static.ts b/src/components/button/transparent-button-static.ts
new file mode 100644
index 0000000000..e51b6deab4
--- /dev/null
+++ b/src/components/button/transparent-button-static.ts
@@ -0,0 +1 @@
+export * from './transparent-button-static/transparent-button-static.js';
diff --git a/src/components/button/transparent-button-static/index.ts b/src/components/button/transparent-button-static/index.ts
deleted file mode 100644
index aeadbbb3e6..0000000000
--- a/src/components/button/transparent-button-static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './transparent-button-static';
diff --git a/src/components/button/transparent-button-static/transparent-button-static.spec.ts b/src/components/button/transparent-button-static/transparent-button-static.spec.ts
index f5e67be84c..62c79b0b56 100644
--- a/src/components/button/transparent-button-static/transparent-button-static.spec.ts
+++ b/src/components/button/transparent-button-static/transparent-button-static.spec.ts
@@ -1,15 +1,15 @@
 import { expect } from '@open-wc/testing';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 import {
   buttonIconTestTemplate,
   buttonSlottedIconTestTemplate,
   buttonSpaceIconTestTemplate,
   buttonTestTemplate,
-} from '../common/button-test-utils';
+} from '../common/button-test-utils.js';
 
-import type { SbbTransparentButtonStaticElement } from './transparent-button-static';
-import './transparent-button-static';
+import type { SbbTransparentButtonStaticElement } from './transparent-button-static.js';
+import './transparent-button-static.js';
 
 describe(`sbb-transparent-button-static`, () => {
   describe('renders a sbb-transparent-button-static without icon', async () => {
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 825c83d8b5..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,
@@ -19,13 +19,14 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
-  withSlottedIcon,
+  sizeS,
   withHiddenSlottedIcon,
-} from '../common/common-stories';
+  withSlottedIcon,
+} from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator';
-import './transparent-button-static';
+import '../../loading-indicator.js';
+import './transparent-button-static.js';
 
 const disabled: InputType = {
   control: {
@@ -56,6 +57,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;
@@ -70,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-static/transparent-button-static.ts b/src/components/button/transparent-button-static/transparent-button-static.ts
index 284db4b0a9..8c60ea781d 100644
--- a/src/components/button/transparent-button-static/transparent-button-static.ts
+++ b/src/components/button/transparent-button-static/transparent-button-static.ts
@@ -1,8 +1,13 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbActionBaseElement, SbbDisabledMixin } from '../../core/common-behaviors';
-import { buttonCommonStyle, buttonTransparentStyle, SbbButtonCommonElementMixin } from '../common';
+import { SbbActionBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledMixin } from '../../core/mixins.js';
+import {
+  buttonCommonStyle,
+  buttonTransparentStyle,
+  SbbButtonCommonElementMixin,
+} from '../common.js';
 
 /**
  * It displays a static button enhanced with the SBB Design in the 'transparent' variant.
diff --git a/src/components/button/transparent-button.ts b/src/components/button/transparent-button.ts
new file mode 100644
index 0000000000..6871e829d7
--- /dev/null
+++ b/src/components/button/transparent-button.ts
@@ -0,0 +1 @@
+export * from './transparent-button/transparent-button.js';
diff --git a/src/components/button/transparent-button/index.ts b/src/components/button/transparent-button/index.ts
deleted file mode 100644
index ff284fd45e..0000000000
--- a/src/components/button/transparent-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './transparent-button';
diff --git a/src/components/button/transparent-button/transparent-button.spec.ts b/src/components/button/transparent-button/transparent-button.spec.ts
index 9c57462e75..b5fe2a8b19 100644
--- a/src/components/button/transparent-button/transparent-button.spec.ts
+++ b/src/components/button/transparent-button/transparent-button.spec.ts
@@ -1,15 +1,15 @@
 import { expect } from '@open-wc/testing';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 import {
   buttonTestTemplate,
   buttonIconTestTemplate,
   buttonSlottedIconTestTemplate,
   buttonSpaceIconTestTemplate,
-} from '../common/button-test-utils';
+} from '../common/button-test-utils.js';
 
-import type { SbbTransparentButtonElement } from './transparent-button';
-import './transparent-button';
+import type { SbbTransparentButtonElement } from './transparent-button.js';
+import './transparent-button.js';
 
 describe(`sbb-transparent-button`, () => {
   describe('renders a sbb-transparent-button without icon', async () => {
diff --git a/src/components/button/transparent-button/transparent-button.stories.ts b/src/components/button/transparent-button/transparent-button.stories.ts
index f6c7b475ff..635e46d8f4 100644
--- a/src/components/button/transparent-button/transparent-button.stories.ts
+++ b/src/components/button/transparent-button/transparent-button.stories.ts
@@ -1,10 +1,10 @@
-import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 
 import {
   buttonDefaultArgs,
   buttonDefaultArgTypes,
   requestSubmit,
-} from '../common/button-common-stories';
+} from '../common/button-common-stories.js';
 import {
   commonDecorators,
   fixedWidth,
@@ -21,13 +21,14 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
-} from '../common/common-stories';
+} from '../common/common-stories.js';
 
 import readme from './readme.md?raw';
-import '../../loading-indicator';
-import './transparent-button';
+import '../../loading-indicator.js';
+import './transparent-button.js';
 
 const defaultArgTypes: ArgTypes = { ...buttonDefaultArgTypes };
 
@@ -45,6 +46,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;
@@ -60,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/transparent-button.ts b/src/components/button/transparent-button/transparent-button.ts
index 76ff6335ff..b8fbb74862 100644
--- a/src/components/button/transparent-button/transparent-button.ts
+++ b/src/components/button/transparent-button/transparent-button.ts
@@ -1,8 +1,13 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin, buttonCommonStyle, buttonTransparentStyle } from '../common';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import {
+  buttonCommonStyle,
+  buttonTransparentStyle,
+  SbbButtonCommonElementMixin,
+} from '../common.js';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'transparent' variant.
diff --git a/src/components/calendar.ts b/src/components/calendar.ts
new file mode 100644
index 0000000000..f4cae49fe2
--- /dev/null
+++ b/src/components/calendar.ts
@@ -0,0 +1 @@
+export * from './calendar/calendar.js';
diff --git a/src/components/calendar/calendar.e2e.ts b/src/components/calendar/calendar.e2e.ts
index c494ce70c1..cacfb4a273 100644
--- a/src/components/calendar/calendar.e2e.ts
+++ b/src/components/calendar/calendar.e2e.ts
@@ -2,12 +2,12 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing.js';
 
-import { SbbCalendarElement } from './calendar';
+import { SbbCalendarElement } from './calendar.js';
 
-import '../button';
+import '../button.js';
 
 describe(`sbb-calendar with ${fixture.name}`, () => {
   let element: SbbCalendarElement;
diff --git a/src/components/calendar/calendar.scss b/src/components/calendar/calendar.scss
index 1da476ceaa..f071fbaf7c 100644
--- a/src/components/calendar/calendar.scss
+++ b/src/components/calendar/calendar.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-calendar-cell-size: #{sbb.px-to-rem-build(40)};
@@ -36,6 +35,8 @@
     --sbb-calendar-control-view-change-height: #{sbb.px-to-rem-build(48)};
   }
 
+  display: block;
+
   // We add width definition to host, to make overwriting easy for consumers.
   width: max-content;
 }
diff --git a/src/components/calendar/calendar.spec.ts b/src/components/calendar/calendar.spec.ts
index 5fe2ec8f56..845c48e729 100644
--- a/src/components/calendar/calendar.spec.ts
+++ b/src/components/calendar/calendar.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import './calendar';
+import './calendar.js';
 
 describe(`sbb-calendar`, () => {
   it('renders', async () => {
diff --git a/src/components/calendar/calendar.stories.ts b/src/components/calendar/calendar.stories.ts
index 9ffc669415..611d4992c6 100644
--- a/src/components/calendar/calendar.stories.ts
+++ b/src/components/calendar/calendar.stories.ts
@@ -1,15 +1,15 @@
 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';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { defaultDateAdapter } from '../core/datetime';
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import { defaultDateAdapter } from '../core/datetime.js';
 
-import { SbbCalendarElement } from './calendar';
+import { SbbCalendarElement } from './calendar.js';
 import readme from './readme.md?raw';
 
 const getCalendarAttr = (min: Date | string, max: Date | string): Record<string, string> => {
@@ -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/calendar/calendar.ts b/src/components/calendar/calendar.ts
index 68b351ab7a..2c272f510d 100644
--- a/src/components/calendar/calendar.ts
+++ b/src/components/calendar/calendar.ts
@@ -1,20 +1,27 @@
-import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
-import { html, isServer, LitElement, nothing } from 'lit';
+import {
+  type CSSResultGroup,
+  html,
+  isServer,
+  LitElement,
+  nothing,
+  type PropertyValues,
+  type TemplateResult,
+} from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { isArrowKeyOrPageKeysPressed, sbbInputModalityDetector } from '../core/a11y';
-import { LanguageController } from '../core/common-behaviors';
-import type { DateAdapter } from '../core/datetime';
+import { isArrowKeyOrPageKeysPressed, sbbInputModalityDetector } from '../core/a11y.js';
+import { SbbConnectedAbortController, SbbLanguageController } from '../core/controllers.js';
+import { type DateAdapter, readDataNow } from '../core/datetime.js';
 import {
   DAYS_PER_ROW,
   defaultDateAdapter,
   MONTHS_PER_ROW,
   YEARS_PER_PAGE,
   YEARS_PER_ROW,
-} from '../core/datetime';
-import { isBreakpoint } from '../core/dom';
-import { EventEmitter, ConnectedAbortController } from '../core/eventing';
+} from '../core/datetime.js';
+import { isBreakpoint } from '../core/dom.js';
+import { EventEmitter } from '../core/eventing.js';
 import {
   i18nCalendarDateSelection,
   i18nNextMonth,
@@ -24,14 +31,14 @@ import {
   i18nPreviousYear,
   i18nPreviousYearRange,
   i18nYearMonthSelection,
-} from '../core/i18n';
-import type { SbbDateLike } from '../core/interfaces';
+} from '../core/i18n.js';
+import type { SbbDateLike } from '../core/interfaces.js';
 
 import style from './calendar.scss?lit&inline';
 
-import '../button/secondary-button';
-import '../icon';
-import '../screen-reader-only';
+import '../button/secondary-button.js';
+import '../icon.js';
+import '../screen-reader-only.js';
 
 /**
  * In keyboard navigation, the cell's index and the element's index in its month / year batch must be distinguished;
@@ -149,7 +156,13 @@ export class SbbCalendarElement<T = Date> extends LitElement {
   @state() private _selected?: string;
 
   /** The current wide property considering property value and breakpoints. From zero to small `wide` has always to be false. */
-  @state() private _wide: boolean = false;
+  @state()
+  private set _wide(wide: boolean) {
+    this.toggleAttribute('data-wide', wide);
+  }
+  private get _wide(): boolean {
+    return this.hasAttribute('data-wide');
+  }
 
   @state() private _calendarView: CalendarView = 'day';
 
@@ -194,8 +207,8 @@ export class SbbCalendarElement<T = Date> extends LitElement {
 
   private _initialized = false;
 
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this).withHandler(() => {
+  private _abort = new SbbConnectedAbortController(this);
+  private _language = new SbbLanguageController(this).withHandler(() => {
     this._monthNames = this._dateAdapter.getMonthNames('long');
     this._createMonthRows();
   });
@@ -567,9 +580,9 @@ export class SbbCalendarElement<T = Date> extends LitElement {
   }
 
   private _nextYearRangeDisabled(): boolean {
-    const lastYear = (isBreakpoint('medium') && this.wide ? this._nextMonthYears : this._years)
-      .at(-1)!
-      .at(-1)!;
+    const years = isBreakpoint('medium') && this.wide ? this._nextMonthYears : this._years;
+    const lastYearRange = years[years.length - 1];
+    const lastYear = lastYearRange[lastYearRange.length - 1];
     const nextYear = this._dateAdapter.createDate(lastYear + 1, 1, 1);
     return this._nextDisabled(nextYear);
   }
@@ -782,7 +795,7 @@ export class SbbCalendarElement<T = Date> extends LitElement {
 
   private _now(): T {
     if (this.hasAttribute('data-now')) {
-      const today = new Date(+this.getAttribute('data-now')!);
+      const today = new Date(readDataNow(this));
       if (defaultDateAdapter.isValid(today)) {
         return this._dateAdapter.createDate(
           today.getFullYear(),
@@ -1022,7 +1035,7 @@ export class SbbCalendarElement<T = Date> extends LitElement {
         ${this._wide
           ? html`<thead class="sbb-calendar__table-header" aria-hidden="true">
               <tr class="sbb-calendar__table-header-row">
-                <th class="sbb-calendar__table-header" .colspan=${MONTHS_PER_ROW}>${year}</th>
+                <th class="sbb-calendar__table-header" colspan=${MONTHS_PER_ROW}>${year}</th>
               </tr>
             </thead>`
           : nothing}
@@ -1240,7 +1253,7 @@ export class SbbCalendarElement<T = Date> extends LitElement {
       this._resetFocus = true;
       this._calendarView = this._nextCalendarView;
     } else if (event.animationName === 'show') {
-      this.toggleAttribute('data-transition', false);
+      this.removeAttribute('data-transition');
     }
   }
 
@@ -1252,7 +1265,6 @@ export class SbbCalendarElement<T = Date> extends LitElement {
   }
 
   protected override render(): TemplateResult {
-    this.toggleAttribute('data-wide', this._wide);
     return html`<div class="sbb-calendar__wrapper">${this._getView}</div>`;
   }
 }
diff --git a/src/components/calendar/index.ts b/src/components/calendar/index.ts
deleted file mode 100644
index edaf8f07ab..0000000000
--- a/src/components/calendar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './calendar';
diff --git a/src/components/card.ts b/src/components/card.ts
new file mode 100644
index 0000000000..a27814667a
--- /dev/null
+++ b/src/components/card.ts
@@ -0,0 +1,5 @@
+export * from './card/card.js';
+export * from './card/card-badge.js';
+export * from './card/card-button.js';
+export * from './card/card-link.js';
+export * from './card/common.js';
diff --git a/src/components/card/card-badge.ts b/src/components/card/card-badge.ts
new file mode 100644
index 0000000000..deb29fd33e
--- /dev/null
+++ b/src/components/card/card-badge.ts
@@ -0,0 +1 @@
+export * from './card-badge/card-badge.js';
diff --git a/src/components/card/card-badge/card-badge.e2e.ts b/src/components/card/card-badge/card-badge.e2e.ts
index 4076223a8a..0981e84a06 100644
--- a/src/components/card/card-badge/card-badge.e2e.ts
+++ b/src/components/card/card-badge/card-badge.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import { SbbCardBadgeElement } from './card-badge';
+import { SbbCardBadgeElement } from './card-badge.js';
 
 describe(`sbb-card-badge with ${fixture.name}`, () => {
   let element: SbbCardBadgeElement;
diff --git a/src/components/card/card-badge/card-badge.scss b/src/components/card/card-badge/card-badge.scss
index df6b2ff05b..ab6714a590 100644
--- a/src/components/card/card-badge/card-badge.scss
+++ b/src/components/card/card-badge/card-badge.scss
@@ -1,11 +1,12 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-card-badge-gap: var(--sbb-spacing-fixed-2x);
+
+  display: block;
 }
 
 :host([color='white']) {
diff --git a/src/components/card/card-badge/card-badge.spec.ts b/src/components/card/card-badge/card-badge.spec.ts
index 1aa3b5c934..9b34bec138 100644
--- a/src/components/card/card-badge/card-badge.spec.ts
+++ b/src/components/card/card-badge/card-badge.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbCardBadgeElement } from './card-badge';
+import type { SbbCardBadgeElement } from './card-badge.js';
 
-import './card-badge';
+import './card-badge.js';
 
 describe(`sbb-card-badge`, () => {
   let element: SbbCardBadgeElement;
diff --git a/src/components/card/card-badge/card-badge.stories.ts b/src/components/card/card-badge/card-badge.stories.ts
index 86f39c23d1..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 '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 
-import './card-badge';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color':
-    context.args.color === 'charcoal' ? 'var(--sbb-color-white)' : 'var(--sbb-color-charcoal)',
-});
+import './card-badge.js';
+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-badge/card-badge.ts b/src/components/card/card-badge/card-badge.ts
index 467d2f118a..153a32de6c 100644
--- a/src/components/card/card-badge/card-badge.ts
+++ b/src/components/card/card-badge/card-badge.ts
@@ -2,8 +2,8 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { hostAttributes } from '../../core/common-behaviors';
-import { getDocumentWritingMode } from '../../core/dom';
+import { hostAttributes } from '../../core/decorators.js';
+import { getDocumentWritingMode } from '../../core/dom.js';
 
 import style from './card-badge.scss?lit&inline';
 
@@ -38,7 +38,7 @@ export class SbbCardBadgeElement extends LitElement {
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
     if (this._parentElement) {
-      this._parentElement.toggleAttribute('data-has-card-badge', false);
+      this._parentElement.removeAttribute('data-has-card-badge');
     }
     this._parentElement = undefined;
   }
diff --git a/src/components/card/card-badge/index.ts b/src/components/card/card-badge/index.ts
deleted file mode 100644
index 4ff9578cf2..0000000000
--- a/src/components/card/card-badge/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './card-badge';
diff --git a/src/components/card/card-button.ts b/src/components/card/card-button.ts
new file mode 100644
index 0000000000..64ce51acd8
--- /dev/null
+++ b/src/components/card/card-button.ts
@@ -0,0 +1 @@
+export * from './card-button/card-button.js';
diff --git a/src/components/card/card-button/card-button.e2e.ts b/src/components/card/card-button/card-button.e2e.ts
index a48885c643..c4aa38cdfe 100644
--- a/src/components/card/card-button/card-button.e2e.ts
+++ b/src/components/card/card-button/card-button.e2e.ts
@@ -2,14 +2,14 @@ import { expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbCardElement } from '../card';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
+import type { SbbCardElement } from '../card.js';
 
-import type { SbbCardButtonElement } from './card-button';
+import type { SbbCardButtonElement } from './card-button.js';
 
-import '../card';
-import './card-button';
+import '../card.js';
+import './card-button.js';
 
 describe(`sbb-card-button with ${fixture.name}`, () => {
   let element: SbbCardElement;
@@ -17,7 +17,7 @@ describe(`sbb-card-button with ${fixture.name}`, () => {
   it('should render an active sbb-card-button', async () => {
     element = await fixture(
       html`<sbb-card><sbb-card-button active>Click me</sbb-card-button>Content</sbb-card>`,
-      { modules: ['../card/index.ts', './card-button.ts'] },
+      { modules: ['../card.ts', './card-button.ts'] },
     );
 
     expect(element).to.have.attribute('data-has-action');
@@ -47,11 +47,11 @@ describe(`sbb-card-button with ${fixture.name}`, () => {
   it('should correctly toggle active state', async () => {
     element = await fixture(
       html`<sbb-card><sbb-card-button>Click me</sbb-card-button>Content</sbb-card>`,
-      { modules: ['../card/index.ts', './card-button.ts'] },
+      { modules: ['../card.ts', './card-button.ts'] },
     );
     expect(element).not.to.have.attribute('data-has-active-action');
 
-    element.querySelector<SbbCardButtonElement>('sbb-card-button')!.setAttribute('active', '');
+    element.querySelector<SbbCardButtonElement>('sbb-card-button')!.toggleAttribute('active', true);
     await waitForLitRender(element);
 
     expect(element).to.have.attribute('data-has-active-action');
@@ -65,7 +65,7 @@ describe(`sbb-card-button with ${fixture.name}`, () => {
           <button>Content</button>
         </span>
       </sbb-card>`,
-      { modules: ['../card/index.ts', './card-button.ts'] },
+      { modules: ['../card.ts', './card-button.ts'] },
     );
 
     expect(element).to.have.attribute('data-has-action');
@@ -89,7 +89,7 @@ describe(`sbb-card-button with ${fixture.name}`, () => {
           <button>Content</button>
         </span>
       </sbb-card>`,
-      { modules: ['../card/index.ts', './card-button.ts'] },
+      { modules: ['../card.ts', './card-button.ts'] },
     );
     expect(element.querySelector('button')).to.have.attribute('data-card-focusable');
 
@@ -120,7 +120,7 @@ describe(`sbb-card-button with ${fixture.name}`, () => {
         <sbb-card-button>Click me</sbb-card-button>
         <span id="content"></span>
       </sbb-card>`,
-      { modules: ['../card/index.ts', './card-button.ts'] },
+      { modules: ['../card.ts', './card-button.ts'] },
     );
 
     // Add a button to slot
@@ -136,7 +136,7 @@ describe(`sbb-card-button with ${fixture.name}`, () => {
       html` <sbb-card>
         <span id="content"><button></button></span>
       </sbb-card>`,
-      { modules: ['../card/index.ts'] },
+      { modules: ['../card.ts'] },
     );
 
     // Add a sbb-card-button
@@ -153,7 +153,7 @@ describe(`sbb-card-button with ${fixture.name}`, () => {
     beforeEach(async () => {
       element = await fixture(
         html`<sbb-card><sbb-card-button id="focus-id">Card</sbb-card-button>Content</sbb-card>`,
-        { modules: ['../card/index.ts', './card-button.ts'] },
+        { modules: ['../card.ts', './card-button.ts'] },
       );
       action = element.querySelector<SbbCardButtonElement>('sbb-card-button')!;
     });
diff --git a/src/components/card/card-button/card-button.stories.ts b/src/components/card/card-button/card-button.stories.ts
index 4f7690c9db..915b9886c9 100644
--- a/src/components/card/card-button/card-button.stories.ts
+++ b/src/components/card/card-button/card-button.stories.ts
@@ -4,7 +4,7 @@ import { html } from 'lit';
 
 import readme from './readme.md?raw';
 
-import '../card';
+import '../card.js';
 
 const Template = (): TemplateResult => html`
   <sbb-card color="milk">
diff --git a/src/components/card/card-button/card-button.ts b/src/components/card/card-button/card-button.ts
index 5d0237e253..a9746d5b16 100644
--- a/src/components/card/card-button/card-button.ts
+++ b/src/components/card/card-button/card-button.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbButtonBaseElement } from '../../core/common-behaviors';
-import { SbbCardActionCommonElementMixin } from '../common';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbCardActionCommonElementMixin } from '../common.js';
 
 /**
  * It turns the `sbb-card` into a button element.
diff --git a/src/components/card/card-button/index.ts b/src/components/card/card-button/index.ts
deleted file mode 100644
index 7218689b68..0000000000
--- a/src/components/card/card-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './card-button';
diff --git a/src/components/card/card-link.ts b/src/components/card/card-link.ts
new file mode 100644
index 0000000000..ae26072aed
--- /dev/null
+++ b/src/components/card/card-link.ts
@@ -0,0 +1 @@
+export * from './card-link/card-link.js';
diff --git a/src/components/card/card-link/card-link.e2e.ts b/src/components/card/card-link/card-link.e2e.ts
index 731bd36f8d..1453216785 100644
--- a/src/components/card/card-link/card-link.e2e.ts
+++ b/src/components/card/card-link/card-link.e2e.ts
@@ -2,14 +2,14 @@ import { expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbCardElement } from '../card';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
+import type { SbbCardElement } from '../card.js';
 
-import type { SbbCardLinkElement } from './card-link';
+import type { SbbCardLinkElement } from './card-link.js';
 
-import '../card';
-import './card-link';
+import '../card.js';
+import './card-link.js';
 
 describe(`sbb-card-link with ${fixture.name}`, () => {
   let element: SbbCardElement;
@@ -26,7 +26,7 @@ describe(`sbb-card-link with ${fixture.name}`, () => {
           Content text
         </sbb-card>
       `,
-      { modules: ['../card/index.ts', './card-link.ts'] },
+      { modules: ['../card.ts', './card-link.ts'] },
     );
 
     expect(element).to.have.attribute('data-has-action');
@@ -57,11 +57,11 @@ describe(`sbb-card-link with ${fixture.name}`, () => {
   it('should correctly toggle active state', async () => {
     element = await fixture(
       html`<sbb-card><sbb-card-link href="#">Click me</sbb-card-link>Content</sbb-card>`,
-      { modules: ['../card/index.ts', './card-link.ts'] },
+      { modules: ['../card.ts', './card-link.ts'] },
     );
     expect(element).not.to.have.attribute('data-has-active-action');
 
-    element.querySelector<SbbCardLinkElement>('sbb-card-link')!.setAttribute('active', '');
+    element.querySelector<SbbCardLinkElement>('sbb-card-link')!.toggleAttribute('active', true);
     await waitForLitRender(element);
 
     expect(element).to.have.attribute('data-has-active-action');
@@ -73,7 +73,7 @@ describe(`sbb-card-link with ${fixture.name}`, () => {
         ><sbb-card-link active href="#">Click me</sbb-card-link
         ><span><button>Content</button></span></sbb-card
       >`,
-      { modules: ['../card/index.ts', './card-link.ts'] },
+      { modules: ['../card.ts', './card-link.ts'] },
     );
 
     expect(element).to.have.attribute('data-has-action');
@@ -97,7 +97,7 @@ describe(`sbb-card-link with ${fixture.name}`, () => {
           <button>Content</button>
         </span>
       </sbb-card>`,
-      { modules: ['../card/index.ts', './card-link.ts'] },
+      { modules: ['../card.ts', './card-link.ts'] },
     );
     expect(element.querySelector('button')).to.have.attribute('data-card-focusable');
 
@@ -128,7 +128,7 @@ describe(`sbb-card-link with ${fixture.name}`, () => {
         <sbb-card-link href="#">Click me</sbb-card-link>
         <span id="content"></span>
       </sbb-card>`,
-      { modules: ['../card/index.ts', './card-link.ts'] },
+      { modules: ['../card.ts', './card-link.ts'] },
     );
 
     // Add a button to slot
@@ -146,7 +146,7 @@ describe(`sbb-card-link with ${fixture.name}`, () => {
           <button></button>
         </span>
       </sbb-card>`,
-      { modules: ['../card/index.ts'] },
+      { modules: ['../card.ts'] },
     );
 
     // Add a sbb-card-link
@@ -170,7 +170,7 @@ describe(`sbb-card-link with ${fixture.name}`, () => {
             Content
           </sbb-card>
         `,
-        { modules: ['../card/index.ts', './card-link.ts'] },
+        { modules: ['../card.ts', './card-link.ts'] },
       );
       action = element.querySelector<SbbCardLinkElement>('sbb-card-link')!;
     });
diff --git a/src/components/card/card-link/card-link.stories.ts b/src/components/card/card-link/card-link.stories.ts
index d057486167..4af204b1b0 100644
--- a/src/components/card/card-link/card-link.stories.ts
+++ b/src/components/card/card-link/card-link.stories.ts
@@ -3,7 +3,7 @@ import { html, type TemplateResult } from 'lit';
 
 import readme from './readme.md?raw';
 
-import '../card';
+import '../card.js';
 
 const Template = (): TemplateResult => html`
   <sbb-card color="milk">
diff --git a/src/components/card/card-link/card-link.ts b/src/components/card/card-link/card-link.ts
index a02f9b0465..fe5a221ec7 100644
--- a/src/components/card/card-link/card-link.ts
+++ b/src/components/card/card-link/card-link.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbCardActionCommonElementMixin } from '../common';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+import { SbbCardActionCommonElementMixin } from '../common.js';
 
 /**
  * It turns the `sbb-card` into a link element.
diff --git a/src/components/card/card-link/index.ts b/src/components/card/card-link/index.ts
deleted file mode 100644
index e390095a59..0000000000
--- a/src/components/card/card-link/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './card-link';
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
new file mode 100644
index 0000000000..ad23a6dc8f
--- /dev/null
+++ b/src/components/card/card.ts
@@ -0,0 +1 @@
+export * from './card/card.js';
diff --git a/src/components/card/card/card.e2e.ts b/src/components/card/card/card.e2e.ts
index 4fa53f3fda..1d3bbaad30 100644
--- a/src/components/card/card/card.e2e.ts
+++ b/src/components/card/card/card.e2e.ts
@@ -1,11 +1,11 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import { SbbCardElement } from './card';
+import { SbbCardElement } from './card.js';
 
-import '../card-badge';
+import '../card-badge.js';
 
 describe(`sbb-card with ${fixture.name}`, () => {
   let element: SbbCardElement;
@@ -30,7 +30,7 @@ describe(`sbb-card with ${fixture.name}`, () => {
           </sbb-card-badge>
         </sbb-card>
       `,
-      { modules: ['./card.ts', '../card-badge/index.ts'] },
+      { modules: ['./card.ts', '../card-badge.ts'] },
     );
 
     expect(
@@ -69,7 +69,7 @@ describe(`sbb-card with ${fixture.name}`, () => {
           <span>19.99</span>
         </sbb-card-badge>
       </sbb-card>`,
-      { modules: ['./card.ts', '../card-badge/index.ts'] },
+      { modules: ['./card.ts', '../card-badge.ts'] },
     );
 
     expect(root.shadowRoot!.querySelector('.sbb-card__badge-wrapper')).not.to.be.ok;
diff --git a/src/components/card/card/card.scss b/src/components/card/card/card.scss
index cc3124a52a..665bef8c98 100644
--- a/src/components/card/card/card.scss
+++ b/src/components/card/card/card.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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;
 
 // # Stacking of action
 // To support content with actions that should be accessible, we have to stack the action and content like following:
@@ -11,6 +10,8 @@
 
 :host {
   @include sbb.card-variables;
+
+  display: block;
 }
 
 :host([color='milk']) {
diff --git a/src/components/card/card/card.spec.ts b/src/components/card/card/card.spec.ts
index 646c9ace33..81426af5a1 100644
--- a/src/components/card/card/card.spec.ts
+++ b/src/components/card/card/card.spec.ts
@@ -1,12 +1,12 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbCardElement } from './card';
+import type { SbbCardElement } from './card.js';
 
-import './card';
-import '../card-badge';
+import './card.js';
+import '../card-badge.js';
 
 describe(`sbb-card`, () => {
   let element: SbbCardElement;
diff --git a/src/components/card/card/card.stories.ts b/src/components/card/card/card.stories.ts
index dd111e516b..4e9c68c192 100644
--- a/src/components/card/card/card.stories.ts
+++ b/src/components/card/card/card.stories.ts
@@ -12,23 +12,14 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './card';
-import '../card-badge';
-import '../card-button';
-import '../card-link';
-import '../../title';
-
-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',
-});
+import './card.js';
+import '../card-badge.js';
+import '../card-button.js';
+import '../card-link.js';
+import '../../title.js';
 
 const ContentText = (): TemplateResult => html`
   <span class="sbb-text-m">
@@ -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/card/card/index.ts b/src/components/card/card/index.ts
deleted file mode 100644
index cb5809fedb..0000000000
--- a/src/components/card/card/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './card';
diff --git a/src/components/card/common.ts b/src/components/card/common.ts
new file mode 100644
index 0000000000..4c8c8f7510
--- /dev/null
+++ b/src/components/card/common.ts
@@ -0,0 +1 @@
+export * from './common/card-action-common.js';
diff --git a/src/components/card/common/card-action-common.ts b/src/components/card/common/card-action-common.ts
index 1c31d4bb19..80859815f7 100644
--- a/src/components/card/common/card-action-common.ts
+++ b/src/components/card/common/card-action-common.ts
@@ -2,19 +2,17 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { IS_FOCUSABLE_QUERY } from '../../core/a11y';
-import {
-  type AbstractConstructor,
-  hostAttributes,
-  type SbbActionBaseElement,
-} from '../../core/common-behaviors';
-import { AgnosticMutationObserver } from '../../core/observers';
-import type { SbbCardElement } from '../card';
-
-import '../../screen-reader-only';
+import { IS_FOCUSABLE_QUERY } from '../../core/a11y.js';
+import type { SbbActionBaseElement } from '../../core/base-elements.js';
+import { hostAttributes } from '../../core/decorators.js';
+import type { AbstractConstructor } from '../../core/mixins.js';
+import { AgnosticMutationObserver } from '../../core/observers.js';
+import type { SbbCardElement } from '../card.js';
 
 import style from './card-action.scss?lit&inline';
 
+import '../../screen-reader-only.js';
+
 export declare class SbbCardActionCommonElementMixinType {
   public active: boolean;
 }
@@ -75,7 +73,7 @@ export const SbbCardActionCommonElementMixin = <
       if (this._card) {
         this._card.toggleAttribute('data-has-action', true);
         this._card.toggleAttribute('data-has-active-action', this.active);
-        this._card.dataset.actionRole = this.getAttribute('role')!;
+        this._card.setAttribute('data-action-role', this.getAttribute('role')!);
 
         this._checkForSlottedActions();
         this._cardMutationObserver.observe(this._card, {
@@ -88,9 +86,9 @@ export const SbbCardActionCommonElementMixin = <
     public override disconnectedCallback(): void {
       super.disconnectedCallback();
       if (this._card) {
-        this._card.toggleAttribute('data-has-action', false);
-        this._card.toggleAttribute('data-has-active-action', false);
-        this._card.toggleAttribute('data-action-role', false);
+        ['data-has-action', 'data-has-active-action', 'data-action-role'].forEach((name) =>
+          this._card!.removeAttribute(name),
+        );
         this._card
           .querySelectorAll(`[data-card-focusable]`)
           .forEach((el) => el.removeAttribute('data-card-focusable'));
diff --git a/src/components/card/common/card-action.scss b/src/components/card/common/card-action.scss
index 1329c9d56b..bc9da7d11a 100644
--- a/src/components/card/common/card-action.scss
+++ b/src/components/card/common/card-action.scss
@@ -1,10 +1,11 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
+  display: block;
+
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
diff --git a/src/components/card/common/index.ts b/src/components/card/common/index.ts
deleted file mode 100644
index 445f7add31..0000000000
--- a/src/components/card/common/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './card-action-common';
diff --git a/src/components/card/index.ts b/src/components/card/index.ts
deleted file mode 100644
index 3d0ed284a1..0000000000
--- a/src/components/card/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './card';
-export * from './card-badge';
-export * from './card-button';
-export * from './card-link';
-export * from './common';
diff --git a/src/components/checkbox.ts b/src/components/checkbox.ts
new file mode 100644
index 0000000000..9aabfd750c
--- /dev/null
+++ b/src/components/checkbox.ts
@@ -0,0 +1,2 @@
+export * from './checkbox/checkbox.js';
+export * from './checkbox/checkbox-group.js';
diff --git a/src/components/checkbox/checkbox-group.ts b/src/components/checkbox/checkbox-group.ts
new file mode 100644
index 0000000000..254307c416
--- /dev/null
+++ b/src/components/checkbox/checkbox-group.ts
@@ -0,0 +1 @@
+export * from './checkbox-group/checkbox-group.js';
diff --git a/src/components/checkbox/checkbox-group/checkbox-group.e2e.ts b/src/components/checkbox/checkbox-group/checkbox-group.e2e.ts
index 1286a9c4fb..517fb1083e 100644
--- a/src/components/checkbox/checkbox-group/checkbox-group.e2e.ts
+++ b/src/components/checkbox/checkbox-group/checkbox-group.e2e.ts
@@ -2,11 +2,11 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import { SbbCheckboxElement } from '../checkbox';
+import { fixture } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
+import { SbbCheckboxElement } from '../checkbox.js';
 
-import { SbbCheckboxGroupElement } from './checkbox-group';
+import { SbbCheckboxGroupElement } from './checkbox-group.js';
 
 describe(`sbb-checkbox-group with ${fixture.name}`, () => {
   let element: SbbCheckboxGroupElement;
@@ -23,7 +23,7 @@ describe(`sbb-checkbox-group with ${fixture.name}`, () => {
           <sbb-checkbox id="checkbox-3" value="checkbox-3">Label 3</sbb-checkbox>
         </sbb-checkbox-group>
       `,
-      { modules: ['./checkbox-group.ts', '../checkbox/index.ts'] },
+      { modules: ['./checkbox-group.ts', '../checkbox.ts'] },
     );
     checkboxOne = element.querySelector<SbbCheckboxElement>('#checkbox-1')!;
     checkboxTwo = element.querySelector<SbbCheckboxElement>('#checkbox-2')!;
diff --git a/src/components/checkbox/checkbox-group/checkbox-group.scss b/src/components/checkbox/checkbox-group/checkbox-group.scss
index ea7a0f20b8..42af7b6b2c 100644
--- a/src/components/checkbox/checkbox-group/checkbox-group.scss
+++ b/src/components/checkbox/checkbox-group/checkbox-group.scss
@@ -1,9 +1,5 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
-
 @mixin horizontal-orientation {
   --sbb-checkbox-group-orientation: row;
   --sbb-checkbox-group-checkbox-width: auto;
@@ -11,11 +7,16 @@
 
 $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra';
 
+// 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 {
   @include horizontal-orientation;
 
   --sbb-checkbox-group-width: max-content;
   --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
+
+  display: block;
 }
 
 :host([orientation='vertical']) {
diff --git a/src/components/checkbox/checkbox-group/checkbox-group.spec.ts b/src/components/checkbox/checkbox-group/checkbox-group.spec.ts
index e5799fd86c..3bc8086344 100644
--- a/src/components/checkbox/checkbox-group/checkbox-group.spec.ts
+++ b/src/components/checkbox/checkbox-group/checkbox-group.spec.ts
@@ -1,12 +1,12 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbCheckboxGroupElement } from './checkbox-group';
+import type { SbbCheckboxGroupElement } from './checkbox-group.js';
 
-import './checkbox-group';
-import '../checkbox';
+import './checkbox-group.js';
+import '../checkbox.js';
 
 describe(`sbb-checkbox-group`, () => {
   let element: SbbCheckboxGroupElement;
diff --git a/src/components/checkbox/checkbox-group/checkbox-group.stories.ts b/src/components/checkbox/checkbox-group/checkbox-group.stories.ts
index 16664707f4..907573b811 100644
--- a/src/components/checkbox/checkbox-group/checkbox-group.stories.ts
+++ b/src/components/checkbox/checkbox-group/checkbox-group.stories.ts
@@ -5,14 +5,14 @@ import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
-import type { SbbCheckboxElement } from '../checkbox';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import type { SbbCheckboxElement } from '../checkbox.js';
 
 import readme from './readme.md?raw';
 
-import './checkbox-group';
-import '../checkbox';
-import '../../form-error';
+import './checkbox-group.js';
+import '../checkbox.js';
+import '../../form-error.js';
 
 const longLabelText = `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
@@ -86,12 +86,9 @@ const childCheck = (event: Event): void => {
   } else {
     selectedCheckboxes.splice(selectedCheckboxes.indexOf(target.value as string), 1);
   }
-  document
-    .getElementById('invariant-parent')
-    ?.setAttribute('indeterminate', String(selectedCheckboxes.length === 1));
-  document
-    .getElementById('invariant-parent')
-    ?.setAttribute('checked', String(selectedCheckboxes.length === 2));
+  const parent = document.getElementById('invariant-parent') as SbbCheckboxElement;
+  parent.indeterminate = selectedCheckboxes.length === 1;
+  parent.checked = selectedCheckboxes.length === 2;
 };
 
 const parentCheck = (event: Event): void => {
@@ -101,8 +98,8 @@ const parentCheck = (event: Event): void => {
   } else {
     selectedCheckboxes = [];
   }
-  document.getElementById('invariant-checkbox-1')?.setAttribute('checked', String(target.checked));
-  document.getElementById('invariant-checkbox-2')?.setAttribute('checked', String(target.checked));
+  (document.getElementById('invariant-checkbox-1') as SbbCheckboxElement).checked = target.checked;
+  (document.getElementById('invariant-checkbox-2') as SbbCheckboxElement).checked = target.checked;
 };
 
 const IndeterminateGroupTemplate = ({
@@ -264,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,
@@ -276,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 = {
@@ -374,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-group/checkbox-group.ts b/src/components/checkbox/checkbox-group/checkbox-group.ts
index c279343541..7bed9703e3 100644
--- a/src/components/checkbox/checkbox-group/checkbox-group.ts
+++ b/src/components/checkbox/checkbox-group/checkbox-group.ts
@@ -2,11 +2,11 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { getNextElementIndex, interactivityChecker, isArrowKeyPressed } from '../../core/a11y';
-import { NamedSlotStateController, SbbDisabledMixin } from '../../core/common-behaviors';
-import { ConnectedAbortController } from '../../core/eventing';
-import type { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces';
-import type { SbbCheckboxElement, SbbCheckboxSize } from '../checkbox';
+import { getNextElementIndex, interactivityChecker, isArrowKeyPressed } from '../../core/a11y.js';
+import { SbbConnectedAbortController, SbbSlotStateController } from '../../core/controllers.js';
+import type { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js';
+import { SbbDisabledMixin } from '../../core/mixins.js';
+import type { SbbCheckboxElement, SbbCheckboxSize } from '../checkbox.js';
 
 import style from './checkbox-group.scss?lit&inline';
 
@@ -41,11 +41,11 @@ export class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) {
     );
   }
 
-  private _abort: ConnectedAbortController = new ConnectedAbortController(this);
+  private _abort: SbbConnectedAbortController = new SbbConnectedAbortController(this);
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   public override connectedCallback(): void {
diff --git a/src/components/checkbox/checkbox-group/index.ts b/src/components/checkbox/checkbox-group/index.ts
deleted file mode 100644
index 762900d08a..0000000000
--- a/src/components/checkbox/checkbox-group/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './checkbox-group';
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
new file mode 100644
index 0000000000..8b3e57070f
--- /dev/null
+++ b/src/components/checkbox/checkbox.ts
@@ -0,0 +1 @@
+export * from './checkbox/checkbox.js';
diff --git a/src/components/checkbox/checkbox/checkbox.e2e.ts b/src/components/checkbox/checkbox/checkbox.e2e.ts
index df6f76612a..508028980f 100644
--- a/src/components/checkbox/checkbox/checkbox.e2e.ts
+++ b/src/components/checkbox/checkbox/checkbox.e2e.ts
@@ -3,12 +3,12 @@ import { a11ySnapshot, sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 import type { Context } from 'mocha';
 
-import { isChromium, isFirefox } from '../../core/dom';
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbVisualCheckboxElement } from '../../visual-checkbox';
+import { isChromium, isFirefox } from '../../core/dom.js';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
+import type { SbbVisualCheckboxElement } from '../../visual-checkbox.js';
 
-import { SbbCheckboxElement } from './checkbox';
+import { SbbCheckboxElement } from './checkbox.js';
 
 interface CheckboxAccessibilitySnapshot {
   checked: boolean;
@@ -664,7 +664,7 @@ describe(`sbb-checkbox with ${fixture.name}`, () => {
                 focusable: false,
               });
 
-              element.toggleAttribute('disabled', false);
+              element.removeAttribute('disabled');
               await waitForLitRender(form);
 
               await assertDisabledState({
@@ -841,7 +841,7 @@ describe(`sbb-checkbox with ${fixture.name}`, () => {
             });
 
             // When performing
-            element.toggleAttribute('checked', false);
+            element.removeAttribute('checked');
             await waitForLitRender(form);
 
             // Attribute should be considered
@@ -859,7 +859,7 @@ describe(`sbb-checkbox with ${fixture.name}`, () => {
             await waitForLitRender(form);
 
             // Attribute mutation should be blocked again
-            element.toggleAttribute('checked', false);
+            element.removeAttribute('checked');
             await waitForLitRender(form);
 
             await assertState({
diff --git a/src/components/checkbox/checkbox/checkbox.scss b/src/components/checkbox/checkbox/checkbox.scss
index 329010a37b..46e6702eb6 100644
--- a/src/components/checkbox/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox/checkbox.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-checkbox-dimension: var(--sbb-size-icon-ui-small);
diff --git a/src/components/checkbox/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox/checkbox.spec.ts
index 650aafd8a7..5e757671dd 100644
--- a/src/components/checkbox/checkbox/checkbox.spec.ts
+++ b/src/components/checkbox/checkbox/checkbox.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbCheckboxElement } from './checkbox';
+import type { SbbCheckboxElement } from './checkbox.js';
 
-import './checkbox';
+import './checkbox.js';
 
 describe(`sbb-checkbox`, () => {
   let element: SbbCheckboxElement;
diff --git a/src/components/checkbox/checkbox/checkbox.stories.ts b/src/components/checkbox/checkbox/checkbox.stories.ts
index 7f2e7f8245..8cbe35e9f4 100644
--- a/src/components/checkbox/checkbox/checkbox.stories.ts
+++ b/src/components/checkbox/checkbox/checkbox.stories.ts
@@ -3,15 +3,14 @@ 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 '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './checkbox';
-import '../../card';
-import '../../button/button';
-import '../../button/secondary-button';
+import './checkbox.js';
+import '../../card.js';
+import '../../button/button.js';
+import '../../button/secondary-button.js';
 
 const longLabelText = `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
@@ -82,6 +81,12 @@ const ariaLabel: InputType = {
   },
 };
 
+const labelBoldClass: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const defaultArgTypes: ArgTypes = {
   size,
   checked,
@@ -93,10 +98,11 @@ const defaultArgTypes: ArgTypes = {
   'icon-name': icon,
   'icon-placement': iconPlacement,
   'aria-label': ariaLabel,
+  labelBoldClass,
 };
 
 const defaultArgs: Args = {
-  size: size.options[1],
+  size: size.options![1],
   checked: false,
   indeterminate: false,
   disabled: false,
@@ -106,14 +112,17 @@ const defaultArgs: Args = {
   'icon-name': undefined,
   'icon-placement': undefined,
   'aria-label': undefined,
+  labelBoldClass: false,
 };
 
 // We use property and attribute for `checked` to provide consistency to storybook controls.
 // Otherwise, after first user manipulation, the storybook control gets ignored.
 // If only using property, the reset mechanism does not work as expected.
 
-const Template = ({ label, checked, ...args }: Args): TemplateResult => html`
-  <sbb-checkbox .checked=${checked} ?checked=${checked} ${sbbSpread(args)}>${label}</sbb-checkbox>
+const Template = ({ label, checked, labelBoldClass, ...args }: Args): TemplateResult => html`
+  <sbb-checkbox .checked=${checked} ?checked=${checked} ${sbbSpread(args)}>
+    ${labelBoldClass ? html`<span class="sbb-text--bold">${label}</span>` : label}
+  </sbb-checkbox>
 `;
 
 const TemplateWithForm = (args: Args): TemplateResult => html`
@@ -147,49 +156,32 @@ const TemplateWithForm = (args: Args): TemplateResult => html`
 export const defaultUnchecked: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-  },
+  args: { ...defaultArgs },
 };
 export const defaultChecked: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    checked: true,
-  },
+  args: { ...defaultArgs, checked: true },
 };
 export const defaultIndeterminate: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    indeterminate: true,
-  },
+  args: { ...defaultArgs, indeterminate: true },
 };
 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,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    label: longLabelText,
-  },
+  args: { ...defaultArgs, label: longLabelText },
 };
 export const withIconEnd: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    'icon-name': 'tickets-class-small',
-  },
+  args: { ...defaultArgs, 'icon-name': 'tickets-class-small' },
 };
 export const checkedWithIconStart: StoryObj = {
   render: Template,
@@ -198,54 +190,55 @@ 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 = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    disabled: true,
-    checked: true,
-  },
+  args: { ...defaultArgs, disabled: true, checked: true },
 };
 export const disabledUnchecked: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    disabled: true,
-  },
+  args: { ...defaultArgs, disabled: true },
 };
 export const disabledIndeterminate: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    disabled: true,
-    indeterminate: true,
-  },
+  args: { ...defaultArgs, disabled: true, indeterminate: true },
 };
 
 export const withForm: StoryObj = {
   render: TemplateWithForm,
   argTypes: defaultArgTypes,
-  args: defaultArgs,
+  args: { ...defaultArgs },
+};
+
+export const defaultUncheckedBold: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, labelBoldClass: true },
+};
+
+export const defaultCheckedBold: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, checked: true, labelBoldClass: true },
+};
+
+export const defaultIndeterminateBold: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, indeterminate: true, labelBoldClass: true },
 };
 
 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.ts b/src/components/checkbox/checkbox/checkbox.ts
index eca5bbcd43..aed73d1b25 100644
--- a/src/components/checkbox/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox/checkbox.ts
@@ -7,30 +7,28 @@ import {
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import {
-  SbbFormAssociatedCheckboxMixin,
-  LanguageController,
-  NamedSlotStateController,
-  SbbIconNameMixin,
-  UpdateScheduler,
-  SbbHydrationMixin,
-} from '../../core/common-behaviors';
-import { EventEmitter } from '../../core/eventing';
-import { i18nCollapsed, i18nExpanded } from '../../core/i18n';
+import { SbbLanguageController, SbbSlotStateController } from '../../core/controllers.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { i18nCollapsed, i18nExpanded } from '../../core/i18n.js';
 import type {
   SbbCheckedStateChange,
   SbbDisabledStateChange,
   SbbIconPlacement,
   SbbStateChange,
-} from '../../core/interfaces';
-import type { SbbSelectionPanelElement } from '../../selection-panel';
-import type { SbbCheckboxGroupElement } from '../checkbox-group';
+} from '../../core/interfaces.js';
+import {
+  SbbFormAssociatedCheckboxMixin,
+  SbbHydrationMixin,
+  SbbUpdateSchedulerMixin,
+} from '../../core/mixins.js';
+import { SbbIconNameMixin } from '../../icon.js';
+import type { SbbSelectionPanelElement } from '../../selection-panel.js';
+import type { SbbCheckboxGroupElement } from '../checkbox-group.js';
 
 import style from './checkbox.scss?lit&inline';
 
-import '../../icon';
-import '../../screen-reader-only';
-import '../../visual-checkbox';
+import '../../screen-reader-only.js';
+import '../../visual-checkbox.js';
 
 export type SbbCheckboxStateChange = Extract<
   SbbStateChange,
@@ -51,7 +49,7 @@ export type SbbCheckboxSize = 's' | 'm';
  * @event {InputEvent} input - Event fired on input.
  */
 @customElement('sbb-checkbox')
-export class SbbCheckboxElement extends UpdateScheduler(
+export class SbbCheckboxElement extends SbbUpdateSchedulerMixin(
   SbbFormAssociatedCheckboxMixin(SbbIconNameMixin(SbbHydrationMixin(LitElement))),
 ) {
   public static override styles: CSSResultGroup = style;
@@ -95,7 +93,7 @@ export class SbbCheckboxElement extends UpdateScheduler(
   /** The label describing whether the selection panel is expanded (for screen readers only). */
   @state() private _selectionPanelExpandedLabel!: string;
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
   private _selectionPanelElement: SbbSelectionPanelElement | null = null;
 
   /**
@@ -121,7 +119,7 @@ export class SbbCheckboxElement extends UpdateScheduler(
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   public override connectedCallback(): void {
diff --git a/src/components/checkbox/checkbox/index.ts b/src/components/checkbox/checkbox/index.ts
deleted file mode 100644
index 8d78b3e23f..0000000000
--- a/src/components/checkbox/checkbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './checkbox';
diff --git a/src/components/checkbox/checkbox/readme.md b/src/components/checkbox/checkbox/readme.md
index eca790b1bf..9c45d680b9 100644
--- a/src/components/checkbox/checkbox/readme.md
+++ b/src/components/checkbox/checkbox/readme.md
@@ -49,6 +49,14 @@ The component has two `size`, named `s` (default) and `m`.
 <sbb-checkbox value="size" size="m">Size</sbb-checkbox>
 ```
 
+The component's label can be displayed in bold using the `sbb-text--bold` class on a wrapper tag:
+
+```html
+<sbb-checkbox value="bold">
+  <span class="sbb-text--bold">Bold label</span>
+</sbb-checkbox>
+```
+
 ## Events
 
 Consumers can listen to the native `change` event on the `sbb-checkbox` component to intercept the input's change;
diff --git a/src/components/checkbox/index.ts b/src/components/checkbox/index.ts
deleted file mode 100644
index 3e81524f1e..0000000000
--- a/src/components/checkbox/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './checkbox';
-export * from './checkbox-group';
diff --git a/src/components/chip.ts b/src/components/chip.ts
new file mode 100644
index 0000000000..fa8c530782
--- /dev/null
+++ b/src/components/chip.ts
@@ -0,0 +1 @@
+export * from './chip/chip.js';
diff --git a/src/components/chip/chip.e2e.ts b/src/components/chip/chip.e2e.ts
index b79c6665e5..f9dc2f195a 100644
--- a/src/components/chip/chip.e2e.ts
+++ b/src/components/chip/chip.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbChipElement } from './chip';
+import { SbbChipElement } from './chip.js';
 
 describe(`sbb-chip with ${fixture.name}`, () => {
   it('renders', async () => {
diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss
index 183d5974a0..fb37c26383 100644
--- a/src/components/chip/chip.scss
+++ b/src/components/chip/chip.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   display: inline-block;
diff --git a/src/components/chip/chip.spec.ts b/src/components/chip/chip.spec.ts
index ef5316834c..3fac3c44f9 100644
--- a/src/components/chip/chip.spec.ts
+++ b/src/components/chip/chip.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbChipElement } from './chip';
+import type { SbbChipElement } from './chip.js';
 
-import './chip';
+import './chip.js';
 
 describe(`sbb-chip`, () => {
   let element: SbbChipElement;
diff --git a/src/components/chip/chip.stories.ts b/src/components/chip/chip.stories.ts
index b60d674855..9084f4cee9 100644
--- a/src/components/chip/chip.stories.ts
+++ b/src/components/chip/chip.stories.ts
@@ -4,18 +4,11 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 
-import './chip';
-
-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)',
-});
+import './chip.js';
 
 const size: InputType = {
   control: {
@@ -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/chip/index.ts b/src/components/chip/index.ts
deleted file mode 100644
index 4cd623dc8a..0000000000
--- a/src/components/chip/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './chip';
diff --git a/src/components/clock.ts b/src/components/clock.ts
new file mode 100644
index 0000000000..40f6532ef0
--- /dev/null
+++ b/src/components/clock.ts
@@ -0,0 +1 @@
+export * from './clock/clock.js';
diff --git a/src/components/clock/clock.scss b/src/components/clock/clock.scss
index a3b8e2d183..37b21c7ec9 100644
--- a/src/components/clock/clock.scss
+++ b/src/components/clock/clock.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-clock-hours-animation-start-angle: 0deg;
@@ -11,6 +10,8 @@
   --sbb-clock-seconds-animation-duration: 0s;
   --sbb-clock-animation-play-state: paused;
   --sbb-clock-seconds-hand-color: var(--sbb-color-red);
+
+  display: block;
 }
 
 .sbb-clock {
diff --git a/src/components/clock/clock.spec.ts b/src/components/clock/clock.spec.ts
index 2152a67f15..efe7cf63bc 100644
--- a/src/components/clock/clock.spec.ts
+++ b/src/components/clock/clock.spec.ts
@@ -1,9 +1,9 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import { SbbClockElement } from './clock';
+import { SbbClockElement } from './clock.js';
 
 describe(`sbb-clock`, () => {
   let element: SbbClockElement;
diff --git a/src/components/clock/clock.stories.ts b/src/components/clock/clock.stories.ts
index 1bdba07328..70df338b8b 100644
--- a/src/components/clock/clock.stories.ts
+++ b/src/components/clock/clock.stories.ts
@@ -1,15 +1,15 @@
 import type { InputType } from '@storybook/types';
 import type { Args, Meta, StoryObj } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 
-import './clock';
+import './clock.js';
 
 const dataNow: InputType = {
   control: {
@@ -42,9 +42,7 @@ if (isChromatic()) {
 }
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style=${styleMap({ 'max-width': '600px' })}>${story()}</div> `,
-  ],
+  decorators: [(story) => html`<div style=${styleMap({ 'max-width': '600px' })}>${story()}</div>`],
   parameters: {
     docs: {
       extractComponentDescription: () => readme,
diff --git a/src/components/clock/clock.ts b/src/components/clock/clock.ts
index 11f3e58891..3052b30cd8 100644
--- a/src/components/clock/clock.ts
+++ b/src/components/clock/clock.ts
@@ -1,9 +1,9 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
-import { setAttributes } from '../core/dom';
+import { readDataNow } from '../core/datetime.js';
 
 import clockFaceSVG from './assets/sbb_clock_face.svg?raw';
 import clockHandleHoursSVG from './assets/sbb_clock_hours.svg?raw';
@@ -53,9 +53,6 @@ const ADD_EVENT_LISTENER_OPTIONS: AddEventListenerOptions = {
 export class SbbClockElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
-  /** If it's false, the clock's hands are hidden; it's set to true when calculations are ready. */
-  @state() private _isInitialized = false;
-
   /** Reference to the hour hand. */
   private _clockHandHours!: HTMLElement;
 
@@ -174,7 +171,7 @@ export class SbbClockElement extends LitElement {
     this._clockHandHours?.classList.add('sbb-clock__hand-hours--initial-hour');
     this.style.setProperty('--sbb-clock-animation-play-state', 'running');
 
-    this._isInitialized = true;
+    this.toggleAttribute('data-initialized', true);
   }
 
   /** Set the starting position for the minutes hand. */
@@ -257,13 +254,12 @@ export class SbbClockElement extends LitElement {
   }
 
   private _hasDataNow(): boolean {
-    const dataNow = +(this.dataset?.now as string);
-    return !isNaN(dataNow);
+    return this.hasAttribute('data-now');
   }
 
   private _now(): Date {
     if (this._hasDataNow()) {
-      return new Date(+(this.dataset.now as string));
+      return new Date(readDataNow(this));
     }
     return new Date();
   }
@@ -284,9 +280,6 @@ export class SbbClockElement extends LitElement {
   }
 
   protected override render(): TemplateResult {
-    const hostAttributes = { 'data-initialized': this._isInitialized };
-    setAttributes(this, hostAttributes);
-
     return html`
       <div class="sbb-clock">
         <span class="sbb-clock__face" .innerHTML=${clockFaceSVG}></span>
diff --git a/src/components/clock/index.ts b/src/components/clock/index.ts
deleted file mode 100644
index 989b007487..0000000000
--- a/src/components/clock/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './clock';
diff --git a/src/components/container.ts b/src/components/container.ts
new file mode 100644
index 0000000000..b743c4ec4f
--- /dev/null
+++ b/src/components/container.ts
@@ -0,0 +1,2 @@
+export * from './container/container.js';
+export * from './container/sticky-bar.js';
diff --git a/src/components/container/container.ts b/src/components/container/container.ts
new file mode 100644
index 0000000000..9282eefed4
--- /dev/null
+++ b/src/components/container/container.ts
@@ -0,0 +1 @@
+export * from './container/container.js';
diff --git a/src/components/container/container/container.e2e.ts b/src/components/container/container/container.e2e.ts
index a6684dbe39..fbf61ca5a2 100644
--- a/src/components/container/container/container.e2e.ts
+++ b/src/components/container/container/container.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import { SbbContainerElement } from './container';
+import { SbbContainerElement } from './container.js';
 
 describe(`sbb-container with ${fixture.name}`, () => {
   let element: SbbContainerElement;
diff --git a/src/components/container/container/container.scss b/src/components/container/container/container.scss
index a87a868913..8041469ca0 100644
--- a/src/components/container/container/container.scss
+++ b/src/components/container/container/container.scss
@@ -1,8 +1,11 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
+  display: block;
+}
 
 :host([color='white']) {
   --sbb-container-background-color: var(--sbb-color-white);
@@ -13,7 +16,14 @@
 }
 
 .sbb-container {
-  background-color: var(--sbb-container-background-color, transparent);
+  background-color: var(--sbb-container-background-color);
+
+  // In order to support nested sbb-containers (e.g. if used in an overlay), we need to explicitly set background color to transparent.
+  // We cannot use the --sbb-container-background-color variable because using it would
+  // destroy sbb-sticky-bar behavior when the container and the sticky bar have transparent color.
+  :host([color='transparent']) & {
+    background-color: transparent;
+  }
 
   // Placing content before and after the container stops the margin of inner elements from overflowing
   &::after,
diff --git a/src/components/container/container/container.spec.ts b/src/components/container/container/container.spec.ts
index 97d2585b33..5ffe18e2d1 100644
--- a/src/components/container/container/container.spec.ts
+++ b/src/components/container/container/container.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import './container';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import './container.js';
 
 describe(`sbb-container`, () => {
   it('renders', async () => {
diff --git a/src/components/container/container/container.stories.ts b/src/components/container/container/container.stories.ts
index 7710415928..853cdd1dd9 100644
--- a/src/components/container/container/container.stories.ts
+++ b/src/components/container/container/container.stories.ts
@@ -2,11 +2,11 @@ import type { InputType } from '@storybook/types';
 import type { ArgTypes, Args, Meta, StoryObj } from '@storybook/web-components';
 import { type TemplateResult, html, nothing } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
-import '../../button/secondary-button';
-import '../../title';
-import './container';
+import '../../button/secondary-button.js';
+import '../../title.js';
+import './container.js';
 
 import readme from './readme.md?raw';
 
@@ -44,16 +44,28 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   expanded: false,
-  color: color.options[0],
+  color: color.options![0],
 };
 
-const DefaultTemplate = ({ color, ...args }: Args): TemplateResult => html`
-  <sbb-container ${sbbSpread(args)} color=${color}>
+const DefaultTemplate = (args: Args): TemplateResult => html`
+  <sbb-container ${sbbSpread(args)}>
     ${containerContent('Example title')} ${containerContent('Another one')}
     ${containerContent('And another one', true)}
   </sbb-container>
 `;
 
+// Only for visual regression
+const NestedContainerTemplate = (): TemplateResult => html`
+  <sbb-container color="white">
+    ${containerContent('Example title')}
+    <div style="background-color: var(--sbb-color-milk);">
+      <sbb-container color="transparent">
+        ${containerContent('And another one', true)}
+      </sbb-container>
+    </div>
+  </sbb-container>
+`;
+
 export const Default: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
@@ -63,13 +75,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 = {
@@ -78,11 +90,15 @@ export const Expanded: StoryObj = {
   args: { ...defaultArgs, expanded: true },
 };
 
+export const NestedContainer: StoryObj = {
+  render: NestedContainerTemplate,
+  argTypes: { defaultArgTypes },
+  args: { ...defaultArgs, expanded: true },
+};
+
 const meta: Meta = {
+  excludeStories: /^(NestedContainer)$/,
   parameters: {
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/container/container/container.ts b/src/components/container/container/container.ts
index aba4f4c3fc..2e073b0afa 100644
--- a/src/components/container/container/container.ts
+++ b/src/components/container/container/container.ts
@@ -33,9 +33,11 @@ export class SbbContainerElement extends LitElement {
   }
 
   protected override willUpdate(
-    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
+    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
   ): void {
-    if (_changedProperties.has('expanded') || _changedProperties.has('color')) {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('expanded') || changedProperties.has('color')) {
       this._updateStickyBar();
     }
   }
diff --git a/src/components/container/container/index.ts b/src/components/container/container/index.ts
deleted file mode 100644
index 85ee15b654..0000000000
--- a/src/components/container/container/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './container';
diff --git a/src/components/container/index.ts b/src/components/container/index.ts
deleted file mode 100644
index 6111a3abc2..0000000000
--- a/src/components/container/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './container';
-export * from './sticky-bar';
diff --git a/src/components/container/sticky-bar.ts b/src/components/container/sticky-bar.ts
new file mode 100644
index 0000000000..0eb2bfdd21
--- /dev/null
+++ b/src/components/container/sticky-bar.ts
@@ -0,0 +1 @@
+export * from './sticky-bar/sticky-bar.js';
diff --git a/src/components/container/sticky-bar/index.ts b/src/components/container/sticky-bar/index.ts
deleted file mode 100644
index 7685acdf4c..0000000000
--- a/src/components/container/sticky-bar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './sticky-bar';
diff --git a/src/components/container/sticky-bar/readme.md b/src/components/container/sticky-bar/readme.md
index 815e2fab21..8dc5ef5e66 100644
--- a/src/components/container/sticky-bar/readme.md
+++ b/src/components/container/sticky-bar/readme.md
@@ -36,6 +36,7 @@ Add the `sbb-disable-animation` class to disable animation and transition effect
 | -------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `--sbb-sticky-bar-padding-block`             | `var(--sbb-spacing-responsive-xs)` | Block padding of the sticky bar.                                                                                                                                                                |
 | `--sbb-sticky-bar-bottom-overlapping-height` | `0px`                              | Define an additional area where the sticky bar overlaps the following content on the bottom. This area becomes visible when the sticky bar transitions from sticky to the normal document flow. |
+| `--sbb-sticky-bar-z-index`                   |                                    | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable.                                                                                                 |
 
 ## Slots
 
diff --git a/src/components/container/sticky-bar/sticky-bar.e2e.ts b/src/components/container/sticky-bar/sticky-bar.e2e.ts
index f3c860b3ee..0dbfd2f428 100644
--- a/src/components/container/sticky-bar/sticky-bar.e2e.ts
+++ b/src/components/container/sticky-bar/sticky-bar.e2e.ts
@@ -2,13 +2,13 @@ import { assert, expect } from '@open-wc/testing';
 import { setViewport } from '@web/test-runner-commands';
 import { html } from 'lit';
 
-import { waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbContainerElement } from '../container';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, waitForLitRender } from '../../core/testing.js';
+import type { SbbContainerElement } from '../container.js';
 
-import { SbbStickyBarElement } from './sticky-bar';
+import { SbbStickyBarElement } from './sticky-bar.js';
 
-import '../container';
+import '../container.js';
 
 describe(`sbb-sticky-bar with ${fixture.name}`, () => {
   let container: SbbContainerElement;
@@ -37,7 +37,7 @@ describe(`sbb-sticky-bar with ${fixture.name}`, () => {
           <sbb-sticky-bar></sbb-sticky-bar>
         </sbb-container>
       `,
-      { modules: ['../container/index.ts', './sticky-bar.ts'] },
+      { modules: ['../container.ts', './sticky-bar.ts'] },
     );
     stickyBar = container.querySelector('sbb-sticky-bar')!;
   });
@@ -68,7 +68,7 @@ describe(`sbb-sticky-bar with ${fixture.name}`, () => {
           </sbb-sticky-bar>
         </sbb-container>
       `,
-      { modules: ['../container/index.ts', './sticky-bar.ts'] },
+      { modules: ['../container.ts', './sticky-bar.ts'] },
     );
     stickyBar = container.querySelector('sbb-sticky-bar')!;
 
@@ -87,7 +87,7 @@ describe(`sbb-sticky-bar with ${fixture.name}`, () => {
           </sbb-sticky-bar>
         </sbb-container>
       `,
-      { modules: ['../container/index.ts', './sticky-bar.ts'] },
+      { modules: ['../container.ts', './sticky-bar.ts'] },
     );
     stickyBar = container.querySelector('sbb-sticky-bar')!;
 
diff --git a/src/components/container/sticky-bar/sticky-bar.scss b/src/components/container/sticky-bar/sticky-bar.scss
index b31ad946a3..9262a3b54a 100644
--- a/src/components/container/sticky-bar/sticky-bar.scss
+++ b/src/components/container/sticky-bar/sticky-bar.scss
@@ -1,10 +1,11 @@
 @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;
+
 $intersector-overlapping: 1px;
 
 :host {
-  @include sbb.box-sizing;
-
   --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);
   --sbb-sticky-bar-fade-in-animation-duration: var(
     --sbb-disable-animation-time,
@@ -40,6 +41,7 @@ $intersector-overlapping: 1px;
   position: sticky;
   inset-block-end: 0;
   display: block;
+  z-index: var(--sbb-sticky-bar-z-index);
 
   &::after,
   &::before {
diff --git a/src/components/container/sticky-bar/sticky-bar.spec.ts b/src/components/container/sticky-bar/sticky-bar.spec.ts
index 42cc6e9c86..39e3eae2a3 100644
--- a/src/components/container/sticky-bar/sticky-bar.spec.ts
+++ b/src/components/container/sticky-bar/sticky-bar.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import './sticky-bar';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import './sticky-bar.js';
 
 describe(`sbb-sticky-bar`, () => {
   it('renders', async () => {
diff --git a/src/components/container/sticky-bar/sticky-bar.stories.ts b/src/components/container/sticky-bar/sticky-bar.stories.ts
index 1ea9b44e05..451e4f5548 100644
--- a/src/components/container/sticky-bar/sticky-bar.stories.ts
+++ b/src/components/container/sticky-bar/sticky-bar.stories.ts
@@ -1,18 +1,18 @@
 import type { InputType } from '@storybook/types';
 import type { ArgTypes, Args, Meta, StoryObj } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import { html, nothing, type TemplateResult } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
-import '../../action-group';
-import '../../button/button';
-import '../../button/secondary-button';
-import '../../link';
-import '../../title';
-import '../container';
+import '../../action-group.js';
+import '../../button/button.js';
+import '../../button/secondary-button.js';
+import '../../link.js';
+import '../../title.js';
+import '../container.js';
 import readme from './readme.md?raw';
-import './sticky-bar';
+import './sticky-bar.js';
 
 const expanded: InputType = {
   control: {
@@ -52,8 +52,8 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   expanded: false,
-  color: color.options[0],
-  containerColor: containerColor.options[0],
+  color: color.options![0],
+  containerColor: containerColor.options![0],
 };
 
 const actionGroup = (): TemplateResult => html`
@@ -67,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>
 `;
 
@@ -174,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 = {
@@ -192,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 0b4e8d3e8a..b8559bb59f 100644
--- a/src/components/container/sticky-bar/sticky-bar.ts
+++ b/src/components/container/sticky-bar/sticky-bar.ts
@@ -1,8 +1,8 @@
 import { type CSSResultGroup, html, LitElement, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { hostAttributes } from '../../core/common-behaviors';
-import { AgnosticIntersectionObserver } from '../../core/observers';
+import { hostAttributes } from '../../core/decorators.js';
+import { AgnosticIntersectionObserver } from '../../core/observers.js';
 
 import style from './sticky-bar.scss?lit&inline';
 
@@ -14,6 +14,8 @@ import style from './sticky-bar.scss?lit&inline';
  * @cssprop [--sbb-sticky-bar-bottom-overlapping-height=0px] - Define an additional area where
  * the sticky bar overlaps the following content on the bottom.
  * This area becomes visible when the sticky bar transitions from sticky to the normal document flow.
+ * @cssprop [--sbb-sticky-bar-z-index] - To specify a custom stack order,
+ * the `z-index` can be overridden by defining this CSS variable.
  */
 @customElement('sbb-sticky-bar')
 @hostAttributes({
diff --git a/src/components/core/a11y.ts b/src/components/core/a11y.ts
new file mode 100644
index 0000000000..c2741975bf
--- /dev/null
+++ b/src/components/core/a11y.ts
@@ -0,0 +1,6 @@
+export * from './a11y/arrow-navigation.js';
+export * from './a11y/fake-event-detection.js';
+export * from './a11y/focus-visible-within-controller.js';
+export * from './a11y/focus.js';
+export * from './a11y/interactivity-checker.js';
+export * from './a11y/input-modality-detector.js';
diff --git a/src/components/core/a11y/arrow-navigation.spec.ts b/src/components/core/a11y/arrow-navigation.spec.ts
index 6d8e771d18..5e5602608f 100644
--- a/src/components/core/a11y/arrow-navigation.spec.ts
+++ b/src/components/core/a11y/arrow-navigation.spec.ts
@@ -5,7 +5,7 @@ import {
   isArrowKeyPressed,
   isNextArrowKeyPressed,
   isPreviousArrowKeyPressed,
-} from './arrow-navigation';
+} from './arrow-navigation.js';
 
 describe('isArrowKeyPressed', () => {
   it('should return false', () => {
diff --git a/src/components/core/a11y/arrow-navigation.ts b/src/components/core/a11y/arrow-navigation.ts
index 35806ebb4e..0a78a37c99 100644
--- a/src/components/core/a11y/arrow-navigation.ts
+++ b/src/components/core/a11y/arrow-navigation.ts
@@ -1,4 +1,4 @@
-import { getDocumentWritingMode } from '../dom';
+import { getDocumentWritingMode } from '../dom.js';
 
 interface PrevAndNextKeys {
   prevKey: string;
diff --git a/src/components/core/a11y/assign-id.ts b/src/components/core/a11y/assign-id.ts
deleted file mode 100644
index 0140527544..0000000000
--- a/src/components/core/a11y/assign-id.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Returns a function that can be used for a ref callback in JSX.
- * It checks whether the element has an id and if not, calls the id factory function
- * and assigns the resulting id to the element.
- *
- * @example
- *   <Host
- *     ref={assignId(() => `sbb-title-${++nextId}`)}
- */
-export function assignId(idFactory: () => string): (element: HTMLElement) => void {
-  return (element) => {
-    if (!element.id) {
-      element.id = idFactory();
-    }
-  };
-}
diff --git a/src/components/core/a11y/focus-visible-within-controller.ts b/src/components/core/a11y/focus-visible-within-controller.ts
index f4bba1115d..4561bab7de 100644
--- a/src/components/core/a11y/focus-visible-within-controller.ts
+++ b/src/components/core/a11y/focus-visible-within-controller.ts
@@ -1,18 +1,18 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
-import { sbbInputModalityDetector } from './input-modality-detector';
+import { sbbInputModalityDetector } from './input-modality-detector.js';
 
 // Determine whether the element has a visible focus within.
-export class FocusVisibleWithinController implements ReactiveController {
-  private _focusinHanlder = (): void => {
+export class SbbFocusVisibleWithinController implements ReactiveController {
+  private _focusinHandler = (): void => {
     this._host.toggleAttribute(
       'data-has-visible-focus-within',
       sbbInputModalityDetector.mostRecentModality === 'keyboard',
     );
   };
 
-  private _focusoutHanlder = (): void => {
-    this._host.toggleAttribute('data-has-visible-focus-within', false);
+  private _focusoutHandler = (): void => {
+    this._host.removeAttribute('data-has-visible-focus-within');
   };
 
   public constructor(private _host: ReactiveControllerHost & HTMLElement) {
@@ -20,12 +20,12 @@ export class FocusVisibleWithinController implements ReactiveController {
   }
 
   public hostConnected(): void {
-    this._host.addEventListener('focusin', this._focusinHanlder);
-    this._host.addEventListener('focusout', this._focusoutHanlder);
+    this._host.addEventListener('focusin', this._focusinHandler);
+    this._host.addEventListener('focusout', this._focusoutHandler);
   }
 
   public hostDisconnected(): void {
-    this._host.removeEventListener('focusin', this._focusinHanlder);
-    this._host.removeEventListener('focusout', this._focusoutHanlder);
+    this._host.removeEventListener('focusin', this._focusinHandler);
+    this._host.removeEventListener('focusout', this._focusoutHandler);
   }
 }
diff --git a/src/components/core/a11y/focus.spec.ts b/src/components/core/a11y/focus.spec.ts
index b1e109c333..b5750e14ec 100644
--- a/src/components/core/a11y/focus.spec.ts
+++ b/src/components/core/a11y/focus.spec.ts
@@ -2,9 +2,9 @@ import { expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit';
 
-import { fixture } from '../testing/private';
+import { fixture } from '../testing/private.js';
 
-import { FocusHandler, getFirstFocusableElement, getFocusableElements } from './focus';
+import { SbbFocusHandler, getFirstFocusableElement, getFocusableElements } from './focus.js';
 
 describe('focus', () => {
   describe(`getFocusables`, () => {
@@ -25,8 +25,8 @@ describe('focus', () => {
       await customElements.whenDefined('my-custom-element');
       lightDOM = await fixture(html`
         <div>
-          <custom-button tabindex="0" id="custom-button">Button</custom-button>
-          <custom-link tabindex="0" href="#" id="custom-link">Link</custom-link>
+          <span tabindex="0" id="custom-button">Button</span>
+          <span tabindex="0" id="custom-link">Link</span>
           <div>
             <input id="input" />
             <button style="visibility: hidden" id="hidden-button">Button</button>
@@ -64,7 +64,7 @@ describe('focus', () => {
 
     it('should retrieve filtered focusable elements', () => {
       const elements = getFocusableElements([lightDOM, shadowDOM], {
-        filter: (el) => ['div', 'custom-link'].includes(el.localName),
+        filter: (el) => el.localName === 'div' || el.id === 'custom-link',
       });
 
       expect(elements.map((el) => el.id)).to.deep.equal(['custom-link']);
@@ -95,8 +95,8 @@ describe('focus', () => {
           super();
           const shadowRoot = this.attachShadow({ mode: 'open' });
           shadowRoot.innerHTML = `
-          <custom-button tabindex="0" id="custom-button">Button</custom-button>
-          <custom-link tabindex="0" href="#" id="custom-link">Link</custom-link>
+          <span tabindex="0" id="custom-button">Button</span>
+          <span tabindex="0" id="custom-link">Link</span>
           <div>
             <input id="input" />
             <button style="visibility: hidden" id="hidden-button">Button</button>
@@ -115,7 +115,7 @@ describe('focus', () => {
     });
 
     it('should focus next element', async () => {
-      const focusHandler = new FocusHandler();
+      const focusHandler = new SbbFocusHandler();
       focusHandler.trap(element);
 
       element.shadowRoot!.querySelector<HTMLElement>('#custom-button')!.focus();
@@ -138,7 +138,7 @@ describe('focus', () => {
     });
 
     it('should focus next element with filter', async () => {
-      const focusHandler = new FocusHandler();
+      const focusHandler = new SbbFocusHandler();
       focusHandler.trap(element, {
         filter: (el) => ['div', 'input'].includes(el.localName),
       });
@@ -151,7 +151,7 @@ describe('focus', () => {
     });
 
     it('should focus next element with post filter', async () => {
-      const focusHandler = new FocusHandler();
+      const focusHandler = new SbbFocusHandler();
       focusHandler.trap(element, {
         postFilter: (el) => ['custom-button', 'custom-link'].includes(el.id),
       });
diff --git a/src/components/core/a11y/focus.ts b/src/components/core/a11y/focus.ts
index 35218b4378..cbb176d9e0 100644
--- a/src/components/core/a11y/focus.ts
+++ b/src/components/core/a11y/focus.ts
@@ -1,4 +1,4 @@
-import { interactivityChecker } from './interactivity-checker';
+import { interactivityChecker } from './interactivity-checker.js';
 
 export const IS_FOCUSABLE_QUERY = [
   'button',
@@ -73,7 +73,7 @@ export function getFirstFocusableElement(
   return focusableElements.length ? focusableElements[0] : null;
 }
 
-export class FocusHandler {
+export class SbbFocusHandler {
   private _controller = new AbortController();
 
   /**
diff --git a/src/components/core/a11y/index.ts b/src/components/core/a11y/index.ts
deleted file mode 100644
index 802bbd10c8..0000000000
--- a/src/components/core/a11y/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './arrow-navigation';
-export * from './assign-id';
-export * from './fake-event-detection';
-export * from './focus-visible-within-controller';
-export * from './focus';
-export * from './interactivity-checker';
-export * from './input-modality-detector';
diff --git a/src/components/core/a11y/input-modality-detector.ts b/src/components/core/a11y/input-modality-detector.ts
index a245a10f88..c6cbff2ab2 100644
--- a/src/components/core/a11y/input-modality-detector.ts
+++ b/src/components/core/a11y/input-modality-detector.ts
@@ -1,12 +1,12 @@
 // This implementation is inspired by https://github.com/angular/components/blob/main/src/cdk/a11y/input-modality/input-modality-detector.ts
 
-import { isBrowser } from '../dom';
-import { getEventTarget } from '../eventing';
+import { isBrowser } from '../dom.js';
+import { getEventTarget } from '../eventing.js';
 
 import {
   isFakeMousedownFromScreenReader,
   isFakeTouchstartFromScreenReader,
-} from './fake-event-detection';
+} from './fake-event-detection.js';
 
 export type SbbInputModality = 'touch' | 'mouse' | 'keyboard' | 'program' | null;
 
@@ -191,10 +191,14 @@ export function setModalityOnNextFocus(elementToFocus: HTMLElement | null | unde
   elementToFocus.addEventListener(
     'focus',
     () => {
-      (elementToFocus.dataset.focusOrigin as SbbInputModality) = mostRecentModality;
-      elementToFocus.addEventListener('blur', () => delete elementToFocus.dataset.focusOrigin, {
-        once: true,
-      });
+      elementToFocus.setAttribute('data-focus-origin', mostRecentModality);
+      elementToFocus.addEventListener(
+        'blur',
+        () => elementToFocus.removeAttribute('data-focus-origin'),
+        {
+          once: true,
+        },
+      );
     },
     { once: true },
   );
diff --git a/src/components/core/a11y/interactivity-checker.spec.ts b/src/components/core/a11y/interactivity-checker.spec.ts
index cddae4f6a7..a19c4da71e 100644
--- a/src/components/core/a11y/interactivity-checker.spec.ts
+++ b/src/components/core/a11y/interactivity-checker.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
 
-import { InteractivityChecker } from './interactivity-checker';
+import { InteractivityChecker } from './interactivity-checker.js';
 
 describe('InteractivityChecker', () => {
   let testContainerElement: HTMLElement;
diff --git a/src/components/core/base-elements.ts b/src/components/core/base-elements.ts
new file mode 100644
index 0000000000..b369db0b79
--- /dev/null
+++ b/src/components/core/base-elements.ts
@@ -0,0 +1,3 @@
+export * from './base-elements/action-base-element.js';
+export * from './base-elements/button-base-element.js';
+export * from './base-elements/link-base-element.js';
diff --git a/src/components/core/common-behaviors/action-base-element.e2e.ts b/src/components/core/base-elements/action-base-element.e2e.ts
similarity index 77%
rename from src/components/core/common-behaviors/action-base-element.e2e.ts
rename to src/components/core/base-elements/action-base-element.e2e.ts
index 3e6f13d6bb..5673efb017 100644
--- a/src/components/core/common-behaviors/action-base-element.e2e.ts
+++ b/src/components/core/base-elements/action-base-element.e2e.ts
@@ -1,9 +1,9 @@
 import { assert, expect } from '@open-wc/testing';
 import { html, type TemplateResult } from 'lit';
 
-import { fixture } from '../testing/private';
+import { fixture } from '../testing/private.js';
 
-import { SbbActionBaseElement } from './action-base-element';
+import { SbbActionBaseElement } from './action-base-element.js';
 
 class GenericAction extends SbbActionBaseElement {
   protected override renderTemplate(): TemplateResult {
@@ -32,3 +32,10 @@ describe(`SbbActionBaseElement with ${fixture.name}`, () => {
     });
   });
 });
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'generic-action': GenericAction;
+  }
+}
diff --git a/src/components/core/common-behaviors/action-base-element.ts b/src/components/core/base-elements/action-base-element.ts
similarity index 94%
rename from src/components/core/common-behaviors/action-base-element.ts
rename to src/components/core/base-elements/action-base-element.ts
index 0e3e693f6f..2146fd139a 100644
--- a/src/components/core/common-behaviors/action-base-element.ts
+++ b/src/components/core/base-elements/action-base-element.ts
@@ -1,8 +1,7 @@
 import { html, LitElement, type TemplateResult } from 'lit';
 
-import { getDocumentWritingMode, getLocalName } from '../dom';
-
-import { hostAttributes } from './host-attributes';
+import { hostAttributes } from '../decorators.js';
+import { getDocumentWritingMode, getLocalName } from '../dom.js';
 
 /**
  * Whenever an element can be disabled it has disabled property
diff --git a/src/components/core/common-behaviors/button-base-element.e2e.ts b/src/components/core/base-elements/button-base-element.e2e.ts
similarity index 89%
rename from src/components/core/common-behaviors/button-base-element.e2e.ts
rename to src/components/core/base-elements/button-base-element.e2e.ts
index 444e228f72..2d63c98a2a 100644
--- a/src/components/core/common-behaviors/button-base-element.e2e.ts
+++ b/src/components/core/base-elements/button-base-element.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html, type TemplateResult } from 'lit';
 
-import { EventSpy, waitForLitRender } from '../testing';
-import { fixture } from '../testing/private';
+import { fixture } from '../testing/private.js';
+import { EventSpy, waitForLitRender } from '../testing.js';
 
-import { SbbButtonBaseElement } from './button-base-element';
+import { SbbButtonBaseElement } from './button-base-element.js';
 
 class GenericButton extends SbbButtonBaseElement {
   public disabled = false;
@@ -92,3 +92,10 @@ describe(`SbbButtonBaseElement with ${fixture.name}`, () => {
     });
   });
 });
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'generic-button': GenericButton;
+  }
+}
diff --git a/src/components/core/common-behaviors/button-base-element.ts b/src/components/core/base-elements/button-base-element.ts
similarity index 91%
rename from src/components/core/common-behaviors/button-base-element.ts
rename to src/components/core/base-elements/button-base-element.ts
index c00fe01623..87a30d2056 100644
--- a/src/components/core/common-behaviors/button-base-element.ts
+++ b/src/components/core/base-elements/button-base-element.ts
@@ -1,10 +1,10 @@
 import { isServer } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { isEventPrevented } from '../eventing';
+import { hostAttributes } from '../decorators.js';
+import { isEventPrevented } from '../eventing.js';
 
-import { SbbActionBaseElement } from './action-base-element';
-import { hostAttributes } from './host-attributes';
+import { SbbActionBaseElement } from './action-base-element.js';
 
 /** Enumeration for type attribute in <button> HTML tag. */
 export type SbbButtonType = 'button' | 'reset' | 'submit';
@@ -69,12 +69,12 @@ export abstract class SbbButtonBaseElement extends SbbActionBaseElement {
   private _preventScrollOnSpaceKeydown = (event: KeyboardEvent): void => {
     if (event.key === ' ') {
       event.preventDefault();
-      (event.target as HTMLElement).dataset.active = '';
+      (event.target as HTMLElement).toggleAttribute('data-active', true);
     }
   };
 
   private _removeActiveMarker = (event: Event): void => {
-    delete (event.target as HTMLElement).dataset.active;
+    (event.target as HTMLElement).removeAttribute('data-active');
   };
 
   /**
diff --git a/src/components/core/common-behaviors/link-base-element.e2e.ts b/src/components/core/base-elements/link-base-element.e2e.ts
similarity index 86%
rename from src/components/core/common-behaviors/link-base-element.e2e.ts
rename to src/components/core/base-elements/link-base-element.e2e.ts
index 718f106239..fe51d7564d 100644
--- a/src/components/core/common-behaviors/link-base-element.e2e.ts
+++ b/src/components/core/base-elements/link-base-element.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html, type TemplateResult } from 'lit';
 
-import { EventSpy, waitForLitRender } from '../testing';
-import { fixture } from '../testing/private';
+import { fixture } from '../testing/private.js';
+import { EventSpy, waitForLitRender } from '../testing.js';
 
-import { SbbLinkBaseElement } from './link-base-element';
+import { SbbLinkBaseElement } from './link-base-element.js';
 
 class GenericLink extends SbbLinkBaseElement {
   public disabled = false;
@@ -73,3 +73,10 @@ describe(`SbbLinkBaseElement with ${fixture.name}`, () => {
     });
   });
 });
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'generic-link': GenericLink;
+  }
+}
diff --git a/src/components/core/common-behaviors/link-base-element.ts b/src/components/core/base-elements/link-base-element.ts
similarity index 88%
rename from src/components/core/common-behaviors/link-base-element.ts
rename to src/components/core/base-elements/link-base-element.ts
index ad8d97b35a..a7b4ff7765 100644
--- a/src/components/core/common-behaviors/link-base-element.ts
+++ b/src/components/core/base-elements/link-base-element.ts
@@ -1,15 +1,15 @@
 import { html, isServer, nothing, type TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { getLocalName } from '../dom';
-import { isEventPrevented } from '../eventing';
-import { i18nTargetOpensInNewWindow } from '../i18n';
+import { SbbLanguageController } from '../controllers.js';
+import { hostAttributes } from '../decorators.js';
+import { getLocalName } from '../dom.js';
+import { isEventPrevented } from '../eventing.js';
+import { i18nTargetOpensInNewWindow } from '../i18n.js';
 
-import { SbbActionBaseElement } from './action-base-element';
-import { hostAttributes } from './host-attributes';
-import { LanguageController } from './language-controller';
+import { SbbActionBaseElement } from './action-base-element.js';
 
-import '../../screen-reader-only';
+import '../../screen-reader-only.js';
 
 /** Enumeration for 'target' attribute in <a> HTML tag. */
 export type LinkTargetType = '_blank' | '_self' | '_parent' | '_top';
@@ -33,7 +33,7 @@ export abstract class SbbLinkBaseElement extends SbbActionBaseElement {
   /** Whether the browser will show the download dialog on click. */
   @property({ type: Boolean }) public download?: boolean;
 
-  protected language = new LanguageController(this);
+  protected language = new SbbLanguageController(this);
 
   public constructor() {
     super();
diff --git a/src/components/core/common-behaviors/index.ts b/src/components/core/common-behaviors/index.ts
deleted file mode 100644
index 0dfcb87e85..0000000000
--- a/src/components/core/common-behaviors/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export * from './action-base-element';
-export * from './button-base-element';
-export * from './constructor';
-export * from './disabled-mixins';
-export * from './form-associated-checkbox-mixin';
-export * from './form-associated-mixin';
-export * from './host-attributes';
-export * from './hydration-mixin';
-export * from './icon-name-mixin';
-export * from './language-controller';
-export * from './link-base-element';
-export * from './named-slot-state-controller';
-export * from './named-slot-list-mixin';
-export * from './negative-mixin';
-export * from './required-mixin';
-export * from './update-scheduler';
diff --git a/src/components/core/config.ts b/src/components/core/config.ts
new file mode 100644
index 0000000000..be3f697642
--- /dev/null
+++ b/src/components/core/config.ts
@@ -0,0 +1 @@
+export * from './config/config.js';
diff --git a/src/components/core/config/config.ts b/src/components/core/config/config.ts
index 14229ffebb..b7d3650d68 100644
--- a/src/components/core/config/config.ts
+++ b/src/components/core/config/config.ts
@@ -1,4 +1,4 @@
-import type { DateAdapter } from '../datetime';
+import type { DateAdapter } from '../datetime.js';
 
 export interface SbbIconConfig {
   interceptor?: (parameters: {
diff --git a/src/components/core/config/index.ts b/src/components/core/config/index.ts
deleted file mode 100644
index f03c2281a9..0000000000
--- a/src/components/core/config/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './config';
diff --git a/src/components/core/controllers.ts b/src/components/core/controllers.ts
new file mode 100644
index 0000000000..c768396594
--- /dev/null
+++ b/src/components/core/controllers.ts
@@ -0,0 +1,3 @@
+export * from './controllers/connected-abort-controller.js';
+export * from './controllers/language-controller.js';
+export * from './controllers/slot-state-controller.js';
diff --git a/src/components/core/eventing/connected-abort-controller.ts b/src/components/core/controllers/connected-abort-controller.ts
similarity index 88%
rename from src/components/core/eventing/connected-abort-controller.ts
rename to src/components/core/controllers/connected-abort-controller.ts
index 03b97e91c9..441d03c41f 100644
--- a/src/components/core/eventing/connected-abort-controller.ts
+++ b/src/components/core/controllers/connected-abort-controller.ts
@@ -1,6 +1,6 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
-export class ConnectedAbortController implements ReactiveController {
+export class SbbConnectedAbortController implements ReactiveController {
   private _abortController?: AbortController = new AbortController();
 
   public get signal(): AbortSignal | undefined {
diff --git a/src/components/core/common-behaviors/language-controller.spec.ts b/src/components/core/controllers/language-controller.spec.ts
similarity index 90%
rename from src/components/core/common-behaviors/language-controller.spec.ts
rename to src/components/core/controllers/language-controller.spec.ts
index db71d63745..b7e127f34c 100644
--- a/src/components/core/common-behaviors/language-controller.spec.ts
+++ b/src/components/core/controllers/language-controller.spec.ts
@@ -1,10 +1,10 @@
 import { aTimeout, expect } from '@open-wc/testing';
 import type { ReactiveControllerHost } from 'lit';
 
-import { LanguageController } from './language-controller';
+import { SbbLanguageController } from './language-controller.js';
 
 describe('LanguageController', () => {
-  let controller: LanguageController;
+  let controller: SbbLanguageController;
   let host: ReactiveControllerHost & { requestUpdateCounter: number };
 
   beforeEach(() => {
@@ -18,7 +18,7 @@ describe('LanguageController', () => {
       },
       updateComplete: Promise.resolve(true),
     };
-    controller = new LanguageController(host);
+    controller = new SbbLanguageController(host);
     controller.hostConnected();
   });
 
@@ -27,7 +27,7 @@ describe('LanguageController', () => {
   });
 
   it('should match static and instance values', () => {
-    expect(controller.current).to.equal(LanguageController.current);
+    expect(controller.current).to.equal(SbbLanguageController.current);
   });
 
   it('should not trigger requestUpdate without language change', () => {
@@ -66,7 +66,7 @@ describe('LanguageController', () => {
 
   it('should call custom handler on connected and after change', async () => {
     const state = { counter: 0 };
-    controller = new LanguageController(host).withHandler(() => (state.counter += 1));
+    controller = new SbbLanguageController(host).withHandler(() => (state.counter += 1));
     expect(state.counter).to.equal(0);
     controller.hostConnected();
     expect(state.counter).to.equal(1);
diff --git a/src/components/core/common-behaviors/language-controller.ts b/src/components/core/controllers/language-controller.ts
similarity index 70%
rename from src/components/core/common-behaviors/language-controller.ts
rename to src/components/core/controllers/language-controller.ts
index 1cc8544132..a0273c278f 100644
--- a/src/components/core/common-behaviors/language-controller.ts
+++ b/src/components/core/controllers/language-controller.ts
@@ -1,8 +1,8 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
-import { readConfig } from '../config';
-import { isBrowser } from '../dom';
-import { AgnosticMutationObserver } from '../observers';
+import { readConfig } from '../config.js';
+import { isBrowser } from '../dom.js';
+import { AgnosticMutationObserver } from '../observers.js';
 
 /**
  * The LanguageController is a reactive controller that observes the "lang" attribute
@@ -12,17 +12,17 @@ import { AgnosticMutationObserver } from '../observers';
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang
  */
-export class LanguageController implements ReactiveController {
+export class SbbLanguageController implements ReactiveController {
   private static readonly _defaultLanguage = 'en';
   private static readonly _supportedLocales = ['en', 'de', 'fr', 'it'];
 
   /** A set of connected components that should be notified on language change. */
-  private static readonly _listeners = new Set<LanguageController>();
+  private static readonly _listeners = new Set<SbbLanguageController>();
 
   /** MutationObserver that observes the "lang" attribute of the <html> element. */
   private static readonly _observer = new AgnosticMutationObserver((mutations) => {
     if (mutations[0].oldValue !== document.documentElement.getAttribute('lang')) {
-      LanguageController._listeners.forEach((l) => l._callHandlers());
+      SbbLanguageController._listeners.forEach((l) => l._callHandlers());
     }
   });
   private static readonly _observerConfig = {
@@ -36,19 +36,19 @@ export class LanguageController implements ReactiveController {
       (readConfig().language ??
         (isBrowser()
           ? document.documentElement.getAttribute('lang')
-          : LanguageController._defaultLanguage)) ||
-      LanguageController._defaultLanguage;
+          : SbbLanguageController._defaultLanguage)) ||
+      SbbLanguageController._defaultLanguage;
 
     // Support e.g. cases like `de-ch`.
     const langAttributeNormalized = language.split('-')[0];
-    return LanguageController._supportedLocales.includes(langAttributeNormalized)
+    return SbbLanguageController._supportedLocales.includes(langAttributeNormalized)
       ? langAttributeNormalized
-      : LanguageController._defaultLanguage;
+      : SbbLanguageController._defaultLanguage;
   }
 
   /** Get the current language. */
   public get current(): string {
-    return LanguageController.current;
+    return SbbLanguageController.current;
   }
 
   private _previousLanguage?: string;
@@ -67,14 +67,14 @@ export class LanguageController implements ReactiveController {
   }
 
   public hostConnected(): void {
-    if (!LanguageController._listeners.size) {
-      LanguageController._observer.observe(
+    if (!SbbLanguageController._listeners.size) {
+      SbbLanguageController._observer.observe(
         document.documentElement,
-        LanguageController._observerConfig,
+        SbbLanguageController._observerConfig,
       );
     }
 
-    LanguageController._listeners.add(this);
+    SbbLanguageController._listeners.add(this);
     if (this._previousLanguage !== this.current) {
       this._callHandlers(this._previousLanguage !== undefined);
     }
@@ -82,9 +82,9 @@ export class LanguageController implements ReactiveController {
 
   public hostDisconnected(): void {
     this._previousLanguage = this.current;
-    LanguageController._listeners.delete(this);
-    if (!LanguageController._listeners.size) {
-      LanguageController._observer.disconnect();
+    SbbLanguageController._listeners.delete(this);
+    if (!SbbLanguageController._listeners.size) {
+      SbbLanguageController._observer.disconnect();
     }
   }
 
diff --git a/src/components/core/common-behaviors/named-slot-state-controller.ts b/src/components/core/controllers/slot-state-controller.ts
similarity index 97%
rename from src/components/core/common-behaviors/named-slot-state-controller.ts
rename to src/components/core/controllers/slot-state-controller.ts
index 49da0dee3d..06d30d4324 100644
--- a/src/components/core/common-behaviors/named-slot-state-controller.ts
+++ b/src/components/core/controllers/slot-state-controller.ts
@@ -19,7 +19,7 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
  *
  * https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
  */
-export class NamedSlotStateController implements ReactiveController {
+export class SbbSlotStateController implements ReactiveController {
   public readonly slots = new Set<string>();
 
   // We avoid using AbortController here, as it would mean creating
diff --git a/src/components/core/datetime.ts b/src/components/core/datetime.ts
new file mode 100644
index 0000000000..37e061731b
--- /dev/null
+++ b/src/components/core/datetime.ts
@@ -0,0 +1,4 @@
+export * from './datetime/data-now.js';
+export * from './datetime/date-adapter.js';
+export * from './datetime/date-helper.js';
+export * from './datetime/native-date-adapter.js';
diff --git a/src/components/core/datetime/data-now.ts b/src/components/core/datetime/data-now.ts
new file mode 100644
index 0000000000..d5e8acac16
--- /dev/null
+++ b/src/components/core/datetime/data-now.ts
@@ -0,0 +1,8 @@
+/**
+ * Reads the value of the data-now attribute and converts it to a number.
+ * `undefined` results in NaN.
+ * @param element
+ */
+export const readDataNow = (element: HTMLElement): number => {
+  return +(element.getAttribute('data-now') ?? undefined)!;
+};
diff --git a/src/components/core/datetime/date-helper.spec.ts b/src/components/core/datetime/date-helper.spec.ts
index f230a08eac..6ed46a09d1 100644
--- a/src/components/core/datetime/date-helper.spec.ts
+++ b/src/components/core/datetime/date-helper.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
 
-import { removeTimezoneFromISOTimeString, durationToTime } from './date-helper';
+import { removeTimezoneFromISOTimeString, durationToTime } from './date-helper.js';
 
 describe('removeTimezoneFromDate', () => {
   it('returns date in local timezone', () => {
diff --git a/src/components/core/datetime/date-helper.ts b/src/components/core/datetime/date-helper.ts
index 76b189298b..15ad4f3925 100644
--- a/src/components/core/datetime/date-helper.ts
+++ b/src/components/core/datetime/date-helper.ts
@@ -9,7 +9,7 @@ import {
   subDays,
 } from 'date-fns';
 
-import { i18nDurationHour, i18nDurationMinute, i18nDurationDay } from '../i18n';
+import { i18nDurationHour, i18nDurationMinute, i18nDurationDay } from '../i18n.js';
 
 /**
  * This function removes the offset of a ISO date string. This needs to be done to make sure that the offset is ignored.
diff --git a/src/components/core/datetime/index.ts b/src/components/core/datetime/index.ts
deleted file mode 100644
index 09b37686e6..0000000000
--- a/src/components/core/datetime/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './date-adapter';
-export * from './date-helper';
-export * from './native-date-adapter';
diff --git a/src/components/core/datetime/native-date-adapter.spec.ts b/src/components/core/datetime/native-date-adapter.spec.ts
index ba76e2f709..54a846060d 100644
--- a/src/components/core/datetime/native-date-adapter.spec.ts
+++ b/src/components/core/datetime/native-date-adapter.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
 
-import { NativeDateAdapter } from './native-date-adapter';
+import { NativeDateAdapter } from './native-date-adapter.js';
 
 describe('NativeDateAdapter', () => {
   let nativeDateAdapter: NativeDateAdapter;
diff --git a/src/components/core/datetime/native-date-adapter.ts b/src/components/core/datetime/native-date-adapter.ts
index b085749db2..ae7e7b55e9 100644
--- a/src/components/core/datetime/native-date-adapter.ts
+++ b/src/components/core/datetime/native-date-adapter.ts
@@ -1,18 +1,18 @@
-import { LanguageController } from '../common-behaviors';
-import type { SbbDateLike } from '../interfaces';
+import { SbbLanguageController } from '../controllers.js';
+import type { SbbDateLike } from '../interfaces.js';
 
-import { DateAdapter, FORMAT_DATE } from './date-adapter';
+import { DateAdapter, FORMAT_DATE } from './date-adapter.js';
 
 /**
  * Matches strings that have the form of a valid RFC 3339 string
  * (https://tools.ietf.org/html/rfc3339). Note that the string may not actually be a valid date
- * because the regex will match strings an with out of bounds month, date, etc.
+ * because the regex will match strings an without of bounds month, date, etc.
  */
 const ISO_8601_REGEX =
   /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;
 
 export class NativeDateAdapter extends DateAdapter<Date> {
-  private _cutoffYearOffset: number;
+  private readonly _cutoffYearOffset: number;
 
   public constructor(cutoffYearOffset: number = 15) {
     super();
@@ -46,7 +46,7 @@ export class NativeDateAdapter extends DateAdapter<Date> {
       month: 'long',
       day: 'numeric',
     };
-    return new Intl.DateTimeFormat(LanguageController.current, options).format(new Date(date));
+    return new Intl.DateTimeFormat(SbbLanguageController.current, options).format(new Date(date));
   }
 
   /**
@@ -55,13 +55,13 @@ export class NativeDateAdapter extends DateAdapter<Date> {
    * E.g., with January in en-gb: `long` returns "January", `short` returns "Jan", `narrow` returns "J".
    */
   public getMonthNames(style: 'long' | 'short' | 'narrow'): string[] {
-    const formatter = new Intl.DateTimeFormat(LanguageController.current, { month: style });
+    const formatter = new Intl.DateTimeFormat(SbbLanguageController.current, { month: style });
     return this._range(12, (i) => formatter.format(new Date(2017, i, 1)));
   }
 
   /** Creates a string array with length = 31, filled with the days in a month, starting from 1. */
   public getDateNames(): string[] {
-    const formatter = new Intl.DateTimeFormat(LanguageController.current, { day: 'numeric' });
+    const formatter = new Intl.DateTimeFormat(SbbLanguageController.current, { day: 'numeric' });
     return this._range(31, (i) => formatter.format(new Date(2017, 0, i + 1)));
   }
 
@@ -71,7 +71,7 @@ export class NativeDateAdapter extends DateAdapter<Date> {
    * E.g., with Monday in en-gb: `long` returns "Monday", `short` returns "Mon", `narrow` returns "M".
    */
   public getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[] {
-    const formatter = new Intl.DateTimeFormat(LanguageController.current, { weekday: style });
+    const formatter = new Intl.DateTimeFormat(SbbLanguageController.current, { weekday: style });
     return this._range(7, (i) => formatter.format(new Date(2017, 0, i + 1)));
   }
 
@@ -205,7 +205,7 @@ export class NativeDateAdapter extends DateAdapter<Date> {
     if (!value) {
       return '';
     }
-    const locale = `${LanguageController.current}-CH`;
+    const locale = `${SbbLanguageController.current}-CH`;
     const dateFormatter = new Intl.DateTimeFormat('de-CH', {
       day: '2-digit',
       month: '2-digit',
diff --git a/src/components/core/decorators.ts b/src/components/core/decorators.ts
new file mode 100644
index 0000000000..7684efe83e
--- /dev/null
+++ b/src/components/core/decorators.ts
@@ -0,0 +1 @@
+export * from './decorators/host-attributes.js';
diff --git a/src/components/core/common-behaviors/host-attributes.ts b/src/components/core/decorators/host-attributes.ts
similarity index 82%
rename from src/components/core/common-behaviors/host-attributes.ts
rename to src/components/core/decorators/host-attributes.ts
index d84fe68304..168581e485 100644
--- a/src/components/core/common-behaviors/host-attributes.ts
+++ b/src/components/core/decorators/host-attributes.ts
@@ -1,13 +1,16 @@
 import { isServer, type ReactiveElement } from 'lit';
 
-import type { AbstractConstructor } from './constructor';
+import type { AbstractConstructor } from '../mixins.js';
 
-function applyAttributes(instance: ReactiveElement, attributes: Record<string, string>): void {
+function applyAttributes(
+  instance: ReactiveElement,
+  attributes: Record<string, string | null>,
+): void {
   for (const [name, value] of Object.entries(attributes)) {
     if (value) {
       instance.setAttribute(name, value);
     } else {
-      instance.toggleAttribute(name, true);
+      instance.toggleAttribute(name, value !== null);
     }
   }
 }
@@ -30,7 +33,7 @@ function applyAttributes(instance: ReactiveElement, attributes: Record<string, s
  * @param attributes A record of attributes to apply to the element.
  */
 export const hostAttributes =
-  (attributes: Record<string, string>) => (target: AbstractConstructor<ReactiveElement>) =>
+  (attributes: Record<string, string | null>) => (target: AbstractConstructor<ReactiveElement>) =>
     (target as typeof ReactiveElement).addInitializer((instance: ReactiveElement) => {
       if (isServer) {
         applyAttributes(instance, attributes);
diff --git a/src/components/core/dom.ts b/src/components/core/dom.ts
new file mode 100644
index 0000000000..5920d373a4
--- /dev/null
+++ b/src/components/core/dom.ts
@@ -0,0 +1,9 @@
+export * from './dom/breakpoint.js';
+export * from './dom/find-referenced-element.js';
+export * from './dom/get-document-writing-mode.js';
+export * from './dom/host-context.js';
+export * from './dom/input-element.js';
+export * from './dom/set-or-remove-attribute.js';
+export * from './dom/platform.js';
+export * from './dom/scroll.js';
+export * from './dom/ssr.js';
diff --git a/src/components/core/dom/breakpoint.ts b/src/components/core/dom/breakpoint.ts
index 7f0d4d35e2..0e1c3b23b2 100644
--- a/src/components/core/dom/breakpoint.ts
+++ b/src/components/core/dom/breakpoint.ts
@@ -1,6 +1,7 @@
-import { isBrowser } from './platform';
+import { isBrowser } from './platform.js';
 
-export type Breakpoint = 'zero' | 'micro' | 'small' | 'medium' | 'wide' | 'large' | 'ultra';
+export const breakpoints = ['zero', 'micro', 'small', 'medium', 'wide', 'large', 'ultra'] as const;
+export type Breakpoint = (typeof breakpoints)[number];
 
 /**
  * Checks whether the document matches a particular media query.
@@ -10,7 +11,11 @@ export type Breakpoint = 'zero' | 'micro' | 'small' | 'medium' | 'wide' | 'large
  * @param to The breakpoint corresponding to the `max-width` value of the media query (optional).
  * @returns A boolean indicating whether the window matches the breakpoint.
  */
-export function isBreakpoint(from?: Breakpoint, to?: Breakpoint): boolean {
+export function isBreakpoint(
+  from?: Breakpoint,
+  to?: Breakpoint,
+  properties?: { includeMaxBreakpoint: boolean },
+): boolean {
   if (!isBrowser()) {
     // TODO: Remove and decide case by case what should be done on consuming end
     return false;
@@ -19,7 +24,13 @@ export function isBreakpoint(from?: Breakpoint, to?: Breakpoint): boolean {
   const computedStyle = getComputedStyle(document.documentElement);
   const breakpointMin = from ? computedStyle.getPropertyValue(`--sbb-breakpoint-${from}-min`) : '';
   const breakpointMax = to
-    ? `${parseFloat(computedStyle.getPropertyValue(`--sbb-breakpoint-${to}-min`)) - 0.0625}rem`
+    ? `${
+        parseFloat(
+          computedStyle.getPropertyValue(
+            `--sbb-breakpoint-${to}-${properties?.includeMaxBreakpoint ? 'max' : 'min'}`,
+          ),
+        ) - (properties?.includeMaxBreakpoint ? 0 : 0.0625)
+      }rem`
     : ''; // subtract 1px (0.0625rem) from the max-width breakpoint
 
   const minWidth = breakpointMin && `(min-width: ${breakpointMin})`;
diff --git a/src/components/core/dom/find-referenced-element.ts b/src/components/core/dom/find-referenced-element.ts
index 95e952c54e..5b3d9ff547 100644
--- a/src/components/core/dom/find-referenced-element.ts
+++ b/src/components/core/dom/find-referenced-element.ts
@@ -1,4 +1,4 @@
-import { isBrowser } from './platform';
+import { isBrowser } from './platform.js';
 
 /**
  *  Check whether it's a string or an HTMLElement, if it's a string queries the element with the
diff --git a/src/components/core/dom/get-document-writing-mode.ts b/src/components/core/dom/get-document-writing-mode.ts
index b30c07f611..86939b7bec 100644
--- a/src/components/core/dom/get-document-writing-mode.ts
+++ b/src/components/core/dom/get-document-writing-mode.ts
@@ -1,4 +1,4 @@
-import { isBrowser } from './platform';
+import { isBrowser } from './platform.js';
 
 export const getDocumentWritingMode = (): string =>
   (isBrowser() && document.documentElement.getAttribute('dir')) || 'ltr';
diff --git a/src/components/core/dom/host-context.spec.ts b/src/components/core/dom/host-context.spec.ts
index f971cbc4c6..1ad64753cd 100644
--- a/src/components/core/dom/host-context.spec.ts
+++ b/src/components/core/dom/host-context.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
 
-import { hostContext } from './host-context';
+import { hostContext } from './host-context.js';
 
 describe('hostContext', () => {
   it('should travers shadow dom boundaries', async () => {
diff --git a/src/components/core/dom/host-context.ts b/src/components/core/dom/host-context.ts
index 4b7edc6ca6..ad82e1e0c2 100644
--- a/src/components/core/dom/host-context.ts
+++ b/src/components/core/dom/host-context.ts
@@ -1,4 +1,4 @@
-import { isBrowser } from './platform';
+import { isBrowser } from './platform.js';
 
 /**
  * Looks for the closest element matching the given selector starting from the given element.
diff --git a/src/components/core/dom/index.ts b/src/components/core/dom/index.ts
deleted file mode 100644
index 615a266a22..0000000000
--- a/src/components/core/dom/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export * from './breakpoint';
-export * from './find-referenced-element';
-export * from './get-document-writing-mode';
-export * from './host-context';
-export * from './input-element';
-export * from './is-valid-attribute';
-export * from './platform';
-export * from './scroll';
-export * from './spread';
-export * from './ssr';
diff --git a/src/components/core/dom/input-element.ts b/src/components/core/dom/input-element.ts
index dd2863f0b3..8a392082d8 100644
--- a/src/components/core/dom/input-element.ts
+++ b/src/components/core/dom/input-element.ts
@@ -1,11 +1,4 @@
-import { findReferencedElement } from './find-referenced-element';
-
-/**
- * Resolves the input element inside the shadow DOM of the given element.
- */
-export function findShadowInput(element: HTMLElement): HTMLInputElement | null | undefined {
-  return element.shadowRoot?.querySelector('input');
-}
+import { findReferencedElement } from './find-referenced-element.js';
 
 /**
  * Given an element, returns the related input reference, if it exists respecting following priority.
diff --git a/src/components/core/dom/is-valid-attribute.ts b/src/components/core/dom/is-valid-attribute.ts
deleted file mode 100644
index cc72b583e3..0000000000
--- a/src/components/core/dom/is-valid-attribute.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Check if the provided attribute is present on the provided element and if it is set to true.
- * @param element The element to check.
- * @param attribute The attribute to be checked.
- */
-export function isValidAttribute(element: Element, attribute: string): boolean {
-  return element.hasAttribute(attribute) && element.getAttribute(attribute) !== 'false';
-}
-
-/**
- * Set the attribute only if value is not 'false'
- * @param element The element that will have the attribute
- * @param attribute The attribute name
- * @param value The attribute value
- */
-export function setAttribute(element: HTMLElement, attribute: string, value?: any): void {
-  if (!value) {
-    element.removeAttribute(attribute);
-    return;
-  }
-
-  if (typeof value === 'boolean') {
-    element.setAttribute(attribute, '');
-  } else {
-    element.setAttribute(attribute, value);
-  }
-}
-
-/**
- * Set multiple attributes
- * @param element The element that will have the attributes
- * @param attributes Attributes object
- */
-export function setAttributes(element: HTMLElement, attributes?: Record<string, any>): void {
-  if (!attributes) {
-    return;
-  }
-
-  for (const [name, value] of Object.entries(attributes)) {
-    setAttribute(element, name, value);
-  }
-}
diff --git a/src/components/core/dom/scroll.ts b/src/components/core/dom/scroll.ts
index 2a0c2edfc3..358b4b4602 100644
--- a/src/components/core/dom/scroll.ts
+++ b/src/components/core/dom/scroll.ts
@@ -1,14 +1,12 @@
-import { isValidAttribute } from './is-valid-attribute';
-
 export function pageScrollDisabled(): boolean {
-  return isValidAttribute(document.body, 'data-sbb-scroll-disabled');
+  return document.body.hasAttribute('data-sbb-scroll-disabled');
 }
 
 /**
  * Handle the page scroll, allowing to disable/enable the window scroll avoiding a potential
  * content shift caused by the disappearance/appearance of the scrollbar.
  */
-export class ScrollHandler {
+export class SbbScrollHandler {
   private _position!: string;
   private _overflow!: string;
   private _marginInlineEnd!: string;
@@ -44,6 +42,6 @@ export class ScrollHandler {
     document.body.style.marginInlineEnd = this._marginInlineEnd || '';
     document.body.style.setProperty('--sbb-scrollbar-width', '0');
 
-    document.body.toggleAttribute('data-sbb-scroll-disabled', false);
+    document.body.removeAttribute('data-sbb-scroll-disabled');
   }
 }
diff --git a/src/components/core/dom/set-or-remove-attribute.ts b/src/components/core/dom/set-or-remove-attribute.ts
new file mode 100644
index 0000000000..8def34be61
--- /dev/null
+++ b/src/components/core/dom/set-or-remove-attribute.ts
@@ -0,0 +1,13 @@
+/**
+ * Set the attribute only if value is not 'false', otherwise remove attribute.
+ * @param element The element that will have the attribute
+ * @param attribute The attribute name
+ * @param value The attribute value
+ */
+export function setOrRemoveAttribute(element: HTMLElement, attribute: string, value?: any): void {
+  if (!value) {
+    element.removeAttribute(attribute);
+  } else {
+    element.setAttribute(attribute, value);
+  }
+}
diff --git a/src/components/core/dom/ssr.ts b/src/components/core/dom/ssr.ts
index 089f792c4d..67a2d025f0 100644
--- a/src/components/core/dom/ssr.ts
+++ b/src/components/core/dom/ssr.ts
@@ -6,7 +6,7 @@ const localNameCache = new Map<unknown, string>();
  * In SSR the local/tag name is not available on the class instance, but it is available
  * in the shim customElements registry.
  *
- * https://github.com/lit/lit/blob/main/packages/labs/ssr-dom-shim/src/index.ts (See CustomElementRegistryShim)
+ * https://github.com/lit/lit/blob/main/packages/labs/ssr-dom-shim/src.ts (See CustomElementRegistryShim)
  *
  * Can be removed once https://github.com/lit/lit/pull/4553 is merged/released.
  */
diff --git a/src/components/core/eventing.ts b/src/components/core/eventing.ts
new file mode 100644
index 0000000000..3afa9c472a
--- /dev/null
+++ b/src/components/core/eventing.ts
@@ -0,0 +1,8 @@
+export * from './eventing/composed-path-has-attribute.js';
+export * from './eventing/event-emitter.js';
+export * from './eventing/event-target.js';
+export * from './eventing/form-element-handlers.js';
+export * from './eventing/forward-event.js';
+export * from './eventing/handler-repository.js';
+export * from './eventing/is-event-prevented.js';
+export * from './eventing/throttle.js';
diff --git a/src/components/core/eventing/form-element-handlers.ts b/src/components/core/eventing/form-element-handlers.ts
index 29b06cc8fd..20545463c8 100644
--- a/src/components/core/eventing/form-element-handlers.ts
+++ b/src/components/core/eventing/form-element-handlers.ts
@@ -1,4 +1,4 @@
-import type { HandlerAspect } from './handler-repository';
+import type { HandlerAspect } from './handler-repository.js';
 
 /**
  * Prevents scrolling from pressing Space
@@ -11,7 +11,9 @@ export function preventScrollOnSpacebarPress(event: KeyboardEvent): void {
 }
 
 /**
- * Handler to prevent scrolling on space bar click
+ * Handler to prevent scrolling on space bar click.
+ *
+ * @deprecated TODO: remove once radio button became form element
  */
 export const formElementHandlerAspect: HandlerAspect = ({ host, signal }) => {
   host.addEventListener('keydown', preventScrollOnSpacebarPress, { signal });
diff --git a/src/components/core/eventing/handler-repository.ts b/src/components/core/eventing/handler-repository.ts
index 22bb102f0a..05a5ea5a5e 100644
--- a/src/components/core/eventing/handler-repository.ts
+++ b/src/components/core/eventing/handler-repository.ts
@@ -1,12 +1,24 @@
+/**
+ * @deprecated
+ * TODO: remove once radio button became form element
+ */
 export interface HandlerAspectParams {
   host: HTMLElement;
   signal: AbortSignal;
 }
 
+/**
+ * @deprecated
+ * TODO: remove once radio button became form element
+ */
 export interface HandlerAspect {
   (params: HandlerAspectParams): void;
 }
 
+/**
+ * @deprecated
+ * TODO: remove once radio button became form element
+ */
 export class HandlerRepository {
   private _aspects: HandlerAspect[];
   private _controller?: AbortController;
diff --git a/src/components/core/eventing/index.ts b/src/components/core/eventing/index.ts
deleted file mode 100644
index e013af8ba3..0000000000
--- a/src/components/core/eventing/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from './composed-path-has-attribute';
-export * from './connected-abort-controller';
-export * from './event-emitter';
-export * from './event-target';
-export * from './form-element-handlers';
-export * from './forward-event';
-export * from './handler-repository';
-export * from './is-event-prevented';
-export * from './throttle';
diff --git a/src/components/core/i18n.ts b/src/components/core/i18n.ts
new file mode 100644
index 0000000000..d024c76ad6
--- /dev/null
+++ b/src/components/core/i18n.ts
@@ -0,0 +1 @@
+export * from './i18n/i18n.js';
diff --git a/src/components/core/i18n/i18n.ts b/src/components/core/i18n/i18n.ts
index 7c5e1b1b3d..0c5c600a34 100644
--- a/src/components/core/i18n/i18n.ts
+++ b/src/components/core/i18n/i18n.ts
@@ -1,4 +1,4 @@
-import type { SbbLanguage, SbbOccupancy } from '../interfaces';
+import type { SbbLanguage, SbbOccupancy } from '../interfaces.js';
 
 export const i18nDirection: Record<string, string> = {
   de: 'Richtung',
diff --git a/src/components/core/i18n/index.ts b/src/components/core/i18n/index.ts
deleted file mode 100644
index e82230f1bf..0000000000
--- a/src/components/core/i18n/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './i18n';
diff --git a/src/components/core/interfaces.ts b/src/components/core/interfaces.ts
new file mode 100644
index 0000000000..d6d8a35523
--- /dev/null
+++ b/src/components/core/interfaces.ts
@@ -0,0 +1,2 @@
+export * from './interfaces/types.js';
+export * from './interfaces/validation-change.js';
diff --git a/src/components/core/interfaces/index.ts b/src/components/core/interfaces/index.ts
deleted file mode 100644
index 3ea76dffac..0000000000
--- a/src/components/core/interfaces/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './types';
-export * from './validation-change';
diff --git a/src/components/core/interfaces/types.ts b/src/components/core/interfaces/types.ts
index 18db05c822..576c7e037f 100644
--- a/src/components/core/interfaces/types.ts
+++ b/src/components/core/interfaces/types.ts
@@ -16,6 +16,8 @@ export type SbbStateChange = SbbCheckedStateChange | SbbDisabledStateChange | Sb
 
 export type SbbTimetableAppearance = 'first-level' | 'second-level';
 
+export type SbbOpenedClosedState = 'closed' | 'opening' | 'opened' | 'closing';
+
 export interface SbbCheckedStateChange {
   type: 'checked';
   checked: boolean;
diff --git a/src/components/core/interfaces/validation-change.ts b/src/components/core/interfaces/validation-change.ts
index e1024ec86f..b2891cdcd5 100644
--- a/src/components/core/interfaces/validation-change.ts
+++ b/src/components/core/interfaces/validation-change.ts
@@ -1,3 +1,3 @@
-export interface ValidationChangeEvent {
+export interface SbbValidationChangeEvent {
   valid: boolean;
 }
diff --git a/src/components/core/mixins.ts b/src/components/core/mixins.ts
new file mode 100644
index 0000000000..2038021e61
--- /dev/null
+++ b/src/components/core/mixins.ts
@@ -0,0 +1,9 @@
+export * from './mixins/constructor.js';
+export * from './mixins/disabled-mixin.js';
+export * from './mixins/form-associated-checkbox-mixin.js';
+export * from './mixins/form-associated-mixin.js';
+export * from './mixins/hydration-mixin.js';
+export * from './mixins/named-slot-list-mixin.js';
+export * from './mixins/negative-mixin.js';
+export * from './mixins/required-mixin.js';
+export * from './mixins/update-scheduler-mixin.js';
diff --git a/src/components/core/common-behaviors/constructor.ts b/src/components/core/mixins/constructor.ts
similarity index 100%
rename from src/components/core/common-behaviors/constructor.ts
rename to src/components/core/mixins/constructor.ts
diff --git a/src/components/core/common-behaviors/disabled-mixins.ts b/src/components/core/mixins/disabled-mixin.ts
similarity index 90%
rename from src/components/core/common-behaviors/disabled-mixins.ts
rename to src/components/core/mixins/disabled-mixin.ts
index 7f3087c1f1..233fe2e1cf 100644
--- a/src/components/core/common-behaviors/disabled-mixins.ts
+++ b/src/components/core/mixins/disabled-mixin.ts
@@ -1,7 +1,7 @@
 import type { LitElement, PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { AbstractConstructor } from './constructor';
+import type { AbstractConstructor } from './constructor.js';
 
 export declare class SbbDisabledMixinType {
   public set disabled(value: boolean);
@@ -16,7 +16,7 @@ export declare class SbbDisabledMixinType {
 export const SbbDisabledMixin = <T extends AbstractConstructor<LitElement>>(
   superClass: T,
 ): AbstractConstructor<SbbDisabledMixinType> & T => {
-  abstract class SbbDisabled extends superClass implements Partial<SbbDisabledMixinType> {
+  abstract class SbbDisabledElement extends superClass implements Partial<SbbDisabledMixinType> {
     /** Whether the component is disabled. */
     @property({ reflect: true, type: Boolean })
     public set disabled(value: boolean) {
@@ -38,7 +38,7 @@ export const SbbDisabledMixin = <T extends AbstractConstructor<LitElement>>(
     }
   }
 
-  return SbbDisabled as unknown as AbstractConstructor<SbbDisabledMixinType> & T;
+  return SbbDisabledElement as unknown as AbstractConstructor<SbbDisabledMixinType> & T;
 };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/src/components/core/common-behaviors/form-associated-checkbox-mixin.ts b/src/components/core/mixins/form-associated-checkbox-mixin.ts
similarity index 96%
rename from src/components/core/common-behaviors/form-associated-checkbox-mixin.ts
rename to src/components/core/mixins/form-associated-checkbox-mixin.ts
index c271fdf093..9d2eeae27c 100644
--- a/src/components/core/common-behaviors/form-associated-checkbox-mixin.ts
+++ b/src/components/core/mixins/form-associated-checkbox-mixin.ts
@@ -1,18 +1,18 @@
 import { defaultConverter, type LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { preventScrollOnSpacebarPress } from '../eventing';
+import { hostAttributes } from '../decorators.js';
+import { preventScrollOnSpacebarPress } from '../eventing.js';
 
-import type { Constructor } from './constructor';
-import { SbbDisabledMixin, type SbbDisabledMixinType } from './disabled-mixins';
+import type { Constructor } from './constructor.js';
+import { SbbDisabledMixin, type SbbDisabledMixinType } from './disabled-mixin.js';
 import {
-  SbbFormAssociatedMixin,
-  type SbbFormAssociatedMixinType,
   type FormRestoreReason,
   type FormRestoreState,
-} from './form-associated-mixin';
-import { hostAttributes } from './host-attributes';
-import { SbbRequiredMixin, type SbbRequiredMixinType } from './required-mixin';
+  SbbFormAssociatedMixin,
+  type SbbFormAssociatedMixinType,
+} from './form-associated-mixin.js';
+import { SbbRequiredMixin, type SbbRequiredMixinType } from './required-mixin.js';
 
 type CheckedSetterValue = { value: boolean; attribute: boolean };
 
diff --git a/src/components/core/common-behaviors/form-associated-mixin.ts b/src/components/core/mixins/form-associated-mixin.ts
similarity index 99%
rename from src/components/core/common-behaviors/form-associated-mixin.ts
rename to src/components/core/mixins/form-associated-mixin.ts
index 9615fcce38..268d604e1d 100644
--- a/src/components/core/common-behaviors/form-associated-mixin.ts
+++ b/src/components/core/mixins/form-associated-mixin.ts
@@ -1,7 +1,7 @@
 import type { LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 
-import type { Constructor } from './constructor';
+import type { Constructor } from './constructor.js';
 
 export declare abstract class SbbFormAssociatedMixinType {
   public get form(): HTMLFormElement | null;
diff --git a/src/components/core/common-behaviors/hydration-mixin.ts b/src/components/core/mixins/hydration-mixin.ts
similarity index 95%
rename from src/components/core/common-behaviors/hydration-mixin.ts
rename to src/components/core/mixins/hydration-mixin.ts
index a19877c72e..fcb19b6c81 100644
--- a/src/components/core/common-behaviors/hydration-mixin.ts
+++ b/src/components/core/mixins/hydration-mixin.ts
@@ -1,8 +1,8 @@
 import { isServer, type LitElement, type PropertyValues } from 'lit';
 
-import { forwardEventToHost } from '../eventing';
+import { forwardEventToHost } from '../eventing.js';
 
-import type { AbstractConstructor } from './constructor';
+import type { AbstractConstructor } from './constructor.js';
 
 // Define the interface for the mixin
 export declare abstract class SbbHydrationMixinType {
@@ -39,10 +39,7 @@ const litElementHydrateSupport = 'litElementHydrateSupport';
  * a production module.
  * TODO: Should this be solved in a different way or removed in a production build?
  */
-const hydrationSuppressed =
-  isServer ||
-  document.head.querySelector('meta[name="testGroup"]')?.getAttribute('content') ===
-    'e2e-ssr-non-hydrated';
+const hydrationSuppressed = isServer || (globalThis as any).testGroup === 'e2e-ssr-non-hydrated';
 
 /**
  * This mixin extends a base class with functionality to check if hydration is completed.
diff --git a/src/components/core/common-behaviors/named-slot-list-mixin.ts b/src/components/core/mixins/named-slot-list-mixin.ts
similarity index 96%
rename from src/components/core/common-behaviors/named-slot-list-mixin.ts
rename to src/components/core/mixins/named-slot-list-mixin.ts
index 42676f0187..71fb39b032 100644
--- a/src/components/core/common-behaviors/named-slot-list-mixin.ts
+++ b/src/components/core/mixins/named-slot-list-mixin.ts
@@ -1,12 +1,12 @@
-import { type LitElement, html, nothing, type TemplateResult } from 'lit';
+import { html, type LitElement, nothing, type TemplateResult } from 'lit';
 import { state } from 'lit/decorators.js';
 
-import { getLocalName } from '../dom';
+import { getLocalName } from '../dom.js';
 
-import type { AbstractConstructor } from './constructor';
-import { SbbHydrationMixin, type SbbHydrationMixinType } from './hydration-mixin';
+import type { AbstractConstructor } from './constructor.js';
+import { SbbHydrationMixin, type SbbHydrationMixinType } from './hydration-mixin.js';
 
-import '../../screen-reader-only';
+import '../../screen-reader-only.js';
 
 const SSR_CHILD_COUNT_ATTRIBUTE = 'data-ssr-child-count';
 const SLOTNAME_PREFIX = 'li';
diff --git a/src/components/core/common-behaviors/negative-mixin.ts b/src/components/core/mixins/negative-mixin.ts
similarity index 71%
rename from src/components/core/common-behaviors/negative-mixin.ts
rename to src/components/core/mixins/negative-mixin.ts
index 539e3e4a85..ae053c4a11 100644
--- a/src/components/core/common-behaviors/negative-mixin.ts
+++ b/src/components/core/mixins/negative-mixin.ts
@@ -1,7 +1,7 @@
 import type { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { AbstractConstructor } from './constructor';
+import type { AbstractConstructor } from './constructor.js';
 
 export declare class SbbNegativeMixinType {
   public negative: boolean;
@@ -14,10 +14,10 @@ export declare class SbbNegativeMixinType {
 export const SbbNegativeMixin = <T extends AbstractConstructor<LitElement>>(
   superClass: T,
 ): AbstractConstructor<SbbNegativeMixinType> & T => {
-  abstract class SbbNegative extends superClass implements SbbNegativeMixinType {
+  abstract class SbbNegativeElement extends superClass implements SbbNegativeMixinType {
     /** Negative coloring variant flag. */
     @property({ reflect: true, type: Boolean }) public negative: boolean = false;
   }
 
-  return SbbNegative as AbstractConstructor<SbbNegativeMixinType> & T;
+  return SbbNegativeElement as AbstractConstructor<SbbNegativeMixinType> & T;
 };
diff --git a/src/components/core/common-behaviors/required-mixin.ts b/src/components/core/mixins/required-mixin.ts
similarity index 86%
rename from src/components/core/common-behaviors/required-mixin.ts
rename to src/components/core/mixins/required-mixin.ts
index 0e428bc4b3..38d3675fc4 100644
--- a/src/components/core/common-behaviors/required-mixin.ts
+++ b/src/components/core/mixins/required-mixin.ts
@@ -1,8 +1,8 @@
 import type { LitElement, PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { AbstractConstructor } from './constructor';
-import type { SbbFormAssociatedMixinType } from './form-associated-mixin';
+import type { AbstractConstructor } from './constructor.js';
+import type { SbbFormAssociatedMixinType } from './form-associated-mixin.js';
 
 export declare class SbbRequiredMixinType {
   public set required(value: boolean);
@@ -19,7 +19,7 @@ export const SbbRequiredMixin = <
 >(
   superClass: T,
 ): AbstractConstructor<SbbRequiredMixinType> & T => {
-  abstract class SbbRequired extends superClass implements Partial<SbbRequiredMixinType> {
+  abstract class SbbRequiredElement extends superClass implements Partial<SbbRequiredMixinType> {
     /** Whether the component is required. */
     @property({ reflect: true, type: Boolean })
     public set required(value: boolean) {
@@ -49,5 +49,5 @@ export const SbbRequiredMixin = <
     }
   }
 
-  return SbbRequired as unknown as AbstractConstructor<SbbRequiredMixinType> & T;
+  return SbbRequiredElement as unknown as AbstractConstructor<SbbRequiredMixinType> & T;
 };
diff --git a/src/components/core/common-behaviors/update-scheduler.ts b/src/components/core/mixins/update-scheduler-mixin.ts
similarity index 68%
rename from src/components/core/common-behaviors/update-scheduler.ts
rename to src/components/core/mixins/update-scheduler-mixin.ts
index 2e740352b1..37d7aa7b59 100644
--- a/src/components/core/common-behaviors/update-scheduler.ts
+++ b/src/components/core/mixins/update-scheduler-mixin.ts
@@ -1,9 +1,9 @@
 import type { LitElement } from 'lit';
 
-import type { Constructor } from './constructor';
+import type { Constructor } from './constructor.js';
 
 // Define the interface for the mixin
-export declare class UpdateSchedulerType {
+export declare class SbbUpdateSchedulerMixinType {
   protected startUpdate(): void;
   protected completeUpdate(): void;
 }
@@ -14,10 +14,10 @@ export declare class UpdateSchedulerType {
  * @returns A class extended with the slot child observer functionality.
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const UpdateScheduler = <T extends Constructor<LitElement>>(
+export const SbbUpdateSchedulerMixin = <T extends Constructor<LitElement>>(
   base: T,
-): Constructor<UpdateSchedulerType> & T => {
-  class UpdateSchedulerClass extends base implements Partial<UpdateSchedulerType> {
+): Constructor<SbbUpdateSchedulerMixinType> & T => {
+  class SbbUpdateSchedulerElement extends base implements Partial<SbbUpdateSchedulerMixinType> {
     private _updatePromise = Promise.resolve();
     private _updateResolve = (): void => {};
 
@@ -35,5 +35,5 @@ export const UpdateScheduler = <T extends Constructor<LitElement>>(
       return result;
     }
   }
-  return UpdateSchedulerClass as unknown as Constructor<UpdateSchedulerType> & T;
+  return SbbUpdateSchedulerElement as unknown as Constructor<SbbUpdateSchedulerMixinType> & T;
 };
diff --git a/src/components/core/observers.ts b/src/components/core/observers.ts
new file mode 100644
index 0000000000..1c1b0d8ee2
--- /dev/null
+++ b/src/components/core/observers.ts
@@ -0,0 +1,3 @@
+export * from './observers/intersection-observer.js';
+export * from './observers/mutation-observer.js';
+export * from './observers/resize-observer.js';
diff --git a/src/components/core/observers/index.ts b/src/components/core/observers/index.ts
deleted file mode 100644
index 3ee55ce4ea..0000000000
--- a/src/components/core/observers/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './intersection-observer';
-export * from './mutation-observer';
-export * from './resize-observer';
diff --git a/src/components/core/observers/mutation-observer.ts b/src/components/core/observers/mutation-observer.ts
index 477bd0101f..0ad99dcac4 100644
--- a/src/components/core/observers/mutation-observer.ts
+++ b/src/components/core/observers/mutation-observer.ts
@@ -3,7 +3,6 @@ export class NodeMutationObserver implements MutationObserver {
     // Noop
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public observe(_target: Node, _options?: MutationObserverInit): void {
     // Noop
   }
diff --git a/src/components/core/overlay.ts b/src/components/core/overlay.ts
new file mode 100644
index 0000000000..eeed1ee3d9
--- /dev/null
+++ b/src/components/core/overlay.ts
@@ -0,0 +1,4 @@
+export * from './overlay/overlay.js';
+export * from './overlay/overlay-option-panel.js';
+export * from './overlay/overlay-trigger-attributes.js';
+export * from './overlay/position.js';
diff --git a/src/components/core/overlay/index.ts b/src/components/core/overlay/index.ts
deleted file mode 100644
index 96b85ea889..0000000000
--- a/src/components/core/overlay/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './overlay';
-export * from './overlay-option-panel';
-export * from './overlay-trigger-attributes';
-export * from './position';
diff --git a/src/components/core/overlay/overlay-option-panel.ts b/src/components/core/overlay/overlay-option-panel.ts
index 897172f746..8028c249d9 100644
--- a/src/components/core/overlay/overlay-option-panel.ts
+++ b/src/components/core/overlay/overlay-option-panel.ts
@@ -1,4 +1,4 @@
-import { getElementPosition } from './position';
+import { getElementPosition } from './position.js';
 
 /**
  * Places the overlay in the correct position.
diff --git a/src/components/core/overlay/overlay.ts b/src/components/core/overlay/overlay.ts
index ba7f36b951..03c0787e7b 100644
--- a/src/components/core/overlay/overlay.ts
+++ b/src/components/core/overlay/overlay.ts
@@ -1,8 +1,7 @@
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-export type SbbOverlayState = 'closed' | 'opening' | 'opened' | 'closing';
-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)
@@ -43,7 +42,7 @@ const setSbbInert = (el: HTMLElement): void => {
   if (!el.inert) {
     el.inert = true;
     if (el.matches(IS_OPEN_OVERLAY_QUERY)) {
-      el.dataset.sbbInert = `${+el.dataset.sbbInert! + 1 || 0}`;
+      el.setAttribute('data-sbb-inert', `${+el.getAttribute('data-sbb-inert')! + 1 || 0}`);
     } else {
       el.toggleAttribute('data-sbb-inert', true);
     }
@@ -61,12 +60,12 @@ const setSbbInert = (el: HTMLElement): void => {
 const removeSbbInert = (el: HTMLElement): void => {
   if (el.hasAttribute('data-sbb-inert')) {
     el.inert = false;
-    el.toggleAttribute('data-sbb-inert', false);
+    el.removeAttribute('data-sbb-inert');
   }
 
   if (el.hasAttribute('data-sbb-aria-hidden')) {
     el.removeAttribute('aria-hidden');
-    el.toggleAttribute('data-sbb-aria-hidden', false);
+    el.removeAttribute('data-sbb-aria-hidden');
   }
 };
 
@@ -93,7 +92,7 @@ export function applyInertMechanism(overlay: HTMLElement): void {
       ) as HTMLElement[],
     );
     if (el.matches(IS_OPEN_OVERLAY_QUERY)) {
-      el.dataset.sbbInert = `${+el.dataset.sbbInert! + 1 || 0}`;
+      el.setAttribute('data-sbb-inert', `${+el.getAttribute('data-sbb-inert')! + 1 || 0}`);
     }
   }
 
@@ -107,8 +106,10 @@ export function removeInertMechanism(): void {
 
   if (openOverlays.length) {
     openOverlays.forEach((el) => {
-      el.dataset.sbbInert = `${+el.dataset.sbbInert! - 1}`;
-      if (el.dataset.sbbInert && +el.dataset.sbbInert < 0) {
+      const newValue = +el.getAttribute('data-sbb-inert')! - 1;
+      el.setAttribute('data-sbb-inert', `${newValue}`);
+
+      if (newValue && newValue < 0) {
         removeSbbInert(el);
         Array.from(el.children).forEach((el: Element) => removeSbbInert(el as HTMLElement));
       }
diff --git a/src/components/core/overlay/position.spec.ts b/src/components/core/overlay/position.spec.ts
index 5edd78a1ec..61df652673 100644
--- a/src/components/core/overlay/position.spec.ts
+++ b/src/components/core/overlay/position.spec.ts
@@ -2,7 +2,7 @@ import { expect } from '@open-wc/testing';
 import type { SinonStubbedInstance } from 'sinon';
 import { createStubInstance } from 'sinon';
 
-import { getElementPosition } from './position';
+import { getElementPosition } from './position.js';
 
 describe('getElementPosition', () => {
   let trigger: SinonStubbedInstance<HTMLElement>,
diff --git a/src/components/core/overlay/position.ts b/src/components/core/overlay/position.ts
index 352280427a..6245546364 100644
--- a/src/components/core/overlay/position.ts
+++ b/src/components/core/overlay/position.ts
@@ -3,16 +3,16 @@ export type ElementRectangle = Pick<
   'scrollHeight' | 'clientHeight' | 'offsetHeight' | 'scrollWidth' | 'clientWidth' | 'offsetWidth'
 >;
 
-export interface Alignment {
+export interface SbbAlignment {
   horizontal: 'start' | 'center' | 'end';
   vertical: 'above' | 'below';
 }
 
-export interface ElementPositionInfos {
+export interface SbbElementPositionInfos {
   top: number;
   left: number;
   maxHeight: string;
-  alignment: Alignment;
+  alignment: SbbAlignment;
 }
 
 /**
@@ -98,7 +98,7 @@ export function getElementPosition(
     centered?: boolean;
     responsiveHeight?: boolean;
   },
-): ElementPositionInfos {
+): SbbElementPositionInfos {
   const maxWidthOffset = 16;
   const verticalOffset = properties?.verticalOffset || 0;
   const horizontalOffset = properties?.horizontalOffset || 0;
@@ -120,7 +120,7 @@ export function getElementPosition(
   let elementXPosition = triggerLeft;
   let elementYPosition = triggerTop + triggerRec.height + verticalOffset;
   let elementXOverflow = elementRec.offsetWidth - triggerRec.width;
-  const alignment: Alignment = { horizontal: 'start', vertical: 'below' };
+  const alignment: SbbAlignment = { horizontal: 'start', vertical: 'below' };
 
   // Calculate element max-height
   let elementMaxHeight = `${availableSpaceBelow - verticalOffset}px`;
diff --git a/src/components/core/styles/_index.scss b/src/components/core/styles/_index.scss
index d441e58de0..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';
@@ -21,5 +21,4 @@
 @forward './mixins/typo';
 
 // Internals
-@forward './core/component-utilities';
 @forward './mixins/dev_and_debug';
diff --git a/src/components/core/styles/core/component-utilities.scss b/src/components/core/styles/core/component-utilities.scss
deleted file mode 100644
index 8e1056ff1a..0000000000
--- a/src/components/core/styles/core/component-utilities.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@use '../mixins/helpers';
-
-// *****************************************************************************
-//
-// Each component needs to use the host-component-properties mixin
-// to provide a streamlined component experience / developer experience.
-//
-// *****************************************************************************
-
-@mixin host-component-properties {
-  @include helpers.box-sizing;
-
-  :host {
-    display: block;
-    padding: 0;
-    margin: 0;
-    background: transparent;
-    border: 0;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-  }
-}
diff --git a/src/components/core/styles/core/functions.scss b/src/components/core/styles/core/functions.scss
index e96384e9bb..68ef58ea8e 100644
--- a/src/components/core/styles/core/functions.scss
+++ b/src/components/core/styles/core/functions.scss
@@ -1,8 +1,6 @@
 @use 'sass:math';
 
-/**
- * size: value in px (no unit)
- */
 @function px-to-rem-build($size) {
+  /* size: value in px (no unit) */
   @return ((math.div($size, 16)) * 1rem);
 }
diff --git a/src/components/core/styles/core/mediaqueries.scss b/src/components/core/styles/core/mediaqueries.scss
index dab1b25df5..304750deac 100644
--- a/src/components/core/styles/core/mediaqueries.scss
+++ b/src/components/core/styles/core/mediaqueries.scss
@@ -2,7 +2,7 @@
 
 @use 'sass:math';
 @use 'sass:string';
-@use '@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables.scss' as sbb-tokens;
+@use 'node_modules/@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables.scss' as sbb-tokens;
 
 $mq-breakpoints: (
   zero: sbb-tokens.$sbb-breakpoint-zero-min,
diff --git a/src/components/core/styles/core/variables.scss b/src/components/core/styles/core/variables.scss
deleted file mode 100644
index 315d1951a7..0000000000
--- a/src/components/core/styles/core/variables.scss
+++ /dev/null
@@ -1,185 +0,0 @@
-@use 'node_modules/@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables_css--placeholder.scss';
-@use './mediaqueries';
-@use './functions';
-@use '../mixins/a11y';
-
-@mixin lyne-components-css-vars {
-  // Grab css vars defined by `@sbb-esta/lyne-design-tokens` npm package
-  @extend %lyne-design-tokens-css-variables;
-
-  --sbb-font-default-color: var(--sbb-color-charcoal);
-
-  // Focus outline
-  --sbb-focus-outline-color-default: var(--sbb-color-black);
-  --sbb-focus-outline-color-dark: var(--sbb-color-white);
-  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
-  --sbb-focus-outline-width: var(--sbb-border-width-1x);
-
-  // 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);
-
-  // Title
-  --sbb-font-size-title-1: var(--sbb-typo-scale-2-5x);
-  --sbb-font-size-title-2: var(--sbb-typo-scale-2x);
-  --sbb-font-size-title-3: var(--sbb-typo-scale-1-5x);
-  --sbb-font-size-title-4: var(--sbb-typo-scale-1-25x);
-  --sbb-font-size-title-5: var(--sbb-typo-scale-1-125x);
-  --sbb-font-size-title-6: var(--sbb-typo-scale-0-875x);
-  --sbb-font-size-text-xl: var(--sbb-typo-scale-1-25x);
-  --sbb-font-size-text-l: var(--sbb-typo-scale-1-125x);
-  --sbb-font-size-text-m: var(--sbb-typo-scale-default);
-  --sbb-font-size-text-s: var(--sbb-typo-scale-0-875x);
-  --sbb-font-size-text-xs: var(--sbb-typo-scale-0-75x);
-  --sbb-font-size-text-xxs: var(--sbb-typo-scale-0-75x);
-
-  // Spacing
-  --sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-zero);
-  --sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-zero);
-  --sbb-spacing-responsive-xs: var(--sbb-spacing-responsive-xs-zero);
-  --sbb-spacing-responsive-s: var(--sbb-spacing-responsive-s-zero);
-  --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-zero);
-  --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-zero);
-  --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-zero);
-  --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-zero);
-
-  // Layout
-  --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-zero);
-  --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-zero);
-  --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-zero);
-
-  // Button
-  --sbb-size-button-m-min-height: var(--sbb-size-button-m-min-height-zero);
-  --sbb-size-button-l-min-height: var(--sbb-size-button-l-min-height-zero);
-
-  // Form
-  --sbb-size-form-element-m-min-height: var(--sbb-size-form-element-m-min-height-zero);
-  --sbb-size-form-element-l-min-height: var(--sbb-size-form-element-l-min-height-zero);
-
-  // 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-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 a11y.if-forced-colors {
-    // Focus outline
-    --sbb-focus-outline-color-default: Highlight;
-    --sbb-focus-outline-color-dark: Highlight;
-    --sbb-focus-outline-width: var(--sbb-border-width-2x);
-  }
-
-  @include mediaqueries.mq($from: micro) {
-    // Layout
-    --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-micro);
-    --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-micro);
-    --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-micro);
-  }
-
-  @include mediaqueries.mq($from: small) {
-    // Title
-    --sbb-font-size-title-1: var(--sbb-typo-scale-3x);
-
-    // Spacing
-    --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-small);
-    --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-small);
-    --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-small);
-
-    // Layout
-    --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-small);
-    --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
-    --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
-  }
-
-  @include mediaqueries.mq($from: medium) {
-    // Title
-    --sbb-font-size-title-2: var(--sbb-typo-scale-2-5x);
-    --sbb-font-size-title-3: var(--sbb-typo-scale-2x);
-    --sbb-font-size-title-4: var(--sbb-typo-scale-1-5x);
-    --sbb-font-size-title-5: var(--sbb-typo-scale-1-25x);
-    --sbb-font-size-title-6: var(--sbb-typo-scale-default);
-    --sbb-font-size-text-xl: var(--sbb-typo-scale-1-5x);
-    --sbb-font-size-text-l: var(--sbb-typo-scale-1-25x);
-    --sbb-font-size-text-m: var(--sbb-typo-scale-1-125x);
-    --sbb-font-size-text-s: var(--sbb-typo-scale-default);
-    --sbb-font-size-text-xs: var(--sbb-typo-scale-0-875x);
-
-    // Spacing
-    --sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-medium);
-    --sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-medium);
-    --sbb-spacing-responsive-xs: var(--sbb-spacing-responsive-xs-medium);
-    --sbb-spacing-responsive-s: var(--sbb-spacing-responsive-s-medium);
-    --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-medium);
-    --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-medium);
-    --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-medium);
-    --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-medium);
-
-    // Layout
-    --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-medium);
-    --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-medium);
-    --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-medium);
-
-    // Button
-    --sbb-size-button-m-min-height: var(--sbb-size-button-m-min-height-medium);
-    --sbb-size-button-l-min-height: var(--sbb-size-button-l-min-height-medium);
-
-    // Form
-    --sbb-size-form-element-m-min-height: var(--sbb-size-form-element-m-min-height-medium);
-    --sbb-size-form-element-l-min-height: var(--sbb-size-form-element-l-min-height-medium);
-
-    // Header
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
-
-    // Time Input
-    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
-  }
-
-  @include mediaqueries.mq($from: large) {
-    // Title
-    --sbb-font-size-title-1: var(--sbb-typo-scale-3-5x);
-
-    // Spacing
-    --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-large);
-    --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-large);
-    --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-large);
-
-    // Layout
-    --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-large);
-    --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-large);
-    --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-large);
-  }
-
-  @include mediaqueries.mq($from: wide) {
-    // Spacing
-    --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-wide);
-
-    // Layout
-    --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-wide);
-    --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-wide);
-    --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-wide);
-  }
-
-  @include mediaqueries.mq($from: ultra) {
-    // Title
-    --sbb-font-size-title-1: var(--sbb-typo-scale-4x);
-
-    // Spacing
-    --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-ultra);
-    --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-ultra);
-    --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-ultra);
-
-    // Layout
-    --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-ultra);
-    --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-ultra);
-    --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
-  }
-}
diff --git a/src/components/core/styles/fullfont.scss b/src/components/core/styles/fullfont.scss
new file mode 100644
index 0000000000..3fdf0695df
--- /dev/null
+++ b/src/components/core/styles/fullfont.scss
@@ -0,0 +1,3 @@
+@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 fb4d256102..38e86c2501 100644
--- a/src/components/core/styles/mixins/buttons.scss
+++ b/src/components/core/styles/mixins/buttons.scss
@@ -98,6 +98,8 @@
 @mixin icon-button-base($host-selector, $button-selector, $icon-selector) {
   #{$host-selector} {
     display: inline-block;
+    -webkit-tap-highlight-color: transparent;
+    height: fit-content;
 
     // Use !important here to not interfere with Firefox focus ring definition
     // which appears in normalize css of several frameworks.
@@ -114,6 +116,7 @@
       color: var(--sbb-button-color-default-text);
       cursor: pointer;
       user-select: none;
+      display: var(--sbb-button-display);
 
       // Renders background and border in the background absolute to enable the hover animation
       &::before {
diff --git a/src/components/core/styles/core/font-face.scss b/src/components/core/styles/mixins/font-face.scss
similarity index 51%
rename from src/components/core/styles/core/font-face.scss
rename to src/components/core/styles/mixins/font-face.scss
index 4cef35e678..aa78affe4a 100644
--- a/src/components/core/styles/core/font-face.scss
+++ b/src/components/core/styles/mixins/font-face.scss
@@ -23,3 +23,29 @@
     font-display: swap;
   }
 }
+
+@mixin font-declarations-full {
+  @font-face {
+    font-family: 'SBBWeb Roman';
+    src:
+      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Roman.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Roman.woff') format('woff');
+    font-display: fallback;
+  }
+
+  @font-face {
+    font-family: 'SBBWeb Bold';
+    src:
+      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Bold.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Bold.woff') format('woff');
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'SBBWeb Light';
+    src:
+      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Light.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Light.woff') format('woff');
+    font-display: swap;
+  }
+}
diff --git a/src/components/core/styles/typography.scss b/src/components/core/styles/typography.scss
index 9c32a0dc7a..0d4e18dbc8 100644
--- a/src/components/core/styles/typography.scss
+++ b/src/components/core/styles/typography.scss
@@ -1,7 +1,9 @@
-@use './core/font-face';
+@use './mixins/font-face';
 @use './mixins/a11y';
+@use './mixins/animation';
 @use './mixins/layout';
 @use './mixins/lists';
+@use './mixins/scrollbar';
 @use './mixins/typo';
 
 @include font-face.font-declarations;
@@ -27,12 +29,12 @@ sup {
 
 // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
 sbb-form-field {
-  input:disabled::placeholder {
+  :where(input, textarea):disabled::placeholder {
     color: var(--sbb-color-granite);
     -webkit-text-fill-color: var(--sbb-color-granite);
   }
 
-  &[floating-label] input::placeholder {
+  &[floating-label] :where(input, textarea)::placeholder {
     color: transparent;
     -webkit-text-fill-color: transparent;
 
@@ -41,6 +43,14 @@ sbb-form-field {
       -webkit-text-fill-color: Canvas;
     }
   }
+
+  textarea {
+    @include scrollbar.scrollbar;
+  }
+
+  &[negative] textarea {
+    @include scrollbar.scrollbar($negative: true);
+  }
 }
 
 // Hiding components until they are instantiated
@@ -50,6 +60,7 @@ sbb-form-field {
     sbb-menu,
     sbb-navigation,
     sbb-navigation-section,
+    sbb-overlay,
     sbb-select,
     sbb-skiplink-list,
     sbb-toast,
@@ -143,18 +154,17 @@ input[data-sbb-time-input] {
 }
 
 .sbb-disable-animation {
-  @include a11y.disable-animation;
+  @include animation.disable-animation;
 }
 
-// TODO: help me find a better name for it :|
-.sbb-disable-animation-specific {
-  @include a11y.disable-animation;
+.sbb-disable-animation-locally {
+  @include animation.disable-animation;
 
   & > * {
-    @include a11y.enable-animation;
+    @include animation.enable-animation;
   }
 }
 
 .sbb-enable-animation {
-  @include a11y.enable-animation;
+  @include animation.enable-animation;
 }
diff --git a/src/components/core/testing.ts b/src/components/core/testing.ts
new file mode 100644
index 0000000000..032a69bed9
--- /dev/null
+++ b/src/components/core/testing.ts
@@ -0,0 +1,6 @@
+export * from './testing/event-spy.js';
+export * from './testing/mocha-extensions.js';
+export * from './testing/platform.js';
+export * from './testing/scroll.js';
+export * from './testing/wait-for-condition.js';
+export * from './testing/wait-for-render.js';
diff --git a/src/components/core/testing/index.ts b/src/components/core/testing/index.ts
deleted file mode 100644
index 0e6ddb67fa..0000000000
--- a/src/components/core/testing/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './event-spy';
-export * from './mocha-extensions';
-export * from './platform';
-export * from './scroll';
-export * from './wait-for-condition';
-export * from './wait-for-render';
diff --git a/src/components/core/testing/platform.ts b/src/components/core/testing/platform.ts
index f4688c82ae..eb23176b41 100644
--- a/src/components/core/testing/platform.ts
+++ b/src/components/core/testing/platform.ts
@@ -2,37 +2,30 @@ import { isServer } from 'lit';
 
 /**
  * This is a custom implementation.
- * In the `web-test-runner.config` we add a meta tag with some useful meta-data
+ * In the `web-test-runner.config` we add data attributes to the body with additional information.
  */
-export const isTestEnvironment = (): boolean =>
-  !isServer && !!document.head.querySelector('meta[name="testEnvironment"]');
+export const isTestEnvironment = (): boolean => !isServer && 'testEnv' in globalThis;
 
 /**
  * This is a custom implementation.
  * True if the `testEnvironment` meta tag has the `debug` attribute
  */
 export const isDebugEnvironment = (): boolean =>
-  !isServer &&
-  isTestEnvironment() &&
-  !!document.head.querySelector('meta[name="testEnvironment"]')?.hasAttribute('debug');
+  !isServer && (globalThis as any).testEnv === 'debug';
 
 /**
  * This is a custom implementation.
  * Returns true, if this is run in the SSR with hydration test group.
  */
 export const isHydratedSsr = (): boolean =>
-  !isServer &&
-  document.head.querySelector('meta[name="testGroup"]')?.getAttribute('content') ===
-    'e2e-ssr-hydrated';
+  !isServer && (globalThis as any).testGroup === 'e2e-ssr-hydrated';
 
 /**
  * This is a custom implementation.
  * Returns true, if this is run in the SSR without hydration test group.
  */
 export const isNonHydratedSsr = (): boolean =>
-  !isServer &&
-  document.head.querySelector('meta[name="testGroup"]')?.getAttribute('content') ===
-    'e2e-ssr-non-hydrated';
+  !isServer && (globalThis as any).testGroup === 'e2e-ssr-non-hydrated';
 
 /**
  * This is a custom implementation.
diff --git a/src/components/core/testing/private.ts b/src/components/core/testing/private.ts
new file mode 100644
index 0000000000..57b13775f6
--- /dev/null
+++ b/src/components/core/testing/private.ts
@@ -0,0 +1,5 @@
+export * from './private/a11y-tree-snapshot.js';
+export * from './private/dispatch-events.js';
+export * from './private/event-objects.js';
+export * from './private/fixture.js';
+export * from './private/type-in-element.js';
diff --git a/src/components/core/testing/private/a11y-tree-snapshot.ts b/src/components/core/testing/private/a11y-tree-snapshot.ts
index ee6461ce0f..db975d0875 100644
--- a/src/components/core/testing/private/a11y-tree-snapshot.ts
+++ b/src/components/core/testing/private/a11y-tree-snapshot.ts
@@ -3,9 +3,9 @@ import { a11ySnapshot } from '@web/test-runner-commands';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit/static-html.js';
 
-import { isChromium, isFirefox } from '../../dom';
-import { testIf } from '../mocha-extensions';
-import { waitForLitRender } from '../wait-for-render';
+import { isChromium, isFirefox } from '../../dom.js';
+import { testIf } from '../mocha-extensions.js';
+import { waitForLitRender } from '../wait-for-render.js';
 
 /**
  * Get the a11y tree snapshot and tests its snapshot.
@@ -24,7 +24,7 @@ async function a11yTreeEqualSnapshot(): Promise<void> {
  * The function creates and tests the accessibility tree snapshot on each browser.
  * If a template is passed, it will be instantiated before the snapshot is taken.
  * Note:
- * We skip a11yTreeSnashots in debug environment because they're not consistent on Puppeteer
+ * We skip a11yTreeSnapshots in debug environment because they're not consistent on Puppeteer
  * @param title The title of the section
  * @param template The optional html template
  */
diff --git a/src/components/core/testing/private/dispatch-events.ts b/src/components/core/testing/private/dispatch-events.ts
index 5a6b5941f7..f9296ad4c5 100644
--- a/src/components/core/testing/private/dispatch-events.ts
+++ b/src/components/core/testing/private/dispatch-events.ts
@@ -14,7 +14,7 @@ import {
   createMouseEvent,
   createPointerEvent,
   createTouchEvent,
-} from './event-objects';
+} from './event-objects.js';
 
 /** Modifier keys that may be held while typing. */
 interface ModifierKeys {
diff --git a/src/components/core/testing/private/fixture.ts b/src/components/core/testing/private/fixture.ts
index 9e642df49d..7e3788ee48 100644
--- a/src/components/core/testing/private/fixture.ts
+++ b/src/components/core/testing/private/fixture.ts
@@ -1,8 +1,22 @@
-import type { FixtureOptions } from '@lit-labs/testing/lib/fixtures/fixture-options';
 import type { TemplateResult } from 'lit';
 
-import { isHydratedSsr, isNonHydratedSsr } from '../platform';
-import { waitForLitRender } from '../wait-for-render';
+import { isHydratedSsr, isNonHydratedSsr } from '../platform.js';
+import { waitForLitRender } from '../wait-for-render.js';
+
+// Copied from @lit-labs/testing/lib/fixtures/fixture-options.d.ts
+interface FixtureOptions {
+  /**
+   * Array of relative module paths to be imported before rendering. Normally
+   * would contain custom element definitions.
+   */
+  modules: string[];
+  /**
+   * Base url for resolving module paths. If not provided, will guess the
+   * location based on call stack to have the same effect as passing in
+   * `import.meta.url`.
+   */
+  base?: string;
+}
 
 /**
  * We want to dynamically use the correct fixture from Lit testing for the current context.
diff --git a/src/components/core/testing/private/index.ts b/src/components/core/testing/private/index.ts
deleted file mode 100644
index 70bd8cd70a..0000000000
--- a/src/components/core/testing/private/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './a11y-tree-snapshot';
-export * from './dispatch-events';
-export * from './event-objects';
-export * from './fixture';
-export * from './type-in-element';
diff --git a/src/components/core/testing/private/type-in-element.ts b/src/components/core/testing/private/type-in-element.ts
index a7a6e95e6b..dc7837ca62 100644
--- a/src/components/core/testing/private/type-in-element.ts
+++ b/src/components/core/testing/private/type-in-element.ts
@@ -8,7 +8,7 @@
 
 // Copied from https://github.com/angular/components/blob/main/src/cdk/testing/testbed/fake-events/type-in-element.ts
 
-import { dispatchFakeEvent, dispatchKeyboardEvent } from './dispatch-events';
+import { dispatchFakeEvent, dispatchKeyboardEvent } from './dispatch-events.js';
 
 const PERIOD = 190;
 
diff --git a/src/components/core/testing/test-setup-ssr.ts b/src/components/core/testing/test-setup-ssr.ts
index bfaf1e7456..7d08fd62df 100644
--- a/src/components/core/testing/test-setup-ssr.ts
+++ b/src/components/core/testing/test-setup-ssr.ts
@@ -1,5 +1,5 @@
-import type { SbbIconConfig } from '../config';
-import { mergeConfig } from '../config';
+import type { SbbIconConfig } from '../config.js';
+import { mergeConfig } from '../config.js';
 
 function setupIconConfig(): void {
   const testNamespaces = ['default', 'picto'];
diff --git a/src/components/core/testing/test-setup.ts b/src/components/core/testing/test-setup.ts
index 1bd43b072c..5f90f96f6d 100644
--- a/src/components/core/testing/test-setup.ts
+++ b/src/components/core/testing/test-setup.ts
@@ -1,8 +1,8 @@
-import { sbbInputModalityDetector } from '../a11y';
-import type { SbbIconConfig } from '../config';
-import { mergeConfig } from '../config';
+import { sbbInputModalityDetector } from '../a11y.js';
+import type { SbbIconConfig } from '../config.js';
+import { mergeConfig } from '../config.js';
 
-import { isHydratedSsr } from './platform';
+import { isHydratedSsr } from './platform.js';
 
 function setupIconConfig(): void {
   const testNamespaces = ['default', 'picto'];
diff --git a/src/components/core/testing/wait-for-render.ts b/src/components/core/testing/wait-for-render.ts
index 6ac494f37c..3013928cdf 100644
--- a/src/components/core/testing/wait-for-render.ts
+++ b/src/components/core/testing/wait-for-render.ts
@@ -1,6 +1,6 @@
 import type { ReactiveElement } from 'lit';
 
-import type { SbbHydrationMixinType } from '../common-behaviors';
+import type { SbbHydrationMixinType } from '../mixins.js';
 
 /**
  * Tests if an element is a Lit `ReactiveElement`.
diff --git a/src/components/core/timetable.ts b/src/components/core/timetable.ts
new file mode 100644
index 0000000000..2614632ad9
--- /dev/null
+++ b/src/components/core/timetable.ts
@@ -0,0 +1,3 @@
+export * from './timetable/access-leg-helper.js';
+export * from './timetable/timetable-helper.js';
+export * from './timetable/timetable-properties.js';
diff --git a/src/components/core/timetable/access-leg-helper.spec.ts b/src/components/core/timetable/access-leg-helper.spec.ts
index 307661c0c4..25ddf7dd83 100644
--- a/src/components/core/timetable/access-leg-helper.spec.ts
+++ b/src/components/core/timetable/access-leg-helper.spec.ts
@@ -1,9 +1,12 @@
 import { expect } from '@open-wc/testing';
 
-import { defaultTrip, extendedEnterTimeTrip } from '../../timetable-row/timetable-row.sample-data';
+import {
+  defaultTrip,
+  extendedEnterTimeTrip,
+} from '../../timetable-row/timetable-row.sample-data.js';
 
-import { getDepartureArrivalTimeAttribute } from './access-leg-helper';
-import type { Leg } from './timetable-properties';
+import { getDepartureArrivalTimeAttribute } from './access-leg-helper.js';
+import type { Leg } from './timetable-properties.js';
 
 describe('getDepartureArrivalTimeAttribute', () => {
   it('should returns correct departure time attribute', () => {
diff --git a/src/components/core/timetable/access-leg-helper.ts b/src/components/core/timetable/access-leg-helper.ts
index 118df829a0..ad287de2ab 100644
--- a/src/components/core/timetable/access-leg-helper.ts
+++ b/src/components/core/timetable/access-leg-helper.ts
@@ -3,12 +3,16 @@
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 
-import { i18nWalkingDistanceArrival, i18nWalkingDistanceDeparture } from '../i18n';
+import { i18nWalkingDistanceArrival, i18nWalkingDistanceDeparture } from '../i18n.js';
 
-import { extractTimeAndStringFromNoticeText, isConnectionLeg, isRideLeg } from './timetable-helper';
-import type { Leg, PtConnectionLeg, PtRideLeg } from './timetable-properties';
+import {
+  extractTimeAndStringFromNoticeText,
+  isConnectionLeg,
+  isRideLeg,
+} from './timetable-helper.js';
+import type { Leg, PtConnectionLeg, PtRideLeg } from './timetable-properties.js';
 
-import '../../icon';
+import '../../icon.js';
 
 interface IAccessAttribute {
   duration: number;
diff --git a/src/components/core/timetable/index.ts b/src/components/core/timetable/index.ts
deleted file mode 100644
index f98d37652c..0000000000
--- a/src/components/core/timetable/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './access-leg-helper';
-export * from './timetable-helper';
-export * from './timetable-properties';
diff --git a/src/components/core/timetable/timetable-helper.spec.ts b/src/components/core/timetable/timetable-helper.spec.ts
index 6256c099c8..8520cab4c0 100644
--- a/src/components/core/timetable/timetable-helper.spec.ts
+++ b/src/components/core/timetable/timetable-helper.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@open-wc/testing';
 
-import { extractTimeAndStringFromNoticeText } from './timetable-helper';
-import type { Notice } from './timetable-properties';
+import { extractTimeAndStringFromNoticeText } from './timetable-helper.js';
+import type { Notice } from './timetable-properties.js';
 
 describe('timetable-helper', () => {
   it('should return duration and text from notice', () => {
diff --git a/src/components/core/timetable/timetable-helper.ts b/src/components/core/timetable/timetable-helper.ts
index ae1aaa6012..a544726ab0 100644
--- a/src/components/core/timetable/timetable-helper.ts
+++ b/src/components/core/timetable/timetable-helper.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 
-import type { Leg, Notice } from './timetable-properties';
+import type { Leg, Notice } from './timetable-properties.js';
 
 export const isRideLeg = (leg: any): leg is Extract<Leg, { __typename: 'PTRideLeg' }> => {
   return leg?.__typename === 'PTRideLeg';
diff --git a/src/components/datepicker.ts b/src/components/datepicker.ts
new file mode 100644
index 0000000000..aba65db9f9
--- /dev/null
+++ b/src/components/datepicker.ts
@@ -0,0 +1,5 @@
+export * from './datepicker/datepicker.js';
+export * from './datepicker/datepicker-next-day.js';
+export * from './datepicker/datepicker-previous-day.js';
+export * from './datepicker/datepicker-toggle.js';
+export * from './datepicker/common.js';
diff --git a/src/components/datepicker/common.ts b/src/components/datepicker/common.ts
new file mode 100644
index 0000000000..d754b6cef7
--- /dev/null
+++ b/src/components/datepicker/common.ts
@@ -0,0 +1 @@
+export * from './common/datepicker-button.js';
diff --git a/src/components/datepicker/common/datepicker-button.ts b/src/components/datepicker/common/datepicker-button.ts
new file mode 100644
index 0000000000..2d8cf6ae96
--- /dev/null
+++ b/src/components/datepicker/common/datepicker-button.ts
@@ -0,0 +1,202 @@
+import { html, type PropertyValues, type TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js';
+import { type DateAdapter, defaultDateAdapter } from '../../core/datetime.js';
+import { i18nToday } from '../../core/i18n.js';
+import { SbbNegativeMixin } from '../../core/mixins.js';
+import {
+  datepickerControlRegisteredEventFactory,
+  getDatePicker,
+  type SbbDatepickerElement,
+  type SbbInputUpdateEvent,
+} from '../datepicker.js';
+import '../../icon.js';
+
+export abstract class SbbDatepickerButton extends SbbNegativeMixin(SbbButtonBaseElement) {
+  /** Datepicker reference. */
+  @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepickerElement;
+
+  /** The boundary date (min/max) as set in the date-picker's input. */
+  @state() protected boundary: string | number | null = null;
+
+  /** Whether the component is disabled due date equals to boundary date. */
+  private _disabled = false;
+
+  /** Whether the component is disabled due date-picker's input disabled. */
+  private _inputDisabled = false;
+
+  protected datePickerElement?: SbbDatepickerElement | null = null;
+  private _dateAdapter: DateAdapter<Date> = defaultDateAdapter;
+  private _datePickerController!: AbortController;
+  private _abort = new SbbConnectedAbortController(this);
+  private _language = new SbbLanguageController(this).withHandler(() => this._setAriaLabel());
+
+  protected abstract iconName: string;
+  protected abstract i18nOffBoundaryDay: Record<string, string>;
+  protected abstract i18nSelectOffBoundaryDay: (_currentDate: string) => Record<string, string>;
+  protected abstract findAvailableDate: (
+    _date: Date,
+    _dateFilter: ((date: Date) => boolean) | null,
+    _dateAdapter: DateAdapter<Date>,
+    _boundary: string | number | null,
+  ) => Date;
+  protected abstract onInputUpdated(event: CustomEvent<SbbInputUpdateEvent>): void;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener('click', () => this._handleClick(), { signal: this._abort.signal });
+    this._syncUpstreamProperties();
+    if (!this.datePicker) {
+      this._init();
+    }
+  }
+
+  public override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('datePicker')) {
+      this._init(this.datePicker);
+    }
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._datePickerController?.abort();
+  }
+
+  protected setDisabledState(datepicker: SbbDatepickerElement | null | undefined): void {
+    const pickerValueAsDate = datepicker?.getValueAsDate?.();
+
+    if (!pickerValueAsDate) {
+      this._disabled = true;
+      this._setDisabledRenderAttributes(true);
+      return;
+    }
+
+    const availableDate: Date = this.findAvailableDate(
+      pickerValueAsDate,
+      datepicker?.dateFilter || null,
+      this._dateAdapter,
+      this.boundary,
+    );
+    this._disabled = this._dateAdapter.compareDate(availableDate, pickerValueAsDate) === 0;
+    this._setDisabledRenderAttributes();
+  }
+
+  private _handleClick(): void {
+    if (!this.datePickerElement || this.hasAttribute('data-disabled')) {
+      return;
+    }
+    const startingDate: Date =
+      this.datePickerElement.getValueAsDate() ?? this.datePickerElement.now();
+    const date: Date = this.findAvailableDate(
+      startingDate,
+      this.datePickerElement.dateFilter,
+      this._dateAdapter,
+      this.boundary,
+    );
+    if (this._dateAdapter.compareDate(date, startingDate) !== 0) {
+      this.datePickerElement.setValueAsDate(date);
+    }
+  }
+
+  private _syncUpstreamProperties(): void {
+    const formField = this.closest?.('sbb-form-field') ?? this.closest?.('[data-form-field]');
+    if (formField) {
+      this.negative = formField.hasAttribute('negative');
+
+      // We can't use getInputElement of SbbFormFieldElement as async awaiting is not supported in connectedCallback.
+      // We here only have to look for input.
+      const inputElement = formField.querySelector('input');
+
+      if (inputElement) {
+        this._inputDisabled =
+          inputElement.hasAttribute('disabled') || inputElement.hasAttribute('readonly');
+        this._setDisabledRenderAttributes();
+      }
+    }
+  }
+
+  private _init(picker?: string | SbbDatepickerElement): void {
+    this._datePickerController?.abort();
+    this._datePickerController = new AbortController();
+    this.datePickerElement = getDatePicker(this, picker);
+    this.setDisabledState(this.datePickerElement);
+    if (!this.datePickerElement) {
+      // If the component is attached to the DOM before the datepicker, it has to listen for the datepicker init,
+      // assuming that the two components share the same parent element.
+      this.parentElement?.addEventListener(
+        'inputUpdated',
+        (e: CustomEvent<SbbInputUpdateEvent>) => this._init(e.target as SbbDatepickerElement),
+        { once: true, signal: this._datePickerController.signal },
+      );
+      return;
+    }
+    this._setAriaLabel();
+
+    this.datePickerElement.addEventListener(
+      'change',
+      (event: Event) => {
+        this.setDisabledState(event.target as SbbDatepickerElement);
+        this._setAriaLabel();
+      },
+      { signal: this._datePickerController.signal },
+    );
+    this.datePickerElement.addEventListener(
+      'datePickerUpdated',
+      (event: Event) => {
+        this.setDisabledState(event.target as SbbDatepickerElement);
+        this._setAriaLabel();
+      },
+      { signal: this._datePickerController.signal },
+    );
+    this.datePickerElement.addEventListener(
+      'inputUpdated',
+      (event: CustomEvent<SbbInputUpdateEvent>) => {
+        this._inputDisabled = !!(event.detail.disabled || event.detail.readonly);
+        this._setDisabledRenderAttributes();
+        this._setAriaLabel();
+        this.onInputUpdated(event);
+      },
+      { signal: this._datePickerController.signal },
+    );
+
+    this.datePickerElement.dispatchEvent(datepickerControlRegisteredEventFactory());
+  }
+
+  private _setAriaLabel(): void {
+    const currentDate = this.datePickerElement?.getValueAsDate?.();
+
+    if (!currentDate || !this._dateAdapter.isValid(currentDate)) {
+      this.setAttribute('aria-label', this.i18nOffBoundaryDay[this._language.current]);
+      return;
+    }
+
+    const currentDateString =
+      this.datePickerElement?.now().toDateString() === currentDate.toDateString()
+        ? i18nToday[this._language.current].toLowerCase()
+        : this._dateAdapter.getAccessibilityFormatDate(currentDate);
+
+    this.setAttribute(
+      'aria-label',
+      this.i18nSelectOffBoundaryDay(currentDateString)[this._language.current],
+    );
+  }
+
+  private _setDisabledRenderAttributes(
+    isDisabled: boolean = this._disabled || this._inputDisabled,
+  ): void {
+    this.toggleAttribute('data-disabled', isDisabled);
+    if (isDisabled) {
+      this.setAttribute('aria-disabled', 'true');
+      this.removeAttribute('tabindex');
+    } else {
+      this.removeAttribute('aria-disabled');
+      this.setAttribute('tabindex', '0');
+    }
+  }
+
+  protected override renderTemplate(): TemplateResult {
+    return html` <sbb-icon name=${this.iconName}></sbb-icon> `;
+  }
+}
diff --git a/src/components/datepicker/datepicker-next-day.ts b/src/components/datepicker/datepicker-next-day.ts
new file mode 100644
index 0000000000..502e3e91fc
--- /dev/null
+++ b/src/components/datepicker/datepicker-next-day.ts
@@ -0,0 +1 @@
+export * from './datepicker-next-day/datepicker-next-day.js';
diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts
index 4058485c1b..5d309e7b40 100644
--- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts
+++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts
@@ -1,15 +1,15 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbFormFieldElement } from '../../form-field';
-import type { SbbDatepickerElement } from '../datepicker';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
+import type { SbbDatepickerElement } from '../datepicker.js';
 
-import { SbbDatepickerNextDayElement } from './datepicker-next-day';
+import { SbbDatepickerNextDayElement } from './datepicker-next-day.js';
 
-import '../datepicker';
-import '../../form-field/form-field';
+import '../datepicker.js';
+import '../../form-field/form-field.js';
 
 describe(`sbb-datepicker-next-day with ${fixture.name}`, () => {
   describe('standalone', () => {
@@ -32,7 +32,7 @@ describe(`sbb-datepicker-next-day with ${fixture.name}`, () => {
             <sbb-datepicker-next-day date-picker="datepicker"></sbb-datepicker-next-day>
           </div>
         `,
-        { modules: ['../datepicker/index.ts', './datepicker-next-day.ts'] },
+        { modules: ['../datepicker.ts', './datepicker-next-day.ts'] },
       );
 
       const element: SbbDatepickerNextDayElement =
@@ -72,7 +72,7 @@ describe(`sbb-datepicker-next-day with ${fixture.name}`, () => {
       // there's no datepicker, so no event and the button is disabled due _datePickerElement not set
       expect(nextButton).not.to.be.null;
       expect(inputUpdated.count).to.be.equal(0);
-      expect(nextButton.dataset.disabled).to.be.equal('');
+      expect(nextButton).to.have.attribute('data-disabled');
 
       const picker: SbbDatepickerElement = document.createElement('sbb-datepicker');
       picker.setAttribute('input', 'datepicker-input');
@@ -83,7 +83,7 @@ describe(`sbb-datepicker-next-day with ${fixture.name}`, () => {
 
       // the datepicker is connected, which triggers a 1st inputUpdated event which calls _init and a 2nd one which sets max/min/disabled
       expect(inputUpdated.count).to.be.equal(2);
-      expect(nextButton.dataset.disabled).to.be.undefined;
+      expect(nextButton).not.to.have.attribute('data-disabled');
     });
 
     it('datepicker is created after the component with different parent', async () => {
@@ -106,7 +106,7 @@ describe(`sbb-datepicker-next-day with ${fixture.name}`, () => {
       // there's no datepicker, so no event and the button is disabled due _datePickerElement not set
       expect(nextButton).not.to.be.null;
       expect(inputUpdated.count).to.be.equal(0);
-      expect(nextButton.dataset.disabled).to.be.equal('');
+      expect(nextButton).to.have.attribute('data-disabled');
 
       const picker: SbbDatepickerElement = document.createElement('sbb-datepicker');
       picker.setAttribute('input', 'datepicker-input');
@@ -117,7 +117,7 @@ describe(`sbb-datepicker-next-day with ${fixture.name}`, () => {
 
       // the datepicker is connected on a different parent, so no changes are triggered
       expect(inputUpdated.count).to.be.equal(0);
-      expect(nextButton.dataset.disabled).to.be.equal('');
+      expect(nextButton).to.have.attribute('data-disabled');
     });
   });
 
@@ -134,11 +134,7 @@ describe(`sbb-datepicker-next-day with ${fixture.name}`, () => {
           </sbb-form-field>
         `,
         {
-          modules: [
-            '../../form-field/index.ts',
-            '../datepicker/index.ts',
-            './datepicker-next-day.ts',
-          ],
+          modules: ['../../form-field.ts', '../datepicker.ts', './datepicker-next-day.ts'],
         },
       );
       element = form.querySelector<SbbDatepickerNextDayElement>('sbb-datepicker-next-day')!;
@@ -171,11 +167,7 @@ describe(`sbb-datepicker-next-day with ${fixture.name}`, () => {
           </sbb-form-field>
         `,
         {
-          modules: [
-            '../../form-field/index.ts',
-            './datepicker-next-day.ts',
-            '../datepicker/index.ts',
-          ],
+          modules: ['../../form-field.ts', './datepicker-next-day.ts', '../datepicker.ts'],
         },
       );
       input = form.querySelector<HTMLInputElement>('input')!;
@@ -189,7 +181,7 @@ describe(`sbb-datepicker-next-day with ${fixture.name}`, () => {
 
     it('disabled due disabled picker', async () => {
       expect(input.value).to.be.equal('Sa, 21.01.2023');
-      input.setAttribute('disabled', '');
+      input.toggleAttribute('disabled', true);
 
       await waitForLitRender(element);
 
diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.scss b/src/components/datepicker/datepicker-next-day/datepicker-next-day.scss
index 4b750898fb..6d4d5a654a 100644
--- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.scss
+++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   display: flex;
diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts
index 6921f81078..6d26f4be71 100644
--- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts
+++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts
@@ -1,14 +1,14 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import type { SbbFormFieldElement } from '../../form-field';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
 
-import type { SbbDatepickerNextDayElement } from './datepicker-next-day';
+import type { SbbDatepickerNextDayElement } from './datepicker-next-day.js';
 
-import './datepicker-next-day';
-import '../datepicker';
-import '../../form-field';
+import './datepicker-next-day.js';
+import '../datepicker.js';
+import '../../form-field.js';
 
 describe(`sbb-datepicker-next-day`, () => {
   it('renders', async () => {
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 7db72a34a7..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
@@ -12,16 +12,12 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './datepicker-next-day';
-import '../../form-field';
-import '../datepicker';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import './datepicker-next-day.js';
+import '../../form-field.js';
+import '../datepicker.js';
 
 const negative: InputType = {
   control: {
@@ -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-next-day/datepicker-next-day.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts
index 55d00500cf..6626e4a4c3 100644
--- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts
+++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts
@@ -1,25 +1,12 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import type { CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
 
-import {
-  hostAttributes,
-  LanguageController,
-  SbbNegativeMixin,
-  SbbButtonBaseElement,
-} from '../../core/common-behaviors';
-import { defaultDateAdapter, type DateAdapter } from '../../core/datetime';
-import { isValidAttribute } from '../../core/dom';
-import { ConnectedAbortController } from '../../core/eventing';
-import { i18nNextDay, i18nSelectNextDay, i18nToday } from '../../core/i18n';
-import {
-  datepickerControlRegisteredEventFactory,
-  findNextAvailableDate,
-  getDatePicker,
-} from '../datepicker';
-import type { SbbDatepickerElement, InputUpdateEvent } from '../datepicker';
-import '../../icon';
+import { hostAttributes } from '../../core/decorators.js';
+import { i18nNextDay, i18nSelectNextDay } from '../../core/i18n.js';
+import { SbbDatepickerButton } from '../common.js';
+import { findNextAvailableDate, type SbbInputUpdateEvent } from '../datepicker.js';
 
+import '../../icon.js';
 import style from './datepicker-next-day.scss?lit&inline';
 
 /**
@@ -29,179 +16,19 @@ import style from './datepicker-next-day.scss?lit&inline';
 @hostAttributes({
   slot: 'suffix',
 })
-export class SbbDatepickerNextDayElement extends SbbNegativeMixin(SbbButtonBaseElement) {
+export class SbbDatepickerNextDayElement extends SbbDatepickerButton {
   public static override styles: CSSResultGroup = style;
 
-  /** Datepicker reference. */
-  @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepickerElement;
+  protected iconName: string = 'chevron-small-right-small';
+  protected i18nOffBoundaryDay: Record<string, string> = i18nNextDay;
+  protected i18nSelectOffBoundaryDay = i18nSelectNextDay;
+  protected findAvailableDate = findNextAvailableDate;
 
-  /** Whether the component is disabled due date equals to max date. */
-  @state() private _disabled = false;
-
-  /** Whether the component is disabled due date-picker's input disabled. */
-  @state() private _inputDisabled = false;
-
-  /** The maximum date as set in the date-picker's input. */
-  @state() private _max: string | number | null = null;
-
-  private _datePickerElement?: SbbDatepickerElement | null = null;
-
-  private _dateAdapter: DateAdapter<Date> = defaultDateAdapter;
-
-  private _datePickerController!: AbortController;
-
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this).withHandler(() => this._setAriaLabel());
-
-  private _handleClick(): void {
-    if (!this._datePickerElement || isValidAttribute(this, 'data-disabled')) {
-      return;
-    }
-    const startingDate: Date =
-      this._datePickerElement.getValueAsDate() ?? this._datePickerElement.now();
-    const date: Date = findNextAvailableDate(
-      startingDate,
-      this._datePickerElement.dateFilter,
-      this._dateAdapter,
-      this._max,
-    );
-    if (this._dateAdapter.compareDate(date, startingDate) !== 0) {
-      this._datePickerElement.setValueAsDate(date);
-    }
-  }
-
-  public override connectedCallback(): void {
-    super.connectedCallback();
-    this.addEventListener('click', () => this._handleClick(), { signal: this._abort.signal });
-    this._syncUpstreamProperties();
-    if (!this.datePicker) {
-      this._init();
-    }
-  }
-
-  public override willUpdate(changedProperties: PropertyValues<this>): void {
-    if (changedProperties.has('datePicker')) {
-      this._init(this.datePicker);
-    }
-  }
-
-  private _syncUpstreamProperties(): void {
-    const formField = this.closest?.('sbb-form-field') ?? this.closest?.('[data-form-field]');
-    if (formField) {
-      this.negative = isValidAttribute(formField, 'negative');
-
-      // We can't use getInputElement of SbbFormFieldElement as async awaiting is not supported in connectedCallback.
-      // We here only have to look for input.
-      const inputElement = formField.querySelector('input');
-
-      if (inputElement) {
-        this._inputDisabled =
-          isValidAttribute(inputElement, 'disabled') || isValidAttribute(inputElement, 'readonly');
-      }
-    }
-  }
-
-  public override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._datePickerController?.abort();
-  }
-
-  private _init(picker?: string | SbbDatepickerElement): void {
-    this._datePickerController?.abort();
-    this._datePickerController = new AbortController();
-    this._datePickerElement = getDatePicker(this, picker);
-    this._setDisabledState(this._datePickerElement);
-    if (!this._datePickerElement) {
-      // If the component is attached to the DOM before the datepicker, it has to listen for the datepicker init,
-      // assuming that the two components share the same parent element.
-      this.parentElement?.addEventListener(
-        'inputUpdated',
-        (e: CustomEvent<InputUpdateEvent>) => this._init(e.target as SbbDatepickerElement),
-        { once: true, signal: this._datePickerController.signal },
-      );
-      return;
+  protected onInputUpdated(event: CustomEvent<SbbInputUpdateEvent>): void {
+    if (this.boundary !== event.detail.max) {
+      this.boundary = event.detail.max!;
+      this.setDisabledState(this.datePickerElement!);
     }
-    this._setAriaLabel();
-
-    this._datePickerElement.addEventListener(
-      'change',
-      (event: Event) => {
-        this._setDisabledState(event.target as SbbDatepickerElement);
-        this._setAriaLabel();
-      },
-      { signal: this._datePickerController.signal },
-    );
-    this._datePickerElement.addEventListener(
-      'datePickerUpdated',
-      (event: Event) => {
-        this._setDisabledState(event.target as SbbDatepickerElement);
-        this._setAriaLabel();
-      },
-      { signal: this._datePickerController.signal },
-    );
-    this._datePickerElement.addEventListener(
-      'inputUpdated',
-      (event: CustomEvent<InputUpdateEvent>) => {
-        this._inputDisabled = !!(event.detail.disabled || event.detail.readonly);
-        if (this._max !== event.detail.max) {
-          this._max = event.detail.max!;
-          this._setDisabledState(this._datePickerElement!);
-        }
-        this._setAriaLabel();
-      },
-      { signal: this._datePickerController.signal },
-    );
-
-    this._datePickerElement.dispatchEvent(datepickerControlRegisteredEventFactory());
-  }
-
-  private _setDisabledState(datepicker: SbbDatepickerElement | null | undefined): void {
-    const pickerValueAsDate = datepicker?.getValueAsDate?.();
-
-    if (!pickerValueAsDate) {
-      this._disabled = true;
-      return;
-    }
-
-    const nextDate: Date = findNextAvailableDate(
-      pickerValueAsDate,
-      datepicker?.dateFilter || null,
-      this._dateAdapter,
-      this._max,
-    );
-    this._disabled = this._dateAdapter.compareDate(nextDate, pickerValueAsDate) === 0;
-  }
-
-  private _setAriaLabel(): void {
-    const currentDate = this._datePickerElement?.getValueAsDate?.();
-
-    if (!currentDate || !this._dateAdapter.isValid(currentDate)) {
-      this.setAttribute('aria-label', i18nNextDay[this._language.current]);
-      return;
-    }
-
-    const currentDateString =
-      this._datePickerElement?.now().toDateString() === currentDate.toDateString()
-        ? i18nToday[this._language.current].toLowerCase()
-        : this._dateAdapter.getAccessibilityFormatDate(currentDate);
-
-    this.setAttribute('aria-label', i18nSelectNextDay(currentDateString)[this._language.current]);
-  }
-
-  private _setDisabledRenderAttributes(): void {
-    this.toggleAttribute('data-disabled', this._disabled || this._inputDisabled);
-    if (isValidAttribute(this, 'data-disabled')) {
-      this.setAttribute('aria-disabled', 'true');
-      this.removeAttribute('tabindex');
-    } else {
-      this.removeAttribute('aria-disabled');
-      this.setAttribute('tabindex', '0');
-    }
-  }
-
-  protected override renderTemplate(): TemplateResult {
-    this._setDisabledRenderAttributes();
-    return html` <sbb-icon name="chevron-small-right-small"></sbb-icon> `;
   }
 }
 
diff --git a/src/components/datepicker/datepicker-next-day/index.ts b/src/components/datepicker/datepicker-next-day/index.ts
deleted file mode 100644
index 8401241afe..0000000000
--- a/src/components/datepicker/datepicker-next-day/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './datepicker-next-day';
diff --git a/src/components/datepicker/datepicker-next-day/readme.md b/src/components/datepicker/datepicker-next-day/readme.md
index 15b416e17a..9e13d556a5 100644
--- a/src/components/datepicker/datepicker-next-day/readme.md
+++ b/src/components/datepicker/datepicker-next-day/readme.md
@@ -37,8 +37,8 @@ both standalone or within the `sbb-form-field`, they must have the same parent e
 
 | Name         | Attribute     | Privacy | Type                                          | Default    | Description                                      |
 | ------------ | ------------- | ------- | --------------------------------------------- | ---------- | ------------------------------------------------ |
-| `datePicker` | `date-picker` | public  | `string \| SbbDatepickerElement \| undefined` |            | Datepicker reference.                            |
 | `negative`   | `negative`    | public  | `boolean`                                     | `false`    | Negative coloring variant flag.                  |
+| `datePicker` | `date-picker` | public  | `string \| SbbDatepickerElement \| undefined` |            | Datepicker reference.                            |
 | `type`       | `type`        | public  | `SbbButtonType`                               | `'button'` | The type attribute to use for the button.        |
 | `name`       | `name`        | public  | `string`                                      |            | The name of the button element.                  |
 | `value`      | `value`       | public  | `string`                                      |            | The value of the button element.                 |
diff --git a/src/components/datepicker/datepicker-previous-day.ts b/src/components/datepicker/datepicker-previous-day.ts
new file mode 100644
index 0000000000..88d51fcf63
--- /dev/null
+++ b/src/components/datepicker/datepicker-previous-day.ts
@@ -0,0 +1 @@
+export * from './datepicker-previous-day/datepicker-previous-day.js';
diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts
index 03ef3079ae..ebd6526ad2 100644
--- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts
+++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts
@@ -1,15 +1,15 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbFormFieldElement } from '../../form-field';
-import type { SbbDatepickerElement } from '../datepicker';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
+import type { SbbDatepickerElement } from '../datepicker.js';
 
-import { SbbDatepickerPreviousDayElement } from './datepicker-previous-day';
+import { SbbDatepickerPreviousDayElement } from './datepicker-previous-day.js';
 
-import '../datepicker';
-import '../../form-field/form-field';
+import '../datepicker.js';
+import '../../form-field/form-field.js';
 
 describe(`sbb-datepicker-previous-day with ${fixture.name}`, () => {
   describe('standalone', () => {
@@ -32,7 +32,7 @@ describe(`sbb-datepicker-previous-day with ${fixture.name}`, () => {
             <sbb-datepicker id="datepicker" input="datepicker-input"></sbb-datepicker>
           </div>
         `,
-        { modules: ['./datepicker-previous-day.ts', '../datepicker/index.ts'] },
+        { modules: ['./datepicker-previous-day.ts', '../datepicker.ts'] },
       );
       const element: SbbDatepickerPreviousDayElement = root.querySelector(
         'sbb-datepicker-previous-day',
@@ -68,7 +68,7 @@ describe(`sbb-datepicker-previous-day with ${fixture.name}`, () => {
       // there's no datepicker, so no event and the button is disabled due _datePickerElement not set
       expect(prevButton).not.to.be.null;
       expect(inputUpdated.count).to.be.equal(0);
-      expect(prevButton.dataset.disabled).to.be.equal('');
+      expect(prevButton).to.have.attribute('data-disabled');
 
       const picker: SbbDatepickerElement = document.createElement('sbb-datepicker');
       picker.setAttribute('input', 'datepicker-input');
@@ -79,7 +79,7 @@ describe(`sbb-datepicker-previous-day with ${fixture.name}`, () => {
 
       // the datepicker is connected, which triggers a 1st inputUpdated event which calls _init and a 2nd one which sets max/min/disabled
       expect(inputUpdated.count).to.be.equal(2);
-      expect(prevButton.dataset.disabled).to.be.undefined;
+      expect(prevButton).not.to.have.attribute('data-disabled');
     });
 
     it('datepicker is created after the component with different parent', async () => {
@@ -105,7 +105,7 @@ describe(`sbb-datepicker-previous-day with ${fixture.name}`, () => {
       // there's no datepicker, so no event and the button is disabled due _datePickerElement not set
       expect(prevButton).not.to.be.null;
       expect(inputUpdated.count).to.be.equal(0);
-      expect(prevButton.dataset.disabled).to.be.equal('');
+      expect(prevButton).to.have.attribute('data-disabled');
 
       const picker: SbbDatepickerElement = document.createElement('sbb-datepicker');
       picker.setAttribute('input', 'datepicker-input');
@@ -116,7 +116,7 @@ describe(`sbb-datepicker-previous-day with ${fixture.name}`, () => {
 
       // the datepicker is connected on a different parent, so no changes are triggered
       expect(inputUpdated.count).to.be.equal(0);
-      expect(prevButton.dataset.disabled).to.be.equal('');
+      expect(prevButton).to.have.attribute('data-disabled');
     });
   });
 
@@ -133,11 +133,7 @@ describe(`sbb-datepicker-previous-day with ${fixture.name}`, () => {
           </sbb-form-field>
         `,
         {
-          modules: [
-            '../../form-field/index.ts',
-            './datepicker-previous-day.ts',
-            '../datepicker/index.ts',
-          ],
+          modules: ['../../form-field.ts', './datepicker-previous-day.ts', '../datepicker.ts'],
         },
       );
       element = form.querySelector<SbbDatepickerPreviousDayElement>('sbb-datepicker-previous-day')!;
@@ -169,11 +165,7 @@ describe(`sbb-datepicker-previous-day with ${fixture.name}`, () => {
           </sbb-form-field>
         `,
         {
-          modules: [
-            '../../form-field/index.ts',
-            './datepicker-previous-day.ts',
-            '../datepicker/index.ts',
-          ],
+          modules: ['../../form-field.ts', './datepicker-previous-day.ts', '../datepicker.ts'],
         },
       );
       input = form.querySelector<HTMLInputElement>('input')!;
@@ -188,7 +180,7 @@ describe(`sbb-datepicker-previous-day with ${fixture.name}`, () => {
 
     it('disabled due disabled picker', async () => {
       expect(input.value).to.be.equal('Fr, 20.01.2023');
-      input.setAttribute('disabled', '');
+      input.toggleAttribute('disabled', true);
       await waitForLitRender(element);
 
       expect(element).to.have.attribute('data-disabled');
diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.scss b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.scss
index 02101f88bd..c3c9f7ccb6 100644
--- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.scss
+++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   display: flex;
diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts
index 7891993044..20626871cf 100644
--- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts
+++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts
@@ -1,14 +1,14 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import type { SbbFormFieldElement } from '../../form-field';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
 
-import type { SbbDatepickerPreviousDayElement } from './datepicker-previous-day';
+import type { SbbDatepickerPreviousDayElement } from './datepicker-previous-day.js';
 
-import './datepicker-previous-day';
-import '../datepicker';
-import '../../form-field';
+import './datepicker-previous-day.js';
+import '../datepicker.js';
+import '../../form-field.js';
 
 describe(`sbb-datepicker-previous-day`, () => {
   it('renders', async () => {
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 45d6c7e464..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
@@ -12,16 +12,12 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './datepicker-previous-day';
-import '../../form-field';
-import '../datepicker';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import './datepicker-previous-day.js';
+import '../../form-field.js';
+import '../datepicker.js';
 
 const negative: InputType = {
   control: {
@@ -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-previous-day/datepicker-previous-day.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts
index 855f790025..fc0fe7e819 100644
--- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts
+++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts
@@ -1,24 +1,11 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import type { CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
 
-import {
-  hostAttributes,
-  LanguageController,
-  SbbNegativeMixin,
-  SbbButtonBaseElement,
-} from '../../core/common-behaviors';
-import { defaultDateAdapter, type DateAdapter } from '../../core/datetime';
-import { isValidAttribute } from '../../core/dom';
-import { ConnectedAbortController } from '../../core/eventing';
-import { i18nPreviousDay, i18nSelectPreviousDay, i18nToday } from '../../core/i18n';
-import {
-  datepickerControlRegisteredEventFactory,
-  findPreviousAvailableDate,
-  getDatePicker,
-} from '../datepicker';
-import type { SbbDatepickerElement, InputUpdateEvent } from '../datepicker';
-import '../../icon';
+import { hostAttributes } from '../../core/decorators.js';
+import { i18nPreviousDay, i18nSelectPreviousDay } from '../../core/i18n.js';
+import { SbbDatepickerButton } from '../common.js';
+import { findPreviousAvailableDate, type SbbInputUpdateEvent } from '../datepicker.js';
+import '../../icon.js';
 
 import style from './datepicker-previous-day.scss?lit&inline';
 
@@ -29,182 +16,19 @@ import style from './datepicker-previous-day.scss?lit&inline';
 @hostAttributes({
   slot: 'prefix',
 })
-export class SbbDatepickerPreviousDayElement extends SbbNegativeMixin(SbbButtonBaseElement) {
+export class SbbDatepickerPreviousDayElement extends SbbDatepickerButton {
   public static override styles: CSSResultGroup = style;
 
-  /** Datepicker reference. */
-  @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepickerElement;
+  protected iconName: string = 'chevron-small-left-small';
+  protected i18nOffBoundaryDay: Record<string, string> = i18nPreviousDay;
+  protected i18nSelectOffBoundaryDay = i18nSelectPreviousDay;
+  protected findAvailableDate = findPreviousAvailableDate;
 
-  /** Whether the component is disabled due date equals to min date. */
-  @state() private _disabled = false;
-
-  /** Whether the component is disabled due date-picker's input disabled. */
-  @state() private _inputDisabled = false;
-
-  /** The minimum date as set in the date-picker's input. */
-  @state() private _min: string | number | null = null;
-
-  private _datePickerElement?: SbbDatepickerElement | null = null;
-
-  private _dateAdapter: DateAdapter<Date> = defaultDateAdapter;
-
-  private _datePickerController!: AbortController;
-
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this).withHandler(() => this._setAriaLabel());
-
-  private _handleClick(): void {
-    if (!this._datePickerElement || isValidAttribute(this, 'data-disabled')) {
-      return;
-    }
-    const startingDate: Date =
-      this._datePickerElement.getValueAsDate() ?? this._datePickerElement.now();
-    const date: Date = findPreviousAvailableDate(
-      startingDate,
-      this._datePickerElement.dateFilter,
-      this._dateAdapter,
-      this._min,
-    );
-    if (this._dateAdapter.compareDate(date, startingDate) !== 0) {
-      this._datePickerElement.setValueAsDate(date);
-    }
-  }
-
-  public override connectedCallback(): void {
-    super.connectedCallback();
-    this.addEventListener('click', () => this._handleClick(), { signal: this._abort.signal });
-    this._syncUpstreamProperties();
-    if (!this.datePicker) {
-      this._init();
-    }
-  }
-
-  public override willUpdate(changedProperties: PropertyValues<this>): void {
-    if (changedProperties.has('datePicker')) {
-      this._init(this.datePicker);
-    }
-  }
-
-  private _syncUpstreamProperties(): void {
-    const formField = this.closest?.('sbb-form-field') ?? this.closest?.('[data-form-field]');
-    if (formField) {
-      this.negative = isValidAttribute(formField, 'negative');
-
-      // We can't use getInputElement of SbbFormFieldElement as async awaiting is not supported in connectedCallback.
-      // We here only have to look for input.
-      const inputElement = formField.querySelector('input');
-
-      if (inputElement) {
-        this._inputDisabled =
-          isValidAttribute(inputElement, 'disabled') || isValidAttribute(inputElement, 'readonly');
-      }
-    }
-  }
-
-  public override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._datePickerController?.abort();
-  }
-
-  private _init(picker?: string | SbbDatepickerElement): void {
-    this._datePickerController?.abort();
-    this._datePickerController = new AbortController();
-    this._datePickerElement = getDatePicker(this, picker);
-    this._setDisabledState(this._datePickerElement);
-    if (!this._datePickerElement) {
-      // If the component is attached to the DOM before the datepicker, it has to listen for the datepicker init,
-      // assuming that the two components share the same parent element.
-      this.parentElement?.addEventListener(
-        'inputUpdated',
-        (e: CustomEvent<InputUpdateEvent>) => this._init(e.target as SbbDatepickerElement),
-        { once: true, signal: this._datePickerController.signal },
-      );
-      return;
+  protected onInputUpdated(event: CustomEvent<SbbInputUpdateEvent>): void {
+    if (this.boundary !== event.detail.min) {
+      this.boundary = event.detail.min!;
+      this.setDisabledState(this.datePickerElement!);
     }
-    this._setAriaLabel();
-
-    this._datePickerElement.addEventListener(
-      'change',
-      (event: Event) => {
-        this._setDisabledState(event.target as SbbDatepickerElement);
-        this._setAriaLabel();
-      },
-      { signal: this._datePickerController.signal },
-    );
-    this._datePickerElement.addEventListener(
-      'datePickerUpdated',
-      (event: Event) => {
-        this._setDisabledState(event.target as SbbDatepickerElement);
-        this._setAriaLabel();
-      },
-      { signal: this._datePickerController.signal },
-    );
-    this._datePickerElement.addEventListener(
-      'inputUpdated',
-      (event: CustomEvent<InputUpdateEvent>) => {
-        this._inputDisabled = !!(event.detail.disabled || event.detail.readonly);
-        if (this._min !== event.detail.min) {
-          this._min = event.detail.min!;
-          this._setDisabledState(this._datePickerElement!);
-        }
-        this._setAriaLabel();
-      },
-      { signal: this._datePickerController.signal },
-    );
-
-    this._datePickerElement.dispatchEvent(datepickerControlRegisteredEventFactory());
-  }
-
-  private _setDisabledState(datepicker: SbbDatepickerElement | null | undefined): void {
-    const pickerValueAsDate = datepicker?.getValueAsDate?.();
-
-    if (!pickerValueAsDate) {
-      this._disabled = true;
-      return;
-    }
-
-    const previousDate: Date = findPreviousAvailableDate(
-      pickerValueAsDate,
-      datepicker?.dateFilter || null,
-      this._dateAdapter,
-      this._min,
-    );
-    this._disabled = this._dateAdapter.compareDate(previousDate, pickerValueAsDate) === 0;
-  }
-
-  private _setAriaLabel(): void {
-    const currentDate = this._datePickerElement?.getValueAsDate?.();
-
-    if (!currentDate || !this._dateAdapter.isValid(currentDate)) {
-      this.setAttribute('aria-label', i18nPreviousDay[this._language.current]);
-      return;
-    }
-
-    const currentDateString =
-      this._datePickerElement?.now().toDateString() === currentDate.toDateString()
-        ? i18nToday[this._language.current].toLowerCase()
-        : this._dateAdapter.getAccessibilityFormatDate(currentDate);
-
-    this.setAttribute(
-      'aria-label',
-      i18nSelectPreviousDay(currentDateString)[this._language.current],
-    );
-  }
-
-  private _setDisabledRenderAttributes(): void {
-    this.toggleAttribute('data-disabled', this._disabled || this._inputDisabled);
-    if (isValidAttribute(this, 'data-disabled')) {
-      this.setAttribute('aria-disabled', 'true');
-      this.removeAttribute('tabindex');
-    } else {
-      this.removeAttribute('aria-disabled');
-      this.setAttribute('tabindex', '0');
-    }
-  }
-
-  protected override renderTemplate(): TemplateResult {
-    this._setDisabledRenderAttributes();
-    return html` <sbb-icon name="chevron-small-left-small"></sbb-icon> `;
   }
 }
 
diff --git a/src/components/datepicker/datepicker-previous-day/index.ts b/src/components/datepicker/datepicker-previous-day/index.ts
deleted file mode 100644
index f1663c8ffd..0000000000
--- a/src/components/datepicker/datepicker-previous-day/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './datepicker-previous-day';
diff --git a/src/components/datepicker/datepicker-previous-day/readme.md b/src/components/datepicker/datepicker-previous-day/readme.md
index d85bf534ac..33ee7aa58e 100644
--- a/src/components/datepicker/datepicker-previous-day/readme.md
+++ b/src/components/datepicker/datepicker-previous-day/readme.md
@@ -37,8 +37,8 @@ both standalone or within the `sbb-form-field`, they must have the same parent e
 
 | Name         | Attribute     | Privacy | Type                                          | Default    | Description                                      |
 | ------------ | ------------- | ------- | --------------------------------------------- | ---------- | ------------------------------------------------ |
-| `datePicker` | `date-picker` | public  | `string \| SbbDatepickerElement \| undefined` |            | Datepicker reference.                            |
 | `negative`   | `negative`    | public  | `boolean`                                     | `false`    | Negative coloring variant flag.                  |
+| `datePicker` | `date-picker` | public  | `string \| SbbDatepickerElement \| undefined` |            | Datepicker reference.                            |
 | `type`       | `type`        | public  | `SbbButtonType`                               | `'button'` | The type attribute to use for the button.        |
 | `name`       | `name`        | public  | `string`                                      |            | The name of the button element.                  |
 | `value`      | `value`       | public  | `string`                                      |            | The value of the button element.                 |
diff --git a/src/components/datepicker/datepicker-toggle.ts b/src/components/datepicker/datepicker-toggle.ts
new file mode 100644
index 0000000000..1a6eb11b8d
--- /dev/null
+++ b/src/components/datepicker/datepicker-toggle.ts
@@ -0,0 +1 @@
+export * from './datepicker-toggle/datepicker-toggle.js';
diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts
index acdabc42cf..ded7358ce8 100644
--- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts
+++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts
@@ -1,18 +1,18 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbCalendarElement } from '../../calendar';
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbFormFieldElement } from '../../form-field';
-import type { SbbPopoverTriggerElement } from '../../popover';
-import { SbbPopoverElement } from '../../popover';
-import type { SbbDatepickerElement } from '../datepicker';
+import type { SbbCalendarElement } from '../../calendar.js';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
+import type { SbbPopoverTriggerElement } from '../../popover.js';
+import { SbbPopoverElement } from '../../popover.js';
+import type { SbbDatepickerElement } from '../datepicker.js';
 
-import { SbbDatepickerToggleElement } from './datepicker-toggle';
+import { SbbDatepickerToggleElement } from './datepicker-toggle.js';
 
-import '../datepicker';
-import '../../form-field/form-field';
+import '../datepicker.js';
+import '../../form-field/form-field.js';
 
 describe(`sbb-datepicker-toggle with ${fixture.name}`, () => {
   it('renders standalone', async () => {
@@ -36,7 +36,7 @@ describe(`sbb-datepicker-toggle with ${fixture.name}`, () => {
           <input id="datepicker-input" />
         </div>
       `,
-      { modules: ['./datepicker-toggle.ts', '../datepicker/index.ts'] },
+      { modules: ['./datepicker-toggle.ts', '../datepicker.ts'] },
     );
     const element: SbbDatepickerToggleElement =
       root.querySelector<SbbDatepickerToggleElement>('sbb-datepicker-toggle')!;
@@ -66,7 +66,7 @@ describe(`sbb-datepicker-toggle with ${fixture.name}`, () => {
           <input id="datepicker-input" />
         </div>
       `,
-      { modules: ['./datepicker-toggle.ts', '../datepicker/index.ts'] },
+      { modules: ['./datepicker-toggle.ts', '../datepicker.ts'] },
     );
     const element: SbbDatepickerToggleElement =
       root.querySelector<SbbDatepickerToggleElement>('sbb-datepicker-toggle')!;
@@ -106,7 +106,7 @@ describe(`sbb-datepicker-toggle with ${fixture.name}`, () => {
     // there's no datepicker, so no event and the popoverTrigger is disabled due _datePickerElement not set
     expect(toggle).not.to.be.null;
     expect(inputUpdated.count).to.be.equal(0);
-    expect(trigger.getAttribute('disabled')).to.be.equal('');
+    expect(trigger).to.have.attribute('disabled');
 
     const picker: SbbDatepickerElement = document.createElement('sbb-datepicker');
     picker.setAttribute('input', 'datepicker-input');
@@ -117,7 +117,7 @@ describe(`sbb-datepicker-toggle with ${fixture.name}`, () => {
 
     // the datepicker is connected, which triggers a 1st inputUpdated event which calls _init and a 2nd one which sets max/min/disabled
     expect(inputUpdated.count).to.be.equal(2);
-    expect(trigger.getAttribute('disabled')).to.be.null;
+    expect(trigger).not.to.have.attribute('disabled');
   });
 
   it('datepicker is created after the component with different parent', async () => {
@@ -142,7 +142,7 @@ describe(`sbb-datepicker-toggle with ${fixture.name}`, () => {
     // there's no datepicker, so no event and the popoverTrigger is disabled due _datePickerElement not set
     expect(toggle).not.to.be.null;
     expect(inputUpdated.count).to.be.equal(0);
-    expect(trigger.getAttribute('disabled')).to.be.equal('');
+    expect(trigger).to.have.attribute('disabled');
 
     const picker: SbbDatepickerElement = document.createElement('sbb-datepicker');
     picker.setAttribute('input', 'datepicker-input');
@@ -153,7 +153,7 @@ describe(`sbb-datepicker-toggle with ${fixture.name}`, () => {
 
     // the datepicker is connected on a different parent, so no changes are triggered
     expect(inputUpdated.count).to.be.equal(0);
-    expect(trigger.getAttribute('disabled')).to.be.equal('');
+    expect(trigger).to.have.attribute('disabled');
   });
 
   it('renders in form field, open calendar and change date', async () => {
@@ -166,7 +166,7 @@ describe(`sbb-datepicker-toggle with ${fixture.name}`, () => {
         </sbb-form-field>
       `,
       {
-        modules: ['../../form-field/index.ts', './datepicker-toggle.ts', '../datepicker/index.ts'],
+        modules: ['../../form-field.ts', './datepicker-toggle.ts', '../datepicker.ts'],
       },
     );
     const element: SbbDatepickerToggleElement =
diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.scss b/src/components/datepicker/datepicker-toggle/datepicker-toggle.scss
index 65cb78dc69..28be7eab08 100644
--- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.scss
+++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.scss
@@ -1,20 +1,22 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-datepicker-control-radius: var(--sbb-border-radius-4x);
   --sbb-datepicker-control-color: var(--sbb-color-black);
+
+  display: inline-flex;
 }
 
 sbb-popover-trigger {
+  --sbb-button-display: flex;
+
   color: var(--sbb-datepicker-control-color);
-  height: var(--sbb-form-field-height);
-  display: flex;
-  align-items: center;
-  -webkit-tap-highlight-color: transparent;
+
+  // Enables taking full height in order to shift the calendar position to the border bottom of the form field.
+  height: unset;
 }
 
 sbb-icon {
diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts
index cd6b730a69..9eaaa049d5 100644
--- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts
+++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts
@@ -1,14 +1,14 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import type { SbbFormFieldElement } from '../../form-field';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
 
-import type { SbbDatepickerToggleElement } from './datepicker-toggle';
+import type { SbbDatepickerToggleElement } from './datepicker-toggle.js';
 
-import './datepicker-toggle';
-import '../datepicker';
-import '../../form-field';
+import './datepicker-toggle.js';
+import '../datepicker.js';
+import '../../form-field.js';
 
 describe(`sbb-datepicker-toggle`, () => {
   it('renders', async () => {
diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts
index 771665ccd8..f70cb24db4 100644
--- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts
+++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts
@@ -9,25 +9,21 @@ import type {
   Decorator,
   StoryContext,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
-import { sbbSpread } from '../../core/dom';
-import type { SbbPopoverTriggerElement } from '../../popover';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
+import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
+import type { SbbPopoverTriggerElement } from '../../popover.js';
 
-import '../../form-field';
-import '../datepicker';
-
-import './datepicker-toggle';
 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)',
-});
+import '../../form-field.js';
+import '../datepicker.js';
+import './datepicker-toggle.js';
 
 const negative: InputType = {
   control: {
@@ -111,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 c8d4abe311..d3552c44d9 100644
--- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts
+++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts
@@ -3,19 +3,22 @@ import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
-import type { SbbCalendarElement } from '../../calendar';
-import { sbbInputModalityDetector } from '../../core/a11y';
-import { hostAttributes, LanguageController, SbbNegativeMixin } from '../../core/common-behaviors';
-import { isValidAttribute } from '../../core/dom';
-import { i18nShowCalendar } from '../../core/i18n';
-import type { SbbPopoverElement, SbbPopoverTriggerElement } from '../../popover';
-import { datepickerControlRegisteredEventFactory, getDatePicker } from '../datepicker';
-import type { SbbDatepickerElement, InputUpdateEvent } from '../datepicker';
-import '../../calendar';
-import '../../popover';
+import type { SbbCalendarElement } from '../../calendar.js';
+import { sbbInputModalityDetector } from '../../core/a11y.js';
+import { SbbLanguageController } from '../../core/controllers.js';
+import { readDataNow } from '../../core/datetime.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { i18nShowCalendar } from '../../core/i18n.js';
+import { SbbNegativeMixin } from '../../core/mixins.js';
+import type { SbbPopoverElement, SbbPopoverTriggerElement } from '../../popover.js';
+import type { SbbDatepickerElement, SbbInputUpdateEvent } from '../datepicker.js';
+import { datepickerControlRegisteredEventFactory, getDatePicker } from '../datepicker.js';
 
 import style from './datepicker-toggle.scss?lit&inline';
 
+import '../../calendar.js';
+import '../../popover.js';
+
 /**
  * Combined with a `sbb-datepicker`, it can be used to select a date from a `sbb-calendar`.
  */
@@ -45,7 +48,7 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) {
 
   private _datePickerController!: AbortController;
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   /**
    * Opens the calendar.
@@ -65,7 +68,7 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) {
 
     const formField = this.closest?.('sbb-form-field') ?? this.closest?.('[data-form-field]');
     if (formField) {
-      this.negative = isValidAttribute(formField, 'negative');
+      this.negative = formField.hasAttribute('negative');
     }
   }
 
@@ -97,7 +100,7 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) {
 
     this._datePickerElement?.addEventListener(
       'inputUpdated',
-      (event: CustomEvent<InputUpdateEvent>) => {
+      (event: CustomEvent<SbbInputUpdateEvent>) => {
         this._datePickerElement = event.target as SbbDatepickerElement;
         this._disabled = !!(event.detail.disabled || event.detail.readonly);
         this._min = event.detail.min;
@@ -151,17 +154,9 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) {
     this._calendarElement.resetPosition();
   }
 
-  private _hasDataNow(): boolean {
-    if (!this._datePickerElement) {
-      return false;
-    }
-    const dataNow = +(this._datePickerElement.dataset?.now as string);
-    return !!dataNow;
-  }
-
   private _now(): Date | undefined {
-    if (this._hasDataNow()) {
-      const today = new Date(+(this._datePickerElement!.dataset.now as string));
+    if (this._datePickerElement?.hasAttribute('data-now')) {
+      const today = new Date(readDataNow(this._datePickerElement));
       today.setHours(0, 0, 0, 0);
       return today;
     }
diff --git a/src/components/datepicker/datepicker-toggle/index.ts b/src/components/datepicker/datepicker-toggle/index.ts
deleted file mode 100644
index 3272c3e5c1..0000000000
--- a/src/components/datepicker/datepicker-toggle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './datepicker-toggle';
diff --git a/src/components/datepicker/datepicker.ts b/src/components/datepicker/datepicker.ts
new file mode 100644
index 0000000000..d3e158f7c6
--- /dev/null
+++ b/src/components/datepicker/datepicker.ts
@@ -0,0 +1 @@
+export * from './datepicker/datepicker.js';
diff --git a/src/components/datepicker/datepicker/datepicker.e2e.ts b/src/components/datepicker/datepicker/datepicker.e2e.ts
index 4b40af677f..3a8a68af29 100644
--- a/src/components/datepicker/datepicker/datepicker.e2e.ts
+++ b/src/components/datepicker/datepicker/datepicker.e2e.ts
@@ -4,13 +4,13 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit/static-html.js';
 import type { Context } from 'mocha';
 
-import { i18nDateChangedTo } from '../../core/i18n';
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture, typeInElement } from '../../core/testing/private';
+import { i18nDateChangedTo } from '../../core/i18n.js';
+import { fixture, typeInElement } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbDatepickerElement } from './datepicker';
+import { SbbDatepickerElement } from './datepicker.js';
 
-import '../../form-field';
+import '../../form-field.js';
 
 describe(`sbb-datepicker with ${fixture.name}`, () => {
   it('renders', async () => {
@@ -73,7 +73,7 @@ describe(`sbb-datepicker with ${fixture.name}`, () => {
 
     beforeEach(async () => {
       const root = await fixture(template, {
-        modules: ['./datepicker.ts', '../../form-field/index.ts'],
+        modules: ['./datepicker.ts', '../../form-field.ts'],
       });
       element = root.querySelector<SbbDatepickerElement>('sbb-datepicker')!;
       input = root.querySelector<HTMLInputElement>('input')!;
diff --git a/src/components/datepicker/datepicker/datepicker.spec.ts b/src/components/datepicker/datepicker/datepicker.spec.ts
index 3f9f270df2..610b608ef3 100644
--- a/src/components/datepicker/datepicker/datepicker.spec.ts
+++ b/src/components/datepicker/datepicker/datepicker.spec.ts
@@ -1,25 +1,26 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { NativeDateAdapter } from '../../core/datetime';
-import { findInput } from '../../core/dom';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import type { SbbFormFieldElement } from '../../form-field';
-import type { SbbDatepickerNextDayElement, SbbDatepickerPreviousDayElement } from '../index';
+import { NativeDateAdapter } from '../../core/datetime.js';
+import { findInput } from '../../core/dom.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
+import type { SbbDatepickerNextDayElement } from '../datepicker-next-day.js';
+import type { SbbDatepickerPreviousDayElement } from '../datepicker-previous-day.js';
 
-import type { SbbDatepickerElement } from './datepicker';
+import type { SbbDatepickerElement } from './datepicker.js';
 import {
   getDatePicker,
   getAvailableDate,
   findPreviousAvailableDate,
   findNextAvailableDate,
   isDateAvailable,
-} from './datepicker';
+} from './datepicker.js';
 
-import '../datepicker-next-day';
-import '../datepicker-previous-day';
-import '../datepicker-toggle';
-import '../../form-field';
+import '../datepicker-next-day.js';
+import '../datepicker-previous-day.js';
+import '../datepicker-toggle.js';
+import '../../form-field.js';
 
 describe(`sbb-datepicker`, () => {
   it('renders', async () => {
diff --git a/src/components/datepicker/datepicker/datepicker.stories.ts b/src/components/datepicker/datepicker/datepicker.stories.ts
index 6ff727364d..3eb87b1c11 100644
--- a/src/components/datepicker/datepicker/datepicker.stories.ts
+++ b/src/components/datepicker/datepicker/datepicker.stories.ts
@@ -9,27 +9,23 @@ import type {
   StoryObj,
   StoryContext,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import { nothing, type TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
-import { sbbSpread } from '../../core/dom';
-import type { SbbPopoverTriggerElement } from '../../popover';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
+import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
+import type { SbbPopoverTriggerElement } from '../../popover.js';
 
-import { SbbDatepickerElement } from './datepicker';
+import { SbbDatepickerElement } from './datepicker.js';
 import readme from './readme.md?raw';
 
-import '../datepicker-next-day';
-import '../datepicker-previous-day';
-import '../datepicker-toggle';
-import '../../form-field';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import '../datepicker-next-day.js';
+import '../datepicker-previous-day.js';
+import '../datepicker-toggle.js';
+import '../../form-field.js';
 
 const value: InputType = {
   control: {
@@ -254,8 +250,8 @@ 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,
   dataNow: isChromatic() ? new Date(2023, 0, 12, 0, 0, 0).valueOf() : undefined,
 };
@@ -272,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,
@@ -448,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 = {
@@ -482,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/datepicker/datepicker/datepicker.ts b/src/components/datepicker/datepicker/datepicker.ts
index 1cc32689e1..baadf3b46b 100644
--- a/src/components/datepicker/datepicker/datepicker.ts
+++ b/src/components/datepicker/datepicker/datepicker.ts
@@ -2,25 +2,24 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import { LanguageController } from '../../core/common-behaviors';
-import { readConfig } from '../../core/config';
-import type { DateAdapter } from '../../core/datetime';
-import { defaultDateAdapter } from '../../core/datetime';
-import { findInput, findReferencedElement, isValidAttribute } from '../../core/dom';
-import { ConnectedAbortController, EventEmitter } from '../../core/eventing';
-import { i18nDateChangedTo, i18nDatePickerPlaceholder } from '../../core/i18n';
-import type { SbbDateLike, ValidationChangeEvent } from '../../core/interfaces';
-import { AgnosticMutationObserver } from '../../core/observers';
-import type { SbbDatepickerNextDayElement } from '../datepicker-next-day';
-import type { SbbDatepickerPreviousDayElement } from '../datepicker-previous-day';
-import type { SbbDatepickerToggleElement } from '../datepicker-toggle';
+import { readConfig } from '../../core/config.js';
+import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js';
+import { type DateAdapter, readDataNow } from '../../core/datetime.js';
+import { defaultDateAdapter } from '../../core/datetime.js';
+import { findInput, findReferencedElement } from '../../core/dom.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { i18nDateChangedTo, i18nDatePickerPlaceholder } from '../../core/i18n.js';
+import type { SbbDateLike, SbbValidationChangeEvent } from '../../core/interfaces.js';
+import { AgnosticMutationObserver } from '../../core/observers.js';
+import type { SbbDatepickerButton } from '../common.js';
+import type { SbbDatepickerToggleElement } from '../datepicker-toggle.js';
 
 import style from './datepicker.scss?lit&inline';
 
 const FORMAT_DATE =
   /(^0?[1-9]?|[12]?[0-9]?|3?[01]?)[.,\\/\-\s](0?[1-9]?|1?[0-2]?)?[.,\\/\-\s](\d{1,4}$)?/;
 
-export interface InputUpdateEvent {
+export interface SbbInputUpdateEvent {
   disabled?: boolean;
   readonly?: boolean;
   min?: string | number;
@@ -34,10 +33,7 @@ export interface InputUpdateEvent {
  * @param trigger The id or the reference of the SbbDatePicker.
  */
 export function getDatePicker(
-  element:
-    | SbbDatepickerPreviousDayElement
-    | SbbDatepickerNextDayElement
-    | SbbDatepickerToggleElement,
+  element: SbbDatepickerButton | SbbDatepickerToggleElement,
   trigger?: string | HTMLElement,
 ): SbbDatepickerElement | null | undefined {
   if (!trigger) {
@@ -164,9 +160,9 @@ export const datepickerControlRegisteredEventFactory = (): CustomEvent =>
  *
  * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  * @event {CustomEvent<void>} change - Notifies that the connected input has changes.
- * @event {CustomEvent<InputUpdateEvent>} inputUpdated - Notifies that the attributes of the input connected to the datepicker have changes.
+ * @event {CustomEvent<SbbInputUpdateEvent>} inputUpdated - Notifies that the attributes of the input connected to the datepicker have changes.
  * @event {CustomEvent<void>} datePickerUpdated - Notifies that the attributes of the datepicker have changes.
- * @event {CustomEvent<ValidationChangeEvent>} validationChange - Emits whenever the internal validation state changes.
+ * @event {CustomEvent<SbbValidationChangeEvent>} validationChange - Emits whenever the internal validation state changes.
  */
 @customElement('sbb-datepicker')
 export class SbbDatepickerElement extends LitElement {
@@ -209,7 +205,7 @@ export class SbbDatepickerElement extends LitElement {
   });
 
   /** Notifies that the attributes of the input connected to the datepicker have changes. */
-  private _inputUpdated: EventEmitter<InputUpdateEvent> = new EventEmitter(
+  private _inputUpdated: EventEmitter<SbbInputUpdateEvent> = new EventEmitter(
     this,
     SbbDatepickerElement.events.inputUpdated,
     { bubbles: true, cancelable: true },
@@ -226,7 +222,7 @@ export class SbbDatepickerElement extends LitElement {
   );
 
   /** Emits whenever the internal validation state changes. */
-  private _validationChange: EventEmitter<ValidationChangeEvent> = new EventEmitter(
+  private _validationChange: EventEmitter<SbbValidationChangeEvent> = new EventEmitter(
     this,
     SbbDatepickerElement.events.validationChange,
   );
@@ -335,8 +331,8 @@ export class SbbDatepickerElement extends LitElement {
   private _dateAdapter: DateAdapter<Date> =
     readConfig().datetime?.dateAdapter ?? defaultDateAdapter;
 
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this).withHandler(() => {
+  private _abort = new SbbConnectedAbortController(this);
+  private _language = new SbbLanguageController(this).withHandler(() => {
     if (this._inputElement) {
       this._inputElement.placeholder = i18nDatePickerPlaceholder[this._language.current];
       const valueAsDate = this.getValueAsDate();
@@ -379,8 +375,8 @@ export class SbbDatepickerElement extends LitElement {
     this._datePickerController?.abort();
   }
 
-  protected override firstUpdated(_changedProperties: PropertyValues): void {
-    super.firstUpdated(_changedProperties);
+  protected override firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
     this._setAriaLiveMessage(this.getValueAsDate());
   }
 
@@ -415,7 +411,7 @@ export class SbbDatepickerElement extends LitElement {
             this._inputElement?.min,
             this._inputElement?.max,
           ));
-      const wasValid = !isValidAttribute(this._inputElement, 'data-sbb-invalid');
+      const wasValid = !this._inputElement.hasAttribute('data-sbb-invalid');
       this._inputElement.toggleAttribute('data-sbb-invalid', !isEmptyOrValid);
       if (wasValid !== isEmptyOrValid) {
         this._validationChange.emit({ valid: isEmptyOrValid });
@@ -463,7 +459,7 @@ export class SbbDatepickerElement extends LitElement {
    */
   public now(): Date {
     if (this._hasDataNow()) {
-      const today = new Date(+(this.dataset?.now as string));
+      const today = new Date(readDataNow(this));
       today.setHours(0, 0, 0, 0);
       return today;
     }
@@ -471,8 +467,7 @@ export class SbbDatepickerElement extends LitElement {
   }
 
   private _hasDataNow(): boolean {
-    const dataNow = +(this.dataset?.now as string);
-    return !!dataNow;
+    return this.hasAttribute('data-now');
   }
 
   private _parse(value: string): Date | undefined {
@@ -518,6 +513,6 @@ declare global {
   }
 
   interface GlobalEventHandlersEventMap {
-    inputUpdated: CustomEvent<InputUpdateEvent>;
+    inputUpdated: CustomEvent<SbbInputUpdateEvent>;
   }
 }
diff --git a/src/components/datepicker/datepicker/index.ts b/src/components/datepicker/datepicker/index.ts
deleted file mode 100644
index c95f255414..0000000000
--- a/src/components/datepicker/datepicker/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './datepicker';
diff --git a/src/components/datepicker/datepicker/readme.md b/src/components/datepicker/datepicker/readme.md
index a984945c4e..ecf0f9ef9e 100644
--- a/src/components/datepicker/datepicker/readme.md
+++ b/src/components/datepicker/datepicker/readme.md
@@ -125,10 +125,10 @@ Add the `sbb-disable-animation` class to disable animation and transition effect
 
 ## Events
 
-| Name                | Type                                 | Description                                                                         | Inherited From |
-| ------------------- | ------------------------------------ | ----------------------------------------------------------------------------------- | -------------- |
-| `didChange`         | `CustomEvent<void>`                  | Deprecated. used for React. Will probably be removed once React 19 is available.    |                |
-| `change`            | `CustomEvent<void>`                  | Notifies that the connected input has changes.                                      |                |
-| `inputUpdated`      | `CustomEvent<InputUpdateEvent>`      | Notifies that the attributes of the input connected to the datepicker have changes. |                |
-| `datePickerUpdated` | `CustomEvent<void>`                  | Notifies that the attributes of the datepicker have changes.                        |                |
-| `validationChange`  | `CustomEvent<ValidationChangeEvent>` | Emits whenever the internal validation state changes.                               |                |
+| Name                | Type                                    | Description                                                                         | Inherited From |
+| ------------------- | --------------------------------------- | ----------------------------------------------------------------------------------- | -------------- |
+| `didChange`         | `CustomEvent<void>`                     | Deprecated. used for React. Will probably be removed once React 19 is available.    |                |
+| `change`            | `CustomEvent<void>`                     | Notifies that the connected input has changes.                                      |                |
+| `inputUpdated`      | `CustomEvent<SbbInputUpdateEvent>`      | Notifies that the attributes of the input connected to the datepicker have changes. |                |
+| `datePickerUpdated` | `CustomEvent<void>`                     | Notifies that the attributes of the datepicker have changes.                        |                |
+| `validationChange`  | `CustomEvent<SbbValidationChangeEvent>` | Emits whenever the internal validation state changes.                               |                |
diff --git a/src/components/datepicker/index.ts b/src/components/datepicker/index.ts
deleted file mode 100644
index dc611b1b03..0000000000
--- a/src/components/datepicker/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './datepicker';
-export * from './datepicker-next-day';
-export * from './datepicker-previous-day';
-export * from './datepicker-toggle';
diff --git a/src/components/dialog.ts b/src/components/dialog.ts
new file mode 100644
index 0000000000..3928607452
--- /dev/null
+++ b/src/components/dialog.ts
@@ -0,0 +1,4 @@
+export * from './dialog/dialog-actions.js';
+export * from './dialog/dialog-content.js';
+export * from './dialog/dialog-title.js';
+export * from './dialog/dialog.js';
diff --git a/src/components/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/__snapshots__/dialog.spec.snap.js
deleted file mode 100644
index 612377223f..0000000000
--- a/src/components/dialog/__snapshots__/dialog.spec.snap.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/* @web/test-runner snapshot v1 */
-export const snapshots = {};
-
-snapshots["sbb-dialog renders"] = 
-`<div class="sbb-dialog__container">
-  <div
-    class="sbb-dialog"
-    id="sbb-dialog-0"
-  >
-    <div class="sbb-dialog__wrapper">
-      <div class="sbb-dialog__header">
-        <sbb-title
-          aria-level="1"
-          class="sbb-dialog__title"
-          id="title"
-          level="1"
-          role="heading"
-          visual-level="3"
-        >
-          <slot name="title">
-          </slot>
-        </sbb-title>
-        <sbb-secondary-button
-          aria-label="Close secondary window"
-          class="sbb-dialog__close"
-          data-action=""
-          data-button=""
-          data-sbb-button=""
-          dir="ltr"
-          icon-name="cross-small"
-          role="button"
-          sbb-dialog-close=""
-          size="m"
-          tabindex="0"
-          type="button"
-        >
-        </sbb-secondary-button>
-      </div>
-      <div class="sbb-dialog__content">
-        <slot>
-        </slot>
-      </div>
-      <div class="sbb-dialog__footer">
-        <slot name="action-group">
-        </slot>
-      </div>
-    </div>
-  </div>
-</div>
-<sbb-screen-reader-only aria-live="polite">
-</sbb-screen-reader-only>
-`;
-/* end snapshot sbb-dialog renders */
-
-snapshots["sbb-dialog A11y tree Chrome"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": ""
-}
-</p>
-`;
-/* end snapshot sbb-dialog A11y tree Chrome */
-
-snapshots["sbb-dialog A11y tree Firefox"] = 
-`<p>
-  {
-  "role": "document",
-  "name": ""
-}
-</p>
-`;
-/* end snapshot sbb-dialog A11y tree Firefox */
-
diff --git a/src/components/dialog/dialog-actions.ts b/src/components/dialog/dialog-actions.ts
new file mode 100644
index 0000000000..fb741e9fbe
--- /dev/null
+++ b/src/components/dialog/dialog-actions.ts
@@ -0,0 +1 @@
+export * from './dialog-actions/dialog-actions.js';
diff --git a/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js b/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js
new file mode 100644
index 0000000000..f5251b9307
--- /dev/null
+++ b/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js
@@ -0,0 +1,45 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-dialog-actions renders"] = 
+`<sbb-dialog-actions
+  align-group="start"
+  button-size="l"
+  horizontal-from="medium"
+  link-size="m"
+  orientation="horizontal"
+>
+</sbb-dialog-actions>
+`;
+/* end snapshot sbb-dialog-actions renders */
+
+snapshots["sbb-dialog-actions A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog-actions A11y tree Chrome */
+
+snapshots["sbb-dialog-actions A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog-actions A11y tree Firefox */
+
+snapshots["sbb-dialog-actions A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog-actions A11y tree Safari */
+
diff --git a/src/components/dialog/dialog-actions/dialog-actions.scss b/src/components/dialog/dialog-actions/dialog-actions.scss
new file mode 100644
index 0000000000..ea9d259c88
--- /dev/null
+++ b/src/components/dialog/dialog-actions/dialog-actions.scss
@@ -0,0 +1,24 @@
+@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 {
+  display: contents;
+
+  @include sbb.if-forced-colors {
+    --sbb-dialog-actions-border: var(--sbb-border-width-1x) solid CanvasText;
+  }
+}
+
+.sbb-dialog-actions {
+  padding-inline: var(--sbb-dialog-padding-inline);
+  padding-block: var(--sbb-spacing-responsive-s);
+  margin-block-start: auto;
+  background-color: var(--sbb-dialog-background-color);
+  border-block-start: var(--sbb-dialog-actions-border);
+
+  :host([data-overflows]:not([data-negative])) & {
+    @include sbb.shadow-level-9-soft;
+  }
+}
diff --git a/src/components/dialog/dialog-actions/dialog-actions.spec.ts b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
new file mode 100644
index 0000000000..996f90d45b
--- /dev/null
+++ b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
@@ -0,0 +1,24 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import './dialog-actions.js';
+
+describe('sbb-dialog-actions', () => {
+  it('renders', async () => {
+    const root = await fixture(html`<sbb-dialog-actions></sbb-dialog-actions>`);
+
+    await expect(root).dom.to.equalSnapshot();
+
+    expect(root).shadowDom.to.be.equal(`
+      <div class="sbb-dialog-actions">
+        <div class="sbb-action-group">
+          <slot>
+          </slot>
+        </div>
+      </div>
+    `);
+  });
+
+  testA11yTreeSnapshot(html`<sbb-dialog-actions></sbb-dialog-actions>`);
+});
diff --git a/src/components/dialog/dialog-actions/dialog-actions.stories.ts b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
new file mode 100644
index 0000000000..6fbfa66524
--- /dev/null
+++ b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
@@ -0,0 +1,39 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Decorator, Meta, StoryObj } from '@storybook/web-components';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
+
+import './dialog-actions.js';
+import readme from './readme.md?raw';
+
+import '../../button/button.js';
+import '../../button/secondary-button.js';
+import '../../link.js';
+
+const Template = (): TemplateResult =>
+  html`<sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
+    <sbb-block-link
+      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-dialog-actions>`;
+
+export const Default: StoryObj = { render: Template };
+
+const meta: Meta = {
+  decorators: [withActions as Decorator],
+  parameters: {
+    docs: {
+      extractComponentDescription: () => readme,
+    },
+  },
+  title: 'components/sbb-dialog/sbb-dialog-actions',
+};
+
+export default meta;
diff --git a/src/components/dialog/dialog-actions/dialog-actions.ts b/src/components/dialog/dialog-actions/dialog-actions.ts
new file mode 100644
index 0000000000..60b4a8ad61
--- /dev/null
+++ b/src/components/dialog/dialog-actions/dialog-actions.ts
@@ -0,0 +1,28 @@
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { SbbActionGroupElement } from '../../action-group.js';
+
+import style from './dialog-actions.scss?lit&inline';
+
+/**
+ * Use this component to display a footer into an `sbb-dialog` with an action group.
+ *
+ * @slot - Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-dialog-actions`.
+ */
+@customElement('sbb-dialog-actions')
+export class SbbDialogActionsElement extends SbbActionGroupElement {
+  public static override styles: CSSResultGroup = [SbbActionGroupElement.styles, style];
+
+  protected override render(): TemplateResult {
+    return html` <div class="sbb-dialog-actions">${super.render()}</div> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-dialog-actions': SbbDialogActionsElement;
+  }
+}
diff --git a/src/components/dialog/dialog-actions/readme.md b/src/components/dialog/dialog-actions/readme.md
new file mode 100644
index 0000000000..7078f368d5
--- /dev/null
+++ b/src/components/dialog/dialog-actions/readme.md
@@ -0,0 +1,29 @@
+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>
+  <sbb-dialog-actions>
+    <sbb-block-link 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-dialog-actions>
+</sbb-dialog>
+```
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Name             | Attribute         | Privacy | Type                                        | Default        | Description                                                                                                             |
+| ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `alignGroup`     | `align-group`     | public  | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'`      | Set the slotted `<sbb-action-group>` children's alignment.                                                              |
+| `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom`                         | `'medium'`     | Overrides the behaviour of `orientation` property.                                                                      |
+| `orientation`    | `orientation`     | public  | `SbbOrientation`                            | `'horizontal'` | Indicates the orientation of the components inside the `<sbb-action-group>`.                                            |
+| `buttonSize`     | `button-size`     | public  | `SbbButtonSize`                             | `'l'`          | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances.         |
+| `linkSize`       | `link-size`       | public  | `SbbLinkSize`                               | `'m'`          | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. |
+
+## Slots
+
+| Name | Description                                                                                        |
+| ---- | -------------------------------------------------------------------------------------------------- |
+|      | Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-dialog-actions`. |
diff --git a/src/components/dialog/dialog-content.ts b/src/components/dialog/dialog-content.ts
new file mode 100644
index 0000000000..5e96218807
--- /dev/null
+++ b/src/components/dialog/dialog-content.ts
@@ -0,0 +1 @@
+export * from './dialog-content/dialog-content.js';
diff --git a/src/components/dialog/dialog-content/dialog-content.scss b/src/components/dialog/dialog-content/dialog-content.scss
new file mode 100644
index 0000000000..a40376fb2f
--- /dev/null
+++ b/src/components/dialog/dialog-content/dialog-content.scss
@@ -0,0 +1,29 @@
+@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 {
+  display: contents;
+}
+
+.sbb-dialog-content {
+  @include sbb.scrollbar-rules;
+
+  padding-inline: var(--sbb-dialog-padding-inline);
+  padding-block: var(--sbb-dialog-padding-block);
+  overflow: auto;
+  transform: translateY(var(--sbb-dialog-header-margin-block-start));
+  margin-block: 0 calc(var(--sbb-dialog-header-height) * -1);
+  transition: var(--sbb-dialog-content-transition);
+  z-index: -1;
+
+  // In order to improve the header transition on mobile (especially iOS) we use
+  // a combination of the transform and margin properties on touch devices,
+  // while on desktop we use just the margin-block for a better transition of the visible scrollbar.
+  @include sbb.mq($from: medium) {
+    transform: unset;
+    margin-block: var(--sbb-dialog-header-margin-block-start) 0;
+    transition: margin var(--sbb-dialog-animation-duration) var(--sbb-dialog-animation-easing);
+  }
+}
diff --git a/src/components/dialog/dialog-content/dialog-content.spec.ts b/src/components/dialog/dialog-content/dialog-content.spec.ts
new file mode 100644
index 0000000000..5c4dbda497
--- /dev/null
+++ b/src/components/dialog/dialog-content/dialog-content.spec.ts
@@ -0,0 +1,17 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './dialog-content.js';
+
+describe('sbb-dialog-content', () => {
+  it('renders', async () => {
+    const root = await fixture(html`<sbb-dialog-content>Content</sbb-dialog-content>`);
+
+    expect(root).dom.to.be.equal(`<sbb-dialog-content>Content</sbb-dialog-content>`);
+
+    expect(root).shadowDom.to.be.equal(`
+      <div class="sbb-dialog-content">
+        <slot></slot>
+      </div>
+    `);
+  });
+});
diff --git a/src/components/dialog/dialog-content/dialog-content.stories.ts b/src/components/dialog/dialog-content/dialog-content.stories.ts
new file mode 100644
index 0000000000..f62d32a501
--- /dev/null
+++ b/src/components/dialog/dialog-content/dialog-content.stories.ts
@@ -0,0 +1,24 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Decorator, Meta, StoryObj } from '@storybook/web-components';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
+
+import './dialog-content.js';
+import readme from './readme.md?raw';
+
+const Template = (): TemplateResult =>
+  html`<sbb-dialog-content>This is a dialog content.</sbb-dialog-content>`;
+
+export const Default: StoryObj = { render: Template };
+
+const meta: Meta = {
+  decorators: [withActions as Decorator],
+  parameters: {
+    docs: {
+      extractComponentDescription: () => readme,
+    },
+  },
+  title: 'components/sbb-dialog/sbb-dialog-content',
+};
+
+export default meta;
diff --git a/src/components/dialog/dialog-content/dialog-content.ts b/src/components/dialog/dialog-content/dialog-content.ts
new file mode 100644
index 0000000000..b1143f6308
--- /dev/null
+++ b/src/components/dialog/dialog-content/dialog-content.ts
@@ -0,0 +1,30 @@
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import style from './dialog-content.scss?lit&inline';
+
+/**
+ * Use this component to provide a content for an `sbb-dialog`.
+ *
+ * @slot - Use the unnamed slot to provide a dialog content.
+ */
+@customElement('sbb-dialog-content')
+export class SbbDialogContentElement extends LitElement {
+  public static override styles: CSSResultGroup = style;
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="sbb-dialog-content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-dialog-content': SbbDialogContentElement;
+  }
+}
diff --git a/src/components/dialog/dialog-content/readme.md b/src/components/dialog/dialog-content/readme.md
new file mode 100644
index 0000000000..a83fb562d5
--- /dev/null
+++ b/src/components/dialog/dialog-content/readme.md
@@ -0,0 +1,15 @@
+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>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+</sbb-dialog>
+```
+
+<!-- Auto Generated Below -->
+
+## Slots
+
+| Name | Description                                       |
+| ---- | ------------------------------------------------- |
+|      | Use the unnamed slot to provide a dialog content. |
diff --git a/src/components/dialog/dialog-title.ts b/src/components/dialog/dialog-title.ts
new file mode 100644
index 0000000000..55ce3d3962
--- /dev/null
+++ b/src/components/dialog/dialog-title.ts
@@ -0,0 +1 @@
+export * from './dialog-title/dialog-title.js';
diff --git a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
new file mode 100644
index 0000000000..03fb644d4f
--- /dev/null
+++ b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
@@ -0,0 +1,91 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-dialog-title renders"] = 
+`<div class="sbb-dialog__header">
+  <h2
+    class="sbb-title"
+    role="presentation"
+  >
+    <slot>
+    </slot>
+  </h2>
+  <sbb-secondary-button
+    aria-label="Close secondary window"
+    class="sbb-dialog__close"
+    data-action=""
+    data-button=""
+    data-sbb-button=""
+    dir="ltr"
+    icon-name="cross-small"
+    role="button"
+    sbb-dialog-close=""
+    size="m"
+    tabindex="0"
+    type="button"
+  >
+  </sbb-secondary-button>
+</div>
+`;
+/* end snapshot sbb-dialog-title renders */
+
+snapshots["sbb-dialog-title A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Title"
+    },
+    {
+      "role": "button",
+      "name": "Close secondary window"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-dialog-title A11y tree Chrome */
+
+snapshots["sbb-dialog-title A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Title"
+    },
+    {
+      "role": "button",
+      "name": "Close secondary window"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-dialog-title A11y tree Firefox */
+
+snapshots["sbb-dialog-title A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Title"
+    },
+    {
+      "role": "button",
+      "name": "Close secondary window"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-dialog-title A11y tree Safari */
+
diff --git a/src/components/dialog/dialog-title/dialog-title.e2e.ts b/src/components/dialog/dialog-title/dialog-title.e2e.ts
new file mode 100644
index 0000000000..23eb0399d4
--- /dev/null
+++ b/src/components/dialog/dialog-title/dialog-title.e2e.ts
@@ -0,0 +1,25 @@
+import { assert, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { EventSpy, waitForLitRender } from '../../core/testing.js';
+
+import { SbbDialogTitleElement } from './dialog-title.js';
+
+describe('sbb-dialog-title', () => {
+  let element: SbbDialogTitleElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<sbb-dialog-title back-button>Title</sbb-dialog-title>`);
+  });
+
+  it('renders', async () => {
+    assert.instanceOf(element, SbbDialogTitleElement);
+  });
+
+  it('emits requestBackAction on back button click', async () => {
+    const myEventNameSpy = new EventSpy(SbbDialogTitleElement.events.backClick);
+    (element.shadowRoot!.querySelector('.sbb-dialog__back')! as HTMLElement).click();
+    await waitForLitRender(element);
+    expect(myEventNameSpy.count).to.be.equal(1);
+  });
+});
diff --git a/src/components/dialog/dialog-title/dialog-title.scss b/src/components/dialog/dialog-title/dialog-title.scss
new file mode 100644
index 0000000000..3b20d50edb
--- /dev/null
+++ b/src/components/dialog/dialog-title/dialog-title.scss
@@ -0,0 +1,59 @@
+@use '../../core/styles' as sbb;
+
+:host {
+  --sbb-dialog-title-padding-block: var(--sbb-spacing-responsive-s) 0;
+
+  display: contents;
+}
+
+:host([data-overflows]) {
+  --sbb-dialog-title-padding-block: var(--sbb-spacing-responsive-s);
+}
+
+.sbb-title {
+  flex: 1;
+  overflow: hidden;
+  align-self: center;
+
+  // Overwrite sbb-title default margin
+  margin: 0;
+}
+
+.sbb-dialog__header {
+  display: flex;
+  gap: var(--sbb-spacing-fixed-6x);
+  align-items: start;
+  justify-content: space-between;
+  padding-inline: var(--sbb-dialog-padding-inline);
+  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));
+
+  // Apply show/hide animation unless it has a visible focus within.
+  :host(:not([data-has-visible-focus-within])) & {
+    transform: translateY(var(--sbb-dialog-header-margin-block-start));
+    transition: {
+      property: box-shadow, transform;
+      duration: var(--sbb-dialog-animation-duration);
+      timing-function: var(--sbb-dialog-animation-easing);
+    }
+  }
+
+  :host([data-overflows][data-has-visible-focus-within]) &,
+  :host([data-overflows]:not([negative], [data-hide-header])) & {
+    @include sbb.shadow-level-9-soft;
+
+    @include sbb.if-forced-colors {
+      --sbb-dialog-title-border: var(--sbb-border-width-1x) solid CanvasText;
+    }
+  }
+
+  @include sbb.mq($from: medium) {
+    border-radius: var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;
+  }
+}
+
+.sbb-dialog__close {
+  margin-inline-start: auto;
+}
diff --git a/src/components/dialog/dialog-title/dialog-title.spec.ts b/src/components/dialog/dialog-title/dialog-title.spec.ts
new file mode 100644
index 0000000000..82f968915f
--- /dev/null
+++ b/src/components/dialog/dialog-title/dialog-title.spec.ts
@@ -0,0 +1,22 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import './dialog-title.js';
+
+describe('sbb-dialog-title', () => {
+  it('renders', async () => {
+    const root = await fixture(html`<sbb-dialog-title>Title</sbb-dialog-title>`);
+
+    expect(root).dom.to.be.equal(`
+      <sbb-dialog-title
+       level="2"
+       role="heading"
+       visual-level="3">Title</sbb-dialog-title>
+    `);
+
+    await expect(root).shadowDom.to.equalSnapshot();
+  });
+
+  testA11yTreeSnapshot(html`<sbb-dialog-title>Title</sbb-dialog-title>`);
+});
diff --git a/src/components/dialog/dialog-title/dialog-title.stories.ts b/src/components/dialog/dialog-title/dialog-title.stories.ts
new file mode 100644
index 0000000000..5b4137460f
--- /dev/null
+++ b/src/components/dialog/dialog-title/dialog-title.stories.ts
@@ -0,0 +1,94 @@
+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 type { TemplateResult } from 'lit';
+import { html } from 'lit';
+
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { breakpoints } from '../../core/dom.js';
+
+import { SbbDialogTitleElement } from './dialog-title.js';
+import readme from './readme.md?raw';
+
+const level: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: [1, 2, 3, 4, 5, 6],
+};
+
+const backButton: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
+const hideOnScroll: InputType = {
+  control: {
+    type: 'select',
+  },
+  options: [...breakpoints],
+};
+
+const accessibilityCloseLabel: InputType = {
+  control: {
+    type: 'text',
+  },
+  table: {
+    category: 'Accessibility',
+  },
+};
+
+const accessibilityBackLabel: InputType = {
+  control: {
+    type: 'text',
+  },
+  table: {
+    category: 'Accessibility',
+  },
+};
+
+const defaultArgTypes: ArgTypes = {
+  level,
+  'back-button': backButton,
+  'hide-on-scroll': hideOnScroll,
+  'accessibility-close-label': accessibilityCloseLabel,
+  'accessibility-back-label': accessibilityBackLabel,
+};
+
+const defaultArgs: Args = {
+  'back-button': true,
+  'hide-on-scroll': hideOnScroll.options![0],
+  'accessibility-close-label': 'Close dialog',
+  'accessibility-back-label': 'Go back',
+};
+
+const Template = (args: Args): TemplateResult =>
+  html`<sbb-dialog-title ${sbbSpread(args)}>Dialog title</sbb-dialog-title>`;
+
+export const Default: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
+export const NoBackButton: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, 'back-button': false, 'accessibility-back-label': undefined },
+};
+
+const meta: Meta = {
+  decorators: [withActions as Decorator],
+  parameters: {
+    actions: {
+      handles: [SbbDialogTitleElement.events.backClick],
+    },
+    docs: {
+      extractComponentDescription: () => readme,
+    },
+  },
+  title: 'components/sbb-dialog/sbb-dialog-title',
+};
+
+export default meta;
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
new file mode 100644
index 0000000000..8514883db3
--- /dev/null
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -0,0 +1,126 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { html, unsafeStatic } from 'lit/static-html.js';
+
+import { SbbFocusVisibleWithinController } from '../../core/a11y.js';
+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 { SbbTitleBase } from '../../title.js';
+
+import style from './dialog-title.scss?lit&inline';
+
+import '../../button/secondary-button.js';
+import '../../button/transparent-button.js';
+
+/**
+ * It displays a title inside a dialog header.
+ *
+ * @event {CustomEvent<void>} requestBackAction - Emits whenever the back button is clicked.
+ */
+@customElement('sbb-dialog-title')
+export class SbbDialogTitleElement extends SbbTitleBase {
+  public static override styles: CSSResultGroup = [SbbTitleBase.styles, style];
+  public static readonly events: Record<string, string> = {
+    backClick: 'requestBackAction',
+  } as const;
+
+  /**
+   * Whether a back button is displayed next to the title.
+   */
+  @property({ attribute: 'back-button', type: Boolean }) public backButton = false;
+
+  /**
+   * This will be forwarded as aria-label to the close button element.
+   */
+  @property({ attribute: 'accessibility-close-label' }) public accessibilityCloseLabel:
+    | string
+    | undefined;
+
+  /**
+   * This will be forwarded as aria-label to the back button element.
+   */
+  @property({ attribute: 'accessibility-back-label' }) public accessibilityBackLabel:
+    | string
+    | undefined;
+
+  /**
+   * Whether to hide the title up to a certain breakpoint.
+   */
+  @property({ attribute: 'hide-on-scroll' })
+  public set hideOnScroll(value: '' | Breakpoint | boolean) {
+    this._hideOnScroll = value === '' ? true : value;
+  }
+  public get hideOnScroll(): Breakpoint | boolean {
+    return this._hideOnScroll;
+  }
+  private _hideOnScroll: Breakpoint | boolean = false;
+
+  private _backClick: EventEmitter<any> = new EventEmitter(
+    this,
+    SbbDialogTitleElement.events.backClick,
+  );
+  private _language = new SbbLanguageController(this);
+
+  public constructor() {
+    super();
+    this.level = '2';
+    this.visualLevel = '3';
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    new SbbFocusVisibleWithinController(this);
+  }
+
+  protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('backButton') || changedProperties.has('accessibilityBackLabel')) {
+      this.backButton = !this.backButton && !!this.accessibilityBackLabel ? true : this.backButton;
+    }
+  }
+
+  protected override render(): TemplateResult {
+    const TAG_NAME = this.negative ? 'sbb-transparent-button' : 'sbb-secondary-button';
+
+    /* eslint-disable lit/binding-positions */
+    const closeButton = html`
+      <${unsafeStatic(TAG_NAME)}
+        class="sbb-dialog__close"
+        aria-label=${this.accessibilityCloseLabel || i18nCloseDialog[this._language.current]}
+        ?negative=${this.negative}
+        size="m"
+        type="button"
+        icon-name="cross-small"
+        sbb-dialog-close
+      ></${unsafeStatic(TAG_NAME)}>
+    `;
+
+    const backButton = html`
+      <${unsafeStatic(TAG_NAME)}
+        class="sbb-dialog__back"
+        aria-label=${this.accessibilityBackLabel || i18nGoBack[this._language.current]}
+        ?negative=${this.negative}
+        size="m"
+        type="button"
+        icon-name="chevron-small-left-small"
+        @click=${() => this._backClick.emit()}
+      ></${unsafeStatic(TAG_NAME)}>
+    `;
+    /* eslint-enable lit/binding-positions */
+
+    return html`
+      <div class="sbb-dialog__header">
+        ${this.backButton ? backButton : nothing} ${super.render()} ${closeButton}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-dialog-title': SbbDialogTitleElement;
+  }
+}
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
new file mode 100644
index 0000000000..4bdcc0838c
--- /dev/null
+++ b/src/components/dialog/dialog-title/readme.md
@@ -0,0 +1,66 @@
+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>
+  <sbb-dialog-title
+    back-button
+    accessibility-close-label="Close button"
+    accessibility-back-label="Back button"
+  >
+    A describing title of the dialog
+  </sbb-dialog-title>
+</sbb-dialog>
+```
+
+## States
+
+The title can have a `negative` state which is automatically synchronized with the negative state of the dialog.
+
+In addition, the title can be hidden when scrolling down the content, to provide more space for reading the content itself; this can be done thanks to the `hide-on-scroll` property, which can determine whether to hide the title and up to which breakpoint.
+
+```html
+<sbb-dialog>
+  <sbb-dialog-title hide-on-scroll="small"> A describing title of the dialog </sbb-dialog-title>
+</sbb-dialog>
+```
+
+## Interactions
+
+A close button is always displayed and can be used to close the dialog. Optionally, a back button can be shown with the property `back-button` (default is `false`). Note that setting an `accessibilityBackLabel` will also display a back button.
+
+```html
+<sbb-dialog>
+  <sbb-dialog-title back-button> A describing title of the dialog </sbb-dialog-title>
+</sbb-dialog>
+```
+
+## Events
+
+If a back button is displayed it emits a `requestBackAction` event on click.
+
+<!-- Auto Generated Below -->
+
+## 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. |
+
+## Events
+
+| Name                | Type                | Description                                | Inherited From |
+| ------------------- | ------------------- | ------------------------------------------ | -------------- |
+| `requestBackAction` | `CustomEvent<void>` | Emits whenever the back button is clicked. |                |
+
+## Slots
+
+| Name | Description                                |
+| ---- | ------------------------------------------ |
+|      | Use the unnamed slot to display the title. |
diff --git a/src/components/dialog/dialog.spec.ts b/src/components/dialog/dialog.spec.ts
deleted file mode 100644
index b3895e5293..0000000000
--- a/src/components/dialog/dialog.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { expect } from '@open-wc/testing';
-import { html } from 'lit/static-html.js';
-
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
-
-import './dialog';
-
-describe(`sbb-dialog`, () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog></sbb-dialog>`);
-
-    expect(root).dom.to.be.equal(`<sbb-dialog data-state="closed" data-fullscreen></sbb-dialog>`);
-
-    await expect(root).shadowDom.to.be.equalSnapshot();
-  });
-
-  testA11yTreeSnapshot(html`<sbb-dialog></sbb-dialog>`);
-});
diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts
deleted file mode 100644
index 66abdd4545..0000000000
--- a/src/components/dialog/dialog.stories.ts
+++ /dev/null
@@ -1,415 +0,0 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/test';
-import type { InputType } from '@storybook/types';
-import type {
-  Meta,
-  StoryObj,
-  ArgTypes,
-  Args,
-  Decorator,
-  StoryContext,
-} from '@storybook/web-components';
-import isChromatic from 'chromatic';
-import type { TemplateResult } from 'lit';
-import { html } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
-
-import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready';
-import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position';
-import { sbbSpread } from '../core/dom';
-import sampleImages from '../core/images';
-
-import { SbbDialogElement } from './dialog';
-import readme from './readme.md?raw';
-
-import '../button/secondary-button';
-import '../button/button';
-import '../link/block-link';
-import '../title';
-import '../form-field';
-import '../image';
-import '../action-group';
-
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await waitForComponentsReady(() =>
-    canvas.getByTestId('dialog').shadowRoot!.querySelector('.sbb-dialog'),
-  );
-
-  await waitForStablePosition(() => canvas.getByTestId('dialog-trigger'));
-
-  const button = canvas.getByTestId('dialog-trigger');
-  await userEvent.click(button);
-};
-
-const titleContent: InputType = {
-  control: {
-    type: 'text',
-  },
-};
-
-const titleLevel: InputType = {
-  control: {
-    type: 'inline-radio',
-  },
-  options: [1, 2, 3, 4, 5, 6],
-};
-
-const titleBackButton: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
-const negative: InputType = {
-  control: {
-    type: 'boolean',
-  },
-};
-
-const accessibilityLabel: InputType = {
-  control: {
-    type: 'text',
-  },
-  table: {
-    category: 'Accessibility',
-  },
-};
-
-const accessibilityCloseLabel: InputType = {
-  control: {
-    type: 'text',
-  },
-  table: {
-    category: 'Accessibility',
-  },
-};
-
-const accessibilityBackLabel: InputType = {
-  control: {
-    type: 'text',
-  },
-  table: {
-    category: 'Accessibility',
-  },
-};
-
-const backdropAction: InputType = {
-  control: {
-    type: 'select',
-  },
-  options: ['close', 'none'],
-};
-
-const basicArgTypes: ArgTypes = {
-  'title-content': titleContent,
-  'title-level': titleLevel,
-  'title-back-button': titleBackButton,
-  negative,
-  'accessibility-label': accessibilityLabel,
-  'accessibility-close-label': accessibilityCloseLabel,
-  'accessibility-back-label': accessibilityBackLabel,
-  'backdrop-action': backdropAction,
-};
-
-const basicArgs: Args = {
-  'title-content': 'A describing title of the dialog',
-  'title-level': undefined,
-  'title-back-button': true,
-  negative: false,
-  'accessibility-label': undefined,
-  'accessibility-close-label': undefined,
-  'accessibility-back-label': undefined,
-  'backdrop-action': backdropAction.options[0],
-};
-
-const openDialog = (_event: PointerEvent, id: string): void => {
-  const dialog = document.getElementById(id) as SbbDialogElement;
-  dialog.open();
-};
-
-const triggerButton = (dialogId: string): TemplateResult => html`
-  <sbb-button
-    data-testid="dialog-trigger"
-    size="m"
-    type="button"
-    @click=${(event: PointerEvent) => openDialog(event, dialogId)}
-  >
-    Open dialog
-  </sbb-button>
-`;
-
-const actionGroup = (negative: boolean): TemplateResult => html`
-  <sbb-action-group
-    slot="action-group"
-    align-group="stretch"
-    orientation="vertical"
-    horizontal-from="medium"
-  >
-    <sbb-block-link
-      align-self="start"
-      icon-name="chevron-small-left-small"
-      href="https://www.sbb.ch/en/"
-      ?negative=${negative}
-      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-action-group>
-`;
-
-const codeStyle: Args = {
-  padding: 'var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x)',
-  borderRadius: 'var(--sbb-border-radius-4x)',
-  backgroundColor: 'var(--sbb-color-smoke-alpha-20)',
-};
-
-const formDetailsStyle: Args = {
-  marginTop: 'var(--sbb-spacing-fixed-4x)',
-  padding: 'var(--sbb-spacing-fixed-4x)',
-  borderRadius: 'var(--sbb-border-radius-8x)',
-  backgroundColor: 'var(--sbb-color-milk)',
-};
-
-const formStyle: Args = {
-  display: 'flex',
-  flexWrap: 'wrap',
-  alignItems: 'center',
-  gap: 'var(--sbb-spacing-fixed-4x)',
-};
-
-const DefaultTemplate = (args: Args): TemplateResult => html`
-  ${triggerButton('my-dialog-1')}
-  <sbb-dialog data-testid="dialog" id="my-dialog-1" ${sbbSpread(args)}>
-    <p id="dialog-content-1" style=${styleMap({ margin: '0' })}>Dialog content</p>
-    ${actionGroup(args.negative)}
-  </sbb-dialog>
-`;
-
-const SlottedTitleTemplate = (args: Args): TemplateResult => html`
-  ${triggerButton('my-dialog-2')}
-  <sbb-dialog data-testid="dialog" id="my-dialog-2" ${sbbSpread(args)}>
-    <span slot="title">
-      <sbb-icon name="book-medium" style=${styleMap({ 'vertical-align': 'sub' })}></sbb-icon>
-      The Catcher in the Rye
-    </span>
-    <p id="dialog-content-2" style=${styleMap({ margin: '0' })}>
-      “What really knocks me out is a book that, when you're all done reading it, you wish the
-      author that wrote it was a terrific friend of yours and you could call him up on the phone
-      whenever you felt like it. That doesn't happen much, though.” ― J.D. Salinger, The Catcher in
-      the Rye
-    </p>
-    ${actionGroup(args.negative)}
-  </sbb-dialog>
-`;
-
-const LongContentTemplate = (args: Args): TemplateResult => html`
-  ${triggerButton('my-dialog-3')}
-  <sbb-dialog data-testid="dialog" id="my-dialog-3" ${sbbSpread(args)}>
-    Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
-    like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
-    Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad in
-    elven-mail, and a star shone on his breast. They spoke together, and then suddenly it seemed to
-    Frodo that Arwen turned towards him, and the light of her eyes fell on him from afar and pierced
-    his heart.
-    <sbb-image
-      style=${styleMap({ 'margin-block': '1rem' })}
-      image-src=${sampleImages[1]}
-      alt="Natural landscape"
-      data-chromatic="ignore"
-    ></sbb-image>
-    He stood still enchanted, while the sweet syllables of the elvish song fell like clear jewels of
-    blended word and melody. 'It is a song to Elbereth,'' said Bilbo. 'They will sing that, and
-    other songs of the Blessed Realm, many times tonight. Come on!’ —J.R.R. Tolkien, The Lord of the
-    Rings: The Fellowship of the Ring, “Many Meetings” ${actionGroup(args.negative)}
-  </sbb-dialog>
-`;
-
-const FormTemplate = (args: Args): TemplateResult => html`
-  ${triggerButton('my-dialog-4')}
-  <div id="returned-value">
-    <div style=${styleMap(formDetailsStyle)}>
-      <div>Your message: <span id="returned-value-message">Hello 👋</span></div>
-      <div>Your favorite animal: <span id="returned-value-animal">Red Panda</span></div>
-    </div>
-  </div>
-  <sbb-dialog
-    data-testid="dialog"
-    id="my-dialog-4"
-    @willClose=${(event: CustomEvent) => {
-      if (event.detail) {
-        document.getElementById('returned-value-message')!.innerHTML =
-          `${event.detail.returnValue.message?.value}`;
-        document.getElementById('returned-value-animal')!.innerHTML =
-          `${event.detail.returnValue.animal?.value}`;
-      }
-    }}
-    ${sbbSpread(args)}
-  >
-    <div style=${styleMap({ 'margin-block-end': 'var(--sbb-spacing-fixed-4x)' })}>
-      Submit the form below to close the dialog box using the
-      <code style=${styleMap(codeStyle)}>close(result?: any, target?: HTMLElement)</code>
-      method and returning the form values to update the details.
-    </div>
-    <form style=${styleMap(formStyle)} @submit=${(e: SubmitEvent) => e.preventDefault()}>
-      <sbb-form-field error-space="none" size="m">
-        <label>Message</label>
-        <input placeholder="Your custom massage" value="Hello 👋" name="message" />
-      </sbb-form-field>
-      <sbb-form-field error-space="none" size="m">
-        <label>Favorite animal</label>
-        <select name="animal">
-          <option>Red Panda</option>
-          <option>Cheetah</option>
-          <option>Polar Bear</option>
-          <option>Elephant</option>
-        </select>
-      </sbb-form-field>
-      <sbb-button type="submit" size="m" sbb-dialog-close> Update details </sbb-button>
-    </form>
-  </sbb-dialog>
-`;
-
-const NoFooterTemplate = (args: Args): TemplateResult => html`
-  ${triggerButton('my-dialog-5')}
-  <sbb-dialog data-testid="dialog" id="my-dialog-5" ${sbbSpread(args)}>
-    <p id="dialog-content-5" style=${styleMap({ margin: '0' })}>
-      “What really knocks me out is a book that, when you're all done reading it, you wish the
-      author that wrote it was a terrific friend of yours and you could call him up on the phone
-      whenever you felt like it. That doesn't happen much, though.” ― J.D. Salinger, The Catcher in
-      the Rye
-    </p>
-  </sbb-dialog>
-`;
-
-const FullScreenTemplate = (args: Args): TemplateResult => html`
-  ${triggerButton('my-dialog-6')}
-  <sbb-dialog data-testid="dialog" id="my-dialog-6" ${sbbSpread(args)}>
-    <sbb-title
-      visual-level="2"
-      ?negative=${args.negative}
-      style=${styleMap({ 'margin-block-start': '0' })}
-    >
-      Many Meetings
-    </sbb-title>
-    Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
-    like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
-    Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad in
-    elven-mail, and a star shone on his breast. They spoke together, and then suddenly it seemed to
-    Frodo that Arwen turned towards him, and the light of her eyes fell on him from afar and pierced
-    his heart.
-    <sbb-image
-      style=${styleMap({ 'margin-block': '1rem' })}
-      image-src=${sampleImages[1]}
-      alt="Natural landscape"
-      data-chromatic="ignore"
-    ></sbb-image>
-    He stood still enchanted, while the sweet syllables of the elvish song fell like clear jewels of
-    blended word and melody. 'It is a song to Elbereth,'' said Bilbo. 'They will sing that, and
-    other songs of the Blessed Realm, many times tonight. Come on!’ —J.R.R. Tolkien, The Lord of the
-    Rings: The Fellowship of the Ring, “Many Meetings” ${actionGroup(args.negative)}
-  </sbb-dialog>
-`;
-
-export const Default: StoryObj = {
-  render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: basicArgs,
-  play: isChromatic() ? playStory : undefined,
-};
-
-export const Negative: StoryObj = {
-  render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: {
-    ...basicArgs,
-    negative: true,
-  },
-  play: isChromatic() ? playStory : undefined,
-};
-
-export const AllowBackdropClick: StoryObj = {
-  render: DefaultTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, 'backdrop-action': backdropAction.options[1] },
-  play: isChromatic() ? playStory : undefined,
-};
-
-export const SlottedTitle: StoryObj = {
-  render: SlottedTitleTemplate,
-  argTypes: basicArgTypes,
-  args: {
-    ...basicArgs,
-    'title-content': undefined,
-    'title-back-button': false,
-  },
-  play: isChromatic() ? playStory : undefined,
-};
-
-export const LongContent: StoryObj = {
-  render: LongContentTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs },
-  play: isChromatic() ? playStory : undefined,
-};
-
-export const Form: StoryObj = {
-  render: FormTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs },
-  play: isChromatic() ? playStory : undefined,
-};
-
-export const NoFooter: StoryObj = {
-  render: NoFooterTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs },
-  play: isChromatic() ? playStory : undefined,
-};
-
-export const FullScreen: StoryObj = {
-  render: FullScreenTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, 'title-content': undefined },
-  play: isChromatic() ? playStory : undefined,
-};
-
-const meta: Meta = {
-  decorators: [
-    (story) => html`
-      <div
-        style=${styleMap({ padding: '2rem', 'min-height': isChromatic() ? '100vh' : undefined })}
-      >
-        ${story()}
-      </div>
-    `,
-    withActions as Decorator,
-  ],
-  parameters: {
-    chromatic: { disableSnapshot: false },
-    actions: {
-      handles: [
-        SbbDialogElement.events.willOpen,
-        SbbDialogElement.events.didOpen,
-        SbbDialogElement.events.willClose,
-        SbbDialogElement.events.didClose,
-        SbbDialogElement.events.backClick,
-      ],
-    },
-    backgrounds: {
-      disable: true,
-    },
-    docs: {
-      story: { inline: false, iframeHeight: '600px' },
-      extractComponentDescription: () => readme,
-    },
-    layout: 'fullscreen',
-  },
-  title: 'components/sbb-dialog',
-};
-
-export default meta;
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 6da9b0fb08..2248ae2acd 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -1,465 +1 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
-import { LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ref } from 'lit/directives/ref.js';
-import { html, unsafeStatic } from 'lit/static-html.js';
-
-import { FocusHandler, IS_FOCUSABLE_QUERY, setModalityOnNextFocus } from '../core/a11y';
-import {
-  LanguageController,
-  NamedSlotStateController,
-  SbbNegativeMixin,
-} from '../core/common-behaviors';
-import { ScrollHandler, isValidAttribute, hostContext, setAttribute } from '../core/dom';
-import { EventEmitter } from '../core/eventing';
-import { i18nCloseDialog, i18nDialog, i18nGoBack } from '../core/i18n';
-import { AgnosticResizeObserver } from '../core/observers';
-import type { SbbOverlayState } from '../core/overlay';
-import { applyInertMechanism, removeInertMechanism } from '../core/overlay';
-import type { SbbTitleLevel } from '../title';
-
-import style from './dialog.scss?lit&inline';
-
-import '../button/secondary-button';
-import '../button/transparent-button';
-import '../screen-reader-only';
-import '../title';
-
-// A global collection of existing dialogs
-const dialogRefs: SbbDialogElement[] = [];
-let nextId = 0;
-
-/**
- * It displays an interactive overlay element.
- *
- * @slot - Use the unnamed slot to add content to the `sbb-dialog`.
- * @slot title - Use this slot to provide a title.
- * @slot action-group - Use this slot to display a `sbb-action-group` in the footer.
- * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled.
- * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-dialog` is opened.
- * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled.
- * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-dialog` is closed.
- * @event {CustomEvent<void>} requestBackAction - Emits whenever the back button is clicked.
- * @cssprop [--sbb-dialog-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
- * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
- * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
- */
-@customElement('sbb-dialog')
-export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
-  public static override styles: CSSResultGroup = style;
-  public static readonly events = {
-    willOpen: 'willOpen',
-    didOpen: 'didOpen',
-    willClose: 'willClose',
-    didClose: 'didClose',
-    backClick: 'requestBackAction',
-  } as const;
-
-  /**
-   * Dialog title.
-   */
-  @property({ attribute: 'title-content', reflect: true }) public titleContent?: string;
-
-  /**
-   * Level of title, will be rendered as heading tag (e.g. h1). Defaults to level 1.
-   */
-  @property({ attribute: 'title-level' }) public titleLevel: SbbTitleLevel = '1';
-
-  /**
-   * Whether a back button is displayed next to the title.
-   */
-  @property({ attribute: 'title-back-button', type: Boolean }) public titleBackButton = false;
-
-  /**
-   * Backdrop click action.
-   */
-  @property({ attribute: 'backdrop-action' }) public backdropAction: 'close' | 'none' = 'close';
-
-  /**
-   * This will be forwarded as aria-label to the relevant nested element.
-   */
-  @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined;
-
-  /**
-   * This will be forwarded as aria-label to the close button element.
-   */
-  @property({ attribute: 'accessibility-close-label' }) public accessibilityCloseLabel:
-    | string
-    | undefined;
-
-  /**
-   * This will be forwarded as aria-label to the back button element.
-   */
-  @property({ attribute: 'accessibility-back-label' }) public accessibilityBackLabel:
-    | string
-    | undefined;
-
-  /*
-   * The state of the dialog.
-   */
-  private set _state(state: SbbOverlayState) {
-    this.dataset.state = state;
-  }
-  private get _state(): SbbOverlayState {
-    return this.dataset?.state as SbbOverlayState;
-  }
-
-  private get _hasTitle(): boolean {
-    return !!this.titleContent || this._namedSlots.slots.has('title');
-  }
-
-  private _dialogContentResizeObserver = new AgnosticResizeObserver(() =>
-    this._setOverflowAttribute(),
-  );
-
-  private _ariaLiveRef!: HTMLElement;
-  private _ariaLiveRefToggle = false;
-
-  /** Emits whenever the `sbb-dialog` starts the opening transition. */
-  private _willOpen: EventEmitter<void> = new EventEmitter(this, SbbDialogElement.events.willOpen);
-
-  /** Emits whenever the `sbb-dialog` is opened. */
-  private _didOpen: EventEmitter<void> = new EventEmitter(this, SbbDialogElement.events.didOpen);
-
-  /** Emits whenever the `sbb-dialog` begins the closing transition. */
-  private _willClose: EventEmitter = new EventEmitter(this, SbbDialogElement.events.willClose);
-
-  /** Emits whenever the `sbb-dialog` is closed. */
-  private _didClose: EventEmitter = new EventEmitter(this, SbbDialogElement.events.didClose);
-
-  /** Emits whenever the back button is clicked. */
-  private _backClick: EventEmitter<void> = new EventEmitter(
-    this,
-    SbbDialogElement.events.backClick,
-  );
-
-  private _dialog!: HTMLDivElement;
-  private _dialogWrapperElement!: HTMLElement;
-  private _dialogContentElement!: HTMLElement;
-  private _dialogCloseElement?: HTMLElement;
-  private _dialogController!: AbortController;
-  private _windowEventsController!: AbortController;
-  private _focusHandler = new FocusHandler();
-  private _scrollHandler = new ScrollHandler();
-  private _returnValue: any;
-  private _isPointerDownEventOnDialog: boolean = false;
-  private _dialogId = `sbb-dialog-${nextId++}`;
-
-  // Last element which had focus before the dialog was opened.
-  private _lastFocusedElement?: HTMLElement;
-
-  private _language = new LanguageController(this);
-  private _namedSlots = new NamedSlotStateController(this, () =>
-    setAttribute(this, 'data-fullscreen', !this._hasTitle),
-  );
-
-  /**
-   * Opens the dialog element.
-   */
-  public open(): void {
-    if (this._state !== 'closed' || !this._dialog) {
-      return;
-    }
-    this._lastFocusedElement = document.activeElement as HTMLElement;
-
-    if (!this._willOpen.emit()) {
-      return;
-    }
-    this._state = 'opening';
-
-    // Add this dialog to the global collection
-    dialogRefs.push(this as SbbDialogElement);
-    this._setOverflowAttribute();
-
-    // Disable scrolling for content below the dialog
-    this._scrollHandler.disableScroll();
-  }
-
-  /**
-   * Closes the dialog element.
-   */
-  public close(result?: any, target?: HTMLElement): any {
-    if (this._state !== 'opened') {
-      return;
-    }
-
-    this._returnValue = result;
-    this._dialogCloseElement = target;
-    const eventData = {
-      returnValue: this._returnValue,
-      closeTarget: this._dialogCloseElement,
-    };
-
-    if (!this._willClose.emit(eventData)) {
-      return;
-    }
-    this._state = 'closing';
-    this._removeAriaLiveRefContent();
-  }
-
-  // Closes the dialog on "Esc" key pressed.
-  private _onKeydownEvent(event: KeyboardEvent): void {
-    if (this._state !== 'opened') {
-      return;
-    }
-
-    if (event.key === 'Escape') {
-      dialogRefs[dialogRefs.length - 1].close();
-      return;
-    }
-  }
-
-  public override connectedCallback(): void {
-    super.connectedCallback();
-    this._state = this._state || 'closed';
-    this._dialogController?.abort();
-    this._dialogController = new AbortController();
-
-    // Close dialog on backdrop click
-    this.addEventListener('pointerdown', this._pointerDownListener, {
-      signal: this._dialogController.signal,
-    });
-    this.addEventListener('pointerup', this._closeOnBackdropClick, {
-      signal: this._dialogController.signal,
-    });
-
-    if (this._state === 'opened') {
-      applyInertMechanism(this);
-    }
-  }
-
-  public override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._dialogController?.abort();
-    this._windowEventsController?.abort();
-    this._focusHandler.disconnect();
-    this._dialogContentResizeObserver.disconnect();
-    this._removeInstanceFromGlobalCollection();
-    removeInertMechanism();
-  }
-
-  private _removeInstanceFromGlobalCollection(): void {
-    dialogRefs.splice(dialogRefs.indexOf(this as SbbDialogElement), 1);
-  }
-
-  private _attachWindowEvents(): void {
-    this._windowEventsController = new AbortController();
-    // Remove dialog label as soon as it is not needed anymore to prevent accessing it with browse mode.
-    window.addEventListener(
-      'keydown',
-      async (event: KeyboardEvent) => {
-        this._removeAriaLiveRefContent();
-        await this._onKeydownEvent(event);
-      },
-      {
-        signal: this._windowEventsController.signal,
-      },
-    );
-    window.addEventListener('click', () => this._removeAriaLiveRefContent(), {
-      signal: this._windowEventsController.signal,
-    });
-  }
-
-  // Check if the pointerdown event target is triggered on the dialog.
-  private _pointerDownListener = (event: PointerEvent): void => {
-    if (this.backdropAction !== 'close') {
-      return;
-    }
-
-    this._isPointerDownEventOnDialog = event
-      .composedPath()
-      .filter((e): e is HTMLElement => e instanceof window.HTMLElement)
-      .some((target) => target.id === this._dialogId);
-  };
-
-  // Close dialog on backdrop click.
-  private _closeOnBackdropClick = (event: PointerEvent): void => {
-    if (this.backdropAction !== 'close') {
-      return;
-    }
-
-    if (
-      !this._isPointerDownEventOnDialog &&
-      !event
-        .composedPath()
-        .filter((e): e is HTMLElement => e instanceof window.HTMLElement)
-        .some((target) => target.id === this._dialogId)
-    ) {
-      this.close();
-    }
-  };
-
-  // Close the dialog on click of any element that has the 'sbb-dialog-close' attribute.
-  private _closeOnSbbDialogCloseClick(event: Event): void {
-    const target = event.target as HTMLElement;
-
-    if (target.hasAttribute('sbb-dialog-close') && !isValidAttribute(target, 'disabled')) {
-      // Check if the target is a submission element within a form and return the form, if present
-      const closestForm =
-        target.getAttribute('type') === 'submit'
-          ? (hostContext('form', target) as HTMLFormElement)
-          : undefined;
-      this.close(closestForm, target);
-    }
-  }
-
-  // Wait for dialog transition to complete.
-  // In rare cases it can be that the animationEnd event is triggered twice.
-  // To avoid entering a corrupt state, exit when state is not expected.
-  private _onDialogAnimationEnd(event: AnimationEvent): void {
-    if (event.animationName === 'open' && this._state === 'opening') {
-      this._state = 'opened';
-      this._didOpen.emit();
-      applyInertMechanism(this);
-      this._setDialogFocus();
-      // Use timeout to read label after focused element
-      setTimeout(() => this._setAriaLiveRefContent());
-      this._focusHandler.trap(this);
-      this._dialogContentResizeObserver.observe(this._dialogContentElement);
-      this._attachWindowEvents();
-    } else if (event.animationName === 'close' && this._state === 'closing') {
-      this._state = 'closed';
-      this._dialogWrapperElement.querySelector('.sbb-dialog__content')?.scrollTo(0, 0);
-      removeInertMechanism();
-      setModalityOnNextFocus(this._lastFocusedElement);
-      // Manually focus last focused element
-      this._lastFocusedElement?.focus();
-      this._didClose.emit({
-        returnValue: this._returnValue,
-        closeTarget: this._dialogCloseElement,
-      });
-      this._windowEventsController?.abort();
-      this._focusHandler.disconnect();
-      this._dialogContentResizeObserver.disconnect();
-      this._removeInstanceFromGlobalCollection();
-      // Enable scrolling for content below the dialog if no dialog is open
-      !dialogRefs.length && this._scrollHandler.enableScroll();
-    }
-  }
-
-  private _setAriaLiveRefContent(): void {
-    this._ariaLiveRefToggle = !this._ariaLiveRefToggle;
-
-    // Take accessibility label or current string in title section
-    const label =
-      this.accessibilityLabel ||
-      (this.shadowRoot!.querySelector('.sbb-dialog__title') as HTMLElement)?.innerText.trim();
-
-    // If the text content remains the same, on VoiceOver the aria-live region is not announced a second time.
-    // In order to support reading on every opening, we toggle an invisible space.
-    this._ariaLiveRef.textContent = `${i18nDialog[this._language.current]}${
-      label ? `, ${label}` : ''
-    }${this._ariaLiveRefToggle ? ' ' : ''}`;
-  }
-
-  private _removeAriaLiveRefContent(): void {
-    this._ariaLiveRef.textContent = '';
-  }
-
-  // Set focus on the first focusable element.
-  private _setDialogFocus(): void {
-    const firstFocusable = this.shadowRoot!.querySelector(IS_FOCUSABLE_QUERY) as HTMLElement;
-    setModalityOnNextFocus(firstFocusable);
-    firstFocusable.focus();
-  }
-
-  private _setOverflowAttribute(): void {
-    this.toggleAttribute(
-      'data-overflows',
-      this._dialogContentElement.scrollHeight > this._dialogContentElement.clientHeight,
-    );
-  }
-
-  protected override render(): TemplateResult {
-    const TAG_NAME = this.negative ? 'sbb-transparent-button' : 'sbb-secondary-button';
-
-    /* eslint-disable lit/binding-positions */
-    const closeButton = html`
-      <${unsafeStatic(TAG_NAME)}
-        class="sbb-dialog__close"
-        aria-label=${this.accessibilityCloseLabel || i18nCloseDialog[this._language.current]}
-        ?negative=${this.negative}
-        size="m"
-        type="button"
-        icon-name="cross-small"
-        sbb-dialog-close
-      ></${unsafeStatic(TAG_NAME)}>
-    `;
-
-    const backButton = html`
-      <${unsafeStatic(TAG_NAME)}
-        class="sbb-dialog__back"
-        aria-label=${this.accessibilityBackLabel || i18nGoBack[this._language.current]}
-        ?negative=${this.negative}
-        size="m"
-        type="button"
-        icon-name="chevron-small-left-small"
-        @click=${() => this._backClick.emit()}
-      ></${unsafeStatic(TAG_NAME)}>
-    `;
-    /* eslint-enable lit/binding-positions */
-
-    const dialogHeader = html`
-      <div class="sbb-dialog__header">
-        ${this.titleBackButton ? backButton : nothing}
-        <sbb-title
-          class="sbb-dialog__title"
-          level=${this.titleLevel}
-          visual-level="3"
-          ?negative=${this.negative}
-          id="title"
-        >
-          <slot name="title">${this.titleContent}</slot>
-        </sbb-title>
-        ${closeButton}
-      </div>
-    `;
-
-    setAttribute(this, 'data-fullscreen', !this._hasTitle);
-
-    return html`
-      <div class="sbb-dialog__container">
-        <div
-          @animationend=${(event: AnimationEvent) => this._onDialogAnimationEnd(event)}
-          class="sbb-dialog"
-          id=${this._dialogId}
-          ${ref((dialogRef?: Element) => (this._dialog = dialogRef as HTMLDivElement))}
-        >
-          <div
-            @click=${(event: Event) => this._closeOnSbbDialogCloseClick(event)}
-            class="sbb-dialog__wrapper"
-            ${ref(
-              (dialogWrapperRef?: Element) =>
-                (this._dialogWrapperElement = dialogWrapperRef as HTMLElement),
-            )}
-          >
-            ${dialogHeader}
-            <div
-              class="sbb-dialog__content"
-              ${ref(
-                (dialogContent?: Element) =>
-                  (this._dialogContentElement = dialogContent as HTMLElement),
-              )}
-            >
-              <slot></slot>
-            </div>
-            <div class="sbb-dialog__footer">
-              <slot name="action-group"></slot>
-            </div>
-          </div>
-        </div>
-      </div>
-      <sbb-screen-reader-only
-        aria-live="polite"
-        ${ref((el?: Element) => (this._ariaLiveRef = el as HTMLElement))}
-      ></sbb-screen-reader-only>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    'sbb-dialog': SbbDialogElement;
-  }
-}
+export * from './dialog/dialog.js';
diff --git a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
new file mode 100644
index 0000000000..f7f34903d8
--- /dev/null
+++ b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
@@ -0,0 +1,123 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-dialog renders an open dialog Dom"] = 
+`<sbb-dialog data-state="opening">
+  <sbb-dialog-title
+    level="2"
+    role="heading"
+    visual-level="3"
+  >
+    Title
+  </sbb-dialog-title>
+  <sbb-dialog-content>
+    Content
+  </sbb-dialog-content>
+</sbb-dialog>
+`;
+/* end snapshot sbb-dialog renders an open dialog Dom */
+
+snapshots["sbb-dialog renders an open dialog ShadowDom"] = 
+`<div class="sbb-dialog__container">
+  <div
+    class="sbb-dialog"
+    id="sbb-dialog-1"
+  >
+    <div class="sbb-dialog__wrapper">
+      <slot>
+      </slot>
+    </div>
+  </div>
+</div>
+<sbb-screen-reader-only aria-live="polite">
+</sbb-screen-reader-only>
+`;
+/* end snapshot sbb-dialog renders an open dialog ShadowDom */
+
+snapshots["sbb-dialog renders an open dialog A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Title"
+    },
+    {
+      "role": "button",
+      "name": "Close secondary window",
+      "focused": true
+    },
+    {
+      "role": "text",
+      "name": "Content"
+    },
+    {
+      "role": "text",
+      "name": "Dialog, Title "
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-dialog renders an open dialog A11y tree Chrome */
+
+snapshots["sbb-dialog renders an open dialog A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Title"
+    },
+    {
+      "role": "button",
+      "name": "Close secondary window",
+      "focused": true
+    },
+    {
+      "role": "text leaf",
+      "name": "Content"
+    },
+    {
+      "role": "text leaf",
+      "name": "Dialog, Title "
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-dialog renders an open dialog A11y tree Firefox */
+
+snapshots["sbb-dialog renders an open dialog A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Title"
+    },
+    {
+      "role": "text",
+      "name": "Content"
+    },
+    {
+      "role": "button",
+      "name": "Close secondary window",
+      "focused": true
+    },
+    {
+      "role": "text",
+      "name": "Dialog, Title "
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-dialog renders an open dialog A11y tree Safari */
+
diff --git a/src/components/dialog/dialog.e2e.ts b/src/components/dialog/dialog/dialog.e2e.ts
similarity index 74%
rename from src/components/dialog/dialog.e2e.ts
rename to src/components/dialog/dialog/dialog.e2e.ts
index d9e1338e5b..77b550f3ec 100644
--- a/src/components/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog/dialog.e2e.ts
@@ -1,13 +1,16 @@
-import { assert, expect } from '@open-wc/testing';
+import { assert, expect, fixture } from '@open-wc/testing';
 import { sendKeys, setViewport } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { i18nDialog } from '../core/i18n';
-import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import { i18nDialog } from '../../core/i18n.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbDialogElement } from './dialog';
-import '../title';
+import { SbbDialogElement } from './dialog.js';
+import '../../button.js';
+import '../../icon.js';
+import '../dialog-title.js';
+import '../dialog-content.js';
+import '../dialog-actions.js';
 
 async function openDialog(element: SbbDialogElement): Promise<void> {
   const willOpen = new EventSpy(SbbDialogElement.events.willOpen);
@@ -27,20 +30,18 @@ async function openDialog(element: SbbDialogElement): Promise<void> {
   expect(element).to.have.attribute('data-state', 'opened');
 }
 
-describe(`sbb-dialog with ${fixture.name}`, () => {
+describe('sbb-dialog', () => {
   let element: SbbDialogElement, ariaLiveRef: HTMLElement;
 
   beforeEach(async () => {
     await setViewport({ width: 900, height: 600 });
-    element = await fixture(
-      html`
-        <sbb-dialog id="my-dialog-1" title-content="Title">
-          Dialog content.
-          <div slot="action-group">Action group</div>
-        </sbb-dialog>
-      `,
-      { modules: ['./dialog.ts'] },
-    );
+    element = await fixture(html`
+      <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>
+      </sbb-dialog>
+    `);
     ariaLiveRef = element.shadowRoot!.querySelector('sbb-screen-reader-only')!;
   });
 
@@ -201,7 +202,9 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
   });
 
   it('closes the dialog on close button click', async () => {
-    const closeButton = element.shadowRoot!.querySelector('[sbb-dialog-close]') as HTMLElement;
+    const closeButton = element
+      .querySelector('sbb-dialog-title')!
+      .shadowRoot!.querySelector('[sbb-dialog-close]') as HTMLElement;
     const willClose = new EventSpy(SbbDialogElement.events.willClose);
     const didClose = new EventSpy(SbbDialogElement.events.didClose);
 
@@ -244,43 +247,20 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
     expect(element).to.have.attribute('data-state', 'closed');
   });
 
-  it('does not have the fullscreen attribute', async () => {
-    await openDialog(element);
-
-    expect(element).not.to.have.attribute('data-fullscreen');
-  });
-
-  it('renders in fullscreen mode if no title is provided', async () => {
-    element = await fixture(
-      html`
-        <sbb-dialog id="my-dialog-2">
-          Dialog content.
-          <div slot="action-group">Action group</div>
-        </sbb-dialog>
-      `,
-      { modules: ['./dialog.ts'] },
-    );
-    ariaLiveRef = element.shadowRoot!.querySelector('sbb-screen-reader-only')!;
-
-    await openDialog(element);
-
-    await waitForCondition(() => ariaLiveRef.textContent!.trim() === `${i18nDialog.en}`);
-
-    expect(element).to.have.attribute('data-fullscreen');
-  });
-
   it('closes stacked dialogs one by one on ESC key pressed', async () => {
-    element = await fixture(
-      html`
-        <sbb-dialog id="my-dialog-3" title-content="Title">
-          Dialog content.
-          <div slot="action-group">Action group</div>
-        </sbb-dialog>
-
-        <sbb-dialog id="stacked-dialog" title-content="Stacked title"> Stacked dialog. </sbb-dialog>
-      `,
-      { modules: ['./dialog.ts'] },
-    );
+    element = await fixture(html`
+      <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">
+        <sbb-dialog-title>Stacked title</sbb-dialog-title>
+        <sbb-dialog-content>Dialog content</sbb-dialog-content>
+        <sbb-dialog-actions>Action group</sbb-dialog-actions>
+      </sbb-dialog>
+    `);
 
     const willOpen = new EventSpy(SbbDialogElement.events.willOpen);
     const didOpen = new EventSpy(SbbDialogElement.events.didOpen);
@@ -289,8 +269,7 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
 
     await openDialog(element);
 
-    const stackedDialog =
-      element.parentElement!.querySelector<SbbDialogElement>('#stacked-dialog')!;
+    const stackedDialog = document.querySelector('#stacked-dialog') as SbbDialogElement;
 
     stackedDialog.open();
     await waitForLitRender(element);
@@ -342,19 +321,17 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
 
   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" title-content="Title">
-          Dialog content.
-          <div slot="action-group">Action group</div>
-          <sbb-dialog id="inner-dialog" title-content="Inner Dialog title">
-            Dialog content.
-            <div slot="action-group">Action group</div>
-          </sbb-dialog>
+    element = await fixture(html`
+      <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">
+          <sbb-dialog-title>Inner Dialog title</sbb-dialog-title>
+          <sbb-dialog-content>Dialog content</sbb-dialog-content>
         </sbb-dialog>
-      `,
-      { modules: ['./dialog.ts'] },
-    );
+      </sbb-dialog>
+    `);
     const willOpen = new EventSpy(SbbDialogElement.events.willOpen);
     const didOpen = new EventSpy(SbbDialogElement.events.didOpen);
     const willClose = new EventSpy(SbbDialogElement.events.willClose);
@@ -427,3 +404,62 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
     expect(ariaLiveRef.textContent!.trim()).to.be.equal(`${i18nDialog.en}, Special Dialog`);
   });
 });
+
+describe('sbb-dialog with long content', () => {
+  let element: SbbDialogElement;
+
+  beforeEach(async () => {
+    await setViewport({ width: 900, height: 300 });
+    element = await fixture(html`
+      <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
+          face like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo
+          saw that Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be
+          clad in elven-mail, and a star shone on his breast. They spoke together, and then suddenly
+          it seemed to Frodo that Arwen turned towards him, and the light of her eyes fell on him
+          from afar and pierced his heart. He stood still enchanted, while the sweet syllables of
+          the elvish song fell like clear jewels of blended word and melody. 'It is a song to
+          Elbereth,'' said Bilbo. 'They will sing that, and other songs of the Blessed Realm, many
+          times tonight. Come on!’ —J.R.R. Tolkien, The Lord of the Rings: The Fellowship of the
+          Ring, “Many Meetings” J.R.R. Tolkien, the mastermind behind Middle-earth's enchanting
+          world, was born on January 3, 1892. With "The Hobbit" and "The Lord of the Rings", he
+          pioneered fantasy literature. Tolkien's linguistic brilliance and mythic passion converge
+          in a literary legacy that continues to transport readers to magical realms.
+        </sbb-dialog-content>
+        <sbb-dialog-actions>Action group</sbb-dialog-actions>
+      </sbb-dialog>
+    `);
+  });
+
+  it('renders', () => {
+    assert.instanceOf(element, SbbDialogElement);
+  });
+
+  it('sets the data-overflows attribute', async () => {
+    await openDialog(element);
+
+    expect(element).to.have.attribute('data-state', 'opened');
+    expect(element).to.have.attribute('data-overflows', '');
+  });
+
+  it('shows/hides the dialog header on scroll', async () => {
+    await openDialog(element);
+    expect(element).not.to.have.attribute('data-hide-header');
+
+    const content = element.querySelector('sbb-dialog-content')!.shadowRoot!.firstElementChild!;
+
+    // Scroll down.
+    content.scrollTo(0, 50);
+    await waitForCondition(() => element.hasAttribute('data-hide-header'));
+
+    expect(element).to.have.attribute('data-hide-header');
+
+    // Scroll up.
+    content.scrollTo(0, 0);
+    await waitForCondition(() => !element.hasAttribute('data-hide-header'));
+
+    expect(element).not.to.have.attribute('data-hide-header');
+  });
+});
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog/dialog.scss
similarity index 59%
rename from src/components/dialog/dialog.scss
rename to src/components/dialog/dialog/dialog.scss
index a969be27e7..1e48171696 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog/dialog.scss
@@ -1,8 +1,7 @@
-@use '../core/styles' as sbb;
+@use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   @include sbb.scrollbar-variables;
@@ -27,12 +26,14 @@
   --sbb-dialog-backdrop-visibility: hidden;
   --sbb-dialog-backdrop-pointer-events: none;
   --sbb-dialog-backdrop-color: transparent;
-  --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s) 0;
-  --sbb-dialog-footer-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
+  --sbb-dialog-content-transition: transform var(--sbb-dialog-animation-duration)
+    var(--sbb-dialog-animation-easing);
+  --sbb-dialog-actions-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
 
+  display: block;
   position: fixed;
   inset: var(--sbb-dialog-inset);
-  z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-z-index));
+  z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index));
 
   @include sbb.mq($from: micro) {
     --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-6x);
@@ -62,10 +63,9 @@
   }
 }
 
-:host([data-fullscreen]) {
-  --sbb-dialog-backdrop-color: transparent;
-  --sbb-dialog-max-width: 100%;
-  --sbb-dialog-max-height: 100%;
+:host([data-hide-header]) {
+  // Hide transition
+  --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
 }
 
 :host([negative]) {
@@ -74,19 +74,11 @@
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
   --sbb-dialog-color: var(--sbb-color-white);
   --sbb-dialog-background-color: var(--sbb-color-midnight);
-  --sbb-dialog-footer-border: none;
+  --sbb-dialog-actions-border: none;
 }
 
-:host([data-fullscreen]:not([negative])) {
-  --sbb-dialog-background-color: var(--sbb-color-milk);
-}
-
-:host([data-overflows]:not([data-fullscreen])) {
-  --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s);
-}
-
-:host([data-overflows]:not([data-fullscreen], [negative])) {
-  --sbb-dialog-footer-border: none;
+:host([data-overflows]:not([negative])) {
+  --sbb-dialog-actions-border: none;
 }
 
 :host(:not([data-state='closed'])) {
@@ -131,10 +123,6 @@
   color: var(--sbb-dialog-color);
   background-color: var(--sbb-dialog-background-color);
 
-  :host([data-fullscreen]) & {
-    border-radius: 0;
-  }
-
   :host([data-state]:not([data-state='closed'])) & {
     display: block;
 
@@ -157,10 +145,7 @@
   @include sbb.mq($from: medium) {
     border-radius: var(--sbb-dialog-border-radius);
     overflow: hidden;
-
-    :host(:not([data-fullscreen])) & {
-      height: fit-content;
-    }
+    height: fit-content;
   }
 }
 
@@ -182,86 +167,6 @@
   }
 }
 
-.sbb-dialog__header {
-  display: flex;
-  pointer-events: none;
-  gap: var(--sbb-spacing-fixed-6x);
-  align-items: start;
-  justify-content: space-between;
-  padding-inline: var(--sbb-dialog-padding-inline);
-  padding-block: var(--sbb-dialog-header-padding-block);
-  background-color: var(--sbb-dialog-background-color);
-  z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-z-index));
-
-  * {
-    pointer-events: all;
-  }
-
-  :host([data-fullscreen]) & {
-    position: fixed;
-    width: var(--sbb-dialog-width);
-    background-color: transparent;
-    padding-inline: var(--sbb-spacing-responsive-xs);
-    padding-block-start: var(--sbb-spacing-responsive-xs);
-  }
-
-  @include sbb.mq($from: medium) {
-    border-radius: var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;
-  }
-}
-
-.sbb-dialog__title {
-  flex: 1;
-  overflow: hidden;
-  align-self: center;
-
-  // Overwrite sbb-title default margin
-  margin: 0;
-
-  :host(:not([data-slot-names~='title'], [title-content])) & {
-    display: none;
-  }
-}
-
-.sbb-dialog__close {
-  margin-inline-start: auto;
-}
-
-.sbb-dialog__content {
-  @include sbb.scrollbar-rules;
-
-  padding-inline: var(--sbb-dialog-padding-inline);
-  padding-block: var(--sbb-dialog-padding-block);
-  overflow: auto;
-
-  :host([data-fullscreen]) & {
-    padding-block-start: var(--sbb-spacing-fixed-20x);
-    padding-inline: var(--sbb-layout-base-offset-responsive);
-    height: 100vh;
-  }
-}
-
-.sbb-dialog__footer {
-  padding-inline: var(--sbb-dialog-padding-inline);
-  padding-block: var(--sbb-spacing-responsive-s);
-  margin-block-start: auto;
-  background-color: var(--sbb-dialog-background-color);
-  border-block-start: var(--sbb-dialog-footer-border);
-
-  :host(:not([data-slot-names~='title'], [title-content])) &,
-  :host(:not([data-slot-names~='action-group'])) & {
-    display: none;
-  }
-}
-
-// stylelint-disable selector-not-notation
-:is(.sbb-dialog__header, .sbb-dialog__footer) {
-  :host([data-overflows]:not([data-fullscreen], [negative])) & {
-    @include sbb.shadow-level-9-soft;
-  }
-}
-// stylelint-enable selector-not-notation
-
 // It is necessary to use animations with keyframes instead of transitions in order not to alter
 // the default `display: block` of the modal otherwise it causes several problems,
 // especially for accessibility.
diff --git a/src/components/dialog/dialog/dialog.spec.ts b/src/components/dialog/dialog/dialog.spec.ts
new file mode 100644
index 0000000000..a088966745
--- /dev/null
+++ b/src/components/dialog/dialog/dialog.spec.ts
@@ -0,0 +1,33 @@
+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 type { SbbDialogElement } from './dialog.js';
+import './dialog.js';
+import '../dialog-title.js';
+import '../dialog-content.js';
+
+describe(`sbb-dialog`, () => {
+  describe('renders an open dialog', async () => {
+    let root: SbbDialogElement;
+    beforeEach(async () => {
+      root = await fixture(
+        html` <sbb-dialog>
+          <sbb-dialog-title>Title</sbb-dialog-title>
+          <sbb-dialog-content>Content</sbb-dialog-content>
+        </sbb-dialog>`,
+      );
+      root.open();
+      await waitForLitRender(root);
+    });
+    it('Dom', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+    it('ShadowDom', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+    testA11yTreeSnapshot();
+  });
+});
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
new file mode 100644
index 0000000000..a75808cbb9
--- /dev/null
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -0,0 +1,484 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import { userEvent, within } from '@storybook/test';
+import type { InputType } from '@storybook/types';
+import type {
+  Meta,
+  StoryObj,
+  ArgTypes,
+  Args,
+  Decorator,
+  StoryContext,
+} from '@storybook/web-components';
+import isChromatic from 'chromatic/isChromatic';
+import type { TemplateResult } from 'lit';
+import { html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
+import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
+import { breakpoints } from '../../core/dom/breakpoint.js';
+import sampleImages from '../../core/images.js';
+import type { SbbTitleLevel } from '../../title.js';
+import { SbbDialogTitleElement } from '../dialog-title.js';
+
+import { SbbDialogElement } from './dialog.js';
+import readme from './readme.md?raw';
+
+import '../../button.js';
+import '../../link.js';
+import '../../form-field.js';
+import '../../image.js';
+import '../dialog-content.js';
+import '../dialog-actions.js';
+
+// Story interaction executed after the story renders
+const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
+  const canvas = within(canvasElement);
+
+  await waitForComponentsReady(() =>
+    canvas.getByTestId('dialog').shadowRoot!.querySelector('.sbb-dialog'),
+  );
+
+  await waitForStablePosition(() => canvas.getByTestId('dialog-trigger'));
+
+  const button = canvas.getByTestId('dialog-trigger');
+  await userEvent.click(button);
+};
+
+const level: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: [1, 2, 3, 4, 5, 6],
+  table: {
+    category: 'Title',
+  },
+};
+
+const backButton: InputType = {
+  control: {
+    type: 'boolean',
+  },
+  table: {
+    category: 'Title',
+  },
+};
+
+const hideOnScroll: InputType = {
+  control: {
+    type: 'select',
+  },
+  options: ['Deactivate hide on scroll', ...breakpoints],
+  table: {
+    category: 'Title',
+  },
+};
+
+const negative: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
+const accessibilityLabel: InputType = {
+  control: {
+    type: 'text',
+  },
+  table: {
+    category: 'Accessibility',
+  },
+};
+
+const accessibilityCloseLabel: InputType = {
+  control: {
+    type: 'text',
+  },
+  table: {
+    category: 'Accessibility',
+  },
+};
+
+const accessibilityBackLabel: InputType = {
+  control: {
+    type: 'text',
+  },
+  table: {
+    category: 'Accessibility',
+  },
+};
+
+const backdropAction: InputType = {
+  control: {
+    type: 'select',
+  },
+  options: ['close', 'none'],
+};
+
+const basicArgTypes: ArgTypes = {
+  level,
+  backButton,
+  hideOnScroll,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
+  negative,
+  'accessibility-label': accessibilityLabel,
+  'backdrop-action': backdropAction,
+};
+
+const basicArgs: Args = {
+  level: level.options![1],
+  backButton: true,
+  hideOnScroll: hideOnScroll.options![0],
+  accessibilityCloseLabel: 'Close dialog',
+  accessibilityBackLabel: 'Go back',
+  negative: false,
+  'accessibility-label': undefined,
+  'backdrop-action': backdropAction.options![0],
+};
+
+const openDialog = (_event: PointerEvent, id: string): void => {
+  const dialog = document.getElementById(id) as SbbDialogElement;
+  dialog.open();
+};
+
+const triggerButton = (dialogId: string, triggerId?: string): TemplateResult => html`
+  <sbb-button
+    data-testid=${triggerId || 'dialog-trigger'}
+    aria-haspopup="dialog"
+    aria-controls=${dialogId}
+    size="m"
+    type="button"
+    @click=${(event: PointerEvent) => openDialog(event, dialogId)}
+  >
+    Open dialog
+  </sbb-button>
+`;
+
+const dialogActions = (negative: boolean): TemplateResult => html`
+  <sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
+    <sbb-block-link
+      align-self="start"
+      icon-name="chevron-small-left-small"
+      href="https://www.sbb.ch/en/"
+      ?negative=${negative}
+      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-dialog-actions>
+`;
+
+const codeStyle: Args = {
+  padding: 'var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x)',
+  borderRadius: 'var(--sbb-border-radius-4x)',
+  backgroundColor: 'var(--sbb-color-smoke-alpha-20)',
+};
+
+const formDetailsStyle: Args = {
+  marginTop: 'var(--sbb-spacing-fixed-4x)',
+  padding: 'var(--sbb-spacing-fixed-4x)',
+  borderRadius: 'var(--sbb-border-radius-8x)',
+  backgroundColor: 'var(--sbb-color-milk)',
+};
+
+const formStyle: Args = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  gap: 'var(--sbb-spacing-fixed-4x)',
+};
+
+const textBlockStyle: Args = {
+  position: 'relative',
+  marginBlockStart: '1rem',
+  padding: '1rem',
+  backgroundColor: 'var(--sbb-color-milk)',
+  border: 'var(--sbb-border-width-1x) solid var(--sbb-color-cloud)',
+  borderRadius: 'var(--sbb-border-radius-4x)',
+};
+
+const dialogTitle = (
+  level: SbbTitleLevel,
+  backButton: boolean,
+  hideOnScroll: any,
+  accessibilityCloseLabel: string,
+  accessibilityBackLabel: string,
+): TemplateResult => html`
+  <sbb-dialog-title
+    level=${level}
+    ?back-button=${backButton}
+    hide-on-scroll=${hideOnScroll === 'Deactivate hide on scroll' ? nothing : hideOnScroll}
+    accessibility-close-label=${accessibilityCloseLabel}
+    accessibility-back-label=${accessibilityBackLabel}
+    >A describing title of the dialog</sbb-dialog-title
+  >
+`;
+
+const textBlock = (): TemplateResult => html`
+  <div style=${styleMap(textBlockStyle)}>
+    J.R.R. Tolkien, the mastermind behind Middle-earth's enchanting world, was born on January 3,
+    1892. With "The Hobbit" and "The Lord of the Rings", he pioneered fantasy literature. Tolkien's
+    linguistic brilliance and mythic passion converge in a literary legacy that continues to
+    transport readers to magical realms.
+  </div>
+`;
+
+const DefaultTemplate = ({
+  level,
+  backButton,
+  hideOnScroll,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
+  ...args
+}: Args): TemplateResult => html`
+  ${triggerButton('my-dialog-1')}
+  <sbb-dialog data-testid="dialog" id="my-dialog-1" ${sbbSpread(args)}>
+    ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
+    <sbb-dialog-content>
+      <p id="dialog-content-1" style=${styleMap({ margin: '0' })}>Dialog content</p>
+    </sbb-dialog-content>
+    ${dialogActions(args.negative)}
+  </sbb-dialog>
+`;
+
+const LongContentTemplate = ({
+  level,
+  backButton,
+  hideOnScroll,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
+  ...args
+}: Args): TemplateResult => html`
+  ${triggerButton('my-dialog-2')}
+  <sbb-dialog data-testid="dialog" id="my-dialog-2" ${sbbSpread(args)}>
+    ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
+    <sbb-dialog-content data-testid="content">
+      Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
+      like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
+      Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad in
+      elven-mail, and a star shone on his breast. They spoke together, and then suddenly it seemed
+      to Frodo that Arwen turned towards him, and the light of her eyes fell on him from afar and
+      pierced his heart.
+      <sbb-image
+        style=${styleMap({ 'margin-block': '1rem' })}
+        image-src=${sampleImages[1]}
+        alt="Natural landscape"
+        data-testid="image"
+        data-chromatic="ignore"
+      ></sbb-image>
+      He stood still enchanted, while the sweet syllables of the elvish song fell like clear jewels
+      of blended word and melody. 'It is a song to Elbereth,'' said Bilbo. 'They will sing that, and
+      other songs of the Blessed Realm, many times tonight. Come on!’ —J.R.R. Tolkien, The Lord of
+      the Rings: The Fellowship of the Ring, “Many Meetings” ${textBlock()}
+    </sbb-dialog-content>
+    ${dialogActions(args.negative)}
+  </sbb-dialog>
+`;
+
+const FormTemplate = ({
+  level,
+  backButton,
+  hideOnScroll,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
+  ...args
+}: Args): TemplateResult => html`
+  ${triggerButton('my-dialog-3')}
+  <div id="returned-value">
+    <div style=${styleMap(formDetailsStyle)}>
+      <div>Your message: <span id="returned-value-message">Hello 👋</span></div>
+      <div>Your favorite animal: <span id="returned-value-animal">Red Panda</span></div>
+    </div>
+  </div>
+  <sbb-dialog
+    data-testid="dialog"
+    id="my-dialog-3"
+    @willClose=${(event: CustomEvent) => {
+      if (event.detail.returnValue) {
+        document.getElementById('returned-value-message')!.innerHTML =
+          `${event.detail.returnValue.message?.value}`;
+        document.getElementById('returned-value-animal')!.innerHTML =
+          `${event.detail.returnValue.animal?.value}`;
+      }
+    }}
+    ${sbbSpread(args)}
+  >
+    ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
+    <sbb-dialog-content>
+      <div style=${styleMap({ 'margin-block-end': 'var(--sbb-spacing-fixed-4x)' })}>
+        Submit the form below to close the dialog box using the
+        <code style=${styleMap(codeStyle)}>close(result?: any, target?: HTMLElement)</code>
+        method and returning the form values to update the details.
+      </div>
+      <form style=${styleMap(formStyle)} @submit=${(e: SubmitEvent) => e.preventDefault()}>
+        <sbb-form-field error-space="none" size="m">
+          <label>Message</label>
+          <input placeholder="Your custom massage" value="Hello 👋" name="message" />
+        </sbb-form-field>
+        <sbb-form-field error-space="none" size="m">
+          <label>Favorite animal</label>
+          <select name="animal">
+            <option>Red Panda</option>
+            <option>Cheetah</option>
+            <option>Polar Bear</option>
+            <option>Elephant</option>
+          </select>
+        </sbb-form-field>
+        <sbb-button type="submit" size="m" sbb-dialog-close> Update details </sbb-button>
+      </form>
+    </sbb-dialog-content>
+  </sbb-dialog>
+`;
+
+const NoFooterTemplate = ({
+  level,
+  backButton,
+  hideOnScroll,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
+  ...args
+}: Args): TemplateResult => html`
+  ${triggerButton('my-dialog-4')}
+  <sbb-dialog data-testid="dialog" id="my-dialog-4" ${sbbSpread(args)}>
+    ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
+    <sbb-dialog-content>
+      <p id="dialog-content-5" style=${styleMap({ margin: '0' })}>
+        “What really knocks me out is a book that, when you're all done reading it, you wish the
+        author that wrote it was a terrific friend of yours and you could call him up on the phone
+        whenever you felt like it. That doesn't happen much, though.” ― J.D. Salinger, The Catcher
+        in the Rye
+      </p>
+    </sbb-dialog-content>
+  </sbb-dialog>
+`;
+
+const NestedTemplate = ({
+  level,
+  backButton,
+  hideOnScroll,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
+  ...args
+}: Args): TemplateResult => html`
+  ${triggerButton('my-dialog-5')}
+  <sbb-dialog data-testid="dialog" id="my-dialog-5" ${sbbSpread(args)}>
+    ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
+    <sbb-dialog-content
+      >Click the button to open a nested
+      dialog.&nbsp;${triggerButton('my-dialog-6', 'nested-trigger-id')}</sbb-dialog-content
+    >
+    <sbb-dialog data-testid="nested-dialog" id="my-dialog-6" ${sbbSpread(args)}>
+      ${dialogTitle(
+        level,
+        backButton,
+        hideOnScroll,
+        accessibilityCloseLabel,
+        accessibilityBackLabel,
+      )}
+      <sbb-dialog-content
+        >Nested dialog content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+        anim id est laborum.</sbb-dialog-content
+      >
+    </sbb-dialog>
+  </sbb-dialog>
+`;
+
+export const Default: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: basicArgs,
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const Negative: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    negative: true,
+  },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const AllowBackdropClick: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, 'backdrop-action': backdropAction.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const LongContent: StoryObj = {
+  render: LongContentTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const HiddenTitle: StoryObj = {
+  render: LongContentTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, hideOnScroll: hideOnScroll.options![7] },
+};
+
+export const Form: StoryObj = {
+  render: FormTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const NoBackButton: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    backButton: false,
+    accessibilityBackLabel: undefined,
+  },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const NoFooter: StoryObj = {
+  render: NoFooterTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const Nested: StoryObj = {
+  render: NestedTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs },
+  play: isChromatic() ? playStory : undefined,
+};
+
+const meta: Meta = {
+  decorators: [withActions as Decorator],
+  parameters: {
+    chromatic: { disableSnapshot: false },
+    actions: {
+      handles: [
+        SbbDialogElement.events.willOpen,
+        SbbDialogElement.events.didOpen,
+        SbbDialogElement.events.willClose,
+        SbbDialogElement.events.didClose,
+        SbbDialogTitleElement.events.backClick,
+      ],
+    },
+    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,
+    },
+  },
+  title: 'components/sbb-dialog/sbb-dialog',
+};
+
+export default meta;
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
new file mode 100644
index 0000000000..49f06102de
--- /dev/null
+++ b/src/components/dialog/dialog/dialog.ts
@@ -0,0 +1,475 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
+
+import {
+  SbbFocusHandler,
+  getFirstFocusableElement,
+  setModalityOnNextFocus,
+} from '../../core/a11y.js';
+import { SbbLanguageController } from '../../core/controllers.js';
+import { SbbScrollHandler, hostContext, isBreakpoint } from '../../core/dom.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { i18nDialog } from '../../core/i18n.js';
+import type { SbbOpenedClosedState } from '../../core/interfaces.js';
+import { SbbNegativeMixin } from '../../core/mixins.js';
+import { AgnosticResizeObserver } from '../../core/observers.js';
+import { applyInertMechanism, removeInertMechanism } from '../../core/overlay.js';
+import type { SbbScreenReaderOnlyElement } from '../../screen-reader-only.js';
+import type { SbbDialogActionsElement } from '../dialog-actions.js';
+import type { SbbDialogTitleElement } from '../dialog-title.js';
+
+import style from './dialog.scss?lit&inline';
+
+import '../../screen-reader-only.js';
+
+// A global collection of existing dialogs
+const dialogRefs: SbbDialogElement[] = [];
+let nextId = 0;
+
+export type SbbDialogCloseEventDetails = {
+  returnValue?: any;
+  closeTarget?: HTMLElement;
+};
+
+/**
+ * It displays an interactive overlay element.
+ *
+ * @slot - Use the unnamed slot to provide a `sbb-dialog-title`, `sbb-dialog-content` and an optional `sbb-dialog-actions`.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-dialog` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled.
+ * @event {CustomEvent<SbbDialogCloseEventDetails>} didClose - Emits whenever the `sbb-dialog` is closed.
+ * @cssprop [--sbb-dialog-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+ * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+ */
+@customElement('sbb-dialog')
+export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
+  public static override styles: CSSResultGroup = style;
+  public static readonly events = {
+    willOpen: 'willOpen',
+    didOpen: 'didOpen',
+    willClose: 'willClose',
+    didClose: 'didClose',
+  } as const;
+
+  /**
+   * Backdrop click action.
+   */
+  @property({ attribute: 'backdrop-action' }) public backdropAction: 'close' | 'none' = 'close';
+
+  /**
+   * This will be forwarded as aria-label to the relevant nested element.
+   */
+  @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined;
+
+  /*
+   * The state of the dialog.
+   */
+  private set _state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
+  }
+  private get _state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
+  }
+
+  // We use a timeout as a workaround to the "ResizeObserver loop completed with undelivered notifications" error.
+  // For more details:
+  // - https://github.com/WICG/resize-observer/issues/38#issuecomment-422126006
+  // - https://github.com/juggle/resize-observer/issues/103#issuecomment-1711148285
+  private _dialogContentResizeObserver = new AgnosticResizeObserver(() =>
+    setTimeout(() => this._onContentResize()),
+  );
+  private _ariaLiveRef!: SbbScreenReaderOnlyElement;
+  private _ariaLiveRefToggle = false;
+
+  /** Emits whenever the `sbb-dialog` starts the opening transition. */
+  private _willOpen: EventEmitter<void> = new EventEmitter(this, SbbDialogElement.events.willOpen);
+
+  /** Emits whenever the `sbb-dialog` is opened. */
+  private _didOpen: EventEmitter<void> = new EventEmitter(this, SbbDialogElement.events.didOpen);
+
+  /** Emits whenever the `sbb-dialog` begins the closing transition. */
+  private _willClose: EventEmitter = new EventEmitter(this, SbbDialogElement.events.willClose);
+
+  /** Emits whenever the `sbb-dialog` is closed. */
+  private _didClose: EventEmitter<SbbDialogCloseEventDetails> = new EventEmitter(
+    this,
+    SbbDialogElement.events.didClose,
+  );
+
+  private _dialogTitleElement: SbbDialogTitleElement | null = null;
+  private _dialogTitleHeight?: number;
+  private _dialogContentElement: HTMLElement | null = null;
+  private _dialogActionsElement: SbbDialogActionsElement | null = null;
+  private _dialogCloseElement?: HTMLElement;
+  private _dialogController!: AbortController;
+  private _openDialogController!: AbortController;
+  private _focusHandler = new SbbFocusHandler();
+  private _scrollHandler = new SbbScrollHandler();
+  private _returnValue: any;
+  private _isPointerDownEventOnDialog: boolean = false;
+  private _overflows: boolean = false;
+  private _lastScroll = 0;
+  private _dialogId = `sbb-dialog-${nextId++}`;
+
+  // Last element which had focus before the dialog was opened.
+  private _lastFocusedElement?: HTMLElement;
+
+  private _language = new SbbLanguageController(this);
+
+  /**
+   * Opens the dialog element.
+   */
+  public open(): void {
+    if (this._state !== 'closed') {
+      return;
+    }
+    this._lastFocusedElement = document.activeElement as HTMLElement;
+
+    // Initialize dialog elements
+    this._dialogTitleElement = this.querySelector('sbb-dialog-title');
+    this._dialogContentElement = this.querySelector('sbb-dialog-content')?.shadowRoot!
+      .firstElementChild as HTMLElement;
+    this._dialogActionsElement = this.querySelector('sbb-dialog-actions');
+
+    this._syncNegative();
+
+    if (!this._willOpen.emit()) {
+      return;
+    }
+    this._state = 'opening';
+
+    // Add this dialog to the global collection
+    dialogRefs.push(this as SbbDialogElement);
+    this._dialogContentResizeObserver.observe(this._dialogContentElement);
+
+    // Disable scrolling for content below the dialog
+    this._scrollHandler.disableScroll();
+  }
+
+  /**
+   * Closes the dialog element.
+   */
+  public close(result?: any, target?: HTMLElement): any {
+    if (this._state !== 'opened') {
+      return;
+    }
+
+    this._returnValue = result;
+    this._dialogCloseElement = target;
+    const eventData = {
+      returnValue: this._returnValue,
+      closeTarget: this._dialogCloseElement,
+    };
+
+    if (!this._willClose.emit(eventData)) {
+      return;
+    }
+    this._state = 'closing';
+    this._removeAriaLiveRefContent();
+  }
+
+  // Closes the dialog on "Esc" key pressed.
+  private _onKeydownEvent(event: KeyboardEvent): void {
+    if (this._state !== 'opened') {
+      return;
+    }
+
+    if (event.key === 'Escape') {
+      dialogRefs[dialogRefs.length - 1].close();
+      return;
+    }
+  }
+
+  private _onContentScroll(): void {
+    if (!this._dialogContentElement) {
+      return;
+    }
+
+    const hasVisibleHeader = this.dataset.hideHeader === undefined;
+
+    // Check whether hiding the header would make the scrollbar disappear
+    // and prevent the hiding animation if so.
+    if (
+      hasVisibleHeader &&
+      this._dialogContentElement.clientHeight + this._dialogTitleHeight! >=
+        this._dialogContentElement.scrollHeight
+    ) {
+      return;
+    }
+
+    const currentScroll = this._dialogContentElement.scrollTop;
+    if (
+      Math.round(currentScroll + this._dialogContentElement.clientHeight) >=
+      this._dialogContentElement.scrollHeight
+    ) {
+      return;
+    }
+    // Check whether is scrolling down or up.
+    if (currentScroll > 0 && this._lastScroll < currentScroll) {
+      // Scrolling down
+      this._setHideHeaderDataAttribute(true);
+    } else {
+      // Scrolling up
+      this._setHideHeaderDataAttribute(false);
+    }
+    // `currentScroll` can be negative, e.g. on mobile; this is not allowed.
+    this._lastScroll = currentScroll <= 0 ? 0 : currentScroll;
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this._state ||= 'closed';
+    this._dialogController?.abort();
+    this._dialogController = new AbortController();
+
+    // Close dialog on backdrop click
+    this.addEventListener('pointerdown', this._pointerDownListener, {
+      signal: this._dialogController.signal,
+    });
+    this.addEventListener('pointerup', this._closeOnBackdropClick, {
+      signal: this._dialogController.signal,
+    });
+
+    if (this._state === 'opened') {
+      applyInertMechanism(this);
+    }
+  }
+
+  protected override firstUpdated(_changedProperties: PropertyValues): void {
+    this._ariaLiveRef =
+      this.shadowRoot!.querySelector<SbbScreenReaderOnlyElement>('sbb-screen-reader-only')!;
+
+    // Synchronize the negative state before the first opening to avoid a possible color flash if it is negative.
+    this._dialogTitleElement = this.querySelector('sbb-dialog-title')!;
+    this._syncNegative();
+    super.firstUpdated(_changedProperties);
+  }
+
+  protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('negative')) {
+      this._syncNegative();
+    }
+  }
+
+  private _syncNegative(): void {
+    if (this._dialogTitleElement) {
+      this._dialogTitleElement.negative = this.negative;
+    }
+
+    if (this._dialogActionsElement) {
+      this._dialogActionsElement.toggleAttribute('data-negative', this.negative);
+    }
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._dialogController?.abort();
+    this._openDialogController?.abort();
+    this._focusHandler.disconnect();
+    this._dialogContentResizeObserver.disconnect();
+    this._removeInstanceFromGlobalCollection();
+    removeInertMechanism();
+  }
+
+  private _removeInstanceFromGlobalCollection(): void {
+    dialogRefs.splice(dialogRefs.indexOf(this as SbbDialogElement), 1);
+  }
+
+  private _attachOpenDialogEvents(): void {
+    this._openDialogController = new AbortController();
+    // Remove dialog label as soon as it is not needed anymore to prevent accessing it with browse mode.
+    window.addEventListener(
+      'keydown',
+      async (event: KeyboardEvent) => {
+        this._removeAriaLiveRefContent();
+        await this._onKeydownEvent(event);
+      },
+      {
+        signal: this._openDialogController.signal,
+      },
+    );
+    window.addEventListener('click', () => this._removeAriaLiveRefContent(), {
+      signal: this._openDialogController.signal,
+    });
+    // If the content overflows, show/hide the dialog header on scroll.
+    this._dialogContentElement?.addEventListener('scroll', () => this._onContentScroll(), {
+      passive: true,
+      signal: this._openDialogController.signal,
+    });
+    window.addEventListener('resize', () => this._setHideHeaderDataAttribute(false), {
+      signal: this._openDialogController.signal,
+    });
+  }
+
+  // Check if the pointerdown event target is triggered on the dialog.
+  private _pointerDownListener = (event: PointerEvent): void => {
+    if (this.backdropAction !== 'close') {
+      return;
+    }
+
+    this._isPointerDownEventOnDialog = event
+      .composedPath()
+      .filter((e): e is HTMLElement => e instanceof window.HTMLElement)
+      .some((target) => target.id === this._dialogId);
+  };
+
+  // Close dialog on backdrop click.
+  private _closeOnBackdropClick = (event: PointerEvent): void => {
+    if (this.backdropAction !== 'close') {
+      return;
+    }
+
+    if (
+      !this._isPointerDownEventOnDialog &&
+      !event
+        .composedPath()
+        .filter((e): e is HTMLElement => e instanceof window.HTMLElement)
+        .some((target) => target.id === this._dialogId)
+    ) {
+      this.close();
+    }
+  };
+
+  // Close the dialog on click of any element that has the 'sbb-dialog-close' attribute.
+  private _closeOnSbbDialogCloseClick(event: Event): void {
+    const dialogCloseElement = event
+      .composedPath()
+      .filter((e): e is HTMLElement => e instanceof window.HTMLElement)
+      .find(
+        (target) => target.hasAttribute('sbb-dialog-close') && !target.hasAttribute('disabled'),
+      );
+
+    if (!dialogCloseElement) {
+      return;
+    }
+
+    // Check if the target is a submission element within a form and return the form, if present
+    const closestForm =
+      dialogCloseElement.getAttribute('type') === 'submit'
+        ? (hostContext('form', dialogCloseElement) as HTMLFormElement)
+        : undefined;
+    dialogRefs[dialogRefs.length - 1].close(closestForm, dialogCloseElement);
+  }
+
+  // Wait for dialog transition to complete.
+  // In rare cases it can be that the animationEnd event is triggered twice.
+  // To avoid entering a corrupt state, exit when state is not expected.
+  private _onDialogAnimationEnd(event: AnimationEvent): void {
+    if (event.animationName === 'open' && this._state === 'opening') {
+      this._state = 'opened';
+      this._didOpen.emit();
+      applyInertMechanism(this);
+      this._attachOpenDialogEvents();
+      this._setDialogFocus();
+      // Use timeout to read label after focused element
+      setTimeout(() => this._setAriaLiveRefContent());
+      this._focusHandler.trap(this);
+    } else if (event.animationName === 'close' && this._state === 'closing') {
+      this._setHideHeaderDataAttribute(false);
+      this._dialogContentElement?.scrollTo(0, 0);
+      this._state = 'closed';
+      removeInertMechanism();
+      setModalityOnNextFocus(this._lastFocusedElement);
+      // Manually focus last focused element
+      this._lastFocusedElement?.focus();
+      this._openDialogController?.abort();
+      this._focusHandler.disconnect();
+      this._dialogContentResizeObserver.disconnect();
+      this._removeInstanceFromGlobalCollection();
+      // Enable scrolling for content below the dialog if no dialog is open
+      !dialogRefs.length && this._scrollHandler.enableScroll();
+      this._didClose.emit({
+        returnValue: this._returnValue,
+        closeTarget: this._dialogCloseElement,
+      });
+    }
+  }
+
+  private _setAriaLiveRefContent(): void {
+    this._ariaLiveRefToggle = !this._ariaLiveRefToggle;
+
+    // Take accessibility label or current string in title section
+    const label = this.accessibilityLabel || this._dialogTitleElement?.innerText.trim();
+
+    // If the text content remains the same, on VoiceOver the aria-live region is not announced a second time.
+    // In order to support reading on every opening, we toggle an invisible space.
+    this._ariaLiveRef.textContent = `${i18nDialog[this._language.current]}${
+      label ? `, ${label}` : ''
+    }${this._ariaLiveRefToggle ? ' ' : ''}`;
+  }
+
+  private _removeAriaLiveRefContent(): void {
+    this._ariaLiveRef.textContent = '';
+  }
+
+  // Set focus on the first focusable element.
+  private _setDialogFocus(): void {
+    const firstFocusable = getFirstFocusableElement(
+      Array.from(this.children).filter((e): e is HTMLElement => e instanceof window.HTMLElement),
+    );
+    setModalityOnNextFocus(firstFocusable);
+    firstFocusable?.focus();
+  }
+
+  private _setDialogHeaderHeight(): void {
+    this._dialogTitleHeight = this._dialogTitleElement?.shadowRoot!.firstElementChild!.clientHeight;
+    this.style.setProperty('--sbb-dialog-header-height', `${this._dialogTitleHeight}px`);
+  }
+
+  private _onContentResize(): void {
+    this._setDialogHeaderHeight();
+    // Check whether the content overflows and set the `overflows` attribute.
+    this._overflows = this._dialogContentElement
+      ? this._dialogContentElement?.scrollHeight > this._dialogContentElement?.clientHeight
+      : false;
+    this._setOverflowsDataAttribute();
+  }
+
+  private _setHideHeaderDataAttribute(value: boolean): void {
+    const hideOnScroll = this._dialogTitleElement?.hideOnScroll ?? false;
+    const hideHeader =
+      typeof hideOnScroll === 'boolean'
+        ? hideOnScroll
+        : isBreakpoint('zero', hideOnScroll, { includeMaxBreakpoint: true });
+    this.toggleAttribute('data-hide-header', !hideHeader ? false : value);
+    this._dialogTitleElement &&
+      this._dialogTitleElement.toggleAttribute('data-hide-header', !hideHeader ? false : value);
+  }
+
+  private _setOverflowsDataAttribute(): void {
+    this.toggleAttribute('data-overflows', this._overflows);
+    this._dialogTitleElement?.toggleAttribute('data-overflows', this._overflows);
+    this._dialogActionsElement?.toggleAttribute('data-overflows', this._overflows);
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="sbb-dialog__container">
+        <div
+          @animationend=${(event: AnimationEvent) => this._onDialogAnimationEnd(event)}
+          class="sbb-dialog"
+          id=${this._dialogId}
+        >
+          <div
+            @click=${(event: Event) => this._closeOnSbbDialogCloseClick(event)}
+            class="sbb-dialog__wrapper"
+          >
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+      <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-dialog': SbbDialogElement;
+  }
+}
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
new file mode 100644
index 0000000000..894d5c376a
--- /dev/null
+++ b/src/components/dialog/dialog/readme.md
@@ -0,0 +1,125 @@
+The `sbb-dialog` component provides a way to present content on top of the app's content.
+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-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.
+
+```html
+<sbb-dialog>
+  <sbb-dialog-title>Title</sbb-dialog-title>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+</sbb-dialog>
+```
+
+## Slots
+
+There are three slots: `title`, `content` and `actions`, which can respectively be used to provide an `sbb-dialog-title`, `sbb-dialog-content` and an `sbb-dialog-actions`.
+
+```html
+<sbb-dialog>
+  <sbb-dialog-title>Title</sbb-dialog-title>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+  <sbb-dialog-actions>
+    <sbb-block-link 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-dialog-actions>
+</sbb-dialog>
+```
+
+## Interactions
+
+In order to show the dialog, you need to call the `open(event?: PointerEvent)` method on the `sbb-dialog` component.
+It is necessary to pass the event object to the `open()` method to allow the dialog to detect
+whether it has been opened by click or keyboard, so that the focus can be better handled.
+
+```html
+<sbb-button
+  label="Open dialog"
+  click="openDialog(event, 'my-dialog')"
+  aria-haspopup="dialog"
+  aria-controls="my-dialog"
+></sbb-button>
+
+<sbb-dialog id="my-dialog">
+  <sbb-dialog-title>Title</sbb-dialog-title>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+</sbb-dialog>
+
+<script>
+  const openDialog = (event, id) => {
+    const dialog = document.getElementById(id);
+    dialog.open(event);
+  };
+</script>
+```
+
+To dismiss the dialog, you need to get a reference to the `sbb-dialog` element and call
+the `close(result?: any, target?: HTMLElement)` method, which will close the dialog element and
+emit a close event with an optional result as a payload.
+
+The component can also be dismissed by clicking on the close button, clicking on the backdrop, pressing the `Esc` key,
+or, if an element within the `sbb-dialog` has the `sbb-dialog-close` attribute, by clicking on it.
+
+You can also set the property `backButton` on the `sbb-dialog-title` component to display the back button in the title section which will emit the event `requestBackAction` when clicked.
+
+## Style
+
+It's possible to display the component in `negative` variant using the self-named property.
+
+```html
+<sbb-dialog negative>
+  <sbb-dialog-title>Title</sbb-dialog-title>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+</sbb-dialog>
+```
+
+## Accessibility
+
+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-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 -->
+
+## Properties
+
+| Name                 | Attribute             | Privacy | Type                  | Default   | Description                                                          |
+| -------------------- | --------------------- | ------- | --------------------- | --------- | -------------------------------------------------------------------- |
+| `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. |
+| `negative`           | `negative`            | public  | `boolean`             | `false`   | Negative coloring variant flag.                                      |
+
+## Methods
+
+| Name    | Privacy | Description                | Parameters                         | Return | Inherited From |
+| ------- | ------- | -------------------------- | ---------------------------------- | ------ | -------------- |
+| `open`  | public  | Opens the dialog element.  |                                    | `void` |                |
+| `close` | public  | Closes the dialog element. | `result: any, target: HTMLElement` | `any`  |                |
+
+## Events
+
+| Name        | Type                                      | Description                                                                     | Inherited From |
+| ----------- | ----------------------------------------- | ------------------------------------------------------------------------------- | -------------- |
+| `willOpen`  | `CustomEvent<void>`                       | Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled. |                |
+| `didOpen`   | `CustomEvent<void>`                       | Emits whenever the `sbb-dialog` is opened.                                      |                |
+| `willClose` | `CustomEvent<void>`                       | Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled. |                |
+| `didClose`  | `CustomEvent<SbbDialogCloseEventDetails>` | Emits whenever the `sbb-dialog` is closed.                                      |                |
+
+## CSS Properties
+
+| Name                   | Default                              | Description                                                                                                                                                                                                   |
+| ---------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-dialog-z-index` | `var(--sbb-overlay-default-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`. |
+
+## Slots
+
+| Name | Description                                                                                                      |
+| ---- | ---------------------------------------------------------------------------------------------------------------- |
+|      | Use the unnamed slot to provide a `sbb-dialog-title`, `sbb-dialog-content` and an optional `sbb-dialog-actions`. |
diff --git a/src/components/dialog/index.ts b/src/components/dialog/index.ts
deleted file mode 100644
index 20da8e550a..0000000000
--- a/src/components/dialog/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dialog';
diff --git a/src/components/dialog/readme.md b/src/components/dialog/readme.md
deleted file mode 100644
index 80c5831236..0000000000
--- a/src/components/dialog/readme.md
+++ /dev/null
@@ -1,125 +0,0 @@
-The `sbb-dialog` component provides a way to present content on top of the app's content.
-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 have a header and a footer, both of which are optional;
-- can host a [sbb-action-group](/docs/components-sbb-action-group--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.
-
-```html
-<sbb-dialog> Dialog content. </sbb-dialog>
-```
-
-## Slots
-
-The content is projected in an unnamed slot, while the dialog's title can be provided via the `titleContent` property or via slot `name="title"`.
-It's also possible to display buttons in the component's footer using the `action-group` slot with the `sbb-action-group` component.
-
-**NOTE**:
-
-- The component will automatically set size `m` on slotted `sbb-action-group`;
-- If the title is not present, the footer will not be displayed even if provided;
-- If the title is not present, the dialog will be displayed in fullscreen mode with the close button in the content section along with the back button
-  (if visible, see [next paragraph](#interactions)).
-
-```html
-<sbb-dialog title-content="Title"> Dialog content. </sbb-dialog>
-
-<sbb-dialog>
-  <span slot="title"> My dialog title </span>
-  Dialog content.
-  <sbb-action-group slot="action-group">
-    <sbb-button sbb-dialog-close>Abort</sbb-button>
-    <sbb-button>Confirm</sbb-button>
-  </sbb-action-group>
-</sbb-dialog>
-```
-
-## Interactions
-
-In order to show the dialog, you need to call the `open(event?: PointerEvent)` method on the `sbb-dialog` component.
-It is necessary to pass the event object to the `open()` method to allow the dialog to detect
-whether it has been opened by click or keyboard, so that the focus can be better handled.
-
-```html
-<sbb-button label="Open dialog" click="openDialog(event, 'my-dialog')"></sbb-button>
-<sbb-dialog id="my-dialog" title-content="Title" title-back-button="true">
-  Dialog content.
-  <div slot="action-group">...</div>
-</sbb-dialog>
-
-<script>
-  const openDialog = (event, id) => {
-    const dialog = document.getElementById(id);
-    dialog.open(event);
-  };
-</script>
-```
-
-To dismiss the dialog, you need to get a reference to the `sbb-dialog` element and call
-the `close(result?: any, target?: HTMLElement)` method, which will close the dialog element and
-emit a close event with an optional result as a payload.
-
-The component can also be dismissed by clicking on the close button, clicking on the backdrop, pressing the `Esc` key,
-or, if an element within the `sbb-dialog` has the `sbb-dialog-close` attribute, by clicking on it.
-
-You can also set the property `titleBackButton` to display the back button in the title section
-(or content section, if title is omitted) which will emit the event `requestBackAction` when clicked.
-
-## Style
-
-It's possible to display the component in `negative` variant using the self-named property.
-
-## Animation
-
-Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Name                      | Attribute                   | Privacy | Type                         | Default   | Description                                                                     |
-| ------------------------- | --------------------------- | ------- | ---------------------------- | --------- | ------------------------------------------------------------------------------- |
-| `titleContent`            | `title-content`             | public  | `string \| undefined`        |           | Dialog title.                                                                   |
-| `titleLevel`              | `title-level`               | public  | `SbbTitleLevel`              | `'1'`     | Level of title, will be rendered as heading tag (e.g. h1). Defaults to level 1. |
-| `titleBackButton`         | `title-back-button`         | public  | `boolean`                    | `false`   | Whether a back button is displayed next to the title.                           |
-| `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.            |
-| `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.                |
-| `negative`                | `negative`                  | public  | `boolean`                    | `false`   | Negative coloring variant flag.                                                 |
-
-## Methods
-
-| Name    | Privacy | Description                | Parameters                         | Return | Inherited From |
-| ------- | ------- | -------------------------- | ---------------------------------- | ------ | -------------- |
-| `open`  | public  | Opens the dialog element.  |                                    | `void` |                |
-| `close` | public  | Closes the dialog element. | `result: any, target: HTMLElement` | `any`  |                |
-
-## Events
-
-| Name                | Type                | Description                                                                     | Inherited From |
-| ------------------- | ------------------- | ------------------------------------------------------------------------------- | -------------- |
-| `willOpen`          | `CustomEvent<void>` | Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled. |                |
-| `didOpen`           | `CustomEvent<void>` | Emits whenever the `sbb-dialog` is opened.                                      |                |
-| `willClose`         | `CustomEvent<void>` | Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled. |                |
-| `didClose`          | `CustomEvent<void>` | Emits whenever the `sbb-dialog` is closed.                                      |                |
-| `requestBackAction` | `CustomEvent<void>` | Emits whenever the back button is clicked.                                      |                |
-
-## CSS Properties
-
-| Name                   | Default                      | Description                                                                                                                                                                                           |
-| ---------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-dialog-z-index` | `var(--sbb-overlay-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-z-index)` with a value of `1000`. |
-
-## Slots
-
-| Name           | Description                                                  |
-| -------------- | ------------------------------------------------------------ |
-|                | Use the unnamed slot to add content to the `sbb-dialog`.     |
-| `title`        | Use this slot to provide a title.                            |
-| `action-group` | Use this slot to display a `sbb-action-group` in the footer. |
diff --git a/src/components/divider.ts b/src/components/divider.ts
new file mode 100644
index 0000000000..06ac499007
--- /dev/null
+++ b/src/components/divider.ts
@@ -0,0 +1 @@
+export * from './divider/divider.js';
diff --git a/src/components/divider/divider.e2e.ts b/src/components/divider/divider.e2e.ts
index be46dc95ba..bdddc72069 100644
--- a/src/components/divider/divider.e2e.ts
+++ b/src/components/divider/divider.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbDividerElement } from './divider';
+import { SbbDividerElement } from './divider.js';
 
 describe(`sbb-divider with ${fixture.name}`, () => {
   it('renders', async () => {
diff --git a/src/components/divider/divider.scss b/src/components/divider/divider.scss
index b3c904b171..cdece11213 100644
--- a/src/components/divider/divider.scss
+++ b/src/components/divider/divider.scss
@@ -1,12 +1,13 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-divider-color: var(--sbb-color-cloud);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
+
+  display: block;
 }
 
 :host([orientation='vertical']) {
diff --git a/src/components/divider/divider.spec.ts b/src/components/divider/divider.spec.ts
index 849b39ef45..14e6cc5bf7 100644
--- a/src/components/divider/divider.spec.ts
+++ b/src/components/divider/divider.spec.ts
@@ -1,13 +1,16 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
 
-import './divider';
+import type { SbbDividerElement } from './divider.js';
+
+import './divider.js';
 
 describe(`sbb-divider`, () => {
   it('should render with default values', async () => {
-    const element: Element = await fixture(html`<sbb-divider></sbb-divider>`);
+    const element: SbbDividerElement = await fixture(html`<sbb-divider></sbb-divider>`);
     expect(element).dom.to.be.equal(
       `<sbb-divider orientation='horizontal' aria-orientation='horizontal' role='separator'></sbb-divider>`,
     );
@@ -15,7 +18,7 @@ describe(`sbb-divider`, () => {
   });
 
   it('should render with orientation horizontal', async () => {
-    const element: Element = await fixture(
+    const element: SbbDividerElement = await fixture(
       html`<sbb-divider orientation="horizontal"></sbb-divider>`,
     );
     expect(element).dom.to.be.equal(
@@ -25,7 +28,7 @@ describe(`sbb-divider`, () => {
   });
 
   it('should render with orientation vertical', async () => {
-    const element: Element = await fixture(
+    const element: SbbDividerElement = await fixture(
       html`<sbb-divider orientation="vertical"></sbb-divider>`,
     );
     expect(element).dom.to.be.equal(
@@ -34,5 +37,13 @@ describe(`sbb-divider`, () => {
     expect(element).shadowDom.to.be.equal(`<div class='sbb-divider'></div>`);
   });
 
+  it('should react to change of orientation', async () => {
+    const element: SbbDividerElement = await fixture(html`<sbb-divider></sbb-divider>`);
+
+    element.orientation = 'vertical';
+    await waitForLitRender(element);
+    expect(element).to.have.attribute('aria-orientation', 'vertical');
+  });
+
   testA11yTreeSnapshot(html`<sbb-divider></sbb-divider>`);
 });
diff --git a/src/components/divider/divider.stories.ts b/src/components/divider/divider.stories.ts
index 801c25ed87..3e6d09d98d 100644
--- a/src/components/divider/divider.stories.ts
+++ b/src/components/divider/divider.stories.ts
@@ -4,16 +4,10 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './divider';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
+import './divider.js';
 
 const Template = (args: Args): TemplateResult => html`
   <div style=${styleMap({ height: '340px', padding: '20px' })}>
@@ -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/divider/divider.ts b/src/components/divider/divider.ts
index d3228fbf76..19eea19ee6 100644
--- a/src/components/divider/divider.ts
+++ b/src/components/divider/divider.ts
@@ -1,10 +1,10 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { hostAttributes, SbbNegativeMixin } from '../core/common-behaviors';
-import { setAttribute } from '../core/dom';
-import type { SbbOrientation } from '../core/interfaces';
+import { hostAttributes } from '../core/decorators.js';
+import type { SbbOrientation } from '../core/interfaces.js';
+import { SbbNegativeMixin } from '../core/mixins.js';
 
 import style from './divider.scss?lit&inline';
 
@@ -19,11 +19,17 @@ export class SbbDividerElement extends SbbNegativeMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
 
   /** Orientation property with possible values 'horizontal' | 'vertical'. Defaults to horizontal. */
-  @property({ reflect: true }) public orientation?: SbbOrientation = 'horizontal';
+  @property({ reflect: true }) public orientation: SbbOrientation = 'horizontal';
 
-  protected override render(): TemplateResult {
-    setAttribute(this, 'aria-orientation', this.orientation);
+  protected override willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('orientation')) {
+      this.setAttribute('aria-orientation', this.orientation);
+    }
+  }
 
+  protected override render(): TemplateResult {
     return html` <div class="sbb-divider"></div> `;
   }
 }
diff --git a/src/components/divider/index.ts b/src/components/divider/index.ts
deleted file mode 100644
index bf4ed01967..0000000000
--- a/src/components/divider/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './divider';
diff --git a/src/components/divider/readme.md b/src/components/divider/readme.md
index b65dd68718..c1954fd998 100644
--- a/src/components/divider/readme.md
+++ b/src/components/divider/readme.md
@@ -16,7 +16,7 @@ It's also possible to display the component in `negative` variant using the self
 
 ## Properties
 
-| Name          | Attribute     | Privacy | Type                          | Default        | Description                                                                                   |
-| ------------- | ------------- | ------- | ----------------------------- | -------------- | --------------------------------------------------------------------------------------------- |
-| `orientation` | `orientation` | public  | `SbbOrientation \| undefined` | `'horizontal'` | Orientation property with possible values 'horizontal' \| 'vertical'. Defaults to horizontal. |
-| `negative`    | `negative`    | public  | `boolean`                     | `false`        | Negative coloring variant flag.                                                               |
+| Name          | Attribute     | Privacy | Type             | Default        | Description                                                                                   |
+| ------------- | ------------- | ------- | ---------------- | -------------- | --------------------------------------------------------------------------------------------- |
+| `orientation` | `orientation` | public  | `SbbOrientation` | `'horizontal'` | Orientation property with possible values 'horizontal' \| 'vertical'. Defaults to horizontal. |
+| `negative`    | `negative`    | public  | `boolean`        | `false`        | Negative coloring variant flag.                                                               |
diff --git a/src/components/expansion-panel.ts b/src/components/expansion-panel.ts
new file mode 100644
index 0000000000..5e5664417a
--- /dev/null
+++ b/src/components/expansion-panel.ts
@@ -0,0 +1,3 @@
+export * from './expansion-panel/expansion-panel.js';
+export * from './expansion-panel/expansion-panel-content.js';
+export * from './expansion-panel/expansion-panel-header.js';
diff --git a/src/components/expansion-panel/expansion-panel-content.ts b/src/components/expansion-panel/expansion-panel-content.ts
new file mode 100644
index 0000000000..69a30a3390
--- /dev/null
+++ b/src/components/expansion-panel/expansion-panel-content.ts
@@ -0,0 +1 @@
+export * from './expansion-panel-content/expansion-panel-content.js';
diff --git a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.e2e.ts b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.e2e.ts
index 9aa817d32f..75e902f270 100644
--- a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.e2e.ts
+++ b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import { SbbExpansionPanelContentElement } from './expansion-panel-content';
+import { SbbExpansionPanelContentElement } from './expansion-panel-content.js';
 
 describe(`sbb-expansion-panel-content with ${fixture.name}`, () => {
   let element: SbbExpansionPanelContentElement;
diff --git a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss
index 58cf5ef9cb..0aa89537f2 100644
--- a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss
+++ b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss
@@ -1,14 +1,15 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-expansion-panel-content-padding-inline: var(--sbb-spacing-fixed-6x);
   --sbb-expansion-panel-content-padding-inline-start: var(
     --sbb-expansion-panel-content-padding-inline
   );
+
+  display: block;
 }
 
 :host([data-icon-space]) {
diff --git a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.spec.ts b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.spec.ts
index 435620d9db..bd319398fa 100644
--- a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.spec.ts
+++ b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import './expansion-panel-content';
+import './expansion-panel-content.js';
 
 describe(`sbb-expansion-panel-content`, () => {
   it('renders', async () => {
diff --git a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.stories.ts b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.stories.ts
index 052d456f25..5f4b2e71b9 100644
--- a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.stories.ts
+++ b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.stories.ts
@@ -4,7 +4,7 @@ import { html } from 'lit';
 
 import readme from './readme.md?raw';
 
-import '../../card';
+import '../../card.js';
 
 const Template = (): TemplateResult => html`
   <sbb-card color="milk">
diff --git a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.ts b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.ts
index abcd11ddf6..f75db2825d 100644
--- a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.ts
+++ b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.ts
@@ -2,7 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { hostAttributes } from '../../core/common-behaviors';
+import { hostAttributes } from '../../core/decorators.js';
 
 import style from './expansion-panel-content.scss?lit&inline';
 
diff --git a/src/components/expansion-panel/expansion-panel-content/index.ts b/src/components/expansion-panel/expansion-panel-content/index.ts
deleted file mode 100644
index bd7ab61267..0000000000
--- a/src/components/expansion-panel/expansion-panel-content/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './expansion-panel-content';
diff --git a/src/components/expansion-panel/expansion-panel-header.ts b/src/components/expansion-panel/expansion-panel-header.ts
new file mode 100644
index 0000000000..be28523d25
--- /dev/null
+++ b/src/components/expansion-panel/expansion-panel-header.ts
@@ -0,0 +1 @@
+export * from './expansion-panel-header/expansion-panel-header.js';
diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.e2e.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.e2e.ts
index 2d5d311ea1..3124258eb5 100644
--- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.e2e.ts
+++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.e2e.ts
@@ -1,10 +1,10 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy } from '../../core/testing.js';
 
-import { SbbExpansionPanelHeaderElement } from './expansion-panel-header';
+import { SbbExpansionPanelHeaderElement } from './expansion-panel-header.js';
 
 describe(`sbb-expansion-panel-header with ${fixture.name}`, () => {
   let element: SbbExpansionPanelHeaderElement;
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 c7aec04b13..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
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-expansion-panel-header-cursor: pointer;
@@ -14,6 +13,8 @@
   @include sbb.if-forced-colors {
     --sbb-expansion-panel-header-text-color: ButtonText;
   }
+
+  display: block;
 }
 
 :host([disabled]) {
diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts
index 132dbdae2d..db72720674 100644
--- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts
+++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import './expansion-panel-header';
-import '../../icon';
+import './expansion-panel-header.js';
+import '../../icon.js';
 
 describe(`sbb-expansion-panel-header`, () => {
   it('renders collapsed', async () => {
diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.stories.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.stories.ts
index 8dda9bb9d3..cb86cf80c6 100644
--- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.stories.ts
+++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.stories.ts
@@ -4,7 +4,7 @@ import { html } from 'lit';
 
 import readme from './readme.md?raw';
 
-import '../../card';
+import '../../card.js';
 
 const Template = (): TemplateResult => html`
   <sbb-card color="milk">
diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts
index 04bcfbe588..59ddc3bddb 100644
--- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts
+++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts
@@ -1,18 +1,14 @@
-import { type CSSResultGroup, nothing, type TemplateResult } from 'lit';
-import { html } from 'lit';
+import { type CSSResultGroup, html, nothing, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import {
-  NamedSlotStateController,
-  SbbButtonBaseElement,
-  SbbDisabledTabIndexActionMixin,
-  SbbIconNameMixin,
-  hostAttributes,
-} from '../../core/common-behaviors';
-import { EventEmitter, ConnectedAbortController } from '../../core/eventing';
-import type { SbbExpansionPanelElement } from '../expansion-panel';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbConnectedAbortController, SbbSlotStateController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { SbbIconNameMixin } from '../../icon.js';
+import type { SbbExpansionPanelElement } from '../expansion-panel.js';
 
-import '../../icon';
 import style from './expansion-panel-header.scss?lit&inline';
 
 /**
@@ -42,8 +38,8 @@ export class SbbExpansionPanelHeaderElement extends SbbDisabledTabIndexActionMix
       bubbles: true,
     },
   );
-  private _abort = new ConnectedAbortController(this);
-  private _namedSlots = new NamedSlotStateController(this, () => this._setDataIconAttribute());
+  private _abort = new SbbConnectedAbortController(this);
+  private _namedSlots = new SbbSlotStateController(this, () => this._setDataIconAttribute());
 
   public override connectedCallback(): void {
     super.connectedCallback();
diff --git a/src/components/expansion-panel/expansion-panel-header/index.ts b/src/components/expansion-panel/expansion-panel-header/index.ts
deleted file mode 100644
index 5323dabf32..0000000000
--- a/src/components/expansion-panel/expansion-panel-header/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './expansion-panel-header';
diff --git a/src/components/expansion-panel/expansion-panel.ts b/src/components/expansion-panel/expansion-panel.ts
new file mode 100644
index 0000000000..29326b1a46
--- /dev/null
+++ b/src/components/expansion-panel/expansion-panel.ts
@@ -0,0 +1 @@
+export * from './expansion-panel/expansion-panel.js';
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 7816bf8d6f..545cc222d0 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts
@@ -1,13 +1,13 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbExpansionPanelContentElement } from '../expansion-panel-content';
-import '../expansion-panel-content';
-import { SbbExpansionPanelHeaderElement } from '../expansion-panel-header';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing.js';
+import type { SbbExpansionPanelContentElement } from '../expansion-panel-content.js';
+import '../expansion-panel-content.js';
+import { SbbExpansionPanelHeaderElement } from '../expansion-panel-header.js';
 
-import { SbbExpansionPanelElement } from './expansion-panel';
+import { SbbExpansionPanelElement } from './expansion-panel.js';
 
 describe(`sbb-expansion-panel with ${fixture.name}`, () => {
   let element: SbbExpansionPanelElement;
@@ -23,8 +23,8 @@ describe(`sbb-expansion-panel with ${fixture.name}`, () => {
       {
         modules: [
           './expansion-panel.ts',
-          '../expansion-panel-header/index.ts',
-          '../expansion-panel-content/index.ts',
+          '../expansion-panel-header.ts',
+          '../expansion-panel-content.ts',
         ],
       },
     );
@@ -57,8 +57,8 @@ describe(`sbb-expansion-panel with ${fixture.name}`, () => {
       {
         modules: [
           './expansion-panel.ts',
-          '../expansion-panel-header/index.ts',
-          '../expansion-panel-content/index.ts',
+          '../expansion-panel-header.ts',
+          '../expansion-panel-content.ts',
         ],
       },
     );
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.scss b/src/components/expansion-panel/expansion-panel/expansion-panel.scss
index 841fca812e..432eb89cdb 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.scss
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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;
 
 // Open/Close animation vars
 $open-anim-rows-from: 0fr;
@@ -30,6 +29,8 @@ $open-anim-opacity-to: 1;
   // Vars which will be used by child components
   --sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-4x);
   --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
+
+  display: block;
 }
 
 :host([disabled]) {
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts
index 146c99ade4..a84abd6b8c 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbExpansionPanelElement } from './expansion-panel';
+import type { SbbExpansionPanelElement } from './expansion-panel.js';
 
-import './expansion-panel';
-import '../expansion-panel-header';
-import '../expansion-panel-content';
+import './expansion-panel.js';
+import '../expansion-panel-header.js';
+import '../expansion-panel-content.js';
 
 describe(`sbb-expansion-panel`, () => {
   describe('renders', () => {
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 ed8cc67e75..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,16 +10,15 @@ 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 '../../core/dom';
-import { SbbExpansionPanelHeaderElement } from '../expansion-panel-header';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { SbbExpansionPanelHeaderElement } from '../expansion-panel-header.js';
 
-import { SbbExpansionPanelElement } from './expansion-panel';
+import { SbbExpansionPanelElement } from './expansion-panel.js';
 import readme from './readme.md?raw';
 
-import '../expansion-panel-content';
-import '../../icon';
+import '../expansion-panel-content.js';
+import '../../icon.js';
 
 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
@@ -102,8 +101,8 @@ 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,
 };
@@ -141,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 = {
@@ -171,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 = {
@@ -192,21 +191,13 @@ export const LongText: StoryObj = {
   args: { ...defaultArgs, headerText: longText, contentText: longText },
 };
 
-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,
@@ -216,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 52ca80ff33..fbcbda8237 100644
--- a/src/components/expansion-panel/expansion-panel/expansion-panel.ts
+++ b/src/components/expansion-panel/expansion-panel/expansion-panel.ts
@@ -1,15 +1,15 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import { LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { SbbHydrationMixin } from '../../core/common-behaviors';
-import { setAttribute } from '../../core/dom';
-import { EventEmitter, ConnectedAbortController } from '../../core/eventing';
-import type { SbbOverlayState } from '../../core/overlay';
-import type { SbbTitleLevel } from '../../title';
-import type { SbbExpansionPanelContentElement } from '../expansion-panel-content';
-import type { SbbExpansionPanelHeaderElement } from '../expansion-panel-header';
+import { SbbConnectedAbortController } from '../../core/controllers.js';
+import { EventEmitter } from '../../core/eventing.js';
+import type { SbbOpenedClosedState } from '../../core/interfaces.js';
+import { SbbHydrationMixin } from '../../core/mixins.js';
+import type { SbbTitleLevel } from '../../title.js';
+import type { SbbExpansionPanelContentElement } from '../expansion-panel-content.js';
+import type { SbbExpansionPanelHeaderElement } from '../expansion-panel-header.js';
 
 import style from './expansion-panel.scss?lit&inline';
 
@@ -65,7 +65,15 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
   /** Whether the panel has no border. */
   @property({ reflect: true, type: Boolean }) public borderless = false;
 
-  @state() private _state: SbbOverlayState = 'closed';
+  /**
+   * The state of the notification.
+   */
+  private set _state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
+  }
+  private get _state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
+  }
 
   /** Emits whenever the `sbb-expansion-panel` starts the opening transition. */
   private _willOpen: EventEmitter<void> = new EventEmitter(
@@ -95,7 +103,7 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
   private _progressiveId = `-${++nextId}`;
   private _headerRef?: SbbExpansionPanelHeaderElement;
   private _contentRef?: SbbExpansionPanelContentElement;
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
   private _initialized: boolean = false;
 
   public override connectedCallback(): void {
@@ -109,7 +117,7 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
     this._transitionEventController?.abort();
-    this.toggleAttribute('data-accordion', false);
+    this.removeAttribute('data-accordion');
   }
 
   protected override firstUpdated(): void {
@@ -196,7 +204,6 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
   }
 
   protected override render(): TemplateResult {
-    setAttribute(this, 'data-state', this._state);
     const TAGNAME = this.titleLevel ? `h${this.titleLevel}` : 'div';
 
     /* eslint-disable lit/binding-positions */
@@ -212,7 +219,6 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
         </div>
       </div>
     `;
-    /* eslint-disable lit/binding-positions */
   }
 }
 
diff --git a/src/components/expansion-panel/expansion-panel/index.ts b/src/components/expansion-panel/expansion-panel/index.ts
deleted file mode 100644
index b498fbb4d6..0000000000
--- a/src/components/expansion-panel/expansion-panel/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './expansion-panel';
diff --git a/src/components/expansion-panel/index.ts b/src/components/expansion-panel/index.ts
deleted file mode 100644
index 336b111207..0000000000
--- a/src/components/expansion-panel/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './expansion-panel';
-export * from './expansion-panel-content';
-export * from './expansion-panel-header';
diff --git a/src/components/file-selector.ts b/src/components/file-selector.ts
new file mode 100644
index 0000000000..e7ed86ce1f
--- /dev/null
+++ b/src/components/file-selector.ts
@@ -0,0 +1 @@
+export * from './file-selector/file-selector.js';
diff --git a/src/components/file-selector/file-selector.e2e.ts b/src/components/file-selector/file-selector.e2e.ts
index 9352c0af4f..4c0887fcd1 100644
--- a/src/components/file-selector/file-selector.e2e.ts
+++ b/src/components/file-selector/file-selector.e2e.ts
@@ -1,12 +1,12 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbSecondaryButtonElement } from '../button';
-import { EventSpy, waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import type { SbbSecondaryButtonElement } from '../button.js';
+import { fixture } from '../core/testing/private.js';
+import { EventSpy, waitForLitRender } from '../core/testing.js';
 
-import { SbbFileSelectorElement } from './file-selector';
-import '../button/secondary-button';
+import { SbbFileSelectorElement } from './file-selector.js';
+import '../button/secondary-button.js';
 
 function addFilesToComponentInput(
   elem: SbbFileSelectorElement,
diff --git a/src/components/file-selector/file-selector.scss b/src/components/file-selector/file-selector.scss
index 4b8d1dfc77..0eec4f9b3a 100644
--- a/src/components/file-selector/file-selector.scss
+++ b/src/components/file-selector/file-selector.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-file-selector-color: var(--sbb-color-black);
@@ -15,6 +14,7 @@
   );
   --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
 
+  display: block;
   width: #{sbb.px-to-rem-build(320)};
 }
 
diff --git a/src/components/file-selector/file-selector.spec.ts b/src/components/file-selector/file-selector.spec.ts
index cb1657c245..4cfbe386c1 100644
--- a/src/components/file-selector/file-selector.spec.ts
+++ b/src/components/file-selector/file-selector.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
 
-import './file-selector';
+import './file-selector.js';
 
 describe(`sbb-file-selector`, () => {
   it('renders default', async () => {
diff --git a/src/components/file-selector/file-selector.stories.ts b/src/components/file-selector/file-selector.stories.ts
index 68a368dc6f..f88ff6c782 100644
--- a/src/components/file-selector/file-selector.stories.ts
+++ b/src/components/file-selector/file-selector.stories.ts
@@ -4,13 +4,13 @@ import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
-import type { SbbFormErrorElement } from '../form-error';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import type { SbbFormErrorElement } from '../form-error.js';
 
-import { SbbFileSelectorElement } from './file-selector';
+import { SbbFileSelectorElement } from './file-selector.js';
 import readme from './readme.md?raw';
 
-import '../form-error';
+import '../form-error.js';
 
 const variant: InputType = {
   control: {
@@ -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/file-selector/file-selector.ts b/src/components/file-selector/file-selector.ts
index f2da1e737f..49f5bbb696 100644
--- a/src/components/file-selector/file-selector.ts
+++ b/src/components/file-selector/file-selector.ts
@@ -4,26 +4,24 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import type { SbbSecondaryButtonStaticElement } from '../button';
-import { sbbInputModalityDetector } from '../core/a11y';
-import {
-  LanguageController,
-  NamedSlotStateController,
-  SbbDisabledMixin,
-} from '../core/common-behaviors';
-import { EventEmitter } from '../core/eventing';
+import type { SbbSecondaryButtonStaticElement } from '../button.js';
+import { sbbInputModalityDetector } from '../core/a11y.js';
+import { SbbLanguageController, SbbSlotStateController } from '../core/controllers.js';
+import { EventEmitter } from '../core/eventing.js';
 import {
   i18nFileSelectorButtonLabel,
   i18nFileSelectorCurrentlySelected,
   i18nFileSelectorDeleteFile,
   i18nFileSelectorSubtitleLabel,
-} from '../core/i18n';
-import '../button/secondary-button';
-import '../button/secondary-button-static';
-import '../icon';
+} from '../core/i18n.js';
+import { SbbDisabledMixin } from '../core/mixins.js';
 
 import style from './file-selector.scss?lit&inline';
 
+import '../button/secondary-button.js';
+import '../button/secondary-button-static.js';
+import '../icon.js';
+
 export type DOMEvent = globalThis.Event;
 
 /**
@@ -91,11 +89,11 @@ export class SbbFileSelectorElement extends SbbDisabledMixin(LitElement) {
   private _suffixes: string[] = ['B', 'kB', 'MB', 'GB', 'TB'];
   private _liveRegion!: HTMLParagraphElement;
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   private _blockEvent(event: DragEvent): void {
@@ -144,7 +142,7 @@ export class SbbFileSelectorElement extends SbbDisabledMixin(LitElement) {
 
   private _onBlur(): void {
     if (sbbInputModalityDetector.mostRecentModality === 'keyboard') {
-      this._loadButton.toggleAttribute('data-focus-visible', false);
+      this._loadButton.removeAttribute('data-focus-visible');
     }
   }
 
@@ -271,7 +269,6 @@ export class SbbFileSelectorElement extends SbbDisabledMixin(LitElement) {
         )}
       </${unsafeStatic(TAG_NAME.WRAPPER)}>
     `;
-    /* eslint-disable lit/binding-positions */
   }
 
   protected override render(): TemplateResult {
diff --git a/src/components/file-selector/index.ts b/src/components/file-selector/index.ts
deleted file mode 100644
index 8fcce72ed3..0000000000
--- a/src/components/file-selector/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './file-selector';
diff --git a/src/components/footer.ts b/src/components/footer.ts
new file mode 100644
index 0000000000..9c739378a5
--- /dev/null
+++ b/src/components/footer.ts
@@ -0,0 +1 @@
+export * from './footer/footer.js';
diff --git a/src/components/footer/footer.e2e.ts b/src/components/footer/footer.e2e.ts
index ebffd6b2de..415b34294d 100644
--- a/src/components/footer/footer.e2e.ts
+++ b/src/components/footer/footer.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbFooterElement } from './footer';
+import { SbbFooterElement } from './footer.js';
 
 describe(`sbb-footer with ${fixture.name}`, () => {
   let element: SbbFooterElement;
diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss
index b30921764c..2edfc54751 100644
--- a/src/components/footer/footer.scss
+++ b/src/components/footer/footer.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
@@ -14,6 +13,8 @@
   @include sbb.mq($from: small) {
     --sbb-footer-clock-width: #{sbb.px-to-rem-build(112)};
   }
+
+  display: block;
 }
 
 :host([negative]) {
diff --git a/src/components/footer/footer.spec.ts b/src/components/footer/footer.spec.ts
index 4e9faeaa20..48e1b6d8e8 100644
--- a/src/components/footer/footer.spec.ts
+++ b/src/components/footer/footer.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbFooterElement } from './footer';
+import type { SbbFooterElement } from './footer.js';
 
-import './footer';
+import './footer.js';
 
 describe(`sbb-footer`, () => {
   it('renders', async () => {
diff --git a/src/components/footer/footer.stories.ts b/src/components/footer/footer.stories.ts
index ee9f403964..3c3d391a30 100644
--- a/src/components/footer/footer.stories.ts
+++ b/src/components/footer/footer.stories.ts
@@ -1,21 +1,21 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 
-import '../clock';
-import '../button';
-import '../divider';
-import '../link';
-import '../link-list';
-import '../title';
-import './footer';
+import '../clock.js';
+import '../button.js';
+import '../divider.js';
+import '../link.js';
+import '../link-list.js';
+import '../title.js';
+import './footer.js';
 
 const variant: InputType = {
   control: {
@@ -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/footer/footer.ts b/src/components/footer/footer.ts
index 5770afe5bb..8cfc9d690b 100644
--- a/src/components/footer/footer.ts
+++ b/src/components/footer/footer.ts
@@ -3,8 +3,8 @@ import { LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { SbbNegativeMixin } from '../core/common-behaviors';
-import type { SbbTitleLevel } from '../title';
+import { SbbNegativeMixin } from '../core/mixins.js';
+import type { SbbTitleLevel } from '../title.js';
 
 import style from './footer.scss?lit&inline';
 
diff --git a/src/components/footer/index.ts b/src/components/footer/index.ts
deleted file mode 100644
index a058eae01c..0000000000
--- a/src/components/footer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './footer';
diff --git a/src/components/form-error.ts b/src/components/form-error.ts
new file mode 100644
index 0000000000..ed829dac44
--- /dev/null
+++ b/src/components/form-error.ts
@@ -0,0 +1 @@
+export * from './form-error/form-error.js';
diff --git a/src/components/form-error/__snapshots__/form-error.spec.snap.js b/src/components/form-error/__snapshots__/form-error.spec.snap.js
index 0fea97c31a..8c65c24270 100644
--- a/src/components/form-error/__snapshots__/form-error.spec.snap.js
+++ b/src/components/form-error/__snapshots__/form-error.spec.snap.js
@@ -1,7 +1,14 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-form-error renders"] = 
+snapshots["sbb-form-error renders DOM"] = 
+`<sbb-form-error id="sbb-form-error-0">
+  Required
+</sbb-form-error>
+`;
+/* end snapshot sbb-form-error renders DOM */
+
+snapshots["sbb-form-error renders Shadow DOM"] = 
 `<span class="form-error__icon">
   <slot name="icon">
   </slot>
@@ -11,9 +18,9 @@ snapshots["sbb-form-error renders"] =
   </slot>
 </span>
 `;
-/* end snapshot sbb-form-error renders */
+/* end snapshot sbb-form-error renders Shadow DOM */
 
-snapshots["sbb-form-error A11y tree Chrome"] = 
+snapshots["sbb-form-error renders A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -27,9 +34,9 @@ snapshots["sbb-form-error A11y tree Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-form-error A11y tree Chrome */
+/* end snapshot sbb-form-error renders A11y tree Chrome */
 
-snapshots["sbb-form-error A11y tree Firefox"] = 
+snapshots["sbb-form-error renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -43,5 +50,5 @@ snapshots["sbb-form-error A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-form-error A11y tree Firefox */
+/* end snapshot sbb-form-error renders A11y tree Firefox */
 
diff --git a/src/components/form-error/form-error.e2e.ts b/src/components/form-error/form-error.e2e.ts
index 2e8009994f..6d3b148b1a 100644
--- a/src/components/form-error/form-error.e2e.ts
+++ b/src/components/form-error/form-error.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbFormErrorElement } from './form-error';
+import { SbbFormErrorElement } from './form-error.js';
 
 describe(`sbb-form-error with ${fixture.name}`, () => {
   let element: SbbFormErrorElement;
diff --git a/src/components/form-error/form-error.scss b/src/components/form-error/form-error.scss
index 58d1adb0d1..7f8d699f8f 100644
--- a/src/components/form-error/form-error.scss
+++ b/src/components/form-error/form-error.scss
@@ -1,16 +1,16 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-form-error-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
   --sbb-form-error-color: var(--sbb-color-red125);
+  --sbb-form-error-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
+  --sbb-form-error-icon-size: #{sbb.px-to-rem-build(17)};
 
   // Overrides sbb icon
-  --sbb-icon-svg-width: var(--sbb-size-icon-form-error);
-  --sbb-icon-svg-height: var(--sbb-size-icon-form-error);
+  --sbb-icon-svg-width: var(--sbb-form-error-icon-size);
+  --sbb-icon-svg-height: var(--sbb-form-error-icon-size);
 
   @include sbb.if-forced-colors {
     --sbb-form-error-color: LinkText !important;
diff --git a/src/components/form-error/form-error.spec.ts b/src/components/form-error/form-error.spec.ts
index 395f53024d..f28e9e2ba4 100644
--- a/src/components/form-error/form-error.spec.ts
+++ b/src/components/form-error/form-error.spec.ts
@@ -1,21 +1,28 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import './form-error';
+import type { SbbFormErrorElement } from './form-error.js';
+
+import './form-error.js';
 
 describe(`sbb-form-error`, () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-form-error>Required</sbb-form-error>`);
-
-    expect(root).dom.to.be.equal(`
-      <sbb-form-error id="sbb-form-error-1">
-        Required
-      </sbb-form-error>
-    `);
-    await expect(root).shadowDom.to.be.equalSnapshot();
-  });
+  let element: SbbFormErrorElement;
+
+  describe('renders', async () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-form-error>Required</sbb-form-error>`);
+    });
 
-  testA11yTreeSnapshot(html`<sbb-form-error>Required</sbb-form-error>`);
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
 });
diff --git a/src/components/form-error/form-error.stories.ts b/src/components/form-error/form-error.stories.ts
index 90ea0522e8..d82ff3209c 100644
--- a/src/components/form-error/form-error.stories.ts
+++ b/src/components/form-error/form-error.stories.ts
@@ -2,17 +2,12 @@ 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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import '../icon';
-import './form-error';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import '../icon.js';
+import './form-error.js';
 
 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
@@ -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-error/form-error.ts b/src/components/form-error/form-error.ts
index ae0406cfd6..48a06ddeac 100644
--- a/src/components/form-error/form-error.ts
+++ b/src/components/form-error/form-error.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { assignId } from '../core/a11y';
-import { SbbNegativeMixin } from '../core/common-behaviors';
-import { isValidAttribute } from '../core/dom';
+import { SbbNegativeMixin } from '../core/mixins.js';
 
 import style from './form-error.scss?lit&inline';
 
@@ -22,15 +20,14 @@ export class SbbFormErrorElement extends SbbNegativeMixin(LitElement) {
 
   public override connectedCallback(): void {
     super.connectedCallback();
+    this.id ||= `sbb-form-error-${nextId++}`;
     const formField = this.closest?.('sbb-form-field') ?? this.closest?.('[data-form-field]');
     if (formField) {
-      this.negative = isValidAttribute(formField, 'negative');
+      this.negative = formField.hasAttribute('negative');
     }
   }
 
   protected override render(): TemplateResult {
-    assignId(() => `sbb-form-error-${++nextId}`)(this);
-
     return html`
       <span class="form-error__icon">
         <slot name="icon">
diff --git a/src/components/form-error/index.ts b/src/components/form-error/index.ts
deleted file mode 100644
index fcaf6f8b8b..0000000000
--- a/src/components/form-error/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './form-error';
diff --git a/src/components/form-field.ts b/src/components/form-field.ts
new file mode 100644
index 0000000000..348ff6a6c4
--- /dev/null
+++ b/src/components/form-field.ts
@@ -0,0 +1,2 @@
+export * from './form-field/form-field.js';
+export * from './form-field/form-field-clear.js';
diff --git a/src/components/form-field/form-field-clear.ts b/src/components/form-field/form-field-clear.ts
new file mode 100644
index 0000000000..94c8c1b59d
--- /dev/null
+++ b/src/components/form-field/form-field-clear.ts
@@ -0,0 +1 @@
+export * from './form-field-clear/form-field-clear.js';
diff --git a/src/components/form-field/form-field-clear/form-field-clear.e2e.ts b/src/components/form-field/form-field-clear/form-field-clear.e2e.ts
index b38771bdfb..fd11ae7371 100644
--- a/src/components/form-field/form-field-clear/form-field-clear.e2e.ts
+++ b/src/components/form-field/form-field-clear/form-field-clear.e2e.ts
@@ -1,11 +1,11 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import { SbbFormFieldElement } from '../form-field';
+import { fixture } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
+import { SbbFormFieldElement } from '../form-field.js';
 
-import { SbbFormFieldClearElement } from './form-field-clear';
+import { SbbFormFieldClearElement } from './form-field-clear.js';
 
 describe(`sbb-form-field-clear with ${fixture.name}`, () => {
   let element: SbbFormFieldClearElement;
@@ -19,7 +19,7 @@ describe(`sbb-form-field-clear with ${fixture.name}`, () => {
         <input id="input" type="text" placeholder="Input placeholder" value="Input value" />
         <sbb-form-field-clear></sbb-form-field-clear>
       </sbb-form-field>`,
-      { modules: ['../form-field/index.ts', './form-field-clear.ts'] },
+      { modules: ['../form-field.ts', './form-field-clear.ts'] },
     );
     element = formField.querySelector<SbbFormFieldClearElement>('sbb-form-field-clear')!;
     input = formField.querySelector<HTMLInputElement>('input')!;
@@ -42,7 +42,7 @@ describe(`sbb-form-field-clear with ${fixture.name}`, () => {
   });
 
   it('is hidden if the form field is disabled', async () => {
-    input.setAttribute('disabled', '');
+    input.toggleAttribute('disabled', true);
 
     await waitForLitRender(element);
 
@@ -50,7 +50,7 @@ describe(`sbb-form-field-clear with ${fixture.name}`, () => {
   });
 
   it('is hidden if the form field is readonly', async () => {
-    input.setAttribute('readonly', '');
+    input.toggleAttribute('readonly', true);
 
     await waitForLitRender(element);
 
diff --git a/src/components/form-field/form-field-clear/form-field-clear.scss b/src/components/form-field/form-field-clear/form-field-clear.scss
index bf7dad4273..a9a859d44b 100644
--- a/src/components/form-field/form-field-clear/form-field-clear.scss
+++ b/src/components/form-field/form-field-clear/form-field-clear.scss
@@ -1,10 +1,11 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
+  display: block;
+
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
diff --git a/src/components/form-field/form-field-clear/form-field-clear.spec.ts b/src/components/form-field/form-field-clear/form-field-clear.spec.ts
index 9b280cfe0f..927a086120 100644
--- a/src/components/form-field/form-field-clear/form-field-clear.spec.ts
+++ b/src/components/form-field/form-field-clear/form-field-clear.spec.ts
@@ -1,12 +1,12 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import type { SbbFormFieldElement } from '../form-field';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import type { SbbFormFieldElement } from '../form-field.js';
 
-import type { SbbFormFieldClearElement } from './form-field-clear';
-import './form-field-clear';
-import '../form-field';
+import type { SbbFormFieldClearElement } from './form-field-clear.js';
+import './form-field-clear.js';
+import '../form-field.js';
 
 describe(`sbb-form-field-clear`, () => {
   describe('renders', () => {
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 c5866ea520..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,17 +10,12 @@ 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 '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './form-field-clear';
-import '../form-field';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import './form-field-clear.js';
+import '../form-field.js';
 
 const negativeArg: InputType = {
   control: {
@@ -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-clear/form-field-clear.ts b/src/components/form-field/form-field-clear/form-field-clear.ts
index 8021b21dae..4802b75522 100644
--- a/src/components/form-field/form-field-clear/form-field-clear.ts
+++ b/src/components/form-field/form-field-clear/form-field-clear.ts
@@ -2,20 +2,18 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import {
-  hostAttributes,
-  LanguageController,
-  SbbButtonBaseElement,
-  SbbNegativeMixin,
-} from '../../core/common-behaviors';
-import { hostContext, isValidAttribute } from '../../core/dom';
-import { ConnectedAbortController } from '../../core/eventing';
-import { i18nClearInput } from '../../core/i18n';
-import type { SbbFormFieldElement } from '../form-field';
-import '../../icon';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { hostContext } from '../../core/dom.js';
+import { i18nClearInput } from '../../core/i18n.js';
+import { SbbNegativeMixin } from '../../core/mixins.js';
+import type { SbbFormFieldElement } from '../form-field.js';
 
 import style from './form-field-clear.scss?lit&inline';
 
+import '../../icon.js';
+
 /**
  * Combined with `sbb-form-field`, it displays a button which clears the input value.
  */
@@ -27,8 +25,8 @@ export class SbbFormFieldClearElement extends SbbNegativeMixin(SbbButtonBaseElem
   public static override styles: CSSResultGroup = style;
 
   private _formField?: SbbFormFieldElement;
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this);
+  private _abort = new SbbConnectedAbortController(this);
+  private _language = new SbbLanguageController(this);
 
   public override connectedCallback(): void {
     super.connectedCallback();
@@ -39,7 +37,7 @@ export class SbbFormFieldClearElement extends SbbNegativeMixin(SbbButtonBaseElem
       (hostContext('[data-form-field]', this) as SbbFormFieldElement);
 
     if (this._formField) {
-      this.negative = isValidAttribute(this._formField, 'negative');
+      this.negative = this._formField.hasAttribute('negative');
     }
   }
 
diff --git a/src/components/form-field/form-field-clear/index.ts b/src/components/form-field/form-field-clear/index.ts
deleted file mode 100644
index 54a7606bcd..0000000000
--- a/src/components/form-field/form-field-clear/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './form-field-clear';
diff --git a/src/components/form-field/form-field.ts b/src/components/form-field/form-field.ts
new file mode 100644
index 0000000000..8bbb38c246
--- /dev/null
+++ b/src/components/form-field/form-field.ts
@@ -0,0 +1 @@
+export * from './form-field/form-field.js';
diff --git a/src/components/form-field/form-field/form-field.e2e.ts b/src/components/form-field/form-field/form-field.e2e.ts
index 018c6ee65a..24649e64ee 100644
--- a/src/components/form-field/form-field/form-field.e2e.ts
+++ b/src/components/form-field/form-field/form-field.e2e.ts
@@ -2,12 +2,12 @@ import { assert, expect, nextFrame } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import { SbbOptionElement } from '../../option';
-import { SbbSelectElement } from '../../select';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, waitForLitRender } from '../../core/testing.js';
+import { SbbOptionElement } from '../../option.js';
+import { SbbSelectElement } from '../../select.js';
 
-import { SbbFormFieldElement } from './form-field';
+import { SbbFormFieldElement } from './form-field.js';
 
 describe(`sbb-form-field with ${fixture.name}`, () => {
   describe('with input', () => {
@@ -129,6 +129,147 @@ describe(`sbb-form-field with ${fixture.name}`, () => {
     });
   });
 
+  describe('with textarea', () => {
+    let element: SbbFormFieldElement;
+    let textarea: HTMLTextAreaElement;
+
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-form-field><textarea></textarea></sbb-form-field>`, {
+        modules: ['./form-field.ts'],
+      });
+      textarea = element.querySelector<HTMLTextAreaElement>('textarea')!;
+    });
+
+    it('renders', async () => {
+      assert.instanceOf(element, SbbFormFieldElement);
+    });
+
+    it('should set default rows', () => {
+      expect(textarea.rows).to.be.equal(3);
+    });
+
+    it('should respect user defined rows attribute', async () => {
+      element = await fixture(
+        html`<sbb-form-field><textarea rows="2"></textarea></sbb-form-field>`,
+        {
+          modules: ['./form-field.ts'],
+        },
+      );
+      expect(element.querySelector<HTMLTextAreaElement>('textarea')!.rows).to.be.equal(2);
+    });
+
+    it('should respect changing rows at a later time', async () => {
+      textarea.rows = 1;
+      expect(textarea.rows).to.be.equal(1);
+
+      textarea.setAttribute('rows', '4');
+      expect(textarea.rows).to.be.equal(4);
+    });
+
+    it('should update empty input state', async () => {
+      expect(element).to.have.attribute('data-input-empty');
+
+      textarea.focus();
+      await sendKeys({ type: 'v' });
+      await waitForLitRender(element);
+      expect(element).not.to.have.attribute('data-input-empty');
+
+      await sendKeys({ press: 'Backspace' });
+      await waitForLitRender(element);
+      expect(element).to.have.attribute('data-input-empty');
+
+      await sendKeys({ type: 'v' });
+      await waitForLitRender(element);
+      expect(element).not.to.have.attribute('data-input-empty');
+
+      // Clearing value programmatically which does not trigger input event but can be caught by blur event.
+      textarea.value = '';
+      textarea.blur();
+      await waitForLitRender(element);
+      expect(element).to.have.attribute('data-input-empty');
+    });
+
+    it('should react to focus state', async () => {
+      element = await fixture(
+        html`
+          <sbb-form-field><textarea></textarea></sbb-form-field>
+          <button></button>
+        `,
+        { modules: ['./form-field.ts'] },
+      );
+      textarea = element.querySelector<HTMLTextAreaElement>('textarea')!;
+
+      expect(element).not.to.have.attribute('data-input-focused');
+
+      textarea.focus();
+      await sendKeys({ type: 'v' });
+      await waitForLitRender(element);
+      expect(element).to.have.attribute('data-input-focused');
+
+      textarea.focus();
+      await sendKeys({ press: 'Tab' });
+      await waitForLitRender(element);
+
+      expect(element).not.to.have.attribute('data-input-focused');
+    });
+
+    it('should assign id to input and reference it in the label', async () => {
+      const newLabel = document.createElement('label');
+      newLabel.textContent = 'Example';
+      element.prepend(newLabel);
+
+      await waitForLitRender(element);
+      const label = element.querySelector('label');
+
+      expect(textarea.id).to.match(/^sbb-form-field-input-/);
+      expect(label).to.have.attribute('for', textarea.id);
+    });
+
+    it('should reference sbb-form-error', async () => {
+      // When adding a sbb-form-error
+      const formError = document.createElement('sbb-form-error');
+      element.append(formError);
+      await waitForLitRender(element);
+      await nextFrame();
+
+      // Then input should be linked and sbb-form-error configured
+      expect(textarea)
+        .to.have.attribute('aria-describedby')
+        .match(/^sbb-form-field-error-/);
+      expect(formError.id).to.be.equal(textarea.getAttribute('aria-describedby'));
+      expect(formError).to.have.attribute('role', 'status');
+
+      // When removing sbb-form-error
+      formError.remove();
+      await waitForLitRender(element);
+
+      // Then aria-describedby should be removed
+      expect(textarea).not.to.have.attribute('aria-describedby');
+    });
+
+    it('should reference sbb-form-error with original aria-describedby', async () => {
+      textarea.setAttribute('aria-describedby', 'foo');
+      // When adding a sbb-form-error
+      const formError = document.createElement('sbb-form-error');
+      element.append(formError);
+      await waitForLitRender(element);
+      await nextFrame();
+
+      // Then input should be linked and original aria-describedby preserved
+      expect(textarea)
+        .to.have.attribute('aria-describedby')
+        .match(/^foo sbb-form-field-error-/);
+
+      // When removing sbb-form-error
+
+      formError.remove();
+      await waitForLitRender(element);
+
+      // Then aria-describedby should be set to foo
+      expect(textarea).to.have.attribute('aria-describedby');
+    });
+  });
+
   describe('with sbb-select', () => {
     let element: SbbFormFieldElement;
     let select: SbbSelectElement;
@@ -141,7 +282,7 @@ describe(`sbb-form-field with ${fixture.name}`, () => {
             <sbb-select><sbb-option>Test</sbb-option></sbb-select>
           </sbb-form-field>
         `,
-        { modules: ['./form-field.ts', '../../select/index.ts', '../../option/index.ts'] },
+        { modules: ['./form-field.ts', '../../select.ts', '../../option.ts'] },
       );
       select = element.querySelector<SbbSelectElement>('sbb-select')!;
     });
@@ -175,7 +316,7 @@ describe(`sbb-form-field with ${fixture.name}`, () => {
     });
 
     it('should focus select on form field click readonly', async () => {
-      select.setAttribute('readonly', '');
+      select.toggleAttribute('readonly', true);
       await waitForLitRender(element);
 
       expect(element).not.to.have.attribute('data-input-focused');
@@ -246,7 +387,7 @@ describe(`sbb-form-field with ${fixture.name}`, () => {
             </sbb-select>
           </sbb-form-field>
         `,
-        { modules: ['./form-field.ts', '../../select/index.ts', '../../option/index.ts'] },
+        { modules: ['./form-field.ts', '../../select.ts', '../../option.ts'] },
       );
 
       expect(element).to.have.attribute('data-input-empty');
@@ -262,7 +403,7 @@ describe(`sbb-form-field with ${fixture.name}`, () => {
             </sbb-select>
           </sbb-form-field>
         `,
-        { modules: ['./form-field.ts', '../../select/index.ts', '../../option/index.ts'] },
+        { modules: ['./form-field.ts', '../../select.ts', '../../option.ts'] },
       );
 
       expect(element).not.to.have.attribute('data-input-empty');
@@ -275,7 +416,7 @@ describe(`sbb-form-field with ${fixture.name}`, () => {
             <sbb-option value="1" selected>Displayed Value</sbb-option>
           </sbb-select>
         </sbb-form-field>`,
-        { modules: ['./form-field.ts', '../../select/index.ts', '../../option/index.ts'] },
+        { modules: ['./form-field.ts', '../../select.ts', '../../option.ts'] },
       );
 
       element.querySelector<SbbSelectElement>('sbb-select')!.value = '';
diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss
index a307d02272..72ba435f5e 100644
--- a/src/components/form-field/form-field/form-field.scss
+++ b/src/components/form-field/form-field/form-field.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-form-field-background-color: var(--sbb-color-white);
@@ -10,7 +9,7 @@
   --sbb-form-field-border-style: solid;
   --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
   --sbb-form-field-border-width: var(--sbb-border-width-1x);
-  --sbb-form-field-height: var(--sbb-size-form-element-m-min-height);
+  --sbb-form-field-min-height: var(--sbb-size-element-m);
   --sbb-form-field-label-color: var(--sbb-color-metal);
   --sbb-form-field-prefix-color: var(--sbb-color-metal);
   --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
@@ -19,11 +18,24 @@
   --sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);
   --sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);
   --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-form-field-label-to-input-gap: calc(-1 * var(--sbb-spacing-fixed-1x));
+  --sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
   --sbb-form-field-select-inline-padding-end: calc(
     var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)
   );
   --sbb-form-field-overflow: hidden;
+  --sbb-form-field-label-size: calc(
+    var(--sbb-font-size-text-xs) * var(--sbb-typo-line-height-body-text)
+  );
+  --sbb-form-field-input-size: calc(
+    var(--sbb-font-size-text-m) * var(--sbb-typo-line-height-body-text)
+  );
+  --sbb-form-field-margin-block-start: calc(
+    (
+        var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(
+            --sbb-form-field-input-size
+          ) + var(--sbb-form-field-label-to-input-overlapping)
+      ) / 2
+  );
 
   // Lock sbb-icon size
   --sbb-icon-svg-width: var(--sbb-size-icon-ui-small);
@@ -60,12 +72,12 @@
 }
 
 :host([size='l']) {
-  --sbb-form-field-height: var(--sbb-size-form-element-l-min-height);
+  --sbb-form-field-min-height: var(--sbb-size-element-l);
   --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);
 }
 
 :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);
@@ -154,10 +166,18 @@
   }
 }
 
-// Should be after other definitions to override overflow and background
+:host(:is(:not([data-slot-names~='label'], [label]), [hidden-label])) {
+  --sbb-form-field-label-size: 0rem;
+  --sbb-form-field-label-to-input-overlapping: 0rem;
+}
+
+// Should be after other definitions to override overflow
 :host([data-input-type='sbb-slider']) {
   --sbb-form-field-overflow: visible;
-  --sbb-form-field-background-color: var(--sbb-color-white);
+}
+
+:host([data-input-type='textarea']) {
+  --sbb-form-field-max-height: fit-content;
 }
 
 .sbb-form-field__space-wrapper {
@@ -169,14 +189,24 @@
 
 .sbb-form-field__wrapper {
   display: flex;
-  align-items: center;
   gap: var(--sbb-form-field-gap);
-  padding-inline: calc(var(--sbb-form-field-padding-inline) - var(--sbb-form-field-border-width));
-  border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style)
-    var(--sbb-form-field-border-color);
+  padding-inline: var(--sbb-form-field-padding-inline);
   border-radius: var(--sbb-form-field-border-radius);
-  height: var(--sbb-form-field-height);
+  min-height: var(--sbb-form-field-min-height);
+  max-height: var(--sbb-form-field-max-height);
   background-color: var(--sbb-form-field-background-color);
+  position: relative;
+
+  // Use ::before to avoid content shifting when border width changes.
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0;
+    border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style)
+      var(--sbb-form-field-border-color);
+    border-radius: var(--sbb-form-field-border-radius);
+  }
 
   :host([data-input-focused][data-focus-origin='keyboard']) & {
     @include sbb.focus-outline;
@@ -185,33 +215,34 @@
   // In high contrast, there is no borderless variant
   @media (forced-colors: none) {
     :host(:is([borderless], [data-input-type='sbb-slider'])) & {
-      border-color: transparent;
+      &::before {
+        border-color: transparent;
+      }
     }
 
     :host(:is([data-input-focused], [data-has-popup-open])[borderless]) & {
-      position: relative;
-
       &::after {
         content: '';
         position: absolute;
         border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style)
           var(--sbb-form-field-border-color);
-        inset-inline: calc(var(--sbb-form-field-padding-inline) - 2 * var(--sbb-border-width-1x));
-        inset-block-end: calc(-2 * var(--sbb-border-width-1x));
+        inset-inline: var(--sbb-form-field-padding-inline);
+        inset-block-end: 0;
       }
     }
   }
 }
 
+::slotted(*[slot='prefix']) {
+  color: var(--sbb-form-field-prefix-color);
+}
+
 // Ensure slotted inline elements are vertically centered
 ::slotted(*[slot='prefix']),
 ::slotted(*[slot='suffix']) {
-  min-width: var(--sbb-icon-svg-width);
   display: flex;
-}
-
-::slotted(*[slot='prefix']) {
-  color: var(--sbb-form-field-prefix-color);
+  min-width: var(--sbb-icon-svg-width);
+  margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);
 }
 
 ::slotted(sbb-form-field-clear) {
@@ -220,6 +251,11 @@
   }
 }
 
+// As the calendar should be shown below the form field border, we have to stretch the toggle's height.
+::slotted(sbb-datepicker-toggle) {
+  height: calc((var(--sbb-form-field-min-height) + var(--sbb-size-icon-ui-small)) / 2);
+}
+
 @include sbb.if-forced-colors {
   // Align with prefix color
   ::slotted(*[slot='suffix']) {
@@ -230,8 +266,9 @@
 .sbb-form-field__select-input-icon {
   @include sbb.absolute-center-y;
 
-  inset-inline-end: 0;
   position: absolute;
+  inset-inline-end: 0;
+  margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);
   pointer-events: none;
   color: var(--sbb-form-field-arrow-color);
 }
@@ -239,6 +276,7 @@
 .sbb-form-field__input-container {
   flex: 1 1 auto;
   position: relative;
+  margin-block-start: var(--sbb-form-field-margin-block-start);
 
   // Prevents overflowing parent
   min-width: 0;
@@ -249,7 +287,7 @@
   height: calc(var(--sbb-font-size-text-xs) * var(--sbb-typo-line-height-body-text));
 
   // Moves label down and input up to meet positioning requirements
-  margin-block-end: var(--sbb-form-field-label-to-input-gap);
+  margin-block-end: calc(-1 * var(--sbb-form-field-label-to-input-overlapping));
 }
 
 // To avoid doubled payload, we group the rules.
@@ -317,7 +355,7 @@
 
 // Input
 
-.sbb-form-field__input ::slotted(:where(input, select, sbb-select)) {
+.sbb-form-field__input ::slotted(:where(input, select, textarea, sbb-select)) {
   @include sbb.text-m--regular;
   @include sbb.ellipsis;
   @include sbb.input-reset;
@@ -370,9 +408,25 @@
   padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
 }
 
+.sbb-form-field__input ::slotted(textarea) {
+  @include sbb.scrollbar;
+
+  position: relative;
+  resize: none;
+
+  // White-space break needed for Firefox
+  white-space: break-spaces;
+  overflow-y: auto;
+  min-height: calc((var(--sbb-typo-line-height-body-text) * 1em));
+
+  :host([negative]) & {
+    @include sbb.scrollbar($negative: true);
+  }
+}
+
 .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.spec.ts b/src/components/form-field/form-field/form-field.spec.ts
index e4ad14bb25..9adc4ee142 100644
--- a/src/components/form-field/form-field/form-field.spec.ts
+++ b/src/components/form-field/form-field/form-field.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import './form-field';
-import '../../form-error';
-import type { SbbFormFieldElement } from './form-field';
+import './form-field.js';
+import '../../form-error.js';
+import type { SbbFormFieldElement } from './form-field.js';
 
 describe(`sbb-form-field`, () => {
   describe('renders input', () => {
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 466eb84ac5..f554458b04 100644
--- a/src/components/form-field/form-field/form-field.stories.ts
+++ b/src/components/form-field/form-field/form-field.stories.ts
@@ -4,21 +4,49 @@ import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
-import type { SbbFormErrorElement } from '../../form-error';
+import type { SbbFormErrorElement } from '../../form-error.js';
 
 import readme from './readme.md?raw';
-import './form-field';
-import '../form-field-clear';
-import '../../button/mini-button';
-import '../../form-error';
-import '../../link';
-import '../../popover';
-import '../../title';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import './form-field.js';
+import '../form-field-clear.js';
+import '../../button/mini-button.js';
+import '../../form-error.js';
+import '../../link.js';
+import '../../popover.js';
+import '../../title.js';
+
+const formField = (
+  {
+    'error-space': errorSpace,
+    label,
+    optional,
+    size,
+    borderless,
+    width,
+    negative,
+    'hidden-label': hiddenLabel,
+    'floating-label': floatingLabel,
+    slottedLabel,
+  }: Args,
+  template: TemplateResult,
+): TemplateResult =>
+  html`<sbb-form-field
+    error-space=${errorSpace}
+    ?optional=${optional}
+    size=${size}
+    ?borderless=${borderless}
+    width=${width}
+    ?hidden-label=${hiddenLabel}
+    ?floating-label=${floatingLabel}
+    ?negative=${negative}
+  >
+    ${label && !slottedLabel
+      ? html`<label>${label}</label>`
+      : label && slottedLabel
+        ? html`<span slot="label">${label}</span>`
+        : nothing}
+    ${template}
+  </sbb-form-field>`;
 
 const PopoverTrigger = (): TemplateResult => html`
   <sbb-popover-trigger
@@ -63,58 +91,26 @@ const TemplateBasicSelect = ({ cssClass, disabled }: Args): TemplateResult => ht
   </select>
 `;
 
-const TemplateInput = ({
-  'error-space': errorSpace,
-  label,
-  optional,
-  size,
-  borderless,
-  width,
-  negative,
-  'hidden-label': hiddenLabel,
-  'floating-label': floatingLabel,
-  ...args
-}: Args): TemplateResult => html`
-  <sbb-form-field
-    error-space=${errorSpace}
-    ?optional=${optional}
-    size=${size}
-    ?borderless=${borderless}
-    width=${width}
-    ?hidden-label=${hiddenLabel}
-    ?floating-label=${floatingLabel}
-    ?negative=${negative}
+const TemplateBasicTextarea = ({
+  cssClass,
+  placeholder,
+  disabled,
+  readonly,
+  value,
+}: Args): TemplateResult =>
+  html` <textarea
+    class=${cssClass}
+    placeholder=${placeholder}
+    ?disabled=${disabled}
+    ?readonly=${readonly}
   >
-    ${label ? html`<label>${label}</label>` : nothing} ${TemplateBasicInput(args)}
-  </sbb-form-field>
-`;
+${value}</textarea
+  >`;
 
-const TemplateInputWithSlottedSpanLabel = ({
-  'error-space': errorSpace,
-  label,
-  optional,
-  size,
-  borderless,
-  width,
-  negative,
-  'hidden-label': hiddenLabel,
-  'floating-label': floatingLabel,
-  ...args
-}: Args): TemplateResult => html`
-  <sbb-form-field
-    error-space=${errorSpace}
-    ?optional=${optional}
-    size=${size}
-    ?borderless=${borderless}
-    width=${width}
-    ?hidden-label=${hiddenLabel}
-    ?floating-label=${floatingLabel}
-    ?negative=${negative}
-  >
-    <span slot="label">${label}</span>
-    ${TemplateBasicInput(args)}
-  </sbb-form-field>
-`;
+const TemplateInput = (args: Args): TemplateResult => formField(args, TemplateBasicInput(args));
+
+const TemplateInputWithSlottedSpanLabel = (args: Args): TemplateResult =>
+  formField({ ...args, slottedLabel: true }, TemplateBasicInput(args));
 
 const TemplateInputWithErrorSpace = (args: Args): TemplateResult => {
   const sbbFormError: SbbFormErrorElement = document.createElement('sbb-form-error');
@@ -124,35 +120,26 @@ const TemplateInputWithErrorSpace = (args: Args): TemplateResult => {
   return html`
     <form>
       <div>
-        <sbb-form-field
-          error-space=${args['error-space']}
-          ?optional=${args.optional}
-          size=${args.size}
-          ?borderless=${args.borderless}
-          width=${args.width}
-          ?hidden-label=${args['hidden-label']}
-          ?floating-label=${args['floating-label']}
-          ?negative=${args.negative}
-        >
-          ${args.label ? html`<label>${args.label}</label>` : nothing}
-          <input
-            @keyup=${(event: KeyboardEvent) => {
-              const input = event.currentTarget as HTMLInputElement;
-              if (input.value !== '') {
-                sbbFormError.remove();
-                input.classList.remove(args.cssClass);
-              } else {
-                input.closest('sbb-form-field')!.append(sbbFormError);
-                input.classList.add(args.cssClass);
-              }
-            }}
-            class=${args.cssClass}
-            placeholder=${args.placeholder}
-            ?disabled=${args.disabled}
-            ?readonly=${args.readonly}
-          />
-          ${sbbFormError}
-        </sbb-form-field>
+        ${formField(
+          args,
+          html`<input
+              @keyup=${(event: KeyboardEvent) => {
+                const input = event.currentTarget as HTMLInputElement;
+                if (input.value !== '') {
+                  sbbFormError.remove();
+                  input.classList.remove(args.cssClass);
+                } else {
+                  input.closest('sbb-form-field')!.append(sbbFormError);
+                  input.classList.add(args.cssClass);
+                }
+              }}
+              class=${args.cssClass}
+              placeholder=${args.placeholder}
+              ?disabled=${args.disabled}
+              ?readonly=${args.readonly}
+            />
+            ${sbbFormError}`,
+        )}
       </div>
       <div style="color: var(--sbb-color-smoke);">
         Some text, right below the form-field, inside a div.
@@ -161,64 +148,96 @@ const TemplateInputWithErrorSpace = (args: Args): TemplateResult => {
   `;
 };
 
-const TemplateInputWithIcons = ({ label, ...args }: Args): TemplateResult => html`
-  <sbb-form-field ${sbbSpread(args)}>
-    ${label ? html`<label>${label}</label>` : nothing}
-    <sbb-icon slot="prefix" name="pie-small"></sbb-icon>
-    ${TemplateBasicInput(args)} ${PopoverTrigger()}
-  </sbb-form-field>
-`;
+const TemplateInputWithIcons = (args: Args): TemplateResult =>
+  formField(
+    args,
+    html`<sbb-icon slot="prefix" name="pie-small"></sbb-icon> ${TemplateBasicInput(args)}
+      ${PopoverTrigger()}`,
+  );
 
 const TemplateInputWithMiniButton = ({
-  label,
   disabled,
   readonly,
   active,
   ...args
-}: Args): TemplateResult => html`
-  <sbb-form-field ${sbbSpread(args)}>
-    ${label ? html`<label>${label}</label>` : nothing}
-    ${TemplateBasicInput({ disabled, readonly, ...args })}
-    <sbb-mini-button
-      slot="suffix"
-      icon-name="pie-small"
-      ?disabled=${disabled || readonly}
-      aria-label="Input button"
-      ?data-active=${active}
-    ></sbb-mini-button>
-  </sbb-form-field>
-`;
+}: Args): TemplateResult =>
+  formField(
+    args,
+    html`${TemplateBasicInput({ disabled, readonly, ...args })}
+      <sbb-mini-button
+        slot="suffix"
+        icon-name="pie-small"
+        ?disabled=${disabled || readonly}
+        aria-label="Input button"
+        ?data-active=${active}
+      ></sbb-mini-button>`,
+  );
+
+const TemplateInputWithClearButton = ({ active, ...args }: Args): TemplateResult =>
+  formField(
+    args,
+    html`${TemplateBasicInput(args)}
+      <sbb-form-field-clear ?data-active=${active}></sbb-form-field-clear>`,
+  );
+
+const TemplateSelect = (args: Args): TemplateResult => formField(args, TemplateBasicSelect(args));
 
-const TemplateInputWithClearButton = ({
-  label,
-  disabled,
-  readonly,
-  active,
-  ...args
-}: Args): TemplateResult => html`
-  <sbb-form-field ${sbbSpread(args)}>
-    ${label ? html`<label>${label}</label>` : nothing}
-    ${TemplateBasicInput({ disabled, readonly, ...args })}
-    <sbb-form-field-clear ?data-active=${active}></sbb-form-field-clear>
-  </sbb-form-field>
-`;
+const TemplateSelectWithErrorSpace = (args: Args): TemplateResult => {
+  const sbbFormError: SbbFormErrorElement = document.createElement('sbb-form-error');
+  sbbFormError.setAttribute('slot', 'error');
+  sbbFormError.textContent = args.errorText;
 
-const TemplateSelect = (args: Args): TemplateResult => html`
-  <sbb-form-field
-    error-space=${args['error-space']}
-    ?optional=${args.optional}
-    size=${args.size}
-    ?borderless=${args.borderless}
-    width=${args.width}
-    ?hidden-label=${args['hidden-label']}
-    ?floating-label=${args['floating-label']}
-    ?negative=${args.negative}
-  >
-    ${args.label ? html`<label>${args.label}</label>` : nothing} ${TemplateBasicSelect(args)}
-  </sbb-form-field>
-`;
+  return html`
+    <form>
+      <div>
+        ${formField(
+          args,
+          html`<select
+              @change=${(event: Event) => {
+                const select = event.currentTarget as HTMLSelectElement;
+                if (select.value !== '0') {
+                  sbbFormError.remove();
+                  select.classList.remove(args.cssClass);
+                } else {
+                  select.closest('sbb-form-field')!.append(sbbFormError);
+                  select.classList.add(args.cssClass);
+                }
+              }}
+              class=${args.cssClass}
+              ?disabled=${args.disabled}
+            >
+              <option value="0"></option>
+              <option value="1">Value 1</option>
+              <option value="2">Value 2</option>
+              <option value="3">Value 3</option>
+            </select>
+            ${sbbFormError}`,
+        )}
+      </div>
+      <div>
+        <div style=${styleMap({ color: 'var(--sbb-color-smoke)' })}>
+          Some text, right below the form-field, inside a div.
+        </div>
+      </div>
+    </form>
+  `;
+};
 
-const TemplateSelectWithErrorSpace = (args: Args): TemplateResult => {
+const TemplateSelectWithIcons = (args: Args): TemplateResult =>
+  formField(
+    args,
+    html`
+      <span slot="prefix">
+        <sbb-icon name="pie-small"></sbb-icon>
+      </span>
+      ${TemplateBasicSelect(args)} ${PopoverTrigger()}
+    `,
+  );
+
+const TemplateTextarea = (args: Args): TemplateResult =>
+  formField(args, TemplateBasicTextarea(args));
+
+const TemplateTextareaWithErrorSpace = (args: Args): TemplateResult => {
   const sbbFormError: SbbFormErrorElement = document.createElement('sbb-form-error');
   sbbFormError.setAttribute('slot', 'error');
   sbbFormError.textContent = args.errorText;
@@ -226,38 +245,28 @@ const TemplateSelectWithErrorSpace = (args: Args): TemplateResult => {
   return html`
     <form>
       <div>
-        <sbb-form-field
-          error-space=${args['error-space']}
-          ?optional=${args.optional}
-          size=${args.size}
-          ?borderless=${args.borderless}
-          width=${args.width}
-          ?hidden-label=${args['hidden-label']}
-          ?floating-label=${args['floating-label']}
-          ?negative=${args.negative}
-        >
-          ${args.label ? html`<label>${args.label}</label>` : nothing}
-          <select
-            @change=${(event: Event) => {
-              const select = event.currentTarget as HTMLSelectElement;
-              if (select.value !== '0') {
-                sbbFormError.remove();
-                select.classList.remove(args.cssClass);
-              } else {
-                select.closest('sbb-form-field')!.append(sbbFormError);
-                select.classList.add(args.cssClass);
-              }
-            }}
-            class=${args.cssClass}
-            ?disabled=${args.disabled}
-          >
-            <option value="0"></option>
-            <option value="1">Value 1</option>
-            <option value="2">Value 2</option>
-            <option value="3">Value 3</option>
-          </select>
-          ${sbbFormError}
-        </sbb-form-field>
+        ${formField(
+          args,
+          html`<textarea
+              @keyup=${(event: KeyboardEvent) => {
+                const input = event.currentTarget as HTMLInputElement;
+                if (input.value !== '') {
+                  sbbFormError.remove();
+                  input.classList.remove(args.cssClass);
+                } else {
+                  input.closest('sbb-form-field')!.append(sbbFormError);
+                  input.classList.add(args.cssClass);
+                }
+              }}
+              class=${args.cssClass}
+              placeholder=${args.placeholder}
+              ?disabled=${args.disabled}
+              ?readonly=${args.readonly}
+            >
+${args.value}</textarea
+            >
+            ${sbbFormError}`,
+        )}
       </div>
       <div>
         <div style=${styleMap({ color: 'var(--sbb-color-smoke)' })}>
@@ -268,16 +277,14 @@ const TemplateSelectWithErrorSpace = (args: Args): TemplateResult => {
   `;
 };
 
-const TemplateSelectWithIcons = ({ label, ...args }: Args): TemplateResult => html`
-  <sbb-form-field ${sbbSpread(args)}>
-    ${label ? html`<label>${label}</label>` : nothing}
-    <span slot="prefix">
-      <sbb-icon name="pie-small"></sbb-icon>
-    </span>
-    ${TemplateBasicSelect(args)}
-    <span slot="suffix">${PopoverTrigger()}</span>
-  </sbb-form-field>
-`;
+const TemplateTextareaWithIcon = (args: Args): TemplateResult =>
+  formField(
+    args,
+    html`<span slot="prefix">
+        <sbb-icon name="pie-small"></sbb-icon>
+      </span>
+      ${TemplateBasicTextarea(args)}`,
+  );
 
 const placeholder: InputType = {
   control: {
@@ -452,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',
@@ -460,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,
 };
 
@@ -633,10 +640,73 @@ export const SelectOptionalAndIcons: StoryObj = {
   args: { ...basicArgs, optional: true },
 };
 
+export const Textarea: StoryObj = {
+  render: TemplateTextarea,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs },
+};
+
+export const TextareaWithoutBorder: StoryObj = {
+  render: TemplateTextarea,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, borderless: true },
+};
+
+export const TextareaDisabled: StoryObj = {
+  render: TemplateTextarea,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, disabled: true },
+};
+
+export const TextareaReadonly: StoryObj = {
+  render: TemplateTextarea,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, readonly: true },
+};
+
+export const TextareaErrorSpace: StoryObj = {
+  render: TemplateTextareaWithErrorSpace,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, 'error-space': 'reserve', cssClass: 'sbb-invalid' },
+};
+
+export const TextareaOptionalAndIcon: StoryObj = {
+  render: TemplateTextareaWithIcon,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, optional: true },
+};
+
+export const TextareaFloatingLabel: StoryObj = {
+  render: TemplateTextarea,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, 'floating-label': true, value: undefined },
+};
+
+export const TextareaFloatingLongLabel: StoryObj = {
+  render: TemplateTextarea,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    'floating-label': true,
+    value: undefined,
+    label: 'This is a very long label which receives ellipsis',
+  },
+};
+
+export const TextareaFloatingWithIcon: StoryObj = {
+  render: TemplateTextareaWithIcon,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    'floating-label': true,
+    value: undefined,
+  },
+};
+
 export const InputCollapsedWidth: StoryObj = {
   render: TemplateInput,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, width: width.options[1] },
+  args: { ...basicArgs, width: width.options![1] },
 };
 
 export const InputWithIconsDisabled: StoryObj = {
@@ -802,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 = {
@@ -811,17 +881,76 @@ export const InputWithIconsDisabledNegative: StoryObj = {
   args: { ...basicArgs, disabled: true, negative: true },
 };
 
+export const TextareaNegative: StoryObj = {
+  render: TemplateTextarea,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, negative: true },
+};
+
+export const TextareaWithoutBorderNegative: StoryObj = {
+  render: TemplateTextarea,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, borderless: true, negative: true },
+};
+
+export const TextareaDisabledNegative: StoryObj = {
+  render: TemplateTextarea,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, disabled: true, negative: true },
+};
+
+export const TextareaReadonlyNegative: StoryObj = {
+  render: TemplateTextarea,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, readonly: true, negative: true },
+};
+
+export const TextareaErrorSpaceNegative: StoryObj = {
+  render: TemplateTextareaWithErrorSpace,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, 'error-space': 'reserve', cssClass: 'sbb-invalid', negative: true },
+};
+
+export const TextareaOptionalAndIconNegative: StoryObj = {
+  render: TemplateTextareaWithIcon,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, optional: true, negative: true },
+};
+
+export const TextareaFloatingLabelNegative: StoryObj = {
+  render: TemplateTextarea,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, 'floating-label': true, value: undefined, negative: true },
+};
+
+export const TextareaFloatingLongLabelNegative: StoryObj = {
+  render: TemplateTextarea,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    'floating-label': true,
+    value: undefined,
+    label: 'This is a very long label which receives ellipsis',
+    negative: true,
+  },
+};
+
+export const TextareaFloatingWithIconNegative: StoryObj = {
+  render: TemplateTextareaWithIcon,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    'floating-label': true,
+    value: undefined,
+    negative: true,
+  },
+};
+
 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/form-field/form-field/form-field.ts b/src/components/form-field/form-field/form-field.ts
index 3a0456a781..521b1576c1 100644
--- a/src/components/form-field/form-field/form-field.ts
+++ b/src/components/form-field/form-field/form-field.ts
@@ -1,20 +1,20 @@
-import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import type { SbbInputModality } from '../../core/a11y';
-import { sbbInputModalityDetector } from '../../core/a11y';
+import type { SbbInputModality } from '../../core/a11y.js';
+import { sbbInputModalityDetector } from '../../core/a11y.js';
 import {
-  LanguageController,
-  NamedSlotStateController,
-  SbbNegativeMixin,
-} from '../../core/common-behaviors';
-import { isFirefox, isValidAttribute } from '../../core/dom';
-import { ConnectedAbortController } from '../../core/eventing';
-import { i18nOptional } from '../../core/i18n';
-import { AgnosticMutationObserver } from '../../core/observers';
-import type { SbbSelectElement } from '../../select';
-import '../../icon';
+  SbbConnectedAbortController,
+  SbbLanguageController,
+  SbbSlotStateController,
+} from '../../core/controllers.js';
+import { isFirefox, setOrRemoveAttribute } from '../../core/dom.js';
+import { i18nOptional } from '../../core/i18n.js';
+import { SbbNegativeMixin } from '../../core/mixins.js';
+import { AgnosticMutationObserver } from '../../core/observers.js';
+import type { SbbSelectElement } from '../../select.js';
+import '../../icon.js';
 
 import style from './form-field.scss?lit&inline';
 
@@ -36,7 +36,7 @@ const supportedPopupTagNames = ['sbb-autocomplete', 'sbb-select'];
 export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
 
-  private readonly _supportedNativeInputElements = ['input', 'select'];
+  private readonly _supportedNativeInputElements = ['input', 'select', 'textarea'];
   // List of supported element selectors in unnamed slot
   private readonly _supportedInputElements = [
     ...this._supportedNativeInputElements,
@@ -46,7 +46,12 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
   // List of elements that should not focus input on click
   private readonly _excludedFocusElements = ['button', 'sbb-popover'];
 
-  private readonly _floatingLabelSupportedInputElements = ['input', 'select', 'sbb-select'];
+  private readonly _floatingLabelSupportedInputElements = [
+    'input',
+    'select',
+    'sbb-select',
+    'textarea',
+  ];
 
   private readonly _floatingLabelSupportedInputTypes = [
     'email',
@@ -104,8 +109,8 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
     return this._input;
   }
 
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this);
+  private _abort = new SbbConnectedAbortController(this);
+  private _language = new SbbLanguageController(this);
 
   /**
    * Listens to the changes on `readonly` and `disabled` attributes of `<input>`.
@@ -122,7 +127,7 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   public override connectedCallback(): void {
@@ -154,7 +159,7 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
 
   private _onPopupClose({ target }: CustomEvent<void>): void {
     if (supportedPopupTagNames.includes((target as HTMLElement).localName)) {
-      this.toggleAttribute('data-has-popup-open', false);
+      this.removeAttribute('data-has-popup-open');
     }
   }
 
@@ -183,7 +188,7 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
 
   private _onSlotLabelChange(): void {
     const labels = Array.from(this.querySelectorAll('label'));
-    if (labels.length > 1) {
+    if (import.meta.env.DEV && labels.length > 1) {
       console.warn(
         `Detected more than one label in sbb-form-field#${this.id}. Only one label is supported.`,
       );
@@ -210,12 +215,16 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
     this._readInputState();
     this._registerInputListener();
 
+    if (this._input.tagName === 'TEXTAREA') {
+      this._input.setAttribute('rows', this._input.getAttribute('rows') || '3');
+    }
+
     this._formFieldAttributeObserver.disconnect();
     this._formFieldAttributeObserver.observe(this._input, {
       attributes: true,
       attributeFilter: ['readonly', 'disabled', 'class', 'data-sbb-invalid'],
     });
-    this.dataset.inputType = this._input.localName;
+    this.setAttribute('data-input-type', this._input.localName);
     this._syncLabelInputReferences();
   }
 
@@ -282,8 +291,10 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
       'focusin',
       () => {
         this.toggleAttribute('data-input-focused', true);
-        (this.dataset.focusOrigin as SbbInputModality) =
-          sbbInputModalityDetector.mostRecentModality;
+        this.setAttribute(
+          'data-focus-origin',
+          (sbbInputModalityDetector.mostRecentModality as SbbInputModality) ?? '',
+        );
       },
       {
         signal: this._inputAbortController.signal,
@@ -292,10 +303,8 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
 
     inputFocusElement.addEventListener(
       'focusout',
-      () => {
-        delete this.dataset.focusOrigin;
-        this.toggleAttribute('data-input-focused', false);
-      },
+      () =>
+        ['data-focus-origin', 'data-input-focused'].forEach((name) => this.removeAttribute(name)),
       {
         signal: this._inputAbortController.signal,
       },
@@ -348,8 +357,8 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
     if (!this._input) {
       return;
     }
-    this.toggleAttribute('data-readonly', isValidAttribute(this._input, 'readonly'));
-    this.toggleAttribute('data-disabled', isValidAttribute(this._input, 'disabled'));
+    this.toggleAttribute('data-readonly', this._input.hasAttribute('readonly'));
+    this.toggleAttribute('data-disabled', this._input.hasAttribute('disabled'));
     this.toggleAttribute(
       'data-invalid',
       this._input.hasAttribute('data-sbb-invalid') ||
@@ -396,10 +405,8 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
     }
 
     const ariaDescribedby = ids.join(' ');
-    if (ariaDescribedby) {
-      this._input?.setAttribute('aria-describedby', ariaDescribedby);
-    } else {
-      this._input?.removeAttribute('aria-describedby');
+    if (this._input) {
+      setOrRemoveAttribute(this._input, 'aria-describedby', ariaDescribedby);
     }
   }
 
@@ -428,9 +435,7 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
   private _syncNegative(): void {
     this.querySelectorAll?.(
       'sbb-form-error,sbb-mini-button,sbb-popover-trigger,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete',
-    ).forEach((element) =>
-      this.negative ? element.setAttribute('negative', '') : element.removeAttribute('negative'),
-    );
+    ).forEach((element) => element.toggleAttribute('negative', this.negative));
   }
 
   protected override render(): TemplateResult {
diff --git a/src/components/form-field/form-field/index.ts b/src/components/form-field/form-field/index.ts
deleted file mode 100644
index 6d5f766fc8..0000000000
--- a/src/components/form-field/form-field/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './form-field';
diff --git a/src/components/form-field/form-field/readme.md b/src/components/form-field/form-field/readme.md
index 96e63c4353..282d184c54 100644
--- a/src/components/form-field/form-field/readme.md
+++ b/src/components/form-field/form-field/readme.md
@@ -21,6 +21,7 @@ The following components are designed to work inside a `sbb-form-field`:
 
 - `<input>`
 - `<select>`
+- `<textarea>`
 - [sbb-datepicker](/docs/components-sbb-datepicker-sbb-datepicker--docs) and its associated components
 - [sbb-select](/docs/components-sbb-select--docs)
 - [sbb-slider](/docs/components-sbb-slider--docs)
diff --git a/src/components/form-field/index.ts b/src/components/form-field/index.ts
deleted file mode 100644
index 4cbc3c64aa..0000000000
--- a/src/components/form-field/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './form-field';
-export * from './form-field-clear';
diff --git a/src/components/header.ts b/src/components/header.ts
new file mode 100644
index 0000000000..55517bf48c
--- /dev/null
+++ b/src/components/header.ts
@@ -0,0 +1,4 @@
+export * from './header/header.js';
+export * from './header/header-button.js';
+export * from './header/header-link.js';
+export * from './header/common.js';
diff --git a/src/components/header/common.ts b/src/components/header/common.ts
new file mode 100644
index 0000000000..80d2b8d9a8
--- /dev/null
+++ b/src/components/header/common.ts
@@ -0,0 +1 @@
+export * from './common/header-action-common.js';
diff --git a/src/components/header/common/header-action-common.ts b/src/components/header/common/header-action-common.ts
index e899b4114e..b24a2918ec 100644
--- a/src/components/header/common/header-action-common.ts
+++ b/src/components/header/common/header-action-common.ts
@@ -2,15 +2,11 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import {
-  type SbbActionBaseElement,
-  type AbstractConstructor,
-  type SbbIconNameMixinType,
-  SbbIconNameMixin,
-} from '../../core/common-behaviors';
-import type { SbbHorizontalFrom } from '../../core/interfaces';
+import type { SbbActionBaseElement } from '../../core/base-elements.js';
+import type { SbbHorizontalFrom } from '../../core/interfaces.js';
+import type { AbstractConstructor } from '../../core/mixins.js';
+import { SbbIconNameMixin, type SbbIconNameMixinType } from '../../icon.js';
 
-import '../../icon';
 import style from './header-action.scss?lit&inline';
 
 export declare class SbbHeaderActionCommonElementMixinType
diff --git a/src/components/header/common/header-action.scss b/src/components/header/common/header-action.scss
index a5af727f7d..8375a93db5 100644
--- a/src/components/header/common/header-action.scss
+++ b/src/components/header/common/header-action.scss
@@ -1,14 +1,13 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-header-action-padding-inline: var(--sbb-spacing-fixed-5x);
   --sbb-header-action-color: var(--sbb-color-black);
   --sbb-header-action-background-color: transparent;
-  --sbb-header-action-min-height: var(--sbb-size-button-m-min-height);
+  --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-disable-animation-time,
diff --git a/src/components/header/common/index.ts b/src/components/header/common/index.ts
deleted file mode 100644
index 8860e4a7b1..0000000000
--- a/src/components/header/common/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './header-action-common';
diff --git a/src/components/header/header-button.ts b/src/components/header/header-button.ts
new file mode 100644
index 0000000000..b20455b56f
--- /dev/null
+++ b/src/components/header/header-button.ts
@@ -0,0 +1 @@
+export * from './header-button/header-button.js';
diff --git a/src/components/header/header-button/header-button.e2e.ts b/src/components/header/header-button/header-button.e2e.ts
index e0b56816ec..76202e93bb 100644
--- a/src/components/header/header-button/header-button.e2e.ts
+++ b/src/components/header/header-button/header-button.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbHeaderButtonElement } from './header-button';
+import { SbbHeaderButtonElement } from './header-button.js';
 
 describe(`sbb-header-button with ${fixture.name}`, () => {
   let element: SbbHeaderButtonElement;
diff --git a/src/components/header/header-button/header-button.spec.ts b/src/components/header/header-button/header-button.spec.ts
index 8aceb5661b..655f7f616f 100644
--- a/src/components/header/header-button/header-button.spec.ts
+++ b/src/components/header/header-button/header-button.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbHeaderButtonElement } from './header-button';
-import './header-button';
+import type { SbbHeaderButtonElement } from './header-button.js';
+import './header-button.js';
 
 describe(`sbb-header-button`, () => {
   describe('renders the component as a button with icon', () => {
diff --git a/src/components/header/header-button/header-button.stories.ts b/src/components/header/header-button/header-button.stories.ts
index 1dce814573..ff153df8c6 100644
--- a/src/components/header/header-button/header-button.stories.ts
+++ b/src/components/header/header-button/header-button.stories.ts
@@ -4,10 +4,10 @@ import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-c
 import { html, type TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './header-button';
+import './header-button.js';
 
 const TemplateSingle = (args: Args): TemplateResult => html`
   <sbb-header-button ${sbbSpread(args)}>${args.text}</sbb-header-button>
@@ -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-button/header-button.ts b/src/components/header/header-button/header-button.ts
index db72852fa4..4d182d15cc 100644
--- a/src/components/header/header-button/header-button.ts
+++ b/src/components/header/header-button/header-button.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbButtonBaseElement } from '../../core/common-behaviors';
-import { SbbHeaderActionCommonElementMixin } from '../common';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbHeaderActionCommonElementMixin } from '../common.js';
 
 /**
  * It displays a button element that can be used in the `sbb-header` component.
diff --git a/src/components/header/header-button/index.ts b/src/components/header/header-button/index.ts
deleted file mode 100644
index a1c21a5fc4..0000000000
--- a/src/components/header/header-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './header-button';
diff --git a/src/components/header/header-link.ts b/src/components/header/header-link.ts
new file mode 100644
index 0000000000..5a01088496
--- /dev/null
+++ b/src/components/header/header-link.ts
@@ -0,0 +1 @@
+export * from './header-link/header-link.js';
diff --git a/src/components/header/header-link/header-link.e2e.ts b/src/components/header/header-link/header-link.e2e.ts
index ee0c75f909..fc42de94b6 100644
--- a/src/components/header/header-link/header-link.e2e.ts
+++ b/src/components/header/header-link/header-link.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbHeaderLinkElement } from './header-link';
+import { SbbHeaderLinkElement } from './header-link.js';
 
 describe(`sbb-header-link with ${fixture.name}`, () => {
   let element: SbbHeaderLinkElement;
diff --git a/src/components/header/header-link/header-link.spec.ts b/src/components/header/header-link/header-link.spec.ts
index 5267148fb5..ff9a493b60 100644
--- a/src/components/header/header-link/header-link.spec.ts
+++ b/src/components/header/header-link/header-link.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbHeaderLinkElement } from './header-link';
-import './header-link';
+import type { SbbHeaderLinkElement } from './header-link.js';
+import './header-link.js';
 
 describe(`sbb-header-link`, () => {
   describe('renders the component as a button with icon', () => {
diff --git a/src/components/header/header-link/header-link.stories.ts b/src/components/header/header-link/header-link.stories.ts
index 79bb2935e2..801dfc3d00 100644
--- a/src/components/header/header-link/header-link.stories.ts
+++ b/src/components/header/header-link/header-link.stories.ts
@@ -5,10 +5,10 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './header-link';
+import './header-link.js';
 
 const TemplateSingle = (args: Args): TemplateResult => html`
   <sbb-header-link ${sbbSpread(args)}>${args.text}</sbb-header-link>
@@ -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-link/header-link.ts b/src/components/header/header-link/header-link.ts
index 11712c93c2..d2099c49aa 100644
--- a/src/components/header/header-link/header-link.ts
+++ b/src/components/header/header-link/header-link.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbHeaderActionCommonElementMixin } from '../common';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+import { SbbHeaderActionCommonElementMixin } from '../common.js';
 
 /**
  * It displays a link element that can be used in the `sbb-header` component.
diff --git a/src/components/header/header-link/index.ts b/src/components/header/header-link/index.ts
deleted file mode 100644
index 41b500d78a..0000000000
--- a/src/components/header/header-link/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './header-link';
diff --git a/src/components/header/header.ts b/src/components/header/header.ts
new file mode 100644
index 0000000000..558f3fff06
--- /dev/null
+++ b/src/components/header/header.ts
@@ -0,0 +1 @@
+export * from './header/header.js';
diff --git a/src/components/header/header/header.e2e.ts b/src/components/header/header/header.e2e.ts
index 7e82bd016b..3faba8da11 100644
--- a/src/components/header/header/header.e2e.ts
+++ b/src/components/header/header/header.e2e.ts
@@ -2,13 +2,13 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys, setViewport } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForLitRender, mockScrollTo, waitForCondition } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import { SbbMenuElement } from '../../menu';
-import type { SbbHeaderButtonElement } from '../header-button';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForLitRender, mockScrollTo, waitForCondition } from '../../core/testing.js';
+import { SbbMenuElement } from '../../menu.js';
+import type { SbbHeaderButtonElement } from '../header-button.js';
 
-import { SbbHeaderElement } from './header';
-import '../header-button';
+import { SbbHeaderElement } from './header.js';
+import '../header-button.js';
 
 describe(`sbb-header with ${fixture.name}`, () => {
   let element: SbbHeaderElement;
@@ -91,7 +91,7 @@ describe(`sbb-header with ${fixture.name}`, () => {
           <div style="height: 2000px;"></div>
         </div>
       `,
-      { modules: ['./header.ts', '../header-button/index.ts'] },
+      { modules: ['./header.ts', '../header-button.ts'] },
     );
 
     element = root.querySelector('sbb-header')!;
@@ -159,12 +159,7 @@ describe(`sbb-header with ${fixture.name}`, () => {
         </div>
       `,
       {
-        modules: [
-          './header.ts',
-          '../header-button/index.ts',
-          '../../menu/index.ts',
-          '../../menu/index.ts',
-        ],
+        modules: ['./header.ts', '../header-button.ts', '../../menu.ts', '../../menu.ts'],
       },
     );
 
diff --git a/src/components/header/header/header.scss b/src/components/header/header/header.scss
index 2854c00f5d..3fc6afd833 100644
--- a/src/components/header/header/header.scss
+++ b/src/components/header/header/header.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   // Overwrites logo in slotted and default case
@@ -18,6 +17,8 @@
     --sbb-logo-height: #{sbb.px-to-rem-build(20)};
   }
 
+  display: block;
+
   // Setting the height here reserves the space for the header which will else be lost with fixed position.
   height: var(--sbb-header-height);
 }
diff --git a/src/components/header/header/header.spec.ts b/src/components/header/header/header.spec.ts
index a0117def64..b2eb8a44a5 100644
--- a/src/components/header/header/header.spec.ts
+++ b/src/components/header/header/header.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbHeaderElement } from './header';
-import './header';
-import '../header-link';
+import type { SbbHeaderElement } from './header.js';
+import './header.js';
+import '../header-link.js';
 
 describe(`sbb-header`, () => {
   it('renders', async () => {
diff --git a/src/components/header/header/header.stories.ts b/src/components/header/header/header.stories.ts
index 7d9b8d9af0..2717dd6f36 100644
--- a/src/components/header/header/header.stories.ts
+++ b/src/components/header/header/header.stories.ts
@@ -9,22 +9,21 @@ import type {
   Decorator,
   StoryContext,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
+import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
 
 import readme from './readme.md?raw';
 
-import './header';
-import '../header-button';
-import '../header-link';
-import '../../divider';
-import '../../menu';
+import './header.js';
+import '../header-button.js';
+import '../header-link.js';
+import '../../divider.js';
+import '../../menu.js';
 
 const LoremIpsumTemplate = (): TemplateResult => html`
   <div>
@@ -212,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/header/header/header.ts b/src/components/header/header/header.ts
index 756d280d68..98e4f2c085 100644
--- a/src/components/header/header/header.ts
+++ b/src/components/header/header/header.ts
@@ -2,12 +2,13 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import { FocusVisibleWithinController } from '../../core/a11y';
-import { SbbHydrationMixin } from '../../core/common-behaviors';
-import { findReferencedElement, isBrowser } from '../../core/dom';
+import { SbbFocusVisibleWithinController } from '../../core/a11y.js';
+import { findReferencedElement, isBrowser } from '../../core/dom.js';
+import { SbbHydrationMixin } from '../../core/mixins.js';
 
 import style from './header.scss?lit&inline';
-import '../../logo';
+
+import '../../logo.js';
 
 const IS_MENU_OPENED_QUERY = "[aria-controls][aria-expanded='true']";
 
@@ -68,7 +69,7 @@ export class SbbHeaderElement extends SbbHydrationMixin(LitElement) {
   public override connectedCallback(): void {
     super.connectedCallback();
     this._setListenerOnScrollElement(this.scrollOrigin);
-    new FocusVisibleWithinController(this);
+    new SbbFocusVisibleWithinController(this);
   }
 
   /** Removes the scroll listener, if previously attached. */
@@ -132,14 +133,12 @@ export class SbbHeaderElement extends SbbHydrationMixin(LitElement) {
       this._headerOnTop = false;
       if (currentScroll > 0 && this._lastScroll < currentScroll) {
         // Scrolling down
-        this.toggleAttribute('data-shadow', false);
-        this.toggleAttribute('data-visible', false);
+        ['data-shadow', 'data-visible'].forEach((name) => this.removeAttribute(name));
       } else {
         // Scrolling up
-        this.toggleAttribute('data-fixed', true);
-        this.toggleAttribute('data-shadow', true);
-        this.toggleAttribute('data-animated', true);
-        this.toggleAttribute('data-visible', true);
+        ['data-fixed', 'data-shadow', 'data-animated', 'data-visible'].forEach((name) =>
+          this.toggleAttribute(name, true),
+        );
       }
     } else {
       // Check if header in its original position, scroll position < header height.
@@ -148,10 +147,9 @@ export class SbbHeaderElement extends SbbHydrationMixin(LitElement) {
         this._headerOnTop = true;
       }
       if (this._headerOnTop) {
-        this.toggleAttribute('data-shadow', false);
-        this.toggleAttribute('data-animated', false);
-        this.toggleAttribute('data-fixed', false);
-        this.toggleAttribute('data-visible', false);
+        ['data-shadow', 'data-animated', 'data-fixed', 'data-visible'].forEach((name) =>
+          this.removeAttribute(name),
+        );
       }
     }
     // `currentScroll` can be negative, e.g. on mobile; this is not allowed.
diff --git a/src/components/header/header/index.ts b/src/components/header/header/index.ts
deleted file mode 100644
index 677ca79d47..0000000000
--- a/src/components/header/header/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './header';
diff --git a/src/components/header/index.ts b/src/components/header/index.ts
deleted file mode 100644
index 810ea4af86..0000000000
--- a/src/components/header/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './header';
-export * from './header-button';
-export * from './header-link';
-export * from './common';
diff --git a/src/components/icon.ts b/src/components/icon.ts
new file mode 100644
index 0000000000..9aacff4103
--- /dev/null
+++ b/src/components/icon.ts
@@ -0,0 +1,5 @@
+export * from './icon/icon.js';
+export * from './icon/icon-base.js';
+export * from './icon/icon-request.js';
+export * from './icon/icon-validate.js';
+export * from './icon/icon-name-mixin.js';
diff --git a/src/components/icon/icon-base.ts b/src/components/icon/icon-base.ts
index 47b8309f09..c486439e5e 100644
--- a/src/components/icon/icon-base.ts
+++ b/src/components/icon/icon-base.ts
@@ -6,9 +6,9 @@ import type { UnsafeHTMLDirective } from 'lit/directives/unsafe-html.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { until } from 'lit/directives/until.js';
 
-import { hostAttributes } from '../core/common-behaviors';
+import { hostAttributes } from '../core/decorators.js';
 
-import { getSvgContent } from './icon-request';
+import { getSvgContent } from './icon-request.js';
 import style from './icon.scss?lit&inline';
 
 /**
diff --git a/src/components/core/common-behaviors/icon-name-mixin.ts b/src/components/icon/icon-name-mixin.ts
similarity index 77%
rename from src/components/core/common-behaviors/icon-name-mixin.ts
rename to src/components/icon/icon-name-mixin.ts
index 8a1de1691d..0a960c0b9d 100644
--- a/src/components/core/common-behaviors/icon-name-mixin.ts
+++ b/src/components/icon/icon-name-mixin.ts
@@ -1,7 +1,9 @@
 import { html, type LitElement, nothing, type TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { AbstractConstructor } from './constructor';
+import type { AbstractConstructor } from '../core/mixins.js';
+
+import './icon.js';
 
 export declare class SbbIconNameMixinType {
   public iconName?: string;
@@ -10,14 +12,12 @@ export declare class SbbIconNameMixinType {
 
 /**
  * Enhance your component with an iconName property and provides a template for the icon slot.
- *
- * Important: The icon component needs to be imported with every component using this mixin.
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const SbbIconNameMixin = <T extends AbstractConstructor<LitElement>>(
   superClass: T,
 ): AbstractConstructor<SbbIconNameMixinType> & T => {
-  abstract class SbbIconName extends superClass implements Partial<SbbIconNameMixinType> {
+  abstract class SbbIconNameElement extends superClass implements Partial<SbbIconNameMixinType> {
     /**
      * The icon name we want to use, choose from the small icon variants
      * from the ui-icons category from here
@@ -36,5 +36,5 @@ export const SbbIconNameMixin = <T extends AbstractConstructor<LitElement>>(
     }
   }
 
-  return SbbIconName as unknown as AbstractConstructor<SbbIconNameMixinType> & T;
+  return SbbIconNameElement as unknown as AbstractConstructor<SbbIconNameMixinType> & T;
 };
diff --git a/src/components/icon/icon-request.ts b/src/components/icon/icon-request.ts
index bb353e6bbb..3b66d5f350 100644
--- a/src/components/icon/icon-request.ts
+++ b/src/components/icon/icon-request.ts
@@ -1,7 +1,7 @@
-import type { SbbIconConfig } from '../core/config';
-import { readConfig } from '../core/config';
+import type { SbbIconConfig } from '../core/config.js';
+import { readConfig } from '../core/config.js';
 
-import { validateContent } from './icon-validate';
+import { validateContent } from './icon-validate.js';
 
 const iconCdn = 'https://icons.app.sbb.ch/';
 
diff --git a/src/components/icon/icon-validate.spec.ts b/src/components/icon/icon-validate.spec.ts
index f6f25a44f6..90eedeb4d8 100644
--- a/src/components/icon/icon-validate.spec.ts
+++ b/src/components/icon/icon-validate.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
 
-import { isValid } from './icon-validate';
+import { isValid } from './icon-validate.js';
 
 describe('isValid', () => {
   it('invalid onload attr', () => {
diff --git a/src/components/icon/icon.e2e.ts b/src/components/icon/icon.e2e.ts
index a7a5e07595..fc539285b3 100644
--- a/src/components/icon/icon.e2e.ts
+++ b/src/components/icon/icon.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbIconElement } from './icon';
+import { SbbIconElement } from './icon.js';
 
 describe(`sbb-icon with ${fixture.name}`, () => {
   let element: SbbIconElement;
diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
index 840719a169..ade5bf970a 100644
--- a/src/components/icon/icon.scss
+++ b/src/components/icon/icon.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   display: inline-block;
diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
index 1eb7582437..34221fd0aa 100644
--- a/src/components/icon/icon.spec.ts
+++ b/src/components/icon/icon.spec.ts
@@ -1,14 +1,14 @@
 import { aTimeout, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { mergeConfig, type SbbIconConfig } from '../core/config';
-import { readConfig } from '../core/config';
-import { waitForLitRender } from '../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { mergeConfig, type SbbIconConfig } from '../core/config.js';
+import { readConfig } from '../core/config.js';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
 
-import type { SbbIconElement } from './icon';
+import type { SbbIconElement } from './icon.js';
 
-import './icon';
+import './icon.js';
 
 describe(`sbb-icon`, () => {
   let iconConfig: SbbIconConfig;
diff --git a/src/components/icon/icon.stories.ts b/src/components/icon/icon.stories.ts
index 760625d5fe..d19f8facf5 100644
--- a/src/components/icon/icon.stories.ts
+++ b/src/components/icon/icon.stories.ts
@@ -2,12 +2,11 @@ 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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './icon';
+import './icon.js';
 
 const Template = (args: Args): TemplateResult => html`<sbb-icon ${sbbSpread(args)}></sbb-icon>`;
 
@@ -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/icon/icon.ts b/src/components/icon/icon.ts
index 7757aac398..d711304896 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,7 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { SbbIconBase } from './icon-base';
+import { SbbIconBase } from './icon-base.js';
 
 /**
  * It displays an icon loaded from a registered namespace.
diff --git a/src/components/icon/index.ts b/src/components/icon/index.ts
deleted file mode 100644
index c06dc3dacb..0000000000
--- a/src/components/icon/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './icon';
-export * from './icon-base';
-export * from './icon-request';
-export * from './icon-validate';
diff --git a/src/components/image.ts b/src/components/image.ts
new file mode 100644
index 0000000000..00cb1d9573
--- /dev/null
+++ b/src/components/image.ts
@@ -0,0 +1 @@
+export * from './image/image.js';
diff --git a/src/components/image/image.e2e.ts b/src/components/image/image.e2e.ts
index 189c5ad0bd..fd14b825cc 100644
--- a/src/components/image/image.e2e.ts
+++ b/src/components/image/image.e2e.ts
@@ -2,10 +2,10 @@ import { aTimeout, assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 import type { Context } from 'mocha';
 
-import { waitForCondition } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
+import { waitForCondition } from '../core/testing.js';
 
-import { SbbImageElement } from './image';
+import { SbbImageElement } from './image.js';
 
 describe(`sbb-image with ${fixture.name}`, () => {
   let element: SbbImageElement;
@@ -41,11 +41,13 @@ 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" importance="high" loading="eager" src="${url}" width="1000">
+            <img alt="" class="image__img" decoding="auto" height="562" loading="eager" src="${url}" width="1000">
           </picture>
         </div>
       </figure>
     `,
+      // Not every browser provides fetchpriority as attribute.
+      { ignoreAttributes: ['fetchpriority'] },
     );
   });
 });
diff --git a/src/components/image/image.helper.ts b/src/components/image/image.helper.ts
index 62df27bc3b..9b9291232a 100644
--- a/src/components/image/image.helper.ts
+++ b/src/components/image/image.helper.ts
@@ -49,29 +49,29 @@ export default (jsonString: string): InterfaceImageAttributesSizesConfigBreakpoi
   }
 
   // make sure that we have `breakpoints` key in object
-  const errorMessage =
-    'sbb-image error: attribute breakpoints has wrong data format. Reference the documentation to see how you should format the data for this attribute.';
-
+  const logWarning = import.meta.env.DEV
+    ? () =>
+        console.warn(
+          'sbb-image error: attribute breakpoints has wrong data format. Reference the documentation to see how you should format the data for this attribute.',
+        )
+    : null;
   let jsonObject: InterfaceImageAttributesSizesConfig;
 
   try {
     jsonObject = JSON.parse(jsonString);
   } catch (error) {
-    console.warn(errorMessage);
-
+    logWarning?.();
     return [];
   }
 
   if (!jsonObject.breakpoints || jsonObject.breakpoints.length === 0) {
-    console.warn(errorMessage);
-
+    logWarning?.();
     return [];
   }
 
   // make sure we get an array of breakpoints
   if (!Array.isArray(jsonObject.breakpoints)) {
-    console.warn(errorMessage);
-
+    logWarning?.();
     return [];
   }
 
@@ -101,8 +101,7 @@ export default (jsonString: string): InterfaceImageAttributesSizesConfigBreakpoi
   });
 
   if (wrongKeyDetected || missingKeyDetected) {
-    console.warn(errorMessage);
-
+    logWarning?.();
     return [];
   }
 
diff --git a/src/components/image/image.scss b/src/components/image/image.scss
index 272313213d..707123c47b 100644
--- a/src/components/image/image.scss
+++ b/src/components/image/image.scss
@@ -1,15 +1,17 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
-  --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;
 }
 
 .image__figure {
@@ -50,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 a8824b4e71..14283135f0 100644
--- a/src/components/image/image.stories.ts
+++ b/src/components/image/image.stories.ts
@@ -3,12 +3,12 @@ import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
-import images from '../core/images';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import images from '../core/images.js';
 
 import readme from './readme.md?raw';
 
-import './image';
+import './image.js';
 
 const Template = (args: Args): TemplateResult => html`<sbb-image ${sbbSpread(args)}></sbb-image>`;
 
@@ -136,15 +136,15 @@ 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': '',
 };
@@ -164,7 +164,7 @@ export const TransparentImage: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    'image-src': imageSrc.options[9],
+    'image-src': imageSrc.options![9],
   },
 };
 
@@ -188,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 e0f006234c..d35681a423 100644
--- a/src/components/image/image.ts
+++ b/src/components/image/image.ts
@@ -1,4 +1,3 @@
-import { spread } from '@open-wc/lit-helpers';
 import {
   SbbBreakpointZeroMin,
   SbbBreakpointZeroMax,
@@ -22,14 +21,14 @@ import { customElement, eventOptions, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js';
 import { ref } from 'lit/directives/ref.js';
 
-import { hostContext, isBrowser } from '../core/dom';
+import { hostContext, isBrowser } from '../core/dom.js';
 
 import type {
   InterfaceImageAttributes,
   InterfaceImageAttributesSizesConfigBreakpoint,
   InterfaceImageAttributesSizesConfigMediaQuery,
-} from './image.helper';
-import imageHelperGetBreakpoints from './image.helper';
+} from './image.helper.js';
+import imageHelperGetBreakpoints from './image.helper.js';
 import style from './image.scss?lit&inline';
 
 const eventListenerOptions = {
@@ -60,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 {
@@ -431,10 +438,6 @@ export class SbbImageElement extends LitElement {
     let { caption } = this;
     let schemaData = '';
 
-    const attributes: {
-      role?: string;
-    } = {};
-
     const imageUrlLQIP = this._prepareImageUrl(this.imageSrc, true);
     const imageUrlWithParams = this._prepareImageUrl(this.imageSrc, false);
 
@@ -458,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({
@@ -468,7 +477,6 @@ export class SbbImageElement extends LitElement {
           [`image__figure--ratio-${this.aspectRatio}`]: true,
           [`image__figure--loaded`]: this._loaded,
         })}
-        ${spread(attributes)}
       >
         <div class="image__wrapper">
           ${!this.skipLqip
@@ -503,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!}
@@ -511,7 +519,7 @@ export class SbbImageElement extends LitElement {
               height="562"
               loading=${this.loading ?? nothing}
               decoding=${this.decoding ?? nothing}
-              importance=${this.importance ?? nothing}
+              .fetchPriority=${this.importance ?? nothing}
             />
           </picture>
         </div>
diff --git a/src/components/image/index.ts b/src/components/image/index.ts
deleted file mode 100644
index cf09068aaa..0000000000
--- a/src/components/image/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './image';
diff --git a/src/components/image/readme.md b/src/components/image/readme.md
index 9adfaae2a0..7158ee0320 100644
--- a/src/components/image/readme.md
+++ b/src/components/image/readme.md
@@ -30,3 +30,9 @@ Add the `sbb-disable-animation` class to disable animation and transition effect
 | `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'                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+
+## 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.ts b/src/components/journey-header.ts
new file mode 100644
index 0000000000..0b18b82341
--- /dev/null
+++ b/src/components/journey-header.ts
@@ -0,0 +1 @@
+export * from './journey-header/journey-header.js';
diff --git a/src/components/journey-header/index.ts b/src/components/journey-header/index.ts
deleted file mode 100644
index 7b1304aca2..0000000000
--- a/src/components/journey-header/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './journey-header';
diff --git a/src/components/journey-header/journey-header.e2e.ts b/src/components/journey-header/journey-header.e2e.ts
index 1160b19033..c7f54c28c1 100644
--- a/src/components/journey-header/journey-header.e2e.ts
+++ b/src/components/journey-header/journey-header.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbJourneyHeaderElement } from './journey-header';
+import { SbbJourneyHeaderElement } from './journey-header.js';
 
 describe(`sbb-journey-header with ${fixture.name}`, () => {
   let element: SbbJourneyHeaderElement;
diff --git a/src/components/journey-header/journey-header.scss b/src/components/journey-header/journey-header.scss
index e9e443fc5c..f03a52ef53 100644
--- a/src/components/journey-header/journey-header.scss
+++ b/src/components/journey-header/journey-header.scss
@@ -1,11 +1,12 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-journey-header-gap: var(--sbb-spacing-fixed-1x);
+
+  display: block;
 }
 
 :host([id]) {
diff --git a/src/components/journey-header/journey-header.spec.ts b/src/components/journey-header/journey-header.spec.ts
index 8faf81cf5f..2620e85c45 100644
--- a/src/components/journey-header/journey-header.spec.ts
+++ b/src/components/journey-header/journey-header.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import './journey-header';
+import './journey-header.js';
 
 describe(`sbb-journey-header`, () => {
   it('renders', async () => {
diff --git a/src/components/journey-header/journey-header.stories.ts b/src/components/journey-header/journey-header.stories.ts
index 62473ec034..ee781b8994 100644
--- a/src/components/journey-header/journey-header.stories.ts
+++ b/src/components/journey-header/journey-header.stories.ts
@@ -2,18 +2,11 @@ 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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './journey-header';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
+import './journey-header.js';
 
 const origin: InputType = {
   control: {
@@ -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-header/journey-header.ts b/src/components/journey-header/journey-header.ts
index e10b542410..5563541d72 100644
--- a/src/components/journey-header/journey-header.ts
+++ b/src/components/journey-header/journey-header.ts
@@ -2,16 +2,17 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { LanguageController, SbbNegativeMixin } from '../core/common-behaviors';
-import { getDocumentWritingMode } from '../core/dom';
-import { i18nConnectionFrom, i18nConnectionRoundtrip, i18nConnectionTo } from '../core/i18n';
-import type { SbbTitleLevel } from '../title';
+import { SbbLanguageController } from '../core/controllers.js';
+import { getDocumentWritingMode } from '../core/dom.js';
+import { i18nConnectionFrom, i18nConnectionRoundtrip, i18nConnectionTo } from '../core/i18n.js';
+import { SbbNegativeMixin } from '../core/mixins.js';
+import type { SbbTitleLevel } from '../title.js';
 
 import style from './journey-header.scss?lit&inline';
 
-import '../icon';
-import '../screen-reader-only';
-import '../title';
+import '../icon.js';
+import '../screen-reader-only.js';
+import '../title.js';
 
 export type JourneyHeaderSize = 'm' | 'l';
 
@@ -37,7 +38,7 @@ export class SbbJourneyHeaderElement extends SbbNegativeMixin(LitElement) {
   /** Journey header size. */
   @property({ reflect: true }) public size?: JourneyHeaderSize = 'm';
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   protected override render(): TemplateResult {
     const iconName = this.roundTrip ? 'arrows-long-right-left-small' : 'arrow-long-right-small';
diff --git a/src/components/journey-summary.ts b/src/components/journey-summary.ts
new file mode 100644
index 0000000000..825342d37a
--- /dev/null
+++ b/src/components/journey-summary.ts
@@ -0,0 +1 @@
+export * from './journey-summary/journey-summary.js';
diff --git a/src/components/journey-summary/index.ts b/src/components/journey-summary/index.ts
deleted file mode 100644
index 10042c18aa..0000000000
--- a/src/components/journey-summary/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './journey-summary';
diff --git a/src/components/journey-summary/journey-summary.e2e.ts b/src/components/journey-summary/journey-summary.e2e.ts
index 4a945ff806..7b9a9590a7 100644
--- a/src/components/journey-summary/journey-summary.e2e.ts
+++ b/src/components/journey-summary/journey-summary.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbJourneySummaryElement } from './journey-summary';
+import { SbbJourneySummaryElement } from './journey-summary.js';
 
 describe(`sbb-journey-summary with ${fixture.name}`, () => {
   it('renders', async () => {
diff --git a/src/components/journey-summary/journey-summary.scss b/src/components/journey-summary/journey-summary.scss
index 38c5277bb3..08407d8958 100644
--- a/src/components/journey-summary/journey-summary.scss
+++ b/src/components/journey-summary/journey-summary.scss
@@ -1,8 +1,11 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
+  display: block;
+}
 
 .sbb-journey-summary {
   @include sbb.text-s--regular;
diff --git a/src/components/journey-summary/journey-summary.spec.ts b/src/components/journey-summary/journey-summary.spec.ts
index b0edb7dd70..93162f8863 100644
--- a/src/components/journey-summary/journey-summary.spec.ts
+++ b/src/components/journey-summary/journey-summary.spec.ts
@@ -1,15 +1,15 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
 
 import type {
   SbbJourneySummaryElement,
   InterfaceSbbJourneySummaryAttributes,
-} from './journey-summary';
+} from './journey-summary.js';
 
-import './journey-summary';
+import './journey-summary.js';
 
 const now = new Date('2022-08-29T21:00:00Z').valueOf();
 
diff --git a/src/components/journey-summary/journey-summary.stories.ts b/src/components/journey-summary/journey-summary.stories.ts
index 3cd0974d43..46087dd575 100644
--- a/src/components/journey-summary/journey-summary.stories.ts
+++ b/src/components/journey-summary/journey-summary.stories.ts
@@ -1,23 +1,23 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 import {
   futureLeg,
   longFutureLeg,
   pastLeg,
   progressLeg,
-} from '../pearl-chain/pearl-chain.sample-data';
+} from '../pearl-chain/pearl-chain.sample-data.js';
 
 import readme from './readme.md?raw';
 
-import './journey-summary';
-import '../button/button';
-import '../button/secondary-button';
+import './journey-summary.js';
+import '../button/button.js';
+import '../button/secondary-button.js';
 
 const disableAnimation: InputType = {
   control: {
@@ -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/journey-summary/journey-summary.ts b/src/components/journey-summary/journey-summary.ts
index 1f6c21f313..643f648592 100644
--- a/src/components/journey-summary/journey-summary.ts
+++ b/src/components/journey-summary/journey-summary.ts
@@ -1,24 +1,25 @@
-import { isValid, format } from 'date-fns';
+import { format, isValid } from 'date-fns';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { LanguageController } from '../core/common-behaviors';
+import { SbbLanguageController } from '../core/controllers.js';
 import {
   defaultDateAdapter,
   durationToTime,
   removeTimezoneFromISOTimeString,
-} from '../core/datetime';
-import { i18nTripDuration } from '../core/i18n';
-import type { Leg } from '../core/timetable';
-import type { SbbTitleLevel } from '../title';
+  readDataNow,
+} from '../core/datetime.js';
+import { i18nTripDuration } from '../core/i18n.js';
+import type { Leg } from '../core/timetable.js';
+import type { SbbTitleLevel } from '../title.js';
 
 import style from './journey-summary.scss?lit&inline';
 
-import '../divider';
-import '../journey-header';
-import '../pearl-chain-time';
-import '../screen-reader-only';
+import '../divider.js';
+import '../journey-header.js';
+import '../pearl-chain-time.js';
+import '../screen-reader-only.js';
 
 export interface InterfaceSbbJourneySummaryAttributes {
   legs: Leg[];
@@ -63,7 +64,7 @@ export class SbbJourneySummaryElement extends LitElement {
   @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
 
   private _hasContentSlot: boolean = false;
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   public override connectedCallback(): void {
     super.connectedCallback();
@@ -71,7 +72,7 @@ export class SbbJourneySummaryElement extends LitElement {
   }
 
   private _now(): number {
-    const dataNow = +(this.dataset?.now as string);
+    const dataNow = readDataNow(this);
     return isNaN(dataNow) ? Date.now() : dataNow;
   }
 
diff --git a/src/components/link-list.ts b/src/components/link-list.ts
new file mode 100644
index 0000000000..49a1597610
--- /dev/null
+++ b/src/components/link-list.ts
@@ -0,0 +1 @@
+export * from './link-list/link-list.js';
diff --git a/src/components/link-list/index.ts b/src/components/link-list/index.ts
deleted file mode 100644
index fec38d1af9..0000000000
--- a/src/components/link-list/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './link-list';
diff --git a/src/components/link-list/link-list.e2e.ts b/src/components/link-list/link-list.e2e.ts
index 529ef3ba5d..02a1401e50 100644
--- a/src/components/link-list/link-list.e2e.ts
+++ b/src/components/link-list/link-list.e2e.ts
@@ -1,11 +1,11 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
 
-import { SbbLinkListElement } from './link-list';
-import '../link/block-link';
+import { SbbLinkListElement } from './link-list.js';
+import '../link/block-link.js';
 
 describe(`sbb-link-list with ${fixture.name}`, () => {
   let element: SbbLinkListElement;
@@ -37,7 +37,7 @@ describe(`sbb-link-list with ${fixture.name}`, () => {
           >
         </sbb-link-list>
       `,
-      { modules: ['./link-list.ts', '../link/index.ts'] },
+      { modules: ['./link-list.ts', '../link.ts'] },
     );
   });
 
@@ -59,7 +59,7 @@ describe(`sbb-link-list with ${fixture.name}`, () => {
     });
 
     it('should update attributes with negative', async () => {
-      element.setAttribute('negative', '');
+      element.toggleAttribute('negative', true);
       await waitForLitRender(element);
       const links = Array.from(element.querySelectorAll('sbb-block-link'));
       expect(links.every((l) => l.negative)).to.be.true;
diff --git a/src/components/link-list/link-list.scss b/src/components/link-list/link-list.scss
index b646d1df97..7c2f882fea 100644
--- a/src/components/link-list/link-list.scss
+++ b/src/components/link-list/link-list.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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;
 
 @mixin horizontal-orientation {
   --sbb-link-list-flex-flow: row wrap;
@@ -16,6 +15,8 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra';
 
 :host {
   --sbb-link-list-flex-flow: column nowrap;
+
+  display: block;
 }
 
 :host([orientation='horizontal']) {
diff --git a/src/components/link-list/link-list.spec.ts b/src/components/link-list/link-list.spec.ts
index 714beb46ad..d32dedadbe 100644
--- a/src/components/link-list/link-list.spec.ts
+++ b/src/components/link-list/link-list.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
-import type { SbbBlockLinkElement } from '../link';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
+import type { SbbBlockLinkElement } from '../link.js';
 
-import type { SbbLinkListElement } from './link-list';
+import type { SbbLinkListElement } from './link-list.js';
 
-import '../link/block-link';
-import './link-list';
+import '../link/block-link.js';
+import './link-list.js';
 
 describe(`sbb-link-list`, () => {
   let element: SbbLinkListElement;
diff --git a/src/components/link-list/link-list.stories.ts b/src/components/link-list/link-list.stories.ts
index 66344c7d2f..be33b1afe2 100644
--- a/src/components/link-list/link-list.stories.ts
+++ b/src/components/link-list/link-list.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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import '../link/block-link';
-import './link-list';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
+import '../link/block-link.js';
+import './link-list.js';
 
 const LinkTemplate = (args: Args): TemplateResult => html`
   <sbb-block-link
@@ -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-list/link-list.ts b/src/components/link-list/link-list.ts
index 805fccc464..437211f153 100644
--- a/src/components/link-list/link-list.ts
+++ b/src/components/link-list/link-list.ts
@@ -1,25 +1,21 @@
-import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
-import { html, nothing, LitElement } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-  SbbNamedSlotListMixin,
-  SbbNegativeMixin,
-  NamedSlotStateController,
-  type WithListChildren,
-} from '../core/common-behaviors';
-import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces';
+import { SbbSlotStateController } from '../core/controllers.js';
+import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces.js';
+import { SbbNamedSlotListMixin, SbbNegativeMixin, type WithListChildren } from '../core/mixins.js';
 import type {
   SbbBlockLinkButtonElement,
   SbbBlockLinkElement,
   SbbBlockLinkStaticElement,
   SbbLinkSize,
-} from '../link';
-import type { SbbTitleLevel } from '../title';
+} from '../link.js';
+import type { SbbTitleLevel } from '../title.js';
 
 import style from './link-list.scss?lit&inline';
 
-import '../title';
+import '../title.js';
 
 /**
  * It displays a list of `sbb-block-link`.
@@ -62,7 +58,7 @@ export class SbbLinkListElement extends SbbNegativeMixin(
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
diff --git a/src/components/link.ts b/src/components/link.ts
new file mode 100644
index 0000000000..b3fee9c8e0
--- /dev/null
+++ b/src/components/link.ts
@@ -0,0 +1,7 @@
+export * from './link/block-link.js';
+export * from './link/block-link-button.js';
+export * from './link/block-link-static.js';
+export * from './link/link.js';
+export * from './link/link-button.js';
+export * from './link/link-static.js';
+export * from './link/common.js';
diff --git a/src/components/link/block-link-button.ts b/src/components/link/block-link-button.ts
new file mode 100644
index 0000000000..73f82087cc
--- /dev/null
+++ b/src/components/link/block-link-button.ts
@@ -0,0 +1 @@
+export * from './block-link-button/block-link-button.js';
diff --git a/src/components/link/block-link-button/block-link-button.spec.ts b/src/components/link/block-link-button/block-link-button.spec.ts
index 0aba5b5f8e..3c570cab4e 100644
--- a/src/components/link/block-link-button/block-link-button.spec.ts
+++ b/src/components/link/block-link-button/block-link-button.spec.ts
@@ -1,12 +1,12 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbBlockLinkButtonElement } from './block-link-button';
+import type { SbbBlockLinkButtonElement } from './block-link-button.js';
 
-import '../../icon';
-import './block-link-button';
+import '../../icon.js';
+import './block-link-button.js';
 
 describe(`sbb-block-link-button`, () => {
   let element: SbbBlockLinkButtonElement;
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 69c59cb4a9..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,11 +23,10 @@ import {
   blockXSIcon,
   linkButtonDefaultArgs,
   linkButtonDefaultArgTypes,
-  wrapperStyle,
-} from '../common/link-common-stories';
+} from '../common/link-common-stories.js';
 
 import readme from './readme.md?raw';
-import './block-link-button';
+import './block-link-button.js';
 
 const defaultArgTypes: ArgTypes = {
   ...blockLinkCommonDefaultArgTypes,
@@ -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-button/block-link-button.ts b/src/components/link/block-link-button/block-link-button.ts
index ffe725f43b..114492c085 100644
--- a/src/components/link/block-link-button/block-link-button.ts
+++ b/src/components/link/block-link-button/block-link-button.ts
@@ -1,7 +1,8 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors';
-import { SbbBlockLinkCommonElementMixin } from '../common';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { SbbBlockLinkCommonElementMixin } from '../common.js';
 
 /**
  * It displays a link enhanced with the SBB Design, which will behave as a button.
diff --git a/src/components/link/block-link-button/index.ts b/src/components/link/block-link-button/index.ts
deleted file mode 100644
index 47b0bfd8b1..0000000000
--- a/src/components/link/block-link-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './block-link-button';
diff --git a/src/components/link/block-link-static.ts b/src/components/link/block-link-static.ts
new file mode 100644
index 0000000000..a630626efe
--- /dev/null
+++ b/src/components/link/block-link-static.ts
@@ -0,0 +1 @@
+export * from './block-link-static/block-link-static.js';
diff --git a/src/components/link/block-link-static/block-link-static.spec.ts b/src/components/link/block-link-static/block-link-static.spec.ts
index dec1a23553..5a05bb969d 100644
--- a/src/components/link/block-link-static/block-link-static.spec.ts
+++ b/src/components/link/block-link-static/block-link-static.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbBlockLinkStaticElement } from './block-link-static';
-import './block-link-static';
-import '../../icon';
+import type { SbbBlockLinkStaticElement } from './block-link-static.js';
+import './block-link-static.js';
+import '../../icon.js';
 
 describe(`sbb-block-link-static`, () => {
   let element: SbbBlockLinkStaticElement;
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 11c91c4bb0..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,11 +23,10 @@ import {
   blockXSIcon,
   linkCommonDefaultArgs,
   linkCommonDefaultArgTypes,
-  wrapperStyle,
-} from '../common/link-common-stories';
+} from '../common/link-common-stories.js';
 
 import readme from './readme.md?raw';
-import './block-link-static';
+import './block-link-static.js';
 
 const defaultArgTypes: ArgTypes = {
   ...blockLinkCommonDefaultArgTypes,
@@ -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.ts b/src/components/link/block-link-static/block-link-static.ts
index 5d3c7edbcf..78157441ae 100644
--- a/src/components/link/block-link-static/block-link-static.ts
+++ b/src/components/link/block-link-static/block-link-static.ts
@@ -1,7 +1,8 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbActionBaseElement, SbbDisabledMixin } from '../../core/common-behaviors';
-import { SbbBlockLinkCommonElementMixin } from '../common';
+import { SbbActionBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledMixin } from '../../core/mixins.js';
+import { SbbBlockLinkCommonElementMixin } from '../common.js';
 
 /**
  * It displays a static link enhanced with the SBB Design.
diff --git a/src/components/link/block-link-static/index.ts b/src/components/link/block-link-static/index.ts
deleted file mode 100644
index fa4f721bad..0000000000
--- a/src/components/link/block-link-static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './block-link-static';
diff --git a/src/components/link/block-link.ts b/src/components/link/block-link.ts
new file mode 100644
index 0000000000..210cfe0beb
--- /dev/null
+++ b/src/components/link/block-link.ts
@@ -0,0 +1 @@
+export * from './block-link/block-link.js';
diff --git a/src/components/link/block-link/block-link.spec.ts b/src/components/link/block-link/block-link.spec.ts
index 5da8bf312f..341bf75c55 100644
--- a/src/components/link/block-link/block-link.spec.ts
+++ b/src/components/link/block-link/block-link.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbBlockLinkElement } from './block-link';
+import type { SbbBlockLinkElement } from './block-link.js';
 
-import './block-link';
+import './block-link.js';
 
 describe(`sbb-block-link`, () => {
   let element: SbbBlockLinkElement;
diff --git a/src/components/link/block-link/block-link.stories.ts b/src/components/link/block-link/block-link.stories.ts
index d2ccbb3ed3..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,11 +23,10 @@ import {
   blockXSIcon,
   linkDefaultArgs,
   linkDefaultArgTypes,
-  wrapperStyle,
-} from '../common/link-common-stories';
+} from '../common/link-common-stories.js';
 
 import readme from './readme.md?raw';
-import './block-link';
+import './block-link.js';
 
 const defaultArgTypes: ArgTypes = {
   ...blockLinkCommonDefaultArgTypes,
@@ -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.ts b/src/components/link/block-link/block-link.ts
index f15a7b5ff7..dd43bae516 100644
--- a/src/components/link/block-link/block-link.ts
+++ b/src/components/link/block-link/block-link.ts
@@ -1,7 +1,8 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbBlockLinkCommonElementMixin } from '../common';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { SbbBlockLinkCommonElementMixin } from '../common.js';
 
 /**
  * It displays a link enhanced with the SBB Design.
diff --git a/src/components/link/block-link/index.ts b/src/components/link/block-link/index.ts
deleted file mode 100644
index a70c013d0d..0000000000
--- a/src/components/link/block-link/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './block-link';
diff --git a/src/components/link/common.ts b/src/components/link/common.ts
new file mode 100644
index 0000000000..df705c22ed
--- /dev/null
+++ b/src/components/link/common.ts
@@ -0,0 +1,3 @@
+export * from './common/block-link-common.js';
+export * from './common/inline-link-common.js';
+export * from './common/link-common.js';
diff --git a/src/components/link/common/block-link-common.ts b/src/components/link/common/block-link-common.ts
index dddee23aa1..6953828e85 100644
--- a/src/components/link/common/block-link-common.ts
+++ b/src/components/link/common/block-link-common.ts
@@ -2,16 +2,13 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import {
-  type SbbActionBaseElement,
-  type AbstractConstructor,
-  SbbIconNameMixin,
-} from '../../core/common-behaviors';
-import type { SbbIconPlacement } from '../../core/interfaces';
+import type { SbbActionBaseElement } from '../../core/base-elements.js';
+import type { SbbIconPlacement } from '../../core/interfaces.js';
+import type { AbstractConstructor } from '../../core/mixins.js';
+import { SbbIconNameMixin } from '../../icon.js';
 
-import '../../icon';
-import { SbbLinkCommonElementMixin, type SbbLinkCommonElementMixinType } from './link-common';
-// eslint-disable-next-line import/order
+import { SbbLinkCommonElementMixin, type SbbLinkCommonElementMixinType } from './link-common.js';
+// eslint-disable-next-line import-x/order
 import blockStyle from './block-link.scss?lit&inline';
 import style from './link.scss?lit&inline';
 
diff --git a/src/components/link/common/index.ts b/src/components/link/common/index.ts
deleted file mode 100644
index 62c8c8352b..0000000000
--- a/src/components/link/common/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './block-link-common';
-export * from './inline-link-common';
-export * from './link-common';
diff --git a/src/components/link/common/inline-link-common.ts b/src/components/link/common/inline-link-common.ts
index 5475eb48e9..cfc5132bab 100644
--- a/src/components/link/common/inline-link-common.ts
+++ b/src/components/link/common/inline-link-common.ts
@@ -1,9 +1,10 @@
 import type { CSSResultGroup } from 'lit';
 
-import type { SbbActionBaseElement, AbstractConstructor } from '../../core/common-behaviors';
+import type { SbbActionBaseElement } from '../../core/base-elements.js';
+import type { AbstractConstructor } from '../../core/mixins.js';
 
-import { SbbLinkCommonElementMixin, type SbbLinkCommonElementMixinType } from './link-common';
-// eslint-disable-next-line import/order
+import { SbbLinkCommonElementMixin, type SbbLinkCommonElementMixinType } from './link-common.js';
+// eslint-disable-next-line import-x/order
 import inlineStyle from './inline-link.scss?lit&inline';
 import style from './link.scss?lit&inline';
 
diff --git a/src/components/link/common/link-common-stories.ts b/src/components/link/common/link-common-stories.ts
index cec0b02ba7..b5cf1ab084 100644
--- a/src/components/link/common/link-common-stories.ts
+++ b/src/components/link/common/link-common-stories.ts
@@ -1,18 +1,12 @@
 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';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
-import '../../icon';
-
-export const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
+import '../../icon.js';
 
 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/common/link-common.ts b/src/components/link/common/link-common.ts
index 0934c53740..29028e0c1c 100644
--- a/src/components/link/common/link-common.ts
+++ b/src/components/link/common/link-common.ts
@@ -2,16 +2,15 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
+import type { SbbActionBaseElement } from '../../core/base-elements.js';
+import { SbbSlotStateController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
 import {
-  type SbbActionBaseElement,
-  type AbstractConstructor,
-  type SbbNegativeMixinType,
   SbbNegativeMixin,
-  NamedSlotStateController,
-  hostAttributes,
-} from '../../core/common-behaviors';
+  type SbbNegativeMixinType,
+  type AbstractConstructor,
+} from '../../core/mixins.js';
 
-import '../../icon';
 import style from './link.scss?lit&inline';
 
 export type SbbLinkSize = 'xs' | 's' | 'm';
@@ -39,7 +38,7 @@ export const SbbLinkCommonElementMixin = <T extends AbstractConstructor<SbbActio
 
     public constructor(...args: any[]) {
       super(args);
-      new NamedSlotStateController(this);
+      new SbbSlotStateController(this);
     }
 
     protected override renderTemplate(): TemplateResult {
diff --git a/src/components/link/common/link.scss b/src/components/link/common/link.scss
index 14ed7e3a1d..2c5f20c2e6 100644
--- a/src/components/link/common/link.scss
+++ b/src/components/link/common/link.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   // Use !important here to not interfere with Firefox focus ring definition
diff --git a/src/components/link/index.ts b/src/components/link/index.ts
deleted file mode 100644
index 3c5fe26352..0000000000
--- a/src/components/link/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './block-link';
-export * from './block-link-button';
-export * from './block-link-static';
-export * from './link';
-export * from './link-button';
-export * from './link-static';
-export * from './common';
diff --git a/src/components/link/link-button.ts b/src/components/link/link-button.ts
new file mode 100644
index 0000000000..214d2535f4
--- /dev/null
+++ b/src/components/link/link-button.ts
@@ -0,0 +1 @@
+export * from './link-button/link-button.js';
diff --git a/src/components/link/link-button/index.ts b/src/components/link/link-button/index.ts
deleted file mode 100644
index 68bc784f63..0000000000
--- a/src/components/link/link-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './link-button';
diff --git a/src/components/link/link-button/link-button.e2e.ts b/src/components/link/link-button/link-button.e2e.ts
index 9d122595d2..b684dd486a 100644
--- a/src/components/link/link-button/link-button.e2e.ts
+++ b/src/components/link/link-button/link-button.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbLinkButtonElement } from './link-button';
+import { SbbLinkButtonElement } from './link-button.js';
 
 describe(`sbb-link-button with ${fixture.name}`, () => {
   let element: SbbLinkButtonElement;
diff --git a/src/components/link/link-button/link-button.spec.ts b/src/components/link/link-button/link-button.spec.ts
index 74160a4f11..977394a059 100644
--- a/src/components/link/link-button/link-button.spec.ts
+++ b/src/components/link/link-button/link-button.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbLinkButtonElement } from './link-button';
+import type { SbbLinkButtonElement } from './link-button.js';
 
-import './link-button';
+import './link-button.js';
 
 describe(`sbb-link-button`, () => {
   let element: SbbLinkButtonElement;
diff --git a/src/components/link/link-button/link-button.stories.ts b/src/components/link/link-button/link-button.stories.ts
index 6e89675a02..fe6f9d68f6 100644
--- a/src/components/link/link-button/link-button.stories.ts
+++ b/src/components/link/link-button/link-button.stories.ts
@@ -1,18 +1,22 @@
 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';
+} from '../common/link-common-stories.js';
 
 import readme from './readme.md?raw';
-import './link-button';
+import './link-button.js';
 
 const defaultArgTypes: ArgTypes = {
   ...linkButtonDefaultArgTypes,
@@ -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-button/link-button.ts b/src/components/link/link-button/link-button.ts
index 0e46ee31b9..a04569a680 100644
--- a/src/components/link/link-button/link-button.ts
+++ b/src/components/link/link-button/link-button.ts
@@ -1,7 +1,8 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors';
-import { SbbInlineLinkCommonElementMixin } from '../common';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { SbbInlineLinkCommonElementMixin } from '../common.js';
 
 /**
  * It displays a link enhanced with the SBB Design, which will behave as a button.
diff --git a/src/components/link/link-static.ts b/src/components/link/link-static.ts
new file mode 100644
index 0000000000..5178f9b3f0
--- /dev/null
+++ b/src/components/link/link-static.ts
@@ -0,0 +1 @@
+export * from './link-static/link-static.js';
diff --git a/src/components/link/link-static/index.ts b/src/components/link/link-static/index.ts
deleted file mode 100644
index 0b500db921..0000000000
--- a/src/components/link/link-static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './link-static';
diff --git a/src/components/link/link-static/link-static.e2e.ts b/src/components/link/link-static/link-static.e2e.ts
index 9b5b3b3f73..cab43f0e48 100644
--- a/src/components/link/link-static/link-static.e2e.ts
+++ b/src/components/link/link-static/link-static.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbLinkStaticElement } from './link-static';
+import { SbbLinkStaticElement } from './link-static.js';
 
 describe(`sbb-link-static with ${fixture.name}`, () => {
   let element: SbbLinkStaticElement;
diff --git a/src/components/link/link-static/link-static.spec.ts b/src/components/link/link-static/link-static.spec.ts
index c55b2c50bb..fa47467a7f 100644
--- a/src/components/link/link-static/link-static.spec.ts
+++ b/src/components/link/link-static/link-static.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbLinkStaticElement } from './link-static';
+import type { SbbLinkStaticElement } from './link-static.js';
 
-import './link-static';
+import './link-static.js';
 
 describe(`sbb-link-static`, () => {
   let element: SbbLinkStaticElement;
diff --git a/src/components/link/link-static/link-static.stories.ts b/src/components/link/link-static/link-static.stories.ts
index 33e65d56df..af06db14d1 100644
--- a/src/components/link/link-static/link-static.stories.ts
+++ b/src/components/link/link-static/link-static.stories.ts
@@ -1,18 +1,22 @@
 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';
+} from '../common/link-common-stories.js';
 
 import readme from './readme.md?raw';
-import './link-static';
+import './link-static.js';
 
 const defaultArgTypes: ArgTypes = {
   ...linkCommonDefaultArgTypes,
@@ -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.ts b/src/components/link/link-static/link-static.ts
index 1776933050..3a04c802ec 100644
--- a/src/components/link/link-static/link-static.ts
+++ b/src/components/link/link-static/link-static.ts
@@ -1,7 +1,8 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbActionBaseElement, SbbDisabledMixin } from '../../core/common-behaviors';
-import { SbbInlineLinkCommonElementMixin } from '../common';
+import { SbbActionBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledMixin } from '../../core/mixins.js';
+import { SbbInlineLinkCommonElementMixin } from '../common.js';
 
 /**
  * It displays a static link enhanced with the SBB Design.
diff --git a/src/components/link/link.ts b/src/components/link/link.ts
new file mode 100644
index 0000000000..06e7c78c70
--- /dev/null
+++ b/src/components/link/link.ts
@@ -0,0 +1 @@
+export * from './link/link.js';
diff --git a/src/components/link/link/index.ts b/src/components/link/link/index.ts
deleted file mode 100644
index e33728e03e..0000000000
--- a/src/components/link/link/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './link';
diff --git a/src/components/link/link/link.e2e.ts b/src/components/link/link/link.e2e.ts
index 4ece9b108e..5db43734d1 100644
--- a/src/components/link/link/link.e2e.ts
+++ b/src/components/link/link/link.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbLinkElement } from './link';
+import { SbbLinkElement } from './link.js';
 
 describe(`sbb-link with ${fixture.name}`, () => {
   let element: SbbLinkElement;
diff --git a/src/components/link/link/link.spec.ts b/src/components/link/link/link.spec.ts
index 8073b2fcb0..ff916af9e1 100644
--- a/src/components/link/link/link.spec.ts
+++ b/src/components/link/link/link.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbLinkElement } from './link';
+import type { SbbLinkElement } from './link.js';
 
-import './link';
+import './link.js';
 
 describe(`sbb-link`, () => {
   let element: SbbLinkElement;
diff --git a/src/components/link/link/link.stories.ts b/src/components/link/link/link.stories.ts
index 997e2e6186..11604bbdc9 100644
--- a/src/components/link/link/link.stories.ts
+++ b/src/components/link/link/link.stories.ts
@@ -1,18 +1,22 @@
 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';
+} from '../common/link-common-stories.js';
 
 import readme from './readme.md?raw';
-import './link';
+import './link.js';
 
 const defaultArgTypes: ArgTypes = {
   ...linkDefaultArgTypes,
@@ -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.ts b/src/components/link/link/link.ts
index 7daadfe65d..8f5a421fb0 100644
--- a/src/components/link/link/link.ts
+++ b/src/components/link/link/link.ts
@@ -1,7 +1,8 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbInlineLinkCommonElementMixin } from '../common';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { SbbInlineLinkCommonElementMixin } from '../common.js';
 
 /**
  * It displays a link enhanced with the SBB Design.
diff --git a/src/components/loading-indicator.ts b/src/components/loading-indicator.ts
new file mode 100644
index 0000000000..1b818c5b10
--- /dev/null
+++ b/src/components/loading-indicator.ts
@@ -0,0 +1 @@
+export * from './loading-indicator/loading-indicator.js';
diff --git a/src/components/loading-indicator/index.ts b/src/components/loading-indicator/index.ts
deleted file mode 100644
index 903d49a869..0000000000
--- a/src/components/loading-indicator/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './loading-indicator';
diff --git a/src/components/loading-indicator/loading-indicator.e2e.ts b/src/components/loading-indicator/loading-indicator.e2e.ts
index c9829a1852..37bb9df4c8 100644
--- a/src/components/loading-indicator/loading-indicator.e2e.ts
+++ b/src/components/loading-indicator/loading-indicator.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbLoadingIndicatorElement } from './loading-indicator';
+import { SbbLoadingIndicatorElement } from './loading-indicator.js';
 
 describe(`sbb-loading-indicator with ${fixture.name}`, () => {
   let element: SbbLoadingIndicatorElement;
diff --git a/src/components/loading-indicator/loading-indicator.scss b/src/components/loading-indicator/loading-indicator.scss
index 7f49cf0889..81e380356e 100644
--- a/src/components/loading-indicator/loading-indicator.scss
+++ b/src/components/loading-indicator/loading-indicator.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-loading-indicator-color: var(--sbb-color-red);
@@ -103,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: var(--sbb-disable-animation-zero-time, 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.spec.ts b/src/components/loading-indicator/loading-indicator.spec.ts
index 959397050f..8e3137c2b7 100644
--- a/src/components/loading-indicator/loading-indicator.spec.ts
+++ b/src/components/loading-indicator/loading-indicator.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import './loading-indicator';
+import './loading-indicator.js';
 
 describe(`sbb-loading-indicator`, () => {
   it('renders with variant `window`', async () => {
diff --git a/src/components/loading-indicator/loading-indicator.stories.ts b/src/components/loading-indicator/loading-indicator.stories.ts
index 8c5d8542cf..a60b722e89 100644
--- a/src/components/loading-indicator/loading-indicator.stories.ts
+++ b/src/components/loading-indicator/loading-indicator.stories.ts
@@ -1,17 +1,17 @@
 import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
-import type { SbbLoadingIndicatorElement } from './loading-indicator';
+import type { SbbLoadingIndicatorElement } from './loading-indicator.js';
 import readme from './readme.md?raw';
-import '../button/button';
-import './loading-indicator';
+import '../button/button.js';
+import './loading-indicator.js';
 
 const textBlockStyle: Args = {
   marginBlock: '1rem',
@@ -120,9 +120,9 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  variant: variant.options[0],
-  size: size.options[0],
-  color: color.options[0],
+  variant: variant.options![0],
+  size: size.options![0],
+  color: color.options![0],
 };
 
 export const WindowSmallDefault: StoryObj = {
@@ -134,64 +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,
 };
 
 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 fdcacda3cf..e8cc54c469 100644
--- a/src/components/loading-indicator/loading-indicator.ts
+++ b/src/components/loading-indicator/loading-indicator.ts
@@ -2,7 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { hostAttributes } from '../core/common-behaviors';
+import { hostAttributes } from '../core/decorators.js';
 
 import style from './loading-indicator.scss?lit&inline';
 
diff --git a/src/components/logo.ts b/src/components/logo.ts
new file mode 100644
index 0000000000..14bb4308b7
--- /dev/null
+++ b/src/components/logo.ts
@@ -0,0 +1 @@
+export * from './logo/logo.js';
diff --git a/src/components/logo/index.ts b/src/components/logo/index.ts
deleted file mode 100644
index cb6151df13..0000000000
--- a/src/components/logo/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './logo';
diff --git a/src/components/logo/logo.scss b/src/components/logo/logo.scss
index 126fde4d9d..f652883b40 100644
--- a/src/components/logo/logo.scss
+++ b/src/components/logo/logo.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-logo-panel-color: var(--sbb-color-red);
@@ -21,6 +20,7 @@
     --sbb-logo-word-mark-color: ButtonText !important;
   }
 
+  display: block;
   height: var(--sbb-logo-height);
 }
 
diff --git a/src/components/logo/logo.stories.ts b/src/components/logo/logo.stories.ts
index c4c95f29f0..7abfb8d002 100644
--- a/src/components/logo/logo.stories.ts
+++ b/src/components/logo/logo.stories.ts
@@ -4,16 +4,10 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './logo';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
+import './logo.js';
 
 const Template = (args: Args): TemplateResult => html`<sbb-logo ${sbbSpread(args)}></sbb-logo>`;
 
@@ -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/logo/logo.ts b/src/components/logo/logo.ts
index c9a654e6d4..c94991354f 100644
--- a/src/components/logo/logo.ts
+++ b/src/components/logo/logo.ts
@@ -2,8 +2,8 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { SbbNegativeMixin } from '../core/common-behaviors';
-import type { SbbProtectiveRoom } from '../core/interfaces';
+import type { SbbProtectiveRoom } from '../core/interfaces.js';
+import { SbbNegativeMixin } from '../core/mixins.js';
 
 import style from './logo.scss?lit&inline';
 
diff --git a/src/components/map-container.ts b/src/components/map-container.ts
new file mode 100644
index 0000000000..7e2c6b04a3
--- /dev/null
+++ b/src/components/map-container.ts
@@ -0,0 +1 @@
+export * from './map-container/map-container.js';
diff --git a/src/components/map-container/index.ts b/src/components/map-container/index.ts
deleted file mode 100644
index 761112cb4f..0000000000
--- a/src/components/map-container/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './map-container';
diff --git a/src/components/map-container/map-container.e2e.ts b/src/components/map-container/map-container.e2e.ts
index c0b0d50217..be3fe2f21a 100644
--- a/src/components/map-container/map-container.e2e.ts
+++ b/src/components/map-container/map-container.e2e.ts
@@ -2,13 +2,13 @@ import { assert, expect } from '@open-wc/testing';
 import { setViewport } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import type { SbbTertiaryButtonElement } from '../button';
-import { waitForCondition } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import type { SbbTertiaryButtonElement } from '../button.js';
+import { fixture } from '../core/testing/private.js';
+import { waitForCondition } from '../core/testing.js';
 
-import { SbbMapContainerElement } from './map-container';
+import { SbbMapContainerElement } from './map-container.js';
 
-import '../title';
+import '../title.js';
 
 describe(`sbb-map-container with ${fixture.name}`, () => {
   let element: SbbMapContainerElement;
@@ -33,7 +33,7 @@ describe(`sbb-map-container with ${fixture.name}`, () => {
           <div style="height: 1200px">map</div>
         </div>
       </sbb-map-container>`,
-      { modules: ['./map-container.ts', '../title/index.ts'] },
+      { modules: ['./map-container.ts', '../title.ts'] },
     );
     assert.instanceOf(element, SbbMapContainerElement);
 
diff --git a/src/components/map-container/map-container.scss b/src/components/map-container/map-container.scss
index 5b485fdca1..a13e61cd48 100644
--- a/src/components/map-container/map-container.scss
+++ b/src/components/map-container/map-container.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-map-container-map-height-zero: #{sbb.px-to-rem-build(295)};
@@ -24,6 +23,8 @@
   @include sbb.mq($from: wide) {
     --sbb-map-container-sidebar-width: #{sbb.px-to-rem-build(480)};
   }
+
+  display: block;
 }
 
 .sbb-map-container {
diff --git a/src/components/map-container/map-container.spec.ts b/src/components/map-container/map-container.spec.ts
index ac37160722..676840060e 100644
--- a/src/components/map-container/map-container.spec.ts
+++ b/src/components/map-container/map-container.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbMapContainerElement } from './map-container';
+import type { SbbMapContainerElement } from './map-container.js';
 
-import './map-container';
+import './map-container.js';
 
 describe(`sbb-map-container`, () => {
   let element: SbbMapContainerElement;
diff --git a/src/components/map-container/map-container.stories.ts b/src/components/map-container/map-container.stories.ts
index 1d0c1fbb95..30e39e8ff7 100644
--- a/src/components/map-container/map-container.stories.ts
+++ b/src/components/map-container/map-container.stories.ts
@@ -4,14 +4,14 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './map-container';
-import '../form-field';
-import '../icon';
-import '../title';
-import '../header';
+import './map-container.js';
+import '../form-field.js';
+import '../icon.js';
+import '../title.js';
+import '../header.js';
 
 const hideScrollUpButton: InputType = {
   control: {
@@ -94,9 +94,6 @@ const meta: Meta = {
   ],
   parameters: {
     chromatic: { disableSnapshot: false },
-    backgrounds: {
-      disable: true,
-    },
     docs: {
       extractComponentDescription: () => readme,
     },
diff --git a/src/components/map-container/map-container.ts b/src/components/map-container/map-container.ts
index b2961f01f4..51ca9b08da 100644
--- a/src/components/map-container/map-container.ts
+++ b/src/components/map-container/map-container.ts
@@ -3,14 +3,15 @@ import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
-import type { SbbTertiaryButtonElement } from '../button';
-import { LanguageController } from '../core/common-behaviors';
-import { i18nMapContainerButtonLabel } from '../core/i18n';
-import { AgnosticIntersectionObserver } from '../core/observers';
-import '../button/tertiary-button';
+import type { SbbTertiaryButtonElement } from '../button.js';
+import { SbbLanguageController } from '../core/controllers.js';
+import { i18nMapContainerButtonLabel } from '../core/i18n.js';
+import { AgnosticIntersectionObserver } from '../core/observers.js';
 
 import style from './map-container.scss?lit&inline';
 
+import '../button/tertiary-button.js';
+
 /**
  * It can be used as a container for maps.
  *
@@ -33,7 +34,7 @@ export class SbbMapContainerElement extends LitElement {
   @state() private _scrollUpButtonVisible = false;
 
   private _intersector?: HTMLSpanElement;
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
   private _observer = new AgnosticIntersectionObserver((entries) =>
     this._toggleButtonVisibilityOnIntersect(entries),
   );
diff --git a/src/components/menu.ts b/src/components/menu.ts
new file mode 100644
index 0000000000..ff8ac22ba9
--- /dev/null
+++ b/src/components/menu.ts
@@ -0,0 +1,4 @@
+export * from './menu/menu.js';
+export * from './menu/menu-button.js';
+export * from './menu/menu-link.js';
+export * from './menu/common.js';
diff --git a/src/components/menu/common.ts b/src/components/menu/common.ts
new file mode 100644
index 0000000000..9998e9514c
--- /dev/null
+++ b/src/components/menu/common.ts
@@ -0,0 +1 @@
+export * from './common/menu-action-common.js';
diff --git a/src/components/menu/common/index.ts b/src/components/menu/common/index.ts
deleted file mode 100644
index dc412f9857..0000000000
--- a/src/components/menu/common/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './menu-action-common';
diff --git a/src/components/menu/common/menu-action-common.ts b/src/components/menu/common/menu-action-common.ts
index 3bc17b2d90..197768f6f3 100644
--- a/src/components/menu/common/menu-action-common.ts
+++ b/src/components/menu/common/menu-action-common.ts
@@ -2,16 +2,14 @@ import { type CSSResultGroup, nothing, type TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
+import type { SbbActionBaseElement } from '../../core/base-elements.js';
 import {
-  type SbbActionBaseElement,
+  SbbDisabledTabIndexActionMixin,
   type AbstractConstructor,
   type SbbDisabledMixinType,
-  type SbbIconNameMixinType,
-  SbbDisabledTabIndexActionMixin,
-  SbbIconNameMixin,
-} from '../../core/common-behaviors';
+} from '../../core/mixins.js';
+import { SbbIconNameMixin, type SbbIconNameMixinType } from '../../icon.js';
 
-import '../../icon';
 import style from './menu-action.scss?lit&inline';
 
 export declare class SbbMenuActionCommonElementMixinType
diff --git a/src/components/menu/common/menu-action.scss b/src/components/menu/common/menu-action.scss
index 9c13563e08..e6134d0fcf 100644
--- a/src/components/menu/common/menu-action.scss
+++ b/src/components/menu/common/menu-action.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   // Use !important here to not interfere with Firefox focus ring definition
@@ -15,6 +14,8 @@
   --sbb-menu-action-cursor: pointer;
   --sbb-menu-action-color: var(--sbb-color-white);
   --sbb-menu-action-forced-color-border-color: CanvasText;
+
+  display: block;
 }
 
 :host(:hover:not([disabled])) {
diff --git a/src/components/menu/index.ts b/src/components/menu/index.ts
deleted file mode 100644
index f20e24a47b..0000000000
--- a/src/components/menu/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './menu';
-export * from './menu-button';
-export * from './menu-link';
-export * from './common';
diff --git a/src/components/menu/menu-button.ts b/src/components/menu/menu-button.ts
new file mode 100644
index 0000000000..02eda924b8
--- /dev/null
+++ b/src/components/menu/menu-button.ts
@@ -0,0 +1 @@
+export * from './menu-button/menu-button.js';
diff --git a/src/components/menu/menu-button/index.ts b/src/components/menu/menu-button/index.ts
deleted file mode 100644
index 9c432cfd27..0000000000
--- a/src/components/menu/menu-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './menu-button';
diff --git a/src/components/menu/menu-button/menu-button.e2e.ts b/src/components/menu/menu-button/menu-button.e2e.ts
index e692b9bc6a..59f5bd1575 100644
--- a/src/components/menu/menu-button/menu-button.e2e.ts
+++ b/src/components/menu/menu-button/menu-button.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbMenuButtonElement } from './menu-button';
+import { SbbMenuButtonElement } from './menu-button.js';
 
 describe(`sbb-menu-button with ${fixture.name}`, () => {
   let element: SbbMenuButtonElement;
diff --git a/src/components/menu/menu-button/menu-button.spec.ts b/src/components/menu/menu-button/menu-button.spec.ts
index cbdcafee04..677158e99e 100644
--- a/src/components/menu/menu-button/menu-button.spec.ts
+++ b/src/components/menu/menu-button/menu-button.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import './menu-button';
+import './menu-button.js';
 
 describe(`sbb-menu-button`, () => {
   it('renders', async () => {
diff --git a/src/components/menu/menu-button/menu-button.stories.ts b/src/components/menu/menu-button/menu-button.stories.ts
index d9659fc206..f798975d6f 100644
--- a/src/components/menu/menu-button/menu-button.stories.ts
+++ b/src/components/menu/menu-button/menu-button.stories.ts
@@ -4,11 +4,11 @@ import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-c
 import { html, nothing, type TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './menu-button';
-import '../../icon';
+import './menu-button.js';
+import '../../icon.js';
 
 const getBasicTemplate = (
   { text, ...args }: Args,
@@ -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-button/menu-button.ts b/src/components/menu/menu-button/menu-button.ts
index c2a3fcf6a6..f6ef86c048 100644
--- a/src/components/menu/menu-button/menu-button.ts
+++ b/src/components/menu/menu-button/menu-button.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbButtonBaseElement } from '../../core/common-behaviors';
-import { SbbMenuActionCommonElementMixin } from '../common';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbMenuActionCommonElementMixin } from '../common.js';
 
 /**
  * It displays a button element that can be used in the `sbb-menu` component.
diff --git a/src/components/menu/menu-link.ts b/src/components/menu/menu-link.ts
new file mode 100644
index 0000000000..282d34c3d8
--- /dev/null
+++ b/src/components/menu/menu-link.ts
@@ -0,0 +1 @@
+export * from './menu-link/menu-link.js';
diff --git a/src/components/menu/menu-link/index.ts b/src/components/menu/menu-link/index.ts
deleted file mode 100644
index 849d1a464c..0000000000
--- a/src/components/menu/menu-link/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './menu-link';
diff --git a/src/components/menu/menu-link/menu-link.e2e.ts b/src/components/menu/menu-link/menu-link.e2e.ts
index e88cb93756..a239339bef 100644
--- a/src/components/menu/menu-link/menu-link.e2e.ts
+++ b/src/components/menu/menu-link/menu-link.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbMenuLinkElement } from './menu-link';
+import { SbbMenuLinkElement } from './menu-link.js';
 
 describe(`sbb-menu-link with ${fixture.name}`, () => {
   let element: SbbMenuLinkElement;
diff --git a/src/components/menu/menu-link/menu-link.spec.ts b/src/components/menu/menu-link/menu-link.spec.ts
index 4c52934da5..4937efe409 100644
--- a/src/components/menu/menu-link/menu-link.spec.ts
+++ b/src/components/menu/menu-link/menu-link.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import './menu-link';
+import './menu-link.js';
 
 describe(`sbb-menu-link`, () => {
   it('renders component with icon and amount', async () => {
diff --git a/src/components/menu/menu-link/menu-link.stories.ts b/src/components/menu/menu-link/menu-link.stories.ts
index ccc271e55c..6cdb65b83f 100644
--- a/src/components/menu/menu-link/menu-link.stories.ts
+++ b/src/components/menu/menu-link/menu-link.stories.ts
@@ -5,11 +5,11 @@ import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './menu-link';
-import '../../icon';
+import './menu-link.js';
+import '../../icon.js';
 
 const getBasicTemplate = (
   { text, ...args }: Args,
@@ -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-link/menu-link.ts b/src/components/menu/menu-link/menu-link.ts
index 89aca26453..1d4b4726d1 100644
--- a/src/components/menu/menu-link/menu-link.ts
+++ b/src/components/menu/menu-link/menu-link.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbMenuActionCommonElementMixin } from '../common';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+import { SbbMenuActionCommonElementMixin } from '../common.js';
 
 /**
  * It displays a link element that can be used in the `sbb-menu` component.
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
new file mode 100644
index 0000000000..8a8bcb149d
--- /dev/null
+++ b/src/components/menu/menu.ts
@@ -0,0 +1 @@
+export * from './menu/menu.js';
diff --git a/src/components/menu/menu/index.ts b/src/components/menu/menu/index.ts
deleted file mode 100644
index 8267df70b3..0000000000
--- a/src/components/menu/menu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './menu';
diff --git a/src/components/menu/menu/menu.e2e.ts b/src/components/menu/menu/menu.e2e.ts
index 34d3174a83..c31df4ea3a 100644
--- a/src/components/menu/menu/menu.e2e.ts
+++ b/src/components/menu/menu/menu.e2e.ts
@@ -2,16 +2,16 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys, setViewport } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import type { SbbButtonElement } from '../../button';
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import type { SbbButtonElement } from '../../button.js';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbMenuElement } from './menu';
+import { SbbMenuElement } from './menu.js';
 
-import '../../button/button';
-import '../../link';
-import '../../divider';
-import '../menu-button';
+import '../../button/button.js';
+import '../../link.js';
+import '../../divider.js';
+import '../menu-button.js';
 
 describe(`sbb-menu with ${fixture.name}`, () => {
   let element: SbbMenuElement, trigger: SbbButtonElement;
@@ -38,10 +38,10 @@ describe(`sbb-menu with ${fixture.name}`, () => {
       {
         modules: [
           './menu.ts',
-          '../../button/index.ts',
-          '../../divider/index.ts',
-          '../../link/index.ts',
-          '../menu-button/index.ts',
+          '../../button.ts',
+          '../../divider.ts',
+          '../../link.ts',
+          '../menu-button.ts',
         ],
       },
     );
@@ -195,7 +195,7 @@ describe(`sbb-menu with ${fixture.name}`, () => {
     expect(element).to.have.attribute('data-state', 'opened');
 
     const buttonHeight = getComputedStyle(document.documentElement).getPropertyValue(
-      `--sbb-size-button-l-min-height-large`,
+      `--sbb-size-element-m`,
     );
     expect(buttonHeight.trim()).to.be.equal('3.5rem');
 
diff --git a/src/components/menu/menu/menu.scss b/src/components/menu/menu/menu.scss
index b6af5465fe..399e1403e4 100644
--- a/src/components/menu/menu/menu.scss
+++ b/src/components/menu/menu/menu.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-menu-position-x: 0;
@@ -72,7 +71,7 @@
   pointer-events: none;
   inset: var(--sbb-menu-inset);
   height: var(--sbb-menu-container-height);
-  z-index: var(--sbb-menu-z-index, var(--sbb-overlay-z-index));
+  z-index: var(--sbb-menu-z-index, var(--sbb-overlay-default-z-index));
 
   // Menu backdrop (only visible on mobile)
   &::before {
diff --git a/src/components/menu/menu/menu.spec.ts b/src/components/menu/menu/menu.spec.ts
index 7dd1c81039..494d06bdca 100644
--- a/src/components/menu/menu/menu.spec.ts
+++ b/src/components/menu/menu/menu.spec.ts
@@ -1,15 +1,15 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import type { SbbMenuElement } from './menu';
+import type { SbbMenuElement } from './menu.js';
 
-import './menu';
-import '../menu-button';
-import '../../button';
-import '../../divider';
-import '../../link';
+import './menu.js';
+import '../menu-button.js';
+import '../../button.js';
+import '../../divider.js';
+import '../../link.js';
 
 describe(`sbb-menu`, () => {
   describe('renders', () => {
diff --git a/src/components/menu/menu/menu.stories.ts b/src/components/menu/menu/menu.stories.ts
index a4785c6b4e..6976dc84cb 100644
--- a/src/components/menu/menu/menu.stories.ts
+++ b/src/components/menu/menu/menu.stories.ts
@@ -9,22 +9,22 @@ import type {
   Decorator,
   StoryContext,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
+import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
+import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
 
-import { SbbMenuElement } from './menu';
+import { SbbMenuElement } from './menu.js';
 import readme from './readme.md?raw';
 
-import '../../button/button';
-import '../../divider';
-import '../../link';
-import '../menu-button';
-import '../menu-link';
+import '../../button/button.js';
+import '../../divider.js';
+import '../../link.js';
+import '../menu-button.js';
+import '../menu-link.js';
 
 // Story interaction executed after the story renders
 const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
@@ -236,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: {
@@ -256,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 ecdee988c9..b362d99a4a 100644
--- a/src/components/menu/menu/menu.ts
+++ b/src/components/menu/menu/menu.ts
@@ -1,25 +1,20 @@
 import { type CSSResultGroup, html, LitElement, type TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
 import {
-  FocusHandler,
   getNextElementIndex,
   interactivityChecker,
   IS_FOCUSABLE_QUERY,
   isArrowKeyPressed,
+  SbbFocusHandler,
   setModalityOnNextFocus,
-} from '../../core/a11y';
-import { SbbNamedSlotListMixin } from '../../core/common-behaviors';
-import {
-  findReferencedElement,
-  isBreakpoint,
-  isValidAttribute,
-  ScrollHandler,
-  setAttribute,
-} from '../../core/dom';
-import { EventEmitter, ConnectedAbortController } from '../../core/eventing';
-import type { SbbOverlayState } from '../../core/overlay';
+} from '../../core/a11y.js';
+import { SbbConnectedAbortController } from '../../core/controllers.js';
+import { findReferencedElement, isBreakpoint, SbbScrollHandler } from '../../core/dom.js';
+import { EventEmitter } from '../../core/eventing.js';
+import type { SbbOpenedClosedState } from '../../core/interfaces.js';
+import { SbbNamedSlotListMixin } from '../../core/mixins.js';
 import {
   applyInertMechanism,
   getElementPosition,
@@ -27,8 +22,9 @@ import {
   removeAriaOverlayTriggerAttributes,
   removeInertMechanism,
   setAriaOverlayTriggerAttributes,
-} from '../../core/overlay';
-import type { SbbMenuButtonElement, SbbMenuLinkElement } from '../index';
+} from '../../core/overlay.js';
+import type { SbbMenuButtonElement } from '../menu-button.js';
+import type { SbbMenuLinkElement } from '../menu-link.js';
 
 import style from './menu.scss?lit&inline';
 
@@ -54,9 +50,9 @@ let nextId = 0;
  * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-menu` is opened.
  * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-menu` begins the closing transition. Can be canceled.
  * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-menu` is closed.
- * @cssprop [--sbb-menu-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-menu-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
- * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
  */
 @customElement('sbb-menu')
 export class SbbMenuElement extends SbbNamedSlotListMixin<
@@ -96,7 +92,12 @@ export class SbbMenuElement extends SbbNamedSlotListMixin<
   /**
    * The state of the menu.
    */
-  @state() private _state: SbbOverlayState = 'closed';
+  private set _state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
+  }
+  private get _state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
+  }
 
   /** Emits whenever the `sbb-menu` starts the opening transition. */
   private _willOpen: EventEmitter<void> = new EventEmitter(this, SbbMenuElement.events.willOpen);
@@ -115,9 +116,9 @@ export class SbbMenuElement extends SbbNamedSlotListMixin<
   private _isPointerDownEventOnMenu: boolean = false;
   private _menuController!: AbortController;
   private _windowEventsController!: AbortController;
-  private _abort = new ConnectedAbortController(this);
-  private _focusHandler = new FocusHandler();
-  private _scrollHandler = new ScrollHandler();
+  private _abort = new SbbConnectedAbortController(this);
+  private _focusHandler = new SbbFocusHandler();
+  private _scrollHandler = new SbbScrollHandler();
 
   /**
    * Opens the menu on trigger click.
@@ -211,6 +212,7 @@ export class SbbMenuElement extends SbbNamedSlotListMixin<
 
   public override connectedCallback(): void {
     super.connectedCallback();
+    this._state ||= 'closed';
     const signal = this._abort.signal;
     this.addEventListener('click', (e) => this._onClick(e), { signal });
     this.addEventListener('keydown', (e) => this._handleKeyDown(e), { signal });
@@ -304,7 +306,7 @@ export class SbbMenuElement extends SbbNamedSlotListMixin<
   // Close menu at any click on an interactive element inside the <sbb-menu> that bubbles to the container.
   private _closeOnInteractiveElementClick(event: Event): void {
     const target = event.target as HTMLElement;
-    if (INTERACTIVE_ELEMENTS.includes(target.nodeName) && !isValidAttribute(target, 'disabled')) {
+    if (INTERACTIVE_ELEMENTS.includes(target.nodeName) && !target.hasAttribute('disabled')) {
       this.close();
     }
   }
@@ -388,8 +390,6 @@ export class SbbMenuElement extends SbbNamedSlotListMixin<
   }
 
   protected override render(): TemplateResult {
-    setAttribute(this, 'data-state', this._state);
-
     // TODO: Handle case with other elements than sbb-menu-button/sbb-menu-link.
     return html`
       <div class="sbb-menu__container">
diff --git a/src/components/menu/menu/readme.md b/src/components/menu/menu/readme.md
index 4727342143..7f57f664c1 100644
--- a/src/components/menu/menu/readme.md
+++ b/src/components/menu/menu/readme.md
@@ -88,9 +88,9 @@ Add the `sbb-disable-animation` class to disable animation and transition effect
 
 ## CSS Properties
 
-| Name                 | Default                      | Description                                                                                                                                                                                           |
-| -------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-menu-z-index` | `var(--sbb-overlay-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-z-index)` with a value of `1000`. |
+| Name                 | Default                              | Description                                                                                                                                                                                                   |
+| -------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-menu-z-index` | `var(--sbb-overlay-default-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`. |
 
 ## Slots
 
diff --git a/src/components/message.ts b/src/components/message.ts
new file mode 100644
index 0000000000..caa3bc5c35
--- /dev/null
+++ b/src/components/message.ts
@@ -0,0 +1 @@
+export * from './message/message.js';
diff --git a/src/components/message/index.ts b/src/components/message/index.ts
deleted file mode 100644
index f54558745b..0000000000
--- a/src/components/message/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './message';
diff --git a/src/components/message/message.e2e.ts b/src/components/message/message.e2e.ts
index 972eabf94d..c5a67e9d4d 100644
--- a/src/components/message/message.e2e.ts
+++ b/src/components/message/message.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbMessageElement } from './message';
+import { SbbMessageElement } from './message.js';
 
 describe(`sbb-message with ${fixture.name}`, () => {
   let element: SbbMessageElement;
diff --git a/src/components/message/message.scss b/src/components/message/message.scss
index 3102980d44..62c14cf321 100644
--- a/src/components/message/message.scss
+++ b/src/components/message/message.scss
@@ -1,14 +1,15 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-message-subtitle-color: var(--sbb-color-granite);
   --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
   --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
   --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
+
+  display: block;
 }
 
 .sbb-message__container {
diff --git a/src/components/message/message.spec.ts b/src/components/message/message.spec.ts
index 7cb015b2bc..6fe1dbc2da 100644
--- a/src/components/message/message.spec.ts
+++ b/src/components/message/message.spec.ts
@@ -1,12 +1,12 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbMessageElement } from './message';
-import './message';
-import '../image';
-import '../button/button';
+import type { SbbMessageElement } from './message.js';
+import './message.js';
+import '../image.js';
+import '../button/button.js';
 
 describe(`sbb-message`, () => {
   describe('renders', () => {
diff --git a/src/components/message/message.stories.ts b/src/components/message/message.stories.ts
index bca52dac1b..8c21eca167 100644
--- a/src/components/message/message.stories.ts
+++ b/src/components/message/message.stories.ts
@@ -5,12 +5,12 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../core/dom';
-import images from '../core/images';
-import '../image';
-import '../title';
-import '../button/secondary-button';
-import './message';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import images from '../core/images.js';
+import '../image.js';
+import '../title.js';
+import '../button/secondary-button.js';
+import './message.js';
 
 import readme from './readme.md?raw';
 
@@ -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/message/message.ts b/src/components/message/message.ts
index 497b764aeb..5e00cd410c 100644
--- a/src/components/message/message.ts
+++ b/src/components/message/message.ts
@@ -2,8 +2,8 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { SbbTitleLevel } from '../title';
-import '../title';
+import type { SbbTitleLevel } from '../title.js';
+import '../title.js';
 
 import style from './message.scss?lit&inline';
 
diff --git a/src/components/navigation.ts b/src/components/navigation.ts
new file mode 100644
index 0000000000..1cf8f82204
--- /dev/null
+++ b/src/components/navigation.ts
@@ -0,0 +1,7 @@
+export * from './navigation/navigation.js';
+export * from './navigation/navigation-list.js';
+export * from './navigation/navigation-marker.js';
+export * from './navigation/navigation-section.js';
+export * from './navigation/navigation-button.js';
+export * from './navigation/navigation-link.js';
+export * from './navigation/common.js';
diff --git a/src/components/navigation/common.ts b/src/components/navigation/common.ts
new file mode 100644
index 0000000000..6f7a354bf6
--- /dev/null
+++ b/src/components/navigation/common.ts
@@ -0,0 +1 @@
+export * from './common/navigation-action-common.js';
diff --git a/src/components/navigation/common/index.ts b/src/components/navigation/common/index.ts
deleted file mode 100644
index 0dbab00730..0000000000
--- a/src/components/navigation/common/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './navigation-action-common';
diff --git a/src/components/navigation/common/navigation-action-common.ts b/src/components/navigation/common/navigation-action-common.ts
index a5db3be5ed..1b5b82cd6d 100644
--- a/src/components/navigation/common/navigation-action-common.ts
+++ b/src/components/navigation/common/navigation-action-common.ts
@@ -2,17 +2,18 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import type { AbstractConstructor, SbbActionBaseElement } from '../../core/common-behaviors';
-import { ConnectedAbortController } from '../../core/eventing';
-import type { SbbNavigationButtonElement } from '../navigation-button';
-import type { SbbNavigationLinkElement } from '../navigation-link';
-import type { SbbNavigationMarkerElement } from '../navigation-marker';
-import type { SbbNavigationSectionElement } from '../navigation-section';
-
-import '../../icon';
+import type { SbbActionBaseElement } from '../../core/base-elements.js';
+import { SbbConnectedAbortController } from '../../core/controllers.js';
+import type { AbstractConstructor } from '../../core/mixins.js';
+import type { SbbNavigationButtonElement } from '../navigation-button.js';
+import type { SbbNavigationLinkElement } from '../navigation-link.js';
+import type { SbbNavigationMarkerElement } from '../navigation-marker.js';
+import type { SbbNavigationSectionElement } from '../navigation-section.js';
 
 import style from './navigation-action.scss?lit&inline';
 
+import '../../icon.js';
+
 export type SbbNavigationActionSize = 's' | 'm' | 'l';
 
 export declare class SbbNavigationActionCommonElementMixinType {
@@ -50,7 +51,7 @@ export const SbbNavigationActionCommonElementMixin = <
       return this._navigationSection;
     }
 
-    private _abort = new ConnectedAbortController(this);
+    private _abort = new SbbConnectedAbortController(this);
     private _navigationMarker: SbbNavigationMarkerElement | null = null;
     private _navigationSection: SbbNavigationSectionElement | null = null;
 
diff --git a/src/components/navigation/common/navigation-action.scss b/src/components/navigation/common/navigation-action.scss
index 3802c84a5b..74e1703323 100644
--- a/src/components/navigation/common/navigation-action.scss
+++ b/src/components/navigation/common/navigation-action.scss
@@ -1,16 +1,17 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-navigation-action-color: var(--sbb-color-cloud);
+  --sbb-navigation-action-icon-display: none;
+
+  display: block;
+
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
-
-  --sbb-navigation-action-color: var(--sbb-color-cloud);
-  --sbb-navigation-action-icon-display: none;
 }
 
 :host([data-section-action][data-action-active].sbb-active) {
diff --git a/src/components/navigation/index.ts b/src/components/navigation/index.ts
deleted file mode 100644
index ab08587a5c..0000000000
--- a/src/components/navigation/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './navigation';
-export * from './navigation-list';
-export * from './navigation-marker';
-export * from './navigation-section';
-export * from './navigation-button';
-export * from './navigation-link';
-export * from './common';
diff --git a/src/components/navigation/navigation-button.ts b/src/components/navigation/navigation-button.ts
new file mode 100644
index 0000000000..cce3a916e5
--- /dev/null
+++ b/src/components/navigation/navigation-button.ts
@@ -0,0 +1 @@
+export * from './navigation-button/navigation-button.js';
diff --git a/src/components/navigation/navigation-button/__snapshots__/navigation-button.spec.snap.js b/src/components/navigation/navigation-button/__snapshots__/navigation-button.spec.snap.js
new file mode 100644
index 0000000000..aa2ad6d8d7
--- /dev/null
+++ b/src/components/navigation/navigation-button/__snapshots__/navigation-button.spec.snap.js
@@ -0,0 +1,64 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-navigation-button renders DOM"] = 
+`<sbb-navigation-button
+  data-action=""
+  data-button=""
+  dir="ltr"
+  role="button"
+  size="l"
+  tabindex="0"
+>
+  Button
+</sbb-navigation-button>
+`;
+/* end snapshot sbb-navigation-button renders DOM */
+
+snapshots["sbb-navigation-button renders Shadow DOM"] = 
+`<span class="sbb-action-base sbb-navigation-button">
+  <sbb-icon
+    aria-hidden="true"
+    data-namespace="default"
+    name="dash-small"
+    role="img"
+  >
+  </sbb-icon>
+  <slot>
+  </slot>
+</span>
+`;
+/* end snapshot sbb-navigation-button renders Shadow DOM */
+
+snapshots["sbb-navigation-button renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Button"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-navigation-button renders A11y tree Chrome */
+
+snapshots["sbb-navigation-button renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Button"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-navigation-button renders A11y tree Firefox */
+
diff --git a/src/components/navigation/navigation-button/index.ts b/src/components/navigation/navigation-button/index.ts
deleted file mode 100644
index 5d315f1562..0000000000
--- a/src/components/navigation/navigation-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './navigation-button';
diff --git a/src/components/navigation/navigation-button/navigation-button.e2e.ts b/src/components/navigation/navigation-button/navigation-button.e2e.ts
index a95c5af20e..fef354e777 100644
--- a/src/components/navigation/navigation-button/navigation-button.e2e.ts
+++ b/src/components/navigation/navigation-button/navigation-button.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing.js';
 
-import { SbbNavigationButtonElement } from './navigation-button';
+import { SbbNavigationButtonElement } from './navigation-button.js';
 
 describe(`sbb-navigation-button with ${fixture.name}`, () => {
   let element: SbbNavigationButtonElement;
diff --git a/src/components/navigation/navigation-button/navigation-button.spec.ts b/src/components/navigation/navigation-button/navigation-button.spec.ts
index b4c9882d1f..1ca16d362c 100644
--- a/src/components/navigation/navigation-button/navigation-button.spec.ts
+++ b/src/components/navigation/navigation-button/navigation-button.spec.ts
@@ -1,32 +1,28 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import './navigation-button';
-import { fixture } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+
+import type { SbbNavigationButtonElement } from './navigation-button.js';
+
+import './navigation-button.js';
 
 describe(`sbb-navigation-button`, () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-navigation-button></sbb-navigation-button>`);
-
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-navigation-button size="l" role="button" tabindex="0" dir="ltr" data-action data-button>
-        </sbb-navigation-button>
-      `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-        <span class="sbb-action-base sbb-navigation-button">
-          <sbb-icon
-            aria-hidden="true"
-            data-namespace="default"
-            name="dash-small"
-            role="img"
-          >
-          </sbb-icon>
-          <slot></slot>
-        </span>
-      `,
-    );
+  let element: SbbNavigationButtonElement;
+
+  describe('renders', async () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-navigation-button>Button</sbb-navigation-button>`);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 });
diff --git a/src/components/navigation/navigation-button/navigation-button.stories.ts b/src/components/navigation/navigation-button/navigation-button.stories.ts
index 6bb6761cf7..1e63140a44 100644
--- a/src/components/navigation/navigation-button/navigation-button.stories.ts
+++ b/src/components/navigation/navigation-button/navigation-button.stories.ts
@@ -1,12 +1,11 @@
 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 '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './navigation-button';
+import './navigation-button.js';
 
 const size: InputType = {
   control: {
@@ -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-button/navigation-button.ts b/src/components/navigation/navigation-button/navigation-button.ts
index c913280361..252612a536 100644
--- a/src/components/navigation/navigation-button/navigation-button.ts
+++ b/src/components/navigation/navigation-button/navigation-button.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbButtonBaseElement } from '../../core/common-behaviors';
-import { SbbNavigationActionCommonElementMixin } from '../common';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbNavigationActionCommonElementMixin } from '../common.js';
 
 /**
  * It displays a button element that can be used in the `sbb-navigation` component.
diff --git a/src/components/navigation/navigation-link.ts b/src/components/navigation/navigation-link.ts
new file mode 100644
index 0000000000..b077c6f91a
--- /dev/null
+++ b/src/components/navigation/navigation-link.ts
@@ -0,0 +1 @@
+export * from './navigation-link/navigation-link.js';
diff --git a/src/components/navigation/navigation-link/__snapshots__/navigation-link.spec.snap.js b/src/components/navigation/navigation-link/__snapshots__/navigation-link.spec.snap.js
new file mode 100644
index 0000000000..e4c9a06105
--- /dev/null
+++ b/src/components/navigation/navigation-link/__snapshots__/navigation-link.spec.snap.js
@@ -0,0 +1,89 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-navigation-link renders DOM"] = 
+`<sbb-navigation-link
+  data-action=""
+  data-link=""
+  dir="ltr"
+  href="https://www.sbb.ch"
+  role="link"
+  size="l"
+  tabindex="0"
+  target="_blank"
+>
+  This is a link
+</sbb-navigation-link>
+`;
+/* end snapshot sbb-navigation-link renders DOM */
+
+snapshots["sbb-navigation-link renders Shadow DOM"] = 
+`<a
+  class="sbb-action-base sbb-navigation-link"
+  href="https://www.sbb.ch"
+  rel="external noopener nofollow"
+  role="presentation"
+  tabindex="-1"
+  target="_blank"
+>
+  <sbb-icon
+    aria-hidden="true"
+    data-namespace="default"
+    name="dash-small"
+    role="img"
+  >
+  </sbb-icon>
+  <slot>
+  </slot>
+  <sbb-screen-reader-only>
+    . Link target opens in a new window.
+  </sbb-screen-reader-only>
+</a>
+`;
+/* end snapshot sbb-navigation-link renders Shadow DOM */
+
+snapshots["sbb-navigation-link renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "This is a link . Link target opens in a new window.",
+      "children": [
+        {
+          "role": "link",
+          "name": "This is a link . Link target opens in a new window."
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-navigation-link renders A11y tree Chrome */
+
+snapshots["sbb-navigation-link renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "This is a link . Link target opens in a new window.",
+      "children": [
+        {
+          "role": "link",
+          "name": "This is a link . Link target opens in a new window.",
+          "value": "https://www.sbb.ch/"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-navigation-link renders A11y tree Firefox */
+
diff --git a/src/components/navigation/navigation-link/index.ts b/src/components/navigation/navigation-link/index.ts
deleted file mode 100644
index 8bb74920c6..0000000000
--- a/src/components/navigation/navigation-link/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './navigation-link';
diff --git a/src/components/navigation/navigation-link/navigation-link.e2e.ts b/src/components/navigation/navigation-link/navigation-link.e2e.ts
index 7925fb49c3..1eccc70f55 100644
--- a/src/components/navigation/navigation-link/navigation-link.e2e.ts
+++ b/src/components/navigation/navigation-link/navigation-link.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing.js';
 
-import { SbbNavigationLinkElement } from './navigation-link';
+import { SbbNavigationLinkElement } from './navigation-link.js';
 
 describe(`sbb-navigation-link with ${fixture.name}`, () => {
   let element: SbbNavigationLinkElement;
diff --git a/src/components/navigation/navigation-link/navigation-link.spec.ts b/src/components/navigation/navigation-link/navigation-link.spec.ts
index fe927b0bd1..5daedadf32 100644
--- a/src/components/navigation/navigation-link/navigation-link.spec.ts
+++ b/src/components/navigation/navigation-link/navigation-link.spec.ts
@@ -1,41 +1,32 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import './navigation-link';
+import type { SbbNavigationLinkElement } from './navigation-link.js';
+
+import './navigation-link.js';
 
 describe(`sbb-navigation-link`, () => {
-  it('renders', async () => {
-    const root = await fixture(
-      html`<sbb-navigation-link href="#" target="_blank"></sbb-navigation-link>`,
-    );
-
-    expect(root).dom.to.be.equal(`
-      <sbb-navigation-link href='#' target='_blank' size="l" role="link" tabindex="0" dir="ltr" data-action data-link>
-      </sbb-navigation-link>
-    `);
-    expect(root).shadowDom.to.be.equal(`
-      <a
-        class="sbb-action-base sbb-navigation-link"
-        href="#"
-        target='_blank'
-        rel="external noopener nofollow"
-        role="presentation"
-        tabindex="-1"
-      >
-        <sbb-icon
-          aria-hidden="true"
-          data-namespace="default"
-          name="dash-small"
-          role="img"
-        >
-        </sbb-icon>
-        <slot></slot>
-        <sbb-screen-reader-only>
-          . Link target opens in a new window.
-        </sbb-screen-reader-only>
-      </a>
-    `);
+  let element: SbbNavigationLinkElement;
+
+  describe('renders', async () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-navigation-link href="https://www.sbb.ch" target="_blank"
+          >This is a link</sbb-navigation-link
+        >`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 });
diff --git a/src/components/navigation/navigation-link/navigation-link.stories.ts b/src/components/navigation/navigation-link/navigation-link.stories.ts
index 3e60a256ac..da5c648211 100644
--- a/src/components/navigation/navigation-link/navigation-link.stories.ts
+++ b/src/components/navigation/navigation-link/navigation-link.stories.ts
@@ -2,13 +2,11 @@ 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 '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './navigation-link';
+import './navigation-link.js';
 
 const size: InputType = {
   control: {
@@ -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-link/navigation-link.ts b/src/components/navigation/navigation-link/navigation-link.ts
index 14605652af..fcc3745d7f 100644
--- a/src/components/navigation/navigation-link/navigation-link.ts
+++ b/src/components/navigation/navigation-link/navigation-link.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
-import { SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbNavigationActionCommonElementMixin } from '../common';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+import { SbbNavigationActionCommonElementMixin } from '../common.js';
 
 /**
  * It displays a link element that can be used in the `sbb-navigation` component.
diff --git a/src/components/navigation/navigation-list.ts b/src/components/navigation/navigation-list.ts
new file mode 100644
index 0000000000..31f64e4f38
--- /dev/null
+++ b/src/components/navigation/navigation-list.ts
@@ -0,0 +1 @@
+export * from './navigation-list/navigation-list.js';
diff --git a/src/components/navigation/navigation-list/__snapshots__/navigation-list.spec.snap.js b/src/components/navigation/navigation-list/__snapshots__/navigation-list.spec.snap.js
index 5bbc905e9a..5c3667554b 100644
--- a/src/components/navigation/navigation-list/__snapshots__/navigation-list.spec.snap.js
+++ b/src/components/navigation/navigation-list/__snapshots__/navigation-list.spec.snap.js
@@ -1,7 +1,57 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-navigation-list renders"] = 
+snapshots["sbb-navigation-list renders DOM"] = 
+`<sbb-navigation-list data-slot-names="li-0 li-1 li-2 li-3">
+  <sbb-navigation-button
+    data-action=""
+    data-button=""
+    dir="ltr"
+    role="button"
+    size="m"
+    slot="li-0"
+    tabindex="0"
+  >
+    Tickets & Offers
+  </sbb-navigation-button>
+  <sbb-navigation-button
+    data-action=""
+    data-button=""
+    dir="ltr"
+    role="button"
+    size="m"
+    slot="li-1"
+    tabindex="0"
+  >
+    Vacations & Recreation
+  </sbb-navigation-button>
+  <sbb-navigation-button
+    data-action=""
+    data-button=""
+    dir="ltr"
+    role="button"
+    size="m"
+    slot="li-2"
+    tabindex="0"
+  >
+    Travel information
+  </sbb-navigation-button>
+  <sbb-navigation-button
+    data-action=""
+    data-button=""
+    dir="ltr"
+    role="button"
+    size="m"
+    slot="li-3"
+    tabindex="0"
+  >
+    Help & Contact
+  </sbb-navigation-button>
+</sbb-navigation-list>
+`;
+/* end snapshot sbb-navigation-list renders DOM */
+
+snapshots["sbb-navigation-list renders Shadow DOM"] = 
 `<span
   class="sbb-navigation-list__label"
   id="sbb-navigation-link-label-id"
@@ -35,9 +85,43 @@ snapshots["sbb-navigation-list renders"] =
   </slot>
 </span>
 `;
-/* end snapshot sbb-navigation-list renders */
+/* end snapshot sbb-navigation-list renders Shadow DOM */
+
+snapshots["sbb-navigation-list renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Tickets & Offers"
+    },
+    {
+      "role": "button",
+      "name": "Vacations & Recreation"
+    },
+    {
+      "role": "button",
+      "name": "Travel information"
+    },
+    {
+      "role": "button",
+      "name": "Help & Contact"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-navigation-list renders A11y tree Chrome */
 
-snapshots["sbb-navigation-list should render named slots if data-ssr-child-count attribute is set"] = 
+snapshots["sbb-navigation-list should render named slots if data-ssr-child-count attribute is set DOM"] = 
+`<sbb-navigation-list data-ssr-child-count="3">
+</sbb-navigation-list>
+`;
+/* end snapshot sbb-navigation-list should render named slots if data-ssr-child-count attribute is set DOM */
+
+snapshots["sbb-navigation-list should render named slots if data-ssr-child-count attribute is set Shadow DOM"] = 
 `<span
   class="sbb-navigation-list__label"
   id="sbb-navigation-link-label-id"
@@ -67,5 +151,33 @@ snapshots["sbb-navigation-list should render named slots if data-ssr-child-count
   </slot>
 </span>
 `;
-/* end snapshot sbb-navigation-list should render named slots if data-ssr-child-count attribute is set */
+/* end snapshot sbb-navigation-list should render named slots if data-ssr-child-count attribute is set Shadow DOM */
+
+snapshots["sbb-navigation-list renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Tickets & Offers"
+    },
+    {
+      "role": "button",
+      "name": "Vacations & Recreation"
+    },
+    {
+      "role": "button",
+      "name": "Travel information"
+    },
+    {
+      "role": "button",
+      "name": "Help & Contact"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-navigation-list renders A11y tree Firefox */
 
diff --git a/src/components/navigation/navigation-list/index.ts b/src/components/navigation/navigation-list/index.ts
deleted file mode 100644
index d2cd952eac..0000000000
--- a/src/components/navigation/navigation-list/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './navigation-list';
diff --git a/src/components/navigation/navigation-list/navigation-list.e2e.ts b/src/components/navigation/navigation-list/navigation-list.e2e.ts
index 7ff3394d3a..d1906cd60d 100644
--- a/src/components/navigation/navigation-list/navigation-list.e2e.ts
+++ b/src/components/navigation/navigation-list/navigation-list.e2e.ts
@@ -1,11 +1,11 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import { SbbNavigationListElement } from './navigation-list';
+import { SbbNavigationListElement } from './navigation-list.js';
 
-import '../navigation-button';
+import '../navigation-button.js';
 
 describe(`sbb-navigation-list with ${fixture.name}`, () => {
   let element: SbbNavigationListElement;
@@ -18,7 +18,7 @@ describe(`sbb-navigation-list with ${fixture.name}`, () => {
           <sbb-navigation-button>Label 2</sbb-navigation-button>
         </sbb-navigation-list>
       `,
-      { modules: ['./navigation-list.ts', '../navigation-button/index.ts'] },
+      { modules: ['./navigation-list.ts', '../navigation-button.ts'] },
     );
   });
 
diff --git a/src/components/navigation/navigation-list/navigation-list.scss b/src/components/navigation/navigation-list/navigation-list.scss
index b7b61d27f8..fc76e71e1b 100644
--- a/src/components/navigation/navigation-list/navigation-list.scss
+++ b/src/components/navigation/navigation-list/navigation-list.scss
@@ -1,8 +1,11 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
+  display: block;
+}
 
 .sbb-navigation-list__content {
   @include sbb.list-reset;
diff --git a/src/components/navigation/navigation-list/navigation-list.spec.ts b/src/components/navigation/navigation-list/navigation-list.spec.ts
index 05a171264d..b10b9f95fa 100644
--- a/src/components/navigation/navigation-list/navigation-list.spec.ts
+++ b/src/components/navigation/navigation-list/navigation-list.spec.ts
@@ -1,47 +1,52 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import './navigation-list';
-import '../navigation-button';
+import type { SbbNavigationListElement } from './navigation-list.js';
+
+import './navigation-list.js';
+import '../navigation-button.js';
 
 describe(`sbb-navigation-list`, () => {
-  it('renders', async () => {
-    const root = await fixture(
-      html` <sbb-navigation-list>
-        <sbb-navigation-button>Tickets & Offers</sbb-navigation-button>
-        <sbb-navigation-button>Vacations & Recreation</sbb-navigation-button>
-        <sbb-navigation-button>Travel information</sbb-navigation-button>
-        <sbb-navigation-button>Help & Contact</sbb-navigation-button>
-      </sbb-navigation-list>`,
-    );
-
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-navigation-list data-slot-names="li-0 li-1 li-2 li-3">
-          <sbb-navigation-button data-action data-button dir="ltr" role="button" size="m" tabindex="0" slot="li-0">
-            Tickets &amp; Offers
-          </sbb-navigation-button>
-          <sbb-navigation-button data-action data-button dir="ltr" role="button" size="m" tabindex="0" slot="li-1">
-            Vacations &amp; Recreation
-          </sbb-navigation-button>
-          <sbb-navigation-button data-action data-button dir="ltr" role="button" size="m" tabindex="0" slot="li-2">
-            Travel information
-          </sbb-navigation-button>
-          <sbb-navigation-button data-action data-button dir="ltr" role="button" size="m" tabindex="0" slot="li-3">
-            Help &amp; Contact
-          </sbb-navigation-button>
-        </sbb-navigation-list>
-      `,
-    );
-    await expect(root).shadowDom.to.be.equalSnapshot();
+  let element: SbbNavigationListElement;
+
+  describe('renders', async () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-navigation-list>
+          <sbb-navigation-button>Tickets & Offers</sbb-navigation-button>
+          <sbb-navigation-button>Vacations & Recreation</sbb-navigation-button>
+          <sbb-navigation-button>Travel information</sbb-navigation-button>
+          <sbb-navigation-button>Help & Contact</sbb-navigation-button>
+        </sbb-navigation-list>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
-  it('should render named slots if data-ssr-child-count attribute is set', async () => {
-    const root = await fixture(
-      html`<sbb-navigation-list data-ssr-child-count="3"></sbb-navigation-list>`,
-    );
-    await expect(root).shadowDom.to.equalSnapshot();
+  describe('should render named slots if data-ssr-child-count attribute is set', async () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-navigation-list data-ssr-child-count="3"></sbb-navigation-list>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
   });
 });
diff --git a/src/components/navigation/navigation-list/navigation-list.stories.ts b/src/components/navigation/navigation-list/navigation-list.stories.ts
index 43f57dbbfc..b84bfbac67 100644
--- a/src/components/navigation/navigation-list/navigation-list.stories.ts
+++ b/src/components/navigation/navigation-list/navigation-list.stories.ts
@@ -2,14 +2,12 @@ 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 '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './navigation-list';
-import '../navigation-button';
+import './navigation-list.js';
+import '../navigation-button.js';
 
 const label: InputType = {
   control: {
@@ -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-list/navigation-list.ts b/src/components/navigation/navigation-list/navigation-list.ts
index f8a46f9ad2..eadb461a39 100644
--- a/src/components/navigation/navigation-list/navigation-list.ts
+++ b/src/components/navigation/navigation-list/navigation-list.ts
@@ -7,12 +7,10 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-  NamedSlotStateController,
-  SbbNamedSlotListMixin,
-  type WithListChildren,
-} from '../../core/common-behaviors';
-import type { SbbNavigationButtonElement, SbbNavigationLinkElement } from '../index';
+import { SbbSlotStateController } from '../../core/controllers.js';
+import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js';
+import type { SbbNavigationButtonElement } from '../navigation-button.js';
+import type { SbbNavigationLinkElement } from '../navigation-link.js';
 
 import style from './navigation-list.scss?lit&inline';
 
@@ -37,7 +35,7 @@ export class SbbNavigationListElement extends SbbNamedSlotListMixin<
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
diff --git a/src/components/navigation/navigation-marker.ts b/src/components/navigation/navigation-marker.ts
new file mode 100644
index 0000000000..04819ca547
--- /dev/null
+++ b/src/components/navigation/navigation-marker.ts
@@ -0,0 +1 @@
+export * from './navigation-marker/navigation-marker.js';
diff --git a/src/components/navigation/navigation-marker/__snapshots__/navigation-marker.spec.snap.js b/src/components/navigation/navigation-marker/__snapshots__/navigation-marker.spec.snap.js
new file mode 100644
index 0000000000..a4ff1c85d9
--- /dev/null
+++ b/src/components/navigation/navigation-marker/__snapshots__/navigation-marker.spec.snap.js
@@ -0,0 +1,17 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-navigation-marker renders DOM"] = 
+`<sbb-navigation-marker size="l">
+</sbb-navigation-marker>
+`;
+/* end snapshot sbb-navigation-marker renders DOM */
+
+snapshots["sbb-navigation-marker renders Shadow DOM"] = 
+`<span hidden="">
+  <slot>
+  </slot>
+</span>
+`;
+/* end snapshot sbb-navigation-marker renders Shadow DOM */
+
diff --git a/src/components/navigation/navigation-marker/index.ts b/src/components/navigation/navigation-marker/index.ts
deleted file mode 100644
index 4cfd2b5d13..0000000000
--- a/src/components/navigation/navigation-marker/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './navigation-marker';
diff --git a/src/components/navigation/navigation-marker/navigation-marker.e2e.ts b/src/components/navigation/navigation-marker/navigation-marker.e2e.ts
index 1f7f95a8a7..f4c48c4aff 100644
--- a/src/components/navigation/navigation-marker/navigation-marker.e2e.ts
+++ b/src/components/navigation/navigation-marker/navigation-marker.e2e.ts
@@ -1,12 +1,12 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
 
-import { SbbNavigationMarkerElement } from './navigation-marker';
+import { SbbNavigationMarkerElement } from './navigation-marker.js';
 
-import '../navigation-button';
+import '../navigation-button.js';
 
 describe(`sbb-navigation-marker with ${fixture.name}`, () => {
   let element: SbbNavigationMarkerElement;
@@ -19,7 +19,7 @@ describe(`sbb-navigation-marker with ${fixture.name}`, () => {
         <sbb-navigation-button id="nav-3">Travel information</sbb-navigation-button>
         <sbb-navigation-button id="nav-4">Help & Contact</sbb-navigation-button>
       </sbb-navigation-marker>`,
-      { modules: ['./navigation-marker.ts', '../navigation-button/index.ts'] },
+      { modules: ['./navigation-marker.ts', '../navigation-button.ts'] },
     );
   });
 
diff --git a/src/components/navigation/navigation-marker/navigation-marker.scss b/src/components/navigation/navigation-marker/navigation-marker.scss
index d578e1bdb2..94f37e8456 100644
--- a/src/components/navigation/navigation-marker/navigation-marker.scss
+++ b/src/components/navigation/navigation-marker/navigation-marker.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-navigation-action-gap: var(--sbb-spacing-responsive-xs);
@@ -17,6 +16,8 @@
     1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) /
       2
   );
+
+  display: block;
 }
 
 :host([size='s']) {
diff --git a/src/components/navigation/navigation-marker/navigation-marker.spec.ts b/src/components/navigation/navigation-marker/navigation-marker.spec.ts
index 0f907170e5..a26631fa8b 100644
--- a/src/components/navigation/navigation-marker/navigation-marker.spec.ts
+++ b/src/components/navigation/navigation-marker/navigation-marker.spec.ts
@@ -1,21 +1,26 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import './navigation-marker';
+import type { SbbNavigationMarkerElement } from './navigation-marker.js';
+
+import './navigation-marker.js';
 
 describe(`sbb-navigation-marker`, () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-navigation-marker></sbb-navigation-marker>`);
+  let element: SbbNavigationMarkerElement;
+
+  describe('renders', async () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-navigation-marker size="l"></sbb-navigation-marker>`);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-    expect(root).dom.to.be.equal(`<sbb-navigation-marker size="l"></sbb-navigation-marker>`);
-    expect(root).shadowDom.to.be.equal(
-      `
-        <span hidden="">
-          <slot></slot>
-        </span>
-      `,
-    );
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
   });
 });
diff --git a/src/components/navigation/navigation-marker/navigation-marker.stories.ts b/src/components/navigation/navigation-marker/navigation-marker.stories.ts
index 1e41fef5c7..17a40ac18c 100644
--- a/src/components/navigation/navigation-marker/navigation-marker.stories.ts
+++ b/src/components/navigation/navigation-marker/navigation-marker.stories.ts
@@ -2,14 +2,12 @@ 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 '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './navigation-marker';
-import '../navigation-button';
+import './navigation-marker.js';
+import '../navigation-button.js';
 
 const size: InputType = {
   control: {
@@ -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-marker/navigation-marker.ts b/src/components/navigation/navigation-marker/navigation-marker.ts
index 65fa4facfe..f0c83f073f 100644
--- a/src/components/navigation/navigation-marker/navigation-marker.ts
+++ b/src/components/navigation/navigation-marker/navigation-marker.ts
@@ -1,9 +1,10 @@
 import { type CSSResultGroup, LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/common-behaviors';
-import { AgnosticResizeObserver } from '../../core/observers';
-import type { SbbNavigationButtonElement, SbbNavigationLinkElement } from '../index';
+import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js';
+import { AgnosticResizeObserver } from '../../core/observers.js';
+import type { SbbNavigationButtonElement } from '../navigation-button.js';
+import type { SbbNavigationLinkElement } from '../navigation-link.js';
 
 import style from './navigation-marker.scss?lit&inline';
 
@@ -87,7 +88,7 @@ export class SbbNavigationMarkerElement extends SbbNamedSlotListMixin<
 
   public reset(): void {
     if (this._currentActiveAction) {
-      this._currentActiveAction.toggleAttribute('data-action-active', false);
+      this._currentActiveAction.removeAttribute('data-action-active');
       this._currentActiveAction.connectedSection?.close();
       this._currentActiveAction = undefined;
     }
diff --git a/src/components/navigation/navigation-section.ts b/src/components/navigation/navigation-section.ts
new file mode 100644
index 0000000000..d3bd03e238
--- /dev/null
+++ b/src/components/navigation/navigation-section.ts
@@ -0,0 +1 @@
+export * from './navigation-section/navigation-section.js';
diff --git a/src/components/navigation/navigation-section/__snapshots__/navigation-section.spec.snap.js b/src/components/navigation/navigation-section/__snapshots__/navigation-section.spec.snap.js
index 6540bc99e2..d99b2576eb 100644
--- a/src/components/navigation/navigation-section/__snapshots__/navigation-section.spec.snap.js
+++ b/src/components/navigation/navigation-section/__snapshots__/navigation-section.spec.snap.js
@@ -1,7 +1,18 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-navigation-section renders"] = 
+snapshots["sbb-navigation-section renders DOM"] = 
+`<sbb-navigation-section
+  aria-hidden="true"
+  data-state="closed"
+  id="sbb-navigation-section-0"
+  slot="navigation-section"
+>
+</sbb-navigation-section>
+`;
+/* end snapshot sbb-navigation-section renders DOM */
+
+snapshots["sbb-navigation-section renders Shadow DOM"] = 
 `<div class="sbb-navigation-section__container">
   <nav
     aria-labelledby="title"
@@ -42,5 +53,5 @@ snapshots["sbb-navigation-section renders"] =
   </nav>
 </div>
 `;
-/* end snapshot sbb-navigation-section renders */
+/* end snapshot sbb-navigation-section renders Shadow DOM */
 
diff --git a/src/components/navigation/navigation-section/index.ts b/src/components/navigation/navigation-section/index.ts
deleted file mode 100644
index 3c507ddeab..0000000000
--- a/src/components/navigation/navigation-section/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './navigation-section';
diff --git a/src/components/navigation/navigation-section/navigation-section.e2e.ts b/src/components/navigation/navigation-section/navigation-section.e2e.ts
index bd5b64ecfb..d8ec071141 100644
--- a/src/components/navigation/navigation-section/navigation-section.e2e.ts
+++ b/src/components/navigation/navigation-section/navigation-section.e2e.ts
@@ -1,14 +1,14 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbNavigationSectionElement } from './navigation-section';
+import { SbbNavigationSectionElement } from './navigation-section.js';
 
-import '../navigation';
-import '../navigation-list';
-import '../navigation-button';
+import '../navigation.js';
+import '../navigation-list.js';
+import '../navigation-button.js';
 
 describe(`sbb-navigation-section with ${fixture.name}`, () => {
   let element: SbbNavigationSectionElement;
@@ -29,10 +29,10 @@ describe(`sbb-navigation-section with ${fixture.name}`, () => {
       `,
       {
         modules: [
-          '../navigation/index.ts',
+          '../navigation.ts',
           './navigation-section.ts',
-          '../navigation-list/index.ts',
-          '../navigation-button/index.ts',
+          '../navigation-list.ts',
+          '../navigation-button.ts',
         ],
       },
     );
diff --git a/src/components/navigation/navigation-section/navigation-section.scss b/src/components/navigation/navigation-section/navigation-section.scss
index 3c2b601d4c..98541f51b9 100644
--- a/src/components/navigation/navigation-section/navigation-section.scss
+++ b/src/components/navigation/navigation-section/navigation-section.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-navigation-section-display: none;
@@ -30,7 +29,7 @@
   inset-block-start: 0;
   width: var(--sbb-navigation-section-width);
   height: var(--sbb-navigation-section-height);
-  z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-z-index));
+  z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));
 
   // Needed for backwards compatibility on Chromatic
   // TODO: Remove once not needed
diff --git a/src/components/navigation/navigation-section/navigation-section.spec.ts b/src/components/navigation/navigation-section/navigation-section.spec.ts
index dd33095ea5..ad60b828bb 100644
--- a/src/components/navigation/navigation-section/navigation-section.spec.ts
+++ b/src/components/navigation/navigation-section/navigation-section.spec.ts
@@ -1,20 +1,26 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import './navigation-section';
+import type { SbbNavigationSectionElement } from './navigation-section.js';
+
+import './navigation-section.js';
 
 describe(`sbb-navigation-section`, () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-navigation-section></sbb-navigation-section>`);
+  let element: SbbNavigationSectionElement;
+
+  describe('renders', async () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-navigation-section></sbb-navigation-section>`);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-    expect(root).dom.to.be.equal(
-      `
-        <sbb-navigation-section slot="navigation-section" data-state="closed" id="sbb-navigation-section-1" aria-hidden="true">
-        </sbb-navigation-section>
-      `,
-    );
-    await expect(root).shadowDom.to.be.equalSnapshot();
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
   });
 });
diff --git a/src/components/navigation/navigation-section/navigation-section.stories.ts b/src/components/navigation/navigation-section/navigation-section.stories.ts
index 2beaac01b9..af54053f02 100644
--- a/src/components/navigation/navigation-section/navigation-section.stories.ts
+++ b/src/components/navigation/navigation-section/navigation-section.stories.ts
@@ -1,21 +1,21 @@
 import { userEvent, waitFor, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
 
 import readme from './readme.md?raw';
-import '../../button';
-import '../navigation-list';
-import '../navigation-button';
-import '../navigation-link';
-import '../navigation-marker';
-import '../navigation';
-import './navigation-section';
+import '../../button.js';
+import '../navigation-list.js';
+import '../navigation-button.js';
+import '../navigation-link.js';
+import '../navigation-marker.js';
+import '../navigation.js';
+import './navigation-section.js';
 
 // Story interaction executed after the story renders
 const playStory = async (trigger: string, canvasElement: HTMLElement): Promise<void> => {
@@ -133,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 92ace0e5e3..a3bb031f45 100644
--- a/src/components/navigation/navigation-section/navigation-section.ts
+++ b/src/components/navigation/navigation-section/navigation-section.ts
@@ -1,41 +1,31 @@
-import { spread } from '@open-wc/lit-helpers';
-import type { CSSResultGroup, TemplateResult } from 'lit';
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { type CSSResultGroup, html, LitElement, nothing, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
 import {
-  assignId,
   getFirstFocusableElement,
   getFocusableElements,
   setModalityOnNextFocus,
-} from '../../core/a11y';
-import {
-  hostAttributes,
-  LanguageController,
-  NamedSlotStateController,
-  UpdateScheduler,
-} from '../../core/common-behaviors';
-import {
-  findReferencedElement,
-  isBreakpoint,
-  isValidAttribute,
-  setAttribute,
-} from '../../core/dom';
-import { i18nGoBack } from '../../core/i18n';
-import type { SbbOverlayState } from '../../core/overlay';
+} from '../../core/a11y.js';
+import { SbbLanguageController, SbbSlotStateController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { findReferencedElement, isBreakpoint, setOrRemoveAttribute } from '../../core/dom.js';
+import { i18nGoBack } from '../../core/i18n.js';
+import type { SbbOpenedClosedState } from '../../core/interfaces.js';
+import { SbbUpdateSchedulerMixin } from '../../core/mixins.js';
 import {
   removeAriaOverlayTriggerAttributes,
   setAriaOverlayTriggerAttributes,
-} from '../../core/overlay';
-import type { SbbNavigationElement } from '../navigation';
-import type { SbbNavigationButtonElement } from '../navigation-button';
-import type { SbbNavigationLinkElement } from '../navigation-link';
-import '../../divider';
-import '../../button/transparent-button';
+} from '../../core/overlay.js';
+import type { SbbNavigationButtonElement } from '../navigation-button.js';
+import type { SbbNavigationLinkElement } from '../navigation-link.js';
+import type { SbbNavigationElement } from '../navigation.js';
 
 import style from './navigation-section.scss?lit&inline';
 
+import '../../button/transparent-button.js';
+import '../../divider.js';
+
 let nextId = 0;
 
 /**
@@ -47,7 +37,7 @@ let nextId = 0;
 @hostAttributes({
   slot: 'navigation-section',
 })
-export class SbbNavigationSectionElement extends UpdateScheduler(LitElement) {
+export class SbbNavigationSectionElement extends SbbUpdateSchedulerMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
 
   /**
@@ -85,7 +75,13 @@ export class SbbNavigationSectionElement extends UpdateScheduler(LitElement) {
   /**
    * The state of the navigation section.
    */
-  @state() private _state: SbbOverlayState = 'closed';
+  private set _state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
+    setOrRemoveAttribute(this, 'aria-hidden', this._state !== 'opened' ? 'true' : null);
+  }
+  private get _state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
+  }
 
   private _firstLevelNavigation?: SbbNavigationElement | null = null;
   private _navigationSection!: HTMLElement;
@@ -93,12 +89,11 @@ export class SbbNavigationSectionElement extends UpdateScheduler(LitElement) {
   private _triggerElement: SbbNavigationButtonElement | null = null;
   private _navigationSectionController!: AbortController;
   private _windowEventsController!: AbortController;
-  private _navigationSectionId = `sbb-navigation-section-${++nextId}`;
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   /**
@@ -165,12 +160,7 @@ export class SbbNavigationSectionElement extends UpdateScheduler(LitElement) {
       return;
     }
 
-    setAriaOverlayTriggerAttributes(
-      this._triggerElement,
-      'menu',
-      this.id || this._navigationSectionId,
-      this._state,
-    );
+    setAriaOverlayTriggerAttributes(this._triggerElement, 'menu', this.id, this._state);
     this._navigationSectionController?.abort();
     this._navigationSectionController = new AbortController();
     this._triggerElement.connectedSection = this;
@@ -221,7 +211,7 @@ export class SbbNavigationSectionElement extends UpdateScheduler(LitElement) {
     const activeActions = Array.from(
       this.querySelectorAll('[data-section-action][data-action-active]'),
     ) as (SbbNavigationButtonElement | SbbNavigationLinkElement)[];
-    activeActions?.forEach((action) => action.toggleAttribute('data-action-active', false));
+    activeActions?.forEach((action) => action.removeAttribute('data-action-active'));
   }
 
   private _attachWindowEvents(): void {
@@ -249,7 +239,7 @@ export class SbbNavigationSectionElement extends UpdateScheduler(LitElement) {
   private _isCloseElement(element: HTMLElement): boolean {
     return (
       element.nodeName === 'A' ||
-      (!isValidAttribute(element, 'disabled') &&
+      (!element.hasAttribute('disabled') &&
         (element.hasAttribute('sbb-navigation-close') ||
           element.hasAttribute('sbb-navigation-section-close')))
     );
@@ -325,6 +315,8 @@ export class SbbNavigationSectionElement extends UpdateScheduler(LitElement) {
 
   public override connectedCallback(): void {
     super.connectedCallback();
+    this.id ||= `sbb-navigation-section-${nextId++}`;
+    this._state ||= 'closed';
     // Validate trigger element and attach event listeners
     this._configure(this.trigger);
     this._firstLevelNavigation = this._triggerElement?.closest?.('sbb-navigation');
@@ -337,16 +329,6 @@ export class SbbNavigationSectionElement extends UpdateScheduler(LitElement) {
   }
 
   protected override render(): TemplateResult {
-    // Accessibility label should win over aria-labelledby
-    let accessibilityAttributes: Record<string, string> = { 'aria-labelledby': 'title' };
-    if (this.accessibilityLabel) {
-      accessibilityAttributes = { 'aria-label': this.accessibilityLabel };
-    }
-
-    setAttribute(this, 'data-state', this._state);
-    setAttribute(this, 'aria-hidden', this._state !== 'opened' ? 'true' : null);
-    assignId(() => this._navigationSectionId)(this);
-
     return html`
       <div
         class="sbb-navigation-section__container"
@@ -355,7 +337,8 @@ export class SbbNavigationSectionElement extends UpdateScheduler(LitElement) {
         <nav
           @animationend=${(event: AnimationEvent) => this._onAnimationEnd(event)}
           class="sbb-navigation-section"
-          ${spread(accessibilityAttributes)}
+          aria-labelledby=${!this.accessibilityLabel ? 'title' : nothing}
+          aria-label=${this.accessibilityLabel ? this.accessibilityLabel : nothing}
           ${ref(
             (navigationSectionRef?: Element) =>
               (this._navigationSection = navigationSectionRef as HTMLElement),
diff --git a/src/components/navigation/navigation.ts b/src/components/navigation/navigation.ts
new file mode 100644
index 0000000000..06b9ea755c
--- /dev/null
+++ b/src/components/navigation/navigation.ts
@@ -0,0 +1 @@
+export * from './navigation/navigation.js';
diff --git a/src/components/navigation/navigation/__snapshots__/navigation.spec.snap.js b/src/components/navigation/navigation/__snapshots__/navigation.spec.snap.js
index 10fa3015bf..e24030ae4a 100644
--- a/src/components/navigation/navigation/__snapshots__/navigation.spec.snap.js
+++ b/src/components/navigation/navigation/__snapshots__/navigation.spec.snap.js
@@ -4,7 +4,7 @@ export const snapshots = {};
 snapshots["sbb-navigation renders DOM"] = 
 `<sbb-navigation
   data-state="closed"
-  id="sbb-navigation-1"
+  id="sbb-navigation-0"
   role="navigation"
   trigger="nav-trigger"
 >
diff --git a/src/components/navigation/navigation/index.ts b/src/components/navigation/navigation/index.ts
deleted file mode 100644
index 701e50504d..0000000000
--- a/src/components/navigation/navigation/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './navigation';
diff --git a/src/components/navigation/navigation/navigation.e2e.ts b/src/components/navigation/navigation/navigation.e2e.ts
index a9ebcaf057..271272b075 100644
--- a/src/components/navigation/navigation/navigation.e2e.ts
+++ b/src/components/navigation/navigation/navigation.e2e.ts
@@ -2,17 +2,17 @@ import { assert, expect, nextFrame } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import type { SbbButtonElement } from '../../button';
-import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbNavigationButtonElement } from '../navigation-button';
-import type { SbbNavigationSectionElement } from '../navigation-section';
+import type { SbbButtonElement } from '../../button.js';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing.js';
+import type { SbbNavigationButtonElement } from '../navigation-button.js';
+import type { SbbNavigationSectionElement } from '../navigation-section.js';
 
-import { SbbNavigationElement } from './navigation';
+import { SbbNavigationElement } from './navigation.js';
 
-import '../navigation-button';
-import '../navigation-marker';
-import '../navigation-section';
+import '../navigation-button.js';
+import '../navigation-marker.js';
+import '../navigation-section.js';
 
 describe(`sbb-navigation with ${fixture.name}`, () => {
   let element: SbbNavigationElement;
@@ -41,9 +41,9 @@ describe(`sbb-navigation with ${fixture.name}`, () => {
       {
         modules: [
           './navigation.ts',
-          '../navigation-marker/index.ts',
-          '../navigation-button/index.ts',
-          '../navigation-section/index.ts',
+          '../navigation-marker.ts',
+          '../navigation-button.ts',
+          '../navigation-section.ts',
         ],
       },
     );
@@ -86,11 +86,7 @@ describe(`sbb-navigation with ${fixture.name}`, () => {
         </sbb-navigation>
       `,
       {
-        modules: [
-          './navigation.ts',
-          '../navigation-marker/index.ts',
-          '../navigation-button/index.ts',
-        ],
+        modules: ['./navigation.ts', '../navigation-marker.ts', '../navigation-button.ts'],
       },
     );
 
@@ -140,9 +136,9 @@ describe(`sbb-navigation with ${fixture.name}`, () => {
       {
         modules: [
           './navigation.ts',
-          '../navigation-marker/index.ts',
-          '../navigation-button/index.ts',
-          '../navigation-section/index.ts',
+          '../navigation-marker.ts',
+          '../navigation-button.ts',
+          '../navigation-section.ts',
         ],
       },
     );
@@ -194,11 +190,7 @@ describe(`sbb-navigation with ${fixture.name}`, () => {
         </sbb-navigation>
       `,
       {
-        modules: [
-          './navigation.ts',
-          '../navigation-marker/index.ts',
-          '../navigation-button/index.ts',
-        ],
+        modules: ['./navigation.ts', '../navigation-marker.ts', '../navigation-button.ts'],
       },
     );
 
diff --git a/src/components/navigation/navigation/navigation.scss b/src/components/navigation/navigation/navigation.scss
index eecb110952..7cc2625bd0 100644
--- a/src/components/navigation/navigation/navigation.scss
+++ b/src/components/navigation/navigation/navigation.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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;
 
 @mixin transition($properties...) {
   transition: {
@@ -34,9 +33,10 @@
   --sbb-navigation-width: 100%;
   --sbb-navigation-height: 100vh;
 
+  display: block;
   position: fixed;
   inset: var(--sbb-navigation-inset);
-  z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-z-index));
+  z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));
   overflow: hidden;
 
   // Needed for backwards compatibility on Chromatic
@@ -100,7 +100,7 @@
   }
 }
 
-:host(:is([data-resize-disable-animation])) {
+:host([data-resize-disable-animation]) {
   @include sbb.disable-animation;
 }
 
@@ -189,7 +189,7 @@
   width: var(--sbb-navigation-expanded-width);
   pointer-events: none;
   padding: var(--sbb-spacing-responsive-xs);
-  z-index: calc(var(--sbb-navigation-z-index, var(--sbb-overlay-z-index)) + 1);
+  z-index: calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1);
 }
 
 .sbb-navigation__close {
diff --git a/src/components/navigation/navigation/navigation.spec.ts b/src/components/navigation/navigation/navigation.spec.ts
index 0c96b9708d..69ef90c2b4 100644
--- a/src/components/navigation/navigation/navigation.spec.ts
+++ b/src/components/navigation/navigation/navigation.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import './navigation';
-import '../navigation-button';
-import '../navigation-marker';
-import '../../button/button';
-import type { SbbNavigationElement } from './navigation';
+import './navigation.js';
+import '../navigation-button.js';
+import '../navigation-marker.js';
+import '../../button/button.js';
+import type { SbbNavigationElement } from './navigation.js';
 
 describe(`sbb-navigation`, () => {
   describe('renders', async () => {
diff --git a/src/components/navigation/navigation/navigation.stories.ts b/src/components/navigation/navigation/navigation.stories.ts
index ad3b90c0d4..3fa14d4f66 100644
--- a/src/components/navigation/navigation/navigation.stories.ts
+++ b/src/components/navigation/navigation/navigation.stories.ts
@@ -9,22 +9,22 @@ import type {
   Decorator,
   StoryContext,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
 
-import { SbbNavigationElement } from './navigation';
+import { SbbNavigationElement } from './navigation.js';
 import readme from './readme.md?raw';
-import '../navigation-section';
-import '../navigation-marker';
-import '../navigation-list';
-import '../navigation-button';
-import '../navigation-link';
-import '../../button/button';
-import '../../button/secondary-button';
+import '../navigation-section.js';
+import '../navigation-marker.js';
+import '../navigation-list.js';
+import '../navigation-button.js';
+import '../navigation-link.js';
+import '../../button/button.js';
+import '../../button/secondary-button.js';
 
 // Story interaction executed after the story renders
 const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
@@ -220,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: {
@@ -238,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 51c5c413e8..81bfaa50f8 100644
--- a/src/components/navigation/navigation/navigation.ts
+++ b/src/components/navigation/navigation/navigation.ts
@@ -1,33 +1,31 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
-import { FocusHandler, assignId, setModalityOnNextFocus } from '../../core/a11y';
-import { hostAttributes, LanguageController, UpdateScheduler } from '../../core/common-behaviors';
+import { SbbFocusHandler, setModalityOnNextFocus } from '../../core/a11y.js';
+import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { findReferencedElement, SbbScrollHandler } from '../../core/dom.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { i18nCloseNavigation } from '../../core/i18n.js';
+import type { SbbOpenedClosedState } from '../../core/interfaces.js';
+import { SbbUpdateSchedulerMixin } from '../../core/mixins.js';
+import { AgnosticMutationObserver, AgnosticResizeObserver } from '../../core/observers.js';
 import {
-  ScrollHandler,
-  isValidAttribute,
-  findReferencedElement,
-  setAttribute,
-} from '../../core/dom';
-import { EventEmitter, ConnectedAbortController } from '../../core/eventing';
-import { i18nCloseNavigation } from '../../core/i18n';
-import { AgnosticMutationObserver, AgnosticResizeObserver } from '../../core/observers';
-import type { SbbOverlayState } from '../../core/overlay';
-import {
-  removeAriaOverlayTriggerAttributes,
-  setAriaOverlayTriggerAttributes,
-  isEventOnElement,
   applyInertMechanism,
+  isEventOnElement,
+  removeAriaOverlayTriggerAttributes,
   removeInertMechanism,
-} from '../../core/overlay';
-import type { SbbNavigationButtonElement } from '../navigation-button';
-import type { SbbNavigationLinkElement } from '../navigation-link';
-import '../../button/transparent-button';
+  setAriaOverlayTriggerAttributes,
+} from '../../core/overlay.js';
+import type { SbbNavigationButtonElement } from '../navigation-button.js';
+import type { SbbNavigationLinkElement } from '../navigation-link.js';
 
 import style from './navigation.scss?lit&inline';
 
+import '../../button/transparent-button.js';
+
 /** Configuration for the attribute to look at if a navigation section is displayed */
 const navigationObserverConfig: MutationObserverInit = {
   subtree: true,
@@ -45,15 +43,15 @@ const DEBOUNCE_TIME = 150;
  * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-navigation` is opened.
  * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-navigation` begins the closing transition. Can be canceled.
  * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-navigation` is closed.
- * @cssprop [--sbb-navigation-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-navigation-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
- * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
  */
 @customElement('sbb-navigation')
 @hostAttributes({
   role: 'navigation',
 })
-export class SbbNavigationElement extends UpdateScheduler(LitElement) {
+export class SbbNavigationElement extends SbbUpdateSchedulerMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
     willOpen: 'willOpen',
@@ -87,7 +85,12 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
   /**
    * The state of the navigation.
    */
-  @state() private _state: SbbOverlayState = 'closed';
+  private set _state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
+  }
+  private get _state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
+  }
 
   /**
    * Whether a navigation section is displayed.
@@ -127,17 +130,16 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
   private _triggerElement: HTMLElement | null = null;
   private _navigationController!: AbortController;
   private _windowEventsController!: AbortController;
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this);
-  private _focusHandler = new FocusHandler();
-  private _scrollHandler = new ScrollHandler();
+  private _abort = new SbbConnectedAbortController(this);
+  private _language = new SbbLanguageController(this);
+  private _focusHandler = new SbbFocusHandler();
+  private _scrollHandler = new SbbScrollHandler();
   private _isPointerDownEventOnNavigation: boolean = false;
   private _resizeObserverTimeout: ReturnType<typeof setTimeout> | null = null;
   private _navigationObserver = new AgnosticMutationObserver((mutationsList: MutationRecord[]) =>
     this._onNavigationSectionChange(mutationsList),
   );
   private _navigationResizeObserver = new AgnosticResizeObserver(() => this._onNavigationResize());
-  private _navigationId = `sbb-navigation-${++nextId}`;
 
   /**
    * Opens the navigation.
@@ -216,12 +218,7 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
       return;
     }
 
-    setAriaOverlayTriggerAttributes(
-      this._triggerElement,
-      'menu',
-      this.id || this._navigationId,
-      this._state,
-    );
+    setAriaOverlayTriggerAttributes(this._triggerElement, 'menu', this.id, this._state);
     this._navigationController?.abort();
     this._navigationController = new AbortController();
     this._triggerElement.addEventListener('click', () => this.open(), {
@@ -291,7 +288,7 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
   private _isCloseElement(element: HTMLElement): boolean {
     return (
       element.nodeName === 'A' ||
-      (element.hasAttribute('sbb-navigation-close') && !isValidAttribute(element, 'disabled'))
+      (element.hasAttribute('sbb-navigation-close') && !element.hasAttribute('disabled'))
     );
   }
 
@@ -337,6 +334,7 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
         this._activeNavigationSection = this.querySelector(
           'sbb-navigation-section[data-state="opening"], sbb-navigation-section[data-state="opened"]',
         );
+        this.toggleAttribute('data-has-navigation-section', !!this._activeNavigationSection);
       }
     }
   }
@@ -354,13 +352,15 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
 
     // Disable the animation when resizing the navigation to avoid strange height transition effects.
     this._resizeObserverTimeout = setTimeout(
-      () => this.toggleAttribute('data-resize-disable-animation', false),
+      () => this.removeAttribute('data-resize-disable-animation'),
       DEBOUNCE_TIME,
     );
   }
 
   public override connectedCallback(): void {
     super.connectedCallback();
+    this.id ||= `sbb-navigation-${nextId++}`;
+    this._state ||= 'closed';
     const signal = this._abort.signal;
     this.addEventListener('click', (e) => this._handleNavigationClose(e), { signal });
     // Validate trigger element and attach event listeners
@@ -399,10 +399,6 @@ export class SbbNavigationElement extends UpdateScheduler(LitElement) {
       ></sbb-transparent-button>
     `;
 
-    setAttribute(this, 'data-has-navigation-section', !!this._activeNavigationSection);
-    setAttribute(this, 'data-state', this._state);
-    assignId(() => this._navigationId)(this);
-
     return html`
       <div class="sbb-navigation__container">
         <div
diff --git a/src/components/navigation/navigation/readme.md b/src/components/navigation/navigation/readme.md
index 6367ba36f7..f19721d341 100644
--- a/src/components/navigation/navigation/readme.md
+++ b/src/components/navigation/navigation/readme.md
@@ -86,9 +86,9 @@ Add the `sbb-disable-animation` class to disable animation and transition effect
 
 ## CSS Properties
 
-| Name                       | Default                      | Description                                                                                                                                                                                           |
-| -------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-navigation-z-index` | `var(--sbb-overlay-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-z-index)` with a value of `1000`. |
+| Name                       | Default                              | Description                                                                                                                                                                                                   |
+| -------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-navigation-z-index` | `var(--sbb-overlay-default-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`. |
 
 ## Slots
 
diff --git a/src/components/notification.ts b/src/components/notification.ts
new file mode 100644
index 0000000000..b0eb213b95
--- /dev/null
+++ b/src/components/notification.ts
@@ -0,0 +1 @@
+export * from './notification/notification.js';
diff --git a/src/components/notification/index.ts b/src/components/notification/index.ts
deleted file mode 100644
index d9b217ce3b..0000000000
--- a/src/components/notification/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './notification';
diff --git a/src/components/notification/notification.e2e.ts b/src/components/notification/notification.e2e.ts
index de86adf60d..cb76f312f3 100644
--- a/src/components/notification/notification.e2e.ts
+++ b/src/components/notification/notification.e2e.ts
@@ -1,13 +1,13 @@
 import { aTimeout, assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbSecondaryButtonElement } from '../button';
-import { waitForCondition, EventSpy, waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import type { SbbSecondaryButtonElement } from '../button.js';
+import { fixture } from '../core/testing/private.js';
+import { waitForCondition, EventSpy, waitForLitRender } from '../core/testing.js';
 
-import { SbbNotificationElement } from './notification';
+import { SbbNotificationElement } from './notification.js';
 
-import '../link/link';
+import '../link/link.js';
 
 describe(`sbb-notification with ${fixture.name}`, () => {
   let element: SbbNotificationElement;
@@ -20,7 +20,7 @@ describe(`sbb-notification with ${fixture.name}`, () => {
           <sbb-link href="/">Link one</sbb-link>
         </sbb-notification>
       `,
-      { modules: ['./notification.ts', '../link/index.ts'] },
+      { modules: ['./notification.ts', '../link.ts'] },
     );
   });
 
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index faee5a39f6..205122aa76 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -2,9 +2,8 @@
 @use 'sass:color';
 @use 'node_modules/@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables.scss' as sbb-tokens;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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;
 
 // Open/Close animation vars
 $open-anim-margin-from: 0;
@@ -38,6 +37,17 @@ $open-anim-height-to: calc(
   // As the notification has always a light background, we have to fix the focus outline color
   // to default color for cases where the notification is used in a negative context.
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
+
+  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;
 }
 
 // By default, the open animation is disabled
diff --git a/src/components/notification/notification.spec.ts b/src/components/notification/notification.spec.ts
index 157d495958..27bacda083 100644
--- a/src/components/notification/notification.spec.ts
+++ b/src/components/notification/notification.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition } from '../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
+import { waitForCondition } from '../core/testing.js';
 
-import './notification';
+import './notification.js';
 
 describe(`sbb-notification`, () => {
   it('renders', async () => {
@@ -15,7 +15,7 @@ describe(`sbb-notification`, () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification data-state="opened" type="info" data-slot-names="unnamed" data-resize-disable-animation>
+      <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'] },
@@ -33,7 +33,7 @@ describe(`sbb-notification`, () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification data-state="opened" title-content="Title" type="info" data-slot-names="unnamed" data-resize-disable-animation>
+      <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'] },
@@ -52,7 +52,7 @@ describe(`sbb-notification`, () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification data-state="opened" type="info" data-slot-names="title unnamed" data-resize-disable-animation>
+      <sbb-notification data-state="opened" type="info" data-slot-names="title unnamed" animation="all" data-resize-disable-animation>
         <span slot="title">
           Slotted title
         </span>
@@ -73,7 +73,7 @@ describe(`sbb-notification`, () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification readonly data-state="opened" title-content="Title" type="info" data-slot-names="unnamed" data-resize-disable-animation>
+      <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'] },
diff --git a/src/components/notification/notification.stories.ts b/src/components/notification/notification.stories.ts
index b1b026f6d0..1fcf049875 100644
--- a/src/components/notification/notification.stories.ts
+++ b/src/components/notification/notification.stories.ts
@@ -4,13 +4,13 @@ import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import type { SbbSecondaryButtonElement } from '../button';
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import type { SbbSecondaryButtonElement } from '../button.js';
 
-import { SbbNotificationElement } from './notification';
+import { SbbNotificationElement } from './notification.js';
 import readme from './readme.md?raw';
-import '../button/secondary-button';
-import '../link/link';
+import '../button/secondary-button.js';
+import '../link/link.js';
 
 const titleContent: InputType = {
   control: {
@@ -31,16 +31,25 @@ const readonly: InputType = {
   },
 };
 
+const animation: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['all', 'close', 'open', 'none'],
+};
+
 const basicArgTypes: ArgTypes = {
   'title-content': titleContent,
   type: type,
   readonly: readonly,
+  animation: animation,
 };
 
 const basicArgs: Args = {
   'title-content': 'Title',
-  type: type.options[0],
+  type: type.options![0],
   readonly: false,
+  animation: animation.options![0],
 };
 
 const appendNotification = (event: Event, args: Args): void => {
@@ -53,6 +62,7 @@ const appendNotification = (event: Event, args: Args): void => {
   newNotification.titleContent = args['title-content'];
   newNotification.type = args['type'];
   newNotification.readonly = args['readonly'];
+  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
@@ -92,7 +102,7 @@ const pageContent = (): TemplateResult => html`
 
 const DefaultTemplate = (args: Args): TemplateResult => html`
   <sbb-notification
-    ${sbbSpread(args)}
+    ${sbbSpread({ ...args, animation: 'close' })}
     style="--sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0;"
   >
     The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
@@ -104,7 +114,7 @@ const DefaultTemplate = (args: Args): TemplateResult => html`
 
 const MultipleNotificationsTemplate = (args: Args): TemplateResult => html`
   <sbb-notification
-    ${sbbSpread(args)}
+    ${sbbSpread({ ...args, animation: 'close' })}
     style="--sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0;"
   >
     The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
@@ -119,7 +129,7 @@ const MultipleNotificationsTemplate = (args: Args): TemplateResult => html`
 
 const SlottedTitleTemplate = (args: Args): TemplateResult => html`
   <sbb-notification
-    ${sbbSpread(args)}
+    ${sbbSpread({ ...args, animation: 'close' })}
     style="--sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0;"
   >
     <span slot="title">Slotted title</span>
@@ -139,19 +149,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 = {
@@ -188,9 +198,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"
@@ -213,9 +221,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 9870fde137..b6bb7d3ab2 100644
--- a/src/components/notification/notification.ts
+++ b/src/components/notification/notification.ts
@@ -1,17 +1,17 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-
-import { LanguageController, NamedSlotStateController } from '../core/common-behaviors';
-import { setAttribute } from '../core/dom';
-import { EventEmitter } from '../core/eventing';
-import { i18nCloseNotification } from '../core/i18n';
-import { AgnosticResizeObserver } from '../core/observers';
-import type { SbbTitleLevel } from '../title';
-import '../button/secondary-button';
-import '../divider';
-import '../icon';
-import '../title';
+import { customElement, property } from 'lit/decorators.js';
+
+import { SbbLanguageController, SbbSlotStateController } from '../core/controllers.js';
+import { EventEmitter } from '../core/eventing.js';
+import { i18nCloseNotification } from '../core/i18n.js';
+import type { SbbOpenedClosedState } from '../core/interfaces.js';
+import { AgnosticResizeObserver } from '../core/observers.js';
+import type { SbbTitleLevel } from '../title.js';
+import '../button/secondary-button.js';
+import '../divider.js';
+import '../icon.js';
+import '../title.js';
 
 import style from './notification.scss?lit&inline';
 
@@ -67,14 +67,24 @@ export class SbbNotificationElement extends LitElement {
    */
   @property({ reflect: true, type: Boolean }) public readonly = false;
 
+  /**
+   * The enabled animations.
+   */
+  @property({ reflect: true }) public animation: 'open' | 'close' | 'all' | 'none' = 'all';
+
   /**
    * The state of the notification.
    */
-  @state() private _state: 'closed' | 'opening' | 'opened' | 'closing' = 'closed';
+  private set _state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
+  }
+  private get _state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
+  }
 
   private _notificationElement!: HTMLElement;
   private _resizeObserverTimeout: ReturnType<typeof setTimeout> | null = null;
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
   private _notificationResizeObserver = new AgnosticResizeObserver(() =>
     this._onNotificationResize(),
   );
@@ -105,7 +115,7 @@ export class SbbNotificationElement extends LitElement {
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   private _open(): void {
@@ -123,6 +133,8 @@ export class SbbNotificationElement extends LitElement {
   }
 
   public override connectedCallback(): void {
+    this._state ||= 'closed';
+
     super.connectedCallback();
   }
 
@@ -143,9 +155,10 @@ export class SbbNotificationElement extends LitElement {
   }
 
   private _setNotificationHeight(): void {
-    const notificationHeight = this._notificationElement.scrollHeight
-      ? `${this._notificationElement.scrollHeight}px`
-      : 'auto';
+    if (!this._notificationElement?.scrollHeight) {
+      return;
+    }
+    const notificationHeight = `${this._notificationElement.scrollHeight}px`;
     this.style.setProperty('--sbb-notification-height', notificationHeight);
   }
 
@@ -163,7 +176,7 @@ export class SbbNotificationElement extends LitElement {
 
     // Disable the animation when resizing the notification to avoid strange height transition effects.
     this._resizeObserverTimeout = setTimeout(
-      () => this.toggleAttribute('data-resize-disable-animation', false),
+      () => this.removeAttribute('data-resize-disable-animation'),
       DEBOUNCE_TIME,
     );
   }
@@ -192,8 +205,6 @@ export class SbbNotificationElement extends LitElement {
   }
 
   protected override render(): TemplateResult {
-    setAttribute(this, 'data-state', this._state);
-
     return html`
       <div
         class="sbb-notification__wrapper"
diff --git a/src/components/notification/readme.md b/src/components/notification/readme.md
index 7a75980e73..69cabf4eba 100644
--- a/src/components/notification/readme.md
+++ b/src/components/notification/readme.md
@@ -73,9 +73,8 @@ This ensures that users who rely on screen readers are promptly informed of any
 
 ## Animation
 
-By default, the `sbb-notification` does not have an open animation. Add the `.sbb-animate` class to the element to enable it.
-
-Add the `sbb-disable-animation` class to disable animation and transition effects for the element and all its children.
+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 -->
 
@@ -87,6 +86,7 @@ Add the `sbb-disable-animation` class to disable animation and transition effect
 | `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.ts b/src/components/option.ts
new file mode 100644
index 0000000000..ec7d6daa61
--- /dev/null
+++ b/src/components/option.ts
@@ -0,0 +1,2 @@
+export * from './option/optgroup.js';
+export * from './option/option.js';
diff --git a/src/components/option/index.ts b/src/components/option/index.ts
deleted file mode 100644
index aa9755a578..0000000000
--- a/src/components/option/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './optgroup';
-export * from './option';
diff --git a/src/components/option/optgroup.ts b/src/components/option/optgroup.ts
new file mode 100644
index 0000000000..eb0db4f872
--- /dev/null
+++ b/src/components/option/optgroup.ts
@@ -0,0 +1 @@
+export * from './optgroup/optgroup.js';
diff --git a/src/components/option/optgroup/__snapshots__/optgroup.spec.snap.js b/src/components/option/optgroup/__snapshots__/optgroup.spec.snap.js
index ff930c7a00..2c5da12e94 100644
--- a/src/components/option/optgroup/__snapshots__/optgroup.spec.snap.js
+++ b/src/components/option/optgroup/__snapshots__/optgroup.spec.snap.js
@@ -10,22 +10,20 @@ snapshots["sbb-optgroup autocomplete renders Chrome-Firefox Dom"] =
   role="group"
 >
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-slot-names="unnamed"
     data-variant="autocomplete"
-    id="sbb-option-1"
+    id="sbb-option-0"
     role="option"
     value="1"
   >
     1
   </sbb-option>
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-slot-names="unnamed"
     data-variant="autocomplete"
-    id="sbb-option-2"
+    id="sbb-option-1"
     role="option"
     value="2"
   >
@@ -63,7 +61,22 @@ snapshots["sbb-optgroup autocomplete renders A11y tree Chrome"] =
 `<p>
   {
   "role": "WebArea",
-  "name": ""
+  "name": "",
+  "children": [
+    {
+      "role": "combobox",
+      "name": "",
+      "expanded": true,
+      "focused": true,
+      "autocomplete": "list",
+      "haspopup": "listbox"
+    },
+    {
+      "role": "listbox",
+      "name": "",
+      "orientation": "vertical"
+    }
+  ]
 }
 </p>
 `;
@@ -84,7 +97,7 @@ snapshots["sbb-optgroup autocomplete renders disabled Chrome-Firefox Dom"] =
     data-group-disabled=""
     data-slot-names="unnamed"
     data-variant="autocomplete"
-    id="sbb-option-7"
+    id="sbb-option-6"
     role="option"
     value="1"
   >
@@ -96,7 +109,7 @@ snapshots["sbb-optgroup autocomplete renders disabled Chrome-Firefox Dom"] =
     data-group-disabled=""
     data-slot-names="unnamed"
     data-variant="autocomplete"
-    id="sbb-option-8"
+    id="sbb-option-7"
     role="option"
     value="2"
   >
@@ -134,7 +147,31 @@ snapshots["sbb-optgroup autocomplete renders A11y tree Firefox"] =
 `<p>
   {
   "role": "document",
-  "name": ""
+  "name": "",
+  "children": [
+    {
+      "role": "combobox",
+      "name": "",
+      "expanded": true,
+      "focused": true,
+      "autocomplete": "list",
+      "haspopup": "listbox"
+    },
+    {
+      "role": "listbox",
+      "name": "",
+      "children": [
+        {
+          "role": "option",
+          "name": "1"
+        },
+        {
+          "role": "option",
+          "name": "2"
+        }
+      ]
+    }
+  ]
 }
 </p>
 `;
@@ -146,24 +183,22 @@ snapshots["sbb-optgroup autocomplete renders Safari Dom"] =
   label="Label"
 >
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-group-label="Label"
     data-slot-names="unnamed"
     data-variant="autocomplete"
-    id="sbb-option-1"
+    id="sbb-option-0"
     role="option"
     value="1"
   >
     1
   </sbb-option>
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-group-label="Label"
     data-slot-names="unnamed"
     data-variant="autocomplete"
-    id="sbb-option-2"
+    id="sbb-option-1"
     role="option"
     value="2"
   >
@@ -210,7 +245,7 @@ snapshots["sbb-optgroup autocomplete renders disabled Safari Dom"] =
     data-group-label="Label"
     data-slot-names="unnamed"
     data-variant="autocomplete"
-    id="sbb-option-5"
+    id="sbb-option-4"
     role="option"
     value="1"
   >
@@ -223,7 +258,7 @@ snapshots["sbb-optgroup autocomplete renders disabled Safari Dom"] =
     data-group-label="Label"
     data-slot-names="unnamed"
     data-variant="autocomplete"
-    id="sbb-option-6"
+    id="sbb-option-5"
     role="option"
     value="2"
   >
diff --git a/src/components/option/optgroup/index.ts b/src/components/option/optgroup/index.ts
deleted file mode 100644
index 592fec910f..0000000000
--- a/src/components/option/optgroup/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './optgroup';
diff --git a/src/components/option/optgroup/optgroup.e2e.ts b/src/components/option/optgroup/optgroup.e2e.ts
index 2fa37691c0..4819d47666 100644
--- a/src/components/option/optgroup/optgroup.e2e.ts
+++ b/src/components/option/optgroup/optgroup.e2e.ts
@@ -1,12 +1,12 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbOptionElement } from '../option';
-import '../option';
+import { fixture } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
+import type { SbbOptionElement } from '../option.js';
+import '../option.js';
 
-import { SbbOptGroupElement } from './optgroup';
+import { SbbOptGroupElement } from './optgroup.js';
 
 describe(`sbb-optgroup with ${fixture.name}`, () => {
   let element: SbbOptGroupElement;
@@ -20,7 +20,7 @@ describe(`sbb-optgroup with ${fixture.name}`, () => {
           <sbb-option id="option-3" value="option-3">Label 3</sbb-option>
         </sbb-optgroup>
       `,
-      { modules: ['./optgroup.ts', '../option/index.ts'] },
+      { modules: ['./optgroup.ts', '../option.ts'] },
     );
   });
 
@@ -32,7 +32,7 @@ describe(`sbb-optgroup with ${fixture.name}`, () => {
     const optionOne = element.querySelector(':scope > sbb-option#option-1');
     const optionTwo = element.querySelector(':scope > sbb-option#option-2');
     const optionThree = element.querySelector(':scope > sbb-option#option-3');
-    element.setAttribute('disabled', '');
+    element.toggleAttribute('disabled', true);
     await waitForLitRender(element);
 
     expect(element).to.have.attribute('disabled');
@@ -55,7 +55,7 @@ describe(`sbb-optgroup with ${fixture.name}`, () => {
 
     options.forEach((opt) => expect(opt).not.to.have.attribute('selected'));
 
-    element.setAttribute('disabled', '');
+    element.toggleAttribute('disabled', true);
     await waitForLitRender(element);
     expect(element).to.have.attribute('disabled');
 
diff --git a/src/components/option/optgroup/optgroup.scss b/src/components/option/optgroup/optgroup.scss
index 3a36af0454..f322973695 100644
--- a/src/components/option/optgroup/optgroup.scss
+++ b/src/components/option/optgroup/optgroup.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-optgroup-divider-display: block;
@@ -11,6 +10,8 @@
   --sbb-optgroup-label-padding-inline: var(--sbb-spacing-fixed-4x);
   --sbb-optgroup-label-font-size: var(--sbb-typo-scale-0-75x);
   --sbb-optgroup-label-color: var(--sbb-color-metal);
+
+  display: block;
 }
 
 :host(:first-child) {
diff --git a/src/components/option/optgroup/optgroup.spec.ts b/src/components/option/optgroup/optgroup.spec.ts
index 78cb720ce8..d4c6e1a0a7 100644
--- a/src/components/option/optgroup/optgroup.spec.ts
+++ b/src/components/option/optgroup/optgroup.spec.ts
@@ -1,24 +1,26 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { isSafari } from '../../core/dom';
-import { describeIf } from '../../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { isSafari } from '../../core/dom.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { describeIf } from '../../core/testing.js';
 
-import type { SbbOptGroupElement } from './optgroup';
-import '../../autocomplete';
-import '../option';
-import './optgroup';
+import type { SbbOptGroupElement } from './optgroup.js';
+
+import '../../autocomplete.js';
+import '../option.js';
+import './optgroup.js';
 
 describe(`sbb-optgroup`, () => {
   describe('autocomplete', () => {
     describe('renders', () => {
-      let elem: SbbOptGroupElement;
+      let element: SbbOptGroupElement;
 
       beforeEach(async () => {
         const testFixture = await fixture(html`
           <div>
-            <sbb-autocomplete origin="anchor">
+            <input id="input" />
+            <sbb-autocomplete origin="anchor" trigger="input">
               <sbb-optgroup label="Label">
                 <sbb-option value="1">1</sbb-option>
                 <sbb-option value="2">2</sbb-option>
@@ -27,26 +29,29 @@ describe(`sbb-optgroup`, () => {
             <div id="anchor"></div>
           </div>
         `);
-        elem = testFixture.querySelector('sbb-optgroup')!;
+        element = testFixture.querySelector('sbb-optgroup')!;
+
+        // Open input for a meaningful a11y tree
+        testFixture.querySelector<HTMLInputElement>('input')!.focus();
       });
 
       describeIf(!isSafari(), 'Chrome-Firefox', async () => {
         it('Dom', async () => {
-          await expect(elem).dom.to.be.equalSnapshot();
+          await expect(element).dom.to.be.equalSnapshot();
         });
 
         it('ShadowDom', async () => {
-          await expect(elem).shadowDom.to.be.equalSnapshot();
+          await expect(element).shadowDom.to.be.equalSnapshot();
         });
       });
 
       describeIf(isSafari(), 'Safari', async () => {
         it('Dom', async () => {
-          await expect(elem).dom.to.be.equalSnapshot();
+          await expect(element).dom.to.be.equalSnapshot();
         });
 
         it('ShadowDom', async () => {
-          await expect(elem).shadowDom.to.be.equalSnapshot();
+          await expect(element).shadowDom.to.be.equalSnapshot();
         });
       });
 
diff --git a/src/components/option/optgroup/optgroup.stories.ts b/src/components/option/optgroup/optgroup.stories.ts
index 02214f2280..7743c055ce 100644
--- a/src/components/option/optgroup/optgroup.stories.ts
+++ b/src/components/option/optgroup/optgroup.stories.ts
@@ -9,18 +9,13 @@ 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';
-import '../../autocomplete';
-import '../../select';
-import '../option';
-import './optgroup';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import '../../form-field.js';
+import '../../autocomplete.js';
+import '../../select.js';
+import '../option.js';
+import './optgroup.js';
 
 const label: InputType = {
   control: {
@@ -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/optgroup/optgroup.ts b/src/components/option/optgroup/optgroup.ts
index 857673e940..4742f4fd6d 100644
--- a/src/components/option/optgroup/optgroup.ts
+++ b/src/components/option/optgroup/optgroup.ts
@@ -1,14 +1,23 @@
-import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import { SbbDisabledMixin, SbbHydrationMixin } from '../../core/common-behaviors';
-import { isSafari, isValidAttribute, setAttribute } from '../../core/dom';
-import { AgnosticMutationObserver } from '../../core/observers';
-import type { SbbOptionElement, SbbOptionVariant } from '../option';
+import { hostAttributes } from '../../core/decorators.js';
+import { isSafari, setOrRemoveAttribute } from '../../core/dom.js';
+import { SbbDisabledMixin, SbbHydrationMixin } from '../../core/mixins.js';
+import { AgnosticMutationObserver } from '../../core/observers.js';
+import type { SbbOptionElement } from '../option.js';
 
 import style from './optgroup.scss?lit&inline';
-import '../../divider';
+
+import '../../divider.js';
+
+/**
+ * On Safari, the groups labels are not read by VoiceOver.
+ * To solve the problem, we remove the role="group" and add a hidden span containing the group name
+ * TODO: We should periodically check if it has been solved and, if so, remove the property.
+ */
+const inertAriaGroups = isSafari();
 
 /**
  * It can be used as a container for one or more `sbb-option`.
@@ -16,6 +25,7 @@ import '../../divider';
  * @slot - Use the unnamed slot to add `sbb-option` elements to the `sbb-optgroup`.
  */
 @customElement('sbb-optgroup')
+@hostAttributes({ role: !inertAriaGroups ? 'group' : null })
 export class SbbOptGroupElement extends SbbDisabledMixin(SbbHydrationMixin(LitElement)) {
   public static override styles: CSSResultGroup = style;
 
@@ -26,19 +36,6 @@ export class SbbOptGroupElement extends SbbDisabledMixin(SbbHydrationMixin(LitEl
 
   private _negativeObserver = new AgnosticMutationObserver(() => this._onNegativeChange());
 
-  private _variant!: SbbOptionVariant;
-
-  /**
-   * On Safari, the groups labels are not read by VoiceOver.
-   * To solve the problem, we remove the role="group" and add a hidden span containing the group name
-   * TODO: We should periodically check if it has been solved and, if so, remove the property.
-   */
-  private _inertAriaGroups = isSafari();
-
-  private get _isMultiple(): boolean {
-    return this._variant === 'select' && !!this.closest('sbb-select')?.hasAttribute('multiple');
-  }
-
   private get _options(): SbbOptionElement[] {
     return Array.from(this.querySelectorAll?.('sbb-option') ?? []) as SbbOptionElement[];
   }
@@ -58,11 +55,17 @@ export class SbbOptGroupElement extends SbbDisabledMixin(SbbHydrationMixin(LitEl
 
     this._setVariantByContext();
     this._proxyGroupLabelToOptions();
+
+    this.toggleAttribute('data-multiple', !!this.closest('sbb-select[multiple]'));
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
     if (changedProperties.has('disabled')) {
+      if (!inertAriaGroups) {
+        this.setAttribute('aria-disabled', this.disabled.toString());
+      }
+
       this._proxyDisabledToOptions();
     }
     if (changedProperties.has('label')) {
@@ -77,9 +80,9 @@ export class SbbOptGroupElement extends SbbDisabledMixin(SbbHydrationMixin(LitEl
 
   private _setVariantByContext(): void {
     if (this.closest?.('sbb-autocomplete')) {
-      this._variant = 'autocomplete';
+      this.setAttribute('data-variant', 'autocomplete');
     } else if (this.closest?.('sbb-select')) {
-      this._variant = 'select';
+      this.setAttribute('data-variant', 'select');
     }
   }
 
@@ -90,9 +93,11 @@ export class SbbOptGroupElement extends SbbDisabledMixin(SbbHydrationMixin(LitEl
   }
 
   private _proxyGroupLabelToOptions(): void {
-    if (!this._inertAriaGroups) {
+    if (!inertAriaGroups) {
+      setOrRemoveAttribute(this, 'aria-label', this.label);
       return;
     } else if (this.label) {
+      this.removeAttribute('aria-label');
       for (const option of this._options) {
         option.setAttribute('data-group-label', this.label);
         option.requestUpdate?.();
@@ -124,16 +129,10 @@ export class SbbOptGroupElement extends SbbDisabledMixin(SbbHydrationMixin(LitEl
   }
 
   private _onNegativeChange(): void {
-    this._negative = isValidAttribute(this, 'data-negative');
+    this._negative = this.hasAttribute('data-negative');
   }
 
   protected override render(): TemplateResult {
-    setAttribute(this, 'role', !this._inertAriaGroups ? 'group' : null);
-    setAttribute(this, 'data-variant', this._variant);
-    setAttribute(this, 'data-multiple', this._isMultiple);
-    setAttribute(this, 'aria-label', !this._inertAriaGroups && this.label);
-    setAttribute(this, 'aria-disabled', !this._inertAriaGroups && this.disabled.toString());
-
     return html`
       <div class="sbb-optgroup__divider">
         <sbb-divider ?negative=${this._negative}></sbb-divider>
diff --git a/src/components/option/option.ts b/src/components/option/option.ts
new file mode 100644
index 0000000000..700fb16c64
--- /dev/null
+++ b/src/components/option/option.ts
@@ -0,0 +1 @@
+export * from './option/option.js';
diff --git a/src/components/option/option/__snapshots__/option.spec.snap.js b/src/components/option/option/__snapshots__/option.spec.snap.js
index 804e310ec7..b488e0e926 100644
--- a/src/components/option/option/__snapshots__/option.spec.snap.js
+++ b/src/components/option/option/__snapshots__/option.spec.snap.js
@@ -1,7 +1,23 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-option autocomplete renders selected and active"] = 
+snapshots["sbb-option autocomplete renders selected and active DOM"] = 
+`<sbb-option
+  active=""
+  aria-selected="true"
+  data-slot-names="unnamed"
+  data-variant="autocomplete"
+  id="sbb-option-0"
+  role="option"
+  selected=""
+  value="1"
+>
+  Option 1
+</sbb-option>
+`;
+/* end snapshot sbb-option autocomplete renders selected and active DOM */
+
+snapshots["sbb-option autocomplete renders selected and active Shadow DOM"] = 
 `<div class="sbb-option__container">
   <div class="sbb-option">
     <span class="sbb-option__icon">
@@ -16,9 +32,25 @@ snapshots["sbb-option autocomplete renders selected and active"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-option autocomplete renders selected and active */
+/* end snapshot sbb-option autocomplete renders selected and active Shadow DOM */
+
+snapshots["sbb-option autocomplete renders disabled DOM"] = 
+`<sbb-option
+  aria-disabled="true"
+  aria-selected="false"
+  data-slot-names="unnamed"
+  data-variant="autocomplete"
+  disabled=""
+  id="sbb-option-2"
+  role="option"
+  value="1"
+>
+  Option 1
+</sbb-option>
+`;
+/* end snapshot sbb-option autocomplete renders disabled DOM */
 
-snapshots["sbb-option autocomplete renders disabled"] = 
+snapshots["sbb-option autocomplete renders disabled Shadow DOM"] = 
 `<div class="sbb-option__container">
   <div class="sbb-option">
     <span class="sbb-option__icon">
@@ -33,25 +65,46 @@ snapshots["sbb-option autocomplete renders disabled"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-option autocomplete renders disabled */
+/* end snapshot sbb-option autocomplete renders disabled Shadow DOM */
 
-snapshots["sbb-option autocomplete A11y tree Chrome"] = 
+snapshots["sbb-option selected active Chrome"] = 
 `<p>
   {
   "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-option selected active Chrome */
+
+snapshots["sbb-option selected active Firefox"] = 
+`<p>
+  {
+  "role": "document",
   "name": "",
   "children": [
     {
-      "role": "text",
-      "name": "Option 1"
+      "role": "option",
+      "name": "",
+      "selected": true
     }
   ]
 }
 </p>
 `;
-/* end snapshot sbb-option autocomplete A11y tree Chrome */
+/* end snapshot sbb-option selected active Firefox */
+
+snapshots["sbb-option disabled Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-option disabled Chrome */
 
-snapshots["sbb-option autocomplete A11y tree Firefox"] = 
+snapshots["sbb-option disabled Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -59,12 +112,12 @@ snapshots["sbb-option autocomplete A11y tree Firefox"] =
   "children": [
     {
       "role": "option",
-      "name": "Option 1",
-      "selected": true
+      "name": "",
+      "disabled": true
     }
   ]
 }
 </p>
 `;
-/* end snapshot sbb-option autocomplete A11y tree Firefox */
+/* end snapshot sbb-option disabled Firefox */
 
diff --git a/src/components/option/option/index.ts b/src/components/option/option/index.ts
deleted file mode 100644
index 4216a00732..0000000000
--- a/src/components/option/option/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './option';
diff --git a/src/components/option/option/option.e2e.ts b/src/components/option/option/option.e2e.ts
index 391d6c04e0..f3439c8b42 100644
--- a/src/components/option/option/option.e2e.ts
+++ b/src/components/option/option/option.e2e.ts
@@ -2,17 +2,17 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import type { SbbAutocompleteElement } from '../../autocomplete';
-import { waitForLitRender, EventSpy } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbFormFieldElement } from '../../form-field';
-import type { SbbOptGroupElement } from '../optgroup';
+import type { SbbAutocompleteElement } from '../../autocomplete.js';
+import { fixture } from '../../core/testing/private.js';
+import { waitForLitRender, EventSpy } from '../../core/testing.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
+import type { SbbOptGroupElement } from '../optgroup.js';
 
-import { SbbOptionElement } from './option';
+import { SbbOptionElement } from './option.js';
 
-import '../../autocomplete';
-import '../../form-field';
-import '../optgroup';
+import '../../autocomplete.js';
+import '../../form-field.js';
+import '../optgroup.js';
 
 describe(`sbb-option with ${fixture.name}`, () => {
   describe('autocomplete', () => {
@@ -30,7 +30,7 @@ describe(`sbb-option with ${fixture.name}`, () => {
             </sbb-autocomplete>
           </sbb-form-field>
         `,
-        { modules: ['../../form-field/index.ts', '../../autocomplete/index.ts', './option.ts'] },
+        { modules: ['../../form-field.ts', '../../autocomplete.ts', './option.ts'] },
       );
     });
 
@@ -176,9 +176,9 @@ describe(`sbb-option with ${fixture.name}`, () => {
         `,
         {
           modules: [
-            '../../form-field/index.ts',
-            '../../autocomplete/index.ts',
-            '../optgroup/index.ts',
+            '../../form-field.ts',
+            '../../autocomplete.ts',
+            '../optgroup.ts',
             './option.ts',
           ],
         },
diff --git a/src/components/option/option/option.scss b/src/components/option/option/option.scss
index d290087df6..06bb282543 100644
--- a/src/components/option/option/option.scss
+++ b/src/components/option/option/option.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-option-color: var(--sbb-color-charcoal);
@@ -15,10 +14,11 @@
   --sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));
   --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
   --sbb-option-justify-content: start;
-  --sbb-option-min-height: var(--sbb-size-button-m-min-height);
   --sbb-option-cursor: pointer;
   --sbb-option-border-radius: var(--sbb-border-radius-4x);
   --sbb-option-icon-color: var(--sbb-color-metal);
+
+  display: block;
 }
 
 :host([data-negative]) {
diff --git a/src/components/option/option/option.spec.ts b/src/components/option/option/option.spec.ts
index a72da5ab50..571f51f56e 100644
--- a/src/components/option/option/option.spec.ts
+++ b/src/components/option/option/option.spec.ts
@@ -1,49 +1,64 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import '../../autocomplete';
-import './option';
+import type { SbbOptionElement } from './option.js';
+
+import '../../autocomplete.js';
+import './option.js';
 
 describe(`sbb-option`, () => {
   describe('autocomplete', () => {
-    it('renders selected and active', async () => {
-      const option = (
-        await fixture(html`
-          <sbb-autocomplete origin="anchor">
-            <sbb-option value="1" selected active>Option 1</sbb-option>
-          </sbb-autocomplete>
-          <div id="anchor"></div>
-        `)
-      ).querySelector('sbb-option');
-
-      expect(option).dom.to.be.equal(`
-        <sbb-option selected="" active="" aria-disabled="false" aria-selected="true" data-variant="autocomplete" id="sbb-option-1" role="option" value="1" data-slot-names="unnamed">
-          Option 1
-        </sbb-option>
-      `);
-      await expect(option).shadowDom.to.be.equalSnapshot();
-    });
+    let element: SbbOptionElement;
+
+    describe('renders selected and active', async () => {
+      beforeEach(async () => {
+        element = (
+          await fixture(html`
+            <sbb-autocomplete origin="anchor">
+              <sbb-option value="1" selected active>Option 1</sbb-option>
+            </sbb-autocomplete>
+            <div id="anchor"></div>
+          `)
+        ).querySelector('sbb-option')!;
+      });
 
-    it('renders disabled', async () => {
-      const option = (
-        await fixture(html`
-          <sbb-autocomplete origin="anchor">
-            <sbb-option value="1" disabled>Option 1</sbb-option>
-          </sbb-autocomplete>
-          <div id="anchor"></div>
-        `)
-      ).querySelector('sbb-option');
-
-      expect(option).dom.to.be.equal(`
-        <sbb-option disabled aria-disabled="true" aria-selected="false" data-variant="autocomplete" id="sbb-option-4" role="option" value="1" data-slot-names="unnamed">
-          Option 1
-        </sbb-option>
-      `);
-      await expect(option).shadowDom.to.be.equalSnapshot();
+      it('DOM', async () => {
+        await expect(element).dom.to.be.equalSnapshot();
+      });
+
+      it('Shadow DOM', async () => {
+        await expect(element).shadowDom.to.be.equalSnapshot();
+      });
     });
 
-    testA11yTreeSnapshot(html`<sbb-option value="1" selected active>Option 1</sbb-option>`);
+    describe('renders disabled', async () => {
+      beforeEach(async () => {
+        element = (
+          await fixture(html`
+            <sbb-autocomplete origin="anchor">
+              <sbb-option value="1" disabled>Option 1</sbb-option>
+            </sbb-autocomplete>
+            <div id="anchor"></div>
+          `)
+        ).querySelector('sbb-option')!;
+      });
+
+      it('DOM', async () => {
+        await expect(element).dom.to.be.equalSnapshot();
+      });
+
+      it('Shadow DOM', async () => {
+        await expect(element).shadowDom.to.be.equalSnapshot();
+      });
+    });
   });
+
+  testA11yTreeSnapshot(
+    html`<sbb-option value="1" selected active></sbb-option>`,
+    'selected active',
+  );
+
+  testA11yTreeSnapshot(html`<sbb-option value="1" disabled></sbb-option>`, 'disabled');
 });
diff --git a/src/components/option/option/option.stories.ts b/src/components/option/option/option.stories.ts
index 8a360c3f62..493e594347 100644
--- a/src/components/option/option/option.stories.ts
+++ b/src/components/option/option/option.stories.ts
@@ -12,17 +12,14 @@ import { html } from 'lit';
 import type { StyleInfo } from 'lit/directives/style-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
-import { SbbOptionElement } from './option';
+import { SbbOptionElement } from './option.js';
 import readme from './readme.md?raw';
-import '../../form-field';
-import '../../select';
-import '../../autocomplete';
 
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import '../../form-field.js';
+import '../../select.js';
+import '../../autocomplete.js';
 
 const preserveIconSpace: InputType = {
   control: {
@@ -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/option/option/option.ts b/src/components/option/option/option.ts
index dbf1073d9e..5575e401b2 100644
--- a/src/components/option/option/option.ts
+++ b/src/components/option/option/option.ts
@@ -1,23 +1,32 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
-import { html, LitElement, nothing } from 'lit';
+import {
+  type CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  type PropertyValues,
+  type TemplateResult,
+} from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import { assignId } from '../../core/a11y';
-import {
-  hostAttributes,
-  NamedSlotStateController,
-  SbbDisabledMixin,
-  SbbIconNameMixin,
-} from '../../core/common-behaviors';
-import { isSafari, isValidAttribute, isAndroid, setAttribute } from '../../core/dom';
-import { EventEmitter, ConnectedAbortController } from '../../core/eventing';
-import { AgnosticMutationObserver } from '../../core/observers';
+import { SbbConnectedAbortController, SbbSlotStateController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { isAndroid, isSafari, setOrRemoveAttribute } from '../../core/dom.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { SbbDisabledMixin } from '../../core/mixins.js';
+import { AgnosticMutationObserver } from '../../core/observers.js';
+import { SbbIconNameMixin } from '../../icon.js';
 
 import style from './option.scss?lit&inline';
 
-import '../../icon';
-import '../../screen-reader-only';
-import '../../visual-checkbox';
+import '../../screen-reader-only.js';
+import '../../visual-checkbox.js';
+
+/**
+ * On Safari, the groups labels are not read by VoiceOver.
+ * To solve the problem, we remove the role="group" and add an hidden span containing the group name
+ * TODO: We should periodically check if it has been solved and, if so, remove the property.
+ */
+const inertAriaGroups = isSafari();
 
 let nextId = 0;
 
@@ -65,6 +74,7 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme
   @property({ type: Boolean })
   public set selected(value: boolean) {
     this.toggleAttribute('selected', value);
+    this._updateAriaSelected();
   }
   public get selected(): boolean {
     return this.hasAttribute('selected');
@@ -96,16 +106,14 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme
   /** Disable the highlight of the label. */
   @state() private _disableLabelHighlight: boolean = false;
 
-  private _optionId = `sbb-option-${++nextId}`;
-  private _variant!: SbbOptionVariant;
-  private _abort = new ConnectedAbortController(this);
+  private set _variant(state: SbbOptionVariant) {
+    this.setAttribute('data-variant', state);
+  }
+  private get _variant(): SbbOptionVariant {
+    return this.getAttribute('data-variant') as SbbOptionVariant;
+  }
 
-  /**
-   * On Safari, the groups labels are not read by VoiceOver.
-   * To solve the problem, we remove the role="group" and add an hidden span containing the group name
-   * TODO: We should periodically check if it has been solved and, if so, remove the property.
-   */
-  private _inertAriaGroups = isSafari();
+  private _abort = new SbbConnectedAbortController(this);
 
   /** MutationObserver on data attributes. */
   private _optionAttributeObserver = new AgnosticMutationObserver((mutationsList) =>
@@ -115,16 +123,18 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme
   private get _isAutocomplete(): boolean {
     return this._variant === 'autocomplete';
   }
+
   private get _isSelect(): boolean {
     return this._variant === 'select';
   }
+
   private get _isMultiple(): boolean {
-    return !!this.closest?.('sbb-select')?.hasAttribute('multiple');
+    return !!this.closest?.('sbb-select[multiple]');
   }
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   /**
@@ -147,6 +157,11 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme
     }
   }
 
+  private _updateDisableHighlight(disabled: boolean): void {
+    this._disableLabelHighlight = disabled;
+    this.toggleAttribute('data-disable-highlight', disabled);
+  }
+
   private _selectByClick(event: MouseEvent): void {
     if (this.disabled || this._disabledFromGroup) {
       event.stopPropagation();
@@ -163,10 +178,14 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme
 
   public override connectedCallback(): void {
     super.connectedCallback();
+
+    this.id ||= `sbb-option-${nextId++}`;
+
     const signal = this._abort.signal;
     const parentGroup = this.closest?.('sbb-optgroup');
     if (parentGroup) {
       this._disabledFromGroup = parentGroup.disabled;
+      this._updateAriaDisabled();
     }
     this._optionAttributeObserver.observe(this, optionObserverConfig);
 
@@ -178,12 +197,42 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme
 
     this._setVariantByContext();
 
+    this.toggleAttribute('data-multiple', this._isMultiple);
+
     this.addEventListener('click', (e: MouseEvent) => this._selectByClick(e), {
       signal,
       passive: true,
     });
   }
 
+  protected override willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('disabled')) {
+      setOrRemoveAttribute(this, 'tabindex', isAndroid() && !this.disabled && 0);
+      this._updateAriaDisabled();
+    }
+  }
+
+  protected override firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+
+    // Init first select state because false would not call setter of selected property.
+    this._updateAriaSelected();
+  }
+
+  private _updateAriaDisabled(): void {
+    setOrRemoveAttribute(
+      this,
+      'aria-disabled',
+      this.disabled || this._disabledFromGroup ? 'true' : null,
+    );
+  }
+
+  private _updateAriaSelected(): void {
+    this.setAttribute('aria-selected', `${this.selected}`);
+  }
+
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
     this._optionAttributeObserver.disconnect();
@@ -201,16 +250,17 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme
   private _onOptionAttributesChange(mutationsList: MutationRecord[]): void {
     for (const mutation of mutationsList) {
       if (mutation.attributeName === 'data-group-disabled') {
-        this._disabledFromGroup = isValidAttribute(this, 'data-group-disabled');
+        this._disabledFromGroup = this.hasAttribute('data-group-disabled');
+        this._updateAriaDisabled();
       } else if (mutation.attributeName === 'data-negative') {
-        this._negative = isValidAttribute(this, 'data-negative');
+        this._negative = this.hasAttribute('data-negative');
       }
     }
   }
 
   private _setupHighlightHandler(event: Event): void {
     if (!this._isAutocomplete) {
-      this._disableLabelHighlight = true;
+      this._updateDisableHighlight(true);
       return;
     }
 
@@ -223,7 +273,7 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme
       slotNodes.filter((n) => !(n instanceof Element) || n.localName !== 'template').length !==
         labelNodes.length
     ) {
-      this._disableLabelHighlight = true;
+      this._updateDisableHighlight(true);
       return;
     }
     this._label = labelNodes
@@ -258,13 +308,6 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme
 
   protected override render(): TemplateResult {
     const isMultiple = this._isMultiple;
-    setAttribute(this, 'tabindex', isAndroid() && !this.disabled && 0);
-    setAttribute(this, 'data-variant', this._variant);
-    setAttribute(this, 'data-multiple', isMultiple);
-    setAttribute(this, 'data-disable-highlight', this._disableLabelHighlight);
-    setAttribute(this, 'aria-selected', `${this.selected}`);
-    setAttribute(this, 'aria-disabled', `${this.disabled || this._disabledFromGroup}`);
-    assignId(() => this._optionId)(this);
 
     return html`
       <div class="sbb-option__container">
@@ -291,7 +334,7 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme
             ${this._isAutocomplete && this._label && !this._disableLabelHighlight
               ? this._getHighlightedLabel()
               : nothing}
-            ${this._inertAriaGroups && this.getAttribute('data-group-label')
+            ${inertAriaGroups && this.getAttribute('data-group-label')
               ? html` <sbb-screen-reader-only>
                   (${this.getAttribute('data-group-label')})</sbb-screen-reader-only
                 >`
diff --git a/src/components/overlay.ts b/src/components/overlay.ts
new file mode 100644
index 0000000000..507a410c82
--- /dev/null
+++ b/src/components/overlay.ts
@@ -0,0 +1 @@
+export * from './overlay/overlay.js';
diff --git a/src/components/overlay/__snapshots__/overlay.spec.snap.js b/src/components/overlay/__snapshots__/overlay.spec.snap.js
new file mode 100644
index 0000000000..6e04be6d8f
--- /dev/null
+++ b/src/components/overlay/__snapshots__/overlay.spec.snap.js
@@ -0,0 +1,89 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-overlay renders - Dom"] = 
+`<sbb-overlay data-state="opening">
+</sbb-overlay>
+`;
+/* end snapshot sbb-overlay renders - Dom */
+
+snapshots["sbb-overlay renders - ShadowDom"] = 
+`<div class="sbb-overlay__container">
+  <div class="sbb-overlay">
+    <div class="sbb-overlay__wrapper">
+      <div class="sbb-overlay__header">
+        <sbb-secondary-button
+          aria-label="Close secondary window"
+          class="sbb-overlay__close"
+          data-action=""
+          data-button=""
+          data-sbb-button=""
+          dir="ltr"
+          icon-name="cross-small"
+          role="button"
+          sbb-overlay-close=""
+          size="m"
+          tabindex="0"
+          type="button"
+        >
+        </sbb-secondary-button>
+      </div>
+      <div class="sbb-overlay__content">
+        <sbb-container
+          class="sbb-overlay__content-container"
+          color="transparent"
+        >
+          <slot>
+          </slot>
+        </sbb-container>
+      </div>
+    </div>
+  </div>
+</div>
+<sbb-screen-reader-only aria-live="polite">
+</sbb-screen-reader-only>
+`;
+/* end snapshot sbb-overlay renders - ShadowDom */
+
+snapshots["sbb-overlay A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Close secondary window",
+      "focused": true
+    },
+    {
+      "role": "text",
+      "name": "Dialog "
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-overlay A11y tree Chrome */
+
+snapshots["sbb-overlay A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Close secondary window",
+      "focused": true
+    },
+    {
+      "role": "text leaf",
+      "name": "Dialog "
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-overlay A11y tree Firefox */
+
diff --git a/src/components/overlay/overlay.e2e.ts b/src/components/overlay/overlay.e2e.ts
new file mode 100644
index 0000000000..6fa18e3a5f
--- /dev/null
+++ b/src/components/overlay/overlay.e2e.ts
@@ -0,0 +1,255 @@
+import { assert, expect, fixture } from '@open-wc/testing';
+import { sendKeys, setViewport } from '@web/test-runner-commands';
+import { html } from 'lit/static-html.js';
+
+import { i18nDialog } from '../core/i18n.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing.js';
+
+import { SbbOverlayElement } from './overlay.js';
+import '../button.js';
+import '../icon.js';
+
+async function openOverlay(element: SbbOverlayElement): Promise<void> {
+  const willOpen = new EventSpy(SbbOverlayElement.events.willOpen);
+  const didOpen = new EventSpy(SbbOverlayElement.events.didOpen);
+
+  element.open();
+  await waitForLitRender(element);
+
+  await waitForCondition(() => willOpen.events.length === 1);
+  expect(willOpen.count).to.be.equal(1);
+  await waitForLitRender(element);
+
+  await waitForCondition(() => didOpen.events.length === 1);
+  expect(didOpen.count).to.be.equal(1);
+  await waitForLitRender(element);
+
+  expect(element).to.have.attribute('data-state', 'opened');
+}
+
+describe('sbb-overlay', () => {
+  let element: SbbOverlayElement, ariaLiveRef: HTMLElement;
+
+  beforeEach(async () => {
+    await setViewport({ width: 900, height: 600 });
+    element = await fixture(html`
+      <sbb-overlay id="my-overlay-1" accessibility-label="Label">
+        <p>Overlay content</p>
+      </sbb-overlay>
+    `);
+    ariaLiveRef = element.shadowRoot!.querySelector('sbb-screen-reader-only')!;
+  });
+
+  it('renders', () => {
+    assert.instanceOf(element, SbbOverlayElement);
+  });
+
+  it('opens the overlay', async () => {
+    await openOverlay(element);
+  });
+
+  it('does not open the overlay if prevented', async () => {
+    const willOpen = new EventSpy(SbbOverlayElement.events.willOpen);
+    const didOpen = new EventSpy(SbbOverlayElement.events.didOpen);
+
+    element.addEventListener(SbbOverlayElement.events.willOpen, (ev) => ev.preventDefault());
+
+    element.open();
+    await waitForLitRender(element);
+
+    await waitForCondition(() => willOpen.events.length === 1);
+    expect(willOpen.count).to.be.equal(1);
+    await waitForLitRender(element);
+
+    expect(didOpen.count).to.be.equal(0);
+    expect(element).to.have.attribute('data-state', 'closed');
+  });
+
+  it('closes the overlay', async () => {
+    const willClose = new EventSpy(SbbOverlayElement.events.willClose);
+    const didClose = new EventSpy(SbbOverlayElement.events.didClose);
+
+    await openOverlay(element);
+
+    await waitForCondition(() => ariaLiveRef.textContent!.trim() === `${i18nDialog.en}, Label`);
+
+    element.close();
+    await waitForLitRender(element);
+
+    await waitForCondition(() => willClose.events.length === 1);
+    expect(willClose.count).to.be.equal(1);
+    await waitForLitRender(element);
+
+    await waitForCondition(() => didClose.events.length === 1);
+    expect(didClose.count).to.be.equal(1);
+    await waitForLitRender(element);
+
+    expect(element).to.have.attribute('data-state', 'closed');
+    expect(ariaLiveRef.textContent).to.be.equal('');
+  });
+
+  it('does not close the overlay if prevented', async () => {
+    const willClose = new EventSpy(SbbOverlayElement.events.willClose);
+    const didClose = new EventSpy(SbbOverlayElement.events.didClose);
+
+    await openOverlay(element);
+
+    element.addEventListener(SbbOverlayElement.events.willClose, (ev) => ev.preventDefault());
+
+    element.close();
+    await waitForLitRender(element);
+
+    await waitForCondition(() => willClose.events.length === 1);
+    expect(willClose.count).to.be.equal(1);
+    await waitForLitRender(element);
+
+    expect(didClose.count).to.be.equal(0);
+    expect(element).to.have.attribute('data-state', 'opened');
+  });
+
+  it('closes the overlay on close button click', async () => {
+    const closeButton = element.shadowRoot!.querySelector('[sbb-overlay-close]') as HTMLElement;
+    const willClose = new EventSpy(SbbOverlayElement.events.willClose);
+    const didClose = new EventSpy(SbbOverlayElement.events.didClose);
+
+    await openOverlay(element);
+
+    closeButton.click();
+    await waitForLitRender(element);
+
+    await waitForCondition(() => willClose.events.length === 1);
+    expect(willClose.count).to.be.equal(1);
+    await waitForLitRender(element);
+
+    await waitForCondition(() => didClose.events.length === 1);
+    expect(didClose.count).to.be.equal(1);
+    await waitForLitRender(element);
+
+    expect(element).to.have.attribute('data-state', 'closed');
+  });
+
+  it('closes the overlay on Esc key press', async () => {
+    const willClose = new EventSpy(SbbOverlayElement.events.willClose);
+    const didClose = new EventSpy(SbbOverlayElement.events.didClose);
+
+    await openOverlay(element);
+
+    await sendKeys({ down: 'Tab' });
+    await waitForLitRender(element);
+
+    await sendKeys({ down: 'Escape' });
+    await waitForLitRender(element);
+
+    await waitForCondition(() => willClose.events.length === 1);
+    expect(willClose.count).to.be.equal(1);
+    await waitForLitRender(element);
+
+    await waitForCondition(() => didClose.events.length === 1);
+    expect(didClose.count).to.be.equal(1);
+    await waitForLitRender(element);
+
+    expect(element).to.have.attribute('data-state', 'closed');
+  });
+
+  it('closes stacked overlays one by one on ESC key pressed', async () => {
+    element = await fixture(html`
+      <sbb-overlay id="my-overlay-3">
+        <p>Overlay content</p>
+      </sbb-overlay>
+
+      <sbb-overlay id="stacked-overlay">
+        <p>Stacked overlay content</p>
+      </sbb-overlay>
+    `);
+
+    const willOpen = new EventSpy(SbbOverlayElement.events.willOpen);
+    const didOpen = new EventSpy(SbbOverlayElement.events.didOpen);
+    const willClose = new EventSpy(SbbOverlayElement.events.willClose);
+    const didClose = new EventSpy(SbbOverlayElement.events.didClose);
+
+    await openOverlay(element);
+
+    const stackedOverlay = document.querySelector('#stacked-overlay') as SbbOverlayElement;
+
+    stackedOverlay.open();
+    await waitForLitRender(element);
+
+    await waitForCondition(() => willOpen.events.length === 2);
+    expect(willOpen.count).to.be.equal(2);
+    await waitForLitRender(element);
+
+    await waitForCondition(() => didOpen.events.length === 2);
+    expect(didOpen.count).to.be.equal(2);
+    await waitForLitRender(element);
+
+    expect(stackedOverlay).to.have.attribute('data-state', 'opened');
+
+    await sendKeys({ down: 'Tab' });
+    await waitForLitRender(element);
+
+    await sendKeys({ down: 'Escape' });
+    await waitForLitRender(element);
+
+    await waitForCondition(() => willClose.events.length === 1);
+    expect(willClose.count).to.be.equal(1);
+    await waitForLitRender(element);
+
+    await waitForCondition(() => didClose.events.length === 1);
+    expect(didClose.count).to.be.equal(1);
+    await waitForLitRender(element);
+
+    expect(stackedOverlay).to.have.attribute('data-state', 'closed');
+    expect(element).to.have.attribute('data-state', 'opened');
+
+    await sendKeys({ down: 'Tab' });
+    await waitForLitRender(element);
+
+    await sendKeys({ down: 'Escape' });
+    await waitForLitRender(element);
+
+    await waitForCondition(() => willClose.events.length === 2);
+    expect(willClose.count).to.be.equal(2);
+    await waitForLitRender(element);
+
+    await waitForCondition(() => didClose.events.length === 2);
+    expect(didClose.count).to.be.equal(2);
+    await waitForLitRender(element);
+
+    expect(stackedOverlay).to.have.attribute('data-state', 'closed');
+    expect(element).to.have.attribute('data-state', 'closed');
+  });
+
+  it('should remove ariaLiveRef content on any keyboard interaction', async () => {
+    await openOverlay(element);
+
+    await waitForCondition(() => ariaLiveRef.textContent!.trim() === `${i18nDialog.en}, Label`);
+
+    await sendKeys({ down: 'Tab' });
+    await waitForLitRender(element);
+
+    expect(ariaLiveRef.textContent!.trim()).to.be.equal('');
+  });
+
+  it('should remove ariaLiveRef content on any click interaction', async () => {
+    await openOverlay(element);
+
+    await waitForCondition(() => ariaLiveRef.textContent!.trim() === `${i18nDialog.en}, Label`);
+
+    element.click();
+    await waitForLitRender(element);
+
+    expect(ariaLiveRef.textContent).to.be.equal('');
+  });
+
+  it('should announce accessibility label in ariaLiveRef if explicitly set', async () => {
+    element.accessibilityLabel = 'Special Overlay';
+
+    await openOverlay(element);
+
+    await waitForCondition(
+      () => ariaLiveRef.textContent!.trim() === `${i18nDialog.en}, Special Overlay`,
+    );
+
+    expect(ariaLiveRef.textContent!.trim()).to.be.equal(`${i18nDialog.en}, Special Overlay`);
+  });
+});
diff --git a/src/components/overlay/overlay.scss b/src/components/overlay/overlay.scss
new file mode 100644
index 0000000000..aa1a2f71d7
--- /dev/null
+++ b/src/components/overlay/overlay.scss
@@ -0,0 +1,159 @@
+@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 {
+  @include sbb.scrollbar-variables;
+
+  --sbb-overlay-background-color: var(--sbb-color-milk);
+  --sbb-overlay-height: 100%;
+  --sbb-overlay-inset: 0 auto auto 0;
+  --sbb-overlay-padding-block: calc(
+    var(--sbb-spacing-responsive-xxl) + var(--sbb-spacing-responsive-l)
+  );
+  --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)
+    var(--sbb-overlay-animation-easing);
+
+  display: block;
+  position: fixed;
+  inset: var(--sbb-overlay-inset);
+  z-index: var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index));
+
+  @include sbb.mq($from: large) {
+    --sbb-overlay-padding-block: var(--sbb-spacing-responsive-xl);
+  }
+}
+
+:host(:is([data-state='opened'], [data-state='opening'])) {
+  --sbb-overlay-pointer-events: all;
+}
+
+:host([negative]) {
+  @include sbb.scrollbar-variables--color-negative;
+
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+  --sbb-overlay-color: var(--sbb-color-white);
+  --sbb-overlay-background-color: var(--sbb-color-midnight);
+}
+
+:host(:not([data-state='closed'])) {
+  --sbb-overlay-inset: 0;
+}
+
+.sbb-overlay__container {
+  background-color: var(--sbb-overlay-background-color);
+  pointer-events: var(--sbb-overlay-pointer-events);
+  display: flex;
+  align-items: center;
+  position: fixed;
+  inset: var(--sbb-overlay-inset);
+}
+
+.sbb-overlay {
+  display: none;
+  position: absolute;
+  inset-inline: 0;
+  margin: auto;
+  padding: 0;
+  border: none;
+  height: var(--sbb-overlay-height);
+  overflow: auto;
+  color: var(--sbb-overlay-color);
+
+  :host([data-state]:not([data-state='closed'])) & {
+    display: block;
+
+    animation: {
+      name: open;
+      duration: var(--sbb-overlay-animation-duration);
+      timing-function: ease;
+    }
+  }
+
+  :host([data-state][data-state='closing']) & {
+    pointer-events: none;
+    animation-name: close;
+  }
+}
+
+.sbb-overlay__wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: var(--sbb-overlay-height);
+  outline: none;
+  position: fixed;
+
+  @include sbb.mq($from: medium) {
+    position: sticky;
+    inset-block-start: 0;
+    height: auto;
+  }
+}
+
+.sbb-overlay__header {
+  position: absolute;
+  inset-inline-start: 0;
+  display: flex;
+  pointer-events: none;
+  align-items: start;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--sbb-spacing-responsive-xs);
+  padding-block-end: 0;
+  z-index: 1;
+
+  * {
+    pointer-events: all;
+  }
+}
+
+.sbb-overlay__close {
+  margin-inline-start: auto;
+}
+
+.sbb-overlay__content {
+  @include sbb.scrollbar-rules;
+
+  height: 100vh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.sbb-overlay__content-container {
+  padding-block: var(--sbb-overlay-padding-block);
+}
+
+// It is necessary to use animations with keyframes instead of transitions in order not to alter
+// the default `display: block` of the modal otherwise it causes several problems,
+// especially for accessibility.
+@keyframes open {
+  from {
+    opacity: 0;
+    transform: translateY(var(--sbb-spacing-fixed-4x));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+
+@keyframes close {
+  from {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(var(--sbb-spacing-fixed-4x));
+  }
+}
diff --git a/src/components/overlay/overlay.spec.ts b/src/components/overlay/overlay.spec.ts
new file mode 100644
index 0000000000..89a40e53ab
--- /dev/null
+++ b/src/components/overlay/overlay.spec.ts
@@ -0,0 +1,24 @@
+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 type { SbbOverlayElement } from './overlay.js';
+import './overlay.js';
+
+describe('sbb-overlay', () => {
+  let root: SbbOverlayElement;
+  beforeEach(async () => {
+    root = await fixture(html`<sbb-overlay></sbb-overlay>`);
+    root.open();
+    await waitForLitRender(root);
+  });
+  it('renders - Dom', async () => {
+    await expect(root).dom.to.be.equalSnapshot();
+  });
+  it('renders - ShadowDom', async () => {
+    await expect(root).shadowDom.to.be.equalSnapshot();
+  });
+  testA11yTreeSnapshot();
+});
diff --git a/src/components/overlay/overlay.stories.ts b/src/components/overlay/overlay.stories.ts
new file mode 100644
index 0000000000..a2122d34f8
--- /dev/null
+++ b/src/components/overlay/overlay.stories.ts
@@ -0,0 +1,332 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import { userEvent, within } from '@storybook/test';
+import type { InputType } from '@storybook/types';
+import type {
+  Meta,
+  StoryObj,
+  ArgTypes,
+  Args,
+  Decorator,
+  StoryContext,
+} from '@storybook/web-components';
+import isChromatic from 'chromatic/isChromatic';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
+import { styleMap, type StyleInfo } from 'lit/directives/style-map.js';
+
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready.js';
+import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position.js';
+import sampleImages from '../core/images.js';
+
+import { SbbOverlayElement } from './overlay.js';
+import readme from './readme.md?raw';
+
+import '../button.js';
+import '../form-field.js';
+import '../image.js';
+import '../link.js';
+import '../title.js';
+
+// Story interaction executed after the story renders
+const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
+  const canvas = within(canvasElement);
+
+  await waitForComponentsReady(() =>
+    canvas.getByTestId('overlay').shadowRoot!.querySelector('.sbb-overlay'),
+  );
+
+  await waitForStablePosition(() => canvas.getByTestId('overlay-trigger'));
+
+  const button = canvas.getByTestId('overlay-trigger');
+  await userEvent.click(button);
+};
+
+const expanded: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
+const backButton: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
+const negative: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
+const accessibilityLabel: InputType = {
+  control: {
+    type: 'text',
+  },
+  table: {
+    category: 'Accessibility',
+  },
+};
+
+const accessibilityCloseLabel: InputType = {
+  control: {
+    type: 'text',
+  },
+  table: {
+    category: 'Accessibility',
+  },
+};
+
+const accessibilityBackLabel: InputType = {
+  control: {
+    type: 'text',
+  },
+  table: {
+    category: 'Accessibility',
+  },
+};
+
+const basicArgTypes: ArgTypes = {
+  expanded,
+  'back-button': backButton,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
+  negative,
+  'accessibility-label': accessibilityLabel,
+};
+
+const basicArgs: Args = {
+  expanded: false,
+  'back-button': false,
+  accessibilityCloseLabel: 'Close overlay',
+  accessibilityBackLabel: 'Go back',
+  negative: false,
+  'accessibility-label': undefined,
+};
+
+const openOverlay = (_event: PointerEvent, id: string): void => {
+  const overlay = document.getElementById(id) as SbbOverlayElement;
+  overlay.open();
+};
+
+const triggerButton = (overlayId: string, triggerId?: string): TemplateResult => html`
+  <sbb-button
+    data-testid=${triggerId || 'overlay-trigger'}
+    aria-haspopup="dialog"
+    aria-controls=${overlayId}
+    size="m"
+    type="button"
+    @click=${(event: PointerEvent) => openOverlay(event, overlayId)}
+  >
+    Open overlay
+  </sbb-button>
+`;
+
+const codeStyle: Readonly<StyleInfo> = {
+  padding: 'var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x)',
+  borderRadius: 'var(--sbb-border-radius-4x)',
+  backgroundColor: 'var(--sbb-color-smoke-alpha-20)',
+};
+
+const formDetailsStyle: Readonly<StyleInfo> = {
+  marginTop: 'var(--sbb-spacing-fixed-4x)',
+  padding: 'var(--sbb-spacing-fixed-4x)',
+  borderRadius: 'var(--sbb-border-radius-8x)',
+  backgroundColor: 'var(--sbb-color-milk)',
+};
+
+const formStyle: Readonly<StyleInfo> = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  gap: 'var(--sbb-spacing-fixed-4x)',
+};
+
+const textBlockStyle = (negative: boolean): Readonly<StyleInfo> => {
+  return {
+    position: 'relative',
+    marginBlockStart: '1rem',
+    padding: '1rem',
+    backgroundColor: negative ? 'var(--sbb-color-metal)' : 'var(--sbb-color-cloud)',
+    borderRadius: 'var(--sbb-border-radius-4x)',
+  };
+};
+
+const textBlock = (negative: boolean): TemplateResult => html`
+  <div style=${styleMap(textBlockStyle(negative))}>
+    J.R.R. Tolkien, the mastermind behind Middle-earth's enchanting world, was born on January 3,
+    1892. With "The Hobbit" and "The Lord of the Rings", he pioneered fantasy literature. Tolkien's
+    linguistic brilliance and mythic passion converge in a literary legacy that continues to
+    transport readers to magical realms.
+  </div>
+`;
+
+const DefaultTemplate = (args: Args): TemplateResult => html`
+  ${triggerButton('my-overlay-2')}
+  <sbb-overlay data-testid="overlay" id="my-overlay-2" ${sbbSpread(args)}>
+    <div class="overlay-content" data-testid="content">
+      <sbb-title visual-level="2" ?negative=${args.negative} style="margin-block-start: 0">
+        Many Meetings
+      </sbb-title>
+      Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
+      like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
+      Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad in
+      elven-mail, and a star shone on his breast. They spoke together, and then suddenly it seemed
+      to Frodo that Arwen turned towards him, and the light of her eyes fell on him from afar and
+      pierced his heart.
+      <sbb-image
+        style="margin-block: 1rem"
+        image-src=${sampleImages[1]}
+        alt="Natural landscape"
+        data-chromatic="ignore"
+      ></sbb-image>
+      He stood still enchanted, while the sweet syllables of the elvish song fell like clear jewels
+      of blended word and melody. 'It is a song to Elbereth,'' said Bilbo. 'They will sing that, and
+      other songs of the Blessed Realm, many times tonight. Come on!’ —J.R.R. Tolkien, The Lord of
+      the Rings: The Fellowship of the Ring, “Many Meetings” ${textBlock(args.negative)}
+    </div>
+  </sbb-overlay>
+`;
+
+const FormTemplate = (args: Args): TemplateResult => html`
+  ${triggerButton('my-overlay-3')}
+  <div id="returned-value">
+    <div style=${styleMap(formDetailsStyle)}>
+      <div>Your message: <span id="returned-value-message">Hello 👋</span></div>
+      <div>Your favorite animal: <span id="returned-value-animal">Red Panda</span></div>
+    </div>
+  </div>
+  <sbb-overlay
+    data-testid="overlay"
+    id="my-overlay-3"
+    @willClose=${(event: CustomEvent) => {
+      if (event.detail.returnValue) {
+        document.getElementById('returned-value-message')!.innerHTML =
+          `${event.detail.returnValue.message?.value}`;
+        document.getElementById('returned-value-animal')!.innerHTML =
+          `${event.detail.returnValue.animal?.value}`;
+      }
+    }}
+    ${sbbSpread(args)}
+  >
+    <div class="overlay-content">
+      <div style="margin-block-end: var(--sbb-spacing-fixed-4x)">
+        Submit the form below to close the overlay box using the
+        <code style=${styleMap(codeStyle)}>close(result?: any, target?: HTMLElement)</code>
+        method and returning the form values to update the details.
+      </div>
+      <form style=${styleMap(formStyle)} @submit=${(e: SubmitEvent) => e.preventDefault()}>
+        <sbb-form-field error-space="none" size="m">
+          <label>Message</label>
+          <input placeholder="Your custom massage" value="Hello 👋" name="message" />
+        </sbb-form-field>
+        <sbb-form-field error-space="none" size="m">
+          <label>Favorite Animal</label>
+          <select name="animal">
+            <option>Red Panda</option>
+            <option>Cheetah</option>
+            <option>Polar Bear</option>
+            <option>Elephant</option>
+          </select>
+        </sbb-form-field>
+        <sbb-button type="submit" size="m" sbb-overlay-close> Update details </sbb-button>
+      </form>
+    </div>
+  </sbb-overlay>
+`;
+
+const NestedTemplate = (args: Args): TemplateResult => html`
+  ${triggerButton('my-overlay-5')}
+  <sbb-overlay data-testid="overlay" id="my-overlay-5" ${sbbSpread(args)}>
+    <div class="overlay-content">
+      Click the button to open a nested
+      overlay.&nbsp;${triggerButton('my-overlay-6', 'nested-trigger-id')}
+    </div>
+    <sbb-overlay data-testid="nested-overlay" id="my-overlay-6" ${sbbSpread(args)}>
+      <p class="overlay-content">
+        Nested overlay content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+        anim id est laborum.
+      </p>
+    </sbb-overlay>
+  </sbb-overlay>
+`;
+
+export const Default: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const Negative: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    negative: true,
+  },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const Expanded: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    expanded: true,
+  },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const WithBackButton: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    'back-button': true,
+  },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const Form: StoryObj = {
+  render: FormTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const Nested: StoryObj = {
+  render: NestedTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs },
+  play: isChromatic() ? playStory : undefined,
+};
+
+const meta: Meta = {
+  decorators: [withActions as Decorator],
+  parameters: {
+    chromatic: { disableSnapshot: false },
+    actions: {
+      handles: [
+        SbbOverlayElement.events.willOpen,
+        SbbOverlayElement.events.didOpen,
+        SbbOverlayElement.events.willClose,
+        SbbOverlayElement.events.didClose,
+        SbbOverlayElement.events.backClick,
+      ],
+    },
+    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,
+    },
+  },
+  title: 'components/sbb-overlay',
+};
+
+export default meta;
diff --git a/src/components/overlay/overlay.ts b/src/components/overlay/overlay.ts
new file mode 100644
index 0000000000..d7f1d9f418
--- /dev/null
+++ b/src/components/overlay/overlay.ts
@@ -0,0 +1,381 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { html, unsafeStatic } from 'lit/static-html.js';
+
+import { getFirstFocusableElement, SbbFocusHandler, setModalityOnNextFocus } from '../core/a11y.js';
+import { SbbLanguageController } from '../core/controllers.js';
+import { hostContext, SbbScrollHandler } from '../core/dom.js';
+import { EventEmitter } from '../core/eventing.js';
+import { i18nCloseDialog, i18nDialog, i18nGoBack } from '../core/i18n.js';
+import type { SbbOpenedClosedState } from '../core/interfaces.js';
+import { SbbNegativeMixin } from '../core/mixins.js';
+import { applyInertMechanism, removeInertMechanism } from '../core/overlay.js';
+import type { SbbScreenReaderOnlyElement } from '../screen-reader-only.js';
+
+import style from './overlay.scss?lit&inline';
+
+import '../button/secondary-button.js';
+import '../button/transparent-button.js';
+import '../container.js';
+import '../screen-reader-only.js';
+
+// A global collection of existing overlays
+const overlayRefs: SbbOverlayElement[] = [];
+
+export type SbbOverlayCloseEventDetails = {
+  returnValue?: any;
+  closeTarget?: HTMLElement;
+};
+
+/**
+ * It displays an interactive overlay element.
+ *
+ * @slot - Use the unnamed slot to provide a content for the overlay.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-overlay` starts the opening transition. Can be canceled.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-overlay` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-overlay` begins the closing transition. Can be canceled.
+ * @event {CustomEvent<SbbOverlayCloseEventDetails>} didClose - Emits whenever the `sbb-overlay` is closed.
+ * @event {CustomEvent<void>} requestBackAction - Emits whenever the back button is clicked.
+ * @cssprop [--sbb-overlay-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+ * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+ */
+@customElement('sbb-overlay')
+export class SbbOverlayElement extends SbbNegativeMixin(LitElement) {
+  public static override styles: CSSResultGroup = style;
+  public static readonly events = {
+    willOpen: 'willOpen',
+    didOpen: 'didOpen',
+    willClose: 'willClose',
+    didClose: 'didClose',
+    backClick: 'requestBackAction',
+  } as const;
+
+  /**
+   * Whether to allow the overlay content to stretch to full width.
+   * By default, the content has the appropriate page size.
+   */
+  @property({ reflect: true, type: Boolean }) public expanded = false;
+
+  /**
+   * Whether a back button is displayed next to the title.
+   */
+  @property({ attribute: 'back-button', type: Boolean }) public backButton = false;
+
+  /**
+   * This will be forwarded as aria-label to the close button element.
+   */
+  @property({ attribute: 'accessibility-close-label' }) public accessibilityCloseLabel:
+    | string
+    | undefined;
+
+  /**
+   * This will be forwarded as aria-label to the back button element.
+   */
+  @property({ attribute: 'accessibility-back-label' }) public accessibilityBackLabel:
+    | string
+    | undefined;
+
+  /**
+   * This will be forwarded as aria-label adn will describe the purpose of the dialog.
+   */
+  @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined;
+
+  /*
+   * The state of the overlay.
+   */
+  private set _state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
+  }
+  private get _state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
+  }
+
+  private _ariaLiveRef!: SbbScreenReaderOnlyElement;
+  private _ariaLiveRefToggle = false;
+
+  /** Emits whenever the `sbb-overlay` starts the opening transition. */
+  private _willOpen: EventEmitter<void> = new EventEmitter(this, SbbOverlayElement.events.willOpen);
+
+  /** Emits whenever the `sbb-overlay` is opened. */
+  private _didOpen: EventEmitter<void> = new EventEmitter(this, SbbOverlayElement.events.didOpen);
+
+  /** Emits whenever the `sbb-overlay` begins the closing transition. */
+  private _willClose: EventEmitter = new EventEmitter(this, SbbOverlayElement.events.willClose);
+
+  /** Emits whenever the `sbb-overlay` is closed. */
+  private _didClose: EventEmitter<SbbOverlayCloseEventDetails> = new EventEmitter(
+    this,
+    SbbOverlayElement.events.didClose,
+  );
+
+  /** Emits whenever the back button is clicked. */
+  private _backClick: EventEmitter<any> = new EventEmitter(
+    this,
+    SbbOverlayElement.events.backClick,
+  );
+
+  private _overlayContentElement: HTMLElement | null = null;
+  private _overlayCloseElement?: HTMLElement;
+  private _overlayController!: AbortController;
+  private _openOverlayController!: AbortController;
+  private _focusHandler = new SbbFocusHandler();
+  private _scrollHandler = new SbbScrollHandler();
+  private _returnValue: any;
+
+  // Last element which had focus before the overlay was opened.
+  private _lastFocusedElement?: HTMLElement;
+
+  private _language = new SbbLanguageController(this);
+
+  /**
+   * Opens the overlay element.
+   */
+  public open(): void {
+    if (this._state !== 'closed') {
+      return;
+    }
+    this._lastFocusedElement = document.activeElement as HTMLElement;
+
+    this._overlayContentElement = this.shadowRoot?.querySelector(
+      '.sbb-overlay__content',
+    ) as HTMLElement;
+
+    if (!this._willOpen.emit()) {
+      return;
+    }
+    this._state = 'opening';
+
+    // Add this overlay to the global collection
+    overlayRefs.push(this as SbbOverlayElement);
+
+    // Disable scrolling for content below the overlay
+    this._scrollHandler.disableScroll();
+  }
+
+  /**
+   * Closes the overlay element.
+   */
+  public close(result?: any, target?: HTMLElement): any {
+    if (this._state !== 'opened') {
+      return;
+    }
+
+    this._returnValue = result;
+    this._overlayCloseElement = target;
+    const eventData = {
+      returnValue: this._returnValue,
+      closeTarget: this._overlayCloseElement,
+    };
+
+    if (!this._willClose.emit(eventData)) {
+      return;
+    }
+    this._state = 'closing';
+    this._removeAriaLiveRefContent();
+  }
+
+  // Closes the overlay on "Esc" key pressed.
+  private _onKeydownEvent(event: KeyboardEvent): void {
+    if (this._state !== 'opened') {
+      return;
+    }
+
+    if (event.key === 'Escape') {
+      overlayRefs[overlayRefs.length - 1].close();
+      return;
+    }
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this._state ||= 'closed';
+    this._overlayController?.abort();
+    this._overlayController = new AbortController();
+
+    if (this._state === 'opened') {
+      applyInertMechanism(this);
+    }
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._overlayController?.abort();
+    this._openOverlayController?.abort();
+    this._focusHandler.disconnect();
+    this._removeInstanceFromGlobalCollection();
+    removeInertMechanism();
+  }
+
+  protected override firstUpdated(changedProperties: PropertyValues): void {
+    this._ariaLiveRef =
+      this.shadowRoot!.querySelector<SbbScreenReaderOnlyElement>('sbb-screen-reader-only')!;
+    super.firstUpdated(changedProperties);
+  }
+
+  private _removeInstanceFromGlobalCollection(): void {
+    overlayRefs.splice(overlayRefs.indexOf(this), 1);
+  }
+
+  private _attachOpenOverlayEvents(): void {
+    this._openOverlayController = new AbortController();
+    // Remove overlay label as soon as it is not needed anymore to prevent accessing it with browse mode.
+    window.addEventListener(
+      'keydown',
+      (event: KeyboardEvent) => {
+        this._removeAriaLiveRefContent();
+        this._onKeydownEvent(event);
+      },
+      {
+        signal: this._openOverlayController.signal,
+      },
+    );
+    window.addEventListener('click', () => this._removeAriaLiveRefContent(), {
+      signal: this._openOverlayController.signal,
+    });
+  }
+
+  // Close the overlay on click of any element that has the 'sbb-overlay-close' attribute.
+  private _closeOnSbbOverlayCloseClick(event: Event): void {
+    const overlayCloseElement = event
+      .composedPath()
+      .filter((e): e is HTMLElement => e instanceof window.HTMLElement)
+      .find(
+        (target) => target.hasAttribute('sbb-overlay-close') && !target.hasAttribute('disabled'),
+      );
+
+    if (!overlayCloseElement) {
+      return;
+    }
+
+    // Check if the target is a submission element within a form and return the form, if present
+    const closestForm =
+      overlayCloseElement.getAttribute('type') === 'submit'
+        ? (hostContext('form', overlayCloseElement) as HTMLFormElement)
+        : undefined;
+    overlayRefs[overlayRefs.length - 1].close(closestForm, overlayCloseElement);
+  }
+
+  // Wait for overlay transition to complete.
+  // In rare cases it can be that the animationEnd event is triggered twice.
+  // To avoid entering a corrupt state, exit when state is not expected.
+  private _onOverlayAnimationEnd(event: AnimationEvent): void {
+    if (event.animationName === 'open' && this._state === 'opening') {
+      this._state = 'opened';
+      this._didOpen.emit();
+      applyInertMechanism(this);
+      this._attachOpenOverlayEvents();
+      this._setOverlayFocus();
+      // Use timeout to read label after focused element
+      setTimeout(() => this._setAriaLiveRefContent());
+      this._focusHandler.trap(this);
+    } else if (event.animationName === 'close' && this._state === 'closing') {
+      this._overlayContentElement?.scrollTo(0, 0);
+      this._state = 'closed';
+      removeInertMechanism();
+      setModalityOnNextFocus(this._lastFocusedElement);
+      // Manually focus last focused element
+      this._lastFocusedElement?.focus();
+      this._openOverlayController?.abort();
+      this._focusHandler.disconnect();
+      this._removeInstanceFromGlobalCollection();
+      // Enable scrolling for content below the overlay if no overlay is open
+      !overlayRefs.length && this._scrollHandler.enableScroll();
+      this._didClose.emit({
+        returnValue: this._returnValue,
+        closeTarget: this._overlayCloseElement,
+      });
+    }
+  }
+
+  private _setAriaLiveRefContent(): void {
+    this._ariaLiveRefToggle = !this._ariaLiveRefToggle;
+
+    // If the text content remains the same, on VoiceOver the aria-live region is not announced a second time.
+    // In order to support reading on every opening, we toggle an invisible space.
+    this._ariaLiveRef.textContent = `${i18nDialog[this._language.current]}${
+      this.accessibilityLabel ? `, ${this.accessibilityLabel}` : ''
+    }${this._ariaLiveRefToggle ? ' ' : ''}`;
+  }
+
+  private _removeAriaLiveRefContent(): void {
+    this._ariaLiveRef.textContent = '';
+  }
+
+  // Set focus on the first focusable element.
+  private _setOverlayFocus(): void {
+    const firstFocusable = getFirstFocusableElement(
+      Array.from(this.shadowRoot!.children).filter(
+        (e): e is HTMLElement => e instanceof window.HTMLElement,
+      ),
+    );
+    setModalityOnNextFocus(firstFocusable);
+    firstFocusable?.focus();
+  }
+
+  protected override render(): TemplateResult {
+    const TAG_NAME = this.negative ? 'sbb-transparent-button' : 'sbb-secondary-button';
+
+    /* eslint-disable lit/binding-positions */
+    const closeButton = html`
+      <${unsafeStatic(TAG_NAME)}
+        class="sbb-overlay__close"
+        aria-label=${this.accessibilityCloseLabel || i18nCloseDialog[this._language.current]}
+        ?negative=${this.negative}
+        size="m"
+        type="button"
+        icon-name="cross-small"
+        sbb-overlay-close
+      ></${unsafeStatic(TAG_NAME)}>
+    `;
+
+    const backButton = html`
+      <${unsafeStatic(TAG_NAME)}
+        class="sbb-overlay__back"
+        aria-label=${this.accessibilityBackLabel || i18nGoBack[this._language.current]}
+        ?negative=${this.negative}
+        size="m"
+        type="button"
+        icon-name="chevron-small-left-small"
+        @click=${() => this._backClick.emit()}
+      ></${unsafeStatic(TAG_NAME)}>
+    `;
+    /* eslint-enable lit/binding-positions */
+
+    return html`
+      <div class="sbb-overlay__container">
+        <div
+          @animationend=${(event: AnimationEvent) => this._onOverlayAnimationEnd(event)}
+          class="sbb-overlay"
+        >
+          <div
+            @click=${(event: Event) => this._closeOnSbbOverlayCloseClick(event)}
+            class="sbb-overlay__wrapper"
+          >
+            <div class="sbb-overlay__header">
+              ${this.backButton ? backButton : nothing} ${closeButton}
+            </div>
+            <div class="sbb-overlay__content">
+              <sbb-container
+                class="sbb-overlay__content-container"
+                ?expanded=${this.expanded}
+                color="transparent"
+              >
+                <slot></slot>
+              </sbb-container>
+            </div>
+          </div>
+        </div>
+      </div>
+      <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-overlay': SbbOverlayElement;
+  }
+}
diff --git a/src/components/overlay/readme.md b/src/components/overlay/readme.md
new file mode 100644
index 0000000000..acfb9b7ba5
--- /dev/null
+++ b/src/components/overlay/readme.md
@@ -0,0 +1,113 @@
+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-sbb-dialog--docs).
+It offers the following features:
+
+- disables scrolling of the page content while open;
+- manages focus properly by setting it on the first focusable element;
+- has a close button, which is always visible;
+- can display a back button;
+- adds the appropriate ARIA roles automatically.
+
+```html
+<sbb-overlay id="my-overlay">
+  <p>Overlay content.</p>
+</sbb-overlay>
+```
+
+## Slots
+
+There is only one unnamed slot to provide the overlay content.
+
+## Style
+
+Setting the `expanded` property will cause the `sbb-overlay` component to take up the full width of the page.
+
+It's possible to display the component in `negative` variant using the self-named property.
+
+```html
+<sbb-overlay negative>
+  <p>Overlay content.</p>
+</sbb-overlay>
+```
+
+## Interactions
+
+In order to show the overlay, you need to call the `open(event?: PointerEvent)` method on the `sbb-overlay` component.
+It is necessary to pass the event object to the `open()` method to allow the overlay to detect
+whether it has been opened by click or keyboard, so that the focus can be better handled.
+
+```html
+<sbb-button
+  label="Open overlay"
+  click="openDialog(event, 'my-overlay')"
+  aria-haspopup="dialog"
+  aria-controls="my-overlay"
+></sbb-button>
+
+<sbb-overlay id="my-overlay">
+  <p>Overlay content.</p>
+</sbb-overlay>
+
+<script>
+  const openOverlay = (event, id) => {
+    const overlay = document.getElementById(id);
+    overlay.open(event);
+  };
+</script>
+```
+
+To dismiss the overlay, you need to get a reference to the `sbb-overlay` element and call
+the `close(result?: any, target?: HTMLElement)` method, which will close the overlay element and
+emit a close event with an optional result as a payload.
+
+The component can also be dismissed by clicking on the close button, clicking on the backdrop, pressing the `Esc` key,
+or, if an element within the `sbb-overlay` has the `sbb-overlay-close` attribute, by clicking on it.
+
+You can also set the property `backButton` on the `sbb-overlay-title` component to display the back button in the title section which will emit the event `requestBackAction` when clicked.
+
+## Accessibility
+
+When using a button to trigger the overlay, 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 an overlay element,
+`aria-controls="overlay-id"` that connects the button to the overlay by referencing the overlay's ID. Consider using `aria-expanded` to indicate the overlay's current state (open or closed).
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Name                      | Attribute                   | Privacy | Type                         | Default | Description                                                                                                           |
+| ------------------------- | --------------------------- | ------- | ---------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
+| `expanded`                | `expanded`                  | public  | `boolean`                    | `false` | Whether to allow the overlay content to stretch to full width. By default, the content has the appropriate page size. |
+| `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.                                                      |
+| `accessibilityLabel`      | `accessibility-label`       | public  | `string \| undefined`        |         | This will be forwarded as aria-label adn will describe the purpose of the dialog.                                     |
+| `negative`                | `negative`                  | public  | `boolean`                    | `false` | Negative coloring variant flag.                                                                                       |
+
+## Methods
+
+| Name    | Privacy | Description                 | Parameters                         | Return | Inherited From |
+| ------- | ------- | --------------------------- | ---------------------------------- | ------ | -------------- |
+| `open`  | public  | Opens the overlay element.  |                                    | `void` |                |
+| `close` | public  | Closes the overlay element. | `result: any, target: HTMLElement` | `any`  |                |
+
+## Events
+
+| Name                | Type                                       | Description                                                                      | Inherited From |
+| ------------------- | ------------------------------------------ | -------------------------------------------------------------------------------- | -------------- |
+| `willOpen`          | `CustomEvent<void>`                        | Emits whenever the `sbb-overlay` starts the opening transition. Can be canceled. |                |
+| `didOpen`           | `CustomEvent<void>`                        | Emits whenever the `sbb-overlay` is opened.                                      |                |
+| `willClose`         | `CustomEvent<void>`                        | Emits whenever the `sbb-overlay` begins the closing transition. Can be canceled. |                |
+| `didClose`          | `CustomEvent<SbbOverlayCloseEventDetails>` | Emits whenever the `sbb-overlay` is closed.                                      |                |
+| `requestBackAction` | `CustomEvent<void>`                        | Emits whenever the back button is clicked.                                       |                |
+
+## CSS Properties
+
+| Name                    | Default                              | Description                                                                                                                                                                                                   |
+| ----------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-overlay-z-index` | `var(--sbb-overlay-default-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`. |
+
+## Slots
+
+| Name | Description                                                |
+| ---- | ---------------------------------------------------------- |
+|      | Use the unnamed slot to provide a content for the overlay. |
diff --git a/src/components/pearl-chain-time.ts b/src/components/pearl-chain-time.ts
new file mode 100644
index 0000000000..9835cd87f0
--- /dev/null
+++ b/src/components/pearl-chain-time.ts
@@ -0,0 +1 @@
+export * from './pearl-chain-time/pearl-chain-time.js';
diff --git a/src/components/pearl-chain-time/index.ts b/src/components/pearl-chain-time/index.ts
deleted file mode 100644
index fbeecd6cbf..0000000000
--- a/src/components/pearl-chain-time/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './pearl-chain-time';
diff --git a/src/components/pearl-chain-time/pearl-chain-time.scss b/src/components/pearl-chain-time/pearl-chain-time.scss
index 866bffa5ae..06235f6136 100644
--- a/src/components/pearl-chain-time/pearl-chain-time.scss
+++ b/src/components/pearl-chain-time/pearl-chain-time.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-pearl-chain-time-height: auto;
@@ -14,6 +13,8 @@
   @include sbb.mq($from: medium) {
     --sbb-pearl-chain-time-height: #{sbb.px-to-rem-build(28)};
   }
+
+  display: block;
 }
 
 .sbb-pearl-chain__time {
diff --git a/src/components/pearl-chain-time/pearl-chain-time.spec.ts b/src/components/pearl-chain-time/pearl-chain-time.spec.ts
index 3f4e1ec556..55c8e19f52 100644
--- a/src/components/pearl-chain-time/pearl-chain-time.spec.ts
+++ b/src/components/pearl-chain-time/pearl-chain-time.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
-import type { PtRideLeg } from '../core/timetable';
+import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
+import type { PtRideLeg } from '../core/timetable.js';
 
-import type { SbbPearlChainTimeElement } from './pearl-chain-time';
+import type { SbbPearlChainTimeElement } from './pearl-chain-time.js';
 
-import './pearl-chain-time';
+import './pearl-chain-time.js';
 
 const now = new Date('2022-08-16T15:00:00Z').valueOf();
 
diff --git a/src/components/pearl-chain-time/pearl-chain-time.stories.ts b/src/components/pearl-chain-time/pearl-chain-time.stories.ts
index 0c53607f15..89091ce40b 100644
--- a/src/components/pearl-chain-time/pearl-chain-time.stories.ts
+++ b/src/components/pearl-chain-time/pearl-chain-time.stories.ts
@@ -1,14 +1,14 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
-import { extendedLeg, progressLeg } from '../pearl-chain/pearl-chain.sample-data';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import { extendedLeg, progressLeg } from '../pearl-chain/pearl-chain.sample-data.js';
 
 import readme from './readme.md?raw';
-import './pearl-chain-time';
+import './pearl-chain-time.js';
 
 const departureWalk: InputType = {
   control: {
diff --git a/src/components/pearl-chain-time/pearl-chain-time.ts b/src/components/pearl-chain-time/pearl-chain-time.ts
index 9f3526c918..5f8f26355a 100644
--- a/src/components/pearl-chain-time/pearl-chain-time.ts
+++ b/src/components/pearl-chain-time/pearl-chain-time.ts
@@ -3,15 +3,16 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { LanguageController } from '../core/common-behaviors';
-import { removeTimezoneFromISOTimeString } from '../core/datetime';
-import { i18nDeparture, i18nArrival, i18nTransferProcedures } from '../core/i18n';
-import type { Leg, PtRideLeg } from '../core/timetable';
-import { getDepartureArrivalTimeAttribute, isRideLeg } from '../core/timetable';
-import '../pearl-chain';
+import { SbbLanguageController } from '../core/controllers.js';
+import { readDataNow, removeTimezoneFromISOTimeString } from '../core/datetime.js';
+import { i18nArrival, i18nDeparture, i18nTransferProcedures } from '../core/i18n.js';
+import type { Leg, PtRideLeg } from '../core/timetable.js';
+import { getDepartureArrivalTimeAttribute, isRideLeg } from '../core/timetable.js';
 
 import style from './pearl-chain-time.scss?lit&inline';
 
+import '../pearl-chain.js';
+
 /**
  * Combined with `sbb-pearl-chain`, it displays walk time information.
  */
@@ -47,10 +48,10 @@ export class SbbPearlChainTimeElement extends LitElement {
    */
   @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   private _now(): number {
-    const dataNow = +(this.dataset?.now as string);
+    const dataNow = readDataNow(this);
     return isNaN(dataNow) ? Date.now() : dataNow;
   }
 
diff --git a/src/components/pearl-chain-vertical-item.ts b/src/components/pearl-chain-vertical-item.ts
new file mode 100644
index 0000000000..a6d812ce5c
--- /dev/null
+++ b/src/components/pearl-chain-vertical-item.ts
@@ -0,0 +1 @@
+export * from './pearl-chain-vertical-item/pearl-chain-vertical-item.js';
diff --git a/src/components/pearl-chain-vertical-item/index.ts b/src/components/pearl-chain-vertical-item/index.ts
deleted file mode 100644
index f5231c3ff5..0000000000
--- a/src/components/pearl-chain-vertical-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './pearl-chain-vertical-item';
diff --git a/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.scss b/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.scss
index fd6974fcc1..2e681dce64 100644
--- a/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.scss
+++ b/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   @include sbb.pearl-chain-bullet-variables;
diff --git a/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.spec.ts b/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.spec.ts
index 3893782c44..c6fe5ab794 100644
--- a/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.spec.ts
+++ b/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.spec.ts
@@ -1,12 +1,12 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
 
-import type { LineColor, SbbPearlChainVerticalItemElement } from './pearl-chain-vertical-item';
+import type { LineColor, SbbPearlChainVerticalItemElement } from './pearl-chain-vertical-item.js';
 
-import './pearl-chain-vertical-item';
+import './pearl-chain-vertical-item.js';
 
 describe(`sbb-pearl-chain-vertical-item`, () => {
   it('renders component with charcoal standard line and bullet', async () => {
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 1dd710d5e8..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
@@ -3,8 +3,8 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
 import readme from './readme.md?raw';
-import '../pearl-chain-vertical';
-import './pearl-chain-vertical-item';
+import '../pearl-chain-vertical.js';
+import './pearl-chain-vertical-item.js';
 
 const Template = (args: Args): TemplateResult => {
   return html`
@@ -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.ts b/src/components/pearl-chain-vertical.ts
new file mode 100644
index 0000000000..81fc96734a
--- /dev/null
+++ b/src/components/pearl-chain-vertical.ts
@@ -0,0 +1 @@
+export * from './pearl-chain-vertical/pearl-chain-vertical.js';
diff --git a/src/components/pearl-chain-vertical/index.ts b/src/components/pearl-chain-vertical/index.ts
deleted file mode 100644
index 3bdf8d4052..0000000000
--- a/src/components/pearl-chain-vertical/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './pearl-chain-vertical';
diff --git a/src/components/pearl-chain-vertical/pearl-chain-vertical.e2e.ts b/src/components/pearl-chain-vertical/pearl-chain-vertical.e2e.ts
index 0679edf43c..ab5f83c04f 100644
--- a/src/components/pearl-chain-vertical/pearl-chain-vertical.e2e.ts
+++ b/src/components/pearl-chain-vertical/pearl-chain-vertical.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbPearlChainVerticalElement } from './pearl-chain-vertical';
+import { SbbPearlChainVerticalElement } from './pearl-chain-vertical.js';
 
 describe(`sbb-pearl-chain with ${fixture.name}`, () => {
   let element: SbbPearlChainVerticalElement;
diff --git a/src/components/pearl-chain-vertical/pearl-chain-vertical.scss b/src/components/pearl-chain-vertical/pearl-chain-vertical.scss
index 96bcb6f4ad..f3547d701e 100644
--- a/src/components/pearl-chain-vertical/pearl-chain-vertical.scss
+++ b/src/components/pearl-chain-vertical/pearl-chain-vertical.scss
@@ -1,11 +1,12 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-pearl-chain-vertical-width: 100%;
+
+  display: block;
 }
 
 .sbb-pearl-chain-vertical {
diff --git a/src/components/pearl-chain-vertical/pearl-chain-vertical.spec.ts b/src/components/pearl-chain-vertical/pearl-chain-vertical.spec.ts
index 98b4e7386b..7bc94a3fcc 100644
--- a/src/components/pearl-chain-vertical/pearl-chain-vertical.spec.ts
+++ b/src/components/pearl-chain-vertical/pearl-chain-vertical.spec.ts
@@ -1,12 +1,12 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
 
-import type { SbbPearlChainVerticalElement } from './pearl-chain-vertical';
+import type { SbbPearlChainVerticalElement } from './pearl-chain-vertical.js';
 
-import './pearl-chain-vertical';
+import './pearl-chain-vertical.js';
 
 describe(`sbb-pearl-chain-vertical`, () => {
   it('renders', async () => {
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 ddc565243e..bc07d3fd69 100644
--- a/src/components/pearl-chain-vertical/pearl-chain-vertical.stories.ts
+++ b/src/components/pearl-chain-vertical/pearl-chain-vertical.stories.ts
@@ -1,13 +1,13 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
 import readme from './readme.md?raw';
-import './pearl-chain-vertical';
-import '../pearl-chain-vertical-item';
-import '../icon';
+import './pearl-chain-vertical.js';
+import '../pearl-chain-vertical-item.js';
+import '../icon.js';
 
 const lineType: InputType = {
   options: ['dotted', 'standard', 'thin'],
@@ -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/pearl-chain.ts b/src/components/pearl-chain.ts
new file mode 100644
index 0000000000..ffe82ccdad
--- /dev/null
+++ b/src/components/pearl-chain.ts
@@ -0,0 +1 @@
+export * from './pearl-chain/pearl-chain.js';
diff --git a/src/components/pearl-chain/index.ts b/src/components/pearl-chain/index.ts
deleted file mode 100644
index 4c17045264..0000000000
--- a/src/components/pearl-chain/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './pearl-chain';
diff --git a/src/components/pearl-chain/pearl-chain.e2e.ts b/src/components/pearl-chain/pearl-chain.e2e.ts
index 6d451887a9..6039201bf0 100644
--- a/src/components/pearl-chain/pearl-chain.e2e.ts
+++ b/src/components/pearl-chain/pearl-chain.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbPearlChainElement } from './pearl-chain';
+import { SbbPearlChainElement } from './pearl-chain.js';
 
 describe(`sbb-pearl-chain with ${fixture.name}`, () => {
   let element: SbbPearlChainElement;
diff --git a/src/components/pearl-chain/pearl-chain.scss b/src/components/pearl-chain/pearl-chain.scss
index 9b193a893a..31b8c261d5 100644
--- a/src/components/pearl-chain/pearl-chain.scss
+++ b/src/components/pearl-chain/pearl-chain.scss
@@ -14,21 +14,20 @@
   }
 }
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
-  @include sbb.pearl-chain-bullet-variables;
-
-  display: block;
-
   --sbb-pearl-chain-height: var(--sbb-border-width-2x);
   --sbb-pearl-chain-spacing-small: var(--sbb-spacing-fixed-1x);
   --sbb-pearl-chain-color: var(--sbb-pearl-chain-bullet-color);
   --sbb-pearl-chain-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);
   --sbb-pearl-chain-color-past: var(--sbb-pearl-chain-bullet-color-past);
   --sbb-pearl-chain-leg-width: 100%;
+
+  @include sbb.pearl-chain-bullet-variables;
+
+  display: block;
 }
 
 .sbb-pearl-chain {
diff --git a/src/components/pearl-chain/pearl-chain.spec.ts b/src/components/pearl-chain/pearl-chain.spec.ts
index e3e56f308c..c49508799b 100644
--- a/src/components/pearl-chain/pearl-chain.spec.ts
+++ b/src/components/pearl-chain/pearl-chain.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
-import type { PtRideLeg } from '../core/timetable';
+import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
+import type { PtRideLeg } from '../core/timetable.js';
 
-import type { SbbPearlChainElement } from './pearl-chain';
+import type { SbbPearlChainElement } from './pearl-chain.js';
 
-import './pearl-chain';
+import './pearl-chain.js';
 
 describe(`sbb-pearl-chain`, () => {
   describe('sbb-pearl-chain with one leg', () => {
diff --git a/src/components/pearl-chain/pearl-chain.stories.ts b/src/components/pearl-chain/pearl-chain.stories.ts
index 26b97db50a..8e41921982 100644
--- a/src/components/pearl-chain/pearl-chain.stories.ts
+++ b/src/components/pearl-chain/pearl-chain.stories.ts
@@ -1,10 +1,10 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import {
   cancelledLeg,
@@ -14,9 +14,9 @@ import {
   longFutureLeg,
   redirectedOnDepartureLeg,
   redirectedOnArrivalLeg,
-} from './pearl-chain.sample-data';
+} from './pearl-chain.sample-data.js';
 import readme from './readme.md?raw';
-import './pearl-chain';
+import './pearl-chain.js';
 
 const disableAnimation: InputType = {
   control: {
diff --git a/src/components/pearl-chain/pearl-chain.ts b/src/components/pearl-chain/pearl-chain.ts
index 9e54efcbd6..46c5a00606 100644
--- a/src/components/pearl-chain/pearl-chain.ts
+++ b/src/components/pearl-chain/pearl-chain.ts
@@ -4,9 +4,9 @@ import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { removeTimezoneFromISOTimeString } from '../core/datetime';
-import type { Leg, PtRideLeg } from '../core/timetable';
-import { isRideLeg } from '../core/timetable';
+import { readDataNow, removeTimezoneFromISOTimeString } from '../core/datetime.js';
+import type { Leg, PtRideLeg } from '../core/timetable.js';
+import { isRideLeg } from '../core/timetable.js';
 
 import style from './pearl-chain.scss?lit&inline';
 
@@ -36,7 +36,7 @@ export class SbbPearlChainElement extends LitElement {
   @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation?: boolean;
 
   private _now(): number {
-    const dataNow = +(this.dataset?.now as string);
+    const dataNow = readDataNow(this);
     return isNaN(dataNow) ? Date.now() : dataNow;
   }
 
diff --git a/src/components/popover.ts b/src/components/popover.ts
new file mode 100644
index 0000000000..a738af2342
--- /dev/null
+++ b/src/components/popover.ts
@@ -0,0 +1,2 @@
+export * from './popover/popover.js';
+export * from './popover/popover-trigger.js';
diff --git a/src/components/popover/index.ts b/src/components/popover/index.ts
deleted file mode 100644
index 4ba800f767..0000000000
--- a/src/components/popover/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './popover';
-export * from './popover-trigger';
diff --git a/src/components/popover/popover-trigger.ts b/src/components/popover/popover-trigger.ts
new file mode 100644
index 0000000000..f4167aeafc
--- /dev/null
+++ b/src/components/popover/popover-trigger.ts
@@ -0,0 +1 @@
+export * from './popover-trigger/popover-trigger.js';
diff --git a/src/components/popover/popover-trigger/index.ts b/src/components/popover/popover-trigger/index.ts
deleted file mode 100644
index 0f7731d384..0000000000
--- a/src/components/popover/popover-trigger/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './popover-trigger';
diff --git a/src/components/popover/popover-trigger/popover-trigger.e2e.ts b/src/components/popover/popover-trigger/popover-trigger.e2e.ts
index d8dfb3353a..a1e9e5ea99 100644
--- a/src/components/popover/popover-trigger/popover-trigger.e2e.ts
+++ b/src/components/popover/popover-trigger/popover-trigger.e2e.ts
@@ -2,14 +2,14 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import { SbbPopoverElement } from '../popover';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing.js';
+import { SbbPopoverElement } from '../popover.js';
 
-import { SbbPopoverTriggerElement } from './popover-trigger';
+import { SbbPopoverTriggerElement } from './popover-trigger.js';
 
-import '../../icon';
-import '../../link/link';
+import '../../icon.js';
+import '../../link/link.js';
 
 describe(`sbb-popover-trigger with ${fixture.name}`, () => {
   let element: SbbPopoverTriggerElement, popover: SbbPopoverElement;
@@ -25,7 +25,7 @@ describe(`sbb-popover-trigger with ${fixture.name}`, () => {
           </sbb-popover>
         </div>
       `,
-      { modules: ['./popover-trigger.ts', '../popover/index.ts', '../../link/index.ts'] },
+      { modules: ['./popover-trigger.ts', '../popover.ts', '../../link.ts'] },
     );
     element = root.querySelector<SbbPopoverTriggerElement>('sbb-popover-trigger')!;
     popover = root.querySelector<SbbPopoverElement>('sbb-popover')!;
diff --git a/src/components/popover/popover-trigger/popover-trigger.scss b/src/components/popover/popover-trigger/popover-trigger.scss
index 66b95d514c..acceb3537c 100644
--- a/src/components/popover/popover-trigger/popover-trigger.scss
+++ b/src/components/popover/popover-trigger/popover-trigger.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-popover-color: inherit;
diff --git a/src/components/popover/popover-trigger/popover-trigger.spec.ts b/src/components/popover/popover-trigger/popover-trigger.spec.ts
index 62a5aa4598..97fca78e8e 100644
--- a/src/components/popover/popover-trigger/popover-trigger.spec.ts
+++ b/src/components/popover/popover-trigger/popover-trigger.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import './popover-trigger';
+import './popover-trigger.js';
 
 describe(`sbb-popover-trigger`, () => {
   it('renders', async () => {
diff --git a/src/components/popover/popover-trigger/popover-trigger.stories.ts b/src/components/popover/popover-trigger/popover-trigger.stories.ts
index 3993107328..b48141a38f 100644
--- a/src/components/popover/popover-trigger/popover-trigger.stories.ts
+++ b/src/components/popover/popover-trigger/popover-trigger.stories.ts
@@ -4,16 +4,15 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import '../../link';
-import '../popover';
-import './popover-trigger';
-import '../../title';
+import '../../link.js';
+import '../popover.js';
+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-trigger/popover-trigger.ts b/src/components/popover/popover-trigger/popover-trigger.ts
index e764db89e8..58acc5b8b8 100644
--- a/src/components/popover/popover-trigger/popover-trigger.ts
+++ b/src/components/popover/popover-trigger/popover-trigger.ts
@@ -1,15 +1,11 @@
 import { type CSSResultGroup, html, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import {
-  SbbButtonBaseElement,
-  SbbDisabledTabIndexActionMixin,
-  SbbIconNameMixin,
-  SbbNegativeMixin,
-} from '../../core/common-behaviors';
-import { hostContext, isValidAttribute } from '../../core/dom';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { hostContext } from '../../core/dom.js';
+import { SbbDisabledTabIndexActionMixin, SbbNegativeMixin } from '../../core/mixins.js';
+import { SbbIconNameMixin } from '../../icon.js';
 
-import '../../icon';
 import style from './popover-trigger.scss?lit&inline';
 
 /**
@@ -29,7 +25,7 @@ export class SbbPopoverTriggerElement extends SbbDisabledTabIndexActionMixin(
 
     if (formField) {
       this.toggleAttribute('data-icon-small', true);
-      this.negative = isValidAttribute(formField as HTMLElement, 'negative');
+      this.negative = (formField as HTMLElement).hasAttribute('negative');
     }
   }
 
diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts
new file mode 100644
index 0000000000..985de8f41b
--- /dev/null
+++ b/src/components/popover/popover.ts
@@ -0,0 +1 @@
+export * from './popover/popover.js';
diff --git a/src/components/popover/popover/index.ts b/src/components/popover/popover/index.ts
deleted file mode 100644
index 1f4904cff9..0000000000
--- a/src/components/popover/popover/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './popover';
diff --git a/src/components/popover/popover/popover.e2e.ts b/src/components/popover/popover/popover.e2e.ts
index 916f0c0d03..e25ae4716b 100644
--- a/src/components/popover/popover/popover.e2e.ts
+++ b/src/components/popover/popover/popover.e2e.ts
@@ -2,14 +2,14 @@ import { assert, aTimeout, expect } from '@open-wc/testing';
 import { sendKeys, sendMouse, setViewport } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import type { SbbButtonElement } from '../../button';
-import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import type { SbbButtonElement } from '../../button.js';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing.js';
 
-import { SbbPopoverElement } from './popover';
+import { SbbPopoverElement } from './popover.js';
 
-import '../../button/button';
-import '../../link';
+import '../../button/button.js';
+import '../../link.js';
 
 describe(`sbb-popover with ${fixture.name}`, () => {
   let element: SbbPopoverElement, trigger: SbbButtonElement;
@@ -29,7 +29,7 @@ describe(`sbb-popover with ${fixture.name}`, () => {
             >
           </span>
         `,
-        { modules: ['../../button/index.ts', './popover.ts', '../../link/index.ts'] },
+        { modules: ['../../button.ts', './popover.ts', '../../link.ts'] },
       );
       trigger = content.querySelector<SbbButtonElement>('sbb-button')!;
       element = content.querySelector<SbbPopoverElement>('sbb-popover')!;
@@ -170,7 +170,7 @@ describe(`sbb-popover with ${fixture.name}`, () => {
       expect(element).to.have.attribute('data-state', 'opened');
 
       const buttonHeight = getComputedStyle(document.documentElement).getPropertyValue(
-        `--sbb-size-button-l-min-height-large`,
+        `--sbb-size-element-m`,
       );
       expect(buttonHeight.trim()).to.be.equal('3.5rem');
 
@@ -218,8 +218,8 @@ describe(`sbb-popover with ${fixture.name}`, () => {
       await sendMouse({
         type: 'click',
         position: [
-          interactiveElementPosition.x + interactiveElementPosition.width / 2,
-          interactiveElementPosition.y + interactiveElementPosition.height / 2,
+          Math.round(interactiveElementPosition.x + interactiveElementPosition.width / 2),
+          Math.round(interactiveElementPosition.y + interactiveElementPosition.height / 2),
         ],
       });
       await waitForCondition(() => didCloseEventSpy.events.length === 1);
@@ -400,7 +400,7 @@ describe(`sbb-popover with ${fixture.name}`, () => {
             >
           </span>
         `,
-        { modules: ['../../button/index.ts', './popover.ts', '../../link/index.ts'] },
+        { modules: ['../../button.ts', './popover.ts', '../../link.ts'] },
       );
       trigger = content.querySelector<SbbButtonElement>('sbb-button')!;
       element = content.querySelector<SbbPopoverElement>('sbb-popover')!;
@@ -466,7 +466,7 @@ describe(`sbb-popover with ${fixture.name}`, () => {
           </sbb-popover>
         </div>
       `,
-      { modules: ['../../link/index.ts', '../../button/index.ts', './popover.ts'] },
+      { modules: ['../../link.ts', '../../button.ts', './popover.ts'] },
     );
     trigger = root.querySelector<SbbButtonElement>('#popover-trigger')!;
     element = root.querySelector<SbbPopoverElement>('#popover')!;
diff --git a/src/components/popover/popover/popover.scss b/src/components/popover/popover/popover.scss
index f0181d5fe9..c94353a576 100644
--- a/src/components/popover/popover/popover.scss
+++ b/src/components/popover/popover/popover.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-popover-position: absolute;
@@ -26,6 +25,8 @@
   // As the popover has always a white background, we have to fix the focus outline color
   // to default color for cases where the popover is used in a negative context.
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
+
+  display: block;
 }
 
 :host([data-position='above']) {
@@ -55,7 +56,7 @@
   position: fixed;
   inset: var(--sbb-popover-inset);
   pointer-events: none;
-  z-index: var(--sbb-popover-z-index, var(--sbb-overlay-z-index));
+  z-index: var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index));
   color: var(--sbb-popover-color);
 }
 
diff --git a/src/components/popover/popover/popover.spec.ts b/src/components/popover/popover/popover.spec.ts
index 8f0dba5053..a0ad5df407 100644
--- a/src/components/popover/popover/popover.spec.ts
+++ b/src/components/popover/popover/popover.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import './popover';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import './popover.js';
 
 describe(`sbb-popover`, () => {
   it('renders', async () => {
diff --git a/src/components/popover/popover/popover.stories.ts b/src/components/popover/popover/popover.stories.ts
index 54a30dfd6f..61a4487a5c 100644
--- a/src/components/popover/popover/popover.stories.ts
+++ b/src/components/popover/popover/popover.stories.ts
@@ -9,19 +9,19 @@ import type {
   StoryContext,
   StoryObj,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
 
-import { SbbPopoverElement } from './popover';
+import { SbbPopoverElement } from './popover.js';
 import readme from './readme.md?raw';
-import '../../link';
-import '../../title';
-import '../popover-trigger';
+import '../../link.js';
+import '../../title.js';
+import '../popover-trigger.js';
 
 async function commonPlayStory(canvasElement: HTMLElement): Promise<Element> {
   const canvas = within(canvasElement);
@@ -259,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: {
@@ -277,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 61d9ee38fa..4d4b4c8381 100644
--- a/src/components/popover/popover/popover.ts
+++ b/src/components/popover/popover/popover.ts
@@ -4,26 +4,27 @@ import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
 import {
-  FocusHandler,
   getFirstFocusableElement,
   IS_FOCUSABLE_QUERY,
+  SbbFocusHandler,
   setModalityOnNextFocus,
-} from '../../core/a11y';
-import { LanguageController } from '../../core/common-behaviors';
-import { findReferencedElement, isValidAttribute, setAttribute } from '../../core/dom';
-import { composedPathHasAttribute, EventEmitter } from '../../core/eventing';
-import { i18nClosePopover } from '../../core/i18n';
-import type { SbbOverlayState } from '../../core/overlay';
+} from '../../core/a11y.js';
+import { SbbLanguageController } from '../../core/controllers.js';
+import { findReferencedElement } from '../../core/dom.js';
+import { composedPathHasAttribute, EventEmitter } from '../../core/eventing.js';
+import { i18nClosePopover } from '../../core/i18n.js';
+import type { SbbOpenedClosedState } from '../../core/interfaces.js';
 import {
   getElementPosition,
   isEventOnElement,
   removeAriaOverlayTriggerAttributes,
   setAriaOverlayTriggerAttributes,
-} from '../../core/overlay';
-import '../../button/secondary-button';
+} from '../../core/overlay.js';
 
 import style from './popover.scss?lit&inline';
 
+import '../../button/secondary-button.js';
+
 const VERTICAL_OFFSET = 16;
 const HORIZONTAL_OFFSET = 32;
 
@@ -40,9 +41,9 @@ const popoversRef = new Set<SbbPopoverElement>();
  * @event {CustomEvent<{ closeTarget: HTMLElement }>} willClose - Emits whenever the `sbb-popover` begins the closing
  * transition. Can be canceled.
  * @event {CustomEvent<{ closeTarget: HTMLElement }>} didClose - Emits whenever the `sbb-popover` is closed.
- * @cssprop [--sbb-popover-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-popover-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
- * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
  */
 @customElement('sbb-popover')
 export class SbbPopoverElement extends LitElement {
@@ -79,14 +80,11 @@ export class SbbPopoverElement extends LitElement {
     | undefined;
 
   /** The state of the popover. */
-  private set _state(state: SbbOverlayState) {
-    if (!this.dataset) {
-      return;
-    }
-    this.dataset.state = state;
+  private set _state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
   }
-  private get _state(): SbbOverlayState {
-    return this.dataset.state as SbbOverlayState;
+  private get _state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
   }
 
   /** Emits whenever the `sbb-popover` starts the opening transition. */
@@ -116,11 +114,11 @@ export class SbbPopoverElement extends LitElement {
   private _isPointerDownEventOnPopover?: boolean;
   private _popoverController!: AbortController;
   private _openStateController!: AbortController;
-  private _focusHandler = new FocusHandler();
+  private _focusHandler = new SbbFocusHandler();
   private _hoverTrigger = false;
   private _openTimeout?: ReturnType<typeof setTimeout>;
   private _closeTimeout?: ReturnType<typeof setTimeout>;
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   /** Opens the popover on trigger click. */
   public open(): void {
@@ -134,7 +132,7 @@ export class SbbPopoverElement extends LitElement {
 
     // Close the other popovers
     for (const popover of Array.from(popoversRef)) {
-      const state = popover.getAttribute('data-state') as SbbOverlayState;
+      const state = popover.getAttribute('data-state') as SbbOpenedClosedState;
       if (state && (state === 'opened' || state === 'opening')) {
         popover.close();
       }
@@ -308,7 +306,7 @@ export class SbbPopoverElement extends LitElement {
   private _closeOnSbbPopoverCloseClick(event: Event): void {
     const closeElement = composedPathHasAttribute(event, 'sbb-popover-close', this);
 
-    if (closeElement && !isValidAttribute(closeElement, 'disabled')) {
+    if (closeElement && !closeElement.hasAttribute('disabled')) {
       clearTimeout(this._closeTimeout);
       this.close(closeElement);
     }
@@ -450,8 +448,7 @@ export class SbbPopoverElement extends LitElement {
         responsiveHeight: true,
       },
     );
-
-    setAttribute(this, 'data-position', popoverPosition.alignment.vertical);
+    this.setAttribute('data-position', popoverPosition.alignment.vertical);
 
     const arrowXPosition =
       this._triggerElement.getBoundingClientRect().left -
diff --git a/src/components/popover/popover/readme.md b/src/components/popover/popover/readme.md
index 9459de8484..9bf9b437b3 100644
--- a/src/components/popover/popover/readme.md
+++ b/src/components/popover/popover/readme.md
@@ -109,9 +109,9 @@ Add the `sbb-disable-animation` class to disable animation and transition effect
 
 ## CSS Properties
 
-| Name                    | Default                      | Description                                                                                                                                                                                           |
-| ----------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-popover-z-index` | `var(--sbb-overlay-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-z-index)` with a value of `1000`. |
+| Name                    | Default                              | Description                                                                                                                                                                                                   |
+| ----------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-popover-z-index` | `var(--sbb-overlay-default-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`. |
 
 ## Slots
 
diff --git a/src/components/radio-button.ts b/src/components/radio-button.ts
new file mode 100644
index 0000000000..43d908e46d
--- /dev/null
+++ b/src/components/radio-button.ts
@@ -0,0 +1,2 @@
+export * from './radio-button/radio-button.js';
+export * from './radio-button/radio-button-group.js';
diff --git a/src/components/radio-button/index.ts b/src/components/radio-button/index.ts
deleted file mode 100644
index a59886720b..0000000000
--- a/src/components/radio-button/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './radio-button';
-export * from './radio-button-group';
diff --git a/src/components/radio-button/radio-button-group.ts b/src/components/radio-button/radio-button-group.ts
new file mode 100644
index 0000000000..e0cc8a8691
--- /dev/null
+++ b/src/components/radio-button/radio-button-group.ts
@@ -0,0 +1 @@
+export * from './radio-button-group/radio-button-group.js';
diff --git a/src/components/radio-button/radio-button-group/index.ts b/src/components/radio-button/radio-button-group/index.ts
deleted file mode 100644
index 6b0e03fa92..0000000000
--- a/src/components/radio-button/radio-button-group/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './radio-button-group';
diff --git a/src/components/radio-button/radio-button-group/radio-button-group.e2e.ts b/src/components/radio-button/radio-button-group/radio-button-group.e2e.ts
index 7cdeb36711..5d97b59c66 100644
--- a/src/components/radio-button/radio-button-group/radio-button-group.e2e.ts
+++ b/src/components/radio-button/radio-button-group/radio-button-group.e2e.ts
@@ -2,12 +2,12 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbRadioButtonElement } from '../radio-button';
-import '../radio-button';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing.js';
+import type { SbbRadioButtonElement } from '../radio-button.js';
+import '../radio-button.js';
 
-import { SbbRadioButtonGroupElement } from './radio-button-group';
+import { SbbRadioButtonGroupElement } from './radio-button-group.js';
 
 describe(`sbb-radio-button-group with ${fixture.name}`, () => {
   let element: SbbRadioButtonGroupElement;
@@ -24,7 +24,7 @@ describe(`sbb-radio-button-group with ${fixture.name}`, () => {
           <sbb-radio-button id="sbb-radio-4" value="Value four">Value four</sbb-radio-button>
         </sbb-radio-button-group>
       `,
-      { modules: ['./radio-button-group.ts', '../radio-button/index.ts'] },
+      { modules: ['./radio-button-group.ts', '../radio-button.ts'] },
     );
   });
 
diff --git a/src/components/radio-button/radio-button-group/radio-button-group.scss b/src/components/radio-button/radio-button-group/radio-button-group.scss
index 3018ddd027..243e7cd27d 100644
--- a/src/components/radio-button/radio-button-group/radio-button-group.scss
+++ b/src/components/radio-button/radio-button-group/radio-button-group.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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;
 
 @mixin horizontal-orientation {
   --sbb-radio-button-group-orientation: row;
@@ -15,6 +14,8 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra';
 
   --sbb-radio-button-group-width: max-content;
   --sbb-radio-button-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
+
+  display: block;
 }
 
 :host([orientation='vertical']) {
diff --git a/src/components/radio-button/radio-button-group/radio-button-group.spec.ts b/src/components/radio-button/radio-button-group/radio-button-group.spec.ts
index 86ea928374..1135d5f16c 100644
--- a/src/components/radio-button/radio-button-group/radio-button-group.spec.ts
+++ b/src/components/radio-button/radio-button-group/radio-button-group.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbRadioButtonGroupElement } from './radio-button-group';
+import type { SbbRadioButtonGroupElement } from './radio-button-group.js';
 
-import './radio-button-group';
+import './radio-button-group.js';
 
 describe(`sbb-radio-button-group`, () => {
   let element: SbbRadioButtonGroupElement;
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 208d25fa18..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
@@ -4,13 +4,13 @@ import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
-import type { SbbFormErrorElement } from '../../form-error';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import type { SbbFormErrorElement } from '../../form-error.js';
 
 import readme from './readme.md?raw';
-import './radio-button-group';
-import '../radio-button';
-import '../../form-error';
+import './radio-button-group.js';
+import '../radio-button.js';
+import '../../form-error.js';
 
 const value: InputType = {
   control: {
@@ -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-group/radio-button-group.ts b/src/components/radio-button/radio-button-group/radio-button-group.ts
index 7271a332c7..8656dbfe87 100644
--- a/src/components/radio-button/radio-button-group/radio-button-group.ts
+++ b/src/components/radio-button/radio-button-group/radio-button-group.ts
@@ -2,20 +2,18 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { isArrowKeyPressed, getNextElementIndex } from '../../core/a11y';
-import {
-  hostAttributes,
-  NamedSlotStateController,
-  SbbDisabledMixin,
-} from '../../core/common-behaviors';
-import { EventEmitter, ConnectedAbortController } from '../../core/eventing';
-import type { SbbHorizontalFrom, SbbOrientation, SbbStateChange } from '../../core/interfaces';
-import type { SbbSelectionPanelElement } from '../../selection-panel';
+import { getNextElementIndex, isArrowKeyPressed } from '../../core/a11y.js';
+import { SbbConnectedAbortController, SbbSlotStateController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { EventEmitter } from '../../core/eventing.js';
+import type { SbbHorizontalFrom, SbbOrientation, SbbStateChange } from '../../core/interfaces.js';
+import { SbbDisabledMixin } from '../../core/mixins.js';
+import type { SbbSelectionPanelElement } from '../../selection-panel.js';
 import type {
   SbbRadioButtonElement,
   SbbRadioButtonSize,
   SbbRadioButtonStateChange,
-} from '../radio-button';
+} from '../radio-button.js';
 
 import style from './radio-button-group.scss?lit&inline';
 
@@ -95,7 +93,7 @@ export class SbbRadioButtonGroupElement extends SbbDisabledMixin(LitElement) {
 
   private _hasSelectionPanel: boolean = false;
   private _didLoad = false;
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
 
   private _valueChanged(value: any | undefined): void {
     for (const radio of this.radioButtons) {
@@ -132,7 +130,7 @@ export class SbbRadioButtonGroupElement extends SbbDisabledMixin(LitElement) {
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   public override connectedCallback(): void {
diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts
new file mode 100644
index 0000000000..0103880812
--- /dev/null
+++ b/src/components/radio-button/radio-button.ts
@@ -0,0 +1 @@
+export * from './radio-button/radio-button.js';
diff --git a/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js b/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js
index c81c89d604..73103e32cb 100644
--- a/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js
+++ b/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js
@@ -4,7 +4,6 @@ export const snapshots = {};
 snapshots["sbb-radio-button renders - Dom"] = 
 `<sbb-radio-button
   aria-checked="false"
-  aria-disabled="false"
   aria-required="false"
   role="radio"
   size="m"
diff --git a/src/components/radio-button/radio-button/index.ts b/src/components/radio-button/radio-button/index.ts
deleted file mode 100644
index af6ffac816..0000000000
--- a/src/components/radio-button/radio-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './radio-button';
diff --git a/src/components/radio-button/radio-button/radio-button.e2e.ts b/src/components/radio-button/radio-button/radio-button.e2e.ts
index 634a9dca46..5ce3d5ac4e 100644
--- a/src/components/radio-button/radio-button/radio-button.e2e.ts
+++ b/src/components/radio-button/radio-button/radio-button.e2e.ts
@@ -1,10 +1,10 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing.js';
 
-import { SbbRadioButtonElement } from './radio-button';
+import { SbbRadioButtonElement } from './radio-button.js';
 
 describe(`sbb-radio-button with ${fixture.name}`, () => {
   let element: SbbRadioButtonElement;
diff --git a/src/components/radio-button/radio-button/radio-button.scss b/src/components/radio-button/radio-button/radio-button.scss
index 504e34810f..6fbe8a8140 100644
--- a/src/components/radio-button/radio-button/radio-button.scss
+++ b/src/components/radio-button/radio-button/radio-button.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-radio-button-label-color: var(--sbb-color-charcoal);
@@ -26,6 +25,8 @@
     (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2
   );
 
+  display: block;
+
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
diff --git a/src/components/radio-button/radio-button/radio-button.spec.ts b/src/components/radio-button/radio-button/radio-button.spec.ts
index 69e66e886e..1a3e96afbd 100644
--- a/src/components/radio-button/radio-button/radio-button.spec.ts
+++ b/src/components/radio-button/radio-button/radio-button.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbRadioButtonElement } from './radio-button';
+import type { SbbRadioButtonElement } from './radio-button.js';
 
-import './radio-button';
+import './radio-button.js';
 
 describe(`sbb-radio-button`, () => {
   let element: SbbRadioButtonElement;
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 abe380ee73..ce81c380ec 100644
--- a/src/components/radio-button/radio-button/radio-button.stories.ts
+++ b/src/components/radio-button/radio-button/radio-button.stories.ts
@@ -3,10 +3,13 @@ import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './radio-button';
+import './radio-button.js';
+
+const longLabel: string =
+  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.";
 
 const value: InputType = {
   control: {
@@ -39,29 +42,38 @@ const ariaLabel: InputType = {
   },
 };
 
+const labelBoldClass: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const defaultArgTypes: ArgTypes = {
   value,
   checked,
   disabled,
   size,
   'aria-label': ariaLabel,
+  labelBoldClass,
 };
 
 const defaultArgs: Args = {
   value: 'First value',
   checked: false,
   disabled: false,
-  size: size.options[0],
+  size: size.options![0],
   'aria-label': undefined,
+  labelBoldClass: false,
 };
 
-const DefaultTemplate = (args: Args): TemplateResult =>
-  html`<sbb-radio-button ${sbbSpread(args)}>Value</sbb-radio-button>`;
+const DefaultTemplate = ({ labelBoldClass, ...args }: Args): TemplateResult =>
+  html`<sbb-radio-button ${sbbSpread(args)}>
+    ${labelBoldClass ? html`<span class="sbb-text--bold">Value</span>` : 'Value'}
+  </sbb-radio-button>`;
 
-const MultilineLabelTemplate = (args: Args): TemplateResult => html`
+const MultilineLabelTemplate = ({ labelBoldClass, ...args }: Args): TemplateResult => html`
   <sbb-radio-button ${sbbSpread(args)}>
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
-    the industry's standard dummy text ever since the 1500s.
+    ${labelBoldClass ? html`<span class="sbb-text--bold">${longLabel}</span>` : longLabel}
   </sbb-radio-button>
 `;
 
@@ -74,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 = {
@@ -101,12 +113,20 @@ export const MultilineLabel: StoryObj = {
   args: { ...defaultArgs, checked: true },
 };
 
+export const DefaultBold: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, labelBoldClass: true },
+};
+
+export const CheckedBold: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, checked: true, labelBoldClass: true },
+};
+
 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/radio-button/radio-button/radio-button.ts b/src/components/radio-button/radio-button/radio-button.ts
index 6403845907..1827c6b092 100644
--- a/src/components/radio-button/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button/radio-button.ts
@@ -1,28 +1,24 @@
-import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import {
-  hostAttributes,
-  LanguageController,
-  NamedSlotStateController,
-  UpdateScheduler,
-} from '../../core/common-behaviors';
-import { setAttributes } from '../../core/dom';
-import {
-  HandlerRepository,
-  formElementHandlerAspect,
-  EventEmitter,
-  ConnectedAbortController,
-} from '../../core/eventing';
-import { i18nCollapsed, i18nExpanded } from '../../core/i18n';
+  SbbConnectedAbortController,
+  SbbLanguageController,
+  SbbSlotStateController,
+} from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { setOrRemoveAttribute } from '../../core/dom.js';
+import { EventEmitter, formElementHandlerAspect, HandlerRepository } from '../../core/eventing.js';
+import { i18nCollapsed, i18nExpanded } from '../../core/i18n.js';
 import type {
   SbbCheckedStateChange,
   SbbDisabledStateChange,
   SbbStateChange,
-} from '../../core/interfaces';
-import type { SbbSelectionPanelElement } from '../../selection-panel';
-import type { SbbRadioButtonGroupElement } from '../radio-button-group';
+} from '../../core/interfaces.js';
+import { SbbUpdateSchedulerMixin } from '../../core/mixins.js';
+import type { SbbSelectionPanelElement } from '../../selection-panel.js';
+import type { SbbRadioButtonGroupElement } from '../radio-button-group.js';
 
 import style from './radio-button.scss?lit&inline';
 
@@ -44,7 +40,7 @@ export type SbbRadioButtonSize = 's' | 'm';
 @hostAttributes({
   role: 'radio',
 })
-export class SbbRadioButtonElement extends UpdateScheduler(LitElement) {
+export class SbbRadioButtonElement extends SbbUpdateSchedulerMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
     stateChange: 'stateChange',
@@ -132,8 +128,8 @@ export class SbbRadioButtonElement extends UpdateScheduler(LitElement) {
   @state() private _selectionPanelExpandedLabel?: string;
 
   private _selectionPanelElement: SbbSelectionPanelElement | null = null;
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this);
+  private _abort = new SbbConnectedAbortController(this);
+  private _language = new SbbLanguageController(this);
 
   /**
    * @internal
@@ -158,13 +154,15 @@ export class SbbRadioButtonElement extends UpdateScheduler(LitElement) {
 
   private _handleCheckedChange(currentValue: boolean, previousValue: boolean): void {
     if (currentValue !== previousValue) {
+      this.setAttribute('aria-checked', `${currentValue}`);
       this._stateChange.emit({ type: 'checked', checked: currentValue });
-      this._isSelectionPanelInput && this._updateExpandedLabel();
+      this.isSelectionPanelInput && this._updateExpandedLabel();
     }
   }
 
   private _handleDisabledChange(currentValue: boolean, previousValue: boolean): void {
     if (currentValue !== previousValue) {
+      setOrRemoveAttribute(this, 'aria-disabled', currentValue ? 'true' : null);
       this._stateChange.emit({ type: 'disabled', disabled: currentValue });
     }
   }
@@ -190,7 +188,7 @@ export class SbbRadioButtonElement extends UpdateScheduler(LitElement) {
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   public override connectedCallback(): void {
@@ -200,6 +198,7 @@ export class SbbRadioButtonElement extends UpdateScheduler(LitElement) {
     this._selectionPanelElement = this.closest('sbb-selection-panel');
     this._isSelectionPanelInput =
       !!this._selectionPanelElement && !this.closest('sbb-selection-panel [slot="content"]');
+    this.toggleAttribute('data-is-selection-panel-input', this._isSelectionPanelInput);
 
     const signal = this._abort.signal;
     this.addEventListener('click', (e) => this._handleClick(e), { signal });
@@ -218,13 +217,16 @@ export class SbbRadioButtonElement extends UpdateScheduler(LitElement) {
     if (changedProperties.has('disabled')) {
       this._handleDisabledChange(this.disabled, changedProperties.get('disabled')!);
     }
+    if (changedProperties.has('required')) {
+      this.setAttribute('aria-required', `${this.required}`);
+    }
   }
 
   protected override firstUpdated(): void {
     // We need to wait for the selection-panel to be fully initialized
     this.startUpdate();
     setTimeout(() => {
-      this._isSelectionPanelInput && this._updateExpandedLabel();
+      this.isSelectionPanelInput && this._updateExpandedLabel();
       this.completeUpdate();
     });
   }
@@ -252,14 +254,6 @@ export class SbbRadioButtonElement extends UpdateScheduler(LitElement) {
   }
 
   protected override render(): TemplateResult {
-    const attributes = {
-      'aria-checked': this.checked?.toString() ?? 'false',
-      'aria-required': this.required.toString(),
-      'aria-disabled': this.disabled.toString(),
-      'data-is-selection-panel-input': this._isSelectionPanelInput,
-    };
-    setAttributes(this, attributes);
-
     return html`
       <label class="sbb-radio-button">
         <input
@@ -277,7 +271,7 @@ export class SbbRadioButtonElement extends UpdateScheduler(LitElement) {
           ${this._selectionPanelElement ? html`<slot name="suffix"></slot>` : nothing}
         </span>
         ${this._selectionPanelElement ? html`<slot name="subtext"></slot>` : nothing}
-        ${this._isSelectionPanelInput && this._selectionPanelExpandedLabel
+        ${this.isSelectionPanelInput && this._selectionPanelExpandedLabel
           ? html`<span class="sbb-screen-reader-only"> ${this._selectionPanelExpandedLabel} </span>`
           : nothing}
       </label>
diff --git a/src/components/radio-button/radio-button/readme.md b/src/components/radio-button/radio-button/readme.md
index 8a28fac903..aecc3b77f5 100644
--- a/src/components/radio-button/radio-button/readme.md
+++ b/src/components/radio-button/radio-button/readme.md
@@ -38,6 +38,14 @@ The component has two different sizes, which can be changed using the `size` pro
 <sbb-radio-button value="small" size="s">Size</sbb-radio-button>
 ```
 
+The component's label can be displayed in bold using the `sbb-text--bold` class on a wrapper tag:
+
+```html
+<sbb-radio-button value="bold">
+  <span class="sbb-text--bold">Bold label</span>
+</sbb-radio-button>
+```
+
 <!-- Auto Generated Below -->
 
 ## Properties
diff --git a/src/components/screen-reader-only.ts b/src/components/screen-reader-only.ts
new file mode 100644
index 0000000000..67ef83ea28
--- /dev/null
+++ b/src/components/screen-reader-only.ts
@@ -0,0 +1 @@
+export * from './screen-reader-only/screen-reader-only.js';
diff --git a/src/components/screen-reader-only/index.ts b/src/components/screen-reader-only/index.ts
deleted file mode 100644
index 10d0ab25bf..0000000000
--- a/src/components/screen-reader-only/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './screen-reader-only';
diff --git a/src/components/screen-reader-only/screen-reader-only.e2e.ts b/src/components/screen-reader-only/screen-reader-only.e2e.ts
index eeccc2218d..951d07b469 100644
--- a/src/components/screen-reader-only/screen-reader-only.e2e.ts
+++ b/src/components/screen-reader-only/screen-reader-only.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbScreenReaderOnlyElement } from './screen-reader-only';
+import { SbbScreenReaderOnlyElement } from './screen-reader-only.js';
 
 describe(`sbb-screen-reader-only with ${fixture.name}`, () => {
   let element: SbbScreenReaderOnlyElement;
diff --git a/src/components/screen-reader-only/screen-reader-only.spec.ts b/src/components/screen-reader-only/screen-reader-only.spec.ts
index b1fc780c06..99ac7c078b 100644
--- a/src/components/screen-reader-only/screen-reader-only.spec.ts
+++ b/src/components/screen-reader-only/screen-reader-only.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbScreenReaderOnlyElement } from './screen-reader-only';
+import type { SbbScreenReaderOnlyElement } from './screen-reader-only.js';
 
-import './screen-reader-only';
+import './screen-reader-only.js';
 
 describe(`sbb-screen-reader-only`, () => {
   describe('renders', async () => {
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 5bbfac637a..7f15f088e8 100644
--- a/src/components/screen-reader-only/screen-reader-only.stories.ts
+++ b/src/components/screen-reader-only/screen-reader-only.stories.ts
@@ -6,7 +6,7 @@ import { html } from 'lit';
 
 import readme from './readme.md?raw';
 
-import './screen-reader-only';
+import './screen-reader-only.js';
 
 const content: InputType = {
   control: {
@@ -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/screenreader-only/__snapshots__/screenreader-only.spec.snap.js b/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js
deleted file mode 100644
index 97e8aaa322..0000000000
--- a/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/* @web/test-runner snapshot v1 */
-export const snapshots = {};
-
-snapshots["sbb-screenreader-only renders with Light DOM"] = 
-`<sbb-screenreader-only>
-</sbb-screenreader-only>
-`;
-/* end snapshot sbb-screenreader-only renders with Light DOM */
-
-snapshots["sbb-screenreader-only renders with Shadow DOM"] = 
-`<slot>
-</slot>
-`;
-/* end snapshot sbb-screenreader-only renders with Shadow DOM */
-
-snapshots["sbb-screenreader-only renders A11y tree Chrome"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": ""
-}
-</p>
-`;
-/* end snapshot sbb-screenreader-only renders A11y tree Chrome */
-
-snapshots["sbb-screenreader-only renders A11y tree Firefox"] = 
-`<p>
-  {
-  "role": "document",
-  "name": ""
-}
-</p>
-`;
-/* end snapshot sbb-screenreader-only renders A11y tree Firefox */
-
diff --git a/src/components/select.ts b/src/components/select.ts
new file mode 100644
index 0000000000..3673e110b6
--- /dev/null
+++ b/src/components/select.ts
@@ -0,0 +1 @@
+export * from './select/select.js';
diff --git a/src/components/select/__snapshots__/select.spec.snap.js b/src/components/select/__snapshots__/select.spec.snap.js
index 2aad0b1363..ddbb96abcd 100644
--- a/src/components/select/__snapshots__/select.spec.snap.js
+++ b/src/components/select/__snapshots__/select.spec.snap.js
@@ -7,36 +7,33 @@ snapshots["sbb-select renders Chrome-Firefox Dom"] =
   dir="ltr"
 >
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-disable-highlight=""
     data-slot-names="unnamed"
     data-variant="select"
-    id="sbb-option-1"
+    id="sbb-option-0"
     role="option"
     value="1"
   >
     Option 1
   </sbb-option>
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-disable-highlight=""
     data-slot-names="unnamed"
     data-variant="select"
-    id="sbb-option-2"
+    id="sbb-option-1"
     role="option"
     value="2"
   >
     Option 2
   </sbb-option>
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-disable-highlight=""
     data-slot-names="unnamed"
     data-variant="select"
-    id="sbb-option-3"
+    id="sbb-option-2"
     role="option"
     value="3"
   >
@@ -108,45 +105,41 @@ snapshots["sbb-select renders A11y tree Chrome"] =
 
 snapshots["sbb-select renders multiple Chrome-Firefox Dom"] = 
 `<sbb-select
-  data-multiple=""
   data-state="closed"
   dir="ltr"
   multiple=""
 >
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-disable-highlight=""
     data-multiple=""
     data-slot-names="unnamed"
     data-variant="select"
-    id="sbb-option-10"
+    id="sbb-option-9"
     role="option"
     value="1"
   >
     Option 1
   </sbb-option>
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-disable-highlight=""
     data-multiple=""
     data-slot-names="unnamed"
     data-variant="select"
-    id="sbb-option-11"
+    id="sbb-option-10"
     role="option"
     value="2"
   >
     Option 2
   </sbb-option>
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-disable-highlight=""
     data-multiple=""
     data-slot-names="unnamed"
     data-variant="select"
-    id="sbb-option-12"
+    id="sbb-option-11"
     role="option"
     value="3"
   >
@@ -259,36 +252,33 @@ snapshots["sbb-select renders Safari Dom"] =
   role="listbox"
 >
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-disable-highlight=""
     data-slot-names="unnamed"
     data-variant="select"
-    id="sbb-option-1"
+    id="sbb-option-0"
     role="option"
     value="1"
   >
     Option 1
   </sbb-option>
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-disable-highlight=""
     data-slot-names="unnamed"
     data-variant="select"
-    id="sbb-option-2"
+    id="sbb-option-1"
     role="option"
     value="2"
   >
     Option 2
   </sbb-option>
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-disable-highlight=""
     data-slot-names="unnamed"
     data-variant="select"
-    id="sbb-option-3"
+    id="sbb-option-2"
     role="option"
     value="3"
   >
@@ -339,7 +329,6 @@ snapshots["sbb-select renders Safari ShadowDom"] =
 
 snapshots["sbb-select renders multiple Safari Dom"] = 
 `<sbb-select
-  data-multiple=""
   data-state="closed"
   dir="ltr"
   id="sbb-select-3"
@@ -347,39 +336,36 @@ snapshots["sbb-select renders multiple Safari Dom"] =
   role="listbox"
 >
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-disable-highlight=""
     data-multiple=""
     data-slot-names="unnamed"
     data-variant="select"
-    id="sbb-option-7"
+    id="sbb-option-6"
     role="option"
     value="1"
   >
     Option 1
   </sbb-option>
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-disable-highlight=""
     data-multiple=""
     data-slot-names="unnamed"
     data-variant="select"
-    id="sbb-option-8"
+    id="sbb-option-7"
     role="option"
     value="2"
   >
     Option 2
   </sbb-option>
   <sbb-option
-    aria-disabled="false"
     aria-selected="false"
     data-disable-highlight=""
     data-multiple=""
     data-slot-names="unnamed"
     data-variant="select"
-    id="sbb-option-9"
+    id="sbb-option-8"
     role="option"
     value="3"
   >
diff --git a/src/components/select/index.ts b/src/components/select/index.ts
deleted file mode 100644
index c7396734d3..0000000000
--- a/src/components/select/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './select';
diff --git a/src/components/select/readme.md b/src/components/select/readme.md
index 34a49e05ea..42b90e41bd 100644
--- a/src/components/select/readme.md
+++ b/src/components/select/readme.md
@@ -140,9 +140,9 @@ Add the `sbb-disable-animation` class to disable animation and transition effect
 
 ## CSS Properties
 
-| Name                   | Default                      | Description                                                                                                                                                                                           |
-| ---------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-select-z-index` | `var(--sbb-overlay-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-z-index)` with a value of `1000`. |
+| Name                   | Default                              | Description                                                                                                                                                                                                   |
+| ---------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-select-z-index` | `var(--sbb-overlay-default-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`. |
 
 ## Slots
 
diff --git a/src/components/select/select.e2e.ts b/src/components/select/select.e2e.ts
index 768088d77d..5fdf1d505f 100644
--- a/src/components/select/select.e2e.ts
+++ b/src/components/select/select.e2e.ts
@@ -2,11 +2,11 @@ import { aTimeout, assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing';
-import { fixture } from '../core/testing/private';
-import { SbbOptionElement } from '../option';
+import { fixture } from '../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing.js';
+import { SbbOptionElement } from '../option.js';
 
-import { SbbSelectElement } from './select';
+import { SbbSelectElement } from './select.js';
 
 describe(`sbb-select with ${fixture.name}`, () => {
   let element: SbbSelectElement,
@@ -28,7 +28,7 @@ describe(`sbb-select with ${fixture.name}`, () => {
           </sbb-select>
         </div>
       `,
-      { modules: ['./select.ts', '../option/index.ts'] },
+      { modules: ['./select.ts', '../option.ts'] },
     );
     element = root.querySelector<SbbSelectElement>('sbb-select')!;
 
@@ -100,7 +100,7 @@ describe(`sbb-select with ${fixture.name}`, () => {
 
   it("displays joined string if both multiple and value props are set, or placeholder if value doesn't match available options", async () => {
     expect(displayValue).to.have.trimmed.text('Placeholder');
-    element.setAttribute('multiple', '');
+    element.toggleAttribute('multiple', true);
 
     element.value = ['1', '3'];
     await waitForLitRender(element);
@@ -128,7 +128,7 @@ describe(`sbb-select with ${fixture.name}`, () => {
           </sbb-select>
         </div>
       `,
-      { modules: ['./select.ts', '../option/index.ts'] },
+      { modules: ['./select.ts', '../option.ts'] },
     );
     element = root.querySelector<SbbSelectElement>('sbb-select')!;
 
@@ -155,7 +155,7 @@ describe(`sbb-select with ${fixture.name}`, () => {
           </sbb-select>
         </div>
       `,
-      { modules: ['./select.ts', '../option/index.ts'] },
+      { modules: ['./select.ts', '../option.ts'] },
     );
     element = root.querySelector<SbbSelectElement>('sbb-select')!;
     comboBoxElement = root.querySelector('[role="combobox"]')!;
@@ -206,7 +206,7 @@ describe(`sbb-select with ${fixture.name}`, () => {
   });
 
   it('handles selection in multiple', async () => {
-    element.setAttribute('multiple', '');
+    element.toggleAttribute('multiple', true);
     await waitForLitRender(element);
 
     const willOpen = new EventSpy(SbbSelectElement.events.willOpen);
@@ -329,7 +329,7 @@ describe(`sbb-select with ${fixture.name}`, () => {
   });
 
   it('handles keyboard selection in multiple', async () => {
-    element.setAttribute('multiple', '');
+    element.toggleAttribute('multiple', true);
     await waitForLitRender(element);
 
     const didOpen = new EventSpy(SbbSelectElement.events.didOpen);
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
index 5e81bbf686..7c23eb4f49 100644
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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;
 
 // Fixes the gap between the origin and the overlay by creating conjunction
 // corners based on the origin element border radius
@@ -11,7 +10,12 @@
 :host {
   @include sbb.options-panel-overlay-variables;
 
-  --sbb-options-panel-internal-z-index: var(--sbb-select-z-index, var(--sbb-overlay-z-index));
+  --sbb-options-panel-internal-z-index: var(
+    --sbb-select-z-index,
+    var(--sbb-overlay-default-z-index)
+  );
+
+  display: block;
 }
 
 :host([negative]) {
diff --git a/src/components/select/select.spec.ts b/src/components/select/select.spec.ts
index 990a58eb43..a15f0b0db3 100644
--- a/src/components/select/select.spec.ts
+++ b/src/components/select/select.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { isSafari } from '../core/dom';
-import { describeIf } from '../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { isSafari } from '../core/dom.js';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
+import { describeIf } from '../core/testing.js';
 
-import type { SbbSelectElement } from './select';
-import './select';
-import '../option';
+import type { SbbSelectElement } from './select.js';
+import './select.js';
+import '../option.js';
 
 describe(`sbb-select`, () => {
   describe('renders', () => {
diff --git a/src/components/select/select.stories.ts b/src/components/select/select.stories.ts
index c0d04e5561..8f0f9e00f2 100644
--- a/src/components/select/select.stories.ts
+++ b/src/components/select/select.stories.ts
@@ -15,20 +15,16 @@ import { html, nothing } from 'lit';
 import type { StyleInfo } from 'lit/directives/style-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready';
-import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position';
-import { sbbSpread } from '../core/dom';
-import type { SbbFormErrorElement } from '../form-error';
-import { SbbOptionElement } from '../option';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready.js';
+import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position.js';
+import type { SbbFormErrorElement } from '../form-error.js';
+import { SbbOptionElement } from '../option.js';
 
 import readme from './readme.md?raw';
-import { SbbSelectElement } from './select';
-import '../form-error';
-import '../form-field';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import { SbbSelectElement } from './select.js';
+import '../form-error.js';
+import '../form-field.js';
 
 // Story interaction executed after the story renders
 const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
@@ -217,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.';
@@ -483,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,
@@ -493,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,
@@ -608,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: [
@@ -634,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 404987cbd5..f21f913768 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -1,29 +1,26 @@
-import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
-import { getNextElementIndex, assignId } from '../core/a11y';
-import {
-  hostAttributes,
-  SbbDisabledMixin,
-  SbbNegativeMixin,
-  UpdateScheduler,
-} from '../core/common-behaviors';
-import {
-  isSafari,
-  isValidAttribute,
-  getDocumentWritingMode,
-  setAttribute,
-  isNextjs,
-} from '../core/dom';
-import { ConnectedAbortController, EventEmitter } from '../core/eventing';
-import type { SbbOverlayState } from '../core/overlay';
-import { setOverlayPosition, isEventOnElement, overlayGapFixCorners } from '../core/overlay';
-import type { SbbOptionElement, SbbOptGroupElement } from '../option';
+import { getNextElementIndex } from '../core/a11y.js';
+import { SbbConnectedAbortController } from '../core/controllers.js';
+import { hostAttributes } from '../core/decorators.js';
+import { getDocumentWritingMode, isNextjs, isSafari } from '../core/dom.js';
+import { EventEmitter } from '../core/eventing.js';
+import type { SbbOpenedClosedState } from '../core/interfaces.js';
+import { SbbDisabledMixin, SbbNegativeMixin, SbbUpdateSchedulerMixin } from '../core/mixins.js';
+import { isEventOnElement, overlayGapFixCorners, setOverlayPosition } from '../core/overlay.js';
+import type { SbbOptGroupElement, SbbOptionElement } from '../option.js';
 
 import style from './select.scss?lit&inline';
 
+/**
+ * On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
+ * On the other hand, JAWS and NVDA need the role to be an "immediate parent" to the options, or else optgroups won't work.
+ */
+const ariaRoleOnHost = isSafari();
+
 let nextId = 0;
 
 export interface SelectChange {
@@ -42,15 +39,16 @@ export interface SelectChange {
  * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-select` is opened.
  * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-select` begins the closing transition. Can be canceled.
  * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-select` is closed.
- * @cssprop [--sbb-select-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-select-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
- * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
  */
 @customElement('sbb-select')
 @hostAttributes({
   dir: getDocumentWritingMode(),
+  role: ariaRoleOnHost ? 'listbox' : null,
 })
-export class SbbSelectElement extends UpdateScheduler(
+export class SbbSelectElement extends SbbUpdateSchedulerMixin(
   SbbDisabledMixin(SbbNegativeMixin(LitElement)),
 ) {
   public static override styles: CSSResultGroup = style;
@@ -72,7 +70,7 @@ export class SbbSelectElement extends UpdateScheduler(
   @property() public placeholder?: string;
 
   /** Whether the select allows for multiple selection. */
-  @property({ type: Boolean }) public multiple = false;
+  @property({ type: Boolean, reflect: true }) public multiple = false;
 
   /** Whether the select is required. */
   @property({ reflect: true, type: Boolean }) public required = false;
@@ -81,7 +79,12 @@ export class SbbSelectElement extends UpdateScheduler(
   @property({ type: Boolean }) public readonly = false;
 
   /** The state of the select. */
-  @state() private _state: SbbOverlayState = 'closed';
+  private set _state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
+  }
+  private get _state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
+  }
 
   /** The value displayed by the component. */
   @state() private _displayValue: string | null = null;
@@ -132,13 +135,7 @@ export class SbbSelectElement extends UpdateScheduler(
   private _searchString = '';
   private _didLoad = false;
   private _isPointerDownEventOnMenu: boolean = false;
-  private _abort = new ConnectedAbortController(this);
-
-  /**
-   * On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
-   * On the other hand, JAWS and NVDA need the role to be an "immediate parent" to the options, or else optgroups won't work.
-   */
-  private _ariaRoleOnHost = isSafari();
+  private _abort = new SbbConnectedAbortController(this);
 
   /**
    * The 'combobox' input element
@@ -155,7 +152,7 @@ export class SbbSelectElement extends UpdateScheduler(
 
   private get _filteredOptions(): SbbOptionElement[] {
     return this._options.filter(
-      (opt: SbbOptionElement) => !opt.disabled && !isValidAttribute(opt, 'data-group-disabled'),
+      (opt: SbbOptionElement) => !opt.disabled && !opt.hasAttribute('data-group-disabled'),
     );
   }
 
@@ -269,13 +266,20 @@ export class SbbSelectElement extends UpdateScheduler(
 
   public override connectedCallback(): void {
     super.connectedCallback();
+
+    if (ariaRoleOnHost) {
+      this.id ||= this._overlayId;
+    }
+
+    this._state ||= 'closed';
+
     const signal = this._abort.signal;
     const formField = this.closest?.('sbb-form-field') ?? this.closest?.('[data-form-field]');
 
     if (formField) {
-      this.negative = isValidAttribute(formField, 'negative');
+      this.negative = formField.hasAttribute('negative');
     }
-    this._syncNegative();
+    this._syncProperties();
 
     if (this._didLoad) {
       this._setupOrigin();
@@ -304,8 +308,8 @@ export class SbbSelectElement extends UpdateScheduler(
     if (changedProperties.has('value')) {
       this._onValueChanged(this.value!);
     }
-    if (changedProperties.has('negative')) {
-      this._syncNegative();
+    if (changedProperties.has('negative') || changedProperties.has('multiple')) {
+      this._syncProperties();
     }
   }
 
@@ -315,14 +319,15 @@ export class SbbSelectElement extends UpdateScheduler(
     this._openPanelEventsController?.abort();
   }
 
-  private _syncNegative(): void {
+  private _syncProperties(): void {
     this.querySelectorAll?.('sbb-divider').forEach((element) => (element.negative = this.negative));
 
     this.querySelectorAll?.<SbbOptionElement | SbbOptGroupElement>(
       'sbb-option, sbb-optgroup',
-    ).forEach((element: SbbOptionElement | SbbOptGroupElement) =>
-      element.toggleAttribute('data-negative', this.negative),
-    );
+    ).forEach((element: SbbOptionElement | SbbOptGroupElement) => {
+      element.toggleAttribute('data-negative', this.negative);
+      element.toggleAttribute('data-multiple', this.multiple);
+    });
   }
 
   private _setupSelect(): void {
@@ -694,11 +699,6 @@ export class SbbSelectElement extends UpdateScheduler(
   }
 
   protected override render(): TemplateResult {
-    setAttribute(this, 'data-state', this._state);
-    setAttribute(this, 'data-multiple', this.multiple);
-    setAttribute(this, 'role', this._ariaRoleOnHost ? 'listbox' : null);
-    this._ariaRoleOnHost && assignId(() => this._overlayId)(this);
-
     return html`
       <!-- This element is visually hidden and will be appended to the light DOM to allow screen
       readers to work properly -->
@@ -731,14 +731,13 @@ export class SbbSelectElement extends UpdateScheduler(
         <div
           @animationend=${this._onAnimationEnd}
           class="sbb-select__panel"
-          ?data-open=${this._state === 'opened' || this._state === 'opening'}
           ${ref((dialogRef) => (this._overlay = dialogRef as HTMLElement))}
         >
           <div class="sbb-select__wrapper">
             <div
-              id=${!this._ariaRoleOnHost ? this._overlayId : nothing}
+              id=${!ariaRoleOnHost ? this._overlayId : nothing}
               class="sbb-select__options"
-              role=${!this._ariaRoleOnHost ? 'listbox' : nothing}
+              role=${!ariaRoleOnHost ? 'listbox' : nothing}
               ?aria-multiselectable=${this.multiple}
               ${ref((containerRef) => (this._optionContainer = containerRef as HTMLElement))}
             >
diff --git a/src/components/selection-panel.ts b/src/components/selection-panel.ts
new file mode 100644
index 0000000000..61c0949e27
--- /dev/null
+++ b/src/components/selection-panel.ts
@@ -0,0 +1 @@
+export * from './selection-panel/selection-panel.js';
diff --git a/src/components/selection-panel/index.ts b/src/components/selection-panel/index.ts
deleted file mode 100644
index f00450fb75..0000000000
--- a/src/components/selection-panel/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './selection-panel';
diff --git a/src/components/selection-panel/selection-panel.e2e.ts b/src/components/selection-panel/selection-panel.e2e.ts
index e017bf5580..b1dce4e224 100644
--- a/src/components/selection-panel/selection-panel.e2e.ts
+++ b/src/components/selection-panel/selection-panel.e2e.ts
@@ -3,15 +3,15 @@ import { sendKeys } from '@web/test-runner-commands';
 import type { TemplateResult } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import type { SbbCheckboxGroupElement } from '../checkbox';
-import { SbbCheckboxElement } from '../checkbox';
-import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
-import type { SbbRadioButtonGroupElement } from '../radio-button';
-import { SbbRadioButtonElement } from '../radio-button';
+import type { SbbCheckboxGroupElement } from '../checkbox.js';
+import { SbbCheckboxElement } from '../checkbox.js';
+import { fixture } from '../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing.js';
+import type { SbbRadioButtonGroupElement } from '../radio-button.js';
+import { SbbRadioButtonElement } from '../radio-button.js';
 
-import { SbbSelectionPanelElement } from './selection-panel';
-import '../link/block-link-button';
+import { SbbSelectionPanelElement } from './selection-panel.js';
+import '../link/block-link-button.js';
 
 describe(`sbb-selection-panel with ${fixture.name}`, () => {
   let elements: SbbSelectionPanelElement[];
@@ -134,7 +134,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
       didOpenEventSpy = new EventSpy(SbbSelectionPanelElement.events.didOpen);
 
       wrapper = await fixture(getPageContent('radio-button'), {
-        modules: ['./selection-panel.ts', '../button/index.ts', '../radio-button/index.ts'],
+        modules: ['./selection-panel.ts', '../button.ts', '../radio-button.ts'],
       });
       elements = Array.from(wrapper.querySelectorAll('sbb-selection-panel'));
       firstPanel = wrapper.querySelector<SbbSelectionPanelElement>('#sbb-selection-panel-1')!;
@@ -276,7 +276,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
           </sbb-radio-button-group>
         `,
         {
-          modules: ['../radio-button/index.ts', './selection-panel.ts', '../radio-button/index.ts'],
+          modules: ['../radio-button.ts', './selection-panel.ts', '../radio-button.ts'],
         },
       );
       const firstInputNoContent =
@@ -358,7 +358,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
           </sbb-radio-button-group>
         `,
         {
-          modules: ['../radio-button/index.ts', './selection-panel.ts', '../radio-button/index.ts'],
+          modules: ['../radio-button.ts', './selection-panel.ts', '../radio-button.ts'],
         },
       );
       panel1 = nestedElement.querySelector<SbbSelectionPanelElement>('#panel1')!;
@@ -409,7 +409,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
     });
 
     it('should mark only outer group children as disabled', async () => {
-      nestedElement.setAttribute('disabled', '');
+      nestedElement.toggleAttribute('disabled', true);
       await waitForLitRender(nestedElement);
 
       const radioButtons = Array.from(nestedElement.querySelectorAll('sbb-radio-button'));
@@ -488,7 +488,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
           </div>
         `,
         {
-          modules: ['./selection-panel.ts', '../radio-button/index.ts', '../radio-button/index.ts'],
+          modules: ['./selection-panel.ts', '../radio-button.ts', '../radio-button.ts'],
         },
       );
 
@@ -533,7 +533,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
       didCloseEventSpy = new EventSpy(SbbSelectionPanelElement.events.didClose);
 
       wrapper = await fixture(getPageContent('checkbox'), {
-        modules: ['./selection-panel.ts', '../button/index.ts', '../checkbox/index.ts'],
+        modules: ['./selection-panel.ts', '../button.ts', '../checkbox.ts'],
       });
       elements = Array.from(wrapper.querySelectorAll('sbb-selection-panel'));
       firstPanel = wrapper.querySelector<SbbSelectionPanelElement>('#sbb-selection-panel-1')!;
@@ -686,7 +686,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
             </sbb-selection-panel>
           </sbb-checkbox-group>
         `,
-        { modules: ['../checkbox/index.ts', './selection-panel.ts', '../checkbox/index.ts'] },
+        { modules: ['../checkbox.ts', './selection-panel.ts', '../checkbox.ts'] },
       );
     });
 
@@ -725,7 +725,7 @@ describe(`sbb-selection-panel with ${fixture.name}`, () => {
     });
 
     it('should mark only outer group children as disabled', async () => {
-      nestedElement.setAttribute('disabled', '');
+      nestedElement.toggleAttribute('disabled', true);
       await waitForLitRender(nestedElement);
 
       const checkboxes = Array.from(nestedElement.querySelectorAll('sbb-checkbox'));
diff --git a/src/components/selection-panel/selection-panel.scss b/src/components/selection-panel/selection-panel.scss
index 10abeb0336..9970676f33 100644
--- a/src/components/selection-panel/selection-panel.scss
+++ b/src/components/selection-panel/selection-panel.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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;
 
 // Open/Close animation vars
 $open-anim-rows-from: 0fr;
diff --git a/src/components/selection-panel/selection-panel.spec.ts b/src/components/selection-panel/selection-panel.spec.ts
index 2560f98ac8..a308bbcc96 100644
--- a/src/components/selection-panel/selection-panel.spec.ts
+++ b/src/components/selection-panel/selection-panel.spec.ts
@@ -1,12 +1,12 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbSelectionPanelElement } from './selection-panel';
-import './selection-panel';
-import '../card/card-badge';
-import '../checkbox';
+import type { SbbSelectionPanelElement } from './selection-panel.js';
+import './selection-panel.js';
+import '../card/card-badge.js';
+import '../checkbox.js';
 
 describe(`sbb-selection-panel`, () => {
   let element: SbbSelectionPanelElement;
diff --git a/src/components/selection-panel/selection-panel.stories.ts b/src/components/selection-panel/selection-panel.stories.ts
index b37e5ccf77..3a4e7617da 100644
--- a/src/components/selection-panel/selection-panel.stories.ts
+++ b/src/components/selection-panel/selection-panel.stories.ts
@@ -6,21 +6,24 @@ import { html } from 'lit';
 import type { StyleInfo } from 'lit/directives/style-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../core/dom';
-import type { SbbFormErrorElement } from '../form-error';
-import type { SbbRadioButtonGroupElement, SbbRadioButtonGroupEventDetail } from '../radio-button';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import type { SbbFormErrorElement } from '../form-error.js';
+import type {
+  SbbRadioButtonGroupElement,
+  SbbRadioButtonGroupEventDetail,
+} from '../radio-button.js';
 
 import readme from './readme.md?raw';
-import { SbbSelectionPanelElement } from './selection-panel';
-import '../card';
-import '../checkbox';
-import '../divider';
-import '../form-error';
-import '../icon';
-import '../link/block-link-button';
-import '../radio-button';
-import '../popover';
-import '../title';
+import { SbbSelectionPanelElement } from './selection-panel.js';
+import '../card.js';
+import '../checkbox.js';
+import '../divider.js';
+import '../form-error.js';
+import '../icon.js';
+import '../link/block-link-button.js';
+import '../radio-button.js';
+import '../popover.js';
+import '../title.js';
 
 const color: InputType = {
   control: {
@@ -68,7 +71,7 @@ const basicArgTypes: ArgTypes = {
 };
 
 const basicArgs: Args = {
-  color: color.options[0],
+  color: color.options![0],
   'force-open': false,
   borderless: false,
   checkedInput: false,
@@ -579,7 +582,7 @@ export const WithCheckboxGroupMilk: StoryObj = {
   argTypes: basicArgTypes,
   args: {
     ...basicArgs,
-    color: color.options[1],
+    color: color.options![1],
     checkedInput: true,
     disabledInput: true,
   },
@@ -590,7 +593,7 @@ export const WithRadioButtonGroupMilk: StoryObj = {
   argTypes: basicArgTypes,
   args: {
     ...basicArgs,
-    color: color.options[1],
+    color: color.options![1],
     checkedInput: true,
     disabledInput: true,
   },
@@ -623,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,
@@ -635,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,
@@ -699,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: {
@@ -713,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 3d538c1500..10b694ff14 100644
--- a/src/components/selection-panel/selection-panel.ts
+++ b/src/components/selection-panel/selection-panel.ts
@@ -2,15 +2,15 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import type { SbbCheckboxElement } from '../checkbox';
-import { NamedSlotStateController } from '../core/common-behaviors';
-import { setAttribute } from '../core/dom';
-import { EventEmitter, ConnectedAbortController } from '../core/eventing';
-import type { SbbStateChange } from '../core/interfaces';
-import type { SbbRadioButtonElement } from '../radio-button';
+import type { SbbCheckboxElement } from '../checkbox.js';
+import { SbbConnectedAbortController, SbbSlotStateController } from '../core/controllers.js';
+import { EventEmitter } from '../core/eventing.js';
+import type { SbbOpenedClosedState, SbbStateChange } from '../core/interfaces.js';
+import type { SbbRadioButtonElement } from '../radio-button.js';
 
 import style from './selection-panel.scss?lit&inline';
-import '../divider';
+
+import '../divider.js';
 
 /**
  * It displays an expandable panel connected to a `sbb-checkbox` or to a `sbb-radio-button`.
@@ -43,13 +43,26 @@ export class SbbSelectionPanelElement extends LitElement {
   @property({ reflect: true, type: Boolean }) public borderless = false;
 
   /** The state of the selection panel. */
-  @state() private _state: 'closed' | 'opening' | 'opened' | 'closing' = 'closed';
+  @state()
+  private set _state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
+  }
+  private get _state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
+  }
 
   /** Whether the selection panel is checked. */
-  @state() private _checked = false;
+  private set _checked(checked: boolean) {
+    this.toggleAttribute('data-checked', checked);
+  }
+  private get _checked(): boolean {
+    return this.hasAttribute('data-checked');
+  }
 
   /** Whether the selection panel is disabled. */
-  @state() private _disabled = false;
+  private set _disabled(disabled: boolean) {
+    this.toggleAttribute('data-disabled', disabled);
+  }
 
   /** Emits whenever the content section starts the opening transition. */
   private _willOpen: EventEmitter<void> = new EventEmitter(
@@ -75,7 +88,7 @@ export class SbbSelectionPanelElement extends LitElement {
     SbbSelectionPanelElement.events.didClose,
   );
 
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
   private _initialized: boolean = false;
 
   /**
@@ -89,11 +102,12 @@ export class SbbSelectionPanelElement extends LitElement {
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   public override connectedCallback(): void {
     super.connectedCallback();
+    this._state ||= 'closed';
     const signal = this._abort.signal;
     this.addEventListener('stateChange', this._onInputStateChange.bind(this), { signal });
     this.addEventListener('checkboxLoaded', this._initFromInput.bind(this), { signal });
@@ -182,10 +196,6 @@ export class SbbSelectionPanelElement extends LitElement {
   }
 
   protected override render(): TemplateResult {
-    setAttribute(this, 'data-state', this._state);
-    setAttribute(this, 'data-checked', this._checked);
-    setAttribute(this, 'data-disabled', this._disabled);
-
     return html`
       <div class="sbb-selection-panel">
         <div class="sbb-selection-panel__badge">
diff --git a/src/components/signet.ts b/src/components/signet.ts
new file mode 100644
index 0000000000..4056f9a525
--- /dev/null
+++ b/src/components/signet.ts
@@ -0,0 +1 @@
+export * from './signet/signet.js';
diff --git a/src/components/signet/index.ts b/src/components/signet/index.ts
deleted file mode 100644
index 02f60804f9..0000000000
--- a/src/components/signet/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './signet';
diff --git a/src/components/signet/signet.scss b/src/components/signet/signet.scss
index 9f154d4034..bd7071e46a 100644
--- a/src/components/signet/signet.scss
+++ b/src/components/signet/signet.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-signet-background-color: var(--sbb-color-red);
@@ -14,6 +13,8 @@
     --sbb-signet-background-color: ButtonText !important;
     --sbb-signet-icon-color: Canvas !important;
   }
+
+  display: block;
 }
 
 :host([protective-room='minimal']) {
diff --git a/src/components/signet/signet.stories.ts b/src/components/signet/signet.stories.ts
index 23f0ab6110..19a7ac810b 100644
--- a/src/components/signet/signet.stories.ts
+++ b/src/components/signet/signet.stories.ts
@@ -3,10 +3,10 @@ import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './signet';
+import './signet.js';
 
 const Template = (args: Args): TemplateResult => html`<sbb-signet ${sbbSpread(args)}></sbb-signet>`;
 
@@ -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/signet/signet.ts b/src/components/signet/signet.ts
index 4eeef69055..0fbb72c751 100644
--- a/src/components/signet/signet.ts
+++ b/src/components/signet/signet.ts
@@ -2,7 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { SbbProtectiveRoom } from '../core/interfaces';
+import type { SbbProtectiveRoom } from '../core/interfaces.js';
 
 import style from './signet.scss?lit&inline';
 
diff --git a/src/components/skiplink-list.ts b/src/components/skiplink-list.ts
new file mode 100644
index 0000000000..df8d6838b6
--- /dev/null
+++ b/src/components/skiplink-list.ts
@@ -0,0 +1 @@
+export * from './skiplink-list/skiplink-list.js';
diff --git a/src/components/skiplink-list/index.ts b/src/components/skiplink-list/index.ts
deleted file mode 100644
index 19535bbb77..0000000000
--- a/src/components/skiplink-list/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './skiplink-list';
diff --git a/src/components/skiplink-list/readme.md b/src/components/skiplink-list/readme.md
index e593df9dd5..18e9268e69 100644
--- a/src/components/skiplink-list/readme.md
+++ b/src/components/skiplink-list/readme.md
@@ -25,9 +25,9 @@ and it can be set using the `title-content` property.
 
 ## CSS Properties
 
-| Name                          | Default                      | Description                                                                                                                                                                                           |
-| ----------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-skiplink-list-z-index` | `var(--sbb-overlay-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-z-index)` with a value of `1000`. |
+| Name                          | Default                              | Description                                                                                                                                                                                                   |
+| ----------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-skiplink-list-z-index` | `var(--sbb-overlay-default-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`. |
 
 ## Slots
 
diff --git a/src/components/skiplink-list/skiplink-list.e2e.ts b/src/components/skiplink-list/skiplink-list.e2e.ts
index 46481d0e99..5c3175c095 100644
--- a/src/components/skiplink-list/skiplink-list.e2e.ts
+++ b/src/components/skiplink-list/skiplink-list.e2e.ts
@@ -1,13 +1,13 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
-import type { SbbBlockLinkElement } from '../link';
+import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
+import type { SbbBlockLinkElement } from '../link.js';
 
-import { SbbSkiplinkListElement } from './skiplink-list';
+import { SbbSkiplinkListElement } from './skiplink-list.js';
 
-import '../link/block-link';
+import '../link/block-link.js';
 
 describe(`sbb-skiplink-list with ${fixture.name}`, () => {
   let element: SbbSkiplinkListElement;
@@ -22,7 +22,7 @@ describe(`sbb-skiplink-list with ${fixture.name}`, () => {
         </sbb-skiplink-list>
         <button id="button">Focus me</button>
       `,
-      { modules: ['./skiplink-list.ts', '../link/index.ts'] },
+      { modules: ['./skiplink-list.ts', '../link.ts'] },
     );
   });
 
diff --git a/src/components/skiplink-list/skiplink-list.scss b/src/components/skiplink-list/skiplink-list.scss
index 8ce4519aa5..40ae6893ab 100644
--- a/src/components/skiplink-list/skiplink-list.scss
+++ b/src/components/skiplink-list/skiplink-list.scss
@@ -1,21 +1,22 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-skiplink-list-height: 0;
   --sbb-skiplink-list-overflow: hidden;
   --sbb-skiplink-list-background: transparent;
   --sbb-skiplink-list-border: unset;
+
+  display: block;
 }
 
 .sbb-skiplink-list__wrapper {
   position: fixed;
   inset-block-start: var(--sbb-spacing-fixed-4x);
   inset-inline-start: var(--sbb-spacing-fixed-4x);
-  z-index: calc(var(--sbb-skiplink-list-z-index, var(--sbb-overlay-z-index)) + 1);
+  z-index: calc(var(--sbb-skiplink-list-z-index, var(--sbb-overlay-default-z-index)) + 1);
 }
 
 .sbb-skiplink-list {
diff --git a/src/components/skiplink-list/skiplink-list.spec.ts b/src/components/skiplink-list/skiplink-list.spec.ts
index f8f56c3432..f1f9351ec8 100644
--- a/src/components/skiplink-list/skiplink-list.spec.ts
+++ b/src/components/skiplink-list/skiplink-list.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbSkiplinkListElement } from './skiplink-list';
-import './skiplink-list';
-import '../link/block-link';
+import type { SbbSkiplinkListElement } from './skiplink-list.js';
+import './skiplink-list.js';
+import '../link/block-link.js';
 
 describe(`sbb-skiplink-list`, () => {
   describe('renders', () => {
diff --git a/src/components/skiplink-list/skiplink-list.stories.ts b/src/components/skiplink-list/skiplink-list.stories.ts
index b986394d5e..cbe3f4bd05 100644
--- a/src/components/skiplink-list/skiplink-list.stories.ts
+++ b/src/components/skiplink-list/skiplink-list.stories.ts
@@ -1,18 +1,18 @@
 import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready';
-import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position';
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready.js';
+import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position.js';
 
 import readme from './readme.md?raw';
 
-import './skiplink-list';
-import '../link/block-link';
+import './skiplink-list.js';
+import '../link/block-link.js';
 
 const titleContent: InputType = {
   control: {
@@ -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/skiplink-list/skiplink-list.ts b/src/components/skiplink-list/skiplink-list.ts
index cac0c89521..96f479e986 100644
--- a/src/components/skiplink-list/skiplink-list.ts
+++ b/src/components/skiplink-list/skiplink-list.ts
@@ -8,25 +8,22 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-  NamedSlotStateController,
-  SbbNamedSlotListMixin,
-  type WithListChildren,
-} from '../core/common-behaviors';
-import type { SbbBlockLinkElement, SbbBlockLinkButtonElement } from '../link';
-import type { SbbTitleLevel } from '../title';
+import { SbbSlotStateController } from '../core/controllers.js';
+import { SbbNamedSlotListMixin, type WithListChildren } from '../core/mixins.js';
+import type { SbbBlockLinkButtonElement, SbbBlockLinkElement } from '../link.js';
+import type { SbbTitleLevel } from '../title.js';
 
 import style from './skiplink-list.scss?lit&inline';
 
-import '../title';
+import '../title.js';
 
 /**
  * It displays a list of `sbb-block-link`/`sbb-block-link-button` which are visible only when focused.
  *
  * @slot - Use the unnamed slot to add `sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`.
- * @cssprop [--sbb-skiplink-list-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-skiplink-list-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
- * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
  */
 @customElement('sbb-skiplink-list')
 export class SbbSkiplinkListElement extends SbbNamedSlotListMixin<
@@ -44,7 +41,7 @@ export class SbbSkiplinkListElement extends SbbNamedSlotListMixin<
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
diff --git a/src/components/slider.ts b/src/components/slider.ts
new file mode 100644
index 0000000000..9f819261e6
--- /dev/null
+++ b/src/components/slider.ts
@@ -0,0 +1 @@
+export * from './slider/slider.js';
diff --git a/src/components/slider/__snapshots__/slider.spec.snap.js b/src/components/slider/__snapshots__/slider.spec.snap.js
index fc23b00126..dc49791c3a 100644
--- a/src/components/slider/__snapshots__/slider.spec.snap.js
+++ b/src/components/slider/__snapshots__/slider.spec.snap.js
@@ -1,7 +1,91 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-slider renders"] = 
+snapshots["sbb-slider should render DOM"] = 
+`<sbb-slider
+  aria-valuemax="100"
+  aria-valuemin="0"
+  aria-valuenow="1"
+  name=""
+  role="slider"
+  tabindex="0"
+  value="1"
+>
+</sbb-slider>
+`;
+/* end snapshot sbb-slider should render DOM */
+
+snapshots["sbb-slider should render Shadow DOM"] = 
+`<div class="sbb-slider__height-container">
+  <div class="sbb-slider__wrapper">
+    <slot name="prefix">
+    </slot>
+    <div
+      class="sbb-slider__container"
+      style="--sbb-slider-value-fraction:0.01;"
+    >
+      <input
+        class="sbb-slider__range-input"
+        max="100"
+        min="0"
+        tabindex="-1"
+        type="range"
+        value="1"
+      >
+      <div class="sbb-slider__line">
+        <div class="sbb-slider__selected-line">
+        </div>
+      </div>
+      <div class="sbb-slider__knob">
+      </div>
+    </div>
+    <slot name="suffix">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-slider should render Shadow DOM */
+
+snapshots["sbb-slider should render A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "slider",
+      "name": "",
+      "valuetext": "",
+      "valuemin": 0,
+      "valuemax": 100,
+      "orientation": "horizontal",
+      "value": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-slider should render A11y tree Chrome */
+
+snapshots["sbb-slider should render with properties DOM"] = 
+`<sbb-slider
+  aria-valuemax="500"
+  aria-valuemin="0"
+  aria-valuenow="100"
+  end-icon="walk-fast-small"
+  max="500"
+  min="0"
+  name=""
+  role="slider"
+  start-icon="walk-slow-small"
+  tabindex="0"
+  value="100"
+>
+</sbb-slider>
+`;
+/* end snapshot sbb-slider should render with properties DOM */
+
+snapshots["sbb-slider should render with properties Shadow DOM"] = 
 `<div class="sbb-slider__height-container">
   <div class="sbb-slider__wrapper">
     <slot name="prefix">
@@ -24,7 +108,6 @@ snapshots["sbb-slider renders"] =
         tabindex="-1"
         type="range"
         value="100"
-        valueasnumber="100"
       >
       <div class="sbb-slider__line">
         <div class="sbb-slider__selected-line">
@@ -45,25 +128,90 @@ snapshots["sbb-slider renders"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-slider renders */
+/* end snapshot sbb-slider should render with properties Shadow DOM */
+
+snapshots["sbb-slider should render A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "slider",
+      "name": "",
+      "valuetext": "1",
+      "value": "1"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-slider should render A11y tree Firefox */
+
+snapshots["sbb-slider should render with properties A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "slider",
+      "name": "",
+      "valuetext": "",
+      "valuemin": 0,
+      "valuemax": 500,
+      "orientation": "horizontal",
+      "value": 100
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-slider should render with properties A11y tree Chrome */
+
+snapshots["sbb-slider should render disabled DOM"] = 
+`<sbb-slider
+  aria-disabled="true"
+  aria-valuemax="500"
+  aria-valuemin="0"
+  aria-valuenow="100"
+  disabled=""
+  end-icon="walk-fast-small"
+  max="500"
+  min="0"
+  name=""
+  role="slider"
+  start-icon="walk-slow-small"
+  value="100"
+>
+</sbb-slider>
+`;
+/* end snapshot sbb-slider should render disabled DOM */
 
-snapshots["sbb-slider renders with no icons and default min/max"] = 
+snapshots["sbb-slider should render disabled Shadow DOM"] = 
 `<div class="sbb-slider__height-container">
   <div class="sbb-slider__wrapper">
     <slot name="prefix">
+      <sbb-icon
+        aria-hidden="true"
+        data-namespace="default"
+        name="walk-slow-small"
+        role="img"
+      >
+      </sbb-icon>
     </slot>
     <div
       class="sbb-slider__container"
-      style="--sbb-slider-value-fraction:0.01;"
+      style="--sbb-slider-value-fraction:0.2;"
     >
       <input
         class="sbb-slider__range-input"
-        max="100"
+        disabled=""
+        max="500"
         min="0"
         tabindex="-1"
         type="range"
-        value="1"
-        valueasnumber="1"
+        value="100"
       >
       <div class="sbb-slider__line">
         <div class="sbb-slider__selected-line">
@@ -73,13 +221,38 @@ snapshots["sbb-slider renders with no icons and default min/max"] =
       </div>
     </div>
     <slot name="suffix">
+      <sbb-icon
+        aria-hidden="true"
+        data-namespace="default"
+        name="walk-fast-small"
+        role="img"
+      >
+      </sbb-icon>
     </slot>
   </div>
 </div>
 `;
-/* end snapshot sbb-slider renders with no icons and default min/max */
+/* end snapshot sbb-slider should render disabled Shadow DOM */
 
-snapshots["sbb-slider A11y tree Chrome"] = 
+snapshots["sbb-slider should render with properties A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "slider",
+      "name": "",
+      "valuetext": "100",
+      "value": "100"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-slider should render with properties A11y tree Firefox */
+
+snapshots["sbb-slider should render disabled A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -89,18 +262,125 @@ snapshots["sbb-slider A11y tree Chrome"] =
       "role": "slider",
       "name": "",
       "valuetext": "",
+      "disabled": true,
       "valuemin": 0,
-      "valuemax": 100,
+      "valuemax": 500,
       "orientation": "horizontal",
-      "value": 1
+      "value": 100
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-slider should render disabled A11y tree Chrome */
+
+snapshots["sbb-slider should render readonly DOM"] = 
+`<sbb-slider
+  aria-readonly="true"
+  aria-valuemax="500"
+  aria-valuemin="0"
+  aria-valuenow="100"
+  end-icon="walk-fast-small"
+  max="500"
+  min="0"
+  name=""
+  readonly=""
+  role="slider"
+  start-icon="walk-slow-small"
+  tabindex="0"
+  value="100"
+>
+</sbb-slider>
+`;
+/* end snapshot sbb-slider should render readonly DOM */
+
+snapshots["sbb-slider should render readonly Shadow DOM"] = 
+`<div class="sbb-slider__height-container">
+  <div class="sbb-slider__wrapper">
+    <slot name="prefix">
+      <sbb-icon
+        aria-hidden="true"
+        data-namespace="default"
+        name="walk-slow-small"
+        role="img"
+      >
+      </sbb-icon>
+    </slot>
+    <div
+      class="sbb-slider__container"
+      style="--sbb-slider-value-fraction:0.2;"
+    >
+      <input
+        class="sbb-slider__range-input"
+        disabled=""
+        max="500"
+        min="0"
+        tabindex="-1"
+        type="range"
+        value="100"
+      >
+      <div class="sbb-slider__line">
+        <div class="sbb-slider__selected-line">
+        </div>
+      </div>
+      <div class="sbb-slider__knob">
+      </div>
+    </div>
+    <slot name="suffix">
+      <sbb-icon
+        aria-hidden="true"
+        data-namespace="default"
+        name="walk-fast-small"
+        role="img"
+      >
+      </sbb-icon>
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-slider should render readonly Shadow DOM */
+
+snapshots["sbb-slider should render disabled A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "slider",
+      "name": "",
+      "valuetext": "100",
+      "disabled": true,
+      "value": "100"
     }
   ]
 }
 </p>
 `;
-/* end snapshot sbb-slider A11y tree Chrome */
+/* end snapshot sbb-slider should render disabled A11y tree Firefox */
 
-snapshots["sbb-slider A11y tree Firefox"] = 
+snapshots["sbb-slider should render readonly A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "slider",
+      "name": "",
+      "valuetext": "",
+      "valuemin": 0,
+      "valuemax": 500,
+      "orientation": "horizontal",
+      "value": 100
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-slider should render readonly A11y tree Chrome */
+
+snapshots["sbb-slider should render readonly A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -109,12 +389,12 @@ snapshots["sbb-slider A11y tree Firefox"] =
     {
       "role": "slider",
       "name": "",
-      "valuetext": "1",
-      "value": "1"
+      "valuetext": "100",
+      "value": "100"
     }
   ]
 }
 </p>
 `;
-/* end snapshot sbb-slider A11y tree Firefox */
+/* end snapshot sbb-slider should render readonly A11y tree Firefox */
 
diff --git a/src/components/slider/index.ts b/src/components/slider/index.ts
deleted file mode 100644
index eb0742f801..0000000000
--- a/src/components/slider/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './slider';
diff --git a/src/components/slider/slider.e2e.ts b/src/components/slider/slider.e2e.ts
index 1cd111e962..59358bef5d 100644
--- a/src/components/slider/slider.e2e.ts
+++ b/src/components/slider/slider.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
+import { EventSpy, waitForLitRender } from '../core/testing.js';
 
-import { SbbSliderElement } from './slider';
+import { SbbSliderElement } from './slider.js';
 
 const keyboardPressTimes = async (
   slider: SbbSliderElement,
@@ -75,7 +75,7 @@ describe(`sbb-slider with ${fixture.name}`, () => {
 
   it('should not change value on arrow keypress if disabled', async () => {
     const changeEvent = new EventSpy('change', element);
-    element.setAttribute('disabled', '');
+    element.toggleAttribute('disabled', true);
     await keyboardPressTimes(element, 'ArrowLeft');
     expect(changeEvent.count).not.to.be.greaterThan(0);
     await keyboardPressTimes(element, 'ArrowRight');
diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss
index 62a4ac091d..9839a7ba6e 100644
--- a/src/components/slider/slider.scss
+++ b/src/components/slider/slider.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-slider-line-height: #{sbb.px-to-rem-build(4)};
@@ -66,7 +65,7 @@
 .sbb-slider__wrapper {
   display: flex;
   gap: var(--sbb-spacing-fixed-2x);
-  padding-block: var(--sbb-spacing-fixed-1x);
+  padding-block: calc(var(--sbb-spacing-fixed-1x) / 2);
   color: var(--sbb-slider-icon-color);
 }
 
diff --git a/src/components/slider/slider.spec.ts b/src/components/slider/slider.spec.ts
index d693046b6f..9b8e73b691 100644
--- a/src/components/slider/slider.spec.ts
+++ b/src/components/slider/slider.spec.ts
@@ -1,50 +1,102 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import './slider';
+import type { SbbSliderElement } from './slider.js';
+
+import './slider.js';
 
 describe(`sbb-slider`, () => {
-  it('renders', async () => {
-    const root = await fixture(
-      html`<sbb-slider
-        start-icon="walk-slow-small"
-        end-icon="walk-fast-small"
-        max="500"
-        value="100"
-      ></sbb-slider>`,
-    );
-
-    expect(root).dom.to.be.equal(`
-      <sbb-slider
-        role="slider"
-        tabindex="0"
-        start-icon="walk-slow-small"
-        end-icon="walk-fast-small"
-        max="500"
-        value="100"
-        name=''
-        aria-disabled="false"
-        aria-readonly="false"
-        aria-valuemax="500"
-        aria-valuemin="0"
-        aria-valuenow="100">
-      </sbb-slider>
-    `);
-
-    await expect(root).shadowDom.to.be.equalSnapshot();
+  let element: SbbSliderElement;
+
+  describe('should render', async () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-slider value="1"></sbb-slider>`);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
-  it('renders with no icons and default min/max', async () => {
-    const root = await fixture(html`<sbb-slider value="1"></sbb-slider>`);
+  describe('should render with properties', async () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-slider
+          start-icon="walk-slow-small"
+          end-icon="walk-fast-small"
+          min="0"
+          max="500"
+          value="100"
+        ></sbb-slider>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-    expect(root).dom.to.be.equal(`
-      <sbb-slider aria-disabled="false" aria-readonly="false" aria-valuemax="100" aria-valuemin="0" aria-valuenow="1" role="slider" tabindex="0" value='1' name=''></sbb-slider>
-    `);
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
 
-    await expect(root).shadowDom.to.be.equalSnapshot();
+    testA11yTreeSnapshot();
   });
 
-  testA11yTreeSnapshot(html`<sbb-slider value="1"></sbb-slider>`);
+  describe('should render disabled', async () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-slider
+          start-icon="walk-slow-small"
+          end-icon="walk-fast-small"
+          min="0"
+          max="500"
+          value="100"
+          disabled
+        ></sbb-slider>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
+
+  describe('should render readonly', async () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-slider
+          start-icon="walk-slow-small"
+          end-icon="walk-fast-small"
+          min="0"
+          max="500"
+          value="100"
+          readonly
+        ></sbb-slider>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
 });
diff --git a/src/components/slider/slider.stories.ts b/src/components/slider/slider.stories.ts
index d2e3fe4fdf..f349057608 100644
--- a/src/components/slider/slider.stories.ts
+++ b/src/components/slider/slider.stories.ts
@@ -4,13 +4,13 @@ import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-c
 import { nothing, type TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import type { SbbSliderElement } from './slider';
-import './slider';
-import '../form-field';
-import '../icon';
+import type { SbbSliderElement } from './slider.js';
+import './slider.js';
+import '../form-field.js';
+import '../icon.js';
 
 const changeEventHandler = (event: Event): void => {
   const div: HTMLDivElement = document.createElement('div');
@@ -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/slider/slider.ts b/src/components/slider/slider.ts
index 292e4bc606..6a6b869663 100644
--- a/src/components/slider/slider.ts
+++ b/src/components/slider/slider.ts
@@ -1,16 +1,18 @@
-import { spread } from '@open-wc/lit-helpers';
-import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { hostAttributes, SbbDisabledMixin } from '../core/common-behaviors';
-import { setAttributes } from '../core/dom';
-import { forwardEventToHost, EventEmitter, ConnectedAbortController } from '../core/eventing';
+import { SbbConnectedAbortController } from '../core/controllers.js';
+import { hostAttributes } from '../core/decorators.js';
+import { setOrRemoveAttribute } from '../core/dom.js';
+import { EventEmitter, forwardEventToHost } from '../core/eventing.js';
+import { SbbDisabledTabIndexActionMixin } from '../core/mixins.js';
 
 import style from './slider.scss?lit&inline';
-import '../icon';
+
+import '../icon.js';
 
 /**
  * It displays an input knob that can be moved in a range.
@@ -23,7 +25,7 @@ import '../icon';
 @hostAttributes({
   role: 'slider',
 })
-export class SbbSliderElement extends SbbDisabledMixin(LitElement) {
+export class SbbSliderElement extends SbbDisabledTabIndexActionMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
     didChange: 'didChange',
@@ -76,7 +78,7 @@ export class SbbSliderElement extends SbbDisabledMixin(LitElement) {
   /** Reference to the inner HTMLInputElement with type='range'. */
   private _rangeInput!: HTMLInputElement;
 
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
 
   public override connectedCallback(): void {
     super.connectedCallback();
@@ -86,11 +88,23 @@ export class SbbSliderElement extends SbbDisabledMixin(LitElement) {
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+
     if (changedProperties.has('value')) {
       this._handleChange(Number(this.value));
     } else if (changedProperties.has('valueAsNumber')) {
       this._handleChange(Number(this.valueAsNumber));
     }
+
+    if (changedProperties.has('min')) {
+      setOrRemoveAttribute(this, 'aria-valuemin', this.min ?? null);
+    }
+    if (changedProperties.has('max')) {
+      setOrRemoveAttribute(this, 'aria-valuemax', this.max ?? null);
+    }
+    if (changedProperties.has('readonly')) {
+      setOrRemoveAttribute(this, 'aria-readonly', this.readonly ? 'true' : null);
+    }
   }
 
   private _syncValues(newValue: string | number): void {
@@ -102,6 +116,7 @@ export class SbbSliderElement extends SbbDisabledMixin(LitElement) {
 
     this.value = newValue.toString();
     this.valueAsNumber = newValue as number;
+    setOrRemoveAttribute(this, 'aria-valuenow', this.value || null);
   }
 
   /**
@@ -170,26 +185,6 @@ export class SbbSliderElement extends SbbDisabledMixin(LitElement) {
   }
 
   protected override render(): TemplateResult {
-    const hostAttributes = {
-      tabIndex: this.disabled ? null : '0',
-      'aria-valuemin': this.min || null,
-      'aria-valuemax': this.max || null,
-      'aria-valuenow': this.value || null,
-      'aria-readonly': this.readonly?.toString() ?? 'false',
-      'aria-disabled': this.disabled?.toString() ?? 'false',
-    };
-    const inputAttributes = {
-      tabIndex: -1,
-      name: this.name || null,
-      min: this.min || null,
-      max: this.max || null,
-      disabled: this.disabled || this.readonly || null,
-      valueAsNumber: this.valueAsNumber || null,
-      value: this.value || null,
-    };
-
-    setAttributes(this, hostAttributes);
-
     return html`
       <div class="sbb-slider__height-container">
         <div class="sbb-slider__wrapper">
@@ -201,7 +196,13 @@ export class SbbSliderElement extends SbbDisabledMixin(LitElement) {
             style=${styleMap({ '--sbb-slider-value-fraction': this._valueFraction.toString() })}
           >
             <input
-              ${spread(inputAttributes)}
+              tabindex="-1"
+              name=${this.name || nothing}
+              min=${this.min || nothing}
+              max=${this.max || nothing}
+              ?disabled=${this.disabled || this.readonly || nothing}
+              .valueAsNumber=${this.valueAsNumber || nothing}
+              value=${this.value || nothing}
               class="sbb-slider__range-input"
               type="range"
               @change=${(event: Event) => this._emitChange(event)}
diff --git a/src/components/status.ts b/src/components/status.ts
new file mode 100644
index 0000000000..8c0f7d5d88
--- /dev/null
+++ b/src/components/status.ts
@@ -0,0 +1 @@
+export * from './status/status.js';
diff --git a/src/components/status/index.ts b/src/components/status/index.ts
deleted file mode 100644
index 420cc02aa0..0000000000
--- a/src/components/status/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './status';
diff --git a/src/components/status/status.e2e.ts b/src/components/status/status.e2e.ts
index 9c03b2674a..8613dcbb17 100644
--- a/src/components/status/status.e2e.ts
+++ b/src/components/status/status.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbStatusElement } from './status';
+import { SbbStatusElement } from './status.js';
 
 describe(`sbb-status with ${fixture.name}`, () => {
   let element: SbbStatusElement;
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index a0326bbc75..9dc3914e25 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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;
 
 $has-title: ':is([data-slot-names~=title], [title-content])';
 
@@ -11,6 +10,8 @@ $has-title: ':is([data-slot-names~=title], [title-content])';
   --sbb-status-icon-color: var(--sbb-color-iron);
   --sbb-status-text-color: var(--sbb-color-iron);
   --_sbb-status-icon-font-size: var(--sbb-font-size-text-s);
+
+  display: block;
 }
 
 :host([type='error']) {
diff --git a/src/components/status/status.spec.ts b/src/components/status/status.spec.ts
index 076a39eabe..a558e23b35 100644
--- a/src/components/status/status.spec.ts
+++ b/src/components/status/status.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import './status';
+import './status.js';
 
 describe(`sbb-status`, () => {
   it('renders', async () => {
diff --git a/src/components/status/status.stories.ts b/src/components/status/status.stories.ts
index 9046a0708b..ded8227242 100644
--- a/src/components/status/status.stories.ts
+++ b/src/components/status/status.stories.ts
@@ -4,11 +4,11 @@ import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 
-import './status';
+import './status.js';
 
 const type: InputType = {
   control: {
@@ -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/status/status.ts b/src/components/status/status.ts
index 4e16152e83..e3d7778c4a 100644
--- a/src/components/status/status.ts
+++ b/src/components/status/status.ts
@@ -2,11 +2,11 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { NamedSlotStateController, SbbIconNameMixin } from '../core/common-behaviors';
-import type { SbbTitleLevel } from '../title';
+import { SbbSlotStateController } from '../core/controllers.js';
+import { SbbIconNameMixin } from '../icon.js';
+import type { SbbTitleLevel } from '../title.js';
 
-import '../icon';
-import '../title';
+import '../title.js';
 import style from './status.scss?lit&inline';
 
 export type SbbStatusType = 'info' | 'success' | 'warning' | 'error';
@@ -40,7 +40,7 @@ export class SbbStatusElement extends SbbIconNameMixin(LitElement) {
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   protected override renderIconSlot(): TemplateResult {
diff --git a/src/components/tabs.ts b/src/components/tabs.ts
new file mode 100644
index 0000000000..7a53359dc4
--- /dev/null
+++ b/src/components/tabs.ts
@@ -0,0 +1,2 @@
+export * from './tabs/tab-group.js';
+export * from './tabs/tab-title.js';
diff --git a/src/components/tabs/index.ts b/src/components/tabs/index.ts
deleted file mode 100644
index cbad6b32a8..0000000000
--- a/src/components/tabs/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './tab-group';
-export * from './tab-title';
diff --git a/src/components/tabs/tab-group.ts b/src/components/tabs/tab-group.ts
new file mode 100644
index 0000000000..26b1fd4879
--- /dev/null
+++ b/src/components/tabs/tab-group.ts
@@ -0,0 +1 @@
+export * from './tab-group/tab-group.js';
diff --git a/src/components/tabs/tab-group/index.ts b/src/components/tabs/tab-group/index.ts
deleted file mode 100644
index f40a858afd..0000000000
--- a/src/components/tabs/tab-group/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tab-group';
diff --git a/src/components/tabs/tab-group/tab-group.e2e.ts b/src/components/tabs/tab-group/tab-group.e2e.ts
index cb7b33f273..9f8b296630 100644
--- a/src/components/tabs/tab-group/tab-group.e2e.ts
+++ b/src/components/tabs/tab-group/tab-group.e2e.ts
@@ -2,13 +2,13 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbTabTitleElement } from '../tab-title';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition } from '../../core/testing.js';
+import type { SbbTabTitleElement } from '../tab-title.js';
 
-import { SbbTabGroupElement } from './tab-group';
+import { SbbTabGroupElement } from './tab-group.js';
 
-import '../tab-title';
+import '../tab-title.js';
 
 describe(`sbb-tab-group with ${fixture.name}`, () => {
   let element: SbbTabGroupElement;
@@ -24,7 +24,7 @@ describe(`sbb-tab-group with ${fixture.name}`, () => {
         <div>Test tab content 3</div>
         <sbb-tab-title id="sbb-tab-4">Test tab label 4</sbb-tab-title>
       </sbb-tab-group>`,
-      { modules: ['./tab-group.ts', '../tab-title/index.ts'] },
+      { modules: ['./tab-group.ts', '../tab-title.ts'] },
     );
   });
 
@@ -114,7 +114,7 @@ describe(`sbb-tab-group with ${fixture.name}`, () => {
         <sbb-tab-title id="sbb-tab-2">Test tab label 2</sbb-tab-title>
         <div>Test tab content 2</div>
       </sbb-tab-group>`,
-      { modules: ['./tab-group.ts', '../tab-title/index.ts'] },
+      { modules: ['./tab-group.ts', '../tab-title.ts'] },
     );
     const tab = element.querySelector('sbb-tab-title#sbb-tab-1');
     expect(tab).to.have.attribute('active');
@@ -128,7 +128,7 @@ describe(`sbb-tab-group with ${fixture.name}`, () => {
         <sbb-tab-title id="sbb-tab-2">Test tab label 2</sbb-tab-title>
         <div>Test tab content 2</div>
       </sbb-tab-group>`,
-      { modules: ['./tab-group.ts', '../tab-title/index.ts'] },
+      { modules: ['./tab-group.ts', '../tab-title.ts'] },
     );
     const tab = element.querySelector('sbb-tab-title#sbb-tab-2');
     expect(tab).to.have.attribute('active');
diff --git a/src/components/tabs/tab-group/tab-group.scss b/src/components/tabs/tab-group/tab-group.scss
index 8f92cf5569..ce37e4df53 100644
--- a/src/components/tabs/tab-group/tab-group.scss
+++ b/src/components/tabs/tab-group/tab-group.scss
@@ -1,14 +1,15 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-tab-group-animation-duration: var(
     --sbb-disable-animation-time,
     var(--sbb-animation-duration-4x)
   );
+
+  display: block;
 }
 
 .tab-group {
diff --git a/src/components/tabs/tab-group/tab-group.spec.ts b/src/components/tabs/tab-group/tab-group.spec.ts
index c27f0a3bff..0763b140db 100644
--- a/src/components/tabs/tab-group/tab-group.spec.ts
+++ b/src/components/tabs/tab-group/tab-group.spec.ts
@@ -1,12 +1,12 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
 
-import type { SbbTabGroupElement } from './tab-group';
-import './tab-group';
-import '../tab-title';
+import type { SbbTabGroupElement } from './tab-group.js';
+import './tab-group.js';
+import '../tab-title.js';
 
 describe(`sbb-tab-group`, () => {
   let element: SbbTabGroupElement;
diff --git a/src/components/tabs/tab-group/tab-group.stories.ts b/src/components/tabs/tab-group/tab-group.stories.ts
index 07644bacfa..0f698b7dc5 100644
--- a/src/components/tabs/tab-group/tab-group.stories.ts
+++ b/src/components/tabs/tab-group/tab-group.stories.ts
@@ -10,17 +10,12 @@ 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 '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import { SbbTabGroupElement } from './tab-group';
-import '../tab-title';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-milk)' : 'var(--sbb-color-white)',
-});
+import { SbbTabGroupElement } from './tab-group.js';
+import '../tab-title.js';
 
 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-group/tab-group.ts b/src/components/tabs/tab-group/tab-group.ts
index c5723858f3..e5cf4bdafc 100644
--- a/src/components/tabs/tab-group/tab-group.ts
+++ b/src/components/tabs/tab-group/tab-group.ts
@@ -3,11 +3,11 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
-import { isArrowKeyPressed, getNextElementIndex } from '../../core/a11y';
-import { isValidAttribute, hostContext, setAttribute } from '../../core/dom';
-import { throttle, EventEmitter, ConnectedAbortController } from '../../core/eventing';
-import { AgnosticMutationObserver, AgnosticResizeObserver } from '../../core/observers';
-import type { SbbTabTitleElement } from '../tab-title';
+import { getNextElementIndex, isArrowKeyPressed } from '../../core/a11y.js';
+import { SbbConnectedAbortController } from '../../core/controllers.js';
+import { EventEmitter, throttle } from '../../core/eventing.js';
+import { AgnosticMutationObserver, AgnosticResizeObserver } from '../../core/observers.js';
+import type { SbbTabTitleElement } from '../tab-title.js';
 
 import style from './tab-group.scss?lit&inline';
 
@@ -56,10 +56,9 @@ export class SbbTabGroupElement extends LitElement {
 
   private _tabs: InterfaceSbbTabGroupTab[] = [];
   private _selectedTab?: InterfaceSbbTabGroupTab;
-  private _isNested: boolean = false;
   private _tabGroupElement!: HTMLElement;
   private _tabContentElement!: HTMLElement;
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
   private _tabAttributeObserver = new AgnosticMutationObserver((mutationsList) =>
     this._onTabAttributesChange(mutationsList),
   );
@@ -134,14 +133,14 @@ export class SbbTabGroupElement extends LitElement {
   }
 
   private get _enabledTabs(): InterfaceSbbTabGroupTab[] {
-    return this._tabs.filter((t) => !isValidAttribute(t, 'disabled'));
+    return this._tabs.filter((t) => !t.hasAttribute('disabled'));
   }
 
   public override connectedCallback(): void {
     super.connectedCallback();
     const signal = this._abort.signal;
     this.addEventListener('keydown', (e) => this._handleKeyDown(e), { signal });
-    this._isNested = !!hostContext('sbb-tab-group', this);
+    this.toggleAttribute('data-nested', !!this.parentElement?.closest('sbb-tab-group'));
   }
 
   protected override firstUpdated(): void {
@@ -208,17 +207,17 @@ export class SbbTabGroupElement extends LitElement {
       const tab = mutation.target as InterfaceSbbTabGroupTab;
 
       if (mutation.attributeName === 'disabled') {
-        if (isValidAttribute(tab, 'disabled') && tab !== this._selectedTab) {
+        if (tab.hasAttribute('disabled') && tab !== this._selectedTab) {
           tab.tabGroupActions?.disable();
         } else if (tab.disabled) {
           tab.tabGroupActions?.enable();
         }
       }
       if (mutation.attributeName === 'active') {
-        if (isValidAttribute(tab, 'active') && !tab.disabled) {
+        if (tab.hasAttribute('active') && !tab.disabled) {
           tab.tabGroupActions?.select();
         } else if (tab === this._selectedTab) {
-          tab.setAttribute('active', '');
+          tab.toggleAttribute('active', true);
         }
       }
     }
@@ -251,11 +250,11 @@ export class SbbTabGroupElement extends LitElement {
   private _configure(tab: InterfaceSbbTabGroupTab): void {
     tab.tabGroupActions = {
       activate: (): void => {
-        tab.setAttribute('active', '');
+        tab.toggleAttribute('active', true);
         tab.active = true;
         tab.tabIndex = 0;
         tab.setAttribute('aria-selected', 'true');
-        tab.relatedContent?.setAttribute('active', '');
+        tab.relatedContent?.toggleAttribute('active', true);
       },
       deactivate: (): void => {
         tab.removeAttribute('active');
@@ -268,8 +267,8 @@ export class SbbTabGroupElement extends LitElement {
         if (tab.disabled) {
           return;
         }
-        if (!isValidAttribute(tab, 'disabled')) {
-          tab.setAttribute('disabled', '');
+        if (!tab.hasAttribute('disabled')) {
+          tab.toggleAttribute('disabled', true);
         }
         tab.disabled = true;
         tab.tabIndex = -1;
@@ -301,7 +300,7 @@ export class SbbTabGroupElement extends LitElement {
 
           this._tabContentResizeObserver.observe(tab.relatedContent!);
           this._selectedTabChanged.emit();
-        } else if (tab.disabled) {
+        } else if (import.meta.env.DEV && tab.disabled) {
           console.warn('You cannot activate a disabled tab');
         }
       },
@@ -318,21 +317,20 @@ export class SbbTabGroupElement extends LitElement {
     } else {
       tab.insertAdjacentHTML('afterend', '<div>No content.</div>');
       tab.relatedContent = tab.nextElementSibling as HTMLElement;
-      console.warn(
-        `Missing content: you should provide a related content for the tab ${tab.outerHTML}.`,
-      );
+      if (import.meta.env.DEV) {
+        console.warn(
+          `Missing content: you should provide a related content for the tab ${tab.outerHTML}.`,
+        );
+      }
     }
     tab.tabIndex = -1;
-    tab.disabled = isValidAttribute(tab, 'disabled');
-    tab.active = isValidAttribute(tab, 'active') && !tab.disabled;
+    tab.disabled = tab.hasAttribute('disabled');
+    tab.active = tab.hasAttribute('active') && !tab.disabled;
     tab.setAttribute('role', 'tab');
     tab.setAttribute('aria-controls', tab.relatedContent.id);
     tab.setAttribute('aria-selected', 'false');
     tab.relatedContent.setAttribute('role', 'tabpanel');
-    tab.relatedContent.removeAttribute('active');
-    if (tab.active) {
-      tab.relatedContent.setAttribute('active', '');
-    }
+    tab.relatedContent.toggleAttribute('active', tab.active);
     tab.addEventListener('click', () => {
       tab.tabGroupActions?.select();
     });
@@ -362,8 +360,6 @@ export class SbbTabGroupElement extends LitElement {
   }
 
   protected override render(): TemplateResult {
-    setAttribute(this, 'data-nested', this._isNested);
-
     return html`
       <div
         class="tab-group"
diff --git a/src/components/tabs/tab-title.ts b/src/components/tabs/tab-title.ts
new file mode 100644
index 0000000000..e0a54421a9
--- /dev/null
+++ b/src/components/tabs/tab-title.ts
@@ -0,0 +1 @@
+export * from './tab-title/tab-title.js';
diff --git a/src/components/tabs/tab-title/index.ts b/src/components/tabs/tab-title/index.ts
deleted file mode 100644
index 9df266627c..0000000000
--- a/src/components/tabs/tab-title/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tab-title';
diff --git a/src/components/tabs/tab-title/tab-title.e2e.ts b/src/components/tabs/tab-title/tab-title.e2e.ts
index fe08da62a5..925919319a 100644
--- a/src/components/tabs/tab-title/tab-title.e2e.ts
+++ b/src/components/tabs/tab-title/tab-title.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import { SbbTabTitleElement } from './tab-title';
+import { SbbTabTitleElement } from './tab-title.js';
 
 describe(`sbb-tab-title with ${fixture.name}`, () => {
   let element: SbbTabTitleElement;
diff --git a/src/components/tabs/tab-title/tab-title.scss b/src/components/tabs/tab-title/tab-title.scss
index 5ed83f9d0b..75bce28e0d 100644
--- a/src/components/tabs/tab-title/tab-title.scss
+++ b/src/components/tabs/tab-title/tab-title.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-tab-title-height: var(--sbb-spacing-fixed-12x);
diff --git a/src/components/tabs/tab-title/tab-title.spec.ts b/src/components/tabs/tab-title/tab-title.spec.ts
index b7b6b807ac..f4ea1c0cc1 100644
--- a/src/components/tabs/tab-title/tab-title.spec.ts
+++ b/src/components/tabs/tab-title/tab-title.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import './tab-title';
+import './tab-title.js';
 
 describe(`sbb-tab-title`, () => {
   it('renders', async () => {
diff --git a/src/components/tabs/tab-title/tab-title.stories.ts b/src/components/tabs/tab-title/tab-title.stories.ts
index 70d2cfe9a5..a931c96443 100644
--- a/src/components/tabs/tab-title/tab-title.stories.ts
+++ b/src/components/tabs/tab-title/tab-title.stories.ts
@@ -3,11 +3,11 @@ import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import '../../icon';
-import './tab-title';
+import '../../icon.js';
+import './tab-title.js';
 
 const Template = ({ iconSlot, label, amountSlot, ...args }: Args): TemplateResult => html`
   <sbb-tab-title ${sbbSpread(args)}>
@@ -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/tabs/tab-title/tab-title.ts b/src/components/tabs/tab-title/tab-title.ts
index bb9ba291eb..6a760895ca 100644
--- a/src/components/tabs/tab-title/tab-title.ts
+++ b/src/components/tabs/tab-title/tab-title.ts
@@ -3,14 +3,11 @@ import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import {
-  NamedSlotStateController,
-  SbbDisabledMixin,
-  SbbIconNameMixin,
-} from '../../core/common-behaviors';
-import type { SbbTitleLevel } from '../../title';
+import { SbbSlotStateController } from '../../core/controllers.js';
+import { SbbDisabledMixin } from '../../core/mixins.js';
+import { SbbIconNameMixin } from '../../icon.js';
+import type { SbbTitleLevel } from '../../title.js';
 
-import '../../icon';
 import style from './tab-title.scss?lit&inline';
 
 /**
@@ -38,7 +35,7 @@ export class SbbTabTitleElement extends SbbDisabledMixin(SbbIconNameMixin(LitEle
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   protected override render(): TemplateResult {
@@ -60,7 +57,6 @@ export class SbbTabTitleElement extends SbbDisabledMixin(SbbIconNameMixin(LitEle
         </${unsafeStatic(TAGNAME)}>
       </div>
     `;
-    /* eslint-disable lit/binding-positions */
   }
 }
 
diff --git a/src/components/tag.ts b/src/components/tag.ts
new file mode 100644
index 0000000000..4e6d62e337
--- /dev/null
+++ b/src/components/tag.ts
@@ -0,0 +1,2 @@
+export * from './tag/tag.js';
+export * from './tag/tag-group.js';
diff --git a/src/components/tag/index.ts b/src/components/tag/index.ts
deleted file mode 100644
index 028ca92984..0000000000
--- a/src/components/tag/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './tag';
-export * from './tag-group';
diff --git a/src/components/tag/tag-group.ts b/src/components/tag/tag-group.ts
new file mode 100644
index 0000000000..13b1e1b96c
--- /dev/null
+++ b/src/components/tag/tag-group.ts
@@ -0,0 +1 @@
+export * from './tag-group/tag-group.js';
diff --git a/src/components/tag/tag-group/index.ts b/src/components/tag/tag-group/index.ts
deleted file mode 100644
index 935776c695..0000000000
--- a/src/components/tag/tag-group/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tag-group';
diff --git a/src/components/tag/tag-group/tag-group.e2e.ts b/src/components/tag/tag-group/tag-group.e2e.ts
index 4271b0c4e8..41cb5161b5 100644
--- a/src/components/tag/tag-group/tag-group.e2e.ts
+++ b/src/components/tag/tag-group/tag-group.e2e.ts
@@ -1,13 +1,13 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbTagElement } from '../tag';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing.js';
+import type { SbbTagElement } from '../tag.js';
 
-import { SbbTagGroupElement } from './tag-group';
+import { SbbTagGroupElement } from './tag-group.js';
 
-import '../tag';
+import '../tag.js';
 
 describe(`sbb-tag-group with ${fixture.name}`, () => {
   let element: SbbTagGroupElement;
@@ -23,7 +23,7 @@ describe(`sbb-tag-group with ${fixture.name}`, () => {
               <sbb-tag id="sbb-tag-3" value="tag3">Tag 3</sbb-tag>
             </sbb-tag-group>
           `,
-          { modules: ['./tag-group.ts', '../tag/index.ts'] },
+          { modules: ['./tag-group.ts', '../tag.ts'] },
         );
       });
 
@@ -95,7 +95,7 @@ describe(`sbb-tag-group with ${fixture.name}`, () => {
               <sbb-tag id="sbb-tag-3" value="tag3">Tag 3</sbb-tag>
             </sbb-tag-group>
           `,
-          { modules: ['./tag-group.ts', '../tag/index.ts'] },
+          { modules: ['./tag-group.ts', '../tag.ts'] },
         );
       });
 
@@ -171,7 +171,7 @@ describe(`sbb-tag-group with ${fixture.name}`, () => {
               <sbb-tag id="sbb-tag-3" value="tag3">Tag 3</sbb-tag>
             </sbb-tag-group>
           `,
-          { modules: ['./tag-group.ts', '../tag/index.ts'] },
+          { modules: ['./tag-group.ts', '../tag.ts'] },
         );
 
         expect(element.value).to.be.eql(['tag1', 'tag3']);
@@ -199,7 +199,7 @@ describe(`sbb-tag-group with ${fixture.name}`, () => {
               <sbb-tag id="sbb-tag-3" value="tag3">Tag 3</sbb-tag>
             </sbb-tag-group>
           `,
-          { modules: ['./tag-group.ts', '../tag/index.ts'] },
+          { modules: ['./tag-group.ts', '../tag.ts'] },
         );
         element.value = ['tag1', 'tag3'];
         await waitForLitRender(element);
@@ -219,7 +219,7 @@ describe(`sbb-tag-group with ${fixture.name}`, () => {
               <sbb-tag id="sbb-tag-3" value="tag3">Tag 3</sbb-tag>
             </sbb-tag-group>
           `,
-          { modules: ['./tag-group.ts', '../tag/index.ts'] },
+          { modules: ['./tag-group.ts', '../tag.ts'] },
         );
         element.value = 'tag1';
         await waitForLitRender(element);
@@ -241,7 +241,7 @@ describe(`sbb-tag-group with ${fixture.name}`, () => {
               <sbb-tag id="sbb-tag-3" value="tag3" checked>Tag 3</sbb-tag>
             </sbb-tag-group>
           `,
-          { modules: ['./tag-group.ts', '../tag/index.ts'] },
+          { modules: ['./tag-group.ts', '../tag.ts'] },
         );
       });
 
@@ -278,7 +278,7 @@ describe(`sbb-tag-group with ${fixture.name}`, () => {
               <sbb-tag id="sbb-tag-3" value="tag3">Tag 3</sbb-tag>
             </sbb-tag-group>
           `,
-          { modules: ['./tag-group.ts', '../tag/index.ts'] },
+          { modules: ['./tag-group.ts', '../tag.ts'] },
         );
       });
 
@@ -350,7 +350,7 @@ describe(`sbb-tag-group with ${fixture.name}`, () => {
               <sbb-tag id="sbb-tag-3" value="tag3">Tag 3</sbb-tag>
             </sbb-tag-group>
           `,
-          { modules: ['./tag-group.ts', '../tag/index.ts'] },
+          { modules: ['./tag-group.ts', '../tag.ts'] },
         );
       });
 
@@ -490,7 +490,7 @@ describe(`sbb-tag-group with ${fixture.name}`, () => {
               <sbb-tag id="sbb-tag-3" value="tag3">Tag 3</sbb-tag>
             </sbb-tag-group>
           `,
-          { modules: ['./tag-group.ts', '../tag/index.ts'] },
+          { modules: ['./tag-group.ts', '../tag.ts'] },
         );
 
         expect(element.value).to.be.equal('tag2');
@@ -508,7 +508,7 @@ describe(`sbb-tag-group with ${fixture.name}`, () => {
               <sbb-tag id="sbb-tag-3" value="tag3">Tag 3</sbb-tag>
             </sbb-tag-group>
           `,
-          { modules: ['./tag-group.ts', '../tag/index.ts'] },
+          { modules: ['./tag-group.ts', '../tag.ts'] },
         );
 
         element.value = 'tag2';
@@ -539,7 +539,7 @@ describe(`sbb-tag-group with ${fixture.name}`, () => {
               <sbb-tag id="sbb-tag-3" value="tag3">Tag 3</sbb-tag>
             </sbb-tag-group>
           `,
-          { modules: ['./tag-group.ts', '../tag/index.ts'] },
+          { modules: ['./tag-group.ts', '../tag.ts'] },
         );
         expect(element.querySelectorAll('sbb-tag[checked]').length).to.be.equal(1);
         expect(element.value).to.be.equal('tag1');
@@ -556,7 +556,7 @@ describe(`sbb-tag-group with ${fixture.name}`, () => {
               <sbb-tag id="sbb-tag-3" value="tag3">Tag 3</sbb-tag>
             </sbb-tag-group>
           `,
-          { modules: ['./tag-group.ts', '../tag/index.ts'] },
+          { modules: ['./tag-group.ts', '../tag.ts'] },
         );
       });
 
diff --git a/src/components/tag/tag-group/tag-group.scss b/src/components/tag/tag-group/tag-group.scss
index 057acb38ef..228343020c 100644
--- a/src/components/tag/tag-group/tag-group.scss
+++ b/src/components/tag/tag-group/tag-group.scss
@@ -1,8 +1,11 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
+  display: block;
+}
 
 .sbb-tag-group__list {
   @include sbb.list-reset;
diff --git a/src/components/tag/tag-group/tag-group.spec.ts b/src/components/tag/tag-group/tag-group.spec.ts
index b99f69bd7f..81d850b89b 100644
--- a/src/components/tag/tag-group/tag-group.spec.ts
+++ b/src/components/tag/tag-group/tag-group.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import type { SbbTagGroupElement } from './tag-group';
-import './tag-group';
-import '../tag';
+import type { SbbTagGroupElement } from './tag-group.js';
+import './tag-group.js';
+import '../tag.js';
 
 describe(`sbb-tag-group`, () => {
   let element: SbbTagGroupElement;
diff --git a/src/components/tag/tag-group/tag-group.stories.ts b/src/components/tag/tag-group/tag-group.stories.ts
index b467355be6..dd835faa35 100644
--- a/src/components/tag/tag-group/tag-group.stories.ts
+++ b/src/components/tag/tag-group/tag-group.stories.ts
@@ -5,13 +5,13 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
-import { sbbSpread } from '../../core/dom';
-import type { SbbTagElement } from '../tag';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import type { SbbTagElement } from '../tag.js';
 
 import readme from './readme.md?raw';
-import './tag-group';
-import '../tag';
-import type { SbbTagGroupElement } from './tag-group';
+import './tag-group.js';
+import '../tag.js';
+import type { SbbTagGroupElement } from './tag-group.js';
 
 const uncheckAllTag = (event: Event): void => {
   const tagGroup = (event.currentTarget as SbbTagElement).closest(
@@ -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-group/tag-group.ts b/src/components/tag/tag-group/tag-group.ts
index c342dcbc5e..68eae28ebe 100644
--- a/src/components/tag/tag-group/tag-group.ts
+++ b/src/components/tag/tag-group/tag-group.ts
@@ -1,15 +1,16 @@
 import {
   type CSSResultGroup,
   html,
+  isServer,
   LitElement,
   type PropertyValueMap,
   type TemplateResult,
-  isServer,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/common-behaviors';
-import type { SbbTagElement } from '../tag';
+import { setOrRemoveAttribute } from '../../core/dom.js';
+import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js';
+import type { SbbTagElement } from '../tag.js';
 
 import style from './tag-group.scss?lit&inline';
 
@@ -64,11 +65,11 @@ export class SbbTagGroupElement extends SbbNamedSlotListMixin<SbbTagElement, typ
       const valueAsArray = Array.isArray(value) ? value : [value];
       tags.forEach((t) => (t.checked = valueAsArray.includes(t.value ?? t.getAttribute('value'))));
     } else {
-      if (Array.isArray(value)) {
+      if (!Array.isArray(value)) {
+        tags.forEach((t) => (t.checked = (t.value ?? t.getAttribute('value')) === value));
+      } else if (import.meta.env.DEV) {
         console.warn('value must not be set as an array in singular mode.', value);
-        return;
       }
-      tags.forEach((t) => (t.checked = (t.value ?? t.getAttribute('value')) === value));
     }
   }
   public get value(): string | string[] | null {
@@ -97,11 +98,13 @@ export class SbbTagGroupElement extends SbbNamedSlotListMixin<SbbTagElement, typ
         .slice(1)
         .forEach((tag) => (tag.checked = false));
     }
-    if (changedProperties.has('listAccessibilityLabel') && this.listAccessibilityLabel) {
-      this.removeAttribute('role');
-    } else {
-      this.setAttribute('role', 'group');
-    }
+    setOrRemoveAttribute(
+      this,
+      'role',
+      changedProperties.has('listAccessibilityLabel') && this.listAccessibilityLabel
+        ? null
+        : 'group',
+    );
   }
 
   protected override render(): TemplateResult {
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
new file mode 100644
index 0000000000..12d63073c4
--- /dev/null
+++ b/src/components/tag/tag.ts
@@ -0,0 +1 @@
+export * from './tag/tag.js';
diff --git a/src/components/tag/tag/index.ts b/src/components/tag/tag/index.ts
deleted file mode 100644
index 584cc0afa1..0000000000
--- a/src/components/tag/tag/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tag';
diff --git a/src/components/tag/tag/tag.e2e.ts b/src/components/tag/tag/tag.e2e.ts
index 99a93c53e0..72bc35f778 100644
--- a/src/components/tag/tag/tag.e2e.ts
+++ b/src/components/tag/tag/tag.e2e.ts
@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender, EventSpy } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { waitForLitRender, EventSpy } from '../../core/testing.js';
 
-import { SbbTagElement } from './tag';
+import { SbbTagElement } from './tag.js';
 
 describe(`sbb-tag with ${fixture.name}`, () => {
   let element: SbbTagElement;
@@ -33,7 +33,7 @@ describe(`sbb-tag with ${fixture.name}`, () => {
 
   it('should not be checked after click when disabled', async () => {
     expect(element).not.to.have.attribute('checked');
-    element.setAttribute('disabled', '');
+    element.toggleAttribute('disabled', true);
     await waitForLitRender(element);
 
     const changeSpy = new EventSpy('change');
diff --git a/src/components/tag/tag/tag.scss b/src/components/tag/tag/tag.scss
index b1e66c7b6c..5979198216 100644
--- a/src/components/tag/tag/tag.scss
+++ b/src/components/tag/tag/tag.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-tag-border-radius: var(--sbb-border-radius-infinity);
diff --git a/src/components/tag/tag/tag.spec.ts b/src/components/tag/tag/tag.spec.ts
index 174179e65d..1f9b37226a 100644
--- a/src/components/tag/tag/tag.spec.ts
+++ b/src/components/tag/tag/tag.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import './tag';
-import '../../icon';
+import './tag.js';
+import '../../icon.js';
 
 describe(`sbb-tag`, () => {
   it('renders unchecked', async () => {
diff --git a/src/components/tag/tag/tag.stories.ts b/src/components/tag/tag/tag.stories.ts
index 36048ecc47..088f3ad21f 100644
--- a/src/components/tag/tag/tag.stories.ts
+++ b/src/components/tag/tag/tag.stories.ts
@@ -4,10 +4,10 @@ import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './tag';
+import './tag.js';
 
 const checked: InputType = {
   control: {
@@ -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/tag/tag/tag.ts b/src/components/tag/tag/tag.ts
index f72776c4da..3d8625b6ff 100644
--- a/src/components/tag/tag/tag.ts
+++ b/src/components/tag/tag/tag.ts
@@ -2,20 +2,17 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-  NamedSlotStateController,
-  SbbDisabledTabIndexActionMixin,
-  SbbButtonBaseElement,
-  SbbIconNameMixin,
-} from '../../core/common-behaviors';
-import { EventEmitter, ConnectedAbortController } from '../../core/eventing';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { SbbConnectedAbortController, SbbSlotStateController } from '../../core/controllers.js';
+import { EventEmitter } from '../../core/eventing.js';
 import type {
   SbbCheckedStateChange,
   SbbStateChange,
   SbbValueStateChange,
-} from '../../core/interfaces';
+} from '../../core/interfaces.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { SbbIconNameMixin } from '../../icon.js';
 
-import '../../icon';
 import style from './tag.scss?lit&inline';
 
 export type SbbTagStateChange = Extract<
@@ -66,11 +63,11 @@ export class SbbTagElement extends SbbIconNameMixin(
     bubbles: true,
   });
 
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   public override connectedCallback(): void {
@@ -97,6 +94,11 @@ export class SbbTagElement extends SbbIconNameMixin(
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
+
+    if (changedProperties.has('checked')) {
+      this.setAttribute('aria-pressed', `${this.checked}`);
+    }
+
     const tagGroup = this.closest?.('sbb-tag-group');
     if (tagGroup && !tagGroup.multiple && changedProperties.has('checked') && this.checked) {
       tagGroup?.tags.filter((t) => t !== this).forEach((t) => (t.checked = false));
@@ -104,8 +106,6 @@ export class SbbTagElement extends SbbIconNameMixin(
   }
 
   protected override renderTemplate(): TemplateResult {
-    // We have to ensure that the value is always present
-    this.setAttribute('aria-pressed', this.checked.toString());
     return html`
       <span class="sbb-tag__icon sbb-tag--shift"> ${this.renderIconSlot()} </span>
       <span class="sbb-tag__text sbb-tag--shift">
diff --git a/src/components/teaser-hero.ts b/src/components/teaser-hero.ts
new file mode 100644
index 0000000000..514d5773b3
--- /dev/null
+++ b/src/components/teaser-hero.ts
@@ -0,0 +1 @@
+export * from './teaser-hero/teaser-hero.js';
diff --git a/src/components/teaser-hero/index.ts b/src/components/teaser-hero/index.ts
deleted file mode 100644
index 5a32ac364d..0000000000
--- a/src/components/teaser-hero/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './teaser-hero';
diff --git a/src/components/teaser-hero/teaser-hero.e2e.ts b/src/components/teaser-hero/teaser-hero.e2e.ts
index 83af65fd58..d32d75552a 100644
--- a/src/components/teaser-hero/teaser-hero.e2e.ts
+++ b/src/components/teaser-hero/teaser-hero.e2e.ts
@@ -1,11 +1,11 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import images from '../core/images';
-import { waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import images from '../core/images.js';
+import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
 
-import { SbbTeaserHeroElement } from './teaser-hero';
+import { SbbTeaserHeroElement } from './teaser-hero.js';
 
 describe(`sbb-teaser-hero with ${fixture.name}`, () => {
   let element: SbbTeaserHeroElement;
diff --git a/src/components/teaser-hero/teaser-hero.scss b/src/components/teaser-hero/teaser-hero.scss
index 8ec9963891..c4cd136527 100644
--- a/src/components/teaser-hero/teaser-hero.scss
+++ b/src/components/teaser-hero/teaser-hero.scss
@@ -1,10 +1,11 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
+  display: block;
+
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
@@ -42,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.spec.ts b/src/components/teaser-hero/teaser-hero.spec.ts
index d7367792d4..fd8113d68c 100644
--- a/src/components/teaser-hero/teaser-hero.spec.ts
+++ b/src/components/teaser-hero/teaser-hero.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import sampleImages from '../core/images';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import sampleImages from '../core/images.js';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbTeaserHeroElement } from './teaser-hero';
+import type { SbbTeaserHeroElement } from './teaser-hero.js';
 
-import './teaser-hero';
-import '../image';
+import './teaser-hero.js';
+import '../image.js';
 
 describe(`sbb-teaser-hero`, () => {
   describe('should render all properties', () => {
diff --git a/src/components/teaser-hero/teaser-hero.stories.ts b/src/components/teaser-hero/teaser-hero.stories.ts
index 779507507c..285cc33249 100644
--- a/src/components/teaser-hero/teaser-hero.stories.ts
+++ b/src/components/teaser-hero/teaser-hero.stories.ts
@@ -4,11 +4,11 @@ import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
-import sampleImages from '../core/images';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import sampleImages from '../core/images.js';
 
 import readme from './readme.md?raw';
-import './teaser-hero';
+import './teaser-hero.js';
 
 const ariaLabel: InputType = {
   control: {
@@ -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-hero/teaser-hero.ts b/src/components/teaser-hero/teaser-hero.ts
index c8dc511355..7c4e559944 100644
--- a/src/components/teaser-hero/teaser-hero.ts
+++ b/src/components/teaser-hero/teaser-hero.ts
@@ -2,12 +2,13 @@ import { type CSSResultGroup, nothing, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { SbbLinkBaseElement } from '../core/common-behaviors';
-import '../link/block-link-static';
-import '../image';
+import { SbbLinkBaseElement } from '../core/base-elements.js';
 
 import style from './teaser-hero.scss?lit&inline';
 
+import '../image.js';
+import '../link/block-link-static.js';
+
 /**
  * It displays an image and an action call within a panel.
  *
diff --git a/src/components/teaser-paid.ts b/src/components/teaser-paid.ts
new file mode 100644
index 0000000000..978d9cd1a6
--- /dev/null
+++ b/src/components/teaser-paid.ts
@@ -0,0 +1 @@
+export * from './teaser-paid/teaser-paid.js';
diff --git a/src/components/teaser-paid/index.ts b/src/components/teaser-paid/index.ts
deleted file mode 100644
index c4e83bbe86..0000000000
--- a/src/components/teaser-paid/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './teaser-paid';
diff --git a/src/components/teaser-paid/teaser-paid.e2e.ts b/src/components/teaser-paid/teaser-paid.e2e.ts
index 61137a6837..0a7e7fdc98 100644
--- a/src/components/teaser-paid/teaser-paid.e2e.ts
+++ b/src/components/teaser-paid/teaser-paid.e2e.ts
@@ -1,14 +1,14 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbChipElement } from '../chip';
-import { fixture } from '../core/testing/private';
-import type { SbbImageElement } from '../image';
+import type { SbbChipElement } from '../chip.js';
+import { fixture } from '../core/testing/private.js';
+import type { SbbImageElement } from '../image.js';
 
-import { SbbTeaserPaidElement } from './teaser-paid';
+import { SbbTeaserPaidElement } from './teaser-paid.js';
 
-import '../chip';
-import '../image';
+import '../chip.js';
+import '../image.js';
 
 describe(`sbb-teaser-paid with ${fixture.name}`, () => {
   let element: SbbTeaserPaidElement;
@@ -21,7 +21,7 @@ describe(`sbb-teaser-paid with ${fixture.name}`, () => {
           <sbb-image slot="image"></sbb-image>
         </sbb-teaser-paid>
       `,
-      { modules: ['./teaser-paid.ts', '../chip/index.ts', '../image/index.ts'] },
+      { modules: ['./teaser-paid.ts', '../chip.ts', '../image.ts'] },
     );
   });
 
diff --git a/src/components/teaser-paid/teaser-paid.scss b/src/components/teaser-paid/teaser-paid.scss
index a7f6357f81..e3eaf09fab 100644
--- a/src/components/teaser-paid/teaser-paid.scss
+++ b/src/components/teaser-paid/teaser-paid.scss
@@ -1,10 +1,11 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
+  display: block;
+
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
diff --git a/src/components/teaser-paid/teaser-paid.spec.ts b/src/components/teaser-paid/teaser-paid.spec.ts
index 4edf02cfcc..4b110c95bd 100644
--- a/src/components/teaser-paid/teaser-paid.spec.ts
+++ b/src/components/teaser-paid/teaser-paid.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import './teaser-paid';
+import './teaser-paid.js';
 
-import type { SbbTeaserPaidElement } from './teaser-paid';
+import type { SbbTeaserPaidElement } from './teaser-paid.js';
 
 describe(`sbb-teaser-paid`, () => {
   let element: SbbTeaserPaidElement;
diff --git a/src/components/teaser-paid/teaser-paid.stories.ts b/src/components/teaser-paid/teaser-paid.stories.ts
index 0371a9c8b7..2aff3ea646 100644
--- a/src/components/teaser-paid/teaser-paid.stories.ts
+++ b/src/components/teaser-paid/teaser-paid.stories.ts
@@ -3,14 +3,14 @@ import type { InputType } from '@storybook/types';
 import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import { html, type TemplateResult } from 'lit';
 
-import { sbbSpread } from '../core/dom';
-import sampleImages from '../core/images';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import sampleImages from '../core/images.js';
 
 import readme from './readme.md?raw';
 
-import '../chip';
-import '../image';
-import './teaser-paid';
+import '../chip.js';
+import '../image.js';
+import './teaser-paid.js';
 
 const ariaLabel: InputType = {
   control: {
@@ -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-paid/teaser-paid.ts b/src/components/teaser-paid/teaser-paid.ts
index 420e71d5ca..9a108a8094 100644
--- a/src/components/teaser-paid/teaser-paid.ts
+++ b/src/components/teaser-paid/teaser-paid.ts
@@ -1,7 +1,7 @@
 import { html, type CSSResultGroup, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbLinkBaseElement } from '../core/common-behaviors';
+import { SbbLinkBaseElement } from '../core/base-elements.js';
 
 import style from './teaser-paid.scss?lit&inline';
 
diff --git a/src/components/teaser.ts b/src/components/teaser.ts
new file mode 100644
index 0000000000..dbaff7bc37
--- /dev/null
+++ b/src/components/teaser.ts
@@ -0,0 +1 @@
+export * from './teaser/teaser.js';
diff --git a/src/components/teaser/__snapshots__/teaser.spec.snap.js b/src/components/teaser/__snapshots__/teaser.spec.snap.js
index 3508402b78..33cdc79dd9 100644
--- a/src/components/teaser/__snapshots__/teaser.spec.snap.js
+++ b/src/components/teaser/__snapshots__/teaser.spec.snap.js
@@ -1,7 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-teaser renders after centered - DOM"] = 
+snapshots["sbb-teaser renders after centered DOM"] = 
 `<sbb-teaser
   alignment="after-centered"
   aria-label="SBB teaser"
@@ -14,9 +14,9 @@ snapshots["sbb-teaser renders after centered - DOM"] =
 >
 </sbb-teaser>
 `;
-/* end snapshot sbb-teaser renders after centered - DOM */
+/* end snapshot sbb-teaser renders after centered DOM */
 
-snapshots["sbb-teaser renders after centered - ShadowDOM"] = 
+snapshots["sbb-teaser renders after centered Shadow DOM"] = 
 `<a
   class="sbb-action-base sbb-teaser"
   href="https://github.com/lyne-design-system/lyne-components"
@@ -55,9 +55,32 @@ snapshots["sbb-teaser renders after centered - ShadowDOM"] =
   </span>
 </a>
 `;
-/* end snapshot sbb-teaser renders after centered - ShadowDOM */
+/* end snapshot sbb-teaser renders after centered Shadow DOM */
 
-snapshots["sbb-teaser renders after with title level set - DOM"] = 
+snapshots["sbb-teaser renders after centered A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "SBB teaser",
+      "children": [
+        {
+          "role": "link",
+          "name": "​",
+          "value": "https://github.com/lyne-design-system/lyne-components"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-teaser renders after centered A11y tree Firefox */
+
+snapshots["sbb-teaser renders after with title level set DOM"] = 
 `<sbb-teaser
   alignment="after"
   aria-label="SBB teaser"
@@ -71,9 +94,9 @@ snapshots["sbb-teaser renders after with title level set - DOM"] =
 >
 </sbb-teaser>
 `;
-/* end snapshot sbb-teaser renders after with title level set - DOM */
+/* end snapshot sbb-teaser renders after with title level set DOM */
 
-snapshots["sbb-teaser renders after with title level set - ShadowDOM"] = 
+snapshots["sbb-teaser renders after with title level set Shadow DOM"] = 
 `<a
   class="sbb-action-base sbb-teaser"
   href="https://github.com/lyne-design-system/lyne-components"
@@ -112,9 +135,9 @@ snapshots["sbb-teaser renders after with title level set - ShadowDOM"] =
   </span>
 </a>
 `;
-/* end snapshot sbb-teaser renders after with title level set - ShadowDOM */
+/* end snapshot sbb-teaser renders after with title level set Shadow DOM */
 
-snapshots["sbb-teaser renders below with projected content - DOM"] = 
+snapshots["sbb-teaser renders below with projected content DOM"] = 
 `<sbb-teaser
   alignment="below"
   aria-label="SBB teaser"
@@ -140,9 +163,9 @@ snapshots["sbb-teaser renders below with projected content - DOM"] =
   description
 </sbb-teaser>
 `;
-/* end snapshot sbb-teaser renders below with projected content - DOM */
+/* end snapshot sbb-teaser renders below with projected content DOM */
 
-snapshots["sbb-teaser renders below with projected content - ShadowDOM"] = 
+snapshots["sbb-teaser renders below with projected content Shadow DOM"] = 
 `<a
   class="sbb-action-base sbb-teaser"
   href="https://github.com/lyne-design-system/lyne-components"
@@ -181,9 +204,9 @@ snapshots["sbb-teaser renders below with projected content - ShadowDOM"] =
   </span>
 </a>
 `;
-/* end snapshot sbb-teaser renders below with projected content - ShadowDOM */
+/* end snapshot sbb-teaser renders below with projected content Shadow DOM */
 
-snapshots["sbb-teaser A11y tree Chrome"] = 
+snapshots["sbb-teaser renders after centered A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -203,28 +226,5 @@ snapshots["sbb-teaser A11y tree Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-teaser A11y tree Chrome */
-
-snapshots["sbb-teaser A11y tree Firefox"] = 
-`<p>
-  {
-  "role": "document",
-  "name": "",
-  "children": [
-    {
-      "role": "link",
-      "name": "SBB teaser",
-      "children": [
-        {
-          "role": "link",
-          "name": "​",
-          "value": "https://github.com/lyne-design-system/lyne-components"
-        }
-      ]
-    }
-  ]
-}
-</p>
-`;
-/* end snapshot sbb-teaser A11y tree Firefox */
+/* end snapshot sbb-teaser renders after centered A11y tree Chrome */
 
diff --git a/src/components/teaser/stories/placeholder.png b/src/components/teaser/assets/placeholder.png
similarity index 100%
rename from src/components/teaser/stories/placeholder.png
rename to src/components/teaser/assets/placeholder.png
diff --git a/src/components/teaser/index.ts b/src/components/teaser/index.ts
deleted file mode 100644
index 36e660c2da..0000000000
--- a/src/components/teaser/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './teaser';
diff --git a/src/components/teaser/teaser.e2e.ts b/src/components/teaser/teaser.e2e.ts
index e31f737541..c3d1cc359b 100644
--- a/src/components/teaser/teaser.e2e.ts
+++ b/src/components/teaser/teaser.e2e.ts
@@ -1,10 +1,10 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
+import { EventSpy, waitForLitRender } from '../core/testing.js';
 
-import { SbbTeaserElement } from './teaser';
+import { SbbTeaserElement } from './teaser.js';
 
 describe(`sbb-teaser with ${fixture.name}`, () => {
   let element: SbbTeaserElement;
diff --git a/src/components/teaser/teaser.scss b/src/components/teaser/teaser.scss
index 883877760a..ea91fd4790 100644
--- a/src/components/teaser/teaser.scss
+++ b/src/components/teaser/teaser.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   display: inline-block;
diff --git a/src/components/teaser/teaser.spec.ts b/src/components/teaser/teaser.spec.ts
index ea1049499d..cb83218b1c 100644
--- a/src/components/teaser/teaser.spec.ts
+++ b/src/components/teaser/teaser.spec.ts
@@ -1,83 +1,81 @@
 import { expect } from '@open-wc/testing';
-import type { TemplateResult } from 'lit';
 import { html } from 'lit/static-html.js';
 
-import { sbbSpread } from '../core/dom';
-import images from '../core/images';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import images from '../core/images.js';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbTeaserElement } from './teaser';
+import type { SbbTeaserElement } from './teaser.js';
 
-import './teaser';
+import './teaser.js';
 
 describe(`sbb-teaser`, () => {
-  const createTeaser = (args: Record<string, string>): TemplateResult => {
-    return html`<sbb-teaser ${sbbSpread(args)}></sbb-teaser>`;
-  };
+  let element: SbbTeaserElement;
 
-  const argsAfterCentered = {
-    href: 'https://github.com/lyne-design-system/lyne-components',
-    alignment: 'after-centered',
-    'aria-label': 'SBB teaser',
-  };
+  describe('renders after centered', () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-teaser
+          href="https://github.com/lyne-design-system/lyne-components"
+          alignment="after-centered"
+          aria-label="SBB teaser"
+        ></sbb-teaser>`,
+      );
+    });
 
-  const argsAfter = {
-    ...argsAfterCentered,
-    alignment: 'after',
-    'title-level': '2',
-  };
+    it('DOM', async () => {
+      await expect(element).dom.to.equalSnapshot();
+    });
 
-  it('renders after centered - DOM', async () => {
-    const root: SbbTeaserElement = await fixture(createTeaser(argsAfterCentered));
-    await expect(root).dom.to.equalSnapshot();
-  });
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
 
-  it('renders after centered - ShadowDOM', async () => {
-    const root: SbbTeaserElement = await fixture(createTeaser(argsAfterCentered));
-    await expect(root).shadowDom.to.equalSnapshot();
+    testA11yTreeSnapshot();
   });
 
-  it('renders after with title level set - DOM', async () => {
-    const root: SbbTeaserElement = await fixture(createTeaser(argsAfter));
-    await expect(root).dom.to.equalSnapshot();
-  });
+  describe('renders after with title level set', () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-teaser
+          href="https://github.com/lyne-design-system/lyne-components"
+          alignment="after"
+          aria-label="SBB teaser"
+          title-level="2"
+        ></sbb-teaser>`,
+      );
+    });
 
-  it('renders after with title level set - ShadowDOM', async () => {
-    const root: SbbTeaserElement = await fixture(createTeaser(argsAfter));
-    await expect(root).shadowDom.to.equalSnapshot();
-  });
+    it('DOM', async () => {
+      await expect(element).dom.to.equalSnapshot();
+    });
 
-  it('renders below with projected content - DOM', async () => {
-    const root: SbbTeaserElement = await fixture(html`
-      <sbb-teaser
-        href="https://github.com/lyne-design-system/lyne-components"
-        aria-label="SBB teaser"
-        alignment="below"
-      >
-        <img slot="image" src=${images[0]} alt="400x300" />
-        <span slot="chip">Chip</span>
-        <span slot="title">TITLE</span>
-        description
-      </sbb-teaser>
-    `);
-    await expect(root).dom.to.equalSnapshot();
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
   });
 
-  it('renders below with projected content - ShadowDOM', async () => {
-    const root: SbbTeaserElement = await fixture(html`
-      <sbb-teaser
-        href="https://github.com/lyne-design-system/lyne-components"
-        aria-label="SBB teaser"
-        alignment="below"
-      >
-        <img slot="image" src=${images[0]} alt="400x300" />
-        <span slot="chip">Chip</span>
-        <span slot="title">TITLE</span>
-        description
-      </sbb-teaser>
-    `);
-    await expect(root).shadowDom.to.equalSnapshot();
-  });
+  describe('renders below with projected content', () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-teaser
+          href="https://github.com/lyne-design-system/lyne-components"
+          aria-label="SBB teaser"
+          alignment="below"
+        >
+          <img slot="image" src=${images[0]} alt="400x300" />
+          <span slot="chip">Chip</span>
+          <span slot="title">TITLE</span>
+          description
+        </sbb-teaser>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.equalSnapshot();
+    });
 
-  testA11yTreeSnapshot(createTeaser(argsAfterCentered));
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
 });
diff --git a/src/components/teaser/teaser.stories.ts b/src/components/teaser/teaser.stories.ts
index 249ff551e2..7dba0ac814 100644
--- a/src/components/teaser/teaser.stories.ts
+++ b/src/components/teaser/teaser.stories.ts
@@ -5,11 +5,11 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
+import placeholderImage from './assets/placeholder.png';
 import readme from './readme.md?raw';
-import placeholderImage from './stories/placeholder.png';
-import './teaser';
+import './teaser.js';
 
 const loremIpsum: string = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
 invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
@@ -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/teaser/teaser.ts b/src/components/teaser/teaser.ts
index 1852fc6ed8..7af95a6966 100644
--- a/src/components/teaser/teaser.ts
+++ b/src/components/teaser/teaser.ts
@@ -2,13 +2,15 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { NamedSlotStateController, SbbLinkBaseElement } from '../core/common-behaviors';
-import type { SbbTitleLevel } from '../title';
-import '../title';
-import '../chip';
+import { SbbLinkBaseElement } from '../core/base-elements.js';
+import { SbbSlotStateController } from '../core/controllers.js';
+import type { SbbTitleLevel } from '../title.js';
 
 import style from './teaser.scss?lit&inline';
 
+import '../chip.js';
+import '../title.js';
+
 /**
  * It displays an interactive image with caption.
  *
@@ -36,7 +38,7 @@ export class SbbTeaserElement extends SbbLinkBaseElement {
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   protected override renderTemplate(): TemplateResult {
diff --git a/src/components/time-input.ts b/src/components/time-input.ts
new file mode 100644
index 0000000000..b0bce750ab
--- /dev/null
+++ b/src/components/time-input.ts
@@ -0,0 +1 @@
+export * from './time-input/time-input.js';
diff --git a/src/components/time-input/index.ts b/src/components/time-input/index.ts
deleted file mode 100644
index 6dd078c20a..0000000000
--- a/src/components/time-input/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './time-input';
diff --git a/src/components/time-input/readme.md b/src/components/time-input/readme.md
index 0515f2f358..c6f59852e0 100644
--- a/src/components/time-input/readme.md
+++ b/src/components/time-input/readme.md
@@ -72,7 +72,7 @@ Whenever the validation state changes (e.g., a valid value becomes invalid or vi
 
 ## Events
 
-| Name               | Type                                 | Description                                                                      | Inherited From |
-| ------------------ | ------------------------------------ | -------------------------------------------------------------------------------- | -------------- |
-| `didChange`        | `CustomEvent<void>`                  | Deprecated. used for React. Will probably be removed once React 19 is available. |                |
-| `validationChange` | `CustomEvent<ValidationChangeEvent>` | Emits whenever the internal validation state changes.                            |                |
+| Name               | Type                                    | Description                                                                      | Inherited From |
+| ------------------ | --------------------------------------- | -------------------------------------------------------------------------------- | -------------- |
+| `didChange`        | `CustomEvent<void>`                     | Deprecated. used for React. Will probably be removed once React 19 is available. |                |
+| `validationChange` | `CustomEvent<SbbValidationChangeEvent>` | Emits whenever the internal validation state changes.                            |                |
diff --git a/src/components/time-input/time-input.e2e.ts b/src/components/time-input/time-input.e2e.ts
index bac2523042..b7da736f98 100644
--- a/src/components/time-input/time-input.e2e.ts
+++ b/src/components/time-input/time-input.e2e.ts
@@ -3,14 +3,14 @@ import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 import type { Context } from 'mocha';
 
-import { i18nTimeInputChange } from '../core/i18n';
-import type { ValidationChangeEvent } from '../core/interfaces';
-import { EventSpy, waitForLitRender } from '../core/testing';
-import { clearElement, fixture, typeInElement } from '../core/testing/private';
+import { i18nTimeInputChange } from '../core/i18n.js';
+import type { SbbValidationChangeEvent } from '../core/interfaces.js';
+import { clearElement, fixture, typeInElement } from '../core/testing/private.js';
+import { EventSpy, waitForLitRender } from '../core/testing.js';
 
-import { SbbTimeInputElement } from './time-input';
+import { SbbTimeInputElement } from './time-input.js';
 
-import '../form-field/form-field';
+import '../form-field/form-field.js';
 
 describe(`sbb-time-input with ${fixture.name}`, () => {
   let element: SbbTimeInputElement, input: HTMLInputElement;
@@ -52,7 +52,7 @@ describe(`sbb-time-input with ${fixture.name}`, () => {
   });
 
   it('should emit validation change event', async () => {
-    const validationChangeSpy = new EventSpy<CustomEvent<ValidationChangeEvent>>(
+    const validationChangeSpy = new EventSpy<CustomEvent<SbbValidationChangeEvent>>(
       SbbTimeInputElement.events.validationChange,
       element,
     );
@@ -93,7 +93,7 @@ describe(`sbb-time-input with ${fixture.name}`, () => {
     input.blur();
     await waitForLitRender(element);
 
-    const validationChangeSpy = new EventSpy<CustomEvent<ValidationChangeEvent>>(
+    const validationChangeSpy = new EventSpy<CustomEvent<SbbValidationChangeEvent>>(
       SbbTimeInputElement.events.validationChange,
       element,
     );
@@ -232,7 +232,7 @@ describe(`sbb-time-input with ${fixture.name}`, () => {
           <input />
         </sbb-form-field>
       `,
-      { modules: ['../form-field/index.ts', './time-input.ts'] },
+      { modules: ['../form-field.ts', './time-input.ts'] },
     );
     element = root.querySelector<SbbTimeInputElement>('sbb-time-input')!;
     input = root.querySelector<HTMLInputElement>('input')!;
diff --git a/src/components/time-input/time-input.spec.ts b/src/components/time-input/time-input.spec.ts
index 4ad7f27b65..4eb96e7647 100644
--- a/src/components/time-input/time-input.spec.ts
+++ b/src/components/time-input/time-input.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import './time-input';
+import './time-input.js';
 
 describe(`sbb-time-input`, () => {
   it('renders', async () => {
diff --git a/src/components/time-input/time-input.stories.ts b/src/components/time-input/time-input.stories.ts
index 0ad0f40c9a..9ac6d11eb4 100644
--- a/src/components/time-input/time-input.stories.ts
+++ b/src/components/time-input/time-input.stories.ts
@@ -10,21 +10,16 @@ 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 '../core/dom';
-import type { SbbFormErrorElement } from '../form-error';
-import type { SbbFormFieldElement } from '../form-field';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import type { SbbFormErrorElement } from '../form-error.js';
+import type { SbbFormFieldElement } from '../form-field.js';
 
 import readme from './readme.md?raw';
-import { SbbTimeInputElement } from './time-input';
-import '../button/secondary-button';
-import '../form-field';
-import '../form-error';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import { SbbTimeInputElement } from './time-input.js';
+import '../button/secondary-button.js';
+import '../form-field.js';
+import '../form-error.js';
 
 const updateFormError = (event: CustomEvent): void => {
   const valid = event.detail.valid;
@@ -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/time-input/time-input.ts b/src/components/time-input/time-input.ts
index 73c2d7b9e9..15aa12681d 100644
--- a/src/components/time-input/time-input.ts
+++ b/src/components/time-input/time-input.ts
@@ -3,11 +3,11 @@ import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
-import { LanguageController } from '../core/common-behaviors';
-import { findInput, isValidAttribute } from '../core/dom';
-import { forwardEventToHost, EventEmitter } from '../core/eventing';
-import { i18nTimeInputChange } from '../core/i18n';
-import type { ValidationChangeEvent, SbbDateLike } from '../core/interfaces';
+import { SbbLanguageController } from '../core/controllers.js';
+import { findInput } from '../core/dom.js';
+import { EventEmitter, forwardEventToHost } from '../core/eventing.js';
+import { i18nTimeInputChange } from '../core/i18n.js';
+import type { SbbDateLike, SbbValidationChangeEvent } from '../core/interfaces.js';
 
 import style from './time-input.scss?lit&inline';
 
@@ -24,7 +24,7 @@ interface Time {
  * * Combined with a native input, it displays the input's value as a formatted time.
  *
  * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
- * @event {CustomEvent<ValidationChangeEvent>} validationChange - Emits whenever the internal validation state changes.
+ * @event {CustomEvent<SbbValidationChangeEvent>} validationChange - Emits whenever the internal validation state changes.
  */
 @customElement('sbb-time-input')
 export class SbbTimeInputElement extends LitElement {
@@ -56,7 +56,7 @@ export class SbbTimeInputElement extends LitElement {
   });
 
   /** Emits whenever the internal validation state changes. */
-  private _validationChange: EventEmitter<ValidationChangeEvent> = new EventEmitter(
+  private _validationChange: EventEmitter<SbbValidationChangeEvent> = new EventEmitter(
     this,
     SbbTimeInputElement.events.validationChange,
     {
@@ -67,7 +67,7 @@ export class SbbTimeInputElement extends LitElement {
 
   private _statusContainer!: HTMLParagraphElement;
   private _abortController = new AbortController();
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   public override connectedCallback(): void {
     super.connectedCallback();
@@ -179,7 +179,7 @@ export class SbbTimeInputElement extends LitElement {
       this._inputElement.value = this._formatValue(time);
     }
 
-    const wasValid = !isValidAttribute(this._inputElement, 'data-sbb-invalid');
+    const wasValid = !this._inputElement.hasAttribute('data-sbb-invalid');
     this._inputElement.toggleAttribute('data-sbb-invalid', !isEmptyOrValid);
     if (wasValid !== isEmptyOrValid) {
       this._validationChange.emit({ valid: isEmptyOrValid });
@@ -268,7 +268,7 @@ export class SbbTimeInputElement extends LitElement {
   // We use a programmatic approach to avoid initial setting the message
   // and to not immediately change output if language should change (no reason to read out message).
   private _updateAccessibilityMessage(): void {
-    const valid = !isValidAttribute(this._inputElement!, 'data-sbb-invalid');
+    const valid = !this._inputElement!.hasAttribute('data-sbb-invalid');
     if (!valid) {
       return;
     }
diff --git a/src/components/timetable-duration.ts b/src/components/timetable-duration.ts
new file mode 100644
index 0000000000..010d59b4da
--- /dev/null
+++ b/src/components/timetable-duration.ts
@@ -0,0 +1 @@
+export * from './timetable-duration/timetable-duration.js';
diff --git a/src/components/timetable-duration/index.ts b/src/components/timetable-duration/index.ts
deleted file mode 100644
index 9dadf2a514..0000000000
--- a/src/components/timetable-duration/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './timetable-duration';
diff --git a/src/components/timetable-duration/timetable-duration.e2e.ts b/src/components/timetable-duration/timetable-duration.e2e.ts
index c0ff08e4eb..ceef154e2c 100644
--- a/src/components/timetable-duration/timetable-duration.e2e.ts
+++ b/src/components/timetable-duration/timetable-duration.e2e.ts
@@ -1,10 +1,10 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbTimetableDurationElement } from './timetable-duration';
-import sampleData from './timetable-duration.sample-data';
+import { SbbTimetableDurationElement } from './timetable-duration.js';
+import sampleData from './timetable-duration.sample-data.js';
 
 const config = JSON.stringify(sampleData[0]);
 
diff --git a/src/components/timetable-duration/timetable-duration.sample-data.js b/src/components/timetable-duration/timetable-duration.sample-data.ts
similarity index 100%
rename from src/components/timetable-duration/timetable-duration.sample-data.js
rename to src/components/timetable-duration/timetable-duration.sample-data.ts
diff --git a/src/components/timetable-duration/timetable-duration.scss b/src/components/timetable-duration/timetable-duration.scss
index 5cf87f7937..0af58416ea 100644
--- a/src/components/timetable-duration/timetable-duration.scss
+++ b/src/components/timetable-duration/timetable-duration.scss
@@ -1,5 +1,12 @@
 @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 {
+  display: inline-block;
+}
+
 .duration {
   @include sbb.text-s--regular;
 
diff --git a/src/components/timetable-duration/timetable-duration.spec.ts b/src/components/timetable-duration/timetable-duration.spec.ts
index af630a721c..4fa2c6a909 100644
--- a/src/components/timetable-duration/timetable-duration.spec.ts
+++ b/src/components/timetable-duration/timetable-duration.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import sampleData from './timetable-duration.sample-data';
+import sampleData from './timetable-duration.sample-data.js';
 
-import './timetable-duration';
+import './timetable-duration.js';
 
 const config = JSON.stringify(sampleData[0]);
 
diff --git a/src/components/timetable-duration/timetable-duration.stories.ts b/src/components/timetable-duration/timetable-duration.stories.ts
index 7c4970a47a..27cf666a2b 100644
--- a/src/components/timetable-duration/timetable-duration.stories.ts
+++ b/src/components/timetable-duration/timetable-duration.stories.ts
@@ -3,8 +3,8 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
 import readme from './readme.md?raw';
-import sampleData from './timetable-duration.sample-data';
-import './timetable-duration';
+import sampleData from './timetable-duration.sample-data.js';
+import './timetable-duration.js';
 
 const Template = ({ config }: Args): TemplateResult => html`
   <sbb-timetable-duration config=${JSON.stringify(config)}></sbb-timetable-duration>
@@ -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-duration/timetable-duration.ts b/src/components/timetable-duration/timetable-duration.ts
index d5e10a31ed..b369ea3453 100644
--- a/src/components/timetable-duration/timetable-duration.ts
+++ b/src/components/timetable-duration/timetable-duration.ts
@@ -2,8 +2,8 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { LanguageController } from '../core/common-behaviors';
-import { i18nDurationHour, i18nDurationMinute } from '../core/i18n';
+import { SbbLanguageController } from '../core/controllers.js';
+import { i18nDurationHour, i18nDurationMinute } from '../core/i18n.js';
 
 import style from './timetable-duration.scss?lit&inline';
 
@@ -22,7 +22,7 @@ export class SbbTimetableDurationElement extends LitElement {
    */
   @property() public config!: string;
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   protected override render(): TemplateResult {
     const config = JSON.parse(this.config);
diff --git a/src/components/timetable-occupancy-icon.ts b/src/components/timetable-occupancy-icon.ts
new file mode 100644
index 0000000000..8e4134e463
--- /dev/null
+++ b/src/components/timetable-occupancy-icon.ts
@@ -0,0 +1 @@
+export * from './timetable-occupancy-icon/timetable-occupancy-icon.js';
diff --git a/src/components/timetable-occupancy-icon/index.ts b/src/components/timetable-occupancy-icon/index.ts
deleted file mode 100644
index 9e4f0194a5..0000000000
--- a/src/components/timetable-occupancy-icon/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './timetable-occupancy-icon';
diff --git a/src/components/timetable-occupancy-icon/timetable-occupancy-icon.e2e.ts b/src/components/timetable-occupancy-icon/timetable-occupancy-icon.e2e.ts
index 9ec58df44b..1ea451c0ea 100644
--- a/src/components/timetable-occupancy-icon/timetable-occupancy-icon.e2e.ts
+++ b/src/components/timetable-occupancy-icon/timetable-occupancy-icon.e2e.ts
@@ -3,11 +3,11 @@ import { html } from 'lit/static-html.js';
 import type { SinonStub } from 'sinon';
 import { stub } from 'sinon';
 
-import { i18nOccupancy } from '../core/i18n';
-import { waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import { i18nOccupancy } from '../core/i18n.js';
+import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
 
-import { SbbTimetableOccupancyIconElement } from './timetable-occupancy-icon';
+import { SbbTimetableOccupancyIconElement } from './timetable-occupancy-icon.js';
 
 describe(`sbb-timetable-occupancy-icon with ${fixture.name}`, () => {
   let matchMediaStub: SinonStub<[query: string], MediaQueryList>;
diff --git a/src/components/timetable-occupancy-icon/timetable-occupancy-icon.spec.ts b/src/components/timetable-occupancy-icon/timetable-occupancy-icon.spec.ts
index 7aaf10bc7d..2e1590157f 100644
--- a/src/components/timetable-occupancy-icon/timetable-occupancy-icon.spec.ts
+++ b/src/components/timetable-occupancy-icon/timetable-occupancy-icon.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import './timetable-occupancy-icon';
+import './timetable-occupancy-icon.js';
 
 describe(`sbb-timetable-occupancy-icon`, () => {
   it('renders with high occupancy', async () => {
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 efda0446f5..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,16 +3,11 @@ 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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './timetable-occupancy-icon';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import './timetable-occupancy-icon.js';
 
 const negative: InputType = {
   control: {
@@ -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-icon/timetable-occupancy-icon.ts b/src/components/timetable-occupancy-icon/timetable-occupancy-icon.ts
index 4ff4680c13..ff253dd694 100644
--- a/src/components/timetable-occupancy-icon/timetable-occupancy-icon.ts
+++ b/src/components/timetable-occupancy-icon/timetable-occupancy-icon.ts
@@ -1,11 +1,12 @@
 import type { CSSResultGroup, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { LanguageController, SbbNegativeMixin } from '../core/common-behaviors';
-import { ConnectedAbortController } from '../core/eventing';
-import { i18nOccupancy } from '../core/i18n';
-import type { SbbOccupancy } from '../core/interfaces';
-import { SbbIconBase } from '../icon';
+import { SbbConnectedAbortController, SbbLanguageController } from '../core/controllers.js';
+import { setOrRemoveAttribute } from '../core/dom.js';
+import { i18nOccupancy } from '../core/i18n.js';
+import type { SbbOccupancy } from '../core/interfaces.js';
+import { SbbNegativeMixin } from '../core/mixins.js';
+import { SbbIconBase } from '../icon.js';
 
 import style from './timetable-occupancy-icon.scss?lit&inline';
 
@@ -19,8 +20,8 @@ export class SbbTimetableOccupancyIconElement extends SbbNegativeMixin(SbbIconBa
   /** Wagon occupancy. */
   @property() public occupancy!: SbbOccupancy;
 
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this).withHandler(() => this._setAriaLabel());
+  private _abort = new SbbConnectedAbortController(this);
+  private _language = new SbbLanguageController(this).withHandler(() => this._setAriaLabel());
 
   private async _setNameAndAriaLabel(): Promise<void> {
     if (!this.occupancy) {
@@ -51,11 +52,7 @@ export class SbbTimetableOccupancyIconElement extends SbbNegativeMixin(SbbIconBa
     const label = (i18nOccupancy[this.occupancy] as Record<string, string>)?.[
       this._language.current
     ];
-    if (label) {
-      this.setAttribute('aria-label', label);
-    } else {
-      this.removeAttribute('aria-label');
-    }
+    setOrRemoveAttribute(this, 'aria-label', label);
   }
 
   public override connectedCallback(): void {
diff --git a/src/components/timetable-occupancy.ts b/src/components/timetable-occupancy.ts
new file mode 100644
index 0000000000..89405f4023
--- /dev/null
+++ b/src/components/timetable-occupancy.ts
@@ -0,0 +1 @@
+export * from './timetable-occupancy/timetable-occupancy.js';
diff --git a/src/components/timetable-occupancy/__snapshots__/timetable-occupancy.spec.snap.js b/src/components/timetable-occupancy/__snapshots__/timetable-occupancy.spec.snap.js
index 654ce5cbd5..aa95fb350d 100644
--- a/src/components/timetable-occupancy/__snapshots__/timetable-occupancy.spec.snap.js
+++ b/src/components/timetable-occupancy/__snapshots__/timetable-occupancy.spec.snap.js
@@ -1,16 +1,16 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-timetable-occupancy renders - DOM"] = 
+snapshots["sbb-timetable-occupancy renders DOM"] = 
 `<sbb-timetable-occupancy
   first-class-occupancy="high"
   second-class-occupancy="high"
 >
 </sbb-timetable-occupancy>
 `;
-/* end snapshot sbb-timetable-occupancy renders - DOM */
+/* end snapshot sbb-timetable-occupancy renders DOM */
 
-snapshots["sbb-timetable-occupancy renders - ShadowDOM"] = 
+snapshots["sbb-timetable-occupancy renders Shadow DOM"] = 
 `<ul class="sbb-timetable-occupancy__list">
   <li class="sbb-timetable-occupancy__list-item">
     <span
@@ -50,9 +50,29 @@ snapshots["sbb-timetable-occupancy renders - ShadowDOM"] =
   </li>
 </ul>
 `;
-/* end snapshot sbb-timetable-occupancy renders - ShadowDOM */
+/* end snapshot sbb-timetable-occupancy renders Shadow DOM */
 
-snapshots["sbb-timetable-occupancy renders negative - DOM"] = 
+snapshots["sbb-timetable-occupancy renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "First Class."
+    },
+    {
+      "role": "text",
+      "name": "Second Class."
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-timetable-occupancy renders A11y tree Chrome */
+
+snapshots["sbb-timetable-occupancy renders negative DOM"] = 
 `<sbb-timetable-occupancy
   first-class-occupancy="low"
   negative=""
@@ -60,9 +80,9 @@ snapshots["sbb-timetable-occupancy renders negative - DOM"] =
 >
 </sbb-timetable-occupancy>
 `;
-/* end snapshot sbb-timetable-occupancy renders negative - DOM */
+/* end snapshot sbb-timetable-occupancy renders negative DOM */
 
-snapshots["sbb-timetable-occupancy renders negative - ShadowDOM"] = 
+snapshots["sbb-timetable-occupancy renders negative Shadow DOM"] = 
 `<ul class="sbb-timetable-occupancy__list">
   <li class="sbb-timetable-occupancy__list-item">
     <span
@@ -104,15 +124,15 @@ snapshots["sbb-timetable-occupancy renders negative - ShadowDOM"] =
   </li>
 </ul>
 `;
-/* end snapshot sbb-timetable-occupancy renders negative - ShadowDOM */
+/* end snapshot sbb-timetable-occupancy renders negative Shadow DOM */
 
-snapshots["sbb-timetable-occupancy renders only first class wagon - DOM"] = 
+snapshots["sbb-timetable-occupancy renders only first class wagon DOM"] = 
 `<sbb-timetable-occupancy first-class-occupancy="low">
 </sbb-timetable-occupancy>
 `;
-/* end snapshot sbb-timetable-occupancy renders only first class wagon - DOM */
+/* end snapshot sbb-timetable-occupancy renders only first class wagon DOM */
 
-snapshots["sbb-timetable-occupancy renders only first class wagon - ShadowDOM"] = 
+snapshots["sbb-timetable-occupancy renders only first class wagon Shadow DOM"] = 
 `<ul
   class="sbb-timetable-occupancy__list"
   role="presentation"
@@ -137,15 +157,15 @@ snapshots["sbb-timetable-occupancy renders only first class wagon - ShadowDOM"]
   </li>
 </ul>
 `;
-/* end snapshot sbb-timetable-occupancy renders only first class wagon - ShadowDOM */
+/* end snapshot sbb-timetable-occupancy renders only first class wagon Shadow DOM */
 
-snapshots["sbb-timetable-occupancy renders only second class wagon - DOM"] = 
+snapshots["sbb-timetable-occupancy renders only second class wagon DOM"] = 
 `<sbb-timetable-occupancy second-class-occupancy="none">
 </sbb-timetable-occupancy>
 `;
-/* end snapshot sbb-timetable-occupancy renders only second class wagon - DOM */
+/* end snapshot sbb-timetable-occupancy renders only second class wagon DOM */
 
-snapshots["sbb-timetable-occupancy renders only second class wagon - ShadowDOM"] = 
+snapshots["sbb-timetable-occupancy renders only second class wagon Shadow DOM"] = 
 `<ul
   class="sbb-timetable-occupancy__list"
   role="presentation"
@@ -170,5 +190,33 @@ snapshots["sbb-timetable-occupancy renders only second class wagon - ShadowDOM"]
   </li>
 </ul>
 `;
-/* end snapshot sbb-timetable-occupancy renders only second class wagon - ShadowDOM */
+/* end snapshot sbb-timetable-occupancy renders only second class wagon Shadow DOM */
+
+snapshots["sbb-timetable-occupancy renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "First Class."
+    },
+    {
+      "role": "img",
+      "name": "Very high occupancy expected"
+    },
+    {
+      "role": "text leaf",
+      "name": "Second Class."
+    },
+    {
+      "role": "img",
+      "name": "Very high occupancy expected"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-timetable-occupancy renders A11y tree Firefox */
 
diff --git a/src/components/timetable-occupancy/index.ts b/src/components/timetable-occupancy/index.ts
deleted file mode 100644
index bb546036e7..0000000000
--- a/src/components/timetable-occupancy/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './timetable-occupancy';
diff --git a/src/components/timetable-occupancy/timetable-occupancy.e2e.ts b/src/components/timetable-occupancy/timetable-occupancy.e2e.ts
index 3a8aa92d32..e37b05f449 100644
--- a/src/components/timetable-occupancy/timetable-occupancy.e2e.ts
+++ b/src/components/timetable-occupancy/timetable-occupancy.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbTimetableOccupancyElement } from './timetable-occupancy';
+import { SbbTimetableOccupancyElement } from './timetable-occupancy.js';
 
 describe(`sbb-timetable-occupancy with ${fixture.name}`, () => {
   let element: SbbTimetableOccupancyElement;
diff --git a/src/components/timetable-occupancy/timetable-occupancy.scss b/src/components/timetable-occupancy/timetable-occupancy.scss
index 153e7da5fb..24eb4e44d6 100644
--- a/src/components/timetable-occupancy/timetable-occupancy.scss
+++ b/src/components/timetable-occupancy/timetable-occupancy.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-timetable-occupancy-color: var(--sbb-color-charcoal);
diff --git a/src/components/timetable-occupancy/timetable-occupancy.spec.ts b/src/components/timetable-occupancy/timetable-occupancy.spec.ts
index d92cc024ae..27f13554dc 100644
--- a/src/components/timetable-occupancy/timetable-occupancy.spec.ts
+++ b/src/components/timetable-occupancy/timetable-occupancy.spec.ts
@@ -1,87 +1,85 @@
 import { expect } from '@open-wc/testing';
-import type { Args } from '@storybook/web-components';
-import type { TemplateResult } from 'lit';
 import { html } from 'lit/static-html.js';
 
-import { sbbSpread } from '../core/dom';
-import { fixture } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbTimetableOccupancyElement } from './timetable-occupancy';
+import type { SbbTimetableOccupancyElement } from './timetable-occupancy.js';
 
-import './timetable-occupancy';
+import './timetable-occupancy.js';
 
 describe(`sbb-timetable-occupancy`, () => {
-  const renderComponent: (args: Args) => TemplateResult = (args: Args) => {
-    return html`<sbb-timetable-occupancy ${sbbSpread(args)}></sbb-timetable-occupancy>`;
-  };
-
-  it('renders - DOM', async () => {
-    const element: SbbTimetableOccupancyElement = await fixture(
-      renderComponent({
-        'first-class-occupancy': 'high',
-        'second-class-occupancy': 'high',
-      }),
-    );
-    await expect(element).dom.to.be.equalSnapshot();
-  });
+  let element: SbbTimetableOccupancyElement;
 
-  it('renders - ShadowDOM', async () => {
-    const element: SbbTimetableOccupancyElement = await fixture(
-      renderComponent({
-        'first-class-occupancy': 'high',
-        'second-class-occupancy': 'high',
-      }),
-    );
-    await expect(element).shadowDom.to.be.equalSnapshot();
-  });
+  describe('renders', () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html` <sbb-timetable-occupancy
+          first-class-occupancy="high"
+          second-class-occupancy="high"
+        ></sbb-timetable-occupancy>`,
+      );
+    });
 
-  it('renders negative - DOM', async () => {
-    const element: SbbTimetableOccupancyElement = await fixture(
-      renderComponent({
-        'first-class-occupancy': 'low',
-        'second-class-occupancy': 'medium',
-        negative: true,
-      }),
-    );
-    await expect(element).dom.to.be.equalSnapshot();
-  });
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-  it('renders negative - ShadowDOM', async () => {
-    const element: SbbTimetableOccupancyElement = await fixture(
-      renderComponent({
-        'first-class-occupancy': 'low',
-        'second-class-occupancy': 'medium',
-        negative: true,
-      }),
-    );
-    await expect(element).shadowDom.to.be.equalSnapshot();
-  });
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
 
-  it('renders only first class wagon - DOM', async () => {
-    const element: SbbTimetableOccupancyElement = await fixture(
-      renderComponent({ 'first-class-occupancy': 'low' }),
-    );
-    await expect(element).dom.to.be.equalSnapshot();
+    testA11yTreeSnapshot();
   });
 
-  it('renders only first class wagon - ShadowDOM', async () => {
-    const element: SbbTimetableOccupancyElement = await fixture(
-      renderComponent({ 'first-class-occupancy': 'low' }),
-    );
-    await expect(element).shadowDom.to.be.equalSnapshot();
+  describe('renders negative', () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html` <sbb-timetable-occupancy
+          first-class-occupancy="low"
+          second-class-occupancy="medium"
+          negative
+        ></sbb-timetable-occupancy>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
   });
 
-  it('renders only second class wagon - DOM', async () => {
-    const element: SbbTimetableOccupancyElement = await fixture(
-      renderComponent({ 'second-class-occupancy': 'none' }),
-    );
-    await expect(element).dom.to.be.equalSnapshot();
+  describe('renders only first class wagon', () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html` <sbb-timetable-occupancy first-class-occupancy="low"></sbb-timetable-occupancy>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
   });
 
-  it('renders only second class wagon - ShadowDOM', async () => {
-    const element: SbbTimetableOccupancyElement = await fixture(
-      renderComponent({ 'second-class-occupancy': 'none' }),
-    );
-    await expect(element).shadowDom.to.be.equalSnapshot();
+  describe('renders only second class wagon', () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html` <sbb-timetable-occupancy second-class-occupancy="none"></sbb-timetable-occupancy>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
   });
 });
diff --git a/src/components/timetable-occupancy/timetable-occupancy.stories.ts b/src/components/timetable-occupancy/timetable-occupancy.stories.ts
index 840cf96dd2..a6f1db4739 100644
--- a/src/components/timetable-occupancy/timetable-occupancy.stories.ts
+++ b/src/components/timetable-occupancy/timetable-occupancy.stories.ts
@@ -2,18 +2,13 @@ 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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
-import './timetable-occupancy';
+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-occupancy/timetable-occupancy.ts b/src/components/timetable-occupancy/timetable-occupancy.ts
index 6ad86993b1..f2736f9fac 100644
--- a/src/components/timetable-occupancy/timetable-occupancy.ts
+++ b/src/components/timetable-occupancy/timetable-occupancy.ts
@@ -2,14 +2,15 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { LanguageController, SbbNegativeMixin } from '../core/common-behaviors';
-import { i18nClass } from '../core/i18n';
-import type { SbbOccupancy } from '../core/interfaces';
+import { SbbLanguageController } from '../core/controllers.js';
+import { i18nClass } from '../core/i18n.js';
+import type { SbbOccupancy } from '../core/interfaces.js';
+import { SbbNegativeMixin } from '../core/mixins.js';
 
 import style from './timetable-occupancy.scss?lit&inline';
 
-import '../screen-reader-only';
-import '../timetable-occupancy-icon';
+import '../screen-reader-only.js';
+import '../timetable-occupancy-icon.js';
 
 /**
  * Used in `sbb-timetable-row`, it displays information about wagon occupancy.
@@ -24,7 +25,7 @@ export class SbbTimetableOccupancyElement extends SbbNegativeMixin(LitElement) {
   /** Occupancy for second class wagons. */
   @property({ attribute: 'second-class-occupancy' }) public secondClassOccupancy?: SbbOccupancy;
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   protected override render(): TemplateResult {
     return html` ${(this.firstClassOccupancy || this.secondClassOccupancy) &&
diff --git a/src/components/timetable-row.ts b/src/components/timetable-row.ts
new file mode 100644
index 0000000000..3ed4753508
--- /dev/null
+++ b/src/components/timetable-row.ts
@@ -0,0 +1 @@
+export * from './timetable-row/timetable-row.js';
diff --git a/src/components/timetable-row/index.ts b/src/components/timetable-row/index.ts
deleted file mode 100644
index 1f28403943..0000000000
--- a/src/components/timetable-row/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './timetable-row';
diff --git a/src/components/timetable-row/readme.md b/src/components/timetable-row/readme.md
index 9fb2864596..9795805d93 100644
--- a/src/components/timetable-row/readme.md
+++ b/src/components/timetable-row/readme.md
@@ -54,8 +54,8 @@ This is helpful if you need a specific state of the component.
 | `price`                 | `price`                  | public  | `Price \| undefined`    |         | The price Prop, which consists of the data for the badge.                                                                                                                                     |
 | `disableAnimation`      | `disable-animation`      | public  | `boolean \| undefined`  |         | This will be forwarded to the sbb-pearl-chain component - if true the position won't be animated.                                                                                             |
 | `boarding`              | `boarding`               | public  | `Boarding \| undefined` |         | This will be forwarded to the notices section                                                                                                                                                 |
-| `loadingTrip`           | `loading-trip`           | public  | `boolean \| undefined`  |         | The loading state - when this is true it will be render skeleton with an idling animation                                                                                                     |
-| `loadingPrice`          | `loading-price`          | public  | `boolean \| undefined`  |         | The loading state - when this is true it will be render skeleton with an idling animation                                                                                                     |
+| `loadingTrip`           | `loading-trip`           | public  | `boolean`               | `false` | The loading state - when this is true it will be render skeleton with an idling animation                                                                                                     |
+| `loadingPrice`          | `loading-price`          | public  | `boolean`               | `false` | The loading state - when this is true it will be render skeleton with an idling animation                                                                                                     |
 | `cardActionLabel`       | `card-action-label`      | public  | `string \| undefined`   |         | Hidden label for the card action. It overrides the automatically generated accessibility text for the component. Use this prop to provide custom accessibility information for the component. |
 | `accessibilityExpanded` | `accessibility-expanded` | public  | `boolean \| undefined`  |         | This will be forwarded to the sbb-card component as aria-expanded.                                                                                                                            |
 | `active`                | `active`                 | public  | `boolean \| undefined`  |         | When this prop is true the sbb-card will be in the active state.                                                                                                                              |
diff --git a/src/components/timetable-row/timetable-row.e2e.ts b/src/components/timetable-row/timetable-row.e2e.ts
index 5169cc25e9..0044d03cf8 100644
--- a/src/components/timetable-row/timetable-row.e2e.ts
+++ b/src/components/timetable-row/timetable-row.e2e.ts
@@ -1,11 +1,11 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbCardElement } from '../card';
-import { EventSpy, waitForCondition } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import type { SbbCardElement } from '../card.js';
+import { fixture } from '../core/testing/private.js';
+import { EventSpy, waitForCondition } from '../core/testing.js';
 
-import { SbbTimetableRowElement } from './timetable-row';
+import { SbbTimetableRowElement } from './timetable-row.js';
 
 describe(`sbb-timetable-row with ${fixture.name}`, () => {
   let element: SbbTimetableRowElement;
diff --git a/src/components/timetable-row/timetable-row.sample-data.ts b/src/components/timetable-row/timetable-row.sample-data.ts
index 5a61696665..6b52a42bb4 100644
--- a/src/components/timetable-row/timetable-row.sample-data.ts
+++ b/src/components/timetable-row/timetable-row.sample-data.ts
@@ -1,4 +1,4 @@
-import type { ITripItem } from '../core/timetable';
+import type { ITripItem } from '../core/timetable.js';
 import {
   cancelledLeg,
   extendedLeg,
@@ -8,7 +8,7 @@ import {
   progressLeg,
   redirectedOnArrivalLeg,
   redirectedOnDepartureLeg,
-} from '../pearl-chain/pearl-chain.sample-data';
+} from '../pearl-chain/pearl-chain.sample-data.js';
 
 type DeepPartial<T> = T extends object
   ? {
diff --git a/src/components/timetable-row/timetable-row.scss b/src/components/timetable-row/timetable-row.scss
index 90350aadce..9a0d4b0966 100644
--- a/src/components/timetable-row/timetable-row.scss
+++ b/src/components/timetable-row/timetable-row.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-timetable-row-gap: var(--sbb-spacing-fixed-2x);
@@ -10,6 +9,8 @@
   --sbb-timetable-row-height-header: #{sbb.px-to-rem-build(20)};
   --sbb-timetable-row-height-footer: #{sbb.px-to-rem-build(16)};
   --sbb-timetable-row-skeleton-pulse-duration: 1800ms;
+
+  display: block;
 }
 
 :host([disable-animation]) {
diff --git a/src/components/timetable-row/timetable-row.spec.ts b/src/components/timetable-row/timetable-row.spec.ts
index 2c922e45f1..8fff9830e8 100644
--- a/src/components/timetable-row/timetable-row.spec.ts
+++ b/src/components/timetable-row/timetable-row.spec.ts
@@ -1,19 +1,18 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
-import type { ITripItem, Notice, PtSituation } from '../core/timetable';
+import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
+import type { ITripItem, Notice, PtSituation } from '../core/timetable.js';
 
-import type { SbbTimetableRowElement } from './timetable-row';
-import { filterNotices, getCus, getHimIcon, sortSituation } from './timetable-row';
+import type { SbbTimetableRowElement } from './timetable-row.js';
+import { filterNotices, getCus, getHimIcon, sortSituation } from './timetable-row.js';
 import {
   defaultTrip,
   busTrip,
   partiallyCancelled,
   walkTimeTrip,
-} from './timetable-row.sample-data';
-import '.';
+} from './timetable-row.sample-data.js';
 
 const now = new Date('2022-08-16T15:00:00Z').valueOf();
 
diff --git a/src/components/timetable-row/timetable-row.stories.ts b/src/components/timetable-row/timetable-row.stories.ts
index 3753a98b45..544f6bcf0a 100644
--- a/src/components/timetable-row/timetable-row.stories.ts
+++ b/src/components/timetable-row/timetable-row.stories.ts
@@ -1,11 +1,11 @@
 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';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 import {
@@ -26,8 +26,8 @@ import {
   skippedArrivalStopTrip,
   skippedFirstDepartureStopTrip,
   skippedLastArrivalStopTrip,
-} from './timetable-row.sample-data';
-import './timetable-row';
+} from './timetable-row.sample-data.js';
+import './timetable-row.js';
 
 const cardActionLabel: InputType = {
   control: {
@@ -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/timetable-row/timetable-row.ts b/src/components/timetable-row/timetable-row.ts
index 3440155d91..d34cd87927 100644
--- a/src/components/timetable-row/timetable-row.ts
+++ b/src/components/timetable-row/timetable-row.ts
@@ -1,11 +1,11 @@
 import { format } from 'date-fns';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { LanguageController } from '../core/common-behaviors';
-import { removeTimezoneFromISOTimeString, durationToTime } from '../core/datetime';
-import { setAttribute } from '../core/dom';
+import { SbbLanguageController } from '../core/controllers.js';
+import { readDataNow, removeTimezoneFromISOTimeString, durationToTime } from '../core/datetime.js';
+import { setOrRemoveAttribute } from '../core/dom.js';
 import {
   i18nArrival,
   i18nClass,
@@ -23,17 +23,18 @@ import {
   i18nTravelhints,
   i18nTripDuration,
   i18nTripQuayChange,
-} from '../core/i18n';
-import type { SbbOccupancy } from '../core/interfaces';
-import type { ITripItem, Notice, PtRideLeg, PtSituation } from '../core/timetable';
-import { getDepartureArrivalTimeAttribute, isRideLeg } from '../core/timetable';
-import '../card';
-import '../icon';
-import '../pearl-chain-time';
-import '../timetable-occupancy';
+} from '../core/i18n.js';
+import type { SbbOccupancy } from '../core/interfaces.js';
+import type { ITripItem, Notice, PtRideLeg, PtSituation } from '../core/timetable.js';
+import { getDepartureArrivalTimeAttribute, isRideLeg } from '../core/timetable.js';
 
 import style from './timetable-row.scss?lit&inline';
 
+import '../card.js';
+import '../icon.js';
+import '../pearl-chain-time.js';
+import '../timetable-occupancy.js';
+
 /** HimCus interface for mapped icon name and text */
 export interface HimCus {
   name: string;
@@ -224,13 +225,13 @@ export class SbbTimetableRowElement extends LitElement {
    * The loading state -
    * when this is true it will be render skeleton with an idling animation
    */
-  @property({ attribute: 'loading-trip', type: Boolean }) public loadingTrip?: boolean;
+  @property({ attribute: 'loading-trip', type: Boolean }) public loadingTrip = false;
 
   /**
    * The loading state -
    * when this is true it will be render skeleton with an idling animation
    */
-  @property({ attribute: 'loading-price', type: Boolean }) public loadingPrice?: boolean;
+  @property({ attribute: 'loading-price', type: Boolean }) public loadingPrice = false;
 
   /**
    * Hidden label for the card action. It overrides the automatically generated accessibility text for the component. Use this prop to provide custom accessibility information for the component.
@@ -244,10 +245,18 @@ export class SbbTimetableRowElement extends LitElement {
   /** When this prop is true the sbb-card will be in the active state. */
   @property({ type: Boolean }) public active?: boolean;
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
+
+  protected override willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('loadingTrip')) {
+      setOrRemoveAttribute(this, 'role', !this.loadingTrip ? 'rowgroup' : null);
+    }
+  }
 
   private _now(): number {
-    const dataNow = +(this.dataset?.now as string);
+    const dataNow = readDataNow(this);
     return isNaN(dataNow) ? Date.now() : dataNow;
   }
 
@@ -476,7 +485,6 @@ export class SbbTimetableRowElement extends LitElement {
     const noticeAttributes = notices && handleNotices(notices);
 
     const durationObj = duration ? durationToTime(duration, this._language.current) : null;
-    setAttribute(this, 'role', 'rowgroup');
 
     return html`
       <sbb-card size="l" id=${id}>
diff --git a/src/components/title.ts b/src/components/title.ts
new file mode 100644
index 0000000000..fe3b1ad626
--- /dev/null
+++ b/src/components/title.ts
@@ -0,0 +1,2 @@
+export * from './title/title.js';
+export * from './title/title-base.js';
diff --git a/src/components/title/index.ts b/src/components/title/index.ts
deleted file mode 100644
index f71556e63d..0000000000
--- a/src/components/title/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './title';
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.e2e.ts b/src/components/title/title.e2e.ts
index a07967916c..332f2b25ee 100644
--- a/src/components/title/title.e2e.ts
+++ b/src/components/title/title.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbTitleElement } from './title';
+import { SbbTitleElement } from './title.js';
 
 describe(`sbb-title with ${fixture.name}`, () => {
   let element: SbbTitleElement;
diff --git a/src/components/title/title.scss b/src/components/title/title.scss
index 9c631fcac2..020abf0044 100644
--- a/src/components/title/title.scss
+++ b/src/components/title/title.scss
@@ -1,14 +1,6 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
-
 :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;
 
@@ -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.spec.ts b/src/components/title/title.spec.ts
index c59cdcab5e..463da21937 100644
--- a/src/components/title/title.spec.ts
+++ b/src/components/title/title.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import './title';
+import './title.js';
 
 describe(`sbb-title`, () => {
   it('renders', async () => {
diff --git a/src/components/title/title.stories.ts b/src/components/title/title.stories.ts
index df1863ce3c..47f3550386 100644
--- a/src/components/title/title.stories.ts
+++ b/src/components/title/title.stories.ts
@@ -2,18 +2,11 @@ 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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './title';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative
-    ? 'var(--sbb-color-charcoal)'
-    : 'var(--sbb-color-white)',
-});
+import './title.js';
 
 // 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 =>
@@ -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 f58a0d297d..15d638428e 100644
--- a/src/components/title/title.ts
+++ b/src/components/title/title.ts
@@ -1,62 +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 { SbbNegativeMixin, hostAttributes } from '../core/common-behaviors';
+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.ts b/src/components/toast.ts
new file mode 100644
index 0000000000..657748b43b
--- /dev/null
+++ b/src/components/toast.ts
@@ -0,0 +1 @@
+export * from './toast/toast.js';
diff --git a/src/components/toast/index.ts b/src/components/toast/index.ts
deleted file mode 100644
index 7ff6d415e7..0000000000
--- a/src/components/toast/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './toast';
diff --git a/src/components/toast/readme.md b/src/components/toast/readme.md
index 44a2a13d78..6a75abba81 100644
--- a/src/components/toast/readme.md
+++ b/src/components/toast/readme.md
@@ -132,9 +132,9 @@ Add the `sbb-disable-animation` class to disable animation and transition effect
 
 ## CSS Properties
 
-| Name                  | Default                      | Description                                                                                                                                                                                           |
-| --------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-toast-z-index` | `var(--sbb-overlay-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-z-index)` with a value of `1000`. |
+| Name                  | Default                              | Description                                                                                                                                                                                                   |
+| --------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-toast-z-index` | `var(--sbb-overlay-default-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`. |
 
 ## Slots
 
diff --git a/src/components/toast/toast.e2e.ts b/src/components/toast/toast.e2e.ts
index dc9a2493f3..4570caeb40 100644
--- a/src/components/toast/toast.e2e.ts
+++ b/src/components/toast/toast.e2e.ts
@@ -1,14 +1,14 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbTransparentButtonElement } from '../button';
-import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import type { SbbTransparentButtonElement } from '../button.js';
+import { fixture } from '../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing.js';
 
-import { SbbToastElement } from './toast';
+import { SbbToastElement } from './toast.js';
 
-import '../button/transparent-button';
-import '../link/link-button';
+import '../button/transparent-button.js';
+import '../link/link-button.js';
 
 describe(`sbb-toast with ${fixture.name}`, () => {
   let element: SbbToastElement;
@@ -63,7 +63,7 @@ describe(`sbb-toast with ${fixture.name}`, () => {
     const willCloseEventSpy = new EventSpy(SbbToastElement.events.willClose);
     const didCloseEventSpy = new EventSpy(SbbToastElement.events.didClose);
 
-    element.setAttribute('dismissible', '');
+    element.toggleAttribute('dismissible', true);
     await waitForLitRender(element);
     element.open();
     await waitForLitRender(element);
@@ -93,7 +93,7 @@ describe(`sbb-toast with ${fixture.name}`, () => {
           <sbb-transparent-button slot="action" sbb-toast-close></sbb-transparent-button>
         </sbb-toast>
       `,
-      { modules: ['./toast.ts', '../button/index.ts'] },
+      { modules: ['./toast.ts', '../button.ts'] },
     );
     const actionBtn = element.querySelector('sbb-transparent-button') as HTMLElement;
 
@@ -126,7 +126,7 @@ describe(`sbb-toast with ${fixture.name}`, () => {
           <sbb-transparent-button slot="action"></sbb-transparent-button>
         </sbb-toast>
       `,
-      { modules: ['./toast.ts', '../button/index.ts'] },
+      { modules: ['./toast.ts', '../button.ts'] },
     );
 
     const actionBtn = element.querySelector('sbb-transparent-button');
@@ -142,7 +142,7 @@ describe(`sbb-toast with ${fixture.name}`, () => {
           <sbb-link-button slot="action"></sbb-link-button>
         </sbb-toast>
       `,
-      { modules: ['./toast.ts', '../link/index.ts'] },
+      { modules: ['./toast.ts', '../link.ts'] },
     );
     const actionLink = element.querySelector('sbb-link-button');
 
@@ -150,15 +150,17 @@ describe(`sbb-toast with ${fixture.name}`, () => {
   });
 
   it('closes other toasts on open', async () => {
-    const toast1 = await fixture<SbbToastElement>(
+    element = await fixture<SbbToastElement>(
       html`
-        <sbb-toast id="toast1"></sbb-toast>
-        <sbb-toast id="toast2"></sbb-toast>
+        <div>
+          <sbb-toast id="toast1"></sbb-toast>
+          <sbb-toast id="toast2"></sbb-toast>
+        </div>
       `,
       { modules: ['./toast.ts'] },
     );
 
-    const toast2 = toast1.nextElementSibling! as SbbToastElement;
+    const [toast1, toast2] = Array.from(element.querySelectorAll('sbb-toast'));
 
     // Open the first toast
     toast1.open();
@@ -172,6 +174,7 @@ describe(`sbb-toast with ${fixture.name}`, () => {
     await waitForLitRender(element);
 
     await waitForCondition(() => toast1.getAttribute('data-state') === 'closed');
+    await waitForCondition(() => toast2.getAttribute('data-state') === 'opened');
     expect(toast1).to.have.attribute('data-state', 'closed');
     expect(toast2).to.have.attribute('data-state', 'opened');
   });
diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss
index 3efa7ab489..84527ce226 100644
--- a/src/components/toast/toast.scss
+++ b/src/components/toast/toast.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-toast-max-width: #{sbb.px-to-rem-build(400)};
@@ -23,6 +22,8 @@
   --sbb-toast-container-position: fixed;
   --sbb-toast-horizontal-position: initial;
   --sbb-toast-vertical-position: initial;
+
+  display: block;
 }
 
 :host(:not([data-state])),
@@ -74,7 +75,7 @@
 }
 
 .sbb-toast {
-  z-index: var(--sbb-toast-z-index, var(--sbb-overlay-z-index));
+  z-index: var(--sbb-toast-z-index, var(--sbb-overlay-default-z-index));
   pointer-events: auto;
   margin: var(--sbb-toast-margin);
   padding-block: var(--sbb-toast-padding-block);
diff --git a/src/components/toast/toast.spec.ts b/src/components/toast/toast.spec.ts
index 104ea54772..37048ef1e7 100644
--- a/src/components/toast/toast.spec.ts
+++ b/src/components/toast/toast.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { isFirefox } from '../core/dom';
-import { describeIf } from '../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { isFirefox } from '../core/dom.js';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
+import { describeIf } from '../core/testing.js';
 
-import type { SbbToastElement } from './toast';
+import type { SbbToastElement } from './toast.js';
 
-import './toast';
+import './toast.js';
 
 describe(`sbb-toast`, () => {
   describe('renders', () => {
diff --git a/src/components/toast/toast.stories.ts b/src/components/toast/toast.stories.ts
index bb2769df65..ecba752d74 100644
--- a/src/components/toast/toast.stories.ts
+++ b/src/components/toast/toast.stories.ts
@@ -9,19 +9,19 @@ import type {
   Decorator,
   StoryContext,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 
-import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready';
-import type { SbbButtonElement } from '../button';
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
+import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready.js';
+import type { SbbButtonElement } from '../button.js';
 
 import readme from './readme.md?raw';
-import { SbbToastElement } from './toast';
-import '../button/button';
-import '../button/transparent-button';
-import '../link/link';
+import { SbbToastElement } from './toast.js';
+import '../button/button.js';
+import '../button/transparent-button.js';
+import '../link/link.js';
 
 // Story interaction executed after the story renders
 const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
@@ -170,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: {
@@ -184,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 c89dd4a5b5..f0f7d9086f 100644
--- a/src/components/toast/toast.ts
+++ b/src/components/toast/toast.ts
@@ -1,21 +1,21 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 
-import type { SbbTransparentButtonElement, SbbTransparentButtonLinkElement } from '../button';
+import type { SbbTransparentButtonElement, SbbTransparentButtonLinkElement } from '../button.js';
 import {
-  LanguageController,
-  NamedSlotStateController,
-  SbbIconNameMixin,
-} from '../core/common-behaviors';
-import { isFirefox, isValidAttribute, setAttribute } from '../core/dom';
-import { composedPathHasAttribute, EventEmitter, ConnectedAbortController } from '../core/eventing';
-import { i18nCloseAlert } from '../core/i18n';
-import type { SbbOverlayState } from '../core/overlay';
-import type { SbbLinkButtonElement, SbbLinkElement, SbbLinkStaticElement } from '../link';
-import '../button/transparent-button';
-
-import '../icon';
+  SbbConnectedAbortController,
+  SbbLanguageController,
+  SbbSlotStateController,
+} from '../core/controllers.js';
+import { isFirefox } from '../core/dom.js';
+import { composedPathHasAttribute, EventEmitter } from '../core/eventing.js';
+import { i18nCloseAlert } from '../core/i18n.js';
+import type { SbbOpenedClosedState } from '../core/interfaces.js';
+import { SbbIconNameMixin } from '../icon.js';
+import type { SbbLinkButtonElement, SbbLinkElement, SbbLinkStaticElement } from '../link.js';
+import '../button/transparent-button.js';
+
 import style from './toast.scss?lit&inline';
 
 type SbbToastPositionVertical = 'top' | 'bottom';
@@ -35,9 +35,9 @@ const toastRefs = new Set<SbbToastElement>();
  * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-toast` is opened.
  * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-toast` begins the closing transition. Can be canceled.
  * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-toast` is closed.
- * @cssprop [--sbb-toast-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-toast-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
- * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
  */
 @customElement('sbb-toast')
 export class SbbToastElement extends SbbIconNameMixin(LitElement) {
@@ -67,8 +67,13 @@ export class SbbToastElement extends SbbIconNameMixin(LitElement) {
    */
   @property() public politeness: 'polite' | 'assertive' | 'off' = 'polite';
 
-  /** The state of the autocomplete. */
-  @state() private _state: SbbOverlayState = 'closed';
+  /* The state of the toast. */
+  private set _state(state: SbbOpenedClosedState) {
+    this.setAttribute('data-state', state);
+  }
+  private get _state(): SbbOpenedClosedState {
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
+  }
 
   /** Emits whenever the `sbb-toast` starts the opening transition. */
   private _willOpen: EventEmitter<void> = new EventEmitter(this, SbbToastElement.events.willOpen);
@@ -83,8 +88,8 @@ export class SbbToastElement extends SbbIconNameMixin(LitElement) {
   private _didClose: EventEmitter<void> = new EventEmitter(this, SbbToastElement.events.didClose);
 
   private _closeTimeout?: ReturnType<typeof setTimeout>;
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this);
+  private _abort = new SbbConnectedAbortController(this);
+  private _language = new SbbLanguageController(this);
 
   /**
    * Role of the live region. This is only for Firefox as there is a known issue where Firefox +
@@ -137,18 +142,20 @@ export class SbbToastElement extends SbbIconNameMixin(LitElement) {
   private _onClick(event: Event): void {
     const closeElement = composedPathHasAttribute(event, 'sbb-toast-close', this);
 
-    if (closeElement && !isValidAttribute(closeElement, 'disabled')) {
+    if (closeElement && !closeElement.hasAttribute('disabled')) {
       this.close();
     }
   }
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   public override connectedCallback(): void {
     super.connectedCallback();
+    this._state ||= 'closed';
+
     const signal = this._abort.signal;
     this.addEventListener('click', (e) => this._onClick(e), { signal });
 
@@ -235,10 +242,6 @@ export class SbbToastElement extends SbbIconNameMixin(LitElement) {
   }
 
   protected override render(): TemplateResult {
-    // ## Host attributes ##
-    setAttribute(this, 'data-state', this._state);
-    // ####
-
     return html`
       <div class="sbb-toast__overlay-container">
         <div
diff --git a/src/components/toggle-check.ts b/src/components/toggle-check.ts
new file mode 100644
index 0000000000..f0ed64088e
--- /dev/null
+++ b/src/components/toggle-check.ts
@@ -0,0 +1 @@
+export * from './toggle-check/toggle-check.js';
diff --git a/src/components/toggle-check/index.ts b/src/components/toggle-check/index.ts
deleted file mode 100644
index 02e087376e..0000000000
--- a/src/components/toggle-check/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './toggle-check';
diff --git a/src/components/toggle-check/toggle-check.e2e.ts b/src/components/toggle-check/toggle-check.e2e.ts
index 8630b62843..ff4c54047f 100644
--- a/src/components/toggle-check/toggle-check.e2e.ts
+++ b/src/components/toggle-check/toggle-check.e2e.ts
@@ -3,11 +3,11 @@ import { a11ySnapshot, sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 import type { Context } from 'mocha';
 
-import { isChromium, isFirefox } from '../core/dom';
-import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import { isChromium, isFirefox } from '../core/dom.js';
+import { fixture } from '../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing.js';
 
-import { SbbToggleCheckElement } from './toggle-check';
+import { SbbToggleCheckElement } from './toggle-check.js';
 
 interface ToggleCheckAccessibilitySnapshot {
   checked: boolean;
@@ -557,7 +557,7 @@ describe(`sbb-toggle-check with ${fixture.name}`, () => {
                 focusable: false,
               });
 
-              element.toggleAttribute('disabled', false);
+              element.removeAttribute('disabled');
               await waitForLitRender(form);
 
               await assertDisabledState({
@@ -727,7 +727,7 @@ describe(`sbb-toggle-check with ${fixture.name}`, () => {
             });
 
             // When performing
-            element.toggleAttribute('checked', false);
+            element.removeAttribute('checked');
             await waitForLitRender(form);
 
             // Attribute should be considered
@@ -744,7 +744,7 @@ describe(`sbb-toggle-check with ${fixture.name}`, () => {
             await waitForLitRender(form);
 
             // Attribute mutation should be blocked again
-            element.toggleAttribute('checked', false);
+            element.removeAttribute('checked');
             await waitForLitRender(form);
 
             await assertState({
diff --git a/src/components/toggle-check/toggle-check.scss b/src/components/toggle-check/toggle-check.scss
index 0a0faf072f..3c9f7c8329 100644
--- a/src/components/toggle-check/toggle-check.scss
+++ b/src/components/toggle-check/toggle-check.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   display: inline-block;
diff --git a/src/components/toggle-check/toggle-check.spec.ts b/src/components/toggle-check/toggle-check.spec.ts
index 55a0e5da27..cf27f44812 100644
--- a/src/components/toggle-check/toggle-check.spec.ts
+++ b/src/components/toggle-check/toggle-check.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbToggleCheckElement } from './toggle-check';
+import type { SbbToggleCheckElement } from './toggle-check.js';
 
-import './toggle-check';
+import './toggle-check.js';
 
 describe(`sbb-toggle-check`, () => {
   describe('should render', async () => {
diff --git a/src/components/toggle-check/toggle-check.stories.ts b/src/components/toggle-check/toggle-check.stories.ts
index c6f27866a9..4e12282e80 100644
--- a/src/components/toggle-check/toggle-check.stories.ts
+++ b/src/components/toggle-check/toggle-check.stories.ts
@@ -4,15 +4,15 @@ import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './toggle-check';
-import '../button/button';
-import '../button/secondary-button';
-import '../card';
-import '../icon';
-import '../title';
+import './toggle-check.js';
+import '../button/button.js';
+import '../button/secondary-button.js';
+import '../card.js';
+import '../icon.js';
+import '../title.js';
 
 const longLabel = `For this example we need a very long label, like lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Cras nec dolor eget leo porttitor ultrices. Mauris sed erat nec justo posuere elementum.
@@ -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-check/toggle-check.ts b/src/components/toggle-check/toggle-check.ts
index 5cb90c2859..4ae3eec566 100644
--- a/src/components/toggle-check/toggle-check.ts
+++ b/src/components/toggle-check/toggle-check.ts
@@ -2,16 +2,12 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-  NamedSlotStateController,
-  SbbFormAssociatedCheckboxMixin,
-  SbbIconNameMixin,
-} from '../core/common-behaviors';
+import { SbbSlotStateController } from '../core/controllers.js';
+import { SbbFormAssociatedCheckboxMixin } from '../core/mixins.js';
+import { SbbIconNameMixin } from '../icon.js';
 
 import style from './toggle-check.scss?lit&inline';
 
-import '../icon';
-
 /**
  * It displays a toggle checkbox.
  *
@@ -42,7 +38,7 @@ export class SbbToggleCheckElement extends SbbFormAssociatedCheckboxMixin(
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   protected override async willUpdate(changedProperties: PropertyValues<this>): Promise<void> {
diff --git a/src/components/toggle.ts b/src/components/toggle.ts
new file mode 100644
index 0000000000..980f9169ce
--- /dev/null
+++ b/src/components/toggle.ts
@@ -0,0 +1,2 @@
+export * from './toggle/toggle.js';
+export * from './toggle/toggle-option.js';
diff --git a/src/components/toggle/index.ts b/src/components/toggle/index.ts
deleted file mode 100644
index b2a4cded2a..0000000000
--- a/src/components/toggle/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './toggle';
-export * from './toggle-option';
diff --git a/src/components/toggle/toggle-option.ts b/src/components/toggle/toggle-option.ts
new file mode 100644
index 0000000000..294f2827cc
--- /dev/null
+++ b/src/components/toggle/toggle-option.ts
@@ -0,0 +1 @@
+export * from './toggle-option/toggle-option.js';
diff --git a/src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js b/src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js
index 2fc94f6599..09ea16c081 100644
--- a/src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js
+++ b/src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js
@@ -1,7 +1,19 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-toggle-option renders"] = 
+snapshots["sbb-toggle-option renders DOM"] = 
+`<sbb-toggle-option
+  aria-checked="true"
+  checked=""
+  role="radio"
+  tabindex="0"
+  value="Option 1"
+>
+</sbb-toggle-option>
+`;
+/* end snapshot sbb-toggle-option renders DOM */
+
+snapshots["sbb-toggle-option renders Shadow DOM"] = 
 `<input
   aria-hidden="true"
   id="sbb-toggle-option-id"
@@ -21,27 +33,49 @@ snapshots["sbb-toggle-option renders"] =
   </span>
 </label>
 `;
-/* end snapshot sbb-toggle-option renders */
+/* end snapshot sbb-toggle-option renders Shadow DOM */
+
+snapshots["sbb-toggle-option renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "",
+      "checked": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle-option renders A11y tree Chrome */
+
+snapshots["sbb-toggle-option renders unchecked DOM"] = 
+`<sbb-toggle-option
+  aria-checked="false"
+  role="radio"
+  tabindex="-1"
+  value="Option 1"
+>
+</sbb-toggle-option>
+`;
+/* end snapshot sbb-toggle-option renders unchecked DOM */
 
-snapshots["sbb-toggle-option renders with sbb-icon"] = 
+snapshots["sbb-toggle-option renders unchecked Shadow DOM"] = 
 `<input
   aria-hidden="true"
   id="sbb-toggle-option-id"
   tabindex="-1"
   type="radio"
+  value="Option 1"
 >
 <label
   class="sbb-toggle-option"
   for="sbb-toggle-option-id"
 >
   <slot name="icon">
-    <sbb-icon
-      aria-hidden="true"
-      data-namespace="default"
-      name="arrow-right-small"
-      role="img"
-    >
-    </sbb-icon>
   </slot>
   <span class="sbb-toggle-option__label">
     <slot>
@@ -49,14 +83,64 @@ snapshots["sbb-toggle-option renders with sbb-icon"] =
   </span>
 </label>
 `;
-/* end snapshot sbb-toggle-option renders with sbb-icon */
+/* end snapshot sbb-toggle-option renders unchecked Shadow DOM */
 
-snapshots["sbb-toggle-option renders with slotted sbb-icon"] = 
+snapshots["sbb-toggle-option renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "",
+      "checked": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle-option renders A11y tree Firefox */
+
+snapshots["sbb-toggle-option renders unchecked A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "",
+      "checked": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle-option renders unchecked A11y tree Chrome */
+
+snapshots["sbb-toggle-option renders checked disabled DOM"] = 
+`<sbb-toggle-option
+  aria-checked="true"
+  aria-disabled="true"
+  checked=""
+  disabled=""
+  role="radio"
+  tabindex="-1"
+  value="Option 1"
+>
+</sbb-toggle-option>
+`;
+/* end snapshot sbb-toggle-option renders checked disabled DOM */
+
+snapshots["sbb-toggle-option renders checked disabled Shadow DOM"] = 
 `<input
   aria-hidden="true"
+  disabled=""
   id="sbb-toggle-option-id"
   tabindex="-1"
   type="radio"
+  value="Option 1"
 >
 <label
   class="sbb-toggle-option"
@@ -70,9 +154,25 @@ snapshots["sbb-toggle-option renders with slotted sbb-icon"] =
   </span>
 </label>
 `;
-/* end snapshot sbb-toggle-option renders with slotted sbb-icon */
+/* end snapshot sbb-toggle-option renders checked disabled Shadow DOM */
+
+snapshots["sbb-toggle-option renders unchecked A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle-option renders unchecked A11y tree Firefox */
 
-snapshots["sbb-toggle-option A11y tree Chrome"] = 
+snapshots["sbb-toggle-option renders checked disabled A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -81,15 +181,52 @@ snapshots["sbb-toggle-option A11y tree Chrome"] =
     {
       "role": "radio",
       "name": "",
+      "disabled": true,
       "checked": true
     }
   ]
 }
 </p>
 `;
-/* end snapshot sbb-toggle-option A11y tree Chrome */
+/* end snapshot sbb-toggle-option renders checked disabled A11y tree Chrome */
+
+snapshots["sbb-toggle-option renders unchecked disabled DOM"] = 
+`<sbb-toggle-option
+  aria-checked="false"
+  aria-disabled="true"
+  disabled=""
+  role="radio"
+  tabindex="-1"
+  value="Option 1"
+>
+</sbb-toggle-option>
+`;
+/* end snapshot sbb-toggle-option renders unchecked disabled DOM */
 
-snapshots["sbb-toggle-option A11y tree Firefox"] = 
+snapshots["sbb-toggle-option renders unchecked disabled Shadow DOM"] = 
+`<input
+  aria-hidden="true"
+  disabled=""
+  id="sbb-toggle-option-id"
+  tabindex="-1"
+  type="radio"
+  value="Option 1"
+>
+<label
+  class="sbb-toggle-option"
+  for="sbb-toggle-option-id"
+>
+  <slot name="icon">
+  </slot>
+  <span class="sbb-toggle-option__label">
+    <slot>
+    </slot>
+  </span>
+</label>
+`;
+/* end snapshot sbb-toggle-option renders unchecked disabled Shadow DOM */
+
+snapshots["sbb-toggle-option renders checked disabled A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -98,11 +235,47 @@ snapshots["sbb-toggle-option A11y tree Firefox"] =
     {
       "role": "radio",
       "name": "",
+      "disabled": true,
       "checked": true
     }
   ]
 }
 </p>
 `;
-/* end snapshot sbb-toggle-option A11y tree Firefox */
+/* end snapshot sbb-toggle-option renders checked disabled A11y tree Firefox */
+
+snapshots["sbb-toggle-option renders unchecked disabled A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "",
+      "disabled": true,
+      "checked": false
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle-option renders unchecked disabled A11y tree Chrome */
+
+snapshots["sbb-toggle-option renders unchecked disabled A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "radio",
+      "name": "",
+      "disabled": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-toggle-option renders unchecked disabled A11y tree Firefox */
 
diff --git a/src/components/toggle/toggle-option/index.ts b/src/components/toggle/toggle-option/index.ts
deleted file mode 100644
index 41259a641c..0000000000
--- a/src/components/toggle/toggle-option/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './toggle-option';
diff --git a/src/components/toggle/toggle-option/toggle-option.e2e.ts b/src/components/toggle/toggle-option/toggle-option.e2e.ts
index ed58a46d59..8c4dc999ca 100644
--- a/src/components/toggle/toggle-option/toggle-option.e2e.ts
+++ b/src/components/toggle/toggle-option/toggle-option.e2e.ts
@@ -1,10 +1,10 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 
-import { SbbToggleOptionElement } from './toggle-option';
+import { SbbToggleOptionElement } from './toggle-option.js';
 
 describe(`sbb-toggle-option with ${fixture.name}`, () => {
   let element: SbbToggleOptionElement;
diff --git a/src/components/toggle/toggle-option/toggle-option.scss b/src/components/toggle/toggle-option/toggle-option.scss
index 06d48a320a..27c70fb6db 100644
--- a/src/components/toggle/toggle-option/toggle-option.scss
+++ b/src/components/toggle/toggle-option/toggle-option.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-toggle-option-cursor: pointer;
diff --git a/src/components/toggle/toggle-option/toggle-option.spec.ts b/src/components/toggle/toggle-option/toggle-option.spec.ts
index a2bc8c29d8..098d2a1b75 100644
--- a/src/components/toggle/toggle-option/toggle-option.spec.ts
+++ b/src/components/toggle/toggle-option/toggle-option.spec.ts
@@ -1,71 +1,82 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
-import './toggle-option';
-import '../../icon';
+import type { SbbToggleOptionElement } from './toggle-option.js';
+
+import './toggle-option.js';
 
 describe(`sbb-toggle-option`, () => {
-  it('renders', async () => {
-    const root = await fixture(
-      html`<sbb-toggle-option checked value="Option 1"></sbb-toggle-option>`,
-    );
-
-    expect(root).dom.to.be.equal(`
-      <sbb-toggle-option aria-checked="true" checked role="radio" tabindex="0" value="Option 1">
-      </sbb-toggle-option>
-    `);
-    await expect(root).shadowDom.to.be.equalSnapshot();
+  let element: SbbToggleOptionElement;
+
+  describe('renders', async () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-toggle-option checked value="Option 1"></sbb-toggle-option>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
-  it('renders with sbb-icon', async () => {
-    const root = await fixture(
-      html`<sbb-toggle-option checked icon-name="arrow-right-small"></sbb-toggle-option>`,
-    );
-
-    await waitForLitRender(root);
-
-    expect(root).dom.to.be.equal(`
-      <sbb-toggle-option
-        aria-checked="true"
-        checked
-        icon-name="arrow-right-small"
-        role="radio"
-        tabindex="0"
-      >
-      </sbb-toggle-option>
-    `);
-    await expect(root).shadowDom.to.be.equalSnapshot();
+  describe('renders unchecked', async () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-toggle-option value="Option 1"></sbb-toggle-option>`);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
-  it('renders with slotted sbb-icon', async () => {
-    const root = await fixture(
-      html` <sbb-toggle-option>
-        <sbb-icon slot="icon" name="arrow-right-small"></sbb-icon>
-      </sbb-toggle-option>`,
-    );
-
-    expect(root).dom.to.be.equal(`
-      <sbb-toggle-option
-        aria-checked="false"
-        role="radio"
-        tabindex="-1"
-        data-slot-names="icon"
-      >
-        <sbb-icon
-          aria-hidden="true"
-          data-namespace="default"
-          name="arrow-right-small"
-          role="img"
-          slot="icon"
-        >
-        </sbb-icon>
-      </sbb-toggle-option>
-    `);
-    await expect(root).shadowDom.to.be.equalSnapshot();
+  describe('renders checked disabled', async () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-toggle-option checked disabled value="Option 1"></sbb-toggle-option>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
-  testA11yTreeSnapshot(html`<sbb-toggle-option checked value="Option 1"></sbb-toggle-option>`);
+  describe('renders unchecked disabled', async () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-toggle-option disabled value="Option 1"></sbb-toggle-option>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
 });
diff --git a/src/components/toggle/toggle-option/toggle-option.stories.ts b/src/components/toggle/toggle-option/toggle-option.stories.ts
index 565aa6590e..3a39b39dc6 100644
--- a/src/components/toggle/toggle-option/toggle-option.stories.ts
+++ b/src/components/toggle/toggle-option/toggle-option.stories.ts
@@ -4,10 +4,10 @@ import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './toggle-option';
+import './toggle-option.js';
 
 const label: InputType = {
   control: {
@@ -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-option/toggle-option.ts b/src/components/toggle/toggle-option/toggle-option.ts
index cab854d6cc..9db8a30691 100644
--- a/src/components/toggle/toggle-option/toggle-option.ts
+++ b/src/components/toggle/toggle-option/toggle-option.ts
@@ -1,17 +1,14 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
-import { LitElement, html, nothing } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-  hostAttributes,
-  NamedSlotStateController,
-  SbbIconNameMixin,
-} from '../../core/common-behaviors';
-import { setAttribute } from '../../core/dom';
-import { ConnectedAbortController, EventEmitter } from '../../core/eventing';
-import type { SbbToggleElement, SbbToggleStateChange } from '../toggle';
+import { SbbConnectedAbortController, SbbSlotStateController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { setOrRemoveAttribute } from '../../core/dom.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { SbbIconNameMixin } from '../../icon.js';
+import type { SbbToggleElement, SbbToggleStateChange } from '../toggle.js';
 
-import '../../icon';
 import style from './toggle-option.scss?lit&inline';
 
 /**
@@ -34,44 +31,19 @@ export class SbbToggleOptionElement extends SbbIconNameMixin(LitElement) {
    * Whether the toggle-option is checked.
    */
   @property({ reflect: true, type: Boolean })
-  public set checked(value: boolean) {
-    const oldValue = this.checked;
-    if (value !== oldValue) {
-      this._checked = value;
-      this._handleCheckedChange(this.checked, oldValue);
-    }
-  }
-  public get checked(): boolean {
-    return this._checked;
-  }
-  private _checked = false;
+  public checked = false;
 
   /**
    * Whether the toggle option is disabled.
    */
   @property({ reflect: true, type: Boolean })
-  public set disabled(value: boolean) {
-    this._disabled = value;
-    this._handleDisabledChange(this._disabled);
-  }
-  public get disabled(): boolean {
-    return this._disabled;
-  }
-  private _disabled: boolean = false;
+  public disabled: boolean = false;
 
   /**
    * Value of toggle-option.
    */
   @property()
-  public set value(value: string | null) {
-    const oldValue = this._value;
-    this._value = value;
-    this._handleValueChange(this._value, oldValue);
-  }
-  public get value(): string | null {
-    return this._value;
-  }
-  private _value: string | null = null;
+  public value: string | null = null;
 
   private _toggle?: SbbToggleElement;
 
@@ -86,16 +58,42 @@ export class SbbToggleOptionElement extends SbbIconNameMixin(LitElement) {
     { bubbles: true },
   );
 
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    const signal = this._abort.signal;
+    this.addEventListener('input', () => this._handleInput(), { signal });
+    this.addEventListener('click', () => this.shadowRoot!.querySelector('label')?.click(), {
+      signal,
+    });
+    // We can use closest here, as we expect the parent sbb-toggle to be in light DOM.
+    this._toggle = this.closest?.('sbb-toggle') ?? undefined;
+    this._verifyTabindex();
+  }
+
+  protected override willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has('checked')) {
+      this._handleCheckedChange(this.checked, changedProperties.get('checked'));
+    }
+    if (changedProperties.has('value')) {
+      this._handleValueChange(this.value, changedProperties.get('value'));
+    }
+    if (changedProperties.has('disabled')) {
+      this._handleDisabledChange();
+    }
   }
 
   private _handleCheckedChange(currentValue: boolean, previousValue: boolean): void {
     if (currentValue !== previousValue) {
-      this._stateChange.emit({ type: 'checked', checked: currentValue });
+      this.setAttribute('aria-checked', `${this.checked}`);
+      this._stateChange.emit({ type: 'checked', checked: this.checked });
       this._verifyTabindex();
     }
   }
@@ -106,16 +104,17 @@ export class SbbToggleOptionElement extends SbbIconNameMixin(LitElement) {
     }
   }
 
-  private _handleDisabledChange(currentValue: boolean): void {
+  private _handleDisabledChange(): void {
     // Enforce disabled state from parent.
     if (!this._toggle) {
       // Ignore illegal state. Our expectation  is that a sbb-toggle-option
       // always has a parent sbb-toggle.
-    } else if (this._toggle.disabled && !currentValue) {
+    } else if (this._toggle.disabled && !this.disabled) {
       this.disabled = true;
-    } else if (!this._toggle.disabled && currentValue) {
+    } else if (!this._toggle.disabled && this.disabled) {
       this.disabled = false;
     }
+    setOrRemoveAttribute(this, 'aria-disabled', this.disabled ? `true` : null);
     this._verifyTabindex();
   }
 
@@ -126,29 +125,11 @@ export class SbbToggleOptionElement extends SbbIconNameMixin(LitElement) {
     this.checked = true;
   }
 
-  public override connectedCallback(): void {
-    super.connectedCallback();
-    const signal = this._abort.signal;
-    this.addEventListener('input', () => this._handleInput(), { signal });
-    this.addEventListener('click', () => this.shadowRoot!.querySelector('label')?.click(), {
-      signal,
-    });
-    // We can use closest here, as we expect the parent sbb-toggle to be in light DOM.
-    const toggle = this.closest?.('sbb-toggle');
-    if (toggle) {
-      this._toggle = toggle;
-    }
-    this._verifyTabindex();
-  }
-
   private _verifyTabindex(): void {
     this.tabIndex = this.checked && !this.disabled ? 0 : -1;
   }
 
   protected override render(): TemplateResult {
-    setAttribute(this, 'aria-checked', (!!this.checked).toString());
-    setAttribute(this, 'aria-disabled', this.disabled);
-
     return html`
       <input
         type="radio"
diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts
new file mode 100644
index 0000000000..bb2621109c
--- /dev/null
+++ b/src/components/toggle/toggle.ts
@@ -0,0 +1 @@
+export * from './toggle/toggle.js';
diff --git a/src/components/toggle/toggle/index.ts b/src/components/toggle/toggle/index.ts
deleted file mode 100644
index 4af0cec7d6..0000000000
--- a/src/components/toggle/toggle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './toggle';
diff --git a/src/components/toggle/toggle/toggle.e2e.ts b/src/components/toggle/toggle/toggle.e2e.ts
index 9c7a3a408f..ec015bd95d 100644
--- a/src/components/toggle/toggle/toggle.e2e.ts
+++ b/src/components/toggle/toggle/toggle.e2e.ts
@@ -2,13 +2,13 @@ import { assert, expect, nextFrame } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbToggleOptionElement } from '../toggle-option';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
+import type { SbbToggleOptionElement } from '../toggle-option.js';
 
-import { SbbToggleElement } from './toggle';
+import { SbbToggleElement } from './toggle.js';
 
-import '../toggle-option';
+import '../toggle-option.js';
 
 describe(`sbb-toggle with ${fixture.name}`, () => {
   let element: SbbToggleElement;
@@ -25,7 +25,7 @@ describe(`sbb-toggle with ${fixture.name}`, () => {
           >
         </sbb-toggle>
       `,
-      { modules: ['./toggle.ts', '../toggle-option/index.ts'] },
+      { modules: ['./toggle.ts', '../toggle-option.ts'] },
     );
   });
 
@@ -56,7 +56,7 @@ describe(`sbb-toggle with ${fixture.name}`, () => {
 
       expect(firstOption).to.have.attribute('checked');
 
-      secondOption.setAttribute('checked', '');
+      secondOption.toggleAttribute('checked', true);
       await waitForLitRender(element);
 
       expect(secondOption).to.have.attribute('checked');
diff --git a/src/components/toggle/toggle/toggle.scss b/src/components/toggle/toggle/toggle.scss
index 0032eea5f9..930ad67365 100644
--- a/src/components/toggle/toggle/toggle.scss
+++ b/src/components/toggle/toggle/toggle.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-toggle-width: fit-content;
@@ -28,6 +27,8 @@
     --sbb-toggle-selected-option-border-color: Highlight;
     --sbb-toggle-border-width: var(--sbb-border-width-2x);
   }
+
+  display: block;
 }
 
 :host([even]) {
diff --git a/src/components/toggle/toggle/toggle.spec.ts b/src/components/toggle/toggle/toggle.spec.ts
index 89d11de69d..7baef10c9b 100644
--- a/src/components/toggle/toggle/toggle.spec.ts
+++ b/src/components/toggle/toggle/toggle.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import type { SbbToggleOptionElement } from '../toggle-option';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
+import type { SbbToggleOptionElement } from '../toggle-option.js';
 
-import type { SbbToggleElement } from './toggle';
-import './toggle';
-import '../toggle-option';
+import type { SbbToggleElement } from './toggle.js';
+import './toggle.js';
+import '../toggle-option.js';
 
 describe(`sbb-toggle`, () => {
   let option: SbbToggleOptionElement, page: SbbToggleElement;
diff --git a/src/components/toggle/toggle/toggle.stories.ts b/src/components/toggle/toggle/toggle.stories.ts
index 97f7f03933..9bb93d285c 100644
--- a/src/components/toggle/toggle/toggle.stories.ts
+++ b/src/components/toggle/toggle/toggle.stories.ts
@@ -4,11 +4,11 @@ import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './toggle';
-import '../toggle-option';
+import './toggle.js';
+import '../toggle-option.js';
 
 const disabled: InputType = {
   control: {
@@ -98,7 +98,7 @@ const defaultArgTypes: ArgTypes = {
 const defaultArgs: Args = {
   disabled: false,
   even: false,
-  size: size.options[0],
+  size: size.options![0],
   value: 'Value 1',
   label: 'Bern',
   labelTwo: 'Zürich',
@@ -152,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 = {
@@ -164,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 = {
@@ -176,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 = {
@@ -202,7 +202,7 @@ export const IconsOnly: StoryObj = {
   argTypes: { ...defaultArgTypes },
   args: {
     ...defaultArgs,
-    iconName: iconName.options[0],
+    iconName: iconName.options![0],
     label: undefined,
     labelTwo: undefined,
   },
@@ -213,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,
   },
@@ -225,7 +225,7 @@ export const IconsOnlySlotted: StoryObj = {
   argTypes: { ...defaultArgTypes },
   args: {
     ...defaultArgs,
-    iconName: iconName.options[1],
+    iconName: iconName.options![1],
     label: undefined,
     labelTwo: undefined,
   },
@@ -238,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],
   },
 };
 
@@ -247,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 d15e9d23bb..7d3a7a77ae 100644
--- a/src/components/toggle/toggle/toggle.ts
+++ b/src/components/toggle/toggle/toggle.ts
@@ -3,17 +3,18 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
-import { isArrowKeyPressed, getNextElementIndex, interactivityChecker } from '../../core/a11y';
-import { hostAttributes } from '../../core/common-behaviors';
-import { isBrowser } from '../../core/dom';
-import { EventEmitter, ConnectedAbortController } from '../../core/eventing';
+import { isArrowKeyPressed, getNextElementIndex, interactivityChecker } from '../../core/a11y.js';
+import { SbbConnectedAbortController } from '../../core/controllers.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { isBrowser } from '../../core/dom.js';
+import { EventEmitter } from '../../core/eventing.js';
 import type {
   SbbCheckedStateChange,
   SbbStateChange,
   SbbValueStateChange,
-} from '../../core/interfaces';
-import { AgnosticResizeObserver } from '../../core/observers';
-import type { SbbToggleOptionElement } from '../toggle-option';
+} from '../../core/interfaces.js';
+import { AgnosticResizeObserver } from '../../core/observers.js';
+import type { SbbToggleOptionElement } from '../toggle-option.js';
 
 import style from './toggle.scss?lit&inline';
 
@@ -88,7 +89,9 @@ export class SbbToggleElement extends LitElement {
       options[0];
 
     if (!selectedOption) {
-      isBrowser() && console.warn(`sbb-toggle: No available options! (${this.id || 'No id'})`);
+      if (import.meta.env.DEV && isBrowser()) {
+        console.warn(`sbb-toggle: No available options! (${this.id || 'No id'})`);
+      }
       return;
     }
     if (!selectedOption.checked) {
@@ -128,7 +131,7 @@ export class SbbToggleElement extends LitElement {
   private _handleInput(): void {
     this._emitChange();
   }
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
 
   private _handleStateChange(event: CustomEvent<SbbToggleStateChange>): void {
     const target: SbbToggleOptionElement = event.target as SbbToggleOptionElement;
diff --git a/src/components/train.ts b/src/components/train.ts
new file mode 100644
index 0000000000..a0aae31bea
--- /dev/null
+++ b/src/components/train.ts
@@ -0,0 +1,4 @@
+export * from './train/train.js';
+export * from './train/train-blocked-passage.js';
+export * from './train/train-formation.js';
+export * from './train/train-wagon.js';
diff --git a/src/components/train/index.ts b/src/components/train/index.ts
deleted file mode 100644
index 950d71af17..0000000000
--- a/src/components/train/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './train';
-export * from './train-blocked-passage';
-export * from './train-formation';
-export * from './train-wagon';
diff --git a/src/components/train/train-blocked-passage.ts b/src/components/train/train-blocked-passage.ts
new file mode 100644
index 0000000000..a3d203c86d
--- /dev/null
+++ b/src/components/train/train-blocked-passage.ts
@@ -0,0 +1 @@
+export * from './train-blocked-passage/train-blocked-passage.js';
diff --git a/src/components/train/train-blocked-passage/index.ts b/src/components/train/train-blocked-passage/index.ts
deleted file mode 100644
index 1f63fbaf6a..0000000000
--- a/src/components/train/train-blocked-passage/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './train-blocked-passage';
diff --git a/src/components/train/train-blocked-passage/train-blocked-passage.e2e.ts b/src/components/train/train-blocked-passage/train-blocked-passage.e2e.ts
index 909ab0ab15..9af3793200 100644
--- a/src/components/train/train-blocked-passage/train-blocked-passage.e2e.ts
+++ b/src/components/train/train-blocked-passage/train-blocked-passage.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import { SbbTrainBlockedPassageElement } from './train-blocked-passage';
+import { SbbTrainBlockedPassageElement } from './train-blocked-passage.js';
 
 describe(`sbb-train-blocked-passage with ${fixture.name}`, () => {
   let element: SbbTrainBlockedPassageElement;
diff --git a/src/components/train/train-blocked-passage/train-blocked-passage.scss b/src/components/train/train-blocked-passage/train-blocked-passage.scss
index a77f9108a3..23990caae5 100644
--- a/src/components/train/train-blocked-passage/train-blocked-passage.scss
+++ b/src/components/train/train-blocked-passage/train-blocked-passage.scss
@@ -1,14 +1,13 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-train-blocked-passage-height: var(--sbb-train-formation-wagon-height);
   --sbb-train-blocked-passage-background-color: var(--sbb-color-red);
   --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
-  --sbb-train-blocked-passage-icon-dimension: var(--sbb-size-icon-timetable-attribute);
+  --sbb-train-blocked-passage-icon-dimension: #{sbb.px-to-rem-build(16)};
   --sbb-train-blocked-passage-icon-bar-width: #{sbb.px-to-rem-build(10)};
   --sbb-train-blocked-passage-icon-bar-height: #{sbb.px-to-rem-build(4)};
   --sbb-train-blocked-passage-icon-bar-border-radius: #{sbb.px-to-rem-build(1)};
@@ -17,6 +16,8 @@
     --sbb-train-blocked-passage-background-color: CanvasText;
     --sbb-train-blocked-passage-bar-color: Canvas;
   }
+
+  display: block;
 }
 
 .sbb-train-blocked-passage {
diff --git a/src/components/train/train-blocked-passage/train-blocked-passage.spec.ts b/src/components/train/train-blocked-passage/train-blocked-passage.spec.ts
index 802711bee0..1b98c40451 100644
--- a/src/components/train/train-blocked-passage/train-blocked-passage.spec.ts
+++ b/src/components/train/train-blocked-passage/train-blocked-passage.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import './train-blocked-passage';
+import './train-blocked-passage.js';
 
 describe(`sbb-train-blocked-passage`, () => {
   it('renders', async () => {
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 cf5ad28c48..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
@@ -2,10 +2,10 @@ import type { Args, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './train-blocked-passage';
+import './train-blocked-passage.js';
 
 const Template = (args: Args): TemplateResult => html`
   <sbb-train-blocked-passage ${sbbSpread(args)}></sbb-train-blocked-passage>
@@ -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.ts b/src/components/train/train-formation.ts
new file mode 100644
index 0000000000..42745d2309
--- /dev/null
+++ b/src/components/train/train-formation.ts
@@ -0,0 +1 @@
+export * from './train-formation/train-formation.js';
diff --git a/src/components/train/train-formation/index.ts b/src/components/train/train-formation/index.ts
deleted file mode 100644
index 7f08067f28..0000000000
--- a/src/components/train/train-formation/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './train-formation';
diff --git a/src/components/train/train-formation/train-formation.e2e.ts b/src/components/train/train-formation/train-formation.e2e.ts
index 79dfafc267..1c9d896ae1 100644
--- a/src/components/train/train-formation/train-formation.e2e.ts
+++ b/src/components/train/train-formation/train-formation.e2e.ts
@@ -1,15 +1,15 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbTrainElement } from '../train';
-import type { SbbTrainWagonElement } from '../train-wagon';
+import { fixture } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
+import type { SbbTrainWagonElement } from '../train-wagon.js';
+import type { SbbTrainElement } from '../train.js';
 
-import { SbbTrainFormationElement } from './train-formation';
-import '../train';
-import '../train-wagon';
-import '../train-blocked-passage';
+import { SbbTrainFormationElement } from './train-formation.js';
+import '../train.js';
+import '../train-wagon.js';
+import '../train-blocked-passage.js';
 
 function extractAggregatedSectors(element: SbbTrainFormationElement): Record<string, string>[] {
   return Array.from(
@@ -34,9 +34,9 @@ describe(`sbb-train-formation with ${fixture.name}`, () => {
   let element: SbbTrainFormationElement;
   const ssrModules = [
     './train-formation.ts',
-    '../train/index.ts',
-    '../train-wagon/index.ts',
-    '../train-blocked-passage/index.ts',
+    '../train.ts',
+    '../train-wagon.ts',
+    '../train-blocked-passage.ts',
   ];
 
   it('should render', async () => {
@@ -191,7 +191,7 @@ describe(`sbb-train-formation with ${fixture.name}`, () => {
             </sbb-train>
           </sbb-train-formation>
         `,
-        { modules: ['./train-formation.ts', '../train/index.ts', '../train-wagon/index.ts'] },
+        { modules: ['./train-formation.ts', '../train.ts', '../train-wagon.ts'] },
       );
 
       expect(extractAggregatedSectors(element)).to.be.eql([
@@ -219,7 +219,7 @@ describe(`sbb-train-formation with ${fixture.name}`, () => {
             </sbb-train>
           </sbb-train-formation>
         `,
-        { modules: ['./train-formation.ts', '../train/index.ts', '../train-wagon/index.ts'] },
+        { modules: ['./train-formation.ts', '../train.ts', '../train-wagon.ts'] },
       );
 
       expect(extractAggregatedSectors(element)).to.be.eql([
@@ -258,7 +258,7 @@ describe(`sbb-train-formation with ${fixture.name}`, () => {
             </sbb-train>
           </sbb-train-formation>
         `,
-        { modules: ['./train-formation.ts', '../train/index.ts', '../train-wagon/index.ts'] },
+        { modules: ['./train-formation.ts', '../train.ts', '../train-wagon.ts'] },
       );
 
       expect(extractAggregatedSectors(element)).to.be.eql([
@@ -297,7 +297,7 @@ describe(`sbb-train-formation with ${fixture.name}`, () => {
             </sbb-train>
           </sbb-train-formation>
         `,
-        { modules: ['./train-formation.ts', '../train/index.ts', '../train-wagon/index.ts'] },
+        { modules: ['./train-formation.ts', '../train.ts', '../train-wagon.ts'] },
       );
 
       element.querySelector<SbbTrainWagonElement>('sbb-train-wagon')!.remove();
@@ -329,7 +329,7 @@ describe(`sbb-train-formation with ${fixture.name}`, () => {
             </sbb-train>
           </sbb-train-formation>
         `,
-        { modules: ['./train-formation.ts', '../train/index.ts', '../train-wagon/index.ts'] },
+        { modules: ['./train-formation.ts', '../train.ts', '../train-wagon.ts'] },
       );
 
       element.querySelector<SbbTrainElement>('sbb-train')!.remove();
diff --git a/src/components/train/train-formation/train-formation.scss b/src/components/train/train-formation/train-formation.scss
index 27be052522..62ddf7a844 100644
--- a/src/components/train/train-formation/train-formation.scss
+++ b/src/components/train/train-formation/train-formation.scss
@@ -1,19 +1,20 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-train-formation-inline-padding: var(--sbb-spacing-fixed-4x);
   --sbb-train-formation-background-color: var(--sbb-color-white);
   --sbb-train-formation-sector-label-color: var(--sbb-color-metal);
   --sbb-train-formation-sector-line-color: var(--sbb-color-smoke);
-  --sbb-train-formation-blocked-passage-width: var(--sbb-size-icon-timetable-attribute);
+  --sbb-train-formation-blocked-passage-width: #{sbb.px-to-rem-build(16)};
 
   @include sbb.if-forced-colors {
     --sbb-train-formation-sector-line-color: CanvasText;
   }
+
+  display: block;
 }
 
 :host([hide-wagon-label]) {
diff --git a/src/components/train/train-formation/train-formation.spec.ts b/src/components/train/train-formation/train-formation.spec.ts
index 962c8bbc51..32ac397e98 100644
--- a/src/components/train/train-formation/train-formation.spec.ts
+++ b/src/components/train/train-formation/train-formation.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
 
-import './train-formation';
-import '../train';
-import '../train-wagon';
+import './train-formation.js';
+import '../train.js';
+import '../train-wagon.js';
 
 describe(`sbb-train-formation`, () => {
   it('should render with one train', async () => {
diff --git a/src/components/train/train-formation/train-formation.stories.ts b/src/components/train/train-formation/train-formation.stories.ts
index f14e005213..ce739fce6d 100644
--- a/src/components/train/train-formation/train-formation.stories.ts
+++ b/src/components/train/train-formation/train-formation.stories.ts
@@ -3,14 +3,14 @@ import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import '../../icon';
-import '../train';
-import '../train-wagon';
-import '../train-blocked-passage';
-import './train-formation';
+import '../../icon.js';
+import '../train.js';
+import '../train-wagon.js';
+import '../train-blocked-passage.js';
+import './train-formation.js';
 
 const MountedFormationTemplate = (args: Args): TemplateResult => html`
   <sbb-train-formation ${sbbSpread(args)}>
@@ -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-formation/train-formation.ts b/src/components/train/train-formation/train-formation.ts
index f0252093ec..5846ce78c4 100644
--- a/src/components/train/train-formation/train-formation.ts
+++ b/src/components/train/train-formation/train-formation.ts
@@ -8,14 +8,13 @@ import {
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
-import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/common-behaviors';
-import { LanguageController } from '../../core/common-behaviors';
-import { ConnectedAbortController } from '../../core/eventing';
-import { i18nSector, i18nSectorShort, i18nTrains } from '../../core/i18n';
-import { AgnosticResizeObserver } from '../../core/observers';
-import type { SbbTrainElement } from '../train';
-import type { SbbTrainBlockedPassageElement } from '../train-blocked-passage';
-import type { SbbTrainWagonElement } from '../train-wagon';
+import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js';
+import { i18nSector, i18nSectorShort, i18nTrains } from '../../core/i18n.js';
+import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js';
+import { AgnosticResizeObserver } from '../../core/observers.js';
+import type { SbbTrainBlockedPassageElement } from '../train-blocked-passage.js';
+import type { SbbTrainWagonElement } from '../train-wagon.js';
+import type { SbbTrainElement } from '../train.js';
 
 import style from './train-formation.scss?lit&inline';
 
@@ -47,8 +46,8 @@ export class SbbTrainFormationElement extends SbbNamedSlotListMixin<
   /** Element that defines the visible content width. */
   private _formationDiv!: HTMLDivElement;
   private _contentResizeObserver = new AgnosticResizeObserver(() => this._applyCssWidth());
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this);
+  private _abort = new SbbConnectedAbortController(this);
+  private _language = new SbbLanguageController(this);
 
   public override connectedCallback(): void {
     super.connectedCallback();
diff --git a/src/components/train/train-wagon.ts b/src/components/train/train-wagon.ts
new file mode 100644
index 0000000000..acdff3ea35
--- /dev/null
+++ b/src/components/train/train-wagon.ts
@@ -0,0 +1 @@
+export * from './train-wagon/train-wagon.js';
diff --git a/src/components/train/train-wagon/index.ts b/src/components/train/train-wagon/index.ts
deleted file mode 100644
index a448f61f91..0000000000
--- a/src/components/train/train-wagon/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './train-wagon';
diff --git a/src/components/train/train-wagon/train-wagon.e2e.ts b/src/components/train/train-wagon/train-wagon.e2e.ts
index ab4c0669a2..4c8e2e57cc 100644
--- a/src/components/train/train-wagon/train-wagon.e2e.ts
+++ b/src/components/train/train-wagon/train-wagon.e2e.ts
@@ -1,11 +1,11 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbIconElement } from '../../icon';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
+import type { SbbIconElement } from '../../icon.js';
 
-import { SbbTrainWagonElement } from './train-wagon';
+import { SbbTrainWagonElement } from './train-wagon.js';
 
 describe(`sbb-train-wagon with ${fixture.name}`, () => {
   let element: SbbTrainWagonElement;
@@ -34,7 +34,7 @@ describe(`sbb-train-wagon with ${fixture.name}`, () => {
         <sbb-icon name="sa-rs"></sbb-icon>
         <sbb-icon name="sa-rs"></sbb-icon>
       </sbb-train-wagon>`,
-      { modules: ['./train-wagon.ts', '../../icon/index.ts'] },
+      { modules: ['./train-wagon.ts', '../../icon.ts'] },
     );
 
     Array.from(element.querySelectorAll('sbb-icon')).forEach((icon, index) => {
diff --git a/src/components/train/train-wagon/train-wagon.scss b/src/components/train/train-wagon/train-wagon.scss
index 5eeb6866c2..87cc1d9580 100644
--- a/src/components/train/train-wagon/train-wagon.scss
+++ b/src/components/train/train-wagon/train-wagon.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-train-wagon-width: var(--sbb-train-formation-wagon-width);
@@ -19,6 +18,8 @@
   @include sbb.if-forced-colors {
     --sbb-train-wagon-shape-color-closed: CanvasText;
   }
+
+  display: block;
 }
 
 .sbb-train-wagon {
diff --git a/src/components/train/train-wagon/train-wagon.spec.ts b/src/components/train/train-wagon/train-wagon.spec.ts
index 3922344bec..5d7ad0cd43 100644
--- a/src/components/train/train-wagon/train-wagon.spec.ts
+++ b/src/components/train/train-wagon/train-wagon.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
 
-import type { SbbTrainWagonElement } from './train-wagon';
-import './train-wagon';
-import '../../icon';
-import '../../timetable-occupancy-icon';
+import type { SbbTrainWagonElement } from './train-wagon.js';
+import './train-wagon.js';
+import '../../icon.js';
+import '../../timetable-occupancy-icon.js';
 
 async function extractAriaLabels(
   properties: Partial<
diff --git a/src/components/train/train-wagon/train-wagon.stories.ts b/src/components/train/train-wagon/train-wagon.stories.ts
index cf57e4d3c8..a9c0fac97e 100644
--- a/src/components/train/train-wagon/train-wagon.stories.ts
+++ b/src/components/train/train-wagon/train-wagon.stories.ts
@@ -3,10 +3,10 @@ import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './train-wagon';
+import './train-wagon.js';
 
 const Template = (args: Args): TemplateResult =>
   html`<sbb-train-wagon ${sbbSpread(args)}></sbb-train-wagon>`;
@@ -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-wagon/train-wagon.ts b/src/components/train/train-wagon/train-wagon.ts
index 3accb0bc93..a44a8e1636 100644
--- a/src/components/train/train-wagon/train-wagon.ts
+++ b/src/components/train/train-wagon/train-wagon.ts
@@ -1,10 +1,15 @@
-import { type CSSResultGroup, LitElement, nothing, type TemplateResult } from 'lit';
+import {
+  type CSSResultGroup,
+  LitElement,
+  nothing,
+  type PropertyValues,
+  type TemplateResult,
+} from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { LanguageController, SbbNamedSlotListMixin } from '../../core/common-behaviors';
-import { setAttribute } from '../../core/dom';
-import { EventEmitter } from '../../core/eventing';
+import { SbbLanguageController } from '../../core/controllers.js';
+import { EventEmitter } from '../../core/eventing.js';
 import {
   i18nAdditionalWagonInformationHeading,
   i18nBlockedPassage,
@@ -14,15 +19,16 @@ import {
   i18nSector,
   i18nWagonLabel,
   i18nWagonLabelNumber,
-} from '../../core/i18n';
-import type { SbbOccupancy } from '../../core/interfaces';
-import type { SbbIconElement } from '../../icon';
-
-import '../../icon';
-import '../../timetable-occupancy-icon';
+} from '../../core/i18n.js';
+import type { SbbOccupancy } from '../../core/interfaces.js';
+import { SbbNamedSlotListMixin } from '../../core/mixins.js';
+import type { SbbIconElement } from '../../icon.js';
 
 import style from './train-wagon.scss?lit&inline';
 
+import '../../icon.js';
+import '../../timetable-occupancy-icon.js';
+
 /**
  * It displays a train compartment within a `sbb-train` component.
  *
@@ -69,7 +75,7 @@ export class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement,
   @property({ attribute: 'additional-accessibility-text' })
   public additionalAccessibilityText?: string;
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   /**
    * @internal
@@ -84,6 +90,21 @@ export class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement,
     },
   );
 
+  protected override willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+
+    if (
+      changedProperties.has('type') ||
+      changedProperties.has('occupancy') ||
+      changedProperties.has('wagonClass')
+    ) {
+      this.toggleAttribute(
+        'data-has-visible-wagon-content',
+        Boolean((this.type === 'wagon' && this.occupancy) || this.wagonClass),
+      );
+    }
+  }
+
   private _sectorChanged(): void {
     this._sectorChange.emit();
   }
@@ -105,17 +126,10 @@ export class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement,
           }
         </${unsafeStatic(TAG_NAME)}>
       `;
-      /* eslint-disable lit/binding-positions */
     };
 
     const sectorString = `${i18nSector[this._language.current]}, ${this.sector}`;
 
-    setAttribute(
-      this,
-      'data-has-visible-wagon-content',
-      Boolean((this.type === 'wagon' && this.occupancy) || this.wagonClass),
-    );
-
     return html`
       <div class="sbb-train-wagon">
         ${this.type === 'wagon'
diff --git a/src/components/train/train.ts b/src/components/train/train.ts
new file mode 100644
index 0000000000..b774c8f91d
--- /dev/null
+++ b/src/components/train/train.ts
@@ -0,0 +1 @@
+export * from './train/train.js';
diff --git a/src/components/train/train/index.ts b/src/components/train/train/index.ts
deleted file mode 100644
index fbf75051e2..0000000000
--- a/src/components/train/train/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './train';
diff --git a/src/components/train/train/train.e2e.ts b/src/components/train/train/train.e2e.ts
index 18578ed496..4ed1bf322e 100644
--- a/src/components/train/train/train.e2e.ts
+++ b/src/components/train/train/train.e2e.ts
@@ -1,13 +1,13 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbTrainWagonElement } from '../train-wagon';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForLitRender } from '../../core/testing.js';
+import type { SbbTrainWagonElement } from '../train-wagon.js';
 
-import { SbbTrainElement } from './train';
+import { SbbTrainElement } from './train.js';
 
-import '../train-wagon';
+import '../train-wagon.js';
 
 describe(`sbb-train with ${fixture.name}`, () => {
   let element: SbbTrainElement;
@@ -26,7 +26,7 @@ describe(`sbb-train with ${fixture.name}`, () => {
           <sbb-train-wagon></sbb-train-wagon>
         </sbb-train>
       `,
-      { modules: ['./train.ts', '../train-wagon/index.ts'] },
+      { modules: ['./train.ts', '../train-wagon.ts'] },
     );
     const trainSlotChangeSpy = new EventSpy(SbbTrainElement.events.trainSlotChange);
 
diff --git a/src/components/train/train/train.scss b/src/components/train/train/train.scss
index 575a55017c..a65007945f 100644
--- a/src/components/train/train/train.scss
+++ b/src/components/train/train/train.scss
@@ -1,8 +1,7 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-train-direction-spacing: var(--sbb-spacing-fixed-4x);
@@ -26,6 +25,8 @@
   @include sbb.if-forced-colors {
     --sbb-train-direction-line-color: CanvasText;
   }
+
+  display: block;
 }
 
 .sbb-train {
diff --git a/src/components/train/train/train.spec.ts b/src/components/train/train/train.spec.ts
index 8d63e932fc..9fa3390948 100644
--- a/src/components/train/train/train.spec.ts
+++ b/src/components/train/train/train.spec.ts
@@ -1,10 +1,10 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
 
-import './train';
+import './train.js';
 
 describe(`sbb-train`, () => {
   it('should render', async () => {
diff --git a/src/components/train/train/train.stories.ts b/src/components/train/train/train.stories.ts
index 86a1167d32..443cec1f67 100644
--- a/src/components/train/train/train.stories.ts
+++ b/src/components/train/train/train.stories.ts
@@ -3,10 +3,10 @@ import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './train';
+import './train.js';
 
 const Template = (args: Args): TemplateResult => html`<sbb-train ${sbbSpread(args)}></sbb-train>`;
 
@@ -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/train/train/train.ts b/src/components/train/train/train.ts
index 085cd07578..2ec403e01b 100644
--- a/src/components/train/train/train.ts
+++ b/src/components/train/train/train.ts
@@ -1,24 +1,24 @@
 import {
   type CSSResultGroup,
-  nothing,
   LitElement,
+  nothing,
   type PropertyValueMap,
   type TemplateResult,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/common-behaviors';
-import { LanguageController } from '../../core/common-behaviors';
-import { EventEmitter } from '../../core/eventing';
-import { i18nTrain, i18nWagonsLabel } from '../../core/i18n';
-import type { SbbTitleLevel } from '../../title';
-import type { SbbTrainBlockedPassageElement } from '../train-blocked-passage';
-import type { SbbTrainWagonElement } from '../train-wagon';
+import { SbbLanguageController } from '../../core/controllers.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { i18nTrain, i18nWagonsLabel } from '../../core/i18n.js';
+import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js';
+import type { SbbTitleLevel } from '../../title.js';
+import type { SbbTrainBlockedPassageElement } from '../train-blocked-passage.js';
+import type { SbbTrainWagonElement } from '../train-wagon.js';
 
 import style from './train.scss?lit&inline';
 
-import '../../icon';
+import '../../icon.js';
 
 /**
  * It can be used as a container for `sbb-train-wagon` or `sbb-train-blocked-passage` components.
@@ -51,7 +51,7 @@ export class SbbTrainElement extends SbbNamedSlotListMixin<
   /** Controls the direction indicator to show the arrow left or right. Default is left.  */
   @property({ reflect: true }) public direction: 'left' | 'right' = 'left';
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   /**
    * @internal
@@ -128,7 +128,6 @@ export class SbbTrainElement extends SbbNamedSlotListMixin<
         }
       </div>
     `;
-    /* eslint-disable lit/binding-positions */
   }
 }
 
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.ts b/src/components/visual-checkbox.ts
new file mode 100644
index 0000000000..c807d7b5cb
--- /dev/null
+++ b/src/components/visual-checkbox.ts
@@ -0,0 +1 @@
+export * from './visual-checkbox/visual-checkbox.js';
diff --git a/src/components/visual-checkbox/index.ts b/src/components/visual-checkbox/index.ts
deleted file mode 100644
index 48a3a358f8..0000000000
--- a/src/components/visual-checkbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './visual-checkbox';
diff --git a/src/components/visual-checkbox/visual-checkbox.e2e.ts b/src/components/visual-checkbox/visual-checkbox.e2e.ts
index 51286b7e81..52c465551a 100644
--- a/src/components/visual-checkbox/visual-checkbox.e2e.ts
+++ b/src/components/visual-checkbox/visual-checkbox.e2e.ts
@@ -1,9 +1,9 @@
 import { assert } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private';
+import { fixture } from '../core/testing/private.js';
 
-import { SbbVisualCheckboxElement } from './visual-checkbox';
+import { SbbVisualCheckboxElement } from './visual-checkbox.js';
 
 describe(`sbb-visual-checkbox with ${fixture.name}`, (): void => {
   it('renders', async (): Promise<void> => {
diff --git a/src/components/visual-checkbox/visual-checkbox.scss b/src/components/visual-checkbox/visual-checkbox.scss
index 01d8d725ac..fd46080f42 100644
--- a/src/components/visual-checkbox/visual-checkbox.scss
+++ b/src/components/visual-checkbox/visual-checkbox.scss
@@ -1,8 +1,7 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);
@@ -17,6 +16,8 @@
     --sbb-visual-checkbox-selection-color: Canvas;
     --sbb-visual-checkbox-border-width: 0;
   }
+
+  display: block;
 }
 
 :host([negative]) {
diff --git a/src/components/visual-checkbox/visual-checkbox.spec.ts b/src/components/visual-checkbox/visual-checkbox.spec.ts
index d5e5a0e9fc..5e3293eee1 100644
--- a/src/components/visual-checkbox/visual-checkbox.spec.ts
+++ b/src/components/visual-checkbox/visual-checkbox.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import './visual-checkbox';
+import './visual-checkbox.js';
 
 describe(`sbb-visual-checkbox`, () => {
   it('renders unchecked', async () => {
diff --git a/src/components/visual-checkbox/visual-checkbox.stories.ts b/src/components/visual-checkbox/visual-checkbox.stories.ts
index ae9ef42ed8..35a855f64b 100644
--- a/src/components/visual-checkbox/visual-checkbox.stories.ts
+++ b/src/components/visual-checkbox/visual-checkbox.stories.ts
@@ -2,16 +2,11 @@ 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 '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
-import './visual-checkbox';
-
-const wrapperStyle = (context: StoryContext): Record<string, string> => ({
-  'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
+import './visual-checkbox.js';
 
 const checked: InputType = {
   control: {
@@ -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/components/visual-checkbox/visual-checkbox.ts b/src/components/visual-checkbox/visual-checkbox.ts
index dd1631a30e..0ea6ee2ca3 100644
--- a/src/components/visual-checkbox/visual-checkbox.ts
+++ b/src/components/visual-checkbox/visual-checkbox.ts
@@ -2,7 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { SbbDisabledMixin, SbbNegativeMixin } from '../core/common-behaviors';
+import { SbbDisabledMixin, SbbNegativeMixin } from '../core/mixins.js';
 
 import style from './visual-checkbox.scss?lit&inline';
 
diff --git a/src/components/vite.config.ts b/src/components/vite.config.ts
index 67ad1354da..784043e191 100644
--- a/src/components/vite.config.ts
+++ b/src/components/vite.config.ts
@@ -1,59 +1,37 @@
-import { dirname, join } from 'path';
+import { join } from 'path';
 
-import { cli } from '@custom-elements-manifest/analyzer/cli';
-import * as sass from 'sass';
-import type { PluginOption, ResolvedConfig, UserConfig } from 'vite';
-import { defineConfig, mergeConfig } from 'vite';
-import dts from 'vite-plugin-dts';
+import { defineConfig, mergeConfig, type UserConfig } from 'vite';
 
-import rootConfig, {
+import {
   copyAssets,
-  globIndexMap,
+  copySass,
+  customElementsManifest,
+  distDir,
+  dts,
+  resolveEntryPoints,
   isProdBuild,
   packageJsonTemplate,
-  root,
-} from '../../vite.config';
+  typography,
+  verifyEntryPoints,
+} from '../../tools/vite/index.js';
+import rootConfig from '../../vite.config.js';
 
 const packageRoot = new URL('.', import.meta.url);
-const outDir = new URL('./dist/components/', root);
 // Include all directories containing an index.ts
-const entryPoints = globIndexMap(packageRoot);
-const entryPointRoots = Object.keys(entryPoints)
-  .map((e) => join(packageRoot.pathname, dirname(e)))
-  .sort();
-const barrelExports = entryPointRoots
-  .filter((v) => entryPointRoots.some((e) => e.startsWith(`${v}/`)))
-  .map((e) => `${e}/index.ts`);
+const entryPoints = resolveEntryPoints(packageRoot, ['core', 'core/styles/**/']);
+const barrelExports = Object.keys(entryPoints)
+  .map((e) => join(packageRoot.pathname, e))
+  .sort()
+  .filter((v, _i, a) => a.some((e) => e.startsWith(`${v}/`)))
+  .map((e) => `${e}.ts`);
 
-/* eslint-disable @typescript-eslint/no-use-before-define */
 export default defineConfig((config) =>
   mergeConfig(rootConfig, <UserConfig>{
     root: packageRoot.pathname,
     plugins: [
+      ...(config.command === 'build' ? [dts()] : []),
       ...(isProdBuild(config)
         ? [
-            dts({
-              entryRoot: '.',
-              include: `**/*.ts`,
-              exclude: [
-                '**/*[.-]{stories,spec,e2e,test-utils}.ts',
-                '**/private/*',
-                'vite.config.ts',
-              ],
-
-              beforeWriteFile: (filePath, content) => {
-                if (content.includes('.scss?lit&inline') || content.includes('.scss?inline&lit')) {
-                  return {
-                    filePath,
-                    // Remove lines with scss modules
-                    content: content.replace(
-                      /export \{[^}]+\}\s+from\s+'[^']+\.scss\?(lit&inline|inline&lit)';\n?/gm,
-                      '',
-                    ),
-                  };
-                }
-              },
-            }),
             customElementsManifest(),
             packageJsonTemplate({
               exports: {
@@ -61,10 +39,15 @@ export default defineConfig((config) =>
                 './typography.css': {
                   style: './typography.css',
                 },
+                './fullfont.css': {
+                  style: './fullfont.css',
+                },
               },
             }),
-            copyAssets(['_index.scss', 'core/styles/**/*.scss', '../../README.md']),
+            copyAssets(['_index.scss', '../../README.md']),
+            copySass('core/styles'),
             typography(),
+            verifyEntryPoints(),
           ]
         : []),
     ],
@@ -74,9 +57,11 @@ export default defineConfig((config) =>
         entry: entryPoints,
         formats: ['es'],
       },
-      minify: false,
-      outDir: outDir.pathname,
+      minify: isProdBuild(config),
+      outDir: new URL(`./components/${isProdBuild(config) ? '' : 'development/'}`, distDir)
+        .pathname,
       emptyOutDir: true,
+      sourcemap: isProdBuild(config) ? false : 'inline',
       rollupOptions: {
         external: (source: string, importer: string | undefined) => {
           if (
@@ -86,7 +71,7 @@ export default defineConfig((config) =>
           ) {
             if (source.includes('.scss')) {
               throw Error(`Do not import scss from another directory.
-               Re export sass via barrel export (index.ts). See button/common/index.ts.
+               Re export sass via barrel export (index.ts). See button/common.ts.
                Source: ${source}.
                Importer: ${importer}.`);
             }
@@ -99,40 +84,3 @@ export default defineConfig((config) =>
     assetsInclude: ['_index.scss', 'core/styles/**/*.scss', 'README.md'],
   }),
 );
-
-function customElementsManifest(): PluginOption {
-  return {
-    name: 'custom-elements-definition',
-    closeBundle() {
-      this.info(`Generating custom elements manifest`);
-      return cli({
-        argv: [
-          'analyze',
-          '--config',
-          new URL('./config/custom-elements-manifest.config.js', root).pathname,
-        ],
-        cwd: root.pathname,
-      });
-    },
-  };
-}
-
-function typography(): PluginOption {
-  let viteConfig: ResolvedConfig;
-  return {
-    name: 'typography',
-    configResolved(config) {
-      viteConfig = config;
-    },
-    generateBundle() {
-      const globalCss = sass.compile(join(viteConfig.root, 'core/styles/global.scss'), {
-        loadPaths: [root.pathname, join(root.pathname, '/node_modules/')],
-      });
-      this.emitFile({
-        type: 'asset',
-        fileName: 'typography.css',
-        source: globalCss.css,
-      });
-    },
-  };
-}
diff --git a/src/react/.gitignore b/src/react/.gitignore
index 6273ded4ec..5de853b420 100644
--- a/src/react/.gitignore
+++ b/src/react/.gitignore
@@ -1,2 +1,4 @@
 */
-!core/
\ No newline at end of file
+*.ts
+!core/
+!core.ts
\ No newline at end of file
diff --git a/src/react/core.ts b/src/react/core.ts
new file mode 100644
index 0000000000..8a5f5a3ab9
--- /dev/null
+++ b/src/react/core.ts
@@ -0,0 +1,2 @@
+export * from './core/create-component.js';
+export * from './core/ssr-extensions.js';
diff --git a/src/react/core/create-component.ts b/src/react/core/create-component.ts
index b26d1c2637..1e944108e9 100644
--- a/src/react/core/create-component.ts
+++ b/src/react/core/create-component.ts
@@ -1,6 +1,11 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-/* eslint-disable @typescript-eslint/ban-types */
-/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable
+  @typescript-eslint/explicit-function-return-type,
+  @typescript-eslint/ban-types,
+  @typescript-eslint/naming-convention,
+  @typescript-eslint/naming-convention,
+  import-x/default,
+  import-x/no-named-as-default-member
+*/
 /**
  * Copied from https://github.com/lit/lit/blob/main/packages/react/src/create-component.ts
  * TODO: Can be removed once https://github.com/lit/lit/issues/4023 or https://github.com/lit/lit/pull/4476 is solved.
@@ -19,9 +24,8 @@ import {
 import type React from 'react';
 
 const NODE_MODE = isServer;
-const DEV_MODE = true;
+const DEV_MODE = import.meta.env.DEV;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type DistributiveOmit<T, K extends string | number | symbol> = T extends any
   ? K extends keyof T
     ? Omit<T, K>
@@ -285,6 +289,9 @@ export const createComponent = <I extends HTMLElement, E extends EventNames = {}
           reactProps[attributeName] = toAttribute ? toAttribute(v) : v;
         } else if (v) {
           reactProps[attributeName] = '';
+          // Some boolean props like `checked` don't react to mutations after user interaction.
+          // To ensure expectation from React/JSX, we set also the corresponding property in this case.
+          elementProps[k] = v;
         } else {
           elementProps[k] = v;
         }
diff --git a/src/react/core/index.ts b/src/react/core/index.ts
deleted file mode 100644
index a978db68e1..0000000000
--- a/src/react/core/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './create-component';
-export * from './ssr-extensions';
diff --git a/src/react/core/ssr-extensions.ts b/src/react/core/ssr-extensions.ts
index abfd212451..7d5a1ba219 100644
--- a/src/react/core/ssr-extensions.ts
+++ b/src/react/core/ssr-extensions.ts
@@ -1,3 +1,4 @@
+/* eslint-disable import-x/default, import-x/no-named-as-default-member */
 import { isServer } from 'lit';
 import type { ComponentType, JSXElementConstructor, ReactNode } from 'react';
 import react, { Children, isValidElement } from 'react';
@@ -18,7 +19,8 @@ export const withSsrDataSlotNames = <P extends object>(
 ): ComponentType<P> => {
   return !isServer
     ? component
-    : (props: WithChildren<P>) => {
+    : (originalProps) => {
+        const props = originalProps as WithChildren<P>;
         if (!props.children) {
           return react.createElement(component, props);
         }
@@ -69,7 +71,8 @@ export const withSsrDataChildCount = <P extends object>(
 ): ComponentType<P> => {
   return !isServer
     ? component
-    : (props: WithChildren<P>) => {
+    : (originalProps) => {
+        const props = originalProps as WithChildren<P>;
         if (!props.children) {
           return react.createElement(component, props);
         }
diff --git a/src/react/vite.config.ts b/src/react/vite.config.ts
index e4c91a2208..3509c44529 100644
--- a/src/react/vite.config.ts
+++ b/src/react/vite.config.ts
@@ -1,59 +1,28 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-import {
-  existsSync,
-  mkdirSync,
-  readFileSync,
-  readdirSync,
-  rmSync,
-  statSync,
-  unlinkSync,
-  writeFileSync,
-} from 'fs';
-
-import type {
-  ClassDeclaration,
-  ClassField,
-  CustomElementDeclaration,
-  Declaration,
-  Module,
-  Package,
-} from 'custom-elements-manifest/schema';
-import type { PluginOption, UserConfig } from 'vite';
-import { defineConfig, mergeConfig } from 'vite';
-import dts from 'vite-plugin-dts';
+import { defineConfig, mergeConfig, type UserConfig } from 'vite';
 
-import rootConfig, {
-  globIndexMap,
+import {
+  distDir,
+  dts,
+  generateReactWrappers,
   isProdBuild,
   packageJsonTemplate,
-  root,
-} from '../../vite.config';
-
-const packageRoot = new URL('.', import.meta.url);
+} from '../../tools/vite/index.js';
+import rootConfig from '../../vite.config.js';
 
 export default defineConfig((config) =>
   mergeConfig(rootConfig, <UserConfig>{
-    root: packageRoot.pathname,
+    root: new URL('.', import.meta.url).pathname,
     plugins: [
       generateReactWrappers(),
-      ...(isProdBuild(config)
-        ? [
-            dts({
-              entryRoot: '.',
-              include: `**/*.ts`,
-              exclude: ['**/*.{stories,spec,e2e}.ts', 'vite.config.ts'],
-              pathsToAliases: false,
-            }),
-            packageJsonTemplate(),
-          ]
-        : []),
+      ...(config.command === 'build' ? [dts()] : []),
+      ...(isProdBuild(config) ? [packageJsonTemplate({ exportsExtensions: ['', '.js'] })] : []),
     ],
     build: {
       lib: {
         formats: ['es'],
       },
-      minify: false,
-      outDir: new URL('./dist/react/', root).pathname,
+      minify: isProdBuild(config),
+      outDir: new URL(`./react/${isProdBuild(config) ? '' : 'development/'}`, distDir).pathname,
       emptyOutDir: true,
       rollupOptions: {
         external: [/^@sbb-esta\/lyne-components\/?/, /^@lit\/react\/?/, /^lit\/?/, /^react/],
@@ -61,182 +30,3 @@ export default defineConfig((config) =>
     },
   }),
 );
-
-function generateReactWrappers(): PluginOption {
-  const manifestPath = new URL('./dist/components/custom-elements.json', root);
-  let manifest: Package;
-  try {
-    manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
-  } catch (e) {
-    console.error(
-      `Failed to read manifest at ${manifestPath}. Please run 'yarn build:components' or 'yarn docs:manifest' first!`,
-    );
-    process.exit(1);
-  }
-
-  const generatedPaths: URL[] = [];
-  function createDir(dir: URL): void {
-    if (!existsSync(dir)) {
-      createDir(new URL('..', dir));
-      generatedPaths.push(dir);
-      mkdirSync(dir);
-    }
-  }
-  return {
-    name: 'generate-react-wrappers',
-    config(config) {
-      const declarations = manifest.modules
-        .filter((m) => m.kind === 'javascript-module')
-        .reduce((current, next) => current.concat(next.declarations ?? []), [] as Declaration[]);
-      for (const module of manifest.modules) {
-        for (const declaration of module.declarations?.filter(
-          (d): d is CustomElementDeclaration => 'customElement' in d && d.customElement,
-        ) ?? []) {
-          const targetPath = new URL(`./${module.path}/index.ts`, packageRoot);
-          createDir(new URL('.', targetPath));
-          const reactTemplate = renderTemplate(declaration, declarations, module);
-          generatedPaths.push(targetPath);
-          writeFileSync(targetPath, reactTemplate, 'utf8');
-        }
-      }
-
-      for (const dirent of readdirSync(packageRoot, { withFileTypes: true }).filter((d) =>
-        d.isDirectory(),
-      )) {
-        const dir = new URL(`./${dirent.name}/`, packageRoot);
-        const dirIndex = new URL('./index.ts', dir);
-        if (!existsSync(dirIndex)) {
-          generatedPaths.push(dirIndex);
-          const dirInfo = readdirSync(dir, { withFileTypes: true })
-            .filter((d) => d.isDirectory())
-            .map((d) => `export * from './${d.name}';\n`)
-            .join('');
-          writeFileSync(new URL('./index.ts', dir), dirInfo, 'utf8');
-        }
-      }
-
-      config.build!.lib = {
-        ...(config.build!.lib ? config.build!.lib : {}),
-        entry: globIndexMap(packageRoot),
-      };
-    },
-    closeBundle() {
-      for (const path of generatedPaths.sort((a, b) => b.pathname.length - a.pathname.length)) {
-        try {
-          if (statSync(path).isDirectory()) {
-            rmSync(path, { recursive: true, force: true });
-          } else {
-            unlinkSync(path);
-          }
-        } catch {
-          /* empty */
-        }
-      }
-    },
-  };
-}
-
-function renderTemplate(
-  declaration: CustomElementDeclaration,
-  declarations: Declaration[],
-  module: Module,
-): string {
-  const extensions = findExtensionUsage(declaration, declarations);
-  const relativeCoreImportPath = `${'../'.repeat(module.path.split('/').length)}core`;
-  const extensionImport = !extensions.size
-    ? ''
-    : `
-
-import { ${Array.from(extensions.keys()).join(', ')} } from '${relativeCoreImportPath}';`;
-  const extension = [...extensions.values()].reduce(
-    (current, next) => (v) => current(next(v)),
-    (v: string) => v,
-  );
-  const reactTemplate = `/* autogenerated */
-import { createComponent, type EventName } from '${relativeCoreImportPath}';
-import { ${declaration.name} } from '@sbb-esta/lyne-components/${module.path}';
-import react from 'react';${extensionImport}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const ${declaration.name.replace(/Element$/, '')} = ${extension(`createComponent({
-  tagName: '${declaration.tagName}',
-  elementClass: ${declaration.name},
-  react,${
-    declaration.events
-      ? `
-  events: {${declaration
-    .events!.map(
-      (e) =>
-        `\n    'on${e.name.charAt(0).toUpperCase() + e.name.slice(1)}': '${e.name}' as EventName<${
-          e.type.text
-        }>,`,
-    )
-    .join('')}
-  },
-`
-      : ''
-  }
-})`)};
-`;
-  return reactTemplate;
-}
-
-function findExtensionUsage(
-  declaration: ClassDeclaration,
-  declarations: Declaration[],
-): Map<string, (_: string) => string> {
-  const extensions = new Map<string, (_: string) => string>();
-  if (usesSsrSlotState(declaration, declarations)) {
-    extensions.set('withSsrDataSlotNames', (v) => `withSsrDataSlotNames(${v})`);
-  }
-  const childTypes = namedSlotListElements(declaration);
-  if (childTypes.length) {
-    extensions.set(
-      'withSsrDataChildCount',
-      (v) => `withSsrDataChildCount([${childTypes.map((t) => `'${t}'`).join(', ')}], ${v})`,
-    );
-  }
-  return extensions;
-}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-type ClassDeclarationSSR = ClassDeclaration & { _ssrslotstate?: boolean };
-const ssrSlotStateKey = '_ssrslotstate';
-function usesSsrSlotState(
-  declaration: ClassDeclarationSSR | undefined,
-  declarations: Declaration[],
-): boolean {
-  while (declaration) {
-    if (
-      declaration[ssrSlotStateKey] ||
-      declaration.mixins?.some((m) =>
-        declarations.find((d) => d.name === m.name && (d as ClassDeclarationSSR)[ssrSlotStateKey]),
-      )
-    ) {
-      return true;
-    }
-
-    declaration = declarations.find(
-      (d): d is ClassDeclarationSSR => d.name === declaration!.superclass?.name,
-    );
-  }
-
-  return false;
-}
-
-function namedSlotListElements(declaration: ClassDeclaration): string[] {
-  return (
-    declaration.members
-      ?.find(
-        (m): m is ClassField =>
-          m.inheritedFrom?.name === 'NamedSlotListElement' && m.name === 'listChildTagNames',
-      )
-      ?.default?.match(/([\w-]+)/g)
-      ?.map((m) =>
-        m
-          .split('-')
-          .map((s) => s[0] + s.substring(1).toLowerCase())
-          .join(''),
-      ) ?? []
-  );
-}
diff --git a/src/components/core/dom/spread.spec.ts b/src/storybook/helpers/spread.spec.ts
similarity index 94%
rename from src/components/core/dom/spread.spec.ts
rename to src/storybook/helpers/spread.spec.ts
index 81fb36a831..07f593a688 100644
--- a/src/components/core/dom/spread.spec.ts
+++ b/src/storybook/helpers/spread.spec.ts
@@ -1,10 +1,8 @@
-import { expect } from '@open-wc/testing';
+import { expect, fixture } from '@open-wc/testing';
 import type { TemplateResult } from 'lit';
 import { html, LitElement, render } from 'lit';
 
-import { fixture } from '../testing/private';
-
-import { sbbSpread } from './spread';
+import { sbbSpread } from './spread.js';
 
 class SpreadDirectiveTestOnlyElement extends LitElement {
   public static override get properties(): Record<string, any> {
@@ -144,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/components/core/dom/spread.ts b/src/storybook/helpers/spread.ts
similarity index 81%
rename from src/components/core/dom/spread.ts
rename to src/storybook/helpers/spread.ts
index ccefb4dcc2..c9b6365d80 100644
--- a/src/components/core/dom/spread.ts
+++ b/src/storybook/helpers/spread.ts
@@ -3,8 +3,6 @@ import { Directive, directive } from 'lit/directive.js';
 import type { ElementPart, Part } from 'lit/html.js';
 import { nothing } from 'lit/html.js';
 
-import { setAttributes } from './is-valid-attribute';
-
 export class SbbSpreadDirective extends Directive {
   private _element!: Element;
   private _prevData: Record<string, any> = {};
@@ -23,7 +21,17 @@ export class SbbSpreadDirective extends Directive {
   }
 
   public apply(data: Record<string, any>): void {
-    setAttributes(this._element as HTMLElement, data);
+    if (!data) {
+      return;
+    }
+
+    for (const [name, value] of Object.entries(data)) {
+      if (typeof value === 'boolean' || !value) {
+        this._element.toggleAttribute(name, !!value);
+      } else {
+        this._element.setAttribute(name, value);
+      }
+    }
   }
 
   public groom(data: Record<string, any>): void {
diff --git a/src/storybook/pages/home/home--logged-in.stories.ts b/src/storybook/pages/home/home--logged-in.stories.ts
index 03a46e4ce2..65fae3936d 100644
--- a/src/storybook/pages/home/home--logged-in.stories.ts
+++ b/src/storybook/pages/home/home--logged-in.stories.ts
@@ -1,11 +1,10 @@
 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 type { SbbDialogElement } from '../../../components/dialog';
-import { futureLeg, pastLeg } from '../../../components/pearl-chain/pearl-chain.sample-data';
+import type { SbbDialogElement } from '../../../components/dialog.js';
+import { futureLeg, pastLeg } from '../../../components/pearl-chain/pearl-chain.sample-data.js';
 
 import {
   bikeProduct,
@@ -16,12 +15,11 @@ import {
   skiplinkList,
   teaserHero,
   timetableInput,
-  wrapperStyle,
-} from './home.common';
+} from './home.common.js';
 import readme from './readme.md?raw';
-import '../../../components/dialog';
-import '../../../components/journey-header';
-import '../../../components/pearl-chain';
+import '../../../components/dialog.js';
+import '../../../components/journey-header.js';
+import '../../../components/pearl-chain.js';
 import './home.scss';
 
 const negative: InputType = {
@@ -186,24 +184,27 @@ const Template = (args: Args): TemplateResult => html`
             All purchased tickets
           </sbb-secondary-button>
 
-          <sbb-dialog id="my-dialog" title-content="My Dialog" title-back-button>
-            <p style="margin-top: 0;">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
+          <sbb-dialog id="my-dialog">
+            <sbb-dialog-title back-button>My Dialog</sbb-dialog-title>
 
-            <sbb-secondary-button
-              size="m"
-              @click=${() =>
-                (document.getElementById('my-stacked-dialog') as SbbDialogElement).open()}
-            >
-              Open stacked dialog
-            </sbb-secondary-button>
+            <sbb-dialog-content>
+              <p style="margin-top: 0;">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                pariatur.
+              </p>
+              <sbb-secondary-button
+                size="m"
+                @click=${() =>
+                  (document.getElementById('my-stacked-dialog') as SbbDialogElement).open()}
+              >
+                Open stacked dialog
+              </sbb-secondary-button>
+            </sbb-dialog-content>
 
-            <sbb-action-group
-              slot="action-group"
+            <sbb-dialog-actions
               align-group="stretch"
               orientation="vertical"
               horizontal-from="medium"
@@ -219,12 +220,15 @@ const Template = (args: Args): TemplateResult => html`
               </sbb-block-link>
               <sbb-secondary-button size="m" sbb-dialog-close> Cancel </sbb-secondary-button>
               <sbb-button size="m" sbb-dialog-close> Button </sbb-button>
-            </sbb-action-group>
+            </sbb-dialog-actions>
           </sbb-dialog>
 
-          <sbb-dialog id="my-stacked-dialog" title-content="Stacked Dialog" title-back-button>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-            incididunt ut labore et dolore magna aliqua.
+          <sbb-dialog id="my-stacked-dialog">
+            <sbb-dialog-title back-button>Stacked Dialog</sbb-dialog-title>
+            <sbb-dialog-content>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua.
+            </sbb-dialog-content>
           </sbb-dialog>
         </div>
       </div>
@@ -279,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 8a714dea79..588d06cb87 100644
--- a/src/storybook/pages/home/home.common.ts
+++ b/src/storybook/pages/home/home.common.ts
@@ -1,26 +1,24 @@
-import type { Args, StoryContext } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import type { Args } from '@storybook/web-components';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../../components/core/dom';
-import '../../../components/button/button';
-import '../../../components/button/secondary-button';
-import '../../../components/button/secondary-button-static';
-import '../../../components/card';
-import '../../../components/clock';
-import '../../../components/divider';
-import '../../../components/footer';
-import '../../../components/icon';
-import '../../../components/header';
-import '../../../components/logo';
-import '../../../components/link';
-import '../../../components/link-list';
-import '../../../components/menu';
-import '../../../components/navigation';
-import '../../../components/skiplink-list';
-import '../../../components/teaser-hero';
-import '../../../components/title';
+import '../../../components/button.js';
+import '../../../components/card.js';
+import '../../../components/clock.js';
+import '../../../components/divider.js';
+import '../../../components/footer.js';
+import '../../../components/icon.js';
+import '../../../components/header.js';
+import '../../../components/logo.js';
+import '../../../components/link.js';
+import '../../../components/link-list.js';
+import '../../../components/menu.js';
+import '../../../components/navigation.js';
+import '../../../components/skiplink-list.js';
+import '../../../components/teaser-hero.js';
+import '../../../components/title.js';
+import { sbbSpread } from '../../helpers/spread.js';
 
 export const skiplinkList = (): TemplateResult => html`
   <sbb-skiplink-list title-level="2" title-content="Skip to">
@@ -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 a12dcdca3d..50d745d980 100644
--- a/src/storybook/pages/home/home.stories.ts
+++ b/src/storybook/pages/home/home.stories.ts
@@ -1,11 +1,10 @@
 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';
-import '../../../components/action-group';
+import '../../../components/alert.js';
+import '../../../components/action-group.js';
 import {
   bikeProduct,
   dailyTicketProduct,
@@ -15,8 +14,7 @@ import {
   skiplinkList,
   teaserHero,
   timetableInput,
-  wrapperStyle,
-} from './home.common';
+} 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 086122f6fd..0c66583963 100644
--- a/src/storybook/styles/layout/layout.stories.ts
+++ b/src/storybook/styles/layout/layout.stories.ts
@@ -3,7 +3,7 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
-import '../../../components/link';
+import '../../../components/link.js';
 
 import readme from './readme.md?raw';
 import './layout.scss';
@@ -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 728a74b706..241ef2a95e 100644
--- a/src/storybook/styles/typography/typography.stories.ts
+++ b/src/storybook/styles/typography/typography.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import '../../../components/title';
+import '../../../components/title.js';
 
 import readme from './readme.md?raw';
 import './typo-internal.scss';
@@ -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 19d1d22ee1..638127b9c5 100644
--- a/src/storybook/testing/chromatic.ts
+++ b/src/storybook/testing/chromatic.ts
@@ -8,7 +8,8 @@ import type {
 } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
-import '../../components/title';
+
+import '../../components/title.js';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 type StoryParameter = Record<string, StoryObj> & { __namedExportsOrder?: string[] };
@@ -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/src/vite-env.d.ts b/src/vite-env.d.ts
index 055705f788..9848f7e607 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 /* eslint-disable  @typescript-eslint/consistent-type-imports */
 /// <reference types="vite/client" />
 
diff --git a/tools/eslint/custom-element-class-name-rule.ts b/tools/eslint/custom-element-class-name-rule.ts
index 642d4ef31a..379e6b4409 100644
--- a/tools/eslint/custom-element-class-name-rule.ts
+++ b/tools/eslint/custom-element-class-name-rule.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention, import/no-unresolved  */
 import type { TSESLint, TSESTree } from '@typescript-eslint/utils';
 import { ESLintUtils, AST_NODE_TYPES } from '@typescript-eslint/utils';
 
diff --git a/tools/eslint/custom-element-decorator-position-rule.ts b/tools/eslint/custom-element-decorator-position-rule.ts
index d45d8de1dd..65c8ee5e6c 100644
--- a/tools/eslint/custom-element-decorator-position-rule.ts
+++ b/tools/eslint/custom-element-decorator-position-rule.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention, import/no-unresolved  */
 import type { TSESLint, TSESTree } from '@typescript-eslint/utils';
 import { ESLintUtils } from '@typescript-eslint/utils';
 
diff --git a/tools/eslint/import-extension-rule.ts b/tools/eslint/import-extension-rule.ts
new file mode 100644
index 0000000000..fdcddca635
--- /dev/null
+++ b/tools/eslint/import-extension-rule.ts
@@ -0,0 +1,70 @@
+import { existsSync, statSync } from 'fs';
+import { dirname, resolve } from 'path';
+
+import type { TSESLint, TSESTree } from '@typescript-eslint/utils';
+import { ESLintUtils } from '@typescript-eslint/utils';
+
+const createRule = ESLintUtils.RuleCreator(
+  (name) =>
+    `https://github.com/lyne-design-system/lyne-components/blob/main/tools/eslint/${name}.ts`,
+);
+
+type MessageIds = 'importExtensionRule' | 'importIndexExtensionRule';
+
+export const name = 'import-extension-rule';
+export const rule: TSESLint.RuleModule<MessageIds, never[]> = createRule<never[], MessageIds>({
+  create(context) {
+    function rule(originalNode: TSESTree.Node): void {
+      const node = originalNode as
+        | TSESTree.ExportAllDeclaration
+        | TSESTree.ExportNamedDeclarationWithSource
+        | TSESTree.ImportDeclaration;
+      const value = node.source?.value.replace(/\?.*$/, '');
+      if (!value || !value.startsWith('.') || value.endsWith('.js')) {
+        return;
+      }
+
+      const path = resolve(dirname(context.filename), value);
+      if (!existsSync(path)) {
+        context.report({
+          node,
+          messageId: 'importExtensionRule',
+          data: { import: value },
+          fix: !node.source.value.includes('?')
+            ? (fixer) => fixer.replaceText(node.source, `'${node.source.value}.js'`)
+            : undefined,
+        });
+      } else if (existsSync(path) && statSync(path).isDirectory()) {
+        context.report({
+          node,
+          messageId: 'importExtensionRule',
+          data: { import: value },
+          fix: (fixer) => fixer.replaceText(node.source, `'${node.source.value}/index.js'`),
+        });
+      }
+    }
+
+    return {
+      DeclareExportDeclaration: rule,
+      DeclareExportAllDeclaration: rule,
+      ExportAllDeclaration: rule,
+      ExportNamedDeclaration: rule,
+      ImportDeclaration: rule,
+    };
+  },
+  name,
+  meta: {
+    docs: {
+      description: 'Relative imports and exports must end with .js',
+      recommended: 'recommended',
+    },
+    messages: {
+      importExtensionRule: 'Missing .js extension in import/export path ({{ import }})',
+      importIndexExtensionRule: 'Missing index.js in import/export path ({{ import }})',
+    },
+    fixable: 'code',
+    type: 'problem',
+    schema: [],
+  },
+  defaultOptions: [],
+});
diff --git a/tools/eslint/index.ts b/tools/eslint/index.ts
index fecdc5136d..5329ceff94 100644
--- a/tools/eslint/index.ts
+++ b/tools/eslint/index.ts
@@ -1,21 +1,31 @@
-import * as customElementClassName from './custom-element-class-name-rule';
-import * as customElementDecoratorPosition from './custom-element-decorator-position-rule';
-import * as missingComponentDocumentation from './missing-component-documentation-rule';
+import type { TSESLint } from '@typescript-eslint/utils';
 
-export default {
+import * as customElementClassName from './custom-element-class-name-rule.js';
+import * as customElementDecoratorPosition from './custom-element-decorator-position-rule.js';
+import * as importExtensionRule from './import-extension-rule.js';
+import * as missingComponentDocumentation from './missing-component-documentation-rule.js';
+
+const plugin: Omit<Required<TSESLint.FlatConfig.Plugin>, 'processors'> = {
+  meta: {
+    name: 'lyne',
+  },
+  configs: {},
   rules: {
     [missingComponentDocumentation.name]: missingComponentDocumentation.rule,
     [customElementClassName.name]: customElementClassName.rule,
+    [importExtensionRule.name]: importExtensionRule.rule,
     [customElementDecoratorPosition.name]: customElementDecoratorPosition.rule,
   },
-  configs: {
-    all: {
-      plugins: ['lyne'],
-      rules: {
-        [`lyne/${missingComponentDocumentation.name}`]: 'error',
-        [`lyne/${customElementClassName.name}`]: 'error',
-        [`lyne/${customElementDecoratorPosition.name}`]: 'error',
-      },
-    },
+};
+
+plugin.configs!.recommended = {
+  plugins: {
+    lyne: plugin,
   },
+  rules: Object.keys(plugin.rules!).reduce(
+    (current, next) => Object.assign(current, { [`lyne/${next}`]: 'error' }),
+    {} as TSESLint.FlatConfig.Rules,
+  ),
 };
+
+export default plugin;
diff --git a/tools/eslint/link/index.js b/tools/eslint/link/index.js
deleted file mode 100644
index e044c3cc82..0000000000
--- a/tools/eslint/link/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-require('tsx/cjs');
-const lyneConfig = require('../../tools/eslint/index.ts');
-
-module.exports = lyneConfig.default ?? lyneConfig;
diff --git a/tools/eslint/link/package.json b/tools/eslint/link/package.json
deleted file mode 100644
index 994c9d3e87..0000000000
--- a/tools/eslint/link/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "eslint-plugin-lyne",
-  "version": "0.0.0",
-  "main": "index.js"
-}
diff --git a/tools/eslint/missing-component-documentation-rule.ts b/tools/eslint/missing-component-documentation-rule.ts
index 4b1b76bc58..3f13ae3c47 100644
--- a/tools/eslint/missing-component-documentation-rule.ts
+++ b/tools/eslint/missing-component-documentation-rule.ts
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/naming-convention, import/no-unresolved  */
+/* eslint-disable @typescript-eslint/naming-convention, import-x/namespace  */
 import type { TSESLint, TSESTree } from '@typescript-eslint/utils';
 import { ESLintUtils } from '@typescript-eslint/utils';
 import { parse, stringify } from 'comment-parser';
diff --git a/tools/generate-component/boilerplate/component.scss b/tools/generate-component/boilerplate/component.scss
index 1ce72075b9..ef56aad152 100644
--- a/tools/generate-component/boilerplate/component.scss
+++ b/tools/generate-component/boilerplate/component.scss
@@ -1,11 +1,12 @@
 @use '../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// 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 {
   --__name__-some-color-var: var(--color-black);
+
+  display: block;
 }
 
 .__name__ {
diff --git a/tools/generate-component/boilerplate/component.stories.ts b/tools/generate-component/boilerplate/component.stories.ts
index 2c68c6be4f..dd14edf28d 100644
--- a/tools/generate-component/boilerplate/component.stories.ts
+++ b/tools/generate-component/boilerplate/component.stories.ts
@@ -3,7 +3,7 @@ import type { InputType } from '@storybook/types';
 import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import { html, type TemplateResult } from 'lit';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread';
 
 import readme from './readme.md?raw';
 import { __nameUpperCase__ } from './__noPrefixName__';
@@ -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/manifest/custom-elements-manifest.config.js b/tools/manifest/custom-elements-manifest.config.js
new file mode 100644
index 0000000000..c1c3c51599
--- /dev/null
+++ b/tools/manifest/custom-elements-manifest.config.js
@@ -0,0 +1,102 @@
+/**
+ * Docs: https://custom-elements-manifest.open-wc.org/analyzer/getting-started/
+ */
+export default {
+  litelement: true,
+  globs: ['src/components/**/*.ts'],
+  exclude: [
+    '**/*[.-]{stories,spec,e2e,test-utils}.ts',
+    '**/private/*',
+    '**/private.ts',
+    'vite.config.ts',
+  ],
+  outdir: 'dist/components',
+  dependencies: false,
+  packagejson: false,
+  /** @type {import('@custom-elements-manifest/analyzer').Plugin[]} */
+  plugins: [
+    {
+      analyzePhase({ ts, node, moduleDoc }) {
+        if (ts.isNewExpression(node) && node.expression.getText() === 'NamedSlotStateController') {
+          let classNode = node;
+          while (classNode) {
+            if (ts.isClassDeclaration(classNode)) {
+              const className = classNode.name.getText();
+              const classDoc = moduleDoc.declarations.find(
+                (declaration) => declaration.name === className,
+              );
+              classDoc['_ssrslotstate'] = true;
+            }
+            classNode = classNode.parent;
+          }
+        }
+      },
+      packageLinkPhase({ customElementsManifest }) {
+        function fixModulePaths(node, pathAction) {
+          for (const [key, value] of Object.entries(node)) {
+            if (Array.isArray(value)) {
+              value.forEach((v) => fixModulePaths(v, pathAction));
+            } else if (typeof value === 'object') {
+              fixModulePaths(value, pathAction);
+            } else if (key === 'module' || key === 'path') {
+              node[key] = pathAction(value);
+            }
+          }
+        }
+        const fixTsPaths = (value) =>
+          value.replace(/^\/?src\/components\//, '').replace(/.ts$/, '.js');
+        for (const module of customElementsManifest.modules) {
+          fixModulePaths(module, fixTsPaths);
+          for (const declaration of module.declarations.filter((d) => d.kind === 'class')) {
+            if (declaration.name === 'SbbIconBase') {
+              delete declaration.customElement;
+            }
+            for (const member of declaration.members) {
+              if (member.name.startsWith('_') && member.default) {
+                const publicName = member.name.replace(/^_/, '');
+                const publicMember = declaration.members.find((m) => m.name === publicName);
+                if (publicMember) {
+                  publicMember.default = member.default;
+                }
+              }
+            }
+          }
+        }
+        const reexportModules = [];
+        const moduleMapping = new Map();
+        for (const moduleEntry of customElementsManifest.modules) {
+          if (
+            !reexportModules.includes(moduleEntry) &&
+            moduleEntry.exports?.length &&
+            moduleEntry.exports.some((e) => e.name !== '*')
+          ) {
+            const reexportPath = moduleEntry.path.replace(/\/[\w-]+\.js/, '.js');
+            const reexportModule = customElementsManifest.modules.find(
+              (m) => m.path === reexportPath,
+            );
+            if (reexportModule) {
+              moduleMapping.set(moduleEntry.path, reexportModule.path);
+              reexportModules.push(reexportModule);
+              reexportModule.declarations.push(...moduleEntry.declarations);
+              for (const entry of moduleEntry.exports) {
+                entry.declaration.module = reexportModule.path;
+              }
+              reexportModule.exports = reexportModule.exports.filter(
+                (e) =>
+                  e.name !== '*' ||
+                  moduleEntry.path ===
+                    reexportModule.path.replace(/\/[\w-]+\.js/, '') +
+                      e.declaration.package.substring(2),
+              );
+              reexportModule.exports.push(...moduleEntry.exports);
+              customElementsManifest.modules = customElementsManifest.modules.filter(
+                (m) => m !== moduleEntry,
+              );
+            }
+          }
+        }
+        fixModulePaths(customElementsManifest, (value) => moduleMapping.get(value) ?? value);
+      },
+    },
+  ],
+};
diff --git a/tools/vite/build-meta.ts b/tools/vite/build-meta.ts
new file mode 100644
index 0000000000..baff8cb7c6
--- /dev/null
+++ b/tools/vite/build-meta.ts
@@ -0,0 +1,7 @@
+import type { ConfigEnv } from 'vite';
+
+export const root = new URL('../..', import.meta.url);
+export const distDir = new URL('./dist/', root);
+
+export const isProdBuild = ({ command, mode }: ConfigEnv): boolean =>
+  command === 'build' && mode !== 'development';
diff --git a/tools/vite/copy-assets.ts b/tools/vite/copy-assets.ts
new file mode 100644
index 0000000000..e8a8c95abf
--- /dev/null
+++ b/tools/vite/copy-assets.ts
@@ -0,0 +1,29 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+import * as glob from 'glob';
+import type { PluginOption, ResolvedConfig } from 'vite';
+
+export function copyAssets(includes: string[]): PluginOption {
+  let viteConfig: ResolvedConfig;
+  return {
+    name: 'package-json-templating',
+    configResolved(config) {
+      viteConfig = config;
+    },
+    generateBundle() {
+      if (viteConfig.command !== 'build') {
+        return;
+      }
+      for (const file of glob.sync(includes, { cwd: viteConfig.root })) {
+        // Remove relative file path if file is on a more upper layer than cwd.
+        const fileName = file.replace(/^(\.\.\/)*/, '');
+        this.emitFile({
+          type: 'asset',
+          fileName: fileName,
+          source: readFileSync(join(viteConfig.root, file), 'utf8'),
+        });
+      }
+    },
+  };
+}
diff --git a/tools/vite/copy-sass.ts b/tools/vite/copy-sass.ts
new file mode 100644
index 0000000000..e3829eaa08
--- /dev/null
+++ b/tools/vite/copy-sass.ts
@@ -0,0 +1,40 @@
+import { readFileSync } from 'fs';
+import { dirname, join, relative } from 'path';
+
+import * as glob from 'glob';
+import type { PluginOption, ResolvedConfig } from 'vite';
+
+import { root } from './build-meta.js';
+
+export function copySass(sassRoot: string): PluginOption {
+  let viteConfig: ResolvedConfig;
+  return {
+    name: 'package-json-templating',
+    configResolved(config) {
+      viteConfig = config;
+    },
+    generateBundle() {
+      if (viteConfig.command !== 'build') {
+        return;
+      }
+      for (const file of glob.sync(`${sassRoot}/**/*.scss`, { cwd: viteConfig.root })) {
+        this.emitFile({
+          type: 'asset',
+          fileName: file,
+          source: readFileSync(join(viteConfig.root, file), 'utf8').replace(
+            /(@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 `${useOrImport} '${relative(dirname(file), outFile)}'`;
+            },
+          ),
+        });
+      }
+    },
+  };
+}
diff --git a/tools/vite/custom-elements-manifest.ts b/tools/vite/custom-elements-manifest.ts
new file mode 100644
index 0000000000..7dd9bf8888
--- /dev/null
+++ b/tools/vite/custom-elements-manifest.ts
@@ -0,0 +1,22 @@
+/* eslint-disable import-x/namespace  */
+import { cli } from '@custom-elements-manifest/analyzer/cli';
+import type { PluginOption } from 'vite';
+
+import { root } from './build-meta.js';
+
+export function customElementsManifest(): PluginOption {
+  return {
+    name: 'custom-elements-definition',
+    closeBundle() {
+      this.info(`Generating custom elements manifest`);
+      return cli({
+        argv: [
+          'analyze',
+          '--config',
+          new URL('./tools/manifest/custom-elements-manifest.config.js', root).pathname,
+        ],
+        cwd: root.pathname,
+      });
+    },
+  };
+}
diff --git a/tools/vite/dts.ts b/tools/vite/dts.ts
new file mode 100644
index 0000000000..174ef5d322
--- /dev/null
+++ b/tools/vite/dts.ts
@@ -0,0 +1,28 @@
+import type { Plugin } from 'vite';
+import dtsPlugin from 'vite-plugin-dts';
+
+export function dts(): Plugin {
+  return dtsPlugin({
+    entryRoot: '.',
+    exclude: ['**/*[.-]{stories,spec,e2e,test-utils}.ts', '**/private/*', 'vite.config.ts'],
+    pathsToAliases: false,
+    strictOutput: false,
+    afterDiagnostic(diagnostics) {
+      if (diagnostics.length) {
+        throw new Error('dts generation for react package failed! See logs for details.');
+      }
+    },
+    beforeWriteFile: (filePath, content) => {
+      if (content.includes('.scss?lit&inline') || content.includes('.scss?inline&lit')) {
+        return {
+          filePath,
+          // Remove lines with scss modules
+          content: content.replace(
+            /export \{[^}]+\}\s+from\s+'[^']+\.scss\?(lit&inline|inline&lit)';\n?/gm,
+            '',
+          ),
+        };
+      }
+    },
+  });
+}
diff --git a/tools/vite/generate-react-wrappers.ts b/tools/vite/generate-react-wrappers.ts
new file mode 100644
index 0000000000..c19cda9390
--- /dev/null
+++ b/tools/vite/generate-react-wrappers.ts
@@ -0,0 +1,260 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import {
+  readFileSync,
+  existsSync,
+  mkdirSync,
+  writeFileSync,
+  readdirSync,
+  statSync,
+  rmSync,
+  unlinkSync,
+} from 'fs';
+import { pathToFileURL } from 'node:url';
+
+import type {
+  Package,
+  Export,
+  CustomElementDeclaration,
+  Module,
+  ClassField,
+  ClassDeclaration,
+  Declaration,
+} from 'custom-elements-manifest';
+import type { PluginOption } from 'vite';
+
+import { distDir } from './build-meta.js';
+
+export function generateReactWrappers(): PluginOption {
+  const manifestPath = new URL('./components/custom-elements.json', distDir);
+  let manifest: Package;
+  try {
+    manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+  } catch (e) {
+    console.error(
+      `Failed to read manifest at ${manifestPath}. Please run 'yarn build:components' or 'yarn docs:manifest' first!`,
+    );
+    process.exit(1);
+  }
+
+  const generatedPaths: URL[] = [];
+  function createDir(dir: URL): void {
+    if (!existsSync(dir)) {
+      createDir(new URL('..', dir));
+      generatedPaths.push(dir);
+      mkdirSync(dir);
+    }
+  }
+  return {
+    name: 'generate-react-wrappers',
+    config(config) {
+      const packageRoot = pathToFileURL(config.root!);
+      const declarations = manifest.modules
+        .filter((m) => m.kind === 'javascript-module' && m.declarations?.length)
+        .reduce((current, next) => current.concat(next.declarations ?? []), [] as Declaration[]);
+      const exports = manifest.modules.reduce(
+        (current, next) => current.concat(next.exports ?? []),
+        [] as Export[],
+      );
+      const entryPoints: Record<string, string> = { core: 'core.ts' };
+      for (const module of manifest.modules.filter((m) => !m.path.startsWith('core/'))) {
+        for (const declaration of module.declarations?.filter(
+          (d): d is CustomElementDeclaration => 'customElement' in d && d.customElement,
+        ) ?? []) {
+          const entryPoint = module.path.replace(/.js$/, '.ts');
+          entryPoints[entryPoint.replace(/.ts$/, '')] = entryPoint;
+          const targetPath = new URL(`./${entryPoint}`, packageRoot);
+          createDir(new URL('.', targetPath));
+          const reactTemplate = renderTemplate(declaration, declarations, module, exports);
+          generatedPaths.push(targetPath);
+          writeFileSync(targetPath, reactTemplate, 'utf8');
+        }
+      }
+
+      for (const dirent of readdirSync(packageRoot, { withFileTypes: true }).filter((d) =>
+        d.isDirectory(),
+      )) {
+        const dir = new URL(`./${dirent.name}/`, packageRoot);
+        const entryPoint = `${dirent.name}.ts`;
+        entryPoints[dirent.name] = entryPoint;
+        const dirEntryPoint = new URL(`../${entryPoint}`, dir);
+
+        if (!existsSync(dirEntryPoint)) {
+          generatedPaths.push(dirEntryPoint);
+          const dirInfo = readdirSync(dir, { withFileTypes: true })
+            .filter((d) => d.isFile())
+            .map((d) => `export * from './${dirent.name}/${d.name.replace(/.ts$/, '.js')}';\n`)
+            .join('');
+          writeFileSync(dirEntryPoint, dirInfo, 'utf8');
+        }
+      }
+
+      config.build!.lib = {
+        ...(config.build!.lib ? config.build!.lib : {}),
+        entry: entryPoints,
+      };
+    },
+    closeBundle() {
+      for (const path of generatedPaths.sort((a, b) => b.pathname.length - a.pathname.length)) {
+        try {
+          if (statSync(path).isDirectory()) {
+            rmSync(path, { recursive: true, force: true });
+          } else {
+            unlinkSync(path);
+          }
+        } catch {
+          /* empty */
+        }
+      }
+    },
+  };
+}
+
+function renderTemplate(
+  declaration: CustomElementDeclaration,
+  declarations: Declaration[],
+  module: Module,
+  exports: Export[],
+): string {
+  const extensions = findExtensionUsage(declaration, declarations);
+  const dirDepth = module.path.split('/').length - 1;
+  const relativeCoreImportPath = `${!dirDepth ? './' : '../'.repeat(dirDepth)}core.js`;
+  const extensionImport = !extensions.size
+    ? ''
+    : `
+  
+  import { ${Array.from(extensions.keys()).join(', ')} } from '${relativeCoreImportPath}';`;
+  const extension = [...extensions.values()].reduce(
+    (current, next) => (v) => current(next(v)),
+    (v: string) => v,
+  );
+  const componentsImports = new Map<string, string[]>().set(module.path, [declaration.name]);
+  const customEventTypes =
+    declaration.events
+      ?.filter(
+        (e) =>
+          e.type.text.startsWith('CustomEvent<') &&
+          ['void', '{', 'File'].every((m) => !e.type.text.includes(`<${m}`)),
+      )
+      .map((e) => e.type.text.substring(12).slice(0, -1))
+      .sort()
+      .filter((v, i, a) => a.indexOf(v) === i && v.length > 1) ?? [];
+  // If a type or interface needs to be imported, the custom elements analyzer will not
+  // detect/extract these and therefore we need to have a manual list of required
+  // types/interfaces.
+  const interfaces = new Map<string, string>().set(
+    'SbbValidationChangeEvent',
+    'core/interfaces.js',
+  );
+  for (const customEventType of customEventTypes) {
+    const exportModule = exports.find((e) => e.name === customEventType);
+    if (exportModule) {
+      if (!componentsImports.has(exportModule.declaration.module!)) {
+        componentsImports.set(exportModule.declaration.module!, [`type ${customEventType}`]);
+      } else {
+        componentsImports.get(exportModule.declaration.module!)!.push(`type ${customEventType}`);
+      }
+    } else if (interfaces.has(customEventType)) {
+      const moduleName = interfaces.get(customEventType)!;
+      if (!componentsImports.has(moduleName)) {
+        componentsImports.set(moduleName, [`type ${customEventType}`]);
+      } else {
+        componentsImports.get(moduleName)!.push(`type ${customEventType}`);
+      }
+    } else {
+      componentsImports.get(module.path)!.push(`type ${customEventType}`);
+    }
+  }
+  const reactTemplate = `/* autogenerated */
+  import { createComponent${declaration.events?.length ? ', type EventName' : ''} } from '${relativeCoreImportPath}';
+  ${Array.from(componentsImports)
+    .map(
+      ([key, imports]) =>
+        `import { ${imports.join(', ')} } from '@sbb-esta/lyne-components/${key}';`,
+    )
+    .join('\n')}
+  import react from 'react';${extensionImport}
+  
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  export const ${declaration.name.replace(/Element$/, '')} = ${extension(`createComponent({
+    tagName: '${declaration.tagName}',
+    elementClass: ${declaration.name},
+    react,${
+      declaration.events
+        ? `
+    events: {${declaration
+      .events!.map(
+        (e) =>
+          `\n    'on${e.name.charAt(0).toUpperCase() + e.name.slice(1)}': '${e.name}' as EventName<${e.type.text.replace(
+            '<T>',
+            '<any>',
+          )}>,`,
+      )
+      .join('')}
+    },
+  `
+        : ''
+    }
+  })`)};
+  `;
+  return reactTemplate;
+}
+
+function findExtensionUsage(
+  declaration: ClassDeclaration,
+  declarations: Declaration[],
+): Map<string, (_: string) => string> {
+  const extensions = new Map<string, (_: string) => string>();
+  if (usesSsrSlotState(declaration, declarations)) {
+    extensions.set('withSsrDataSlotNames', (v) => `withSsrDataSlotNames(${v})`);
+  }
+  const childTypes = namedSlotListElements(declaration);
+  if (childTypes.length) {
+    extensions.set(
+      'withSsrDataChildCount',
+      (v) => `withSsrDataChildCount([${childTypes.map((t) => `'${t}'`).join(', ')}], ${v})`,
+    );
+  }
+  return extensions;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type ClassDeclarationSSR = ClassDeclaration & { _ssrslotstate?: boolean };
+const ssrSlotStateKey = '_ssrslotstate';
+function usesSsrSlotState(
+  declaration: ClassDeclarationSSR | undefined,
+  declarations: Declaration[],
+): boolean {
+  while (declaration) {
+    if (
+      declaration[ssrSlotStateKey] ||
+      declaration.mixins?.some((m) =>
+        declarations.find((d) => d.name === m.name && (d as ClassDeclarationSSR)[ssrSlotStateKey]),
+      )
+    ) {
+      return true;
+    }
+
+    declaration = declarations.find(
+      (d): d is ClassDeclarationSSR => d.name === declaration!.superclass?.name,
+    );
+  }
+
+  return false;
+}
+
+function namedSlotListElements(declaration: ClassDeclaration): string[] {
+  return (
+    declaration.members
+      ?.find(
+        (m): m is ClassField =>
+          m.inheritedFrom?.name === 'NamedSlotListElement' && m.name === 'listChildTagNames',
+      )
+      ?.default?.match(/([\w-]+)/g)
+      ?.map((m) =>
+        m
+          .split('-')
+          .map((s) => s[0] + s.substring(1).toLowerCase())
+          .join(''),
+      ) ?? []
+  );
+}
diff --git a/tools/vite/index.ts b/tools/vite/index.ts
new file mode 100644
index 0000000000..80d7a31801
--- /dev/null
+++ b/tools/vite/index.ts
@@ -0,0 +1,10 @@
+export * from './build-meta.js';
+export * from './copy-assets.js';
+export * from './copy-sass.js';
+export * from './custom-elements-manifest.js';
+export * from './dts.js';
+export * from './generate-react-wrappers.js';
+export * from './package-json-template.js';
+export * from './resolve-entry-points.js';
+export * from './typography.js';
+export * from './verify-entry-points.js';
diff --git a/tools/vite/package-json-template.ts b/tools/vite/package-json-template.ts
new file mode 100644
index 0000000000..0ac3566f7e
--- /dev/null
+++ b/tools/vite/package-json-template.ts
@@ -0,0 +1,71 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+import type { PluginOption, ResolvedConfig } from 'vite';
+
+import { root } from './build-meta.js';
+
+export function packageJsonTemplate(
+  options: { exports?: Record<string, Record<string, unknown>>; exportsExtensions?: string[] } = {},
+): PluginOption {
+  options.exportsExtensions ??= ['.js'];
+  let viteConfig: ResolvedConfig;
+  return {
+    name: 'package-json-templating',
+    configResolved(config) {
+      viteConfig = config;
+    },
+    generateBundle() {
+      if (viteConfig.command !== 'build') {
+        return;
+      }
+      const packageJsonPath = './package.json';
+      const rootPackageJson = JSON.parse(readFileSync(new URL(packageJsonPath, root), 'utf8'));
+      const litMajorVersion = +rootPackageJson.dependencies.lit.match(/\d+/);
+      const reactMajorVersion = +rootPackageJson.devDependencies.react.match(/\d+/);
+      const litReactMajorVersion = +rootPackageJson.devDependencies['@lit/react'].match(/\d+/);
+      const packageJsonTemplate = readFileSync(join(viteConfig.root, packageJsonPath), 'utf8');
+      const packageJsonContent = packageJsonTemplate
+        .replaceAll('0.0.0-PLACEHOLDER', rootPackageJson.version)
+        .replaceAll('0.0.0-LITREACT', `^${litReactMajorVersion}.0.0`)
+        .replaceAll('0.0.0-REACT', `^${reactMajorVersion}.0.0`)
+        .replaceAll('0.0.0-LIT', `^${litMajorVersion}.0.0`);
+      const packageJson = JSON.parse(packageJsonContent);
+      for (const key of ['author', 'license', 'repository', 'bugs']) {
+        packageJson[key] = rootPackageJson[key];
+      }
+
+      const lib = viteConfig.build.lib;
+      if (lib && typeof lib.entry === 'object' && !Array.isArray(lib.entry)) {
+        const exports = Object.entries(lib.entry)
+          .sort((a, b) => a[0].localeCompare(b[0]))
+          .reduce(
+            (current, next) =>
+              Object.assign(
+                current,
+                ...options.exportsExtensions!.map((ext) => ({
+                  [`./${next[0]}${ext}`]: {
+                    types: `./development/${next[0]}.d.ts`,
+                    development: `./development/${next[0]}.js`,
+                    default: `./${next[0]}.js`,
+                  },
+                })),
+              ),
+            { ...options.exports, './package.json': { default: './package.json' } } as Record<
+              string,
+              Record<string, string>
+            >,
+          );
+        packageJson.exports = exports;
+      } else if (options.exports) {
+        packageJson.exports = options.exports;
+      }
+
+      this.emitFile({
+        type: 'asset',
+        fileName: 'package.json',
+        source: JSON.stringify(packageJson, null, 2),
+      });
+    },
+  };
+}
diff --git a/tools/vite/resolve-entry-points.ts b/tools/vite/resolve-entry-points.ts
new file mode 100644
index 0000000000..2861d12599
--- /dev/null
+++ b/tools/vite/resolve-entry-points.ts
@@ -0,0 +1,19 @@
+import * as glob from 'glob';
+
+export function resolveEntryPoints(
+  cwd: URL,
+  skipDirectories: string[] = [],
+): Record<string, string> {
+  return glob
+    .sync('*/**/', {
+      cwd,
+      ignore: [...skipDirectories, '**/assets', '**/private', '**/__snapshots__'],
+    })
+    .reduce(
+      (current, next) =>
+        Object.assign(current, {
+          [next]: `${next}.ts`,
+        }),
+      {} as Record<string, string>,
+    );
+}
diff --git a/tools/vite/typography.ts b/tools/vite/typography.ts
new file mode 100644
index 0000000000..8e2b5c1b6c
--- /dev/null
+++ b/tools/vite/typography.ts
@@ -0,0 +1,35 @@
+import { join } from 'path';
+
+import * as sass from 'sass';
+import type { PluginOption, ResolvedConfig } from 'vite';
+
+import { root } from './build-meta.js';
+
+export function typography(): PluginOption {
+  let viteConfig: ResolvedConfig;
+  return {
+    name: 'typography',
+    configResolved(config) {
+      viteConfig = config;
+    },
+    generateBundle() {
+      const globalCss = sass.compile(join(viteConfig.root, 'core/styles/global.scss'), {
+        loadPaths: [root.pathname, join(root.pathname, '/node_modules/')],
+      });
+      this.emitFile({
+        type: 'asset',
+        fileName: 'typography.css',
+        source: globalCss.css,
+      });
+
+      const fullFont = sass.compile(join(viteConfig.root, 'core/styles/fullfont.scss'), {
+        loadPaths: [root.pathname, join(root.pathname, '/node_modules/')],
+      });
+      this.emitFile({
+        type: 'asset',
+        fileName: 'fullfont.css',
+        source: fullFont.css,
+      });
+    },
+  };
+}
diff --git a/tools/vite/verify-entry-points.ts b/tools/vite/verify-entry-points.ts
new file mode 100644
index 0000000000..caafdc5c84
--- /dev/null
+++ b/tools/vite/verify-entry-points.ts
@@ -0,0 +1,23 @@
+import { join, relative } from 'path';
+
+import type { LibraryOptions, PluginOption, ResolvedConfig } from 'vite';
+
+export function verifyEntryPoints(): PluginOption {
+  let viteConfig: ResolvedConfig;
+  return {
+    name: 'package-json-templating',
+    configResolved(config) {
+      viteConfig = config;
+    },
+    async closeBundle() {
+      if (viteConfig.command !== 'build') {
+        return;
+      }
+      const entry = (viteConfig.build.lib as LibraryOptions).entry as Record<string, string>;
+      const dir = new URL('./', import.meta.url);
+      for (const entryPoint of Object.keys(entry)) {
+        await import(relative(dir.pathname, join(viteConfig.build.outDir, entryPoint + '.js')));
+      }
+    },
+  };
+}
diff --git a/tools/web-test-runner/index.js b/tools/web-test-runner/index.js
new file mode 100644
index 0000000000..0eb5bcd92d
--- /dev/null
+++ b/tools/web-test-runner/index.js
@@ -0,0 +1,5 @@
+/* eslint-disable import-x/export  */
+export * from './minimal-reporter.js';
+export * from './patched-summary-reporter.js';
+export * from './ssr-plugin.js';
+export * from './vite-plugin.js';
diff --git a/config/lit-ssr-worker.js b/tools/web-test-runner/lit-ssr-worker.js
similarity index 80%
rename from config/lit-ssr-worker.js
rename to tools/web-test-runner/lit-ssr-worker.js
index e85af27aec..afe2fdd853 100644
--- a/config/lit-ssr-worker.js
+++ b/tools/web-test-runner/lit-ssr-worker.js
@@ -13,7 +13,7 @@ if (parentPort === null) {
 
 const { template, modules } = workerData;
 if (modules?.length) {
-  const buildCacheOutDir = new URL(`../dist/testout/${moduleHash(modules)}/`, import.meta.url);
+  const buildCacheOutDir = new URL(`../../dist/testout/${moduleHash(modules)}/`, import.meta.url);
   const moduleIndex = new URL('index.js', buildCacheOutDir).pathname;
   if (!existsSync(moduleIndex)) {
     await buildModules(buildCacheOutDir);
@@ -45,7 +45,7 @@ parentPort.postMessage(rendered);
 async function buildModules(buildCacheOutDir) {
   mkdirSync(buildCacheOutDir, { recursive: true });
 
-  const pkg = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8'));
+  const pkg = JSON.parse(readFileSync(new URL('../../package.json', import.meta.url), 'utf8'));
   const entry = new URL('index.ts', buildCacheOutDir).pathname;
   const importStatement = modules
     .map((m) => `export * from '${relative(buildCacheOutDir.pathname, m)}';`)
@@ -65,32 +65,12 @@ async function buildModules(buildCacheOutDir) {
       sassPlugin({
         type: 'lit-css',
         loadPaths: [
-          new URL('../', import.meta.url).pathname,
-          new URL('../node_modules/', import.meta.url).pathname,
+          new URL('../../', import.meta.url).pathname,
+          new URL('../../node_modules/', import.meta.url).pathname,
         ],
       }),
     ],
   });
-
-  /*
-  // Vite build config. It is slower by about a factor of 3.
-  await build({
-    root: new URL('..', import.meta.url).pathname,
-    mode: 'development',
-    logLevel: 'warn',
-    build: {
-      lib: {
-        entry,
-        formats: ['es'],
-      },
-      ssr: true,
-      outDir: buildCacheOutDir.pathname,
-      emptyOutDir: false,
-      rollupOptions: { external: Object.keys({ ...pkg.dependencies, ...pkg.devDependencies }) },
-      sourcemap: 'inline',
-    },
-  });
-  */
 }
 
 /** Generate a hash from the contents of the given modules and their import chain. */
diff --git a/tools/web-test-runner/minimal-reporter.js b/tools/web-test-runner/minimal-reporter.js
new file mode 100644
index 0000000000..f2670a98ac
--- /dev/null
+++ b/tools/web-test-runner/minimal-reporter.js
@@ -0,0 +1,67 @@
+import { dotReporter } from '@web/test-runner';
+
+/** @type {import('@web/test-runner-core').Reporter} */
+export function minimalReporter() {
+  const base = dotReporter();
+  const log = (result) =>
+    process.stdout.write(result.passed ? '.' : result.skipped ? '~' : '\x1b[31mx\x1b[0m');
+  function logResults(results) {
+    results?.tests?.forEach(log);
+    results?.suites?.forEach(logResults);
+  }
+  const collectorBase = { suites: 0, tests: 0, passed: 0, failed: 0, skipped: 0 };
+  /** @param {import('@web/test-runner-core').TestSession[]} sessions */
+  function aggregateSessions(sessions) {
+    const browserResults = new Map();
+    for (const session of sessions) {
+      if (!browserResults.has(session.browser.name)) {
+        browserResults.set(session.browser.name, { ...collectorBase });
+      }
+      aggregateSuites(session.testResults, browserResults.get(session.browser.name));
+    }
+    return Array.from(browserResults).sort((a, b) => a[0].localeCompare(b[0]));
+  }
+  /** @param {import('@web/test-runner-core').TestSuiteResult} results */
+  function aggregateSuites(results, collector = { ...collectorBase }) {
+    collector.suites += 1;
+    results?.tests?.forEach((result) => {
+      collector.tests += 1;
+      if (result.passed) {
+        collector.passed += 1;
+      } else if (result.skipped) {
+        collector.skipped += 1;
+      } else {
+        collector.failed += 1;
+      }
+    });
+    results?.suites?.forEach((s) => aggregateSuites(s, collector));
+    return collector;
+  }
+  const p = (v) => v.toString().padStart(6, ' ');
+
+  return {
+    ...base,
+    reportTestFileResults({ sessionsForTestFile: sessions }) {
+      for (const session of sessions) {
+        logResults(session.testResults);
+      }
+    },
+    /** @param {import('@web/test-runner-core').TestRunFinishedArgs} args */
+    onTestRunFinished(args) {
+      const browserResults = aggregateSessions(args.sessions);
+      console.log('');
+      console.group('Test Summary:');
+      for (const [browser, collector] of browserResults) {
+        console.group(browser);
+        console.log(`Suites:  ${p(collector.suites)}`);
+        console.log(`Tests:   ${p(collector.tests)}`);
+        console.log(`Passed:  ${p(collector.passed)}`);
+        console.log(`Failed:  ${p(collector.failed)}`);
+        console.log(`Skipped: ${p(collector.skipped)}`);
+        console.groupEnd();
+      }
+      console.groupEnd();
+      base.onTestRunFinished(args);
+    },
+  };
+}
diff --git a/tools/web-test-runner/patched-summary-reporter.js b/tools/web-test-runner/patched-summary-reporter.js
new file mode 100644
index 0000000000..f6464c83c2
--- /dev/null
+++ b/tools/web-test-runner/patched-summary-reporter.js
@@ -0,0 +1,43 @@
+import { summaryReporter } from '@web/test-runner';
+
+// See https://github.com/modernweb-dev/web/issues/2325
+/** @type {import('@web/test-runner-core').Reporter} */
+export function patchedSummaryReporter() {
+  // https://github.com/modernweb-dev/web/blob/master/packages/test-runner/src/logger/TestRunnerLogger.ts
+  class TestRunnerLogger {
+    loggedSyntaxErrors = new Map();
+    debugLogging = false;
+
+    log = (...messages) => console.log(...messages);
+    debug = (...messages) => this.debugLogging && console.debug(...messages);
+    error = (...messages) => console.error(...messages);
+    warn = (...messages) => console.warn(...messages);
+    group = () => console.group();
+    groupEnd = () => console.groupEnd();
+    logSyntaxError(error) {
+      const { message, code, filePath, column, line } = error;
+      let errors = this.loggedSyntaxErrors.get(filePath);
+      if (!errors) {
+        errors = [];
+        this.loggedSyntaxErrors.set(filePath, errors);
+      } else if (
+        errors.find(
+          (e) => e.code === code && e.message === message && e.column === column && e.line === line,
+        )
+      ) {
+        // dedupe syntax errors we already logged
+        return;
+      }
+      errors.push(error);
+    }
+    clearLoggedSyntaxErrors = () => (this.loggedSyntaxErrors = new Map());
+  }
+  const base = summaryReporter();
+  const logger = new TestRunnerLogger();
+  return {
+    ...base,
+    reportTestFileResults(args) {
+      base.reportTestFileResults({ ...args, logger });
+    },
+  };
+}
diff --git a/tools/web-test-runner/ssr-plugin.js b/tools/web-test-runner/ssr-plugin.js
new file mode 100644
index 0000000000..8e545f1f49
--- /dev/null
+++ b/tools/web-test-runner/ssr-plugin.js
@@ -0,0 +1,28 @@
+import { Worker } from 'worker_threads';
+
+// Reference: https://github.com/lit/lit/blob/main/packages/labs/testing/src/lib/lit-ssr-plugin.ts
+// This is necessary until https://github.com/privatenumber/tsx/issues/354 is fixed
+export function ssrPlugin() {
+  const litSsrPluginCommand = 'lit-ssr-render';
+
+  return {
+    name: 'ssr-plugin',
+    async executeCommand({ command, payload }) {
+      if (command !== litSsrPluginCommand) {
+        return undefined;
+      } else if (!payload) {
+        throw new Error(`Missing payload for ${litSsrPluginCommand} command`);
+      }
+
+      const { template, modules } = payload;
+      const resolvedModules = modules.map((m) => new URL(`.${m}`, import.meta.url).pathname);
+      return new Promise((resolve, reject) =>
+        new Worker(new URL('./lit-ssr-worker.js', import.meta.url), {
+          workerData: { template, modules: resolvedModules },
+        })
+          .on('error', reject)
+          .on('message', resolve),
+      );
+    },
+  };
+}
diff --git a/tools/web-test-runner/vite-plugin.js b/tools/web-test-runner/vite-plugin.js
new file mode 100644
index 0000000000..fc51fc68d4
--- /dev/null
+++ b/tools/web-test-runner/vite-plugin.js
@@ -0,0 +1,64 @@
+import { existsSync } from 'fs';
+import { createServer } from 'vite';
+
+// Reference: https://github.com/remcovaes/web-test-runner-vite-plugin
+export function vitePlugin() {
+  let viteServer;
+
+  return {
+    name: 'vite-plugin',
+
+    async serverStart({ app, fileWatcher }) {
+      const externals = [
+        // @web/test-runner-commands needs to establish a web-socket
+        // connection. It expects a file to be served from the
+        // @web/dev-server. So it should be ignored by Vite.
+        '/__web-dev-server__web-socket.js',
+      ];
+
+      viteServer = await createServer({
+        clearScreen: false,
+        plugins: [
+          {
+            name: 'file-name',
+            transform(_src, id) {
+              const file = id.split('?')[0];
+              if (!file.startsWith('\0') && existsSync(file)) {
+                fileWatcher.add(id);
+              }
+            },
+          },
+          {
+            name: 'mark-external',
+            resolveId: (id) => (externals.includes(id) ? { id, external: true } : undefined),
+          },
+        ],
+        // Disable hmr in favor of the @web/test-runner to take care of restarts.
+        server: { hmr: false },
+        // This configuration is necessary, as vite will otherwise detect dependencies
+        // that can be optimized. This will cause vite to reload, which leads to
+        // 'Could not import your test module.' errors, that happen randomly.
+        // Disabling discovery prevents this from happening at the cost of slightly
+        // increased test times.
+        optimizeDeps: {
+          noDiscovery: true,
+        },
+      });
+      await viteServer.listen();
+
+      const baseUrl = `http${viteServer.config.server.https ? 's' : ''}://localhost:${viteServer.config.server.port}`;
+      app.use(async (ctx) => {
+        const url = baseUrl + ctx.originalUrl;
+        // Retry once on failure.
+        // This can happen when too many http requests are being handled by the operating system.
+        const response = await fetch(url).catch(() => Promise.resolve().then(() => fetch(url)));
+        ctx.set(Object.fromEntries(response.headers));
+        ctx.body = await response.text();
+        ctx.status = response.status;
+      });
+    },
+    async serverStop() {
+      return await viteServer.close();
+    },
+  };
+}
diff --git a/tsconfig.json b/tsconfig.json
index 2a7cb6c518..a395a42683 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -40,16 +40,22 @@
         "rules": {
           // The following rules are broken
           "no-incompatible-type-binding": "off",
-          "no-missing-import": "off",
           // In the calendar we have properties, that support Date/string/number values
           // TODO: Maybe change the signature to only accept a date object.
-          "no-incompatible-property-type": "off"
+          "no-incompatible-property-type": "off",
+          "no-unknown-tag-name": "error",
+          "no-missing-import": "error",
+          "no-missing-element-type-definition": "error",
+          "no-unknown-attribute": "error",
+          "no-unknown-property": "error",
+          "no-unknown-slot": "error"
         },
         "globalAttributes": [
           "align-self",
           "sbb-dialog-close",
           "sbb-navigation-close",
           "sbb-navigation-section-close",
+          "sbb-overlay-close",
           "sbb-popover-close",
           "sbb-toast-close"
         ]
diff --git a/vite.config.ts b/vite.config.ts
index 2ed90c879e..3e6504f849 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,114 +1,10 @@
-import { readFileSync } from 'fs';
-import { join } from 'path';
-
-import * as glob from 'glob';
 import postcssLit from 'rollup-plugin-postcss-lit';
-import type { ConfigEnv, PluginOption, ResolvedConfig } from 'vite';
 import { defineConfig } from 'vite';
 
-export const root = new URL('.', import.meta.url);
-
-export const isProdBuild = ({ command, mode }: ConfigEnv): boolean =>
-  command === 'build' && mode !== 'development';
-
-export function packageJsonTemplate(
-  options: { exports?: Record<string, Record<string, unknown>> } = {},
-): PluginOption {
-  let viteConfig: ResolvedConfig;
-  return {
-    name: 'package-json-templating',
-    configResolved(config) {
-      viteConfig = config;
-    },
-    generateBundle() {
-      if (viteConfig.command !== 'build') {
-        return;
-      }
-      const packageJsonPath = './package.json';
-      const rootPackageJson = JSON.parse(readFileSync(new URL(packageJsonPath, root), 'utf8'));
-      const litMajorVersion = +rootPackageJson.dependencies.lit.match(/\d+/);
-      const reactMajorVersion = +rootPackageJson.devDependencies.react.match(/\d+/);
-      const litReactMajorVersion = +rootPackageJson.devDependencies['@lit/react'].match(/\d+/);
-      const packageJsonTemplate = readFileSync(join(viteConfig.root, packageJsonPath), 'utf8');
-      const packageJsonContent = packageJsonTemplate
-        .replaceAll('0.0.0-PLACEHOLDER', rootPackageJson.version)
-        .replaceAll('0.0.0-LITREACT', `^${litReactMajorVersion}.0.0`)
-        .replaceAll('0.0.0-REACT', `^${reactMajorVersion}.0.0`)
-        .replaceAll('0.0.0-LIT', `^${litMajorVersion}.0.0`);
-      const packageJson = JSON.parse(packageJsonContent);
-      for (const key of ['author', 'license', 'repository', 'bugs']) {
-        packageJson[key] = rootPackageJson[key];
-      }
-
-      const lib = viteConfig.build.lib;
-      if (lib && typeof lib.entry === 'object' && !Array.isArray(lib.entry)) {
-        const exports = Object.entries(lib.entry)
-          .sort((a, b) => a[0].localeCompare(b[0]))
-          .reduce(
-            (current, next) =>
-              Object.assign(current, {
-                [`./${next[0].replace(/\/index$/, '')}`]: {
-                  types: `./${next[0]}.d.ts`,
-                  import: `./${next[0]}.js`,
-                  default: `./${next[0]}.js`,
-                },
-              }),
-            { ...options.exports, './package.json': { default: './package.json' } } as Record<
-              string,
-              Record<string, string>
-            >,
-          );
-        packageJson.exports = exports;
-      } else if (options.exports) {
-        packageJson.exports = options.exports;
-      }
-
-      this.emitFile({
-        type: 'asset',
-        fileName: 'package.json',
-        source: JSON.stringify(packageJson, null, 2),
-      });
-    },
-  };
-}
-
-export function copyAssets(includes: string[]): PluginOption {
-  let viteConfig: ResolvedConfig;
-  return {
-    name: 'package-json-templating',
-    configResolved(config) {
-      viteConfig = config;
-    },
-    generateBundle() {
-      if (viteConfig.command !== 'build') {
-        return;
-      }
-      for (const file of glob.sync(includes, { cwd: viteConfig.root })) {
-        // Remove relative file path if file is on a more upper layer than cwd.
-        const fileName = file.replace(/^(\.\.\/)*/, '');
-        this.emitFile({
-          type: 'asset',
-          fileName: fileName,
-          source: readFileSync(join(viteConfig.root, file), 'utf8'),
-        });
-      }
-    },
-  };
-}
-
-export function globIndexMap(cwd: URL): Record<string, string> {
-  return glob
-    .sync('**/index.ts', { cwd })
-    .filter((p) => !p.endsWith('/private/index.ts'))
-    .reduce(
-      (current, next) =>
-        Object.assign(current, {
-          [next.replace(/\.ts$/, '')]: next,
-        }),
-      {} as Record<string, string>,
-    );
-}
-
 export default defineConfig({
-  plugins: [postcssLit({ exclude: ['**/core/styles/**/*', '**/storybook/**/*'] })],
+  plugins: [
+    // We apply the postcssLit plugin (which transforms .scss files to Lit
+    // css tagged templates) as this should apply in almost all cases.
+    postcssLit({ exclude: ['**/core/styles/**/*', '**/storybook/**/*'] }),
+  ],
 });
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
index 1275996530..a410f98812 100644
--- a/web-test-runner.config.js
+++ b/web-test-runner.config.js
@@ -1,22 +1,28 @@
-import { Worker } from 'worker_threads';
-import { defaultReporter, dotReporter, summaryReporter } from '@web/test-runner';
+import { defaultReporter } from '@web/test-runner';
 import { playwrightLauncher } from '@web/test-runner-playwright';
 import { puppeteerLauncher } from '@web/test-runner-puppeteer';
 import { a11ySnapshotPlugin } from '@web/test-runner-commands/plugins';
-import { existsSync } from 'fs';
 import * as sass from 'sass';
-import { createServer } from 'vite';
 import { cpus } from 'node:os';
 
+import {
+  minimalReporter,
+  patchedSummaryReporter,
+  ssrPlugin,
+  vitePlugin,
+} from './tools/web-test-runner/index.js';
+
 const isCIEnvironment = !!process.env.CI || process.argv.includes('--ci');
 const isDebugMode = process.argv.includes('--debug');
 const firefox = process.argv.includes('--firefox');
 const webkit = process.argv.includes('--webkit');
 const concurrency = process.argv.includes('--parallel') ? {} : { concurrency: 1 };
 
-const globalCss = sass.compile('./src/components/core/styles/global.scss', {
-  loadPaths: ['.', './node_modules/'],
-});
+const stylesCompiler = new sass.initCompiler();
+const renderStyles = () =>
+  stylesCompiler.compile('./src/components/core/styles/global.scss', {
+    loadPaths: ['.', './node_modules/'],
+  }).css;
 
 const browsers = isCIEnvironment
   ? [
@@ -48,9 +54,11 @@ const testRunnerHtml = (testFramework, _config, group) => `
 <!DOCTYPE html>
 <html>
   <head>
-    <meta name="testEnvironment" ${isDebugMode ? 'debug' : ''}>
-    <meta name="testGroup" content="${groupNameOverride ?? group?.name ?? 'default'}">
-    <style type="text/css">${globalCss.css}</style>
+    <style type="text/css">${renderStyles()}</style>
+    <script>
+      globalThis.testEnv = '${isDebugMode ? 'debug' : ''}';
+      globalThis.testGroup = '${groupNameOverride ?? group?.name ?? 'default'}';
+    </script>
   </head>
   <body class="sbb-disable-animation">
     <script type="module" src="/src/components/core/testing/test-setup.ts"></script>
@@ -66,6 +74,12 @@ function resolveConcurrency() {
   return Math.floor(localCpus.length / factor);
 }
 
+// A list of log messages, that should not be printed to the test console.
+const suppressedLogs = [
+  'Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.',
+  '[vite] connecting...',
+];
+
 /** @type {import('@web/test-runner').TestRunnerConfig} */
 export default {
   files: ['src/**/*.{e2e,spec}.ts'],
@@ -81,7 +95,7 @@ export default {
       ? [defaultReporter(), patchedSummaryReporter()]
       : [minimalReporter()],
   browsers: browsers,
-  plugins: [vitePlugin(), a11ySnapshotPlugin()],
+  plugins: [a11ySnapshotPlugin(), ssrPlugin(), vitePlugin()],
   testFramework: {
     config: {
       timeout: '10000',
@@ -92,197 +106,6 @@ export default {
   coverageConfig: {
     exclude: ['**/node_modules/**/*', '**/assets/*.svg', '**/*.scss'],
   },
-  filterBrowserLogs: (log) =>
-    log.args[0] !==
-    'Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.',
+  filterBrowserLogs: (log) => !suppressedLogs.includes(log.args[0]),
   testRunnerHtml,
 };
-
-/** @type {import('@web/test-runner-core').Reporter} */
-function minimalReporter() {
-  const base = dotReporter();
-  const log = (result) =>
-    process.stdout.write(result.passed ? '.' : result.skipped ? '~' : '\x1b[31mx\x1b[0m');
-  function logResults(results) {
-    results?.tests?.forEach(log);
-    results?.suites?.forEach(logResults);
-  }
-  const collectorBase = { suites: 0, tests: 0, passed: 0, failed: 0, skipped: 0 };
-  /** @param {import('@web/test-runner-core').TestSession[]} sessions */
-  function aggregateSessions(sessions) {
-    const browserResults = new Map();
-    for (const session of sessions) {
-      if (!browserResults.has(session.browser.name)) {
-        browserResults.set(session.browser.name, { ...collectorBase });
-      }
-      aggregateSuites(session.testResults, browserResults.get(session.browser.name));
-    }
-    return Array.from(browserResults).sort((a, b) => a[0].localeCompare(b[0]));
-  }
-  /** @param {import('@web/test-runner-core').TestSuiteResult} results */
-  function aggregateSuites(results, collector = { ...collectorBase }) {
-    collector.suites += 1;
-    results?.tests?.forEach((result) => {
-      collector.tests += 1;
-      if (result.passed) {
-        collector.passed += 1;
-      } else if (result.skipped) {
-        collector.skipped += 1;
-      } else {
-        collector.failed += 1;
-      }
-    });
-    results?.suites?.forEach((s) => aggregateSuites(s, collector));
-    return collector;
-  }
-  const p = (v) => v.toString().padStart(6, ' ');
-
-  return {
-    ...base,
-    reportTestFileResults({ sessionsForTestFile: sessions }) {
-      for (const session of sessions) {
-        logResults(session.testResults);
-      }
-    },
-    /** @param {import('@web/test-runner-core').TestRunFinishedArgs} args */
-    onTestRunFinished(args) {
-      const browserResults = aggregateSessions(args.sessions);
-      console.log('');
-      console.group('Test Summary:');
-      for (const [browser, collector] of browserResults) {
-        console.group(browser);
-        console.log(`Suites:  ${p(collector.suites)}`);
-        console.log(`Tests:   ${p(collector.tests)}`);
-        console.log(`Passed:  ${p(collector.passed)}`);
-        console.log(`Failed:  ${p(collector.failed)}`);
-        console.log(`Skipped: ${p(collector.skipped)}`);
-        console.groupEnd();
-      }
-      console.groupEnd();
-      base.onTestRunFinished(args);
-    },
-  };
-}
-
-// See https://github.com/modernweb-dev/web/issues/2325
-/** @type {import('@web/test-runner-core').Reporter} */
-function patchedSummaryReporter() {
-  // https://github.com/modernweb-dev/web/blob/master/packages/test-runner/src/logger/TestRunnerLogger.ts
-  class TestRunnerLogger {
-    loggedSyntaxErrors = new Map();
-    debugLogging = false;
-
-    log = (...messages) => console.log(...messages);
-    debug = (...messages) => this.debugLogging && console.debug(...messages);
-    error = (...messages) => console.error(...messages);
-    warn = (...messages) => console.warn(...messages);
-    group = () => console.group();
-    groupEnd = () => console.groupEnd();
-    logSyntaxError(error) {
-      const { message, code, filePath, column, line } = error;
-      let errors = this.loggedSyntaxErrors.get(filePath);
-      if (!errors) {
-        errors = [];
-        this.loggedSyntaxErrors.set(filePath, errors);
-      } else if (
-        errors.find(
-          (e) => e.code === code && e.message === message && e.column === column && e.line === line,
-        )
-      ) {
-        // dedupe syntax errors we already logged
-        return;
-      }
-      errors.push(error);
-    }
-    clearLoggedSyntaxErrors = () => (this.loggedSyntaxErrors = new Map());
-  }
-  const base = summaryReporter();
-  const logger = new TestRunnerLogger();
-  return {
-    ...base,
-    reportTestFileResults(args) {
-      base.reportTestFileResults({ ...args, logger });
-    },
-  };
-}
-
-// Reference: https://github.com/remcovaes/web-test-runner-vite-plugin
-function vitePlugin() {
-  let viteServer;
-  const litSsrPluginCommand = 'lit-ssr-render';
-
-  return {
-    name: 'vite-plugin',
-
-    async serverStart({ app, fileWatcher }) {
-      const externals = [
-        // @web/test-runner-commands needs to establish a web-socket
-        // connection. It expects a file to be served from the
-        // @web/dev-server. So it should be ignored by Vite.
-        '/__web-dev-server__web-socket.js',
-      ];
-
-      viteServer = await createServer({
-        clearScreen: false,
-        plugins: [
-          {
-            name: 'file-name',
-            transform(_src, id) {
-              const file = id.split('?')[0];
-              if (!file.startsWith('\0') && existsSync(file)) {
-                fileWatcher.add(id);
-              }
-            },
-          },
-          {
-            name: 'mark-external',
-            resolveId: (id) => (externals.includes(id) ? { id, external: true } : undefined),
-          },
-        ],
-        // Disable hmr in favor of the @web/test-runner to take care of restarts.
-        server: { hmr: false },
-        // This configuration is necessary, as vite will otherwise detect dependencies
-        // that can be optimized. This will cause vite to reload, which leads to
-        // 'Could not import your test module.' errors, that happen randomly.
-        // Excluding the dependencies, prevents this from happening at the cost of slightly
-        // increased test times.
-        optimizeDeps: {
-          noDiscovery: true,
-        },
-      });
-      await viteServer.listen();
-
-      const vitePort = viteServer.config.server.port;
-      const viteProtocol = viteServer.config.server.https ? 'https' : 'http';
-
-      app.use(async (ctx) => {
-        const response = await fetch(`${viteProtocol}://localhost:${vitePort}${ctx.originalUrl}`);
-        ctx.set(Object.fromEntries(response.headers));
-        ctx.body = await response.text();
-        ctx.status = response.status;
-      });
-    },
-    async serverStop() {
-      return await viteServer.close();
-    },
-    // Reference: https://github.com/lit/lit/blob/main/packages/labs/testing/src/lib/lit-ssr-plugin.ts
-    // This is necessary until https://github.com/privatenumber/tsx/issues/354 is fixed
-    async executeCommand({ command, payload }) {
-      if (command !== litSsrPluginCommand) {
-        return undefined;
-      } else if (!payload) {
-        throw new Error(`Missing payload for ${litSsrPluginCommand} command`);
-      }
-
-      const { template, modules } = payload;
-      const resolvedModules = modules.map((m) => new URL(`.${m}`, import.meta.url).pathname);
-      return new Promise((resolve, reject) => {
-        const worker = new Worker(new URL('./config/lit-ssr-worker.js', import.meta.url), {
-          workerData: { template, modules: resolvedModules },
-        });
-        worker.on('error', reject);
-        worker.on('message', resolve);
-      });
-    },
-  };
-}
diff --git a/yarn.lock b/yarn.lock
index ed320bc547..0a94806afe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -43,23 +43,23 @@
     "@babel/highlight" "^7.24.2"
     picocolors "^1.0.0"
 
-"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.5", "@babel/compat-data@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.1.tgz#31c1f66435f2a9c329bb5716a6d6186c516c3742"
-  integrity sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.5", "@babel/compat-data@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.4.tgz#6f102372e9094f25d908ca0d34fc74c74606059a"
+  integrity sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==
 
 "@babel/core@^7.12.3", "@babel/core@^7.23.0", "@babel/core@^7.23.2", "@babel/core@^7.23.9":
-  version "7.24.3"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.3.tgz#568864247ea10fbd4eff04dda1e05f9e2ea985c3"
-  integrity sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.4.tgz#1f758428e88e0d8c563874741bc4ffc4f71a4717"
+  integrity sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
     "@babel/code-frame" "^7.24.2"
-    "@babel/generator" "^7.24.1"
+    "@babel/generator" "^7.24.4"
     "@babel/helper-compilation-targets" "^7.23.6"
     "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helpers" "^7.24.1"
-    "@babel/parser" "^7.24.1"
+    "@babel/helpers" "^7.24.4"
+    "@babel/parser" "^7.24.4"
     "@babel/template" "^7.24.0"
     "@babel/traverse" "^7.24.1"
     "@babel/types" "^7.24.0"
@@ -69,10 +69,10 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.23.0", "@babel/generator@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.1.tgz#e67e06f68568a4ebf194d1c6014235344f0476d0"
-  integrity sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==
+"@babel/generator@^7.23.0", "@babel/generator@^7.24.1", "@babel/generator@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.4.tgz#1fc55532b88adf952025d5d2d1e71f946cb1c498"
+  integrity sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==
   dependencies:
     "@babel/types" "^7.24.0"
     "@jridgewell/gen-mapping" "^0.3.5"
@@ -104,10 +104,10 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.1.tgz#db58bf57137b623b916e24874ab7188d93d7f68f"
-  integrity sha512-1yJa9dX9g//V6fDebXoEfEsxkZHk3Hcbm+zLhyu6qVgYFLvmTALTeV+jNU9e5RnYtioBrGEOdoI2joMSNQ/+aA==
+"@babel/helper-create-class-features-plugin@^7.24.1", "@babel/helper-create-class-features-plugin@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.4.tgz#c806f73788a6800a5cfbbc04d2df7ee4d927cce3"
+  integrity sha512-lG75yeuUSVu0pIcbhiYMXBXANHrpUPaOfu7ryAzskCgKUHuAxRQI5ssrtmF0X9UXldPlvT0XM/A4F44OXRt6iQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
     "@babel/helper-environment-visitor" "^7.22.20"
@@ -259,10 +259,10 @@
     "@babel/template" "^7.22.15"
     "@babel/types" "^7.22.19"
 
-"@babel/helpers@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.1.tgz#183e44714b9eba36c3038e442516587b1e0a1a94"
-  integrity sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==
+"@babel/helpers@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.4.tgz#dc00907fd0d95da74563c142ef4cd21f2cb856b6"
+  integrity sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==
   dependencies:
     "@babel/template" "^7.24.0"
     "@babel/traverse" "^7.24.1"
@@ -278,10 +278,18 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.21.4", "@babel/parser@^7.23.0", "@babel/parser@^7.23.9", "@babel/parser@^7.24.0", "@babel/parser@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.1.tgz#1e416d3627393fab1cb5b0f2f1796a100ae9133a"
-  integrity sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==
+"@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==
+
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.4.tgz#6125f0158543fb4edf1c22f322f3db67f21cb3e1"
+  integrity sha512-qpl6vOOEEzTLLcsuqYYo8yDtrTocmu2xkGvgNebvPjT9DTtfFYGmgDqY+rBYXNlqL4s9qLDn6xkrJv4RxAPiTA==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.24.1":
   version "7.24.1"
@@ -493,10 +501,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-block-scoping@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.1.tgz#27af183d7f6dad890531256c7a45019df768ac1f"
-  integrity sha512-h71T2QQvDgM2SmT29UYU6ozjMlAt7s7CSs5Hvy8f8cf/GM/Z4a2zMfN+fjVGaieeCrXR3EdQl6C4gQG+OgmbKw==
+"@babel/plugin-transform-block-scoping@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.4.tgz#28f5c010b66fbb8ccdeef853bef1935c434d7012"
+  integrity sha512-nIFUZIpGKDf9O9ttyRXpHFpKC+X3Y5mtshZONuEUYBomAKoM4y029Jr+uB1bHGPhNmK8YXHevDtKDOLmtRrp6g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
@@ -508,12 +516,12 @@
     "@babel/helper-create-class-features-plugin" "^7.24.1"
     "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/plugin-transform-class-static-block@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.1.tgz#4e37efcca1d9f2fcb908d1bae8b56b4b6e9e1cb6"
-  integrity sha512-FUHlKCn6J3ERiu8Dv+4eoz7w8+kFLSyeVG4vDAikwADGjUCoHw/JHokyGtr8OR4UjpwPVivyF+h8Q5iv/JmrtA==
+"@babel/plugin-transform-class-static-block@^7.24.4":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.4.tgz#1a4653c0cf8ac46441ec406dece6e9bc590356a4"
+  integrity sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.24.1"
+    "@babel/helper-create-class-features-plugin" "^7.24.4"
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
@@ -825,12 +833,12 @@
     "@babel/helper-plugin-utils" "^7.24.0"
 
 "@babel/plugin-transform-typescript@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.1.tgz#5c05e28bb76c7dfe7d6c5bed9951324fd2d3ab07"
-  integrity sha512-liYSESjX2fZ7JyBFkYG78nfvHlMKE6IpNdTVnxmlYUR+j5ZLsitFbaAE+eJSK2zPPkNWNw4mXL51rQ8WrvdK0w==
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.4.tgz#03e0492537a4b953e491f53f2bc88245574ebd15"
+  integrity sha512-79t3CQ8+oBGk/80SQ8MN3Bs3obf83zJ0YZjDmDaEZN8MqhMI760apl5z6a20kFeMXBwJX99VpKT8CKxEBp5H1g==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-create-class-features-plugin" "^7.24.1"
+    "@babel/helper-create-class-features-plugin" "^7.24.4"
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-typescript" "^7.24.1"
 
@@ -866,14 +874,15 @@
     "@babel/helper-plugin-utils" "^7.24.0"
 
 "@babel/preset-env@^7.23.2":
-  version "7.24.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.24.3.tgz#f3f138c844ffeeac372597b29c51b5259e8323a3"
-  integrity sha512-fSk430k5c2ff8536JcPvPWK4tZDwehWLGlBp0wrsBUjZVdeQV6lePbwKWZaZfK2vnh/1kQX1PzAJWsnBmVgGJA==
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.24.4.tgz#46dbbcd608771373b88f956ffb67d471dce0d23b"
+  integrity sha512-7Kl6cSmYkak0FK/FXjSEnLJ1N9T/WA2RkMhu17gZ/dsxKJUuTYNIylahPTzqpLyJN4WhDif8X0XK1R8Wsguo/A==
   dependencies:
-    "@babel/compat-data" "^7.24.1"
+    "@babel/compat-data" "^7.24.4"
     "@babel/helper-compilation-targets" "^7.23.6"
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/helper-validator-option" "^7.23.5"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.24.4"
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.24.1"
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.24.1"
     "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.24.1"
@@ -900,9 +909,9 @@
     "@babel/plugin-transform-async-generator-functions" "^7.24.3"
     "@babel/plugin-transform-async-to-generator" "^7.24.1"
     "@babel/plugin-transform-block-scoped-functions" "^7.24.1"
-    "@babel/plugin-transform-block-scoping" "^7.24.1"
+    "@babel/plugin-transform-block-scoping" "^7.24.4"
     "@babel/plugin-transform-class-properties" "^7.24.1"
-    "@babel/plugin-transform-class-static-block" "^7.24.1"
+    "@babel/plugin-transform-class-static-block" "^7.24.4"
     "@babel/plugin-transform-classes" "^7.24.1"
     "@babel/plugin-transform-computed-properties" "^7.24.1"
     "@babel/plugin-transform-destructuring" "^7.24.1"
@@ -997,9 +1006,9 @@
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
-  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
+  integrity sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -1042,23 +1051,23 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@commitlint/cli@19.2.1":
-  version "19.2.1"
-  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-19.2.1.tgz#8f00d27a8b7c7780e75b06fd4658fdc1e9209f1b"
-  integrity sha512-cbkYUJsLqRomccNxvoJTyv5yn0bSy05BBizVyIcLACkRbVUqYorC351Diw/XFSWC/GtpwiwT2eOvQgFZa374bg==
+"@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/lint" "^19.1.0"
+    "@commitlint/format" "^19.3.0"
+    "@commitlint/lint" "^19.2.2"
     "@commitlint/load" "^19.2.0"
     "@commitlint/read" "^19.2.1"
     "@commitlint/types" "^19.0.3"
     execa "^8.0.1"
     yargs "^17.0.0"
 
-"@commitlint/config-conventional@19.1.0":
-  version "19.1.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/config-conventional/-/config-conventional-19.1.0.tgz#6b4b7938aa3bc308214a683247520f602e55961e"
-  integrity sha512-KIKD2xrp6Uuk+dcZVj3++MlzIr/Su6zLE8crEDQCZNvWHNQSeeGbzOlNtsR32TUy6H3JbP7nWgduAHCaiGQ6EA==
+"@commitlint/config-conventional@19.2.2":
+  version "19.2.2"
+  resolved "https://registry.yarnpkg.com/@commitlint/config-conventional/-/config-conventional-19.2.2.tgz#1f4e6975d428985deacf2b3ff6547e02c9302054"
+  integrity sha512-mLXjsxUVLYEGgzbxbxicGPggDuyWNkf25Ht23owXIH+zV2pv1eJuzLK3t1gDY5Gp6pxdE60jZnWUY5cvgL3ufw==
   dependencies:
     "@commitlint/types" "^19.0.3"
     conventional-changelog-conventionalcommits "^7.0.2"
@@ -1088,28 +1097,28 @@
   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"
 
-"@commitlint/is-ignored@^19.0.3":
-  version "19.0.3"
-  resolved "https://registry.yarnpkg.com/@commitlint/is-ignored/-/is-ignored-19.0.3.tgz#a64e0e217044f2d916127369d21ea12324a834fe"
-  integrity sha512-MqDrxJaRSVSzCbPsV6iOKG/Lt52Y+PVwFVexqImmYYFhe51iVJjK2hRhOG2jUAGiUHk4jpdFr0cZPzcBkSzXDQ==
+"@commitlint/is-ignored@^19.2.2":
+  version "19.2.2"
+  resolved "https://registry.yarnpkg.com/@commitlint/is-ignored/-/is-ignored-19.2.2.tgz#503ddcf908ac6b2bc4586a49cb53893a1856f5b2"
+  integrity sha512-eNX54oXMVxncORywF4ZPFtJoBm3Tvp111tg1xf4zWXGfhBPKpfKG6R+G3G4v5CPlRROXpAOpQ3HMhA9n1Tck1g==
   dependencies:
     "@commitlint/types" "^19.0.3"
     semver "^7.6.0"
 
-"@commitlint/lint@^19.1.0":
-  version "19.1.0"
-  resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-19.1.0.tgz#0f4b26b1452d59a92a28b5fa6de9bdbee18399a1"
-  integrity sha512-ESjaBmL/9cxm+eePyEr6SFlBUIYlYpI80n+Ltm7IA3MAcrmiP05UMhJdAD66sO8jvo8O4xdGn/1Mt2G5VzfZKw==
+"@commitlint/lint@^19.2.2":
+  version "19.2.2"
+  resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-19.2.2.tgz#57f69e24bd832a7dcce8ebf82d11e3bf03ccc2a9"
+  integrity sha512-xrzMmz4JqwGyKQKTpFzlN0dx0TAiT7Ran1fqEBgEmEj+PU98crOFtysJgY+QdeSagx6EDRigQIXJVnfrI0ratA==
   dependencies:
-    "@commitlint/is-ignored" "^19.0.3"
+    "@commitlint/is-ignored" "^19.2.2"
     "@commitlint/parse" "^19.0.3"
     "@commitlint/rules" "^19.0.3"
     "@commitlint/types" "^19.0.3"
@@ -1213,10 +1222,10 @@
   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":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz#ea61ba7bb24be3502c6aaa3190ed231f4633a81e"
-  integrity sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==
+"@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==
 
 "@custom-elements-manifest/analyzer@0.9.4":
   version "0.9.4"
@@ -1254,13 +1263,13 @@
     remark-stringify "^9.0.1"
     unified "^9.2.1"
 
-"@dependents/detective-less@^3.0.1":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@dependents/detective-less/-/detective-less-3.0.2.tgz#c6e46997010fe03a5dc98351a7e99a46d34f5832"
-  integrity sha512-1YUvQ+e0eeTWAHoN8Uz2x2U37jZs6IGutiIE5LXId7cxfUGhtZjzxE06FdUiuiRrW+UE0vNCdSNPH2lY4dQCOQ==
+"@dependents/detective-less@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@dependents/detective-less/-/detective-less-4.1.0.tgz#4a979ee7a6a79eb33602862d6a1263e30f98002e"
+  integrity sha512-KrkT6qO5NxqNfy68sBl6CTSoJ4SNDIS5iQArkibhlbGU4LaDukZ3q2HIkh8aUKDio6o4itU4xDR7t82Y2eP1Bg==
   dependencies:
     gonzales-pe "^4.3.0"
-    node-source-walk "^5.0.1"
+    node-source-walk "^6.0.1"
 
 "@discoveryjs/json-ext@^0.5.3":
   version "0.5.7"
@@ -1514,30 +1523,30 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
-"@eslint-community/regexpp@^4.5.1", "@eslint-community/regexpp@^4.6.1":
+"@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.6.1":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
   integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
 
-"@eslint/eslintrc@^2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
-  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
+"@eslint/eslintrc@3.0.2", "@eslint/eslintrc@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.0.2.tgz#36180f8e85bf34d2fe3ccc2261e8e204a411ab4e"
+  integrity sha512-wV19ZEGEMAC1eHgrS7UQPqsdEiCIbTKTasEfcXAigzoXICcqZSjBZEHlZwNVvKg6UBCjSlos84XiLqsRJnIcIg==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.6.0"
-    globals "^13.19.0"
+    espree "^10.0.1"
+    globals "^14.0.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
     js-yaml "^4.1.0"
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@8.57.0":
-  version "8.57.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
-  integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
+"@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"
@@ -1556,12 +1565,12 @@
   resolved "https://registry.yarnpkg.com/@github/catalyst/-/catalyst-1.6.0.tgz#378734d1d2b6a85af169d7e66c1a2a604bf1e82c"
   integrity sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ==
 
-"@humanwhocodes/config-array@^0.11.14":
-  version "0.11.14"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
-  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
+"@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.2"
+    "@humanwhocodes/object-schema" "^2.0.3"
     debug "^4.3.1"
     minimatch "^3.0.5"
 
@@ -1570,15 +1579,15 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
-  integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
+"@humanwhocodes/object-schema@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
-"@hutson/parse-repository-url@^3.0.0":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
-  integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
+"@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"
@@ -1661,7 +1670,7 @@
     "@webcomponents/template-shadowroot" "^0.1.0"
     lit "^2.0.0 || ^3.0.0"
 
-"@lit/react@^1.0.1":
+"@lit/react@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@lit/react/-/react-1.0.4.tgz#85538bea5c04b812903122e597f33b652e302576"
   integrity sha512-6HBvk3AwF46z17fTkZp5F7/EdCJW9xqqQgYKr3sQGgoEJv0TKV1voWydG4UQQA2RWkoD4SHjy08snSpzyoyd0w==
@@ -1680,32 +1689,33 @@
   dependencies:
     "@types/mdx" "^2.0.0"
 
-"@microsoft/api-extractor-model@7.28.3":
-  version "7.28.3"
-  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.28.3.tgz#f6a213e41a2274d5195366b646954daee39e8493"
-  integrity sha512-wT/kB2oDbdZXITyDh2SQLzaWwTOFbV326fP0pUwNW00WeliARs0qjmXBWmGWardEzp2U3/axkO3Lboqun6vrig==
+"@microsoft/api-extractor-model@7.28.13":
+  version "7.28.13"
+  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.28.13.tgz#96fbc52155e0d07e0eabbd9699065b77702fe33a"
+  integrity sha512-39v/JyldX4MS9uzHcdfmjjfS6cYGAoXV+io8B5a338pkHiSt+gy2eXQ0Q7cGFJ7quSa1VqqlMdlPrB6sLR/cAw==
   dependencies:
     "@microsoft/tsdoc" "0.14.2"
     "@microsoft/tsdoc-config" "~0.16.1"
-    "@rushstack/node-core-library" "3.62.0"
+    "@rushstack/node-core-library" "4.0.2"
 
-"@microsoft/api-extractor@7.39.0":
-  version "7.39.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.39.0.tgz#41c25f7f522e8b9376debda07364ff234e602eff"
-  integrity sha512-PuXxzadgnvp+wdeZFPonssRAj/EW4Gm4s75TXzPk09h3wJ8RS3x7typf95B4vwZRrPTQBGopdUl+/vHvlPdAcg==
+"@microsoft/api-extractor@7.43.0":
+  version "7.43.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.43.0.tgz#41c42677bc71cd8e0f23c63c56802d85044e65cd"
+  integrity sha512-GFhTcJpB+MI6FhvXEI9b2K0snulNLWHqC/BbcJtyNYcKUiw7l3Lgis5ApsYncJ0leALX7/of4XfmXk+maT111w==
   dependencies:
-    "@microsoft/api-extractor-model" "7.28.3"
+    "@microsoft/api-extractor-model" "7.28.13"
     "@microsoft/tsdoc" "0.14.2"
     "@microsoft/tsdoc-config" "~0.16.1"
-    "@rushstack/node-core-library" "3.62.0"
-    "@rushstack/rig-package" "0.5.1"
-    "@rushstack/ts-command-line" "4.17.1"
-    colors "~1.2.1"
+    "@rushstack/node-core-library" "4.0.2"
+    "@rushstack/rig-package" "0.5.2"
+    "@rushstack/terminal" "0.10.0"
+    "@rushstack/ts-command-line" "4.19.1"
     lodash "~4.17.15"
+    minimatch "~3.0.3"
     resolve "~1.22.1"
     semver "~7.5.4"
     source-map "~0.6.1"
-    typescript "5.3.3"
+    typescript "5.4.2"
 
 "@microsoft/tsdoc-config@~0.16.1":
   version "0.16.2"
@@ -1811,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.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@puppeteer/browsers/-/browsers-2.2.0.tgz#25b5c6d1c93eb91e7086ebc95b767fe7b3ee5ec4"
-  integrity sha512-MC7LxpcBtdfTbzwARXIkqGZ1Osn3nnZJlm+i0+VqHl72t//Xwl9wICrXT8BwtgC6s1xJNHsxOpvzISUqe92+sw==
+"@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"
@@ -1861,77 +1871,91 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@rollup/rollup-android-arm-eabi@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz#b98786c1304b4ff8db3a873180b778649b5dff2b"
-  integrity sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==
-
-"@rollup/rollup-android-arm64@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz#8833679af11172b1bf1ab7cb3bad84df4caf0c9e"
-  integrity sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==
-
-"@rollup/rollup-darwin-arm64@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz#ef02d73e0a95d406e0eb4fd61a53d5d17775659b"
-  integrity sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==
-
-"@rollup/rollup-darwin-x64@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz#3ce5b9bcf92b3341a5c1c58a3e6bcce0ea9e7455"
-  integrity sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==
-
-"@rollup/rollup-linux-arm-gnueabihf@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz#3d3d2c018bdd8e037c6bfedd52acfff1c97e4be4"
-  integrity sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==
-
-"@rollup/rollup-linux-arm64-gnu@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz#5fc8cc978ff396eaa136d7bfe05b5b9138064143"
-  integrity sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==
-
-"@rollup/rollup-linux-arm64-musl@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz#f2ae7d7bed416ffa26d6b948ac5772b520700eef"
-  integrity sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==
-
-"@rollup/rollup-linux-riscv64-gnu@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz#303d57a328ee9a50c85385936f31cf62306d30b6"
-  integrity sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==
-
-"@rollup/rollup-linux-x64-gnu@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz#f672f6508f090fc73f08ba40ff76c20b57424778"
-  integrity sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==
-
-"@rollup/rollup-linux-x64-musl@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz#d2f34b1b157f3e7f13925bca3288192a66755a89"
-  integrity sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==
-
-"@rollup/rollup-win32-arm64-msvc@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz#8ffecc980ae4d9899eb2f9c4ae471a8d58d2da6b"
-  integrity sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==
-
-"@rollup/rollup-win32-ia32-msvc@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz#a7505884f415662e088365b9218b2b03a88fc6f2"
-  integrity sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==
-
-"@rollup/rollup-win32-x64-msvc@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz#6abd79db7ff8d01a58865ba20a63cfd23d9e2a10"
-  integrity sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==
-
-"@rushstack/node-core-library@3.62.0":
-  version "3.62.0"
-  resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-3.62.0.tgz#a30a44a740b522944165f0faa6644134eb95be1d"
-  integrity sha512-88aJn2h8UpSvdwuDXBv1/v1heM6GnBf3RjEy6ZPP7UnzHNCqOHA2Ut+ScYUbXcqIdfew9JlTAe3g+cnX9xQ/Aw==
-  dependencies:
-    colors "~1.2.1"
+"@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"
+  resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-4.0.2.tgz#e26854a3314b279d57e8abdb4acce7797d02f554"
+  integrity sha512-hyES82QVpkfQMeBMteQUnrhASL/KHPhd7iJ8euduwNJG4mu2GSOKybf0rOEjOm1Wz7CwJEUm9y0yD7jg2C1bfg==
+  dependencies:
     fs-extra "~7.0.1"
     import-lazy "~4.0.0"
     jju "~1.4.0"
@@ -1939,28 +1963,36 @@
     semver "~7.5.4"
     z-schema "~5.0.2"
 
-"@rushstack/rig-package@0.5.1":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@rushstack/rig-package/-/rig-package-0.5.1.tgz#6c9c283cc96b5bb1eae9875946d974ac5429bb21"
-  integrity sha512-pXRYSe29TjRw7rqxD4WS3HN/sRSbfr+tJs4a9uuaSIBAITbUggygdhuG0VrO0EO+QqH91GhYMN4S6KRtOEmGVA==
+"@rushstack/rig-package@0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@rushstack/rig-package/-/rig-package-0.5.2.tgz#0e23a115904678717a74049661931c0b37dd5495"
+  integrity sha512-mUDecIJeH3yYGZs2a48k+pbhM6JYwWlgjs2Ca5f2n1G2/kgdgP9D/07oglEGf6mRyXEnazhEENeYTSNDRCwdqA==
   dependencies:
     resolve "~1.22.1"
     strip-json-comments "~3.1.1"
 
-"@rushstack/ts-command-line@4.17.1":
-  version "4.17.1"
-  resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.17.1.tgz#c78db928ce5b93f2e98fd9e14c24f3f3876e57f1"
-  integrity sha512-2jweO1O57BYP5qdBGl6apJLB+aRIn5ccIRTPDyULh0KMwVzFqWtw6IZWt1qtUoZD/pD2RNkIOosH6Cq45rIYeg==
+"@rushstack/terminal@0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@rushstack/terminal/-/terminal-0.10.0.tgz#e81909fa0e5c8016b6df4739f0f381f44358269f"
+  integrity sha512-UbELbXnUdc7EKwfH2sb8ChqNgapUOdqcCIdQP4NGxBpTZV2sQyeekuK3zmfQSa/MN+/7b4kBogl2wq0vpkpYGw==
   dependencies:
+    "@rushstack/node-core-library" "4.0.2"
+    supports-color "~8.1.1"
+
+"@rushstack/ts-command-line@4.19.1":
+  version "4.19.1"
+  resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.19.1.tgz#288ee54dd607e558a8be07705869c16c31b5c3ef"
+  integrity sha512-J7H768dgcpG60d7skZ5uSSwyCZs/S2HrWP1Ds8d1qYAyaaeJmpmmLr9BVw97RjFzmQPOYnoXcKA4GkqDCkduQg==
+  dependencies:
+    "@rushstack/terminal" "0.10.0"
     "@types/argparse" "1.0.38"
     argparse "~1.0.9"
-    colors "~1.2.1"
     string-argv "~0.3.1"
 
-"@sbb-esta/lyne-design-tokens@0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@sbb-esta/lyne-design-tokens/-/lyne-design-tokens-0.4.1.tgz#150854092f010dce9f2e730a7e670d033fca9d00"
-  integrity sha512-a0jMEW//JwnbO9pzzIoEFOaOsFoMpykSzfXNZLTCwIV7gPvHY/hhAn5jHe8FaH8sM+pVt+9jFo6klvOEZ0xBqw==
+"@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"
@@ -2002,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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-8.0.4.tgz#2e62ab86a016a9ed6e4b52d61e0549c2568b0923"
-  integrity sha512-5OyZNzjNXjNUD9vBfjxFnJjMMcBFYWyI4zy5qmJcbAvBv/COiXNfNg2cr2YPNtU5WfA6nsaIESfHFGBHI3GDAg==
+"@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.4"
+    "@storybook/addon-highlight" "8.0.9"
     axe-core "^4.2.0"
 
-"@storybook/addon-actions@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-8.0.4.tgz#fc2285bd26660f10af497b332d0e62e7e00bfbbc"
-  integrity sha512-EyCWo+8T11/TJGYNL/AXtW4yaB+q1v2E9mixbumryCLxpTl2NtaeGZ4e0dlwfIMuw/7RWgHk2uIypcIPR/UANQ==
+"@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.4"
+    "@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-8.0.4.tgz#e4250a10fe4768dcc016a3c55a627f2c8a6e8d5b"
-  integrity sha512-fef0KD2GhJx2zpicOf8iL7k2LiIsNzEbGaQpIIjoy4DMqM1hIfNCt3DGTLH7LN5O8G+NVCLS1xmQg7RLvIVSCA==
+"@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-8.0.4.tgz#536ad2a1b9a2b19371848e4ec4eaedb4f41b9ec3"
-  integrity sha512-K5EYBTsUOTJlvIdA7p6Xj31wnV+RbZAkk56UKQvA7nJD7oDuLOq3E9u46F/uZD1vxddd9zFhf2iONfMe3KTTwQ==
+"@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.4"
+    "@storybook/blocks" "8.0.9"
     lodash "^4.17.21"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-8.0.4.tgz#5cee04859c017bdd0f46bc7337a5064cd415c211"
-  integrity sha512-m0Y7qGAMnNPLEOEgzW/SBm8GX0xabJBaRN+aYijO6UKTln7F6oXXVve+xPC0Y4s6Gc9HZFdJY8WXZr1YSGEUVA==
+"@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.4"
-    "@storybook/client-logger" "8.0.4"
-    "@storybook/components" "8.0.4"
-    "@storybook/csf-plugin" "8.0.4"
-    "@storybook/csf-tools" "8.0.4"
+    "@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.4"
-    "@storybook/preview-api" "8.0.4"
-    "@storybook/react-dom-shim" "8.0.4"
-    "@storybook/theming" "8.0.4"
-    "@storybook/types" "8.0.4"
+    "@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"
@@ -2066,99 +2098,99 @@
     rehype-slug "^6.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-essentials@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-8.0.4.tgz#64b6bf4ccf82c8f212472457f37ecce0acd5cfb1"
-  integrity sha512-mUIqhAkSz6Qv7nRqAAyCqMLiXBWVsY/8qN7HEIoaMQgdFq38KW3rYwNdzd2JLeXNWP1bBXwfvfcFe7/eqhYJFA==
-  dependencies:
-    "@storybook/addon-actions" "8.0.4"
-    "@storybook/addon-backgrounds" "8.0.4"
-    "@storybook/addon-controls" "8.0.4"
-    "@storybook/addon-docs" "8.0.4"
-    "@storybook/addon-highlight" "8.0.4"
-    "@storybook/addon-measure" "8.0.4"
-    "@storybook/addon-outline" "8.0.4"
-    "@storybook/addon-toolbars" "8.0.4"
-    "@storybook/addon-viewport" "8.0.4"
-    "@storybook/core-common" "8.0.4"
-    "@storybook/manager-api" "8.0.4"
-    "@storybook/node-logger" "8.0.4"
-    "@storybook/preview-api" "8.0.4"
+"@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-8.0.4.tgz#32f21a1f850394e83277a1cd553a33c86cb603f4"
-  integrity sha512-tnEiVaJlXL07v8JBox+QtRPVruoy0YovOTAOWY7fKDiKzF1I9wLaJjQF3wOsvwspHTHu00OZw2gsazgXiH4wLQ==
+"@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-8.0.4.tgz#b689790cf1afd1d610df9ee98538bb88f837e4aa"
-  integrity sha512-wTEOnVUbF1lNJxxocr5IKmpgnmwyO8YsQf6Baw3tTWCHAa/MaWWQYq1OA6CfFfmVGGRjv/w2GTuf1Vyq99O7mg==
+"@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.4"
-    "@storybook/test" "8.0.4"
-    "@storybook/types" "8.0.4"
+    "@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-8.0.4.tgz#34c4a3818a52023b09c98fcfe4c00e9ac08a0d10"
-  integrity sha512-SzE+JPZ4mxjprZqbLHf8Hx7UA2fXfMajFjeY9c3JREKQrDoOF1e4r28nAoVsZYF+frWxQB51U4+hOqjlx06wEA==
+"@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-8.0.4.tgz#b4d492da2f1f3744c3a792475bd44e1305239412"
-  integrity sha512-GZYKo2ss5Br+dfHinoK3bgTaS90z3oKKDkhv6lrFfjjU1mDYzzMJpxajQhd3apCYxHLr3MbUqMQibWu2T/q2DQ==
+"@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-8.0.4.tgz#a368a493dafe3f0cea79af160103efa9e9b1e21b"
-  integrity sha512-6J9ezNDUxdA3rMCh8sUEQbUwAgkrr+M9QdiFr1t+gKrk5FKP5gwubw1sr3sF1IRB9+s/AjljcOtJAVulSfq05w==
+"@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-8.0.4.tgz#a1de4472089bf685dfca9863bc648e2faf360063"
-  integrity sha512-yodRXDYog/90cNEy84kg6s7L+nxQ+egBjHBTsav1L4cJmQI/uAX8yISHHiX4I5ppNc120Jz3UdHdRxXRlo345g==
+"@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-8.0.4.tgz#628322ea0a94252015814edd4c548e26f2c79f4a"
-  integrity sha512-E5IKOsxKcOtlOYc0cWgzVJohQB+dVBWwaJcg5FlslToknfVB9M0kfQ/SQcp3KB0C9/cOmJK1Jm388InW+EjrBQ==
+"@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-8.0.4.tgz#844d5882f04f3fc06c62ee057e303e72ffe53499"
-  integrity sha512-9dRXk9zLJVPOmEWsSXm10XUmIfvS/tVgeBgFXNbusFQZXPpexIPNdRgB004pDGg9RvlY78ykpnd3yP143zaXMg==
-  dependencies:
-    "@storybook/channels" "8.0.4"
-    "@storybook/client-logger" "8.0.4"
-    "@storybook/components" "8.0.4"
-    "@storybook/core-events" "8.0.4"
-    "@storybook/csf" "^0.1.2"
-    "@storybook/docs-tools" "8.0.4"
+"@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.4"
-    "@storybook/preview-api" "8.0.4"
-    "@storybook/theming" "8.0.4"
-    "@storybook/types" "8.0.4"
+    "@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"
@@ -2172,15 +2204,15 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/builder-manager@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-manager/-/builder-manager-8.0.4.tgz#5c9baa6138beae7cd75c85e4b836cb1e3115d3c4"
-  integrity sha512-BafYVxq77uuTmXdjYo5by42OyOrb6qcpWYKva3ntWK2ZhTaLJlwwqAOdahT1DVzi4VeUP6465YvsTCzIE8fuIw==
+"@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.4"
-    "@storybook/manager" "8.0.4"
-    "@storybook/node-logger" "8.0.4"
+    "@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"
@@ -2192,20 +2224,20 @@
     process "^0.11.10"
     util "^0.12.4"
 
-"@storybook/builder-vite@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-vite/-/builder-vite-8.0.4.tgz#e8a2bb48be9d077f1c1fe647f541ab5e628ff156"
-  integrity sha512-Whb001bGkoGQ6/byp9QTQJ4NO61Qa5bh1p5WEEMJ5wYvHm83b+B/IwwilUfU5mL9bJB/RjbwyKcSQqGP6AxMzA==
-  dependencies:
-    "@storybook/channels" "8.0.4"
-    "@storybook/client-logger" "8.0.4"
-    "@storybook/core-common" "8.0.4"
-    "@storybook/core-events" "8.0.4"
-    "@storybook/csf-plugin" "8.0.4"
-    "@storybook/node-logger" "8.0.4"
-    "@storybook/preview" "8.0.4"
-    "@storybook/preview-api" "8.0.4"
-    "@storybook/types" "8.0.4"
+"@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"
@@ -2215,33 +2247,33 @@
     magic-string "^0.30.0"
     ts-dedent "^2.0.0"
 
-"@storybook/channels@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-8.0.4.tgz#f237bc4d3a00ed05a2f62b310b1db08d6f685dcc"
-  integrity sha512-haKV+8RbiSzLjicowUfc7h2fTClZHX/nz9SRUecf4IEZUEu2T78OgM/TzqZvL7rA3+/fKqp5iI+3PN3OA75Sdg==
+"@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.4"
-    "@storybook/core-events" "8.0.4"
+    "@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-8.0.4.tgz#37037ed476c895f728cda528a7b76df01b9a35a0"
-  integrity sha512-8jb8hrulRMfyFyNXFEapxHBS51xb42ZZGfVAacXIsHOJtjOd5CnOoSUYn0aOkVl19VF/snoa9JOW7BaW/50Eqw==
+"@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.4"
-    "@storybook/core-common" "8.0.4"
-    "@storybook/core-events" "8.0.4"
-    "@storybook/core-server" "8.0.4"
-    "@storybook/csf-tools" "8.0.4"
-    "@storybook/node-logger" "8.0.4"
-    "@storybook/telemetry" "8.0.4"
-    "@storybook/types" "8.0.4"
+    "@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"
@@ -2268,25 +2300,25 @@
     tiny-invariant "^1.3.1"
     ts-dedent "^2.0.0"
 
-"@storybook/client-logger@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-8.0.4.tgz#d603399ad65ef1d38bf013033fcb18728d0d4317"
-  integrity sha512-2SeEg3PT/d0l/+EAVtyj9hmMLTyTPp+bRBSzxYouBjtJPM1jrdKpFagj1o3uBRovwWm9SIVX6/ZsoRC33PEV1g==
+"@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-8.0.4.tgz#815c7c729b973f958282df37040581a7ba416324"
-  integrity sha512-bysG46P4wjlR3RCpr/ntNAUaupWpzLcWYWti3iNtIyZ/iPrX6KtXoA9QCIwJZrlv41us6F+KEZbzLzkgWbymtQ==
+"@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.4"
-    "@storybook/node-logger" "8.0.4"
-    "@storybook/types" "8.0.4"
+    "@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"
@@ -2296,30 +2328,30 @@
     recast "^0.23.5"
     tiny-invariant "^1.3.1"
 
-"@storybook/components@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-8.0.4.tgz#45f6548bfe42004bbb1533b45d9a3e65043b5fd7"
-  integrity sha512-i5ngl5GTOLB9nZ1cmpxTjtWct5IuH9UxzFC73a0jHMkCwN26w16IqufRVDaoQv0AvZN4pd4fNM2in/XVHA10dw==
+"@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.4"
-    "@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.4"
-    "@storybook/types" "8.0.4"
+    "@storybook/theming" "8.0.9"
+    "@storybook/types" "8.0.9"
     memoizerific "^1.11.3"
     util-deprecate "^1.0.2"
 
-"@storybook/core-common@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-8.0.4.tgz#ba851052f1cd61ba2784e07ad64499e3c36bb9a1"
-  integrity sha512-dzFRLm5FxUa2EFE6Rx/KLDTJNLBIp1S2/+Q1K+rG8V+CLvewCc2Cd486rStZqSXEKI7vDnsRs/aMla+N0X/++Q==
+"@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.4"
-    "@storybook/csf-tools" "8.0.4"
-    "@storybook/node-logger" "8.0.4"
-    "@storybook/types" "8.0.4"
+    "@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"
@@ -2345,35 +2377,35 @@
     ts-dedent "^2.0.0"
     util "^0.12.4"
 
-"@storybook/core-events@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-8.0.4.tgz#14e87ffcbf826139226306de9079a84e0286860b"
-  integrity sha512-1FgLacIGi9i6/fyxw7ZJDC621RK47IMaA3keH4lc11ASRzCSwJ4YOrXjBFjfPc79EF2BuX72DDJNbhj6ynfF3g==
+"@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-8.0.4.tgz#c0f94848109137b303cdf2dbc4a9d451ce5732c8"
-  integrity sha512-/633Pp7LPcDWXkPLSW+W9VUYUbVkdVBG6peXjuzogV0vzdM0dM9af/T0uV2NQxUhzoy6/7QdSDljE+eEOBs2Lw==
+"@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.4"
-    "@storybook/channels" "8.0.4"
-    "@storybook/core-common" "8.0.4"
-    "@storybook/core-events" "8.0.4"
-    "@storybook/csf" "^0.1.2"
-    "@storybook/csf-tools" "8.0.4"
+    "@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.4"
-    "@storybook/manager-api" "8.0.4"
-    "@storybook/node-logger" "8.0.4"
-    "@storybook/preview-api" "8.0.4"
-    "@storybook/telemetry" "8.0.4"
-    "@storybook/types" "8.0.4"
+    "@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"
@@ -2401,25 +2433,25 @@
     watchpack "^2.2.0"
     ws "^8.2.3"
 
-"@storybook/csf-plugin@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-8.0.4.tgz#b5b1a02a51c91e386f3dc8fecdbc02975abe82d0"
-  integrity sha512-pEgctWuS/qeKMFZJJUM2JuKwjKBt27ye+216ft7xhNqpsrmCgumJYrkU/ii2CsFJU/qr5Fu9EYw+N+vof1OalQ==
+"@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.4"
+    "@storybook/csf-tools" "8.0.9"
     unplugin "^1.3.1"
 
-"@storybook/csf-tools@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-8.0.4.tgz#8322a3310d411a16a19efb36127aec5afdd3b298"
-  integrity sha512-dMSZxWnXBhmXGOZZOAJ4DKZRCYdA0HaqqZ4/eF9MLLsI+qvW4EklcpjVY6bsIzACgubRWtRZkTpxTnjExi/N1A==
+"@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.4"
+    "@storybook/csf" "^0.1.4"
+    "@storybook/types" "8.0.9"
     fs-extra "^11.1.0"
     recast "^0.23.5"
     ts-dedent "^2.0.0"
@@ -2431,10 +2463,10 @@
   dependencies:
     lodash "^4.17.15"
 
-"@storybook/csf@^0.1.2":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.1.3.tgz#79047a4dece94ba7c8e78003723e9bd9e071379a"
-  integrity sha512-IPZvXXo4b3G+gpmgBSBqVM81jbp2ePOKsvhgJdhyZJtkYQCII7rg9KKLQhvBQM5sLaF1eU6r0iuwmyynC9d9SA==
+"@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==
   dependencies:
     type-fest "^2.19.0"
 
@@ -2443,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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-8.0.4.tgz#24ebbca47d4075041376c356a5c4d0902f832991"
-  integrity sha512-PONfG8j/AOHi79NbEkneFRZIscrShbA0sgA+62zeejH4r9+fuIkIKtLnKcAxvr8Bm6uo9aSQbISJZUcBG42WhQ==
+"@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.4"
-    "@storybook/preview-api" "8.0.4"
-    "@storybook/types" "8.0.4"
+    "@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"
@@ -2466,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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/instrumenter/-/instrumenter-8.0.4.tgz#ab91a068e9ab5af2a5bafd3377e58513193ca2e7"
-  integrity sha512-lkHv1na12oMTZvuDbzufgqrtFlV1XqdXrAAg7YXZOia/oMz6Z/XMldEqwLPUCLGVodbFJofrpE67Wtw8dNTDQg==
+"@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.4"
-    "@storybook/client-logger" "8.0.4"
-    "@storybook/core-events" "8.0.4"
+    "@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.4"
+    "@storybook/preview-api" "8.0.9"
     "@vitest/utils" "^1.3.1"
     util "^0.12.4"
 
-"@storybook/manager-api@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-8.0.4.tgz#46bea1b3b65e3085adad77eb2de29a0d5706ed95"
-  integrity sha512-TudiRmWlsi8kdjwqW0DDLen76Zp4Sci/AnvTbZvZOWe8C2mruxcr6aaGwuIug6y+uxIyXDvURF6Cek5Twz4isg==
+"@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.4"
-    "@storybook/client-logger" "8.0.4"
-    "@storybook/core-events" "8.0.4"
-    "@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.4"
-    "@storybook/theming" "8.0.4"
-    "@storybook/types" "8.0.4"
+    "@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"
@@ -2500,27 +2533,27 @@
     telejson "^7.2.0"
     ts-dedent "^2.0.0"
 
-"@storybook/manager@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-8.0.4.tgz#94c4b27ada34f6d3004b86b6e028a9caf71e7c02"
-  integrity sha512-M5IofDSxbIQIdAglxUtZOGKjZ1EAq1Mdbh4UolVsF1PKF6dAvBQJLVW6TiLjEbmPBtqgeYKMgrmmYiFNqVcdBQ==
-
-"@storybook/node-logger@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-8.0.4.tgz#0701a71dfc0bcfa178e7175a00aadd78b965629c"
-  integrity sha512-cALLHuX53vLQsoJamGRlquh2pfhPq9copXou2JTmFT6mrCcipo77SzhBDfeeuhaGv6vUWPfmGjPBEHXWGPe4+g==
-
-"@storybook/preview-api@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-8.0.4.tgz#523e6cb7333b2953cd0b68d43c292e391d5b1337"
-  integrity sha512-uZCgZ/7BZkFTNudCBWx3YPFVdReMQSZJj9EfQVhQaPmfGORHGMvZMRsQXl0ONhPy7zDD4rVQxu5dSKWmIiYoWQ==
-  dependencies:
-    "@storybook/channels" "8.0.4"
-    "@storybook/client-logger" "8.0.4"
-    "@storybook/core-events" "8.0.4"
-    "@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.4"
+    "@storybook/types" "8.0.9"
     "@types/qs" "^6.9.5"
     dequal "^2.0.2"
     lodash "^4.17.21"
@@ -2530,97 +2563,96 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/preview@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-8.0.4.tgz#d1ffc175390bd400c5e41b1d0576c9d58c11a81d"
-  integrity sha512-dJa13bIxQBfa5ZsXAeL6X/oXI6b87Fy31pvpKPkW1o+7M6MC4OvwGQBqgAd7m8yn6NuIHxrdwjEupa7l7PGb6w==
+"@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-8.0.4.tgz#c935e52f7f7df899232872de7c364c8e25b52713"
-  integrity sha512-H8bci23e+G40WsdYPuPrhAjCeeXypXuAV6mTVvLHGKH+Yb+3wiB1weaXrot/TgzPbkDNybuhTI3Qm48FPLt0bw==
+"@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-8.0.4.tgz#37eb06023e74703703f3c93f4b4d1bbfe38e50c0"
-  integrity sha512-hlR80QvmLBflAqMeGcgtDuSe6TJlzdizwEAkBLE1lDvFI6tvvEyAliCAXBpIDdOZTe0u/zeeJkOUXKSx33caoQ==
+"@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.4"
+    "@storybook/client-logger" "8.0.9"
     memoizerific "^1.11.3"
     qs "^6.10.0"
 
-"@storybook/telemetry@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-8.0.4.tgz#39a39b372db7173e04d61092e27603c377f9c66a"
-  integrity sha512-Q3ITY6J46R/TrrPRIU1fs3WNs69ExpTJZ9UlB8087qOUyV90Ex33SYk3i10xVWRczxCmyC1V58Xuht6nxz7mNQ==
+"@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.4"
-    "@storybook/core-common" "8.0.4"
-    "@storybook/csf-tools" "8.0.4"
+    "@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/test/-/test-8.0.4.tgz#62806e71e11f881f80847f67f3db2214907b6eb4"
-  integrity sha512-/uvE8Rtu7tIcuyQBUzKq7uuDCsjmADI18BApLdwo/qthmN8ERDxRSz0Ngj2gvBMQFv99At8ESi/xh6oFGu3rWg==
+"@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.4"
-    "@storybook/core-events" "8.0.4"
-    "@storybook/instrumenter" "8.0.4"
-    "@storybook/preview-api" "8.0.4"
+    "@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.0.4.tgz#e72aa3b5d27d3db5ed769782ac91d6fdcb1c830e"
-  integrity sha512-NxtTU2wMC0lj375ejoT3Npdcqwv6NeUpLaJl6EZCMXSR41ve9WG4suUNWQ63olhqKxirjzAz0IL7ggH7c3hPvA==
+"@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.4"
+    "@storybook/client-logger" "8.0.9"
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
 
-"@storybook/types@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-8.0.4.tgz#650d87808ecab4ba7325fecef5a6f63ac6226f27"
-  integrity sha512-OO7QY+qZFCYkItDUBACtIV32p75O7sNziAiyS1V2Oxgo7Ln7fwZwr3mJcA1ruBed6ZcrW3c87k7Xs40T2zAWcg==
+"@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.4"
+    "@storybook/channels" "8.0.9"
     "@types/express" "^4.7.0"
     file-system-cache "2.3.0"
 
-"@storybook/web-components-vite@8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/web-components-vite/-/web-components-vite-8.0.4.tgz#87c55a4c8ca1f9949312358f9710b774c03f0bb5"
-  integrity sha512-ysUgEskK2Ltn60zjZxCB1dEmdAu4s3AVGPT9kKdyE/SjCJbFbZ9kaKaevAU7cO1cbkcNdbzs6pDBxjRHr3gGrQ==
+"@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.4"
-    "@storybook/core-server" "8.0.4"
-    "@storybook/node-logger" "8.0.4"
-    "@storybook/web-components" "8.0.4"
+    "@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.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/web-components/-/web-components-8.0.4.tgz#e36230ed9a4746acfc9c98b9f710f6fa05874960"
-  integrity sha512-Xn6Lc6y6380cnkRkF8x5Vv6IGIPBz7GcB5bYa/r1WnElPbyQYDYPZwI5j+332m2gYunefM7Ya2YDZiINeCOkOg==
+"@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.4"
-    "@storybook/docs-tools" "8.0.4"
+    "@storybook/client-logger" "8.0.9"
+    "@storybook/docs-tools" "8.0.9"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "8.0.4"
-    "@storybook/preview-api" "8.0.4"
-    "@storybook/types" "8.0.4"
+    "@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"
 
@@ -2796,9 +2828,9 @@
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
 "@types/express-serve-static-core@^4.17.33":
-  version "4.17.43"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.43.tgz#10d8444be560cb789c4735aea5eac6e5af45df54"
-  integrity sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==
+  version "4.19.0"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.19.0.tgz#3ae8ab3767d98d0b682cda063c3339e1e86ccfaa"
+  integrity sha512-bGyep3JqPCRry1wq+O5n7oiBgGWmeIJXPjXXCo8EK0u8duZGSYar7cGqd3ML2JUsLGeB7fmc06KYo9fLGWqPvQ==
   dependencies:
     "@types/node" "*"
     "@types/qs" "*"
@@ -2864,16 +2896,11 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/json-schema@^7.0.12", "@types/json-schema@^7.0.9":
+"@types/json-schema@^7.0.15", "@types/json-schema@^7.0.9":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
-"@types/json5@^0.0.29":
-  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
-  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
-
 "@types/keygrip@*":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@types/keygrip/-/keygrip-1.0.6.tgz#1749535181a2a9b02ac04a797550a8787345b740"
@@ -2913,14 +2940,9 @@
     "@types/unist" "^2"
 
 "@types/mdx@^2.0.0":
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.12.tgz#38db34cc8999b982beaec01399620bee6c65ef2e"
-  integrity sha512-H9VZ9YqE+H28FQVchC83RCs5xQ2J7mAAv6qdDEaWmXEVl3OpdH+xfrSUzQ1lp7U7oSTRZ0RvW08ASPJsYBi7Cw==
-
-"@types/mime@*":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.4.tgz#2198ac274de6017b44d941e00261d5bc6a0e0a45"
-  integrity sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.13.tgz#68f6877043d377092890ff5b298152b0a21671bd"
+  integrity sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==
 
 "@types/mime@^1":
   version "1.3.5"
@@ -2932,12 +2954,7 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
-"@types/minimist@^1.2.0":
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.5.tgz#ec10755e871497bcd83efe927e43ec46e8c0747e"
-  integrity sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==
-
-"@types/mocha@^10.0.4":
+"@types/mocha@10.0.6":
   version "10.0.6"
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.6.tgz#818551d39113081048bdddbef96701b4e8bb9d1b"
   integrity sha512-dJvrYWxP/UcXm36Qn36fxhUKu8A/xMRXVT2cliFF1Z7UA9liG5Psj3ezNSZw+5puH2czDXRLcXQxf8JbJt0ejg==
@@ -2947,10 +2964,10 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
   integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
 
-"@types/node@*", "@types/node@20.11.30", "@types/node@^16.0.0", "@types/node@^18.0.0":
-  version "20.11.30"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.30.tgz#9c33467fc23167a347e73834f788f4b9f399d66f"
-  integrity sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==
+"@types/node@*", "@types/node@20.12.7", "@types/node@^16.0.0", "@types/node@^18.0.0":
+  version "20.12.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.7.tgz#04080362fa3dd6c5822061aa3124f5c152cff384"
+  integrity sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==
   dependencies:
     undici-types "~5.26.4"
 
@@ -2975,35 +2992,26 @@
   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"
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react-dom@^18.2.15":
-  version "18.2.22"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.22.tgz#d332febf0815403de6da8a97e5fe282cbe609bae"
-  integrity sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==
+"@types/react-dom@18.2.25":
+  version "18.2.25"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.25.tgz#2946a30081f53e7c8d585eb138277245caedc521"
+  integrity sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0":
-  version "18.2.69"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.69.tgz#313ec21891b22bb7646a54cb4bdb8cddb0880271"
-  integrity sha512-W1HOMUWY/1Yyw0ba5TkCV+oqynRjG7BnteBB+B7JmAK7iw3l2SW+VGOxL+akPweix6jk2NNJtyJKpn4TkpfK3Q==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@18.2.72":
-  version "18.2.72"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.72.tgz#3341a6d0746d1c7d8510810319323850c04bd6ed"
-  integrity sha512-/e7GWxGzXQF7OJAua7UAYqYi/4VpXEfbGtmYQcAQwP3SjjjAXfybTf/JK5S+SaetB/ChXl8Y2g1hCsj7jDXxcg==
+"@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==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
@@ -3013,12 +3021,7 @@
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
   integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==
 
-"@types/scheduler@*":
-  version "0.16.8"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
-  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
-
-"@types/semver@^7.3.12", "@types/semver@^7.3.4", "@types/semver@^7.5.0":
+"@types/semver@^7.3.12", "@types/semver@^7.3.4", "@types/semver@^7.5.8":
   version "7.5.8"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
   integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
@@ -3032,13 +3035,13 @@
     "@types/node" "*"
 
 "@types/serve-static@*":
-  version "1.15.5"
-  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.5.tgz#15e67500ec40789a1e8c9defc2d32a896f05b033"
-  integrity sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==
+  version "1.15.7"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.7.tgz#22174bbd74fb97fe303109738e9b5c2f3064f714"
+  integrity sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==
   dependencies:
     "@types/http-errors" "*"
-    "@types/mime" "*"
     "@types/node" "*"
+    "@types/send" "*"
 
 "@types/sinon-chai@^3.2.3":
   version "3.2.12"
@@ -3094,32 +3097,32 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/eslint-plugin@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.4.0.tgz#de61c3083842fc6ac889d2fc83c9a96b55ab8328"
-  integrity sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==
+"@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.5.1"
-    "@typescript-eslint/scope-manager" "7.4.0"
-    "@typescript-eslint/type-utils" "7.4.0"
-    "@typescript-eslint/utils" "7.4.0"
-    "@typescript-eslint/visitor-keys" "7.4.0"
+    "@eslint-community/regexpp" "^4.10.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.2.4"
+    ignore "^5.3.1"
     natural-compare "^1.4.0"
-    semver "^7.5.4"
-    ts-api-utils "^1.0.1"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
 
-"@typescript-eslint/parser@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.4.0.tgz#540f4321de1e52b886c0fa68628af1459954c1f1"
-  integrity sha512-ZvKHxHLusweEUVwrGRXXUVzFgnWhigo4JurEj0dGF1tbcGh6buL+ejDdjxOQxv6ytcY1uhun1p2sm8iWStlgLQ==
+"@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.4.0"
-    "@typescript-eslint/types" "7.4.0"
-    "@typescript-eslint/typescript-estree" "7.4.0"
-    "@typescript-eslint/visitor-keys" "7.4.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":
@@ -3130,40 +3133,48 @@
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
 
-"@typescript-eslint/scope-manager@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.4.0.tgz#acfc69261f10ece7bf7ece1734f1713392c3655f"
-  integrity sha512-68VqENG5HK27ypafqLVs8qO+RkNc7TezCduYrx8YJpXq2QGZ30vmNZGJJJC48+MVn4G2dCV8m5ZTVnzRexTVtw==
+"@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"
+  integrity sha512-/8INDn0YLInbe9Wt7dK4cXLDYp0fNHP5xKLHvZl3mOT5X17rK/YShXaiNmorl+/U4VKCVIjJnx4Ri5b0y+HClw==
   dependencies:
-    "@typescript-eslint/types" "7.4.0"
-    "@typescript-eslint/visitor-keys" "7.4.0"
+    "@typescript-eslint/types" "7.7.0"
+    "@typescript-eslint/visitor-keys" "7.7.0"
 
-"@typescript-eslint/type-utils@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.4.0.tgz#cfcaab21bcca441c57da5d3a1153555e39028cbd"
-  integrity sha512-247ETeHgr9WTRMqHbbQdzwzhuyaJ8dPTuyuUEMANqzMRB1rj/9qFIuIXK7l0FX9i9FXbHeBQl/4uz6mYuCE7Aw==
+"@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.4.0"
-    "@typescript-eslint/utils" "7.4.0"
-    debug "^4.3.4"
-    ts-api-utils "^1.0.1"
+    "@typescript-eslint/types" "7.7.1"
+    "@typescript-eslint/visitor-keys" "7.7.1"
 
-"@typescript-eslint/types@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72"
-  integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==
+"@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"
 
 "@typescript-eslint/types@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
   integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
 
-"@typescript-eslint/types@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.4.0.tgz#ee9dafa75c99eaee49de6dcc9348b45d354419b6"
-  integrity sha512-mjQopsbffzJskos5B4HmbsadSJQWaRK0UxqQ7GuNA9Ga4bEKeiO6b2DnB6cM6bpc8lemaPseh0H9B/wyg+J7rw==
+"@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/typescript-estree@5.62.0", "@typescript-eslint/typescript-estree@^5.55.0":
+"@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"
   integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
@@ -3176,45 +3187,46 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.4.0.tgz#12dbcb4624d952f72c10a9f4431284fca24624f4"
-  integrity sha512-A99j5AYoME/UBQ1ucEbbMEmGkN7SE0BvZFreSnTd1luq7yulcHdyGamZKizU7canpGDWGJ+Q6ZA9SyQobipePg==
+"@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.4.0"
-    "@typescript-eslint/visitor-keys" "7.4.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"
-    minimatch "9.0.3"
-    semver "^7.5.4"
-    ts-api-utils "^1.0.1"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
 
-"@typescript-eslint/typescript-estree@^4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609"
-  integrity sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==
+"@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" "4.33.0"
-    "@typescript-eslint/visitor-keys" "4.33.0"
-    debug "^4.3.1"
-    globby "^11.0.3"
-    is-glob "^4.0.1"
-    semver "^7.3.5"
-    tsutils "^3.21.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"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
 
-"@typescript-eslint/utils@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.4.0.tgz#d889a0630cab88bddedaf7c845c64a00576257bd"
-  integrity sha512-NQt9QLM4Tt8qrlBVY9lkMYzfYtNz8/6qwZg8pI3cMGlPnj6mOpRxxAm7BMJN9K0AiY+1BwJ5lVC650YJqYOuNg==
+"@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.12"
-    "@types/semver" "^7.5.0"
-    "@typescript-eslint/scope-manager" "7.4.0"
-    "@typescript-eslint/types" "7.4.0"
-    "@typescript-eslint/typescript-estree" "7.4.0"
-    semver "^7.5.4"
+    "@types/json-schema" "^7.0.15"
+    "@types/semver" "^7.5.8"
+    "@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":
   version "5.62.0"
@@ -3230,13 +3242,18 @@
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
-"@typescript-eslint/visitor-keys@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
-  integrity sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==
+"@typescript-eslint/utils@^7.4.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==
   dependencies:
-    "@typescript-eslint/types" "4.33.0"
-    eslint-visitor-keys "^2.0.0"
+    "@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"
+    semver "^7.6.0"
 
 "@typescript-eslint/visitor-keys@5.62.0":
   version "5.62.0"
@@ -3246,15 +3263,23 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/visitor-keys@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.4.0.tgz#0c8ff2c1f8a6fe8d7d1a57ebbd4a638e86a60a94"
-  integrity sha512-0zkC7YM0iX5Y41homUUeW1CHtZR01K3ybjM1l6QczoMuay0XKtrb93kv95AxUGwdjGr64nNqnOCwmEl616N8CA==
+"@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"
+  integrity sha512-h0WHOj8MhdhY8YWkzIF30R379y0NqyOHExI9N9KCzvmu05EgG4FumeYa3ccfKUSphyWkWQE1ybVrgz/Pbam6YA==
   dependencies:
-    "@typescript-eslint/types" "7.4.0"
-    eslint-visitor-keys "^3.4.1"
+    "@typescript-eslint/types" "7.7.0"
+    eslint-visitor-keys "^3.4.3"
 
-"@ungap/structured-clone@^1.0.0", "@ungap/structured-clone@^1.2.0":
+"@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"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
@@ -3276,9 +3301,9 @@
     tinyspy "^2.2.0"
 
 "@vitest/spy@^1.3.1":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-1.4.0.tgz#cf953c93ae54885e801cbe6b408a547ae613f26c"
-  integrity sha512-Ywau/Qs1DzM/8Uc+yA77CwSegizMlcgTJuYGAi0jujOteJOUf1ujunHThYo243KG9nAyWT3L9ifPYZ5+As/+6Q==
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-1.5.0.tgz#1369a1bec47f46f18eccfa45f1e8fbb9b5e15e77"
+  integrity sha512-vu6vi6ew5N5MMHJjD5PoakMRKYdmIrNJmyfkhRpQt5d9Ewhw9nZ5Aqynbi3N61bvk9UvZ5UysMT6ayIrZ8GA9w==
   dependencies:
     tinyspy "^2.2.0"
 
@@ -3293,9 +3318,9 @@
     pretty-format "^29.7.0"
 
 "@vitest/utils@^1.3.1":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-1.4.0.tgz#ea6297e0d329f9ff0a106f4e1f6daf3ff6aad3f0"
-  integrity sha512-mx3Yd1/6e2Vt/PUC98DcqTirtfxUyAZ32uK82r8rZzbtBeBo+nqgnjx/LvqQdWsrvNtm14VmurNgcf4nqY5gJg==
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-1.5.0.tgz#90c9951f4516f6d595da24876b58e615f6c99863"
+  integrity sha512-BDU0GNL8MWkRkSRdNFvCUCAVOeHaUlVJ9Tx0TYBZyXaaOTmGtUFObzchCivIBrIwKzvZA7A9sCejVhXM2aY98A==
   dependencies:
     diff-sequences "^29.6.3"
     estree-walker "^3.0.3"
@@ -3329,26 +3354,26 @@
   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.26":
+"@vue/language-core@1.8.27", "@vue/language-core@^1.8.27":
   version "1.8.27"
   resolved "https://registry.yarnpkg.com/@vue/language-core/-/language-core-1.8.27.tgz#2ca6892cb524e024a44e554e4c55d7a23e72263f"
   integrity sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==
@@ -3363,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"
@@ -3455,9 +3480,9 @@
     whatwg-url "^11.0.0"
 
 "@web/dev-server@^0.4.0":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@web/dev-server/-/dev-server-0.4.3.tgz#692d47d09c7859090cf747819bf5d9c220637da7"
-  integrity sha512-vf2ZVjdTj8ExrMSYagyHD+snRue9oRetynxd1p0P7ndEpZDKeNLYsvkJyo0pNU6moBxHmXnYeC5VrAT4E3+lNg==
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@web/dev-server/-/dev-server-0.4.4.tgz#c31ad8eaa9c7d5e74707140a5de5c4797531343c"
+  integrity sha512-Gye0DhDbst/KVNRCFzRd+4V9LJmuuQYJBsf6UXeEbCYuBSKeshEW4AA1esLsfy1gONsD6NIGiru5509l35P9Ug==
   dependencies:
     "@babel/code-frame" "^7.12.11"
     "@types/command-line-args" "^5.0.0"
@@ -3667,7 +3692,7 @@
     "@types/emscripten" "^1.39.6"
     tslib "^1.13.0"
 
-JSONStream@^1.0.4, JSONStream@^1.3.5:
+JSONStream@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
   integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
@@ -3707,25 +3732,20 @@ acorn@^7.0.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.11.3, acorn@^8.9.0:
+acorn@^8.11.3:
   version "8.11.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
 
-add-stream@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
-  integrity sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==
-
 address@^1.0.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
   integrity sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==
 
-agent-base@^7.0.2, agent-base@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.0.tgz#536802b76bc0b34aa50195eb2442276d613e3434"
-  integrity sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==
+agent-base@^7.0.2, agent-base@^7.1.0, agent-base@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.1.tgz#bdbded7dfb096b751a2a087eeeb9664725b2e317"
+  integrity sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==
   dependencies:
     debug "^4.3.4"
 
@@ -3974,11 +3994,6 @@ arraybuffer.prototype.slice@^1.0.3:
     is-array-buffer "^3.0.4"
     is-shared-array-buffer "^1.0.2"
 
-arrify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
-  integrity sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==
-
 assert@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/assert/-/assert-2.1.0.tgz#6d92a238d05dc02e7427c881fb8be81c8448b2dd"
@@ -3995,20 +4010,10 @@ assertion-error@^1.1.0:
   resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
   integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
 
-ast-module-types@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/ast-module-types/-/ast-module-types-2.7.1.tgz#3f7989ef8dfa1fdb82dfe0ab02bdfc7c77a57dd3"
-  integrity sha512-Rnnx/4Dus6fn7fTqdeLEAn5vUll5w7/vts0RN608yFa6si/rDOUonlIIiwugHBFWjylHjxm9owoSZn71KwG4gw==
-
-ast-module-types@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ast-module-types/-/ast-module-types-3.0.0.tgz#9a6d8a80f438b6b8fe4995699d700297f398bf81"
-  integrity sha512-CMxMCOCS+4D+DkOQfuZf+vLrSEmY/7xtORwdxs4wtcC1wVgvk2MqFFTwQCFhvWsI4KPU9lcWXPI8DgRiz+xetQ==
-
-ast-module-types@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/ast-module-types/-/ast-module-types-4.0.0.tgz#17e1cadd5b5b108e7295b0cf0cff21ccc226b639"
-  integrity sha512-Kd0o8r6CDazJGCRzs8Ivpn0xj19oNKrULhoJFzhGjRsLpekF2zyZs9Ukz+JvZhWD6smszfepakTFhAaYpsI12g==
+ast-module-types@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ast-module-types/-/ast-module-types-5.0.0.tgz#32b2b05c56067ff38e95df66f11d6afd6c9ba16b"
+  integrity sha512-JvqziE0Wc0rXQfma0HZC/aY7URXHFuZV84fJRtP8u+lhp0JYCNd5wJzVXP45t0PH0Mej3ynlzvdyITYIu0G4LQ==
 
 ast-types@^0.13.4:
   version "0.13.4"
@@ -4056,9 +4061,9 @@ available-typed-arrays@^1.0.7:
     possible-typed-array-names "^1.0.0"
 
 axe-core@^4.2.0, axe-core@^4.3.3:
-  version "4.8.4"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.8.4.tgz#90db39a2b316f963f00196434d964e6e23648643"
-  integrity sha512-CZLSKisu/bhJ2awW4kJndluz2HLZYIHh5Uy1+ZwDRkJi69811xgIXXfdU9HSLX0Th+ILrHj8qfL/5wzamsFtQg==
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.9.0.tgz#b18971494551ab39d4ff5f7d4c6411bd20cc7c2a"
+  integrity sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==
 
 b4a@^1.6.4:
   version "1.6.6"
@@ -4115,24 +4120,23 @@ bare-events@^2.0.0, bare-events@^2.2.0:
   integrity sha512-h7z00dWdG0PYOQEvChhOSWvOfkIKsdZGkWr083FgN/HyoQuebSew/cgirYqh9SCuy/hRvxc5Vy6Fw8xAmYHLkQ==
 
 bare-fs@^2.1.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/bare-fs/-/bare-fs-2.2.2.tgz#286bf54cc6f15f613bee6bb26f0c61c79fb14f06"
-  integrity sha512-X9IqgvyB0/VA5OZJyb5ZstoN62AzD7YxVGog13kkfYWYqJYcK0kcqLZ6TrmH5qr4/8//ejVcX4x/a0UvaogXmA==
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/bare-fs/-/bare-fs-2.2.3.tgz#34f8b81b8c79de7ef043383c05e57d4a10392a68"
+  integrity sha512-amG72llr9pstfXOBOHve1WjiuKKAMnebcmMbPWDZ7BCevAoJLpugjuAPRsDINEyjT0a6tbaVx3DctkXIRbLuJw==
   dependencies:
     bare-events "^2.0.0"
-    bare-os "^2.0.0"
     bare-path "^2.0.0"
     streamx "^2.13.0"
 
-bare-os@^2.0.0, bare-os@^2.1.0:
+bare-os@^2.1.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/bare-os/-/bare-os-2.2.1.tgz#c94a258c7a408ca6766399e44675136c0964913d"
   integrity sha512-OwPyHgBBMkhC29Hl3O4/YfxW9n7mdTr2+SsO29XBWKKJsbgj3mnorDB80r5TiCQgQstgE5ga1qNYrpes6NvX2w==
 
 bare-path@^2.0.0, bare-path@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/bare-path/-/bare-path-2.1.0.tgz#830f17fd39842813ca77d211ebbabe238a88cb4c"
-  integrity sha512-DIIg7ts8bdRKwJRJrUMy/PICEaQZaPGZ26lsSx9MJSwIhSrcdHn7/C8W+XmnG/rKi6BaRcz+JO00CjZteybDtw==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bare-path/-/bare-path-2.1.1.tgz#111db5bf2db0aed40081aa4ba38b8dfc2bb782eb"
+  integrity sha512-OHM+iwRDRMDBsSW7kl3dO62JyHdBKO3B25FB9vNQBPcGHMo4+eA8Yj41Lfbk3pS/seDY+siNge0LdRTulAau/A==
   dependencies:
     bare-os "^2.1.0"
 
@@ -4303,29 +4307,15 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camelcase-keys@^6.2.2:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
-  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
-  dependencies:
-    camelcase "^5.3.1"
-    map-obj "^4.0.0"
-    quick-lru "^4.0.1"
-
-camelcase@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-
 camelcase@^6.2.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001587:
-  version "1.0.30001600"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz#93a3ee17a35aa6a9f0c6ef1b2ab49507d1ab9079"
-  integrity sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==
+  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"
@@ -4344,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==
@@ -4397,7 +4387,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
+chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -4472,10 +4462,10 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-chromatic@11.2.0:
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.2.0.tgz#6c0166b4213132e3d1ea44f592e7e67e2ca22ad7"
-  integrity sha512-b7vzlMuy/68WnH0N6nXpo8FiFK5pEF0ClIyVVK9YfYYSbGLo5/6Lh/VEbjWMoRaShCUk59YSXA43Npa2NrXIsg==
+chromatic@11.3.0:
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.3.0.tgz#d46b7aac1a0eaed29a765645eaf93c484220174c"
+  integrity sha512-q1ZtJDJrjLGnz60ivpC16gmd7KFzcaA4eTb7gcytCqbaKqlHhCFr1xQmcUDsm14CK7JsqdkFU6S+JQdOd2ZNJg==
 
 chrome-launcher@^0.15.0:
   version "0.15.2"
@@ -4487,10 +4477,10 @@ chrome-launcher@^0.15.0:
     is-wsl "^2.2.0"
     lighthouse-logger "^1.0.0"
 
-chromium-bidi@0.5.13:
-  version "0.5.13"
-  resolved "https://registry.yarnpkg.com/chromium-bidi/-/chromium-bidi-0.5.13.tgz#e16512d77b161f2f92da91a48ea2ec4185668549"
-  integrity sha512-OHbYCetDxdW/xmlrafgOiLsIrw4Sp1BEeolbZ1UGJO5v/nekQOJBj/Kzyw6sqKcAVabUTo0GS3cTYgr6zIf00g==
+chromium-bidi@0.5.17:
+  version "0.5.17"
+  resolved "https://registry.yarnpkg.com/chromium-bidi/-/chromium-bidi-0.5.17.tgz#04b66fa77f9ab80234b72206e71fc2af96fd08c4"
+  integrity sha512-BqOuIWUgTPj8ayuBFJUYCCuwIcwjBsb3/614P7tt1bEPJ4i1M0kCdIl0Wi9xhtswBXnfO2bTpTMkHD71H8rJMg==
   dependencies:
     mitt "3.0.1"
     urlpattern-polyfill "10.0.0"
@@ -4544,23 +4534,6 @@ cli-truncate@^4.0.0:
     slice-ansi "^5.0.0"
     string-width "^7.0.0"
 
-cli@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cli/-/cli-1.0.1.tgz#22817534f24bfa4950c34d532d48ecbc621b8c14"
-  integrity sha512-41U72MB56TfUMGndAKK8vJ78eooOD4Z5NOL4xEfjc0c23s+6EYKXlXsmACBVclLP1yOfWCgEganVzddVrSNoTg==
-  dependencies:
-    exit "0.1.2"
-    glob "^7.1.1"
-
-cliui@^7.0.2:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
-  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^7.0.0"
-
 cliui@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
@@ -4638,11 +4611,6 @@ colorette@^2.0.20:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
-colors@~1.2.1:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.2.5.tgz#89c7ad9a374bc030df8013241f68136ed8835afc"
-  integrity sha512-erNRLao/Y3Fv54qUa0LBB+//Uf3YwMUmdJinN20yMXm9zdKKqH9wt7R9IIVZ+K7ShzfpLV/Zg8+VyrBJYB4lpg==
-
 command-line-args@5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/command-line-args/-/command-line-args-5.1.2.tgz#25908e573d2214bc23a8437e3df853b02dffa425"
@@ -4678,16 +4646,11 @@ commander@11.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-11.1.0.tgz#62fdce76006a68e5c1ab3314dc92e800eb83d906"
   integrity sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==
 
-commander@^10.0.0:
+commander@^10.0.0, commander@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
   integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
 
-commander@^2.16.0, commander@^2.20.3, commander@^2.8.1:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
 commander@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
@@ -4698,11 +4661,6 @@ commander@^7.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
-commander@^9.5.0:
-  version "9.5.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
-  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
-
 comment-parser@1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.2.4.tgz#489f3ee55dfd184a6e4bffb31baba284453cb760"
@@ -4751,28 +4709,11 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
-concat-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-2.0.0.tgz#414cf5af790a48c60ab9be4527d56d5e41133cb1"
-  integrity sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==
-  dependencies:
-    buffer-from "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^3.0.2"
-    typedarray "^0.0.6"
-
 consola@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/consola/-/consola-3.2.3.tgz#0741857aa88cfa0d6fd53f1cff0375136e98502f"
   integrity sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==
 
-console-browserify@1.1.x:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
-  integrity sha512-duS7VP5pvfsNLDvL1O4VOEbw37AI3A4ZUQYemvDlnpGrNu9tprR7BYWpDYwC0Xia0Zxz5ZupdiIrUp0GH1aXfg==
-  dependencies:
-    date-now "^0.1.4"
-
 content-disposition@0.5.4, content-disposition@~0.5.2:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
@@ -4785,14 +4726,6 @@ content-type@^1.0.4, content-type@~1.0.4, content-type@~1.0.5:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
 
-conventional-changelog-angular@^5.0.12:
-  version "5.0.13"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz#896885d63b914a70d4934b59d2fe7bde1832b28c"
-  integrity sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA==
-  dependencies:
-    compare-func "^2.0.0"
-    q "^1.5.1"
-
 conventional-changelog-angular@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-7.0.0.tgz#5eec8edbff15aa9b1680a8dcfbd53e2d7eb2ba7a"
@@ -4800,34 +4733,6 @@ conventional-changelog-angular@^7.0.0:
   dependencies:
     compare-func "^2.0.0"
 
-conventional-changelog-atom@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-2.0.8.tgz#a759ec61c22d1c1196925fca88fe3ae89fd7d8de"
-  integrity sha512-xo6v46icsFTK3bb7dY/8m2qvc8sZemRgdqLb/bjpBsH2UyOS8rKNTgcb5025Hri6IpANPApbXMg15QLb1LJpBw==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-codemirror@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-2.0.8.tgz#398e9530f08ce34ec4640af98eeaf3022eb1f7dc"
-  integrity sha512-z5DAsn3uj1Vfp7po3gpt2Boc+Bdwmw2++ZHa5Ak9k0UKsYAO5mH1UBTN0qSCuJZREIhX6WU4E1p3IW2oRCNzQw==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-config-spec@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-config-spec/-/conventional-changelog-config-spec-2.1.0.tgz#874a635287ef8b581fd8558532bf655d4fb59f2d"
-  integrity sha512-IpVePh16EbbB02V+UA+HQnnPIohgXvJRxHcS5+Uwk4AT5LjzCZJm5sp/yqs5C6KZJ1jMsV4paEV13BN1pvDuxQ==
-
-conventional-changelog-conventionalcommits@4.6.3, conventional-changelog-conventionalcommits@^4.5.0:
-  version "4.6.3"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-4.6.3.tgz#0765490f56424b46f6cb4db9135902d6e5a36dc2"
-  integrity sha512-LTTQV4fwOM4oLPad317V/QNQ1FY4Hju5qeBIM1uTHbrnCE+Eg4CdRZ3gO2pUeR+tzWdp80M2j3qFFEDWVqOV4g==
-  dependencies:
-    compare-func "^2.0.0"
-    lodash "^4.17.15"
-    q "^1.5.1"
-
 conventional-changelog-conventionalcommits@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-7.0.2.tgz#aa5da0f1b2543094889e8cf7616ebe1a8f5c70d5"
@@ -4835,119 +4740,6 @@ conventional-changelog-conventionalcommits@^7.0.2:
   dependencies:
     compare-func "^2.0.0"
 
-conventional-changelog-core@^4.2.1:
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-4.2.4.tgz#e50d047e8ebacf63fac3dc67bf918177001e1e9f"
-  integrity sha512-gDVS+zVJHE2v4SLc6B0sLsPiloR0ygU7HaDW14aNJE1v4SlqJPILPl/aJC7YdtRE4CybBf8gDwObBvKha8Xlyg==
-  dependencies:
-    add-stream "^1.0.0"
-    conventional-changelog-writer "^5.0.0"
-    conventional-commits-parser "^3.2.0"
-    dateformat "^3.0.0"
-    get-pkg-repo "^4.0.0"
-    git-raw-commits "^2.0.8"
-    git-remote-origin-url "^2.0.0"
-    git-semver-tags "^4.1.1"
-    lodash "^4.17.15"
-    normalize-package-data "^3.0.0"
-    q "^1.5.1"
-    read-pkg "^3.0.0"
-    read-pkg-up "^3.0.0"
-    through2 "^4.0.0"
-
-conventional-changelog-ember@^2.0.9:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-2.0.9.tgz#619b37ec708be9e74a220f4dcf79212ae1c92962"
-  integrity sha512-ulzIReoZEvZCBDhcNYfDIsLTHzYHc7awh+eI44ZtV5cx6LVxLlVtEmcO+2/kGIHGtw+qVabJYjdI5cJOQgXh1A==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-eslint@^3.0.9:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-3.0.9.tgz#689bd0a470e02f7baafe21a495880deea18b7cdb"
-  integrity sha512-6NpUCMgU8qmWmyAMSZO5NrRd7rTgErjrm4VASam2u5jrZS0n38V7Y9CzTtLT2qwz5xEChDR4BduoWIr8TfwvXA==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-express@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-2.0.6.tgz#420c9d92a347b72a91544750bffa9387665a6ee8"
-  integrity sha512-SDez2f3iVJw6V563O3pRtNwXtQaSmEfTCaTBPCqn0oG0mfkq0rX4hHBq5P7De2MncoRixrALj3u3oQsNK+Q0pQ==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-jquery@^3.0.11:
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jquery/-/conventional-changelog-jquery-3.0.11.tgz#d142207400f51c9e5bb588596598e24bba8994bf"
-  integrity sha512-x8AWz5/Td55F7+o/9LQ6cQIPwrCjfJQ5Zmfqi8thwUEKHstEn4kTIofXub7plf1xvFA2TqhZlq7fy5OmV6BOMw==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-jshint@^2.0.9:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-2.0.9.tgz#f2d7f23e6acd4927a238555d92c09b50fe3852ff"
-  integrity sha512-wMLdaIzq6TNnMHMy31hql02OEQ8nCQfExw1SE0hYL5KvU+JCTuPaDO+7JiogGT2gJAxiUGATdtYYfh+nT+6riA==
-  dependencies:
-    compare-func "^2.0.0"
-    q "^1.5.1"
-
-conventional-changelog-preset-loader@^2.3.4:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz#14a855abbffd59027fd602581f1f34d9862ea44c"
-  integrity sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==
-
-conventional-changelog-writer@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-5.0.1.tgz#e0757072f045fe03d91da6343c843029e702f359"
-  integrity sha512-5WsuKUfxW7suLblAbFnxAcrvf6r+0b7GvNaWUwUIk0bXMnENP/PEieGKVUQrjPqwPT4o3EPAASBXiY6iHooLOQ==
-  dependencies:
-    conventional-commits-filter "^2.0.7"
-    dateformat "^3.0.0"
-    handlebars "^4.7.7"
-    json-stringify-safe "^5.0.1"
-    lodash "^4.17.15"
-    meow "^8.0.0"
-    semver "^6.0.0"
-    split "^1.0.0"
-    through2 "^4.0.0"
-
-conventional-changelog@3.1.25:
-  version "3.1.25"
-  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-3.1.25.tgz#3e227a37d15684f5aa1fb52222a6e9e2536ccaff"
-  integrity sha512-ryhi3fd1mKf3fSjbLXOfK2D06YwKNic1nC9mWqybBHdObPd8KJ2vjaXZfYj1U23t+V8T8n0d7gwnc9XbIdFbyQ==
-  dependencies:
-    conventional-changelog-angular "^5.0.12"
-    conventional-changelog-atom "^2.0.8"
-    conventional-changelog-codemirror "^2.0.8"
-    conventional-changelog-conventionalcommits "^4.5.0"
-    conventional-changelog-core "^4.2.1"
-    conventional-changelog-ember "^2.0.9"
-    conventional-changelog-eslint "^3.0.9"
-    conventional-changelog-express "^2.0.6"
-    conventional-changelog-jquery "^3.0.11"
-    conventional-changelog-jshint "^2.0.9"
-    conventional-changelog-preset-loader "^2.3.4"
-
-conventional-commits-filter@^2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.7.tgz#f8d9b4f182fce00c9af7139da49365b136c8a0b3"
-  integrity sha512-ASS9SamOP4TbCClsRHxIHXRfcGCnIoQqkvAzCSbZzTFLfcTqJVugB0agRgsEELsqaeWgsXv513eS116wnlSSPA==
-  dependencies:
-    lodash.ismatch "^4.4.0"
-    modify-values "^1.0.0"
-
-conventional-commits-parser@^3.2.0:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-3.2.4.tgz#a7d3b77758a202a9b2293d2112a8d8052c740972"
-  integrity sha512-nK7sAtfi+QXbxHCYfhpZsfRtaitZLIA6889kFIouLvz6repszQDgxBu7wf2WbU+Dco7sAnNCJYERCwt54WPC2Q==
-  dependencies:
-    JSONStream "^1.0.4"
-    is-text-path "^1.0.1"
-    lodash "^4.17.15"
-    meow "^8.0.0"
-    split2 "^3.0.0"
-    through2 "^4.0.0"
-
 conventional-commits-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-5.0.0.tgz#57f3594b81ad54d40c1b4280f04554df28627d9a"
@@ -4958,20 +4750,6 @@ conventional-commits-parser@^5.0.0:
     meow "^12.0.1"
     split2 "^4.0.0"
 
-conventional-recommended-bump@6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/conventional-recommended-bump/-/conventional-recommended-bump-6.1.0.tgz#cfa623285d1de554012f2ffde70d9c8a22231f55"
-  integrity sha512-uiApbSiNGM/kkdL9GTOLAqC4hbptObFo4wW2QRyHsKciGAfQuLU1ShZ1BIVI/+K2BE/W1AWYQMCXAsv4dyKPaw==
-  dependencies:
-    concat-stream "^2.0.0"
-    conventional-changelog-preset-loader "^2.3.4"
-    conventional-commits-filter "^2.0.7"
-    conventional-commits-parser "^3.2.0"
-    git-raw-commits "^2.0.8"
-    git-semver-tags "^4.1.1"
-    meow "^8.0.0"
-    q "^1.5.1"
-
 convert-source-map@^1.5.1:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
@@ -5001,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"
 
@@ -5043,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"
@@ -5076,16 +4854,11 @@ custom-elements-manifest@1.0.0:
   resolved "https://registry.yarnpkg.com/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz#b35c2129076a1dc9f95d720c6f7b5b71a857274b"
   integrity sha512-j59k0ExGCKA8T6Mzaq+7axc+KVHwpEphEERU7VZ99260npu/p/9kd+Db+I3cGKxHkM5y6q5gnlXn00mzRQkX2A==
 
-custom-elements-manifest@^2.0.0:
+custom-elements-manifest@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/custom-elements-manifest/-/custom-elements-manifest-2.0.0.tgz#6b234f7a57c68ecda291ea70882555729617de6d"
   integrity sha512-1MmhBRszwnNYqn56nkMeHXn/Zlh998+6Yal3wedbXI7NzKPG02GDgjspdN1NiuDtt2yb5n94JvFwPOF7Prnocg==
 
-dargs@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
-  integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==
-
 dargs@^8.0.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-8.1.0.tgz#a34859ea509cbce45485e5aa356fef70bfcc7272"
@@ -5138,16 +4911,6 @@ date-fns@3.6.0:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
   integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
 
-date-now@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
-  integrity sha512-AsElvov3LoNB7tf5k37H2jYSB+ZZPMT5sG2QjJCcdlV5chIv6htBUBUui2IKRjgtKAKtCBN7Zbwa+MtwLjSeNw==
-
-dateformat@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
-  integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
-
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -5165,7 +4928,7 @@ debug@2.6.9, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@4.3.4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
+debug@4, debug@4.3.4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -5179,19 +4942,6 @@ debug@^3.1.0, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-decamelize-keys@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.1.tgz#04a2d523b2f18d80d0158a43b895d56dff8d19d8"
-  integrity sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==
-  dependencies:
-    decamelize "^1.1.0"
-    map-obj "^1.0.0"
-
-decamelize@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
-
 decode-named-character-reference@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
@@ -5336,16 +5086,15 @@ dependency-graph@^0.11.0:
   resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.11.0.tgz#ac0ce7ed68a54da22165a85e97a01d53f5eb2e27"
   integrity sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==
 
-dependency-tree@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/dependency-tree/-/dependency-tree-9.0.0.tgz#9288dd6daf35f6510c1ea30d9894b75369aa50a2"
-  integrity sha512-osYHZJ1fBSon3lNLw70amAXsQ+RGzXsPvk9HbBgTLbp/bQBmpH5mOmsUvqXU+YEWVU0ZLewsmzOET/8jWswjDQ==
+dependency-tree@^10.0.9:
+  version "10.0.9"
+  resolved "https://registry.yarnpkg.com/dependency-tree/-/dependency-tree-10.0.9.tgz#0c6c0dbeb0c5ec2cf83bf755f30e9cb12e7b4ac7"
+  integrity sha512-dwc59FRIsht+HfnTVM0BCjJaEWxdq2YAvEDy4/Hn6CwS3CBWMtFnL3aZGAkQn3XCYxk/YcTDE4jX2Q7bFTwCjA==
   dependencies:
-    commander "^2.20.3"
-    debug "^4.3.1"
-    filing-cabinet "^3.0.1"
-    precinct "^9.0.0"
-    typescript "^4.0.0"
+    commander "^10.0.1"
+    filing-cabinet "^4.1.6"
+    precinct "^11.0.5"
+    typescript "^5.0.4"
 
 dequal@^2.0.0, dequal@^2.0.2, dequal@^2.0.3:
   version "2.0.3"
@@ -5357,16 +5106,11 @@ destroy@1.2.0, destroy@^1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
-detect-indent@^6.0.0, detect-indent@^6.1.0:
+detect-indent@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
   integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
 
-detect-newline@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
-  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
-
 detect-package-manager@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/detect-package-manager/-/detect-package-manager-2.0.1.tgz#6b182e3ae5e1826752bfef1de9a7b828cffa50d8"
@@ -5382,76 +5126,32 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "4"
 
-detective-amd@^3.1.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/detective-amd/-/detective-amd-3.1.2.tgz#bf55eb5291c218b76d6224a3d07932ef13a9a357"
-  integrity sha512-jffU26dyqJ37JHR/o44La6CxtrDf3Rt9tvd2IbImJYxWKTMdBjctp37qoZ6ZcY80RHg+kzWz4bXn39e4P7cctQ==
-  dependencies:
-    ast-module-types "^3.0.0"
-    escodegen "^2.0.0"
-    get-amd-module-type "^3.0.0"
-    node-source-walk "^4.2.0"
-
-detective-amd@^4.0.1, detective-amd@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/detective-amd/-/detective-amd-4.2.0.tgz#21c43465669f06cf894eef047a27e6e72ba6bc13"
-  integrity sha512-RbuEJHz78A8nW7CklkqTzd8lDCN42En53dgEIsya0DilpkwslamSZDasLg8dJyxbw46OxhSQeY+C2btdSkCvQQ==
+detective-amd@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/detective-amd/-/detective-amd-5.0.2.tgz#579900f301c160efe037a6377ec7e937434b2793"
+  integrity sha512-XFd/VEQ76HSpym80zxM68ieB77unNuoMwopU2TFT/ErUk5n4KvUTwW4beafAVUugrjV48l4BmmR0rh2MglBaiA==
   dependencies:
-    ast-module-types "^4.0.0"
+    ast-module-types "^5.0.0"
     escodegen "^2.0.0"
-    get-amd-module-type "^4.1.0"
-    node-source-walk "^5.0.1"
-
-detective-cjs@^3.1.1:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/detective-cjs/-/detective-cjs-3.1.3.tgz#50e107d67b37f459b0ec02966ceb7e20a73f268b"
-  integrity sha512-ljs7P0Yj9MK64B7G0eNl0ThWSYjhAaSYy+fQcpzaKalYl/UoQBOzOeLCSFEY1qEBhziZ3w7l46KG/nH+s+L7BQ==
-  dependencies:
-    ast-module-types "^3.0.0"
-    node-source-walk "^4.0.0"
-
-detective-cjs@^4.0.0, detective-cjs@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/detective-cjs/-/detective-cjs-4.1.0.tgz#56b1558ca0910933c7fc47c740b957f0280ff302"
-  integrity sha512-QxzMwt5MfPLwS7mG30zvnmOvHLx5vyVvjsAV6gQOyuMoBR5G1DhS1eJZ4P10AlH+HSnk93mTcrg3l39+24XCtg==
-  dependencies:
-    ast-module-types "^4.0.0"
-    node-source-walk "^5.0.1"
-
-detective-es6@^2.2.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/detective-es6/-/detective-es6-2.2.2.tgz#ee5f880981d9fecae9a694007029a2f6f26d8d28"
-  integrity sha512-eZUKCUsbHm8xoeoCM0z6JFwvDfJ5Ww5HANo+jPR7AzkFpW9Mun3t/TqIF2jjeWa2TFbAiGaWESykf2OQp3oeMw==
-  dependencies:
-    node-source-walk "^4.0.0"
-
-detective-es6@^3.0.0, detective-es6@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/detective-es6/-/detective-es6-3.0.1.tgz#53a15fbb2f298c4a106d9fe7427da8a57162dde6"
-  integrity sha512-evPeYIEdK1jK3Oji5p0hX4sPV/1vK+o4ihcWZkMQE6voypSW/cIBiynOLxQk5KOOQbdP8oOAsYqouMTYO5l1sw==
-  dependencies:
-    node-source-walk "^5.0.0"
+    get-amd-module-type "^5.0.1"
+    node-source-walk "^6.0.1"
 
-detective-less@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/detective-less/-/detective-less-1.0.2.tgz#a68af9ca5f69d74b7d0aa190218b211d83b4f7e3"
-  integrity sha512-Rps1xDkEEBSq3kLdsdnHZL1x2S4NGDcbrjmd4q+PykK5aJwDdP5MBgrJw1Xo+kyUHuv3JEzPqxr+Dj9ryeDRTA==
+detective-cjs@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/detective-cjs/-/detective-cjs-5.0.1.tgz#836ad51c6de4863efc7c419ec243694f760ff8b2"
+  integrity sha512-6nTvAZtpomyz/2pmEmGX1sXNjaqgMplhQkskq2MLrar0ZAIkHMrDhLXkRiK2mvbu9wSWr0V5/IfiTrZqAQMrmQ==
   dependencies:
-    debug "^4.0.0"
-    gonzales-pe "^4.2.3"
-    node-source-walk "^4.0.0"
+    ast-module-types "^5.0.0"
+    node-source-walk "^6.0.0"
 
-detective-postcss@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/detective-postcss/-/detective-postcss-4.0.0.tgz#24e69b465e5fefe7a6afd05f7e894e34595dbf51"
-  integrity sha512-Fwc/g9VcrowODIAeKRWZfVA/EufxYL7XfuqJQFroBKGikKX83d2G7NFw6kDlSYGG3LNQIyVa+eWv1mqre+v4+A==
+detective-es6@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/detective-es6/-/detective-es6-4.0.1.tgz#38d5d49a6d966e992ef8f2d9bffcfe861a58a88a"
+  integrity sha512-k3Z5tB4LQ8UVHkuMrFOlvb3GgFWdJ9NqAa2YLUU/jTaWJIm+JJnEh4PsMc+6dfT223Y8ACKOaC0qcj7diIhBKw==
   dependencies:
-    debug "^4.1.1"
-    is-url "^1.2.4"
-    postcss "^8.1.7"
-    postcss-values-parser "^2.0.1"
+    node-source-walk "^6.0.1"
 
-detective-postcss@^6.1.0, detective-postcss@^6.1.1:
+detective-postcss@^6.1.3:
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/detective-postcss/-/detective-postcss-6.1.3.tgz#51a2d4419327ad85d0af071c7054c79fafca7e73"
   integrity sha512-7BRVvE5pPEvk2ukUWNQ+H2XOq43xENWbH0LcdCE14mwgTBEAMoAx+Fc1rdp76SmyZ4Sp48HlV7VedUnP6GA1Tw==
@@ -5460,72 +5160,36 @@ detective-postcss@^6.1.0, detective-postcss@^6.1.1:
     postcss "^8.4.23"
     postcss-values-parser "^6.0.2"
 
-detective-sass@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/detective-sass/-/detective-sass-3.0.2.tgz#e0f35aac79a4d2f6409c284d95b8f7ecd5973afd"
-  integrity sha512-DNVYbaSlmti/eztFGSfBw4nZvwsTaVXEQ4NsT/uFckxhJrNRFUh24d76KzoCC3aarvpZP9m8sC2L1XbLej4F7g==
-  dependencies:
-    gonzales-pe "^4.3.0"
-    node-source-walk "^4.0.0"
-
-detective-sass@^4.0.1, detective-sass@^4.1.1:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/detective-sass/-/detective-sass-4.1.3.tgz#6cdcc27ae8a90d15704e0ba83683048f77f10b75"
-  integrity sha512-xGRbwGaGte57gvEqM8B9GDiURY3El/H49vA6g9wFkxq9zalmTlTAuqWu+BsH0iwonGPruLt55tZZDEZqPc6lag==
+detective-sass@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/detective-sass/-/detective-sass-5.0.3.tgz#63e54bc9b32f4bdbd9d5002308f9592a3d3a508f"
+  integrity sha512-YsYT2WuA8YIafp2RVF5CEfGhhyIVdPzlwQgxSjK+TUm3JoHP+Tcorbk3SfG0cNZ7D7+cYWa0ZBcvOaR0O8+LlA==
   dependencies:
     gonzales-pe "^4.3.0"
-    node-source-walk "^5.0.1"
+    node-source-walk "^6.0.1"
 
-detective-scss@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/detective-scss/-/detective-scss-2.0.2.tgz#7d2a642616d44bf677963484fa8754d9558b8235"
-  integrity sha512-hDWnWh/l0tht/7JQltumpVea/inmkBaanJUcXRB9kEEXVwVUMuZd6z7eusQ6GcBFrfifu3pX/XPyD7StjbAiBg==
-  dependencies:
-    gonzales-pe "^4.3.0"
-    node-source-walk "^4.0.0"
-
-detective-scss@^3.0.0, detective-scss@^3.0.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/detective-scss/-/detective-scss-3.1.1.tgz#b49f05cadfb0837b04e23baba292581b7c7f65e1"
-  integrity sha512-FWkfru1jZBhUeuBsOeGKXKAVDrzYFSQFK2o2tuG/nCCFQ0U/EcXC157MNAcR5mmj+mCeneZzlkBOFJTesDjrww==
+detective-scss@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/detective-scss/-/detective-scss-4.0.3.tgz#79758baa0158f72bfc4481eb7e21cc3b5f1ea6eb"
+  integrity sha512-VYI6cHcD0fLokwqqPFFtDQhhSnlFWvU614J42eY6G0s8c+MBhi9QAWycLwIOGxlmD8I/XvGSOUV1kIDhJ70ZPg==
   dependencies:
     gonzales-pe "^4.3.0"
-    node-source-walk "^5.0.1"
-
-detective-stylus@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detective-stylus/-/detective-stylus-1.0.3.tgz#20a702936c9fd7d4203fd7a903314b5dd43ac713"
-  integrity sha512-4/bfIU5kqjwugymoxLXXLltzQNeQfxGoLm2eIaqtnkWxqbhap9puDVpJPVDx96hnptdERzS5Cy6p9N8/08A69Q==
-
-detective-stylus@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/detective-stylus/-/detective-stylus-2.0.1.tgz#d528dfa7ef3c4eb2fbc9a7249d54906ec4e05d09"
-  integrity sha512-/Tvs1pWLg8eYwwV6kZQY5IslGaYqc/GACxjcaGudiNtN5nKCH6o2WnJK3j0gA3huCnoQcbv8X7oz/c1lnvE3zQ==
+    node-source-walk "^6.0.1"
 
-detective-stylus@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/detective-stylus/-/detective-stylus-3.0.0.tgz#c869795a7d6df7043ab6aee8b1a6f3dd66764232"
-  integrity sha512-1xYTzbrduExqMYmte7Qk99IRA3Aa6oV7PYzd+3yDcQXkmENvyGF/arripri6lxRDdNYEb4fZFuHtNRAXbz3iAA==
-
-detective-typescript@^7.0.0:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/detective-typescript/-/detective-typescript-7.0.2.tgz#c6e00b4c28764741ef719662250e6b014a5f3c8e"
-  integrity sha512-unqovnhxzvkCz3m1/W4QW4qGsvXCU06aU2BAm8tkza+xLnp9SOFnob2QsTxUv5PdnQKfDvWcv9YeOeFckWejwA==
-  dependencies:
-    "@typescript-eslint/typescript-estree" "^4.33.0"
-    ast-module-types "^2.7.1"
-    node-source-walk "^4.2.0"
-    typescript "^3.9.10"
+detective-stylus@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detective-stylus/-/detective-stylus-4.0.0.tgz#ce97b6499becdc291de7b3c11df8c352c1eee46e"
+  integrity sha512-TfPotjhszKLgFBzBhTOxNHDsutIxx9GTWjrL5Wh7Qx/ydxKhwUrlSFeLIn+ZaHPF+h0siVBkAQSuy6CADyTxgQ==
 
-detective-typescript@^9.0.0, detective-typescript@^9.1.1:
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/detective-typescript/-/detective-typescript-9.1.1.tgz#b99c0122cbb35b39de2c5f58447f1e93ac28c6d5"
-  integrity sha512-Uc1yVutTF0RRm1YJ3g//i1Cn2vx1kwHj15cnzQP6ff5koNzQ0idc1zAC73ryaWEulA0ElRXFTq6wOqe8vUQ3MA==
+detective-typescript@^11.1.0:
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/detective-typescript/-/detective-typescript-11.2.0.tgz#5b1450b518cb84b6cfb98ea72d5edd9660668e1b"
+  integrity sha512-ARFxjzizOhPqs1fYC/2NMC3N4jrQ6HvVflnXBTRqNEqJuXwyKLRr9CrJwkRcV/SnZt1sNXgsF6FPm0x57Tq0rw==
   dependencies:
-    "@typescript-eslint/typescript-estree" "^5.55.0"
-    ast-module-types "^4.0.0"
-    node-source-walk "^5.0.1"
-    typescript "^4.9.5"
+    "@typescript-eslint/typescript-estree" "^5.62.0"
+    ast-module-types "^5.0.0"
+    node-source-walk "^6.0.2"
+    typescript "^5.4.4"
 
 devtools-protocol@0.0.1262051:
   version "0.0.1262051"
@@ -5582,39 +5246,6 @@ dom-accessibility-api@^0.6.3:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8"
   integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==
 
-dom-serializer@0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
-  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
-  dependencies:
-    domelementtype "^2.0.1"
-    entities "^2.0.0"
-
-domelementtype@1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
-  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
-
-domelementtype@^2.0.1:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
-  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
-
-domhandler@2.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738"
-  integrity sha512-q9bUwjfp7Eif8jWxxxPSykdRZAb6GkguBGSgvvCrhI9wB71W2K/Kvv4E61CF/mcCfnVJDeDWx/Vb/uAqbDj6UQ==
-  dependencies:
-    domelementtype "1"
-
-domutils@1.5:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
-  integrity sha512-gSu5Oi/I+3wDENBsOWBiRK1eoGxcywYSqg3rR960/+EfY0CF4EX1VPkgHOZ3WiS/Jg2DtliF6BhWcHlfpYUcGw==
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
 dot-prop@^5.1.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
@@ -5632,14 +5263,6 @@ dotenv@^16.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
   integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
 
-dotgitignore@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/dotgitignore/-/dotgitignore-2.1.0.tgz#a4b15a4e4ef3cf383598aaf1dfa4a04bcc089b7b"
-  integrity sha512-sCm11ak2oY6DglEPpCB8TixLjWAxd3kJTs6UIcSasNYxXdFPV+YKlye92c8H4kKFqV5qYMIh7d+cYecEg0dIkA==
-  dependencies:
-    find-up "^3.0.0"
-    minimatch "^3.0.4"
-
 duplexify@^3.5.0, duplexify@^3.6.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
@@ -5656,16 +5279,16 @@ ee-first@1.1.1:
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
 ejs@^3.1.8:
-  version "3.1.9"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.9.tgz#03c9e8777fe12686a9effcef22303ca3d8eeb361"
-  integrity sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.10.tgz#69ab8358b14e896f80cc39e62087b88500c3ac3b"
+  integrity sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==
   dependencies:
     jake "^10.8.5"
 
 electron-to-chromium@^1.4.668:
-  version "1.4.715"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.715.tgz#bb16bcf2a3537962fccfa746b5c98c5f7404ff46"
-  integrity sha512-XzWNH4ZSa9BwVUQSDorPWAUQ5WGuYz7zJUNpNif40zFCiCl20t8zgylmreNmn26h5kiyw2lg7RfTmeMBsDklqg==
+  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"
@@ -5689,7 +5312,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^5.10.0, enhanced-resolve@^5.8.3:
+enhanced-resolve@^5.10.0, enhanced-resolve@^5.12.0, enhanced-resolve@^5.14.1:
   version "5.16.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz#65ec88778083056cb32487faa9aef82ed0864787"
   integrity sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==
@@ -5697,16 +5320,6 @@ enhanced-resolve@^5.10.0, enhanced-resolve@^5.8.3:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-entities@1.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.0.0.tgz#b2987aa3821347fcde642b24fdfc9e4fb712bf26"
-  integrity sha512-LbLqfXgJMmy81t+7c14mnulFHJ170cM6E+0vMXR9k/ZiZwgX8i5pNgjTCX3SO4VeUsFLV+8InixoretwU+MjBQ==
-
-entities@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
-  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
-
 entities@^4.4.0, entities@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
@@ -5718,9 +5331,9 @@ env-paths@^2.2.1:
   integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
 
 envinfo@^7.7.3:
-  version "7.11.1"
-  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.11.1.tgz#2ffef77591057081b0129a8fd8cf6118da1b94e1"
-  integrity sha512-8PiZgZNIB4q/Lw4AhOvAfB/ityHAd2bli3lESSWmWSzSsl5dKpy5N1d1Rfkd2teq/g9xN90lc6o98DOjMeYHpg==
+  version "7.12.0"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.12.0.tgz#b56723b39c2053d67ea5714f026d05d4f5cc7acd"
+  integrity sha512-Iw9rQJBGpJRd3rwXm9ft/JiGoAZmLxxJZELYDQoPRZ4USVhkKtIcNBPw6U+/K2mBpaqM25JSV6Yl4Az9vO2wJg==
 
 error-ex@^1.3.1:
   version "1.3.2"
@@ -5735,9 +5348,9 @@ errorstacks@^2.2.0:
   integrity sha512-jE4i0SMYevwu/xxAuzhly/KTwtj0xDhbzB6m1xPImxTkw8wcCbgarOQPfCVMi5JKVyW7in29pNJCCJrry3Ynnw==
 
 es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.1, es-abstract@^1.23.2:
-  version "1.23.2"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.2.tgz#693312f3940f967b8dd3eebacb590b01712622e0"
-  integrity sha512-60s3Xv2T2p1ICykc7c+DNDPLDMm9t4QxCOUU0K9JxiLjM3C1zB9YVdN7tjxrFd4+AkZ8CdX1ovUga4P2+1e+/w==
+  version "1.23.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
+  integrity sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==
   dependencies:
     array-buffer-byte-length "^1.0.1"
     arraybuffer.prototype.slice "^1.0.3"
@@ -5778,11 +5391,11 @@ es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23
     safe-regex-test "^1.0.3"
     string.prototype.trim "^1.2.9"
     string.prototype.trimend "^1.0.8"
-    string.prototype.trimstart "^1.0.7"
+    string.prototype.trimstart "^1.0.8"
     typed-array-buffer "^1.0.2"
     typed-array-byte-length "^1.0.1"
     typed-array-byte-offset "^1.0.2"
-    typed-array-length "^1.0.5"
+    typed-array-length "^1.0.6"
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.15"
 
@@ -5839,9 +5452,9 @@ es-module-lexer@^0.9.3:
   integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
 
 es-module-lexer@^1.0.0:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.4.2.tgz#ba1a62255ff9b41023aaf9bd08c016a5f1a3fef3"
-  integrity sha512-7nOqkomXZEaxUDJw21XZNtRk739QvrPSoZoRtbsEfcii00vdzZUh6zh1CQwHhrib8MdEtJfv5rJiGeb4KuV/vw==
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.5.0.tgz#4878fee3789ad99e065f975fdd3c645529ff0236"
+  integrity sha512-pqrTKmwEIgafsYZAGw9kszYzmagcE/n4dbgwGWLEXg7J4QFJVQRBld8j3Q3GNez79jzxZshq0bcT962QHOghjw==
 
 es-object-atoms@^1.0.0:
   version "1.0.0"
@@ -5887,7 +5500,7 @@ esbuild-register@^3.5.0:
   dependencies:
     debug "^4.3.4"
 
-esbuild-sass-plugin@^3.1.0:
+esbuild-sass-plugin@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/esbuild-sass-plugin/-/esbuild-sass-plugin-3.2.0.tgz#9ea19331bda6f0c12ab75a7b829f7a2078a8c8c5"
   integrity sha512-a+e7rYx4sDHgtKWN2n6/7lH5fgfvJaT6AMHmFhBKZy2ZTSN91X5q12l+DNVYJ8cWViEjJNWEd7k7UVcCg/2S/Q==
@@ -5989,6 +5602,13 @@ escodegen@^2.0.0, escodegen@^2.1.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-compat-utils@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-compat-utils/-/eslint-compat-utils-0.5.0.tgz#f7b2eb2befec25a370fac76934d3f9189f312a65"
+  integrity sha512-dc6Y8tzEcSYZMHa+CMPLi/hyo1FzNeonbhJL7Ol0ccuKQkwopJcJBA9YL/xmMTLU1eKigXo9vj9nALElWYSowg==
+  dependencies:
+    semver "^7.5.4"
+
 eslint-config-prettier@9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
@@ -6003,26 +5623,39 @@ eslint-import-resolver-node@^0.3.9:
     is-core-module "^2.13.0"
     resolve "^1.22.4"
 
-eslint-module-utils@^2.8.0:
+eslint-import-resolver-typescript@3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz#7b983680edd3f1c5bce1a5829ae0bc2d57fe9efa"
+  integrity sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==
+  dependencies:
+    debug "^4.3.4"
+    enhanced-resolve "^5.12.0"
+    eslint-module-utils "^2.7.4"
+    fast-glob "^3.3.1"
+    get-tsconfig "^4.5.0"
+    is-core-module "^2.11.0"
+    is-glob "^4.0.3"
+
+eslint-module-utils@^2.7.4:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz#52f2404300c3bd33deece9d7372fb337cc1d7c34"
   integrity sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==
   dependencies:
     debug "^3.2.7"
 
-"eslint-plugin-import@npm:eslint-plugin-i@latest":
-  version "2.29.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-i/-/eslint-plugin-i-2.29.1.tgz#97e4a055b6b2040cec0842700dd1d2066773b5a4"
-  integrity sha512-ORizX37MelIWLbMyqI7hi8VJMf7A0CskMmYkB+lkCX3aF4pkGV7kwx5bSEb4qx7Yce2rAf9s34HqDRPjGRZPNQ==
+eslint-plugin-import-x@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import-x/-/eslint-plugin-import-x-0.5.0.tgz#e0b26584d1c166368d7fd9e338cb4edea8832443"
+  integrity sha512-C7R8Z4IzxmsoOPMtSzwuOBW5FH6iRlxHR6iTks+MzVlrk3r3TUxokkWTx3ypdj9nGOEP+CG/5e6ebZzHbxgbbQ==
   dependencies:
+    "@typescript-eslint/utils" "^7.4.0"
     debug "^4.3.4"
     doctrine "^3.0.0"
     eslint-import-resolver-node "^0.3.9"
-    eslint-module-utils "^2.8.0"
-    get-tsconfig "^4.7.2"
+    get-tsconfig "^4.7.3"
     is-glob "^4.0.3"
-    minimatch "^3.1.2"
-    semver "^7.5.4"
+    minimatch "^9.0.3"
+    semver "^7.6.0"
 
 eslint-plugin-lit@1.11.0:
   version "1.11.0"
@@ -6033,9 +5666,6 @@ eslint-plugin-lit@1.11.0:
     parse5-htmlparser2-tree-adapter "^6.0.1"
     requireindex "^1.2.0"
 
-"eslint-plugin-lyne@file:tools/eslint/link":
-  version "0.0.0"
-
 eslint-plugin-react@7.34.1:
   version "7.34.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz#6806b70c97796f5bbfb235a5d3379ece5f4da997"
@@ -6070,13 +5700,16 @@ eslint-plugin-storybook@0.8.0:
     requireindex "^1.2.0"
     ts-dedent "^2.2.0"
 
-eslint-plugin-yaml@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-yaml/-/eslint-plugin-yaml-0.5.0.tgz#8c79d9d6389b67cbcf58ef6f970c4c086665a63a"
-  integrity sha512-Z6km4HEiRptSuvzc96nXBND1Vlg57b7pzRmIJOgb9+3PAE+XpaBaiMx+Dg+3Y15tSrEMKCIZ9WoZMwkwUbPI8A==
+eslint-plugin-yml@1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-yml/-/eslint-plugin-yml-1.14.0.tgz#98a019dfe4eb6837f881fb80d564df79cb05d8d9"
+  integrity sha512-ESUpgYPOcAYQO9czugcX5OqRvn/ydDVwGCPXY4YjPqc09rHaUVUA6IE6HLQys4rXk/S+qx3EwTd1wHCwam/OWQ==
   dependencies:
-    js-yaml "^4.1.0"
-    jshint "^2.13.0"
+    debug "^4.3.2"
+    eslint-compat-utils "^0.5.0"
+    lodash "^4.17.21"
+    natural-compare "^1.4.0"
+    yaml-eslint-parser "^1.2.1"
 
 eslint-scope@^5.1.1:
   version "5.1.1"
@@ -6086,59 +5719,55 @@ eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.2.2:
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
-  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+eslint-scope@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.0.1.tgz#a9601e4b81a0b9171657c343fb13111688963cfc"
+  integrity sha512-pL8XjgP4ZOmmwfFE8mEhSxA7ZY4C+LWyqjQ3o4yWkkmD0qcMT9kkW3zWHOczhWcjTSgqycYAgwSlXvZltv65og==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-visitor-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
-  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
-
-eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint@8.57.0:
-  version "8.57.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
-  integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
+eslint-visitor-keys@^4.0.0:
+  version "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.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" "^2.1.4"
-    "@eslint/js" "8.57.0"
-    "@humanwhocodes/config-array" "^0.11.14"
+    "@eslint/eslintrc" "^3.0.2"
+    "@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"
-    "@ungap/structured-clone" "^1.2.0"
     ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
     debug "^4.3.2"
-    doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.2.2"
-    eslint-visitor-keys "^3.4.3"
-    espree "^9.6.1"
+    eslint-scope "^8.0.1"
+    eslint-visitor-keys "^4.0.0"
+    espree "^10.0.1"
     esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
-    file-entry-cache "^6.0.1"
+    file-entry-cache "^8.0.0"
     find-up "^5.0.0"
     glob-parent "^6.0.2"
-    globals "^13.19.0"
-    graphemer "^1.4.0"
     ignore "^5.2.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
     is-path-inside "^3.0.3"
-    js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
     lodash.merge "^4.6.2"
@@ -6148,14 +5777,14 @@ eslint@8.57.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-espree@^9.6.0, espree@^9.6.1:
-  version "9.6.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
-  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+espree@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-10.0.1.tgz#600e60404157412751ba4a6f3a2ee1a42433139f"
+  integrity sha512-MWkrWZbJsL2UwnjxTX3gG8FneachS/Mwg7tdGXce011sJd5b0JG54vat5KHnfSBODZ3Wvzd2WnjxyzsRoVv+ww==
   dependencies:
-    acorn "^8.9.0"
+    acorn "^8.11.3"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.4.1"
+    eslint-visitor-keys "^4.0.0"
 
 esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
   version "4.0.1"
@@ -6243,11 +5872,6 @@ execa@^5.0.0, execa@^5.1.1:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
-exit@0.1.2, exit@0.1.x:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
-  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
-
 express@^4.17.3:
   version "4.19.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.19.2.tgz#e25437827a3aa7f2a827bc8171bbbb664a356465"
@@ -6311,7 +5935,7 @@ fast-fifo@^1.1.0, fast-fifo@^1.2.0:
   resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
   integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
 
-fast-glob@^3.1.1, fast-glob@^3.2.11, fast-glob@^3.2.2, fast-glob@^3.2.9, fast-glob@^3.3.2:
+fast-glob@^3.1.1, fast-glob@^3.2.11, fast-glob@^3.2.2, fast-glob@^3.2.9, fast-glob@^3.3.1, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -6364,20 +5988,6 @@ fetch-retry@^5.0.2:
   resolved "https://registry.yarnpkg.com/fetch-retry/-/fetch-retry-5.0.6.tgz#17d0bc90423405b7a88b74355bf364acd2a7fa56"
   integrity sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ==
 
-figures@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
-  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-file-entry-cache@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
-  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
-  dependencies:
-    flat-cache "^3.0.4"
-
 file-entry-cache@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-8.0.0.tgz#7787bddcf1131bffb92636c69457bbc0edd6d81f"
@@ -6400,24 +6010,23 @@ filelist@^1.0.4:
   dependencies:
     minimatch "^5.0.1"
 
-filing-cabinet@^3.0.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/filing-cabinet/-/filing-cabinet-3.3.1.tgz#45d87bb273a0e0a7dd6ac6bac9111059186e2e9c"
-  integrity sha512-renEK4Hh6DUl9Vl22Y3cxBq1yh8oNvbAdXnhih0wVpmea+uyKjC9K4QeRjUaybIiIewdzfum+Fg15ZqJ/GyCaA==
+filing-cabinet@^4.1.6:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/filing-cabinet/-/filing-cabinet-4.2.0.tgz#bd81241edce6e0c051882bef7b69ffa4c017baf9"
+  integrity sha512-YZ21ryzRcyqxpyKggdYSoXx//d3sCJzM3lsYoaeg/FyXdADGJrUl+BW1KIglaVLJN5BBcMtWylkygY8zBp2MrQ==
   dependencies:
     app-module-path "^2.2.0"
-    commander "^2.20.3"
-    debug "^4.3.3"
-    enhanced-resolve "^5.8.3"
+    commander "^10.0.1"
+    enhanced-resolve "^5.14.1"
     is-relative-path "^1.0.2"
-    module-definition "^3.3.1"
-    module-lookup-amd "^7.0.1"
-    resolve "^1.21.0"
-    resolve-dependency-path "^2.0.0"
-    sass-lookup "^3.0.0"
-    stylus-lookup "^3.0.1"
-    tsconfig-paths "^3.10.1"
-    typescript "^3.9.7"
+    module-definition "^5.0.1"
+    module-lookup-amd "^8.0.5"
+    resolve "^1.22.3"
+    resolve-dependency-path "^3.0.2"
+    sass-lookup "^5.0.1"
+    stylus-lookup "^5.0.1"
+    tsconfig-paths "^4.2.0"
+    typescript "^5.0.4"
 
 fill-range@^7.0.1:
   version "7.0.1"
@@ -6464,13 +6073,6 @@ find-replace@^3.0.0:
   dependencies:
     array-back "^3.0.1"
 
-find-up@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
-  integrity sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==
-  dependencies:
-    locate-path "^2.0.0"
-
 find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -6503,15 +6105,6 @@ find-up@^7.0.0:
     path-exists "^5.0.0"
     unicorn-magic "^0.1.0"
 
-flat-cache@^3.0.4:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
-  integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
-  dependencies:
-    flatted "^3.2.9"
-    keyv "^4.5.3"
-    rimraf "^3.0.2"
-
 flat-cache@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-4.0.1.tgz#0ece39fcb14ee012f4b0410bd33dd9c1f011127c"
@@ -6525,15 +6118,10 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
-flatten@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
-  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
-
 flow-parser@0.*:
-  version "0.231.0"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.231.0.tgz#13daa172b3c06ffacbb31025592dc0db41fe28f3"
-  integrity sha512-WVzuqwq7ZnvBceCG0DGeTQebZE+iIU0mlk5PmJgYj9DDrt+0isGC2m1ezW9vxL4V+HERJJo9ExppOnwKH2op6Q==
+  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"
@@ -6646,21 +6234,13 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-amd-module-type@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/get-amd-module-type/-/get-amd-module-type-3.0.2.tgz#46550cee2b8e1fa4c3f2c8a5753c36990aa49ab0"
-  integrity sha512-PcuKwB8ouJnKuAPn6Hk3UtdfKoUV3zXRqVEvj8XGIXqjWfgd1j7QGdXy5Z9OdQfzVt1Sk29HVe/P+X74ccOuqw==
-  dependencies:
-    ast-module-types "^3.0.0"
-    node-source-walk "^4.2.2"
-
-get-amd-module-type@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/get-amd-module-type/-/get-amd-module-type-4.1.0.tgz#af1396d02cd935cb6fafdc4a5282395db3422db6"
-  integrity sha512-0e/eK6vTGCnSfQ6eYs3wtH05KotJYIP7ZIZEueP/KlA+0dIAEs8bYFvOd/U56w1vfjhJqBagUxVMyy9Tr/cViQ==
+get-amd-module-type@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/get-amd-module-type/-/get-amd-module-type-5.0.1.tgz#bef38ea3674e1aa1bda9c59c8b0da598582f73f2"
+  integrity sha512-jb65zDeHyDjFR1loOVk0HQGM5WNwoGB8aLWy3LKCieMKol0/ProHkhO2X1JxojuN10vbz1qNn09MJ7tNp7qMzw==
   dependencies:
-    ast-module-types "^4.0.0"
-    node-source-walk "^5.0.1"
+    ast-module-types "^5.0.0"
+    node-source-walk "^6.0.1"
 
 get-caller-file@^2.0.5:
   version "2.0.5"
@@ -6698,16 +6278,6 @@ get-own-enumerable-property-symbols@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
   integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
 
-get-pkg-repo@^4.0.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/get-pkg-repo/-/get-pkg-repo-4.2.1.tgz#75973e1c8050c73f48190c52047c4cee3acbf385"
-  integrity sha512-2+QbHjFRfGB74v/pYWjd5OhU3TDIC2Gv/YKUTk/tCvAz0pkn/Mz6P3uByuBimLOcPvN2jYdScl3xGFSrx0jEcA==
-  dependencies:
-    "@hutson/parse-repository-url" "^3.0.0"
-    hosted-git-info "^4.0.0"
-    through2 "^2.0.0"
-    yargs "^16.2.0"
-
 get-stream@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
@@ -6734,7 +6304,7 @@ get-symbol-description@^1.0.2:
     es-errors "^1.3.0"
     get-intrinsic "^1.2.4"
 
-get-tsconfig@^4.7.2:
+get-tsconfig@^4.5.0, get-tsconfig@^4.7.2, get-tsconfig@^4.7.3:
   version "4.7.3"
   resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.7.3.tgz#0498163d98f7b58484dd4906999c0c9d5f103f83"
   integrity sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==
@@ -6765,17 +6335,6 @@ giget@^1.0.0:
     pathe "^1.1.2"
     tar "^6.2.0"
 
-git-raw-commits@^2.0.8:
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-2.0.11.tgz#bc3576638071d18655e1cc60d7f524920008d723"
-  integrity sha512-VnctFhw+xfj8Va1xtfEqCUD2XDrbAPSJx+hSrE5K7fGdjZruW7XV+QOrN7LF/RJyvspRiD2I0asWsxFp0ya26A==
-  dependencies:
-    dargs "^7.0.0"
-    lodash "^4.17.15"
-    meow "^8.0.0"
-    split2 "^3.0.0"
-    through2 "^4.0.0"
-
 git-raw-commits@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-4.0.0.tgz#b212fd2bff9726d27c1283a1157e829490593285"
@@ -6785,29 +6344,6 @@ git-raw-commits@^4.0.0:
     meow "^12.0.1"
     split2 "^4.0.0"
 
-git-remote-origin-url@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz#5282659dae2107145a11126112ad3216ec5fa65f"
-  integrity sha512-eU+GGrZgccNJcsDH5LkXR3PB9M958hxc7sbA8DFJjrv9j4L2P/eZfKhM+QD6wyzpiv+b1BpK0XrYCxkovtjSLw==
-  dependencies:
-    gitconfiglocal "^1.0.0"
-    pify "^2.3.0"
-
-git-semver-tags@^4.0.0, git-semver-tags@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-4.1.1.tgz#63191bcd809b0ec3e151ba4751c16c444e5b5780"
-  integrity sha512-OWyMt5zBe7xFs8vglMmhM9lRQzCWL3WjHtxNNfJTMngGym7pC1kh8sP6jevfydJ6LP3ZvGxfb6ABYgPUM0mtsA==
-  dependencies:
-    meow "^8.0.0"
-    semver "^6.0.0"
-
-gitconfiglocal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz#41d045f3851a5ea88f03f24ca1c6178114464b9b"
-  integrity sha512-spLUXeTAVHxDtKsJc8FkFVgFtMdEN9qPGpL23VfSHx4fP4+Ds097IXLvymbnDH8FnmxX5Nr9bPw3A+AQ6mWEaQ==
-  dependencies:
-    ini "^1.3.2"
-
 github-slugger@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-2.0.0.tgz#52cf2f9279a21eb6c59dd385b410f0c0adda8f1a"
@@ -6832,18 +6368,18 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@10.3.10, glob@^10.0.0:
-  version "10.3.10"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
-  integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
+glob@10.3.12, glob@^10.0.0:
+  version "10.3.12"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.12.tgz#3a65c363c2e9998d220338e88a5f6ac97302960b"
+  integrity sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==
   dependencies:
     foreground-child "^3.1.0"
-    jackspeak "^2.3.5"
+    jackspeak "^2.3.6"
     minimatch "^9.0.1"
-    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
-    path-scurry "^1.10.1"
+    minipass "^7.0.4"
+    path-scurry "^1.10.2"
 
-glob@^7.1.1, glob@^7.1.3, glob@^7.1.6:
+glob@^7.1.3, glob@^7.2.3:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -6878,17 +6414,20 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
+globals@15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-15.0.0.tgz#9c6cd4e54327ceaab563b4c17ee5e9d181c03fd2"
+  integrity sha512-m/C/yR4mjO6pXDTm9/R/SpYTAIyaUB4EOzcaaMEl7mds7Mshct9GfejiJNQGjHHbdMPey13Kpu4TMbYi9ex1pw==
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.19.0:
-  version "13.24.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
-  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
-  dependencies:
-    type-fest "^0.20.2"
+globals@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-14.0.0.tgz#898d7413c29babcf6bafe56fcadded858ada724e"
+  integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
 
 globalthis@^1.0.3:
   version "1.0.3"
@@ -6909,7 +6448,7 @@ globby@11.0.4:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
-globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, globby@^11.1.0:
+globby@^11.0.1, globby@^11.0.2, globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -6926,7 +6465,7 @@ globjoin@^0.1.4:
   resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
   integrity sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==
 
-gonzales-pe@^4.2.3, gonzales-pe@^4.3.0:
+gonzales-pe@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-4.3.0.tgz#fe9dec5f3c557eead09ff868c65826be54d067b3"
   integrity sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==
@@ -6974,11 +6513,6 @@ handlebars@^4.7.7:
   optionalDependencies:
     uglify-js "^3.1.4"
 
-hard-rejection@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
-  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
-
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -7063,13 +6597,6 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
-hosted-git-info@^4.0.0, hosted-git-info@^4.0.1:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz#827b82867e9ff1c8d0c4d9d53880397d2c86d224"
-  integrity sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==
-  dependencies:
-    lru-cache "^6.0.0"
-
 html-escaper@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
@@ -7080,17 +6607,6 @@ html-tags@^3.3.1:
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
   integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
 
-htmlparser2@3.8.x:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.8.3.tgz#996c28b191516a8be86501a7d79757e5c70c1068"
-  integrity sha512-hBxEg3CYXe+rPIua8ETe7tmG3XDn9B0edOE/e9wH2nLczxzgdu0m0aNHY+5wFZiviLWLdANPJTssa92dMcXQ5Q==
-  dependencies:
-    domelementtype "1"
-    domhandler "2.3"
-    domutils "1.5"
-    entities "1.0"
-    readable-stream "1.1"
-
 http-assert@^1.3.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/http-assert/-/http-assert-1.5.0.tgz#c389ccd87ac16ed2dfa6246fd73b926aa00e6b8f"
@@ -7174,7 +6690,7 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.1.4, ignore@^5.2.0, ignore@^5.2.4, ignore@^5.3.1:
+ignore@^5.1.4, ignore@^5.2.0, ignore@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
@@ -7212,11 +6728,6 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
-indexes-of@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
-  integrity sha512-bup+4tap3Hympa+JBJUG7XuOsdNQ6fxt0MHyXMKuLBKn0OqsTfvUxkUrroEX1+B2VsSHvCjiIcZVxRtYa4nllA==
-
 inflation@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/inflation/-/inflation-2.1.0.tgz#9214db11a47e6f756d111c4f9df96971c60f886c"
@@ -7230,7 +6741,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -7245,7 +6756,7 @@ ini@4.1.1:
   resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.1.tgz#d95b3d843b1e906e56d6747d5447904ff50ce7a1"
   integrity sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==
 
-ini@^1.3.2, ini@^1.3.5, ini@~1.3.0:
+ini@^1.3.5, ini@~1.3.0:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
@@ -7367,7 +6878,7 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-core-module@^2.1.0, is-core-module@^2.13.0, is-core-module@^2.5.0:
+is-core-module@^2.1.0, is-core-module@^2.11.0, is-core-module@^2.13.0:
   version "2.13.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
   integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
@@ -7516,11 +7027,6 @@ is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-plain-obj@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
-  integrity sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==
-
 is-plain-obj@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
@@ -7592,13 +7098,6 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
-is-text-path@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-1.0.1.tgz#4e1aa0fb51bfbcb3e92688001397202c1775b66e"
-  integrity sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w==
-  dependencies:
-    text-extensions "^1.0.0"
-
 is-text-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-2.0.0.tgz#b2484e2b720a633feb2e85b67dc193ff72c75636"
@@ -7655,11 +7154,6 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
-
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
@@ -7718,7 +7212,7 @@ iterator.prototype@^1.1.2:
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
 
-jackspeak@2.1.1, jackspeak@^2.3.5:
+jackspeak@2.1.1, jackspeak@^2.3.6:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.1.1.tgz#2a42db4cfbb7e55433c28b6f75d8b796af9669cd"
   integrity sha512-juf9stUEwUaILepraGOWIJTLwg48bUnBmRqd2ln2Os1sW987zeoj/hzhbvRB95oMuS2ZTpjULmdwHNX4rzZIZw==
@@ -7800,29 +7294,11 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
-jshint@^2.13.0:
-  version "2.13.6"
-  resolved "https://registry.yarnpkg.com/jshint/-/jshint-2.13.6.tgz#3679a2687a3066fa9034ef85d8c305613a31eec6"
-  integrity sha512-IVdB4G0NTTeQZrBoM8C5JFVLjV2KtZ9APgybDA1MK73xb09qFs0jCXyQLnCOp1cSZZZbvhq/6mfXHUTaDkffuQ==
-  dependencies:
-    cli "~1.0.0"
-    console-browserify "1.1.x"
-    exit "0.1.x"
-    htmlparser2 "3.8.x"
-    lodash "~4.17.21"
-    minimatch "~3.0.2"
-    strip-json-comments "1.0.x"
-
 json-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
-json-parse-better-errors@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
-  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
-
 json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
@@ -7848,19 +7324,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
-json-stringify-safe@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
-  integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
-
-json5@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
-  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
-  dependencies:
-    minimist "^1.2.0"
-
-json5@^2.2.3:
+json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -7908,14 +7372,14 @@ keygrip@~1.1.0:
   dependencies:
     tsscmp "1.0.6"
 
-keyv@^4.5.3, keyv@^4.5.4:
+keyv@^4.5.4:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
   integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
   dependencies:
     json-buffer "3.0.1"
 
-kind-of@^6.0.2, kind-of@^6.0.3:
+kind-of@^6.0.2:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -7978,9 +7442,9 @@ koa-static@^5.0.0:
     koa-send "^5.0.0"
 
 koa@^2.13.0:
-  version "2.15.2"
-  resolved "https://registry.yarnpkg.com/koa/-/koa-2.15.2.tgz#1e4afe1482d01bd24ed6e30f630a960411f5ebf2"
-  integrity sha512-MXTeZH3M6AJ8ukW2QZ8wqO3Dcdfh2WRRmjCBkEP+NhKNCiqlO5RDqHmSnsyNrbRJrdjyvIGSJho4vQiWgQJSVA==
+  version "2.15.3"
+  resolved "https://registry.yarnpkg.com/koa/-/koa-2.15.3.tgz#062809266ee75ce0c75f6510a005b0e38f8c519a"
+  integrity sha512-j/8tY9j5t+GVMLeioLaxweJiKUayFhlGqNTzf2ZGwL0ZCQijd2RLHK0SLW5Tsko8YyyqCZC2cojIb0/s62qTAg==
   dependencies:
     accepts "^1.3.5"
     cache-content-type "^1.0.0"
@@ -8095,48 +7559,30 @@ 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"
 
-lit@3.1.2, "lit@^2.0.0 || ^3.0.0", lit@^3.0.0, lit@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lit/-/lit-3.1.2.tgz#f276258e8a56593f1d834a5fd00a7eb5e891ae73"
-  integrity sha512-VZx5iAyMtX7CV4K8iTLdCkMaYZ7ipjJZ0JcSdJ0zIdGxxyurjIn7yuuSxNBD7QmjvcNJwr0JS4cAdAtsy7gZ6w==
+lit@3.1.3, "lit@^2.0.0 || ^3.0.0", lit@^3.0.0, lit@^3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-3.1.3.tgz#809ecdaccfea47e1e3b46649fae6c6e7b9802675"
+  integrity sha512-l4slfspEsnCcHVRTvaP7YnkTZEZggNFywLEIhQaGhYDczG+tu/vlgm/KaWIEjIp+ZyV20r2JnZctMb8LeLCG7Q==
   dependencies:
     "@lit/reactive-element" "^2.0.4"
     lit-element "^4.0.4"
     lit-html "^3.1.2"
 
-load-json-file@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
-  integrity sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^4.0.0"
-    pify "^3.0.0"
-    strip-bom "^3.0.0"
-
-locate-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
-  integrity sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==
-  dependencies:
-    p-locate "^2.0.0"
-    path-exists "^3.0.0"
-
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -8196,11 +7642,6 @@ lodash.isequal@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
 
-lodash.ismatch@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
-  integrity sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==
-
 lodash.isplainobject@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
@@ -8246,7 +7687,7 @@ lodash.upperfirst@^4.3.1:
   resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce"
   integrity sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==
 
-lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.21, lodash@~4.17.15, lodash@~4.17.21:
+lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.21, lodash@~4.17.15:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -8304,6 +7745,11 @@ loupe@^2.3.6, loupe@^2.3.7:
   dependencies:
     get-func-name "^2.0.1"
 
+lru-cache@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
+  integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -8328,42 +7774,28 @@ lru-cache@^8.0.4:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-8.0.5.tgz#983fe337f3e176667f8e567cfcce7cb064ea214e"
   integrity sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==
 
-"lru-cache@^9.1.1 || ^10.0.0":
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
-  integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
-
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
-madge@6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/madge/-/madge-6.1.0.tgz#9835bb53f2e00d184914c2b007b50736a964d297"
-  integrity sha512-irWhT5RpFOc6lkzGHKLihonCVgM0YtfNUh4IrFeW3EqHpnt/JHUG3z26j8PeJEktCGB4tmGOOOJi1Rl/ACWucQ==
+madge@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/madge/-/madge-7.0.0.tgz#64b1762033b0f969caa7e5853004b6850e8430bb"
+  integrity sha512-x9eHkBWoCJ2B8yGesWf8LRucarkbH5P3lazqgvmxe4xn5U2Meyfu906iG9mBB1RnY/f4D+gtELWdiz1k6+jAZA==
   dependencies:
-    chalk "^4.1.1"
+    chalk "^4.1.2"
     commander "^7.2.0"
     commondir "^1.0.1"
-    debug "^4.3.1"
-    dependency-tree "^9.0.0"
-    detective-amd "^4.0.1"
-    detective-cjs "^4.0.0"
-    detective-es6 "^3.0.0"
-    detective-less "^1.0.2"
-    detective-postcss "^6.1.0"
-    detective-sass "^4.0.1"
-    detective-scss "^3.0.0"
-    detective-stylus "^2.0.1"
-    detective-typescript "^9.0.0"
+    debug "^4.3.4"
+    dependency-tree "^10.0.9"
     ora "^5.4.1"
     pluralize "^8.0.0"
-    precinct "^8.1.0"
+    precinct "^11.0.5"
     pretty-ms "^7.0.1"
-    rc "^1.2.7"
+    rc "^1.2.8"
     stream-to-array "^2.3.0"
-    ts-graphviz "^1.5.0"
+    ts-graphviz "^1.8.1"
     walkdir "^0.4.1"
 
 magic-string@^0.23.2:
@@ -8373,10 +7805,10 @@ magic-string@^0.23.2:
   dependencies:
     sourcemap-codec "^1.4.1"
 
-magic-string@^0.30.0:
-  version "0.30.8"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"
-  integrity sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==
+magic-string@^0.30.0, magic-string@^0.30.8:
+  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"
 
@@ -8402,16 +7834,6 @@ make-dir@^4.0.0:
   dependencies:
     semver "^7.5.3"
 
-map-obj@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
-  integrity sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==
-
-map-obj@^4.0.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
-  integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
-
 map-or-similar@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
@@ -8654,23 +8076,6 @@ meow@^13.2.0:
   resolved "https://registry.yarnpkg.com/meow/-/meow-13.2.0.tgz#6b7d63f913f984063b3cc261b6e8800c4cd3474f"
   integrity sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==
 
-meow@^8.0.0:
-  version "8.1.2"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-8.1.2.tgz#bcbe45bda0ee1729d350c03cffc8395a36c4e897"
-  integrity sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==
-  dependencies:
-    "@types/minimist" "^1.2.0"
-    camelcase-keys "^6.2.2"
-    decamelize-keys "^1.1.0"
-    hard-rejection "^2.1.0"
-    minimist-options "4.1.0"
-    normalize-package-data "^3.0.0"
-    read-pkg-up "^7.0.1"
-    redent "^3.0.0"
-    trim-newlines "^3.0.0"
-    type-fest "^0.18.0"
-    yargs-parser "^20.2.3"
-
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -8985,14 +8390,7 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-minimatch@9.0.3, minimatch@^9.0.0, minimatch@^9.0.1, minimatch@^9.0.3:
-  version "9.0.3"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
-  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
-  dependencies:
-    brace-expansion "^2.0.1"
-
-minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.2, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -9006,22 +8404,20 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimatch@~3.0.2:
+minimatch@^9.0.0, minimatch@^9.0.1, minimatch@^9.0.3, minimatch@^9.0.4:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.4.tgz#8e49c731d1749cbec05050ee5145147b32496a51"
+  integrity sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@~3.0.3:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.8.tgz#5e6a59bd11e2ab0de1cfb843eb2d82e546c321c1"
   integrity sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist-options@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
-  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
-  dependencies:
-    arrify "^1.0.1"
-    is-plain-obj "^1.1.0"
-    kind-of "^6.0.3"
-
 minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -9039,7 +8435,7 @@ minipass@^5.0.0:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-5.0.0.tgz#3e9788ffb90b694a5d0ec94479a45b5d8738133d"
   integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==
 
-"minipass@^5.0.0 || ^6.0.2 || ^7.0.0":
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.0.4:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c"
   integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
@@ -9074,36 +8470,22 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-modify-values@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
-  integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
-
-module-definition@^3.3.1:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/module-definition/-/module-definition-3.4.0.tgz#953a3861f65df5e43e80487df98bb35b70614c2b"
-  integrity sha512-XxJ88R1v458pifaSkPNLUTdSPNVGMP2SXVncVmApGO+gAfrLANiYe6JofymCzVceGOMwQE2xogxBSc8uB7XegA==
-  dependencies:
-    ast-module-types "^3.0.0"
-    node-source-walk "^4.0.0"
-
-module-definition@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/module-definition/-/module-definition-4.1.0.tgz#148ff9348e3401867229dcbe5947f4f6d5ccd3a2"
-  integrity sha512-rHXi/DpMcD2qcKbPCTklDbX9lBKJrUSl971TW5l6nMpqKCIlzJqmQ8cfEF5M923h2OOLHPDVlh5pJxNyV+AJlw==
+module-definition@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/module-definition/-/module-definition-5.0.1.tgz#62d1194e5d5ea6176b7dc7730f818f466aefa32f"
+  integrity sha512-kvw3B4G19IXk+BOXnYq/D/VeO9qfHaapMeuS7w7sNUqmGaA6hywdFHMi+VWeR9wUScXM7XjoryTffCZ5B0/8IA==
   dependencies:
-    ast-module-types "^4.0.0"
-    node-source-walk "^5.0.1"
+    ast-module-types "^5.0.0"
+    node-source-walk "^6.0.1"
 
-module-lookup-amd@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/module-lookup-amd/-/module-lookup-amd-7.0.1.tgz#d67c1a93f2ff8e38b8774b99a638e9a4395774b2"
-  integrity sha512-w9mCNlj0S8qviuHzpakaLVc+/7q50jl9a/kmJ/n8bmXQZgDPkQHnPBb8MUOYh3WpAYkXuNc2c+khsozhIp/amQ==
+module-lookup-amd@^8.0.5:
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/module-lookup-amd/-/module-lookup-amd-8.0.5.tgz#aaeea41979105b49339380ca3f7d573db78c32a5"
+  integrity sha512-vc3rYLjDo5Frjox8NZpiyLXsNWJ5BWshztc/5KSOMzpg9k5cHH652YsJ7VKKmtM4SvaxuE9RkrYGhiSjH3Ehow==
   dependencies:
-    commander "^2.8.1"
-    debug "^4.1.0"
-    glob "^7.1.6"
-    requirejs "^2.3.5"
+    commander "^10.0.1"
+    glob "^7.2.3"
+    requirejs "^2.3.6"
     requirejs-config-file "^4.0.0"
 
 mri@^1.1.0:
@@ -9227,21 +8609,14 @@ node-releases@^2.0.14:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
-node-source-walk@^4.0.0, node-source-walk@^4.2.0, node-source-walk@^4.2.2:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/node-source-walk/-/node-source-walk-4.3.0.tgz#8336b56cfed23ac5180fe98f1e3bb6b11fd5317c"
-  integrity sha512-8Q1hXew6ETzqKRAs3jjLioSxNfT1cx74ooiF8RlAONwVMcfq+UdzLC2eB5qcPldUxaE5w3ytLkrmV1TGddhZTA==
-  dependencies:
-    "@babel/parser" "^7.0.0"
-
-node-source-walk@^5.0.0, node-source-walk@^5.0.1:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/node-source-walk/-/node-source-walk-5.0.2.tgz#0eb439ce378946ce531e07a6a0073d06288396dd"
-  integrity sha512-Y4jr/8SRS5hzEdZ7SGuvZGwfORvNsSsNRwDXx5WisiqzsVfeftDvRgfeqWNgZvWSJbgubTRVRYBzK6UO+ErqjA==
+node-source-walk@^6.0.0, node-source-walk@^6.0.1, node-source-walk@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/node-source-walk/-/node-source-walk-6.0.2.tgz#ba81bc4bc0f6f05559b084bea10be84c3f87f211"
+  integrity sha512-jn9vOIK/nfqoFCcpK89/VCVaLg1IHE6UVfDOzvqmANaJ/rWCTEdH8RZ1V278nv2jr36BJdyQXIAavBLXpzdlag==
   dependencies:
-    "@babel/parser" "^7.21.4"
+    "@babel/parser" "^7.21.8"
 
-normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
+normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
   integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
@@ -9251,16 +8626,6 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-package-data@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-3.0.3.tgz#dbcc3e2da59509a0983422884cd172eefdfa525e"
-  integrity sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==
-  dependencies:
-    hosted-git-info "^4.0.1"
-    is-core-module "^2.5.0"
-    semver "^7.3.4"
-    validate-npm-package-license "^3.0.1"
-
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -9458,13 +8823,6 @@ ora@^5.4.1:
     strip-ansi "^6.0.0"
     wcwidth "^1.0.1"
 
-p-limit@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
-  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
-  dependencies:
-    p-try "^1.0.0"
-
 p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -9486,13 +8844,6 @@ p-limit@^4.0.0:
   dependencies:
     yocto-queue "^1.0.0"
 
-p-locate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
-  integrity sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==
-  dependencies:
-    p-limit "^1.1.0"
-
 p-locate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
@@ -9528,11 +8879,6 @@ p-map@^4.0.0:
   dependencies:
     aggregate-error "^3.0.0"
 
-p-try@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
-  integrity sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==
-
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
@@ -9584,14 +8930,6 @@ parse-entities@^2.0.0:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  integrity sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
 parse-json@^5.0.0, parse-json@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
@@ -9676,12 +9014,12 @@ path-parse@^1.0.6, path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-scurry@^1.10.1:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.10.1.tgz#9ba6bf5aa8500fe9fd67df4f0d9483b2b0bfc698"
-  integrity sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==
+path-scurry@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.10.2.tgz#8f6357eb1239d5fa1da8b9f70e9c080675458ba7"
+  integrity sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==
   dependencies:
-    lru-cache "^9.1.1 || ^10.0.0"
+    lru-cache "^10.2.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
 path-to-regexp@0.1.7:
@@ -9690,16 +9028,9 @@ path-to-regexp@0.1.7:
   integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
 
 path-to-regexp@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.1.tgz#d54934d6798eb9e5ef14e7af7962c945906918e5"
-  integrity sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==
-
-path-type@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
-  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
-  dependencies:
-    pify "^3.0.0"
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.2.tgz#324377a83e5049cbecadc5554d6a63a9a4866b36"
+  integrity sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==
 
 path-type@^4.0.0:
   version "4.0.0"
@@ -9745,16 +9076,6 @@ pidtree@0.6.0, pidtree@^0.6.0:
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
   integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
 
-pify@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
-  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
-
-pify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-  integrity sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==
-
 pify@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
@@ -9786,17 +9107,17 @@ pkg-dir@^5.0.0:
   dependencies:
     find-up "^5.0.0"
 
-playwright-core@1.42.1:
-  version "1.42.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.42.1.tgz#13c150b93c940a3280ab1d3fbc945bc855c9459e"
-  integrity sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==
+playwright-core@1.43.1:
+  version "1.43.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.43.1.tgz#0eafef9994c69c02a1a3825a4343e56c99c03b02"
+  integrity sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==
 
-playwright@^1.22.2, playwright@^1.41.1:
-  version "1.42.1"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.42.1.tgz#79c828b51fe3830211137550542426111dc8239f"
-  integrity sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==
+playwright@1.43.1, playwright@^1.22.2:
+  version "1.43.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.43.1.tgz#8ad08984ac66c9ef3d0db035be54dd7ec9f1c7d9"
+  integrity sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==
   dependencies:
-    playwright-core "1.42.1"
+    playwright-core "1.43.1"
   optionalDependencies:
     fsevents "2.3.2"
 
@@ -9859,15 +9180,6 @@ postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss-values-parser@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
-  integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
-  dependencies:
-    flatten "^1.0.2"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
 postcss-values-parser@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-6.0.2.tgz#636edc5b86c953896f1bb0d7a7a6615df00fb76f"
@@ -9877,7 +9189,7 @@ postcss-values-parser@^6.0.2:
     is-url-superb "^4.0.0"
     quote-unquote "^1.0.0"
 
-postcss@8.4.38, postcss@^8.1.7, postcss@^8.4.23, postcss@^8.4.36, postcss@^8.4.38:
+postcss@8.4.38, postcss@^8.4.23, postcss@^8.4.38:
   version "8.4.38"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
   integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
@@ -9886,42 +9198,23 @@ postcss@8.4.38, postcss@^8.1.7, postcss@^8.4.23, postcss@^8.4.36, postcss@^8.4.3
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
-precinct@^8.1.0:
-  version "8.3.1"
-  resolved "https://registry.yarnpkg.com/precinct/-/precinct-8.3.1.tgz#94b99b623df144eed1ce40e0801c86078466f0dc"
-  integrity sha512-pVppfMWLp2wF68rwHqBIpPBYY8Kd12lDhk8LVQzOwqllifVR15qNFyod43YLyFpurKRZQKnE7E4pofAagDOm2Q==
-  dependencies:
-    commander "^2.20.3"
-    debug "^4.3.3"
-    detective-amd "^3.1.0"
-    detective-cjs "^3.1.1"
-    detective-es6 "^2.2.1"
-    detective-less "^1.0.2"
-    detective-postcss "^4.0.0"
-    detective-sass "^3.0.1"
-    detective-scss "^2.0.1"
-    detective-stylus "^1.0.0"
-    detective-typescript "^7.0.0"
-    module-definition "^3.3.1"
-    node-source-walk "^4.2.0"
-
-precinct@^9.0.0:
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/precinct/-/precinct-9.2.1.tgz#db0a67abff7b0a9a3b2b1ac33d170e8a5fcac7b2"
-  integrity sha512-uzKHaTyiVejWW7VJtHInb9KBUq9yl9ojxXGujhjhDmPon2wgZPBKQIKR+6csGqSlUeGXAA4MEFnU6DesxZib+A==
-  dependencies:
-    "@dependents/detective-less" "^3.0.1"
-    commander "^9.5.0"
-    detective-amd "^4.1.0"
-    detective-cjs "^4.1.0"
-    detective-es6 "^3.0.1"
-    detective-postcss "^6.1.1"
-    detective-sass "^4.1.1"
-    detective-scss "^3.0.1"
-    detective-stylus "^3.0.0"
-    detective-typescript "^9.1.1"
-    module-definition "^4.1.0"
-    node-source-walk "^5.0.1"
+precinct@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/precinct/-/precinct-11.0.5.tgz#3e15b3486670806f18addb54b8533e23596399ff"
+  integrity sha512-oHSWLC8cL/0znFhvln26D14KfCQFFn4KOLSw6hmLhd+LQ2SKt9Ljm89but76Pc7flM9Ty1TnXyrA2u16MfRV3w==
+  dependencies:
+    "@dependents/detective-less" "^4.1.0"
+    commander "^10.0.1"
+    detective-amd "^5.0.2"
+    detective-cjs "^5.0.1"
+    detective-es6 "^4.0.1"
+    detective-postcss "^6.1.3"
+    detective-sass "^5.0.3"
+    detective-scss "^4.0.3"
+    detective-stylus "^4.0.0"
+    detective-typescript "^11.1.0"
+    module-definition "^5.0.1"
+    node-source-walk "^6.0.2"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -10052,31 +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.0, puppeteer-core@^22.0.0:
-  version "22.6.0"
-  resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-22.6.0.tgz#544cf9ee5cb3259f9e74f7364c13c132a04bb48f"
-  integrity sha512-xclyGFhxHfZ9l62uXFm+JpgtJHLIZ1qHc7iR4eaIqBNKA5Dg2sDr8yvylfCx5bMN89QWIaxpV6IHsy0qUynK/g==
+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.0"
-    chromium-bidi "0.5.13"
+    "@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.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-22.6.0.tgz#1e916e1b6bcffd00ca05766e7fbab0c3c8a1ccd2"
-  integrity sha512-TYeza4rl1YXfxqUVw/0hWUWYX5cicnf6qu5kkDV+t7QrESCjMoSNnva4ZA/MRGQ03HnB9BOFw9nxs/SKek5KDA==
+  version "22.6.5"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-22.6.5.tgz#f72246fef1d0e0451f6f79b48087905251fd474b"
+  integrity sha512-YuoRKGj3MxHhUwrey7vmNvU4odGdUdNsj1ee8pfcqQlLWIXfMOXZCAXh8xdzpZESHH3tCGWp2xmPZE8E6iUEWg==
   dependencies:
-    "@puppeteer/browsers" "2.2.0"
+    "@puppeteer/browsers" "2.2.2"
     cosmiconfig "9.0.0"
     devtools-protocol "0.0.1262051"
-    puppeteer-core "22.6.0"
-
-q@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
-  integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
+    puppeteer-core "22.6.5"
 
 qs@6.11.0:
   version "6.11.0"
@@ -10086,9 +9374,9 @@ qs@6.11.0:
     side-channel "^1.0.4"
 
 qs@^6.10.0, qs@^6.5.2:
-  version "6.12.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.12.0.tgz#edd40c3b823995946a8a0b1f208669c7a200db77"
-  integrity sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==
+  version "6.12.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.12.1.tgz#39422111ca7cbdb70425541cba20c7d7b216599a"
+  integrity sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==
   dependencies:
     side-channel "^1.0.6"
 
@@ -10102,11 +9390,6 @@ queue-tick@^1.0.0, queue-tick@^1.0.1:
   resolved "https://registry.yarnpkg.com/queue-tick/-/queue-tick-1.0.1.tgz#f6f07ac82c1fd60f82e098b417a80e52f1f4c142"
   integrity sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==
 
-quick-lru@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
-  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
-
 quote-unquote@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/quote-unquote/-/quote-unquote-1.0.0.tgz#67a9a77148effeaf81a4d428404a710baaac8a0b"
@@ -10132,7 +9415,7 @@ raw-body@2.5.2, raw-body@^2.3.3:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-rc@^1.2.7:
+rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -10147,7 +9430,7 @@ react-colorful@^5.1.2:
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
   integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
 
-"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.2.0:
+react-dom@18.2.0, "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0":
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -10185,14 +9468,6 @@ read-package-json-fast@^3.0.2:
     json-parse-even-better-errors "^3.0.0"
     npm-normalize-package-bin "^3.0.0"
 
-read-pkg-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
-  integrity sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==
-  dependencies:
-    find-up "^2.0.0"
-    read-pkg "^3.0.0"
-
 read-pkg-up@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
@@ -10202,15 +9477,6 @@ read-pkg-up@^7.0.1:
     read-pkg "^5.2.0"
     type-fest "^0.8.1"
 
-read-pkg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
-  integrity sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==
-  dependencies:
-    load-json-file "^4.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^3.0.0"
-
 read-pkg@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
@@ -10221,25 +9487,6 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@1.1:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e"
-  integrity sha512-E98tWzqShvKDGpR2MbjsDkDQWLW2TfWUC15H4tNQhIJ5Lsta84l8nUGL9/ybltGwe+wZzWPpc1Kmd2wQP4bdCA==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
-readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.0.2, readable-stream@^3.1.1, readable-stream@^3.4.0:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
-  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
 readable-stream@^2.0.0, readable-stream@~2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
@@ -10253,6 +9500,15 @@ readable-stream@^2.0.0, readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+readable-stream@^3.1.1, readable-stream@^3.4.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -10411,15 +9667,15 @@ requirejs-config-file@^4.0.0:
     esprima "^4.0.0"
     stringify-object "^3.2.1"
 
-requirejs@^2.3.5:
+requirejs@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/requirejs/-/requirejs-2.3.6.tgz#e5093d9601c2829251258c0b9445d4d19fa9e7c9"
   integrity sha512-ipEzlWQe6RK3jkzikgCupiTbTvm4S0/CAU5GlgptkN5SO6F3u0UD0K18wy6ErDqiCyP4J4YYe1HuAShvsxePLg==
 
-resolve-dependency-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-dependency-path/-/resolve-dependency-path-2.0.0.tgz#11700e340717b865d216c66cabeb4a2a3c696736"
-  integrity sha512-DIgu+0Dv+6v2XwRaNWnumKu7GPufBBOr5I1gRPJHkvghrfCGOooJODFvgFimX/KRxk9j0whD2MnKHzM1jYvk9w==
+resolve-dependency-path@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/resolve-dependency-path/-/resolve-dependency-path-3.0.2.tgz#012816717bcbe8b846835da11af9d2beb5acef50"
+  integrity sha512-Tz7zfjhLfsvR39ADOSk9us4421J/1ztVBo4rWUkF38hgHK5m0OCZ3NxFVpqHRkjctnwVa15igEUHFJp8MCS7vA==
 
 resolve-from@^4.0.0:
   version "4.0.0"
@@ -10444,7 +9700,7 @@ resolve-pkg-maps@^1.0.0:
   resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
   integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
 
-resolve@^1.10.0, resolve@^1.14.2, resolve@^1.21.0, resolve@^1.22.1, resolve@^1.22.4, resolve@^1.22.8, resolve@~1.22.1:
+resolve@^1.10.0, resolve@^1.14.2, resolve@^1.22.1, resolve@^1.22.3, resolve@^1.22.4, resolve@^1.22.8, resolve@~1.22.1:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -10519,25 +9775,28 @@ rollup-plugin-postcss-lit@2.1.0:
     transform-ast "^2.4.4"
 
 rollup@^4.13.0, rollup@^4.4.0:
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.13.0.tgz#dd2ae144b4cdc2ea25420477f68d4937a721237a"
-  integrity sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==
+  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.13.0"
-    "@rollup/rollup-android-arm64" "4.13.0"
-    "@rollup/rollup-darwin-arm64" "4.13.0"
-    "@rollup/rollup-darwin-x64" "4.13.0"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.13.0"
-    "@rollup/rollup-linux-arm64-gnu" "4.13.0"
-    "@rollup/rollup-linux-arm64-musl" "4.13.0"
-    "@rollup/rollup-linux-riscv64-gnu" "4.13.0"
-    "@rollup/rollup-linux-x64-gnu" "4.13.0"
-    "@rollup/rollup-linux-x64-musl" "4.13.0"
-    "@rollup/rollup-win32-arm64-msvc" "4.13.0"
-    "@rollup/rollup-win32-ia32-msvc" "4.13.0"
-    "@rollup/rollup-win32-x64-msvc" "4.13.0"
+    "@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:
@@ -10588,17 +9847,17 @@ safe-regex-test@^1.0.3:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sass-lookup@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/sass-lookup/-/sass-lookup-3.0.0.tgz#3b395fa40569738ce857bc258e04df2617c48cac"
-  integrity sha512-TTsus8CfFRn1N44bvdEai1no6PqdmDiQUiqW5DlpmtT+tYnIt1tXtDIph5KA1efC+LmioJXSnCtUVpcK9gaKIg==
+sass-lookup@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/sass-lookup/-/sass-lookup-5.0.1.tgz#1f01d7ff21e09d8c9dcf8d05b3fca28f2f96e6ed"
+  integrity sha512-t0X5PaizPc2H4+rCwszAqHZRtr4bugo4pgiCvrBFvIX0XFxnr29g77LJcpyj9A0DcKf7gXMLcgvRjsonYI6x4g==
   dependencies:
-    commander "^2.16.0"
+    commander "^10.0.1"
 
-sass@1.72.0, sass@^1.71.1:
-  version "1.72.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.72.0.tgz#5b9978943fcfb32b25a6a5acb102fc9dabbbf41c"
-  integrity sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==
+sass@1.75.0, sass@^1.71.1:
+  version "1.75.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.75.0.tgz#91bbe87fb02dfcc34e052ddd6ab80f60d392be6c"
+  integrity sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -10616,7 +9875,7 @@ scheduler@^0.23.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
 
-semver@7.6.0, semver@^7.1.1, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0:
+semver@7.6.0, semver@^7.3.4, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0:
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
   integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
@@ -10793,23 +10052,23 @@ smart-buffer@^4.2.0:
   integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
 
 socks-proxy-agent@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-8.0.2.tgz#5acbd7be7baf18c46a3f293a840109a430a640ad"
-  integrity sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-8.0.3.tgz#6b2da3d77364fde6292e810b496cb70440b9b89d"
+  integrity sha512-VNegTZKhuGq5vSD6XNKlbqWhyt/40CgoEw8XxD6dhnm8Jq9IEa3nIa4HwnM8XOqU0CdB0BwWVXusqiFXfHB3+A==
   dependencies:
-    agent-base "^7.0.2"
+    agent-base "^7.1.1"
     debug "^4.3.4"
     socks "^2.7.1"
 
 socks@^2.7.1:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/socks/-/socks-2.8.1.tgz#22c7d9dd7882649043cba0eafb49ae144e3457af"
-  integrity sha512-B6w7tkwNid7ToxjZ08rQMT8M9BJAf8DKx8Ft4NivzH0zBUfd6jldGcisJn/RLgxcX3FPNDdNQCUEMMT79b+oCQ==
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-2.8.3.tgz#1ebd0f09c52ba95a09750afe3f3f9f724a800cb5"
+  integrity sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==
   dependencies:
     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==
@@ -10873,25 +10132,11 @@ spdx-license-ids@^3.0.0:
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.17.tgz#887da8aa73218e51a1d917502d79863161a93f9c"
   integrity sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==
 
-split2@^3.0.0:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/split2/-/split2-3.2.2.tgz#bf2cf2a37d838312c249c89206fd7a17dd12365f"
-  integrity sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==
-  dependencies:
-    readable-stream "^3.0.0"
-
 split2@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/split2/-/split2-4.2.0.tgz#c9c5920904d148bab0b9f67145f245a86aadbfa4"
   integrity sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==
 
-split@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
-  integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
-  dependencies:
-    through "2"
-
 sprintf-js@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.3.tgz#4914b903a2f8b685d17fdf78a70e917e872e444a"
@@ -10902,26 +10147,6 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-standard-version@^9.5.0:
-  version "9.5.0"
-  resolved "https://registry.yarnpkg.com/standard-version/-/standard-version-9.5.0.tgz#851d6dcddf5320d5079601832aeb185dbf497949"
-  integrity sha512-3zWJ/mmZQsOaO+fOlsa0+QK90pwhNd042qEcw6hKFNoLFs7peGyvPffpEBbK/DSGPbyOvli0mUIFv5A4qTjh2Q==
-  dependencies:
-    chalk "^2.4.2"
-    conventional-changelog "3.1.25"
-    conventional-changelog-config-spec "2.1.0"
-    conventional-changelog-conventionalcommits "4.6.3"
-    conventional-recommended-bump "6.1.0"
-    detect-indent "^6.0.0"
-    detect-newline "^3.1.0"
-    dotgitignore "^2.1.0"
-    figures "^3.1.0"
-    find-up "^5.0.0"
-    git-semver-tags "^4.0.0"
-    semver "^7.1.1"
-    stringify-package "^1.0.1"
-    yargs "^16.0.0"
-
 statuses@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
@@ -10944,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.4:
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/storybook/-/storybook-8.0.4.tgz#f2191d4082d8a1bfa065f358e63e8205533d9efc"
-  integrity sha512-FUr3Uc2dSAQ80jINH5fSXz7zD7Ncn08OthROjwRtHAH+jMf4wxyZ+RhF3heFy9xLot2/HXOLIWyHyzZZMtGhxg==
+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.4"
+    "@storybook/cli" "8.0.9"
 
 stream-read-all@^3.0.1:
   version "3.0.1"
@@ -11038,7 +10263,7 @@ string.prototype.trimend@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-string.prototype.trimstart@^1.0.7:
+string.prototype.trimstart@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
   integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
@@ -11054,11 +10279,6 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
-  integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==
-
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -11075,11 +10295,6 @@ stringify-object@^3.2.1:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-stringify-package@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/stringify-package/-/stringify-package-1.0.1.tgz#e5aa3643e7f74d0f28628b72f3dad5cecfc3ba85"
-  integrity sha512-sa4DUQsYciMP1xhKWGuFM04fB0LG/9DlluZoSVywUMRNvzid6XucHK0/90xGxRoHrAaROrcHK1aPKaijCtSrhg==
-
 strip-ansi@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -11123,11 +10338,6 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
-strip-json-comments@1.0.x:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
-  integrity sha512-AOPG8EBc5wAikaG1/7uFCNFJwnKOuQwFTpYBdTW6OvWHeZBQBrAA/amefHGrEiOnCPcLFZK6FUPtWVKpQVIRgg==
-
 strip-json-comments@^3.0.1, strip-json-comments@^3.1.1, strip-json-comments@~3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -11157,18 +10367,18 @@ stylelint-config-recommended@^14.0.0:
   resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-14.0.0.tgz#b395c7014838d2aaca1755eebd914d0bb5274994"
   integrity sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==
 
-stylelint-config-standard-scss@12.0.0:
-  version "12.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-12.0.0.tgz#fbd7881080eb3585ca63c1ce6791a5ff42c94489"
-  integrity sha512-ATh3EcEOLZq0iwlFaBdIsSavrla0lNtJ7mO7hdE7DgVT6imozRggFSqd4cFcjzVnOLKv/uJT63MmqA1acIflbw==
+stylelint-config-standard-scss@13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz#2be36ca13087325a42c1f26df8267808667cc886"
+  integrity sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==
   dependencies:
     stylelint-config-recommended-scss "^14.0.0"
-    stylelint-config-standard "^35.0.0"
+    stylelint-config-standard "^36.0.0"
 
-stylelint-config-standard@^35.0.0:
-  version "35.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-35.0.0.tgz#f4574670affb72b6c99d2b5ca5ad010a11ee8d19"
-  integrity sha512-JyQrNZk2BZwVKFauGGxW2U6RuhIfQ4XoHHo+rBzMHcAkLnwI/knpszwXjzxiMgSfcxbZBckM7Vq4LHoANTR85g==
+stylelint-config-standard@^36.0.0:
+  version "36.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-36.0.0.tgz#6704c044d611edc12692d4a5e37b039a441604d4"
+  integrity sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==
   dependencies:
     stylelint-config-recommended "^14.0.0"
 
@@ -11183,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"
@@ -11225,16 +10435,15 @@ 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@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/stylus-lookup/-/stylus-lookup-3.0.2.tgz#c9eca3ff799691020f30b382260a67355fefdddd"
-  integrity sha512-oEQGHSjg/AMaWlKe7gqsnYzan8DLcGIHe0dUaFkucZZ14z4zjENRlQMCHT4FNsiWnJf17YN9OvrCfCoi7VvOyg==
+stylus-lookup@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/stylus-lookup/-/stylus-lookup-5.0.1.tgz#3c4d116c3b1e8e1a8169c0d9cd20e608595560f4"
+  integrity sha512-tLtJEd5AGvnVy4f9UHQMw4bkJJtaAcmo54N+ovQBjDY3DuWyK9Eltxzr5+KG0q4ew6v2EHyuWWNnHeiw/Eo7rQ==
   dependencies:
-    commander "^2.8.1"
-    debug "^4.1.0"
+    commander "^10.0.1"
 
 supports-color@^2.0.0:
   version "2.0.0"
@@ -11255,6 +10464,13 @@ supports-color@^7.0.0, supports-color@^7.1.0, supports-color@^7.2.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-color@~8.1.1:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
 supports-hyperlinks@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz#c711352a5c89070779b4dad54c05a2f14b15c94b"
@@ -11286,10 +10502,10 @@ table-layout@^3.0.0:
     typical "^7.1.1"
     wordwrapjs "^5.1.0"
 
-table@^6.8.1:
-  version "6.8.1"
-  resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
-  integrity sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==
+table@^6.8.2:
+  version "6.8.2"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.8.2.tgz#c5504ccf201213fa227248bdc8c5569716ac6c58"
+  integrity sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==
   dependencies:
     ajv "^8.0.1"
     lodash.truncate "^4.4.2"
@@ -11385,11 +10601,6 @@ tempy@^1.0.1:
     type-fest "^0.16.0"
     unique-string "^2.0.0"
 
-text-extensions@^1.0.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.9.0.tgz#1853e45fee39c945ce6f6c36b2d659b5aabc2a26"
-  integrity sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==
-
 text-extensions@^2.0.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-2.4.0.tgz#a1cfcc50cf34da41bfd047cc744f804d1680ea34"
@@ -11400,7 +10611,7 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
-through2@^2.0.0, through2@^2.0.3:
+through2@^2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
   integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
@@ -11408,14 +10619,7 @@ through2@^2.0.0, through2@^2.0.3:
     readable-stream "~2.3.6"
     xtend "~4.0.1"
 
-through2@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-4.0.2.tgz#a7ce3ac2a7a8b0b966c80e7c49f0484c3b239764"
-  integrity sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==
-  dependencies:
-    readable-stream "3"
-
-through@2, "through@>=2.2.7 <3", through@^2.3.8:
+"through@>=2.2.7 <3", through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
@@ -11443,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"
@@ -11477,17 +10681,12 @@ transform-ast@^2.4.4:
     merge-source-map "1.0.4"
     nanobench "^2.1.1"
 
-trim-newlines@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
-  integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
-
 trough@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-ts-api-utils@^1.0.1:
+ts-api-utils@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
   integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
@@ -11497,7 +10696,7 @@ ts-dedent@^2.0.0, ts-dedent@^2.2.0:
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
 
-ts-graphviz@^1.5.0:
+ts-graphviz@^1.8.1:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/ts-graphviz/-/ts-graphviz-1.8.2.tgz#6c4768d05f8a36e37abe34855ffe89a4c4bd96cc"
   integrity sha512-5YhbFoHmjxa7pgQLkB07MtGnGJ/yhvjmc9uhsnDBEICME6gkPf83SBwLDQqGDoCa3XzUMWLk1AU2Wn1u1naDtA==
@@ -11515,13 +10714,12 @@ ts-simple-type@2.0.0-next.0, ts-simple-type@~2.0.0-next.0:
   resolved "https://registry.yarnpkg.com/ts-simple-type/-/ts-simple-type-2.0.0-next.0.tgz#262a321ba2a17aa57f88ef31e30453beff5be246"
   integrity sha512-A+hLX83gS+yH6DtzNAhzZbPfU+D9D8lHlTSd7GeoMRBjOt3GRylDqLTYbdmjA4biWvq2xSfpqfIDj2l0OA/BVg==
 
-tsconfig-paths@^3.10.1:
-  version "3.15.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
-  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
+tsconfig-paths@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz#ef78e19039133446d244beac0fd6a1632e2d107c"
+  integrity sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==
   dependencies:
-    "@types/json5" "^0.0.29"
-    json5 "^1.0.2"
+    json5 "^2.2.2"
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
@@ -11547,10 +10745,10 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
-tsx@4.7.1:
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/tsx/-/tsx-4.7.1.tgz#27af6cbf4e1cdfcb9b5425b1c61bb7e668eb5e84"
-  integrity sha512-8d6VuibXHtlN5E3zFkgY8u4DX7Y3Z27zvvPKVmLon/D4AjuKzarkUBTLDBgj9iTQ0hg5xM7c/mYiRVM+HETf0g==
+tsx@4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/tsx/-/tsx-4.7.2.tgz#a108b1a6e16876cd4c9a4b4ba263f2a07f9cf562"
+  integrity sha512-BCNd4kz6fz12fyrgCTEdZHGJ9fWTGeUzXmQysh0RVocDY3h4frk05ZNCXSy4kIenF7y/QnrdiVpTsyNRn6vlAw==
   dependencies:
     esbuild "~0.19.10"
     get-tsconfig "^4.7.2"
@@ -11574,16 +10772,6 @@ type-fest@^0.16.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.16.0.tgz#3240b891a78b0deae910dbeb86553e552a148860"
   integrity sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==
 
-type-fest@^0.18.0:
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
-  integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
-
-type-fest@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
-  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
-
 type-fest@^0.21.3:
   version "0.21.3"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
@@ -11644,7 +10832,7 @@ typed-array-byte-offset@^1.0.2:
     has-proto "^1.0.3"
     is-typed-array "^1.1.13"
 
-typed-array-length@^1.0.5:
+typed-array-length@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
   integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
@@ -11656,30 +10844,24 @@ typed-array-length@^1.0.5:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typedarray@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
-  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
-
-typescript@5.3.3:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
-  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
-
-typescript@5.4.3, typescript@~5.4.2:
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.3.tgz#5c6fedd4c87bee01cd7a528a30145521f8e0feff"
-  integrity sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==
+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.1"
+    "@typescript-eslint/parser" "7.7.1"
+    "@typescript-eslint/utils" "7.7.1"
 
-typescript@^3.9.10, typescript@^3.9.7:
-  version "3.9.10"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
-  integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
+typescript@5.4.2:
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372"
+  integrity sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==
 
-typescript@^4.0.0, typescript@^4.9.5:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@5.4.5, typescript@^5.0.4, typescript@^5.4.4, typescript@~5.4.2:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
+  integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
 
 typescript@~5.2.0:
   version "5.2.2"
@@ -11769,11 +10951,6 @@ unified@^9.2.1:
     trough "^1.0.0"
     vfile "^4.0.0"
 
-uniq@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
-  integrity sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==
-
 unique-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
@@ -11872,9 +11049,9 @@ unpipe@1.0.0, unpipe@~1.0.0:
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
 unplugin@^1.3.1:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.10.0.tgz#9cb8140f61e3fbcf27c7c38d305e9d62d5dbbf0b"
-  integrity sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.10.1.tgz#8ceda065dc71bc67d923dea0920f05c67f2cd68c"
+  integrity sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==
   dependencies:
     acorn "^8.11.3"
     chokidar "^3.6.0"
@@ -11987,25 +11164,26 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-vite-plugin-dts@3.7.3:
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/vite-plugin-dts/-/vite-plugin-dts-3.7.3.tgz#072ec78face3b76a7a492ffeb83469ef5318ce0b"
-  integrity sha512-26eTlBYdpjRLWCsTJebM8vkCieE+p9gP3raf+ecDnzzK5E3FG6VE1wcy55OkRpfWWVlVvKkYFe6uvRHYWx7Nog==
+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.39.0"
+    "@microsoft/api-extractor" "7.43.0"
     "@rollup/pluginutils" "^5.1.0"
-    "@vue/language-core" "^1.8.26"
+    "@vue/language-core" "^1.8.27"
     debug "^4.3.4"
     kolorist "^1.8.0"
-    vue-tsc "^1.8.26"
+    magic-string "^0.30.8"
+    vue-tsc "^1.8.27"
 
-vite@5.2.6:
-  version "5.2.6"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.6.tgz#fc2ce309e0b4871e938cb0aca3b96c422c01f222"
-  integrity sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==
+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.36"
+    postcss "^8.4.38"
     rollup "^4.13.0"
   optionalDependencies:
     fsevents "~2.3.3"
@@ -12058,7 +11236,7 @@ vue-template-compiler@^2.7.14:
     de-indent "^1.0.2"
     he "^1.2.0"
 
-vue-tsc@^1.8.26:
+vue-tsc@^1.8.27:
   version "1.8.27"
   resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.8.27.tgz#feb2bb1eef9be28017bb9e95e2bbd1ebdd48481c"
   integrity sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==
@@ -12291,15 +11469,24 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml-eslint-parser@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/yaml-eslint-parser/-/yaml-eslint-parser-1.2.2.tgz#1a9673ebe254328cfc2fa99f297f6d8c9364ccd8"
+  integrity sha512-pEwzfsKbTrB8G3xc/sN7aw1v6A6c/pKxLAkjclnAyo5g5qOh6eL9WGu0o3cSDQZKrTNk4KL4lQSwZW+nBkANEg==
+  dependencies:
+    eslint-visitor-keys "^3.0.0"
+    lodash "^4.17.21"
+    yaml "^2.0.0"
+
 yaml@2.3.4:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.4.tgz#53fc1d514be80aabf386dc6001eb29bf3b7523b2"
   integrity sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==
 
-yargs-parser@^20.2.2, yargs-parser@^20.2.3:
-  version "20.2.9"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
-  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+yaml@^2.0.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.1.tgz#2e57e0b5e995292c25c75d2658f0664765210eed"
+  integrity sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==
 
 yargs-parser@^21.1.1:
   version "21.1.1"
@@ -12319,19 +11506,6 @@ yargs@17.7.2, yargs@^17.0.0, yargs@^17.7.2:
     y18n "^5.0.5"
     yargs-parser "^21.1.1"
 
-yargs@^16.0.0, yargs@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
-  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
-  dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.0"
-    y18n "^5.0.5"
-    yargs-parser "^20.2.2"
-
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
@@ -12341,9 +11515,9 @@ yauzl@^2.10.0:
     fd-slicer "~1.1.0"
 
 ylru@^1.2.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.3.2.tgz#0de48017473275a4cbdfc83a1eaf67c01af8a785"
-  integrity sha512-RXRJzMiK6U2ye0BlGGZnmpwJDPgakn6aNQ0A7gHRbD4I0uvK4TW6UqkK1V0pp9jskjJBAXd3dRrbzWkqJ+6cxA==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.4.0.tgz#0cf0aa57e9c24f8a2cbde0cc1ca2c9592ac4e0f6"
+  integrity sha512-2OQsPNEmBCvXuFlIni/a+Rn+R2pHW9INm0BxXJ4hVDA8TirqMj+J/Rp9ItLatT/5pZqWwefVrTQcHpixsxnVlA==
 
 yocto-queue@^0.1.0:
   version "0.1.0"