diff --git a/.changeset/2024-11-10-update-icons.md b/.changeset/2024-11-10-update-icons.md
new file mode 100644
index 0000000000..58d8ed8161
--- /dev/null
+++ b/.changeset/2024-11-10-update-icons.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-icons': minor
+---
+
+Added icon number 2632.
+
diff --git a/.changeset/dirty-mayflies-taste.md b/.changeset/dirty-mayflies-taste.md
new file mode 100644
index 0000000000..b8e7157047
--- /dev/null
+++ b/.changeset/dirty-mayflies-taste.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': major
+---
+
+Updated list group to v2 and added new options: list links, list documents and list switches.
diff --git a/.changeset/fast-bats-poke.md b/.changeset/fast-bats-poke.md
new file mode 100644
index 0000000000..d9c7be75ce
--- /dev/null
+++ b/.changeset/fast-bats-poke.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Created the `post-list` and `post-list-item` components.
diff --git a/.changeset/gold-chefs-rule.md b/.changeset/gold-chefs-rule.md
new file mode 100644
index 0000000000..183a0a9024
--- /dev/null
+++ b/.changeset/gold-chefs-rule.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Created token-based styles for `<ul>` elements.
diff --git a/.changeset/grumpy-parrots-wonder.md b/.changeset/grumpy-parrots-wonder.md
new file mode 100644
index 0000000000..1942021760
--- /dev/null
+++ b/.changeset/grumpy-parrots-wonder.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed an issue with the post-collapsible throwing an invalid selector error.
diff --git a/.changeset/neat-suits-provide.md b/.changeset/neat-suits-provide.md
new file mode 100644
index 0000000000..0e5e0cf803
--- /dev/null
+++ b/.changeset/neat-suits-provide.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Updated basic `<ul>` element docs and moved them from `Utilities/Lists` to `Foundation/Typography/Lists`.
diff --git a/.changeset/new-goats-impress.md b/.changeset/new-goats-impress.md
new file mode 100644
index 0000000000..d1bd841e3c
--- /dev/null
+++ b/.changeset/new-goats-impress.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated vertical-align utility
diff --git a/.changeset/pre.json b/.changeset/pre.json
index 5169ad951f..a948833b59 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -24,6 +24,7 @@
   "changesets": [
     "2024-10-17-update-icons",
     "2024-10-27-update-icons",
+    "2024-11-10-update-icons",
     "beige-jobs-do",
     "big-frogs-admire",
     "breezy-cups-add",
@@ -32,17 +33,25 @@
     "cold-baboons-appear",
     "cold-panthers-vanish",
     "cuddly-bears-check",
+    "cuddly-gifts-film",
+    "dirty-mayflies-taste",
     "eight-turkeys-matter",
     "eleven-keys-work",
     "empty-islands-kneel",
     "fair-actors-scream",
+    "fast-bats-poke",
     "fast-fans-wash",
+    "fifty-dodos-wait",
+    "fifty-students-call",
     "five-hornets-sin",
     "friendly-insects-breathe",
     "funny-shrimps-care",
     "giant-games-swim",
+    "gold-chairs-grin",
+    "gold-chefs-rule",
     "gorgeous-flowers-flow",
     "great-humans-talk",
+    "grumpy-parrots-wonder",
     "heavy-rats-explode",
     "kind-buses-trade",
     "kind-papayas-provide",
@@ -51,26 +60,33 @@
     "loud-dingos-remember",
     "lovely-deers-itch",
     "lovely-mirrors-travel",
+    "neat-suits-provide",
     "nervous-rocks-shop",
+    "new-goats-impress",
     "ninety-nails-float",
     "pink-weeks-relate",
     "plenty-apricots-raise",
     "popular-games-rush",
     "proud-actors-knock",
+    "proud-cheetahs-act",
     "proud-moons-impress",
     "quick-eagles-watch",
     "quiet-apes-rhyme",
+    "rare-dryers-count",
     "red-cobras-cry",
     "red-lies-lick",
+    "rich-timers-listen",
     "selfish-bats-run",
     "selfish-ways-know",
     "shaggy-experts-give",
     "sharp-baboons-smile",
     "sharp-crews-watch",
     "shiny-ears-care",
+    "shy-walls-exercise",
     "silver-coins-invent",
     "six-spiders-smoke",
     "sixty-items-promise",
+    "slimy-rockets-pull",
     "strange-bottles-impress",
     "tame-terms-push",
     "three-lies-do",
diff --git a/.changeset/proud-cheetahs-act.md b/.changeset/proud-cheetahs-act.md
new file mode 100644
index 0000000000..dcb4a242f0
--- /dev/null
+++ b/.changeset/proud-cheetahs-act.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': major
+'@swisspost/design-system-styles': major
+---
+
+Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class.
diff --git a/.changeset/quick-buses-give.md b/.changeset/quick-buses-give.md
new file mode 100644
index 0000000000..d3212d7400
--- /dev/null
+++ b/.changeset/quick-buses-give.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added new Menu Button components (post-menu-button, post-menu-trigger, and post-menu-item) for creating accessible dropdown menus.
diff --git a/.changeset/rich-timers-listen.md b/.changeset/rich-timers-listen.md
new file mode 100644
index 0000000000..b6fbcdf2d1
--- /dev/null
+++ b/.changeset/rich-timers-listen.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added the skiplinks component to styles and documentation.
diff --git a/.changeset/shy-walls-exercise.md b/.changeset/shy-walls-exercise.md
new file mode 100644
index 0000000000..ba712642c4
--- /dev/null
+++ b/.changeset/shy-walls-exercise.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added close button web component.
diff --git a/.github/ISSUE_TEMPLATE/component-v2.yml b/.github/ISSUE_TEMPLATE/component-v2.yml
index dfefd7c352..ace2c22cfb 100644
--- a/.github/ISSUE_TEMPLATE/component-v2.yml
+++ b/.github/ISSUE_TEMPLATE/component-v2.yml
@@ -28,14 +28,31 @@ body:
       options:
         - label: Tokens for this component are ready
   - type: textarea
-    id: tasks
+    id: tasksdesign
     attributes:
-      label: Tasks
+      label: Tasks design
+      description: Default tasks for the design team. Can be edited later according to needs.
+      value: |
+        ```[tasklist]
+        ### 🎨 Design
+        - [ ] Design component according to WIKIT
+        - [ ] Update dependencies
+        - [ ] Add & test compo in layout examples
+        - [ ] Designer review
+        - [ ] Documentation: Overview and usage (about, compo overview, compo props, usage, examples)
+        - [ ] Documentation: Technical documentation (anatomy, accessibility)
+        - [ ] Documentation: Review (content correctness, understandability, gaps)
+        ```
+  - type: textarea
+    id: tasksdev
+    attributes:
+      label: Tasks development
       description: Default tasks for the dev team. Can be edited later according to needs.
       value: |
         ```[tasklist]
-        ### 💻 Tasks
+        ### 💻 Development
         - [ ] Review Design (All states present? Possible to implement?)
+        - [ ] Tokenization
         - [ ] HTML/CSS implementation
         - [ ] Web component implementation
         - [ ] Documentation in Storybook
diff --git a/.github/workflows/build-tokens.yaml b/.github/workflows/build-tokens.yaml
index 5bc19a4479..70c2fe428a 100644
--- a/.github/workflows/build-tokens.yaml
+++ b/.github/workflows/build-tokens.yaml
@@ -21,57 +21,3 @@ jobs:
 
       - name: Build tokens & dependencies
         run: pnpm --filter design-system-tokens... build
-
-      - name: Create Summary
-        id: summary
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const fs = require('fs')
-            const path = require('path')
-
-            const inputFileNames = fs.readdirSync('packages/tokens/tokensstudio-generated')
-            const inputFiles = inputFileNames.map(fileName => ({
-              type: path.extname(fileName).replace(/^\./, ''),
-              name: fileName,
-              content: fs.readFileSync(`packages/tokens/tokensstudio-generated/${fileName}`, 'utf8')
-            }))
-
-            const outputOrder = [
-              'index.scss',
-              'core.scss',
-              'scheme.scss',
-              'device.scss',
-              'channel.scss',
-              'theme.scss',
-              'components.scss',
-            ]
-            const outputFileNames = fs.readdirSync('packages/tokens/dist')
-            const outputFiles = outputFileNames
-              .map(fileName => ({
-                type: path.extname(fileName).replace(/^\./, ''),
-                name: fileName,
-                content: fs.readFileSync(`packages/tokens/dist/${fileName}`, 'utf8')
-              }))
-              .map(({ type, name, content }) => {
-                if (type === 'scss') content = content.replaceAll('\n\n', '\n&nbsp;\n').replaceAll('$', '&#36;').replaceAll('  ', '&nbsp;&nbsp;')
-                return { type, name, content }
-              })
-              .sort((a, b) => (outputOrder.includes(a.name) ? outputOrder.indexOf(a.name) : 1000) - (outputOrder.includes(b.name) ? outputOrder.indexOf(b.name) : 1000))
-
-            return `# Token Build
-            ## Input
-            ${inputFiles.map(({ type, name, content }) => `<details>
-              <summary><code>${name}</code></summary>
-              <pre lang="${type}">${content}</pre>
-            </details>`).join('\n')}
-
-            ## Output
-            ${outputFiles.map(({ type, name, content }) => `<details>
-              <summary><code>${name}</code></summary>
-              <pre lang="${type}">${content}</pre>
-            </details>`).join('\n')}
-            `
-
-      - name: Output Summary
-        run: echo -e ${{ steps.summary.outputs.result }} >> $GITHUB_STEP_SUMMARY
diff --git a/.github/workflows/create-token-pr.yaml b/.github/workflows/create-token-pr.yaml
index 9a744f478e..0735130155 100644
--- a/.github/workflows/create-token-pr.yaml
+++ b/.github/workflows/create-token-pr.yaml
@@ -8,7 +8,7 @@ name: Create Token PR
 on:
   push:
     branches:
-      - tokens/v*
+      - tokens/*
 
 jobs:
   create_pr:
@@ -46,8 +46,17 @@ jobs:
             echo "exists=false" >> $GITHUB_OUTPUT
           fi
 
-      # If the branch exits, update the PR
-      - name: Update PR
+      # If the branch does not exit, create it
+      - name: Create PR Branch
+        if: steps.pr-branch.outputs.exists == 'false'
+        run: |
+          git checkout -b ${{ steps.pr-branch.outputs.name }} ${{ github.ref_name }}
+          git push --set-upstream origin ${{ steps.pr-branch.outputs.name }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
+
+      # If the branch exits, update it
+      - name: Update PR Branch
         if: steps.pr-branch.outputs.exists == 'true'
         run: |
           git checkout ${{ steps.pr-branch.outputs.name }}
@@ -56,12 +65,22 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
 
-      # If the branch does not exit, create the PR
+      # Check if a PR already exist
+      - name: Get PR
+        id: pr
+        run: |
+          if [[ -n $(gh pr list --head "${{ steps.pr-branch.outputs.name }}") ]]; then
+            echo "exists=true" >> $GITHUB_OUTPUT
+          else
+            echo "exists=false" >> $GITHUB_OUTPUT
+          fi
+        env:
+          GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
+
+      # If the PR does not exit, create it
       - name: Create PR
-        if: steps.pr-branch.outputs.exists == 'false'
+        if: steps.pr.outputs.exists == 'false'
         run: |
-          git checkout -b ${{ steps.pr-branch.outputs.name }} ${{ github.ref_name }}
-          git push --set-upstream origin ${{ steps.pr-branch.outputs.name }}
           gh pr create --title "chore(tokens): :art: update tokens" --body "Merge this PR to update the tokens in the main branch." --base main
         env:
           GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
index 11eca2d195..14bd6d34d2 100644
--- a/packages/components-angular/CHANGELOG.md
+++ b/packages/components-angular/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @swisspost/design-system-components-angular-workspace
 
+## 1.1.10-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+  - @swisspost/design-system-components@9.0.0-next.4
+
 ## 1.1.10-next.3
 
 ### Patch Changes
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index 06c7e9eb61..04519844ac 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular-workspace",
-  "version": "1.1.10-next.3",
+  "version": "1.1.10-next.4",
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "ng build components",
@@ -18,8 +18,8 @@
     "@angular/platform-browser": "18.2.10",
     "@angular/platform-browser-dynamic": "18.2.10",
     "@angular/router": "18.2.10",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "zone.js": "0.14.8"
diff --git a/packages/components-angular/projects/components/CHANGELOG.md b/packages/components-angular/projects/components/CHANGELOG.md
index c897490ffa..8a2305d0ef 100644
--- a/packages/components-angular/projects/components/CHANGELOG.md
+++ b/packages/components-angular/projects/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-angular
 
+## 9.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Minor Changes
diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json
index e82f5da166..040548d639 100644
--- a/packages/components-angular/projects/components/package.json
+++ b/packages/components-angular/projects/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Swiss Post Design System - Angular Wrapper Components",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "tslib": "2.6.3",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.3"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.4"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",
diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md
index 2345d27a43..e1503d21ca 100644
--- a/packages/components-react/CHANGELOG.md
+++ b/packages/components-react/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-react
 
+## 9.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Patch Changes
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 8238f83559..76bb2f2ae5 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Design System React Components for easy integration with the React ecosystem",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
     "lint": "eslint src/**/*.ts"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.3"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.4"
   },
   "devDependencies": {
     "@types/node": "20.14.14",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4eb3171fc0..2f4eb8c9fb 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,23 @@
 # @swisspost/design-system-components
 
+## 9.0.0-next.4
+
+### Major Changes
+
+- Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3659](https://github.com/swisspost/design-system/pull/3659))
+
+### Minor Changes
+
+- Created the `post-list` and `post-list-item` components. (by [@myrta2302](https://github.com/myrta2302) with [#3812](https://github.com/swisspost/design-system/pull/3812))
+
+- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880))
+
+### Patch Changes
+
+- Fixed an issue with the post-collapsible throwing an invalid selector error. (by [@alizedebray](https://github.com/alizedebray) with [#3726](https://github.com/swisspost/design-system/pull/3726))
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Major Changes
diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 2355ec2939..2975071b22 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -113,6 +113,10 @@ By setting a component's name as a `component` property in your stories' metadat
 All components should have automated tests.
 These tests are available in the `cypress/e2e` folder.
 
+### Set inital component Visibility to hidden
+
+To prevent flickering while components load, add each new component to the list in `packages/styles/src/utilities/_not-defined.scss`, which applies `visibility: hidden` to all listed components until they are registered by the browser (when the hydrated attribute actually starts to take effect).
+
 ## Stencil
 
 ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
diff --git a/packages/components/cypress/e2e/closebutton.cy.ts b/packages/components/cypress/e2e/closebutton.cy.ts
new file mode 100644
index 0000000000..275adfb50a
--- /dev/null
+++ b/packages/components/cypress/e2e/closebutton.cy.ts
@@ -0,0 +1,22 @@
+const CLOSE_BTN_ID = 'de313349-0c0b-4baf-adc6-cb8c2e36fc1a';
+
+describe('Close button', () => {
+  describe('default', () => {
+    beforeEach(() => {
+      cy.getComponent('post-closebutton', CLOSE_BTN_ID);
+    });
+
+    it('should render with a close button and a11y label', () => {
+      cy.get('@closebutton').should('exist');
+      cy.get('@closebutton').find('.btn-icon-close').should('exist');
+      cy.get('@closebutton').find('span.visually-hidden').should('exist');
+    });
+  });
+});
+
+describe('Accessibility', () => {
+  it('Has no detectable a11y violations on load for all variants', () => {
+    cy.getSnapshots('post-closebutton');
+    cy.checkA11y('#root-inner');
+  });
+});
diff --git a/packages/components/cypress/e2e/list.cy.ts b/packages/components/cypress/e2e/list.cy.ts
new file mode 100644
index 0000000000..0bf19446f9
--- /dev/null
+++ b/packages/components/cypress/e2e/list.cy.ts
@@ -0,0 +1,60 @@
+describe('PostList Component', { baseUrl: null, includeShadowDom: false }, () => {
+  beforeEach(() => {
+    // Visit the page where the component is rendered
+    cy.visit('./cypress/fixtures/post-list.test.html');
+  });
+
+  it('should render the post-list component', () => {
+    // Check if the post-list component is rendered
+    cy.get('post-list').should('exist');
+  });
+
+  it('should have an id for the first div in post-list', () => {
+    // Ensure the first div inside post-list has an id attribute
+    cy.get('post-list')
+      .find('div')
+      .first()
+      .should('have.attr', 'id')
+      .and('not.be.empty')
+      .then($div => {
+        const id = $div['id'];
+        cy.log(`First div ID: ${id}`);
+      });
+  });
+
+  it('should throw an error if the title is missing', () => {
+    // Check for the mandatory title accessibility error if no title is provided
+    cy.on('uncaught:exception', err => {
+      expect(err.message).to.include(
+        'Please provide a title to the list component. Title is mandatory for accessibility purposes.',
+      );
+      return false;
+    });
+    cy.get('post-list').within(() => {
+      cy.get('[slot="post-list-item"]').first().invoke('remove');
+    });
+  });
+
+  it('should hide the title when title-hidden is set', () => {
+    // Set the `title-hidden` property and check if the title is hidden
+    cy.get('post-list').invoke('attr', 'title-hidden', true);
+    cy.get('post-list div').first().should('have.class', 'visually-hidden');
+  });
+
+  it('should render horizontally when the horizontal attribute is set', () => {
+    // Set the `horizontal` property and verify if the list has a horizontal layout
+    cy.get('post-list').invoke('attr', 'horizontal', true);
+    cy.get('post-list').should('have.attr', 'horizontal', 'true');
+  });
+
+  it('should ensure post-list-item components have the correct slot and role', () => {
+    // Verify that the `post-list-item` components have the correct slot and role attributes
+    cy.get('post-list').within(() => {
+      cy.get('post-list-item').each($el => {
+        cy.wrap($el)
+          .should('have.attr', 'slot', 'post-list-item')
+          .and('have.attr', 'role', 'listitem');
+      });
+    });
+  });
+});
diff --git a/packages/components/cypress/fixtures/post-list.test.html b/packages/components/cypress/fixtures/post-list.test.html
new file mode 100644
index 0000000000..bd2da7fc62
--- /dev/null
+++ b/packages/components/cypress/fixtures/post-list.test.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
+  </head>
+  <body>
+    <post-list>
+      <h3>TITLE</h3>
+      <post-list-item><post-tag>Title 1</post-tag></post-list-item>
+      <post-list-item><post-tag>Title 2</post-tag></post-list-item>
+      <post-list-item><post-tag>Title 3</post-tag></post-list-item>
+      <post-list-item><post-tag>Title 4</post-tag></post-list-item>
+      <post-list-item><post-tag>Title 5</post-tag></post-list-item>
+    </post-list>
+  </body>
+</html>
diff --git a/packages/components/package.json b/packages/components/package.json
index f2591ed525..221a556679 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -40,7 +40,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.8",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0"
   },
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 619fb8525f..8b23b14ee3 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -93,6 +93,12 @@ export namespace Components {
          */
         "userid"?: string;
     }
+    interface PostBreadcrumbItem {
+        /**
+          * The optional URL to which the breadcrumb item will link.
+         */
+        "url"?: string | URL;
+    }
     /**
      * @class PostCardControl - representing a stencil component
      */
@@ -142,6 +148,8 @@ export namespace Components {
          */
         "value": string;
     }
+    interface PostClosebutton {
+    }
     interface PostCollapsible {
         /**
           * If `true`, the element is collapsed otherwise it is displayed.
@@ -217,12 +225,51 @@ export namespace Components {
          */
         "url": string;
     }
+    interface PostList {
+        /**
+          * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
+         */
+        "horizontal": boolean;
+        /**
+          * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
+         */
+        "titleHidden": boolean;
+    }
+    interface PostListItem {
+    }
     interface PostLogo {
         /**
           * The URL to which the user is redirected upon clicking the logo.
          */
         "url": string | URL;
     }
+    interface PostMenu {
+        /**
+          * Hides the popover menu and restores focus to the previously focused element.
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+         */
+        "placement"?: Placement;
+        /**
+          * Displays the popover menu, focusing the first menu item.
+          * @param target - The HTML element relative to which the popover menu should be displayed.
+         */
+        "show": (target: HTMLElement) => Promise<void>;
+        /**
+          * Toggles the menu visibility based on its current state.
+         */
+        "toggle": (target: HTMLElement) => Promise<void>;
+    }
+    interface PostMenuItem {
+    }
+    interface PostMenuTrigger {
+        /**
+          * ID of the menu element that this trigger is linked to. Used to open and close the specified menu.
+         */
+        "for": string;
+    }
     interface PostPopover {
         /**
           * Show a little indicator arrow
@@ -388,6 +435,10 @@ export interface PostLanguageOptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostLanguageOptionElement;
 }
+export interface PostMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPostMenuElement;
+}
 export interface PostPopovercontainerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostPopovercontainerElement;
@@ -436,6 +487,12 @@ declare global {
         prototype: HTMLPostAvatarElement;
         new (): HTMLPostAvatarElement;
     };
+    interface HTMLPostBreadcrumbItemElement extends Components.PostBreadcrumbItem, HTMLStencilElement {
+    }
+    var HTMLPostBreadcrumbItemElement: {
+        prototype: HTMLPostBreadcrumbItemElement;
+        new (): HTMLPostBreadcrumbItemElement;
+    };
     interface HTMLPostCardControlElementEventMap {
         "postInput": { state: boolean; value: string };
         "postChange": { state: boolean; value: string };
@@ -457,6 +514,12 @@ declare global {
         prototype: HTMLPostCardControlElement;
         new (): HTMLPostCardControlElement;
     };
+    interface HTMLPostClosebuttonElement extends Components.PostClosebutton, HTMLStencilElement {
+    }
+    var HTMLPostClosebuttonElement: {
+        prototype: HTMLPostClosebuttonElement;
+        new (): HTMLPostClosebuttonElement;
+    };
     interface HTMLPostCollapsibleElementEventMap {
         "postToggle": boolean;
     }
@@ -506,12 +569,53 @@ declare global {
         prototype: HTMLPostLanguageOptionElement;
         new (): HTMLPostLanguageOptionElement;
     };
+    interface HTMLPostListElement extends Components.PostList, HTMLStencilElement {
+    }
+    var HTMLPostListElement: {
+        prototype: HTMLPostListElement;
+        new (): HTMLPostListElement;
+    };
+    interface HTMLPostListItemElement extends Components.PostListItem, HTMLStencilElement {
+    }
+    var HTMLPostListItemElement: {
+        prototype: HTMLPostListItemElement;
+        new (): HTMLPostListItemElement;
+    };
     interface HTMLPostLogoElement extends Components.PostLogo, HTMLStencilElement {
     }
     var HTMLPostLogoElement: {
         prototype: HTMLPostLogoElement;
         new (): HTMLPostLogoElement;
     };
+    interface HTMLPostMenuElementEventMap {
+        "toggleMenu": boolean;
+    }
+    interface HTMLPostMenuElement extends Components.PostMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPostMenuElementEventMap>(type: K, listener: (this: HTMLPostMenuElement, ev: PostMenuCustomEvent<HTMLPostMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPostMenuElementEventMap>(type: K, listener: (this: HTMLPostMenuElement, ev: PostMenuCustomEvent<HTMLPostMenuElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPostMenuElement: {
+        prototype: HTMLPostMenuElement;
+        new (): HTMLPostMenuElement;
+    };
+    interface HTMLPostMenuItemElement extends Components.PostMenuItem, HTMLStencilElement {
+    }
+    var HTMLPostMenuItemElement: {
+        prototype: HTMLPostMenuItemElement;
+        new (): HTMLPostMenuItemElement;
+    };
+    interface HTMLPostMenuTriggerElement extends Components.PostMenuTrigger, HTMLStencilElement {
+    }
+    var HTMLPostMenuTriggerElement: {
+        prototype: HTMLPostMenuTriggerElement;
+        new (): HTMLPostMenuTriggerElement;
+    };
     interface HTMLPostPopoverElement extends Components.PostPopover, HTMLStencilElement {
     }
     var HTMLPostPopoverElement: {
@@ -605,12 +709,19 @@ declare global {
         "post-accordion-item": HTMLPostAccordionItemElement;
         "post-alert": HTMLPostAlertElement;
         "post-avatar": HTMLPostAvatarElement;
+        "post-breadcrumb-item": HTMLPostBreadcrumbItemElement;
         "post-card-control": HTMLPostCardControlElement;
+        "post-closebutton": HTMLPostClosebuttonElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-collapsible-trigger": HTMLPostCollapsibleTriggerElement;
         "post-icon": HTMLPostIconElement;
         "post-language-option": HTMLPostLanguageOptionElement;
+        "post-list": HTMLPostListElement;
+        "post-list-item": HTMLPostListItemElement;
         "post-logo": HTMLPostLogoElement;
+        "post-menu": HTMLPostMenuElement;
+        "post-menu-item": HTMLPostMenuItemElement;
+        "post-menu-trigger": HTMLPostMenuTriggerElement;
         "post-popover": HTMLPostPopoverElement;
         "post-popovercontainer": HTMLPostPopovercontainerElement;
         "post-rating": HTMLPostRatingElement;
@@ -688,6 +799,12 @@ declare namespace LocalJSX {
          */
         "userid"?: string;
     }
+    interface PostBreadcrumbItem {
+        /**
+          * The optional URL to which the breadcrumb item will link.
+         */
+        "url"?: string | URL;
+    }
     /**
      * @class PostCardControl - representing a stencil component
      */
@@ -737,6 +854,8 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface PostClosebutton {
+    }
     interface PostCollapsible {
         /**
           * If `true`, the element is collapsed otherwise it is displayed.
@@ -808,12 +927,42 @@ declare namespace LocalJSX {
          */
         "url"?: string;
     }
+    interface PostList {
+        /**
+          * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
+         */
+        "horizontal"?: boolean;
+        /**
+          * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
+         */
+        "titleHidden"?: boolean;
+    }
+    interface PostListItem {
+    }
     interface PostLogo {
         /**
           * The URL to which the user is redirected upon clicking the logo.
          */
         "url"?: string | URL;
     }
+    interface PostMenu {
+        /**
+          * Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
+         */
+        "onToggleMenu"?: (event: PostMenuCustomEvent<boolean>) => void;
+        /**
+          * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+         */
+        "placement"?: Placement;
+    }
+    interface PostMenuItem {
+    }
+    interface PostMenuTrigger {
+        /**
+          * ID of the menu element that this trigger is linked to. Used to open and close the specified menu.
+         */
+        "for": string;
+    }
     interface PostPopover {
         /**
           * Show a little indicator arrow
@@ -933,12 +1082,19 @@ declare namespace LocalJSX {
         "post-accordion-item": PostAccordionItem;
         "post-alert": PostAlert;
         "post-avatar": PostAvatar;
+        "post-breadcrumb-item": PostBreadcrumbItem;
         "post-card-control": PostCardControl;
+        "post-closebutton": PostClosebutton;
         "post-collapsible": PostCollapsible;
         "post-collapsible-trigger": PostCollapsibleTrigger;
         "post-icon": PostIcon;
         "post-language-option": PostLanguageOption;
+        "post-list": PostList;
+        "post-list-item": PostListItem;
         "post-logo": PostLogo;
+        "post-menu": PostMenu;
+        "post-menu-item": PostMenuItem;
+        "post-menu-trigger": PostMenuTrigger;
         "post-popover": PostPopover;
         "post-popovercontainer": PostPopovercontainer;
         "post-rating": PostRating;
@@ -958,10 +1114,12 @@ declare module "@stencil/core" {
             "post-accordion-item": LocalJSX.PostAccordionItem & JSXBase.HTMLAttributes<HTMLPostAccordionItemElement>;
             "post-alert": LocalJSX.PostAlert & JSXBase.HTMLAttributes<HTMLPostAlertElement>;
             "post-avatar": LocalJSX.PostAvatar & JSXBase.HTMLAttributes<HTMLPostAvatarElement>;
+            "post-breadcrumb-item": LocalJSX.PostBreadcrumbItem & JSXBase.HTMLAttributes<HTMLPostBreadcrumbItemElement>;
             /**
              * @class PostCardControl - representing a stencil component
              */
             "post-card-control": LocalJSX.PostCardControl & JSXBase.HTMLAttributes<HTMLPostCardControlElement>;
+            "post-closebutton": LocalJSX.PostClosebutton & JSXBase.HTMLAttributes<HTMLPostClosebuttonElement>;
             "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
             "post-collapsible-trigger": LocalJSX.PostCollapsibleTrigger & JSXBase.HTMLAttributes<HTMLPostCollapsibleTriggerElement>;
             /**
@@ -969,7 +1127,12 @@ declare module "@stencil/core" {
              */
             "post-icon": LocalJSX.PostIcon & JSXBase.HTMLAttributes<HTMLPostIconElement>;
             "post-language-option": LocalJSX.PostLanguageOption & JSXBase.HTMLAttributes<HTMLPostLanguageOptionElement>;
+            "post-list": LocalJSX.PostList & JSXBase.HTMLAttributes<HTMLPostListElement>;
+            "post-list-item": LocalJSX.PostListItem & JSXBase.HTMLAttributes<HTMLPostListItemElement>;
             "post-logo": LocalJSX.PostLogo & JSXBase.HTMLAttributes<HTMLPostLogoElement>;
+            "post-menu": LocalJSX.PostMenu & JSXBase.HTMLAttributes<HTMLPostMenuElement>;
+            "post-menu-item": LocalJSX.PostMenuItem & JSXBase.HTMLAttributes<HTMLPostMenuItemElement>;
+            "post-menu-trigger": LocalJSX.PostMenuTrigger & JSXBase.HTMLAttributes<HTMLPostMenuTriggerElement>;
             "post-popover": LocalJSX.PostPopover & JSXBase.HTMLAttributes<HTMLPostPopoverElement>;
             "post-popovercontainer": LocalJSX.PostPopovercontainer & JSXBase.HTMLAttributes<HTMLPostPopovercontainerElement>;
             "post-rating": LocalJSX.PostRating & JSXBase.HTMLAttributes<HTMLPostRatingElement>;
diff --git a/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.scss b/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.scss
new file mode 100644
index 0000000000..b701ee7d87
--- /dev/null
+++ b/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.scss
@@ -0,0 +1,44 @@
+@use 'sass:map';
+@use '@swisspost/design-system-styles/mixins/media';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/components';
+@use '@swisspost/design-system-styles/mixins/utilities';
+
+tokens.$default-map: components.$post-breadcrumb;
+
+:host {
+  display: inline-block;
+  @include utilities.focus-style;
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: tokens.get('breadcrumb-padding-block-text');
+  gap: tokens.get('breadcrumb-gap-inline-inner');
+  color: tokens.get('breadcrumb-enabled-fg');
+  text-decoration: tokens.get('breadcrumb-link-enabled-text-decoration');
+
+  post-icon {
+    height: tokens.get('breadcrum-icon-size');
+    width: tokens.get('breadcrum-icon-size');
+  }
+
+  &:hover {
+    color: tokens.get('breadcrumb-hover-fg');
+    text-decoration: tokens.get('breadcrumb-link-hover-text-decoration');
+  }
+
+  @include utilities.high-contrast-mode() {
+    &,
+    &:focus,
+    &:hover {
+      color: LinkText !important;
+    }
+
+    &:visited {
+      color: VisitedText !important;
+    }
+  }
+}
diff --git a/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.tsx b/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.tsx
new file mode 100644
index 0000000000..29380dd7f1
--- /dev/null
+++ b/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.tsx
@@ -0,0 +1,60 @@
+import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+import { version } from '@root/package.json';
+import { checkEmptyOrUrl } from '@/utils';
+
+/**
+ * @slot default - Slot for placing the text inside the breadcrumb item.
+ */
+@Component({
+  tag: 'post-breadcrumb-item',
+  styleUrl: 'post-breadcrumb-item.scss',
+  shadow: true,
+})
+export class PostBreadcrumbItem {
+  @Element() host: HTMLPostBreadcrumbItemElement;
+
+  /**
+   * The optional URL to which the breadcrumb item will link.
+   */
+  @Prop() url?: string | URL;
+
+  private validUrl?: string;
+
+  @Watch('url')
+  validateUrl() {
+    try {
+      this.validUrl = this.constructUrl(this.url);
+    } catch (error) {
+      this.validUrl = undefined;
+    }
+  }
+
+  // Helper to construct a valid URL string or return undefined
+  private constructUrl(value: unknown): string | undefined {
+    const hasBaseURL = /^https?:\/\//.test(String(this.url));
+    if (typeof value === 'string') {
+      const urlString = hasBaseURL
+        ? value
+        : `${window.location.origin}${value}`;
+      checkEmptyOrUrl(urlString, 'The "url" property of the post-breadcrumb-item is invalid');
+      return urlString;
+    } return undefined;
+  }
+
+  connectedCallback() {
+    this.validateUrl();
+  }
+
+  render() {
+    const BreadcrumbTag = this.validUrl ? 'a' : 'span';
+
+    return (
+      <Host data-version={version}>
+        <BreadcrumbTag class="breadcrumb-item" {...(this.validUrl ? { href: this.validUrl } : {})}>
+          <post-icon name="2111" class="breadcrumb-item-icon" />
+          <slot></slot>
+        </BreadcrumbTag>
+      </Host>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/components/src/components/post-breadcrumb-item/readme.md b/packages/components/src/components/post-breadcrumb-item/readme.md
new file mode 100644
index 0000000000..660b1142c6
--- /dev/null
+++ b/packages/components/src/components/post-breadcrumb-item/readme.md
@@ -0,0 +1,37 @@
+# post-breadcrumb-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                              | Type            | Default     |
+| -------- | --------- | -------------------------------------------------------- | --------------- | ----------- |
+| `url`    | `url`     | The optional URL to which the breadcrumb item will link. | `URL \| string` | `undefined` |
+
+
+## Slots
+
+| Slot        | Description                                           |
+| ----------- | ----------------------------------------------------- |
+| `"default"` | Slot for placing the text inside the breadcrumb item. |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-breadcrumb-item --> post-icon
+  style post-breadcrumb-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-closebutton/post-closebutton.tsx b/packages/components/src/components/post-closebutton/post-closebutton.tsx
new file mode 100644
index 0000000000..68d13ef51a
--- /dev/null
+++ b/packages/components/src/components/post-closebutton/post-closebutton.tsx
@@ -0,0 +1,26 @@
+import { Component, Element, h, Host } from '@stencil/core';
+import { version } from '@root/package.json';
+
+/**
+ * @slot default - Slot for placing visually hidden label in the close button.
+ */
+@Component({
+  tag: 'post-closebutton',
+  shadow: false,
+})
+export class PostClosebutton {
+  @Element() host: HTMLPostClosebuttonElement;
+
+  render() {
+    return (
+      <Host data-version={version}>
+        <button class="btn btn-icon-close">
+          <post-icon aria-hidden="true" name="2043"></post-icon>
+          <span class="visually-hidden">
+            <slot></slot>
+          </span>
+        </button>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-closebutton/readme.md b/packages/components/src/components/post-closebutton/readme.md
new file mode 100644
index 0000000000..ca0053c6df
--- /dev/null
+++ b/packages/components/src/components/post-closebutton/readme.md
@@ -0,0 +1,30 @@
+# post-closebutton
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Slots
+
+| Slot        | Description                                                 |
+| ----------- | ----------------------------------------------------------- |
+| `"default"` | Slot for placing visually hidden label in the close button. |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-closebutton --> post-icon
+  style post-closebutton fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx
index 6bf09804d5..e44c2d25c2 100644
--- a/packages/components/src/components/post-collapsible/post-collapsible.tsx
+++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx
@@ -77,7 +77,8 @@ export class PostCollapsible {
 
     await animation.finished;
 
-    animation.commitStyles();
+    const isHostRendered = this.host.offsetParent;
+    if (isHostRendered) animation.commitStyles();
 
     return open;
   }
@@ -87,7 +88,7 @@ export class PostCollapsible {
    */
   private updateTriggers() {
     const triggers: NodeListOf<HTMLPostCollapsibleTriggerElement> = document.querySelectorAll(
-      `post-collapsible-trigger[for=${this.host.id}]`,
+      `post-collapsible-trigger[for="${this.host.id}"]`,
     );
 
     triggers.forEach(trigger => trigger.update());
diff --git a/packages/components/src/components/post-icon/readme.md b/packages/components/src/components/post-icon/readme.md
index 17b972971f..afb94ab2e7 100644
--- a/packages/components/src/components/post-icon/readme.md
+++ b/packages/components/src/components/post-icon/readme.md
@@ -23,7 +23,9 @@ some content
 ### Used by
 
  - [post-alert](../post-alert)
+ - [post-breadcrumb-item](../post-breadcrumb-item)
  - [post-card-control](../post-card-control)
+ - [post-closebutton](../post-closebutton)
  - [post-rating](../post-rating)
  - [post-tag](../post-tag)
 
@@ -31,7 +33,9 @@ some content
 ```mermaid
 graph TD;
   post-alert --> post-icon
+  post-breadcrumb-item --> post-icon
   post-card-control --> post-icon
+  post-closebutton --> post-icon
   post-rating --> post-icon
   post-tag --> post-icon
   style post-icon fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/components/src/components/post-list-item/post-list-item.scss b/packages/components/src/components/post-list-item/post-list-item.scss
new file mode 100644
index 0000000000..79ff2d5269
--- /dev/null
+++ b/packages/components/src/components/post-list-item/post-list-item.scss
@@ -0,0 +1,3 @@
+:host {
+  display: flex;
+}
diff --git a/packages/components/src/components/post-list-item/post-list-item.tsx b/packages/components/src/components/post-list-item/post-list-item.tsx
new file mode 100644
index 0000000000..fdb5c6b012
--- /dev/null
+++ b/packages/components/src/components/post-list-item/post-list-item.tsx
@@ -0,0 +1,26 @@
+import { Component, Element, Host, h } from '@stencil/core';
+
+/**
+ * @slot default- Slot for placing the content of the list item.
+ */
+
+@Component({
+  tag: 'post-list-item',
+  styleUrl: 'post-list-item.scss',
+  shadow: true,
+})
+export class PostListItem {
+  @Element() host: HTMLPostListItemElement;
+
+  connectedCallback() {
+    this.host.setAttribute('slot', 'post-list-item');
+  }
+
+  render() {
+    return (
+      <Host role="listitem">
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-list-item/readme.md b/packages/components/src/components/post-list-item/readme.md
new file mode 100644
index 0000000000..5031db9cd5
--- /dev/null
+++ b/packages/components/src/components/post-list-item/readme.md
@@ -0,0 +1,17 @@
+# post-list-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Slots
+
+| Slot                                                        | Description |
+| ----------------------------------------------------------- | ----------- |
+| `"default- Slot for placing the content of the list item."` |             |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-list/post-list.scss b/packages/components/src/components/post-list/post-list.scss
new file mode 100644
index 0000000000..d492599b77
--- /dev/null
+++ b/packages/components/src/components/post-list/post-list.scss
@@ -0,0 +1,27 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+post-list {
+  display: flex;
+  gap: var(--post-list-title-gap);
+  flex-direction: column;
+  align-items: flex-start;
+
+  & > div[role='list'] {
+    flex-direction: column;
+    display: flex;
+    gap: var(--post-list-item-gap);
+  }
+
+  &[horizontal]:not([horizontal='false']) {
+    flex-direction: row;
+    align-items: baseline;
+    & > div[role='list'] {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  > .list-title.visually-hidden {
+    @include post.visually-hidden();
+  }
+}
diff --git a/packages/components/src/components/post-list/post-list.tsx b/packages/components/src/components/post-list/post-list.tsx
new file mode 100644
index 0000000000..d111c64518
--- /dev/null
+++ b/packages/components/src/components/post-list/post-list.tsx
@@ -0,0 +1,69 @@
+import { Component, Element, Prop, Host, State, h } from '@stencil/core';
+import { version } from '@root/package.json';
+
+/**
+ * @slot default - Slot for placing the list title.
+ * @slot post-list-item - Slot for placing post-list-item components.
+ */
+
+@Component({
+  tag: 'post-list',
+  styleUrl: 'post-list.scss',
+  shadow: false,
+})
+export class PostList {
+  @Element() host: HTMLPostListElement;
+
+  /**
+   * The unique title of the list that is also referenced in the labelledby
+   */
+  @State() titleId: string;
+
+  /**
+   * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
+   */
+  @Prop() readonly titleHidden: boolean = false;
+
+  /**
+   * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
+   */
+  @Prop() readonly horizontal: boolean = false;
+
+  titleEl: HTMLElement;
+
+  componentWillLoad() {
+    /**
+     * Get the id set on the host element or use a random id by default
+     */
+    this.titleId = `list-${crypto.randomUUID()}`;
+  }
+
+  componentDidLoad() {
+    this.checkTitle();
+  }
+
+  private checkTitle() {
+    if (!this.titleEl.innerText) {
+      throw new Error(
+        'Please provide a title to the list component. Title is mandatory for accessibility purposes.',
+      );
+    }
+  }
+
+  render() {
+    return (
+      <Host data-version={version}>
+        <div
+          ref={el => (this.titleEl = el)}
+          id={this.titleId}
+          class={`list-title${this.titleHidden ? ' visually-hidden' : ''}`}
+        >
+          <slot></slot>
+        </div>
+        <div role="list" aria-labelledby={this.titleId}>
+          <slot name="post-list-item"></slot>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-list/readme.md b/packages/components/src/components/post-list/readme.md
new file mode 100644
index 0000000000..faf4bd36b5
--- /dev/null
+++ b/packages/components/src/components/post-list/readme.md
@@ -0,0 +1,26 @@
+# post-list
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description                                                                        | Type      | Default |
+| ------------- | -------------- | ---------------------------------------------------------------------------------- | --------- | ------- |
+| `horizontal`  | `horizontal`   | The list can become horizontal by setting `horizontal="true"` or just `horizontal` | `boolean` | `false` |
+| `titleHidden` | `title-hidden` | If `true`, the list title will be hidden. Otherwise, it will be displayed.`        | `boolean` | `false` |
+
+
+## Slots
+
+| Slot               | Description                                 |
+| ------------------ | ------------------------------------------- |
+| `"default"`        | Slot for placing the list title.            |
+| `"post-list-item"` | Slot for placing post-list-item components. |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-menu-item/post-menu-item.scss b/packages/components/src/components/post-menu-item/post-menu-item.scss
new file mode 100644
index 0000000000..f09d32524a
--- /dev/null
+++ b/packages/components/src/components/post-menu-item/post-menu-item.scss
@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}
\ No newline at end of file
diff --git a/packages/components/src/components/post-menu-item/post-menu-item.tsx b/packages/components/src/components/post-menu-item/post-menu-item.tsx
new file mode 100644
index 0000000000..b4c7de0469
--- /dev/null
+++ b/packages/components/src/components/post-menu-item/post-menu-item.tsx
@@ -0,0 +1,19 @@
+import { Component, h, Element, Host } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-menu-item',
+  shadow: true,
+  styleUrl: 'post-menu-item.scss',
+})
+export class PostMenuItem {
+  @Element() host: HTMLPostMenuItemElement;
+  
+  render() {
+    return (
+      <Host role="menuitem" data-version={version}>
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-menu-item/readme.md b/packages/components/src/components/post-menu-item/readme.md
new file mode 100644
index 0000000000..d6c88bc316
--- /dev/null
+++ b/packages/components/src/components/post-menu-item/readme.md
@@ -0,0 +1,10 @@
+# post-menu-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-menu-trigger/post-menu-trigger.scss b/packages/components/src/components/post-menu-trigger/post-menu-trigger.scss
new file mode 100644
index 0000000000..8d3464e097
--- /dev/null
+++ b/packages/components/src/components/post-menu-trigger/post-menu-trigger.scss
@@ -0,0 +1,3 @@
+:host {
+  display: inline-block;
+}
\ No newline at end of file
diff --git a/packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx b/packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx
new file mode 100644
index 0000000000..8f07329f27
--- /dev/null
+++ b/packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx
@@ -0,0 +1,83 @@
+import { Component, Element, Prop, h, Host, State, Watch } from '@stencil/core';
+import { version } from '@root/package.json';
+import { checkType } from '@/utils';
+
+@Component({
+  tag: 'post-menu-trigger',
+  styleUrl: 'post-menu-trigger.scss',
+  shadow: false,
+})
+export class PostMenuTrigger {
+  /**
+   * ID of the menu element that this trigger is linked to. Used to open and close the specified menu.
+   */
+  @Prop() for!: string;
+
+  @Element() host: HTMLPostMenuTriggerElement;
+
+  /**
+   * Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed.
+   */
+  @State() ariaExpanded: boolean = false;
+
+  /**
+   * Reference to the slotted button within the trigger, if present. 
+   * Used to manage click and key events for menu control.
+   */
+  private slottedButton: HTMLButtonElement | null = null;
+
+  /**
+   * Watch for changes to the `for` property to validate its type and ensure it is a string.
+   * @param forValue - The new value of the `for` property.
+   */
+  @Watch('for')
+  validateControlFor(forValue = this.for) {
+    checkType(forValue, 'string', 'The "for" property is required and should be a string.');
+  }
+
+  private get menu(): HTMLPostMenuElement | null {
+    const ref = document.getElementById(this.for);
+    return ref && ref.localName === 'post-menu' ? (ref as HTMLPostMenuElement) : null;
+  }
+
+  private handleToggle() {
+    const menu = this.menu;
+    if (menu && this.slottedButton) {
+      this.ariaExpanded = !this.ariaExpanded;
+      this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+      menu.toggle(this.host);
+    } else {
+      console.warn(`No post-menu found with ID: ${this.for}`);
+    }
+  }
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      this.handleToggle();
+    }
+  };
+
+  componentDidLoad() {
+    this.validateControlFor();
+    
+    this.slottedButton = this.host.querySelector('button');
+    if (this.slottedButton) {
+      this.slottedButton.setAttribute('aria-haspopup', 'menu');
+      this.slottedButton.addEventListener('click', () => {
+        this.handleToggle();
+      });
+      this.slottedButton.addEventListener('keydown', this.handleKeyDown);
+    } else {
+      console.warn('No button found within post-menu-trigger');
+    }
+  }
+
+  render() {
+    return (
+      <Host data-version={version} tab-index="-1">
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-menu-trigger/readme.md b/packages/components/src/components/post-menu-trigger/readme.md
new file mode 100644
index 0000000000..5be3ab3109
--- /dev/null
+++ b/packages/components/src/components/post-menu-trigger/readme.md
@@ -0,0 +1,17 @@
+# post-menu-trigger
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute | Description                                                                                       | Type     | Default     |
+| ------------------ | --------- | ------------------------------------------------------------------------------------------------- | -------- | ----------- |
+| `for` _(required)_ | `for`     | ID of the menu element that this trigger is linked to. Used to open and close the specified menu. | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-menu/post-menu.scss b/packages/components/src/components/post-menu/post-menu.scss
new file mode 100644
index 0000000000..95b15284b7
--- /dev/null
+++ b/packages/components/src/components/post-menu/post-menu.scss
@@ -0,0 +1,11 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+:host {
+  display: block;
+}
+
+post-popovercontainer {
+  padding: var(--post-menu-padding);
+  background-color: var(--post-menu-bg, #ffffff);
+  border-color: var(--post-menu-bg, #ffffff);
+}
\ No newline at end of file
diff --git a/packages/components/src/components/post-menu/post-menu.tsx b/packages/components/src/components/post-menu/post-menu.tsx
new file mode 100644
index 0000000000..dd5c90f3bf
--- /dev/null
+++ b/packages/components/src/components/post-menu/post-menu.tsx
@@ -0,0 +1,195 @@
+import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';
+import { Placement } from '@floating-ui/dom';
+import { version } from '@root/package.json';
+import { isFocusable } from '@/utils/is-focusable';
+
+@Component({
+  tag: 'post-menu',
+  styleUrl: 'post-menu.scss',
+  shadow: true,
+})
+export class PostMenu {
+  private popoverRef: HTMLPostPopovercontainerElement;
+  private lastFocusedElement: HTMLElement | null = null;
+
+  private readonly KEYCODES = {
+    SPACE: ' ',
+    ENTER: 'Enter',
+    UP: 'ArrowUp',
+    DOWN: 'ArrowDown',
+    TAB: 'Tab',
+    HOME: 'Home',
+    END: 'End',
+    ESCAPE: 'Escape'
+  };
+
+  @Element() host: HTMLPostMenuElement;
+
+  /**
+   * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+   * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted
+   * towards the viewport if they would overlap edge boundaries.
+   */
+  @Prop() readonly placement?: Placement = 'bottom';
+
+  /**
+   * Holds the current visibility state of the menu.
+   * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
+   * and updates automatically when the menu is toggled.
+   */
+  @State() isVisible: boolean = false;
+
+  /**
+   * Emits when the menu is shown or hidden.
+   * The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
+   **/
+  @Event() toggleMenu: EventEmitter<boolean>;
+
+  connectedCallback() {
+    this.host.addEventListener('keydown', this.handleKeyDown);
+    this.host.addEventListener('click', this.handleClick);
+  }
+
+  disconnectedCallback() {
+    this.host.removeEventListener('keydown', this.handleKeyDown);
+    this.host.removeEventListener('click', this.handleClick);
+  }
+
+  componentDidLoad() {
+    this.popoverRef.addEventListener('postToggle', (event: CustomEvent<boolean>) => {
+      this.isVisible = event.detail;
+      this.toggleMenu.emit(this.isVisible);
+    });
+  }
+
+  /**
+   * Toggles the menu visibility based on its current state.
+   */
+  @Method()
+  async toggle(target: HTMLElement) {
+    this.isVisible ? await this.hide() : await this.show(target);
+  }
+
+  /**
+   * Displays the popover menu, focusing the first menu item.
+   * 
+   * @param target - The HTML element relative to which the popover menu should be displayed.
+   */
+  @Method()
+  async show(target: HTMLElement) {
+    if (this.popoverRef) {
+      await this.popoverRef.show(target);
+      this.lastFocusedElement = document.activeElement as HTMLElement;
+
+      const menuItems = this.getSlottedItems();
+      if (menuItems.length > 0) {
+        (menuItems[0] as HTMLElement).focus();
+      }
+    } else {
+      console.error('show: popoverRef is null or undefined');
+    }
+  }
+
+  /**
+   * Hides the popover menu and restores focus to the previously focused element.
+   */
+  @Method()
+  async hide() {
+    if (this.popoverRef) {
+      await this.popoverRef.hide();
+      if (this.lastFocusedElement) {
+        this.lastFocusedElement.focus();
+      }
+    } else {
+      console.error('hide: popoverRef is null or undefined');
+    }
+  }
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    e.stopPropagation();
+
+    if (e.key === this.KEYCODES.ESCAPE) {
+      this.toggle(this.host);
+      return;
+    }
+
+    if (Object.values(this.KEYCODES).includes(e.key)) {
+      this.controlKeyDownHandler(e);
+    }
+  };
+
+  private handleClick = (e: MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
+      this.toggle(this.host);
+    }
+  };
+
+  private controlKeyDownHandler(e: KeyboardEvent) {
+    const menuItems = this.getSlottedItems();
+    if (!menuItems.length) {
+      return;
+    }
+
+    const currentFocusedElement = document.activeElement as HTMLElement;
+    let currentIndex = menuItems.findIndex(el => el === currentFocusedElement);
+
+    switch (e.key) {
+      case this.KEYCODES.UP:
+        e.preventDefault();
+        currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
+        break;
+      case this.KEYCODES.DOWN:
+        e.preventDefault();
+        currentIndex = (currentIndex + 1) % menuItems.length;
+        break;
+      case this.KEYCODES.HOME:
+        currentIndex = 0;
+        break;
+      case this.KEYCODES.END:
+        currentIndex = menuItems.length - 1;
+        break;
+      case this.KEYCODES.SPACE:
+      case this.KEYCODES.ENTER:
+        this.toggle(this.host);
+        return;
+      case this.KEYCODES.TAB:
+        this.toggle(this.host);
+        break;
+      default:
+        break;
+    }
+
+    if (menuItems[currentIndex]) {
+      (menuItems[currentIndex] as HTMLElement).focus();
+    }
+  }
+
+  private getSlottedItems() {
+    const slot = this.host.shadowRoot.querySelector('slot');
+    const slottedElements = slot ? slot.assignedElements() : [];
+
+    const menuItems = slottedElements
+      .filter(el => el.tagName === 'POST-MENU-ITEM')
+      .map(el => {
+        const slot = el.shadowRoot.querySelector('slot');
+        const assignedElements = slot ? slot.assignedElements() : [];
+        return assignedElements.filter(isFocusable);
+      })
+      .flat();
+
+    return menuItems;
+  }
+
+  render() {
+    return (
+      <Host data-version={version}>
+        <post-popovercontainer placement={this.placement} ref={e => (this.popoverRef = e)}>
+          <div class="popover-container">
+            <slot></slot>
+          </div>
+        </post-popovercontainer>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-menu/readme.md b/packages/components/src/components/post-menu/readme.md
new file mode 100644
index 0000000000..f700878d4c
--- /dev/null
+++ b/packages/components/src/components/post-menu/readme.md
@@ -0,0 +1,82 @@
+# post-menu
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute   | Description                                                                                                                                                                                                                                                                                                               | Type                                                                                                                                                                 | Default    |
+| ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'` |
+
+
+## Events
+
+| Event        | Description                                                                                                                          | Type                   |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- |
+| `toggleMenu` | Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed. | `CustomEvent<boolean>` |
+
+
+## Methods
+
+### `hide() => Promise<void>`
+
+Hides the popover menu and restores focus to the previously focused element.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `show(target: HTMLElement) => Promise<void>`
+
+Displays the popover menu, focusing the first menu item.
+
+#### Parameters
+
+| Name     | Type          | Description                                                                |
+| -------- | ------------- | -------------------------------------------------------------------------- |
+| `target` | `HTMLElement` | - The HTML element relative to which the popover menu should be displayed. |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `toggle(target: HTMLElement) => Promise<void>`
+
+Toggles the menu visibility based on its current state.
+
+#### Parameters
+
+| Name     | Type          | Description |
+| -------- | ------------- | ----------- |
+| `target` | `HTMLElement` |             |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Dependencies
+
+### Depends on
+
+- [post-popovercontainer](../post-popovercontainer)
+
+### Graph
+```mermaid
+graph TD;
+  post-menu --> post-popovercontainer
+  style post-menu fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-popovercontainer/readme.md b/packages/components/src/components/post-popovercontainer/readme.md
index 7efe854e5c..99b04f2f7e 100644
--- a/packages/components/src/components/post-popovercontainer/readme.md
+++ b/packages/components/src/components/post-popovercontainer/readme.md
@@ -78,12 +78,14 @@ Type: `Promise<boolean>`
 
 ### Used by
 
+ - [post-menu](../post-menu)
  - [post-popover](../post-popover)
  - [post-tooltip](../post-tooltip)
 
 ### Graph
 ```mermaid
 graph TD;
+  post-menu --> post-popovercontainer
   post-popover --> post-popovercontainer
   post-tooltip --> post-popovercontainer
   style post-popovercontainer fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 1c7d511018..bcd8a139de 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -4,13 +4,18 @@ export { Components, JSX } from './components';
 export { PostAccordion } from './components/post-accordion/post-accordion';
 export { PostAccordionItem } from './components/post-accordion-item/post-accordion-item';
 export { PostAlert } from './components/post-alert/post-alert';
+export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item';
 export { PostAvatar } from './components/post-avatar/post-avatar';
 export { PostCardControl } from './components/post-card-control/post-card-control';
+export { PostClosebutton } from './components/post-closebutton/post-closebutton';
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';
 export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/post-collapsible-trigger';
 export { PostIcon } from './components/post-icon/post-icon';
 export { PostLanguageOption } from './components/post-language-option/post-language-option';
 export { PostLogo } from './components/post-logo/post-logo';
+export { PostMenu } from './components/post-menu/post-menu';
+export { PostMenuTrigger } from './components/post-menu-trigger/post-menu-trigger';
+export { PostMenuItem } from './components/post-menu-item/post-menu-item';
 export { PostPopover } from './components/post-popover/post-popover';
 export { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer';
 export { PostRating } from './components/post-rating/post-rating';
@@ -20,3 +25,5 @@ export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';
 export { PostTooltip } from './components/post-tooltip/post-tooltip';
 export { PostTag } from './components/post-tag/post-tag';
 export { PostTogglebutton } from './components/post-togglebutton/post-togglebutton';
+export { PostList } from './components/post-list/post-list';
+export { PostListItem } from './components/post-list-item/post-list-item';
diff --git a/packages/components/src/utils/is-focusable.ts b/packages/components/src/utils/is-focusable.ts
new file mode 100644
index 0000000000..66aa7d74dc
--- /dev/null
+++ b/packages/components/src/utils/is-focusable.ts
@@ -0,0 +1,28 @@
+const focusableSelector = `:where(${[
+  'button',
+  'input:not([type="hidden"])',
+  '[tabindex]',
+  'select',
+  'textarea',
+  '[contenteditable]',
+  'a[href]',
+  'iframe',
+  'audio[controls]',
+  'video[controls]',
+  'area[href]',
+  'details > summary:first-of-type',
+].join(',')})`;
+
+const focusDisablingSelector = `:where(${[
+  '[inert]',
+  '[inert] *',
+  ':disabled',
+  'dialog:not([open]) *',
+  '[popover]:not(:popover-open) *',
+  'details:not([open]) > *:not(details > summary:first-of-type)',
+  'details:not([open]) > *:not(details > summary:first-of-type) *',
+].join(',')})`;
+
+export const isFocusable = (element: Element) => {
+  return element?.matches(focusableSelector) && !element?.matches(focusDisablingSelector);
+};
diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
index 035bdf5f97..df8c5707e7 100644
--- a/packages/documentation/.storybook/preview.ts
+++ b/packages/documentation/.storybook/preview.ts
@@ -15,6 +15,7 @@ import './styles/preview.scss';
 
 import { SyntaxHighlighter } from '@storybook/components';
 import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
+import { ArgTypes } from '@storybook/blocks';
 
 SyntaxHighlighter.registerLanguage('scss', scss);
 
@@ -84,6 +85,9 @@ const preview: Preview = {
           },
         ],
       },
+      argTypes: {
+        sort: 'requiredFirst',
+      },
       source: {
         excludeDecorators: true,
         dark: SourceDarkScheme,
diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
index 712fc0d078..c5f0f5e49c 100644
--- a/packages/documentation/.storybook/styles/preview.scss
+++ b/packages/documentation/.storybook/styles/preview.scss
@@ -1,8 +1,13 @@
 // importing the complete styles package scss
 @use '@swisspost/design-system-styles/core.scss' as post;
-@use '@swisspost/design-system-styles/mixins/utilities';
 @use '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css';
 @use './components';
+@use '@swisspost/design-system-styles/functions/tokens' as tokens;
+@use '@swisspost/design-system-styles/tokens/utilities' as utilities;
+
+tokens.$default-map: utilities.$post-color;
+
+$monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 
 #storybook-root,
 #storybook-docs {
@@ -95,12 +100,12 @@
     top: -0.1em;
     margin: 0 0.1em;
     padding: 0.15em 0.4em 0.1em;
-    background-color: rgba(var(--post-contrast-color-inverted-rgb), 0.2);
-    border: 1px solid rgba(var(--post-contrast-color-rgb), 0.1);
+    background-color: tokens.get('utility-surface-accent1');
+    border: 1px solid tokens.get('utility-surface-accent2');
+    color: 1px solid tokens.get('utility-surface-accent4');
     border-radius: 0.2em;
-    font-family: var(--bs-font-monospace);
+    font-family: $monospace;
     font-size: 0.75em;
-    color: var(--post-contrast-color);
     white-space: nowrap;
     line-height: 1;
 
diff --git a/packages/documentation/CHANGELOG.md b/packages/documentation/CHANGELOG.md
index 4d4645f460..027ce55b6d 100644
--- a/packages/documentation/CHANGELOG.md
+++ b/packages/documentation/CHANGELOG.md
@@ -1,5 +1,35 @@
 # @swisspost/design-system-documentation
 
+## 6.0.0-next.5
+
+### Minor Changes
+
+- Updated list group to v2 and added new options: list links, list documents and list switches. (by [@leagrdv](https://github.com/leagrdv) with [#3740](https://github.com/swisspost/design-system/pull/3740))
+
+- Created the `post-list` and `post-list-item` components. (by [@myrta2302](https://github.com/myrta2302) with [#3812](https://github.com/swisspost/design-system/pull/3812))
+
+- Updated the Accessibility documentation section with Form Labels guidelines. (by [@myrta2302](https://github.com/myrta2302) with [#3835](https://github.com/swisspost/design-system/pull/3835))
+
+- Added Form Footer component. (by [@leagrdv](https://github.com/leagrdv) with [#3616](https://github.com/swisspost/design-system/pull/3616))
+
+- Updated vertical-align utility (by [@myrta2302](https://github.com/myrta2302) with [#3805](https://github.com/swisspost/design-system/pull/3805))
+
+- Added the skiplinks component to styles and documentation. (by [@leagrdv](https://github.com/leagrdv) with [#3875](https://github.com/swisspost/design-system/pull/3875))
+
+- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880))
+
+- Internalized bootstraps floating utilities into the design system. (by [@myrta2302](https://github.com/myrta2302) with [#3752](https://github.com/swisspost/design-system/pull/3752))
+
+### Patch Changes
+
+- Updated basic `<ul>` element docs and moved them from `Utilities/Lists` to `Foundation/Typography/Lists`. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3859](https://github.com/swisspost/design-system/pull/3859))
+- Updated dependencies:
+  - @swisspost/design-system-icons@9.0.0-next.4
+  - @swisspost/design-system-styles@9.0.0-next.4
+  - @swisspost/design-system-components@9.0.0-next.4
+  - @swisspost/internet-header@2.0.0-next.4
+  - @swisspost/design-system-components-react@9.0.0-next.4
+
 ## 6.0.0-next.4
 
 ### Patch Changes
diff --git a/packages/documentation/cypress/e2e/components/skiplinks.cy.ts b/packages/documentation/cypress/e2e/components/skiplinks.cy.ts
new file mode 100644
index 0000000000..e4f1b1dcb9
--- /dev/null
+++ b/packages/documentation/cypress/e2e/components/skiplinks.cy.ts
@@ -0,0 +1,24 @@
+describe('Skiplinks', () => {
+  beforeEach(() => {
+    cy.visit('/iframe.html?id=snapshots--skiplinks');
+    cy.get('.skiplinks-container', { timeout: 30000 }).should('be.visible');
+  });
+
+  it('should take no space by default and be visible on focus', () => {
+    cy.get('.skiplinks a[href="#navigation"]').should(el => {
+      const clipValue = el.css('clip');
+      const width = el.width();
+
+      expect(clipValue).to.equal('rect(0px, 0px, 0px, 0px)');
+      expect(width).to.equal(0);
+    });
+    cy.get('.skiplinks a[href="#navigation"]').focus();
+    cy.get('.skiplinks a[href="#navigation"]').should(el => {
+      const clipValue = el.css('clip');
+      const width = el.width();
+
+      expect(clipValue).to.equal('auto');
+      expect(width).to.be.greaterThan(20);
+    });
+  });
+});
diff --git a/packages/documentation/cypress/snapshots/components/close-button.snapshot.ts b/packages/documentation/cypress/snapshots/components/close-button.snapshot.ts
new file mode 100644
index 0000000000..82da359c4c
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/close-button.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Close button', () => {
+  it('post-closebutton', () => {
+    cy.visit('/iframe.html?id=snapshots--post-closebutton');
+    cy.get('post-closebutton[data-hydrated]', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Close button (Web Component)', { widths: [1440] });
+  });
+});
diff --git a/packages/documentation/cypress/snapshots/components/list-group.snapshot.ts b/packages/documentation/cypress/snapshots/components/list-group.snapshot.ts
new file mode 100644
index 0000000000..fe30ede5a3
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/list-group.snapshot.ts
@@ -0,0 +1,7 @@
+describe('List group', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--list-group');
+    cy.get('.list-group-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Chips', { widths: [1440] });
+  });
+});
diff --git a/packages/documentation/cypress/snapshots/components/list.snapshot.ts b/packages/documentation/cypress/snapshots/components/list.snapshot.ts
new file mode 100644
index 0000000000..7417fec9e3
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/list.snapshot.ts
@@ -0,0 +1,7 @@
+describe('List', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--post-list');
+    cy.get('list-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('List', { widths: [1440] });
+  });
+});
diff --git a/packages/documentation/cypress/snapshots/components/skiplinks.snapshot.ts b/packages/documentation/cypress/snapshots/components/skiplinks.snapshot.ts
new file mode 100644
index 0000000000..f074bd38db
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/skiplinks.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Skiplinks', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=2fc3b456-19ba-4ede-b1bc-499518f829b1--default');
+    cy.get('.skiplinks-container', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Skiplinks', { widths: [1440] });
+  });
+});
diff --git a/packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts
new file mode 100644
index 0000000000..6d2235f46d
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Vetical Align', () => {
+  it('vertica-align', () => {
+    cy.visit('/iframe.html?id=snapshots--vertical-align');
+    cy.get('.vertical-align-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Vertical Align', { widths: [1440] });
+  });
+});
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index 1e6d5bbd3e..054769c301 100644
--- a/packages/documentation/package.json
+++ b/packages/documentation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-documentation",
-  "version": "6.0.0-next.4",
+  "version": "6.0.0-next.5",
   "description": "Swiss Post Design System Documentation.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -28,11 +28,11 @@
     "lint": "eslint **/*.{ts,tsx,mdx}"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-components-react": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
-    "@swisspost/internet-header": "workspace:2.0.0-next.3",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-components-react": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
+    "@swisspost/internet-header": "workspace:2.0.0-next.4",
     "bootstrap": "5.3.3"
   },
   "devDependencies": {
@@ -53,8 +53,8 @@
     "@storybook/types": "8.3.6",
     "@storybook/web-components": "8.3.6",
     "@storybook/web-components-vite": "8.3.6",
-    "@swisspost/design-system-components-angular": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-components-angular": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.4",
     "@types/css-modules": "1.0.5",
     "@types/mdx": "2.0.13",
     "@types/react": "18.3.3",
diff --git a/packages/documentation/public/_redirects b/packages/documentation/public/_redirects
index 72890d6c5b..554f386e14 100644
--- a/packages/documentation/public/_redirects
+++ b/packages/documentation/public/_redirects
@@ -7,3 +7,4 @@
 /v8   https://design-system-version-8.netlify.app
 /v9   https://swisspost-design-system-version-9.netlify.app
 
+
diff --git a/packages/documentation/public/assets/versions.json b/packages/documentation/public/assets/versions.json
index 3c264439ed..e9ffa81f97 100644
--- a/packages/documentation/public/assets/versions.json
+++ b/packages/documentation/public/assets/versions.json
@@ -1,7 +1,7 @@
 [
   {
     "title": "Version 9",
-    "version": "9.0.0-next.3",
+    "version": "9.0.0-next.4",
     "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
     "url": "https://design-system.post.ch",
     "dependencies": {
@@ -9,22 +9,50 @@
       "@ng-bootstrap/ng-bootstrap": "^17.0.0",
       "bootstrap": "~5.3.0",
       "@swisspost/design-system-changelog-github": "1.0.2",
-      "@swisspost/design-system-components": "9.0.0-next.3",
-      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.3",
-      "@swisspost/design-system-components-angular": "9.0.0-next.3",
-      "@swisspost/design-system-components-react": "9.0.0-next.3",
-      "@swisspost/design-system-documentation": "6.0.0-next.3",
-      "@swisspost/design-system-icons": "9.0.0-next.3",
-      "@swisspost/internet-header": "2.0.0-next.3",
-      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.3",
-      "@swisspost/design-system-intranet-header": "9.0.0-next.3",
-      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.3",
-      "@swisspost/design-system-migrations": "9.0.0-next.3",
-      "@swisspost/design-system-nextjs-integration": "0.1.14-next.3",
-      "@swisspost/design-system-styles": "9.0.0-next.3",
-      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.3",
-      "@swisspost/design-system-styles-primeng": "9.0.0-next.3",
-      "@swisspost/design-system-tokens": "9.0.0-next.3"
+      "@swisspost/design-system-components": "9.0.0-next.4",
+      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.4",
+      "@swisspost/design-system-components-angular": "9.0.0-next.4",
+      "@swisspost/design-system-components-react": "9.0.0-next.4",
+      "@swisspost/design-system-documentation": "6.0.0-next.5",
+      "@swisspost/design-system-icons": "9.0.0-next.4",
+      "@swisspost/internet-header": "2.0.0-next.4",
+      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.4",
+      "@swisspost/design-system-intranet-header": "9.0.0-next.4",
+      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.4",
+      "@swisspost/design-system-migrations": "9.0.0-next.4",
+      "@swisspost/design-system-nextjs-integration": "0.1.14-next.4",
+      "@swisspost/design-system-styles": "9.0.0-next.4",
+      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.4",
+      "@swisspost/design-system-styles-primeng": "9.0.0-next.4",
+      "@swisspost/design-system-tokens": "9.0.0-next.4"
+    }
+  },
+  {
+    "title": "Version 9",
+    "version": "9.0.0-next.3",
+    "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
+    "url": "https://swisspost-design-system-version-9.netlify.app",
+    "dependencies": {
+      "@angular/core": "^18.0.0",
+      "@ng-bootstrap/ng-bootstrap": "^17.0.0",
+      "bootstrap": "~5.3.0",
+      "@swisspost/design-system-changelog-github": "1.0.2",
+      "@swisspost/design-system-components": "9.0.0-next.2",
+      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.2",
+      "@swisspost/design-system-components-angular": "9.0.0-next.2",
+      "@swisspost/design-system-components-react": "9.0.0-next.2",
+      "@swisspost/design-system-documentation": "6.0.0-next.2",
+      "@swisspost/design-system-icons": "9.0.0-next.2",
+      "@swisspost/internet-header": "1.14.6-next.2",
+      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.2",
+      "@swisspost/design-system-intranet-header": "9.0.0-next.2",
+      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.2",
+      "@swisspost/design-system-migrations": "9.0.0-next.2",
+      "@swisspost/design-system-nextjs-integration": "0.1.14-next.2",
+      "@swisspost/design-system-styles": "9.0.0-next.2",
+      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.2",
+      "@swisspost/design-system-styles-primeng": "9.0.0-next.2",
+      "@swisspost/design-system-tokens": "9.0.0-next.2"
     }
   },
   {
diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/buttons/button/button.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/button/button.docs.mdx
rename to packages/documentation/src/stories/components/buttons/button/button.docs.mdx
diff --git a/packages/documentation/src/stories/components/button/button.snapshot.stories.ts b/packages/documentation/src/stories/components/buttons/button/button.snapshot.stories.ts
similarity index 100%
rename from packages/documentation/src/stories/components/button/button.snapshot.stories.ts
rename to packages/documentation/src/stories/components/buttons/button/button.snapshot.stories.ts
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/buttons/button/button.stories.ts
similarity index 99%
rename from packages/documentation/src/stories/components/button/button.stories.ts
rename to packages/documentation/src/stories/components/buttons/button/button.stories.ts
index 1b707a53a3..5e8ba415d2 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/buttons/button/button.stories.ts
@@ -6,7 +6,7 @@ import { MetaComponent } from '@root/types';
 
 const meta: MetaComponent = {
   id: 'eb78afcb-ce92-4990-94b6-6536d5ec6af4',
-  title: 'Components/Button',
+  title: 'Components/Buttons/Button',
   tags: ['package:HTML'],
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx b/packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx
new file mode 100644
index 0000000000..6e3948c7de
--- /dev/null
+++ b/packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx
@@ -0,0 +1,24 @@
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import * as CloseButtonStories from './close-button.stories';
+
+<Meta of={CloseButtonStories} />
+
+<div className="docs-title">
+  # Close button
+
+  <nav>
+    <link-design of={JSON.stringify(CloseButtonStories)}></link-design>
+  </nav>
+</div>
+
+<div className="lead">
+  The close button is a web component. It is a slightly adapted version of the icon button, intended
+  for a specific use case.
+</div>
+
+The value inside the `<post-closebutton>` element will be rendered inside the button as a visually hidden text so make sure to only insert inline content there.
+
+<Canvas sourceState="shown" of={CloseButtonStories.Default} />
+<div className="hide-col-default">
+  <Controls of={CloseButtonStories.Default} />
+</div>
diff --git a/packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts b/packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts
new file mode 100644
index 0000000000..d6b21d0b46
--- /dev/null
+++ b/packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts
@@ -0,0 +1,26 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta, { Default } from './close-button.stories';
+import { html } from 'lit';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj<HTMLPostClosebuttonElement>;
+
+export const PostClosebutton: Story = {
+  render: (_args: Args, context: StoryContext<HTMLPostClosebuttonElement>) => {
+    return html`
+      ${['bg-white', 'bg-dark'].map(
+        bg => html`
+          <div class="${bg} p-40" data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}>
+            ${Default.render?.({ ...context.args }, context)}
+          </div>
+        `,
+      )}
+    `;
+  },
+};
diff --git a/packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts b/packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts
new file mode 100644
index 0000000000..7b947e99a0
--- /dev/null
+++ b/packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts
@@ -0,0 +1,39 @@
+import type { Args, StoryObj } from '@storybook/web-components';
+import { html } from 'lit/static-html.js';
+import { MetaComponent } from '@root/types';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+const meta: MetaComponent = {
+  id: 'de313349-0c0b-4baf-adc6-cb8c2e36fc1a',
+  title: 'Components/Buttons/Close button',
+  component: 'post-closebutton',
+  tags: ['package:WebComponents'],
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=2514-18516&t=gCGlckfBEobCTna3-4',
+    },
+  },
+  args: {
+    'slots-default': 'Close button',
+  },
+  argTypes: {
+    'slots-default': {
+      name: 'Label',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: (args: Args) => {
+    return html`<post-closebutton>${unsafeHTML(args['slots-default'])}</post-closebutton> `;
+  },
+};
diff --git a/packages/documentation/src/stories/components/list-group/list-group.docs.mdx b/packages/documentation/src/stories/components/list-group/list-group.docs.mdx
new file mode 100644
index 0000000000..1f268b8cce
--- /dev/null
+++ b/packages/documentation/src/stories/components/list-group/list-group.docs.mdx
@@ -0,0 +1,48 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as ListGroup from './list-group.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={ListGroup} />
+
+<div className="docs-title">
+  # List Group
+
+  <nav>
+    <link-design of={JSON.stringify(ListGroup)}></link-design>
+  </nav>
+</div>
+
+<div className="lead">
+  Lists consist of related content grouped together and organized vertically.
+</div>
+
+<Canvas sourceState="shown" of={ListGroup.Default} />
+<div className="hide-col-default">
+  <Controls of={ListGroup.Default} />
+</div>
+
+<StylesPackageImport components={['list-group']} />
+
+## Types of lists
+
+### List Links
+
+The links list collects and displays a set of links. It is therefore a navigational element which leads the user to other locations.
+
+To have the animation on the arrow, don't forget to add the class `.list-group-item-action` on each `li` item as well as `.list-group-item-right-svg` on the icon to animate.
+
+<Canvas of={ListGroup.ListLinks} />
+
+### List Documents
+
+The documents list collects and displays a set of documents. It does not only help users find a specific item, but also provides the user with a button to download the respective document.
+
+Do not add the animation class to the list items as it would not make sense with the download icon.
+
+<Canvas of={ListGroup.ListDocuments} />
+
+### List Switch
+
+The switches list collects and displays a set of switches. It does not only help users find a specific item, but also provides the functionality to select and unselect list items.
+
+<Canvas of={ListGroup.ListSwitch} />
diff --git a/packages/documentation/src/stories/components/list-group/list-group.snapshot.stories.ts b/packages/documentation/src/stories/components/list-group/list-group.snapshot.stories.ts
new file mode 100644
index 0000000000..d359e3bd4b
--- /dev/null
+++ b/packages/documentation/src/stories/components/list-group/list-group.snapshot.stories.ts
@@ -0,0 +1,35 @@
+import type { Args, StoryObj } from '@storybook/web-components';
+import meta, { renderListGroup } from './list-group.stories';
+import { html } from 'lit';
+import { bombArgs } from '@/utils';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const ListGroup: Story = {
+  render: () => {
+    return html`
+      ${['white', 'dark'].map(
+        bg => html`
+          <div class=${'list-group-example bg-' + bg} data-color-scheme=${bg}>
+            ${bombArgs({
+              listType: ['link', 'document', 'switch'],
+              label: [
+                'Label',
+                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+              ],
+            }).map((args: Args) => {
+              return renderListGroup(args);
+            })}
+          </div>
+        `,
+      )}
+    `;
+  },
+};
diff --git a/packages/documentation/src/stories/components/list-group/list-group.stories.ts b/packages/documentation/src/stories/components/list-group/list-group.stories.ts
new file mode 100644
index 0000000000..6bdece8b36
--- /dev/null
+++ b/packages/documentation/src/stories/components/list-group/list-group.stories.ts
@@ -0,0 +1,135 @@
+import type { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaComponent } from '@root/types';
+
+const meta: MetaComponent = {
+  id: '5a47ba70-7831-4e59-b83e-81b6e6c32372',
+  title: 'Components/List Group',
+  tags: ['package:HTML'],
+  render: renderListGroup,
+  decorators: [gridDecorator],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=21-170',
+    },
+  },
+  args: {
+    listType: 'link',
+    label: 'Label',
+  },
+  argTypes: {
+    listType: {
+      name: 'List type',
+      description: 'Type of list elements to show in the list group.',
+      options: ['link', 'document', 'switch'],
+      control: {
+        type: 'radio',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    label: {
+      name: 'Label',
+      description: 'Label of the link, document or switch',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+  },
+};
+
+export default meta;
+
+function gridDecorator(story: StoryFn, context: StoryContext) {
+  return html`
+    <div class="row">
+      <div class="col-lg-4 col-rg-6 col-12">${story(context.args, context)}</div>
+    </div>
+  `;
+}
+
+export function renderListGroup(args: Args) {
+  return html`
+    <ul class="list-group">
+      ${getContent(args, 3)}
+    </ul>
+  `;
+
+  function getIcon(name: string) {
+    return html`<post-icon name="${name}"></post-icon>`;
+  }
+
+  function getContent(args: Args, itemsCount: number) {
+    const linkIcon = getIcon('3020');
+    const fileIcon = getIcon('3169');
+    const downloadIcon = getIcon('2066');
+
+    const isDoc = args.listType === 'document';
+    const items = Array.from(Array(itemsCount).keys());
+
+    switch (args.listType) {
+      case 'link':
+      case 'document':
+        return html`
+          ${items.map(
+            () => html`
+              <li>
+                <a href="#" download=${isDoc || null} class="list-group-${args.listType}">
+                  ${isDoc ? fileIcon : null}${args.label}${isDoc ? downloadIcon : linkIcon}
+                </a>
+              </li>
+            `,
+          )}
+        `;
+      case 'switch':
+        return html`
+          ${items.map(
+            i => html`
+              <li>
+                <div class="list-group-${args.listType} form-check form-switch">
+                  <!-- it's important to set custom ids here -->
+                  <input
+                    type="checkbox"
+                    role="switch"
+                    id="list-switch-item-${i}"
+                    class="form-check-input"
+                    ?checked=${i === 0}
+                  />
+                  <label class="form-check-label order-first" for="list-switch-item-${i}"
+                    >${args.label}</label
+                  >
+                </div>
+              </li>
+            `,
+          )}
+        `;
+    }
+  }
+}
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const ListLinks: Story = {
+  args: {
+    listType: 'link',
+  },
+};
+
+export const ListDocuments: Story = {
+  args: {
+    listType: 'document',
+  },
+};
+
+export const ListSwitch: Story = {
+  args: {
+    listType: 'switch',
+  },
+};
diff --git a/packages/documentation/src/stories/components/list/list.docs.mdx b/packages/documentation/src/stories/components/list/list.docs.mdx
new file mode 100644
index 0000000000..d503620499
--- /dev/null
+++ b/packages/documentation/src/stories/components/list/list.docs.mdx
@@ -0,0 +1,51 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as ListStories from './list.stories';
+
+<Meta of={ListStories} />
+
+<div className="docs-title">
+  # List
+
+  <nav>
+    <link-design of={JSON.stringify(ListStories)}></link-design>
+  </nav>
+</div>
+
+The `<post-list>` is a container for `<post-list-item>` components.
+
+<Canvas sourceState="shown" of={ListStories.Default} />
+
+<Controls of={ListStories.Default} />
+
+## Installation
+
+The `<post-list>` element is part of the `@swisspost/design-system-components` package.
+For more information, read the [getting started with components guide](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs).
+
+## Examples
+
+<p className="lead">Horizontal List</p>
+<p>Set the `horizontal` property to `true`to make the list horizontal.</p>
+<Canvas sourceState="shown" of={ListStories.PostListHorizontal} />
+
+<p className="lead">Hidden Title</p>
+<p>The title can be visually hidden but should always be present for accessibility reasons.</p>
+<p>Set the `title-hidden` property to `true`to visually hide the title.</p>
+
+<Canvas sourceState="shown" of={ListStories.PostListNoTitle} />
+
+<p className="lead">List Styling</p>
+
+<strong>--post-list-title-gap</strong>
+<p>
+  Define the gap between the title and the list items using the `--post-list-title-gap` property (
+  e.g., `--post-list-title-gap: 2rem;`).
+</p>
+
+<strong>--post-list-item-gap</strong>
+<p>
+  Define the gap of the list items using the `--post-list-item-gap` property (e.g.
+  `--post-list-item-gap: 1rem 0.5rem;`).
+</p>
+
+<Canvas sourceState="shown" of={ListStories.PostListStyling} />
diff --git a/packages/documentation/src/stories/components/list/list.snapshot.stories.ts b/packages/documentation/src/stories/components/list/list.snapshot.stories.ts
new file mode 100644
index 0000000000..cd346db626
--- /dev/null
+++ b/packages/documentation/src/stories/components/list/list.snapshot.stories.ts
@@ -0,0 +1,52 @@
+import type { Args, StoryContext, StoryObj, StoryFn } from '@storybook/web-components';
+import meta from './list.stories';
+import { html } from 'lit';
+import { bombArgs } from '@/utils';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const PostList: Story = {
+  render: () => {
+    return html`
+      <div class="d-flex gap-16 flex-column">
+        ${bombArgs({
+          titleHidden: [false, true],
+          horizontal: [false, true],
+          itemGap: ['1rem', '2rem', '5rem'], // Variations for item gap
+          titleGap: ['1rem', '5rem', '10rem'], // Variations for title gap
+        })
+          .filter((args: Args) => !(args.titleHidden && args.titleGap !== '1rem'))
+          .map((args: Args) => {
+            return html`
+              <post-list
+                style="
+                --post-list-item-gap: ${args.itemGap};
+                --post-list-title-gap: ${args.titleGap};
+              "
+                title-hidden="${args.titleHidden}"
+                horizontal="${args.horizontal}"
+              >
+                <h3 class="title">List Title</h3>
+                <post-list-item>Item 1</post-list-item>
+                <post-list-item>Item 2</post-list-item>
+                <post-list-item>Item 3</post-list-item>
+              </post-list>
+            `;
+          })}
+      </div>
+    `;
+  },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html` <div class="list-example">${story(context.args, context)}</div> `;
+      return storyTemplate;
+    },
+  ],
+};
diff --git a/packages/documentation/src/stories/components/list/list.stories.ts b/packages/documentation/src/stories/components/list/list.stories.ts
new file mode 100644
index 0000000000..4b9cd03feb
--- /dev/null
+++ b/packages/documentation/src/stories/components/list/list.stories.ts
@@ -0,0 +1,93 @@
+import { StoryObj } from '@storybook/web-components';
+import { html, nothing } from 'lit';
+import { MetaComponent } from '@root/types';
+
+const meta: MetaComponent = {
+  id: '18566ca9-4502-4053-89f0-db5fdf6f906e',
+  title: 'Components/List',
+  tags: ['package:WebComponents'],
+  component: 'post-list',
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=558-7013&t=tiW8c2NHXI0mcJa5-1',
+    },
+  },
+  args: {
+    horizontal: false,
+    titleHidden: false,
+    listItemGap: '',
+    listTitleGap: '',
+  },
+  argTypes: {
+    listItemGap: {
+      name: '--post-list-item-gap',
+      description: 'Defines the gap between list items.',
+      control: 'text',
+      table: {
+        category: 'Styling',
+      },
+    },
+    listTitleGap: {
+      name: '--post-list-title-gap',
+      description: 'Defines the gap between the title and the list items.',
+      control: 'text',
+      table: {
+        category: 'Styling',
+      },
+    },
+  },
+  render: args => {
+    let styles = '';
+    if (args.listTitleGap) styles += `--post-list-title-gap: ${args.listTitleGap};`;
+    if (args.listItemGap) styles += `--post-list-item-gap: ${args.listItemGap};`;
+
+    return html`<post-list
+      title-hidden="${args.titleHidden ? args.titleHidden : nothing}"
+      horizontal="${args.horizontal ? args.horizontal : nothing}"
+      style="${styles ? styles : nothing}"
+    >
+      <h3>Title</h3>
+      <post-list-item>List Item 1</post-list-item>
+      <post-list-item>List Item 2</post-list-item>
+      <post-list-item>List Item 3</post-list-item>
+    </post-list> `;
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const PostListHorizontal: Story = {
+  render: () =>
+    html`<post-list horizontal="true">
+      <h3>Title</h3>
+      <post-list-item>List Item 1</post-list-item>
+      <post-list-item>List Item 2</post-list-item>
+      <post-list-item>List Item 3</post-list-item>
+    </post-list> `,
+};
+
+export const PostListNoTitle: Story = {
+  render: () =>
+    html`<post-list title-hidden="true">
+      <h3>Title</h3>
+      <post-list-item>List Item 1</post-list-item>
+      <post-list-item>List Item 2</post-list-item>
+      <post-list-item>List Item 3</post-list-item>
+    </post-list> `,
+};
+
+export const PostListStyling: Story = {
+  render: () =>
+    html`<post-list style="--post-list-title-gap: 2rem; --post-list-item-gap: 1rem 0.5rem;">
+      <h3>Title</h3>
+      <post-list-item>List Item 1</post-list-item>
+      <post-list-item>List Item 2</post-list-item>
+      <post-list-item>List Item 3</post-list-item>
+    </post-list> `,
+};
diff --git a/packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx b/packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx
new file mode 100644
index 0000000000..a5f7a38de6
--- /dev/null
+++ b/packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx
@@ -0,0 +1,19 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as MenuButtonStories from './menu-button.stories';
+
+<Meta of={MenuButtonStories} />
+
+<div className="docs-title">
+  # Menu Button
+
+  <nav>
+    <link-design of={JSON.stringify(MenuButtonStories)}></link-design>
+  </nav>
+</div>
+
+<div className="lead">
+  A dropdown component for displaying a list of links or actions with flexible alignment.
+</div>
+
+<Canvas sourceState="shown" of={MenuButtonStories.Default} />
+<Controls of={MenuButtonStories.Default} />
diff --git a/packages/documentation/src/stories/components/menu-button/menu-button.stories.ts b/packages/documentation/src/stories/components/menu-button/menu-button.stories.ts
new file mode 100644
index 0000000000..1aacdc2e46
--- /dev/null
+++ b/packages/documentation/src/stories/components/menu-button/menu-button.stories.ts
@@ -0,0 +1,73 @@
+import { Args, StoryObj } from '@storybook/web-components';
+import { html, nothing } from 'lit';
+import { MetaComponent } from '@root/types';
+
+const meta: MetaComponent = {
+  id: '8ca2bd70-56e6-4da9-b1fd-4e55388dca88',
+  title: 'Components/Menu Button',
+  tags: ['package:WebComponents'],
+  component: 'post-menu',
+  parameters: {
+    design: {},
+  },
+  render,
+  args: {
+    id: 'menu-one',
+    placement: 'bottom',
+    padding: '',
+    backgroundColor: '',
+  },
+  argTypes: {
+    id: {
+      name: 'id',
+      description:
+        'The id is used to connect a trigger element with the popover.',
+      table: {
+        category: 'General',
+      },
+    },
+    padding: {
+      name: 'padding',
+      description: 'Controls the padding inside the menu container using --post-menu-padding.',
+      control: { type: 'text' },
+      table: {
+        category: 'CSS Variables',
+      },
+    },
+    backgroundColor: {
+      name: 'background color',
+      description: 'Defines the color of the menu.',
+      table: {
+        category: 'CSS Variables'
+      },
+    },
+  },
+};
+
+function render(args: Args) {
+  // Construct the style string conditionally based on padding and backgroundColor
+  const styles = [
+    args.padding ? `--post-menu-padding: ${args.padding};` : '',
+    args.backgroundColor ? `--post-menu-bg: ${args.backgroundColor};` : ''
+  ].filter(Boolean).join(' ').trim();
+
+  return html`
+    <post-menu-trigger for="${args.id}">
+      <button class="btn btn-primary">Menu button</button>
+    </post-menu-trigger>
+    <post-menu 
+      style="${styles || nothing}" 
+      id="${args.id}" 
+      placement="${args.placement !== 'bottom' ? args.placement : nothing}"
+    >
+      <post-menu-item><button>Example 1</button></post-menu-item>
+      <post-menu-item>
+        <a href="#">Example 2</a>
+        <post-menu-item><div>Example 3</div></post-menu-item>
+      </post-menu-item>
+    </post-menu>
+  `;
+}
+
+export default meta;
+export const Default: StoryObj = {};
diff --git a/packages/documentation/src/stories/components/skiplinks/skiplinks.docs.mdx b/packages/documentation/src/stories/components/skiplinks/skiplinks.docs.mdx
new file mode 100644
index 0000000000..244f3f248d
--- /dev/null
+++ b/packages/documentation/src/stories/components/skiplinks/skiplinks.docs.mdx
@@ -0,0 +1,20 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as Skiplinks from './skiplinks.stories.ts';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={Skiplinks} />
+
+<div className="docs-title">
+# Skiplinks
+</div>
+
+<div className="lead">
+  People using keyboard, screen readers, switch controls and other assistive technologies use skip
+  links to reach main content or other important sections easier and faster.
+</div>
+
+For the skiplinks to work, don't forget to add corresponding ID to the element that needs to be skipped to.
+
+<Canvas sourceState="shown" of={Skiplinks.Default} />
+
+<StylesPackageImport components={['skiplinks']} />
diff --git a/packages/documentation/src/stories/components/skiplinks/skiplinks.snapshot.stories.ts b/packages/documentation/src/stories/components/skiplinks/skiplinks.snapshot.stories.ts
new file mode 100644
index 0000000000..b676a7e7d7
--- /dev/null
+++ b/packages/documentation/src/stories/components/skiplinks/skiplinks.snapshot.stories.ts
@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/web-components';
+import meta, { renderSkiplinks } from './skiplinks.stories';
+import { html } from 'lit';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Skiplinks: Story = {
+  render: () => {
+    return html`<div class="skiplinks-container">${renderSkiplinks()}</div> `;
+  },
+};
diff --git a/packages/documentation/src/stories/components/skiplinks/skiplinks.stories.ts b/packages/documentation/src/stories/components/skiplinks/skiplinks.stories.ts
new file mode 100644
index 0000000000..aa14b2b864
--- /dev/null
+++ b/packages/documentation/src/stories/components/skiplinks/skiplinks.stories.ts
@@ -0,0 +1,41 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit/static-html.js';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '2fc3b456-19ba-4ede-b1bc-499518f829b1',
+  title: 'Components/Skiplinks',
+  tags: ['package:HTML'],
+  render: renderSkiplinks,
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export function renderSkiplinks() {
+  return html`
+    <div class="skiplinks">
+      <a href="#navigation" target="_self">Navigation</a>
+      <a href="#main-content" target="_self">Main</a>
+    </div>
+    <div id="navigation" role="navigation">
+      Navigation
+      <ul>
+        <li>
+          <a href="#">Link</a>
+        </li>
+      </ul>
+    </div>
+    <div id="main-content" role="main" tabindex="-1">
+      Main content
+      <ul>
+        <li>
+          <a href="#">Link</a>
+        </li>
+      </ul>
+    </div>
+  `;
+}
+
+export const Default: Story = {};
diff --git a/packages/documentation/src/stories/foundation/list/list-reset.sample.scss b/packages/documentation/src/stories/foundation/list/list-reset.sample.scss
new file mode 100644
index 0000000000..8e3a24e4da
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/list/list-reset.sample.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+ul.my-list {
+  @include post.reset-list();
+}
diff --git a/packages/documentation/src/stories/utilities/list/list.docs.mdx b/packages/documentation/src/stories/foundation/list/list.docs.mdx
similarity index 86%
rename from packages/documentation/src/stories/utilities/list/list.docs.mdx
rename to packages/documentation/src/stories/foundation/list/list.docs.mdx
index a9d6ade2a3..23b66f1480 100644
--- a/packages/documentation/src/stories/utilities/list/list.docs.mdx
+++ b/packages/documentation/src/stories/foundation/list/list.docs.mdx
@@ -1,5 +1,6 @@
-import { Meta, Canvas } from '@storybook/blocks';
+import { Meta, Canvas, Source } from '@storybook/blocks';
 import * as ListStories from './list.stories';
+import SampleListReset from './list-reset.sample.scss?raw';
 
 <Meta of={ListStories} />
 
@@ -24,6 +25,16 @@ This only applies to immediate child list items, meaning you will need to add th
 
 <Canvas of={ListStories.UnstyledList} sourceState="shown" />
 
+#### Sass mixin
+
+If you want to use the class above, you can still reset the list styles with the following mixin:
+
+<Source
+  language="scss"
+  dark
+  code={SampleListReset}
+></Source>
+
 ### Inline
 
 Remove a list’s bullets and apply some light margin with a combination of two classes,
diff --git a/packages/documentation/src/stories/utilities/list/list.stories.ts b/packages/documentation/src/stories/foundation/list/list.stories.ts
similarity index 96%
rename from packages/documentation/src/stories/utilities/list/list.stories.ts
rename to packages/documentation/src/stories/foundation/list/list.stories.ts
index f06cbf056d..89366eeedb 100644
--- a/packages/documentation/src/stories/utilities/list/list.stories.ts
+++ b/packages/documentation/src/stories/foundation/list/list.stories.ts
@@ -4,7 +4,7 @@ import { MetaExtended } from '@root/types';
 
 const meta: MetaExtended = {
   id: 'e76192bb-b2eb-487a-b9c1-ef938bccdfc4',
-  title: 'Utilities/List',
+  title: 'Foundations/Typography/Lists',
   parameters: {
     badges: [],
   },
@@ -16,16 +16,15 @@ type Story = StoryObj;
 
 export const UnorderedList: Story = {
   render: () => html`
-    <ul>
+    <ul class="list-bullet">
       <li>This is an unordered list.</li>
       <li>It appears in its default style.</li>
       <li>Therefore it is rendered with a bullet point in front of each list item.</li>
       <li>
         Nested list:
-        <ul>
+        <ul class="list-bullet">
           <li>This is a nested list</li>
           <li>It is further indented, depending on the depth of nesting.</li>
-          <li>Nested lists have different bullet points than their parents.</li>
         </ul>
       </li>
       <li>This item belongs to the parent list.</li>
@@ -41,7 +40,7 @@ export const UnstyledList: Story = {
       <li>Structurally, it's still a list.</li>
       <li>
         Nested list:
-        <ul>
+        <ul class="list-bullet">
           <li>They are unaffected by the style of its parent.</li>
           <li>So they will still show a bullet.</li>
           <li>And have an appropriate left indent.</li>
diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx
new file mode 100644
index 0000000000..48fcfe4a04
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx
@@ -0,0 +1,29 @@
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { formatAsMap } from '@/utils/sass-export';
+import * as VerticalAlignStories from './vertical-align.stories';
+
+<Meta of={VerticalAlignStories} />
+
+# Vertical Alignment
+
+<div className="lead">
+  Use the vertical alignment utilities to adjust the alignment of elements.
+</div>
+
+Note that vertical-align applies only to `inline`, `inline-block, `inline-table`, and `table-cell` elements.
+
+## Examples
+
+With inline elements:
+
+<Canvas sourceState="shown" of={VerticalAlignStories.Default} />
+<div className="hide-col-default">
+  <Controls of={VerticalAlignStories.Default} />
+</div>
+
+With table cells:
+
+<Canvas sourceState="shown" of={VerticalAlignStories.tableVersion} />
+<div className="hide-col-default">
+  <Controls of={VerticalAlignStories.tableVersion} />
+</div>
diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts
new file mode 100644
index 0000000000..31e346cb88
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts
@@ -0,0 +1,33 @@
+import type { StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
+import { html } from 'lit';
+import meta from './vertical-align.stories';
+import './vertical-align.styles.scss';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const VerticalAlign: Story = {
+  render: () => {
+    return html`
+      ${meta?.argTypes?.align?.options?.map(
+        align =>
+          html`<div>
+            <span>${align ? `align-${align}` : 'text'}</span>
+            <img class="logo align-${align}" alt="logo" src="/assets/images/logo-swisspost.svg" />
+          </div>`,
+      )}
+    `;
+  },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`<div class="snapshot">${story(context.args, context)}</div>`;
+      return storyTemplate;
+    },
+  ],
+};
diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts
new file mode 100644
index 0000000000..db879df901
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts
@@ -0,0 +1,68 @@
+import type { Args, StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
+import { html, nothing } from 'lit';
+import './vertical-align.styles.scss';
+import { MetaExtended } from '@root/types';
+
+const alignOptions = ['baseline', 'top', 'middle', 'bottom', 'text-bottom', 'text-top'];
+
+const meta: MetaExtended = {
+  id: 'cf01f6d1-970f-444e-aaa9-8a96c25cc8b2',
+  title: 'Utilities/Vertical Align',
+  args: {
+    align: '',
+  },
+  argTypes: {
+    align: {
+      name: 'align',
+      description: 'Set the vertical alignment of the text',
+      control: {
+        type: 'select',
+      },
+      options: alignOptions,
+    },
+  },
+  render: (args: Args) => {
+    return html`<span class="align-baseline">baseline</span>
+      <span class="align-top">top</span>
+      <span class="align-middle">middle</span>
+      <span class="align-bottom">bottom</span>
+      <span class="align-text-bottom">text-bottom</span>
+      <span class="align-text-top">text-top</span>
+      <span class="${args.align ? 'align-' + args.align : nothing}">${args.align || 'text'}</span>`;
+  },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`<div class="vertical-align-example">
+        ${story(context.args, context)}
+      </div>`;
+      return storyTemplate;
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const tableVersion: Story = {
+  argTypes: {
+    align: {
+      options: alignOptions.filter(o => !o.includes('text-')),
+    },
+  },
+  render: (args: Args) => {
+    return html`<table class="table table-bordered">
+      <tbody>
+        <tr>
+          <td class="align-baseline">baseline</td>
+          <td class="align-top">top</td>
+          <td class="align-middle">middle</td>
+          <td class="align-bottom">bottom</td>
+          <td class="${args.align ? 'align-' + args.align : nothing}">${args.align || 'text'}</td>
+        </tr>
+      </tbody>
+    </table>`;
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss
new file mode 100644
index 0000000000..1100f28378
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss
@@ -0,0 +1,61 @@
+.vertical-align-example {
+  :not(:has(table)) & {
+    border: 1px solid rgb(204, 204, 204);
+    line-height: 3;
+  }
+
+  table {
+    margin: 0;
+    height: 100px;
+    td:nth-of-type(5) {
+      color: red;
+    }
+  }
+
+  span {
+    padding-inline: 0.5rem;
+    &:nth-of-type(7) {
+      padding-inline-start: 2rem;
+      color: red;
+    }
+  }
+
+  .logo {
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+  }
+
+  .snapshot {
+    gap: 2rem;
+    display: flex;
+    flex-direction: column;
+
+    & > div {
+      border: 1px solid rgb(204, 204, 204);
+      width: 320px;
+
+      span {
+        min-width: 150px;
+      }
+
+      span:nth-of-type(2) {
+        color: gray;
+      }
+    }
+  }
+
+  .box {
+    border: 1px solid rgb(204, 204, 204);
+    height: 50px;
+    width: 50px;
+    display: inline-block;
+    text-align: center;
+  }
+}
+
+#storybook-root .vertical-align-example {
+  &:not(:has(table)) {
+    border: none;
+  }
+}
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 9884c38702..266f90b48c 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @swisspost/design-system-icons
 
+## 9.0.0-next.4
+
+### Minor Changes
+
+- Added icon number 2632. (by [@gfellerph](https://github.com/gfellerph) with [#3952](https://github.com/swisspost/design-system/pull/3952))
+
 ## 9.0.0-next.3
 
 ### Minor Changes
diff --git a/packages/icons/package.json b/packages/icons/package.json
index a99c408c8e..bfab4bb763 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-icons",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "A collection of Swiss Post icons intended for use with the Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
diff --git a/packages/icons/public/post-icons/2632.svg b/packages/icons/public/post-icons/2632.svg
new file mode 100644
index 0000000000..a906fca2d3
--- /dev/null
+++ b/packages/icons/public/post-icons/2632.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 0C7.16 0 0 7.16 0 16s7.16 16 16 16 16-7.16 16-16S24.84 0 16 0m0 30.67C7.91 30.67 1.33 24.09 1.33 16S7.91 1.33 16 1.33 30.67 7.91 30.67 16 24.09 30.67 16 30.67M9.18 10.66c-3.35 3.35-3.35 8.81 0 12.16 1.68 1.68 3.88 2.51 6.08 2.51s4.4-.84 6.08-2.51a8.7 8.7 0 0 0 2.21-3.81L24.3 7.7l-11.24.73a8.6 8.6 0 0 0-3.88 2.23m13.68-1.53-.64 9.65a7.16 7.16 0 0 1-1.83 3.09c-1.37 1.37-3.19 2.12-5.14 2.12s-3.77-.75-5.14-2.12c-2.83-2.83-2.83-7.44 0-10.27.87-.87 1.96-1.51 3.16-1.85l9.58-.62Zm-7.6 10.83a3.2 3.2 0 0 0 2.28-.94 3.223 3.223 0 0 0 0-4.56c-.63-.63-1.45-.94-2.28-.94s-1.65.31-2.28.94a3.223 3.223 0 0 0 0 4.56 3.2 3.2 0 0 0 2.28.94m-1.34-4.56c.36-.36.83-.55 1.34-.55s.98.2 1.34.55c.36.36.55.83.55 1.34s-.2.98-.55 1.34c-.36.36-.83.55-1.34.55s-.98-.2-1.34-.55-.55-.83-.55-1.34.2-.98.55-1.34"/>
+</svg>
diff --git a/packages/icons/public/report.json b/packages/icons/public/report.json
index be46312c96..51a74ee2e7 100644
--- a/packages/icons/public/report.json
+++ b/packages/icons/public/report.json
@@ -11385,50 +11385,6 @@
       "createdAt": "2020-12-18T07:32:42.000Z",
       "modifiedAt": "2024-10-18T07:14:11.000Z"
     },
-    {
-      "uuid": "88307300-5bef-11eb-9f99-005056873709",
-      "id": 539481,
-      "type": "picture.pictogram.",
-      "typeFilter": "pictograms",
-      "meta": {
-        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/539481/storage/NTM5NDg5LzAvbWFzdGVy",
-        "keywords": [
-          "LAD",
-          "Leistung am Domizil",
-          "Prestazione a domicilio",
-          "Service at home",
-          "Prestation à domicile",
-          "Wegweiser",
-          "Sign",
-          "Segno",
-          "Signer",
-          "Sinnbild",
-          "Symbol",
-          "Simbolo",
-          "Symbole",
-          "Strassenschild",
-          "Road Sign",
-          "Segnale stradale",
-          "Panneau De Signalisation"
-        ],
-        "year": [
-          "2021"
-        ]
-      },
-      "file": {
-        "mime": "image/svg+xml",
-        "name": "2205.svg",
-        "basename": "2205",
-        "ext": ".svg",
-        "size": {
-          "width": 0,
-          "dpi": 72,
-          "height": 0
-        }
-      },
-      "createdAt": "2021-01-21T13:49:50.000Z",
-      "modifiedAt": "2024-10-24T05:04:06.000Z"
-    },
     {
       "uuid": "4cc7c010-5bf0-11eb-9f99-005056873709",
       "id": 539487,
@@ -11475,6 +11431,50 @@
       "createdAt": "2021-01-21T13:55:20.000Z",
       "modifiedAt": "2024-10-18T07:14:11.000Z"
     },
+    {
+      "uuid": "88307300-5bef-11eb-9f99-005056873709",
+      "id": 539481,
+      "type": "picture.pictogram.",
+      "typeFilter": "pictograms",
+      "meta": {
+        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/539481/storage/NTM5NDg5LzAvbWFzdGVy",
+        "keywords": [
+          "LAD",
+          "Leistung am Domizil",
+          "Prestazione a domicilio",
+          "Service at home",
+          "Prestation à domicile",
+          "Wegweiser",
+          "Sign",
+          "Segno",
+          "Signer",
+          "Sinnbild",
+          "Symbol",
+          "Simbolo",
+          "Symbole",
+          "Strassenschild",
+          "Road Sign",
+          "Segnale stradale",
+          "Panneau De Signalisation"
+        ],
+        "year": [
+          "2021"
+        ]
+      },
+      "file": {
+        "mime": "image/svg+xml",
+        "name": "2205.svg",
+        "basename": "2205",
+        "ext": ".svg",
+        "size": {
+          "width": 0,
+          "dpi": 72,
+          "height": 0
+        }
+      },
+      "createdAt": "2021-01-21T13:49:50.000Z",
+      "modifiedAt": "2024-10-24T05:04:06.000Z"
+    },
     {
       "uuid": "044e0500-5bf1-11eb-9f99-005056873709",
       "id": 539492,
@@ -29138,6 +29138,34 @@
       "createdAt": "2024-10-24T12:09:32.000Z",
       "modifiedAt": "2024-10-25T12:05:09.317Z"
     },
+    {
+      "uuid": "ae649aa0-9b5c-11ef-9712-005056873709",
+      "id": 820602,
+      "type": "picture.pictogram.",
+      "typeFilter": "pictograms",
+      "meta": {
+        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/820602/storage/ODIwNjAxLzAvbWFzdGVy",
+        "keywords": [
+          "shoot photo",
+          "scattare foto",
+          "Foto aufnehmen",
+          "photo prise"
+        ]
+      },
+      "file": {
+        "mime": "image/svg+xml",
+        "name": "2632.svg",
+        "basename": "2632",
+        "ext": ".svg",
+        "size": {
+          "width": 0,
+          "dpi": 72,
+          "height": 0
+        }
+      },
+      "createdAt": "2024-11-05T09:59:43.000Z",
+      "modifiedAt": "2024-11-05T10:11:18.000Z"
+    },
     {
       "uuid": "6faf6ef0-c5ff-11e7-a943-005056a94f4a",
       "id": 352241,
@@ -41636,12 +41664,12 @@
   "wrongViewBox": [],
   "noKeywords": [
     {
-      "uuid": "717dc650-c5ff-11e7-a943-005056a94f4a",
-      "id": 352314,
+      "uuid": "711a4990-c5ff-11e7-a943-005056a94f4a",
+      "id": 352299,
       "type": "picture.pictogram.",
       "typeFilter": "pictograms",
       "meta": {
-        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352314/storage/NTM3MjI0LzAvbWFzdGVy",
+        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352299/storage/NTM3MTkxLzAvbWFzdGVy",
         "businessfield": [
           "kommunikation"
         ],
@@ -41654,8 +41682,8 @@
       },
       "file": {
         "mime": "image/svg+xml",
-        "name": "3073.svg",
-        "basename": "3073",
+        "name": "3058.svg",
+        "basename": "3058",
         "ext": ".svg",
         "size": {
           "width": 0,
@@ -41664,15 +41692,15 @@
         }
       },
       "createdAt": "2017-11-10T10:11:07.000Z",
-      "modifiedAt": "2024-03-12T14:51:51.000Z"
+      "modifiedAt": "2024-03-12T14:51:50.000Z"
     },
     {
-      "uuid": "711a4990-c5ff-11e7-a943-005056a94f4a",
-      "id": 352299,
+      "uuid": "717dc650-c5ff-11e7-a943-005056a94f4a",
+      "id": 352314,
       "type": "picture.pictogram.",
       "typeFilter": "pictograms",
       "meta": {
-        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352299/storage/NTM3MTkxLzAvbWFzdGVy",
+        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352314/storage/NTM3MjI0LzAvbWFzdGVy",
         "businessfield": [
           "kommunikation"
         ],
@@ -41685,8 +41713,8 @@
       },
       "file": {
         "mime": "image/svg+xml",
-        "name": "3058.svg",
-        "basename": "3058",
+        "name": "3073.svg",
+        "basename": "3073",
         "ext": ".svg",
         "size": {
           "width": 0,
@@ -41695,7 +41723,7 @@
         }
       },
       "createdAt": "2017-11-10T10:11:07.000Z",
-      "modifiedAt": "2024-03-12T14:51:50.000Z"
+      "modifiedAt": "2024-03-12T14:51:51.000Z"
     },
     {
       "uuid": "6b09bf30-9901-11eb-935b-005056873709",
@@ -41809,11 +41837,11 @@
   ],
   "noSVG": [],
   "errored": [],
-  "created": "2024-10-27T01:40:29.123Z",
+  "created": "2024-11-10T01:37:42.898Z",
   "stats": {
     "errors": 0,
     "notFound": 0,
-    "success": 961
+    "success": 962
   },
-  "version": "8.3.0"
+  "version": "8.4.0"
 }
\ No newline at end of file
diff --git a/packages/internet-header/CHANGELOG.md b/packages/internet-header/CHANGELOG.md
index 6045c62d48..191aa04061 100644
--- a/packages/internet-header/CHANGELOG.md
+++ b/packages/internet-header/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/internet-header
 
+## 2.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 2.0.0-next.3
 
 ### Major Changes
diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json
index b2f9d12ab1..3fc3baad3d 100644
--- a/packages/internet-header/package.json
+++ b/packages/internet-header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/internet-header",
-  "version": "2.0.0-next.3",
+  "version": "2.0.0-next.4",
   "description": "The header for client facing applications.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -43,7 +43,7 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "body-scroll-lock": "4.0.0-beta.0",
     "iframe-resizer": "4.4.5",
     "jquery": "3.7.1",
diff --git a/packages/internet-header/src/components/post-skiplinks/post-skiplinks.scss b/packages/internet-header/src/components/post-skiplinks/post-skiplinks.scss
index f52a39bec5..ea5e33412e 100644
--- a/packages/internet-header/src/components/post-skiplinks/post-skiplinks.scss
+++ b/packages/internet-header/src/components/post-skiplinks/post-skiplinks.scss
@@ -1,24 +1,5 @@
+@use '@swisspost/design-system-styles/components/skiplinks';
+
 :host {
   display: block;
 }
-
-.skiplinks {
-  a {
-    position: absolute;
-    top: 0.5rem;
-    left: 0.5rem;
-    clip: rect(0 0 0 0);
-    width: 1px;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    padding: 0.25rem;
-    background: white;
-
-    &:focus-visible {
-      position: absolute;
-      clip: unset;
-      width: auto;
-    }
-  }
-}
diff --git a/packages/intranet-header-workspace/CHANGELOG.md b/packages/intranet-header-workspace/CHANGELOG.md
index 91492befb9..9089734bf1 100644
--- a/packages/intranet-header-workspace/CHANGELOG.md
+++ b/packages/intranet-header-workspace/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header-workspace
 
+## 3.0.22-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 3.0.22-next.3
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json
index 0de925c6c9..4765f5d611 100644
--- a/packages/intranet-header-workspace/package.json
+++ b/packages/intranet-header-workspace/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-intranet-header-workspace",
-  "version": "3.0.22-next.3",
+  "version": "3.0.22-next.4",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -23,7 +23,7 @@
     "@angular/router": "18.2.10",
     "@ng-bootstrap/ng-bootstrap": "17.0.0",
     "@popperjs/core": "2.11.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "watch": "1.0.2",
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md
index 079e480e30..59a093b10e 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header-showcase
 
+## 1.0.10-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-intranet-header@9.0.0-next.4
+
 ## 1.0.10-next.3
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json b/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json
index d46ae766af..8a6a4aa998 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@swisspost/design-system-intranet-header-showcase",
-  "version": "1.0.10-next.3",
+  "version": "1.0.10-next.4",
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
-    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.3"
+    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.4"
   }
 }
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.spec.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.spec.ts
index 16e17d36e7..3d7bf904a5 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.spec.ts
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.spec.ts
@@ -1,3 +1,4 @@
+import 'jasmine';
 import { TestBed } from '@angular/core/testing';
 import { SamplesNavigationComponent } from './navigation.component';
 
diff --git a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
index fdf8cfd7e4..80c03b908e 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
+++ b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header
 
+## 9.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/projects/intranet-header/package.json b/packages/intranet-header-workspace/projects/intranet-header/package.json
index e140974e8c..6b514d97bf 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/package.json
+++ b/packages/intranet-header-workspace/projects/intranet-header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-intranet-header",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Intranet header for internal Swiss Post applications as an Angular component.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -18,11 +18,11 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "tslib": "2.6.3"
   },
   "devDependencies": {
-    "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.3"
+    "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.4"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",
diff --git a/packages/migrations/CHANGELOG.md b/packages/migrations/CHANGELOG.md
index ff686a4cb5..2a14a52f7a 100644
--- a/packages/migrations/CHANGELOG.md
+++ b/packages/migrations/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-migrations
 
+## 9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ## 9.0.0-next.2
diff --git a/packages/migrations/package.json b/packages/migrations/package.json
index bc96131ef3..2cf92879b2 100644
--- a/packages/migrations/package.json
+++ b/packages/migrations/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-migrations",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Scripts to migrate an Angular application from one Design System version to another.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
diff --git a/packages/nextjs-integration/CHANGELOG.md b/packages/nextjs-integration/CHANGELOG.md
index 87b1330cee..85e09490e7 100644
--- a/packages/nextjs-integration/CHANGELOG.md
+++ b/packages/nextjs-integration/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @swisspost/design-system-nextjs-integration
 
+## 0.1.14-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+  - @swisspost/internet-header@2.0.0-next.4
+  - @swisspost/design-system-components-react@9.0.0-next.4
+
 ## 0.1.14-next.3
 
 ### Patch Changes
diff --git a/packages/nextjs-integration/package.json b/packages/nextjs-integration/package.json
index d1377d9510..11fe8acd03 100644
--- a/packages/nextjs-integration/package.json
+++ b/packages/nextjs-integration/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-nextjs-integration",
-  "version": "0.1.14-next.3",
+  "version": "0.1.14-next.4",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@swisspost/design-system-components-react": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
-    "@swisspost/internet-header": "workspace:2.0.0-next.3",
+    "@swisspost/design-system-components-react": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
+    "@swisspost/internet-header": "workspace:2.0.0-next.4",
     "next": "15.0.1",
     "react": "^18",
     "react-dom": "^18"
diff --git a/packages/styles-primeng-workspace/CHANGELOG.md b/packages/styles-primeng-workspace/CHANGELOG.md
index b81ee685f3..7f2aef3547 100644
--- a/packages/styles-primeng-workspace/CHANGELOG.md
+++ b/packages/styles-primeng-workspace/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-styles-primeng-workspace
 
+## 1.0.6-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 1.0.6-next.3
 
 ### Patch Changes
diff --git a/packages/styles-primeng-workspace/package.json b/packages/styles-primeng-workspace/package.json
index 312a3becaa..bfc99bbf30 100644
--- a/packages/styles-primeng-workspace/package.json
+++ b/packages/styles-primeng-workspace/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@swisspost/design-system-styles-primeng-workspace",
   "description": "Showcase for a Post like custom prime-ng theme",
-  "version": "1.0.6-next.3",
+  "version": "1.0.6-next.4",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -22,7 +22,7 @@
     "@angular/platform-browser": "18.2.10",
     "@angular/platform-browser-dynamic": "18.2.10",
     "@angular/router": "18.2.10",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "primeng": "17.18.7",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md b/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md
index b20af83a42..e21e541e05 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md
+++ b/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-styles-primeng
 
+## 9.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Patch Changes
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/package.json b/packages/styles-primeng-workspace/projects/styles-primeng/package.json
index 6bf017259b..3572a3bd59 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng/package.json
+++ b/packages/styles-primeng-workspace/projects/styles-primeng/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles-primeng",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Swiss Post styles for PrimeNg datatable.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -23,7 +23,7 @@
     "primeng": "^17.18.0"
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "tslib": "2.6.3"
   },
   "sideEffects": false,
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index 7c92a2548b..724092b33d 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -1,5 +1,33 @@
 # @swisspost/design-system-styles
 
+## 9.0.0-next.4
+
+### Major Changes
+
+- Removed regular button size. Buttons that were previously using `btn-rg` will now fall back to the default `btn-md` size. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849))
+
+- Updated list group to v2 and added new options: list links, list documents and list switches. (by [@leagrdv](https://github.com/leagrdv) with [#3740](https://github.com/swisspost/design-system/pull/3740))
+
+- Removed the `btn-animated` class. It no longer has any effect and can be removed from existing buttons. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849))
+
+- Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3659](https://github.com/swisspost/design-system/pull/3659))
+
+### Minor Changes
+
+- Added Form Footer component. (by [@leagrdv](https://github.com/leagrdv) with [#3616](https://github.com/swisspost/design-system/pull/3616))
+
+- Created token-based styles for `<ul>` elements. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3859](https://github.com/swisspost/design-system/pull/3859))
+
+- Updated vertical-align utility (by [@myrta2302](https://github.com/myrta2302) with [#3805](https://github.com/swisspost/design-system/pull/3805))
+
+- Updated button component to v2. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849))
+
+- Added the skiplinks component to styles and documentation. (by [@leagrdv](https://github.com/leagrdv) with [#3875](https://github.com/swisspost/design-system/pull/3875))
+
+- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880))
+
+- Internalized bootstraps floating utilities into the design system. (by [@myrta2302](https://github.com/myrta2302) with [#3752](https://github.com/swisspost/design-system/pull/3752))
+
 ## 9.0.0-next.3
 
 ### Major Changes
diff --git a/packages/styles/package.json b/packages/styles/package.json
index ae55c56de7..97215527b6 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "gulp-sourcemaps": "3.0.0"
   },
   "devDependencies": {
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-tokens": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-tokens": "workspace:9.0.0-next.4",
     "@types/node": "20.14.14",
     "autoprefixer": "10.4.19",
     "copyfiles": "2.4.1",
diff --git a/packages/styles/src/_svg-icon-map.scss b/packages/styles/src/_svg-icon-map.scss
index 634df00619..182f3cdb19 100644
--- a/packages/styles/src/_svg-icon-map.scss
+++ b/packages/styles/src/_svg-icon-map.scss
@@ -559,6 +559,8 @@ $svg-icon-map: (
     "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.6 24h-9.7v-1.5c4-3.5 7.8-7.6 7.8-10.3 0-4.2-6.3-2.4-6.9-2l-.3-1.4c.6-.3 8.8-3.1 8.8 3.4 0 3.8-7.3 10.1-7.8 10.4h8.1z'/%3E%3C/svg%3E",
   '3000':
     "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M17.4 8.2V24h-1.6V9.9c-.2.2-.5.5-.9.8-.3.3-.7.6-1 .9l-.9.8-.8-1L16 8.2z'/%3E%3C/svg%3E",
+  '2632':
+    "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16s7.16 16 16 16 16-7.16 16-16S24.84 0 16 0m0 30.67C7.91 30.67 1.33 24.09 1.33 16S7.91 1.33 16 1.33 30.67 7.91 30.67 16 24.09 30.67 16 30.67M9.18 10.66c-3.35 3.35-3.35 8.81 0 12.16 1.68 1.68 3.88 2.51 6.08 2.51s4.4-.84 6.08-2.51a8.7 8.7 0 0 0 2.21-3.81L24.3 7.7l-11.24.73a8.6 8.6 0 0 0-3.88 2.23m13.68-1.53-.64 9.65a7.16 7.16 0 0 1-1.83 3.09c-1.37 1.37-3.19 2.12-5.14 2.12s-3.77-.75-5.14-2.12c-2.83-2.83-2.83-7.44 0-10.27.87-.87 1.96-1.51 3.16-1.85l9.58-.62Zm-7.6 10.83a3.2 3.2 0 0 0 2.28-.94 3.223 3.223 0 0 0 0-4.56c-.63-.63-1.45-.94-2.28-.94s-1.65.31-2.28.94a3.223 3.223 0 0 0 0 4.56 3.2 3.2 0 0 0 2.28.94m-1.34-4.56c.36-.36.83-.55 1.34-.55s.98.2 1.34.55c.36.36.55.83.55 1.34s-.2.98-.55 1.34c-.36.36-.83.55-1.34.55s-.98-.2-1.34-.55-.55-.83-.55-1.34.2-.98.55-1.34'/%3E%3C/svg%3E",
   '2631':
     "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.99 24.54h-4.07v-4.82h4.07v-1.34h-7.76c-.37.5-.79.94-1.25 1.34h3.56v4.82h-6.28V21.3c-.44.16-.88.28-1.33.36v2.88h-6.32v-4.03a8 8 0 0 1-1.19-.92c-.04-.04-.08-.07-.12-.1-.36-.35-.69-.72-.98-1.11H.02v1.34h3.54v4.82H.01v7.49H32v-7.49zM4.95 19.72h6.32v4.82H4.95zm2.73 10.97H1.35v-4.82h6.33zm7.66 0H9.01v-4.82h6.33zm7.66 0h-6.33v-4.82H23zm7.67 0h-6.33v-4.82h6.33zM17.42 20.46c3.63 0 7.28-2.75 7.28-7.84-.01-2.46-.77-4.67-2.16-6.82 0 2.54-1.49 3.67-2.54 3.67C21.06 1.93 15.62.1 15.62.1c0 5.5-5.8 6.41-5.8 13.04 0 1.39 1.17 7.33 7.6 7.33Zm-2.36-3.77c.23.08.47.11.71.11h1.33v-1.34c0-.68.12-1.22.29-1.64.25.35.53.64.77.9.64.67 1.05 1.11 1.05 2.17 0 .02-.09 2.02-2.15 2.02-.96 0-1.99-.7-2-2.23Zm-1.11-9.88c1.05-1.25 2.19-2.63 2.72-4.52 1.18 1.05 2.55 3.13 2.02 6.99l-.21 1.52h1.53c1.02 0 2.05-.53 2.8-1.51.38 1.09.56 2.19.57 3.33 0 2.93-1.42 4.88-3.26 5.83.33-.65.44-1.28.44-1.55 0-3.03-2.66-3.08-2.66-5.6 0 0-2.12.98-2.12 4.17-.8 0-1.05-.98-1.05-1.93-.63.99-.99 2-.99 3.13 0 .6.11 1.12.31 1.58-2.66-1.66-2.88-5.07-2.88-5.11 0-2.98 1.36-4.6 2.79-6.32Z'/%3E%3C/svg%3E",
   '2630':
diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
index b146f756fe..41d7eacdf6 100644
--- a/packages/styles/src/components/_index.scss
+++ b/packages/styles/src/components/_index.scss
@@ -25,6 +25,7 @@
 @use 'forms';
 @use 'grid';
 @use 'icon-button';
+@use 'icon-close-button';
 @use 'icons';
 @use 'lead';
 @use 'list-group';
@@ -33,6 +34,7 @@
 @use 'popover';
 @use 'product-card';
 @use 'progress';
+@use 'skiplinks';
 @use 'sizing';
 @use 'spinner';
 @use 'stepper';
diff --git a/packages/styles/src/components/breadcrumb.scss b/packages/styles/src/components/breadcrumb.scss
index a211d18a8b..2f821f09e8 100644
--- a/packages/styles/src/components/breadcrumb.scss
+++ b/packages/styles/src/components/breadcrumb.scss
@@ -18,24 +18,3 @@
   font-weight: type.$font-weight-normal;
   white-space: nowrap;
 }
-
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-
-  .ppm-breadcrumb-divider {
-    fill: breadcrumbs.$breadcrumb-divider-color;
-  }
-
-  a {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    color: breadcrumbs.$breadcrumb-link-color;
-    text-decoration: none;
-
-    &:hover {
-      color: breadcrumbs.$breadcrumb-hover-color;
-    }
-  }
-}
diff --git a/packages/styles/src/components/icon-close-button.scss b/packages/styles/src/components/icon-close-button.scss
new file mode 100644
index 0000000000..c8eb34d175
--- /dev/null
+++ b/packages/styles/src/components/icon-close-button.scss
@@ -0,0 +1,28 @@
+@use '../functions/tokens';
+@use '../tokens/components';
+@use './../mixins/utilities';
+
+tokens.$default-map: components.$post-close;
+
+.btn-icon-close {
+  padding: 0;
+  border: unset;
+  min-height: unset;
+  min-width: unset;
+  width: tokens.get('close-size');
+  height: tokens.get('close-size');
+  border-radius: tokens.get('close-border-radius');
+  background-color: tokens.get('close-enabled-bg');
+  color: tokens.get('close-enabled-fg');
+
+  > post-icon {
+    width: tokens.get('close-icon-size');
+    height: tokens.get('close-icon-size');
+  }
+
+  @include utilities.not-disabled-hover() {
+    cursor: pointer;
+    background-color: tokens.get('close-hover-bg');
+    color: tokens.get('close-hover-fg');
+  }
+}
diff --git a/packages/styles/src/components/list-group.scss b/packages/styles/src/components/list-group.scss
index ebc233f24a..89465f55c9 100644
--- a/packages/styles/src/components/list-group.scss
+++ b/packages/styles/src/components/list-group.scss
@@ -1,162 +1,108 @@
 @forward './../variables/options';
-
-@use 'sass:map';
-
 @use './../themes/bootstrap/core' as *;
-@use './../themes/bootstrap/list-group' as bl;
 
-@use './../variables/color';
-@use './../variables/spacing';
-@use './../variables/type';
-@use './../variables/commons';
 @use './../variables/animation';
-@use './../variables/components/list-group';
-@use './../mixins/type' as type-mixins;
+@use './../mixins/utilities' as utilities-mx;
+
+@use '../functions/tokens';
+@use '../tokens/components';
+@use '../tokens/helpers';
+
+tokens.$default-map: components.$post-list;
 
 // Base class
 .list-group {
-  background-color: transparent;
+  background-color: tokens.get('list-bg');
+  list-style: none;
+  padding: 0;
 
-  &-box {
-    padding-top: map.get(spacing.$post-sizes, 'mini');
-    padding-bottom: map.get(spacing.$post-sizes, 'mini');
-    box-shadow: commons.$box-shadow;
+  > li {
+    border: unset;
+    padding: 0;
   }
 }
 
-.list-group-item-action {
-  @include transition(
-    color animation.$transition-time-simple animation.$transition-easing-default,
-    background-color animation.$transition-time-simple animation.$transition-easing-default
-  );
-
-  &:hover,
-  &:focus {
-    .list-group-item-right-svg {
-      transform: translateX(animation.$transition-distance-xsmall);
-    }
+.list-group-link,
+.list-group-document,
+.list-group-switch {
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  padding-block-start: tokens.get('list-item-padding-block-start');
+  padding-block-end: tokens.get('list-item-padding-block-end');
+  padding-inline-start: tokens.get('list-item-padding-inline-start');
+  padding-inline-end: tokens.get('list-item-padding-inline-end');
+  border-radius: tokens.get('focus-border-radius', helpers.$post-focus); // Used for the focus only
+  color: tokens.get('list-item-enabled-fg');
+
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    inset: auto 0 0;
+    border-block-end: tokens.get('list-item-border-width') tokens.get('list-item-border-style')
+      tokens.get('list-item-enabled-border');
   }
 
-  .list-group-item-right-svg {
-    @include transition(
-      transform animation.$transition-time-area-small animation.$transition-easing-default
-    );
-  }
+  &:hover {
+    color: tokens.get('list-item-hover-fg');
 
-  &-minimal,
-  &-transparent {
-    &:hover,
-    &:focus {
-      background-color: transparent;
+    &::after {
+      border-block-end-color: tokens.get('list-item-hover-border');
     }
   }
 
-  &-inverted {
-    background-color: transparent;
-
-    &:hover,
-    &:focus {
-      background-color: list-group.$list-group-hover-bg-inverted;
-    }
-  }
+  @include utilities-mx.focus-style;
 }
 
-.list-group-item {
-  display: flex;
-  align-content: center;
-  align-items: center;
-  justify-content: space-between;
-  padding-right: map.get(spacing.$post-sizes, 'small-regular');
-  padding-left: map.get(spacing.$post-sizes, 'small-regular');
-  background-color: transparent;
-  font-weight: normal;
+.list-group-link,
+.list-group-document {
   text-decoration: none;
-  border-collapse: collapse;
-  border-right: 0;
-  border-left: 0;
-
-  @include media-breakpoint-up(rg) {
-    padding-left: map.get(spacing.$post-sizes, 'large');
-
-    &-minimal {
-      padding-left: 0;
-    }
-
-    &-transparent {
-      padding-right: map.get(spacing.$post-sizes, 'mini');
-      padding-left: map.get(spacing.$post-sizes, 'regular');
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    &-big {
-      padding: map.get(spacing.$post-sizes, 'small-large') map.get(spacing.$post-sizes, 'mini')
-        map.get(spacing.$post-sizes, 'small-large') map.get(spacing.$post-sizes, 'regular');
-    }
-  }
+  gap: tokens.get('list-item-gap-inline');
 
-  &-svg {
+  > post-icon {
     flex: 0 0 auto;
-  }
-
-  &-left-icon {
-    justify-content: flex-start;
-    padding-left: map.get(spacing.$post-sizes, 'mini');
-
-    @include media-breakpoint-up(rg) {
-      padding-left: map.get(spacing.$post-sizes, 'small-regular');
-    }
-
-    .list-group-item-svg {
-      margin-right: map.get(spacing.$post-sizes, 'mini');
+    padding-block: tokens.get('list-icon-container-padding-block');
+    padding-inline: tokens.get('list-icon-container-padding-inline');
+    width: calc(
+      #{tokens.get('list-icon-size')} + (2 * #{tokens.get('list-icon-container-padding-inline')})
+    );
+    height: calc(
+      #{tokens.get('list-icon-size')} + (2 * #{tokens.get('list-icon-container-padding-block')})
+    );
 
-      @include media-breakpoint-up(rg) {
-        margin-right: map.get(spacing.$post-sizes, 'small-regular');
-      }
+    &:last-child {
+      margin-left: auto;
     }
   }
+}
 
-  &-no-border {
-    border: 0;
-  }
+.list-group-switch {
+  justify-content: space-between;
+  margin-bottom: 0;
+  flex-wrap: nowrap;
 
-  &-minimal {
-    padding-right: 0;
-    padding-left: 0;
-    @include type-mixins.font-curve('bigger-regular');
+  &:hover .form-check-label {
+    color: tokens.get('list-item-hover-fg');
   }
 
-  &-transparent {
-    background-color: transparent;
-
-    @include media-breakpoint-up(rg) {
-      padding-left: map.get(spacing.$post-sizes, 'regular');
-    }
-
-    &:hover {
-      background-color: transparent;
-    }
+  .form-check-label {
+    color: tokens.get('list-item-enabled-fg');
   }
 
-  &-white {
-    background-color: transparent;
-    color: color.$white;
-
-    &:hover {
-      background-color: transparent;
-      color: rgba(var(--post-contrast-color-inverted-rgb), 0.8);
-    }
+  .form-check-input {
+    flex-shrink: 0;
+    margin-block: tokens.get('list-switch-padding-block');
   }
+}
 
-  .list-group &:last-child {
-    border-bottom: 0;
-  }
+.list-group-link:hover post-icon,
+.list-group-link:focus post-icon {
+  transform: translateX(animation.$transition-distance-xsmall);
 }
 
-.list-group-white {
-  .list-group-item {
-    border: 0;
-    border-top: list-group.$list-group-border-width solid
-      rgba(var(--post-contrast-color-inverted-rgb), 0.2);
-  }
+.list-group-link post-icon {
+  @include transition(
+    transform animation.$transition-time-area-small animation.$transition-easing-default
+  );
 }
diff --git a/packages/styles/src/components/skiplinks.scss b/packages/styles/src/components/skiplinks.scss
new file mode 100644
index 0000000000..baef487802
--- /dev/null
+++ b/packages/styles/src/components/skiplinks.scss
@@ -0,0 +1,20 @@
+.skiplinks {
+  a {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    clip: rect(0 0 0 0);
+    width: 1px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    padding: 0.25rem;
+    background: #fff;
+
+    &:focus-visible {
+      position: absolute;
+      clip: unset;
+      width: auto;
+    }
+  }
+}
diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss
index 71871260bc..bbd73275c0 100644
--- a/packages/styles/src/elements/_index.scss
+++ b/packages/styles/src/elements/_index.scss
@@ -2,6 +2,7 @@
 
 @use 'body';
 @use 'anchor';
+@use 'list-bullet';
 @use 'paragraph';
 @use 'fieldset-legend';
 @use 'heading';
diff --git a/packages/styles/src/elements/list-bullet.scss b/packages/styles/src/elements/list-bullet.scss
new file mode 100644
index 0000000000..1460f5d361
--- /dev/null
+++ b/packages/styles/src/elements/list-bullet.scss
@@ -0,0 +1,58 @@
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+tokens.$default-map: elements.$post-listbullet;
+
+/* The chars used in suffix are spaces with different widths
+For more information, visit: https://www.fileformat.info/info/unicode/char/search.htm?q=space
+*/
+@counter-style post-bullet {
+  system: extends disc;
+  suffix: '\2007\2009\200a\200a';
+}
+
+ul {
+  list-style: post-bullet;
+  margin-block: tokens.get('list-bullet-margin-block');
+  padding-inline-start: calc(
+    #{tokens.get('list-bullet-item-icon-size')} + #{tokens.get('list-bullet-item-icon-gap-inline')}
+  );
+
+  > li {
+    &::marker {
+      line-height: 1;
+    }
+  }
+
+  &.list-bullet {
+    list-style: none;
+
+    > li {
+      padding-block: tokens.get('list-bullet-item-text-padding-block');
+
+      ~ li {
+        margin-block-start: tokens.get('list-bullet-item-gap-block');
+      }
+
+      &::before {
+        display: block;
+        content: '';
+        box-sizing: content-box;
+        position: absolute;
+        margin-block-start: calc(
+          (#{tokens.get('body-line-height', elements.$post-body)} * 0.5em) -
+            (#{tokens.get('list-bullet-item-icon-bullet-size')} * 0.5)
+        );
+        margin-inline-start: calc(
+          (#{tokens.get('list-bullet-item-icon-size')} * -0.5) +
+            (#{tokens.get('list-bullet-item-icon-bullet-size')} * -0.5) +
+            (#{tokens.get('post-list-bullet-item-icon-gap-inline')} * -1)
+        );
+        width: tokens.get('list-bullet-item-icon-bullet-size');
+        height: tokens.get('list-bullet-item-icon-bullet-size');
+        background-color: currentColor;
+        border-radius: 50%;
+      }
+    }
+  }
+}
diff --git a/packages/styles/src/mixins/_media.scss b/packages/styles/src/mixins/_media.scss
index 340afbaeee..475321853b 100644
--- a/packages/styles/src/mixins/_media.scss
+++ b/packages/styles/src/mixins/_media.scss
@@ -2,6 +2,8 @@
 @use 'sass:meta';
 @use '../functions/breakpoint';
 
+$offset: 0.01;
+
 /**
   Creates a min-width breakpoint with the given value
   @param $device-size A pixel value or a key for the breakpoints map
@@ -29,7 +31,7 @@
     $device-size: breakpoint.min-width($device-size);
   }
 
-  @media screen and (max-width: ($device-size - 0.01)) {
+  @media screen and (max-width: ($device-size - $offset)) {
     @content;
   }
 }
@@ -47,7 +49,7 @@
     $max-size: breakpoint.min-width($max-size);
   }
 
-  @media screen and (min-width: $min-size) and (max-width: ($max-size - 0.01)) {
+  @media screen and (min-width: $min-size) and (max-width: ($max-size - $offset)) {
     @content;
   }
 }
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
index 2996399842..6c7a8020c3 100644
--- a/packages/styles/src/mixins/_utilities.scss
+++ b/packages/styles/src/mixins/_utilities.scss
@@ -11,6 +11,17 @@
   margin: 0;
   padding: 0;
   list-style: none;
+
+  &.list-bullet {
+    > li {
+      margin: 0;
+      padding: 0;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
 }
 
 @mixin visuallyhidden() {
diff --git a/packages/styles/src/themes/bootstrap/_overrides-variables.scss b/packages/styles/src/themes/bootstrap/_overrides-variables.scss
index ca9d63b291..4131f4789d 100644
--- a/packages/styles/src/themes/bootstrap/_overrides-variables.scss
+++ b/packages/styles/src/themes/bootstrap/_overrides-variables.scss
@@ -24,7 +24,6 @@
 @forward './../../variables/components/form-validation';
 @forward './../../variables/components/form-select';
 @forward './../../variables/components/forms';
-@forward './../../variables/components/list-group';
 @forward './../../variables/components/modal';
 @forward './../../variables/components/nav';
 @forward './../../variables/components/navbar';
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index 88efc41434..7a575257c7 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -39,6 +39,8 @@ $utilities: map.remove($utilities, 'justify-content');
 
 $utilities: map.remove($utilities, 'display');
 
+$utilities: map.remove($utilities, 'vertical-align');
+
 $utilities: map.remove($utilities, 'float');
 
 $utilities: map.remove($utilities, 'opacity');
diff --git a/packages/styles/src/utilities/_index.scss b/packages/styles/src/utilities/_index.scss
index 54e154f001..7e4688b794 100644
--- a/packages/styles/src/utilities/_index.scss
+++ b/packages/styles/src/utilities/_index.scss
@@ -6,6 +6,7 @@
 
 @use './mixins' as *;
 @use './variables' as *;
+@use './not-defined' as *;
 
 @use './temp/legacy';
 
diff --git a/packages/styles/src/utilities/_not-defined.scss b/packages/styles/src/utilities/_not-defined.scss
new file mode 100644
index 0000000000..fa9113df7e
--- /dev/null
+++ b/packages/styles/src/utilities/_not-defined.scss
@@ -0,0 +1,25 @@
+/* 
+  Initial visibility of the components is set to hidden to prevent 'flickering' effect due to stencil js/scss delay.
+*/
+
+:where(
+    post-list,
+    post-list-item,
+    post-accordion,
+    post-accordion-item,
+    post-alert,
+    post-card-control,
+    post-collapsible,
+    post-icon,
+    post-logo,
+    post-popover,
+    post-popovercontainer,
+    post-rating,
+    post-tab-header,
+    post-tab-panel,
+    post-tabs,
+    post-tag,
+    post-tooltip
+  ):not(:defined) {
+  visibility: hidden;
+}
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index 7902d738b2..52ad221068 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -22,6 +22,11 @@
 */
 
 $utilities: (
+  'align': (
+    property: vertical-align,
+    class: align,
+    values: baseline top middle bottom text-bottom text-top,
+  ),
   'float': (
     responsive: true,
     property: float,
@@ -83,7 +88,6 @@ $utilities: (
     class: ms,
     values: from-tokens('spacing', 'margin'),
   ),
-
   'padding': (
     responsive: true,
     property: padding,
@@ -126,7 +130,6 @@ $utilities: (
     class: ps,
     values: from-tokens('spacing', 'padding'),
   ),
-
   'gap': (
     responsive: true,
     property: gap,
diff --git a/packages/styles/src/variables/components/_index.scss b/packages/styles/src/variables/components/_index.scss
index 69d5d76351..db49058b2d 100644
--- a/packages/styles/src/variables/components/_index.scss
+++ b/packages/styles/src/variables/components/_index.scss
@@ -13,7 +13,6 @@
 @forward 'form-validation';
 @forward 'form-select';
 @forward 'forms';
-@forward 'list-group';
 @forward 'modal';
 @forward 'nav';
 @forward 'navbar';
diff --git a/packages/styles/src/variables/components/_list-group.scss b/packages/styles/src/variables/components/_list-group.scss
deleted file mode 100644
index 4c8032b561..0000000000
--- a/packages/styles/src/variables/components/_list-group.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@use 'sass:map';
-@use './../color';
-@use './../spacing';
-@use './../commons';
-
-// List group
-
-$list-group-bg: color.$white !default;
-$list-group-border-color: color.$gray-10 !default;
-$list-group-border-width: commons.$border-width !default;
-$list-group-border-radius: 0 !default;
-
-$list-group-item-padding-y: map.get(spacing.$post-sizes, 'small-regular') !default;
-$list-group-item-padding-x: map.get(spacing.$post-sizes, 'large') !default;
-
-$list-group-hover-bg: color.$light !default;
-$list-group-hover-bg-inverted: color.$white !default;
-$list-group-active-color: color.$white !default;
-$list-group-active-bg: color.$gray-80 !default;
-$list-group-active-border-color: $list-group-active-bg !default;
-
-$list-group-disabled-color: color.$gray-20 !default;
-$list-group-disabled-bg: $list-group-bg !default;
-
-$list-group-action-color: color.$gray-60 !default;
-$list-group-action-hover-color: color.$black !default;
-
-$list-group-action-active-color: color.$black !default;
-$list-group-action-active-bg: color.$gray-20 !default;
diff --git a/packages/tokens/.gitignore b/packages/tokens/.gitignore
index 7d6059b7bd..495320a6b4 100644
--- a/packages/tokens/.gitignore
+++ b/packages/tokens/.gitignore
@@ -1,2 +1,3 @@
 # Outputs
 dist/
+_temp/
diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md
index 16cd9f8705..fbc6aba9bc 100644
--- a/packages/tokens/CHANGELOG.md
+++ b/packages/tokens/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-tokens
 
+## 9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Minor Changes
diff --git a/packages/tokens/_build/configs/all.js b/packages/tokens/_build/configs/all.js
new file mode 100644
index 0000000000..8f006a031a
--- /dev/null
+++ b/packages/tokens/_build/configs/all.js
@@ -0,0 +1,103 @@
+import { fileHeader } from 'style-dictionary/utils';
+import { expandTypesMap } from '@tokens-studio/sd-transforms';
+import StyleDictionary from '../style-dictionary.js';
+import { getSetName, getSet, getTokenValue, registerConfigMethod } from '../methods.js';
+
+/**
+ * Registers a config getter method to generate output files for all code relevant tokens in the tokens.json.
+ */
+registerConfigMethod((tokenSets, { sourcePath, buildPath }) => {
+  return Object.entries(tokenSets.output).map(([name, { type, layer, filePath, sets }]) => {
+    return {
+      meta: {
+        type,
+        layer,
+        filePath,
+        setNames: Object.keys(sets),
+      },
+      source: [`${sourcePath}_temp/output/${filePath}`],
+      include: [`${sourcePath}_temp/source/**/*.json`],
+      platforms: {
+        scss: {
+          transforms: ['name/kebab'],
+          buildPath,
+          expand: {
+            include: ['typography'],
+            typesMap: expandTypesMap,
+          },
+          files: [
+            {
+              destination: `_${name}.scss`.toLowerCase(),
+              format: 'swisspost/scss-format',
+              filter: 'swisspost/scss-filter',
+              options: {
+                outputReferences: true,
+              },
+            },
+          ],
+        },
+      },
+    };
+  });
+});
+
+/**
+ * @function StyleDictionary.registerFilter()
+ * Defines a custom StyleDictionary filter.
+ *
+ * @param object {
+ *   name: string,
+ *   filter: (token: TransformedToken, options: Config) => boolean
+ * }
+ *
+ * swisspost/tokenset-filter:
+ * Used to filter only the tokens of the current tokenset (e.g. core, device-desktop, ...).
+ */
+StyleDictionary.registerFilter({
+  name: 'swisspost/scss-filter',
+  filter: (token, { meta }) => {
+    return token.filePath.includes(`/output/${meta.filePath}`);
+  },
+});
+
+/**
+ * @function StyleDictionary.registerFormat()
+ * Defines a custom StyleDictionary format to be used at specific places in the build process.
+ *
+ * @param object {
+ *   name: string,
+ *   format: (dictionary: Dictionary, file: File, options: Config & LocalOptions, platform: PlatformConfig) => string
+ * }
+ *
+ * swisspost/scss-format:
+ * Used to declare the format of the *.scss output files.
+ */
+StyleDictionary.registerFormat({
+  name: 'swisspost/scss-format',
+  format: async ({ dictionary, options, file }) => {
+    const { meta } = options;
+    const header = await fileHeader({ file, commentStyle: 'short' });
+
+    return (
+      header +
+      meta.setNames
+        .map(setName => {
+          const tokenSetName = getSetName(options, setName);
+          const tokenSet = getSet(options, dictionary, setName)
+            .map(token => {
+              const tokenValue = getTokenValue(options, token);
+
+              return meta.layer === 'core'
+                ? `  --${token.name}: ${tokenValue};`
+                : `  ${token.name}: ${tokenValue},`;
+            })
+            .join('\n');
+
+          return meta.layer === 'core'
+            ? `:root {\n${tokenSet}\n}\n`
+            : `$${tokenSetName}: (\n${tokenSet}\n);\n`;
+        })
+        .join('\n')
+    );
+  },
+});
diff --git a/packages/tokens/_build/configs/index.js b/packages/tokens/_build/configs/index.js
new file mode 100644
index 0000000000..35351414ff
--- /dev/null
+++ b/packages/tokens/_build/configs/index.js
@@ -0,0 +1,2 @@
+import './all.js';
+import './tailwind.js';
diff --git a/packages/tokens/_build/configs/tailwind.js b/packages/tokens/_build/configs/tailwind.js
new file mode 100644
index 0000000000..4c8620d86a
--- /dev/null
+++ b/packages/tokens/_build/configs/tailwind.js
@@ -0,0 +1,94 @@
+import { fileHeader } from 'style-dictionary/utils';
+import { TOKENSET_LAYERS, TOKENSET_PREFIX } from '../constants.js';
+import StyleDictionary from '../style-dictionary.js';
+import { registerConfigMethod, getTokenValue } from '../methods.js';
+import { objectDeepmerge, objectTextoutput } from '../utils/index.js';
+
+const TAILWIND_TOKENSET_NAMES = ['utilities', 'helpers'];
+
+/**
+ * Registers a config getter method to generate output files for tailwind relevant tokens in the tokens.json.
+ */
+registerConfigMethod((tokenSets, { sourcePath, buildPath }) => {
+  return Object.entries(tokenSets.output)
+    .filter(
+      ([name, { layer }]) =>
+        layer === TOKENSET_LAYERS.component && TAILWIND_TOKENSET_NAMES.includes(name),
+    )
+    .map(([name, { type, layer, filePath, sets }]) => {
+      return {
+        meta: {
+          type,
+          layer,
+          filePath,
+          setNames: Object.keys(sets),
+        },
+        source: [`${sourcePath}_temp/output/${filePath}`],
+        include: [`${sourcePath}_temp/source/**/*.json`],
+        platforms: {
+          tailwind: {
+            transforms: ['name/kebab'],
+            buildPath: `${buildPath}tailwind/`,
+            files: [
+              {
+                destination: `${name}.tailwind.js`,
+                format: 'swisspost/tailwind-format',
+                filter: 'swisspost/tailwind-filter',
+                options: {
+                  outputReferences: true,
+                },
+              },
+            ],
+          },
+        },
+      };
+    });
+});
+
+/**
+ * @function StyleDictionary.registerFilter()
+ * Defines a custom StyleDictionary filter.
+ *
+ * @param object {
+ *   name: string,
+ *   filter: (token: TransformedToken, options: Config) => boolean
+ * }
+ *
+ * swisspost/tailwind-filter:
+ * Used to filter only the component layer tokens defined in the tokensets with the names in TAILWIND_TOKENSET_NAMES.
+ */
+StyleDictionary.registerFilter({
+  name: 'swisspost/tailwind-filter',
+  filter: token => {
+    return token.filePath.includes('/output/');
+  },
+});
+
+/**
+ * @function StyleDictionary.registerFormat()
+ * Defines a custom StyleDictionary format to be used at specific places in the build process.
+ *
+ * @param object {
+ *   name: string,
+ *   format: (dictionary: Dictionary, file: File, options: Config & LocalOptions, platform: PlatformConfig) => string
+ * }
+ *
+ * swisspost/tailwind-format:
+ * Used to declare the format of the tailwind output files.
+ */
+StyleDictionary.registerFormat({
+  name: 'swisspost/tailwind-format',
+  format: async ({ dictionary, options, file }) => {
+    const header = await fileHeader({ file, commentStyle: 'short' });
+    const tailwindTokensObject = dictionary.allTokens.reduce((allTokens, token) => {
+      const tokenObj = token.path
+        .slice(token.path.indexOf(TOKENSET_PREFIX) + 1)
+        .reverse()
+        .reduce((res, p) => ({ [p]: res }), getTokenValue(options, token));
+
+      return objectDeepmerge(allTokens, tokenObj);
+    }, {});
+
+    return header + `export default {${objectTextoutput(tailwindTokensObject)}\n};\n`;
+  },
+});
diff --git a/packages/tokens/_build/constants.js b/packages/tokens/_build/constants.js
index 0aa38cc540..76475f376a 100644
--- a/packages/tokens/_build/constants.js
+++ b/packages/tokens/_build/constants.js
@@ -2,8 +2,12 @@ import { resolve } from 'path';
 
 export const SOURCE_PATH = resolve('./tokensstudio-generated/');
 export const OUTPUT_PATH = resolve('./dist/');
-export const FILE_HEADER =
-  '// Do not edit manually!\n// This file was generated on:\n// {date} by the @swisspost/design-system-tokens package build command\n\n';
+
+export const FILE_HEADER = [
+  'Do not edit manually',
+  'This file was generated by the swisspost/design-system-tokens package',
+  new Date().toUTCString(),
+];
 
 export const EXPLICIT_COMPONENT_LAYER_GROUPNAMES = [
   'elements',
@@ -19,3 +23,4 @@ export const TOKENSET_LAYERS = {
   component: 'component',
 };
 export const TOKENSET_PREFIX = 'post';
+export const CUSTOM_FORMAT_INDENT = '  ';
diff --git a/packages/tokens/_build/methods.js b/packages/tokens/_build/methods.js
index 8d4840fc10..68cb76a1d8 100644
--- a/packages/tokens/_build/methods.js
+++ b/packages/tokens/_build/methods.js
@@ -1,7 +1,6 @@
+import { promises } from 'fs';
 import StyleDictionary from './style-dictionary.js';
 import { usesReferences } from 'style-dictionary/utils';
-import { expandTypesMap } from '@tokens-studio/sd-transforms';
-import { promises } from 'fs';
 import {
   SOURCE_PATH,
   OUTPUT_PATH,
@@ -12,47 +11,20 @@ import {
   EXPLICIT_FIGMAONLY_SETNAMES,
   TOKENSET_PREFIX,
 } from './constants.js';
+import { objectDeepmerge } from './utils/index.js';
 
 let CLI_OPTIONS;
 let tokenSets;
-
-// Can be removed, as soon as box-shadow tokens can be outputted with references
-StyleDictionary.registerPreprocessor({
-  name: 'swisspost/box-shadow-keep-refs-workaround',
-  preprocessor: dictionary => {
-    traverse(dictionary);
-
-    function traverse(context) {
-      Object.entries(context).forEach(([key, value]) => {
-        const usesDtcg = context[key].$type && context[key].$value;
-        const isToken = context[key][usesDtcg ? '$type' : 'type'] !== undefined;
-
-        if (isToken) {
-          const tokenType = context[key][usesDtcg ? '$type' : 'type'];
-          const tokenValue = context[key][usesDtcg ? '$value' : 'value'];
-
-          if (tokenType === 'shadow' && typeof tokenValue === 'string') {
-            context[key].$extensions[
-              'studio.tokens'
-            ].boxShadowKeepRefsWorkaroundValue = `${tokenValue.replace(/[{}]/g, match =>
-              match === '{' ? '[[' : ']]',
-            )}`;
-          }
-        } else if (typeof context[key] === 'object') {
-          traverse(value);
-        }
-      });
-    }
-
-    return dictionary;
-  },
-});
+let registeredConfigMethods = [];
 
 export async function setup() {
   CLI_OPTIONS = createCliOptions();
 
   const tokensFile = JSON.parse(await promises.readFile(`${SOURCE_PATH}/tokens.json`, 'utf-8'));
   tokenSets = createTokenSets(tokensFile);
+
+  if (await promises.readdir(OUTPUT_PATH).catch(() => false))
+    await promises.rm(OUTPUT_PATH, { recursive: true });
 }
 
 /**
@@ -98,7 +70,7 @@ function createTokenSets(tokensFile) {
   // only add non component layer sets to source files
   // component layer sets can not be resolved in the browser, and therefore are not usable as sources
   const source = Object.entries(normalized).reduce((sets, [name, set]) => {
-    const { baseDefinition } = getConfig(name);
+    const { baseDefinition } = getDefinition(name);
 
     if (baseDefinition.layer !== TOKENSET_LAYERS.component) {
       return { ...sets, [name]: set };
@@ -109,7 +81,7 @@ function createTokenSets(tokensFile) {
 
   // combine tokensets by group so they can be outputted in a single file
   const output = Object.entries(normalized).reduce((definition, [name, set]) => {
-    const { groupSlug, groupName, setName, baseDefinition } = getConfig(name);
+    const { groupSlug, groupName, setName, baseDefinition } = getDefinition(name);
     const existingGroup = definition[groupSlug];
 
     if (
@@ -133,7 +105,7 @@ function createTokenSets(tokensFile) {
     output,
   };
 
-  function getConfig(name) {
+  function getDefinition(name) {
     const [groupSlug, setSlug] = name.split('/');
     const groupName = setSlug ? groupSlug : null;
     const setName = setSlug ?? groupSlug;
@@ -187,6 +159,23 @@ export async function createTokenSetFiles() {
   console.log(`\x1b[33m✓ Complete!`);
 }
 
+/**
+ * @function registerConfigMethod(Function)
+ * Registers a config getter method, which is used to create StyleDictionary Config objects.
+ *
+ * @callback configGetterMethod a function which will be called during build time with the following parameters:
+ * @param {tokenSets} group-nested tokensets object
+ * @param {options} object { sourcePath: string, buildPath: string }
+ * @returns {Config[]} StyleDictionary Config objects[]
+ */
+export function registerConfigMethod(method) {
+  if (method instanceof Function) {
+    registeredConfigMethods.push(method);
+  } else {
+    throw new Error(`At least one of the given config getter methods is not a function.!`);
+  }
+}
+
 /**
  * @function createOutputFiles()
  * Creates the output files based on the StyleDictionary Config.
@@ -202,48 +191,48 @@ export async function createOutputFiles() {
 
   /**
    * @function getConfigs()
-   * Creates the StyleDictionary Config object for each tokenset.
+   * Creates all StyleDictionary Config objects, given through the registeredConfigMethods.
    *
    * @returns Config[]
    */
   function getConfigs() {
-    return Object.entries(tokenSets.output).map(([name, { type, layer, filePath, sets }]) => {
-      return {
-        log: {
-          verbosity: CLI_OPTIONS.verbosity,
-        },
-        meta: {
-          type,
-          layer,
-          filePath,
-          setNames: Object.keys(sets),
-        },
-        source: [`${SOURCE_PATH}/_temp/output/${filePath}`],
-        include: [`${SOURCE_PATH}/_temp/source/**/*.json`],
-        preprocessors: ['swisspost/box-shadow-keep-refs-workaround', 'tokens-studio'],
-        platforms: {
-          scss: {
-            transformGroup: 'tokens-studio',
-            transforms: ['name/kebab'],
-            buildPath: `${OUTPUT_PATH}/`,
-            expand: {
-              include: ['typography'],
-              typesMap: expandTypesMap,
-            },
-            files: [
-              {
-                destination: `_${name}.scss`.toLowerCase(),
-                format: 'swisspost/scss-format',
-                filter: 'swisspost/tokenset-filter',
-                options: {
-                  outputReferences: true,
-                },
+    return registeredConfigMethods
+      .map(method =>
+        method(tokenSets, { sourcePath: `${SOURCE_PATH}/`, buildPath: `${OUTPUT_PATH}/` }).map(
+          config => {
+            config = objectDeepmerge(config, {
+              // set log level
+              log: {
+                verbosity: CLI_OPTIONS.verbosity,
               },
-            ],
+              // extend preprocessors
+              preprocessors: [
+                'swisspost/box-shadow-keep-refs-workaround',
+                'tokens-studio',
+                ...(config.proprocessors ?? []),
+              ],
+            });
+
+            config.platforms = Object.entries(config.platforms).reduce(
+              (platforms, [name, platform]) => ({
+                ...platforms,
+                [name]: objectDeepmerge(platform, {
+                  // set default file header (can still be overridden on the file level)
+                  options: {
+                    fileHeader: 'swisspost/file-header',
+                  },
+                  // set transformGroup (this will override any given transform group)
+                  transformGroup: 'tokens-studio',
+                }),
+              }),
+              {},
+            );
+
+            return config;
           },
-        },
-      };
-    });
+        ),
+      )
+      .flat();
   }
 
   /**
@@ -255,7 +244,6 @@ export async function createOutputFiles() {
    */
   async function build(config) {
     const sd = new StyleDictionary(config);
-    await sd.cleanAllPlatforms();
     await sd.buildAllPlatforms();
   }
 
@@ -264,11 +252,12 @@ export async function createOutputFiles() {
    * Creates the index.scss file (which uses/forwards the other output files) in the "OUTPUT_PATH" directory.
    */
   async function createIndexFile() {
+    const header = FILE_HEADER.map(h => `// ${h}`).join('\n');
     const imports = Object.entries(tokenSets.output)
       .map(([name, { layer }]) => `@${layer === 'core' ? 'use' : 'forward'} './${name}';`)
       .join('\n');
 
-    await promises.writeFile(`${OUTPUT_PATH}/_index.scss`, `${getFileHeader()}${imports}\n`);
+    await promises.writeFile(`${OUTPUT_PATH}/_index.scss`, `${header}\n\n${imports}\n`);
   }
 
   /**
@@ -291,17 +280,6 @@ export async function removeTokenSetFiles() {
   console.log(`\x1b[33m✓ Complete!`);
 }
 
-/**
- * @function getFileHeader()
- * Returns the file header comment with the current date.
- * Which is used at the beginning of each output file.
- *
- * @returns string
- */
-export function getFileHeader() {
-  return FILE_HEADER.replace('{date}', new Date().toUTCString());
-}
-
 /**
  * @function getSetName(option, setName)
  *
diff --git a/packages/tokens/_build/style-dictionary.js b/packages/tokens/_build/style-dictionary.js
index 02825921bc..b93d370378 100644
--- a/packages/tokens/_build/style-dictionary.js
+++ b/packages/tokens/_build/style-dictionary.js
@@ -1,67 +1,60 @@
 import StyleDictionary from 'style-dictionary';
 import { register } from '@tokens-studio/sd-transforms';
-import { getFileHeader, getSetName, getSet, getTokenValue } from './methods.js';
+import { FILE_HEADER } from './constants.js';
 
 register(StyleDictionary);
 
 /**
- * @function StyleDictionary.registerFilter()
- * Defines a custom StyleDictionary filter.
+ * @function StyleDictionary.registerFileHeader()
+ * Defined a custom StyleDictionary file header.
  *
- * @param object {
- *   name: string,
- *   filter: (token: TransformedToken, options: Config) => boolean
- * }
- *
- * swisspost/tokenset-filter:
- * Used to filter only the tokens of the current tokenset
- * and output them in the corresponding tokens file (e.g. core, mode/light, etc.).
+ * swisspost/file-header:
+ * Used to define a custom default file header for all output files, generated by StyleDictionary.
  */
-StyleDictionary.registerFilter({
-  name: 'swisspost/tokenset-filter',
-  filter: (token, { meta }) => {
-    return token.filePath.includes(`/output/${meta.filePath}`);
+StyleDictionary.registerFileHeader({
+  name: 'swisspost/file-header',
+  fileHeader: () => {
+    return FILE_HEADER;
   },
 });
 
 /**
- * @function StyleDictionary.registerFormat()
- * Defines a custom StyleDictionary format to be used at specific places in the build process.
- *
- * @param object {
- *   name: string,
- *   format: (dictionary: Dictionary, file: File, options: Config & LocalOptions, platform: PlatformConfig) => string
- * }
+ * @function StyleDictionary.registerPreprocessor()
+ * Defines a custom StyleDictionary preprocessor.
  *
- * swisspost/scss-format:
- * Used to declare the format of the *.scss output files.
+ * swisspost/box-shadow-keep-refs-workaround:
+ * Used to keep the references in the box-shadow token values, which otherwise would be resolved with the actual values.
+ * This is a known bug in the current StyleDictionary version: https://github.com/amzn/style-dictionary/issues/1318.
  */
-StyleDictionary.registerFormat({
-  name: 'swisspost/scss-format',
-  format: ({ dictionary, options }) => {
-    const { meta } = options;
 
-    return (
-      getFileHeader() +
-      meta.setNames
-        .map(setName => {
-          const tokenSetName = getSetName(options, setName);
-          const tokenSet = getSet(options, dictionary, setName)
-            .map(token => {
-              const tokenValue = getTokenValue(options, token);
+StyleDictionary.registerPreprocessor({
+  name: 'swisspost/box-shadow-keep-refs-workaround',
+  preprocessor: dictionary => {
+    traverse(dictionary);
+
+    function traverse(context) {
+      Object.entries(context).forEach(([key, value]) => {
+        const usesDtcg = context[key].$type && context[key].$value;
+        const isToken = context[key][usesDtcg ? '$type' : 'type'] !== undefined;
+
+        if (isToken) {
+          const tokenType = context[key][usesDtcg ? '$type' : 'type'];
+          const tokenValue = context[key][usesDtcg ? '$value' : 'value'];
 
-              return meta.layer === 'core'
-                ? `  --${token.name}: ${tokenValue};`
-                : `  ${token.name}: ${tokenValue},`;
-            })
-            .join('\n');
+          if (tokenType === 'shadow' && typeof tokenValue === 'string') {
+            context[key].$extensions[
+              'studio.tokens'
+            ].boxShadowKeepRefsWorkaroundValue = `${tokenValue.replace(/[{}]/g, match =>
+              match === '{' ? '[[' : ']]',
+            )}`;
+          }
+        } else if (typeof context[key] === 'object') {
+          traverse(value);
+        }
+      });
+    }
 
-          return meta.layer === 'core'
-            ? `:root {\n${tokenSet}\n}\n`
-            : `$${tokenSetName}: (\n${tokenSet}\n);\n`;
-        })
-        .join('\n')
-    );
+    return dictionary;
   },
 });
 
diff --git a/packages/tokens/_build/utils/index.js b/packages/tokens/_build/utils/index.js
new file mode 100644
index 0000000000..5e4d2283e5
--- /dev/null
+++ b/packages/tokens/_build/utils/index.js
@@ -0,0 +1,2 @@
+export { default as objectDeepmerge } from './object-deepmerge.js';
+export { default as objectTextoutput } from './object-textoutput.js';
diff --git a/packages/tokens/_build/utils/object-deepmerge.js b/packages/tokens/_build/utils/object-deepmerge.js
new file mode 100644
index 0000000000..c08f0fd077
--- /dev/null
+++ b/packages/tokens/_build/utils/object-deepmerge.js
@@ -0,0 +1,12 @@
+export default function deepmerge(obj1 = {}, obj2 = {}) {
+  const result = { ...obj1 };
+
+  for (let key in obj2) {
+    result[key] =
+      obj2[key] instanceof Object && obj1[key] instanceof Object
+        ? deepmerge(obj1[key], obj2[key])
+        : obj2[key];
+  }
+
+  return result;
+}
diff --git a/packages/tokens/_build/utils/object-textoutput.js b/packages/tokens/_build/utils/object-textoutput.js
new file mode 100644
index 0000000000..862b29e46b
--- /dev/null
+++ b/packages/tokens/_build/utils/object-textoutput.js
@@ -0,0 +1,28 @@
+import { CUSTOM_FORMAT_INDENT } from '../constants.js';
+
+export default function textoutput(
+  obj = {},
+  baseIndent = CUSTOM_FORMAT_INDENT,
+  currentIndent = '',
+) {
+  const indent = `${baseIndent}${currentIndent}`;
+  const stringifyKeys = Object.keys(obj).some(key => !key.match(/^[a-zA-Z0-9]+$/));
+
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    let val;
+
+    if (stringifyKeys) key = `'${key}'`;
+
+    if (value instanceof Object) {
+      val = `{${textoutput(value, baseIndent, indent)}\n${indent}}`;
+    } else {
+      try {
+        val = JSON.parse(value);
+      } catch (_) {
+        val = `'${value}'`;
+      }
+    }
+
+    return `${acc}\n${indent}${key}: ${val},`;
+  }, '');
+}
diff --git a/packages/tokens/build.js b/packages/tokens/build.js
index 005640c629..243c5bb71e 100644
--- a/packages/tokens/build.js
+++ b/packages/tokens/build.js
@@ -5,6 +5,8 @@ import {
   removeTokenSetFiles,
 } from './_build/methods.js';
 
+import './_build/configs/index.js';
+
 /**
  * Build process
  */
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index 5781f6b8d7..2bc80f0ddb 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -1,8 +1,7 @@
 {
   "name": "@swisspost/design-system-tokens",
-  "version": "9.0.0-next.3",
-  "private": true,
-  "description": "Design Tokens for the Swiss Post.",
+  "version": "9.0.0-next.4",
+  "description": "Design Tokens for the Swiss Post Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +14,8 @@
   },
   "type": "module",
   "scripts": {
-    "build": "pnpm clean && node ./build.js",
+    "copy-files": "copyfiles -f package.json README.md CONTRIBUTING.md CHANGELOG.md LICENSE dist",
+    "build": "pnpm clean && node ./build.js && pnpm copy-files",
     "clean": "rimraf dist",
     "build:verbose": "node ./build.js --verbosity=verbose"
   },
@@ -29,11 +29,12 @@
   ],
   "publishConfig": {
     "directory": "./dist",
-    "access": "restricted",
+    "access": "public",
     "linkDirectory": true
   },
   "devDependencies": {
     "@tokens-studio/sd-transforms": "1.2.2",
+    "copyfiles": "2.4.1",
     "rimraf": "6.0.1",
     "style-dictionary": "4.0.1"
   }
diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json
index 51a6beb7a0..d953769d56 100644
--- a/packages/tokens/tokensstudio-generated/tokens.json
+++ b/packages/tokens/tokensstudio-generated/tokens.json
@@ -235,6 +235,10 @@
             "$type": "dimension",
             "$value": "6"
           },
+          "7": {
+            "$type": "dimension",
+            "$value": "7"
+          },
           "8": {
             "$type": "dimension",
             "$value": "8"
@@ -273,7 +277,7 @@
           },
           "17": {
             "$type": "dimension",
-            "$value": "17px"
+            "$value": "17"
           },
           "18": {
             "$type": "dimension",
@@ -293,7 +297,7 @@
           },
           "23": {
             "$type": "dimension",
-            "$value": "23px"
+            "$value": "23"
           },
           "24": {
             "$type": "dimension",
@@ -397,7 +401,7 @@
           },
           "n2": {
             "$type": "dimension",
-            "$value": "-2px"
+            "$value": "-2"
           },
           "15-5": {
             "$type": "dimension",
@@ -413,7 +417,15 @@
           },
           "26-5": {
             "$type": "dimension",
-            "$value": "26.5px"
+            "$value": "26.5"
+          },
+          "25-5": {
+            "$type": "dimension",
+            "$value": "25.5"
+          },
+          "24-5": {
+            "$type": "dimension",
+            "$value": "24.5"
           }
         },
         "font-weight": {
@@ -1367,7 +1379,7 @@
                 "$value": "{post.core.color.sandgrey.100}"
               }
             },
-            "emphasis": {
+            "accent": {
               "bg": {
                 "$type": "color",
                 "$value": "{post.core.color.sandgrey.080}"
@@ -1470,7 +1482,7 @@
                   "$value": "{post.core.color.cargo.blue}"
                 }
               },
-              "emphasis": {
+              "accent": {
                 "bg": {
                   "$type": "color",
                   "$value": "{post.core.color.cargo.blue}"
@@ -2133,7 +2145,7 @@
                 "$value": "{post.core.color.sandgrey.100}"
               }
             },
-            "emphasis": {
+            "accent": {
               "bg": {
                 "$type": "color",
                 "$value": "{post.core.color.sandgrey.002}"
@@ -2172,7 +2184,7 @@
           }
         },
         "accent": {
-          "color-scheme": {
+          "bg-scheme": {
             "1": {
               "$type": "text",
               "$value": "{post.core.bg-scheme.dark}"
@@ -2183,6 +2195,76 @@
             }
           }
         }
+      },
+      "cargo": {
+        "scheme": {
+          "color": {
+            "surface": {
+              "default": {
+                "bg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.sandgrey.080}"
+                },
+                "fg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.brand.white}"
+                },
+                "stroke": {
+                  "$type": "color",
+                  "$value": "{post.core.color.brand.white}"
+                }
+              },
+              "accent1": {
+                "bg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.sandgrey.100}"
+                },
+                "fg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.brand.white}"
+                }
+              },
+              "alternate": {
+                "bg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.sandgrey.100}"
+                },
+                "fg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.brand.white}"
+                }
+              },
+              "brand": {
+                "bg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.cargo.green}"
+                },
+                "fg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.brand.white}"
+                },
+                "fg-accent": {
+                  "$type": "color",
+                  "$value": "{post.core.color.cargo.blue}"
+                }
+              },
+              "accent": {
+                "bg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.cargo.blue}"
+                },
+                "fg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.sandgrey.100}"
+                },
+                "fg-accent": {
+                  "$type": "color",
+                  "$value": "{post.core.color.cargo.green}"
+                }
+              }
+            }
+          }
+        }
       }
     }
   },
@@ -2641,6 +2723,18 @@
               "27": {
                 "$type": "spacing",
                 "$value": "{post.core.dimension.17}"
+              },
+              "28": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.17}"
+              },
+              "29": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.25-5}"
+              },
+              "30": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.6-5}"
               }
             }
           },
@@ -2732,6 +2826,10 @@
                 "5": {
                   "$type": "sizing",
                   "$value": "{post.core.dimension.48}"
+                },
+                "6": {
+                  "$type": "sizing",
+                  "$value": "{post.core.dimension.64}"
                 }
               },
               "appstore": {
@@ -2934,6 +3032,16 @@
               }
             }
           }
+        },
+        "position": {
+          "1": {
+            "$type": "dimension",
+            "$value": "{post.core.dimension.32}"
+          },
+          "2": {
+            "$type": "dimension",
+            "$value": "{post.core.dimension.18}"
+          }
         }
       }
     }
@@ -3227,6 +3335,18 @@
               "27": {
                 "$type": "spacing",
                 "$value": "{post.core.dimension.12}"
+              },
+              "28": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.16}"
+              },
+              "29": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.23}"
+              },
+              "30": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.7}"
               }
             },
             "inline": {
@@ -3316,6 +3436,10 @@
                 "5": {
                   "$type": "sizing",
                   "$value": "{post.core.dimension.40}"
+                },
+                "6": {
+                  "$type": "sizing",
+                  "$value": "{post.core.dimension.56}"
                 }
               },
               "appstore": {
@@ -3478,6 +3602,12 @@
             "$type": "borderWidth",
             "$value": "{post.core.dimension.6}"
           }
+        },
+        "position": {
+          "1": {
+            "$type": "dimension",
+            "$value": "{post.core.dimension.24}"
+          }
         }
       }
     }
@@ -3805,6 +3935,18 @@
               "27": {
                 "$type": "spacing",
                 "$value": "{post.core.dimension.17-5}"
+              },
+              "28": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.17-5}"
+              },
+              "29": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.24-5}"
+              },
+              "30": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.8-5}"
               }
             }
           },
@@ -4032,6 +4174,12 @@
             "$type": "borderWidth",
             "$value": "{post.core.dimension.4}"
           }
+        },
+        "position": {
+          "1": {
+            "$type": "dimension",
+            "$value": "{post.core.dimension.16}"
+          }
         }
       }
     }
@@ -4071,7 +4219,7 @@
   "Theme/Post": {
     "post": {
       "theme": {
-        "accent": {
+        "palettes": {
           "bg-scheme": {
             "brand": {
               "$type": "text",
@@ -4079,7 +4227,7 @@
             },
             "emphasis": {
               "$type": "text",
-              "$value": "{post.core.bg-scheme.dark}"
+              "$value": "{post.scheme.accent.bg-scheme.2}"
             },
             "default": {
               "$type": "text",
@@ -4087,12 +4235,12 @@
             },
             "alternate": {
               "$type": "text",
-              "$value": "{post.scheme.accent.bg-scheme.2}"
+              "$value": "{post.scheme.accent.bg-scheme.1}"
             }
           }
         },
         "color": {
-          "accent": {
+          "palettes": {
             "default": {
               "bg": {
                 "$type": "color",
@@ -4113,14 +4261,14 @@
                 "$value": "{post.scheme.color.surface.brand.fg}"
               }
             },
-            "emphasis": {
+            "accent": {
               "bg": {
                 "$type": "color",
-                "$value": "{post.scheme.color.surface.emphasis.bg}"
+                "$value": "{post.scheme.color.surface.accent.bg}"
               },
               "fg": {
                 "$type": "color",
-                "$value": "{post.scheme.color.surface.emphasis.fg}"
+                "$value": "{post.scheme.color.surface.accent.fg}"
               }
             },
             "alternate": {
@@ -4141,7 +4289,7 @@
   "Theme/Cargo": {
     "post": {
       "theme": {
-        "accent": {
+        "palettes": {
           "bg-scheme": {
             "brand": {
               "$type": "text",
@@ -4150,11 +4298,39 @@
             "emphasis": {
               "$type": "text",
               "$value": "{post.core.bg-scheme.light}"
+            },
+            "default": {
+              "$type": "text",
+              "$value": "{post.scheme.accent.bg-scheme.1}"
+            },
+            "alternate": {
+              "$type": "text",
+              "$value": "{post.scheme.accent.bg-scheme.1}"
             }
           }
         },
         "color": {
-          "accent": {
+          "palettes": {
+            "default": {
+              "bg": {
+                "$type": "color",
+                "$value": "{post.cargo.scheme.color.surface.default.bg}"
+              },
+              "fg": {
+                "$type": "color",
+                "$value": "{post.cargo.scheme.color.surface.default.fg}"
+              }
+            },
+            "alternate": {
+              "bg": {
+                "$type": "color",
+                "$value": "{post.cargo.scheme.color.surface.alternate.bg}"
+              },
+              "fg": {
+                "$type": "color",
+                "$value": "{post.cargo.scheme.color.surface.alternate.fg}"
+              }
+            },
             "brand": {
               "bg": {
                 "$type": "color",
@@ -4165,14 +4341,14 @@
                 "$value": "{post.cargo.scheme.color.surface.brand.fg-accent}"
               }
             },
-            "emphasis": {
+            "accent": {
               "bg": {
                 "$type": "color",
-                "$value": "{post.cargo.scheme.color.surface.emphasis.bg}"
+                "$value": "{post.cargo.scheme.color.surface.accent.bg}"
               },
               "fg": {
                 "$type": "color",
-                "$value": "{post.cargo.scheme.color.surface.emphasis.fg-accent}"
+                "$value": "{post.cargo.scheme.color.surface.accent.fg-accent}"
               }
             }
           }
@@ -4889,6 +5065,66 @@
       }
     }
   },
+  "Components/Blockquote": {
+    "post": {
+      "blockquote": {
+        "border-width": {
+          "left": {
+            "$type": "borderWidth",
+            "$value": "{post.device.border-width.quote}"
+          }
+        },
+        "border": {
+          "left": {
+            "color": {
+              "$type": "color",
+              "$value": "{post.scheme.color.surface.default.stroke}"
+            },
+            "style": {
+              "$type": "other",
+              "$value": "{post.core.border-style.solid}"
+            }
+          }
+        },
+        "margin": {
+          "block": {
+            "$type": "spacing",
+            "$value": "{post.device.spacing.margin.5}"
+          },
+          "inline": {
+            "$type": "spacing",
+            "$value": "{post.device.spacing.margin.6}"
+          }
+        },
+        "padding": {
+          "inline": {
+            "start": {
+              "$type": "spacing",
+              "$value": "{post.core.dimension.20}"
+            },
+            "end": {
+              "$type": "spacing",
+              "$value": "{post.core.dimension.24}"
+            }
+          }
+        },
+        "gap": {
+          "inline": {
+            "$type": "spacing",
+            "$value": "{post.core.dimension.16}"
+          }
+        },
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{post.device.font-weight.bold}"
+        },
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{post.device.font-size.5}"
+        }
+      }
+    }
+  },
   "Components/Breadcrumb": {
     "post": {
       "breadcrumb": {
@@ -5364,14 +5600,6 @@
           "$type": "color",
           "$value": "{post.scheme.color.interactive.primary.disabled.fg1}"
         },
-        "selected-bg": {
-          "$type": "color",
-          "$value": "{post.scheme.color.interactive.primary.selected.bg1}"
-        },
-        "selected-fg": {
-          "$type": "color",
-          "$value": "{post.scheme.color.interactive.primary.selected.fg1}"
-        },
         "enabled-stroke": {
           "$type": "color",
           "$value": "{post.scheme.color.interactive.primary.enabled.stroke}"
@@ -5380,10 +5608,6 @@
           "$type": "color",
           "$value": "{post.scheme.color.interactive.primary.hover.stroke}"
         },
-        "selected-stroke": {
-          "$type": "color",
-          "$value": "{post.scheme.color.interactive.primary.selected.stroke1}"
-        },
         "disabled-stroke": {
           "$type": "color",
           "$value": "{post.scheme.color.interactive.primary.disabled.stroke}"
@@ -5503,31 +5727,85 @@
       }
     }
   },
-  "Components/Dropdown": {
+  "Components/Container": {
     "post": {
-      "dropdown": {
-        "multi-select": {
-          "menu": {
-            "category-title": {
-              "padding": {
-                "block": {
-                  "outer": {
-                    "$type": "spacing",
-                    "$value": "{post.device.spacing.padding.block.14}"
-                  },
-                  "inner": {
-                    "$type": "spacing",
-                    "$value": "{post.device.spacing.padding.block.15}"
-                  }
-                },
-                "inline": {
-                  "inner": {
-                    "$type": "spacing",
-                    "$value": "{post.device.spacing.padding.inline.3}"
-                  }
-                }
-              },
-              "stroke": {
+      "grid": {
+        "gutter": {
+          "xl": {
+            "$type": "spacing",
+            "$value": "{post.core.dimension.24}"
+          },
+          "lg": {
+            "$type": "spacing",
+            "$value": "{post.core.dimension.24}"
+          },
+          "md": {
+            "$type": "spacing",
+            "$value": "{post.core.dimension.16}"
+          },
+          "sm": {
+            "$type": "spacing",
+            "$value": "{post.core.dimension.16}"
+          },
+          "xs": {
+            "$type": "spacing",
+            "$value": "{post.core.dimension.16}"
+          }
+        },
+        "margin": {
+          "xl": {
+            "$type": "spacing",
+            "$value": "auto"
+          },
+          "lg": {
+            "$type": "spacing",
+            "$value": "{post.core.dimension.40}"
+          },
+          "md": {
+            "$type": "spacing",
+            "$value": "{post.core.dimension.40}"
+          },
+          "sm": {
+            "$type": "spacing",
+            "$value": "{post.core.dimension.16}"
+          },
+          "xs": {
+            "$type": "spacing",
+            "$value": "{post.core.dimension.16}"
+          }
+        },
+        "max-width": {
+          "$type": "spacing",
+          "$value": "{post.core.dimension.1280}"
+        }
+      }
+    }
+  },
+  "Components/Dropdown": {
+    "post": {
+      "dropdown": {
+        "multi-select": {
+          "menu": {
+            "category-title": {
+              "padding": {
+                "block": {
+                  "outer": {
+                    "$type": "spacing",
+                    "$value": "{post.device.spacing.padding.block.14}"
+                  },
+                  "inner": {
+                    "$type": "spacing",
+                    "$value": "{post.device.spacing.padding.block.15}"
+                  }
+                },
+                "inline": {
+                  "inner": {
+                    "$type": "spacing",
+                    "$value": "{post.device.spacing.padding.inline.3}"
+                  }
+                }
+              },
+              "stroke": {
                 "$type": "color",
                 "$value": "{post.scheme.color.interactive.primary.enabled.stroke}"
               },
@@ -6258,11 +6536,11 @@
           "color": {
             "icon-bg": {
               "$type": "color",
-              "$value": "{post.scheme.color.surface.emphasis.bg}"
+              "$value": "{post.scheme.color.surface.accent.bg}"
             },
             "icon-fg": {
               "$type": "color",
-              "$value": "{post.scheme.color.surface.emphasis.fg}"
+              "$value": "{post.scheme.color.surface.accent.fg}"
             },
             "text-fg": {
               "$type": "color",
@@ -6428,15 +6706,15 @@
         "close-button": {
           "enabled-fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           },
           "selected-fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           },
           "hover-fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           },
           "hover-bg": {
             "$type": "color",
@@ -6456,11 +6734,11 @@
           },
           "enabled-fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           },
           "selected-fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           },
           "hover-fg": {
             "$type": "color",
@@ -6492,11 +6770,11 @@
         "surface": {
           "bg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.bg}"
+            "$value": "{post.scheme.color.surface.accent.bg}"
           },
           "fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           },
           "border-radius": {
             "$type": "borderRadius",
@@ -6528,7 +6806,7 @@
         "text": {
           "selected-fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           }
         },
         "elevation": {
@@ -6550,66 +6828,6 @@
       }
     }
   },
-  "Components/Quote": {
-    "post": {
-      "quote": {
-        "border-width": {
-          "left": {
-            "$type": "borderWidth",
-            "$value": "{post.device.border-width.quote}"
-          }
-        },
-        "border": {
-          "left": {
-            "color": {
-              "$type": "color",
-              "$value": "{post.scheme.color.surface.default.stroke}"
-            },
-            "style": {
-              "$type": "other",
-              "$value": "{post.core.border-style.solid}"
-            }
-          }
-        },
-        "margin": {
-          "block": {
-            "$type": "spacing",
-            "$value": "{post.device.spacing.margin.5}"
-          },
-          "inline": {
-            "$type": "spacing",
-            "$value": "{post.device.spacing.margin.6}"
-          }
-        },
-        "padding": {
-          "inline": {
-            "start": {
-              "$type": "spacing",
-              "$value": "{post.core.dimension.20}"
-            },
-            "end": {
-              "$type": "spacing",
-              "$value": "{post.core.dimension.24}"
-            }
-          }
-        },
-        "gap": {
-          "inline": {
-            "$type": "spacing",
-            "$value": "{post.core.dimension.16}"
-          }
-        },
-        "font-weight": {
-          "$type": "fontWeights",
-          "$value": "{post.device.font-weight.bold}"
-        },
-        "font-size": {
-          "$type": "fontSizes",
-          "$value": "{post.device.font-size.5}"
-        }
-      }
-    }
-  },
   "Components/Radio button": {
     "post": {
       "radio-button": {
@@ -6637,14 +6855,6 @@
           "$type": "color",
           "$value": "{post.scheme.color.interactive.primary.disabled.fg1}"
         },
-        "selected-bg": {
-          "$type": "color",
-          "$value": "{post.scheme.color.interactive.primary.selected.bg1}"
-        },
-        "selected-fg": {
-          "$type": "color",
-          "$value": "{post.scheme.color.interactive.primary.selected.fg1}"
-        },
         "enabled-stroke": {
           "$type": "color",
           "$value": "{post.scheme.color.interactive.primary.enabled.stroke}"
@@ -6657,10 +6867,6 @@
           "$type": "color",
           "$value": "{post.scheme.color.interactive.primary.disabled.stroke}"
         },
-        "selected-stroke": {
-          "$type": "color",
-          "$value": "{post.scheme.color.interactive.primary.selected.stroke1}"
-        },
         "gap": {
           "block": {
             "group": {
@@ -6672,10 +6878,6 @@
             "text-start": {
               "$type": "spacing",
               "$value": "{post.device.spacing.gap.inline.12}"
-            },
-            "group": {
-              "$type": "spacing",
-              "$value": "tbd"
             }
           }
         },
@@ -7592,19 +7794,19 @@
             "$type": "color",
             "$value": "{post.scheme.color.interactive.primary.enabled.fg2}"
           },
-          "enabled-stroke": {
+          "enabled-border": {
             "$type": "color",
             "$value": "{post.scheme.color.interactive.primary.enabled.stroke}"
           },
-          "hover-stroke": {
+          "hover-border": {
             "$type": "color",
             "$value": "{post.scheme.color.interactive.primary.hover.stroke}"
           },
-          "disabled-stroke": {
+          "disabled-border": {
             "$type": "color",
             "$value": "{post.scheme.color.interactive.primary.disabled.stroke}"
           },
-          "selected-stroke": {
+          "selected-border": {
             "$type": "color",
             "$value": "{post.scheme.color.interactive.primary.selected.stroke1}"
           },
@@ -7619,51 +7821,37 @@
             }
           }
         },
-        "spacing": {
-          "gap": {
-            "inline": {
-              "1": {
-                "$type": "spacing",
-                "$value": "{post.device.spacing.gap.1}"
-              },
-              "2": {
-                "$type": "spacing",
-                "$value": "{post.device.spacing.gap.inline.4}"
-              }
+        "gap": {
+          "inline": {
+            "1": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.gap.1}"
+            },
+            "2": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.gap.inline.4}"
+            }
+          }
+        },
+        "padding": {
+          "block": {
+            "assist": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.block.5}"
             }
           },
-          "padding": {
-            "block": {
-              "text1": {
-                "$type": "spacing",
-                "$value": "{post.device.spacing.padding.block.1}"
-              },
-              "text2": {
-                "$type": "spacing",
-                "$value": "{post.device.spacing.padding.block.3}"
-              },
-              "text-assist": {
-                "$type": "spacing",
-                "$value": "{post.device.spacing.padding.block.5}"
-              },
-              "text5": {
-                "$type": "spacing",
-                "$value": "{post.device.spacing.padding.block.2}"
-              }
+          "inline": {
+            "start": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.inline.1}"
             },
-            "inline": {
-              "text-start": {
-                "$type": "spacing",
-                "$value": "{post.device.spacing.padding.inline.1}"
-              },
-              "text-end": {
-                "$type": "spacing",
-                "$value": "{post.device.spacing.padding.3}"
-              },
-              "text-assist": {
-                "$type": "spacing",
-                "$value": "{post.device.spacing.padding.2}"
-              }
+            "end": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.3}"
+            },
+            "assist": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.2}"
             }
           }
         },
@@ -7671,6 +7859,10 @@
           "icon": {
             "$type": "sizing",
             "$value": "{post.device.sizing.notification.1}"
+          },
+          "height": {
+            "$type": "sizing",
+            "$value": "{post.device.sizing.interactive.button.height.6}"
           }
         },
         "border-radius": {
@@ -7678,6 +7870,106 @@
             "$type": "borderRadius",
             "$value": "{post.device.border-radius.1}"
           }
+        },
+        "border-width": {
+          "$type": "borderWidth",
+          "$value": "{post.device.border-width.default}"
+        },
+        "border-style": {
+          "default": {
+            "$type": "other",
+            "$value": "{post.core.border-style.solid}"
+          },
+          "disabled": {
+            "$type": "other",
+            "$value": "{post.core.border-style.dash}"
+          }
+        },
+        "empty": {
+          "padding": {
+            "block": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.block.1}"
+            }
+          }
+        },
+        "label": {
+          "empty": {
+            "padding": {
+              "block": {
+                "start": {
+                  "$type": "spacing",
+                  "$value": "{post.device.spacing.padding.block.28}"
+                }
+              },
+              "inline": {
+                "start": {
+                  "$type": "spacing",
+                  "$value": "{post.device.spacing.padding.5}"
+                },
+                "end": {
+                  "$type": "spacing",
+                  "$value": "{post.device.spacing.padding.inline.4}"
+                }
+              }
+            }
+          },
+          "validated": {
+            "padding": {
+              "inline": {
+                "end": {
+                  "$type": "spacing",
+                  "$value": "{post.core.dimension.48}"
+                }
+              }
+            }
+          },
+          "filled": {
+            "padding": {
+              "block": {
+                "start": {
+                  "$type": "spacing",
+                  "$value": "{post.device.spacing.padding.block.30}"
+                }
+              }
+            },
+            "font-size": {
+              "$type": "fontSizes",
+              "$value": "{post.device.font-size.10}"
+            }
+          }
+        },
+        "validation": {
+          "icon": {
+            "position": {
+              "inline": {
+                "end": {
+                  "$type": "dimension",
+                  "$value": "{post.device.position.2}"
+                }
+              }
+            }
+          }
+        },
+        "filled": {
+          "padding": {
+            "block": {
+              "start": {
+                "$type": "spacing",
+                "$value": "{post.device.spacing.padding.block.29}"
+              },
+              "end": {
+                "$type": "spacing",
+                "$value": "{post.device.spacing.padding.block.3}"
+              }
+            }
+          }
+        },
+        "assist": {
+          "font-size": {
+            "$type": "fontSizes",
+            "$value": "{post.device.font-size.10}"
+          }
         }
       }
     }
@@ -7790,10 +8082,74 @@
       }
     }
   },
+  "Components/Floating button": {
+    "post": {
+      "floating-button": {
+        "position": {
+          "right": {
+            "$type": "dimension",
+            "$value": "{post.device.grid.padding.inline.container}"
+          },
+          "top": {
+            "$type": "dimension",
+            "$value": "{post.device.position.1}"
+          }
+        },
+        "enabled-fg": {
+          "$type": "color",
+          "$value": "{post.scheme.color.interactive.button.secondary.enabled.fg}"
+        },
+        "enabled-bg": {
+          "$type": "color",
+          "$value": "{post.scheme.color.interactive.button.secondary.enabled.bg}"
+        },
+        "enabled-border": {
+          "$type": "color",
+          "$value": "{post.scheme.color.interactive.button.secondary.enabled.stroke}"
+        },
+        "hover-fg": {
+          "$type": "color",
+          "$value": "{post.scheme.color.interactive.button.secondary.hover.fg}"
+        },
+        "hover-bg": {
+          "$type": "color",
+          "$value": "{post.scheme.color.interactive.button.secondary.hover.bg}"
+        },
+        "hover-border": {
+          "$type": "color",
+          "$value": "{post.scheme.color.interactive.button.secondary.hover.stroke}"
+        },
+        "size": {
+          "outer": {
+            "$type": "sizing",
+            "$value": "{post.device.sizing.interactive.button.height.2}"
+          },
+          "icon": {
+            "$type": "sizing",
+            "$value": "{post.device.sizing.interactive.button.icon.3}"
+          }
+        },
+        "border-width": {
+          "$type": "borderWidth",
+          "$value": "{post.device.border-width.default}"
+        },
+        "border-radius": {
+          "round": {
+            "$type": "borderRadius",
+            "$value": "{post.device.border-radius.round}"
+          }
+        },
+        "elevation": {
+          "$type": "boxShadow",
+          "$value": "{post.device.elevation.300}"
+        }
+      }
+    }
+  },
   "Components/Validation": {
     "post": {
       "validation": {
-        "list": {
+        "group": {
           "gap": {
             "inline": {
               "$type": "spacing",
@@ -7807,6 +8163,16 @@
                 "$value": "{post.device.spacing.padding.12}"
               }
             }
+          },
+          "icon": {
+            "size": {
+              "$type": "sizing",
+              "$value": "{post.device.sizing.interactive.icon.size}"
+            },
+            "padding": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.1}"
+            }
           }
         },
         "error": {
@@ -7816,6 +8182,22 @@
         "success": {
           "$type": "color",
           "$value": "{post.scheme.color.signal.success-solo}"
+        },
+        "input": {
+          "padding": {
+            "block": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.block.5}"
+            },
+            "inline": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.2}"
+            }
+          }
+        },
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{post.device.font-size.9}"
         }
       }
     }
@@ -7993,11 +8375,11 @@
           "small": {
             "$type": "typography",
             "$value": {
-              "fontFamily": "{post.device.font-family.default}",
-              "fontWeight": "{post.device.font-weight.regular}",
+              "fontFamily": "{post.body.font-family}",
+              "fontWeight": "{post.body.font-weight}",
               "fontSize": "{post.device.font-size.9}",
-              "lineHeight": "{post.device.line-height.label}",
-              "letterSpacing": "{post.core.letter-spacing.default}"
+              "lineHeight": "{post.body.line-height}",
+              "letterSpacing": "{post.body.letter-spacing}"
             }
           },
           "smaller": {
@@ -8240,7 +8622,7 @@
           },
           "auto": {
             "$type": "spacing",
-            "$value": "\"auto\""
+            "$value": "auto"
           }
         },
         "padding": {
@@ -8613,64 +8995,76 @@
       }
     }
   },
-  "Palette": {
+  "Palettes": {
     "post": {
-      "helper": {
+      "palettes": {
         "color": {
           "default": {
             "bg": {
               "$type": "color",
-              "$value": "{post.theme.color.accent.default.bg}"
+              "$value": "{post.theme.color.palettes.default.bg}"
             },
             "fg": {
               "$type": "color",
-              "$value": "{post.theme.color.accent.default.fg}"
-            },
-            "bg-scheme": {
-              "$type": "text",
-              "$value": "{post.theme.accent.bg-scheme.default}"
+              "$value": "{post.theme.color.palettes.default.fg}"
             }
           },
           "alternate": {
             "bg": {
               "$type": "color",
-              "$value": "{post.theme.color.accent.alternate.bg}"
+              "$value": "{post.theme.color.palettes.alternate.bg}"
             },
             "fg": {
               "$type": "color",
-              "$value": "{post.theme.color.accent.alternate.fg}"
-            },
-            "bg-scheme": {
-              "$type": "text",
-              "$value": "{post.theme.accent.bg-scheme.alternate}"
+              "$value": "{post.theme.color.palettes.alternate.fg}"
             }
           },
           "brand": {
             "bg": {
               "$type": "color",
-              "$value": "{post.theme.color.accent.brand.bg}"
+              "$value": "{post.theme.color.palettes.brand.bg}"
             },
             "fg": {
               "$type": "color",
-              "$value": "{post.theme.color.accent.brand.fg}"
-            },
-            "bg-scheme": {
-              "$type": "text",
-              "$value": "{post.theme.accent.bg-scheme.brand}"
+              "$value": "{post.theme.color.palettes.brand.fg}"
             }
           },
           "accent": {
             "bg": {
               "$type": "color",
-              "$value": "{post.theme.color.accent.emphasis.bg}"
+              "$value": "{post.theme.color.palettes.accent.bg}"
             },
             "fg": {
               "$type": "color",
-              "$value": "{post.theme.color.accent.emphasis.fg}"
-            },
+              "$value": "{post.theme.color.palettes.accent.fg}"
+            }
+          }
+        }
+      },
+      "helper": {
+        "color": {
+          "default": {
+            "bg-scheme": {
+              "$type": "text",
+              "$value": "{post.theme.palettes.bg-scheme.default}"
+            }
+          },
+          "alternate": {
+            "bg-scheme": {
+              "$type": "text",
+              "$value": "{post.theme.palettes.bg-scheme.alternate}"
+            }
+          },
+          "brand": {
             "bg-scheme": {
               "$type": "text",
-              "$value": "{post.theme.accent.bg-scheme.emphasis}"
+              "$value": "{post.theme.palettes.bg-scheme.brand}"
+            }
+          },
+          "accent": {
+            "bg-scheme": {
+              "$type": "text",
+              "$value": "{post.theme.palettes.bg-scheme.emphasis}"
             }
           }
         }
@@ -8722,8 +9116,7 @@
         "post.core.elevation.5": "S:abb94bfe7966ae2690516196d25db0b65df759e2,"
       },
       "selectedTokenSets": {
-        "core": "enabled",
-        "Palette": "disabled"
+        "core": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:718:1595",
       "$figmaModeId": "718:0",
@@ -8739,6 +9132,8 @@
         "post.core.color.notification.red-light": "dc8a3f925a29ec749bed302314c141a7483ca160",
         "post.core.color.notification.orange-light": "d5f216e93abaa8bd3b7be2708846595265f69acb",
         "post.core.color.notification.blue-light": "96e994c2e2920dcba3de3f9a2ba7b43bf914cb79",
+        "post.core.color.notification.green-night": "3199517b27ac3fe0ab99e52e1b4721f07491796d",
+        "post.core.color.notification.red-night": "f6e214da94b642f7eb2b0593c1e2da44e88749ba",
         "post.core.color.sandgrey.100": "3f0c5233089d823bb75769a5e022748cef8d6beb",
         "post.core.color.sandgrey.000": "0f66c4e1b53dbf13095454ed0247b0e8c3d889e0",
         "post.core.color.sandgrey.002": "e9a3ff986fba3d9d8d34a948ee34993b206ddf1c",
@@ -8780,6 +9175,7 @@
         "post.core.dimension.4": "652e6941eb5ffe7b11b4919943eaa82985cea887",
         "post.core.dimension.5": "4948cef0547c7028ae2b54d67888730ae50a7a51",
         "post.core.dimension.6": "2fb4138c6e29828418c6e0d8c3bb0730efb65c1a",
+        "post.core.dimension.7": "b425da6d6f562134ae5a90e3354c1dd426d7a6dc",
         "post.core.dimension.8": "32a49eb9f6a3706172348bdf0fd51703bdecc0e9",
         "post.core.dimension.9": "ca8146c7e9870c3cf4e15aa0cd4141b129e2a5b5",
         "post.core.dimension.10": "0b8ab9e8f85d59a203c115bacd0e1467302b37d8",
@@ -8825,6 +9221,8 @@
         "post.core.dimension.16-5": "18a30d47473c6776f526d6695a08ebe450ef9fef",
         "post.core.dimension.17-5": "de25828e578f9363bd50fec54426f989e8d618e1",
         "post.core.dimension.26-5": "fc0f8d331a3a6869de95d2f1031974fbc926e0c4",
+        "post.core.dimension.25-5": "52d70e1c63622fee6eeb2d8a176796da6bb60233",
+        "post.core.dimension.24-5": "b4bfb43876d1f47a6b0c4e965437a2f29327ff8c",
         "post.core.font-weight.300": "4436d559d2383ae1a0ad88d57da9ce6360a7aef7",
         "post.core.font-weight.400": "2e0dea0ce52e09ecf1ea56fc61739b5dfd4c1335",
         "post.core.font-weight.500": "b4f03965c86694b373279706e6a7abd0f85ef831",
@@ -8850,9 +9248,7 @@
         "post.core.font-family.swiss-post": "5547f71fafbe8166ac0384fd4e8862796da43fea",
         "post.core.font-family.caveat": "15b599e49f27297ab4aced39752df2cf43f2bb20",
         "post.core.bg-scheme.light": "680b1c2afef596d40c46720eec03880fce677f54",
-        "post.core.bg-scheme.dark": "e8c0b33a001cad7d205a2164de934d28333fc7c4",
-        "post.core.color.notification.green-night": "3199517b27ac3fe0ab99e52e1b4721f07491796d",
-        "post.core.color.notification.red-night": "f6e214da94b642f7eb2b0593c1e2da44e88749ba"
+        "post.core.bg-scheme.dark": "e8c0b33a001cad7d205a2164de934d28333fc7c4"
       }
     },
     {
@@ -8861,8 +9257,7 @@
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
         "core": "source",
-        "Scheme/Light": "enabled",
-        "Palette": "disabled"
+        "Scheme/Light": "enabled"
       },
       "group": "Scheme",
       "$figmaCollectionId": "VariableCollectionId:718:1666",
@@ -8876,6 +9271,8 @@
         "post.scheme.color.signal.warning-light": "89302ce07bdf3dda8857ae055241ba5e55af16c7",
         "post.scheme.color.signal.information-dark": "04907dc5972eef19d828ea38aafba62220824b5c",
         "post.scheme.color.signal.information-light": "92a36e527934b27f741ef1d21ccd77f46081bcea",
+        "post.scheme.color.signal.success-solo": "005074d4749ba0d64a11e8a5c742c48631c98dca",
+        "post.scheme.color.signal.error-solo": "93e0cd4e7a5f9b2a33a76c9c0f3ab60dc5543f66",
         "post.scheme.color.interactive.button.primary.enabled.fg": "2a55e0da7a6a77af2ab682cfee46da43264624cf",
         "post.scheme.color.interactive.button.primary.enabled.bg": "cb811102b963d3ff5f0cfd0cdadb6d1de116e562",
         "post.scheme.color.interactive.button.primary.enabled.stroke": "0a8ee2da5e2d582cb354ee8710efaef60c332a75",
@@ -9007,15 +9404,13 @@
         "post.scheme.color.surface.alternate.fg": "c301615214e1cca28102b3a651f3b8c9da42ca5c",
         "post.scheme.color.surface.brand.bg": "5882e06454efa138fece081c28b7788f52e81621",
         "post.scheme.color.surface.brand.fg": "962f01542da03311583047fbea671773938b354f",
-        "post.scheme.color.surface.emphasis.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d",
-        "post.scheme.color.surface.emphasis.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a",
-        "post.scheme.color.surface.emphasis.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5",
+        "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d",
+        "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a",
+        "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5",
         "post.scheme.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb",
         "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c",
         "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2",
         "post.scheme.color.notification.popover.hover": "9e2793c01c18d6947c2d4e898afcb379426d952c",
-        "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f",
-        "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198",
         "post.scheme.accent.bg-scheme.1": "a7a55881dbc34e6d6b85f0bd30188fb164677678",
         "post.scheme.accent.bg-scheme.2": "a343e732fc434c2a0b9c1597748d8e12a1755aed",
         "post.cargo.scheme.color.surface.default.bg": "41eb3ffd4461ead71c3379a48099d9c674aab882",
@@ -9028,11 +9423,11 @@
         "post.cargo.scheme.color.surface.brand.bg": "8ac0a07d302c92c052a22bb1fd904776139683c2",
         "post.cargo.scheme.color.surface.brand.fg": "45dd08b4fe3f397ab01e14e3ac0df31ba570ea21",
         "post.cargo.scheme.color.surface.brand.fg-accent": "15eac3957d30e8b21001a30f17a62fd362e0c5f0",
-        "post.cargo.scheme.color.surface.emphasis.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6",
-        "post.cargo.scheme.color.surface.emphasis.fg": "e724294b65aca52dcb29118010534f0482bd0881",
-        "post.cargo.scheme.color.surface.emphasis.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2",
-        "post.scheme.color.signal.success-solo": "005074d4749ba0d64a11e8a5c742c48631c98dca",
-        "post.scheme.color.signal.error-solo": "93e0cd4e7a5f9b2a33a76c9c0f3ab60dc5543f66"
+        "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6",
+        "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881",
+        "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2",
+        "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f",
+        "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198"
       }
     },
     {
@@ -9041,11 +9436,8 @@
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
         "core": "source",
-        "Scheme/Light": "enabled",
-        "Scheme/Dark": "enabled",
-        "Palette": "disabled"
+        "Scheme/Dark": "enabled"
       },
-      "group": "Scheme",
       "$figmaCollectionId": "VariableCollectionId:718:1666",
       "$figmaModeId": "718:2",
       "$figmaVariableReferences": {
@@ -9057,8 +9449,8 @@
         "post.scheme.color.signal.warning-light": "89302ce07bdf3dda8857ae055241ba5e55af16c7",
         "post.scheme.color.signal.information-dark": "04907dc5972eef19d828ea38aafba62220824b5c",
         "post.scheme.color.signal.information-light": "92a36e527934b27f741ef1d21ccd77f46081bcea",
-        "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f",
-        "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198",
+        "post.scheme.color.signal.success-solo": "005074d4749ba0d64a11e8a5c742c48631c98dca",
+        "post.scheme.color.signal.error-solo": "93e0cd4e7a5f9b2a33a76c9c0f3ab60dc5543f66",
         "post.scheme.color.interactive.button.primary.enabled.fg": "2a55e0da7a6a77af2ab682cfee46da43264624cf",
         "post.scheme.color.interactive.button.primary.enabled.bg": "cb811102b963d3ff5f0cfd0cdadb6d1de116e562",
         "post.scheme.color.interactive.button.primary.enabled.stroke": "0a8ee2da5e2d582cb354ee8710efaef60c332a75",
@@ -9190,9 +9582,9 @@
         "post.scheme.color.surface.alternate.fg": "c301615214e1cca28102b3a651f3b8c9da42ca5c",
         "post.scheme.color.surface.brand.bg": "5882e06454efa138fece081c28b7788f52e81621",
         "post.scheme.color.surface.brand.fg": "962f01542da03311583047fbea671773938b354f",
-        "post.scheme.color.surface.emphasis.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d",
-        "post.scheme.color.surface.emphasis.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a",
-        "post.scheme.color.surface.emphasis.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5",
+        "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d",
+        "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a",
+        "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5",
         "post.scheme.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb",
         "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c",
         "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2",
@@ -9209,14 +9601,11 @@
         "post.cargo.scheme.color.surface.brand.bg": "8ac0a07d302c92c052a22bb1fd904776139683c2",
         "post.cargo.scheme.color.surface.brand.fg": "45dd08b4fe3f397ab01e14e3ac0df31ba570ea21",
         "post.cargo.scheme.color.surface.brand.fg-accent": "15eac3957d30e8b21001a30f17a62fd362e0c5f0",
-        "post.cargo.scheme.color.surface.emphasis.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6",
-        "post.cargo.scheme.color.surface.emphasis.fg": "e724294b65aca52dcb29118010534f0482bd0881",
-        "post.cargo.scheme.color.surface.emphasis.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2",
-        "post.scheme.accent.color-scheme.1": "d839255ce134d92f7329c05fa6de12dbf8070dae",
-        "post.scheme.accent.color-scheme.2": "96cf7a6141a4e43c6fe044888d7d04c367bf89bc",
-        "post.scheme.color.signal.success-solo": "005074d4749ba0d64a11e8a5c742c48631c98dca",
-        "post.scheme.color.signal.error-solo": "93e0cd4e7a5f9b2a33a76c9c0f3ab60dc5543f66"
-      }
+        "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6",
+        "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881",
+        "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2"
+      },
+      "group": "Scheme"
     },
     {
       "id": "0ce712c559607fae28cbd844cac1884d8f961af2",
@@ -9224,8 +9613,7 @@
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
         "core": "source",
-        "Device/Desktop": "enabled",
-        "Palette": "disabled"
+        "Device/Desktop": "enabled"
       },
       "group": "Device",
       "$figmaCollectionId": "VariableCollectionId:718:1733",
@@ -9338,6 +9726,11 @@
         "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05",
         "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c",
         "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4",
+        "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288",
+        "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967",
+        "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9",
+        "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2",
+        "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6",
         "post.device.spacing.gap.4": "18a97621a6b8cd79f7f4424a6afbc99f49a4104e",
         "post.device.spacing.gap.5": "cd8bc19de4a06c78cf89a9c2ee34309a0f517e9b",
         "post.device.spacing.gap.6": "d3f0e06bad0472f9dec52560b44068444b9f9676",
@@ -9388,7 +9781,8 @@
         "post.device.border-width.focus": "36b85b12779fa51b466bbb29ec9f9a54b1ab7dcc",
         "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30",
         "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378",
-        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9"
+        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9",
+        "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc"
       }
     },
     {
@@ -9398,8 +9792,7 @@
       "selectedTokenSets": {
         "core": "source",
         "Device/Desktop": "enabled",
-        "Device/Tablet": "enabled",
-        "Palette": "disabled"
+        "Device/Tablet": "enabled"
       },
       "group": "Device",
       "$figmaCollectionId": "VariableCollectionId:718:1733",
@@ -9515,6 +9908,10 @@
         "post.device.font-weight.black": "e4cfc49770e938bbde9dd1499500d3c90db21bbf",
         "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c",
         "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4",
+        "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288",
+        "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967",
+        "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9",
+        "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2",
         "post.device.spacing.gap.1": "303b065d5f8bf9049661db8845f2d1e59a4c08b0",
         "post.device.spacing.gap.2": "0e3be5c3cc6b23c8827bc5fb005a234c558199fc",
         "post.device.spacing.gap.3": "91cd08dcbce598d4f63e04fc4e646796d943a377",
@@ -9562,7 +9959,9 @@
         "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30",
         "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378",
         "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05",
-        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9"
+        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9",
+        "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc",
+        "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6"
       }
     },
     {
@@ -9579,8 +9978,7 @@
         "core": "source",
         "Device/Desktop": "enabled",
         "Device/Tablet": "enabled",
-        "Device/Mobile": "enabled",
-        "Palette": "disabled"
+        "Device/Mobile": "enabled"
       },
       "group": "Device",
       "$figmaCollectionId": "VariableCollectionId:718:1733",
@@ -9743,7 +10141,13 @@
         "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4",
         "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05",
         "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9",
-        "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c"
+        "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c",
+        "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288",
+        "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967",
+        "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc",
+        "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9",
+        "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2",
+        "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6"
       }
     },
     {
@@ -9757,8 +10161,7 @@
         "Device/Mobile": "source",
         "Channel/EDK": "enabled",
         "Scheme/Light": "source",
-        "Scheme/Dark": "source",
-        "Palette": "disabled"
+        "Scheme/Dark": "source"
       },
       "group": "Channel",
       "$figmaCollectionId": "VariableCollectionId:718:1734",
@@ -9779,8 +10182,7 @@
         "Channel/EDK": "enabled",
         "Channel/IDK": "enabled",
         "Scheme/Light": "source",
-        "Scheme/Dark": "source",
-        "Palette": "disabled"
+        "Scheme/Dark": "source"
       },
       "group": "Channel",
       "$figmaCollectionId": "VariableCollectionId:718:1734",
@@ -9811,8 +10213,7 @@
         "Elements/ListBullet": "enabled",
         "Elements/ListNumber": "enabled",
         "Scheme/Light": "source",
-        "Scheme/Dark": "source",
-        "Palette": "disabled"
+        "Scheme/Dark": "source"
       },
       "$figmaCollectionId": "VariableCollectionId:3180:16769",
       "$figmaModeId": "3180:1",
@@ -9881,8 +10282,7 @@
         "Theme/Post": "source",
         "Utilities/Color": "enabled",
         "Scheme/Light": "source",
-        "Scheme/Dark": "source",
-        "Palette": "disabled"
+        "Scheme/Dark": "source"
       },
       "$figmaCollectionId": "VariableCollectionId:3180:16768",
       "$figmaModeId": "3180:0",
@@ -10071,8 +10471,9 @@
         "Scheme/Dark": "source",
         "Components/Close": "enabled",
         "Components/Accordion": "enabled",
-        "Components/Quote": "enabled",
-        "Palette": "disabled"
+        "Components/Container": "enabled",
+        "Components/Floating button": "enabled",
+        "Components/Blockquote": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:808:5504",
       "$figmaModeId": "808:0",
@@ -10144,6 +10545,15 @@
         "post.banner.neutral.border.color": "0ff562d88f3593f563203f317655ee7fb4c0e6fe",
         "post.banner.neutral.icon.color": "2e59130401db212ad37cb342a250ee6bc7d859e2",
         "post.banner.neutral.bg-scheme": "34ed982b500a8a935ee38321ce5a07ba49fd2e22",
+        "post.blockquote.border-width.left": "6568787d70363b299117e8c52095eeb14451fe89",
+        "post.blockquote.border.left.color": "adc2d5072c255eb50d74db7d8d3513930191b527",
+        "post.blockquote.margin.block": "bd08d047e4f9a0f40d6fc329ffcfe35605868fa1",
+        "post.blockquote.margin.inline": "e74d12dbeafe66a04d4429241a8c0018b2bd3892",
+        "post.blockquote.padding.inline.start": "7a1872b53d95b09254aedb9c83134c16f257d859",
+        "post.blockquote.padding.inline.end": "4aaac936d03e419c78861c16341f44cc5aa12c27",
+        "post.blockquote.gap.inline": "dc6aadb7c7375ca7445e8e3a7123c31a62ad9b63",
+        "post.blockquote.font-weight": "bbbd5bcf6682a14dd804110603e0f781f880f819",
+        "post.blockquote.font-size": "0ca009d91f5f9572660f874598908a4c2f0fdaa2",
         "post.breadcrumb.enabled-fg": "2baf0e7b11623e8bfb266ffb3a8cf71cc6c4dbd4",
         "post.breadcrumb.hover-fg": "9848a57f5708dd944ac7a829f5031edcc927f7ba",
         "post.breadcrumb.selected-fg": "11ba9dc52d4c5ff12c180643b18255c8f570da7a",
@@ -10236,11 +10646,8 @@
         "post.checkbox.hover-fg": "4cd3a35c6d41c8bf0f327dc00edce076b43375f9",
         "post.checkbox.disabled-bg": "17a75265c1ba9ab24f81d178854bcc374d386772",
         "post.checkbox.disabled-fg": "f67e1029d1f7c3fc93b33b2c7662af38106ac1a7",
-        "post.checkbox.selected-bg": "dfc50424925d3bb701a5e28e2ee112ca1fb13c4a",
-        "post.checkbox.selected-fg": "fd045802c80e76ee3028a5299bd519c39b479a46",
         "post.checkbox.enabled-stroke": "baeb6a8bfd531712283a81c79867de6406094263",
         "post.checkbox.hover-stroke": "09fd9bb754b50d6b5d66a08cb9b5aa02b81f1eb1",
-        "post.checkbox.selected-stroke": "9f457bf24e972f9f8a7d551d304675edee096461",
         "post.checkbox.disabled-stroke": "450e5256bebdcb568e9093e4dd3bfaa329f76d39",
         "post.checkbox.gap.block.group": "c87709f94c2c59282e5bcfc93d28ea57339d29be",
         "post.checkbox.gap.inline.text-start": "6a0ccb17874af047442e69a9ea84440679f3a4e7",
@@ -10260,6 +10667,17 @@
         "post.close.hover-bg": "04ed00d9ede124919214337431759bc5c75816a3",
         "post.close.border-radius": "5ff209f6925d4bc352a576c50751a96b71d67617",
         "post.close.icon.size": "ea8353a741be98ec8b070be1ea1bedbb49292b8c",
+        "post.grid.gutter.xl": "09cf49132842775a8c5dc4a9e2342b146ed4d222",
+        "post.grid.gutter.lg": "cb2be84fab85873639d9f51d869bbe3f00fc626f",
+        "post.grid.gutter.md": "7d1d3b0ffd0f973df1455b0addd7edd6d4a9a148",
+        "post.grid.gutter.sm": "8cbc257669fa886554d3ec8976367eb2d1c64f90",
+        "post.grid.gutter.xs": "cb095450965e3eb35560d2ee9afee14da7543238",
+        "post.grid.margin.xl": "a0941427502b638381a2a96f75850d0dccb0c0e7",
+        "post.grid.margin.lg": "bd3682259dffed2a2fedb59efd7e882cdd8e2276",
+        "post.grid.margin.md": "a34831a53f06e84a574e6c960511c78d5cc1790d",
+        "post.grid.margin.sm": "b69e811ae4854fed0ef53f5ccbaf57daeeff407b",
+        "post.grid.margin.xs": "ca98cb9916a8d625ceb1d0cf79a9cb8f3d4c0d1b",
+        "post.grid.max-width": "2a1752769b46f42590f2f73e8cdb7c4629ecf4fd",
         "post.dropdown.multi-select.menu.category-title.padding.block.outer": "ee99f5a05a5b1c84a69b677a1834d61fead11820",
         "post.dropdown.multi-select.menu.category-title.padding.block.inner": "0c237bda42bc614b0d40c3063b8cd837f6764301",
         "post.dropdown.multi-select.menu.category-title.padding.inline.inner": "3818d730a903399bea6f0a252a8fcad51001a230",
@@ -10447,30 +10865,17 @@
         "post.popover.text.selected-fg": "963b9d422b963ed3acdf1500f4aebfd93e4e98fc",
         "post.popover.paragraph.font-size": "753ab6d39cf4d2df84fe359b6d932172e31f0fab",
         "post.popover.legend.font-size": "ca32c490ebb5bc14ebf424aba54246f56931bde2",
-        "post.quote.border-width.left": "6568787d70363b299117e8c52095eeb14451fe89",
-        "post.quote.border.left.color": "adc2d5072c255eb50d74db7d8d3513930191b527",
-        "post.quote.margin.block": "bd08d047e4f9a0f40d6fc329ffcfe35605868fa1",
-        "post.quote.margin.inline": "e74d12dbeafe66a04d4429241a8c0018b2bd3892",
-        "post.quote.padding.inline.start": "7a1872b53d95b09254aedb9c83134c16f257d859",
-        "post.quote.padding.inline.end": "4aaac936d03e419c78861c16341f44cc5aa12c27",
-        "post.quote.gap.inline": "dc6aadb7c7375ca7445e8e3a7123c31a62ad9b63",
-        "post.quote.font-weight": "bbbd5bcf6682a14dd804110603e0f781f880f819",
-        "post.quote.font-size": "0ca009d91f5f9572660f874598908a4c2f0fdaa2",
         "post.radio-button.enabled-bg": "981537511aa6b68e6575007cd1724da013be2dcc",
         "post.radio-button.enabled-fg": "ad56c5542bcfd074a5baf4037297d0884420cd6d",
         "post.radio-button.hover-bg": "f8df140d31e8b662762a8ad65af72207185e25a6",
         "post.radio-button.hover-fg": "317132a0c272589edf4a4b14e0ae72f2f7ce18a4",
         "post.radio-button.disabled-bg": "c09bc9b42df8004a531165fe1745cfd79cdb9a3e",
         "post.radio-button.disabled-fg": "02139795f587accc9430208032da5a645a1917e9",
-        "post.radio-button.selected-bg": "3897745b964bb30eb717691a728002a210ba7e90",
-        "post.radio-button.selected-fg": "575b9dbb58033e0ae4a7c879cac441faf4ec5236",
         "post.radio-button.enabled-stroke": "d478c213676bcf2eb1ea055a37705d9f6eb33c26",
         "post.radio-button.hover-stroke": "efd5e0b0f302879c355da5d057adaf8ffe41471e",
         "post.radio-button.disabled-stroke": "5b28478865af1ccb34fa372cc316bba7c0eec8c2",
-        "post.radio-button.selected-stroke": "e97845dba6dea97d27e389675a9f4ad2073ad586",
         "post.radio-button.gap.block.group": "9c16987226587efbda8b6ca5dac00608be1e4408",
         "post.radio-button.gap.inline.text-start": "54a8f76477a5a63522d360c6816e113b363647a5",
-        "post.radio-button.gap.inline.group": "0d348d17ca88dc80d153be265c58c3ff2c501b4f",
         "post.radio-button.icon.padding.block.inner": "f32af0ee66b9ed5d12d8b4f13d7c53e4c3d917e7",
         "post.radio-button.icon.padding.block.container": "7226e0dc94e9d28902b5f19ffc2849b9a09a3e96",
         "post.radio-button.icon.padding.inline.inner": "5002aa9fc58b02f27ae1920ed02a8eb25171ffe6",
@@ -10641,23 +11046,27 @@
         "post.input.color.selected-bg": "8bd7235f1399a9bc166130edce1af72427cfb8ed",
         "post.input.color.selected-fg": "1ae0d7346c71e3c28fd3ebe05123a3ea04b3fbe6",
         "post.input.color.helptext-fg": "cc1db7dbc95596ee0f941b44c4b55712ba6625e2",
-        "post.input.color.enabled-stroke": "e8fb5159e5c020c2919c12ad157578d1083b1cc2",
-        "post.input.color.hover-stroke": "5a5615016cc59292e11a683669369db7182dafb9",
-        "post.input.color.disabled-stroke": "c65628869cf318afba36f149d035a6ad6291e0d3",
-        "post.input.color.selected-stroke": "cd6d5766d9f136e44719c7a28eb250c545556c35",
         "post.input.color.signal.error": "7ddc0bfe846c295b5a215c45e423a2fdddf6959a",
         "post.input.color.signal.success": "0157a5c40c9a4eb6f87cfddd9a5c3f3a8a67282e",
-        "post.input.spacing.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d",
-        "post.input.spacing.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65",
-        "post.input.spacing.padding.block.text1": "a2dbf734944c2720e08b06ba2f0d4446807214a7",
-        "post.input.spacing.padding.block.text2": "16e43ccd63e09b43f7078bfdc6bee6432ea4fe9a",
-        "post.input.spacing.padding.block.text-assist": "74fa0091e635d194f2726e8a49d63029f797d7b1",
-        "post.input.spacing.padding.block.text5": "be118ff83da708f6758b8dda877fadaea5a24e3d",
-        "post.input.spacing.padding.inline.text-start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909",
-        "post.input.spacing.padding.inline.text-end": "251080d245b6ce91ef6947cedb9d8710871c1e45",
-        "post.input.spacing.padding.inline.text-assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f",
+        "post.input.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d",
+        "post.input.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65",
+        "post.input.padding.inline.start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909",
+        "post.input.padding.inline.end": "251080d245b6ce91ef6947cedb9d8710871c1e45",
         "post.input.sizing.icon": "d8468d53a31f1ff5e298f2e6783a215bc1a9902c",
         "post.input.border-radius.surface": "d06c0dd30f742b0d6cd4cbddcf2ee20dc059be64",
+        "post.input.border-width": "1ade7245040a677b64153d2cdf6651fcea38bf0e",
+        "post.input.empty.padding.block": "5e8222cbe4c364dc01d3f3a4bdc58faa38f2056c",
+        "post.input.label.empty.padding.block.start": "d62b407bf1b5948a054a4f578b2cddaeb4c37c34",
+        "post.input.label.empty.padding.inline.start": "b51731dc964c610165cf1ae964d243ad78df81e5",
+        "post.input.label.empty.padding.inline.end": "3717013c982ae87b4a055205377945bfd6f49e68",
+        "post.input.label.validated.padding.inline.end": "e48ddec27eff926626a3b10a7861ec56e487e335",
+        "post.input.validation.icon.position.inline.end": "b57f1666c23edfb6f677c04e41bc20ebaae726cc",
+        "post.input.filled.padding.block.start": "2924bedf122ccb4ab278a3ce28e06a8337c84059",
+        "post.input.filled.padding.block.end": "66ffd33591a7dcb8d7d81b4a9ceb90cb563652d2",
+        "post.input.label.filled.padding.block.start": "25bb881879bcfa6f8fc16fbda7cd5164a5083252",
+        "post.input.sizing.height": "82cf75a7b82a124c9b1d42cdbc0e9e84e3b11b9b",
+        "post.input.label.filled.font-size": "a12f8c5b97bd1f6bf59bf7da851dba7386e1396e",
+        "post.input.assist.font-size": "69317593d3b185baf0fb132ac414e643e3c95ae1",
         "post.toast.spacing.padding.action": "7b789908238cacf3f7c6b327401296ec0a1da28c",
         "post.toast.spacing.padding.inline": "014e44c5cc1c44d944c9d6df6c213c429f99c76d",
         "post.toast.spacing.padding.block": "8588d5bd126b4227934aec9c655f6dbcb10a84b7",
@@ -10681,10 +11090,33 @@
         "post.toast.color.error-fg": "3cd318ecaa756db2fe98be4cd0c2d2c5a9f231d0",
         "post.toast.color.error-stroke": "3432663173b4389104a12a668043e3681e2faa69",
         "post.toast.color.error-icon": "3096bb0553257be18a766df213ba83685ab63040",
-        "post.validation.list.gap.inline": "a76607434c393d743d38b71824d9d76e533acca2",
-        "post.validation.list.padding.block.text": "37b3685608b0a7ee4bdc297d80ea55c77856c2ee",
+        "post.floating-button.position.right": "5f5f7a00e0660158923bd57ee08d5f10c4074526",
+        "post.floating-button.position.top": "ff8db193bebd896a1c226be5aa69b28b3729c785",
+        "post.floating-button.enabled-fg": "77f009565576cc049046b990ef2b0688a43becd7",
+        "post.floating-button.enabled-bg": "491d5f34dd817b87c813955d6aa84eae900a5f5a",
+        "post.floating-button.enabled-border": "fced80ecb14d12d7a312fb54984a6af601983225",
+        "post.floating-button.hover-fg": "a5e426e2322345c0f300633465e4d73b4d5a5750",
+        "post.floating-button.hover-bg": "519c5bcb2886492720446c365d4f5c3fa85ad996",
+        "post.floating-button.hover-border": "54e694dd7772f673e1e7bee834f5dc211887faf2",
+        "post.floating-button.size.outer": "5e349e3dfa6c657612a01f07c5c7259dc97a93ef",
+        "post.floating-button.size.icon": "6f2ead50c9777b5b55aece34c2e65d4c4f9dd05d",
+        "post.floating-button.border-width": "780bc7b400761532094e6fd9dacf8c0d92c69383",
+        "post.floating-button.border-radius.round": "40f3a56c25ca39dec619b9bea5f19a4c2e0e4a50",
+        "post.validation.group.gap.inline": "a76607434c393d743d38b71824d9d76e533acca2",
+        "post.validation.group.padding.block.text": "37b3685608b0a7ee4bdc297d80ea55c77856c2ee",
+        "post.validation.group.icon.size": "ce5d0ae47c1f80a7ea39a6e5b25a00055c450e7d",
+        "post.validation.group.icon.padding": "4c33e15ce67a9e7398af3f45682774c919629a17",
         "post.validation.error": "796bdb2fc917b5948438070371ae60d214216795",
-        "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371"
+        "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371",
+        "post.validation.input.padding.block": "4006573d3a03f1b053a844aaf89e14742a3d3646",
+        "post.validation.input.padding.inline": "8df0e5f5587acbb1f7acb67a97e200e2175d6469",
+        "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f",
+        "post.input.color.enabled-border": "e8fb5159e5c020c2919c12ad157578d1083b1cc2",
+        "post.input.color.hover-border": "5a5615016cc59292e11a683669369db7182dafb9",
+        "post.input.color.disabled-border": "c65628869cf318afba36f149d035a6ad6291e0d3",
+        "post.input.color.selected-border": "cd6d5766d9f136e44719c7a28eb250c545556c35",
+        "post.input.padding.inline.assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f",
+        "post.input.padding.block.assist": "74fa0091e635d194f2726e8a49d63029f797d7b1"
       }
     },
     {
@@ -10735,8 +11167,7 @@
         "Utilities/Spacing": "source",
         "Utilities/Typo": "source",
         "Scheme/Light": "source",
-        "Scheme/Dark": "source",
-        "Palette": "disabled"
+        "Scheme/Dark": "source"
       }
     },
     {
@@ -10752,25 +11183,24 @@
         "Channel/IDK": "source",
         "Theme/Post": "enabled",
         "Scheme/Light": "source",
-        "Scheme/Dark": "source",
-        "Palette": "disabled"
+        "Scheme/Dark": "source"
       },
       "group": "Theme",
       "$figmaCollectionId": "VariableCollectionId:4178:5613",
       "$figmaModeId": "4178:0",
       "$figmaVariableReferences": {
-        "post.theme.accent.bg-scheme.brand": "ac9cc556351b9d9b72ce01e166e148b74b25de3f",
-        "post.theme.accent.bg-scheme.emphasis": "f37d68c8d5ee579997a1a1b403162484c8cff869",
-        "post.theme.color.accent.brand.bg": "2f0b9e90b3d7117a9d7037b325deac970c3bee16",
-        "post.theme.color.accent.brand.fg": "8ce342d323f6022375641c1f92d265636eda0015",
-        "post.theme.color.accent.emphasis.bg": "36c62b7057d0d665572ef3d4be91dd81c61fb13b",
-        "post.theme.color.accent.emphasis.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d",
-        "post.theme.accent.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340",
-        "post.theme.accent.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0",
-        "post.theme.color.accent.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009",
-        "post.theme.color.accent.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b",
-        "post.theme.color.accent.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2",
-        "post.theme.color.accent.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121"
+        "post.theme.palettes.bg-scheme.brand": "ac9cc556351b9d9b72ce01e166e148b74b25de3f",
+        "post.theme.palettes.bg-scheme.emphasis": "f37d68c8d5ee579997a1a1b403162484c8cff869",
+        "post.theme.color.palettes.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009",
+        "post.theme.color.palettes.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b",
+        "post.theme.color.palettes.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2",
+        "post.theme.color.palettes.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121",
+        "post.theme.color.palettes.brand.bg": "2f0b9e90b3d7117a9d7037b325deac970c3bee16",
+        "post.theme.color.palettes.brand.fg": "8ce342d323f6022375641c1f92d265636eda0015",
+        "post.theme.color.palettes.accent.bg": "36c62b7057d0d665572ef3d4be91dd81c61fb13b",
+        "post.theme.color.palettes.accent.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d",
+        "post.theme.palettes.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340",
+        "post.theme.palettes.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0"
       }
     },
     {
@@ -10787,25 +11217,24 @@
         "Theme/Post": "enabled",
         "Theme/Cargo": "enabled",
         "Scheme/Light": "source",
-        "Scheme/Dark": "source",
-        "Palette": "disabled"
+        "Scheme/Dark": "source"
       },
       "group": "Theme",
       "$figmaCollectionId": "VariableCollectionId:4178:5613",
       "$figmaModeId": "4178:1",
       "$figmaVariableReferences": {
-        "post.theme.accent.bg-scheme.brand": "ac9cc556351b9d9b72ce01e166e148b74b25de3f",
-        "post.theme.accent.bg-scheme.emphasis": "f37d68c8d5ee579997a1a1b403162484c8cff869",
-        "post.theme.accent.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340",
-        "post.theme.accent.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0",
-        "post.theme.color.accent.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009",
-        "post.theme.color.accent.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b",
-        "post.theme.color.accent.brand.bg": "2f0b9e90b3d7117a9d7037b325deac970c3bee16",
-        "post.theme.color.accent.brand.fg": "8ce342d323f6022375641c1f92d265636eda0015",
-        "post.theme.color.accent.emphasis.bg": "36c62b7057d0d665572ef3d4be91dd81c61fb13b",
-        "post.theme.color.accent.emphasis.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d",
-        "post.theme.color.accent.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2",
-        "post.theme.color.accent.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121"
+        "post.theme.palettes.bg-scheme.brand": "ac9cc556351b9d9b72ce01e166e148b74b25de3f",
+        "post.theme.palettes.bg-scheme.emphasis": "f37d68c8d5ee579997a1a1b403162484c8cff869",
+        "post.theme.palettes.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340",
+        "post.theme.palettes.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0",
+        "post.theme.color.palettes.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009",
+        "post.theme.color.palettes.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b",
+        "post.theme.color.palettes.brand.bg": "2f0b9e90b3d7117a9d7037b325deac970c3bee16",
+        "post.theme.color.palettes.brand.fg": "8ce342d323f6022375641c1f92d265636eda0015",
+        "post.theme.color.palettes.accent.bg": "36c62b7057d0d665572ef3d4be91dd81c61fb13b",
+        "post.theme.color.palettes.accent.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d",
+        "post.theme.color.palettes.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2",
+        "post.theme.color.palettes.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121"
       }
     },
     {
@@ -10823,8 +11252,7 @@
         "Channel/IDK": "source",
         "Theme/Post": "source",
         "Theme/Cargo": "source",
-        "Helpers/Focus": "enabled",
-        "Palette": "disabled"
+        "Helpers/Focus": "enabled"
       },
       "group": "Helpers",
       "$figmaCollectionId": "VariableCollectionId:6402:53868",
@@ -10839,7 +11267,7 @@
     },
     {
       "id": "4fce02b2d68c0ae155900265b9454f5be46d8e41",
-      "name": "Palette",
+      "name": "Palettes",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
         "core": "source",
@@ -10849,8 +11277,24 @@
         "Channel/IDK": "source",
         "Theme/Post": "source",
         "Theme/Cargo": "source",
-        "Palette": "enabled"
-      }
+        "Palettes": "enabled"
+      },
+      "$figmaVariableReferences": {
+        "post.palettes.color.default.bg": "5f2f435ea49163621af38ad9798447b33aad773f",
+        "post.palettes.color.default.fg": "80efe4f04b5e45d5cc9e52ae9c3e8dda513be416",
+        "post.palettes.color.alternate.bg": "6aafe2ec830a8e40b6527e4e7ce747020c52fd5c",
+        "post.palettes.color.alternate.fg": "c153f71f5f8d3f3764c30f8c0a48bdbdabc6a315",
+        "post.palettes.color.brand.bg": "f7dc423347aa56d02ae018041c30012f0f03f705",
+        "post.palettes.color.brand.fg": "2993fc79c7cb6c8e21304ce9402f982c307b3ef5",
+        "post.palettes.color.accent.bg": "bebb902555f6fd7e56bb27beb353c67b57c67300",
+        "post.palettes.color.accent.fg": "b3152bf53241705ef5d7b1ed6b4cc337168dbc8b",
+        "post.helper.color.default.bg-scheme": "bffc748a647519df3ac363c7689959d519e20c12",
+        "post.helper.color.alternate.bg-scheme": "35ca2ec5aa7df847d668c0794c39418031aa4af3",
+        "post.helper.color.brand.bg-scheme": "6ab3cbe158c483c535915d83468581ba23976c37",
+        "post.helper.color.accent.bg-scheme": "4447066e00815b7cb14e6f681a879db7a1ef4d15"
+      },
+      "$figmaCollectionId": "VariableCollectionId:6959:10217",
+      "$figmaModeId": "6959:0"
     }
   ],
   "$metadata": {
@@ -10877,10 +11321,12 @@
       "Components/Avatar",
       "Components/Badge",
       "Components/Banner",
+      "Components/Blockquote",
       "Components/Breadcrumb",
       "Components/Button",
       "Components/Checkbox",
       "Components/Close",
+      "Components/Container",
       "Components/Dropdown",
       "Components/Form footer",
       "Components/Grid",
@@ -10891,7 +11337,6 @@
       "Components/List simple",
       "Components/Notifications",
       "Components/Popover",
-      "Components/Quote",
       "Components/Radio button",
       "Components/Segmented button",
       "Components/Select",
@@ -10902,12 +11347,13 @@
       "Components/Text highlighted",
       "Components/Text input",
       "Components/Toast",
+      "Components/Floating button",
       "Components/Validation",
       "FigmaOnly",
       "Utilities/Spacing",
       "Utilities/Color",
       "Utilities/Typo",
-      "Palette",
+      "Palettes",
       "Helpers/Focus"
     ]
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b6df7bb00..534dde8797 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,7 +47,7 @@ importers:
         specifier: 0.3.7
         version: 0.3.7
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       ally.js:
         specifier: 1.4.1
@@ -150,10 +150,10 @@ importers:
         specifier: 18.2.10
         version: 18.2.10(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.2.10(@angular/animations@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1)
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../components
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       rxjs:
         specifier: 7.8.1
@@ -167,7 +167,7 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: 18.2.11
-        version: 18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@22.7.9)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.7.9)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(karma@6.4.4)(ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(tslib@2.6.3)(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(typescript@5.5.4)
+        version: 18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@22.7.9)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.7.9))(karma@6.4.4)(ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7)(tslib@2.6.3)(typescript@5.5.4))(tailwindcss@3.4.7)(typescript@5.5.4)
       '@angular-eslint/builder':
         specifier: 18.4.0
         version: 18.4.0(eslint@8.57.0)(typescript@5.5.4)
@@ -218,7 +218,7 @@ importers:
         version: 2.1.0(jasmine-core@5.2.0)(karma-jasmine@5.1.0(karma@6.4.4))(karma@6.4.4)
       ng-packagr:
         specifier: 18.1.0
-        version: 18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(tslib@2.6.3)(typescript@5.5.4)
+        version: 18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7)(tslib@2.6.3)(typescript@5.5.4)
       typescript:
         specifier: 5.5.4
         version: 5.5.4
@@ -232,7 +232,7 @@ importers:
         specifier: ^16.0.0 || ^17.0.0 || ^18.0.0
         version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8)
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../../../components
       tslib:
         specifier: 2.6.3
@@ -242,7 +242,7 @@ importers:
   packages/components-react:
     dependencies:
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../components
     devDependencies:
       '@types/node':
@@ -294,19 +294,19 @@ importers:
   packages/documentation:
     dependencies:
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../components
       '@swisspost/design-system-components-react':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../components-react
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../icons
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       '@swisspost/internet-header':
-        specifier: workspace:2.0.0-next.3
+        specifier: workspace:2.0.0-next.4
         version: link:../internet-header
       bootstrap:
         specifier: 5.3.3
@@ -364,10 +364,10 @@ importers:
         specifier: 8.3.6
         version: 8.3.6(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.25.3(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@22.7.9)(less@4.2.0)(sass@1.78.0)(terser@5.31.6))
       '@swisspost/design-system-components-angular':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../components-angular/dist/components
       '@swisspost/design-system-intranet-header':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../intranet-header-workspace/dist/intranet-header
       '@types/css-modules':
         specifier: 1.0.5
@@ -502,7 +502,7 @@ importers:
   packages/internet-header:
     dependencies:
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       body-scroll-lock:
         specifier: 4.0.0-beta.0
@@ -653,7 +653,7 @@ importers:
         specifier: 2.11.8
         version: 2.11.8
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       rxjs:
         specifier: 7.8.1
@@ -670,7 +670,7 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: 18.2.11
-        version: 18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@20.14.14)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(karma@6.4.4)(ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(tslib@2.6.3)(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(typescript@5.5.4)
+        version: 18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@20.14.14)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@20.14.14))(karma@6.4.4)(ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7)(tslib@2.6.3)(typescript@5.5.4))(tailwindcss@3.4.7)(typescript@5.5.4)
       '@angular-eslint/builder':
         specifier: 18.4.0
         version: 18.4.0(eslint@8.57.0)(typescript@5.5.4)
@@ -724,7 +724,7 @@ importers:
         version: 2.1.0(jasmine-core@5.2.0)(karma-jasmine@5.1.0(karma@6.4.4))(karma@6.4.4)
       ng-packagr:
         specifier: 18.1.0
-        version: 18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(tslib@2.6.3)(typescript@5.5.4)
+        version: 18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7)(tslib@2.6.3)(typescript@5.5.4)
       npm-run-all2:
         specifier: 5.0.0
         version: 5.0.0
@@ -747,21 +747,21 @@ importers:
         specifier: ^16.0.0 || ^17.0.0 || ^18.0.0
         version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../../../styles/dist
       tslib:
         specifier: 2.6.3
         version: 2.6.3
     devDependencies:
       '@swisspost/design-system-intranet-header-workspace':
-        specifier: workspace:3.0.22-next.3
+        specifier: workspace:3.0.22-next.4
         version: link:../..
     publishDirectory: ../../dist/intranet-header
 
   packages/intranet-header-workspace/projects/intranet-header-showcase:
     dependencies:
       '@swisspost/design-system-intranet-header':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../../dist/intranet-header
 
   packages/migrations:
@@ -807,13 +807,13 @@ importers:
   packages/nextjs-integration:
     dependencies:
       '@swisspost/design-system-components-react':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../components-react
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       '@swisspost/internet-header':
-        specifier: workspace:2.0.0-next.3
+        specifier: workspace:2.0.0-next.4
         version: link:../internet-header
       next:
         specifier: 15.0.1
@@ -875,10 +875,10 @@ importers:
         version: 3.0.0
     devDependencies:
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../icons
       '@swisspost/design-system-tokens':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../tokens/dist
       '@types/node':
         specifier: 20.14.14
@@ -969,7 +969,7 @@ importers:
         specifier: 18.2.10
         version: 18.2.10(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.2.10(@angular/animations@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       primeng:
         specifier: 17.18.7
@@ -986,7 +986,7 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: 18.2.11
-        version: 18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@22.7.9)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.7.9)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(karma@6.4.4)(ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(tslib@2.6.3)(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(typescript@5.5.4)
+        version: 18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@22.7.9)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.7.9))(karma@6.4.4)(ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7)(tslib@2.6.3)(typescript@5.5.4))(tailwindcss@3.4.7)(typescript@5.5.4)
       '@angular/cli':
         specifier: 18.2.11
         version: 18.2.11(chokidar@3.6.0)
@@ -1016,7 +1016,7 @@ importers:
         version: 2.1.0(jasmine-core@5.2.0)(karma-jasmine@5.1.0(karma@6.4.4))(karma@6.4.4)
       ng-packagr:
         specifier: 18.1.0
-        version: 18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(tslib@2.6.3)(typescript@5.5.4)
+        version: 18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7)(tslib@2.6.3)(typescript@5.5.4)
       npm-run-all2:
         specifier: 7.0.0
         version: 7.0.0
@@ -1045,7 +1045,7 @@ importers:
         specifier: ^18.0.0
         version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../../../styles/dist
       primeng:
         specifier: ^17.18.0
@@ -1060,6 +1060,9 @@ importers:
       '@tokens-studio/sd-transforms':
         specifier: 1.2.2
         version: 1.2.2(style-dictionary@4.0.1)
+      copyfiles:
+        specifier: 2.4.1
+        version: 2.4.1
       rimraf:
         specifier: 6.0.1
         version: 6.0.1
@@ -11143,13 +11146,13 @@ snapshots:
     transitivePeerDependencies:
       - chokidar
 
-  '@angular-devkit/build-angular@18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@20.14.14)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(karma@6.4.4)(ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(tslib@2.6.3)(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(typescript@5.5.4)':
+  '@angular-devkit/build-angular@18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@20.14.14)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@20.14.14))(karma@6.4.4)(ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7)(tslib@2.6.3)(typescript@5.5.4))(tailwindcss@3.4.7)(typescript@5.5.4)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.1802.11(chokidar@3.6.0)
       '@angular-devkit/build-webpack': 0.1802.11(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.94.0(esbuild@0.23.0)))(webpack@5.94.0(esbuild@0.23.0))
       '@angular-devkit/core': 18.2.11(chokidar@3.6.0)
-      '@angular/build': 18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@20.14.14)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.41)(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(terser@5.31.6)(typescript@5.5.4)
+      '@angular/build': 18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@20.14.14)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.41)(tailwindcss@3.4.7)(terser@5.31.6)(typescript@5.5.4)
       '@angular/compiler-cli': 18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4)
       '@babel/core': 7.25.2
       '@babel/generator': 7.25.0
@@ -11165,7 +11168,7 @@ snapshots:
       '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.4.6(@types/node@20.14.14)(less@4.2.0)(sass@1.77.6)(terser@5.31.6))
       ansi-colors: 4.1.3
       autoprefixer: 10.4.20(postcss@8.4.41)
-      babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.94.0)
+      babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.94.0(esbuild@0.23.0))
       browserslist: 4.24.2
       copy-webpack-plugin: 12.0.2(webpack@5.94.0(esbuild@0.23.0))
       critters: 0.0.24
@@ -11212,10 +11215,10 @@ snapshots:
     optionalDependencies:
       '@angular/localize': 18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))
       esbuild: 0.23.0
-      jest: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
+      jest: 29.7.0(@types/node@20.14.14)
       jest-environment-jsdom: 29.7.0
       karma: 6.4.4
-      ng-packagr: 18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(tslib@2.6.3)(typescript@5.5.4)
+      ng-packagr: 18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7)(tslib@2.6.3)(typescript@5.5.4)
       tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
     transitivePeerDependencies:
       - '@rspack/core'
@@ -11235,13 +11238,13 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@angular-devkit/build-angular@18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@22.7.9)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.7.9)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(karma@6.4.4)(ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(tslib@2.6.3)(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(typescript@5.5.4)':
+  '@angular-devkit/build-angular@18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@22.7.9)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.7.9))(karma@6.4.4)(ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7)(tslib@2.6.3)(typescript@5.5.4))(tailwindcss@3.4.7)(typescript@5.5.4)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.1802.11(chokidar@3.6.0)
       '@angular-devkit/build-webpack': 0.1802.11(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.94.0(esbuild@0.23.0)))(webpack@5.94.0(esbuild@0.23.0))
       '@angular-devkit/core': 18.2.11(chokidar@3.6.0)
-      '@angular/build': 18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@22.7.9)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.41)(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(terser@5.31.6)(typescript@5.5.4)
+      '@angular/build': 18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@22.7.9)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.41)(tailwindcss@3.4.7)(terser@5.31.6)(typescript@5.5.4)
       '@angular/compiler-cli': 18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4)
       '@babel/core': 7.25.2
       '@babel/generator': 7.25.0
@@ -11257,7 +11260,7 @@ snapshots:
       '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.4.6(@types/node@22.7.9)(less@4.2.0)(sass@1.77.6)(terser@5.31.6))
       ansi-colors: 4.1.3
       autoprefixer: 10.4.20(postcss@8.4.41)
-      babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.94.0)
+      babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.94.0(esbuild@0.23.0))
       browserslist: 4.24.2
       copy-webpack-plugin: 12.0.2(webpack@5.94.0(esbuild@0.23.0))
       critters: 0.0.24
@@ -11304,11 +11307,11 @@ snapshots:
     optionalDependencies:
       '@angular/localize': 18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))
       esbuild: 0.23.0
-      jest: 29.7.0(@types/node@22.7.9)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))
+      jest: 29.7.0(@types/node@22.7.9)
       jest-environment-jsdom: 29.7.0
       karma: 6.4.4
-      ng-packagr: 18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(tslib@2.6.3)(typescript@5.5.4)
-      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))
+      ng-packagr: 18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7)(tslib@2.6.3)(typescript@5.5.4)
+      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
     transitivePeerDependencies:
       - '@rspack/core'
       - '@swc/core'
@@ -11434,7 +11437,7 @@ snapshots:
       tslib: 2.6.3
     optional: true
 
-  '@angular/build@18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@20.14.14)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.41)(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(terser@5.31.6)(typescript@5.5.4)':
+  '@angular/build@18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@20.14.14)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.41)(tailwindcss@3.4.7)(terser@5.31.6)(typescript@5.5.4)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.1802.11(chokidar@3.6.0)
@@ -11478,7 +11481,7 @@ snapshots:
       - supports-color
       - terser
 
-  '@angular/build@18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@22.7.9)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.41)(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(terser@5.31.6)(typescript@5.5.4)':
+  '@angular/build@18.2.11(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))))(@types/node@22.7.9)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.41)(tailwindcss@3.4.7)(terser@5.31.6)(typescript@5.5.4)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.1802.11(chokidar@3.6.0)
@@ -11511,7 +11514,7 @@ snapshots:
       '@angular/localize': 18.2.10(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))
       less: 4.2.0
       postcss: 8.4.41
-      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))
+      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
     transitivePeerDependencies:
       - '@types/node'
       - chokidar
@@ -13457,42 +13460,6 @@ snapshots:
       - supports-color
       - ts-node
 
-  '@jest/core@29.7.0(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))':
-    dependencies:
-      '@jest/console': 29.7.0
-      '@jest/reporters': 29.7.0
-      '@jest/test-result': 29.7.0
-      '@jest/transform': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 20.14.14
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      exit: 0.1.2
-      graceful-fs: 4.2.11
-      jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))
-      jest-haste-map: 29.7.0
-      jest-message-util: 29.7.0
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-resolve-dependencies: 29.7.0
-      jest-runner: 29.7.0
-      jest-runtime: 29.7.0
-      jest-snapshot: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      jest-watcher: 29.7.0
-      micromatch: 4.0.8
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-ansi: 6.0.1
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-    optional: true
-
   '@jest/environment@29.7.0':
     dependencies:
       '@jest/fake-timers': 29.7.0
@@ -15558,13 +15525,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.94.0):
+  babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.94.0(esbuild@0.23.0)):
     dependencies:
       '@babel/core': 7.25.2
       find-cache-dir: 4.0.0
       schema-utils: 4.0.1
       webpack: 5.94.0(esbuild@0.23.0)
 
+  babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.94.0):
+    dependencies:
+      '@babel/core': 7.25.2
+      find-cache-dir: 4.0.0
+      schema-utils: 4.0.1
+      webpack: 5.94.0
+
   babel-plugin-istanbul@6.1.1:
     dependencies:
       '@babel/helper-plugin-utils': 7.25.9
@@ -16178,13 +16152,13 @@ snapshots:
       - supports-color
       - ts-node
 
-  create-jest@29.7.0(@types/node@22.7.9)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)):
+  create-jest@29.7.0(@types/node@22.7.9):
     dependencies:
       '@jest/types': 29.6.3
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@22.7.9)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))
+      jest-config: 29.7.0(@types/node@22.7.9)
       jest-util: 29.7.0
       prompts: 2.4.2
     transitivePeerDependencies:
@@ -18799,16 +18773,16 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-cli@29.7.0(@types/node@22.7.9)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)):
+  jest-cli@29.7.0(@types/node@22.7.9):
     dependencies:
-      '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))
+      '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
       chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@22.7.9)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))
+      create-jest: 29.7.0(@types/node@22.7.9)
       exit: 0.1.2
       import-local: 3.2.0
-      jest-config: 29.7.0(@types/node@22.7.9)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))
+      jest-config: 29.7.0(@types/node@22.7.9)
       jest-util: 29.7.0
       jest-validate: 29.7.0
       yargs: 17.7.2
@@ -18850,39 +18824,7 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-config@29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)):
-    dependencies:
-      '@babel/core': 7.25.2
-      '@jest/test-sequencer': 29.7.0
-      '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.25.2)
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      deepmerge: 4.3.1
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      jest-circus: 29.7.0
-      jest-environment-node: 29.7.0
-      jest-get-type: 29.6.3
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-runner: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      micromatch: 4.0.8
-      parse-json: 5.2.0
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-json-comments: 3.1.1
-    optionalDependencies:
-      '@types/node': 20.14.14
-      ts-node: 10.9.2(@types/node@22.7.9)(typescript@5.5.4)
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-    optional: true
-
-  jest-config@29.7.0(@types/node@22.7.9)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)):
+  jest-config@29.7.0(@types/node@22.7.9):
     dependencies:
       '@babel/core': 7.25.2
       '@jest/test-sequencer': 29.7.0
@@ -18908,7 +18850,6 @@ snapshots:
       strip-json-comments: 3.1.1
     optionalDependencies:
       '@types/node': 22.7.9
-      ts-node: 10.9.2(@types/node@22.7.9)(typescript@5.5.4)
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -19174,12 +19115,12 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest@29.7.0(@types/node@22.7.9)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)):
+  jest@29.7.0(@types/node@22.7.9):
     dependencies:
-      '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))
+      '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
       '@jest/types': 29.6.3
       import-local: 3.2.0
-      jest-cli: 29.7.0(@types/node@22.7.9)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))
+      jest-cli: 29.7.0(@types/node@22.7.9)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -20307,7 +20248,7 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(tslib@2.6.3)(typescript@5.5.4):
+  ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7)(tslib@2.6.3)(typescript@5.5.4):
     dependencies:
       '@angular/compiler-cli': 18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4)
       '@rollup/plugin-json': 6.1.0(rollup@4.18.1)
@@ -20340,39 +20281,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ng-packagr@18.1.0(@angular/compiler-cli@18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)))(tslib@2.6.3)(typescript@5.5.4):
-    dependencies:
-      '@angular/compiler-cli': 18.2.10(@angular/compiler@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4)
-      '@rollup/plugin-json': 6.1.0(rollup@4.18.1)
-      '@rollup/plugin-node-resolve': 15.2.3(rollup@4.18.1)
-      '@rollup/wasm-node': 4.18.1
-      ajv: 8.16.0
-      ansi-colors: 4.1.3
-      browserslist: 4.23.0
-      cacache: 18.0.0
-      chokidar: 3.6.0
-      commander: 12.0.0
-      convert-source-map: 2.0.0
-      dependency-graph: 1.0.0
-      esbuild: 0.23.0
-      fast-glob: 3.3.2
-      find-cache-dir: 3.3.2
-      injection-js: 2.4.0
-      jsonc-parser: 3.3.1
-      less: 4.2.0
-      ora: 5.4.1
-      piscina: 4.6.1
-      postcss: 8.4.39
-      rxjs: 7.8.1
-      sass: 1.78.0
-      tslib: 2.6.3
-      typescript: 5.5.4
-    optionalDependencies:
-      rollup: 4.18.1
-      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))
-    transitivePeerDependencies:
-      - supports-color
-
   nice-napi@1.0.2:
     dependencies:
       node-addon-api: 3.2.1
@@ -21049,15 +20957,6 @@ snapshots:
       postcss: 8.4.40
       ts-node: 10.9.2(@types/node@20.14.14)(typescript@5.5.4)
 
-  postcss-load-config@4.0.2(postcss@8.4.40)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)):
-    dependencies:
-      lilconfig: 3.1.2
-      yaml: 2.5.0
-    optionalDependencies:
-      postcss: 8.4.40
-      ts-node: 10.9.2(@types/node@22.7.9)(typescript@5.5.4)
-    optional: true
-
   postcss-load-config@5.1.0(jiti@1.21.6)(postcss@8.4.40):
     dependencies:
       lilconfig: 3.1.2
@@ -22801,34 +22700,6 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.7(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
-      micromatch: 4.0.7
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.40
-      postcss-import: 15.1.0(postcss@8.4.40)
-      postcss-js: 4.0.1(postcss@8.4.40)
-      postcss-load-config: 4.0.2(postcss@8.4.40)(ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4))
-      postcss-nested: 6.2.0(postcss@8.4.40)
-      postcss-selector-parser: 6.1.1
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
-    optional: true
-
   tapable@2.2.1: {}
 
   tar@6.1.14:
@@ -22863,7 +22734,7 @@ snapshots:
 
   term-size@2.2.1: {}
 
-  terser-webpack-plugin@5.3.10(esbuild@0.23.0)(webpack@5.94.0):
+  terser-webpack-plugin@5.3.10(esbuild@0.23.0)(webpack@5.94.0(esbuild@0.23.0)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
@@ -22874,6 +22745,15 @@ snapshots:
     optionalDependencies:
       esbuild: 0.23.0
 
+  terser-webpack-plugin@5.3.10(webpack@5.94.0):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      jest-worker: 27.5.1
+      schema-utils: 3.3.0
+      serialize-javascript: 6.0.2
+      terser: 5.31.6
+      webpack: 5.94.0
+
   terser@5.31.6:
     dependencies:
       '@jridgewell/source-map': 0.3.3
@@ -23041,25 +22921,6 @@ snapshots:
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
 
-  ts-node@10.9.2(@types/node@22.7.9)(typescript@5.5.4):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.9
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 22.7.9
-      acorn: 8.9.0
-      acorn-walk: 8.2.0
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.5.4
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optional: true
-
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
@@ -23665,6 +23526,36 @@ snapshots:
 
   webpack-virtual-modules@0.5.0: {}
 
+  webpack@5.94.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      '@webassemblyjs/ast': 1.12.1
+      '@webassemblyjs/wasm-edit': 1.12.1
+      '@webassemblyjs/wasm-parser': 1.12.1
+      acorn: 8.11.3
+      acorn-import-attributes: 1.9.5(acorn@8.11.3)
+      browserslist: 4.24.2
+      chrome-trace-event: 1.0.3
+      enhanced-resolve: 5.17.1
+      es-module-lexer: 1.5.3
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.0
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 3.3.0
+      tapable: 2.2.1
+      terser-webpack-plugin: 5.3.10(webpack@5.94.0)
+      watchpack: 2.4.1
+      webpack-sources: 3.2.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+
   webpack@5.94.0(esbuild@0.23.0):
     dependencies:
       '@types/estree': 1.0.6
@@ -23687,7 +23578,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(esbuild@0.23.0)(webpack@5.94.0)
+      terser-webpack-plugin: 5.3.10(esbuild@0.23.0)(webpack@5.94.0(esbuild@0.23.0))
       watchpack: 2.4.1
       webpack-sources: 3.2.3
     transitivePeerDependencies: